/* Soft Play for Sale - modern refresh
   Keep the orange->red gradient background for continuity
*/

:root{
  --bg1: rgba(247,186,94,1);
  --bg2: rgba(245,12,43,1);

  --text: #2b2b2b;
  --muted: #5a5a5a;

  --card: #ffffff;
  --border: rgba(0,0,0,.10);
  --shadow: 0 14px 40px rgba(0,0,0,.18);

  --brand-red: #b00018; /* echoes your H2 colour */
  --radius: 18px;
  --radius2: 22px;
  --font-ui: "Baloo 2", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

}

/* Reset-ish */
*{ box-sizing:border-box; }
html{ overflow-y: scroll; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--text);
  background: linear-gradient(to right, var(--bg1) 0%, var(--bg2) 100%);
  -webkit-text-size-adjust: 100%;
}

img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

.page{
  min-height: 100vh;
}

/* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 10px 14px 8px 14px;

  /* remove the glass cover */
  backdrop-filter: none;
  background: transparent;
  border-bottom: 0;
}


.site-header,
.site-nav,
.nav-link,
.brand{
  font-family: var(--font-ui);
}

.header-inner{
  max-width: 1100px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 18px;
  padding: 10px 12px;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
  position: relative;
}

/* Desktop: stronger header background once scrolled */
@media (min-width: 721px){

  .header-inner.is-scrolled{
    background: rgba(255,255,255,.30);   /* stronger glass */
    backdrop-filter: blur(14px);
    border-color: rgba(255,255,255,.35);
    box-shadow: 0 18px 44px rgba(0,0,0,.28);

  .header-inner.is-scrolled .nav-link{
    background: rgba(255,255,255,.32);
  }
}

}


.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
}
.brand-logo{
  width: min(360px, 72vw);
  height:auto;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.25));
}

.header-cta{
  display:flex;
  align-items:center;
  gap: 10px;
}

.cta-phone{
  width: 52px;
  height: 52px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  text-decoration:none;
}
.cta-phone:hover{ text-decoration:none; }
.cta-phone-icon{
  width: 34px;
  height: auto;
}

/* Mobile nav toggle */
.nav-toggle{
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  cursor:pointer;
  display:none;
  padding: 0;
}
.nav-toggle span{
  display:block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background: #0b1f3a;   /* very dark blue */
  border-radius: 2px;
}


/* Nav */
.site-nav{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
}


.nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration:none;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}
.nav-link:hover{
  text-decoration:none;
  background: rgba(255,255,255,.26);
}
.nav-link--contact{
  background: rgba(255,255,255,.92);
  color: #1f1f1f;
  border-color: rgba(255,255,255,.65);
}
.nav-link--contact:hover{
  background: #fff;
}

/* Contact strip — solid, high-contrast */
.contact-strip {
  background: linear-gradient(
    135deg,
    #700d6a 0%,
    #9b1c87 45%,
    #fdc945 100%
  );
  opacity: 1;                 /* force solid */
  backdrop-filter: none;      /* kill glass blur */
  -webkit-backdrop-filter: none;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}


.contact-strip a{
  font-family: var(--font-ui); /* Baloo 2 */
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #fdc945;
  text-decoration: none;
}

.contact-strip strong{
  font-weight: 800;
}

.contact-strip a:hover{
  text-decoration: underline;
}


/* Main shell card */
.shell{
  max-width: 1100px;
  margin: 8px auto 34px auto;
  border-radius: var(--radius2);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
}

/* Hero with optional balls background */
.hero{
  position: relative;
  padding: 44px 22px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.22)),
    url("https://www.bouncycastlesales.com/images/large/balls.jpg");
  background-size: cover;
  background-position: center;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.10), rgba(0,0,0,0) 55%),
    linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.10));
  pointer-events:none;
}

.hero-content{
  position:relative;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  padding: 18px 16px;
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
}


.hero h1{
  font-family: "Bangers", system-ui, sans-serif;
  letter-spacing: .06em;
  font-weight: 400;
  margin: 0 0 12px 0;
  font-size: clamp(28px, 4vw, 46px);
  text-shadow: 0 14px 30px rgba(0,0,0,.55);
}

.hero-lead{
  margin: 0 auto 18px auto;
  max-width: 58ch;
  color: rgba(255,255,255,.96);
  font-size: 16px;
  line-height: 1.65;
  text-shadow: 0 10px 22px rgba(0,0,0,.55);
}

.hero-actions{
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.35);
}
.btn:hover{ text-decoration:none; transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }

.btn-primary{
  background: rgba(255,255,255,.95);
  color: #1d1d1d;
}
.btn-ghost{
  background: rgba(255,255,255,.14);
  color: #fff;
}

/* Sections */
.section{
  padding: 28px 18px 8px 18px;
}

.section-title{
  font-family: "Bangers", system-ui, sans-serif;
  color: var(--brand-red);
  font-size: clamp(22px, 2.5vw, 30px);
  letter-spacing: .08em;
  text-align: center;
  margin: 0 0 16px 0;
}

/* Grid cards */
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 0 6px 18px 6px;
}

.card{
  display:flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow:hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  transition: transform .12s ease, box-shadow .12s ease;
  text-decoration:none;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(0,0,0,.14);
  text-decoration:none;
}

.card-media{
  background: #f3f3f3;
}
.card-media img{
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.card-body{
  padding: 14px 14px 16px 14px;
  text-align:left;
}

.card-body h3{
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
}
.card-body p{
  margin: 0 0 10px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .01em;
}

.card-link{
  font-weight: 800;
  color: var(--brand-red);
}

/* Trust strip */
.trust{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 18px 26px 18px;
  background: linear-gradient(180deg, rgba(176,0,24,.06), rgba(0,0,0,0));
  border-top: 1px solid rgba(0,0,0,.06);
}

.trust-item{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 14px 14px;
  background: #fff;
  text-align:center;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}
.trust-item strong{
  display:block;
  font-weight: 900;
  margin-bottom: 4px;
}
.trust-item span{
  display:block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

/* Footer */
.site-footer{
  padding: 18px 14px 28px 14px;
}
.footer-inner{
  max-width: 1100px;
  margin: 0 auto;
  text-align:center;
  color:#fff;
}
.footer-logo{
  width: 200px;
  margin: 0 auto 10px auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.site-footer p{
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.65;
}
.site-footer a{
  color:#fff;
  font-weight: 800;
}

/* Responsive */
@media (max-width: 980px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Keep logo sensible everywhere */
.brand-logo{
  width: min(360px, 72vw);
  height: auto;
}

/* Ensure header can lay out properly */
.header-inner{
  position: relative; /* anchor for absolute dropdown */
  display: flex;
  align-items: center;
  gap: 14px;
}



@media (max-width: 720px){

  .header-inner{
    flex-wrap: nowrap;
    align-items: center; 
    background: transparent;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  

  .contact-strip{
    order: 3;                     /* below logo + toggle */
    width: 100%;
    margin: 10px 0 0 0;
    justify-content: center;
    padding: 12px 14px;
  }

  .contact-strip a{
    font-size: 17px;
  }

  .nav-toggle{ display:block; }

 .site-nav{
    display: none;

    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;

    padding: 14px 12px;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    z-index: 100;
  }

  .site-nav.is-open{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .nav-link{
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    background: rgba(255,255,255,.85);
    color: #1f1f1f;
    border: 1px solid rgba(255,255,255,.6);
  }

  .grid{ grid-template-columns: 1fr; }
  .trust{ grid-template-columns: 1fr; }
  .hero{ padding: 36px 16px; }

  .contact-strip{
    transition: transform .22s ease, opacity .22s ease;
    will-change: transform, opacity;
  }

  .contact-strip.is-hidden{
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
  }

  .site-nav{
    transform-origin: top right;
    animation: mobileMenuIn .18s ease-out;
  }

  @keyframes mobileMenuIn{
    from{
      opacity: 0;
      transform: translateY(-6px) scale(.98);
    }
    to{
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }


/* Mobile header layout: 2 rows */
  .header-inner{
    display: grid;
    grid-template-columns: 1fr auto;  /* logo | hamburger */
    grid-template-areas:
      "brand toggle"
      "phone phone";
    align-items: center;
    gap: 10px;
  }

  .brand{ grid-area: brand; }
  .nav-toggle{ grid-area: toggle; justify-self: end; }

  /* Phone strip becomes full width under the top row */
  .contact-strip{
    grid-area: phone;
    width: 100%;
    margin: 4px 0 0 0;
    justify-content: center;
  }

  /* Make sure logo doesn't shrink to nothing */
  .brand-logo{
    width: min(320px, 68vw);
  }


}


/* If you still use old selects elsewhere, keep them tidy */
.select, .largeselect, .smallselect{
  border: 1px solid rgba(0,0,0,.20);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}
.select, .largeselect{ width: min(320px, 92vw); }
.smallselect{ width: min(180px, 60vw); }
.select:focus, .largeselect:focus, .smallselect:focus{
  outline: none;
  border-color: rgba(176,0,24,.55);
  box-shadow: 0 0 0 4px rgba(176,0,24,.16);
}

/* =====================================================
   Primary action buttons (cart / forms)
   ===================================================== */

.button,
.buttoncart,
input.button,
input.buttoncart {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.65rem 1.1rem;
  min-height: 42px;

  font-family: "Baloo 2", "Open Sans", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.2px;

  color: #0f1b3d;
  background: linear-gradient(
    180deg,
    #ffd86a 0%,
    #fdc945 100%
  );

  border: 2px solid #700d6a;
  border-radius: 12px;

  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;

  box-shadow:
    0 4px 0 #700d6a,
    0 6px 12px rgba(0,0,0,.18);

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background .12s ease,
    color .12s ease;
}

.button:active,
.buttoncart:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 #700d6a,
    0 3px 6px rgba(0,0,0,.2);
}



/* Desktop: black navigation text for clarity */
@media (min-width: 721px){

  .nav-link{
    color: #111;                 /* near-black, softer than pure black */
  }

  .nav-link:hover{
    color: #000;
  }

}


@media (min-width: 721px){

  .nav-link{
    background: rgba(255,255,255,.45);
    border-color: rgba(0,0,0,.12);
  }

  .header-inner.is-scrolled .nav-link{
    background: rgba(255,255,255,.60);  /* stronger once scrolled */
  }

}



/* Simple page heading (no hero) */
.page-head{
  padding: 26px 18px 10px 18px;
  text-align: center;
}

.page-head h1{
  font-family: "Bangers", system-ui, sans-serif;
  color: var(--brand-red);
  letter-spacing: .08em;
  font-size: clamp(26px, 3vw, 40px);
  margin: 0 0 8px 0;
}

.page-head p{
  margin: 0 auto;
  max-width: 70ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

/* Testimonials grid */
.t-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 6px 6px 22px 6px;
}

.t-card{
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  padding: 16px 16px 14px 16px;
}

.t-card::before{
  content: "“";
  position: absolute;
  top: 10px;
  left: 12px;
  font-family: "Bangers", system-ui, sans-serif;
  font-size: 46px;
  line-height: 1;
  color: rgba(176,0,24,.22);
}

.t-quote{
  margin: 0;
  padding-left: 18px;
  color: #333;
  font-size: 14px;
  line-height: 1.65;
}

.t-name{
  margin: 12px 0 0 0;
  padding-left: 18px;
  font-weight: 800;
  color: var(--brand-red);
  font-size: 13px;
  letter-spacing: .01em;
}

/* Responsive */
@media (max-width: 980px){
  .t-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  .t-grid{ grid-template-columns: 1fr; }
}

/* About page layout */
.about-grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 18px;
  align-items: start;
  padding: 6px 6px 22px 6px;
}

.about-media{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  background: #fff;
}

.about-media img{
  width: 100%;
  height: auto;
  display: block;
}

.about-content{
  padding: 6px 6px 0 6px;
}

.section-title--left{
  text-align: left;
  margin-bottom: 12px;
}

/* Tick list using your yellow2.png (keeps continuity) */
.ticklist{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.ticklist li{
  padding-left: 26px;
  position: relative;
  color: #333;
  font-size: 14px;
  line-height: 1.6;
}

.ticklist li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  background: url("../gifs/yellow2.png") no-repeat center / contain;
}

/* Responsive */
@media (max-width: 980px){
  .about-grid{
    grid-template-columns: 1fr;
  }
}


/* Contact page panel */
.contact-panel{
  max-width: 680px;
  margin: 0 auto 24px auto;
  padding: 22px 20px;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  text-align: center;
}

.contact-warning{
  margin: 0 0 16px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(176,0,24,.08);
  border: 1px solid rgba(176,0,24,.35);
  color: #1f1f1f;
  font-size: 15px;
  line-height: 1.6;
}

.contact-warning strong{
  color: var(--brand-red);
}

.contact-email{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.contact-email a{
  display: inline-block;
  margin-top: 6px;
  font-size: 20px;
  color: var(--brand-red);
  text-decoration: none;
}

.contact-email a:hover{
  text-decoration: underline;
}

/* Product listing grid (shared by Ballponds + other product pages) */
.product-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 6px 6px 24px 6px;
}

/* 2 across on small tablets */
@media (min-width: 640px){
  .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* 3 across on desktop */
@media (min-width: 980px){
  .product-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

.product-card{
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
  overflow: hidden;
}

.product-form{
  margin: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.product-meta{
  display: grid;
  gap: 4px;
}

.product-code{
  font-weight: 800;
  color: #111;
  letter-spacing: .02em;
}

.product-price{
  font-weight: 900;
  color: var(--brand-red);
  font-size: 18px;
}

.product-badges img{
  display: block;
  height: 58px;
  width: auto;
  opacity: .98;
}

.product-image{
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

.product-image img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.product-desc{
  margin: 0;
  color: #333;
  font-size: 14px;
  line-height: 1.6;
  min-height: 3.2em; /* helps card heights feel aligned */
}

.product-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

/* Button: modern but keeps your continuity */
.buttoncart{
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  background: #fdc945;
  color: #111;
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}

.buttoncart:hover{
  transform: translateY(-1px);
}

.product-proof{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
}

.product-badges{
  margin-top: 10px;
  display: grid;
  gap: 8px;
  justify-items: center;
}
.product-badges img{
  max-width: 100%;
  height: auto;
  display: block;
}

.testimonial-link img {
  max-width: 205px;
  width: 100%;
  height: auto;
  display: block;
}

/* Product badges (e.g. 5 year warranty) */
.product-badges img {
  max-width: 245px;        /* hard ceiling */
  width: auto;             /* DO NOT stretch */
  height: auto;            /* preserve aspect ratio */
  max-height: 58px;        /* matches intended size */
  display: block;
}