/* ==========================================================================
   Hot Talk — brand layer on top of sanitize.css + typography.css
   ==========================================================================

   BRAND COLOURS — the four configurable knobs. Edit these to re-theme the page.
   Everything else derives from them.
     --color-background : page background
     --color-body       : body copy / default text
     --color-highlight  : accent — countdown digits, links, question text
     --color-subtle     : muted — labels, dividers, the kicker line
   ------------------------------------------------------------------------ */
/*@font-face {
  font-family: "Winston VF";
  src: url("/assets/mulinito.vf.ttf") format("truetype");
  font-display: swap;
}*/

:root {
  --color-background: #e8e7ec;
  --color-body:       #2d2f64;
  --color-highlight:  #21be98;
  --color-subtle:     #2d2f644d;

  /* Typefaces (loaded via Google Fonts in the HTML head) */
  /* Holo Ventures branding */
  --font-heading: "Outfit", system-ui, sans-serif;         /* headings + countdown */
  --font-body:    "Space Grotesk", system-ui, sans-serif;   /* body copy */
  /* HoloFuel branding */
  /*--font-body: "Winston VF", system-ui, sans-serif;
  --font-heading: var(--font-body);*/

  /* Layout constants for the collapsing countdown */
  --faq-teaser: 8rem;   /* how much of the FAQ peeks above the fold at rest */
  --cd-min:     4.25em;   /* collapsed countdown height, incl. padding */
  --collapse:   0;        /* 0 = full-screen, 1 = fully collapsed; JS drives this */
}

/* ---- Base ---------------------------------------------------------------- */

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

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

a {
  color: var(--color-highlight);
}

/* ==========================================================================
   Countdown stage
   ==========================================================================
   Graceful default (no JS / feature unsupported): a static, full-height block,
   no fixed positioning, no shrink. The `.has-collapse` class — added by
   countdown.js — opts into the fixed + scroll-driven shrink behaviour.
   ------------------------------------------------------------------------ */

.countdown {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  min-height: 100vh;   /* fallback for browsers without svh */
  min-height: 100svh;
  text-align: center;
  background: var(--color-background);   /* opaque so it can cover content */
}

.countdown__title {
  font-size: clamp(2.5rem, 5svw, 4rem);
  line-height: 1em;
}

.countdown__kicker, .countdown__legal {
  margin: 0 0 1rem;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
}

.countdown__time {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.35em;
  margin: 0 0 1rem;
  color: var(--color-highlight);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;   /* stop per-tick horizontal jitter */
  /* Conservative pre-JS / no-JS size that will not overflow the width.
     When JS runs it measures and sets an exact fit inline. */
  font-size: min(11vw, 18vh);
}

/* Segments keep their intrinsic size (no flex shrink) so JS can measure the
   true content width for fitting. */
.countdown__seg,
.countdown__sep {
  flex: none;
}

.countdown__seg {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.countdown__num {
  display: block;
}

.countdown__label {
  color: var(--color-subtle);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.8rem, 0.18em, 0.18em);              /* relative to the big digits */
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.countdown__sep {
  color: var(--color-subtle);
  align-self: flex-start;
}

/* Message shown once the timer reaches zero */
.countdown__done {
  font-size: min(9vw, 16vh);
}

/* ---- Enhanced behaviour (JS present) ------------------------------------ */

.has-collapse .countdown {
  position: fixed;
  inset: 0 0 auto 0;      /* pin to top; stays there for good */
  z-index: 10;
  min-height: 0;
  overflow: hidden;       /* clip any transient overflow during a resize frame */
  will-change: height;
  /* Height lerps from (viewport − teaser) down to --cd-min as --collapse 0→1 */
  height: calc(100vh - var(--faq-teaser)
               - var(--collapse) * (100vh - var(--faq-teaser) - var(--cd-min)));
  height: calc(100svh - var(--faq-teaser)
               - var(--collapse) * (100svh - var(--faq-teaser) - var(--cd-min)));
}

/* Reserve constant space so the content scrolls at true 1:1 speed and slides
   UNDER the opaque bar — independent of how far the bar has shrunk. */
.has-collapse .content {
  margin-top: calc(100vh - var(--faq-teaser));
  margin-top: calc(100svh - var(--faq-teaser));
}

/* The timer's siblings (title, kicker, and any content added above or below it)
   collapse out of the height budget and fade as we shrink, so the timer alone
   fills the compact bar. This is driven per-frame from countdown.js — see
   measureExtras/applyExtras — so the collapse tracks each element's actual
   natural height, whatever content lives there. */

/* ==========================================================================
   Content: FAQ + collaborators
   ========================================================================== */

.content {
  max-width: 65ch;
  margin: 0 auto;
  padding: 1rem 1.25rem 4rem;
}

/* ---- FAQ (always visible, no disclosure widgets) ------------------------ */

.faq__title {
  margin: 0.5rem 0 1.5rem;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
}

.faq__list {
  margin: 0;
}

.faq__intro {
  font-size: 1.25rem;
}

.faq__q {
  margin-top: 1.75rem;
  color: var(--color-highlight);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
}

.faq__intro, .faq__a {
  margin: 0.5rem 0 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-subtle) 35%, transparent);
}

.faq__a:last-child {
  border-bottom: 0;
}

/* ---- Collaborators ----------------------------------------------------------- */

.collaborators {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 6vw, 3.5rem);
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid color-mix(in srgb, var(--color-subtle) 35%, transparent);
}

.collaborators__link {
  display: inline-flex;
  height: 40px;
  color: var(--color-subtle);   /* SVGs use fill=currentColor */
  opacity: 50%;
}

.collaborators__link:hover, .collaborators__link:focus {
  opacity: 100%;
}

.collaborators__logo {
  fheight: 40px;
  width: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .collaborators__link {
    transition: color 0.2s ease, opacity 0.2s ease;
  }
}

.collaborators__link:hover,
.collaborators__link:focus-visible {
  color: var(--color-highlight);
}