/* ==========================================================================
   Flow Circus — site.css
   One stylesheet for every page.

   1. Tokens        colors, type, spacing (change the look here)
   2. Base          element defaults
   3. Layout        containers and sections
   4. Header        logo, navigation, mobile menu
   5. Breadcrumb
   6. Components    buttons, split, callout, features, audience cards,
                    cards, carousel, reviews, video, embed, acrostic, form
   7. Footer
   8. Motion        scroll reveal
   9. Utilities
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --ink: #333333;            /* headings */
  --slate: #2c3a3a;          /* body text, footer background */
  --red: #9e1e22;            /* brand accent: current page, rules, quote borders */
  --orange: #e37623;         /* buttons, carousel arrows */
  --purple: #802b87;         /* button hover text */
  --grey: #eaeaea;           /* tinted sections, button hover */
  --quote: #5e5e5e;          /* quote boxes */
  --card: #6e6e6e;           /* audience cards */
  --white: #ffffff;
  --link: #1f4fd1;

  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);   /* 17 → 20px */
  --text-lg: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); /* 20 → 26px */
  --h1: clamp(1.875rem, 1.6rem + 1.1vw, 2.25rem);     /* 30 → 36px */
  --h2: clamp(1.625rem, 1.4rem + 0.9vw, 2rem);        /* 26 → 32px */
  --h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);   /* 22 → 26px */

  --container: 1152px;
  --gutter: clamp(16px, 4vw, 32px);
  --section: clamp(40px, 6vw, 72px);
  --radius: 8px;
  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);         /* Webflow "outQuart" */
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--slate);
  font-family: var(--font);
  font-size: var(--text);
  line-height: 1.35;
  letter-spacing: -0.1px;
}
main { overflow-x: clip; }
img, iframe, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { color: var(--ink); margin: 0 0 0.4em; text-wrap: balance; }
h1 { font-size: var(--h1); font-weight: 500; line-height: 1.2; }
h2 { font-size: var(--h2); font-weight: 600; line-height: 1.3; letter-spacing: -1px; }
h3 { font-size: var(--h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.5px; }
p { margin: 0 0 1em; }
a { color: var(--link); }
a:hover { color: var(--red); }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: 0.35em; }
blockquote, figure { margin: 0; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 14px; background: var(--slate); color: var(--white); border-radius: var(--radius); }
.skip-link:focus { top: 12px; }

/* 3. Layout ---------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { position: relative; isolation: isolate; padding-block: var(--section); }
.section--tint { background: var(--grey); }
.section + .section:not(.section--tint) { padding-top: 0; }
.section--tint + .section--tint { padding-top: 0; }
.container > :last-child { margin-bottom: 0; }

/* 4. Header ---------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; }
.brand img { width: 300px; max-width: 46vw; }
.brand--home { padding-block: 12px; }
.brand--home img { width: 190px; }
.nav__list { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.nav__list li { margin: 0; }
.nav__link {
  display: block; padding: 4px 0;
  border-bottom: 3px solid transparent;
  color: var(--slate); font-size: 16px; font-weight: 700; text-transform: uppercase; text-decoration: none;
}
.nav__link:hover { color: var(--slate); border-bottom-color: var(--slate); }
.nav__link[aria-current="page"] { color: var(--red); }
.nav-toggle { display: none; padding: 10px; border: 0; background: none; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--ink); content: "";
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -8px; }
.nav-toggle span::after { position: absolute; top: 8px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 991px) {
  .site-header__inner { min-height: 84px; }
  .nav-toggle { display: block; }
  .nav {
    position: absolute; inset: 100% 0 auto; padding: 8px var(--gutter) 20px;
    background: var(--white); border-bottom: 1px solid var(--orange);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s 0.3s;
  }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { padding: 12px 0; font-size: 18px; }
}

/* 5. Breadcrumb ------------------------------------------------------------ */
.breadcrumb { padding-top: 16px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 0; padding: 0 0 6px; list-style: none; border-bottom: 1px solid var(--red); font-size: 14px; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "•"; margin-right: 10px; }
.breadcrumb a { color: var(--slate); font-weight: 500; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* 6. Components ------------------------------------------------------------ */

/* Home hero image */
.hero-image { height: clamp(260px, 32vw, 450px); background: #000; overflow: hidden; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

/* Lead text (home intro) */
.lead p { font-size: var(--text-lg); line-height: 1.15; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0; }
.btn {
  display: inline-block; padding: 6px 30px 8px;
  border: 2px solid var(--orange); border-radius: var(--radius);
  background: var(--orange); color: var(--white);
  font: 500 17px/1.2 var(--font); text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.btn:hover { background: var(--grey); color: var(--purple); }
.btn--outline { width: min(100%, 420px); padding-block: 12px; font-size: 20px; text-align: center; text-transform: none; }

/* Split: text beside an image */
.split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-bottom: 24px; }
.split__media img { width: 100%; }
@media (max-width: 767px) { .split { grid-template-columns: minmax(0, 1fr); } .split__media { order: -1; } }

/* Callout: testimonial on a red rule */
.callout-band { position: relative; margin: 40px calc(50% - 50vw); padding-inline: var(--gutter); }
.callout-band::before { content: ""; position: absolute; inset: 50% 0 auto; border-top: 2px solid var(--red); }
.callout {
  position: relative; max-width: 750px; margin-inline: auto; padding: 10px 20px 8px;
  border: 2px solid var(--red); background: var(--quote); color: var(--white);
}
.callout blockquote p { margin: 0 0 6px; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); font-style: italic; line-height: 1.15; }
.callout figcaption { font-size: 16px; text-align: right; }

/* Features: 2-column image + heading + text */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; margin-block: 32px; }
.feature__image { width: min(80%, 345px); aspect-ratio: 1; margin: 0 auto 24px; object-fit: cover; }
/* Rows variant: image beside text, alternating sides (long write-ups like Wellness) */
.features--rows { grid-template-columns: minmax(0, 1fr); }
.features--rows .feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.features--rows .feature__image { margin: 0 auto; }
.features--rows .feature:nth-child(even) .feature__image { order: 2; }
@media (max-width: 767px) {
  .features, .features--rows .feature { grid-template-columns: minmax(0, 1fr); }
  .features--rows .feature:nth-child(even) .feature__image { order: 0; }
  .feature { text-align: center; }
}

/* Audience cards (home) */
.audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-block: 40px; }
.audience__card { display: block; overflow: hidden; border-radius: var(--radius); background: var(--card); color: var(--white); text-decoration: none; transition: transform 0.3s var(--ease); }
.audience__card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.audience__label { display: block; padding: 10px 8px 16px; font-size: var(--h1); font-weight: 700; text-align: center; transition: color 0.2s; }
.audience__card:hover { color: var(--white); transform: translateY(-4px); }
.audience__card:hover .audience__label { color: var(--orange); }
@media (max-width: 767px) { .audience { grid-template-columns: minmax(0, 1fr); } }

/* Columns: two columns of running text (policies) */
.columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; font-size: 16px; }
@media (max-width: 767px) { .columns { grid-template-columns: minmax(0, 1fr); } }
.rule { height: 4px; margin: 40px 0; border: 0; background: #506b6b; }

/* Image row: a few images side by side */
.image-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; margin-block: 24px; }
.image-row img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Cards: resources, videos, products, gallery */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 32px 24px; margin-block: 24px; }
.card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.card h3 { margin-top: 0.4em; }
.card img { margin-inline: auto; }
.card .list { text-align: left; align-self: stretch; }
.card__link { display: flex; flex-direction: column; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.card__link:hover h3 { color: var(--red); }

/* Carousel (custom Flop Balls, reviews) */
.carousel { position: relative; margin-block: 32px; --per-view: 4; --gap: 24px; }
.carousel--reviews { --per-view: 2; --gap: 40px; padding-inline: 48px; }
.carousel--reviews .carousel__arrow--prev { left: 0; }
.carousel--reviews .carousel__arrow--next { right: 0; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { scroll-snap-align: start; display: grid; gap: 24px; align-content: start; }
.carousel--images .carousel__slide img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.carousel__arrow {
  position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -36px;
  border: 0; border-radius: 5px; background: var(--orange); color: var(--white); cursor: pointer;
  display: grid; place-items: center;
}
.carousel__arrow svg { width: 22px; height: 22px; }
.carousel__arrow--prev { left: -20px; }
.carousel__arrow--next { right: -20px; }
.carousel__arrow[disabled] { opacity: 0.35; cursor: default; }
.carousel__dots { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.carousel__dots button { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: #b3b3b3; cursor: pointer; }
.carousel__dots button[aria-current="true"] { background: var(--ink); }
@media (max-width: 767px) {
  .carousel { --per-view: 2; }
  .carousel--reviews { --per-view: 1; }
  .carousel__arrow--prev { left: -8px; }
  .carousel__arrow--next { right: -8px; }
}

/* Review (inside a carousel) */
.review { display: grid; gap: 12px; align-content: start; padding-inline: 8px; }
.review__logo { width: min(100%, 320px); margin-inline: auto; }
.review blockquote::before { content: "“"; display: block; height: 0.5em; color: var(--orange); font-size: 4rem; line-height: 1; }
.review blockquote p { margin: 16px 0 10px; }
.review figcaption { color: var(--slate); }

/* YouTube: thumbnail until clicked */
.video {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 24px auto; padding: 0;
  border: 0; background: #000; cursor: pointer; overflow: hidden;
}
.section > .container > .video { max-width: 800px; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: opacity 0.2s; }
.video::after {
  content: ""; position: absolute; inset: 50% auto auto 50%; width: 68px; height: 48px; translate: -50% -50%;
  border-radius: 12px; background: #f00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 26px no-repeat;
}
.video:hover img { opacity: 1; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video.is-playing::after { display: none; }
.card .video { margin-block: 8px 0; }

/* Embedded forms and widgets */
.embed { margin-block: 24px; }
.embed iframe { width: 100%; min-height: 600px; border: 1px solid #ccc; background: var(--white); }

/* Shopify buy button */
.buy-button { min-height: 56px; margin-top: 8px; }

/* Flop-osophy acrostic */
.acrostic { display: grid; gap: 16px; padding: 0; list-style: none; margin-block: 24px; }
.acrostic li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-items: baseline; margin: 0; }
.acrostic__letter { grid-row: span 2; color: var(--red); font-size: 56px; font-weight: 700; line-height: 1; }
.acrostic p { margin: 0; }

/* Forms (Mailchimp, password) */
.form { display: grid; gap: 10px; max-width: 520px; margin-block: 24px; }
.form label { font-weight: 600; }
.form input:not([type="submit"]):not([type="checkbox"]), .form textarea, .form select {
  width: 100%; padding: 10px 12px; border: 1px solid #b5b5b5; border-radius: 6px; font: inherit;
}
.form input[type="submit"] { justify-self: start; margin-top: 8px; }
.honeypot { position: absolute; left: -5000px; }

/* 7. Footer ---------------------------------------------------------------- */
.site-footer { margin-top: 99px; padding-block: 32px 40px; background: var(--slate); color: var(--white); text-align: center; }
.site-footer__title { margin: 0 0 8px; color: var(--white); font-size: var(--h1); font-weight: 500; letter-spacing: 0; }
.footer__columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--red); }
.footer__heading { margin: 0 0 12px; color: var(--white); font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem); font-weight: 500; letter-spacing: 0; }
.footer__list { margin: 0; padding: 0; list-style: none; }
.footer__list a, .footer__address { color: var(--white); font-size: 18px; font-style: normal; text-decoration: none; line-height: 1.6; }
.footer__list a:hover, .footer__address a:hover { color: var(--white); text-decoration: underline; }
.footer__address a { color: inherit; text-decoration: none; }
.social { display: flex; justify-content: center; gap: 14px; margin: 0; padding: 0; list-style: none; }
.social li { margin: 0; }
.social a { display: grid; place-items: center; width: 32px; height: 32px; }
.social img { width: 20px; height: 20px; transition: transform 0.2s var(--ease); }
.social a:hover img { transform: scale(1.15); }
@media (max-width: 767px) { .footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .footer__columns { grid-template-columns: minmax(0, 1fr); } }

/* 8. Motion: elements slide up and fade in as they scroll into view ---------- */
.js .reveal { opacity: 0; transform: translateY(100px); }
.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* 9. Utilities ------------------------------------------------------------- */
.center { text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }