/* Harris Homes tool shell standard.
 * The outer canvas follows the site's fluid 1440px content measure. Individual
 * tools may keep narrower inner cards for readable forms and questionnaires.
 */
:root {
  --hh-tool-max: min(1440px, 100%);
  --hh-max: var(--hh-tool-max);
  --max: var(--hh-tool-max);
}

html, body { max-width: 100%; }
body {
  font-family: "Source Sans Pro", "Source Sans 3", Arial, sans-serif !important;
  color: #0a2239;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body :is(h1, h2, h3, h4, .title, .hh-title, .brand strong) {
  font-family: Lato, "Source Sans Pro", Arial, sans-serif !important;
}

/* Full-page and iframe-safe outer mounts. */
#advantage-app,
.app,
.hh-shell,
#homevalue-outer,
#compval-outer,
#qual-outer,
#hh-contact-outer,
#hh-booking-outer,
.hh-faq-shell,
.locations-shell,
.testimonials-shell,
.aa-public-booking-mount {
  width: min(100%, var(--hh-tool-max)) !important;
  max-width: var(--hh-tool-max) !important;
  margin-inline: auto !important;
}

/* Flat embed canvas: the WordPress/Kadence section supplies the surrounding
 * page treatment. Tool documents should not add a second tinted panel or
 * shadow behind their usable form/card surfaces. */
#advantage-app,
.app,
.hh-shell,
#homevalue-outer,
#compval-outer,
#qual-outer,
#hh-contact-outer,
#hh-booking-outer,
.hh-faq-shell,
.locations-shell,
.testimonials-shell,
.aa-public-booking-mount {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* The planner remains a readable form surface, but does not expand to the
 * full utility canvas on wide screens. */
#advantage-app {
  max-width: 1300px !important;
}

/* Advantage Planner is already the readable inner tool surface. Do not add a
 * second enclosing card when it is embedded inside a WordPress row. */
#advantage-app > .shell {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The WordPress/Kadence row supplies the page canvas. These tool-level cards
 * are outer shells, so keep their fields/results but remove the second panel
 * behind them. */
#homevalue-card,
#compval-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Shared action contract for every hh-tool document. */
button:not(.hh-x),
input[type="submit"], input[type="button"],
.btn, .hh-btn {
  border-radius: 999px !important;
}

html:has(#hh-contact-outer),
body:has(#hh-contact-outer) {
  background: transparent !important;
}

#hh-contact-outer {
  background: transparent !important;
}

/* Only an explicit flat=1 Contact variant removes its inner card. Default
 * global contact forms retain a readable rounded surface over photo sections. */
html.flat:has(#hh-contact-outer) .hh-card,
body.flat:has(#hh-contact-outer) .hh-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Legacy informational embeds use a generic .wrap/.hh-card shell. Normalize
 * those outer canvases as well; contact variants retain their own narrower
 * readable card rules inside the 1300px host. */
.wrap,
body > .hh-card {
  box-sizing: border-box;
  width: min(100%, var(--hh-tool-max)) !important;
  max-width: var(--hh-tool-max) !important;
  margin-inline: auto !important;
}

/* Keep tool padding responsive and prevent the universal shell from creating
 * horizontal overflow inside WordPress embeds. */
#advantage-app,
.app,
.hh-shell,
#homevalue-outer,
#compval-outer,
#qual-outer,
#hh-contact-outer,
#hh-booking-outer {
  box-sizing: border-box;
  padding-inline: clamp(12px, 2vw, 24px);
}

@media (max-width: 767px) {
  #advantage-app,
  .app,
  .hh-shell,
  #homevalue-outer,
  #compval-outer,
  #qual-outer,
  #hh-contact-outer,
  #hh-booking-outer {
    padding-inline: 12px;
  }
}

/* Cloudflare/Google verification must stay inside the intake canvas. The
 * widgets render fixed-width iframes, so constrain the mount before the
 * provider paints it and clip only the widget's own overflow. */
:is(.cf-turnstile, .g-recaptcha, .hh-recaptcha, [id*="turnstile" i], [id*="recaptcha" i]) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
:is(.cf-turnstile, .g-recaptcha, .hh-recaptcha, [id*="turnstile" i], [id*="recaptcha" i]) iframe {
  max-width: 100% !important;
}
.aa-booking-turnstile {
  width: 300px !important;
  max-width: 300px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
@media (max-width: 360px) {
  :is(.g-recaptcha, .hh-recaptcha, [id*="recaptcha" i]) iframe {
    transform: scale(.88);
    transform-origin: left top;
  }
  :is(.g-recaptcha, .hh-recaptcha, .aa-booking-turnstile, [id*="recaptcha" i]) > div:first-child {
    transform: scale(.88);
    transform-origin: left top;
  }
}

/* Compact tool action pills while the user scrolls upward. The expanded
 * state remains the larger, easier-to-scan conversion treatment on downward
 * movement; both states stay anchored to the viewport bottom. */
@media (max-width: 979px) {
  .hh-stickybar.is-scroll-compact {
    min-height: 44px !important;
    padding: 2px 6px env(safe-area-inset-bottom) !important;
    box-shadow: 0 5px 14px rgba(10,34,57,.13) !important;
  }
  .hh-stickybar.is-scroll-compact .row {
    gap: 4px;
  }
  .hh-stickybar.is-scroll-compact .row a,
  .hh-stickybar.is-scroll-compact .row button {
    min-height: 38px !important;
    padding-inline: 10px !important;
    font: 600 12px/1 var(--hh-font-body) !important;
  }
  .hh-stickybar.is-scroll-compact .hh-dock-icon {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
  }
}