/* ==========================================================================
   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;
	height: 100%;
}

.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);
}
@media (max-width: 767px) {
    .rn27-header__bar {
        justify-content: flex-start;
        gap: 4px;
    }
    .rn27-header__logo {
        order: 1;
    }
    .rn27-header__actions {
        order: 2;
        margin-left: auto;
    }
    .rn27-header__nav-wrap {
        order: 3;
    }
}
/* 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;
}

/* ==========================================================================
   9b. Component: Category / Town archive pages
   ========================================================================== */
.rn27-archive {
    padding: 60px 0;
}

.rn27-archive__header {
    margin-bottom: 10px;
}

.rn27-archive__description {
    max-width: 700px;
}

.rn27-archive__empty {
    margin-top: 36px;
    color: #606f7b;
    font-size: 1rem;
}

.rn27-archive__pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.rn27-archive__pagination a,
.rn27-archive__pagination span {
    display: inline-block;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: var(--neutral-light);
    color: var(--neutral-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
}

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

.rn27-archive__pagination span.current {
    background: var(--brand-teal);
    color: var(--white);
}

/* ==========================================================================
   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);
    }
}

/* The 5 footer columns are now block-editable widget areas (see
   functions.php > rn27_register_footer_sidebars). Whoever edits these in
   wp-admin just adds plain native blocks inside a Group block -- no
   custom CSS classes needed -- so these rules target WordPress's own
   default block classes (.wp-block-heading, list markup, .wp-block-image,
   .wp-block-social-links) scoped inside .rn27-footer__brand /
   .rn27-footer__col, instead of the old hand-written classes. */
.rn27-footer__brand img,
.rn27-footer__brand .wp-block-image img {
    max-height: 44px;
    width: auto;
    display: block;
    margin-bottom: 16px;
}

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

.rn27-footer__col .wp-block-heading,
.rn27-footer__brand .wp-block-heading {
    font-family: var(--font-headers) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    color: var(--brand-black) !important;
    margin: 0 0 16px 0 !important;
}

.rn27-footer__col ul:not(.wp-block-social-links) {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.rn27-footer__col ul a:hover {
    color: var(--brand-teal) !important;
}

.rn27-footer__placeholder {
    font-size: 0.85rem;
    color: #9aa5a8;
    font-style: italic;
    margin: 0;
    max-width: 220px;
}

.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;
    }
}

/* Native Social Icons block (core/social-links), added inside the
   "Footer: Connect With Us" widget area. Overrides its default styling
   to match the site's brand instead of WordPress's default look. */
.rn27-footer__col .wp-block-social-links {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.rn27-footer__col .wp-block-social-links li {
    list-style: none !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden;
    box-sizing: border-box !important;
    transition: transform 0.2s ease;
}

.rn27-footer__col .wp-block-social-links li:hover {
    transform: scale(1.12);
}

.rn27-footer__col .wp-block-social-links li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.rn27-footer__col .wp-block-social-links li svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 auto !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* ==========================================================================
   13. Component: Town and Genre Landing Pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   Town hero
   -------------------------------------------------------------------------- */

.rn27-town-hero {
    position: relative;
    z-index: 1;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 180px;
    padding: 24px 20px;

    box-sizing: border-box;
    background: var(--brand-teal);
    color: var(--white);
}

.rn27-town-hero__inner {
    width: 100%;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rn27-town-hero__title {
    margin: 0 !important;
    color: var(--white) !important;
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    line-height: 1.1;
    font-weight: 800;
    text-align: center !important;
    letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Main town section
   -------------------------------------------------------------------------- */

.rn27-town-main {
    position: relative;
    z-index: 2;
    padding: 0 0 70px;
    background: var(--white);
}

.rn27-town-main__inner {
    position: relative;
}
/* ==========================================================================
   Larger Town Information Card and Town Page Content
   ========================================================================== */

/* --------------------------------------------------------------------------
   Town hero
   Keep the hero as a concise page identifier while allowing the information
   card to be the dominant element.
   -------------------------------------------------------------------------- */



.rn27-town-hero__title {
    margin: 0 !important;
    color: var(--white) !important;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    line-height: 1.05;
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.025em;
}

/* --------------------------------------------------------------------------
   Larger town information card
   -------------------------------------------------------------------------- */

.rn27-town-info-card {
    position: relative;
    z-index: 3;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    width: min(1040px, 100%) !important;
    min-height: 170px;

    margin: 24px auto 42px !important;
    padding: 28px 34px !important;
    gap: 28px !important;

    box-sizing: border-box;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-top: 5px solid var(--brand-teal);
    border-radius: var(--radius-card);

    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.rn27-town-info-card > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Larger town seal */

.rn27-town-info-card__seal {
    flex: 0 0 125px !important;
    width: 125px !important;
    margin: 0 !important;
}

.rn27-town-info-card__seal img {
    display: block !important;
    width: 125px !important;
    height: 125px !important;
    max-width: none !important;
    object-fit: contain !important;
}

/* Town information text */

.rn27-town-info-card__details {
    flex: 1 1 350px !important;
    min-width: 0;
}

.rn27-town-info-card__name {
    margin: 0 0 8px !important;
    color: var(--brand-black) !important;
    font-size: 1.65rem !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}

.rn27-town-info-card__meta {
    margin: 0 !important;
    color: #58676b !important;
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
}

/* Town information action buttons */

.rn27-town-info-card__actions {
    display: flex !important;
    flex: 0 1 auto;
    flex-wrap: wrap !important;
    justify-content: flex-end;
    gap: 11px !important;
    margin: 0 0 0 auto !important;
}

.rn27-town-action {
    display: inline-flex;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

.rn27-town-action .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 20px !important;

    background: var(--brand-teal) !important;
    color: var(--white) !important;
    border: 1px solid var(--brand-teal) !important;
    border-radius: var(--radius-pill) !important;

    font-size: 0.92rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.rn27-town-action:hover .wp-block-button__link {
    background: var(--brand-black) !important;
    border-color: var(--brand-black) !important;
    color: var(--white) !important;
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Municipality navigation
   -------------------------------------------------------------------------- */

.rn27-town-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 9px !important;

    width: 100%;
    max-width: 100%;
    margin: 0 0 42px !important;

    box-sizing: border-box;
}

.rn27-town-tab {
    display: inline-flex;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

.rn27-town-tab .wp-block-button__link {
    padding: 8px 16px !important;

    background: #edf0f0 !important;
    color: #2f393c !important;
    border: 1px solid #e1e5e5 !important;
    border-radius: var(--radius-pill) !important;

    font-size: 0.8rem !important;
    line-height: 1.2;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

/* Hover = light state, NOT selected */

.rn27-town-tab:not(.rn27-town-tab--active):hover
.wp-block-button__link {

    background: #e5eeee !important;

    color: var(--brand-teal) !important;

    border-color: var(--brand-teal) !important;
}


/* Only the genuinely selected filter is solid teal */

.rn27-town-tab--active
.wp-block-button__link {

    background: var(--brand-teal) !important;

    color: var(--white) !important;

    border-color: var(--brand-teal) !important;
}


/* Active remains teal on hover */

.rn27-town-tab--active:hover
.wp-block-button__link {

    background: var(--brand-teal) !important;

    color: var(--white) !important;

    border-color: var(--brand-teal) !important;
}

/* --------------------------------------------------------------------------
   Advertisement placeholder
   -------------------------------------------------------------------------- */

.rn27-ad-slot {
    position: relative;

    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 100%;
    min-height: 92px;

    margin: 52px 0 34px !important;
    padding: 15px !important;

    box-sizing: border-box;
    background: #fafafa;
    border: 1px dashed #aeb9bb;
    border-radius: 8px;

    color: #7b8789;
    text-align: center;
}

.rn27-ad-slot::before {
    content: "ADVERTISEMENT";

    position: absolute;
    top: -25px;
    left: 50%;

    transform: translateX(-50%);

    color: #8b9597;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.rn27-ad-slot > * {
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Town news card grid
   Apply rn27-town-grid to the Query Loop Post Template block.
   -------------------------------------------------------------------------- */

.rn27-town-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;

    width: 100%;
    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;
    list-style: none !important;
}

.rn27-town-grid .wp-block-post {
    position: relative;

    display: flex !important;
    flex-direction: column !important;

    min-width: 0;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);

    transition:
        transform 0.22s var(--transition-smooth),
        box-shadow 0.22s var(--transition-smooth);
}

.rn27-town-grid .wp-block-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.16);
}

.rn27-town-grid .wp-block-post-featured-image {
    width: 100% !important;
    aspect-ratio: 16 / 10;

    margin: 0 !important;
    overflow: hidden;
}

.rn27-town-grid .wp-block-post-featured-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.rn27-town-grid .wp-block-post-featured-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    transition: transform 0.35s var(--transition-smooth);
}

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

.rn27-town-grid .wp-block-post-date {
    margin: 16px 18px 0 !important;

    color: var(--brand-teal) !important;
    font-size: 0.72rem !important;
    line-height: 1.25;
    font-weight: 800 !important;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.rn27-town-grid .wp-block-post-title {
    margin: 6px 18px 8px !important;

    font-size: 1.13rem !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

.rn27-town-grid .wp-block-post-title a {
    color: var(--brand-black) !important;
    text-decoration: none !important;
}

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

.rn27-town-grid .wp-block-post-excerpt {
    margin: 0 18px 18px !important;

    color: #606f7b !important;
    font-size: 0.87rem !important;
    line-height: 1.45;
}

.rn27-town-grid .wp-block-post-excerpt__excerpt {
    display: -webkit-box;

    margin: 0 !important;
    overflow: hidden;

    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.rn27-town-grid .wp-block-post-excerpt__more-text {
    display: none !important;
}

/* Add spacing when an Ad Slot immediately follows the Query Loop */
.rn27-town-main__inner
> .wp-block-query
+ .rn27-ad-slot {
    margin-top: 52px !important;
}


/* --------------------------------------------------------------------------
   Query pagination
   -------------------------------------------------------------------------- */

.rn27-town-pagination {
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 8px;

    margin: 32px 0 0 !important;
}

.rn27-town-pagination .wp-block-query-pagination-numbers {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0 !important;
}

.rn27-town-pagination a,
.rn27-town-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 34px;
    min-height: 34px;
    padding: 6px 11px;

    box-sizing: border-box;
    background: var(--white);
    color: var(--neutral-dark);
    border: 1px solid var(--neutral-input);
    border-radius: var(--radius-pill);

    font-size: 0.78rem;
    line-height: 1;
    font-weight: 700;
    text-decoration: none !important;
}

.rn27-town-pagination a:hover,
.rn27-town-pagination .page-numbers.current {
    background: var(--brand-teal);
    color: var(--white);
    border-color: var(--brand-teal);
}

/* --------------------------------------------------------------------------
   Tablet responsive behavior
   -------------------------------------------------------------------------- */

@media (max-width: 999px) {
    .rn27-town-info-card {
        width: min(900px, 100%) !important;
        padding: 26px !important;
        gap: 22px !important;
    }

    .rn27-town-info-card__seal {
        flex-basis: 110px !important;
        width: 110px !important;
    }

    .rn27-town-info-card__seal img {
        width: 110px !important;
        height: 110px !important;
    }

    .rn27-town-info-card__name {
        font-size: 1.5rem !important;
    }

    .rn27-town-info-card__meta {
        font-size: 1rem !important;
    }

    .rn27-town-info-card__actions {
        flex-basis: 100%;
        justify-content: center !important;
        margin-left: 0 !important;
    }

    .rn27-town-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* --------------------------------------------------------------------------
   Mobile responsive behavior
   This replaces the previous max-width: 760px media query.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
    .rn27-town-hero {
        padding-top: 22px;
        padding-bottom: 22px;
    }

    .rn27-town-hero__title {
        font-size: clamp(2rem, 10vw, 2.7rem);
    }

    .rn27-town-info-card {
        flex-direction: column !important;
        align-items: center !important;

        width: calc(100% - 24px) !important;
        min-height: 0;

        margin-top: 16px !important;
        margin-bottom: 34px !important;
        padding: 24px 18px !important;
        gap: 16px !important;

        text-align: center;
    }

    .rn27-town-info-card__seal {
        flex: 0 0 96px !important;
        width: 96px !important;
    }

    .rn27-town-info-card__seal img {
        width: 96px !important;
        height: 96px !important;
    }

    .rn27-town-info-card__details {
        flex: 0 1 auto !important;
        width: 100%;
    }

    .rn27-town-info-card__name {
        margin-bottom: 7px !important;
        font-size: 1.38rem !important;
        line-height: 1.2 !important;
    }

    .rn27-town-info-card__meta {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    .rn27-town-info-card__actions {
        width: 100%;

        justify-content: center !important;
        margin-left: 0 !important;
    }

    .rn27-town-action {
        flex: 1 1 155px;
    }

    .rn27-town-action .wp-block-button__link {
        width: 100%;
        padding: 11px 15px !important;
        font-size: 0.86rem !important;
        box-sizing: border-box;
    }

    .rn27-town-tabs {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;

        overflow-x: auto;
        padding-bottom: 7px;

        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .rn27-town-tab {
        flex: 0 0 auto;
    }
}

@media (max-width: 620px) {
    .rn27-town-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .rn27-town-grid .wp-block-post-featured-image {
        aspect-ratio: 16 / 9;
    }

    .rn27-ad-slot {
        min-height: 105px;
    }
}

@media (max-width: 430px) {
    .rn27-town-info-card {
        width: calc(100% - 16px) !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .rn27-town-info-card__actions {
        flex-direction: column !important;
    }

    .rn27-town-action {
        flex: 1 1 auto;
        width: 100%;
    }

    .rn27-town-action .wp-block-button__link {
        width: 100%;
    }
}

/* ---------------------------------------------------------------
   Individual article municipality hero
---------------------------------------------------------------- */

.rn27-single-town-hero {
    background: #008285;
    color: #fff;
    width: 100%;
}

.rn27-single-town-hero .wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 54px 24px;
    text-align: center;
}

.rn27-single-town-hero__title {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
}


/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 1000px) {

    .rn27-search-results-page {
        padding-top: 60px;
        padding-bottom: 70px;
    }

    .rn27-search-results-page .rn27-section-title {
        font-size: 3rem !important;
    }

    .rn27-search-results-page .rn27-latest-list .wp-block-post {
        grid-template-columns: 220px minmax(0, 1fr) !important;
        column-gap: 30px !important;
        padding: 30px 0 !important;
    }

    .rn27-search-results-page
    .rn27-latest-list
    .wp-block-post-featured-image {
        width: 220px !important;
        height: 150px !important;
    }

    .rn27-search-results-page
    .rn27-latest-list
    .wp-block-post-title {
        font-size: 1.45rem !important;
    }
}

/* ==========================================================================
   Block Editor alignment helpers
   These improve the editor layout without forcing the editor to reproduce
   the front-end card overlap exactly.
   ========================================================================== */

.editor-styles-wrapper .rn27-town-main__inner {
    width: 100% !important;
    max-width: var(--wrap-max-width) !important;

    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;

    box-sizing: border-box !important;
}

.editor-styles-wrapper .rn27-town-info-card {
    width: min(1040px, 100%) !important;

    /* Avoid overlapping editor controls while editing */
    margin: 24px auto 36px !important;

    box-sizing: border-box !important;
}

.editor-styles-wrapper .rn27-town-tabs {
    width: 100% !important;
    max-width: 100% !important;

    justify-content: center !important;
    box-sizing: border-box !important;
}

.editor-styles-wrapper .rn27-ad-slot {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}

.editor-styles-wrapper .rn27-town-main__inner > .wp-block-query {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}

.editor-styles-wrapper .rn27-muni-card > .wp-block-post:not(:first-child) {
    display: none !important;
}

.editor-styles-wrapper .rn27-lead-grid > .wp-block-post:nth-child(2) {
    display: none !important;
}

.editor-styles-wrapper .rn27-spotlight-grid > .wp-block-post:nth-child(2) {
    display: none !important;
}

/* ==========================================================================
   ROCKLAND NEWS — SEARCH RESULTS
   Mobile-first responsive card layout

   Mobile:  1 card per row
   Tablet:  2 cards per row
   Desktop: 3 cards per row
   ========================================================================== */


/* ==========================================================================
   1. SEARCH PAGE CONTAINER
   ========================================================================== */

.rn27-search-results-page {
    width: 100% !important;
    max-width: var(--wrap-max-width) !important;

    margin: 0 auto !important;
    padding: 40px 16px 60px !important;

    box-sizing: border-box;
}


/* ==========================================================================
   2. SEARCH PAGE HEADING
   ========================================================================== */

.rn27-search-results-page .rn27-archive__header {
    width: 100%;
    margin: 0 0 36px !important;
}


/* Search Results for: “nyack” */

.rn27-search-results-page .rn27-section-title {
    display: block !important;

    width: 100%;
    max-width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 2rem !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;

    color: var(--brand-black) !important;

    overflow-wrap: anywhere;
    word-break: normal;
}


/* Teal underline */

.rn27-search-results-page .rn27-section-title::after {
    content: '';

    display: block;

    width: 60px;
    height: 4px;

    margin-top: 16px;

    background: var(--brand-teal);

    border-radius: 2px;
}


/* "23 articles found" */

.rn27-search-results-page .rn27-section-subtitle {
    margin: 20px 0 0 !important;
    padding: 0 !important;

    color: #606f7b !important;

    font-size: 1rem !important;
    line-height: 1.4 !important;
}


/* ==========================================================================
   3. SEARCH RESULTS CONTAINER
   ========================================================================== */

.rn27-search-results-page .rn27-latest-list {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) !important;

    gap: 28px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* ==========================================================================
   4. INDIVIDUAL SEARCH RESULT CARD
   ========================================================================== */

.rn27-search-results-page
.rn27-latest-list
.wp-block-post {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    border: 1px solid #e9edef !important;
    border-radius: 14px !important;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.06),
        0 10px 24px rgba(0, 0, 0, 0.06);

    overflow: hidden !important;

    box-sizing: border-box;

    transition:
        transform 0.2s var(--transition-smooth),
        box-shadow 0.2s var(--transition-smooth);
}


/* Card hover */

.rn27-search-results-page
.rn27-latest-list
.wp-block-post:hover {
    transform: translateY(-3px);

    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.07),
        0 14px 30px rgba(0, 0, 0, 0.09);
}


/* Remove the normal Latest News bottom divider */

.rn27-search-results-page
.rn27-latest-list
.wp-block-post {
    border-bottom: 1px solid #e9edef !important;
}


/* ==========================================================================
   5. FEATURED IMAGE
   ========================================================================== */

.rn27-search-results-page
.rn27-latest-list
.wp-block-post-featured-image {
    position: relative !important;

    display: block !important;

    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 16 / 10;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 0 !important;

    background: var(--neutral-light);
}


/* Image link fills image area */

.rn27-search-results-page
.rn27-latest-list
.wp-block-post-featured-image a {
    display: block;

    width: 100%;
    height: 100%;
}


/* Actual image */

.rn27-search-results-page
.rn27-latest-list
.wp-block-post-featured-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    transition: transform 0.35s var(--transition-smooth);
}


/* Slight zoom on hover */

.rn27-search-results-page
.rn27-latest-list
.wp-block-post:hover
.wp-block-post-featured-image img {
    transform: scale(1.025);
}


/* ==========================================================================
   6. DATE
   ========================================================================== */

.rn27-search-results-page
.rn27-latest-list
.wp-block-post-date {
    display: block !important;

    grid-column: auto !important;
    grid-row: auto !important;

    width: auto !important;

    margin: 22px 20px 0 !important;
    padding: 0 !important;

    color: var(--brand-teal) !important;

    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;

    text-align: left !important;
}


/* ==========================================================================
   7. ARTICLE TITLE
   ========================================================================== */

.rn27-search-results-page
.rn27-latest-list
.wp-block-post-title {
    display: block !important;

    grid-column: auto !important;
    grid-row: auto !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 8px 20px 0 !important;
    padding: 0 !important;

    font-size: 1.3rem !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;

    text-align: left !important;

    overflow-wrap: anywhere;
}


/* Title link */

.rn27-search-results-page
.rn27-latest-list
.wp-block-post-title a {
    color: var(--brand-black) !important;

    text-decoration: none !important;
}


/* Title hover */

.rn27-search-results-page
.rn27-latest-list
.wp-block-post-title a:hover {
    color: var(--brand-teal) !important;
}


/* ==========================================================================
   8. ARTICLE EXCERPT
   ========================================================================== */

.rn27-search-results-page
.rn27-latest-list
.wp-block-post-excerpt {
    display: block !important;

    grid-column: auto !important;
    grid-row: auto !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 12px 20px 22px !important;
    padding: 0 !important;

    color: #606f7b !important;

    font-size: 0.95rem !important;
    line-height: 1.55 !important;

    text-align: left !important;

    overflow: hidden !important;
}


/* Actual excerpt paragraph */

.rn27-search-results-page
.rn27-latest-list
.wp-block-post-excerpt__excerpt {
    display: -webkit-box !important;

    margin: 0 !important;
    padding: 0 !important;

    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    overflow: hidden !important;
}


/* ==========================================================================
   9. POSTS WITHOUT FEATURED IMAGES
   ========================================================================== */

/*
 * A post with no image simply begins with the date.
 * Give it a little more vertical breathing room so it still feels
 * like a deliberate card rather than broken content.
 */

.rn27-search-results-page
.rn27-latest-list
.wp-block-post > .wp-block-post-date:first-child {
    margin-top: 26px !important;
}


/* ==========================================================================
   10. PAGINATION
   ========================================================================== */

.rn27-search-results-page .rn27-archive__pagination {
    width: 100%;

    margin-top: 44px;
}


.rn27-search-results-page
.rn27-archive__pagination
.nav-links {
    display: flex !important;

    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap: 8px !important;

    margin-top: 0 !important;
}


/* Pagination buttons */

.rn27-search-results-page
.rn27-archive__pagination a,
.rn27-search-results-page
.rn27-archive__pagination span {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 40px;
    min-height: 40px;

    padding: 8px 14px;

    border-radius: var(--radius-pill);

    background: var(--neutral-light);

    color: var(--neutral-dark);

    font-size: 0.85rem;
    font-weight: 600;

    text-decoration: none;

    box-sizing: border-box;
}


/* Pagination hover */

.rn27-search-results-page
.rn27-archive__pagination a:hover {
    background: var(--brand-teal);

    color: var(--white);
}


/* Current page */

.rn27-search-results-page
.rn27-archive__pagination
span.current {
    background: var(--brand-teal);

    color: var(--white);
}


/* ==========================================================================
   11. EMPTY SEARCH RESULTS
   ========================================================================== */

.rn27-search-results-page .rn27-archive__empty {
    width: 100%;
    max-width: 700px;

    margin: 0 !important;
    padding: 24px;

    background: var(--neutral-light);

    border-radius: var(--radius-card);

    box-sizing: border-box;
}


.rn27-search-results-page .rn27-archive__empty h2 {
    margin: 0 0 8px;

    font-size: 1.5rem;
}


.rn27-search-results-page .rn27-archive__empty p {
    margin: 0 0 20px;

    color: #606f7b;
}


/* Search form inside empty results */

.rn27-search-results-page
.rn27-archive__empty
.rn27-header__search-form {
    display: flex;

    width: 100%;

    gap: 8px;

    padding: 0;
}


/* ==========================================================================
   12. SMALL MOBILE PHONES
   ========================================================================== */

@media (max-width: 480px) {

    .rn27-search-results-page {
        padding-top: 34px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        padding-bottom: 50px !important;
    }


    .rn27-search-results-page .rn27-section-title {
        font-size: 1.9rem !important;
    }


    .rn27-search-results-page .rn27-section-subtitle {
        font-size: 0.95rem !important;
    }


    .rn27-search-results-page .rn27-latest-list {
        gap: 24px !important;
    }


    .rn27-search-results-page
    .rn27-latest-list
    .wp-block-post-date {
        margin-left: 18px !important;
        margin-right: 18px !important;
    }


    .rn27-search-results-page
    .rn27-latest-list
    .wp-block-post-title {
        margin-left: 18px !important;
        margin-right: 18px !important;

        font-size: 1.2rem !important;
    }


    .rn27-search-results-page
    .rn27-latest-list
    .wp-block-post-excerpt {
        margin-left: 18px !important;
        margin-right: 18px !important;
        margin-bottom: 20px !important;

        font-size: 0.94rem !important;
    }
}


/* ==========================================================================
   13. TABLET — 2 CARDS PER ROW
   ========================================================================== */

@media (min-width: 700px) {

    .rn27-search-results-page {
        padding: 56px 24px 75px !important;
    }


    .rn27-search-results-page .rn27-archive__header {
        margin-bottom: 42px !important;
    }


    .rn27-search-results-page .rn27-section-title {
        font-size: 2.5rem !important;
    }


    .rn27-search-results-page .rn27-latest-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 28px !important;
    }


    .rn27-search-results-page
    .rn27-latest-list
    .wp-block-post-featured-image {
        width: 100% !important;
        height: auto !important;

        aspect-ratio: 16 / 10 !important;
    }


    .rn27-search-results-page
    .rn27-latest-list
    .wp-block-post-date {
        margin: 20px 20px 0 !important;
    }


    .rn27-search-results-page
    .rn27-latest-list
    .wp-block-post-title {
        margin: 7px 20px 0 !important;

        font-size: 1.22rem !important;
    }


    .rn27-search-results-page
    .rn27-latest-list
    .wp-block-post-excerpt {
        margin: 11px 20px 22px !important;

        font-size: 0.93rem !important;
    }
}


/* ==========================================================================
   14. DESKTOP — 3 CARDS PER ROW
   ========================================================================== */

@media (min-width: 1050px) {

    .rn27-search-results-page {
        max-width: var(--wrap-max-width) !important;

        padding: 65px 20px 90px !important;
    }


    .rn27-search-results-page .rn27-archive__header {
        margin-bottom: 45px !important;
    }


    .rn27-search-results-page .rn27-section-title {
        font-size: 3rem !important;
    }


    /*
     * The desktop layout you wanted:
     *
     * CARD | CARD | CARD
     * CARD | CARD | CARD
     */

    .rn27-search-results-page .rn27-latest-list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 30px !important;
    }


    /*
     * Keep images proportional rather than allowing them to
     * become extremely wide like the earlier desktop version.
     */

    .rn27-search-results-page
    .rn27-latest-list
    .wp-block-post-featured-image {
        width: 100% !important;
        height: auto !important;

        aspect-ratio: 16 / 10 !important;
    }


    .rn27-search-results-page
    .rn27-latest-list
    .wp-block-post-date {
        margin: 20px 20px 0 !important;

        font-size: 0.76rem !important;
    }


    .rn27-search-results-page
    .rn27-latest-list
    .wp-block-post-title {
        margin: 7px 20px 0 !important;

        font-size: 1.15rem !important;
        line-height: 1.27 !important;
    }


    .rn27-search-results-page
    .rn27-latest-list
    .wp-block-post-excerpt {
        margin: 10px 20px 22px !important;

        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
}


/* ==========================================================================
   15. LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1250px) {

    .rn27-search-results-page .rn27-latest-list {
        gap: 32px !important;
    }


    .rn27-search-results-page
    .rn27-latest-list
    .wp-block-post-title {
        font-size: 1.2rem !important;
    }
}
/* ==========================================================================
   RN27 FILTER CHIPS
   ========================================================================== */

.rn27-filter-chips {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;

    margin: 24px 0 40px;
    padding: 2px 0 8px;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}


/* Normal / inactive chip */

.rn27-filter-chip {
    display: inline-flex;
    flex: 0 0 auto;

    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 11px 24px;

    border: 1px solid #d8dfe0;
    border-radius: var(--radius-pill);

    background: #f0f2f2;

    color: var(--neutral-dark) !important;

    font-size: 0.95rem;
    line-height: 1;
    font-weight: 700;

    text-decoration: none !important;
    white-space: nowrap;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


/* Hovering an INACTIVE chip */

.rn27-filter-chip:not(.is-active):hover {
    background: #e8eeee;

    color: var(--brand-teal) !important;

    border-color: var(--brand-teal);

    transform: translateY(-1px);
}


/* Selected chip */

.rn27-filter-chip.is-active,
.rn27-filter-chip[aria-current="page"] {
    background: var(--brand-teal) !important;

    color: var(--white) !important;

    border-color: var(--brand-teal) !important;
}


/* Keep selected chip teal even while hovering */

.rn27-filter-chip.is-active:hover,
.rn27-filter-chip[aria-current="page"]:hover {
    background: var(--brand-teal) !important;

    color: var(--white) !important;

    border-color: var(--brand-teal) !important;

    transform: none;
}


/* Mobile */

@media (max-width: 699px) {

    .rn27-filter-chips {
        gap: 9px;
        margin-bottom: 30px;
    }

    .rn27-filter-chip {
        min-height: 42px;

        padding: 9px 18px;

        font-size: 0.88rem;
    }
}


/* Tablet / desktop */

@media (min-width: 700px) {

    .rn27-filter-chips {
        flex-wrap: wrap;

        overflow: visible;

        padding-bottom: 0;
    }
}
/* Make category filter controls explicitly clickable */
.rn27-filter-chips {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
}

.rn27-filter-chip {
    position: relative !important;
    z-index: 21 !important;

    pointer-events: auto !important;
    cursor: pointer !important;
}