/* ==========================================================================
   From The Fields — main stylesheet
   ========================================================================== */

:root {
	/* Brand palette — sampled from the signed-off Figma design. */
	--ftf-amber:        #ffb438; /* announcement / accent gold */
	--ftf-amber-dark:   #e89e1c;
	--ftf-green:        #1d5236; /* mid forest green */
	--ftf-green-dark:   #0a2417;
	--ftf-green-light:  #e7f0e8;
	--ftf-cream:        #fcefcf;
	--ftf-night:        #00140f; /* deep green-black — dark sections, header, footer */
	--ftf-purple:      #5d1f60; /* "what to expect" feature band */
	--ftf-mint:         #00e1ab; /* primary CTA */
	--ftf-mint-dark:    #00c596;
	--ftf-ink:          #00140f;
	--ftf-muted:        #5f6b59;
	--ftf-border:       #e2e0d6;
	--ftf-white:        #ffffff;

	/* Header colours — overridable from Theme Settings → Header colours.
	   The PHP outputs an inline :root block redefining any of these that the
	   client sets; these lines are the fallback defaults. */
	--ftf-ticker-bg:      #C22EC8;
	--ftf-ticker-text:    var(--ftf-night);
	--ftf-nav-bar-bg:     var(--ftf-night);
	--ftf-nav-link:       #C22EC8;
	--ftf-nav-link-hover: var(--ftf-cream);

	--ftf-max:          1140px;
	--ftf-max-wide:     1320px;
	--ftf-max-narrow:   760px;

	--ftf-radius:       10px;
	--ftf-radius-pill:  25px;
	--ftf-shadow:       0 6px 24px rgba(0, 20, 15, 0.10);

	--ftf-font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ftf-font-head:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--ftf-font);
	color: var(--ftf-ink);
	background: var(--ftf-white);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ftf-green); }
a:hover { color: var(--ftf-green-dark); }

h1, h2, h3, h4 {
	font-family: var(--ftf-font-head);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--ftf-ink);
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); } /* ~40px in the design */
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em; }

/* ---------- Accessibility ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ftf-ink);
	color: #fff;
	padding: 0.75rem 1rem;
	z-index: 1000;
}
.skip-link:focus { left: 1rem; }

/* ---------- Layout containers ---------- */
.ftf-container {
	width: 100%;
	max-width: var(--ftf-max);
	margin-inline: auto;
	padding-inline: 1.25rem;
}
.ftf-container--wide   { max-width: var(--ftf-max-wide); }
.ftf-container--narrow { max-width: var(--ftf-max-narrow); }

/* ==========================================================================
   Header — amber ticker + dark-green split nav with centred logo
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* ---- Announcement ticker ---- */
.site-ticker {
	background: var(--ftf-ticker-bg);
	color: var(--ftf-ticker-text);
}
.site-ticker__text {
	margin: 0;
	padding-block: 0.7rem;
	text-align: center;
	font-weight: 800;
	font-size: clamp(1.05rem, 2vw, 1.6rem);
	letter-spacing: 0.01em;
}

/* ---- Nav bar ----
   In normal flow with a solid background. The whole .site-header is sticky
   (see above), so on scroll the header sticks to the top as one opaque unit and
   page content scrolls underneath it — rather than the old fixed, transparent
   bar that floated over and covered the content. */
.site-nav-bar {
	position: relative;
	z-index: 100;
	width: 100%;
	background: var(--ftf-nav-bar-bg);
}
.site-header__inner {
	display: flex;
	min-height: 104px;
	align-items: center;
	justify-content: space-between;
	padding-inline: clamp(1.25rem, 2.5vw, 2.5rem); /* full-bleed nav, small edge gutter */
}

/* Logo sits in the centre of the bar (flex spacing handles the centring — the
   left/right nav groups flex to equal width, see .site-nav--left/right). */
.site-header__inner a.site-nav-logo__link {
  display: inline-block;
}

.site-header__inner a img {
  max-width: 150px;
}

@media (max-width: 860px) {
  /* In-flow logo on mobile (no fixed overlay) so it sits inside the solid nav bar. */
  .site-header__inner a.site-nav-logo__link {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    right: auto;
  }

  .site-header__inner a img {
    max-width: 100px;
  }
}

.site-nav { display: flex; align-items: center; }
/* Equal-width groups either side push the centre logo to true centre. */
.site-nav--left, .site-nav--right { min-width: 0; }
/* Spread each group across its half so the outer items hug the edges. */
.site-nav__menu {
	list-style: none;
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem clamp(1rem, 2vw, 2rem);
	margin: 0;
	padding: 0;
}
.site-nav__link {
	text-decoration: none;
	color: var(--ftf-nav-link);
	font-weight: 800;
	font-size: clamp(0.95rem, 1.2vw, 1.35rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: color 0.15s ease;
}
.site-nav__link:hover { color: var(--ftf-nav-link-hover); }
/* Current page sits in the same purple as the rest of the menu rather than the
   cream highlight, so items like "Welcome" don't stand out in a different colour. */
.site-nav__item.is-current .site-nav__link { color: var(--ftf-nav-link); }

/* ---- Centre logo slot (kept reserved for the client's logo) ---- */
.site-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: clamp(120px, 14vw, 220px);
	text-decoration: none;
	padding-inline: 1rem;
}
.site-logo .custom-logo { max-height: 78px; width: auto; }

/* ---- Mobile ---- */
.nav-toggle {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	width: 44px; height: 44px;
	position: relative;
	justify-self: start;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	content: "";
	position: absolute;
	left: 10px;
	width: 24px; height: 2px;
	background: var(--ftf-nav-link);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle__bar { top: 21px; }
.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after  { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: translateY(-7px) rotate(-45deg); }

.site-nav-mobile { display: none; }
.site-nav-mobile__menu {
	list-style: none;
	margin: 0;
	padding: 0 1.25rem 0.5rem;
}

@media (max-width: 860px) {
	.site-header__inner { grid-template-columns: 44px 1fr 44px; min-height: 84px; }
	.site-nav--left, .site-nav--right { display: none; }
	.nav-toggle { display: block; }
	.site-logo { grid-column: 2; min-width: 0; }

	/*
	 * On mobile the header stacks in normal flow: ticker, then a solid nav bar,
	 * then the dropdown. This drops the desktop fixed-overlay offset (top: 60px)
	 * that assumed a 60px-tall ticker and collided with the taller, wrapping
	 * mobile ticker — which is what was obscuring the menu.
	 */
	.site-nav-bar {
		position: static;
		top: auto;
		background: var(--ftf-nav-bar-bg);
	}

	.site-nav-mobile { display: block; background: var(--ftf-nav-bar-bg); }
	.site-nav-mobile__menu { display: none; }
	.site-nav-mobile__menu.is-open { display: block; }
	.site-nav-mobile__menu .site-nav__item { border-top: 1px solid rgba(252, 239, 207, 0.15); }
	.site-nav-mobile__menu .site-nav__link { display: block; padding: 0.85rem 0; }
}

/* ==========================================================================
   Modules — shared
   ========================================================================== */
.ftf-module { position: relative; }
.pad-none   { padding-block: 0; }
.pad-small  { padding-block: 2rem; }
.pad-medium { padding-block: 4rem; }
.pad-large  { padding-block: 6rem; }

/* When a module has no heading, drop its top padding so a blank header doesn't
   leave a gap stacked on top of the previous section's bottom padding. Limited
   to plain (un-coloured) sections — coloured bands keep their padding so their
   content isn't flush to the top edge. The previous section's bottom padding
   still provides separation. */
.ftf-module--no-heading:not([class*="has-bg"]):not([style*="background"]) { padding-top: 0; }

/* On small screens the generous desktop section padding stacks up into large
   empty gaps between modules (made worse by sections with no heading/button).
   Tighten the vertical rhythm so sections sit closer together on mobile. */
@media (max-width: 600px) {
	.pad-small  { padding-block: 1.5rem; }
	.pad-medium { padding-block: 2.25rem; }
	.pad-large  { padding-block: 3rem; }
}

.has-bg-light   { background: var(--ftf-cream); }
.has-bg-dark    { background: var(--ftf-night); color: var(--ftf-cream); }
.has-bg-dark h1, .has-bg-dark h2, .has-bg-dark h3 { color: var(--ftf-cream); }
.has-bg-primary { background: var(--ftf-green); color: var(--ftf-cream); }
.has-bg-primary h1, .has-bg-primary h2, .has-bg-primary h3 { color: var(--ftf-cream); }
.has-bg-primary a:not(.ftf-button) { color: var(--ftf-cream); text-decoration: underline; }
.has-bg-purple { background: var(--ftf-purple); color: var(--ftf-cream); }
.has-bg-purple h1, .has-bg-purple h2, .has-bg-purple h3 { color: var(--ftf-cream); }
.has-bg-purple .ftf-module__lead { color: rgba(255, 255, 255, 0.85); }
.has-bg-purple a:not(.ftf-button):not(.ftf-tile) { color: var(--ftf-cream); text-decoration: underline; }
/* Consecutive purple modules read as one band — collapse the seam between them. */
.has-bg-purple + .has-bg-purple { padding-top: 0; }

/*
 * Custom CMS colours (per-section colour pickers). When the editor sets a
 * background and/or text colour, the section carries an inline `color`, and
 * this class lets headings and lead text inherit it instead of falling back to
 * the theme's default ink. Links stay underlined so they remain distinguishable
 * on an arbitrary background.
 */
.has-custom-colors h1,
.has-custom-colors h2,
.has-custom-colors h3,
.has-custom-colors h4,
.has-custom-colors h5,
.has-custom-colors h6,
.has-custom-colors .ftf-module__lead,
.has-custom-colors .ftf-module__heading { color: inherit; }
.has-custom-colors a:not(.ftf-button):not(.ftf-tile):not(.ftf-card) {
	color: inherit;
	text-decoration: underline;
}

/* Section-label headings are set uppercase to match the design. */
.ftf-module__heading,
.ftf-cta__heading,
.ftf-text-media__heading { text-transform: uppercase; letter-spacing: 0.02em; }

.ftf-module__heading { margin-bottom: 0.5rem; }
.ftf-module__intro { max-width: var(--ftf-max-narrow); margin: 0 auto 2.5rem; text-align: center; }
.ftf-module__lead { font-size: 1.15rem; color: var(--ftf-muted); }
.has-bg-dark .ftf-module__lead, .has-bg-primary .ftf-module__lead { color: rgba(255,255,255,0.85); }

/* ---------- Buttons (mint pill — matches the BOOK TODAY CTA in the design) ---------- */
.ftf-button {
	display: inline-block;
	background: var(--ftf-mint);
	color: var(--ftf-night);
	text-decoration: none;
	padding: 0.65rem 1.9rem;
	border: 4px solid var(--ftf-cream);
	border-radius: var(--ftf-radius-pill);
	font-weight: 800;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.ftf-button:hover { background: var(--ftf-mint-dark); color: var(--ftf-night); transform: translateY(-1px); }
.ftf-button--large { padding: 0.85rem 2.4rem; font-size: 1.2rem; }
/* --mint is now the default look; keep the modifier as an explicit alias. */
.ftf-button--mint { background: var(--ftf-mint); color: var(--ftf-night); }
.ftf-button--mint:hover { background: var(--ftf-mint-dark); color: var(--ftf-night); }

/* ---------- Generic rich text ---------- */
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content img { border-radius: var(--ftf-radius); }

/* On mobile a "large"/"full" image inserted in the text content can render too
   small to read (e.g. the timetable graphic). Let those images use the full
   column width so they stay legible. Small inline thumbnails keep their size. */
@media (max-width: 600px) {
	.entry-content img.size-large,
	.entry-content img.size-full,
	.entry-content img.aligncenter,
	.entry-content img.alignnone,
	.entry-content figure.wp-block-image img { width: 100%; height: auto; }
}
.entry-content ul, .entry-content ol { padding-left: 1.25rem; margin: 0 0 1em; }
.entry-content blockquote {
	margin: 1.5rem 0;
	padding: 0.5rem 1.25rem;
	border-left: 4px solid var(--ftf-green);
	color: var(--ftf-muted);
	font-style: italic;
}

/* ==========================================================================
   Module: Hero
   ========================================================================== */
.ftf-hero { overflow: hidden; }
.ftf-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}
/* Background video fills the hero like a cover image. */
.ftf-hero__bg--video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ftf-hero--has-image { color: #fff; }
.ftf-hero--has-image .ftf-hero__heading,
.ftf-hero--has-image .ftf-hero__subheading { color: #fff; }
.ftf-hero--overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(33,38,31,0.35), rgba(33,38,31,0.6));
	z-index: 1;
}
.ftf-hero__inner { position: relative; z-index: 2; max-width: 760px; }
.ftf-hero.align-center .ftf-hero__inner { margin-inline: auto; text-align: center; }
.ftf-hero--has-image { min-height: 60vh; display: flex; align-items: center; }
.ftf-hero__heading { font-size: clamp(2.25rem, 5vw, 3.5rem); margin-bottom: 0.4em; }
.ftf-hero__subheading { font-size: 1.25rem; margin-bottom: 1.5rem; }
.ftf-hero__actions { margin-top: 0.5rem; }

/* ==========================================================================
   Module: Text content
   ========================================================================== */
.ftf-content { margin-inline: auto; }
.ftf-content--narrow { max-width: var(--ftf-max-narrow); }
.ftf-content--normal { max-width: 900px; }
.ftf-content--wide   { max-width: var(--ftf-max); }
.ftf-content__actions { margin-top: 1.75rem; margin-bottom: 0; }

/* ==========================================================================
   Module: Text & media
   ========================================================================== */
.ftf-text-media__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 5vw, 4rem);
	align-items: center;
}
.media-left .ftf-text-media__media { order: -1; }
.ftf-text-media__media img { border-radius: var(--ftf-radius); box-shadow: var(--ftf-shadow); width: 100%; }
.ftf-text-media__heading { margin-bottom: 0.75rem; }

@media (max-width: 782px) {
	.ftf-text-media__grid { grid-template-columns: 1fr; }
	.media-left .ftf-text-media__media { order: 0; }
}

/* ==========================================================================
   Module: Call to action
   ========================================================================== */
.ftf-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}
.ftf-cta__text { flex: 1 1 420px; }
/* Heading reads as bold lead-in on the same line as the copy, same size as it. */
.ftf-cta__heading {
	display: inline;
	font-size: 1.1rem;
	font-weight: 800;
	text-transform: none;   /* override the shared uppercase heading rule */
	letter-spacing: normal;
	margin: 0 0.4rem 0 0;
}
.ftf-cta__copy { display: inline; margin: 0; font-size: 1.1rem; }
.ftf-module.ftf-module--cta:not([class*="has-bg"]) { background: var(--ftf-green-light); }

/* ==========================================================================
   Module: Gallery
   ========================================================================== */
.ftf-gallery { display: grid; gap: 1rem; }
.ftf-gallery.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ftf-gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ftf-gallery.cols-4 { grid-template-columns: repeat(4, 1fr); }
.ftf-gallery__item { margin: 0; }
.ftf-gallery__item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--ftf-radius);
	transition: opacity 0.15s ease;
}
.ftf-gallery__link:hover img { opacity: 0.9; }
.ftf-gallery figcaption { font-size: 0.85rem; color: var(--ftf-muted); margin-top: 0.4rem; }

@media (max-width: 600px) {
	.ftf-gallery.cols-3, .ftf-gallery.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Module: Cards
   ========================================================================== */
.ftf-cards { display: grid; gap: 1.5rem; }
.ftf-cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ftf-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ftf-cards.cols-4 { grid-template-columns: repeat(4, 1fr); }

.ftf-card {
	display: block;
	background: var(--ftf-white);
	border: 1px solid var(--ftf-border);
	border-radius: var(--ftf-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.ftf-card:hover { transform: translateY(-3px); box-shadow: var(--ftf-shadow); }
.ftf-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ftf-card__body { padding: 1.25rem; }
.ftf-card__title { margin-bottom: 0.4rem; }
.ftf-card__text { color: var(--ftf-muted); margin-bottom: 0.5rem; }
.ftf-card__more { color: var(--ftf-green); font-weight: 600; }

@media (max-width: 782px) {
	.ftf-cards.cols-3, .ftf-cards.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.ftf-cards { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   Module: Image carousel — full-bleed infinite marquee
   ========================================================================== */
.ftf-carousel {
	overflow: hidden; /* track sits outside .ftf-container, so this is full viewport width */
}
.ftf-carousel__track {
	list-style: none;
	margin: 0;
	padding: 0.25rem 0;
	display: flex;
	width: max-content;
	/* Each slide carries its own trailing margin, so translateX(-50%) lands
	   exactly on the duplicated set for a seamless, gap-consistent loop. */
	animation: ftf-marquee var(--ftf-marquee-duration, 40s) linear infinite;
}

.ftf-carousel__slide {
	flex: 0 0 auto;
	width: calc(100vw / var(--ftf-carousel-visible) - 1.5rem);
	margin: 0 1.5rem 0 0;
}
.ftf-carousel__slide img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--ftf-radius);
	display: block;
}
.ftf-carousel__caption {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: var(--ftf-muted);
}
.has-bg-purple .ftf-carousel__caption,
.has-bg-dark .ftf-carousel__caption { color: rgba(255, 255, 255, 0.8); }

@keyframes ftf-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (max-width: 782px) {
	.ftf-carousel__slide { width: calc(100vw / 2 - 1.5rem); }
}
@media (max-width: 520px) {
	.ftf-carousel__slide { width: calc(100vw - 3rem); }
}

/* Respect reduced-motion: stop the loop, allow manual horizontal scroll. */
@media (prefers-reduced-motion: reduce) {
	.ftf-carousel { overflow-x: auto; }
	.ftf-carousel__track { animation: none; }
}

/* ==========================================================================
   Module: Image
   ========================================================================== */
.ftf-image { text-align: center; }
.ftf-image--normal { max-width: var(--ftf-max-narrow); }
.ftf-image--wide   { max-width: var(--ftf-max-wide); }
.ftf-image--full   { max-width: 100%; padding-inline: 0; }
.ftf-image__figure { margin: 0; }
.ftf-image__figure img {
	width: 100%;
	height: auto;
	display: block;
	margin-inline: auto;
	border-radius: var(--ftf-radius);
}
.ftf-image--full .ftf-image__figure img { border-radius: 0; }
.ftf-image__caption { font-size: 0.9rem; color: var(--ftf-muted); margin-top: 0.6rem; }

/* ==========================================================================
   Module: Video
   ========================================================================== */
.ftf-video { margin-inline: auto; }
.ftf-video--normal { max-width: 900px; }
.ftf-video--wide   { max-width: var(--ftf-max-wide); }
.ftf-video--full   { max-width: 100%; padding-inline: 0; }
.ftf-video .ftf-module__heading { text-align: center; }
/* Responsive 16:9 wrapper for the oEmbed iframe. */
.ftf-video__embed {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--ftf-radius);
	overflow: hidden;
}
.ftf-video__embed iframe,
.ftf-video__embed video,
.ftf-video__embed object,
.ftf-video__embed embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.ftf-video__file {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--ftf-radius);
}
.ftf-video--full .ftf-video__embed,
.ftf-video--full .ftf-video__file { border-radius: 0; }

/* ==========================================================================
   Module: Link tiles
   ========================================================================== */
.ftf-tiles {
	display: grid;
	gap: 1.5rem;
	position: relative;
	z-index: 3; /* sit above an overlapped hero */
}
.ftf-tiles.cols-2 { grid-template-columns: repeat(2, 1fr); }
.ftf-tiles.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ftf-tiles.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Pull the grid up so it straddles the section above (hero overlap).
   display:flow-root establishes a BFC so the grid's negative margin moves only
   the grid (over the hero) instead of collapsing and dragging the whole purple
   section up with it. */
.ftf-tiles--overlap { padding-top: 0; display: flow-root; }
.ftf-tiles--overlap .ftf-tiles { margin-top: clamp(-130px, -9vw, -80px); }

.ftf-tile {
	display: flex;
	align-items: flex-end;
	min-height: 170px;
	padding: 1.25rem 1.4rem;
	background: var(--ftf-green-dark);
	background-size: cover;
	background-position: center;
	border-radius: var(--ftf-radius);
	text-decoration: none;
	color: var(--ftf-cream);
	box-shadow: var(--ftf-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.ftf-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 20, 15, 0.35); }
.ftf-tile--image { position: relative; overflow: hidden; }
.ftf-tile--image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 20, 15, 0.2), rgba(0, 20, 15, 0.75));
}
.ftf-tile__label {
	position: relative;
	z-index: 1;
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1.1;
	color: var(--ftf-cream);
}

@media (max-width: 782px) {
	.ftf-tiles.cols-3, .ftf-tiles.cols-4 { grid-template-columns: repeat(2, 1fr); }
	.ftf-tiles--overlap .ftf-tiles { margin-top: -60px; }
}
@media (max-width: 520px) {
	.ftf-tiles { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   Module: Accordion
   ========================================================================== */
.ftf-accordion__item {
	border: 1px solid var(--ftf-border);
	border-radius: var(--ftf-radius);
	margin-bottom: 0.75rem;
	background: var(--ftf-white);
	overflow: hidden;
}
/* The item is always a white box, so force dark text regardless of the section
   colour (e.g. inside a dark/coloured section the inherited light text was
   unreadable on the white accordion). */
.ftf-accordion__item,
.ftf-accordion__title,
.ftf-accordion__panel { color: var(--ftf-ink); }
.ftf-accordion__panel a { color: var(--ftf-green); }
.ftf-accordion__title {
	cursor: pointer;
	padding: 1rem 1.25rem;
	font-weight: 600;
	font-family: var(--ftf-font-head);
	font-size: 1.1rem;
	list-style: none;
	position: relative;
}
.ftf-accordion__title::-webkit-details-marker { display: none; }
.ftf-accordion__title::after {
	content: "+";
	position: absolute;
	right: 1.25rem;
	font-size: 1.3rem;
	color: var(--ftf-green);
	transition: transform 0.2s ease;
}
.ftf-accordion__item[open] .ftf-accordion__title::after { content: "\2212"; }
.ftf-accordion__panel { padding: 0 1.25rem 1.25rem; }

/* ==========================================================================
   Module: Content rows (alternating text/image + CTA)
   ========================================================================== */
.ftf-module--content_rows.has-bg-dark { background: var(--ftf-night); }
.ftf-module--content_rows.has-bg-dark,
.ftf-module--content_rows.has-bg-dark .ftf-content-rows__body { color: var(--ftf-cream); }

.ftf-content-rows__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
	margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.ftf-content-rows__row:last-of-type { margin-bottom: 0; }

/* Per-row image side. Default markup is text-then-image (image right). */
.ftf-content-rows__row.media-left .ftf-content-rows__media { order: -1; }

.ftf-content-rows__text { text-align: center; }
.ftf-content-rows__heading {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
	margin-bottom: 0.75rem;
}
.ftf-content-rows__body { font-size: 1.05rem; }
.ftf-content-rows__body > *:last-child { margin-bottom: 0; }

.ftf-content-rows__media img {
	width: 100%;
	border-radius: var(--ftf-radius);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ftf-content-rows__cta {
	text-align: center;
	margin-top: clamp(2rem, 5vw, 3.5rem);
}

@media (max-width: 782px) {
	.ftf-content-rows__row { grid-template-columns: 1fr; }
	/* Stacked: image always sits on top of the text, whichever side it took on desktop. */
	.ftf-content-rows__media { order: -1; }
	.ftf-content-rows__row.media-left .ftf-content-rows__media { order: -1; }
}

/* Mint CTA styling now lives with the base .ftf-button rules above. */

/* ==========================================================================
   Blog / archive / single
   ========================================================================== */
.page-header { margin-bottom: 2.5rem; }
.post-list { display: grid; gap: 2rem; }

.post-card {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 1.5rem;
	align-items: start;
	border-bottom: 1px solid var(--ftf-border);
	padding-bottom: 2rem;
}
.post-card__thumb img { border-radius: var(--ftf-radius); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.post-card__title { margin-bottom: 0.25rem; }
.post-card__title a { text-decoration: none; color: var(--ftf-ink); }
.post-card__title a:hover { color: var(--ftf-green); }
.post-card__meta { color: var(--ftf-muted); font-size: 0.85rem; margin-bottom: 0.5rem; }
.post-card__more { font-weight: 600; text-decoration: none; }

@media (max-width: 600px) {
	.post-card { grid-template-columns: 1fr; }
}

.single-post__header { margin-bottom: 1.5rem; text-align: center; padding-top: 3rem; }
.single-post__meta { color: var(--ftf-muted); }
.single-post__thumb { margin: 0 auto 2rem; }
.single-post__thumb img { border-radius: var(--ftf-radius); width: 100%; }
.single-post__content { padding-bottom: 4rem; }
.post-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin-top: 2rem; }
.post-tags li a {
	display: inline-block;
	background: var(--ftf-green-light);
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	font-size: 0.85rem;
	text-decoration: none;
}

/* Pagination */
.pagination, .navigation.pagination { margin-top: 3rem; }
.pagination .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.pagination .page-numbers {
	display: inline-block;
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--ftf-border);
	border-radius: var(--ftf-radius);
	text-decoration: none;
	color: var(--ftf-ink);
}
.pagination .page-numbers.current { background: var(--ftf-green); color: #fff; border-color: var(--ftf-green); }

/* Standard (non-builder) page */
.page-standard__header { text-align: center; padding-top: 3rem; margin-bottom: 1.5rem; }
.page-standard__content { padding-bottom: 4rem; }
.page-standard__thumb { margin-bottom: 2rem; }
.page-standard__thumb img { border-radius: var(--ftf-radius); width: 100%; }

/* Search form */
.search-form { display: flex; gap: 0.5rem; max-width: 480px; margin: 1.5rem auto 0; }
.search-field {
	flex: 1;
	padding: 0.7rem 1rem;
	border: 1px solid var(--ftf-border);
	border-radius: var(--ftf-radius);
	font: inherit;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background: var(--ftf-ink);
	color: var(--ftf-white);
	padding-block: 3rem;
	margin-top: 0;
}
.site-footer a { color: var(--ftf-white); }
.site-footer__social {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid rgba(255,255,255,0.12);
}
.site-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ftf-white);
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.site-footer__social-link:hover { opacity: 0.7; transform: translateY(-1px); }
.site-footer__icon { display: block; }
.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.site-footer__copy { margin: 0; color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.footer-menu { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; }
.footer-menu a { text-decoration: none; }
.footer-menu a:hover { text-decoration: underline; }

/* ==========================================================================
   WordPress core helper classes
   ========================================================================== */
.alignleft  { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text { font-size: 0.85rem; color: var(--ftf-muted); }
.sticky, .bypostauthor { display: block; }