/*
Theme Name: eTEFL Directory
Description: Theme for the English teacher directory. Supplies the home page, header, footer and page layouts. Works together with the "eTEFL Teacher Directory" plugin, which supplies the teachers, search and profiles. No paid plugins or page builders needed.
Author: eTEFL Online
Version: 1.7.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: etd
*/

/* ---------------------------------------------------------------------------
   Brand tokens: the original navy + marigold + sky scheme
   (same values as the directory plugin)
--------------------------------------------------------------------------- */
:root {
	--etd-navy: #1E2B45;       /* header, hero, buttons, footer */
	--etd-steel: #3F6283;      /* verified badge text, links */
	--etd-sky: #7FA8C9;        /* soft accent: avatar rings, connector lines */
	--etd-gold: #E9A23B;       /* marigold: Featured */
	--etd-ink: #1E2B45;        /* text */
	--etd-ink-soft: #42506B;   /* secondary text */
	--etd-paper: #F5F7F4;      /* page background */
	--etd-line: #DCE1DA;       /* borders */
	--etd-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--etd-body: 'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--etd-wrap: 1160px;
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body.etd {
	margin: 0;
	background: var(--etd-paper);
	color: var(--etd-ink);
	font-family: var(--etd-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
/* :where() keeps these defaults weak, so the directory plugin's own styles always win over them. */
:where(.etd) img { max-width: 100%; height: auto; }
:where(.etd) a { color: var(--etd-steel); }
:where(.etd) h1, :where(.etd) h2, :where(.etd) h3 { font-family: var(--etd-display); }
.etd :focus-visible { outline: 3px solid var(--etd-ink); outline-offset: 3px; border-radius: 4px; }

.etd-wrap { width: 100%; max-width: var(--etd-wrap); margin: 0 auto; padding: 0 24px; }
.etd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.etd-skip { position: absolute; left: 12px; top: -60px; background: #fff; color: var(--etd-ink); padding: 10px 14px; border-radius: 8px; font-weight: 700; z-index: 100; }
.etd-skip:focus { top: 12px; }

/* ---------------------------------------------------------------------------
   Header
--------------------------------------------------------------------------- */
.etd-header { background: var(--etd-navy); color: #fff; }
.etd-header-in { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; }
.etd a.etd-brand { font-family: var(--etd-display); font-weight: 700; font-size: 1.4rem; line-height: 1.1; letter-spacing: -0.01em; color: #fff; text-decoration: none; }
.etd-brand--logo img { display: block; max-height: 48px; width: auto; }
.etd-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; }
.etd .etd-menu a { color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.etd .etd-menu a:hover, .etd .etd-menu .current-menu-item > a { border-bottom-color: var(--etd-gold); }
.etd-header :focus-visible, .etd-hero :focus-visible, .etd-pagehead :focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------------------
   Buttons, pills, links
--------------------------------------------------------------------------- */
.etd a.etd-btn, .etd button.etd-btn {
	display: block; width: 100%; text-align: center; text-decoration: none; cursor: pointer;
	background: var(--etd-navy); color: #fff; border: 0; border-radius: 10px;
	padding: 13px 20px; font-family: var(--etd-body); font-size: 1rem; font-weight: 700; line-height: 1.2;
	transition: background-color .15s;
}
.etd a.etd-btn:hover, .etd button.etd-btn:hover { background: #2D3F64; }
.etd a.etd-btn--gold { background: var(--etd-gold); color: var(--etd-ink); }
.etd a.etd-btn--gold:hover { background: #DB9328; }
.etd a.etd-btn--inline, .etd button.etd-btn--inline { display: inline-block; width: auto; padding-left: 28px; padding-right: 28px; }
.etd a.etd-link { font-weight: 700; text-underline-offset: 4px; }

.etd-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; line-height: 1.2; }
.etd-pill--featured { align-self: flex-start; background: var(--etd-gold); color: var(--etd-ink); border-radius: 6px; padding: 4px 9px; letter-spacing: .02em; }
.etd-pill--verified { background: rgba(127, 168, 201, .18); color: var(--etd-steel); border: 1px solid rgba(127, 168, 201, .55); border-radius: 999px; padding: 4px 11px; font-size: .8125rem; }
.etd-pill--lg { font-size: 1.0625rem; padding: 8px 18px; }

/* ---------------------------------------------------------------------------
   Teacher card (same look as the directory's cards)
--------------------------------------------------------------------------- */
.etd-card { position: relative; display: flex; flex-direction: column; gap: 12px; background: #fff; color: var(--etd-ink); border: 1.5px solid #E2E6E0; border-radius: 14px; padding: 20px; }
.etd-card.is-featured { border: 2px solid var(--etd-gold); }
.etd-card-head { display: flex; align-items: center; gap: 14px; }
.etd-avatar { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--etd-sky); background: var(--etd-paper); display: flex; align-items: center; justify-content: center; font-family: var(--etd-display); font-weight: 700; font-size: 1.25rem; color: #3A455E; }
.etd-card img.etd-avatar--img { object-fit: cover; padding: 0; }
.etd .etd-card-name { font-family: var(--etd-display); font-weight: 700; font-size: 1.3rem; line-height: 1.15; margin: 0; }
.etd .etd-card p { margin: 0; max-width: none; }
.etd .etd-card p.etd-card-meta { margin-top: 2px; }
.etd-card-meta { font-size: .875rem; font-weight: 600; color: #3A455E; }
.etd-row { position: relative; }
.etd-verified { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.etd-cred { font-size: .875rem; font-weight: 600; color: var(--etd-ink-soft); }
.etd-card-blurb { font-size: .9375rem; line-height: 1.5; color: var(--etd-ink-soft); flex: 1; }
.etd-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.etd-tags li { font-size: .78rem; font-weight: 600; background: var(--etd-paper); border: 1px solid #E2E6E0; border-radius: 999px; padding: 3px 11px; color: #3A455E; }
.etd-card-rate { font-size: .9375rem; color: #3A455E; }
.etd-card-rate strong { font-size: 1.25rem; color: var(--etd-ink); }

/* ---------------------------------------------------------------------------
   Home: hero
--------------------------------------------------------------------------- */
.etd-hero { background: var(--etd-navy); color: #fff; padding: clamp(28px, 5vw, 64px) 0 clamp(48px, 7vw, 80px); }
.etd-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.etd-hero-text { max-width: 640px; }
.etd-hero h1 { font-weight: 700; font-size: clamp(2.2rem, 4.5vw, 3.45rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 20px; text-wrap: balance; }
.etd-home p.etd-hero-sub { font-size: 1.175rem; font-weight: 500; color: #E4EAF3; line-height: 1.5; margin: 0; max-width: 32em; }

/* Wide screens: heading on the left, sample listing level with it on the right,
   then the search bar across the full width, sitting half over the bottom edge of the banner. */
@media (min-width: 1101px) {
	.etd-hero { padding-bottom: 0; margin-bottom: 56px; }
	.etd-hero-grid { grid-template-columns: minmax(0, 1fr) 600px; column-gap: 40px; row-gap: 48px; align-items: start; }
	.etd-hero-text { grid-column: 1; grid-row: 1; max-width: none; }
	.etd-hero-card { grid-column: 2; grid-row: 1; }
	.etd-search { grid-column: 1 / -1; grid-row: 2; margin-bottom: -56px; }
}

/* Search bar (same options as the Find a Teacher page) */
.etd-search { position: relative; z-index: 1; background: #fff; color: var(--etd-ink); border-radius: 18px; padding: 22px; box-shadow: 0 22px 44px -22px rgba(13, 22, 41, .5); }
.etd-search-top { display: flex; gap: 12px; }
.etd-search input[type="text"] { flex: 1; min-width: 0; font-family: var(--etd-body); font-size: 1.0625rem; color: var(--etd-ink); padding: 14px 16px; border: 1.5px solid var(--etd-line); border-radius: 10px; background-color: var(--etd-paper); }
.etd-search input[type="text"]::placeholder { color: #7B8598; opacity: 1; }
.etd-search-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 14px; }
.etd-search select { font-family: var(--etd-body); font-size: 1rem; color: var(--etd-ink); padding: 11px 12px; border: 1.5px solid var(--etd-line); border-radius: 10px; background-color: var(--etd-paper); }
.etd-price { flex: 1 1 180px; display: flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 600; white-space: nowrap; }
.etd-price input[type="range"] { flex: 1 1 90px; width: 90px; min-width: 90px; max-width: 260px; accent-color: var(--etd-gold); }
/* The two tick boxes stay together, so neither is left alone on a line. */
.etd-check-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.etd-search .etd-check { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; color: var(--etd-steel); cursor: pointer; }
.etd-check input { width: 20px; height: 20px; accent-color: var(--etd-steel); flex-shrink: 0; }
.etd-search .etd-check--featured { color: var(--etd-ink); }
.etd-check--featured input { accent-color: var(--etd-gold); }
.etd-search :focus-visible { outline-color: var(--etd-ink); }

/* The annotated card: one real profile, with two notes explaining what you are looking at. */
.etd-specimen { position: relative; width: 340px; max-width: 100%; }
.etd-specimen .etd-card { border-color: transparent; box-shadow: 0 28px 56px -24px rgba(0, 0, 0, .65); }
.etd-specimen .etd-card.is-featured { border-color: var(--etd-gold); }
.etd-home p.etd-specimen-label { margin: 0 0 10px; font-size: .9375rem; font-weight: 700; color: #fff; }
.etd-specimen :focus-visible { outline-color: var(--etd-ink); }
.etd .etd-card p.etd-note { position: absolute; left: calc(100% + 78px); top: 50%; transform: translateY(-50%); width: 178px; font-size: 1rem; font-weight: 700; line-height: 1.3; color: #fff; }
.etd-note::before { content: ""; position: absolute; right: calc(100% + 10px); top: 50%; width: 46px; height: 2px; margin-top: -1px; background: var(--etd-sky); transform-origin: right center; }

@media (prefers-reduced-motion: no-preference) {
	.etd-note { animation: etd-note-in .5s .35s both; }
	.etd-note::before { animation: etd-line-in .4s .6s both; }
	.etd-row + .etd-card-blurb ~ .etd-row .etd-note { animation-delay: .55s; }
	.etd-row + .etd-card-blurb ~ .etd-row .etd-note::before { animation-delay: .8s; }
}
@keyframes etd-note-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes etd-line-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------------------------------------------------------------------
   Home: sections
--------------------------------------------------------------------------- */
.etd-section { padding: clamp(56px, 8vw, 100px) 0; }
.etd-section--white { background: #fff; }
.etd .etd-h2 { font-weight: 700; font-size: clamp(1.75rem, 3.1vw, 2.5rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 24px; text-wrap: balance; }
.etd-home p { margin: 0 0 16px; max-width: 36em; }
.etd-home p.etd-lead { font-size: 1.2rem; line-height: 1.5; color: var(--etd-ink); }
.etd-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 8px; }

/* How it works: a real sequence, so it is numbered. */
.etd-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; counter-reset: etd-step; }
.etd-steps li { counter-increment: etd-step; border-top: 3px solid var(--etd-ink); padding-top: 18px; }
.etd-steps li::before { content: counter(etd-step); display: block; font-family: var(--etd-display); font-weight: 700; font-size: 3.25rem; line-height: 1; color: var(--etd-steel); margin-bottom: 12px; }
.etd .etd-steps h3 { font-size: 1.45rem; line-height: 1.2; margin: 0 0 8px; }
.etd-home .etd-steps p { margin: 0; color: var(--etd-ink-soft); }

/* What the badge means */
.etd-badge-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.etd-checks { background: var(--etd-paper); border-radius: 18px; padding: 30px; }
.etd-home p.etd-checks-head { margin: 0 0 18px; }
.etd-home p.etd-checks-intro { font-weight: 700; margin: 0 0 12px; }
.etd-checks ul { list-style: none; margin: 0; padding: 0; }
.etd-checks li { position: relative; padding: 13px 0 13px 38px; border-top: 1px solid var(--etd-line); font-weight: 600; line-height: 1.4; }
.etd-checks li::before { content: "\2713"; position: absolute; left: 0; top: 13px; width: 24px; height: 24px; border-radius: 50%; background: var(--etd-steel); color: #fff; font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Some of our teachers */
.etd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 16px; }

/* I want to... */
.etd .etd-goals-lead { font-weight: 700; font-size: clamp(2.2rem, 4.5vw, 3.45rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 20px; color: var(--etd-steel); }
/* Three across on wide screens, so the first row is the three exams. */
.etd-goals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 44px; }
.etd-goals li { border-bottom: 1px solid var(--etd-line); }
.etd .etd-goals a { display: block; padding: 17px 0; font-family: var(--etd-display); font-weight: 500; font-size: clamp(1.25rem, 1.9vw, 1.45rem); line-height: 1.2; color: var(--etd-ink); text-decoration: none; }
.etd .etd-goals a:hover { color: var(--etd-steel); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* For teachers */
.etd-teach-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.etd-home p.etd-soon { display: inline-block; font-weight: 700; border: 1.5px dashed #9AA5B8; border-radius: 10px; padding: 11px 18px; margin-top: 8px; }
.etd-plans { background: var(--etd-paper); border: 1.5px solid #E2E6E0; border-radius: 18px; overflow: hidden; }
.etd-plan { padding: 24px 28px; border-top: 1.5px solid #E2E6E0; }
.etd-plan:first-child { border-top: 0; }
.etd-plan--featured { border-left: 6px solid var(--etd-gold); padding-left: 22px; }
.etd-plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; margin-bottom: 8px; }
.etd .etd-plan h3 { font-size: 1.3rem; line-height: 1.2; margin: 0; }
.etd-home p.etd-plan-price { font-family: var(--etd-display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; margin: 0; white-space: nowrap; }
.etd-home .etd-plan p { margin: 0 0 8px; font-size: 1rem; color: var(--etd-ink-soft); max-width: none; }
.etd-home .etd-plan p:last-child { margin-bottom: 0; }
.etd-home .etd-plan p.etd-plan-price { color: var(--etd-ink); }
.etd-home .etd-plan p.etd-plan-grad { color: var(--etd-ink); font-weight: 700; }

/* Questions */
.etd-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 56px; align-items: start; }
.etd-faq details { border-top: 1px solid var(--etd-line); }
.etd-faq details:last-child { border-bottom: 1px solid var(--etd-line); }
.etd-faq summary { cursor: pointer; list-style: none; position: relative; padding: 18px 44px 18px 0; font-weight: 700; font-size: 1.125rem; line-height: 1.35; }
.etd-faq summary::-webkit-details-marker { display: none; }
.etd-faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-family: var(--etd-display); font-size: 1.75rem; font-weight: 500; line-height: 1.2; color: var(--etd-steel); }
.etd-faq details[open] summary::after { content: "\2212"; }
.etd-home .etd-faq p { margin: 0; padding: 0 44px 20px 0; color: var(--etd-ink-soft); max-width: 38em; }

/* Closing band */
.etd-close { background: var(--etd-navy); color: #fff; padding: 56px 0; }
.etd a.etd-btn--light { background: #fff; color: var(--etd-ink); }
.etd a.etd-btn--light:hover { background: #E4EAF3; }
.etd-close :focus-visible { outline-color: #fff; }
.etd-home .etd-plan a { color: var(--etd-steel); font-weight: inherit; text-decoration: underline; text-underline-offset: 3px; }
.etd-home .etd-plan a:hover { color: var(--etd-ink); }
.etd-close-in { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.etd .etd-close h2 { font-weight: 700; font-size: clamp(1.75rem, 3.1vw, 2.5rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0; }

/* Note that only the administrator sees */
.etd-home p.etd-adminnote { max-width: none; margin: 24px 0 0; padding: 14px 18px; background: #fff; border: 1.5px dashed #9AA5B8; border-radius: 10px; font-size: .9375rem; }

/* ---------------------------------------------------------------------------
   Inner pages (Find a Teacher, profiles, ordinary pages)
--------------------------------------------------------------------------- */
.etd-pagehead { background: var(--etd-navy); color: #fff; padding: 36px 0 44px; }
.etd .etd-pagehead h1 { font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
.etd-content { padding-top: 40px; padding-bottom: 80px; }
.etd-content--profile { padding-top: 16px; }
.etd-crumb { padding-top: 22px; }
.etd .etd-crumb a { font-weight: 700; text-underline-offset: 4px; }
.etd-content > p, .etd-content > ul, .etd-content > ol, .etd-content > h2, .etd-content > h3, .etd-content > h4, .etd-content > blockquote { max-width: 44rem; }
.etd-content > h2 { font-size: 1.75rem; line-height: 1.15; margin: 40px 0 12px; }
.etd-content > h3 { font-size: 1.35rem; line-height: 1.2; margin: 32px 0 10px; }
.etd-content > p { margin: 0 0 18px; }
.etd-listitem { max-width: 44rem; padding: 0 0 20px; margin: 0 0 24px; border-bottom: 1px solid var(--etd-line); }
.etd-listitem h2 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 8px; }
.etd-content .etd-btn--inline { margin-right: 18px; }

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */
.etd-footer { background: var(--etd-navy); color: #fff; padding: 52px 0 36px; }
.etd-footer-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 56px; align-items: start; }
.etd-footer-brand { font-family: var(--etd-display); font-weight: 700; font-size: 1.4rem; line-height: 1.1; margin: 0 0 8px; }
.etd-footer-line { margin: 0; color: #C9D2E0; max-width: 22em; }
.etd-footer-contact { margin: 16px 0 0; overflow-wrap: anywhere; }
.etd .etd-footer-contact a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--etd-gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.etd .etd-footer-contact a:hover { text-decoration-color: #fff; }
.etd-footer-menu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto auto; gap: 10px 40px; }
.etd .etd-footer-menu a { color: #fff; font-weight: 600; text-decoration: none; }
.etd .etd-footer-menu a:hover { text-decoration: underline; text-underline-offset: 4px; }
.etd-footer-legal { grid-column: 1 / -1; margin: 12px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .9375rem; color: #C9D2E0; }
.etd-footer-legal p { margin: 0; }
/* Privacy policy, terms, cookie notice and "Cookie settings": on every page, whatever the footer menu holds. */
.etd-footer-legal-links { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.etd .etd-footer-legal-links a, .etd button.etd-footer-linkbtn { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 4px; }
.etd .etd-footer-legal-links a:hover, .etd button.etd-footer-linkbtn:hover { text-decoration-color: #fff; }
.etd button.etd-footer-linkbtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600; cursor: pointer; }
.etd-footer :focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------------------
   Cookie banner
   A small panel in the bottom corner. It never covers the page, and
   "Accept all" and "Reject all" look the same so neither is pushed.
--------------------------------------------------------------------------- */
.etd-cookies { position: fixed; z-index: 1000; left: 20px; bottom: 20px; width: 440px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; color: var(--etd-ink); border: 1.5px solid var(--etd-line); border-radius: 16px; padding: 22px; box-shadow: 0 22px 44px -18px rgba(13, 22, 41, .55); }
.etd-cookies[hidden], .etd-cookies [hidden] { display: none; }
.etd .etd-cookies-h { font-family: var(--etd-display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; margin: 0 0 8px; }
.etd .etd-cookies-h:focus { outline: none; }
.etd-cookies p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--etd-ink-soft); }
.etd .etd-cookies a { font-weight: 700; text-underline-offset: 3px; white-space: nowrap; }
.etd-cookies-choices { margin-top: 16px; border-top: 1px solid var(--etd-line); }
.etd-cookies-choice { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--etd-line); font-size: .9375rem; line-height: 1.45; color: var(--etd-ink-soft); cursor: pointer; }
.etd-cookies-choice input { flex-shrink: 0; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--etd-navy); }
.etd-cookies-choice strong { display: block; color: var(--etd-ink); }
.etd-cookies p.etd-cookies-note { margin-top: 12px; font-size: .875rem; }
.etd-cookies-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.etd button.etd-cookies-btn { flex: 1 1 120px; cursor: pointer; background: var(--etd-navy); color: #fff; border: 1.5px solid var(--etd-navy); border-radius: 10px; padding: 11px 14px; font-family: var(--etd-body); font-size: 1rem; font-weight: 700; line-height: 1.2; transition: background-color .15s; }
.etd button.etd-cookies-btn:hover { background: #2D3F64; }
.etd button.etd-cookies-btn--quiet { background: #fff; color: var(--etd-ink); border-color: #9AA5B8; }
.etd button.etd-cookies-btn--quiet:hover { background: var(--etd-paper); }
/* While the two tick boxes are open, "Save my choices" is the main button, so a visitor who has
   just ticked a box does not undo it by pressing one of the other two out of habit. */
.etd .etd-cookies.is-choosing button.etd-cookies-btn { background: #fff; color: var(--etd-ink); border-color: #9AA5B8; }
.etd .etd-cookies.is-choosing button.etd-cookies-btn:hover { background: var(--etd-paper); }
.etd .etd-cookies.is-choosing button[data-etd-cookies="save"] { order: -1; flex-basis: 100%; background: var(--etd-navy); color: #fff; border-color: var(--etd-navy); }
.etd .etd-cookies.is-choosing button[data-etd-cookies="save"]:hover { background: #2D3F64; }
.etd-cookies :focus-visible { outline-color: var(--etd-ink); }
@media (max-width: 600px) {
	.etd-cookies { left: 10px; right: 10px; bottom: 10px; width: auto; max-width: none; max-height: calc(100vh - 20px); padding: 18px; }
}
@media print { .etd-cookies { display: none; } }

/* ---------------------------------------------------------------------------
   Smaller screens
--------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.etd-specimen { width: 400px; }
	/* Notes move inside the card, under the thing they explain. */
	.etd .etd-card p.etd-note { position: static; transform: none; width: auto; flex-basis: 100%; margin-top: 4px; font-size: .875rem; font-weight: 600; color: var(--etd-steel); animation: none; }
	.etd-note::before { display: none; }
}
@media (max-width: 900px) {
	.etd-steps { grid-template-columns: 1fr; gap: 28px; }
	.etd-badge-grid, .etd-teach-grid, .etd-faq-grid { grid-template-columns: 1fr; gap: 28px; }
	.etd-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.etd-cards { grid-template-columns: 1fr; max-width: 460px; }
	.etd-footer-in { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	body.etd { font-size: 16px; }
	/* Sides only: setting all four here used to wipe out the space above and below the content of inner pages on phones. */
	.etd-wrap { padding-left: 18px; padding-right: 18px; }
	/* Phone: search box, then the filters, then the button last. */
	.etd-search { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
	.etd-search-top { display: contents; }
	.etd-search input[type="text"] { flex: none; }
	.etd-search-filters { margin-top: 0; order: 1; }
	.etd .etd-search-top button.etd-btn--inline { width: 100%; order: 2; }
	.etd-search select { flex: 1 1 100%; width: 100%; }
	.etd-price { flex: 1 1 100%; }
	.etd-price input[type="range"] { flex: 1; width: auto; min-width: 0; max-width: none; }
	.etd-header-in { padding-top: 14px; padding-bottom: 12px; }
	.etd-menu { gap: 4px 18px; }
	.etd .etd-menu a { font-size: .9375rem; }
	.etd-goals { grid-template-columns: 1fr; }
	.etd-checks { padding: 22px; }
	.etd-plan { padding: 20px; }
	.etd-plan--featured { padding-left: 14px; }
	.etd-footer-menu { grid-template-columns: 1fr; }
	.etd .etd-close-in a.etd-btn--inline { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.etd * { transition: none !important; animation: none !important; }
}