/* ================================
   Frozen Sweet – Modern Retro CSS
   CLEAN FULL REWRITE (INDEX‑CONSISTENT)
   ================================ */

:root {
  --blue: #8fd6ff;
  --blue-dark: #1f4f7a;
  --blue-soft: #eaf7ff;
  --orange: #ffe3c2;
  --orange-deep: #ffbf7a;
  --cream: #fffaf3;
  --text: #2a2a2a;
  --text-soft: #4a4a4a;
  --border-soft: #d8e6ef;
  --radius: 22px;
  --shadow-soft: 0 3px 8px rgba(0,0,0,0.06);
  --shadow-card: 0 4px 12px rgba(0,0,0,0.08);
}

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

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: var(--cream);
  line-height: 1.55;
}

a {
  color: var(--blue-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

/* ================================
   HEADER
   ================================ */

.site-header {
  background: #ffffff;
  border-bottom: 2px solid var(--orange);
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: center;   /* center everything */
  gap: 40px;                 /* spacing between logo and nav */
  padding: 14px 0;
}

.logo img {
  height: 70px;
  display: block;
  animation: logo-float 4.5s ease-in-out infinite;
}

@keyframes logo-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.main-nav a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-soft);
  padding: 6px 10px;
  border-radius: 8px;
  transition: 0.2s ease;
}

.main-nav a:hover {
  background: var(--orange);
  color: var(--text);
}

/* ================================
   MOBILE NAV (HAMBURGER)
   ================================ */

@media (max-width: 900px) {

  /* Show hamburger on mobile */
  .mobile-menu-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 1.9rem;
    cursor: pointer;
    padding: 6px 10px;
  }

  /* Hide nav by default on mobile */
  .main-nav {
    display: none;
    flex-direction: column;
    gap: 14px;
    padding: 14px 0;
    background: #ffffff;
    border-top: 2px solid var(--orange);
  }

  /* Show nav when hamburger toggles it */
  .main-nav.active {
    display: flex;
  }
}

/* Hide hamburger on desktop */
.mobile-menu-toggle {
  display: none;
}


/* Hide hamburger on desktop */
.mobile-menu-toggle {
  display: none;
}

/* ================================
   HERO
   ================================ */

.hero {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, var(--cream) 70%);
  padding: 70px 0 60px;
  border-bottom: 2px solid var(--orange);
  overflow: hidden;
}

.outline {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.outline-california {
  left: -40px;
  top: 20px;
  width: 380px;
  opacity: 0.45;
  filter: blur(.75px);
}

.outline-wisconsin {
  right: -40px;
  top: 40px;
  width: 320px;
  opacity: 0.17;
  filter: blur(.75px);
}

.hero-inner,
.hero-text,
.hero-image {
  position: relative;
  z-index: 3;
}

/* ================================
   ABOUT PAGE BACKGROUND
   ================================ */

.roots-tile {
  position: relative;
  overflow: hidden;
}

.roots-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/background_store.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  filter: blur(1px);
  z-index: 0;
}

.roots-tile > * {
  position: relative;
  z-index: 1;
}

/* ================================
   WHOLESALE PAGE BACKGROUNDS
   ================================ */

.wholesale-hero-1,
.wholesale-hero-2 {
  position: relative;
  overflow: hidden;
}

.wholesale-hero-1::before,
.wholesale-hero-2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  filter: blur(1px);
  z-index: 0;
}

.wholesale-hero-1::before {
  background-image: url("../images/wholesale.jpg");
  opacity: 0.55;
  filter: blur(1px) brightness(0.75);
}

.wholesale-hero-2::before {
  background-image: url("../images/wholesale-1.jpg");
  opacity: 0.55;
  filter: blur(1px) brightness(0.75);
}


.wholesale-hero-1 > *,
.wholesale-hero-2 > * {
  position: relative;
  z-index: 1;
}

/* ================================
   FARMERS MARKETS PAGE
   ================================ */

.markets-tile {
  position: relative;
  overflow: hidden;
  padding-bottom: 40px;              /* ensures background ends cleanly */
  border-bottom: 2px solid var(--orange); /* clean divider above footer */
}

.markets-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/626.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.70;
  filter: blur(2px);
  z-index: 0;
}

.markets-tile > * {
  position: relative;
  z-index: 1;
}

/* ================================
   GALLERY PAGE GRID
   ================================ */

.insta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

@media (max-width: 900px) {
  .insta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .insta-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================
   FOOTER (INDEX‑CONSISTENT)
   ================================ */

.site-footer {
  background: #ffffff;   /* clean, no gradient */
  border-top: none;      /* divider handled by section above */
  padding: 24px 0 28px;
  margin-top: 0;         /* no extra gap */
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  font-size: 0.95rem;
  align-items: center;
}

.footer-inner > div {
  flex: 1;
}

.footer-inner > div:first-child {
  text-align: left;
}

.footer-inner > div:nth-child(2) {
  text-align: center;
}

.footer-note-wrapper {
  text-align: center;
  margin-left: auto;
}

.footer-subnote {
  font-style: italic;
  opacity: 0.85;
  margin-top: 4px;
}

/* ================================
   SECTION 2 — 25/50/25 STRETCHED BACKGROUND
   ================================ */

.custard-explainer {
  position: relative;
  overflow: hidden;
  padding: 90px 0;
  background: var(--cream);
  border-bottom: 2px solid var(--orange);
  height: 520px;
}

.custard-explainer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("../images/cone.jpg"),
    url("../images/matcha.jpg"),
    url("../images/cup.jpg");
  background-size:
    25% 100%,
    50% 100%,
    25% 100%;
  background-position:
    left center,
    center center,
    right center;
  background-repeat: no-repeat;
  filter: blur(1px) brightness(0.75);
  opacity: 0.60;
  z-index: 0;
}

.custard-explainer .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .custard-explainer {
    height: 420px;
  }

  .custard-explainer::before {
    background-image: url("../images/matcha.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0.45;
    filter: blur(2px) brightness(0.75);
  }
}

/* ================================
   FARMERS MARKETS — CARD GRID
   ================================ */

.markets-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 10px;
}

.market-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.market-card {
  background: #ffffff;
  border: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: 12px 18px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}

.market-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.12),
    0 0 35px rgba(200, 90, 0, 0.75);
}

.market-card h3 {
  margin: 2px 0 8px;
  font-size: 1.25rem;
  line-height: 1.2;
}

.market-card p {
  margin: 2px 0;
  line-height: 1.3;
}

.market-card p:last-child {
  margin-bottom: 0;
}

.market-status {
  font-weight: bold;
  margin-bottom: 4px;
}

.market-status.active {
  color: #2a7a2a;
}

.market-status.paused {
  color: #a88a00;
  opacity: 0.8;
}

.market-card-link.paused .market-card {
  opacity: 0.65;
}

.market-instructions {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 20px;
  color: var(--blue-dark);
  letter-spacing: 0.5px;
}

/* INDEX — spacing below the Farmers/Wholesale/Flavors cards */
.roots-hero.clean-roots {
  padding-bottom: 60px;
}

/* ================================
   FROZEN SWEET — SOFT BLUE SQUIRCLE BUTTON
   ================================ */

.fs-btn {
  display: inline-block;
  background: linear-gradient(
    to bottom,
    var(--blue) 0%,
    #7fc8f0 100%
  );
  color: #0f2f4a;
  padding: 5px 15px;
  border-radius: 10px; /* squircle */
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.3px;
  text-decoration: none;
  position: relative;
  overflow: hidden;

  /* softer shadow */
  box-shadow: 0 3px 8px rgba(0,0,0,0.10);

  transition:
    transform 0.18s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

/* Hover bounce */
.fs-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.14);
}

/* Active click */
.fs-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,0.10);
}

/* Shimmer overlay — softened */
.fs-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.25) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: all 0.6s ease;
}

/* Trigger shimmer */
.fs-btn:hover::after {
  left: 120%;
}

/* INDEX — Darker text inside the custard explainer section */
.custard-explainer p {
  color: #1a1a1a !important;
}

/* INDEX — Darker, clearer paragraph text */
.custard-explainer p {
  color: #0d0d0d !important;   /* deep, readable, not harsh */
  font-weight: 500;            /* slight weight boost for clarity */
}

/* ================================
   MENU PAGE — FLAVOR CARD GRID
   ================================ */

.flavor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.flavor-card {
  background: #ffffff;
  border: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.flavor-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.12),
    0 0 35px rgba(200, 90, 0, 0.75);
}

.flavor-card h3 {
  margin: 6px 0 4px;
  font-size: 1.2rem;
  line-height: 1.2;
}

.flavor-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-soft);
}

/* ================================
   FLAVOR TILE PLACEHOLDER COLORS
   ================================ */

.flavor-image {
  height: 140px;
  border-radius: 14px;
  margin-bottom: 10px;
  background-size: cover;
  background-position: center;
}

/* Core Flavors */
.flavor-vanilla      .flavor-image { background: #F7EEDB; }
.flavor-chocolate    .flavor-image { background: #C7A27A; }
.flavor-coffee       .flavor-image { background: #D2B49C; }
.flavor-matcha       .flavor-image { background: #CDE3C1; }
.flavor-lemon        .flavor-image { background: #FFF4B8; }
.flavor-mango        .flavor-image { background: #FFD39B; }
.flavor-strawberry   .flavor-image { background: #FFB7C5; }
.flavor-raspberry    .flavor-image { background: #FF9BB3; }
.flavor-ube          .flavor-image { background: #D9C4F0; }
.flavor-pistachio    .flavor-image { background: #D7E8C4; }
.flavor-pandan       .flavor-image { background: #D4F2D2; }
.flavor-avocado      .flavor-image { background: #CDE6C1; }
.flavor-hazelnut     .flavor-image { background: #E4C9A8; }
.flavor-blue-moon    .flavor-image { background: #C7DFFF; }
.flavor-banana-nut   .flavor-image { background: #F8E7B5; }
.flavor-thai-tea     .flavor-image { background: #F4C49B; }

/* Seasonal */
.flavor-lychee       .flavor-image { background: #FFE4EC; }
.flavor-durian       .flavor-image { background: #F7F2C2; }
.flavor-pumpkin      .flavor-image { background: #FFCE8A; }
.flavor-chocomint    .flavor-image { background: #C8F5E1; }

/* Sorbets */
.flavor-sorbet-mango     .flavor-image { background: #FFD39B; }
.flavor-sorbet-raspberry .flavor-image { background: #FF9BB3; }
.flavor-sorbet-lemon     .flavor-image { background: #FFF4B8; }
.flavor-sorbet-peach     .flavor-image { background: #FFD1B3; }

/* ================================
   SPARKLE ENGINE — VERTICAL FALL FIX
   ================================ */

.spark {
  position: absolute;
  font-size: 14px;
  pointer-events: none;
  opacity: 0;
  animation-fill-mode: forwards;
  z-index: 5; /* stays above flavor tiles */
}

@keyframes sparkle-fall {
  0% {
    transform: translateY(-20px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(60px) scale(0.6);
    opacity: 0;
  }
}

@keyframes sparkle-color {
  0%   { color: #ffffff; }
  50%  { color: var(--orange-deep); }
  100% { color: #ffffff; }
}

/* NOVELTIES — Condensed, Centered Image Tiles */
.flavor-grid-section .flavor-card .flavor-image {
  height: 120px;              /* was 140px — tighter */
  border-radius: 14px;
  background-size: cover;
  background-position: center center; /* ensures perfect centering */
  margin-bottom: 10px;
}

/* Optional: make all novelty cards equal height */
.flavor-grid-section .flavor-card {
  min-height: 260px; /* keeps all 3 cards visually balanced */
}

/* ================================
   NOVELTIES — Manual Zoom Control
   ================================ */

:root {
  --novelty-zoom: 100%;   /* ← adjust this number anytime */
}

/* Make ALL flavor images the same shape and size */
.flavor-image {
  aspect-ratio: 4 / 3;     /* consistent box shape */
  height: auto;            /* let aspect ratio control height */
  width: 100%;             /* full width of card */
  background-size: cover;  /* keeps placeholder colors looking good */
  background-position: center;
  border-radius: 14px;
}

/* Center all flavor section headers */
.flavor-title {
  text-align: center;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.retro-divider {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ================================
   FOOTER — MINI SQUIRCLE BUTTONS
   ================================ */

.footer-inner .email-link-protect,
.footer-inner .phone-link-protect {
  display: inline-block;
  background: linear-gradient(
    to bottom,
    var(--blue) 0%,
    #7fc8f0 100%
  );
  color: #0f2f4a;
  padding: .5px 8px;          /* mini size */
  border-radius: 6px;         /* small squircle */
  font-weight: 600;
  font-size: 0.85rem;         /* smaller text */
  letter-spacing: 0.3px;
  text-decoration: none;
  margin-right: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition:
    transform 0.18s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

/* Hover bounce */
.footer-inner .email-link-protect:hover,
.footer-inner .phone-link-protect:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.16);
}

/* Active click */
.footer-inner .email-link-protect:active,
.footer-inner .phone-link-protect:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Shimmer overlay */
.footer-inner .email-link-protect::after,
.footer-inner .phone-link-protect::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.25) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: all 0.6s ease;
}

/* Trigger shimmer */
.footer-inner .email-link-protect:hover::after,
.footer-inner .phone-link-protect:hover::after {
  left: 120%;
}

/* Ensure shimmer works */
.footer-inner .email-link-protect,
.footer-inner .phone-link-protect {
  position: relative;
  overflow: hidden;
}

/* Darker sparkles on hover */
.spark {
  color: #1f4f7a; /* deep blue */
}

@keyframes sparkle-color {
  0%   { color: #1f4f7a; }   /* deep blue */
  50%  { color: #0d2a45; }   /* even darker blue */
  100% { color: #1f4f7a; }
}

/* Extended sparkle fall distance */
@keyframes sparkle-fall {
  0% {
    transform: translateY(-20px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(160px) scale(0.6); /* was 60px */
    opacity: 0;
  }
}

/* Sparkles — more random, with rotation */
@keyframes sparkle-fall {
  0% {
    transform: translateY(-20px) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(160px) rotate(180deg) scale(0.6);
    opacity: 0;
  }
}

/* Left‑aligned Wholesale intro, matching rest of page */
.wholesale-hero {
  max-width: 850px;
  margin: 50px auto 40px auto;
  padding: 0 20px;
  text-align: left;
}

/* Darker, clearer paragraph text for Wholesale sections */
.wholesale-hero-1 p,
.wholesale-hero-2 p {
  color: #0d0d0d !important;   /* same deep readable color as index */
  font-weight: 500;            /* slight weight boost for clarity */
}

/* Darker text for lists inside Wholesale sections */
.wholesale-hero-1 li,
.wholesale-hero-2 li {
  color: #0d0d0d !important;   /* same deep readable color as index */
  font-weight: 500;            /* matches the paragraph weight */
}

/* Fix About-page background section bleeding */
.about-hero-1 {
  position: relative;
  overflow: hidden;
  padding: 60px 0;   /* defines the section height so the background stops */
}

.about-hero-1::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/about-midwest.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  filter: blur(1.5px) brightness(0.75);
  z-index: 0;
}

.about-hero-1 .container {
  position: relative;
  z-index: 1;
}

.about-hero-1 {
  position: relative;
  overflow: hidden;
  padding: 60px 0;
}

.about-hero-1::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/about-midwest.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  filter: blur(1.5px) brightness(0.75);
  z-index: 0;
}

.about-hero-1 .container {
  position: relative;
  z-index: 1;
}

/* ABOUT PAGE — Midwest Roots + Crafted the Right Way background */
.about-hero-1 {
  position: relative;
  overflow: hidden;
  padding: 60px 0;
  background: none;
}

.about-hero-1::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/background_store.jpg"); /* <-- YOUR IMAGE */
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  filter: blur(1.5px) brightness(0.75);
  z-index: 0;
}

.about-hero-1 .container {
  position: relative;
  z-index: 1;
}

/* Fine‑tuned spacing for the About page header */
.page-header {
  padding-top: 30px;     /* adjust this number for more/less top space */
  padding-bottom: 60px;   /* adjust this number for more/less bottom space */
}

.page-header h1 {
  margin-bottom: 20px;    /* keeps clean spacing above the paragraph */
}

/* Unified About-page block spacing */
.about-block-1 {
  padding-top: 50px;     /* adjust this number */
  padding-bottom: 50px;  /* adjust this number */
}

/* Darker text for the Midwest Roots + Crafted the Right Way section */
.about-hero-1 p,
.about-hero-1 li {
  color: #0d0d0d !important;
  font-weight: 500;
}

/* Custom spacing for Farmers Markets tile section */
.markets-tile {
  padding-top: 100px;     /* adjust this number */
  padding-bottom: 150px;  /* adjust this number */
}

/* Wholesale page spacing controls */

/* Section 1 — Why Partner With Frozen Sweet? */
.wholesale-spacing-1 {
  padding-top: 50px;     /* adjust as needed */
  padding-bottom: 50px;  /* adjust as needed */
}

/* Section 2 — Wholesale Products */
.wholesale-spacing-2 {
  padding-top: 50px;
  padding-bottom: 50px;
}

/* Section 3 — Available Flavors + Ordering & Pricing */
.wholesale-spacing-3 {
  padding-top: 50px;
  padding-bottom: 50px;
}
/* Section 4 — Wholesale & Bulk Orders spacing */
.wholesale-spacing-4 {
  padding-top: 50px;     /* adjust as needed */
  padding-bottom: 50px;  /* adjust as needed */
}

.footer-button {
  display: inline-block;
  background: var(--orange);
  color: white !important;
  padding: 10px 20px;
  border-radius: 6px;
  margin-right: 12px;
  text-decoration: none;
  font-weight: 700;
  transition: background 0.2s ease;
}

.footer-button:hover {
  background: var(--orange-dark);
}

/* Contact page — spacing control for the message form section */
.contact-form-spacing {
  padding-top: 40px;     /* adjust as needed */
  padding-bottom: 50px;  /* adjust as needed */
}

/* Force logo animation on every page load */
header .logo img {
  opacity: 0;
  transform: translateX(-40px) scale(0.85);
  animation: logoZoomIn 0.9s ease-out forwards !important;
}

@keyframes logoZoomIn {
  0% {
    opacity: 0;
    transform: translateX(-40px) scale(0.85);
  }
  60% {
    opacity: 1;
    transform: translateX(0) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.contact-form button.fs-btn {
  pointer-events: auto;
  position: relative;
  z-index: 10;
}

.market-status.special {
  color: #d62828; /* clean bright red */
  font-weight: 700;
}
.market-status.special {
  color: #d62828; /* premium deep red */
  font-weight: 700;
}

.markets-subheading {
  font-size: 1.8rem;
  font-weight: 750;
  margin: 40px 0 20px;
  text-align: left;
  color: var(--text);
}

/* EVENTS should use the SAME layout as Farmers Markets */
.events-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start; /* left aligned */
}

header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #fff;
}

.page-section,
.container {
  overflow: visible !important;
}

\/* Ensure the header wrapper keeps its height */
#header-include {
  position: relative;
  z-index: 9999;
}

/* Make the actual header sticky */
#header-include header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #ffffff;
}

/* Make the injected header stay at the top on all pages */
#header-include {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

/* Ensure the header itself has a solid background */
#header-include header {
  background: #ffffff;
}

#header-include {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* Offset page content so it doesn't hide under the fixed header */
body {
  padding-top: 100px; /* adjust to match your header height */
}

/* Ensure hamburger button is always visible on mobile */
.mobile-menu-toggle {
  position: relative;
  z-index: 10000; /* higher than #header-include */
  display: block;
}

/* Ensure the mobile nav button is not hidden by fixed header */
#header-include {
  z-index: 9999;
}

/* Instagram Grid */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.insta-grid a {
  display: block;
  width: 100%;
}

.insta-grid img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
  display: block;
}

/* ================================
   FINAL MOBILE NAV OVERRIDES
   ================================ */

@media (max-width: 900px) {

  .main-nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 0;
    background: #ffffff;
    border-top: 2px solid var(--orange);

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease;
  }

  .main-nav.active {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-menu-toggle {
    display: block !important;
    background: none;
    border: none;
    font-size: 1.9rem;
    cursor: pointer;
    padding: 6px 10px;
    position: relative;
    z-index: 2000;
  }
}

/* Hide hamburger on desktop */
.mobile-menu-toggle {
  display: none;
}

/* ================================
   FINAL MOBILE NAV OVERRIDES
   ================================ */

@media (max-width: 900px) {

  .main-nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 0;
    background: #ffffff;
    border-top: 2px solid var(--orange);

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease;
  }

  .main-nav.active {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-menu-toggle {
    display: block !important;
    background: none;
    border: none;
    font-size: 1.9rem;
    cursor: pointer;
    padding: 6px 10px;
    position: relative;
    z-index: 2000;
  }
}

/* Hide hamburger on desktop */
.mobile-menu-toggle {
  display: none;
}

/* ================================
   FINAL MOBILE NAV OVERRIDES
   ================================ */

@media (max-width: 900px) {

  @media (max-width: 900px) {

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;

    /* NEW: slight transparency + soft blur */
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(5px);

    /* soft shadow */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);

    border-top: 2px solid var(--orange);

    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 0;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease;
  }

  .main-nav.active {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-menu-toggle {
    display: block !important;
    background: none;
    border: none;
    font-size: 1.9rem;
    cursor: pointer;
    padding: 6px 10px;
    position: relative;
    z-index: 4000;
  }
}

/* Hide hamburger on desktop */
.mobile-menu-toggle {
  display: none;
}