/* =====================================================================
   Chewk's — brand polish layer
   Layered ON TOP of the exact replica. To revert to the pixel-exact
   original, delete this file and remove its <link> from index.html.
   (A full backup also lives in ../chewks-replica-BACKUP-20260622)
   ===================================================================== */

:root{
  --chewk-coral:#F24538;
  --chewk-ink:#202020;
}

/* ---- 1. Consistent type hierarchy ----------------------------------- */
/* Every brand display heading (Futura) now shares one tight rhythm, so
   the jump from hero -> section -> label reads as one deliberate scale. */
.elementor-widget-heading .elementor-heading-title{
  line-height:1.04 !important;
  letter-spacing:-0.01em;
}

/* Body copy: one consistent, readable leading everywhere */
.elementor-widget-text-editor,
.elementor-widget-text-editor p{
  line-height:1.65 !important;
}

/* --- Section headline style guide (matches the WE BELIEVE section) ---
   Section headline = Futura Header, weight 800, 35px, -2.3px tracking,
   1.04 leading, uppercase. The hero keeps its large 75px headline; footer
   labels and the events-grid card titles intentionally keep their own size. */

/* Testimonials headline was 32px / weight 600 / grey — bring it in line. */
[data-id="e0e8bc0"] .elementor-heading-title{
  font-family:"Futura Header", futura, sans-serif !important;
  font-size:35px !important;
  font-weight:800 !important;
  letter-spacing:-2.3px !important;
  line-height:1.04 !important;
  color:#202020 !important;
}
/* These two are image-box titles with a loose ~1.46 line-height — tighten. */
[data-id="1d7b022"] .elementor-image-box-title,   /* SIMPLE TO ORDER       */
[data-id="24ebd4b"] .elementor-image-box-title{   /* MAKE YOUR NEXT MOMENT */
  line-height:1.04 !important;
}

/* --- Body copy + sub-head style guide (matches the WE BELIEVE section) ---
   Template = body copy 16px / weight 600 / Body Alternative / 1.65 leading,
   and a bolded sub-head (weight 700). Other text sections used Futura Body /
   Futura Header at 14-17px / weight 300, so they read inconsistently. Align
   them (colours are left alone so white-on-coral / ink stay correct). */

/* Body copy */
[data-id="9c07bff"] .elementor-heading-title,         /* YOU WANT — body    */
[data-id="7ae8f61"] .elementor-heading-title,         /* COME VISIT — body  */
[data-id="1d7b022"] .elementor-image-box-description, /* SIMPLE — body      */
[data-id="24ebd4b"] .elementor-image-box-description{ /* SWEETER — body     */
  font-family:"Body Alternative", sans-serif !important;
  font-size:16px !important;
  font-weight:600 !important;
  line-height:1.65 !important;
  letter-spacing:normal !important;
}
/* Bolded sub-head */
[data-id="068e83b"] .elementor-heading-title,   /* YOU WANT — sub-head    */
[data-id="a7b0f42"] .elementor-heading-title{   /* COME VISIT — sub-head  */
  font-family:"Body Alternative", sans-serif !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.65 !important;
  letter-spacing:normal !important;
}
/* Match the template's own sub-head to the same bolded treatment. */
[data-id="165be35"] p:last-child{
  font-weight:700 !important;
}
/* Optical balance: white text on the bright coral reads heavier than the
   identical weight in dark-on-white, so step the coral section down a notch
   so it visually matches the rest of the page's body copy. */
[data-id="9c07bff"] .elementor-heading-title{   /* coral body    */
  font-weight:500 !important;
}
[data-id="068e83b"] .elementor-heading-title{   /* coral sub-head */
  font-weight:600 !important;
}

/* ---- 2. Section rhythm: kill dead whitespace, balance heights ------- */
/* The split "text + image" sections used to stretch to a full viewport
   height and top-align their copy, dumping ~400px of empty space at the
   bottom. Center the content and cap the image columns so each section
   sizes to its content and the vertical rhythm stays even across the page. */

/* These sections hard-set height:900px (full viewport). Let them hug
   their content instead. */
[data-id="e19901a"],   /* WE BELIEVE GREAT COOKIES */
[data-id="aab8193"]{   /* COME VISIT OUR SHOP      */
  height:auto !important;
  min-height:0 !important;
}
/* Columns stretch to a single consistent section height; the photo fills
   it flush (no white bands) and the text sits vertically centered next to it. */
[data-id="e19901a"] > .elementor-container,
[data-id="aab8193"] > .elementor-container{
  height:500px !important;       /* definite height so the photo fills it */
  min-height:500px !important;
  align-items:stretch !important;
}
/* COME VISIT runs taller than WE BELIEVE so more of the founders photo shows. */
[data-id="aab8193"] > .elementor-container{
  height:700px !important;
  min-height:700px !important;
}
/* Show the whole founders shot instead of a cover-crop — the trailer and both
   founders stay in frame, with a soft neutral filling the leftover column. */
[data-id="aab8193"] .elementor-column:has(img){
  background:#EFEAE3 !important;
}
[data-id="aab8193"] .elementor-widget-image img{
  object-fit:contain !important;
  object-position:center !important;
}

/* Photo column: zero padding + fill the full column height, flush to edges. */
[data-id="e19901a"] .elementor-column:has(img),
[data-id="aab8193"] .elementor-column:has(img){
  padding-top:0 !important;
  padding-bottom:0 !important;
}
[data-id="e19901a"] .elementor-column:has(img) .elementor-widget-wrap,
[data-id="aab8193"] .elementor-column:has(img) .elementor-widget-wrap,
[data-id="e19901a"] .elementor-column:has(img) .elementor-widget-image,
[data-id="aab8193"] .elementor-column:has(img) .elementor-widget-image,
[data-id="e19901a"] .elementor-column:has(img) .elementor-widget-image .elementor-widget-container,
[data-id="aab8193"] .elementor-column:has(img) .elementor-widget-image .elementor-widget-container{
  height:100% !important;
  transform:none !important;   /* kill leftover scroll motion-fx offset */
}
[data-id="e19901a"] .elementor-widget-image img,
[data-id="aab8193"] .elementor-widget-image img{
  height:100% !important;
  width:100% !important;
  object-fit:cover !important;
  display:block;
}

/* Text column: breathing room + vertically centered content. */
[data-id="e19901a"] .elementor-column:not(:has(img)),
[data-id="aab8193"] .elementor-column:not(:has(img)){
  padding-top:32px !important;
  padding-bottom:32px !important;
  justify-content:center !important;
}
[data-id="e19901a"] .elementor-column:not(:has(img)) > .elementor-widget-wrap,
[data-id="aab8193"] .elementor-column:not(:has(img)) > .elementor-widget-wrap{
  align-content:center !important;
}

/* ---- 3. Remove image animations (hero keeps its motion) ------------- */
/* These image elements carry an entrance fade-in or scroll/mouse motion-fx
   (drift / rotate) that the Elementor JS applies as inline transforms.
   Neutralize them so the images sit still and visible. The hero image's
   own scroll effect (data-id 3ee626c3) is intentionally left in place. */
[data-id="748e5e89"],   /* entrance fade-in image           */
[data-id="2a9d25f6"],   /* mouse parallax image             */
[data-id="e5566ef"],    /* WE BELIEVE photo (scroll drift)  */
[data-id="7d45dff"],    /* COME VISIT photo (scroll drift)  */
[data-id="4f8aa06"]{    /* scroll rotate image              */
  transform:none !important;
  opacity:1 !important;
  visibility:visible !important;
  animation:none !important;
  transition:none !important;
}

/* ---- 4. Navigation: drop the menu, keep the logo + Order Now -------- */
/* The header nav links (About / Calendar / Contact + dropdown) are removed
   so the header reads as a clean logo-left / Order-Now-right bar. */
[data-id="2ed30c97"]{ display:none !important; }        /* desktop nav menu   */

/* ---- 5. One fixed header on every breakpoint ---------------------- */
/* Use the single logo + Order Now bar as the site header at all sizes and
   pin it to the top. The old scroll-triggered phone header (748e5e89, with
   its cookie/menu icon) is dropped so there's exactly one clean sticky nav
   showing the Order Now button instead of a menu — on mobile and desktop.

   NOTE: we use position:fixed (not sticky) on purpose. The theme's
   body{overflow:hidden auto} makes <body> a scroll container, so a sticky
   header won't pin to the viewport — and overriding that overflow clips the
   full-bleed hero image. Fixed sidesteps both; a spacer below restores the
   space the header no longer occupies in flow. */
[data-id="748e5e89"]{ display:none !important; }   /* drop the 2nd phone header */

[data-id="6bd7a28d"]{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:9999 !important;
  display:block !important;           /* also show on phone (no hidden-phone) */
  background:#fff;                     /* opaque so content scrolls cleanly under */
}
/* Keep logo + Order Now vertically centered in the bar. */
[data-id="6bd7a28d"] > .elementor-container{
  align-items:center !important;
}
/* The fixed header no longer holds space in the flow, so push the page content
   down by the header's height to stop it hiding under the bar. */
#content{ padding-top:74px !important; }
@media (max-width:921px){ #content{ padding-top:66px !important; } }
/* Drop the phone hamburger/menu trigger — the Order Now button replaces it. */
[data-id="494e556"]{ display:none !important; }

/* On phone, keep the header a single compact row: logo left, Order Now right,
   instead of Elementor stacking the columns into a tall block. */
@media (max-width:921px){
  /* Slim the bar: trim the section + column vertical padding. */
  [data-id="6bd7a28d"]{ padding-top:6px !important; padding-bottom:6px !important; }
  [data-id="6bd7a28d"] .elementor-widget-wrap.elementor-element-populated{
    padding-top:0 !important; padding-bottom:0 !important;
  }
  [data-id="6bd7a28d"] > .elementor-container{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    justify-content:space-between !important;
    align-items:center !important;
  }
  [data-id="6bd7a28d"] > .elementor-container > .elementor-column{
    width:auto !important;
  }
  /* Logo column can flex; cap its size so the bar stays slim. Sized and
     inset to match chewkscookies.com's real mobile nav bar (logo ~101x47px,
     20px in from the edge). */
  [data-id="deb32d4"]{ flex:0 1 auto !important; }
  [data-id="deb32d4"] img{ max-width:100px !important; height:auto !important; }
  [data-id="deb32d4"] .elementor-widget-wrap{ padding-left:20px !important; }
  [data-id="247fcee"]{ text-align:right !important; flex:0 0 auto !important; }
  [data-id="247fcee"] .elementor-widget-wrap{ padding-right:20px !important; }
  [data-id="ecf882e"]{ text-align:right !important; }
}

/* ---- 6. Order Now button: one consistent brand style --------------- */
/* Both the desktop and mobile Order Now buttons share the coral pill so the
   call-to-action reads identically everywhere. Desktop gets the larger size;
   phone gets a slightly smaller one to fit the slim mobile bar (the phone
   rule below is placed last so it wins the cascade over this base rule). */
[data-id="ecf882e"] .elementor-button,
[data-id="mobileorder"] .elementor-button,
[data-id="76225004"] .elementor-button{
  background-color:var(--chewk-coral) !important;
  color:#fff !important;
  border-radius:999px !important;
  font-family:"Futura Header", futura, sans-serif !important;
  font-weight:800 !important;
  letter-spacing:0.02em !important;
  text-transform:uppercase !important;
  line-height:1 !important;
}
/* Nav bar Order Now: bigger on desktop, slightly smaller on phone. */
[data-id="ecf882e"] .elementor-button{
  font-size:17px !important;
  padding:13px 28px !important;
}
@media (max-width:921px){
  [data-id="ecf882e"] .elementor-button{
    font-size:14px !important;
    padding:10px 22px !important;
  }
}
/* Hero Order Now: same pill style, larger scale as the page's primary CTA. */
[data-id="76225004"] .elementor-button{
  font-size:19px !important;
  padding:17px 34px !important;
}
@media (max-width:921px){
  [data-id="76225004"] .elementor-button{
    font-size:16px !important;
    padding:14px 26px !important;
  }
}

/* ---- 7. Unified section type: every headline + body matches WE BELIEVE */
/* Bring the remaining section headlines and body copy onto the same scale as
   the WE BELIEVE section so the page reads as one deliberate type system.
   (Hero headline, footer labels and the EVENTS photo-grid card titles keep
   their own intentional sizes.) */
[data-id="88a8fc1"] .elementor-heading-title,   /* YOU WANT — headline   */
[data-id="e465284"] .elementor-heading-title,   /* WE BELIEVE — headline */
[data-id="7e4d123"] .elementor-heading-title,   /* COME VISIT — headline */
[data-id="1cfbf0f"] .elementor-heading-title,   /* TESTIMONIALS headline */
[data-id="c54ed3c"] .elementor-image-box-title, /* SIMPLE TO ORDER title */
[data-id="4355f90"] .elementor-image-box-title{ /* MAKE SWEETER — title  */
  font-family:"Futura Header", futura, sans-serif !important;
  font-size:35px !important;
  font-weight:800 !important;
  letter-spacing:-2.3px !important;
  line-height:1.04 !important;
  text-transform:uppercase !important;
}

/* Body copy — matches the WE BELIEVE paragraph exactly: Body Alternative,
   16px, weight 400 (that paragraph's visible text is wrapped in an inline
   `font-weight: normal` span, so 400 — not 600 — is its true rendered weight).
   IMPORTANT: the fallback must be `futura` (→ macOS Futura), NOT sans-serif.
   "Body Alternative" doesn't cover the full glyph set, so many characters
   render in the fallback face — using `sans-serif` (Helvetica) here made this
   copy read as a visibly different font than the reference, whose fallback is
   `futura`. Matching the reference's exact stack keeps them identical. */
[data-id="9c07bff"] .elementor-heading-title,         /* YOU WANT body     */
[data-id="7ae8f61"] .elementor-heading-title,         /* COME VISIT body   */
[data-id="c54ed3c"] .elementor-image-box-description, /* SIMPLE body       */
[data-id="4355f90"] .elementor-image-box-description{ /* SWEETER body      */
  font-family:"Body Alternative", futura !important;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.65 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
}
/* Sub-heads: same body face, bolded. */
[data-id="068e83b"] .elementor-heading-title,   /* YOU WANT sub-head     */
[data-id="a7b0f42"] .elementor-heading-title{   /* COME VISIT sub-head   */
  font-family:"Body Alternative", sans-serif !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.65 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
}
/* Footer tagline was 13px — bring its size/face in line with the rest of the
   body copy (weight/colour left alone, it's intentionally light-on-coral). */
[data-id="25f16f41"]{
  font-family:"Body Alternative", futura, sans-serif !important;
  font-size:16px !important;
}
/* Hero sub-headline: same body face/weight as the rest of the body copy,
   just a touch larger (18px vs 16px) so it reads as the lead paragraph.
   Uses the same "Body Alternative", futura stack so the fallback face matches. */
[data-id="585a5987"] .elementor-heading-title{
  font-family:"Body Alternative", futura !important;
  font-size:18px !important;
  font-weight:400 !important;
  line-height:1.65 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
}

/* ---- 8. Split photo sections: natural stacking on mobile ------------- */
/* WE BELIEVE (e19901a) and COME VISIT (aab8193) are text + photo splits.
   Section 2 locks their container to a fixed 500px height with the photo
   cropped to fill it — correct side-by-side on desktop, but on phones the
   columns stack, so that 500px squeezes the text and photo together.
   On mobile only, release the fixed height and let the photo sit at its
   natural full-width height below the text. Scoped to these two sections;
   every other section is left exactly as-is. */
@media (max-width:767px){
  [data-id="e19901a"] > .elementor-container,
  [data-id="aab8193"] > .elementor-container{
    height:auto !important;
    min-height:0 !important;
  }
  [data-id="e19901a"] .elementor-column:has(img) .elementor-widget-image,
  [data-id="aab8193"] .elementor-column:has(img) .elementor-widget-image,
  [data-id="e19901a"] .elementor-column:has(img) .elementor-widget-image .elementor-widget-container,
  [data-id="aab8193"] .elementor-column:has(img) .elementor-widget-image .elementor-widget-container,
  [data-id="e19901a"] .elementor-widget-image img,
  [data-id="aab8193"] .elementor-widget-image img{
    height:auto !important;
    object-fit:contain !important;
  }
  /* Match the red YOU-WANT section's (12511b4) mobile rhythm: its own
     Elementor CSS gives it a clean padding:20% (~75px at 375px) directly on
     the SECTION, with nothing extra on its column/wrap.

     BUT these two sections stack TWO columns (text, then photo) inside that
     one padded section — so a section-level padding-bottom lands after the
     PHOTO (the last stacked column), not between the text and the photo
     where the eye actually needs the gap. That first attempt left the button
     touching the image. Instead: 75px padding-top on the section (breathing
     room before the text — this part matched red correctly), photo stays
     flush with the section's bottom edge (matches the desktop design's own
     "no white bands" rule for these photos), and the 75px gap moves to a
     margin-bottom on the TEXT column so it sits between text and photo. */
  [data-id="e19901a"],
  [data-id="aab8193"]{
    padding-top:75px !important;
    padding-bottom:0 !important;
  }
  [data-id="e19901a"] > .elementor-container > .elementor-column:not(:has(img)),
  [data-id="aab8193"] > .elementor-container > .elementor-column:not(:has(img)){
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-bottom:75px !important;
  }
  [data-id="e19901a"] > .elementor-container > .elementor-column:not(:has(img)) > .elementor-widget-wrap.elementor-element-populated,
  [data-id="aab8193"] > .elementor-container > .elementor-column:not(:has(img)) > .elementor-widget-wrap.elementor-element-populated{
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
}

/* ---- 9. Footer: even 3-column layout, centred stack on mobile ------- */
/* After removing the About Us column, section 55315413 holds three col-25
   columns (logo/tagline/social, Reach Us, Stay in the Loop). Three 25%
   columns only fill 75% of the row, so they bunch to the left with a dead
   gap on the right. Desktop: spread them evenly across the full width and
   line their tops up. Mobile: stack them and centre everything. */
[data-id="55315413"] > .elementor-container{
  justify-content:space-between !important;
  align-items:flex-start !important;
}

@media (max-width:767px){
  [data-id="55315413"] > .elementor-container{
    justify-content:center !important;
    align-items:center !important;
  }
  /* each stacked column takes the full width so all three centre uniformly
     (Elementor lets the middle column shrink to its content otherwise) */
  [data-id="55315413"] > .elementor-container > .elementor-column{
    width:100% !important;
  }
  /* centre every text block, heading and link in the stack */
  [data-id="55315413"] .elementor-widget-container{
    text-align:center !important;
  }
  /* centre the social-icon row */
  [data-id="55315413"] .elementor-social-icons-wrapper{
    justify-content:center !important;
  }
  /* the tagline block is max-width-capped — centre it in its column */
  [data-id="55315413"] .text_block{
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* ---- 8. CTA hover: coral → ink black (white text stays) ------------ */
/* Every red call-to-action pill across the site — nav "Order Now", hero
   "ORDER NOW", the "Order now" section buttons, "GET DIRECTIONS", "BOOK US!",
   and the footer "Subscribe" — is coral with white text at rest. On hover /
   focus they flip to the brand ink black, keeping the white text, so the
   interaction reads the same everywhere. */
.elementor-button:hover,
.elementor-button:focus,
.elementor-button:active,
[data-id="ecf882e"] .elementor-button:hover,
[data-id="mobileorder"] .elementor-button:hover,
[data-id="76225004"] .elementor-button:hover{
  background-color:var(--chewk-ink) !important;
  border-color:var(--chewk-ink) !important;
  color:#fff !important;
}
.elementor-button:hover .elementor-button-text,
.elementor-button:focus .elementor-button-text,
.elementor-button:active .elementor-button-text{
  color:#fff !important;
}

/* ---- 9. Footer address block --------------------------------------- */
/* Sits under "Reach Us" in the footer contact column. Rendered at the same
   quiet scale as the footer links rather than as a big heading. */
.footer-address .elementor-heading-title{
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1.5 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:rgba(255,255,255,0.7) !important;
  margin:0 0 6px !important;
}

/* Hide the Astra scroll-to-top (blue up arrow) site-wide */
#ast-scroll-top {
  display: none !important;
}

/* ---- 10. Local SEO: visible address + hours -------------------------- */
/* Google weighs address/hours that appear as real text, not just schema.
   The footer carries them, reusing .footer-address sizing. */
.footer-hours .elementor-heading-title{
  margin-top:10px !important;
}