/*
Theme Name: WexfordHub
Theme URI: https://wexfordhub.com
Author: WexfordHub
Description: A custom theme for WexfordHub - Wexford's local news and entertainment site.
Version: 1.0.0
Text Domain: wexfordhub
*/

:root {
    --wh-primary: #65bab0;
    --wh-white: #FFFFFF;
    --wh-accent: #d24d33;
    --wh-dark: #33363b;
    --wh-grey: #f5f5f5;
    --wh-text: #333333;
}

body {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    color: var(--wh-text);
    background-color: var(--wh-white);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content {
    flex: 1;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--wh-dark);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; }

a {
    color: var(--wh-accent);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

a.btn {
    color: var(--wh-white);
    font-weight: 600;
}

.entry-content a:not(.btn) {
    text-decoration: underline;
    text-decoration-color: rgba(210, 77, 51, 0.3);
    text-underline-offset: 2px;
}

.entry-content a:not(.btn):hover {
    text-decoration-color: var(--wh-accent);
}

.entry-content h1 a:not(.btn),
.entry-content h2 a:not(.btn),
.entry-content h3 a:not(.btn),
.entry-content h4 a:not(.btn),
.entry-content h5 a:not(.btn),
.entry-content h6 a:not(.btn) {
    text-decoration: none;
}

a:hover {
    color: #b8412b;
}

a.btn:hover {
    color: var(--wh-white);
}

/* Navbar */
.navbar-wh {
    background-color: var(--wh-dark);
    border-bottom: 3px solid var(--wh-primary);
}

.navbar-wh .navbar-brand img {
    height: 32px;
    width: auto;
}

@media (min-width: 992px) {
    .navbar-wh > .container {
        justify-content: flex-start;
    }
}

.navbar-wh .navbar-collapse {
    flex-grow: 0 !important;
}

.navbar-wh .nav-link {
    color: var(--wh-white);
    font-weight: 400;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}

@media (min-width: 992px) {
    .navbar-wh .nav-link {
        font-size: 0.95rem;
        font-weight: 500;
        padding: 0.5rem 0.9rem;
        letter-spacing: 0.01em;
        position: relative;
    }

    .navbar-wh .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0.9rem;
        right: 0.9rem;
        height: 2px;
        background-color: var(--wh-primary);
        transform: scaleX(0);
        transition: transform 0.25s ease;
    }

    .navbar-wh .nav-link:hover::after,
    .navbar-wh .nav-link.active::after {
        transform: scaleX(1);
    }
}

.navbar-wh {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.navbar-wh .nav-link:hover,
.navbar-wh .nav-link.active {
    color: var(--wh-primary);
}

/* Hamburger toggle */
.navbar-wh .navbar-toggler {
    border: none;
    padding: 0.5rem;
    outline: none;
    box-shadow: none;
}

.navbar-wh .navbar-toggler:focus {
    box-shadow: none;
}

.hamburger-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 24px;
    height: 20px;
    position: relative;
}

.hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--wh-white);
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: absolute;
    left: 0;
}

.hamburger-line:nth-child(1) { top: 0; }
.hamburger-line:nth-child(2) { top: 9px; }
.hamburger-line:nth-child(3) { top: 18px; }

.navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Mobile actions (search + hamburger) */
.navbar-mobile-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

@media (min-width: 992px) {
    .navbar-mobile-actions {
        display: none;
    }
}

/* Search toggle button */
.navbar-search-toggle {
    background: none;
    border: none;
    color: var(--wh-white);
    padding: 0.5rem;
    cursor: pointer;
    transition: color 0.2s ease;
    display: none;
}

@media (max-width: 991.98px) {
    .navbar-search-toggle {
        display: flex;
        align-items: center;
    }
}

.navbar-search-toggle:hover {
    color: var(--wh-primary);
}

/* Search panel */
.navbar-search-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--wh-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    padding: 0.75rem 1rem;
    z-index: 1050;
}

.navbar-search-panel.is-open {
    display: block;
}

.navbar-search-form {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
}

.navbar-search-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-right: none;
    border-radius: 0.25rem 0 0 0.25rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--wh-white);
    font-size: 0.9rem;
}

.navbar-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.navbar-search-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.2);
}

.navbar-search-submit {
    padding: 0.5rem 0.75rem;
    background-color: var(--wh-white);
    color: var(--wh-dark);
    border: 1px solid var(--wh-white);
    border-radius: 0 0.25rem 0.25rem 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar-search-submit:hover {
    background-color: rgba(255, 255, 255, 0.85);
}

/* Mobile nav panel */
@media (max-width: 991.98px) {
    .navbar-wh > .container {
        flex-wrap: wrap;
    }

    .navbar-wh .navbar-brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .navbar-mobile-actions {
        margin-left: auto;
    }

    .navbar-wh .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--wh-dark);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        padding: 1rem 0;
    }

    .navbar-wh .navbar-nav {
        padding: 0 1.5rem;
    }

    .navbar-wh .nav-link {
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        font-size: 1rem;
    }

    .navbar-wh .nav-item:last-child .nav-link {
        border-bottom: none;
    }
}

/* Homepage header */
.homepage-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e5e5;
}

@media (min-width: 992px) {
    .homepage-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
}

.homepage-tagline {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: #666;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    text-align: center;
}

@media (min-width: 992px) {
    .homepage-tagline {
        font-size: 0.9rem;
        margin-bottom: 0;
        white-space: nowrap;
        text-align: left;
    }
}

#weather-bar-container {
    margin-bottom: 0;
    min-height: 75px;
}

@media (min-width: 992px) {
    #weather-bar-container {
        min-height: 0;
    }
}

#weather-bar-container .weather-bar {
    margin-bottom: 0;
    animation: weatherFadeIn 0.7s ease both;
}

@keyframes weatherFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Weather bar */
.weather-bar {
    display: inline-flex;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    color: #888;
    background-color: var(--wh-grey);
    border-radius: 0.5rem;
}

.weather-bar-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.2rem 0;
}

.weather-bar-location {
    font-weight: 600;
    color: var(--wh-dark);
    font-size: 0.82rem;
}

.weather-bar-weather {
    border-top: 1px solid #e5e5e5;
    padding-top: 0.2rem;
    margin-top: 0.1rem;
    gap: 0.35rem;
}

.weather-bar-icon,
.weather-bar-cond-icon {
    flex-shrink: 0;
    display: block;
    color: var(--wh-primary);
}

.weather-bar-now {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.weather-bar-temp {
    font-weight: 600;
    color: var(--wh-dark);
}

.weather-bar-separator {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #ccc;
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .weather-bar {
        display: flex;
        width: 100%;
        font-size: 0.78rem;
    }
}

/* Content */
.site-content {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Posts — shared */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: var(--wh-dark);
    font-weight: inherit;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: var(--wh-accent);
}

.entry-meta {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Article header (single post) */
.article-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e5e5;
}

.article-header-categories {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.article-header-categories .post-category-label {
    font-weight: 600;
}

.article-header h1 {
    margin-bottom: 0.75rem;
}

.article-header-byline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.article-header-author {
    font-weight: 700;
    color: var(--wh-dark);
}

.article-header-byline time::before {
    content: '·';
    margin-right: 0.75rem;
    color: #ccc;
}

/* Category label pill */
.post-category-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wh-white);
    background-color: var(--wh-accent);
    padding: 0.2rem 0.6rem;
    margin-bottom: 0.6rem;
}

.post-category-label--sm {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
}

a.post-category-label {
    transition: background-color 0.15s ease, color 0.15s ease;
}

a.post-category-label:hover,
a.post-category-label:focus {
    color: var(--wh-white);
    background-color: var(--wh-dark);
}

/* Category header — magazine style, no image */
.category-header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid #e5e5e5;
}

.category-header-title {
    margin: 0;
    font-size: 2.5rem;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--wh-dark);
}

.category-header-title::after {
    content: '';
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 0.85rem;
    background-color: var(--wh-accent);
    border-radius: 2px;
}

.category-header-desc {
    margin-top: 0.85rem;
    font-size: 1.12rem;
    line-height: 1.55;
    color: #555;
}

.category-header-page {
    margin-top: 0.85rem;
    margin-bottom: 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
}

.feed-paged-header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid #e5e5e5;
}

.feed-paged-header .category-header-page {
    margin-top: 0;
}

.category-header-desc p:last-child {
    margin-bottom: 0;
}

.category-header-desc a {
    color: var(--wh-accent);
}

@media (max-width: 575.98px) {
    .category-header-title {
        font-size: 1.9rem;
    }

    .category-header-desc {
        font-size: 1rem;
    }
}

/* Hero post (first/latest) */
.post-hero {
    position: relative;
    margin-bottom: 2rem;
}

.post-hero-image {
    display: block;
    position: relative;
    overflow: hidden;
    line-height: 0;
    aspect-ratio: 21 / 9;
}

.post-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.post-hero:hover .post-hero-image img {
    transform: scale(1.03);
    filter: brightness(0.92);
}

.post-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.post-hero:hover .post-hero-overlay {
    opacity: 0.7;
}

.post-hero-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: var(--wh-accent);
}

.post-hero-content {
    padding-top: 1rem;
}

.post-hero-meta {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}

.post-hero-excerpt {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e5e5e5;
}

.post-hero-excerpt p {
    margin: 0;
}

/* Grid cards */
.post-grid {
    row-gap: 0;
}

.post-card {
    height: 100%;
}

.post-card-image {
    display: block;
    position: relative;
    overflow: hidden;
    line-height: 0;
    aspect-ratio: 21 / 9;
}

.post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.post-card:hover .post-card-image img {
    transform: scale(1.03);
    filter: brightness(0.92);
}

.post-card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--wh-accent);
}

.post-card-body {
    padding: 0.75rem 0;
}

.post-card-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card-title a {
    color: var(--wh-dark);
}

.post-card-title a:hover {
    color: var(--wh-accent);
}

.post-card-date {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.post-card-excerpt {
    font-size: 0.88rem;
    color: #555;
    line-height: 1.5;
    margin-top: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Real excerpt field: show in full, never clamp */
.post-card-excerpt--full {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.post-card-excerpt p {
    margin: 0;
}

/* Related content card (foot of single posts/pages) */
/* The base card is theme-able via custom properties: a "skin" (see the
   wh-related--{variant} blocks at the end of this section) only needs to
   override these variables. Structural variants instead ship a
   template-parts/related-card-{variant}.php. */
.wh-related {
    --wh-related-accent: var(--wh-accent);
    --wh-related-title: var(--wh-dark);
    --wh-related-bg: transparent;
    --wh-related-border: #e5e5e5;

    margin: 2.5rem 0 0.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--wh-related-border);
    background: var(--wh-related-bg);
}

/* Reuse the subject skins (profile/street) as a content-type archive listing,
   without the article-foot divider the base card carries. Keeps the CSS-variable
   definitions above so the card titles/accents still resolve. */
.wh-related--listing {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Content-type archive facet filters (chips) */
.wh-facets {
    /* Collapsed chip-list height (~2 rows). Single source of truth: JS reads this
       same value, so it never resets the box to a different height after load. */
    --wh-facet-ch: 4.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0 0 2rem;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(180deg, #fbfcfc, #f4f6f6);
    border: 1px solid #e7eaea;
    border-radius: 16px;
}

.wh-facets__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid #e7eaea;
}

.wh-facets__title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wh-dark);
}

.wh-facets__title svg {
    width: 15px;
    height: 15px;
    color: var(--wh-primary);
}

.wh-facets__group {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.wh-facets__label {
    flex: 0 0 auto;
    min-width: 56px;
    padding-top: 0.4rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7a8080;
    transition: color 0.18s ease;
}

.wh-facets__group.has-active .wh-facets__label {
    color: var(--wh-primary);
}

.wh-facets__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
}

.wh-facets__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
    align-self: stretch;
}

/* Collapsed by default before facets.js runs (flag set in <head>), so pills
   never flash full-height on load. CSS owns the collapsed height; JS only adds
   the toggle and animates clicks — so nothing resizes when the script arrives. */
.js-facets .wh-facets__chips {
    max-height: var(--wh-facet-ch);
    overflow: hidden;
    transition: max-height 0.28s ease;
}

/* A facet with an active selection (group flagged server-side) renders expanded
   from the first paint, so a filtered list never collapses then jumps open. */
.js-facets .wh-facets__group.has-active .wh-facets__chips {
    max-height: none;
}

/* Once JS marks a list collapsed (incl. "Show less" on an active facet) this
   must outrank the has-active expand above — same specificity, later in source. */
.js-facets .wh-facets__body.is-collapsed .wh-facets__chips {
    max-height: var(--wh-facet-ch);
}

.wh-facets__more {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0.1rem 0;
    background: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wh-primary);
    cursor: pointer;
    transition: color 0.18s ease;
}

.wh-facets__more::after {
    content: "";
    display: inline-block;
    width: 0.46em;
    height: 0.46em;
    margin-left: 0.4em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.12em) rotate(45deg);
    transition: transform 0.2s ease;
}

.wh-facets__more[aria-expanded="true"]::after {
    transform: translateY(0.12em) rotate(225deg);
}

.wh-facets__more:hover {
    color: #58a99f;
}

.wh-facets__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.85rem;
    border: 1px solid #dce0e0;
    border-radius: 999px;
    background: #fff;
    color: var(--wh-dark);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

/* No translate lift — the chip list is overflow:hidden for the clamp, so a
   raised chip on the top row would be clipped. A downward shadow reads as a
   lift without leaving the clip region. */
.wh-facets__chip:hover {
    border-color: var(--wh-primary);
    color: var(--wh-primary);
    background: rgba(101, 186, 176, 0.09);
    box-shadow: 0 2px 6px rgba(101, 186, 176, 0.25);
}

.wh-facets__chip:focus-visible {
    outline: 2px solid var(--wh-primary);
    outline-offset: 2px;
}

.wh-facets__chip.is-active {
    background: var(--wh-primary);
    border-color: var(--wh-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(101, 186, 176, 0.35);
}

.wh-facets__chip.is-active:hover {
    background: #58a99f;
    border-color: #58a99f;
    color: #fff;
}

/* Active chips read as removable — a trailing × hints "click to clear". */
.wh-facets__chip.is-active::after {
    content: "\00d7";
    margin-left: 0.45rem;
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
    opacity: 0.85;
}

.wh-facets__clear {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--wh-accent);
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}

.wh-facets__clear::before {
    content: "\00d7";
    font-size: 1.05rem;
    line-height: 1;
}

.wh-facets__clear:hover {
    background: rgba(210, 77, 51, 0.1);
    color: var(--wh-accent);
}

/* Mobile: each facet becomes a horizontal scroll-snap rail rather than a tall
   wrapped block, so many terms swipe sideways and never wall up the screen. */
@media (max-width: 575.98px) {
    .wh-facets {
        padding: 1rem;
        border-radius: 14px;
    }

    .wh-facets__group {
        flex-direction: column;
        gap: 0.5rem;
    }

    .wh-facets__label {
        padding-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wh-facets__chip {
        transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }

    .js-facets .wh-facets__chips,
    .wh-facets__more::after {
        transition: none;
    }
}

.wh-related__head {
    margin-bottom: 1.25rem;
}

.wh-related__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--wh-related-title);
}

.wh-related__heading {
    min-width: 0;
}

.wh-related__sub {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
    color: #666;
}

.wh-related__all {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wh-primary);
    white-space: nowrap;
}

.wh-related__all:hover,
.wh-related__all:focus {
    color: var(--wh-accent);
}

.wh-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.wh-related__link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* Reset the inherited link weight (global `a { font-weight: 600 }`) so the
   excerpt and date read as normal body text; the title sets its own weight. */
.wh-related__body {
    font-weight: 400;
}

/* The same short, wide crop the homepage feeds use (21:9), so related thumbnails
   match the listings. The short crop drops the top and bottom of the photo,
   taking a bottom-corner logo out of frame as the feeds do. */
.wh-related__image {
    display: block;
    position: relative;
    overflow: hidden;
    line-height: 0;
    aspect-ratio: 21 / 9;
    margin-bottom: 0.7rem;
}

.wh-related__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.wh-related__card:hover .wh-related__image img {
    transform: scale(1.04);
    filter: brightness(0.92);
}

.wh-related__image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--wh-related-accent);
}

.wh-related__card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wh-related-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.wh-related__card:hover .wh-related__card-title {
    color: #b8412b;
}

.wh-related__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #555;
}

.wh-related__date {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #666;
}

@media (max-width: 767.98px) {
    .wh-related__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* Stack each card vertically (image on top, full width) to match the feeds.
       The profile skin keeps its own centred-avatar layout via its own overrides. */
    .wh-related__excerpt {
        -webkit-line-clamp: 2;
    }
}

/* Related card skins.
   A look is selected by the resolved variant (a content type's `related_style`,
   the wexfordhub_related_category_styles map, or — by default — the type/category
   slug), emitted as `wh-related--{variant}`. To add a look, copy a block below
   and override the variables; only reach for a template part for structural
   changes. Example: the Biography "profile" skin, which pairs the related card
   with the .wh-bio profile card at the top of the page — same white, rounded,
   soft-shadowed treatment and brand accent, rather than a coloured panel. */
/* Profile skin: render each related item as its own white, soft-shadowed card
   (echoing the .wh-bio profile card) so the people stand out individually instead
   of blending into one panel. The section container itself stays unstyled. */
.wh-related--profile .wh-related__card {
    height: 100%;
    padding: 1.5rem 1rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(51, 54, 59, 0.04), 0 6px 22px rgba(51, 54, 59, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wh-related--profile .wh-related__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(51, 54, 59, 0.06), 0 10px 28px rgba(51, 54, 59, 0.10);
}

/* People grid: circular portrait thumbnails (mirroring the .wh-bio avatar) with
   each item stacked and centred — at every breakpoint, so the profile skin keeps
   its avatar look instead of adopting the base mobile thumbnail-row. */
.wh-related--profile .wh-related__link {
    display: block;
    text-align: center;
}

.wh-related--profile .wh-related__image {
    width: 96px;
    height: 96px;
    margin: 0 auto 0.7rem;
    overflow: visible;
}

.wh-related--profile .wh-related__image img {
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 5px 16px rgba(51, 54, 59, 0.18);
}

.wh-related--profile .wh-related__image::after {
    display: none;
}

/* Footer */
.site-footer {
    background-color: var(--wh-dark);
    color: var(--wh-white);
    padding: 2rem 0 2.5rem;
}

.site-footer a {
    color: var(--wh-primary);
}

.site-footer a:hover {
    color: var(--wh-white);
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.25rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-nav li a {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.2s ease;
}

.footer-nav li a:hover {
    color: var(--wh-white);
}

.footer-copy {
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    padding-top: 0.5rem;
}

/* Sidebar */
.sidebar {
    margin-top: 2rem;
}

@media (min-width: 992px) {
    .sidebar {
        margin-top: 0;
    }
}

.sidebar-section {
    margin-bottom: 2rem;
}

.widget-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    margin-bottom: 0.75rem;
    padding-bottom: 0;
    border-bottom: none;
}

/* Sidebar Search */
.sidebar-section .search-form {
    display: flex;
    width: 100%;
}

.sidebar-section .search-form label {
    flex: 1;
    min-width: 0;
    display: flex;
}

.sidebar-section .search-form .search-field {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0.65rem;
    border: 1px solid #e0e0e0;
    border-right: none;
    border-radius: 0.2rem 0 0 0.2rem;
    font-size: 0.85rem;
    background-color: var(--wh-grey);
}

.sidebar-section .search-form .search-field:focus {
    outline: none;
    border-color: #bbb;
    background-color: var(--wh-white);
}

.sidebar-section .search-form .search-submit {
    padding: 0.45rem 0.75rem;
    background-color: var(--wh-dark);
    color: var(--wh-white);
    border: 1px solid var(--wh-dark);
    border-radius: 0 0.2rem 0.2rem 0;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.2s ease;
}

.sidebar-section .search-form .search-submit:hover {
    background-color: var(--wh-accent);
    border-color: var(--wh-accent);
}

/* Sidebar Social */
.sidebar-social {
    display: flex;
    gap: 0.4rem;
}

.sidebar-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background-color: var(--wh-grey);
    border-radius: 50%;
    color: var(--wh-dark);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-social-link span {
    display: none;
}

.sidebar-social-link:hover {
    background-color: var(--wh-accent);
    color: var(--wh-white);
}

.sidebar-social-link svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* Sidebar Recent Posts */
.sidebar-recent-post {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #f0f0f0;
}

.sidebar-recent-post:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.sidebar-recent-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}

.sidebar-recent-thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 0.2rem;
}

.sidebar-recent-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sidebar-recent-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--wh-dark);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-recent-title:hover {
    color: var(--wh-accent);
}

.sidebar-recent-date {
    font-size: 0.78rem;
    color: #aaa;
    margin-top: 0.15rem;
}

/* Sidebar Nav */
.sidebar-nav li {
    margin-bottom: 0.35rem;
}

.sidebar-nav li a {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--wh-dark);
    font-weight: 600;
    font-size: 0.88rem;
    background-color: var(--wh-grey);
    border-left: 3px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.sidebar-nav li a:hover {
    color: var(--wh-accent);
    border-left-color: var(--wh-accent);
    background-color: #eee;
}

/* Sidebar mobile adjustments */
@media (max-width: 991.98px) {
    .widget-title {
        font-size: 0.85rem;
    }

    .sidebar-section .search-form {
        width: 100%;
    }

    .sidebar-section .search-form .search-field {
        font-size: 0.95rem;
        padding: 0.55rem 0.75rem;
    }

    .sidebar-section .search-form .search-submit {
        font-size: 0.95rem;
        padding: 0.55rem 0.85rem;
    }

    .sidebar-social-link {
        width: 40px;
        height: 40px;
    }

    .sidebar-social-link svg {
        width: 18px;
        height: 18px;
    }

    .sidebar-recent-thumb {
        width: 64px;
        height: 64px;
    }

    .sidebar-recent-thumb img {
        width: 64px;
        height: 64px;
    }

    .sidebar-recent-title {
        font-size: 0.95rem;
    }

    .sidebar-recent-date {
        font-size: 0.82rem;
    }

    .sidebar-nav li a {
        font-size: 0.95rem;
        padding: 0.6rem 0.85rem;
    }
}

/* Post Navigation */
.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
}

.post-navigation .nav-previous {
    flex: 1;
    text-align: left;
}

.post-navigation .nav-next {
    flex: 1;
    text-align: right;
}

/* Pagination */
.posts-pagination {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e5e5;
}

.posts-pagination-inner {
    display: flex;
    justify-content: space-between;
}

.posts-pagination a {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wh-dark);
    transition: color 0.2s ease;
}

.posts-pagination a:hover {
    color: var(--wh-accent);
}

/* Search results */
.search-header {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e5e5e5;
}

.search-header-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    margin-bottom: 0.25rem;
}

.search-header-query {
    font-size: 1.8rem;
    margin-bottom: 0.25rem;
}

.search-header-count {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 0;
}

.search-header .search-form {
    display: flex;
    width: 100%;
    max-width: 520px;
    margin-top: 1rem;
}

.search-header .search-form label {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.search-header .search-field {
    width: 100%;
    min-width: 0;
    padding: 0.55rem 0.85rem;
    font-size: 0.95rem;
    border: 1px solid #ddd;
    border-right: 0;
    border-radius: 0.25rem 0 0 0.25rem;
}

.search-header .search-field:focus {
    outline: none;
    border-color: var(--wh-primary);
}

.search-header .search-submit {
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wh-white);
    background-color: var(--wh-primary);
    border: 1px solid var(--wh-primary);
    border-radius: 0 0.25rem 0.25rem 0;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.search-header .search-submit:hover {
    background-color: #54a89e;
    border-color: #54a89e;
}

/* Hide accessibility-only labels (e.g. WordPress search form "Search for:") */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.search-result {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.search-result:first-of-type {
    padding-top: 0;
}

.search-result-thumb {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 0.2rem;
}

.search-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.2rem;
}

.search-result-title a {
    color: var(--wh-dark);
}

.search-result-title a:hover {
    color: var(--wh-accent);
}

.search-result-date {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.search-result-excerpt {
    font-size: 0.88rem;
    color: #555;
    line-height: 1.5;
    margin-top: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-excerpt p {
    margin: 0;
}

/* Qualified with div — WordPress also adds .search-no-results to <body>,
   so a bare class would apply this padding to the whole page. */
div.search-no-results {
    padding: 2rem 0;
    color: #888;
}

@media (max-width: 575.98px) {
    .search-result-thumb {
        width: 70px;
        height: 70px;
    }

    .search-header-query {
        font-size: 1.4rem;
    }
}

/* Page featured image */
.page-featured-image {
    overflow: hidden;
    aspect-ratio: 21 / 9;
    line-height: 0;
}

.page-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-bottom: 3px solid var(--wh-accent);
    border-radius: 4px 4px 0 0;
}

/* Horizontal rules */
.entry-content hr {
    border: none;
    height: 1px;
    background-color: #e0e0e0;
    margin: 2.5rem 0;
}

/* Ad Slots */
.ad-slot {
    margin: 1.25rem 0;
    padding: 0;
    text-align: center;
    overflow: hidden;
}

.entry-content .d-grid {
    margin: 1.25rem 0;
}

/* Buttons */
.btn {
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    padding: 0.5rem 1.25rem;
    border-radius: 0.2rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background-color: var(--wh-primary);
    border-color: var(--wh-primary);
    color: var(--wh-white);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #54a89e;
    border-color: #54a89e;
    color: var(--wh-white);
    box-shadow: 0 2px 8px rgba(101, 186, 176, 0.35);
}

.btn-info {
    background-color: var(--wh-dark);
    border-color: var(--wh-dark);
    color: var(--wh-white);
}

.btn-info:hover,
.btn-info:focus {
    background-color: #44474d;
    border-color: #44474d;
    color: var(--wh-white);
    box-shadow: 0 2px 8px rgba(51, 54, 59, 0.35);
}

.btn-danger {
    background-color: var(--wh-accent);
    border-color: var(--wh-accent);
    color: var(--wh-white);
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #b8412b;
    border-color: #b8412b;
    color: var(--wh-white);
    box-shadow: 0 2px 8px rgba(210, 77, 51, 0.35);
}

.btn-outline-primary {
    color: var(--wh-primary);
    border-color: var(--wh-primary);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--wh-primary);
    border-color: var(--wh-primary);
    color: var(--wh-white);
    box-shadow: 0 2px 8px rgba(101, 186, 176, 0.35);
}

.btn-outline-dark {
    color: var(--wh-dark);
    border-color: var(--wh-dark);
    background-color: transparent;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background-color: var(--wh-dark);
    border-color: var(--wh-dark);
    color: var(--wh-white);
    box-shadow: 0 2px 8px rgba(51, 54, 59, 0.35);
}

img {
    max-width: 100%;
    height: auto;
}

/* WordPress images & captions in post/page content */
.wp-caption,
.entry-content figure {
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
    position: relative;
}

.wp-caption img,
.entry-content figure img,
.entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

.wp-caption img,
.entry-content figure img,
.entry-content img {
    border-bottom: 3px solid var(--wh-accent);
    border-radius: 4px 4px 0 0;
}

/* The figure supplies the outer spacing, so the wrapped image must not
   add its own alignment margin (e.g. .alignnone's 1.5rem), which would
   otherwise push the caption text down and look like top padding. */
.wp-caption img,
.entry-content figure img {
    margin: 0;
}

/* WordPress alignment */
.alignleft {
    float: left;
    margin: 0.3rem 1.5rem 1rem 0;
}

.alignright {
    float: right;
    margin: 0.3rem 0 1rem 1.5rem;
}

.wp-caption.alignleft,
.entry-content figure.alignleft {
    margin: 0.3rem 1.5rem 1rem 0;
}

.wp-caption.alignright,
.entry-content figure.alignright {
    margin: 0.3rem 0 1rem 1.5rem;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignnone {
    display: block;
    margin: 1.5rem 0;
}

@media (max-width: 575.98px) {
    .alignleft,
    .alignright {
        float: none;
        margin: 1rem 0;
        width: 100% !important;
    }

    .alignleft img,
    .alignright img {
        width: 100%;
    }
}

.wp-caption-text,
.entry-content figcaption {
    font-size: 0.9rem;
    color: #777;
    padding: 0.6rem 0;
    border-bottom: 1px solid #eee;
    font-style: italic;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

/* Lists */
.entry-content ul li,
.entry-content ol li {
    margin-bottom: 0.4rem;
    line-height: 1.7;
}

/* Blockquotes */
.entry-content blockquote {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--wh-accent);
    background-color: var(--wh-grey);
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.7;
    color: #555;
}

.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.entry-content blockquote cite {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 600;
    color: var(--wh-dark);
    letter-spacing: 0.02em;
}

.entry-content blockquote cite::before {
    content: '\2014\00a0';
}

/* Responsive embeds (YouTube, iframes, video) */
.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content video {
    max-width: 100%;
    margin: 1.5rem 0;
}

.entry-content .video-container {
    margin: 1.5rem 0;
}

.wp-block-embed__wrapper,
.entry-content .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.wp-block-embed__wrapper iframe,
.entry-content .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ---- Location Maps ---- */

.wh-map-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem 0;
}

.wh-map-filters__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.3;
    color: var(--wh-dark, #33363b);
    background: #f0f0f0;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.wh-map-filters__tab:hover {
    background: #e4e4e4;
}

.wh-map-filters__tab--active {
    color: #fff;
}

.wh-map-filters__tab--active .wh-map-filters__dot {
    background-color: #fff !important;
}

.wh-map-filters--filtered .wh-map-filters__tab:not(.wh-map-filters__tab--active) {
    opacity: 0.45;
}

.wh-map-filters__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Scroll affordance — only shown on the mobile horizontal-scroll layout below */
.wh-map-filters__chevron {
    display: none;
}

@media (max-width: 575.98px) {
    .wh-map-filters-wrap {
        position: relative;
    }

    .wh-map-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(to right, #000 75%, transparent 97%);
        -webkit-mask-image: linear-gradient(to right, #000 75%, transparent 97%);
        transition: mask-image 0.3s, -webkit-mask-image 0.3s;
    }

    .wh-map-filters-wrap.is-scrolled-end .wh-map-filters {
        mask-image: none;
        -webkit-mask-image: none;
    }

    .wh-map-filters__tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .wh-map-filters__chevron {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--wh-dark, #33363b);
        opacity: 0.5;
        pointer-events: none;
        transition: opacity 0.3s;
    }

    .wh-map-filters-wrap.is-scrolled-end .wh-map-filters__chevron {
        opacity: 0;
    }
}

/* ---- Location List (SEO) ---- */

.wh-map-list__hint {
    margin: 1.25rem 0 0;
    font-size: 0.88rem;
    color: #888;
}

.wh-map-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
    gap: 1rem;
    margin-top: 0.4rem;
}

.wh-map-list__item {
    display: flex;
    gap: 0.85rem;
    padding: 0.9rem;
    background: linear-gradient(180deg, #fff 0%, #f7f7f8 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wh-map-list__item:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.wh-map-list__thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.wh-map-list__body {
    flex: 1;
    min-width: 0;
}

.wh-map-list__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wh-dark, #33363b);
    line-height: 1.3;
}

.wh-map-list__address {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
}

.wh-map-list__desc {
    margin: 0.4rem 0 0;
    font-size: 0.88rem;
    color: #444;
    line-height: 1.4;
}

.wh-map-list__desc p {
    margin: 0 0 0.15rem;
}

.wh-map-list__access {
    display: inline-block;
    margin: 0.25rem 0.3rem 0 0;
    padding: 0.12rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 3px;
    line-height: 1.4;
}

.wh-map-list__access--public {
    color: #1a7a2e;
    background: rgba(26, 122, 46, 0.1);
}

.wh-map-list__access--private {
    color: #7b61ff;
    background: rgba(123, 97, 255, 0.1);
}

.wh-map-list__rate {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--wh-dark, #33363b);
}

.wh-map-list__card {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a7a2e;
}

.wh-map-list a.wh-map-list__coords {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: var(--wh-dark, #33363b);
    text-decoration: underline;
    text-decoration-color: var(--wh-dark, #33363b);
    text-underline-offset: 2px;
    transition: opacity 0.15s ease;
}

.wh-map-list a.wh-map-list__coords:hover,
.wh-map-list a.wh-map-list__coords:focus-visible {
    color: var(--wh-dark, #33363b);
    text-decoration: underline;
    text-decoration-color: var(--wh-dark, #33363b);
    opacity: 0.75;
}

.wh-map-list__coords svg {
    flex: 0 0 auto;
    color: #65bab0;
}

/* ------------------------------------------------------------------ *
 * Beach amenities panel — shared by list cards and the map bottom sheet
 * (markup authored in wexfordhub_render_beach_amenities()).
 * ------------------------------------------------------------------ */
.wh-beach {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px dashed rgba(51, 54, 59, 0.12);
}

.wh-beach__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: #65bab0;
}

/* Awards — prominent pill badges, colour-keyed by award. */
.wh-beach__awards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wh-beach__award {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    margin: 0;
    padding: 0.32rem 0.66rem 0.32rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    border-radius: 999px;
    color: #2f8f84;
    background: rgba(101, 186, 176, 0.14);
    box-shadow: inset 0 0 0 1px rgba(101, 186, 176, 0.38);
}

.wh-beach__award .wh-beach__icon {
    width: 13px;
    height: 13px;
    color: currentColor;
}

.wh-beach__award span {
    line-height: 1;
}

/* Override the global .entry-content li margin; flex gap handles spacing. */
.wh-beach__awards .wh-beach__award {
    margin: 0;
}

.wh-beach__award--blueflag {
    color: #15619f;
    background: rgba(21, 97, 159, 0.12);
    box-shadow: inset 0 0 0 1px rgba(21, 97, 159, 0.32);
}

.wh-beach__award--greencoast {
    color: #2c7d4d;
    background: rgba(44, 125, 77, 0.12);
    box-shadow: inset 0 0 0 1px rgba(44, 125, 77, 0.32);
}

/* Sand + Toilets — two compact facts on one row. */
.wh-beach__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wh-beach__fact {
    flex: 1 1 130px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.38rem 0.6rem;
    background: rgba(101, 186, 176, 0.07);
    border: 1px solid rgba(51, 54, 59, 0.06);
    border-radius: 10px;
}

.wh-beach__fact-text {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    min-width: 0;
    gap: 0.35rem;
}

.wh-beach__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a8d92;
}

.wh-beach__value {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wh-dark, #33363b);
    line-height: 1.25;
}

.wh-beach__value--yes {
    color: #2c7d4d;
}

.wh-beach__value--no {
    color: #b23b28;
}

/* Lifeguards — larger block; warm safety accent echoing the lifebuoy.
   Icon + label sit on a header row; the schedule fills the full width below. */
.wh-beach__guard {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.45rem 0.7rem;
    background: rgba(210, 77, 51, 0.06);
    border-left: 3px solid rgba(210, 77, 51, 0.55);
    border-radius: 8px;
}

.wh-beach__guard-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.wh-beach__guard .wh-beach__icon {
    color: #d24d33;
}

.wh-beach__guard-text {
    display: block;
    width: 100%;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
    color: #44474c;
}

.wh-map-bottom-sheet__beach {
    margin-top: 0.25rem;
}

/* Bottom sheet is height-constrained: tighter fact padding. */
.wh-map-bottom-sheet__beach .wh-beach__fact {
    padding: 0.3rem 0.55rem;
}

.wh-map-list__type {
    display: inline-block;
    margin: 0.3rem 0.35rem 0 0;
    padding: 0.15rem 0.55rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: #65bab0;
    background: rgba(101, 186, 176, 0.1);
    border-radius: 3px;
    line-height: 1.4;
}

.wh-location-map {
    width: 100%;
    height: 600px;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Simple id-based maps (e.g. [location_map id="23969"]) don't need the full template height */
.wh-location-map--compact {
    height: 400px;
}

/* Prevent site link styles (orange colour, underline) bleeding into Google's map controls */
.wh-location-map a,
.wh-location-map a:hover,
.wh-location-map a:focus,
.wh-location-map button {
    color: inherit;
    text-decoration: none !important;
}

/* Strip the editorial image border (.entry-content img) from map UI icons/imagery */
.wh-location-map img {
    border: 0;
    border-radius: 0;
}

/* ---- Bottom Sheet ---- */

.wh-map-bottom-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, #fafafa, var(--wh-white));
    border-radius: 14px 14px 0 0;
    transform: translateY(100%);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1.06);
    z-index: 10;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    max-height: 45%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wh-map-bottom-sheet::-webkit-scrollbar {
    display: none;
}

.wh-map-bottom-sheet--open {
    transform: translateY(0);
}

.wh-map-bottom-sheet__handle {
    display: flex;
    justify-content: center;
    padding: 14px 0;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.wh-map-bottom-sheet__handle:active {
    cursor: grabbing;
}

.wh-map-bottom-sheet__handle span {
    display: block;
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: #bbb;
}

.wh-map-bottom-sheet__content {
    padding: 0 1.25rem 1.25rem;
}

.wh-map-bottom-sheet__header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 0.5rem;
}

.wh-map-bottom-sheet__thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.wh-map-bottom-sheet__header-text {
    min-width: 0;
}

.wh-map-bottom-sheet__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wh-dark);
    line-height: 1.3;
}

.wh-map-bottom-sheet__title-addr {
    margin-left: 0.45rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: #888;
}

.wh-map-bottom-sheet__access-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 3px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

.wh-map-bottom-sheet__access-badge--public {
    background: #e8e9ea;
    color: #3a3d42;
}

.wh-map-bottom-sheet__access-badge--private {
    background: #e8e9ea;
    color: #3a3d42;
}

.wh-map-bottom-sheet__subtitle {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: #666;
    line-height: 1.3;
}

.wh-map-bottom-sheet__desc {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--wh-text);
    margin-bottom: 0.15rem;
}

.wh-map-bottom-sheet__desc p:first-child {
    margin-top: 0;
}

.wh-map-bottom-sheet__desc p:last-child {
    margin-bottom: 0;
}

.wh-map-bottom-sheet__desc--small {
    font-size: 0.75rem;
    color: #888;
}

.wh-map-bottom-sheet__fields {
    border-top: 1px solid #eee;
    padding-top: 0.4rem;
}

.wh-map-bottom-sheet__field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.2rem 0;
    font-size: 0.9rem;
    color: var(--wh-dark);
}

.wh-map-bottom-sheet__label {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: #888;
}

.wh-map-bottom-sheet__label svg {
    display: block;
    width: 24px;
    height: 24px;
}

.wh-map-bottom-sheet__value {
    text-align: right;
    font-weight: 600;
    color: var(--wh-dark);
}

.wh-map-bottom-sheet__rate-hourly {
    font-size: 0.78rem;
    font-weight: 400;
    color: #666;
}

.wh-map-bottom-sheet__value a {
    color: var(--wh-primary);
    text-decoration: none;
}

.wh-map-bottom-sheet__value a:hover {
    text-decoration: underline;
}

.wh-map-bottom-sheet__updated {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: #888;
    text-align: right;
}

.wh-map-bottom-sheet__private-warning {
    margin-top: 0.75rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #6b4c00;
    background: #fef9e7;
    border-left: 3px solid #f0c040;
    border-radius: 4px;
}

.wh-map-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wh-dark, #33363b);
    color: #fff;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
    border: 2px solid #fff;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow:
        3px -3px 0 -1px var(--wh-dark, #33363b),
        3px -3px 0 1px #fff,
        6px -6px 0 -1px var(--wh-dark, #33363b),
        6px -6px 0 1px #fff,
        0 2px 6px rgba(0, 0, 0, 0.25);
}

.wh-map-cluster:hover {
    transform: scale(1.12);
}

.wh-map-marker {
    animation: wh-marker-enter 0.3s ease both;
}

/* Promote the filtered pin SVG to its own compositor layer so panning
   translates a cached bitmap instead of re-rasterising the drop-shadow
   filter every frame. Fixes marker flicker while moving, worst when
   markers overlap. Kept on the inner svg so the outer div's transform
   stays free for the scale/bounce keyframe animations. */
.wh-map-marker svg {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

@keyframes wh-marker-enter {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

.wh-map-cluster {
    animation: wh-cluster-enter 0.25s ease both;
}

@keyframes wh-cluster-enter {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}

.wh-map-marker--active {
    animation: wh-marker-settle 0.4s ease 0.45s both;
}

@keyframes wh-marker-settle {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.wh-map-marker--bounce {
    animation: wh-marker-bounce 0.8s ease both;
}

@keyframes wh-marker-bounce {
    0%   { transform: translateY(0) scale(1); }
    15%  { transform: translateY(-18px) scale(1.15); }
    30%  { transform: translateY(0) scale(0.95); }
    45%  { transform: translateY(-10px) scale(1.1); }
    60%  { transform: translateY(0) scale(0.98); }
    75%  { transform: translateY(-4px) scale(1.04); }
    100% { transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
    .wh-location-map {
        height: 65vh;
        border-radius: 0;
        box-shadow: none;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
    }

    .wh-location-map--compact {
        height: 45vh;
    }

    .wh-map-bottom-sheet {
        max-height: 50%;
    }

    .wh-map-bottom-sheet__handle {
        padding: 8px 0;
    }

    .wh-map-bottom-sheet__content {
        padding: 0 0.85rem 0.65rem;
    }

    .wh-map-bottom-sheet__header {
        gap: 0.6rem;
        margin-bottom: 0.25rem;
    }

    .wh-map-bottom-sheet__title {
        font-size: 0.9rem;
    }

    .wh-map-bottom-sheet__fields {
        padding-top: 0.2rem;
    }

    .wh-map-bottom-sheet__field {
        padding: 0.1rem 0;
        font-size: 0.8rem;
    }

    .wh-map-bottom-sheet__label svg {
        width: 20px;
        height: 20px;
    }

    .wh-map-bottom-sheet__updated {
        margin-top: 0.25rem;
        font-size: 0.65rem;
    }

    .wh-map-bottom-sheet__private-warning {
        margin-top: 0.5rem;
        font-size: 0.7rem;
    }
}

/* Share buttons */
.wh-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid #e6e6e6;
}

.wh-share__label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wh-dark);
}

.wh-share__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wh-share__btn {
    --brand: var(--wh-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    background: var(--wh-white);
    color: var(--wh-dark);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.wh-share__btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.wh-share__btn:hover,
.wh-share__btn:focus-visible {
    color: var(--brand);
    border-color: var(--brand);
    transform: translateY(-2px);
    outline: none;
}

.wh-share__btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(101, 186, 176, 0.35);
}

.wh-share__btn--facebook  { --brand: #1877F2; }
.wh-share__btn--whatsapp  { --brand: #25D366; }
.wh-share__btn--x         { --brand: #000000; }
.wh-share__btn--pinterest { --brand: #E60023; }
.wh-share__btn--copy      { --brand: var(--wh-primary); }

.wh-share__btn--copy .wh-share__icon-check {
    display: none;
}

.wh-share__btn--copy.is-copied {
    color: var(--wh-primary);
    border-color: var(--wh-primary);
}

.wh-share__btn--copy.is-copied .wh-share__icon-link {
    display: none;
}

.wh-share__btn--copy.is-copied .wh-share__icon-check {
    display: block;
}

.wh-share__status {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wh-primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.wh-share__status.is-visible {
    opacity: 1;
}

/* ==========================================================================
   On This Day — almanac timeline (light feature panel)
   ========================================================================== */
.wh-otd {
    position: relative;
    margin: 0 0 2rem;
    padding: 1rem 0 0.25rem;
    background: linear-gradient(180deg, #fdfdfd 0%, #f1f1f3 100%);
    color: var(--wh-text);
    overflow: hidden;
    border: 1px solid #e7e7e9;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(51, 54, 59, 0.07);
}

.wh-otd__inner {
    padding: 0 1.5rem 0.25rem;
}

/* Header */
.wh-otd__head {
    margin-bottom: 0.25rem;
}

.wh-otd__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(51, 54, 59, 0.6);
}

.wh-otd__eyebrow-icon {
    flex-shrink: 0;
    display: block;
    transform: translateY(-0.5px);
}

.wh-otd__date {
    margin: 0.3rem 0 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--wh-dark);
}

.wh-otd__date::after {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 0.4rem;
    background-color: var(--wh-accent);
    border-radius: 2px;
}

/* Timeline */
.wh-otd__timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wh-otd__entry {
    position: relative;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-areas:
        'year headline'
        'year body';
    align-items: start;
    column-gap: 0.9rem;
    padding: 0.7rem 0;
    border-top: 1px solid #e2e2e2;
    animation: wh-otd-rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--wh-otd-i, 0) * 90ms);
}

/* With an image: add a third column for a full-height thumbnail that spans
   the headline + body rows, so it reads as part of the entry. */
.wh-otd__entry--has-media {
    grid-template-columns: 92px minmax(0, 1fr) 168px;
    grid-template-areas:
        'year headline media'
        'year body     media';
}

.wh-otd__entry:first-child {
    border-top: 0;
}

/* Year — the focal element, with a teal timeline node. */
.wh-otd__year {
    grid-area: year;
    position: relative;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--wh-dark);
    padding-left: 1.2rem;
}

/* Anchored to the number's line (0.5em) so it stays centred on the year
   regardless of the "years ago" caption beneath it. */
.wh-otd__year::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--wh-accent);
    box-shadow: 0 0 0 4px rgba(210, 77, 51, 0.18);
}

.wh-otd__ago {
    display: block;
    margin-top: 0.3rem;
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
}

.wh-otd__body {
    grid-area: body;
    min-width: 0;
}

.wh-otd__headline {
    grid-area: headline;
    min-width: 0;
    margin: 0 0 0.3rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--wh-dark);
}

.wh-otd__headline a {
    color: var(--wh-dark);
    text-decoration: none;
    transition: color 0.15s ease;
}

.wh-otd__headline a:hover,
.wh-otd__headline a:focus {
    color: var(--wh-accent);
}

.wh-otd__place {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.45rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6c6f74;
    background-color: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 999px;
}

.wh-otd__place svg {
    display: block;
    flex-shrink: 0;
}

.wh-otd__desc {
    font-size: 0.88rem;
    line-height: 1.5;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wh-otd__desc p {
    margin: 0 0 0.5rem;
}

.wh-otd__desc p:last-child {
    margin-bottom: 0;
}

.wh-otd__more {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--wh-accent);
    text-decoration: none;
}

.wh-otd__more-arrow {
    display: inline-block;
    transition: transform 0.18s ease;
}

.wh-otd__more:hover .wh-otd__more-arrow,
.wh-otd__more:focus .wh-otd__more-arrow {
    transform: translateX(4px);
}

/* Media — stretches the full height of the entry (spans both rows) so it
   reads as part of the row rather than a small detached thumbnail. */
.wh-otd__media {
    grid-area: media;
    display: block;
    width: 168px;
    align-self: stretch;
    min-height: 108px;
    position: relative;
    overflow: hidden;
    line-height: 0;
    background-color: #e6e7e9;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
}

/* A soft top scrim for depth and a bottom fade that fuses the image into
   the light panel. */
.wh-otd__media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(51, 54, 59, 0.26), rgba(51, 54, 59, 0) 48%),
        linear-gradient(to top, rgba(245, 245, 245, 0.45), rgba(245, 245, 245, 0) 45%);
    transition: opacity 0.45s ease;
}

/* Accent corner-bar (brand motif), sits above the wash. */
.wh-otd__media::after {
    content: '';
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 3px;
    background-color: var(--wh-accent);
}

.wh-otd__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.65) contrast(1.04) brightness(0.96);
    transition: transform 0.55s ease, filter 0.55s ease;
}

/* Restore to full colour + zoom on hover. */
.wh-otd__entry:hover .wh-otd__media img {
    transform: scale(1.05);
    filter: grayscale(0) contrast(1) brightness(1);
}

.wh-otd__entry:hover .wh-otd__media::before {
    opacity: 0.35;
}

@keyframes wh-otd-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wh-otd__entry {
        animation: none;
    }
}

/* Tablet/mobile — stack year badge, image, then text. */
@media (max-width: 767.98px) {
    .wh-otd {
        padding-top: 1.5rem;
    }

    .wh-otd__inner {
        padding: 0 1.25rem 0.31rem;
    }

    .wh-otd__date {
        font-size: 1.7rem;
    }

    /* Flex column (not grid) so a missing image adds no empty-track gap, and
       so the title sits above the image: year, headline, image, then body. */
    .wh-otd__entry {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        padding: 1rem 0;
    }

    .wh-otd__year {
        order: 1;
        font-size: 1.2rem;
        padding-left: 1.3rem;
    }

    .wh-otd__headline {
        order: 2;
        margin-bottom: 0;
    }

    .wh-otd__media {
        order: 3;
        width: 100%;
        align-self: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .wh-otd__body {
        order: 4;
    }

    .wh-otd__desc {
        -webkit-line-clamp: 3;
    }
}

/* ==========================================================================
   Content Types — Biography profile card (.wh-bio)
   ========================================================================== */
.wh-bio {
    position: relative;
    margin: 0 0 1.75rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(51, 54, 59, 0.04), 0 6px 22px rgba(51, 54, 59, 0.06);
    overflow: hidden;
}

/* Subtle grey banner; the circular avatar straddles its lower edge, emerging
   from the grey into the white body below. */
.wh-bio::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 92px;
    background: #eef0f2;
    z-index: 0;
}

/* Desktop: circular avatar on the left, name + condensed facts alongside */
.wh-bio__inner {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.5rem;
}

.wh-bio__portrait {
    flex: 0 0 132px;
    width: 132px;
    height: 132px;
    margin: 0;
}

.wh-bio__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 5px 16px rgba(51, 54, 59, 0.18);
}

.wh-bio__content {
    flex: 1 1 auto;
    min-width: 0;
}

/* Card heading: category + name, moved in from the article header. Fills the
   banner zone with the name bottom-aligned to the banner's edge, so the facts
   below always begin in the white area (never inside the grey). */
.wh-bio__heading {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 60px;
    margin-bottom: 1rem;
}

.wh-bio__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
}

.wh-bio__name {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.2;
    color: var(--wh-dark);
}

/* Condensed facts: label + value inline, flowing and packed to the left so
   short values sit together rather than spreading across fixed columns. */
.wh-bio__grid {
    margin: 0.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
}

.wh-bio__row {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

/* Hometown leads on its own full-width row */
.wh-bio__row--hometown {
    flex-basis: 100%;
}

.wh-bio__label {
    flex: none;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wh-accent);
}

.wh-bio__value {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--wh-text);
    overflow-wrap: anywhere;
}

.wh-bio__known {
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid #e7e9eb;
}

.wh-bio__known-label {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wh-accent);
}

.wh-bio__known-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 400;
    color: var(--wh-dark);
}

/* Small muted disclaimer across the bottom of the card */
.wh-bio__note {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0.85rem 1.5rem 1.1rem;
    border-top: 1px solid #eef0f2;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #9aa0a6;
    text-align: center;
}

/* Mobile: centred profile card, larger avatar, stacked facts */
@media (max-width: 575.98px) {
    .wh-bio {
        text-align: center;
    }

    .wh-bio__inner {
        display: block;
        padding: 1.5rem 1.15rem;
    }

    .wh-bio__portrait {
        width: 150px;
        height: 150px;
        margin: 0 auto 1.1rem;
    }

    .wh-bio__heading {
        display: block;
        min-height: 0;
    }

    .wh-bio__cats {
        justify-content: center;
    }

    .wh-bio__name {
        font-size: 1.4rem;
    }

    /* Two-column grid: stack label above value, pair Born/Died & Affiliations/Past */
    .wh-bio__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 480px;
        margin: 0 auto;
        text-align: left;
        gap: 0.85rem 1rem;
    }

    .wh-bio__row {
        display: block;
    }

    .wh-bio__row--hometown {
        grid-column: 1 / -1;
    }

    .wh-bio__row--born,
    .wh-bio__row--affiliations {
        grid-column: 1;
    }

    .wh-bio__row--died,
    .wh-bio__row--affiliations-past {
        grid-column: 2;
    }

    /* A lone half of a pair spans full width (must come after the column pins
       above so it wins, e.g. a Died with no Born). */
    .wh-bio__row--solo {
        grid-column: 1 / -1;
    }

    .wh-bio__label {
        display: block;
        margin-bottom: 0.1rem;
    }

    .wh-bio__known {
        max-width: 480px;
        margin: 1.35rem auto 0;
        text-align: left;
    }
}

/* ==========================================================================
   Content Types — Street hero
   A full-bleed featured-image hero with a refined street-sign plate. A light,
   modern nod to street signage (keyline plate, tracked uppercase name, teal
   connector dots) — not a vintage pastiche. Falls back to a brand-toned panel
   when a street has no featured image.
   ========================================================================== */
.wh-street {
    position: relative;
    display: flex;
    min-height: clamp(320px, 42vw, 460px);
    margin: 0 0 2rem;
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--wh-dark);
    isolation: isolate;
}

.wh-street__media,
.wh-street__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bias the cover-crop toward the top-left, then zoom in from that same corner so a
   fixed slice of the right + bottom edges is always cropped away — this guarantees a
   bottom-right watermark is pushed out of frame even when the photo's aspect ratio
   nearly matches the hero's (where object-fit alone would crop almost nothing).
   A corner vignette (below) catches anything a larger logo leaves behind. */
.wh-street__image {
    object-position: left top;
    transform: scale(1.18);
    transform-origin: left top;
}

/* Legibility wash + watermark guard: a bottom-right corner vignette (listed first,
   so it sits on top) hides any logo the zoom-crop misses, fading out so it reads as
   intentional vignetting; the linear wash keeps the top clear and deepens to the plate. */
.wh-street__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            65% 75% at 100% 100%,
            rgba(51, 54, 59, 0.92) 0%,
            rgba(51, 54, 59, 0.55) 32%,
            rgba(51, 54, 59, 0) 62%
        ),
        linear-gradient(
            180deg,
            rgba(51, 54, 59, 0.10) 0%,
            rgba(51, 54, 59, 0.30) 45%,
            rgba(51, 54, 59, 0.85) 100%
        );
}

/* No-image fallback: a quiet brand-toned panel with a faint cartographic grid. */
.wh-street--no-image {
    background:
        linear-gradient(180deg, rgba(101, 186, 176, 0.10), rgba(51, 54, 59, 0)) ,
        radial-gradient(120% 130% at 0% 0%, #3d424a 0%, var(--wh-dark) 62%);
}

.wh-street--no-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: 0.7;
    -webkit-mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 75%);
            mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 75%);
}

.wh-street__overlay {
    position: relative;
    z-index: 1;
    margin-top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: clamp(1.25rem, 4vw, 2.5rem);
}

/* The "sign plate": crisp keyline panel that stands off the photo. */
.wh-street__plate {
    padding: 0.7rem 1.15rem 0.85rem;
    background: rgba(51, 54, 59, 0.52);
    border: 1px solid rgba(101, 186, 176, 0.6);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}

.wh-street__town {
    display: block;
    margin-bottom: 0.35rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wh-primary);
}

.wh-street__name {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(1.9rem, 5vw, 3.1rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    color: var(--wh-white);
}

.wh-street__connects {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.wh-street__connects-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.wh-street__connects-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Teal connector dot before each street — a subtle map/route motif, wrap-safe.
   Kept small and tightly spaced so a long list stays compact. Items stay plain
   inline text (not flex) so the list keeps a real text baseline, letting the
   "Connects with" label sit on the same baseline as the road names. */
.wh-street__connects-item {
    font-weight: 500;
    font-size: 0.85rem;
    line-height: 1.35;
}

.wh-street__connects-item::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 0.35rem;
    border-radius: 50%;
    background: var(--wh-primary);
    vertical-align: middle;
}

/* One measured load-in: the plate and connections rise into place. */
@media (prefers-reduced-motion: no-preference) {
    .wh-street__plate {
        animation: wh-street-rise 0.6s ease both;
    }

    .wh-street__connects {
        animation: wh-street-rise 0.6s ease 0.12s both;
    }

    @keyframes wh-street-rise {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
}

@media (max-width: 575.98px) {
    .wh-street {
        min-height: clamp(260px, 70vw, 360px);
        border-radius: 10px;
    }

    .wh-street__plate {
        padding: 0.6rem 0.9rem 0.7rem;
    }
}