/*
 * cat.kenji00.com レスポンシブ用の追加 CSS（tools/modernize_cat.py が docroot にコピーする）
 * PC（幅 960px 以上）の見た目は変えない。そのため、ルールは max-width: 959px の中に書く。
 * 例外は先頭の「文字のコントラスト」だけで、全幅に効く（D009）。
 * 色・フォント・ヘッダー画像・見出しの装飾は、テーマ（hills-pink）と original.css のものをそのまま使う。
 * カラムの並び: PC は 本文(#alpha) | 検索・カレンダー等(#gamma) | カテゴリ等(#beta)。
 *   600〜959px … 本文を全幅にし、その下に #gamma と #beta を左右 2 列で並べる
 *   599px 以下 … すべて 1 列（本文 → #gamma → #beta）
 */

/* 文字のコントラスト（全幅。WCAG 1.4.3 の 4.5:1 に届かせるため、テーマの灰色を濃くする） */
.widget-content a {
    color: #767676;        /* テーマは #999（白地で 2.85:1）→ 4.54:1 */
}
#header-description {
    color: #555;           /* テーマは #6f6f6f（#cfc4f7 地で 3.09:1）→ 4.58:1 */
}

@media (max-width: 959px) {
    /* 幅 940px 固定を解除 */
    #container-inner {
        width: auto;
        max-width: 940px;
    }

    /* ヘッダー: 背景の丘の絵（1090×201）を幅に合わせて縮め、構図（右端の座る猫まで）を保つ */
    #header {
        background-size: 116% auto;
    }
    #header-content {
        width: auto;
        margin-right: 20px;
    }
    #header-anim {
        width: auto;
        height: 10vw;
        min-height: 50px;
        background-size: auto 100%;
    }

    /* カラム: float と相対位置をやめ、flex で並べ替える */
    #content-inner {
        display: flex;
        flex-wrap: wrap;
    }
    .layout-wtt #content-inner {
        background: none;
    }
    #content-inner::after {
        content: none;
    }
    .layout-wtt #alpha,
    .layout-wtt #beta,
    .layout-wtt #gamma {
        float: none;
        display: block;
        left: auto;
        right: auto;
    }
    .layout-wtt #alpha {
        order: 1;
        width: 100%;
    }
    .layout-wtt #gamma {
        order: 2;
        width: 50%;
        border-top: 1px solid #f7c5dd;
    }
    .layout-wtt #beta {
        order: 3;
        width: 50%;
        border-top: 1px solid #f7c5dd;
        border-left: 1px solid #f7c5dd;
        box-sizing: border-box;
    }
    #beta .widget-powered .widget-content {
        margin-left: 0;
    }

    /* 本文中の画像・動画・表がはみ出さないようにする */
    .asset-body img,
    .asset-more img {
        max-width: 100%;
        height: auto;
        box-sizing: border-box;
    }
    /* YouTube（元は 445×364） */
    .asset-body iframe.video {
        max-width: 100%;
        height: auto;
        aspect-ratio: 445 / 364;
        box-sizing: border-box;
    }
    .asset-body table {
        max-width: 100%;
    }
    .asset-content {
        overflow-wrap: anywhere;
    }
    #search {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* タッチ操作向けに押せる範囲を広げる（文字の大きさと色はテーマのまま） */
    .widget-archive-category .widget-content li,
    .widget-recent-entries .widget-content li {
        margin: 0;
    }
    .widget-archive-category .widget-content li a,
    .widget-recent-entries .widget-content li a {
        display: inline-block;
        padding: 5px 0;
    }
    #calendar th,
    #calendar td {
        width: 32px;
        height: 28px;
        font-size: 13px;
    }
    #calendar td,
    #calendar td:hover {
        background-size: 100% 100%;
    }
    #calendar td a {
        display: block;
        line-height: 28px;
    }
    .widget-calendar .widget-header a {
        display: inline-block;
        min-width: 24px;
        min-height: 24px;
        text-align: center;
    }
    .content-nav ul li a,
    .content-nav ul span.current_page {
        display: inline-block;
        min-width: 24px;
        min-height: 24px;
        line-height: 24px;
        padding: 0 6px;
        margin: 3px 0;
        white-space: nowrap;
        box-sizing: border-box;
    }
}

@media (max-width: 599px) {
    #header-inner {
        padding-left: 15px;
    }
    #header-content {
        margin: 15px 15px 10px 0;
        min-height: 0;
    }
    #header-name {
        font-size: 24px;
    }
    #header-description {
        font-size: 13px;
        line-height: 1.4;
    }

    /* 左端をサイドバーの見出し・サイト名（15px）に揃える */
    #alpha-inner {
        padding-right: 15px;
        padding-left: 15px;
    }
    /* アーカイブ見出し（26px）がサイト名より大きくならないようにする */
    .archive-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
    #search {
        width: calc(100% - 5em);
        height: 32px;
        font-size: 16px;
        background-position: 8px center;
    }
    .widget-search input[type="submit"] {
        height: 32px;
    }
    .asset-header,
    .asset-content,
    .asset-footer {
        margin-right: 0;
    }

    .layout-wtt #gamma,
    .layout-wtt #beta {
        width: 100%;
    }
    .layout-wtt #beta {
        border-left: 0;
    }
}