/* ==========================================================================
   Lux Lipo — header, mobile drawer, footer
   Ported from docs/character-v3.html. The text wordmark is retired: the header
   and footer carry the logo image, and the wordmark survives only as its alt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.ll-header {
  position: sticky;
  top: 0;
  z-index: var(--ll-z-header);
  background: rgba(33, 28, 24, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ll-header__inner {
  max-width: var(--ll-content);
  margin-inline: auto;
  padding-inline: var(--ll-gutter);
  display: flex;
  align-items: center;
  gap: 40px;
  height: var(--ll-header-h);
}
.ll-header__logo { display: flex; align-items: center; flex: 0 0 auto; }
.ll-header__logo img { height: 42px; width: auto; display: block; }

.ll-nav { margin-left: auto; }
.ll-nav > ul {
  display: flex;
  gap: 26px;
  white-space: nowrap;
  list-style: none;
  font-size: 13px;
  font-weight: 500;
  color: rgba(246, 243, 238, .85);
}
.ll-nav li { position: relative; }
.ll-nav a { display: block; padding-block: 8px; }
.ll-nav > ul > li > a:hover,
.ll-nav .current-menu-item > a,
.ll-nav .current-menu-ancestor > a { color: var(--ll-copper-light); }

/* Dropdowns — espresso panel, copper hairline, no glow. */
.ll-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 260px;
  list-style: none;
  background: var(--ll-espresso-deep);
  border-top: 1px solid rgba(200, 144, 102, .35);
  box-shadow: var(--ll-e2);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s var(--ll-ease), transform .18s var(--ll-ease), visibility .18s;
}
.ll-nav li:hover > .sub-menu,
.ll-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.ll-nav .sub-menu a {
  padding: 10px 22px;
  font-size: 13px;
  color: rgba(246, 243, 238, .85);
  white-space: nowrap;
}
.ll-nav .sub-menu a:hover { color: var(--ll-copper-light); background: rgba(246, 243, 238, .06); }

.ll-header__actions { display: flex; align-items: center; gap: 20px; flex: 0 1 auto; }
.ll-header__meta { text-align: right; line-height: 1.4; white-space: nowrap; }
/* The phone glyph is decoration next to a number that is already legible; the
   number is the link. An unsized inline SVG grew to fill the flex row. */
.ll-phone svg, .ll-header__phone svg { width: 14px; height: 14px; flex: 0 0 auto; }
.ll-phone { display: inline-flex; align-items: center; gap: 7px; }
.ll-header__meta .ll-phone {
  color: var(--ll-cream);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: none;
}
.ll-header__phone {
  font-size: var(--ll-fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ll-on-dark-soft);
  white-space: nowrap;
}
.ll-header__phone:hover { color: var(--ll-copper-light); }
.ll-header__actions .ll-btn { width: auto; }

/* The open/closed line sits above the phone number, copper on espresso. */
.ll-header .ll-open-now {
  display: block;
  white-space: nowrap;
  color: var(--ll-copper);
  font-size: var(--ll-fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}

.ll-burger {
  display: none;
  background: none;
  border: 1px solid rgba(246, 243, 238, .3);
  color: var(--ll-cream);
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--ll-r);
  cursor: pointer;
  padding: 0;
  width: auto;
}
.ll-burger svg { width: 22px; height: 22px; }
.ll-burger__close { display: none; }
.ll-burger[aria-expanded="true"] .ll-burger__open { display: none; }
.ll-burger[aria-expanded="true"] .ll-burger__close { display: block; }

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */
.ll-drawer {
  position: fixed;
  inset: var(--ll-header-h-sm) 0 0 0;
  z-index: var(--ll-z-drawer);
  background: var(--ll-espresso-deep);
  overflow-y: auto;
  padding: 8px var(--ll-gutter) 32px;
  display: none;
}
.ll-drawer.is-open { display: block; }
.ll-drawer ul { list-style: none; }
.ll-drawer > ul > li > a,
.ll-drawer__group > a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid rgba(246, 243, 238, .12);
  color: var(--ll-cream);
  font-size: 15px;
}
.ll-drawer__group > a.ll-eyebrow { color: var(--ll-copper); font-size: var(--ll-fs-micro); }
.ll-drawer__group ul a {
  display: block;
  padding: 11px 0 11px 14px;
  color: var(--ll-on-dark-soft);
  font-size: 14px;
  border-bottom: 1px solid rgba(246, 243, 238, .08);
}
.ll-drawer__actions { margin-top: 24px; display: grid; gap: 14px; }
.ll-drawer__actions .ll-phone { color: var(--ll-copper-light); font-weight: 700; text-align: center; }

/* --------------------------------------------------------------------------
   Phone header (≤ 700px): 60px bar, logo, a copper-outlined phone pill and a
   real 44px nav toggle. Book moves to the sticky bar — it is never simply
   hidden with nothing in its place.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Laptop and tablet widths (PROMPT-POLISH §1, 29 Sept). The actions used to be
   a fixed 600px (Financing + hours line + phone + Book) that never shrank, so
   from 1024 to 1366 the Book pill ran up to 105px past the viewport, and from
   768 to 900 it sat beside a burger that was itself off-screen. Each tier
   below was sized from measured widths: logo 112, nav labels 407, phone 132,
   Book 205, the long hours line 285.
   -------------------------------------------------------------------------- */
@media (max-width: 1480px) {
  .ll-header__inner { gap: 28px; padding-inline: clamp(20px, 2.5vw, 32px); }
  .ll-nav > ul { gap: 20px; }
  .ll-header__actions { gap: 14px; }
}
/* ≤ 1366: the hours line becomes its short form ("Open now", "Opens Wed 10 AM").
   The long sentence stays in the DOM for screen readers; the short one is
   generated content with empty alt text so it is not read twice. */
@media (max-width: 1366px) {
  .ll-header .ll-open-now[data-short] { font-size: 0; letter-spacing: 0; }
  .ll-header .ll-open-now[data-short]::after {
    content: attr(data-short);
    content: attr(data-short) / "";
    font-size: var(--ll-fs-micro);
    letter-spacing: .14em;
  }
}
/* ≤ 1200: phone and Book only. Financing is in the drawer, the footer and
   every cost block; the hours are in the footer and on /contacts/. */
@media (max-width: 1200px) {
  .ll-header .ll-open-now { display: none; }
  .ll-header__actions > a.ll-header__phone { display: none; }
}
@media (max-width: 1100px) {
  .ll-header__inner { gap: 22px; }
  .ll-nav > ul { gap: 15px; }
  .ll-header__actions { gap: 12px; }
  .ll-header__meta .ll-phone svg { display: none; }
  .ll-header__actions .ll-btn { padding-inline: 16px; }
}
/* ≤ 1023: the burger. The nav breakpoint is 1024 — at 961–1023 the nav used
   to stay inline and push the actions off-screen. */
@media (max-width: 1023px) {
  .ll-nav { display: none; }
  .ll-burger { display: inline-flex; }
  .ll-header__actions { margin-left: auto; }
  /* The drawer opens with the phone number at the top; Book stays pinned
     under the list. display:contents lets the two actions be ordered apart. */
  .ll-drawer.is-open { display: flex; flex-direction: column; }
  .ll-drawer__actions { display: contents; }
  .ll-drawer__actions .ll-phone {
    order: -1;
    justify-content: center;
    min-height: 44px;
    margin: 8px 0 6px;
    border: 1px solid rgba(200, 144, 102, .45);
    border-radius: var(--ll-r);
  }
  .ll-drawer__actions .ll-btn { order: 1; margin-top: 24px; }
}
/* Tablet (701–1023): Book pill + burger. The phone is at the top of the drawer. */
@media (min-width: 701px) and (max-width: 1023px) {
  .ll-header__meta { display: none; }
  /* The tablet header is the full 88px; the drawer used to open at the phone
     header's 60px and cover the bottom of the Book pill. */
  .ll-drawer { top: var(--ll-header-h); }
}
/* Laptop and tablet keep at least 24px either side; phones keep the gutter. */
@media (min-width: 701px) and (max-width: 1480px) {
  .ll-header__inner { padding-inline: clamp(24px, 2.5vw, 32px); }
}
@media (max-width: 700px) {
  .ll-header__inner { height: var(--ll-header-h-sm); gap: 12px; }
  .ll-header__logo img { height: 30px; }
  .ll-header__actions .ll-btn { display: none; }        /* the sticky bar carries Book */
  .ll-header__actions a[href^="/finance"],
  .ll-header__actions a[href*="/finance/"] { display: none; }
  .ll-header .ll-open-now { display: none; }
  .ll-burger { order: -1; }
  .ll-header__phone.ll-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(200, 144, 102, .45);
    border-radius: var(--ll-r);
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--ll-copper-light);
    font-weight: 700;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.ll-footer {
  background: var(--ll-dark-bg);
  color: var(--ll-cream);
  padding-block: var(--ll-space-block) 40px;   /* follows the closing band on every page: one gap, not two */
}
.ll-footer__inner {
  max-width: var(--ll-content);
  margin-inline: auto;
  padding-inline: var(--ll-gutter);
  display: grid;
  grid-template-columns: 5fr 2fr 3fr 2fr;
  gap: 48px;
}
.ll-footer__brand img { height: 22px; width: auto; opacity: .95; display: block; margin-bottom: 20px; }
.ll-footer__brand p, .ll-footer p { color: var(--ll-on-dark-soft); font-size: 15px; }
.ll-footer a { color: var(--ll-on-dark-soft); }
.ll-footer a:hover { color: var(--ll-copper-light); }
.ll-footer__title {
  font-family: var(--ll-body);
  font-size: var(--ll-fs-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ll-copper);
  margin: 0 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--ll-rule-dark);
}
.ll-footer__inner ul { list-style: none; display: grid; gap: 9px; font-size: 14px; }
.ll-stack { margin-top: 32px; }
.ll-footer__hours > div { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; padding: 5px 0; }
.ll-footer__social { display: flex; gap: 12px; margin-top: 20px; list-style: none; }
.ll-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(200, 144, 102, .4);
  border-radius: 50%;
}
.ll-footer__social svg { width: 18px; height: 18px; }

.ll-footer__bottom {
  max-width: var(--ll-content);
  margin: 64px auto 0;
  padding: 24px var(--ll-gutter) 0;
  border-top: 1px solid var(--ll-rule-dark);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ll-on-dark-mute);
}
.ll-footer__bottom p { font-size: 12px; color: var(--ll-on-dark-mute); margin: 0; }
.ll-footer__disclaimer { max-width: 64ch; }

@media (max-width: 1100px) { .ll-footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 700px) { .ll-footer__inner { grid-template-columns: 1fr; gap: 32px; } }