/* ============================================================
   Chamber Site – Professional Blue Design
   Primary: rgb(1, 85, 153) = #015599
   ============================================================ */

/* ============================================================
   ▶ ARABIC FONT — SINGLE SOURCE OF TRUTH
   ============================================================
   Current Arabic font: ASHARQIA Arabic Font (a.k.a. "Hawyia Chamber").
   Files: /static/fonts/HawyiaChamber.ttf (regular) +
          /static/fonts/HawyiaChamberDemiBold.ttf (bold).
   Applied ONLY to Arabic locale via html[dir="rtl"] / :lang(ar).
   English locale is untouched and keeps using var(--font).

   ── HOW TO CHANGE THE ARABIC FONT (only one place) ──
   1) Edit the --font-ar value inside :root below, OR
   2) Replace the @font-face src URLs to point at a different file, OR
   3) Drop the @font-face blocks entirely and set --font-ar to a
      system / Google-Fonts stack (e.g. "Cairo", "Tahoma", sans-serif).
   No template or selector edits are needed elsewhere.
   ============================================================ */
/* unicode-range excludes Latin digits U+0030-0039 so digits fall through to
   the next font in the stack (Western 0-9 shapes). ASHARQIA encodes Eastern
   numeral shapes at Latin digit codepoints, so omitting that range fixes it. */
@font-face {
    font-family: "ChamberArabic";
    src: url("/static/fonts/HawyiaChamber.8f34d77fd7b9.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF,
                   U+FB50-FDFF, U+FE70-FEFF,
                   U+0020-002F, U+003A-007E;
}
@font-face {
    font-family: "ChamberArabic";
    src: url("/static/fonts/HawyiaChamberDemiBold.aab689df8531.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF,
                   U+FB50-FDFF, U+FE70-FEFF,
                   U+0020-002F, U+003A-007E;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; }

/* a11y utility — visually hidden but available to screen readers / SEO */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

:root {
    /* ── Primary Blue Palette (rgb 1, 85, 153) ── */
    --clr-primary:        #015599;
    --clr-primary-dark:   #013d6e;
    --clr-primary-darker: #01284a;
    --clr-primary-mid:    #0267b8;
    --clr-primary-bright: #0388e8;
    --clr-primary-light:  #deeaf8;
    --clr-primary-faint:  #f0f6fc;

    /* ── Accent ── */
    --clr-accent:         #f0a500;
    --clr-accent-dark:    #c98c00;
    --clr-accent-light:   #fff8e1;

    /* ── Neutrals ── */
    --clr-text:           #1a2332;
    --clr-text-mid:       #4a5568;
    --clr-text-light:     #718096;
    --clr-text-muted:     #a0aec0;

    /* ── Surfaces ── */
    --clr-bg:             #ffffff;
    --clr-bg-alt:         #f3f7fc;
    --clr-bg-card:        #ffffff;
    --clr-bg-footer:      #0b1929;

    /* ── Borders ── */
    --clr-border:         #ccd9e8;
    --clr-border-light:   #e5eef6;

    /* ── Shadows (blue-tinted) ── */
    --shadow-xs:  0 1px 3px rgba(1, 85, 153, .07);
    --shadow-sm:  0 2px 8px rgba(1, 85, 153, .10);
    --shadow-md:  0 4px 18px rgba(1, 85, 153, .13);
    --shadow-lg:  0 8px 32px rgba(1, 85, 153, .17);
    --shadow-xl:  0 16px 48px rgba(1, 85, 153, .20);

    /* ── Chamber CVI mark (used as a watermark mask) ── */
    --cvi-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 590'%3E%3Cg transform='translate(59,59)' fill='%23ffffff'%3E%3Cpath d='M500.81,120c.67-3.94.93-7.95.77-11.97,1.47-10.95-.13-22.27-4.92-32.87-8.99-19.88-27.32-33.03-49.02-35.18L142.15,9.67,101.16,1.2c-6.09-1.26-12.18-1.51-18.09-.85-3.98-.22-7.93-.04-11.78.53-4.06-.08-8.07.24-11.97.97-19.04.28-36.58,9.37-47.91,25.16C-1.31,44.74-3.54,67.19,5.45,87.06l128.79,284.79,14.95,45.12c2.55,7.7,6.58,14.56,11.75,20.31,1.63,2.28,3.42,4.42,5.35,6.41,1.74,2.26,3.64,4.38,5.68,6.34,9.95,12.01,24.22,19.7,40.37,21.3,21.71,2.15,42.26-7.14,54.98-24.86l126.39-176.12,91.53-102.85c9.06-10.19,14-22.78,14.4-35.79.79-3.84,1.18-7.76,1.17-11.7ZM66.18,4.24l1.49.15c-7.64,3.22-14.62,8.17-20.42,14.69-13.65,15.34-17.94,36.13-11.48,55.62l78.3,236.28L27.61,77.68c-7.03-18.96-3.52-39.58,9.39-55.15,7.59-9.15,17.48-15.43,28.4-18.36.26.02.52.04.77.06ZM497.85,115.68c-.33-1.27-.7-2.55-1.12-3.81-6.46-19.49-22.32-33.6-42.43-37.76L208.63,23.39l243.55,41.48c19.94,3.4,36.03,16.74,43.06,35.71,1.59,4.28,2.63,8.64,3.16,13.01-.17.7-.35,1.39-.55,2.09ZM498.77,119.74s0,.05-.01.07c0,0,0-.02,0-.02,0-.02.01-.03.02-.05ZM391.19,269.89l-4.03,4.86-143.1,160.8c-13.18,14.81-32.62,21.26-52.04,17.24-8.74-1.8-16.64-5.56-23.26-10.86-1.3-2.12-2.48-4.34-3.53-6.65l-26.87-59.42-2.45-5.96-2.2-5.94L37.64,74.07c-6.23-18.81-2.09-38.88,11.09-53.69,6.51-7.31,14.54-12.58,23.35-15.56l60.8,6.03,10.15,1.37,9.88,1.68,301,62.15c19.41,4.01,34.72,17.63,40.95,36.44.76,2.28,1.36,4.58,1.81,6.89-1.82,5.1-4.38,10.02-7.67,14.6l-93.87,130.8-3.94,5.11ZM191.62,454.73c2.03.42,4.06.73,6.08.93,18.03,1.79,35.56-5,47.83-18.79l105.55-118.61-100.09,120.71c-12.04,14.52-29.91,21.82-48.43,19.98-1.34-.13-2.68-.31-4.02-.54-8.87-1.51-16.98-5-23.88-10.07,5.17,2.96,10.87,5.14,16.96,6.4ZM490.7,135.21c2.67-3.72,4.87-7.65,6.61-11.72.07.62.14,1.24.19,1.86-1.95,6.97-5.26,13.64-9.9,19.65l-55.78,72.26,58.88-82.05ZM499.48,107.91c-.59-2.7-1.36-5.38-2.35-8.03-7.28-19.65-23.96-33.47-44.61-36.99L200.18,19.91l249.85,33.63c20.45,2.75,37.34,15.79,45.18,34.88,2.58,6.28,4,12.79,4.3,19.28,0,.07-.02.14-.03.21ZM59.53,3.95c-9.19,3.48-17.48,9.34-24.08,17.3-13.37,16.13-17.01,37.48-9.73,57.13l88.26,238.17L17.51,81.72c-7.84-19.09-5-40.24,7.61-56.57C33.83,13.88,45.92,6.53,59.3,3.96c.08,0,.15,0,.23,0ZM198.2,460.39c1.39.24,2.78.42,4.16.56,19.19,1.9,37.7-5.66,50.18-20.7l103.41-124.71-97.77,126.66c-12.61,16.34-32.34,24.46-52.8,21.69-9.1-1.23-17.5-4.49-24.71-9.42,5.38,2.83,11.27,4.85,17.53,5.92ZM489.23,146.25c3.57-4.63,6.39-9.64,8.43-14.87-1.82,8.76-5.79,17.1-11.8,24.35l-57.1,68.86,60.48-78.34ZM494.75,76.02c2.92,6.47,4.61,13.22,5.11,19.98-.7-2.81-1.61-5.61-2.74-8.36-8.12-19.77-25.62-33.28-46.81-36.14L191.44,16.66l255.99,25.4c20.95,2.08,38.64,14.77,47.32,33.96ZM13.11,28.24c8.56-11.93,20.8-19.89,34.53-22.92-9.32,3.87-17.64,10.17-24.13,18.58-13.06,16.92-16.01,38.83-7.89,58.61l98.49,239.74L7.36,86.2C-1.32,67.01.83,45.34,13.11,28.24ZM265.62,445.24c-12.28,17.11-32.12,26.08-53.07,24-9.33-.93-18.01-3.96-25.53-8.73,5.59,2.7,11.67,4.55,18.09,5.41.72.1,1.43.18,2.14.25,20.42,2.03,39.94-6.37,52.56-22.72l101.02-130.86-95.2,132.65ZM483.77,166.18l-58.28,65.49,61.91-74.66c3.66-4.41,6.58-9.22,8.76-14.27-2.08,8.52-6.26,16.55-12.39,23.44Z'/%3E%3C/g%3E%3C/svg%3E");

    /* ── Header top bar height (drives the scroll-away offset) ── */
    --topbar-h: 42px;

    /* ── Radius ── */
    --radius-sm:  6px;
    --radius:     10px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-full: 9999px;

    /* ── Transitions ── */
    --transition: .28s ease;
    /* Easing curves ported from ScratchPad/NewDesign (--ease / --ease-soft) */
    --ease-design: cubic-bezier(.22, .61, .36, 1);
    --ease-soft-design: cubic-bezier(.33, .9, .32, 1);
    --transition-slow: .45s ease;

    /* ── Typography ── */
    --font: "Noto Sans Arabic", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Arabic-only font stack — see "ARABIC FONT — SINGLE SOURCE OF TRUTH" comment at top of file */
    --font-ar: "ChamberArabic", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;

    /* ── Type scale ── */
    --fs-h1: 2rem;       /* 32px */
    --fs-h2: 1.6rem;     /* 25.6px */
    --fs-h3: 1.3rem;     /* 20.8px */
    --fs-h4: 1.1rem;     /* 17.6px */
    --fs-body: 1rem;     /* 16px */
    --fs-small: 0.88rem; /* 14px */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
    --fw-heavy: 800;

    /* ── HOMEPAGE SECTION BACKGROUND PHOTOS ──────────────────────
       Managed from the admin: Home page editor → Design tab. The
       homepage template emits an inline <style> overriding these
       vars with optimized renditions of the chosen images (see
       home/home_page.html). `none` here is the no-photo fallback —
       each section is designed to look right with OR without its
       photo; overlays keep text readable either way. */
    --home-bg-events:   none;
    --home-bg-services: none;
    --home-bg-media:    none;
    --home-bg-partners: none;
}

/* ─── Base ─── */
html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    color: var(--clr-text);
    background: var(--clr-bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--clr-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--clr-primary-dark); }

img { max-width: 100%; height: auto; display: block; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.section { padding: 72px 0; }

/* ── Generic page H1 (detail templates) ── */
.page-title {
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    color: var(--clr-primary-dark);
    line-height: 1.3;
    margin: 0 0 16px;
}
.page-title::after {
    content: ""; display: block; width: 60px; height: 3px;
    background: var(--clr-primary-dark); margin-top: 10px; border-radius: 2px;
}

/* ── Breadcrumbs ── */
.breadcrumbs {
    padding: 14px 24px 0;
    font-size: var(--fs-small);
    color: var(--clr-text-mid);
}
.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0;
    padding: 0;
}
.breadcrumbs li {
    display: inline-flex;
    align-items: center;
}
.breadcrumbs li + li::before {
    content: "›";
    margin: 0 8px;
    color: var(--clr-text-muted);
}
[dir="rtl"] .breadcrumbs li + li::before { content: "‹"; }
.breadcrumbs a {
    color: var(--clr-text-mid);
}
.breadcrumbs a:hover {
    color: var(--clr-primary);
}
.breadcrumbs [aria-current="page"] {
    color: var(--clr-primary-dark);
    font-weight: var(--fw-medium);
}

/* ── Section Title ── */
.section-title {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 800;
    color: var(--clr-primary-dark);
    margin-bottom: 40px;
    text-align: center;
    letter-spacing: -.3px;
    position: relative;
}
.section-title::after {
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    background: linear-gradient(90deg, var(--clr-primary-mid), var(--clr-primary-dark));
    border-radius: var(--radius-full);
    margin: 12px auto 0;
}

/* ============================================================
   HEADER TOP BAR — contact strip above the main navigation
   ------------------------------------------------------------
   Rendered by {% top_bar %} (apps/footer/templatetags) as the first
   child of .site-header. Phone / email / location come from the
   private control panel, social links from FooterSettings.

   .site-header only carries .has-topbar when the strip is actually
   rendered, so the negative sticky offset below can never pull the
   nav row off the top of a site that has nothing configured.
   ============================================================ */
.site-topbar {
    height: var(--topbar-h);
    background: #07152a;
    color: #c9d6ea;
    font-size: .82rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    transition: background var(--transition), color var(--transition),
                border-color var(--transition);
}

.topbar-inner {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.topbar-group {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}
a.topbar-item:hover { color: #fff; }

.topbar-icon {
    width: 15px;
    height: 15px;
    flex: none;
    opacity: .85;
}

.topbar-sep {
    width: 1px;
    height: 15px;
    flex: none;
    background: rgba(255, 255, 255, .16);
}

/* Bare glyphs here — the circular chip treatment stays footer-only.
   The masks themselves are shared (see .social-link.social-*::before). */
.topbar-social { display: flex; align-items: center; gap: 13px; }

.topbar-social .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    background: none;
    border: none;
    border-radius: 0;
    transition: transform .2s ease;
}
.topbar-social .social-link::before {
    width: 15px;
    height: 15px;
    background-color: #a9bbd6;
    transition: background-color .2s ease;
}
.topbar-social .social-link:hover {
    background: none;
    transform: translateY(-1px);
}
.topbar-social .social-link:hover::before { background-color: #fff; }

/* Outline (Lucide 0.469.0) glyphs in the top bar, matching the redesign's
   `data-lucide` icons. Overrides the solid brand marks defined further down
   (see .social-link.social-*::before) — those stay in place for the footer
   chips. X and TikTok have no Lucide equivalent (Lucide only ships the old
   Twitter bird), so both keep their filled brand marks. */
.topbar-social .social-link.social-instagram::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='20' x='2' y='2' rx='5' ry='5'/><path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/><line x1='17.5' x2='17.51' y1='6.5' y2='6.5'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='20' x='2' y='2' rx='5' ry='5'/><path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/><line x1='17.5' x2='17.51' y1='6.5' y2='6.5'/></svg>");
}
.topbar-social .social-link.social-linkedin::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/><rect width='4' height='12' x='2' y='9'/><circle cx='4' cy='4' r='2'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/><rect width='4' height='12' x='2' y='9'/><circle cx='4' cy='4' r='2'/></svg>");
}
.topbar-social .social-link.social-youtube::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17'/><path d='m10 15 5-3-5-3z'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17'/><path d='m10 15 5-3-5-3z'/></svg>");
}
.topbar-social .social-link.social-facebook::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/></svg>");
}

/* Scroll-away: the sticky header parks 42px higher than the viewport
   top, so the strip slides out of view while the nav row stays pinned. */
.site-header.has-topbar { top: calc(-1 * var(--topbar-h)); }

/* Phones: contact details drop out, location + social stay. */
@media (max-width: 767px) {
    .site-topbar { font-size: .76rem; }
    .topbar-contact { display: none; }
    .topbar-inner { justify-content: flex-end; }
    .topbar-group { gap: 12px; }
    .topbar-social { gap: 11px; }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--clr-border-light);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), background var(--transition);
}
.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

.header-inner {
    display: flex;
    align-items: center;
    /* Grouping matches the redesign's `.nav-in`: logo and nav sit together as
       one cluster separated by a fixed 30px, and the action buttons are pushed
       to the far edge by .header-actions' auto margin. (Was space-between,
       which spread all three groups evenly and left the nav floating mid-bar.) */
    gap: 30px;
    /* Bar height + logo height are a pair: 84px bar / 50px logo matches the
       redesign's proportion, so the mark sits on the nav row's optical line
       instead of towering over it. Both shrink together on .condensed —
       toggled in mysite.js once a full-screen hero has scrolled behind the
       header (not on .scrolled, which fires at 10px and would shrink the
       logo the instant the user touches the wheel). */
    height: 84px;
    transition: height .3s cubic-bezier(.4, 0, .2, 1);
}
.site-header.condensed .header-inner { height: 66px; }

/* ── Logo ── */
.site-logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--clr-primary-dark);
    letter-spacing: -.3px;
}
.site-logo a:hover { color: var(--clr-primary); }

.logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-bright));
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.logo-img {
    height: 50px;
    width: auto;
    display: block;
    transition: height .3s cubic-bezier(.4, 0, .2, 1);
}
.site-header.condensed .logo-img { height: 40px; }

/* Logo animations live in logo-effects.css, keyed off the
   logo-effect-<slug> class chosen on the homepage's Logo Effect tab. */

@media (prefers-reduced-motion: reduce) {
    .header-inner, .logo-img { transition: none; }
}

/* ── Main Nav ── */
.main-nav {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-inline-start: 6px;   /* redesign's `.nav-links` offset from the brand */
}

.nav-link {
    position: relative;   /* anchors the ::after underline */
    /* Kept in sync with the link's horizontal padding so the underline ends
       flush with the text; the LTR block below retunes both together. */
    --nav-underline-inset: 15px;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 15.5px;
    color: var(--clr-text-mid);
    white-space: nowrap;   /* keep multi-word labels on one line; the
                              ≤1199px hamburger guarantees room for it */
    transition: color var(--transition);
}

/* Hover is an underline that grows outward from the centre — no background
   pill. `inset-inline` animates from 50% (zero width) to 15px, matching the
   link's horizontal padding so the bar lines up with the text edges. */
.nav-link::after {
    content: "";
    position: absolute;
    inset-inline: 50%;
    bottom: 2px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--clr-primary);
    transition: inset-inline .3s cubic-bezier(.33, .9, .32, 1);
}
.nav-link:hover {
    background: transparent;
    color: var(--clr-primary);
}
.nav-link:hover::after { inset-inline: var(--nav-underline-inset); }

/* Current page (or its section): permanent underline, no hover animation. */
.nav-link.active {
    color: var(--clr-primary);
    font-weight: 600;
}
.nav-link.active::after { inset-inline: var(--nav-underline-inset); transition: none; }

@media (prefers-reduced-motion: reduce) {
    .nav-link::after { transition: none; }
}

/* English weight parity with Arabic. ChamberArabic ships only 400 + 700
   faces, so the 500 above renders Arabic labels at regular 400. English
   uses Noto Sans' real 500 (medium) and reads heavier — drop it to 400.
   Current-page items keep their 600. */
html[dir="ltr"] .nav-link:not(.active),
html[dir="ltr"] .nav-dropdown-menu a:not(.is-current) {
    font-weight: 400;
}

/* ── Dropdowns ── */
.nav-dropdown { position: relative; z-index: 1001; }
/* The ▾ is dropped from the desktop bar (the redesign's nav reads flat) but
   kept inside the mobile sheet, where it is the only cue a submenu exists. */
.nav-dropdown .nav-arrow { display: none; }
.main-nav.open .nav-dropdown .nav-arrow {
    display: inline;
    font-size: .6rem;
    margin-inline-start: 4px;
    opacity: .55;
}

/*
 * Invisible hover-bridge: extends the .nav-dropdown hit area downward
 * to fill the visual gap between the nav item and the dropdown panel.
 * This keeps .nav-dropdown:hover active while the cursor travels the gap.
 */
.nav-dropdown::after {
    content: "";
    display: block;
    position: absolute;
    top: 100%;       /* starts right at the bottom of the nav item */
    left: -8px;
    right: -8px;
    height: 14px;    /* covers the 10px visual gap + 4px safety buffer */
    background: transparent;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);  /* visual breathing room kept for aesthetics */
    right: 0;
    min-width: 220px;
    background: var(--clr-bg);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 1000;
    animation: dropIn .2s ease;
}
html[dir="ltr"] .nav-dropdown-menu { right: auto; left: 0; }

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* CSS :hover as baseline — JS adds .is-open for robustness */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu.is-open { display: block; }

.nav-dropdown-menu a {
    display: block;
    padding: 9px 14px;
    color: var(--clr-text-mid);
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.is-current {
    background: var(--clr-primary-faint);
    color: var(--clr-primary);
}
.nav-dropdown-menu a.is-current { font-weight: 600; }

/* ── Header Actions ── */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;   /* pushed to the far edge; see .header-inner */
}

/* 42x42 / radius 10px matches the redesign's `.icon-btn`. */
.header-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    color: var(--clr-text-light);
    transition: background var(--transition), color var(--transition);
}
/* Line glyph, so it takes the header's colour states (see the hero-overlap
   block) instead of the emoji's baked-in colours. */
.header-search-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}
.header-search-btn:hover {
    background: var(--clr-primary-faint);
    color: var(--clr-primary);
}

/* ── Language Switcher ── */
.lang-switch-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border: 1.5px solid var(--clr-primary);
    border-radius: var(--radius-full);
    color: var(--clr-primary);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .5px;
    transition: background var(--transition), color var(--transition);
}
.lang-switch-btn:hover {
    background: var(--clr-primary);
    color: #fff;
}

/* ── E-Services CTA (external link) ── */
.header-eservices-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border-radius: var(--radius-full);
    background: var(--clr-primary);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.header-eservices-btn:hover {
    background: var(--clr-primary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Same 42x42 / radius 10px icon-button footprint as the search glyph. */
.mobile-menu-btn {
    display: none;
    place-items: center;
    width: 42px;
    height: 42px;
    background: none;
    border: none;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    color: var(--clr-text-mid);
    border-radius: 10px;
    transition: background var(--transition);
    flex-shrink: 0;   /* never let the toggle be squeezed off-screen */
}
.mobile-menu-btn:hover { background: var(--clr-primary-faint); }

/* E-Services CTA that lives inside the mobile menu sheet. Hidden by
   default (desktop + tablet keep the header-bar button); revealed only
   on phones where the bar button is removed (see ≤600px block). */
.nav-eservices-mobile { display: none; }

/* ============================================================
   HERO SLIDER — full-screen cinematic (chamber.sa-style)
   Scoped to .hero-slider so .tp-hero (main_page.css) is untouched.
   Slide switching still relies on the .active class toggled by
   slider_js.html — only the presentation changed (opacity
   crossfade + Ken Burns instead of display:none).
   ============================================================ */
.hero-slider {
    position: relative;
    overflow: hidden;
    background: var(--clr-primary-darker);
    height: 100vh;   /* fallback */
    height: 100svh;
    min-height: 520px;
}
/* No slides in the CMS → collapse instead of a giant empty block */
.hero-slider:not(:has(.slide)) { display: none; }

.hero-slider .slider-wrapper { position: relative; height: 100%; }

.hero-slider .slide {
    display: block;
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    transition: opacity 1.3s ease, visibility 0s linear 1.3s;
}
.hero-slider .slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: opacity 1.3s ease;
}

.hero-slider .slide img,
.hero-slider .slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Brand-colour behind a video that has no poster and hasn't painted its
   first frame yet — avoids a black flash on browsers that render an
   unbuffered <video> as black rather than transparent. */
.hero-slider .slide video {
    background: var(--clr-primary-darker);
}
/* Ken Burns: starts zoomed, eases out to rest — by the time the next
   slide crossfades in, residual motion is ~1%, so the snap-back of the
   outgoing image is imperceptible. */
.hero-slider .slide.active img {
    animation: heroKenBurns 9s ease-out forwards;
}
@keyframes heroKenBurns {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}

/* Legibility scrim — soft at the top (under the transparent header),
   stronger at the bottom (under the caption). */
.hero-slider .slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(1, 18, 38, .52) 0%,
        rgba(1, 18, 38, .10) 32%,
        rgba(1, 18, 38, 0)   55%,
        rgba(1, 13, 30, .78) 100%);
    pointer-events: none;
    z-index: 1;
}

.hero-slider .slide-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 2;
    max-width: 1240px;
    margin-inline: auto;
    padding: 0 48px 120px;
    background: none;
    color: #fff;
    font-size: clamp(1.35rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.4;
    text-align: start;
    text-shadow: 0 2px 28px rgba(0, 0, 0, .5);
}
.hero-slider .slide.active .slide-caption {
    animation: heroCaptionIn 1s .25s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes heroCaptionIn {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.slide-caption a { color: #fff; }
.slide-caption a:hover { text-decoration: underline; color: #fff; }

/* Scroll cue — bouncing chevron at the bottom centre */
.hero-slider::after {
    content: "";
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 14px;
    height: 14px;
    border-right: 2px solid rgba(255, 255, 255, .9);
    border-bottom: 2px solid rgba(255, 255, 255, .9);
    transform: translateX(-50%) rotate(45deg);
    z-index: 3;
    pointer-events: none;
    animation: heroCue 2.2s ease-in-out infinite;
}
@keyframes heroCue {
    0%, 100% { transform: translateX(-50%) rotate(45deg) translate(0, 0); opacity: .95; }
    50%      { transform: translateX(-50%) rotate(45deg) translate(7px, 7px); opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slider .slide,
    .hero-slider .slide.active { transition: none; }
    .hero-slider .slide.active img { animation: none; }
    .hero-slider .slide.active .slide-caption { animation: none; }
    .hero-slider::after { animation: none; }
}

/* Glassmorphic slider buttons */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .25);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.05rem;
    cursor: pointer;
    color: #fff;
    box-shadow: var(--shadow-md);
    transition: background var(--transition), transform var(--transition);
    z-index: 10;
}
.slider-btn:hover {
    background: rgba(255, 255, 255, .28);
    transform: translateY(-50%) scale(1.08);
}
.slider-prev { left: 20px; }
.slider-next { right: 20px; }
[dir="rtl"] .slider-prev { left: auto; right: 20px; }
[dir="rtl"] .slider-next { right: auto; left: 20px; }

/* Pill-shaped dots */
.slider-dots {
    position: absolute;
    bottom: 22px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 7px; z-index: 10;
}
.dot {
    width: 8px; height: 8px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
    transition: background var(--transition), width var(--transition);
}
.dot.active { background: #fff; width: 26px; }

/* Full-screen hero: lift dots clear of the scroll cue, fade controls in */
.hero-slider .slider-dots { bottom: 64px; }
.hero-slider .slider-btn { z-index: 4; }
.hero-slider .dot { width: 9px; height: 9px; }
.hero-slider .dot.active { width: 30px; }

/* ============================================================
   HOMEPAGE HEADER — transparent over the hero, solid after
   ------------------------------------------------------------
   effects.js adds:
     body.has-fullscreen-hero      → homepage with hero slides
     .site-header.hero-overlap     → hero still under the header
   Falls back gracefully to the default sticky white header when
   JS is unavailable.
   ============================================================ */
body.has-fullscreen-hero .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    transition: background .35s ease, box-shadow .35s ease,
                border-color .35s ease;
}
body.has-fullscreen-hero .site-header.hero-overlap {
    background: linear-gradient(180deg, rgba(2, 16, 34, .52), rgba(2, 16, 34, 0));
    /* Gradient must span the BORDER box, not the padding box (the CSS default).
       With the default background-origin the gradient is sized to the padding
       box and then tiles into the 1px transparent bottom border — that repeat
       restarts the gradient at its dark stop and paints a hard black hairline
       across the bottom of the header, over the hero video. */
    background-origin: border-box;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: none;
}

/* Top bar over a fullscreen hero: no background of its own, the header's
   gradient scrim (which spans the whole header, strip included) supplies the
   contrast. The header is position:fixed on these pages, so the strip cannot
   scroll away on its own — it is slid out with the same .scrolled class
   mysite.js already toggles past 10px. */
.site-header.hero-overlap .site-topbar {
    background: transparent;
    border-bottom-color: transparent;
    color: rgba(255, 255, 255, .92);
}
.site-header.hero-overlap .topbar-sep { background: rgba(255, 255, 255, .28); }
.site-header.hero-overlap .topbar-social .social-link::before {
    background-color: rgba(255, 255, 255, .88);
}

body.has-fullscreen-hero .site-header.has-topbar {
    top: 0;
    transition: background .35s ease, box-shadow .35s ease,
                border-color .35s ease, top .35s ease;
}
body.has-fullscreen-hero .site-header.has-topbar.scrolled {
    top: calc(-1 * var(--topbar-h));
}

/* White chrome while transparent */
.site-header.hero-overlap .logo-img {
    filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0, 0, 0, .25));
}
.site-header.hero-overlap .nav-link {
    color: rgba(255, 255, 255, .92);
}
/* Over the hero the growing underline turns white — the primary blue has no
   contrast against a photographic backdrop. No hover pill here either. */
.site-header.hero-overlap .nav-link::after { background: #fff; }
.site-header.hero-overlap .nav-link:hover {
    background: transparent;
    color: #fff;
}
.site-header.hero-overlap .nav-link.active { color: #fff; }
.site-header.hero-overlap .header-search-btn,
.site-header.hero-overlap .mobile-menu-btn {
    color: rgba(255, 255, 255, .92);
}
.site-header.hero-overlap .header-search-btn:hover,
.site-header.hero-overlap .mobile-menu-btn:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}
.site-header.hero-overlap .lang-switch-btn {
    border-color: rgba(255, 255, 255, .85);
    color: #fff;
}
.site-header.hero-overlap .lang-switch-btn:hover {
    background: #fff;
    color: var(--clr-primary-dark);
}
.site-header.hero-overlap .header-eservices-btn {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}
.site-header.hero-overlap .header-eservices-btn:hover {
    background: #fff;
    color: var(--clr-primary-dark);
}
/* Opened mobile menu while the header is transparent: the default
   white panel would show white-on-white links (hero-overlap turns
   .nav-link white) — use a dark glass sheet instead so the white
   links stay readable. Solid-header state keeps the white panel. */
.site-header.hero-overlap .main-nav.open {
    background: rgba(2, 16, 34, .94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: rgba(255, 255, 255, .16);
}
.site-header.hero-overlap .main-nav.open .nav-link:hover,
.site-header.hero-overlap .main-nav.open .nav-link.active {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/* ============================================================
   MEDIA CENTER / TABS — feature layout
   (section background is set below and, on the homepage, by the
   .template-homepage parallax band — never set it here again)
   ============================================================ */
.media-center { background: var(--clr-bg-alt); }

/* ── Section head: eyebrow + swapping title + pill tabs + view-all ── */
.mc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 34px;
    flex-wrap: wrap;
}
.mc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--clr-primary-dark);
}
.mc-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--clr-primary);
    border-radius: 2px;
}
.mc-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.01em;
    margin: 8px 0 0;
    color: var(--clr-text);
}
.mc-controls {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.mc-tabs {
    display: flex;
    gap: 6px;
    background: var(--clr-bg-card);
    padding: 5px;
    border-radius: var(--radius-full);
    border: 1px solid var(--clr-border-light);
    flex-wrap: wrap;
}
.mc-tab {
    border: 0;
    background: transparent;
    color: var(--clr-text-light);
    font-weight: 600;
    font-size: .9rem;
    font-family: inherit;
    padding: 9px 18px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.mc-tab.active { background: var(--clr-primary); color: #fff; }
.mc-tab:not(.active):hover {
    color: var(--clr-primary-dark);
    background: var(--clr-primary-faint);
}
.mc-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--clr-primary-dark);
    font-size: .92rem;
    padding: 9px 4px;
    transition: gap .25s ease, color .2s ease;
}
.mc-view-all:hover { gap: 14px; color: var(--clr-primary-bright); }
.mc-view-all svg { width: 17px; height: 17px; }
/* arrows are drawn pointing left (RTL "forward") — mirror for LTR */
html[dir="ltr"] .mc-view-all svg,
html[dir="ltr"] .mc-more svg { transform: scaleX(-1); }

.mc-pane { display: none; }
.mc-pane.active { display: block; }

/* ── Feature layout: big first card + stack of minis ── */
.mc-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    align-items: stretch;
}
.mc-layout--solo { grid-template-columns: 1fr; }
/* minis share the feature's height in equal rows so bottoms line up */
.mc-stack { display: grid; grid-auto-rows: 1fr; gap: 24px; }

.mc-feature {
    display: flex;
    flex-direction: column;
    background: var(--clr-bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--clr-border-light);
    box-shadow: var(--shadow-sm);
    transition: transform .28s ease, box-shadow .28s ease;
    color: var(--clr-text);
}
.mc-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    color: var(--clr-text);
}
.mc-feature-media {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: var(--clr-primary-faint);
}
.mc-feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;            /* preserve heads in portrait photos */
    transition: transform .6s ease;
}
.mc-feature:hover .mc-feature-media img { transform: scale(1.06); }
/* soft gradient at the image foot for depth */
.mc-feature-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(1, 40, 74, .32), rgba(1, 40, 74, 0) 42%);
}
.mc-chip {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    z-index: 2;
    background: rgba(255, 255, 255, .94);
    color: var(--clr-primary-dark);
    font-size: .75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 12px rgba(1, 40, 74, .14);
}
.mc-feature-body {
    padding: 26px 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    flex: 1;
}
.mc-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--clr-text-light);
    font-size: .82rem;
}
.mc-date svg { width: 14px; height: 14px; flex: none; }
.mc-feature-title {
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    font-weight: 600;
    line-height: 1.45;
    margin: 0;
    color: var(--clr-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s ease;
}
.mc-feature:hover .mc-feature-title { color: var(--clr-primary-dark); }
.mc-excerpt {
    font-size: .9rem;
    color: var(--clr-text-light);
    margin: 0;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mc-more {
    margin-top: auto;
    padding-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--clr-primary-dark);
    font-weight: 600;
    font-size: .88rem;
    position: relative;
    align-self: flex-start;
}
.mc-more svg { width: 15px; height: 15px; transition: transform .25s ease; }
.mc-feature:hover .mc-more svg { transform: translateX(-4px); }
html[dir="ltr"] .mc-feature:hover .mc-more svg { transform: scaleX(-1) translateX(-4px); }
/* animated underline under "read more" */
.mc-more::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: -3px;
    height: 2px;
    width: 0;
    background: var(--clr-primary);
    border-radius: 2px;
    transition: width .3s ease;
}
.mc-feature:hover .mc-more::after { width: 100%; }

/* ── Compact mini card (thumb + date + title) ── */
.mc-mini {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 16px;
    align-items: center;
    background: var(--clr-bg-card);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg);
    padding: 12px;
    box-shadow: var(--shadow-xs);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    color: var(--clr-text);
}
.mc-mini:hover {
    transform: translateY(-3px);
    border-color: var(--clr-primary);
    box-shadow: var(--shadow-md);
    color: var(--clr-text);
}
/* leading accent edge that scales in on hover */
.mc-mini::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--clr-primary);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .28s ease;
}
.mc-mini:hover::before { transform: scaleY(1); }
.mc-mini-media {
    aspect-ratio: 1 / 1;
    border-radius: calc(var(--radius-lg) - 4px);
    overflow: hidden;
    background: var(--clr-primary-faint);
}
.mc-mini-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform .6s ease;
}
.mc-mini:hover .mc-mini-media img { transform: scale(1.06); }
.mc-mini-title {
    margin: 7px 0 0;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--clr-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s ease;
}
.mc-mini:hover .mc-mini-title { color: var(--clr-primary-dark); }
.mc-mini .mc-date { font-size: .78rem; }

/* no-image fallback (same look as the news-card placeholder) */
.mc-media--placeholder {
    background:
        linear-gradient(135deg, var(--clr-primary-faint) 0%, var(--clr-primary-light) 100%);
}
.mc-media--placeholder::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%);
    background: currentColor;
    color: var(--clr-primary);
    opacity: .25;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'><path d='M4 5h16v14H4z'/><path d='M4 15l4-4 4 4 3-3 5 5'/><circle cx='9' cy='9' r='1.5'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'><path d='M4 5h16v14H4z'/><path d='M4 15l4-4 4 4 3-3 5 5'/><circle cx='9' cy='9' r='1.5'/></svg>") center/contain no-repeat;
}
.mc-mini-media.mc-media--placeholder { position: relative; }
.mc-mini-media.mc-media--placeholder::before { width: 34px; height: 34px; }
/* no photo → no depth gradient (would smudge the empty placeholder) */
.mc-feature-media.mc-media--placeholder::after { background: none; }

/* memos / delegations without a photo: static per-type default artwork
   (900×620 SVG; keep the motif centred when the square mini card crops it) */
.mc-media-default { object-position: center; }

/* ── Media Center responsive ── */
@media (max-width: 992px) {
    .mc-layout { grid-template-columns: 1fr; }
    .mc-head { align-items: flex-start; }
}
@media (max-width: 480px) {
    .mc-mini { grid-template-columns: 96px 1fr; }
    .mc-feature-body { padding: 20px 20px 22px; }
}

.news-list { list-style: none; }
.news-list li { border-bottom: 1px solid var(--clr-border-light); }
.news-list li:last-child { border-bottom: none; }
.news-list a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    color: var(--clr-text);
    transition: color var(--transition);
}
.news-list a:hover { color: var(--clr-primary); }

.news-date {
    flex-shrink: 0;
    font-size: .82rem;
    color: var(--clr-text-muted);
    min-width: 96px;
    font-variant-numeric: tabular-nums;
}
.news-title { font-weight: 500; font-size: .93rem; line-height: 1.5; }

.empty-state {
    padding: 32px 0;
    color: var(--clr-text-muted);
    text-align: center;
    font-style: italic;
}

.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-weight: 600;
    font-size: .88rem;
    color: var(--clr-primary);
    padding: 8px 18px;
    border: 1.5px solid var(--clr-primary);
    border-radius: var(--radius-full);
    transition: background var(--transition), color var(--transition);
}
.view-all-link:hover {
    background: var(--clr-primary);
    color: #fff;
}

/* ── News Cards Grid ── */
.news-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.news-card {
    background: var(--clr-bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--clr-border-light);
    transition: transform var(--transition), box-shadow var(--transition);
}
.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.news-card > a { display: block; color: var(--clr-text); }
.news-card > a:hover { color: var(--clr-text); }

.news-card-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--clr-primary-faint);
}
.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;            /* preserve heads in portrait photos; crop from bottom only */
    transition: transform var(--transition-slow);
}
.news-card:hover .news-card-image img { transform: scale(1.04); }

.news-card-image--placeholder {
    background:
        linear-gradient(135deg, var(--clr-primary-faint) 0%, var(--clr-primary-light) 100%);
    position: relative;
}
.news-card-image--placeholder::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%);
    background: currentColor;
    color: var(--clr-primary);
    opacity: .25;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'><path d='M4 5h16v14H4z'/><path d='M4 15l4-4 4 4 3-3 5 5'/><circle cx='9' cy='9' r='1.5'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'><path d='M4 5h16v14H4z'/><path d='M4 15l4-4 4 4 3-3 5 5'/><circle cx='9' cy='9' r='1.5'/></svg>") center/contain no-repeat;
}

.news-card-body { padding: 20px 22px 22px; }

.news-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.news-card-category {
    display: inline-block;
    padding: 3px 10px;
    background: var(--clr-primary-light);
    color: var(--clr-primary-dark);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-radius: var(--radius-full);
}

.news-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.45;
    color: var(--clr-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card-excerpt {
    font-size: .88rem;
    color: var(--clr-text-light);
    line-height: 1.6;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card-date {
    font-size: .8rem;
    color: var(--clr-text-muted);
    font-weight: 500;
}

/* ── Featured variant (Chamber News index) ── */
.news-cards-grid--featured {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 28px;
}
.news-card--featured .news-card-image {
    position: relative;
    height: 300px;
}

.news-card-badge {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    padding: 6px 14px;
    background: rgba(91, 33, 79, .92);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    backdrop-filter: blur(2px);
    letter-spacing: .2px;
    line-height: 1.2;
    z-index: 2;
}

.news-card--featured .news-card-body {
    padding: 18px 20px 20px;
    text-align: start;
}
.news-card--featured .news-card-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.55;
    color: var(--clr-text);
    margin-bottom: 14px;
    -webkit-line-clamp: 2;
}
.news-card--featured .news-card-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 500;
    color: var(--clr-primary);
}
.news-card-date-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .news-cards-grid--featured { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .news-cards-grid--featured { grid-template-columns: 1fr; }
}

/* ============================================================
   NEWSLETTER CTA — navy card on a light band (redesign)
   Card carries two decorations, both behind the content
   (isolation + z-index:-1): a soft blue radial glow top-trailing,
   and the chamber sail mark bleeding off the leading edge.
   No email field — the button links straight to Mailchimp.
   ============================================================ */
.newsletter-cta {
    position: relative;
    background: var(--clr-primary-faint);
    padding: 72px 0;
}

.nl-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    border-radius: var(--radius-xl);
    background: linear-gradient(120deg,
        var(--clr-primary-darker) 0%,
        var(--clr-primary-dark) 45%,
        var(--clr-primary) 100%);
    padding: clamp(30px, 4.5vw, 56px);
    box-shadow: var(--shadow-xl);
    /* Sail mark, kept local to this block rather than :root. */
    --nl-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 590'%3E%3Cg transform='translate(59,59)' fill='%23ffffff'%3E%3Cpath d='M500.81,120c.67-3.94.93-7.95.77-11.97,1.47-10.95-.13-22.27-4.92-32.87-8.99-19.88-27.32-33.03-49.02-35.18L142.15,9.67,101.16,1.2c-6.09-1.26-12.18-1.51-18.09-.85-3.98-.22-7.93-.04-11.78.53-4.06-.08-8.07.24-11.97.97-19.04.28-36.58,9.37-47.91,25.16C-1.31,44.74-3.54,67.19,5.45,87.06l128.79,284.79,14.95,45.12c2.55,7.7,6.58,14.56,11.75,20.31,1.63,2.28,3.42,4.42,5.35,6.41,1.74,2.26,3.64,4.38,5.68,6.34,9.95,12.01,24.22,19.7,40.37,21.3,21.71,2.15,42.26-7.14,54.98-24.86l126.39-176.12,91.53-102.85c9.06-10.19,14-22.78,14.4-35.79.79-3.84,1.18-7.76,1.17-11.7ZM66.18,4.24l1.49.15c-7.64,3.22-14.62,8.17-20.42,14.69-13.65,15.34-17.94,36.13-11.48,55.62l78.3,236.28L27.61,77.68c-7.03-18.96-3.52-39.58,9.39-55.15,7.59-9.15,17.48-15.43,28.4-18.36.26.02.52.04.77.06ZM497.85,115.68c-.33-1.27-.7-2.55-1.12-3.81-6.46-19.49-22.32-33.6-42.43-37.76L208.63,23.39l243.55,41.48c19.94,3.4,36.03,16.74,43.06,35.71,1.59,4.28,2.63,8.64,3.16,13.01-.17.7-.35,1.39-.55,2.09ZM498.77,119.74s0,.05-.01.07c0,0,0-.02,0-.02,0-.02.01-.03.02-.05ZM391.19,269.89l-4.03,4.86-143.1,160.8c-13.18,14.81-32.62,21.26-52.04,17.24-8.74-1.8-16.64-5.56-23.26-10.86-1.3-2.12-2.48-4.34-3.53-6.65l-26.87-59.42-2.45-5.96-2.2-5.94L37.64,74.07c-6.23-18.81-2.09-38.88,11.09-53.69,6.51-7.31,14.54-12.58,23.35-15.56l60.8,6.03,10.15,1.37,9.88,1.68,301,62.15c19.41,4.01,34.72,17.63,40.95,36.44.76,2.28,1.36,4.58,1.81,6.89-1.82,5.1-4.38,10.02-7.67,14.6l-93.87,130.8-3.94,5.11ZM191.62,454.73c2.03.42,4.06.73,6.08.93,18.03,1.79,35.56-5,47.83-18.79l105.55-118.61-100.09,120.71c-12.04,14.52-29.91,21.82-48.43,19.98-1.34-.13-2.68-.31-4.02-.54-8.87-1.51-16.98-5-23.88-10.07,5.17,2.96,10.87,5.14,16.96,6.4ZM490.7,135.21c2.67-3.72,4.87-7.65,6.61-11.72.07.62.14,1.24.19,1.86-1.95,6.97-5.26,13.64-9.9,19.65l-55.78,72.26,58.88-82.05ZM499.48,107.91c-.59-2.7-1.36-5.38-2.35-8.03-7.28-19.65-23.96-33.47-44.61-36.99L200.18,19.91l249.85,33.63c20.45,2.75,37.34,15.79,45.18,34.88,2.58,6.28,4,12.79,4.3,19.28,0,.07-.02.14-.03.21ZM59.53,3.95c-9.19,3.48-17.48,9.34-24.08,17.3-13.37,16.13-17.01,37.48-9.73,57.13l88.26,238.17L17.51,81.72c-7.84-19.09-5-40.24,7.61-56.57C33.83,13.88,45.92,6.53,59.3,3.96c.08,0,.15,0,.23,0ZM198.2,460.39c1.39.24,2.78.42,4.16.56,19.19,1.9,37.7-5.66,50.18-20.7l103.41-124.71-97.77,126.66c-12.61,16.34-32.34,24.46-52.8,21.69-9.1-1.23-17.5-4.49-24.71-9.42,5.38,2.83,11.27,4.85,17.53,5.92ZM489.23,146.25c3.57-4.63,6.39-9.64,8.43-14.87-1.82,8.76-5.79,17.1-11.8,24.35l-57.1,68.86,60.48-78.34ZM494.75,76.02c2.92,6.47,4.61,13.22,5.11,19.98-.7-2.81-1.61-5.61-2.74-8.36-8.12-19.77-25.62-33.28-46.81-36.14L191.44,16.66l255.99,25.4c20.95,2.08,38.64,14.77,47.32,33.96ZM13.11,28.24c8.56-11.93,20.8-19.89,34.53-22.92-9.32,3.87-17.64,10.17-24.13,18.58-13.06,16.92-16.01,38.83-7.89,58.61l98.49,239.74L7.36,86.2C-1.32,67.01.83,45.34,13.11,28.24ZM265.62,445.24c-12.28,17.11-32.12,26.08-53.07,24-9.33-.93-18.01-3.96-25.53-8.73,5.59,2.7,11.67,4.55,18.09,5.41.72.1,1.43.18,2.14.25,20.42,2.03,39.94-6.37,52.56-22.72l101.02-130.86-95.2,132.65ZM483.77,166.18l-58.28,65.49,61.91-74.66c3.66-4.41,6.58-9.22,8.76-14.27-2.08,8.52-6.26,16.55-12.39,23.44Z'/%3E%3C/g%3E%3C/svg%3E");
}
.nl-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block-start: -40%;
    inset-inline-end: -12%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(3, 136, 232, .45), transparent 62%);
    pointer-events: none;
}
/* Three quarters of the mark shows; the rest runs off the edge. */
.nl-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    opacity: .09;
    inset-block-start: 50%;
    inset-inline-start: -11%;
    transform: translateY(-50%);
    width: min(440px, 58%);
    aspect-ratio: 620 / 590;
    background-image: var(--nl-pattern);
    background-repeat: no-repeat;
    background-size: contain;
}

.nl-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    text-align: start;
}

.nl-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 7px 14px;
    border-radius: var(--radius-full);
    margin-bottom: 16px;
}
.nl-badge svg { width: 15px; height: 15px; color: var(--clr-accent); flex: none; }

.nl-title {
    margin: 0 0 10px;
    font-size: clamp(1.375rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}
.nl-lede {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, .82);
    font-size: .97rem;
    line-height: 1.75;
    max-width: 44ch;
}

.nl-feats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.nl-feats li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: .91rem;
    color: rgba(255, 255, 255, .89);
}
.nl-tick {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .14);
    color: #fff;
}
.nl-tick svg { width: 14px; height: 14px; }

.nl-right { width: 100%; min-width: 0; }
/* White pill pops on the navy card. */
.nl-submit {
    width: 100%;
    min-height: 54px;
    justify-content: center;
    background: #fff;
    color: var(--clr-primary-dark);
    font-size: 1rem;
    font-weight: 700;
    border: 0;
    box-shadow: 0 4px 16px rgba(0, 12, 28, .35);
}
.nl-submit:hover,
.nl-submit:focus-visible {
    background: var(--clr-accent-light);
    color: var(--clr-primary-darker);
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(0, 12, 28, .45);
}
.nl-submit svg { width: 18px; height: 18px; flex: none; }
/* Paper plane points along the reading direction. */
[dir="rtl"] .nl-submit svg { transform: scaleX(-1); }

.nl-privacy {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 13px 0 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .7);
    line-height: 1.5;
}
.nl-privacy svg { width: 15px; height: 15px; color: var(--clr-accent); flex: none; }

@media (max-width: 992px) {
    .nl-inner { grid-template-columns: 1fr; gap: 28px; }
    .nl-card::after { opacity: .06; }
}
@media (max-width: 480px) {
    .newsletter-cta { padding: 48px 0; }
    .nl-card { border-radius: var(--radius-lg); }
    .nl-lede { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .nl-submit:hover, .nl-submit:focus-visible { transform: none; }
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: .94rem;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
    background: var(--clr-accent);
    color: #1a2332;
    box-shadow: 0 4px 16px rgba(240, 165, 0, .35);
}
.btn-primary:hover {
    background: var(--clr-accent-dark);
    color: #1a2332;
    box-shadow: 0 6px 22px rgba(240, 165, 0, .45);
}

/* ============================================================
   EVENTS
   ============================================================ */
.events-section {
    background: var(--clr-bg);
    position: relative;
    overflow: hidden;
}
/* Chamber CVI mark: three quarters visible, the rest running off the
   edge. Applied as a mask rather than a background image so it tints
   with the brand blue on this light band. */
.events-section::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: .07;
    inset-block-start: 50%;
    inset-inline-end: -12%;
    transform: translateY(-50%);
    width: min(560px, 48%);
    aspect-ratio: 620 / 590;
    background-color: var(--clr-primary-mid);
    -webkit-mask: var(--cvi-mark) no-repeat center / contain;
            mask: var(--cvi-mark) no-repeat center / contain;
}
.events-section > .container { position: relative; z-index: 1; }

/* -- Section head: title on one side, view-all on the other.
   .partners-head shares it so the partners title sits at the inline start
   (right in RTL, left in LTR) exactly like the events title, instead of
   centred. It has no controls, so the single flex item just anchors to the
   start edge. -- */
.ev-head,
.partners-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 34px;
    flex-wrap: wrap;
}
.ev-heading,
.partners-head .section-title { margin-bottom: 0; }
.ev-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ev-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--clr-primary-dark);
    padding: 9px 4px;
    transition: gap .25s ease, color .2s ease;
}
.ev-view-all:hover { gap: 14px; color: var(--clr-primary-bright); }
.ev-view-all svg { width: 17px; height: 17px; }
/* arrows are drawn pointing left (RTL "forward") -- mirror for LTR */
html[dir="ltr"] .ev-view-all svg { transform: scaleX(-1); }

/* -- Cards -- */
.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ev-card {
    display: flex;
    flex-direction: column;
    background: var(--clr-bg-card);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition),
                border-color var(--transition);
}
.ev-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--clr-primary-light);
}
.ev-card-static:hover { transform: none; box-shadow: var(--shadow-sm); }

.ev-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    /* Doubles as the placeholder for events with no image. */
    background: linear-gradient(135deg, var(--clr-primary-mid), var(--clr-primary-dark));
}
.ev-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* CVI mark inside the media area -- carries the placeholder when an event
   has no image, and sits under the photo scrim when it has one. */
.ev-media::before {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    opacity: .13;
    inset-block-start: 50%;
    inset-inline-start: -9%;
    transform: translateY(-50%);
    width: min(210px, 52%);
    aspect-ratio: 620 / 590;
    background: var(--cvi-mark) no-repeat center / contain;
}
.ev-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(1, 40, 74, .42) 0%, rgba(1, 40, 74, 0) 58%);
    opacity: .45;
    transition: opacity var(--transition);
}
.ev-card:hover .ev-media::after { opacity: 1; }

.ev-date {
    position: absolute;
    z-index: 2;
    inset-block-start: 14px;
    inset-inline-end: 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 62px;
    padding: 9px 12px;
    text-align: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(1, 85, 153, .18);
}
.ev-date-day {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--clr-primary-dark);
}
.ev-date-month {
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    color: var(--clr-text-light);
}

.ev-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    padding: 20px 22px 24px;
}
.ev-card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--clr-text);
    transition: color var(--transition);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ev-card:hover .ev-card-title { color: var(--clr-primary); }
.ev-desc { margin: 0; font-size: .87rem; color: var(--clr-text-light); }

.ev-meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: auto;
    padding-top: 6px;
}
.ev-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--clr-text-mid);
}
.ev-meta-row svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-top: 2px;
    color: var(--clr-primary);
}

@media (max-width: 1100px) {
    .events-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   APP SECTION — light band, two columns: copy + phone mockup
   ============================================================ */
.app-section {
    /* Tinted band between the dotted services band and the white
       partners strip, with a soft wash rising from the bottom. */
    background:
        radial-gradient(760px 340px at 50% 100%, rgba(1, 85, 153, .06), transparent 70%),
        var(--clr-bg-alt);
    border-top: 1px solid var(--clr-border-light);
    padding: 96px 0;
    overflow: hidden;
}

.app-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 46%);
    align-items: center;
    column-gap: 48px;
}
/* Centre the text-only variant when no app image is set */
.app-grid:not(:has(.app-visual)) {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
}

.app-copy { min-width: 0; }

/* Soft blue pill with a spark glyph — "coming soon" status */
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--clr-primary-light);
    color: var(--clr-primary-dark);
    font-size: .82rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    line-height: 1.2;
    letter-spacing: .4px;
    margin-bottom: 18px;
}
.app-badge-spark {
    width: 15px;
    height: 15px;
    flex: none;
}

.app-copy h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.45rem);
    font-weight: 800;
    margin: 0 0 14px;
    letter-spacing: -.3px;
    line-height: 1.25;
    color: var(--clr-text);
}
.app-copy p {
    font-size: 1.05rem;
    color: var(--clr-text-mid);
    margin: 0 0 26px;
    line-height: 1.8;
    max-width: 52ch;
}

/* Feature list — check chip + line of copy */
.app-feats {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.app-feats li {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--clr-text-mid);
}
.app-feats .tick {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
    background: var(--clr-primary-light);
    color: var(--clr-primary);
    display: grid;
    place-items: center;
}
.app-feats .tick svg {
    width: 15px;
    height: 15px;
}

.app-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Official store badge artwork (img/badges/) — equal visual height */
.store-badge-link {
    display: inline-block;
    border-radius: 9px;
    line-height: 0;
    transition: transform var(--transition), box-shadow var(--transition);
}
.store-badge-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.store-badge-img {
    display: block;
    height: 54px;
    width: auto;
    border-radius: 9px;
}

/* Phone mockup floating over a soft radial glow */
.app-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
}
.app-glow {
    position: absolute;
    width: min(430px, 100%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(1, 85, 153, .16), transparent 65%);
    filter: blur(10px);
    pointer-events: none;
}
.app-visual img {
    position: relative;
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    filter: drop-shadow(0 26px 40px rgba(1, 40, 74, .22));
    animation: appPhoneFloat 7s ease-in-out infinite;
}
@keyframes appPhoneFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
    .app-visual img { animation: none; }
}

/* ============================================================
   SERVICES — light band with fixed-attachment pattern (parallax)
   ============================================================ */
.services-section {
    background-color: var(--clr-bg-alt);
    background-image:
        radial-gradient(rgba(1, 85, 153, .07) 1.5px, transparent 1.5px),
        radial-gradient(rgba(1, 85, 153, .045) 1.5px, transparent 1.5px);
    background-size: 34px 34px, 34px 34px;
    background-position: 0 0, 17px 17px;
    background-attachment: fixed;
}

/* Section head: title keeps the site-wide underline; optional lead paragraph. */
.services-head { margin-bottom: 40px; }
.services-head .section-title { margin-bottom: 0; }
.services-sub {
    max-width: 56ch;
    margin: 14px auto 0;
    text-align: center;
    color: var(--clr-text-light);
    font-size: .95rem;
    line-height: 1.75;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    display: flex;
    flex-direction: column;
    color: inherit;
    background: var(--clr-bg-card);
    border-radius: var(--radius-lg);
    padding: 28px 24px 26px;
    /* start-aligned so it reads correctly in both RTL and LTR */
    text-align: start;
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--clr-border-light);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    position: relative;
    overflow: hidden;
}
/* Animated top bar on hover */
.service-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-primary), var(--clr-primary-bright));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--clr-primary-light);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover h3 { color: var(--clr-primary); }

/* 3 per row, 2 on tablet, 1 on phone */
@media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .services-grid { grid-template-columns: 1fr; }
}

/* Logo plate: white box that frames the mark. Logos, not photos —
   contain shows the full artwork, never crops. */
.service-logo {
    height: 96px;
    margin-bottom: 18px;
    padding: 16px 22px;
    background: #fff;
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.service-logo img {
    max-height: 60px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.service-icon {
    width: 64px; height: 64px;
    margin: 0 0 20px;
    background: linear-gradient(135deg, var(--clr-primary-faint), var(--clr-primary-light));
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--clr-primary);
}

.service-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; color: var(--clr-text); transition: color var(--transition); }
.service-card p {
    font-size: .87rem;
    color: var(--clr-text-light);
    line-height: 1.7;
    /* three lines max so cards in a row stay even */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-more {
    margin-top: auto;
    padding-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--clr-primary);
    font-weight: 600;
    font-size: .84rem;
    transition: gap var(--transition);
}
.service-more svg { width: 15px; height: 15px; }
/* Arrow points at the reading direction: left in AR, right in EN. */
html[dir="ltr"] .service-more svg { transform: scaleX(-1); }
.service-card:hover .service-more { gap: 12px; }

/* ============================================================
   PARTNERS
   ============================================================ */
.partners-section { background: var(--clr-bg); padding-bottom: 80px; }

.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px;
}

/* Card box + hover ported from ScratchPad/NewDesign `.sponsor`.
   Numbers below are MEASURED from the rendered redesign at a 1440px viewport,
   not derived from its tokens -- the two disagree. Its `.sponsor-row` is
   `repeat(6, 1fr)` where `1fr` is `minmax(auto, 1fr)`, so the logos' min-content
   contribution blows the columns out past their share of the 1128px row, and its
   `aspect-ratio: 16/10` loses to the content-based height. Rendered result:
   187.8 x 126.6 card, 141.8 x 88.6 logo box. */
.partner-logo {
    --partner-card-w: 187.8px;
    --partner-card-h: 126.6px;
    --partner-card-pad-y: 18px;
    --partner-card-pad-x: 22px;

    flex-shrink: 0;
    width: var(--partner-card-w);
    height: var(--partner-card-h);
    /* The card is a flex item, so its automatic minimum size is content-based
       and would out-vote the height above. */
    min-height: 0;
    min-width: 0;
    display: grid;
    place-items: center;
    padding: var(--partner-card-pad-y) var(--partner-card-pad-x);
    border-radius: 14px;
    border: 1px solid #e2e8f1;
    background: var(--clr-bg);
    /* .75s, not the .25s `.sponsor` authors: the redesign's `.reveal` rule wins
       the cascade and restates the duration for the whole property list. That
       slow sweep is the hover the design actually renders. */
    transition:
        box-shadow .75s var(--ease-design),
        border-color .75s var(--ease-design);
}
/* The optional <a> wrapper shrink-wraps the logo; zero line-height kills the
   inline baseline gap that would otherwise offset it inside the card. */
.partner-logo > a {
    display: block;
    line-height: 0;
    max-width: 100%;
}
/* No lift: the redesign authors `transform: translateY(-3px)` here, but its own
   `.reveal.in` rule resets `transform` later in the cascade, so its cards
   compute `transform: none` on hover. Border + shadow only is what renders. */
.partner-logo:hover {
    box-shadow:
        0 1px 1px rgba(16, 42, 83, .04),
        0 4px 10px rgba(16, 42, 83, .05),
        0 16px 34px -10px rgba(16, 42, 83, .10);
    border-color: var(--clr-primary);
}
.partner-logo img {
    /* The single grid row is auto-sized, so `max-height: 100%` has no definite
       box to resolve against and the logo overflows. Derive the content box
       from the card's own tokens instead. */
    display: block;
    max-width: 100%;
    max-height: calc(var(--partner-card-h) - var(--partner-card-pad-y) * 2 - 2px);
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .7;
    transition: filter .4s var(--ease-soft-design), opacity .4s var(--ease-soft-design);
}
.partner-logo:hover img { filter: none; opacity: 1; }

/* Continuous marquee when partner count is high */
.partners-marquee {
    overflow: hidden;
    width: 100%;
    /* `overflow: hidden` clips vertically too, which sheared the top border off
       the hover shadow. Pad the clip box out, then pull the same amount back off
       the layout so section spacing is unchanged. The shadow reaches 8px above
       the card (34px blur - 16px offset - 10px spread) and 40px below it. */
    padding-block: 8px 40px;
    margin-block: -8px -40px;
    /* Force LTR so the track is left-anchored in both directions.
       Without this, RTL right-anchors the track and the -50% keyframe
       endpoint pushes it fully off-screen -> blank marquee until it scrolls in. */
    direction: ltr;
}
.partners-track {
    display: flex;
    align-items: center;
    gap: 18px;
    width: max-content;
    animation: partners-scroll 40s linear infinite;
}
.partners-marquee:hover .partners-track { animation-play-state: paused; }
[dir="rtl"] .partners-track { animation-name: partners-scroll-rtl; }

@keyframes partners-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes partners-scroll-rtl {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .partners-track { animation: none; }
    .partner-logo img { filter: none; opacity: 1; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .app-section { padding: 80px 0 64px; }
    .app-grid {
        grid-template-columns: 1fr;
        row-gap: 32px;
        text-align: center;
    }
    .app-visual { order: -1; }
    .app-visual img { max-width: 380px; margin-inline: auto; }
    .app-copy p { margin-inline: auto; }
    /* List stays start-aligned inside a centred block so the ticks line up */
    .app-feats { display: inline-flex; text-align: start; }
    .app-buttons { justify-content: center; }
}

/* ── Nav collapse → hamburger ──────────────────────────────────
   The horizontal nav needs ≈1140px (worst case: Arabic labels +
   E-Services CTA) to render on a single line. Below that the flex
   items shrink and their text wraps onto a second row. So collapse
   to the hamburger sheet at ≤1199px rather than only on phones —
   this keeps the bar clean at every tablet / small-laptop width. */
@media (max-width: 1199px) {
    .main-nav { display: none; }
    .main-nav.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 3px);
        left: 0; right: 0;
        /* Cancel the desktop offset from the brand — on an absolutely
           positioned sheet pinned to both edges it would shift the panel. */
        margin-inline-start: 0;
        background: var(--clr-bg);
        border-bottom: 2px solid var(--clr-primary-light);
        box-shadow: var(--shadow-lg);
        padding: 12px;
        z-index: 999;
    }
    .main-nav.open .nav-link { padding: 12px 14px; }
    /* The growing underline is a horizontal-bar affordance; in the stacked
       sheet it reads as a stray rule, so rows keep the background pill. */
    .main-nav.open .nav-link::after { display: none; }
    .main-nav.open .nav-link:hover {
        background: var(--clr-primary-faint);
        color: var(--clr-primary);
    }
    .main-nav.open .nav-link.active {
        background: var(--clr-primary-faint);
        color: var(--clr-primary);
    }

    /* Inside the mobile sheet the dropdown panel must flow with the list
       (accordion), not float above it: as an absolute overlay it shares
       z-index 1001 with the sibling .nav-dropdown items, so the items
       after it paint on top and the two sets of labels overlap. */
    .main-nav.open .nav-dropdown-menu {
        position: static;
        min-width: 0;
        box-shadow: none;
        border: 0;
        border-inline-start: 2px solid var(--clr-border-light);
        border-radius: 0;
        margin: 0 14px 6px;
        padding: 0 8px;
        animation: none;
    }
    .main-nav.open .nav-dropdown-menu a { white-space: normal; }
    /* Hover-bridge is desktop-only plumbing; on mobile it just adds an
       invisible absolute box inside the sheet. */
    .main-nav.open .nav-dropdown::after { display: none; }

    /* Transparent-header (hero-overlap) dark sheet: keep the accordion
       transparent with white links instead of a white card. */
    .site-header.hero-overlap .main-nav.open .nav-dropdown-menu {
        background: transparent;
        border-inline-start-color: rgba(255, 255, 255, .25);
    }
    .site-header.hero-overlap .main-nav.open .nav-dropdown-menu a { color: #fff; }
    .site-header.hero-overlap .main-nav.open .nav-dropdown-menu a:hover {
        background: rgba(255, 255, 255, .12);
    }

    .mobile-menu-btn { display: grid; }
}

@media (max-width: 768px) {
    .slide-caption { font-size: 1rem; padding: 48px 24px 28px; }

    .events-grid { grid-template-columns: 1fr; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .section { padding: 56px 0; }
}

/* ── Phones: take the E-Services CTA out of the header bar ──────
   On narrow phones the bar (logo + E-Services + lang + search +
   hamburger) overflows, shoving the hamburger off the edge. Drop the
   bar CTA here and surface it inside the open menu sheet instead, so
   nothing overflows and the CTA stays reachable. */
@media (max-width: 600px) {
    .header-eservices-btn { display: none; }

    /* Same 84/50 proportion, one notch smaller for the narrow bar. */
    .header-inner { height: 70px; }
    .site-header.condensed .header-inner { height: 60px; }
    .logo-img { height: 44px; }
    .site-header.condensed .logo-img { height: 38px; }

    .main-nav.open .nav-eservices-mobile {
        display: block;
        margin-top: 6px;
        padding: 13px 14px;
        text-align: center;
        background: var(--clr-primary);
        color: #fff;
        font-weight: 700;
        border-radius: var(--radius-full);
    }
    .main-nav.open .nav-eservices-mobile:hover { background: var(--clr-primary-dark); }
    .site-header.hero-overlap .main-nav.open .nav-eservices-mobile { color: #fff; }
}

@media (max-width: 480px) {
    .section { padding: 40px 0; }
    .section-title { font-size: 1.5rem; }
    .slide-caption { font-size: .9rem; padding: 32px 16px 18px; }
    .services-grid { grid-template-columns: 1fr; }
    .news-cards-grid { grid-template-columns: 1fr; }
    .container { padding: 0 16px; }
    .app-section { padding: 60px 0 48px; }
    .app-visual img { max-width: 280px; }
    .app-feats li { font-size: .94rem; gap: 10px; }
    .store-badge-img { height: 46px; }
}

/* ============================================================
   RTL (Arabic) OVERRIDES
   ============================================================ */
/* Arabic font applied here — value lives in :root as --font-ar.
   To switch the Arabic font site-wide, edit --font-ar (see top of file). */
html[dir="rtl"],
html[lang="ar"] body,
:lang(ar) {
    font-family: var(--font-ar);
}
/* Beat main_page.css ".template-mainpage main" font-family on Arabic locale */
html[dir="rtl"] .template-mainpage main,
html[lang="ar"] .template-mainpage main {
    font-family: var(--font-ar);
}
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] .header-inner { direction: rtl; }
html[dir="rtl"] .main-nav { direction: rtl; }
html[dir="rtl"] .header-actions { direction: rtl; }
html[dir="rtl"] .service-card::before { transform-origin: right; }
html[dir="rtl"] .nav-dropdown-menu { right: 0; left: auto; }

/* App section: grid columns auto-mirror via CSS direction. No RTL clip-path
   overrides needed — the visual is a clean rounded rect (no diagonal cut). */

/* ============================================================
   TP MAIN-PAGE COMPONENT OVERRIDES
   (Ensures inline styles in main_page.html adopt new tokens)
   ============================================================ */

/* Glassmorphic hero buttons inside tp-hero */
.tp-hero .slider-btn {
    background: rgba(255, 255, 255, .15) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .25) !important;
    color: #fff !important;
}
.tp-hero .slider-btn:hover {
    background: rgba(255, 255, 255, .28) !important;
}
.tp-hero .dot.active { background: #fff; width: 26px; }

/* Tab nav */
.tp-tab-nav { background: var(--clr-primary-faint) !important; }
.tp-tab-btn.active {
    color: var(--clr-primary) !important;
    border-bottom-color: var(--clr-primary) !important;
}

/* Memo icon */
.tp-memo-icon {
    background: var(--clr-primary-faint) !important;
    color: var(--clr-primary) !important;
}

/* Service icon */
.tp-service-icon {
    background: linear-gradient(135deg, var(--clr-primary-faint), var(--clr-primary-light)) !important;
    color: var(--clr-primary) !important;
}

/* Service card animated bar */
.tp-service-card {
    position: relative;
    overflow: hidden;
}
.tp-service-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-primary), var(--clr-primary-bright));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}
.tp-service-card:hover::before { transform: scaleX(1); }
html[dir="rtl"] .tp-service-card::before { transform-origin: right; }

/* Newsletter and App gradient */
.tp-newsletter {
    background: linear-gradient(135deg,
        var(--clr-primary-dark) 0%,
        var(--clr-primary)      55%,
        var(--clr-primary-mid)  100%) !important;
    position: relative;
    overflow: hidden;
}
.tp-newsletter::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

.tp-app {
    background: linear-gradient(135deg,
        var(--clr-primary-darker) 0%,
        var(--clr-primary-dark)   50%,
        var(--clr-primary)        100%) !important;
}

/* Event category badge */
.tp-event-category {
    background: var(--clr-primary) !important;
}

/* View all link pill style */
.tp-tab-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-weight: 600;
    font-size: .88rem;
    color: var(--clr-primary) !important;
    padding: 8px 18px;
    border: 1.5px solid var(--clr-primary);
    border-radius: var(--radius-full);
    transition: background var(--transition), color var(--transition);
}
.tp-tab-view-all:hover {
    background: var(--clr-primary);
    color: #fff !important;
}


/* ============================================================
   FOOTER (dynamic, settings-driven)
   ============================================================ */
.site-footer {
    background: #111827;
    color: #e5e7eb;
    padding: 0;
    /* No top margin: the footer starts exactly where the last section ends.
       A gap here would show the body's white through, reading as an empty
       strip between the page and the footer. */
    margin-top: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer .footer-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px 0 28px;
}

.site-footer .footer-col {
    min-width: 160px;
}

.site-footer .footer-col h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 14px;
}

.site-footer .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer .footer-col li {
    margin-bottom: 8px;
}

.site-footer .footer-col a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s ease;
}

.site-footer .footer-col a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.site-footer .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.site-footer .footer-brand .footer-logo-img {
    height: 84px;
    width: auto;
    background: none;
    padding: 0;
    border-radius: 0;
    display: block;
    /* Brand logo is dark navy — invert to white so it stays visible on the dark footer */
    filter: brightness(0) invert(1);
}

.site-footer .social-icons {
    display: flex;
    gap: 10px;
}

.site-footer .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
    border: none;
    transition: background 0.2s ease;
}

.social-link::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: #fff;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.social-link.social-facebook::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M22.675 0H1.325C.594 0 0 .593 0 1.325v21.351C0 23.408.594 24 1.325 24H12.82V14.706h-3.13v-3.622h3.13V8.41c0-3.1 1.894-4.788 4.66-4.788 1.325 0 2.464.099 2.795.143v3.24l-1.918.001c-1.504 0-1.796.715-1.796 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.731 0 1.325-.592 1.325-1.324V1.325C24 .593 23.406 0 22.675 0z'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M22.675 0H1.325C.594 0 0 .593 0 1.325v21.351C0 23.408.594 24 1.325 24H12.82V14.706h-3.13v-3.622h3.13V8.41c0-3.1 1.894-4.788 4.66-4.788 1.325 0 2.464.099 2.795.143v3.24l-1.918.001c-1.504 0-1.796.715-1.796 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.731 0 1.325-.592 1.325-1.324V1.325C24 .593 23.406 0 22.675 0z'/></svg>");
}

.social-link.social-twitter::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/></svg>");
}

.social-link.social-youtube::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/></svg>");
}

.social-link.social-instagram::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z'/></svg>");
}

.social-link.social-linkedin::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.063 2.063 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.063 2.063 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/></svg>");
}

.social-link.social-tiktok::before {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.1z'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.1z'/></svg>");
}

.site-footer .social-link:hover {
    background: #2563eb;
}

/* Bottom bar */
.site-footer .footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: #9ca3af;
}

.site-footer .footer-legal {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.site-footer .footer-legal a {
    color: #9ca3af;
    text-decoration: none;
}

.site-footer .footer-legal a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.site-footer .footer-tagline-link {
    color: #93c5fd;
    text-decoration: none;
    font-weight: 600;
}

.site-footer .footer-tagline-link:hover {
    text-decoration: underline;
}

.site-footer .footer-copyright {
    color: #9ca3af;
}

/* Tablet >= 640px: row wrap, columns flow from start edge */
@media (min-width: 640px) {
    .site-footer .footer-grid {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 48px;
    }
}

/* Desktop >= 1024px: more padding + horizontal bottom bar */
@media (min-width: 1024px) {
    .site-footer .footer-grid {
        gap: 56px;
        padding: 56px 0 32px;
    }
    .site-footer .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: start;
    }
}

/* Brand column always leads visually: top on mobile (stack), leading edge on
   desktop (right in RTL, left in LTR). DOM order is columns-then-brand so we
   pull brand forward with order: -1 unconditionally. */
.site-footer .footer-brand {
    order: -1;
}

/* ============================================================================
   SHARED PAGE HERO — full-width brand-gradient band with breadcrumbs + title.
   Rendered by includes/page_hero.html on every interior page. Templates add
   `has-page-hero` to body_class; that hides the plain breadcrumb strip above
   <main> (the include re-renders breadcrumbs inside the band).
============================================================================ */
body.has-page-hero main > .breadcrumbs { display: none; }

.page-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg,
        var(--clr-primary-darker) 0%,
        var(--clr-primary-dark) 52%,
        var(--clr-primary) 100%);
    padding: 38px 0 46px;
}
/* soft glow, top end corner */
.page-hero::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    top: -300px;
    inset-inline-end: -140px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(3, 136, 232, .45) 0%,
        rgba(3, 136, 232, 0) 65%);
    pointer-events: none;
}
/* thin outline ring, bottom start side */
.page-hero::after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    bottom: -210px;
    inset-inline-start: 6%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
    pointer-events: none;
}
.page-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

/* breadcrumbs re-styled for the dark band */
.page-hero .breadcrumbs {
    padding: 0;
    margin: 0 0 14px;
    max-width: none;
    color: rgba(255, 255, 255, .72);
}
.page-hero .breadcrumbs a {
    color: rgba(255, 255, 255, .72);
    transition: color .15s ease;
}
.page-hero .breadcrumbs a:hover { color: #fff; }
.page-hero .breadcrumbs li + li::before { color: rgba(255, 255, 255, .4); }
.page-hero .breadcrumbs [aria-current="page"] {
    color: #fff;
    font-weight: var(--fw-medium);
}

.page-hero__title {
    margin: 0;
    font-size: clamp(1.65rem, 1.15rem + 1.9vw, 2.5rem);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    text-wrap: balance;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Interior layout below the band: the page h1 lives in the hero now, so
   trim the old top spacing and the redundant card top stripe. */
.has-page-hero .container.section { padding-top: 44px; }
.has-page-hero .detail-page { margin-top: 36px; }
.has-page-hero .detail-card::before { display: none; }

@media (max-width: 768px) {
    .page-hero { padding: 26px 0 32px; }
    .page-hero::before { width: 380px; height: 380px; top: -220px; inset-inline-end: -120px; }
    .page-hero::after { width: 240px; height: 240px; bottom: -160px; }
    .page-hero .breadcrumbs { margin-bottom: 10px; }
    .has-page-hero .container.section { padding-top: 28px; }
    .has-page-hero .detail-page { margin-top: 20px; }
}

/* ============================================================================
   SEARCH PAGE — hero + styled query form + result cards
============================================================================ */
.search-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 44px 24px 80px;
}
.search-page .search-form {
    display: flex;
    gap: 10px;
    margin-bottom: 36px;
}
.search-page .search-form input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 50px;
    padding: 0 18px;
    font-size: 1rem;
    color: var(--clr-text);
    background: var(--clr-bg-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.search-page .search-form input[type="text"]:focus {
    outline: none;
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px var(--clr-primary-light);
}
.search-page .search-form button {
    flex: 0 0 auto;
    height: 50px;
    padding: 0 28px;
    font-size: 1rem;
    font-weight: var(--fw-bold);
    color: #fff;
    background: var(--clr-primary);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .15s ease;
}
.search-page .search-form button:hover { background: var(--clr-primary-dark); }
.search-page .search-form button:focus-visible {
    outline: 2px solid var(--clr-primary-dark);
    outline-offset: 2px;
}

.search-results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.search-results > li {
    background: var(--clr-bg-card);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius);
    padding: 18px 22px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.search-results > li:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.search-results h4 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5;
}
.search-results h4 a {
    color: var(--clr-primary-dark);
    text-decoration: none;
}
.search-results h4 a:hover { color: var(--clr-primary); }
.search-results p {
    margin: 6px 0 0;
    color: var(--clr-text-light);
    font-size: var(--fs-small);
    line-height: 1.7;
}

.search-page .pagination {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}
.search-page .pagination a {
    display: inline-block;
    padding: 9px 22px;
    color: var(--clr-primary);
    font-weight: var(--fw-medium);
    text-decoration: none;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.search-page .pagination a:hover {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
    color: #fff;
}

@media (max-width: 600px) {
    .search-page { padding: 28px 16px 56px; }
    .search-page .search-form { flex-direction: column; }
    .search-page .search-form button { width: 100%; }
}

/* ============================================================================
   SHARED DETAIL PAGE (news / events / memos / delegations)
   Centered single-column "card on background" layout. Skeleton:
     .detail-page > .detail-card { pill, title, meta, hero, attachment, body }
                  > .detail-foot { back-link, publish date }
   Sections render conditionally via {% if %} in each template.
============================================================================ */
.detail-page {
    max-width: 1240px;
    margin: 24px auto 48px;
    padding: 0 24px;
    box-sizing: border-box;
}
.detail-card {
    background: var(--clr-bg-card);
    border: 1px solid var(--clr-border-light);
    border-radius: 18px;
    padding: 40px 44px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(1, 40, 74, 0.05);
}
.detail-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--clr-primary-mid), var(--clr-primary-dark));
}

.detail-category {
    display: inline-block;
    background: var(--clr-primary-darker);
    color: #fff;
    font-size: 12px;
    font-weight: var(--fw-bold);
    padding: 5px 16px;
    border-radius: 14px;
    margin-bottom: 14px;
    letter-spacing: 0.4px;
}

.detail-title {
    margin: 0 0 14px;
    font-size: var(--fs-h1);
    line-height: 1.35;
    color: var(--clr-primary-dark);
    font-weight: var(--fw-bold);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.detail-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    background: var(--clr-primary-dark);
    margin-top: 12px;
    border-radius: 2px;
}

.detail-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--clr-text-mid);
    font-size: 15px;
    padding: 8px 0 6px;
    margin-bottom: 24px;
}
.detail-meta-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.detail-meta-line svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    fill: none;
    stroke: var(--clr-primary);
    stroke-width: 1.8;
}
.detail-meta-line .meta-text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.detail-hero {
    margin: 4px 0 26px;
    text-align: center;
    border-radius: 14px;
    overflow: hidden;
    background: var(--clr-bg-alt);
}
.detail-hero img {
    max-width: 100%;
    height: auto;
    max-height: 480px;
    display: inline-block;
    border-radius: 14px;
}

.detail-attachment {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--clr-bg-alt), #fff);
    border: 1px solid var(--clr-border-light);
    border-inline-start: 4px solid var(--clr-primary); /* blue, matches .att-icon (memos + delegations) */
    padding: 18px 22px;
    border-radius: 12px;
    margin: 4px 0 28px;
    text-decoration: none;
    color: var(--clr-text);
    transition: transform .15s, box-shadow .15s;
}
.detail-attachment:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(1, 85, 153, 0.12);
    color: var(--clr-text);
}
.detail-attachment .att-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    background: var(--clr-primary);
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.5px;
}
.detail-attachment .att-text {
    flex: 1;
    min-width: 0;
}
.detail-attachment .att-text strong {
    display: block;
    color: var(--clr-primary-dark);
    font-size: 15px;
    font-weight: var(--fw-bold);
    margin-bottom: 2px;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.detail-attachment .att-text span {
    color: var(--clr-text-light);
    font-size: 13px;
}
.detail-attachment .att-arrow {
    color: var(--clr-primary);
    font-size: 22px;
    line-height: 1;
}

.detail-body {
    color: var(--clr-text);
    line-height: 1.85;
    font-size: 16px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.detail-body p { margin: 0 0 14px; }
.detail-body a { color: var(--clr-primary); }
.detail-body a:hover { color: var(--clr-primary-dark); }
.detail-body img,
.detail-body iframe,
.detail-body table {
    max-width: 100%;
    height: auto;
}
.detail-body table {
    display: block;
    overflow-x: auto;
}
.detail-body h2,
.detail-body h3,
.detail-body h4 {
    color: var(--clr-primary-dark);
    margin: 24px 0 12px;
    line-height: 1.4;
}
.detail-body h2 { font-size: 1.4rem; }
.detail-body h3 { font-size: 1.2rem; }
.detail-body h4 { font-size: 1.05rem; }
.detail-body ul,
.detail-body ol {
    padding-inline-start: 24px;
    margin: 0 0 14px;
}
.detail-body li { margin-bottom: 6px; }

.detail-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    padding: 16px 22px;
    background: var(--clr-bg-card);
    border: 1px solid var(--clr-border-light);
    border-radius: 12px;
    font-size: 14px;
    color: var(--clr-text-light);
}
.detail-foot a {
    color: var(--clr-primary);
    text-decoration: none;
    font-weight: var(--fw-medium);
}
.detail-foot a:hover { color: var(--clr-primary-dark); }

@media (max-width: 700px) {
    .detail-page { margin: 16px auto 32px; padding: 0 12px; }
    .detail-card { padding: 28px 22px; border-radius: 14px; }
    .detail-title { font-size: 22px; }
    .detail-meta { font-size: 14px; gap: 8px; }
    .detail-meta-line svg { flex-basis: 18px; width: 18px; height: 18px; }
    .detail-attachment { padding: 14px 16px; gap: 12px; }
    .detail-attachment .att-icon { flex-basis: 40px; width: 40px; height: 40px; }
    .detail-foot { padding: 14px 16px; }
}

/* ============================================================
   HOMEPAGE LAYOUT — full-width bands, ~1600px content,
   scroll-revealed photo bands (vars in :root, drop-in ready)
   ------------------------------------------------------------
   Every band's background spans edge-to-edge; the inner
   .container widens to 1640px on the homepage only. Each major
   section accepts a background photo via --home-bg-* with a
   fixed attachment, so the photo "reveals" as the user scrolls
   over it (same mechanic as chamber.sa).
   ============================================================ */
/* Content width matches the redesign's `.wrap`
   (ScratchPad/NewDesign/asharqia-redesign/css/style.css):
   a 1240px box with a fluid gutter of clamp(18px, 4vw, 56px), so the
   desktop text column lands at ~1128px instead of the old 1592px.
   Scoped to the homepage bands plus the shared header/footer; inner
   pages keep the site-wide .container (1240px / 24px). The bands
   themselves stay full-bleed — only this inner box narrows. */
.template-homepage .container,
.site-header .container,
.site-footer .container {
    max-width: 1240px;
    padding-inline: clamp(18px, 4vw, 56px);
}
/* The narrower header box leaves 1128px for logo + nav + actions. Arabic
   fits in 1044px, but the English labels ("Chamber Services", "Media
   Center", …) need 1190px and clip. Tighten the desktop nav for LTR only
   — 1092px — so Arabic keeps its original spacing. Below 1200px the nav is
   a hamburger sheet, so this only applies where the bar is on screen. */
@media (min-width: 1200px) {
    html[dir="ltr"] .main-nav { gap: 0; }
    html[dir="ltr"] .nav-link {
        padding: 10px 11px;
        font-size: 14.5px;
        --nav-underline-inset: 11px;
    }
    html[dir="ltr"] .header-actions { gap: 8px; }
    html[dir="ltr"] .header-eservices-btn { padding: 7px 14px; }
}

.template-homepage .section { padding: 88px 0; }

/* ── Media Center: light wash + optional photo ── */
.template-homepage .media-center {
    background-color: var(--clr-bg-alt);
    background-image:
        linear-gradient(rgba(243, 247, 252, .93), rgba(243, 247, 252, .93)),
        var(--home-bg-media);
    background-size: auto, cover;
    background-position: center;
    background-attachment: scroll, fixed;
}

/* -- Events: light band. When the editor sets an events background photo
   it stays behind the section, washed out so the light card design and
   dark title keep their contrast. Without a photo the CVI watermark set
   on .events-section carries the band. -- */
.template-homepage .events-section {
    background-color: var(--clr-bg);
    background-image:
        linear-gradient(rgba(255, 255, 255, .90), rgba(240, 246, 252, .94)),
        var(--home-bg-events, none);
    background-size: auto, cover;
    background-position: center;
    background-attachment: scroll, fixed;
    /* The section's height is fractional (content-driven), and Chrome paints
       that last sub-pixel row from the photo layer without the wash gradient
       over it — it reads as a 1px grey hairline against the flat newsletter
       band below. Pull the next section up by 1px so it paints over that row;
       every other section boundary on this page is a clean one-step tone
       change and this makes the events/newsletter seam match them. */
    margin-block-end: -1px;
}

/* ── Services: dots + light wash + optional photo ── */
.template-homepage .services-section {
    background-image:
        radial-gradient(rgba(1, 85, 153, .07) 1.5px, transparent 1.5px),
        linear-gradient(rgba(243, 247, 252, .9), rgba(243, 247, 252, .9)),
        var(--home-bg-services);
    background-size: 34px 34px, auto, cover;
    background-position: 0 0, center, center;
    background-attachment: fixed, scroll, fixed;
}

/* ── Partners: near-white wash + optional photo ── */
/* This band has the same fractional-height artefact as the events band above
   (last sub-pixel row of the background renders un-washed), but it needs no
   cure: the footer now starts flush against the section, so that row falls
   between the near-white band and the near-black footer and just reads as the
   anti-aliased edge of the boundary. Re-introducing a gap below the section
   would make it visible again. */
.template-homepage .partners-section {
    background-image:
        linear-gradient(rgba(255, 255, 255, .94), rgba(255, 255, 255, .94)),
        var(--home-bg-partners);
    background-size: auto, cover;
    background-position: center;
    background-attachment: scroll, fixed;
}

/* ============================================================
   SCROLL EFFECTS & MICRO-INTERACTIONS (effects.js)
   ------------------------------------------------------------
   .reveal is ONLY ever added by effects.js, so content is never
   hidden when JS is off. effects.js also skips adding it when
   prefers-reduced-motion is set.
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .7s ease var(--reveal-delay, 0s),
        transform .8s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0s);
    will-change: opacity, transform;
}
.reveal.in-view {
    opacity: 1;
    transform: none;
}

/* Hover lifts on revealable elements.
   `.reveal.in-view` above resets `transform` at (0,2,0) and sits later in
   this file than every card's `:hover` rule, so it swallows those lifts
   once the element has revealed. Re-assert each one here at (0,3,0).
   Keep the offsets in sync with the card's own `:hover` block.
   Elements that reveal but have no hover transform need no entry. */
.service-card.reveal.in-view:hover { transform: translateY(-5px); }
.news-card.reveal.in-view:hover { transform: translateY(-5px); }
/* Partner cards have no hover transform to re-assert -- see .partner-logo:hover.
   `.reveal` does restate the `transition` shorthand though, which would strip
   box-shadow/border-color from the card's transition list and make the grid
   variant's hover snap instead of sweep. Re-assert those two. */
.partner-logo.reveal {
    transition:
        opacity .7s ease var(--reveal-delay, 0s),
        transform .8s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0s),
        box-shadow .75s var(--ease-design),
        border-color .75s var(--ease-design);
}
.partner-logo.reveal.in-view {
    transition:
        box-shadow .75s var(--ease-design),
        border-color .75s var(--ease-design);
}

/* ── Back-to-top (button injected by mysite.js) ── */
.back-to-top {
    position: fixed;
    bottom: 28px;
    inset-inline-end: 28px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--clr-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s,
                background .2s ease;
    z-index: 900;
}
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover { background: var(--clr-primary-dark); }

/* ── Visible keyboard focus everywhere ── */
:focus-visible {
    outline: 2px solid var(--clr-primary-bright);
    outline-offset: 2px;
}

/* ── Brand text selection ── */
::selection {
    background: var(--clr-primary-light);
    color: var(--clr-primary-darker);
}

/* ── Parallax fallbacks ──
   background-attachment: fixed is unreliable / janky on touch
   devices and small screens — fall back to normal scroll there. */
@media (max-width: 1024px), (hover: none) {
    .services-section,
    .template-homepage .media-center,
    .template-homepage .events-section,
    .template-homepage .services-section,
    .template-homepage .partners-section {
        background-attachment: scroll;
    }
    .hero-slider {
        min-height: 480px;
    }
    .hero-slider .slide-caption { padding: 0 24px 110px; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    html { scroll-behavior: auto; }
}

/* ============================================================
   HOME PAGE — unified section heading typography
   ------------------------------------------------------------
   The News/Delegations/Memos block uses .mc-title. Events, Services
   and Partners used .section-title, which was a size/weight/colour
   apart and carried a gradient underline. On the home page only,
   .section-title is aligned to .mc-title so every section heading
   reads identically. Alignment is deliberately NOT changed — the
   existing centred / flex-head layouts stay as they are.

   Scoped to .template-homepage so the events index, main_page and
   the StreamField block templates keep the original .section-title.

   Specificity 0,2,0 beats the base rule and the 480px override, so
   no separate mobile rule is needed: the clamp() min (1.6rem) is
   the small-screen size, matching .mc-title.
   ============================================================ */
.template-homepage .section-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.01em;
    color: var(--clr-text);
}
/* .mc-title has no underline bar — drop it here to match. */
.template-homepage .section-title::after { content: none; }