/* Dogge Refresh — brand styling (revision round 2, 2026-06-25) */
:root{
  --dgg-blue:#00008B; --dgg-brown:#B06D55; --dgg-yellow-l:#FEDF7D;
  --dgg-gold:#F5C009; --dgg-pink:#E1798C; --dgg-ink:#171532; --dgg-paper:#FBF7EF;
}

/* ---------- Backgrounds (replace dot grid everywhere) ---------- */
.dgg-bg-watermark{
  background-color:#fff;
  background-image:url('/wp-content/uploads/2023/10/footer-logo.png');
  background-repeat:no-repeat;
  background-position:right -40px bottom -40px;
  background-size:340px auto;
}
.dgg-bg-pawtile{
  background-color:#f3f3f5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%2300008B' fill-opacity='0.045'%3E%3Cellipse cx='60' cy='74' rx='17' ry='13'/%3E%3Cellipse cx='38' cy='56' rx='7' ry='9.5'/%3E%3Cellipse cx='52' cy='42' rx='6.2' ry='9'/%3E%3Cellipse cx='68' cy='42' rx='6.2' ry='9'/%3E%3Cellipse cx='82' cy='56' rx='7' ry='9.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Section helper ---------- */
.dgg-section{padding:clamp(2.6rem,6vw,5rem) 0;}

/* ---------- Eyebrow ---------- */
.dgg-eyebrow .elementor-heading-title,
.dgg-eyebrow{font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:.75rem;color:var(--dgg-blue);}

/* ---------- Buttons ---------- */
.dgg-btn .elementor-button,
a.dgg-btn,.dgg-btn{
  display:inline-block;padding:.85rem 2rem;border-radius:999px;font-weight:700;
  text-decoration:none;border:2px solid transparent;transition:.25s;line-height:1.2;
}
.dgg-btn--gold .elementor-button,a.dgg-btn--gold{background:var(--dgg-gold)!important;color:var(--dgg-blue)!important;border-color:var(--dgg-gold)!important;}
.dgg-btn--gold .elementor-button:hover,a.dgg-btn--gold:hover{background:var(--dgg-blue)!important;color:#fff!important;}
.dgg-btn--blue .elementor-button,a.dgg-btn--blue{background:var(--dgg-blue)!important;color:#fff!important;border-color:var(--dgg-blue)!important;}
.dgg-btn--blue .elementor-button:hover,a.dgg-btn--blue:hover{background:var(--dgg-gold)!important;color:var(--dgg-blue)!important;}
.dgg-btn--white .elementor-button,a.dgg-btn--white{background:#fff!important;color:var(--dgg-blue)!important;border-color:#fff!important;}
.dgg-btn--white .elementor-button:hover,a.dgg-btn--white:hover{background:transparent!important;color:#fff!important;}
.dgg-btn .elementor-button{border-radius:999px!important;font-weight:700!important;}

/* ---------- Hero ---------- */
.dgg-hero{position:relative;min-height:78vh;display:flex;align-items:center;}
.dgg-hero .elementor-widget-container{text-align:center;}
.dgg-hero .elementor-heading-title{color:#fff;}
.dgg-hero h1.elementor-heading-title{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.1;}
.dgg-hero .elementor-widget-button{display:inline-block;margin:.4rem .4rem 0;}

/* ---------- Card columns (split / CTA cards) ---------- */
.dgg-cta-card{
  background:#fff;border:1px solid #ece6d8;border-radius:20px;
  padding:1.6rem!important;margin:.6rem;
  box-shadow:0 10px 30px -24px rgba(23,21,50,.6);transition:.25s;
}
.dgg-cta-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -26px rgba(0,0,139,.45);}
.dgg-cta-card .elementor-heading-title{color:var(--dgg-blue);}
.dgg-cta-card img{border-radius:14px;}

/* ---------- Marquee ---------- */
.dgg-marquee{overflow:hidden;background:var(--dgg-gold);color:var(--dgg-blue);padding:1.1rem 0;width:100%;}
.dgg-marquee__track{display:inline-flex;white-space:nowrap;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2.4rem);animation:dgg-marq 22s linear infinite;will-change:transform;}
.dgg-marquee__track span{padding:0 1.5rem;}
@keyframes dgg-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.dgg-marquee__track{animation:none}}

/* ---------- Loyalty ---------- */
.dgg-loyalty ul{list-style:none;padding:0;margin:0 0 1.4rem;}
.dgg-loyalty li{font-weight:600;font-size:1.05rem;margin:.5rem 0;}

/* ---------- Delivery strip ---------- */
.dgg-delivery{background:var(--dgg-blue);}
.dgg-delivery .elementor-heading-title{color:#fff;}
.dgg-delivery .elementor-widget-button{display:inline-block;margin:.5rem .4rem 0;}

/* ---------- Products banner ---------- */
.dgg-products-banner{position:relative;min-height:48vh;display:flex;align-items:center;}
.dgg-products-banner .elementor-widget-container{text-align:center;}

/* ---------- Homepage sections by element ID ----------
   (Elementor custom CSS classes on sections/columns aren't reliably output in this build,
    so section backgrounds are driven by _element_id instead.) */
#dgg-delivery{background:var(--dgg-blue)!important;}
/* white + corner Dogge-logo watermark */
#dgg-concept,#dgg-about-hero,#dgg-bookatable-hero,#dgg-about-values{
  background:#fff url('/wp-content/uploads/2023/10/footer-logo.png') no-repeat right -30px bottom -30px;background-size:300px auto;}
/* Rev 4: #dgg-gallery-hero used to carry that watermark too, but the gallery hero is only ~190px
   tall against a 300px logo — so instead of tucking into the corner it spilled out of the section
   and was sliced off by the window edge. Client asked for it gone; plain white here. */
#dgg-gallery-hero{background:#fff;}
/* (removed repeating paw-tile background per client — single dog-mascot watermark is used instead) */

/* `section.dp-band:last-of-type` only matches the hand-coded backup of the Parties page. The live
   page was rebuilt in Elementor, where the bands are <div> containers sitting in different
   parents — so both would count as :last-of-type. `.dp-band-last` is set explicitly on the
   closing band there; keep both selectors so the backup still renders correctly too. */
/* ---- Single Dogge-mascot watermark on the custom pages (one per chosen section, alternating sides) ---- */
body.page-id-48310 .dp-cake-band, body.page-id-48310 section.dp-band:last-of-type, body.page-id-48310 .dp-band-last,
body.page-id-48341 .dc-how, body.page-id-48341 .dc-bespoke,
body.page-id-47821 .dm-how, body.page-id-47821 .dm-faq-wrap,
body.page-id-48323 .book-hero{position:relative;overflow:hidden}
body.page-id-48310 .dp-cake-band>*, body.page-id-48310 section.dp-band:last-of-type, body.page-id-48310 .dp-band-last>*,
body.page-id-48341 .dc-how>*, body.page-id-48341 .dc-bespoke>*,
body.page-id-47821 .dm-how>*, body.page-id-47821 .dm-faq-wrap>*,
body.page-id-48323 .book-hero>*{position:relative;z-index:1}
body.page-id-48310 .dp-cake-band::before, body.page-id-48310 section.dp-band:last-of-type, body.page-id-48310 .dp-band-last::before,
body.page-id-48341 .dc-how::before, body.page-id-48341 .dc-bespoke::before,
body.page-id-47821 .dm-how::before, body.page-id-47821 .dm-faq-wrap::before,
body.page-id-48323 .book-hero::before{
  content:"";position:absolute;top:50%;transform:translateY(-50%);width:min(42vw,440px);height:min(42vw,440px);
  background:url('/wp-content/uploads/2025/08/watermark.png') no-repeat center/contain;z-index:0;pointer-events:none}
/* right side */
body.page-id-48310 .dp-cake-band::before, body.page-id-48341 .dc-how::before,
body.page-id-47821 .dm-how::before, body.page-id-48323 .book-hero::before{right:-40px}
/* left side (mirrored) */
body.page-id-48310 section.dp-band:last-of-type, body.page-id-48310 .dp-band-last::before, body.page-id-48341 .dc-bespoke::before,
body.page-id-47821 .dm-faq-wrap::before{left:-40px;transform:translateY(-50%) scaleX(-1)}
/* the dark booking hero: keep the white mascot subtle */
body.page-id-48323 .book-hero::before{opacity:.5}
@media(max-width:860px){
  body.page-id-48310 .dp-cake-band::before, body.page-id-48310 section.dp-band:last-of-type, body.page-id-48310 .dp-band-last::before,
  body.page-id-48341 .dc-how::before, body.page-id-48341 .dc-bespoke::before,
  body.page-id-47821 .dm-how::before, body.page-id-47821 .dm-faq-wrap::before,
  body.page-id-48323 .book-hero::before{display:none}
}
/* offer items: subtle card feel without relying on column classes */
#dgg-about-offer .elementor-widget-image img{border-radius:14px;}
/* Book a Table — form card + info panel */
#dgg-bat-formcol{background:#fff;border:1px solid #ece6d8;border-radius:20px;padding:1.8rem 1.6rem!important;box-shadow:0 18px 40px -28px rgba(0,0,139,.4);}
#dgg-bat-info img{border-radius:16px;}
#dgg-bat-info{padding-left:1.5rem;}
@media(max-width:1024px){#dgg-bat-info{padding-left:0;}}
/* Gallery tabs — brand the active tab */
#dgg-gallery-tabs .elementor-tab-title{font-weight:700;}
#dgg-gallery-tabs .elementor-tab-title.elementor-active{color:var(--dgg-blue)!important;border-bottom:3px solid var(--dgg-gold)!important;}
#dgg-gallery-tabs .gallery-item{margin-top:0!important;}
#dgg-gallery-tabs .gallery-item img{border:0!important;border-radius:10px;}
/* hero + delivery buttons sit inline instead of stacking */
.elementor-widget-button.dgg-btn{display:inline-block;width:auto;margin:.35rem;vertical-align:middle;}

/* ---------- Header nav: Parties/Cakes buttons + Explore dropdown ---------- */
/* Header is an Elementor Nav Menu widget; target a.elementor-item for specificity over Elementor's color */
li.menu-cta > a, li.menu-cta > a.elementor-item{
  background:var(--dgg-gold)!important;border-radius:999px;
  padding:.45rem .85rem!important;font-weight:800;margin-left:.3rem;line-height:1.2;
  /* dazzle forces a fixed height:46px + display:block on header links, which pins the pill
     text to the top of the box (looks un-centred). inline-flex + centring vertically and
     horizontally centres the label inside the pill regardless of that height. */
  display:inline-flex!important;align-items:center;justify-content:center;
}
/* 8 items (incl. the Membership pill) must fit one row in the header column */
.elementor-widget-nav-menu ul.elementor-nav-menu{flex-wrap:nowrap!important;}
/* laptop widths: shrink the row instead of overflowing into the Login column */
@media (max-width:1450px) and (min-width:1025px){
  .elementor-widget-nav-menu ul.elementor-nav-menu{font-size:.88em;}
  li.menu-cta > a, li.menu-cta > a.elementor-item{padding:.4rem .65rem!important;margin-left:.2rem;}
}
li.menu-cta > a, li.menu-cta > a.elementor-item, li.menu-cta > a .elementor-item-text{color:var(--dgg-blue)!important;fill:var(--dgg-blue)!important;}
li.menu-cta.menu-cta--blue > a, li.menu-cta.menu-cta--blue > a.elementor-item{background:var(--dgg-blue)!important;}
li.menu-cta.menu-cta--blue > a, li.menu-cta.menu-cta--blue > a.elementor-item, li.menu-cta.menu-cta--blue > a .elementor-item-text{color:#fff!important;fill:#fff!important;}
li.menu-cta > a:hover{filter:brightness(.95);}
/* dazzle sets `ul#menu-1-51e9752 li a{color:#111!important}` — an ID selector that outranks the
   class rules above, so the pill text colors need ID-level selectors too (menu-2-* = dropdown). */
ul#menu-1-51e9752 li.menu-cta > a, ul#menu-2-51e9752 li.menu-cta > a{color:var(--dgg-blue)!important;}
ul#menu-1-51e9752 li.menu-cta.menu-cta--blue > a, ul#menu-2-51e9752 li.menu-cta.menu-cta--blue > a{color:#fff!important;}
/* kill the theme/Elementor nav underline-pointer on the button pills */
li.menu-cta > a:before, li.menu-cta > a:after{display:none!important;content:none!important;background:transparent!important;border:0!important;}
li.menu-cta > a:hover{text-decoration:none!important;}

@media (max-width:1024px){
  .dgg-cta-card{margin:.6rem 0;}
  .menu-cta > a{margin-left:0;}
}

/* Rev 3: at ~1250-1350px the Membership pill sat almost touching the Login link.
   Tighten the row further so a clear gap remains (this rule wins over the 1450 one
   for widths <=1350 by source order). */
@media (max-width:1350px) and (min-width:1025px){
  .elementor-widget-nav-menu ul.elementor-nav-menu{font-size:.8em;}
  li.menu-cta > a, li.menu-cta > a.elementor-item{padding:.32rem .5rem!important;margin-left:.1rem;}
}

/* Rev 3.1: the Favourites feature (TI WooCommerce Wishlist) is active again — hearts on
   every product image + a working /wishlist/ page — so the header love-heart is shown again
   (the Rev 3 display:none that hid the then-dead icon has been removed). */

/* Rev 3: "What's On" links to /#whats-on, which WordPress flags as current-menu-item on the
   home page. dazzle's `ul#menu-*-51e9752 ul.sub-menu li.current-menu-item a{color:#000!important}`
   then paints it black — invisible on the indigo Explore dropdown. Keep dropdown items white
   whatever the active state (extra `.elementor-sub-item` class outranks the theme rule). */
ul#menu-1-51e9752 ul.sub-menu li.current-menu-item > a.elementor-sub-item,
ul#menu-1-51e9752 ul.sub-menu li.current_page_item > a.elementor-sub-item,
ul#menu-2-51e9752 ul.sub-menu li.current-menu-item > a.elementor-sub-item,
ul#menu-2-51e9752 ul.sub-menu li.current_page_item > a.elementor-sub-item{color:#fff!important;}

/* ---------- Rev 4: menu-page price columns ---------- */
/* Each menu row is a flex column holding a description widget and a price widget.
   Both were `flex:0 1 auto`, so below ~1400px the browser shrank the price towards its
   min-content width and the text broke up ("$2.5 EACH OR / 3 FOR $6" fell onto four
   lines). Pin the price to its natural width and let the description take the slack —
   the box gets wider, never taller, which is what the client asked for. */
.dgg-price{flex:0 0 auto!important;width:auto!important;max-width:none!important;}
.dgg-price p{white-space:nowrap;margin-bottom:0;}
/* Mobile stacks description over price (_element_width_mobile = inherit), where a full-width
   right-aligned price is correct — just keep it on one line. */
@media (max-width:767px){
  .dgg-price{flex:1 1 100%!important;}
}