/*
  ReceGuard site theme. Loaded last on every page so it wins over the older
  per-page styles. Dark navy by default (matches the app's Midnight theme);
  <html data-theme="light"> switches to the light palette.
*/

html:root,
html[data-theme="dark"] {
  --bg: #101c33;
  --bg-alt: #14243f;
  --surface: rgba(38, 58, 96, 0.55);
  --surface-solid: #1a2a47;
  --text: #e9eef8;
  --text-secondary: rgba(233, 238, 248, 0.74);
  --border: rgba(157, 187, 255, 0.2);
  --accent: #9dbbff;
  --accent-strong: #c4d6ff;
  --accent-soft: rgba(127, 168, 255, 0.16);
  --success: #5ad49a;
  --success-soft: rgba(90, 212, 154, 0.14);
  --warning: #fbc15a;
  --warning-soft: rgba(251, 193, 90, 0.14);
  --danger: #ff7a73;
  --shadow: 0 18px 50px rgba(3, 8, 20, 0.45);
  --radius: 0px;
  --cta-bg: #dce7ff;
  --cta-text: #101c33;
  --header-bg: rgba(16, 28, 51, 0.82);
  --footer-bg: #0b1426;
  --star: rgba(233, 238, 248, 0.16);
  --notch: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --font-body: "Plus Jakarta Sans", Inter, "Segoe UI", system-ui, sans-serif;
  --font-display: "Space Grotesk", "Plus Jakarta Sans", Inter, "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #f4f7fc;
  --bg-alt: #e9eff8;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --text: #101c33;
  --text-secondary: rgba(16, 28, 51, 0.72);
  --border: rgba(16, 28, 51, 0.14);
  --accent: #2f61d3;
  --accent-strong: #1f4aa8;
  --accent-soft: #e3ecff;
  --success: #18794e;
  --success-soft: #e4f6ed;
  --warning: #b86e00;
  --warning-soft: #fff1d6;
  --danger: #c23d38;
  --shadow: 0 16px 40px rgba(16, 28, 51, 0.1);
  --cta-bg: #101c33;
  --cta-text: #ffffff;
  --header-bg: rgba(244, 247, 252, 0.86);
  --footer-bg: #e3eaf5;
  --star: rgba(16, 28, 51, 0.08);
  color-scheme: light;
}

/* ---------- Base ---------- */

html body {
  background-color: var(--bg);
  background-image: radial-gradient(var(--star) 1px, transparent 1.2px);
  background-size: 34px 34px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
}

html body a { color: var(--accent); }
html body a:hover { color: var(--accent-strong); }

html body h1,
html body h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--text);
}

html body h1 {
  font-size: clamp(36px, 5.2vw, 56px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
}

html body h2 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0.02em;
}

html body h3 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

html body p { color: var(--text-secondary); }
html body strong { color: var(--text); }

html body section,
html body .hero,
html body .section-alt { background: transparent; }
html body .section-alt { background: color-mix(in srgb, var(--bg-alt) 70%, transparent); }

/* ---------- Header ---------- */

html body .site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
}

html body .site-header > .nav { height: 76px; gap: 28px; }

html body .site-header .brand,
html body .site-header .brand:hover {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

html body .site-header .brand img { width: 34px; height: 34px; border-radius: 9px; }

html body .site-header .nav-links { gap: 30px; }

html body .site-header .nav-links a {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.86;
}

html body .site-header .nav-links a:hover { color: var(--text); opacity: 1; }

/* ---------- Buttons ---------- */

html body .btn,
html body .btn-primary,
html body a.btn,
html body button.btn,
html body .site-header .btn,
html body .footer-download,
html body .cta-band .btn {
  font-family: var(--font-display);
  font-size: 14.4px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 0;
  border-radius: 0;
  background: var(--cta-bg);
  color: var(--cta-text);
  clip-path: var(--notch);
  box-shadow: none;
  transition: filter 0.15s ease, transform 0.15s ease;
}

html body .btn:hover,
html body .site-header .btn:hover {
  color: var(--cta-text);
  filter: brightness(1.06);
  transform: translateY(-1px);
}

html body .btn-ghost,
html body .btn.btn-ghost {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
  /* A notch would cut the outline's corners off. */
  clip-path: none;
}

html body .btn-ghost:hover { color: var(--text); background: var(--accent-soft); }

html body .btn-sm { padding: 11px 20px; font-size: 13px; }

/* Language and appearance pills in the header. */
.nav-controls { display: flex; align-items: center; gap: 10px; }

html body .site-header .nav-pill,
html body .site-header .nav-lang > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-solid) 60%, transparent);
  color: var(--text);
  font: 500 14px/1 var(--font-body);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.nav-lang > summary::-webkit-details-marker { display: none; }
.nav-pill:hover, .nav-lang > summary:hover { border-color: var(--accent); }
.nav-pill svg, .nav-lang svg { width: 16px; height: 16px; flex: none; }

/* Pages style every <details> as an FAQ item; the header menu opts out. */
html body .site-header details.nav-lang {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
}

.nav-lang > summary::marker,
.nav-lang > summary::after { content: none; display: none; }

.nav-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  padding: 6px;
  display: grid;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  clip-path: var(--notch);
}

.nav-lang-menu a {
  padding: 9px 12px;
  color: var(--text) !important;
  font-size: 14px;
  text-decoration: none;
}

.nav-lang-menu a:hover,
.nav-lang-menu a[aria-current="true"] { background: var(--accent-soft); }

@media (max-width: 1080px) {
  html body .site-header .nav-links { gap: 20px; }
  .nav-pill .nav-pill-label { display: none; }
}

@media (max-width: 860px) {
  .nav-controls { margin-left: auto; }
  .nav-pill, .nav-lang > summary { height: 38px; padding: 0 12px; }
  html body .site-header .btn { padding: 11px 16px; }
}

@media (max-width: 480px) {
  .nav-lang { display: none; }
  /* Translated CTA labels ("Obtenir l'application") are up to 2x the English
     width; let the button shrink and wrap instead of widening the page. */
  html body .site-header > .nav { gap: 12px; padding: 0 14px; }
  .nav-controls { gap: 8px; min-width: 0; }
  html body .site-header .btn {
    flex: 0 1 auto;
    min-width: 0;
    padding: 9px 12px;
    font-size: 12px;
    letter-spacing: 0.03em;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
  }
}

/* ---------- Cards and panels ---------- */

html body .card,
html body [class$="-card"],
html body [class*="-card "],
html body .feature,
html body .faq-item,
html body details.faq,
html body .tool-panel,
html body .result-card,
html body .comparison-table,
html body .article-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  clip-path: var(--notch);
}

html body table { border-color: var(--border); }
html body th { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 13px; }

html body input,
html body select,
html body textarea {
  background: var(--surface-solid);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: var(--font-body);
}

/* Screenshots keep their rounded phone corners. */
html body img[src*="screenshot"],
html body img[src*="app-"] { clip-path: none; }

/* ---------- Footer ---------- */

html body footer,
html body .site-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--border);
  padding: 60px 0;
  font-size: 14.4px;
}

html body footer .brand,
html body .site-footer .brand {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

html body footer h3,
html body .site-footer h3 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}

html body footer a:not(.btn):not(.brand),
html body .site-footer a:not(.btn):not(.brand) {
  color: var(--text-secondary);
  font-size: 12.8px;
}

html body footer a:not(.btn):not(.brand):hover,
html body .site-footer a:not(.btn):not(.brand):hover { color: var(--text); }

html body footer .copyright,
html body .site-footer .footer-bottom {
  color: var(--text-secondary);
  font-size: 12.8px;
  border-top-color: var(--border);
}

/* ---------- Closing call-to-action band ---------- */

html body .cta-band,
html body .cta {
  background: linear-gradient(135deg, var(--surface-solid), color-mix(in srgb, var(--accent) 22%, var(--surface-solid)));
  border: 1px solid var(--border);
  border-radius: 0;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  color: var(--text);
}

html body .cta-band h2,
html body .cta h2 { color: var(--text); }

html body .cta-band p,
html body .cta p { color: var(--text-secondary); }

/* ---------- Hero ---------- */

/* Sits high on the page with oversized type, like the reference layout. */
html body .hero { padding-top: 40px; padding-bottom: 56px; }
html body .hero-grid { align-items: start; }

html body .hero h1 {
  font-size: clamp(42px, 6.6vw, 78px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin-top: 8px;
}

/* Capitals with stacked accents (Ž, Ő, Ă, Ș, Ã) need room between the tight heading lines. */
html:is(:lang(sk), :lang(hr), :lang(hu), :lang(ro), :lang(pt), :lang(ca)) body h1 { line-height: 1.06; }
html:is(:lang(sk), :lang(hr), :lang(hu), :lang(ro), :lang(pt), :lang(ca)) body .hero h1 { line-height: 1.04; }

html body .hero p.lede {
  font-size: 19px;
  max-width: 34em;
  margin-top: 22px;
}

html body .hero-trust {
  margin-top: 18px;
  color: var(--text-secondary);
  font-size: 13.5px;
  letter-spacing: 0.02em;
}

@media (max-width: 940px) {
  html body .hero { padding-top: 28px; }
}

/* ---------- Hero phone ---------- */

html body .phone-screen .phone-video,
html body .phone-screen .phone-still {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/* The still is only for browsers that cannot play the loop, and for people
   who asked their system to reduce motion. */
html body .phone-screen .phone-still { display: none; }

@media (prefers-reduced-motion: reduce) {
  html body .phone-screen .phone-video { display: none; }
  html body .phone-screen .phone-still { display: block; }
}

/* ---------- Phone widths: nothing may widen the page ---------- */

@media (max-width: 760px) {
  /* Long compound words (de "Fahrtenbuchvorlage", uppercase display type)
     are wider than a phone; let headings hyphenate or break mid-word. */
  html body h1,
  html body h2,
  html body h3,
  html body .eyebrow,
  html body .crumbs,
  html body .lede {
    overflow-wrap: anywhere;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Grid and flex children default to min-width:auto, so one long compound
     (fi "Liiketoimintakäyttö", nl "Vennootschapsbelasting") widens the whole
     column past the phone. Let them shrink and break the word instead. */
  html body :is(.hero-grid, .feature-row, .faq-list, .choice-grid) > * { min-width: 0; }
  html body fieldset { min-width: 0; }
  html body { overflow-wrap: break-word; }
  html body :is(li, summary, .faq p, .choice span, .choice small, td, th) { overflow-wrap: anywhere; }

  /* Footer columns: 1fr can't shrink below its longest link. */
  html body .footer-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .footer-links-grid > *,
  html body .footer-list { min-width: 0; }
  html body .footer-links a,
  html body .footer-list a { overflow-wrap: anywhere; }
  html body .language-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* CTA labels like "Télécharger sur l'App Store" are wider than a phone
     in spaced uppercase; wrap them rather than overflow. */
  html body .btn,
  html body a.btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  /* Tables outside a scroll wrapper scroll themselves. */
  html body main > table,
  html body .content > table,
  html body article > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Very narrow phones (below iPhone SE's 375px): tighten the header further. */
/* Phones: the homepage footer's inline "1fr 1fr" lets the full-width language grid
   (3 x 76px minimum) push the first column wide and the second off screen. */
@media (max-width: 760px) {
  html body .footer-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  html body .footer-sections > * { min-width: 0; }
  html body .footer-languages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 20px; }
}

@media (max-width: 374px) {
  html body .site-header > .nav { gap: 8px; padding: 0 10px; }
  html body .site-header .brand { font-size: 15px; gap: 8px; }
  html body .site-header .brand img { width: 28px; height: 28px; }
  html body .site-header .btn { padding: 8px 10px; font-size: 11px; }
  html body .footer-list { min-width: 0; overflow-wrap: anywhere; }
}

/* ---------- Header on translated pages ----------
   German, French, Spanish and Italian nav labels run 20-35% longer than
   English, so the row that just fits in English overflows. Tighten it, and
   drop the theme toggle's text (theme.js writes English "Light"/"Dark"). */
html:not([lang="en"]) body .site-header > .nav { gap: 20px; }
html:not([lang="en"]) body .site-header .nav-links { gap: 20px; }
html:not([lang="en"]) body .site-header .nav-links a { letter-spacing: 0.02em; }
html:not([lang="en"]) .nav-pill .nav-pill-label { display: none; }
/* Even tightened, translated rows need up to ~1290px, beyond the 1120px
   content width: give their header room, and collapse the links (as on
   phones) until the screen is wide enough to show them all. */
html:not([lang="en"]) body .site-header > .nav { max-width: 1320px; }

@media (max-width: 1319px) {
  html:not([lang="en"]) body .site-header .nav-links { display: none; }
  html:not([lang="en"]) .nav-controls { margin-left: auto; }
}

/* English fits from 1024px up; below that (tablets) collapse the links too. */
@media (max-width: 1023px) {
  html body .site-header .nav-links { display: none; }
  .nav-controls { margin-left: auto; }
}

/* Tablets: the desktop footer grid (170px + 300px + 5 x 76px languages)
   needs ~1000px; switch to two shrinkable columns with languages below. */
@media (min-width: 761px) and (max-width: 1023px) {
  html body .footer-links-grid,
  html body .footer-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .footer-links-grid > *,
  html body .footer-sections > * { min-width: 0; }
  html body .language-grid,
  html body .footer-languages { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* A single German compound in a desktop-size headline can outgrow the
   line ("unzusammenhängender" at 1180px). Only kicks in when a word
   cannot fit, so normal headings are unaffected. */
@media (min-width: 761px) {
  /* Scoped so it doesn't override the phone rule's overflow-wrap: anywhere. */
  html body h1,
  html body h2 { overflow-wrap: break-word; }
}

/* ---------- Homepage hero: three app screens in device frames ----------
   Replaces the autoplaying tour video. Centre device in front, mileage
   and reports angled behind. Total spread is ~1.84x the device width,
   kept inside the hero column at every breakpoint. */
.phone-stack {
  --dev-w: 250px;
  position: relative;
  width: 100%;
  max-width: 520px;
  height: calc(var(--dev-w) * 1.964 + 48px);
  margin: 0 auto;
  overflow: hidden;
  padding-top: 8px;
}
.phone-stack .device {
  position: absolute;
  top: 8px;
  left: 50%;
  width: var(--dev-w);
  margin: 0;
  padding: 9px;
  border-radius: calc(var(--dev-w) * 0.18);
  background: #05070d;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 28px 56px -18px rgba(0, 0, 0, 0.55);
}
.phone-stack .device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--dev-w) * 0.145);
}
.phone-stack .device-center { transform: translateX(-50%); z-index: 3; }
.phone-stack .device-left {
  transform: translateX(-100%) translateY(36px) rotate(-6deg) scale(0.84);
  transform-origin: 70% 50%;
  z-index: 1;
  filter: brightness(0.8);
}
.phone-stack .device-right {
  transform: translateY(36px) rotate(6deg) scale(0.84);
  transform-origin: 30% 50%;
  z-index: 2;
  filter: brightness(0.8);
}
@media (max-width: 1100px) { .phone-stack { --dev-w: 220px; } }
@media (max-width: 940px)  { .phone-stack { --dev-w: 230px; } }
@media (max-width: 480px)  { .phone-stack { --dev-w: 190px; } }

/* Many languages: three columns in the header menu (two on narrow screens),
   scroll if the viewport is short. */
html body .nav-lang-menu { grid-template-columns: repeat(3, minmax(140px, 1fr)); min-width: 450px; max-height: min(72vh, 560px); overflow-y: auto; }
@media (max-width: 700px) { html body .nav-lang-menu { grid-template-columns: repeat(2, minmax(132px, 1fr)); min-width: 300px; } }
@media (max-width: 420px) { html body .nav-lang-menu { min-width: 0; width: calc(100vw - 32px); grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Site-wide notice: check with an accountant and the tax authority ---------- */
html body aside.site-notice {
  position: static;
  display: block;
  padding: 8px 0 40px;
  margin: 0;
  background: none;
}
html body .site-notice p {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 7px;
  background: var(--bg-alt);
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: none;
}
html body .site-notice strong { color: var(--text); }
@media print { html body aside.site-notice { padding: 8px 0; } }

/* Long compound words (Danish, German) must not push narrow phones sideways. */
html body article :is(p, li, h2, h3, summary, td, th) { overflow-wrap: break-word; }

/* Long table headings and rate labels in some languages (fr, el) at phone width. */
.rate-example > * { min-width: 0; }
.rate-step-label, .rate-card span { overflow-wrap: anywhere; hyphens: auto; }
.rate-cards > * { min-width: 0; }
@media (max-width: 420px) {
  html body .doc-paper th { font-size: 9px; letter-spacing: 0; padding: 7px 5px; overflow-wrap: normal; hyphens: auto; }
  html body .doc-paper th.num { white-space: normal; }
}