/*
 * PCA Awards Platform — shared public stylesheet.
 *
 * Ported verbatim from the approved HTML prototypes, then extended with the
 * pieces a multi-page, bilingual, dark-mode build needs. Colour, radius and
 * font values are CSS custom properties written by Assets::brand_tokens(), so
 * every token is admin-configurable without touching this file.
 *
 * Breakpoints (spec file 07 §4):
 *   mobile  < 640px
 *   tablet  640px – 1023px
 *   desktop >= 1024px
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--navy-deep: #00236a;
	--navy-darker: #001440;
	--blue-bright: #009cde;
	--blue-soft: #5fc4ee;
	--blue-pale: #eaf7fd;
	--white: #ffffff;
	--ink: #0b1830;
	--surface: #f4f8fb;
	--muted: #3a4b6b;
	--max: 1240px;
	--radius: 22px;
	--shadow: 0 10px 30px rgba(0, 35, 106, 0.12);
	--brand-font: 'Cairo', sans-serif;

	--card-bg: var(--white);
	--card-border: rgba(0, 35, 106, 0.08);
	--body-bg: var(--surface);
	--body-ink: var(--ink);
	--header-bg: var(--white);
	--heading-ink: var(--navy-deep);
	--field-bg: var(--white);
	--field-border: rgba(0, 35, 106, 0.18);
}

/* Dark mode: a re-mapping of the semantic tokens only, so every component
   inherits it without a single duplicated rule. */
[data-theme='dark'] {
	--white: #131c30;
	--body-bg: #0a1120;
	--body-ink: #e8eef8;
	--surface: #0a1120;
	--ink: #e8eef8;
	--muted: #9fb0cd;
	--card-bg: #131c30;
	--card-border: rgba(120, 160, 220, 0.16);
	--header-bg: #101828;
	--heading-ink: #e8eef8;
	--blue-pale: #10233a;
	--field-bg: #0f1829;
	--field-border: rgba(120, 160, 220, 0.28);
	--shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

body.pca-body {
	font-family: var(--brand-font);
	color: var(--body-ink);
	background: var(--body-bg);
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body.pca-body > main {
	flex: 1 0 auto;
}

img {
	max-width: 100%;
	display: block;
}

a {
	text-decoration: none;
	color: inherit;
}

button {
	font-family: inherit;
	cursor: pointer;
}

svg {
	max-width: 100%;
}

.wrap {
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: 24px;
}

.pca-skip-link {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	z-index: 999;
	background: var(--navy-deep);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 10px 0;
	font-weight: 800;
}

.pca-skip-link:focus {
	inset-inline-start: 0;
}

:focus-visible {
	outline: 3px solid var(--blue-bright);
	outline-offset: 2px;
}

.is-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The `.ar` class marks the *secondary* line in the design, not a language:
   when the site is read in Arabic the secondary line is English. Components
   below set `direction: rtl` on `.ar` for the common case, so an explicit
   `dir` attribute — always stamped by Lang::dir_for() — must win. */
.ar[dir='ltr'],
.en[dir='ltr'] {
	direction: ltr;
	unicode-bidi: isolate;
}

.ar[dir='rtl'],
.en[dir='rtl'] {
	direction: rtl;
	unicode-bidi: isolate;
}

/* Signature notch shape borrowed from the logo's folded flag. */
.flag-notch {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%, 0 78%);
}

.notch-underline {
	width: 74px;
	height: 14px;
	background: var(--blue-bright);
	clip-path: polygon(0 0, 100% 0, 100% 40%, 82% 100%, 0 100%);
	margin: 10px auto 0;
}

/* ==========================================================================
   3. Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--header-bg);
	border-bottom: 1px solid var(--card-border);
}

.site-header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	height: 72px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

.brand img {
	height: 52px;
	width: auto;
}

.brand-type {
	line-height: 1.05;
}

.brand-type strong {
	display: block;
	font-size: 15px;
	font-weight: 800;
	color: var(--heading-ink);
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.brand-type span {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--blue-bright);
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-inline-start: auto;
}

.site-nav-link {
	font-size: 14px;
	font-weight: 700;
	color: var(--heading-ink);
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.site-nav-link:hover,
.site-nav-link.is-current {
	color: var(--blue-bright);
	border-bottom-color: var(--blue-bright);
}

.header-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.lang-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1.5px solid var(--heading-ink);
	color: var(--heading-ink);
	font-weight: 700;
	font-size: 13px;
	padding: 8px 16px;
	border-radius: 999px;
	background: transparent;
	transition: background 0.18s ease, color 0.18s ease;
}

.lang-pill:hover {
	background: var(--heading-ink);
	color: var(--white);
}

.lang-pill .is-muted {
	opacity: 0.5;
}

.lang-pill .is-active {
	opacity: 1;
}

.theme-toggle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid var(--card-border);
	background: transparent;
	color: var(--heading-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.theme-toggle svg {
	width: 19px;
	height: 19px;
}

.theme-toggle .icon-moon {
	display: none;
}

[data-theme='dark'] .theme-toggle .icon-sun {
	display: none;
}

[data-theme='dark'] .theme-toggle .icon-moon {
	display: block;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 38px;
	border: 1.5px solid var(--card-border);
	border-radius: 10px;
	background: transparent;
	padding: 0 9px;
}

.nav-toggle span {
	display: block;
	height: 2px;
	background: var(--heading-ink);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded='true'] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] span:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded='true'] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
	display: none;
	flex-direction: column;
	border-top: 1px solid var(--card-border);
	background: var(--header-bg);
	padding: 8px 24px 16px;
}

.mobile-nav-link {
	display: flex;
	flex-direction: column;
	padding: 12px 0;
	border-bottom: 1px solid var(--card-border);
	font-weight: 800;
	color: var(--heading-ink);
}

.mobile-nav-link .ar {
	font-size: 12px;
	font-weight: 700;
	color: var(--blue-bright);
	margin-top: 2px;
}

.mobile-nav-link.is-current {
	color: var(--blue-bright);
}

@media (max-width: 1023px) {
	.site-nav {
		display: none;
	}

	.nav-toggle {
		display: flex;
	}

	.mobile-nav:not([hidden]) {
		display: flex;
	}
}

@media (max-width: 600px) {
	.brand img {
		height: 40px;
	}

	.brand-type strong {
		font-size: 12.5px;
	}

	.brand-type span {
		font-size: 10.5px;
	}

	.lang-pill {
		padding: 7px 12px;
		font-size: 12px;
	}
}

/* ==========================================================================
   4. Hero slider
   ========================================================================== */

.hero-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--navy-deep);
}

.slides-track {
	display: flex;
	transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.slide {
	min-width: 100%;
	height: clamp(340px, 54vw, 640px);
	position: relative;
	display: flex;
	align-items: center;
	color: #fff;
	overflow: hidden;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.slide .slide-inner {
	padding: 0 24px;
	max-width: var(--max);
	margin-inline: auto;
	width: 100%;
	position: relative;
	z-index: 2;
}

.slide .eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--blue-soft);
}

.slide h2 {
	font-size: clamp(24px, 4vw, 46px);
	font-weight: 900;
	margin: 10px 0 0;
	max-width: 520px;
	line-height: 1.15;
}

.slide .slide-sub {
	margin: 12px 0 0;
	max-width: 520px;
	font-size: clamp(14px, 1.6vw, 17px);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.86);
}

.slide::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(0, 12, 42, 0.95) 0%, rgba(0, 18, 58, 0.8) 30%, rgba(0, 20, 64, 0.4) 55%, rgba(0, 20, 64, 0.1) 80%);
}

.slide-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.slide-media img,
.slide-media picture,
.slide-media picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slide-logo {
	position: absolute;
	top: 28px;
	inset-inline-start: 28px;
	z-index: 3;
}

.slide-logo img {
	height: 168px;
	width: auto;
	display: block;
	filter:
		drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff)
		drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff)
		drop-shadow(0 8px 18px rgba(0, 10, 40, 0.4));
}

.slide-cta {
	display: inline-block;
	margin-top: 20px;
	background: var(--blue-bright);
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	padding: 13px 28px;
	border-radius: 999px;
	transition: background 0.18s ease, transform 0.18s ease;
}

.slide-cta:hover {
	background: #fff;
	color: var(--navy-deep);
	transform: translateY(-2px);
}

.slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	backdrop-filter: blur(4px);
}

.slider-arrow:hover {
	background: rgba(255, 255, 255, 0.32);
}

.arrow-prev {
	inset-inline-start: 18px;
}

.arrow-next {
	inset-inline-end: 18px;
}

/* Arrow glyphs mirror with reading direction. */
[dir='rtl'] .arrow-prev,
[dir='rtl'] .arrow-next {
	transform: translateY(-50%) scaleX(-1);
}

.slider-dots {
	position: absolute;
	bottom: 16px;
	inset-inline: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 5;
}

.dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	border: none;
	padding: 0;
}

.dot.active {
	background: #fff;
	width: 22px;
	border-radius: 6px;
}

@media (max-width: 600px) {
	.slide-logo {
		top: 16px;
		inset-inline-start: 16px;
	}

	.slide-logo img {
		height: 96px;
	}

	.slide h2 {
		max-width: 88%;
	}
}

/* ==========================================================================
   5. Ad banner slots
   ========================================================================== */

.ad-section {
	padding: 28px 0;
}

.ad-banner {
	max-width: 728px;
	margin-inline: auto;
	min-height: 180px;
	border-radius: 14px;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	box-shadow: 0 10px 26px rgba(0, 20, 64, 0.18);
	color: #fff;
	background: linear-gradient(120deg, #001a4a 0%, #00236a 55%, #009cde 130%);
}

.ad-banner.is-image {
	min-height: 0;
	box-shadow: none;
	background: none;
}

.ad-banner.is-image img,
.ad-banner.is-image picture {
	width: 100%;
	height: auto;
	border-radius: 14px;
}

.ad-banner .ad-tag {
	position: absolute;
	top: 10px;
	inset-inline-end: 12px;
	z-index: 3;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.5px;
	background: rgba(255, 255, 255, 0.85);
	color: #333;
	padding: 2px 8px;
	border-radius: 5px;
}

.ad-banner .ad-copy {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 0 36px;
	width: 100%;
}

.ad-banner .ad-text strong {
	display: block;
	font-size: 26px;
	font-weight: 900;
}

.ad-banner .ad-text span {
	display: block;
	font-size: 15px;
	font-weight: 600;
	opacity: 0.9;
	margin-top: 6px;
}

.ad-banner .ad-cta {
	margin-inline-start: auto;
	background: #fff;
	color: var(--navy-deep);
	font-size: 15px;
	font-weight: 800;
	padding: 13px 26px;
	border-radius: 999px;
	white-space: nowrap;
}

.ad-banner .ad-icon {
	width: 78px;
	height: 78px;
	flex: 0 0 auto;
}

@media (max-width: 600px) {
	.ad-banner {
		max-width: 320px;
		min-height: 128px;
		border-radius: 10px;
	}

	.ad-banner .ad-copy {
		padding: 0 20px;
		gap: 16px;
	}

	.ad-banner .ad-icon {
		width: 50px;
		height: 50px;
	}

	.ad-banner .ad-text strong {
		font-size: 17px;
	}

	.ad-banner .ad-text span {
		font-size: 12px;
	}

	.ad-banner .ad-cta {
		font-size: 12px;
		padding: 9px 16px;
	}
}

/* ==========================================================================
   6. Shared section headings
   ========================================================================== */

.section-heading {
	text-align: center;
	margin-bottom: 28px;
}

.section-heading h2,
.section-heading h3,
.section-heading h4 {
	font-size: clamp(20px, 3vw, 30px);
	font-weight: 900;
	color: var(--heading-ink);
	margin: 0;
}

.section-heading .ar {
	display: block;
	direction: rtl;
	font-size: clamp(17px, 2.6vw, 24px);
	font-weight: 800;
	color: var(--blue-bright);
	margin-top: 4px;
}

.section-heading .sub {
	margin: 10px auto 0;
	max-width: 720px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--muted);
}

/* ==========================================================================
   7. Responsive grids (5 desktop / 3 tablet / 2 mobile — spec file 07 §4)
   ========================================================================== */

.pca-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1023px) {
	.pca-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 639px) {
	.pca-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

/* ==========================================================================
   8. Buttons and form controls
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	border-radius: 999px;
	font-weight: 800;
	font-size: 15px;
	padding: 13px 26px;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.btn-primary {
	background: var(--navy-deep);
	color: #fff;
}

.btn-primary:hover {
	background: var(--navy-darker);
}

.btn-accent {
	background: var(--blue-bright);
	color: #fff;
}

.btn-accent:hover {
	transform: translateY(-2px);
}

.btn-outline {
	background: transparent;
	color: var(--heading-ink);
	border: 2px solid var(--heading-ink);
}

.btn-outline:hover {
	background: var(--heading-ink);
	color: var(--white);
}

.btn:disabled,
.btn[aria-disabled='true'] {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.btn .ar {
	direction: rtl;
	font-weight: 700;
	font-size: 13px;
	opacity: 0.85;
}

.pca-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pca-field label {
	font-size: 13px;
	font-weight: 800;
	color: var(--heading-ink);
	display: flex;
	gap: 8px;
	align-items: baseline;
	flex-wrap: wrap;
}

.pca-field label .ar {
	direction: rtl;
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
}

.pca-field input,
.pca-field select,
.pca-field textarea {
	font-family: inherit;
	font-size: 15px;
	color: var(--body-ink);
	background: var(--field-bg);
	border: 1.5px solid var(--field-border);
	border-radius: 12px;
	padding: 12px 14px;
	width: 100%;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pca-field input:focus,
.pca-field select:focus,
.pca-field textarea:focus {
	outline: none;
	border-color: var(--blue-bright);
	box-shadow: 0 0 0 3px rgba(0, 156, 222, 0.18);
}

.pca-field .field-error {
	font-size: 12px;
	font-weight: 700;
	color: #c62828;
}

.pca-field.has-error input,
.pca-field.has-error select,
.pca-field.has-error textarea {
	border-color: #c62828;
}

/* Honeypot: hidden from people, visible to naive bots. */
.pca-hp-field {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pca-form-message {
	margin-top: 14px;
	padding: 13px 16px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 700;
	display: none;
}

.pca-form-message.is-visible {
	display: block;
}

.pca-form-message.is-success {
	background: rgba(20, 108, 46, 0.12);
	color: #146c2e;
}

.pca-form-message.is-error {
	background: rgba(198, 40, 40, 0.12);
	color: #c62828;
}

/* ==========================================================================
   9. Sponsors
   ========================================================================== */

.sponsors-section {
	padding: 40px 0;
	background: var(--card-bg);
}

.sponsors-section + .sponsors-section {
	border-top: 1px solid var(--card-border);
}

.sponsors-heading {
	text-align: center;
	margin-bottom: 28px;
}

.sponsors-heading h4 {
	font-size: clamp(18px, 2.6vw, 24px);
	font-weight: 900;
	color: var(--heading-ink);
	margin: 0;
}

.sponsors-heading .ar {
	direction: rtl;
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--blue-bright);
	margin-top: 4px;
}

.logo-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 38px 44px;
}

.logo-mark {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--heading-ink);
	opacity: 0.62;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.logo-mark:hover {
	opacity: 1;
	transform: translateY(-2px);
}

.logo-mark svg {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	fill: currentColor;
}

.logo-mark span {
	font-size: 16px;
	font-weight: 800;
	white-space: nowrap;
	letter-spacing: 0.2px;
}

.logo-mark img {
	height: 38px;
	width: auto;
}

/* Main sponsors render as a single flat colour. The client can either upload
   pre-processed monochrome artwork or leave normal colour logos in place and
   let this filter do the work (spec file 05 §2 — default: CSS filter). */
.sponsors-main .logo-mark img {
	filter: grayscale(1) brightness(0.35) opacity(0.75);
	transition: filter 0.2s ease, transform 0.2s ease;
}

.sponsors-main .logo-mark:hover img {
	filter: grayscale(0) brightness(1) opacity(1);
}

.sponsors-section[data-monochrome='asset'] .logo-mark img {
	filter: none;
}

/* Co-sponsors sit inside an outlined box treatment. */
.sponsors-co .logo-mark {
	border: 1.6px solid var(--card-border);
	border-radius: 14px;
	padding: 12px 18px;
	opacity: 0.8;
}

.sponsors-co .logo-mark:hover {
	opacity: 1;
	border-color: var(--blue-bright);
}

.powered-by {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 26px 0 6px;
	font-weight: 700;
	color: var(--heading-ink);
	font-size: 14px;
}

.powered-by a,
.powered-by .powered-by-mark {
	display: flex;
	align-items: center;
	height: 40px;
}

.powered-by img {
	height: 100%;
	width: auto;
	filter: grayscale(1) opacity(0.65);
	transition: filter 0.2s ease, transform 0.2s ease;
}

.powered-by a:hover img {
	filter: grayscale(0) opacity(1);
	transform: translateY(-2px);
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

.site-footer {
	background: var(--navy-deep);
	color: rgba(255, 255, 255, 0.85);
	padding: 22px 0;
	text-align: center;
	font-size: 13px;
	margin-top: auto;
}

.site-footer a {
	color: var(--blue-soft);
	font-weight: 700;
}

.footer-social {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-bottom: 14px;
}

.footer-social a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: background 0.18s ease;
}

.footer-social a:hover {
	background: rgba(255, 255, 255, 0.16);
}

.footer-social svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.footer-links {
	margin-bottom: 10px;
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	font-weight: 700;
}

.footer-legal {
	opacity: 0.9;
	line-height: 1.7;
}

/* ==========================================================================
   11. Lightbox (winner gallery, ballot photos, car gallery)
   ========================================================================== */

.pca-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 10, 30, 0.92);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 200;
	padding: 24px;
}

.pca-lightbox.is-open {
	display: flex;
}

.pca-lightbox-box {
	position: relative;
	max-width: 1100px;
	width: 100%;
	text-align: center;
}

.pca-lightbox img {
	max-height: 78vh;
	width: auto;
	margin-inline: auto;
	border-radius: 14px;
}

.pca-lightbox-close {
	position: absolute;
	top: -46px;
	inset-inline-end: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	font-size: 22px;
	line-height: 1;
}

.pca-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pca-lightbox-prev {
	inset-inline-start: -8px;
}

.pca-lightbox-next {
	inset-inline-end: -8px;
}

[dir='rtl'] .pca-lightbox-nav {
	transform: translateY(-50%) scaleX(-1);
}

.pca-lightbox-caption {
	margin-top: 14px;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-weight: 700;
}

.pca-lightbox-counter {
	margin-top: 8px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	font-weight: 700;
}

/* ==========================================================================
   12. Empty states and utility
   ========================================================================== */

.pca-empty {
	text-align: center;
	padding: 54px 24px;
	color: var(--muted);
	background: var(--card-bg);
	border: 1px dashed var(--card-border);
	border-radius: var(--radius);
}

.pca-empty strong {
	display: block;
	font-size: 17px;
	color: var(--heading-ink);
	margin-bottom: 6px;
}

.pca-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--blue-bright);
	color: #fff;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
}

.pca-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pca-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.site-header,
	.site-footer,
	.ad-section,
	.pca-lightbox {
		display: none !important;
	}
}

/* ======================================================================
   Per-year media coverage — press, event gallery, video
   Ported from pca-web/previous-winners.html. Rendered under the winners
   grid on both the current and previous winners pages.
   ====================================================================== */
.media-section,
.gallery-section,
.video-section {
	padding-block: 46px 10px;
}

.media-links {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	max-inline-size: 860px;
	margin: 30px auto 0;
}

@media (max-width: 640px) {
	.media-links {
		grid-template-columns: 1fr;
	}
}

.media-link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border: 2px solid var(--navy-deep);
	border-radius: 14px;
	background: var(--white);
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.media-link:hover,
.media-link:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}

.media-link .m-icon {
	inline-size: 26px;
	block-size: 26px;
	flex: 0 0 auto;
	color: var(--blue-bright);
}

.media-link .m-text {
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--ink);
}

/* `margin-inline-start: auto` rather than `margin-left`, so the label parks
   against the trailing edge in Arabic as well as English. */
.media-link .m-ext {
	margin-inline-start: auto;
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--blue-bright);
	white-space: nowrap;
}

.gallery-scroll,
.video-scroll {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 28px 4px 16px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.video-scroll {
	gap: 18px;
}

.event-photo {
	flex: 0 0 auto;
	inline-size: 340px;
	block-size: 230px;
	padding: 0;
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--blue-pale);
	scroll-snap-align: start;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(0, 20, 64, 0.16);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.event-photo img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.event-photo:hover,
.event-photo:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(0, 20, 64, 0.24);
}

.video-card {
	position: relative;
	flex: 0 0 auto;
	inline-size: 280px;
	aspect-ratio: 16 / 9;
	border: 2px dashed rgba(0, 35, 106, 0.35);
	border-radius: 16px;
	background: var(--blue-pale);
	color: var(--navy-deep);
	overflow: hidden;
	text-decoration: none;
	scroll-snap-align: start;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.video-card:hover,
.video-card:focus-visible {
	transform: translateY(-3px);
	border-color: var(--blue-bright);
	box-shadow: var(--shadow);
}

/* A card with real artwork stops being a placeholder: the dashed outline goes
   and the label sits on a scrim so it stays readable over any photograph. */
.video-card.has-thumb {
	border-style: solid;
	border-color: rgba(0, 35, 106, 0.15);
}

.video-card > img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.video-card-body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	text-align: center;
}

.video-card.has-thumb .video-card-body {
	color: #fff;
	background: linear-gradient(180deg, rgba(0, 20, 64, 0.15), rgba(0, 20, 64, 0.68));
}

.video-card-body svg {
	inline-size: 38px;
	block-size: 38px;
}

.video-card-body span {
	font-size: 0.78125rem;
	font-weight: 700;
}

@media (max-width: 640px) {
	.event-photo {
		inline-size: 268px;
		block-size: 182px;
	}

	.video-card {
		inline-size: 232px;
	}
}


/* ==========================================================================
   CAPTCHA widget
   The provider renders its own iframe at a fixed size; this only decides where
   it sits and keeps it from being flush against the submit button. It is
   centred because every form it appears on is centred.
   ========================================================================== */

.pca-captcha {
	display: flex;
	justify-content: center;
	margin-block: 18px 6px;
}

.pca-captcha:empty {
	display: none;
	margin-block: 0;
}

/* The widget is an iframe of a fixed width; on a narrow phone it must be
   allowed to shrink rather than force the card to scroll sideways. */
@media (max-width: 380px) {
	.pca-captcha {
		transform: scale(0.85);
		transform-origin: center;
	}
}


/* ==========================================================================
   Vote / resume / submit button
   Shared, because it appears on the consent form, the resume panel and the
   review screen — three routes, three page stylesheets. It belongs to none of
   them.
   ========================================================================== */

.vote-submit {
	inline-size: 100%;
	margin-block-start: 12px;
	background: var(--navy-deep);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 17px;
	font-size: 16px;
	font-weight: 800;
	font-family: inherit;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	cursor: pointer;
	transition: background 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.vote-submit:hover {
	background: var(--navy-darker);
	color: #fff;
}

.vote-submit .ar {
	font-weight: 700;
	font-size: 14px;
	color: var(--blue-soft);
}

.vote-submit:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}


/* ==========================================================================
   Automotive Excellence Awards — header entry point
   Sits on the same row as the logo, at the far end, sized and weighted like
   the language switcher so it reads as navigation rather than an afterthought.
   ========================================================================== */

/*
 * Filled in the logo's bright blue so it reads as a second destination rather
 * than one more nav link, and filled in the brand navy once you are on it.
 *
 * The label is navy, not white: white on `--blue-bright` is 3.1:1, and at
 * 12.5px bold this is small text, so it would miss WCAG AA. Navy on the same
 * fill is 5.6:1, and the navy state carries white at 17:1.
 */
.aea-nav-pill {
	display: inline-flex;
	align-items: center;
	background: var(--blue-bright);
	border: 1px solid var(--blue-bright);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--navy-darker);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.aea-nav-pill:hover,
.aea-nav-pill:focus-visible {
	background: var(--navy-deep);
	border-color: var(--navy-deep);
	color: #fff;
}

/* Selected: the dark blue, so the pill still reads as "you are here". */
.aea-nav-pill.is-current {
	background: var(--navy-deep);
	border-color: var(--navy-deep);
	color: #fff;
}

/* On a narrow screen the pill would crowd the logo; the mobile menu carries
   the same link, so it steps aside rather than wrapping the header. */
@media (max-width: 900px) {

	.aea-nav-pill {
		display: none;
	}
}

/* ==========================================================================
   19. Coming soon — sections still being filled in
   ========================================================================== */

/*
 * The badge on a navigation entry or an action card. Small, muted and
 * uppercase: it has to read as a status on the label it follows, not as a
 * second label competing with it.
 */
.nav-soon-badge,
.card-soon-badge {
	display: inline-block;
	margin-inline-start: 6px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--blue-pale);
	color: var(--navy-deep);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.5;
	white-space: nowrap;
	vertical-align: middle;
}

.card-soon-badge {
	margin-inline-start: 0;
	margin-block-start: 6px;
}

/* The entry still works — it leads to the holding page — but it should not
   look as finished as the sections that are. */
.site-nav-link.is-coming-soon,
.mobile-nav-link.is-coming-soon,
.action-card.is-coming-soon {
	opacity: 0.72;
}

.action-card.is-coming-soon {
	border-style: dashed;
}

.action-card.is-coming-soon:hover,
.site-nav-link.is-coming-soon:hover {
	opacity: 1;
}

[data-theme='dark'] .nav-soon-badge,
[data-theme='dark'] .card-soon-badge {
	background: rgba(120, 160, 220, 0.18);
	color: var(--body-ink);
}

/* --- The holding page itself ------------------------------------------- */

.coming-soon {
	padding-block: clamp(48px, 9vw, 110px);
}

.coming-soon-panel {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: clamp(28px, 5vw, 52px) clamp(20px, 5vw, 48px);
	box-shadow: var(--shadow);
}

.coming-soon-mark {
	display: block;
	margin-inline: auto;
	margin-block-end: 18px;
	color: var(--blue-bright);
}

.coming-soon-title {
	margin: 0;
	font-size: clamp(26px, 4.2vw, 38px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--heading-ink);
}

.coming-soon-title-alt {
	margin: 6px 0 0;
	font-size: clamp(18px, 2.8vw, 24px);
	font-weight: 700;
	color: var(--blue-bright);
}

.coming-soon-body {
	margin: 18px 0 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--muted);
}

.coming-soon-body.is-alt {
	margin-block-start: 8px;
}

.coming-soon-home {
	margin-block-start: 26px;
}

/* Administrators only: the way back out of the preview. */
.coming-soon-admin {
	margin: 22px 0 0;
	font-size: 12.5px;
	color: var(--muted);
}

.coming-soon-admin a {
	color: var(--blue-bright);
	font-weight: 700;
	text-decoration: underline;
}

/*
 * The banner an administrator sees on a closed section. Deliberately loud —
 * its whole job is to stop a section sitting closed for a week after it was
 * ready — and never rendered for anybody else.
 */
.pca-admin-bar-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 9px 16px;
	background: #7a4b00;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

.pca-admin-bar-notice a {
	color: #fff;
	text-decoration: underline;
	white-space: nowrap;
}