/**
 * Tree Plast brand theme layer
 * Applies Brand Guideline identity on top of existing layouts.
 * Load AFTER component CSS. Does not change structure/animations.
 */

/* Re-assert tokens last so component :root blocks cannot override brand. */
:root {
	--token-298644eb-3fe0-49aa-b8cb-c3344e3ab8d7: #151515;
	--token-4ee3acd3-c018-4be0-998c-2fa74728fc08: #f7f6f2;
	--token-a57d3b9c-0f65-42ac-b59d-88929fbad5a0: #c9b89a;
	--token-cb2982f0-838d-4452-9b5d-5a4f2ff7e5a2: #ffffff;

	--tk-hdr-ink: #151515;
	--tk-hdr-ink-soft: #151515;
	--tk-hdr-mute: #6b6b65;
	--tk-hdr-mute-soft: #b0a07e;
	--tk-hdr-fog: #f7f6f2;
	--tk-hdr-mist: #c9b89a;
	--tk-hdr-white: #ffffff;
	--tk-hdr-invert-dark: #151515;
	--tk-hdr-invert-light: #f7f6f2;
	--tk-hdr-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--tk-hero-ink: #081219;
	--tk-hero-fog: #f7f6f2;
	--tk-hero-mist: #003b26;
	--tk-hero-display: "General Sans", "Clash Display", sans-serif;
	--tk-hero-ui: "General Sans", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--tk-ft-navy: #151515;
	--tk-ft-fog: #f7f6f2;
	--tk-ft-mist: #c9b89a;
	--tk-ft-ink: #151515;
	--tk-ft-link: #c9b89a;
	--tk-ft-font: "Freight Display", Georgia, serif;
	--tk-ft-font-btn: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Base document ── */
html {
	color: var(--color-text-primary);
	background-color: var(--color-background);
}

body {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	color: var(--color-text-primary);
	background-color: var(--color-background);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading,
.tk-hdr__overlay-brand-text,
.tk-hdr__menu-link,
.tk-hdr__submenu-link,
.tk-ft__brand-text,
.tk-ft__col-title,
.tk-aboutpage__title,
.framer-text[class*="preset"] {
	font-family: var(--font-heading);
	font-weight: var(--fw-heading);
	color: inherit;
}

p,
.font-body,
.tk-hero__desc,
.har-rich {
	font-family: var(--font-body);
}

button,
input,
select,
textarea,
.font-ui,
.tk-hdr,
.tk-hdr__cta,
.tk-hdr__icon-btn,
.tk-hdr__brand-text,
.tk-hdr__social a,
.tk-hero__cta,
.tk-ft__cta,
label,
.tk-faq__badge,
nav a {
	font-family: var(--font-ui);
}

/* ── Links ── */
a {
	color: var(--color-primary);
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-primary-hover);
}

a:focus-visible {
	outline: 2px solid var(--color-border-focus);
	outline-offset: 2px;
}

/* ── Solid brand buttons (section CTAs / forms) — NOT the glass master ── */
.tk-ft__cta,
.tk-faq__cta,
.tk-projects__cta,
button[type="submit"],
.har-btn-primary,
.tk-contact-home__submit {
	background-color: var(--color-primary) !important;
	color: var(--color-text-on-primary) !important;
	border-radius: var(--radius-sm);
	border: 0;
	box-shadow: none;
	transition:
		background-color var(--transition-base),
		color var(--transition-base),
		transform var(--transition-fast),
		box-shadow var(--transition-base);
}

.tk-ft__cta:hover,
.tk-faq__cta:hover,
.tk-projects__cta:hover,
button[type="submit"]:hover,
.har-btn-primary:hover,
.tk-contact-home__submit:hover {
	background-color: var(--color-primary-hover) !important;
	color: var(--color-text-on-primary) !important;
}

.tk-faq__cta:active,
.tk-projects__cta:active,
button[type="submit"]:active {
	background-color: var(--brand-army-green-dark) !important;
	transform: translateY(0) scale(0.98);
}

.tk-faq__cta:focus-visible,
.tk-projects__cta:focus-visible,
button[type="submit"]:focus-visible {
	outline: 2px solid var(--color-border-focus);
	outline-offset: 2px;
}

/*
 * Shared glass chrome — header CTA + menu icon.
 * Hero CTAs use solid industrial styles in hero.css (no glass).
 */
.tk-hdr__cta--primary,
.tk-hdr__icon-btn,
.tk-hdr__icon-btn--on-light {
	background: var(--glass-bg) !important;
	background-color: var(--glass-bg) !important;
	color: var(--glass-fg) !important;
	border: 1px solid var(--glass-border) !important;
	border-radius: var(--glass-radius) !important;
	box-shadow: var(--glass-shadow) !important;
	-webkit-backdrop-filter: blur(var(--glass-blur)) !important;
	backdrop-filter: blur(var(--glass-blur)) !important;
	transition:
		transform var(--glass-duration) var(--glass-ease),
		background-color var(--tk-hdr-invert-duration, var(--glass-color-duration)) ease,
		color var(--tk-hdr-invert-duration, var(--glass-color-duration)) ease,
		border-color var(--tk-hdr-invert-duration, var(--glass-color-duration)) ease,
		opacity var(--tk-hdr-invert-duration, var(--glass-color-duration)) ease,
		box-shadow var(--tk-hdr-invert-duration, var(--glass-color-duration)) ease,
		padding var(--glass-duration) var(--glass-ease),
		gap var(--glass-duration) var(--glass-ease),
		--tk-hdr-border-b var(--glass-duration) var(--glass-ease),
		--tk-hdr-border-c var(--glass-duration) var(--glass-ease),
		-webkit-backdrop-filter var(--tk-hdr-invert-duration, var(--glass-color-duration)) ease,
		backdrop-filter var(--tk-hdr-invert-duration, var(--glass-color-duration)) ease;
}

.tk-hdr__cta--primary:hover,
.tk-hdr__icon-btn:hover,
.tk-hdr__icon-btn--on-light:hover {
	background: var(--glass-bg-hover) !important;
	background-color: var(--glass-bg-hover) !important;
	color: var(--glass-fg) !important;
	border-color: var(--glass-border) !important;
	box-shadow: var(--glass-shadow-hover) !important;
	transform: translateY(-1px);
	--tk-hdr-border-c: var(--glass-border);
}

.tk-hdr__cta--primary:active,
.tk-hdr__icon-btn:active,
.tk-hdr__icon-btn--on-light:active {
	background: var(--glass-bg-active) !important;
	background-color: var(--glass-bg-active) !important;
	color: var(--glass-fg) !important;
	transform: translateY(0) scale(0.98);
	--tk-hdr-border-c: var(--glass-border);
}

.tk-hdr__cta--primary:focus-visible,
.tk-hdr__icon-btn:focus-visible {
	outline: 2px solid var(--glass-border);
	outline-offset: 2px;
}

/*
 * Overlay dropdown items (Home, About, Properties, Contact Us, Blog, …)
 * Restore original clean text — no glass material.
 * Layout / type / hover underline / enter motion remain in header.css.
 */
.tk-hdr__menu-link,
.tk-hdr__menu-link:hover,
.tk-hdr__menu-link:focus-visible,
.tk-hdr__menu-link:active,
.tk-hdr__menu-item.current-menu-item > .tk-hdr__menu-link,
.tk-hdr__menu-item.current-menu-ancestor > .tk-hdr__menu-link,
.tk-hdr__submenu-link,
.tk-hdr__submenu-link:hover,
.tk-hdr__submenu-link:focus-visible,
.tk-hdr__submenu-link:active,
.tk-hdr__submenu .current-menu-item > .tk-hdr__submenu-link {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	transform: none !important;
}

.tk-hdr__menu-link {
	color: var(--tk-hdr-ink) !important;
}

.tk-hdr__submenu-link {
	color: var(--tk-hdr-mute) !important;
}

.tk-hdr__menu-link:hover,
.tk-hdr__menu-link:focus-visible,
.tk-hdr__menu-item.current-menu-item > .tk-hdr__menu-link,
.tk-hdr__menu-item.current-menu-ancestor > .tk-hdr__menu-link,
.tk-hdr__submenu-link:hover,
.tk-hdr__submenu-link:focus-visible,
.tk-hdr__submenu .current-menu-item > .tk-hdr__submenu-link {
	color: var(--glass-accent, var(--tk-hdr-mist)) !important;
	background: transparent !important;
	box-shadow: none !important;
	--tk-hdr-border-c: var(--glass-border, var(--tk-hdr-mist));
}

/* Overlay backdrop — same glass material */
.tk-hdr__overlay-bg {
	background: var(--glass-bg) !important;
	-webkit-backdrop-filter: blur(var(--glass-blur)) !important;
	backdrop-filter: blur(var(--glass-blur)) !important;
	border: 0;
}

.tk-hdr__overlay-brand-text,
.tk-hdr__brand-text {
	display: none !important;
}

.tk-hdr__social a {
	color: var(--glass-fg) !important;
}

.tk-hdr__social a:hover {
	color: var(--glass-accent) !important;
}

/* ── Header / invert brand text + glass token remap ── */
.tk-hdr__brand-text,
.tk-hdr [data-tk-hdr-brand] {
	color: var(--tk-hdr-invert, var(--color-ink));
	font-family: var(--font-heading);
}

/* Over dark sections (hero / top) — Our Services glass (light-on-dark) */
.tk-hdr.is-invert-light {
	--tk-hdr-invert: var(--brand-cream);
	--glass-bg: var(--glass-bg-on-dark);
	--glass-bg-hover: var(--glass-bg-hover-on-dark);
	--glass-bg-active: var(--glass-bg-active-on-dark);
	--glass-fg: var(--glass-fg-on-dark);
	--glass-fg-muted: var(--glass-fg-muted-on-dark);
	--glass-border: var(--glass-border-on-dark);
	--glass-accent: var(--glass-accent-on-dark);
	--glass-accent-hover: var(--glass-accent-hover-on-dark);
}

/* Over light sections (scrolled sticky) — readable dark-on-light glass twin */
.tk-hdr.is-invert-dark {
	--tk-hdr-invert: var(--brand-onyx);
	--glass-bg: var(--glass-bg-on-light);
	--glass-bg-hover: var(--glass-bg-hover-on-light);
	--glass-bg-active: var(--glass-bg-active-on-light);
	--glass-fg: var(--glass-fg-on-light);
	--glass-fg-muted: var(--glass-fg-muted-on-light);
	--glass-border: var(--glass-border-on-light);
	--glass-accent: var(--glass-accent-on-light);
	--glass-accent-hover: var(--glass-accent-hover-on-light);
}

/*
 * Open + closing menu keep the cream overlay surface.
 * Must stay on .is-overlay-on (not only .is-open) or the bg snaps away
 * before the exit spring can play.
 */
.tk-hdr.is-open .tk-hdr__overlay-bg,
.tk-hdr.is-overlay-on .tk-hdr__overlay-bg {
	background: rgba(var(--brand-cream-rgb), 0.88) !important;
	-webkit-backdrop-filter: blur(var(--glass-blur)) !important;
	backdrop-filter: blur(var(--glass-blur)) !important;
}

.tk-hdr__menu-link,
.tk-hdr__submenu-link,
.tk-hdr__overlay-brand-text {
	font-family: var(--font-heading) !important;
}

.tk-hdr__social a {
	font-family: var(--font-ui) !important;
}

/* ── Hero (TREEPLAST — layout/type live in hero.css) ── */
.tk-hero {
	color: var(--color-text-on-dark);
}

.tk-hero__title {
	font-family: "General Sans", "Clash Display", var(--font-heading), sans-serif !important;
	font-weight: 700 !important;
	color: #ffffff !important;
}

.tk-hero__desc {
	font-family: "General Sans", var(--font-ui), sans-serif !important;
	color: rgba(255, 255, 255, 0.85) !important;
}

.tk-hero__cta--primary {
	/* Exact TREEPLAST logo green #003B26 */
	background: #003b26 !important;
	background-color: #003b26 !important;
	border: 1px solid #003b26 !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.tk-hero__cta--primary:hover {
	background: #0a4a34 !important;
	background-color: #0a4a34 !important;
	border-color: #0a4a34 !important;
	color: #ffffff !important;
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.26) !important;
	transform: translateY(-2px);
}

.tk-hero__cta--ghost {
	background: transparent !important;
	background-color: transparent !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	border-radius: var(--radius-sm, 4px) !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.tk-hero__cta--ghost:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.85) !important;
	color: #ffffff !important;
	transform: translateY(-2px);
}

/* ── Footer ── */
.tk-ft {
	--tk-ft-navy: var(--brand-onyx);
	--tk-ft-fog: var(--brand-cream);
	--tk-ft-mist: var(--brand-sand);
	--tk-ft-ink: var(--brand-onyx);
	--tk-ft-link: var(--brand-sand);
	--tk-ft-font: var(--font-heading);
	--tk-ft-font-btn: var(--font-ui);
	background: var(--color-footer-bg) !important;
	color: var(--color-footer-fg);
}

.tk-ft a {
	color: var(--brand-sand);
}

.tk-ft a:hover {
	color: var(--brand-sand-light);
}

.tk-ft__cta {
	background: var(--color-primary) !important;
	color: var(--color-text-on-primary) !important;
}

/* ── Forms ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select,
.tk-contact-home input,
.tk-contact-home textarea,
.har-form input,
.har-form textarea,
.har-form select {
	font-family: var(--font-ui);
	color: var(--color-text-primary);
	background-color: var(--color-surface);
	border-color: var(--color-border);
	border-radius: var(--radius-sm);
	transition:
		border-color var(--transition-fast),
		box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus,
.tk-contact-home input:focus,
.tk-contact-home textarea:focus {
	border-color: var(--color-border-focus) !important;
	outline: none;
	box-shadow: 0 0 0 3px var(--color-primary-muted);
}

input::placeholder,
textarea::placeholder {
	color: var(--color-text-muted);
}

/* ── FAQ / cards / sections ── */
.tk-faq__badge,
.tk-faq__title,
.tk-faq__desc,
.tk-faq__item {
	font-family: inherit;
}

.tk-faq__title {
	font-family: var(--font-heading) !important;
	color: var(--color-ink) !important;
}

.tk-faq__badge {
	font-family: var(--font-ui) !important;
	color: var(--color-primary) !important;
}

.tk-faq__cta,
.tk-projects__cta {
	background: var(--color-primary) !important;
	color: var(--color-text-on-primary) !important;
}

/* Soft sand/army accents for mist lines / dividers used in Marby sections */
.tk-faq [style*="rgb(213, 213, 219)"],
.tk-aboutpage [style*="rgb(213, 213, 219)"] {
	/* inline leftovers handled via Framer token remap */
}

/* ── Page shells (about / properties / blog / contact) ── */
.tk-aboutpage,
.tk-properties,
.tk-blogpage,
.tk-contactpage,
.har-page {
	font-family: var(--font-body);
	color: var(--color-text-primary);
	background-color: var(--color-background);
}

.tk-aboutpage h1,
.tk-aboutpage h2,
.tk-aboutpage h3,
.tk-properties h1,
.tk-properties h2,
.tk-properties h3,
.tk-blogpage h1,
.tk-blogpage h2,
.tk-blogpage h3,
.tk-contactpage h1,
.tk-contactpage h2,
.tk-contactpage h3 {
	font-family: var(--font-heading);
	color: var(--color-ink);
}

/* ── Loading / disabled ── */
[aria-busy="true"],
.is-loading,
.har-loading {
	opacity: 0.65;
	pointer-events: none;
	cursor: wait;
}

:disabled,
[disabled],
.is-disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}

/* ── Focus ring default ── */
:focus-visible {
	outline: 2px solid var(--color-border-focus);
	outline-offset: 2px;
}

/* ── Selection ── */
::selection {
	background: rgba(var(--brand-army-green-rgb), 0.28);
	color: var(--brand-onyx);
}

@media (prefers-reduced-motion: reduce) {
	.tk-hdr__cta--primary,
	.tk-hero__cta--primary,
	.tk-hero__cta--ghost,
	.tk-faq__cta,
	.tk-projects__cta,
	.tk-hdr__icon-btn,
	button[type="submit"] {
		transition: none !important;
	}
}