/* ============================================================
   JP News (جهينة نيوز) — design4 «الشبكة» (4a square · 4b rounded) (CNN-structure) — global.css
   CANADA HITECH — https://canadahitech.com
   Order (fixed): reset (incl. the seven hard-won fixes) → :root
   tokens → @font-face → base typography → utilities. Colour and
   shape values live ONLY in theme.css (both palettes). Cascade:
   global → theme → header → footer → elements/home.
   ============================================================ */

/* ------------------------------------------------------------
   RESET
   ------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

body {
    min-block-size: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-inline-size: 100%;
}

ul[class],
ol[class] {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: inherit;
    font-size: inherit;
}

p {
    overflow-wrap: break-word;
}

button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

/* Hard-won fix 1 — form elements do not inherit font-family */
input,
select,
textarea,
optgroup {
    font: inherit;
    color: inherit;
}

/* Hard-won fix 2 — kill WebKit/Blink search decorations */
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

/* Hard-won fix 3 — <address> renders italic by default */
address {
    font-style: normal;
}

/* Hard-won fix 4 — [hidden] is an HTML contract */
[hidden] {
    display: none !important;
}

/* Hard-won fix 5 — <legend> ignores the normal box model */
legend {
    display: table;
    max-inline-size: 100%;
    padding: 0;
    white-space: normal;
}

/* Hard-won fix 6 — margin collapsing at component boundaries
   (breadcrumb case); none on the home page, rule kept for
   interior pages */
.breadcrumb {
    margin: 0;
    padding: 0;
}

/* Hard-won fix 7 — sticky creates a stacking context; the
   z-index ladder below is the only layering convention. 9999
   is reserved for the skip link. */

fieldset {
    border: none;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

textarea {
    resize: vertical;
}

:focus:not(:focus-visible) {
    outline: none;
}

hr {
    border: none;
    border-block-start: 1px solid var(--color-border);
    margin-block: var(--space-lg);
}

summary {
    cursor: pointer;
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------
   TOKENS (non-colour; colour + shape tokens live in theme.css)
   ------------------------------------------------------------ */
:root {
    /* Typography */
    --font-primary: 'Almarai', 'Arial', sans-serif;                 /* headlines, labels */
    --font-secondary: 'IBM Plex Sans Arabic', 'Tahoma', sans-serif; /* body/UI */

    /* Layout */
    --content-width: 1440px;
    --col-side: 300px;      /* the two side stacks of a wide-centre zone (324 at ≥1440) */
    --col-rail: 300px;      /* the AD-04 column — never narrower than the unit */
    --zone-gap: 24px;       /* column gap inside a zone (32 at ≥1440) */
    --header-height: 64px;  /* LOCKED (client, 2026-09-24): any brand change must fit inside it */
    --brand-wordmark-size: 14px;  /* «جهينة نيوز» under the header mark (12 → 14, client 2026-09-24); the drawer and footer scale from it */

    /* Spacing scale (client-locked: 4/8/16/32/64/96) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 64px;
    --space-2xl: 96px;

    /* Type scale */
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 24px;
    --fs-2xl: 32px;
    --fs-3xl: 48px;
    --fs-4xl: 64px;

    /* Arabic editorial scale — +1–2px optical size over the Latin
       reference at the same rank */
    --fs-lead: clamp(26px, 2.6vw, 32px);      /* the text-first lead headline — capped at 32px (client, 2026-09-03) */
    --fs-feature: clamp(20px, 1.6vw, 24px);   /* headline over a wide overlay card — one clear step under the lead */
    --fs-card-lg: 22px;                       /* large column card */
    --fs-card: 19px;                          /* standard column card */
    --fs-list: 16px;                          /* hairline headline rows */
    --fs-thumb: 15px;                         /* thumb-row headline */
    --fs-meta: 13px;                          /* kicker, duration, timestamp */
    --fs-label: 14px;                         /* section label */

    /* Z-index ladder */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-toast: 400;

    /* Breaking-news ribbon — its height is reserved on the footer and as scroll padding */
    --ribbon-height: 56px;

    /* Motion */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Elevation */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.26);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.32);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.38);
}

@media (min-width: 1440px) {
    :root {
        --col-side: 324px;
        --zone-gap: 32px;
    }
}

/* ------------------------------------------------------------
   FONTS — self-hosted WOFF2, Arabic + basic Latin subsets
   ------------------------------------------------------------ */
@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../fonts/almarai-700-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
        U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../fonts/almarai-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../../fonts/almarai-800-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
        U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../../fonts/almarai-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/ibm-plex-sans-arabic-400-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
        U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/ibm-plex-sans-arabic-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/ibm-plex-sans-arabic-500-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
        U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/ibm-plex-sans-arabic-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* ------------------------------------------------------------
   BASE TYPOGRAPHY
   ------------------------------------------------------------ */
html {
    scroll-behavior: smooth;
    scroll-padding-block-end: var(--ribbon-height);   /* anchor targets clear the ribbon */
}

body {
    font-family: var(--font-secondary);
    font-size: var(--fs-md);
    font-weight: 400;
    /* Arabic body rhythm — room for diacritics */
    line-height: 1.8;
    color: var(--color-text);
    background-color: var(--color-bg);
    text-align: start;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-primary);
    font-weight: 800;
    /* Headlines run tighter than body Arabic — never letter-spaced */
    line-height: 1.4;
    letter-spacing: normal;
}

/* Times, durations and counts are Latin digits — keep them LTR
   so «3:01» never reorders inside an RTL line */
.ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ------------------------------------------------------------
   UTILITIES
   ------------------------------------------------------------ */
.container {
    inline-size: 100%;
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding-inline: clamp(var(--space-md), 3vw, var(--space-lg));
}

.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    inset-block-start: var(--space-sm);
    inset-inline-start: var(--space-sm);
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-accent-fill);
    color: var(--color-text-inverse);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
    border-radius: var(--radius-btn);
    transform: translateY(-250%);
    transition: transform var(--transition-base);
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

/* Sprite symbols carry no fill of their own: without this they paint
   the SVG initial black, invisible on the dark palette */
.icon,
.icon-sm {
    fill: currentColor;
}

.icon {
    inline-size: 20px;
    block-size: 20px;
    flex-shrink: 0;
}

.icon-sm {
    inline-size: 16px;
    block-size: 16px;
    flex-shrink: 0;
}

/* Directional icons flip in RTL (site is RTL-only; guard kept
   so the rule survives a future LTR page) */
[dir="rtl"] .icon-directional {
    transform: scaleX(-1);
}

/* Category colour scopes — one custom-prop hook per main category;
   subcategories inherit the parent's scope */
.cat-politics        { --cat: var(--color-cat-politics); }
.cat-local-affairs   { --cat: var(--color-cat-local-affairs); }
.cat-economy         { --cat: var(--color-cat-economy); }
.cat-jouhina-tribune { --cat: var(--color-cat-jouhina-tribune); }
.cat-special-reports { --cat: var(--color-cat-special-reports); }
.cat-sports          { --cat: var(--color-cat-sports); }
.cat-culture-arts    { --cat: var(--color-cat-culture-arts); }
.cat-miscellany      { --cat: var(--color-cat-miscellany); }
.cat-society         { --cat: var(--color-cat-society); }
.cat-opinion         { --cat: var(--color-cat-opinion); }

@media (max-width: 575px) {
    :root {
        --ribbon-height: 72px;   /* two-line headline beside the label and the 44px close */
    }
}

/* ------------------------------------------------------------
   GLOBAL TOASTS
   ------------------------------------------------------------ */
.toast-host {
    position: fixed;
    inset-block-start: var(--space-md);
    inset-inline-start: var(--space-md);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    inline-size: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

.toast {
    --toast-tone: var(--color-primary);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-inline-start: 4px solid var(--toast-tone);
    background-color: var(--color-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: toast-enter var(--transition-base) both;
}

.toast--success {
    --toast-tone: var(--color-cat-sports);
}

.toast--pending {
    --toast-tone: var(--color-cat-politics);
}

.toast--fail {
    --toast-tone: var(--color-accent);
}

.toast__icon-wrap {
    display: grid;
    flex: 0 0 40px;
    inline-size: 40px;
    block-size: 40px;
    place-items: center;
    border-radius: var(--radius-chip);
    background-color: var(--color-bg-alt);
    color: var(--toast-tone);
}

.toast__icon {
    inline-size: 22px;
    block-size: 22px;
}

.toast__icon--pending {
    animation: toast-spin 1s linear infinite;
}

.toast__content {
    flex: 1;
    min-inline-size: 0;
}

.toast__title {
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: var(--fs-md);
    font-weight: 800;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.toast__message {
    margin-block-start: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.toast__close {
    display: grid;
    flex: 0 0 40px;
    inline-size: 40px;
    block-size: 40px;
    place-items: center;
    border-radius: var(--radius-btn);
    color: var(--color-text-muted);
}

.toast__close:hover {
    background-color: var(--color-bg-alt);
    color: var(--color-text);
}

.toast__close svg {
    inline-size: 18px;
    block-size: 18px;
}

.toast.is-leaving {
    animation: toast-exit var(--transition-fast) forwards;
}

@keyframes toast-enter {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toast-exit {
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@keyframes toast-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 575px) {
    .toast-host {
        inset-block-start: var(--space-sm);
        inset-inline-end: var(--space-sm);
        inline-size: calc(100vw - 16px);
    }
}