/* =========================================================================
   WaveBus Blocks — supplemental styles
   theme.json owns tokens & most styling. This file covers what blocks
   can't express: scroll-reveal, sticky header, accordions, card hovers,
   accessibility helpers, and a few section utilities.
   All custom classes are prefixed .wb-* to avoid collisions.
   ========================================================================= */

/* ---------- Base / accessibility ---------- */
html {
	scroll-behavior: smooth;
}

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

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(.wp-block-navigation-item__content):focus-visible,
:where(.wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Skip link */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	padding: 0.75rem 1.25rem;
	border-radius: var(--wp--custom--radius--md);
	font-weight: 700;
}
.skip-link.screen-reader-text:focus {
	left: 1rem;
	top: 1rem;
}

/* ---------- Button with trailing arrow ---------- */
.wb-btn-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
}
.wb-btn-arrow .wp-block-button__link::after {
	content: "";
	inline-size: 1.05em;
	block-size: 1.05em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform var(--wp--custom--transition--base);
}
.wb-btn-arrow .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

/* ---------- Eyebrow / section label ---------- */
.wb-eyebrow {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* Remove the block-gap that pushes <main>/<footer> down (white strip above hero) */
.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}

/* ---------- Floating header (pill over hero) ---------- */
.wb-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 1000;
	padding-block-start: clamp(1.25rem, 2.5vw, 2rem);
	pointer-events: none; /* let clicks pass around the pill */
	transition: transform 0.4s ease, opacity 0.4s ease;
}
.wb-header__bar {
	pointer-events: auto;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 6px 28px rgba(13, 13, 18, 0.14);
	padding: 0.55rem 1.25rem;
}
/* scroll down = fade up (hide); scroll up = fade down (show) */
.wb-header--hidden {
	transform: translateY(-130%);
	opacity: 0;
}
.wb-header .wp-block-button__link {
	border-radius: var(--wp--custom--radius--md);
}
/* Nav fills the space between logo and CTA, centring its links */
.wb-header__nav {
	flex: 1 1 auto;
	justify-content: center;
}
.wb-header__cta {
	flex: 0 0 auto;
}

/* Heroes sit under the floating pill — just enough clearance, tight elsewhere */
.wb-hero,
.wb-page-hero {
	padding-block-start: clamp(5.75rem, 6.5vw, 7rem) !important;
}
.wb-hero {
	padding-block-end: clamp(1.75rem, 3.5vw, 2.75rem) !important;
}
/* Inner-page title hero over a background image */
.wb-page-hero {
	padding-block-end: clamp(2.5rem, 4vw, 3.5rem) !important;
}
.wb-page-hero .wp-block-heading,
.wb-page-hero h1 {
	margin-block-end: 0.4rem;
	color: var(--wp--preset--color--secondary) !important;
	font-weight: 800;
}
.wb-page-hero p,
.wb-page-hero .wp-block-term-description {
	color: var(--wp--preset--color--white) !important;
}

/* Home hero: left text gets bottom breathing room; image still hugs the very
   bottom edge (hand "sticks out") via a negative margin equal to that padding. */
.wb-hero.wb-hero--home {
	padding-block-end: clamp(2.5rem, 4vw, 4rem) !important;
	overflow: clip;
}
.wb-hero--home .wb-hero-img {
	align-self: stretch;
	display: flex;
	align-items: flex-end;
	margin-block-end: calc(-1 * clamp(2.5rem, 4vw, 4rem));
}
.wb-hero--home .wb-hero-img .wp-block-image,
.wb-hero--home .wb-hero-img figure {
	margin-block-end: 0;
	width: 100%;
}
.wb-hero--home .wb-hero-img img {
	display: block;
	vertical-align: bottom;
	margin-block-end: 0;
}

/* Logo sizing + white variant for the blue footer (renders the mark solid white) */
.wb-logo img {
	max-height: 44px;
	width: auto;
}
.wb-logo-white img {
	filter: brightness(0) invert(1);
}

/* ---------- Cards ---------- */
.wb-card {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
	overflow: hidden;
	transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base);
	height: 100%;
}
.wb-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--wp--preset--shadow--raised);
}
.wb-card img {
	border-radius: 0;
}
/* Light-blue card variant (fleet) — transparent vehicle render on a light-blue card */
.wb-card--blue {
	background: var(--wp--preset--color--surface-blue);
}
.wb-card--blue .wp-block-image,
.wb-card--blue .wp-block-image img {
	background: transparent;
}

/* Centered step columns */
.wb-step {
	text-align: center;
}
.wb-step .wb-step-num {
	margin-inline: auto;
}

/* Numbered step badge */
.wb-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--large);
}

/* ---------- Carousel (Tailored Bus Charters) ---------- */
.wb-carousel {
	position: relative;
}
.wb-carousel__head {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-block-end: 1rem;
	padding-inline-end: clamp(1.25rem, 3vw, 2.5rem);
	padding-inline-start: 1.25rem;
}
.wb-carousel__btn {
	inline-size: 36px;
	block-size: 36px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--base), transform var(--wp--custom--transition--base);
}
.wb-carousel__btn:hover {
	background: var(--wp--preset--color--primary-dark);
	transform: translateY(-2px);
}
.wb-carousel__btn svg {
	inline-size: 16px;
	block-size: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
}
.wb-carousel__track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding-inline: max(1.25rem, calc((100% - var(--wp--style--global--wide-size, 1280px)) / 2));
	padding-block: 0.5rem;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.wb-carousel__track::-webkit-scrollbar {
	display: none;
}
.wb-carousel__slide {
	flex: 0 0 auto;
	inline-size: min(82vw, 360px);
	scroll-snap-align: start;
	margin: 0;
}
.wb-carousel__slide img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.wb-carousel__slide h4 {
	padding: 1rem 1.25rem 1.25rem;
	font-size: 1.2rem;
	margin: 0;
}

/* ---------- FAQ accordion (native <details>) ---------- */
.wb-faq {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	padding: 0;
	margin-block-end: 0.75rem;
	overflow: hidden;
}
.wb-faq > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.15rem 1.4rem;
	font-weight: 700;
	color: var(--wp--preset--color--headline);
}
.wb-faq > summary::-webkit-details-marker {
	display: none;
}
.wb-faq > summary::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 0.7rem;
	block-size: 0.7rem;
	border-right: 2.5px solid var(--wp--preset--color--primary);
	border-bottom: 2.5px solid var(--wp--preset--color--primary);
	transform: rotate(45deg);
	transition: transform var(--wp--custom--transition--base);
}
.wb-faq[open] > summary::after {
	transform: rotate(-135deg);
}
.wb-faq > .wb-faq__body {
	padding: 0 1.4rem 1.3rem;
	color: var(--wp--preset--color--text);
}

/* ---------- Stats ---------- */
.wb-stat__value {
	font-weight: 800;
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--wp--preset--color--primary);
	line-height: 1.1;
}

/* ---------- Checklist ---------- */
.wb-check {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wb-check li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.75rem;
	line-height: 1.5;
}
.wb-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--secondary);
	/* checkmark */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D0D12' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 0.8rem;
	background-position: center;
	background-repeat: no-repeat;
}

/* Mission/Vision + feature cards */
.wb-feature-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--soft);
	height: 100%;
}

/* ---------- White form card (Book Now hero) ---------- */
.wb-form-card {
	box-shadow: var(--wp--preset--shadow--raised);
}
.wb-form-card h1,
.wb-form-card h2,
.wb-form-card h3 {
	color: var(--wp--preset--color--headline) !important;
}
.wb-form-card p,
.wb-form-card li {
	color: var(--wp--preset--color--text) !important;
}

/* ---------- Form placeholder ---------- */
.wb-form-placeholder {
	border: 2px dashed var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-blue);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* ---------- Hero ---------- */
.wb-hero {
	position: relative;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}
.wb-hero :where(h1, h2, h3, p) {
	color: var(--wp--preset--color--white);
}
.wb-hero .wb-eyebrow {
	color: var(--wp--preset--color--secondary);
}

/* Yellow highlight used in hero headlines */
.wb-highlight {
	color: var(--wp--preset--color--secondary);
}

/* ---------- Scroll reveal (lightweight, JS toggles .is-visible) ---------- */
.wb-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}
.wb-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.wb-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.wb-card,
	.wb-header {
		transition: none;
	}
}

/* ---------- Single post ---------- */
.wb-single {
	padding-block-start: clamp(6.5rem, 7vw, 7.5rem);
}
/* Smaller article headings */
.wb-single .wp-block-post-content h2 {
	font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.7rem);
	margin-block-start: 1.75rem;
}
.wb-single .wp-block-post-content h3 {
	font-size: clamp(1.15rem, 1rem + 0.8vw, 1.4rem);
}
/* Bottom booking box heading stays white on the blue box */
.wb-single .wb-section-blue .wp-block-heading {
	color: var(--wp--preset--color--white) !important;
}
.wb-single .wp-block-post-featured-image img {
	width: 100%;
	object-fit: cover;
}
.wb-sidebar {
	align-self: flex-start;
	position: sticky;
	top: 6.5rem;
}
.wb-sidebar .wp-block-post-featured-image {
	flex: 0 0 auto;
}
.wb-sidebar .wp-block-post-featured-image img {
	width: 88px;
	height: 66px;
	object-fit: cover;
}
.wb-sidebar .wp-block-post-title a {
	color: var(--wp--preset--color--headline);
	text-decoration: none;
}
.wb-sidebar .wp-block-post-title a:hover,
.wb-sidebar .wp-block-post-title a:focus {
	color: var(--wp--preset--color--primary);
}

/* ---------- Footer ---------- */
.wb-footer,
.wb-footer p,
.wb-footer li,
.wb-footer h3,
.wb-footer strong {
	color: var(--wp--preset--color--white) !important;
}
.wb-footer a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}
.wb-footer a:hover,
.wb-footer a:focus {
	color: var(--wp--preset--color--secondary);
	text-decoration: underline;
}
.wb-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wb-footer-links li {
	line-height: 1.6;
}
/* Footer contact rows with leading icons */
.wb-contact-line {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	line-height: 1.5;
}
.wb-contact-ico {
	flex: 0 0 auto;
	display: inline-flex;
}
.wb-contact-ico svg {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	margin-block-start: 0.15rem;
}

/* ---------- Blog ---------- */
.wb-post-card .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--md);
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}
.wb-cat-pill {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--primary);
}
.wb-cat-pill a {
	text-decoration: none;
	color: inherit;
}

/* Blog index category filter pills */
.wb-cat-link {
	margin: 0;
}
.wb-cat-link a {
	display: inline-block;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base);
}
.wb-cat-link a:hover,
.wb-cat-link.is-active a {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* Post cards stretch to equal height in grids */
.wp-block-post-template.is-layout-grid {
	align-items: stretch;
}
.wb-post-card {
	height: 100%;
}
/* Post card titles in black (badge stays coloured) */
.wb-post-card .wp-block-post-title,
.wb-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--headline);
}
.wb-post-card .wp-block-post-title a:hover,
.wb-post-card .wp-block-post-title a:focus {
	color: var(--wp--preset--color--primary);
}
/* Boxed white post card (Smart Travel) */
.wb-post-card--boxed {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--lg);
	padding: 0.75rem;
	box-shadow: var(--wp--preset--shadow--card);
}
.wb-post-card--boxed .wp-block-post-terms,
.wb-post-card--boxed .wp-block-post-title,
.wb-post-card--boxed .wp-block-post-date {
	padding-inline: 0.4rem;
}
.wb-post-card--boxed .wp-block-post-date {
	padding-bottom: 0.4rem;
}