/* sections.css — section-scoped styles for the Toaster Oven landing page.
   Each block is self-contained with cs- prefixed classes. Loaded after
   theme.css (tokens) and main.css (resets/typography/utilities). */

/* =========================================================
   SECTION-SCOPED STYLES — each block self-contained, cs- prefixed
   ========================================================= */

/* ---------- A11y utilities ---------- */
.cs-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;
}
.cs-skip {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 2000;
  background: #2a1206; color: #f4e9d6;
  font-family: var(--fontMono); font-size: 0.75rem; letter-spacing: 0.15em;
  text-transform: uppercase; text-decoration: none;
  padding: 0.7rem 1.2rem; border: 1px solid var(--primary);
  transition: transform 0.2s ease;
}
.cs-skip:focus { transform: translate(-50%, 0); }

/* ---------- Nav ---------- */
.cs-nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 4%;
  background-color: rgba(12, 9, 7, 0.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.cs-nav-logo { display: block; }
.cs-nav-logo img { height: 2rem; width: auto; }

.cs-nav-links { display: flex; gap: 2.5rem; align-items: center; }

.cs-nav-links a {
  font-family: var(--fontMono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bodyTextColor);
  transition: color 0.25s ease;
}
.cs-nav-links a:hover { color: var(--heat); }

/* Hamburger */
.cs-nav-toggle {
  display: none;
  width: 2.5rem; height: 2.25rem;   /* roomy tap target so bars are never clipped */
  flex-shrink: 0;
  position: relative;
  z-index: 1100;
}
.cs-nav-toggle span {
  position: absolute; left: 0.45rem; right: 0.45rem;   /* bars inset from every edge */
  height: 3px; border-radius: 2px;
  background-color: var(--cream);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);            /* readable over the bright hero */
  transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease, bottom 0.3s ease;
}
.cs-nav-toggle span:nth-child(1) { top: 0.6rem; }
.cs-nav-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.cs-nav-toggle span:nth-child(3) { bottom: 0.6rem; }
.cs-nav.cs-open .cs-nav-toggle span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.cs-nav.cs-open .cs-nav-toggle span:nth-child(2) { opacity: 0; }
.cs-nav.cs-open .cs-nav-toggle span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* ---------- Hero ---------- */
.cs-hero {
  position: relative;
  /* size the hero to the artwork's own height (width x 657/1015), NOT the viewport,
     so the flames + devil sit right under the content with no orange gap and the
     next section pulls up. Floor keeps room for the copy on shorter/wider windows. */
  min-height: max(64.73vw, 34rem);
  display: flex;
  align-items: flex-start;                 /* text rides high */
  padding-top: clamp(6rem, 16vh, 11rem);
  background-color: #DB7616;                /* vintage orange fallback */
  background-image: url("img/tex-bg.jpg");  /* real orange construction-paper scan */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* hotter glow low-center, behind the flames */
.cs-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 120vw;
  height: 80vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(240,180,110,0.6) 0%, rgba(224,138,64,0.2) 42%, transparent 72%);
  z-index: 0;
  pointer-events: none;
}

/* Flame + demon scene: height locked to width (viewBox aspect) so the whole
   scene — flames AND devil — scales uniformly with the viewport and the devil
   never crops off on narrow screens. Pinned to the bottom of the hero. */
.cs-hero-paper {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  aspect-ratio: 1015 / 657;
  height: auto;
  z-index: 0;
}

.cs-hero-inner { position: relative; z-index: 1; }

/* On the terracotta hero, text goes dark for a vintage-poster contrast */
.cs-hero .cs-label { color: #3a1b0c; }
.cs-hero h1 { margin: 0 0 1.25rem; max-width: 18ch; color: #2a1206; font-size: clamp(2.5rem, 8.5vw, 6rem); font-weight: 700; }
.cs-hero .cs-glow { color: #A43814; font-style: italic; }
.cs-hero-tagline { max-width: 46ch; color: #3d2110; margin-bottom: 2.5rem; }
.cs-hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; }
.cs-hero .cs-button { background-color: #2a1206; border-color: #2a1206; color: #f4e9d6; }
.cs-hero .cs-button:hover { background-color: #3a1b0c; border-color: #3a1b0c; box-shadow: 0 0 24px rgba(42,18,6,0.4); }
.cs-hero .cs-button-ghost { color: #2a1206; border-color: rgba(42,18,6,0.5); }
.cs-hero .cs-button-ghost:hover { border-color: #2a1206; color: #2a1206; }
/* flames rise up from BEHIND the Book a Session button on hover (two overlaying layers, fade up) */
.cs-book { position: relative; display: inline-flex; }   /* inline-flex: no baseline gap below the button */
.cs-book-btn { position: relative; z-index: 1; }
.cs-bf {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 86px;
  z-index: 0;
  transform-box: border-box;
  transform-origin: 50% 100%;          /* anchor at the button's base */
  opacity: 0;
  transform: scaleY(0.12);             /* grow UP from the base — never dips below the button */
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.3, 1.2, 0.5, 1);
  pointer-events: none;
}
.cs-book:hover .cs-bf, .cs-book:focus-within .cs-bf { opacity: 1; transform: scaleY(1); }
.cs-bf-front { transition-delay: 0.08s; }   /* gold rises just after the orange */
@media (prefers-reduced-motion: reduce) {
  .cs-bf { transition: opacity 0.3s ease; transform: scaleY(1); }
}

/* Paper ranges drift slowly — more sway toward the front (parallax) */
.cs-paper-layer { transform-box: fill-box; will-change: transform; }
@keyframes cs-sway-a { 0%,100% { transform: translateX(0); }   50% { transform: translateX(4px); } }
@keyframes cs-sway-b { 0%,100% { transform: translateX(0); }   50% { transform: translateX(-5px); } }
@keyframes cs-sway-c { 0%,100% { transform: translateX(0); }   50% { transform: translateX(7px); } }
@keyframes cs-sway-d { 0%,100% { transform: translateX(0); }   50% { transform: translateX(-9px); } }
@keyframes cs-sway-e { 0%,100% { transform: translateX(0); }   50% { transform: translateX(11px); } }
.cs-pl-a { animation: cs-sway-a 15s ease-in-out infinite; }
.cs-pl-b { animation: cs-sway-b 13s ease-in-out infinite; }
.cs-pl-c { animation: cs-sway-c 11s ease-in-out infinite; }
.cs-pl-d { animation: cs-sway-d  9s ease-in-out infinite; }
.cs-pl-e { animation: cs-sway-e  8s ease-in-out infinite; }

/* Mountain critters peek over the ridges and take turns popping up. Each shares
   one cycle with a staggered (negative) delay, so a "pop" travels across them. */
.cs-monster {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: cs-surface 12s ease-in-out infinite var(--delay, 0s);
  will-change: transform;
}
@keyframes cs-surface {
  0%   { transform: translateY(8px) rotate(-2deg); }     /* resting, just peeking */
  10%  { transform: translateY(-26px) rotate(2.5deg); }  /* its turn — pops up */
  22%  { transform: translateY(-8px) rotate(-1.5deg); }
  34%  { transform: translateY(6px) rotate(1.5deg); }    /* settles back */
  60%  { transform: translateY(10px) rotate(-2deg); }    /* gentle bob */
  82%  { transform: translateY(2px) rotate(2deg); }
  100% { transform: translateY(8px) rotate(-2deg); }
}

/* Featured flame graphic — gentle breathing flicker in the heat */
.cs-flamegraphic {
  transform-box: fill-box;
  transform-origin: 50% 88%;
  animation: cs-emberfloat 5.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes cs-emberfloat {
  0%, 100% { transform: translateY(0) rotate(-0.8deg) scale(1); }
  50%      { transform: translateY(-7px) rotate(0.8deg) scale(1.015); }
}

/* scroll parallax: flame groups + demon get a JS-driven translate */
.cs-flames, .cs-demon-wrap { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .cs-paper-layer, .cs-monster, .cs-flamegraphic { animation: none; }
}

/* ---------- About ---------- */
.cs-about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 2.5rem;
  align-items: start;
}
.cs-about h2 { margin-bottom: 1.5rem; }
.cs-about h2 { max-width: 18ch; }
.cs-about-lead { font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: var(--cream); line-height: 1.5; }
.cs-engineers {
  background: #1d1815;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem;
}
.cs-engineers .cs-label { margin-bottom: 1.1rem; }
.cs-eng { display: flex; align-items: center; gap: 0.85rem; padding: 0.35rem 0; }
.cs-eng-avatar {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--border);
}
.cs-eng-name {
  font-family: var(--fontDisplay);
  font-size: 1.5rem;
  color: var(--bodyTextColorWhite);
}
.cs-engineers p { margin-top: 1rem; }

/* ---------- Services ---------- */
.cs-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: var(--border);
  border: 1px solid var(--border);
  margin-top: 3.5rem;
}
.cs-service {
  background-color: var(--secondary);
  padding: clamp(2rem, 4vw, 3.25rem);
  transition: background-color 0.3s ease;
}
.cs-service:hover { background-color: #1f1a14; }
.cs-service-icon {
  width: 2.5rem; height: 2.5rem;
  stroke: var(--heat); stroke-width: 1.4; fill: none;
  margin-bottom: 1.75rem;
}
.cs-service h3 { margin-bottom: 0.75rem; }
.cs-service-num {
  font-family: var(--fontMono);
  font-size: 0.75rem;
  color: var(--bodyTextColor);
  letter-spacing: 0.2em;
  display: block;
  margin-bottom: 1.5rem;
}

/* ---------- Process / Cost strip ---------- */
.cs-faq { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 1px; }
.cs-faq-item { background: var(--secondary); padding: clamp(2rem, 4vw, 3rem); }
.cs-faq-item h3 { font-size: 1.4rem; margin-bottom: 0.6rem; color: var(--cream); }

/* ---------- Work / Records ---------- */
.cs-work { border-top: 1px solid var(--border); }

.cs-releases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin-top: 3rem;
  background: var(--border);
  border: 1px solid var(--border);
}

.cs-release {
  position: relative;
  background: var(--secondary);
  aspect-ratio: 1 / 1;
}
.cs-release iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- Booking / Contact ---------- */
.cs-contact-grid { display: grid; grid-template-columns: 1fr; gap: 3.5rem; margin-top: 3rem; }
.cs-form { display: flex; flex-direction: column; gap: 1.5rem; }
.cs-field label {
  display: block;
  font-family: var(--fontMono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bodyTextColor);
  margin-bottom: 0.6rem;
}
.cs-field input, .cs-field textarea {
  width: 100%;
  background-color: var(--secondary);
  border: 1px solid var(--border);
  color: var(--bodyTextColorWhite);
  padding: 0.9rem 1rem;
  transition: border-color 0.25s ease;
}
.cs-field input:focus, .cs-field textarea:focus { outline: none; border-color: var(--heat); }
.cs-field textarea { resize: vertical; min-height: 8rem; }
.cs-contact-info p { margin-bottom: 1.75rem; }
.cs-contact-line { font-family: var(--fontMono); font-size: 0.9rem; color: var(--bodyTextColorWhite); margin-bottom: 1.6rem; }
.cs-form-thanks { font-family: var(--fontDisplay); font-size: clamp(1.4rem, 3vw, 2rem); color: var(--cream); line-height: 1.3; }
.cs-contact-line span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--heat);
  margin-bottom: 0.4rem;
}

/* Engineer selector + live zcal calendar */
.cs-booking-lead { max-width: 44ch; margin-bottom: 1.75rem; }
.cs-eng-tabs { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.cs-eng-tab {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 1.2rem 0.55rem 0.55rem;
  background-color: var(--secondary);
  border: 1px solid var(--border);
  color: var(--bodyTextColor);
  font-family: var(--fontMono); font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.cs-eng-tab img {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  object-fit: cover; filter: grayscale(1); opacity: 0.7;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.cs-eng-tab:hover { border-color: var(--heat); color: var(--bodyTextColorWhite); }
.cs-eng-tab[aria-selected="true"] {
  border-color: var(--heat); color: var(--bodyTextColorWhite);
  box-shadow: 0 0 20px var(--heatGlow);
}
.cs-eng-tab[aria-selected="true"] img { filter: none; opacity: 1; }
.cs-cal-frame {
  width: 100%; background-color: #fff;
  border: 1px solid var(--border);
}
.cs-cal-frame iframe { display: none; width: 100%; height: 760px; border: 0; }
.cs-cal-frame iframe.cs-active { display: block; }
.cs-cal-fallback { margin-top: 1rem; font-family: var(--fontMono); font-size: 0.78rem; color: var(--bodyTextColor); }
.cs-cal-fallback a { color: var(--heat); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.cs-cal-fallback a:hover { border-color: var(--heat); }
@media (max-width: 47.99rem) {
  .cs-cal-frame iframe { height: 660px; }
  .cs-eng-tab { font-size: 0.72rem; padding-right: 1rem; }
}

/* ---------- Footer ---------- */
.cs-footer { border-top: 1px solid var(--border); padding: 3rem 0; }
/* flame bands behind the Services + Contact sections (same size as the footer band) */
.cs-services, .cs-contact { position: relative; overflow: hidden; padding-bottom: clamp(5rem, 12vw, 9rem); }
.cs-services > .cs-container, .cs-contact > .cs-container { position: relative; z-index: 1; }
.cs-secflames { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(150px, 19.7vw, 300px); z-index: 0; pointer-events: none; }
/* Contact is a tall section (the calendar runs ~760px), so its band needs to be
   taller + sit with less padding to climb up behind the booking block like the yellow. */
.cs-contact { padding-bottom: clamp(3rem, 7vw, 5rem); }
.cs-contact .cs-secflames { height: clamp(260px, 34vw, 520px); }
.cs-footer-inner { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; justify-content: space-between; }
.cs-footer-logo img { height: 1.6rem; width: auto; }
.cs-footer small { font-family: var(--fontMono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--bodyTextColor); }

/* =========================================================
   RESPONSIVE — tablet / desktop
   ========================================================= */
@media (min-width: 48rem) {
  .cs-about-grid { grid-template-columns: 1.3fr 0.7fr; gap: 4rem; }
  .cs-services-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-faq { grid-template-columns: repeat(2, 1fr); }
  .cs-releases { grid-template-columns: repeat(4, 1fr); }
  .cs-contact-grid { grid-template-columns: 1.2fr 0.8fr; gap: 5rem; }
  .cs-footer-inner { flex-direction: row; align-items: center; }
}
@media (min-width: 64rem) {
  .cs-services-grid { grid-template-columns: repeat(4, 1fr); }
  .cs-releases { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 47.99rem) {
  /* 440–767px: the artwork still works high up BEHIND the text (same width-scaled
     backdrop as desktop, via the base .cs-hero rule) — just a slightly higher top. */
  .cs-hero { padding-top: clamp(5rem, 13vh, 7.5rem); }
  /* tighten the big flame-band bottom padding on small screens */
  .cs-services, .cs-contact { padding-bottom: clamp(4rem, 18vw, 8rem); }
  .cs-nav { background-color: rgba(12, 9, 7, 0.92); }   /* more opaque so the icon reads */
  .cs-nav-toggle { display: block; }
  .cs-nav-links {
    position: fixed;
    inset: 0;
    z-index: 1050;
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
    background-color: var(--background);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
  }
  .cs-nav-links a { font-size: 1.1rem; }
  .cs-nav.cs-open .cs-nav-links { transform: translateX(0); }
}

@media (max-width: 27.5rem) {
  /* smallest phones (<=440px): no room for the scene beside the text, so it drops
     into a full-width band BELOW the copy (whole devil, never cropped). Reserve
     exactly its height as bottom padding so nothing overlaps. */
  .cs-hero { min-height: auto; padding-bottom: 64.73vw; }
  /* buttons stack full-width */
  .cs-hero-cta { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .cs-book { display: flex; width: 100%; }
  .cs-hero-cta .cs-button, .cs-hero-cta .cs-button-ghost { width: 100%; text-align: center; }
}