/* =====================================================
   livetranslation.ai — shared base stylesheet
   -----------------------------------------------------
   Holds the canonical design tokens + page chrome
   (header, nav, footer, buttons, utility classes).

   Loaded BEFORE the per-page inline <style> block, so
   pages can still override with section-specific styles
   without specificity fights. Long-term goal: pull all
   duplicated rules OUT of the per-page <style> blocks.
   ===================================================== */

/* ------- TOKENS ------- */
:root{
  --ink:#0c1116;
  --ink-2:#1c232c;
  --muted:#5b6470;
  --muted-2:#8a929d;
  --line:#e6e8ec;
  --line-2:#eef0f3;
  --bg:#ffffff;
  --bg-soft:#f5f6f8;
  --bg-paper:#fafbfc;
  --accent:#0ea5a4;          /* teal */
  --accent-2:#0b8786;
  --accent-soft:rgba(14,165,164,.08);
  --warm:#f59e0b;            /* amber */
  --warm-soft:rgba(245,158,11,.10);
  --green:#059669;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(12,17,22,.06), 0 1px 1px rgba(12,17,22,.04);
  --shadow-md:0 10px 30px -12px rgba(12,17,22,.18), 0 2px 6px rgba(12,17,22,.06);
  --shadow-lg:0 30px 60px -20px rgba(12,17,22,.25);
  --max:1240px;
}

/* ------- RESET / BASE ------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Safety net: stop stray absolutely-positioned hero decorations
   (flag grids, floating stats etc.) from causing horizontal scroll
   on narrow viewports. */
html,body{overflow-x:hidden; max-width:100%; width:100%}

/* ------- MOBILE OVERFLOW FIX -------
   CSS Grid items default to `min-width: auto`, which means they
   refuse to shrink below their intrinsic content width. On phones
   this causes hero grids (and bullet lists, paragraphs) to push
   the whole page wider than the viewport — H1 text + body copy
   visibly clipped at the right edge in Safari on iOS / DDG.

   The fix has three parts:
   1. Force every grid/flex item to be allowed to shrink (min-width:0)
   2. Force long-word breaking on display-size headings (sometimes
      product names or compound German words can't fit even a 360px
      column otherwise)
   3. Clamp images/SVGs to their box width
*/
@media (max-width:780px){
  /* Allow grid + flex items to actually shrink, not bust the column */
  .hero .wrap > *, .hero-grid > *, .ctx-grid > *,
  .feature-grid > *, .lang-grid > *, footer.site .grid > *{
    min-width:0;
  }
  /* Long-word break for headings on phone viewports */
  h1, h2, h3, .display, .lede, p, li{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  /* Cap inline media at column width (icons keep their size) */
  img, video{max-width:100%; height:auto}
}

/* ------- COOKIE BANNER FIX -------
   The Complianz "soft cookiewall" otherwise paints a full-screen
   semi-transparent overlay (z-index 9999, rgba(0,0,0,.7)) that sits
   above ALL page chrome — including the mobile burger button —
   until the user consents. On iOS Safari / DDG that overlay would
   eat every tap on the header, so users see the menu icon but
   can't open it. We keep the consent banner itself visible & tap-
   pable, but drop the click-blocking dark wash so the page is
   usable while the banner is shown. */
.cmplz-cookiebanner-container.cmplz-soft-cookiewall,
.cmplz-soft-cookiewall{
  background-color:transparent !important;
  pointer-events:none !important;
}
.cmplz-soft-cookiewall .cmplz-cookiebanner,
.cmplz-cookiebanner{
  pointer-events:auto !important;
}
body{
  font-family:'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}

/* ------- LAYOUT ------- */
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px}

/* ------- TOPBAR (optional, used on homepage) ------- */
.topbar{
  background:var(--ink);
  color:#cbd2db;
  font-size:13px;
  border-bottom:1px solid #1a2129;
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:40px; gap:24px}
.topbar .promo{display:flex; align-items:center; gap:10px}
.topbar .promo .dot{width:6px; height:6px; background:var(--warm); border-radius:50%}
.topbar .contacts{display:flex; align-items:center; gap:22px}
.topbar a:hover{color:#fff}
.topbar .contacts a{display:inline-flex; align-items:center; gap:7px}
.topbar svg{width:14px; height:14px; opacity:.7}
.topbar .socials{display:flex; gap:14px; align-items:center}
.topbar .socials a{opacity:.7}
.topbar .socials a:hover{opacity:1}
@media (max-width:780px){ .topbar .promo,.topbar .socials{display:none} }

/* ------- HEADER / NAV ------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(8px);
  -webkit-backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:78px; gap:24px}
.logo{display:flex; align-items:center; gap:10px}
.logo img{height:36px; width:auto; display:block}
.logo.footer img{filter:invert(1) brightness(1.1)}

nav.primary{display:flex; gap:6px}
nav.primary a{
  padding:10px 14px; border-radius:10px; font-weight:500; color:var(--ink-2);
  font-size:15px; transition:background .15s, color .15s;
}
/* Restrict hover styles to actual hover-capable devices.
   On touch-only iOS, :hover triggers on the first tap and can swallow
   the subsequent click, requiring a second tap to navigate. Gating
   the hover under @media (hover: hover) fixes this. */
@media (hover: hover){
  nav.primary a:hover{background:var(--bg-soft)}
}
nav.primary a.active{color:var(--accent-2)}
nav.primary a.active::after{
  content:""; display:block; height:2px; margin-top:6px; background:var(--accent);
  border-radius:2px; width:18px;
}

/* nav dropdown (Use cases) */
.nav-dd{position:relative}
.nav-dd-trigger{
  background:transparent; border:0; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:500;
  color:var(--ink-2); padding:10px 14px; border-radius:10px;
  display:inline-flex; align-items:center; gap:6px;
  transition:background .15s, color .15s;
}
@media (hover: hover){ .nav-dd-trigger:hover{background:var(--bg-soft)} }
.nav-dd-trigger.active{color:var(--accent-2)}
.nav-dd-trigger svg{transition:transform .2s; opacity:.7}
.nav-dd:hover .nav-dd-trigger svg,
.nav-dd:focus-within .nav-dd-trigger svg{transform:rotate(180deg); opacity:1}
.nav-dd-panel{
  position:absolute; top:calc(100% + 8px); left:0;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:8px; min-width:280px;
  box-shadow:0 12px 36px -10px rgba(12,17,22,.18), 0 2px 6px rgba(12,17,22,.04);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s, transform .15s, visibility .15s;
  z-index:50;
}
.nav-dd:hover .nav-dd-panel,
.nav-dd:focus-within .nav-dd-panel{
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav-dd-panel a{
  display:block; padding:10px 12px; border-radius:8px;
  color:var(--ink-2); font-size:14px; text-decoration:none;
  transition:background .12s;
}
@media (hover: hover){ .nav-dd-panel a:hover{background:var(--bg-soft)} }
.nav-dd-panel a.active{background:var(--accent-soft); color:var(--accent-2)}
.nav-dd-panel a b{
  display:block; font-size:14px; font-weight:600; color:var(--ink);
  margin-bottom:2px; letter-spacing:-.005em;
}
.nav-dd-panel a.active b{color:var(--accent-2)}
.nav-dd-panel a small{color:var(--muted); font-size:12.5px; line-height:1.45}
.nav-dd-sep{height:1px; background:var(--line); margin:6px 4px}
.nav-dd-allcases{
  font-size:13px !important; color:var(--accent-2) !important;
  font-weight:500; padding:8px 12px !important;
}
@media (hover: hover){ .nav-dd-allcases:hover{background:var(--accent-soft) !important} }

/* ------- BUTTONS / CTA ------- */
.cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:#fff; padding:12px 18px;
  border-radius:999px; font-weight:600; font-size:14px;
  border:1px solid var(--ink); transition:transform .15s, background .15s;
}
@media (hover: hover){
  .cta:hover{background:var(--ink-2); transform:translateY(-1px)}
}
.cta.warm{background:var(--warm); border-color:var(--warm); color:#1a1206}
@media (hover: hover){ .cta.warm:hover{background:#e08c00} }
.cta.outline{background:transparent; color:var(--ink); border-color:var(--line)}
@media (hover: hover){ .cta.outline:hover{background:var(--bg-soft)} }
.cta svg{width:16px; height:16px}

.menu-btn{display:none; background:none; border:1px solid var(--line); padding:9px; border-radius:10px}

@media (max-width:960px){
  /* Hide the desktop header CTA on mobile — Book Demo is reachable via the topbar + hero + drawer */
  header.site .cta{display:none !important}
  .menu-btn{display:inline-grid !important; place-items:center; position:relative; z-index:100002}

  /* Mobile nav drawer — slides in from the right.
     z-index 100000 puts it above the Complianz cookie banner (z=99999),
     which would otherwise intercept taps on the open drawer on
     narrow viewports where they overlap. */
  nav.primary{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:2px !important;
    position:fixed !important;
    top:0 !important; right:0 !important; left:auto !important;
    height:100vh !important;
    height:100dvh !important;
    width:min(86vw, 340px) !important;
    background:#fff !important;
    padding:96px 22px 28px !important;
    box-shadow:-12px 0 32px -10px rgba(0,0,0,.15) !important;
    z-index:100000 !important;
    transition:transform .25s ease !important;
    overflow-y:auto !important;
  }
  /* Closed state */
  html body:not(.mobile-menu-open) nav.primary{transform:translateX(100%) !important}
  /* Open state */
  html body.mobile-menu-open nav.primary{transform:translateX(0) !important}

  /* Backdrop is now a real <div class="mobile-nav-backdrop"> injected
     by mobile-nav.js — pseudo-element backdrops on body are unreliable
     on iOS Safari (they sometimes win the hit-test against the drawer
     and swallow taps on menu items). We define no ::before rule here
     anymore; the JS owns the backdrop completely. */
  body.mobile-menu-open{overflow:hidden}

  /* Stacked tap-targets — all drawer items get explicit pointer-events,
     a tap-highlight for visual feedback, and `touch-action:manipulation`
     to suppress the iOS 300ms double-tap-zoom delay that can swallow
     the first tap. */
  nav.primary > a,
  nav.primary .nav-dd-trigger,
  nav.primary .nav-dd-panel a{
    pointer-events:auto !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:rgba(14,165,164,.15) !important;
    cursor:pointer !important;
    position:relative !important;
    z-index:1 !important;
  }
  nav.primary > a{
    padding:14px 16px !important;
    font-size:16px !important;
    border-radius:8px !important;
    width:100% !important;
  }
  nav.primary a.active::after{display:none !important}
  nav.primary > a.active{background:var(--accent-soft) !important; color:var(--accent-2) !important}

  /* Use-cases dropdown — inline instead of floating panel */
  .nav-dd{width:100% !important}
  .nav-dd-trigger{
    width:100% !important;
    justify-content:flex-start !important;
    padding:14px 16px !important;
    font-size:16px !important;
    border-radius:8px !important;
    white-space:nowrap !important;
  }
  .nav-dd-trigger svg{margin-left:auto !important; flex:none !important}
  .nav-dd-panel{
    position:static !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    box-shadow:none !important;
    border:0 !important;
    background:var(--bg-soft) !important;
    margin:4px 0 10px 14px !important;
    padding:4px !important;
    min-width:0 !important;
    width:auto !important;
  }
  .nav-dd:hover .nav-dd-trigger svg,
  .nav-dd:focus-within .nav-dd-trigger svg{transform:none !important}
}

/* ------- HERO H1 — prevent overflow on narrow viewports ------- */
@media (max-width:560px){
  h1.display{
    font-size:clamp(28px, 9vw, 40px) !important;
    line-height:1.08 !important;
    letter-spacing:-.02em !important;
    word-break:break-word;
    overflow-wrap:break-word;
  }
}

/* ------- FOOTER ------- */
footer.site{background:#0c1116; color:#9ba6b3; padding:70px 0 30px}
footer.site .grid{
  display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap:48px;
  padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.08);
}
footer.site h4{color:#fff; font-size:14px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 16px}
footer.site ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
footer.site a:hover{color:#fff}
footer.site .brand{display:flex; flex-direction:column; gap:14px}
footer.site .brand .logo{color:#fff}
footer.site .brand p{font-size:14px; line-height:1.6; margin:0; max-width:42ch}
footer.site .addr{font-style:normal; font-size:14px; line-height:1.65}
footer.site .addr strong{color:#cbd2db; font-weight:600; display:block}
footer.site .socials{display:flex; gap:10px; margin-top:14px}
footer.site .socials a{
  width:36px; height:36px; border-radius:9px; background:rgba(255,255,255,.06);
  display:grid; place-items:center; transition:background .15s;
}
footer.site .socials a:hover{background:var(--accent)}
footer.site .socials svg{width:16px; height:16px}
footer.site .bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:13px}
footer.site .bottom .legal{display:flex; gap:22px}
@media (max-width:900px){
  footer.site .grid{grid-template-columns:1fr 1fr; gap:34px}
  footer.site .bottom{flex-direction:column; gap:14px}
}