/* ==========================================================================
   Wilbraham Bounce House Rentals — call-to-book static site
   Mobile-first. Every CTA routes to the phone.

   Look: summer lawn. Deep pine green, warm orange and cream. The fifth
   palette in the family and deliberately unlike the others — Hartford is
   indigo/orange, East Longmeadow carnival teal/coral, the water site pool
   blue/cyan, Agawam grape/magenta. Green reads outdoors and big-yard, which
   is this site's whole pitch.
   ========================================================================== */

:root {
  --ink:        #14261a;
  --ink-soft:   #3f5c48;
  --muted:      #6c8574;

  --brand:      #14532d;   /* pine */
  --brand-dk:   #0b3a1e;
  --brand-lt:   #dcf0e3;

  --pop:        #ea580c;   /* warm orange - primary CTA */
  --pop-dk:     #c2410c;
  --sun:        #fbbf24;   /* amber trim */

  --paper:      #ffffff;
  --cream:      #fbfdf9;
  --wash:       #eef7f0;
  --line:       #dceade;

  --radius:     12px;      /* squarest of the family */
  --radius-sm:  8px;
  --shadow:     0 2px 4px rgba(20,38,26,.05), 0 12px 28px rgba(20,38,26,.10);
  --shadow-lg:  0 8px 20px rgba(20,38,26,.10), 0 24px 56px rgba(20,38,26,.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(255,250,240,.95);
  backdrop-filter: blur(10px);
}

/* Carnival ribbon under the header — the one purely decorative element on the
   site, and the fastest signal that this isn't a template. */
.site-header::after {
  content: "";
  display: block;
  height: 6px;
  background: repeating-linear-gradient(
    135deg,
    var(--pop) 0 14px,
    var(--sun) 14px 28px
  );
}
.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;
}

/* Scalloped valance along the bottom, like the edge of a circus tent. Each
   scallop is a cream circle poking up out of the page background, tiled. */
.hero::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 18px;
  background:
    linear-gradient(90deg, var(--cream) 50%, transparent 0) repeat-x,
    linear-gradient(180deg, transparent 50%, var(--cream) 0);
  background-size: 26px 18px, 100% 100%;
}
.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: 4px solid var(--sun);   /* carnival 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(--pop); }

.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; }

/* --------------------------------------------------------------- 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; }
}