/*
Theme Name: Showbulk Child
Theme URI: https://showbulk.com/
Description: Dedicated Divi child theme for showbulk.com (blog 11). Faithful conversion from the expired Acabado theme — no redesign; preserves existing content/layout, most of which is already built with the Divi Builder. Carries the IH WCAG accessibility baseline (AA focus visibility, underlined in-text links, skip link, reduced-motion) — CSS/PHP only, no JavaScript. The WCAG 1.4.4 viewport fix lives in network mu-plugin 09-viewport-a11y, not here. See reports/a11y-baseline-divi-child.md.
Author: Inventive Horizons
Author URI: https://inventivehorizons.com/
Template: Divi
Version: 1.0.0
*/

/* ============================================================================
   TOKENS — minimal; faithful conversion carries no brand redesign.
   ========================================================================= */
:root {
	--sb-navy:   #16324f;  /* headers / footer / primary text on light        */
	--sb-orange: #e8632b;  /* accents / CTAs / path top-border                 */
	--sb-bg:     #f4f6f8;  /* page background                                  */
	--sb-ink:    #1d2733;  /* body ink                                         */
	--sb-muted:  #6b7684;  /* secondary text                                   */
	--sb-green:  #2e7d4f;  /* free-printable tags                              */
	--sb-line:   #dde3e9;  /* hairlines / card borders                         */
	--sb-focus:  #185FA5;  /* visible-focus ring — 5.6:1 on white (AA UI)      */
}

/* ============================================================================
   ACCESSIBILITY BASELINE (WCAG 2.1 AA) — CSS only, no JS.
   Mirrors reports/a11y-baseline-divi-child.md (first applied in freeofdandruff-child).
   ========================================================================= */
.sr-only {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
/* 2.4.7 Focus Visible */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .et_pb_button:focus-visible {
	outline: 3px solid var(--sb-focus) !important; outline-offset: 2px !important;
	box-shadow: 0 0 0 3px rgba(255,255,255,.9) !important;
}
a:focus, button:focus, input:focus, select:focus, textarea:focus, .et_pb_button:focus {
	outline: 3px solid var(--sb-focus); outline-offset: 2px;
}
/* 1.4.1 Use of Color — underline in-text content links (not nav/buttons/image links) */
.et_pb_text a, .entry-content a, .et_pb_post_content a, .comment-content a {
	text-decoration: underline; text-underline-offset: 0.15em;
}
.et_pb_text a.et_pb_button, .entry-content a.et_pb_button,
.et_pb_text a:has(> img), .entry-content a:has(> img) { text-decoration: none; }
/* 2.4.1 Skip link (markup via functions.php on wp_body_open) */
.sb-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100000; padding: 12px 20px;
	background: #042C53; color: #fff !important; font-weight: 700;
	text-decoration: none; border-radius: 0 0 4px 0;
}
.sb-skip-link:focus { left: 0; outline: 3px solid var(--sb-focus); }
/* 2.3.3 Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important; animation-iteration-count: 1 !important;
		transition-duration: .001ms !important; scroll-behavior: auto !important;
	}
}

/* ============================================================================
   OPTION B — "FIELD MANUAL" DESIGN SYSTEM (per files/showbulk-mockup-optionB.html)
   Faithful port of the approved mockup: navy + expo-orange, clean sans, card grid.
   ========================================================================= */
body { background: var(--sb-bg); color: var(--sb-ink); }

/* ---- Divi header → navy bar with two-tone text logo ---- */
#main-header, #top-header, #et-top-navigation { background: var(--sb-navy) !important; box-shadow: none; }
#main-header { box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.sb-logo { display:inline-block; font-weight:700; font-size:24px; letter-spacing:.5px; color:#fff !important; text-decoration:none; line-height:1; padding:4px 0; }
.sb-logo span { color: var(--sb-orange); }
#top-menu li a, #et-top-navigation .et-menu a, .et_pb_menu .et-menu a {
	color:#cfd9e4 !important; text-transform:uppercase; letter-spacing:1px; font-size:13px !important; font-weight:600;
}
#top-menu li a:hover, #et-top-navigation .et-menu a:hover { color:#fff !important; opacity:1; }
#et_top_search .et_search_form_container input, #et_top_search .et-search-form input { color:#fff; }

/* ---- home content wrapper ---- */
.sb-home { color: var(--sb-ink); }
.sb-wrap { max-width:1080px; margin:0 auto; padding:0 24px; }

/* ---- masthead ---- */
.sb-masthead { position:relative; background:var(--sb-navy); color:#fff; padding:44px 0 56px; overflow:hidden; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.sb-masthead.sb-has-bg::before {
	content:""; position:absolute; inset:0; z-index:0;
	background-image:linear-gradient(rgba(16,32,60,.78),rgba(16,32,60,.86)), var(--sb-mh);
	background-size:cover; background-position:center;
}
.sb-masthead .sb-wrap { position:relative; z-index:1; }
.sb-masthead h1 { color:#fff; font-size:32px; line-height:1.25; max-width:660px; margin:0; }
.sb-sub { color:#c3d1de; margin-top:12px; max-width:580px; font-size:16px; }
.sb-search { margin-top:22px; display:flex; max-width:480px; }
.sb-search input { flex:1; padding:13px 14px; border:0; border-radius:4px 0 0 4px; font-size:14px; }
.sb-search button { background:var(--sb-orange); border:0; color:#fff; font-weight:700; padding:0 22px; border-radius:0 4px 4px 0; cursor:pointer; }

/* ---- path cards (overlap masthead) ---- */
.sb-paths { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:-30px; }
.sb-path { background:#fff; border:1px solid var(--sb-line); border-top:4px solid var(--sb-orange); border-radius:6px; overflow:hidden; }
.sb-path .sb-thumb { display:block; aspect-ratio:16/9; width:100%; object-fit:cover; }
.sb-path .sb-body { padding:16px 18px 18px; }
.sb-path .sb-n { font-size:11px; color:var(--sb-muted); text-transform:uppercase; letter-spacing:1.5px; }
.sb-path h2 { font-size:17px; margin:6px 0 8px; line-height:1.25; }
.sb-path h2 a { color:var(--sb-navy); text-decoration:none; }
.sb-path ul { list-style:none; margin:0; padding:0; }
.sb-path li { padding:7px 0; border-top:1px dashed var(--sb-line); font-size:14px; }
.sb-path li a { color:var(--sb-ink); text-decoration:none; }
.sb-path li a:hover { color:var(--sb-orange); }
.sb-path li a::before { content:"→ "; color:var(--sb-orange); font-weight:700; }

/* ---- free-printable download band ---- */
.sb-dl { background:#fff; border:1px solid var(--sb-line); border-radius:6px; margin:36px 0; padding:22px; display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; }
.sb-dl .sb-tag { background:var(--sb-green); color:#fff; font-size:11px; font-weight:700; letter-spacing:1px; padding:3px 8px; border-radius:3px; text-transform:uppercase; }
.sb-dl h3 { font-size:19px; margin:8px 0 4px; color:var(--sb-navy); }
.sb-dl p { color:var(--sb-muted); font-size:14px; margin:0; max-width:640px; }
.sb-btn { background:var(--sb-navy); color:#fff !important; text-decoration:none; font-weight:700; padding:12px 22px; border-radius:4px; white-space:nowrap; }
.sb-btn:hover { background:#0f2540; }

/* ---- section label + printable library ---- */
.sb-sec { font-size:13px; text-transform:uppercase; letter-spacing:2px; color:var(--sb-navy); margin:34px 0 14px; border-left:4px solid var(--sb-orange); padding-left:10px; }
.sb-checks { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:46px; }
.sb-check { background:#fff; border:1px solid var(--sb-line); border-radius:6px; padding:16px; }
.sb-check h4 { font-size:15px; margin:0 0 6px; color:var(--sb-navy); }
.sb-check p { font-size:13px; color:var(--sb-muted); margin:0; }
.sb-check .sb-pill { display:inline-block; margin-top:10px; font-size:11px; font-weight:700; color:var(--sb-orange); border:1px solid var(--sb-orange); border-radius:20px; padding:2px 10px; text-transform:uppercase; letter-spacing:1px; }
.sb-check .sb-soon { color:var(--sb-muted); border-color:var(--sb-line); }

/* ---- Divi footer → navy ---- */
#main-footer { background:var(--sb-navy); }
#footer-bottom { background:rgba(0,0,0,.18); }
#footer-info, #footer-info a { color:#9fb4c8 !important; font-size:13px; }
#footer-info a:hover { color:#fff !important; }
#et-footer-nav .bottom-nav a { color:#9fb4c8 !important; text-transform:none; }
.et_pb_widget_area_bottom, #footer-widgets:empty { display:none; }

/* ---- responsive ---- */
@media (max-width:980px){ .sb-paths{ grid-template-columns:repeat(2,1fr);} .sb-checks{ grid-template-columns:1fr;} }
@media (max-width:600px){ .sb-paths{ grid-template-columns:1fr; margin-top:-18px;} .sb-masthead h1{ font-size:26px;} .sb-dl{ flex-direction:column; align-items:flex-start;} }