/* =========================================================================
   Bolla Mare — beach . food . drink (lido, Roseto degli Abruzzi) — site.css
   Archétype : « beach club / lido d'été — joyeux, marin, hospitalier ».
   Signature : BULLES flottantes (radial-gradients, clin d'œil à « Bolla ») +
   formes rondes & chips arrondis, palette mer + soleil sur sable.
   ANTI-FOOTPRINT : aucune classe custom — uniquement classes/ids Bootstrap existants,
   éléments et pseudo-éléments.
   ========================================================================= */

:root {
  --bo-sea: #0e7c99;           /* bleu-mer (dominante) */
  --bo-sea-rgb: 14, 124, 153;
  --bo-sea-deep: #0a3a47;
  --bo-sea-2: #0c627a;
  --bo-sun: #f4b740;           /* jaune-soleil (accent) */
  --bo-sun-rgb: 244, 183, 64;
  --bo-sun-deep: #d99a1f;
  --bo-sand: #fcf6ea;         /* sable crème (fond) */
  --bo-sand-2: #f4e9d4;
  --bo-paper: #ffffff;
  --bo-ink: #0a3a47;
  --bo-muted: #5f7681;
  --bo-line: #e7ddc8;

  --bs-primary: #0e7c99;
  --bs-primary-rgb: 14, 124, 153;

  --bs-body-bg: var(--bo-sand);
  --bs-body-color: #46565d;
  --bs-body-font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  --bs-body-font-size: 1.06rem;
  --bs-body-line-height: 1.7;

  --bs-heading-color: var(--bo-ink);
  --bs-link-color: var(--bo-sea);
  --bs-link-hover-color: var(--bo-sun-deep);
  --bs-border-color: var(--bo-line);

  --bo-shadow: 0 26px 54px -32px rgba(10, 58, 71, 0.42), 0 6px 16px -10px rgba(10, 58, 71, 0.2);
  /* nappe de bulles translucides */
  --bo-bubbles:
    radial-gradient(circle 12px at 12% 22%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(circle 22px at 26% 70%, rgba(255,255,255,0.32), transparent 62%),
    radial-gradient(circle 8px at 44% 32%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(circle 30px at 70% 60%, rgba(244,183,64,0.3), transparent 62%),
    radial-gradient(circle 14px at 84% 26%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(circle 18px at 92% 74%, rgba(255,255,255,0.3), transparent 62%);
}

body { background-color: var(--bo-sand); -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: 'Baloo 2', system-ui, cursive; font-weight: 700;
  line-height: 1.14; color: var(--bo-ink);
}
p { text-wrap: pretty; }
::selection { background: var(--bo-sun); color: var(--bo-ink); }
a { transition: color 0.16s ease, background 0.16s ease, transform 0.16s ease; }

/* =========================================================================
   NAVBAR
   ========================================================================= */
.navbar.sticky-top {
  background-color: rgba(252, 246, 234, 0.95) !important;
  backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--bo-line);
  box-shadow: 0 8px 24px -20px rgba(10, 58, 71, 0.5);
}
#brand-logo { height: auto; max-height: 48px; width: auto; }
.navbar .nav-link {
  font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 1rem;
  color: var(--bo-sea-deep) !important; position: relative; padding-inline: 0.85rem;
}
.navbar .nav-link::after { content: ''; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.3rem; height: 3px; border-radius: 3px; background: var(--bo-sun); transform: scaleX(0); transform-origin: left; transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1); }
.navbar .nav-link:hover::after, .navbar .nav-link:focus::after { transform: scaleX(1); }
.navbar .nav-link:hover { color: var(--bo-sea) !important; }
#nav-social { width: 2.2rem; height: 2.2rem; border-radius: 50%; align-items: center; justify-content: center; background: var(--bo-sea); color: #fff; }
#nav-social:hover { background: var(--bo-sun); color: var(--bo-ink); }

/* =========================================================================
   BOUTONS
   ========================================================================= */
.btn { --bs-btn-font-family: 'Baloo 2', sans-serif; --bs-btn-font-weight: 600; border-radius: 999px; }
.btn-lg { padding: 0.7rem 1.9rem; }
.btn-primary { --bs-btn-bg: var(--bo-sun); --bs-btn-color: var(--bo-ink); --bs-btn-border-color: var(--bo-sun); --bs-btn-hover-bg: var(--bo-sun-deep); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--bo-sun-deep); box-shadow: 0 12px 24px -14px rgba(244, 183, 64, 0.8); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-outline-light { --bs-btn-border-color: rgba(255,255,255,0.7); }
.btn-outline-light:hover { color: var(--bo-sea-deep) !important; }

/* =========================================================================
   HERO + BULLES
   ========================================================================= */
#hero { position: relative; overflow: hidden; min-height: 86vh; display: flex; align-items: center; }
#hero-img { object-fit: cover; z-index: 0; }
#hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(120deg, rgba(10, 58, 71, 0.78), rgba(14, 124, 153, 0.55)); }
#hero-bubbles, #contatti-bubbles, #footer-bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--bo-bubbles); }
#hero .container { z-index: 2; }
#hero-claim { font-family: 'Baloo 2', sans-serif; font-weight: 800; color: #fff; font-size: clamp(2.6rem, 7vw, 5rem); letter-spacing: 0.04em; margin-bottom: 1rem; text-shadow: 0 4px 30px rgba(0,0,0,0.4); }
#hero-intro { color: #fdf6e8; font-size: 1.3rem; max-width: 42rem; margin-bottom: 1rem; }
#hero-sub { font-family: 'Baloo 2', sans-serif; color: var(--bo-sun); font-size: 1.4rem; font-weight: 700; }

/* =========================================================================
   RILASSARSI / SORPRENDERSI
   ========================================================================= */
#relax-figure, #sorp-figure { border-radius: 40% 60% 58% 42% / 50% 44% 56% 50%; overflow: hidden; box-shadow: var(--bo-shadow); border: 6px solid #fff; }
#relax-figure img, #sorp-figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
#sorp-figure { border-radius: 60% 40% 44% 56% / 44% 56% 44% 56%; }
#relax-title, #sorp-title { font-size: clamp(1.8rem, 3.6vw, 2.7rem); color: var(--bo-sea); }
#relax-chip { font-family: 'Baloo 2', sans-serif; font-weight: 600; background: var(--bo-sea); color: #fff; padding: 0.4rem 1.1rem; border-radius: 999px; font-size: 1.05rem; }
#relax-chiusura { font-family: 'Baloo 2', sans-serif; font-weight: 600; color: var(--bo-sun-deep); font-size: 1.25rem; }
#sorp-text { font-size: 1.14rem; color: #46565d; }

/* =========================================================================
   CONTATTI (section mer)
   ========================================================================= */
#contatti { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--bo-sea), var(--bo-sea-deep)); }
#contatti-title { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
#contatti-sub { color: var(--bo-sun); font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 1.2rem; }
#contatti-card { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 20px; transition: transform 0.18s ease, background 0.18s ease; }
#contatti-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.14); }
#contatti-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--bo-sun); color: var(--bo-ink); font-size: 1.6rem; margin-bottom: 0.9rem; }
#contatti-card-title { color: #fff; font-size: 1.15rem; margin-bottom: 0.3rem; }
#contatti-val { color: #dff0f3; text-decoration: none; font-size: 0.98rem; word-break: break-word; }
a#contatti-val:hover { color: var(--bo-sun); }

/* =========================================================================
   GALLERY
   ========================================================================= */
#gal-figure { border-radius: 20px; overflow: hidden; box-shadow: var(--bo-shadow); border: 4px solid #fff; transition: transform 0.2s ease; }
#gal-figure:hover { transform: translateY(-4px) rotate(-1deg); }
#gal-figure img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* =========================================================================
   NEWSLETTER
   ========================================================================= */
#newsletter { padding: 4rem 0; background:
    radial-gradient(circle 60px at 15% 30%, rgba(244,183,64,0.12), transparent 60%),
    radial-gradient(circle 80px at 88% 70%, rgba(14,124,153,0.1), transparent 60%),
    var(--bo-sand-2); }
#news-inner { max-width: 44rem; margin: 0 auto; }
#news-title { color: var(--bo-sea-deep); font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
#news-sub { color: var(--bo-muted); }
#news-check { font-size: 0.86rem; color: var(--bo-muted); }

/* =========================================================================
   PAGE EVENTI
   ========================================================================= */
#page-hero { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--bo-sea), var(--bo-sea-deep)); padding: 5rem 0 4rem; }
#page-hero .container { z-index: 2; }
#ev-eyebrow { font-family: 'Baloo 2', sans-serif; font-weight: 700; letter-spacing: 0.3em; color: var(--bo-sun); text-transform: uppercase; margin-bottom: 0.6rem; }
#page-title { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); }
#ev-intro { color: #e9f4f6; font-size: 1.2rem; max-width: 44rem; margin: 1rem auto 0; }

#ev-figure { border-radius: 46% 54% 54% 46% / 52% 48% 52% 48%; overflow: hidden; box-shadow: var(--bo-shadow); border: 6px solid #fff; }
#ev-figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
#ev-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--bo-sun); color: var(--bo-ink); font-size: 1.5rem; margin-bottom: 1rem; }
#ev-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--bo-sea); text-transform: none; }
#ev-text { font-size: 1.14rem; color: #46565d; }

/* =========================================================================
   SEO + FOOTER
   ========================================================================= */
#seo { background: var(--bo-paper); border-top: 1px solid var(--bo-line); }
#seo h2 { color: var(--bo-sea); }
#seo p { color: var(--bo-muted); }

footer#colophon { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--bo-sea-deep), #07262e); color: #cfe3e8; padding: 3.4rem 0 2rem; }
#footer-bubbles { opacity: 0.6; }
#footer-name { color: #fff; font-family: 'Baloo 2', sans-serif; font-weight: 800; }
#footer-claim { color: var(--bo-sun); font-family: 'Baloo 2', sans-serif; font-weight: 600; letter-spacing: 0.06em; }
footer#colophon a, footer#colophon p { color: #cfe3e8; }
footer#colophon .bi { color: var(--bo-sun); }
#footer-social { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(255,255,255,0.12); margin-left: 0.5rem; font-size: 1.2rem; }
#footer-social:hover { background: var(--bo-sun); }
#footer-social:hover .bi { color: var(--bo-ink); }
#footer-rule { border-top-color: rgba(255, 255, 255, 0.14); opacity: 1; }
#copyright { color: #8fb0b8; }

/* =========================================================================
   forms + a11y
   ========================================================================= */
.form-control { background: #fff; border: 1px solid var(--bo-line); border-radius: 999px; padding: 0.7rem 1.3rem; }
.form-control:focus { border-color: var(--bo-sea); box-shadow: 0 0 0 0.2rem rgba(14, 124, 153, 0.18); }
.form-check-input:checked { background-color: var(--bo-sea); border-color: var(--bo-sea); }
a:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .form-control:focus-visible { outline: 2px solid var(--bo-sun); outline-offset: 2px; }
@media (max-width: 991.98px) { #hero { min-height: 70vh; padding: 4rem 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } #gal-figure:hover { transform: none; } }