/* ==========================================================
   ALPINE GRID STUDIOS — LAUNCH RESPONSIVE STABILITY LAYER
   Purpose: typography/spacing/navbar consistency only.
   Existing visual design, colors, cards, sections and effects
   remain unchanged.
   ========================================================== */

:root {
  --ags-page-gutter: clamp(18px, 3vw, 38px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Reliable side breathing room on every content width. */
.container {
  width: min(var(--container, 1180px), calc(100% - (2 * var(--ags-page-gutter)))) !important;
  max-width: var(--container, 1180px);
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The floating navbar owns its own inner padding; do not double-gutter it. */
.topbar .nav.container {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep normal words intact. Long headings wrap only at natural spaces/hyphens. */
h1, h2, h3, h4, h5, h6,
.section-title,
.section-subtitle,
.hero-copy,
.page-hero,
.card,
.problem-card,
.solution-card,
.story-card,
.value-card,
.process-card,
.trust-card,
.price-card,
.case-card,
.service-row,
.form-card,
.metric,
.btn,
.nav-links a,
.mobile-links a {
  min-width: 0;
  max-width: 100%;
  word-break: normal !important;
  overflow-wrap: normal !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
}

/* Paragraph copy remains safe for rare long tokens/URLs without forcing ordinary words apart. */
p, li, blockquote, .footer-copy, .legal-content {
  word-break: normal;
  overflow-wrap: break-word;
}

/* Prevent clipping caused by font ascenders/descenders on Safari. */
h1, h2, h3, .section-title, .hero-copy h1, .page-hero h1 {
  padding-top: 0.02em;
  padding-bottom: 0.04em;
}

/* Specific user-requested line: fully white, including previously purple spans. */
body[data-page="pricing"] .service-builder-intro .section-title[data-lang="de"],
body[data-page="pricing"] .service-builder-intro .section-title[data-lang="de"] span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  background-image: none !important;
  text-shadow: none !important;
}

/* ===== Desktop navbar: compact, single-line and identical across pages ===== */
@media (min-width: 1181px) {
  .topbar .nav {
    display: grid !important;
    grid-template-columns: clamp(145px, 14vw, 190px) minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: clamp(10px, 1.1vw, 18px) !important;
    padding-left: clamp(14px, 1.7vw, 22px) !important;
    padding-right: clamp(14px, 1.7vw, 22px) !important;
  }

  .topbar .brand {
    justify-self: start !important;
    min-width: 0 !important;
  }

  .topbar .brand-logo {
    height: clamp(42px, 3.7vw, 50px) !important;
    width: auto !important;
    max-width: 170px !important;
  }

  .topbar .nav-links {
    display: flex !important;
    justify-self: center !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: clamp(7px, 0.72vw, 11px) !important;
    min-width: 0 !important;
  }

  .topbar .nav-links li {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  .topbar .nav-links a,
  .topbar .nav-links a:not([data-nav="book"]) {
    min-height: 42px !important;
    padding: 8px 0 !important;
    font-size: clamp(11.4px, 0.88vw, 13px) !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    letter-spacing: -0.012em !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  .topbar .nav-links a[data-nav="book"],
  .topbar .nav-links a[data-nav="book"]:hover,
  body[data-page="book"] .topbar .nav-links a[data-nav="book"],
  body[data-page="book"] .topbar .nav-links a[data-nav="book"]:hover {
    min-width: 132px !important;
    width: auto !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    font-size: clamp(11.4px, 0.88vw, 13px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .topbar .nav-actions {
    justify-self: end !important;
    gap: 7px !important;
    min-width: max-content !important;
  }

  .topbar .nav-actions .lang-switch {
    display: inline-flex !important;
    gap: 5px !important;
  }

  .topbar .lang-switch button {
    min-width: 39px !important;
    min-height: 39px !important;
    padding: 7px 9px !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
  }

  .topbar .nav-toggle {
    display: none !important;
  }
}

/* ===== iPad / small laptop / phone: switch before desktop links can collide ===== */
@media (max-width: 1180px) {
  .topbar .nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-left: clamp(14px, 2.5vw, 22px) !important;
    padding-right: clamp(14px, 2.5vw, 22px) !important;
  }

  .topbar .nav-links {
    display: none !important;
  }

  .topbar .nav-toggle {
    display: inline-flex !important;
    flex: 0 0 auto !important;
  }

  .topbar .nav-actions .lang-switch {
    display: none !important;
  }

  .topbar .brand-logo {
    height: clamp(42px, 6vw, 48px) !important;
    width: auto !important;
    max-width: min(46vw, 180px) !important;
  }

  .mobile-panel {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100dvh - var(--nav-h, 76px) - 28px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-panel .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .mobile-links a {
    font-size: clamp(14px, 2.2vw, 16px) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 680px) {
  :root {
    --ags-page-gutter: clamp(16px, 4.8vw, 22px);
  }

  .topbar {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
  }

  .topbar .nav {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .topbar .brand-logo {
    height: 40px !important;
    max-width: min(49vw, 155px) !important;
  }

  .topbar .nav-toggle {
    width: 44px !important;
    height: 42px !important;
    min-width: 44px !important;
    min-height: 42px !important;
  }

  .mobile-panel {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    padding: 14px !important;
  }

  .mobile-links {
    gap: 8px !important;
  }

  .mobile-links a {
    min-height: 46px !important;
    padding: 12px 13px !important;
    font-size: 14px !important;
  }

  .mobile-panel .lang-switch {
    margin-top: 12px !important;
  }

  /* Keep common headings readable and safely inside narrow iPhones. */
  .page-hero h1,
  .section-title,
  .hero-copy h1 {
    max-width: 100% !important;
  }

  .btn,
  .hero-actions .btn,
  .inline-actions .btn {
    white-space: normal !important;
    text-align: center;
    line-height: 1.22 !important;
  }
}

/* Landscape iPhone/iPad safe-area support without changing desktop composition. */
@supports (padding-left: max(0px)) {
  @media (max-width: 1180px) {
    .mobile-panel {
      padding-left: max(16px, env(safe-area-inset-left)) !important;
      padding-right: max(16px, env(safe-area-inset-right)) !important;
    }
  }
}

/* Remove legacy forced mid-word splitting from the Home metrics. */
body[data-page="home"] .hero-video-section .metric strong,
body[data-page="home"] .hero-video-section .metric strong > span[data-lang] {
  word-break: normal !important;
  overflow-wrap: normal !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
}