/* ============================================================
   JP News (جهينة نيوز) — design4 «الشبكة» (4a square · 4b rounded) — header.css
   Slim sticky header (one row) · flat category row · «كل الأقسام»
   directory panel · search panel · theme toggle · RTL drawer
   (slides from the LEFT) with accordion subcategories.
   ============================================================ */

/* ------------------------------------------------------------
   HEADER ROW
   ------------------------------------------------------------ */
.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    background-color: var(--color-chrome);
    color: var(--color-chrome-text);
    border-block-end: 1px solid var(--color-chrome-border);
}

.site-header :focus-visible {
    outline-color: var(--color-focus);
}

.header-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-block-size: var(--header-height);
}

/* Hamburger — visible below 992 only */
.drawer-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    flex-shrink: 0;
    margin-inline-start: calc(var(--space-sm) * -1);
    border-radius: var(--radius-btn);
}

.drawer-open-btn:hover {
    background-color: var(--color-chrome-deep);
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    inline-size: 22px;
}

.hamburger span {
    display: block;
    block-size: 2px;
    inline-size: 100%;
    background-color: currentColor;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

/* ------------------------------------------------------------
   BRAND LOCKUP (2026-09-24) — ONE component in three placements:
   header, drawer head, footer. The client's vector mark on top
   (never mirrored), «جهينة نيوز» centred beneath it at a visibly
   smaller size — client: «أسفل ومنتصف اللوغو بقياس خط أصغر من
   اللوغو». A placement modifier sets only the mark size, the
   wordmark scale and the wordmark colour.
   Size: --brand-wordmark-size (global.css) is the ONE number to
   tune. It is the header value; the drawer and footer multiply it
   by their mark height ÷ 28, so all three move together.
   Header budget: the row is LOCKED at --header-height (64px). The
   header stack is 28 + 4 + 16.8 = 48.8px, so the mark keeps its
   130×28 — nothing had to shrink.
   Accessibility: the link carries the name, the marks are alt=""
   and the wordmark is aria-hidden, so «جهينة نيوز» is announced
   ONCE per lockup. The hidden h1 is a separate element, untouched.
   ------------------------------------------------------------ */
.brand-lockup {
    display: inline-flex;
    flex-direction: column;
    align-items: center;          /* direction-neutral centring — nothing to mirror in RTL */
    gap: var(--space-xs);
    flex-shrink: 0;
}

.brand-lockup-mark {
    inline-size: var(--brand-mark-inline);
    block-size: var(--brand-mark-block);
}

.brand-lockup-wordmark {
    font-family: var(--font-primary);
    font-weight: 700;             /* 800 clots in Arabic at this size */
    font-size: calc(var(--brand-wordmark-size) * var(--brand-scale, 1));
    line-height: 1.2;
    letter-spacing: normal;       /* never letter-space Arabic */
    white-space: nowrap;
    color: var(--brand-wordmark-color, var(--color-chrome-text));
}

/* Placements — size and colour only */
.brand-lockup-header {
    --brand-mark-inline: 130px;
    --brand-mark-block: 28px;
}

.brand-lockup-drawer {
    --brand-mark-inline: 140px;
    --brand-mark-block: 30px;
    --brand-scale: calc(30 / 28);
}

/* Dark ground in BOTH palettes: one on-dark mark, the footer text token */
.brand-lockup-footer {
    --brand-mark-inline: 171px;
    --brand-mark-block: 37px;
    --brand-scale: calc(37 / 28);
    --brand-wordmark-color: var(--color-footer-text);
}

/* Which mark shows follows the same three-way cascade as the palette (header + drawer lockups, theme-toggle glyphs) */
.theme-when-dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-when-dark {
        display: block;
    }

    :root:not([data-theme="light"]) .theme-when-light {
        display: none;
    }
}

:root[data-theme="dark"] .theme-when-dark {
    display: block;
}

/* ------------------------------------------------------------
   THEME CONTROL — legible (client 2026-09-04)
   Header: the glyph with a very small Arabic label under it naming
   what a press does («الوضع الداكن» on a light page). Drawer: a real
   switch — text beside a track whose knob sits at the inline-end when
   dark is on. The knob and the label follow the same three-way cascade
   as the palette, so both are right on first paint without script;
   JS only flips aria-checked / aria-label.
   ------------------------------------------------------------ */
.theme-toggle-header {
    flex-direction: column;
    gap: 2px;
    padding-inline: var(--space-xs);
}

.theme-toggle-label {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
}

.theme-toggle-drawer {
    gap: var(--space-sm);
}

.theme-switch-text {
    flex: 1 1 auto;
    text-align: start;
}

.theme-switch-track {
    position: relative;
    flex-shrink: 0;
    inline-size: 40px;
    block-size: 22px;
    border-radius: var(--radius-chip);
    background-color: var(--color-switch-off);
    border: 1px solid var(--color-switch-off-border);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.theme-switch-knob {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: 16px;
    block-size: 16px;
    border-radius: var(--radius-chip);
    background-color: var(--color-switch-knob);
    transition: transform var(--transition-fast);
}

/* on = dark — same three-way cascade as .theme-when-dark */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-switch-track {
        background-color: var(--color-switch-on);
        border-color: var(--color-switch-on);
    }

    :root:not([data-theme="light"]) .theme-switch-knob {
        transform: translateX(calc(-1 * (40px - 16px - 4px)));
    }
}

:root[data-theme="dark"] .theme-switch-track {
    background-color: var(--color-switch-on);
    border-color: var(--color-switch-on);
}

:root[data-theme="dark"] .theme-switch-knob {
    transform: translateX(calc(-1 * (40px - 16px - 4px)));
}

:root[data-theme="light"] .theme-switch-track {
    background-color: var(--color-switch-off);
    border-color: var(--color-switch-off-border);
}

:root[data-theme="light"] .theme-switch-knob {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .theme-switch-track,
    .theme-switch-knob {
        transition: none;
    }
}

:root[data-theme="dark"] .theme-when-light {
    display: none;
}

/* ------------------------------------------------------------
   FLAT CATEGORY ROW (≥992) — no dropdowns; the directory button
   carries the second level
   ------------------------------------------------------------ */
.site-nav {
    display: none;
    flex: 1 1 auto;
    min-inline-size: 0;
    align-items: center;
}

/* The categories spread across the whole row (client 2026-09-24): the stacked
   brand lockup is narrower than the old side-by-side name, and packing the
   links at the start left one wide hole before the utilities. space-between
   keeps the first link beside the brand and the last beside «كل الأقسام»;
   only the gaps between them grow. Order never changes. */
.nav-list {
    display: flex;
    flex: 1 1 auto;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    min-inline-size: 0;
}

.nav-link,
.nav-directory-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: 44px;
    padding-inline: 6px;   /* 8 → 6 (2026-09-04) to keep the row one line beside the site name + slogan */
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
    line-height: 1.2;
    white-space: nowrap;
    border-block-end: 3px solid transparent;
    border-block-start: 3px solid transparent;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.nav-link:hover,
.nav-link:focus-visible {
    border-block-end-color: var(--cat, var(--color-accent));
}

.nav-directory-btn {
    color: var(--color-chrome-muted);
    margin-inline-start: var(--space-xs);
}

.nav-directory-btn:hover,
.nav-directory-btn[aria-expanded="true"] {
    color: var(--color-chrome-text);
    border-block-end-color: var(--color-chrome-text);
}

.nav-directory-btn .icon-sm {
    transition: transform var(--transition-fast);
}

.nav-directory-btn[aria-expanded="true"] .icon-sm {
    transform: rotate(180deg);
}

/* Utilities at the far inline-end */
.header-utils {
    display: flex;
    align-items: center;
    gap: 0;
    margin-inline-start: auto;
    flex-shrink: 0;
}

.util-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-btn);
    color: var(--color-chrome-text);
    transition: background-color var(--transition-fast);
}

.util-btn:hover,
.util-btn[aria-expanded="true"] {
    background-color: var(--color-chrome-deep);
}

/* Theme toggle glyph + word follow the palette cascade too */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-inline-size: 44px;
    min-block-size: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-btn);
    transition: background-color var(--transition-fast);
}

.theme-toggle-header {
    color: var(--color-chrome-text);
}

.theme-toggle-header:hover {
    background-color: var(--color-chrome-deep);
}

.theme-toggle-drawer {
    inline-size: 100%;
    justify-content: flex-start;
    padding-inline: var(--space-md);
    min-block-size: 48px;
    font-family: var(--font-secondary);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-block-end: 1px solid var(--color-chrome-border);
}

.theme-toggle-drawer:hover {
    background-color: var(--color-chrome-deep);
}

/* ------------------------------------------------------------
   SEARCH PANEL — drops under the header row (display-only form)
   ------------------------------------------------------------ */
.header-search-panel {
    border-block-start: 1px solid var(--color-chrome-border);
    background-color: var(--color-chrome);
}

.header-search-form {
    display: flex;
    gap: var(--space-sm);
    padding-block: var(--space-sm);
}

.search-input {
    flex: 1 1 auto;
    min-inline-size: 0;
    min-block-size: 44px;
    padding-inline: var(--space-md);
    background-color: var(--color-chrome-deep);
    color: var(--color-chrome-text);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-field);
    font-size: var(--fs-md);
}

.search-input::placeholder {
    color: var(--color-chrome-muted);
}

.search-input:focus {
    outline: 2px solid var(--color-focus);
    outline-offset: 1px;
    border-color: transparent;
}

.search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-inline-size: 44px;
    min-block-size: 44px;
    padding-inline: var(--space-md);
    background-color: var(--color-primary);
    color: var(--color-bg);
    border-radius: var(--radius-btn);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
}

.search-submit:hover {
    background-color: var(--color-primary-hover);
}

/* ------------------------------------------------------------
   DIRECTORY PANEL — every subcategory, under the header (≥992)
   ------------------------------------------------------------ */
.directory-panel {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: var(--z-dropdown);
    background-color: var(--color-chrome);
    border-block-end: 1px solid var(--color-chrome-border);
    box-shadow: var(--shadow-md);
    max-block-size: calc(100vh - var(--header-height));
    overflow-y: auto;
}

.directory-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-md);
    padding-block: var(--space-lg);
}

.directory-col-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-md);
    margin-block-end: var(--space-sm);
}

.directory-col-title a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    min-inline-size: 44px;
    margin-block: -6px;
}

.directory-col-title a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.directory-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    min-inline-size: 44px;
    font-size: var(--fs-sm);
    color: var(--color-chrome-muted);
    transition: color var(--transition-fast);
}

.directory-link:hover,
.directory-link:focus-visible {
    color: var(--color-chrome-text);
}

.directory-note {
    grid-column: 1 / -1;
    font-size: var(--fs-xs);
    color: var(--color-chrome-muted);
}

/* The category identity bar — same mark in labels, drawer rows,
   directory columns and footer columns */
.cat-bar {
    display: inline-block;
    inline-size: 4px;
    block-size: 18px;
    background-color: var(--cat, var(--color-accent));
    flex-shrink: 0;
    border-radius: var(--radius-bar, 0);
}

/* ------------------------------------------------------------
   DRAWER (<992) — RTL: anchored to the inline-end edge, which is
   the LEFT of the screen, and slides in from there
   ------------------------------------------------------------ */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) - 1);
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.drawer-backdrop.is-open {
    opacity: 1;
}

.drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: var(--z-modal);
    inline-size: min(360px, 88vw);
    display: flex;
    flex-direction: column;
    background-color: var(--color-chrome);
    color: var(--color-chrome-text);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 300ms ease;
}

[dir="rtl"] .drawer {
    transform: translateX(-100%);
}

.drawer.is-open {
    transform: translateX(0);
}

.drawer :focus-visible {
    outline-color: var(--color-focus);
}

.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-block-end: 1px solid var(--color-chrome-border);
}

.drawer-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--radius-btn);
}

.drawer-close-btn:hover {
    background-color: var(--color-chrome-deep);
}

.drawer-search {
    padding: var(--space-md);
    border-block-end: 1px solid var(--color-chrome-border);
}

.drawer-search .header-search-form {
    padding-block: 0;
}

.drawer-group-label {
    display: block;
    padding: var(--space-md) var(--space-md) var(--space-xs);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-xs);
    color: var(--color-chrome-muted);
}

.drawer-row {
    display: flex;
    align-items: center;
    border-block-end: 1px solid var(--color-chrome-border);
}

.drawer-row-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1 1 auto;
    min-inline-size: 0;
    min-block-size: 48px;
    padding-inline: var(--space-md);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-md);
}

.drawer-row-link:hover {
    background-color: var(--color-chrome-deep);
}

.drawer-acc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 48px;
    block-size: 48px;
    flex-shrink: 0;
    color: var(--color-chrome-muted);
}

.drawer-acc-btn:hover {
    background-color: var(--color-chrome-deep);
    color: var(--color-chrome-text);
}

.drawer-acc-btn .icon-sm {
    transition: transform var(--transition-fast);
}

.drawer-acc-btn[aria-expanded="true"] .icon-sm {
    transform: rotate(180deg);
}

.drawer-sub {
    padding-block: var(--space-xs);
    padding-inline-start: var(--space-lg);
    border-block-end: 1px solid var(--color-chrome-border);
    background-color: var(--color-chrome-deep);
}

.drawer-sub-link {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    min-inline-size: 44px;
    padding-inline: var(--space-md);
    font-size: var(--fs-sm);
    color: var(--color-chrome-muted);
}

.drawer-sub-link:hover {
    color: var(--color-chrome-text);
}

.drawer-util-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-block-size: 44px;
    padding-inline: var(--space-md);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.drawer-util-link:hover {
    background-color: var(--color-chrome-deep);
}

body.drawer-locked {
    overflow: hidden;
}

/* ------------------------------------------------------------
   BREAKPOINTS
   ------------------------------------------------------------ */
@media (min-width: 992px) {
    .drawer-open-btn {
        display: none;
    }

    .site-nav {
        display: flex;
    }

    .theme-toggle-drawer {
        display: none;
    }
}

/* The reference's «More» model: the row shows what fits on one line
   and the directory button carries the rest — six categories at
   992–1199, eight at 1200–1439, all ten from 1440 */
@media (min-width: 1440px) {
    .nav-link,
    .nav-directory-btn {
        padding-inline: 8px;   /* 10 → 8 (2026-09-04), same reason */
        font-size: 15px;
    }
}

@media (max-width: 1439px) {
    .nav-item-overflow-2 {
        display: none;
    }
}

@media (max-width: 1199px) {
    .nav-item-overflow-4 {
        display: none;
    }
}

@media (max-width: 1199px) {
    .directory-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .directory-panel {
        display: none;
    }
}

@media (max-width: 399px) {
    .theme-toggle-header {
        display: none;
    }
}