/*
Theme Name: The Pool By The Bain
Theme URI: https://thepoolbythebain.co.uk
Author: AJW Web Design
Author URI: https://ajwwd.co.uk
Description: A calm, fast, mobile-first theme for The Pool By The Bain, with a home page built around the next free swim times. Works with the Pool By The Bain Bookings plugin.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Private. Made for The Pool By The Bain.
Text Domain: pool-by-the-bain
*/

/* ------------------------------------------------------------------ tokens */
:root {
	--deep: #082B36;      /* deep water */
	--teal: #0E3A47;      /* pool teal, also the text colour on light */
	--lagoon: #7FD1D6;    /* light on the water */
	--tile: #EEF5F4;      /* pool tile white */
	--towel: #E6DAC6;     /* a warm towel, used sparingly */
	--mist: #BFE3E5;      /* soft text on deep water */
	--line: rgba(14, 58, 71, .2);

	--display: 'Lora', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
	--body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* The booking screens pick these up, so the whole site shares one voice. */
	--pbb-display: var(--display);
	--pbb-body: var(--body);

	--gutter: 20px;
	--measure: 1160px;
	--radius: 14px;
	--header-h: 68px;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; background: var(--tile); color: var(--teal);
	font-family: var(--body); font-size: 17px; line-height: 1.6;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .18em; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--lagoon); outline-offset: 3px; }
.pbt-section :focus-visible, .pbt-page :focus-visible, .pbt-app__body :focus-visible { outline-color: var(--teal); }
.pbt-skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--lagoon); color: var(--deep); padding: 10px 16px; border-radius: 8px; }
.pbt-skip:focus { left: 8px; }
.pbt-wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------------ buttons */
.pbt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 48px; padding: 12px 24px; border-radius: var(--radius); border: 0;
	font: 600 1rem/1.1 var(--body); text-decoration: none; cursor: pointer;
	transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.pbt-btn:hover { transform: translateY(-1px); }
.pbt-btn--aqua { background: var(--lagoon); color: var(--deep); }
.pbt-btn--aqua:hover { background: #A6E2E6; }
.pbt-btn--deep { background: var(--teal); color: #fff; }
.pbt-btn--deep:hover { background: var(--deep); }
.pbt-btn--light { background: var(--tile); color: var(--deep); }
.pbt-btn--light:hover { background: #fff; }

/* ------------------------------------------------------------------ header */
.pbt-header { position: sticky; top: 0; z-index: 50; isolation: isolate; background: var(--deep); color: #fff; }
/* WordPress's own black bar (only you see it): 32px tall on a computer, 46px on a phone or tablet. theme.js then keeps the header
   exactly below it, including on a phone where the bar scrolls away. */
body.admin-bar .pbt-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .pbt-header { top: 46px; } }
.pbt-header__bar {
	display: flex; align-items: center; gap: 16px; min-height: var(--header-h);
	max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter);
}
.pbt-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; margin-right: auto; }
.pbt-brand__wave { color: var(--lagoon); flex: none; }
.pbt-brand__name { font-family: var(--display); font-size: 1.12rem; line-height: 1.05; }
.pbt-brand__name span { display: block; font-family: var(--body); font-size: .76rem; font-weight: 500; letter-spacing: .02em; color: var(--mist); margin-top: 3px; }
.pbt-nav__list { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.pbt-nav a { color: #fff; text-decoration: none; font-weight: 500; font-size: .98rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.pbt-nav a:hover { border-bottom-color: var(--lagoon); }
.pbt-nav__account a { color: var(--mist); }
.pbt-btn--book { min-height: 42px; padding: 9px 18px; background: var(--lagoon); color: var(--deep); font-size: .95rem; }
.pbt-btn--book:hover { background: #A6E2E6; }

.pbt-burger { display: none; align-items: center; gap: 10px; background: none; border: 0; color: #fff; font: 600 .95rem var(--body); padding: 10px 0 10px 6px; cursor: pointer; }
.pbt-burger__icon, .pbt-burger__icon::before { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.pbt-burger__icon::before { content: ''; position: absolute; left: 0; top: -7px; width: 22px; box-shadow: 0 14px 0 currentColor; }

/* Home page: the header floats on the water, then turns solid once you scroll. */
.pbt-home .pbt-header { position: fixed; left: 0; right: 0; background: transparent; }
/* The solid, blurred backing is its own layer behind the bar. (Putting the blur on the header itself would shrink the phone menu to the header's height.) */
.pbt-home .pbt-header::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; background: rgba(8, 43, 54, .94); box-shadow: 0 1px 0 rgba(127, 209, 214, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity .25s ease; }
.pbt-home .pbt-header.is-solid::before, body.pbt-menu-open .pbt-header::before { opacity: 1; }

@media (max-width: 859px) {
	/* Some phone browsers tuck the top few pixels of the page under the status bar when you scroll down; this keeps the button clear of it. */
	.pbt-header__bar { padding-top: 14px; }
	.pbt-burger { display: inline-flex; }
	.pbt-btn--book { margin-left: 0; }
	.pbt-nav {
		position: fixed; inset: 0; z-index: -1; background: var(--deep);
		padding: calc(var(--header-h) + 32px) var(--gutter) 40px; overflow-y: auto;
		visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility .2s;
	}
	body.pbt-menu-open { overflow: hidden; }
	body.pbt-menu-open .pbt-header { background: var(--deep); position: fixed; left: 0; right: 0; }
	body.pbt-menu-open .pbt-nav { visibility: visible; opacity: 1; }
	.pbt-nav__list { flex-direction: column; align-items: flex-start; gap: 0; }
	.pbt-nav__list li { width: 100%; border-bottom: 1px solid rgba(127, 209, 214, .18); }
	.pbt-nav a { display: block; padding: 18px 0; font-family: var(--display); font-size: 1.9rem; font-weight: 400; border: 0; }
	.pbt-nav__account a { font-family: var(--body); font-size: 1.05rem; font-weight: 500; }
}
@media (max-width: 420px) {
	.pbt-brand__name { font-size: 1rem; }
	.pbt-brand__wave { display: none; }
	.pbt-header__bar { gap: 10px; }
}

/* ------------------------------------------------------------------ hero */
.pbt-hero {
	position: relative; isolation: isolate; overflow: hidden; color: #fff;
	min-height: clamp(640px, 100svh, 940px); display: flex; align-items: flex-end;
	background: radial-gradient(120% 80% at 70% 0%, #14515F 0%, var(--teal) 38%, var(--deep) 100%);
}
.pbt-hero--photo { background: linear-gradient(180deg, rgba(8, 43, 54, .5) 0%, rgba(8, 43, 54, .88) 100%), var(--hero-photo) center / cover no-repeat, var(--deep); }
.pbt-hero__water { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* A soft shade under the words, so the light never fights the text. */
.pbt-hero__water::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 43, 54, .82) 0%, rgba(8, 43, 54, .55) 45%, rgba(8, 43, 54, 0) 80%); }
.pbt-hero__light { position: absolute; left: -15%; top: -15%; width: 130%; height: 130%; mix-blend-mode: screen; will-change: transform; }
.pbt-hero__light--a { opacity: .55; animation: pbt-drift-a 48s ease-in-out infinite alternate; }
.pbt-hero__light--b { opacity: .32; animation: pbt-drift-b 62s ease-in-out infinite alternate; }
.pbt-hero--photo .pbt-hero__light--a { opacity: .16; }
.pbt-hero--photo .pbt-hero__light--b { opacity: .10; }
@keyframes pbt-drift-a { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.06); } }
@keyframes pbt-drift-b { from { transform: translate3d(3%, 2%, 0) scale(1.04); } to { transform: translate3d(-4%, -3%, 0) scale(1); } }

.pbt-hero__inner { width: 100%; max-width: var(--measure); margin-inline: auto; padding: calc(var(--header-h) + 72px) var(--gutter) 56px; }
.pbt-hero__title { font-size: clamp(3.1rem, 12.5vw, 8rem); line-height: .94; letter-spacing: -.015em; max-width: 9.5em; text-wrap: balance; }
.pbt-hero__text { margin: 22px 0 28px; max-width: 30em; font-size: clamp(1.1rem, 2.6vw, 1.45rem); line-height: 1.45; color: var(--mist); }
.pbt-hero__actions { margin: 0 0 40px; }
.pbt-hero__actions .pbt-btn { min-height: 54px; padding-inline: 30px; font-size: 1.05rem; }

.pbt-next { max-width: 880px; padding-top: 22px; border-top: 1px solid rgba(127, 209, 214, .28); }
.pbt-next__head { font: 600 .95rem var(--body); color: var(--mist); margin: 0 0 12px; letter-spacing: .01em; }
.pbt-next__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.pbt-next__list a {
	display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: #fff;
	background: rgba(8, 43, 54, .46); border: 1px solid rgba(127, 209, 214, .3);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pbt-next__list a:hover { background: var(--lagoon); color: var(--deep); border-color: var(--lagoon); }
.pbt-next__day { font-size: .86rem; opacity: .85; }
.pbt-next__time { font-family: var(--display); font-size: 1.35rem; line-height: 1.1; }

/* ------------------------------------------------------------------ sections */
.pbt-section { padding-block: clamp(64px, 10vw, 128px); }
.pbt-h2 { font-size: clamp(2rem, 5.2vw, 3.4rem); max-width: 16em; text-wrap: balance; }
.pbt-lead { font-size: clamp(1.1rem, 2.2vw, 1.3rem); line-height: 1.55; max-width: 32em; margin-top: 18px; }

/* The lane rope: used to divide list items, like the floats in a pool lane. */
.pbt-facts li::before, .pbt-steps li::before {
	content: ''; display: block; height: 7px; border-radius: 4px; margin-bottom: 22px;
	background: repeating-linear-gradient(90deg, var(--teal) 0 14px, var(--lagoon) 14px 28px);
}

.pbt-pool__grid { display: grid; gap: 44px; }
.pbt-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 38px; }
.pbt-facts h3, .pbt-steps h3 { font-size: clamp(1.4rem, 3vw, 1.75rem); margin-bottom: 10px; }
.pbt-facts p, .pbt-steps p { margin: 0; max-width: 34em; }
@media (min-width: 900px) {
	.pbt-pool__grid { grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
	.pbt-pool__lead { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* Step inside: dark, so the photos glow. */
.pbt-inside { background: var(--deep); color: #fff; }
.pbt-inside .pbt-h2 { margin-bottom: 36px; }
.pbt-inside :focus-visible { outline-color: var(--lagoon); }
.pbt-gallery { display: grid; gap: 14px; }
.pbt-gallery figure { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--teal); min-height: 220px; aspect-ratio: 4 / 3; }
.pbt-gallery .pbt-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pbt-gallery figcaption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; font-weight: 600; font-size: .98rem;
	background: linear-gradient(0deg, rgba(8, 43, 54, .78), rgba(8, 43, 54, 0));
}
@media (min-width: 760px) {
	.pbt-gallery { grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; }
	.pbt-gallery figure { aspect-ratio: auto; min-height: 260px; }
	.pbt-gallery__big { grid-row: 1 / span 2; min-height: 540px !important; }
}
/* No photo yet: pool tiles. */
.pbt-photo--empty {
	display: flex; align-items: flex-start; justify-content: flex-start; padding: 16px; font-size: .85rem; color: var(--mist);
	background-color: var(--teal);
	background-image: linear-gradient(rgba(127, 209, 214, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 209, 214, .14) 1px, transparent 1px);
	background-size: 30px 30px;
}

/* Price and steps */
.pbt-price__grid { display: grid; gap: 52px; }
.pbt-price__figure { font-family: var(--display); font-weight: 400; font-size: 1.5em; line-height: 1; }
.pbt-price__lead p:last-child { margin-top: 28px; margin-bottom: 0; }
.pbt-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 38px; counter-reset: step; }
.pbt-steps li { counter-increment: step; position: relative; }
.pbt-steps h3::before { content: counter(step); display: inline-block; margin-right: .5em; color: #3B8F98; }
@media (min-width: 900px) {
	.pbt-price__grid { grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
}

/* Find us: a warm towel after all that water. */
.pbt-find { background: var(--towel); }
.pbt-find__grid { display: grid; gap: 40px; }
.pbt-find__addr { font-weight: 600; margin-top: 22px; }
.pbt-find__photo .pbt-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.pbt-find__photo .pbt-photo--empty { min-height: 260px; }
.pbt-find__text p:last-child { margin-top: 26px; margin-bottom: 0; }
@media (min-width: 900px) {
	.pbt-find__grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
}

/* Last call */
.pbt-final { background: var(--lagoon); color: var(--deep); padding-block: clamp(64px, 9vw, 112px); }
.pbt-final__inner { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.pbt-final__title { font-size: clamp(2.4rem, 7vw, 4.6rem); }
.pbt-final__text { font-size: clamp(1.1rem, 2.2vw, 1.3rem); margin: 16px 0 28px; }
.pbt-final .pbt-btn { background: var(--deep); color: #fff; min-height: 54px; padding-inline: 30px; font-size: 1.05rem; }
.pbt-final .pbt-btn:hover { background: var(--teal); }
.pbt-final :focus-visible { outline-color: var(--deep); }
.pbt-final p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ footer */
.pbt-footer { background: var(--deep); color: var(--mist); }
.pbt-footer a:not(.pbt-btn) { color: #fff; }
.pbt-footer__inner { max-width: var(--measure); margin-inline: auto; padding: 64px var(--gutter) 40px; display: grid; gap: 36px; }
.pbt-footer__name { font-family: var(--display); font-size: 1.7rem; color: #fff; margin-bottom: 8px; }
.pbt-footer__line { max-width: 22em; margin-bottom: 22px; }
.pbt-footer__head { font: 700 .95rem var(--body); color: #fff; margin: 0 0 12px; }
.pbt-footer__col p { margin: 0 0 6px; }
.pbt-footer__base { max-width: var(--measure); margin-inline: auto; padding: 22px var(--gutter) 34px; border-top: 1px solid rgba(127, 209, 214, .2); display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: .9rem; }
.pbt-footer__base p { margin: 0; }
.pbt-footer__base ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; }
.pbt-footer__base p:last-child { margin-left: auto; }
@media (min-width: 760px) {
	.pbt-footer__inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
}

/* ------------------------------------------------------------------ ordinary pages */
.pbt-page { max-width: 760px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--gutter) clamp(56px, 9vw, 120px); }
.pbt-page__title { font-size: clamp(2.2rem, 6vw, 3.6rem); margin-bottom: 28px; }
.pbt-prose { font-size: 1.06rem; line-height: 1.7; }
.pbt-prose h2 { font-size: 1.7rem; margin: 2em 0 .5em; }
.pbt-prose h3 { font-size: 1.3rem; margin: 1.6em 0 .4em; }
.pbt-prose ul, .pbt-prose ol { padding-left: 1.3em; }
.pbt-prose li { margin-bottom: .4em; }
.pbt-prose a { color: var(--teal); text-decoration-thickness: 2px; text-decoration-color: var(--lagoon); }
.pbt-prose img { border-radius: var(--radius); }

/* Pages that hold a booking screen: full width, no heading. */
.pbt-app__body { min-height: 60vh; padding-bottom: 56px; }

/* ------------------------------------------------------------------ motion preferences */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.pbt-hero__light { animation: none !important; }
	* { transition-duration: .01ms !important; }
}