/* AutoRudeExpress — Sprint 2 inner-page components.
   New rules only for patterns the single-page static site never needed
   (breadcrumbs, inner-page hero, nav dropdown). Everything else (cards,
   FAQ accordion, trust list, CTA sections) intentionally reuses the exact
   classes already defined in assets/css/style.css — the byte-identical
   mirror of Website/assets/css/style.css — so inner pages stay visually
   consistent with the homepage rather than introducing a second system. */

/* --- Extend the mobile hamburger nav up through the "tablet" band
   (768-1029px). Even after the Sprint 3 header redesign lightened the row
   (removed the phone number, "Forside", and "FAQ"), the row as a whole
   technically stops *overflowing* around ~830px — but individual nav
   links and the CTA button start silently *wrapping onto two lines*
   before that, which is worse (this was the original crowding complaint:
   "Få et tilbud" wrapping). Measured precisely with a live rendered
   button-height probe: wrapped (82px tall = 2 lines) at every width up to
   1020px, single-line (57px) from 1030px on — so 1029px is the real
   danger zone, not the ~830px where the row merely stops overflowing.
   Reuses the same, already-tested mobile nav/hamburger pattern from
   style.css for that whole range rather than designing anything new — the
   header CTA button (shown at 768px+, see below) still gives a visible
   quote CTA throughout. See also the white-space: nowrap rules further
   below, which stop nav text/CTA text from ever wrapping again as a
   second line of defense. */
@media (min-width: 768px) and (max-width: 1029px) {
  .site-nav,
  .phone-link {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }
}

/* --- Never let nav links or the header CTA silently wrap onto a second
   line — belt-and-suspenders alongside the breakpoint above. Desktop nav
   only ever renders at 1030px+ (see above), where there is always room
   for this on one line; if that ever changes, wrapped text is a much
   worse failure mode than a horizontal scrollbar would be, and either is
   a sign the breakpoint above needs revisiting. */
.site-nav a,
.header-actions .btn {
  white-space: nowrap;
}

/* --- Footer navigation groups (Sprint 2) --- */
@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

.footer-nav-group h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
}

.footer-nav-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.footer-nav-group a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-nav-group a:hover,
.footer-nav-group a:focus-visible {
  color: var(--color-accent-green);
}

/* --- Prevent legal/content-page tables (privacy & cookie policy processor/
   cookie tables) from forcing page-wide horizontal scroll on narrow
   viewports. `.legal-content table` already has `width: 100%` in
   style.css, but browsers still grow a table beyond that when its cells'
   content can't wrap, so the fix is a scoped scroll container around the
   content block itself rather than touching table markup or style.css. */
.legal-content {
  overflow-x: auto;
}

/* --- Header CTA button: hidden on mobile now that the language switcher
   below adds extra width to the header-actions row. Without this, the row
   (brand + lang switcher + "Get a quote" + hamburger) overflows the
   viewport at phone widths (verified: causes site-wide horizontal scroll
   below ~420px). The sticky mobile CTA bar at the bottom of the screen
   already duplicates this button on mobile, so hiding it here costs
   nothing functionally — matches the existing .phone-link mobile-hide
   pattern in style.css exactly. */
.header-actions .btn {
  display: none;
}

@media (min-width: 768px) {
  .header-actions .btn {
    display: inline-flex;
  }
}

/* --- Language switcher (DA | EN) --- */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.lang-switcher a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 600;
}

.lang-switcher a.is-active {
  color: var(--color-accent-green);
}

.lang-switcher a:hover,
.lang-switcher a:focus-visible {
  color: var(--color-text-primary);
}

.mobile-lang-switcher {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* --- Related-guides block (appears at the end of some content pages) --- */
.related-guides-block {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.related-guides-block ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

/* --- Breadcrumbs --- */
.breadcrumbs {
  padding-top: var(--space-5);
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  color: var(--color-text-secondary);
  opacity: 0.5;
}

.breadcrumbs a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--color-accent-green);
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-text-primary);
}

/* --- Inner-page hero --- */
.page-hero {
  padding-block: var(--space-6) var(--space-5);
}

.page-hero h1 {
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  max-width: 42ch;
}

.page-hero .page-hero-intro {
  max-width: 65ch;
  color: var(--color-text-secondary);
  font-size: 1.05rem;
}

.page-hero .hero-ctas {
  margin-top: var(--space-4);
}

/* --- Content typography inside .legal-content-styled body copy --- */
.page-content h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin-top: var(--space-7);
}

.page-content h3 {
  font-size: 1.15rem;
  margin-top: var(--space-5);
}

.page-content p,
.page-content li {
  color: var(--color-text-secondary);
}

.page-content ul,
.page-content ol {
  padding-left: 1.2em;
}

.page-content strong {
  color: var(--color-text-primary);
}

/* --- Primary nav dropdown ("Ydelser") --- */
.site-nav ul {
  display: flex;
  align-items: center;
}

.site-nav li.menu-item-has-children {
  position: relative;
}

.site-nav .submenu-toggle {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}

.site-nav .submenu-toggle .chevron {
  transition: transform 0.15s ease;
}

.site-nav li.menu-item-has-children.is-open > .submenu-toggle .chevron,
.site-nav li.menu-item-has-children:hover > .submenu-toggle .chevron {
  transform: rotate(180deg);
}

.site-nav .sub-menu {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  display: none;
  z-index: 50;
}

.site-nav li.menu-item-has-children:hover > .sub-menu,
.site-nav li.menu-item-has-children.is-open > .sub-menu {
  display: block;
}

.site-nav .sub-menu li {
  display: block;
}

.site-nav .sub-menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.site-nav .sub-menu a:hover {
  background: var(--color-bg-surface-alt);
  text-decoration: none;
}

/* --- Mobile nav submenu (expandable, not hover-based) --- */
.mobile-nav .submenu-toggle {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin-left: var(--space-2);
}

.mobile-nav .sub-menu {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
  display: none;
}

.mobile-nav li.menu-item-has-children.is-open .sub-menu {
  display: block;
}

.mobile-nav li.menu-item-has-children.is-open .submenu-toggle .chevron {
  transform: rotate(180deg);
}