/*
Theme Name: Dishub Stisla
Theme URI: https://dishub.pamekasankab.go.id
Author: Dishub Pamekasan
Author URI: https://dishub.pamekasankab.go.id
Description: Child theme of Twenty Twenty-Five for Dinas Perhubungan Kabupaten Pamekasan, redesigned on the Stisla 3 design pack (stisla.dev). Stisla components (navbar, card, badge, breadcrumb, button, pagination, list-group, icon-box, alert) plus a custom navy/orange government palette.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
Template: twentytwentyfive
Text Domain: dishub-stisla
*/

/* Override parent theme Manrope font-display → swap (PageSpeed fix). */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2') format('woff2');
}

/* ==========================================================================
   Dishub Stisla — custom design layer.
   Sits unlayered, so it wins over Stisla's @layer theme/components/utilities.
   Palette follows dishub.pamekasankab.go.id: deep navy + warm orange.
   ========================================================================== */

:root {
	--color-primary: #0b3f9e;
	--color-primary-emphasis: #082e79;
	--color-ring: var(--color-primary);

	--dishub-navy: #001e58;
	--dishub-navy-2: #0a2f73;
	--dishub-blue: #0b3f9e;
	--dishub-orange: #ffb455;
	--dishub-orange-deep: #f08c00;
	--dishub-surface: #f5f7fb;
	--dishub-surface-2: #eef2f9;
	--dishub-border: #e4e9f2;

	--dishub-radius: 1rem;
}

body {
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ---------- Layout utilities ---------- */
.container {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.section {
	padding-block: 4.5rem;
}
.section--alt {
	background: var(--dishub-surface);
}

.section__head {
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: 2.75rem;
	text-align: center;
}
.section__head--left {
	margin-inline: 0;
	text-align: left;
}
.section__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--dishub-orange-deep);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: .6rem;
}
.section__eyebrow::before {
	content: "";
	width: 1.5rem;
	height: 2px;
	background: var(--dishub-orange);
	border-radius: 2px;
}
.section__title {
	margin: 0 0 .6rem;
	font-size: clamp(1.65rem, 3vw, 2.15rem);
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--dishub-navy);
}
.section__lead {
	margin: 0;
	color: var(--color-muted-foreground);
	font-size: 1.02rem;
}

.grid {
	display: grid;
	gap: 1.5rem;
}
.grid--3 {
	grid-template-columns: repeat(3, 1fr);
}
.grid--2 {
	grid-template-columns: repeat(2, 1fr);
}
.grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

/* ---------- Top government bar ---------- */
.govbar {
	background: var(--dishub-navy);
	color: rgba(255, 255, 255, .82);
	font-size: .8125rem;
}
.govbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 40px;
}
.govbar__left,
.govbar__right {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.govbar a {
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.govbar a:hover {
	color: #fff;
}
.govbar svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}
.govbar__separator {
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, .25);
}

/* ---------- Header / Stisla navbar ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #fff;
	border-bottom: 1px solid var(--dishub-border);
	box-shadow: 0 1px 0 rgba(0, 30, 88, .04);
}
.site-header .navbar {
	--navbar-padding-block: .6rem;
	gap: 1rem;
}
.site-header .navbar__menu .navbar__nav {
	margin-inline-start: auto;
	margin-inline-end: 0;
}
.navbar__search-toggle {
	width: 33px;
	height: 33px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--dishub-navy);
	background: transparent;
	border: 1.5px solid var(--dishub-border);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.navbar__search-toggle:hover {
	background: var(--dishub-surface-2);
	color: var(--dishub-blue);
	border-color: var(--dishub-blue);
}
.navbar__search {
	border-top: 1px solid var(--dishub-border);
	background: #fff;
	padding-block: .75rem;
	box-shadow: 0 8px 24px rgba(0, 30, 88, .08);
}
.navbar__search .search-form {
	display: flex;
	gap: .5rem;
}
.navbar__search .search-form .input {
	flex: 1;
}
.site-header .navbar__toggle {
	margin-inline-start: auto;
}
.site-header .navbar__search-toggle {
	margin-inline-start: .5rem;
}
.site-header .navbar__nav {
	gap: .25rem;
}
.site-header .navbar__button {
	font-weight: 600;
	font-size: .92rem;
	padding-inline: calc(var(--spacing) * 3.5);
	border-radius: var(--radius-md);
}
.site-header .navbar__button[data-state="active"],
.site-header .navbar__button.current-menu-item {
	background: var(--dishub-surface-2);
	color: var(--dishub-blue);
}

/* Dropdown submenu (rendered by the default walker as .sub-menu). */
.site-header .navbar__nav li {
	position: relative;
}
.site-header .navbar__nav .menu-item-has-children > .navbar__button {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.site-header .navbar__nav .menu-item-has-children > .navbar__button::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .7;
	transition: transform .2s ease;
}
.site-header .navbar__nav li:hover > .menu-item-has-children > .navbar__button::after,
.site-header .navbar__nav li:focus-within > .menu-item-has-children > .navbar__button::after {
	transform: rotate(225deg);
}
.site-header .navbar__nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	min-width: 230px;
	margin: 0;
	padding: .5rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--dishub-border);
	border-radius: var(--radius-md);
	box-shadow: 0 14px 36px rgba(13, 30, 75, .18);
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease .14s, transform .18s ease .14s, visibility .18s ease .14s;
	z-index: 70;
}
.site-header .navbar__nav li:hover > .sub-menu,
.site-header .navbar__nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.site-header .navbar__nav .sub-menu .navbar__button {
	display: block;
	width: 100%;
	height: auto;
	text-align: left;
	padding: .55rem .9rem;
	border-radius: calc(var(--radius-md) - var(--spacing));
	font-weight: 500;
	font-size: .88rem;
	white-space: nowrap;
}
.site-header .navbar__nav .sub-menu .navbar__button:hover {
	background: var(--dishub-surface-2);
	color: var(--dishub-blue);
}
.site-header .navbar__nav .sub-menu .sub-menu {
	top: -.5rem;
	left: 100%;
	transform: translateX(6px);
}

.brand {
	display: flex;
	align-items: center;
	gap: .75rem;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}
.site-header .navbar__brand {
	height: auto;
}
.brand img {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
}
.brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.brand__name {
	font-weight: 800;
	font-size: 1.02rem;
	line-height: 1.1;
	letter-spacing: .01em;
	color: var(--dishub-navy);
}
.brand__sub {
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.1;
	letter-spacing: .01em;
	color: var(--dishub-navy);
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(ellipse 900px 620px at 50% 12%, rgba(255, 180, 85, .18), transparent 70%),
		radial-gradient(ellipse 700px 520px at 82% 92%, rgba(11, 63, 158, .55), transparent 70%),
		linear-gradient(160deg, #00133a 0%, var(--dishub-navy) 45%, var(--dishub-navy-2) 100%);
	background-color: #00133a;
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 116px);
	min-height: calc(100dvh - 116px);
	text-align: center;
}

/* Full-bleed background image (set in Customizer) with cinematic navy scrim. */
.hero--image {
	background-image:
		radial-gradient(ellipse 100% 75% at 50% 45%, transparent 0%, rgba(0, 15, 45, .5) 100%),
		linear-gradient(180deg, rgba(0, 15, 45, .62) 0%, rgba(0, 15, 45, .32) 38%, rgba(0, 15, 45, .78) 78%, rgba(0, 15, 45, .94) 100%),
		var(--hero-image);
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
}
@media (min-width: 901px) {
	.hero--image {
		background-attachment: fixed;
	}
}

/* Cinematic vignette to focus center. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 110% 90% at 50% 50%, transparent 45%, rgba(0, 0, 0, .5) 100%);
	pointer-events: none;
}

.hero__bg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(320px, 45vw, 560px);
	opacity: .05;
	pointer-events: none;
}
.hero__bg img {
	width: 100%;
	height: auto;
}

.hero__inner {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	z-index: 1;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .42rem 1.05rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .2);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 1.3rem;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
.hero__badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--dishub-orange);
	box-shadow: 0 0 0 0 rgba(255, 180, 85, .6);
	animation: heroBeacon 2.2s ease-out infinite;
}
@keyframes heroBeacon {
	0% { box-shadow: 0 0 0 0 rgba(255, 180, 85, .6); }
	100% { box-shadow: 0 0 0 9px rgba(255, 180, 85, 0); }
}

.hero__title {
	margin: 0 0 .55rem;
	font-size: clamp(2.2rem, 5.4vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: -.025em;
	font-weight: 800;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
	text-wrap: balance;
}
.hero__subtitle {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	margin: 0 0 1.1rem;
	color: var(--dishub-orange);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}
.hero__subtitle::before,
.hero__subtitle::after {
	content: "";
	width: 30px;
	height: 2px;
	background: var(--dishub-orange);
	border-radius: 2px;
	opacity: .85;
}
.hero__text {
	margin: 0 auto 2.2rem;
	max-width: 38rem;
	color: rgba(255, 255, 255, .86);
	font-size: 1.05rem;
	line-height: 1.7;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .4);
}

.hero__actions {
	display: flex;
	gap: .85rem;
	flex-wrap: wrap;
	justify-content: center;
}
.hero__actions .button {
	--button-tone: #fff;
	--button-color: var(--dishub-navy);
	--button-tone-emphasis: var(--dishub-navy);
	--button-bg: #fff;
	color: var(--dishub-navy);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.hero__actions .button:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 38px rgba(0, 0, 0, .34);
}
.hero__actions .button--ghost {
	--button-tone: #fff;
	--button-tone-emphasis: #fff;
	--button-color: #fff;
	--button-bg: rgba(255, 255, 255, .08);
	--button-border-color: rgba(255, 255, 255, .35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.hero__actions .button--ghost:hover {
	--button-bg: rgba(255, 255, 255, .18);
}
.hero__actions .button svg {
	flex-shrink: 0;
}

/* Stisla button--primary: override to use Dishub navy palette. */
.button--primary,
a.button--primary {
	--button-bg: var(--dishub-navy) !important;
	--button-color: #fff !important;
	--button-border-color: var(--dishub-navy) !important;
	--button-bg-hover: var(--dishub-blue) !important;
	--button-color-hover: #fff !important;
	--button-border-color-hover: var(--dishub-blue) !important;
	background-color: var(--dishub-navy) !important;
	color: #fff !important;
	border-color: var(--dishub-navy) !important;
	border-radius: 6px;
	font-size: .875rem;
	font-weight: 600;
	padding: .5rem 1.25rem;
}
.button--primary:hover,
a.button--primary:hover {
	background-color: var(--dishub-blue) !important;
	border-color: var(--dishub-blue) !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(0, 30, 88, .25);
}
.button--primary:focus-visible,
a.button--primary:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}
.button--primary.button--lg,
a.button--primary.button--lg {
	padding: .5rem 1.25rem;
	font-size: .875rem;
}

.hero__stats {
	position: relative;
	z-index: 1;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	padding: 1.7rem 2rem;
	border-radius: var(--dishub-radius);
	background: rgba(255, 255, 255, .09);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.hero__stat {
	text-align: center;
}
.hero__stat + .hero__stat {
	border-left: 1px solid rgba(255, 255, 255, .12);
}
.hero__stat b {
	display: block;
	font-size: clamp(1.8rem, 3.5vw, 2.4rem);
	font-weight: 800;
	color: #fff;
	line-height: 1.1;
}
.hero__stat b em {
	font-style: normal;
	color: var(--dishub-orange);
}
.hero__stat span {
	display: block;
	margin-top: .3rem;
	font-size: .82rem;
	color: rgba(255, 255, 255, .72);
	line-height: 1.3;
}


/* ---------- Announcement bar ---------- */
.announcement {
	position: relative;
	z-index: 2;
	background: var(--dishub-navy-2);
	color: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
.announcement__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 48px;
	padding-block: 0;
}
.announcement__badge {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	flex-shrink: 0;
	padding: .25rem .7rem;
	border-radius: 4px;
	background: #dc2626;
	color: #fff;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1;
}
.announcement__badge svg {
	width: 14px;
	height: 14px;
	display: none;
}
.announcement__marquee {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
}
.announcement__track {
	display: flex;
	align-items: center;
	white-space: nowrap;
	animation: announcementScroll 45s linear infinite;
	will-change: transform;
}
.announcement__marquee:hover .announcement__track {
	animation-play-state: paused;
}
.announcement__item {
	font-size: .82rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .9);
	margin-inline-end: 3.5rem;
	letter-spacing: .01em;
}
.announcement__item::before {
	content: "•";
	display: inline-block;
	width: auto;
	height: auto;
	margin-inline-end: .6rem;
	border-radius: 0;
	background: 0;
	color: var(--dishub-orange);
	font-weight: 900;
	font-size: 1rem;
	vertical-align: middle;
}
.announcement__link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	flex-shrink: 0;
	color: rgba(255, 255, 255, .85);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	transition: color .15s ease;
}
.announcement__link svg {
	transition: transform .2s ease;
	width: 14px;
	height: 14px;
}
.announcement__link:hover {
	color: #fff;
}
.announcement__link:hover svg {
	transform: translateX(3px);
}
@keyframes announcementScroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ---------- Sambutan Kepala Dinas ---------- */
.sambutan {
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
	background: linear-gradient(135deg, #f0f5ff 0%, #e8f0fe 100%);
	border-bottom: 1px solid var(--border);
}
.sambutan__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	text-align: center;
}
.sambutan__photo {
	flex-shrink: 0;
}
.sambutan__photo img {
	width: 180px;
	height: 180px;
	border-radius: 12px;
	object-fit: cover;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
	border: 3px solid #fff;
}
.sambutan__content {
	flex: 1;
	min-width: 0;
}
.sambutan__eyebrow {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dishub-navy);
	background: rgba(0, 30, 88, .08);
	padding: .25rem .75rem;
	border-radius: 4px;
	margin-bottom: .5rem;
}
.sambutan__name {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--dishub-navy);
	margin: 0 0 .1rem;
}
.sambutan__position {
	font-size: .82rem;
	color: #64748b;
	margin: 0 0 .6rem;
}
.sambutan__text p {
	font-size: .9rem;
	line-height: 1.6;
	color: #334155;
	margin: 0 0 .5rem;
}
.sambutan__text p:last-child {
	margin-bottom: 0;
}
@media (max-width: 640px) {
	.sambutan__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.sambutan__photo img {
		width: 140px;
		height: 140px;
	}
}

/* ---------- Bidang accordion ---------- */
.bidang-accordion {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.bidang-accordion__item {
	border: 1px solid var(--dishub-border);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 30, 88, .05);
}
.bidang-accordion__header {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--dishub-navy);
	transition: background-color .15s ease;
}
.bidang-accordion__header:hover {
	background: var(--dishub-surface-2);
}
.bidang-accordion__no {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--dishub-navy);
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
}
.bidang-accordion__name {
	flex: 1;
	font-weight: 700;
	font-size: 1rem;
}
.bidang-accordion__icon {
	flex-shrink: 0;
	color: var(--dishub-blue);
	transition: transform .2s ease;
}
.bidang-accordion__header[aria-expanded="true"] .bidang-accordion__icon {
	transform: rotate(180deg);
}
.bidang-accordion__panel {
	padding: 0 1.25rem 1.25rem 3.5rem;
}
.bidang-accordion__panel ul {
	margin: 0;
	padding-inline-start: 1.25rem;
}
.bidang-accordion__panel li {
	margin-bottom: .5rem;
	font-size: .95rem;
	line-height: 1.7;
	color: #475569;
}
.bidang-accordion__panel li:last-child {
	margin-bottom: 0;
}

/* ---------- Cookie Consent ---------- */
.cookie-consent {
	position: fixed;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	z-index: 200;
	display: flex;
	justify-content: center;
	pointer-events: none;
}
.cookie-consent[hidden] {
	display: none;
}
.cookie-consent__box {
	pointer-events: auto;
	max-width: 560px;
	width: 100%;
	background: #fff;
	border: 1px solid var(--dishub-border);
	border-radius: 12px;
	box-shadow: 0 14px 40px rgba(13, 30, 75, .22);
	padding: 1.1rem 1.3rem;
	display: flex;
	flex-direction: column;
	gap: .9rem;
}
.cookie-consent__text {
	font-size: .9rem;
	line-height: 1.6;
	color: #334155;
	margin: 0;
}
.cookie-consent__actions {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
}
.cookie-consent__actions .button,
.cookie-consent__actions .button--primary,
.cookie-consent__actions a.button--primary {
	height: 36px;
	padding-block: 0;
	margin-block: 0 !important;
	margin-top: 0 !important;
}
.cookie-consent__link {
	font-size: .85rem;
	font-weight: 600;
	color: var(--dishub-blue);
	text-decoration: none;
	margin-inline-start: auto;
}
.cookie-consent__link:hover {
	text-decoration: underline;
}
@media (max-width: 560px) {
	.cookie-consent__box {
		border-radius: 10px;
	}
	.cookie-consent__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.cookie-consent__actions .button {
		width: 100%;
		justify-content: center;
	}
	.cookie-consent__link {
		margin-inline-start: 0;
		text-align: center;
	}
}

/* ---------- News cards ---------- */
.news-card {
	--card-padding-inline: calc(var(--spacing) * 5);
	--card-padding-block: calc(var(--spacing) * 5);
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
	overflow: hidden;
}
.news-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}
.news-card .card__image-wrap {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--dishub-surface-2);
}
.news-card .card__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.news-card:hover .card__image-wrap img {
	transform: scale(1.05);
}
.news-card .news-date {
	position: absolute;
	top: 1rem;
	left: 1rem;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 14px;
	background: var(--dishub-orange);
	color: var(--dishub-navy);
	text-align: center;
	line-height: 1.1;
	box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .35);
}
.news-card .news-date b {
	display: block;
	font-size: 1.25rem;
	font-weight: 800;
}
.news-card .news-date span {
	display: block;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.news-card .card__body {
	flex: 1;
}
.news-card .card__title {
	font-size: 1.05rem;
	line-height: 1.4;
	letter-spacing: -.01em;
}
.news-card .card__title a {
	color: var(--dishub-navy);
	text-decoration: none;
}
.news-card .card__title a:hover {
	color: var(--dishub-blue);
}
.news-card .card__text {
	margin-top: .4rem;
}
.news-card .card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: auto;
}
.news-card .card__footer .card__link {
	font-size: .85rem !important;
	font-weight: 600;
}

/* Berita terkini: proporsional tapi tetap ringkas. */
#berita.section {
	padding-block: clamp(2rem, 3.5vh, 2.75rem);
}
#berita .section__head {
	margin-bottom: 1.5rem;
}
#berita .section__title {
	font-size: clamp(1.5rem, 2.8vw, 1.9rem);
}
#berita .section__lead {
	font-size: .92rem;
}
#berita .grid--3 {
	gap: 1.25rem;
}
#berita .news-card {
	--card-padding-block: calc(var(--spacing) * 4);
	--card-padding-inline: calc(var(--spacing) * 4);
}
#berita .news-card .card__image-wrap {
	aspect-ratio: 16 / 9;
	height: auto;
}
#berita .news-card .card__title {
	font-size: .98rem;
}
#berita .news-card .card__text {
	font-size: .88rem;
	line-height: 1.6;
}

.news-list-item {
	display: flex;
	gap: 1.25rem;
	align-items: center;
	text-decoration: none;
	color: inherit;
	padding: 1rem 0;
	border-bottom: 1px solid var(--dishub-border);
}
.news-list-item:last-child {
	border-bottom: 0;
}
.news-list-item__thumb {
	width: 84px;
	height: 60px;
	border-radius: 10px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--dishub-surface-2);
}
.news-list-item__body h4 {
	margin: 0 0 .2rem;
	font-size: .95rem;
	line-height: 1.35;
}
.news-list-item__body time {
	font-size: .78rem;
	color: var(--color-muted-foreground);
}

/* ---------- Documentation gallery slider ---------- */
#dokumentasi {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: min-height .3s ease;
}
#dokumentasi.doc-half {
	min-height: 50vh;
}
.doc-slider {
	position: relative;
	flex: 1;
	min-height: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(0, 30, 88, .14);
	background: var(--dishub-surface-2);
}
.doc-slider__track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.doc-slider__track::-webkit-scrollbar {
	display: none;
}
.doc-slider__slide {
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: start;
}
.doc-slider__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.doc-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--dishub-navy);
	box-shadow: 0 3px 12px rgba(0, 30, 88, .25);
	cursor: pointer;
	transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.doc-slider__nav:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.08);
}
.doc-slider__nav[disabled] {
	opacity: 0;
	pointer-events: none;
}
.doc-slider__nav--prev {
	left: 1rem;
}
.doc-slider__nav--next {
	right: 1rem;
}
.doc-slider__dots {
	position: absolute;
	inset: auto 0 1rem 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: .5rem;
}
.doc-slider__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	cursor: pointer;
	transition: width .25s ease, background .25s ease;
}
.doc-slider__dot[data-active="true"] {
	width: 26px;
	border-radius: 5px;
	background: #fff;
}

/* ---------- Document cards ---------- */
.docs-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 2.25rem;
}
.docs-head .section__eyebrow,
.docs-head .section__title {
	margin-bottom: 0;
}
.docs-search {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 260px;
	flex: 1;
	max-width: 340px;
}
.docs-search > svg {
	position: absolute;
	left: .9rem;
	width: 18px;
	height: 18px;
	color: var(--color-muted-foreground);
	pointer-events: none;
}
.docs-search__input {
	width: 100%;
	height: 44px;
	padding: 0 1rem 0 2.5rem;
	border: 1px solid var(--dishub-border);
	border-radius: var(--radius-md);
	background: #fff;
	color: var(--dishub-navy);
	font-size: .92rem;
	font-family: inherit;
	box-shadow: var(--shadow-sm);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.docs-search__input:focus {
	outline: none;
	border-color: var(--dishub-blue);
	box-shadow: 0 0 0 3px rgba(11, 63, 158, .15);
}
.docs-search__input::-webkit-search-cancel-button {
	display: none;
}
.docs-empty {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: var(--radius-md);
	background: var(--dishub-surface-2);
	color: var(--color-muted-foreground);
	font-size: .92rem;
	text-align: center;
}

.doc-group {
	margin-bottom: 2.5rem;
}
.doc-group:last-child {
	margin-bottom: 0;
}
.doc-group__label {
	margin: 0 0 1rem;
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--dishub-navy);
	padding-bottom: .55rem;
	border-bottom: 2px solid var(--dishub-orange);
	display: inline-block;
}
.doc-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	border-radius: var(--dishub-radius);
	background: #fff;
	border: 1px solid var(--dishub-border);
	box-shadow: var(--shadow-sm);
	text-decoration: none;
	color: inherit;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.doc-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: rgba(11, 63, 158, .35);
}
.doc-card__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--dishub-surface-2);
	color: var(--dishub-blue);
}
.doc-card__icon svg {
	width: 22px;
	height: 22px;
}
.doc-card__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}
.doc-card__title {
	font-size: .98rem;
	font-weight: 700;
	color: var(--dishub-navy);
	line-height: 1.35;
}
.doc-card__desc {
	font-size: .84rem;
	color: var(--color-muted-foreground);
	line-height: 1.4;
}
.doc-card__cta {
	flex-shrink: 0;
	font-size: .85rem;
	font-weight: 700;
	color: var(--dishub-blue);
	white-space: nowrap;
}

/* ---------- Link cards ---------- */
.link-card {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	padding: 1.6rem 1.5rem;
	border-radius: var(--dishub-radius);
	background: #fff;
	border: 1px solid var(--dishub-border);
	box-shadow: var(--shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	text-decoration: none;
	color: inherit;
	height: 100%;
}
.link-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: rgba(11, 63, 158, .35);
}
.link-card__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--dishub-surface-2);
	color: var(--dishub-blue);
}
.link-card__icon svg {
	width: 22px;
	height: 22px;
}
.link-card h3 {
	margin: 0;
	font-size: 1rem;
	color: var(--dishub-navy);
}
.link-card p {
	margin: 0;
	font-size: .86rem;
	color: var(--color-muted-foreground);
	line-height: 1.55;
}
.link-card__go {
	margin-top: auto;
	font-size: .86rem;
	font-weight: 600;
	color: var(--dishub-blue);
}

/* ---------- Footer ---------- */
.site-footer {
	background: var(--dishub-navy);
	color: rgba(255, 255, 255, .78);
}
.site-footer a {
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
}
.site-footer a:hover {
	color: #fff;
}
.site-footer__top {
	display: grid;
	grid-template-columns: 1.35fr 1fr 1fr 1.1fr;
	gap: 2.5rem;
	padding-block: 3.5rem;
}
.site-footer__brand img {
	width: 58px;
	height: 58px;
}
.site-footer__brand h3 {
	margin: .9rem 0 .4rem;
	color: #fff;
	font-size: 1.05rem;
	line-height: 1.3;
}
.site-footer__brand p {
	margin: 0;
	font-size: .88rem;
	max-width: 30rem;
	line-height: 1.6;
}
.site-footer h4 {
	margin: 0 0 1rem;
	color: #fff;
	font-size: .9rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
}
.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .55rem;
}
.site-footer ul li {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-size: .9rem;
}
.site-footer ul li svg {
	width: 16px;
	height: 16px;
	margin-top: .2rem;
	flex-shrink: 0;
	color: var(--dishub-orange);
}
.site-footer ul li a {
	display: inline-flex;
}
.site-footer__social {
	display: flex;
	gap: .6rem;
	margin-top: 1.1rem;
}
.site-footer__social a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .14);
	transition: background .2s ease, transform .2s ease;
}
.site-footer__social a:hover {
	background: var(--dishub-orange);
	color: var(--dishub-navy);
	transform: translateY(-2px);
}
.site-footer__social svg {
	width: 18px;
	height: 18px;
}
.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-block: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: .84rem;
}

/* ---------- Page hero + breadcrumb ---------- */
.page-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(1.6rem, 3.6vw, 2.75rem);
	color: #fff;
	background:
		radial-gradient(700px 260px at 90% 0%, rgba(255, 180, 85, .24), transparent 60%),
		linear-gradient(115deg, var(--dishub-navy), var(--dishub-blue));
}
.page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 52px 52px;
	pointer-events: none;
}
.page-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 2rem;
}
.page-hero h1 {
	margin: .35rem 0 0;
	font-size: clamp(1.45rem, 2.8vw, 1.9rem);
	line-height: 1.2;
	letter-spacing: -.02em;
}
.page-hero .breadcrumb,
.page-hero .breadcrumb a {
	color: rgba(255, 255, 255, .78);
}
.page-hero .breadcrumb .breadcrumb__item[aria-current="page"] {
	color: var(--dishub-orange);
}

/* ---------- Entry content ---------- */
.entry-content {
	max-width: 46rem;
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	color: var(--dishub-navy);
	letter-spacing: -.015em;
	line-height: 1.3;
}
.entry-content h2 {
	font-size: 1.6rem;
	margin: 2rem 0 .9rem;
}
.entry-content h3 {
	font-size: 1.25rem;
	margin: 1.6rem 0 .7rem;
}
.entry-content p,
.entry-content ul,
.entry-content ol {
	margin: 0 0 1.1rem;
}
.entry-content a:not(.button) {
	color: var(--dishub-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.entry-content img {
	border-radius: 14px;
	height: auto;
}
.entry-content blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.5rem;
	border-left: 4px solid var(--dishub-orange);
	background: var(--dishub-surface);
	border-radius: 0 12px 12px 0;
}
.entry-content table {
	border-collapse: collapse;
	width: 100%;
}
.entry-content th,
.entry-content td {
	border: 1px solid var(--dishub-border);
	padding: .6rem .9rem;
	text-align: left;
}

/* Post meta row */
.post-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.25rem;
	color: var(--color-muted-foreground);
	font-size: .86rem;
	margin-bottom: 1.5rem;
}
.post-meta span {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.post-meta svg {
	width: 15px;
	height: 15px;
}

/* ---------- Cards / archive ---------- */
.entry-card {
	--card-padding-inline: calc(var(--spacing) * 5);
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
	overflow: hidden;
}
.entry-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}
.entry-card .card__body {
	flex: 1;
}
.entry-card .card__image-wrap {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--dishub-surface-2);
}
.entry-card .card__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.entry-card .card__title {
	font-size: 1.02rem;
	line-height: 1.4;
}
.entry-card .card__title a {
	color: var(--dishub-navy);
	text-decoration: none;
}
.entry-card .card__title a:hover {
	color: var(--dishub-blue);
}

/* ---------- Pagination ---------- */
.pagination-wrap {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
}
.pagination .pagination__item[aria-current="page"] {
	font-weight: 700;
}

/* ---------- Sidebar widgets ---------- */
.widget {
	border: 1px solid var(--dishub-border);
	border-radius: var(--dishub-radius);
	overflow: hidden;
	margin-bottom: 1.5rem;
}
.widget .widget-title {
	font-weight: 700;
	color: var(--dishub-navy);
}
.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.widget ul li {
	padding: .5rem 0;
	border-bottom: 1px solid var(--dishub-border);
	font-size: .92rem;
}
.widget ul li:last-child {
	border-bottom: 0;
}
.widget ul li a {
	color: var(--dishub-navy);
	text-decoration: none;
}
.widget ul li a:hover {
	color: var(--dishub-blue);
}

/* ---------- Search form ---------- */
.search-form {
	display: flex;
	gap: .5rem;
}
.search-form .input {
	flex: 1;
}
.search-form .button {
	flex-shrink: 0;
}

/* ---------- Comments ---------- */
.comments-area {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--dishub-border);
}
.comments-area .comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.comments-area .comment-body {
	padding: 1rem 0;
	border-bottom: 1px solid var(--dishub-border);
}
.comments-area .comment-author .avatar {
	border-radius: 50%;
	margin-right: .5rem;
	vertical-align: middle;
}
.comments-area .comment-reply-link {
	color: var(--dishub-blue);
	font-size: .85rem;
	text-decoration: none;
}

/* ---------- Accessibility ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus {
	position: fixed;
	top: .75rem;
	left: .75rem;
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	padding: .6rem 1rem;
	background: var(--dishub-navy);
	color: #fff;
	border-radius: 8px;
	text-decoration: none;
}

/* ---------- Error / empty ---------- */
.error-404 .search-form {
	max-width: 30rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.grid--3,
	.grid--4,
	.site-footer__top {
		grid-template-columns: 1fr;
	}
	.hero__float {
		display: none;
	}
	.page-hero__inner {
		grid-template-columns: 1fr;
	}
	.brand__text {
		display: none;
	}
	.govbar__left {
		display: none;
	}
	.site-header .navbar__nav {
		margin-inline-start: 0;
	}
	/* Mobile drawer: submenu collapsed, opens on tap of the parent link. */
	.site-header .navbar__nav .sub-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		min-width: 0;
		width: 100%;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: .25rem 0 .25rem 1.1rem;
		display: none;
	}
	.site-header .navbar__nav li.submenu-open > .sub-menu {
		display: block;
	}
	.site-header .navbar__nav li:hover > .sub-menu,
	.site-header .navbar__nav li:focus-within > .sub-menu,
	.site-header .navbar__nav li.submenu-open:hover > .sub-menu,
	.site-header .navbar__nav li.submenu-open:focus-within > .sub-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
	}
	.site-header .navbar__nav .sub-menu .navbar__button {
		white-space: normal;
	}
}

@media (max-width: 760px) {
	.announcement__inner {
		gap: .75rem;
	}
	.announcement__link {
		padding: .35rem .7rem;
		font-size: .72rem;
	}
}
@media (max-width: 560px) {
	.section {
		padding-block: 3rem;
	}
	.hero__stats {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.hero__actions .button {
		width: 100%;
		justify-content: center;
	}
	.announcement__badge {
		padding: .2rem .5rem;
		font-size: .55rem;
	}
	.announcement__link {
		padding: .3rem .6rem;
		font-size: .68rem;
	}
	.announcement__item {
		font-size: .78rem;
		margin-inline-end: 2.5rem;
	}
}

/* ---------- Accessibility ---------- */
/* Reduced motion: disable all non-essential animations. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.announcement__track {
		animation: none !important;
	}
	.hero__badge-dot {
		animation: none !important;
	}
	.news-card:hover {
		transform: none !important;
	}
	.news-card .card__image-wrap img {
		transition: none !important;
	}
}

/* Focus-visible: visible ring only for keyboard users. */
:focus-visible {
	outline: 2px solid var(--color-primary, #0b3f9e);
	outline-offset: 2px;
	border-radius: 4px;
}
:focus:not(:focus-visible) {
	outline: none;
}

/* Pause marquee on focus/hover for keyboard & screen reader users. */
.announcement__marquee:focus-within .announcement__track {
	animation-play-state: paused;
}

/* Ensure minimum touch target size (44×44px) for interactive elements. */
.announcement__link,
.announcement__close,
.doc-slider__nav {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Visible underlines for text links (helps color-blind users). */
.card__title a,
.card__link {
	text-decoration-skip-ink: auto;
	underline-offset: 3px;
}
.card__title a:hover,
.card__link:hover {
	text-decoration: underline;
}

/* High-contrast mode support. */
@media (forced-colors: active) {
	.announcement {
		border: 1px solid ButtonText;
	}
	.announcement__badge {
		border: 1px solid ButtonText;
	}
	.announcement__link {
		border: 1px solid ButtonText;
	}
	.news-card {
		border: 1px solid ButtonText;
	}
	.button {
		border: 1px solid ButtonText;
	}
}

/* ---------- Accessibility Panel ---------- */
.a11y {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 9999;
}
.a11y__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--dishub-navy);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 24px rgba(0, 30, 88, .4);
	transition: background .2s, box-shadow .2s, transform .2s;
}
.a11y__toggle:hover {
	background: var(--dishub-blue);
	box-shadow: 0 8px 32px rgba(0, 30, 88, .5);
	transform: translateY(-1px);
}
.a11y__toggle:focus-visible {
	outline: 2px solid var(--dishub-orange);
	outline-offset: 3px;
}
.a11y__label {
	pointer-events: none;
	display: none;
}
.a11y__menu {
	position: absolute;
	bottom: calc(100% + .75rem);
	right: 0;
	width: 260px;
	padding: 1.25rem;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
	animation: a11ySlideUp .25s ease;
}
.a11y__menu[hidden] {
	display: none;
}
@keyframes a11ySlideUp {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
.a11y__title {
	margin: 0 0 1rem;
	font-size: .95rem;
	font-weight: 700;
	color: var(--dishub-navy);
}
.a11y__group {
	margin-bottom: 1rem;
}
.a11y__group-label {
	display: block;
	margin-bottom: .45rem;
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #666;
}
.a11y__btn-row {
	display: flex;
	gap: .4rem;
}
.a11y__btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .2rem;
	padding: .55rem 0;
	border: 1px solid var(--dishub-border);
	border-radius: 8px;
	background: var(--dishub-surface);
	color: var(--dishub-navy);
	font-size: .82rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.a11y__btn:hover {
	background: var(--dishub-navy);
	border-color: var(--dishub-navy);
	color: #fff;
}
.a11y__btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}
.a11y__btn.is-active {
	background: var(--dishub-navy);
	border-color: var(--dishub-navy);
	color: #fff;
	box-shadow: 0 2px 8px rgba(0, 30, 88, .25);
}
.a11y__btn span {
	font-size: .65rem;
}
.a11y__reset {
	display: block;
	width: 100%;
	padding: .5rem 0;
	border: 1px solid var(--dishub-border);
	border-radius: 8px;
	background: transparent;
	color: #888;
	font-size: .75rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.a11y__reset:hover {
	background: #fee2e2;
	border-color: #fca5a5;
	color: #b91c1c;
}
.a11y__reset:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* --- Accessibility mode states --- */
html.a11y-high-contrast {
	filter: contrast(1.5);
}
html.a11y-grayscale {
	filter: grayscale(1);
}
html.a11y-underline a:not(.a11y__btn):not(.a11y__toggle) {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

@media (max-width: 560px) {
	.a11y {
		bottom: 1rem;
		right: 1rem;
	}
	.a11y__menu {
		right: -0.5rem;
		width: 240px;
	}
}