/* 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:    #A8516C;   /* brand pink — month name, arrows, has-events date */
    --ezk-cal-heading:   #3C4645;   /* dark text — headings + closure dates */
    --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; }

/* 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 ── */
.ezk-cal-grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border: 1px solid var(--ezk-cal-line);
    background: #fff;
}
.ezk-cal-grid th,
.ezk-cal-grid td { width: 14.2857%; }

.ezk-cal-weekhead th {
    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);
}

.ezk-cal-day {
    vertical-align: top;
    height: var(--ezk-cal-day-min-h);
    background: #fff;
    border: 1px solid var(--ezk-cal-line);
    padding: 6px 8px;
}
.ezk-cal-day.is-nearby { background: #fafafa; }
.ezk-cal-day.is-nearby .ezk-cal-day__date { color: #cbd0d8; }
.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 {
    display: block;
    text-align: right;
    font-size: .88em;
    line-height: 1.2;
    color: var(--ezk-cal-date);
}
.ezk-cal-day.has-events .ezk-cal-day__date { color: var(--ezk-cal-accent); font-weight: 600; }

.ezk-cal-day__events {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ezk-cal-event {
    display: block;
    font-size: .74em;
    line-height: 1.3;
    color: var(--ezk-cal-event);
    text-align: left;
    word-break: break-word;
}
/* No-school / closure days get a small brand-pink marker so they read as "closed". */
.ezk-cal-event.is-closed {
    padding-left: 8px;
    border-left: 2px solid var(--ezk-cal-accent);
    color: var(--ezk-cal-heading);
}
.ezk-cal-event__prog { display: block; font-style: italic; opacity: .8; }

/* ── 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;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.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: #e5e7eb;                 color: #6b7280; }  /* gray */
.ezk-cal-pill--asp-mod  { background: rgba(223, 141, 24, .16); color: #935c07; }  /* amber */

/* In the tight grid cells, pills sit a touch smaller. */
.ezk-cal-day__events .ezk-cal-pill { font-size: .78em; }

/* Clickable events (open the detail modal). */
.ezk-cal-event[role="button"] { cursor: pointer; border-radius: 4px; transition: background .12s ease; }
.ezk-cal-event[role="button"]:hover { background: rgba(168, 81, 108, .06); }
.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; }
.ezk-cal-closures__item { margin: 0 0 20px; }
.ezk-cal-closures__date {
    color: var(--ezk-cal-heading);
    font-weight: 700;
    font-size: .95em;
    margin-bottom: 2px;
}
.ezk-cal-closures__name { color: var(--ezk-cal-event); font-size: .95em; line-height: 1.4; }
.ezk-cal-closures__asp  { color: var(--ezk-cal-event); font-size: .85em; opacity: .8; }

.ezk-cal-empty, .ezk-cal-closures__empty {
    padding: 14px 0;
    color: var(--ezk-cal-event);
    font-style: italic;
    opacity: .8;
}

/* ── 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 th { font-size: .62em; padding: 8px 2px; }
    .ezk-cal-day { padding: 4px; }
    .ezk-cal-event { font-size: .64em; }
    .ezk-cal-day__date { font-size: .78em; }
    .ezk-cal .ezk-cal-title, .ezk-cal .ezk-cal-closures__title { font-size: 20px; }
}