/*
Theme Name: Extendable
Theme URI: https://niallgallacher.uk
Author: Niall Gallacher
Author URI: https://niallgallacher.uk
Description: Custom editorial design for niallgallacher.uk. Built on Extendable.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 2.1.9-ng2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: extendable
Update URI: false
Tags: blog, one-column, custom-colors, custom-menu, editor-style, featured-images, full-site-editing

Based on Extendable by Extendify Inc. (GPLv2), itself derived from Twenty Twenty-Two.
*/

:root {
	color-scheme: dark;
	--ng-line: var(--wp--preset--color--border);
	--ng-head: var(--wp--preset--color--heading);
	--ng-muted: var(--wp--preset--color--muted);
	--wp--custom--spacing--small: var(--wp--preset--spacing--30);
	--wp--custom--spacing--medium: var(--wp--preset--spacing--50);
	--wp--custom--spacing--large: var(--wp--preset--spacing--60);
	--wp--custom--spacing--outer: max(1.25rem, 4vw);
	/* Highlight for hovered / focused / open boxes (7 Nov 2026):
	   a contrasting mid grey galaxy (replacing the earlier dark orange
	   #A64A16). White text on #56565C passes WCAG AA. The stars, Milky Way
	   band and constellations are under "Highlight sky" at the end. */
	--ng-hl-color: #56565C;
	--ng-hl-border: #8A8A90;
	--ng-hl-text-soft: #EDEDED;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection { background: #EDEDED; color: #121212; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 1px solid var(--ng-head);
	outline-offset: 3px;
}

a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: rgba(169, 169, 169, 0.45); }
a:hover { text-decoration-color: var(--wp--preset--color--accent); }

strong { color: var(--ng-head); font-weight: 500; }

/* Header ---------------------------------------------------------------- */
.ng-header { border-bottom: 1px solid var(--ng-line); background: var(--wp--preset--color--background); }

.ng-header .wp-block-site-title a { color: var(--ng-head); }

.ng-header .wp-block-navigation-item__content { color: var(--ng-muted); transition: color 0.15s ease; }

.ng-header .wp-block-navigation-item__content:hover,
.ng-header [aria-current="page"] { color: var(--ng-head); }

.ng-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--ng-line) !important;
	padding: 0.4rem 0;
}

.ng-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--background);
	padding: 2rem 1.5rem;
}

.ng-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.25rem;
	color: var(--ng-head);
}

.ng-header .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--ng-muted);
	padding: 0.4rem;
}

.ng-header .wp-block-search__button:hover { color: var(--ng-head); }

/* Labels --------------------------------------------------------------- */
.ng-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.ng-label a { color: inherit; text-decoration: none; }

.ng-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--wp--preset--color--foreground);
}

.ng-muted { color: var(--ng-muted); }

/* Editorial sections ----------------------------------------------------- */
.ng-section {
	border-top: 1px solid var(--ng-line);
	padding-top: var(--wp--preset--spacing--50) !important;
	padding-bottom: var(--wp--preset--spacing--50) !important;
	margin-top: 0 !important;
}

.ng-section h2 { margin-bottom: 1.5rem; }

.ng-entity-hero {
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--50) !important;
}

.ng-entity-hero h1 { font-size: clamp(2.8rem, 7vw, 5rem); line-height: 1.02; }
.ng-entity-hero h1 .ng-sep, .ng-home-hero h1 .ng-sep { display: none; }
.ng-entity-hero h1 .ng-role, .ng-home-hero h1 .ng-role {
	display: block;
	margin-top: 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.1rem, 2.2vw, 1.45rem);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--wp--preset--color--foreground);
}

.ng-updated { margin-top: var(--wp--preset--spacing--40) !important; }

.ng-section > .wp-block-columns { gap: var(--wp--preset--spacing--40); }

@media (min-width: 782px) {
	.ng-section-head { position: sticky; top: 2rem; align-self: flex-start; }
}

.ng-h1-sub {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ng-muted);
}

/* Definition-style lists (specialisms, method, profiles) */
.ng-defs > * + * { border-top: 1px solid var(--ng-line); }
.ng-defs > * { padding-top: 1.5rem; padding-bottom: 0.25rem; }
.ng-defs > *:first-child { padding-top: 0; }
.ng-defs h3 { margin-bottom: 0.5rem; }

.ng-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.ng-steps li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: 0.25rem 1rem;
	padding: 1.1rem 0;
	border-top: 1px solid var(--ng-line);
	margin: 0;
}
.ng-steps li:last-child { border-bottom: 1px solid var(--ng-line); }
.ng-steps li::before {
	content: counter(step, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ng-head);
}
/* "How I approach SEO": stronger step names (7 Nov 2026) */
.ng-steps li strong { font-weight: 700; color: #fff; }

.ng-linklist { list-style: none; padding: 0; margin: 0; }
.ng-linklist li { border-top: 1px solid var(--ng-line); margin: 0; }
.ng-linklist li:last-child { border-bottom: 1px solid var(--ng-line); }
.ng-linklist a {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem 0;
	text-decoration: none;
	color: var(--ng-head);
}
.ng-linklist a::after { content: "\2192"; color: var(--ng-muted); transition: transform 0.15s ease; }
.ng-linklist a:hover::after { transform: translateX(3px); color: var(--ng-head); }

.ng-pending {
	border-left: 1px solid var(--ng-line);
	padding-left: 1rem !important;
	color: var(--ng-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Post lists: editorial rows, not cards --------------------------------- */
.ng-card {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem 2.5rem;
	padding: 1.75rem 0;
	border-top: 1px solid var(--ng-line);
	background: none !important;
	height: auto;
}

.wp-block-post-template > li:last-child .ng-card { border-bottom: 1px solid var(--ng-line); }

.ng-card .wp-block-post-featured-image { margin: 0; display: none; }

@media (min-width: 782px) {
	.ng-card:has(.wp-block-post-featured-image) { grid-template-columns: minmax(0, 1fr) 220px; }
	.ng-card .wp-block-post-featured-image { display: block; grid-column: 2; grid-row: 1; }
}

.ng-card .wp-block-post-featured-image img { border-radius: 2px; filter: grayscale(0.4); transition: filter 0.2s ease; }
.ng-card:hover .wp-block-post-featured-image img { filter: none; }

.ng-card-body { grid-column: 1; grid-row: 1; padding: 0 !important; }
.ng-card .wp-block-post-title { margin: 0.2rem 0 0; }
.ng-card .wp-block-post-excerpt { margin: 0; }
.ng-card .wp-block-post-excerpt__more-text { display: none; }

.wp-block-post-template { gap: 0 !important; }

/* Category filter */
.ng-pills.wp-block-categories,
.ng-pills .wp-block-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.ng-pills li { margin: 0; }
.ng-pills a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ng-muted);
	text-decoration: none;
}
.ng-pills a:hover, .ng-pills .current-cat a { color: var(--ng-head); }

/* Article --------------------------------------------------------------- */
.ng-article .wp-block-post-content h2 { margin-top: 2.75rem; }
.ng-article .wp-block-post-content h3 { margin-top: 2rem; }
.ng-article .wp-block-post-content img { border-radius: 2px; }
.ng-article .wp-element-caption { text-align: left; font-size: var(--wp--preset--font-size--small); color: var(--ng-muted); }

.ng-article :not(pre) > code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.88em;
	background: var(--wp--preset--color--secondary);
	color: var(--ng-head);
	padding: 0.1em 0.35em;
	border-radius: 2px;
}

.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th, .wp-block-table td { border: 1px solid var(--ng-line) !important; padding: 0.6rem 0.8rem; }
.wp-block-table th { font-weight: 500; text-align: left; color: var(--ng-head); }

.ng-meta-row { row-gap: 0.4rem; }
.ng-meta-row > * { margin: 0; }
.ng-meta-row .wp-block-post-date::before { content: "Published "; }
.ng-meta-row .wp-block-post-date__modified-date::before { content: "Updated "; }

.ng-tags a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--ng-muted) !important;
	text-decoration: none;
	margin-right: 0.9rem;
}
.ng-tags a::before { content: "#"; }
.ng-tags .wp-block-post-terms__separator { display: none; }

.ng-author-box { border-top: 1px solid var(--ng-line); border-bottom: 1px solid var(--ng-line); }

/* Timeline -------------------------------------------------------------- */
.ng-timeline { position: relative; padding-left: 1.75rem !important; }
.ng-timeline::before {
	content: "";
	position: absolute;
	left: 0.3rem;
	top: 0.6rem;
	bottom: 0.6rem;
	width: 1px;
	background: var(--ng-line);
}
.ng-timeline-item { position: relative; }
.ng-timeline-item::before {
	content: "";
	position: absolute;
	left: -1.75rem;
	top: 0.5rem;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--ng-muted);
}
.ng-timeline-item.is-current::before { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }

/* Hero portrait (shown once a photo is added) */
.ng-portrait img { border-radius: 2px; filter: grayscale(0.15); }
.ng-entity-hero .ng-h1-sub { color: var(--wp--preset--color--accent); }

/* Buttons ---------------------------------------------------------------- */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--ng-head);
	border-color: #3a3a3a;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--ng-head); background: transparent; color: #fff; }

/* Forms ------------------------------------------------------------------ */
input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], textarea, select,
.wp-block-search__input {
	background: var(--wp--preset--color--tertiary) !important;
	color: var(--ng-head) !important;
	border: 1px solid var(--ng-line) !important;
	border-radius: 2px !important;
}
input::placeholder, textarea::placeholder { color: #6a6a6a; }

.wp-block-search__button:not(.has-icon) { border-radius: 2px; }

.wpforms-container .wpforms-field-label { color: var(--ng-head) !important; font-weight: 500 !important; }
.wpforms-container button[type="submit"] {
	background: var(--ng-head) !important;
	color: #080808 !important;
	border: 0 !important;
	border-radius: 2px !important;
}

/* Footer ---------------------------------------------------------------- */
.ng-footer { border-top: 1px solid var(--ng-line); }
.ng-footer h2 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ng-muted);
	margin-bottom: 1rem;
}
.ng-footer ul { list-style: none; padding: 0; margin: 0; }
.ng-footer li { margin: 0 0 0.25rem; }
.ng-footer a { color: var(--wp--preset--color--foreground); text-decoration: none; font-size: var(--wp--preset--font-size--small); }
/* Tap targets (8 Nov 2026): every footer and header link at least 24px tall and wide */
.ng-footer a, .wp-block-site-title a, .ng-rss a, header .wp-block-group > p.has-display-font-family > a { display: inline-block; min-height: 24px; min-width: 24px; padding-block: 4px; line-height: 1.2; box-sizing: border-box; }
.wp-block-navigation .wp-block-navigation-item__content { min-height: 28px; display: inline-flex; align-items: center; }
/* SEO Research dropdown (8 Nov 2026): dark faded panel like the boxes */
.wp-block-navigation:not(.is-menu-open) .wp-block-navigation__submenu-container {
	background: rgba(14, 14, 16, 0.92) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 16px;
	padding: 0.5rem !important;
	min-width: 15rem !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	width: 100%;
	padding: 0.5rem 0.8rem !important;
	border-radius: 10px;
	color: var(--wp--preset--color--foreground);
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: rgba(130, 130, 140, 0.32);
	color: #fff;
}
.ng-footer a:hover { color: #fff; }
/* Footer (7 Nov 2026): Profiles in the middle, Site links on the far right */
@media (min-width: 782px) {
	.ng-footer .ng-footer-site { text-align: right; }
}

/* Pagination & empty states --------------------------------------------- */
.wp-block-query-pagination a { color: var(--ng-muted); text-decoration: none; }
.wp-block-query-pagination a:hover { color: var(--ng-head); }
.wp-block-query-pagination .page-numbers.current { color: var(--ng-head); }

.ng-empty { border-top: 1px solid var(--ng-line); padding-top: 1.5rem !important; color: var(--ng-muted); }

/* Homepage (proposal layout) ------------------------------------------- */
h1, h2 { font-weight: 500; }

.ng-band { padding-top: clamp(2.75rem, 5vw, 4.5rem) !important; padding-bottom: clamp(2.75rem, 5vw, 4.5rem) !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.ng-band.is-graphite { background: var(--wp--preset--color--tertiary); }
.ng-band.is-tight-top { padding-top: 0 !important; }
.ng-band h2 { font-size: clamp(2rem, 4vw, 2.75rem); letter-spacing: -0.01em; margin: 0; }

.ng-home-hero {
	min-height: 0;
	padding-top: clamp(3.5rem, 7vw, 5.5rem) !important;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	background-color: var(--wp--preset--color--background);
	background-size: cover;
	background-position: center;
	position: relative;
}
.ng-home-hero > * { position: relative; width: 100%; }

/* Hero background area: content styling over the starfield (see below). */
.ng-photo-wrap .ng-home-hero { background-color: transparent; }
.ng-photo-wrap .ng-on-rocks { padding-bottom: clamp(2.5rem, 5vw, 4rem) !important; }
.ng-photo-wrap + .ng-band { padding-top: clamp(1.5rem, 3vw, 2.5rem) !important; }
.ng-photo-wrap .ng-on-rocks .ng-label { color: #DADADA; }
/* Boxes over the starfield are faded so the stars show through (7 Nov 2026) */
.ng-on-rocks .ng-focus-item:not(:hover):not(:focus-within):not([open]) {
	background: rgba(18, 18, 18, 0.22);
	border-color: rgba(255, 255, 255, 0.22);
}
/* Hero background: monochrome Milky Way starfield (6 Nov 2026).
   Replaces the Pembrokeshire coastline photo; the original block is saved in
   backups/hero-coastline-background-2026-11-06.css.
   Layers, back to front:
   - ::before: the starfield, stretched edge to edge across the whole window
     (not just the content column), drifting very slowly sideways
     (110s per full cycle, CSS only, still for reduced motion)
   - ::after: a see-through grey panel the hero content sits in
   All text stays real HTML above these decorative layers. */
/* Stop the full-width starfield (and Windows scrollbars) causing sideways
   scrolling. "clip" where supported; older browsers fall back to "hidden". */
body { overflow-x: hidden; }
@supports (overflow: clip) {
	body { overflow-x: clip; }
}
/* Page background starfield (7 Nov 2026, v2): the Milky Way photo now sits
   behind the whole page from the very top (header included), running as
   far down as the photo naturally reaches at full width, then fading out.
   No grey panel; the text boxes on top are faded so the stars show through.
   Applies to every page. */
.ng-photo-wrap {
	margin-top: 0 !important;
	position: relative;
	background-color: transparent;
}
.wp-site-blocks {
	--ng-stars: url("/wp-content/uploads/2026/11/niall-gallacher-seo-professional-pembrokeshire-wales-starfield.jpg");
	--ng-stars-pos: 62% top;
	/* Photo height at full width (16:9 of the 106vw layer), never shorter than the screen */
	--ng-stars-h: max(100vh, 59.6vw);
	position: relative;
	isolation: isolate;
}
/* 6vw wider than the window so the slow drift never shows an edge */
.wp-site-blocks::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	top: 0;
	left: calc(50% - 53vw);
	width: 106vw;
	height: var(--ng-stars-h);
	background-color: #050505;
	background-image: var(--ng-stars);
	background-size: cover;
	background-position: var(--ng-stars-pos);
	background-repeat: no-repeat;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	transform: translate3d(-3vw, 0, 0);
	animation: ng-star-drift 180s ease-in-out infinite alternate; /* 9 Nov 2026: slowed from 55s */
	will-change: transform;
}
@keyframes ng-star-drift {
	from { transform: translate3d(-3vw, 0, 0); }
	to   { transform: translate3d(3vw, 0, 0); }
}

/* Tablets: keep the Milky Way in view as the frame narrows */
@media (min-width: 782px) and (max-width: 1199px) {
	.wp-site-blocks { --ng-stars-pos: 68% top; }
}

/* Phones: portrait-composed starfield (9:16 of the layer) */
@media (max-width: 781px) {
	.wp-site-blocks {
		--ng-stars: url("/wp-content/uploads/2026/11/niall-gallacher-seo-professional-pembrokeshire-wales-starfield-mobile.jpg");
		--ng-stars-pos: center top;
		--ng-stars-h: max(100vh, 188vw);
	}
}

/* Visitors who ask for less motion get the still image */
@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks::before { animation: none; transform: none; will-change: auto; left: calc(50% - 50vw); width: 100vw; }
}

/* Let the stars show through the header and the solid panels (faded boxes) */
.ng-header { background: rgba(10, 10, 12, 0.35) !important; border-bottom-color: rgba(255, 255, 255, 0.08); }
.ng-home-hero { background-color: transparent !important; }
.ng-band.is-graphite { background: rgba(26, 26, 26, 0.45); }
.ng-feature { background: rgba(26, 26, 26, 0.45) !important; border-color: rgba(255, 255, 255, 0.14) !important; }
.ng-quote-box { background: rgba(34, 34, 34, 0.5) !important; }
.ng-progress { border-color: rgba(255, 255, 255, 0.14) !important; }
.ng-progress li { background: rgba(18, 18, 18, 0.35) !important; border-top-color: rgba(255, 255, 255, 0.1) !important; }
.ng-focus-item:not(:hover):not(:focus-within):not([open]) { background: rgba(18, 18, 18, 0.22); border-color: rgba(255, 255, 255, 0.2); }
.ng-profile:not(:hover):not(:focus-visible) { background: rgba(18, 18, 18, 0.22); border-color: rgba(255, 255, 255, 0.2); }
.ng-home-hero h1 { font-size: clamp(3.25rem, 8vw, 6rem); line-height: 0.98; letter-spacing: -0.02em; margin: 0; }
.ng-tagline {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.2;
	color: var(--ng-head);
	margin: 0;
}

.ng-now {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1px;
	background: var(--ng-line);
	border: 1px solid var(--ng-line);
	border-radius: 18px;
	overflow: hidden;
	margin-top: 2rem !important;
}
.ng-now > * {
	background: var(--wp--preset--color--background);
	padding: 1.75rem !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.ng-now > * > * { margin: 0 !important; }
.ng-now h3 { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; font-weight: 500; }
.ng-now p:last-child { color: var(--ng-muted); font-size: 1rem; line-height: 1.6; }

.ng-tag {
	align-self: flex-start;
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	border: 1px solid #5a5a5a;
	color: var(--ng-head);
}
.ng-tag.is-ongoing { background: #EDEDED; border-color: #EDEDED; color: #121212; }
.ng-tag.is-planned { background: #A9A9A9; border-color: #A9A9A9; color: #121212; }

.ng-section-head { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.75rem !important; }
.ng-section-head > * { margin: 0 !important; }

.ng-feature {
	border: 1px solid var(--ng-line);
	border-radius: 22px;
	background: var(--wp--preset--color--tertiary);
	padding: clamp(1.5rem, 4vw, 3rem) !important;
	gap: 3rem !important;
}
.ng-feature h3 { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.65rem, 3vw, 2.1rem); font-weight: 500; line-height: 1.15; }
.ng-quote-box { background: var(--wp--preset--color--secondary); border-radius: 14px; padding: 1.25rem 1.4rem !important; }
.ng-quote-box > * { margin: 0 !important; }
.ng-quote-box p:last-child { font-family: var(--wp--preset--font-family--display); font-size: 1.375rem; line-height: 1.3; color: var(--ng-head); margin-top: 0.4rem !important; }

.ng-progress { list-style: none; padding: 0 !important; margin: 1rem 0 0 !important; border: 1px solid var(--ng-line); border-radius: 14px; overflow: hidden; }
.ng-progress li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; margin: 0; font-size: 0.95rem; border-top: 1px solid var(--ng-line); background: var(--wp--preset--color--background); }
.ng-progress li:first-child { border-top: 0; }
.ng-status { color: var(--ng-muted); white-space: nowrap; }
.ng-status.is-done { color: var(--ng-head); font-weight: 500; }

.ng-rows { border-top: 1px solid var(--ng-line); }
.ng-row { display: flex !important; flex-wrap: wrap; gap: 0.5rem 2rem; align-items: baseline; padding: 1.5rem 0 !important; border-bottom: 1px solid var(--ng-line); }
.ng-row > * { margin: 0 !important; }
.ng-row .wp-block-post-date { flex: 0 0 9rem; }
.ng-row .wp-block-post-title { flex: 1 1 24rem; font-family: var(--wp--preset--font-family--display); font-size: 1.375rem; font-weight: 500; }
.ng-rows .ng-empty { border-top: 0; padding: 1.5rem 0 !important; border-bottom: 1px solid var(--ng-line); }

.ng-focus { gap: 2rem !important; }
.ng-focus .wp-block-column { border-top: 1px solid #EDEDED; padding-top: 1.25rem; }
.ng-focus h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.6rem; }
.ng-focus p { color: var(--ng-muted); font-size: 1rem; line-height: 1.65; }

.ng-hello p { font-size: 1.125rem; line-height: 1.65; }

/* Focus areas: rounded, openable boxes; dark orange on hover, focus and open */
.ng-focus {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
	align-items: start;
}
.ng-focus > * { margin: 0 !important; }
.ng-focus-item {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 999px;
	transition: background-color 0.2s ease, border-color 0.2s ease, border-radius 0.2s ease;
}
.ng-focus-item[open] { border-radius: 28px; }
.ng-focus-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: 44px;
	padding: 1.1rem 1.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	color: var(--ng-head);
	border-radius: 999px;
}
.ng-focus-item summary::-webkit-details-marker { display: none; }
.ng-focus-item summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ng-muted);
	transition: transform 0.2s ease;
}
.ng-focus-item[open] summary::after { transform: rotate(45deg); }
.ng-focus-item summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ng-focus-item > :not(summary) { padding: 0 1.75rem; margin: 0 0 0.75rem !important; font-size: 1rem; line-height: 1.65; }
.ng-focus-item > :last-child { padding-bottom: 1.4rem; margin-bottom: 0 !important; }
.ng-focus-item:hover,
.ng-focus-item:focus-within,
.ng-focus-item[open] {
	/* Background: see "Highlight sky" at the end of this file. */
	border-color: var(--ng-hl-border);
}
.ng-focus-item:hover summary,
.ng-focus-item:focus-within summary,
.ng-focus-item[open] summary,
.ng-focus-item:hover summary::after,
.ng-focus-item:focus-within summary::after,
.ng-focus-item[open] summary::after { color: #fff; }
.ng-focus-item[open] p { color: var(--ng-hl-text-soft); }
.ng-now-boxes { margin-top: 2rem !important; }

/* Hero headshot: tall oval frame beside the H1 */
.ng-hero-cols { gap: clamp(2rem, 5vw, 4rem) !important; margin: 0 !important; }
.ng-headshot {
	position: relative;
	width: 100%;
	max-width: 340px;
	aspect-ratio: 4 / 5;
	margin: 0 0 0 auto !important;
	border-radius: 999px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(18, 18, 18, 0.45) 100%);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 0 0 8px rgba(18, 18, 18, 0.25);
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.ng-headshot > * { margin: 0 !important; }
.ng-headshot .ng-label { color: rgba(237, 237, 237, 0.7); }
.ng-headshot figure, .ng-headshot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	border-radius: inherit;
}
/* Keep the headshot to the right of the text at every width */
@media (max-width: 781px) {
	body .wp-block-columns.ng-hero-cols { flex-wrap: nowrap !important; align-items: center !important; position: relative; }
	body .wp-block-columns.ng-hero-cols > .wp-block-column { flex-basis: auto !important; }
	body .wp-block-columns.ng-hero-cols > .wp-block-column:first-child { flex: 1 1 64% !important; min-width: 0; }
	body .wp-block-columns.ng-hero-cols > .wp-block-column:last-child { flex: 0 0 32% !important; }
}
@media (max-width: 599px) {
	/* Phones: small oval pinned top right, beside the label and name */
	body .wp-block-columns.ng-hero-cols { display: block !important; }
	body .wp-block-columns.ng-hero-cols > .wp-block-column:last-child {
		position: absolute;
		top: 0;
		right: 0;
		width: 92px;
		flex: none !important;
	}
	.ng-hero-cols .ng-label,
	.ng-hero-cols h1 { padding-right: 104px; }
	.ng-home-hero .ng-hero-cols h1 { font-size: clamp(2.4rem, 11vw, 3.25rem); }
	.ng-headshot { max-width: 92px; box-shadow: 0 0 0 4px rgba(18, 18, 18, 0.25); }
	.ng-headshot .ng-label { padding-right: 0; font-size: 0.55rem; letter-spacing: 0.06em; text-align: center; }
}
.ng-focus-item > .ng-tag { margin: 0.1rem 1.75rem 0.75rem !important; padding: 0.25rem 0.7rem; }
.ng-focus-item[open] .ng-tag:not(.is-ongoing):not(.is-planned) { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.ng-focus-item[open] .ng-tag.is-ongoing,
.ng-focus-item[open] .ng-tag.is-planned { color: #121212; }
.ng-focus-item[open] a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.6); }

/* Home page: tighter spacing (6 Nov 2026). Scoped to the Home page by its
   body class (page-id-118), which works in every browser, so other pages
   keep their spacing. */
body.page-id-118 .ng-band {
	padding-top: clamp(1.5rem, 2.5vw, 2.25rem) !important;
	padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem) !important;
}
body.page-id-118 .ng-photo-wrap .ng-home-hero {
	padding-top: clamp(2rem, 3.5vw, 2.75rem) !important;
	padding-bottom: clamp(1rem, 2vw, 1.5rem) !important;
}
body.page-id-118 .ng-photo-wrap .ng-on-rocks {
	padding-top: 0 !important;
	padding-bottom: clamp(1.75rem, 3vw, 2.5rem) !important;
}
body.page-id-118 .ng-home-hero .wp-block-column > .wp-block-group > * + * { margin-top: 0.9rem !important; }
body.page-id-118 .ng-photo-wrap + .ng-band { padding-top: clamp(1.25rem, 2.5vw, 2rem) !important; }

/* Sizes: same content, less height */
body.page-id-118 .ng-home-hero h1 { font-size: clamp(2.6rem, 5.5vw, 4.25rem); }
body.page-id-118 .ng-home-hero h1 .ng-role { margin-top: 0.6rem; font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
body.page-id-118 .ng-tagline { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
body.page-id-118 .ng-home-hero .ng-lede { font-size: 1.05rem; line-height: 1.55; }
body.page-id-118 .ng-headshot { max-width: 270px; }
body.page-id-118 .ng-band h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }

/* Openable boxes: slimmer */
body.page-id-118 .ng-now-boxes { margin-top: 0.75rem !important; }
body.page-id-118 .ng-focus { gap: 0.75rem !important; }
body.page-id-118 .ng-focus-item summary { min-height: 44px; padding: 0.75rem 1.4rem; font-size: 1.15rem; }
/* "What I'm focusing on": its three boxes in one row on tablet and desktop,
   stacked one per row on phones */
@media (min-width: 782px) {
	body.page-id-118 .ng-focus:not(.ng-now-boxes) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	body.page-id-118 .ng-focus:not(.ng-now-boxes) { grid-template-columns: minmax(0, 1fr); }
}

/* Featured project: more compact card */
body.page-id-118 .ng-section-head { margin-bottom: 1rem !important; }
body.page-id-118 .ng-feature { gap: 1.75rem !important; padding: clamp(1.25rem, 2.5vw, 1.75rem) !important; border-radius: 18px; }
body.page-id-118 .ng-feature .wp-block-column > * + * { margin-top: 0.75rem !important; }
body.page-id-118 .ng-feature h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
body.page-id-118 .ng-quote-box { padding: 1rem 1.2rem !important; }
body.page-id-118 .ng-quote-box p:last-child { font-size: 1.2rem; }
body.page-id-118 .ng-progress { margin-top: 0.75rem !important; }
body.page-id-118 .ng-progress li { padding: 0.55rem 1rem; }

@media (max-width: 599px) {
	body.page-id-118 .ng-home-hero .ng-hero-cols h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
	body.page-id-118 .ng-home-hero .ng-lede { font-size: 1rem; }
}

/* Research pages (hub + five areas): same starfield hero and spacing as Home.
   Scoped by their page IDs so it works in every browser. */
body.page-id-120 .ng-band, body.page-id-121 .ng-band, body.page-id-122 .ng-band,
body.page-id-123 .ng-band, body.page-id-124 .ng-band, body.page-id-125 .ng-band {
	padding-top: clamp(1.5rem, 2.5vw, 2.25rem) !important;
	padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem) !important;
}
.ng-photo-wrap .ng-home-hero.ng-band { padding-top: clamp(2rem, 3.5vw, 2.75rem) !important; padding-bottom: clamp(1rem, 2vw, 1.5rem) !important; }
.ng-photo-wrap .ng-on-rocks.ng-band { padding-top: 0 !important; padding-bottom: clamp(1.75rem, 3vw, 2.5rem) !important; }
body.page-id-120 .ng-home-hero h1, body.page-id-121 .ng-home-hero h1, body.page-id-122 .ng-home-hero h1,
body.page-id-123 .ng-home-hero h1, body.page-id-124 .ng-home-hero h1, body.page-id-125 .ng-home-hero h1 {
	font-size: clamp(2.4rem, 5vw, 3.75rem);
}
.ng-home-hero h1 .ng-role { margin-top: 0.6rem; }
body.page-id-120 .ng-home-hero .ng-lede, body.page-id-121 .ng-home-hero .ng-lede, body.page-id-122 .ng-home-hero .ng-lede,
body.page-id-123 .ng-home-hero .ng-lede, body.page-id-124 .ng-home-hero .ng-lede, body.page-id-125 .ng-home-hero .ng-lede {
	font-size: 1.05rem;
	line-height: 1.55;
}
body.page-id-121 .ng-band h2, body.page-id-122 .ng-band h2, body.page-id-123 .ng-band h2,
body.page-id-124 .ng-band h2, body.page-id-125 .ng-band h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.ng-photo-wrap .ng-on-rocks h2.ng-label { font-size: var(--wp--preset--font-size--x-small); margin-bottom: 0 !important; }

/* Research hub: each area is a whole clickable card */
.ng-topics {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0.75rem;
	margin-top: 0.75rem !important;
}
.ng-topics > * { margin: 0 !important; }
.ng-topic {
	position: relative;
	padding: 1.1rem 1.3rem !important;
	background: rgba(18, 18, 18, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 18px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ng-topic > * { margin: 0 !important; }
.ng-topic h3 { font-family: var(--wp--preset--font-family--display); font-size: 1.3rem; font-weight: 500; line-height: 1.2; }
.ng-topic h3 a { color: var(--ng-head); text-decoration: none; }
.ng-topic h3 a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; }
.ng-topic h3 a:focus-visible { outline: none; }
.ng-topic:focus-within { outline: 2px solid #fff; outline-offset: 3px; }
.ng-topic p { margin-top: 0.4rem !important; color: var(--ng-muted); font-size: 0.95rem; line-height: 1.55; }
.ng-topic:hover, .ng-topic:focus-within { border-color: var(--ng-hl-border); } /* background: see "Highlight sky" */
.ng-topic:hover p, .ng-topic:focus-within p { color: var(--ng-hl-text-soft); }
/* Five areas laid out like the five on a dice: two, one in the middle, two */
@media (min-width: 782px) {
	.ng-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ng-topics > .ng-topic:nth-child(1) { grid-column: 1; grid-row: 1; }
	.ng-topics > .ng-topic:nth-child(2) { grid-column: 3; grid-row: 1; }
	.ng-topics > .ng-topic:nth-child(3) { grid-column: 2; grid-row: 2; }
	.ng-topics > .ng-topic:nth-child(4) { grid-column: 1; grid-row: 3; }
	.ng-topics > .ng-topic:nth-child(5) { grid-column: 3; grid-row: 3; }
}
/* Projects page (128): same hero, bands and tiles as the research pages (8 Nov 2026) */
body.page-id-128 .ng-band { padding-top: clamp(1.5rem, 2.5vw, 2.25rem) !important; padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem) !important; }
body.page-id-128 .ng-home-hero h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); }
body.page-id-128 .ng-home-hero .ng-lede { font-size: 1.05rem; line-height: 1.55; }
body.page-id-128 .ng-band h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.ng-method { counter-reset: ng-step; }
.ng-method li { counter-increment: ng-step; }
.ng-method li::before { content: counter(ng-step) " · "; font-family: var(--wp--preset--font-family--mono); font-size: 0.8rem; color: var(--ng-muted); }
.ng-method li strong { font-weight: 600; }
/* Contact: less gap between the form and the FAQ panel */
body.page-id-26 .ng-contact { padding-bottom: var(--wp--preset--spacing--40); }
.ng-hub-foot { margin-top: 1.25rem !important; color: var(--wp--preset--color--foreground); font-size: 0.95rem; }

/* Research areas: "What Niall is exploring" as tidy tiles */
.ng-explore {
	list-style: none;
	padding: 0 !important;
	margin: 0.75rem 0 0 !important;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 0.5rem;
}
.ng-explore li {
	margin: 0;
	padding: 0.7rem 1.1rem;
	background: rgba(18, 18, 18, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 14px;
	color: var(--ng-head);
	font-size: 1rem;
	line-height: 1.45;
}

/* About page: profile links box (LinkedIn, X). Same oval style and dark
   orange highlight as the openable boxes; links come from the Person
   schema's sameAs list via the [ng_profiles] shortcode. */
/* About page (7 Nov 2026): starfield hero like the research pages, then
   the reading column. Scoped by page ID. */
body.page-id-127 .ng-home-hero h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); }
body.page-id-127 .ng-home-hero .ng-lede { font-size: 1.05rem; line-height: 1.55; }
body.page-id-127 .ng-photo-wrap .ng-home-hero.ng-band { padding-bottom: clamp(2rem, 4vw, 3rem) !important; }
body.page-id-127 .wp-block-post-content > h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 2.75rem; }
/* Privacy Policy (page 3): same hero and reading column as About */
body.page-id-3 .ng-home-hero h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); }
body.page-id-3 .ng-home-hero .ng-lede { font-size: 1.05rem; line-height: 1.55; }
body.page-id-3 .wp-block-post-content > h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-top: 2.5rem; }
body.page-id-3 .wp-block-post-content > .ng-photo-wrap + * { margin-top: clamp(2rem, 4vw, 3rem); }
body.page-id-3 .wp-block-post-content { padding-bottom: var(--wp--preset--spacing--60); }
body.page-id-127 .wp-block-post-content > .wp-block-buttons { margin-top: 2.5rem; }
body.page-id-127 .wp-block-post-content { padding-bottom: var(--wp--preset--spacing--60); }
body.page-id-127 .wp-block-post-content > .ng-photo-wrap + * { margin-top: clamp(2rem, 4vw, 3rem); }

/* Highlight (7 Nov 2026, v3): hovered / open boxes turn a see-through
   grey instead of a solid colour, so whatever is behind them (the
   starfield where there is one) shows through. No drawn stars. */
.ng-focus-item:hover, .ng-focus-item:focus-within, .ng-focus-item[open],
.ng-topic:hover, .ng-topic:focus-within,
.ng-profile:hover, .ng-profile:focus-visible {
	background: rgba(130, 130, 140, 0.32);
	border-color: rgba(255, 255, 255, 0.42);
}

/* About page: "Get in touch" and "Read the journal" match the LinkedIn / X
   ovals above them: same grid, size, shape, font and fade (7 Nov 2026). */
body.page-id-127 .wp-block-post-content > .wp-block-buttons.ng-cta-ovals { margin-top: 0.75rem; }
.ng-cta-ovals {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.75rem !important;
}
.ng-cta-ovals .wp-block-button { width: auto; margin: 0; }
.ng-cta-ovals .wp-block-button .wp-block-button__link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	width: 100%;
	min-height: 44px;
	padding: 0.85rem 1.5rem;
	border-radius: 999px;
	background: rgba(18, 18, 18, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--ng-head);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.7; /* same as the profile ovals, so all four are the same height */
	text-align: left;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ng-cta-ovals .wp-block-button .wp-block-button__link::after { content: "\2192"; color: var(--ng-muted); font-size: 1.1rem; }
.ng-cta-ovals .wp-block-button .wp-block-button__link:hover,
.ng-cta-ovals .wp-block-button .wp-block-button__link:focus-visible { color: #fff; }
.ng-cta-ovals .wp-block-button .wp-block-button__link:hover::after,
.ng-cta-ovals .wp-block-button .wp-block-button__link:focus-visible::after { color: #fff; }

/* Journal (7 Nov 2026): starfield hero like the other pages, then a
   toolbar (category filter + search) and the article list on faded panels. */
.ng-journal .ng-home-hero h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); }
.ng-journal .ng-home-hero .ng-lede { font-size: 1.05rem; line-height: 1.55; }
.ng-journal .ng-photo-wrap .ng-home-hero.ng-band { padding-bottom: clamp(1.5rem, 3vw, 2.25rem) !important; }
.ng-journal-tools {
	gap: 1rem 1.5rem !important;
	padding: 0.9rem 1.25rem !important;
	margin-bottom: 1.25rem !important;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(18, 18, 18, 0.22);
}
.ng-journal-tools .wp-block-search__input { background: rgba(18, 18, 18, 0.35) !important; border-radius: 999px !important; padding: 0.45rem 0.9rem !important; }
.ng-journal .wp-block-post-template { display: grid; gap: 0.75rem !important; }
.ng-journal .ng-card {
	padding: 1.25rem 1.5rem !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 22px;
	background: rgba(18, 18, 18, 0.22) !important;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ng-journal .wp-block-post-template > li:last-child .ng-card { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.ng-journal .ng-card:hover,
.ng-journal .ng-card:focus-within { background: rgba(130, 130, 140, 0.32) !important; border-color: rgba(255, 255, 255, 0.42) !important; }
.ng-journal .ng-card-meta { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ng-muted); }
.ng-journal .ng-card-meta a { color: var(--ng-muted); text-decoration: none; }
.ng-journal .ng-card .wp-block-post-title a { color: var(--ng-head); text-decoration: none; }
.ng-journal .ng-card .wp-block-post-excerpt { color: var(--wp--preset--color--foreground); }
.ng-journal-empty {
	padding: 1.4rem 1.75rem !important;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 28px;
	background: rgba(18, 18, 18, 0.22);
}
.ng-journal-actions { gap: 1rem !important; }
/* Research pages: "first articles in progress" note on the same faded panel as the Journal (8 Nov 2026) */
.ng-empty {
	margin: 0;
	padding: 1.4rem 1.75rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 28px;
	background: rgba(18, 18, 18, 0.22);
	color: var(--ng-hl-text-soft);
}
.ng-rss { margin: 0; }
.ng-rss a { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ng-muted); text-decoration: none; }
.ng-rss a:hover, .ng-rss a:focus-visible { color: #fff; }
.ng-pills .cat-item-none { display: none; } /* no "No categories" text before the first article */
.ng-journal-empty > * { margin: 0 !important; }
.ng-journal-empty > * + * { margin-top: 0.6rem !important; }
@media (max-width: 599px) {
	.ng-journal-tools { border-radius: 22px; }
	.ng-journal-tools .wp-block-search { width: 100%; }
}

/* FAQ questions (Contact page): same faded ovals as the other boxes; they
   round into a panel when opened. Hover / open star patches: ng-sky.css. */
.wp-block-accordion .wp-block-accordion-item {
	background: rgba(18, 18, 18, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	overflow: hidden;
	transition: background-color 0.2s ease, border-color 0.2s ease, border-radius 0.2s ease;
}
.wp-block-accordion .wp-block-accordion-item.is-open { border-radius: 28px; }
.wp-block-accordion .wp-block-accordion-heading { margin: 0; font-size: 1.2rem !important; }
.wp-block-accordion .wp-block-accordion-heading__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	width: 100%;
	min-height: 44px;
	padding: 1rem 1.75rem;
	background: transparent;
	border: 0;
	color: var(--ng-head);
	font-family: var(--wp--preset--font-family--display);
	font-size: inherit;
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
}
.wp-block-accordion .wp-block-accordion-heading__toggle-icon { color: var(--ng-muted); font-family: var(--wp--preset--font-family--body); font-size: 1.5rem; line-height: 1; transition: transform 0.2s ease; }
.wp-block-accordion .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon { transform: rotate(45deg); color: #fff; }
.wp-block-accordion .wp-block-accordion-item:hover .wp-block-accordion-heading__toggle,
.wp-block-accordion .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle { color: #fff; }
.wp-block-accordion .wp-block-accordion-heading__toggle:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 999px; }
.wp-block-accordion .wp-block-accordion-panel { padding: 0 1.75rem 1.4rem; }
.wp-block-accordion .wp-block-accordion-panel p { margin: 0; color: var(--ng-hl-text-soft); font-size: 1rem; line-height: 1.65; }
/* Contact page FAQ: one centred column of questions, so an uneven number
   (after removing the Welsh question) never leaves an empty gap. */
body.page-id-26 #faq .wp-block-columns { display: flex !important; flex-direction: column; gap: 0.75rem !important; max-width: 860px; margin-left: auto !important; margin-right: auto !important; }
body.page-id-26 #faq .wp-block-column { flex-basis: auto !important; margin: 0 !important; }
body.page-id-26 #faq .wp-block-accordion { display: grid; gap: 0.75rem; }
body.page-id-26 #faq .wp-block-accordion > * { margin: 0 !important; }
body.page-id-26 #faq .ext-section-intro { max-width: 860px; margin-left: auto !important; margin-right: auto !important; }
/* Contact page FAQ section: let the page background show behind it */
body.page-id-26 #faq.has-tertiary-background-color { background-color: rgba(26, 26, 26, 0.45) !important; }

/* Typography (9 Nov 2026): matched to the NG logo. Tektur for headings and the
   site title, Jura for body text, labels and buttons. Normal capitalisation. */
body {
	--wp--preset--font-family--display: "Tektur", "Jura", system-ui, sans-serif;
	--wp--preset--font-family--body: "Jura", system-ui, -apple-system, "Segoe UI", sans-serif;
	--wp--preset--font-family--mono: "Jura", system-ui, sans-serif;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
}
body h1, body h2, body h3, body h4, body .wp-block-site-title, body .ng-home-hero h1 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
}
body p, body li, body summary, body input, body textarea, body select, body button, body .wp-block-button__link { font-family: var(--wp--preset--font-family--body); }
body strong, body b { font-weight: 700; }

/* Placeholder laptop logo (Extendify demo) cloned into the mobile menu: never shown;
   the menu keeps the text site title only (8 Nov 2026). */
.cloned-for-mobile .mobile-logo { display: none !important; }
.wp-block-navigation__responsive-container:not(.is-menu-open) .cloned-for-mobile { display: none !important; }

/* Contact page redesign (8 Nov 2026): starfield hero like About, then the
   intro + profiles beside the form on a dark see-through panel. No stock photos. */
body.page-id-26 .ng-home-hero h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); }
body.page-id-26 .ng-home-hero .ng-lede { font-size: 1.05rem; line-height: 1.55; }
body.page-id-26 .ng-photo-wrap .ng-home-hero.ng-band { padding-bottom: clamp(2rem, 4vw, 3rem) !important; }
body.page-id-26 .wp-block-post-content > .ng-photo-wrap + * { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.ng-contact { padding-bottom: var(--wp--preset--spacing--60); }
.ng-contact-cols { gap: clamp(1.5rem, 4vw, 3.5rem) !important; align-items: flex-start !important; }
.ng-contact-intro h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 0; }
.ng-contact-intro p:not(.ng-label) { color: var(--ng-hl-text-soft); line-height: 1.65; }
.ng-contact-intro .ng-label { margin-top: 1.75rem; }
.ng-contact-intro .ng-profiles { grid-template-columns: 1fr; }
.ng-form-panel {
	padding: clamp(1.25rem, 3vw, 2.25rem) !important;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 28px;
	background: rgba(18, 18, 18, 0.45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.ng-form-panel .wpforms-container {
	--wpforms-field-background-color: rgba(10, 10, 12, 0.55);
	--wpforms-field-border-color: rgba(255, 255, 255, 0.22);
	--wpforms-field-text-color: #EDEDED;
	--wpforms-field-border-radius: 14px;
	--wpforms-field-menu-color: #1a1a1d;
	--wpforms-label-color: #FFFFFF;
	--wpforms-label-sublabel-color: #A6A6AD;
	--wpforms-label-error-color: #FF8A8A;
	--wpforms-button-background-color: rgba(130, 130, 140, 0.32);
	--wpforms-button-border-color: rgba(255, 255, 255, 0.42);
	--wpforms-button-text-color: #FFFFFF;
	--wpforms-button-border-radius: 999px;
	--wpforms-button-border-style: solid;
	--wpforms-button-border-size: 1px;
	margin: 0 !important;
}
.ng-form-panel .wpforms-field-label { font-family: var(--wp--preset--font-family--mono) !important; font-size: 0.75rem !important; letter-spacing: 0.08em; text-transform: uppercase; color: #fff !important; }
.ng-form-panel .wpforms-field-sublabel { color: #A6A6AD !important; }
.ng-form-panel input[type=text], .ng-form-panel input[type=email], .ng-form-panel input[type=tel], .ng-form-panel input[type=url], .ng-form-panel textarea, .ng-form-panel select {
	background-color: rgba(10, 10, 12, 0.55) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 14px !important;
	color: #EDEDED !important;
}
.ng-form-panel input:focus, .ng-form-panel textarea:focus, .ng-form-panel select:focus { border-color: #fff !important; box-shadow: 0 0 0 1px #fff !important; outline: none; }
.ng-form-panel ::placeholder { color: #8A8A90 !important; opacity: 1; }
/* :not(#ng) raises specificity above WPForms' own button rules */
.ng-form-panel .wpforms-form button.wpforms-submit[type=submit]:not(#ng),
.ng-form-panel .wpforms-submit {
	min-height: 44px;
	padding: 0.75rem 1.75rem !important;
	border-radius: 999px !important;
	background: rgba(130, 130, 140, 0.32) !important;
	border: 1px solid rgba(255, 255, 255, 0.42) !important;
	color: #fff !important;
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: 1.1rem !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.ng-form-panel .wpforms-form button.wpforms-submit[type=submit]:not(#ng):hover,
.ng-form-panel .wpforms-form button.wpforms-submit[type=submit]:not(#ng):focus-visible { background: rgba(160, 160, 170, 0.45) !important; }
.ng-form-panel .wpforms-form button.wpforms-submit[type=submit]:not(#ng):focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ng-form-panel .wpforms-confirmation-container-full { background: rgba(130, 130, 140, 0.25) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #fff !important; border-radius: 14px; }
@media (max-width: 781px) {
	.ng-contact-cols { flex-direction: column; }
	.ng-contact-cols > .wp-block-column { flex-basis: auto !important; width: auto; max-width: 100%; min-width: 0; align-self: stretch; box-sizing: border-box; }
	.ng-form-panel .wpforms-container, .ng-form-panel .wpforms-field, .ng-form-panel input, .ng-form-panel textarea { max-width: 100% !important; box-sizing: border-box; }
}

/* Just the two ovals, no surrounding panel (7 Nov 2026). */
.ng-profiles-wrap { margin-top: 1rem; }
.ng-profiles {
	list-style: none;
	padding: 0 !important;
	margin: 0 !important;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.75rem;
}
.ng-profiles li { margin: 0; }
.ng-profile {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: 44px;
	padding: 0.85rem 1.5rem;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
	border: 1px solid rgba(255, 255, 255, 0.09);
	color: var(--ng-head);
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ng-profile-name { font-family: var(--wp--preset--font-family--display); font-size: 1.2rem; }
.ng-profile-handle { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ng-muted); }
.ng-profile::after { content: "\2197"; color: var(--ng-muted); font-size: 1.1rem; }
.ng-profile:hover,
.ng-profile:focus-visible { border-color: var(--ng-hl-border); color: #fff; } /* background: see "Highlight sky" */
.ng-profile:hover .ng-profile-handle,
.ng-profile:focus-visible .ng-profile-handle { color: var(--ng-hl-text-soft); }
.ng-profile:hover::after,
.ng-profile:focus-visible::after { color: #fff; }
.ng-profile:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}