/*
Theme Name: Jim Brown Colorado — Blocks
Theme URI: https://jimbrown-colorado.com
Author: Jim Brown
Description: Block theme for the Jim Brown Colorado website. Brand colors, fonts, spacing, and buttons live in theme.json; page content is native Gutenberg blocks and patterns, editable visually in the WordPress editor. This file holds only custom component CSS (hero reveal, rolling banner, cards, footer).
Version: 2.0.0-dev
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jimbrown-colorado
*/

/* ==========================================================================
   Token aliases — the real values live in theme.json (Site Editor → Styles).
   ========================================================================== */
:root {
	--color-black: var(--wp--preset--color--black);
	--color-white: var(--wp--preset--color--white);
	--color-gray-100: var(--wp--preset--color--gray-100);
	--color-gray-300: var(--wp--preset--color--gray-300);
	--color-gray-600: var(--wp--preset--color--gray-600);
	--color-red: var(--wp--preset--color--red);
	--color-red-dark: var(--wp--preset--color--red-dark);
	--color-blue: var(--wp--preset--color--blue);
	--color-gold: var(--wp--preset--color--gold);
	--color-green: var(--wp--preset--color--green);

	--space-1: var(--wp--preset--spacing--10);
	--space-2: var(--wp--preset--spacing--20);
	--space-3: var(--wp--preset--spacing--30);
	--space-4: var(--wp--preset--spacing--40);
	--space-5: var(--wp--preset--spacing--50);
	--space-6: var(--wp--preset--spacing--60);
	--space-7: var(--wp--preset--spacing--70);

	--flag-gradient: linear-gradient(90deg, var(--wp--preset--color--red) 0 34%, var(--wp--preset--color--blue) 34% 67%, var(--wp--preset--color--gold) 67% 100%);
}

img { height: auto; }

/* No extra gap between header / main / footer. */
body .wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

/* ==========================================================================
   Block styles (Styles panel in the editor)
   ========================================================================== */
.is-style-lead { font-size: var(--wp--preset--font-size--large); color: var(--color-gray-600); }

.is-style-eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-red);
	margin-bottom: var(--space-1);
}

.is-style-note {
	background: var(--color-gray-100);
	border-left: 3px solid var(--color-gold);
	padding: var(--space-2);
	font-size: 0.9375rem;
	color: var(--color-gray-600);
}

.is-style-card {
	border: 1px solid var(--color-gray-300);
	padding: var(--space-3);
}

/* Standard vertical padding for full-width page sections. */
.jbc-section { padding-top: var(--space-6); padding-bottom: var(--space-6); }

.site-main { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.site-main--front { padding-top: 0; padding-bottom: 0; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-topbar {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.site-topbar p { margin: 0; }
.site-topbar a { color: var(--color-white); }
.site-topbar a:hover { color: var(--color-gold); }

.site-header {
	padding-top: var(--space-3);
	padding-bottom: var(--space-3);
	gap: var(--space-2);
}
.site-header .site-branding { gap: var(--space-2); align-items: center; }
.site-header .wp-block-site-title { margin: 0; }
.site-header .wp-block-site-title a { color: var(--color-black); }

.site-header-right { gap: var(--space-3); align-items: center; }
.site-header .wp-block-navigation .wp-block-navigation__container { gap: 0.5rem 0.75rem; }

.wp-block-navigation .wp-block-navigation-item__content { padding-bottom: 4px; border-bottom: 2px solid transparent; }
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--color-red);
	border-bottom-color: var(--color-red);
}

/* Log In / Sign Up — visual placeholders; not wired to anything yet. */
.nav-auth { gap: 0.5em; flex-wrap: nowrap; }
.nav-auth-btn .wp-block-button__link {
	font-size: var(--wp--preset--font-size--small);
	padding: 0.5em 1.1em;
	white-space: nowrap;
}

/* ==========================================================================
   Hero — scroll-reveal pattern
   assets/js/main.js sets two custom properties on .hero-reveal-stage as the
   page scrolls: --reveal-width (0 to 1, snaps fast) and --reveal-color (0 to
   1, a little slower). Everything here is a calc() off those two values.
   The frame's height never changes, only its width; it stays centered via
   left:50% + translateX(-50%) so it grows outward both ways.
   ========================================================================== */
.hero-reveal { padding: var(--space-6) 0 0; text-align: center; overflow: hidden; }
.hero-reveal-heading { margin-bottom: var(--space-4); }
.hero-reveal-heading mark { background: none; color: var(--color-red); }

.hero-reveal-stage {
	--reveal-width: 0;
	--reveal-color: 0;
	position: relative;
	padding-bottom: var(--space-5);
}

.hero-reveal-frame { position: relative; height: 420px; margin: 0; }

.hero-reveal-imgbox {
	--hero-start-width: 400px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	width: calc(var(--hero-start-width) + (var(--reveal-width) * (100% - var(--hero-start-width))));
	max-width: 100%;
	border-radius: calc(24px - (var(--reveal-width) * 24px));
	overflow: hidden;
	background: var(--color-black);
	margin: 0;
}

.hero-reveal-img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.hero-reveal-img img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.hero-reveal-img--color { opacity: var(--reveal-color); }

.hero-reveal-copy {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 200px;
	margin: 0;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.4;
	opacity: calc(4 * var(--reveal-width) * (1 - var(--reveal-width)));
}
.hero-reveal-copy--left { left: var(--space-3); text-align: right; }
.hero-reveal-copy--right { right: var(--space-3); text-align: left; }

@media (max-width: 900px) {
	.hero-reveal-copy { display: none; }
}
@media (max-width: 600px) {
	.hero-reveal-frame { height: 260px; }
	.hero-reveal-imgbox { --hero-start-width: 220px; }
}

.hero-reveal-actions { padding-bottom: var(--space-6); }
.hero-reveal-actions .hero-subhead { font-size: var(--wp--preset--font-size--large); color: var(--color-gray-600); }

/* ==========================================================================
   Rolling banner (JS builds the looping track from the paragraph's text)
   ========================================================================== */
.rolling-banner { overflow: hidden; white-space: nowrap; padding: 0.75em 0; padding-left: 0; padding-right: 0; }
.rolling-banner .rolling-banner-items {
	margin: 0;
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: normal;
}
.rolling-banner.is-marquee .rolling-banner-items { display: none; }

.rolling-banner .rolling-banner-track {
	display: flex;
	width: max-content;
	max-width: none;
	margin: 0;
	animation: jbc-marquee 28s linear infinite;
}
.rolling-banner .rolling-banner-half { display: flex; align-items: center; flex-shrink: 0; padding-right: 2.5em; }
.rolling-banner .rolling-banner-track span { font-weight: 600; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; }
.rolling-banner .rolling-banner-sep { color: var(--color-gold); margin: 0 1.25em; font-size: 0.5rem; vertical-align: middle; }

@keyframes jbc-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.rolling-banner .rolling-banner-track { animation: none; }
	.rolling-banner { overflow-x: auto; }
}

/* ==========================================================================
   Market snapshot bar
   ========================================================================== */
.market-snapshot { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.market-snapshot .is-style-eyebrow { color: var(--color-gold); }
.market-stat-value { font-size: 1.75rem; font-weight: 700; margin: 0; }
.market-stat-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gray-300);
	margin: 0;
}

/* ==========================================================================
   Services, positioning, newsletter
   ========================================================================== */
.service-item { border-top: 3px solid var(--color-blue); padding-top: var(--space-2); }
.service-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-black);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.125rem;
	margin: 0 0 var(--space-2);
}
.services-grid .wp-block-column:nth-child(odd) .service-icon { background: var(--color-red); }

.newsletter-fallback { color: var(--color-gray-600); font-style: italic; text-align: center; }
.flag-accent-mark {
	width: 28px;
	height: 18px;
	margin: 0 auto var(--space-2);
	background: var(--flag-gradient);
	clip-path: polygon(0 0, 100% 15%, 0 30%, 100% 45%, 0 60%, 100% 75%, 0 90%, 0 100%, 100% 100%, 100% 0);
	opacity: 0.85;
}

/* ==========================================================================
   Cards (Query Loop posts) — photos are black & white until hovered
   ========================================================================== */
.jbc-card .card-image { overflow: hidden; background: var(--color-gray-100); margin-bottom: var(--space-2); }
.jbc-card .card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter 0.35s ease;
}
.jbc-card:hover .card-image img { filter: grayscale(0); }

.card-tag, .card-tag a {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-red);
}
.card-tag { margin: 0 0 var(--space-1); }
.jbc-card .wp-block-post-title { margin: 0 0 0.35em; }
.jbc-card .wp-block-post-title a { color: var(--color-black); }
.jbc-card .wp-block-post-title a:hover { color: var(--color-red); }
.card-teaser, .card-teaser p { color: var(--color-gray-600); margin-top: 0; }
.card-meta { font-size: 0.8125rem; color: var(--color-gray-600); }

.jbc-card--row { gap: var(--space-3); }
.jbc-card--row .card-image { width: 240px; flex: none; margin-bottom: 0; }
@media (max-width: 600px) {
	.jbc-card--row { flex-direction: column; align-items: stretch; }
	.jbc-card--row .card-image { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.jbc-card .card-image img { transition: none; }
}

/* ==========================================================================
   Blog layout + sidebar widgets
   ========================================================================== */
.blog-layout { gap: var(--space-5); }
.archive-title { margin-bottom: var(--space-1); }
.blog-feed .wp-block-post-template { display: flex; flex-direction: column; gap: var(--space-5); list-style: none; padding: 0; margin: 0; }
.blog-feed .wp-block-query-pagination { margin-top: var(--space-4); }
.entry-meta { font-size: 0.875rem; color: var(--color-gray-600); }
.entry-meta p { margin: 0; }

.widget { border-top: 2px solid var(--color-black); padding-top: var(--space-2); margin-bottom: var(--space-5); }
.widget .widget-title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.1em;
	border-bottom: 3px solid var(--color-gold);
	display: inline-block;
	padding-bottom: 4px;
	margin-bottom: var(--space-2);
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { margin-bottom: var(--space-1); padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-gray-300); }
.widget li:last-child { border-bottom: 0; }

/* ==========================================================================
   Page content: credentials list, FAQ accordion, contact form
   ========================================================================== */
.credentials-list {
	list-style: none;
	margin: var(--space-3) 0;
	padding: var(--space-3) 0;
	border-top: 2px solid var(--color-black);
	border-bottom: 2px solid var(--color-black);
}
.credentials-list li { padding: var(--space-1) 0; border-bottom: 1px solid var(--color-gray-300); }
.credentials-list li:last-child { border-bottom: 0; }

.wp-block-details { border-bottom: 1px solid var(--color-gray-300); padding: var(--space-2) 0; }
.wp-block-details summary { cursor: pointer; font-weight: 600; list-style: none; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::before { content: "+ "; color: var(--color-red); font-weight: 700; }
.wp-block-details[open] summary::before { content: "\2212 "; }
.wp-block-details p { color: var(--color-gray-600); margin-top: var(--space-1); }

.contact-form { max-width: 560px; }
.form-row { display: flex; flex-direction: column; gap: 0.35em; margin: 0 0 var(--space-2); }
.form-row label { font-weight: 600; font-size: 0.875rem; }
.form-row input, .form-row select, .form-row textarea {
	font-family: inherit;
	font-size: 1rem;
	padding: 0.65em 0.75em;
	border: 1px solid var(--color-gray-300);
	border-radius: 2px;
}
.form-row--checkbox { flex-direction: row; align-items: center; }
.form-row--checkbox label { font-weight: 400; display: flex; align-items: center; gap: 0.5em; }
.form-notice { padding: var(--space-2); border-left: 3px solid var(--color-black); }
.form-notice--success { border-color: var(--color-green); }
.form-notice--error { border-color: var(--color-red); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	padding-top: var(--space-5);
	padding-bottom: var(--space-4);
	margin-top: var(--space-6);
	border-top: 4px solid;
	border-image: var(--flag-gradient) 1;
}
.site-footer a { color: var(--color-gray-300); }
.site-footer a:hover { color: var(--color-gold); }
.site-footer .wp-block-navigation-item__content { border-bottom: 0; padding-bottom: 0; }
.site-footer .wp-block-navigation-item__content:hover { color: var(--color-gold); }

.footer-heading { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--color-gray-300); margin-bottom: var(--space-2); }
.footer-columns { margin-bottom: var(--space-4); gap: var(--space-4); }
.footer-columns p { margin: 0 0 0.5em; }

.footer-bottom { border-top: 1px solid #262626; padding-top: var(--space-3); text-align: center; }
.footer-badge {
	background: var(--color-green);
	color: var(--color-white);
	font-size: 0.8125rem;
	font-weight: 700;
	padding: 0.5em 1em;
	border-radius: 999px;
	width: fit-content;
	margin: 0 auto var(--space-3);
}
.footer-badge p { margin: 0; }
.footer-badge a { color: var(--color-white); }
.footer-meta { font-size: 0.8125rem; color: #9a9a9a; }
.footer-disclaimer { font-size: 0.75rem; color: #808080; line-height: 1.5; }