/* ==========================================================================
   Homebots theme — component layer on top of theme.json tokens.
   Concept: an architectural drawing set. Ivory sheets and charcoal night
   plates, annotated with title-block labels ("Sheet 03 / Education").
   ========================================================================== */
:root {
	--hb-ivory: var(--wp--preset--color--ivory, #F6F1E7);
	--hb-ivory-deep: var(--wp--preset--color--ivory-deep, #EDE5D6);
	--hb-champagne: var(--wp--preset--color--champagne, #D8C4A0);
	--hb-bronze: var(--wp--preset--color--bronze, #946F43);
	--hb-bronze-dark: var(--wp--preset--color--bronze-dark, #7A5A35);
	--hb-stone: var(--wp--preset--color--stone, #8E877C);
	--hb-charcoal: var(--wp--preset--color--charcoal, #1B1A18);
	--hb-charcoal-soft: var(--wp--preset--color--charcoal-soft, #262421);
	--hb-ink: var(--wp--preset--color--ink, #2A2724);
	--hb-display: var(--wp--preset--font-family--display, Georgia, serif);
	--hb-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	--hb-ease: cubic-bezier(.22, .61, .36, 1);
	--hb-header-h: 84px;
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--hb-champagne); color: var(--hb-charcoal); }
:focus-visible { outline: 2px solid var(--hb-bronze); outline-offset: 3px; }
.wp-site-blocks { padding-top: 0 !important; }
main.wp-block-group { margin-top: 0 !important; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.screen-reader-text:focus { background: var(--hb-ivory); color: var(--hb-ink); padding: 8px 16px; z-index: 100000; }

/* ---------- typography utilities (also available as block styles) ---------- */
.label, .is-style-hb-label { font-family: var(--hb-mono) !important; font-size: 11px !important; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; line-height: 1.6; }
.eyebrow, .is-style-hb-eyebrow { font-family: var(--wp--preset--font-family--sans) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .28em; text-transform: uppercase; line-height: 1.6; color: var(--hb-bronze-dark); }
.hb-dark .eyebrow, .hb-dark .is-style-hb-eyebrow { color: var(--hb-champagne); }
.is-style-hb-lede, .hb-lede { font-size: var(--wp--preset--font-size--lede) !important; line-height: 1.65; font-weight: 300; max-width: 62ch; opacity: .82; }
.hb-muted { opacity: .62; }

/* sheet head: "SHEET 03 —— EYEBROW" */
.hb-sheet { display: flex; align-items: center; gap: 1rem !important; flex-wrap: wrap; margin: 0; }
.hb-sheet > p { margin: 0 !important; }
.hb-sheet .hb-sheet-no { font-family: var(--hb-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--hb-stone); white-space: nowrap; display: inline-flex; align-items: center; gap: 1rem; }
.hb-sheet .hb-sheet-no::after { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .45; }
.hb-dark .hb-sheet .hb-sheet-no { color: #BDB6AA; }

/* ---------- sections ---------- */
.hb-section { padding-top: var(--wp--preset--spacing--70) !important; padding-bottom: var(--wp--preset--spacing--70) !important; position: relative; }
.hb-section.is-compact { padding-top: var(--wp--preset--spacing--60) !important; padding-bottom: var(--wp--preset--spacing--60) !important; }
.hb-dark { color: var(--hb-ivory); }
.hb-dark h1, .hb-dark h2, .hb-dark h3, .hb-dark h4 { color: var(--hb-ivory); }
.hb-dark a:where(:not(.wp-element-button)) { color: var(--hb-champagne); }
.hb-grain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* page hero band */
.hb-page-hero { padding-top: calc(var(--hb-header-h) + clamp(4rem, 9vw, 7.5rem)) !important; padding-bottom: clamp(4rem, 8vw, 7rem) !important; overflow: hidden; }
.hb-page-hero h1 { max-width: 16ch; margin-top: 1.75rem; }
.hb-page-hero .hb-lede { margin-top: 1.75rem; }
.hb-page-hero.has-plate > .hb-plate-bg { position: absolute; inset: 0; opacity: .45; pointer-events: none; }
.hb-page-hero.has-plate > .hb-plate-bg svg, .hb-page-hero.has-plate > .hb-plate-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-page-hero.has-plate > .hb-plate-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--hb-charcoal) 0%, rgba(27,26,24,.82) 45%, rgba(27,26,24,.25) 100%); }
.hb-page-hero > :not(.hb-plate-bg) { position: relative; }

/* ruled lists */
.hb-ruled { list-style: none; padding: 0 !important; margin: 0; border-top: 1px solid rgba(42,39,36,.14); }
.hb-ruled li { border-bottom: 1px solid rgba(42,39,36,.12); padding: .85rem 0; font-size: 15.5px; }
.hb-dark .hb-ruled, .hb-dark .hb-ruled li { border-color: rgba(246,241,231,.14); }
.hb-ruled.is-2col { display: grid; grid-template-columns: 1fr; column-gap: 2rem; border-top: 0; }
@media (min-width: 640px) { .hb-ruled.is-2col { grid-template-columns: 1fr 1fr; } }
.hb-ruled.is-display li { font-family: var(--hb-display); font-size: 1.3rem; font-weight: 400; }
.hb-ruled.is-check li { padding-left: 1.75rem; position: relative; }
.hb-ruled.is-check li::before { content: ""; position: absolute; left: 2px; top: 1.2rem; width: 10px; height: 5px; border-left: 1.5px solid var(--hb-bronze); border-bottom: 1.5px solid var(--hb-bronze); transform: rotate(-45deg); }
.hb-dark .hb-ruled.is-check li::before { border-color: var(--hb-champagne); }
.hb-ruled.is-dash li { padding-left: 1.75rem; position: relative; opacity: .6; }
.hb-ruled.is-dash li::before { content: "—"; position: absolute; left: 0; }

/* hairline grid of cells */
.hb-cells { gap: 1px !important; background: rgba(42,39,36,.12); }
.hb-dark .hb-cells, .hb-cells.is-dark { background: rgba(246,241,231,.1); }
.hb-cells > * { margin: 0 !important; padding: clamp(1.75rem, 3vw, 2.75rem) !important; }
.hb-cells.is-dark > * { background: var(--hb-charcoal); }
.hb-cells.is-ivory > * { background: var(--hb-ivory); }
.hb-cells.is-ivory-deep > * { background: var(--hb-ivory-deep); }
.hb-cells > .is-raised { background: var(--hb-charcoal-soft) !important; }

/* deliverable callout */
.hb-callout { border-left: 2px solid var(--hb-bronze); background: rgba(246,241,231,.7); padding: 1.25rem 1.5rem !important; }
.hb-callout p:last-child { font-family: var(--hb-display); font-size: 1.45rem; line-height: 1.3; margin-top: .4rem; }

/* placeholder tag */
.hb-placeholder { display: inline-flex; align-items: center; gap: .5rem; border: 1px dashed rgba(148,111,67,.6); color: var(--hb-bronze-dark); padding: .3rem .65rem; font-family: var(--hb-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }
.hb-dark .hb-placeholder { border-color: rgba(216,196,160,.5); color: var(--hb-champagne); }

/* ---------- buttons (block styles) ---------- */
.wp-block-button__link { transition: background .3s var(--hb-ease), color .3s var(--hb-ease), border-color .3s var(--hb-ease); display: inline-flex; align-items: center; gap: .8rem; }
.wp-block-button .wp-block-button__link::after { content: "→"; font-size: 15px; letter-spacing: 0; transition: transform .3s var(--hb-ease); }
.wp-block-button .wp-block-button__link:hover::after { transform: translateX(4px); }
.wp-block-button.is-style-hb-champagne .wp-block-button__link { background: var(--hb-champagne); color: var(--hb-charcoal); }
.wp-block-button.is-style-hb-champagne .wp-block-button__link:hover { background: var(--hb-ivory); }
.wp-block-button.is-style-hb-outline .wp-block-button__link { background: transparent; color: var(--hb-ink); border: 1px solid rgba(42,39,36,.3); }
.wp-block-button.is-style-hb-outline .wp-block-button__link:hover { border-color: var(--hb-bronze); color: var(--hb-bronze-dark); }
.wp-block-button.is-style-hb-outline-light .wp-block-button__link { background: transparent; color: var(--hb-ivory); border: 1px solid rgba(246,241,231,.4); }
.wp-block-button.is-style-hb-outline-light .wp-block-button__link:hover { border-color: var(--hb-champagne); color: var(--hb-champagne); }
.wp-block-button.is-style-hb-text .wp-block-button__link { background: transparent; padding: 0 0 .3rem; color: var(--hb-bronze-dark); border-bottom: 1px solid rgba(148,111,67,.5); }
.wp-block-button.is-style-hb-text .wp-block-button__link::after { content: "↗"; font-size: 12px; }
.wp-block-button.is-style-hb-text .wp-block-button__link:hover { color: var(--hb-ink); }
.hb-dark .wp-block-button.is-style-hb-text .wp-block-button__link { color: var(--hb-champagne); border-color: rgba(216,196,160,.5); }
.hb-dark .wp-block-button.is-style-hb-text .wp-block-button__link:hover { color: var(--hb-ivory); }
@media (max-width: 599px) { .hb-stack-mobile.wp-block-buttons { flex-direction: column; align-items: stretch; } .hb-stack-mobile .wp-block-button__link { width: 100%; justify-content: center; } }

/* ---------- header ---------- */
.hb-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 100; transition: background .5s var(--hb-ease), padding .5s var(--hb-ease), backdrop-filter .5s; padding-top: 1.4rem !important; padding-bottom: 1.4rem !important; color: var(--hb-ivory); }
.admin-bar .hb-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .hb-header { top: 46px; } }
.hb-header.is-scrolled, body:not(.hb-has-hero) .hb-header { background: rgba(27,26,24,.95); backdrop-filter: blur(12px); padding-top: .8rem !important; padding-bottom: .8rem !important; }
body:not(.hb-has-hero) .wp-site-blocks > main, body:not(.hb-has-hero) main { padding-top: var(--hb-header-h); }
.hb-header .hb-brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.hb-header .hb-brand img.hb-mark { height: 34px; width: auto; }
.hb-header .hb-brand img.hb-word { height: 13px; width: auto; }
.hb-header .wp-block-navigation { color: rgba(246,241,231,.82); }
.hb-header .wp-block-navigation a:hover, .hb-header .wp-block-navigation .current-menu-item > a { color: var(--hb-champagne); }
.hb-header .hb-header-cta .wp-block-button__link { background: transparent; border: 1px solid rgba(216,196,160,.6); color: var(--hb-champagne); font-size: 11px; padding: .8rem 1.2rem; }
.hb-header .hb-header-cta .wp-block-button__link::after { display: none; }
.hb-header .hb-header-cta .wp-block-button__link:hover { background: var(--hb-champagne); color: var(--hb-charcoal); }
@media (max-width: 959px) { .hb-header .hb-header-cta { display: none !important; } }
.hb-header .wp-block-navigation__responsive-container.is-menu-open { padding: 6rem var(--wp--custom--gutter) 2rem; }
.hb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-family: var(--hb-display); font-size: 2rem; letter-spacing: 0; }
.hb-header .wp-block-navigation__responsive-container-open svg, .hb-header .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }

/* ---------- footer ---------- */
.hb-footer { padding-top: var(--wp--preset--spacing--60) !important; padding-bottom: 3rem !important; }
.hb-footer a { color: rgba(246,241,231,.8) !important; text-decoration: none; }
.hb-footer a:hover { color: var(--hb-champagne) !important; }
.hb-footer ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .7rem; }
.hb-footer .hb-legal { border-top: 1px solid rgba(246,241,231,.1); padding-top: 2rem; margin-top: 4rem; font-size: 13px; color: rgba(246,241,231,.45); }
@media (max-width: 599px) { .hb-footer { padding-bottom: 6rem !important; } }

/* mobile CTA bar */
.hb-mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr; background: rgba(27,26,24,.96); backdrop-filter: blur(12px); border-top: 1px solid rgba(246,241,231,.1); transform: translateY(100%); transition: transform .5s var(--hb-ease); padding-bottom: env(safe-area-inset-bottom, 0px); }
.hb-mobile-cta.is-visible { transform: none; }
.hb-mobile-cta a { padding: 1rem .5rem; text-align: center; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--hb-ivory); text-decoration: none; }
.hb-mobile-cta a:first-child { color: var(--hb-champagne); border-right: 1px solid rgba(246,241,231,.1); }
@media (min-width: 640px) { .hb-mobile-cta { display: none; } }

/* ---------- reveal (content is visible at rest; JS adds a gentle rise) ---------- */
.hb-reveal-ready .hb-reveal { transform: translateY(26px); opacity: .55; transition: transform .9s var(--hb-ease), opacity .9s var(--hb-ease); }
.hb-reveal-ready .hb-reveal.is-in { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.hb-reveal-ready .hb-reveal { transform: none; opacity: 1; }
}

/* ---------- blog / generic content ---------- */
.hb-prose { max-width: 760px; margin-inline: auto; }
.hb-post-card .wp-block-post-title { font-size: 1.6rem; }
.wp-block-post-featured-image img { object-fit: cover; }

/* ---------- layout helpers used by patterns ---------- */
.hb-gap-xl { gap: clamp(2.5rem, 6vw, 6rem) !important; }
.wp-block-column.hb-v-center { align-self: center; }
.wp-block-column.hb-v-end { align-self: flex-end; }
@media (min-width: 782px) { .wp-block-column.hb-pad-top { padding-top: 5.5rem; } .hb-align-end.wp-block-buttons { justify-content: flex-end; } }
.hb-center.wp-block-buttons { justify-content: center; }
.hb-section h2 { margin-top: 1.5rem; }
.hb-section .is-style-hb-lede { margin-top: 1.5rem; }
.hb-section .wp-block-buttons { margin-top: 2.5rem; }
.hb-section .wp-block-columns { margin-top: clamp(2.5rem, 5vw, 4rem); }
.hb-section > .wp-block-columns:first-child, .hb-gap-xl { margin-top: 0; }
.hb-fineprint { font-size: 13px !important; opacity: .55; margin-top: 1.5rem; }
.hb-display-small { font-family: var(--hb-display); font-size: 1.3rem; line-height: 1.35; margin-top: .4rem !important; }
.hb-wordmark { font-family: var(--wp--preset--font-family--sans) !important; font-weight: 500 !important; letter-spacing: .1em !important; font-size: 1.9rem !important; }
.hb-h-small { font-size: var(--wp--preset--font-size--large) !important; margin-top: 2.5rem !important; }
.hb-cells h3 { font-size: 1.5rem; }
.hb-cells .wp-block-buttons { margin-top: 1.75rem !important; }
.hb-cells.wp-block-columns { margin-top: 0 !important; }
.hb-cells + .hb-cells { margin-top: 1px !important; }
.hb-section > .hb-cells:first-of-type, .hb-section h2 + .hb-cells, .hb-section .is-style-hb-lede + .hb-cells { margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; }
.hb-audiences > .wp-block-column { display: flex; flex-direction: column; }
.hb-audiences > .wp-block-column > p { flex: 1; }
.hb-compare { margin-top: 4rem !important; }

/* numbered vendor questions "Q1" */
ol.hb-questions { counter-reset: q; margin-top: 3rem !important; }
ol.hb-questions li { counter-increment: q; display: flex; gap: 1.25rem; font-size: 17px; line-height: 1.6; padding: 1.4rem 0; }
ol.hb-questions li::before { content: "Q" counter(q); font-family: var(--hb-mono); font-size: 11px; letter-spacing: .14em; color: var(--hb-bronze-dark); padding-top: .3rem; min-width: 1.8rem; }
.hb-dark ol.hb-questions li::before { color: var(--hb-champagne); }
.hb-dark ol.hb-questions li { color: rgba(246,241,231,.86); }
ol.is-numbered { counter-reset: n; }
ol.is-numbered li { counter-increment: n; display: flex; gap: 1rem; }
ol.is-numbered li::before { content: counter(n); font-family: var(--hb-mono); font-size: 11px; color: var(--hb-bronze-dark); width: 1.2rem; padding-top: .25rem; }
ul.is-dot li { display: flex; align-items: center; gap: .75rem; }
ul.is-dot li::before { content: ""; width: 4px; height: 4px; background: var(--hb-bronze); flex: none; }
.hb-ruled { margin-top: 2rem !important; }
.hb-section .is-2col { margin-top: 2.5rem !important; }

/* decade timeline */
ol.hb-decade { list-style: none; padding: 0 0 0 2.5rem !important; margin: 2rem 0 0; border-left: 1px solid rgba(42,39,36,.16); }
ol.hb-decade li { position: relative; padding-bottom: 2.5rem; color: rgba(42,39,36,.72); max-width: 28rem; }
ol.hb-decade li:last-child { padding-bottom: 0; }
ol.hb-decade li::before { content: ""; position: absolute; left: calc(-2.5rem - 5px); top: .7rem; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--hb-bronze); background: var(--hb-ivory); }
ol.hb-decade strong { display: block; font-family: var(--hb-display); font-weight: 400; font-size: 1.9rem; color: var(--hb-ink); line-height: 1.2; margin-bottom: .35rem; }

/* final CTA band */
.hb-final-cta { overflow: hidden; padding-top: clamp(7rem, 14vw, 12rem) !important; padding-bottom: clamp(7rem, 14vw, 12rem) !important; }
.hb-final-cta > .hb-plate-bg { position: absolute; inset: 0; opacity: .8; pointer-events: none; }
.hb-final-cta > .hb-plate-bg svg, .hb-final-cta > .hb-plate-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-final-cta > .hb-plate-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--hb-charcoal) 0%, rgba(27,26,24,.6) 50%, rgba(27,26,24,.4) 100%); }
.hb-final-cta > :not(.hb-plate-bg) { position: relative; }
.hb-final-cta h2 { max-width: 20ch; margin-inline: auto !important; }
.hb-final-cta .is-style-hb-lede { margin-inline: auto !important; }

/* stack columns cleanly on phones */
@media (max-width: 781px) { .hb-cells.wp-block-columns { flex-direction: column; } }

/* ---------- full-bleed sections: own gutters, no gaps ---------- */
.hb-section, .hb-page-hero, .hb-footer, .hb-header { padding-left: var(--wp--custom--gutter) !important; padding-right: var(--wp--custom--gutter) !important; box-sizing: border-box; }
.hb-header { margin: 0 !important; width: auto !important; }
.wp-block-post-content > .alignfull, .wp-block-post-content > .hb-hero, .wp-block-post-content > .hb-studio { margin-top: 0 !important; margin-bottom: 0 !important; }
.wp-site-blocks > footer, .wp-site-blocks > .wp-block-template-part { margin-top: 0 !important; }
/* Keep headings and ledes at a readable measure, aligned to the 1320px column. */
.hb-section > h2, .hb-section > .is-style-hb-lede, .hb-page-hero > h1, .hb-page-hero > .is-style-hb-lede {
	margin-left: max(0px, calc((100vw - 1320px) / 2 - var(--wp--custom--gutter))) !important;
}
.hb-section > h2 { max-width: min(17em, 100%) !important; }
.hb-section > .is-style-hb-lede, .hb-page-hero > .is-style-hb-lede { max-width: min(40rem, 100%) !important; }
.hb-page-hero > h1 { max-width: min(14em, 100%) !important; }
.hb-final-cta > h2, .hb-final-cta > .is-style-hb-lede { margin-left: auto !important; margin-right: auto !important; }