/* ============================================================
   Chisholm Hair Works — styles.css
   Plain CSS, mobile-first. Colours & fonts live in :root variables
   below so they're easy to change in one place.

   Aesthetic direction: "refined botanical luxury" — calm sage &
   cream, generous whitespace, soft atmosphere (gentle colour glows
   + a whisper of grain), a recurring botanical sprig motif, and
   one orchestrated entrance animation. Everything degrades safely
   without JavaScript and respects reduced-motion preferences.
   ============================================================ */

/* ---------- DESIGN TOKENS (change colours/fonts here) ---------- */
:root {
  /* Colours */
  --sage:        #A6BBA0;   /* primary */
  --logo-bg:     #B8CAB0;   /* exact background of logo.jpg — used for the header */
  --deep-sage:   #5C7356;   /* buttons, hover, heading accents */
  --cream:       #F8F5EF;   /* page background */
  --blush:       #E9CFC9;   /* soft accent (used sparingly) */
  --sand:        #E3D8C7;   /* dividers / cards */
  --charcoal:    #33312E;   /* body text */
  --white:       #FFFFFF;

  /* Fonts */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-script:  'Playfair Display', Georgia, serif;
  --font-body:    'Jost', system-ui, sans-serif;

  /* Shape */
  --radius:        18px;
  --radius-sm:     10px;

  /* Layered, soft shadows (two layers read as more natural depth) */
  --shadow:        0 1px 2px rgba(51,49,46,.05), 0 12px 32px -8px rgba(51,49,46,.16);
  --shadow-soft:   0 1px 2px rgba(51,49,46,.04), 0 6px 18px -8px rgba(51,49,46,.12);
  --shadow-lift:   0 2px 6px rgba(51,49,46,.06), 0 22px 48px -12px rgba(51,49,46,.24);

  /* Layout */
  --maxw:          1100px;
  --nav-height:    92px;

  /* Motion */
  --ease:          cubic-bezier(.22,.61,.36,1);
}

/* ---------- RESET & BASE ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--charcoal);
  background: var(--cream);
  line-height: 1.65;
  /* Atmosphere: two soft colour glows so the page never feels like
     a flat fill. Fixed so they sit behind the content as you scroll. */
  background-image:
    radial-gradient(60vw 60vw at 100% -10%, rgba(166,187,160,.30), transparent 60%),
    radial-gradient(50vw 50vw at -10% 110%, rgba(233,207,201,.28), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* A barely-there grain overlay adds tactile "paper" texture (skill:
   backgrounds with depth, not flat colour). Very low opacity. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a { color: var(--deep-sage); }

::selection { background: var(--blush); color: var(--charcoal); }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  color: var(--charcoal);
}

/* Anchor sections sit below the sticky nav when jumped to */
section[id] { scroll-margin-top: var(--nav-height); }

/* Visible keyboard focus everywhere (accessibility) */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--deep-sage);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- BOTANICAL SPRIG MOTIF ---------- */
.sprig {
  width: 120px;
  height: 24px;
  display: block;
  fill: none;
  stroke: var(--deep-sage);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: .7;
}

/* ---------- LAYOUT HELPERS ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.container--narrow { max-width: 640px; }

.section { padding: 4rem 0; position: relative; }
.section--alt {
  /* Sand divider, but as a soft translucent wash so the page glows
     show through rather than a hard flat band */
  background: linear-gradient(180deg, rgba(227,216,199,.55), rgba(227,216,199,.35));
}

.section__title {
  font-size: 2.1rem;
  text-align: center;
  margin: 0 0 .5rem;
  letter-spacing: .01em;
}
.section__title::after {                      /* small sage accent under headings */
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--deep-sage), transparent);
  margin: 1rem auto 0;
}
.section__lead {
  text-align: center;
  max-width: 540px;
  margin: .75rem auto 2.5rem;
  color: #6b6862;
}

/* ---------- BUTTONS ---------- */
.btn {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: 999px;
  padding: .75rem 1.7rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn--call {
  background: var(--deep-sage);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}
.btn--call:hover {
  background: #4a5e45;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.btn--call:active { transform: translateY(0); }
.btn--large {
  font-size: 1.05rem;
  padding: .95rem 2.4rem;
}

/* ============================================================
   1. STICKY NAV  (sage background so the sage logo tile blends)
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Flat fill matching the logo tile's background so the logo blends in */
  background: var(--logo-bg);
  backdrop-filter: saturate(1.1);
  box-shadow: 0 2px 14px -6px rgba(51,49,46,.35);
}
.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: var(--nav-height);
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.nav__brand { display: flex; align-items: center; }
.nav__logo {
  height: 68px;
  width: auto;
  border-radius: var(--radius-sm);
  transition: transform .25s var(--ease);
}
.nav__brand:hover .nav__logo { transform: scale(1.04); }

/* Hamburger button — hidden on desktop, shown on mobile */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav__toggle-bar {
  width: 26px;
  height: 3px;
  background: var(--white);
  border-radius: 3px;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav__links {
  display: flex;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  position: relative;
  color: var(--white);
  text-decoration: none;
  font-weight: 400;
  padding: .25rem 0;
}
/* Underline grows from the centre on hover (micro-interaction) */
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--white);
  transform: scaleX(0);
  transition: transform .25s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { color: var(--white); }

/* ============================================================
   2. HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 4.5rem;
}
.hero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.hero__eyebrow {
  margin: 0 0 .5rem;
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--deep-sage);
}
.hero__title { margin: 0; }
.hero__title-main {
  display: block;
  font-size: clamp(2.6rem, 8vw, 4.2rem);
  letter-spacing: .12em;
  color: var(--deep-sage);
}
.hero__title-script {
  display: block;
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 6.5vw, 3.4rem);
  letter-spacing: .01em;
  color: var(--deep-sage);
  margin-top: .1rem;
}
/* Centre the whole hero text cluster so the title, sprig, tagline
   and badge all share one centre line (was mixed left/centre). */
.hero__text { text-align: center; }
.hero__namewrap { width: fit-content; max-width: 100%; margin-inline: auto; }
.hero .sprig { margin: 1rem auto .25rem; }
.hero__tagline {
  font-size: 1.25rem;
  margin: .75rem auto .25rem;
  max-width: 30ch;
}
.hero__badge {
  display: inline-block;
  color: var(--deep-sage);
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 1.1rem 0 1.6rem;
}
.hero__phone { margin: .9rem 0 0; font-size: .95rem; }
/* Hero "Contact us" button — forced onto its own line, centred under the vegan badge */
.hero__cta {
  display: block;
  width: fit-content;
  margin: .25rem auto 0;
}

.hero__image { position: relative; }
.hero__image img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  object-fit: cover;
}
/* Soft blush plate tucked behind the photo — adds depth & overlap
   (skill: spatial composition, layering rather than a lone rectangle) */
.hero__image::before {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  background: var(--blush);
  border-radius: var(--radius);
  opacity: .5;
  z-index: -1;
}

/* ============================================================
   3. SERVICES
   ============================================================ */
.grid { display: grid; gap: 1.25rem; }
/* Flex (not grid) so the leftover cards on the last row centre
   naturally — there are 5 services, so the bottom row has 2. */
.grid--cards { display: flex; flex-wrap: wrap; justify-content: center; }
.grid--cards .card { flex: 0 1 100%; }

.card {
  position: relative;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(227,216,199,.9);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-soft);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
/* Thin sage rule along the top edge as a refined accent */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 1.75rem; right: 1.75rem;
  height: 2px;
  background: linear-gradient(90deg, var(--sage), transparent);
  border-radius: 2px;
}
.card h3 {
  margin: .25rem 0 .5rem;
  color: var(--deep-sage);
  font-size: 1.3rem;
}
.card p { margin: 0; color: #5b5853; }

/* ============================================================
   4. GALLERY
   ============================================================ */
.grid--gallery { grid-template-columns: 1fr; }

.gallery__item {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  transition: transform .6s var(--ease);
}
.gallery__item:hover img { transform: scale(1.05); }   /* gentle zoom on hover */

/* Clearly-labelled empty slot for future portfolio photos */
.gallery__item--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(45deg, rgba(166,187,160,.08) 0 12px, transparent 12px 24px),
    var(--cream);
  border: 2px dashed var(--sage);
  color: var(--deep-sage);
  font-weight: 500;
  letter-spacing: .08em;
  font-size: .85rem;
}

/* ============================================================
   5. ABOUT
   ============================================================ */
.about { display: grid; gap: 2.5rem; align-items: center; }
.about__image { position: relative; }
.about__image img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.about__text .section__title { text-align: left; }
.about__text .section__title::after { margin-left: 0; }
.about__text p { font-size: 1.08rem; max-width: 52ch; }

/* ============================================================
   6. HOURS
   ============================================================ */
.hours {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,.9);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.hours th, .hours td {
  text-align: left;
  padding: .95rem 1.35rem;
  border-bottom: 1px solid var(--sand);
}
.hours tr:last-child th,
.hours tr:last-child td { border-bottom: 0; }
.hours tr { transition: background .2s var(--ease); }
.hours tbody tr:hover { background: rgba(166,187,160,.12); }
.hours th { font-family: var(--font-body); font-weight: 500; }
.hours td { text-align: right; }
.hours__closed { color: #a89a8c; font-style: italic; }

/* ============================================================
   PRODUCTS STRIP
   ============================================================ */
.products__grid { display: grid; gap: 1.25rem; }
.products__banner,
.products__sets {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  object-fit: cover;
}
.products__banner { aspect-ratio: 21 / 9; }

/* ============================================================
   7. CONTACT
   ============================================================ */
.contact { display: grid; gap: 2.5rem; }
.contact__details .section__title { text-align: left; }
.contact__details .section__title::after { margin-left: 0; }
.contact__line { margin: 0 0 1.35rem; }
.contact__line strong { color: var(--deep-sage); letter-spacing: .04em; }
.contact__socials { display: flex; gap: 1.25rem; margin: 0 0 1.6rem; }
.contact__socials a { position: relative; font-weight: 500; }
.contact__map iframe {
  width: 100%;
  height: 340px;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* ============================================================
   8. FOOTER
   ============================================================ */
.footer {
  position: relative;
  background: linear-gradient(180deg, #5f7659, var(--deep-sage));
  color: var(--cream);
  text-align: center;
  padding: 3rem 0;
}
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.footer__logo { height: 56px; border-radius: var(--radius-sm); margin-bottom: .5rem; }
.footer__name { font-family: var(--font-heading); font-size: 1.4rem; margin: 0; }
.footer__badge { margin: 0; font-size: .9rem; opacity: .9; }
.footer a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.footer__copy { font-size: .8rem; opacity: .8; margin: .85rem 0 0; }

/* ============================================================
   RESPONSIVE — scale up from phone to tablet to desktop
   ============================================================ */

/* Tablet and up */
@media (min-width: 640px) {
  .grid--cards .card { flex-basis: calc((100% - 1.25rem) / 2); }
  .grid--gallery { grid-template-columns: repeat(2, 1fr); }
  .products__grid { grid-template-columns: 2fr 1fr; }
  .section__title { font-size: 2.5rem; }
}

/* Desktop */
@media (min-width: 900px) {
  /* Asymmetric hero split — text gets the wider column (skill:
     intentional, non-50/50 composition) */
  .hero__inner { grid-template-columns: 1.15fr .85fr; gap: 3.5rem; }
  .about       { grid-template-columns: .9fr 1.1fr; }
  .contact     { grid-template-columns: 1fr 1fr; }
  .grid--cards .card { flex-basis: calc((100% - 2.5rem) / 3); }
  /* Three gallery photos sit in one neat row on desktop */
  .grid--gallery { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- MOBILE NAV (collapse links behind ☰) ---------- */
@media (max-width: 768px) {
  .nav__toggle { display: flex; }

  /* Hidden by default; .nav__menu--open (toggled in JS) reveals it */
  .nav__menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    width: 100%;
    padding: .75rem 0 1rem;
  }
  .nav__menu--open { display: flex; }

  .nav__links { flex-direction: column; gap: .25rem; }
  .nav__links a { padding: .6rem 0; }
  .nav__cta { text-align: center; margin-top: .5rem; }
}

/* ============================================================
   MOTION — entrance + scroll reveals
   Only applied when JS is active (html.js) so content is NEVER
   hidden if scripts fail. main.js adds the .js class and reveals
   each element as it scrolls into view.
   ============================================================ */

/* Hero: one orchestrated, staggered entrance on page load */
.js .hero__text > * {
  opacity: 0;
  transform: translateY(16px);
  animation: rise .8s var(--ease) forwards;
}
.js .hero__text > *:nth-child(1) { animation-delay: .05s; }
.js .hero__text > *:nth-child(2) { animation-delay: .15s; }
.js .hero__text > *:nth-child(3) { animation-delay: .25s; }
.js .hero__text > *:nth-child(4) { animation-delay: .35s; }
.js .hero__text > *:nth-child(5) { animation-delay: .45s; }
.js .hero__text > *:nth-child(6) { animation-delay: .55s; }
.js .hero__text > *:nth-child(7) { animation-delay: .65s; }
.js .hero__image {
  opacity: 0;
  transform: translateY(24px) scale(.98);
  animation: rise 1s var(--ease) .3s forwards;
}

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* Scroll reveal: elements tagged by main.js fade/rise into view */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Respect users who prefer reduced motion — show everything, no movement */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero__text > *,
  .js .hero__image,
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .gallery__item:hover img,
  .card:hover,
  .btn--call:hover { transform: none; }
}