/* EZKlass Connect — public school calendar.
 *
 * Styled to match the site's existing "Calendar & Updates" page: white day cells,
 * a light week-header band, a pink (brand) centered month caption with prev/next
 * arrows, and a stacked "Upcoming School Closures" list. Palette from the site's
 * Elementor global kit:
 *   Primary Pink #A8516C (month + arrows + has-events)   Text #3C4645 (headings, closure dates)
 *   light borders #e5e7eb                                week header bg #eef1f5
 *
 * Accent + line colours are CSS variables so another school (e.g. RVM) can override
 * them via the shortcode's `accent` attribute without editing this file.
 *
 * Self-contained: nothing depends on jet-engine/jet-elements CSS, which disappears
 * once Crocoblock is removed.
 */

/* Centered container matching the site's Elementor boxed container so the calendar
   lines up with the header logo. max-width comes inline from the shortcode's
   max_width attr (default 1460 = the kit's Content Width).

   No side padding on wide screens: Elementor "absorbs" a boxed container's padding
   once the viewport exceeds the content width, so the content sits right at the
   1460 edge — the same edge the header logo sits at. Only below that do we apply
   the kit's 30px container padding, so the content never touches the screen edge.
   (1519px ≈ 1460 content + 2×30 padding, the point where padding stops being absorbed.) */
.ezk-cal-wrap {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
@media (max-width: 1519px) {
    .ezk-cal-wrap { padding-left: 30px; padding-right: 30px; }
}

.ezk-cal {
    --ezk-cal-accent:    var(--e-global-color-secondary, #A8516C);  /* site's brand accent */
    --ezk-cal-heading:   var(--e-global-color-text, #3C4645);       /* site's text color */
    --ezk-cal-line:      #e5e7eb;   /* cell / caption borders */
    --ezk-cal-head-bg:   #eef1f5;   /* week-header band */
    --ezk-cal-head-tx:   #7c8894;   /* week-header day names */
    --ezk-cal-date:      #9aa3b2;   /* day-number, muted */
    --ezk-cal-event:     #5f6b6a;   /* event text */
    --ezk-cal-day-min-h: 118px;
    /* Two-column: calendar on the left, closures on the right (matches the site). */
    display: flex;
    align-items: flex-start;
    gap: 44px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    color: var(--ezk-cal-heading);
}
.ezk-cal *, .ezk-cal *::before, .ezk-cal *::after { box-sizing: border-box; }

.ezk-cal-main { flex: 1 1 62%; min-width: 0; }

/* Printable-PDF download link, under the month grid — styled to match the site's
   original "Calendar & Updates" button: a squared maroon outline, uppercase
   letter-spaced label, and a filled accent square holding a white arrow on the right. */
.ezk-cal-pdf {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: 16px;
    padding: 8px 8px 8px 24px;
    border: 3px solid var(--ezk-cal-accent, #A8516C);
    border-radius: 0;
    color: var(--ezk-cal-accent, #A8516C);
    text-decoration: none;
    transition: background .14s ease, color .14s ease;
}
.ezk-cal-pdf__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1;
}
.ezk-cal-pdf__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    background: var(--ezk-cal-accent, #A8516C);
    color: #fff;
    transition: background .14s ease;
}
.ezk-cal-pdf:hover { background: var(--ezk-cal-accent, #A8516C); color: #fff; }
.ezk-cal-pdf:hover .ezk-cal-pdf__arrow { background: rgba(255, 255, 255, .22); }
.ezk-cal-side { flex: 1 1 30%; min-width: 0; }
/* Closures-only mode ([ezk_calendar show_calendar="0"]): the page has its own
   separate calendar section, so let the closures list span the full width. */
.ezk-cal--closures-only .ezk-cal-side { flex: 1 1 100%; }

/* Section headings — the site uses <h4> for "School Calendar" /
   "Upcoming School Closures". Match the Elementor kit's h4 typography exactly
   (32px / 600 / 1.5) so they look identical to the rest of the site. Scoped under
   .ezk-cal (0-2-0) so the theme's base heading styles don't win a specificity tie. */
.ezk-cal .ezk-cal-title,
.ezk-cal .ezk-cal-closures__title {
    color: var(--ezk-cal-heading);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.5;
    margin: 0 0 14px;
}
@media (max-width: 1024px) {
    .ezk-cal .ezk-cal-title,
    .ezk-cal .ezk-cal-closures__title { font-size: 24px; }
}

/* ── Caption (month name + prev/next), centered with arrows on the sides ── */
.ezk-cal-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: 12px 20px;
    border: 1px solid var(--ezk-cal-line);
    border-bottom: 0;
    background: #fff;
}
.ezk-cal-caption__name {
    order: 2;
    flex: 0 0 auto;
    min-width: 11em;
    text-align: center;
    color: var(--ezk-cal-accent);
    font-weight: 600;
    font-size: 1em;
    letter-spacing: .04em;
    text-transform: uppercase;
}
/* Hello-Elementor's reset.css styles `[type=button],button` with a 1px #c36
   border + .5rem 1rem padding (that's the "boxes"). Its `[type=button]` selector
   is 0-1-0 — a tie with a bare `.ezk-cal-nav`, which the later-loaded theme wins.
   Scoping under `.ezk-cal` makes this 0-2-0 so it cleanly beats the theme; no
   !important needed. */
.ezk-cal .ezk-cal-nav {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--ezk-cal-date);
    line-height: 0;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.ezk-cal .ezk-cal-nav:hover { color: var(--ezk-cal-accent); background: rgba(168, 81, 108, .10); }
.ezk-cal .ezk-cal-nav:focus { outline: none; box-shadow: none; }
.ezk-cal .ezk-cal-nav:focus-visible { outline: 2px solid var(--ezk-cal-accent); outline-offset: 2px; }
.ezk-cal .ezk-cal-nav svg { display: block; width: 17px; height: 17px; }
.ezk-cal-nav--prev { order: 1; }
.ezk-cal-nav--next { order: 3; }
.ezk-cal-nav--next svg { transform: scaleX(-1); }
.ezk-cal .ezk-cal-nav:disabled { opacity: .35; cursor: default; }
.ezk-cal .ezk-cal-nav:disabled:hover { background: transparent; color: var(--ezk-cal-date); }

/* ── Grid ── */
/* A grid rather than a table, because a bar has to cross day boundaries and a
   <td> cannot be crossed. Each week is its own 7-column grid: the day cells span
   every lane row as a BACKGROUND layer (grid-row 1/-1), the date numbers sit on
   row 1, and each event is one bar placed on a lane row above them. Rows are
   auto-height, so a title wraps and the week grows instead of clipping. */
.ezk-cal-grid {
    width: 100%;
    border: 1px solid var(--ezk-cal-line);
    background: #fff;
}

.ezk-cal-weekhead {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.ezk-cal-weekhead > div {
    text-align: center;
    padding: 12px 4px;
    background: var(--ezk-cal-head-bg);
    color: var(--ezk-cal-head-tx);
    font-size: .74em;
    font-weight: 500;
    letter-spacing: .03em;
    border: 1px solid var(--ezk-cal-line);
}

/* Two layers, because the week's height is not knowable up front: a wrapped title
   makes its lane taller. The BARS layer is in normal flow and therefore decides the
   height; the CELLS layer is absolutely positioned over the same seven columns and
   inherits it. (A single grid with the cells spanning `1 / -1` does NOT work: -1
   counts back from the EXPLICIT grid, which has no rows here, so every cell
   collapses onto row 1 and the bars land underneath the boxes.) */
.ezk-cal-week {
    --ezk-cal-lane-h: 30px;     /* one span lane: chip + gap. The per-column offsets in
                                   calendar.js are multiples of this. */
    --ezk-cal-datehead-h: 26px; /* the date-number row */
    position: relative;
    min-height: var(--ezk-cal-day-min-h);
}
.ezk-cal-week__cells {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
/* Spans are taken OUT OF FLOW. If they occupied flow height, every column would be
   pushed down by the full lane stack — which just relocates the hole from beneath the
   span to above the card of a neighbour that has no span at all. Out of flow, each
   column's singles clear only the lanes that actually cover them. */
.ezk-cal-week__grid {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* Row 1 is the date number; every further row is one MULTI-DAY lane. Single-day
       events are not here — see .ezk-cal-week__singles below for why. */
    grid-auto-rows: auto;
}

/* Single-day events, one independent stack per column.
   ⚠️ These are deliberately NOT in the grid above. A grid row spans all seven columns,
   so a two-line card on one day stretched the row everywhere and left a hole beneath
   every shorter chip in that row — most visibly under a span, which is one line by
   nature. Here each column's height is its own, so a tall Wednesday cannot push
   Thursday's card down. Multi-day bars stay in the grid because only a grid can
   express crossing columns. */
.ezk-cal-week__singles {
    position: relative;         /* above the cells layer */
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: start;
    /* clears the date row, which the out-of-flow grid above also occupies */
    padding-top: var(--ezk-cal-datehead-h, 26px);
    padding-bottom: 5px;
}
.ezk-cal-week__stack {
    display: flex;
    flex-direction: column;
    min-width: 0;               /* let titles ellipsis rather than widen the column */
}

/* ⚠️ A span must stay ONE LINE. Its lane height is what the per-column offsets above are
   computed from, so a span that wrapped would overlap the cards beneath it. Spans are
   wide by nature, so truncation here is rare; single-day chips still wrap freely. */
.ezk-cal-week__grid .ezk-cal-event {
    height: calc(var(--ezk-cal-lane-h) - 4px);
    overflow: hidden;
}
.ezk-cal-week__grid .ezk-cal-event__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The cell carries only the background and the border. */
.ezk-cal-day {
    background: #fff;
    border: 1px solid var(--ezk-cal-line);
}
.ezk-cal-day.is-nearby { background: #fafafa; }
.ezk-cal-day.is-today  { background: #fbf4f6; }        /* faint tint of the brand pink */
.ezk-cal-day.is-empty  { background: transparent; border-color: transparent; }

.ezk-cal-day__date {
    grid-row: 1;
    text-align: right;
    padding: 6px 8px 2px;
    font-size: .88em;
    line-height: 1.2;
    color: var(--ezk-cal-date);
}
.ezk-cal-day__date.is-nearby   { color: #cbd0d8; }
.ezk-cal-day__date.has-events  { color: var(--ezk-cal-accent); font-weight: 600; }

/* ── Event bars ──
   A white chip with the colour on a 3px rail, exactly as the admin grid and the
   parent portal draw it. Two earlier attempts were worse in opposite directions: a
   solid fill shouts over its own title, and a pale wash of the same colour goes
   muddy once `other` — most of the calendar — is one of them. A small saturated
   mark reads better than a large weak one, and the title stays near-black on white
   whatever colour a school picks.

   Titles WRAP — no ellipsis. A lane is a row shared by all seven columns, so a chip
   that takes two lines makes that row two lines tall for every column, and the six
   without a long title carry the gap. That is the cost of never cutting a title, and
   it is the trade the school asked for: on a printed-calendar page, a name you cannot
   finish reading is worse than white space. The week grows on its own — lane rows are
   `auto` and the day cells are absolutely positioned over the whole week — so nothing
   needs to be told how tall to be. */
.ezk-cal-event {
    --ezk-ev: #64748b;
    align-self: start;
    /* A grid item will not shrink below its min-content width unless told to, and at
       the phone's ~47px columns a long word is wider than that — the chip then spills
       sideways over the neighbouring day and reads as spanning it. */
    min-width: 0;
    display: flex;
    /* Top, not centre: with a title over two lines, a centred tag floats beside the
       gap between them instead of beside the words it qualifies. */
    align-items: flex-start;
    /* And the tag drops to its own line rather than squeezing the title into a
       one-word column. Without this, a "Half Day" tag on a single-day chip left the
       title ~50px and it read downwards: "Eleme / ntary / Progra / m". */
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 3px 3px;
    padding: 2px 6px;
    font-size: .74em;
    line-height: 1.45;
    color: var(--ezk-cal-event);
    text-align: left;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 3px solid var(--ezk-ev);
    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(16, 24, 40, .04);
}
/* A FILLED card: the type's colour behind white text, configured per event type in
   System Parameters → Calendar → Card Appearance. The rail becomes the whole card, so
   the left border joins it instead of striping it. */
.ezk-cal-event.is-filled {
    background: var(--ezk-ev);
    border-color: var(--ezk-ev);
    box-shadow: none;
}
/* The ink is the school's choice, handed down as --ezk-ev-fg by calendar.js from the
   server-resolved `type_text_color`. #fff is only the fallback for an API too old to
   send it — NOT the design. Hardcoding white here made the public page contradict the
   preview in the event-type editor for any school that picked a light card. */
.ezk-cal-event.is-filled .ezk-cal-event__title,
.ezk-cal-event.is-filled .ezk-cal-event__prog {
    color: var(--ezk-ev-fg, #fff);
    font-weight: 600;
}
/* The tag and the ½ mark take their colour FROM --ezk-ev, which is now the background —
   they would vanish. On a filled card they invert to a translucent white chip. */
.ezk-cal-event.is-filled .ezk-cal-event__tag,
.ezk-cal-event.is-filled .ezk-cal-event__half {
    color: var(--ezk-ev-fg, #fff);
    background: var(--ezk-ev-fg-soft, rgba(255, 255, 255, .22));
}
/* The card icon is an SVG drawn in currentColor, so it is white here for the same
   reason the title is. The emoji version needed a white disc behind it to survive a red
   background, which read as a blob stuck on the chip. */
.ezk-cal-event.is-filled .ezk-cal-event__ic { color: var(--ezk-ev-fg, #fff); }
/* Inline WITH the words, not a flex item beside them.
   `vertical-align: middle` aligns to baseline + half the X-HEIGHT, which is a property of
   the FONT — so the result differs per site font and cannot be reasoned about, only
   measured. Against Effra (what both school sites load) the 12px glyph lands 1.38px LOW;
   -0.115em brings it to exactly 0.00. In em, so it holds as the chip's font-size changes
   with the breakpoint.
   ⚠ Measured on the LIVE page with document.fonts.ready — a local harness using a
   different font reported 0.00 with no nudge at all and was simply measuring the wrong
   typeface. If the site font ever changes, re-measure; do not adjust this by eye. */
.ezk-cal-event__ic {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -0.115em;
    margin-right: 4px;
    color: var(--ezk-ev);
}
.ezk-cal-event__ic svg { display: block; }

/* A WASH of the type's colour — enough to find the day at a glance, light enough that
   near-black text still reads on it. The rail stays, so the colour is legible even
   where the wash is subtle. */
.ezk-cal-event.is-tint {
    background: color-mix(in srgb, var(--ezk-ev) 12%, #fff);
    border-color: color-mix(in srgb, var(--ezk-ev) 25%, #fff);
    border-left-color: var(--ezk-ev);
}

.ezk-cal-event__title {
    flex: 1 1 auto;
    /* The floor that decides whether the tag fits beside the title or wraps under it.
       Roughly one long word: below this the line is not worth sharing. */
    min-width: 8em;
    /* Breaks a word only when it genuinely cannot fit, so "Elementary" does not become
       "Eleme ntary" the moment a column is narrow. */
    overflow-wrap: break-word;
}
/* The event type, in the school's own words, when the school asked for it on the
   public page. It is a QUALIFIER, so it must never win an argument with the title:
   on a one-day chip in a narrow column, "Elem… Half …" is two truncations where one
   readable title would have done.

   So the TAG is the shrinkable one (`flex: 0 1`) and the title holds a floor. First
   attempt gave the tag `flex: 0 0` and the title collapsed to three pixels beside it;
   second used a container query, and `container-type: inline-size` on a grid item
   collapsed the chip itself to its icons. Flex priority is the boring answer that
   works everywhere. */
.ezk-cal-event__tag {
    /* Never shrinks. A tag truncated to "H…" is worse than no tag, and the school
       asked for this one specifically — the title is the part that can afford an
       ellipsis, because it is also the chip's tooltip and the popover's heading. */
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 0 5px;
    border-radius: 3px;
    color: var(--ezk-ev);
    background: color-mix(in srgb, var(--ezk-ev) 12%, #fff);
}

/* No longer a flex item — line-height must not inflate the inline box or it pushes the
   first text line down and the chip grows a row. */
.ezk-cal-event__ic { font-size: .9em; line-height: 0; }
/* Redundant beside a "Half Day" tag — the two say the same thing, and on a one-day
   chip that duplication costs the title twenty pixels it needs more. */
.ezk-cal-event__tag + .ezk-cal-event__asp + .ezk-cal-event__half,
.ezk-cal-event__tag + .ezk-cal-event__half { display: none; }

/* After-care state, in words. It never shrinks, for the same reason the tag does not:
   "No After C…" is worse than nothing, and this is the fact a parent came to check.
   The title is the part that can afford an ellipsis — it is also the chip's tooltip
   and the popover's heading, so nothing is actually lost when it truncates.
   Colours mirror .ezk-cal-pill--asp-* so the chip and the popover agree: green when
   after care runs, red when it does not, amber when it runs differently.

   Red here is the same red as .ezk-cal-pill--closed, which is deliberate but was not
   always safe. The key used to separate a CLOSED day from a NO-AFTER-CARE day by
   channel precisely because both read as "the red thing" — colour carried closure,
   a glyph carried after care. That constraint is gone now the pill says the words:
   "No After Care" cannot be misread as "school is closed". Do not reintroduce a
   wordless red mark on a chip.

   These three backgrounds are OPAQUE while every other chip colour here is rgba, and
   that is the point. A translucent chip composites with whatever is behind it, so on a
   FILLED card all three became the event's own colour — the state stopped being
   readable at exactly the moment the card got loud. The type tag still inverts to
   translucent white on a filled card, because the type is what the card colour already
   says; after care is not, so it keeps green / red / amber on rail, tint and filled
   alike. */
.ezk-cal-event__asp {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: .78em;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 0 5px;
    border-radius: 3px;
}
.ezk-cal-event__asp--ok  { background: #e0efe7; color: #1c7a49; }   /* green  */
.ezk-cal-event__asp--no  { background: #f8e5e5; color: #8a1f1f; }   /* red    */
.ezk-cal-event__asp--mod { background: #faedda; color: #935c07; }   /* amber  */

.ezk-cal-event__half {
    flex: 0 0 auto;
    white-space: nowrap;        /* "Half Day" is two words and must not become three lines */
    font-size: .78em;
    font-weight: 700;
    padding: 0 3px;
    border-radius: 3px;
    color: var(--ezk-ev);
    background: color-mix(in srgb, var(--ezk-ev) 12%, #fff);
}
/* A chip covering more than one day is the point of all this — nothing extra is
   needed to say so, the width says it.

   A CLOSED day is carried by COLOUR — a tinted card in the type's own colour, plus a
   heavier title — and never by a second prohibition glyph. 🚫 already means "no
   after-care"; a closure emoji beside it would be two red circles a reader has to
   tell apart, which is exactly the confusion this replaces. The key under the
   calendar names both. */
/* ⚠️ :not(.is-filled):not(.is-tint) — closure styling is the DEFAULT, not an override.
   This rule and .is-filled both have specificity 0-2-0, and this one is defined later, so
   it silently won: a no_school day configured as "filled" got this 8% wash as its
   background while .is-filled still forced the title and pills to WHITE. White text on a
   near-white card, invisible, with the card settings reporting "filled" the whole time.
   card_style is a choice the school makes in Card Appearance; it outranks the default. */
.ezk-cal-event.is-closed:not(.is-filled):not(.is-tint) {
    /* Plain values first: color-mix() is Chrome 111+, and a browser that cannot parse the
       second declaration keeps the first instead of dropping the background entirely. */
    background: #fdf6f6;
    background: color-mix(in srgb, var(--ezk-ev) 8%, #fff);
    border-color: #f0d7d7;
    border-color: color-mix(in srgb, var(--ezk-ev) 30%, #fff);
}
.ezk-cal-event.is-closed:not(.is-filled) .ezk-cal-event__title {
    color: var(--ezk-cal-heading);
    font-weight: 600;
}

/* ── Key, under the grid ── */
.ezk-cal-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 10px;
    padding: 9px 12px;
    border: 1px solid var(--ezk-cal-line);
    border-radius: 8px;
    background: #fcfcfd;
    font-size: .76em;
    line-height: 1.5;
    color: var(--ezk-cal-event);
}
.ezk-cal-legend__h {
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .88em;
    color: var(--ezk-cal-date);
}
.ezk-cal-legend__i { display: inline-flex; align-items: center; gap: 5px; }
.ezk-cal-legend__sw {
    width: 10px; height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06) inset;
}

/* ── Pills (event type + ASP status) — used in both the grid and the closures list ── */
.ezk-cal-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.ezk-cal-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .82em;
    font-weight: 600;
    line-height: 1.5;
    /* Wraps rather than truncating, same reason as the chip: the ASP pill carries a
       free-text note the school wrote ("ASP Available until 5:30 PM"), and half of it
       is not information. Only the popover overrode this before. */
    white-space: normal;
    max-width: 100%;
    overflow-wrap: break-word;
}
.ezk-cal-pill--closed   { background: rgba(200, 40, 40, .12);  color: #8a1f1f; }
.ezk-cal-pill--type     { background: rgba(56, 94, 124, .12);  color: #2c4a63; }  /* brand blue-ish */
.ezk-cal-pill--asp-ok   { background: rgba(34, 139, 84, .14);  color: #1c7a49; }  /* green */
.ezk-cal-pill--asp-no   { background: rgba(200, 40, 40, .12);  color: #8a1f1f; }  /* red */
.ezk-cal-pill--asp-mod  { background: rgba(223, 141, 24, .16); color: #935c07; }  /* amber */

/* In the tight grid cells, pills sit a touch smaller. */

/* Clickable events (open the detail modal). */
.ezk-cal-event[role="button"] { cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.ezk-cal-event[role="button"]:hover { border-color: #d1d5db; box-shadow: 0 1px 3px rgba(16, 24, 40, .10); }
.ezk-cal-event[role="button"]:focus-visible { outline: 2px solid var(--ezk-cal-accent); outline-offset: 1px; }
.ezk-cal-closures__item[role="button"] { cursor: pointer; }
.ezk-cal-closures__item[role="button"]:hover .ezk-cal-closures__name { text-decoration: underline; }
.ezk-cal-closures__item[role="button"]:focus-visible { outline: 2px solid var(--ezk-cal-accent); outline-offset: 2px; }

/* ── Event detail popover — a small, delicate "zoom" of the clicked day box.
   Purpose: reveal the day's full text when the cell truncates it — nothing more,
   so it stays compact. Everything is scoped under .ezk-cal (0-2-0) so the theme's
   h3 typography and its `[type=button]` border (the maroon box) can't win. ── */
.ezk-cal-pop { position: fixed; inset: 0; z-index: 100000; display: none; }
.ezk-cal-pop.is-open { display: block; }
/* Transparent full-screen catcher: closes on outside click, no page dimming so
   the popover reads as a zoom of the box rather than a modal. */
.ezk-cal-pop__catch { position: absolute; inset: 0; background: transparent; }

.ezk-cal .ezk-cal-pop__panel {
    position: fixed;
    width: 270px;
    max-width: calc(100vw - 16px);
    max-height: 66vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--ezk-cal-line);
    border-top: 2px solid var(--ezk-cal-accent, #A8516C);
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .14);
    padding: 11px 13px 12px;
    animation: ezk-cal-pop-in .12s ease-out;
}
@keyframes ezk-cal-pop-in {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: scale(1); }
}
/* Just a small red ×: it's a <span>, so no theme button border/fill applies. */
.ezk-cal .ezk-cal-pop__close {
    position: absolute; top: 5px; right: 7px;
    display: flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    margin: 0; padding: 0;
    background: transparent;
    font-size: 17px; line-height: 1;
    color: var(--ezk-cal-accent, #A8516C);
    cursor: pointer;
    transition: opacity .12s ease;
}
.ezk-cal .ezk-cal-pop__close:hover { opacity: .6; }
.ezk-cal .ezk-cal-pop__close:focus { outline: none; }
.ezk-cal .ezk-cal-pop__close:focus-visible { outline: 2px solid var(--ezk-cal-accent); outline-offset: 2px; }
.ezk-cal .ezk-cal-pop__title {
    margin: 0 16px 7px 0;
    color: var(--ezk-cal-accent, #A8516C);
    font-size: 14px; font-weight: 600; line-height: 1.3;
}
/* Top-align the icon so it stays with the FIRST line when a long date range wraps
   (otherwise align-items:center floats it between the two lines). */
.ezk-cal .ezk-cal-pop__row { display: flex; align-items: flex-start; gap: 7px; color: #3C4645; font-size: 12px; line-height: 1.45; margin-bottom: 4px; }
.ezk-cal .ezk-cal-pop__ic { font-size: 11px; line-height: 1.45; opacity: .75; flex: 0 0 auto; }
.ezk-cal .ezk-cal-pop__pills { margin: 8px 0 2px; }
.ezk-cal .ezk-cal-pop__pills .ezk-cal-pills { margin-top: 0; }
/* In the popover, pills show their FULL text (wrap, no ellipsis) — the popover
   grows to fit rather than truncating. Overrides the grid pill's nowrap/clip. */
.ezk-cal .ezk-cal-pop__pills .ezk-cal-pill {
    font-size: 11px;
    padding: 3px 9px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    line-height: 1.45;
}
.ezk-cal .ezk-cal-pop__programs { color: #5f6b6a; font-size: 11.5px; margin-top: 8px; }
.ezk-cal .ezk-cal-pop__desc { color: #3C4645; font-size: 12px; line-height: 1.5; margin-top: 8px; }

/* ── Upcoming School Closures list ── */
.ezk-cal-closures__list { list-style: none; margin: 0; padding: 0; }
/* 12px, not 20: a full school year is ~15 closures, and at 20px the gaps alone added
   ~300px — the column ran far past the bottom of the calendar beside it. */
.ezk-cal-closures__item { margin: 0 0 12px; }

/* Height matching for the closures column is done in calendar.js, NOT here.
   CSS cannot do it: flexbox `align-items: stretch` matches the TALLEST sibling, and the
   closures list IS the tallest — so stretching grows the calendar column to match the
   list, never the reverse. There is no CSS expression for "be as tall as that shorter
   sibling". Three attempts at a flex chain failed for this reason before the cause was
   understood; the fix has to measure the other column, which means script.
   Only the presentation of the scroll area lives here. */
.ezk-cal--closures-only .ezk-cal-closures__list.is-fitted {
    overflow-y: auto;
    padding-right: 10px;
    overscroll-behavior: contain;   /* the end of the list must not scroll the page */
}
.ezk-cal--closures-only .ezk-cal-closures__list.is-fitted::-webkit-scrollbar { width: 6px; }
.ezk-cal--closures-only .ezk-cal-closures__list.is-fitted::-webkit-scrollbar-thumb {
    background: var(--ezk-cal-accent, #385E7C); opacity: .4; border-radius: 3px;
}


/* ── Stack the two columns on narrower screens ── */
@media (max-width: 900px) {
    .ezk-cal { flex-direction: column; gap: 32px; }
    .ezk-cal-main, .ezk-cal-side { flex: 1 1 auto; width: 100%; }
}

/* ── Mobile: keep the same month-grid format, just tighter ── */
@media (max-width: 767px) {
    .ezk-cal { --ezk-cal-day-min-h: 74px; }
    .ezk-cal-weekhead > div { font-size: .62em; padding: 8px 2px; }
    .ezk-cal-legend { gap: 5px 10px; padding: 8px 10px; font-size: .72em; }
    .ezk-cal-event { font-size: .64em; margin: 0 2px 2px; padding: 1px 4px; }
    /* A 390px phone gives each day ~47px — not enough for a word, let alone a
       title. The chip becomes a coloured stub; the popover says what it is. */
    .ezk-cal-event { gap: 2px; }
    /* A phone column is ~47px, narrower than the floor above — which would push the
       chip's min-content past the column and spill it over the next day. */
    .ezk-cal-event__title { min-width: 0; }
    .ezk-cal-event__half, .ezk-cal-event__tag, .ezk-cal-event__asp { display: none; }
    .ezk-cal-day__date { font-size: .78em; padding: 4px 4px 0; }
    .ezk-cal .ezk-cal-title, .ezk-cal .ezk-cal-closures__title { font-size: 20px; }
}