/* Hubly Document — page chrome and reserved-element styling.
 *
 * HAND-WRITTEN. Deliberately NOT part of hubly-document.css, which is
 * generated from the utility-class vocabulary in hubly_document.ts and carries
 * a do-not-hand-edit banner. Nothing here is a utility class the AI can name;
 * these styles back markup the SHELL renders (header, footer, contact form,
 * booking action), which the model never writes and cannot reference.
 *
 * Everything is scoped under #hc-doc-root so it cannot leak into the dashboard,
 * and every colour derives from --brand, which renderHublyDocument sets per
 * business.
 */

/* --- Header ------------------------------------------------------------- */

/* BASE. Everything that is true of every header treatment. The variant
   classes below change position, colour and arrangement -- they never restate
   what is already here. See selectChromeVariant in hubly_document.ts for which
   combination a given business gets and why. */
#hc-doc-root .hd-chrome-header {
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.85rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(20, 20, 20, 0.08);
}

/* --- Variant: sticky or static ------------------------------------------- */

#hc-doc-root .hd-chrome-header.hd-h-sticky { position: sticky; top: 0; }
#hc-doc-root .hd-chrome-header.hd-h-static { position: relative; }

/* --- Variant: solid or transparent-over-hero ------------------------------ */

#hc-doc-root .hd-chrome-header.hd-h-solid {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.6) blur(10px);
}

/* Sits ON the hero rather than in a strip above it, for the businesses whose
   first section paints itself dark. Absolute rather than translucent: a
   translucent bar over a dark hero is still a visible band, which is the thing
   this variant exists to remove. The hero keeps its own top padding, so
   nothing is overlapped -- see hd-h-transparent + .hd-doc-body below. */
#hc-doc-root .hd-chrome-header.hd-h-transparent {
  position: absolute;
  inset-inline: 0;
  top: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
  color: #fff;
}
#hc-doc-root .hd-chrome-header.hd-h-transparent.hd-h-sticky { position: fixed; }
#hc-doc-root .hd-chrome-header.hd-h-transparent .hd-nav-link,
#hc-doc-root .hd-chrome-header.hd-h-transparent .hd-chrome-phone,
#hc-doc-root .hd-chrome-header.hd-h-transparent .hd-brand { color: rgba(255, 255, 255, 0.88); }
#hc-doc-root .hd-chrome-header.hd-h-transparent .hd-nav-link:hover,
#hc-doc-root .hd-chrome-header.hd-h-transparent .hd-nav-link:focus-visible { color: #fff; }
#hc-doc-root .hd-chrome-header.hd-h-transparent .hd-monogram {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
#hc-doc-root .hd-chrome-header.hd-h-transparent .hd-chrome-cta {
  background: #fff;
  color: #141414;
}
/* The transparent header is out of flow, so the HERO has to make room for it
   itself.
   
   It must be the hero SECTION, not the body's first child. The generator
   usually wraps everything in a <main class="bg-white">, so padding the first
   child pushed a white band down between the header and the dark hero -- the
   exact gap this variant exists to remove. Both real shapes are addressed:
   sections directly under the body, and sections one wrapper down. Deliberately
   not a depth-free `section:first-of-type`, which would also match a section
   nested inside a later one. */
#hc-doc-root:has(.hd-h-transparent) .hd-doc-body > section:first-child,
#hc-doc-root:has(.hd-h-transparent) .hd-doc-body > *:first-child > section:first-child {
  padding-block-start: 5.5rem;
}

/* The stack variant is two rows tall, so a one-row offset leaves the nav
   sitting on the hero's eyebrow text. MEASURED on the rendered page rather
   than guessed: the stacked header is 171px (a 3.5rem mark, the name, and a
   nav row) where the single row is ~64px. 12rem clears it with room; 9rem did
   not, which is how we know it was measured. */
#hc-doc-root:has(.hd-h-transparent.hd-h-stack) .hd-doc-body > section:first-child,
#hc-doc-root:has(.hd-h-transparent.hd-h-stack) .hd-doc-body > *:first-child > section:first-child {
  padding-block-start: 12rem;
}

/* --- Variant: logo placement --------------------------------------------- */

/* left: brand, then nav pushed right by hd-nav's margin-inline-start:auto. */

/* centre: nothing to balance a left-aligned mark against, so the mark takes
   the middle and the actions stay pinned right. */
#hc-doc-root .hd-chrome-header.hd-h-centre { justify-content: center; position: relative; }
#hc-doc-root .hd-chrome-header.hd-h-centre .hd-brand { margin-inline: auto; }
#hc-doc-root .hd-chrome-header.hd-h-centre .hd-nav { display: none; }
#hc-doc-root .hd-chrome-header.hd-h-centre .hd-chrome-actions {
  position: absolute;
  inset-inline-end: clamp(1rem, 4vw, 3rem);
}

/* stack: the mark owns a row; nav and actions share the one beneath. For marks
   taller than they are wide, which a single horizontal row cannot hold without
   shrinking them to nothing. */
#hc-doc-root .hd-chrome-header.hd-h-stack {
  flex-direction: column;
  gap: 0.75rem;
  padding-block: 1.1rem;
}
#hc-doc-root .hd-h-stack .hd-h-row-brand { display: flex; justify-content: center; }
#hc-doc-root .hd-h-stack .hd-h-row-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
}
#hc-doc-root .hd-h-stack .hd-nav { margin-inline-start: 0; }
#hc-doc-root .hd-h-stack .hd-brand { flex-direction: column; gap: 0.4rem; text-align: center; }

/* --- Variant: mark shape and scale ---------------------------------------- */

/* A wordmark is the business name set as artwork, so it is sized by HEIGHT and
   given room to run; a round mark is sized by its diameter and kept circular.
   Both used to be forced through the same square box, which is what made a
   good logo look no better than initials. */
#hc-doc-root .hd-mark-wordmark .hd-logo { max-width: 18rem; }
#hc-doc-root .hd-mark-wide     .hd-logo { max-width: 13rem; }
#hc-doc-root .hd-mark-square   .hd-logo { max-width: 4rem; }
#hc-doc-root .hd-mark-tall     .hd-logo { max-width: 5rem; width: auto; }

/* Round marks read as round. object-fit stays `contain` so nothing is cropped
   -- a mark that is nearly circular is clipped to a circle, one that is not is
   simply centred inside it. */
#hc-doc-root .hd-mark-square .hd-logo,
#hc-doc-root .hd-mark-tall .hd-logo { border-radius: 50%; }

#hc-doc-root .hd-logo-sm .hd-logo, #hc-doc-root .hd-logo-sm .hd-monogram { height: 1.75rem; }
#hc-doc-root .hd-logo-md .hd-logo, #hc-doc-root .hd-logo-md .hd-monogram { height: 2.25rem; }
#hc-doc-root .hd-logo-lg .hd-logo { height: 3.5rem; }
#hc-doc-root .hd-logo-lg .hd-monogram { height: 3rem; width: 3rem; font-size: 1rem; }
#hc-doc-root .hd-logo-sm .hd-monogram { width: 1.75rem; }
#hc-doc-root .hd-logo-md .hd-monogram { width: 2.25rem; }

/* A wordmark carries the name, so the header stops printing it (suppressName
   in selectChromeVariant). Nothing to style -- the span is simply not emitted. */

#hc-doc-root .hd-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  letter-spacing: -0.01em;
  min-width: 0;
}

#hc-doc-root .hd-monogram {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 0.5rem;
  background: var(--brand);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* A real uploaded logo, in place of the monogram. Constrained by HEIGHT and
   left free in width, because owners upload both square marks and wide
   wordmarks and a fixed box would letterbox or crop one of them. */
#hc-doc-root .hd-logo {
  height: 2rem;
  width: auto;
  max-width: 11rem;
  flex: 0 0 auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 860px) {
  #hc-doc-root .hd-logo { max-width: 7rem; }
}

#hc-doc-root .hd-brand-name {
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#hc-doc-root .hd-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-inline-start: auto;
  min-width: 0;
}

#hc-doc-root .hd-nav-link {
  text-decoration: none;
  color: rgba(20, 20, 20, 0.68);
  font-size: 0.875rem;
  white-space: nowrap;
  transition: color 0.15s ease;
}

#hc-doc-root .hd-nav-link:hover,
#hc-doc-root .hd-nav-link:focus-visible {
  color: var(--brand);
}

#hc-doc-root .hd-chrome-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

#hc-doc-root .hd-chrome-phone {
  text-decoration: none;
  color: rgba(20, 20, 20, 0.72);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

#hc-doc-root .hd-chrome-cta {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s ease;
}

#hc-doc-root .hd-chrome-cta:hover { filter: brightness(0.92); }

/* The nav is the first thing to go when there isn't room for it — the brand
   and the booking CTA matter more on a phone than a jump list. */
@media (max-width: 860px) {
  #hc-doc-root .hd-nav { display: none; }
  #hc-doc-root .hd-chrome-phone { display: none; }
  #hc-doc-root .hd-chrome-actions { margin-inline-start: auto; }
  /* Every placement collapses to the same thing on a phone. `centre` and
     `stack` are decisions about how to use horizontal room, and there isn't
     any -- holding them here would cost the CTA its place on the row. */
  #hc-doc-root .hd-chrome-header.hd-h-stack { flex-direction: row; gap: 1rem; }
  #hc-doc-root .hd-h-stack .hd-h-row-brand,
  #hc-doc-root .hd-h-stack .hd-h-row-nav { width: auto; }
  #hc-doc-root .hd-h-stack .hd-h-row-nav { margin-inline-start: auto; }
  #hc-doc-root .hd-h-stack .hd-brand { flex-direction: row; }
  #hc-doc-root .hd-chrome-header.hd-h-centre { justify-content: flex-start; }
  #hc-doc-root .hd-chrome-header.hd-h-centre .hd-brand { margin-inline: 0; }
  #hc-doc-root .hd-chrome-header.hd-h-centre .hd-chrome-actions { position: static; }
  #hc-doc-root .hd-mark-wordmark .hd-logo { max-width: 9rem; }
  #hc-doc-root .hd-logo-lg .hd-logo { height: 2.5rem; }
  #hc-doc-root:has(.hd-h-transparent) .hd-doc-body > section:first-child,
  #hc-doc-root:has(.hd-h-transparent) .hd-doc-body > *:first-child > section:first-child { padding-block-start: 4.5rem; }
}

/* --- Footer ------------------------------------------------------------- */

#hc-doc-root .hd-chrome-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 2rem clamp(1rem, 4vw, 3rem);
  border-top: 1px solid rgba(20, 20, 20, 0.08);
  font-size: 0.875rem;
  color: rgba(20, 20, 20, 0.6);
}

#hc-doc-root .hd-foot-name { font-weight: 600; color: rgba(20, 20, 20, 0.82); }
#hc-doc-root .hd-foot-link { color: inherit; text-decoration: none; }
#hc-doc-root .hd-foot-link:hover { color: var(--brand); }

/* Anchors from the derived nav land under the sticky header without this. */
#hc-doc-root .hd-doc-body [id^="hd-"] { scroll-margin-top: 5rem; }

/* --- Link underlines ----------------------------------------------------- */

/* The generated CTAs were <a> elements wearing button classes, and the browser
   default underline showed straight through the button. Underlines are removed
   from links that carry any button-ish styling token, and KEPT everywhere else
   — a real inline text link in a paragraph still needs to look like a link,
   so a blanket `a { text-decoration: none }` would be an accessibility
   regression, not a fix. */
#hc-doc-root a[class*="rounded"],
#hc-doc-root a[class*="bg-brand"],
#hc-doc-root a[class*="bg-ink"],
#hc-doc-root a[class*="bg-white"],
#hc-doc-root a[class*="border"],
#hc-doc-root a[class*="shadow"] {
  text-decoration: none;
}

/* --- Reserved elements --------------------------------------------------- */

#hc-doc-root .hd-primary-action {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease;
}

#hc-doc-root .hd-primary-action:hover { filter: brightness(0.92); }
#hc-doc-root .hd-primary-action[disabled] { opacity: 0.55; cursor: default; filter: none; }

#hc-doc-root .hd-booking {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

#hc-doc-root .hd-alt-action {
  color: rgba(20, 20, 20, 0.7);
  text-decoration: none;
  font-size: 0.95rem;
}
#hc-doc-root .hd-alt-action:hover { color: var(--brand); }

#hc-doc-root .hd-form {
  display: grid;
  gap: 0.9rem;
  max-width: 32rem;
}

#hc-doc-root .hd-field { display: grid; gap: 0.35rem; }

#hc-doc-root .hd-field label {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(20, 20, 20, 0.75);
}

#hc-doc-root .hd-field input,
#hc-doc-root .hd-field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(20, 20, 20, 0.18);
  border-radius: 0.6rem;
  background: #fff;
  font: inherit;
  font-size: 1rem;
  color: #141414;
}

#hc-doc-root .hd-field input:focus,
#hc-doc-root .hd-field textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: transparent;
}

#hc-doc-root .hd-field textarea { resize: vertical; min-height: 6rem; }

#hc-doc-root .hd-form-note {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(20, 20, 20, 0.55);
}

#hc-doc-root .hd-form-status {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.9rem;
}

#hc-doc-root .hd-form-status.is-error { color: #b42318; }
#hc-doc-root .hd-form-status.is-ok { color: #0b7a44; font-weight: 500; }

/* Honest empty states for the islands Hubly fills in later. Styled as a quiet
   placeholder rather than body copy, so nobody mistakes one for real content
   the business wrote. */
#hc-doc-root .hd-empty-island {
  padding: 1.25rem 1.4rem;
  border: 1px dashed rgba(20, 20, 20, 0.2);
  border-radius: 0.75rem;
  background: rgba(20, 20, 20, 0.02);
}

#hc-doc-root .hd-empty-island p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(20, 20, 20, 0.55);
}

/* --- Ported from the classic renderer, 2026-08-18 --------------------------- */

/* Sticky header scrim. The header is translucent, so hero text scrolled under it
   was being clipped mid-line against nothing. A short gradient below the header
   gives the type something to disappear into. */
#hc-doc-root .hd-chrome-header::after{
  content:"";
  position:absolute;left:0;right:0;top:100%;height:28px;
  background:linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
}
/* The scrim exists to give type something to disappear INTO under a translucent
   white bar. Over a dark hero, with no bar, it is just a white smear. */
#hc-doc-root .hd-chrome-header.hd-h-transparent::after{ display:none; }

/* No nav is a variant, not an accident -- a two-link jump list on a short page
   is noise. Hidden here rather than by omitting the element so the markup
   stays one shape and the override can turn it back on. */
#hc-doc-root .hd-chrome-header.hd-h-nonav .hd-nav{ display:none; }

/* Service-area map. Classic has rendered a real Google embed for as long as it
   has existed; this format rendered a dashed island saying a map would appear. */
#hc-doc-root .hd-map{
  border-radius:18px;overflow:hidden;border:1px solid rgba(20,20,20,.12);
  background:rgba(20,20,20,.04);
}
#hc-doc-root .hd-map iframe{width:100%;height:280px;border:0;display:block}

/* Site chatbot. Collapsed launcher, so it never covers the page on arrival. */
#hc-doc-root .hd-chat{position:relative;display:inline-block}
#hc-doc-root .hd-chat-launch{
  display:inline-flex;align-items:center;gap:8px;
  padding:.7rem 1.3rem;border:0;border-radius:999px;
  background:var(--brand);color:#fff;font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;
}
#hc-doc-root .hd-chat-launch:hover{filter:brightness(.92)}
#hc-doc-root .hd-chat-panel{
  margin-top:12px;width:min(380px,100%);
  border:1px solid rgba(20,20,20,.14);border-radius:14px;background:#fff;
  box-shadow:0 10px 34px rgba(0,0,0,.12);overflow:hidden;
}
#hc-doc-root .hd-chat-panel[hidden]{display:none}
#hc-doc-root .hd-chat-log{max-height:260px;overflow-y:auto;padding:14px;display:grid;gap:8px}
#hc-doc-root .hd-chat-msg{
  font-size:.9rem;line-height:1.45;padding:.55rem .8rem;border-radius:12px;max-width:88%;
}
#hc-doc-root .hd-chat-msg.is-bot{background:rgba(20,20,20,.05);color:#141414;justify-self:start}
#hc-doc-root .hd-chat-msg.is-user{background:var(--brand);color:#fff;justify-self:end}
#hc-doc-root .hd-chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(20,20,20,.1)}
#hc-doc-root .hd-chat-input{
  flex:1;padding:.6rem .75rem;border:1px solid rgba(20,20,20,.18);border-radius:.6rem;
  font:inherit;font-size:.95rem;color:#141414;background:#fff;
}
#hc-doc-root .hd-chat-input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
#hc-doc-root .hd-chat-send{
  padding:.6rem 1rem;border:0;border-radius:.6rem;background:var(--brand);color:#fff;
  font:inherit;font-weight:600;cursor:pointer;
}
@media (max-width:520px){ #hc-doc-root .hd-chat-panel{width:100%} }