/*
 * Dockside polish: responsive fixes and a warmer light mode.
 * Loaded after dockside.css and theme-switch.css (see functions.php).
 */

/* =========================================================
   Responsive
   ========================================================= */

/* Nothing may push the page sideways on small screens. */
html,
body {
	overflow-x: clip;
}

.wp-block-post-content,
.dockside-main {
	overflow-wrap: break-word;
}

.wp-block-post-content :is(img, video, iframe, embed),
.dockside-main :is(img, video, iframe) {
	max-width: 100%;
}

/* ---------- Header ---------- */

@media (max-width: 781px) {
	.dockside-header {
		padding-block: 0.75rem;
	}

	.dockside-header__actions {
		gap: 0.75rem;
	}
}

@media (max-width: 600px) {
	/* Two rows: brand on top, menu + actions underneath across the full width. */
	.dockside-header > .alignwide {
		flex-wrap: wrap;
		row-gap: 0.75rem;
	}

	.dockside-header .wp-block-site-title {
		flex: 1 1 auto;
	}

	.dockside-header__actions {
		flex: 1 1 100%;
		justify-content: space-between;
		gap: 0.5rem;
		min-width: 0;
	}

	.dockside-header__actions > .wp-block-buttons {
		flex: 1 1 auto;
		justify-content: flex-end;
		gap: 0.4rem !important;
		min-width: 0;
	}

	.dockside-header .wp-block-buttons .wp-block-button__link,
	.dockside-header__account .wp-block-button__link,
	.dockside-header__cta .wp-block-button__link {
		padding: 0.55rem 0.7rem !important;
		font-size: 0.9375rem !important;
		white-space: nowrap;
	}

	.dockside-header__cta {
		display: block !important;
	}

	.dockside-theme-switch,
	.dockside-header nav.wp-block-navigation .wp-block-navigation__responsive-container-open {
		width: 2.5rem !important;
		height: 2.5rem !important;
	}
}

@media (max-width: 420px) {
	/* Logged out: keep "Log in" and "Join Discord", the register link lives in the login page. */
	.dockside-header__account--register,
	.dockside-header__account--dashboard,
	.dockside-header__account--profile {
		display: none !important;
	}
}

/* ---------- Hero, banners, sections ---------- */

@media (max-width: 781px) {
	.dockside-hero {
		padding-block: var(--wp--preset--spacing--60) calc(var(--wp--preset--spacing--50) + 110px);
	}

	.dockside-hero::after {
		height: 170px;
		background-size: 180px 172px, 450px 112px;
	}

	.dockside-hero h1 {
		font-size: clamp(3.25rem, 17vw, 5.5rem) !important;
	}

	.dockside-hero .wp-block-buttons {
		margin-block-start: var(--wp--preset--spacing--50);
	}

	.dockside-section {
		padding-block: var(--wp--preset--spacing--60);
	}

	.dockside-section__head {
		margin-block-end: var(--wp--preset--spacing--50);
	}
}

@media (max-width: 600px) {
	/* Buttons stack full width so they are easy to hit. */
	.dockside-hero .wp-block-buttons,
	.dockside-banner .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.dockside-hero .wp-block-buttons .wp-block-button,
	.dockside-banner .wp-block-buttons .wp-block-button {
		width: 100%;
	}

	.dockside-hero .wp-block-buttons .wp-block-button__link,
	.dockside-banner .wp-block-buttons .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}

	.dockside-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem 1rem;
	}

	.wp-block-group.is-style-dockside-card {
		padding: 1.25rem;
	}

	.wp-block-columns {
		gap: var(--wp--preset--spacing--40) !important;
	}
}

/* ---------- Tables and leaderboards ---------- */

@media (max-width: 781px) {
	/* The board scrolls inside its card instead of widening the page. */
	.dockside-wom {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	.wp-block-table {
		overflow-x: auto;
	}
}

@media (max-width: 600px) {
	.dockside-board {
		font-size: 0.875rem;
	}

	.dockside-board th,
	.dockside-board td {
		padding: 0.55rem 0.5rem;
	}

	.dockside-board th:first-child,
	.dockside-board td:first-child {
		padding-inline-start: 0.9rem;
	}

	.dockside-board th:last-child,
	.dockside-board td:last-child {
		padding-inline-end: 0.9rem;
	}

	.dockside-board .dockside-board__pos {
		width: 2rem;
	}

	.dockside-board__head {
		padding: 0.8rem 0.9rem;
	}
}

/* =========================================================
   Light mode
   ========================================================= */

html[data-theme="light"] {
	--wp--preset--color--base: #f6f1e7;
	--wp--preset--color--surface: #ffffff;
	--wp--preset--color--surface-raised: #f1e9da;
	--wp--preset--color--line: #e3d7c2;
	--wp--preset--color--contrast: #142131;
	--wp--preset--color--muted: #586474;
	--wp--preset--color--accent: #a86a0c;
	--wp--preset--color--accent-strong: #84520a;
	--wp--preset--color--signal: #12796a;
	--dockside-sunk: #efe6d4;
	--dx-light-gold: #e0a83f;
	--dx-light-shadow: 0 1px 2px rgba(20, 33, 49, 0.05), 0 8px 24px -12px rgba(20, 33, 49, 0.18);
}

html[data-theme="light"],
html[data-theme="light"] #af-wrapper {
	--dx-base: #f6f1e7;
	--dx-surface: #ffffff;
	--dx-raised: #f1e9da;
	--dx-line: #e3d7c2;
	--dx-text: #142131;
	--dx-muted: #586474;
	--dx-accent: #a86a0c;
	--dx-accent-strong: #84520a;
	--dx-signal: #12796a;
}

html[data-theme="light"] body {
	background:
		radial-gradient(1200px 500px at 85% -10%, rgba(224, 168, 63, 0.1), transparent 70%),
		var(--wp--preset--color--base);
}

/* Header: a clean white bar with a soft shadow. */
html[data-theme="light"] .dockside-header {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(1.2) blur(8px);
	border-bottom-color: var(--wp--preset--color--line);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 6px 20px -16px rgba(20, 33, 49, 0.35);
}

/* Primary buttons: the same flat brand gold and navy text as in dark mode (theme 1.7.11),
   only with a soft shadow so they sit on the light page. */
html[data-theme="light"] .wp-block-button:not(.is-style-dockside-ghost):not(.is-style-outline) .wp-block-button__link,
html[data-theme="light"] .wp-element-button:not(.wp-block-button__link) {
	background: #e0a83f;
	color: #0c141f;
	box-shadow: 0 2px 8px -4px rgba(20, 33, 49, 0.35);
}

html[data-theme="light"] .wp-block-button:not(.is-style-dockside-ghost):not(.is-style-outline) .wp-block-button__link:hover,
html[data-theme="light"] .wp-block-button:not(.is-style-dockside-ghost):not(.is-style-outline) .wp-block-button__link:focus-visible,
html[data-theme="light"] .wp-element-button:not(.wp-block-button__link):hover {
	background: #f3c467;
	color: #0c141f;
}

html[data-theme="light"] .wp-block-button.is-style-dockside-ghost .wp-block-button__link,
html[data-theme="light"] .dockside-header__account:not(.dockside-header__account--register) .wp-block-button__link {
	background: #ffffff;
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 1px #cbbda4;
}

html[data-theme="light"] .wp-block-button.is-style-dockside-ghost .wp-block-button__link:hover,
html[data-theme="light"] .dockside-header__account:not(.dockside-header__account--register) .wp-block-button__link:hover {
	color: var(--wp--preset--color--accent-strong);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
}

html[data-theme="light"] .dockside-theme-switch {
	background: #ffffff;
	border-color: #cbbda4;
}

/* Hero: warm parchment with a gold glow instead of the grey wash. */
html[data-theme="light"] .dockside-hero {
	background:
		radial-gradient(45% 65% at 80% 55%, rgba(224, 168, 63, 0.28) 0%, rgba(224, 168, 63, 0) 70%),
		radial-gradient(60% 80% at 10% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%),
		linear-gradient(90deg, rgba(250, 246, 238, 0.97) 0%, rgba(247, 241, 230, 0.93) 55%, rgba(243, 233, 214, 0.86) 100%),
		url("../img/banner-bg-v2.jpg") center / cover no-repeat,
		var(--wp--preset--color--base);
	border-bottom-color: var(--wp--preset--color--line);
}

/* The pier silhouette in navy at lower strength, so it frames rather than shouts. */
html[data-theme="light"] .dockside-hero::after {
	opacity: 0.28;
}

html[data-theme="light"] .dockside-hero__art img {
	filter: drop-shadow(0 18px 30px rgba(20, 33, 49, 0.28)) !important;
}

html[data-theme="light"] .dockside-banner,
html[data-theme="light"] .dockside-section--banner {
	background:
		radial-gradient(50% 90% at 85% 50%, rgba(224, 168, 63, 0.25) 0%, rgba(224, 168, 63, 0) 70%),
		linear-gradient(90deg, rgba(250, 246, 238, 0.97) 0%, rgba(247, 241, 230, 0.92) 55%, rgba(243, 233, 214, 0.84) 100%),
		url("../img/banner-bg-v2.jpg") center / cover no-repeat,
		var(--wp--preset--color--base);
}

/* Sunk sections: a gentle paper tone with hairlines. */
html[data-theme="light"] .dockside-section--sunk {
	background: linear-gradient(180deg, #f1e8d6 0%, #f4ecdd 100%);
	border-block-color: var(--wp--preset--color--line);
}

/* Cards and boards lift off the page. */
html[data-theme="light"] .wp-block-group.is-style-dockside-card,
html[data-theme="light"] .dockside-wom:not(.dockside-wom--stats),
html[data-theme="light"] .dockside-post-card,
html[data-theme="light"] .dockside-comps__item,
html[data-theme="light"] .dockside-member,
html[data-theme="light"] .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--line);
	box-shadow: var(--dx-light-shadow);
}

html[data-theme="light"] .dockside-board th {
	background: #faf6ee;
}

html[data-theme="light"] .dockside-board tbody tr:hover {
	background-color: #fbf6ea;
}

html[data-theme="light"] .dockside-board--gains tbody tr {
	background: linear-gradient(90deg, rgba(18, 121, 106, 0.1) var(--dockside-share, 0%), transparent var(--dockside-share, 0%));
}

html[data-theme="light"] .dockside-board tbody tr:first-child .dockside-board__pos,
html[data-theme="light"] .is-style-dockside-eyebrow,
html[data-theme="light"] .dockside-board__label,
html[data-theme="light"] .dockside-date {
	color: var(--wp--preset--color--accent);
}

/* Tables in posts. */
html[data-theme="light"] .wp-block-table table {
	background: var(--wp--preset--color--surface);
}

html[data-theme="light"] .wp-block-table thead {
	background: #faf6ee;
}

/* Round crest in header and footer: a soft shadow that follows its shape, no square frame. */
html[data-theme="light"] .dockside-header .wp-block-site-title a::before,
html[data-theme="light"] .dockside-footer .wp-block-site-title a::before {
	box-shadow: none !important;
	filter: drop-shadow(0 3px 6px rgba(20, 33, 49, 0.25));
}

/* Footer: a darker paper band to close the page. */
html[data-theme="light"] .dockside-footer {
	background: #efe6d4;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Mobile menu sheet. */
html[data-theme="light"] .dockside-header nav.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background: #fbf8f2;
}

html[data-theme="light"] ::selection {
	background: #f0c062;
	color: #1a1307;
}

/* Clan / Stream switch: active tab in gold like the buttons. */
html[data-theme="light"] .dockside-switch {
	box-shadow: var(--dx-light-shadow);
}

html[data-theme="light"] .dockside-switch__tab[aria-selected="true"] {
	background: #e0a83f;
	color: #0c141f;
}

/* =========================================================
   Navigation
   >= 1280px  full bar
   1140-1279  compact bar ("Register" lives on the login page)
   600-1139   burger + the menu sheet, buttons stay visible
   ========================================================= */

/* ---------- Compact bar ---------- */

@media (min-width: 1140px) and (max-width: 1279px) {
	.dockside-header__actions {
		gap: 1rem;
	}

	.dockside-header__actions > .wp-block-buttons {
		gap: 0.5rem !important;
	}

	.dockside-header__account--register {
		display: none !important;
	}

	.dockside-header .wp-block-navigation {
		letter-spacing: 0.05em;
	}
}

/* ---------- Burger between phone and desktop ---------- */

@media (min-width: 600px) and (max-width: 1139px) {
	.dockside-header nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.dockside-header nav.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: grid;
		place-items: center;
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--contrast);
	}

	.dockside-header nav.wp-block-navigation .wp-block-navigation__responsive-container-open:hover {
		color: var(--wp--preset--color--accent);
		box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
	}

	/* Burger sits at the far right, after the buttons. */
	.dockside-header__actions > nav.wp-block-navigation {
		order: 2;
	}

	.dockside-header__actions {
		gap: 0.6rem;
	}

	.dockside-header__actions > .wp-block-buttons {
		gap: 0.5rem !important;
	}

	/* The sheet keeps a sensible reading width on tablets. */
	.dockside-header nav.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog {
		max-width: 40rem;
		margin-inline: auto;
	}
}

@media (min-width: 600px) and (max-width: 820px) {
	.dockside-header__account--register {
		display: none !important;
	}
}

/* ---------- Desktop bar ---------- */

@media (min-width: 1140px) {
	.dockside-header .wp-block-navigation__container {
		gap: 0;
	}

	.dockside-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item {
		position: relative;
	}

	.dockside-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		position: relative;
		padding: 0.5rem 0.55rem;
		border-radius: 6px;
		color: var(--wp--preset--color--contrast);
		transition: color 0.18s ease, background-color 0.18s ease;
	}

	/* Gold bar that grows from the centre. */
	.dockside-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		left: 0.55rem;
		right: 0.55rem;
		bottom: 0.2rem;
		height: 2px;
		border-radius: 2px;
		background: var(--wp--preset--color--accent);
		transform: scaleX(0);
		transition: transform 0.22s ease;
	}

	.dockside-header .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content {
		padding-inline-end: 1.3rem;
	}

	.dockside-header .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content::after {
		right: 1.3rem;
	}

	.dockside-header .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
		position: absolute;
		right: 0.4rem;
		top: 50%;
		margin: 0;
		transform: translateY(-50%);
		color: var(--wp--preset--color--muted);
		transition: color 0.18s ease, transform 0.22s ease;
		pointer-events: none;
	}

	.dockside-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
	.dockside-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
	.dockside-header .wp-block-navigation .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--accent);
		background-color: rgba(224, 168, 63, 0.12);
	}

	.dockside-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
	.dockside-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after,
	.dockside-header .wp-block-navigation .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation-item__content::after {
		transform: scaleX(1);
	}

	.dockside-header .wp-block-navigation .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-icon,
	.dockside-header .wp-block-navigation .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation__submenu-icon {
		color: var(--wp--preset--color--accent);
		transform: translateY(-50%) rotate(180deg);
	}

	/* The page you are on. */
	.dockside-header .wp-block-navigation .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
	.dockside-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"],
	.dockside-header .wp-block-navigation .wp-block-navigation__container > .has-child:has(.current-menu-item, [aria-current="page"]) > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--accent);
	}

	.dockside-header .wp-block-navigation .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after,
	.dockside-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]::after,
	.dockside-header .wp-block-navigation .wp-block-navigation__container > .has-child:has(.current-menu-item, [aria-current="page"]) > .wp-block-navigation-item__content::after {
		transform: scaleX(1);
	}

	/* ---------- Dropdown panel ---------- */

	.dockside-header {
		--dx-dd-bg: linear-gradient(180deg, #1a293b 0%, #142132 100%);
		--dx-dd-caret: #1a293b;
		--dx-dd-border: rgba(224, 168, 63, 0.28);
		--dx-dd-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 28px 50px -18px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.35);
		--dx-dd-hover: rgba(224, 168, 63, 0.11);
		--dx-dd-text: var(--wp--preset--color--contrast);
		--dx-dd-active: var(--wp--preset--color--accent);
	}

	html[data-theme="light"] .dockside-header {
		--dx-dd-bg: linear-gradient(180deg, #ffffff 0%, #fdfaf4 100%);
		--dx-dd-caret: #ffffff;
		--dx-dd-border: #e3d3b5;
		--dx-dd-shadow: 0 1px 0 #ffffff inset, 0 24px 44px -20px rgba(20, 33, 49, 0.32), 0 2px 6px -2px rgba(20, 33, 49, 0.08);
		--dx-dd-hover: #fbf1dc;
		--dx-dd-text: var(--wp--preset--color--contrast);
		--dx-dd-active: var(--wp--preset--color--accent-strong);
	}

	.dockside-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		top: calc(100% + 0.6rem) !important;
		left: -0.25rem !important;
		min-width: 15rem !important;
		padding: 0.45rem !important;
		gap: 0.1rem;
		background: var(--dx-dd-bg) !important;
		border: 1px solid var(--dx-dd-border) !important;
		border-radius: 12px;
		box-shadow: var(--dx-dd-shadow) !important;
		color: var(--dx-dd-text);
		transform: translateY(-6px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	}

	.dockside-header .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
	.dockside-header .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
	.dockside-header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		transform: translateY(0);
	}

	/* Little caret pointing at the menu item. */
	.dockside-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		top: -6px;
		left: 1.4rem;
		width: 10px;
		height: 10px;
		background: var(--dx-dd-caret);
		border-top: 1px solid var(--dx-dd-border);
		border-left: 1px solid var(--dx-dd-border);
		border-top-left-radius: 2px;
		transform: rotate(45deg);
	}

	/* Invisible bridge so the panel stays open while the mouse crosses the gap. */
	.dockside-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: calc(-0.6rem - 2px);
		height: calc(0.6rem + 2px);
	}

	.dockside-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
		width: 100%;
	}

	.dockside-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		position: relative;
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
		box-sizing: border-box;
		width: 100%;
		padding: 0.6rem 0.85rem 0.6rem 1rem !important;
		line-height: 1.3;
		border-radius: 8px;
		color: var(--dx-dd-text) !important;
		white-space: nowrap;
		transition: color 0.15s ease, background-color 0.15s ease;
	}

	/* Gold bar on the left. */
	.dockside-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
		content: "";
		position: absolute;
		left: 0.35rem;
		top: 28%;
		bottom: 28%;
		width: 3px;
		border-radius: 2px;
		background: var(--wp--preset--color--accent);
		opacity: 0;
		transform: scaleY(0.3);
		transition: opacity 0.15s ease, transform 0.15s ease;
	}

	/* Arrow on the right. */
	.dockside-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
		content: "\2192";
		font-size: 0.95rem;
		line-height: 1;
		color: var(--dx-dd-active);
		opacity: 0;
		transform: translateX(-6px);
		transition: opacity 0.15s ease, transform 0.15s ease;
	}

	.dockside-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.dockside-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
	.dockside-header .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
	.dockside-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] {
		color: var(--dx-dd-active) !important;
		background-color: var(--dx-dd-hover);
	}

	.dockside-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::before,
	.dockside-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible::before,
	.dockside-header .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content::before,
	.dockside-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"]::before {
		opacity: 1;
		transform: scaleY(1);
	}

	.dockside-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::after,
	.dockside-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible::after {
		opacity: 1;
		transform: translateX(0);
	}

	/* Light mode: deeper gold on the top bar so it reads on white. */
	html[data-theme="light"] .dockside-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
	html[data-theme="light"] .dockside-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
	html[data-theme="light"] .dockside-header .wp-block-navigation .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--accent-strong);
		background-color: rgba(224, 168, 63, 0.18);
	}
}

/* ---------- Header layering and the menu sheet ---------- */

/* The header has to sit above the page so dropdowns are not hidden behind it. */
.dockside-header {
	position: relative;
	z-index: 50;
}

/* backdrop-filter turned the header into the containing block of the fixed
   menu sheet, which squeezed the sheet into the header in light mode. */
html[data-theme="light"] .dockside-header {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: #ffffff;
}

/* Submenus inside the sheet: plain indented list, no floating card. */
.dockside-header nav.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
html[data-theme="light"] .dockside-header nav.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	box-shadow: none !important;
	border-top: 0 !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
	.dockside-header .wp-block-navigation *,
	.dockside-header .wp-block-navigation *::before,
	.dockside-header .wp-block-navigation *::after {
		transition: none !important;
	}
}

/* Current page button in boards and lists: same gold as in dark mode (1.7.11). */
html[data-theme="light"] .dx-pager__btn.is-current {
	background: #e0a83f;
	border-color: #e0a83f;
	color: #0c141f;
}