/* ==========================================================================
   Wales Updates Theme Styles
   ========================================================================== */

/* ---------- Variables ---------- */
:root {
    --wu-red: #c8102e;
    --wu-red-dark: #a00d24;
    --wu-red-light: #fef2f2;
    --wu-red-on-dark: #ef3b4f; /* brand red lifted for legibility on the dark footer */
    --wu-green: #00a651;

    --wu-bg: #ffffff;
    --wu-bg-alt: #f6f6f6;
    --wu-bg-card: #ffffff;
    --wu-text: #1a1a1a;
    --wu-text-secondary: #666666;
    --wu-text-tertiary: #999999;
    --wu-border: #e5e5e5;
    --wu-border-light: #f0f0f0;
    --wu-search-bg: #f0f0f0;
    --wu-nav-hover: #f5f5f5;

    --wu-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --wu-font-heading: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    --wu-max-width: 1200px;
    --wu-content-width: 720px;
    --wu-radius: 6px;
    --wu-transition: 0.2s ease;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--wu-font);
    font-size: 17px;
    line-height: 1.6;
    color: var(--wu-text);
    background: var(--wu-bg-alt);
}

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

a {
    color: inherit;
    text-decoration: none;
}

/* ---------- Utility ---------- */
.wu-container {
    max-width: var(--wu-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Read by screen readers, not shown */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.wu-skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--wu-red);
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    font-size: 14px;
}

.wu-skip-link:focus {
    top: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

.wu-header {
    position: relative;
    z-index: 90;
    background: var(--wu-bg);
    border-bottom: 3px solid var(--wu-red);
    transition: box-shadow var(--wu-transition);
}

/* Pinned while scrolling. navigation.js measures the rows above the menu
   (--wu-pin) so on desktop only the menu bar stays on screen; on phones it's
   the whole bar (see the 768px rules). Without JS the header just scrolls */
.wu-header.wu-header-sticky {
    position: sticky;
    top: calc(var(--wu-admin-bar) - var(--wu-pin, 0px));
}

.wu-header.is-stuck {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Height of the WordPress admin bar, so the header pins below it */
body {
    --wu-admin-bar: 0px;
}

body.admin-bar {
    --wu-admin-bar: 32px;
}

@media (max-width: 782px) {
    body.admin-bar {
        --wu-admin-bar: 46px;
    }
}

/* The admin bar scrolls away on small phones */
@media (max-width: 600px) {
    body.admin-bar {
        --wu-admin-bar: 0px;
    }
}

/* Links to a spot on the page land below the pinned header */
html {
    scroll-padding-top: 72px;
}

/* -- Top bar -- */
.wu-topbar {
    background: var(--wu-bg-alt);
    border-bottom: 1px solid var(--wu-border-light);
    font-size: 13px;
    color: var(--wu-text-secondary);
}

.wu-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
}

.wu-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wu-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wu-topbar-sep {
    width: 1px;
    height: 12px;
    background: var(--wu-border);
}

.wu-social-links {
    display: flex;
    align-items: center;
    gap: 2px;
}

.wu-social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 13px;
    color: var(--wu-text-secondary);
    transition: color var(--wu-transition), background var(--wu-transition);
}

.wu-social-links a:hover {
    color: var(--wu-red);
    background: var(--wu-bg);
}

/* -- Main header -- */
.wu-header-main {
    padding: 20px 0;
    border-bottom: 1px solid var(--wu-border-light);
}

.wu-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wu-logo a {
    display: flex;
}

.wu-logo .custom-logo {
    max-height: 60px;
    width: auto;
}

/* Logo lockup (header and footer): dragon | name over tagline */
.wu-lockup {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.wu-lockup-mark {
    display: block;
    flex-shrink: 0;
    color: var(--wu-red);
}

.wu-lockup-mark svg {
    display: block;
    width: auto;
    height: 50px;
}

.wu-lockup-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-left: 14px;
    border-left: 1px solid var(--wu-border);
}

.wu-lockup-name {
    font-family: var(--wu-font-heading);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--wu-text);
    white-space: nowrap;
}

.wu-lockup-tagline {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--wu-text-secondary);
    white-space: nowrap;
}

.wu-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wu-search-box {
    position: relative;
}

.wu-search-box form {
    display: flex;
    align-items: center;
    min-height: 40px;
    background: var(--wu-search-bg);
    border-radius: 24px;
    padding: 0 16px;
    gap: 8px;
    border: 1px solid transparent;
    transition: border-color var(--wu-transition), background var(--wu-transition);
}

.wu-search-box form:focus-within {
    border-color: var(--wu-red);
    background: var(--wu-bg);
}

.wu-search-box svg {
    color: var(--wu-text-tertiary);
    flex-shrink: 0;
}

.wu-search-box input {
    background: none;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--wu-text);
    width: 180px;
    font-family: var(--wu-font);
    transition: width var(--wu-transition);
}

.wu-search-box input:focus {
    width: 240px;
}

.wu-search-box input::placeholder {
    color: var(--wu-text-tertiary);
}

/* "Search in" picker at the start of the box: All, Crime & Court, What's On… */
.wu-search-scope {
    flex-shrink: 0;
    max-width: 130px;
    align-self: stretch;
    margin-left: -4px;
    padding: 0 22px 0 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
    border: none;
    border-right: 1px solid var(--wu-border);
    border-radius: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--wu-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--wu-text);
    text-overflow: ellipsis;
    cursor: pointer;
}

.wu-search-scope:focus-visible {
    color: var(--wu-red);
}

/* -- Search panel (search.js): opens under the search box with the
   sections, recent searches and results as you type -- */
.wu-search-enhanced {
    position: relative;
}

.wu-search-enhanced .wu-search-scope {
    display: none;
}

/* The section picked, shown in the box */
.wu-search-token {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    height: 24px;
    padding: 0 3px 0 10px;
    border-radius: 999px;
    background: var(--wu-red);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.wu-search-token[hidden] {
    display: none;
}

.wu-search-token button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    cursor: pointer;
}

.wu-search-box .wu-search-token svg {
    color: #fff;
}

.wu-search-back {
    display: none;
}

.wu-search-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    width: min(540px, calc(100vw - 32px));
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
    color: var(--wu-text);
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
}

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

.wu-search-panel > * + *,
.wu-sp-body > * + * {
    border-top: 1px solid var(--wu-border-light);
}

.wu-search-panel.is-empty .wu-sp-body {
    display: none;
}

.wu-sp-block {
    padding: 14px 18px;
}

.wu-sp-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.wu-sp-heading {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wu-text-secondary);
}

.wu-sp-clear {
    padding: 0;
    border: 0;
    background: none;
    font: 500 13px var(--wu-font);
    color: var(--wu-text-secondary);
    cursor: pointer;
}

.wu-sp-clear:hover {
    color: var(--wu-red);
}

.wu-sp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wu-sp-chip {
    padding: 7px 14px;
    border: 1px solid var(--wu-border);
    border-radius: 999px;
    background: var(--wu-bg);
    font: 500 14px/1.2 var(--wu-font);
    color: var(--wu-text);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--wu-transition), color var(--wu-transition);
}

.wu-sp-chip:hover {
    border-color: var(--wu-red);
    color: var(--wu-red);
}

.wu-sp-chip[aria-pressed="true"] {
    background: var(--wu-red);
    border-color: var(--wu-red);
    color: #fff;
}

.wu-sp-chip-small {
    padding: 5px 12px;
    font-size: 13px;
}

.wu-sp-chip-small[aria-pressed="true"] {
    background: var(--wu-text);
    border-color: var(--wu-text);
}

/* What's On: area and date */
.wu-sp-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
    background: var(--wu-bg-alt);
}

.wu-sp-filters[hidden] {
    display: none;
}

.wu-sp-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.wu-sp-filter-label {
    width: 56px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wu-text-secondary);
}

.wu-sp-recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    color: var(--wu-text);
}

.wu-search-panel .wu-sp-recent-item svg {
    flex-shrink: 0;
    color: var(--wu-text-tertiary);
}

.wu-sp-recent-q {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wu-sp-recent-scope {
    font-size: 13px;
    color: var(--wu-text-secondary);
}

.wu-sp-recent-item:hover .wu-sp-recent-q {
    color: var(--wu-red);
}

.wu-sp-courts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
}

.wu-sp-courts a {
    padding: 8px 0;
    border-bottom: 1px solid var(--wu-border-light);
    font-size: 14px;
    font-weight: 500;
    color: var(--wu-text);
}

.wu-sp-courts a:hover,
.wu-sp-courts .wu-sp-courts-all {
    color: var(--wu-red);
}

.wu-sp-courts .wu-sp-courts-all {
    grid-column: 1 / -1;
    border-bottom: 0;
    font-weight: 600;
}

.wu-sp-message {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-sp-message:last-child {
    margin-bottom: 0;
}

.wu-sp-results {
    display: flex;
    flex-direction: column;
    margin: 0 -18px;
    transition: opacity var(--wu-transition);
}

.is-loading .wu-sp-results {
    opacity: 0.55;
}

.wu-sp-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 18px;
    color: var(--wu-text);
}

.wu-sp-item:hover,
.wu-sp-item.is-active {
    background: var(--wu-bg-alt);
}

.wu-sp-thumb {
    display: block;
    flex-shrink: 0;
    width: 72px;
    height: 48px;
    border-radius: 6px;
    background: var(--wu-border);
    object-fit: cover;
}

.wu-sp-item-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.wu-sp-item-cat {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wu-red);
}

.wu-sp-item-title {
    font-weight: 600;
    line-height: 1.3;
}

.wu-sp-item:hover .wu-sp-item-title,
.wu-sp-item.is-active .wu-sp-item-title {
    color: var(--wu-red);
}

.wu-sp-item-meta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    color: var(--wu-text-secondary);
}

.wu-search-panel mark,
.wu-results mark {
    padding: 0 2px;
    border-radius: 3px;
    background: #fde4e8;
    color: inherit;
}

.wu-sp-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: var(--wu-red);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.wu-sp-all:hover,
.wu-sp-all.is-active {
    background: var(--wu-red-dark);
    color: #fff;
}

.wu-search-box .wu-sp-all svg {
    color: #fff;
}

.wu-sp-keys {
    display: flex;
    gap: 18px;
    padding: 9px 18px;
    background: var(--wu-bg-alt);
    font-size: 12px;
    color: var(--wu-text-secondary);
}

.wu-sp-body > .wu-sp-all,
.wu-search-panel > .wu-sp-keys {
    border-top: 0;
}

@media (hover: none) {
    .wu-sp-keys {
        display: none;
    }
}

/* "Newsletter": jumps to the signup in the footer */
.wu-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 24px;
    background: var(--wu-red);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--wu-transition);
}

.wu-header-cta:hover {
    background: var(--wu-red-dark);
}

.wu-search-toggle,
.wu-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--wu-text);
    cursor: pointer;
    transition: background var(--wu-transition), color var(--wu-transition);
}

@media (hover: hover) {
    .wu-search-toggle:hover,
    .wu-menu-toggle:hover {
        background: var(--wu-nav-hover);
    }
}

.wu-search-toggle[aria-expanded="true"] {
    color: var(--wu-red);
}

/* Hamburger turns into a cross while the menu is open */
.wu-menu-icon-close,
.wu-menu-toggle[aria-expanded="true"] .wu-menu-icon-open {
    display: none;
}

.wu-menu-toggle[aria-expanded="true"] .wu-menu-icon-close {
    display: block;
}

/* -- Navigation -- */
.wu-nav {
    background: var(--wu-bg);
}

.wu-nav > .wu-container {
    display: flex;
    align-items: center;
}

/* Small logo and search that join the menu bar once it's pinned */
.wu-nav-home {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 0;
    overflow: hidden;
    color: var(--wu-red);
    opacity: 0;
    visibility: hidden;
    transition: max-width 0.25s ease, opacity 0.25s ease, visibility 0.25s;
}

.wu-nav-home svg {
    display: block;
    width: auto;
    height: 30px;
}

.wu-nav-home img {
    width: auto;
    max-width: 140px;
    max-height: 30px;
}

.is-stuck .wu-nav-home {
    max-width: 160px;
    opacity: 1;
    visibility: visible;
}

.wu-nav-search {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 8px;
    height: 34px;
    margin-left: 16px;
    padding: 0 14px;
    background: var(--wu-search-bg);
    border: 1px solid transparent;
    border-radius: 20px;
    color: var(--wu-text-tertiary);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s, border-color var(--wu-transition), background var(--wu-transition);
}

.is-stuck .wu-nav-search,
.wu-nav-search:focus-within {
    opacity: 1;
    visibility: visible;
}

.wu-nav-search:focus-within {
    border-color: var(--wu-red);
    background: var(--wu-bg);
}

.wu-nav-search input {
    width: 180px;
    background: none;
    border: none;
    outline: none;
    font-family: var(--wu-font);
    font-size: 14px;
    color: var(--wu-text);
}

.wu-nav-search input::placeholder {
    color: var(--wu-text-tertiary);
}

.wu-nav-list {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    list-style: none;
}

.wu-nav-list li {
    position: relative;
}

.wu-nav-list > li > a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--wu-text);
    transition: color var(--wu-transition), border-color var(--wu-transition);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

/* The section being read is marked too, e.g. Crime & Court on a court story */
.wu-nav-list > li.current-menu-item > a,
.wu-nav-list > li.current_page_item > a,
.wu-nav-list > li.current-menu-ancestor > a,
.wu-nav-list > li.current-menu-parent > a,
.wu-nav-list > li.current-post-ancestor > a,
.wu-nav-list > li.current-category-ancestor > a {
    color: var(--wu-red);
    border-bottom-color: var(--wu-red);
}

/* Only where there's a pointer, so a tap on a phone doesn't leave it red */
@media (hover: hover) {
    .wu-nav-list > li:hover > a {
        color: var(--wu-red);
        border-bottom-color: var(--wu-red);
    }
}

/* Chevron on sections with a dropdown */
.wu-nav-list > .menu-item-has-children > a::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.6;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--wu-transition);
}

.wu-nav-list > .menu-item-has-children:hover > a::after,
.wu-nav-list > .menu-item-has-children:focus-within > a::after {
    transform: translateY(1px) rotate(-135deg);
}

/* Dropdown: opens on hover or when a link inside has keyboard focus. It hangs
   below the header's red line; the ::before bridges that gap for the mouse */
.wu-nav-list .sub-menu {
    position: absolute;
    top: calc(100% + 3px);
    left: 6px;
    min-width: 220px;
    padding: 6px;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-top: 0;
    border-radius: 0 0 var(--wu-radius) var(--wu-radius);
    list-style: none;
    z-index: 100;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.wu-nav-list .sub-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 3px;
}

.wu-nav-list li:hover > .sub-menu,
.wu-nav-list li:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-duration: 0.15s, 0.15s, 0s; /* links can take focus straight away */
}

/* Escape closes it until the pointer or focus leaves (navigation.js) */
.wu-nav-list li.wu-sub-dismissed > .sub-menu {
    visibility: hidden;
    opacity: 0;
}

.wu-nav-list .sub-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--wu-text);
    transition: background var(--wu-transition), color var(--wu-transition);
}

.wu-nav-list .sub-menu a:hover,
.wu-nav-list .sub-menu .current-menu-item > a {
    background: var(--wu-red-light);
    color: var(--wu-red);
}

/* Added by navigation.js; only shown on phones */
.wu-sub-toggle {
    display: none;
}

/* Newsletter and social links in the phone menu */
.wu-nav-extra {
    display: none;
}

/* -- Trending bar -- */
.wu-trending {
    background: var(--wu-bg);
    border-bottom: 1px solid var(--wu-border);
}

.wu-trending-inner {
    display: flex;
    align-items: center;
    padding: 8px 0;
    gap: 14px;
}

.wu-trending-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: var(--wu-red);
    padding: 3px 10px;
    border-radius: 3px;
    white-space: nowrap;
}

.wu-trending-items {
    display: flex;
    gap: 20px;
    overflow: hidden;
    font-size: 13px;
}

.wu-trending-items a {
    color: var(--wu-text-secondary);
    white-space: nowrap;
    transition: color var(--wu-transition);
}

.wu-trending-items a:hover {
    color: var(--wu-red);
}

.wu-trending-items a + a::before {
    content: '|';
    margin-right: 20px;
    color: var(--wu-border);
}

/* ==========================================================================
   Main Content
   ========================================================================== */

.wu-main {
    padding: 32px 0 48px;
}

/* ---------- Sections ---------- */
.wu-section {
    margin-top: 40px;
}

.wu-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
}

.wu-section-title {
    font-family: var(--wu-font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--wu-text);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--wu-red);
    display: inline-block;
}

.wu-section-header .wu-section-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.wu-section-link {
    font-size: 14px;
    color: var(--wu-red);
    font-weight: 500;
    transition: opacity var(--wu-transition);
}

.wu-section-link:hover {
    opacity: 0.8;
}

/* ---------- Hero ---------- */
.wu-hero {
    margin-bottom: 8px;
}

.wu-hero-link {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--wu-bg-card);
    border-radius: var(--wu-radius);
    overflow: hidden;
    border: 1px solid var(--wu-border-light);
    transition: box-shadow var(--wu-transition);
}

.wu-hero-link:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.wu-hero-thumb {
    overflow: hidden;
}

.wu-hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.wu-hero-link:hover .wu-hero-thumb img {
    transform: scale(1.03);
}

.wu-hero-body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wu-hero-cat {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--wu-red);
    margin-bottom: 12px;
}

.wu-hero-title {
    font-family: var(--wu-font-heading);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--wu-text);
    margin-bottom: 12px;
}

.wu-hero-excerpt {
    font-size: 16px;
    color: var(--wu-text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

.wu-hero-meta {
    font-size: 13px;
    color: var(--wu-text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.wu-hero-meta-sep {
    color: var(--wu-border);
}

/* ---------- Post Grid ---------- */
.wu-post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.wu-post-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ---------- Card ---------- */
.wu-card {
    background: var(--wu-bg-card);
    border-radius: var(--wu-radius);
    overflow: hidden;
    border: 1px solid var(--wu-border-light);
    transition: box-shadow var(--wu-transition);
}

.wu-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.wu-card-link {
    display: block;
}

.wu-card-thumb {
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.wu-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.wu-card:hover .wu-card-thumb img {
    transform: scale(1.03);
}

.wu-card-body {
    padding: 16px 20px 20px;
}

.wu-card-cat {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--wu-red);
    margin-bottom: 8px;
    display: block;
}

.wu-card-title {
    font-family: var(--wu-font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--wu-text);
    margin-bottom: 8px;
}

.wu-card-excerpt {
    font-size: 15px;
    color: var(--wu-text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

.wu-card-meta {
    font-size: 12px;
    color: var(--wu-text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.wu-card-meta-sep {
    color: var(--wu-border);
}

/* ==========================================================================
   Single Article
   ========================================================================== */

.wu-single-layout {
    max-width: var(--wu-content-width);
    margin: 0 auto;
}

.wu-article-header {
    margin-bottom: 28px;
}

.wu-article-cat {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--wu-red);
    margin-bottom: 12px;
    transition: opacity var(--wu-transition);
}

.wu-article-cat:hover {
    opacity: 0.8;
}

.wu-article-title {
    font-family: var(--wu-font-heading);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--wu-text);
    margin-bottom: 16px;
}

.wu-article-meta {
    font-size: 14px;
    color: var(--wu-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.wu-article-meta-sep {
    color: var(--wu-border);
}

.wu-article-featured {
    margin-bottom: 32px;
    border-radius: var(--wu-radius);
    overflow: hidden;
}

.wu-article-featured img {
    width: 100%;
}

.wu-article-featured figcaption {
    font-size: 13px;
    color: var(--wu-text-tertiary);
    padding: 8px 0;
    font-style: italic;
}

/* Article body */
.wu-article-content {
    font-size: 18px;
    line-height: 1.85;
    color: var(--wu-text);
}

.wu-article-content p {
    margin-bottom: 1.5em;
}

.wu-article-content h2 {
    font-family: var(--wu-font-heading);
    font-size: 26px;
    font-weight: 700;
    margin: 2em 0 0.75em;
}

.wu-article-content h3 {
    font-family: var(--wu-font-heading);
    font-size: 22px;
    font-weight: 700;
    margin: 1.5em 0 0.5em;
}

.wu-article-content blockquote {
    border-left: 3px solid var(--wu-red);
    margin: 1.5em 0;
    padding: 12px 24px;
    font-style: italic;
    color: var(--wu-text-secondary);
    background: var(--wu-bg-alt);
    border-radius: 0 var(--wu-radius) var(--wu-radius) 0;
}

.wu-article-content a {
    color: var(--wu-red);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wu-article-content a:hover {
    text-decoration: none;
}

.wu-article-content ul,
.wu-article-content ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.wu-article-content li {
    margin-bottom: 0.5em;
}

.wu-article-content img {
    border-radius: var(--wu-radius);
    margin: 1.5em 0;
}

.wu-article-content .wp-caption {
    max-width: 100%;
}

.wu-article-content .wp-caption-text {
    font-size: 13px;
    color: var(--wu-text-tertiary);
    font-style: italic;
    margin-top: 6px;
}

/* Article footer */
.wu-article-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--wu-border);
}

.wu-article-tags {
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-article-tags a {
    color: var(--wu-red);
}

.wu-tags-label {
    font-weight: 600;
    color: var(--wu-text);
}

/* Related posts */
.wu-related {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--wu-border);
}

/* ==========================================================================
   Archive & Search
   ========================================================================== */

.wu-archive-header {
    margin-bottom: 32px;
}

.wu-archive-title {
    font-family: var(--wu-font-heading);
    font-size: 30px;
    font-weight: 800;
    color: var(--wu-text);
}

.wu-archive-title span {
    color: var(--wu-red);
}

.wu-archive-desc {
    font-size: 15px;
    color: var(--wu-text-secondary);
    margin-top: 8px;
}

/* Sub-category buttons, e.g. each court on the Magistrates Court page */
.wu-subcat-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.wu-subcat-chip {
    padding: 7px 14px;
    border: 1px solid var(--wu-border);
    border-radius: 999px;
    background: var(--wu-bg);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--wu-text);
    transition: border-color var(--wu-transition), color var(--wu-transition);
}

.wu-subcat-chip:hover {
    border-color: var(--wu-red);
    color: var(--wu-red);
}

.wu-subcat-chip.is-current {
    background: var(--wu-red);
    border-color: var(--wu-red);
    color: #fff;
}

/* -- Search results page -- */
.wu-subcat-count {
    margin-left: 4px;
    font-size: 12px;
    color: var(--wu-text-secondary);
}

.wu-subcat-chip.is-current .wu-subcat-count {
    color: #fde4e8;
}

.wu-search-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px 40px;
}

.wu-search-main {
    flex: 999 1 560px;
    min-width: 0;
}

.wu-search-side {
    display: flex;
    flex: 1 1 280px;
    flex-direction: column;
    gap: 16px;
}

.wu-search-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-radius: 10px;
}

.wu-search-total {
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-search-total strong {
    color: var(--wu-text);
}

.wu-search-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.wu-search-sort {
    display: flex;
    padding: 3px;
    border-radius: 999px;
    background: var(--wu-search-bg);
}

.wu-search-sort a {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--wu-text-secondary);
}

.wu-search-sort a:hover {
    color: var(--wu-text);
}

.wu-search-sort a.is-current {
    background: var(--wu-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    font-weight: 600;
    color: var(--wu-text);
}

.wu-search-controls select,
.wu-search-apply {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--wu-border);
    border-radius: 8px;
    background: var(--wu-bg);
    font: 500 13px var(--wu-font);
    color: var(--wu-text);
}

.wu-search-apply {
    cursor: pointer;
}

.wu-search-apply[hidden] {
    display: none;
}

.wu-result {
    border-bottom: 1px solid var(--wu-border);
}

.wu-result:last-child {
    border-bottom: 0;
}

.wu-result-link {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    color: var(--wu-text);
}

.wu-result-thumb {
    flex-shrink: 0;
    width: 168px;
}

.wu-result-thumb img {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 8px;
    object-fit: cover;
}

.wu-result-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.wu-result-body .wu-card-cat {
    margin-bottom: 0;
}

.wu-result-title {
    font-family: var(--wu-font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.wu-result-link:hover .wu-result-title {
    color: var(--wu-red);
}

.wu-result-snippet {
    font-size: 15px;
    line-height: 1.5;
    color: var(--wu-text-secondary);
}

.wu-search-card {
    padding: 20px;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-radius: 10px;
}

.wu-search-card h2 {
    margin-bottom: 8px;
    font-family: var(--wu-font-heading);
    font-size: 18px;
    font-weight: 700;
}

.wu-search-card p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--wu-text-secondary);
}

.wu-search-card strong {
    color: var(--wu-text);
}

.wu-search-courts {
    list-style: none;
}

.wu-search-courts a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--wu-border-light);
    font-size: 14px;
    font-weight: 500;
    color: var(--wu-text);
}

.wu-search-courts li:last-child a {
    border-bottom: 0;
}

.wu-search-courts a:hover {
    color: var(--wu-red);
}

.wu-search-courts-count {
    color: var(--wu-text-secondary);
}

@media (max-width: 600px) {
    .wu-result-link {
        gap: 14px;
        padding: 16px 0;
    }

    .wu-result-thumb {
        width: 96px;
    }

    .wu-result-thumb img {
        aspect-ratio: 1;
    }

    .wu-result-title {
        font-size: 17px;
    }

    .wu-result-snippet {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 14px;
    }
}

/* ==========================================================================
   Page
   ========================================================================== */

.wu-page {
    max-width: var(--wu-content-width);
    margin: 0 auto;
}

.wu-page-header {
    margin-bottom: 28px;
}

.wu-page-title {
    font-family: var(--wu-font-heading);
    font-size: 36px;
    font-weight: 800;
    line-height: 1.25;
}

.wu-page-content {
    font-size: 17px;
    line-height: 1.75;
}

.wu-page-content p {
    margin-bottom: 1.25em;
}

/* Newsletter confirm and unsubscribe pages (inc/subscriber-links.php):
   a card with a dark top like the footer signup, coloured by outcome */
/* Admin-only bar for switching between preview pages */
.wu-nl-preview {
    max-width: 640px;
    margin: 32px auto -24px;
    padding: 14px 18px;
    border: 1px dashed #b5b5b5;
    border-radius: 12px;
    background: var(--wu-bg);
    font-size: 14px;
}

.wu-nl-preview p {
    margin: 0 0 8px;
    color: var(--wu-text-secondary);
}

.wu-nl-preview strong {
    margin-right: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff3cd;
    color: #7a5b00;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wu-nl-preview ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wu-nl-preview a {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid var(--wu-border);
    border-radius: 999px;
    color: var(--wu-text);
    text-decoration: none;
}

.wu-nl-preview a:hover {
    border-color: var(--wu-text);
}

.wu-nl-preview a[aria-current="page"] {
    background: var(--wu-text);
    border-color: var(--wu-text);
    color: #fff;
}

.wu-nl-card {
    --wu-nl-accent: var(--wu-red-on-dark);
    --wu-nl-rule: var(--wu-red);
    --wu-nl-badge-bg: rgba(239, 59, 79, 0.16);
    max-width: 640px;
    margin: 48px auto 0;
    border-radius: 20px;
    overflow: hidden;
    background: var(--wu-bg);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 24px 60px -24px rgba(0, 0, 0, 0.3);
}

.wu-nl-card--green {
    --wu-nl-accent: #3ccf7e;
    --wu-nl-rule: var(--wu-green);
    --wu-nl-badge-bg: rgba(60, 207, 126, 0.16);
}

.wu-nl-card--grey {
    --wu-nl-accent: #d0d0d0;
    --wu-nl-rule: #555;
    --wu-nl-badge-bg: rgba(255, 255, 255, 0.1);
}

.wu-nl-card-top {
    position: relative;
    overflow: hidden;
    padding: 40px 40px 34px;
    background: #1e1e1e;
    border-bottom: 4px solid var(--wu-nl-rule);
    color: #fff;
}

.wu-nl-card-plane {
    position: absolute;
    right: -30px;
    bottom: -60px;
    font-size: 230px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.045);
    transform: rotate(-14deg);
    pointer-events: none;
}

.wu-nl-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--wu-nl-badge-bg);
    color: var(--wu-nl-accent);
    font-size: 26px;
    animation: wu-nl-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes wu-nl-pop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .wu-nl-badge {
        animation: none;
    }
}

.wu-nl-eyebrow {
    position: relative;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wu-nl-accent);
}

.wu-nl-title {
    position: relative;
    margin: 0 0 10px;
    font-family: var(--wu-font-heading);
    font-size: 38px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff;
}

.wu-nl-intro {
    position: relative;
    max-width: 46ch;
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: #c4c4c4;
}

.wu-nl-card-body {
    padding: 30px 40px 32px;
}

.wu-nl-picks {
    margin: 0 0 28px;
    border: 1px solid var(--wu-border);
    border-radius: 14px;
}

.wu-nl-picks > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 20px;
}

.wu-nl-picks > div + div {
    border-top: 1px solid var(--wu-border-light);
}

.wu-nl-picks dt {
    font-size: 15px;
    color: var(--wu-text-secondary);
}

.wu-nl-picks dd {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.wu-nl-action {
    margin: 0 0 24px;
}

.wu-nl-action .wu-btn--subscribe {
    width: auto;
    min-height: 54px;
    padding: 0 30px;
    gap: 10px;
}

.wu-nl-action .wu-btn--subscribe i {
    font-size: 14px;
    transition: transform var(--wu-transition);
}

.wu-nl-action .wu-btn--subscribe:hover i {
    transform: translateX(3px);
}

/* Preferences form: light versions of the footer signup's chips and cards */
.wu-nl-prefs-switch {
    margin: 0 0 20px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff8e1;
    font-size: 15px;
    color: #6b4e00;
}

.wu-nl-prefs-group {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.wu-nl-prefs-group legend,
.wu-nl-prefs-label {
    display: block;
    margin: 0 0 10px;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
}

.wu-nl-prefs-label span {
    font-weight: 400;
    color: var(--wu-text-secondary);
}

.wu-nl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wu-nl-chip,
.wu-nl-freq-option {
    position: relative;
    cursor: pointer;
}

.wu-nl-chip input,
.wu-nl-freq-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.wu-nl-chip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px 0 12px;
    border: 1px solid #c9c9c9;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    color: var(--wu-text);
    transition: border-color var(--wu-transition), background var(--wu-transition);
}

.wu-nl-chip span::before {
    content: '\f067';
    width: 14px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    text-align: center;
    color: var(--wu-text-secondary);
}

.wu-nl-chip:hover span {
    border-color: var(--wu-text);
}

.wu-nl-chip input:checked + span {
    border-color: var(--wu-red);
    background: var(--wu-red-light);
    color: var(--wu-red-dark);
}

.wu-nl-chip input:checked + span::before {
    content: '\f00c';
    color: var(--wu-red);
}

.wu-nl-freq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.wu-nl-freq-option > span {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    box-sizing: border-box;
    padding: 14px 16px 14px 46px;
    border: 1px solid #c9c9c9;
    border-radius: 12px;
    transition: border-color var(--wu-transition), background var(--wu-transition);
}

.wu-nl-freq-option > span::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    margin-top: -9px;
    border: 2px solid #9a9a9a;
    border-radius: 50%;
    background: #fff;
}

.wu-nl-freq-option strong {
    font-size: 16px;
}

.wu-nl-freq-option small {
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-nl-freq-option input:checked + span {
    border-color: var(--wu-red);
    box-shadow: inset 0 0 0 1px var(--wu-red);
    background: var(--wu-red-light);
}

.wu-nl-freq-option input:checked + span::before {
    border: 5px solid var(--wu-red);
}

.wu-nl-chip input:focus-visible + span,
.wu-nl-freq-option input:focus-visible + span {
    outline: 2px solid var(--wu-text);
    outline-offset: 2px;
}

.wu-nl-prefs-input {
    width: 100%;
    max-width: 360px;
    height: 46px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid #c9c9c9;
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px;
}

.wu-nl-prefs-input:focus {
    outline: none;
    border-color: var(--wu-red);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18);
}

.wu-nl-prefs-email {
    margin: -8px 0 20px;
    font-size: 14px;
    color: var(--wu-text-secondary);
}

/* A note at the top of the card body, e.g. "already paused" */
.wu-nl-notice {
    margin: 0 0 22px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #fff8e1;
    font-size: 15px;
    color: #6b4e00;
}

/* Unsubscribe page: alternatives under the unsubscribe button */
.wu-nl-offer {
    margin: 0 0 28px;
}

.wu-nl-offer-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.wu-nl-offer-or::before,
.wu-nl-offer-or::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--wu-border);
}

.wu-nl-offer-option {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 10px;
    padding: 16px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 14px;
}

.wu-nl-offer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f2f2f2;
    font-size: 16px;
}

.wu-nl-offer-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wu-nl-offer-text strong {
    font-size: 16px;
}

.wu-nl-offer-text > span {
    font-size: 14px;
    line-height: 1.5;
    color: var(--wu-text-secondary);
}

.wu-nl-offer-text select {
    align-self: flex-start;
    margin-top: 8px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #c9c9c9;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    background: var(--wu-bg);
}

.wu-nl-offer-option button,
.wu-nl-offer-option > a,
.wu-nl-prefs-pause button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--wu-text);
    border-radius: 9px;
    background: var(--wu-bg);
    color: var(--wu-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.wu-nl-offer-option button:hover,
.wu-nl-offer-option > a:hover,
.wu-nl-prefs-pause button:hover {
    background: var(--wu-text);
    color: #fff;
}

/* After unsubscribing: optional reasons */
.wu-nl-reasons {
    margin: 0 0 28px;
    padding: 0 0 26px;
    border-bottom: 1px solid var(--wu-border-light);
}

.wu-nl-reasons fieldset {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.wu-nl-reasons legend {
    padding: 0;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 700;
}

.wu-nl-reasons legend span {
    font-weight: 400;
    color: var(--wu-text-secondary);
}

.wu-nl-reasons p {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-nl-chip--plain span::before {
    display: none;
}

.wu-nl-chip--plain span {
    padding: 0 16px;
}

.wu-nl-chip--plain input:checked + span {
    border-color: var(--wu-text);
    background: var(--wu-text);
    color: #fff;
}

.wu-nl-reasons-send {
    min-height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: var(--wu-text);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.wu-nl-action-lead {
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--wu-text-secondary);
}

/* Preferences page: pause or resume */
.wu-nl-prefs-pause {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 16px 18px;
    border: 1px dashed #c9c9c9;
    border-radius: 12px;
}

.wu-nl-prefs-pause p {
    flex: 1 1 260px;
    margin: 0;
    font-size: 15px;
}

.wu-nl-prefs-pause select {
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid #c9c9c9;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    background: var(--wu-bg);
}

/* Optional first name, offered once subscribed */
.wu-nl-name {
    margin: 0 0 26px;
}

.wu-nl-name label {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.wu-nl-name label span {
    font-weight: 400;
    color: var(--wu-text-secondary);
}

.wu-nl-name-hint {
    margin: 2px 0 10px;
    font-size: 14px;
    color: var(--wu-text-secondary);
}

.wu-nl-name-row {
    display: flex;
    gap: 8px;
}

.wu-nl-name-row input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid #c9c9c9;
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px;
    color: var(--wu-text);
    background: var(--wu-bg);
    outline: none;
    transition: border-color var(--wu-transition), box-shadow var(--wu-transition);
}

.wu-nl-name-row input:focus {
    border-color: var(--wu-red);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18);
}

.wu-nl-name-row button {
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: var(--wu-text);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--wu-transition);
}

.wu-nl-name-row button:hover {
    background: #000;
}

.wu-nl-name-row button:focus-visible {
    outline: 2px solid var(--wu-red);
    outline-offset: 2px;
}

.wu-nl-name-saved {
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #00843f;
}

.wu-nl-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    font-size: 15px;
}

.wu-nl-links a {
    color: var(--wu-text-secondary);
    text-decoration: none;
}

.wu-nl-links a:hover {
    color: var(--wu-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wu-nl-links a:first-child {
    margin-right: auto;
}

.wu-nl-stories {
    margin-top: 56px;
}

@media (max-width: 600px) {
    .wu-nl-card {
        margin-top: 24px;
        border-radius: 16px;
    }

    .wu-nl-card-top {
        padding: 30px 22px 26px;
    }

    .wu-nl-title {
        font-size: 30px;
    }

    .wu-nl-card-body {
        padding: 24px 22px 26px;
    }

    .wu-nl-picks > div {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 12px 16px;
    }

    .wu-nl-action .wu-btn--subscribe {
        width: 100%;
    }

    .wu-nl-freq {
        grid-template-columns: 1fr;
    }

    .wu-nl-offer-option {
        flex-wrap: wrap;
    }

    .wu-nl-offer-option button,
    .wu-nl-offer-option > a {
        margin-left: 56px;
    }

    .wu-nl-stories {
        margin-top: 40px;
    }
}

/* ==========================================================================
   404
   ========================================================================== */

.wu-404 {
    text-align: center;
    padding: 80px 20px;
}

.wu-404 h1 {
    font-family: var(--wu-font-heading);
    font-size: 36px;
    margin-bottom: 12px;
}

.wu-404 p {
    font-size: 16px;
    color: var(--wu-text-secondary);
    margin-bottom: 24px;
}

.wu-btn {
    display: inline-block;
    background: var(--wu-red);
    color: #fff;
    padding: 10px 24px;
    border-radius: var(--wu-radius);
    font-size: 14px;
    font-weight: 600;
    transition: background var(--wu-transition);
}

.wu-btn:hover {
    background: var(--wu-red-dark);
}

/* ==========================================================================
   No Results
   ========================================================================== */

.wu-no-results {
    text-align: center;
    padding: 60px 20px;
}

.wu-no-results h2 {
    font-family: var(--wu-font-heading);
    font-size: 28px;
    margin-bottom: 12px;
}

.wu-no-results p {
    color: var(--wu-text-secondary);
    margin-bottom: 20px;
}

.wu-no-results p a {
    color: var(--wu-red);
    font-weight: 600;
}

.wu-no-results p a:hover {
    text-decoration: underline;
}

/* Search form (searchform.php): the header's rounded box, bigger, with a
   Search button */
.wu-searchform {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    min-height: 54px;
    margin: 0 auto;
    padding: 0 6px 0 18px;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-radius: 999px;
    transition: border-color var(--wu-transition), box-shadow var(--wu-transition);
}

.wu-searchform:focus-within {
    border-color: var(--wu-red);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
}

.wu-searchform svg {
    flex-shrink: 0;
    color: var(--wu-text-tertiary);
}

.wu-searchform input {
    flex: 1;
    min-width: 0;
    height: 50px;
    background: none;
    border: none;
    outline: none;
    font-family: var(--wu-font);
    font-size: 16px;
    color: var(--wu-text);
}

.wu-searchform input::placeholder {
    color: var(--wu-text-tertiary);
}

.wu-searchform button {
    flex-shrink: 0;
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--wu-red);
    font-family: var(--wu-font);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background var(--wu-transition);
}

.wu-searchform button:hover {
    background: var(--wu-red-dark);
}

@media (max-width: 480px) {
    .wu-searchform {
        padding-left: 14px;
    }

    .wu-searchform svg {
        display: none;
    }

    .wu-searchform button {
        padding: 0 16px;
    }
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.wu-pagination {
    margin-top: 40px;
    text-align: center;
}

.wu-pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.wu-pagination a,
.wu-pagination span {
    display: inline-block;
    padding: 8px 14px;
    font-size: 14px;
    border-radius: var(--wu-radius);
    transition: all var(--wu-transition);
}

.wu-pagination a {
    color: var(--wu-text);
    border: 1px solid var(--wu-border);
}

.wu-pagination a:hover {
    border-color: var(--wu-red);
    color: var(--wu-red);
}

.wu-pagination .current {
    background: var(--wu-red);
    color: #fff;
    border: 1px solid var(--wu-red);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.wu-footer {
    background: var(--wu-text);
    color: #ccc;
    padding: 40px 0 0;
    margin-top: 48px;
}

.wu-footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Same height as the link columns: icons sit level with the last link */
.wu-footer-brand {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.wu-footer-desc {
    max-width: 300px;
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.55;
    color: #999;
}

.wu-footer-brand .wu-footer-social {
    margin-top: auto;
}

.wu-footer-logo {
    display: inline-block;
    margin-bottom: 18px;
}

.wu-footer-logo .wu-lockup-mark {
    color: var(--wu-red-on-dark);
}

.wu-footer-logo .wu-lockup-mark svg {
    height: 42px;
}

.wu-footer-logo .wu-lockup-text {
    border-left-color: rgba(255, 255, 255, 0.2);
}

.wu-footer-logo .wu-lockup-name {
    color: #fff;
    font-size: 24px;
}

.wu-footer-logo .wu-lockup-tagline {
    color: #999;
    font-size: 10px;
}

.wu-footer-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wu-footer-nav a {
    font-size: 14px;
    color: #ccc;
    transition: color var(--wu-transition);
}

.wu-footer-nav a:hover {
    color: #fff;
}

.wu-footer-bottom {
    padding: 20px 0;
    font-size: 13px;
    color: #888;
}

/* ==========================================================================
   Widgets
   ========================================================================== */

.wu-widget {
    margin-bottom: 28px;
}

.wu-widget-title {
    font-family: var(--wu-font-heading);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--wu-red);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
    .wu-hero-link {
        grid-template-columns: 1fr;
    }

    .wu-hero-body {
        padding: 20px;
    }

    .wu-hero-title {
        font-size: 24px;
    }

    .wu-post-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .wu-footer-top {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .wu-topbar {
        display: none;
    }

    .wu-search-box {
        display: none;
    }

    .wu-search-box.wu-search-open {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--wu-bg);
        padding: 12px 20px;
        border-bottom: 1px solid var(--wu-border);
        z-index: 99;
    }

    .wu-search-box.wu-search-open form {
        max-width: 100%;
    }

    .wu-search-box.wu-search-open input {
        width: 100%;
    }

    /* With search.js: the search fills the screen (back button, box,
       then the sections and results) */
    html.wu-search-locked {
        overflow: hidden;
    }

    .wu-search-box.wu-search-full.wu-search-open {
        position: fixed;
        inset: 0;
        z-index: 1000;
        padding: 0;
        border: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .wu-search-box.wu-search-full form {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
        background: var(--wu-bg);
        border: 0;
        border-radius: 0;
    }

    .wu-search-box.wu-search-full form > svg,
    .wu-search-box.wu-search-full .wu-search-token {
        display: none;
    }

    .wu-search-box.wu-search-full .wu-search-back {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: none;
        color: var(--wu-text);
        cursor: pointer;
    }

    .wu-search-box.wu-search-full .wu-search-back svg {
        color: var(--wu-text);
    }

    .wu-search-box.wu-search-full input,
    .wu-search-box.wu-search-full input:focus {
        flex: 1;
        width: auto;
        min-width: 0;
        height: 44px;
        padding: 0 16px;
        border: 1px solid var(--wu-red);
        border-radius: 24px;
        font-size: 16px;
    }

    .wu-search-box.wu-search-full .wu-search-panel {
        display: block;
        position: static;
        flex-basis: 100%;
        width: auto;
        min-width: 0;
        max-height: none;
        margin: 4px -12px -10px;
        overflow: visible;
        border: 0;
        border-top: 1px solid var(--wu-border-light);
        border-radius: 0;
        box-shadow: none;
    }

    /* Sections as one row that scrolls sideways */
    .wu-search-full .wu-sp-scopes .wu-sp-heading {
        display: none;
    }

    .wu-search-full .wu-sp-scopes .wu-sp-chips {
        flex-wrap: nowrap;
        margin: 0 -18px;
        padding: 0 18px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .wu-search-full .wu-sp-scopes .wu-sp-chips::-webkit-scrollbar {
        display: none;
    }

    .wu-search-full .wu-sp-chip {
        padding: 9px 14px;
    }

    .wu-search-full .wu-sp-thumb {
        width: 64px;
        height: 64px;
    }

    .wu-search-full .wu-sp-all {
        justify-content: center;
        margin: 16px;
        border-radius: 24px;
        font-size: 15px;
    }

    .wu-search-full .wu-sp-keys {
        display: none;
    }

    .wu-search-toggle,
    .wu-menu-toggle {
        display: flex;
    }

    .wu-header-actions {
        gap: 4px;
    }

    .wu-header-actions > .wu-header-cta {
        display: none;
    }

    .wu-header-main {
        position: relative;
        padding: 12px 0;
    }

    .wu-logo .wu-lockup {
        gap: 10px;
    }

    .wu-logo .wu-lockup-mark svg {
        height: 32px;
    }

    .wu-logo .wu-lockup-text {
        padding-left: 10px;
    }

    .wu-logo .wu-lockup-name {
        font-size: 22px;
    }

    .wu-logo .wu-lockup-tagline {
        display: none;
    }

    /* The whole bar stays pinned, with or without JS */
    .wu-header,
    .wu-header.wu-header-sticky {
        position: sticky;
        top: var(--wu-admin-bar);
    }

    html {
        scroll-padding-top: 80px;
    }

    /* Menu: a panel under the header bar, opened by the hamburger. It
       scrolls on its own if it's taller than the space below the bar */
    .wu-nav {
        display: none;
    }

    .wu-nav.wu-nav-open {
        display: block;
        max-height: calc(100vh - 70px - var(--wu-admin-bar));
        max-height: calc(100dvh - 70px - var(--wu-admin-bar));
        overflow-y: auto;
        overscroll-behavior: contain;
        border-top: 1px solid var(--wu-border);
    }

    .wu-nav > .wu-container {
        display: block;
    }

    .wu-nav-home,
    .wu-nav-search {
        display: none;
    }

    .wu-nav-list {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .wu-nav-list > li {
        border-bottom: 1px solid var(--wu-border-light);
    }

    .wu-nav-list > li > a {
        padding: 14px 0;
        font-size: 16px;
        border-bottom: 0;
    }

    .wu-nav-list > .menu-item-has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .wu-nav-list > .menu-item-has-children > a {
        flex: 1;
    }

    .wu-nav-list > .menu-item-has-children > a::after {
        display: none;
    }

    .wu-sub-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -10px;
        background: none;
        border: 0;
        border-radius: 50%;
        color: var(--wu-text-secondary);
        cursor: pointer;
    }

    .wu-sub-toggle::before {
        content: '';
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform var(--wu-transition);
    }

    .wu-sub-toggle[aria-expanded="true"]::before {
        transform: translateY(2px) rotate(-135deg);
    }

    /* Without JS every section's links stay open */
    .wu-nav-list .sub-menu {
        position: static;
        flex-basis: 100%;
        min-width: 0;
        padding: 0 0 10px;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: none;
    }

    .wu-nav-list .sub-menu::before {
        display: none;
    }

    .wu-nav-js .menu-item-has-children:not(.is-open) > .sub-menu {
        display: none;
    }

    .wu-nav-list .sub-menu a {
        padding: 10px 16px;
        font-size: 15px;
        color: var(--wu-text-secondary);
    }

    .wu-nav-extra {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 0 20px;
    }

    .wu-nav-extra .wu-social-links {
        gap: 6px;
    }

    .wu-nav-extra .wu-social-links a {
        width: 36px;
        height: 36px;
        font-size: 15px;
        background: var(--wu-bg-alt);
    }

    .wu-trending-items {
        overflow-x: auto;
    }

    .wu-article-title {
        font-size: 30px;
    }

    .wu-post-grid,
    .wu-post-grid--3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .wu-logo .wu-lockup-mark svg {
        height: 28px;
    }

    .wu-logo .wu-lockup-name {
        font-size: 20px;
    }

    .wu-hero-body {
        padding: 16px;
    }

    .wu-hero-title {
        font-size: 20px;
    }

    .wu-card-body {
        padding: 14px 16px 16px;
    }

    .wu-article-title {
        font-size: 26px;
    }
}

/* ==========================================================================
   Footer — Mega Footer
   ========================================================================== */

.wu-footer {
    background: #1e1e1e;
    color: #ccc;
    margin-top: 0;
    padding: 0;
}

/* ---------- Live Dot Animation ---------- */
@keyframes wu-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}

@keyframes wu-ping {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0; }
}

@keyframes wu-stat-flash {
    0% { background: rgba(0, 166, 81, 0.15); }
    100% { background: transparent; }
}

.wu-stat-updated {
    animation: wu-stat-flash 1.5s ease-out;
}

.wu-stat-updated .wu-footer-stat-num {
    color: var(--wu-green);
    transition: color 1.5s ease-out;
}

.wu-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--wu-green);
    border-radius: 50%;
    position: relative;
    animation: wu-pulse 2s ease-in-out infinite;
}

.wu-live-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--wu-green);
    animation: wu-ping 2s ease-out infinite;
}

.wu-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--wu-green);
}

/* ---------- Footer Nav Bar ---------- */
.wu-footer-nav-bar {
    padding: 44px 0 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Brand, link columns and stats card share one row when they fit. The
   columns never shrink below their text, so if the row is too tight (larger
   text, wider fonts, more links) the stats card moves to its own row below
   instead of the columns running over it. */
.wu-footer-nav-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
}

/* Takes the row's spare space, so the stats card stays at its own width
   beside it but fills the row when it wraps below */
.wu-footer-nav-columns {
    display: flex;
    gap: clamp(24px, 2.8vw, 48px);
    flex: 999 1 auto;
}

.wu-footer-col-heading {
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
    padding: 0;
    letter-spacing: -0.2px;
}

.wu-footer-col-heading a {
    color: inherit;
    transition: color var(--wu-transition);
}

/* Gavel, scales or newspaper before the column name */
.wu-footer-col-icon {
    font-size: 12px;
    color: #ff6b7f;
    margin-right: 8px;
    opacity: 0.85;
}

.wu-footer-col-heading a:hover {
    color: var(--wu-red);
}

.wu-footer-col-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wu-footer-col-list > li > a {
    display: block;
    white-space: nowrap;
    padding: 3px 0;
    font-size: 14px;
    color: #aaa;
    transition: color var(--wu-transition);
}

.wu-footer-col-list > li > a:hover {
    color: #fff;
}

/* Phones only (see the 768px rules) */
.wu-footer-col-toggle,
.wu-footer-col-all {
    display: none;
}

/* "+7 more" links to the court type's page */
.wu-footer-col-list > li.wu-footer-col-more > a {
    color: #ff6b7f;
}

.wu-footer-col-list > li.wu-footer-col-more > a:hover {
    color: #fff;
}

.wu-footer-col-more i {
    font-size: 11px;
    margin-left: 2px;
}

/* ---------- Footer Stats ---------- */
/* Stretches to the link columns' height so the box starts and ends level with them */
/* "By the numbers" card: a fixed width so long numbers never push it past
   the edge, stretched to the link columns' height */
.wu-footer-stats-wrap {
    position: relative;
    flex: 1 1 340px;
    min-width: 290px;
    container-type: inline-size;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.015);
}

/* A short red streak that runs round the card's border. The ring is a
   rotating conic gradient masked down to the 1px border. */
@property --wu-border-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.wu-footer-stats-wrap::before {
    content: '';
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--wu-border-angle), transparent 0 72%, rgba(200, 16, 46, 0.4) 84%, var(--wu-red-on-dark) 94%, #fff 96%, transparent 97%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: wu-border-spin 14s linear infinite;
    pointer-events: none;
}

@keyframes wu-border-spin {
    to {
        --wu-border-angle: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wu-footer-stats-wrap::before {
        display: none;
    }
}

.wu-footer-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wu-footer-stats-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.wu-footer-stats {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 0;
}

.wu-footer-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}

/* Keeps link hover backgrounds inside the card's rounded corners */
.wu-footer-stat:nth-last-child(2):nth-child(odd) {
    border-bottom-left-radius: 10px;
}

.wu-footer-stat:last-child {
    border-bottom-right-radius: 10px;
}

/* Large faded icon cropped at the cell's corner. Its own clipped layer, so
   the change badge's tooltip isn't clipped with it. */
.wu-footer-stat-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.wu-footer-stat-icon {
    position: absolute;
    right: -6px;
    bottom: -10px;
    font-size: 54px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.04);
}

/* The number and label sit above the icon */
.wu-footer-stat-num,
.wu-footer-stat-label {
    position: relative;
}

.wu-footer-stat--link {
    text-decoration: none;
    transition: background var(--wu-transition);
}

.wu-footer-stat--link:hover {
    background: rgba(255, 255, 255, 0.04);
}

.wu-footer-stat--link:hover .wu-footer-stat-label {
    color: #bbb;
}

.wu-footer-stat:nth-child(2n) {
    border-right: none;
}

.wu-footer-stat:nth-last-child(-n+2) {
    border-bottom: none;
}

/* A long change badge drops below the number rather than widening the card */
.wu-footer-stat-num {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 21px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.wu-footer-stat-label {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.wu-footer-stat-change {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    padding: 1px 6px;
    border-radius: 3px;
    vertical-align: middle;
    position: relative;
    cursor: default;
}

.wu-footer-stat-change i {
    font-size: 8px;
}

.wu-footer-stat-change--up {
    color: var(--wu-green);
    background: rgba(0, 166, 81, 0.12);
}

.wu-footer-stat-change::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #444;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 10;
}

.wu-footer-stat-change:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ---------- Newsletter Signup ---------- */
.wu-footer-newsletter {
    padding: 28px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wu-footer-newsletter-plugin {
    color: #ccc;
}

/* Signup card: intro on the left, the numbered steps on the right */
.wu-footer-newsletter-inner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 64px;
    padding: 40px 44px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
}

/* Large faded paper plane cropped at the card's bottom left, behind the intro */
.wu-footer-newsletter-bg {
    position: absolute;
    left: -40px;
    bottom: -70px;
    font-size: 280px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.035);
    transform: rotate(-14deg);
    pointer-events: none;
}

.wu-footer-newsletter-text,
.wu-footer-newsletter-signup {
    position: relative;
}

.wu-footer-newsletter-text {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #ccc;
}

.wu-footer-newsletter-text strong {
    display: block;
    font-family: var(--wu-font-heading);
    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff;
}

.wu-footer-newsletter-desc {
    display: block;
    font-size: 16px;
    line-height: 1.5;
    color: #bbb;
}

/* Live recap of the visitor's picks, kept up to date by navigation.js */
.wu-newsletter-summary {
    margin-top: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.wu-newsletter-summary[hidden] {
    display: none;
}

.wu-newsletter-summary-label {
    margin: 0;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a8a8a8;
}

.wu-newsletter-summary-list {
    margin: 0;
    padding: 4px 18px;
}

.wu-newsletter-summary-list > div {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    padding: 9px 0;
    font-size: 15px;
    line-height: 1.45;
}

.wu-newsletter-summary-list > div + div {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.wu-newsletter-summary-list dt {
    color: #a8a8a8;
}

.wu-newsletter-summary-list dd {
    margin: 0;
    color: #fff;
    overflow-wrap: anywhere;
}

.wu-newsletter-summary-list dd.is-empty {
    color: #8f8f8f;
}

.wu-newsletter-summary-recent {
    margin: 0;
    padding: 13px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    font-size: 14px;
    line-height: 1.5;
    color: #ccc;
}

.wu-newsletter-summary-recent a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wu-footer-newsletter-signup {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wu-footer-newsletter-message {
    margin: 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

.wu-footer-newsletter-message.is-success {
    color: var(--wu-green);
}

.wu-footer-newsletter-message.is-error {
    color: #ff6b7f;
}

/* Hidden field that only bots fill in */
.wu-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.wu-footer-newsletter-note {
    margin: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: #a8a8a8;
}

.wu-footer-newsletter-note i {
    margin-right: 6px;
    font-size: 12px;
    color: var(--wu-green);
}

.wu-footer-newsletter-note a {
    color: #ddd;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wu-footer-newsletter-note a:hover {
    color: #fff;
}

.wu-footer-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Each numbered step: topics, how often, email */
.wu-newsletter-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.wu-newsletter-step-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

/* A <legend> ignores the fieldset's gap, so labels carry the spacing */
.wu-newsletter-step--email .wu-newsletter-step-label {
    margin-bottom: 0;
}

.wu-newsletter-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    font-size: 13px;
}

/* Areas and Topics inside step 1. "All" is ticked until something more specific is */
.wu-newsletter-group {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.wu-newsletter-group + .wu-newsletter-group {
    margin-top: 6px;
}

.wu-newsletter-group-label {
    padding: 0;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #bbb;
}

/* Area and topic chips: "+" when off, a tick and red outline when on */
.wu-newsletter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wu-newsletter-chip,
.wu-newsletter-freq-option {
    position: relative;
    cursor: pointer;
}

.wu-newsletter-chip input,
.wu-newsletter-freq-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.wu-newsletter-chip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    color: #ddd;
    transition: border-color var(--wu-transition), background var(--wu-transition), color var(--wu-transition);
}

.wu-newsletter-chip span::before {
    content: '\f067';
    width: 14px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    text-align: center;
}

.wu-newsletter-chip:hover span {
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

.wu-newsletter-chip input:checked + span {
    background: rgba(239, 59, 79, 0.16);
    border-color: var(--wu-red-on-dark);
    color: #fff;
}

.wu-newsletter-chip input:checked + span::before {
    content: '\f00c';
}

/* How often: two cards with a radio dot and a one-line description */
.wu-newsletter-freq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wu-newsletter-freq-option > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    box-sizing: border-box;
    padding: 14px 16px 14px 48px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    position: relative;
    transition: border-color var(--wu-transition), background var(--wu-transition);
}

.wu-newsletter-freq-option > span::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    margin-top: -10px;
    border: 2px solid #777;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    transition: border var(--wu-transition);
}

.wu-newsletter-freq-option strong {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.wu-newsletter-freq-option small {
    font-size: 14px;
    color: #bbb;
}

.wu-newsletter-freq-option:hover > span {
    border-color: rgba(255, 255, 255, 0.4);
}

.wu-newsletter-freq-option input:checked + span {
    border-color: var(--wu-red-on-dark);
    box-shadow: inset 0 0 0 1px var(--wu-red-on-dark);
    background: rgba(239, 59, 79, 0.1);
}

.wu-newsletter-freq-option input:checked + span::before {
    border: 6px solid var(--wu-red-on-dark);
}

.wu-newsletter-chip input:focus-visible + span,
.wu-newsletter-freq-option input:focus-visible + span {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.wu-footer-newsletter-form input[type="email"] {
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    padding: 0 16px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    font-family: var(--wu-font);
    font-size: 16px;
    color: #fff;
    outline: none;
    transition: border-color var(--wu-transition), box-shadow var(--wu-transition);
}

.wu-footer-newsletter-form input[type="email"]::placeholder {
    color: #8f8f8f;
}

.wu-footer-newsletter-form input[type="email"]:focus {
    border-color: var(--wu-red-on-dark);
    box-shadow: 0 0 0 3px rgba(239, 59, 79, 0.25);
}

.wu-btn--subscribe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 56px;
    padding: 12px 20px;
    background: var(--wu-red);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--wu-font);
    font-size: 17px;
    font-weight: 700;
    transition: background var(--wu-transition);
}

.wu-btn--subscribe:hover {
    background: var(--wu-red-dark);
}

.wu-btn--subscribe:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.wu-btn--subscribe:disabled {
    cursor: wait;
}

/* Locked once the visitor is on the list: just the email box and a green button */
.wu-footer-newsletter-form.is-done .wu-newsletter-prefs,
.wu-footer-newsletter-form.is-done .wu-newsletter-step-label {
    display: none;
}

.wu-footer-newsletter-form.is-done input[type="email"] {
    opacity: 0.6;
    cursor: not-allowed;
}

.wu-footer-newsletter-form.is-done .wu-btn--subscribe {
    background: var(--wu-green);
    cursor: default;
}

/* Phones and upright tablets (up to 900px, where the form is one column): one
   page at a time, with Back, "Step 2 of 4" and Next. navigation.js adds
   .is-stepped (and .is-last-step, when the recap shows) to the box */
.wu-newsletter-progress,
.wu-newsletter-next {
    display: none;
}

.is-stepped .wu-newsletter-progress {
    display: block;
}

.is-stepped .wu-newsletter-step:not(.is-current),
.is-stepped .wu-newsletter-group.is-off-step,
.is-stepped:not(.is-last-step) .wu-newsletter-summary,
.is-stepped .wu-newsletter-step-num,
.is-stepped .wu-newsletter-summary-list > div:has([data-wu-summary-for="email"]) {
    display: none;
}

/* Areas and Topics are pages of their own, so the gap between them goes */
.is-stepped .wu-newsletter-group + .wu-newsletter-group {
    margin-top: 0;
}

.is-stepped .wu-newsletter-step:focus,
.is-stepped .wu-newsletter-group:focus {
    outline: none;
}

.wu-newsletter-progress-row {
    display: flex;
    align-items: center;
    min-height: 32px;
    margin-bottom: 10px;
}

.wu-newsletter-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--wu-font);
    font-size: 15px;
    font-weight: 600;
    color: #ddd;
    cursor: pointer;
}

.wu-newsletter-back[hidden] {
    display: none;
}

.wu-newsletter-back:hover {
    color: #fff;
}

.wu-newsletter-back:focus-visible,
.wu-newsletter-next:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.wu-newsletter-progress-text {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: #a8a8a8;
}

.wu-newsletter-progress-bar {
    display: flex;
    gap: 4px;
}

.wu-newsletter-progress-bar span {
    flex: 1 1 0;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
    transition: background var(--wu-transition);
}

.wu-newsletter-progress-bar span.is-done {
    background: var(--wu-red-on-dark);
}

.is-stepped .wu-newsletter-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin-top: 10px;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    font-family: var(--wu-font);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: border-color var(--wu-transition), background var(--wu-transition);
}

.is-stepped .wu-newsletter-next:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Newsletter pop-up, opened from the header: the signup card above, moved in
   while it's open (navigation.js). The body scrolls; the close button stays put */
.wu-newsletter-dialog {
    width: min(1120px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto; /* centres it; the reset at the top of this file removes the browser's own */
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: #1e1e1e;
    color: #ccc;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.wu-newsletter-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: wu-pref-in 0.2s ease-out;
}

.wu-newsletter-dialog::backdrop {
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(2px);
}

.wu-newsletter-dialog-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wu-newsletter-dialog .wu-footer-newsletter-inner {
    border: 0;
    border-radius: 0;
}

.wu-newsletter-dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ddd;
    font-size: 17px;
    cursor: pointer;
    transition: background var(--wu-transition), color var(--wu-transition);
}

.wu-newsletter-dialog-close:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* The page behind doesn't scroll while it's open */
html.wu-modal-open {
    overflow: hidden;
}

/* Phones: fills the screen */
@media (max-width: 600px) {
    .wu-newsletter-dialog {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
}

/* ---------- Footer Stories ---------- */
.wu-footer-stories {
    padding: 28px 0 32px;
}

.wu-footer-stories-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wu-footer-stories-title {
    font-family: var(--wu-font-heading);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}


.wu-footer-stories-inner {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
    align-items: stretch;
}

.wu-footer-stories-inner--full {
    grid-template-columns: 1fr;
}

.wu-footer-featured {
    height: 100%;
}

/* Featured story */
.wu-footer-featured-link {
    display: block;
    position: relative;
    border-radius: var(--wu-radius);
    overflow: hidden;
    height: 100%;
    min-height: 420px;
}

.wu-footer-featured-thumb {
    position: absolute;
    inset: 0;
}

/* Blurred copy of the image fills the space around the uncropped photo */
.wu-footer-featured-thumb::before,
.wu-footer-post-thumb::before {
    content: "";
    position: absolute;
    inset: -10%;
    background: var(--wu-thumb-bg) center / cover no-repeat;
    filter: blur(24px) brightness(0.55);
}

.wu-footer-featured-thumb img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

/* Photos close to the box's shape fill it (set by footer-images.js).
   Trim more from the bottom so faces and heads stay in view. */
.wu-footer-featured-thumb img.wu-img-cover,
.wu-footer-post-thumb img.wu-img-cover {
    object-fit: cover;
    object-position: center 25%;
}

.wu-footer-featured-link:hover .wu-footer-featured-thumb img {
    transform: scale(1.03);
}

.wu-footer-featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, transparent 60%),
                linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 25%);
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.wu-footer-featured-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--wu-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 999px;
}

.wu-footer-featured-badge i {
    font-size: 9px;
}

.wu-footer-post-meta.wu-footer-featured-meta {
    margin-top: auto;
    margin-bottom: 10px;
}

/* Label sits on a photo, so it needs a shadow to stay readable */
.wu-footer-featured-meta .wu-footer-post-cat {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.wu-footer-featured-meta .wu-footer-post-date {
    color: rgba(255,255,255,0.8);
}

.wu-footer-featured-meta .wu-footer-post-date::before {
    color: rgba(255,255,255,0.5);
}

.wu-footer-featured-title {
    font-family: var(--wu-font-heading);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin: 0;
}

/* Recent posts grid */
.wu-footer-recent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-content: start;
}

.wu-footer-post {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background var(--wu-transition);
    border-radius: 6px;
}

.wu-footer-post:hover {
    background: rgba(255,255,255,0.035);
}

/* No separator under the last row: the section border follows */
.wu-footer-post:last-child,
.wu-footer-post:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}

.wu-footer-post-thumb {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    background: #2a2a2a;
    overflow: hidden;
    flex-shrink: 0;
}

.wu-footer-post-thumb::before {
    filter: blur(6px) brightness(0.55);
}

.wu-footer-post-thumb img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.wu-footer-post:hover .wu-footer-post-thumb img {
    transform: scale(1.06);
}

.wu-footer-post-thumb--empty {
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 18px;
}

.wu-footer-post-body {
    flex: 1;
    min-width: 0;
}

/* "Cardiff Crown Court · 2 hours ago" */
.wu-footer-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    margin-bottom: 6px;
}

.wu-footer-post-cat {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: #ff6b7f;
    white-space: nowrap;
}

.wu-footer-post-date {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: #8a8a8a;
}

.wu-footer-post-cat + .wu-footer-post-date::before {
    content: '\00B7';
    margin: 0 7px;
    color: #555;
}

.wu-footer-post-title {
    font-size: 14px;
    font-weight: 600;
    color: #ddd;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--wu-transition);
}

.wu-footer-post:hover .wu-footer-post-title {
    color: #ff6b7f;
}

/* Pager: ‹ Page 2 › in the section header */
.wu-footer-stories-header {
    align-items: center;
}

.wu-footer-pager {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wu-footer-stories-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.wu-footer-stories-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #ff6b7f;
    white-space: nowrap;
    transition: color var(--wu-transition);
}

.wu-footer-stories-all i {
    font-size: 11px;
    transition: transform var(--wu-transition);
}

.wu-footer-stories-all:hover {
    color: #fff;
}

.wu-footer-stories-all:hover i {
    transform: translateX(2px);
}

.wu-footer-pager[hidden] {
    display: none;
}

.wu-footer-pager-latest {
    background: none;
    border: none;
    color: #ff6b7f;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 6px 0 0;
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity var(--wu-transition);
}

.wu-footer-pager-latest[hidden] {
    display: none;
}

.wu-footer-pager-latest:hover {
    opacity: 0.8;
}

.wu-footer-pager-label {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    min-width: 52px;
    text-align: center;
}

.wu-footer-pager-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: none;
    color: #ddd;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--wu-transition), color var(--wu-transition), opacity var(--wu-transition);
}

.wu-footer-pager-btn:hover:not(:disabled) {
    border-color: #ff6b7f;
    color: #ff6b7f;
}

.wu-footer-pager-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Slide between pages */
.wu-footer-recent-wrap {
    overflow: hidden;
}

.wu-footer-recent {
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.wu-footer-recent.is-out-left {
    transform: translateX(-40px);
    opacity: 0;
}

.wu-footer-recent.is-out-right {
    transform: translateX(40px);
    opacity: 0;
}

.wu-footer-recent.is-busy {
    opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
    .wu-footer-recent {
        transition: none;
    }
}

/* ---------- Footer Bottom Bar ---------- */
.wu-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 18px 0;
}

.wu-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wu-footer-bottom-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.wu-footer-bottom-left p {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.wu-footer-prefs {
    display: flex;
    align-items: center;
    gap: 4px 16px;
    flex-wrap: wrap;
}

.wu-footer-pref-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    color: #999;
    cursor: pointer;
    transition: color var(--wu-transition);
}

.wu-footer-pref-btn i {
    font-size: 12px;
    color: #777;
    transition: color var(--wu-transition);
}

.wu-footer-pref-btn:hover,
.wu-footer-pref-btn:hover i {
    color: #fff;
}

.wu-footer-bottom-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.wu-footer-story-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #ff6b7f;
    transition: color var(--wu-transition);
}

.wu-footer-story-link:hover {
    color: #fff;
}

.wu-footer-legal-nav {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 0;
    margin: 0;
}

.wu-footer-legal-nav a,
.wu-footer-legal-nav li a {
    font-size: 13px;
    color: #999;
    transition: color var(--wu-transition);
}

.wu-footer-legal-nav a:hover,
.wu-footer-legal-nav li a:hover {
    color: #fff;
}

.wu-footer-legal-nav li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wu-footer-legal-nav li + li::before {
    content: '\00B7';
    color: #555;
}

.wu-footer-legal-sep {
    color: #555;
}

.wu-footer-social {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wu-footer-social-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8a8a8a;
}

.wu-footer-social-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* 40px round buttons that take on each network's colour on hover */
.wu-footer-social a {
    --wu-brand: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #bbb;
    font-size: 16px;
    transition: background var(--wu-transition), border-color var(--wu-transition), color var(--wu-transition), transform var(--wu-transition);
}

.wu-footer-social a:hover,
.wu-footer-social a:focus-visible {
    background: var(--wu-brand);
    border-color: var(--wu-brand);
    color: #fff;
    transform: translateY(-2px);
}

.wu-footer-social .wu-social--facebook  { --wu-brand: #1877f2; }
.wu-footer-social .wu-social--x         { --wu-brand: #000; }
.wu-footer-social .wu-social--tiktok    { --wu-brand: #000; }
.wu-footer-social .wu-social--youtube   { --wu-brand: #ff0033; }
.wu-footer-social .wu-social--instagram { --wu-brand: #d62976; }
.wu-footer-social .wu-social--whatsapp  { --wu-brand: #25d366; }
.wu-footer-social .wu-social--bluesky   { --wu-brand: #1185fe; }
.wu-footer-social .wu-social--rss       { --wu-brand: #f26522; }

.wu-footer-social .wu-social--x:hover,
.wu-footer-social .wu-social--tiktok:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.wu-footer-social .wu-social--instagram:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.wu-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: var(--wu-red);
    color: #fff;
    border-radius: 22px;
    font-size: 16px;
    padding: 0 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.2s ease, gap 0.25s ease, padding 0.25s ease;
    text-decoration: none;
}

.wu-back-to-top.wu-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.wu-back-to-top-label {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: max-width 0.25s ease, opacity 0.2s ease;
}

.wu-back-to-top:hover {
    background: var(--wu-red-dark);
    gap: 8px;
    padding: 0 20px 0 14px;
}

.wu-back-to-top:hover .wu-back-to-top-label {
    max-width: 160px;
    opacity: 1;
}

/* ---------- Footer Responsive ---------- */

/* A stats card wide enough (on its own row) shows its figures in one row,
   rather than a stretched 2x2 box */
@container (min-width: 640px) {
    .wu-footer-stats {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }

    .wu-footer-stat:nth-child(n) {
        border-right: 1px solid rgba(255, 255, 255, 0.06);
        border-bottom: none;
    }

    .wu-footer-stat:nth-child(n):last-child {
        border-right: none;
    }

    .wu-footer-stat:nth-child(n):not(:first-child) {
        border-bottom-left-radius: 0;
    }

    .wu-footer-stat:first-child {
        border-bottom-left-radius: 10px;
    }
}

/* The brand on its own row (tablets, when the link columns sit under it):
   logo, blurb and social icons centred above them */
@container wu-brand (min-width: 560px) {
    .wu-footer-logo,
    .wu-footer-social {
        align-self: center;
    }

    .wu-footer-desc {
        align-self: center;
        text-align: center;
    }

    .wu-footer-social {
        align-items: center;
    }

    .wu-footer-social-icons {
        justify-content: center;
    }
}

/* Small laptops and tablets: the stats card always spans its own row */
@media (min-width: 769px) and (max-width: 1200px) {
    /* The three link columns stay together beside the brand, spread out
       with the last one level with the stats card's right edge. If they
       don't fit there (larger or wider text), all three move to their own
       row under the brand rather than leaving one stranded below it. */
    .wu-footer-nav-inner {
        column-gap: clamp(32px, 5vw, 60px);
    }

    .wu-footer-nav-columns {
        justify-content: space-between;
    }

    /* The brand keeps a set width beside the columns, but fills the row
       when the columns have moved under it, and its contents then centre
       (the container query below) */
    .wu-footer-brand {
        flex: 1 0 330px;
        container: wu-brand / inline-size;
    }

    .wu-footer-stats-wrap {
        flex: 1 1 100%;
        min-width: 0;
    }
}

@media (max-width: 1024px) {
    .wu-footer-stories-inner {
        grid-template-columns: 280px 1fr;
    }

    .wu-footer-nav-columns {
        gap: 32px;
    }

    .wu-footer-newsletter-inner {
        gap: 40px;
    }

    .wu-footer-newsletter-text {
        flex-basis: 280px;
    }
}

@media (max-width: 900px) {
    .wu-footer-nav-bar {
        padding-top: 36px;
    }

    .wu-footer-stories-inner {
        grid-template-columns: 1fr;
    }

    .wu-footer-featured-link {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .wu-footer-newsletter-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
        padding: 28px 24px;
    }

    .wu-footer-newsletter-text {
        flex-basis: auto;
    }

    /* Plane moves to the top right, clear of the form below the intro */
    .wu-footer-newsletter-bg {
        left: auto;
        right: -30px;
        top: -30px;
        bottom: auto;
        font-size: 170px;
    }
}

@media (max-width: 768px) {
    .wu-footer-nav-inner {
        flex-direction: column;
    }

    .wu-footer-stats-wrap {
        flex-basis: auto;
        min-width: 100%;
    }

    .wu-footer-nav-columns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 20px;
    }

    /* Each column collapses behind its heading once navigation.js runs */
    .wu-footer-nav-columns.wu-footer-accordion {
        display: block;
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .wu-footer-accordion .wu-footer-nav-col--toggle {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .wu-footer-accordion .wu-footer-nav-col--toggle .wu-footer-col-heading {
        margin: 0;
    }

    .wu-footer-accordion .wu-footer-nav-col--toggle .wu-footer-col-heading > a,
    .wu-footer-accordion .wu-footer-nav-col--toggle .wu-footer-col-heading > span {
        display: none;
    }

    .wu-footer-accordion .wu-footer-col-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 15px 0;
        background: none;
        border: 0;
        color: #fff;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .wu-footer-accordion .wu-footer-col-toggle > i {
        font-size: 12px;
        color: #777;
        transition: transform var(--wu-transition);
    }

    .wu-footer-accordion .is-open .wu-footer-col-toggle > i {
        transform: rotate(180deg);
    }

    .wu-footer-accordion .wu-footer-nav-col--toggle .wu-footer-col-list {
        display: none;
        padding-bottom: 10px;
    }

    .wu-footer-accordion .wu-footer-nav-col--toggle.is-open .wu-footer-col-list {
        display: block;
    }

    .wu-footer-accordion .wu-footer-col-list > li > a {
        padding: 8px 0;
    }

    .wu-footer-accordion .wu-footer-col-all {
        display: list-item;
    }

    .wu-footer-accordion .wu-footer-col-all a {
        color: #ff6b7f;
    }

    .wu-footer-recent {
        grid-template-columns: 1fr;
    }

    .wu-footer-post:nth-last-child(2):nth-child(odd) {
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }

    .wu-footer-bottom-inner {
        flex-direction: column;
        gap: 8px;
        align-items: center;
        text-align: center;
    }

    .wu-footer-bottom-left {
        flex-direction: column;
        gap: 6px;
    }

    .wu-footer-bottom-left p {
        margin-bottom: 2px;
    }

    .wu-footer-legal-nav {
        justify-content: center;
    }

    .wu-footer-bottom-right {
        justify-content: center;
    }

    .wu-back-to-top {
        bottom: 16px;
        right: 16px;
        height: 40px;
        font-size: 14px;
        padding: 0 13px;
    }

    .wu-back-to-top-label {
        font-size: 11px;
    }

    .wu-footer-stat-change::after {
        display: none;
    }

    /* Logo, blurb and social icons centred above the link accordion */
    .wu-footer-brand {
        align-items: center;
        text-align: center;
    }

    .wu-footer-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .wu-footer-brand .wu-footer-social {
        align-items: center;
        margin-bottom: 24px;
    }

    .wu-footer-social-icons {
        justify-content: center;
    }

    .wu-footer-prefs {
        justify-content: center;
    }

    .wu-footer-stories-actions {
        gap: 12px;
    }

    .wu-footer-newsletter-text strong {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .wu-footer-logo .wu-lockup-tagline {
        white-space: normal;
    }

    .wu-footer-stats {
        grid-template-columns: 1fr 1fr;
    }

    .wu-footer-stat {
        padding: 12px 14px;
    }

    .wu-footer-newsletter-inner {
        padding: 24px 18px;
    }

    /* Chips sized to their words, so more fit on a line */
    .wu-newsletter-chip span {
        gap: 6px;
        min-height: 42px;
        padding: 0 14px 0 11px;
        font-size: 14px;
    }

    .wu-newsletter-freq {
        grid-template-columns: 1fr;
    }

    .wu-btn--subscribe {
        font-size: 16px;
    }
}
/* ==========================================================================
   Cookie settings and Accessibility pop-ups (inc/site-preferences.php)
   ========================================================================== */

.wu-pref-dialog {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    margin: auto; /* centres it; the reset at the top of this file removes the browser's own */
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: var(--wu-bg);
    color: var(--wu-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.wu-pref-dialog::backdrop {
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(2px);
}

.wu-pref-dialog[open] {
    animation: wu-pref-in 0.2s ease-out;
}

@keyframes wu-pref-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.wu-pref-inner {
    padding: 22px 24px 20px;
}

.wu-pref-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.wu-pref-head h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--wu-font-heading);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.wu-pref-head h2 i {
    color: var(--wu-red);
    font-size: 19px;
}

.wu-pref-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--wu-bg-alt);
    color: var(--wu-text-secondary);
    font-size: 16px;
    cursor: pointer;
    transition: background var(--wu-transition), color var(--wu-transition);
}

.wu-pref-close:hover {
    background: var(--wu-border);
    color: var(--wu-text);
}

.wu-pref-intro {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--wu-text-secondary);
}

.wu-pref-intro a {
    color: var(--wu-red);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wu-pref-rows {
    border-top: 1px solid var(--wu-border-light);
}

.wu-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid var(--wu-border-light);
    cursor: pointer;
}

div.wu-pref-row {
    cursor: default;
}

.wu-pref-row-text strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.wu-pref-row-text span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--wu-text-secondary);
}

.wu-pref-always {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--wu-green);
    white-space: nowrap;
}

/* On/off switch */
.wu-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 26px;
    margin: 0;
    border-radius: 999px;
    background: #cfcfcf;
    cursor: pointer;
    transition: background var(--wu-transition);
}

.wu-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform var(--wu-transition);
}

.wu-switch:checked {
    background: var(--wu-red);
}

.wu-switch:checked::after {
    transform: translateX(18px);
}

.wu-switch:focus-visible,
.wu-pref-sizes input:focus-visible + span {
    outline: 2px solid var(--wu-text);
    outline-offset: 2px;
}

/* A / A / A text size picker */
.wu-pref-sizes {
    display: inline-flex;
    flex-shrink: 0;
    border: 1px solid var(--wu-border);
    border-radius: 8px;
    overflow: hidden;
}

.wu-pref-sizes label {
    position: relative;
    cursor: pointer;
}

.wu-pref-sizes input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.wu-pref-sizes label > span[aria-hidden] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    font-weight: 700;
    color: var(--wu-text-secondary);
    transition: background var(--wu-transition), color var(--wu-transition);
}

.wu-pref-sizes label + label > span[aria-hidden] {
    border-left: 1px solid var(--wu-border);
}

.wu-pref-sizes input:checked + span {
    background: var(--wu-red);
    color: #fff;
}

.wu-pref-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.wu-pref-link {
    margin-right: auto;
    font-size: 13px;
    color: var(--wu-text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wu-pref-link:hover {
    color: var(--wu-red);
}

.wu-pref-btn {
    padding: 9px 16px;
    border: 1px solid var(--wu-border);
    border-radius: var(--wu-radius);
    background: var(--wu-bg);
    color: var(--wu-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--wu-transition), background var(--wu-transition), color var(--wu-transition);
}

.wu-pref-btn:hover {
    border-color: var(--wu-text);
}

.wu-pref-btn--primary {
    background: var(--wu-red);
    border-color: var(--wu-red);
    color: #fff;
}

.wu-pref-btn--primary:hover {
    background: var(--wu-red-dark);
    border-color: var(--wu-red-dark);
}

/* First-visit cookie banner (only when turned on in the Customiser) */
.wu-cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    max-width: 960px;
    margin: 0 auto;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: #1e1e1e;
    color: #ddd;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.wu-cookie-banner[hidden] {
    display: none;
}

.wu-cookie-banner p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.wu-cookie-banner p a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wu-cookie-banner-actions {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

.wu-cookie-banner .wu-pref-btn:not(.wu-pref-btn--primary) {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.wu-cookie-banner .wu-pref-btn:not(.wu-pref-btn--primary):hover {
    border-color: #fff;
}

@media (max-width: 768px) {
    .wu-pref-inner {
        padding: 18px 18px 16px;
    }

    .wu-pref-actions .wu-pref-btn {
        flex: 1;
    }

    .wu-pref-link {
        flex-basis: 100%;
        text-align: center;
    }

    .wu-cookie-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .wu-cookie-banner-actions .wu-pref-btn {
        flex: 1;
        padding: 9px 10px;
    }
}

/* ==========================================================================
   Accessibility choices (classes set on <html> by site-preferences.js)
   ========================================================================== */

/* Text size: article and page text */
html[data-wu-text="lg"] .wu-article-content,
html[data-wu-text="lg"] .wu-page-content {
    font-size: 21px;
}

html[data-wu-text="lg"] .wu-article-content h2,
html[data-wu-text="lg"] .wu-page-content h2 {
    font-size: 30px;
}

html[data-wu-text="lg"] .wu-article-content h3,
html[data-wu-text="lg"] .wu-page-content h3 {
    font-size: 25px;
}

html[data-wu-text="xl"] .wu-article-content,
html[data-wu-text="xl"] .wu-page-content {
    font-size: 24px;
}

html[data-wu-text="xl"] .wu-article-content h2,
html[data-wu-text="xl"] .wu-page-content h2 {
    font-size: 33px;
}

html[data-wu-text="xl"] .wu-article-content h3,
html[data-wu-text="xl"] .wu-page-content h3 {
    font-size: 28px;
}

/* High contrast: darker greys on light pages, near-white greys in the footer */
html.wu-a11y-contrast {
    --wu-text-secondary: #2b2b2b;
    --wu-text-tertiary: #444;
    --wu-border: #8c8c8c;
}

html.wu-a11y-contrast .wu-footer-desc,
html.wu-a11y-contrast .wu-footer-col-list > li > a,
html.wu-a11y-contrast .wu-footer-stats-title,
html.wu-a11y-contrast .wu-footer-stat-label,
html.wu-a11y-contrast .wu-footer-post-date,
html.wu-a11y-contrast .wu-footer-pager-label,
html.wu-a11y-contrast .wu-footer-newsletter-desc,
html.wu-a11y-contrast .wu-footer-newsletter-note,
html.wu-a11y-contrast .wu-footer-newsletter-note a,
html.wu-a11y-contrast .wu-newsletter-summary-label,
html.wu-a11y-contrast .wu-newsletter-summary-list dt,
html.wu-a11y-contrast .wu-newsletter-summary-list dd.is-empty,
html.wu-a11y-contrast .wu-newsletter-summary-recent,
html.wu-a11y-contrast .wu-newsletter-group-label,
html.wu-a11y-contrast .wu-newsletter-chip span,
html.wu-a11y-contrast .wu-newsletter-freq-option small,
html.wu-a11y-contrast .wu-footer-social-label,
html.wu-a11y-contrast .wu-footer-social a,
html.wu-a11y-contrast .wu-footer-bottom-left p,
html.wu-a11y-contrast .wu-footer-legal-nav a,
html.wu-a11y-contrast .wu-footer-pref-btn,
html.wu-a11y-contrast .wu-footer-pref-btn i {
    color: #f2f2f2;
}

html.wu-a11y-contrast .wu-footer-newsletter-form input[type="email"]::placeholder {
    color: #bbb;
}

html.wu-a11y-contrast .wu-footer-social a,
html.wu-a11y-contrast .wu-newsletter-chip span,
html.wu-a11y-contrast .wu-newsletter-freq-option > span {
    border-color: rgba(255, 255, 255, 0.45);
}

html.wu-a11y-contrast .wu-newsletter-chip input:checked + span,
html.wu-a11y-contrast .wu-newsletter-freq-option input:checked + span {
    border-color: var(--wu-red-on-dark);
}

/* Underline links (not icon buttons or the logo) */
html.wu-a11y-underline a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

html.wu-a11y-underline .wu-footer-social a,
html.wu-a11y-underline .wu-back-to-top,
html.wu-a11y-underline .wu-skip-link,
html.wu-a11y-underline .wu-logo a,
html.wu-a11y-underline .wu-footer-logo,
html.wu-a11y-underline .wu-social-links a,
html.wu-a11y-underline .wu-header-cta,
html.wu-a11y-underline .wu-nav-home,
html.wu-a11y-underline .wu-card-link,
html.wu-a11y-underline .wu-hero-link,
html.wu-a11y-underline .wu-footer-post,
html.wu-a11y-underline .wu-footer-featured-link {
    text-decoration: none;
}

/* Whole-card links: just the headline */
html.wu-a11y-underline .wu-card-title,
html.wu-a11y-underline .wu-hero-title,
html.wu-a11y-underline .wu-footer-post-title,
html.wu-a11y-underline .wu-footer-featured-title {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Reduce motion */
html.wu-a11y-motion *,
html.wu-a11y-motion *::before,
html.wu-a11y-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}