/* ================================================
   base.css
   Stili condivisi da TUTTE le pagine del sito.
   Includere in ogni pagina PRIMA del CSS specifico.
   
   Contiene: font, body/sfondo animato, scrollbar,
             navbar, search desktop, search mobile hero,
             search highlight, footer.
================================================ */

/* ================================================
   FONT — Berlin Sans FB
================================================ */
@font-face {
    font-family: "Berlin Sans FB Demi";
    src: url("../fonts/Berlin Sans FB Demi Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Berlin Sans FB";
    src: url("../fonts/Berlin Sans FB.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.font-berlin-bold {
    font-family: "Berlin Sans FB Demi", sans-serif;
    font-weight: 700;
}

.font-berlin {
    font-family: "Berlin Sans FB", sans-serif;
    font-weight: 400;
}

/* ================================================
   CUSTOM SCROLLBAR
================================================ */
::-webkit-scrollbar         { width: 8px; height: 8px; }
::-webkit-scrollbar-track   { background: #f1f1f1; border-radius: 10px; }
::-webkit-scrollbar-thumb   { background: #bbb; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #888; }

/* ================================================
   BODY — sfondo animato
================================================ */
body {
    min-height: 100vh;
    background-color: #fff0dc;
    background-image:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(255,180,60,0.45) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 80%, rgba(255,110,20,0.35) 0%, transparent 55%),
        radial-gradient(ellipse 50% 70% at 50% 50%, rgba(255,200,100,0.25) 0%, transparent 70%);
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    animation: bgShift 14s ease-in-out infinite alternate;
}

@keyframes bgShift {
    0%   {
        background:
            radial-gradient(circle 520px at 15% 30%,  rgba(255,170,30,0.38)  0%, transparent 65%),
            radial-gradient(circle 420px at 85% 20%,  rgba(255,100,0,0.28)   0%, transparent 65%),
            radial-gradient(circle 600px at 50% 90%,  rgba(255,190,70,0.32)  0%, transparent 65%),
            radial-gradient(circle 380px at 70% 55%,  rgba(255,140,20,0.24)  0%, transparent 65%);
    }
    33%  {
        background:
            radial-gradient(circle 580px at 30% 60%,  rgba(255,170,30,0.42)  0%, transparent 65%),
            radial-gradient(circle 360px at 75% 10%,  rgba(255,100,0,0.32)   0%, transparent 65%),
            radial-gradient(circle 500px at 20% 85%,  rgba(255,190,70,0.28)  0%, transparent 65%),
            radial-gradient(circle 440px at 80% 70%,  rgba(255,140,20,0.30)  0%, transparent 65%);
    }
    66%  {
        background:
            radial-gradient(circle 460px at 60% 15%,  rgba(255,170,30,0.30)  0%, transparent 65%),
            radial-gradient(circle 540px at 10% 70%,  rgba(255,100,0,0.36)   0%, transparent 65%),
            radial-gradient(circle 480px at 80% 50%,  rgba(255,190,70,0.38)  0%, transparent 65%),
            radial-gradient(circle 350px at 40% 80%,  rgba(255,140,20,0.22)  0%, transparent 65%);
    }
    100% {
        background:
            radial-gradient(circle 620px at 80% 40%,  rgba(255,170,30,0.34)  0%, transparent 65%),
            radial-gradient(circle 400px at 20% 10%,  rgba(255,100,0,0.30)   0%, transparent 65%),
            radial-gradient(circle 560px at 60% 75%,  rgba(255,190,70,0.36)  0%, transparent 65%),
            radial-gradient(circle 420px at 10% 50%,  rgba(255,140,20,0.28)  0%, transparent 65%);
    }
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Ccircle cx='80'  cy='80'  r='5' fill='%23ff9900' opacity='0.35'/%3E%3Ccircle cx='220' cy='160' r='3' fill='%23ffbb33' opacity='0.28'/%3E%3Ccircle cx='400' cy='60'  r='6' fill='%23ff7700' opacity='0.25'/%3E%3Ccircle cx='520' cy='220' r='4' fill='%23ffcc44' opacity='0.32'/%3E%3Ccircle cx='150' cy='400' r='5' fill='%23ff9900' opacity='0.28'/%3E%3Ccircle cx='460' cy='380' r='4' fill='%23ffbb33' opacity='0.30'/%3E%3Ccircle cx='300' cy='300' r='7' fill='%23ffdd66' opacity='0.20'/%3E%3Ccircle cx='540' cy='500' r='5' fill='%23ff8800' opacity='0.25'/%3E%3Ccircle cx='60'  cy='520' r='4' fill='%23ffcc44' opacity='0.28'/%3E%3Crect   x='340' y='440' width='10' height='10' rx='2' fill='%23ff9900' opacity='0.22' transform='rotate(30 345 445)'/%3E%3Crect   x='120' y='250' width='8'  height='8'  rx='2' fill='%23ffbb33' opacity='0.26' transform='rotate(45 124 254)'/%3E%3Cpolygon points='480,130 496,158 464,158' fill='%23ff7700' opacity='0.22'/%3E%3Cpolygon points='200,480 216,508 184,508' fill='%23ff9900' opacity='0.18'/%3E%3C/svg%3E");
    background-size: 600px 600px;
    animation: particleDrift 22s linear infinite;
}

@keyframes particleDrift {
    from { background-position: 0 0; }
    to   { background-position: 600px 600px; }
}

body > * { position: relative; z-index: 1; }

/* ================================================
   NAVBAR
================================================ */
.navbar {
    background-color: #ff7000 !important;
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 1rem;
}

.navbar-logo {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

.navbar-logo img {
    height: 50px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

@media (min-width: 768px) {
    .navbar-logo          { flex: 0 0 auto; }
    .navbar-logo img      { max-width: none; }
}

/* ================================================
   SEARCH BAR — DESKTOP (barra espandibile inline)
================================================ */
.search-wrapper {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px);
    border-radius: 9999px;
    padding: 0.25rem;
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

.search-wrapper:focus-within {
    background: white;
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}

.search-input {
    width: 0;
    opacity: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    transition: width 0.35s ease, opacity 0.25s ease;
    color: #1f2937;
}

.search-input.open {
    width: 260px;
    opacity: 1;
}

.search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    color: #fff;
    background: rgba(255,255,255,0.2);
    border: none;
    cursor: pointer;
    transition: background 0.25s ease;
}

.search-btn:hover { background: rgba(255,255,255,0.4); }

/* ================================================
   SEARCH BAR — MOBILE HERO
================================================ */
.mobile-hero-search { margin-top: 1.5rem; padding: 0 0.25rem; }

.mobile-hero-search-inner {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 9999px;
    box-shadow: 0 4px 20px rgba(255, 112, 0, 0.20);
    padding: 0.35rem 0.35rem 0.35rem 1rem;
    border: 2px solid rgba(255, 112, 0, 0.25);
    transition: box-shadow 0.25s, border-color 0.25s;
}

.mobile-hero-search-inner:focus-within {
    box-shadow: 0 6px 24px rgba(255, 112, 0, 0.35);
    border-color: #ff7000;
}

.mobile-hero-search-icon {
    color: #ff7000;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.mobile-hero-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    color: #1f2937;
    min-width: 0;
}

.mobile-hero-search-input::placeholder { color: #9ca3af; }

.mobile-hero-search-btn {
    flex-shrink: 0;
    background: #ff7000;
    color: #fff;
    border: none;
    border-radius: 9999px;
    padding: 0.45rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.mobile-hero-search-btn:hover  { background: #e56500; }
.mobile-hero-search-btn:active { transform: scale(0.96); }

/* ================================================
   SEARCH HIGHLIGHT
================================================ */
mark.search-highlight {
    background-color: #fde68a;
    color: #111827;
    border-radius: 2px;
    padding: 0 2px;
    font-weight: inherit;
}

/* ================================================
   FOOTER
================================================ */
footer { position: relative; z-index: 1; }

/* ================================================
   MISC
================================================ */
main.relative { overflow-x: hidden; }