html { box-sizing: border-box; min-height: 100%; }
*, *::before, *::after { box-sizing: inherit; }

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: #0f1626;
  color: #bdf0e9;                 /* testi chiari globali */
  min-height: 100%;
  overflow-x: hidden;
  position: relative;
}

:root {
  --ff-primary: #1b2336;
  --ff-accent: #bdf0e9;
  --ff-slate: #4c536d;
  --ff-cta: #f59e0b;
  --ff-soft: #1a2338;
  --ff-header-height: 80px;
}

h1, h2, h3, h4, h5, h6 { color: #bdf0e9; }
a { color: var(--ff-accent); }
a:hover { color: #f59e0b; }       /* hover generale caldo */

/* Logo: 95% del lato minore, bordo sinistro allineato al centro logo */
body::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 0;
  width: min(95vh, 95vw);         /* ~95% del body */
  height: min(95vh, 95vw);
  background: url("../img/logo_per_bg_scuro.png") center / contain no-repeat;
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0.2;
  pointer-events: none;
  z-index: 10;
}

.btn-primary { background-color: var(--ff-cta); border-color: var(--ff-cta); color: #1b2336; }
.btn-primary:hover { background-color: #f59e0b; border-color: #f59e0b; color: #0f1626; }
.btn-outline-primary { color: var(--ff-accent); border-color: var(--ff-accent); }
.btn-outline-primary:hover { background-color: var(--ff-accent); color: #0f1626; }

/* Navbar: base chiaro + hover arancio su tutti gli elementi */
.navbar .nav-link,
.navbar-brand { color: #bdf0e9; }
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar-brand:hover,
.navbar-brand:focus { color: #f59e0b; }

.ff-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 14px 0;
  background: rgba(15, 22, 38, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(189, 240, 233, 0.2);
}
.ff-header-hide { transform: translateY(-100%); transition: transform 0.25s ease; }
.ff-header:not(.ff-header-hide) { transition: transform 0.25s ease; }

main { padding-top: 0; }

#hero {
  padding-top: 20px;
  background:
    radial-gradient(circle at 10% 20%, rgba(189, 240, 233, 0.12), transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(255, 159, 99, 0.12), transparent 35%),
    #0f1626;
}

.hero-video {
  border: 1px solid rgba(189, 240, 233, 0.3);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.info-card {
  background: var(--ff-soft);
  border: 6px solid var(--ff-cta);
  border-radius: 16px;
  min-height: 300px;
  width: 100%;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  background-image: linear-gradient(135deg, rgba(189, 240, 233, 0.12), rgba(27, 35, 54, 0.65));
}

.info-kicker {
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ff-accent);
  margin-bottom: 10px;
  font-weight: 700;
}

.info-wrapper { max-width: 1120px; }
section { scroll-margin-top: calc(var(--ff-header-height) + 12px); }

footer, .ff-footer {
  background: #0a0f1a;
  color: #bdf0e9;       /* footer chiaro */
}

.ff-social { color: var(--ff-accent); font-size: 1.4rem; }
.ff-social:hover { color: #f59e0b; }

.section-text-muted, .text-muted { color: #aab4c5 !important; }
.card { border-radius: 16px; }

@media (max-width: 575.98px) {
  h1 { font-size: 1.9rem; }
  .display-5 { font-size: 2rem; }
  main { padding-top: 0; }
  #hero { padding-top: calc(var(--ff-header-height) + 16px); }
  .ff-footer .row { text-align: center; }
  .ff-footer .d-flex { justify-content: center; }
  .ff-footer { padding-top: 32px; padding-bottom: 56px; }
  body::before { width: 95vmin; height: 95vmin; } /* 95% anche su XS */
}

/* Bordi arrotondati e spessi intorno al player video */
.hero-video{
  border: 8px solid var(--ff-orange, #f59e0b); /* usa --ff-orange se esiste, altrimenti fallback */
  border-radius: 0.75rem; /* ≈ .rounded-4 di Bootstrap */
  box-shadow: 0 0 0 1px rgba(0,0,0,.15); /* why: piccolo stacco sul bg scuro */
}

.instructor-card{
  /* sfumatura tenue: accent -> soft con alpha bassi */
  background-image:
    linear-gradient(135deg,
      rgba(189, 240, 233, 0.06),
      rgba(26, 35, 56, 0.14));
  background-color: transparent;                 /* niente blocco pieno */
  border: 1px solid rgba(189, 240, 233, 0.12);   /* bordo tenue coerente */
  border-radius: 16px;
  backdrop-filter: blur(2px) saturate(110%);     /* why: appena stacco dallo sfondo */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),      /* filo interno molto lieve */
    0 8px 24px rgba(0,0,0,0.28);                 /* ombra morbida */
  transition: border-color .2s ease, box-shadow .2s ease;
}
.instructor-card:hover{
  border-color: rgba(245, 158, 11, 0.28);        /* richiamo arancione nuovo */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 10px 28px rgba(0,0,0,0.32);
}

/* Foto istruttori: invariata (già ok) */
.instructor-photo{
  width: 160px;
  height: 160px;
  object-fit: cover;
  border: 3px solid rgba(189, 240, 233, 0.25);
}

.wip-card{
  max-width: 880px;
  padding: 40px 28px;
  margin-top: 12px;
  background:
    radial-gradient(80% 60% at 20% 0%, rgba(189,240,233,0.10), transparent 60%),
    radial-gradient(80% 60% at 80% 20%, rgba(245,158,11,0.08), transparent 60%),
    var(--ff-soft);
  border: 1px solid rgba(189,240,233,0.18);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

.wip-badge{
  display: inline-block;
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  color: #0f1626;
  background: var(--ff-cta);               /* arancione nuovo */
  border: 1px solid rgba(0,0,0,0.15);
}

.wip-emoji{
  font-size: 3rem;
  animation: wip-bob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.25));
}
@keyframes wip-bob{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-4px) }
}
.wip-wrap{
  min-height: calc(100vh - var(--ff-header-height) - 80px); /* header + margini */
}


.wip-wrap{
  min-height: calc(100vh - var(--ff-header-height) - 80px);
}


/* Prenota */
.booking-section{
  background:
    radial-gradient(60% 80% at 10% 0%, rgba(189,240,233,0.08), transparent 60%),
    radial-gradient(60% 80% at 90% 20%, rgba(245,158,11,0.06), transparent 60%),
    var(--ff-soft);
  border: 1px solid rgba(189,240,233,0.18);
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.30);
}
.booking-title{ color: #bdf0e9; letter-spacing: .01em; }
.booking-desc{ color: #aab4c5; }
.booking-video{
  border: 6px solid var(--ff-cta);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
@media (min-width: 992px){
  .booking-section{ padding: 28px 28px; }
}

.info-card{
  /* il tuo as-is resta valido; aggiungiamo i layer */
  background-image:
    linear-gradient(135deg, rgba(189, 240, 233, 0.12), rgba(27, 35, 54, 0.65)),
    var(--info-img, linear-gradient(transparent, transparent));
  background-size: cover, cover;          /* l'immagine riempie la card */
  background-position: center;             /* centratura immagine */
  background-repeat: no-repeat;            /* no repeat */
}

/* Info-card più "quadrate" solo su desktop */
@media (min-width: 992px){
  .info-wrapper .info-card{
    aspect-ratio: 7 / 4;          /* quasi quadrata (più naturale di 1:1) */
    min-height: unset;            /* override del min-height mobile */
    height: auto;                 /* lascia calcolare all'aspect-ratio */
  }
  /* opzionale: limita ampiezza per proporzioni migliori */
  .info-wrapper { max-width: 600px; }
}

.video-poster{
  background: url("https://img.youtube.com/vi/_w37c_RXnJ0/maxresdefault.jpg") center / cover no-repeat;
}

.video-poster{ background-position:center; background-size:cover; background-repeat:no-repeat; }
.video-poster.efferro{ background-image:url("https://img.youtube.com/vi/ysz5S6PUM-U/maxresdefault.jpg"); }
.video-poster.parour{  background-image:url("https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg"); }
.video-poster.karate{  background-image:url("https://img.youtube.com/vi/aqz-KE-bpKQ/maxresdefault.jpg"); }


/* === ISTRUTTORI — stile completo (incollare in fondo al file) === */

/* Variabili dedicate (coerenti con la tua palette) */
:root{
  --ff-instructor-name: var(--ff-accent);           /* colore base nome */
  --ff-instructor-role: rgba(189,240,233,0.85);     /* colore base ruolo */
  --ff-instructor-glow: rgba(245,158,11,0.65);      /* glow arancione */
  --ff-instructor-glow-soft: rgba(245,158,11,0.35);
}

/* Card leggera con sfumatura appena percettibile */
.instructor-card{
  background-image: linear-gradient(135deg,
    rgba(189,240,233,0.06),
    rgba(26,35,56,0.14));
  background-color: transparent;
  border: 1px solid rgba(189,240,233,0.12);
  border-radius: 16px;
  backdrop-filter: blur(2px) saturate(110%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 8px 24px rgba(0,0,0,0.28);
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Foto rotonda */
.instructor-photo{
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid rgba(189,240,233,0.25);
}

/* Testi base (funziona con classi o con h2/p interni) */
.instructor-name, .instructor-card h2{
  color: var(--ff-instructor-name);
  transition: color .2s ease, text-shadow .2s ease;
}
.instructor-role, .instructor-card p{
  color: var(--ff-instructor-role);
}

/* Hover glow arancione sul nome (trigger su nome e su card) */
.instructor-card:hover .instructor-name,
.instructor-name:hover,
.instructor-card:hover h2{
  color: #f59e0b;
  text-shadow:
    0 0 8px var(--ff-instructor-glow),
    0 0 20px var(--ff-instructor-glow-soft);
}

/* Focus tastiera accessibile */
.instructor-name:focus-visible,
.instructor-card h2:focus-visible{
  outline: none;
  color: #f59e0b;
  text-shadow:
    0 0 8px var(--ff-instructor-glow),
    0 0 20px var(--ff-instructor-glow-soft);
}


.nav-logo{
  width: 28px; height: 28px; object-fit: contain;
  border-radius: 6px;                     /* soft corners */
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);  /* stacco minimo su bg scuro */
}

/* Home: card più centrate su desktop, mantenendo alternanza sx/dx */
@media (min-width: 992px){
  .home-cards .info-wrapper{ max-width: 720px; }   /* meno larghe → più centrali */
  .home-cards .justify-content-start .info-wrapper{ margin-left: 6%; }  /* sposta dal bordo sinistro */
  .home-cards .justify-content-end   .info-wrapper{ margin-right: 6%; } /* sposta dal bordo destro */
  /* se vuoi ancora più “centrali”, porta 6% → 8% */
}

/* /static/css/custom.css — AGGIUNGI IN FONDO */

/* 1) Logo navbar più grande */
.nav-logo{
  width: 80px; height: 80px; object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}

/* 2) Stato attivo navbar (Opzione A) */
.navbar .nav-link.active{
  color: var(--ff-cta) !important;                 /* arancione della palette */
  position: relative;
}
.navbar .nav-link.active::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, rgba(245,158,11,.0), var(--ff-cta), rgba(245,158,11,.0));
  border-radius: 2px;
}

/* 3) Titoli card home più grandi e centrati */
.info-kicker{
  font-size: 3rem;             /* era 1.1rem */
  text-align: center;             /* centrato rispetto alla card */
  margin-left: auto;              /* coerenza quando la card è destra/sinistra */
  margin-right: auto;
}

.ff-header{
  background: rgba(15, 22, 38, 0.85);
  backdrop-filter: blur(10px);
}
.ff-header.ff-at-top{
  background: #0f1626;         
  backdrop-filter: none;
  border-bottom-color: transparent;
}

main{ padding-top: var(--ff-header-height); }

.form-dark {
  background: var(--ff-soft) !important;            /* blu scuro già usato nel sito */
  border: 1px solid rgba(189,240,233,0.18);
}
.form-dark .form-label { color: var(--ff-accent) !important; }       /* celeste */
.form-dark .form-control, .form-dark .form-select, .form-dark textarea {
  color: #bdf0e9 !important;                        /* testo celeste */
  background: #0f1626 !important;                   /* body bg */
  border-color: rgba(189,240,233,0.25) !important;  /* bordo visibile */
}
.form-dark .form-control::placeholder,
.form-dark textarea::placeholder { color: #93cacf !important; }
.form-dark .btn, .btn-warning {                     /* bottoni arancioni */
  --bs-btn-bg: #f59e0b;
  --bs-btn-border-color: #f59e0b;
  --bs-btn-color: #1b2336;
}
.btn-outline-warning.text-dark { color: #1b2336 !important; }

/* Pulsante admin nella pagina Chi siamo (già arancione) */
#admin-entry .btn { border-color: #f59e0b !important; color: #f59e0b !important; }
#admin-entry .btn:hover { background: #f59e0b !important; color: #1b2336 !important; }

.table-ff {
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: transparent !important;
  --bs-table-hover-bg: transparent !important;
  --ff-border: rgba(189,240,233,0.18);
  --ff-row: rgba(26,35,56,0.55);
  --ff-row-alt: rgba(26,35,56,0.40);
  --ff-row-hover: rgba(245,158,11,0.12);
  border-color: var(--ff-border) !important;
}
.table-ff thead th {
  background: rgba(15,22,38,0.85);
  color: #bdf0e9 !important;
  border-color: var(--ff-border) !important;
}
.table-ff td, .table-ff th {
  color: #bdf0e9 !important;
  border-color: var(--ff-border) !important;
}
.table-ff tbody tr { background: var(--ff-row); }
.table-ff tbody tr:nth-child(even) { background: var(--ff-row-alt); }
.table-ff tbody tr:hover { background: var(--ff-row-hover); }
.table-ff .text-muted { color: #9ad5cf !important; } /* più leggibile su dark */

/* Card che wrappa la tabella: angoli + overflow */
.card.form-dark { border-radius: 16px; overflow: hidden; }

/* === Modali dark coerenti (evita “miscuglio” visivo) === */
.modal-content.form-dark {
  background: var(--ff-soft) !important;
  color: #bdf0e9 !important;
  border: 1px solid rgba(189,240,233,0.18);
  border-radius: 16px;
}
.modal-content .form-label { color: var(--ff-accent) !important; }
.modal-backdrop.show { opacity: .55; }

/* === Azioni uniformi: stessa altezza === */
.table-ff .btn,
.form-dark .btn { line-height: 1.2; }      /* equalizza */
.table-ff .btn-warning, .form-dark .btn-warning {
  padding: .35rem .6rem;
}
.table-ff .btn-outline-danger {
  padding: .35rem .6rem;
}

/* Card scure per tabelle (tondeggiante) */
.card.form-dark {
  background: var(--ff-soft) !important;
  border: 1px solid rgba(189,240,233,0.18);
  border-radius: 16px;
}
.card.form-dark .card-body { background: transparent; }

.btn-sm.btn-warning { padding: .25rem .5rem !important; font-size: .875rem !important; }
.btn-sm.btn-outline-danger { padding: .25rem .5rem !important; font-size: .875rem !important; }

/* Celle davvero leggibili in dark */
.table-ff td, .table-ff th { color: #bdf0e9 !important; }

td.actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: flex-end;
}

/* Bottoni compatti coerenti */
.btn-ff {               /* why: uniformare altezza/spacing tra vari btn Bootstrap */
  padding: .28rem .62rem !important;
  line-height: 1.15 !important;
  font-size: .875rem !important;
  border-radius: .5rem !important;
}

/* Elimina: bordo ben visibile su dark */
.btn-outline-danger { color: #1b2336; border-color: #1b2336; }
.btn-outline-danger:hover { background: #ffb3b3; color: #1b2336; }