/* ===== Holidays List For 2026 — state-page styles =====
 *
 * Scoped to .holiday-page (the wrapper every state page renders inside) so
 * these rules never leak into the ~100 other pages that load
 * compliance/assets/css/compliance.css alongside this file. That stylesheet
 * still supplies the crumbs, the pills, the table-scroll wrapper and the
 * base .lwf-contribution-table this file refines rather than replaces.
 *
 * Loaded after compliance.css, so a selector of equal specificity here wins
 * without needing !important anywhere below.
 */

/* compliance.css's .compliance-detail reserves 160px of top padding to clear
   the fixed navbar on pages with no hero band above them. Every holiday state
   page has one (the sky band in detail.php), which already supplies that
   clearance itself — without this override the two stack, leaving the large
   gap between the hero and the breadcrumb that .compliance-wiki--hero exists
   to prevent for the exact same reason on the listing pages. Needs
   !important to win against that rule's own !important. */
.holiday-page {
    padding-top: 30px !important;
}

/* ---- Today / Tomorrow status ---- */

.holiday-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /* No top margin: this is the first thing in .holiday-main, and it needs
       to start flush with the sidebar's own first thing (the Table of
       Contents heading) so the two columns line up at the same height. */
    margin: 0 0 28px;
}
@media (max-width: 640px) {
    .holiday-status-grid { grid-template-columns: 1fr; }
}
.holiday-status-card {
    border: 1px solid #93c5fd;
    border-radius: 16px;
    padding: 22px;
    background: linear-gradient(180deg, #60a5fa 0%, #bfdbfe 60%, #eff6ff 100%);
}
.holiday-status-card__label {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px;
}
.holiday-status-card__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 6px;
}
.holiday-status-card__big {
    font-size: 1.7rem;
    font-weight: 800;
    color: #1e293b;
}
.holiday-status-card__date {
    font-size: 0.85rem;
    color: #78716c;
    margin: 0 0 14px;
}
.holiday-status-card__pill {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 999px;
}
.holiday-status-card__pill--none {
    background: #fff;
    color: #1d4ed8;
}
.holiday-status-card__pill--yes {
    background: #dcfce7;
    color: #15803d;
}
.holiday-status-card__note {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #57534e;
    margin: 0;
}

/* ---- Two-column layout: article on the left, a fixed-width rail of
        navigation aids (contents, the other 35 states, the PDF) on the
        right. The rail is a normal column, not position:sticky — with the
        full state list in it, it usually runs taller than the viewport, and
        a sticky element taller than the screen just clips at the fold
        rather than helping anyone. ---- */

.holiday-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 900px) {
    .holiday-layout { grid-template-columns: 1fr; }
}
.holiday-main { min-width: 0; }
.holiday-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.holiday-box {
    border: 1px solid #ececf1;
    border-radius: 16px;
    padding: 20px 22px;
    background: #f8fafc;
    margin-bottom: 28px;
}
.holiday-sidebar .holiday-box { margin-bottom: 0; }
.holiday-box h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 10px;
}
.holiday-box p {
    font-size: 0.88rem;
    line-height: 1.65;
    color: #52606d;
    margin: 0 0 8px;
}
.holiday-box p:last-child { margin-bottom: 0; }

/* Weekend Holiday Status — its own light cyan tint, distinct from the plain
   grey every other box on the page uses, since it is the one box that is a
   footnote-style caveat rather than a navigation aid or a data block. */
.holiday-box--weekend {
    background: #dbeafe;
    border-color: #bfdbfe;
}
.holiday-box--weekend p {
    font-size: 0.85rem;
}

/* Disclaimer, right after the FAQ accordion — reuses the weekend box's
   light-blue tint (both are footnote-style caveats, not data or nav), but
   needs its own top margin since the FAQ block above it has no bottom
   margin of its own to create separation. */
.holiday-box--disclaimer {
    margin-top: 40px;
}

/* Tighter padding than the shared .holiday-box default, and a smaller gap
   between rows — both this box and .holiday-states-box below are lists, not
   prose, and read as cramped-on-purpose rather than airy once there's more
   than a handful of rows in them. */
.holiday-toc-box {
    padding: 14px 16px;
    background: #fff;
}
.holiday-toc-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.holiday-toc-box a {
    color: #2563EB;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}
.holiday-toc-box a:hover { text-decoration: underline; }
.holiday-toc-box a.is-active {
    color: #1e3a8a;
    text-decoration: underline;
}

/* ---- "Holiday Lists For" — every other state, one bordered pill per row.
        Heading sits outside the box now, as its own line, rather than caged
        inside it with the pills — asked for on 2026-09-24. */

.holiday-sidebar-heading {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 10px;
}
.holiday-states-box {
    background: #fff;
    max-height: 640px;
    overflow-y: auto;
    padding: 14px 16px;
    /* Square across the top, rounded only at the bottom — the same fix as
       the holiday table's header: a rounded top corner sits directly under
       the browser's own vertical scrollbar track here too, since this box
       also scrolls internally, and the two clash into a broken-looking
       corner rather than a clean curve. */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.holiday-states-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
/* Plain rows rather than individually bordered pills — asked for on
   2026-09-24 to match a plainer list style: only the one border around
   .holiday-states-box itself, not one per state on top of it. A hairline
   divider between rows takes over the job the per-item border used to do,
   without boxing each state in on its own. */
.holiday-states-box li + li {
    border-top: 1px solid #f1f5f9;
}
.holiday-states-box a {
    display: block;
    padding: 8px 4px;
    color: #2563EB;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s;
}
.holiday-states-box a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* ---- Section headings with an intro line under them ---- */

.holiday-page h2.holiday-section-heading {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 44px 0 6px;
    padding-left: 14px;
    border-left: 4px solid #2563EB;
}
.holiday-section-intro {
    font-size: 0.92rem;
    line-height: 1.7;
    color: #52606d;
    margin: 0 0 18px;
}

/* ---- The holiday tables: compliance.css's own row/border rules stay;
        this only adds the striping, sticky header and hover state that make
        a 45-row table scannable. ---- */

/* Chrome and Firefox silently ignore position:sticky on a <th> when its
   table is border-collapse:collapse — compliance.css's base rule for
   .lwf-contribution-table — so the header row never actually froze despite
   the rule above looking correct. border-spacing:0 keeps the cells touching
   exactly as collapse did, without disabling sticky. */
.holiday-page .lwf-contribution-table {
    border-collapse: separate;
    border-spacing: 0;
}
.holiday-page .lwf-contribution-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #dbeafe;
    color: #1e293b;
    /* compliance.css's base rule puts a 1px divider between every th/td —
       fine inside the body rows, but between header cells it breaks the
       header into four visibly separate chips rather than one bar. Made
       transparent here rather than removed: the column stays the same width,
       only the seam disappears. */
    border-right-color: transparent;
    border-bottom: 2px solid #bfdbfe;
}
.holiday-page .lwf-contribution-table tbody tr:nth-child(even) {
    background: #f8fafc;
}
.holiday-page .lwf-contribution-table tbody tr:hover {
    background: #eef2ff;
}
/* Square across the top, rounded only at the bottom. A rounded top corner
   under the header sat directly beneath the browser's own vertical
   scrollbar track — a straight-edged native control the page can't round —
   and the two together read as a broken, jagged corner rather than a curve.
   Square-topped avoids the clash outright instead of fighting the
   scrollbar's own shape. */
.holiday-page .table-scroll {
    max-height: 520px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #ececf1;
    border-radius: 0 0 12px 12px;
}
.holiday-page .table-scroll .lwf-contribution-table {
    margin: 0;
}

/* ---- PDF download card — a sidebar tile now, not an inline block, so it
        is centred and stacked (icon, text, full-width button) rather than
        the left-to-right row it was as an inline element. ---- */

.holiday-download-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    border: 1px solid #ececf1;
    border-radius: 16px;
    padding: 22px 18px;
    background: #fff;
}
.holiday-download-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #059669;
}
.holiday-download-card__text {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.4;
}
.holiday-download-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: linear-gradient(150deg, #60a5fa 0%, #3b82f6 45%, #2563eb 100%);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 999px;
    text-decoration: none;
    margin-top: 4px;
}
.holiday-download-card__btn:hover { filter: saturate(1.1) brightness(1.08); }

/* ---- Month-wise grid ---- */

.holiday-month-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0 10px;
}
@media (max-width: 900px) { .holiday-month-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .holiday-month-grid { grid-template-columns: 1fr; } }

.holiday-month-card {
    border: 1px solid #ececf1;
    border-radius: 14px;
    padding: 18px;
}
.holiday-month-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #2563EB;
    margin: 0 0 10px;
}
.holiday-month-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.holiday-month-card li {
    font-size: 0.82rem;
    color: #52606d;
    line-height: 1.5;
}
.holiday-month-card li b {
    color: #94a3b8;
    font-weight: 600;
    margin-left: 4px;
}

/* ---- "How HR teams use this list" icon grid ----

   Icons cycle through six accent colours rather than the single brand blue
   everywhere else on the page: this block is a scanning grid of otherwise
   identical tiles, and colour is what lets an eye tell the items apart at a
   glance. The colours are all already in the palette compliance.css uses
   elsewhere on this site for pill/badge accents. */

.holiday-uses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0 10px;
}
@media (max-width: 900px) { .holiday-uses-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .holiday-uses-grid { grid-template-columns: 1fr; } }

.holiday-use-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #ececf1;
    border-radius: 14px;
    padding: 16px;
}
.holiday-use-card__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
}
.holiday-use-card p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #33404d;
    margin: 0;
}

.holiday-use-card__icon--0 { background: #eef2ff; color: #4f46e5; }
.holiday-use-card__icon--1 { background: #ecfeff; color: #0891b2; }
.holiday-use-card__icon--2 { background: #f5f3ff; color: #7c3aed; }
.holiday-use-card__icon--3 { background: #fdf2f8; color: #db2777; }
.holiday-use-card__icon--4 { background: #fff7ed; color: #ea580c; }
.holiday-use-card__icon--5 { background: #ecfdf5; color: #059669; }
.holiday-use-card__icon--6 { background: #eff6ff; color: #2563eb; }

/* ---- FAQ — the site's own .faq-item markup and main.js accordion
        behaviour are reused as-is; this only styles the surface. Closed
        items stay plain (matching every other card on the page); the open
        one gets a blue border, the same colour used everywhere else on this
        page, so "which question is expanded" reads at a glance rather than
        needing the chevron alone to carry it. ---- */

.holiday-page .faq-item {
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.holiday-page .faq-item.is-open {
    border-color: #2563EB;
    /* A same-width ring rather than a thicker border: widening the border
       itself would shift the padding inside by a pixel each way when an
       item opens or closes. */
    box-shadow: 0 0 0 1px #2563EB;
}
.holiday-page .faq-sign {
    background: #2563EB;
}