/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #113E36;
    background: #fff;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

:root {
    --green-dark: #113E36;
    --green-deep: #07483D;
    --green-mid: #2B524B;
    --green-text: #1B4A40;
    --gold: #DECB53;
    --cream: #F5F6EB;
    --cream-2: #EAF1DD;
    --cream-3: #EEF6F5;
    --teal-light: #D7E5E3;
    --ink: #113E36;
    --muted: #6B6B6B; /* was #B0B0B0 (2.16:1 on white); #6B6B6B keeps ≥4.5:1 on white and the cream/teal tints */
    --border-soft: #E5E5E5;
    --dot-active: #9CC890;
}

/* Let Bootstrap own the container: its own responsive max-widths (540/720/960/
   1140/1320) and centering apply, with no theme override. The horizontal padding
   is the one deliberate deviation — several layouts use `.row.g-5`, whose -24px
   negative margins need at least that much padding to sit inside; Bootstrap's
   default 12px lets them poke ~12px past the viewport. */
.container { padding-right: 24px; padding-left: 24px; }

/* ---------- HERO (cream wedge + image, exactly like coltsneck.org) ---------- */
.hero {
    position: relative;
    min-height: 780px;
    overflow: visible;
    isolation: isolate;
}
/* Cream layer underneath */
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--cream-2);
    clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);
    z-index: -2;
}
/* Image layer on top, clipped at bottom-left so cream shows through */
.hero-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
    z-index: -1;
}
.hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.25) 100%);
}

/* ---------- Floating Header Card ---------- */
.site-header { position: relative; z-index: 20; padding: 12px 0 0; }
.header-card {
    position: relative;
    display: grid;
    grid-template-columns: 190px 1fr;
    align-items: stretch;
    gap: 0;
    min-height: 164px;
}
.header-logo {
    position: absolute;
    left: 0; top: 0;
    width: 164px; height: 164px;
    z-index: 2;
}
.header-logo img { width: 100%; height: 100%; object-fit: contain; }
.header-right {
    grid-column: 2 / -1;
    background: #fff;
    border-radius: 4px;
    overflow: visible;
    position: relative;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    /* Vertically centre the top bar + main nav block inside the 164px card height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
}
.header-top-bar {
    background: var(--green-deep);
    color: #fff;
    padding: 10px 22px;
}
.top-nav {
    list-style: none; margin: 0; padding: 0;
    display: flex; justify-content: flex-end; align-items: center;
    gap: 14px;
    font-size: 13px;
}
.top-nav a { color: #fff; opacity: .95; }
.top-nav a:hover { opacity: 1; text-decoration: underline; }
.top-nav .sep { opacity: .5; }

.main-nav { padding: 0; }
.main-menu {
    list-style: none; margin: 0; padding: 0 18px;
    display: flex; justify-content: center; align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}
.main-menu li { position: relative; }
.main-menu a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    color: var(--green-deep);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .2px;
    transition: color .2s;
}
.main-menu a:hover { color: var(--gold); }
.main-menu i { font-size: 11px; opacity: .85; }
.mobile-toggle {
    display: none; background: transparent; border: 0; width: 44px; height: 44px;
    position: absolute; right: 20px; top: 22px;
    flex-direction: column; justify-content: center; gap: 5px;
}
.mobile-toggle span { display: block; width: 26px; height: 2px; background: var(--green-deep); border-radius: 2px; }

/* ---------- Hero content (welcome title + search) ---------- */
.hero-container {
    position: relative;
    padding-top: 110px;
    padding-bottom: 160px;
}
.hero-content { max-width: 760px; color: #fff; }
.hero-eyebrow {
    display: inline-block;
    color: #fff;
    font-weight: 400;
    letter-spacing: 8px;
    font-size: 22px;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.hero-title {
    font-size: clamp(36px, 5.2vw, 60px);
    margin: 0 0 32px;
    color: #fff;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.hero-search {
    position: relative;
    max-width: 460px;
    background: rgba(255,255,255,.55);
    border-radius: 40px;
    padding: 0 6px 0 22px;
    display: flex; align-items: center;
    height: 50px;
}
.hero-search input {
    flex: 1;
    border: 0; background: transparent;
    padding: 8px;
    font: inherit;
    color: #fff;
    letter-spacing: 1px;
    font-size: 14px;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
}
.hero-search input::placeholder { color: #fff; letter-spacing: 1px; opacity: .9; }
.hero-search button {
    width: 44px; height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.hero-search button:hover { filter: brightness(.95); }

/* ---------- Hero action circles straddling the wedge ----------
   Each circle sits half on the dark hero image and half on the cream wedge.
   The image clip-path bottom diagonal runs from y=80% on the left to y=100% on the right,
   so we anchor .hero-actions to ~72% from top and stagger each circle further down to
   follow that diagonal. */
.hero-actions {
    position: absolute;
    left: 0; right: 0;
    /* The image clip diagonal runs from y=80% on the left to y=100% on the right.
       Anchoring the row at top:77% keeps each circle straddling the diagonal — half on
       the dark image, half on the cream wedge — parallel to the image edge. */
    top: 77%;
    z-index: 5;
}
.hero-actions .container {
    position: relative;
    /* Keep the icons inside the regular .container so they don't bleed to the edges
       of the hero on wide viewports. */
    max-width: 1200px;
    padding: 0 24px;
}
.action-circles {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.action-item {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    text-align: center;
    color: var(--green-deep);
    transition: transform .2s;
}
.action-item:nth-child(1) { margin-top: -25px; }
.action-item:nth-child(2) { margin-top: 0; }
.action-item:nth-child(3) { margin-top: 30px; }
.action-item:nth-child(4) { margin-top: 60px; }
.action-item:nth-child(5) { margin-top: 90px; }
.action-circle {
    width: 116px; aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--green-deep);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 40px;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
    /* Slow 3s ease on hover for background, transform and shadow */
    transition: background 3s ease, transform 3s ease, box-shadow 3s ease;
}
.action-item:hover .action-circle {
    background: #869B92;
    transform: scale(1.06);
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.action-label { font-weight: 700; font-size: 14px; color: var(--green-deep); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .3px;
    transition: transform .15s, background .2s, color .2s, box-shadow .2s;
    border: 2px solid transparent;
    cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: var(--green-deep); }
.btn-gold:hover { filter: brightness(.95); }

/* View Full Calendar + See all News — exact spec from live site, no hover state */
.calendar-cta .btn-gold,
.news-header .btn-gold {
    padding: 8px 16px;
    background: #DECB53;
    border-radius: 8px;
    transition: unset;
    border-bottom: none;
    font-size: 17px;
    font-weight: 700;
    color: #07483D;
}
.calendar-cta .btn-gold:hover,
.news-header .btn-gold:hover {
    background: #DECB53;
    color: #07483D;
    transform: none;
    filter: none;
}
.btn-gold-outline { background: transparent; color: var(--green-deep); border-color: var(--gold); }
.btn-gold-outline:hover { background: var(--gold); }

/* ---------- Section Titles ---------- */
.section-title {
    font-size: 40px;
    line-height: 1.05;
    margin: 0 0 18px;
    color: var(--green-deep);
    font-weight: 900;
    text-transform: uppercase;
    display: flex; flex-direction: column;
}
.section-title .title-spaced { letter-spacing: 10px; font-weight: 400; font-size: .8em; margin-top: 4px; }

.badge-dark {
    display: inline-block;
    background: var(--green-deep);
    color: #fff;
    padding: 5px 15px;
    border-radius: 3px;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* ---------- Quick Links — bordered table-style row ---------- */
.quick-links { padding: 100px 0 70px; background: #fff; }
.ql-title {
    margin: 0 0 28px;
    font-size: 40px;
    color: var(--green-deep);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.ql-table {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 2px solid var(--border-soft);
    border-radius: 10px;
    /* No overflow:hidden so hovered cells can scale up beyond the table bounds */
}
.ql-cell {
    position: relative;
    padding: 28px 22px 70px;
    min-height: 200px;
    color: var(--green-deep);
    background: #fff;
    /* Slow transition so the scale-up feels smooth and intentional */
    transition: background .4s ease, color .4s ease, transform .4s ease, box-shadow .4s ease, border-radius .4s ease;
    display: block;
    transform-origin: center;
    will-change: transform;
}
.ql-cell:not(:last-child) { border-right: 2px solid var(--border-soft); }
.ql-cell-title {
    margin: 0 0 8px;
    color: var(--green-deep);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}
.ql-cell-sub {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}
.ql-cell-icon {
    position: absolute;
    left: 22px;
    bottom: 22px;
    font-size: 40px;
    color: var(--teal-light);
    line-height: 1;
    transition: color .2s;
}
.ql-cell:hover {
    background: var(--green-deep);
    color: var(--gold);
    transform: scale(1.1);
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(7, 72, 61, 0.25);
    z-index: 2;
}
.ql-cell:hover .ql-cell-title { color: var(--gold); }
.ql-cell:hover .ql-cell-sub { color: #fff; }
.ql-cell:hover .ql-cell-icon { color: var(--gold); }

/* ---------- Calendar Section ---------- */
.calendar-section {
    position: relative;
    background: linear-gradient(180deg, rgba(155, 187, 89, 0.26) 0%, rgba(240, 246, 240, 0) 100%);
    padding: 180px 0 60px;
    isolation: isolate;
}
/* Wavy decorative band at the top — matches live site events-before.png */
.calendar-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-image: url('/assets/images/events-before.png');
    background-position: center top;
    background-size: 100% auto;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
}
.calendar-wrap { position: relative; padding-top: 50px; }
.calendar-date-pill {
    display: inline-block;
    background: var(--green-deep);
    color: #fff;
    padding: 8px 14px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 14px;
}
.calendar-no-events {
    background: rgba(31,77,51,.08);
    border-radius: 6px;
    padding: 16px 18px;
    color: var(--muted);
    display: flex; align-items: center; gap: 12px;
    margin-top: 18px;
}
.no-events-icon {
    width: 28px; height: 28px;
    background: rgba(31,77,51,.15);
    color: var(--green-deep);
    border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
}
.calendar-card {
    background: #fff;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 10px 40px rgba(0,0,0,.06);
}
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.calendar-header h3 { margin: 0; font-size: 22px; color: var(--green-deep); font-weight: 400; }
.calendar-header h3 strong { font-weight: 800; }
.calendar-nav { display: flex; gap: 6px; }
.calendar-nav button {
    width: 28px; height: 28px;
    border: 0; background: transparent;
    border-radius: 4px;
    color: var(--green-deep);
    display: inline-flex; align-items: center; justify-content: center;
}
.calendar-nav button:hover { background: var(--cream); }
.mini-calendar { width: 100%; border-collapse: collapse; font-size: 12px; }
.mini-calendar th {
    color: #8b9489;
    font-weight: 600; font-size: 10px; letter-spacing: 1px;
    padding: 8px 0;
    text-align: center;
}
.mini-calendar td {
    vertical-align: top;
    padding: 4px 3px;
    text-align: center;
    color: var(--ink);
    font-size: 13px;
    height: 50px;
    border-top: 1px solid #f1f3e6;
    position: relative;
}
.mini-calendar td.other-month { color: #c5c9b4; }
.mini-calendar td.today { background: var(--cream-3); border-radius: 4px; font-weight: 700; }
.ev {
    display: block;
    margin: 2px 1px 0;
    padding: 1px 3px;
    border-radius: 2px;
    font-size: 9px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ev-dark { background: var(--green-deep); color: #fff; }
.ev-light { background: #e1e9c8; color: var(--green-deep); }
.ev-gold { background: var(--gold); color: var(--green-deep); }
.calendar-cta { display: flex; justify-content: flex-start; margin-top: 30px; }

/* ---------- News / Currently Happening ---------- */
.news-section { padding: 70px 0 80px; background: #fff; }
.news-header { margin-bottom: 30px; }
.news-card {
    background: transparent;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.news-img {
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #c9d4b3 0%, #a8b78c 60%, #d2dcc0 100%);
    /* More square — slightly taller than before */
    aspect-ratio: 5/4;
    display: flex; align-items: center; justify-content: center;
    margin-right: 40px;
    flex-shrink: 0;
}
.news-img img { width: 55%; max-width: 240px; filter: blur(.5px); }
.news-body {
    position: relative;
    background: var(--cream);
    padding: 30px 28px 32px;
    margin: -40px 28px 0 28px;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
    /* Equal-height bodies across all cards in the row */
    flex: 1;
    display: flex;
    flex-direction: column;
}
.news-time {
    position: absolute; right: 24px; top: 16px;
    font-size: 13px;
    color: var(--green-deep);
    font-weight: 400;
}
.news-title {
    margin: 30px 0 30px;
    color: var(--green-deep);
    font-size: 19px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.news-link {
    color: var(--green-deep);
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
    /* Stick Read More to the bottom of the (now-equalised) body */
    margin-top: auto;
    align-self: flex-start;
}
.news-link:hover { color: var(--gold); }

/* ====================================================================
   Department page — image hero (#tw-other-hero) + content (#tw-department)
   Ported from coltsneck.org /departments/public-works/
   ==================================================================== */
.dept-hero {
    position: relative;
    min-height: 650px;
    overflow: visible;
    isolation: isolate;
}
/* On the department page the hero is a single full-bleed image (no cream wedge),
   topped by the wavy band image. */
.dept-hero .dept-hero-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    clip-path: none;
    z-index: -1;
}
.dept-hero .dept-hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.05) 35%, rgba(0,0,0,.45) 100%);
}
.dept-hero::after {
    /* Wavy silhouette band — same approach as live site, spanning full hero height with the
       image anchored to the bottom so the transition into the page below is fully visible. */
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 100%;
    background: url('/assets/images/other-hero-bellow.png') center bottom / 100% auto no-repeat;
    pointer-events: none;
    z-index: 1;
}
/* Centre the title vertically in the remaining hero area below the floating header,
   then lift it another 80 px so it sits noticeably above the geometric middle. */
#tw-other-hero {
    position: relative;
    min-height: calc(650px - 176px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}
#tw-other-hero .row,
#tw-other-hero .row > div {
    width: 100%;
}
#tw-other-hero h1 {
    color: #fff;
    font-size: 50px;
    font-weight: 900;
    text-align: center;
    margin: 0;
    transform: translateY(-110px);
}

/* ----- #tw-department content section ----- */
div#tw-department {
    padding: 50px 0 80px;
    background: #fff;
}
div#tw-department h2 { font-size: 35px; }
div#tw-department h2 b { font-weight: 900; }
div#tw-department h2 b + br + span { font-weight: 400; letter-spacing: 5px; }

/* Department links grid (desktop) */
div#tw-department #tw-department-menu-container ul {
    border-radius: 10px;
    border: 2px solid #E5E5E5;
    min-height: 170px;
    background: #F9FBF5;
    display: flex;
    align-items: stretch;
}
div#tw-department #tw-department-menu-container ul li.nav-item {
    display: flex;
}
/* Stretch the quick menu across the full content width with equal-width items.
   Two things kept it narrow: `.menu-administration-container` is a flex item of
   `.navbar-collapse` and defaulted to `flex: 0 1 auto` (shrink-to-fit, so the
   bordered box ended after the last item), and the `li`s had no flex-grow, so
   each was only as wide as its label. Scoped to the `navbar-expand-md`
   breakpoint — below it the menu is the collapsed hamburger panel, where the
   items should keep wrapping instead of being squeezed into one row. */
@media (min-width: 768px) {
    div#tw-department #tw-department-menu-container .navbar-collapse > .menu-administration-container {
        flex: 1 1 auto;
        min-width: 0;
    }
    div#tw-department #tw-department-menu-container ul li.nav-item {
        flex: 1 1 0;
        min-width: 0;
    }
}
div#tw-department #tw-department-menu-container ul li.nav-item > a {
    width: 100%;
    display: flex;
    align-items: stretch;
}
div#tw-department #tw-department-menu-container ul li a {
    transition: transform .2s;
    text-decoration: none;
}
div#tw-department #tw-department-menu-container ul li:not(:last-child) a {
    border-right: 2px solid #E5E5E5;
}
div#tw-department #tw-department-menu-container ul li a:hover {
    background: #2F6D65;
    border-radius: 10px;
    transform: scale(1.1);
}
div#tw-department #tw-department-menu-container ul li a span.tw-department-menu-label {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
}
div#tw-department #tw-department-menu-container ul li a i {
    font-size: 40px;
    color: #D7E5E3;
}
div#tw-department #tw-department-menu-container ul li a:hover i,
div#tw-department #tw-department-menu-container ul li a:hover span.tw-department-menu-label {
    color: #DECB53;
}

/* Department links grid (mobile) */
div#tw-department #tw-department-menu-mobile-container .tw-department-menu li {
    padding-top: 4px;
    padding-bottom: 4px;
}
div#tw-department #tw-department-menu-mobile-container .tw-department-menu li:nth-child(odd) { padding-right: 4px; }
div#tw-department #tw-department-menu-mobile-container .tw-department-menu li:nth-child(even) { padding-left: 4px; }
div#tw-department #tw-department-menu-mobile-container .tw-department-menu li a {
    min-height: 220px;
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    text-decoration: none;
}
div#tw-department #tw-department-menu-mobile-container .tw-department-menu li a > div {
    justify-content: space-between;
}
div#tw-department #tw-department-menu-mobile-container .tw-department-menu li a span.tw-department-menu-label {
    font-size: 20px;
    font-weight: 900;
}
div#tw-department #tw-department-menu-mobile-container .tw-department-menu li a i {
    font-size: 2em;
    color: #DECB53;
}

/* Main article body */
div#tw-department article p { color: #404443; font-size: 18px; }
div#tw-department article h4 {
    font-size: 20px;
    font-weight: 900;
    color: #07483D;
    margin-top: 24px;
}
div#tw-department article a.btn {
    padding: 10px 30px;
    border: 2px solid #2F6D65;
    font-size: 17px;
    width: 156px;
    border-radius: 8px;
    color: #07483D;
}
div#tw-department article a:nth-last-child(2).btn {
    background: #2F6D65;
    color: #fff;
}
div#tw-department article ul { padding-left: 1.3rem; }
div#tw-department article ul li { color: #404443; margin-bottom: 6px; }
/* Content links match coltsneck.org, which renders them as standard underlined
   link blue. `.btn` is excluded — those are the bordered button links above,
   which keep their green. */
div#tw-department article a:not(.btn) { color: #0a58ca; text-decoration: underline; }
div#tw-department article ul li a { color: #0a58ca; text-decoration: underline; }
div#tw-department article hr { border-top: 1px solid #e5e5e5; opacity: 1; }

/* Sidebar (aside) */
div#tw-department aside h4 {
    font-size: 26px;
    font-weight: 900;
    text-transform: capitalize;
    color: #07483D;
}
div#tw-department aside #tw-contact-us {
    border-radius: 8px;
    color: #07483D;
    /* Long email addresses have no break opportunity, so they used to run past the
       box's right edge in the narrow sidebar. Break them onto a new line instead. */
    overflow-wrap: break-word;
}
div#tw-department aside #tw-contact-us div { font-size: 18px; }
/* Contact Us links use the same blue as the article's content links. The box's own
   text (names, labels) stays green — only the anchors change. */
div#tw-department aside #tw-contact-us a { color: #0a58ca; text-decoration: underline; }

/* Downloads box (under Contact Us) */
div#tw-department aside #tw-downloads > div {
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    background: #fff;
}
div#tw-department aside #tw-downloads > div > div {
    border: 2px solid rgba(215, 229, 227, 0.7);
    border-radius: 8px;
    min-height: 80px;
    font-size: 14px;
}
div#tw-department aside #tw-downloads > div > div a {
    color: #07483D;
    text-decoration: none;
    display: block;
}
div#tw-department aside #tw-downloads > div > div i {
    color: #9CC890;
    font-size: 45px;
}
div#tw-department aside #tw-downloads > div > div .tw-file-date {
    color: #C5C5C5;
    letter-spacing: .05em;
}

/* Quick links card (second department menu). Values mirror the live site:
   #F5F6EB card (tw-bg-light-green) with 8px radius, 26px/900 green heading
   (already covered by `aside h4` above), and plain 20px slate links spaced 1rem
   apart. The engine wraps each item in `li.nav-item > a.nav-link`, so the list
   chrome those Bootstrap classes bring has to be reset here. */
div#tw-department aside #tw-quick-links { border-radius: 8px; }
div#tw-department aside #tw-quick-links .tw-quick-links-menu {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
div#tw-department aside #tw-quick-links .tw-quick-links-menu > li { margin-bottom: 1rem; }
div#tw-department aside #tw-quick-links .tw-quick-links-menu > li:last-child { margin-bottom: 0; }
div#tw-department aside #tw-quick-links .tw-quick-links-menu > li > a {
    display: inline-block;
    padding: 0;
    color: #5D6A76;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
}
div#tw-department aside #tw-quick-links .tw-quick-links-menu > li > a:hover { color: #07483D; }

/* ---- Fixed quick-menu pill (lives at body level so it floats above every section,
       including the footer). ---- */
.menu-quick-menu-container {
    position: fixed;
    top: 200px;
    right: 20px;
    z-index: 50;
    background: rgba(67, 116, 120, 0.95); /* .81 let white pages wash it out to #678e92 (3.58:1 vs the white labels) */
    border-radius: 110px;
    padding: 40px 10px;
    width: 93px;
    max-width: 93px;
}
.menu-quick-menu-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-quick-menu-container li {
    margin: 18px 0;
}
.menu-quick-menu-container a {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    display: block;
    line-height: 1.2;
}
.menu-quick-menu-container a i {
    font-size: 22px;
    display: block;
    margin-bottom: 4px;
}
.menu-quick-menu-container a p {
    margin: 0;
    font-size: 13px;
    color: #fff;
}

/* Helper backgrounds used in the live theme */
.tw-bg-yellow { background-color: #DECB53 !important; }
.tw-bg-green { background-color: #07483D !important; }
.tw-bg-light-green { background-color: #F5F6EB !important; }
.tw-bg-light-blue { background-color: #EEF6F5 !important; }

/* ====================================================================
   Departments — ported 1:1 from coltsneck.org #tw-departments
   ==================================================================== */
section#tw-departments {
    position: relative;
    min-height: 800px;
}
section#tw-departments article > div:first-child {
    min-height: 400px;
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
}
section#tw-departments article > div:first-child > div {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
section#tw-departments .owl-carousel .owl-nav,
section#tw-departments article > div:last-child {
    margin-top: -30px;
}
section#tw-departments article > div:last-child .tw-departments-logo a img {
    width: 15vw;
    height: 15vw;
    max-width: 164px;
    max-height: 164px;
}
section#tw-departments article > div:last-child a.btn {
    font-size: 17px;
    font-weight: 700;
}
section#tw-departments .owl-carousel {
    position: relative;
}
section#tw-departments .owl-carousel .owl-item article img {
    width: auto;
}
section#tw-departments .owl-carousel .owl-item article .tw-departments-logo {
    pointer-events: none;
}
section#tw-departments .owl-carousel .owl-item article .tw-departments-title {
    font-weight: 900;
    font-size: 35px;
    max-width: 350px;
}
section#tw-departments .owl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: 150px;
}
section#tw-departments .owl-carousel .owl-nav.disabled { display: none; }
section#tw-departments .owl-carousel .owl-nav button {
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--green-deep);
    color: var(--green-deep);
    width: 67px;
    height: 63px;
    font-size: 30px;
}
section#tw-departments .owl-carousel .owl-nav button:hover {
    background: var(--gold);
    color: var(--green-deep);
    filter: brightness(.95);
}
section#tw-departments .owl-carousel .owl-dots {
    display: flex;
    justify-content: center;
    align-items: center;
}
section#tw-departments .owl-carousel .owl-dots.disabled { display: none; }
section#tw-departments .owl-carousel .owl-dots button.owl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #D7E5E3;
    margin: 0 10px;
}
section#tw-departments .owl-carousel .owl-dots button.owl-dot.active {
    width: 16px;
    height: 16px;
    background: #9CC890;
}
/* Live-site colour helpers used inside the slide markup */
.tw-bg-yellow { background-color: #DECB53 !important; }
.tw-green { color: #07483D !important; }
.tw-departments-title { font-weight: 900; font-size: 35px; max-width: 350px; line-height: 1.05; }

@media (max-width: 767.99px) {
    section#tw-departments .container { max-width: 100vw; margin: 0; padding: 0; }
    section#tw-departments article > div:last-child { padding-left: 0; padding-right: 0; }
}

@media (min-width: 768px) {
    section#tw-departments { background: #F5F6EB; }
    section#tw-departments,
    section#tw-departments article {
        height: 600px;
        clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
    }
    section#tw-departments article > div:first-child { clip-path: none; }
    section#tw-departments article > div:last-child { margin-top: 0; }
    /* The carousel's next arrow is pinned to the right edge of the carousel
       (.owl-nav is `position:absolute; width:100%; justify-content:space-between`)
       and sits at the same height as the excerpt, so a long line ran underneath
       it. Reserve the arrow's width (67px) plus breathing room on the right of
       the excerpt. Only from 768px up — below that the arrows sit above the
       text, not beside it. */
    section#tw-departments .owl-carousel .owl-item article p { padding-right: 90px; }
}

@media (min-width: 992px) {
    section#tw-departments .container {
        max-width: calc(((100% - 970px) / 2) + 970px) !important;
        margin-left: 0;
    }
    section#tw-departments article > div:first-child {
        padding: 0 80px 0 25px;
    }
}

@media (min-width: 1200px) {
    section#tw-departments .container {
        max-width: calc(((100% - 1440px) / 2) + 1440px) !important;
        margin-left: 0;
    }
}

/* ---------- Subscribe Section ---------- */
.subscribe-section { padding: 70px 0; background: #fff; }
.subscribe-info p { color: var(--muted); margin: 14px 0; font-size: 15px; }
.subscribe-form {
    background: var(--cream);
    border-radius: 4px;
    padding: 36px;
}
.form-row { margin-bottom: 18px; }
.form-row-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.form-row label { display: block; }
.form-label {
    display: block;
    font-weight: 700;
    font-size: 15px;
    color: var(--green-deep);
    letter-spacing: .3px;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.req { color: #b85050; }
.subscribe-form input[type=text],
.subscribe-form input[type=email],
.subscribe-form input[type=tel] {
    width: 100%;
    height: 45px;
    padding: 10px 14px;
    border: 1px solid #e0e3c9;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    color: var(--ink);
}
.subscribe-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(222,203,83,.25); }

.topics-block { margin-top: 24px; }
.topics-subhead { font-weight: 700; color: var(--ink); margin: 14px 0 10px; font-size: 15px; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    border: 0;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .2px;
    color: var(--green-deep);
    transition: filter .15s, background .2s;
}
.chip:hover { filter: brightness(.97); }
.chip-light { background: var(--cream-3); }
.chip-gold { background: var(--gold); }
.chip.chip-selected { background: var(--gold); color: var(--green-deep); }

.method-block { margin-top: 28px; }
.method-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.method-btn {
    padding: 14px 18px;
    border: 2px solid var(--green-mid);
    background: #fff;
    color: var(--green-deep);
    font-weight: 700;
    font-size: 17px;
    border-radius: 8px;
    transition: background .2s, color .2s;
}
.method-btn:hover { background: var(--cream-3); }
.method-active { background: var(--green-mid); color: #fff; }
.method-active:hover { background: var(--green-mid); color: #fff; }

.subscribe-submit {
    display: inline-block;
    margin-top: 22px;
    color: var(--green-mid);
    font-weight: 700;
    text-decoration: underline;
    font-size: 17px;
    letter-spacing: .5px;
}

/* ====================================================================
   Footer — ported 1:1 from coltsneck.org #footer
   ==================================================================== */
footer#footer {
    min-height: 700px;
    background-color: #EAF1DD;
    background-image: url('/assets/images/footer-background-img.png');
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: auto;
    position: relative;
    padding-top: 12vw;
    padding-bottom: 50px;
    color: #07483D;
    z-index: 0;
}
footer#footer a { color: #07483D; }
footer#footer ul.menu {
    list-style: none;
    padding: 0;
}
footer#footer ul.menu a {
    padding-left: 0;
    padding-right: 0;
}
/* Footer menu flows into two columns like coltsneck.org (3 + 3), with the same
   40px row rhythm. `break-inside: avoid` keeps an item from splitting across the
   column break. Single column on mobile. */
footer#footer .footer-menu-cols ul.menu {
    column-count: 2;
    column-gap: 45px;
}
footer#footer .footer-menu-cols ul.menu li {
    break-inside: avoid;
    margin-bottom: 16px;
    line-height: 24px;
}
@media (max-width: 767.98px) {
    footer#footer .footer-menu-cols ul.menu { column-count: 1; }
}
/* GTranslate switcher sits under the Hours text */
footer#footer .gtranslate_wrapper { margin-top: 14px; }
footer#footer::before {
    content: '';
    position: absolute;
    background-image: url('/assets/images/footer-before.png');
    top: 0;
    left: 0;
    right: 0;
    background-position: center top;
    background-size: 100% auto;
    background-repeat: no-repeat;
    height: 100%;
    z-index: -1;
}
footer#footer a#tw-footer-subscribe-btn {
    background: #07483D;
    border: none;
    color: #fff;
    padding: 10px 15px;
    z-index: 1;
    text-decoration: none;
}
footer#footer a#tw-footer-subscribe-btn:hover { background: #07483D; color: #fff; }
footer#footer a#tw-footer-subscribe-btn i { font-size: 11px; color: #fff; }

@media (min-width: 768px) {
    footer#footer {
        background-position: right bottom;
        background-size: auto 90%;
    }
}

/* Language pill kept from previous design — visually neutral, sits inside the last column */
footer#footer .lang-select {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 14px;
    border: 1px solid #07483D;
    border-radius: 4px;
    padding: 4px 8px;
    background: #fff;
}
footer#footer .lang-select select { border: 0; background: transparent; font: inherit; color: #07483D; padding: 4px; }
footer#footer .lang-select .flag { font-size: 16px; }

.back-to-top {
    position: absolute; right: 40px; bottom: 40px;
    width: 70px; height: 70px;
    border: 0; border-radius: 50%;
    background: rgba(7, 72, 61, 0.55);
    color: #fff;
    font-size: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    transition: background .25s ease;
    z-index: 2;
}
.back-to-top:hover { background: rgba(7, 72, 61, 0.75); }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .ql-table { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 991.98px) {
    /* Quick Links become individual rounded cards on tablet/mobile */
    .ql-table {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        border: 0;
        border-radius: 0;
    }
    .ql-cell {
        border: 1px solid var(--border-soft);
        border-radius: 10px;
        min-height: 280px;
        padding: 30px 26px 90px;
    }
    .ql-cell:not(:last-child) { border-right: 1px solid var(--border-soft); }
    .ql-cell-icon { color: var(--gold); font-size: 44px; }
    .ql-cell:hover { transform: none; box-shadow: 0 8px 20px rgba(7,72,61,.12); }

    /* Hide the hero action circles on tablet and mobile — they don't fit cleanly under the wedge */
    .hero-actions { display: none; }
    .hero { min-height: auto; }
    .hero::before { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }
    .hero-bg { clip-path: none; }
}

@media (max-width: 767.98px) {
    .header-card { grid-template-columns: 1fr; }
    .header-logo { position: static; margin: 0 auto 14px; width: 110px; height: 110px; }
    .header-right { grid-column: 1 / -1; }
    .main-nav { display: none; }
    .mobile-toggle { display: inline-flex; }
    .hero-container { padding-top: 40px; padding-bottom: 80px; }
    .form-row-2 { grid-template-columns: 1fr; }
    .method-buttons { grid-template-columns: 1fr; }
    .news-body { margin: -40px 16px 0 16px; }
    .news-img { margin-right: 0; }
}

/* ====================================================================
   JUNIPER SYSTEM ADAPTATIONS
   The header is rendered by {##Header##} (a sibling above {##Content##}),
   no longer nested inside .hero. Menus are emitted by the engine as
   <li class="nav-item menu-level-one"><a class="nav-link first-level-link">
   {icon}<span>label</span></a></li>. The rules below re-skin that markup
   back to the original Colts Neck design.
   ==================================================================== */

/* ---- Floating header now overlays the first section ---- */
body#juniper { position: relative; }
.site-header {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 0;
}
.skip-to-main { position: absolute; }
/* Make room under the floating card for the hero / department hero content */
.hero { padding-top: 176px; }
.dept-hero { padding-top: 140px; }
#tw-other-hero { min-height: calc(650px - 280px); }

/* Hero overlay over the background image (color + opacity are customizer-driven,
   like hillsdale). Lives inside .hero-bg so it follows the diagonal image clip. */
section#sectionHero .hero-bg { position: absolute; inset: 0; }
section#sectionHero .hero-overlay {
    position: absolute;
    inset: 0;
    background-color: transparent;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

/* ---- Primary menu (rendered nav-link markup) ---- */
.site-header .header-right .main-nav { padding: 0; background: transparent; border: 0; }
.site-header .main-menu {
    list-style: none; margin: 0; padding: 0 18px;
    display: flex; justify-content: center; align-items: center;
    flex-wrap: wrap; gap: 2px;
    flex-direction: row;
}
.site-header .main-menu li { list-style: none; position: relative; }
.site-header .main-menu .nav-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    color: var(--green-deep);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .2px;
}
.site-header .main-menu .nav-link:hover,
.site-header .main-menu .nav-link:focus { color: var(--gold); }
.site-header .main-menu .nav-link .visually-hidden { position: absolute !important; }

/* ---- Top bar menu ---- */
.site-header .top-nav { list-style: none; }
.site-header .top-nav li { list-style: none; }
.site-header .top-nav .nav-link {
    color: #fff; opacity: .95; padding: 0; font-size: 13px; font-weight: 400;
}
.site-header .top-nav .nav-link:hover { opacity: 1; text-decoration: underline; }

/* ---- Hero action circles (rendered from [#menu-hero]) ---- */
.action-circles {
    list-style: none; margin: 0; padding: 0;
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.action-circles > li { list-style: none; }
.action-circles > li:nth-child(1) { margin-top: -25px; }
.action-circles > li:nth-child(2) { margin-top: 0; }
.action-circles > li:nth-child(3) { margin-top: 30px; }
.action-circles > li:nth-child(4) { margin-top: 60px; }
.action-circles > li:nth-child(5) { margin-top: 90px; }
.action-circles > li > a {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    text-align: center; color: var(--green-deep); padding: 0; text-decoration: none;
}
/* The circle is always drawn (works whether or not the menu item has an icon) */
.action-circles > li > a::before {
    content: "";
    width: 116px; aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--green-deep);
    flex: 0 0 auto;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
/* The icon (if the menu item has one) overlays the circle */
.action-circles > li > a i {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 116px; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 40px; margin: 0 !important;
    pointer-events: none;
}
.action-circles > li > a:hover::before {
    background: #869B92;
    transform: scale(1.06);
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.action-circles > li > a:hover i { transform: translateX(-50%) scale(1.06); }
.action-circles > li > a span { font-weight: 700; font-size: 14px; color: var(--green-deep); position: relative; z-index: 1; }
.action-circles > li > a .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ---- Department quick-menu pill (rendered from [#menu-quick]) ---- */
.menu-quick-menu-container .navbar-nav { flex-direction: column; }
.menu-quick-menu-container .nav-link { color: #fff; padding: 0; display: block; line-height: 1.2; text-align: center; }
.menu-quick-menu-container .nav-link i { font-size: 22px; display: block; margin: 0 0 4px 0 !important; }
.menu-quick-menu-container .nav-link span { margin: 0; font-size: 13px; color: #fff; display: block; }
.menu-quick-menu-container .nav-link .visually-hidden { position: absolute !important; }

/* ---- Department featured menu (rendered from [#menu-departments]) ---- */
#tw-department #tw-department-menu-container .tw-department-menu { list-style: none; }
#tw-department #tw-department-menu-container .tw-department-menu .nav-item .nav-link {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 1rem;
    text-decoration: none;
}
#tw-department #tw-department-menu-container .tw-department-menu .nav-item .nav-link span {
    font-size: 20px; font-weight: 900; line-height: 1.1;
    text-transform: uppercase; color: #07483D;
}
#tw-department #tw-department-menu-container .tw-department-menu .nav-item .nav-link i { font-size: 40px; color: #D7E5E3; }
#tw-department #tw-department-menu-container .tw-department-menu .nav-item .nav-link:hover { background: #2F6D65; border-radius: 10px; }
#tw-department #tw-department-menu-container .tw-department-menu .nav-item .nav-link:hover span,
#tw-department #tw-department-menu-container .tw-department-menu .nav-item .nav-link:hover i { color: #DECB53; }
.tw-department-menu-nav .navbar-toggler { display: none; }

/* ---- Footer menu (rendered from [#menu-footer]) ---- */
footer#footer .widget_nav_menu .menu { list-style: none; padding: 0; }
footer#footer .widget_nav_menu .menu li { list-style: none; }
footer#footer .widget_nav_menu .menu .nav-link { padding-left: 0; padding-right: 0; color: #07483D; }

/* ---- Mobile: let the header flow normally and collapse the nav ---- */
@media (max-width: 767.98px) {
    .site-header { position: static; }
    .hero { padding-top: 24px; }
    .dept-hero { padding-top: 0; }
    .site-header .main-menu { flex-direction: column; padding: 12px 18px; }
    .action-circles { display: none; }
}

/* ====================================================================
   PRIMARY MENU — DROPDOWN + MEGA MENU
   Reuses the hover-dropdown approach from the hillsdale theme, recoloured
   to the Colts Neck palette and matched to the live coltsneck.org header.
   Engine markup:
     <li class="nav-item menu-level-one dropdown">                       (simple)
     <li class="nav-item menu-level-one dropdown dropdown-mega position-static"> (mega)
     <a class="nav-link first-level-link dropdown-toggle" data-bs-toggle="dropdown">
     <ul class="dropdown-menu"><li><a class="dropdown-item"><span>..</span></a></li></ul>
     <div class="dropdown-menu dropdown-mega-menu"><div class="mega-content">
       <div class="container-fluid mega-menu-columns"><div class="row">
         <div class="... mega-menu-column">
           <div class="mb-2"><a class="sk-megamenu-column-item-link">Heading</a>
             <ul class="sk-megamenu-column-item-submenu"><li><a class="sk-megamenu-column-item-submenu-link">Link</a></li></ul>
   ==================================================================== */

/* Pale-mint nav row + positioning context so panels can span the nav width */
.site-header .main-nav { position: relative; background: var(--cream-2); }

/* First-level items: static so dropdown panels anchor to the nav (full width) */
#menuPrimary.main-menu .menu-level-one { position: static; list-style: none; }
#menuPrimary.main-menu .menu-level-one > .nav-link {
    position: relative;
    border-top: 3px solid transparent;
}
/* Gold "tab" highlight on hover / open (matches the live site) */
#menuPrimary.main-menu .menu-level-one:hover > .nav-link,
#menuPrimary.main-menu .menu-level-one.show > .nav-link,
#menuPrimary.main-menu .menu-level-one > .nav-link[aria-expanded="true"] {
    border-top-color: var(--gold);
    background: #fff;
    color: var(--green-deep);
}
/* Hide Bootstrap's default caret */
#menuPrimary.main-menu .dropdown-toggle::after { display: none; }

/* ---- Dropdown panel (shared by simple + mega) ---- */
#menuPrimary .dropdown-menu {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 14px 30px rgba(7, 72, 61, .12);
    z-index: 9999;
}
#menuPrimary ul.dropdown-menu { list-style: none; padding: 18px 30px; }
#menuPrimary .dropdown-menu .dropdown-item,
#menuPrimary .dropdown-menu li > a {
    display: block;
    padding: 12px 8px;
    color: var(--green-deep);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: normal;
    background: transparent;
}
#menuPrimary .dropdown-menu .dropdown-item:hover,
#menuPrimary .dropdown-menu li > a:hover { color: var(--gold); background: transparent; }

/* ---- Desktop: hover to open, full width, neutralise Popper inline styles ---- */
@media (min-width: 992px) {
    #menuPrimary .dropdown-menu {
        display: block;
        position: absolute !important;
        transform: none !important;
        inset: auto auto auto 0 !important;
        top: 100% !important;
        left: 0 !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .2s ease, visibility .2s ease;
    }
    #menuPrimary .menu-level-one:hover > .dropdown-menu,
    #menuPrimary .menu-level-one > .nav-link[aria-expanded="true"] + .dropdown-menu,
    #menuPrimary .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}
/* ---- Mobile/tablet: click (Bootstrap collapse + .show) ---- */
@media (max-width: 991.99px) {
    #menuPrimary .dropdown-menu { position: static; display: none; box-shadow: none; padding: 0 0 12px; }
    #menuPrimary .dropdown-menu.show { display: block; }
}

/* ---- Mega menu ---- */
#menuPrimary .dropdown-mega-menu { background: transparent; box-shadow: none; padding: 0; }
#menuPrimary .dropdown-mega-menu .mega-content { width: 100%; }
/* The panel grid is aligned with the top-level nav labels: the first column's
   heading has to sit directly under "Home". Home's text starts 30px from the
   nav's left edge — 18px of `#menuPrimary` padding + 12px of `.nav-link`
   padding — so the two values below mirror exactly that, and Bootstrap's
   negative row gutter is zeroed out so it can't shift the grid back left. */
#menuPrimary .mega-menu-columns {
    background: #fff;
    box-shadow: 0 14px 30px rgba(7, 72, 61, .12);
    padding: 0 18px;   /* = #menuPrimary padding-left */
    margin: 0;
}
#menuPrimary .dropdown-mega-menu .row { margin-left: 0; margin-right: 0; }
#menuPrimary .mega-menu-column { padding: 12px; }   /* = .nav-link padding */
#menuPrimary .sk-megamenu-column-item-link {
    display: block;
    color: var(--green-deep);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: normal;
    text-decoration: none;
    /* Cancel the `.main-menu a { padding: 8px 12px }` inherited from the top-level
       nav — the 12px left padding pushed the heading out of line with the third
       level links below it. Spacing comes from line-height, as on coltsneck.org. */
    padding: 0;
    margin-bottom: 0;
}
#menuPrimary .sk-megamenu-column-item-link:hover { color: var(--gold); }
#menuPrimary .sk-megamenu-column-item-submenu { list-style: none; padding-left: 0; margin: 0; }
#menuPrimary .sk-megamenu-column-item-submenu li { margin: 0; }
/* Third level must read *smaller and lighter* than the column heading above it.
   The generic `#menuPrimary .dropdown-menu li > a` rule higher up is (1,1,1) and
   would otherwise win over a plain `.sk-megamenu-column-item-submenu-link`
   selector (1,1,0) and force these links to bold uppercase green — hence the
   `li > a.` qualifier here. Values mirror coltsneck.org: 14px / 400 / #666 / none. */
#menuPrimary .sk-megamenu-column-item-submenu li > a.sk-megamenu-column-item-submenu-link {
    display: block;
    color: #666;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    padding: 0;
}
#menuPrimary .sk-megamenu-column-item-submenu li > a.sk-megamenu-column-item-submenu-link:hover { color: var(--green-deep); }

/* ====================================================================
   MOBILE MENU (≤991px — matches the navbar-expand-lg collapse breakpoint)
   Live coltsneck.org behaviour: solid green bar (logo + hamburger); tapping
   opens a full-width DARK drawer with white items + carets; tapping a parent
   expands a WHITE accordion sub-panel with green uppercase links.
   Overrides the legacy `.main-nav{display:none}` (line ~1093) that hid the
   whole nav — and with it the hamburger — on phones.
   ==================================================================== */
@media (max-width: 991.98px) {
    /* Header → solid green bar, in normal flow (no longer overlays the hero).
       Reset the desktop `top:12px` floating offset — it was leaving a 12px gap
       (white body bg) above the header on mobile. */
    .site-header { position: relative; top: 0; background: var(--green-deep); padding: 0; z-index: 1000; }
    .site-header .container { padding: 0 16px; }
    .header-card {
        display: flex !important;
        grid-template-columns: none;
        align-items: center;
        justify-content: space-between;
        min-height: auto;
        padding: 12px 0;
        position: static;   /* let the drawer anchor to .site-header (full width) */
    }
    .header-logo { position: static; width: 92px; height: 92px; margin: 0; }
    .header-right {
        background: transparent; box-shadow: none; border-radius: 0;
        grid-column: auto;
        position: static;   /* not the absolute anchor on mobile */
        display: flex; align-items: center; align-self: center; flex: 0 0 auto;
    }
    .site-header .header-top-bar { display: none; }

    /* The nav wrapper holds the hamburger; force it visible (kills legacy display:none) */
    .site-header .main-nav {
        display: flex !important;
        position: static; background: transparent; padding: 0; border: 0;
    }
    .site-header .mobile-toggle {
        display: inline-flex !important;
        position: static;
        flex-direction: column; justify-content: center; gap: 6px;
        width: 44px; height: 44px; padding: 0; margin: 0;
        background: transparent; border: 0; box-shadow: none;
    }
    .site-header .mobile-toggle:focus { box-shadow: none; }
    .site-header .mobile-toggle span {
        display: block; width: 28px; height: 3px; background: #fff; border-radius: 2px;
        transition: transform .25s ease, opacity .25s ease;
    }
    /* Hamburger → X when open */
    .site-header .mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .site-header .mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .site-header .mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    /* Drawer: full-width dark overlay below the bar */
    .site-header #menuPrimaryContent {
        position: absolute; left: 0; right: 0; top: 100%;
        background: #2b2b2b;
        min-height: calc(100vh - 116px);
        max-height: calc(100vh - 116px);
        overflow-y: auto;
        z-index: 1040;
    }
    #menuPrimary.main-menu {
        flex-direction: column; align-items: stretch;
        width: 100%; padding: 0; margin: 0; gap: 0;
        background: #2b2b2b;
    }
    #menuPrimary.main-menu .menu-level-one {
        width: 100%; position: static; margin: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    /* Top-level rows: white text, full-width, caret on the right.
       Font size is customizer-driven via --cn-mobile-menu-font-size (default 16px). */
    #menuPrimary.main-menu .menu-level-one > .nav-link {
        display: flex; align-items: center; justify-content: space-between;
        color: #fff; font-weight: 700;
        font-size: var(--cn-mobile-menu-font-size, 16px);
        padding: 12px 20px;
        border-top: 0; background: transparent;
    }
    #menuPrimary.main-menu .menu-level-one.show > .nav-link,
    #menuPrimary.main-menu .menu-level-one > .nav-link[aria-expanded="true"] {
        border-top: 0; background: rgba(255,255,255,.06); color: #fff;
    }
    #menuPrimary.main-menu .menu-level-one > .nav-link span { color: inherit; }
    /* Caret (FA chevron) on parents, rotates when open */
    #menuPrimary.main-menu .dropdown-toggle::after {
        display: inline-block;
        margin-left: auto;
        border: 0;
        content: "\f078";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 14px;
        color: #fff;
        transition: transform .2s ease;
    }
    #menuPrimary.main-menu .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

    /* Accordion sub-panel: white, green UPPERCASE links */
    #menuPrimary .dropdown-menu {
        position: static !important;
        transform: none !important;
        inset: auto !important;
        width: 100%;
        display: none;
        opacity: 1; visibility: visible; pointer-events: auto;
        background: #fff;
        box-shadow: none; border: 0; border-radius: 0;
        padding: 8px 0;
    }
    #menuPrimary .dropdown-menu.show { display: block; }
    #menuPrimary .dropdown-menu .dropdown-item,
    #menuPrimary .dropdown-menu li > a,
    #menuPrimary .sk-megamenu-column-item-link {
        color: var(--green-deep);
        font-weight: 700;
        text-transform: uppercase;
        font-size: var(--cn-mobile-menu-font-size, 16px);
        padding: 8px 28px;
        white-space: normal;
    }
    /* Same specificity fight as on desktop — see the note in the mega-menu block. */
    #menuPrimary .sk-megamenu-column-item-submenu li > a.sk-megamenu-column-item-submenu-link {
        color: #666;
        font-weight: 400;
        text-transform: none;
        letter-spacing: normal;
        font-size: 14px;
        padding: 5px 28px 5px 40px;
    }
    /* Tighten the white sub-panel: kill the desktop ul padding + Bootstrap py-4/mb-2
       (those use !important on .mega-menu-column / .mb-2, so override with !important). */
    #menuPrimary ul.dropdown-menu { padding: 4px 0; }
    #menuPrimary .dropdown-mega-menu .mega-menu-columns { padding: 4px 0; box-shadow: none; }
    #menuPrimary .dropdown-mega-menu .mega-menu-column {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
    #menuPrimary .dropdown-mega-menu .mega-menu-column .mb-2 { margin-bottom: 0 !important; }

    /* Hero no longer sits under an absolute header on mobile */
    .hero { padding-top: 24px; }
    .dept-hero { padding-top: 0; }
}

/* ====================================================================
   MOBILE HERO QUICK LINKS (≤991px)
   Show the action circles as a vertical bordered list — gold icon on the
   left, bold green uppercase label on the right (matches coltsneck.org mobile).
   Overrides the desktop circle look and the earlier display:none hides.
   ==================================================================== */
@media (max-width: 991.98px) {
    section#sectionHero .hero-actions {
        display: block;
        position: static;
        top: auto;
        margin: 0;
        padding: 18px 16px 8px;
        background: transparent;
        z-index: 1;
    }
    section#sectionHero .hero-actions .container { max-width: 100%; padding: 0; }
    section#sectionHero .action-circles {
        display: flex;
        flex-direction: column;
        align-items: stretch;          /* full-width rows (override desktop flex-start) */
        gap: 14px;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    section#sectionHero .action-circles > li {
        margin: 0 !important;            /* kill the desktop diagonal stagger */
        border: 1px solid var(--border-soft, #E5E5E5);
        border-radius: 10px;
        background: #fff;
        list-style: none;
    }
    section#sectionHero .action-circles > li > a {
        flex-direction: row;             /* icon left, label right */
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 12px 16px;
        position: static;
    }
    /* No circle on mobile — just the icon */
    section#sectionHero .action-circles > li > a::before { display: none; }
    section#sectionHero .action-circles > li > a i {
        position: static;
        transform: none;
        width: 24px !important;   /* override the customizer circle Size (meant for desktop) */
        height: auto !important;
        aspect-ratio: auto;
        font-size: 22px;
        color: var(--gold, #DECB53) !important;   /* override the white circle-icon colour */
        flex: 0 0 auto;
        text-align: left;
    }
    section#sectionHero .action-circles > li > a:hover i { transform: none; }
    section#sectionHero .action-circles > li > a span {
        font-size: 16px;
        font-weight: 800;
        text-transform: uppercase;
        text-align: left;
        line-height: 1.2;
    }
}

/* ====================================================================
   MOBILE HERO IMAGE — keep the diagonal "wedge" corners like desktop
   (the original mobile override removed the clip-path). The image is a
   fixed-height banner with a diagonal bottom; the cream wedge shows in
   the cut; the quick-links list then flows below on white.
   ==================================================================== */
@media (max-width: 991.98px) {
    section#sectionHero.hero { min-height: auto; padding-top: 0; }
    section#sectionHero .hero-bg {
        height: 440px;
        bottom: auto;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 86%);
    }
    section#sectionHero.hero::before {
        height: 470px;
        bottom: auto;
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    }
    section#sectionHero .hero-container {
        min-height: 440px;
        display: flex;
        flex-direction: column;
        justify-content: center;   /* equal space above WELCOME and below the search */
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/* ====================================================================
   QUICK LINKS — menu-driven (markup from [#menu-quick-links])
   Maps the engine's menu markup onto the original .ql-cell look:
   item label = cell title, item description = subtitle, item icon = cell icon.
   ==================================================================== */
.quick-links .ql-table { list-style: none; padding: 0; margin: 0; }
.quick-links .ql-table > li { list-style: none; display: flex; }
.quick-links .ql-table > li:not(:last-child) { border-right: 2px solid var(--border-soft); }
.quick-links .ql-table > li > a {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 28px 22px 70px;
    min-height: 200px;
    color: var(--green-deep);
    background: #fff;
    text-decoration: none;
    transform-origin: center;
    transition: background .4s ease, color .4s ease, transform .4s ease, box-shadow .4s ease, border-radius .4s ease;
}
.quick-links .ql-table .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* Title (label) — covers both the description-wrapper and the plain-span variants */
.quick-links .ql-table .nav-link .menu-item-label,
.quick-links .ql-table .nav-link > span {
    display: block;
    margin: 0 0 8px;
    color: var(--green-deep);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}
/* Subtitle (description) */
.quick-links .ql-table .nav-link .menu-item-description {
    display: block;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}
/* Icon, anchored bottom-left like the original cells */
.quick-links .ql-table .nav-link > i {
    position: absolute;
    left: 22px;
    bottom: 22px;
    font-size: 40px;
    color: var(--teal-light);
    line-height: 1;
    margin: 0 !important;
    width: auto;
    aspect-ratio: auto;
}
.quick-links .ql-table > li > a:hover {
    background: var(--green-deep);
    color: var(--gold);
    transform: scale(1.1);
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(7, 72, 61, 0.25);
    z-index: 2;
}
.quick-links .ql-table > li > a:hover .menu-item-label,
.quick-links .ql-table > li > a:hover > span { color: var(--gold); }
.quick-links .ql-table > li > a:hover .menu-item-description { color: #fff; }
.quick-links .ql-table > li > a:hover > i { color: var(--gold); }

/* Mobile: individual rounded cards (matches the original .ql-cell mobile rules) */
@media (max-width: 991.98px) {
    /* minmax(0,1fr) keeps both columns the same width even when a title wraps */
    .quick-links .ql-table { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .quick-links .ql-table > li { border-right: 0 !important; }
    .quick-links .ql-table > li > a {
        border: 1px solid var(--border-soft);
        border-radius: 10px;
        min-height: 210px;
        padding: 22px 16px 68px;
    }
    .quick-links .ql-table .nav-link .menu-item-label,
    .quick-links .ql-table .nav-link > span { font-size: 17px; overflow-wrap: break-word; }
    .quick-links .ql-table .nav-link .menu-item-description { font-size: 13px; }
    .quick-links .ql-table .nav-link > i { color: var(--gold); font-size: 42px; }
    .quick-links .ql-table > li > a:hover { transform: none; box-shadow: 0 8px 20px rgba(7, 72, 61, 0.12); }
}

/* ====================================================================
   CALENDAR — compact rows + tighter mobile padding (match live mobile)
   ==================================================================== */
/* The engine's calendar JS renders day cells as <div class="tw-calendar-day py-4">;
   Bootstrap py-4 (1.5rem !important) makes rows ~77px — too tall. Tighten it. */
#homepageEventsCalendar .tw-calendar-day {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
#homepageEventsCalendar .mini-calendar td { height: auto; }

@media (max-width: 991.98px) {
    /* Far less top padding than the desktop 180px (which was for the wave band overlap) */
    .calendar-section { padding-top: 44px; padding-bottom: 30px; }
    #homepageEventsCalendar .calendar-wrap { padding-top: 0; }
    #homepageEventsCalendar .section-title { margin-bottom: 16px; }
    /* calendar is shown first on mobile; add a little gap before the events list */
    #homepageEventsCalendar .calendar-info { margin-top: 24px; }
    #homepageEventsCalendar .calendar-card { padding: 16px; }
}

/* ====================================================================
   CALENDAR — event-day indicator = underline under the day number
   (the JS renders an empty <span class="event-item-btn"> as span:first-child;
   coltsneck shows it as a line, gold for event days like the live site).
   ==================================================================== */
#homepageEventsCalendar .events-calendar td .tw-calendar-day { position: relative; }
#homepageEventsCalendar .events-calendar td .tw-calendar-day span:first-child {
    width: 64%;
    height: 4px;
    min-width: 0;
    top: auto;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    background: transparent;   /* no line unless the day has events */
}
#homepageEventsCalendar .events-calendar td .tw-calendar-day span:last-child { position: relative; z-index: 1; }
/* Days that have events → gold underline */
#homepageEventsCalendar .events-calendar td.has-events .tw-calendar-day span:first-child,
#homepageEventsCalendar .events-calendar td .tw-calendar-has-events-date span:first-child {
    background: var(--gold);
}
/* Today (current date) — grey, ONLY when it is not the selected day */
#homepageEventsCalendar .events-calendar td:not(.selected) .tw-calendar-current-date {
    background: #ECECEC;
    border-radius: 6px;
}
/* Selected day (today by default; only one — the JS moves .selected on click) — light green */
#homepageEventsCalendar .events-calendar td.selected .tw-calendar-day {
    background: #EAF1DD;
    border-radius: 6px;
}

/* ====================================================================
   CALENDAR — keep height stable while a month loads (no collapse/jump)
   showCalendar() empties #calendar-body then awaits the events fetch; the
   reserved min-height + the loading overlay (toggled in theme.js) keep the
   card from shrinking during that gap.
   ==================================================================== */
#homepageEventsCalendar .calendar-card { min-height: 408px; }
#homepageEventsCalendar .tw-calendar-loading-overlay { border-radius: 12px; }
#homepageEventsCalendar .tw-calendar-loading-overlay .fa-spinner { color: var(--green-deep); }
@media (max-width: 991.98px) {
    #homepageEventsCalendar .calendar-card { min-height: 392px; }
}

/* ====================================================================
   SUBSCRIBE — dynamic category chips (loaded from HeyGov/legacy) + method
   Chips/method are <label> wrapping a visually-hidden checkbox; selected
   state via :has(input:checked).
   ==================================================================== */
.subscribe-section .topic-chips .chip { cursor: pointer; transition: none; }
.subscribe-section .topic-chips .chip.chip-selected,
.subscribe-section .topic-chips .chip:has(input:checked) { background: var(--gold); color: var(--green-deep); }
.subscribe-section .topic-chips .chip span { pointer-events: none; }
.subscribe-section .method-btn { cursor: pointer; transition: none; display: inline-flex; align-items: center; justify-content: center; }
.subscribe-section .method-btn.method-active,
.subscribe-section .method-btn:has(input:checked) { background: var(--green-mid); color: #fff; }
.subscribe-section .chips-toggle-btn {
    background: none; border: 0; padding: 0; margin-top: 8px;
    color: var(--green-mid); font-weight: 700; font-size: 13px;
    text-decoration: underline; cursor: pointer;
}
.subscribe-section button.subscribe-submit {
    background: none; border: 0; padding: 0; cursor: pointer;
}
.subscribe-section .subscribe-error { color: #b85050; font-size: 14px; margin-top: 10px; }
.subscribe-section .subscribe-error.d-none { display: none; }

/* ====================================================================
   RICH EVENTS CALENDAR (desktop: big grid with event titles in cells;
   mobile: compact day numbers + gold underline for event days)
   ==================================================================== */
#homepageEventsCalendar .calendar-card { min-height: 700px; padding: 20px 24px; }
#homepageEventsCalendar .events-calendar { width: 100%; border-collapse: collapse; table-layout: fixed; }
#homepageEventsCalendar .tw-calendar-table-header th {
    color: #8b9489; font-weight: 600; font-size: 12px; letter-spacing: 1px;
    text-transform: uppercase; padding: 10px 6px; text-align: left; border: 0;
}
#homepageEventsCalendar .events-calendar td {
    vertical-align: top; height: 105px; width: 14.28%;
    padding: 6px; border: 1px solid #eef0e8; font-size: 14px; color: var(--ink);
}
#homepageEventsCalendar .events-calendar td .tw-calendar-day {
    padding: 0 !important; display: block; min-height: 0; background: transparent;
}
#homepageEventsCalendar .tw-calendar-day-number { font-size: 15px; color: var(--ink); margin-bottom: 4px; }
#homepageEventsCalendar td.previous-month .tw-calendar-day-number,
#homepageEventsCalendar td.next-month .tw-calendar-day-number { color: #c5c9b4; }
#homepageEventsCalendar td.previous-month, #homepageEventsCalendar td.next-month { background: #fafbf7; }
/* event title bars inside cells */
#homepageEventsCalendar .tw-calendar-day-event-title {
    display: block; background: var(--cream-2); color: var(--green-deep);
    font-size: 12px; line-height: 1.25; padding: 2px 6px; margin: 2px 0; border-radius: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#homepageEventsCalendar .tw-calendar-day-event-more { font-size: 11px; color: var(--green-mid); padding: 0 6px; }
/* today + selected day */
#homepageEventsCalendar td.tw-calendar-current-date { background: var(--cream-3); }
#homepageEventsCalendar td.tw-calendar-day-active { background: var(--cream-2); box-shadow: inset 0 0 0 2px var(--gold); }
#homepageEventsCalendar td.event-item-btn { cursor: pointer; }
#homepageEventsCalendar td.event-item-btn:hover { background: var(--cream); }
/* events side list (selected day) */
#homepageEventsCalendar .tw-calendar-event-article {
    border-left: 4px solid var(--gold); background: #fff; padding: 14px 16px; border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,.05); margin-bottom: 12px;
}
#homepageEventsCalendar .tw-calendar-event-article-time { font-weight: 700; color: var(--green-deep); }
#homepageEventsCalendar .tw-calendar-event-article-title { font-weight: 700; color: var(--green-deep); }
#homepageEventsCalendar .tw-calendar-event-article-venue { color: var(--muted); font-size: 13px; }

@media (max-width: 991.98px) {
    #homepageEventsCalendar .calendar-card { min-height: 392px; padding: 16px; }
    #homepageEventsCalendar .events-calendar td { height: 50px; padding: 2px; text-align: center; }
    #homepageEventsCalendar .tw-calendar-table-header th { text-align: center; font-size: 10px; padding: 8px 0; }
    #homepageEventsCalendar .tw-calendar-day-number { margin: 0; font-size: 14px; }
    /* hide event titles on mobile; show a gold underline indicator for event days */
    #homepageEventsCalendar .tw-calendar-day-event-title,
    #homepageEventsCalendar .tw-calendar-day-event-more { display: none; }
    #homepageEventsCalendar td.has-events .tw-calendar-day { position: relative; }
    #homepageEventsCalendar td.has-events .tw-calendar-day::after {
        content: ''; display: block; width: 60%; height: 3px; background: var(--gold);
        border-radius: 2px; margin: 4px auto 0;
    }
    #homepageEventsCalendar td.tw-calendar-day-active { box-shadow: inset 0 0 0 2px var(--gold); }
}

/* ====================================================================
   NON-HOMEPAGE PAGE HEADER — big image banner (default header image) +
   page title, with the floating header card overlaying it. Plus the
   fixed quick-links pill on the right (hidden on the homepage).
   ==================================================================== */
.page-hero {
    position: relative;
    min-height: 580px;
    padding-top: 176px;            /* clear the floating header card */
    overflow: hidden;
    isolation: isolate;
    display: flex; align-items: center; justify-content: center;
    /* Dark fallback under the image: shows if the image fails, and gives contrast
       checkers (which can't see the image layer) a real colour instead of body white. */
    background-color: var(--green-dark);
}
.page-hero-bg {
    position: absolute; inset: 0; z-index: -1;
    background-image: var(--default-header-image, url('/assets/images/default-header-image.jpg'));
    background-size: cover; background-position: center;
}
.page-hero-bg::after {
    content: ''; position: absolute; inset: 0;
    /* ≥.45 everywhere so the white title keeps ≥3:1 (large text) even over a white sky;
       the old .1 middle stop left it at ~2:1 over the sky on the default header image. */
    background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.55) 100%);
}
/* white wavy "torn paper" transition at the bottom (same asset as the dept hero) */
.page-hero::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 100%;
    background: url('/assets/images/other-hero-bellow.png') center bottom / 100% auto no-repeat;
    pointer-events: none; z-index: 1;
}
.page-hero-inner { position: relative; z-index: 2; width: 100%; text-align: center; padding-bottom: 150px; }
.page-hero-title {
    color: #fff; font-size: clamp(30px, 4vw, 50px); font-weight: 900; line-height: 1.1; margin: 0;
    text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
@media (max-width: 991.98px) {
    .page-hero { min-height: 300px; padding-top: 0; }
    .page-hero-title { font-size: clamp(26px, 7vw, 34px); }
}

/* Department single hero falls back to the default header image when the
   department has no featured image of its own. */
#tw-hero.dept-hero {
    background-image: var(--default-header-image, url('/assets/images/default-header-image.jpg'));
    background-size: cover; background-position: center;
}

/* Hide the fixed quick-links pill on the homepage (it has the hero circles instead) */
body:has(.homepage) .menu-quick-menu-container { display: none !important; }

/* The fixed pill now renders [#menu-hero] (.action-circles) — re-skin it as a vertical
   pill. Box model mirrors coltsneck.org's own pill 1:1: no list gap, the rhythm comes
   from the link's 8px padding plus the label's 16px bottom margin, and the label is
   regular weight at line-height 1.5 (the homepage circles' bold 700 is overridden
   here only — .action-circles outside this container keeps its hero styling). */
.menu-quick-menu-container .action-circles {
    flex-direction: column; align-items: center; gap: 0; margin: 0; padding: 0;
}
.menu-quick-menu-container .action-circles > li { margin: 0 !important; list-style: none; }
.menu-quick-menu-container .action-circles > li > a {
    display: block; color: #fff; text-align: center; padding: 8px 0; line-height: 21px;
}
.menu-quick-menu-container .action-circles > li > a::before { display: none; }
.menu-quick-menu-container .action-circles > li > a i {
    position: static; transform: none; width: auto; aspect-ratio: auto; display: inline-block;
    font-size: 22px; color: #fff !important; margin: 0 !important; box-shadow: none;
}
.menu-quick-menu-container .action-circles > li > a:hover i { transform: none; opacity: .85; }
.menu-quick-menu-container .action-circles > li > a span {
    display: block; font-size: 14px; font-weight: 400; line-height: 21px;
    margin: 0 0 16px; color: #fff;
}
.menu-quick-menu-container .action-circles > li > a .visually-hidden { margin: 0; }

/* ====================================================================
   BREADCRUMBS (non-homepage pages)
   ==================================================================== */
.tw-breadcrumbs { padding: 20px 0 0 20px; }
.tw-breadcrumbs ol {
    list-style: none; display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px; margin: 0; padding: 0; font-size: 14px;
}
.tw-breadcrumbs li { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.tw-breadcrumbs li:not(:last-child)::after { content: '\203A'; color: var(--muted); font-weight: 700; }
.tw-breadcrumbs a { color: var(--green-deep); font-weight: 600; text-decoration: none; }
.tw-breadcrumbs a:hover { color: var(--gold); text-decoration: underline; }
.tw-breadcrumbs li[aria-current] { color: var(--muted); }

/* ====================================================================
   SUBSCRIBE PAGE (/subscribe) — ported from the default (Maverick) theme,
   recoloured to the Colts Neck palette. coltsneck.subscribe/default.php
   uses the same juniper-subscriber* markup but had no CSS for it.
   ==================================================================== */
.juniper-subscriber-title { display: block; margin-bottom: 15px; }
.juniper-row { margin-bottom: 10px; }
.juniper-row:after { content: ""; display: block; clear: both; }
#juniper-subscribe-topics-parent,
#juniper-subscribe-method-parent {
    padding: 1rem 2rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.juniper-subscriber-form-box .sub { margin-left: 30px; }
.juniper-subscriber-form-box .juniper-subscribe-method .custom-selection {
    position: relative; display: inline-block;
}
.juniper-subscriber-form-box .juniper-subscribe-method .custom-selection input {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
}
.juniper-subscriber-form-box .juniper-subscribe-method .custom-selection label {
    border: 1px solid #c6c6c6; box-sizing: border-box; border-radius: 10px;
    font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: normal;
    font-size: 12px; line-height: 16px; text-align: center; padding: 10px;
    color: #4c4c4c; min-width: 100px; margin: 5px; padding-bottom: 1.5rem;
}
.juniper-subscriber-form-box .juniper-subscribe-method .custom-selection label i { display: block; }
.juniper-subscriber-form-box .juniper-subscribe-method .custom-selection input:checked + label {
    border-color: var(--green-deep, #07483D) !important;
    background: var(--cream-2);
}
.juniper-subscriber-form-box .juniper-subscribe-method .custom-selection input:checked + label i {
    color: var(--green-deep, #07483D) !important;
}
.juniper-agendas-minutes-packets { display: none; }

/* =========================================================================
   ADA / WCAG 2.2 — keyboard focus visibility & reduced motion
   These rules ONLY affect the keyboard-focus and reduced-motion states, so
   the default (mouse / no-preference) appearance stays exactly the same.
   ========================================================================= */

/* 2.4.7 Focus Visible / 2.4.11 Focus Not Obscured — a consistent, high-contrast
   focus ring for keyboard users on every interactive element. :focus-visible
   means it never shows on mouse click, so the visual design is unchanged. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="heading"]:focus-visible {
    outline: 3px solid #1a73e8;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Hero search field clears the native outline (line ~176) — restore a visible
   keyboard-focus indicator that reads on the dark hero. */
.hero-search input:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.hero-search button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Mobile hamburger drops Bootstrap's focus shadow (line ~1418) — give it a ring. */
.site-header .mobile-toggle:focus-visible {
    outline: 3px solid var(--gold, #DECB53);
    outline-offset: 2px;
}

/* Custom toggle controls hide the real <input> (.visually-hidden); the focus
   must surface on the visible label instead. */
.subscribe-section .chip:has(input:focus-visible),
.subscribe-section .method-btn:has(input:focus-visible),
.topic-chips label:has(input:focus-visible) {
    outline: 3px solid #1a73e8;
    outline-offset: 2px;
}

/* Calendar day cells are focusable (role=gridcell, tabindex=0). */
.events-calendar td:focus-visible {
    outline: 3px solid #1a73e8;
    outline-offset: -3px;
}

/* Skip link: ensure it lands above sticky header chrome when focused. */
.skip-to-main:focus,
.skip-to-main:focus-visible {
    z-index: 2000;
}

/* 2.3.3 Animation from Interactions / 2.2.2 Pause, Stop, Hide — honor the OS
   "reduce motion" setting: stop marquees/carousels auto-animating and make
   smooth-scroll / transitions effectively instant. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    html {
        scroll-behavior: auto !important;
    }
}