/* Responsive overrides - minimal, non-destructive rules to make layout fluid
   Keep existing colors, fonts and imagery; only change sizing, flow and
   stacking behaviour. Loaded after all.css so it overrides where necessary.
*/

/* Allow the page to shrink on small devices (original CSS set a min-width) */
html, body {
    min-width: 0 !important;
}

/* Use border-box to make width calculations easier for responsive tweaks */
*, *:before, *:after {
    box-sizing: border-box;
}

/* Make images fluid */
img, .visual img, .gallery .img-holder img, .clients .img-holder img, .immagine-sx img {
    max-width: 100%;
    height: auto;
}

/* Basic container responsiveness: keep centered max-width but allow smaller screens */
.header-holder, .intro-holder, .main-holder, .info-container, .info-holder, .footer-section-holder, .footer-row-holder {
    width: 100% !important;
    max-width: 980px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
}

/* Make wrapper adapt */
#wrapper {
    width: 100%;
}

/* Navigation adjustments */
#nav ul {
    float: none !important;
    text-align: center;
}
#nav li {
    float: none !important;
    display: inline-block !important;
    margin: 0 12px !important;
}

/* Main content and sidebar stack on smaller screens */
#content, #sidebar, .info-section {
    width: 100% !important;
    float: none !important;
    margin: 0 0 20px 0 !important;
    max-width: none !important;
}

/* Ensure info-section and sidebar have proper layout */
.main-holder > #content,
.main-holder > #sidebar {
    width: 100% !important;
    max-width: 100% !important;
}

/* Header: logo and header block should stack on small widths */
.logo_it, .logo_en, .logo-mini {
    float: none !important;
    display: block !important;
    margin: 12px auto 8px auto !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    width: auto !important;
    height: 60px !important;
}
.header-block {
    float: none !important;
    width: 100% !important;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* Make form elements adapt */
.sitesearch-textinput, form.block-form .textinput, .textinput {
    width: 100% !important;
}
.sitesearch-button {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-top: 8px;
}

/* Image floated left in article: on small screens take full width */
.immagine-sx {
    float: none !important;
    width: 100% !important;
    margin: 0 0 15px 0 !important;
}

/* Clearfix behaviour assurance */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* Breakpoints */
@media screen and (max-width: 1024px) {
    .slide, .slide li {
        width: 100% !important;
        height: auto !important;
    }
    .slide-holder {
        position: relative !important;
        padding: 20px !important;
        background-position: center !important;
    }
    .slide-pagination { right: 20px !important; }
    .main-holder { padding-left: 18px !important; padding-right: 18px !important; }
    
    /* Form refinement */
    form.block-form .textinput { width: 100% !important; }
    form.block-form .textarea { width: 100% !important; min-width: 100% !important; }
    .header-form { width: 100% !important; float: none !important; margin-top: 12px; }
}

@media screen and (max-width: 768px) {
    /* reduce body padding to maximize content space */
    body { padding: 0; font-size: 14px; }
    .main-holder { padding: 18px 16px 0; }
    .header-holder { padding: 0 12px; }
    
    /* stack nav items vertically if many items; otherwise they stay inline */
    #nav ul { text-align: left; }
    #nav li { display: block !important; margin: 6px 0 !important; }

    /* reduce paddings so content fits on smaller screens */
    .info-holder h2, #content h2 { font-size: 20px !important; line-height: 1.2; }
    .intro-info h1 { width: 100% !important; float: none !important; text-align: left; font-size: 18px; }
    .intro-info { padding: 18px 16px; }

    /* footer and partner blocks stack */
    .contact-block, .partner-block, .footer-block { width: 100% !important; float: none !important; margin: 0 0 18px 0 !important; }
    
    /* form improvements */
    form.block-form .textinput, form.block-form .textarea { width: 100% !important; }
    .header-form fieldset { width: 100% !important; }
    .sitesearch-textinput { width: calc(100% - 40px) !important; }
    
    /* news and gallery items full width */
    .news-thumb { width: 100% !important; float: none !important; margin: 0 0 15px 0 !important; }
    .events-block li { width: 100% !important; margin: 0 0 18px 0 !important; }
    .clients li { width: 100% !important; margin: 0 0 18px 0 !important; }
}

@media screen and (max-width: 480px) {
    body { font-size: 13px !important; }
    .main-holder { padding: 12px 12px 0; }
    .header-holder { padding: 0 8px; }
    
    #nav li { margin: 10px 0 !important; }
    .logo_it, .logo_en, .logo-mini { height: 40px !important; background-size: contain !important; width: auto !important; }
    
    .slide-holder p, .slide-holder h1, .slide-holder h2 { font-size: 12px !important; }
    .info-holder h2, #content h2 { font-size: 18px !important; margin: 0 0 12px 0 !important; }
    .intro-info h1 { font-size: 16px !important; }
    
    .events-block li, .information .box, .gallery li, .clients li { width: 100% !important; display: block !important; margin: 0 0 16px 0 !important; }
    .paging { text-align: center !important; }
    
    /* tighter spacing on very small screens */
    .footer-section-holder { padding: 20px 16px 40px; }
    .footer-row-holder { padding: 12px 16px; }
    
    /* buttons and links more touch-friendly */
    .btn-more, .button, a { min-height: 44px; display: inline-flex; align-items: center; }
    form.block-form li { padding: 8px 0; }
}

/* Minor tweaks to preserve visual identity while letting layout flow */
.btn-more, .button { display: inline-block; }

/* Typography improvements for readability on all screen sizes */
p { word-wrap: break-word; overflow-wrap: break-word; }
a { word-wrap: break-word; }

/* Ensure touch targets are minimum 44px height on mobile */
@media screen and (max-width: 768px) {
    a, button, input[type="submit"], input[type="button"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 8px 12px;
    }
}


/* Flexbox enhancements for better responsive layouts */
.header-block { display: flex; flex-wrap: wrap; align-items: center; }
.wrap { flex: 1 1 100%; }

.footer-section-holder {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.contact-block, .partner-block, .footer-block { flex: 1 1 100%; min-width: 200px; }

.information { display: flex; flex-wrap: wrap; gap: 16px; }
.information .box { flex: 1 1 100%; min-width: 150px; }

/* Off-canvas mobile menu styles */
#nav-toggle {
    display: none;
    position: absolute;
    left: 18px;
    top: 18px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 2000;
}

.nav-wrap {
    transition: transform 0.25s ease;
}

/* Overlay when menu is open */
.nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
}

/* Body state when nav is open */
body.nav-open .nav-wrap {
    transform: translateX(0) !important;
}

/* Mobile specifics: show toggle and make nav off-canvas */
@media screen and (max-width: 768px) {
    #nav {
        position: fixed;
        top: 0;
        left: -280px;
        width: 260px;
        height: 100%;
        background: #070809;
        padding: 60px 20px 20px 20px;
        z-index: 1000;
        overflow-y: auto;
        transform: translateX(-100%);
        box-shadow: 2px 0 8px rgba(0,0,0,0.3);
    }
    .nav-wrap {
        transform: translateX(-100%);
    }
    body.nav-open .nav-wrap {
        transform: translateX(0);
    }
    #nav ul { float: none; text-align: left; }
    #nav li { display: block; margin: 8px 0; }
    #nav a { color: #fff; display: block; padding: 6px 0; }
    #nav .active a, #nav a:hover { background: none; color: #fa5b00; }
    #nav-toggle { display: block; }
    .nav-overlay { display: block; }
    
    /* Also close menu on nav link click via JS in offcanvas.js */
}