/* Responsive overrides for specific templates
   File: responsive-templates.css
   Add this file into the theme and enqueue it (see README below)
*/

/* PRETRES: slider and priest grid adjustments */
@media (max-width: 1024px) {
    .slider .slides { overflow: hidden; }
    .slider .slides { display: flex; transition: transform 0.4s ease; }
    .slider .slide { min-width: 100%; box-sizing: border-box; }
    .prev, .next { padding: 8px 12px; font-size: 1.2rem; }
    .container-pretres .card { margin: 0.5rem 0; }
    .container-pretres .col-md-3 { width: 50%; float: left; }
}

@media (max-width: 480px) {
    .container-pretres .col-md-3 { width: 100%; display: flex; justify-content: center; }
    .slider .prev, .slider .next { padding: 10px; font-size: 1.4rem; }
    .slider .slide img { width: 100%; height: auto; display:block; }
    
}

/* RENDEZ-VOUS (appointment): stack bishop + form on tablet/mobile */
@media (max-width: 1024px) {
    .appointment-container { display: flex; flex-direction: column; gap: 1.2rem; }
    .bishop-container, .appointment-form-container { width: 100%; }
    .bishop-image { max-width: 220px; height: auto; display:block; margin: 0 auto; }
    .about-bishop-container{
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .full-width-text {
        padding: 0 0.5rem;
    }
}

@media (max-width: 480px) {
    .appointment-form-container { padding: 1rem; }
    #appointmentForm .form-group { margin-bottom: 0.8rem; }
    #appointmentForm input, #appointmentForm select, #appointmentForm textarea { width: 100%; box-sizing: border-box; }
}

/* CONSEILS & APOSTOLAT: make council/apostolat tables responsive */
@media (max-width: 1024px) {
    /* Ensure main container doesn't overflow */
    .main-container {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        padding: 0 10px;
    }
    
    .table-stripped {
        width: 100%;
        overflow-x: hidden;
        margin-bottom: 20px;
    }
    
    /* Force table to behave like block elements - CRITICAL */
    .chaplaincy_apostolates {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }
    
    .chaplaincy_apostolates tbody {
        display: block !important;
        width: 100% !important;
    }
    
    .chaplaincy_apostolates tr {
        display: block !important;
        width: 100% !important;
    }
    
    .chaplaincy_apostolates th,
    .chaplaincy_apostolates td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        float: none !important;
    }
    
    .chaplaincy_apostolates {
        margin: 0;
        border: none;
        overflow-x: hidden;
    }
    
    .chaplaincy_apostolates tr {
        margin-bottom: 25px;
        border-bottom: 3px solid #bf0a30;
        padding-bottom: 15px;
    }
    
    .chaplaincy_apostolates th,
    .chaplaincy_apostolates td {
        border: 1px solid #ddd !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        min-height: 50px;
    }
    
    .chaplaincy_apostolates th {
        background: #e6e6e6 !important;
        color: #bf0a30 !important;
        font-size: 1rem;
        padding: 12px !important;
        margin-top: 15px;
        margin-bottom: 10px;
        text-align: left !important;
        font-weight: 900;
    }
    
    .chaplaincy_apostolates td {
        padding: 15px !important;
        margin-bottom: 10px;
        text-align: left !important;
        background: #fff;
    }
    
    .chaplaincy_apostolates ul {
        padding-left: 0;
        width: 100%;
        margin: 0;
    }
    
    .chaplaincy_apostolates li {
        display: block !important;
        margin-bottom: 10px;
        padding: 5px 0;
        line-height: 1.6;
    }
    
    .chaplaincy_apostolates li strong {
        display: inline;
        margin-right: 5px;
    }
    
    .chaplaincy_apostolates li span {
        display: inline;
        font-size: 11pt;
        word-break: break-word;
    }
}

/* ===== CONSOLIDATED 768PX MEDIA QUERY ===== */
@media (max-width: 768px) {
    /* Force proper viewport width */
    body {
        overflow-x: hidden;
        width: 100%;
    }
    
    .main-pass {
        padding: 15px 10px !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    .main-container {
        padding: 0 5px !important;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden !important;
        max-width: 100%;
    }
    
    .table-stripped { 
        display: block; 
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden !important;
        margin-bottom: 20px;
    }
    
    .table-stripped th, .table-stripped td { 
        width: 100%; 
        padding: 0.5rem; 
    }
    
    /* Ensure text wraps properly */
    .chaplaincy_apostolates * {
        max-width: 100%;
        min-width: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    
    /* Enhanced mobile styling for chaplaincy_apostolates */
    .chaplaincy_apostolates {
        font-size: 14px;
    }
    
    .chaplaincy_apostolates tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 25px;
        border-bottom: 2px solid #bf0a30;
        padding-bottom: 15px;
    }

    .chaplaincy_apostolates th,
    .chaplaincy_apostolates td {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin-bottom: 10px;
        padding: 12px !important;
        overflow: hidden;
    }

    .chaplaincy_apostolates th {
        background: #e6e6e6 !important;
        color: #bf0a30;
        font-weight: 900;
        font-size: 0.95rem;
    }

    .chaplaincy_apostolates td {
        background: #fff;
    }
    
    .chaplaincy_apostolates li {
        display: block;
        margin-bottom: 10px;
    }
    
    .chaplaincy_apostolates li strong,
    .chaplaincy_apostolates li span {
        display: inline;
        white-space: normal;
    }
    
    /* HOPITAL: components grid stack on mobile */
    .component-grid { 
        display: grid; 
        grid-template-columns: 1fr; 
        gap: 1rem; 
    }
    
    .sermons-thumb .single-sermon-img { 
        width: 100%; 
        height: auto; 
    }
    
    /* PAROISSES / General parish grids */
    .parishes-grid { 
        display: grid; 
        grid-template-columns: repeat(1, 1fr); 
        gap: 1rem; 
    }
    
    .parish { 
        padding: 0.8rem; 
        border-bottom: 1px solid rgba(0,0,0,0.05); 
    }
    
    /* Chaplaincy grid center on tablets too */
    .chaplaincy-grid { 
        max-width: 720px; 
        margin: 0 auto; 
        padding: 0 1rem; 
    }
    
    .service-category-section {
        width: 100%;
    }
    .bio-container{
        justify-content: center;
    }
    
    .about-bishop {
        display: block;
    }
    
    .full-width-text {
        padding: 0;
    }
    .dieu-container {
        padding: 0 !important;
    }
}

/* DIEU-PRESENT: tighten spacing and scale headings on small screens */
@media (max-width: 480px) {
    .page-header h1, .page-header h2, .main-pass h1, .main-pass h2 { font-size: 1.1rem; line-height: 1.25; }
    .page-content p { font-size: 0.97rem; }
}

/* AUMONERIES (Cards): responsive card grid */
@media (max-width: 1024px) {
    .chaplaincy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .chaplaincy-card { padding: 0.9rem; }
}
@media (max-width: 480px) {
    .chaplaincy-grid { grid-template-columns: 1fr; }
    .chaplaincy-header { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:0.7rem; }
    .chaplaincy-icon i { font-size: 1.1rem; }
}

/* CONTACT: make form controls full width on mobile */
@media (max-width: 480px) {
    
    form.contact-form input, form.contact-form textarea, form.contact-form select,
    form.appointment-form input, form.appointment-form textarea, form.appointment-form select {
        width: 100%; box-sizing: border-box; padding: 0.6rem; font-size: 0.95rem;
    }
    
    
}

/* HOPITAL styles moved to consolidated 768px media query above */

/* MAISON: component cards responsive */
@media (max-width: 1024px) {
    .components-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 480px) {
    .components-grid { grid-template-columns: 1fr; }
    .component-card { padding: 0.9rem; }
    .content-body { padding: 0.5rem;}
}

/* PAROISSES styles moved to consolidated 768px media query above */

/* small utilities */
@media (hover: none) and (pointer: coarse) {
    .nav-item > a, .search-button, .submit-button { padding: 0.9rem 1rem; }
}
    
/* Additional mobile refinements to fix padding, centering and table layout issues */
@media (max-width: 480px) {
    /* Reduce outer page paddings so content doesn't overflow in the customizer preview */
    .main-pass, .main-container, .page-content, .content-section {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .main-pass 

    /* Pretres: tighter card padding and center card content */
    .container-pretres { padding: 0 0.4rem; }
    .container-pretres .row { padding: 20px 20px; }
    .container-pretres .card { margin: 0.6rem 0; padding: 0.8rem; width: 100%; }
    .container-pretres .card .card-body { padding: 0.6rem; }
    .container-pretres img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

    /* Ensure priest grid columns collapse fully on very small screens */
    .container-pretres .col-6,
    .container-pretres .col-md-3,
    .container-pretres .col-sm-4 { width: 100% !important; float: none !important; }

    /* Ensure slider cannot cause horizontal scroll */
    .slider, .slider .slides { max-width: 100%; overflow: hidden; }
    .slider .slides { display: flex; flex-wrap: nowrap; }
    .slider .slide { min-width: 100%; }
    
    .contact {
        padding: 0 !important;
    }
    /* Contact forms: full width and reduced side padding */
    .contact .contact-form, form.contact-form, form.appointment-form, #appointmentForm {
        width: 100% !important;
        padding: 0.6rem !important;
        box-sizing: border-box;
    }
    
    .container-pretres > .text-containers {
        padding: 0.2rem;
    }
    
    #contact .text-containers > div:first-of-type{
        padding: 1.2rem;
    }

    /* Aumoneries container: center grid and reduce side gaps */
    .chaplaincy-grid { max-width: 420px; margin: 0 auto; padding: 0 0.4rem; }
    .chaplaincy_apostolates ul {
        padding-left: 0;
    }
    .chaplaincy-card { margin: 0.6rem 0; }
    .table-stripped { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-stripped table { 
        width: 100%; 
        border-collapse: collapse; 
        min-width: 0; 
    }
    .table-stripped th, .table-stripped td { display: block; width: 100%; }
    .table-stripped thead { display: table-header-group; }

    /* Small typographic tweaks for narrow screens */
    h1, h2, h3 { word-break: break-word; }
    
    .bio-image {
        width: 100%;
    }
}
    
/* Duplicate 768px media queries removed - consolidated above */