/*
Theme Name: Togo Child
Template: togo
Version: 1.0.5
*/

/* =====================================================================
 * PRESENTATION BLOCKS — [la_trip_schedules] / [la_ticket_options]
 * Container hardening at ALL widths.
 * ================================================================== */

.la-custom-schedules,
.la-custom-ticket-options {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.la-custom-schedules div[style*="overflow-x"],
.la-custom-ticket-options div[style*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
}

/* =====================================================================
 * PRESENTATION BLOCKS — GRADIENT TABLE HEADERS
 * Restores the TourMaster-era gradient header treatment using the
 * brand palette. Applied via CSS so every schedules/ticket table on
 * every tour inherits it without HTML changes.
 * (Not visible on mobile — thead is hidden in the media query below.)
 * ================================================================== */

.la-custom-schedules thead tr {
    background: transparent !important;
}

.la-custom-schedules thead th,
.la-custom-ticket-options thead th {
    background-color: #2a75d3 !important;
    background-image: linear-gradient(135deg, #2a75d3 0%, #1a4a8f 100%) !important;
    color: #ffffff !important;
    border-bottom: none !important;
}

/* =====================================================================
 * MOBILE STACKING — below 600px only.
 * Desktop appearance is completely untouched.
 * ================================================================== */
@media (max-width: 600px) {

    /* Tables fill their card, never wider */
    .la-custom-schedules table,
    .la-custom-ticket-options table {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Header row hidden — stacked rows are self-explanatory */
    .la-custom-schedules thead,
    .la-custom-ticket-options thead {
        display: none;
    }

    /* KILL THE THEME'S INVISIBLE FLEX PSEUDO-ELEMENT ON OUR CELLS ONLY */
    .la-custom-schedules td::before,
    .la-custom-schedules td::after,
    .la-custom-ticket-options td::before,
    .la-custom-ticket-options td::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Togo's mobile table CSS paints <td> white — force transparency
       so the navy schedules card shows through behind white/gold text */
    .la-custom-schedules table,
    .la-custom-schedules tbody tr,
    .la-custom-schedules tbody td {
        background: transparent !important;
    }

    /* Each row becomes a vertical stack */
    .la-custom-schedules tbody tr,
    .la-custom-ticket-options tbody tr {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 3px;
        padding: 10px 0;
    }

    /* Each cell: flex item laid out from the left */
    .la-custom-schedules tbody td,
    .la-custom-ticket-options tbody td {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        text-align: left !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        border-bottom: none !important;
    }

    /* First cell in each row reads as the row title */
    .la-custom-schedules tbody td:first-child,
    .la-custom-ticket-options tbody td:first-child {
        font-weight: 700 !important;
    }

    /* Clean separators between stacked rows */
    .la-custom-schedules tbody tr {
        border-bottom: 1px solid #2a2a44;
    }

    .la-custom-ticket-options tbody tr {
        border-bottom: 1px solid #eef2f7;
    }

    /* Accordions: tighter padding, wrapping titles */
    .la-custom-ticket-options details {
        padding: 14px 16px;
    }

    .la-custom-ticket-options summary {
        font-size: 1em;
        gap: 8px;
        flex-wrap: wrap;
    }
}