/* =========================================================================
   Trailscape — custom design layer
   Loaded on top of theme.json. Walk, Create, Navigate.
   ========================================================================= */

:root {
	--ts-shadow: 0 1px 2px rgba(27, 44, 35, 0.04), 0 12px 30px -12px rgba(27, 44, 35, 0.18);
	--ts-shadow-lift: 0 2px 4px rgba(27, 44, 35, 0.06), 0 22px 48px -16px rgba(27, 44, 35, 0.26);
	--ts-ridge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L0 78 L150 40 L320 92 L470 46 L640 96 L820 34 L1000 88 L1200 52 L1200 120 Z' fill='%232C4A3B' fill-opacity='0.10'/%3E%3Cpath d='M0 120 L0 96 L190 62 L360 104 L540 70 L720 108 L900 66 L1080 100 L1200 78 L1200 120 Z' fill='%232C4A3B' fill-opacity='0.16'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }

.wp-site-blocks { overflow-x: clip; }

/* Drop the root block-gap above <main> so page content sits flush under the header */
.wp-site-blocks > main { margin-block-start: 0 !important; }

/* --- Rich body copy rhythm ------------------------------------------------ */
p { max-width: 68ch; }
.has-text-align-center p { margin-left: auto; margin-right: auto; }

/* --- Eyebrow / kicker label ---------------------------------------------- */
.ts-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--wp--preset--color--gold);
	margin-bottom: 0.35rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.ts-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: currentColor;
	display: inline-block;
}
.has-text-align-center .ts-eyebrow,
.ts-eyebrow.has-text-align-center { justify-content: center; }
.ts-eyebrow--muted { color: var(--wp--preset--color--forest); }

/* --- Header --------------------------------------------------------------- */
.ts-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* NB: no backdrop-filter/filter/transform here — those make the header a
	   containing block for the mobile nav overlay (position:fixed) and trap it. */
	background: rgba(251, 250, 245, 0.94);
	border-bottom: 1px solid rgba(27, 44, 35, 0.09);
	padding-left: clamp(1.25rem, 5vw, 3rem);
	padding-right: clamp(1.25rem, 5vw, 3rem);
	padding-top: 2.85rem;
	padding-bottom: 2.85rem;
}
/* Full-width row, capped and centred — avoids alignwide shrink in nested constrained layouts */
.ts-header__row {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	gap: 1rem;
}
.ts-nav-wrap { gap: 1.75rem; }
.ts-header .wp-block-site-logo { width: 315px; }

/* Compact header + smaller logo on mobile so logo + CTA + toggle all fit */
@media (max-width: 782px) {
	.ts-header { padding-top: 1.15rem; padding-bottom: 1.15rem; }
	.ts-header .wp-block-site-logo { width: 165px !important; }
	.ts-header .wp-block-site-logo img { width: 165px !important; height: auto !important; }
	.ts-nav-wrap { gap: 1rem; }
}
@media (max-width: 400px) {
	.ts-header .wp-block-site-logo,
	.ts-header .wp-block-site-logo img { width: 140px !important; }
}
.ts-header .wp-block-site-logo img { transition: transform 0.3s ease; }
.ts-header .wp-block-site-logo:hover img { transform: scale(1.03); }

.ts-nav {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.01em;
}
.ts-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	padding-block: 0.4rem;
	position: relative;
}
.ts-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.28s ease;
}
.ts-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.ts-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after { transform: scaleX(1); }

/* mobile hamburger + close toggles — force brand-ink colour and clear size */
.ts-header .wp-block-navigation__responsive-container-open,
.ts-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
}
.ts-header .wp-block-navigation__responsive-container-open svg,
.ts-header .wp-block-navigation__responsive-container-close svg {
	fill: currentColor;
	width: 30px;
	height: 30px;
}

/* mobile overlay — override core's #fff background (higher specificity) */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--wp--preset--color--forest-deep) !important;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: #fff !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
/* Left-align overlay items (desktop right-justify shouldn't bleed into the overlay) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 0.75rem;
	padding-left: 0.5rem;
}

/* --- Hero ----------------------------------------------------------------- */
.ts-hero { color: #fff; }
/* Align hero text with the site's 1180 content column (not the screen edge).
   Pad the inner container so its content edge lands on the centred 1180 line,
   falling back to root padding on narrower viewports. */
.ts-hero .wp-block-cover__inner-container {
	padding-left: max(var(--wp--style--root--padding-left), calc((100% - 1180px) / 2)) !important;
	padding-right: max(var(--wp--style--root--padding-right), calc((100% - 1180px) / 2)) !important;
}
.ts-hero .ts-eyebrow { color: var(--wp--preset--color--gold); }
.ts-hero h1, .ts-hero h2 { color: #fff; }
.ts-hero .wp-block-cover__inner-container { width: 100%; }
.ts-hero__lede { font-size: 1.15rem; color: rgba(255, 255, 255, 0.92); }
.ts-hero__meta {
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.82);
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	padding-top: 1rem;
	max-width: none;
}

/* Slim page header (no photo) */
.ts-pagehead { position: relative; }
.ts-pagehead::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 90px;
	background: var(--ts-ridge) repeat-x bottom / 1200px 120px;
	pointer-events: none;
}

/* --- Display flourish ----------------------------------------------------- */
.ts-display-italic em,
.ts-display-italic { font-style: italic; }
.ts-lead { font-size: 1.2rem; line-height: 1.6; }

/* --- Tagline band --------------------------------------------------------- */
.ts-band em { font-style: italic; }

/* --- Photography placeholders / framed images ---------------------------- */
.ts-photo {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient(150deg, var(--wp--preset--color--gold-soft) 0%, var(--wp--preset--color--sage) 70%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--ts-shadow);
	isolation: isolate;
}
.ts-photo::before {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 55%;
	background: var(--ts-ridge) repeat-x bottom / 1200px 120px;
	background-size: 900px 130px;
	opacity: 0.9;
	z-index: -1;
}
.ts-photo__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--forest);
	background: rgba(251, 250, 245, 0.72);
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	margin: 0;
	max-width: 80%;
	text-align: center;
	backdrop-filter: blur(2px);
}
.ts-photo--tall { aspect-ratio: 3 / 4; }
.ts-photo--wide { aspect-ratio: 16 / 9; }
.ts-photo--square { aspect-ratio: 1 / 1; }

/* Real images: soft rounding + shadow when marked */
.ts-round img { border-radius: 16px; box-shadow: var(--ts-shadow); }

/* --- Cards ---------------------------------------------------------------- */
.is-style-ts-card {
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(27, 44, 35, 0.08);
	border-radius: 18px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--ts-shadow);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	height: 100%;
}
.ts-card-grid .is-style-ts-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--ts-shadow-lift);
	border-color: rgba(224, 161, 27, 0.5);
}
.is-style-ts-card .ts-card__index {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	color: var(--wp--preset--color--gold);
	font-weight: 600;
}

/* Course "spec" card (detailed) */
.ts-course { scroll-margin-top: 100px; }
.ts-course h3 { margin-bottom: 0.35rem; }
.ts-course__tag {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--forest);
	background: var(--wp--preset--color--sage);
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	margin-bottom: 0.75rem;
}
.ts-meta-strong { font-weight: 600; color: var(--wp--preset--color--ink); }

/* --- Checklists ----------------------------------------------------------- */
.is-style-ts-check { list-style: none; padding-left: 0; margin-left: 0; }
.is-style-ts-check li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.7rem;
	max-width: 60ch;
}
.is-style-ts-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232C4A3B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}

/* --- Buttons -------------------------------------------------------------- */
.wp-block-button__link { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); }

.is-style-ts-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--forest);
	border: 1.5px solid var(--wp--preset--color--forest);
}
.is-style-ts-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--forest);
	color: #fff;
}
.is-style-ts-ghost-light .wp-block-button__link {
	background: rgba(255, 255, 255, 0.10);
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.is-style-ts-ghost-light .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--ink);
	border-color: #fff;
}

/* --- Contact details list ------------------------------------------------- */
.ts-contact-item { border-top: 1px solid rgba(27, 44, 35, 0.10); padding-top: 1.25rem; }
.ts-contact-item h4 { margin: 0 0 0.25rem; color: var(--wp--preset--color--forest); }
.ts-contact-item a { font-weight: 600; }

/* --- Footer --------------------------------------------------------------- */
.ts-footer { color: rgba(255, 255, 255, 0.82); }
.ts-footer h2, .ts-footer h3, .ts-footer h4 { color: #fff; }
.ts-footer a { color: rgba(255, 255, 255, 0.82); }
.ts-footer a:hover { color: var(--wp--preset--color--gold); }
.ts-footer__brand {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.9rem;
	letter-spacing: 0.01em;
	color: #fff;
}
.ts-footer__brand .ts-pin { color: var(--wp--preset--color--gold); }
.ts-footer__nav { list-style: none; padding: 0; margin: 0; }
.ts-footer__nav li { margin-bottom: 0.5rem; }
.ts-footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); }
.ts-footer__legal a { color: rgba(255, 255, 255, 0.75); }

/* --- Gravity Forms — brand styling --------------------------------------- */
.gform_wrapper.gravity-theme .gform_fields { gap: 1.1rem 1.25rem; }
.gform_wrapper .gfield_label {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--ink);
	margin-bottom: 0.35rem;
}
.gform_wrapper .ginput_container input,
.gform_wrapper .ginput_container textarea,
.gform_wrapper .ginput_container select {
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1.5px solid rgba(27, 44, 35, 0.16) !important;
	border-radius: 10px !important;
	padding: 0.8rem 1rem !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gform_wrapper .ginput_container textarea { min-height: 150px; }
.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container textarea:focus,
.gform_wrapper .ginput_container select:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold) !important;
	box-shadow: 0 0 0 3px rgba(224, 161, 27, 0.18);
}
.gform_wrapper .gfield_required { color: var(--wp--preset--color--rust); }
.gform_wrapper .gform_footer { margin-top: 1.25rem; padding: 0; }
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform-button {
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink) !important;
	background: var(--wp--preset--color--gold) !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 0.95rem 2rem !important;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform-button:hover {
	background: var(--wp--preset--color--forest) !important;
	color: #fff !important;
	transform: translateY(-2px);
}
.gform_confirmation_message {
	background: var(--wp--preset--color--sage);
	border-left: 4px solid var(--wp--preset--color--forest);
	padding: 1.25rem 1.5rem;
	border-radius: 10px;
	font-size: 1.05rem;
}

/* --- Small screens -------------------------------------------------------- */
@media (max-width: 781px) {
	.ts-hero__meta { font-size: 0.8rem; }
	.ts-footer__brand { font-size: 1.6rem; }
	/* Keep the "Get in touch" CTA visible on mobile (it's the contact entry point), but compact */
	.ts-header-cta .wp-block-button__link { padding-left: 1rem; padding-right: 1rem; }
	.ts-hero .wp-block-buttons { flex-wrap: wrap; }
}

@media (max-width: 520px) {
	.ts-hero .wp-block-button { width: 100%; }
	.ts-hero .wp-block-button .wp-block-button__link { display: block; width: 100%; text-align: center; }
}