:root { --home-search-nav-height:82px; }

html,
body {
    height: 100%;
}

body {
    color: #fff;
    text-align: center;
}
h1, h2, h3, h4, h5, h6 {
    text-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.site-wrapper {
    display: flex;
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 450px;
    background-color: #333;
    background: url('/img/Hero-TraiLive.webp') right center no-repeat;
    background-size: cover;
    flex-direction: column;
}

.site-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.60); /* 35% nero */
    z-index: 1;
}
.site-wrapper-inner {
    vertical-align: top;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    z-index:2;
}
.site-wrapper nav{
    z-index: 2;
}
.masthead {
    position: absolute;
    top: 0;
    left:0;
    width:100%;
}
.scroll-nav {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    display:flex;
}

.scroll-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.scroll-nav .nav {
    flex-wrap: nowrap !important;
}

.masthead-nav > li + li {
    margin-left: 20px;
}

.masthead-nav > li > a {
    padding-right: 0;
    padding-left: 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff; /* IE8 proofing */
    color: rgba(255,255,255,.75);
    text-decoration:none;
}

.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
    background-color: transparent;
    border-bottom-color: #a9a9a9;
    border-bottom-color: rgba(255,255,255,.25);
}

.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
    color: #fff;
    border-bottom-color: #fff;
}

.cover .btn-lg {
    padding: 10px 20px;
    font-weight: bold;
}

#brand {
    white-space: nowrap;
    max-width: 0; 
    opacity: 0;
    transition: max-width .25s ease, opacity .25s ease;
}
#mainNav {
    position:sticky;
    top:0;
    margin-top:calc(-1 * var(--home-search-nav-height));
    z-index:3;
}
.is-sticky #brand {
    max-width: 180px; /* spazio che vuoi dedicare al brand */
    opacity: 1;
}
.is-sticky {
    background: #64B5E1;
   
}
.event-list-section{
    min-height:500px
}

.stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6c757d;
    letter-spacing: .03em;
}

.stat-value {
    font-size: 1.2rem;
    font-weight: 600;
}

a .card {
    transition: background-color .12s ease, box-shadow .12s ease;
}

a:hover .card {
    background-color: #f8f9fa;
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.05);
}









/* Event directory shares the event pages' card language. */
body { color: var(--bs-body-color); text-align: left; }
.site-wrapper { position: relative; color: white; text-align: center; height: auto; min-height: 100dvh; padding: 7rem 0 6rem; }
.site-wrapper-inner, .site-wrapper-inner > .container, .cover { min-width: 0; width: 100%; }
.event-list-section { padding-bottom: 2rem; }
.event-list-section .event-list { padding:1rem .75rem; padding-left:12px !important; padding-right:12px !important; }
.featured-events { text-align: left; margin-top: 1.5rem; }
.events-swiper { padding: 2px 2px 36px; --swiper-theme-color: white; }
.events-swiper .swiper-wrapper { align-items: stretch; }
.events-swiper .swiper-slide { height: auto; display: flex; }
.featured-events .swiper-button-lock { display: none; }
.featured-events button:disabled { opacity: .4; }
.event-list-section > h3 { text-align: center; }
@media (max-width: 767px) {
    .event-list-section .event-list { padding:.75rem .75rem; padding-left:12px !important; padding-right:12px !important; }
}
@media (prefers-reduced-motion: reduce) { .scroll-down-arrow { animation: none; } }

.home-masthead-content{display:flex;align-items:center;justify-content:space-between;gap:24px}.home-photo-brand{display:inline-flex;flex-shrink:0;text-decoration:none}.home-photo-brand .wedosport-logo{width:210px}.home-photo-brand .live-brand-label{display:none}.home-masthead-content .scroll-nav{min-width:0}.home-masthead-content .nav{margin:0}
@media(max-width:767px){.home-masthead-content{flex-direction:column;align-items:flex-start;gap:14px}.home-photo-brand .wedosport-logo{width:170px}.home-masthead-content .scroll-nav{width:100%}}

/* Card elenco e in evidenza condividono tipografia e superfici del live. */
.event-live-card { min-width:0; border-radius:16px; border:1px solid #e4e9ee; box-shadow:0 3px 16px rgb(23 43 68 / 6%); background:#fff; color:#193b43; overflow:hidden; }
.event-live-card h3 { margin:0; font-size:18px; line-height:1.35; font-weight:700; letter-spacing:-.015em; text-shadow:none; overflow-wrap:anywhere; }
.event-card-link { display:grid; grid-template-columns:68px minmax(0,1fr) 32px; align-items:center; gap:16px; padding:14px 18px; color:inherit; text-decoration:none; transition:background-color .15s; }
.event-card-link:hover { background:#f8fbfd; color:inherit; }
.event-card-link:focus-visible { outline:3px solid #1769e0; outline-offset:-3px; border-radius:16px; }
.event-card-content { min-width:0; }
.event-card-heading { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:8px; }
.event-card-heading h3 { flex:1 1 250px; }
.event-card-status { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; padding:5px 9px; border:1px solid #dce6eb; border-radius:7px; background:#eef3f6; color:#5b707b; font-size:11px; line-height:1.2; font-weight:700; }
.event-card-status.is-live { color:#267651; background:#e7f5ed; border-color:#cbe6d5; }
.event-card-status.is-live::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.event-card-meta { display:flex; flex-wrap:wrap; gap:6px 16px; color:#657a85; font-size:13px; line-height:1.5; min-width:0; }
.event-card-meta > span { display:flex; align-items:baseline; gap:7px; min-width:0; }
.event-card-meta > span i { color:#7394a3; flex-shrink:0; }
.event-card-arrow { display:grid; place-items:center; width:32px; height:32px; border:1px solid #e1e9ee; border-radius:10px; background:#f4f8fa; color:#426675; }
.container-event-flyer { width:68px; flex-shrink:0; }
.event-flyer, .featured-event-image { display:block; width:100%; aspect-ratio:3/4; object-fit:contain; background:#f4f7fa; border-radius:9px; }
.event-flyer-placeholder { display:grid; place-items:center; width:100%; aspect-ratio:3/4; background:#eef3f6; color:#48616e; font-size:1.6rem; font-weight:700; letter-spacing:.04em; border:1px solid #e4ebef; border-radius:9px; }
.event-flyer-placeholder[hidden], .event-flyer[hidden], .featured-event-image[hidden] { display:none; }
.featured-event-card { padding:16px; min-height:0; text-align:left; }
.featured-event-card > h3 { margin-bottom:12px; }
.featured-event-body { display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; margin-bottom:14px; }
.featured-event-flyer { width:64px; }
.featured-event-body .event-card-meta { flex-direction:column; flex-wrap:nowrap; gap:6px; }
.event-card-distances { display:flex; flex-wrap:wrap; gap:5px; }
.event-card-distances span { padding:3px 7px; border:1px solid #e1e9ee; border-radius:6px; background:#f4f8fa; font-size:11px; color:#526c79; }
.featured-event-action { display:inline-flex; align-items:center; gap:16px; align-self:flex-start; margin-top:auto; border-radius:9px; padding:9px 14px; font-size:13px; font-weight:600; }
@media(max-width:575px) {
    .event-card-link { grid-template-columns:52px minmax(0,1fr); gap:10px; padding:12px; }
    .container-event-flyer { width:52px; }
    .event-live-card h3 { font-size:16px; }
    .event-card-heading { gap:6px; margin-bottom:7px; }
    .event-card-heading h3 { flex-basis:100%; }
    .event-card-meta { flex-direction:column; gap:5px; font-size:12px; }
    .event-card-arrow { display:none; }
    .event-flyer-placeholder { font-size:1.25rem; }
    .featured-event-card { padding:14px; }
}

.event-list-section .event-list-heading { position:sticky; top:var(--home-search-nav-height); z-index:1; display:flex; align-items:center; gap:10px; margin-bottom:0; padding:14px 12px; padding-left:12px !important; padding-right:12px !important; background:var(--ws-bg-background,#f2f2f2); color:#193b43; font-size:15px; font-weight:700; text-shadow:none; }
.event-list-heading::before { content:""; width:7px; height:7px; flex-shrink:0; border-radius:50%; background:#758995; }
[data-event-group="Progress"] .event-list-heading::before { background:#267651; }
[data-event-group="Future"] .event-list-heading::before { background:#1769a3; }