/* ==========================================================================
   1. Authentic Design System Tokens
   ========================================================================== */
:root {
    /* Brand Colors */
    --brand-teal: #008285;        /* Active accent from appearance.php */
    --brand-black: #000000;       /* Primary menu background */
    --white: #FFFFFF;
    
    /* Text Neutrals */
    --neutral-dark: #1A2124;      /* High contrast body text */
    --neutral-light: #F5F5F5;     /* Ad banner container background */
    --neutral-input: #E2E8E7;     /* Input fields & select backgrounds */
    
    /* Typography from appearance.php */
    --font-headers: 'Raleway', sans-serif;
    --font-body: 'Roboto', sans-serif;
    
    /* Structure & Layout */
    --wrap-max-width: 1200px;     /* Core container width from old Additional CSS */
    --radius-card: 10px;          /* Match old image border-radius */
    --radius-pill: 30px;          /* For tags and chips */
    
    /* Effects */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.15);
    --transition-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Base resets to enforce across the homepage */
body {
    font-family: var(--font-body);
    color: var(--neutral-dark);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headers);
    color: var(--brand-black);
}

.wrap {
    max-width: var(--wrap-max-width);
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}
.entry-content {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.entry-content > .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
}

.rn27-lead-grid,
.rn27-muni-grid,
.rn27-spotlight-grid,
.rn27-latest-list,
.rn27-sponsors-grid {
    margin-bottom: 60px;
}

/* ==========================================================================
   2. Component: Immersive Discovery Hero
   ========================================================================== */
.rn27-hero {
    position: relative;
    overflow: hidden;
    color: var(--white);
    text-align: center;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 90px 0 60px;
    box-sizing: border-box;
}

.rn27-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.rn27-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.rn27-hero__wrap {
    position: relative;
    z-index: 2;
}

/* The Cover block wraps its child blocks (Heading, Paragraph, Search,
   Buttons) in its own inner container and applies WordPress's default
   block-to-block spacing there, which is much larger than this design
   calls for. Zero that out and let our own margin-bottom rules below
   (on .rn27-hero__title, .rn27-hero__subtitle, etc.) control spacing
   instead, so it matches the original coded layout regardless of
   WordPress's global block-gap setting. */
.rn27-hero.wp-block-cover .wp-block-cover__inner-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
}

/* !important here on purpose: the block editor's Dimensions/Spacing panel
   writes margin directly onto the block as an inline style attribute
   (style="margin-top:...") when a value is set (even accidentally, e.g. by
   a stray click on a spacing preset). Inline styles always beat a normal
   stylesheet rule no matter how specific the selector is -- !important is
   the only way an external stylesheet can win that fight. */
.rn27-hero.wp-block-cover .wp-block-cover__inner-container > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Restore the actual intended gaps on top of that clean slate. These are
   written against the full parent chain (not just the class alone) so
   they're more specific than the reset rule above and reliably win. */
.rn27-hero.wp-block-cover .wp-block-cover__inner-container > .rn27-hero__title {
    margin-bottom: 16px !important;
}

.rn27-hero.wp-block-cover .wp-block-cover__inner-container > .rn27-hero__subtitle {
    margin-bottom: 40px !important;
}

.rn27-hero.wp-block-cover .wp-block-cover__inner-container > .rn27-hero__search-box {
    margin-top: 0 !important;
    margin-bottom: 30px !important;
}

.rn27-hero__title {
    color: var(--white);
    font-size: 3rem;
    line-height: 1.05;
    font-weight: 900;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

@media (min-width: 700px) {
    .rn27-hero__title {
        font-size: 4.5rem;
    }
}

.rn27-hero__subtitle {
    font-size: 1.25rem;
    margin-bottom: 40px;
    font-weight: 300;
}

.rn27-hero__search-box {
    max-width: 650px;
    margin: 0 auto 45px auto;
}

.rn27-hero__search-form {
    display: flex;
    background: var(--white);
    padding: 6px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.rn27-hero__search-input {
    flex-grow: 1;
    border: none;
    padding: 12px 15px;
    font-size: 1rem;
    color: var(--neutral-dark);
    outline: none;
}

.rn27-hero__search-submit {
    background: var(--brand-teal);
    color: var(--white);
    border: none;
    padding: 0 20px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.2s var(--transition-smooth);
}

.rn27-hero__search-submit:hover {
    background: var(--brand-black);
}

/* Core Search block, used inside a block with class "rn27-hero__search-box".
   The Search block has no per-inner-element "Additional CSS class" field,
   so these rules key off WordPress's own default class names for it
   instead, scoped to only apply inside our hero search wrapper. */
.rn27-hero__search-box .wp-block-search__inside-wrapper {
    background: var(--white);
    padding: 6px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: none;
}

.rn27-hero__search-box .wp-block-search__input {
    border: none !important;
    padding: 12px 15px;
    font-size: 1rem;
    outline: none;
}

.rn27-hero__search-box .wp-block-search__button {
    background: var(--brand-teal) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0 20px !important;
    cursor: pointer;
    transition: background 0.2s var(--transition-smooth);
}

.rn27-hero__search-box .wp-block-search__button:hover {
    background: var(--brand-black) !important;
}

.rn27-hero__quick-access {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.rn27-hero__label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.8);
}

.rn27-hero__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* When you add a class to a Button block in wp-admin, WordPress puts it on
   the OUTER wrapper div (.wp-block-button), not the actual clickable link
   inside it (.wp-block-button__link) -- that inner link keeps its own
   default WordPress styling unless told otherwise, which is what caused
   the "pill inside a pill" look. Fix: strip the outer wrapper down to
   nothing visual, and move all the real chip styling onto the inner link
   instead, with !important so it beats WordPress's own default button
   fill color. */
.rn27-chip {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    display: inline-flex;
}

.rn27-chip .wp-block-button__link {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--white) !important;
    text-decoration: none;
    padding: 12px 26px !important;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--radius-pill) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(4px);
    transition: all 0.2s var(--transition-smooth);
}

.rn27-chip--primary .wp-block-button__link {
    background: var(--brand-teal) !important;
    border-color: var(--brand-teal) !important;
}

.rn27-chip--primary:hover .wp-block-button__link {
    background: var(--white) !important;
    color: var(--brand-teal) !important;
}

.rn27-chip:hover .wp-block-button__link {
    background: var(--white) !important;
    color: var(--brand-teal) !important;
}

.rn27-chip:hover {
    background: var(--white);
    color: var(--brand-teal);
    transform: translateY(-1px);
}

/* ==========================================================================
   3. Component: Municipality Grid & Cards
   ========================================================================= */
.rn27-municipalities-section {
    padding: 60px 0;
    background: #FAFAFA;
}

.rn27-section-header {
    margin-bottom: 40px !important;
    margin-top: 0 !important;
}

/* This title/subtitle pair repeats across every remaining homepage
   section (Municipality, Spotlight, Latest News, Business Spotlight...),
   built as Heading/Paragraph blocks each time. !important here means it
   only has to be fixed once, here, instead of re-fighting the block
   editor's Dimensions panel on every section as it gets built. */
.rn27-section-title {
    font-size: 2rem;
    font-weight: 800;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    position: relative;
    display: inline-block;
}

.rn27-section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--brand-teal);
    margin-top: 8px;
    border-radius: 2px;
}

.rn27-section-subtitle {
    font-size: 1rem;
    color: #606F7B;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
}

/* rn27-muni-grid goes on the outer Group/Columns block wrapping all 6
   town Query Loop blocks. rn27-muni-card goes on each individual Query
   Loop's "Post Template" -- since each town's Query Loop only returns 1
   post, .wp-block-post here is effectively "the card" for that town.
   Structure-only for now (image + title + excerpt) -- the teal town-name
   badge from the original design is left for a later styling pass. */
.rn27-municipalities-section {
    padding: 60px 0;
    background: var(--white);
}

.rn27-muni-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
}

@media (min-width: 640px) {
    .rn27-muni-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 900px) {
    .rn27-muni-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

.rn27-muni-card {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.rn27-muni-card .wp-block-post {
    position: relative !important;
    background: var(--white) !important;
    border-radius: var(--radius-card) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm);
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    height: 100%;
}

.rn27-muni-card .wp-block-post-featured-image {
    position: relative !important;
    height: 260px !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden;
}

.rn27-muni-card .wp-block-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.rn27-muni-card .rn27-muni-card__badge {
    position: absolute !important;
    top: 226px;
    left: 15px;
    z-index: 2;
    background: var(--brand-teal) !important;
    color: var(--white) !important;
    padding: 5px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-pill) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 !important;
}

.rn27-muni-card .wp-block-post-title {
    font-size: 1.35rem !important;
    line-height: 1.3;
    font-weight: 700 !important;
    margin: 22px 22px 10px 22px !important;
}

.rn27-muni-card .wp-block-post-title a {
    color: var(--brand-black) !important;
    text-decoration: none !important;
    cursor: pointer;
}

.rn27-muni-card .wp-block-post-title a:hover {
    color: var(--brand-teal) !important;
}

.rn27-muni-card .wp-block-post-excerpt {
    font-size: 0.95rem !important;
    color: #4A5568 !important;
    margin: 0 22px 22px 22px !important;
}

/* ==========================================================================
   4. Component: Header & Mega-Menu Navigation
   ========================================================================== */
body.rn27-no-scroll {
    overflow: hidden;
}

.rn27-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--neutral-input);
    transition: box-shadow 0.2s var(--transition-smooth);
}

.rn27-header.is-scrolled {
    box-shadow: var(--shadow-sm);
}

.rn27-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 24px;
}

@media (min-width: 900px) {
    .rn27-header__bar {
        padding-left: 40px;
        padding-right: 40px;
    }
}

.rn27-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.rn27-header__logo-text {
    font-family: var(--font-headers);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--brand-black);
    letter-spacing: -0.01em;
}

.rn27-header__logo img {
    max-height: 68px;
    width: auto;
    display: block;
}

/* Desktop nav is hidden until the tablet/desktop breakpoint */
.rn27-nav {
    display: none;
}

.rn27-nav__list {
    display: flex;
    align-items: center;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rn27-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--neutral-dark);
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 6px;
    transition: color 0.2s ease;
}

.rn27-nav__link:hover,
.rn27-nav__link[aria-expanded="true"] {
    color: var(--brand-teal);
}

.rn27-nav__chevron {
    transition: transform 0.2s var(--transition-smooth);
}

.rn27-nav__link[aria-expanded="true"] .rn27-nav__chevron {
    transform: rotate(180deg);
}

.rn27-header__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.rn27-header__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--neutral-dark);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.rn27-header__icon-btn:hover,
.rn27-header__icon-btn[aria-expanded="true"] {
    background: var(--neutral-light);
    color: var(--brand-teal);
}

/* Header search bar (toggled) */
.rn27-header__search-bar {
    border-top: 1px solid var(--neutral-input);
    background: var(--neutral-light);
}

.rn27-header__search-form {
    display: flex;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 8px;
}

.rn27-header__search-input {
    flex-grow: 1;
    border: none;
    background: var(--white);
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 1rem;
    color: var(--neutral-dark);
    outline: none;
}

.rn27-header__search-submit {
    background: var(--brand-teal);
    color: var(--white);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s var(--transition-smooth);
}

.rn27-header__search-submit:hover {
    background: var(--brand-black);
}

/* Desktop mega-menu dropdown panels -- floating rounded card,
   positioned flush under the header via --rn27-header-bottom
   (set in main.js so it stays correct with/without the admin bar). */
@keyframes rn27-dropdown-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.rn27-mega {
    position: fixed;
    left: 50%;
    top: var(--rn27-header-bottom, 64px);
    width: min(1200px, calc(100% - 40px));
    background: var(--white);
    border-radius: var(--radius-card);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    z-index: 90;
    transform: translateX(-50%) translateY(-8px);
    opacity: 0;
    margin-top: 12px;
}

.rn27-mega:not([hidden]) {
    animation: rn27-dropdown-in 0.22s var(--transition-smooth) forwards;
}

.rn27-mega__inner {
    display: flex;
    gap: 40px;
    padding: 32px 32px 28px;
}

.rn27-mega__col--links {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px 40px;
    align-content: start;
}

.rn27-mega__section {
    min-width: 0;
}

.rn27-mega__heading {
    font-family: var(--font-headers);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brand-teal);
    margin: 0 0 14px 0;
}

.rn27-mega__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rn27-mega__link {
    color: var(--neutral-dark);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.rn27-mega__link:hover {
    color: var(--brand-teal);
    transform: translateX(3px);
}

.rn27-mega__col--featured {
    width: 480px;
    flex-shrink: 0;
    border-left: 1px solid var(--neutral-input);
    padding-left: 32px;
}

.rn27-mega__heading--featured {
    color: var(--neutral-dark);
}

.rn27-mega__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--neutral-light);
    border-top: 1px solid var(--neutral-input);
    padding: 18px 32px;
}

.rn27-mega__footer-text {
    font-weight: 700;
    color: var(--brand-black);
    margin: 0 0 2px 0;
    font-size: 0.95rem;
}

.rn27-mega__footer-sub {
    font-size: 0.85rem;
    color: #606f7b;
    margin: 0;
}

.rn27-mega__footer-cta {
    flex-shrink: 0;
    background: var(--brand-teal);
    color: var(--white);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    transition: background 0.2s ease;
}

.rn27-mega__footer-cta:hover {
    background: var(--brand-black);
}

.rn27-mega-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 80;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.rn27-mega-backdrop:not([hidden]) {
    opacity: 1;
}

/* Featured carousel */
.rn27-carousel__slides {
    position: relative;
    height: 300px;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.rn27-carousel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--transition-smooth);
}

.rn27-carousel__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.rn27-carousel__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rn27-carousel__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
    color: var(--white);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rn27-carousel__cta {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--white);
    opacity: 0.9;
}

.rn27-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.rn27-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neutral-input);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.rn27-carousel__dot.is-active {
    background: var(--brand-teal);
    transform: scale(1.25);
}

/* Mobile drawer */
.rn27-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 95;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.rn27-drawer-backdrop:not([hidden]) {
    opacity: 1;
}

.rn27-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(85vw, 360px);
    height: 100%;
    background: var(--white);
    z-index: 100;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    transition: right 0.3s var(--transition-smooth);
    overflow: hidden;
}

.rn27-drawer.is-open {
    right: 0;
}

.rn27-drawer__track {
    display: flex;
    width: 200%;
    height: 100%;
    transition: transform 0.3s var(--transition-smooth);
}

.rn27-drawer__track.is-sub-active {
    transform: translateX(-50%);
}

.rn27-drawer__panel {
    width: 50%;
    flex-shrink: 0;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.rn27-drawer__sticky {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--white);
    flex-shrink: 0;
    border-bottom: 1px solid var(--neutral-input);
}

.rn27-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    flex-shrink: 0;
}

.rn27-drawer__logo {
    max-height: 48px;
    width: auto;
    display: block;
}

.rn27-drawer__close,
.rn27-drawer__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--neutral-dark);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 8px;
}

.rn27-drawer__search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px;
    padding: 4px 4px 4px 12px;
    background: var(--neutral-light);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.rn27-drawer__search-input {
    flex-grow: 1;
    border: none;
    background: none;
    outline: none;
    padding: 8px 0;
    font-size: 0.95rem;
    color: var(--neutral-dark);
}

.rn27-drawer__search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-teal);
    color: var(--white);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.rn27-drawer__links {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.rn27-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    color: var(--neutral-dark);
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-light);
    cursor: pointer;
}

.rn27-drawer__sub-title {
    font-family: var(--font-headers);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--brand-black);
    padding: 16px 16px 18px 16px;
    margin: 0;
}

.rn27-drawer__sub-body {
    padding-bottom: 16px;
}

.rn27-drawer__section {
    padding: 12px 16px 4px 16px;
}

.rn27-drawer__section-heading {
    font-family: var(--font-headers);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-teal);
    margin: 0 0 8px 0;
}

.rn27-drawer__sub-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rn27-drawer__sub-link {
    display: block;
    padding: 10px 0;
    color: var(--neutral-dark);
    text-decoration: none;
    font-size: 0.95rem;
}

/* ---- Breakpoint: reveal desktop nav, retire mobile drawer trigger ---- */
@media (min-width: 900px) {
    .rn27-nav {
        display: block;
    }

    .rn27-header__menu-btn {
        display: none;
    }

    .rn27-drawer,
    .rn27-drawer-backdrop {
        display: none;
    }
}

/* ==========================================================================
   5. Component: Lead Story Spotlight (two large cards)
   ========================================================================== */
.rn27-lead-section {
    padding: 60px 0;
    background: var(--white);
}

/* "rn27-lead-grid" goes on the QUERY LOOP'S "Post Template" block (the
   shared repeating pattern), which is the actual grid container. Nothing
   further needs to be classed by hand for the individual cards -- the
   rules below target ".wp-block-post", WordPress's own automatic class
   for each individual repeated post, so every card is styled
   automatically no matter how many posts the query returns. */
.rn27-lead-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 24px;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 768px) {
    .rn27-lead-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rn27-lead-grid .wp-block-post {
    position: relative !important;
    display: block !important;
    height: 340px !important;
    border-radius: var(--radius-card) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm);
    margin: 0 !important;
}

.rn27-lead-grid .wp-block-post .wp-block-post-featured-image {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.rn27-lead-grid .wp-block-post .wp-block-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s var(--transition-smooth);
}

.rn27-lead-grid .wp-block-post:hover .wp-block-post-featured-image img {
    transform: scale(1.04);
}

.rn27-lead-grid .wp-block-post .wp-block-post-title {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2;
    margin: 0 !important;
    padding: 70px 28px 28px 28px !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.15) 65%, transparent 100%) !important;
}

.rn27-lead-grid .wp-block-post .wp-block-post-title a {
    color: var(--white) !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
	cursor: pointer;
}
.rn27-lead-grid .wp-block-post .wp-block-post-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.rn27-lead-grid .wp-block-post .wp-block-post-date {
    position: absolute !important;
    top: 20px;
    left: 20px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.55) !important;
    color: var(--white) !important;
    padding: 5px 12px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: var(--radius-pill) !important;
    margin: 0 !important;
}

/* ==========================================================================
   6. Component: "In the Spotlight" three-image grid
   ========================================================================== */
.rn27-spotlight-section {
    padding: 60px 0;
    background: var(--neutral-light);
}

/* Same technique as rn27-lead-grid: rn27-spotlight-grid goes on the Query
   Loop's Post Template, and the rules below target WordPress's own
   .wp-block-post class automatically -- no per-card classing needed. */
.rn27-spotlight-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 20px;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 768px) {
    .rn27-spotlight-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.rn27-spotlight-grid .wp-block-post {
    position: relative !important;
    display: block !important;
    height: 260px !important;
    border-radius: var(--radius-card) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm);
    margin: 0 !important;
}

.rn27-spotlight-grid .wp-block-post .wp-block-post-featured-image {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.rn27-spotlight-grid .wp-block-post .wp-block-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease;
}

.rn27-spotlight-grid .wp-block-post:hover .wp-block-post-featured-image img {
    transform: scale(1.05);
}

.rn27-spotlight-grid .wp-block-post .wp-block-post-title {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2;
    margin: 0 !important;
    padding: 50px 20px 20px 20px !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 65%) !important;
}

.rn27-spotlight-grid .wp-block-post .wp-block-post-title a {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
	cursor: pointer;
}

.rn27-spotlight-grid .wp-block-post .wp-block-post-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* ==========================================================================
   7. Component: Buttons (shared)
   ========================================================================== */
/* Same wrapper-vs-link issue as .rn27-chip above: a class added to a
   Button block in wp-admin lands on the outer .wp-block-button div, not
   the inner .wp-block-button__link that actually shows WordPress's
   default styling. Strip the wrapper, style the inner link, !important
   throughout so it beats both WordPress's own default button fill and
   any color picked in the block's own Color panel. */
.rn27-button {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    display: inline-flex;
}

.rn27-button .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 26px !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s var(--transition-smooth);
    cursor: pointer;
    border: none !important;
}

.rn27-button--primary .wp-block-button__link {
    background: var(--brand-teal) !important;
    color: var(--white) !important;
}

.rn27-button--primary:hover .wp-block-button__link {
    background: var(--white) !important;
    color: var(--brand-teal) !important;
}

.rn27-button--outline {
    margin-top: 30px !important;
}

.rn27-button--outline .wp-block-button__link {
    background: transparent !important;
    color: var(--brand-teal) !important;
    border: 2px solid var(--brand-teal) !important;
    padding: 10px 24px !important;
}

.rn27-button--outline:hover .wp-block-button__link {
    background: var(--brand-teal) !important;
    color: var(--white) !important;
}

/* ==========================================================================
   8. Component: What's Happening (events row)
   ========================================================================== */
.rn27-events-section {
    padding: 60px 0;
    background: #fafafa;
}

.rn27-events-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.rn27-events-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 40px;
}

@media (min-width: 768px) {
    .rn27-events-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.rn27-event-card {
    display: block;
    text-decoration: none;
    background: var(--white);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s var(--transition-smooth);
}

.rn27-event-card:hover {
    transform: translateY(-3px);
}

.rn27-event-card__img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}

.rn27-event-card__body {
    padding: 18px 20px;
}

.rn27-event-card__meta {
    color: var(--brand-teal);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 8px 0;
}

.rn27-event-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-black);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.rn27-event-card__location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #606f7b;
    font-size: 0.85rem;
    margin: 0;
}

/* ==========================================================================
   9. Component: Latest News list
   ========================================================================== */
.rn27-latest-section {
    padding: 60px 0;
    background: var(--white);
}

.rn27-latest-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Same wrapper-vs-link fix as .rn27-chip / .rn27-button. */
.rn27-latest-filter {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.rn27-latest-filter .wp-block-button__link {
    background: var(--neutral-light) !important;
    color: var(--neutral-dark) !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    border-radius: var(--radius-pill) !important;
    transition: all 0.2s ease;
}

.rn27-latest-filter:hover .wp-block-button__link {
    background: var(--brand-teal) !important;
    color: var(--white) !important;
}

/* rn27-latest-list goes on the Query Loop's Post Template. Each row
   (.wp-block-post) is a CSS Grid with 2 columns: a fixed-width image
   column and a text column. Featured Image is placed in column 1 and
   spans 3 rows; Date/Title/Excerpt are each independently placed in
   column 2. This means Post Date, Post Title, and Post Excerpt do NOT
   need to be grouped/wrapped in anything -- they can stay as separate,
   ungrouped blocks directly inside Post Template and still end up
   stacked correctly next to the image. */
.rn27-latest-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0;
    margin-top: 36px;
    list-style: none !important;
    padding: 0 !important;
}

.rn27-latest-list .wp-block-post {
    display: grid !important;
    grid-template-columns: 96px 1fr !important;
    column-gap: 20px !important;
    align-items: center !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid var(--neutral-input) !important;
    margin: 0 !important;
}

.rn27-latest-list .wp-block-post-featured-image {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    width: 96px !important;
    height: 96px !important;
    margin: 0 !important;
    overflow: hidden;
    border-radius: var(--radius-card) !important;
}

.rn27-latest-list .wp-block-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.rn27-latest-list .wp-block-post-date {
    grid-column: 2 !important;
    font-size: 0.78rem !important;
    color: var(--brand-teal) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    margin: 0 !important;
}

.rn27-latest-list .wp-block-post-title {
    grid-column: 2 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin: 4px 0 !important;
    line-height: 1.3;
}

.rn27-latest-list .wp-block-post-title a {
    color: #000000 !important;
    text-decoration: none !important;
}

.rn27-latest-list .wp-block-post-excerpt {
    grid-column: 2 !important;
    font-size: 0.9rem !important;
    color: #606f7b !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
}

/* ==========================================================================
   10. Component: Sponsor / business spotlight
   ========================================================================== */
.rn27-sponsors-section {
    padding: 60px 0;
    background: #fafafa;
}

.rn27-sponsors-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-top: 40px;
}

@media (min-width: 640px) {
    .rn27-sponsors-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 900px) {
    .rn27-sponsors-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

.rn27-sponsor-card {
    position: relative;
    display: block;
    text-decoration: none;
    background: var(--white);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--neutral-input);
    transition: transform 0.2s var(--transition-smooth);
}

.rn27-sponsor-card:hover {
    transform: translateY(-3px);
}

.rn27-sponsor-card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    background: rgba(0, 0, 0, 0.55);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

.rn27-sponsor-card__img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.rn27-sponsor-card__body {
    padding: 18px 20px;
}

.rn27-sponsor-card__name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-black);
    margin: 0 0 6px 0;
}

.rn27-sponsor-card__tagline {
    font-size: 0.9rem;
    color: #606f7b;
    margin: 0;
}

/* ==========================================================================
   11. Component: Newsletter CTA
   ========================================================================== */
.rn27-newsletter-section {
    padding: 70px 0;
    background: var(--white);
}

.rn27-newsletter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: center;
}

@media (min-width: 768px) {
    .rn27-newsletter-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.rn27-eyebrow {
    color: var(--brand-teal);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    margin: 0 0 10px 0;
}

.rn27-newsletter-title {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 14px 0;
    line-height: 1.2;
}

.rn27-newsletter-text {
    font-size: 1rem;
    color: #606f7b;
    margin: 0 0 26px 0;
}

.rn27-newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rn27-newsletter-input {
    flex: 1 1 240px;
    padding: 12px 16px;
    border: 1px solid var(--neutral-input);
    border-radius: 6px;
    font-size: 1rem;
    color: var(--neutral-dark);
    outline: none;
}

.rn27-newsletter-input:focus {
    border-color: var(--brand-teal);
}

.rn27-newsletter-media {
    border-radius: var(--radius-card);
    overflow: hidden;
}

.rn27-newsletter-img {
    width: 100%;
    height: 100%;
    max-height: 340px;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   12. Component: Site footer
   ========================================================================== */
.rn27-footer {
    background: #e6f4f4;
    padding-top: 60px;
}

.rn27-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 0 24px 40px;
}

@media (min-width: 700px) {
    .rn27-footer__top {
        grid-template-columns: 1.2fr repeat(2, 1fr);
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 1100px) {
    .rn27-footer__top {
        grid-template-columns: 1.2fr repeat(4, 1fr);
    }
}

.rn27-footer__logo {
    max-height: 44px;
    width: auto;
    display: block;
    margin-bottom: 16px;
}

.rn27-footer__blurb {
    font-size: 0.9rem;
    color: #3f5457;
    line-height: 1.6;
    max-width: 320px;
    margin: 0;
}

.rn27-footer__heading {
    font-family: var(--font-headers);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--brand-black);
    margin: 0 0 16px 0;
}

.rn27-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rn27-footer__links a {
    color: #3f5457;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.rn27-footer__links a:hover {
    color: var(--brand-teal);
}

.rn27-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

@media (min-width: 700px) {
    .rn27-footer__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-left: 40px;
        padding-right: 40px;
    }
}

.rn27-footer__socials {
    display: flex;
    gap: 10px;
}

.rn27-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #3f5457;
    transition: all 0.2s ease;
}

.rn27-footer__social-link:hover {
    background: var(--brand-teal);
    color: var(--white);
}

.rn27-footer__copyright {
    font-size: 0.82rem;
    color: #3f5457;
    margin: 0;
}

.rn27-footer__bottom-link {
    font-size: 0.82rem;
    color: #3f5457;
    text-decoration: underline;
}

.rn27-footer__bottom-link:hover {
    color: var(--brand-teal);
}