/* holiday.css — the /holiday/<slug>-<year>/ pages.
 *
 * These pages are calendar pages: a month grid, the candle-lighting widget in
 * the sidebar, then the print-hidden editorial block — prose in a wide column
 * with the date tables in a narrow column beside it.
 *
 * It loads on top of style.css and month/month.css (the grid, the print sizing
 * and the print-orientation modal all come from there unchanged).
 */

/* ------------------------------------------------------------- emphasis */
/*
 * INVERTED emphasis (round 2). The festival that is the subject of the page is
 * NOT decorated at all: it keeps the ordinary holiday colour every other page
 * on the site gives it, so the grid reads exactly like a /month/ grid. What
 * changes is everything *around* it — every OTHER holiday in the month drops
 * to 50% opacity, so the subject festival is the only marking at full
 * strength.
 *
 * Why opacity on the whole cell rather than a lightening overlay: the holiday
 * background is written as an inline `background: … !important` by
 * AxCal.getHolidayPresentation() and its text colour is often white, so
 * whitening only the background would leave white text on a pale fill.
 * Fading the cell as a unit keeps the text/background contrast ratio intact.
 *
 * print-color-adjust: exact keeps the fade on paper, where browsers otherwise
 * drop background colours entirely.
 */
.calendar-grid .day-cell.holiday-dim {
    opacity: 0.5;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* A festival day that spills into the neighbouring month is still a festival
   day: cancel the greyed-out "other month" treatment for it. */
.calendar-grid .day-cell.day-focus.other-month {
    color: inherit;
}

/* ------------------------------------------------------------ page furniture */
/* `.container` is a flex row (Explain-div sidebar + content). Everything below
   the sidebar — grids, legend, tables — lives inside this single flex item. */
.holiday-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.holiday-grid-caption {
    margin: 0 0 6px;
    font-size: 14px;
    color: #475569;
    text-align: center;
}

.holiday-calendar-block + .holiday-calendar-block {
    margin-top: 34px;
}

/* The "the days of X are marked on the calendar" legend describes emphasis
   that no longer exists — nothing is marked any more. The server-side copy is
   removed separately (server.js is owned by another agent); hiding it here
   means the page is never wrong in the meantime. */
.holiday-focus-legend {
    display: none !important;
}

/* ------------------------------------------------------------- date tables */
/*
 * The tables no longer sit beside the calendar grid. They are rendered into
 * `.axcal-content-side` — the narrow column beside the prose, down in the
 * editorial block below the separator rule — exactly where /hebrew-month/ puts
 * its at-a-glance table. The column itself (its width, its card treatment and
 * its collapse below 900px) is styled once in style.css, under
 * `.axcal-content--editorial.axcal-content--split`; everything left here is the
 * table interior, which is specific to this page.
 *
 * Being inside `.axcal-content` means they are print-hidden with the rest of
 * the editorial matter — a printed holiday page stays a clean one-page
 * calendar exactly like /month/.
 */
.holiday-tables table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.holiday-tables th,
.holiday-tables td {
    padding: 5px 7px;
    border: 1px solid #e2e8f0;
    text-align: start;
}

.holiday-tables thead th {
    background: #f1f5f9;
    font-weight: 700;
}

.holiday-tables tbody th[scope="row"] {
    background: #f8fafc;
    font-weight: 600;
    width: 34%;
}

.holiday-tables tbody tr.is-current-year td {
    font-weight: 700;
    background: #fef2f2;
}

.holiday-tables-scroll {
    overflow-x: auto;
}

/* The page is wider than a stock `.container` so the calendar grid keeps the
   room it had when the tables shared the row with it. */
@media screen and (min-width: 1100px) {
    .container {
        width: 88%;
        max-width: 1500px;
    }
}

/* On a phone everything is one column again. style.css's mobile rules were
   written for the /month/ pages, where `.calendar-container` is a direct child
   of `.container`: `.calendar-container { order: 2 }` there puts the grid after
   the sidebar copy, but here the grid sits one level down inside
   `.holiday-main`, so the order has to be restated at this level. */
@media (max-width: 768px) {
    .holiday-main {
        order: 2;
    }

    .holiday-main > * {
        order: 1;
    }
}

/* ------------------------------------------------- candle-lighting times */
/*
 * Entry/exit times for the festival, mounted by holiday.js directly under the
 * print button in the `.Explain-div` sidebar. Reference data, not part of the
 * printed product — hidden from print below. The whole block is only inserted
 * once real times have come back from /api/candles, so a failed or empty
 * response simply leaves the page as it was.
 */
.holiday-candles {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #d2d2d2;
    font-size: 14px;
    line-height: 1.5;
}

/* The server renders the container empty and holiday.js fills it only once
   real times have arrived — until then (and forever, if /api/candles is
   unreachable) it must take up no space at all. */
.holiday-candles:empty {
    display: none;
}

.holiday-candles-title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: #3b6fc4;
}

.holiday-candles-city {
    display: block;
    margin-bottom: 12px;
}

.holiday-candles-city > span {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: #666;
}

.holiday-candles-city select {
    width: 100%;
    max-width: 200px;
    box-sizing: border-box;
    padding: 5px 8px;
    font: inherit;
    font-size: 14px;
    color: #1f3a5f;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
}

.holiday-candles-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.holiday-candles-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.holiday-candles-label {
    color: #666;
}

.holiday-candles-time {
    font-size: 17px;
    font-weight: 700;
    color: #1f3a5f;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.holiday-candles-date {
    flex: 1 0 100%;
    font-size: 12px;
    color: #8a8a8a;
}

.holiday-candles.is-busy {
    opacity: 0.55;
}

/* `.Explain-div` collapses to `display: contents` on mobile and its children
   are re-ordered explicitly; keep the widget with the rest of the sidebar
   copy instead of letting it float to the top of the page. */
@media (max-width: 768px) {
    .holiday-candles {
        order: 1;
        width: 100%;
        margin-top: 14px;
        padding-top: 12px;
    }
}

@media print {
    .holiday-tables,
    .holiday-grid-caption,
    .holiday-focus-legend,
    .holiday-candles {
        display: none !important;
    }

    .holiday-main {
        display: flex;
        flex-direction: column;
    }

    /* A festival that straddles two Gregorian months prints as two pages —
       one grid per page, same sizing as a /month/ printout. */
    .holiday-calendar-block + .holiday-calendar-block {
        break-before: page;
        page-break-before: always;
        margin-top: 0;
    }
}

/* The shared .month-title-row forces `direction: ltr` so the ‹ › arrows on
   /month/ keep one visual order in both locales (the JS swaps which arrow is
   "previous"). The holiday page has no arrows — only the H2 and the print
   button — so there LTR just mis-orders them on a Hebrew page. Inherit the
   page direction instead: RTL in Hebrew, LTR under /eng/. */
.holiday-calendar-block .month-title-row {
    direction: inherit;
}