/* =====================================================================
   Explorer Portfolio — front-end styles.
   Dark by default; light via [data-theme="light"]. Accent colours come
   from the settings screen as --epf-accent / --epf-accent-2 / --epf-accent-3
   (injected inline), so this file never hardcodes a brand palette.
   ===================================================================== */
:root {
	--epf-bg:        #0b1020;
	--epf-ink:       #eef1f9;
	--epf-muted:     #9aa6c0;
	--epf-faint:     #6b7690;
	--epf-panel:     rgba(255,255,255,.05);
	--epf-panel-2:   rgba(255,255,255,.08);
	--epf-border:    rgba(255,255,255,.10);
	--epf-border-2:  rgba(255,255,255,.18);
	--epf-radius:    18px;
	--epf-radius-sm: 12px;
	--epf-accent:    #5eead4;
	--epf-accent-2:  #7dd3fc;
	--epf-accent-3:  #a78bfa;
	--epf-grad:      linear-gradient(135deg, var(--epf-accent), var(--epf-accent-2), var(--epf-accent-3));
}
:root[data-theme="light"] {
	--epf-bg:        #f4f6fb;
	--epf-ink:       #0f172a;
	--epf-muted:     #46536b;
	--epf-faint:     #6b7690;
	--epf-panel:     #ffffff;
	--epf-panel-2:   #ffffff;
	--epf-border:    rgba(15,23,42,.10);
	--epf-border-2:  rgba(15,23,42,.18);
}

body.epf-active {
	background: var(--epf-bg);
	color: var(--epf-ink);
	transition: background .25s ease, color .25s ease;
}
body.epf-active a { color: var(--epf-accent); }
/* Headings follow our ink, not the theme's. Some block themes (e.g. Twenty
   Twenty-Four) set an explicit heading colour in theme.json, which would beat
   the body colour we inherit and render dark-on-dark on the kit's dark surface.
   The gradient hero title (.epf-grad-text) keeps its transparent fill. */
body.epf-active :is(h1,h2,h3,h4,h5,h6):not(.epf-grad-text) { color: var(--epf-ink); }

/* Sticky header — keep the menu in view while scrolling (glassy on scroll). */
body.epf-active header.wp-block-template-part {
	position: sticky; top: 0; z-index: 100;
	background: var(--epf-bg);
	background: color-mix(in srgb, var(--epf-bg) 82%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	backdrop-filter: saturate(140%) blur(12px);
}

.epf-page { padding-block: clamp(2rem, 5vh, 3.5rem); }
.epf-section { padding-block: clamp(2rem, 5vh, 3.5rem); }
.epf-eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 700; color: var(--epf-accent); margin: 0 0 1rem; }
.epf-lede { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--epf-muted); line-height: 1.6; max-width: 52ch; }
.epf-grad-text {
	background: var(--epf-grad); -webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.epf-hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; font-weight: 800; margin: 0 0 1rem; }

/* Cards */
.epf-card {
	background: var(--epf-panel); border: 1px solid var(--epf-border);
	border-radius: var(--epf-radius); padding: clamp(1.3rem, 3vw, 1.9rem);
	transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
	height: 100%; box-sizing: border-box;
}
.epf-card:hover { transform: translateY(-3px); border-color: var(--epf-border-2); }
.epf-card h3 { margin-top: 0; }
/* Tighten the title→meta gap without overlapping (progressive; falls back to the h3's own margin). */
.epf-card h3:has( + .epf-meta ) { margin-bottom: .25rem; }
.epf-meta { color: var(--epf-accent-2); font-size: .82rem; font-weight: 600; letter-spacing: .03em; margin: 0 0 .7rem; line-height: 1.4; }

/* Buttons (native block buttons inside the kit) */
body.epf-active .epf-page .wp-block-button__link,
body.epf-active .epf-section .wp-block-button__link {
	background: var(--epf-grad); color: #06121f; border: 0; font-weight: 800; border-radius: 999px;
}

/* Reveal */
.epf-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.epf-reveal.is-visible { opacity: 1; transform: none; }
body.epf-no-reveal .epf-reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .epf-reveal { opacity: 1; transform: none; transition: none; } }

/* Reading-progress bar */
.epf-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 300; background: transparent; pointer-events: none; }
.epf-progress span { display: block; height: 100%; width: 0; background: var(--epf-grad); transition: width .1s linear; }

/* Theme toggle */
.epf-themetoggle {
	position: fixed; left: 18px; bottom: 18px; z-index: 200; width: 44px; height: 44px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	background: var(--epf-panel-2); border: 1px solid var(--epf-border-2); color: var(--epf-ink);
	backdrop-filter: blur(8px); transition: transform .2s ease, box-shadow .2s ease;
}
.epf-themetoggle:hover { transform: translateY(-2px); }
.epf-themetoggle svg { width: 20px; height: 20px; }
.epf-themetoggle .epf-sun { display: none; }
:root[data-theme="light"] .epf-themetoggle .epf-sun { display: block; }
:root[data-theme="light"] .epf-themetoggle .epf-moon { display: none; }

/* Back to top — appears after scrolling, bottom-right (opposite the toggle). */
.epf-totop {
	position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 200;
	width: 46px; height: 46px; border-radius: 50%; padding: 0; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--epf-panel-2); background: color-mix(in srgb, var(--epf-bg) 80%, transparent);
	border: 1px solid var(--epf-border-2); color: var(--epf-ink);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
	transition: opacity .3s ease, transform .3s ease, visibility .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.epf-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.epf-totop:hover { border-color: var(--epf-accent); box-shadow: 0 0 20px rgba(94, 234, 212, .4); transform: translateY(-2px); }
.epf-totop svg { width: 19px; height: 19px; }

/* WhatsApp chat button — bottom-right; back-to-top stacks above it. */
.epf-wa {
	position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 200;
	width: 46px; height: 46px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: #25d366; color: #fff !important; border: 0; cursor: pointer;
	box-shadow: 0 10px 24px -8px rgba(37, 211, 102, .55);
	transition: transform .2s ease, box-shadow .2s ease;
	appearance: none; font: inherit; padding: 0; /* button-element reset */
}
.epf-wa:hover { transform: translateY(-2px); box-shadow: 0 0 22px rgba(37, 211, 102, .6); }
.epf-wa svg { width: 24px; height: 24px; flex: none; }
/* "Chat on WhatsApp" label slides out to the left on hover/focus. */
.epf-wa-label {
	position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(8px);
	white-space: nowrap; pointer-events: none;
	background: #25d366; color: #fff; font-size: .8rem; font-weight: 700;
	padding: .45rem .8rem; border-radius: 999px; box-shadow: 0 10px 24px -8px rgba(37, 211, 102, .45);
	opacity: 0; visibility: hidden;
	transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.epf-wa:hover .epf-wa-label, .epf-wa:focus-visible .epf-wa-label {
	opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0);
}
@media (hover: none) { .epf-wa-label { display: none; } } /* no hover on touch — skip the label */
/* "Not configured" notice — same bubble, shown on click for a few seconds. */
.epf-wa-note {
	position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(8px);
	white-space: nowrap; pointer-events: none;
	background: var(--epf-panel-2); background: color-mix(in srgb, var(--epf-bg) 88%, #fff 12%);
	color: var(--epf-ink); font-size: .8rem; font-weight: 600;
	border: 1px solid var(--epf-border-2);
	padding: .45rem .8rem; border-radius: 999px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5);
	opacity: 0; visibility: hidden;
	transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.epf-wa-note.is-on { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
@media (max-width: 600px) { .epf-wa-note { white-space: normal; width: 200px; text-align: left; border-radius: 14px; } }
body.epf-has-wa .epf-totop { bottom: calc( clamp(16px, 3vw, 28px) + 58px ); }


/* Contact form */
.epf-cform { display: grid; gap: 1rem; }
.epf-cform-field { display: grid; gap: .4rem; }
.epf-cform-field > span { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--epf-muted); font-weight: 700; }
.epf-cform input, .epf-cform textarea {
	width: 100%; box-sizing: border-box; font: inherit; color: var(--epf-ink);
	background: var(--epf-panel); border: 1px solid var(--epf-border-2); border-radius: 12px; padding: .8rem 1rem;
}
:root[data-theme="light"] .epf-cform input, :root[data-theme="light"] .epf-cform textarea { background: #fff; }
.epf-cform-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.epf-cform-btn {
	justify-self: start; appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 800;
	color: #06121f; background: var(--epf-grad); padding: .8rem 1.6rem; border-radius: 999px;
}
:root[data-theme="light"] .epf-cform-btn { color: #fff; }
.epf-cform-btn:disabled { opacity: .6; cursor: default; }
.epf-cform-status { margin: 0; font-weight: 600; min-height: 1.2em; }
.epf-cform-status.is-ok  { color: var(--epf-accent); }
.epf-cform-status.is-err { color: #f87171; }
:root[data-theme="light"] .epf-cform-status.is-err { color: #b91c1c; }

/* Search */
.epf-search-toggle { appearance: none; background: transparent; border: 0; cursor: pointer; color: inherit; padding: .3rem; margin-left: .6rem; display: inline-flex; align-items: center; align-self: center; opacity: .85; transition: opacity .2s ease, color .2s ease; }
.epf-search-toggle:hover { opacity: 1; color: var(--epf-accent); }
.epf-search-toggle svg { width: 20px; height: 20px; }
.epf-search-item { display: flex; align-items: center; }
.epf-search { position: fixed; inset: 0; z-index: 400; display: none; padding-top: 12vh; background: rgba(4,7,15,.55); backdrop-filter: blur(3px); }
.epf-search.is-on { display: block; }
.epf-search-box { max-width: 620px; margin: 0 auto; background: var(--epf-bg); border: 1px solid var(--epf-border-2); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
:root[data-theme="light"] .epf-search-box { background: #fff; }
.epf-search-inp { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid var(--epf-border); }
.epf-search-inp svg { width: 16px; height: 16px; color: var(--epf-muted); flex: none; }
.epf-search-inp input { flex: 1; font: inherit; font-size: .95rem; background: transparent; border: 0; outline: none; color: var(--epf-ink); }
.epf-search-close { font-size: .7rem; border: 1px solid var(--epf-border-2); border-radius: 6px; padding: .15rem .4rem; color: var(--epf-muted); background: transparent; cursor: pointer; }
.epf-search-results { list-style: none; margin: 0; padding: .35rem; max-height: min(58vh, 440px); overflow-y: auto; }
.epf-search-results li { margin: 0; }
.epf-search-results li a { display: flex; flex-direction: column; gap: .1rem; padding: .45rem .75rem; border-radius: 8px; text-decoration: none; }
.epf-search-results li a:hover { background: var(--epf-panel-2); }
.epf-search-t { color: var(--epf-ink); font-weight: 600; font-size: .95rem; line-height: 1.35; }
.epf-search-d { color: var(--epf-muted); font-size: .8rem; line-height: 1.4; }
.epf-search-empty { padding: 1.2rem; text-align: center; color: var(--epf-faint); }

/* Deep-link offset for the sticky header */
html { scroll-behavior: smooth; }
body.epf-active :where(h1,h2,h3,h4,h5,h6)[id] { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Current-page indicator — a clear "you are here" in the theme's block nav.
   Block themes stamp aria-current / current-menu-item on the active item. */
body.epf-active .wp-block-navigation .wp-block-navigation-item { position: relative; }
body.epf-active .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
body.epf-active .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label,
body.epf-active .wp-block-navigation [aria-current="page"],
body.epf-active .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
body.epf-active .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content .wp-block-navigation-item__label {
	color: var(--epf-ink) !important;
	font-weight: 650 !important;
}
/* Gradient underline that slides in under the current top-level item. */
body.epf-active .wp-block-navigation > ul > .current-menu-item > .wp-block-navigation-item__content::after,
body.epf-active .wp-block-navigation > ul > .current-menu-ancestor > .wp-block-navigation-item__content::after,
body.epf-active .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after,
body.epf-active .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content::after,
body.epf-active .wp-block-navigation [aria-current="page"]::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px;
	background: var(--epf-grad); box-shadow: 0 0 10px rgba(94, 234, 212, 0.55);
	transform-origin: left center; animation: epf-underline .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes epf-underline { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.epf-active .wp-block-navigation [aria-current="page"]::after { animation: none; } }
/* No underline text-decoration on nav links. */
body.epf-active .wp-block-navigation a,
body.epf-active .wp-block-navigation a:hover,
body.epf-active .wp-block-navigation a:focus,
body.epf-active .wp-block-navigation .wp-block-navigation-item__content,
body.epf-active .wp-block-navigation .wp-block-navigation-item__content:hover,
body.epf-active .wp-block-navigation .wp-block-navigation-item__content:focus { text-decoration: none !important; }
/* The theme paints a 2px outline box on plain :focus — a white rectangle on a
   dark background when you click a menu item, the logo or a button. Suppress it
   for pointer focus only; keyboard users still get the full ring via
   :focus-visible, so accessibility is preserved. */
body.epf-active :focus:not(:focus-visible) { outline: none !important; }

/* Pages built with the kit's hero or section patterns carry their own heading,
   so hide the theme's duplicate page title on just those pages. Ordinary pages
   and posts (no kit blocks) keep their title. Needs :has() — older browsers
   simply keep the title, which is harmless. */
body.epf-active:has(.epf-hero, .epf-section) .wp-block-post-title { display: none !important; }
/* The hidden title leaves the theme's large top spacing as empty space above
   the content. Trim it so kit pages start neatly below the header. */
body.epf-active:has(.epf-hero, .epf-section) main { margin-top: 0 !important; }
body.epf-active:has(.epf-hero, .epf-section) main > .wp-block-group:first-child { padding-top: 1.75rem !important; }

/* ------------------------------------------------------------------ */
/* Timeline — vertical line fills as you scroll; the node you're        */
/* reading glows. JS sets --epf-fill and the is-past/active/future.     */
/* ------------------------------------------------------------------ */
.epf-timeline { position: relative; margin-top: 1.6rem; }
/* The rail is centred on the node dots (both share the 8.5px axis) and sits at
   z-index -1 so a dot always covers it — even when a dimmed (opacity < 1) node
   forms its own stacking context. */
.epf-timeline::before, .epf-timeline::after {
	content: ""; position: absolute; top: .45rem; left: 8.5px; width: 2px;
	transform: translateX(-50%); border-radius: 2px; z-index: -1;
}
.epf-timeline::before { bottom: .35rem; background: var(--epf-border); }
.epf-timeline::after {
	height: var(--epf-fill, 0%); max-height: calc(100% - .7rem);
	background: var(--epf-grad); box-shadow: 0 0 12px rgba(94, 234, 212, 0.5);
	transition: height .12s linear;
}
.epf-timeline .epf-node {
	position: relative; padding-left: 2.6rem; padding-bottom: 2rem;
	transition: opacity .45s ease;
}
.epf-timeline .epf-node:last-child { padding-bottom: 0; }
/* Dot: 13px + 2px borders = 17px wide → centre at 8.5px, same axis as the rail. */
.epf-timeline .epf-node::before {
	content: ""; position: absolute; left: 0; top: .4rem; width: 13px; height: 13px; border-radius: 50%;
	background: var(--epf-bg); border: 2px solid var(--epf-border-2); z-index: 2;
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.epf-timeline .epf-node.is-past::before { border-color: var(--epf-accent); }
.epf-timeline .epf-node.is-active::before {
	border-color: var(--epf-accent);
	box-shadow: 0 0 0 5px rgba(94, 234, 212, 0.16), 0 0 18px 3px rgba(94, 234, 212, 0.7);
	transform: scale(1.2);
}
.epf-timeline .epf-node.is-past { opacity: .85; }
.epf-timeline .epf-node.is-future { opacity: .5; }
.epf-timeline .epf-node.is-active { opacity: 1; }
/* Ladybug markers (body.epf-bug-markers pages): the dot becomes a bug. */
body.epf-bug-markers .epf-timeline .epf-node::before { display: none; }
.epf-node .epf-bug {
	position: absolute; left: -8.5px; top: -4px; width: 34px; height: 32px; z-index: 2; pointer-events: none;
}
.epf-node .epf-bug svg {
	width: 100%; height: 100%; overflow: visible; display: block; transform-origin: 50% 45%;
	animation: epf-bugfly 2.6s ease-in-out infinite; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .35));
}
.epf-bug-body { fill: url(#epf-bug-grad); }
.epf-bug-legs { stroke: var(--epf-muted); }
.epf-bug-wing {
	fill: rgba(196, 232, 255, .32); transform-box: fill-box; transform-origin: 50% 45%;
	animation: epf-bugflap .22s ease-in-out infinite;
}
.epf-bug-wing--r { animation-delay: .03s; }
.epf-bug-antenna { fill: var(--epf-accent); animation: epf-bugant 1.8s ease-in-out infinite; }
:root[data-theme="light"] .epf-bug-wing { fill: rgba(13, 148, 136, .20); }
.epf-timeline .epf-node.is-active .epf-bug { transform: scale(1.1); transition: transform .35s ease; }
.epf-timeline .epf-node.is-active .epf-bug svg { filter: drop-shadow(0 0 10px rgba(94, 234, 212, .65)); }
@keyframes epf-bugfly  { 0%, 100% { transform: translateY(-2px) rotate(-4deg); } 50% { transform: translateY(4px) rotate(4deg); } }
@keyframes epf-bugflap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.5); } }
@keyframes epf-bugant  { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .epf-node .epf-bug svg, .epf-bug-wing, .epf-bug-antenna { animation: none !important; } }

.epf-timeline .epf-node .epf-when {
	font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--epf-accent); font-weight: 600; margin: 0 0 .15rem;
}
.epf-timeline .epf-node h3 { margin: .1rem 0 .1rem; }
.epf-timeline .epf-node .epf-where { color: var(--epf-muted); font-weight: 500; margin: 0 0 .45rem; }
@media (prefers-reduced-motion: reduce) { .epf-timeline .epf-node { transition: none; } }

/* ------------------------------------------------------------------ */
/* Blog cards — a styled query-loop grid.                               */
/* ------------------------------------------------------------------ */
.epf-blog-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(1rem, 2.5vw, 1.6rem); margin-top: 1.6rem;
}
.epf-blog-card {
	display: flex; flex-direction: column; background: var(--epf-panel);
	border: 1px solid var(--epf-border); border-radius: var(--epf-radius);
	padding: clamp(1.4rem, 3vw, 2rem); overflow: hidden;
	transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.epf-blog-card:hover { transform: translateY(-3px); border-color: var(--epf-border-2); }
.epf-blog-card .epf-blog-thumb { margin: calc(-1 * clamp(1.4rem, 3vw, 2rem)); margin-bottom: 1rem; overflow: hidden; }
.epf-blog-card .epf-blog-thumb a, .epf-blog-card .epf-blog-thumb img { display: block; width: 100%; }
.epf-blog-card .epf-blog-thumb img { aspect-ratio: 16 / 9; object-fit: cover; transition: transform .35s ease; }
.epf-blog-card:hover .epf-blog-thumb img { transform: scale(1.04); }
/* Everything inside a card reads left-aligned — the theme centres post
   title/date in some layouts, which clashes with the left-aligned excerpt. */
body.epf-active .epf-blog-card .wp-block-post-date,
body.epf-active .epf-blog-card .wp-block-post-title,
body.epf-active .epf-blog-card .wp-block-post-excerpt {
	/* !important beats the generated .wp-container-* { margin: auto !important } */
	text-align: left; margin-left: 0 !important; margin-right: 0 !important; width: 100%; max-width: none;
}
.epf-blog-card .wp-block-post-date { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--epf-faint); margin: 0 0 .3rem; }
/* .wp-block-post-title is hidden globally on kit pages — bring it back inside cards. */
body.epf-active .epf-blog-card .wp-block-post-title { display: block !important; margin: 0 0 .45rem; font-size: 1.2rem; line-height: 1.3; }
.epf-blog-card .wp-block-post-title a { color: var(--epf-ink); text-decoration: none; transition: color .2s ease; }
.epf-blog-card .wp-block-post-title a:hover { color: var(--epf-accent); }
.epf-blog-card .wp-block-post-excerpt { margin: 0; color: var(--epf-muted); font-size: .95rem; line-height: 1.55; }
.epf-blog-card .wp-block-post-excerpt a { color: var(--epf-accent); font-weight: 650; text-decoration: none; }
.epf-blog-empty { color: var(--epf-muted); }

/* ------------------------------------------------------------------ */
/* Light-mode contrast — the accent palette is tuned for dark          */
/* backgrounds, so accent-coloured TEXT (eyebrow, timeline date, meta,  */
/* links) is too pale on white. Darken it while keeping the user's hue. */
/* color-mix is widely supported; unsupported browsers keep the accent. */
/* ------------------------------------------------------------------ */
:root[data-theme="light"] .epf-eyebrow,
:root[data-theme="light"] .epf-timeline .epf-node .epf-when,
:root[data-theme="light"] body.epf-active a,
:root[data-theme="light"] .epf-cform-status.is-ok {
	color: color-mix(in srgb, var(--epf-accent) 48%, #0b1020);
}
:root[data-theme="light"] .epf-meta {
	color: color-mix(in srgb, var(--epf-accent-2) 48%, #0b1020);
}

/* ------------------------------------------------------------------ */
/* Mobile menu overlay — keep the block theme's toggle on-brand.        */
/* ------------------------------------------------------------------ */
/* !important beats the theme's inline overlay colours. Theme-aware via the vars. */
body.epf-active .wp-block-navigation__responsive-container.is-menu-open,
body.epf-active .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	background-color: var(--epf-bg) !important;
}
body.epf-active .wp-block-navigation__responsive-container.is-menu-open a,
body.epf-active .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
body.epf-active .wp-block-navigation__responsive-container.is-menu-open button,
body.epf-active .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--epf-ink) !important;
}
body.epf-active .wp-block-navigation__responsive-container.is-menu-open [aria-current="page"] { color: var(--epf-accent) !important; }
/* No sliding underline inside the vertical overlay — it reads oddly there. */
body.epf-active .wp-block-navigation__responsive-container.is-menu-open [aria-current="page"]::after { display: none; }

/* ------------------------------------------------------------------ */
/* Responsive tidy-ups.                                                 */
/* ------------------------------------------------------------------ */
@media (max-width: 781px) {
	.epf-section { padding-block: clamp(1.6rem, 5vh, 2.6rem); }
	.epf-timeline .epf-node { padding-left: 2rem; padding-bottom: 1.6rem; }
	.epf-hero .wp-block-buttons { justify-content: flex-start; }
}
@media (max-width: 600px) {
	.epf-blog-grid { grid-template-columns: 1fr; }
	.epf-search-box { margin: 0 1rem; }
	.epf-themetoggle { width: 42px; height: 42px; left: 14px; bottom: 14px; }
}