/**
 * Country Location Template - Consolidated Styles
 * All ACF block styles for country/location pages
 *
 * Blocks included:
 * - country-intro
 * - map-heading
 * - country-flag-map
 * - neighboring-countries
 * - country-borders-info
 * - related-content
 * - country-key-facts
 * - country-economy-facts
 * - biggest-cities
 * - related-countries
 */

/* ==========================================================================
   Country Intro Block
   ========================================================================== */
.country-intro-block {
    max-width: 800px;
    margin: 1.5rem auto;
}

.country-intro-text {
    color: #2d3748;
    line-height: 1.7;
    margin: 0 0 1.25rem;
}

.country-intro-dms-label {
    color: #2d3748;
    margin: 0 0 0.5rem;
}

.country-intro-dms-coords {
    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.95rem;
    color: #4a5568;
    background: #f7fafc;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border-left: 3px solid #3182ce;
    margin: 0 0 1.25rem;
    line-height: 1.6;
}

.country-intro-map-label {
    color: #2d3748;
    margin: 0;
}

/* ==========================================================================
   Map Heading Block
   ========================================================================== */
.map-heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin: 2rem 0 1rem;
    text-align: left;
}

/* ==========================================================================
   Country Flag on Map Block
   ========================================================================== */
.country-flag-map-block {
    max-width: 800px;
    margin: 1.5rem auto;
    text-align: center;
}

.country-flag-map-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.country-flag-map-caption {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    color: #4a5568;
    line-height: 1.4;
    background: linear-gradient(to right, #f1f5f9, #f8fafc);
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}

/* ==========================================================================
   Neighboring Countries Block
   ========================================================================== */
.neighboring-countries-block {
    max-width: 800px;
    margin: 2rem auto;
}

.neighboring-countries-heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 0.75rem;
}

.neighboring-countries-intro {
    color: #4a5568;
    margin-bottom: 1rem;
}

.neighboring-countries-list {
    margin: 0 0 1.5rem 1.5rem;
    padding: 0;
}

.neighboring-countries-list li {
    padding: 0.25rem 0;
    color: #2d3748;
}

.neighboring-countries-no-border {
    color: #4a5568;
    font-style: italic;
    margin-bottom: 1.5rem;
}

.neighboring-countries-map {
    margin-top: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
}

/* ==========================================================================
   Country Borders Info Block
   ========================================================================== */
.country-borders-info-block {
    max-width: 800px;
    margin: 1.5rem auto;
}

.country-borders-landlocked {
    margin-bottom: 1.5rem;
}

.country-borders-landlocked p {
    color: #4a5568;
    margin: 0;
}

.country-borders-maritime {
    margin-bottom: 1rem;
}

.country-borders-maritime-heading {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 0.5rem;
}

.country-borders-maritime p {
    color: #4a5568;
    margin: 0;
}

/* ==========================================================================
   Related Content Block
   ========================================================================== */
.related-content-block {
    max-width: 800px;
    margin: 2rem auto;
}

.related-content-heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.related-content-list,
.entry-content .related-content-list,
.entry-content ul.related-content-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.related-content-list li {
    margin: 0;
    padding: 0;
}

.related-content-list a {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #2d3748;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.related-content-list a,
.related-content-list a:visited,
.related-content-list a:active {
    text-decoration: none !important;
    border-bottom: none !important;
}

.related-content-list a:hover {
    background: #fff;
    border-color: #3182ce;
    box-shadow: 0 2px 4px rgba(49, 130, 206, 0.1);
    color: #2563eb;
    text-decoration: none;
}

.related-content-link-text {
    text-decoration: underline;
}

.related-content-arrow {
    font-size: 1.25rem;
    line-height: 1;
    color: #a0aec0;
    transition: transform 0.15s ease, color 0.15s ease;
    text-decoration: none !important;
    border-bottom: none !important;
}

.related-content-list a:hover .related-content-arrow {
    color: #3182ce;
    transform: translateX(3px);
}

/* ==========================================================================
   Country Facts Blocks (Key Facts & Economy Facts)
   ========================================================================== */
.country-facts-block {
    max-width: 800px;
    margin: 2rem auto;
}

.country-facts-heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.country-facts-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.country-facts-table th,
.country-facts-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
}

.country-facts-table tr:last-child th,
.country-facts-table tr:last-child td {
    border-bottom: none;
}

.country-facts-table th {
    width: 35%;
    background: #f7fafc;
    font-weight: 600;
    color: #4a5568;
    font-size: 0.875rem;
}

.country-facts-table td {
    color: #2d3748;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.country-facts-table tr:hover {
    background: #f7fafc;
}

.country-facts-table tr:hover th {
    background: #edf2f7;
}

.country-facts-table small {
    color: #718096;
    font-size: 0.8125rem;
}

.country-facts-timezones {
    margin: 0.5rem 0 0 1rem;
    padding: 0;
    list-style-type: disc;
}

.country-facts-timezones li {
    padding: 0.125rem 0;
    font-size: 0.875rem;
}

/* ==========================================================================
   Biggest Cities Block
   ========================================================================== */
.biggest-cities-block {
    max-width: 800px;
    margin: 2rem auto;
}

.biggest-cities-heading,
.biggest-cities-map-heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 0.75rem;
}

.biggest-cities-intro {
    color: #4a5568;
    margin-bottom: 1rem;
}

.biggest-cities-table-wrapper {
    margin-bottom: 2rem;
}

.biggest-cities-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.biggest-cities-table th,
.biggest-cities-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.biggest-cities-table thead th {
    background: #f7fafc;
    font-weight: 600;
    color: #4a5568;
    font-size: 0.875rem;
}

.biggest-cities-table tbody tr:last-child td {
    border-bottom: none;
}

.biggest-cities-table tbody tr:hover {
    background: #f7fafc;
}

.biggest-cities-table td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.biggest-cities-map-heading {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.biggest-cities-map {
    margin-top: 1rem;
    border-radius: 8px;
    overflow: hidden;
}

/* ==========================================================================
   Related Countries Block
   ========================================================================== */
.related-countries-block {
    max-width: 800px;
    margin: 2rem auto;
}

.related-countries-heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 1rem;
}

.related-countries-list {
    margin: 0;
    padding: 0 0 0 1.5rem;
    list-style-type: disc;
    column-count: 2;
    column-gap: 2rem;
}

.related-countries-list li {
    padding: 0.25rem 0;
    break-inside: avoid;
}

.related-countries-list a {
    color: #2563eb;
    text-decoration: none;
    transition: color 0.2s ease;
}

.related-countries-list a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */
@media (max-width: 768px) {
    /* Country Intro */
    .country-intro-block {
        margin: 1rem 0.5rem;
    }

    .country-intro-dms-coords {
        font-size: 0.875rem;
        padding: 0.625rem 0.875rem;
    }

    /* Map Heading */
    .map-heading {
        font-size: 1.25rem;
        margin: 1.5rem 0 0.75rem;
    }

    /* Country Flag Map */
    .country-flag-map-block {
        margin: 1rem 0.5rem;
    }

    .country-flag-map-caption {
        font-size: 0.8125rem;
        padding: 0.5rem 1rem;
    }

    /* Neighboring Countries */
    .neighboring-countries-block {
        margin: 1rem 0.5rem;
    }

    .neighboring-countries-heading {
        font-size: 1.25rem;
    }

    /* Country Borders Info */
    .country-borders-info-block {
        margin: 1rem 0.5rem;
    }

    .country-borders-maritime-heading {
        font-size: 1.125rem;
    }

    /* Related Content */
    .related-content-block {
        margin: 1rem 0.5rem;
    }

    .related-content-heading {
        font-size: 1.25rem;
    }

    .related-content-list a {
        padding: 0.75rem;
        font-size: 0.9375rem;
    }

    /* Country Facts */
    .country-facts-block {
        margin: 1rem 0.5rem;
    }

    .country-facts-heading {
        font-size: 1.25rem;
    }

    .country-facts-table th,
    .country-facts-table td {
        padding: 0.75rem;
        display: block;
        width: 100%;
    }

    .country-facts-table th {
        background: #edf2f7;
        border-bottom: none;
        padding-bottom: 0.25rem;
    }

    .country-facts-table td {
        padding-top: 0.25rem;
        border-bottom: 1px solid #e2e8f0;
    }

    /* Biggest Cities */
    .biggest-cities-block {
        margin: 1rem 0.5rem;
    }

    .biggest-cities-heading,
    .biggest-cities-map-heading {
        font-size: 1.25rem;
    }

    .biggest-cities-table th,
    .biggest-cities-table td {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    /* Related Countries */
    .related-countries-block {
        margin: 1rem 0.5rem;
    }

    .related-countries-heading {
        font-size: 1.25rem;
    }

    .related-countries-list {
        column-count: 1;
    }
}