/* =========================================================
   Diversity in Beauty Hair Salon
   Lightweight, dependency-free stylesheet.

   Layout is fluid: one set of rules that reflows from phone
   to tablet to desktop. Breakpoints are only used where the
   content genuinely needs to change shape.
   ========================================================= */

:root {
  --ink:        #2e2723;  /* dark warm brown — header, hero band, footer */
  --ink-soft:   #3a322d;
  --text:       #23201e;
  --muted:      #6e6763;
  --bg:         #ffffff;
  --panel:      #ddd8d3;  /* warm grey service panels */
  --panel-soft: #efece9;
  --line:       #e3ded9;
  --on-dark:    #f4f1ee;
  --on-dark-mut:#c9c2bb;

  --radius: 4px;
  --shadow: 0 8px 24px rgba(46, 39, 35, .10);
  --maxw: 1180px;
  --readw: 720px;

  --font: "Futura", "Century Gothic", "Avenir Next", "Segoe UI", system-ui,
          -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Column layout so the home page's photo can stretch to fill whatever height
     is left over between the title band and the footer. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 400; }
h1 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); }
h2 { font-size: clamp(1.9rem, 5vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
p  { margin: 0 0 1rem; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.muted  { color: var(--muted); }
.center { text-align: center; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 300; }
.skip-link:focus { left: 0; }

/* Visible keyboard focus everywhere */
:focus-visible { outline: 2px solid #c9a35b; outline-offset: 3px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; cursor: pointer; text-align: center;
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink);
  padding: .8rem 1.6rem; border-radius: var(--radius);
  font-size: 1rem; font-weight: 400; letter-spacing: .02em;
  transition: background .18s ease, color .18s ease;
}
.btn:hover { background: var(--ink-soft); text-decoration: none; }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }

/* ---------- Header / nav ---------- */
.site-header { background: var(--ink); color: var(--on-dark); }
.nav-bar {
  display: flex; align-items: center; gap: 1rem;
  min-height: 64px; padding-top: .5rem; padding-bottom: .5rem;
  border-bottom: 1px solid rgba(244, 241, 238, .35);
}

.primary-nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
.primary-nav a { color: var(--on-dark); font-size: 1rem; padding: .25rem 0; }
.primary-nav a.active { border-bottom: 1px solid var(--on-dark); }

/* Phone number sits opposite the nav on wide screens */
.nav-phone { margin-left: auto; color: var(--on-dark); font-size: 1rem; white-space: nowrap; padding: .6rem 0; }

.nav-toggle {
  display: none; margin-left: auto;
  flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: .5rem;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--on-dark); transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero band (dark, text only) ---------- */
.hero-band { background: var(--ink); color: var(--on-dark); text-align: center; padding: clamp(2rem, 6vw, 3.5rem) 0 clamp(2.25rem, 6vw, 3.5rem); }
.hero-band h1 { color: #fff; margin-bottom: .9rem; font-weight: 300; letter-spacing: .01em; }
.hero-band p { color: var(--on-dark-mut); margin: 0 auto .35rem; max-width: var(--readw); font-size: clamp(.98rem, 2.2vw, 1.1rem); }
.hero-band p:last-child { margin-bottom: 0; }
.hero-band a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Home stage: salon photo + the service panels on top of it ----------
   On phones this is an ordinary photo with the panels stacked underneath.
   The desktop treatment is in the min-width: 900px block further down. */
/* Grows to fill the window on every page, so a short page (404) still puts
   the footer at the bottom rather than mid-screen. */
main { flex: 1 0 auto; }
.home-main { display: flex; flex-direction: column; }
.home-stage { position: relative; width: 100%; }
.home-stage-photo { width: 100%; height: clamp(260px, 44vw, 420px); object-fit: cover; }

/* ---------- Sections ---------- */
.section { padding: clamp(2.5rem, 7vw, 5rem) 0; }
.section-alt { background: var(--panel-soft); }
.section-title { text-align: center; margin: 0 0 clamp(1.75rem, 5vw, 3rem); font-weight: 300; }
.lead { font-size: clamp(1rem, 2.4vw, 1.15rem); }

.page-head { padding: clamp(2rem, 5vw, 3rem) 0 clamp(1rem, 3vw, 1.5rem); text-align: center; }
.page-head .lead { max-width: var(--readw); margin-left: auto; margin-right: auto; color: var(--muted); }

/* ---------- Services ----------
   Two panels side by side on desktop, stacked on phones.
   Each panel is photo + text, which itself stacks on narrow screens. */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
.service {
  background: var(--panel);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
}
.service-media { width: 100%; aspect-ratio: 3 / 4; max-height: 340px; object-fit: cover; border-radius: var(--radius); }
.service-media.placeholder {
  display: grid; place-items: center;
  background: linear-gradient(135deg, #4a403a, #2e2723);
  color: rgba(255,255,255,.8); font-size: .85rem; text-align: center; padding: .5rem;
}
.service h3 { margin: 0 0 .9rem; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.service p { margin: 0 0 .9rem; }
.service p:last-child { margin-bottom: 0; }
.service .price { font-weight: 400; }

/* Desktop only: the service panels lift up over the bottom of the salon photo,
   so the page opens as one composition instead of three stacked bands.

   The section is pulled up far enough that the "Services" heading also lands on
   the photo, which is why the photo gets a scrim across its lower half — it
   guarantees the white heading has contrast no matter what is in the shot.
   Below 900px there is no overlap and the heading goes back to normal. */
@media (min-width: 900px) {
  /* The stage takes every pixel the header, title band and footer don't use,
     so the photo reaches the footer however tall the window is. min-height
     covers short windows, where the panels would otherwise be squeezed. */
  .home-stage {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 620px;
  }

  /* Taken out of flow so it fills the stage rather than sizing it. */
  .home-stage-photo {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .home-stage::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 65%;
    background: linear-gradient(to bottom, rgba(46, 39, 35, 0), rgba(46, 39, 35, .8));
    pointer-events: none;
  }

  .services-overlap {
    position: relative;   /* lifts the panels above the photo */
    z-index: 2;
  }
  /* The scrim does most of the work; the shadow covers the case where the
     heading lands on a bright patch of the photo, like the mirror. */
  .services-overlap .section-title { color: #fff; text-shadow: 0 2px 14px rgba(20, 16, 14, .65); }
}

/* ---------- Gallery (portfolio) ----------
   The photos are a real mix of shapes — tall portraits next to wide
   before/after panels — so this uses CSS multi-column rather than a grid.
   Every photo keeps its own aspect ratio instead of being cropped to fit a
   uniform tile, and the columns pack together with no ragged gaps.
   One column on phones, two on tablets, three on desktop. */
.gallery {
  --gallery-gap: clamp(1rem, 3vw, 1.75rem);
  columns: 1;
  column-gap: var(--gallery-gap);
  max-width: 1160px;
  margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
}
@media (min-width: 640px)  { .gallery { columns: 2; } }
@media (min-width: 1000px) { .gallery { columns: 3; } }

/* break-inside stops a photo being split across two columns. */
.gallery-item { margin: 0 0 var(--gallery-gap); break-inside: avoid; }
.gallery-item img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow); cursor: zoom-in;
}
.gallery-item img:hover { opacity: .93; }
/* Placeholder tiles, shown until real photos are added */
.gallery-item .placeholder {
  aspect-ratio: 4 / 3; border-radius: var(--radius);
  display: grid; place-items: center;
  background: linear-gradient(135deg, #4a403a, #2e2723);
  color: rgba(255,255,255,.8);
}
.gallery-item .placeholder span { border: 1px dashed rgba(255,255,255,.45); padding: .4rem .9rem; border-radius: var(--radius); font-size: .9rem; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(20, 16, 14, .94); display: grid; place-items: center; padding: clamp(1rem, 4vw, 2.5rem); }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 86vh; border-radius: var(--radius); }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; display: grid; place-items: center; cursor: pointer;
  width: 48px; height: 48px; border-radius: 50%; font-size: 1.5rem; line-height: 1;
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.35);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.28); }
.lightbox-close { top: clamp(.75rem, 2vw, 1.25rem); right: clamp(.75rem, 2vw, 1.25rem); }
.lightbox-prev  { left: clamp(.5rem, 2vw, 1.25rem);  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: clamp(.5rem, 2vw, 1.25rem); top: 50%; transform: translateY(-50%); }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.contact-info { background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.75rem); }
.contact-info h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); }
/* The phone number is the only way to book, so it carries the panel. */
.contact-lead { margin: 0; font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.2; }
.contact-lead a { text-decoration: none; }
.contact-lead a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-sub { margin: .4rem 0 1.25rem; color: var(--muted); }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { padding: .8rem 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .15rem; }
.contact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-list a { text-decoration: underline; text-underline-offset: 3px; }
.contact-label { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 600; color: var(--muted); }
/* Sits in the second grid column, opposite the contact details. */
.contact-photo { display: block; width: 100%; height: 100%; max-height: 560px;
                 object-fit: cover; border-radius: var(--radius); }

.map-section { margin-top: clamp(2rem, 5vw, 3rem); }
.map-section iframe { width: 100%; height: clamp(260px, 40vw, 420px); border: 0; display: block; }

/* ---------- Footer ---------- */
.site-footer { flex-shrink: 0; background: var(--ink); color: var(--on-dark); padding: clamp(2rem, 5vw, 3rem) 0 1.5rem; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: clamp(1.25rem, 4vw, 2.5rem); }
.site-footer h4 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 500; margin-bottom: .8rem; }
.site-footer p { color: var(--on-dark-mut); margin: 0 0 .4rem; }
.site-footer a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.footer-brand { color: #fff; font-size: 1.05rem; display: block; margin-bottom: .5rem; }
.footer-bottom { margin-top: clamp(1.5rem, 4vw, 2.5rem); padding-top: 1.25rem; border-top: 1px solid rgba(244,241,238,.2); }
.footer-bottom p { margin: 0; font-size: .88rem; }

/* =========================================================
   Responsive adjustments
   ========================================================= */

/* Phones only: the service panel's photo moves above its text.
   On tablets the photo stays beside the text — stacking there just
   made the panels needlessly tall. */
@media (max-width: 560px) {
  .service { grid-template-columns: 1fr; }
  .service-media { aspect-ratio: 16 / 10; max-height: 240px; }
}

/* Phones: collapse the nav behind a hamburger */
@media (max-width: 720px) {
  /* Hamburger on the left, phone number on the right, menu drops below */
  .nav-toggle { display: flex; margin-left: 0; order: 1; }
  .nav-bar { flex-wrap: wrap; }
  .nav-phone { margin-left: auto; order: 2; padding: .75rem .25rem; }

  .primary-nav {
    order: 3;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    padding: .5rem 0 .25rem;
  }
  .primary-nav.open { display: flex; }
  .primary-nav a { width: 100%; padding: .6rem 0; }
  .primary-nav a.active { border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; }

  .lightbox-prev, .lightbox-next { width: 42px; height: 42px; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}