/*
Theme Name: Petrash Hair
Theme URI: https://petrashhair.com
Author: Restart Web
Description: Custom WordPress theme for petrashhair.com built with ACF Pro + Gutenberg blocks.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: petrashhair
*/

/* ============================================================
   Design Tokens — mirroring pasechnikhair.com
   ============================================================ */
:root {
	/* Colours */
	--dark:      #423b29;
	--light:     #f0efeb;
	--primary:   #cabeb2;
	--secondary: #93aab8;
	--accent:    #c27036;
	/* The accent at full strength fails as text either way round: 3.22:1 on the
	   light ground, and 3.71:1 behind white on a button. The same hue at 82%
	   clears both — 4.52:1 as text, 5.20:1 as a button ground — so it carries
	   everything that has to be read. Full strength stays for focus rings, where
	   the threshold does not apply and visibility does. */
	--accent-ink: #9f5c2c;

	/* The dusty blue sat outside the warm set and read as a third, unrelated
	   colour. Headings now run on the palette itself: ink on the light ground,
	   cream on the dark one. */
	--heading-on-light: #423b29;
	--heading-on-dark:  #f0efeb;

	/* Legacy aliases used by older code */
	--color-ink:   #000;
	--color-cream: #f0efeb;

	/* Typography. Display work is set in a high-contrast serif and everything
	   else in a grotesk — the previous pairing put Montserrat on headings, body
	   and navigation alike, which is what dated the page more than any layout. */
	--font-heading: "Instrument Serif", Georgia, serif;
	--font-serif:   "Instrument Serif", Georgia, serif;
	--font-body:    "DM Sans", system-ui, Helvetica, Arial, sans-serif;

	/* Sizes */
	--max-w: 1200px;

	/* Corner scale. Generous rather than the 4-8px middle ground, which is what
	   read as dated: photographs and panels get a visible curve, controls go
	   fully round. Kept as tokens so the values stay in step with each other. */
	--radius-sm:   12px;  /* form fields, small controls */
	--radius-md:   18px;  /* photographs */
	--radius-lg:   28px;  /* cards and panels */
	--radius-pill: 999px; /* buttons */
	--header-h: 70px;
}

/* ============================================================
   Reset / Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--dark);
	background: var(--light);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 400;
	margin: 0;
}

/* Sections on the light ground. */
.gallery__heading,
.about__heading,
.services__heading,
.faq__heading,
.hero__heading,
.enquiry-form__heading,
.cta__heading,
.testimonials__heading {
	/* Display type is set tight at this size. The old rule spaced it out by
	   0.1em and set it in caps, which is the single loudest period marker. */
	font-family: var(--font-heading) !important;
	font-size: clamp(2.5rem, 5.5vw, 4.25rem) !important;
	font-weight: 400 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.05 !important;
	text-transform: none !important;
}

.gallery__heading,
.about__heading,
.services__heading,
.faq__heading,
.testimonials__heading {
	color: var(--heading-on-light) !important;
}

.hero__heading,
.enquiry-form__heading,
.cta__heading {
	color: var(--heading-on-dark) !important;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

a { color: inherit; }

/* ============================================================
   Google Fonts (enqueued in functions.php, this is fallback)
   ============================================================ */

/* ============================================================
   Header
   ============================================================ */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	padding: 1.25rem 2.5rem;
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Scrolled state – added via JS */
.site-header.is-scrolled {
	background: var(--dark);
	box-shadow: 0 2px 20px rgba(0,0,0,0.25);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--max-w);
	margin: 0 auto;
}

.site-header__logo img {
	/* Asset is the wordmark cropped to its bounding box (855x157). The previous
	   file padded it inside a 1125x1125 square, so at this height the mark
	   rendered ~6px tall and read as empty space. */
	height: 30px;
	width: auto;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

/* Hamburger toggle (mobile) */
.site-header__toggle-input { display: none; }

.site-header__toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	z-index: 201;
	padding: 4px;
	background: none;
	border: none;
}

.site-header__toggle span {
	width: 26px;
	height: 2px;
	background: #fff;
	display: block;
	transition: transform 0.25s;
}

/* Nav */
.site-header__nav {
	display: flex;
	align-items: center;
	gap: 2.5rem;
}

.site-header__menu {
	display: flex;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header__menu a {
	color: #fff;
	text-decoration: none;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
	transition: opacity 0.2s;
}

.site-header__menu a:hover { opacity: 1; }

/* On the front page the banner already carries the name at full size, so the
   header wordmark would be a second copy of it — and it fell half on the photo,
   half on the ground, legible on neither. It slides in from the left with the
   scrolled state and leaves the same way. -180% clears the widest case: the
   logo sits ~113px in from the edge and is ~163px wide. */
.home .site-header__logo {
	transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.home .site-header:not(.is-scrolled) .site-header__logo {
	opacity: 0;
	visibility: hidden;
	transform: translateX(-180%);
}

@media (prefers-reduced-motion: reduce) {
	.home .site-header__logo {
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	.home .site-header:not(.is-scrolled) .site-header__logo {
		transform: none;
	}
}

/* Persistent CTA. One always-reachable entry point to the enquiry form, which
   is what lets the page go without repeated buttons between every section. */
.site-header__menu a.site-header__cta {
	padding: 0.5rem 1.1rem;
	border: 1px solid currentColor;
	border-radius: var(--radius-pill);
	opacity: 1;
	transition: background 0.2s, color 0.2s;
}

.site-header__menu a.site-header__cta:hover {
	background: #fff;
	color: var(--dark);
}

/* Legibility before the scrolled state takes over. The right-hand frame of the
   banner now starts below the header, so the navigation sits on bare --primary
   where white text measures 1.82:1 — a scrim tied to the header itself fixes
   exactly that strip without dimming the photographs underneath it. */
.site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0) 100%);
	opacity: 1;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.site-header.is-scrolled::before {
	opacity: 0;
}

.site-header:not(.is-scrolled) .site-header__menu a,
.site-header:not(.is-scrolled) .site-header__socials a {
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Panel-only pieces: the logo, rule and credit belong to the open mobile menu
   and stay out of the way on a wide screen. */
.site-header__nav-logo,
.site-header__nav-rule,
.site-header__nav-credit,
.site-header__social-label {
	display: none;
}

/* Socials */
.site-header__socials {
	display: flex;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header__socials a {
	color: #fff;
	display: flex;
	opacity: 0.75;
	transition: opacity 0.2s;
}
.site-header__socials a:hover { opacity: 1; }

/* Mobile nav */
@media (max-width: 900px) {
	.site-header { padding: 1rem 1.25rem; }

	.site-header__toggle { display: flex; }

	.site-header__nav {
		position: fixed;
		inset: 0;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		gap: 0;
		padding: 4.5rem 1.5rem 1.75rem;
		background: var(--dark);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.3s ease;
	}

	.site-header__toggle-input:checked ~ .site-header__nav {
		transform: translateX(0);
	}

	/* Its own copy rather than the one in the header row: that one is hidden on
	   the front page until you scroll, and inside an open menu it must show. */
	.site-header__nav-logo {
		display: block;
	}

	.site-header__nav-logo img {
		height: 30px;
		width: auto;
	}

	.site-header__menu {
		flex-direction: column;
		align-items: center;
		gap: 1.25rem;
		/* Absorbs the free space above and below in equal measure, which pins the
		   logo to the top and the rule, contacts and credit to the bottom while
		   the menu itself sits centred between them. No extra wrapper needed. */
		margin-block: auto;
	}

	.site-header__menu a { font-size: 0.9rem; letter-spacing: 0.15em; }

	/* Edge to edge: the panel has side padding, so the rule is pulled back out
	   to the full width of the screen. */
	.site-header__nav-rule {
		display: block;
		width: 100vw;
		margin: 0 calc(50% - 50vw) 1.5rem;
		border: 0;
		border-top: 1px solid rgba(240, 239, 235, 0.55);
	}

	.site-header__socials {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}

	.site-header__socials a {
		display: flex;
		align-items: center;
		gap: 0.6rem;
	}

	.site-header__social-label {
		display: inline;
		font-size: 0.8125rem;
		letter-spacing: 0.06em;
	}

	.site-header__nav-credit {
		display: block;
		margin: 1.75rem 0 0;
		text-align: center;
		font-size: 0.75rem;
		line-height: 1.8;
		letter-spacing: 0.04em;
		color: rgba(240, 239, 235, 0.55);
	}

	.site-header__nav-credit a {
		color: inherit;
		text-decoration: none;
	}

	.site-header__nav-credit a:hover,
	.site-header__nav-credit a:focus-visible {
		color: var(--light);
		text-decoration: underline;
		text-underline-offset: 0.25em;
	}
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	background: var(--dark);
	color: var(--light);
	padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 5rem) 0;
}

.site-footer__inner {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: 1fr;
	max-width: var(--max-w);
	margin: 0 auto;
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 720px) {
	.site-footer__inner {
		grid-template-columns: 1.4fr 1fr 1.2fr;
	}
}

.site-footer__logo img {
	height: 34px;
	width: auto;
}

.site-footer__tagline {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(240, 239, 235, 0.72);
	max-width: 24ch;
}

.site-footer__title {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(240, 239, 235, 0.6);
	margin: 0 0 1rem;
}

.site-footer__nav ul,
.site-footer__contact ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.site-footer__nav a,
.site-footer__contact a {
	color: var(--light);
	text-decoration: none;
	font-size: 0.9375rem;
	opacity: 0.85;
	transition: opacity 0.2s;
}

.site-footer__nav a:hover,
.site-footer__contact a:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.site-footer__cta {
	display: inline-block;
	margin-top: 1.5rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid rgba(240, 239, 235, 0.5);
	border-radius: var(--radius-pill);
	color: var(--light);
	text-decoration: none;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.site-footer__cta:hover {
	background: var(--light);
	border-color: var(--light);
	color: var(--dark);
}

.site-footer__bar {
	border-top: 1px solid rgba(240, 239, 235, 0.14);
	padding: 1.25rem 0 1.75rem;
}

.site-footer__bar-inner {
	max-width: var(--max-w);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	text-align: center;
}

/* Side by side where there is room, stacked on a phone. */
@media (min-width: 640px) {
	.site-footer__bar-inner {
		justify-content: space-between;
		text-align: left;
	}
}

.site-footer__copyright,
.site-footer__credit {
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: rgba(240, 239, 235, 0.55);
}

.site-footer__credit a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}

.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
	color: var(--light);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ============================================================
   Motion
   ============================================================ */

/* The hiding state is added by assets/js/motion.js, not by markup, so a script
   failure leaves the page fully visible instead of blank. */
.pb-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}

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

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

/* ============================================================
   Grain
   ============================================================ */

/* A barely-there noise pass over the flat colour areas. It is what keeps large
   single-colour grounds from looking like a screen fill, and costs one inline
   SVG rather than an image request. Sections that carry a photograph or footage
   are left alone — the grain would only muddy them. */
.gallery,
.about,
.services,
.testimonials,
.site-footer {
	position: relative;
	isolation: isolate;
}

.gallery::after,
.about::after,
.services::after,
.testimonials::after,
.site-footer::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.055'/></svg>");
}

/* ============================================================
   Continuous corners
   ============================================================ */

/* Apple's corners are not circular arcs but a continuous curve. Chrome 139+
   exposes it as corner-shape; everywhere else the plain radius above stands, so
   this is additive and safe to leave in. */
@supports (corner-shape: squircle) {
	.gallery__item,
	.hero__photo-wrap,
	.about__photo img,
	.services__photo img,
	.services__photo video,
	.testimonials__photo-wrap,
	.testimonials__card--split,
	.hero__button,
	.cta__button,
	.services__cta,
	.gallery__more-button,
	.site-footer__cta,
	.enquiry-form__submit,
	.site-header__menu a.site-header__cta,
	.enquiry-form__field input,
	.enquiry-form__field textarea {
		corner-shape: squircle;
	}
}