/*
 * Page styles captured from the Claude Design export (rendered in a browser,
 * 2 November 2026): hover/focus rules the design runtime generated for each
 * page, renamed .cs-{page}-N, plus the flow-row rules from Home and Delivery.
 * Used by the interim page content in data/page-fallback/.
 */

@media (max-width: 1000px) {
	[data-flow-arrow] { display: none !important; }
	[data-flow-row] { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
	[data-flow-row] > :not([data-flow-arrow]) { max-width: none !important; }
}

/* audit */
.cs-audit-0:hover { transform: translateY(-2px); border-color: rgb(15, 79, 245); }
.cs-audit-1:hover { transform: translateY(-2px); }
.cs-audit-2:hover { transform: translateY(-6px); }
/* contact */
.cs-contact-1:hover { transform: translateY(-2px); border-color: rgb(15, 79, 245); }
/* delivery */
.cs-delivery-0:hover { transform: translateY(-6px); }
.cs-delivery-1:hover { transform: translateY(-2px); border-color: rgb(15, 79, 245); }
/* home */
.cs-home-0:hover { transform: translateY(-2px); }
.cs-home-1:hover { transform: translateY(-2px); border-color: rgb(15, 79, 245); }
.cs-home-2:hover { transform: rotateY(180deg); }
/* Not in the design (hover only): keyboard focus and tap also turn the card. */
.cs-home-2:focus { transform: rotateY(180deg); outline: none; }
.cs-home-2:focus-visible > div { outline: 3px solid #0F4FF5; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.cs-home-2 { transition: none !important; }
}
/* our-tools */
.cs-our-tools-0:hover { transform: translateY(-6px); }
.cs-our-tools-1:hover { transform: translateY(-2px); border-color: rgb(15, 79, 245); }
/* validate */
.cs-validate-0:hover { transform: translateY(-2px); border-color: rgb(15, 79, 245); }
.cs-validate-1:hover { transform: translateY(-2px); }
.cs-validate-2:hover { transform: translateY(-6px); }
/* workforce */
.cs-workforce-0:hover { transform: translateY(-2px); border-color: rgb(15, 79, 245); }
.cs-workforce-1:hover { transform: translateY(-2px); }
.cs-workforce-2:hover { transform: translateY(-6px); }

/*
 * Full-width treatment for pages on interim content. Divi wraps classic page
 * content in a 1080px container with title and sidebar; the design sections
 * carry their own containers. Selectors are Divi 4 markup (TO TEST on Divi 5).
 */
body.clear-fallback #main-content .container { width: 100%; max-width: none; padding-top: 0; }
body.clear-fallback #main-content .container::before { display: none; }
body.clear-fallback #left-area { float: none; width: 100%; padding: 0; }
body.clear-fallback #sidebar,
body.clear-fallback .main_title,
body.clear-fallback .entry-title { display: none; }
body.clear-fallback article.page,
body.clear-fallback .et_pb_post { margin: 0; padding: 0; }
body.clear-fallback .entry-content img { max-width: 100%; }

/* Base reset from the design pages' <helmet> styles, for interim content. */
body.clear-fallback #main-content *,
body.clear-fallback #main-content *::before,
body.clear-fallback #main-content *::after { box-sizing: border-box; }
body.clear-fallback #main-content a { color: #221C4E; text-decoration: none; }
body.clear-fallback #main-content a:hover { color: #0F4FF5; }
body.clear-fallback #main-content img,
body.clear-fallback #main-content video { max-width: 100%; }
body.clear-fallback #main-content h1,
body.clear-fallback #main-content h2,
body.clear-fallback #main-content h3 { overflow-wrap: break-word; letter-spacing: -0.015em; }

/* webinars: intro paragraphs (CLEAR Webinars.dc.html) */
.clear-webinar-intro { padding-bottom: 0; }
.clear-webinar-intro p { font-size: 16.5px; line-height: 1.8; color: #4E4971; margin: 0 0 20px; }