/* ==========================================================================
   DRS University — DRS Restyle  (v1.2)
   Custom homepage layout. Big full-bleed hero, editorial sections,
   amber level labels. Navy/cobalt base, amber accent, Malarkey-clean.
   CSS only — deactivate the plugin to fully revert.
   ========================================================================== */

:root {
	--drs-navy:        #0F3160;   /* dark blue base, complements davisroofingsolutions.com */
	--drs-cobalt:      #006BDD;   /* primary blue */
	--drs-cobalt-deep: #0A56B4;
	--drs-steel:       #2E6FC4;
	--drs-ink:         #33424E;
	--drs-muted:       #5A6B7B;
	--drs-border:      #E4EAF1;
	--drs-mist:        #F5F8FC;
	--drs-amber:       #006BDD;   /* accent is cool blue now — NO warm tones */
	--drs-lightblue:   #8FBEFF;   /* light-blue accent for dark bands */
}

/* ---- Global width + base ---------------------------------------------- */
body {
	--wp--style--global--content-size: min(92vw, 1060px) !important;
	--wp--style--global--wide-size: min(95vw, 1500px) !important;
	color: var(--drs-ink);
}
h1, h2, h3, h4, h5, .wp-block-heading {
	color: var(--drs-navy);
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.12;
}

/* ---- Header bar + logo ------------------------------------------------- */
header.wp-block-template-part > .wp-block-group.alignfull {
	background: #ffffff !important;
	border-bottom: 1px solid var(--drs-border) !important;
}
.wp-block-image.size-llms_notification_icon img,
header .wp-block-image img.wp-image-81 {
	width: 46px !important; height: 46px !important; border-radius: 8px;
}
header .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--drs-cobalt-deep) !important;
	box-shadow: inset 0 0 0 2px var(--drs-cobalt-deep) !important;
	background: transparent !important; border-radius: 4px !important; font-weight: 700 !important;
}
header .wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: #fff !important; background: var(--drs-cobalt-deep) !important;
}

/* ---- Homepage: hide duplicate title, go edge to edge ------------------ */
/* warm architectural "cream" background for the open (non-locked) areas */
body.page-id-7 { overflow-x: hidden; background-color: #E4EEFB; }
body.page-id-7 .drsu-sec { border-top-color: #D6E2F2; }
body.page-id-7 .wp-block-post-title { display: none !important; }
body.page-id-7 main { margin-top: 0 !important; }

/* widen the homepage container past the default reading width */
.drsu-home {
	width: min(95vw, 1240px);
	max-width: none !important;
	margin-inline: auto;
}

/* shared eyebrow label */
.drsu-eyebrow {
	display: inline-block;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--drs-amber);
	margin-bottom: 18px;
}
.drsu-eyebrow::before {
	content: ""; display: inline-block; width: 26px; height: 2px;
	background: var(--drs-amber); vertical-align: middle; margin-right: 10px;
	transform: translateY(-3px);
}
.drsu-eyebrow--dark { color: var(--drs-cobalt-deep); }
.drsu-eyebrow--dark::before { background: var(--drs-amber); }

/* ======================================================================
   HERO — big, full-bleed, left-aligned, editorial
   ====================================================================== */
.drsu-hero {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 72px;
	background:
		radial-gradient(120% 140% at 82% -10%, #4C9BFF 0%, rgba(76,155,255,0) 55%),
		linear-gradient(120deg, #0E2E6E 0%, #006BDD 58%, #2A7FEA 100%);
	color: #fff;
	overflow: hidden;
}
/* oversized faint architectural watermark */
.drsu-ghost {
	position: absolute; top: 50%; left: -1.5vw; transform: translateY(-50%);
	font-size: clamp(7rem, 27vw, 21rem); font-weight: 900; line-height: 1;
	letter-spacing: -0.05em; text-transform: uppercase;
	color: rgba(255,255,255,.035); white-space: nowrap;
	z-index: 0; pointer-events: none; user-select: none;
}
.drsu-dot { color: var(--drs-amber); }
.drsu-ar { display: inline-block; transition: transform .16s ease; }
.drsu-btn-2:hover .drsu-ar { transform: translateX(5px); }
.drsu-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: linear-gradient(120deg, rgba(0,0,0,.9), transparent 70%);
	        mask-image: linear-gradient(120deg, rgba(0,0,0,.9), transparent 70%);
}
.drsu-hero-inner {
	position: relative; z-index: 1;
	max-width: 1240px; margin: 0 auto;
	padding: clamp(72px, 11vw, 140px) max(28px, 4vw) clamp(56px, 7vw, 96px);
}
.drsu-hero .drsu-eyebrow { color: var(--drs-amber); }
.drsu-hero h1 {
	color: #fff !important;
	font-size: clamp(2.8rem, 7vw, 5.4rem) !important;
	line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 18px;
}
.drsu-hero p {
	color: #D7E4F0; font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	line-height: 1.55; max-width: 620px; margin: 0 0 32px;
}

/* hero buttons */
.drsu-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.drsu-btns a {
	display: inline-block; padding: 16px 30px; border-radius: 6px;
	font-weight: 800; font-size: 1rem; text-decoration: none;
	letter-spacing: .01em; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.drsu-btn-1 { background: var(--drs-amber); color: var(--drs-navy); }
.drsu-btn-1:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(245,166,35,.4); }
.drsu-btn-2 { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.drsu-btn-2:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }

/* hero stats strip */
.drsu-stats {
	display: flex; flex-wrap: wrap; gap: 0;
	margin-top: clamp(40px, 6vw, 72px);
	padding-top: 30px; border-top: 1px solid rgba(255,255,255,.18);
}
.drsu-stat { display: flex; flex-direction: column; padding: 0 clamp(22px, 3.2vw, 44px); }
.drsu-stat:first-child { padding-left: 0; }
.drsu-stat:not(:first-child) { border-left: 1px solid rgba(255,255,255,.18); }
.drsu-stat-n { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 800; color: #fff; line-height: 1; }
.drsu-stat-l { margin-top: 8px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.68); }

/* ======================================================================
   SECTIONS
   ====================================================================== */
.drsu-sec { padding: clamp(48px, 6vw, 84px) 0; border-top: 1px solid var(--drs-border); }
.drsu-home .drsu-hero + .drsu-sec { border-top: 0; }
.drsu-head { max-width: 720px; margin-bottom: 40px; }
.drsu-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 0 0 14px; }
.drsu-sub { color: var(--drs-muted); font-size: 1.08rem; line-height: 1.6; margin: 0; }

/* How it works — even 3-across, aligned top rules */
.drsu-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 52px); align-items: start; }
.drsu-step { padding: 26px 0 0; border-top: 2px solid var(--drs-navy); }
.drsu-idx {
	display: block; font-size: 2.6rem; font-weight: 800; line-height: 1;
	color: var(--drs-amber); margin: 18px 0 14px; font-family: "Montserrat", sans-serif;
}
.drsu-step b { display: block; color: var(--drs-navy); font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }
.drsu-step span:not(.drsu-idx) { color: var(--drs-muted); line-height: 1.6; }

/* Training tracks — even 3x3 grid (9 cards), no orphan rows */
.drsu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.drsu-card {
	position: relative; display: flex; flex-direction: column; gap: 7px;
	background: #fff; border: 1px solid var(--drs-border);
	border-left: 4px solid var(--drs-cobalt); border-radius: 8px;
	padding: 24px 28px 24px 26px; text-decoration: none;
	box-shadow: 0 1px 2px rgba(11,34,57,.05);
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.drsu-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(11,34,57,.16); border-left-color: var(--drs-amber); }
.drsu-lvl { font-size: .73rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--drs-amber); }
.drsu-ct { font-size: 1.2rem; font-weight: 800; color: var(--drs-navy); line-height: 1.25; max-width: 88%; }
.drsu-meta { font-size: .86rem; color: var(--drs-muted); }
.drsu-arrow { position: absolute; top: 22px; right: 22px; font-size: 1.3rem; color: var(--drs-navy); transition: transform .16s ease, color .16s ease; }
.drsu-card:hover .drsu-arrow { color: var(--drs-amber); transform: translateX(5px); }

/* ======================================================================
   CONTACT BAND — full-bleed navy close
   ====================================================================== */
.drsu-contact {
	width: 100vw; max-width: 100vw;
	margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
	margin-top: clamp(48px, 6vw, 84px);
	background:
		radial-gradient(120% 140% at 15% 0%, #4C9BFF 0%, rgba(76,155,255,0) 52%),
		linear-gradient(120deg, #0E2E6E 0%, #006BDD 58%, #2A7FEA 100%);
	color: #fff;
}
.drsu-contact-inner {
	max-width: 1240px; margin: 0 auto;
	padding: clamp(56px, 7vw, 96px) max(28px, 4vw);
	display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start;
}
.drsu-contact .drsu-eyebrow { color: var(--drs-amber); }
.drsu-contact h2 { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin: 0 0 14px; }
.drsu-contact p { color: #C5D5E6; font-size: 1.08rem; line-height: 1.6; max-width: 460px; margin: 0; }
.drsu-contact-info { display: grid; gap: 26px; }
.drsu-info-item { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); }
.drsu-info-l { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--drs-amber); font-weight: 800; }
.drsu-info-v { font-size: 1.15rem; font-weight: 700; color: #fff; line-height: 1.4; }
.drsu-info-v a { color: #fff; text-decoration: none; }
.drsu-info-v a:hover { color: var(--drs-amber); }

/* ---- LifterLMS buttons elsewhere (carry the look to other pages) ------ */
.llms-button-action, .llms-button-primary, a.llms-button-action {
	background-color: var(--drs-navy) !important; background-image: none !important;
	color: #fff !important; border: 0 !important; border-radius: 6px !important; font-weight: 700 !important;
}
.llms-button-action:hover, .llms-button-primary:hover { background-color: var(--drs-cobalt-deep) !important; }

/* ---- Responsive: keep the tracks an even 3x3, never a 2-col orphan ----- */
@media (max-width: 760px) {
	.drsu-steps { grid-template-columns: 1fr; }
	.drsu-grid { grid-template-columns: 1fr; }
	.drsu-stat { padding: 0 18px; }
	.drsu-hero h1 br { display: none; }
	.drsu-contact-inner { grid-template-columns: 1fr; }
}

/* ======================================================================
   LIFTERLMS PAGES — carry the homepage look into catalog/course/lesson/dashboard
   ====================================================================== */

/* warm cream background across the LMS surfaces */
body.single-course, body.single-lesson, body.single-llms_membership,
body.page-id-78, body.page-id-433,
body.post-type-archive-course, body.tax-course_cat, body.tax-membership_cat {
	background-color: #E4EEFB;
}

/* --- Architectural page-hero header (injected before inner-page titles) --- */
body.single-course main, body.single-lesson main,
body.page-id-78 main, body.page-id-433 main,
body.post-type-archive-course main {
	margin-top: 0 !important; padding-top: 0 !important;
}
/* stack the course/lesson two-column template so the hero spans full width */
body.single-course main > .wp-block-columns,
body.single-lesson main > .wp-block-columns { display: block !important; }
body.single-course main > .wp-block-columns > .wp-block-column,
body.single-lesson main > .wp-block-columns > .wp-block-column { flex-basis: 100% !important; width: 100% !important; }

.drsu-page-hero {
	position: relative; left: 50%; transform: translateX(-50%);
	width: 100vw; max-width: 100vw; box-sizing: border-box;
	margin-bottom: clamp(32px, 4vw, 56px);
	background:
		radial-gradient(120% 150% at 85% -20%, #4C9BFF 0%, rgba(76,155,255,0) 55%),
		linear-gradient(120deg, #0E2E6E 0%, #006BDD 58%, #2A7FEA 100%);
	color: #fff; overflow: hidden;
}
.drsu-page-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: linear-gradient(120deg, rgba(0,0,0,.85), transparent 72%);
	        mask-image: linear-gradient(120deg, rgba(0,0,0,.85), transparent 72%);
}
.drsu-page-hero-inner {
	position: relative; z-index: 1;
	max-width: 1240px; margin: 0 auto;
	padding: clamp(52px, 7vw, 104px) max(28px, 4vw) clamp(40px, 5vw, 68px);
}
.drsu-page-hero .drsu-eyebrow { color: var(--drs-amber); margin-bottom: 14px; }
.drsu-page-hero .wp-block-post-title,
.drsu-page-hero h1 {
	color: #fff !important; margin: 0 !important;
	font-family: "Montserrat", system-ui, sans-serif; font-weight: 800;
	font-size: clamp(2rem, 4.6vw, 3.4rem) !important; line-height: 1.08; letter-spacing: -0.02em;
}

/* headings across LMS */
.llms-meta-title, .single-course .entry-title, .single-lesson .entry-title,
.llms-h3.llms-section-title, .llms-sd-title, .llms-sd-section-title, .llms-form-heading {
	color: var(--drs-navy) !important;
	font-family: "Montserrat", system-ui, sans-serif;
	font-weight: 800;
}

/* --- Course catalog / loop grid: white cards on cream --- */
.llms-loop-list.llms-course-list { gap: 22px !important; }
.llms-loop-item-content {
	background: #fff;
	border: 1px solid var(--drs-border);
	border-left: 4px solid var(--drs-cobalt);
	border-radius: 10px; overflow: hidden;
	box-shadow: 0 1px 2px rgba(11,34,57,.05);
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.llms-loop-item-content:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 38px rgba(11,34,57,.16);
	border-left-color: var(--drs-amber);
}
.llms-loop-title {
	color: var(--drs-navy) !important; font-family: "Montserrat", sans-serif;
	font-weight: 800 !important; font-size: 1.15rem !important;
}
.llms-loop-item-footer { border-top: 1px solid var(--drs-border) !important; background: transparent !important; }
.llms-meta.llms-lessons-count, .llms-author-info, .llms-author-info.label { color: var(--drs-muted) !important; }

/* --- Course page: syllabus + lessons --- */
.llms-h3.llms-section-title {
	text-transform: none; border-bottom: 2px solid var(--drs-navy);
	padding-bottom: 8px; margin-bottom: 14px; font-size: 1.35rem;
}
.llms-lesson-preview {
	background: #fff; border: 1px solid var(--drs-border);
	border-left: 4px solid var(--drs-cobalt); border-radius: 8px;
	margin-bottom: 10px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.llms-lesson-preview:hover { border-left-color: var(--drs-amber); box-shadow: 0 8px 20px rgba(11,34,57,.1); transform: translateY(-2px); }
.llms-lesson-preview.is-complete { border-left-color: var(--drs-amber); }
.llms-lesson-title { color: var(--drs-navy) !important; font-weight: 700 !important; }
.llms-lesson-locked .llms-lesson-title { color: var(--drs-muted) !important; }
.llms-lesson-counter, .llms-extra { color: var(--drs-muted) !important; }

/* progress bars → amber fill */
.llms-progress .llms-progress-bar { background: #D6E2F2 !important; border-radius: 999px !important; overflow: hidden; }
.llms-progress .llms-progress-inner { background: var(--drs-amber) !important; }
.llms-progress .progress-percentage, .llms-progress-text { color: var(--drs-navy) !important; font-weight: 700 !important; }

/* notices */
.llms-notice { border-radius: 8px !important; border-left: 4px solid var(--drs-cobalt-deep) !important; background: #fff !important; }
.llms-notice.llms-error { border-left-color: #C0392B !important; }
.llms-notice.llms-success { border-left-color: var(--drs-amber) !important; }

/* --- Student dashboard --- */
.llms-sd-section, .llms-sd-widget, .llms-my-achievements, .llms-my-certificates {
	background: #fff; border: 1px solid var(--drs-border); border-radius: 10px;
}
.llms-sd-navigation a, .llms-sd-nav a, .llms-sd-items a { color: var(--drs-navy); font-weight: 700; }
.llms-sd-navigation .current a, .llms-sd-items li.current a { color: var(--drs-cobalt-deep); box-shadow: inset 0 -3px 0 var(--drs-amber); }

/* --- Forms (login / register / checkout fields) --- */
.llms-person-login-form-wrapper, .llms-new-person-form-wrapper {
	background: #fff; border: 1px solid var(--drs-border); border-radius: 12px;
	padding: clamp(24px, 4vw, 40px); max-width: 620px; margin-inline: auto;
	box-shadow: 0 2px 10px rgba(11,34,57,.06);
}
.llms-field-input,
.llms-form-field input[type="text"], .llms-form-field input[type="email"],
.llms-form-field input[type="password"], .llms-form-field input[type="tel"], .llms-form-field select {
	border: 1px solid var(--drs-border) !important; border-radius: 6px !important;
	padding: 12px 14px !important; background: #fff !important;
}
.llms-field-input:focus, .llms-form-field input:focus, .llms-form-field select:focus {
	border-color: var(--drs-cobalt-deep) !important; outline: none !important;
	box-shadow: 0 0 0 3px rgba(21,64,158,.12) !important;
}
.llms-button-secondary {
	background: transparent !important; color: var(--drs-navy) !important;
	box-shadow: inset 0 0 0 2px var(--drs-navy) !important; border: 0 !important;
	border-radius: 6px !important; font-weight: 700 !important;
}
.llms-button-secondary:hover { background: var(--drs-navy) !important; color: #fff !important; }

/* --- Access plans / pricing --- */
.llms-access-plan { border: 1px solid var(--drs-border) !important; border-radius: 10px !important; overflow: hidden; background: #fff; }
.llms-access-plan .llms-access-plan-title, .llms-access-plan-content { color: var(--drs-navy); }
.llms-access-plan .stamp, .llms-access-plan-featured { background: var(--drs-amber) !important; color: #ffffff !important; }

/* ======================================================================
   COOL ACCENT SCHEME — no warm tones anywhere.
   Cobalt accents on light surfaces; light-blue / white accents on dark bands.
   ====================================================================== */
.drsu-hero .drsu-eyebrow, .drsu-page-hero .drsu-eyebrow, .drsu-contact .drsu-eyebrow,
.drsu-dot, .drsu-info-l { color: var(--drs-lightblue) !important; }
/* Hero CTAs: original solid black (primary) · ghost outline (secondary) */
.drsu-btn-1 {
	background: #0E1622 !important; color: #ffffff !important;
	box-shadow: 0 8px 22px rgba(0,0,0,.45) !important;
}
.drsu-btn-1:hover {
	background: #0B1220 !important;
	box-shadow: 0 0 0 1px rgba(130,180,255,.7), 0 0 24px 3px rgba(30,150,255,.55),
		0 0 56px 10px rgba(0,120,255,.4), inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.drsu-btn-2 {
	background: rgba(0,0,0,.30) !important; color: #ffffff !important;
	box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.55) !important;
}
.drsu-btn-2:hover {
	background: rgba(0,0,0,.5) !important; color: #ffffff !important;
	box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.6), 0 0 24px 3px rgba(30,150,255,.5),
		0 0 50px 10px rgba(0,120,255,.35) !important;
}

/* ======================================================================
   FIX: WordPress (wpautop) injects stray <br> between inline card/button
   items, which land as extra grid/flex cells and scatter the layout.
   Remove those injected breaks so the grid is a clean, aligned 3x3.
   ====================================================================== */
.drsu-grid > br,
.drsu-btns > br,
.drsu-stats > br,
.drsu-steps > br { display: none !important; }

/* ---- Course pages: hide theme title, seamless ---- */
body.page-id-439, body.page-id-442, body.page-id-444, body.page-id-446 { overflow-x: hidden; }
body.page-id-439 .wp-block-post-title,
body.page-id-442 .wp-block-post-title,
body.page-id-444 .wp-block-post-title,
body.page-id-446 .wp-block-post-title { display: none !important; }
body.page-id-439 main, body.page-id-442 main, body.page-id-444 main, body.page-id-446 main { margin-top: 0 !important; padding-top: 0 !important; }
body.page-id-439 .entry-content, body.page-id-442 .entry-content, body.page-id-444 .entry-content, body.page-id-446 .entry-content { margin-top: 0 !important; }