/**
 * Theme Name:     Kadence Child 2026
 * Author:         Gaiaideaweb & Kadence WP
 * Template:       kadence
 * Text Domain:	   kadence-child-2026
 * Description:    Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
 */
.entry-header
{
  padding-left: 20px;
  padding-right: 40px;
}
.entry-content {
  padding-left: 20px;
  padding-right: 40px;
}
.aggiornamento-bimbi-dati {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  margin: 50px;
  border-left: 4px solid #4CAF50;
  width: 80%;
  box-sizing: border-box;
}

/* Desktop (default sopra) */

/* Tablet e smartphone (1024px e inferiori) */
@media (max-width: 1024px) {
  .aggiornamento-bimbi-dati {
    margin: 30px; /* Riduci tutti i margini */
    width: 90%; /* Più largo ma non troppo */
  }
}

/* Smartphone (768px e inferiori) */
@media (max-width: 768px) {
  .aggiornamento-bimbi-dati {
    margin: 20px 10px 20px 20px; /* Destra:10px, Sinistra:20px */
    width: calc(100% - 30px); /* Occupa quasi tutta la larghezza */
  }
}

/* Smartphone piccoli (480px e inferiori) */
@media (max-width: 480px) {
  .aggiornamento-bimbi-dati {
    margin: 15px 8px 15px 15px;
    width: calc(100% - 23px);
    padding: 15px;
  }
}
.aggiornamento-bimbi-dati p {
    margin: 8px 50px;
    font-size: 1.05em;
}
.dati-bambino-tabella {
    margin: 50px;
}
.wp-site-blocks {
  margin: 50px;
}


/* Stile desktop base */
.content-width-fullwidth .content-area, 
.content-vertical-padding-hide .content-area {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 50px;
  width: calc(100% - 50px);
  box-sizing: border-box;
}

/* Transizione fluida per schermi medi */
@media (max-width: 1024px) {
  .content-width-fullwidth .content-area,
  .content-vertical-padding-hide .content-area {
    margin-left: 4vw; /* Percentuale della larghezza viewport */
    margin-right: 2vw;
    width: calc(100% - 6vw);
  }
}

/* Per schermi piccoli */
@media (max-width: 768px) {
  .content-width-fullwidth .content-area,
  .content-vertical-padding-hide .content-area {
    margin-left: 3vw;
    margin-right: 1.5vw;
    width: calc(100% - 4.5vw);
  }
}

/* Per smartphone */
@media (max-width: 480px) {
  .content-width-fullwidth .content-area,
  .content-vertical-padding-hide .content-area {
    margin-left: 15px; /* Valore fisso per evitare margini troppo piccoli */
    margin-right: 10px;
    width: calc(100% - 25px);
  }
}

.wp-site-blocks {
  margin: 0px;
}


/* ============================================================================
   STILE RESPONSIVE PER CAMPI ACF - MOBILE FIRST
   ============================================================================ */

/* 1. CONTENITORE PRINCIPALE DEI CAMPI ACF */
.acf-fields.-left > .acf-field {
    padding: 15px 10px !important;
}

/* 2. BOTTON GROUP - Da orizzontale a verticale su mobile */
.acf-field-button-group .acf-button-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.acf-field-button-group .acf-button-group label {
    width: 100% !important;
    margin: 5px 0 !important;
    text-align: center !important;
    padding: 12px 10px !important;
}

.acf-field-button-group .acf-button-group input[type="radio"] {
    margin-right: 10px !important;
}

/* 3. SELECT - Larghezza completa */
.acf-field-select select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 4. DATE PICKER */
.acf-field-date-picker input {
    width: 100% !important;
    max-width: 100% !important;
}

/* 5. CAMPO USER (selezione bambino) */
.acf-field-user select {
    width: 100% !important;
    max-width: 100% !important;
}

/* 6. MEDIA QUERIES PER DIMENSIONI SPECIFICHE */
@media screen and (max-width: 768px) {
    /* Riduci padding generale */
    .acf-fields.-left {
        padding: 10px !important;
    }
    
    /* Label più compatte */
    .acf-field .acf-label {
        margin-bottom: 8px !important;
        font-size: 14px !important;
    }
    
    .acf-field .acf-label label {
        font-weight: 600 !important;
        line-height: 1.4 !important;
    }
    
    /* Istruzioni più piccole */
    .acf-field .acf-label p {
        font-size: 12px !important;
        margin-top: 4px !important;
        color: #666 !important;
    }
    
    /* Bottoni group ancora più compatti */
    .acf-field-button-group .acf-button-group label {
        padding: 10px 8px !important;
        font-size: 14px !important;
    }
}

@media screen and (max-width: 480px) {
    /* Per smartphone molto piccoli */
    .acf-fields.-left > .acf-field {
        padding: 12px 5px !important;
    }
    
    /* Testo più piccolo ma leggibile */
    .acf-field-button-group .acf-button-group label {
        font-size: 13px !important;
        padding: 8px 6px !important;
    }
    
    /* Riduci margini */
    .acf-field {
        margin-bottom: 15px !important;
    }
}

/* 7. STILE PER IL FORM DI CREAZIONE REPORT (Backend) */
.post-type-post .acf-fields .acf-field {
    border-color: #eee !important;
}

/* 8. VISUALIZZAZIONE FRONTEND (single.php) */
@media screen and (max-width: 768px) {
    .dati-bambino-tabella {
        margin: 15px 0 !important;
    }
    
    .dato-riga {
        flex-direction: column !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }
    
    .dato-label {
        flex: none !important;
        margin-bottom: 5px !important;
        font-size: 15px !important;
    }
    
    .dato-valore {
        flex: none !important;
        text-align: left !important;
        font-size: 16px !important;
        color: #333 !important;
    }
    
    .aggiornamento-bimbi-dati {
        padding: 15px !important;
        margin: 15px 0 !important;
    }
}

/* 9. STILE PER IL DATE PICKER MOBILE */
.ui-datepicker {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ui-datepicker table {
    width: 100% !important;
    font-size: 14px !important;
}

/* 10. CORREZIONE PER I SELECT MULTIPLI (se presenti) */
.acf-field[data-width] {
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

/* 11. MIGLIORA VISIBILITÀ DEI BORDER */
.acf-field {
    border-top: 1px solid #f0f0f0 !important;
}

.acf-field:first-child {
    border-top: none !important;
}
/* ============================================================================
   PAGINAZIONE REPORT
   ============================================================================ */

.pagination {
    text-align: center;
    margin: 40px 0;
    padding: 20px 0;
    border-top: 1px solid #eee;
}

.pagination .page-numbers {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #0073aa;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pagination .page-numbers:hover {
    background: #0073aa;
    color: white;
    border-color: #0073aa;
}

.pagination .current {
    background: #0073aa;
    color: white;
    border-color: #0073aa;
    font-weight: bold;
}

.pagination .dots {
    background: none;
    border: none;
    color: #666;
}

/* Responsive pagination */
@media screen and (max-width: 768px) {
    .pagination .page-numbers {
        padding: 6px 10px;
        margin: 0 2px;
        font-size: 14px;
    }
    
    .lista-report li {
        margin-bottom: 15px;
        padding: 10px;
        border-left: 3px solid #0073aa;
        background: #f8f9fa;
    }
}

/* Stile per il contatore report */
.report-info {
    background: #e9f7fe;
    border-left: 4px solid #0073aa;
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 4px;
}

.report-info p {
    margin: 0;
    color: #333;
    font-size: 14px;
}

.report-info strong {
    color: #0073aa;
}
/* ============================================================================
   STILE COMMENTI - DIARIO SCOLASTICO
   ============================================================================ */

/* 1. CONTENITORE PRINCIPALE COMMENTI */
.comments-area {
    margin: 40px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.comments-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #0073aa;
}

.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 2. SINGOLO COMMENTO */
.comment {
    padding: 20px;
    margin-bottom: 20px;
    background: white;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.comment:last-child {
    margin-bottom: 0;
}

/* 3. HEADER COMMENTO (autore + data) */
.comment-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.comment-author {
    display: flex;
    align-items: center;
}

.comment-author .avatar {
    border-radius: 50%;
    margin-right: 12px;
    border: 2px solid #0073aa;
}

.comment-author .fn {
    font-weight: 600;
    color: #333;
    font-size: 16px;
}

.comment-metadata {
    font-size: 13px;
    color: #6c757d;
}

.comment-metadata a {
    color: #6c757d;
    text-decoration: none;
}

.comment-metadata a:hover {
    color: #0073aa;
}

/* 4. CONTENUTO COMMENTO */
.comment-content {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 15px;
}

.comment-content p {
    margin-bottom: 10px;
}

/* 5. PULSANTI RISPOSTA/MODIFICA */
.comment-actions {
    display: flex;
    gap: 10px;
}

.reply,
.comment-edit-link {
    font-size: 13px;
    padding: 5px 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #495057;
    text-decoration: none;
    transition: all 0.3s ease;
}

.reply:hover,
.comment-edit-link:hover {
    background: #0073aa;
    color: white;
    border-color: #0073aa;
}

/* 6. COMMENTI IN RISPOSTA (nested) */
.children {
    list-style: none;
    margin: 20px 0 0 30px;
    padding: 0;
    border-left: 2px solid #e9ecef;
    padding-left: 20px;
}

.children .comment {
    background: #fafafa;
    border-color: #e9ecef;
}

/* 7. FORM COMMENTI */
.comment-respond {
    margin-top: 40px;
    padding: 25px;
    background: white;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.comment-reply-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.comment-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #495057;
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
}

.comment-form textarea {
    min-height: 120px;
    resize: vertical;
}

.comment-form .form-submit {
    margin-top: 10px;
}

.comment-form .submit {
    background: #0073aa;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.comment-form .submit:hover {
    background: #005a87;
}

/* 8. MESSAGGI DI STATO */
.comment-awaiting-moderation {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 10px;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    font-size: 13px;
}

.logged-in-as {
    margin-bottom: 15px;
    font-size: 14px;
    color: #6c757d;
}

/* 9. COMMENTI SPECIFICI PER RUOLI */
.comment.bypostauthor {
    border-left: 4px solid #28a745;
    background: #f8fff9;
}

.comment.byuser {
    background: #f0f7ff;
}

/* 10. RESPONSIVE DESIGN */
@media screen and (max-width: 768px) {
    .comments-area {
        padding: 20px;
        margin: 30px 0;
    }
    
    .comment-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .children {
        margin-left: 15px;
        padding-left: 15px;
    }
    
    .comment-respond {
        padding: 20px;
    }
}

@media screen and (max-width: 480px) {
    .comments-area {
        padding: 15px;
    }
    
    .comment {
        padding: 15px;
    }
    
    .comment-author {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .comment-author .avatar {
        margin-right: 0;
        margin-bottom: 8px;
    }
    
    .comment-actions {
        flex-direction: column;
    }
}

/* 11. STATO COMMENTI NON DISPONIBILI */
.comments-closed {
    text-align: center;
    padding: 20px;
    color: #6c757d;
    font-style: italic;
    border-top: 1px solid #e9ecef;
    margin-top: 30px;
}

/* 12. INDICATORE NUMERO COMMENTI */
.comments-title span {
    background: #0073aa;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 14px;
    margin-left: 10px;
}

.comment-form p.comment-form-float-label {
   margin-left: 10px;
  margin-right: 10px;
}