/* ============================================
   ANTIPODE FINDER - MAIN STYLESHEET
   ============================================ */

/* ============================================
   1. BASE STYLES & RESETS
   ============================================ */

html {
    width: 100%;
    min-width: 390px;
}

body {
    font-family: Arial, sans-serif;
    background-color: #000;
    margin: 0 !important;
    min-width: 300px;
    width: 100%;
}

/* Hide horizontal scrollbar above 390px, allow scrolling at/below 390px */
@media (min-width: 391px) {
    html {
        overflow-x: hidden;
    }
}

/* ============================================
   2. TYPOGRAPHY & LINKS
   ============================================ */

a {
    color: #8db6e7;
    text-decoration: none;
}

a:hover {
    color: #6b94c5;
}

a::after {
    color: #8db6e7;
    text-decoration: none;
}

/* ============================================
   3. LAYOUT UTILITIES
   ============================================ */

.container {
    width: 95%;
    min-height: calc(100vh - 230.8px);
    margin: 0 auto;
    min-width: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.disp-row {
    display: flex;
    flex-direction: row;
}

.disp-col {
    display: flex;
    flex-direction: column;
}

.hidden {
    display: none !important;
}

.brdr-20 {
    height: 20px;
}

/* ============================================
   4. NAVBAR
   ============================================ */

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, #454545, #323232);
    color: white;
    padding: 10px 20px;
    position: relative;
    text-wrap: nowrap;
    min-width: 350px;
}

.navbar-brand {
    font-size: 1.5em;
    margin-right: 15px;
}

#navbar-title {
    text-decoration: none;
    color: #fff;
}

#navbar-title:hover {
    color: #ccc;
    text-decoration: none;
    cursor: pointer;
}

#navbar-title:active {
    color: #fff;
    text-decoration: none;
}

#navbar-title:focus {
    color: #fff;
    text-decoration: none;
}

.navbar-menu {
    display: flex;
    gap: 15px;
    z-index: 2;
    margin-right: 5%;
}

.navbar-item {
    color: white;
    text-decoration: none;
    font-size: 1.1em;
}

.navbar-item:hover {
    color: #aaa;
}

/* Hamburger menu button (visible on mobile) */
.navbar-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
}

/* ============================================
   5. LOADING OVERLAY & SPINNER
   ============================================ */

#loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    border: 8px solid rgba(255, 255, 255, 0.3);
    border-top: 8px solid white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

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

/* ============================================
   6. MAP COMPONENTS
   ============================================ */

/* Map tabs */
#map-tabs {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    max-height: 40px;
    text-wrap: nowrap;
    margin-left: 10px;
}

.tab-button {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

.tab-button.active {
    background-color: #ddd;
}

/* Map view containers */
.map-view {
    width: 100%;
    height: 400px;
    position: relative;
}

#map,
#us-antipodes-map {
    border: 1px solid #fff;
    width: 100%;
    height: 500px;
    margin-top: 20px;
    min-width: 360px;
    max-width: 1025px;
}

#map-container-w-ads {
    display: hidden;
    /* Use percentage-based width to avoid scrollbar issues with 100vw */
    width: min(calc(100% - 20px), 1025px);
    min-width: 370px;
    max-width: 1025px;
}

/* Fluid sizing for map containers - scales with viewport */
#map-container,
#globe-container-3d {
    /* Use percentage-based width to avoid scrollbar issues with 100vw */
    width: min(calc(100% - 30px), 1025px);
    min-width: 360px;
    max-width: 1025px;
}

/* Azimuthal map container needs auto height to accommodate stacked globes */
#azimuthal-equal-area-proj-map {
    width: calc(100% - 20px);
    min-width: 360px;
    max-width: 1025px;
    /* Override .map-view height - must be auto to grow with stacked globes */
    height: auto !important;
    min-height: 560px; /* Default for row mode: 510 + controls */
}

#us-antipodes-map-caption,
#us-answer {
    margin: 15px 10px 25px 15px;
    width: 95%;
    min-width: 390px;
}

#us-answer {
    line-height: 1.5;
}

/* Search inputs */
#search-inputs {
    padding: 5px;
    height: 45px;
}

#use-my-location {
    display: block;
    padding: 8px;
    min-width: 131px;
    max-height: 30px;
    background-color: #333;
    color: #fff;
    border: 1px solid #fff;
    cursor: pointer;
    text-wrap: nowrap;
}

#use-location-aria {
    margin: 15px 10px 0 10px;
}

#search-input {
    display: block;
    margin: 10px 0;
    padding: 5px;
    min-width: 300px;
}

#search-input-aria {
    padding: 5px;
    max-height: 40px;
}

#coordinates-output {
    margin: 15px;
    font-size: 0.9em;
    text-align: left;
    color: azure;
}

/* Globe containers */
#globe-container {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 10px auto;
    background-color: #888;
    border: 1px solid #fff;
    /* Row mode (>1075px): height for one row of globes */
    height: 510px;
    /* Width: 510 + 510 + 5 (gap) + 2 (border) = 1027, cap at 1025 */
    width: 1025px;
    max-width: 1025px;
}

/* Globe SVGs - constrain to container */
#globe-main,
#globe-inverse {
    flex-shrink: 0;
    max-width: 510px;
    max-height: 510px;
}

#rotation-slider {
    width: 250px;
}

#globe-container-3d {
    margin: 10px 0;
    border: 1px solid #fff;
    max-height: 520px;
    min-height: 520px;
    /* Use percentage-based width, capped at 755px for 3D globe */
    width: min(calc(100% - 30px), 755px);
    min-width: 360px;
    max-width: 755px;
    position: relative;
}

#globe-3d-buttons {
    position: absolute;
    display: flex;
    flex-direction: column;
    margin: 3px;
    width: 30px;
    z-index: 2;
}

.earth-3d-btn {
    margin: 1.5px;
    padding: 0 5px;
}

#view-location-btn,
#view-antipode-btn {
    width: 65px;
}

#globe-canvas-3d {
    max-height: 520px;
    min-height: 520px;
}

#globe-canvas-3d canvas {
    height: 520px !important;
}

#globe-canvas-3d div {
    bottom: 10px !important;
}

/* ============================================
   7. CONTENT CONTAINER
   ============================================ */

.content-container {
    padding: 20px;
    color: #f0f0f0;
    background-color: #1a1a1a;
    border-radius: 8px;
    margin: 20px auto;
    min-width: 350px;
    max-width: 900px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.content-container section {
    margin-bottom: 30px;
}

.content-container h2 {
    font-size: 1.8em;
    border-bottom: 2px solid #555;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.content-container h3 {
    font-size: 1.5em;
    margin-top: 20px;
    margin-bottom: 10px;
}

.content-container p {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 15px;
}

.content-container ol {
    padding-left: 20px;
    margin-bottom: 15px;
}

.content-container sup {
    font-size: 0.8em;
    color: #ccc;
}

/* Antipode maps section */
.content-container #antipode-maps-section {
    margin-top: 20px;
}

.content-container #antipode-maps-section figure {
    margin: 10px auto;
    text-align: center;
}

.content-container #antipode-maps-section figure img {
    min-width: 320px;
    max-width: 860px;
    width: 100%;
    height: auto;
}

/* ============================================
   8. FIGURES & IMAGES
   ============================================ */

figure {
    min-width: 340px;
    margin: 10px;
}

#antipode-section img,
#antipode-city-section img {
    height: auto;
    width: 100%;
}

/* ============================================
   9. ABOUT, PRIVACY, CONTACT PAGES
   ============================================ */

#about-container,
#privacy-container,
#contact-container {
    background-color: #1e1e1e;
    color: #f0f0f0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0 40px 0 40px;
    min-height: calc(100vh - 230.8px);
}

#about-container h1,
#privacy-container h1,
#contact-container h1 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 42px;
    text-align: center;
}

#about-container p,
#about-container li {
    margin-bottom: 15px;
}

#about-antipode-finder,
#about-technologies,
#contact-info,
#privacy-policy {
    padding: 0 55px;
    margin-top: 30px;
}

#contact-info a {
    color: rgb(52, 89, 252);
    text-decoration: none;
}

#contact-info a:hover {
    color: rgb(22, 48, 161);
}

/* ============================================
   10. ANTIPODE OF USA PAGE
   ============================================ */

#overlapping-us-states-tbl {
    width: 95%;
    border-collapse: collapse;
    margin: 15px;
    margin-bottom: 25px;
    font-family: "Times New Roman", Times, serif;
    min-width: 300px;
    max-width: 655px;
}

#overlapping-us-states-tbl th,
#overlapping-us-states-tbl td {
    padding: 8px 12px;
    text-align: left;
}

#overlapping-us-states-tbl th {
    border-bottom: 2px solid black;
    font-weight: bold;
}

#overlapping-us-states-tbl td {
    border-bottom: 1px solid #ccc;
}

#overlapping-us-states-tbl tbody tr:last-child td {
    border-bottom: none;
}

#overlapping-us-states-tbl .numeric {
    text-align: right;
}

#antipode-usa-section-1 img {
    max-width: 950px;
    min-width: 300px;
    width: 100%;
    height: auto;
    margin-right: 10px;
    margin-bottom: 10px;
}

/* FAQ Section */
#antipode-usa-faq dt {
    margin-bottom: 5px;
}

#antipode-usa-faq dd {
    margin-bottom: 15px;
}

/* ============================================
   11. CITY ANTIPODES PAGE
   ============================================ */

/* Page header */
.city-antipodes-header {
    margin: 35px 20px 25px 15px;
    width: 95%;
    min-width: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.city-antipodes-header h1 {
    color: white;
    font-size: 1.85rem;
    margin: 0;
}

.city-antipodes-header h2 {
    color: white;
    font-size: 1.65rem;
    margin: 5px;
}

/* Intro section */
#antipodal-cities-intro {
    max-width: 1050px;
    min-width: 390px;
}

#antipodal-cities-intro p {
    color: white;
    font-size: 1.1rem;
    margin: 15px 20px;
}

#antipodal-city-examples {
    color: white;
    font-size: 1.4rem;
    margin: 20px 20px 10px;
}

#antipodal-cities-intro ul {
    color: white;
    margin: 0 40px 20px 40px;
    line-height: 1.5;
}

#antipodal-cities-intro p,
#antipode-city-section p,
#antipode-cities-preprocessing-section p,
#antipodal-cities-intro li,
#antipode-city-section li,
#antipode-cities-preprocessing-section li {
    font-size: 1.2rem;
}

.data-processing-list-item {
    margin: 10px;
}

/* Table container */
.city-table-container {
    margin: 5px;
    width: 96%;
    min-width: 390px;
}

/* DataTables styling */
#antipodes-table_wrapper {
    max-width: 1400px;
    margin: 0 auto;
    min-width: 375px;
}

#antipodes-table_filter {
    margin: 5px;
}

#antipodes-table_wrapper table.dataTable {
    color: white;
    border-color: white;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: none !important;
}

#antipodes-table_wrapper .dataTables_scroll {
    border: 1px solid white;
}

#antipodes-table_wrapper label {
    color: white;
}

#antipodes-table_wrapper table.dataTable th,
table.dataTable td {
    border: 1px solid white;
    font-size: 12.5px;
    min-width: 90px !important;
}

#antipodes-table_wrapper table.dataTable tbody tr {
    min-width: 90px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
}

#antipodes-table_wrapper table.dataTable thead th {
    color: white;
    background-color: black;
}

#antipodes-table_wrapper table.dataTable_paginate {
    color: white;
}

#antipodes-table_paginate {
    float: left !important;
    text-align: left !important;
    margin-left: 25px;
}

#antipodes-table_info {
    color: #888;
    font-size: 0.7rem;
}

#antipodes-table_wrapper .paginate_button,
#antipodes-table_wrapper .ellipsis {
    color: #aaa !important;
}

#antipodes-table_wrapper .paginate_button.current {
    color: white !important;
}

/* DataTables sorting arrows */
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting::after {
    opacity: 0.5 !important;
    color: white !important;
}

table.dataTable thead th.sorting_asc::before {
    opacity: 1 !important;
    color: rgb(54, 184, 93) !important;
}

table.dataTable thead th.sorting_desc::after {
    opacity: 1 !important;
    color: rgb(181, 52, 58) !important;
}

/* Table caption */
#city-table-caption {
    max-width: 890px;
    min-width: 375px;
    padding: 3px;
    font-size: 1.15rem;
}

#city-table-caption i {
    color: #dedede;
}

/* ============================================
   12. INDEX PAGE
   ============================================ */

.index-header {
    margin: 35px 20px 25px 15px;
    width: 95%;
    min-width: 390px;
}

.index-header h1 {
    color: white;
    font-size: 1.65rem;
}

#main-page-br {
    margin-top: 140px;
}

/* ============================================
   13. FOOTER
   ============================================ */

footer {
    background: linear-gradient(to bottom, #444, #121212);
    color: #ffffff;
    text-align: center;
    min-width: 390px;
}

.social-links {
    margin: 0 20px 0 20px;
    min-height: 55px;
}

.social-links-container {
    margin-top: 5px;
}

.social-links a {
    margin: 0 10px;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
}

.footer-links {
    margin: 30px 20px 0 20px;
    height: 35px;
    white-space: nowrap;
}

.footer-links a {
    margin: 0 10px;
    color: #ffffff;
    text-decoration: none;
}

.copyright {
    margin: 15px 20px 0 20px;
    font-size: 14px;
    height: 20px;
}

/* ============================================
   14. ERROR PAGE
   ============================================ */

.err-container {
    margin: 10px auto;
    max-width: 600px;
    text-align: center;
    color: #fff;
}

.err-container h1 {
    margin: 30px 0;
    font-size: 4em;
    line-height: 1;
    letter-spacing: -1px;
    color: #fff;
}

/* ============================================
   15. NOSCRIPT IFRAME (GTM)
   ============================================ */

.gtm-noscript-iframe {
    display: none;
    visibility: hidden;
}

/* ============================================
   16. PAGE HEADERS
   ============================================ */

.page-header {
    margin: 35px 20px 25px 15px;
    width: 95%;
    min-width: 390px;
}

.page-header h1 {
    color: white;
    font-size: 1.65rem;
}

.page-header-centered {
    margin: 35px 20px 25px 15px;
    width: 95%;
    min-width: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-header-centered h1 {
    color: white;
    font-size: 1.85rem;
    margin: 0;
}

.page-header-centered h2 {
    color: white;
    font-size: 1.65rem;
    margin: 5px;
}

/* ============================================
   17. ANTIPODE OF USA PAGE
   ============================================ */

#us-answer {
    color: white;
    font-size: 1.1rem;
    max-width: 1050px;
}

#us-antipodes-map {
    margin-bottom: 5px;
}

#us-antipodes-map-caption {
    max-width: 1025px;
    margin: 5px 10px;
}

#us-antipodes-map-caption figcaption i {
    color: white;
    font-size: 1.2rem;
}

#antipode-usa-main p, #antipode-usa-main i, #antipode-usa-main li,
#antipode-usa-main table, #antipode-usa-main a, #antipode-usa-main dt,
#antipode-usa-main dd, #antipode-usa-intro p, #antipode-usa-intro li,
#antipode-usa-intro a{
    font-size: 1.2rem;
}

/* ============================================
   18. 3D GLOBE BUTTONS
   ============================================ */

.earth-3d-btn-wide {
    width: 65px;
}

/* ============================================
   19. ADSBYGOOGLE
   ============================================ */

.adsbygoogle {
    display: block;
}

/* ============================================
   20. CONTACT PAGE WIP
   ============================================ */

.contact-wip {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-wip-icon {
    font-size: 180px;
    color: #fff;
}

.contact-wip-text {
    font-size: 20px;
    color: #aaa;
    margin-top: 20px;
}

/* ============================================
   21. MEDIA QUERIES - RESPONSIVE STYLES
   Ordered from highest to lowest width
   ============================================ */

/* Globe container stacks to column layout when viewport is too narrow for side-by-side */
@media (max-width: 1075px) {
    #globe-container {
        flex-direction: column;
        align-items: center;
        margin: 10px auto;
        /* Column mode: width = globe size, height = 2 globes + gap */
        /* JS sets exact values dynamically; these are fallbacks */
        width: 510px;
        max-width: 510px;
        height: 1025px;
    }

    /* Ensure parent container height matches globe container in column mode */
    #azimuthal-equal-area-proj-map {
        min-height: 1085px !important; /* 1025 (globes) + 60 (controls + margins) */
    }
}

/* Below 610px, globe size scales - let JS handle dimensions */
@media (max-width: 610px) {
    #globe-container {
        /* JS sets exact width/height based on scaled globe size */
        width: auto;
        max-width: 510px;
        min-width: 380px;
        height: auto;
        min-height: 765px; /* 2 * 380 + 5 */
    }

    /* Scale parent container min-height with globe size */
    #azimuthal-equal-area-proj-map {
        min-height: 825px !important; /* 765 (min globes) + 60 (controls + margins) */
    }
}


/* Medium screens and tablets */
@media (max-width: 768px) {
    .container {
        margin: 0;
        width: 98%;
    }

    .navbar-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 50px;
        right: 0;
        background-color: #444;
        width: 150px;
        padding: 5px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        margin-right: 0;
    }

    .navbar-menu.show {
        display: flex;
        border: 0.5px solid #888;
    }

    .navbar-toggle {
        display: block;
    }

    #search-inputs {
        flex-direction: column;
        padding: 0;
        height: 100px;
    }

    #search-input {
        margin: 5px 0;
    }

    #use-location-aria {
        margin: 5px 0 5px 5px;
    }

    #map-tabs {
        margin-left: 5px;
        margin-right: 5px;
    }

    #antipode-section figure {
        margin: 5px;
    }

    #about-container,
    #privacy-container,
    #contact-container {
        margin: 0 0 0 10px;
    }

    .content-container {
        margin: 10px 0 10px 20px;
    }
}


/* Content container mobile */
@media (max-width: 600px) {
    .content-container {
        padding: 15px;
        margin: 10px 0 10px 10px;
    }

    .content-container h2 {
        font-size: 1.5em;
    }

    .content-container h3 {
        font-size: 1.2em;
    }

    .content-container p,
    .content-container ol {
        font-size: 0.9em;
    }
}

/* Small screens */
@media (max-width: 500px) {
    .container,
    #about-container,
    #privacy-container,
    #contact-container {
        min-height: calc(100vh - 249.2px);
    }

    .container {
        display: block;
        margin: 0;
    }
}

/* Footer links grid */
@media (max-width: 486px) {
    .footer-links {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        white-space: normal;
        height: auto !important;
        text-align: center;
    }

    .footer-links .footer-divider {
        display: none;
    }

    .footer-links a {
        margin: 5px 0 !important;
    }
}

@media (max-width: 420px) {
    .content-container {
        margin: 10px 0;
    }

    #about-container,
    #privacy-container,
    #contact-container {
        margin: 0;
    }

    .navbar-brand {
        margin-right: 5px;
    }

    .tab-button {
        padding: 10px 10px;
    }

    .page-header, .page-header-centered {
        margin: 35px 5px 25px 5px;
        min-width: 380px;
    }

    .city-table-container, #antipode-usa-intro {
        min-width: 380px;
    }

    #us-answer {
        min-width: 350px;
    }
}

/* Extra small screens */
@media (max-width: 390px) {
    #search-input {
        width: 90%;
        min-width: 100px;
        margin: 5% 0;
    }

    #map,
    #us-antipodes-map {
        max-width: 387px;
    }

    .container {
        width: 99%;
    }

}