/* ============================================================
   Prototype-only additions on top of the original style.css:
   1. Language dropdown in the header
   2. Right-to-left (RTL) polish for the Arabic locale
   These are kept in a separate file so the ported style.css stays
   byte-for-byte identical to the live site.
   ============================================================ */

/* Smooth scroll + sticky-header offset for the in-page Products/Features
   anchors (was an inline <style> on the static home page). */
html { scroll-behavior: smooth; }
#products, #features { scroll-margin-top: 80px; }

/* ---------- Wider container (2026-06 layout pass) ----------
   The original site capped everything at 960px, which left big empty
   margins on wide monitors. Widen the shared container (header, breadcrumb,
   main) and give article prose a roomier - but still readable - measure. */
:root {
  --db-max-width: 1280px;          /* page chrome: header + breadcrumb */
  --db-content-width: 1100px;      /* one body measure for every page */
  --db-content-gutter: 24px;       /* mirrors .db-main's own side padding */
}

/* ---------- One body measure everywhere (consistency pass) ----------
   Article pages read well because .db-article-content caps their prose at
   --db-content-width, but the home page and the product/LMS landings put
   their cards straight into .db-main and so ran the full --db-max-width -
   a visibly narrower gutter than the articles they link to.

   Fix it once, on the shared <main>: cap .db-main at the measure plus its
   own two gutters. Every page body now starts and ends on the same edge.
   Because main's content box then equals --db-content-width exactly, the
   articles' own cap lands on the same number and article pages are
   unchanged - they were already the reference. Header and breadcrumb keep
   the wider --db-max-width, which is how the articles already look. */
.db-main { max-width: calc(var(--db-content-width) + var(--db-content-gutter) * 2); }
.db-article-content { max-width: var(--db-content-width); }

/* The hero stays full-bleed by design (its gradient runs edge to edge) and
   its text is centred, but the h1 had no cap at all - on a wide monitor a
   long heading outran everything below it. Hold the inner column to the
   same measure so the hero breaks on the content edge too. */
.db-hero-inner {
  max-width: var(--db-content-width);
  margin-left: auto;
  margin-right: auto;
}

/* Inside articles, let the animation/video blocks use the extra room:
   taller stage and scaled-up scene mock-ups on desktop. The reveal
   transition lives on .tour-scene itself, so the scale goes on its
   children to avoid fighting it. */
@media (min-width: 1000px) {
  .sim-tour .ga-viewport { height: 460px; }
  .sim-tour .tour-scene > * { transform: scale(1.3); }
  .sim-tour .tour-card-title { font-size: 30px; }
  .sim-tour .tour-card-logo-img { height: 36px; }
}

/* ---------- Responsive polish (tablets → tiny ~300px handsets) ----------
   style.css already handles the hamburger nav (768), single-column grids
   and hero scaling (640). The rules below close the remaining gaps. */

/* Tablets / small laptops: slightly tighter gutters. */
@media (max-width: 768px) {
  .db-main,
  .db-breadcrumb,
  .db-hero { padding-left: 18px; padding-right: 18px; }
}

/* LMS platform grid collapses like the category grids do. */
@media (max-width: 640px) {
  .lms-platform-grid { grid-template-columns: 1fr; }
}

/* Phones. */
@media (max-width: 520px) {
  .db-article-content h1 { font-size: 26px; letter-spacing: -0.4px; }

  .db-section-header { gap: 12px; }
  .db-section-header .icon { width: 44px; height: 44px; border-radius: 12px; }
  .db-section-header .icon svg { width: 22px; height: 22px; }
  .db-section-header h1 { font-size: 24px; }

  /* Role tabs scroll sideways instead of overflowing the viewport. */
  .db-role-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .db-role-tabs::-webkit-scrollbar { display: none; }
  .db-role-tab { padding: 10px 14px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }

  /* Watch-first block: shorter stage, smaller title cards. */
  .sim-tour .ga-viewport { height: 300px; }
  .tour-card-title { font-size: 18px; max-width: 92%; }
  .tour-card-logo-img { height: 24px; }
  .tour-scene { padding: 12px; }
  .ga-info { padding: 14px 16px 12px; }
}

/* ---------- Phone header fixes ----------
   The language switcher (our addition) crowds the original phone navbar,
   which squeezes the active link into mid-word wraps ("Ho/me"). Compact the
   switcher to icon-only and keep the active link on one line (ellipsised). */
/* Safety net: a single overflowing element must never shift the whole page
   sideways (the "left-aligned" look with dead space on the right). */
html, body { overflow-x: clip; }

@media (max-width: 640px) {
  .db-lang-btn > span { display: none; }     /* icon-only language button */
  .db-lang-btn { padding: 7px 8px; gap: 4px; }
  .db-lang { margin-inline-start: 2px; }
  .db-logo { gap: 10px; flex-shrink: 0; }

  /* Let the nav shrink inside the header instead of overflowing it. */
  .db-header-nav { min-width: 0; flex: 1 1 auto; }

  .db-header-nav a.active {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 34vw;
    font-size: 13px;
  }
}
@media (max-width: 480px) {
  .db-logo-label { display: none; }          /* "Guides" chip next to the logo */
  .db-header-nav a.active { max-width: 30vw; }
}
@media (max-width: 380px) {
  .db-header-nav a.active { max-width: 25vw; }
}

/* ---------- Popular-articles rows on phones ----------
   The fixed-width chip columns (118px tag + 96px badge) don't fit beside the
   title on a phone, so the title text squeezed to one word per line. Let the
   row wrap: title first line, chips beneath it (aligned under the title). */
@media (max-width: 560px) {
  .db-popular-item { flex-wrap: wrap; row-gap: 8px; }
  .db-popular-item .db-prod-tag { margin-left: 19px; width: auto; }
  .db-popular-item .db-badge { width: auto; margin-left: 6px; }
  [dir="rtl"] .db-popular-item .db-prod-tag { margin-left: 0; margin-right: 19px; }
  [dir="rtl"] .db-popular-item .db-badge { margin-left: 0; margin-right: 6px; }
}

/* Tiny handsets (~300-380px). */
@media (max-width: 380px) {
  .db-main,
  .db-breadcrumb,
  .db-hero { padding-left: 14px; padding-right: 14px; }
  .db-article-content h1 { font-size: 22px; }
  .db-section-header h1 { font-size: 21px; }
  .db-section-header p { font-size: 13.5px; }
  /* Give animation scenes a small cushion so nothing kisses the edges. */
  .tour-scene > * { transform: scale(0.92); }
  .tour-card-title { font-size: 16px; }
}

/* ---------- Language dropdown ---------- */

/* Windows has no country-flag glyphs: Segoe UI Emoji deliberately ships the
   regional-indicator letters instead, so the flag emoji in the menu render as
   "GB", "ES", "IN" on every Windows browser while phones show real flags.
   Segoe still *covers* those codepoints, so a fallback after it is never
   reached - the webfont has to come first. Twemoji's flag font (78 KB, MIT /
   CC-BY 4.0) supplies real flags on every platform; unicode-range keeps it off
   all other text. Do not subset it: harfbuzz drops the colour layers and the
   glyphs come out blank. */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("/fonts/TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+1F1E6-1F1FF;
}

.db-lang {
  position: relative;
  display: inline-flex;
  margin-inline-start: 6px;
}
.db-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--db-text);
  background: var(--db-bg-secondary);
  border: 1px solid var(--db-border);
  border-radius: 8px;
  padding: 7px 11px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.db-lang-btn:hover { background: var(--db-bg-tertiary); border-color: #c9d2e8; }
.db-lang-btn svg.globe { width: 16px; height: 16px; opacity: 0.8; }
.db-lang-btn svg.chev {
  width: 13px; height: 13px; opacity: 0.7;
  transition: transform 0.18s ease;
}
.db-lang.open .db-lang-btn svg.chev { transform: rotate(180deg); }

.db-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 168px;
  background: #fff;
  border: 1px solid var(--db-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(11, 30, 92, 0.14);
  padding: 6px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.db-lang.open .db-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 15 languages can overflow the screen - cap the menu height and let it
   scroll instead of cutting off (all viewports, for consistency). */
.db-lang-menu {
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.db-lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font: inherit;
  font-size: 14px;
  text-align: start;
  color: var(--db-text);
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 9px 10px;
  cursor: pointer;
}
.db-lang-item:hover { background: var(--db-bg-secondary); }
.db-lang-item .flag {
  font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 16px;
  line-height: 1;
}
.db-lang-item .native { font-weight: 600; }
.db-lang-item .sub { color: var(--db-text-tertiary); font-size: 12px; margin-inline-start: auto; }
.db-lang-item[aria-current="true"] {
  background: var(--db-primary-light);
  color: var(--db-primary);
}

/* ---------- RTL polish (Arabic) ----------
   The ported style.css is written for LTR with some physical properties.
   These overrides mirror the few spots that don't flip automatically. */
[dir="rtl"] body { text-align: right; }

/* Logo wordmark image is pinned to the left edge in LTR; flip it. */
[dir="rtl"] .db-logo-icon + * { }

/* Breadcrumb chevrons point the wrong way in RTL - mirror them. */
[dir="rtl"] .db-breadcrumb .sep { display: inline-block; transform: scaleX(-1); }

/* Arrow glyphs / inline SVGs that imply "forward" should point left in RTL. */
[dir="rtl"] .db-card-cta svg,
[dir="rtl"] .lms-platform-meta svg,
[dir="rtl"] .db-back svg,
[dir="rtl"] .db-feature-cta::after { transform: scaleX(-1); }

/* Back-link arrow sits before the label; keep the gap natural in RTL. */
[dir="rtl"] .db-back { flex-direction: row; }

/* Scroll-to-top button is bottom-right in LTR; move to bottom-left in RTL. */
[dir="rtl"] .db-scroll-top { right: auto; left: 24px; }

/* ---------- Landing role heading row (label + Download all) ---------- */
.db-role-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

/* ---------- Article heading row (title + Download PDF) ---------- */
.db-article-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.db-article-head h1 { flex: 1; min-width: 0; }
.db-article-tools { flex-shrink: 0; }

/* Mobile: button drops to its own line under the heading. */
@media (max-width: 640px) {
  .db-article-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .db-article-head h1 { flex: none; width: 100%; }
  .db-article-tools { margin-bottom: 14px; }
}
.db-download-pdf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--db-border, #e2e8f0);
  border-radius: 8px;
  background: #fff;
  color: var(--db-text-secondary, #475569);
  font: 600 13px/1 inherit;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.db-download-pdf:hover {
  border-color: var(--db-primary, #1447e6);
  color: var(--db-primary, #1447e6);
  box-shadow: 0 1px 4px rgba(20, 71, 230, .12);
}
.db-download-pdf:disabled {
  opacity: .6;
  cursor: default;
  box-shadow: none;
}
.db-dl-spin { animation: db-dl-rot .8s linear infinite; }
@keyframes db-dl-rot { to { transform: rotate(360deg); } }

/* Download button + its failure message, stacked. The wrapper keeps the pair
   as one flex item so it can sit in .db-article-tools or in the landing
   pages' space-between role row without changing either layout. */
.db-dl-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
/* The message is wider than the button, so the wrapper grows when it appears.
   Align to the edge the container already holds the button against, or the
   button visibly jumps sideways the moment the error shows. flex-start/end
   follow the inline direction, so this is correct in Arabic too. */
.db-article-tools .db-dl-wrap,
.db-role-head .db-dl-wrap { align-items: flex-end; }
/* Below 640px .db-article-head stops being a row and left-aligns its
   children, so the article button hugs the opposite edge. (.db-role-head
   stays a row at every width and is left as-is.) */
@media (max-width: 640px) {
  .db-article-tools .db-dl-wrap { align-items: flex-start; }
}
/* Download button and, while a combined download runs, its Cancel button.
   Wraps because the pair plus a long progress label ("Generating PDF... 12/41")
   does not fit beside the section heading on a narrow phone - in German at
   380px it ran 4px past the viewport, where overflow-x: clip hid the edge of
   the Cancel button. Wrapping drops Cancel onto its own line instead. */
.db-dl-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
/* Deliberately quieter than the download button: this is an escape hatch, not
   a second call to action. Matches .db-download-pdf's height so the row does
   not change height when it appears. */
.db-dl-cancel {
  padding: 7px 12px;
  border: 1px solid var(--db-border, #e2e8f0);
  border-radius: 8px;
  background: transparent;
  color: var(--db-text-tertiary, #64748b);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.db-dl-cancel:hover {
  color: #b42318;
  border-color: #f2b8b1;
  background: #fef3f2;
}
.db-dl-cancel:focus-visible {
  outline: 2px solid var(--db-primary, #1447e6);
  outline-offset: 2px;
}

/* The PDF is built in the browser from a CDN-hosted library, so this shows
   when that library is blocked or the render runs out of memory. Capped to the
   button's own measure so a long translation cannot stretch the header row. */
.db-dl-error {
  max-width: 260px;
  font-size: 12px;
  line-height: 1.45;
  color: #b42318;
  text-align: left;
}

/* ---------- Accessibility fixes (QA pass) ---------- */

/* The floating prev/next article buttons are 48px icon circles whose label
   lives in a tooltip that style.css hides with `opacity: 0; visibility:
   hidden`. visibility:hidden removes content from the accessibility tree, so
   those links had NO accessible name - a screen-reader or keyboard user heard
   nothing but "link". opacity:0 alone keeps the text in the tree while leaving
   it invisible, and pointer-events:none (already set) keeps it non-interactive,
   so dropping just the visibility gives both links their name back on all 129
   article pages without touching the markup. The hover rule still sets
   opacity:1, so the reveal animation is unchanged. */
.db-article-nav .nav-text {
  visibility: visible;
}

/* The active header link had `padding: 0` below 768px, leaving a 35.8x15.6px
   tap target - under the 24x24 CSS px minimum in WCAG 2.2 SC 2.5.8 (AA).
   Padding only; the header's height is set by the taller language button, so
   this enlarges the hit area without moving anything. */
@media (max-width: 768px) {
  .db-header-nav a.active {
    padding: 6px 4px;
  }
}

/* Text contrast (WCAG 1.4.3, AA, 4.5:1 for normal-size text).
   Several accent colours are used both as decoration and as small text. As
   decoration they are fine - SC 1.4.11 only asks 3:1 for non-text - but as
   13px and 12px labels they failed:

     .db-feature-cta   green  #16A34A  3.30:1
                       orange #EA580C  3.56:1
     .lms-platform-meta moodle      #f98012  2.58:1
                        brightspace #f47820  2.78:1
                        schoology   #0989b8  3.98:1
                        canvas      #e72429  4.49:1

   So the fix darkens only the TEXT, via a separate token, and leaves every
   icon, bar and border on the original brand colour. Each replacement is the
   brand hue scaled toward black just far enough to clear 4.5:1, so the colours
   stay recognisable. */
.db-feature-card.ai      .db-feature-cta { color: #12863D; }  /* 4.68:1 */
.db-feature-card.quality .db-feature-cta { color: #C94C0A; }  /* 4.65:1 */

.lms-platform-card.moodle      .lms-platform-meta { color: #B35C0D; }  /* 4.70:1 */
.lms-platform-card.canvas      .lms-platform-meta { color: #E22328; }  /* 4.65:1 */
.lms-platform-card.brightspace .lms-platform-meta { color: #B95B18; }  /* 4.57:1 */
.lms-platform-card.schoology   .lms-platform-meta { color: #087EA9; }  /* 4.59:1 */