/*
Theme Name: Express Wine Delivery
Theme URI: https://expresswinedelivery.com/
Author: BudBreak Creative
Author URI: https://budbreakcreative.com/
Description: Full Site Editing block theme rebuilding the live expresswinedelivery.com design (Georama type, wine/navy/indigo palette, header, footer, form fields) as WordPress block patterns. WCAG 2.1 AA accessibility is built into the theme layer itself; a few original values (input border contrast, submit button height) were nudged to pass contrast/target-size checks — see the comments below for each. Content-level accessibility (alt text, link wording, in-content heading order) is the editor's responsibility, not the theme's.
Version: 1.0.2
Requires at least: 6.5
Requires PHP: 8.0
Tested up to: 7.0.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: express-wine-delivery
*/

/* ==========================================================================
   Accessibility primitives
   ========================================================================== */

.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}

.skip-link{left:-9999px;position:absolute;top:0;z-index:100000}
.skip-link:focus{background:#212529;color:#FFFFFF;display:block;left:1rem;top:1rem;padding:0.75rem 1.25rem;text-decoration:none;border-radius:4px}

:focus-visible{outline:none;box-shadow:0 0 0 2px #FFFFFF,0 0 0 4px #212529;border-radius:2px}

/* Minimum 44x44px target on standalone controls (inline text links are exempt per WCAG 2.5.8) */
.wp-block-button__link,.wp-block-navigation-item__content,.wp-block-search__button,.wp-block-query-pagination-numbers a,.wp-block-query-pagination-next,.wp-block-query-pagination-previous,.navbar-toggler,.back-to-top,.hero-carousel__dot,.testimonial-carousel__dot,.testimonial-carousel__prev,.testimonial-carousel__next,.wpcf7-form-control,input[type="radio"]+label,input[type="checkbox"]+label{min-height:44px}
.wp-block-button__link,.navbar-toggler,.back-to-top,.hero-carousel__dot,.testimonial-carousel__dot,.testimonial-carousel__prev,.testimonial-carousel__next{min-width:44px;display:inline-flex;align-items:center;justify-content:center}

@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   Brand type & body — matched to the live site's Georama / texture
   ========================================================================== */

body{
	background:#FFFFFF url('assets/img/cubes.png') repeat;
}

/* ==========================================================================
   Type scale — h1-h6 and body copy, measured directly from the live site
   (homepage, /services/, /about/), not per-block attributes. One rule per
   tag means every heading of a given level is consistent everywhere by
   construction, instead of being an independent decision made by hand each
   time a pattern gets written.

   No !important: patterns/templates deliberately never set a per-block
   "fontSize"/"textColor" attribute on a heading that's meant to follow this
   scale, so there's no competing "has-*-font-size"/"has-*-color" utility
   class fighting these rules for specificity — plain tag selectors are the
   only thing that ever matches, and they just win normally. Instances that
   need to deviate from the scale (card headings, the CTA heading, the 404
   heading) get their own named class instead of a one-off block attribute,
   scoped narrowly enough to win on ordinary specificity.

   H1 is genuinely one consistent style everywhere on the live site. H2 is
   NOT — it's four different treatments sharing one tag (a 36px gray
   "eyebrow" above H1s, a 33px uppercase maroon section label, and 24-28px
   maroon card headings). The base h2 rule below is the eyebrow (the most
   consistently-reused of the four); the others are named modifier classes,
   not per-instance fontSize guessing. H3-H6 aren't used anywhere on the
   live site at all — defined here for this theme's own card headings
   (h3), sized to match the live card-heading scale.
   ========================================================================== */

h1{
	font-size:3.75rem;
	font-weight:600;
	color:var(--wp--preset--color--primary);
	text-transform:uppercase;
	line-height:1.2;
}
h2{
	font-size:2.25rem;
	font-weight:600;
	color:var(--wp--preset--color--muted-text);
	text-transform:none;
	line-height:1.2;
}
h3{
	font-size:1.5rem;
	font-weight:600;
	color:var(--wp--preset--color--primary);
	text-transform:none;
	line-height:1.2;
}
h4,h5,h6{
	font-size:1.25rem;
	font-weight:600;
	color:var(--wp--preset--color--primary);
	text-transform:none;
	line-height:1.2;
}
p{
	font-size:1rem;
	font-weight:400;
	color:var(--wp--preset--color--contrast);
	line-height:1.5;
}

/* Trim h1-h3 a bit on phones so long single words (e.g. "TESTIMONIALS")
   don't wrap mid-word at the live type scale's full size. */
@media (max-width:600px){
	h1{
		font-size:2.5rem;
	}
	h2{
		font-size:1.875rem;
	}
	h3{
		font-size:1.3125rem;
	}
}

/* Section intro heading (e.g. "What We Do") — 33px, uppercase, maroon.
   Keyed off the section's own container class, not a class on the heading
   itself: any heading dropped directly in a .services-section inherits
   this by virtue of where it sits, nothing to apply to the heading. */
.services-section > h2{
	font-size:2.0625rem;
	color:var(--wp--preset--color--primary);
	text-transform:uppercase;
}
.services-section{
	padding:3.75rem 0 2.1875rem;
}

/* ==========================================================================
   Kill WP's global top-level flow spacing — theme.json's
   :where(.wp-site-blocks) > * { margin-block-start: 24px } assumes every
   template's top-level blocks are stacking vertically with no spacing of
   their own. Every template here already sets its own padding/background
   per section, so this rule just pushes each one away from the last on
   every page. Targets every direct child (*), not specific tag names —
   an earlier version of this rule only listed main/footer, which broke
   again the moment page.html grew a banner (figure) and a page-title-band
   (section) as new top-level siblings that weren't covered by name.
   Zero-specificity :where(), so a plain selector wins regardless of order.
   ========================================================================== */

.wp-site-blocks > *{
	margin-top:0;
}

/* Same rule, same reason, one level down: front-page.html's <main> stacks
   full-bleed section patterns (hero/services/testimonials/CTA) that each
   already carry their own padding/background and are meant to sit flush
   against each other, matching the live site. Scoped to this class (not a
   blanket main > * rule) so page.html/404.html's actual post-content still
   gets normal paragraph-to-paragraph flow spacing when an editor writes it. */
.front-page-sections > *{
	margin-top:0;
}

/* ==========================================================================
   Generic content <main> — page.html's post-content wrapper and index.html's
   query loop share the same plain vertical padding, no per-template value
   ========================================================================== */
.site-main{
	padding:3rem 0;
}

/* ==========================================================================
   404 template
   ========================================================================== */
.not-found-main{
	padding:4rem 0;
}
.not-found-heading{
	font-size:2.0625rem;
}

/* ==========================================================================
   Header — two-row header matched to the live site (utility row + logo/nav row)
   ========================================================================== */

.site-header{
	background:#FFFFFF;
}
.site-header-main{
	margin-top:0;
}
.site-header-utility,
.site-header-main{
	padding-left:5%;
	padding-right:5%;
}
.site-header-utility{
	padding-top:0.5rem;
	padding-bottom:0.5rem;
}
.site-header-main{
	padding-top:0.75rem;
	padding-bottom:0.75rem;
}
.site-header-utility .wp-block-navigation-item__content{
	text-transform:none;
	color:var(--wp--preset--color--contrast);
}
.site-header-main .wp-block-navigation-item__content:hover{
	color:var(--wp--preset--color--secondary);
}
.wp-block-site-logo{
	max-width:263px;
	width:100%;
}
.custom-logo-link{
	width:100%;
}
.wp-block-site-logo img{
	max-width:263px;
	width:100%;
	height:auto;
	display:block;
}
/* Add this class to the "AMS Login" navigation link block (Advanced > Additional CSS class) to match the live site's bolder treatment */
.nav-strong .wp-block-navigation-item__content{
	font-weight:800;
}

/* ==========================================================================
   Page banner — optional full-width image above the page title on interior
   pages (page.html), set via the Page's own Featured Image field. Renders
   nothing at all when no featured image is set (core/post-featured-image's
   own default behavior — no wrapper, no empty gap), so this only needs to
   size it for the case where one exists.
   ========================================================================== */

.page-banner img{
	width:100%;
	height:auto;
	display:block;
}

/* ==========================================================================
   Page Title band — matches .page-title on the live site (About/Services/Contact headers)
   ========================================================================== */

.page-title-band{
	background:#FFFFFF url('assets/img/cubes.png') repeat;
	text-align:center;
	padding:3.75rem 1.5rem 4.6875rem;
}
@media (max-width:600px){
	.page-title-band{
		padding-bottom:2rem;
	}
}

/* ==========================================================================
   Hero Carousel block style (core/group) — matches the live site's
   auto-rotating photo banner. Any Image block dropped directly inside a
   group with this style becomes a slide automatically; hero-carousel.js
   adds the "is-enhanced" class, dots, and ARIA at runtime. Slides are
   absolutely-positioned unconditionally (not gated behind .is-enhanced) so
   the CSS-only fallback (:first-child) and the JS-driven state (.is-active)
   produce the exact same single-slide layout — confirmed via a real
   PerformanceObserver layout-shift measurement against the live page that
   the previous version (slides in normal document flow until JS added
   .is-enhanced) let all 5 full-size images stack visibly for the ~300ms
   before hero-carousel.js ran, then collapse: a real ~4700px-to-750px
   layout collapse worth CLS 0.20 on its own — the single largest
   contributor to this page's Lighthouse CLS score, unrelated to fonts or
   anything else that looked plausible before it was actually measured.
   Anything other than a direct-child Image block (a stray Heading/
   Paragraph, say) is hidden outright once enhanced, so it can't end up
   invisible-but-still-announced to screen readers. .hero-carousel__dot's
   target size comes from the accessibility primitives rule above; only the
   small visible dot (::before) is styled here.
   ========================================================================== */

.is-style-hero-carousel{
	position:relative;
	overflow:hidden;
	min-height:560px;
}
.is-style-hero-carousel > .wp-block-image{
	margin:0;
	position:absolute;
	inset:0;
	opacity:0;
	visibility:hidden;
	transition:opacity 600ms ease-in-out;
}
.is-style-hero-carousel > .wp-block-image img{
	width:100%;
	height:100%;
	min-height:560px;
	object-fit:cover;
	display:block;
}
.is-style-hero-carousel > .wp-block-image:first-child,
.is-style-hero-carousel.is-enhanced > .wp-block-image.is-active{
	opacity:1;
	visibility:visible;
}
.is-style-hero-carousel.is-enhanced > :not(.wp-block-image):not(.hero-carousel__dots):not(.hero-carousel__status){
	display:none;
}
.hero-carousel__dots{
	position:absolute;
	left:0;
	right:0;
	bottom:1.25rem;
	display:flex;
	justify-content:center;
	z-index:2;
}
.hero-carousel__dot{
	appearance:none;
	-webkit-appearance:none;
	border:0;
	border-radius:0;
	background:transparent;
	padding:0;
	cursor:pointer;
}
.hero-carousel__dot::before{
	content:"";
	display:block;
	width:28px;
	height:4px;
	background:rgba(255,255,255,0.5);
	transition:background 200ms ease-in-out;
}
.hero-carousel__dot[aria-current="true"]::before{
	background:#FFFFFF;
}

/* ==========================================================================
   Testimonial Carousel block style (core/group) — matches the reference
   carousel at expresswinedelivery.com/testimonials/ (a plain Bootstrap
   carousel there; rebuilt from scratch here with the same vanilla-JS
   approach as the Hero Carousel, no Bootstrap dependency). Any Group
   dropped directly inside a group with this style becomes a slide
   automatically — each slide is itself a Group containing, in order: an
   Image (logo), a Paragraph (quote), an H5 (company), an H6 (person), and
   an optional trailing Paragraph (role/title) — matching the reference's
   actual heading levels. Measured against the reference, not guessed:
   card 55em/880px centered no chrome; quote 19px left-aligned; company
   20px/500/maroon centered; person 16px/500/Bootstrap's own muted gray
   (#6c757d, not this theme's muted-text — that's what's actually there);
   role 19px centered; dots 30x4px bars, maroon, inactive at 0.5 opacity.
   One deliberate deviation: the reference's prev/next arrows are white at
   0.5 opacity sitting on a light background — barely visible, reads as an
   unstyled Bootstrap default rather than a deliberate choice. Used the
   theme's maroon here instead since an arrow you can't see isn't
   functional; flag if you'd rather match the reference exactly.
   ========================================================================== */

.testimonials-section{
	padding:6.25rem 1.5rem 4rem;
}
.is-style-testimonial-carousel{
	position:relative;
}
/* Once enhanced, slides move out of the carousel and into this track (see
   testimonial-carousel.js) — overflow:hidden lives here, not on the outer
   carousel, specifically so it clips the slide transition without also
   clipping .testimonial-carousel__prev/__next, which sit just outside the
   track/card's own edges. */
.testimonial-carousel__track{
	position:relative;
	overflow:hidden;
}
.is-style-testimonial-carousel > .wp-block-group,
.testimonial-carousel__track > .wp-block-group{
	max-width:55em;
	margin:0 auto;
	padding:2.5rem 0 4rem;
	background:var(--wp--preset--color--base);
	box-sizing:border-box;
}
.testimonial-carousel__track > .wp-block-group{
	display:none;
}
.testimonial-carousel__track > .wp-block-group.is-active{
	display:block;
}
.is-style-testimonial-carousel > .wp-block-group img,
.testimonial-carousel__track > .wp-block-group img{
	display:block;
	width:15em;
	max-width:100%;
	height:auto;
	margin:0 auto 1.5rem;
}
.is-style-testimonial-carousel > .wp-block-group > p:first-of-type,
.testimonial-carousel__track > .wp-block-group > p:first-of-type{
	font-size:1.1875rem;
	line-height:1.5;
	text-align:left;
	margin-bottom:1rem;
}
.is-style-testimonial-carousel h5{
	font-size:1.25rem;
	font-weight:500;
	color:var(--wp--preset--color--primary);
	text-transform:none;
	text-align:center;
	margin-bottom:0.5rem;
}
.is-style-testimonial-carousel h6{
	font-size:1rem;
	font-weight:500;
	color:#6c757d;
	text-transform:none;
	text-align:center;
	margin-bottom:0.5rem;
}
.is-style-testimonial-carousel > .wp-block-group > p:last-of-type:not(:first-of-type),
.testimonial-carousel__track > .wp-block-group > p:last-of-type:not(:first-of-type){
	font-size:1.1875rem;
	text-align:center;
}
/* Matches the card's own max-width/margin:auto centering exactly, so its
   edges always line up with the card's regardless of how much wider the
   outer carousel is (it isn't capped to the card's width the way the card
   itself is — at wide viewports there's a large gutter between the two).
   Invisible/pointer-events:none itself; only the buttons inside it are
   interactive, so it never intercepts clicks meant for the card underneath. */
.testimonial-carousel__stage{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	max-width:55em;
	margin:0 auto;
	pointer-events:none;
}
/* Sit outside the white card's own edges, not on top of it — avoids ever
   overlapping quote text (a long testimonial used to run the vertically-
   centered arrow straight through the paragraph) without touching the
   dots, which stay exactly where they were. Deliberately smaller than the
   44px accessibility primitive above (24x24 still clears WCAG 2.5.8's AA
   minimum target size, and the dots remain a full 44px equivalent way to
   reach every slide) so they fit inside the section's own side padding on
   phones, where the card fills the full width and there's no gutter to
   sit in. */
.testimonial-carousel__prev,.testimonial-carousel__next{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:20px;
	height:20px;
	min-width:0;
	min-height:0;
	background:transparent;
	border:0;
	opacity:0.5;
	cursor:pointer;
	pointer-events:auto;
}
.testimonial-carousel__prev:hover,.testimonial-carousel__next:hover,
.testimonial-carousel__prev:focus-visible,.testimonial-carousel__next:focus-visible{
	opacity:1;
}
.testimonial-carousel__prev{left:-20px}
.testimonial-carousel__next{right:-20px}
.testimonial-carousel__prev::before,.testimonial-carousel__next::before{
	content:"";
	width:14px;
	height:14px;
	border:solid var(--wp--preset--color--primary);
	border-width:0 3px 3px 0;
	display:inline-block;
	flex-shrink:0;
}
.testimonial-carousel__prev::before{transform:rotate(135deg)}
.testimonial-carousel__next::before{transform:rotate(-45deg)}
.testimonial-carousel__dots{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	display:flex;
	justify-content:center;
	gap:0.5rem;
}
.testimonial-carousel__dot{
	appearance:none;
	-webkit-appearance:none;
	border:0;
	background:transparent;
	padding:0;
	cursor:pointer;
}
.testimonial-carousel__dot::before{
	content:"";
	display:block;
	width:30px;
	height:4px;
	background:var(--wp--preset--color--primary);
	opacity:0.5;
	transition:opacity 200ms ease-in-out;
}
.testimonial-carousel__dot[aria-current="true"]::before{
	opacity:1;
}

/* ==========================================================================
   Hero text band — the textured band below the hero photo, matches the live
   site's texture under "Stack it. Pack it. Ship it."
   ========================================================================== */

.hero-text-band{
	background:#FFFFFF url('assets/img/cubes.png') repeat;
	padding:3.75rem 1.5rem 4.6875rem;
}
@media (max-width:600px){
	.hero-text-band{
		padding-bottom:2rem;
	}
}

/* ==========================================================================
   Services grid — real 3-up grid so a 3rd/5th/7th card can't orphan onto
   its own row the way flex-wrap + space-between did
   ========================================================================== */

.services-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:2rem;
}
.services-grid > *{
	margin-top:0;
}
/* Shadow duplicated here deliberately, not just left to is-style-drop-shadow
   (see below): images already inserted on the front page before that style
   existed aren't reliably showing it as a Styles-panel option (still under
   investigation), so .service-card-image carries its own copy directly as a
   guaranteed fallback. is-style-drop-shadow stays registered and usable as
   its own thing everywhere else — this isn't a replacement for it. */
.service-card-image{
	box-shadow:5px 5px 5px 0 var(--wp--preset--color--primary);
}
.service-card-image img{
	display:block;
	width:100%;
	aspect-ratio:3/2;
	object-fit:cover;
}
/* Card heading (e.g. "Delivery trucking") — 24px, maroon, centered — and its
   paragraph, also centered. Keyed off .services-grid's direct children
   (the cards have no class of their own — live's actual service boxes
   carry no card chrome at all, see 0.3.2); nothing added to the
   heading/paragraph themselves. core/heading level is 2 to match the live
   site's actual (non-ideal) semantic structure; the base h2{} rule alone
   is the eyebrow style, not this. */
.services-grid > * h2{
	font-size:1.5rem;
	color:var(--wp--preset--color--primary);
	text-transform:none;
	text-align:center;
}
.services-grid > * p{
	text-align:center;
}
@media (max-width:767px){
	.services-grid{
		grid-template-columns:1fr;
	}
}

/* ==========================================================================
   Custom block style: Card (core/group, core/quote)
   ========================================================================== */
.is-style-card{
	background:var(--wp--preset--color--base);
	padding:2rem;
	border-radius:4px;
	flex:1 1 300px;
}

/* ==========================================================================
   Custom block style: Brand CTA bar — matches .service-box .more on the live site:
   a full-width flat-color bar acting as the card's link, not a rounded button
   ========================================================================== */
.is-style-brand-cta .wp-block-button__link{
	display:flex;
	width:100%;
	height:60px;
	align-items:center;
	justify-content:center;
	border-radius:0;
	padding:0 15px;
	font-weight:600;
	text-transform:none;
}
.is-style-brand-cta .wp-block-button__link:hover{
	text-decoration:underline;
}

/* ==========================================================================
   Custom block style: Brand Rule separator — default core/separator gray fails
   3:1 non-text contrast (WCAG 1.4.11); this variant uses the accent color instead
   ========================================================================== */
.is-style-brand.wp-block-separator{border-top:3px solid var(--wp--preset--color--accent);opacity:1}

/* ==========================================================================
   Custom block style: Text-safe Overlay — forces a minimum scrim on core/cover
   so overlaid text stays readable regardless of the image an editor uploads
   (WCAG 1.4.3), independent of content choices

   !important is legitimate here, unlike the padding/type-scale cases above:
   this is deliberately overriding whatever dim/opacity value an editor picks
   per-instance through the Cover block's own UI — content we don't and
   shouldn't control — not a competing rule inside our own theme files.
   ========================================================================== */
.is-style-text-safe-overlay.wp-block-cover::before{background:rgba(33,37,41,0.55)!important;opacity:1!important}
.is-style-text-safe-overlay.wp-block-cover .wp-block-cover__inner-container{color:#FFFFFF}

/* ==========================================================================
   Custom block style: Drop Shadow (core/image) — matches the live site's
   service-photo shadow (5px 5px 5px 0, maroon). Reused directly by the
   Services grid's card photos rather than duplicating the value there.
   Also forces the image to fill its container width: WP outputs <img> with
   the uploaded file's native pixel width/height as HTML attributes and only
   a global max-width:100% (caps oversized images, doesn't stretch undersized
   ones) — so a photo smaller than its column just renders at native size,
   leaving it visibly narrower than its siblings.
   ========================================================================== */
.is-style-drop-shadow{box-shadow:5px 5px 5px 0 var(--wp--preset--color--primary)}
.is-style-drop-shadow img{
	width:100%;
	height:auto;
	display:block;
}

/* ==========================================================================
   Footer — matches #footer / .contact-table on the live site
   ========================================================================== */
.site-footer{
	padding:2.5rem 1rem;
}
.site-footer a{
	color:var(--wp--preset--color--base);
	text-decoration:underline;
}
.site-footer a:hover{
	color:var(--wp--preset--color--base);
	opacity:.8;
}
.site-footer-contact{
	list-style:none;
	margin:0;
	padding:0;
}
.site-footer-contact li{
	display:flex;
	align-items:flex-start;
	gap:0.75rem;
	padding-bottom:1.5rem;
}
.site-footer-contact li:last-child{
	padding-bottom:0;
}
.site-footer-contact svg{
	flex:0 0 22px;
	width:22px;
	height:22px;
	margin-top:0.2em;
	fill:currentColor;
}

/* ==========================================================================
   Back to top — matches .back-to-top on the live site
   ========================================================================== */
.back-to-top{
	display:none;
	cursor:pointer;
	z-index:9999;
	border-radius:8px;
	border:0;
	background:#212529;
	color:#fff;
	position:fixed;
	right:20px;
	bottom:20px;
	opacity:.6;
	transition:opacity 300ms ease-in-out;
}
.back-to-top:hover,.back-to-top:focus-visible{
	opacity:1;
}
.back-to-top.is-visible{
	display:inline-flex;
}
.back-to-top svg{
	width:20px;
	height:20px;
	fill:currentColor;
}

/* ==========================================================================
   CTA / Contact band — the "Ready to Get Started?" section wrapping the form
   ========================================================================== */
.cta-band{
	padding:4rem 1.5rem;
}
.cta-band h2{
	font-size:1.75rem;
	color:var(--wp--preset--color--primary);
}

/* ==========================================================================
   Forms (Contact Form 7) — matches .input-field .input on the live site, with
   two intentional deviations: field height and border color, both called out
   inline, both needed to clear WCAG 2.5.8 (target size) and 1.4.11 (non-text contrast)
   ========================================================================== */
.wpcf7-form{
	display:flex;
	flex-wrap:wrap;
	gap:0 2rem;
}
/* Layout wrapper divs added around CF7 form-tags in the editor — 50/50 two-column,
   or full width. Aliases both .ewd-form-* and .end-form-* (the form on the live
   dev site currently uses end-form-50/end-form-100, a likely typo of the ewd-
   prefix used everywhere else in this theme — both are supported so this works
   either way; worth fixing the CF7 template to ewd-form-* for consistency when convenient). */
.ewd-form-50,.end-form-50{
	width:calc(50% - 1rem);
}
@media (max-width:600px){
	.ewd-form-50,.end-form-50{
		width:100%;
	}
}
.ewd-form-100,.end-form-100{
	width:100%;
}
/* Narrower siblings for denser rows (e.g. three fields sharing a line) — same
   gap math as .ewd-form-50, just split three or four ways instead of two. */
.ewd-form-33{
	width:calc((100% - 4rem) / 3);
}
.ewd-form-25{
	width:calc(25% - 1.5rem);
}
@media (max-width:600px){
	.ewd-form-33,.ewd-form-25{
		width:100%;
	}
}
/* Main-column + sidebar split, matching the reference order form's actual
   structure: a wide left column of paired/full-width fields running several
   rows deep, alongside a narrower right column (Order #, PO #, Service Type,
   Product) that's only as tall as its own short stack of content — a plain
   .ewd-form-50/33 row can't produce this because those all size against one
   flat row's width, they can't make a short column sit beside a much taller
   one. Two flex children side by side does this correctly with no grid math. */
.ewd-form-columns{
	display:flex;
	flex-wrap:wrap;
	gap:0 2rem;
	width:100%;
}
.ewd-form-main{
	flex:1 1 480px;
	display:flex;
	flex-wrap:wrap;
	gap:0 2rem;
	min-width:0;
}
.ewd-form-sidebar{
	flex:0 0 220px;
}
@media (max-width:781px){
	.ewd-form-sidebar{
		flex:1 1 100%;
	}
}
/* Bold, spaced label for a field GROUP (e.g. "Service Type" above a radio
   row) — CF7's [radio]/[checkbox] tags don't come with a <label> of their
   own the way text fields do, so this is a plain <p> needing its own class
   to match the bold field-label look used everywhere else in the form. */
.ewd-form-group-label{
	font-weight:600;
	margin-bottom:0.35rem;
}
.wpcf7-form label{
	display:block;
	font-weight:600;
	margin-bottom:0.35rem;
}
/* Form sits directly on the footer's navy background (no white card wrapper),
   so labels need to be white to stay readable — scoped to .site-footer only;
   the cta-contact pattern's light "surface" background still wants dark labels. */
.site-footer .wpcf7-form label{
	color:var(--wp--preset--color--base);
}
.wpcf7-form-control{
	font-family:var(--wp--preset--font-family--body);
	font-size:1rem;
	display:block;
	width:100%;
	border:1px solid var(--wp--preset--color--input-border);
	line-height:1.4;
	padding:0 0.75rem;
	background:var(--wp--preset--color--input-bg);
	color:var(--wp--preset--color--contrast);
	border-radius:0;
	box-sizing:border-box;
}
textarea.wpcf7-form-control{
	min-height:161px;
}
/* input[type=date]'s internal browser-native date-edit widget lives in a
   shadow-DOM part that doesn't obey line-height the way plain text does, so
   it was sitting top-aligned instead of vertically centered like every other
   field — confirmed on the live page with a filled-in date next to a plain
   text field before writing this, not assumed. Standard cross-browser fix:
   make the input itself a flex container so the shadow content centers
   the same way flex children always do. */
input[type="date"].wpcf7-form-control{
	display:flex;
	align-items:center;
}
/* CF7 stamps the same .wpcf7-form-control class onto radio/checkbox GROUP
   wrapper spans, not just real inputs — without this, the border/background/
   padding above (meant for text fields) wraps the entire radio row in a
   bordered box instead of just styling actual .wpcf7-form-control inputs. */
.wpcf7-form-control.wpcf7-radio,.wpcf7-form-control.wpcf7-checkbox{
	border:0;
	padding:0;
	background:transparent;
}
.wpcf7-form-control[aria-invalid="true"]{
	border-color:var(--wp--preset--color--primary);
	border-width:2px;
}
.wpcf7-form-control-wrap{
	display:block;
	margin-bottom:0.85rem;
}
input[type="submit"].wpcf7-form-control{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	background:var(--wp--preset--color--primary);
	color:#fff;
	font-weight:700;
	text-transform:uppercase;
	border:2px solid transparent;
	cursor:pointer;
}
input[type="submit"].wpcf7-form-control:hover{
	background:var(--wp--preset--color--base);
	border-color:var(--wp--preset--color--primary);
	color:var(--wp--preset--color--primary);
}
input[type="radio"],input[type="checkbox"]{
	width:1.25em;
	height:1.25em;
	margin-right:0.5em;
	vertical-align:middle;
}
.wpcf7-response-output{
	border-radius:0;
}
.wpcf7-not-valid-tip{
	color:var(--wp--preset--color--primary);
	font-weight:600;
}

/* ==========================================================================
   Repeater for Contact Form 7 (order form's repeatable product rows) — the
   plugin's own cf7_repeater.css only supplies bare-minimum layout (its
   default markup stacks each row's fields full-width, one per line, which is
   why a 3-field row was taking as much vertical space as ten single fields).
   .ewd-form-repeater-row is a class hand-added inside the repeater's field
   markup in the CF7 form editor (wp-admin → Contact → Order Form), wrapping
   the Product Code / Product Name / Qty fields — same 3-across math as
   .ewd-form-33 above, just targeting the plugin's own <label> tags directly
   since its template doesn't give each field its own wrapper div to hang a
   width class on.

   Every rule below that overrides a plugin default is scoped under .wpcf7-form
   (a real ancestor, not a hack) rather than reaching for !important. Verified
   on the live page that cf7_repeater.css's link tag is enqueued AFTER this
   stylesheet, so equal-specificity rules here were silently losing — checked
   .repeater-field-button-add specifically (computed background stayed the
   plugin's grey/pill instead of this rule) before adding the extra scope, not
   assumed from theory.
   ========================================================================== */
.ewd-form-repeater-row p{
	display:flex;
	flex-wrap:wrap;
	gap:0 2rem;
}
.ewd-form-repeater-row p br{
	display:none;
}
.ewd-form-repeater-row label{
	display:block;
	width:calc((100% - 4rem) / 3);
	font-weight:600;
	margin-bottom:0.35rem;
}
@media (max-width:600px){
	.ewd-form-repeater-row label{
		width:100%;
	}
}
.wpcf7-form .cf7-repeater-container{
	margin-top:0.5rem;
}
.wpcf7-form .repeater-field-item{
	margin-bottom:0;
	padding:1.25rem 0;
	border-bottom:1px solid var(--wp--preset--color--input-border);
}
.wpcf7-form .repeater-field-item:first-child{
	padding-top:0;
}
.wpcf7-form .repeater-field-header-title-text{
	font-weight:700;
	text-transform:uppercase;
	font-size:0.85rem;
	letter-spacing:0.03em;
}
.wpcf7-form .repeater-field-header-count{
	color:var(--wp--preset--color--primary);
	font-weight:700;
}
/* Icon-only collapse/remove controls: the plugin's own markup gives these no
   accessible name (bare <i> tags, no aria-label). Padding here brings the
   clickable/tappable area up to the 44x44px WCAG 2.5.8 minimum; the missing
   role/name/keyboard-access is patched at runtime by
   assets/js/order-form-repeater-a11y.js (see that file for why — the
   plugin's markup can't be edited directly). */
.wpcf7-form .repeater-field-header-acctions li{
	padding:10px;
	min-width:24px;
	min-height:24px;
}
.wpcf7-form .repeater-icon{
	color:var(--wp--preset--color--contrast);
	font-size:18px;
}
/* Matches input[type="submit"].wpcf7-form-control exactly (same colors,
   weight, case, square corners, hover-invert) instead of a separate
   "secondary action" treatment — client wants one consistent button look
   across the whole form, not a visual hierarchy between Add Row and Submit. */
.wpcf7-form .repeater-field-button-add{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:44px;
	padding:0 1.5rem;
	background:var(--wp--preset--color--primary);
	color:#fff;
	font-weight:700;
	text-transform:uppercase;
	border:2px solid transparent;
	border-radius:0;
	cursor:pointer;
	font-family:var(--wp--preset--font-family--body);
	font-size:1rem;
}
.wpcf7-form .repeater-field-button-add:hover{
	background:var(--wp--preset--color--base);
	border-color:var(--wp--preset--color--primary);
	color:var(--wp--preset--color--primary);
	opacity:1;
}

/* ==========================================================================
   Native core/search block (e.g. the 404 template) — same visual language as
   the Contact Form 7 fields above, since it isn't CF7 markup
   ========================================================================== */
.wp-block-search__input{
	border:1px solid var(--wp--preset--color--input-border);
	background:var(--wp--preset--color--input-bg);
	border-radius:0;
}
.wp-block-search__button{
	background:var(--wp--preset--color--primary);
	color:#fff;
	border-radius:0;
	text-transform:uppercase;
	font-weight:700;
}
.wp-block-search__button:hover{
	background:var(--wp--preset--color--secondary);
}

/* ==========================================================================
   Breakpoints — matches the live site's 991px nav switch and 767px title-size drop.
   Type sizes already fade smoothly via clamp() in theme.json rather than
   jumping at 767px like the original; the 991px rule below covers layout, not type.
   ========================================================================== */
@media (max-width:991px){
	.site-header-utility{
		font-size:0.8rem;
	}
}

/* ==========================================================================
   core/columns — "Reverse column order on mobile" Inspector toggle
   (columns-editor.js registers the attribute/UI and stamps this class on
   the saved block). 781px sits just under core/columns' own 782px stacking
   breakpoint, so this only ever applies once columns are already stacked —
   desktop column order is untouched at any width above that.
   ========================================================================== */
@media (max-width:781px){
	.ewd-column-reverse-mobile{
		flex-direction:column-reverse;
	}
	.ewd-column-reverse-mobile > .wp-block-column{
		width:100%;
		min-width:100%;
		max-width:100%;
	}
}