/* ==========================================================================
   Course dates & prices table

   The table used to read as a flat price list: every row identical, the
   call to action the same weight as the body text, and nothing marking the
   batch a visitor could actually still join. This sheet gives the panel a
   clear reading order (alert, course, columns, rows), pulls the nearest
   batch forward, and turns the two facts the page already holds, seats left
   and the saving against the old price, into visible signals.

   Kept in its own file because theme.css and site-ui.css are replaced by an
   external sync. Loaded last, so these win on equal specificity.
   ========================================================================== */

/* ---------- Local tokens ---------- */
:root {
    --dates-header: #6f6053;
    --dates-header-sub: #7d6d5f;
    --dates-tint: #fdf7ee;      /* nearest batch row */
    --dates-stripe: #fcfaf7;    /* alternate row */
    --dates-hover: #f7f1e8;
    --dates-alert-bg: #fdf4e6;
    --dates-alert-line: #eeddbe;
    --dates-alert-ink: #8a6428;
    --dates-scarce: #c0533f;
}

/* ---------- The alert above the panel ---------- */
/* A centred pill rather than a full width bar: the notice sits in its own
   grid column, one level up from the table, so a joined bar would depend on
   two sibling wrappers staying flush. */
body#bg .seats-notice,
.seats-notice {
    align-items: center;
    background: var(--dates-alert-bg);
    border: 1px solid var(--dates-alert-line);
    border-radius: 999px;
    color: var(--dates-alert-ink);
    display: flex;
    font-size: 15px;
    font-weight: 600;
    gap: 10px;
    line-height: 1.45;
    margin: 0 auto 14px;
    max-width: 100%;
    padding: 10px 20px;
    text-align: left;
    width: fit-content;
}

body#bg .seats-notice .pulse-dot,
.seats-notice .pulse-dot {
    background: var(--dates-scarce);
    box-shadow: 0 0 0 4px rgba(192, 83, 63, 0.16);
}

/* ---------- Page title (the h1 lifted into its own full width row) ---------- */
/* Centring is handled by the site's own rules: the wrapper carries `text-center`,
   which site-ui.css already keys on to give the decorative ornament
   `margin-inline: auto`. Nothing to override here, so no rule is defined for it. */

/* ---------- Full width course heading ---------- */
/* Sits outside the table on purpose: the stacked mobile view sets
   thead { display: none }, so a heading row inside the table would vanish
   on phones. */
/* The colour needs this much weight: site-ui.css sets
   `body#bg .section-full h3 { color: var(--site-ink) !important }`, which would
   otherwise paint dark text on the brown bar. */
body#bg .section-full .sya-course-title,
body#bg .content-area .sya-course-title,
body#bg .sya-course-title,
.sya-course-title {
    background: var(--dates-header);
    border-radius: 12px 12px 0 0;
    color: #fff !important;
    font-size: clamp(16px, 2.1vw, 20px);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.3;
    margin: 0;
    padding: 16px 18px;
    text-align: center;
}

/* the table tucks up under the heading */
body#bg .sya-course-title + .table-scroll > table,
body#bg .sya-course-title + table,
.sya-course-title + .table-scroll > table,
.sya-course-title + table {
    margin-top: 0;
}

/* ---------- One continuous header ---------- */
/* The title bar and the column header row were two slightly different browns
   (#7b6d61 against #746355). Too close to read as a deliberate step, close
   enough to look like a banding mistake, so both use one tone. */
body#bg .sya-course-title,
.sya-course-title,
body#bg .sya-course-title + .table-scroll table thead th,
body#bg .sya-course-title + table thead th,
.sya-course-title + .table-scroll table thead th,
.sya-course-title + table thead th {
    background-color: var(--dates-header) !important;
}

/* the second header row carries the room types; smaller and spaced so the
   eye reads it as a sub level of the Price group above it */
body#bg .sya-course-title + .table-scroll thead tr + tr th,
.sya-course-title + .table-scroll thead tr + tr th {
    background-color: var(--dates-header-sub) !important;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.35;
    padding: 14px 12px 16px;
    text-transform: uppercase;
}

/* the saving, written once per column instead of once per row. The fill
   darkens rather than lightens the brown band on purpose: cream text over a
   white wash came to 3.22:1, below AA, while white over this darker pill is
   6.5:1. The outline is what keeps it reading as a badge. */
/* `display: block` with `width: fit-content`, NOT `display: table`. These
   badges sit inside the table, and border-collapse is an inherited property,
   so a display:table box inherits `collapse` and CSS then ignores its padding
   outright. The pill rendered flush against its own text. */
body#bg .save-tag,
.save-tag {
    background: rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    color: #fff;
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.4;
    margin: 10px auto 0;
    padding: 5px 15px;
    text-transform: none;
    white-space: nowrap;
    width: fit-content;
}

/* ---------- Every content table is the same panel ---------- */
/* The room comparison table sat directly under the dates table on six pages
   in a slightly different brown (#746355 against #6f6053), with no shadow, a
   different corner radius and tighter cells. Two tone browns a screen apart
   read as a mistake rather than a choice, so the panel is defined once here
   and both inherit it. */
body#bg .table-scroll,
.table-scroll {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 14px 32px rgba(63, 56, 50, 0.1);
}

body#bg .table-scroll > table thead th,
.table-scroll > table thead th {
    background-color: var(--dates-header) !important;
}

/* Close the block off underneath so it reads as one panel. No side border: a
   pale hairline against the brown header showed as a tick at each top corner,
   and it inset the table by half a pixel so the header row no longer lined up
   with the title bar above it. The rounding clips the bottom corners because
   the wrapper already has overflow-x for narrow screens. */
body#bg .sya-course-title + .table-scroll,
.sya-course-title + .table-scroll {
    border: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 14px 32px rgba(63, 56, 50, 0.1);
}

/* the price a column is actually about, lifted out of the room name it was
   running on from. Same badge as the saving on the dates table. */
body#bg .th-price,
.th-price {
    background: rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    color: #fff;
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin: 10px auto 0;
    padding: 5px 15px;
    text-transform: none;
    white-space: nowrap;
    width: fit-content;
}

/* the Panchakarma programme cards list their prices as ordinary bullets, so
   the amount carried no more weight than the room type beside it */
body#bg .price-amount,
.price-amount {
    color: var(--course-ink, #3f3832);
    font-weight: 700;
}

/* the table fills the panel exactly; its own radius cannot render anyway with
   border-collapse, and leaving it set produced corner artefacts */
body#bg .sya-course-title + .table-scroll > table,
.sya-course-title + .table-scroll > table {
    border-radius: 0;
    width: 100%;
}

/* ---------- Rows ---------- */
/* Painted on the cells, not the row: site-ui.css fills every cell white from
   an id qualified selector, which would cover a background set on the tr.
   The !important answers astro-ytt-page.css, which paints
   `.ay-dates-section td` white with !important of its own. */
body#bg .table-scroll tbody tr:nth-child(even) > td,
.table-scroll tbody tr:nth-child(even) > td {
    background-color: var(--dates-stripe) !important;
}

body#bg .table-scroll tbody tr:hover > td,
.table-scroll tbody tr:hover > td {
    background-color: var(--dates-hover) !important;
}

/* the batch a visitor can still join: warm tint, gold edge, and it stays
   distinct from the hover state */
body#bg .sya-course-title + .table-scroll tbody tr.next-batch > td,
body#bg .sya-course-title + .table-scroll tbody tr.next-batch:hover > td,
.sya-course-title + .table-scroll tbody tr.next-batch > td,
.sya-course-title + .table-scroll tbody tr.next-batch:hover > td {
    background-color: var(--dates-tint) !important;
}

body#bg .sya-course-title + .table-scroll tbody tr.next-batch > td:first-child,
.sya-course-title + .table-scroll tbody tr.next-batch > td:first-child {
    box-shadow: inset 4px 0 0 var(--course-gold, #c79c66);
}

/* The class in the selector is doing real work: site-ui.css sets
   `body#bg .section-full table td { padding: 14px 12px }`, and a selector
   with no class of its own loses to it however many element names it lists. */
body#bg .table-scroll tbody tr > td,
.table-scroll tbody tr > td {
    padding: 18px 12px;
}

/* the tagged row carries three stacked items, so it needs the extra air at
   the top or the tag sits right on the header edge */
body#bg .sya-course-title + .table-scroll tbody tr.next-batch > td,
.sya-course-title + .table-scroll tbody tr.next-batch > td {
    padding-bottom: 20px;
    padding-top: 22px;
}

/* ---------- Dates cell ---------- */
/* same padding trap as .save-tag above: block plus fit-content, never table.
   Dark ink rather than white: white on this gold is 2.51:1, well under AA,
   while near black gives 5.21:1. It also separates the marker from the
   action, since the button is the deeper amber. */
body#bg .batch-tag,
.batch-tag {
    background: var(--course-gold, #c79c66);
    border-radius: 999px;
    color: #35302a;
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.5;
    margin: 0 auto 11px;
    padding: 5px 14px;
    text-transform: uppercase;
    white-space: nowrap;
    width: fit-content;
}

body#bg td[data-label="Dates"] .price,
td[data-label="Dates"] .price {
    display: block;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.35;
}

/* ---------- Seats badge ---------- */
/* Was a gold pill on every row, so a batch with two seats read exactly like
   one with ten. Neutral by default; scarce batches carry the warning colour. */
body#bg td[data-label="Dates"] .seats-left,
body#bg .seats-left,
td[data-label="Dates"] .seats-left {
    background: #f2ebe1 !important;
    border: 1px solid rgba(123, 109, 97, 0.24);
    border-radius: 999px;
    color: #6a5d52 !important;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    margin-top: 9px;
    padding: 4px 14px;
}

body#bg td[data-label="Dates"] .seats-left.low,
body#bg .seats-left.low,
td[data-label="Dates"] .seats-left.low {
    background: var(--dates-scarce) !important;
    border-color: var(--dates-scarce);
    box-shadow: 0 2px 8px rgba(192, 83, 63, 0.28);
    color: #fff !important;
}

/* ---------- Prices ---------- */
body#bg table td .price,
table td .price {
    font-size: 15.5px;
}

/* #a2988f on white is 2.83:1, below the 4.5:1 AA floor for text this size.
   #6a5d52 is the tone already used on the seats pill and gives 6.36:1 on
   white and 6.14:1 on the striped row. */
body#bg table td .strikethrough,
table td .strikethrough {
    color: #6a5d52;
    font-size: 12.5px;
    margin-left: 4px;
}

/* The line through the old price is decoration, so assistive software reads
   the cell as "$1099 $1550" with nothing saying which one is payable. The
   markup carries a hidden "Was" ahead of it; this is the class that hides it,
   defined here because no stylesheet on the site ever declared it even though
   the markup already used it in the inclusions tables. */
.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* the saving repeated per row on phones, where the column header that
   normally carries it is hidden by the stacked card layout */
body#bg .save-inline,
.save-inline {
    display: none;
}

/* ---------- Enroll button ---------- */
/* Brand brown made the action the same weight as the header bar above it, so
   the action needs to be the most saturated thing in the panel. Not the
   site's #c79c66 gold though: white on that is 2.51:1, far below AA. This
   deeper amber is the same tone as the alert text above the table and gives
   5.34:1 with white, so it still reads as the warm accent and stays legible. */
/* site-ui.css sets background-color AND a background-image gradient on these,
   both with !important, so both longhands have to be answered directly. A
   `background` shorthand here loses to the more specific longhand. */
body#bg table td .enroll-btn,
table td .enroll-btn {
    align-items: center;
    background-color: #8a6428 !important;
    background-image: none !important;
    border-color: #8a6428 !important;
    box-shadow: 0 3px 10px rgba(138, 100, 40, 0.3) !important;
    display: flex;
    font-size: 15px;
    font-weight: 600;
    justify-content: center;
    letter-spacing: 0.01em;
    min-height: 48px;
    padding: 12px 18px !important;
    text-align: center;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
    width: 100%;
}

body#bg table td .enroll-btn:hover,
body#bg table td .enroll-btn:focus-visible,
table td .enroll-btn:hover,
table td .enroll-btn:focus-visible {
    background-color: var(--course-earth-dark, #62564d) !important;
    background-image: none !important;
    border-color: var(--course-earth-dark, #62564d) !important;
    box-shadow: 0 8px 20px rgba(63, 56, 50, 0.28) !important;
    transform: translateY(-1px);
}

/* the pressed state existed nowhere on the primary action, so a tap gave no
   feedback at all. Declared after hover so it also wins on source order. */
body#bg table td .enroll-btn:active,
table td .enroll-btn:active {
    box-shadow: inset 0 2px 5px rgba(45, 39, 34, 0.3) !important;
    transform: translateY(0);
}

/* give the button column room to breathe */
body#bg table td:last-child,
table td:last-child {
    min-width: 158px;
}

@media (prefers-reduced-motion: reduce) {
    body#bg table td .enroll-btn,
    table td .enroll-btn {
        transition: none;
    }

    body#bg table td .enroll-btn:hover,
    table td .enroll-btn:hover {
        transform: none;
    }
}

@media (max-width: 767px) {
    body#bg .seats-notice,
    .seats-notice {
        border-radius: 14px;
        font-size: 14px;
        padding: 11px 16px;
        text-align: left;
        width: auto;
    }

    body#bg .sya-course-title,
    .sya-course-title {
        border-radius: 12px;
        font-size: 16px;
        margin-bottom: 14px;
        padding: 13px 14px;
    }

    /* the panel shadow belongs to the cards on this breakpoint, not the wrapper */
    body#bg .table-scroll,
    .table-scroll {
        box-shadow: none;
    }

    /* Overflow has to open up or the wrapper's overflow-x from site-ui.css
       slices every card shadow off flat at both edges. Only for tables that
       actually stack: one without data-label cells stays a real table with a
       min-width, and still needs to scroll sideways. */
    body#bg .table-scroll:has(td[data-label]),
    .table-scroll:has(td[data-label]) {
        overflow: visible;
    }

    /* same specificity note as the desktop rule above */
    body#bg .table-scroll tbody tr > td,
    body#bg .table-scroll tbody tr.next-batch > td,
    .table-scroll tbody tr > td,
    .table-scroll tbody tr.next-batch > td {
        padding: 12px 16px;
    }

    /* the stacked card for the nearest batch gets the same gold edge */
    body#bg table tbody tr.next-batch,
    table tbody tr.next-batch {
        border-color: var(--course-gold, #c79c66);
        box-shadow: 0 8px 20px rgba(199, 156, 102, 0.24);
    }

    /* The card already carries a gold border here, so the 4px inset bar from
       the desktop rule would stack on top of it and read as a lumpy 5px edge.
       Selector weight has to match that rule exactly to switch it off: a
       shorter one loses however late it is declared. */
    body#bg .sya-course-title + .table-scroll tbody tr.next-batch > td:first-child,
    .sya-course-title + .table-scroll tbody tr.next-batch > td:first-child {
        background: var(--dates-tint) !important;
        box-shadow: none;
    }

    body#bg .batch-tag,
    .batch-tag {
        margin-left: 0;
    }

    /* the saving moves into the price cell, since the header that carries it
       on desktop is hidden once the table stacks */
    body#bg .save-inline,
    .save-inline {
        color: #7a5a25;
        display: block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
        margin-top: 3px;
    }

    /* The Astro page lays its stacked dates cell out as a two column grid,
       label on the left spanning the rows, values on the right. Without an
       explicit placement the tag auto flows into the label column underneath
       everything else, so each item is positioned by hand here.

       Only the tagged row gets the three row form. Applying it to all nine
       cells left the eight untagged ones with an empty first row that still
       paid for its row gaps, so their date sat 6px below the DATES label it
       should line up with. The two row form is restated rather than left to
       theme.css, which the external sync can replace. */
    body#bg.astro-ytt-page .ay-dates-panel tr.next-batch td[data-label="Dates"]::before {
        grid-row: 1 / span 3;
    }

    body#bg.astro-ytt-page .ay-dates-panel tr:not(.next-batch) td[data-label="Dates"]::before {
        grid-row: 1 / span 2;
    }

    body#bg.astro-ytt-page .ay-dates-panel td[data-label="Dates"] .batch-tag {
        grid-column: 2;
        grid-row: 1;
        margin: 0 0 3px auto;
    }

    body#bg.astro-ytt-page .ay-dates-panel tr.next-batch td[data-label="Dates"] .price {
        grid-column: 2;
        grid-row: 2;
    }

    body#bg.astro-ytt-page .ay-dates-panel tr.next-batch td[data-label="Dates"] .seats-left {
        grid-column: 2;
        grid-row: 3;
        margin-left: auto;
    }

    body#bg.astro-ytt-page .ay-dates-panel tr:not(.next-batch) td[data-label="Dates"] .price {
        grid-column: 2;
        grid-row: 1;
    }

    body#bg.astro-ytt-page .ay-dates-panel tr:not(.next-batch) td[data-label="Dates"] .seats-left {
        grid-column: 2;
        grid-row: 2;
        margin-left: auto;
    }

    body#bg td[data-label="Dates"] .price,
    td[data-label="Dates"] .price {
        font-size: 17px;
    }

    /* stacked cards: the button spans the card and stays easy to hit */
    body#bg table td .enroll-btn,
    table td .enroll-btn {
        min-height: 50px;
        width: 100%;
    }

    body#bg table td:last-child,
    table td:last-child {
        min-width: 0;
    }
}