/* ==========================================================================
   TV.html rate-board theme
   Black & gold / white & black-bordered look, based on the reference design.
   Scoped to the rate table on TV.html only (does not affect other pages
   since LiveRates3.js itself is left untouched).

   Sizing is fluid (clamp/vw based) so the board reads well from a phone
   in hand up to a large TV/monitor viewed from across a room, plus a few
   fixed breakpoints to widen the board itself on very large screens.
   ========================================================================== */

.tv-board-container {
    width: 100%;
}

/* ---- Logo header bar: theme.css gives #header .header-container a fixed
        104px min-height regardless of logo size - shrink it to match the
        smaller logos below, on every breakpoint. ---- */
#header .header-container {
    min-height: 52px;
}

#header .header-row.py-2 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* ---- Desktop/TV: the shrink above is a bit too tight on large screens -
        bump the header bar and logos back up somewhat (not all the way to
        the original 95px/60px/104px). ---- */
@media (min-width: 992px) {
    #header .header-container {
        min-height: 76px;
    }

    #header .header-row.py-2 {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .tv-header-logo1 {
        height: 68px !important;
    }

    .tv-header-logo2 {
        height: 42px !important;
    }
}

.tv-rate-board {
    --tv-table-price-size: clamp(13px, 1.65vw, 30px);
    --tv-table-caption-size: clamp(9px, 0.9vw, 15px);
    width: 100%;
    font-family: 'Merriweather', serif;
    box-sizing: border-box;
}

/* One shared five-box market strip, followed by simultaneous Gold and Silver
   product boards. */
.tv-common-rates {
    width: 100%;
    margin: 5px 0 clamp(8px, 1vw, 16px);
}

.tv-rates-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(8px, 1.25vw, 24px);
}

.tv-metal-column {
    min-width: 0;
}

.tv-metal-heading {
    margin: 0;
    padding: clamp(5px, 0.45vw, 9px) 12px;
    background: #000;
    color: #b99141;
    font-family: 'Merriweather', serif;
    font-size: clamp(13px, 1.35vw, 22px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}

/* ---- 5-box header row: Gold Comex / Silver Comex / INR / Gold Future / Silver Future ---- */
.tv-headrow-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.tv-headrow-table td.tv-head-cell {
    border: clamp(2px, 0.2vw, 4px) solid #000;
    background: #fff;
    text-align: center;
    vertical-align: middle;
    padding: 0 !important;
}

.tv-head-content {
    display: grid;
    grid-template-rows: 2.5em auto;
    align-content: center;
    row-gap: clamp(2px, 0.3vw, 8px);
    box-sizing: border-box;
    width: 100%;
    padding: 5px clamp(2px, 0.3vw, 8px);
}

.tv-head-name {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #000;
    font-size: clamp(8px, 1.1vw, 16px);
    line-height: 1.25;
    text-transform: uppercase;
}

.tv-head-value {
    font-weight: 700;
    font-size: clamp(13px, 2.3vw, 36px);
    line-height: 1.15;
}

/* Product boards fill their respective left/right columns. */
.tv-products-board {
    width: 100%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

/* ---- Column caption bar (PRODUCT / BUY / SELL) ---- */
.tv-cols-bar-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: clamp(6px, 0.1vw, 16px);
}

.tv-cols-bar {
    background: #000;
    color: #b99141;
    font-weight: 700;
    font-size: var(--tv-table-caption-size);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: clamp(2px, 0.3vw, 6px) clamp(2px, 0.4vw, 7px);
    text-align: center;
    vertical-align: middle;
}

/* ---- Product rows ---- */
.tv-rows-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.tv-rows-table tr {
    cursor: default;
}

.tv-rows-table td {
    border: clamp(2px, 0.2vw, 4px) solid #000;
    border-top: none;
    background: #fff;
    vertical-align: middle;
}

.tv-row-name {
    width: 50%;
    padding: clamp(4px, 0.5vw, 12px) clamp(5px, 0.7vw, 14px);
    text-align: left;
    font-weight: 700;
    font-size: 13px;
    color: #000;
    text-transform: uppercase;
    vertical-align: middle;
}

.tv-row-buy,
.tv-row-sell {
    width: 25%;
    padding: clamp(4px, 0.5vw, 12px) clamp(2px, 0.3vw, 6px);
    text-align: center;
    vertical-align: middle;
}

.tv-row-price {
    display: block;
    font-size: var(--tv-table-price-size);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

/* ---- Up / down / flat states ---- */
.tv-up {
    color: #0a8a3c;
}

.tv-down {
    color: #c0102a;
}

.tv-flat {
    color: #000;
}

/* ---- Small phones: stack the 5 header boxes so nothing gets squeezed ---- */
@media screen and (max-width: 480px) {
    .tv-headrow-table,
    .tv-headrow-table tbody,
    .tv-headrow-table tr {
        display: block;
        width: 100%;
    }

    .tv-headrow-table td.tv-head-cell {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Preserve readable product names and prices on phones. */
@media screen and (max-width: 767px) {
    .tv-rates-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Tablet, desktop, laptop and TV alike: let the board run edge-to-edge
        instead of staying capped at Bootstrap's ~66% column / ~1140px
        container. Gated at 768px (the point where col-md-8 kicks in and
        would otherwise shrink it) rather than a large-TV-only breakpoint,
        so it stays full width at ordinary desktop/laptop viewport sizes too. ---- */
@media screen and (min-width: 768px) {
    .tv-board-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    .tv-rate-board {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ---- Secondary nav bar (Home / Live Rates / Television View / ...) on the
        maroon strip: cut its height roughly in half on every breakpoint by
        shrinking the paddings/sizes that actually drive its height, instead
        of a single media query (the #navhead id gives enough specificity to
        beat the theme's per-breakpoint rules without duplicating them). ---- */
#navhead .header-nav-main nav > ul > li > a {
    padding: 5px 8px !important;
    line-height: 1.1 !important;
}

#navhead .btn-5 {
    padding: 7px 20px !important;
}

#navhead .header-btn-collapse-nav {
    width: 18px !important;
    height: 18px !important;
    margin: 7px 0 !important;
}

/* ---- Mobile/tablet: nav is collapsed behind the hamburger, so the
        button's own size/margin is what drives the maroon bar's height
        here - shrink it further than the shared rule above. ---- */
@media (max-width: 991px) {
    #navhead .header-btn-collapse-nav {
        width: 14px !important;
        height: 14px !important;
        margin: 4px 0 4px 2rem !important;
    }
}