/* Hidook generated-site bottom chrome + cookie consent (shared layout rule). */
:root {
  --hb-fab-size: 3.25rem;
  --hb-fab-gap: 1rem;
  --hb-fab-safe-right: calc(var(--hb-fab-size) + var(--hb-fab-gap) + 0.35rem);
  --hb-fab-safe-bottom: calc(var(--hb-fab-size) + var(--hb-fab-gap));
  --hb-dock-safe-bottom: 0px;
  --hb-cookie-clearance: 0px;
  --hb-cookie-width-cap: 14.5rem;
}
/* Call dock present → reserve its height; suppress the duplicate WA float so
 * strangers never see two stacked WhatsApp controls on the first screen. */
body:has(.ls-dock),
html:has(.ls-dock) {
  --hb-dock-safe-bottom: 3.85rem;
}
body:has(.ls-dock__wa) .whatsapp-float,
body:has(.ls-dock) .whatsapp-float,
html:has(.ls-dock) .whatsapp-float {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.hb-cookie-banner {
  position: fixed;
  z-index: 40;
  top: auto;
  left: 0.75rem;
  right: auto;
  bottom: calc(0.75rem + var(--hb-dock-safe-bottom));
  /* Never span into the FAB/dock corner — width capped to left half. */
  max-width: min(var(--hb-cookie-width-cap), calc(100vw - var(--hb-fab-safe-right) - 1.25rem));
  margin: 0;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  background: #111;
  color: #f5f5f5;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  font-size: 0.82rem;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: auto;
}
/* Narrow canvases: keep card above full-bleed docks; stay compact left. */
@media (max-width: 899px) {
  :root {
    /* Wider + shorter on narrow canvases: a tall skinny card climbs into
     * hero meta / explore labels. Cap width just left of the FAB zone. */
    --hb-cookie-width-cap: 18rem;
  }
  .hb-cookie-banner {
    left: 0.5rem;
    right: auto;
    bottom: calc(0.5rem + max(var(--hb-dock-safe-bottom), 0px));
    max-width: min(var(--hb-cookie-width-cap), calc(100vw - var(--hb-fab-safe-right) - 0.85rem));
    padding: 0.45rem 0.55rem;
    font-size: 0.74rem;
    line-height: 1.3;
    gap: 0.4rem;
  }
  body:not(:has(.ls-dock)) .hb-cookie-banner {
    /* Keep left of FAB; no need to stack above it when width is capped. */
    bottom: 0.5rem;
  }
}
/* Short viewports — a laptop at 200% browser zoom reports about 720x450 CSS
 * pixels, and a 117px consent card is then a quarter of everything the visitor
 * can see. It pushed the professionals hero meta strip and the local-service
 * tagline underneath itself with nowhere left to clear to: the hero copy alone
 * is taller than the band between the masthead and the card. Compact the card
 * instead of asking the page to find room that does not exist. */
@media (max-height: 560px) {
  .hb-cookie-banner {
    padding: 0.4rem 0.55rem;
    font-size: 0.72rem;
    line-height: 1.25;
    gap: 0.3rem;
    max-width: min(20rem, calc(100vw - var(--hb-fab-safe-right) - 0.85rem));
  }
  .hb-cookie-banner p { margin: 0; }
  .hb-cookie-banner button {
    min-height: 36px;
    padding: 0.35rem 0.9rem;
  }
  .hb-cookie-actions .hb-cookie-link { min-height: 36px; }
  html.hb-cookie-open,
  body.hb-cookie-open,
  body:has(#hb-cookie-banner:not([hidden])) {
    --hb-cookie-clearance: 5.5rem;
  }
  /* Decorative scroll cues stand down while the card is up, the way .pr-scroll
   * already does. They are hints with no action attached, and at this height
   * the card sits exactly where they point. */
  html.hb-cookie-open .scroll-indicator,
  body.hb-cookie-open .scroll-indicator,
  body:has(#hb-cookie-banner:not([hidden])) .scroll-indicator,
  html.hb-cookie-open .pf-hint,
  body.hb-cookie-open .pf-hint,
  body:has(#hb-cookie-banner:not([hidden])) .pf-hint,
  html.hb-cookie-open .ls-scroll,
  body.hb-cookie-open .ls-scroll,
  body:has(#hb-cookie-banner:not([hidden])) .ls-scroll {
    display: none;
  }
}
/* Wide viewports: the in-flow explore cues sit at the bottom-left of the hero,
 * which is the corner the consent card occupies. The <=899px rules further
 * down fix that for narrow canvases; nothing did for a plain 1440x900 desktop,
 * where portfolio's "EXPLOREAZĂ" was measured overlapping the card by 232x21.
 * Indent past the card rather than hiding the label: at this width there is
 * room to the right of it, so the cue stays readable and simply moves. */
@media (min-width: 900px) and (min-height: 561px) {
  html.hb-cookie-open .pf-hint,
  body.hb-cookie-open .pf-hint,
  body:has(#hb-cookie-banner:not([hidden])) .pf-hint,
  html.hb-cookie-open .ls-scroll,
  body.hb-cookie-open .ls-scroll,
  body:has(#hb-cookie-banner:not([hidden])) .ls-scroll,
  html.hb-cookie-open .pm-scroll,
  body.hb-cookie-open .pm-scroll,
  body:has(#hb-cookie-banner:not([hidden])) .pm-scroll {
    padding-inline-start: calc(var(--hb-cookie-width-cap) + 2.25rem);
    box-sizing: border-box;
  }
}
/* Clearance token — class + :has so preview paints cannot drop the lift. */
html.hb-cookie-open,
body.hb-cookie-open,
body:has(#hb-cookie-banner:not([hidden])) {
  --hb-cookie-clearance: 10.25rem;
  scroll-padding-bottom: calc(var(--hb-cookie-clearance) + var(--hb-dock-safe-bottom) + var(--hb-fab-safe-bottom));
}
@media (max-width: 899px) {
  html.hb-cookie-open,
  body.hb-cookie-open,
  body:has(#hb-cookie-banner:not([hidden])) {
    /* Match the shorter mobile card height so hero padding does not overshoot. */
    --hb-cookie-clearance: 8rem;
  }
}
/* Bottom-aligned hero pitch / section seeds clear the left corner card. */
html.hb-cookie-open .ls-hero__copy,
body.hb-cookie-open .ls-hero__copy,
body:has(#hb-cookie-banner:not([hidden])) .ls-hero__copy,
html.hb-cookie-open .pf-hero__copy,
body.hb-cookie-open .pf-hero__copy,
body:has(#hb-cookie-banner:not([hidden])) .pf-hero__copy,
html.hb-cookie-open .pm-hero__copy,
body.hb-cookie-open .pm-hero__copy,
body:has(#hb-cookie-banner:not([hidden])) .pm-hero__copy,
html.hb-cookie-open .pr-hero__copy,
body.hb-cookie-open .pr-hero__copy,
body:has(#hb-cookie-banner:not([hidden])) .pr-hero__copy,
html.hb-cookie-open .hero-content,
body.hb-cookie-open .hero-content,
body:has(#hb-cookie-banner:not([hidden])) .hero-content {
  padding-bottom: calc(var(--hb-cookie-clearance) + 0.75rem);
  padding-right: max(0.5rem, calc(var(--hb-fab-safe-right) * 0.35));
  box-sizing: border-box;
}
/* Hero shells: margin-bottom (not only padding) so border-box min-height
 * templates actually push the next in-flow strip below the fixed chrome. */
html.hb-cookie-open .pf-hero__frame,
body.hb-cookie-open .pf-hero__frame,
body:has(#hb-cookie-banner:not([hidden])) .pf-hero__frame,
html.hb-cookie-open .ls-hero__cut,
body.hb-cookie-open .ls-hero__cut,
body:has(#hb-cookie-banner:not([hidden])) .ls-hero__cut,
html.hb-cookie-open .pr-hero,
body.hb-cookie-open .pr-hero,
body:has(#hb-cookie-banner:not([hidden])) .pr-hero,
html.hb-cookie-open header.hero,
body.hb-cookie-open header.hero,
body:has(#hb-cookie-banner:not([hidden])) header.hero,
html.hb-cookie-open .pf-hero,
body.hb-cookie-open .pf-hero,
body:has(#hb-cookie-banner:not([hidden])) .pf-hero,
html.hb-cookie-open .ls-hero,
body.hb-cookie-open .ls-hero,
body:has(#hb-cookie-banner:not([hidden])) .ls-hero {
  box-sizing: border-box;
  padding-bottom: var(--hb-cookie-clearance);
  margin-bottom: calc(var(--hb-dock-safe-bottom) + 0.35rem);
}
/* Credibility / meta strips at the fold — never enter FAB or cookie corners. */
.pr-strip {
  padding-inline-end: max(1rem, var(--hb-fab-safe-right)) !important;
  box-sizing: border-box;
  overflow-x: clip;
}
.pr-strip__row {
  padding-inline-end: max(0.5rem, var(--hb-fab-safe-right)) !important;
  max-width: 100%;
  box-sizing: border-box;
}
/* While consent is open, keep the strip OFF the first screen under fixed
 * chrome (border-box min-height heroes otherwise leave a peek strip under FAB). */
@media (max-width: 899px) {
  html.hb-cookie-open .pr-hero,
  body.hb-cookie-open .pr-hero,
  body:has(#hb-cookie-banner:not([hidden])) .pr-hero {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin-bottom: 0 !important;
    padding-bottom: calc(var(--hb-cookie-clearance) + 1.25rem) !important;
  }
  html.hb-cookie-open .pr-strip,
  body.hb-cookie-open .pr-strip,
  body:has(#hb-cookie-banner:not([hidden])) .pr-strip,
  html.hb-cookie-open .pr-strip__row,
  body.hb-cookie-open .pr-strip__row,
  body:has(#hb-cookie-banner:not([hidden])) .pr-strip__row {
    /* No huge left pad — that crushed the flex row into the FAB column. */
    padding-inline-start: 0;
    padding-inline-end: max(1rem, var(--hb-fab-safe-right)) !important;
    padding-bottom: 0.85rem;
    box-sizing: border-box;
  }
}
html.hb-cookie-open .pr-hero__meta,
body.hb-cookie-open .pr-hero__meta,
body:has(#hb-cookie-banner:not([hidden])) .pr-hero__meta {
  /* Do not crush width — that wraps meta into a tall block under the card.
   * Horizontal FAB pad only; vertical clearance comes from hero copy padding. */
  max-width: 100%;
  padding-right: max(0.75rem, var(--hb-fab-safe-right));
  box-sizing: border-box;
}
/* Section titles near the fold — keep clear of the left corner card. */
html.hb-cookie-open .pm-ticket__label,
body.hb-cookie-open .pm-ticket__label,
body:has(#hb-cookie-banner:not([hidden])) .pm-ticket__label,
html.hb-cookie-open .pm-menublock__h,
body.hb-cookie-open .pm-menublock__h,
body:has(#hb-cookie-banner:not([hidden])) .pm-menublock__h,
html.hb-cookie-open .pm-rail__label,
body.hb-cookie-open .pm-rail__label,
body:has(#hb-cookie-banner:not([hidden])) .pm-rail__label {
  max-width: calc(100% - min(15rem, 42vw));
  box-sizing: border-box;
}
/* Scroll / explore labels — never under the FAB. Do NOT force left placement
 * (that previously put centered absolute scroll cues under the cookie card).
 * Preserve each template's horizontal anchor; only enforce safe max-width and
 * a lifted bottom while consent is open. */
.pf-hint,
.scroll-hint,
.ls-scroll,
.scroll-indicator,
.pm-scroll {
  max-width: calc(100% - var(--hb-fab-safe-right) - 0.35rem);
  box-sizing: border-box;
  padding-inline-end: 0.5rem;
}
/* Professionals vertical cue — always clear of the FAB corner. */
.pr-scroll {
  right: var(--hb-fab-safe-right) !important;
}
/* Absolute / fixed scroll cues: lift above cookie + dock; keep template's
 * horizontal centering (left:50% + translateX) or right anchor. */
html.hb-cookie-open .scroll-indicator,
body.hb-cookie-open .scroll-indicator,
body:has(#hb-cookie-banner:not([hidden])) .scroll-indicator {
  bottom: calc(var(--hb-cookie-clearance) + var(--hb-dock-safe-bottom) + 0.75rem) !important;
  max-width: min(16rem, calc(100% - var(--hb-fab-safe-right) - 1rem));
  box-sizing: border-box;
  z-index: 2;
}
/* In-flow explore labels (portfolio / local-service / product-menu): keep left
 * of the FAB and pad so the full word is not under the fixed chrome stack. */
html.hb-cookie-open .pf-hint,
body.hb-cookie-open .pf-hint,
body:has(#hb-cookie-banner:not([hidden])) .pf-hint,
html.hb-cookie-open .scroll-hint,
body.hb-cookie-open .scroll-hint,
body:has(#hb-cookie-banner:not([hidden])) .scroll-hint,
html.hb-cookie-open .ls-scroll,
body.hb-cookie-open .ls-scroll,
body:has(#hb-cookie-banner:not([hidden])) .ls-scroll,
html.hb-cookie-open .pm-scroll,
body.hb-cookie-open .pm-scroll,
body:has(#hb-cookie-banner:not([hidden])) .pm-scroll {
  max-width: calc(100% - var(--hb-fab-safe-right) - 0.75rem) !important;
  padding-inline-end: var(--hb-fab-safe-right) !important;
  padding-bottom: calc(0.85rem + var(--hb-dock-safe-bottom)) !important;
  text-align: left !important;
  align-items: flex-start !important;
  box-sizing: border-box;
}
/* Portfolio/local/product-menu: park in-flow explore labels ABOVE the fixed
 * cookie + dock stack (left of FAB). Absolute placement is the only reliable
 * way past border-box min-height heroes that otherwise leave the label under
 * the card on the first screen. */
@media (max-width: 899px) {
  html.hb-cookie-open .ls-hero,
  body.hb-cookie-open .ls-hero,
  body:has(#hb-cookie-banner:not([hidden])) .ls-hero,
  html.hb-cookie-open .pf-hero,
  body.hb-cookie-open .pf-hero,
  body:has(#hb-cookie-banner:not([hidden])) .pf-hero,
  html.hb-cookie-open header.hero,
  body.hb-cookie-open header.hero,
  body:has(#hb-cookie-banner:not([hidden])) header.hero {
    position: relative;
  }
  html.hb-cookie-open .pf-hero__frame,
  body.hb-cookie-open .pf-hero__frame,
  body:has(#hb-cookie-banner:not([hidden])) .pf-hero__frame,
  html.hb-cookie-open .ls-hero__cut,
  body.hb-cookie-open .ls-hero__cut,
  body:has(#hb-cookie-banner:not([hidden])) .ls-hero__cut {
    min-height: calc(100vh - 2.5rem) !important;
    padding-bottom: calc(var(--hb-cookie-clearance) + var(--hb-dock-safe-bottom) + 2.75rem) !important;
  }
  html.hb-cookie-open .pf-hint,
  body.hb-cookie-open .pf-hint,
  body:has(#hb-cookie-banner:not([hidden])) .pf-hint,
  html.hb-cookie-open .ls-scroll,
  body.hb-cookie-open .ls-scroll,
  body:has(#hb-cookie-banner:not([hidden])) .ls-scroll,
  html.hb-cookie-open .pm-scroll,
  body.hb-cookie-open .pm-scroll,
  body:has(#hb-cookie-banner:not([hidden])) .pm-scroll {
    /* fixed to the viewport — absolute bottom was relative to a tall hero
     * box and left the label under the viewport-fixed cookie card. */
    position: fixed !important;
    left: 0.75rem !important;
    right: auto !important;
    bottom: calc(var(--hb-cookie-clearance) + var(--hb-dock-safe-bottom) + 0.5rem) !important;
    width: auto !important;
    max-width: calc(100vw - var(--hb-fab-safe-right) - 1.5rem) !important;
    margin: 0 !important;
    padding: 0.35rem 0.5rem !important;
    text-align: left !important;
    align-items: flex-start !important;
    background: transparent !important;
    z-index: 36;
    box-sizing: border-box;
    pointer-events: auto;
  }
}
/* Absolute vertical cue (professionals): above chrome, left of FAB. */
html.hb-cookie-open .pr-scroll,
body.hb-cookie-open .pr-scroll,
body:has(#hb-cookie-banner:not([hidden])) .pr-scroll {
  left: auto !important;
  right: var(--hb-fab-safe-right) !important;
  bottom: calc(var(--hb-cookie-clearance) + var(--hb-dock-safe-bottom) + 0.5rem) !important;
  transform: rotate(180deg) !important;
  text-align: center !important;
}
/* Primary call docks / WA floats stay bottom-right — opposite corner from the
 * consent card — so they remain fully readable and tappable without a fragile
 * bottom-lift race against the card height. */
.hb-cookie-banner[hidden] { display: none !important; }
.hb-cookie-banner p { margin: 0; opacity: 0.92; }
.hb-cookie-banner a { color: #c8e6c9; text-decoration: underline; }
.hb-cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  pointer-events: auto;
}
.hb-cookie-banner button {
  appearance: none;
  border: 0;
  border-radius: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0.55rem 1.15rem;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  background: #f5f5f5;
  color: #111;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.hb-cookie-banner button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.hb-cookie-banner .hb-cookie-link {
  font-size: 0.88rem;
  color: #e6e6e6;
  text-underline-offset: 2px;
}
/* Only the link in the actions row is a standalone target. The one inside the
 * sentence above it stays inline — WCAG 2.5.8 exempts a target whose size is
 * constrained by the line-height of the text it sits in, and forcing it to
 * 44px would break the paragraph it belongs to. */
.hb-cookie-actions .hb-cookie-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.hb-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.65rem 0 0;
  font-size: 0.85rem;
}
.hb-legal-links a {
  color: inherit;
  text-decoration: underline;
  opacity: 0.85;
  /* WCAG 2.5.8 wants a 24x24 CSS px target. Default inline <a> sizing gives
     these roughly 20px of height, so they failed on every template. The fix
     was written once, into ONE template's own stylesheet, which left the other
     four still failing -- the markup is generated here, so the rule belongs
     here too and every template gets it at once. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.hb-legal-links a:hover { opacity: 1; }