/*
Theme Name:   EEG Twenty Twenty Child
Theme URI:    https://www.eeg.org.uk/
Description:  Modern, clean child theme for eeg.org.uk, built on Twenty Twenty. Inter typography, navy and blue palette, compact sticky header, styled content boxes, tables, product grids and a dark footer.
Author:       eeg.org.uk
Template:     twentytwenty
Version:      1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  eeg-twentytwenty-child
*/

/* ---------------------------------------------------------------
   1. Design tokens
--------------------------------------------------------------- */
:root {
	--eeg-ink: #0f172a;
	--eeg-text: #334155;
	--eeg-muted: #64748b;
	--eeg-line: #e2e8f0;
	--eeg-soft: #f6f8fb;
	--eeg-accent: #1f7fae;
	--eeg-accent-dark: #17668d;
	--eeg-accent-soft: #e8f3f9;
	--eeg-navy: #0b1f33;
	--eeg-navy-2: #12304d;
	--eeg-radius: 14px;
	--eeg-radius-sm: 8px;
	--eeg-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06);
	--eeg-font: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--eeg-content: 72rem;
}

/* ---------------------------------------------------------------
   2. Base
--------------------------------------------------------------- */
body.eeg-child {
	background: #fff;
	color: var(--eeg-text);
	font-family: var(--eeg-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.eeg-child .entry-content,
.eeg-child .entry-content p,
.eeg-child .entry-content li,
.eeg-child .entry-content td,
.eeg-child .entry-content th,
.eeg-child input,
.eeg-child textarea,
.eeg-child select,
.eeg-child button {
	font-family: var(--eeg-font);
}

.eeg-child h1, .eeg-child h2, .eeg-child h3, .eeg-child h4, .eeg-child h5, .eeg-child h6,
.eeg-child .heading-size-1, .eeg-child .heading-size-2, .eeg-child .heading-size-3 {
	color: var(--eeg-ink);
	font-family: var(--eeg-font);
	letter-spacing: -0.02em;
}

.eeg-child a {
	color: var(--eeg-accent);
	transition: color .15s ease;
}

.eeg-child a:hover,
.eeg-child a:focus {
	color: var(--eeg-accent-dark);
}

.eeg-child ::selection {
	background: var(--eeg-accent-soft);
	color: var(--eeg-ink);
}

/* ---------------------------------------------------------------
   3. Header
--------------------------------------------------------------- */
.eeg-child #site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--eeg-line);
}

.admin-bar.eeg-child #site-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar.eeg-child #site-header { top: 0; position: relative; }
}

.eeg-child .header-inner {
	padding: 1.2rem 0;
	max-width: 120rem;
}

.eeg-child .header-titles-wrapper { padding: 0; }

.eeg-child .site-logo img,
.eeg-child .custom-logo {
	max-height: 4.4rem;
	width: auto;
	border-radius: 10px;
}

.eeg-child .site-description {
	color: var(--eeg-muted);
	font-family: var(--eeg-font);
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0;
}

.eeg-child .primary-menu > li > a,
.eeg-child .primary-menu > li > .icon + a {
	color: var(--eeg-ink);
	font-size: 1.5rem;
	font-weight: 600;
	padding: .6rem 1.2rem;
	border-radius: 999px;
	transition: background .15s ease, color .15s ease;
}

.eeg-child .primary-menu > li {
	margin: 0 0 0 .4rem;
}

.eeg-child .primary-menu > li > a:hover,
.eeg-child .primary-menu > li > a:focus,
.eeg-child .primary-menu > li.current-menu-item > a {
	background: var(--eeg-soft);
	color: var(--eeg-accent);
	text-decoration: none;
}

/* "Shop" link as a pill button */
.eeg-child .primary-menu > li:first-child > a {
	background: var(--eeg-accent);
	color: #fff;
}
.eeg-child .primary-menu > li:first-child > a:hover,
.eeg-child .primary-menu > li:first-child > a:focus {
	background: var(--eeg-accent-dark);
	color: #fff;
}

.eeg-child .header-toggles .toggle-text,
.eeg-child .mobile-nav-toggle .toggle-text {
	color: var(--eeg-muted);
	font-weight: 600;
}

.eeg-child .toggle-icon svg,
.eeg-child .header-toggles .toggle svg {
	fill: var(--eeg-ink);
}

.eeg-child .header-inner .toggle-wrapper::before {
	background: var(--eeg-line);
}

/* Slide-out menu */
.eeg-child .menu-modal { background: #fff; }
.eeg-child .menu-modal .modal-menu a {
	color: var(--eeg-ink);
	font-family: var(--eeg-font);
	font-weight: 600;
}
.eeg-child .menu-modal .modal-menu a:hover { color: var(--eeg-accent); }
.eeg-child .menu-modal * { border-color: var(--eeg-line); }

/* ---------------------------------------------------------------
   4. Page header
--------------------------------------------------------------- */
.eeg-child .entry-header {
	background:
		radial-gradient(1200px 300px at 50% -40%, rgba(31, 127, 174, .14), transparent 70%),
		linear-gradient(180deg, var(--eeg-soft), #fff);
	padding: 6rem 0 3.6rem;
	border-bottom: 1px solid var(--eeg-line);
}

.eeg-child .entry-header .entry-title,
.eeg-child h1.entry-title {
	font-size: clamp(3.2rem, 5vw, 5.2rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	max-width: 90rem;
	margin: 0 auto;
}

.eeg-child .post-meta-wrapper,
.eeg-child .entry-categories { display: none; }

.eeg-child .featured-media { margin-top: 0; }

.eeg-child .post-inner,
.eeg-child.singular .post-inner,
.eeg-child.missing-post-thumbnail .post-inner,
.eeg-child.reduced-spacing .post-inner { padding-top: 4.8rem; }

/* ---------------------------------------------------------------
   5. Content typography
--------------------------------------------------------------- */
.eeg-child .entry-content {
	color: var(--eeg-text);
	font-size: 1.8rem;
	line-height: 1.75;
	letter-spacing: -0.003em;
}

@media (min-width: 700px) {
	.eeg-child .entry-content { font-size: 1.9rem; }
}

.eeg-child .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: var(--eeg-content);
}

.eeg-child .entry-content p,
.eeg-child .entry-content ul,
.eeg-child .entry-content ol {
	margin-bottom: 1.4em;
}

.eeg-child .entry-content strong { color: var(--eeg-ink); }

.eeg-child .entry-content h2 {
	font-size: clamp(2.6rem, 3.2vw, 3.2rem);
	font-weight: 750;
	line-height: 1.2;
	margin: 2.2em auto .7em;
}

.eeg-child .entry-content h3 {
	font-size: clamp(2.1rem, 2.4vw, 2.4rem);
	font-weight: 700;
	line-height: 1.3;
	margin: 1.8em auto .6em;
}

.eeg-child .entry-content h4 {
	font-size: 2rem;
	font-weight: 700;
	margin: 1.6em auto .5em;
}

.eeg-child .entry-content a {
	color: var(--eeg-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	text-decoration-color: rgba(31, 127, 174, .35);
}

.eeg-child .entry-content a:hover {
	text-decoration-color: currentColor;
}

.eeg-child .entry-content ul li::marker { color: var(--eeg-accent); }
.eeg-child .entry-content li { margin-bottom: .45em; }

.eeg-child .entry-content blockquote {
	border-left: 4px solid var(--eeg-accent);
	background: var(--eeg-soft);
	border-radius: 0 var(--eeg-radius-sm) var(--eeg-radius-sm) 0;
	padding: 1.6rem 2.2rem;
	color: var(--eeg-ink);
}

.eeg-child .entry-content hr,
.eeg-child hr.wp-block-separator,
.eeg-child .styled-separator {
	border: 0;
	height: 1px;
	background: var(--eeg-line);
	color: var(--eeg-line);
	margin: 5rem auto;
}

.eeg-child hr.styled-separator::before,
.eeg-child hr.styled-separator::after,
.eeg-child .wp-block-separator::before,
.eeg-child .wp-block-separator::after { display: none; }

.eeg-child .entry-content figcaption,
.eeg-child .wp-caption-text {
	color: var(--eeg-muted);
	font-family: var(--eeg-font);
	font-size: 1.4rem;
}

.eeg-child .entry-content img { border-radius: var(--eeg-radius-sm); }

/* ---------------------------------------------------------------
   6. Content boxes (inline-styled CTA and info boxes in posts)
--------------------------------------------------------------- */
.eeg-child .entry-content div[style*="border:2px solid #1f7fae"] {
	border: 1px solid rgba(31, 127, 174, .25) !important;
	background: linear-gradient(135deg, #f2f9fd 0%, #ffffff 60%);
	border-radius: var(--eeg-radius) !important;
	box-shadow: var(--eeg-shadow);
	padding: 2.4rem 2.6rem !important;
}

.eeg-child .entry-content div[style*="background:#f7f7f7"] {
	background: var(--eeg-soft) !important;
	border: 1px solid var(--eeg-line);
	border-radius: var(--eeg-radius) !important;
}

.eeg-child .entry-content a[style*="background:#1f7fae"] {
	background: var(--eeg-accent) !important;
	box-shadow: 0 6px 16px rgba(31, 127, 174, .28);
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.eeg-child .entry-content a[style*="background:#1f7fae"]:hover,
.eeg-child .entry-content a[style*="background:#1f7fae"]:focus {
	background: var(--eeg-accent-dark) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(31, 127, 174, .32);
}

/* ---------------------------------------------------------------
   7. Buttons and forms
--------------------------------------------------------------- */
.eeg-child button,
.eeg-child .button,
.eeg-child .faux-button,
.eeg-child .wp-block-button__link,
.eeg-child input[type="button"],
.eeg-child input[type="reset"],
.eeg-child input[type="submit"] {
	background: var(--eeg-accent);
	color: #fff;
	border-radius: 999px;
	font-family: var(--eeg-font);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	padding: 1.3em 2.2em;
	transition: background .15s ease, transform .15s ease;
}

.eeg-child button:hover,
.eeg-child .button:hover,
.eeg-child .wp-block-button__link:hover,
.eeg-child input[type="submit"]:hover {
	background: var(--eeg-accent-dark);
	color: #fff;
	text-decoration: none;
}

/* Twenty Twenty's header and menu toggles are buttons too: keep them plain */
.eeg-child .toggle,
.eeg-child .toggle:hover,
.eeg-child .close-nav-toggle,
.eeg-child .sub-menu-toggle {
	background: none;
	color: inherit;
	padding: 0;
	border-radius: 0;
	transform: none;
}
.eeg-child .header-inner .toggle,
.eeg-child .mobile-nav-toggle { padding: 1rem 1.2rem; }

.eeg-child input[type="text"],
.eeg-child input[type="email"],
.eeg-child input[type="url"],
.eeg-child input[type="search"],
.eeg-child input[type="tel"],
.eeg-child textarea,
.eeg-child select {
	border: 1px solid var(--eeg-line);
	border-radius: var(--eeg-radius-sm);
	background: #fff;
	color: var(--eeg-ink);
	padding: 1.2rem 1.4rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.eeg-child input:focus,
.eeg-child textarea:focus,
.eeg-child select:focus {
	border-color: var(--eeg-accent);
	box-shadow: 0 0 0 3px var(--eeg-accent-soft);
	outline: none;
}

.eeg-child .wpcf7 label { color: var(--eeg-ink); font-weight: 600; font-size: 1.6rem; }

/* ---------------------------------------------------------------
   8. Tables
--------------------------------------------------------------- */
.eeg-child .wp-block-table {
	width: 100%;
	overflow-x: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
	-webkit-overflow-scrolling: touch;
}

.eeg-child .entry-content table {
	width: 100%;
	border: 1px solid var(--eeg-line) !important;
	border-radius: var(--eeg-radius);
	border-collapse: separate !important;
	border-spacing: 0;
	overflow: hidden;
	font-size: 1.6rem;
	line-height: 1.5;
	margin: 2.4rem auto;
}

.eeg-child .entry-content th,
.eeg-child .entry-content td {
	border: 0 !important;
	border-bottom: 1px solid var(--eeg-line) !important;
	padding: 1.2rem 1.4rem !important;
	text-align: left;
	vertical-align: top;
	white-space: normal;
}

.eeg-child .entry-content thead th,
.eeg-child .entry-content tr:first-child th {
	background: var(--eeg-navy) !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 1.5rem;
	border-bottom: 0 !important;
}

.eeg-child .entry-content tbody tr:nth-child(even) td { background: var(--eeg-soft); }
.eeg-child .entry-content tbody tr:last-child td { border-bottom: 0 !important; }

@media (max-width: 782px) {
	.eeg-child .wp-block-table table { min-width: 560px; }
	.eeg-child .entry-content th,
	.eeg-child .entry-content td { font-size: 1.4rem; padding: 1rem 1.1rem !important; }
}

/* ---------------------------------------------------------------
   9. Table of contents (Easy TOC)
--------------------------------------------------------------- */
.eeg-child #ez-toc-container {
	background: var(--eeg-soft);
	border: 1px solid var(--eeg-line);
	border-radius: var(--eeg-radius);
	box-shadow: none;
	padding: 1.8rem 2.2rem;
	width: calc(100% - 4rem);
	max-width: var(--eeg-content);
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	font-family: var(--eeg-font);
}

.eeg-child #ez-toc-container .ez-toc-title {
	color: var(--eeg-ink);
	font-size: 1.6rem;
	font-weight: 700;
}

.eeg-child #ez-toc-container a {
	color: var(--eeg-text);
	text-decoration: none;
	font-size: 1.6rem;
}

.eeg-child #ez-toc-container a:hover { color: var(--eeg-accent); }

/* ---------------------------------------------------------------
   10. Content Egg product cards
--------------------------------------------------------------- */
.eeg-child .cegg5-container .card,
.eeg-child .cegg-container .card {
	border: 1px solid var(--eeg-line);
	border-radius: var(--eeg-radius);
	box-shadow: none;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
	overflow: hidden;
}

.eeg-child .cegg5-container .card:hover,
.eeg-child .cegg-container .card:hover {
	border-color: rgba(31, 127, 174, .35);
	box-shadow: var(--eeg-shadow);
	transform: translateY(-2px);
}

.eeg-child .cegg5-container .btn,
.eeg-child .cegg-container .btn {
	border-radius: 999px;
	font-family: var(--eeg-font);
	font-weight: 700;
}

.eeg-child .cegg5-container a,
.eeg-child .cegg-container a { text-decoration: none; }

/* Centre the Muse product image columns used on the shop page */
.eeg-child .muse-columns {
	justify-content: center !important;
	gap: 20px !important;
}
.eeg-child .muse-columns > .wp-block-column {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: fit-content;
}

/* ---------------------------------------------------------------
   11. Embeds
--------------------------------------------------------------- */
.eeg-child .entry-content iframe {
	border-radius: var(--eeg-radius);
	box-shadow: var(--eeg-shadow);
}

/* ---------------------------------------------------------------
   12. Footer
--------------------------------------------------------------- */
.eeg-child .footer-nav-widgets-wrapper,
.eeg-child #site-footer {
	background: var(--eeg-navy);
	color: #cbd5e1;
	border-color: rgba(255, 255, 255, .08);
}

.eeg-child .footer-nav-widgets-wrapper { margin-top: 8rem; }

.eeg-child .footer-widgets-outer-wrapper,
.eeg-child .footer-top { border-color: rgba(255, 255, 255, .08); }

.eeg-child .footer-widgets-outer-wrapper { padding: 6rem 0 4rem; }

.eeg-child .footer-nav-widgets-wrapper a,
.eeg-child #site-footer a {
	color: #e2e8f0;
	text-decoration: none;
}

.eeg-child .footer-nav-widgets-wrapper a:hover,
.eeg-child #site-footer a:hover { color: #7cc4e8; }

.eeg-child .widget .widget-title,
.eeg-child .footer-widgets .widget-title {
	color: #fff;
	font-family: var(--eeg-font);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.eeg-child .footer-widgets .widget_nav_menu ul,
.eeg-child .footer-widgets .widget_block ul {
	display: grid;
	grid-template-columns: 1fr;
	gap: .2rem 3rem;
	list-style: none;
	margin: 0;
}

@media (min-width: 700px) {
	.eeg-child .footer-widgets .widget_nav_menu ul,
	.eeg-child .footer-widgets .widget_block ul { grid-template-columns: 1fr 1fr; }
}

.eeg-child .footer-widgets li {
	font-family: var(--eeg-font);
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
	padding: .7rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.eeg-child .footer-widgets .search-form .search-field {
	background: var(--eeg-navy-2);
	border-color: rgba(255, 255, 255, .12);
	color: #fff;
}

.eeg-child .footer-widgets .search-form .search-submit {
	background: var(--eeg-accent);
}

.eeg-child #site-footer {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 2.6rem 0;
	font-size: 1.4rem;
}

.eeg-child #site-footer .footer-credits { color: #94a3b8; }
.eeg-child .powered-by-wordpress { display: none; }

/* ---------------------------------------------------------------
   13. Full-width template pages
--------------------------------------------------------------- */
.eeg-child.page-template-template-full-width .entry-content > *:not(.alignwide):not(.alignfull) {
	max-width: 110rem;
}

/* ---------------------------------------------------------------
   14. Small screens
--------------------------------------------------------------- */
@media (max-width: 699px) {
	.eeg-child .entry-header { padding: 4rem 0 2.6rem; }
	.eeg-child .post-inner,
	.eeg-child.singular .post-inner,
	.eeg-child.missing-post-thumbnail .post-inner,
	.eeg-child.reduced-spacing .post-inner { padding-top: 3.2rem; }
	.eeg-child .entry-content div[style*="border:2px solid #1f7fae"] { padding: 2rem !important; }
	.eeg-child .site-description { display: none; }
	.eeg-child #ez-toc-container { padding: 1.4rem 1.6rem; }
	.eeg-child #ez-toc-container a { font-size: 1.5rem; }
	.eeg-child .site-logo img,
	.eeg-child .custom-logo { max-height: 3.8rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.eeg-child *,
	.eeg-child *::before,
	.eeg-child *::after { transition: none !important; transform: none !important; }
}