/* Phone and tablet layout.
 * Desktop (1000px and wider) is unchanged: apart from hiding the menu button,
 * every rule here sits inside a max-width media query.
 *   <= 999px  fluid content instead of the fixed 960px column
 *   <= 760px  phone: hamburger menu, stacked layout (matches hero-banner.php)
 */

.mobile-menu-toggle { display: none; }

/* ===== Tablet and below ===================================================== */
@media (max-width: 999px) {
    #columns,
    #container {
        width: auto;
        padding-left: 16px;
        padding-right: 16px;
    }
    #centercol { /* 623px fixed (404 page) */
        width: auto;
        float: none;
    }

    /* Embedded players are 960x540; keep them 16:9 at any width. Also covers
       the iframes footer.php injects into #vplayer. */
    iframe { max-width: 100%; }
    iframe[height="540"] {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    /* Wide DataTables (sermons, archives) scroll sideways inside their box. */
    .dataTables_wrapper { overflow-x: auto; }

    /* Several bands have inline padding on top of width:100%. */
    .content-spanner { box-sizing: border-box; }

    /* Photo and video galleries are layout tables: flow every cell into one
       wrapping grid (rows become display:contents, so no 2+1 gaps). */
    #columns table[border="1"] {
        display: block;
        width: 100% !important;
        border-spacing: 0;
    }
    #columns table[border="1"] > tbody {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
    #columns table[border="1"] > tbody > tr { display: contents; }
    #columns table[border="1"] > tbody > tr > td {
        display: block;
        border: 0;
        padding: 0;
    }
    .menu { float: none; }

    /* About page leadership tables keep their rows so names stay under the
       photos; fixed layout lets the 220px photos shrink to the column. */
    #columns table[border="0"][cellspacing="5"] {
        width: 100% !important;
        table-layout: fixed;
    }
    #columns table[border="0"][cellspacing="5"] td {
        font-size: 13px;
        line-height: 1.3;
        overflow-wrap: anywhere; /* "Deacon/Secretary" in a narrow column */
    }

    /* style.css has a max-width:48em countdown block that was dead code until
       the viewport tag existed; it shrinks the digits but not the colons.
       The desktop countdown is 355px wide and fits a phone, so keep it. */
    #main-countdown { width: 355px; max-width: 100%; }
    #main-countdown .countdown-container { height: 130px; }
    #main-countdown .time { height: 75px; width: 20%; }
    #main-countdown .count { font-size: 10em; line-height: 8rem; }
    #main-countdown .label { font-size: inherit; top: auto; }

    /* Footer: 2 x 2 instead of four squeezed columns. */
    #footer { width: auto; padding: 0 24px; }
    #footer .fcols { flex-wrap: wrap; }
    #footer .fcol1,
    #footer .fcol2,
    #footer .fcol3,
    #footer .fcol4 {
        box-sizing: border-box;
        width: 50%;
        padding: 20px 12px 8px 0;
    }
}

/* ===== Phone ================================================================ */
@media (max-width: 760px) {
    /* --- Header: smaller logo, live badge, hamburger --- */
    .header-content {
        height: 72px;
        padding: 0 8px 0 12px;
    }
    .logo {
        width: auto;
        padding: 0;
    }
    .logo img {
        width: 180px;
        height: auto;
        margin-top: 0 !important; /* overrides inline -32px */
    }
    /* "WATCH LIVE" badge (only rendered while a service is live): a red pill
       with a pulsing white dot instead of red text + red gif on blue. */
    .live-indicator { margin-left: auto; }
    .live-indicator a {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 7px 11px 7px 9px;
        border-radius: 999px;
        background: #dc2626;
        color: #fff !important; /* inline color:red */
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 0.04em;
        line-height: 1;
        white-space: nowrap;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        text-decoration: none;
    }
    .live-indicator a > div {
        float: none !important;
        padding: 0 !important;
    }
    .live-indicator a > div:last-child { display: none; } /* the red gif */
    .live-indicator a > div:first-child::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 6px;
        border-radius: 50%;
        background: #fff;
        vertical-align: 1px;
        animation: ec-live-pulse 1.4s ease-in-out infinite;
    }

    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 10px;
        margin: 0 0 0 4px;
        background: none;
        border: 0;
        cursor: pointer;
    }
    .mobile-menu-toggle span {
        display: block;
        width: 100%;
        margin: 0; /* the global "* { margin: 0 auto }" would collapse the bars */
        height: 3px;
        border-radius: 2px;
        background: #fff;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .mobile-menu-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* --- Nav: drop-down panel under the header, submenus always open --- */
    #nav1 {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        background: linear-gradient(135deg, rgba(30, 64, 175, 1) 0%, rgba(30, 58, 138, 1) 100%);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
        z-index: 1000;
    }
    #nav1.is-open { display: block; }
    #nav1 ul.menusm {
        flex-direction: column;
        gap: 0;
        float: none;
        height: auto;
        padding: 6px 12px 12px;
    }
    #nav1 ul li {
        margin: 0;
        float: none;
    }
    #nav1 ul li a {
        padding: 12px;
        font-size: 16px;
        text-align: left;
    }
    #nav1 ul li ul.sub_menu {
        display: block !important; /* menusm.js sets inline display on hover */
        position: static;
        background: none;
        padding: 0 0 4px 16px;
    }
    #nav1 ul li ul.sub_menu li a {
        padding: 10px 12px;
        font-size: 15px;
    }

    /* --- Content rows that sit side by side on desktop stack instead --- */
    .content-spanner {
        flex-direction: column;
        align-items: stretch;
    }
    #columns { padding-left: 12px; padding-right: 12px; }
    .content-spanner > #columns { padding-top: 16px; }
    .index-hero h2 { padding-left: 0 !important; text-align: center; }
    /* Ministries/giving labels are sized 2vw inline: ~7px on a phone. */
    blockquotegiving h6 {
        font-size: 18px !important;
        line-height: 32px !important;
        padding-right: 0 !important;
    }

    /* --- Next-service countdown (home, live pages) --- */
    .index-timer {
        width: 100%;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .index-timer1 h1 {
        font-size: 3rem;
        line-height: 1;
        margin-bottom: 8px;
    }
    .index-timer2 { width: 100%; }
    #upcoming { padding: 0 !important; }
    #upcoming > div {
        width: 100% !important;
        float: none !important;
        text-align: center;
        margin-bottom: 8px;
    }

    /* --- Sermon/archive tables: tighter cells so the play column fits --- */
    .dataTables_length,
    .dataTables_filter {
        float: none !important;
        text-align: left !important;
        margin-bottom: 6px;
    }
    .dataTables_filter input { width: 170px; }
    table.dataTable { font-size: 12px; }
    table.dataTable thead th {
        font-size: 11px;
        padding: 8px 14px 8px 4px !important; /* room for the sort arrow */
    }
    table.dataTable thead th.sorting_disabled { padding-right: 4px !important; }
    table.dataTable tbody td { padding: 8px 4px !important; }

    /* --- Audio player bar is a fixed 420px; scale it to fit --- */
    div.jp-audio { zoom: 0.8; }

    /* --- Footer: times + location side by side, then giving, then links --- */
    #footer { padding: 4px 20px 0; }
    #footer .fcols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }
    #footer .fcol1,
    #footer .fcol2,
    #footer .fcol3,
    #footer .fcol4 {
        width: auto;
        float: none;
        padding: 18px 0 14px;
    }
    #footer .fcol3 { grid-column: 1 / -1; order: 3; }
    #footer .fcol4 { grid-column: 1 / -1; order: 4; }

    #footer .fcols h5 {
        font-size: 13px;
        font-weight: bold;
        letter-spacing: 0.08em;
        padding-bottom: 6px;
        margin-bottom: 10px;
        border-bottom-width: 1px;
    }
    #footer .fcols ul { margin: 0; }
    #footer .fcols li {
        list-style: none;
        margin: 0;
        padding: 3px 0;
        font-size: 14px;
        line-height: 1.4;
    }

    /* "Online Service: NOW LIVE" (live only) matches the header badge. */
    #footer .fcol1 a[href="live"][style*="red"] {
        display: inline-block;
        margin-bottom: 6px;
        padding: 6px 10px;
        border-radius: 999px;
        background: #dc2626;
        color: #fff !important;
        font-size: 12px;
        font-weight: bold;
        line-height: 1.2;
    }

    /* Location: address, then the two social icons in a row */
    #footer .fcol2 .fnews {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 12px;
    }
    #footer .fcol2 > br { display: none; }
    #footer .fcol2 p { font-size: 0; } /* drops the &nbsp; indent */
    #footer .fcol2 p a {
        display: inline-block;
        margin-right: 12px;
    }
    #footer .fcol2 img { width: 40px; height: 40px; }

    /* Giving: the two buttons as an equal pair */
    #footer .fcol3 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 12px;
    }
    #footer .fcol3 h5 { grid-column: 1 / -1; }
    #footer .fcol3 p {
        display: flex;
        margin: 0 !important;
        padding: 0;
    }
    #footer .fcol3 .myButton { /* equal-height pair even if one label wraps */
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 8px 10px;
        font-size: 13px;
        line-height: 1.3;
        text-align: center;
    }
    #footer .fcol3 .myButton:hover { transform: none; }

    /* Resources: full-width tap rows instead of bullets */
    #footer .fcol4 li { padding: 0; }
    #footer .fcol4 li a {
        display: block;
        padding: 11px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    #footer .fcol4 li:last-child a { border-bottom: 0; }

    #footer .text1 {
        float: none;
        padding: 16px 0 24px;
        font-size: 12px;
        line-height: 1.6;
        text-align: center;
    }
}

@media (max-width: 380px) {
    div.jp-audio { zoom: 0.7; }
    #main-countdown { zoom: 0.85; }
    .logo img { width: 150px; } /* leaves room for the live badge */
}

@media (max-width: 340px) {
    .logo img { width: 124px; }
    .live-indicator { padding-left: 6px; }
    .live-indicator a {
        padding: 6px 8px 6px 7px;
        font-size: 11px;
    }
}

@keyframes ec-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
    .live-indicator a > div:first-child::before { animation: none; }
}