/* ─── Site chrome for the booking page ──────────────────────────────────────
   The header, navbar and footer from www.gilferrersalon.com, so booking does
   not feel like leaving the website.

   Two rules for editing this file:

   1. SCOPED TOKENS. The site's design tokens live on .gf-chrome, NOT on :root.
      book.html already defines --radius: 14px for its own cards, and the site
      uses --radius: 2px. Putting these on :root would reshape every card in
      the booking flow.

   2. CHROME ONLY. This is deliberately not a copy of the site's style.css —
      that file carries global element resets that would fight the booking UI.
      Only the header/nav/footer rules are here, and every one of them is
      nested under .gf-chrome so nothing leaks into the app.

   Class names match the website's markup exactly (.topbar, .header, .nav,
   .footer …) so the two can be diffed by eye when the site changes. None of
   them collide with book.html, which prefixes its own with rp- / sty- / svc-.
   ------------------------------------------------------------------------- */

.gf-chrome {
  --gold:      #b08d57;
  --gold-soft: #c0ac8b;
  --ink:       #191e23;
  --ink-2:     #3a4048;
  --ink-3:     #6b7280;
  --line:      #e4ded5;
  --bg-deep:   #16191d;
  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans:  "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 2px;   /* the website's corner radius; the app's own buttons are pills */
  --ease: cubic-bezier(.22,.61,.36,1);

  font-family: var(--sans);
  /* The website's body values. The nav links and the top bar inherit their
     line-height, so 1.6 here made every row a few pixels shorter than the
     homepage's. */
  line-height: 1.75;
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
}
.gf-chrome a { text-decoration: none; color: inherit; }
.gf-chrome img { max-width: 100%; height: auto; display: block; }
.gf-chrome .wrap {
  width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
}
.gf-chrome .visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Top bar ---------- */
.gf-chrome .topbar {
  background: var(--ink); color: rgba(255,255,255,.82);
  font-size: .74rem; letter-spacing: .06em;
}
.gf-chrome .topbar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px;
}
.gf-chrome .topbar a:hover { color: #fff; }
.gf-chrome .topbar__contact { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.gf-chrome .topbar__status { display: inline-flex; align-items: center; gap: 7px; }
.gf-chrome .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.gf-chrome .dot--open   { background: #46b17b; box-shadow: 0 0 0 3px rgba(70,177,123,.22); }
.gf-chrome .dot--closed { background: #c2703f; box-shadow: 0 0 0 3px rgba(194,112,63,.2); }

/* ---------- Header ---------- */
/* Copied from the website's style.css, rule for rule. The website declares
   the header sticky, but overflow-x: hidden on its body means it never
   actually sticks — so a plain header here looks and scrolls the same. */
.gf-chrome .header { position: relative; z-index: 100; border-bottom: 1px solid var(--line); }
.gf-chrome .header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
}
.gf-chrome .header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 96px; padding-block: clamp(16px, 1.9vw, 24px);
}
.gf-chrome .brand { flex: none; display: block; }
.gf-chrome .brand img { width: clamp(155px, 17.5vw, 212px); }
/* The <img> carries width="210" height="108" for layout stability; the
   display:block + height:auto on .gf-chrome img above (the website's own img
   reset) is what keeps it unstretched on phones and stops the inline-image
   descender gap that made this header 7px taller than the homepage's. */

.gf-chrome .nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.gf-chrome .nav a {
  font-size: .85rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-2); padding: 8px 0; position: relative; white-space: nowrap;
  transition: color .2s var(--ease);
}
/* Hover: gold label, 2px gold rule drawn in from the left and out to the
   right. Current page: a still 1px rule in ink. Same as the website. */
.gf-chrome .nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .32s var(--ease);
}
.gf-chrome .nav a:hover { color: var(--gold); }
.gf-chrome .nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.gf-chrome .nav a[aria-current="page"] { color: var(--ink); }
.gf-chrome .nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--ink); height: 1px; }
.gf-chrome .nav a[aria-current="page"]:hover { color: var(--ink); }
.gf-chrome .nav a[aria-current="page"]:hover::after { background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .gf-chrome .nav a::after { transition: none; } }

/* Same solid "Menu" button the website uses on phones — one word in white
   on ink, not a hairline hamburger box, so the two headers read as one. */
.gf-chrome .nav-toggle {
  display: none; align-items: center; justify-content: center;
  height: 38px; padding: 0 13px; border: 1px solid var(--ink);
  background: var(--ink); border-radius: var(--radius); position: relative; cursor: pointer;
  font: inherit;
}
.gf-chrome .nav-toggle__label {
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: #fff; line-height: 1;
}
.gf-chrome .nav-toggle[aria-expanded="true"] { opacity: 0; pointer-events: none; }

.gf-chrome .nav__extra { display: none; }
/* The drawer's close button belongs to the mobile slide-out only. */
.gf-chrome .nav-close { display: none; }

/* The website's button, for the drawer's Call Now. */
.gf-chrome .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: 15px 34px;
  font-family: var(--sans);
  font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  border-radius: var(--radius);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  text-align: center;
}
.gf-chrome .btn--ghost { background: transparent; color: var(--ink); }
.gf-chrome .btn--ghost:hover { background: var(--ink); color: #fff; }

@media (max-width: 1000px) {
  .gf-chrome .nav-toggle { display: inline-flex; }
  .gf-chrome .header__inner { min-height: 64px; padding-block: 14px; }
  /* Same logo size the website uses once the Menu button shares the row. */
  .gf-chrome .brand img { width: clamp(132px, 40vw, 175px); }
  .gf-chrome .nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 84vw);
    background: #fff; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 4px; padding: 70px 32px 40px; border-left: 1px solid var(--line);
    transform: translateX(101%); transition: transform .34s var(--ease), visibility .34s;
    overflow-y: auto; box-shadow: -20px 0 50px rgba(25,30,35,.1);
    visibility: hidden; z-index: 100;
  }
  .gf-chrome .nav[data-open="true"] { transform: translateX(0); visibility: visible; }
  .gf-chrome .nav a { font-size: .85rem; padding: 13px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .gf-chrome .nav a::after { display: none; }
  .gf-chrome .nav .btn {
    margin-top: 20px; width: 100%;
    background: var(--ink); border-color: var(--ink); color: #fff;
  }
  .gf-chrome .nav .btn:hover { background: var(--gold); border-color: var(--gold); }
  .gf-chrome .nav-scrim {
    position: fixed; inset: 0; background: rgba(25,30,35,.42);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); z-index: 99;
  }
  .gf-chrome .nav-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

  /* The drawer's contents, in the website's order: greeting, days, live
     hours, the links, Call Now, social. display: contents dissolves the
     wrapper so `order` can arrange its children among the links. */
  .gf-chrome .nav__extra { display: contents; }
  .gf-chrome .nav__greeting {
    order: -3; width: 100%;
    font-family: var(--serif); font-style: italic;
    font-size: 1.06rem; line-height: 1.3;
    color: var(--gold); margin: 0 0 16px;
    letter-spacing: 0; text-transform: none;
  }
  .gf-chrome .nav-close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 16px; right: 16px;
    width: 40px; height: 40px; padding: 0;
    background: none; border: 1px solid var(--line); border-radius: var(--radius);
    font-size: 1.05rem; line-height: 1; color: var(--ink); cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  }
  .gf-chrome .nav-close:hover, .gf-chrome .nav-close:focus-visible {
    background: var(--ink); border-color: var(--ink); color: #fff;
  }
  .gf-chrome .nav__days {
    order: -2; width: 100%;
    font-size: .82rem; letter-spacing: .04em; color: var(--ink);
    margin: 0 0 4px; text-transform: none; font-weight: 500;
  }
  .gf-chrome .nav__hours {
    order: -1; width: 100%;
    font-size: .82rem; letter-spacing: .04em; color: var(--ink-3);
    margin: 0 0 20px; padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    text-transform: none;
  }
  .gf-chrome .nav .nav__phone {
    order: 1; width: 100%; margin-top: 22px;
    background: transparent; color: var(--ink); border-color: var(--ink);
  }
  .gf-chrome .nav .nav__phone:hover, .gf-chrome .nav .nav__phone:focus-visible {
    background: var(--ink); color: #fff; border-color: var(--ink);
  }
  .gf-chrome .nav__extra .social {
    order: 11; width: 100%;
    margin-top: 26px; padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  .gf-chrome .nav__extra .social { gap: 20px; color: var(--ink-2); }
  .gf-chrome .nav__extra .social__link { width: 30px; height: 30px; opacity: .8; }
  .gf-chrome .nav__extra .social__link svg { width: 20px; height: 20px; }
  .gf-chrome .nav__extra .social__link:hover { color: var(--gold); opacity: 1; }
}

/* ---------- Social ---------- */
.gf-chrome .social { display: inline-flex; align-items: center; gap: 14px; }
.gf-chrome .social__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  color: inherit; opacity: .72; transition: opacity .2s var(--ease), color .2s var(--ease);
}
.gf-chrome .social__link svg { width: 17px; height: 17px; display: block; }
.gf-chrome .social__link:hover { opacity: 1; color: var(--gold-soft); }
.gf-chrome .topbar__contact .social { margin-left: 20px; }
.gf-chrome .topbar__contact .social__link { width: 22px; height: 22px; }
.gf-chrome .topbar__contact .social__link svg { width: 15px; height: 15px; }
.gf-chrome .footer__social .social { gap: 16px; margin-right: 4px; }

/* Phones — copied from the website's stylesheet so the two headers are the
   same header. Top bar: phone number left, white 32px social targets right.
   Header: logo centred, Menu button pinned at the right. */
@media (max-width: 1000px) {
  .gf-chrome .topbar__inner { min-height: 40px; }
  .gf-chrome .topbar__inner > .topbar__status { display: none; }
  .gf-chrome .topbar__contact { flex: 1; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: nowrap; }
  .gf-chrome .topbar__contact > a { white-space: nowrap; }
  .gf-chrome .topbar__contact .social { margin-left: 0; gap: 6px; color: #fff; }
  .gf-chrome .topbar__contact .social__link { width: 32px; height: 32px; opacity: .92; }
  .gf-chrome .topbar__contact .social__link svg { width: 18px; height: 18px; }
}
@media (max-width: 900px) {
  .gf-chrome .header__inner { position: relative; justify-content: center; }
  .gf-chrome .nav-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
}
@media (max-width: 350px) {
  .gf-chrome .topbar .wrap { padding-inline: 12px; }
  .gf-chrome .topbar__contact { gap: 8px; }
  .gf-chrome .topbar__contact .social { gap: 0; }
  .gf-chrome .topbar__contact .social__link { width: 26px; height: 26px; }
  .gf-chrome .topbar__contact .social__link svg { width: 16px; height: 16px; }
}

/* ---------- Footer ----------
   A verbatim copy of the website's footer rules (style.css, "Footer" and
   "Footer on phones"), each selector prefixed with .gf-chrome, plus the
   .hours and .address rules the footer relies on. When the website footer
   changes, paste the block again. */
.gf-chrome .address { font-style: normal; line-height: 1.9; }
.gf-chrome .hours { list-style: none; margin: 0; padding: 0; }
.gf-chrome .hours li { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.gf-chrome .hours li:last-child { border-bottom: 0; }
.gf-chrome .hours .day { color: var(--ink-3); }
.gf-chrome .hours .time { color: var(--ink); }
.gf-chrome .hours li[data-today="true"] { font-weight: 500; }
.gf-chrome .hours li[data-today="true"] .day, .gf-chrome .hours li[data-today="true"] .time { color: #876a3c; }

.gf-chrome .footer { background: var(--bg-deep); color: rgba(255,255,255,.68); font-size: .9rem; }
.gf-chrome .footer a { color: rgba(255,255,255,.68); transition: color .2s var(--ease); }
.gf-chrome .footer a:hover { color: var(--gold-soft); }
.gf-chrome .footer__grid {
  display: grid; gap: clamp(32px, 5vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding-block: clamp(48px, 7vw, 76px);
}
.gf-chrome .footer h3 {
  color: #fff; font-family: var(--sans); font-size: .74rem; line-height: 1.2;
  letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1.4em; font-weight: 500;
}
.gf-chrome .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
/* The footer uses logo-transparent.png, NOT logo.png. The filter crushes the
   artwork to black and inverts it to white, which only works on a file with a
   real alpha channel: an opaque logo turns into a solid white rectangle, and a
   file whose letter counters are opaque comes out with the holes filled in.
   The header uses the same transparent file: logo.png is opaque with an
   off-white (#fdfdfd) background, which showed as a faint box on the white
   header. logo.png is kept only for the schema/og image references. */
/* The footer ships the white-on-transparent logo file, so no filter is needed. */
.gf-chrome .footer__logo { width: 180px; margin-bottom: 20px; opacity: .85; }
.gf-chrome .footer__slogan {
  font-family: var(--serif);
  font-style: italic;
  font-size: .86rem;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--gold-soft);
  margin: 0 0 10px;
}
.gf-chrome .footer__since { font-size: .82rem; max-width: 180px; color: rgba(255,255,255,.5); margin: 0; }
.gf-chrome .footer .hours li { border-bottom-color: rgba(255,255,255,.1); font-size: .88rem; }
.gf-chrome .footer .hours .day { color: rgba(255,255,255,.5); }
.gf-chrome .footer .hours .time { color: rgba(255,255,255,.85); }
.gf-chrome .footer .hours li[data-today="true"] .day,
.gf-chrome .footer .hours li[data-today="true"] .time { color: var(--gold-soft); }
.gf-chrome .footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 26px;
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  font-size: .8rem; color: rgba(255,255,255,.45);
}
.gf-chrome .footer__social { display: flex; gap: 18px; }
/* Design credit: its own line under the bottom bar, centred. Deliberately
   faint: there for anyone who goes looking for it, unnoticed by everyone
   else. Hover and focus bring it up to readable, so it is still a usable link. */
.gf-chrome .footer__credit { text-align: center; padding-bottom: 20px; margin-top: -8px; font-size: .72rem; letter-spacing: .06em; }
.gf-chrome .footer__credit a { color: rgba(255,255,255,.5); text-decoration: none; transition: color .25s var(--ease); }
.gf-chrome .footer__credit a:hover, .footer__credit a:focus-visible { color: rgba(255,255,255,.7); }

/* ---------- Footer on phones ----------
   The grid is auto-fit minmax(220px, 1fr) over four columns. Around 500-620px
   that resolves to two columns of ~230px, which is too narrow for the hours
   rows — "9:30 AM — 6:00 PM" wraps onto a second line and the whole block
   reads as a mess. Below 700px go to a single column and centre it, matching
   the rest of the site on mobile. */
@media (max-width: 700px) {
  .gf-chrome .footer__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .gf-chrome .footer__logo { margin-inline: auto; }
  /* nowrap would otherwise push this past the screen edge on a small phone. */
  .gf-chrome .footer__slogan { white-space: normal; }
  .gf-chrome .footer__since { max-width: none; margin-inline: auto; }
  .gf-chrome .footer .topbar__status { justify-content: center; }

  /* The hours stay as day-left / time-right rows — that pairing is the whole
     point of the table — but constrained to a readable measure and centred as
     a block, with the time never breaking mid-range. */
  .gf-chrome .footer .hours {
    max-width: 320px; margin-inline: auto; text-align: left;
  }
  .gf-chrome .footer .hours .time { white-space: nowrap; }

  .gf-chrome .footer address { text-align: center; }
  .gf-chrome .footer__bottom { justify-content: center; text-align: center; }
  .gf-chrome .footer__social { justify-content: center; }
}