/* ============================================================
   Base — the page shell and element-level typography.
   ============================================================ */

@layer base {
  body {
    background: linear-gradient(135deg, #ede9f7 0%, #c7d2fe 50%, #93b5f5 100%);
    background-attachment: fixed;

    /* The shell is a flex column so <main> can absorb whatever height is
       left under the navbar. Full-height sections inside main then size
       themselves by flexing rather than by subtracting a guessed navbar
       height from the viewport, which is what used to make short pages
       scroll by exactly the height of main's own padding.

       Mobile engines resolve vh against the *large* viewport (the one with
       the browser toolbars retracted), so on a page whose content is
       shorter than that, 100vh leaves a strip of dead scrollable space
       below the content. dvh tracks the viewport as the browser chrome
       expands and retracts; browsers without it keep the vh value. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }

  main {
    flex: 1 1 auto;
  }

  /* Only a page that actually holds a full-height section needs main to
     become a flex container; every other page keeps normal block layout. */
  main:has(> .hero-section) {
    display: flex;
    flex-direction: column;
  }

  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--space-2);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-heading);
  }

  h1 { font-size: calc(1.375rem + 1.5vw); }
  h2 { font-size: calc(1.325rem + 0.9vw); }
  h3 { font-size: calc(1.3rem + 0.6vw); }
  h4 { font-size: calc(1.275rem + 0.3vw); }
  h5 { font-size: 1.25rem; }
  h6 { font-size: 1rem; }
}

@media (min-width: 1200px) {
  @layer base {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5rem; }
  }
}

/* The .hN classes let any element take a heading's size without taking a
   heading's semantics. Components layer, so a component can still win. */
@layer components {
  .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-top: 0;
    margin-bottom: var(--space-2);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-heading);
  }

  .h1 { font-size: calc(1.375rem + 1.5vw); }
  .h2 { font-size: calc(1.325rem + 0.9vw); }
  .h3 { font-size: calc(1.3rem + 0.6vw); }
  .h4 { font-size: calc(1.275rem + 0.3vw); }
  .h5 { font-size: 1.25rem; }
  .h6 { font-size: 1rem; }

  .display-4 {
    font-size: calc(1.475rem + 2.7vw);
    font-weight: 300;
    line-height: 1.2;
  }
}

@media (min-width: 1200px) {
  @layer components {
    .h1 { font-size: 2.5rem; }
    .h2 { font-size: 2rem; }
    .h3 { font-size: 1.75rem; }
    .h4 { font-size: 1.5rem; }
    .display-4 { font-size: 3.5rem; }
  }
}