/*
Theme Name: Apex Valet Trash
Theme URI: https://www.apextrash.com
Description: Child theme of Twenty Twenty-Five for Apex Valet Trash. Brand palette and
             type taken from the live Wix site (see LIVE-BLUEPRINT.md); Jost stands in
             for Avenir LT, which Wix licensed and we cannot carry over.
Author: Arborstone IT
Template: twentytwentyfive
Version: 1.0.0
Text Domain: apex-valet-trash
*/

/* Full-bleed hero: a cover block whose text sits over a darkened photo. */
.apex-hero .wp-block-cover__inner-container { max-width: 1100px; margin-inline: auto; }

/* The amber CTA, matching the live site's Request Quote button. */
.wp-block-button.is-style-apex-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--brand-amber);
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: 2px;
}
.wp-block-button.is-style-apex-cta .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--navy);
	color: #fff;
}

/* Service / benefit cards. */
.apex-card {
	background: #fff;
	border: 1px solid #e6e7ea;
	border-radius: 4px;
	height: 100%;
}

/* Section eyebrow — the small uppercase label above a heading. */
.apex-eyebrow {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 600;
	color: var(--wp--preset--color--brand-amber);
}


/*
 * Links inside dark sections.
 * theme.json sets the global link colour to navy, which is invisible on the navy
 * footer -- the "Our services" list and the Privacy/Careers/Contact line rendered
 * as bullets with no visible text. Scope by the background colour class so any
 * navy section is covered, not just the footer.
 */
.has-navy-background-color a:where(:not(.wp-element-button)),
.has-navy-deep-background-color a:where(:not(.wp-element-button)) {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, .45);
}
.has-navy-background-color a:where(:not(.wp-element-button)):hover,
.has-navy-deep-background-color a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--brand-amber);
}

/* The footer service list is a plain link list, not a bulleted list. */
.has-navy-background-color .wp-block-list {
	list-style: none;
	padding-left: 0;
}
.has-navy-background-color .wp-block-list li { margin-block: .35rem; }

/* Hero copy sits over a dark overlay, so its links need the same treatment. */
.apex-hero a:where(:not(.wp-element-button)) { color: #fff; }

/*
 * Contact Form 7 ships almost no styling, so its fields render as raw browser
 * defaults. Match them to the theme rather than leaving a designed page with an
 * undesigned form in the middle of it.
 */
.wpcf7-form p { margin-block: 1.1rem; }

.wpcf7-form label {
	display: block;
	font-weight: 500;
	color: var(--wp--preset--color--navy);
	margin-bottom: .35rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin-top: .35rem;
	padding: .7rem .85rem;
	font: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background: #fff;
	border: 1px solid #cdd0d6;
	border-radius: 3px;
}
.wpcf7-form textarea { min-height: 9rem; resize: vertical; }

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--brand-amber);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--brand-amber);
}

/* Consent checkbox and the truck radio group read as a row, not a stack. */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item,
.wpcf7-form .wpcf7-radio .wpcf7-list-item { margin: 0 1.25rem 0 0; display: inline-block; }
.wpcf7-form .wpcf7-acceptance label,
.wpcf7-form .wpcf7-radio label { display: inline; font-weight: 400; color: inherit; }

.wpcf7-form input[type="submit"] {
	background: var(--wp--preset--color--brand-amber);
	color: var(--wp--preset--color--navy);
	font: inherit;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	border: 0;
	border-radius: 2px;
	padding: .85rem 1.9rem;
	cursor: pointer;
}
.wpcf7-form input[type="submit"]:hover {
	background: var(--wp--preset--color--navy);
	color: #fff;
}

/* Validation + response messages, which are otherwise unstyled text. */
.wpcf7-not-valid-tip { color: #b3261e; font-size: .9rem; margin-top: .3rem; }
.wpcf7-response-output {
	border-width: 1px;
	border-radius: 3px;
	padding: .9rem 1.1rem;
	margin: 1.5rem 0 0;
}

/* ==========================================================================
   Homepage sections, matched to the live Wix layout.
   Colours and sizes were read off the live DOM, not guessed:
   hero title #AA8925 81/700, section heads #2F2F30 28/700, quad heads 18/400,
   bands #F2BD1E amber / #C7CFD3 steel / #2F2F30 charcoal footer.
   ========================================================================== */

/* Hero: a bright photo with DARK type over it -- the live site uses no dim. */
.apex-hero .wp-block-cover__inner-container { max-width: 1000px; }
.apex-hero-title {
	color: var(--wp--preset--color--gold);
	font-size: clamp( 2.6rem, 5.6vw, 5.05rem );
	font-weight: 700;
	line-height: 1.05;
	margin: 0;
}
.apex-hero-sub {
	color: var(--wp--preset--color--ink);
	font-size: clamp( 1.15rem, 1.9vw, 1.75rem );
	font-weight: 700;
	margin-top: .9rem;
}

/* Shared section heading: 28px, 700, charcoal, as on the live site. */
.apex-section-head,
.apex-band-head {
	color: var(--wp--preset--color--ink);
	font-size: clamp( 1.35rem, 2vw, 1.75rem );
	font-weight: 700;
	letter-spacing: .01em;
	margin: 0;
}

/* Amber band: three columns divided by hairlines, white body copy. */
.apex-band-amber .apex-band-copy { color: #fff; font-size: .95rem; margin-top: 1.5rem; }
.apex-tri { gap: 0; }
.apex-tri > .wp-block-column { padding-inline: 1.75rem; }
.apex-tri > .wp-block-column + .wp-block-column {
	border-left: 1px solid rgba( 47, 47, 48, .28 );
}
.apex-band-amber .wp-block-buttons { margin-top: 1.75rem; }

/* Small uppercase label above a phone number / email / hours. */
.apex-strip-label {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 500;
	font-size: .85rem;
	margin-bottom: .2rem;
}

/* The customer-service portrait is a small 312x140 crop on the live site. */
.apex-rep img { display: block; width: 100%; max-width: 312px; height: auto; margin-top: .75rem; }

/* Four cyan circular-arrow icons. */
.apex-icon-wrap { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.apex-icon-wrap .apex-icon { width: 100%; max-width: 172px; height: auto; }
.apex-quad-head {
	color: var(--wp--preset--color--ink);
	font-size: 1.05rem;
	font-weight: 400;
	letter-spacing: .02em;
	margin: 0 0 .5rem;
}
.apex-quad > .wp-block-column { padding-inline: .75rem; }

/* Footer: amber contact strip over a charcoal block. */
.apex-contact-strip,
.apex-contact-strip a { color: #fff; }
.apex-contact-strip a { text-decoration: none; }
.apex-contact-strip a:hover { text-decoration: underline; }
.apex-footer-head {
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: .9rem;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.apex-footer-head a { text-decoration: none; color: inherit; }
.apex-footer-list { list-style: none; padding-left: 0; }
.apex-footer-list li { margin-block: .3rem; }
.has-ink-background-color a:where(:not(.wp-element-button)) {
	color: #fff;
	text-decoration-color: rgba( 255, 255, 255, .4 );
}
.has-ink-background-color a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--brand-amber);
}

/* Button variants used on the homepage. */
.wp-block-button.is-style-apex-outline .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 1px solid #fff;
	font-weight: 500;
	text-transform: none;
	letter-spacing: .01em;
	padding: .6rem 1.6rem;
}
.wp-block-button.is-style-apex-outline .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-apex-grey .wp-block-button__link {
	background: #8E8D91;
	color: #fff;
	font-weight: 400;
	letter-spacing: .05em;
	border-radius: 0;
}
.wp-block-button.is-style-apex-grey .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
}

@media ( max-width: 781px ) {
	.apex-tri > .wp-block-column + .wp-block-column { border-left: 0; border-top: 1px solid rgba( 47, 47, 48, .28 ); padding-top: 2rem; }
	.apex-icon-wrap .apex-icon { max-width: 140px; }
}

/* Small glyphs before CALL US / EMAIL US / OPERATING HOURS, as on the live site.
   Inline data URIs rather than an icon font: three glyphs is not worth a webfont. */
.apex-strip-label::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: .45em;
	vertical-align: -.13em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
}
.apex-strip-label.is-phone::before,
.wp-block-column:nth-child(1) > .apex-strip-label::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z"/></svg>');
	        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z"/></svg>');
}
.apex-strip-label.is-mail::before,
.wp-block-column:nth-child(2) > .apex-strip-label::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/></svg>');
	        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/></svg>');
}
.apex-strip-label.is-clock::before,
.wp-block-column:nth-child(3) > .apex-strip-label::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.6V6h-2v7.4l5.2 3.1 1-1.7-4.2-2.2z"/></svg>');
	        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.6V6h-2v7.4l5.2 3.1 1-1.7-4.2-2.2z"/></svg>');
}

/* Amber rule under the header, full width, on every page. */
.apex-header { border-bottom: 7px solid var(--wp--preset--color--brand-amber); }

/* Inner-page title. Live uses a gold, centred heading and NO hero photo --
   only the homepage has a hero. */
.apex-page-title {
	color: var(--wp--preset--color--gold);
	font-size: clamp( 1.5rem, 2.6vw, 2.05rem );
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}
.apex-title-block { padding-block: 3.25rem 1.5rem; }

/* Service pages alternate image left / image right beside the copy. */
@media ( min-width: 782px ) {
	.apex-service-body .wp-block-image {
		max-width: 340px;
		margin-block: .5rem 1.25rem;
	}
	.apex-service-body .wp-block-image:nth-of-type( odd )  { float: right; margin-left: 2rem; }
	.apex-service-body .wp-block-image:nth-of-type( even ) { float: left;  margin-right: 2rem; }
	.apex-service-body h2 { clear: both; }
}

/* Services index: seven icon tiles. */
.apex-svc-grid .wp-block-column { padding-inline: 1.25rem; }
.apex-svc-icon-wrap { display: flex; justify-content: center; align-items: flex-end; min-height: 120px; margin-bottom: 1.25rem; }
.apex-svc-icon-wrap .apex-svc-icon,
.apex-svc-icon-wrap img { width: auto; max-width: 130px; max-height: 116px; height: auto; }
.apex-svc-name {
	color: var(--wp--preset--color--ink);
	font-size: clamp( 1.2rem, 1.7vw, 1.55rem );
	font-weight: 700;
	text-align: center;
	margin: 0 0 1.5rem;
}
.apex-svc-copy { font-size: .92rem; text-align: center; }

/* Right-hand rail on the benefit pages: amber Request Quote over the portrait. */
.apex-rail .wp-block-button__link { border-radius: 0; letter-spacing: .05em; }
.apex-rail img { display: block; width: 100%; height: auto; }

/* Benefit and contact pages use a dark title; services and the service detail
   pages use the gold one. Both are centred and uppercase on the live site. */
.apex-page-title.is-dark {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	letter-spacing: .02em;
}

/* Service tile names link through to the detail page. */
.apex-svc-name a { color: inherit; text-decoration: none; }
.apex-svc-name a:hover { color: var(--wp--preset--color--amber-deep); }

/* The live Request Quote button is amber with WHITE text, not navy. */
.wp-block-button.is-style-apex-cta .wp-block-button__link { color: #fff; }
.wp-block-button.is-style-apex-cta .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink);
	color: #fff;
}

/* Footer service links are plain text on the live site, not underlined. */
.apex-footer-list a { text-decoration: none; }
.apex-footer-list a:hover { text-decoration: underline; }

/* Service-page type, measured off the live site: intro 16px, body 14px,
   headings 28px, all at line-height 1.4. The theme default of 1.65 was making
   these pages roughly a quarter taller than the originals. */
.apex-service-body { font-size: .9rem; line-height: 1.45; }
.apex-service-body p { margin-block: .9rem; }
.apex-service-body > p:first-of-type { font-size: 1rem; }
.apex-service-body h2 { font-size: 1.6rem; line-height: 1.4; margin-top: 2.2rem; }
.apex-service-body h3 { font-size: 1.2rem; line-height: 1.4; margin-top: 1.6rem; }
.apex-service-body ul { margin-block: .8rem; }
.apex-service-body li { margin-block: .25rem; }

/* Live page titles run to 42px. */
.apex-page-title { font-size: clamp( 1.6rem, 3vw, 2.6rem ); }
.apex-page-title.is-dark { font-size: clamp( 1.35rem, 2.3vw, 2rem ); }

/* Hero text in black, per Brandon 2026-08-18.
   The cover block sets white on its inner container and everything inside
   inherits it, so both headings need an explicit colour to win. */
.apex-hero .apex-hero-title,
.apex-hero .apex-hero-sub {
	color: #000;
}

/* Document-style body: the service-page type scale, but laid out in explicit
   columns rather than floats, for pages that pair copy with a specific image. */
.apex-doc-body { font-size: .9rem; line-height: 1.45; }
.apex-doc-body p { margin-block: .85rem; }
.apex-doc-body h2 { font-size: 1.5rem; line-height: 1.4; margin-top: 1.8rem; }
.apex-doc-body h3 { font-size: 1.15rem; line-height: 1.4; margin-top: 1.4rem; color: #6E7B8B; }
.apex-doc-body ul { margin-block: .7rem; }
.apex-doc-body li { margin-block: .25rem; }
.apex-doc-body .wp-block-image img { display: block; width: 100%; height: auto; }

/* The "Why Choose Us" list uses green ticks on the live site, not bullets. */
.apex-check-list { list-style: none; padding-left: 0; }
.apex-check-list li { position: relative; padding-left: 1.6rem; }
.apex-check-list li::before {
	content: "\2705";
	position: absolute;
	left: 0;
	font-size: .95em;
}

/* Emoji-led list: keep the emoji as content, drop the bullet. */
.apex-emoji-list { list-style: none; padding-left: 0; }
.apex-emoji-list li { padding-left: 0; }

/* Testimonials sit side by side, each above its client logo. */
.apex-testimonials .apex-attrib { font-weight: 500; margin-top: .4rem; }
.apex-client-logo { margin-top: 1.5rem; }
.apex-client-logo img { max-width: 190px; width: auto; }

/* Service pages open with 16px lede paragraphs, then drop to 14px body. */
.apex-doc-body .apex-lede { font-size: 1rem; }

/* The lower half of the service pages runs in a narrower centred column. */
.apex-narrow { max-width: 700px; margin-inline: auto; }
.apex-narrow ol.wp-block-list,
.apex-narrow ul.wp-block-list { padding-left: 1.4rem; }