// =============================================================================
// SAFARI LODGES — OPTION 2 UPDATED — Main stylesheet
// Load order: reset → base → Bootstrap → typo3-spacing → components
// All use rules must precede any CSS output or import statements.
// =============================================================================

// ── 1. Internal partials (no CSS output — only variables / mixins / functions)
@import 'tokens';
@import 'reset';
@import 'base';
@import 'typo3-spacing';
@import 'backgrounds';

// ── 2. Components (each @use their own deps internally)
@import 'components/sections';
@import 'components/buttons';
@import 'components/header';
@import 'components/hero';
@import 'components/tab-component-2';
@import 'components/image-and-content';
@import 'components/image-text-banner';
@import 'components/image-slider-banner';
@import 'components/full-width-video';
@import 'components/gallery';
@import 'components/testimonials';
@import 'components/news-slider';
@import 'components/news-content-intro';
@import 'components/news-list-view';
@import 'components/newsletter-form';
@import 'components/footer';
@import 'components/component-label';
@import 'components/content-only-intro';
@import 'components/tab-component';
@import 'components/timeline';
@import 'components/accordion';
@import 'components/form-field';                 // extracted from drawer
@import 'components/form-layout';               // extracted from drawer
@import 'components/form-formframework';        // styles the real TYPO3 Form Framework output
@import 'components/info-card';                 // extracted from drawer
@import 'components/booking-cards';             // extracted from drawer, reusable anywhere
@import 'components/drawer';
@import 'components/drawer-lodge';              // lodge-specific drawer content
@import 'components/menu-overlay';
@import 'components/field-error';               // generic JS-driven validation feedback — import last to win cascade ties
@import 'components/mailchimp';                 // theme override for the raw-HTML Mailchimp embed (#mc_embed_shell)

// Add a breakpoint tier beyond Bootstrap's default xxl (1400px) for very
// wide/4K screens — .container stays capped at 1200px all the way up
// through xxl otherwise, which is correct for the 1200-1400px range but
// leaves a large unused margin on 1920px+ screens (see $container-max-widths
// below). All default tiers are unchanged; this only appends xxxl.
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  xxxl: 1920px
);

// Bootstrap container max-widths — collapse to the design's single
// container-max token (1200px) instead of Bootstrap's stepped xl/xxl scale,
// so `.container` matches the width every component was measured against.
// xxxl (1920px+ screens) is the one exception: widen .container to use the
// extra space up to 1800px — not the full 1920px breakpoint width, so there's
// still a deliberate 60px gutter on each side at exactly 1920px, rather than
// content running full-bleed edge-to-edge.
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
  xxl: 1201px, // effectively 1200px; kept 1px above xl to satisfy Bootstrap's ascending-map check
  xxxl: 1800px
);

// Bootstrap sets `--bs-gutter-x` directly on `.container`/`.container-fluid`
// themselves, so a later `:root` override can't win (inheritance never
// applies once a rule sets the property on the element itself) — the gutter
// must be zeroed at the Sass-variable level, before compilation. Every
// component already carries its own precise horizontal padding measured
// from Figma, and Bootstrap's grid (.row/.col-*) is not used in this
// codebase, so zeroing the gutter globally is safe.
$grid-gutter-width: 0;

// ── 3. Bootstrap — placed after @import block; silenced via vite config
@import 'bootstrap/scss/bootstrap';

// ── 3a. Global scrollbar theme — after Bootstrap so it isn't overridden by
//        reboot/utilities; still loses specificity ties to any component's
//        own more-specific rule, so a component can still opt out.
@import 'scrollbar';

// ── 3b. .container owns the single horizontal inset — 16px below desktop,
//        0 once the container's own max-width (1200px, xl tier above) starts
//        producing a bigger gutter via auto margins than the 16px padding
//        would anyway — see below for why that's 1232px, not 1200px.
//        Components no longer add their own horizontal padding when wrapped
//        in .container (see components/*.scss). .container-fluid stays
//        flush (full-bleed) — full-bleed components keep their own padding.
//
// The cutover is 1232px, not the 1200px xl breakpoint itself, because our
// own $container-max-widths sets xl's cap (1200px) equal to its own trigger
// width (1200px) — unlike Bootstrap's defaults, which always leave a buffer
// (540<576, 720<768, 960<992) guaranteeing some margin-driven gutter the
// moment each tier activates. With cap==trigger, the auto-margin gutter is
// mathematically 0 at exactly 1200px viewport width, then grows linearly
// (1px at 1201px, 25px at 1250px...) — and if padding zeroed out at that same
// 1200px point, the total inset would collapse to 0 right where the margin
// gutter is at its worst. 1232px is where (viewport − 1200) / 2 first
// reaches 16px on its own — i.e. where the margin gutter has grown enough to
// match the padding it's replacing — so the total inset never drops below
// 16px anywhere, instead of dipping to 0 across the ~1200–1232px window.
.container {
  // Token collision: the React booking widget (mounted on every page) injects
  // its own global `:root { --space-4: 0.25rem; ... }` at runtime — unscoped,
  // and using a *value-named* convention (its --space-4 literally means 4px)
  // completely different from this theme's *step-indexed* one (this theme's
  // --space-4 means "step 4" = 16px). Injected after this stylesheet, it
  // silently wins, so .container's own gutter — the single most-used spacing
  // value on the site — was rendering at 4px instead of 16px on every page.
  // Literal value used here instead of the token until the collision is
  // fixed at its source (see _mailchimp.scss for the fuller writeup and the
  // rest of the affected token list).
  padding-inline: 1rem;   // 16px (literal — see collision note above)

  @media (min-width: 77rem) {       // 1232px — see comment above
    padding-inline: 0;
  }
}

// ── 4. Post-Bootstrap overrides — restore design-token values that Bootstrap
//       resets via its own :root / body declarations (last-writer-wins cascade)
body {
  background-color: var(--color-pampas);
  color: var(--color-text-primary);
}

// Global typography foundation (h1–h6, p, lists, links, .eyebrow/.caption) —
// must load after Bootstrap so its bare-tag heading/paragraph rules win the
// cascade over Bootstrap reboot's own h1–h6 defaults (same reason as .btn
// below).
@import 'typography';

// Reserve bottom space for the fixed mobile nav bar (63px) so page content
// never sits underneath it.
@media (max-width: 47.9375rem) {
  body {
    padding-bottom: 3.9375rem;   // 63px mobile nav bar
  }
}

// Bootstrap's .btn rule (imported above) wins the cascade over components/_buttons.scss,
// resetting padding to 6px/12px. Restore the v2 design padding: px-18 py-12.
.btn {
  --bs-btn-padding-x: 1.125rem;  // 18px — v2 button spec: px-18 py-12
  --bs-btn-padding-y: 0.75rem;   // 12px
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
}