/* =================================================================
   Sacred Valley Tech – Design Token System & Brand Override Layer
   Loaded AFTER nicepage.css so these rules take precedence.
   ================================================================= */

/* ── 1. CSS Custom Properties ──────────────────────────────────── */
:root {
  /* Brand colour palette */
  --color-primary:      #153f59;   /* Navy – main CTA, nav, headings  */
  --color-primary-dark: #0e2d40;   /* Hover/active state of primary   */
  --color-accent:       #32bea6;   /* Teal – icons, focus rings, links */
  --color-surface:      #f5f5f7;   /* Light background                */
  --color-text:         #1d1d1f;   /* Near-black body text            */
  --color-text-muted:   #6e6e73;   /* Secondary / helper text         */
  --color-text-light:   #a1a1a6;   /* Placeholders                    */

  /* Brand gradient (blue-green; used for section backgrounds only) */
  --gradient-brand: linear-gradient(145deg, rgba(144, 180, 228, 0.86), rgba(184, 217, 205, 0.86));

  /* Border-radius scale */
  --radius-pill:  50px;   /* CTA / nav pill buttons  */
  --radius-card:  20px;   /* Cards, map, containers  */
  --radius-input: 10px;   /* Form fields             */
  --radius-sm:     8px;   /* Small elements / badges */
  --radius-xs:     6px;   /* Tiny chrome             */

  /* ── Typography ─────────────────────────────────────────────────
     Two-system approach:
       Corporate (all pages): Saira headings + Work Sans body
       Consumer/Sally:        Plus Jakarta Sans throughout
     ─────────────────────────────────────────────────────────────── */
  --font-display:  "Saira", sans-serif;
  --font-body:     "Work Sans", sans-serif;
  --font-consumer: "Plus Jakarta Sans", sans-serif;

  /* Type scale – use clamp() for fluid sizing without media queries */
  --text-hero:    clamp(2.5rem,  5vw,  4.375rem);  /* 40–70px  */
  --text-h1:      clamp(1.875rem, 3.5vw, 3.125rem); /* 30–50px  */
  --text-h2:      clamp(1.5rem,  2.5vw, 2.1875rem); /* 24–35px  */
  --text-h3:      clamp(1.125rem, 2vw,  1.5625rem); /* 18–25px  */
  --text-body-lg: 1.25rem;   /* 20px – lead paragraphs           */
  --text-body:    1rem;      /* 16px – standard body             */
  --text-small:   0.875rem;  /* 14px – captions, labels          */

  /* Line heights */
  --leading-heading: 1.2;
  --leading-body:    1.65;
}

/* ── 2. Global Base Typography ──────────────────────────────────
   Sets corporate font system site-wide. Sally.css overrides body
   with --font-consumer for the consumer product pages.
   ─────────────────────────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  line-height: var(--leading-body);
}

/* ── 3. Link & Hover Colour Fix ─────────────────────────────────
   Overrides nicepage.css defaults: a {color:#259bca} / :hover {color:#0676a4}
   Visited links must NOT fall back to browser-default purple.
   ─────────────────────────────────────────────────────────────── */
a {
  color: var(--color-primary);
}
a:hover {
  color: var(--color-accent);
}
a:visited {
  color: var(--color-primary);
}

/* Nav, social, and language-switcher links keep their inherited colour */
.u-nav-link,
.u-nav-link:hover,
.u-nav-link:visited,
.u-social-url,
.u-social-url:hover,
.u-language-url,
.u-language-url:hover {
  color: inherit !important;
}

/* Inline body-copy links (e.g. privacy notice, GDPR text) */
.u-text a,
.fr-view a {
  color: var(--color-accent) !important;
  text-decoration: underline;
}
.u-text a:hover,
.fr-view a:hover {
  color: var(--color-primary) !important;
}

/* ── 4. Unify Custom Color 6 → Brand Navy ───────────────────────
   Replaces the one-off #007aff (iOS blue) with the brand navy
   so ALL filled buttons share a single palette.
   ─────────────────────────────────────────────────────────────── */
.u-custom-color-6,
.u-body.u-custom-color-6,
section.u-custom-color-6::before,
.u-custom-color-6 > .u-audio-main-layout-wrapper::before,
.u-custom-color-6 > .u-container-layout::before,
.u-custom-color-6 > .u-inner-container-layout::before,
.u-custom-color-6.u-sidenav::before,
.u-container-layout.u-container-layout.u-custom-color-6::before,
.u-table-alt-custom-color-6 tr:nth-child(even) {
  color: #ffffff;
  background-color: var(--color-primary) !important;
}

.u-input.u-custom-color-6,
.u-field-input.u-custom-color-6,
.u-button-style.u-custom-color-6,
.u-button-style.u-custom-color-6[class*="u-border-"] {
  color: #ffffff !important;
  background-color: var(--color-primary) !important;
}

.u-button-style.u-custom-color-6:hover,
.u-button-style.u-custom-color-6[class*="u-border-"]:hover,
.u-button-style.u-custom-color-6:focus,
.u-button-style.u-custom-color-6[class*="u-border-"]:focus,
.u-button-style.u-button-style.u-custom-color-6:active,
.u-button-style.u-button-style.u-custom-color-6[class*="u-border-"]:active,
.u-button-style.u-button-style.u-custom-color-6.active,
.u-button-style.u-button-style.u-custom-color-6[class*="u-border-"].active,
li.active > .u-button-style.u-button-style.u-custom-color-6,
li.active > .u-button-style.u-button-style.u-custom-color-6[class*="u-border-"] {
  color: #ffffff !important;
  background-color: var(--color-primary-dark) !important;
}

/* hover utility class */
.u-hover-custom-color-6:hover,
.u-hover-custom-color-6[class*="u-border-"]:hover,
.u-hover-custom-color-6:focus,
a.u-button-style.u-hover-custom-color-6:hover,
a.u-button-style.u-hover-custom-color-6:focus {
  color: #ffffff !important;
  background-color: var(--color-primary-dark) !important;
}

/* active utility class */
.u-active-custom-color-6.u-active.u-active,
a.u-button-style.u-button-style.u-active-custom-color-6:active,
a.u-button-style.u-button-style.u-active-custom-color-6.active {
  color: #ffffff !important;
  background-color: var(--color-primary-dark) !important;
}

/* ── 4. Unified Button System ───────────────────────────────────
   Three variants:  Primary (filled navy)  ·  Secondary (outlined)  ·  Ghost (text + arrow)
   All share: pill radius, Work Sans, 500-weight.
   ─────────────────────────────────────────────────────────────── */

/* --- Base for all nicepage CTA buttons --- */
.u-btn.u-button-style,
.u-button-style.u-btn {
  font-family: "Work Sans", sans-serif !important;
  font-weight: 500 !important;
  border-radius: var(--radius-pill) !important;
  letter-spacing: 0.01em;
}

/* --- Primary variant (u-custom-color-3 – navy) --- */
.u-button-style.u-custom-color-3 {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border-radius: var(--radius-pill) !important;
}
.u-button-style.u-custom-color-3:hover,
.u-button-style.u-custom-color-3:focus {
  background-color: var(--color-primary-dark) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(21, 63, 89, 0.25);
}

/* --- Secondary variant (.btn-secondary) --- */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  background: transparent;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  font-family: "Work Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none !important;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--color-primary);
  color: #ffffff !important;
}

/* --- Ghost variant (.btn-ghost) --- */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  background: transparent;
  color: var(--color-primary) !important;
  border: none;
  font-family: "Work Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none !important;
  cursor: pointer;
}
.btn-ghost::after {
  content: "→";
}
.btn-ghost:hover::after {
  transform: translateX(3px);
}
.btn-ghost:hover {
  color: var(--color-accent) !important;
}

/* --- Contact form submit button aligns to tokens --- */
.kontakt-submit {
  background: var(--color-primary) !important;
  border-radius: var(--radius-input) !important;
}
.kontakt-submit:hover {
  background: var(--color-primary-dark) !important;
}

/* Form input focus uses accent teal */
.kontakt-input:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(50, 190, 166, 0.15) !important;
}

/* ── 5. Border-Radius Token Application ─────────────────────────
   Cards, image frames, form elements, modals.
   ─────────────────────────────────────────────────────────────── */

/* Contact page card & map */
.kontakt-card     { border-radius: var(--radius-card)  !important; }
.kontakt-map-wrap { border-radius: var(--radius-card)  !important; }

/* Form inputs, textareas, selects */
.kontakt-input,
.u-field-input,
.u-form-group input,
.u-form-group textarea,
.u-form-group select {
  border-radius: var(--radius-input) !important;
}

/* Feature cards (index.html section-4 white cards) */
.u-section-4 .u-list-item {
  border-radius: var(--radius-card) !important;
  overflow: hidden;
}

/* Sally section layout cells */
.u-section-3 .u-layout-cell-1,
.u-section-3 .u-layout-cell-2 {
  border-radius: var(--radius-card) !important;
  overflow: hidden;
}

/* ── 6. Icon System Normalization ───────────────────────────────
   All icons use the same size container and consistent stroke style.
   Brand icons (.brand-icon) are stroke-based Lucide SVGs.
   ─────────────────────────────────────────────────────────────── */

/* Consistent icon container */
.u-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Brand icon (Lucide-style): stroke-based, no fill */
.brand-icon {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  overflow: visible;
}

/* Feature section icons */
.u-section-4 .u-icon {
  color: var(--color-primary);
  width: 48px !important;
  height: 48px !important;
}
.u-section-4 .u-icon svg {
  width: 100% !important;
  height: 100% !important;
}

/* Accent-coloured check icons */
.u-icon.u-icon-accent,
.u-icon[class*="u-text-custom-color-"] svg path[fill="#32bea6"],
.u-icon[class*="u-text-custom-color-"] svg ellipse {
  color: var(--color-accent);
}

/* ── 7. Partner & Supporter Logo Grid ───────────────────────────
   Scoped to #sec-a256 (homepage only).
   ─────────────────────────────────────────────────────────────── */

/* Section container */
#sec-a256 {
  background: #ffffff;
  padding: 64px 0 72px;
}

/* Sheet: constrain width, generous horizontal padding */
#sec-a256 .u-sheet-1 {
  min-height: 0 !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 0 56px !important;
  box-sizing: border-box !important;
}

/* Sub-section labels: small muted all-caps, not prominent headings */
#sec-a256 .u-text-1,
#sec-a256 .u-text-7,
#sec-a256 .u-text-8 {
  font-family: "Work Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #a1a1a6 !important;
  text-align: center !important;
  margin: 52px 0 0 !important;
}

/* First heading: no top margin */
#sec-a256 .u-text-1 {
  margin-top: 0 !important;
}

/* Logo list containers */
#sec-a256 .u-list-1,
#sec-a256 .u-list-2,
#sec-a256 .u-list-3,
#sec-a256 .u-list-4,
#sec-a256 .u-list-5 {
  width: 100% !important;
  height: auto !important;
  margin-top: 24px !important;
  margin-bottom: 0 !important;
}

/* Logo rows: spread evenly across full width */
#sec-a256 .u-repeater {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  gap: 0 !important;
  grid-template-columns: none !important;
  grid-auto-columns: unset !important;
  min-height: unset !important;
}

/* Each logo cell: fixed width so rows balance properly */
#sec-a256 .u-list-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 160px !important;
  min-height: unset !important;
  margin: 0 !important;
  padding: 20px 24px !important;
}

/* Inner cell layout */
#sec-a256 .u-container-layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  min-height: unset !important;
}

/* Logo images */
#sec-a256 .u-image {
  height: 44px !important;
  width: auto !important;
  max-width: 160px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  filter: grayscale(100%) !important;
  opacity: 0.55;
}

#sec-a256 .u-image:hover {
  filter: grayscale(0%) !important;
  opacity: 1;
}

/* Caption labels under logos */
#sec-a256 h5.u-text,
#sec-a256 .u-text-2,
#sec-a256 .u-text-3,
#sec-a256 .u-text-4,
#sec-a256 .u-text-5,
#sec-a256 .u-text-6 {
  font-family: "Work Sans", sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #c7c7cc !important;
  text-align: center !important;
  margin: 8px 0 0 !important;
  white-space: nowrap;
}

/* ── Mobile adjustments ──────────────────────────────────────────── */

@media (max-width: 767px) {
  #sec-a256 {
    padding: 48px 0 56px;
  }

  #sec-a256 .u-sheet-1 {
    padding: 0 32px !important;
  }

  #sec-a256 .u-text-1,
  #sec-a256 .u-text-7,
  #sec-a256 .u-text-8 {
    margin-top: 40px !important;
  }

  #sec-a256 .u-list-item {
    min-width: 120px !important;
    padding: 14px 16px !important;
  }

  #sec-a256 .u-image {
    height: 36px !important;
    max-width: 120px !important;
  }
}

@media (max-width: 575px) {
  #sec-a256 {
    padding: 40px 0 48px;
  }

  #sec-a256 .u-sheet-1 {
    padding: 0 20px !important;
  }

  #sec-a256 .u-list-item {
    min-width: 100px !important;
    padding: 12px 12px !important;
  }

  #sec-a256 .u-image {
    height: 32px !important;
    max-width: 100px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION — Sticky header
   ═══════════════════════════════════════════════════════════════════ */

/*
  background-color is safe on .u-header — it does NOT create a new
  containing block for position:fixed descendants (only filter,
  backdrop-filter, transform, and perspective do that).
  The offcanvas panel (.u-nav-container-collapse) uses position:fixed
  and must stay viewport-relative so it can cover the full screen.
*/
.u-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10) !important;
}

/* ─── Shared flex-row header layout (all viewports) ──────────────────
   Nicepage's default layout uses overlapping negative margins and a
   flex-column sheet — that approach breaks with position:sticky and
   produces inconsistent heights across pages. We replace it with a
   single flex-row pattern at every breakpoint so the bar is always
   exactly one height and never grows due to stacked content.
   ──────────────────────────────────────────────────────────────────── */

/* Desktop ≥ 992px — 72px bar */
@media (min-width: 992px) {
  .u-header .u-sheet-1 {
    min-height: 72px !important;
    height: 72px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    padding: 0 40px !important;
  }

  .u-header .u-image-1 {
    position: static !important;
    margin: 0 !important;
    width: 200px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    order: 1 !important;
  }

  .u-header .u-logo-image-1 {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Nav (+ CTA) pushed to the right */
  .u-header .u-menu-1 {
    position: static !important;
    margin: 0 0 0 auto !important;
    width: auto !important;
    flex-shrink: 0 !important;
    order: 2 !important;
  }

  /* DE|EN toggle sits after the nav */
  .u-header .u-language-1 {
    position: static !important;
    margin: 0 0 0 24px !important;
    order: 3 !important;
    align-items: center !important;
  }
}

/* Tablet 768–991px — 60px bar, hamburger menu */
@media (max-width: 991px) {
  .u-header .u-sheet-1 {
    min-height: 60px !important;
    height: 60px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    padding: 0 20px !important;
  }

  .u-header .u-image-1 {
    position: static !important;
    margin: 0 !important;
    width: 160px !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }

  .u-header .u-logo-image-1 {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Nav pushed to right edge, negative margins cleared */
  .u-header .u-menu-1 {
    position: static !important;
    margin: 0 0 0 auto !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }

  /* Language toggle hidden on mobile — too cramped */
  .u-header .u-language-1 {
    display: none !important;
  }

  /* Hamburger button — 44×44px touch target (WCAG 2.5.5) */
  .u-header .u-hamburger-link {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: var(--color-primary, #153f59) !important;
  }

  .u-header .u-hamburger-link svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
  }
}

/* Small mobile ≤ 575px — 56px bar */
@media (max-width: 575px) {
  .u-header .u-sheet-1 {
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 16px !important;
  }

  .u-header .u-image-1 {
    width: 136px !important;
  }
}

/* ─── Mobile sidenav (offcanvas drawer) ───────────────────────────── */

@media (max-width: 991px) {
  /* Wider drawer — 250px is tight on modern phones.
     flex-basis: !important is safe (no open-state rule overrides it).
     margin-left must NOT use !important — the open state rule
     (.u-menu.u-offcanvas.open .u-sidenav { margin-left: 0 }) has no
     !important, so our !important would permanently block it. */
  .u-offcanvas .u-sidenav {
    flex-basis: 280px !important;
  }
  .u-offcanvas:not(.u-menu-open-right) .u-sidenav {
    margin-left: -280px;
  }

  /* Close (×) button — 44×44px touch target */
  .u-menu-close {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 16px 12px 0 auto !important;
    cursor: pointer !important;
  }

  .u-menu-close::before {
    font-size: 22px !important;
    line-height: 1 !important;
  }

  /* Nav list — full-width, top spacing */
  .u-sidenav .u-popupmenu-items {
    margin-top: 8px !important;
    width: 100% !important;
    display: block !important;
  }

  /* Each nav item — block, full width */
  .u-sidenav .u-nav-item {
    display: block !important;
    width: 100% !important;
  }

  /* Nav links — 52px touch target, centered text */
  .u-sidenav .u-nav-link {
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-body, "Work Sans", sans-serif) !important;
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    padding: 0 24px !important;
  }

  .u-sidenav .u-nav-link:hover,
  .u-sidenav .u-nav-link:focus {
    color: var(--color-accent, #32bea6) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION — Language toggle (DE | EN text, no flags)
   ═══════════════════════════════════════════════════════════════════ */

.u-language-icon {
  display: none !important;
}

.u-language-url {
  font-family: var(--font-body, "Work Sans", sans-serif) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--color-primary, #153f59) !important;
  text-decoration: none !important;
  opacity: 0.45;
  padding: 2px 0 !important;
}

.u-language-url:hover {
  opacity: 1 !important;
  color: var(--color-primary, #153f59) !important;
}

.u-language-url[data-language="de"]::after {
  content: "DE";
}

.u-language-url[data-language="en"]::after {
  content: "EN";
}

/* Show language toggle on tablet as well (text is compact enough) */
@media (min-width: 768px) {
  .u-language-1 {
    display: flex !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION — Waitlist CTA button (desktop only)
   ═══════════════════════════════════════════════════════════════════ */

.u-nav-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 9px 22px !important;
  background: var(--color-primary, #153f59) !important;
  color: #ffffff !important;
  border-radius: var(--radius-pill, 999px) !important;
  font-family: var(--font-body, "Work Sans", sans-serif) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  margin-left: 20px !important;
}

.u-nav-cta-btn:hover {
  background: var(--color-accent, #32bea6) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* Hidden on tablet/mobile — hamburger drawer handles navigation */
@media (max-width: 991px) {
  .u-nav-cta-btn {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   NO ANIMATIONS — kill all transitions and keyframe animations
   Overrides nicepage.css and any inline styles site-wide.
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INLINE SVG ICONS — unified style via currentColor
   ═══════════════════════════════════════════════════════════════════ */

/* Match the sizing behaviour Nicepage applied to .u-file-icon img */
.u-file-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  /* Default brand-green stroke for all icon contexts */
  color: #2d6a4f;
}