/* ============================================================
   MereTrax Responsive CSS
   Added page-by-page as each page is made mobile-friendly.
   Desktop layout (>1060px) is completely unchanged.
   ============================================================ */

/* ============================================================
   0. GLOBAL UTILITIES
   ============================================================ */

/* Read-only coordinate / value display (used in place of editable text inputs) */
.coord-display {
    display: inline-block;
    background: #edf4f8;
    border: 1px dashed #7799aa;
    border-radius: 4px;
    padding: 5px 10px;
    font-family: monospace;
    font-size: 14px;
    color: #333;
    margin: 4px 0 10px 0;
    min-width: 160px;
}

/* ============================================================
   1. CONTAINER WRAPPERS — fluid on tablet & phone
   ============================================================ */
@media (max-width: 1060px) {
    .border2 {
        width: auto;
        margin: 4px;
        box-sizing: border-box;
    }
    .border1 {
        width: auto;
        box-sizing: border-box;
    }
    #container {
        width: auto;
        padding: 12px;
        box-sizing: border-box;
    }
}

/* ============================================================
   2. HEADER — logo, photo strip, nav buttons
   ============================================================ */

/* All images scale down smoothly */
img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    /* Scale down the meerkat logo image */
    div[align="left"] > table img[alt="MereTrax Home"] {
        width: 75px;
        height: auto;
    }

    /* Hide the decorative travel photo strip row */
    div[align="left"] > table > tbody > tr:nth-child(2) > td,
    div[align="left"] > table > tr:nth-child(2) > td {
        display: none;
    }

    /* Shrink the title text */
    div[align="left"] h1 { font-size: 20px; margin: 0; }
    div[align="left"] h2 { font-size: 13px; margin: 0; }
}

/* Nav buttons: full-width stack on phones */
@media (max-width: 640px) {
    #nav-table,
    #nav-table tbody,
    #nav-table tr,
    #nav-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    #nav-table td {
        padding: 3px 0;
    }
    /* Hide empty table cells (placeholder tds in short rows) */
    #nav-table td:empty {
        display: none;
    }
    #nav-table .button6 {
        width: 100%;
        font-size: 15px;
        padding: 12px 8px;
        box-sizing: border-box;
    }
}

/* ============================================================
   3. DATA TABLES — scrollable wrapper for PHP-generated tables
   ============================================================ */
@media (max-width: 900px) {
    .data-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    .data-table {
        width: 100%;
        min-width: 480px; /* prevents collapse; scrolls if needed */
    }
}

/* ============================================================
   4. FORM PAGES — voyage-form, shared field styles
   ============================================================ */
@media (max-width: 640px) {
    /* Center and pad the form area */
    .voyage-form {
        text-align: left;
        max-width: 100%;
        padding: 0 4px;
    }
    /* All text/password/url/select inputs: full-width, 16px font prevents iOS auto-zoom */
    .voyage-form input[type="text"],
    .voyage-form input[type="password"],
    .voyage-form input[type="url"],
    .voyage-form select {
        display: block;
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        padding: 9px 10px;
        margin: 6px 0 14px 0;
        border: 2px solid #996666;
        border-radius: 4px;
    }
    /* Date sub-fields — keep inline, just bigger */
    .voyage-form input[name="startmonth"],
    .voyage-form input[name="startday"],
    .voyage-form input[name="startyear"],
    .voyage-form input[name="endmonth"],
    .voyage-form input[name="endday"],
    .voyage-form input[name="endyear"],
    .voyage-form input[name="month"],
    .voyage-form input[name="day"],
    .voyage-form input[name="year"] {
        display: inline-block;
        width: auto;
        min-width: 48px;
        margin: 6px 4px 14px 4px;
    }
    /* Hint/example text (<font> tags) — drop to new block line so they don't force the row wide */
    .voyage-form font {
        display: block;
        font-size: 12px;
        color: #999;
        word-wrap: break-word;
        margin-bottom: 8px;
    }
    /* Submit button: full-width */
    .voyage-form input[type="submit"].button6 {
        width: 100%;
        font-size: 16px;
        padding: 13px;
        box-sizing: border-box;
    }
}

/* ============================================================
   4. HELP PAGE — section boxes, layout
   ============================================================ */
@media (max-width: 900px) {
    .help-hero,
    .quickstart-box,
    .help-section {
        padding: 14px 14px 16px 14px;
    }
    /* toc-box was display:inline-block — force full width on narrow screens */
    .toc-box {
        display: block;
        box-sizing: border-box;
    }
}

/* Voyages / Locations two-column split table — stack vertically on phones */
@media (max-width: 640px) {
    .voyages-locations-split,
    .voyages-locations-split tbody,
    .voyages-locations-split tr {
        display: block !important;
        width: 100% !important;
    }
    .voyages-locations-split .split-col {
        display: block !important;
        width: 100% !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        border-left: none !important;
    }
    /* Add a top border to the second column to replace the left border divider */
    .voyages-locations-split .split-col + .split-col {
        border-top: 2px dashed #cc9955;
        margin-top: 18px;
        padding-top: 18px;
    }
}

/* ============================================================
   4. HELP PAGE — screen mockups (scroll horizontally)
      The mockup HTML is complex — scrolling is cleaner than reflow
   ============================================================ */
@media (max-width: 700px) {
    .screen-mockup {
        max-width: 100%;
    }
    .mockup-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Keep mockup content at a readable minimum width so it scrolls rather than collapses */
    .mockup-table {
        min-width: 420px;
    }
}

/* ============================================================
   6. ADD LOCATION BY MAP — map wrapper + eventtext form fields
   ============================================================ */
@media (max-width: 640px) {
    /* Expand the 70% wrapper to nearly full-width on phones */
    .map-outer-wrap {
        width: 95% !important;
    }
    /* Form fields inside the eventtext panel */
    .eventtext input[type="text"],
    .eventtext select {
        display: block;
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        padding: 9px 10px;
        margin: 6px 0 10px 0;
        border: 2px solid #996666;
        border-radius: 4px;
    }
    .eventtext input[type="submit"].button6 {
        width: 100%;
        font-size: 16px;
        padding: 13px;
        box-sizing: border-box;
    }
}

/* ============================================================
   7. ADD LOCATION BY PHOTO — photo-upload-area form fields
   ============================================================ */
@media (max-width: 640px) {
    .photo-upload-area {
        max-width: 100%;
        padding: 0 4px;
    }
    .photo-upload-area input[type="text"],
    .photo-upload-area select {
        display: block;
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        padding: 9px 10px;
        border: 2px solid #996666;
        border-radius: 4px;
        margin-top: 4px;
    }
    .photo-upload-area input[type="submit"].button6 {
        width: 100%;
        font-size: 16px;
        padding: 13px;
        box-sizing: border-box;
    }
    /* Success screen boxes */
    .result-box,
    .error-box {
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Action links — stack vertically on phones */
    .action-links a {
        display: block;
        margin: 6px 0;
        text-align: center;
    }
}

/* ============================================================
   10. SHOWMAP — map+sidebar table on phones
   ============================================================ */
@media (max-width: 640px) {
    /* Make the table and map cell fluid */
    .map-sidebar-table,
    .map-sidebar-table tbody,
    .map-sidebar-table tr {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    /* Map cell: full width */
    .map-sidebar-table td:first-child {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    /* Sidebar cells: hide on phones — use Locations nav page instead */
    .map-sidebar-table td:not(:first-child) {
        display: none;
    }
}

/* ============================================================
   9. MAP PAGES — fluid map div height on phones
   ============================================================ */
@media (max-width: 640px) {
    #map {
        height: 65vw !important;
        min-height: 280px;
        max-height: 500px;
    }
}

/* ============================================================
   8. FORM LAYOUT TABLES — label | input table → stacked on phones
   ============================================================ */
@media (max-width: 640px) {
    .form-layout-table,
    .form-layout-table tbody,
    .form-layout-table tr,
    .form-layout-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
    }
    /* Label cells */
    .form-layout-table td:first-child {
        padding-bottom: 2px;
        padding-top: 10px;
    }
    /* Input cells */
    .form-layout-table td:last-child {
        padding-bottom: 4px;
    }
}

/* ============================================================
   11. JOURNEY LOG PAGES — public viewer + editor
   ============================================================ */
@media (max-width: 900px) {
    /* Section boxes: fluid width on tablets and phones */
    .journey-section,
    .jl-section {
        width: auto !important;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 640px) {
    /* Media gallery cards: full width on phones */
    .media-card {
        max-width: 100%;
        box-sizing: border-box;
    }
    .media-card img,
    .media-card video {
        max-width: 100%;
    }

    /* Editor map preview: fluid on phones */
    .jl-editor-map-wrap {
        width: 100% !important;
        height: 55vw !important;
        min-height: 240px;
        max-height: 360px;
    }

    /* Snapshot label input: full-width + stacked on phones */
    .jl-label-input {
        display: block;
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        margin-bottom: 8px;
    }

    /* Upload forms: stack file picker, caption, submit */
    .jl-upload-form input[type="text"] {
        display: block;
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        padding: 9px 10px;
        margin: 8px 0;
        border: 1px solid #aaa;
        border-radius: 4px;
    }
    .jl-upload-form input[type="submit"] {
        display: block;
        width: 100%;
        font-size: 15px;
        padding: 11px;
        box-sizing: border-box;
        margin-top: 4px;
    }

    /* Thumbnail media: scale to fit on phones */
    .jl-thumb img,
    .jl-thumb video {
        max-width: 100%;
    }
}

/* ============================================================
   5. HELP PAGE — data tables (scrollable on phones)
   ============================================================ */
@media (max-width: 640px) {
    /* Wrap tables in a scroll container via display:block */
    .ref-table,
    .adventure-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    /* Allow text within cells to still wrap */
    .ref-table td,
    .ref-table th,
    .adventure-table td,
    .adventure-table th {
        white-space: normal;
        min-width: 70px;
    }

    /* Sample map — shorter height on phones */
    #sample-map {
        height: 280px;
    }
}