/* ==========================================================================
   wranglerenergy.com — Home Page Styles
   ========================================================================== */

/* ---------- Brand fonts ---------- */

/* Headlines */
@font-face {
  font-family: "Akira Expanded";
  src: url("../assets/fonts/AkiraExpanded.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Subheadlines — Trade Gothic Bold Condensed No. 20 */
@font-face {
  font-family: "Trade Gothic LT Std Cn";
  src: url("../assets/fonts/TradeGothicLTStd-BdCn20.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Body — Trade Gothic Bold Extended */
@font-face {
  font-family: "Trade Gothic LT Std Extended";
  src: url("../assets/fonts/TradeGothicLTStd-BoldExt.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Regular cut, available if needed */
@font-face {
  font-family: "Trade Gothic LT Std";
  src: url("../assets/fonts/TradeGothicLTStd.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- Brand tokens ---------- */

:root {
  /* Primary */
  --color-dark: #221c35;   /* dark purple/navy */
  --color-green: #92d500;  /* electric green */
  /* Secondary */
  --color-cream: #e4f6d1;  /* pale green/off-white */

  /* Font roles */
  --font-headline: "Akira Expanded", "Arial Black", sans-serif;
  --font-subheadline: "Trade Gothic LT Std Cn", "Arial Narrow", sans-serif;
  --font-body: "Trade Gothic LT Std Extended", Arial, sans-serif;

  /* Lets height animate to/from auto (accordion open/close) */
  interpolate-size: allow-keywords;
}

/* ---------- Reset / base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  background: #fff;
  color: var(--color-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

.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;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-subheadline);
  font-weight: bold;
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 12px 46px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-shop {
  background: var(--color-cream);
  color: var(--color-dark);
  box-shadow: 0 0 0 1px var(--color-green), 0 0 22px rgba(146, 213, 0, 0.45);
}

.btn-shop:hover {
  box-shadow: 0 0 0 1px var(--color-green), 0 0 34px rgba(146, 213, 0, 0.7);
}

.btn-buy {
  background: var(--color-dark);
  color: #fff;
  width: 100%;
}

.btn-buy:hover {
  background: #322a4d;
}

/* ---------- Marquee banner ---------- */

.marquee {
  display: block;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-green);
  overflow: hidden;
  text-decoration: none;
  padding: 9px 0;
  /* Same layered neon treatment as the hero badge */
  box-shadow: 0 0 14px rgba(146, 213, 0, 0.85), 0 0 42px rgba(146, 213, 0, 0.55);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 26s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-group {
  display: flex;
  align-items: center;
}

.marquee-item {
  font-family: var(--font-headline);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--color-dark);
  white-space: nowrap;
  padding: 0 22px;
}

.marquee-bull {
  width: 26px;
  height: 26px;
  flex: none;
  background: url("../assets/wrangler-bull-mark-navy.png") no-repeat center / contain;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Dark zone (hero + charged share the storm backdrop) ---------- */

.dark-zone {
  position: relative;
  /* Deep teal fading to near-black so the hero photo's storm backdrop blends in */
  background: linear-gradient(180deg, #103649 0%, #0a0e14 60%);
}

/* Lightning bolt art lives behind the Charged With section only — see
   .charged::before (desktop) and .charged-list::after (mobile). */

.hero,
.charged {
  position: relative;
}

/* ---------- Hero ---------- */

/* Landscape photo spans the full hero; cans sit right, content overlays the
   dark storm sky on the left */
.hero-media {
  position: relative;
}

.hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Left scrim keeps badge/text legible over the storm sky */
.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 14, 20, 0.75) 0%, rgba(10, 14, 20, 0.3) 38%, rgba(10, 14, 20, 0) 58%);
  pointer-events: none;
}

/* Fade the photo's bottom edge into the dark zone below */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 20, 0) 80%, #0a0e14 100%);
  pointer-events: none;
}

/* Tablet / laptop / desktop: one solid color behind the hero so the photo's
   melt fades always match, then the gradient flows down through the Charged
   With section. Hero height follows the photo, so the badge/text/button
   center against it with no dead space underneath. */
@media (min-width: 761px) {
  .dark-zone {
    background: #0a0e14;
  }

  .hero {
    background: #0a0e14;
  }

  .charged {
    background: linear-gradient(180deg, #0a0e14 0%, #103649 100%);
  }

  /* Badge / headline / button float over the photo's empty left side */
  .hero-content {
    position: absolute;
    top: 0;
    bottom: 10%;
    left: 0;
    z-index: 1;
    width: min(48%, 640px);
    justify-content: center;
    gap: clamp(14px, 2.4vw, 30px);
    padding: 24px 24px 24px clamp(24px, 5vw, 90px);
  }

  .hero-badge {
    width: clamp(110px, 14vw, 200px);
  }

  /* Bolt rotated 45deg so its point strikes in from the left wall, staying
     behind the ingredient list; clipped so it never reaches into the hero */
  .charged::before {
    content: "";
    position: absolute;
    left: -240px;
    top: -220px;
    width: 780px;
    height: 920px;
    background: url("../assets/lightning-bolt-transparent.png") no-repeat center / contain;
    transform: rotate(-45deg);
    opacity: 0.38;
    pointer-events: none;
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
  padding: 56px 32px;
}

/* Hero options 2 and 3 (?hero=2 / ?hero=3) reuse the standard layout with a
   different photo swapped into .hero-media via js/main.js. */

.hero-badge {
  width: clamp(150px, 18vw, 220px);
  height: auto;
  /* Layered neon glow: tight bright halo + wide soft bloom */
  filter: drop-shadow(0 0 14px rgba(146, 213, 0, 0.85)) drop-shadow(0 0 42px rgba(146, 213, 0, 0.55));
  animation: badge-flicker 7s linear infinite;
}

/* Neon-sign flicker: glow is ON ~90% of the time; at odd intervals it cuts
   out for a blink (sometimes stuttering) then snaps back — loose-wire neon */
@keyframes badge-flicker {
  0%, 21% {
    filter: drop-shadow(0 0 14px rgba(146, 213, 0, 0.85)) drop-shadow(0 0 42px rgba(146, 213, 0, 0.55));
  }
  21.5% {
    filter: drop-shadow(0 0 0 rgba(146, 213, 0, 0)) drop-shadow(0 0 0 rgba(146, 213, 0, 0));
  }
  23% {
    filter: drop-shadow(0 0 0 rgba(146, 213, 0, 0)) drop-shadow(0 0 0 rgba(146, 213, 0, 0));
  }
  23.5%, 43% {
    filter: drop-shadow(0 0 14px rgba(146, 213, 0, 0.85)) drop-shadow(0 0 42px rgba(146, 213, 0, 0.55));
  }
  /* double stutter: off-on-off-on */
  43.5% {
    filter: drop-shadow(0 0 0 rgba(146, 213, 0, 0)) drop-shadow(0 0 0 rgba(146, 213, 0, 0));
  }
  44.5% {
    filter: drop-shadow(0 0 14px rgba(146, 213, 0, 0.85)) drop-shadow(0 0 42px rgba(146, 213, 0, 0.55));
  }
  45% {
    filter: drop-shadow(0 0 0 rgba(146, 213, 0, 0)) drop-shadow(0 0 0 rgba(146, 213, 0, 0));
  }
  46.5% {
    filter: drop-shadow(0 0 6px rgba(146, 213, 0, 0.3)) drop-shadow(0 0 16px rgba(146, 213, 0, 0.2));
  }
  47.5%, 76% {
    filter: drop-shadow(0 0 14px rgba(146, 213, 0, 0.85)) drop-shadow(0 0 42px rgba(146, 213, 0, 0.55));
  }
  /* single quick blink */
  76.5% {
    filter: drop-shadow(0 0 0 rgba(146, 213, 0, 0)) drop-shadow(0 0 0 rgba(146, 213, 0, 0));
  }
  77.5%, 100% {
    filter: drop-shadow(0 0 14px rgba(146, 213, 0, 0.85)) drop-shadow(0 0 42px rgba(146, 213, 0, 0.55));
  }
}

.hero-headline {
  font-family: var(--font-subheadline);
  font-weight: bold;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-cream);
}

/* Exclusivity note between the headline and the Shop Now button */
.hero-exclusive {
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(228, 246, 209, 0.8);
  margin-top: -12px;
}

/* ---------- Flavor callout (bolt icons flanking the tagline) ---------- */

.flavor-callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 38px 24px;
}

/* Bolts vertically centered against the headline line only */
.flavor-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 34px);
}

.flavor-callout img {
  flex-shrink: 0;
  width: auto;
  height: clamp(30px, 3.4vw, 46px);
  filter: drop-shadow(0 0 12px rgba(146, 213, 0, 0.55));
}

.flavor-callout p {
  min-width: 0;
  font-family: var(--font-subheadline);
  font-weight: bold;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-cream);
}

/* Value props: Tangy / Lightly Sweet / Refreshing */
.flavor-props {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px clamp(14px, 2vw, 26px);
  list-style: none;
}

.flavor-props li {
  font-family: var(--font-subheadline);
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-green);
}

/* Mobile-only line break keeps "taste of Red Berry" together */
.flavor-break {
  display: none;
}

/* Green dot separators between props */
.flavor-props li + li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: clamp(14px, 2vw, 26px);
  border-radius: 50%;
  background: var(--color-green);
  vertical-align: middle;
}

@media (max-width: 760px) {
  .flavor-callout {
    padding: 30px 20px;
  }

  .flavor-main {
    gap: 14px;
  }

  .flavor-callout img {
    height: 28px;
  }

  .flavor-callout p {
    font-size: 0.95rem;
    letter-spacing: 0.14em;
  }

  .flavor-break {
    display: block;
  }
}

/* ---------- Charged With ---------- */

.charged {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  overflow: hidden;
}

/* New pour photo faces left, so media sits on the right wall, list on the left */
.charged-media {
  position: relative;
  align-self: end;
  order: 2;
  padding: 90px 0 0 24px;
}

.charged-pour {
  display: block;
  width: min(94%, 620px);
  margin-left: auto;
  /* Soft fade so the pour stream dissolves instead of cutting off */
  mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
}

.charged-caffeine {
  position: absolute;
  top: 24px;
  right: 12%;
  width: clamp(120px, 14vw, 180px);
  height: auto;
  transform: rotate(14deg);
  /* Same layered neon treatment as the hero badge */
  filter: drop-shadow(0 0 14px rgba(146, 213, 0, 0.85)) drop-shadow(0 0 42px rgba(146, 213, 0, 0.55));
  z-index: 1;
}

.charged-list {
  position: relative;
  padding: 64px 48px 96px clamp(48px, 8vw, 130px);
  max-width: none;
}

.charged-list > * {
  max-width: 520px;
}

.charged-title {
  font-family: var(--font-subheadline);
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 26px;
}

.charged-list ul {
  list-style: none;
}

.charged-list li {
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg, var(--color-green) 0%, rgba(228, 246, 209, 0) 100%) 1;
}

.charged-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-subheadline);
  font-weight: bold;
  font-size: 1.2rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-cream);
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}

.charged-item summary::-webkit-details-marker {
  display: none;
}

.charged-list li:first-child summary {
  padding-top: 0;
}

/* Plus / minus indicator */
.charged-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.charged-toggle::before,
.charged-toggle::after {
  content: "";
  position: absolute;
  background: var(--color-green);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.charged-toggle::before {
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
}

.charged-toggle::after {
  left: 6px;
  top: 0;
  width: 2px;
  height: 14px;
}

.charged-item[open] .charged-toggle::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* Smooth expand/collapse of the dropdown body (graceful snap fallback in
   browsers without ::details-content support) */
.charged-item::details-content {
  opacity: 0;
  block-size: 0;
  overflow-y: clip;
  transition: opacity 0.35s ease, block-size 0.35s ease, content-visibility 0.35s allow-discrete;
}

.charged-item[open]::details-content {
  opacity: 1;
  block-size: auto;
}

.charged-item p {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: rgba(228, 246, 209, 0.8);
  padding: 0 0 18px;
  max-width: 44ch;
}

/* ---------- Quote carousel ---------- */

.quotes {
  /* Solid cream behind the quote block, fading to white below it */
  background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-cream) 62%, #fff 100%);
  padding: 72px 24px 96px;
}

.quotes-inner {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

.stars {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 36px;
}

.stars span {
  width: 34px;
  height: 34px;
  background: var(--color-green);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.quote-viewport {
  display: grid;
  position: relative;
  padding: 0 34px;
}

/* Oversized quotation marks flanking the carousel */
.quote-viewport::before,
.quote-viewport::after {
  font-family: var(--font-headline);
  font-size: 3.4rem;
  font-weight: bold;
  line-height: 1;
  color: var(--color-dark);
  position: absolute;
}

.quote-viewport::before {
  content: "\201C";
  top: -8px;
  left: 0;
}

.quote-viewport::after {
  content: "\201D";
  bottom: -22px;
  right: 0;
}

.quote {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}

.quote.is-active {
  opacity: 1;
  visibility: visible;
}

.quote p {
  font-family: var(--font-subheadline);
  font-weight: bold;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--color-dark);
}

.quote cite {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.9rem;
  margin-top: 14px;
  color: var(--color-dark);
}

.quote-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 44px;
}

.quote-dots button {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--color-dark);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease;
}

.quote-dots button.is-active {
  background: var(--color-dark);
}

/* ---------- Product selector ---------- */

.product {
  position: relative;
  background: #fff;
  padding: 88px 24px 96px;
  overflow: hidden;
}

/* Faint bull-mark watermark, bottom right — kept fully in frame */
.product::after {
  content: "";
  position: absolute;
  right: 48px;
  bottom: 32px;
  width: 520px;
  height: 520px;
  background: url("../assets/wrangler-bull-mark-gray.png") no-repeat center / contain;
  pointer-events: none;
}

.product-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 48px;
  align-items: center;
  max-width: 880px;
  margin-inline: auto;
}

.product-media img {
  max-height: 420px;
  width: auto;
  margin-inline: auto;
  filter: drop-shadow(0 18px 30px rgba(34, 28, 53, 0.25));
  transition: opacity 0.25s ease;
}

.product-media img.is-swapping {
  opacity: 0;
}

.product-title {
  font-family: var(--font-headline);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-dark);
  margin-bottom: 14px;
}

.product-flavor-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-dark);
  margin-bottom: 4px;
}

/* Clarifies what the flavor actually tastes like */
.product-flavor-note {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: rgba(34, 28, 53, 0.65);
  margin-bottom: 14px;
}

.swatches {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}

.swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(34, 28, 53, 0.25);
  cursor: pointer;
  padding: 0;
  transition: box-shadow 0.15s ease;
}

.swatch-original {
  background: var(--color-green);
}

.swatch-sugarfree {
  background: #f4f4f4;
}

.swatch.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-dark);
}

.product-size {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-dark);
  margin-bottom: 26px;
}

/* ---------- Footer (seamless from product section) ---------- */

.site-footer {
  background: #fff;
  text-align: center;
  padding: 8px 24px 40px;
}

.site-footer p {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: rgba(34, 28, 53, 0.65);
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 14px;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: rgba(34, 28, 53, 0.65);
  transition: color 0.2s ease;
}

.social-links a:hover,
.social-links a:focus-visible {
  color: var(--color-green);
}

.social-links svg {
  width: 100%;
  height: 100%;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .hero-badge {
    animation: none;
  }

  .quote,
  .product-media img,
  .btn,
  .charged-item::details-content {
    transition: none;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 920px) {
  .charged-list {
    padding: 48px 32px 80px;
  }

  .charged-item summary,
  .charged-title {
    letter-spacing: 0.22em;
  }
}

@media (max-width: 760px) {
  /* Match desktop: solid near-black behind the hero photo (matches its bottom
     fade), then the Charged With section flows back up to teal */
  .dark-zone {
    background: #0a0e14;
  }

  .charged {
    background: linear-gradient(180deg, #0a0e14 0%, #103649 100%);
  }

  /* Mobile: a smaller rotated bolt lives inside the Charged With info block */
  .charged-list {
    z-index: 0;
  }

  .charged-list::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -230px;
    top: -22%;
    width: 760px;
    height: 148%;
    background: url("../assets/lightning-bolt-transparent.png") no-repeat center / contain;
    transform: rotate(24deg);
    opacity: 0.55;
    pointer-events: none;
  }

  /* Mobile: photo banner on top, content stacked below on the dark zone.
     Pulled up into the photo's bottom fade to fit more above the fold. */
  .hero-content {
    position: relative;
    z-index: 1;
    margin-top: -34px;
    gap: 22px;
    padding: 0 24px 48px;
  }

  .hero-badge {
    width: 150px;
  }

  /* Mobile mockup order: list first, pour art below */
  .charged {
    grid-template-columns: minmax(0, 1fr);
  }

  .charged-list {
    order: -1;
    padding: 8px 28px 40px;
    max-width: none;
  }

  .charged-media {
    padding-top: 70px;
  }

  .charged-caffeine {
    right: auto;
    left: 10%;
    transform: rotate(-12deg);
  }

  .quotes {
    padding: 56px 20px 72px;
  }

  .product {
    padding: 64px 28px 72px;
  }

  .product-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    text-align: center;
  }

  .product-title {
    font-size: 1.15rem;
  }

  /* Keep the full-width button from touching the screen edges */
  .btn-buy {
    max-width: 360px;
  }

  .product-media img {
    max-height: 340px;
  }

  .swatches {
    justify-content: center;
  }

  /* Centered behind the product selector on mobile */
  .product::after {
    width: 440px;
    height: 440px;
    right: auto;
    bottom: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}