/* ==========================================================================
   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 {
    background: var(--wu-bg);
    border-bottom: 3px solid var(--wu-red);
}

/* -- 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: 6px 0;
}

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

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

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

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

.wu-social-links a {
    color: var(--wu-text-secondary);
    transition: color var(--wu-transition);
    display: flex;
    align-items: center;
}

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

/* -- 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;
    background: var(--wu-search-bg);
    border-radius: 24px;
    padding: 8px 16px;
    gap: 8px;
    border: 1px solid transparent;
    transition: border-color var(--wu-transition);
}

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

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

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

.wu-search-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--wu-text-secondary);
    cursor: pointer;
    padding: 4px;
}

.wu-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--wu-text);
    cursor: pointer;
    padding: 4px;
}

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

.wu-nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

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

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

.wu-nav-list > li > a:hover,
.wu-nav-list > li.current-menu-item > a,
.wu-nav-list > li.current_page_item > a {
    color: var(--wu-red);
    border-bottom-color: var(--wu-red);
}

/* Dropdown */
.wu-nav-list .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--wu-bg);
    border: 1px solid var(--wu-border);
    border-radius: var(--wu-radius);
    min-width: 200px;
    list-style: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.wu-nav-list li:hover > .sub-menu {
    display: block;
}

.wu-nav-list .sub-menu a {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--wu-text);
    transition: all var(--wu-transition);
}

.wu-nav-list .sub-menu a:hover {
    background: var(--wu-bg-alt);
    color: var(--wu-red);
}

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

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

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

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

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

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

    .wu-header-main {
        position: relative;
    }

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

    .wu-nav {
        display: none;
    }

    .wu-nav.wu-nav-open {
        display: block;
        border-top: 1px solid var(--wu-border);
    }

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

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

    .wu-nav-list .sub-menu {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        display: block;
        padding-left: 16px;
    }

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

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

    .wu-newsletter-chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wu-newsletter-chip span {
        width: 100%;
        box-sizing: border-box;
        border-radius: 12px;
        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-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;
}