/* =====================================================
   BASE.CSS (FOUNDATION / GLOBAL DEFAULTS)
   -----------------------------------------------------
   PURPOSE:
   - Global reset + baseline styling
   - Typography system
   - Design tokens (CSS variables)
   - Default element behavior
   -----------------------------------------------------
   RULES:
   - No layout systems (grid/flex containers)
   - No components (buttons/cards/nav)
   - No page-specific styling
===================================================== */


/* =========================
   RESET / FOUNDATION
========================= */

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

html,
body {
  margin: 0;
  padding: 0;
}


/* =========================
   DESIGN TOKENS
========================= */

:root {
  --logo-sm: 125px;
  --logo-md: 175px;
  --logo-lg: 225px;
  --logo-xl: 300px;
}


/* =========================
   BASE TYPOGRAPHY
========================= */

body {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #222;
}

h1, h2, h3, h4, h5, h6,
p,
ul, ol {
  margin: 0;
}

h1 {
  font-size: clamp(1.3rem, 1.4vw, 1.9rem);
  font-weight: 600;
}

h2 {
  font-size: clamp(1.2rem, 1.3vw, 1.5rem);
  font-weight: 600;
}

h3 {
  font-size: clamp(1.1rem, 1.2vw, 1.3rem);
  font-weight: 500;
}

h4 {
  font-size: 1.2rem;
  font-weight: 500;
}

p {
  margin: 0 0 16px 0;
  font-size: 1rem;
  color: #000;
}
p + p {
  margin-top: var(--space-4);
}

h2 {
  margin-bottom: var(--space-4);
}

h3 {
  margin-bottom: var(--space-3);
}

ul {
  margin-top: var(--space-3);
}
.content-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}


/* =========================
   RESPONSIVE TYPOGRAPHY
========================= */

@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  h1 {
    font-size: 1.6rem;
  }

  h2 {
    font-size: 1.3rem;
  }
}


/* =========================
   IMAGE DEFAULTS
========================= */

img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* =========================
   TYPOGRAPHY UTILITIES
   (safe global helpers only)
========================= */

.text80  { font-size: 0.8rem; }
.text90  { font-size: 0.9rem; }
.text110 { font-size: 1.1rem; }



/* =========================
   ESTIMATOR TAB STATE
   (global UI state only)
========================= */

.estimator-tab {
  display: none;
}

.estimator-tab.is-active {
  display: block;
}


/* =========================
   FORM / INPUT BASE ELEMENTS
========================= */

.guest-slider,
#guestCount {
  width: 100%;
  margin: 12px 0;
  height: 12px;
  border-radius: 6px;
  accent-color: #d4af37;
}

.guest-display-package,
#guestNumber {
  display: inline-block;
  margin-top: 5px;
  font-weight: bold;
}

.styled-select {
  min-height: 120px;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
}