/**
 * Theme chrome: buttons, navbar (sticky/scroll swap + services dropdown +
 * mobile drawer) and footer. Everything below reads design tokens only —
 * no raw hex/px for anything the tokens already name (DESIGN.md "Do" list).
 *
 * Phase 1 scope: header + footer only. Homepage section styles land in
 * build phase 2.
 */

/* ---------------------------------------------------------------------
 * Buttons — DESIGN.md "Components → Buttons"
 * ------------------------------------------------------------------- */

.tcc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --space-2xs );
	font-family: var( --font-body );
	font-size: var( --text-label-size );
	line-height: var( --text-label-lh );
	font-weight: var( --weight-medium );
	letter-spacing: var( --text-label-tracking );
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	border-radius: var( --radius-sm );
	padding: 17px var( --space-md );
	border: 1px solid transparent;
	transition: var( --transition-base );
	transition-property: background-color, border-color, color;
}

.tcc-btn--compact {
	padding: var( --space-xs ) var( --space-sm );
}

.tcc-btn--primary {
	background: var( --color-primary );
	color: var( --color-primary-contrast );
	border-color: var( --color-primary );
}
/* Gold text on transparent used to be the hover state here, which is
   invisible wherever this button sits on a light band (blog CTA card,
   nav drawer) — gold-on-white is ~1.6:1 contrast. Darkening the same
   filled gold instead of swapping to gold text keeps it readable no
   matter what's behind the button. Color must be repeated here (not just
   inherited from the base rule) because the global `a:hover` rule in
   tokens/base.css outranks `.tcc-btn--primary` on specificity and would
   otherwise turn the text gold-on-gold. */
.tcc-btn--primary:hover {
	filter: brightness( 0.92 );
	color: var( --color-primary-contrast );
}

.tcc-btn--light {
	background: var( --surface-canvas );
	color: var( --text-strong );
	border-color: transparent;
}
.tcc-btn--light:hover {
	background: var( --color-primary );
	color: var( --text-on-dark );
}

/* Nav CTA — btn-light while the navbar is transparent-on-navy, flips to
   btn-primary once the navbar has scrolled to its white background. Pure
   CSS, driven by the same .tcc-navbar--scrolled class as the logo swap. */
.tcc-btn--nav-cta {
	background: var( --surface-canvas );
	color: var( --text-strong );
	border-color: transparent;
	padding: var( --space-xs ) var( --space-sm );
}
.tcc-btn--nav-cta:hover {
	background: var( --color-primary );
	color: var( --text-strong );
}
.tcc-navbar--scrolled .tcc-btn--nav-cta {
	background: var( --color-primary );
	color: var( --color-primary-contrast );
	border-color: var( --color-primary );
}
.tcc-navbar--scrolled .tcc-btn--nav-cta:hover {
	background: transparent;
	/* brand-deep, not gold — this hollow sits on the white scrolled navbar
	   (see the [data-nav-link]:hover rule above for the same reasoning). */
	color: var( --color-brand-deep );
	border-color: var( --color-brand-deep );
}

/* ---------------------------------------------------------------------
 * Navbar
 * ------------------------------------------------------------------- */

.tcc-navbar {
	position: relative;
	z-index: 50;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out;
}
.tcc-navbar--sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}
.tcc-navbar.tcc-navbar--scrolled {
	background: var( --surface-canvas );
	border-bottom-color: var( --border-hairline );
}

/* A sticky/fixed navbar lifts its own height out of flow. Pages with a
   full-bleed hero (body.tcc-has-hero — the navy hero band the navbar
   transparently overlays, build phase 2) want the navbar floating over
   them; every other page needs the space reserved or the navbar covers
   the first ~84px of content. */
:root {
	--tcc-navbar-h: 84px;
}
.tcc-navbar--sticky ~ #tcc-content {
	padding-top: var( --tcc-navbar-h );
}
body.tcc-has-hero .tcc-navbar--sticky ~ #tcc-content {
	padding-top: 0;
}

.tcc-navbar__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-sm );
	padding: var( --space-sm ) var( --gutter );
	max-width: var( --container-max );
	margin: 0 auto;
}

.tcc-navbar__logo-link {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	position: relative;
}
.tcc-logo {
	display: block;
}
.tcc-logo--dark {
	display: none;
}
.tcc-navbar--scrolled .tcc-logo--light {
	display: none;
}
.tcc-navbar--scrolled .tcc-logo--dark {
	display: block;
}

.tcc-navbar__links {
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	gap: clamp( 24px, 4vw, var( --space-2xl ) );
	margin: 0;
	padding: 0;
	align-items: center;
}

.tcc-navbar [data-nav-link] {
	font-family: var( --font-body );
	font-weight: var( --weight-medium );
	font-size: var( --text-body-size );
	white-space: nowrap;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var( --text-on-dark );
	text-decoration: none;
	transition: color var( --transition-base );
}
.tcc-navbar--scrolled [data-nav-link] {
	color: var( --text-body );
}
.tcc-navbar [data-nav-link]:hover {
	color: var( --color-primary );
}
/* Gold text fails WCAG contrast on white (~1.6:1) — once the navbar has
   scrolled to its white background, hover goes to brand-deep instead.
   Gold hover stays correct (and passes contrast) on the navy/transparent
   state above. */
.tcc-navbar.tcc-navbar--scrolled [data-nav-link]:hover {
	color: var( --color-brand-deep );
}

.tcc-nav-services {
	position: relative;
}
/* Anchored to the trigger's centre rather than its left edge: at this
   panel's width, `left: 0` pushed the right-hand column off the viewport on
   narrower desktops. The open/close animation therefore has to carry the
   -50% X translate through both states, or the panel jumps sideways as it
   fades. */
.tcc-nav-services__panel {
	position: absolute;
	left: 50%;
	top: 100%;
	padding-top: 14px; /* gap lives INSIDE the hover container — see navigation.js */
	opacity: 0;
	transform: translate( -50%, -6px );
	pointer-events: none;
	transition: opacity 0.2s ease-out, transform 0.2s ease-out;
	z-index: 60;
	max-width: calc( 100vw - var( --space-md ) );
}
.tcc-nav-services.is-open .tcc-nav-services__panel {
	opacity: 1;
	transform: translate( -50%, 0 );
	pointer-events: auto;
}
.tcc-nav-services__grid {
	background: var( --surface-canvas );
	border: var( --elevation-hairline );
	border-radius: var( --radius-md );
	padding: var( --space-sm );
	display: grid;
	/* Fixed tracks, not minmax(): the panel is absolutely positioned, so it
	   shrink-to-fits, and a 0 minimum lets both columns collapse to almost
	   nothing instead of filling the panel. */
	grid-template-columns: repeat( 2, 288px );
	gap: 2px var( --space-sm );
	/* All 10 services are meant to fit unscrolled at normal window heights
	   (the compact row metrics below are what make that true). This cap is
	   the fallback for short windows — without it the list simply ran off
	   the bottom of the screen with no way to reach the last services. */
	max-height: calc( 100vh - var( --tcc-navbar-h ) - var( --space-md ) );
	overflow-y: auto;
	overscroll-behavior: contain;
}
.tcc-nav-services__row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-decoration: none;
	padding: 8px 10px;
	border-radius: var( --radius-sm );
	transition: background-color var( --transition-base );
}
.tcc-nav-services__row:hover {
	background: var( --tcc-tint-blue );
}
.tcc-nav-services__icon {
	flex: 0 0 auto;
	color: var( --color-hero-bg );
	margin-top: 2px;
	display: flex;
}
.tcc-nav-services__icon svg,
.tcc-nav-services__icon [data-lucide] {
	width: 22px;
	height: 22px;
}
.tcc-nav-services__row:hover .tcc-nav-services__icon {
	/* Panel is white — gold fails even the 3:1 non-text minimum. */
	color: var( --color-brand-deep );
}
.tcc-nav-services__text {
	min-width: 0;
}
/* Was --text-h6-size (24px), which wrapped "Office & Commercial Cleaning"
   onto three lines inside a ~240px column and made every row tall enough
   that the 10-item list overflowed the screen. At 16px each title fits on
   one or two lines and the whole menu fits on a laptop screen. */
.tcc-nav-services__title {
	display: block;
	font-family: var( --font-display );
	font-size: var( --text-body-size );
	line-height: 1.35;
	font-weight: var( --weight-semibold );
	color: var( --text-strong );
}
.tcc-nav-services__desc {
	display: block;
	color: var( --text-body );
	font-size: var( --text-label-size );
	line-height: 1.4;
	margin-top: 2px;
}

.tcc-navbar__hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
}
.tcc-navbar__hamburger span {
	display: block;
	height: 2px;
	width: 22px;
	background: var( --text-on-dark );
	transition: background-color var( --transition-base );
}
.tcc-navbar--scrolled .tcc-navbar__hamburger span {
	background: var( --text-body );
}

.tcc-navbar__drawer {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 40;
	background: var( --surface-canvas );
	border-top: var( --elevation-hairline );
	padding-bottom: var( --space-sm );
	/* Four nav links plus the 10-service group plus the CTA is taller than a
	   phone screen once Services is expanded — same overflow problem as the
	   desktop panel, so the drawer scrolls internally instead of running off
	   the bottom. */
	max-height: calc( 100vh - var( --tcc-navbar-h ) );
	overflow-y: auto;
	overscroll-behavior: contain;
}
.tcc-navbar__drawer.is-open {
	display: block;
}
.tcc-navbar__drawer-links {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var( --space-sm );
	margin: 0;
	padding: var( --space-sm ) var( --gutter ) 0;
}
.tcc-navbar__drawer-links > li > a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var( --text-strong );
	text-decoration: none;
	font-weight: var( --weight-medium );
}
.tcc-navbar__drawer-services-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 44px;
	background: none;
	border: none;
	padding: 0;
	color: var( --text-strong );
	font-weight: var( --weight-medium );
	font-size: var( --text-body-size );
	font-family: var( --font-body );
	cursor: pointer;
}
.tcc-navbar__drawer-services-toggle svg,
.tcc-navbar__drawer-services-toggle [data-lucide] {
	width: 18px;
	height: 18px;
}
.tcc-navbar__drawer-services-list {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease-in-out;
	display: flex;
	flex-direction: column;
}
/* Generous enough that adding an 11th service can't silently clip the list;
   the drawer itself is what scrolls (rule above), so an over-large value
   here costs nothing but a slightly faster-feeling ease at the tail. */
.tcc-navbar__drawer-services-list.is-open {
	max-height: 100vh;
}
.tcc-navbar__drawer-services-list a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var( --text-body );
	text-decoration: none;
	padding-left: var( --space-sm );
}
.tcc-navbar__drawer-cta {
	padding: var( --space-md ) var( --gutter ) 0;
}
.tcc-navbar__drawer-cta .tcc-btn {
	width: 100%;
}

@media ( max-width: 991px ) {
	.tcc-navbar [data-desktop-nav] {
		display: none !important;
	}
	.tcc-navbar__hamburger {
		display: flex;
	}
}

/* ---------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------- */

.tcc-footer {
	font-family: var( --font-body );
	background: var( --surface-dark );
	color: var( --text-on-dark );
}
.tcc-footer a {
	color: var( --text-on-dark-muted );
	text-decoration: none;
	transition: color var( --transition-base );
}
.tcc-footer a:hover {
	color: var( --color-primary );
}
.tcc-footer .tcc-label {
	color: var( --color-primary );
}

.tcc-footer__grid {
	padding-top: var( --space-3xl );
	padding-bottom: var( --space-lg );
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.15fr 1.15fr;
	gap: var( --space-3xl ) var( --space-lg );
}

.tcc-footer__col {
	display: flex;
	flex-direction: column;
	gap: var( --space-sm );
}
.tcc-footer__col--about {
	max-width: 420px;
}
.tcc-footer__heading {
	margin: 0;
	font-family: var( --font-display );
	font-size: var( --text-h5-size );
	line-height: 1.25;
	font-weight: var( --weight-bold );
	color: var( --text-on-dark );
	text-wrap: pretty;
}
.tcc-footer__cta {
	margin-top: var( --space-2xs );
}
/* `.tcc-footer a` (0,1,1) outranks `.tcc-btn--light` (0,1,0), so without an
   explicitly scoped rule the CTA inherits the footer's near-white link colour
   and renders as an empty white box. Re-state both states at footer scope. */
.tcc-footer .tcc-btn--light {
	background: var( --surface-canvas );
	color: var( --text-strong );
	border-color: transparent;
}
.tcc-footer .tcc-btn--light:hover,
.tcc-footer .tcc-btn--light:focus-visible {
	background: var( --color-primary );
	color: var( --text-on-dark );
	border-color: var( --color-primary );
}
.tcc-footer__hours {
	margin-top: var( --space-md );
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tcc-footer__hours-line {
	color: var( --text-on-dark-muted );
}
.tcc-footer__address {
	line-height: 1.5;
}
.tcc-footer__socials {
	display: flex;
	gap: var( --space-2xs );
	margin-top: var( --space-2xs );
}
.tcc-footer__social {
	width: 40px;
	height: 40px;
	border-radius: var( --radius-full );
	border: 1px solid var( --border-hairline-dark );
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --text-on-dark );
}
.tcc-footer__social svg,
.tcc-footer__social [data-lucide] {
	width: 18px;
	height: 18px;
}
.tcc-footer__social:hover {
	border-color: var( --color-primary );
	color: var( --color-primary );
}

.tcc-footer__legal {
	border-top: 1px solid var( --border-hairline-dark );
	padding: var( --space-md ) var( --gutter );
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-md );
	color: var( --text-on-dark-faint );
	font-size: var( --text-body-size );
}

.tcc-footer__wordmark-band {
	position: relative;
	overflow: hidden;
	background: var( --surface-dark );
}
.tcc-footer__wordmark-texture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 62%;
	opacity: 0.9;
}
/* Only needs to darken enough to seam into the footer above and keep the
   wordmark legible — the carpet/vacuum photo is already very dark, so the
   previous near-opaque scrim was erasing it entirely. */
.tcc-footer__wordmark-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient( to bottom, rgba( 17, 17, 19, 0.88 ) 0%, rgba( 17, 17, 19, 0.35 ) 32%, rgba( 17, 17, 19, 0.15 ) 100% );
}
.tcc-footer__wordmark {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: clamp( 90px, 12vw, 190px ) var( --gutter ) clamp( 28px, 3.5vw, 56px );
}
.tcc-footer__wordmark span {
	display: block;
	font-family: var( --font-display );
	font-weight: var( --weight-bold );
	font-size: clamp( 30px, 7.8vw, 128px );
	line-height: 0.92;
	white-space: nowrap;
	background: linear-gradient( 180deg, #ffffff 38%, rgba( 255, 255, 255, 0.06 ) 97% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@media ( max-width: 991px ) {
	.tcc-footer__grid {
		grid-template-columns: repeat( 3, 1fr );
	}
	.tcc-footer__col--about {
		grid-column: 1 / -1;
		max-width: none;
	}
	.tcc-footer__legal {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}
@media ( max-width: 640px ) {
	.tcc-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------------------------------------------------------------------
 * Fallback loop (index.php) — minimal styling until build phase 4's blog
 * templates take over post-related views.
 * ------------------------------------------------------------------- */
.tcc-fallback-article + .tcc-fallback-article {
	margin-top: var( --space-lg );
	padding-top: var( --space-lg );
	border-top: var( --elevation-hairline );
}