/**
 * Brand layer: gradients and CTAs aligned with js/shaved-ice.js palette.
 */
:root {
  --ice-coral: #ff6b6b;
  --ice-aqua: #4ecdc4;
  --ice-sky: #45b7d1;
  --ice-pink: #ff6b9d;
  --ice-sun: #ffe66d;
  --ice-lilac: #c56bff;
  --ice-navy: #1e3a5f;
  --ice-btn-glow: 0 4px 20px rgb(78 205 196 / 35%),
    0 2px 12px rgb(255 107 107 / 28%);
  --ice-btn-glow-hover: 0 6px 28px rgb(78 205 196 / 45%),
    0 4px 18px rgb(255 107 155 / 35%);
}

/* --- Wordmark (Fredoka set on .ice-wordmark in HTML) --- */
.ice-wordmark {
  font-family: "Fredoka", var(--font-display), system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ice-wordmark__para {
  display: inline-block;
  background: linear-gradient(
    125deg,
    var(--ice-coral) 0%,
    var(--ice-pink) 45%,
    #ff8ec5 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ice-coral);
  -webkit-text-fill-color: transparent;
}

.ice-wordmark__dice {
  display: inline-block;
  background: linear-gradient(
    125deg,
    var(--ice-aqua) 0%,
    var(--ice-sky) 40%,
    #3b5bdb 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ice-navy);
  -webkit-text-fill-color: transparent;
}

/* --- Primary CTA --- */
.ice-btn {
  position: relative;
  isolation: isolate;
}

.ice-btn--primary {
  border: none;
  border-radius: 9999px;
  background: linear-gradient(
    115deg,
    var(--ice-coral) 0%,
    var(--ice-pink) 35%,
    var(--ice-aqua) 72%,
    var(--ice-sky) 100%
  );
  background-size: 140% 100%;
  color: #fff !important;
  box-shadow: var(--ice-btn-glow);
  transition: background-position 0.35s ease, box-shadow 0.35s ease,
    transform 0.3s ease;
}

.ice-btn--primary:hover {
  background-position: 100% 50%;
  box-shadow: var(--ice-btn-glow-hover);
}

.ice-btn--primary:focus-visible {
  outline: 2px solid var(--ice-aqua);
  outline-offset: 3px;
}

.ice-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.2;
  filter: url(#ice-noise);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* --- Secondary CTA --- */
.ice-btn--secondary {
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box,
    linear-gradient(
        125deg,
        var(--ice-coral),
        var(--ice-sun),
        var(--ice-aqua),
        var(--ice-lilac)
      )
      border-box;
  color: var(--ice-navy) !important;
  box-shadow: 0 2px 16px rgb(78 205 196 / 12%),
    0 1px 6px rgb(255 107 107 / 10%);
  transition: box-shadow 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

.ice-btn--secondary:hover {
  background: linear-gradient(
        rgb(255 255 255 / 92%),
        rgb(250 252 255 / 98%)
      )
      padding-box,
    linear-gradient(
        125deg,
        var(--ice-coral),
        var(--ice-sun),
        var(--ice-aqua),
        var(--ice-lilac)
      )
      border-box;
  box-shadow: 0 4px 24px rgb(78 205 196 / 22%),
    0 2px 12px rgb(255 107 155 / 18%);
  filter: brightness(1.02);
}

.ice-btn--secondary:focus-visible {
  outline: 2px solid var(--ice-sky);
  outline-offset: 3px;
}

/* --- Nav link accent --- */
.ice-nav-link__line {
  background: linear-gradient(
    90deg,
    var(--ice-coral),
    var(--ice-aqua)
  ) !important;
}

/* --- Scrolled header --- */
#site-header:not(.bg-transparent) {
  border-bottom: 1px solid rgb(78 205 196 / 12%);
  box-shadow: 0 8px 32px rgb(30 58 95 / 6%);
}

/* --- Our Story (#about) --- */
.ice-story-section::before {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: -25% -10%;
  background: radial-gradient(
      circle at 12% 28%,
      rgb(255 107 155 / 0.14) 0%,
      transparent 42%
    ),
    radial-gradient(
      circle at 88% 18%,
      rgb(78 205 196 / 0.16) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 72% 88%,
      rgb(255 230 109 / 0.2) 0%,
      transparent 45%
    ),
    radial-gradient(
      circle at 8% 85%,
      rgb(197 107 255 / 0.12) 0%,
      transparent 38%
    );
  z-index: 0;
}

.ice-story-illos {
  filter: drop-shadow(0 14px 28px rgb(78 205 196 / 0.22))
    drop-shadow(0 6px 18px rgb(255 107 155 / 0.16));
}

.ice-kicker {
  display: inline-block;
  background: linear-gradient(
    105deg,
    var(--ice-coral) 0%,
    var(--ice-pink) 45%,
    var(--ice-aqua) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ice-coral);
  -webkit-text-fill-color: transparent;
}

.ice-section-heading {
  background: linear-gradient(
    118deg,
    var(--ice-navy) 0%,
    var(--ice-sky) 38%,
    var(--ice-aqua) 68%,
    var(--ice-lilac) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ice-navy);
  -webkit-text-fill-color: transparent;
}

.ice-puff-icon {
  box-shadow: 0 6px 22px rgb(78 205 196 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 0.8);
  border: 1px solid rgb(78 205 196 / 0.3);
}

.ice-puff-icon--mint {
  background: linear-gradient(
    145deg,
    rgb(78 205 196 / 0.38),
    rgb(69 183 209 / 0.22),
    rgb(255 230 109 / 0.18)
  );
}

.ice-puff-icon--sun {
  background: linear-gradient(
    145deg,
    rgb(255 230 109 / 0.48),
    rgb(168 224 99 / 0.28),
    rgb(78 205 196 / 0.22)
  );
}

.ice-puff-icon--pink {
  background: linear-gradient(
    145deg,
    rgb(255 107 155 / 0.38),
    rgb(197 107 255 / 0.26),
    rgb(78 205 196 / 0.18)
  );
}

.ice-puff-icon__svg {
  color: var(--ice-navy);
  opacity: 0.88;
}

/* --- Market schedule (#locations) --- */
.ice-schedule-section {
  background: linear-gradient(
    185deg,
    rgb(252 253 255) 0%,
    rgb(247 252 250) 38%,
    rgb(255 250 252) 72%,
    rgb(252 254 255) 100%
  );
}

.ice-schedule-section::before {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 95% 55% at 50% -5%,
    rgb(78 205 196 / 0.1),
    transparent 52%
  );
  z-index: 0;
}

.ice-market-card--active {
  border: 2px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
    linear-gradient(
        125deg,
        var(--ice-aqua),
        var(--ice-sun),
        var(--ice-coral),
        var(--ice-lilac)
      )
      border-box;
  box-shadow: 0 10px 36px rgb(78 205 196 / 14%),
    0 2px 10px rgb(255 107 107 / 8%);
}

.ice-market-card--active:hover {
  box-shadow: 0 14px 42px rgb(78 205 196 / 22%),
    0 4px 14px rgb(255 107 155 / 12%);
}

.ice-market-card--inactive {
  opacity: 0.62;
  background: linear-gradient(165deg, rgb(248 250 252), rgb(252 250 251));
  border: 2px dashed rgb(78 205 196 / 0.38) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.65);
}

.ice-market-card__dot {
  background: linear-gradient(135deg, var(--ice-aqua), var(--ice-sky));
  box-shadow: 0 0 14px rgb(78 205 196 / 48%);
}

.ice-market-card__dot--inactive {
  background: linear-gradient(135deg, rgb(148 163 184), rgb(203 213 225));
  box-shadow: none;
}

.ice-schedule-badge {
  background: linear-gradient(
    110deg,
    rgb(78 205 196 / 0.24),
    rgb(255 230 109 / 0.4),
    rgb(255 107 155 / 0.22)
  );
  color: var(--ice-navy) !important;
  border: 1px solid rgb(78 205 196 / 0.38);
  box-shadow: 0 2px 10px rgb(78 205 196 / 14%);
}

.ice-schedule-accordion {
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box,
    linear-gradient(
        125deg,
        var(--ice-aqua),
        var(--ice-sun),
        var(--ice-pink)
      )
      border-box;
  box-shadow: 0 10px 40px rgb(78 205 196 / 12%),
    0 2px 8px rgb(30 58 95 / 6%);
}

.ice-schedule-accordion[open] .ice-schedule-accordion__summary {
  border-bottom: 1px solid rgb(78 205 196 / 0.16);
}

.ice-schedule-accordion__summary:hover {
  background: linear-gradient(
    90deg,
    rgb(78 205 196 / 0.08),
    rgb(255 230 109 / 0.09)
  );
}

.ice-schedule-accordion__body {
  border-top: 1px solid rgb(78 205 196 / 0.2);
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.92),
    rgb(246 252 251 / 0.96)
  );
}

.ice-schedule-footnote {
  color: rgb(30 58 95 / 0.48);
}

/* --- Simple pricing card (flavors section) --- */
.ice-pricing-card {
  border: 2px solid transparent;
  background: linear-gradient(
        rgb(255 255 255),
        rgb(252 254 253)
      )
      padding-box,
    linear-gradient(
        125deg,
        var(--ice-aqua),
        var(--ice-sun),
        var(--ice-coral),
        var(--ice-lilac)
      )
      border-box;
  box-shadow: 0 10px 36px rgb(78 205 196 / 12%),
    0 2px 10px rgb(255 107 107 / 7%);
}

.ice-pricing-card__title {
  background: linear-gradient(
    118deg,
    var(--ice-navy) 0%,
    var(--ice-sky) 38%,
    var(--ice-aqua) 68%,
    var(--ice-lilac) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ice-navy);
  -webkit-text-fill-color: transparent;
}

.ice-pricing-row {
  border-bottom: 1px solid rgb(78 205 196 / 0.22);
}

.ice-pricing-row--last {
  border-bottom: none;
}

.ice-pricing-amount {
  background: linear-gradient(
    115deg,
    var(--ice-coral) 0%,
    var(--ice-pink) 40%,
    var(--ice-aqua) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ice-coral);
  -webkit-text-fill-color: transparent;
}

/* --- Social & email icon buttons --- */
.ice-social-hit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgb(78 205 196 / 0.3);
  box-shadow: 0 4px 16px rgb(78 205 196 / 14%),
    inset 0 1px 0 rgb(255 255 255 / 0.78);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ice-social-hit:focus-visible {
  outline: 2px solid var(--ice-aqua);
  outline-offset: 3px;
}

.ice-social-hit:hover {
  box-shadow: 0 8px 26px rgb(78 205 196 / 22%),
    0 2px 12px rgb(255 107 155 / 14%),
    inset 0 1px 0 rgb(255 255 255 / 0.85);
}

.ice-social-hit--round {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
}

.ice-social-hit--tile {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
}

.ice-social-hit--insta {
  background: linear-gradient(
    145deg,
    rgb(255 107 155 / 0.44),
    rgb(255 230 109 / 0.4),
    rgb(78 205 196 / 0.3)
  );
}

.ice-social-hit--email {
  background: linear-gradient(
    145deg,
    rgb(78 205 196 / 0.42),
    rgb(69 183 209 / 0.3),
    rgb(255 107 155 / 0.22)
  );
}

.ice-social-hit__svg {
  color: var(--ice-navy);
  opacity: 0.9;
}

.ice-social-hit--round.ice-social-hit--insta:hover {
  transform: scale(1.08) rotate(6deg);
}

.ice-social-hit--round.ice-social-hit--email:hover {
  transform: scale(1.08) rotate(-6deg);
}

.ice-social-hit--tile:hover {
  transform: scale(1.06);
}

.ice-parent-link {
  font-weight: 600;
  color: rgb(30 58 95 / 0.72);
  text-decoration: underline;
  text-decoration-color: rgb(78 205 196 / 0.45);
  text-underline-offset: 0.18em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.ice-parent-link:hover {
  color: var(--ice-coral);
  text-decoration-color: rgb(255 107 107 / 0.5);
}

.ice-parent-link:focus-visible {
  outline: 2px solid var(--ice-aqua);
  outline-offset: 3px;
  border-radius: 2px;
}