/*
 * F-004 header.css — Global header chrome.
 *
 * Scope: skip-link, header bar layout, gnav typography, LINE CTA,
 * Arkhe-native drawer / search button a11y floor. All colors reference
 * --tk-* tokens — NO new hex literals (tokens.json is authoritative).
 *
 * Mobile-first: base = 320px..767px, then min-width queries upwards.
 *
 * iteration 2 (2026-04-21) changes:
 *   - AC-18 overflow fix: collapse LINE CTA responsively.
 *       * <375px    = LINE CTA hidden entirely (drawer surfaces it)
 *       *  375-479  = LINE CTA icon-only (no text)
 *       *  480-767  = LINE CTA icon + compact "LINE" label
 *       *  768+     = LINE CTA icon + "LINE で相談" label (full)
 *   - Brand logo: allow wrap / min-width:0 so it never pushes the
 *     right-side buttons off-viewport. Truncate with ellipsis when
 *     container shrinks below one line.
 *   - .l-header__body gap tightened on narrow viewports.
 */

/* ----------------------------------------------------------------------
 * Skip-to-content link (AC-11).
 * Uses the WCAG-approved hide-until-focus pattern — NG-12 compliant.
 * -------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000; /* tk-z-modal — @media cannot consume vars */
    display: inline-block;
    padding: 12px 16px;
    background: var(--tk-color-primary);
    color: var(--tk-color-bg);
    text-decoration: none;
    font-weight: var(--tk-fw-bold);
    border-radius: var(--tk-radius-md);
    box-shadow: var(--tk-shadow-md);
    clip: auto;
    clip-path: none;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    white-space: nowrap;
}

.skip-link:focus,
.skip-link:focus-visible {
    left: 16px;
    top: 16px;
    outline: 3px solid var(--tk-color-accent);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------
 * Header chrome — Arkhe's .l-header is kept; we retune colors/spacing.
 * Arkhe parent inlines header_color_bg / header_color_txt from
 * arkhe_settings as --ark-color--header_bg / --ark-color--header_txt.
 * Those were set to --tk-color-bg / --tk-color-ink by F-003, so the
 * defaults are already correct — this block is for fine-tuning spacing.
 * -------------------------------------------------------------------- */
.l-header {
    border-bottom: 1px solid var(--tk-color-border);

    /* Override Arkhe's logo_size_sp/pc defaults (40/48 px) which apply
     * font-size on `.l-header__logo`. The long brand text "となりのパソコン
     * ・スマホ教室" needs a smaller container font at small viewports so
     * width stays under the header grid cell — iter 2 AC-18 fix. */
    --ark-logo_size--sp: 20px;
    --ark-logo_size--pc: 32px;
}

.l-header__body {
    min-height: 56px;
    gap: 4px; /* tight on small viewports; wider via min-width queries */
    align-items: center;
    /* Keep children from forcing horizontal overflow regardless of Arkhe
     * grid template width. Min-width:0 on grid/flex children is the
     * standard "let flex items shrink below content size" pattern. */
    min-width: 0;
}

/* Mobile: title/logo left-aligned (no hamburger, no empty gap).
   Override Arkhe's 5-column grid with flex on mobile viewports.
   Arkhe uses [data-btns="l-r"] .l-header__body — match same specificity. */
@media (max-width: 999px) {
    .l-header__drawerBtn,
    .l-header__left {
        display: none !important;
    }
    [data-btns] .l-header__body,
    .l-header__body {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        grid-template-columns: none !important;
        padding-left: var(--tk-space-4);
        padding-right: var(--tk-space-2);
    }
    .l-header__center {
        margin-right: auto !important;
        justify-self: start !important;
        justify-content: flex-start !important;
        text-align: left !important;
        flex: 0 0 auto !important;
    }
    .l-header__right {
        flex: 0 0 auto !important;
    }
    .c-headLogo { text-align: left; }
}

/* Logo (text / image). Arkhe wraps in .c-headLogo. */
.c-headLogo {
    font-family: var(--tk-font-heading);
    font-weight: var(--tk-fw-bold);
    font-size: var(--tk-fs-base); /* smaller on mobile to avoid overflow */
    letter-spacing: var(--tk-ls-tight);
    color: var(--tk-color-ink);
    text-decoration: none;
    line-height: 1.2;
    /* Allow the logo cell to shrink when space is tight. */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-headLogo:hover,
.c-headLogo:focus-visible {
    color: var(--tk-color-primary);
}

/* The Arkhe wrapper (.l-header__logo or similar) — ensure it does not
 * exceed its allotted column width, so the grid's right area can fit. */
.l-header__logo,
.l-header__cHead {
    min-width: 0;
    overflow: hidden;
}

/* Global nav links (c-gnav). */
.c-gnavWrap {
    display: none; /* Hidden on mobile; drawer takes over. AC-18(c). */
}

.c-gnav a {
    color: var(--tk-color-ink);
    text-decoration: none;
    font-weight: var(--tk-fw-medium);
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* tap target. AC-13 / F-003 handoff. */
    border-radius: var(--tk-radius-sm);
    transition: background-color 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.c-gnav a:hover,
.c-gnav a:focus-visible {
    background-color: var(--tk-color-bg-subtle);
    color: var(--tk-color-primary);
}

/* ----------------------------------------------------------------------
 * LINE CTA button — spec §4, role_mapping.cta_primary_line.
 * ALWAYS accent-bg + ink-text (never white). F-003 carryover rule.
 *
 * Iteration 2: Responsive layout to guarantee zero header overflow at
 * 320px. Default (mobile base) = icon + label visible. Narrower media
 * queries below collapse the label / hide the whole CTA.
 * -------------------------------------------------------------------- */
.c-lineCta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 10px; /* compact base — tighter for 320-480 fit */
    background: var(--tk-color-accent);
    color: var(--tk-color-ink);
    font-weight: var(--tk-fw-bold);
    font-size: var(--tk-fs-xs);
    border-radius: var(--tk-radius-md);
    text-decoration: none;
    border: 1px solid transparent;
    flex: none; /* never shrink in flex row */
    transition: background-color 120ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.c-lineCta:hover,
.c-lineCta:focus-visible {
    background: var(--tk-color-accent-hover);
    color: var(--tk-color-ink);
    text-decoration: none;
    outline: 2px solid var(--tk-color-primary);
    outline-offset: 2px;
}

.c-lineCta__icon {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.c-lineCta__label {
    white-space: nowrap;
}

/* ----------------------------------------------------------------------
 * Header icon buttons (search) — tap target floor.
 * Arkhe already ships .c-iconBtn styled; we only guarantee 44x44.
 * Hamburger drawer hidden on all viewports (Qiita-style: no hamburger).
 * -------------------------------------------------------------------- */
.l-header__drawerBtn {
    display: none !important;
}
.l-header__searchBtn .c-iconBtn {
    min-width: 44px;
    min-height: 44px;
    color: var(--tk-color-ink);
    flex: none;
}

/* ----------------------------------------------------------------------
 * Mobile: Arkhe hides .l-header__right entirely below 1000px which would
 * hide the LINE CTA (placed inside that slot via arkhe_header_right_content).
 * We override with `display: flex` for .l-header__right at all viewports,
 * but keep gnav hidden via .c-gnavWrap rule above so the visual result
 * on mobile is: brand + (optional LINE) + search + hamburger.
 *
 * min-width:0 ensures the flex container doesn't overflow its grid cell
 * when the logo text is long.
 * -------------------------------------------------------------------- */
.l-header__right {
    display: flex !important;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: none;
}

/* ----------------------------------------------------------------------
 * AC-18 responsive CTA visibility — the core overflow fix.
 * -------------------------------------------------------------------- */

/* Mobile (<1000px) — stack icon on top, "LINE" text below (Qiita-style
 * vertical badge). User-tested: 吹き出しアイコンと文字が横並びで重なって
 * 見づらかった指摘への対応。 */
@media (max-width: 999px) {
    .l-header__right .c-lineCta {
        flex-direction: column;
        gap: 1px;
        padding: 4px 10px;
        min-width: 56px;
        line-height: 1;
        text-align: center;
    }
    .l-header__right .c-lineCta__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    .l-header__right .c-lineCta__icon svg {
        width: 22px;
        height: 22px;
    }
    .l-header__right .c-lineCta::after {
        content: 'LINE';
        display: block;
        font-weight: var(--tk-fw-bold);
        font-size: 10px;
        letter-spacing: 0.04em;
        margin-top: 1px;
    }
}

/* ----------------------------------------------------------------------
 * Tablet (768–999 px) — Arkhe considers <1000 px to be "SP"; gnav
 * stays hidden, drawer button stays visible. We only tighten header
 * spacing at this width. The compact LINE CTA rule above keeps the
 * right-area narrow enough to fit logo + CTA + search + hamburger.
 *
 * Arkhe's .l-header__body grid sums its columns to 100% of the inner
 * container, then adds `column-gap` on top, which makes the grid ~32px
 * wider than the container (5 cells = 4 gaps × 8 px). Forcing
 * column-gap: 0 on the header grid eliminates that overflow without
 * disturbing Arkhe's calc()-driven column template.
 * -------------------------------------------------------------------- */
@media (min-width: 768px) {
    .l-header__body {
        min-height: 64px;
        gap: 0;
        column-gap: 0;
    }

    .l-header__right {
        gap: 8px;
    }
}

/* ----------------------------------------------------------------------
 * Desktop (1000px+ — Arkhe's "PC" threshold).
 * At this width gnav displays inline, drawer button hides, and the
 * logo can grow to its full token size without risking overflow.
 * -------------------------------------------------------------------- */
@media (min-width: 1000px) {
    .c-gnavWrap {
        display: block;
    }

    .c-headLogo {
        font-size: var(--tk-fs-lg);
        white-space: normal;
        overflow: visible;
    }

    .l-header__right .c-lineCta {
        font-size: var(--tk-fs-sm);
        padding: 10px 14px;
    }

    .l-header__right .c-lineCta__label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        letter-spacing: 0.02em;
    }

    .l-header__right .c-lineCta::after {
        content: none;
    }

    /*
     * Drawer button hidden on desktop — CSS-only (NOT UA sniffing).
     * Arkhe's show_drawer_pc=false is already set in arkhe_settings,
     * but belt-and-braces via CSS too.
     */
    .l-header__drawerBtn {
        display: none;
    }
}

@media (min-width: 1280px) {
    .c-headLogo {
        font-size: var(--tk-fs-xl);
    }

    .l-header__right .c-lineCta {
        font-size: var(--tk-fs-base);
        padding: 10px 18px;
    }
}