/* =========================================================
   GLEASON TENNIS — CONVERSION & TRUST WIDGETS
   Booking embed container, Google review section, and the
   sitewide floating review CTA. Loaded on every public page
   after that page's base styles.
   ========================================================= */

/* ---------------------------------------------------------
   Booking embed (booking.html + contact.html)
   The GHL widget reports its own height to the parent via
   form_embed.js, so the iframe must be free to grow. min-height
   keeps the frame from collapsing before that message arrives.
   --------------------------------------------------------- */
.booking-section{ padding: clamp(3.5rem, 7vw, 6.5rem) 0; background: var(--c-white); }
.booking-section.ice{ background: linear-gradient(160deg, var(--c-blue-ice) 0%, var(--c-blue-pale) 100%); }

.booking-head{ max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.booking-head h2{ font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: .9; margin-bottom: 1rem; }
.booking-head p{ font-size: 1.05rem; color: var(--c-charcoal-soft); }

/* form_embed.js parks the iframe off-flow (position:absolute; left:-9999px)
   until the widget posts back that it is ready, which would collapse this
   box to its padding. min-height reserves the space so the section never
   appears empty and nothing shifts when the calendar appears. */
.booking-shell{
  position: relative;
  width: 100%;
  max-width: 1040px;
  min-height: 820px;
  margin: 0 auto;
  padding: clamp(.5rem, 1.5vw, 1.25rem);
  background: var(--c-white);
  border: 1px solid rgba(16,24,32,.09);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(16,24,32,.12), 0 0 0 1px rgba(16,24,32,.03);
  overflow: hidden;              /* never let the embed bleed sideways */
}
.booking-shell::before{
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-blue-primary), var(--c-neon-primary));
}
.booking-shell iframe{
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 780px;
  border: none;
  overflow: hidden;
  border-radius: 10px;
}

/* Alternate contact row under the calendar */
.booking-alt{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
  max-width: 1040px;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(16,24,32,.1);
}
.booking-alt-label{
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-blue-deep);
  flex: none;
}
.booking-alt a{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .03em;
  color: var(--c-charcoal-deep);
  transition: color .2s ease;
}
.booking-alt a:hover{ color: var(--c-blue-deep); }
.booking-alt svg{ width: 16px; height: 16px; flex: none; color: var(--c-blue-primary); }

/* Contact conversion flow: keep the shared embed behavior while giving the
   inquiry-to-booking handoff a tighter, page-specific presentation. */
.contact-conversion + .booking-section{
  padding: clamp(4rem, 6vw, 5.75rem) 0;
  background: linear-gradient(155deg, var(--c-blue-ice) 0%, var(--c-white) 58%, var(--c-blue-pale) 100%);
}
.contact-conversion + .booking-section > .container{ max-width: 1180px; }
.contact-conversion + .booking-section .booking-head{
  max-width: 720px;
  margin: 0 auto clamp(2rem, 3vw, 2.75rem);
  text-align: center;
}
.contact-conversion + .booking-section .booking-head .eyebrow{ justify-content: center; }
.contact-conversion + .booking-section .booking-shell{
  max-width: 1100px;
  min-height: 760px;
  padding: clamp(.6rem, 1.25vw, 1rem);
  border-radius: 20px;
  box-shadow: 0 28px 70px rgba(16,24,32,.14), 0 0 0 1px rgba(16,24,32,.03);
}
.contact-conversion + .booking-section .booking-shell iframe{ min-height: 730px; }
.contact-conversion + .booking-section .booking-alt{ max-width: 1100px; }

@media (max-width: 640px){
  .booking-shell{ border-radius: 12px; padding: .4rem; min-height: 960px; }
  .booking-shell iframe{ min-height: 940px; }
  .booking-alt{ flex-direction: column; align-items: flex-start; gap: .85rem; }
  .contact-conversion + .booking-section{ padding: 3.75rem 0; }
  .contact-conversion + .booking-section .booking-head{ text-align: left; margin-bottom: 1.75rem; }
  .contact-conversion + .booking-section .booking-head .eyebrow{ justify-content: flex-start; }
  .contact-conversion + .booking-section .booking-shell{ min-height: 900px; padding: .35rem; border-radius: 13px; }
  .contact-conversion + .booking-section .booking-shell iframe{ min-height: 880px; }
}

/* ---------------------------------------------------------
   Google review widget section (index.html + contact.html)
   --------------------------------------------------------- */
.reviews-section{ padding: clamp(3.5rem, 7vw, 6.5rem) 0; background: #F7F9FB; }
.reviews-section.ice{ background: var(--c-blue-ice); }
.reviews-head{ max-width: 680px; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.reviews-head h2{ font-size: clamp(2.2rem, 5vw, 4rem); line-height: .9; margin-bottom: .9rem; }
.reviews-head p{ font-size: 1.05rem; color: var(--c-charcoal-soft); }

.reviews-shell{
  position: relative;
  width: 100%;
  min-height: 420px;            /* reserve space so the section is never empty */
  overflow: hidden;             /* review widget must never force page scroll */
}
.reviews-shell iframe.lc_reviews_widget{
  display: block;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  border: 0;
  min-height: 420px;
}
@media (max-width: 640px){
  .reviews-shell iframe.lc_reviews_widget{ min-height: 520px; }
}

/* ---------------------------------------------------------
   Floating Google review CTA (sitewide)
   Sits below the header (z 200) and clear of page content.
   --------------------------------------------------------- */
.review-fab{
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1.35rem .85rem .85rem;
  background: var(--c-white);
  border: 1px solid rgba(16,24,32,.1);
  border-radius: 999px;
  box-shadow: 0 14px 38px rgba(16,24,32,.18), 0 3px 8px rgba(16,24,32,.07);
  color: var(--c-charcoal-deep);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
  animation: reviewFabIn .5s cubic-bezier(.2,.8,.2,1) 1.2s both;
}
.review-fab:hover,
.review-fab:focus-visible{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 40px rgba(16,24,32,.2), 0 2px 8px rgba(16,24,32,.08);
}
.review-fab:focus-visible{ outline: 3px solid var(--c-neon-primary); outline-offset: 3px; }
.review-fab.is-suppressed{
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) !important;
  animation: none !important;
}

@keyframes reviewFabIn{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Restrained circular G badge — deliberately not a facsimile of the
   multicolour Google mark. The word "Google" in the panel copy carries
   the attribution. */
.review-fab-badge{
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--c-white) url('../images/google-g.svg') center/26px 26px no-repeat;
  border: 1px solid rgba(16,24,32,.1);
  color: transparent;
  font-size: 0;
  line-height: 0;
  box-shadow: 0 3px 10px rgba(16,24,32,.1);
  animation: reviewGoogleCue 5.5s ease-in-out 2s infinite;
}
.review-fab-badge::after{           /* small neon status dot */
  content: '';
  position: absolute;
  right: -2px; top: -2px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-neon-primary);
  border: 1.5px solid var(--c-white);
}

/* Hover/focus panel with the fuller, neutral request */
.review-fab-panel{
  position: absolute;
  right: 0;
  bottom: calc(100% + .8rem);
  width: 300px;
  padding: 1.15rem 1.25rem;
  background: var(--c-white);
  border: 1px solid rgba(16,24,32,.1);
  border-radius: 16px;
  box-shadow: 0 22px 54px rgba(16,24,32,.2);
  text-align: left;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: none;
  transition: box-shadow .22s ease;
  animation: reviewPanelFloat 6s ease-in-out 2.5s infinite;
}
.review-fab:hover .review-fab-panel,
.review-fab:focus-visible .review-fab-panel{
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  box-shadow: 0 26px 62px rgba(16,24,32,.24);
}
.review-fab-panel strong{
  display: block;
  margin-bottom: .3rem;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-charcoal-deep);
}
.review-fab-panel span{
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  color: var(--c-charcoal-soft);
  white-space: normal;
}

/* Full label on desktop, short label on phones */
.review-fab-text-sm{ display: none; }

@keyframes reviewGoogleCue{
  0%, 86%, 100%{ transform: scale(1); }
  91%{ transform: scale(1.08); }
  96%{ transform: scale(1.02); }
}
@keyframes reviewPanelFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}

/* Compact pill on small screens; no hover panel on touch */
@media (max-width: 600px){
  .review-fab{
    right: .85rem;
    bottom: .85rem;
    gap: .55rem;
    padding: .62rem 1rem .62rem .62rem;
    font-size: 12px;
  }
  .review-fab-badge{ width: 30px; height: 30px; background-size: 21px 21px; }
  .review-fab-text{ display: none; }
  .review-fab-text-sm{ display: inline; }
  .review-fab-panel{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .review-fab{ animation: none; opacity: 1; transform: none; }
  .review-fab-badge, .review-fab-panel{ animation: none; }
  .review-fab:hover, .review-fab:focus-visible{ transform: none; }
  .review-fab, .review-fab-panel{ transition: none; }
}

/* =========================================================
   GLOBAL FOOTER
   One canonical implementation shared by every public page.
   ========================================================= */
.site-footer{background:var(--c-charcoal-deep);color:var(--c-white);padding:5rem 0 2rem;border-top:1px solid rgba(115,200,255,.18)}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:clamp(2rem,4vw,3.5rem);margin-bottom:3.5rem}

/* Brand column - real logo artwork, kept inside an <h3> so the column
   <h4>s retain a parent heading level. */
.footer-brand-mark{margin:0 0 1.25rem}
.footer-brand-logo{display:block;width:160px;max-width:100%;height:auto}
.footer-brand p{color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.7;max-width:40ch}

.footer-col h4{font-family:var(--font-head);font-size:.95rem;letter-spacing:.09em;margin-bottom:1.25rem;color:var(--c-neon-primary)}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col ul li{margin-bottom:.7rem}
.footer-col a{display:inline-block;color:rgba(255,255,255,.82);font-size:.95rem;line-height:1.5;transition:color .25s ease,transform .25s ease}
.footer-col a:hover{color:var(--c-blue-bright);transform:translateY(-1px)}
.footer-col a.footer-phone{color:var(--c-neon-primary);font-weight:700;font-size:1.05rem}
.footer-col a.footer-phone:hover{color:var(--c-neon-bright)}
.footer-col a[href^="mailto:"]{word-break:break-word}

.footer-bottom{text-align:center;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.52);font-size:.8rem}

/* Tablet: brand spans the row, links pair up into two groups. */
@media(max-width:768px){
  .site-footer{padding:4rem 0 1.75rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem 2rem;margin-bottom:2.5rem}
  .footer-brand{grid-column:1 / -1}
  .footer-brand-logo{width:150px}
  .footer-col ul li{margin-bottom:.85rem}
}
@media(max-width:440px){
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .footer-brand{grid-column:auto}
  .footer-brand-logo{width:140px}
}
@media(prefers-reduced-motion:reduce){
  .footer-col a{transition:none}
  .footer-col a:hover{transform:none}
}

/* =========================================================
   SHARED CLOSING CTA  (.final-cta)
   Canonical definition — ported verbatim from the approved
   homepage implementation in index.html so every page renders
   the identical component. Do not fork this per page.
   ========================================================= */
.final-cta{
  padding: var(--section-pad) 0;
  background: var(--c-neon-primary);
  text-align: center;
}
.final-cta h2{
  font-size: clamp(3rem, 7vw, 6rem);
  color: var(--c-charcoal-deep);
  margin-bottom: 2rem;
  line-height: 1;
}
.final-cta p{
  font-size: 1.25rem;
  color: var(--c-charcoal-soft);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
}
/* Replaces the inline flex styling the homepage carried on its button row */
.final-cta-actions{
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.final-cta .btn{
  min-height: 54px;
  border: 2px solid var(--c-charcoal-deep);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.final-cta .btn-neon,
.final-cta .btn-primary{
  background: var(--c-charcoal-deep);
  color: var(--c-white);
}
.final-cta .btn-primary::after{ display: none; }
.final-cta .btn-neon:hover,
.final-cta .btn-primary:hover{
  background: var(--c-blue-deep);
  border-color: var(--c-blue-deep);
  color: var(--c-white);
  box-shadow: 0 12px 28px rgba(16,24,32,.2);
  transform: translateY(-2px);
}
.final-cta .btn-outline{
  background: transparent;
  border-color: var(--c-charcoal-deep);
  color: var(--c-charcoal-deep);
}
.final-cta .btn-outline:hover{
  background: var(--c-charcoal-deep);
  border-color: var(--c-charcoal-deep);
  color: var(--c-white);
  box-shadow: 0 12px 28px rgba(16,24,32,.18);
  transform: translateY(-2px);
}
.final-cta .btn:active{
  transform: translateY(0);
  box-shadow: 0 5px 14px rgba(16,24,32,.16);
}
.final-cta .btn:focus-visible{
  outline: 3px solid var(--c-white);
  outline-offset: 4px;
}

/* Pages whose CTA copy includes an eyebrow keep it, centered and recoloured
   for the neon band (the default blue rule is invisible on neon). */
.final-cta .eyebrow{
  justify-content: center;
  color: var(--c-charcoal-soft);
}
.final-cta .eyebrow::before{ background-color: var(--c-charcoal-deep); }

@media(max-width:600px){
  .final-cta{ padding: clamp(4rem,16vw,5.25rem) 0; }
  .final-cta h2{ font-size: clamp(2.75rem,13vw,4rem); margin-bottom: 1.35rem; }
  .final-cta p{ font-size: 1rem; margin-bottom: 1.5rem; }
  .final-cta-actions{ flex-direction: column; align-items: stretch; gap: .75rem; }
  .final-cta .btn{ width: 100%; min-height: 54px; padding: .9rem 1.15rem; }
}

@media(prefers-reduced-motion:reduce){
  .final-cta .btn{ transition: none; }
}

/* =========================================================
   CUSTOM CURSOR (sitewide)
   The approved homepage dot, centralised here because this file is the
   only stylesheet loaded by every public page (index.html included).
   Values mirror index.html's original .cursor-dot rules exactly; the
   homepage keeps its inline copy as a harmless fallback.
   Behaviour: assets/js/cursor.js
   ========================================================= */
.cursor-dot,
.custom-cursor{
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--c-neon-primary);
  pointer-events: none;              /* must never block clicks/embeds */
  z-index: 9999;                     /* above nav (200) and review FAB (150) */
  transform: translate3d(-50%, -50%, 0);
  mix-blend-mode: difference;        /* the contrast strategy: auto-inverts
                                        on light, dark and neon backgrounds */
  transition: width .2s, height .2s, background-color .2s, opacity .18s ease;
  display: none;                     /* JS enables on fine-pointer devices */
  will-change: transform;
}
.cursor-dot.is-active,
.custom-cursor.is-active{ display: block; }

/* Interactive hover — unchanged homepage values. */
.cursor-dot.hovering,
.custom-cursor.hovering{
  width: 40px;
  height: 40px;
  background-color: var(--c-blue-bright);
  mix-blend-mode: normal;
  opacity: .5;
}

/* Viewport edge / iframe handling — never strand the dot. */
.cursor-dot.is-out,
.custom-cursor.is-out{ opacity: 0; }

/* Touch and coarse pointers keep native tap states only. */
@media (hover: none), (pointer: coarse){
  .cursor-dot,
  .custom-cursor{ display: none !important; }
}

@media (prefers-reduced-motion: reduce){
  .cursor-dot,
  .custom-cursor{ transition: none; }
}