/* theme-wp.css — bridges WordPress core blocks to the CarChief design system.
   Loaded on the front end AND in the block editor (see functions.php) so editing
   is WYSIWYG. Requires tokens.css + main.css. */

/* ---------- Root padding / full-width sections ---------- */
/* useRootPaddingAwareAlignments feeds --cc-gutter into full-width section padding. */
body { background: var(--cc-paper); color: var(--cc-ink); font-family: var(--cc-font-sans); }

/* ---------- Core Button → CarChief buttons ---------- */
.wp-block-button.is-style-cc-primary > .wp-block-button__link,
.wp-block-button.is-style-cc-secondary > .wp-block-button__link,
.wp-block-button.is-style-cc-signal > .wp-block-button__link,
.wp-block-button.is-style-cc-light > .wp-block-button__link,
.wp-block-button.is-style-cc-ghost > .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: var(--cc-target-min); padding: 0 20px;
	border-radius: var(--cc-radius-md); border: 2px solid transparent;
	font: 600 15px/1 var(--cc-font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.wp-block-button.is-style-cc-primary > .wp-block-button__link:active,
.wp-block-button.is-style-cc-secondary > .wp-block-button__link:active,
.wp-block-button.is-style-cc-signal > .wp-block-button__link:active,
.wp-block-button.is-style-cc-light > .wp-block-button__link:active,
.wp-block-button.is-style-cc-ghost > .wp-block-button__link:active { transform: translateY(1px); }

.wp-block-button.is-style-cc-primary > .wp-block-button__link { background: var(--cc-primary); color: var(--cc-on-primary); }
.wp-block-button.is-style-cc-primary > .wp-block-button__link:hover { background: var(--cc-primary-hover); }
.wp-block-button.is-style-cc-secondary > .wp-block-button__link { background: transparent; color: var(--cc-ink); border-color: currentColor; }
.wp-block-button.is-style-cc-secondary > .wp-block-button__link:hover { background: var(--cc-ink); color: var(--cc-paper); border-color: var(--cc-ink); }
.wp-block-button.is-style-cc-signal > .wp-block-button__link { background: var(--cc-teal); color: #0F1108; }
.wp-block-button.is-style-cc-signal > .wp-block-button__link:hover { background: #3CC3C5; }
.wp-block-button.is-style-cc-light > .wp-block-button__link { background: #FFFFFF; color: #283784; }
.wp-block-button.is-style-cc-light > .wp-block-button__link:hover { background: var(--cc-cream); }
.wp-block-button.is-style-cc-ghost > .wp-block-button__link { background: none; border-color: transparent; color: var(--cc-link); padding: 0 6px; }
.wp-block-button.is-style-cc-ghost > .wp-block-button__link:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Large button sizing: patterns add .cc-btn--lg on the inner link via block "Additional CSS class". */
.wp-block-button .wp-block-button__link.cc-btn--lg { min-height: 52px; padding: 0 26px; font-size: 17px; }

/* Trailing arrow icon on CTA buttons (matches the mockup). Add class "cc-btn-arrow"
   to a button's Additional CSS classes. Uses currentColor via mask so it adapts. */
.wp-block-button.cc-btn-arrow > .wp-block-button__link::after {
	content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: -3px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* App band: white secondary buttons, matching the mockup's Web/iOS/Android row. */
.cc-appband .wp-block-button.is-style-cc-secondary > .wp-block-button__link { background: var(--cc-surface); border-color: var(--cc-hairline); color: var(--cc-ink); }
.cc-appband .wp-block-button.is-style-cc-secondary > .wp-block-button__link:hover { background: var(--cc-ink); color: var(--cc-surface); border-color: var(--cc-ink); }

/* ---------- Core Group → CarChief section grounds ---------- */
/* Base section = vertical rhythm only (background stays page paper). */
.wp-block-group.is-style-cc-section { padding-block: var(--cc-section-pad); }
.wp-block-group.is-style-cc-section-cream,
.wp-block-group.is-style-cc-section-surface,
.wp-block-group.is-style-cc-section-navy,
.wp-block-group.is-style-cc-section-night { padding-block: var(--cc-section-pad); }
.wp-block-group.is-style-cc-section-cream { background: var(--cc-surface-cream); }
.wp-block-group.is-style-cc-section-surface { background: var(--cc-surface); }
.wp-block-group.is-style-cc-section-navy {
	background: var(--cc-navy); color: #FFFFFF;
	--cc-ink: #FFFFFF; --cc-ink-muted: var(--cc-cream); --cc-hairline: rgba(238,235,211,.25);
	--cc-gold-ink: var(--cc-cream); --cc-link: #FFFFFF; --cc-focus: #FFFFFF; --cc-heading-accent: #FFFFFF;
}
.wp-block-group.is-style-cc-section-night {
	background: var(--cc-night); color: var(--cc-night-text);
	--cc-ink: var(--cc-night-text); --cc-ink-muted: var(--cc-night-muted); --cc-hairline: var(--cc-night-line);
	--cc-gold-ink: #C9A961; --cc-link: #8E9BE8; --cc-focus: var(--cc-teal); --cc-heading-accent: var(--cc-night-text);
}

/* ---------- Core headings/paragraphs carrying cc-* classes ---------- */
/* main.css already styles .cc-display/.cc-h1/.cc-h2/.cc-h3/.cc-lead/.cc-eyebrow.
   Ensure core block defaults don't fight them. */
.wp-block-heading.cc-display, .wp-block-heading.cc-h1, .wp-block-heading.cc-h2, .wp-block-heading.cc-h3 { margin: 0; }
h1.cc-display, h2.cc-h2 { text-wrap: balance; }

/* ---------- Core Details → CarChief FAQ accordion ---------- */
.cc-faq .wp-block-details { border-bottom: 1px solid var(--cc-hairline); }
.cc-faq .wp-block-details summary {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none;
	font: 600 18px/1.35 var(--cc-font-sans); color: var(--cc-ink);
}
.cc-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.cc-faq .wp-block-details summary::after {
	content: ""; flex: none; width: 12px; height: 12px;
	border-right: 2px solid var(--cc-heading-accent); border-bottom: 2px solid var(--cc-heading-accent);
	transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s ease;
}
.cc-faq .wp-block-details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.cc-faq .wp-block-details summary:hover { color: var(--cc-link); }
.cc-faq .wp-block-details > :not(summary) { padding: 0 48px 24px 0; color: var(--cc-ink-muted); max-width: 72ch; }

/* ---------- Header / footer template parts ---------- */
/* The header template-part renders a <header class="wp-block-template-part"> wrapper
   that is only as tall as the bar, which traps position:sticky. Collapse it to
   contents so .cc-header sticks across the whole page like the mockup. */
header.wp-block-template-part { display: contents; }

/* Offset the sticky header below the WordPress admin bar for logged-in users.
   Desktop (>782px): the admin bar is position:fixed and stays, so offset 32px.
   Mobile (<=782px): the admin bar is position:absolute and scrolls away, so the
   header must pin to top:0 — otherwise it leaves a gap once the bar scrolls off. */
.admin-bar .cc-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .cc-header { top: 0; } }

/* Core Navigation links render as display:block, so main.css's inline-flex
   centering (from .cc-nav a) loses to core's higher-specificity rule, leaving the
   menu text top-aligned in its 44px box (≈14px above the logo/button line).
   Re-center it so the whole header row sits on one line like the mockup. */
.cc-header .wp-block-navigation .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--cc-target-min);
	line-height: 1;
}

/* Editor only: the block editor wraps the header's Custom HTML block (nav + CTA) in
   a display:block div, so the nav fills the row and the CTA wraps below it. Lay the
   wrapper out like the front end, where nav and CTA are direct flex children of the bar. */
.cc-header__bar > .block-library-html__edit {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--cc-space-5);
	min-width: 0;
}

/* Utility bar: lead on the far left, links grouped on the right.
   Override main.css's .cc-utilbar .cc-container { justify-content: flex-end }. */
.cc-utilbar .cc-container.cc-utilbar__bar { justify-content: space-between; }
.cc-utilbar__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
@media (max-width: 640px) { .cc-utilbar .cc-container.cc-utilbar__bar { justify-content: flex-start; } }

/* ---------- Phone device mockup built from core blocks (no bare spans) ---------- */
/* main.css styles .cc-device; recreate the camera + side buttons as pseudo-elements
   so the block version (a Group > Group > Image) still looks like a phone. */
.cc-device { position: relative; }
.cc-device__screen { position: relative; }
.cc-device__screen::before {
	content: ""; position: absolute; top: 12px; left: 50%; width: 11px; height: 11px;
	margin-left: -5.5px; border-radius: 50%; background: #0F1108;
	box-shadow: 0 0 0 2px rgba(255,255,255,.12); z-index: 1;
}
.cc-device::before, .cc-device::after {
	content: ""; position: absolute; right: -3px; width: 4px;
	border-radius: 0 3px 3px 0; background: #2B2E35;
}
.cc-device::before { top: 104px; height: 52px; }
.cc-device::after { top: 172px; height: 80px; }
.cc-device .wp-block-image, .cc-device figure { margin: 0; }
.cc-device__screen .wp-block-image img { display: block; width: 100%; height: auto; border-radius: 0; }

/* Screenshot framing for core images used inside a .cc-shot / stage context */
.cc-shot .wp-block-image { margin: 0; }
.cc-shot .wp-block-image img { border-radius: var(--cc-radius-lg); border: 1px solid var(--cc-hairline); box-shadow: var(--cc-shadow-card); display: block; }
.cc-shot--phone .wp-block-image img { border: 3px solid var(--cc-navy); border-radius: 20px; }

/* ---------- Pattern helper classes (editable <p> instead of bare <b>/<span>) ---------- */
/* Facts strip */
.cc-facts__item .cc-facts__title { display: block; font: 700 16px/1.3 var(--cc-font-sans); color: var(--cc-ink); }
.cc-facts__item .cc-facts__text { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--cc-ink-muted); }
.cc-facts__item .cc-facts__icon svg { width: 26px; height: 26px; color: var(--cc-heading-accent); }
.cc-facts__item { display: flex; gap: 14px; align-items: flex-start; }
.cc-facts__item > .wp-block-group { display: block; }

/* Numbered steps (stolen): base, teal __n badge and .cc-hotline come from owner.css.
   These bridge the block markup (groups, not <li>; <p> classes, not bare <b>/<span>). */
.cc-numsteps__item { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 16px; align-items: start; }
.cc-numsteps__title { display: block; font: 700 17px/1.3 var(--cc-font-sans); color: var(--cc-ink); }
.cc-numsteps__text { display: block; margin-top: 4px; color: var(--cc-ink-muted); font-size: 15px; line-height: 22px; }

/* How-it-works steps */
.cc-steps__item { padding: 24px 24px 0 0; border-top: 2px solid var(--cc-hairline); list-style: none; }
.cc-steps__item:first-child { border-top-color: var(--cc-gold); }
.cc-steps__num { display: block; margin-bottom: 14px; font: 500 13px/1 var(--cc-font-mono); color: var(--cc-gold-ink); }

/* Owner stat cards: layout + __v/__l/__src come from owner.css. */

/* Bento tile icon sizing (owner.css colors the span; this sizes the inner svg) */
.cc-tile .cc-tile__icon svg { width: 28px; height: 28px; }
.cc-tile--navy .cc-tile__icon svg, .cc-tile--night .cc-tile__icon svg { color: #FFFFFF; }

/* App band layout comes from owner.css (navy-tint). */

/* Status pills + tags as inline blocks from core/html */
.cc-tile__visual .cc-pill { margin-right: 8px; }

/* Owner hero stage: absolute-positioned layout comes from owner.css.
   The floating alert card uses a core image (no .cc-shot__frame), so lift it here. */
.cc-stage__alertcard .wp-block-image img { box-shadow: var(--cc-shadow-pop); }

/* Contact form (inc/contact-form.php adds these at render time).
   Honeypot: off-screen rather than display:none, which some bots skip. */
.cc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cc-form__error { padding: 12px 14px; border-radius: var(--cc-radius-md); background: var(--cc-fault-tint); color: var(--cc-fault); font-size: 15px; line-height: 22px; }
/* reCAPTCHA's floating badge is replaced by the required notice under the form. */
.grecaptcha-badge { visibility: hidden; }
/* main.css keeps .cc-route .cc-mono on one line for phone numbers; let the support email wrap on phones. */
.cc-route a.cc-mono { white-space: normal; overflow-wrap: anywhere; }

/* Help card block (ignition/route). The card itself is .cc-route from main.css; these style
   its editable inner blocks the way the mockup styled <b>, <p> and <span class="cc-mono">. */
.cc-route__body > :where(h2, h3, h4) { margin: 0; font: 700 16px/1.55 var(--cc-font-sans); letter-spacing: normal; text-transform: none; color: var(--cc-ink); }
.cc-route__body > p { margin: 4px 0 0; }
.cc-route__body > :first-child { margin-top: 0; }
.is-style-cc-mono { font-family: var(--cc-font-mono); font-variant-numeric: tabular-nums; }
.cc-route .is-style-cc-mono { margin-top: 8px; font-size: 17px; line-height: 1.55; color: var(--cc-ink); overflow-wrap: anywhere; user-select: all; }
.cc-route .is-style-cc-mono a { color: inherit; }

/* ---------- Editor-only adjustments ---------- */
.editor-styles-wrapper { background: var(--cc-paper); }
/* Give locked structural groups a faint guide in the editor only. */
.block-editor-block-list__layout .cc-split,
.block-editor-block-list__layout .cc-bento,
.block-editor-block-list__layout .cc-facts { min-height: 1px; }