/*
Theme Name: TheeHairPluggg Studio
Description: Studio website for TheeHairPluggg LLC.
Version: 1.1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: theehairpluggg-studio
*/

:root {
  color-scheme: light;
  --ink: #302019;
  --muted: #50382d;
  --accent: #713728;
  --paper: #faefe4;
  --rule: #6e413541;
  --display: Georgia, "Times New Roman", serif;
  --text: "Segoe UI", Arial, sans-serif;
  --gutter: clamp(24px, 7vw, 104px);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.55 var(--text); }
a { color: inherit; }
img { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.site-wrap { width: min(100% - var(--gutter) * 2, 1260px); margin-inline: auto; }
.skip-link { position: absolute; z-index: 10; top: 8px; left: 8px; padding: 8px 14px; background: var(--paper); translate: 0 -160%; }
.skip-link:focus { translate: 0 0; }

.site-header { background: var(--header-color, #e8c9af); }
.page-index { --header-color: linear-gradient(105deg, #e7c5a9 42%, #ba8c6d 100%); }
.page-services { --header-color: linear-gradient(90deg, #c29f7d, #edd4bb 65%); }
.page-booking { --header-color: linear-gradient(90deg, #b88864, #e7c6a8 65%); }
.header-inner, .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 79px; }
.header-inner { border-bottom: 1px solid var(--rule); }
.wordmark { font: 700 clamp(1.16rem, 2.3vw, 1.54rem)/1 var(--display); letter-spacing: -.075em; text-decoration: none; white-space: nowrap; }
.wordmark span { font: 700 .54rem/1 var(--text); letter-spacing: .12em; margin-left: 4px; }
nav { display: flex; align-items: center; gap: clamp(14px, 2.8vw, 42px); }
nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .86rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
nav a:hover, nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }

.blend { position: relative; isolation: isolate; overflow: hidden; }
.blend-photo { position: absolute; inset: 0 0 0 auto; width: var(--photo-width, 59%); z-index: -1; }
.blend-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center var(--photo-position, 15%); }
.blend-photo {
  mask-image: linear-gradient(to right, transparent, #000 var(--feather, 24%)), linear-gradient(to bottom, transparent, #000 6%);
  mask-composite: intersect;
}
.blend-left .blend-photo {
  inset-inline: 0 auto;
  mask-image: linear-gradient(to left, transparent, #000 var(--feather, 24%)), linear-gradient(to bottom, transparent, #000 6%);
}
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--accent); font-size: .69rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 23px; border-top: 1px solid currentColor; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: .94; letter-spacing: -.077em; }
h1 { font-size: clamp(4rem, 7.8vw, 7.7rem); }
h2 { font-size: clamp(3rem, 5.1vw, 5.35rem); }
h1 em, h2 em { color: var(--accent); font-weight: inherit; }
.hero-description { margin-block: 24px 15px; max-width: 33ch; color: var(--muted); font-size: clamp(.98rem, 1.45vw, 1.12rem); }
.inline-links { display: flex; flex-wrap: wrap; gap: 3px clamp(16px, 2.6vw, 34px); }
.text-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; width: fit-content; font-size: .9rem; font-weight: 730; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.text-link:hover { color: var(--accent); }
.text-link span { text-decoration: none; font-size: 1.02em; }

.hero {
  --photo-width: 60%;
  --photo-position: 6%;
  --feather: 30%;
  background: linear-gradient(105deg, #e7c5a9 35%, #d6ad90 66%, #a57352);
}
.hero-photo, .booking-photo { inset-block-start: 16px; }
.hero-inner { min-height: clamp(590px, 49vw, 740px); display: grid; align-items: center; }
.hero-copy { padding-block: 70px; width: max-content; max-width: 58%; }
.hero h1 { white-space: nowrap; }
.style-section { --photo-width: min(60%, 790px); --photo-position: 0%; --feather: 18%; background: linear-gradient(95deg, #ce9c7e 15%, #f3dcc7 65%); }
.style-inner { min-height: clamp(640px, 71vw, 960px); display: grid; grid-template-columns: 1.19fr minmax(0,.86fr); align-items: center; }
.style-copy { grid-column: 2; padding-block: 72px; }
.style-links { list-style: none; padding: 0; margin-block: 25px 12px; }
.style-links li { border-top: 1px solid var(--rule); }
.style-links li:last-child { border-bottom: 1px solid var(--rule); }
.style-links a { display: flex; min-height: 49px; align-items: center; justify-content: space-between; gap: 15px; font: 400 clamp(1.2rem, 2vw, 1.58rem)/1.3 var(--display); text-decoration: none; }
.style-links a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.style-links a span:last-child { font: 1rem/1 var(--text); }

.service-intro { --bottom-trim: 24px; --photo-width: 56%; --photo-position: 17%; --feather: 19%; background: linear-gradient(100deg, #c29f7d, #edd4bb 63%); }
.service-intro, .locs-section { margin-block-end: calc(-1 * var(--bottom-trim)); clip-path: inset(0 0 var(--bottom-trim)); }
.service-intro-inner, .booking-inner { min-height: clamp(470px, 43vw, 620px); display: grid; grid-template-columns: 1fr minmax(0,.85fr); align-items: center; }
.service-intro-copy, .booking-copy { grid-column: 2; padding-block: 58px; }
.service-intro h1, .booking-intro h1 { font-size: clamp(3.9rem, 7.2vw, 6.6rem); }

.service-menu { padding-block: clamp(52px, 7vw, 94px); }
.menu-inner { max-width: 1090px; }
.menu-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 20px; margin-bottom: 30px; }
.menu-tools { display: grid; grid-template-columns: minmax(0,1fr) minmax(166px,.36fr); gap: 22px; align-items: end; }
.categories { display: flex; flex-wrap: wrap; gap: 6px; }
.categories button, .search-label input { font: inherit; color: var(--ink); }
.categories button { min-height: 44px; padding: 7px 11px; border: 1px solid var(--rule); background: transparent; cursor: pointer; font-size: .81rem; }
.categories button:hover { border-color: var(--accent); }
.categories button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.search-label { display: grid; gap: 3px; color: var(--muted); font-size: .79rem; font-weight: 700; }
.search-label input { min-width: 0; min-height: 44px; padding: 7px 10px; border: 1px solid var(--rule); border-radius: 0; background: #fff8f1; font-size: .9rem; }
.result-count { margin-block: 18px 9px; color: var(--muted); font-size: .84rem; }
.service-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.service-row { display: grid; grid-template-columns: minmax(0,1fr) 106px 63px; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--rule); padding-block: 17px; }
.service-row h3 { font: 400 clamp(1.17rem, 2.7vw, 1.43rem)/1.15 var(--display); }
.row-category { margin-bottom: 4px; color: var(--accent); font-size: .66rem; font-weight: 720; letter-spacing: .07em; text-transform: uppercase; }
.service-note { margin-top: 5px; color: var(--muted); font-size: .81rem; }
.duration { color: var(--muted); font-size: .86rem; }
.price { text-align: right; font-weight: 750; }
.empty-state { padding-block: 18px; }
.locs-section {
  --locs-height: clamp(370px, 37vw, 530px);
  --photo-width: min(60%, calc(100% - var(--gutter) - 252px));
  --locs-inset: clamp(12px, 1.5vw, 26px);
  /* The rotated photo is centered on desktop. Trim its lower edge at the waist. */
  --locs-photo-span: min(60vw, calc(100vw - var(--gutter) - 267px));
  --bottom-trim: max(0px, calc(var(--locs-height) / 2 - var(--locs-photo-span) * .23));
  overflow: clip;
  background: linear-gradient(95deg, #d2a582, #f0d6bd 66%); }
.locs-section .locs-photo { inset-inline-start: var(--locs-inset); mask-image: none; }
.locs-inner { min-height: var(--locs-height); display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.44fr); align-items: center; }
.locs-inner > div { grid-column: 2; padding-block: 58px; }
.locs-inner .text-link { margin-top: 18px; }
.locs-photo img { filter: url(#thp-locs-clean-edge); position: absolute; left: 50%; top: 50%; width: 66.6667%; height: auto; max-width: none; translate: -50% -50%; rotate: -90deg; }

.booking-intro { --photo-width: 56%; --photo-position: 5%; --feather: 23%; background: linear-gradient(95deg, #b88864, #e7c6a8 65%); }
.booking-guide { padding-block: clamp(52px, 8vw, 112px); }
.guide-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 30px; }
.guide-inner dl { margin: 0; border-top: 1px solid var(--rule); }
.guide-inner dl div { padding-block: 17px; border-bottom: 1px solid var(--rule); }
.guide-inner dt { font: 400 1.3rem/1.2 var(--display); }
.guide-inner dd { margin: 6px 0 0; color: var(--muted); max-width: 55ch; }
.site-footer { background: #e8c7ad; }
.footer-inner { min-height: 100px; }

@media (max-width: 940px) {
  .hero h1 { font-size: clamp(3.6rem, 8.35vw, 5.8rem); }
  .menu-tools { grid-template-columns: 1fr; gap: 11px; }
  .search-label { max-width: 300px; }
}
@media (max-width: 700px) {
  :root { --gutter: clamp(19px, 5.6vw, 39px); }
  .header-inner, .footer-inner { min-height: 65px; gap: 12px; }
  .wordmark { font-size: 1.18rem; }
  nav { gap: 12px; }
  nav a { font-size: .78rem; }
  .blend { display: flex; flex-direction: column; }
  .blend-photo, .blend-left .blend-photo {
    position: relative; inset: auto; width: 100%; order: 2;
    mask-image: linear-gradient(to bottom, transparent, #000 12%);
  }
  .hero { background: #dfb99c; --photo-position: 0%; }
  .hero .hero-photo, .booking-intro .booking-photo { mask-image: linear-gradient(to bottom, transparent, #000 7%); }
  .hero-inner, .style-inner, .service-intro-inner, .booking-inner, .locs-inner { display: block; min-height: 0; }
  .hero-copy, .style-copy, .service-intro-copy, .booking-copy, .locs-inner > div { width: auto; max-width: none; padding-block: 40px 16px; }
  .hero h1 { font-size: clamp(3.05rem, 12.6vw, 5.25rem); }
  .hero-photo { height: clamp(360px, 110vw, 540px); }
  .hero-description { margin-block: 16px 6px; }
  .style-section { background: #f0d6bf; }
  .style-photo { aspect-ratio: 1182 / 1455; }
  .service-intro { --bottom-trim: 16px; background: #edd3b9; --photo-position: 18%; }
  .service-photo { height: clamp(265px, 69vw, 390px); }
  .booking-intro { background: #e5c0a1; --photo-position: 0%; }
  .booking-photo { height: clamp(310px, 91vw, 470px); }
  .locs-section { --bottom-trim: 10.6vw; background: #efd3b6; }
  .locs-section .locs-photo { inset-inline-start: 0; width: calc(100% - 20px); margin-inline: 10px; aspect-ratio: 3 / 2; }
  .locs-inner .text-link { margin-top: 10px; }
  .guide-inner { grid-template-columns: 1fr; }
  .service-row { grid-template-columns: minmax(0,1fr) 67px 44px; gap: 7px; }
  .duration, .service-note { font-size: .76rem; }
}
@media (max-width: 365px) {
  .wordmark span { display: none; }
  nav { gap: 9px; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}