/* ==========================================================================
   Water Slide Rentals Western MA — call-to-book static site
   Mobile-first. Every CTA routes to the phone.

   Look: poolside. Deep water navy, bright cyan, sunshine yellow on a cool
   near-white. Deliberately unlike its sister sites — Hartford is indigo and
   orange, East Longmeadow is carnival teal and coral on cream. Three sites
   for one company should not read as one template three times.
   ========================================================================== */

:root {
  --ink:        #0d2438;   /* deep water navy */
  --ink-soft:   #3b5b73;
  --muted:      #6b8296;

  --brand:      #0a4d76;   /* deep pool blue */
  --brand-dk:   #072f4a;
  --brand-lt:   #d6ecf8;

  --pop:        #00a8e8;   /* bright cyan — primary CTA */
  --pop-dk:     #0086ba;
  --sun:        #ffd23f;   /* sunshine trim */

  --paper:      #ffffff;
  --cream:      #f4fafd;   /* cool near-white page background */
  --wash:       #e8f4fb;   /* alternating band */
  --line:       #d3e6f2;   /* cool hairline */

  --radius:     14px;      /* crisper than the carnival site's 20px */
  --radius-sm:  9px;
  --shadow:     0 2px 4px rgba(13,36,56,.05), 0 12px 28px rgba(13,36,56,.10);
  --shadow-lg:  0 8px 20px rgba(13,36,56,.10), 0 24px 56px rgba(13,36,56,.18);

  --wrap:       1180px;
  --call-bar-h: 0px;

  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  padding-bottom: var(--call-bar-h);
}

img { max-width: 100%; display: block; }
a { color: var(--brand); }

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p  { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.wrap.narrow { max-width: 780px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px;
}
.skip:focus { left: 0; }

:where(a, button, summary):focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------- buttons  */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-weight: 700; font-size: 1.05rem;
  padding: 15px 26px;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn-call {
  background: var(--pop);
  color: #fff;
  box-shadow: 0 6px 0 var(--pop-dk), var(--shadow);
  flex-wrap: wrap;
}
.btn-call:hover { background: #ff6a33; }
.btn-call svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn-call strong {
  font-size: 1.15rem; letter-spacing: .01em;
  padding-left: 10px; margin-left: 2px;
  border-left: 1px solid rgba(255,255,255,.45);
}

.btn-ghost {
  background: transparent; color: var(--brand);
  border-color: var(--line); background: var(--paper);
}
.btn-ghost:hover { border-color: var(--brand); background: var(--brand-lt); }

/* ---------------------------------------------------------------- header  */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244,250,253,.95);
  backdrop-filter: blur(10px);
}

/* Thin cyan rule under the header. Restrained on purpose — the wave at the
   bottom of the hero is this site's one flourish. */
.site-header::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--pop) 55%, var(--sun) 100%);
}
.header-inner {
  display: flex; align-items: center; gap: 16px;
  min-height: 74px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand-mark { font-size: 1.9rem; line-height: 1; }
.brand-text { display: flex; flex-direction: column; }
.brand-text strong { font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; }
.brand-text em { font-style: normal; font-size: .78rem; color: var(--pop); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 42px; padding: 0 10px;
  background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

.site-nav { display: none; width: 100%; }
.site-nav.open { display: block; }
.site-nav ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; }
.site-nav a {
  display: block; padding: 12px 4px;
  color: var(--ink); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.site-nav a[aria-current="page"] { color: var(--pop); }

.header-call { display: none; padding: 11px 18px; font-size: .95rem; }
.header-call strong { font-size: 1rem; }

@media (min-width: 1040px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; width: auto; }
  .site-nav ul { flex-direction: row; gap: 4px; margin: 0; }
  .site-nav a { border: 0; padding: 8px 11px; font-size: .93rem; border-radius: 8px; }
  .site-nav a:hover { background: var(--brand-lt); }
  .header-call { display: inline-flex; }
}

/* ------------------------------------------------------------------ hero  */

.hero {
  background:
    radial-gradient(1000px 460px at 78% -12%, rgba(255,194,60,.34), transparent 60%),
    linear-gradient(168deg, var(--brand) 0%, var(--brand-dk) 68%, #073b41 100%);
  color: #fff;
  padding: 56px 0 84px;
  position: relative; overflow: hidden;
}

/* Wave along the bottom of the hero. Two offset circles per tile — one cut
   up out of the page colour, one pushed down — which reads as a rolling
   waterline rather than the scalloped tent edge on the sister site. */
.hero::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 30px;
  background:
    radial-gradient(circle at 15px 34px, var(--cream) 20px, transparent 21px) repeat-x,
    radial-gradient(circle at 45px 6px,  transparent 20px, var(--cream) 21px) repeat-x;
  background-size: 60px 30px;
}
.hero-inner { display: grid; gap: 36px; position: relative; z-index: 1; }

.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sun); margin-bottom: 14px;
}
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero h1 span { color: var(--sun); }
.hero .lede { font-size: 1.14rem; color: #d9d7f5; max-width: 34em; margin-bottom: 26px; }
.hero-note { margin: 16px 0 0; font-size: .9rem; color: #b6b3e0; }

.trust {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
}
.trust li { font-size: .87rem; color: #cfcdf0; display: flex; align-items: center; gap: 7px; }
.trust li::before { content: "✓"; color: var(--sun); font-weight: 800; }

.hero-art img {
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  border: 5px solid rgba(255,255,255,.14);
  width: 100%; height: auto;
}

@media (min-width: 900px) {
  .hero { padding: 76px 0 92px; }
  .hero-inner { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 52px; }
}

/* ------------------------------------------------------------- page hero  */

.page-hero {
  background: linear-gradient(168deg, var(--brand) 0%, var(--brand-dk) 100%);
  color: #fff; padding: 48px 0 52px; text-align: center;
}
.page-hero h1 { color: #fff; }
.page-hero .lede { color: #d3d1f2; max-width: 44em; margin: 0 auto 26px; font-size: 1.08rem; }

.jump { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.jump a {
  color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem;
  padding: 9px 18px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
}
.jump a:hover { background: rgba(255,255,255,.12); }

/* --------------------------------------------------------------- section  */

.section { padding: 56px 0; }
.section-alt { background: var(--wash); }

.section-head { text-align: center; max-width: 46em; margin: 0 auto 36px; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin: 0; }

/* ----------------------------------------------------------------- cards  */

.grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--pop);   /* waterline trim */
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-top-color: var(--sun); }

.card-img { position: relative; aspect-ratio: 4 / 3; background: var(--brand-lt); }
.card-img img { width: 100%; height: 100%; object-fit: cover; }

.card-tag {
  position: absolute; top: 10px; left: 10px;
  background: rgba(18,16,58,.86); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}

.card-body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: 10px; font-size: 1.05rem; }

.specs { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.specs li {
  font-size: .74rem; color: var(--ink-soft); background: var(--wash);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
}

.card-actions {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
}

/* Both card actions carry vertical padding so they clear the 44px minimum
   touch target on phones, where these sit inside a scrolling grid. */
.card-cta {
  font-weight: 700; font-size: .95rem; color: var(--pop); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px;
}
.card-cta::before { content: "\260E"; font-size: .95em; }
.card-cta:hover { text-decoration: underline; }

.card-book {
  font-weight: 600; font-size: .88rem; color: var(--brand);
  text-decoration: none;
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.card-book span, .card-book { border-bottom-color: transparent; }
.card-book:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- tiles  */

.tiles { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.tile {
  text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--paper); display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tile img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.tile-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.tile-body p { color: var(--muted); font-size: .94rem; flex: 1; }
.tile-link { color: var(--pop); font-weight: 700; font-size: .93rem; }

/* ----------------------------------------------------------- theme chips  */

/* The homepage theme wall. Small on purpose — this block exists to show that
   the inventory is deep, not to sell any one castle, so it packs tight and
   every chip lands on the full bounce-house page. */
.chips {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  margin-bottom: 30px;
}
.chip {
  text-decoration: none; color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.chip:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--sun); }
.chip img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.chip span {
  padding: 9px 10px;
  font-size: .82rem; font-weight: 600; line-height: 1.3;
  text-align: center;
}

/* ------------------------------------------------------------ size cards  */

.size-row { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.size-card {
  background: var(--paper); border: 1px solid var(--line);
  border-top: 4px solid var(--pop);
  border-radius: var(--radius); padding: 24px;
}
.size-card p { color: var(--muted); font-size: .96rem; }

/* ----------------------------------------------------------------- steps  */

.steps { list-style: none; counter-reset: s; margin: 0 0 32px; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.steps li { text-align: center; padding: 0 10px; }
.steps span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 14px;
  background: var(--pop); color: #fff; font-weight: 800; font-size: 1.3rem;
  border-radius: 50%; box-shadow: 0 4px 0 var(--pop-dk);
}
.steps p { color: var(--muted); font-size: .96rem; margin: 0; }

/* ----------------------------------------------------------------- towns  */

.towns { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.towns li {
  background: var(--wash); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-size: .92rem; color: var(--ink-soft);
}
.towns .town-primary { background: var(--brand-lt); border-color: #c9c6f2; color: var(--brand); font-weight: 700; }
.towns.big li { font-size: 1rem; padding: 10px 20px; }
.note { color: var(--muted); }

/* ------------------------------------------------------------------- faq  */

.faq-item { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; background: var(--paper); }
.faq-item summary {
  cursor: pointer; padding: 18px 20px; font-weight: 700; font-size: 1.04rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--pop); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-body { padding: 16px 20px 4px; }
.faq-body p { color: var(--ink-soft); }

/* ------------------------------------------------------------- cta band   */

.cta-band {
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(255,194,60,.22), transparent 62%),
    linear-gradient(160deg, var(--brand) 0%, var(--brand-dk) 100%);
  color: #fff; text-align: center; padding: 60px 0;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #cdcbf0; max-width: 40em; margin-inline: auto; }
.cta-note { font-size: .88rem; color: #a9a6d8; margin-top: 18px; }
.cta-band .btn-call { margin-top: 12px; }

/* ---------------------------------------------------------------- footer  */

.site-footer { background: var(--ink); color: #b9b6dd; padding: 52px 0 0; font-size: .93rem; }
.site-footer h3 { color: #fff; font-size: 1.1rem; }
.site-footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 14px; }
.site-footer a { color: #b9b6dd; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }

.footer-grid { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); padding-bottom: 40px; }
.footer-phone { margin: 14px 0 8px; }
.footer-phone a { color: var(--sun); font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; }

.footer-legal { border-top: 1px solid rgba(255,255,255,.1); padding-block: 20px; }
.footer-legal p { margin: 0; font-size: .84rem; color: #837fb0; }

/* ------------------------------------------------- sticky mobile callbar  */

.call-bar {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: flex; align-items: stretch;
  background: var(--pop);
  box-shadow: 0 -4px 20px rgba(18,16,58,.28);
  padding-bottom: env(safe-area-inset-bottom);
}
.call-bar a { text-decoration: none; color: #fff; }

.call-bar-call {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 11px 16px;
}
.call-bar-label { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; opacity: .92; }
.call-bar-call strong { font-size: 1.32rem; font-weight: 800; letter-spacing: .01em; }

.call-bar-text {
  flex: 0 0 88px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: rgba(0,0,0,.17);
  border-left: 1px solid rgba(255,255,255,.22);
}
.call-bar-text svg { width: 22px; height: 22px; fill: currentColor; }
.call-bar-text span { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

@media (min-width: 1040px) { .call-bar { display: none; } }
@media (max-width: 1039px) { body { --call-bar-h: 74px; } }

/* ------------------------------------------------------------ chat widget  */

/* The vendor bundle (cdn.chatwidgets.net) mounts a full-viewport fixed overlay
   at #widget-root with pointer-events:none and floats its launcher bottom-right
   inside it. It does not block the page, but it lands directly on top of our
   sticky call bar on mobile. Lift the launcher clear of the bar.

   Offset is derived from --call-bar-h so the two stay in sync if the bar height
   changes. Do NOT override #widget-root's own height — it correctly uses dvh. */
@media (max-width: 1039px) {
  .widget-fab-wrapper {
    transform: translateY(calc(-1 * var(--call-bar-h) - 10px));
  }
}

/* ------------------------------------------------- pick-up rules + links  */

/* Numbered policy list on pickup.html. Deliberately roomy — people skim these
   and then get surprised by the late fee, so each rule gets its own block. */
.rules { counter-reset: rule; list-style: none; margin: 0 0 26px; padding: 0; }
.rules li {
  counter-increment: rule;
  position: relative;
  padding: 16px 18px 16px 62px;
  margin-bottom: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.rules li::before {
  content: counter(rule);
  position: absolute;
  left: 18px;
  top: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-lt);
  color: var(--brand);
  font-weight: 700;
  font-size: .95rem;
  display: grid;
  place-items: center;
}

/* "Often rented with" row at the foot of a category page. */
.related-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ------------------------------------------------------ setup requirements */

/* One block per requirement on setup.html. Left cyan rule rather than a
   numbered circle — these are things to check, not steps in order. */
.reqs { margin-bottom: 26px; }
.req {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--pop);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.req h3 { margin-bottom: 6px; color: var(--brand); }
.req p { margin: 0; color: var(--ink-soft); }

/* --------------------------------------------------------------- motion   */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ----------------------------------------------------------------- print  */

@media print {
  .site-header, .call-bar, .cta-band, .nav-toggle { display: none !important; }
}