/*
Theme Name: One Rivington
Theme URI: https://onerivington.com
Author: Fourseven Media
Author URI: https://foursevenmedia.co.uk
Description: Bespoke theme for One Rivington — flexible workspace at art'otel London Hoxton. Phase 1: coming-soon holding page.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary — commissioned work for PPHE Hotel Group
Text Domain: onerivington
*/

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */
:root {
	--or-ink: #16181a;
	--or-paper: #ffffff;
	--or-stage: #0b0c0d;

	/* Swap this one line when the licensed brand face is confirmed.
	   The brochures use Circular Std / Proxima Nova — both commercial. */
	--or-sans: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--or-nav-size: clamp(11px, 1.05vw, 13.5px);
	--or-tag-size: clamp(1.6rem, 4.6vw, 4.05rem);
	--or-pad: clamp(1rem, 2.4vw, 1.7rem);
}

/* ---------------------------------------------------------------
   2. Reset
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	background: var(--or-stage);
	color: var(--or-paper);
	font-family: var(--or-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------
   3. Hero
   --------------------------------------------------------------- */
.hero {
	position: relative;
	/* Dynamic viewport units keep this honest when mobile browser
	   chrome shows and hides. The vh value is the fallback. */
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: var(--or-stage);
}

.hero__slides { position: absolute; inset: 0; }

.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.05s ease;
}

.hero__slide.is-active { opacity: 1; }

.hero__slide picture,
.hero__slide img { width: 100%; height: 100%; }

.hero__slide img {
	object-fit: cover;
	transform: scale(1.045);
	transition: transform 8.5s linear;
}

.hero__slide.is-active img { transform: scale(1); }

/* Vignette pools light behind the tagline; the linear pass protects
   the nav at the top and the emblem at the bottom. */
.hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 66% 42% at 50% 50%, rgba(8,9,10,.50), rgba(8,9,10,0) 76%),
		linear-gradient(180deg, rgba(8,9,10,.46) 0%, rgba(8,9,10,.06) 30%, rgba(8,9,10,.10) 64%, rgba(8,9,10,.52) 100%);
}

/* ---------------------------------------------------------------
   4. Nav
   --------------------------------------------------------------- */
.hero__nav {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: clamp(1.6rem, 5vw, 3.6rem);
	padding: var(--or-pad);
}

.hero__nav a {
	font-size: var(--or-nav-size);
	letter-spacing: .19em;
	text-transform: uppercase;
	text-decoration: none;
	opacity: .93;
	text-shadow: 0 1px 14px rgba(0,0,0,.5);
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: border-color .2s;
}

.hero__nav a:hover,
.hero__nav a:focus-visible { border-bottom-color: rgba(255,255,255,.85); }

.hero__nav a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* --- Brochures dropdown ---------------------------------------------
   Transparent with a hairline white border, as briefed. The backdrop
   blur is doing legibility work rather than decoration: the menu can
   open over the gym or kitchen slide, both of which are near-white,
   and plain transparency would leave the links unreadable there. */
.hero__nav-group {
	position: relative;
	display: flex;
}

.hero__nav-toggle {
	/* Inherit the nav's type rather than the browser's button defaults. */
	font: inherit;
	font-size: var(--or-nav-size);
	letter-spacing: .19em;
	text-transform: uppercase;
	color: inherit;
	background: none;
	border: 0;
	padding: 0 0 3px;
	margin: 0;
	cursor: pointer;
	opacity: .93;
	text-shadow: 0 1px 14px rgba(0,0,0,.5);
	border-bottom: 1px solid transparent;
	transition: border-color .2s;

	display: inline-flex;
	align-items: center;
	gap: .5em;
}

.hero__nav-group:hover .hero__nav-toggle,
.hero__nav-toggle[aria-expanded="true"],
.hero__nav-toggle:focus-visible { border-bottom-color: rgba(255,255,255,.85); }

.hero__nav-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.hero__nav-caret {
	width: .42em;
	height: .42em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-.15em) rotate(45deg);
	transition: transform .22s ease;
}

.hero__nav-toggle[aria-expanded="true"] .hero__nav-caret {
	transform: translateY(.05em) rotate(-135deg);
}

.hero__nav-menu {
	position: absolute;
	top: calc(100% + .85em);
	left: 50%;
	transform: translateX(-50%) translateY(-.35em);
	z-index: 4;

	display: flex;
	flex-direction: column;
	min-width: max-content;

	background: rgba(12, 13, 14, .28);
	-webkit-backdrop-filter: blur(14px) saturate(115%);
	backdrop-filter: blur(14px) saturate(115%);
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 2px;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

/* Hover is an enhancement for mouse users only — on touch it would
   leave the menu stuck open after a tap. */
@media (hover: hover) and (pointer: fine) {
	.hero__nav-group:hover .hero__nav-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
}

.hero__nav-group:focus-within .hero__nav-menu,
.hero__nav-toggle[aria-expanded="true"] + .hero__nav-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* Keeps the pointer from crossing a dead gap between button and menu. */
.hero__nav-menu::before {
	content: "";
	position: absolute;
	left: 0; right: 0;
	top: -.9em;
	height: .9em;
}

.hero__nav-menu a {
	padding: .72em 1.5em;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	opacity: 1;
}

.hero__nav-menu a + a { border-top: 1px solid rgba(255,255,255,.28); }

.hero__nav-menu a:hover,
.hero__nav-menu a:focus-visible {
	background: rgba(255,255,255,.14);
	border-bottom-color: transparent;
}

.hero__nav-menu a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
	.hero__nav-menu,
	.hero__nav-caret { transition-duration: .01ms; }
}

/* ---------------------------------------------------------------
   5. Tagline
   --------------------------------------------------------------- */
.hero__tagbox {
	position: absolute;
	z-index: 3;
	left: 0; right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	padding-inline: 1.25rem;
}

.hero__tag {
	margin: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0 .28em;
	font-size: var(--or-tag-size);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -.018em;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0,0,0,.34), 0 2px 30px rgba(0,0,0,.5);
}

.hero__one { flex: 0 0 auto; }

/* The phrase container is locked by JS to the width of the longest
   phrase, so the total line width never changes and "One" cannot
   shift. Padding extends the clip box past the baseline so
   descenders survive; the negative margin cancels the layout effect. */
.hero__rest {
	flex: 0 0 auto;
	display: inline-block;
	overflow: hidden;
	text-align: left;
	white-space: nowrap;
	padding-bottom: .26em;
	margin-bottom: -.26em;
}

.hero__rest i {
	display: inline-block;
	font-style: normal;
	transition: transform .62s cubic-bezier(.22,1,.36,1), opacity .62s;
}

.hero__rest.is-out i { transform: translateY(-130%); opacity: 0; }

/* ---------------------------------------------------------------
   6. Emblem
   --------------------------------------------------------------- */
.hero__emblem {
	position: absolute;
	z-index: 3;
	bottom: clamp(1.1rem, 2.6vw, 2rem);
	left: 50%;
	transform: translateX(-50%);
	height: clamp(34px, 4.4vw, 54px);
	pointer-events: none;
}

.hero__emblem svg { height: 100%; width: auto; filter: drop-shadow(0 2px 16px rgba(0,0,0,.42)); }
.hero__emblem path { fill: #fff; }

/* ---------------------------------------------------------------
   7. Motion preferences
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.hero__slide,
	.hero__slide img,
	.hero__rest i {
		transition-duration: .01ms !important;
	}
	.hero__slide img { transform: none; }
}