/* === Wedding & Events Theme Override (light, elegant, airy) === */
@font-face{font-family:"Inter";src: local("Inter");}
@font-face{font-family:"Playfair Display";src: local("Playfair Display");}

/* Palette + tokens */
:root{
  --bg: #fffaf7;            /* soft ivory */
  --bg-grad-1: #ffffff;
  --bg-grad-2: #fff5ee;
  --fg: #2a2a2a;            /* deep charcoal for readability */
  --muted: rgba(0,0,0,.62);
  --glass: rgba(255,255,255,.66);       /* light panels */
  --glass-strong: rgba(255,255,255,.82);
  --border: rgba(0,0,0,.08);
  --ring: rgba(221, 178, 84, .45);      /* champagne ring */
  --fuchsia: #c08dbf;       /* softened accent */
  --violet: #a88fb0;
  --cyan: #9ecad4;
  --rose: #e6a8ad;
  --gold: #dcbf6a;
  --shadow: rgba(20,20,20,.08);
}

/* Global */
html, body{
  background: linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2));
  color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
.h1,.h2,.h3, h1,h2,h3{
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  letter-spacing: .005em;
}
.h1{ font-weight: 700; }
.lead{ color: rgba(0,0,0,.7); }

/* Cards / panels */
.card, .panel, .glass, .badge{
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px var(--shadow);
  backdrop-filter: blur(6px);
}
.badge{ color: var(--fg); }
.badge.neon-fuchsia, .badge.neon-cyan{ box-shadow:none; background: var(--glass-strong); border-color: var(--border); }

/* Buttons */
.btn{
  border-radius: 999px;
  padding: .8rem 1.2rem;
  border: 1px solid var(--border);
  color: var(--fg);
  box-shadow: 0 6px 20px var(--shadow);
}
.btn.primary{
  color: #2b2312;
  background: linear-gradient(90deg, #f3e7c7, #e9d59a 55%, #f3e7c7);
  border-color: rgba(200,160,60,.35);
}
.btn.secondary{
  background: #ffffffcc;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px var(--shadow); }

/* Links */
a{ color: #8a6a2f; }
a:hover{ color: #6e531e; }

/* Hero & header */
.hero{
  --overlay: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.75));
}
.hero .kicker{ color: rgba(0,0,0,.55); }
.nav, header, .site-header{
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

/* Dividers softer */
.section+.section:before{
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent) !important;
}

/* Forms */
input, textarea, select{
  background: #fff;
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 12px;
}

/* Pills / tags */
.pill, .tag{
  background:#fff; border:1px solid var(--border); color:var(--fg);
}

/* Footer */
footer{
  background: #fff9f3;
  color: rgba(0,0,0,.75);
  border-top:1px solid var(--border);
}

/* Util tweaks to invert specific dark-only elements if present */
.neon, .scanline, .gridlines{ opacity:.1; filter: saturate(.4); }


/* --- Ensure hero video remains visible in light theme --- */
.hero{ position: relative; }
.hero .video-wrap{ z-index: 0 !important; }
.hero .veil{
  z-index: 1 !important;
  mix-blend-mode: normal !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.65));
}
.hero .content{ position: relative; z-index: 2 !important; }
.bg-video{ opacity: 1 !important; }


/* Smooth gradient fix */
html, body {
  background: linear-gradient(180deg,
    var(--bg-grad-1) 0%,
    var(--bg-grad-2) 45%,
    rgba(255,255,255,0) 100%) no-repeat;
  background-attachment: fixed;
}
.hero .veil {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.75) 40%,
    rgba(255,255,255,0) 100%) !important;
}
.section {
  background-color: var(--bg-grad-2);
}


/* === Seamless background + hero fade fix === */

/* Softer, longer page gradient to avoid banding and hard seams */
html, body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,.35), transparent 70%),
    linear-gradient(180deg, #fffaf7 0%, #fffaf7 35%, #fffdfb 65%, #ffffff 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
}

/* Fade the hero into the page so there is no horizontal line */
.hero{ position: relative; overflow: clip; }
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:14vh; /* long fade */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 45%, #fffdfb 80%, #ffffff 100%);
  z-index: 2; pointer-events:none;
}

/* Keep stacking order: video at 0, veil at 1, content at 3, fade overlay at 2 */
.hero .video-wrap{ z-index:0 !important; }
.hero .veil{ z-index:1 !important; mix-blend-mode: normal !important; background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.5)); }
.hero .content{ position:relative; z-index:3 !important; }

/* Remove hard divider lines between sections (make very subtle) */
.section+.section:before{
  content:"";
  position:absolute; inset:auto 0 100% 0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.04), transparent) !important;
}


/* === Products grid: 3 per row desktop, 2 per row tablet, 1 per row mobile === */

/* Packages list */
.pkg-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(260px,1fr)) !important;
  gap: 1.2rem !important;
}
@media (max-width: 1100px){
  .pkg-grid{ grid-template-columns: repeat(2, minmax(240px,1fr)) !important; }
}
@media (max-width: 640px){
  .pkg-grid{ grid-template-columns: 1fr !important; }
}

/* Generic product containers (covers categories/items if used) */
#categories,
.products-grid,
.product-list{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(260px,1fr)) !important;
  gap: 1.2rem !important;
}
@media (max-width: 1100px){
  #categories, .products-grid, .product-list{ grid-template-columns: repeat(2, minmax(240px,1fr)) !important; }
}
@media (max-width: 640px){
  #categories, .products-grid, .product-list{ grid-template-columns: 1fr !important; }
}

/* Individual cards flex layout */
.product-card, .pkg, .pkg-card, #categories > *{
  display:flex; flex-direction:column;
}


/* === Category rows + 3-per-row products (override) === */

/* Restore categories list to a single column */
#categories{
  display:block !important;
}
#categories > *{
  display:block !important;
}

/* Gallery: show 3 items per row within each category group, then next category starts on a new row */
.gallery.masonry{
  column-count: initial !important;
  column-gap: 0 !important;
  display:grid !important;
  grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
  gap: 1rem !important;
}
@media (max-width: 1100px){
  .gallery.masonry{ grid-template-columns: repeat(2, minmax(220px,1fr)) !important; }
}
@media (max-width: 640px){
  .gallery.masonry{ grid-template-columns: 1fr !important; }
}

/* Tidy the items in grid context */
.m-item{ margin:0 !important; break-inside: auto !important; }
.gallery-group{ margin: 1.2rem 0 2rem !important; }


/* === Category grid per row: 3 items per row inside each category === */
#categories{ display:block !important; } /* categories stack vertically */
#categories > .stack{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(260px,1fr)) !important;
  gap: 1.2rem !important;
  align-items: stretch;
}
#categories > .stack > h3{
  grid-column: 1 / -1; /* heading full width */
  margin-bottom: .2rem;
}
@media (max-width: 1100px){
  #categories > .stack{ grid-template-columns: repeat(2, minmax(240px,1fr)) !important; }
}
@media (max-width: 640px){
  #categories > .stack{ grid-template-columns: 1fr !important; }
}

/* Ensure item cards behave inside grid */
#categories .stack > .item{
  margin: 0 !important;
}


/* === Center hero badges === */
.hero .badge-list,
.hero .badges,
.hero .kicker:has(.badge),
.hero .content:has(.badge){
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: .6rem !important;
}


/* removed old contrast patch */
.hero .h1, .hero h1 {
  position: relative;
  display: inline-block;
  padding: 0.35em 0.8em;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35); /* translucent dark overlay */
  text-shadow:
    0 2px 4px rgba(0,0,0,0.45),
    0 4px 12px rgba(0,0,0,0.25);
}


/* === Hero headline background box (no blur) === */
.hero .h1, .hero h1 {
  position: relative;
  display: inline-block;
  padding: 0.4em 1em;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.45); /* semi-transparent dark box */
  text-shadow: none !important;
}


/* === Hero headline background box full width === */
.hero .content {
  display: flex !important;
  justify-content: center !important;
}
.hero .content h1,
.hero .content .h1 {
  background: rgba(0, 0, 0, 0.45) !important;
  padding: 0.4em 1em !important;
  border-radius: 14px !important;
  display: inline-block !important;
  text-shadow: none !important;
}


/* === Hero text visible inside the dark box (override gradient text) === */
.hero .content h1,
.hero .content .h1,
h1.hero-title{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-shadow: none !important;
  position: relative;
  z-index: 3;
}
/* Disable shimmer overlay on hero title if present */
h1.hero-title::after{ display:none !important; }


/* === Hero gradient text with background box === */
.hero .content h1,
.hero .content .h1 {
  position: relative !important;
  display: inline-block !important;
  z-index: 1 !important;
}
.hero .content h1::before,
.hero .content .h1::before {
  content: "" !important;
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45) !important;
  border-radius: 14px !important;
  z-index: -1 !important;
}