/**
 * HotZippy — Bootstrap overrides & brand tokens
 */

:root {
	--hz-brand: #d85a30;
	--hz-brand-dark: #993c1d;
	--hz-brand-muted: #faece7;
	--hz-ink: #1a1a1a;
	--hz-muted: #666;
	--hz-body: #555;
	--hz-surface: #f4f4f2;
	--hz-footer: #2c2c2a;
	--hz-blue: #378add;
	--hz-blue-deep: #185fa5;
	--hz-blue-soft: #e6f1fb;
	--hz-green: #639922;
	--hz-green-deep: #3b6d11;
	--hz-green-soft: #eaf3de;
	--hz-horror: #a32d2d;
	--hz-horror-soft: #fcebeb;
	--hz-romance: #993556;
	--hz-romance-soft: #fbeaf0;
}

/*
 * WordPress block themes (like Twenty Twenty-Five) constrain page/post content to
 * the global content size (default ~645px). HotZippy uses a wider Bootstrap container.
 * Override the global CSS variables so all constrained templates use our width.
 */
.wp-site-blocks {
	--wp--style--global--content-size: 1100px;
	--wp--style--global--wide-size: 1100px;
}

html {
	font-size: 120%;
	scroll-behavior: smooth;
}

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

/* Offset for sticky navbar when jumping to in-page anchors */
.hotzippy-front section[id],
footer#contact {
	scroll-margin-top: 5.5rem;
}

.hz-container {
	max-width: 1100px;
}

/* Page templates: allow full container width (avoid parent theme constrained layout width) */
.hz-page .wp-block-post-title,
.hz-page .wp-block-post-content {
	max-width: 100% !important;
}

/* Default link color inside page content */
.hz-page a:not(.btn):not(.nav-link):not(.navbar-brand):not(.footer-muted),
.hz-page .wp-block-post-content a:not(.btn):not(.footer-muted) {
	color: var(--hz-brand);
}
.hz-page a:not(.btn):not(.nav-link):not(.navbar-brand):not(.footer-muted):hover,
.hz-page .wp-block-post-content a:not(.btn):not(.footer-muted):hover {
	color: var(--hz-brand-dark);
}

.text-hz-ink {
	color: var(--hz-ink) !important;
}
.text-hz-muted {
	color: var(--hz-muted) !important;
}
.text-hz-body {
	color: var(--hz-body) !important;
}
.text-brand {
	color: var(--hz-brand) !important;
}

.bg-hz-brand {
	background-color: var(--hz-brand) !important;
}
.bg-hz-brand-dark {
	background-color: var(--hz-brand-dark) !important;
}
.bg-hz-surface {
	background-color: var(--hz-surface) !important;
}
.bg-hz-footer {
	background-color: var(--hz-footer) !important;
}
.bg-brand-muted {
	background-color: var(--hz-brand-muted) !important;
}
.bg-hz-blue-soft {
	background-color: var(--hz-blue-soft) !important;
}
.bg-hz-green-soft {
	background-color: var(--hz-green-soft) !important;
}
.bg-hz-horror-soft {
	background-color: var(--hz-horror-soft) !important;
}
.bg-hz-romance-soft {
	background-color: var(--hz-romance-soft) !important;
}

.text-hz-blue-deep {
	color: var(--hz-blue-deep) !important;
}
.text-hz-green-deep {
	color: var(--hz-green-deep) !important;
}
.text-hz-horror {
	color: var(--hz-horror) !important;
}
.text-hz-romance {
	color: var(--hz-romance) !important;
}
.text-brand-dark {
	color: var(--hz-brand-dark) !important;
}

.hz-btn-brand {
	--bs-btn-bg: var(--hz-brand);
	--bs-btn-border-color: var(--hz-brand);
	--bs-btn-hover-bg: var(--hz-brand-dark);
	--bs-btn-hover-border-color: var(--hz-brand-dark);
	--bs-btn-active-bg: var(--hz-brand-dark);
	--bs-btn-active-border-color: var(--hz-brand-dark);
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	border-radius: 0.75rem;
	font-weight: 500;
	padding: 0.5rem 1.25rem;
	font-size: 0.8125rem;
}

/* Our Brands — Visit site: white label; hover = lighter fill, primary border (white text kept) */
.hz-btn-brand-sites {
	background-color: var(--hz-brand) !important;
	border: 1px solid var(--hz-brand) !important;
	color: #fff !important;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hz-btn-brand-sites:hover,
.hz-btn-brand-sites:focus {
	background-color: color-mix(in srgb, var(--hz-brand) 72%, #fff) !important;
	border-color: var(--hz-brand) !important;
	color: #fff !important;
}

.hz-btn-brand-sites:active {
	background-color: color-mix(in srgb, var(--hz-brand) 62%, #fff) !important;
	color: #fff !important;
	border-color: var(--hz-brand) !important;
}

.hz-btn-outline-light {
	border-radius: 0.75rem;
	font-weight: 500;
	border-width: 1.5px;
}

.hz-logo-icon {
	width: 2rem;
	height: 2rem;
	border-radius: 0.375rem;
	background: var(--hz-brand);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.hz-section-label {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hz-brand);
	margin-bottom: 0.5rem;
}

.hz-section-label-inverse {
	color: rgba(255, 255, 255, 0.7) !important;
}

.hz-card-icon {
	width: 42px;
	height: 42px;
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hz-site-icon {
	width: 50px;
	height: 50px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.hz-border-top-brand {
	border-top: 3px solid var(--hz-brand) !important;
}
.hz-border-top-blue {
	border-top: 3px solid var(--hz-blue) !important;
}
.hz-border-top-green {
	border-top: 3px solid var(--hz-green) !important;
}

.hz-navbar .nav-link {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--hz-muted) !important;
}
.hz-navbar .nav-link:hover,
.hz-navbar .nav-link:focus {
	color: var(--hz-ink) !important;
}
.hz-navbar .nav-link.active {
	color: var(--hz-ink) !important;
}

.hz-timeline {
	position: relative;
	padding-left: 2rem;
}
.hz-timeline::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 0.5rem;
	bottom: 0;
	width: 1px;
	background: rgba(255, 255, 255, 0.25);
}
.hz-timeline-item {
	position: relative;
	margin-bottom: 2rem;
}
.hz-timeline-item:last-child {
	margin-bottom: 0;
}
.hz-timeline-dot {
	position: absolute;
	left: -1.55rem;
	top: 0.25rem;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hz-timeline-dot span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hz-brand);
}

.footer-muted {
	color: #aaa !important;
}
a.footer-muted:hover {
	color: #fff !important;
}
.footer-heading {
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #666 !important;
}

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

footer{
	margin-top: 0 !important;
}
main{
	margin-top: 0 !important;
}