/* ============================================================
   freshpilot — shared base styles
   Loaded by every page before its page-specific stylesheet.
   Edit here once instead of in 33 HTML files.
   ============================================================ */

:root {
  --cream: #F8F5EF;
  --cream-warm: #F2EDE4;
  --sand: #E8E1D5;
  --bark: #2C2A25;
  --bark-soft: #5C5750;
  /* #8A847A gave only 3.41:1 on --cream, failing WCAG AA for the 13px
     footer legal links used on every page. #726C62 is 4.78:1. */
  --bark-muted: #726C62;
  --forest: #3B6B4A;
  --forest-deep: #2D5639;
  --forest-light: #EAF0E6;
  --forest-glow: #4A7C59;
  --clay: #C4704B;
  --clay-deep: #A85D3D;
  --clay-light: #F5EAE3;
  --divider: #DDD7CC;
  --white: #FFFFFF;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 100px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.07);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
}

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

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--cream);
  color: var(--bark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'DM Serif Display', serif; font-weight: 400; line-height: 1.2; }

.btn-primary { background: var(--forest); color: var(--white); }

.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248, 245, 239, 0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--divider);
}

.nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; height: 68px;
}

.nav-links { display: flex; gap: 32px; list-style: none; }

.nav-links a.active { color: var(--forest); font-weight: 600; border-bottom-color: var(--forest); }

.nav-right { display: flex; align-items: center; gap: 12px; }

.nav .btn { padding: 10px 22px; font-size: 14px; }

.nav-mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; margin-left: 16px; }

.footer { border-top: 1px solid var(--divider); padding: 48px 0 32px; }

.footer-brand .nav-logo { margin-bottom: 12px; }

.footer-brand p { font-size: 14px; color: var(--bark-soft); line-height: 1.6; max-width: 280px; }

.footer-col h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--bark-muted); margin-bottom: 16px;
}

.footer-col ul { list-style: none; }

.footer-col ul li { margin-bottom: 10px; }

.footer-bottom p { font-size: 13px; color: var(--bark-muted); }

.footer-bottom .footer-legal { display: flex; gap: 24px; }

.nav-mobile-menu {
  display: none;
  position: absolute;
  top: 68px; left: 0; right: 0;
  background: var(--cream);
  border-bottom: 1px solid var(--divider);
  padding: 16px 32px 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.nav-mobile-menu.open { display: block; }

.nav-mobile-menu a {
  display: block; padding: 12px 0;
  font-size: 16px; font-weight: 500; color: var(--bark-soft);
  border-bottom: 1px solid var(--divider);
}

.nav-mobile-menu a:last-child { border-bottom: none; }

.nav-mobile-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }

.nav-mobile-toggle.open span:nth-child(2) { opacity: 0; }

.nav-mobile-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.lang-dropdown { position: relative; }

.lang-dropdown-btn {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--bark-soft);
  background: var(--cream-warm); padding: 8px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--divider);
  cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif;
}

.lang-dropdown-btn:hover { color: var(--bark); }

.lang-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--white); border: 1px solid var(--divider);
  border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  min-width: 130px; overflow: hidden; z-index: 200;
}

.lang-dropdown-menu.open { display: block; }

.lang-dropdown-menu a {
  display: block; padding: 10px 16px; font-size: 14px;
  color: var(--bark-soft); transition: background 0.15s;
}

.lang-dropdown-menu a:hover { background: var(--cream-warm); color: var(--bark); }

.mobile-lang-row { display: flex; align-items: center; gap: 8px; padding: 8px 0 16px; border-bottom: 1px solid var(--divider); margin-bottom: 4px; }

.nav-mobile-menu a.mobile-lang, .mobile-lang { display: inline-flex !important; align-items: center; justify-content: center; width: 52px; height: 36px; padding: 0 !important; font-size: 13px; font-weight: 600; line-height: 1; color: var(--bark-soft); background: var(--cream-warm); border-radius: 8px; border: 1px solid var(--divider); box-sizing: border-box; }

.mobile-lang.active { background: var(--forest-light); color: var(--forest); border-color: var(--forest); }

/* Shared mobile-header behaviour.
   Previously only the three legal pages hid .nav-right at this breakpoint, so
   the other eight templates crammed logo + language dropdown + CTA + hamburger
   into one row on phones. Fixed here once for all pages. */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-right { display: none; }
  .nav-mobile-toggle { display: block; }
  .nav .btn { margin-left: auto; }
}

/* Visible keyboard focus. The base styles removed outlines in places without
   providing a replacement. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}

/* ---- shared by every page (promoted out of the per-page files) ---- */

a { text-decoration: none; color: inherit; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 32px; }

.nav-logo { font-family: 'DM Serif Display', serif; font-size: 24px; color: var(--forest-deep); }

.nav-links a:hover { color: var(--bark); }

/* Unified from 11 copies. cookies.css and privacy.css omitted the
   border-bottom + padding-bottom, leaving 6 pages where the transparent
   placeholder border did not exist. Invisible in itself (the border is
   transparent and the text does not move), but .nav-links a.active above sets
   only border-bottom-COLOR, so the active underline would silently not render
   on those pages. The nav markup is identical on all 33 pages now; its styling
   should be too. */
.nav-links a { font-size: 14px; font-weight: 500; color: var(--bark-soft); transition: color 0.2s; border-bottom: 2px solid transparent; padding-bottom: 4px; }

.nav-mobile-toggle span { display: block; width: 22px; height: 2px; background: var(--bark); margin: 5px 0; border-radius: 2px; transition: all 0.3s; }

/* ---- buttons, promoted out of 9 per-page stylesheets + legal.css ----
   .btn is used on 81 <a> elements and 3 <button> elements (#submitBtn on the
   demo pages). index.css used to add `text-decoration: none` here; that is
   provably redundant and is deliberately NOT carried over. Verified: the
   <button> on demo.html computes text-decoration-line: none even though
   demo.css never declared it (buttons have no default underline), and no
   button.btn exists on index.html at all. The `a` reset above covers the rest. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 30px; border-radius: var(--radius-md);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 600;
  cursor: pointer; border: none; transition: all 0.2s ease;
}

.btn-group { display: flex; gap: 14px; flex-wrap: wrap; }

/* .btn-primary itself is declared near the top of this file. Its :hover was the
   one button rule that genuinely disagreed: 8 content stylesheets lifted and
   shadowed the button, legal.css only darkened it. Since the nav CTA is
   generated identically on all 33 pages, its hover is unified to the content
   version -- this DOES change hover feel on the 9 legal pages, deliberately. */
.btn-primary:hover { background: var(--forest-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-secondary { background: transparent; color: var(--forest); border: 1.5px solid var(--forest); }

.btn-secondary:hover { background: var(--forest-light); }

.btn-clay { background: var(--clay); color: var(--white); }

.btn-clay:hover { background: var(--clay-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-white { background: var(--white); color: var(--forest); }

.btn-white:hover { background: var(--cream); transform: translateY(-1px); }

/* Section rhythm, promoted from 7 stylesheets. Only those 7 pages use
   class="section" -- demo and the three legal pages have none -- so moving it
   here cannot affect them. */
.section { padding: 80px 0; }

.footer-col ul a { font-size: 14px; color: var(--bark-soft); transition: color 0.2s; }

.footer-col ul a:hover { color: var(--forest); }

/* The footer's own layout, promoted from all 11 per-page stylesheets where it
   was duplicated verbatim -- base rule and both breakpoints. Now that the
   footer MARKUP comes from one template (tools/lib/render-footer.js), leaving
   its layout scattered across 11 files would guarantee that someone edits here,
   sees no effect, and loses an hour.

   Zero rendering change: these were byte-identical in 9 of the 11 files, and
   identical in all 11 once cookies.css and privacy.css stopped faking the
   .container wrapper their markup was missing (they baked max-width/margin/
   padding in here instead; the markup now has the wrapper, so the fake is gone).
   Keeping them out of the per-page files also means nobody can re-introduce
   that hack. */
.footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }

.footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--divider); display: flex; justify-content: space-between; align-items: center; }

/* The footer legal row. Promoted here because the footer markup is generated
   for all 33 pages, but these rules were not: the base rule sat in all 11
   per-page stylesheets (cookies.css and privacy.css omitting the transition),
   and the :hover lived ONLY in content.css -- which the three legal pages do
   not load. So Impressum / Privacy / Cookies / Cookie Settings silently had no
   hover feedback on 9 of the 33 pages. */
.footer-bottom .footer-legal a { font-size: 13px; color: var(--bark-muted); transition: color 0.2s; }

.footer-bottom .footer-legal a:hover { color: var(--bark); }

/* The "A product by Sarix" credit is the only outbound link on the site, and
   it is now generated on all 33 pages instead of 6 (it used to carry these two
   declarations as an inline style attribute). The `a` reset above is why the
   underline has to be re-declared at all; .footer-bottom p a wins on
   specificity, so no !important is needed. */
.footer-bottom p a { color: var(--bark-muted); text-decoration: underline; }

/* Mobile menu: the current page. This markup existed only on the three
   integrations pages and was never styled anywhere. Matches .nav-links a.active
   minus the border -- in the mobile menu that border-bottom is the full-width
   row divider, and colouring it green reads as a rendering bug. */
.nav-mobile-menu a.active { color: var(--forest); font-weight: 600; }

@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-mobile-toggle { display: block; }
}

@media (max-width: 600px) {
  .nav-logo { font-size: 20px; }
  .nav-mobile-toggle { margin-left: 8px; padding: 8px 4px; }
  .container { padding: 0 20px; }
  .container-narrow { padding: 0 20px; }
}

@media (max-width: 1000px) {
  .nav-right { display: none; }
  .lang-dropdown { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .nav-inner { justify-content: space-between; }
  .section { padding: 60px 0; }
}

@media (max-width: 600px) {
  .footer-bottom .footer-legal { justify-content: center; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .nav-inner { padding: 0 16px; gap: 8px; }
  /* .nav .btn outranks the .btn rule below (two classes vs one), which is what
     keeps the header CTA from going full-width on phones. */
  .nav .btn { width: auto; padding: 9px 16px; font-size: 13px; white-space: nowrap; }
  .btn { width: 100%; text-align: center; }
  .btn-group { flex-direction: column; align-items: center; }
}

.nav-mobile-menu a:hover { color: var(--bark); }

.nav-mobile-menu .btn { width: 100%; margin-top: 16px; text-align: center; color: #FFFFFF !important; display: flex; justify-content: center; }