/**
Theme Name: Astra-child
Author: Nathan Gagné
Author URI: https://thisisnathan.ca
Description: Astra child theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
Tags: astra
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Text:ital@0;1&display=swap');

/* BEGIN BikeGremlin language class edit */

/* Hide the widget with class 'widget-sr' when the page's language is set to English */

body.en .widget-fr {
    display: none;
}

/* Hide the widget with class 'widget-en' when the page's language is set to French */

body.fr .widget-en {
    display: none;
}

/* END BikeGremlin language class edit */

.atim-hero-image {
    pointer-events: none;
}

.custom-footer-content {
    background-color: #4f4753; /* Dark purple-gray */
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.grey-block {
    background-color: #a5a5a5;
    height: 20px;
    width: 100%;
    margin-bottom: 2rem;
}
  
.footer-section {
    margin: 1rem;
    min-width: 200px;
}

.address {
    display: flex;
    gap: 2rem;
}

.footer-section a {
    color: #ffffff;
    text-decoration: none;
}

.footer-section a:hover {
    text-decoration: underline;
}

.footer-section.links {
    display: flex;
    gap: 1rem;
}

.footer-section.links p {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

.footer-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.footer-column div {
    margin: 0;
    padding: 0;
}

.footer-icon {
    fill: #fff;
}

#envelope-icon svg {
    height: 1rem;
    width: auto;
    vertical-align: middle;
}

.footer-facebook-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

#facebook-icon svg {
    height: 2rem;
    width: auto;
    vertical-align: middle;
}

#facebook-icon:hover {
    color: #d1d1d1; /* lighter on hover */
}

.footer-bottom-note {
    font-family: "DM Sans", sans-serif !important;
    background-color: #005A99;
    color: #ffffff;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    margin-bottom: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 12% !important;
    padding-right: 12% !important;
}

.footer-social-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.footer-social-icons a {
    display: flex;
    align-items: center;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.footer-social-icons a:hover {
    opacity: 1;
}

.footer-social-icons svg {
    height: 22px;
    width: 22px;
}

/* Submenu background color override */

.sub-menu a {
    background-color: #ffffff !important;
    border: 1px solid #ccc; /* optional border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* optional for better visibility */
}

/* STARTS HERE ---------------------------------------------------- */

/* Filter Container */
#atim-filter-container {
    padding: 2rem;
    margin: 2rem 0;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Filter Layout */
.filter-row {
    display: flex;
    width: 100%;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    align-items: stretch; /* Ensures equal height columns */
}

.filter-row:last-child {
    margin-bottom: 0;
}

.filter-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Filter Groups */
.atim-filter-group {
    background: white;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    flex: 1; /* Allows groups to expand to fill available space */
}

.atim-filter-group > label:first-child {
    display: block;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.25rem;
}

/* Profession Filters */
#profession-filters {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* Further reduced from 0.5rem */
    height: 100%; /* Takes full height of its container */
    justify-content: flex-start; /* Changed from space-between to flex-start for compactness */
}

.profession-option {
    display: flex;
    align-items: center;
}

.profession-option label {
    display: flex;
    align-items: center;
    font-weight: normal;
    cursor: pointer;
    padding: 0.25rem 0.5rem; /* Further reduced vertical padding */
    border-radius: 4px;
    transition: background-color 0.2s ease;
    font-size: 1rem;
    width: 100%;
}

.profession-option label:hover {
    background-color: #f8f9fa;
}

.profession-option input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 16px;
    height: 16px;
    accent-color: #007cba;
}

/* Language Filters */
#language-filters {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#language-filters label {
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
    font-size: 1rem;
}

/* Language dropdowns container */
.language-dropdowns {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.language-dropdowns label {
    white-space: nowrap;
    margin: 0;
}

.language-dropdowns select {
    min-width: 150px;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
    background-color: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.language-dropdowns select:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.25);
}

/* Specialization Section */
.specialization-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.toggle-btn {
    border: none;
    color: #007cba !important;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none !important;
}

.toggle-btn:hover {
    background: none !important;
}

.toggle-btn:focus {
    background: none !important;
}

.toggle-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.collapsible-content {
    width: 100%;
    max-width: 600px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out, visibility 0s linear 0.3s;
    background: white;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    padding: 0 1rem;
}

.collapsible-content.active {
    max-height: 600px;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out, visibility 0s linear;
    padding: 1rem;
    margin: 0.5rem 0;
}

#specialization-multiselector {
    width: 100%;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

#specialization-multiselector.active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease-out 0.1s, transform 0.2s ease-out 0.1s;
}

#specialization-multiselector:not(.active) {
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

/* Select2 Styling */
.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    min-height: 60px !important;
    padding: 0.5rem !important;
    background-color: white !important;
    /* Remove the flex properties that were causing issues */
}

.select2-container--default .select2-selection--multiple:focus-within {
    border-color: #007cba !important;
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.25) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 !important;
    margin: 0 !important;
    /* Keep flex for selected items, but don't center them */
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    min-height: auto !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #6c757d !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Ensure placeholder starts at the left */
    width: 100% !important;
    text-align: left !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #007cba !important;
    border: 1px solid #007cba !important;
    border-radius: 3px !important;
    color: white !important;
    font-size: 0.875rem !important;
    padding: 0.25rem 0.5rem !important;
    margin: 0.125rem 0.125rem 0.125rem 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: white !important;
    font-weight: bold !important;
    margin-right: 0.5rem !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #f8f9fa !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
    border: none !important;
    outline: none !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    min-height: auto !important;
}

.select2-container--default .select2-search--inline {
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
}

.select2-dropdown {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #007cba !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-search--inline {
    flex-shrink: 0 !important;
}

/* Optional Service Filters */
#optional-service-filter {
    display: flex;
    flex-direction: column;
}

#optional-service-filter label {
    display: flex;
    align-items: flex-start;
    font-weight: normal;
    cursor: pointer;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    line-height: 1.4;
    font-size: 1rem;
    border-bottom: none;
}

#optional-service-filter label:hover {
    background-color: #f8f9fa;
}

#optional-service-filter input[type="checkbox"] {
    margin-right: 0.75rem;
    margin-top: 0.25rem;
    width: 16px;
    height: 16px;
    accent-color: #007cba;
    flex-shrink: 0;
}

/* Reset Button */
#reset-filter-btn {
    align-self: center;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #6c757d, #5a6268);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-width: 150px;
    margin-top: 0.5rem;
}

#reset-filter-btn:hover {
    background: linear-gradient(135deg, #5a6268, #495057);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

#reset-filter-btn:active {
    transform: translateY(0);
}

/* Member Results */
#member-results {
    margin-top: 2rem;
}

/* Member List Styling */
.member-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(37,89,149,0.08);
}

.member-list li {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.2s ease;
}

.member-list li:last-child {
    border-bottom: none;
}

.member-list li:hover {
    background-color: #f8f9fa;
}

.entry-top-bar {
    height: 1px;
    background: #dee2e6;
    margin-bottom: 1rem;
}

.member-details p:last-of-type {
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    #atim-filter-container {
        padding: 1rem;
        margin: 1rem 0;
    }
    
    .filter-row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .filter-column {
        width: 100%;
    }
    
    #language-filters {
        gap: 0.5rem;
    }
    
    .language-dropdowns {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .language-dropdowns label {
        margin-top: 1rem;
    }
    
    .language-dropdowns label:first-child {
        margin-top: 0;
    }
    
    #reset-filter-btn {
        align-self: stretch;
        min-width: auto;
    }
}

/* Member Entry Styles */
.member-entry {
    padding: 0;
    border-top: none;
    cursor: pointer;
    margin-bottom: 1rem;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(37,89,149,0.08);
    transition: all 0.25s ease;
}

.member-entry:hover {
    box-shadow: 0 4px 14px rgba(37,89,149,0.15);
    transform: translateY(-1px);
}

.member-entry.active {
    background-color: rgba(37,89,149,0.05);
    box-shadow: 0 4px 14px rgba(37,89,149,0.18);
}

/* Three-column layout */
.member-content {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2rem;
    padding: 1.5rem;
    background-color: #f4f7fb;
    border-left: 4px solid #255995;
    border-radius: 6px;
    min-height: 120px;
    align-items: start;
}

/* Left Column */
.member-left-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.member-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    margin: 0;
    line-height: 1.3;
}

.member-specializations {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.specialty-item {
    font-size: 0.875rem;
    color: #9F7A27;
    background-color: rgba(159,122,39,0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-weight: 500;
}

.view-profile-btn {
    background-color: #255995;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: auto;
}

.view-profile-btn:hover {
    background-color: #1d4a7a;
    color: white !important;
}

/* Middle Column */
.member-middle-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.profession-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profession-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #255995;
    border-bottom: 1px solid rgba(37,89,149,0.2);
    padding-bottom: 0.25rem;
}

.language-pairs {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 1rem;
}

.language-pair {
    font-size: 1rem;
    color: #555;
    line-height: 1.4;
}

.no-professions {
    font-size: 0.875rem;
    color: #999;
    font-style: italic;
}

/* Right Column */
.member-right-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 30px;
}

.send-email-btn {
    background-color: #9F7A27;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.send-email-btn:hover {
    background-color: #8a6a20;
}

/* Responsive Design */
@media (max-width: 992px) {
    .member-content {
        grid-template-columns: 1fr 1.5fr 1fr;
        gap: 1.5rem;
    }
    
    .member-name {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .member-content {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: left;
    }
    
    .member-right-column {
        align-items: flex-start;
    }
    
    .send-email-btn {
        width: 100%;
    }
    
    .view-profile-btn {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .member-content {
        padding: 1rem;
    }
    
    .member-name {
        font-size: 1rem;
    }
    
    .specialty-item {
        font-size: 0.8rem;
    }
    
    .profession-title {
        font-size: 0.9rem;
    }
    
    .language-pair {
        font-size: 0.8rem;
    }
}

/* Contact Modal Styles */
.contact-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100% !important;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.contact-modal-overlay.active {
    max-width: 100% !important;
    opacity: 1;
    visibility: visible;
}

.contact-modal {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(37,89,149,0.25);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.contact-modal-overlay.active .contact-modal {
    transform: scale(1) translateY(0);
}

.contact-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 2rem;
    border-bottom: none;
    background: #255995;
}

.contact-modal-title {
    font-size: 1.35rem !important;
    font-weight: 600;
    color: #fff !important;
    margin: 0 !important;
    line-height: 1.2;
    font-family: "DM Sans", sans-serif;
}

.contact-modal-close {
    background: rgba(255,255,255,0.18);
    color: white;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
    padding: 0 0 3px 0.5px;
}

.contact-modal-close:hover {
    background: rgba(255,255,255,0.32);
}

.contact-modal-close:focus {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: 2px;
}

.contact-modal-body {
    padding: 2rem;
    max-height: calc(90vh - 140px);
    overflow-y: auto;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.contact-form .form-group {
    display: flex;
    flex-direction: column;
}

.contact-form .form-group.full-width {
    grid-column: 1 / -1;
}

.contact-form .form-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.contact-form .form-label .required {
    color: #dc3545;
}

.contact-form .form-input,
.contact-form .form-textarea {
    padding: 0.75rem 1rem;
    border: 1.5px solid #dde5ef;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: white;
}

.contact-form .form-input:focus,
.contact-form .form-textarea:focus {
    outline: none;
    border-color: #255995;
    box-shadow: 0 0 0 3px rgba(37,89,149,0.1);
    background: white;
}

.contact-form .form-textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

.file-upload-area {
    border: 2px dashed #c5d4e8;
    border-radius: 5px;
    padding: 2rem;
    text-align: center;
    background: #f4f7fb;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.file-upload-area:hover {
    border-color: #255995;
    background: rgba(37,89,149,0.05);
}

.file-upload-area.dragover {
    border-color: #255995;
    background: rgba(37,89,149,0.08);
}

.file-upload-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload-content {
    pointer-events: none;
}

.file-upload-icon {
    font-size: 2rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.file-upload-text {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.4;
}

.file-upload-text strong {
    color: #255995;
}

.selected-files {
    margin-top: 1rem;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(37,89,149,0.07);
    border-radius: 5px;
    margin-bottom: 0.5rem;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.file-name {
    font-weight: 500;
    color: #333;
}

.file-size {
    color: #666;
    font-size: 0.85rem;
}

.file-remove {
    background: #dc3545;
    color: white;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.file-remove:hover {
    background: #c82333;
}

.contact-submit {
    background: #9F7A27;
    color: white;
    border: 1px solid #9F7A27;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 1rem;
    font-family: "DM Sans", sans-serif;
}

.contact-submit:hover {
    background: #8a6a20;
}

.contact-submit:disabled {
    background: #636363;
    border-color: #636363;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .contact-modal {
        width: 95%;
        margin: 1rem;
    }

    .contact-modal-header {
        padding: 1rem 1.5rem;
    }

    .contact-modal-body {
        padding: 1.5rem;
    }

    .contact-modal-title {
        font-size: 1.25rem;
    }

    .contact-form .form-row {
        grid-template-columns: 1fr;
    }

    .file-upload-area {
        padding: 1.5rem 1rem;
    }
}

/* Search styles */

#atim-search-container {
    background: #255995;
    border: none;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    position: relative;
}

.search-title {
    font-weight: 600 !important;
    color: #fff !important;
    margin-bottom: 1.5rem !important;
    margin-top: 0 !important;
}

.search-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.search-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: end;
}

.search-field {
    display: flex;
    flex-direction: column;
}

/* Disabled subdomain styling */
.search-field select:disabled {
    background-color: rgba(255, 255, 255, 0.5);
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.7;
}

.search-field select:disabled:hover {
    border-color: transparent;
}

/* Name search input styling */
.search-field input[type="text"] {
    padding: 0.65rem 0.9rem;
    border: none;
    border-radius: 6px;
    background: white;
    font-size: 1rem;
    transition: box-shadow 0.2s ease;
}

.search-field input[type="text"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.search-field input[type="text"]:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.search-field label {
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.4rem;
    font-size: calc(0.95rem + 2px);
}

.search-field select {
    padding: 0.65rem 0.9rem;
    border: none;
    border-radius: 6px;
    background: white;
    font-size: 1rem;
    transition: box-shadow 0.2s ease;
    cursor: pointer;
}

.search-field select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.search-field select:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

/* Search Actions */
.search-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.search-btn,
.clear-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid #fff;
}

.search-btn {
    background: #9F7A27;
    color: white;
}

.search-btn:hover:not(:disabled) {
    background: #8a6a20;
    transform: translateY(-1px);
}

.search-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.clear-btn {
    background: #636363;
    color: white;
}

.clear-btn:hover {
    background: #525252;
    transform: translateY(-1px);
}

/* Button Loading States */
.btn-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-spinner-large {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007cba;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Results Info */
.results-info {
    background: rgba(37,89,149,0.07);
    border: 1px solid #255995;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #255995;
    text-align: center;
}

/* Loading Overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 249, 250, 0.9);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.loading-content {
    text-align: center;
    color: #333;
}

.loading-content p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    #atim-search-container {
        padding: 1.5rem;
    }

    .search-row {
        grid-template-columns: 1fr;
    }

    .search-actions {
        flex-direction: column;
        align-items: center;
    }

    .search-btn,
    .clear-btn {
        width: 100%;
        max-width: 300px;
    }

    .search-title {
        font-size: 1.25rem;
    }

    .profession-row {
        justify-content: center;
    }
    
    .profession-field {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    #atim-search-container {
        padding: 1rem;
    }

    .search-field select {
        padding: 0.65rem 0.85rem;
        font-size: 0.9rem;
    }

    .search-btn,
    .clear-btn {
        padding: 0.5rem 1.1rem;
        font-size: 0.9rem;
    }
}

.form-asterisk {
    color: red;
    font-size: 0.5rem;
    vertical-align: text-top;
}

.checkbox-row {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
    margin-bottom: 0;
}

.checkbox-row.visible {
    opacity: 1;
    max-height: 100px;
}

.checkbox-field {
    width: 100%;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    line-height: 1.4;
    padding-left: 1rem;
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
    margin-top: 0.125rem;
    transform: scale(1.2);
    cursor: pointer;
}

/* Member Section Headers */
.member-section-header {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 2rem 0 1.25rem 0;
    padding: 0.85rem 1.5rem;
    border-radius: 6px;
    text-align: left;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.certified-header {
    background: #255995;
    color: white !important;
}

.associate-header {
    background: #636363;
    color: white !important;
}

@media (max-width: 768px) {
    .member-section-header {
        font-size: 1.25rem;
        padding: 0.75rem 1rem;
        margin: 1.5rem 0 1rem 0;
    }
}

/* Associate Members Note */
.associate-note {
    font-size: 1rem;
    font-weight: 400;
    margin-top: 0.75rem;
    opacity: 0.9;
    line-height: 1.4;
}

.certified-translations-link {
    color: #ffffff !important;
    text-decoration: underline !important;
    transition: all 0.3s ease;
    font-weight: 500;
}

.certified-translations-link:hover {
    color: #f8f9fa !important;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

.certified-translations-link:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5) !important;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .associate-note {
        font-size: 0.8rem;
        margin-top: 0.5rem;
    }
}

#subdomain-select {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

#subdomain-select:not(:disabled) {
    background-color: white !important;
    color: inherit !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

/* PREVENT ELEMENTOR FROM MESSING WITH LAYOUT */

/* Elementor Reset for ATIM Directory */
.elementor-widget-shortcode [id*="atim"],
.elementor-section [id*="atim"],
.elementor-column [id*="atim"] {
    /* Reset Elementor's container styles */
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Restore your original styling */
.elementor-widget-shortcode #atim-search-container,
.elementor-section #atim-search-container,
.elementor-column #atim-search-container {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 2rem !important;
    margin-bottom: 2rem !important;
    position: relative !important;
    max-width: none !important;
    width: 100% !important;
}

/* Fix member entries in Elementor */
.elementor-widget-shortcode .member-entry,
.elementor-section .member-entry,
.elementor-column .member-entry {
    margin-bottom: 1rem !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
}

.elementor-widget-shortcode .member-content,
.elementor-section .member-content,
.elementor-column .member-content {
    display: grid !important;
    grid-template-columns: 1fr 2fr 1fr !important;
    gap: 2rem !important;
    padding: 1.5rem !important;
    background-color: #f8f9fa !important;
    border-left: 4px solid #007cba !important;
    border-radius: 4px !important;
    min-height: 120px !important;
    align-items: start !important;
}

/* Fix search form layout in Elementor */
.elementor-widget-shortcode .search-row,
.elementor-section .search-row,
.elementor-column .search-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 1rem !important;
    align-items: end !important;
    margin-bottom: 1.5rem !important;
}

/* Fix buttons in Elementor */
.elementor-widget-shortcode .search-btn,
.elementor-widget-shortcode .clear-btn,
.elementor-section .search-btn,
.elementor-section .clear-btn,
.elementor-column .search-btn,
.elementor-column .clear-btn {
    padding: 0.875rem 2rem !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-width: 150px !important;
}

.home-center-header {
    font-family: "DM Serif Text", serif !important;
    font-weight: 400 !important;
    font-size: 30px !important;
    color: black !important;
    margin-bottom: -4px !important;
    padding-left: 5% !important;
    line-height: 0.9 !important;
    position: relative !important;
    margin-top: 1rem !important;
}

.home-center-header::before {
  content: "";
  position: absolute;
  left: 0px;               /* stick it on the left */
  top: 53%;              /* vertically center */
  transform: translateY(-50%);
  width: 13px;           /* circle size */
  height: 13px;
  border-radius: 50%;    /* makes it a circle */
}

.home-center-header.red::before {
    background-color: #b43700;
}

.home-center-header.yellow::before {
    background-color: #e7a500;
}

.home-center-header.blue::before {
    background-color: #005a99;
}

.home-page-text {
    font-family: "DM Sans", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-align: justify !important;
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
    width: 90% !important;
    color: black;
    font-size: 17px !important;    
}

.home-page-text a {
    text-decoration: underline;
    color: black;
}

#background-gold-circle {
    position: absolute;
    top: 550px;
    left: 3vw;
    width: 775px;
    height: 775px;
    background-image: url('./assets/gold-circle.png');
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.homepage-button a {
    font-size: 15px !important;
    font-weight: 600 !important;
}

.homepage-button-large a {
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 1.1em 2.4em !important;
}

.split-buttons {
    width: 70%;
    position: relative;
    align-items: center !important;
    gap: 3em !important;
}

.split-buttons .wp-block-button {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
}

.split-buttons::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 10%;
    height: 80%;
    border-left: 2px dotted #9F7A27;
    pointer-events: none;
}

/* JS moves this to .wp-block-columns. isolation: isolate creates a
   stacking context so z-index: -1 stays behind the transparent columns
   (image included) without being swallowed by the article's white background. */
.wp-block-columns:has(#who-we-are-gold-circle) {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

#who-we-are-gold-circle {
    position: absolute;
    width: 600px;
    height: 600px;
    top: -100px;
    right: -100px;
    background-image: url('./assets/gold-circle.png');
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
    transform: scaleX(-1);
}

.who-we-are-columns {
    max-width: 80vw !important;
}

.manitoba-flag-img {
    height: 550px !important;
    width: 100% !important;
}

/* Board of Directors gradient background — add class "board-bg" to the Group block
   in Gutenberg: Block Settings → Advanced → Additional CSS class(es) */
.board-bg {
    background: linear-gradient(180deg, #f5ece0 0%, #c9a870 100%);
}

.gold-dotted-line {
    border-top: 2px dotted #a67800;
    width: 100%;
    margin: 0; /* Adjust vertical spacing as needed */
}

.news-header {
    font-family: "DM Serif Text", serif !important;
    font-weight: 400 !important;
    font-size: 60px !important;
    color: black !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
}

.serif-34 {
    font-family: "DM Serif Text", serif !important;
    font-weight: 400 !important;
    font-size: 40px !important;
    color: black !important;
    margin-bottom: 2rem !important;
    line-height: 1.25;
}

.sans-18 {
    font-family: "DM Sans", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-align: justify !important;
    margin-top: -10px !important;
    margin-bottom: 0 !important;
}

.short-line-height {
    line-height: 1.5 !important;
    margin-bottom: 1rem !important;
}

.orange-footer-text {
    font-family: "DM Sans", sans-serif !important;
    font-size: 18px !important;
    color: #B63515 !important;
    font-weight: 600 !important;
    font-style: normal !important;
    text-align: left !important;
    margin: 0 0 0.3rem 0 !important;
}

.wheat-image {
    width: 80% !important;
    height: auto !important;
    margin: auto ! important;
}

.bottom-atim-logo {
    width: 45% !important;
    height: auto !important;
    margin: 1em auto 1em auto !important;
}

/* .middle-container {
  margin-left: clamp(2.5vw,  calc(14.282vw - 108.513px), 7.5vw) !important;
  margin-right: clamp(5vw, calc(16.782vw - 108.513px), 10vw) !important;
  gap: 75px !important;
  padding-top: 0px !important;
  align-items: stretch !important;
} */

.homepage-columns {
    gap: 50px !important;
}

.middle-right-column {
}

.middle-container {
  margin-left: 120px !important;
  margin-right: 120px !important;
  gap: 0px !important;
  padding-top: 0px !important;
  align-items: stretch !important;
}

.middle-left-column {
    position: relative !important;
    align-self: stretch !important;
}

.leg-photo,
.leg-photo figure {
    position: static !important;
    display: block !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

.leg-photo img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
}
.uagb-is-root-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.bottom-container {
    padding-left: 10% !important;
    padding-right: 10% !important;
    overflow: hidden !important;
    margin: 0 !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.bottom-container .wp-block-column:first-child {
    aspect-ratio: 1 !important;
    max-width: 600px !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

.bottom-container .wp-block-column:first-child figure {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
}

.bottom-container .wp-block-column:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}

.news-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 50px;
  margin-left: 5vw !important;
  margin-right: 5vw !important;
  margin-top: 20px;
  margin-bottom: 50px !important;
  padding: 0 !important;
}

.news-container .news-item {
    flex: auto;
    position: relative;
    height: 287px;
    min-height: 0 !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 16px;
    overflow: visible;
    border: 1.5px solid #9f7a27;
    min-width: 260px;
}

/* Clip only the image and overlay children — not the hanging text box */
.news-container .news-item .wp-block-cover__image-background,
.news-container .news-item .wp-block-cover__background {
    border-radius: 14.5px;
}

/* White text box hanging below the card */
.news-container .news-text {
  position: absolute;
  bottom: -200px;
  left: 4%;
  right: 4%;
  background: #fff;
  padding: 20px 24px 0px 24px;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  gap: 0;
  transform: none;
}

/* Typography */
.news-container .news-text .news-item-header {
  margin: 0 0 8px;
  font-size: 30px;
  color: black;
  font-family: "DM Serif Text", serif !important;
}

.news-container .news-text .read-more-link a {
  text-decoration: none;
  color: #BA5334;
  font-weight: 400;
  font-size: 20px;
}

.news-container .news-text .read-more-link a:hover {
  text-decoration: underline;
}

.contact-column {
    margin: auto 0 !important;
}

/* News grid shortcode — styles are fully independent from the front page carousel. */
.news-posts-grid {
    display: grid !important;
    flex-direction: unset !important;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 50px;
    row-gap: 140px;
    margin-bottom: 120px !important;
}

.news-posts-grid .news-item {
    flex: unset !important;
    min-width: unset !important;
    width: 100%;
}

.news-posts-grid .news-text {
    bottom: -80px;
    padding: 10px 20px 10px 20px;
}

.news-posts-grid .news-post-date {
    font-size: 0.82rem;
    color: #888;
    margin: 0 0 6px;
    font-family: "DM Sans", sans-serif;
}

@media (max-width: 921px) {
    .bottom-container {flex-direction: column;}
    .contact-left {display: none;}
    .middle-container {flex-direction: column; margin-left: 5vw !important; margin-right: 5vw !important}
    .middle-left-column {display: none;}
    .news-container {
        flex-direction: column;
        gap: 100px;
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
    .news-container .news-item {flex: 0 0 65vw; height: 260px;}
    .news-container .news-text {left: 0; right: 0;}
    .wp-block-columns {flex-wrap: nowrap !important;}

    .news-posts-grid {
        grid-template-columns: 1fr !important;
        row-gap: 120px;
    }
    .news-posts-grid .news-item {
        width: 100% !important;
        flex: unset !important;
    }
}

@media (max-width: 1123px) {
    .image-text-columns > .wp-block-column:has(.polar-bear-img) {
        display: none !important;
    }

    .image-text-columns {
        gap: 0 !important;
    }

    .polar-bear-text-column {
        flex: 1 1 100% !important;
        padding-left: 4% !important;
        padding-right: 4% !important;
    }
}

@media (max-width: 1228px) {
    .image-text-columns > .wp-block-column:has(.translator-img),
    .wp-block-column.translator-column {
        display: none !important;
    }
    .translator-text-column {
        flex: 1 1 100% !important;
        padding-left: 4% !important;
        padding-right: 4% !important;
    }
}

@media (max-width: 1228px) {
    .image-text-columns > .wp-block-column:has(.interpreter-img),
    .wp-block-column.interpreter-column {
        display: none !important;
    }
    .interpreter-text-column {
        flex: 1 1 100% !important;
        padding-left: 4% !important;
        padding-right: 4% !important;
    }
}

@media (max-width: 1123px) {
    .image-text-columns > .wp-block-column:has(.bridge-img) {
        display: none !important;
    }

    .image-text-columns {
        gap: 0 !important;
    }

    .bridge-text-column {
        flex: 1 1 100% !important;
        padding-left: 4% !important;
        padding-right: 4% !important;
    }
}

.main-header-menu .menu-link {
    font-family: "DM Sans", sans-serif !important;
    color: black !important;
}

.main-header-menu .menu-link:not(.sub-menu .menu-link) {
    padding: 0 !important;
    margin: 0 0.5em !important;
}

/* Highlight the top-level item whose page (or child page) is currently open */
.ast-builder-menu-1 .current-menu-item > .menu-link:not(.ast-builder-menu-1 .sub-menu .menu-link),
.ast-builder-menu-1 .current-menu-ancestor > .menu-link:not(.ast-builder-menu-1 .sub-menu .menu-link),
.ast-builder-menu-1 .current-menu-parent > .menu-link:not(.ast-builder-menu-1 .sub-menu .menu-link) {
    color: #e68f52 !important;
    font-weight: bold;
}

@media (min-width: 920px) {
    .ast-builder-menu-1 .menu-item:nth-last-child(2) > .menu-link:not(.ast-builder-menu-1 .sub-menu .menu-link) {
        color: white !important;
        border-radius: 120px;
        padding-right: 8px !important;
        padding-left: 8px !important;
        background-color: #005a99;
        height: 26px;
        font-weight: bold;
    }

    .menu-link {
        font-size: 16px !important;
    }
}

.site-header-section {
    align-items: flex-end !important;
}

.who-we-are-top-columns {
    padding-top: 0px !important;
}


.middle-header-who-we-are {
    margin-top: 0 !important;
}

#masthead {
    position: relative;
    z-index: 10;
    /* Shadow separates the header from the white content area below it,
       even when both are close in colour. */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Full-viewport section backgrounds ------------------------------------
   PATTERN: wrap each page section in a Group block, set alignment to
   "Full Width" in the block toolbar, set the background in Styles → Color.

   Three things required:
   1. Every ancestor between the Group block and <html> must have
      overflow: visible — if ANY ancestor uses overflow-x/y other than
      visible, CSS coerces the visible axis to auto and the breakout is
      silently blocked. overflow: visible on all of them lets the block
      escape; horizontal scroll is still prevented by html { overflow-x:
      clip } defined above.
   2. width: 100vw + the negative-margin calc pulls the block to the
      viewport edges regardless of how wide the content column is.
   3. !important beats Astra's own alignfull rules.

   If the Full Width toolbar option doesn't write alignfull to the HTML
   (verify in DevTools), add the class "full-bleed" to the Group block
   via Gutenberg → Advanced → Additional CSS class(es) as a fallback.  */

#content,
#primary,
main#main,
.entry-content {
    overflow: visible !important;
}

/* ── SITE-WIDE CONTENT WIDTH ────────────────────────────────────────────
   Change --atim-content-width here to adjust every section simultaneously.
   --atim-section-padding is the minimum gutter when the viewport is
   narrower than the content width (i.e. on tablets / small laptops).     */
:root {
    --atim-content-width: 1240px;
    --atim-section-padding: 1.5rem;
}

/* ── FULL-BLEED SECTION PATTERN ─────────────────────────────────────────
   WORKFLOW (reuse this on every page):
   1. In the Gutenberg editor, wrap your section content in a Group block.
   2. Click the alignment icon in the block toolbar → Full Width.
   3. Set the background colour/gradient in block Styles → Color.
   4. Done. Padding is calculated automatically so content stays centred
      at --atim-content-width with no per-block CSS adjustments needed.

   HOW THE PADDING WORKS:
   max(--atim-section-padding, (100vw - content-width) / 2)
   • On large screens the two halves of leftover space become equal gutters,
     centering the content at exactly --atim-content-width.
   • On screens narrower than the content width the fallback padding
     (--atim-section-padding) kicks in so content never touches the edge.
   • Because padding lives on the Group block, every child block inside
     fills 100% of the available width naturally — no width tweaks needed. */
.wp-block-group.alignfull,
.wp-block-group.full-bleed {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: max(var(--atim-section-padding), calc((100vw - var(--atim-content-width)) / 2)) !important;
    padding-right: max(var(--atim-section-padding), calc((100vw - var(--atim-content-width)) / 2)) !important;
    box-sizing: border-box !important;
}

/* ── FIXED-SIZE IMAGES ───────────────────────────────────────────────────
   WORKFLOW for any image that must not resize with the window:
   1. Add a custom CSS class to the Image block in Gutenberg
      (block toolbar → Advanced → Additional CSS class(es)).
   2. Target  .your-class img  (not .your-class) because Gutenberg puts
      custom classes on the <figure> wrapper, not the <img> itself.
      Setting dimensions on <figure> has no effect on the image inside.
   3. Set width (px), height: auto, and max-width: none to override
      Gutenberg's global max-width: 100% that would otherwise shrink it.
   4. Add display: none at your mobile breakpoint to hide it on small screens.

   The column containing the image also needs flex-shrink: 0 so the
   Columns block doesn't compress it as the window narrows.              */

.manitoba-flag-img img {
    width: 350px;
    height: auto;
    max-width: none;
    display: block;
}

.wp-block-column:has(.manitoba-flag-img) {
    flex: 0 0 auto !important;
    width: auto !important;
}

@media (max-width: 768px) {
    .wp-block-column:has(.manitoba-flag-img) {
        display: none;
    }
}

/* ============================================
   CONTENT PAGE TYPOGRAPHY
   Styles for standard WordPress content pages.
   Editors can write directly in WordPress without
   touching CSS — all content elements are styled here.
   ============================================ */

.site .site-content #primary {
    margin-bottom: 0 !important;
}

/* Page title (h1.entry-title in Astra, lives outside .entry-content) */
.entry-title {
    font-family: "DM Serif Text", serif !important;
    font-size: 2.5rem !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    line-height: 1.2 !important;
    margin-top: 1rem !important;
}

/* Headings inside content area */
.entry-content h1,
.entry-content h2,
.entry-content h3 {
    font-family: "DM Serif Text", serif !important;
    font-weight: 400 !important;
    color: #1a1a1a;
    line-height: 1.2;
    margin-top: 2rem;
    margin-bottom: 0.9rem;
}

.entry-content h1 { font-size: 2.5rem; }
.entry-content h2 { font-size: 2rem; }
.entry-content h3 { font-size: 1.55rem; }

.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-family: "DM Sans", sans-serif !important;
    font-weight: 600 !important;
    color: #1a1a1a;
    line-height: 1.3;
    margin-top: 1.5rem;
    margin-bottom: 0.6rem;
}

.entry-content h4 { font-size: 1.25rem; }
.entry-content h5 { font-size: 1.1rem; }
.entry-content h6 { font-size: 1rem; }

/* Body text */
.entry-content p {
    font-family: "DM Sans", sans-serif !important;
    font-size: 1.0625rem; /* 17px */
    font-weight: 400;
    line-height: 1.75;
    color: #333;
    margin-bottom: 1.25rem;
}

/* Bullet and numbered lists */
.entry-content ul,
.entry-content ol {
    font-family: "DM Sans", sans-serif !important;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.75;
    color: #333;
    margin-bottom: 1.25rem;
    padding-left: 1.75rem;
}

.entry-content ul { list-style-type: disc; }
.entry-content ol { list-style-type: decimal; }

.entry-content li { margin-bottom: 0.4rem; }

/* Nested lists */
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

.notarized-list {
    margin: 0 0 1.25em 0 !important;
}

.notarized-list-right {
    margin: 0 0 1.25em 3.25em !important;
}

.list-header-no-margin {
    margin-bottom: 0 !important;
}

/* Links */
.entry-content a {
    color: #005a99;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.wp-element-button {
    text-decoration: none !important;
}

.entry-content a:hover {
    color: #b43700;
}

/* Blockquote */
.entry-content blockquote {
    font-family: "DM Serif Text", serif;
    font-size: 1.2rem;
    font-style: italic;
    color: #4f4753;
    border-left: 4px solid #005a99;
    padding: 1rem 1.5rem;
    margin: 1.75rem 0;
    background-color: #f8f9fa;
    border-radius: 0 4px 4px 0;
}

.entry-content blockquote p {
    font-family: "DM Serif Text", serif !important;
    font-size: 1.2rem;
    font-style: italic;
    margin-bottom: 0 !important;
    color: #4f4753;
}

/* Horizontal rule — uses the gold dotted style from the front page */
.entry-content hr {
    border: none;
    border-top: 2px dotted #a67800;
    margin: 2.5rem 0;
}

/* Tables */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-family: "DM Sans", sans-serif;
    font-size: 1rem;
}

.entry-content th {
    background-color: #005a99;
    color: #ffffff;
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
}

.entry-content td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #dee2e6;
    color: #333;
    vertical-align: top;
}

.entry-content tr:nth-child(even) td {
    background-color: #f8f9fa;
}

/* Inline text */
.entry-content strong { font-weight: 700; }
.entry-content em     { font-style: italic; }

/* Code (inline and block) */
.entry-content code {
    font-size: 0.9em;
    background-color: #f1f3f5;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    padding: 0.1em 0.4em;
    font-family: "Courier New", Courier, monospace;
}

.entry-content pre {
    background-color: #f1f3f5;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.entry-content pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Responsive adjustments for content pages */
@media (max-width: 768px) {
    .entry-content h1 { font-size: 2rem; }
    .entry-content h2 { font-size: 1.6rem; }
    .entry-content h3 { font-size: 1.3rem; }
    .entry-content h4 { font-size: 1.15rem; }

    .entry-content table {
        display: block;
        overflow-x: auto;
    }
}

/* Footer fix */
html, body {
    height: 100% !important;
    margin: 0 !important;
}

/* Clip the horizontal overflow produced by the alignfull breakout below.
   overflow-x: clip (unlike hidden) does not create a scroll container,
   so position:sticky on #masthead continues to work correctly. */
html {
    overflow-x: clip;
}

#page {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

#content {
    flex: 1 !important; /* this makes the main content expand to fill space */
}

#certified-members {
    list-style-type: none !important;
}

#associate-members {
    list-style-type: none !important;
}

/* Board of Directors grid
   Breakpoints:
     > 768px  → 3 columns, 2 rows (desktop / large tablet)
     481–768px → 2 columns (tablet)
     ≤ 480px  → 1 column  (mobile)

   The desktop grid uses 6 tracks (each card spans 2) so an incomplete
   final row of 2 cards can be shifted to sit centered instead of
   flush left with an empty third slot. See the :nth-child rules below. */
.board-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(6, 1fr);
    gap: 4rem 2rem;
}

.board-member {
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    width: 75%;
    margin: 0 auto;
}

/* When the last row has exactly 2 cards (total members % 3 == 2),
   center that pair instead of leaving them flush left. */
.board-grid > *:nth-last-child(2):nth-child(3n + 1) {
    grid-column: 2 / span 2;
}

.board-grid > *:last-child:nth-child(3n + 2) {
    grid-column: 4 / span 2;
}

.board-photo-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 0 0.85rem;
}

.board-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.board-photo-placeholder {
    width: 100%;
    height: 100%;
    background-color: #b89a6e;
}

.board-name {
    font-family: "DM Serif Text", serif !important;
    font-size: 1.4rem !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    margin-bottom: 0.2rem !important;
    line-height: 1.2 !important;
}

.board-title {
    font-family: "DM Sans", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 0 !important;
}

.board-email {
    font-family: "DM Sans", sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    line-height: 1.3;
}

.board-email:hover {
    text-decoration: underline !important;
}

/* Tablet: 2 columns */
@media (max-width: 768px) {
    .board-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem 1.25rem;
    }
    /* Revert the desktop 6-track spans/centering — not used at this breakpoint */
    .board-member,
    .board-grid > *:nth-last-child(2):nth-child(3n + 1),
    .board-grid > *:last-child:nth-child(3n + 2) {
        grid-column: auto;
    }
}

/* Mobile: single column */
@media (max-width: 480px) {
    .board-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .board-name  { font-size: 1.2rem !important; }
    .board-title { font-size: 0.9rem !important; }
    .board-email { font-size: 0.85rem !important; }
}

/* ── BOARD BIO BUTTON ───────────────────────────────────────────────── */
.board-bio-btn {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.3em;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    background-color: #a67800;
    color: #fff;
    font-family: "DM Sans", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: none;
    cursor: pointer;
    margin-top: 0.65rem;
    transition: background-color 0.2s, transform 0.15s;
}

.board-bio-btn:hover {
    background-color: #7d5a00;
    transform: scale(1.05);
}

/* ── BOARD BIO MODAL ────────────────────────────────────────────────── */
.board-bio-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}

.board-bio-overlay.active {
    opacity: 1;
    visibility: visible;
}

.board-bio-modal {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 2rem 2rem 2rem 2rem;
    position: relative;
    transform: translateY(14px);
    transition: transform 0.25s;
}

.board-bio-overlay.active .board-bio-modal {
    transform: translateY(0);
}

.board-bio-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 0 2px 0.5px;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.board-bio-close:hover {
    background: #495057;
}

.board-bio-modal-name {
    font-family: "DM Serif Text", serif !important;
    font-size: 1.6rem !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    margin: 0 2.5rem 0.2rem 0 !important;
    line-height: 1.2 !important;
}

.board-bio-modal-role {
    font-family: "DM Sans", sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #a67800 !important;
    margin: 0 0 1.25rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.board-bio-modal-body p {
    font-family: "DM Sans", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    color: #333 !important;
    margin: 0 !important;
}

@media (max-width: 480px) {
    .board-bio-modal {
        padding: 1.5rem;
    }
    .board-bio-modal-name { font-size: 1.35rem !important; }
}

.view-profile-btn {
    color: white !important;
}

/* Who We Are — download section
   Add class "download-columns" to the Columns block in Gutenberg.
   The ::after pseudo-element draws a vertical dotted gold line at the
   exact midpoint of the two columns, matching .gold-dotted-line's style. */
.download-columns {
    position: relative;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.download-columns .wp-block-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.download-columns::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 20px;
    bottom: 20px;
    border-left: 2px dotted #a67800;
    pointer-events: none;
}

.download-buttons {
    margin-top: 5px !important;
}

/* When columns stack on mobile the vertical divider makes no sense */
@media (max-width: 768px) {
    .download-columns::after {
        display: none;
    }
}

.image-text-columns {
    gap: clamp(24px, 3vw, 50px) !important;
    align-items: stretch !important;
}

.polar-bear-column {
    display: flex !important;
    flex-direction: column !important;
    pointer-events: none;
}

.polar-bear-column .wp-block-image {
    flex: 1 !important;
    margin: 0 !important;
    overflow: hidden;
}

.polar-bear-column .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.translator-column {
    display: flex !important;
    flex-direction: column !important;
    pointer-events: none;
}

.translator-column .wp-block-image {
    flex: 1 !important;
    margin: 0 !important;
    overflow: hidden;
}

.translator-column .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.interpreter-column {
    display: flex !important;
    flex-direction: column !important;
    pointer-events: none;
}

.interpreter-column .wp-block-image {
    flex: 1 !important;
    margin: 0 !important;
    overflow: hidden;
}

.interpreter-column .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.bridge-column {
    display: flex !important;
    flex-direction: column !important;
    pointer-events: none;
}

.bridge-column .wp-block-image {
    flex: 1 !important;
    margin: 0 !important;
    overflow: hidden;
}

.bridge-column .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ── BENEFIT CARDS (Why Join ATIM section) ──────────────────────────────
   Add class "benefit-cards" to the Columns block.
   Add class "red-circle-heading", "yellow-circle-heading", or
   "blue-circle-heading" to each card's Heading block.               */

.benefit-cards .wp-block-column {
    background: #fff;
    border: 1px solid #c9a84c;
    border-radius: 8px;
    padding: 1.5rem !important;
}

.benefit-card-single {
    background: #fff;
    border: 1px solid #c9a84c;
    border-radius: 8px;
    padding: 1.5rem !important;
}

.single-cards-group {
    gap: 16px !important;
}

/* .p-small-margin {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
} */

.directory-top-group {
    margin-bottom: -50px !important;
}

.benefit-cards-group {
    padding-top: 0px !important;
}

.directory-left-column {
    padding-right: 35px !important;
}

.image-column {
    background: none !important;
    border-radius: 8px !important;
    border: none !important;
    flex-shrink: 0 !important;
}

.red-circle-heading,
.yellow-circle-heading,
.blue-circle-heading,
.darkred-circle-heading {
    position: relative !important;
    padding-left: 1.4rem !important;
}

.red-circle-heading::before,
.yellow-circle-heading::before,
.blue-circle-heading::before,
.darkred-circle-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
}

.red-circle-heading::before     { background-color: #b43700; }
.yellow-circle-heading::before  { background-color: #e7a500; }
.blue-circle-heading::before    { background-color: #005a99; }
.darkred-circle-heading::before { background-color: #7a1f1f; }

.yellow-circle-heading-h2::before {
    background-color: #e7a500;
    content: '';
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
}

.yellow-circle-heading-h2 {
    position: relative !important;
    padding-left: 1.4rem !important;
}

/* ── CERTIFICATION PATHWAY ACCORDIONS ───────────────────────────────────
   Add class "pathway-item" to each Details block in Gutenberg.
   The Details block renders as <details><summary>…</summary>…</details>.
   No JS required — open/close is native browser behaviour.          */

.pathway-item {
    margin-top: 0;
    border-top: 2px dotted #a67800;
    padding: 0.6rem 0;
}

.pathway-item:last-of-type {
    border-bottom: 2px dotted #a67800;
}

/* Hide the browser's default triangle marker */
.pathway-item > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    cursor: pointer;
    font-family: "DM Sans", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    color: #1a1a1a !important;
    padding: 0.3rem 0;
    user-select: none;
}

.pathway-item > summary::-webkit-details-marker { display: none; }
.pathway-item > summary::marker                  { content: ''; }

/* Gold +/− toggle icon */
.pathway-item > summary::before {
    content: '+';
    color: #a67800;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}

.pathway-item[open] > summary::before {
    content: '\2212'; /* − minus sign */
}

/* Content area indented to align with summary text */
.pathway-item > *:not(summary) {
    /* padding-left: 2.25rem; */
    margin-top: 0.75rem;
}

@media (max-width: 600px) {
    .benefit-cards .wp-block-columns {
        flex-direction: column;
    }
}

/* ── NUMBERED INFO CARDS ────────────────────────────────────────────────
   Outer Group block → Advanced → CSS class: "numbered-cards-container"
   Each card Group block → Advanced → CSS class: "numbered-card"
   Numbers increment automatically via CSS counter — no manual attributes.

   Circle sits at the top-left inside the card. Left padding clears it.
   The warm gradient fades from white (top-left) to cream (bottom-right). */

.numbered-cards-container {
    counter-reset: card-counter;
}

.numbered-card {
    counter-increment: card-counter;
    position: relative;
    background: white;
    border: 4px solid #c8b99a;
    border-radius: 12px;
    padding: 1.2rem 1.75rem 1.75rem 4.75rem;
    margin-bottom: 1.5rem !important;
}

/* Blue numbered circle */
.numbered-card::before {
    content: counter(card-counter);
    position: absolute;
    top: 1rem;
    left: -1.5rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #005a99;
    color: #fff;
    font-family: "DM Serif Text", serif;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    line-height: 46px;
}

/* Heading — naturally aligns at the same height as the circle */
.numbered-card > .wp-block-heading:first-child {
    font-family: "DM Serif Text", serif !important;
    font-size: 1.6rem !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    margin-top: 0.2rem !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
}

/* Body text and lists inside the card */
.numbered-card > p,
.numbered-card > ul,
.numbered-card > ol,
.numbered-card > .wp-block-columns,
.numbered-card-text-group p,
.numbered-card-text-group ul,
.numbered-card-text-group ol,
.numbered-card-text-group .wp-block-columns,
.numbered-card-text-group-fr p,
.numbered-card-text-group-fr ul,
.numbered-card-text-group-fr ol,
.numbered-card-text-group-fr .wp-block-columns {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #333 !important;
    margin-bottom: 0.75rem !important;
    margin-block-start: 1rem;
}

/* Expandable text group */
.numbered-card-text-group,
.numbered-card-text-group-fr {
    margin-top: 0.75rem;
}

.numbered-card-text-group.is-collapsed,
.numbered-card-text-group-fr.is-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.numbered-card-text-group.is-animating,
.numbered-card-text-group-fr.is-animating {
    display: block;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.numbered-card-text-group.is-expanded,
.numbered-card-text-group-fr.is-expanded {
    display: block;
}

.card-expand-toggle {
    display: block;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 0 0 0 !important;
    margin: 0 !important;
    cursor: pointer;
    font-family: "DM Sans", sans-serif;
    font-size: 1rem;
    color: #333 !important;
    text-decoration: underline;
    text-align: left;
}

.card-expand-toggle:hover,
.card-expand-toggle:active,
.card-expand-toggle:focus {
    background: none !important;
    color: #333 !important;
    opacity: 0.65;
    outline: none;
}

@media (max-width: 640px) {
    .numbered-card {
        padding: 1rem 1.25rem 1.5rem 1.25rem;
        padding-top: 4rem; /* circle clears to above the text */
    }

    .numbered-card::before {
        top: 1rem;
        left: 50%;
        transform: translateX(-50%); /* center the circle on mobile */
    }

    .numbered-card > .wp-block-heading:first-child {
        font-size: 1.2rem !important;
    }
}

.red-columns {
    position: relative;
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.red-columns .wp-block-column {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.red-columns::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 20px;
    bottom: 20px;
    border-left: 2px dotted whitesmoke;
    pointer-events: none;
}

.certified-v-notarized-columns::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 20px;
    bottom: 20px;
    border-left: 2px dotted #a67800;
    pointer-events: none;
}

/* ── PATHWAY ITEM INNER CONTENT ─────────────────────────────────────────
   WORKFLOW:
   1. Inside each Details block, wrap ALL content in a single Group block.
   2. Group block → Advanced → CSS class: "pathway-content-card"
   3. Apply sub-classes to individual blocks within as described below.  */

/* Cream card with gold left accent */
.pathway-content-card {
    background-color: #fdf7f0;
    border-left: 3px solid #a67800;
    border-radius: 0 8px 8px 0;
    padding: 1.75rem 2rem !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.25rem !important;
}

/* Fade in when the <details> opens */
@keyframes pathway-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

details[open] .pathway-content-card {
    animation: pathway-fade-in 0.3s ease forwards;
}

/* Fee / key-info callout — add class "pathway-fee" to a Group block */
.pathway-fee {
    background-color: #fff8e6 !important;
    border: 1px solid #d4a900 !important;
    border-radius: 6px !important;
    padding: 0.9rem 1.25rem !important;
    margin: 1.25rem 0 !important;
}

.pathway-fee p {
    margin: 0 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #7d5a00 !important;
}

/* Document checklist — add class "pathway-checklist" to a List block */
.pathway-checklist {
    list-style: none !important;
    padding-left: 0 !important;
}

.pathway-checklist li {
    position: relative !important;
    padding-left: 1.6rem !important;
    margin-bottom: 0.5rem !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #333 !important;
}

.pathway-checklist li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #a67800;
    font-weight: 700;
}

/* Word-count metric table — add class "pathway-metric-table" to a Table block */
.pathway-metric-table {
    width: auto !important;
    min-width: 280px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin: 1rem 0 !important;
    margin-bottom: 0 !important;
    /* separate (not collapse) is required for border-radius to clip corners */
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e8e8e8 !important;
    font-size: 0.95rem !important;
}

.pathway-metric-table thead th {
    background-color: #a67800 !important;
    color: #fff !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 0.5rem 1rem !important;
    text-align: left !important;
    border: none !important;
    border-bottom: 1px solid #e8e8e8 !important;
}

table, td, th {
    border: none;
}

/* ── COMPARISON TABLE (red-section style) ───────────────────────────────
   Add class "comparison-table" to a Table block inside a red section.
   Column headers and first-column row labels get the red treatment;
   data cells are white so they read cleanly against the red background. */

.comparison-table {
    width: 100% !important;
    /* border-spacing: 0 !important; */
    overflow: hidden !important;
    margin: 1.5rem 0 !important;
    font-size: 0.95rem !important;
    border-collapse: collapse !important;
    border: 2px solid white !important;
}

/* Column header row */
.comparison-table thead th {
    background-color: rgba(0, 0, 0, 0.28) !important;
    color: #fff !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    padding: 0.85rem 1.25rem !important;
    text-align: left !important;
    border-right: 2px solid white !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-left: none !important;
    border-top: none !important;
}

.comparison-table thead th:last-child {
    border-right: none !important;
}

/* All body cells — alternating row colors, white text throughout */
.comparison-table tbody tr:nth-child(odd) td {
    background-color: #5d82ae !important;
    color: #fff !important;
    padding: 0.85rem 1.25rem !important;
    border-right: 2px solid white !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-left: none !important;
    border-top: none !important;
    vertical-align: top !important;
}

.comparison-table tbody tr:nth-child(even) td {
    background-color: #255995 !important;
    color: #fff !important;
    padding: 0.85rem 1.25rem !important;
    border-right: 2px solid white !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-left: none !important;
    border-top: none !important;
    vertical-align: top !important;
}

.comparison-table tbody tr td:last-child {
    border-right: none !important;
}

.comparison-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* First column — bold row labels, vertically centered */
.comparison-table tbody tr td:first-child {
    font-weight: 700 !important;
    font-family: "DM Sans", sans-serif !important;
    vertical-align: middle !important;
}

.entry-content table {
    margin-bottom: 0;
}

.pathway-metric-table td {
    background-color: #fff !important;
    padding: 0.45rem 1rem !important;
    border: none !important;
    border-bottom: 1px solid #e8e8e8 !important;
    color: #333 !important;
}

.pathway-metric-table tr:last-child td {
    border-bottom: none !important;
}

.pathway-metric-table tr:nth-child(even) td {
    background-color: #fdf7f0 !important;
}

/* .entry-content > .wp-block-group {
    padding-bottom: 0 !important;
} */

/* Back to top button for member directory results */
.back-to-top-btn {
    display: none;
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 999;
    background: #1a3a5c;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.6rem 1.1rem;
    font-family: "DM Sans", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: opacity 0.25s ease, transform 0.25s ease;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.back-to-top-btn.back-to-top-visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top-btn:hover {
    background: #14304e;
}

/* ============================================================
   News & Events Carousel — [atim_news_carousel]
   Structure:
     .atim-carousel-outer          (margins, no overflow clipping)
       .atim-carousel-track        (overflow:hidden clips slides horizontally;
                                    padding-bottom contains the hanging text box)
         .atim-carousel-prev/next  (absolute, top = half of image height)
         .atim-news-carousel       (overflow:visible — hangs into track padding)
           .swiper-wrapper
             .swiper-slide         (fades in/out; non-visible = opacity 0)
               .news-item          (image card, position:relative)
                 .news-text        (absolute hang below card — front-page style)
       .atim-carousel-pagination   (static, centered, substantial gap below)
   ============================================================ */

/* Image card height. Text hangs 150px below card bottom (gap ≈ 50px above
   text box so the shadow can ease softly rather than hitting a hard edge).
   Track padding-bottom = 150 (hang) + text-box height (~110px) + 40 (pagination + room) = 200px. */
:root {
    --carousel-img-h: 287px;
}

.atim-carousel-outer {
    margin: 20px 5vw 0;
}

/* Track: clips off-screen slides; padding-bottom contains hang + pagination */
.atim-carousel-track {
    position: relative;
    padding: 0 60px 130px;
    overflow: hidden;
}

/* Swiper: sized to the image area only; overflow:visible lets text hang */
.atim-news-carousel {
    height: var(--carousel-img-h);
    overflow: visible !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: unset !important;
}

.atim-news-carousel .swiper-wrapper {
    height: 100%;
}

/* Non-visible slides fade to transparent — hides peeking edges on either side */
.atim-news-carousel .swiper-slide {
    height: 100%;
    display: flex;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.atim-news-carousel .swiper-slide-active,
.atim-news-carousel .swiper-slide-next {
    opacity: 1;
}

/* Card: fills the image area, position:relative anchors the hanging text */
.atim-news-carousel .news-item {
    flex: 1 !important;
    display: block !important;
    height: 100% !important;
    width: 100% !important;
    min-width: unset !important;
    min-height: unset !important;
    position: relative;
    background-color: #e8e0d0; /* warm fallback when no featured image */
}

/* Hanging white text box — 150px hang gives ~50px of clear space above the
   box so the shadow can spread softly before the image card edge. */
.atim-news-carousel .news-text {
    position: absolute !important;
    bottom: -80px !important;
    left: 4% !important;
    right: 4% !important;
    background: #fff;
    padding: 14px 20px 16px !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18) !important;
}

.atim-news-carousel .news-item-header {
    font-size: 1.25rem;
    margin: 0 0 4px;
    line-height: 1.25;
}

.atim-news-carousel .news-post-date {
    font-size: 0.82rem;
    color: #888;
    margin: 0 0 6px;
    font-family: "DM Sans", sans-serif;
}

/* Nav buttons: centered to image area (top = half of --carousel-img-h) */
.atim-carousel-prev,
.atim-carousel-next {
    position: absolute;
    top: calc(var(--carousel-img-h) / 2);
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1.5px solid #dde5ef;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(37,89,149,0.12);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    font-size: 1rem;
    color: #255995;
    user-select: none;
}

.atim-carousel-prev { left: 10px; }
.atim-carousel-next { right: 10px; }

.atim-carousel-prev:hover,
.atim-carousel-next:hover {
    background: #9F7A27;
    border-color: #9F7A27;
    color: #fff;
    transform: translateY(-50%) scale(1.08);
}

.atim-carousel-prev.swiper-button-disabled,
.atim-carousel-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Pagination: absolute inside the swiper (overflow:visible), centered below
   the hanging text. Swiper height = 220px. Text box bottom = 220+150 = 370px
   from swiper top. Pagination at bottom: -180px → 220+180 = 400px from top. */
.atim-news-carousel .swiper-pagination {
    bottom: -130px !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center;
    transform: translateX(0%) !important;
}

.atim-news-carousel .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #255995;
    opacity: 0.3;
    transition: all 0.3s ease;
}

.atim-news-carousel .swiper-pagination-bullet-active {
    opacity: 1;
    background: #9F7A27;
    width: 24px;
    border-radius: 4px;
}

@media (max-width: 921px) {
    .atim-carousel-track {
        padding: 0 48px 130px;
    }
    .atim-carousel-outer {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media (max-width: 640px) {
    .atim-carousel-track {
        padding: 0 8px 130px;
    }
    .atim-carousel-prev,
    .atim-carousel-next {
        display: none;
    }
}

/* Account page panel — add this class to the Additional CSS Class(es)
   field of the Group block wrapping [member_profile_customization],
   [atim_member_card], and [atim_member_seal] (or their _fr equivalents)
   so all three sit inside one shared white card instead of each drawing
   its own background. Values match the card look .member-profile-form
   used to draw on its own (see functions.php).
   !important overrides core's `.wp-block-group.has-background { padding:
   1.25em 2.375em; }`, which WordPress adds automatically the moment a
   Group block has a background — ours or one set via the block's own
   Style panel — and otherwise stacks on top of the padding below,
   ballooning the left/right inset in particular (2.375em vs 1.25em). */
.atim-account-panel {
    max-width: 800px;
    margin: 20px auto;
    margin-bottom: 50px !important;
    padding: 50px 100px !important;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@media (max-width: 600px) {
    .atim-account-panel {
        padding: 15px !important;
    }
}