/* ColorUp V2 — theme chrome (nav, footer, layout primitives, buttons, hero).
 * Loaded after colors_and_type.css (which provides the design tokens).
 * Scoped where possible; otherwise only targets elements emitted by this
 * theme's templates.
 */

/* ---------------- Layout primitives ---------------- */
body.colorup-v2 {
	background: var(--alabaster, #FBF9F4);
	color: var(--ink-noir, #1E1E1C);
	font-family: var(--font-sans, "Switzer", "Söhne", system-ui, sans-serif);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.colorup-v2 .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
}
body.colorup-v2 .container.narrow { max-width: 800px; }
body.colorup-v2 section { padding: 72px 0; }
body.colorup-v2 a { color: inherit; }

.skip-link {
	position: absolute;
	left: -9999px;
}
.skip-link:focus {
	left: 16px;
	top: 16px;
	background: var(--ink-noir, #1E1E1C);
	color: var(--alabaster, #FBF9F4);
	padding: 12px 16px;
	z-index: 200;
}

/* ---------------- Nav ---------------- */
body.colorup-v2 .nav {
	position: sticky; top: 0; z-index: 100;
	background: rgba(251, 249, 244, 0.85);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid rgba(30, 30, 28, 0.06);
}
body.colorup-v2 .nav-inner {
	max-width: 1280px; margin: 0 auto;
	padding: 16px 32px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 32px;
}
body.colorup-v2 .brand {
	display: inline-flex; align-items: center; gap: 11px;
	text-decoration: none;
}
body.colorup-v2 .brand img { display: block; height: 40px; width: auto; }
body.colorup-v2 .brand-lockup {
	display: grid;
	align-content: center;
	justify-items: center;
	min-width: 94px;
	transform: translateY(0.5px);
}
body.colorup-v2 .brand .name {
	font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
	font-size: 1.45rem; font-weight: 400; line-height: 0.94;
	letter-spacing: -0.015em; color: var(--ink-noir, #1E1E1C);
}
body.colorup-v2 .brand .sub {
	font-family: var(--font-sans, "Switzer", Arial, sans-serif);
	font-size: 0.54rem; font-weight: 500; line-height: 1;
	letter-spacing: 0.32em; color: var(--lunar-rock, #8B918A);
	margin-top: 5px;
	padding-left: 0.32em;
}
body.colorup-v2 .nav-links {
	list-style: none; display: flex; gap: 32px;
	padding: 0; margin: 0;
}
body.colorup-v2 .nav-links li { display: inline-flex; }
body.colorup-v2 .nav-links a {
	font-size: 0.85rem; font-weight: 500;
	color: var(--charcoal, #3D3D39);
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: color 180ms;
}
body.colorup-v2 .nav-links a:hover { color: var(--ink-noir, #1E1E1C); }
body.colorup-v2 .nav-actions {
	display: flex; align-items: center; gap: 16px;
}
body.colorup-v2 .nav-phone {
	display: inline-flex; align-items: center; min-height: 44px;
	font-size: 0.85rem; font-weight: 500;
	color: var(--charcoal, #3D3D39);
	text-decoration: none;
}
body.colorup-v2 .nav-phone-short { display: none; }

/* ---------------- Buttons ---------------- */
body.colorup-v2 .btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 28px;
	font-family: inherit; font-size: 0.85rem; font-weight: 500;
	letter-spacing: 0.04em; cursor: pointer;
	text-decoration: none;
	border: 1px solid transparent;
	transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.colorup-v2 .btn-primary {
	background: var(--ink-noir, #1E1E1C);
	color: var(--alabaster, #FBF9F4);
}
body.colorup-v2 .btn-primary:hover {
	background: var(--charcoal, #3D3D39);
	color: var(--alabaster, #FBF9F4);
}
body.colorup-v2 .btn-ghost {
	background: transparent;
	color: var(--ink-noir, #1E1E1C);
	border-color: var(--ink-noir, #1E1E1C);
}
body.colorup-v2 .btn-ghost:hover {
	background: var(--ink-noir, #1E1E1C);
	color: var(--alabaster, #FBF9F4);
}
body.colorup-v2 .btn-sm { padding: 10px 18px; font-size: 0.78rem; }

/* ---------------- Page hero / page body ---------------- */
body.colorup-v2 .eyebrow {
	font-size: 0.78rem; letter-spacing: 0.32em;
	text-transform: uppercase; font-weight: 500;
	color: var(--lunar-rock, #8B918A);
	margin-bottom: 16px;
}
body.colorup-v2 .page-hero { padding: 80px 0 24px; }
body.colorup-v2 .page-title {
	font-family: var(--font-sans, "Switzer", system-ui, sans-serif);
	font-weight: 500;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.05; letter-spacing: -0.04em;
	color: var(--ink-noir, #1E1E1C);
	margin: 0 0 16px;
	max-width: 24ch;
}
body.colorup-v2 .page-lede {
	font-size: 1.125rem; line-height: 1.6;
	color: var(--charcoal, #3D3D39);
	max-width: 60ch; margin: 0 0 24px;
}
body.colorup-v2 .page-body { padding: 24px 0 88px; }
body.colorup-v2 .page-body .entry-content {
	font-size: 1rem; line-height: 1.75;
	color: var(--charcoal, #3D3D39);
}
body.colorup-v2 .page-body .entry-content h2 {
	font-family: var(--font-sans);
	font-weight: 500; font-size: 1.5rem;
	letter-spacing: -0.02em;
	color: var(--ink-noir, #1E1E1C);
	margin: 48px 0 16px;
}
body.colorup-v2 .page-body .entry-content h3 {
	font-family: var(--font-sans);
	font-weight: 500; font-size: 1.125rem;
	letter-spacing: -0.01em;
	color: var(--ink-noir, #1E1E1C);
	margin: 32px 0 12px;
}
body.colorup-v2 .page-body .entry-content p { margin: 0 0 16px; }
body.colorup-v2 .page-body .entry-content ul,
body.colorup-v2 .page-body .entry-content ol {
	margin: 0 0 16px 24px; padding: 0;
}
body.colorup-v2 .page-body .entry-content li { margin: 0 0 8px; }
body.colorup-v2 .page-body .entry-content a {
	color: var(--ink-noir, #1E1E1C);
	border-bottom: 1px solid rgba(30, 30, 28, 0.2);
}
body.colorup-v2 .page-body .entry-content a:hover {
	color: var(--brass-deep, #8a6a30);
	border-color: var(--brass-deep, #8a6a30);
}

/* ---------------- Archive / blog index ---------------- */
body.colorup-v2 .archive-hero { padding: 80px 0 32px; }
body.colorup-v2 .archive-title {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.05; letter-spacing: -0.04em;
	color: var(--ink-noir, #1E1E1C);
	margin: 0 0 16px;
}
body.colorup-v2 .archive-lede {
	font-size: 1.125rem; line-height: 1.6;
	color: var(--charcoal, #3D3D39);
	max-width: 60ch; margin: 0;
}
body.colorup-v2 .archive-body { padding: 32px 0 88px; }
body.colorup-v2 .post-grid {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 40px 32px;
}
body.colorup-v2 .post-card { margin: 0; }
body.colorup-v2 .post-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: color 180ms ease-out;
}
body.colorup-v2 .post-card-link:hover { color: var(--brass-deep, #8C6936); }
body.colorup-v2 .post-card-image {
	aspect-ratio: 4/3;
	background: var(--cloud, #E4E1D9);
	overflow: hidden;
	margin-bottom: 16px;
}
body.colorup-v2 .post-card-image img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
body.colorup-v2 .post-card-image--placeholder {
	background: linear-gradient(135deg, var(--cloud, #E4E1D9), var(--warm-taupe, #A39784));
}
body.colorup-v2 .post-card-meta {
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--lunar-rock, #8B918A);
	margin-bottom: 8px;
}
body.colorup-v2 .post-card-title {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	color: var(--ink-noir, #1E1E1C);
	margin: 0 0 8px;
	line-height: 1.25;
}
body.colorup-v2 .post-card-excerpt {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--charcoal, #3D3D39);
	margin: 0;
}
body.colorup-v2 .archive-pagination {
	margin-top: 56px;
	font-size: 0.85rem;
	color: var(--charcoal, #3D3D39);
}

/* ---------------- Single post hero/body ---------------- */
body.colorup-v2 .post-hero { padding: clamp(72px, 10vw, 128px) 0 40px; }
body.colorup-v2 .post-hero .container.narrow { max-width: 1040px; }
body.colorup-v2 .post-title {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: clamp(2.75rem, 6.2vw, 5rem);
	line-height: 1.08;
	letter-spacing: -0.045em;
	color: var(--ink-noir, #1E1E1C);
	max-width: 18ch;
	margin: 0 0 20px;
}
body.colorup-v2 .post-title__accent {
	font-family: var(--font-serif, "Cormorant Garamond", "Times New Roman", serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.025em;
	color: var(--lunar-rock, #8B918A);
}
@media (max-width: 600px) {
	body.colorup-v2 .post-hero { padding: 56px 0 28px; }
	body.colorup-v2 .post-title {
		font-size: clamp(2.5rem, 11vw, 3.25rem);
		line-height: 1.1;
		max-width: 100%;
	}
}
body.colorup-v2 .post-meta {
	font-size: 0.85rem;
	color: var(--lunar-rock, #8B918A);
	letter-spacing: 0.04em;
}
body.colorup-v2 .post-body { padding: 24px 0 88px; }
body.colorup-v2 .post-featured-image {
	margin: 0 0 40px;
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--cloud, #E4E1D9);
}
body.colorup-v2 .post-featured-image img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---------------- Footer (canonical C4 simplified close) ---------------- */
body.colorup-v2 .site-footer {
	background: var(--ink-noir, #0d0d0d);
	color: rgba(246, 243, 236, 0.7);
	padding: 80px 0 32px;
}
body.colorup-v2 .site-footer a {
	color: inherit; text-decoration: none;
	transition: color 180ms;
}
body.colorup-v2 .site-footer a:hover { color: var(--muted-brass, #b9904a); }
body.colorup-v2 .site-footer .container {
	max-width: 1280px; margin: 0 auto; padding: 0 32px;
}
body.colorup-v2 .site-footer .ft-grid {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr);
	gap: 56px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(246, 243, 236, 0.1);
}
body.colorup-v2 .site-footer .ft-brand .name {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1.875rem; color: var(--alabaster, #f6f3ec);
	line-height: 1; letter-spacing: -0.02em; font-weight: 400;
}
body.colorup-v2 .site-footer .ft-brand .sub {
	font-size: 0.65rem; letter-spacing: 0.32em;
	color: rgba(246, 243, 236, 0.55);
	margin-top: 6px; font-weight: 500;
}
body.colorup-v2 .site-footer .ft-brand p {
	color: rgba(246, 243, 236, 0.65);
	font-size: 0.92rem; line-height: 1.55;
	max-width: 320px; margin-top: 22px;
}
body.colorup-v2 .site-footer .ft-col h5 {
	font-size: 0.7rem; letter-spacing: 0.2em;
	text-transform: uppercase; font-weight: 500;
	color: rgba(246, 243, 236, 0.5);
	margin: 0 0 16px;
}
body.colorup-v2 .site-footer .ft-col ul {
	list-style: none; padding: 0; margin: 0;
}
body.colorup-v2 .site-footer .ft-col li {
	padding: 6px 0; font-size: 0.9rem;
	color: rgba(246, 243, 236, 0.85);
}
body.colorup-v2 .site-footer .ft-contact {
	padding: 28px 0 8px;
	display: flex; gap: 48px;
	align-items: center; flex-wrap: wrap;
}
body.colorup-v2 .site-footer .ft-contact-list {
	list-style: none; display: flex; flex-wrap: wrap; gap: 16px 32px;
	padding: 0; margin: 0;
	font-size: 0.95rem;
	color: var(--alabaster, #f6f3ec);
}
body.colorup-v2 .site-footer .ft-contact-list a {
	color: var(--alabaster, #f6f3ec);
}
body.colorup-v2 .site-footer .ft-areas {
	color: rgba(246, 243, 236, 0.55);
	font-size: 0.85rem; line-height: 1.5;
	margin: 0; flex: 1; min-width: 360px;
}
body.colorup-v2 .site-footer .ft-legal {
	padding-top: 24px;
	border-top: 1px solid rgba(246, 243, 236, 0.1);
	display: flex; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	font-size: 0.78rem;
	color: rgba(246, 243, 236, 0.5);
	letter-spacing: 0.04em;
}
body.colorup-v2 .site-footer .ft-legal a {
	color: rgba(246, 243, 236, 0.55);
}

/* ---------------- Mobile nav toggle ---------------- */
/* Hamburger button — hidden on wide screens, visible through tablet widths. */
body.colorup-v2 .nav-toggle {
	display: none;
	width: 44px; height: 44px;
	padding: 0; margin: 0;
	background: transparent;
	border: 1px solid rgba(30, 30, 28, 0.15);
	cursor: pointer;
	position: relative;
}
body.colorup-v2 .nav-toggle:focus-visible {
	outline: 2px solid var(--ink-noir, #1E1E1C);
	outline-offset: 2px;
}
body.colorup-v2 .nav-toggle-bar {
	display: block;
	width: 20px; height: 1.5px;
	background: var(--ink-noir, #1E1E1C);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
	            opacity 180ms;
}
body.colorup-v2 .nav-toggle-bar:nth-child(1) { top: 15px; }
body.colorup-v2 .nav-toggle-bar:nth-child(2) { top: 21px; }
body.colorup-v2 .nav-toggle-bar:nth-child(3) { top: 27px; }
/* X state when menu is open */
body.colorup-v2.nav-open .nav-toggle-bar:nth-child(1) {
	top: 21px; transform: translateX(-50%) rotate(45deg);
}
body.colorup-v2.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.colorup-v2.nav-open .nav-toggle-bar:nth-child(3) {
	top: 21px; transform: translateX(-50%) rotate(-45deg);
}

/* Preserve the full navigation inventory on narrow desktop/tablet widths. */
@media (min-width: 961px) and (max-width: 1100px) {
	body.colorup-v2 .nav-inner {
		padding: 14px 16px;
		gap: 12px;
	}
	body.colorup-v2 .brand {
		flex: 0 0 auto;
		gap: 8px;
	}
	body.colorup-v2 .brand img { height: 34px; }
	body.colorup-v2 .brand-lockup { min-width: 78px; }
	body.colorup-v2 .brand .name { font-size: 1.24rem; font-weight: 400; }
	body.colorup-v2 .brand .sub {
		font-size: 0.48rem;
		letter-spacing: 0.3em;
		margin-top: 4px;
	}
	body.colorup-v2 .nav-links {
		flex: 0 1 auto;
		min-width: 0;
		flex-wrap: nowrap;
		gap: clamp(10px, 1.6vw, 16px);
	}
	body.colorup-v2 .nav-links li { flex: 0 0 auto; }
	body.colorup-v2 .nav-links a {
		font-size: 0.75rem;
		white-space: nowrap;
	}
	body.colorup-v2 .nav-actions {
		flex: 0 0 auto;
		gap: 8px;
	}
	body.colorup-v2 .nav-phone {
		font-size: 0.72rem;
		white-space: nowrap;
	}
	body.colorup-v2 .nav-cta {
		padding: 8px 10px;
		font-size: 0.68rem;
		white-space: nowrap;
	}
}

/*
 * The established shared token sheet still hides .nav-phone with
 * !important below 900px. Keep the contact path available, but compact it
 * to the short label before the tablet navigation becomes crowded.
 */
@media (max-width: 960px) {
	body.colorup-v2 .nav-actions .nav-phone {
		display: inline-flex !important;
		min-width: 44px;
		justify-content: center;
		white-space: nowrap;
	}
	body.colorup-v2 .nav-phone-full { display: none; }
	body.colorup-v2 .nav-phone-short { display: inline; }
}

/* Mobile menu sheet — hidden by default, full-width drop-down on open */
@media (max-width: 960px) {
	body.colorup-v2 .nav-toggle { display: inline-flex; }
	body.colorup-v2 .nav-links {
		display: flex;
		flex-direction: column;
		gap: 0;
		position: fixed;
		top: 72px;  /* approx nav height; adjusts via JS-set var later */
		left: 0; right: 0;
		background: var(--alabaster, #FBF9F4);
		border-bottom: 1px solid rgba(30, 30, 28, 0.08);
		padding: 24px 32px 32px;
		margin: 0;
		z-index: 99;
		opacity: 0;
		transform: translateY(-8px);
		visibility: hidden;
		pointer-events: none;
		transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
		            transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
		            visibility 0s linear 220ms;
	}
	body.colorup-v2.nav-open .nav-links {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}
	body.colorup-v2 .nav-links li {
		border-bottom: 1px solid rgba(30, 30, 28, 0.06);
	}
	body.colorup-v2 .nav-links li:last-child { border-bottom: none; }
	body.colorup-v2 .nav-links a {
		display: block;
		padding: 18px 0;
		font-size: 1rem;
		letter-spacing: 0;
	}
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
	body.colorup-v2 .site-footer .ft-grid {
		grid-template-columns: 1fr 1fr; gap: 40px;
	}
	body.colorup-v2 .site-footer .ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
	body.colorup-v2 .nav-inner { gap: 12px; padding: 12px 20px; }
	body.colorup-v2 .nav-cta { display: none; } /* save space for hamburger */
}
@media (max-width: 768px) {
	body.colorup-v2 .container { padding: 0 20px; }
	body.colorup-v2 section { padding: 56px 0; }
}
@media (max-width: 600px) {
	body.colorup-v2 .site-footer .ft-grid {
		grid-template-columns: 1fr; gap: 32px;
	}
	body.colorup-v2 .site-footer .ft-contact {
		flex-direction: column; align-items: flex-start; gap: 16px;
	}
	body.colorup-v2 .site-footer .ft-areas { min-width: auto; }
	body.colorup-v2 .site-footer .ft-legal { flex-direction: column; }
	body.colorup-v2 .nav-phone { font-size: 0.78rem; min-width: 44px; justify-content: center; }
	body.colorup-v2 .nav-phone-full { display: none; }
	body.colorup-v2 .nav-phone-short { display: inline; }
}

/* ---------------- Mobile conversion CTA ---------------- */
body.colorup-v2 .mobile-project-cta {
	display: none;
}
@media (max-width: 768px) {
	body.colorup-v2 {
		padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
	}
	body.colorup-v2 .mobile-project-cta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(246, 243, 236, 0.96);
		border-top: 1px solid rgba(30, 30, 28, 0.12);
		box-shadow: 0 -8px 24px rgba(30, 30, 28, 0.08);
		backdrop-filter: blur(12px);
	}
	body.colorup-v2 .mobile-project-cta .btn {
		display: flex;
		width: 100%;
		min-height: 48px;
		align-items: center;
		justify-content: center;
	}
}

/* ---------------- Print ---------------- */
@media print {
	@page { margin: 0.65in; }
	body.colorup-v2 {
		padding: 0 !important;
		background: #fff !important;
		color: #000 !important;
		font-size: 11pt;
	}
	body.colorup-v2 .nav,
	body.colorup-v2 .site-footer,
	body.colorup-v2 .mobile-project-cta,
	body.colorup-v2 .closing,
	body.colorup-v2 form,
	body.colorup-v2 button,
	body.colorup-v2 [role="dialog"],
	body.colorup-v2 .wpconsent_banner,
	body.colorup-v2 .wpconsent-fp { display: none !important; }
	body.colorup-v2 main,
	body.colorup-v2 section,
	body.colorup-v2 .container {
		max-width: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	body.colorup-v2 section { break-inside: avoid; }
	body.colorup-v2 img { max-width: 100% !important; break-inside: avoid; }
	body.colorup-v2 a { color: #000 !important; text-decoration: underline; }
	body.colorup-v2 a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}
}