/*
 * Theme rules, and why each one exists.
 * Loaded LAST so it wins over the main stylesheet. Keep this file small and
 * always explain each rule; it is the only hand-written CSS in the theme.
 */

/* Grid and flex items default to `min-width: auto`, so they refuse to shrink
 * below their content's intrinsic size. Each card image is one fixed-size file,
 * which pushed the single-column services grid to 502px inside a 358px
 * container and made the whole page scroll sideways at 390px. Allowing items to
 * shrink fixes it. */
.grid > *,
.flex > * {
	min-width: 0;
}

/* Scroll-reveal elements start translated up to 40px sideways. Any that sit at
 * the right edge push the document wider until their animation fires, so the
 * page scrolls horizontally on mobile before you've scrolled down — the FAQ
 * sidebar card was doing exactly this.
 *
 * `clip` rather than `hidden` on purpose: `overflow: hidden` creates a scroll
 * container, which silently breaks `position: sticky` on descendants (that same
 * FAQ card is `lg:sticky`). `clip` trims the overflow without that side effect. */
html,
body {
	overflow-x: clip;
}

/* The chooser moves focus to each step's heading so keyboard and screen-reader
 * users aren't stranded at the top of the document. That focus is programmatic,
 * not a keyboard action, so the ring would just look like a rendering bug —
 * suppress it on elements that only exist to receive scripted focus. Real
 * keyboard focus on links and buttons is untouched. */
[tabindex="-1"]:focus {
	outline: none;
}

/* The `hidden` attribute sets display:none through the browser's own stylesheet,
 * which any explicit `display` from a utility class beats — so a button with
 * `inline-flex` stays visible despite being marked hidden. The quote form's Back
 * and Submit buttons were showing on every step because of this. */
[hidden] {
	display: none !important;
}

/* News & Insights (news.php, single.php). The card lifts 6px on hover
 * and its title turns red. Plain CSS, because the main stylesheet has no rules
 * for this section. */
.shb-news-card {
	transition: transform 0.25s ease-out, box-shadow 0.2s, border-color 0.2s;
}
.shb-news-card:hover {
	transform: translateY(-6px);
}
.shb-news-card:hover h2 {
	color: var(--hope-red-500);
}

/* Article body: whatever Shawn writes in the WordPress editor. The bundle has
 * no rules for free-form text (Tailwind resets headings, lists and links to
 * plain), so without these an article reads as one undifferentiated block. */
.shb-article {
	color: #374151;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.8;
}
.shb-article > * + * { margin-top: 1.25em; }
.shb-article h2 { color: #1a1f6e; font-size: 28px; line-height: 1.25; margin-top: 1.8em; }
.shb-article h3 { color: #1a1f6e; font-size: 22px; line-height: 1.3; margin-top: 1.6em; }
.shb-article h4 { color: #1a1f6e; font-size: 18px; font-weight: 600; margin-top: 1.4em; }
.shb-article a { color: #cc0000; text-decoration: underline; text-underline-offset: 2px; }
.shb-article a:hover { color: #a30000; }
.shb-article strong { color: #1f2937; font-weight: 600; }
.shb-article ul { list-style: disc; padding-left: 1.4em; }
.shb-article ol { list-style: decimal; padding-left: 1.4em; }
.shb-article li + li { margin-top: 0.4em; }
.shb-article li::marker { color: #cc0000; }
.shb-article blockquote {
	border-left: 4px solid #cc0000;
	padding: 0.25em 0 0.25em 1.2em;
	color: #1a1f6e;
	font-size: 19px;
	font-style: italic;
}
.shb-article img { border-radius: 12px; height: auto; max-width: 100%; }
.shb-article figcaption { color: #6b7280; font-size: 14px; margin-top: 0.5em; text-align: center; }
.shb-article hr { border: 0; border-top: 1px solid #e5e7eb; margin: 2.5em 0; }
.shb-article table { border-collapse: collapse; font-size: 15px; width: 100%; }
.shb-article th, .shb-article td { border-bottom: 1px solid #e5e7eb; padding: 0.6em 0.8em; text-align: left; }
.shb-article th { color: #1a1f6e; font-weight: 600; }
/* WordPress's table block draws a dark box round every cell; keep the site's rules. */
.shb-article .wp-block-table thead { border-bottom: 2px solid #1a1f6e; }
.shb-article .wp-block-table th,
.shb-article .wp-block-table td { border: 0; border-bottom: 1px solid #e5e7eb; }
.shb-article-foot { margin-top: 3rem; padding-top: 2rem; }

/* Marketing opt-in and privacy note under the quote and contact forms
 * (inc/privacy.php). Written out in full: the main stylesheet has no checkbox
 * styles. */
.shb-consent { display: grid; gap: 10px; margin-top: 4px; font-family: var(--font-body); }
.shb-consent-box { display: flex; align-items: flex-start; gap: 10px; color: #374151; font-size: 14px; line-height: 1.55; cursor: pointer; }
.shb-consent-box input { flex: none; width: 16px; height: 16px; margin-top: 3px; accent-color: var(--hope-red-500); cursor: pointer; }
.shb-consent-note { color: #6b7280; font-size: 13px; line-height: 1.55; }
.shb-consent-note a,
.QuoteSection_formNote___o5Sg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.shb-consent-note a:hover { color: var(--hope-red-500); }

/* Trust strip as a marquee: two identical groups slide left together and loop.
 * Each group is at least as wide as the screen, so there's never a gap; the
 * second is aria-hidden so screen readers hear the labels once. The fade sits
 * on an inner wrapper so the edges fade into the navy, not the page. */
.shb-marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.shb-marquee-group{flex:none;display:flex;justify-content:space-around;min-width:100%;list-style:none;margin:0;padding:0;animation:shb-marquee 32s linear infinite}
.shb-marquee:hover .shb-marquee-group{animation-play-state:paused}
.shb-marquee .TrustStrip_item__bEgdn{flex-direction:row;gap:.8rem;padding:1rem 2.75rem;white-space:nowrap;text-align:left;border-left:0}
@keyframes shb-marquee{to{transform:translateX(-100%)}}
@media (max-width:900px){.shb-marquee .TrustStrip_item__bEgdn{padding:.85rem 1.75rem;gap:.6rem}.shb-marquee-group{animation-duration:22s}}
/* Motion off: one static row, centred, as before. */
@media (prefers-reduced-motion:reduce){.shb-marquee{justify-content:center;-webkit-mask-image:none;mask-image:none}.shb-marquee-group{animation:none;flex-wrap:wrap;justify-content:center;min-width:0}.shb-marquee-group[aria-hidden]{display:none}.shb-marquee .TrustStrip_item__bEgdn{white-space:normal}}

/* Cookie consent box (inc/cookies.php): bottom-left, slides in slowly from
 * off-screen with an ease-out and no overshoot, as the client asked. */
.shb-cookie{position:fixed;left:20px;bottom:20px;z-index:60;width:min(360px,calc(100vw - 32px));background:#fff;border-radius:14px;border-top:3px solid var(--hope-red-500);box-shadow:0 18px 40px -12px rgba(16,20,60,.35),0 2px 6px rgba(16,20,60,.08);padding:18px 20px 16px;font-family:var(--font-body);transform:translateX(calc(-100% - 40px));opacity:0;transition:transform 1.1s cubic-bezier(.25,.1,.25,1),opacity .9s ease}
.shb-cookie.is-in{transform:none;opacity:1}
.shb-cookie[hidden]{display:none}
.shb-cookie-title{margin:0 0 6px;font-family:var(--font-heading,var(--font-playfair)),Georgia,serif;font-size:17px;font-weight:700;color:#1a1f6e}
.shb-cookie-text{margin:0 0 14px;font-size:13px;line-height:1.55;color:#4b5563}
.shb-cookie-text a{color:#1a1f6e;text-decoration:underline;text-underline-offset:2px}
.shb-cookie-actions{display:flex;gap:8px}
.shb-cookie-btn{flex:1;min-height:40px;border-radius:999px;border:1.5px solid var(--hope-red-500);background:var(--hope-red-500);color:#fff;font:600 13px/1 var(--font-body);cursor:pointer;transition:background .2s,color .2s}
.shb-cookie-btn:hover{background:#a80000;border-color:#a80000}
.shb-cookie-btn--ghost{background:#fff;color:#1a1f6e;border-color:#1a1f6e}
.shb-cookie-btn--ghost:hover{background:#1a1f6e;color:#fff;border-color:#1a1f6e}
.shb-cookie-btn:focus-visible{outline:2px solid #1a1f6e;outline-offset:2px}
/* "Choose what to allow": one switch per type of optional cookie. Only
 * rendered once a tool is set up under Tracking & Chat. */
.shb-cookie-more{display:block;margin:12px auto 0;padding:2px 4px;background:none;border:0;color:#1a1f6e;font:600 12.5px/1.4 var(--font-body);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.shb-cookie-more:focus-visible{outline:2px solid #1a1f6e;outline-offset:2px;border-radius:4px}
.shb-cookie-prefs{display:grid;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid #e5e7eb;max-height:min(52vh,420px);overflow:auto}
.shb-cookie-prefs[hidden]{display:none}
.shb-cookie-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;cursor:pointer}
.shb-cookie-row>span{display:grid;gap:2px}
.shb-cookie-row strong{font-size:13px;color:#1a1f6e}
.shb-cookie-row span span{font-size:12px;line-height:1.5;color:#6b7280}
.shb-cookie-row em{font-style:normal;font-size:11px;color:#9ca3af}
.shb-cookie-row input{flex:none;appearance:none;-webkit-appearance:none;position:relative;width:38px;height:22px;margin:2px 0 0;border-radius:999px;background:#d1d5db;cursor:pointer;transition:background .2s}
.shb-cookie-row input::before{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s}
.shb-cookie-row input:checked{background:var(--hope-red-500)}
.shb-cookie-row input:checked::before{transform:translateX(16px)}
.shb-cookie-row input:disabled{opacity:.55;cursor:default}
.shb-cookie-row input:focus-visible{outline:2px solid #1a1f6e;outline-offset:2px}
.shb-cookie-prefs .shb-cookie-btn{width:100%;flex:none}
@media (max-width:480px){.shb-cookie{left:16px;bottom:16px}}
@media (prefers-reduced-motion:reduce){.shb-cookie{transform:none;transition:opacity .4s ease}}

/* Mobile menu: lives inside the sticky nav, so it opens under the bar at any
 * scroll position. Scrolls itself if it's taller than the screen (Services
 * expanded on a short phone). */
#shb-mobile-menu{max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain}