/*
 * Site chrome: header, mobile drawer, footer, scroll-reveal.
 *
 * Consumes the --of-* tokens from design-system.css, which is enqueued first.
 * Element IDs/classes are wired to header.php, footer.php and assets/js/theme.js.
 *
 * NOT LOADED IN THE EDITOR — only design-system.css is added via
 * add_editor_style(). That matters for .of-reveal below: it starts at opacity 0,
 * and if it were visible to the editor canvas every revealed block would be
 * invisible while editing. Keep reveal in this file, not the design system.
 */

/* ---------------------------------------------------------------- header --- */

/* STICKY, not fixed, and opaque sea-glass rather than transparent-over-hero.
   Because it sits in flow it reserves its own height, so no page needs a top
   offset and there is no "solid on pages without a hero" case to get wrong.
   theme.js still adds .is-stuck past 30px; here that buys a hairline shadow. */
.of-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--of-paper) 86%, transparent);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	border-bottom: 1px solid var(--of-line);
	transition: box-shadow 0.3s;
}

/* color-mix is well supported but not universal; without this the bar would
   fall back to fully transparent and the nav would sit on the hero photo. */
@supports not ( background: color-mix( in srgb, red 50%, transparent ) ) {
	.of-header {
		background: var(--of-paper);
	}
}

.of-header.is-stuck {
	box-shadow: 0 8px 24px -18px rgba(15, 46, 43, 0.7);
}

.of-header__row {
	max-width: var(--of-wrap);
	margin-inline: auto;
	padding-inline: var(--of-gutter);
	min-height: var(--of-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.of-brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

/* Height-constrained, width auto: the artwork is 580x174, and fixing only the
   height keeps the lockup's proportions whatever art is swapped in later. */
.of-brand__logo {
	height: 40px;
	width: auto;
}

.of-nav {
	display: none;
	align-items: center;
	gap: clamp(0.9rem, 2vw, 1.6rem);
}

/* The sand underline wipes in from the left rather than fading: it is one of
   only two hover effects on the site. Animating `right` from 100% keeps the
   rule anchored at the left edge while it grows. */
.of-nav__link {
	position: relative;
	color: var(--of-ink);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	padding: 0.4rem 0;
}

.of-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--of-accent);
	transition: right 220ms var(--of-ease);
}

.of-nav__link:hover::after,
.of-nav__link[aria-current="page"]::after,
.of-nav__link.is-current::after {
	right: 0;
}

.of-header__actions {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

/* Plain ink phone number, per the mockup. Not boxed: the header already holds
   one framed element (the Enquire button) and two would compete. */
.of-header__tel {
	color: var(--of-ink);
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
}

.of-header__tel:hover {
	color: var(--of-accent-ink);
}

/* The header CTA is a smaller instance of the page button, not its own skin. */
.of-header__cta.of-btn {
	padding: 0.8rem 1.1rem;
}

@media ( min-width: 900px ) {
	.of-nav {
		display: flex;
	}
}

/* Below the desktop nav the drawer carries the phone number and the CTA, so
   both come out of the bar and leave the logo and the burger room to breathe.
   The drawer is the only nav route here, so the burger must never be crowded
   off the edge — that happened once already, with a text brand at 281px. */
@media ( max-width: 899px ) {
	.of-header__tel,
	.of-header__cta {
		display: none;
	}

	.of-brand__logo {
		height: 34px;
	}
}

/* ------------------------------------------------------- burger + drawer ---
   ADDITION, not a port: the mockup has no navigation at all below 900px. */

/* Ink on the sea-glass bar, not accent: the one accent on this page is spent
   on the current hour, the low-water marks and the primary action. A burger is
   none of those. */
.of-burger {
	display: inline-grid;
	place-items: center;
	background: transparent;
	border: 0;
	box-shadow: inset 0 0 0 1px var(--of-line-strong);
	border-radius: var(--of-r-sm);
	color: var(--of-ink);
	width: 42px;
	height: 42px;
	padding: 10px;
	cursor: pointer;
	transition: background 0.2s;
}

.of-burger:hover {
	background: rgba(15, 46, 43, 0.06);
}

.of-burger svg {
	width: 100%;
	height: 100%;
	display: block;
}

@media ( min-width: 900px ) {
	.of-burger {
		display: none;
	}
}

.of-scrim {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: rgba(15, 46, 43, 0.72);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.of-scrim.is-open {
	opacity: 1;
}

.of-mobile {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 80;
	width: min(88vw, 360px);
	height: 100dvh;
	padding: 1.25rem 1.5rem 1.75rem;
	background: var(--of-dark-deep);
	border-left: 1px solid var(--of-dark-line);
	transform: translateX(100%);
	transition: transform 0.28s var(--of-ease);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	overflow-y: auto;
}

.of-mobile.is-open {
	transform: translateX(0);
}

.of-mobile__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--of-header-h);
}

.of-mobile__close {
	background: transparent;
	border: 0;
	color: var(--of-ink-on-kelp);
	width: 40px;
	height: 40px;
	padding: 8px;
	cursor: pointer;
	flex: none;
}

.of-mobile__close svg {
	width: 100%;
	height: 100%;
	display: block;
}

.of-mobile__nav {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--of-dark-line);
}

.of-mobile__link {
	color: var(--of-ink-on-kelp);
	text-decoration: none;
	font-family: var(--of-font-display);
	/* One weight — Young Serif has no bold to reach for. */
	font-weight: 400;
	font-size: 1.15rem;
	letter-spacing: -0.005em;
	/* 56px tall — comfortably above the 44px minimum tap target. */
	padding: 1rem 0;
	border-bottom: 1px solid var(--of-dark-line);
}

.of-mobile__link:hover {
	color: var(--of-accent-on-kelp);
}

.of-mobile__foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
}

.of-mobile__tel {
	color: var(--of-accent-on-kelp);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	padding-block: 0.5rem;
}

/* ---------------------------------------------------------------- footer --- */

/* The footer is one of the page's KELP surfaces (the "night hours": tide strip,
   stocked, enquire, footer), not a light tint. Every colour in here is
   therefore an on-kelp variant — see the Night Hours Rule in the design doc.
   Never drop a glass-side ink onto this ground. */
.of-footer {
	background: var(--of-dark-deep);
	color: var(--of-ink-on-kelp-2);
	border-top: 1px solid var(--of-line-on-kelp);
	padding-block: 3rem 2rem;
	margin-top: auto;
}

.of-footer__top {
	display: grid;
	gap: 2rem;
	align-items: start;
}

@media ( min-width: 820px ) {
	.of-footer__top {
		grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 3fr));
	}
}

.of-footer__logo {
	height: 44px;
	width: auto;
}

.of-footer__blurb {
	font-size: 0.92rem;
	color: var(--of-ink-on-kelp-2);
	max-width: 40ch;
	margin: 1rem 0 0;
}

.of-footer__lic {
	font-size: var(--of-size-s);
	color: var(--of-ink-on-kelp-2);
	margin: 1.2rem 0 0;
	line-height: 1.8;
}

/* Uppercase is reserved for data keys, which is what a column head is. */
.of-footer__head {
	font-family: var(--of-font-body);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--of-accent-on-kelp);
	margin: 0 0 1rem;
}

.of-footer__list {
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}

.of-footer__list li {
	font-size: 0.92rem;
}

.of-footer a {
	color: var(--of-ink-on-kelp);
	text-decoration: none;
	transition: color 0.2s;
}

.of-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.of-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.of-footer__copy {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--of-line-on-kelp);
	font-size: var(--of-size-s);
	color: var(--of-ink-on-kelp-2);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	justify-content: space-between;
}

/* --------------------------------------------------------- scroll-reveal ---
   Ported values from the mockup: 28px rise, 0.7s on the shared family easing.
   Applied by each block's render.php on the FRONT END ONLY — never in
   edit.tsx, or blocks would fade out in the editor canvas. The hero is
   deliberately excluded: it is above the fold and must be crisp on first paint
   (designs commit 36c703a). */

.of-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s var(--of-ease), transform 0.7s var(--of-ease);
}

.of-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.of-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ------------------------------------------------------------ responsive --- */

@media ( max-width: 600px ) {
	.of-footer__copy {
		flex-direction: column;
	}
}