/* ============================================================
   Editorial — a presentation theme for the AI slide builder.

   Warm off-white canvas, serif headings, a single muted accent.
   Works in both directions: every layout rule uses logical
   properties (start/end, padding-inline) so a slide reads
   correctly whether it is dir="ltr" (English) or dir="rtl"
   (Arabic). Set the direction on each <section class="slide">.

   Recolor the whole deck by editing the tokens in :root below.
   ============================================================ */

:root {
  /* ---- Etedal official brand palette (2026 corporate identity guide) ----
     Primary: Navy #003866 · Green (sage) #6C9886 · White.
     Secondary: Slate Gray #5B6670 · Warm Beige #BBA88E. */
  /* Canvas */
  --bg:          #FFFFFF;   /* white — brand base                */
  --bg-tint:     #EEF3F6;   /* neutral cool wash (section panels) */
  --bg-ink:      #003866;   /* primary navy — dark slides        */

  /* Type */
  --ink:         #003866;   /* primary navy                      */
  --ink-soft:    #2C4F66;   /* softened navy — secondary text    */
  --ink-faint:   #5B6670;   /* brand slate grey — captions       */
  --on-ink:      #FFFFFF;   /* text on navy slides               */

  /* Accent — Etedal sage green */
  --accent:      #6CB499;   /* brand green (official) — fills     */
  --accent-soft: #AED2C4;   /* light brand green — soft accents   */
  --accent-deep: #3F7D65;   /* deep brand green — text / links    */
  --slate:       #5B6670;   /* secondary — slate grey            */
  --beige:       #BBA88E;   /* secondary — warm beige            */
  --beige-deep:  #8A7355;   /* beige text on light               */
  --gold:        #C9912F;   /* state — caution/abstain (amber)   */
  --coral:       #C65F52;   /* state — reject/absent             */

  /* Lines */
  --rule:        #E5E9EE;   /* neutral hairline                  */

  /* Fonts — board-meeting overrides --serif/--sans to the brand PingAR face. */
  --serif: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans:  "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Geometry & motion — per the guide's design tokens (رموز التصميم):
     corner radii 8–24px · spacing on a 4/8 grid · light soft shadows ·
     calm transitions 120–360ms · AA contrast. */
  --pad: clamp(48px, 6vw, 120px);
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(0, 56, 102, .06);
  --shadow:    0 8px 24px rgba(0, 56, 102, .09);
  --shadow-lg: 0 18px 48px rgba(0, 56, 102, .14);
  --ease:      220ms cubic-bezier(.4, 0, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---- Night (dark) mode — toggled by body.night; both decks share it ---- */
body.night {
  --bg:          #0f2233;   /* dark navy canvas                 */
  --bg-tint:     #16314a;   /* raised dark panel               */
  --bg-ink:      #081626;   /* deepest (statement slides)      */
  --ink:         #e9eff4;   /* light text                      */
  --ink-soft:    #c2d0db;
  --ink-faint:   #8aa0b0;
  --on-ink:      #ffffff;
  --accent:      #8CC7AF;   /* brighter brand green for dark bg  */
  --accent-soft: #6CB499;
  --accent-deep: #AED2C4;
  --slate:       #8A97A1;
  --beige:       #C9B79C;
  --beige-deep:  #C9B79C;
  --gold:        #D6A734;
  --coral:       #D9705F;
  --rule:        #28455f;
  color-scheme: dark;
}

html, body {
  height: 100%;
  background: var(--bg-ink);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}
.slide { transition: background-color .3s ease, color .3s ease; }

/* A soft fixed fade at the top keeps the logo + controls legible while the
   slide content scrolls beneath them (white in day, dark in night). */
.deck-topfade {
  position: fixed; inset-block-start: 0; inset-inline: 0; height: 118px; z-index: 40;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 16%, transparent);
  transition: background-color .3s ease;
}
@media print { .deck-topfade { display: none !important; } }
:fullscreen .deck-topfade, :-webkit-full-screen .deck-topfade { display: none !important; }

/* Theme toggle (sun/moon) — injected by deck.js, pinned to the top corner. */
.deck-theme {
  position: fixed; top: 16px; right: 16px; z-index: 56;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule);
  background: var(--bg-tint); color: var(--ink); cursor: pointer;
  display: grid; place-items: center; font-size: 1.15rem; line-height: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
  transition: filter .2s ease, transform .08s ease, background-color .3s ease;
}
.deck-theme:hover { filter: brightness(1.06); }
.deck-theme:active { transform: scale(.94); }
@media print { .deck-theme { display: none !important; } }
:fullscreen .deck-theme, :-webkit-full-screen .deck-theme { display: none !important; }
/* On localhost the review pencil also lives top-right — nudge it left of the
   theme toggle so they don't overlap. (No effect on the live site.) */
.rv-toggle-btn { right: 70px !important; }

/* ---- Deck shell ------------------------------------------------ */
/* Use the DYNAMIC viewport height (dvh) so the deck always fills the screen
   on mobile too — as the browser address bar shows/hides, 100dvh tracks the
   real visible area (plain 100vh / inset:0 would leave a gap or clip the
   bottom nav under the browser chrome). Falls back to 100vh on old engines. */
#deck { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }

.slide {
  position: absolute;
  inset: 0;
  /* Bound every slide to the fixed #deck height so its own overflow-y:auto
     actually engages. Without this, a slide that computes as position:relative
     (e.g. inside board-meeting) grows to its content height and the taller-than-
     viewport bottom gets clipped by #deck's overflow:hidden — unreachable. */
  height: 100%;
  display: none;
  flex-direction: column;
  /* "safe center" centres content when it fits, but falls back to start (no
     clipped/unreachable top) when content is taller than the viewport. */
  justify-content: safe center;
  align-items: stretch;
  text-align: start;
  padding: var(--pad);
  background: var(--bg);
  /* Let any slide scroll when its content exceeds the screen (short laptop
     windows, large fonts) instead of clipping it. */
  overflow-y: auto;
  overflow-x: hidden;
  /* Extra bottom room so scrolled content clears the fixed footer / page
     number / nav arrows that sit along the bottom edge — plus the device
     safe-area inset so nothing hides behind a phone's home indicator. */
  padding-block-end: calc(var(--pad) + 56px + env(safe-area-inset-bottom, 0px));
  padding-inline: max(var(--pad), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  /* The fixed logo (~124px) + top fade (118px) sit over the top-left corner.
     Guarantee the slide's first line always clears them, even on mid-size
     screens where 6vw padding would otherwise be shorter than the logo. */
  padding-block-start: max(var(--pad), 138px);
}
.slide.active { display: flex; }

/* Inner content column keeps long lines readable on wide screens */
.slide > * { max-width: 1180px; width: 100%; margin-inline: auto; }

/* ---- Type scale ------------------------------------------------ */
.t-hero { font-family: var(--serif); font-weight: 600; font-size: clamp(2.6rem, 6vw, 5rem);   line-height: 1.22; letter-spacing: -0.015em; color: var(--ink); }
.t-xl   { font-family: var(--serif); font-weight: 600; font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.12; color: var(--ink); }
.t-lg   { font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.18; color: var(--ink); }
.t-md   { font-size: clamp(1.15rem, 1.9vw, 1.6rem);  line-height: 1.55; color: var(--ink-soft); font-weight: 400; }
.t-sm   { font-size: clamp(0.95rem, 1.4vw, 1.2rem);  line-height: 1.5;  color: var(--ink-faint); font-weight: 400; }

/* Small-caps kicker that sits above a heading */
.kicker {
  font-family: var(--sans);
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
/* Arabic has no uppercase; drop the spacing tricks under RTL */
[dir="rtl"] .kicker { letter-spacing: 0.04em; text-transform: none; }

.accent { color: var(--accent); }

/* Spacing helpers */
.mt-sm { margin-top: 14px; }
.mt-md { margin-top: 30px; }
.mt-lg { margin-top: 52px; }

/* ---- Bullets --------------------------------------------------- */
.bullets { list-style: none; }
.bullets li {
  position: relative;
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  line-height: 1.5;
  color: var(--ink);
  padding-block: 12px;
  padding-inline-start: 40px;
  border-bottom: 1px solid var(--rule);
}
.bullets li:last-child { border-bottom: none; }
.bullets li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 1.35em;
  width: 14px; height: 2px;
  background: var(--accent);
}
.bullets li strong { font-weight: 600; }

/* Numbered list variant */
.steps { list-style: none; counter-reset: step; }
.steps li {
  position: relative;
  counter-increment: step;
  font-size: clamp(1.1rem, 1.9vw, 1.55rem);
  line-height: 1.5;
  color: var(--ink);
  padding-block: 14px;
  padding-inline-start: 64px;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 10px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 1.3rem; font-weight: 600;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}

/* ---- Two-column / metrics ------------------------------------- */
.cols { display: flex; gap: clamp(28px, 4vw, 64px); align-items: flex-start; }
.cols > * { flex: 1; margin-inline: 0; }

.metric { }
.metric .figure { font-family: var(--serif); font-weight: 600; font-size: clamp(3rem, 8vw, 6rem); line-height: 1; color: var(--accent); }
.metric .label  { font-size: clamp(1rem, 1.5vw, 1.3rem); color: var(--ink-soft); margin-top: 10px; }

/* ---- Slide variants -------------------------------------------- */
.slide-title  { background: var(--bg); }
.slide-title .t-hero { max-width: 16ch; }

.slide-section {
  background: var(--bg-tint);
}
.slide-section .index {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}

.slide-statement {
  background: var(--bg-ink);
  justify-content: safe center;
  align-items: center;
  text-align: center;
}
.slide-statement .t-xl,
.slide-statement .t-hero { color: var(--on-ink); }
.slide-statement .t-md { color: #B5D8C8; }
.slide-statement .kicker { color: var(--accent-soft); }

/* A thin rule used to separate a heading from body */
.divider { width: 72px; height: 3px; background: var(--accent); border: none; margin-block: 22px; }
[dir="rtl"] .divider { margin-inline-start: 0; }

/* ---- Fragments (revealed one click at a time) ------------------ */
.fragment { opacity: 0; transition: opacity .35s ease, transform .35s ease; transform: translateY(8px); }
.fragment.visible { opacity: 1; transform: none; }

/* ---- Chrome: progress, page number, hint ----------------------- */
#progress {
  position: fixed; inset-block-start: 0; inset-inline-start: 0;
  height: 4px; width: 0;
  background: var(--accent);
  transition: width .3s ease;
  z-index: 50;
}
#page-num {
  position: fixed; inset-block-end: 22px; inset-inline-end: 28px;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 500;
  color: var(--ink-faint);
  z-index: 50;
  letter-spacing: 0.05em;
}
.slide-statement ~ #page-num { color: #8FBFAC; }

/* Footer line (e.g. deck name) bottom-start corner */
.deck-footer {
  position: fixed; inset-block-end: 20px; inset-inline-start: 28px;
  font-size: 0.9rem; color: var(--ink-faint);
  z-index: 50;
}

/* Brand mark — a small logo lockup, top-left, on a faint chip so it reads on
   light AND dark slides. Swap the <img src> (or remove it) to rebrand. */
.deck-logo {
  position: fixed; top: 18px; right: 74px; left: auto; z-index: 45;
  height: 52px; width: auto; display: block;
  transition: filter .3s ease;
}
/* On dark slides (or night mode) the logo flips to solid white so it reads. */
body.on-dark .deck-logo,
body.night .deck-logo { filter: brightness(0) invert(1); }
/* Partner logo — co-branding mark, top-left on every slide (shown when set). */
.deck-plogo {
  position: fixed; top: 20px; left: 24px; z-index: 45;
  height: 38px; width: auto; max-width: 180px; display: none;
  background: #fff; border-radius: 9px; padding: 5px 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.14); object-fit: contain;
}
.deck-plogo.has { display: block; }

/* ---- Mobile (phone) tuning -------------------------------------- */
@media (max-width: 600px) {
  :root { --pad: clamp(18px, 5vw, 28px); }
  .deck-logo { height: 40px; top: 12px; right: 60px; left: auto; }
  .deck-plogo { height: 30px; top: 14px; left: 12px; padding: 4px 8px; }
  .deck-theme { width: 40px; height: 40px; top: 12px; right: 12px; font-size: 1.05rem; }
  /* The top fade must not be taller than the content offset, or it veils the
     first line on phones (the old "white area covering the content" bug). */
  .deck-topfade { height: 72px; }
  /* Push slide content below the fixed logo / theme button, and leave room at
     the bottom so nothing overlaps the page number / nav arrows. */
  .slide { padding-block-start: 70px; padding-block-end: calc(96px + env(safe-area-inset-bottom, 0px)); }
  #page-num { inset-block-end: calc(66px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 14px; font-size: .78rem; }
  /* The footer name duplicates the cover title on a phone and crowds the
     bottom — hide it on small screens. */
  .deck-footer { display: none; }
  .t-hero { font-size: clamp(1.9rem, 8.5vw, 2.6rem); line-height: 1.3; }
  .t-xl   { font-size: clamp(1.5rem, 6.5vw, 2.1rem); line-height: 1.2; }
  .t-lg   { font-size: clamp(1.3rem, 5.6vw, 1.7rem); line-height: 1.25; }
  .t-md   { font-size: clamp(1rem, 3.8vw, 1.2rem); line-height: 1.7; }
  .bullets li { font-size: clamp(.95rem, 4vw, 1.2rem); line-height: 1.6; padding-inline-start: 28px; }
  .cols { flex-direction: column; gap: 20px; }
  .slide > * { max-width: 100%; }
}

/* Inline code / file names keep a monospace face and stay LTR */
code, .mono {
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.85em;
  direction: ltr;
  unicode-bidi: isolate;
  background: rgba(108,152,134,0.18);
  color: var(--ink);
  padding: 2px 7px;
  border-radius: 5px;
}

/* Print to PDF: one slide per page (use the browser's "Save as PDF") */
@media print {
  @page { size: 1280px 720px; margin: 0; }
  /* Print backgrounds/colors exactly as on screen — browsers drop fills
     in PDF by default, which washes out the warm canvas and dark slides. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html, body { background: #fff; }
  #deck { position: static; }
  #progress, #page-num, .deck-footer, .deck-logo { display: none; }
  .slide { display: flex !important; position: relative; inset: auto;
           width: 1280px; height: 720px; page-break-after: always; break-after: page; }
  .fragment { opacity: 1 !important; transform: none !important; }
}