/* ========================================
   MASTER STYLESHEET - SunSeed Kitchen v4.0
   Single import. Zero conflicts.
   ======================================== */

@import url('tokens.css');
@import url('sunseed-design.css');
@import url('killer-design.css');

/*
  Page-specific CSS loaded AFTER this file:
  <link rel="stylesheet" href="/assets/css/master.css">

  Page-specific CSS (load after master.css):
  - recipes.css         → recipes/index.html
  - subscription.css    → premium/index.html
  - recipe-professional.css → recipes/detail.html
  - about.css           → resources/about.html, about.html
*/

/* ─── ACCESSIBILITY UTILITY ──────────────────────────────────────────────── */
/* Visually hidden but readable by screen readers (WCAG AAA) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── NAV HEIGHT OVERRIDE ────────────────────────────────────────────────── */
/* Overrides sunseed-design.css values — actual killer-nav is 82px          */
/* (50px svg logo + 2×16px padding). Must come AFTER @imports to win.      */
/* Media query overrides MUST be repeated to beat sunseed-design's 68/72px. */
:root {
  --nav-height: 82px;
}

@media (min-width: 768px) {
  :root {
    --nav-height: 82px;
  }
}

@media (min-width: 1025px) {
  :root {
    --nav-height: 82px;
  }
}

/* ─── GLOBAL HERO NAV OFFSET ─────────────────────────────────────────────── */
/* Pages with non-killer-hero sections still need top space for the fixed nav.
   These classes are overridden when inline <style> or page-specific CSS      
   defines their own padding — this is the fallback minimum.                  */
.about-hero,
.menu-hero,
.page-hero,
.tools-hero,
.faq-hero,
.legal-hero,
.resources-hero,
.dashboard-hero,
.recipe-hero,
.tool-hero,
.hero-section,
.preferences-section > h1:first-child {
  padding-top: calc(var(--nav-height, 82px) + 2rem);
}