/*
=================================
FONT IMPORTS
=================================
*/
/* Semi Condensed */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/*
=================================
    RESET
=================================
*/

/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Set core root defaults */
html {
	font-size: 62.5%; /* 1rem = 10px for easier calculations */
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

html:focus-within {
	scroll-behavior: smooth;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	font-family: "Barlow Semi Condensed", sans-serif;
	font-size: 1.6rem; /* 16px - standard readable size */
	line-height: 1.5;
	text-rendering: optimizeSpeed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Remove list styles on ul, ol elements */
ul,
ol {
	list-style: none;
}

/* Make images easier to work with */
img,
picture,
video,
canvas,
svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* Remove default button styles */
button {
	border: none;
	background: none;
	cursor: pointer;
}

/* Remove built-in form typography styles */
input,
textarea,
select {
	background: none;
	border: none;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
	min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
	scroll-margin-block: 5ex;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	/* text-wrap: balance; */
	line-height: 1.2;
}

/* Improve text wrapping on paragraphs */
p.pretty {
	text-wrap: pretty;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Remove default anchor styling */
a {
	text-decoration: none;
	color: inherit;
}

/* Ensure links are keyboard accessible */
a:focus-visible,
button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Remove default table spacing */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Improve readability of definition lists */
dd {
	margin-inline-start: 1em;
}

/* Reset fieldset and legend */
fieldset {
	border: none;
}

legend {
	display: table;
	max-width: 100%;
	white-space: normal;
}

/* Remove default blockquote styling */
blockquote,
q {
	quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
	content: "";
	content: none;
}

/* Ensure horizontal rules are visible */
hr {
	border: none;
	border-top: 1px solid currentColor;
	opacity: 0.25;
}

/* Prevent sub and sup affecting line-height */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Ensure embedded content fits */
iframe,
embed,
object {
	display: block;
	max-width: 100%;
}

/* Remove default details/summary styling */
summary {
	display: list-item;
	cursor: pointer;
}

/* Hidden attribute support */
[hidden] {
	display: none !important;
}

/* Disabled element styles */
[disabled] {
	cursor: not-allowed;
	opacity: 0.6;
}

:root {
	--color-primary: rgba(0, 48, 135, 1); /* #003087 */
	--color-secondary: rgba(157, 34, 53, 1); /* #9d2235 */
	--color-tertiary: rgba(255, 252, 245, 1); /* #fffcf5 */
	--color-link-hover: rgba(242, 195, 69, 1); /* #f2c345 */
}

.color-nyred {
	color: var(--color-secondary);
}

body {
	background-color: var(--color-tertiary);
}

.btn-red,
.btn-blue {
	display: block;
	margin: 0 auto;
	margin-top: 2rem;
	width: fit-content;
	background-color: var(--color-secondary);
	cursor: pointer;
	color: white;
	font-size: 2.2rem;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.12rem;
	padding: 1.2rem 2.4rem;
	border-radius: 2.5rem;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
	transition: all 0.4s ease-in-out;
}

.btn-red:hover,
.btn-blue:hover {
	background-color: var(--color-primary);
	transform: translateX(-3px);
}

.btn-blue {
	background-color: var(--color-primary);
}

.btn-blue:hover {
	background-color: var(--color-secondary);
}

.text-white {
	color: rgb(255, 255, 255) !important;
}

.star-line {
	margin: 0 auto;
	margin-top: 5rem;
	margin-bottom: 5rem;
	min-height: 5rem;
	width: 25%;
	background-image: url(../img/star-blue.svg);
	/* background-repeat: repeat-x; */
	background-repeat: space;
	background-size: contain;
	/* background-size: contain; */
}

@media (max-width: 990px) {
	.star-line {
		width: 40%;
	}
}

header {
	position: relative;
}
header > img {
	position: absolute;
	top: 1rem;
	left: 1rem;
	width: clamp(10rem, calc(3.998rem + 10.42vw), 24rem);
	z-index: 100;
	/* aspect-ratio: 1/1; */
}

.hero-image__desktop {
	display: block;
	width: 100%;
	height: auto;
}
.hero-image__mobile {
	display: none;
}
@media (max-width: 1200px) {
}

@media (max-width: 992px) {
}

@media (max-width: 768px) {
	.hero-image__desktop {
		display: none;
	}
	.hero-image__mobile {
		display: block;
		width: 100%;
		height: auto;
	}
}

@media (max-width: 576px) {
}

header .hero-no-image {
	width: 100%;
	height: clamp(20rem, calc(11.429rem + 14.88vw), 40rem);
	display: flex;
	align-items: end;
	justify-content: end;
	background-color: var(--color-secondary);
	padding: 3rem;
	color: rgba(255, 255, 255, 1);
}

header .hero-no-image h1 {
	font-size: clamp(4.6rem, calc(2.284rem + 4.02vw), 10rem);
	font-style: italic;
	text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}

header .hero-no-image .title-left {
	width: 100%;
}
/* Navigation Bar */
nav.navbar {
	display: flex;
	height: clamp(8rem, calc(6.284rem + 2.98vw), 12rem);
	justify-content: space-between;
	align-items: center;
	padding-left: clamp(13rem, calc(6.572rem + 11.16vw), 28rem);
	padding-right: clamp(2rem, calc(1.142rem + 1.49vw), 4rem);
	background-color: var(--color-primary);
}

nav.navbar .nav-left {
	display: flex;
}

nav.navbar .social-icons,
footer .footer-3 .social-icons {
	display: flex;
	gap: 2rem;
}

nav.navbar .social-icons a img,
footer .footer-3 .social-icons a img {
	height: 100%;
}

nav.navbar .social-icon,
footer .footer-3 .social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(3.6rem, calc(3.001rem + 1.04vw), 5rem);
	height: clamp(3.6rem, calc(3.001rem + 1.04vw), 5rem);
	/* aspect-ratio: 1/1; */
	padding: 7%;
	background-color: rgba(255, 255, 255, 1);
	/* font-size: 3rem; */
	border-radius: 50%;
	color: var(--color-primary);
	transition: all 0.3s;
}

nav.navbar .social-icon:hover,
footer .footer-3 .social-icon:hover {
	background-color: rgba(242, 195, 69, 1);
	transform: scale(1.08);
}

nav.navbar .nav-links {
	display: flex;
	list-style: none;
	gap: clamp(1.8rem, calc(1.401rem + 0.52vw), 2.4rem);
}

nav.navbar .nav-links a {
	color: white;
	text-decoration: none;
	font-size: clamp(1.8rem, calc(1.401rem + 0.52vw), 2.4rem);
	font-weight: 500;
	transition: color 0.3s;
}

nav.navbar .nav-links a:hover {
	color: rgba(242, 195, 69, 1);
}

nav.navbar .nav-right .nav-links li a.active,
footer .footer-links li a.active {
	color: rgba(242, 195, 69, 1) !important;
	font-weight: 600;
}

/* Hamburger Menu */
nav.navbar .hamburger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	width: 5rem;
	height: 5rem;
	gap: 0.6rem;
	/* padding: 1rem; */
	border: 2px solid white;
	border-radius: 50%;
	background-color: #a40f45;
}

nav.navbar .hamburger span {
	width: 28px;
	height: 3px;
	background-color: white;
	transition: all 0.3s;
}

nav.navbar .hamburger.active span:nth-child(1) {
	transform: rotate(45deg) translate(8px, 8px);
}

nav.navbar .hamburger.active span:nth-child(2) {
	opacity: 0;
}

nav.navbar .hamburger.active span:nth-child(3) {
	transform: rotate(-45deg) translate(7px, -7px);
}

@media (max-width: 1200px) {
}
/* Responsive - Below 1000px */
@media (max-width: 992px) {
}

@media (max-width: 768px) {
	nav.navbar .nav-links {
		position: fixed;
		right: -30rem;
		top: 0;
		height: 100vh;
		width: 30rem;
		background-color: rgba(164, 15, 69, 0.8);
		backdrop-filter: blur(10px);
		flex-direction: column;
		padding: 6rem 2rem 2rem;
		gap: 1.4rem;
		transition: right 0.3s ease-in-out;
		box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
		z-index: 1;
	}

	nav.navbar .nav-links.active {
		right: 0;
	}

	nav.navbar .nav-links a {
		font-size: 1.6rem;
		padding: 0.5rem 0;
	}

	nav.navbar .hamburger {
		display: flex;
	}
	nav.navbar .hamburger.active span {
		z-index: 1;
	}
}

footer .footer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr;
	margin-top: 5rem;
	background-color: var(--color-primary);
	color: #fff;
}

footer .footer-1,
footer .footer-2 {
	display: flex;
	justify-content: center;
	padding: 14% 0;
	font-size: 2rem;
}

footer .footer-2 {
	justify-content: start;
}
footer .footer-1 ul > li:first-child,
footer .footer-2 ul > li:first-child {
	font-weight: 600;
}

footer a:hover {
	color: rgba(242, 195, 69, 1);
}

footer .footer-3 {
	align-content: center;
	justify-items: end;
}

footer .footer-3 .social-icons {
	display: flex;
	gap: 2.4rem;
}

footer .footer-3 .social-icon {
	width: clamp(3.6rem, calc(3.001rem + 1.04vw), 5rem);
	aspect-ratio: 1/1;
	background-color: rgba(255, 255, 255, 1);
	font-size: 3rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	transition: all 0.3s;
}

footer .footer-4 {
	display: flex;
	justify-content: end;
	align-items: center;
	padding: 2rem;
}

footer .footer-4 img {
	width: 60%;
	min-width: 1px;
}

@media (max-width: 1200px) {
	/* Responsive - Below 1200px */
}
@media (max-width: 992px) {
	/* Responsive - Below 992px */
}

@media (max-width: 768px) {
	/* Responsive - Below 768px */
	footer .footer-grid {
		padding: 2rem;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 1fr;
	}
	footer .footer-4 img {
		padding: 10%;
	}
}

@media (max-width: 576px) {
	/* Responsive - Below 576px */
}

/* ============================================================================================= */

/* ============================================================
   1. COOKIE CONSENT BANNER
   Fixed to the bottom of the viewport. Uses a CSS transform
   to slide in from below when the .visible class is added by JS.
============================================================ */

/* Base state — banner is hidden below the viewport */
#cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--color-secondary); /* Dark navy background */
	color: #f0f0f0; /* Light text for contrast */
	padding: 2rem 2.4rem;
	z-index: 9998; /* Below modal (9999) but above page content */
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
	transform: translateY(100%); /* Start hidden below the viewport */
	transition: transform 0.35s ease-in-out;
}

/* Visible state — slides up into view when JS adds .visible */
#cookie-banner.visible {
	transform: translateY(0);
}

/* Inner wrapper — constrains width and aligns text with buttons */
.cookie-banner__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap; /* Wraps on smaller screens */
}

/* Banner description text */
.cookie-banner__text {
	margin: 0;
	font-size: 1.4rem; /* 14px */
	line-height: 1.6;
	flex: 1; /* Takes remaining space after buttons */
	min-width: 200px; /* Prevents text from becoming too narrow */
}

/* Inline links within the banner text */
.cookie-banner__link {
	color: #ffffff; /* Light blue — readable on dark background */
	text-decoration: underline;
}

.cookie-banner__link:hover {
	color: var(--color-link-hover);
}

/* Button container within the banner */
.cookie-banner__actions {
	display: flex;
	gap: 1.2rem;
	flex-wrap: wrap;
	align-items: center;
}

/* ============================================================
   2. COOKIE PREFERENCES MODAL — OVERLAY AND PANEL
   Full-screen overlay with a centred preferences panel.
   Hidden by default, shown when JS adds .visible class.
============================================================ */

/* Modal container — hidden by default using display:none */
#cookie-modal {
	display: none;
	position: fixed;
	inset: 0; /* Shorthand: top/right/bottom/left = 0 */
	z-index: 9999; /* Above everything including the banner */
	align-items: center;
	justify-content: center;
}

/* Visible state — flex display centres the modal box */
#cookie-modal.visible {
	display: flex;
}

/* Semi-transparent backdrop behind the modal panel */
.cookie-modal__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.6);
	cursor: pointer; /* Pointer cursor indicates it's clickable to close */
}

/* The white modal panel itself */
.cookie-modal__box {
	position: relative; /* Sits above the overlay */
	background: #ffffff;
	/* background-color: var(--color-secondary); */
	color: #1a1a1a;
	border-radius: 8px;
	padding: 3.2rem;
	max-width: 540px;
	width: 90%; /* Responsive — doesn't exceed 90% of viewport width */
	max-height: 90vh; /* Prevents modal from overflowing on short screens */
	overflow-y: auto; /* Adds scroll if content exceeds available height */
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
	border-radius: 20px;
	z-index: 1; /* Above the overlay within the modal container */
}

/* Modal heading */
.cookie-modal__title {
	margin: 0 0 1.25rem;
	font-size: 2rem;
	font-weight: 700;
	/* color: var(--color-tertiary); */
}

/* Modal introductory paragraph */
.cookie-modal__intro {
	font-size: 1.6rem;
	margin: 0 0 2.4rem;
	padding: 1rem;
	line-height: 1.6;
	background-color: #fff;
	border-radius: 10px;
}

/* ============================================================
   3. MODAL CONTENT ROWS
   Each cookie category is displayed as a row with the
   description on the left and the toggle (or label) on the right.
============================================================ */

/* Individual cookie category row */
.cookie-modal__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.6rem 0;
	border-top: 1px solid #e8e8e8; /* Horizontal divider between categories */
	gap: 1.6rem;
}

/* Left-hand description area */
.cookie-modal__info {
	flex: 1;
}

/* Category name (bold label above the description) */
.cookie-modal__info strong {
	display: block;
	font-size: 1.5rem; /* 15px */
	margin-bottom: 0.64rem;
	color: #1a1a2e;
}

/* Category description text */
.cookie-modal__info p {
	margin: 0;
	font-size: 1.3rem; /* 13px */
	color: #666;
	line-height: 1.5;
}

/* "Always On" label shown instead of a toggle for strictly necessary cookies */
.cookie-modal__always-on {
	font-size: 1.3rem;
	font-weight: 600;
	color: #2e7d32; /* Green — signals active / cannot be disabled */
	white-space: nowrap;
	flex-shrink: 0;
}

/* Modal action buttons row */
.cookie-modal__actions {
	display: flex;
	gap: 1.2rem;
	flex-wrap: wrap;
	justify-content: flex-end; /* Right-align buttons */
	margin-top: 2.4rem;
	padding-top: 1.6rem;
	border-top: 1px solid #e8e8e8;
}

/* Small policy links at the base of the modal */
.cookie-modal__policy-link {
	font-size: 1.2rem; /* 12px */
	color: #888;
	margin-top: 1.6rem;
	text-align: center;
}

.cookie-modal__policy-link a {
	color: #1a6abf;
	text-decoration: underline;
}

.cookie-modal__policy-link a:hover {
	color: #145299;
}

/* ============================================================
   4. TOGGLE SWITCH
   A CSS-only styled toggle built on a hidden checkbox.
   The visible slider is controlled via the adjacent sibling
   selector (~) based on the checkbox :checked state.
============================================================ */

/* Outer label acts as the clickable toggle container */
.cookie-toggle {
	position: relative;
	display: inline-block;
	width: 48px;
	height: 26px;
	flex-shrink: 0; /* Prevents toggle from being squeezed in flex rows */
	cursor: pointer;
}

/* Hide the native checkbox input — we replace it visually with the slider */
.cookie-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

/* The toggle track (background pill shape) */
.cookie-toggle__slider {
	position: absolute;
	inset: 0;
	background-color: #cacaca; /* Grey when off */
	border-radius: 26px; /* Fully rounded pill */
	transition: background-color 0.25s ease;
}

/* The circular knob inside the toggle track */
.cookie-toggle__slider::before {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	left: 3px;
	bottom: 3px;
	background-color: #ffffff;
	border-radius: 50%;
	transition: transform 0.25s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Checked state — blue track */
.cookie-toggle input:checked + .cookie-toggle__slider {
	background-color: var(--color-primary);
}

/* Checked state — knob slides to the right */
.cookie-toggle input:checked + .cookie-toggle__slider::before {
	transform: translateX(22px);
}

/* Focus ring — visible when navigating with keyboard (accessibility) */
.cookie-toggle input:focus-visible + .cookie-toggle__slider {
	outline: 2px solid #1a6abf;
	outline-offset: 2px;
}

/* ============================================================
   5. SHARED BUTTON STYLES
   Used across both the banner and the modal.
   Two variants: primary (filled, for Accept All) and
   secondary (outlined, for Reject All / Save Preferences).
   Both variants are given equal visual weight per PECR guidance.
============================================================ */

.cookie-btn {
	padding: 0.8rem 1.75rem;
	font-size: 1.4rem;
	font-weight: 600;
	border-radius: 4px;
	border: 2px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
	line-height: 1.4;
}

/* Primary — filled blue button used for Accept All */
.cookie-btn--primary {
	background-color: #1a6abf;
	color: #ffffff;
	border-color: #1a6abf;
}

.cookie-btn--primary:hover {
	background-color: #145299;
	border-color: #145299;
}

.cookie-btn--primary:focus-visible {
	outline: 2px solid #7eb8f7;
	outline-offset: 2px;
}

/* Secondary — outlined button used for Reject All / Save Preferences */
/* On the dark banner, the outline and text are light */
.cookie-btn--secondary {
	background-color: transparent;
	color: #f0f0f0;
	border-color: #f0f0f0;
}

.cookie-btn--secondary:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

/* Override secondary colours inside the modal (light background) */
.cookie-modal__box .cookie-btn--secondary {
	color: #333333;
	border-color: #333333;
}

.cookie-modal__box .cookie-btn--secondary:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

.cookie-btn--secondary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ============================================================
   6. RESPONSIVE — SMALL SCREENS (max 640px)
   Stacks the banner and modal button layouts vertically
   on narrow viewports.
============================================================ */

@media (max-width: 640px) {
	/* Stack banner content vertically on mobile */
	.cookie-banner__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Make banner buttons full-width and equal size */
	.cookie-banner__actions {
		width: 100%;
	}

	.cookie-banner__actions .cookie-btn {
		flex: 1;
		text-align: center;
	}

	/* Stack modal buttons vertically and make them full-width */
	.cookie-modal__actions {
		flex-direction: column;
	}

	.cookie-modal__actions .cookie-btn {
		width: 100%;
		text-align: center;
	}

	/* Reduce modal padding on small screens */
	.cookie-modal__box {
		padding: 2.4rem;
	}
}

/* ============================================================
   FLOATING COOKIE SETTINGS BUTTON (FAB)
   Fixed to the bottom-right corner of every page.
   Uses .cookie-settings-trigger which is already wired up
   in cookie-consent.js — no JS changes required.
   z-index: 9997 keeps it below the banner (9998) and
   modal (9999) so it never overlaps them.
============================================================ */

.cookie-fab {
	position: fixed;
	bottom: 1.6rem;
	left: 1.6rem;
	z-index: 9997;

	/* Size and shape */
	width: 4.8rem;
	height: 4.8rem;
	border-radius: 50%;
	border: none;
	padding: 0;
	cursor: pointer;

	/* Appearance */
	background-color: transparent;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

	/* Centre the SVG inside */
	display: flex;
	align-items: center;
	justify-content: center;

	/* Smooth hover transition */
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.cookie-fab:hover {
	transform: scale(1.12);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.cookie-fab:focus-visible {
	outline: 2px solid #1a6abf;
	outline-offset: 3px;
}

/* When the consent banner is visible, nudge the FAB upward
   so it doesn't sit on top of the banner. The banner is
   approximately 70px tall on desktop. Adjust if your banner
   height differs after styling. */
#cookie-banner.visible ~ .cookie-fab,
body:has(#cookie-banner.visible) .cookie-fab {
	bottom: 8rem;
	transition:
		bottom 0.35s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}