/* --------------------------------------------------------------------------
 * Global stylesheet — kept intentionally minimal.
 *
 * Everything visual that's owned by a custom element lives inside that
 * component's *.style.js (shadow-DOM scoped). The only rules left here are:
 *   1. The reset.
 *   2. Design tokens on :root (these inherit through every shadow boundary,
 *      which is how components stay themable).
 *   3. Base typography + links (light-DOM only — components don't inherit
 *      these because shadow roots reset most defaults).
 *   4. Light-DOM layout primitives that the pages themselves still use as
 *      wrappers around component instances (.container, .grid-3, etc.).
 *
 * If you find yourself adding a new visual rule here, ask first whether
 * it belongs inside a component instead.
 * ------------------------------------------------------------------------ */

/* Universal reset — box-sizing ONLY. Neither margin nor padding belongs in
   the universal selector: both apply to custom-element hosts from the
   document scope, and per the CSS Scoping spec outer-scope rules win over
   `:host { ... }` at equal specificity. That silently zeroed every
   component's outer margin AND padding (e.g. volo-section-header's
   margin-bottom: 3rem, volo-photo-strip's side padding, etc.).
   The UA-default margins / paddings that actually need zeroing are listed
   explicitly below — keep this list tight; do NOT widen it with `*`. */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
dl,
ul,
ol {
  margin: 0;
}
ul,
ol,
fieldset,
legend {
  padding: 0;
}

:root {
  --color-bg: #ffffff;
  --color-surface: #f4f7fa;
  --color-surface-alt: #eaf1f7;
  --color-blue: #3a9fc8;
  --color-blue-light: #e6f4fb;
  --color-blue-dark: #2278a0;
  --color-orange: #5a8200;
  --color-orange-light: #edf7c8;
  --color-text: #1a2733;
  --color-text-muted: #627385;
  --color-border: #dde6ee;
  --nav-height: 68px;
  --max-width: 1200px;
  --radius: 6px;
  --font: "Open Sans", system-ui, sans-serif;
  --font-heading: "Young Serif", serif;
  --font-display: "MuseoModerno", system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

a {
  color: var(--color-blue);
  text-decoration: none;
}
a:hover {
  color: var(--color-blue-dark);
}

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

h1,
h2,
h3 {
  font-family: var(--font-heading);
}

/* Lime accent for <em> inside hero slots. The slot's <span slot="heading">
   wrapper sits in light DOM, so this light-DOM rule reaches its descendant
   <em>. ::slotted(em) inside the component's shadow CSS would NOT match —
   that selector only sees direct children of the slot. */
volo-hero em {
  font-style: normal;
  color: #c5f135;
}

/* === Layout primitives (light DOM) === */

/* Sections wrap most page content; padding is uniform so components can
   sit inside without each one re-declaring vertical rhythm. */
section {
  padding: 5rem 2rem;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.bg-alt {
  background: var(--color-surface);
}

/* Card grids. The cards themselves are <volo-card>, <volo-pricing-card>,
   and <volo-experience-card> — these wrappers just lay them out. */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.experience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.gear-grid {
  /* Overrides the auto-fit on .experience-grid so horizontal cards sit
     two-up on wider screens, then collapse below. */
  grid-template-columns: repeat(2, 1fr);
}

.pricing-grid {
  display: grid;
  /* Cap at 3 across so an odd card count (e.g. 5) wraps 3 + 2 rather than
     leaving a lone card stranded on its own row. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .gear-grid {
    grid-template-columns: 1fr;
  }
}

/* Centered button row used below cards/grids. */
.center-row {
  text-align: center;
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Google Calendar iframe wrapper on book.html. */
.calendar-embed {
  max-width: 800px;
  margin: 0 auto;
}

.calendar-embed iframe {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 2);
  display: block;
}

/* Small inline aside inside a <volo-card> body — kept here because the
   <p> is slotted into the card's shadow root from light DOM, and the
   card's ::slotted(p) rule doesn't know about this variant. */
.card-aside {
  margin-top: 0.75rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* Bottom-of-section footnote line (e.g. shop.html "Don't see what you're
   looking for?"). */
.footnote {
  text-align: center;
  margin-top: 2.5rem;
  color: var(--color-text-muted);
}

.footnote a {
  color: var(--color-blue);
  font-weight: 600;
}