/* ==========================================================================
   Himparadise — Base: reset, typography, layout primitives, buttons
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--hp-font-ui);
  font-size: var(--hp-fs-body);
  line-height: var(--hp-lh-body);
  color: var(--hp-ink);
  background: var(--hp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--hp-font-display);
  letter-spacing: var(--hp-tracking-display);
  line-height: var(--hp-lh-tight);
  color: var(--hp-ink);
  margin: 0 0 .5em;
  font-weight: 700;
}
/* Headings inside dark hero bands (which set color:#fff on the container) must follow that light
   colour instead of the global dark-ink default above — otherwise they render dark-on-dark (invisible). */
.hp-help-hero :is(h1, h2, h3, h4),
.hp-about-hero :is(h1, h2, h3, h4),
.hp-legal-hero :is(h1, h2, h3, h4) { color: inherit; }
h1 { font-size: var(--hp-fs-h1); }
h2 { font-size: var(--hp-fs-h2); }
h3 { font-size: var(--hp-fs-card-title); }

p { margin: 0 0 1em; }
a { color: var(--hp-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--hp-link); outline-offset: 2px; border-radius: 4px; }
/* Bare <select>s inside the search / reserve fields have their chrome stripped, so the global
   focus ring above painted a mismatched blue box floating inside the field. Move the focus indicator
   to the wrapping field (on-shape, accessible) and drop the box on the inner control. */
.hp-hsearch__field select:focus-visible,
.hp-sb-field select:focus-visible,
.hp-stay-bar select:focus-visible { outline: none; }
.hp-hsearch__field:focus-within,
.hp-sb-field:focus-within,
.hp-stay-bar .hp-sb-btn:focus-within { box-shadow: 0 0 0 2px var(--hp-link); }
.hp-sort select:focus-visible { outline: none; border-color: var(--hp-link); box-shadow: 0 0 0 3px rgba(28,95,212,.15); }

/* ---- Layout ---- */
.hp-container { width: 100%; max-width: var(--hp-container); margin-inline: auto; padding-inline: var(--hp-gutter); }
.hp-container--wide { max-width: var(--hp-container-wide); }
.hp-section { padding-block: clamp(40px, 6vw, 88px); }
.hp-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.hp-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--hp-z-toast);
  background: var(--hp-ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.hp-skip-link:focus { left: 0; }

/* ---- Eyebrow / labels ---- */
/* Icons carry only a viewBox, so give them a sensible default size (per-context rules override this). */
.hp-icon { width: 20px; height: 20px; flex: 0 0 auto; display: inline-block; vertical-align: middle; }

.hp-eyebrow {
  font-size: var(--hp-fs-label); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--hp-muted);
}

/* ---- Buttons ---- */
.hp-btn {
  --_bg: var(--hp-ink); --_fg: #fff; --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: 11px 20px; border: 1px solid var(--_bd);
  background: var(--_bg); color: var(--_fg);
  border-radius: var(--hp-r-input); font-weight: 600; font-size: var(--hp-fs-ui);
  line-height: 1; text-decoration: none; transition: background var(--hp-t), transform var(--hp-t-fast), box-shadow var(--hp-t);
}
.hp-btn:hover { text-decoration: none; filter: brightness(.94); }
.hp-btn:active { transform: translateY(1px); }
.hp-btn[disabled], .hp-btn.is-disabled { opacity: .5; pointer-events: none; }

.hp-btn--primary { --_bg: var(--hp-saffron); --_fg: var(--hp-ink); }
.hp-btn--ink { --_bg: var(--hp-ink); --_fg: #fff; }
.hp-btn--ghost { --_bg: transparent; --_fg: var(--hp-ink); --_bd: var(--hp-line-16); }
.hp-btn--ghost:hover { filter: none; background: var(--hp-line-08); }
.hp-btn--whatsapp { --_bg: var(--hp-whatsapp); --_fg: var(--hp-whatsapp-ink); }
.hp-btn--danger { --_bg: var(--hp-danger); --_fg: #fff; }
.hp-btn--block { width: 100%; }
.hp-btn--lg { min-height: 52px; padding: 15px 26px; font-size: var(--hp-fs-lead); }

/* ---- Pills / chips ---- */
.hp-pill {
  display: inline-flex; align-items: center; gap: .4em; padding: 6px 12px;
  border-radius: var(--hp-r-pill); background: var(--hp-line-08); color: var(--hp-text-2);
  font-size: var(--hp-fs-label); font-weight: 600; line-height: 1;
}
.hp-pill--green { background: var(--hp-green-tint); color: var(--hp-green-d); }
.hp-pill--saffron { background: var(--hp-saffron-tint); color: var(--hp-saffron-ink); }

/* ---- Cards ---- */
.hp-card {
  background: var(--hp-white); border-radius: var(--hp-r-card);
  box-shadow: var(--hp-shadow-card); overflow: hidden;
  transition: transform var(--hp-t), box-shadow var(--hp-t);
}
.hp-card--lift:hover { transform: translateY(-4px); box-shadow: var(--hp-shadow-card-hover); }

/* ---- Forms ---- */
.hp-field { display: flex; flex-direction: column; gap: 6px; }
.hp-label { font-size: var(--hp-fs-label); font-weight: 600; color: var(--hp-text-2); }
.hp-input, .hp-select, .hp-textarea {
  width: 100%; min-height: 44px; padding: 11px 14px; font: inherit; color: var(--hp-ink);
  background: var(--hp-white); border: 1px solid var(--hp-line-16); border-radius: var(--hp-r-input);
  transition: border-color var(--hp-t), box-shadow var(--hp-t);
}
.hp-input:focus, .hp-select:focus, .hp-textarea:focus {
  outline: none; border-color: var(--hp-link); box-shadow: 0 0 0 3px rgba(28, 95, 212, .15);
}
.hp-input--error { border-color: var(--hp-danger); }
.hp-error-msg { color: var(--hp-danger); font-size: var(--hp-fs-label); }

/* ---- Utilities ---- */
.hp-grid { display: grid; gap: var(--hp-sp-6); }
.hp-flex { display: flex; }
.hp-hide { display: none !important; }
[hidden] { display: none !important; }

/* ==== Responsive audit fixes (2026-09-26) ==== */
/* overflow-x:clip on BODY alone doesn't stop the document itself from scrolling —
   the root (html) still grows to the widest fixed/clipped child (e.g. the marquee),
   which on phones leaves a ~15px gap on the right and makes the fixed header size to
   that wider viewport. Clipping html too pins the layout to the real viewport width. */
html, body { overflow-x: clip; max-width: 100%; }
.hp-input, .hp-select, .hp-textarea { font-size: max(16px, 1rem); } /* stop iOS focus auto-zoom */

/* Google-rating chips that now link to the Google Business Profile — keep them looking like chips
   (no link underline), with a gentle hover/focus cue instead. */
a.hp-trust, a.hp-rating-badge2, a.hp-rating-pill, a.hp-footer__google {
  cursor: pointer; text-decoration: none; transition: opacity var(--hp-t, .2s), box-shadow var(--hp-t, .2s), transform var(--hp-t-fast, .12s);
}
a.hp-trust:hover, a.hp-rating-badge2:hover, a.hp-rating-pill:hover, a.hp-footer__google:hover { text-decoration: none; opacity: .86; }
a.hp-rating-pill:hover { transform: translateY(-1px); }
a.hp-trust:focus-visible, a.hp-rating-badge2:focus-visible, a.hp-rating-pill:focus-visible, a.hp-footer__google:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; opacity: 1; }