/* =====================================================================
   HOOD'S POOL SERVICE — BASE RESET & GLOBAL STYLES
   For Sitejet: paste after tokens.css in Custom CSS
   Scoped with .hps- prefix to avoid conflicts with Sitejet's own styles
   ===================================================================== */

/* -----------------------------------------------------------------
   RESET
   ----------------------------------------------------------------- */
.hps-root *,
.hps-root *::before,
.hps-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hps-root html {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--hps-space-16);
  scroll-padding-bottom: 100px;
}

/* Reset the UA body margin on documents that wrap the design kit.
   Scoped via :has() so a shared/Sitejet body is left untouched. */
body:has(> .hps-root) {
  margin: 0;
}

.hps-root body {
  min-height: 100dvh;
  line-height: var(--hps-leading-normal);
  font-family: var(--hps-font-body);
  font-size: var(--hps-text-base);
  color: var(--hps-text);
  background-color: var(--hps-bg);
  padding-bottom: 100px;
}

/* -----------------------------------------------------------------
   TYPOGRAPHY BASE
   ----------------------------------------------------------------- */
.hps-root h1,
.hps-root h2,
.hps-root h3,
.hps-root h4,
.hps-root h5,
.hps-root h6 {
  font-family: var(--hps-font-heading);
  font-weight: var(--hps-weight-bold);
  line-height: var(--hps-leading-tight);
  letter-spacing: var(--hps-tracking-tight);
  text-wrap: balance;
}

.hps-root h1 { font-size: var(--hps-text-3xl); }
.hps-root h2 { font-size: var(--hps-text-2xl); }
.hps-root h3 { font-size: var(--hps-text-xl); }
.hps-root h4 { font-size: var(--hps-text-lg); }

.hps-root p {
  text-wrap: pretty;
  max-width: 72ch;
}

.hps-root a {
  color: var(--hps-accent);
  text-decoration: none;
  transition: color var(--hps-transition-fast);
}

.hps-root a:hover {
  color: var(--hps-accent-hover);
}

.hps-root img,
.hps-root picture,
.hps-root video,
.hps-root svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.hps-root ul,
.hps-root ol {
  list-style: none;
}

.hps-root input,
.hps-root button,
.hps-root textarea,
.hps-root select {
  font: inherit;
  color: inherit;
}

.hps-root button {
  cursor: pointer;
  background: none;
  border: none;
}

/* -----------------------------------------------------------------
   FOCUS STATES — accessibility
   ----------------------------------------------------------------- */
.hps-root :focus-visible {
  outline: 2px solid var(--hps-accent);
  outline-offset: 3px;
  border-radius: var(--hps-radius-sm);
}

.hps-root ::selection {
  background: rgba(0, 180, 216, 0.2);
  color: var(--hps-text);
}

/* -----------------------------------------------------------------
   SELECTION
   ----------------------------------------------------------------- */
.hps-root ::selection {
  background: rgba(0, 180, 216, 0.25);
  color: var(--hps-text);
}

/* -----------------------------------------------------------------
   REDUCED MOTION
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hps-root *,
  .hps-root *::before,
  .hps-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------
   TRANSITIONS ON INTERACTIVE ELEMENTS
   ----------------------------------------------------------------- */
.hps-root a,
.hps-root button,
.hps-root [role='button'],
.hps-root input,
.hps-root textarea,
.hps-root select {
  transition:
    color var(--hps-transition-fast),
    background-color var(--hps-transition-fast),
    border-color var(--hps-transition-fast),
    box-shadow var(--hps-transition-fast),
    transform var(--hps-transition-fast);
}

/* -----------------------------------------------------------------
   UTILITY CLASSES
   ----------------------------------------------------------------- */
.hps-container {
  width: 100%;
  max-width: var(--hps-container-max);
  margin-inline: auto;
  padding-inline: var(--hps-container-padding);
}

.hps-text-center { text-align: center; }
.hps-text-left { text-align: left; }
.hps-text-right { text-align: right; }

.hps-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------------------------
   SECTION SPACING
   ----------------------------------------------------------------- */
.hps-section {
  padding-block: var(--hps-section-padding);
}

.hps-section--compact {
  padding-block: var(--hps-section-padding-sm);
}

/* iPhone safe areas — body padding when sticky bar is visible */
@media (max-width: 768px) {
  body.has-contact-bar {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

/* iOS input zoom prevention */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="file"],
  input[type="checkbox"],
  select,
  textarea {
    font-size: 16px !important;
  }
}