/* =============================================================================
   Public School Calendar — Professional Theme
   Arts Unlimited Southwest
   -----------------------------------------------------------------------------
   Drop-in stylesheet that gives the public-facing school calendar
   (route: /school-calendar/public) a modern, polished look.

   Activates with one <link> tag in app/Views/layouts/app.php — every selector
   below is scoped to .public-calendar-page so nothing else on the site is
   touched. Class names already exist in app/Views/public/school-calendar.php;
   no markup changes are required.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ---------- Page background ------------------------------------------------- */

body:has(.public-calendar-page) {
    background:
        radial-gradient(circle at 12% 6%,  rgba(14, 107, 92, 0.10) 0, transparent 35%),
        radial-gradient(circle at 88% 14%, rgba(35, 97, 180, 0.08) 0, transparent 38%),
        radial-gradient(circle at 70% 92%, rgba(216, 139, 50, 0.08) 0, transparent 36%),
        linear-gradient(180deg, #f6f3ec 0%, #eef4f1 100%);
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--pc-ink, #15233a);
}

/* ---------- Design tokens --------------------------------------------------- */
.public-calendar-page {
    /* Brand palette */
    --pc-brand:           #0e6b5c;
    --pc-brand-strong:    #0a5146;
    --pc-brand-soft:      rgba(14, 107, 92, 0.10);
    --pc-accent:          #d88b32;
    --pc-accent-soft:     rgba(216, 139, 50, 0.14);
    --pc-info:            #2361b4;
    --pc-info-soft:       rgba(35, 97, 180, 0.12);
    --pc-purple:          #7a4cc6;
    --pc-purple-soft:     rgba(122, 76, 198, 0.12);
    --pc-rose:            #c2185b;
    --pc-rose-soft:       rgba(194, 24, 91, 0.10);
    --pc-emerald:         #2e7d57;
    --pc-emerald-soft:    rgba(46, 125, 87, 0.12);
    --pc-amber:           #b9740b;
    --pc-amber-soft:      rgba(216, 139, 50, 0.16);

    /* Surfaces */
    --pc-surface:         #ffffff;
    --pc-surface-soft:    #f8faf9;
    --pc-surface-mute:    #f0f3f1;
    --pc-ink:             #15233a;
    --pc-ink-soft:        #3d4a63;
    --pc-muted:           #5e6b82;
    --pc-line:            rgba(20, 35, 58, 0.10);
    --pc-line-strong:     rgba(20, 35, 58, 0.18);

    /* Geometry */
    --pc-radius-xl:       22px;
    --pc-radius-lg:       18px;
    --pc-radius-md:       14px;
    --pc-radius-sm:       10px;
    --pc-radius-pill:     999px;

    /* Elevation */
    --pc-shadow-sm:       0 1px 2px rgba(20, 35, 58, .06);
    --pc-shadow-md:       0 10px 30px rgba(20, 35, 58, .08), 0 1px 2px rgba(20, 35, 58, .05);
    --pc-shadow-lg:       0 24px 50px rgba(20, 35, 58, .10), 0 2px 4px rgba(20, 35, 58, .05);
    --pc-shadow-hero:     0 30px 70px rgba(10, 81, 70, .28);

    /* Layout */
    width: min(1320px, calc(100% - 2.5rem)) !important;
    margin: 1.5rem auto 3rem !important;
    gap: 1.5rem !important;
    display: grid !important;
    place-items: stretch !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--pc-ink);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Typography ------------------------------------------------------ */
.public-calendar-page h1,
.public-calendar-page h2,
.public-calendar-page h3 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    color: var(--pc-ink);
    letter-spacing: -0.01em;
}
.public-calendar-page h1 { font-weight: 800; }
.public-calendar-page h2 { font-weight: 700; }
.public-calendar-page h3 { font-weight: 700; }
.public-calendar-page .lead {
    color: var(--pc-muted);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 60rem;
}
.public-calendar-page .eyebrow {
    color: var(--pc-brand);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    display: inline-block;
}
.public-calendar-page .muted-text { color: var(--pc-muted); }

/* ---------- Card baseline --------------------------------------------------- */
.public-calendar-page .card,
.public-calendar-page .public-school-contact-card,
.public-calendar-page .public-calendar-section,
.public-calendar-page .public-school-year-card,
.public-calendar-page .public-calendar-detail-card {
    background: var(--pc-surface) !important;
    border: 1px solid var(--pc-line) !important;
    border-radius: var(--pc-radius-xl) !important;
    box-shadow: var(--pc-shadow-md) !important;
    padding: 1.75rem !important;
    transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}

/* ---------- Contact strip --------------------------------------------------- */
.public-calendar-page .public-school-contact-card {
    padding: 1.4rem 1.75rem !important;
    background: linear-gradient(135deg, #ffffff 0%, var(--pc-surface-soft) 100%) !important;
    border: 1px solid var(--pc-line) !important;
    overflow: hidden;
    position: relative;
}
.public-calendar-page .public-school-contact-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--pc-brand) 0%, var(--pc-accent) 100%);
    border-radius: 5px 0 0 5px;
}
.public-calendar-page .public-school-contact-card__grid {
    grid-template-columns: minmax(280px, 1fr) minmax(260px, 1fr) !important;
    gap: 1rem 2rem !important;
    align-items: center;
}
.public-calendar-page .public-school-contact-card__brand h2 {
    font-size: clamp(1.5rem, 2.4vw, 1.95rem) !important;
    font-weight: 800;
    margin: 0.15rem 0 0 !important;
    color: var(--pc-ink);
}
.public-calendar-page .public-school-contact-card__brand .eyebrow {
    color: var(--pc-accent);
}
.public-calendar-page .public-school-contact-card__logo {
    width: clamp(72px, 9vw, 96px) !important;
    max-height: 96px !important;
    border-radius: 14px !important;
    border: 1px solid var(--pc-line) !important;
    box-shadow: var(--pc-shadow-sm) !important;
    background: #fff !important;
    padding: 0.4rem !important;
}
.public-calendar-page .public-school-contact-card__details p {
    color: var(--pc-ink-soft);
    font-size: 0.95rem;
}
.public-calendar-page .public-school-contact-card__details strong {
    color: var(--pc-brand-strong);
    font-weight: 700;
}

/* ---------- Hero ------------------------------------------------------------ */
.public-calendar-page .public-calendar-hero {
    background:
        radial-gradient(circle at 100% 0%, rgba(255,255,255,0.18) 0, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(216, 139, 50, 0.30) 0, transparent 55%),
        linear-gradient(135deg, #0a5146 0%, #0e6b5c 50%, #14826f 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--pc-radius-xl) !important;
    padding: 3rem 2.5rem !important;
    box-shadow: var(--pc-shadow-hero) !important;
    position: relative;
    overflow: hidden;
}
.public-calendar-page .public-calendar-hero::before {
    /* Subtle dotted-grid texture */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, black 30%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, black 30%, transparent 100%);
    pointer-events: none;
}
.public-calendar-page .public-calendar-hero > * { position: relative; z-index: 1; }
.public-calendar-page .public-calendar-hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
    line-height: 1.05;
    color: #fff !important;
    margin: 0.25rem 0 0.6rem !important;
    text-shadow: 0 2px 18px rgba(0,0,0,0.18);
}
.public-calendar-page .public-calendar-hero .lead {
    color: rgba(255,255,255,0.92) !important;
    font-size: 1.1rem !important;
    max-width: 56rem;
}

/* ---------- Section header (Monthly View / School Year View) --------------- */
.public-calendar-page .public-calendar-header {
    padding: 0.25rem 0.5rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: grid;
    gap: 0.4rem;
}
.public-calendar-page .public-calendar-header .title-with-icon {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.1rem 0 0.2rem;
}
.public-calendar-page .public-calendar-header h2 {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem) !important;
    margin: 0 !important;
}
.public-calendar-page .public-calendar-header .section-icon {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 14px;
    background: var(--pc-brand-soft);
    color: var(--pc-brand);
    font-size: 1.25rem;
}

/* ---------- Filter form ----------------------------------------------------- */
.public-calendar-page .school-calendar-filter-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto;
    gap: 0.85rem !important;
    align-items: end;
    padding: 1rem 1.2rem !important;
    background: var(--pc-surface-soft) !important;
    border: 1px solid var(--pc-line) !important;
    border-radius: var(--pc-radius-lg) !important;
    margin-bottom: 1.4rem !important;
}
.public-calendar-page .school-calendar-filter-grid label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--pc-muted);
}
.public-calendar-page .school-calendar-filter-grid select {
    height: 44px;
    padding: 0 0.85rem;
    border-radius: var(--pc-radius-md);
    border: 1px solid var(--pc-line-strong);
    background: #fff
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path fill='none' stroke='%2315233a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 5l4 4 4-4'/></svg>")
        no-repeat right 0.85rem center;
    background-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pc-ink);
    transition: border-color 150ms ease, box-shadow 150ms ease;
    padding-right: 2.5rem;
}
.public-calendar-page .school-calendar-filter-grid select:hover {
    border-color: rgba(14, 107, 92, 0.35);
}
.public-calendar-page .school-calendar-filter-grid select:focus {
    outline: none;
    border-color: var(--pc-brand);
    box-shadow: 0 0 0 4px var(--pc-brand-soft);
}
.public-calendar-page .school-calendar-filter-grid .button {
    height: 44px;
    padding: 0 1.4rem !important;
    background: linear-gradient(180deg, var(--pc-brand) 0%, var(--pc-brand-strong) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--pc-radius-md) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 14px rgba(10, 81, 70, 0.28);
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.public-calendar-page .school-calendar-filter-grid .button:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 10px 20px rgba(10, 81, 70, 0.34);
}

/* ---------- Monthly grid ---------------------------------------------------- */
.public-calendar-page .calendar-grid { gap: 0.55rem !important; margin-top: 0.4rem !important; }
.public-calendar-page .calendar-grid__weekdays,
.public-calendar-page .calendar-grid__week {
    gap: 0.55rem !important;
}
.public-calendar-page .calendar-grid__weekdays span {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--pc-muted);
    padding: 0.5rem 0 !important;
    background: transparent;
}
.public-calendar-page .calendar-grid__cell-link {
    border-radius: var(--pc-radius-md);
    transition: transform 150ms ease;
}
.public-calendar-page .calendar-grid__cell-link:hover {
    transform: translateY(-2px);
}
.public-calendar-page .calendar-grid__cell {
    min-height: 132px !important;
    background: var(--pc-surface) !important;
    border: 1px solid var(--pc-line) !important;
    border-radius: var(--pc-radius-md) !important;
    padding: 0.65rem 0.6rem 0.55rem !important;
    box-shadow: var(--pc-shadow-sm);
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
    position: relative;
    gap: 0.35rem !important;
}
.public-calendar-page .calendar-grid__cell-link:hover .calendar-grid__cell {
    border-color: rgba(14, 107, 92, 0.32);
    box-shadow: 0 8px 18px rgba(20, 35, 58, 0.10);
}
.public-calendar-page .calendar-grid__cell.is-muted {
    background: var(--pc-surface-mute) !important;
    opacity: 0.78;
}
.public-calendar-page .calendar-grid__cell.is-muted .calendar-grid__date { color: #98a3b8; }
.public-calendar-page .calendar-grid__cell.is-today {
    background: linear-gradient(180deg, #fffaf0 0%, #fff 60%) !important;
    border-color: var(--pc-accent) !important;
    box-shadow: 0 0 0 1px var(--pc-accent), var(--pc-shadow-sm) !important;
}
.public-calendar-page .calendar-grid__cell.is-today .calendar-grid__date {
    color: var(--pc-amber);
}
.public-calendar-page .calendar-grid__cell.is-today .calendar-grid__date::after {
    content: "Today";
    margin-left: 0.4rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #fff;
    background: var(--pc-accent);
    border-radius: var(--pc-radius-pill);
    padding: 0.12rem 0.45rem;
    vertical-align: middle;
}
.public-calendar-page .calendar-grid__cell.is-selected {
    border-color: var(--pc-brand) !important;
    background: linear-gradient(180deg, #f0f8f5 0%, #fff 65%) !important;
    box-shadow: 0 0 0 2px var(--pc-brand-soft), var(--pc-shadow-sm) !important;
}
.public-calendar-page .calendar-grid__date {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--pc-ink);
}
.public-calendar-page .calendar-grid__count {
    background: var(--pc-brand);
    color: #fff;
    font-size: 0.70rem;
    font-weight: 700;
    padding: 0.10rem 0.45rem;
    border-radius: var(--pc-radius-pill);
    min-width: 1.35rem;
    text-align: center;
    line-height: 1.4;
}
.public-calendar-page .calendar-empty {
    color: #a8b1c2;
    font-size: 0.74rem;
    font-weight: 500;
    align-self: end;
    text-align: center;
    padding: 0.2rem 0;
    opacity: 0;
    transition: opacity 150ms ease;
}
.public-calendar-page .calendar-grid__cell-link:hover .calendar-empty {
    opacity: 1;
}

/* ---------- Calendar chips (compact, color-coded) -------------------------- */
.public-calendar-page .calendar-chip {
    border-radius: 8px !important;
    padding: 0.32rem 0.45rem 0.36rem !important;
    font-size: 0.74rem !important;
    line-height: 1.30 !important;
    font-weight: 600;
    color: var(--pc-ink) !important;
    border-left: 3px solid var(--pc-brand);
    background: var(--pc-brand-soft) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.public-calendar-page .calendar-chip span {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--pc-muted) !important;
    margin-top: 0.05rem;
    letter-spacing: 0.02em;
}
.public-calendar-page .calendar-chip--class       { background: var(--pc-brand-soft) !important;   border-left-color: var(--pc-brand); }
.public-calendar-page .calendar-chip--meeting     { background: var(--pc-info-soft) !important;    border-left-color: var(--pc-info); }
.public-calendar-page .calendar-chip--deadline    { background: var(--pc-amber-soft) !important;   border-left-color: var(--pc-amber); }
.public-calendar-page .calendar-chip--announcement{ background: var(--pc-purple-soft) !important;  border-left-color: var(--pc-purple); }
.public-calendar-page .calendar-chip--assignment  { background: var(--pc-accent-soft) !important;  border-left-color: var(--pc-accent); }
.public-calendar-page .calendar-chip--billing     { background: var(--pc-rose-soft) !important;    border-left-color: var(--pc-rose); }
.public-calendar-page .calendar-chip.calendar-color--emerald { background: rgba(14, 107, 92, 0.12) !important; border-left-color: #0e6b5c; }
.public-calendar-page .calendar-chip.calendar-color--blue    { background: rgba(35, 97, 180, 0.13) !important; border-left-color: #2361b4; }
.public-calendar-page .calendar-chip.calendar-color--purple  { background: rgba(122, 76, 198, 0.13) !important; border-left-color: #7a4cc6; }
.public-calendar-page .calendar-chip.calendar-color--rose    { background: rgba(194, 24, 91, 0.12) !important; border-left-color: #c2185b; }
.public-calendar-page .calendar-chip.calendar-color--amber   { background: rgba(216, 139, 50, 0.16) !important; border-left-color: #b9740b; }
.public-calendar-page .calendar-chip.calendar-color--orange  { background: rgba(217, 108, 26, 0.14) !important; border-left-color: #d96c1a; }
.public-calendar-page .calendar-chip.calendar-color--teal    { background: rgba(13, 148, 136, 0.13) !important; border-left-color: #0d9488; }
.public-calendar-page .calendar-chip.calendar-color--cyan    { background: rgba(8, 145, 178, 0.13) !important; border-left-color: #0891b2; }
.public-calendar-page .calendar-chip.calendar-color--slate   { background: rgba(71, 85, 105, 0.13) !important; border-left-color: #475569; }
.public-calendar-page .calendar-chip.calendar-color--pink    { background: rgba(219, 39, 119, 0.12) !important; border-left-color: #db2777; }

/* ---------- School-year mini calendars ------------------------------------- */
.public-calendar-page .public-school-year-grid {
    display: grid !important;
    width: 100% !important;
    justify-self: stretch !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.1rem !important;
}
.public-calendar-page .public-school-year-card {
    padding: 1.2rem 1.2rem 1.1rem !important;
    gap: 0.75rem !important;
    border-radius: var(--pc-radius-lg) !important;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease !important;
}
.public-calendar-page .public-school-year-card:hover {
    transform: translateY(-3px);
    border-color: rgba(14, 107, 92, 0.30) !important;
    box-shadow: var(--pc-shadow-lg) !important;
}
.public-calendar-page .public-school-year-card.is-selected {
    border-color: var(--pc-brand) !important;
    box-shadow: 0 0 0 2px var(--pc-brand-soft), var(--pc-shadow-md) !important;
}
.public-calendar-page .public-school-year-card.is-selected::before {
    content: "Selected month";
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fff;
    background: var(--pc-brand);
    padding: 0.18rem 0.55rem;
    border-radius: var(--pc-radius-pill);
}
.public-calendar-page .public-school-year-card { position: relative; }
.public-calendar-page .public-school-year-card__title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700;
    letter-spacing: 0.18em !important;
    color: var(--pc-brand) !important;
    text-transform: uppercase;
    margin: 0 !important;
}
.public-calendar-page .public-school-year-miniweekdays span {
    font-size: 0.64rem !important;
    letter-spacing: 0.10em;
    color: #99a3b6 !important;
}
.public-calendar-page .public-school-year-day {
    min-height: 2rem !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--pc-ink-soft) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.public-calendar-page .public-school-year-day:hover {
    background: var(--pc-surface-mute) !important;
    transform: none !important;
    border-color: var(--pc-line) !important;
}
.public-calendar-page .public-school-year-day.is-muted {
    color: #c4cad6 !important;
    opacity: 1 !important;
}
.public-calendar-page .public-school-year-day.has-events {
    background: var(--pc-brand-soft) !important;
    color: var(--pc-brand-strong) !important;
    font-weight: 700 !important;
    position: relative;
}
.public-calendar-page .public-school-year-day.has-events.calendar-color--emerald { background: rgba(14, 107, 92, 0.12) !important; color: #0a5146 !important; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--blue    { background: rgba(35, 97, 180, 0.13) !important; color: #1d4f93 !important; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--purple  { background: rgba(122, 76, 198, 0.13) !important; color: #5f35a6 !important; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--rose    { background: rgba(194, 24, 91, 0.12) !important; color: #9f123f !important; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--amber   { background: rgba(216, 139, 50, 0.16) !important; color: #92400e !important; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--orange  { background: rgba(217, 108, 26, 0.14) !important; color: #9a3412 !important; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--teal    { background: rgba(13, 148, 136, 0.13) !important; color: #0f766e !important; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--cyan    { background: rgba(8, 145, 178, 0.13) !important; color: #0e7490 !important; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--slate   { background: rgba(71, 85, 105, 0.13) !important; color: #334155 !important; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--pink    { background: rgba(219, 39, 119, 0.12) !important; color: #be185d !important; }
.public-calendar-page .public-school-year-day.has-events::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--pc-brand);
}
.public-calendar-page .public-school-year-day.has-events.calendar-color--emerald::after { background: #0e6b5c; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--blue::after { background: #2361b4; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--purple::after { background: #7a4cc6; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--rose::after { background: #c2185b; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--amber::after { background: #b9740b; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--orange::after { background: #d96c1a; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--teal::after { background: #0d9488; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--cyan::after { background: #0891b2; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--slate::after { background: #475569; }
.public-calendar-page .public-school-year-day.has-events.calendar-color--pink::after { background: #db2777; }
.public-calendar-page .public-school-year-day.is-selected {
    background: var(--pc-brand) !important;
    color: #fff !important;
    border-color: var(--pc-brand) !important;
    box-shadow: 0 4px 10px rgba(14, 107, 92, 0.30) !important;
}
.public-calendar-page .public-school-year-day.is-selected::after {
    background: #fff !important;
}
.public-calendar-page .public-school-year-summary {
    margin-top: 0.3rem !important;
    padding: 0.85rem 0 0 !important;
    border-top: 1px dashed var(--pc-line) !important;
    gap: 0.55rem !important;
}
.public-calendar-page .public-school-year-summary .eyebrow {
    font-size: 0.66rem;
    color: var(--pc-muted);
    letter-spacing: 0.15em;
}
.public-calendar-page .public-school-year-summary__count {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem !important;
    color: var(--pc-ink);
    font-weight: 700;
}
.public-calendar-page .public-school-year-summary__list {
    list-style: none !important;
    padding: 0 !important;
    gap: 0.4rem !important;
    font-size: 0.86rem;
    color: var(--pc-ink-soft);
}
.public-calendar-page .public-school-year-summary__list li {
    padding: 0.4rem 0.55rem;
    background: var(--pc-surface-soft);
    border-radius: 8px;
    border-left: 3px solid var(--pc-brand);
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.public-calendar-page .public-school-year-summary__list strong {
    color: var(--pc-brand-strong);
    margin-right: 0.25rem;
}
.public-calendar-page .calendar-summary-dot,
.public-calendar-page .calendar-event-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    background: #0e6b5c;
    box-shadow: 0 0 0 3px rgba(14, 107, 92, 0.1);
}
.public-calendar-page .calendar-summary-dot { margin-right: 0.25rem; }
.public-calendar-page .calendar-dot--emerald { background: #0e6b5c; box-shadow: 0 0 0 3px rgba(14, 107, 92, 0.1); }
.public-calendar-page .calendar-dot--blue { background: #2361b4; box-shadow: 0 0 0 3px rgba(35, 97, 180, 0.1); }
.public-calendar-page .calendar-dot--purple { background: #7a4cc6; box-shadow: 0 0 0 3px rgba(122, 76, 198, 0.1); }
.public-calendar-page .calendar-dot--rose { background: #c2185b; box-shadow: 0 0 0 3px rgba(194, 24, 91, 0.1); }
.public-calendar-page .calendar-dot--amber { background: #b9740b; box-shadow: 0 0 0 3px rgba(216, 139, 50, 0.12); }
.public-calendar-page .calendar-dot--orange { background: #d96c1a; box-shadow: 0 0 0 3px rgba(217, 108, 26, 0.1); }
.public-calendar-page .calendar-dot--teal { background: #0d9488; box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1); }
.public-calendar-page .calendar-dot--cyan { background: #0891b2; box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1); }
.public-calendar-page .calendar-dot--slate { background: #475569; box-shadow: 0 0 0 3px rgba(71, 85, 105, 0.1); }
.public-calendar-page .calendar-dot--pink { background: #db2777; box-shadow: 0 0 0 3px rgba(219, 39, 119, 0.1); }

/* ---------- Selected day details card -------------------------------------- */
.public-calendar-page .public-calendar-detail-card {
    background: linear-gradient(180deg, #ffffff 0%, var(--pc-surface-soft) 100%) !important;
    padding: 1.85rem !important;
}
.public-calendar-page .public-calendar-detail-card .title-with-icon {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.35rem;
}
.public-calendar-page .public-calendar-detail-card .title-with-icon .section-icon {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 14px;
    background: var(--pc-accent-soft);
    color: var(--pc-amber);
    font-size: 1.25rem;
}
.public-calendar-page .public-calendar-detail-card h2 {
    margin: 0;
    font-size: clamp(1.4rem, 2.2vw, 1.8rem) !important;
}
.public-calendar-page .public-calendar-detail-item {
    grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.7fr) !important;
    gap: 1.4rem !important;
    padding: 1.25rem !important;
    border-radius: var(--pc-radius-lg) !important;
    border: 1px solid var(--pc-line) !important;
    background: #fff !important;
    box-shadow: var(--pc-shadow-sm);
    transition: box-shadow 200ms ease;
    position: relative;
}
.public-calendar-page .public-calendar-detail-item:hover {
    box-shadow: var(--pc-shadow-md);
}
.public-calendar-page .public-calendar-detail-item::before {
    content: "";
    position: absolute;
    inset: 1.25rem auto 1.25rem 0;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--pc-brand), var(--pc-accent));
}
.public-calendar-page .public-calendar-detail-item.calendar-color--emerald::before { background: #0e6b5c; }
.public-calendar-page .public-calendar-detail-item.calendar-color--blue::before { background: #2361b4; }
.public-calendar-page .public-calendar-detail-item.calendar-color--purple::before { background: #7a4cc6; }
.public-calendar-page .public-calendar-detail-item.calendar-color--rose::before { background: #c2185b; }
.public-calendar-page .public-calendar-detail-item.calendar-color--amber::before { background: #b9740b; }
.public-calendar-page .public-calendar-detail-item.calendar-color--orange::before { background: #d96c1a; }
.public-calendar-page .public-calendar-detail-item.calendar-color--teal::before { background: #0d9488; }
.public-calendar-page .public-calendar-detail-item.calendar-color--cyan::before { background: #0891b2; }
.public-calendar-page .public-calendar-detail-item.calendar-color--slate::before { background: #475569; }
.public-calendar-page .public-calendar-detail-item.calendar-color--pink::before { background: #db2777; }
.public-calendar-page .public-calendar-detail-item__copy {
    padding-left: 0.6rem;
    gap: 0.55rem !important;
}
.public-calendar-page .public-calendar-detail-item .list-row__title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--pc-ink);
    margin: 0;
}
.public-calendar-page .public-calendar-detail-item .muted-text {
    color: var(--pc-muted);
    font-size: 0.92rem;
}
.public-calendar-page .public-calendar-flyer-image {
    border-radius: var(--pc-radius-md) !important;
    border: 1px solid var(--pc-line) !important;
    box-shadow: var(--pc-shadow-md) !important;
}

/* ---------- Buttons (event link, calendar add, etc.) ----------------------- */
.public-calendar-page .widget-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
.public-calendar-page .button.secondary {
    background: #fff !important;
    color: var(--pc-brand-strong) !important;
    border: 1px solid var(--pc-line-strong) !important;
    border-radius: var(--pc-radius-pill) !important;
    padding: 0.5rem 1rem !important;
    min-height: auto !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    box-shadow: var(--pc-shadow-sm);
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease, color 150ms ease;
}
.public-calendar-page .button.secondary:hover {
    background: var(--pc-brand) !important;
    border-color: var(--pc-brand) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* ---------- Empty state ----------------------------------------------------- */
.public-calendar-page .empty-state {
    text-align: center;
    padding: 2rem 1rem !important;
    background: var(--pc-surface-soft);
    border: 1px dashed var(--pc-line-strong);
    border-radius: var(--pc-radius-lg);
    display: grid;
    gap: 0.4rem;
}
.public-calendar-page .empty-state__title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem;
    color: var(--pc-ink);
}
.public-calendar-page .empty-state .muted-text { color: var(--pc-muted); }

/* ---------- Upcoming events strip ------------------------------------------ */
.public-calendar-page .school-calendar-upcoming h2 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.4rem !important;
    margin: 0 0 1rem !important;
}
.public-calendar-page .school-calendar-upcoming h2 .mini-icon {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 12px;
    background: var(--pc-info-soft);
    color: var(--pc-info);
    font-size: 1rem;
}
.public-calendar-page .school-calendar-upcoming .stack-list {
    display: grid;
    gap: 0.6rem;
}
.public-calendar-page .school-calendar-upcoming .list-row {
    align-items: center;
    padding: 0.95rem 1.1rem !important;
    border-radius: var(--pc-radius-md);
    border: 1px solid var(--pc-line);
    background: #fff;
    box-shadow: var(--pc-shadow-sm);
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    gap: 1rem !important;
}
.public-calendar-page .school-calendar-upcoming .list-row:hover {
    border-color: rgba(14, 107, 92, 0.28);
    transform: translateX(2px);
    box-shadow: var(--pc-shadow-md);
}
.public-calendar-page .school-calendar-upcoming .list-row__title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--pc-ink);
    margin: 0 0 0.1rem;
}
.public-calendar-page .school-calendar-upcoming .badge {
    border-radius: var(--pc-radius-pill) !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 0.32rem 0.7rem !important;
    background: var(--pc-brand-soft) !important;
    color: var(--pc-brand-strong) !important;
}

/* ---------- Stack list (used inside detail card) --------------------------- */
.public-calendar-page .stack-list {
    display: grid;
    gap: 0.85rem;
}

/* ---------- Responsive ------------------------------------------------------ */
@media (max-width: 980px) {
    .public-calendar-page {
        width: calc(100% - 1.25rem) !important;
        gap: 1.1rem !important;
        margin: 1rem auto 2rem !important;
    }
    .public-calendar-page .card,
    .public-calendar-page .public-school-contact-card,
    .public-calendar-page .public-calendar-section,
    .public-calendar-page .public-calendar-detail-card {
        padding: 1.25rem !important;
    }
    .public-calendar-page .public-calendar-hero { padding: 2.2rem 1.4rem !important; }
    .public-calendar-page .public-school-contact-card__grid {
        grid-template-columns: 1fr !important;
    }
    .public-calendar-page .public-school-year-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .public-calendar-page .public-calendar-detail-item {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    .public-calendar-page .public-school-year-grid {
        grid-template-columns: 1fr !important;
    }
    .public-calendar-page .calendar-grid__weekdays { display: none !important; }
    .public-calendar-page .calendar-grid__week {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    .public-calendar-page .calendar-grid__cell {
        min-height: auto !important;
        padding: 0.85rem 1rem !important;
    }
    .public-calendar-page .calendar-grid__cell::before {
        content: attr(data-weekday-short);
        display: inline-block;
        margin-right: 0.55rem;
        font-size: 0.66rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.10em;
        color: var(--pc-muted);
        vertical-align: middle;
    }
    .public-calendar-page .calendar-grid__cell.is-muted { display: none !important; }
    .public-calendar-page .public-calendar-hero h1 { font-size: 2rem !important; }
    .public-calendar-page .school-calendar-upcoming .list-row {
        flex-direction: column;
        align-items: flex-start !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-calendar-page *,
    .public-calendar-page *::before,
    .public-calendar-page *::after {
        transition: none !important;
        animation: none !important;
    }
    .public-calendar-page .calendar-grid__cell-link:hover {
        transform: none !important;
    }
}