/* ==========================================================================
   BOQ Brand C - LOCAL HERO
   Quinte West rural-rooted, community-coded, hometown ISP.
   Import this file at the top of any LOCAL HERO surface.
   ========================================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=recoleta@500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&display=swap');

:root {
  /* Typography ------------------------------------------------------------ */
  --boq-local-font-display: 'Recoleta', Georgia, 'Times New Roman', serif;
  --boq-local-font-body: 'Mulish', system-ui, -apple-system, sans-serif;

  --boq-local-fs-xs: 13px;
  --boq-local-fs-sm: 15px;
  --boq-local-fs-base: 17px;
  --boq-local-fs-lg: 19px;
  --boq-local-fs-xl: 22px;
  --boq-local-fs-2xl: 28px;
  --boq-local-fs-3xl: 36px;
  --boq-local-fs-4xl: 46px;
  --boq-local-fs-5xl: 60px;
  --boq-local-fs-6xl: 76px;

  --boq-local-lh-tight: 1.15;
  --boq-local-lh-snug: 1.4;
  --boq-local-lh-body: 1.65;

  /* Color palette --------------------------------------------------------- */
  --boq-local-cream: #faf6f0;
  --boq-local-cream-deep: #f2ebdd;
  --boq-local-forest: #2d5e3e;
  --boq-local-forest-deep: #1f4329;
  --boq-local-mustard: #e2a93a;
  --boq-local-mustard-deep: #c8902a;
  --boq-local-terra: #a85432;
  --boq-local-ink: #2a221c;
  --boq-local-ink-soft: #5b4f44;
  --boq-local-muted: #9a8d7e;
  --boq-local-rule: #e3d8c4;

  /* Spacing (8px base) ---------------------------------------------------- */
  --boq-local-space-1: 4px;
  --boq-local-space-2: 8px;
  --boq-local-space-3: 16px;
  --boq-local-space-4: 24px;
  --boq-local-space-5: 32px;
  --boq-local-space-6: 48px;
  --boq-local-space-7: 64px;
  --boq-local-space-8: 96px;
  --boq-local-space-9: 128px;

  /* Radii ----------------------------------------------------------------- */
  --boq-local-radius-sm: 8px;
  --boq-local-radius-md: 16px;
  --boq-local-radius-lg: 24px;
  --boq-local-radius-xl: 32px;
  --boq-local-radius-pill: 9999px;

  /* Shadows (warm, terra-tinted) ----------------------------------------- */
  --boq-local-shadow-sm: 0 1px 2px rgba(74, 50, 30, 0.06), 0 2px 6px rgba(74, 50, 30, 0.04);
  --boq-local-shadow-md: 0 4px 12px rgba(74, 50, 30, 0.08), 0 8px 24px rgba(74, 50, 30, 0.05);
  --boq-local-shadow-lg: 0 12px 28px rgba(74, 50, 30, 0.10), 0 24px 56px rgba(74, 50, 30, 0.07);

  /* Motion ---------------------------------------------------------------- */
  --boq-local-motion-fast: 200ms;
  --boq-local-motion-base: 300ms;
  --boq-local-motion-slow: 400ms;
  --boq-local-easing: cubic-bezier(0.45, 0, 0.25, 1);

  /* Background washes ----------------------------------------------------- */
  --boq-local-wash-warm: linear-gradient(180deg, #faf6f0 0%, #f2ebdd 100%);
  --boq-local-wash-forest: linear-gradient(180deg, #2d5e3e 0%, #1f4329 100%);
}

/* Base typography defaults --------------------------------------------- */
.boq-local-root {
  font-family: var(--boq-local-font-body);
  font-size: var(--boq-local-fs-base);
  line-height: var(--boq-local-lh-body);
  color: var(--boq-local-ink);
  background: var(--boq-local-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.boq-local-root h1,
.boq-local-root h2,
.boq-local-root h3,
.boq-local-root .display {
  font-family: var(--boq-local-font-display);
  line-height: var(--boq-local-lh-tight);
  color: var(--boq-local-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.boq-local-root h1 { font-size: var(--boq-local-fs-6xl); }
.boq-local-root h2 { font-size: var(--boq-local-fs-4xl); }
.boq-local-root h3 { font-size: var(--boq-local-fs-2xl); font-weight: 600; }
.boq-local-root p  { margin: 0 0 var(--boq-local-space-3); color: var(--boq-local-ink-soft); }
.boq-local-root a  { color: var(--boq-local-forest); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; transition: color var(--boq-local-motion-fast) var(--boq-local-easing); }
.boq-local-root a:hover { color: var(--boq-local-forest-deep); }

/* Buttons -------------------------------------------------------------- */
.boq-local-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--boq-local-space-2);
  padding: 14px 28px;
  font-family: var(--boq-local-font-body);
  font-weight: 600;
  font-size: var(--boq-local-fs-base);
  line-height: 1;
  border-radius: var(--boq-local-radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--boq-local-motion-base) var(--boq-local-easing);
  box-shadow: var(--boq-local-shadow-sm);
}
.boq-local-btn--primary { background: var(--boq-local-forest); color: var(--boq-local-cream); border-color: var(--boq-local-forest); }
.boq-local-btn--primary:hover { background: var(--boq-local-forest-deep); border-color: var(--boq-local-forest-deep); box-shadow: var(--boq-local-shadow-md); transform: translateY(-2px); }
.boq-local-btn--secondary { background: transparent; color: var(--boq-local-forest); border-color: var(--boq-local-forest); box-shadow: none; }
.boq-local-btn--secondary:hover { background: var(--boq-local-cream-deep); }
.boq-local-btn--ghost { background: transparent; color: var(--boq-local-ink-soft); border-color: transparent; box-shadow: none; }
.boq-local-btn--ghost:hover { background: var(--boq-local-cream-deep); color: var(--boq-local-forest); }
.boq-local-btn--accent { background: var(--boq-local-mustard); color: var(--boq-local-ink); border-color: var(--boq-local-mustard); }
.boq-local-btn--accent:hover { background: var(--boq-local-mustard-deep); border-color: var(--boq-local-mustard-deep); transform: translateY(-2px); box-shadow: var(--boq-local-shadow-md); }
.boq-local-btn--lg { padding: 18px 36px; font-size: var(--boq-local-fs-lg); }

/* Cards ---------------------------------------------------------------- */
.boq-local-card {
  background: var(--boq-local-cream);
  border-radius: var(--boq-local-radius-lg);
  box-shadow: var(--boq-local-shadow-md);
  padding: var(--boq-local-space-5);
  transition: transform var(--boq-local-motion-base) var(--boq-local-easing),
              box-shadow var(--boq-local-motion-base) var(--boq-local-easing);
}
.boq-local-card:hover { transform: translateY(-4px); box-shadow: var(--boq-local-shadow-lg); }
.boq-local-card--flat { box-shadow: none; border: 1px solid var(--boq-local-rule); background: var(--boq-local-cream-deep); }

/* Surfaces ------------------------------------------------------------- */
.boq-local-section { padding: var(--boq-local-space-8) var(--boq-local-space-4); }
.boq-local-section--alt { background: var(--boq-local-wash-warm); }
.boq-local-section--forest { background: var(--boq-local-wash-forest); color: var(--boq-local-cream); }
.boq-local-section--forest h1, .boq-local-section--forest h2, .boq-local-section--forest h3 { color: var(--boq-local-cream); }
@media (min-width: 900px) { .boq-local-section { padding: var(--boq-local-space-9) var(--boq-local-space-6); } }

/* Navigation ----------------------------------------------------------- */
.boq-local-nav { background: var(--boq-local-cream); border-bottom: 1px solid transparent; height: 80px; display: flex; align-items: center; padding: 0 var(--boq-local-space-5); position: sticky; top: 0; z-index: 50; transition: border-color var(--boq-local-motion-fast) var(--boq-local-easing); }
.boq-local-nav.is-scrolled { border-bottom-color: var(--boq-local-rule); }
.boq-local-nav__logo { font-family: var(--boq-local-font-display); font-weight: 600; font-size: var(--boq-local-fs-2xl); color: var(--boq-local-forest); }
.boq-local-nav__strap { font-family: var(--boq-local-font-body); font-size: var(--boq-local-fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--boq-local-ink-soft); margin-left: var(--boq-local-space-2); }
.boq-local-nav__link { font-weight: 500; font-size: var(--boq-local-fs-base); color: var(--boq-local-ink-soft); text-decoration: none; }
.boq-local-nav__link:hover { color: var(--boq-local-forest); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* Tags / chips --------------------------------------------------------- */
.boq-local-chip { display: inline-flex; align-items: center; gap: var(--boq-local-space-1); padding: 6px 14px; border-radius: var(--boq-local-radius-pill); background: var(--boq-local-cream-deep); color: var(--boq-local-ink-soft); font-size: var(--boq-local-fs-sm); font-weight: 500; }
.boq-local-chip--mustard { background: var(--boq-local-mustard); color: var(--boq-local-ink); }
.boq-local-chip--forest  { background: var(--boq-local-forest); color: var(--boq-local-cream); }

/* Hero ----------------------------------------------------------------- */
.boq-local-hero { padding: var(--boq-local-space-8) var(--boq-local-space-4); background: var(--boq-local-wash-warm); }
.boq-local-hero__h1 { font-size: var(--boq-local-fs-5xl); }
@media (min-width: 900px) { .boq-local-hero__h1 { font-size: var(--boq-local-fs-6xl); } }
.boq-local-hero__sub { font-size: var(--boq-local-fs-lg); color: var(--boq-local-ink-soft); max-width: 56ch; margin-top: var(--boq-local-space-3); }
.boq-local-hero__photo { border-radius: var(--boq-local-radius-xl); overflow: hidden; box-shadow: var(--boq-local-shadow-lg); }

/* Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .boq-local-btn, .boq-local-card, .boq-local-root a { transition: none; }
  .boq-local-btn:hover, .boq-local-card:hover { transform: none; }
}