/* ==========================================================================
   RenHive — page composition classes.
   The design SYSTEM (tokens + components) lives in styles.css. This sheet holds
   the layout/composition classes the prototypes declared per-page, consolidated
   so every PHP template shares them. Nothing here hard-codes a value the tokens
   already carry; enrichment washes are defined once below.
   Breakpoints: 1180 / 1024 / 980 / 860 / 520 (content-driven, per the handoff).
   ========================================================================== */

:root {
	--wash-olive: #eef3fb;
	--wash-clay:  #f4f7fc;
	--ph-light: repeating-linear-gradient(135deg, #dbd7d7 0 14px, #d1cdcd 14px 28px);
	--ph-dark:  repeating-linear-gradient(135deg, #4a4746 0 14px, #413e3e 14px 28px);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- Layout shells ---- */
.wrap { max-width: 1280px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.wrap--article { max-width: 1180px; }
.wrap--narrow  { max-width: 1080px; }
.sec { border-top: 2px solid var(--color-divider); }

a.ulink { color: inherit; text-decoration: none; }

/* ---- Motion primitives ---- */
.lift { transition: transform .2s ease; }
a.story:hover .lift { transform: scale(1.02); }
.arw { display: inline-block; transition: transform .2s ease; }
@media (prefers-reduced-motion: reduce) {
	.lift, .arw, .harw { transition: none !important; }
	a.story:hover .lift { transform: none; }
}

/* ---- Editorial primitives ---- */
.eyebrow { font: 600 11px/1 var(--font-heading); letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent); }
.kicknum { font: 800 13px/1 var(--font-heading); color: var(--color-accent); letter-spacing: .04em; }

/* ---- Placeholder / image wrappers ---- */
.ph { background: var(--ph-light); display: flex; align-items: flex-end; }
.ph--dark { background: var(--ph-dark); }
.ph > span { font: 600 10px/1.3 ui-monospace, "SF Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #6b6767; padding: 12px; }
.ph--dark > span { color: #b7b3b3; }
.media { position: relative; overflow: hidden; }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Ruled link rows ---- */
.rlink { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--color-divider); color: inherit; text-decoration: none; }
.rlink:hover { color: var(--color-accent); }
.rlink:hover .arw { transform: translateX(4px); }

/* ==========================================================================
   Header / global chrome
   ========================================================================== */
.hbar { background: var(--color-text); color: var(--color-bg); }
.hbar-inner { display: flex; align-items: center; gap: 24px; min-height: 38px; font: 600 11px/1 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; }
.hbar-est { color: var(--color-accent-400); }
.hbar-nav { margin-left: auto; display: flex; gap: 22px; }
.hbar-nav a { color: inherit; text-decoration: none; }
.hbar-nav a:hover { color: var(--color-accent-400); }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-bg); border-bottom: 2px solid var(--color-divider); }
.site-header-inner { display: flex; align-items: center; gap: 40px; padding-top: 16px; padding-bottom: 16px; }
.brand { font: 800 22px/1 var(--font-heading); letter-spacing: -.02em; color: inherit; text-decoration: none; }
.brand .dot { color: var(--color-accent); }

.mainnav { display: flex; gap: 26px; font: 600 13px/1 var(--font-heading); letter-spacing: .04em; text-transform: uppercase; }
.mainnav a, .mainnav button { color: inherit; text-decoration: none; }
.mainnav a:hover, .mainnav a[aria-current="page"], .mainnav .is-active { color: var(--color-accent); }
.mainnav .menu-item-has-children > a { position: relative; }

.nav-toggle { display: none; }
.header-search { margin-left: auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--color-divider); padding: 9px 13px; color: inherit; background: transparent; cursor: pointer; font: 600 12px/1 var(--font-heading); letter-spacing: .04em; text-transform: uppercase; }
.header-search .slabel { display: inline; }

/* Mega menu */
.mega { border-top: 2px solid var(--color-divider); background: var(--color-bg); }
.mega[hidden] { display: none; }
.mega-inner { display: grid; grid-template-columns: 1fr 1fr 1fr 1.1fr; gap: 32px; padding-top: 26px; padding-bottom: 30px; }
.mega-col { }
.mega-col .eyebrow { display: block; margin-bottom: 12px; }
.hrl { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--color-divider); color: inherit; text-decoration: none; font-size: 14px; }
.hrl.first { border-top: none; padding-top: 0; }
.hrl:hover { color: var(--color-accent); }
.hrl:hover .harw { transform: translateX(4px); }
.harw { transition: transform .2s ease; }
.mega-feature { color: inherit; text-decoration: none; display: block; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-text); color: var(--color-bg); }
.site-footer .fwrap { padding-top: 56px; padding-bottom: 40px; }
.fgrid { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 32px; padding-bottom: 40px; border-bottom: 1px solid #4a4746; }
.fbrand { font: 800 24px/1 var(--font-heading); letter-spacing: -.02em; }
.fbrand .dot { color: var(--color-accent); }
.fabout { font-size: 13px; line-height: 1.6; color: #a7a3a3; max-width: 30ch; margin: 14px 0 0; }
.fcol-title { font: 600 10px/1 var(--font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-400); margin-bottom: 16px; }
.fcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ful { color: #c7c3c3; text-decoration: none; font-size: 13px; }
.ful:hover { color: var(--color-accent-400); }
.flegal { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 24px; flex-wrap: wrap; font-size: 11px; color: #8a8686; }
.flegal a { color: #8a8686; text-decoration: none; }
.flegal a:hover { color: var(--color-accent-400); }
.fbuilt { font: 600 10px/1 ui-monospace, monospace; letter-spacing: .1em; color: #8a8686; text-transform: uppercase; }

/* ==========================================================================
   Article (single.php)
   ========================================================================== */
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--color-accent); width: 0; z-index: 100; transition: width .1s linear; }
@media (prefers-reduced-motion: reduce) { .reading-progress { transition: none; } }

.breadcrumb { padding-top: 22px; font: 600 12px/1 var(--font-heading); color: var(--color-neutral-600); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .current { color: var(--color-text); }

.artgrid { display: grid; grid-template-columns: 230px 1fr; gap: 56px; align-items: start; }
.rail { position: sticky; top: 96px; align-self: start; }
.tocitem { display: flex; gap: 12px; align-items: baseline; padding: 9px 0 9px 14px; border-left: 2px solid var(--color-divider); color: var(--color-neutral-600); text-decoration: none; font: 600 13px/1.35 var(--font-heading); transition: all .15s; }
.tocitem.is-active { border-left-color: var(--color-accent); color: var(--color-accent); }

.prose { max-width: 100%; }
.prose > * { max-width: 68ch; }
.prose > .full, .prose > figure, .prose > table, .prose > .wp-block-table,
.prose > .renhive-block, .prose > .renhive-beforeafter, .prose > .renhive-godeeper,
.prose > .renhive-pick, .prose > .wp-block-group, .prose > .wp-block-columns { max-width: none; }
.prose p { font-size: 18px; line-height: 1.65; color: var(--color-neutral-900); margin: 0 0 22px; }
.prose h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.05; letter-spacing: -.02em; margin: 48px 0 18px; scroll-margin-top: 120px; }
.prose h3 { font-size: 21px; margin: 32px 0 12px; }
.prose a { color: var(--color-accent-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 600; }
.prose a:hover { color: var(--color-accent); }
.prose ul, .prose ol { font-size: 18px; line-height: 1.65; color: var(--color-neutral-900); }
.prose img { height: auto; }

/* Cost-at-a-glance panel */
.glance { border: 2px solid var(--color-text); }
.glance-head { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-bottom: 2px solid var(--color-text); background: var(--color-text); color: var(--color-bg); font: 800 12px/1 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; }
.glance-head .meta { margin-left: auto; font: 600 11px/1 ui-monospace, monospace; color: var(--color-accent-400); }
.glance-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.glance-cell { padding: 22px; border-right: 1px solid var(--color-divider); }
.glance-cell:last-child { border-right: none; }
.glance-cell .v { font: 800 clamp(22px, 2.6vw, 30px)/1 var(--font-heading); margin-top: 10px; }
.glance-cell .v.accent { color: var(--color-accent); }

/* In-body blocks */
.renhive-callout { background: var(--color-surface); border-left: 3px solid var(--color-accent); padding: 20px 24px; margin: 28px 0; }
.renhive-callout p { font-size: 15px; line-height: 1.6; margin: 0; max-width: none; }
.renhive-factors { margin: 24px 0; }
.renhive-factor { padding: 16px 0; border-top: 1px solid var(--color-divider); }
.renhive-factor-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.renhive-factor-name { font: 800 16px/1 var(--font-heading); }
.renhive-factor-bar { height: 8px; background: var(--color-neutral-200); }
.renhive-factor-bar > i { display: block; height: 100%; background: var(--color-accent); }
.renhive-godeeper { border: 1px solid var(--color-divider); padding: 20px 22px; margin: 28px 0; }
.renhive-checklist-item { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--color-divider); }
.renhive-checklist-item svg { flex: none; margin-top: 2px; }
.renhive-beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--color-text); border: 2px solid var(--color-text); margin: 32px 0; }
.renhive-beforeafter .side { position: relative; }
.renhive-beforeafter .label { position: absolute; top: 10px; left: 10px; padding: 4px 10px; font: 800 10px/1 var(--font-heading); letter-spacing: .08em; background: var(--color-bg); }
.renhive-beforeafter .label.after { background: var(--color-accent); color: var(--color-bg); }

/* Next Move */
.nextmove-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.nextmove-card { display: block; border: 2px solid var(--color-text); background: var(--color-bg); padding: 26px; color: inherit; text-decoration: none; transition: background .15s; }
.nextmove-card:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.pathsteps { display: flex; flex-wrap: wrap; gap: 0; align-items: center; }
.pathstep { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 0; color: inherit; text-decoration: none; }
.pathstep .lbl { font: 800 13px/1 var(--font-heading); }
.pathstep.is-current .lbl { color: var(--color-accent); }
.pathstep .sep { opacity: .4; }

/* FAQ */
.renhive-faq details { border-bottom: 1px solid var(--color-divider); }
.renhive-faq summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font: 800 18px/1.25 var(--font-heading); letter-spacing: -.01em; list-style: none; }
.renhive-faq summary::-webkit-details-marker { display: none; }
.renhive-faq summary::after { content: "+"; font: 400 24px/1 var(--font-heading); color: var(--color-accent); flex: none; }
.renhive-faq details[open] summary::after { content: "\2013"; }
.renhive-faq .faq-a { font-size: 15.5px; line-height: 1.6; color: var(--color-neutral-800); max-width: 64ch; margin: 0; padding-bottom: 22px; }

/* ==========================================================================
   Shared module bits (chips, cards, calculator, etc.)
   ========================================================================== */
.chip { cursor: pointer; padding: 9px 16px; border: 1px solid var(--color-divider); font: 600 12px/1 var(--font-heading); letter-spacing: .04em; text-transform: uppercase; background: transparent; color: var(--color-text); }
.chip:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.chip.is-active { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }

.stat-row { display: grid; border-top: 2px solid var(--color-text); }
.stat-row .cell .v { font: 800 clamp(22px, 2.6vw, 30px)/1 var(--font-heading); margin-top: 10px; }

/* Calculator */
.calcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--color-text); border: 2px solid var(--color-text); }
.calc-inputs { background: var(--color-bg); padding: 32px; }
.calc-result { background: var(--color-text); color: var(--color-bg); padding: 32px; display: flex; flex-direction: column; }
.calc-value { font: 800 clamp(40px, 6vw, 68px)/.95 var(--font-heading); letter-spacing: -.03em; margin: 14px 0 4px; }
.calclabel { font: 800 14px/1 var(--font-heading); margin-bottom: 12px; }
.calc-bar { height: 6px; background: #4a4746; }
.calc-bar > i { display: block; height: 100%; background: var(--color-accent); }

/* Search results */
.res { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 22px 12px; border-top: 1px solid var(--color-divider); color: inherit; text-decoration: none; }
.res:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.res:hover .arw { transform: translateX(4px); }

/* Project Navigator panels — only the active one shows (works without JS too) */
.nav-panel { display: flex; flex-direction: column; min-height: 100%; }
.nav-panel[hidden] { display: none !important; }
.nav-project.is-active { background: var(--color-text); color: var(--color-bg); }

/* Full-height media in mosaic / gallery grids */
.mos > a, .g3 > a { display: block; height: 100%; }
.mos .media, .mos .ph, .g3 .media, .g3 .ph { height: 100%; }
.mos .media img { height: 100%; }

/* Screen-reader helper (in case WP core class is dequeued) */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; padding: 10px 16px; background: var(--color-bg); z-index: 200; clip: auto; }

/* Pagination */
.wp-block-query-pagination, .navigation.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.navigation.pagination a, .navigation.pagination span { display: inline-flex; padding: 8px 12px; border: 1px solid var(--color-divider); font: 600 13px/1 var(--font-heading); text-decoration: none; color: inherit; }
.navigation.pagination .current { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }

/* Print — hide chrome, expand article */
@media print {
	.site-header, .hbar, .site-footer, .rail, .reading-progress, #next, .nav-toggle { display: none !important; }
	.prose > * { max-width: none !important; }
}

/* ==========================================================================
   Responsive — content-driven breakpoints
   ========================================================================== */
@media (max-width: 1180px) {
	.mainnav { gap: 18px; }
	.header-search .slabel { display: none; }
}
@media (max-width: 1024px) {
	.mainnav { display: none; }
	.nav-toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; border: 1px solid var(--color-divider); padding: 10px 14px; font: 600 12px/1 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; background: transparent; color: inherit; cursor: pointer; }
	.header-search { margin-left: 0; }
	.mega-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
	.artgrid { grid-template-columns: 1fr; }
	.rail { display: none; }
}
@media (max-width: 860px) {
	.wrap { padding-left: 20px; padding-right: 20px; }
	.col2 { grid-template-columns: 1fr !important; }
	.glance-grid, .qcp { grid-template-columns: 1fr 1fr; }
	.nextmove-cards, .g3c { grid-template-columns: 1fr; }
	.calcgrid { grid-template-columns: 1fr; }
	.fgrid { grid-template-columns: 1fr 1fr; }
	.mega-inner { grid-template-columns: 1fr; }
	.g4 { grid-template-columns: 1fr 1fr; }
	.g5 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
	.glance-grid, .qcp, .g4, .g5, .fgrid { grid-template-columns: 1fr; }
}

/* =========================================================================
   RenHive - nav dropdowns + brand + color polish (v1.1)
   ========================================================================= */

/* ---- Primary nav: real multi-level dropdowns ---- */
.mainnav-list { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.mainnav-list > li { position: relative; padding: 14px 0; margin: -14px 0; } /* bigger hover area, same visual */
.mainnav-list li.has-sub > a::after { content: "\25BE"; font-size: 9px; margin-left: 6px; color: var(--color-accent-500); }
.mainnav .sub-menu {
	position: absolute; top: 100%; left: -16px; z-index: 80;
	min-width: 230px; margin: 0; padding: 6px 0; list-style: none;
	background: var(--color-bg);
	border: 1px solid var(--color-divider);
	border-top: 3px solid var(--color-accent);
	box-shadow: 0 14px 34px rgba(18, 58, 117, .14);
	display: none;
	text-transform: none; letter-spacing: 0;
}
.mainnav li:hover > .sub-menu,
.mainnav li:focus-within > .sub-menu { display: block; }
.mainnav .sub-menu li { position: relative; padding: 0; margin: 0; }
.mainnav .sub-menu a {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 10px 16px;
	font: 600 13px/1.25 var(--font-heading);
	color: var(--color-text); white-space: nowrap;
}
.mainnav .sub-menu a:hover { background: var(--color-accent-100); color: var(--color-accent); }
.mainnav .sub-menu li.has-sub > a::after { content: "\25B8"; font-size: 10px; margin-left: auto; color: var(--color-accent-500); }
/* nested levels fly out to the right */
.mainnav .sub-menu .sub-menu { top: -7px; left: 100%; border-top-width: 1px; border-left: 3px solid var(--color-accent); }
/* JS adds .flip-left only when a flyout would actually leave the viewport */
.mainnav .sub-menu.flip-left { left: auto; right: 100%; border-left: 1px solid var(--color-divider); border-right: 3px solid var(--color-accent); }
.mainnav > .mainnav-list > li > .sub-menu.flip-left { left: auto; right: -16px; }

/* ---- Mobile nav: indented accordion-style tree ---- */
.mobile-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mobile-nav-list a { display: block; padding: 9px 2px; font: 600 14px/1.3 var(--font-heading); color: var(--color-text); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--color-divider) 40%, transparent); }
.mobile-nav-list a:hover { color: var(--color-accent); }
.mobile-nav-list .sub-menu { list-style: none; margin: 0 0 4px; padding: 0 0 0 16px; border-left: 2px solid var(--color-accent-200); }
.mobile-nav-list .sub-menu a { font-weight: 500; font-size: 13px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.mobile-nav-list .sub-menu .sub-menu { border-left-color: var(--color-accent-300); }

/* ---- Brand: RenHive two-tone ---- */
.brand .brand-b, .fbrand .brand-b { color: var(--color-accent); }
.brand .dot, .fbrand .dot { color: #e8a13a; }

/* ---- Color & GUI polish ---- */
/* Utility bar: deep navy with blue accent */
.hbar { background: #12233c; }
.hbar-est { color: var(--color-accent-400); }

/* Header: subtle bottom emphasis */
.site-header { border-bottom: 2px solid var(--color-accent-100); }

/* Eyebrows in accent blue for stronger hierarchy */
.eyebrow { color: var(--color-accent-600); }

/* Cards: lively hover */
.card-post, .lift { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card-post:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(18, 58, 117, .12); }

/* Callouts: soft blue wash with accent spine */
.renhive-callout { background: var(--color-accent-100); border-left: 4px solid var(--color-accent); }

/* Factor bars: blue gradient fill */
.renhive-factor-bar i { background: linear-gradient(90deg, var(--color-accent-500), var(--color-accent-700)); }

/* Go deeper box: branded tint */
.renhive-godeeper { background: linear-gradient(135deg, var(--color-accent-100), #f4f8fe); border: 1px solid var(--color-accent-200); border-left: 4px solid var(--color-accent); }

/* Newsletter + footer: deep navy gradient for a premium close */
.site-footer { background: linear-gradient(180deg, #16294a, #101d33); }
.mod-newsletter, .newsletter { background: linear-gradient(135deg, #16294a, #1e5fbf); color: #fff; }

/* Buttons: confident hover */
.btn:hover, .button:hover, button.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn, .button { transition: filter .15s ease, transform .15s ease; }

/* Tables: header row in brand navy */
.wp-block-table.is-style-renhive thead th { background: #16294a; color: #fff; }

/* FAQ: accent marker on open state */
.renhive-faq details[open] summary { color: var(--color-accent-700); }

/* ---- Checkmark list (is-style-renhive-check) ----
   Registered via register_block_style() but previously had no CSS, so these
   lists rendered as plain bullets. Green tick + comfortable spacing. */
ul.is-style-renhive-check {
	list-style: none;
	margin: 22px 0;
	padding: 0;
}
ul.is-style-renhive-check li {
	position: relative;
	padding: 9px 0 9px 34px;
	border-bottom: 1px solid color-mix(in srgb, var(--color-divider) 45%, transparent);
	line-height: 1.55;
}
ul.is-style-renhive-check li:last-child { border-bottom: 0; }
ul.is-style-renhive-check li::before {
	content: "";
	position: absolute;
	left: 4px; top: 15px;
	width: 15px; height: 8px;
	border-left: 2.5px solid var(--color-accent);
	border-bottom: 2.5px solid var(--color-accent);
	transform: rotate(-45deg);
}