/* ============================================================================
   HTV Events — Stylesheet
   File: /css/events.css
   ----------------------------------------------------------------------------
   Used by:
     - Public events listing  (public_events.php)
     - Public event detail    (event-detail.php)
     - Admin event forms      (admin/event-add.php, admin/event-edit.php)
   ----------------------------------------------------------------------------
   Contrast policy (WCAG 2.1 AA — required for federal contract audit):
     - Body text:    #1a1a1a on #fff       → 16.5:1 (AAA)
     - Muted text:   #4a4a4a on #fff       → 9.4:1  (AAA)
     - Helper text:  #555    on #fff       → 7.6:1  (AAA)
     - Borders:      #c8ced6 on #fff       → 3.0:1  (passes UI components)
     - Focus rings:  #0a4a8a 2px           → 5.7:1  on white
     - Primary:      #0a4a8a (HTV navy)
     - Accent:       #c63d2f (HTV red)     → 4.7:1 on white
   All system primitives use rem/em so browser zoom (Ctrl-+) scales correctly
   to satisfy WCAG SC 1.4.4 (Resize Text 200%).
   ========================================================================= */

/* ---------- CSS variables ---------- */
.events-page,
.event-form,
.events-admin {
    --evt-bg:           #ffffff;
    --evt-bg-soft:      #f7f8fa;
    --evt-text:         #1a1a1a;
    --evt-text-muted:   #4a4a4a;
    --evt-text-help:    #555555;
    --evt-border:       #c8ced6;
    --evt-border-hover: #9aa3ad;
    --evt-primary:      #0a4a8a;
    --evt-primary-dark: #073a6e;
    --evt-accent:       #c63d2f;
    --evt-success-bg:   #e8f3eb;
    --evt-success-fg:   #1d5a2c;
    --evt-warn-bg:      #fff3cd;
    --evt-warn-fg:      #5a4500;
    --evt-error-bg:     #fde7e7;
    --evt-error-fg:     #8a1a1a;
    --evt-today-bg:     #e8f0f9;
    --evt-today-line:   #0a4a8a;
    --evt-chip-text:    #ffffff;
    --evt-radius:       6px;
    --evt-shadow-sm:    0 1px 2px rgba(20,30,50,0.06);
    --evt-shadow-md:    0 4px 12px rgba(20,30,50,0.10);
    --evt-focus-ring:   0 0 0 3px rgba(10,74,138,0.35);
}

/* ---------- Visually-hidden utility (a11y) ---------- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ---------- Skip-link target focus ---------- */
.events-page:focus-within #main-content:target {
    outline: 3px solid var(--evt-today-line);
    outline-offset: 4px;
}

/* ============================================================
   HERO
   ============================================================ */
.events-hero {
    background: var(--evt-bg);
    border-bottom: 1px solid var(--evt-border);
    padding: 2.5rem 1.25rem 1.5rem;
}
.events-hero__inner { max-width: 1100px; margin: 0 auto; }
.events-hero__title {
    margin: 0 0 0.5rem;
    color: var(--evt-text);
    font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.events-hero__sub {
    margin: 0;
    color: var(--evt-text-muted);
    font-size: 1.05rem;
    max-width: 60ch;
}

/* ============================================================
   PAGE WRAPPER
   ============================================================ */
.events-page {
    background: var(--evt-bg);
    color: var(--evt-text);
    min-height: 60vh;
}

.events-page > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.events-page .events-hero { max-width: none; } /* full-bleed hero */
.events-page .events-hero__inner { max-width: 1100px; }

/* ============================================================
   COUNTRY TABS
   ============================================================ */
.events-tabs {
    display: flex;
    gap: 0;
    padding: 1rem 1.25rem 0;
    border-bottom: 2px solid var(--evt-border);
}
.events-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    color: var(--evt-text-muted);
    background: var(--evt-bg);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--evt-radius) var(--evt-radius) 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.events-tab:hover {
    color: var(--evt-text);
    background: var(--evt-bg-soft);
}
.events-tab:focus-visible {
    outline: none;
    box-shadow: var(--evt-focus-ring);
}
.events-tab--active {
    color: var(--evt-text);
    background: var(--evt-bg);
    border-color: var(--evt-border);
    border-bottom-color: var(--evt-bg);
    cursor: default;
}

/* ============================================================
   MONTH NAV
   ============================================================ */
.events-monthnav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--evt-border);
}
.events-monthnav__title {
    margin: 0;
    text-align: center;
    font-family: "Barlow Condensed", Barlow, system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    color: var(--evt-text);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.events-monthnav__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    color: var(--evt-text);
    background: var(--evt-bg);
    border: 1px solid var(--evt-border);
    border-radius: var(--evt-radius);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
    justify-self: start;
}
.events-monthnav__btn--next { justify-self: end; }
.events-monthnav__btn:hover {
    background: var(--evt-bg-soft);
    border-color: var(--evt-border-hover);
}
.events-monthnav__btn:focus-visible {
    outline: none;
    box-shadow: var(--evt-focus-ring);
    border-color: var(--evt-primary);
}

.events-today-shortcut {
    text-align: center;
    padding: 0.75rem 1.25rem 0;
}

/* ============================================================
   CALENDAR GRID
   ============================================================ */
.events-calendar {
    padding: 1.5rem 1.25rem;
}
.events-calendar__inner {
    background: var(--evt-bg);
    border: 1px solid var(--evt-border);
    border-radius: var(--evt-radius);
    overflow: hidden;
    box-shadow: var(--evt-shadow-sm);
}

/* Day-of-week header row */
.events-calendar__head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--evt-bg-soft);
    border-bottom: 1px solid var(--evt-border);
}
.events-calendar__head-cell {
    padding: 0.625rem 0.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--evt-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-right: 1px solid var(--evt-border);
}
.events-calendar__head-cell:last-child { border-right: none; }
.events-calendar__head-full { display: inline; }
.events-calendar__head-abbr,
.events-calendar__head-mini { display: none; }

/* Grid */
.events-calendar__grid {
    display: grid;
    grid-template-rows: repeat(6, minmax(110px, auto));
}
.events-calendar__week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--evt-border);
}
.events-calendar__week:last-child { border-bottom: none; }

.events-calendar__cell {
    position: relative;
    padding: 0.4rem 0.4rem 0.5rem;
    background: var(--evt-bg);
    border-right: 1px solid var(--evt-border);
    min-height: 110px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.events-calendar__cell:last-child { border-right: none; }

/* Out-of-month day cells: keep readable but visibly subordinate */
.events-calendar__cell--out {
    background: #fafbfc;
    color: var(--evt-text-muted);
}
.events-calendar__cell--out .events-calendar__day-number time {
    color: #888;
}

.events-calendar__cell--today {
    background: var(--evt-today-bg);
    box-shadow: inset 0 -2px 0 var(--evt-today-line);
}
.events-calendar__cell--has-events {
    background: var(--evt-bg);
}
.events-calendar__cell--today.events-calendar__cell--has-events {
    background: var(--evt-today-bg);
}

.events-calendar__day-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--evt-text);
    line-height: 1;
}
.events-calendar__day-number time {
    display: inline-block;
    min-width: 1.5em;
    text-align: left;
}
.events-calendar__today-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--evt-today-line);
}

/* Chips */
.events-calendar__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.events-calendar__chip {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.25rem 0.4rem;
    /* --type-strong is set per-event-type via [data-event-type] rules at the
       bottom of this file. Falls back to neutral primary if no type matches. */
    background: var(--type-strong, var(--evt-primary));
    color: var(--evt-chip-text);
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.78rem;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
}
.events-calendar__chip:hover {
    filter: brightness(1.1);
}
.events-calendar__chip:focus-visible {
    outline: none;
    box-shadow: var(--evt-focus-ring);
}
.events-calendar__chip--more {
    background: var(--evt-bg-soft);
    color: var(--evt-text);
    border: 1px solid var(--evt-border);
    text-align: center;
    justify-content: center;
}
.events-calendar__chip-time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.events-calendar__chip-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   EVENTS LIST
   ============================================================ */
.events-list {
    padding: 0 1.25rem 3rem;
}
.events-list__heading {
    margin: 0 0 1.25rem;
    color: var(--evt-text);
    font-family: "Barlow Condensed", Barlow, system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.events-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Event card */
.events-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 1.25rem;
    background: var(--evt-bg);
    border: 1px solid var(--evt-border);
    /* Type-coloured left edge — the "training" cue. The 4px stripe is bold
       enough to register peripherally while scanning the list, so users learn
       the colour-to-type mapping passively. Falls back to neutral if no type. */
    border-left: 4px solid var(--type-strong, var(--evt-border));
    border-radius: var(--evt-radius);
    padding: 1.25rem;
    box-shadow: var(--evt-shadow-sm);
    scroll-margin-top: 80px;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.events-card:hover {
    box-shadow: var(--evt-shadow-md);
    border-color: var(--evt-border-hover);
    /* Preserve the type-coloured left edge on hover */
    border-left-color: var(--type-strong, var(--evt-border-hover));
}
.events-card:focus { outline: none; box-shadow: var(--evt-shadow-md), var(--evt-focus-ring); }
.events-card:target {
    border-color: var(--type-strong, var(--evt-primary));
    box-shadow: 0 0 0 2px var(--type-soft, rgba(10,74,138,0.2));
}

.events-card__date-block {
    text-align: center;
    background: var(--evt-bg-soft);
    border: 1px solid var(--evt-border);
    border-radius: var(--evt-radius);
    padding: 0.5rem 0.25rem;
    align-self: start;
}
.events-card__date-month {
    font-size: 0.75rem; font-weight: 700;
    color: var(--evt-accent); text-transform: uppercase;
    letter-spacing: 0.06em;
}
.events-card__date-day {
    font-family: "Barlow Condensed", Barlow, sans-serif;
    font-size: 2.25rem; font-weight: 700;
    line-height: 1; color: var(--evt-text);
    margin: 0.1rem 0;
}
.events-card__date-dow {
    font-size: 0.75rem; color: var(--evt-text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
}

.events-card__body { min-width: 0; }
.events-card__meta-row {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.events-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.2rem; font-weight: 700; line-height: 1.3;
    color: var(--evt-text);
}
.events-card__title a {
    color: inherit; text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.2s;
}
.events-card__title a:hover { background-size: 100% 1.5px; }
.events-card__title a:focus-visible { outline: none; box-shadow: var(--evt-focus-ring); border-radius: 2px; }

.events-card__facts {
    margin: 0 0 0.6rem;
    display: grid; gap: 0.15rem;
}
.events-card__fact { display: flex; gap: 0.5rem; flex-wrap: wrap; font-size: 0.95rem; }
.events-card__fact dt {
    color: var(--evt-text-muted); font-weight: 600; min-width: 5.5rem;
}
.events-card__fact dd { margin: 0; color: var(--evt-text); }
.events-card__snippet {
    color: var(--evt-text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0.5rem 0 0.85rem;
}
.events-card__actions {
    display: flex; flex-wrap: wrap; gap: 0.6rem;
    margin-top: 0.75rem;
}

/* ============================================================
   BADGES & PILLS
   ============================================================ */
.event-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    /* --type-soft / --type-border / --type-dark are set per type at the
       bottom of this file via [data-event-type] rules. */
    background: var(--type-soft, var(--evt-bg-soft));
    color: var(--type-dark, var(--evt-text));
    border: 1px solid var(--type-border, var(--evt-border));
}

.event-flag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    background: var(--evt-bg-soft);
    color: var(--evt-text-muted);
    border: 1px solid var(--evt-border);
}

/* ============================================================
   EMPTY STATES
   ============================================================ */
.events-empty {
    text-align: center;
    padding: 2.5rem 1.25rem;
    background: var(--evt-bg-soft);
    border: 1px dashed var(--evt-border);
    border-radius: var(--evt-radius);
}
.events-empty p { color: var(--evt-text-muted); margin: 0.5rem auto; max-width: 50ch; }

/* ============================================================
   EVENT DETAIL
   ============================================================ */
.event-detail__article {
    padding: 1.5rem 1.25rem 3rem;
}
.breadcrumbs ol {
    list-style: none; padding: 0; margin: 0 0 1rem;
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    font-size: 0.9rem; color: var(--evt-text-muted);
}
.breadcrumbs li:not(:last-child)::after {
    content: "›"; padding-left: 0.4rem; color: var(--evt-text-muted);
}
.breadcrumbs a { color: var(--evt-primary); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--evt-text); font-weight: 600; }

.event-detail__head { margin-bottom: 1.5rem; }
.event-detail__meta-row {
    display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem;
}
.event-detail__title {
    margin: 0 0 0.4rem;
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
    font-weight: 800; line-height: 1.2;
    color: var(--evt-text);
}
.event-detail__when {
    margin: 0;
    color: var(--evt-text-muted);
    font-size: 1.05rem;
}

.event-detail__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    margin-top: 1rem;
}

.event-detail__main { min-width: 0; }
.event-detail__description {
    color: var(--evt-text);
    font-size: 1.05rem;
    line-height: 1.65;
}
.event-detail__description h2,
.event-detail__description h3,
.event-detail__description h4 {
    margin: 1.5em 0 0.5em;
    color: var(--evt-text);
}
.event-detail__description img { max-width: 100%; height: auto; border-radius: var(--evt-radius); }
.event-detail__description a { color: var(--evt-primary); }
.event-detail__description a:hover { color: var(--evt-primary-dark); }
.event-detail__description ul,
.event-detail__description ol { padding-left: 1.5rem; }
.event-detail__description blockquote {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--evt-primary);
    background: var(--evt-bg-soft);
    color: var(--evt-text-muted);
    font-style: italic;
}
.event-detail__description table {
    width: 100%; border-collapse: collapse; margin: 1rem 0;
}
.event-detail__description th,
.event-detail__description td {
    border: 1px solid var(--evt-border);
    padding: 0.5rem 0.75rem;
    text-align: left;
}
.event-detail__description th { background: var(--evt-bg-soft); font-weight: 700; }

.event-detail__register-row {
    margin-top: 2rem;
    padding: 1.25rem;
    background: var(--evt-bg-soft);
    border: 1px solid var(--evt-border);
    border-radius: var(--evt-radius);
}
.event-detail__register-help {
    margin: 0.75rem 0 0;
    color: var(--evt-text-muted);
    font-size: 0.9rem;
}

.event-detail__sidebar { min-width: 0; }
.event-detail__panel {
    background: var(--evt-bg);
    border: 1px solid var(--evt-border);
    border-radius: var(--evt-radius);
    padding: 1.25rem;
    box-shadow: var(--evt-shadow-sm);
    position: sticky;
    top: 1rem;
}
.event-detail__panel-heading {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--evt-text-muted);
}
.event-detail__facts { margin: 0 0 1rem; display: grid; gap: 0.65rem; }
.event-detail__fact dt {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--evt-text-muted);
    font-weight: 700;
    margin-bottom: 0.1rem;
}
.event-detail__fact dd {
    margin: 0;
    color: var(--evt-text);
    font-size: 0.95rem;
    line-height: 1.45;
}
.event-detail__fact a {
    color: var(--evt-primary);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}
.event-detail__fact a:hover { color: var(--evt-primary-dark); }

.event-detail__foot { margin-top: 2rem; }

/* ============================================================
   FORM (admin-add / admin-edit shared)
   ============================================================ */
.event-form { background: var(--evt-bg); }

.event-form__section {
    background: var(--evt-bg);
    border: 1px solid var(--evt-border);
    border-radius: var(--evt-radius);
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.25rem;
    box-shadow: var(--evt-shadow-sm);
}
.event-form__section legend {
    padding: 0 0.5rem;
    font-family: "Barlow Condensed", Barlow, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--evt-text);
}

.event-form__grid {
    display: grid;
    gap: 1rem;
}
.event-form__grid--2col { grid-template-columns: repeat(2, 1fr); }
.event-form__grid--4col { grid-template-columns: repeat(4, 1fr); }
.event-form__col-span-2 { grid-column: span 2; }

.form-field { display: flex; flex-direction: column; }
.form-field label {
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--evt-text);
    font-size: 0.95rem;
}
.form-field input[type="text"],
.form-field input[type="url"],
.form-field input[type="email"],
.form-field input[type="search"],
.form-field input[type="date"],
.form-field input[type="time"],
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--evt-bg);
    color: var(--evt-text);
    border: 1px solid var(--evt-border);
    border-radius: var(--evt-radius);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: var(--evt-border-hover); }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
    outline: none;
    border-color: var(--evt-primary);
    box-shadow: var(--evt-focus-ring);
}
.form-field--checkbox {
    flex-direction: row; align-items: flex-start; gap: 0.6rem;
    padding: 0.65rem 0;
}
.form-field--checkbox input[type="checkbox"] {
    width: 1.15rem; height: 1.15rem; margin-top: 0.15rem;
    accent-color: var(--evt-primary);
}
.form-field--checkbox label { font-weight: 600; margin: 0; cursor: pointer; }
.form-field--checkbox .field-help { flex-basis: 100%; margin-left: 1.75rem; }

.field-help {
    color: var(--evt-text-help);
    font-size: 0.85rem;
    margin: 0.3rem 0 0;
}
.field-error {
    color: var(--evt-error-fg);
    font-size: 0.85rem;
    margin: 0.3rem 0 0;
    font-weight: 600;
}
.has-error input,
.has-error select,
.has-error textarea {
    border-color: var(--evt-error-fg);
}

.req { color: var(--evt-error-fg); margin-left: 0.15rem; }

.event-form__where--virtual {
    background: linear-gradient(to right, rgba(10,74,138,0.03), transparent);
}

.event-form__submit-row {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    padding: 1rem 0;
}

/* ============================================================
   BUTTONS  (used by both admin and public)
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    border-radius: var(--evt-radius);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.btn:focus-visible { outline: none; box-shadow: var(--evt-focus-ring); }
.btn--primary {
    background: var(--evt-primary); color: #fff;
    border-color: var(--evt-primary);
}
.btn--primary:hover { background: var(--evt-primary-dark); border-color: var(--evt-primary-dark); }
.btn--secondary {
    background: var(--evt-bg); color: var(--evt-text);
    border-color: var(--evt-border-hover);
}
.btn--secondary:hover { background: var(--evt-bg-soft); }
.btn--ghost {
    background: transparent; color: var(--evt-text-muted);
    border-color: transparent;
}
.btn--ghost:hover { background: var(--evt-bg-soft); color: var(--evt-text); }
.btn--danger {
    background: var(--evt-accent); color: #fff;
    border-color: var(--evt-accent);
}
.btn--danger:hover { filter: brightness(0.92); }
.btn--sm { padding: 0.35rem 0.7rem; font-size: 0.85rem; }
.btn--lg { padding: 0.85rem 1.5rem; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; }

/* ============================================================
   RESPONSIVE  (mobile-first refinements)
   ============================================================ */
@media (max-width: 768px) {
    .events-monthnav { grid-template-columns: 1fr; gap: 0.5rem; }
    .events-monthnav__title { font-size: 1.4rem; }
    .events-monthnav__btn,
    .events-monthnav__btn--next { justify-self: stretch; justify-content: center; }

    .events-calendar__head-cell { padding: 0.4rem 0.2rem; font-size: 0.7rem; }
    .events-calendar__head-full { display: none; }
    .events-calendar__head-abbr { display: inline; }

    .events-calendar__cell { min-height: 76px; padding: 0.3rem; }
    .events-calendar__day-number { font-size: 0.85rem; }
    .events-calendar__chip { font-size: 0.7rem; padding: 0.15rem 0.3rem; }
    .events-calendar__chip-time { display: none; }   /* save room on mobile */
    .events-calendar__chip-title { white-space: normal; }

    .events-card { grid-template-columns: 1fr; gap: 0.75rem; }
    .events-card__date-block {
        display: inline-grid;
        grid-template-columns: auto auto auto;
        gap: 0.5rem;
        align-items: center;
        padding: 0.4rem 0.75rem;
        text-align: left;
    }
    .events-card__date-day { font-size: 1.4rem; }

    .event-detail__layout { grid-template-columns: 1fr; }
    .event-detail__panel { position: static; }

    .event-form__grid--2col,
    .event-form__grid--4col { grid-template-columns: 1fr; }
    .event-form__col-span-2 { grid-column: auto; }
}

@media (max-width: 480px) {
    .events-calendar__head-abbr { display: none; }
    .events-calendar__head-mini { display: inline; }
    .events-calendar__cell { min-height: 60px; }
    /* Cap visible chips on smallest screens to keep grid compact */
    .events-calendar__chips li:nth-child(n+3) { display: none; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .events-tabs, .events-monthnav, .events-today-shortcut,
    .events-card__actions, .event-detail__register-row,
    .event-detail__sidebar, .event-detail__foot { display: none; }
    .events-card { break-inside: avoid; box-shadow: none; }
    .events-page { color: #000; }
}

/* ============================================================
   EVENT TYPE COLOUR SYSTEM
   ----------------------------------------------------------------
   This section is the SINGLE source of truth for event-type colours.
   Each event type has a coordinated 4-colour palette that propagates
   through chip / badge / card border / detail accent automatically:

       --type-strong   solid background  (e.g. calendar chip bg)
       --type-soft     tinted background (e.g. badge bg, target glow)
       --type-border   matching border   (e.g. badge border)
       --type-dark     dark text         (e.g. badge text, chip-on-light)

   When adding a NEW event type:
     1. Add a row to the event_types lookup table with the chosen slug.
     2. Add a {emoji icon} entry in events_type_badge() in events-helpers.php
     3. Add a [data-event-type="your-slug"] block here with the 4 colours.
   No PHP changes are needed in chip/badge/card rendering.

   All chosen colours are AA-compliant when used in their assigned roles:
     - White text on --type-strong:   minimum 4.5:1 contrast
     - --type-dark text on --type-soft: minimum 4.5:1 contrast
   ============================================================ */

/* Webinar — blue family (digital / online / screen-based events). */
.events-card[data-event-type="webinar"],
.event-detail__article[data-event-type="webinar"],
.events-calendar__chip[data-event-type="webinar"],
.event-badge[data-event-type="webinar"],
.events-legend__chip[data-event-type="webinar"] {
    --type-strong: #1958ad;
    --type-soft:   #dde7f5;
    --type-border: #a4bcde;
    --type-dark:   #0c3f7e;
}

/* Job Fair — amber/orange family (warm, social, in-person events). */
.events-card[data-event-type="job-fair"],
.event-detail__article[data-event-type="job-fair"],
.events-calendar__chip[data-event-type="job-fair"],
.event-badge[data-event-type="job-fair"],
.events-legend__chip[data-event-type="job-fair"] {
    --type-strong: #a85a17;
    --type-soft:   #fbe9d4;
    --type-border: #e2b074;
    --type-dark:   #7a3e0f;
}

/* Future types — palette suggestions (uncomment when adding):

.events-card[data-event-type="networking"],
… { --type-strong: #2d7a47; --type-soft: #dcefe1; --type-border: #a6cdb1; --type-dark: #1d5a2c; }   // Green

.events-card[data-event-type="workshop"],
… { --type-strong: #6b3aa0; --type-soft: #ecdfff; --type-border: #c5acdf; --type-dark: #4a256e; }   // Purple

.events-card[data-event-type="conference"],
… { --type-strong: #0e6a73; --type-soft: #d6ecef; --type-border: #95c4ca; --type-dark: #064a52; }   // Teal
*/

/* ----- Detail page: type-coloured top accent strip ----- */
.event-detail__article {
    position: relative;
    padding-top: 1.75rem;       /* extra room for accent strip */
}
.event-detail__article::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--type-strong, var(--evt-primary));
    border-radius: var(--evt-radius) var(--evt-radius) 0 0;
}
/* Detail page sidebar panel: matching top accent */
.event-detail__article[data-event-type] .event-detail__panel {
    border-top: 3px solid var(--type-strong, var(--evt-primary));
}

/* ----- Legend: small colour key shown above the calendar ----- */
.events-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    padding: 0.65rem 1.25rem 0;
    font-size: 0.85rem;
    color: var(--evt-text-muted);
}
.events-legend__label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    color: var(--evt-text-muted);
}
.events-legend__items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.events-legend__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.55rem 0.2rem 0.4rem;
    border-radius: 999px;
    background: var(--type-soft, var(--evt-bg-soft));
    color: var(--type-dark, var(--evt-text));
    border: 1px solid var(--type-border, var(--evt-border));
    font-size: 0.8rem;
    font-weight: 600;
}
.events-legend__chip::before {
    content: "";
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--type-strong, var(--evt-primary));
    flex-shrink: 0;
}

/* On mobile, legend gets its own row line under the tabs */
@media (max-width: 480px) {
    .events-legend { padding: 0.5rem 1rem; gap: 0.3rem 0.6rem; }
    .events-legend__chip { font-size: 0.75rem; padding: 0.15rem 0.5rem 0.15rem 0.35rem; }
    .events-legend__chip::before { width: 0.6rem; height: 0.6rem; }
}