/*
 * client.css — markhooper.cirrusvps.info
 * Front-end theme for Mark Hooper Tree Care on Hydra.
 * Lives at the document root (outside hydra/) so the updater never touches it.
 *
 * Brand: modernised forest green, Fraunces (display serif) + Manrope (sans).
 */

:root {
	--brand:       #2E6F4E;   /* primary green (buttons, links, accents) */
	--brand-dark:  #1F4E37;   /* darker green (hovers) */
	--brand-light: #E8F2EB;   /* faint green tint (alt band bg) */
	--ink:         #16241C;   /* headings / strong text */
	--slate:       #37423C;   /* body text */
	--muted:       #667169;   /* secondary text */
	--deep:        #16281E;   /* dark sections: topbar, hero, footer */
	--btn-ink:     #ffffff;   /* text on solid green buttons */
	--line:        #e1e8e3;   /* hairlines */
	--bg:          #ffffff;
	--bg-alt:      #f5f8f5;
	--maxw:        1180px;
	--radius:      12px;
	--shadow:      0 6px 24px rgba(22,36,28,.08);
	--font-display: "Fraunces", Georgia, serif;
	--font:         "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Reset / base ─────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65;
	color: var(--slate); background: var(--bg);
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.15; color: var(--ink); margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2.1rem, 1.7rem + 2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.35rem + 1.2vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
.lead { font-size: 1.15rem; color: var(--slate); }
.lead.center { max-width: 720px; margin-inline: auto; text-align: center; }
.muted { color: var(--muted); font-size: .95rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: #fff; padding: .6rem 1rem; z-index: 200; border-radius: 8px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
	display: inline-block; background: var(--brand); color: var(--btn-ink);
	padding: .65rem 1.4rem; border-radius: 8px; font-weight: 600; font-size: .9375rem;
	text-decoration: none; border: 1px solid var(--brand); transition: background .2s, border-color .2s, color .2s;
	text-align: center;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; text-decoration: none; }
.btn.sm { padding: .5rem 1.1rem; font-size: .875rem; }
.btn.lg { padding: .85rem 1.8rem; font-size: 1rem; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.btn.white { background: #fff; color: var(--deep); border-color: #fff; }
.btn.white:hover { background: transparent; color: #fff; border-color: #fff; }

/* ── Top utility bar (phone) ──────────────────────────────────────────────── */
.topbar { background: var(--deep); color: rgba(255,255,255,.9); font-size: .85rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; flex-wrap: wrap; }
.tb-links { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.tb-phone { color: #fff; font-weight: 700; }
.tb-phone:hover { color: var(--brand-light); text-decoration: none; }
.tb-email { color: rgba(255,255,255,.85); }
.tb-email:hover { color: var(--brand-light); text-decoration: none; }
.tb-note { color: rgba(255,255,255,.7); }

/* ── Header / nav ─────────────────────────────────────────────────────────── */
/* Frosted glass bar, always on — black tint, opaque enough to read as black
   over any backdrop (video or plain page content) but not fully solid, so
   the blur is genuinely visible (formula adapted from fivevalleyresidences.com's
   .hero-bar: dark rgba + heavy blur + a hairline top-edge highlight). */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(3,3,3,.82);
	backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%);
	border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header { background: rgba(3,3,3,.95); }
}

/* On the homepage the hero is pulled up by the header's height so the video
   renders underneath it (letting it show blurred through the frost), and
   shrunk by the topbar's height so topbar + hero still add up to exactly
   one viewport — the topbar itself stays untouched in normal flow (it must
   not be overlapped, or the video paints over it) and the bottom hero-bar
   lands flush with the bottom of the screen. The topbar can wrap to two
   lines on some widths, so both heights are measured and set by client.js
   rather than hardcoded here. */
body.is-home .hero {
	margin-top: calc(-1 * var(--header-h, 76px));
	height: calc(100vh - var(--topbar-h, 40px));
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.brand { display: inline-flex; align-items: center; }
.brand:hover { text-decoration: none; }
.brand img { height: 42px; width: auto; }

.site-nav { flex: 1; }
.site-nav ul { list-style: none; display: flex; align-items: center; justify-content: flex-end; gap: .25rem; margin: 0; padding: 0; }
.site-nav a { color: rgba(255,255,255,.85); font-weight: 500; font-size: .92rem; padding: .3rem .85rem; display: inline-block; }
.site-nav a:not(.btn) { border-bottom: 2px solid transparent; }
.site-nav a:not(.btn):hover { border-bottom-color: var(--brand-light); color: #fff; text-decoration: none; }
.site-nav li.active > a { border-bottom-color: var(--brand-light); color: #fff; }

.has-sub { position: relative; }
.has-sub > a::after {
	content: ''; display: inline-block; width: 6px; height: 6px; margin-left: .4em; vertical-align: middle;
	border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg) translateY(-3px); opacity: .7;
}
.sub {
	position: absolute; left: 0; top: 100%; min-width: 260px;
	padding: .6rem 0; margin-top: .5rem; display: block;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s, transform .15s, visibility .15s;
}
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.sub li { width: 100%; }
.sub a { display: block; padding: .55rem 1.3rem; border-bottom: 0 !important; color: var(--slate); }
.sub a:hover { background: var(--bg-alt); color: var(--brand-dark); text-decoration: none; }

.cta-li { margin-left: .3rem; }

/* mobile burger (CSS-only via checkbox) */
.navtoggle, .navburger { display: none; }
.navburger { cursor: pointer; width: 44px; height: 40px; flex-direction: column; justify-content: center; gap: 5px; }
.navburger span { display: block; height: 3px; background: #fff; border-radius: 3px; }

/* ── Bands / sections ─────────────────────────────────────────────────────── */
.band { padding: 4rem 0; }
.band.alt { background: var(--bg-alt); }
.page-hero { background: var(--bg-alt); padding: 3rem 0; border-bottom: 1px solid var(--line); }

/* hero (home) — full-viewport looping video, no overlaid text (matches the original site's clean video banner) */
.hero { position: relative; overflow: hidden; height: 100vh; min-height: 600px; background: var(--deep); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* scroll-down indicator, bottom right of the hero, sat above the hero-bar (fivevalleyresidences.com pattern) */
.hero-scroll {
	position: absolute; bottom: 7rem; right: 2.5rem; z-index: 2;
	display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.hero-scroll span {
	font-size: .62rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
	color: rgba(255,255,255,.65); writing-mode: vertical-rl;
}
.hero-scroll .scroll-line { width: 1px; height: 46px; background: rgba(255,255,255,.45); animation: scrollPulse 2s infinite; }
@keyframes scrollPulse {
	0%, 100% { transform: scaleY(1); opacity: .7; }
	50% { transform: scaleY(.5); opacity: .25; }
}

/* frosted bar, logo + tagline, pinned to the bottom of the hero video
   (same formula as the header: black tint, heavy blur, hairline edge —
   adapted from fivevalleyresidences.com's .hero-bar) */
.hero-bar {
	position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
	background: rgba(3,3,3,.5);
	backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%);
	border-top: 1px solid rgba(255,255,255,.1);
	padding: 1.4rem clamp(1.25rem, 4vw, 3rem);
	display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap;
}
.hero-bar-logo { height: 40px; width: auto; flex-shrink: 0; }
.hero-bar-divider { width: 1px; height: 28px; background: rgba(255,255,255,.25); flex-shrink: 0; }
.hero-bar-tagline {
	margin: 0; font-family: var(--font-display); font-weight: 500;
	font-size: clamp(.95rem, 1.6vw, 1.15rem); color: rgba(255,255,255,.92);
}

/* intro copy — sits below the video in its own plain band, not stacked on top of it */
.intro-band { padding: 4rem 0 3.5rem; }
.intro-inner { max-width: 760px; margin-inline: auto; text-align: center; }
.intro-inner .btn.lg { margin-top: .5rem; }

/* ── Trusted-by-Forestry-England band — a dedicated, prominent section ──────── */
.trust-band { background: var(--brand-light); padding: 3.5rem 0; }
.trust-band-inner {
	display: flex; align-items: center; justify-content: center; gap: 2.5rem;
	max-width: 780px; margin-inline: auto; text-align: left;
}
.trust-band-logo { height: 110px; width: auto; flex-shrink: 0; }
.trust-band-copy h2 { margin-bottom: .4rem; }
.trust-band-copy p { margin: 0; color: var(--slate); font-size: 1.05rem; }

/* ── Accreditations / affiliations band ──────────────────────────────────── */
.accreditations-band { background: var(--bg-alt); padding: 2.4rem 0; border-bottom: 1px solid var(--line); }
.accreditations-label {
	text-align: center; color: var(--muted); font-size: .82rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .07em; margin-bottom: 1.3rem;
}
.accreditations-logos { display: flex; align-items: center; justify-content: center; gap: 2.75rem; flex-wrap: wrap; }
.accreditations-logos img { height: 54px; width: auto; max-width: 150px; object-fit: contain; }

.section-title { text-align: center; margin-bottom: .3em; }
.band > .wrap > .section-title,
.li-header .section-title { text-align: left; }
.band .wrap > .section-title:only-of-type,
section.band:not(.alt):not(.cta-band) > .wrap > .section-title { text-align: center; }

/* ── Service cards ────────────────────────────────────────────────────────── */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem; }
.service-card {
	display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow);
	transition: transform .15s, box-shadow .15s; text-decoration: none; color: inherit;
}
.service-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(22,36,28,.14); text-decoration: none; }
.service-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.service-card p { color: var(--muted); font-size: .95rem; margin-bottom: 1rem; flex: 1; }
.read-more { color: var(--brand-dark); font-weight: 700; font-size: .85rem; }

/* ── News / blog cards ────────────────────────────────────────────────────── */
.li-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.cards.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.card {
	display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1.4rem; box-shadow: var(--shadow); color: inherit; text-decoration: none;
	transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(22,36,28,.14); text-decoration: none; }
.card h3 { font-size: 1.05rem; margin: .3rem 0 .5rem; }
.card p:not(.muted) { color: var(--muted); font-size: .92rem; }

/* ── CTA band ─────────────────────────────────────────────────────────────── */
.cta-band { background: var(--deep); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 640px; margin-inline: auto 1.6rem; }
.cta-inner { display: flex; flex-direction: column; align-items: center; }

/* ── Prose (rendered content_html on non-home pages) ─────────────────────── */
.prose { max-width: 760px; margin-inline: auto; }
.prose h1 { margin-bottom: .6rem; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; }
.prose p { color: var(--slate); }
.prose ul, .prose ol { margin: 0 0 1rem 1.4rem; color: var(--slate); }
.prose li { margin-bottom: .4rem; }
.prose a { color: var(--brand-dark); text-decoration: underline; }
.prose .services-grid { margin-top: 2.5rem; }

/* ── News pagination ──────────────────────────────────────────────────────── */
.blog-pager { margin-top: 2.5rem; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer { background: var(--deep); color: rgba(255,255,255,.75); padding-top: 3.5rem; border-top: 4px solid var(--brand); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 2rem; padding-bottom: 2.5rem; }
.site-footer h4 { color: #fff; font-family: var(--font); font-size: 1rem; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: var(--brand-light); }
.foot-logo { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: #fff; margin-bottom: .8rem; }
.foot-logo span { color: var(--brand-light); }
.foot-brand p:not(.foot-logo) { font-size: .92rem; max-width: 38ch; color: rgba(255,255,255,.7); }
.foot-contact p { margin-bottom: .5rem; }
.foot-contact a { font-weight: 700; color: #fff; }
.footer-bar { border-top: 1px solid rgba(255,255,255,.14); padding: 1.4rem 0 1.8rem; font-size: .88rem; }
.footer-bar p { margin: 0; color: rgba(255,255,255,.65); }

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.page-hero h1 { margin-bottom: .4em; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.services-grid, .cards.news { grid-template-columns: repeat(2, 1fr); }
	.footer-grid { grid-template-columns: 1fr 1fr; }

	.navburger { display: flex; }
	.site-nav {
		position: fixed; inset: 76px 0 auto 0; background: #fff; border-bottom: 1px solid var(--line);
		max-height: 0; overflow: hidden; transition: max-height .25s ease; box-shadow: var(--shadow);
	}
	.navtoggle:checked ~ .site-nav { max-height: 90vh; overflow: auto; }
	.site-nav ul { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: .5rem 1rem 1.5rem; }
	.site-nav > ul > li { border-bottom: 1px solid var(--line); }
	.site-nav a { color: var(--slate); }
	.site-nav a:not(.btn):hover { color: var(--ink); border-bottom-color: var(--brand); }
	.site-nav li.active > a { border-bottom-color: transparent; color: var(--ink); }
	.sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; margin: 0; padding: 0 0 .5rem 1rem; background: transparent; }
	.sub a { padding: .4rem .5rem; }
	.has-sub > a::after { display: none; }
	.cta-li { margin: .8rem 0 0; }
}
@media (max-width: 640px) {
	.services-grid, .cards.news, .footer-grid { grid-template-columns: 1fr; }
	.band { padding: 3rem 0; }
	.hero { height: 100vh; min-height: 480px; }
	.hero-scroll { bottom: 6rem; right: 1.25rem; }
	.hero-scroll .scroll-line { height: 34px; }
	.hero-bar { flex-direction: column; text-align: center; gap: .6rem; padding: 1.1rem 1.25rem; }
	.hero-bar-divider { display: none; }
	.hero-bar-logo { height: 34px; }
	.topbar-inner { justify-content: center; text-align: center; }
	.trust-band-inner { flex-direction: column; text-align: center; gap: 1.25rem; }
	.trust-band-logo { height: 84px; }
	.accreditations-logos { gap: 1.75rem; }
	.accreditations-logos img { height: 42px; }
}