/* ==========================================================================
   Triumvirato Atletico Pallavolo - tema sopra Bootstrap 5.3
   Palette ricavata dal logo (blu e azzurro). Mobile first: gli stili base
   valgono per il telefono, le media query min-width aggiungono il resto.
   ========================================================================== */

/* 1. Token e variabili Bootstrap ------------------------------------------ */
:root {
  --navy: #0B2A4A;
  --blue-deep: #0F4F94;
  --blue: #1565B0;
  --azure: #2F9BE0;
  --sky: #D8EBFA;
  --mist: #F2F8FE;
  --muted: #4A6585;
  --soft: #E3F0FC;

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--navy);
  --bs-body-color-rgb: 11, 42, 74;
  --bs-body-bg: var(--mist);
  --bs-body-bg-rgb: 242, 248, 254;
  --bs-secondary-color: var(--muted);
  --bs-tertiary-bg: #EAF3FC;
  --bs-border-color: #D3E3F3;
  --bs-primary: #1565B0;
  --bs-primary-rgb: 21, 101, 176;
  --bs-primary-bg-subtle: #D8EBFA;
  --bs-primary-border-subtle: #A9D2F3;
  --bs-primary-text-emphasis: #0F4F94;
  --bs-link-color: #1565B0;
  --bs-link-color-rgb: 21, 101, 176;
  --bs-link-hover-color: #0F4F94;
  --bs-link-hover-color-rgb: 15, 79, 148;
  --bs-focus-ring-color: rgba(47, 155, 224, .35);
}

/* 2. Base ------------------------------------------------------------------ */
html { scroll-padding-top: 6rem; color-scheme: light; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body { overflow-x: hidden; }
.container { --bs-gutter-x: 2rem; }

h1, h2, h3, h4, h5, .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--navy); }
.tabular { font-variant-numeric: tabular-nums; }
.section-head { max-width: 40rem; }
.section-title { font-size: clamp(2rem, 6.5vw, 3rem); line-height: 1.05; font-weight: 700; }
.text-soft { color: var(--soft); }

/* Eyebrow con pallone */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  letter-spacing: .12em;
  color: var(--blue);
}
.eyebrow::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  background: url("../img/ball.svg") center / contain no-repeat;
}

/* 3. Accessibilità: focus, skip link, tocco ------------------------------- */
:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 3px; border-radius: .25rem; }
[data-bs-theme="dark"] :focus-visible, .contact :focus-visible { outline-color: #fff; }
.form-control:focus-visible, .form-select:focus-visible, .btn:focus-visible { outline-offset: 2px; }

.skip-link:focus {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 2000;
  width: auto;
  height: auto;
  margin: 0;
  padding: .75rem 1.1rem;
  clip: auto;
  overflow: visible;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  border-radius: .75rem;
  box-shadow: 0 0 0 3px var(--blue-deep), 0 8px 24px rgba(11, 42, 74, .3);
}
main:focus { outline: none; }

.btn {
  --bs-btn-font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.navbar .nav-link { min-height: 2.75rem; display: flex; align-items: center; --bs-nav-link-color: var(--navy); --bs-nav-link-hover-color: var(--blue); }
.card-cta { display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer a { display: inline-block; padding-block: .35rem; }

/* 4. Pulsanti -------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--blue);
  --bs-btn-border-color: var(--blue);
  --bs-btn-hover-bg: var(--blue-deep);
  --bs-btn-hover-border-color: var(--blue-deep);
  --bs-btn-active-bg: var(--navy);
  --bs-btn-active-border-color: var(--navy);
  --bs-btn-focus-shadow-rgb: 47, 155, 224;
  box-shadow: 0 8px 20px rgba(21, 101, 176, .28);
}
.btn-outline-primary {
  --bs-btn-color: var(--blue);
  --bs-btn-border-color: var(--blue);
  --bs-btn-hover-bg: var(--blue);
  --bs-btn-hover-border-color: var(--blue);
  --bs-btn-active-bg: var(--blue-deep);
  --bs-btn-active-border-color: var(--blue-deep);
  --bs-btn-focus-shadow-rgb: 47, 155, 224;
}
.btn-primary:hover { transform: translateY(-2px); }

/* 5. Navbar ---------------------------------------------------------------- */
.navbar { backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); }
.brand-name { font-size: 1.1rem; line-height: 1.05; }
.brand-name small { font-family: var(--font-body); font-size: .7rem; font-weight: 600; letter-spacing: .08em; color: var(--blue); margin-top: 2px; }
@media (min-width: 576px) { .brand-name { font-size: 1.25rem; } }

/* 6. Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  background:
    radial-gradient(40rem 24rem at 90% 0%, rgba(47, 155, 224, .30), transparent 65%),
    linear-gradient(180deg, #EAF4FF 0%, #D8EBFA 100%);
  overflow: hidden;
  padding-bottom: 4.5rem;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/net.svg") repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
  pointer-events: none;
}
.hero > .container { position: relative; }
.hero-title { font-size: clamp(2.5rem, 10.5vw, 4.9rem); line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.hero-title span { color: var(--blue); }
.text-white :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4), [data-bs-theme="dark"] :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4), .contact :is(h2, .section-title) { color: #fff; }
.hero-lead { max-width: 33rem; }

/* Tabellone: i numeri della società come un segnapunti */
.scoreboard {
  display: flex;
  max-width: 30rem;
  margin: 0;
  padding: .85rem .25rem;
  background: var(--navy);
  border-radius: 1.25rem;
  box-shadow: 0 14px 30px rgba(11, 42, 74, .25);
}
.scoreboard > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column-reverse; align-items: center; padding: .15rem .35rem; text-align: center; }
.scoreboard > div + div { border-left: 1px solid rgba(255, 255, 255, .18); }
.scoreboard dd { margin: 0; font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; line-height: 1; color: #8FCBF5; font-variant-numeric: tabular-nums; }
.scoreboard dt { margin-top: .4rem; font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #C9DDF1; }
@media (min-width: 576px) { .scoreboard dd { font-size: 2.6rem; } .scoreboard dt { font-size: .75rem; } }

.hero-card { max-width: 22rem; margin-top: 2rem; }
.hero-logo { width: 150px; height: 150px; }
.hero-ball {
  position: absolute;
  z-index: 2;
  top: -2.4rem;
  right: -.25rem;
  width: 5.5rem;
  height: 5.5rem;
  filter: drop-shadow(0 12px 14px rgba(11, 42, 74, .3));
}
.float-chip { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero-ball { animation: bob 5s ease-in-out infinite; }
  @keyframes bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(8deg); } }
}
@media (min-width: 768px) {
  .hero { padding-bottom: 5.5rem; }
  .hero-ball { width: 7rem; height: 7rem; top: -3rem; right: -2rem; }
  .float-chip { display: inline-flex; position: absolute; box-shadow: 0 10px 24px rgba(11, 42, 74, .16); }
  .float-chip-a { top: 4.5rem; left: -2.5rem; }
  .float-chip-b { bottom: -1.1rem; right: -1.5rem; }
}

/* 7. Rete come divisore di sezione ---------------------------------------- */
.net-top, .net-top-dark { position: relative; }
.net-top::before, .net-top-dark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: repeat-x top left / 160px 40px;
  -webkit-mask-image: linear-gradient(#000 45%, transparent);
  mask-image: linear-gradient(#000 45%, transparent);
  pointer-events: none;
}
.net-top::before { background-image: url("../img/net-band-light.svg"); }
.net-top-dark::before { background-image: url("../img/net-band-dark.svg"); }
.net-top > .container, .net-top-dark > .container { position: relative; }

/* 8. Cerca il gruppo ------------------------------------------------------- */
.age-input { flex: 0 0 auto; width: 5.5rem; font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; }

/* 9. Gruppi per età: dall'azzurro chiaro al blu notte ---------------------- */
.g1 { --c: #BFE3FB; --tc: #0B2A4A; }
.g2 { --c: #8FCBF5; --tc: #0B2A4A; }
.g3 { --c: #5BB1EE; --tc: #0B2A4A; }
.g4 { --c: #1A70BC; --tc: #fff; }
.g5 { --c: #1565B0; --tc: #fff; }
.g6 { --c: #0F4F94; --tc: #fff; }
.g7 { --c: #0B3C78; --tc: #fff; }
.g8 { --c: #0B2A4A; --tc: #fff; }

.grp { overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.grp::after {
  content: "";
  position: absolute;
  right: -1.75rem;
  bottom: -1.75rem;
  width: 7rem;
  height: 7rem;
  background: url("../img/ball-line.svg") center / contain no-repeat;
  opacity: .09;
  pointer-events: none;
}
.grp .card-body { position: relative; z-index: 1; }
.grp-age { width: 4.5rem; height: 4.5rem; flex: none; background: var(--c); color: var(--tc); }
.grp-age-num { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.grp-age small { font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.chip { background: var(--c); color: var(--tc); border: 1px solid transparent; }
.grp.is-match { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--blue-deep), 0 18px 40px rgba(21, 101, 176, .25) !important; }
@media (hover: hover) { .grp:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(21, 101, 176, .18) !important; } }

/* 10. Bento "Perché noi" --------------------------------------------------- */
.bg-brand { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--blue-deep) 0%, var(--navy) 100%); }
.icon-circle { width: 3.25rem; height: 3.25rem; flex: none; }
.court-art { position: absolute; top: 1.25rem; right: 1.25rem; width: 6rem; height: auto; pointer-events: none; }
@media (min-width: 768px) { .court-art { top: 1.75rem; right: 1.75rem; } }
.ladder .badge { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 700; border: 1px solid rgba(255, 255, 255, .3); }
.ladder .badge:last-child { background: #fff; color: var(--navy); }

/* 11. Orari: schede per giorno -------------------------------------------- */
.day-tabs { --bs-nav-pills-link-active-bg: var(--blue); --bs-nav-link-color: var(--navy); --bs-nav-link-hover-color: var(--blue); scrollbar-width: none; }
.day-tabs::-webkit-scrollbar { display: none; }
.day-tabs .nav-link { font-weight: 700; white-space: nowrap; min-height: 2.75rem; display: inline-flex; align-items: center; }

/* 12. FAQ ------------------------------------------------------------------ */
.accordion {
  --bs-accordion-bg: #fff;
  --bs-accordion-color: var(--navy);
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-btn-color: var(--navy);
  --bs-accordion-active-bg: var(--sky);
  --bs-accordion-active-color: var(--blue-deep);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(47, 155, 224, .3);
}
.accordion-item { margin-bottom: .75rem; border-radius: 1rem !important; overflow: hidden; }
.accordion-button { font-weight: 700; min-height: 3.25rem; }

/* 13. Contatti e moduli ---------------------------------------------------- */
.contact {
  background:
    url("../img/court-lines.svg") center / 100% 100% no-repeat,
    linear-gradient(160deg, var(--blue) 0%, var(--navy) 100%);
}
.steps { --bs-list-group-bg: transparent; --bs-list-group-color: #fff; --bs-list-group-border-color: rgba(255, 255, 255, .25); }
.form-control, .form-select { border-radius: .75rem; }
.form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 .25rem rgba(47, 155, 224, .3); }
.form-check-input { width: 1.35em; height: 1.35em; margin-top: .1em; }
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.contact-line { overflow-wrap: anywhere; }

/* 14. Barra azioni su mobile ----------------------------------------------- */
.cta-bar {
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  transition: transform .25s ease;
}
.cta-bar.is-hidden { transform: translateY(110%); }

/* 15. Footer --------------------------------------------------------------- */
.footer { background: var(--navy); padding-bottom: 7.5rem; }
@media (min-width: 992px) { .footer { padding-bottom: 3rem; } }

/* 16. Preferenze utente ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .grp-age, .chip { border: 1px solid CanvasText; }
  .grp.is-match { outline: 3px solid Highlight; }
}