/* ==========================================================================
   ALIFAH — BRAND FOUNDATION for Tripoli  (Brand Guidelines v1.0 — TEAL design system)
   Loaded AFTER Tripoli's compiled CSS so these overrides win. Colour + type-scale
   re-skin only — layout, font (Inter, bundled) and the multilingual
   engine are unchanged.
   Hero = Teal #23B8BC used sparingly on lots of white / neutral; Navy #212A4E for
   dark, high-contrast areas (footer). Greys do the quiet everyday work.
   Type scale (exact, from the guide): H1 32/800 · H2 24/700 · H3 18/700 · H4 15/600 ·
   Body 16/400 line-height 1.55 · Caption 13.
   ========================================================================== */

:root {
    /* ---- Teal family (primary / hero) ---- */
    --alifa-teal:        #23B8BC;   /* Teal 500 — buttons, links, active, highlights */
    --alifa-teal-hover:  #17848B;   /* Teal 600 — hover */
    --alifa-teal-press:  #17696E;   /* Teal 700 — pressed */
    --alifa-teal-50:     #F1FCFA;   /* softest teal — selected menu bg */
    --alifa-teal-100:    #CFF8F5;   /* soft teal — hover glow tint */

    /* ---- Navy / Blue (secondary) ---- */
    --alifa-navy:        #212A4E;   /* Navy 950 — footer, headers, dark high-contrast */
    --alifa-blue:        #3A72D7;   /* Blue 600 — secondary / informational */
    --alifa-blue-press:  #305DC6;   /* Blue 700 */

    /* ---- Status colours (meaning only, never decoration) ---- */
    --alifa-green:  #22C55E;   /* success */
    --alifa-red:    #EF4444;   /* error / destructive */

    /* ---- Neutrals ---- */
    --alifa-n50:   #FAFAFA;   /* soft page / section background */
    --alifa-n100:  #F5F5F5;   /* disabled surface */
    --alifa-n200:  #E5E5E5;   /* lines / borders */
    --alifa-n300:  #D4D4D4;
    --alifa-n400:  #A3A3A3;   /* disabled text */
    --alifa-n500:  #737373;   /* hints, placeholders, captions */
    --alifa-n700:  #404040;   /* normal body text */
    --alifa-n900:  #171717;   /* headings / important text */

    --alifa-glow:  0 8px 24px 5px #CFF8F5;   /* soft teal lift on button hover */

    /* Brand accent (Tripoli reads --color-accent; Ghost UI reads --ghost-accent-color).
       Forced !important so the brand teal holds even when the admin accent is unset. */
    --ghost-accent-color: #23B8BC !important;
    --gh-accent-color:    #23B8BC !important;
    --color-accent:       #23B8BC;

    /* ---- ALWAYS LIGHT: pin Tripoli's tokens so the site never follows OS dark mode ---- */
    color-scheme: light;
    --color-background-primary:   #FFFFFF;
    --color-background-secondary: #FAFAFA;   /* Neutral 50 */
    --color-text-primary:    #404040;   /* Neutral 700 body text */
    --color-text-secondary:  #737373;   /* Neutral 500 sub-text */
    --color-border-primary:   #404040;
    --color-border-secondary: #E5E5E5;   /* Neutral 200 borders */

    /* Buttons: hover/pressed fill → Teal 700 #17696E (darker teal). */
    --color-background-button-hover: #17696E;
    --color-text-button-hover: #FFFFFF;

    /* Brand font = Inter for EVERYTHING (headlines + body). Point BOTH Tripoli tokens at Inter
       so no Poppins / Source Serif 4 survives anywhere. Inter is bundled + variable (100–900),
       covers Latin + Cyrillic; Segoe UI / Roboto are the fallbacks per the brand doc. */
    --font-family-sansSerif:  'Inter', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
    --font-family-sans-serif: 'Inter', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
    --font-family-serif:      'Inter', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;

    /* Brand corner radius (Foundations p.13) = 8px (Tripoli default was --space-4 = 4px). */
    --border-radius: 8px;

    /* Body reading size → 16px (guide). --font-size-scale-body-copy drives only the
       article's paragraphs/lists/blockquotes in Tripoli, so this is a surgical remap. */
    --font-size-scale-body-copy: 16px;
}

/* ---- Fonts: Inter (Latin + Cyrillic, bundled) everywhere; Noto Sans Arabic (Google Fonts,
        OFL) for Arabic pages — the licensed companion webfont, since Inter has no Arabic. ---- */
html { font-family: 'Inter', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif; }
html[lang="ar"] {
    font-family: 'Noto Sans Arabic', 'Inter', 'Segoe UI', sans-serif;
    --font-family-sansSerif:  'Noto Sans Arabic', 'Inter', 'Segoe UI', sans-serif;
    --font-family-sans-serif: 'Noto Sans Arabic', 'Inter', 'Segoe UI', sans-serif;
    --font-family-serif:      'Noto Sans Arabic', 'Inter', 'Segoe UI', sans-serif;
}
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6 { font-family: inherit; }

/* ==========================================================================
   TYPE SCALE — exact sizes/weights from Brand Guidelines v1.0.
   Mapped onto Tripoli's real selectors. !important beats Tripoli's per-breakpoint
   scale variables. (Inter is a variable font 100–900, so weight 800 is available.)
   ========================================================================== */
/* H1 · page + post + index titles → 32 / Bold 800 */
.c-topper__headline,
.c-page-header__title,
.c-content h1 { font-size: 32px !important; font-weight: 800 !important; line-height: 1.2 !important; }

/* H2 · section titles, featured cards → 24 / Bold 700 */
.c-section-heading__title,
.c-editors-pick__headline,
.c-card--large .c-card__headline,
.c-content h2 { font-size: 24px !important; font-weight: 700 !important; line-height: 1.25 !important; }

/* H3 · list-card titles, sub-sections → 18 / Bold 700 */
.c-card__headline,
.c-teaser--large .c-teaser__headline,
.c-content h3 { font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; }

/* H4 · small headings → 15 / Semibold 600 */
.c-content h4 { font-size: 15px !important; font-weight: 600 !important; line-height: 1.35 !important; }
.c-content h5 { font-size: 15px !important; font-weight: 600 !important; }
.c-content h6 { font-size: 13px !important; font-weight: 600 !important; }

/* Body reading text → 16 (via body-copy var above) with line-height 1.55 */
.c-content :where(p, ol, ul, blockquote),
.c-content li { line-height: 1.55; }

/* Intro / standfirst / excerpts → 16 (secondary body) */
.c-topper__standfirst,
.c-card__standfirst,
.c-teaser__standfirst,
.c-editors-pick__standfirst { font-size: 16px !important; line-height: 1.5 !important; }

/* Captions, timestamps, byline meta → 13 (Caption) */
.c-feature-image-caption,
.kg-card figcaption,
.c-timestamp,
.c-topper__timestamp:after,
.c-card__meta, .c-card__meta a,
.c-post__byline, .c-post__byline a { font-size: 13px !important; }

/* ==========================================================================
   BRAND COLOURS applied to Tripoli — no layout changes.
   ========================================================================== */
/* Headings → Neutral 900 (#171717). */
h1, h2, h3, h4, h5, h6,
.c-topper__headline, .c-section-heading__title, .c-page-header__title,
.c-card__headline, .c-editors-pick__headline { color: var(--alifa-n900); }

/* Article-body links → Teal 600, semibold, underline on hover (guide). */
.c-content a { color: var(--alifa-teal-hover); font-weight: 600; text-decoration: none; }
.c-content a:hover { color: #212A4E; text-decoration: underline; }
/* POST/CARD TITLES → blue #305DC6 on hover (fires when hovering ANYWHERE on the card;
   Tripoli links are color:inherit, so the direct-link hover alone only fired on the text). */
.c-card:hover .c-card__headline, .c-card:hover .c-card__link,
.c-card__link:hover, .c-card__headline a:hover,
.c-editors-pick:hover .c-editors-pick__headline, .c-editors-pick__headline a:hover,
.c-teaser:hover .c-teaser__headline, .c-teaser__link:hover, .c-teaser__headline a:hover { color: #305DC6 !important; }
/* Other text links (byline, meta, author) → navy #212A4E on hover. */
.c-post__byline a:hover, .c-card__meta a:hover, .u-link:hover,
.c-byline a:hover { color: #212A4E !important; }

/* Buttons: teal fill from the accent. On hover/focus/active force a SOLID darker-teal fill
   (#17696E) + white text + full opacity — Tripoli's default hover token could read as a blank
   fill, making the button look like it faded to opacity 0. */
.c-btn, .btn, .kg-btn, .kg-btn-accent { opacity: 1; }
.c-btn:hover, .c-btn:focus, .c-btn:active,
.btn:hover, .btn:focus, .btn:active,
.kg-btn:hover, .kg-btn:focus, .kg-btn:active,
.kg-btn-accent:hover, .kg-btn-accent:focus, .kg-btn-accent:active {
    background-color: #212A4E !important;
    color: #fff !important;
    opacity: 1 !important;
    box-shadow: var(--alifa-glow);
}

/* Post byline meta (author · date · PUBLIC text) → hints grey #737373. */
.c-card__meta, .c-card__meta a,
.c-timestamp, .c-visibility-label,
.c-post__byline, .c-post__byline a { color: #737373 !important; }
.c-visibility-label { border-color: #737373 !important; }

/* Even out the post share icons (mixed SVG sources). */
.c-share__link svg { width: 18px !important; height: 18px !important; }
/* Share icons → navy #212A4E at rest; blue #305DC6 on hover (same as post titles). */
.c-share__link,
.c-share__link .c-share__icon,
.c-share__link svg,
.c-share__link svg path { color: #212A4E !important; fill: #212A4E !important; }
.c-share__link:hover,
.c-share__link:hover .c-share__icon,
.c-share__link:hover svg,
.c-share__link:hover svg path { color: #305DC6 !important; fill: #305DC6 !important; }

/* ==========================================================================
   BRAND CORNER RADIUS (Foundations p.13) — 8px on cards, feature images, buttons, inputs.
   Tripoli left post-card media + feature/hero images square (0); brand default is 8px.
   ========================================================================== */
.c-card__media, .c-card__image,
.c-feature-image-wrap, .c-feature-image,
.c-editors-pick__media, .c-teaser__media,
.kg-card img { border-radius: 8px; }
.c-card__media, .c-feature-image-wrap,
.c-editors-pick__media, .c-teaser__media { overflow: hidden; }
.c-btn, .btn, .kg-btn { border-radius: 8px; }
/* Form fields (when a subscribe/search input appears): 8px + teal focus ring. */
input, textarea, select { border-radius: 8px; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--alifa-teal); outline-offset: 1px; border-color: var(--alifa-teal);
}

/* ==========================================================================
   COLOUR SCHEME — teal navbar (white contents) · navy footer · airy neutral page.
   ========================================================================== */
/* Page: soft Neutral-50 so the teal stands out (golden rule: white + light greys). */
body { background: #FAFAFA; }

/* Navbar → full-width header background IMAGE covering BOTH rows (logo/switcher + nav).
   Navy fallback matches the image tone if it fails to load. White contents sit on top. */
.c-header {
    background: #4eb8bc url('/assets/header-bg.png?v=2') center center / cover no-repeat;
}
/* Kill the divider line between the two header rows so the image is one seamless band. */
.c-header__top { border-bottom: none !important; }
.c-header__bottom { background: transparent; }
.c-header .c-logo__link,
.c-header .c-header__button,
.c-header .c-header__button svg,
.c-header .lang-switcher-label,
.c-header .lang-switcher-current { color: #fff; }
.c-header .lang-switcher-label { opacity: 1; }
/* search icon SVG ships with an empty fill="" (renders black) → force white */
.c-header .c-header__button svg,
.c-header .c-header__button svg path { fill: #fff !important; }
.c-header .lang-switcher-summary { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.c-header .lang-switcher-summary:hover { border-color: #212A4E; background: #212A4E; }

/* Per-language navbar (Home + About): show only the set matching <html lang>; white on teal. */
.alifa-langnav > li[data-lang] { display: none; }
html[lang='en'] .alifa-langnav > li[data-lang='en'],
html[lang='ar'] .alifa-langnav > li[data-lang='ar'],
html[lang='ru'] .alifa-langnav > li[data-lang='ru'] { display: block; }
.c-header .c-nav__link { color: #fff; font-weight: 500; }
.c-header .c-nav__link:hover { color: #212A4E; opacity: 1; }
.c-header .c-nav { overflow-x: visible; }

/* Footer → brand Teal (matches the navbar); white text + white social-icon circles with teal
   glyphs. Hover accents use Navy so they stay visible against the teal background. */
.c-footer { background: url('/assets/footer-bg.png?v=1') center center / cover no-repeat; color: rgba(255, 255, 255, 0.9); }
.c-footer a,
.c-footer .c-footer-copy,
.c-footer .c-logo__link { color: #fff; }
.c-footer a { transition: opacity 0.15s ease; }
.c-footer a:hover { opacity: 0.7; }
.c-footer .c-social-icons__link { background: #fff; transition: background .15s ease, color .15s ease; }
.c-footer .c-social-icons__link,
.c-footer .c-social-icons__link span,
.c-footer .c-social-icons__link svg,
.c-footer .c-social-icons__link svg path { color: #212A4E !important; fill: #212A4E !important; }
.c-footer .c-social-icons__link:hover { background: #4eb8bc  !important; }
.c-footer .c-social-icons__link:hover,
.c-footer .c-social-icons__link:hover span,
.c-footer .c-social-icons__link:hover svg,
.c-footer .c-social-icons__link:hover svg path { color: #fff !important; fill: #fff !important; opacity: 1;}

/* ==========================================================================
   LANGUAGE FILTER on tag/author archives — driven by the NAVBAR language switcher
   (see default.hbs). Filtered-out cards leave the grid; Arabic cards read RTL within
   the card (page layout itself stays LTR). Empty state when a language has no posts.
   ========================================================================== */
.c-card[hidden] { display: none !important; }
.c-card[data-lang="ar"] .c-card__content { direction: rtl; text-align: right; }
.c-lang-empty { color: var(--alifa-n500); font-size: 16px; padding: 48px 16px; text-align: center; }
.c-lang-empty > span[data-lang] { display: none; }
html[lang='en'] .c-lang-empty > span[data-lang='en'],
html[lang='ar'] .c-lang-empty > span[data-lang='ar'],
html[lang='ru'] .c-lang-empty > span[data-lang='ru'] { display: inline; }

/* Footer credit line: show only the sentence matching <html lang> (same pattern as navbar). */
.c-footer-copy > span[data-lang] { display: none; }
html[lang='en'] .c-footer-copy > span[data-lang='en'],
html[lang='ar'] .c-footer-copy > span[data-lang='ar'],
html[lang='ru'] .c-footer-copy > span[data-lang='ru'] { display: inline; }

/* Arabic must never be letter-spaced (SRS FR-8). */
html[lang="ar"] * { letter-spacing: 0 !important; }

/* ---- Hide any Ghost Portal / members signup UI (members disabled in settings). ---- */
.gh-portal-triggerBtn-wrapper,
button[data-portal],
a[data-portal],
a[href*="#/portal"] { display: none !important; }

/* ---- RTL page scrollbar on the left (Arabic only) — neutral greys. ---- */
html[dir="rtl"] { scrollbar-width: thin; }
html[dir="rtl"]::-webkit-scrollbar { width: 12px; }
html[dir="rtl"]::-webkit-scrollbar-track { background: #F5F5F5; }
html[dir="rtl"]::-webkit-scrollbar-thumb { background: #D4D4D4; border-radius: 6px; }
html[dir="rtl"]::-webkit-scrollbar-thumb:hover { background: #A3A3A3; }

/* Smooth in-page scrolling for #anchor / table-of-contents links (was an instant jump). */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }