/*
 * Lemonade Base - reusable layout & component CSS.
 *
 * Generic, brand-agnostic structural styles shared by every client build:
 * header/nav/footer layout, the responsive navigation, equal-height cards,
 * and button hover. Colours use theme.json preset tokens so they re-skin
 * automatically. Per-client brand/colour/texture and bespoke component CSS
 * stay in that client style variation (e.g. styles/your-client.json), not here.
 *
 * Enqueued front-end (functions.php) and registered as an editor style.
 * NOTE: kept out of theme.json styles.css on purpose - a style variation or
 * user global styles OVERWRITES that free-form css string, which would drop
 * these base rules. An enqueued stylesheet always applies.
 */
/* Buttons: hover/focus invert to ink-on-cream (tokens adapt per variation) */
:root .wp-block-button .wp-element-button:hover,:root .wp-block-button .wp-element-button:focus{background-color:var(--wp--preset--color--ink)!important;color:var(--wp--preset--color--base)!important;border-color:var(--wp--preset--color--ink)!important}

/* Equal-height card columns with bottom-aligned CTA buttons (opt-in: add className equal-cards to a Columns block) */
.equal-cards .wp-block-column{display:flex;flex-direction:column}.equal-cards .wp-block-column>.wp-block-group{flex:1;display:flex;flex-direction:column}.equal-cards .wp-block-column>.wp-block-group>.wp-block-buttons{margin-top:auto;padding-top:var(--wp--preset--spacing--50)}

/* Testimonial card: attribution pinned to the bottom so a row of quotes of
   differing lengths still lines up (opt-in: className quote-card on the card
   group, quote-mark on its opening quotation mark) */
.quote-card{display:flex;flex-direction:column;height:100%}.quote-card>p:last-child{margin-top:auto;padding-top:var(--wp--preset--spacing--30)}.quote-mark{font-family:var(--wp--preset--font-family--heading);font-size:3rem;line-height:.55;margin:0}

/* Testimonial mosaic: a short quote set as a filled feature tile beside a
   stack of longer quote cards, so an uneven set of testimonials reads as a
   deliberate composition rather than one stunted card in a row of three.
   Grid children, so zero out the flow-layout blockGap margins. */
.quote-mosaic{display:grid;gap:var(--wp--preset--spacing--50);grid-template-columns:1fr}
.quote-stack{display:grid;gap:var(--wp--preset--spacing--50);align-content:start}
.quote-mosaic>*,.quote-stack>*{margin-block-start:0}
.quote-feature{height:100%;display:flex;flex-direction:column;justify-content:center}
@media(min-width:782px){.quote-mosaic{grid-template-columns:5fr 7fr}}

/* Brand logo lockup in the header/footer (opt-in: className brand-logo on an
   Image block). Sized here rather than on the block so a client variation can
   retune it without editing the template part; clamp() covers mobile without a
   media query, and the figure margin reset keeps it flush in the flex row. */
/* line-height:0 kills the inline-block baseline gap under the <a>, which would
   otherwise make the figure ~9px taller than the image and sit it off-centre */
.site-header .brand-logo,.site-footer .brand-logo{margin:0;line-height:0}
.site-header .brand-logo img{display:block;height:clamp(64px,7.1vw,89px);width:auto;max-width:100%}
.site-footer .brand-logo img{display:block;width:clamp(132px,16vw,156px);height:auto}

/* Art-directed hero: below the nav breakpoint, swap the Cover block's landscape
   photo for a portrait one, since a wide hero centre-crops to a narrow slice on
   a tall phone frame. Opt-in: className hero-art-mobile on the Cover, and set
   --hero-mobile-src to a url() in the client's CSS. Done as a CSS background
   rather than a second Cover block: a background inside an unmatched media
   query is never fetched, so desktop never pays for the portrait file. Phones
   do still fetch the Cover's <img> (display:none does not cancel a request),
   but srcset means that is a small variant, not the full-width hero. */
@media(max-width:781px){
.hero-art-mobile{background-image:var(--hero-mobile-src);background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-art-mobile>img.wp-block-cover__image-background{display:none}
/* The portrait hero is a brighter photo than the landscape one, so the pill's
   10% white wash reads as almost nothing over it. Doubled to 20% for the same
   widths the photo swaps at — deliberately still a wash, not a fill. */
.hero-badge{background:rgba(255,255,255,.20)}
}

/* The pill inherits the hero text-shadow (0 2px 16px), which is tuned for a
   40px headline — at 14px that blur is so diffuse it adds no edge at all.
   A tight pair instead: 2px for the glyph edge, 6px to darken what is
   immediately behind it. Shadows do not move the WCAG contrast number, which
   stays low over a light photo; what makes that acceptable here is that the
   same claim is in the hero paragraph above, so the pill is never the only
   place a visitor can read it.
   Selector carries .wp-block-cover because the rule it overrides is
   .hero-photo-text p (0,1,1) — a bare .hero-badge (0,1,0) loses to it. */
.wp-block-cover .hero-badge{text-shadow:0 1px 2px rgba(14,25,32,.9),0 0 6px rgba(14,25,32,.55)}

/* Remove default top margin above the header template part */
.wp-site-blocks>.wp-block-template-part{margin-top:0}

/* Header brand + layout */
.site-header>.wp-block-group{flex-wrap:nowrap}.site-header .site-brand{align-items:stretch!important;text-align:left}.site-header .wp-block-site-title{text-align:left}.site-header .wp-block-site-title a{text-decoration:none!important}.site-header .wp-block-site-tagline{text-align:center}

/* Footer layout */
.site-footer .footer-contact{align-items:flex-end!important;text-align:right}.footer-cta{max-width:460px}:root .footer-cta .wp-element-button:hover,:root .footer-cta .wp-element-button:focus{background-color:var(--wp--preset--color--base)!important;color:var(--wp--preset--color--ink)!important;border-color:var(--wp--preset--color--base)!important}

/* Responsive navigation: desktop top-nav, tablet drawer, mobile full-screen overlay; CSS-drawn hamburger/X; active link in primary */
.site-header .wp-block-navigation a{color:var(--wp--preset--color--base);text-decoration:none}.site-header .wp-block-navigation a:hover,.site-header .wp-block-navigation a:focus-visible{color:var(--wp--preset--color--base);text-decoration:underline;text-underline-offset:0.2em}.site-header .wp-block-navigation .current-menu-item>a,.site-header .wp-block-navigation .current-menu-item>a:hover,.site-header .wp-block-navigation .current-menu-item>a:focus-visible,.site-header .wp-block-navigation a:active{color:var(--wp--preset--color--primary)!important;text-decoration:underline!important;text-underline-offset:0.2em}.site-header .wp-block-navigation__responsive-container-open svg,.site-header .wp-block-navigation__responsive-container-close svg{display:none}.site-header .wp-block-navigation__responsive-container-open,.site-header .wp-block-navigation__responsive-container-close{width:34px;height:30px;position:relative}.site-header .wp-block-navigation__responsive-container-close{color:var(--wp--preset--color--base)}.site-header .wp-block-navigation__responsive-container-open::before{content:'';position:absolute;left:5px;right:5px;top:4px;height:2px;background:currentColor;box-shadow:0 7px 0 currentColor,0 14px 0 currentColor,0 21px 0 currentColor}.site-header .wp-block-navigation__responsive-container-close::before,.site-header .wp-block-navigation__responsive-container-close::after{content:'';position:absolute;left:50%;top:50%;width:28px;height:2px;background:currentColor}.site-header .wp-block-navigation__responsive-container-close::before{transform:translate(-50%,-50%) rotate(45deg)}.site-header .wp-block-navigation__responsive-container-close::after{transform:translate(-50%,-50%) rotate(-45deg)}.site-header .wp-block-navigation__responsive-container-close{transition:color .2s ease,transform .2s ease}.site-header .wp-block-navigation__responsive-container-close:hover,.site-header .wp-block-navigation__responsive-container-close:focus{color:var(--wp--preset--color--primary);transform:rotate(90deg)}.site-header .wp-block-navigation__responsive-container.is-menu-open{position:fixed!important;inset:0!important;width:auto!important;height:auto!important}.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{--navigation-layout-justification-setting:center!important;align-items:center!important}.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content>*,.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{width:100%!important;align-items:center!important;text-align:center;--navigation-layout-justification-setting:center!important}.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{margin-top:96px!important;gap:var(--wp--preset--spacing--50)!important;font-size:var(--wp--preset--font-size--large)!important}.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container a{font-size:var(--wp--preset--font-size--large)!important}.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{position:absolute;top:38px;right:24px;z-index:100001}

/* Responsive nav breakpoints (>=1150 top-nav; 768-1149 drawer; <768 overlay) + footer */
@media (max-width:1149px){.site-header>.wp-block-group{position:relative;justify-content:center}.site-header .site-brand{align-items:center!important;text-align:center}.site-header .wp-block-navigation{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center}.site-header .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex}.site-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.always-shown){display:none}}@media (min-width:768px) and (max-width:1149px){.site-header .wp-block-navigation__responsive-container.is-menu-open{left:auto!important;width:35%!important;min-width:360px;box-shadow:-12px 0 28px rgba(0,0,0,0.28)}}

/* Full-width section bands sit flush: the post-content constrained layout adds a
   block-gap margin above every top-level block, which shows as a strip of page
   background between coloured section bands. Zero it so bands touch; each section
   keeps its own internal padding. */
.wp-block-post-content>.alignfull{margin-block:0}

/* Readable measure — cap long-form text to a comfortable line length (~66 chars).
   Sits left in a flow (default-layout) container; inside a constrained container
   wrap the content in a default-layout group so this doesn't get auto-centred. */
.measure{max-width:68ch}

/* Paired call-to-action buttons (a primary action beside a tap-to-call).
   On a narrow screen the full labels wrap to two lines inside the buttons and
   then stack, which reads as four lines of CTA. Instead the optional words are
   marked up as .btn-trim and dropped, so "Get an Instant Quote" becomes
   "Instant Quote" and "Call Chad — 0402 504 157" becomes "Call Chad", and the
   pair stays side by side on one row. The breakpoint is where the full labels
   would start to wrap, not a device width: the full labels need 525px of row
   and the hero only offers that above ~637px, so 700px leaves a little slack. */
@media (max-width:700px){
	.btn-trim{display:none}
	/* Grid rather than flex so the two buttons are equal width — matched to the
	   wider label — instead of each hugging its own text. */
	.cta-pair{display:grid!important;grid-template-columns:1fr 1fr;gap:var(--wp--preset--spacing--30);max-width:400px;margin-inline:auto}
	.cta-pair .wp-block-button{width:100%}
	.cta-pair .wp-block-button__link{display:block;width:100%;white-space:nowrap;padding-inline:0.9em;text-align:center}
	/* The guarantee pill belongs with the centred buttons, not hard left. It is
	   inline-flex, where auto margins compute to zero, so it has to become
	   block-level (flex + fit-content) before it will centre. */
	.hero-badge{display:flex!important;width:fit-content;margin-inline:auto!important}
}
@media (max-width:380px){
	.cta-pair .wp-block-button__link{padding-inline:0.85em;font-size:0.95rem}
}

/* Tap-to-call belongs in the header bar, not in the mobile overlay: a phone
   number sitting among the navigation links reads as a page, and the menu
   already has Contact. Hidden only while the overlay is open, so the desktop
   header keeps it. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item:has(>a[href^="tel:"]){display:none}

/* Stacked footer (below the columns breakpoint). Three full-width bands down
   the page reads as a long scroll of loose text, so the brand block centres and
   the two short lists share a row — Explore left, contact right — mirroring the
   desktop reading order.

   The :has() in these selectors is specificity, not decoration: the client's
   global styles carry a 600–781px rule that forces every column in a 3-column
   block to flex-basis:calc(50% - 1rem)!important. With this footer's 56px gap
   two of those no longer fit on a row, so all three wrapped to full width and
   the two lists ended up stacked at tablet widths. These rules have to outrank
   it, and the gap is narrowed so the pair genuinely fits. */
@media (max-width:781px){
	.site-footer .wp-block-columns:has(>.wp-block-column:nth-child(3)){flex-wrap:wrap!important;column-gap:var(--wp--preset--spacing--40)!important}
	.site-footer .wp-block-columns:has(>.wp-block-column:nth-child(3))>.wp-block-column:first-child{flex:0 0 100%!important;text-align:center}
	.site-footer .wp-block-columns>.wp-block-column:first-child p{margin-inline:auto}
	.site-footer .wp-block-columns>.wp-block-column:first-child .brand-logo img{margin-inline:auto}
	/* Explore takes only what its labels need; the contact column gets the rest,
	   because the email address is the widest thing in the footer. */
	.site-footer .wp-block-columns:has(>.wp-block-column:nth-child(3))>.wp-block-column:nth-child(2){flex:0 1 auto!important}
	/* basis 0, not auto: with an auto basis the column asks for its max-content
	   width, which at phone widths no longer fits beside Explore and wraps the
	   pair back into a stack. */
	.site-footer .wp-block-columns:has(>.wp-block-column:nth-child(3))>.wp-block-column:nth-child(3){flex:1 1 0!important;min-width:0;text-align:right}
	.site-footer .wp-block-columns>.wp-block-column:nth-child(3) .wp-block-group{align-items:flex-end!important}
	.site-footer .footer-email{white-space:nowrap}
}
/* The short label is the exception, not the default: hidden everywhere until
   the address stops fitting. */
.site-footer .footer-email-short{display:none}
/* Below ~465px the address cannot sit on one line at a legible size (it needs
   236px and the column has less), so the link shows a short label instead and
   keeps the full address in the mailto. */
@media (max-width:480px){
	.site-footer .footer-email-full{display:none}
	.site-footer .footer-email-short{display:inline}
}