/* =========================================================
   BLISS LOUNGE – MASTER THEME (Wine + Beige) – CLEAN FIX (ZOHO)
   - Global: Spin wallpaper + wine overlay
   - Home: NO wallpaper, NO overlay, full-width snippet, snippet controls its own colors
   - About: solid wine, no wallpaper/overlay
   ========================================================= */

:root{
  --wine-red:#6B0F1A;
  --beige:#F5E6D3;

  /* GLOBAL wallpaper (Spin look) */
  --wallpaper: url("https://sitebuilder-911920232.zohositescontent.com/Sping-BG.png");
}

/* =========================
   0) BASE
   ========================= */
html, body{
  width: 100%;
  margin: 0;
  padding: 0;
}

/* =========================
   1) GLOBAL DEFAULT (all pages)
   wallpaper + wine base
   ========================= */
html, body{
  background:
    var(--wallpaper) center top / cover no-repeat fixed,
    var(--wine-red) !important;
}

/* Global wine overlay */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(107,15,26,.78);
  pointer-events: none;
  z-index: 0;
}

/* Keep site above overlay */
.page-content,
.zpheader, .site-header,
.zpfooter, .site-footer{
  position: relative;
  z-index: 1;
}

/* Make Zoho wrappers transparent globally (so wallpaper shows)
   IMPORTANT: we will override this on HOME and ABOUT below */
header, footer, section,
.zpsection, .zpcontainer, .zpcontent,
.page-content,
.zphero, .hero,
.zpheader, .site-header,
.zpfooter, .site-footer{
  background-color: transparent !important;
  background-image: none !important;
}

/* =========================
   2) GLOBAL TEXT (beige)
   ========================= */
body, p, span, a, li, div,
.zpcontent, .page-content, .zpsection{
  color: var(--beige) !important;
}

h1,h2,h3,h4,h5,h6,
.zpcontent h1,.zpcontent h2,.zpcontent h3,
.page-content h1,.page-content h2,.page-content h3{
  color: var(--beige) !important;
}
a{ color: var(--beige) !important; }

/* =========================
   3) ZOHO NAV – kill green active/hover
   ========================= */
.zpnav a, .zpnav li a{
  background: transparent !important;
  box-shadow: none !important;
}
.zpnav .zpMenuActive,
.zpnav .zpMenuActive a,
.zpnav li.zpMenuActive,
.zpnav li.zpMenuActive a,
.zpnav a[aria-current="page"]{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.zpnav a:hover, .zpnav li:hover > a{
  background: transparent !important;
}

/* =========================
   4) ABOUT PAGE (no wallpaper, no overlay)
   ========================= */
body:has(#blissAbout),
body.is-about{
  background: var(--wine-red) !important;
  background-image: none !important;
  background-attachment: initial !important;
  overflow-x: hidden !important;
}
body:has(#blissAbout)::before,
body.is-about::before{
  display:none !important;
}

/* About wrappers should be wine (override global transparency) */
body:has(#blissAbout) header,
body:has(#blissAbout) footer,
body:has(#blissAbout) section,
body:has(#blissAbout) .zpsection,
body:has(#blissAbout) .zpcontainer,
body:has(#blissAbout) .zpcontent,
body:has(#blissAbout) .page-content,
body.is-about header,
body.is-about footer,
body.is-about section,
body.is-about .zpsection,
body.is-about .zpcontainer,
body.is-about .zpcontent,
body.is-about .page-content{
  background-color: var(--wine-red) !important;
  background-image: none !important;
}

/* =========================
   5) HOME PAGE (no wallpaper, no overlay, full width)
   ========================= */
body:has(#blissHome),
body.is-home{
  background: var(--wine-red) !important; /* fallback behind snippet */
  background-image: none !important;
  background-attachment: initial !important;
  overflow-x: hidden !important;
}
body:has(#blissHome)::before,
body.is-home::before{
  display:none !important;
}

/* Hide Zoho header ONLY on Home (your snippet header becomes the header) */
body:has(#blissHome) .zpheader,
body:has(#blissHome) .site-header,
body.is-home .zpheader,
body.is-home .site-header{
  display:none !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
}

/* Remove Zoho top gap on Home */
body:has(#blissHome) .page-content,
body:has(#blissHome) .zpcontent,
body:has(#blissHome) .zpsection:first-child,
body:has(#blissHome) .zpcontainer,
body.is-home .page-content,
body.is-home .zpcontent,
body.is-home .zpsection:first-child,
body.is-home .zpcontainer{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Break Zoho centered column ONLY on Home */
body:has(#blissHome) .page-content,
body:has(#blissHome) .zpsection,
body:has(#blissHome) .zpcontainer,
body:has(#blissHome) .zpcontent,
body.is-home .page-content,
body.is-home .zpsection,
body.is-home .zpcontainer,
body.is-home .zpcontent{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Ensure snippet wrapper is full width */
body:has(#blissHome) #blissHome,
body.is-home #blissHome{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   HOME SNIPPET SECTION BACKGROUNDS – HARD OVERRIDE
   Fixes: "everything looks wine" because global rule sets sections transparent !important
   We force the intended colors for ALL #blissHome sections.
   ========================================================= */

/* Ensure #blissHome sections are allowed to paint */
#blissHome section{
  background-image: none !important;
}

/* Beige sections (Why, Gallery, Testimonials) */
#blissHome #why,
#blissHome #gallery,
#blissHome #testimonials{
  background-color: var(--beige) !important;
}

/* Wine sections (Menu, Contact) */
#blissHome #menu,
#blissHome #contact{
  background-color: var(--wine-red) !important;
}

/* Also support helper classes if used */
#blissHome .bh-section-light{
  background-color: var(--beige) !important;
  background-image: none !important;
}
#blissHome .bh-section-wine{
  background-color: var(--wine-red) !important;
  background-image: none !important;
}

/* =========================================================
   EXTRA FIXES YOU ASKED FOR (GLOBAL CSS-SIDE)
   1) Menu name + price always on same line
   2) Hero text forced wine red (so it never turns beige/faded)
   ========================================================= */

/* 1) Menu card top row never wraps */
#blissHome .bh-menu-top{
  display:flex !important;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap !important;   /* key */
}
#blissHome .bh-menu-price{
  white-space:nowrap;
  flex-shrink:0;
}
#blissHome .bh-menu-name{
  flex:1;
  min-width:0;
  line-height:1.15;
}

/* 2) Hero text + buttons forced wine */
#blissHome .bh-hero-left{
  position: relative;
  z-index: 5;
}
#blissHome #home .bh-h1,
#blissHome #home .bh-lead{
  color: var(--wine-red) !important;
  opacity: 1 !important;
}
#blissHome #home .bh-pill,
#blissHome #home .bh-pill span{
  color: var(--wine-red) !important;
}
#blissHome #home .bh-btn,
#blissHome #home .bh-btn span{
  color: var(--wine-red) !important;
}
#blissHome #home .bh-btn-solid{
  background: var(--wine-red) !important;
  color: var(--beige) !important;
}

/* (Optional) if the spotlight overlay is washing things out */
#blissHome .bh-hero::after{
  opacity: .65;
}