/**
 * ============================================================================
 * layout.css — Page-Level Layout and Container Styles
 * ============================================================================
 *
 * PURPOSE:
 *   Defines the structural layout primitives used across all pages:
 *   the content container, page-level grid, and responsive adjustments.
 *   No component-specific styles — those live in css/components/.
 *
 * ARCHITECTURE:
 *   Loaded AFTER base.css. Provides layout classes used by templates
 *   (base.njk, calculator.njk) to structure page content.
 *
 * DEPENDS ON:
 *   - tokens.css (spacing, max-width, breakpoint values)
 *
 * ============================================================================
 */


/* ==========================================================================
 * CONTAINER
 * ==========================================================================
 * Centered content wrapper with max-width. Used on every page.
 * Padding provides breathing room on mobile. Max-width keeps lines
 * readable on wide screens.
 * ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

/* Wider container variant — for pages needing more horizontal space
   (e.g. savings comparison with side-by-side tables) */
.container--wide {
  max-width: var(--max-width-wide);
}


/* ==========================================================================
 * PAGE LAYOUT
 * ==========================================================================
 * The main page structure: header, main content, footer.
 * Uses min-height: 100vh on the page wrapper to ensure the footer
 * stays at the bottom even on short-content pages.
 * ========================================================================== */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Main content area grows to fill available space (pushes footer down) */
.page__main {
  flex: 1;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-3xl);
}


/* ==========================================================================
 * CALCULATOR PAGE LAYOUT
 * ==========================================================================
 * Two-zone layout specific to calculator pages:
 *
 * ZONE 1 (above fold): The calculator itself — form inputs, results, chart.
 *   This is the hero. No decorative hero section. Calculator IS the content.
 *
 * ZONE 2 (below fold): SEO content, FAQ, related calculators, rate display.
 *   Genuine helpful content that earns the Google ranking.
 *
 * Both zones stack vertically. On wider screens, the calculator zone
 * could theoretically get a sidebar, but for now single-column is cleaner
 * and simpler.
 * ========================================================================== */

.calculator-page__tool {
  margin-bottom: var(--space-2xl);
}

.calculator-page__content {
  /* SEO content area. Slightly wider line-height for long-form readability. */
  line-height: var(--leading-loose);
}

/* Section spacing within the content area */
.calculator-page__content h2 {
  margin-top: var(--space-2xl);
}

.calculator-page__content h3 {
  margin-top: var(--space-xl);
}


/* ==========================================================================
 * SECTION SPACING
 * ==========================================================================
 * Generic section class for vertical rhythm between major page sections.
 * ========================================================================== */

.section {
  margin-bottom: var(--space-2xl);
}

.section--tight {
  margin-bottom: var(--space-xl);
}


/* ==========================================================================
 * GRID — HOMEPAGE CALCULATOR LISTING
 * ==========================================================================
 * Responsive grid for the homepage calculator cards. Auto-fill ensures
 * cards wrap naturally without explicit breakpoint media queries.
 * ========================================================================== */

/* (Moved to components/calculator-grid.css for BEM consistency) */


/* ==========================================================================
 * RESPONSIVE ADJUSTMENTS
 * ==========================================================================
 * Global layout tweaks at different viewport sizes. Component-specific
 * responsive styles live in their own component CSS files.
 * ========================================================================== */

/* Mobile: reserve space above tab bar (tab bar visible below 768px) */
@media (max-width: 767px) {
  .page__main {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom));
  }
}

/* Mobile: tighter padding */
@media (max-width: 640px) {
  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .page__main {
    padding-top: var(--space-lg);
    padding-bottom: calc(var(--space-2xl) + 3.75rem + env(safe-area-inset-bottom));
  }

  h1 {
    font-size: var(--text-2xl);
  }

  h2 {
    font-size: var(--text-xl);
  }
}

/* Tablet and up: restore full spacing */
@media (min-width: 768px) {
  .page__main {
    padding-top: var(--space-2xl);
  }
}