/* --------- Variabili --------- */
:root {
    --primario: #23b59f;
    --chiaro: #1cd8bc;
    --bianco: #fff;
    --nero: #0f0f0f;
    --scuro: #138482;
    --scuroGradiente: #0D998F;
    --grigio: #323c3b;
    --grigioChiaro: #bfbfbf;
    --accentoRosso: #f8333c;
    --shadow-soft: 0 5px 12px rgba(0, 0, 0, .2), inset 0 1.5px 0 rgba(255, 255, 255, .1), inset 0 1.5px 0 rgba(255, 255, 255, .1);
    --servizi-shift: 8px;
    --contatti-shift: 14px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primario: #53baaa;
        --chiaro: #128776;
        --scuroGradiente: #0a756e;
        --grigio: #cbbfbf;
        --grigioChiaro: #737373;
    }
}

/* --------- Reset --------- */
* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    padding: 0
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #F8F8F8;
    color: var(--nero);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (prefers-color-scheme: dark) {
    body {
        background: rgb(52, 53, 56);
        color: #e9efed
    }
}

p {
    font-size: 16px;
    line-height: 1.5
}

a {
    color: inherit;
    text-decoration: none
}

/* =======================
   TOP NAV + BURGER
   ======================= */
.topnav {
    position: fixed;
    right: 0;
    width: 100%;
    height: 50px;
    z-index: 90;
    overflow: hidden;
    transform-style: preserve-3d;
    background-color: rgba(35, 181, 159, .76);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

#logo {
    float: left;
    margin-left: 10px;
    padding-left: env(safe-area-inset-left) !important
}

#logo-pic {
    height: 32px !important;
    width: auto;
    display: block;
    max-height: none;
    margin-top: -2px;
    margin-left: env(safe-area-inset-left) !important
}

.topnav a {
    float: right;
    display: block;
    color: #fff;
    text-align: center;
    padding: 11px;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 27px;
}

.topnav a.icon {
    display: none;
    color: #fff
}

.topnav a:hover {
    color: #fff;
    text-shadow: 0 1px 16px rgba(193, 255, 229, .85)
}

.active {
    color: #fff;
    box-shadow: inset 0 5px #fff
}

/* Mobile: burger sempre visibile; voci in colonna quando aperto */
@media (max-width: 800px) {
    .topnav a {
        display: none !important;
        float: none;
    }

    .topnav a#logo {
        display: block !important;
        float: none;
    }

    .topnav a.icon {
        display: block !important;
        position: absolute;
        right: 0;
        top: 0;
        width: 52px;
        text-align: center;
        font-size: 26px;
        padding: 11px 0;
    }

    .topnav.responsive {
        position: fixed;
        height: auto;
        padding-bottom: 10px;
    }

    .topnav.responsive a {
        display: block !important;
        width: 100%;
        float: none !important;
        clear: both;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .topnav.responsive a#logo {
        border-top: 0;
        text-align: left
    }

    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
        border: 0
    }
}

/* =======================
   LAYOUT
   ======================= */
.web-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    background: #F8F8F8;
    overflow-x: hidden;
    padding-bottom: 60px;
}

@media (prefers-color-scheme: dark) {
    .web-content {
        background: rgb(36, 36, 38)
    }
}

.sezione-home {
    position: relative;
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    max-width: 608px;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    align-items: center;
}

@media (min-width: 928px) {
    .sezione-home {
        max-width: 912px
    }
}

@media (max-width: 664px) {
    .sezione-home {
        max-width: 304px
    }
}

.spacerline {
    display: flex;
    width: 80%;
    height: 1px;
    margin: 7px auto;
    background-color: rgba(0, 0, 0, .2)
}

/* =======================
   HERO
   ======================= */
.hero {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    align-content: center;
    width: 100%;
    margin-bottom: 12px
}

.HeroPicture {
    background-image: url("../immagini/HeroLogoDay.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 120px;
    padding: 0;
    /* fisso: non si schiaccia */
}

@media (prefers-color-scheme: dark) {
    .HeroPicture {
        background-image: url("../immagini/HeroLogoNight.png")
    }
}

@media (max-width: 640px) {
    .HeroPicture {
        height: 100px
    }
}

/* =======================
   CARDS + HOVER
   ======================= */
.card-home {
    background: black;
    align-self: center;
    width: 296px;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    flex-direction: column
}

.card-home-2 {
    background: black;
    flex-basis: 600px;
    overflow: hidden;
    text-decoration-line: none
}

@media (max-width: 928px) {
    .card-home-2 {
        flex-basis: 296px
    }
}

.card-home-3 {
    background: black;
    flex-basis: 976px
}

.card-home, .card-home-2, .card-home-3 {
    position: relative;
    z-index: 1;
    height: 296px;
    margin: 4px;
    border-radius: 15px;
    overflow: hidden;
    background-color: transparent;
    box-shadow: var(--shadow-soft);
    text-decoration-line: none;
}

.bottone {
    box-shadow: 0 8px 4px -5px rgba(0, 0, 0, .15), inset 0 2.5px 0 rgba(255, 255, 255, .1), inset 0 2.5px 0 rgba(255, 255, 255, .1)
}

.bottone:hover {
    transition: all .25s ease-in;
    box-shadow: 0 28px 40px -21px rgba(0, 0, 0, .45), inset 0 2.5px 0 rgba(255, 255, 255, .1), inset 0 2.5px 0 rgba(255, 255, 255, .1);
    transform: perspective(100px) translateZ(8px);
}

.card-home:hover, .card-home-2:hover, .card-home-3:hover {
    transition: all .35s ease-in;
    box-shadow: 0 15px 30px rgba(0, 0, 0, .2), inset 0 2.5px 0 rgba(255, 255, 255, .1), inset 0 2.5px 0 rgba(255, 255, 255, .1);
    transform: perspective(100px) translateZ(8px);
    z-index: 999 !important;
    /* vinci sempre in hover */
}

.titolo-card {
    position: relative;
    z-index: 1;
    margin: 8px 18px 0;
    color: #fff;
    font-size: 34px;
    line-height: 38px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Titolo ORARI coerente con le altre card */
#titolo-orari .titolo-orari {
    font: inherit;
    color: inherit;
    text-transform: inherit;
    margin: 0;
}

/* --------- Card ORARI --------- */
#orari {
    background-color: var(--scuro);
    /* fallback pieno */
    background-image: linear-gradient(135deg, var(--scuro), var(--scuroGradiente));
}

#aperti-ora-p {
    max-width: 230px;
    color: #fff;
    margin: auto;
    text-align: center;
    font-size: 18px;
    margin-top: 12px;
    margin-bottom: 16px;
    opacity: .7;
    font-weight: 700;
}

/* contenitore centrato e compatto */
#spazio-testo-orari {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    /* forza il centraggio di eventuali figli inline */
    margin-top: 10px;
    /* abbassa leggermente le scritte */
}
/* tabelle shrink-to-fit e centrate */

.testo-orari {
    display: table;
    /* tabelle vere per allineamento preciso */
    width: 230px;
    /* larghezza uniforme tra le tre righe */
    margin: 0 auto 6px;
    table-layout: fixed;
    /* stessa larghezza colonne su tutte */
    border-collapse: collapse;
    color: #fff;
    font-size: 18px;
    opacity: .9;
    line-height: 1.25;
}
/* forziamo width/table-layout anche se restano style inline nell'HTML */

table.testo-orari[style] {
    width: 230px !important;
    table-layout: fixed !important;
}
/* colonna valori a destra, numeri tabulari */

.testo-orari td:last-child {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.testo-orari td {
    padding: 2px 0;
    vertical-align: middle;
}

.testo-orari td:first-child {
    width: 96px;
    /* colonna etichette fissa */
    text-align: left;
    font-weight: 700;
    white-space: nowrap;
    padding-right: 12px;
}

#orari-matt, #orari-pom, #orari-matt2 {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* --------- Card DOVE SIAMO + mappa --------- */
#titolo-dove-siamo-card {
    position: absolute;
    z-index: 10;
    text-shadow: 0 8px 50px #000
}

#dove-siamo-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, gray, white);
    box-shadow: inset 0 -30px 30px 30px rgba(0, 0, 0, 1);
    z-index: 10;
    position: relative;
}

#map {
    height: 120%;
    width: 100%;
    border-radius: 15px
}

.mapsShadow {
    position: absolute;
    align-self: flex-end;
    max-width: 600px;
    width: 100%;
    height: 80px;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 51%, rgba(0, 0, 0, .15) 68%, rgba(0, 0, 0, .5) 82%, rgba(0, 0, 0, .6) 100%);
    margin-top: 216px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

@media (max-width: 928px) {
    .mapsShadow {
        width: 296px
    }
}

/* Pulsanti mappa */
.mapsButton {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 3;
    width: 70px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .42);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

#mapsButton-right {
    right: 10px
}

#mapsButton-center {
    right: 90px
}

#mapsButton-left {
    right: 170px
}

#naviga-icon {
    color: #fff;
    font-size: 26px;
    line-height: 1
}

@media (hover: hover) {
    .mapsButton:hover {
        background-color:var(--accentoRosso)
    }

    #dove-siamo-card:hover .mapsButton {
        transform: translateX(2px)
    }
}

/* --------- Card SERVIZI (icona centrata + reveal) --------- */
#servizi-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: var(--scuro);
    /* fallback pieno */
    background-image: linear-gradient(135deg, var(--scuro), var(--scuroGradiente));
    position: relative;
    z-index: 1;
}

#sfondo-servizi-card {
    position: absolute !important;
    inset: 0;
    margin: 0;
    background-position: center calc(0% + var(--servizi-shift)) !important;
    background-repeat: no-repeat !important;
    background-size: 94% auto !important;
    opacity: .95;
    z-index: 0;
}

#descrizione-servizi-card {
    position: relative;
    align-self: center;
    width: 265px;
    margin-top: 30px;
    font-size: 18px;
    color: #fff;
    z-index: 3;
    font-weight: 700;
    top: 300px;
    opacity: 0;
}

@media (hover: hover) {
    #servizi-card:hover #sfondo-servizi-card {
        filter: blur(15px);
        opacity: .7;
        background-size: 70% auto !important;
        transition:all .2s ease-in-out
    }

    #servizi-card:hover #descrizione-servizi-card {
        transition: all .6s ease-out;
        opacity: 1;
        top: 0
    }
}

/* --------- Card CHI SIAMO --------- */
#chi-siamo-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #FACF81;
    position: relative;
    z-index: 15;
}

#sfondo-chi-siamo-card {
    position: absolute;
    background-image: linear-gradient(135deg, #19928D, #23B59F);
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    background-clip: content-box;
    width: 296px;
    height: 296px;
    flex-basis: 296px;
    border-radius: 15px;
}

#descrizione-chi-siamo-card {
    position: relative;
    align-self: center;
    width: 265px;
    margin-top: 30px;
    font-size: 18px;
    color: #fff;
    z-index: 3;
    font-weight: 700;
    top: 300px;
    opacity: 0;
}

@media (hover: hover) {
    #chi-siamo-card:hover #sfondo-chi-siamo-card {
        filter: blur(15px);
        opacity: .7;
        background-size: 80%;
        transition:all .1s ease-in-out
    }

    #chi-siamo-card:hover #descrizione-chi-siamo-card {
        transition: all .6s ease-out;
        opacity: 1;
        top: 0
    }
}

/* --------- Card CONTATTI (sopra la mappa e centrata) --------- */
#contatti-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: var(--scuro);
    /* fallback pieno */
    background-image: linear-gradient(135deg, var(--scuro), var(--scuroGradiente));
    position: relative;
    z-index: 20;
}

#sfondo-contatti-card {
    position: absolute !important;
    inset: 0;
    margin: 0;
    background-image: url("../immagini/Contatti.svg") !important;
    background-position: center calc(-80% + var(--contatti-shift)) !important;
    background-size: 94% auto !important;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 0;
}

#descrizione-contatti-card {
    position: relative;
    align-self: center;
    width: 265px;
    margin-top: 30px;
    font-size: 18px;
    color: #fff;
    z-index: 3;
    font-weight: 700;
    top: 300px;
    opacity: 0;
}

@media (hover: hover) {
    #contatti-card:hover #sfondo-contatti-card {
        filter: blur(15px);
        opacity: .7;
        transition:all .1s ease-in-out
    }

    #contatti-card:hover #descrizione-contatti-card {
        transition: all .6s ease-out;
        opacity: 1;
        top: 0
    }
}

/* =======================
   FOOTER
   ======================= */
.footer {
    background: #e9efed;
    color: #253e37;
    padding: 18px 0 26px;
    margin-top: 20px
}

.footer-a, .footer-b {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 16px
}

.footer-a {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 18px;
    align-items: start
}

@media (max-width: 720px) {
    .footer-a {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 420px) {
    .footer-a {
        grid-template-columns: 1fr
    }
}

.footer-column-a, .footer-column-b {
    min-width: 160px
}

.title-footer {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    color: #253e37
}

.footer-text {
    margin: 2px 0;
    font-size: 15px;
    line-height: 1.35;
    color: #253e37
}

.link-footer {
    color: #253e37;
    text-decoration: none
}

.footer-b {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, .08)
}

.footer-b .footer-column-b {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px
}

.footer-b i {
    font-size: 22px
}

.footer-b .footer-text {
    margin: 0
}

@media (prefers-color-scheme: dark) {
    .footer {
        background: #0f0f0f;
        color:#e9efed
    }

    .title-footer, .footer-text, .link-footer {
        color: #e9efed
    }
}

/* =======================
   Sezioni immagini / marchi
   ======================= */
.hero.big {
    height: 24em;
    margin-bottom: 5em
}

@media (max-width: 928px) {
    .hero.big {
        height: 16em
    }
}

.scroll-immagini-farmacia {
    margin-top: 150px;
    padding-bottom: 40px;
    display: flex;
    overflow: auto;
    scroll-behavior: smooth;
    max-height: 700px;
    height: 30%;
    align-self: center;
    z-index: 100
}

.immagine-farmacia {
    align-self: center;
    width: 80%;
    max-width: 500px;
    max-height: 400px;
    height: auto;
    flex-shrink: 0;
    border-radius: 15px;
    margin: 10px;
    box-shadow: 0 10px 34px -10px rgba(0, 0, 0, .31);
    z-index: 5
}

.nostri-marchi {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center
}

/* --------- Brand grid --------- */
@media (hover: hover) {
    .marchio, .marchio-invert {
        padding: 20px;
        height: 100px;
        width: 50px;
        max-width: 231px;
        flex-shrink: 0;
        filter: grayscale();
        opacity: .5
    }

    .marchio:hover {
        border-radius: 25px;
        background: #fff;
        filter: none;
        opacity: 1
    }

    .marchio-invert:hover {
        border-radius: 25px;
        background: #fff;
        filter: invert(0);
        opacity: 1
    }
}

@media (hover: none) {
    .marchio, .marchio-invert {
        margin: 20px;
        height: 100px;
        width: 50px;
        max-width: 231px;
        flex-shrink: 0
    }
}

@media (prefers-color-scheme: dark) {
    .marchio-invert {
        filter: invert(1) grayscale()
    }
}

.text-marchi {
    font-size: 25px;
    max-width: 90%;
    margin: auto;
    padding: 40px 0 20px
}