/* ============================= */

/* Global + Desktop Styles */

/* ============================= */

.site-header {
    /* ✅ Clean spacing and stacking */
    overflow: visible;
    margin: 0;
    padding: 0;
    align-items: center;
    background-color: transparent;
    background: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: white;
    display: flex;
    height: 130px;
    justify-content: center;
    position: relative;
    z-index: 99999 !important;
}

.header-container {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 2rem;
}

.header-background {
    background-image: url("/wp-content/themes/merseysidedarts/assets/images/MerseysideHead-back.png");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;

    /* ✅ THIS is what gives it height to be visible! */
    padding-bottom: 500px;

    position: relative;
    width: 100%;
    z-index: 0;
}

.header-background::after {
    /* ✅ Bottom fade effect */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(11, 36, 113, 0) 0%, #0b2471 100%);
    z-index: 1;
}

/* ✅ Fix alt-page header positioning (all non-home pages) */
body.page:not(.home) .alt-page-header {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    text-align: center;

    max-width: 1200px;
    margin: 0 auto;
    min-height: 300px;
    padding: 4rem 2rem;

    position: relative;
    z-index: 5;

    /* Lift the page title a touch */
    margin-top: -40px;
}

/* Keep the overlay behind menus/content */
body.page:not(.home) .page-hero-overlay {
    position: relative;
    z-index: 0 !important;
}

/* ✅ Page hero layout used on alt pages */
.page-hero-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-hero-overlay {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1200px;
    width: 100%;
}

.page-hero-text {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.page-hero-title {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.5rem;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    padding: 1rem 2rem;
}

.page-hero-title::after {
    margin: 0.8rem auto 0;
    background-color: transparent;
    border-radius: 5px;
    border: 2px solid #ffd700;
    content: "";
    display: block;
    height: 5px;
    width: 60%;
}

.page-hero-subtitle {
    color: #f0f0f0;
    font-size: 1.3rem;
    font-weight: 400;
    margin-top: 0.5rem;
}

.site-title a {
    /* Cool shadow */
    color: white;
    text-decoration: none;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.site-logo {
    height: 150px;
}

.main-navigation .menu-item-has-children>a[href="#"] {
    cursor: default;
}

.split-nav {
    /* 🔄 prevent menu wrap */
    /* 🔄 was #2c3880 */
    position: absolute;
    align-items: center;
    background: transparent;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    left: 0;
    padding: 1rem 2rem;
    top: 0;
    width: 100%;
    z-index: 10;
}

.split-nav .nav-left a,
.split-nav .nav-right a {
    /* move up Menus slightly */
    align-items: center;
    display: flex;
    padding: 0.4rem 1rem;
    transform: translateY(-7px);
}

.nav-left,
.nav-right {
    display: flex;
    flex: 1;
    gap: 1.5rem;
    justify-content: center;
}

.site-title {
    flex-shrink: 0;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
}

.nav-menu {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu a:hover {
    text-decoration: underline;
}

.main-navigation .nav-menu {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation .nav-menu li a:hover {
    text-decoration: underline;
}

.main-navigation {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    position: relative;
    z-index: 9999;
}

/* ▼ Submenu base styling */

.main-navigation .nav-menu li {
    position: relative;
}

.main-navigation .nav-menu .sub-menu {
    /* 🔥 Super high to sit above hero */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    background-color: #0b2471;
    border-radius: 8px;
    border: 2px solid #ffd700;
    display: none;
    left: 0;
    min-width: 200px;
    padding: 0.5rem 0;
    position: absolute;
    top: 100%;
    z-index: 99999;
}

/* ▼ Show submenu on hover */

.main-navigation .nav-menu li:hover>.sub-menu {
    display: block;
}

/* ▼ Individual submenu items */

.main-navigation .nav-menu .sub-menu li {
    display: block;
}

.main-navigation .nav-menu .sub-menu a {
    /* ✅ Prevent layout shift on hover */
    border: 2px solid transparent;
    /* ✅ Smooth hover transitions */
    transition: background 0.2s ease, transform 0.2s ease, border 0.2s ease;
    box-sizing: border-box;
    color: white;
    display: block;
    font-weight: 500;
    padding: 0.4rem 0.5rem 0.1rem 0.5rem;
    text-decoration: none;
    white-space: nowrap;
}

.main-navigation .nav-menu .sub-menu a:hover {
    background-color: transparent;
    border-color: #ffd700;
    border: 2px solid #ffd700;
    color: #0b2471;
}

/* ▼ Flyout submenu (third level and beyond) */

.main-navigation .nav-menu .sub-menu .sub-menu {
    background-color: #0b2471;
    border-radius: 8px;
    border: 2px solid #ffd700;
    display: none;
    left: 100%;
    min-width: 200px;
    position: absolute;
    top: 0;
    z-index: 1000;
}

/* ▼ Show flyout submenu on hover */

.main-navigation .nav-menu .sub-menu li:hover>.sub-menu {
    display: block;
}

/* ▼ Flyout submenu (2nd-level inside dropdown) */

.main-navigation .nav-menu .sub-menu .sub-menu {
    background-color: #0b2471;
    border-radius: 8px;
    border: 2px solid #ffd700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: none;
    left: 100%;
    min-width: 200px;
    padding: 0.5rem 0;
    position: absolute;
    top: 0;
    z-index: 1000;
}

/* ▼ Show 2nd-level flyout submenu on hover */

.main-navigation .nav-menu .sub-menu li:hover>.sub-menu {
    display: block;
}

.page-banner {
  background-color: #002147; /* your dark Merseyside blue */
  padding: 4rem 1rem;
  text-align: center;
  color: white;
}

.page-banner-content h1 {
  font-size: 2rem;
  margin: 0;
}

.site-header {
    position: relative; /* allows absolute children to be placed relative to header */
}

.social-follow-bar {
    position: absolute;
    top: 15px;
    right: -250px;
    align-items: center;
    background-color: transparent;
    border-radius: 8px;
    border: 2px solid #ffd700;
    display: flex;
    font-weight: bold;
    gap: 10px;
    padding: 10px 15px;
    z-index: 10000;
}

.social-follow-bar:hover {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.social-follow-bar .follow-label {
    color: #ffd700;
    font-size: 1.1rem;
    font-weight: 700;
    margin-right: 0.5rem;
}

.social-follow-bar .social-icon {
    color: #ffd700;
    font-size: 1.2rem;
    text-decoration: none;
    transition: transform 0.2s ease, color 0.2s ease;
}

.social-follow-bar .social-icon:hover {
    color: white;
    transform: scale(1.15);
}

body {
    background-color: #0b2471;
    color: #111;
    font-family: "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

/* 🎯 Alt Page Banner Image (true fix) */

/* 🟦 Styled Header Text for Alt Pages */
body.page:not(.home) .page-hero-overlay {
    padding: 4rem 2rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0.5rem;
    display: inline-block;
}

body.page:not(.home) .page-hero-title {
    color: #fff;
    font-size: 3rem;
    font-weight: 800;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
}

body.page:not(.home) .page-hero-subtitle {
    color: #e0e0e0;
    font-size: 1.25rem;
    font-weight: 400;
    margin-top: 0.75rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

/* ✅ Pull up the white content box */
body.page:not(.home) .content-shell-inner {
    margin-top: 0px;
}

/* ✅ Let content rise above the wavy footer banner */
.wave-break {
    height: 160px;
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(44, 56, 128, 1) 70%,
        #0b2471 100%
    ),
    url("/wp-content/themes/merseysidedarts/assets/images/bannerbottom.png");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -10px;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.home-content-shell {
    position: relative;
    background-color: #0b2471 !important;
    box-sizing: border-box;
    margin-top: 0;
    padding: 0 1rem 5rem 1rem;
    z-index: 10;
}

.content-shell-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    background: #f9f9fb;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    max-width: 1500px;
    padding: 2rem 2rem 2.5rem 2rem;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.content-main {
    flex: 2 1 60%;
}

.content-side {
    /* Optional: Add right spacing too */
    box-sizing: border-box;
    /* ✅ Add spacing on the left */
    padding-right: 0rem;
    /* 🛡️ Stop it expanding beyond content box */
    flex: 1 1 30%;
    max-width: 100%;
    padding-left: 1rem;
}

.content-heading {
    /* reduced spacing */
    padding-bottom: 0.6rem;
    color: white;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    margin: 0;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}

.content-heading::after {
    background: #f9f9fb;
    border-radius: 1.5px;
    content: "";
    display: block;
    height: 3px;
    margin: 0.4rem auto 0;
    width: 50px;
}

.content-headings-row-split {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin: 0 auto 0.5rem auto;
    max-width: 1200px;
    padding: 0 2rem;
    position: relative;
    z-index: 60;
    top: 120px; /* ⬅️ Moves the headings down */
}

.content-heading-left,
.content-heading-right {
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    margin: 0;
    padding-bottom: 0.3rem;
    position: relative;
    text-transform: uppercase;
}

.content-heading-left::after,
.content-heading-right::after {
    background: #ffd700;
    border-radius: 2px;
    content: "";
    display: block;
    height: 3px;
    margin-top: 0.4rem;
    width: 50px;
}

.news-latest-grid {
    /* Reduced for tighter layout */
    padding: 2rem;
    align-items: flex-start;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    margin: 100px auto;
    max-width: 1200px;
    position: relative;
    z-index: 3;
}

.spotlight-feature {
    width: 100%;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    flex: 2;
    gap: 1rem;
    max-width: 700px;
    overflow: hidden;
    padding: 1.5rem;
}

.spotlight-image img {
    border-radius: 12px;
    border: 3px solid #f4f4f4;
    display: block;
    height: auto;
    width: 100%;
}

/* ⬇ Desktop-only image size rule */
@media (min-width: 1025px) {
    .spotlight-image img {
        max-height: 400px;    /* adjust height cap */
        object-fit: contain;  /* scale inside box, no cropping */
    }
}

.spotlight-text {
    padding: 1.5rem;
}

.spotlight-text h2 {
    color: #0b2471;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}


.spotlight-text h2 a {
    color: inherit;
    text-decoration: none;
}

.spotlight-excerpt {
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 1rem;
}

.spotlight-meta {
    color: #777;
    font-size: 0.8rem;
}

.mini-story-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1rem;
    margin-top: 0rem;
}

.mini-story {
    display: flex;
    flex-direction: row;
    background-color: white;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 0.1rem;
    padding: 0.75rem 1.5rem;
    transition: transform 0.2s ease;
}

.mini-story:hover {
    transform: translateY(-2px);
}

.mini-thumb img {
    height: 70px;
    width: 70px;
}

.mini-info h3 {
    font-size: 0.95rem;
}

.mini-info h3 a {
    color: inherit;
    text-decoration: none;
}

.mini-meta {
    color: #888;
    font-size: 0.75rem;
}

.single-post-wrapper {
    background-color: #0b2471;
    display: flex;
    justify-content: center;
    padding: 2rem;

    /* Pull upward */
    margin-top: -350px;
}

.single-post-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    color: #000;
    max-width: 900px;
    width: 100%;
    padding: 2rem;
    margin-top: -100px;
    position: relative;
    z-index: 10;
}

.single-post-title {
    color: #0b2471;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.single-post-date {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.single-post-content {
    color: #222;
    font-size: 1.1rem;
    line-height: 1.6;
}

.single-post-content p {
    margin-bottom: 1rem;
}

.single-post-thumbnail img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.news-wrapper {
    padding: 0 2rem 4rem 2rem;
    margin-top: -550px;
    position: relative;
    z-index: 60;
}

/* 🔵 Blue background layer */

.blue-background {
    /* Room for wave */
    background-color: #0b2471;
    padding-bottom: 80px;
    position: relative;
    z-index: 1;
}

/* Social widget card styling */

.social-widget {
    background: #5869a5;
    /* border: 1px solid #ddd; */
    border-top: 1px solid #2c3880;
    /* Thick dark blue on top */
    border-right: 1px solid #b0b0b0;
    /* Thin neutral grey on right */
    border-bottom: 1px solid #2c3880;
    /* Thick dark blue on bottom */
    border-left: 1px solid #b0b0b0;
    /* Thin neutral grey on left */
    border-radius: 10px;
    padding: 1.2rem 1.0rem;
    /* top/bottom 0.8rem, left/right 0.6rem */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    width: 100%;
    /* 🔄 Make it adapt to container */
    max-width: 360px;
    /* 🔄 Prevent overflow */
    height: auto;
    /* 🔄 Let height be set by content */
    display: flex;
    justify-content: center;
    /* 🔄 Center the plugin if smaller */
}

.social-widget iframe {
    border: none;
    display: block;
    height: auto;
    margin: 0 !important;
    max-width: 100%;
    padding: 0 !important;
}

/* ✅ Container for Facebook iframe to stay centered */

.widget-frame-container {
    /* or try 320px */
    display: flex;
    justify-content: center;
    max-width: 360px;
    width: 100%;
}

.social-widget .post {
    align-items: center;
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.social-widget .post-icon {
    font-size: 1.5rem;
}

.social-widget .post-text {
    font-size: 0.95rem;
    line-height: 1.4;
}

.news-card {
    background-color: white;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 2.5rem;
    padding: 2rem;
    transition: transform 0.2s ease;
}

.news-card:hover {
    transform: translateY(-4px);
}

.news-card h3 {
    color: #2c3880;
    font-size: 1.6rem;
    margin-top: 0;
}

.news-card p {
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 0.5rem;
}

.news-card a {
    text-decoration: none;
}

.news-card a:hover {
    text-decoration: underline;
}

.site-footer {
    background-size: cover;
    background: url("../images/merseysidewavesbottom.png") no-repeat center center;
    color: white;
    margin-top: 4rem;
    padding: 2rem 1rem;
    text-align: center;
}

.hero-banner {
    position: relative;
    height: 400px;
    /* overflow: hidden; */
    z-index: 1;
    /* 🔵 Add this line */
}

.hero-slide-container {
    height: 100%;
    position: relative;
}

.hero-slide {
    /* 🔧 Adjust vertical crop here */
    opacity: 0;
    background-position: center 20%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: opacity 1s ease-in-out;
    width: 100%;
}

.hero-slide.active {
    opacity: 1;
    z-index: 1;
}

.top-ticker-bar {
    /* Merseyside Blue */
    color: white;
    background: #002147;
    border-bottom: 2px solid #fff;
    font-size: 1.05rem;
    font-weight: 600;
    overflow: hidden;
    padding: 0.4rem 1rem;
    position: relative;
    white-space: nowrap;
    z-index: 100;
}

.ticker-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ticker-label {
    background: #FFD700;
    /* Gold */
    color: #002147;
    padding: 0.2rem 0.6rem;
    font-weight: bold;
    border-radius: 3px;
    font-size: 0.9rem;
}

.ticker-marquee {
    overflow: hidden;
    flex: 1;
    position: relative;
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: ticker-loop 25s linear infinite;
}

.ticker-item {
    white-space: nowrap;
    padding-right: 65rem;
    /* spacing between repetitions */
    font-weight: 700;
    /* bolder text */
    font-size: 1rem;
    /* slightly smaller for polish */
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* .hero-text {
  bottom: 20%;color: white;font-size: 3rem;font-weight: bold;left: 50%;position: absolute;text-align: center;text-shadow: 2px 2px 4px black;transform: translateX(-50%);
}

/* Submenu dropdown styles */

.nav-menu .sub-menu {
    /* Dark background */
    padding: 0.5rem 0;
    background-color: #002366;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    list-style: none;
    margin-top: 0.5rem;
    position: absolute;
    z-index: 999;
}

.nav-menu .sub-menu li {
    white-space: nowrap;
}

.nav-menu .sub-menu li a {
    color: white;
    display: block;
    padding: 0.5rem 1.5rem;
    text-decoration: none;
}

.nav-menu .sub-menu li a:hover {
    background-color: #0044aa;
}

/* Show dropdown on hover */

.nav-menu li.menu-item-has-children:hover>.sub-menu {
    display: block;
}

/* Optional: ▼ symbol after parent */

.nav-menu li.menu-item-has-children>a::after {
    content: " ▼";
    font-size: 0.7rem;
    margin-left: 4px;
}

/* Ensure hero-text appears correctly */

.hero-text {
    bottom: 20%;
    color: white;
    font-size: 3rem;
    font-weight: bold;
    left: 50%;
    position: absolute;
    text-align: center;
    text-shadow: 2px 2px 4px black;
    transform: translateX(-50%);
    z-index: 2;
}

/* Ensure dropdown is above hero banner */

.main-navigation .nav-menu li {
    position: relative;
    z-index: 10000;
}

/* Dropdown container */

.main-navigation .nav-menu li ul.sub-menu {
    /* Your dark blue */
    padding: 0.5rem 0;
    background: #002366;
    border-radius: 0 0 6px 6px;
    border: 2px solid #ffd700;
    display: none;
    left: 0;
    min-width: 200px;
    position: absolute;
    top: 100%;
    z-index: 10001;
}

/* Show dropdown on hover */

.main-navigation .nav-menu li:hover>ul.sub-menu {
    display: block;
}

/* Individual submenu items */

.main-navigation .nav-menu li ul.sub-menu li {
    display: block;
    padding: 0.5rem 1rem;
}

/* Submenu links */

.main-navigation .nav-menu li ul.sub-menu li a {
    color: white;
    font-size: 1.1rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Hover effect on submenu links */

.main-navigation .nav-menu li ul.sub-menu li a:hover {
    color: #ffd700;
}

/* OPTIONAL: Remove default arrow */

.main-navigation .nav-menu li.menu-item-has-children>a::after {
    display: none;
}

/* Vertically center the site title */

.site-title a {
    align-items: center;
    color: white;
    display: flex;
    font-size: 2.2rem;
    font-weight: bold;
    height: 100%;
    text-shadow: 1px 1px 2px black;
}

.home-news {
    padding: 4rem 1rem;
}

.news-post {
    border-bottom: 1px solid #ccc;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}

.news-post h3 {
    font-size: 1.4rem;
    margin: 0;
}

.news-post a {
    color: #2c3880;
    text-decoration: none;
}

.news-post a:hover {
    text-decoration: underline;
}

.news-post p {
    color: #333;
    margin-top: 0.5rem;
}

/* Navigation Bar Improvements */

.split-nav {
    flex-wrap: nowrap;
}

.nav-menu li a {
    color: white;
}

.nav-menu li a:hover {
    color: #ffcc00;
    text-decoration: underline;
}

/* 🔧 Desktop Navigation Menu Styling */

.main-navigation .nav-menu li a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'Segoe UI Semibold', 'Segoe UI', sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    font-size: 1.1rem;
    padding: 0.5rem 1.2rem;
    white-space: nowrap;
    margin-top: -0.2rem;
}

@media (max-width: 768px) {
    .main-navigation .nav-menu {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }
    .spotlight-feature,
    .mini-story-list {
        width: 100%;
    }
    .mini-excerpt {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        font-size: 0.85rem;
        line-height: 1.4;
        margin-top: 0.4rem;
        overflow: hidden;
        color: #555;
    }
    /* ✅ Split Headings for Featured / Other News */
    .content-headings-row-split {
        align-items: baseline;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: space-between;
        margin: 2rem auto 1rem auto;
        max-width: 1200px;
        padding: 0 2rem;
        position: relative;
    }
    .main-navigation .nav-menu li:hover>.sub-menu {
        display: block;
    }
    .fixtures-container {
        background: #001c50;
        border-radius: 10px;
        border: 2px solid #ffd700;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        margin: 2rem auto;
        max-width: 960px;
        padding: 1rem;
    }
    .fixtures-title {
        color: #ffd700;
        font-size: 1.8rem;
        letter-spacing: 1px;
        margin-bottom: 1rem;
        text-align: center;
        text-transform: uppercase;
    }
    .fixtures-table {
        border-collapse: collapse;
        width: 100%;
    }
    .fixtures-table th,
    .fixtures-table td {
        border-bottom: 1px solid #ccc;
        color: white;
        padding: 0.75rem 1rem;
        text-align: center;
    }
    .fixtures-table th {
        background-color: #002366;
        color: #ffd700;
    }
    /* ▼ Main dropdown styles */
    .main-navigation .nav-menu li {
        position: relative;
    }
    .main-navigation .nav-menu li:hover>ul.sub-menu {
        display: block;
    }
    .main-navigation .nav-menu ul.sub-menu {
        background-color: #0b2471;
        border-radius: 6px;
        border: 2px solid #ffd700;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        display: none;
        left: 0;
        min-width: 200px;
        padding: 0.5rem 0;
        position: absolute;
        top: 100%;
        z-index: 9999;
    }
    /* ▼ Flyout submenu (third level and beyond) */
    .main-navigation .nav-menu ul.sub-menu ul.sub-menu {
        background-color: #0b2471;
        border-radius: 6px;
        border: 2px solid #ffd700;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        display: none;
        left: 100%;
        min-width: 200px;
        padding: 0.5rem 0;
        position: absolute;
        top: 0;
        z-index: 10000;
    }
    /* Show flyout submenu */
    .main-navigation .nav-menu ul.sub-menu li:hover>ul.sub-menu {
        display: block;
    }
    /* Position deeper submenus to the right */
    .main-navigation .nav-menu li ul.sub-menu ul.sub-menu {
        background-color: #0b2471;
        border-radius: 8px;
        border: 2px solid #ffd700;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        display: none;
        left: 100%;
        margin-left: 0.2rem;
        min-width: 200px;
        position: absolute;
        top: 0;
        z-index: 1000;
    }
    /* Show them on hover */
    .main-navigation .nav-menu li ul.sub-menu li:hover>ul.sub-menu {
        display: block;
    }
    /* Submenu flyout (3rd level and deeper) */
    .main-navigation .nav-menu li ul.sub-menu ul.sub-menu {
        background-color: #0b2471;
        border-radius: 8px;
        border: 2px solid #ffd700;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        display: none;
        left: 100%;
        min-width: 200px;
        position: absolute;
        top: 0;
        z-index: 9999;
    }
    /* Show deeper submenus on hover */
    .main-navigation .nav-menu li ul.sub-menu li:hover>ul.sub-menu {
        display: block !important;
    }
}

@media screen and (min-width: 769px) {
}

@keyframes ticker-loop {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ===== Inner page header normalization (inserted by cleanup) ===== */
body.page:not(.home) .header-background {
  background-image: url("/wp-content/themes/merseysidedarts/assets/images/MerseysideHead-back.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;

  /* Controlled height */
  min-height: 320px;
  padding-bottom: 0;

  position: relative;
  z-index: 0;
}

/* Title block placement for inner pages */
body.page:not(.home) .page-hero-container {
  margin-top: -80px;  /* tweak -40 to -100 if needed */
  position: relative;
  z-index: 0;
}

/* === Slim inner-page header band (Option A) === */
.page-header--slim{
  margin: 0 auto;
  padding: 2.25rem 1rem 1.5rem;
  max-width: 1200px;
  text-align: center;
}
.page-header--slim .page-hero-title{
  margin: 0;
  display: inline-block;
  font-weight: 800;
  font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.4rem);
  color: #fff;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.page-header--slim .page-hero-title::after{
  content: "";
  display: block;
  height: 4px;
  width: 120px;
  margin: .6rem auto 0;
  border-radius: 3px;
  background: #ffd700;
}
.page-header--slim-sub{
  margin: .4rem 0 0;
  color: #e6e6e6;
  font-size: 1rem;
}

/* Remove old overlay box to avoid blocking menus */
.page-hero-overlay{ display: none !important; }

/* Keep nav above everything; content below */
.site-header{ position: relative; z-index: 100000; }
.main-navigation .sub-menu{ position: absolute; z-index: 100001; }
.page-hero-container, .page-hero-container{ position: relative; z-index: 5; }   /* title/underline layer */
.content-shell-inner, .news-wrapper{ position: relative; z-index: 1; }  /* below title */

/* Inner pages: shorter header background */
body.page:not(.home) .header-background{
  background-image: url("/wp-content/themes/merseysidedarts/assets/images/MerseysideHead-back.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 320px;
  padding-bottom: 0;
  position: relative;
  z-index: 0;
}

/* Gentle nudge so the slim band sits nicely over the blue top */
body.page:not(.home) .page-hero-container{
  margin-top: -40px;
}

/* === Slim header vertical control overrides (v2) === */
/* Kill flex centering inherited from older rules on inner pages */
body.page:not(.home) .page-hero-container{
  display: block !important;   /* break out of flex so padding works */
}

/* Make slim band position adjustable via padding, not margins */
.page-header--slim{
  display: block !important;
  padding-top: 0.5rem;   /* ↑ increase to move title DOWN */
  padding-bottom: 0.75rem; /* ↑ increase to add space below */
}

/* Optional: fine control on title spacing */
.page-header--slim .page-hero-title{
  margin-top: 0;   /* ensure no unexpected margins */
  margin-bottom: 0.25rem;
}

/* Keep nav/dropdowns on top, always */
.site-header{ position: relative; z-index: 100000; }
.main-navigation .sub-menu{ position: absolute; z-index: 100001; }

/* Force nav clickable over all other elements */
.site-header,
.split-nav,
.main-navigation {
  position: relative !important;
  z-index: 999999 !important;
}

/* Belt-and-braces stacking */
.site-header { position: relative; z-index: 999999 !important; }
.main-navigation { position: relative; z-index: 1000000 !important; }

/* parent must accept events so its children (burger) can be clicked */
.header-background { pointer-events: auto !important; }

/* fade overlay can stay click-through */
.header-background::before,
.header-background::after { pointer-events: none !important; }

/* keep header above background */
.site-header { position: relative; z-index: 99999 !important; }

/* ===== Table Styling for Fixtures & Averages ===== */
.fixtures-container {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 1300px; /* wider than before for desktop */
  margin: 2rem auto;
}

.fixtures-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #0b2471;
}

.fixtures-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.fixtures-table th,
.fixtures-table td {
  padding: 0.8rem 1rem;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.fixtures-table th {
  background-color: #001c50;
  color: #fff;
  font-weight: bold;
}

.fixtures-table tbody tr:nth-child(even) {
  background-color: #f8f8f8;
}

.fixtures-table tbody tr:hover {
  background-color: #f1f1f1;
}

.fixtures-table td span {
  display: inline-block;
}

/* Mobile-friendly tweaks */
@media screen and (max-width: 768px) {
  .fixtures-table thead {
    display: none;
  }

  .fixtures-table tr {
    display: block;
    margin-bottom: 1rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    padding: 0.5rem;
  }

  .fixtures-table td {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    border: none;
    border-bottom: 1px solid #eee;
  }

  .fixtures-table td:last-child {
    border-bottom: none;
  }

  .fixtures-table td::before {
    content: attr(data-label);
    font-weight: bold;
    color: #001c50;
  }
}

/* Fixtures & Results page – kill the big white slab */
.page-id-298 .content-shell-inner {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Make the table itself the card */
.page-id-298 .fixtures-container {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 1.25rem 1.5rem;
  max-width: 1500px; /* wider card */
  margin: 0 auto 3rem;
}

/* Ensure the table fills the card */
.page-id-298 .fixtures-container .fixtures-table {
  width: 100%;
}

/* Fixtures & Results page: make the main column full-width */
.page-id-298 .content-shell-inner { display: block !important; }  /* or keep flex and force 100%: */
.page-id-298 .content-main { flex: 0 0 100% !important; max-width: 100% !important; }
.page-id-298 .content-side { display: none !important; } /* hide sidebar on this page if it’s empty */

/* Now the card width will actually apply */
.page-id-298 .fixtures-container {
  max-width: 1300px !important;
  width: 100% !important;
  margin: 2rem auto !important;
}

/* desktop only so mobile nav stays put */
@media (min-width: 1024px){
  nav.main-navigation.split-nav {
    left: -30px;                /* nudge whole bar left; tweak -4…-16 */
    /* or: transform: translateX(-8px);  <-- use this if 'left' has no effect */
  }
}

/* === Gap under all page titles === */
body.page:not(.home) .page-hero-container.page-header--slim,
body.page:not(.home) .alt-page-header {
  padding-bottom: 5.25rem; /* adjust to taste */
}

/* === Unified lift for white content box === */
body.page:not(.home) .content-shell-inner {
  margin-top: -40px; /* adjust to taste */
}

/* Super League cards (scoped) */
.sl-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px;
}

.sl-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0 -12px;
}

.sl-card {
    box-sizing: border-box;
    width: 33.3333%;
    padding: 12px 12px 36px; /* extra bottom space for row gap */
    margin-bottom: 40px; /* adjust row gap */
}

@media (max-width: 1100px) {
    .sl-card {
        width: 50%;
        padding: 12px 12px 24px;
    }
}

@media (max-width: 700px) {
    .sl-card {
        width: 100%;
        padding: 12px 12px 20px; /* slightly smaller gap on mobile */
    }
}

.sl-inner {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sl-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0b2471;
    color: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    margin-bottom: 12px;
}

.sl-dates {
    font-size: .95rem;
}

.sl-legs {
    display: flex;
    gap: 20px;
    margin-top: 6px;
}

.sl-legs ul {
    flex: 1 1 0;
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.sl-legs li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 4px;
    border-bottom: 1px solid #eef1f7;
    font-size: .98rem;
}

.sl-legs li:last-child {
    border-bottom: 0;
}

.sl-vs {
    opacity: .75;
}

.sl-home {
    color: #ffd200;
    font-weight: 700;
}

/* Kill the shell on Men's and Ladies fixtures pages */
body.page-id-313 .content-shell,
body.page-id-313 .content-shell-inner,
body.page-id-313 .content-main,
body.page-id-385 .content-shell,
body.page-id-385 .content-shell-inner,
body.page-id-385 .content-main {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

/* neutralise stray block margins just in case */
body.page-slug-fixturesmen .sl-grid > *,
body.page-slug-fixturesladies .sl-grid > *{
  margin-top:12px !important;
  margin-bottom:12px !important;
}

.mdp-week-block { display: none; }
.mdp-week-block:first-of-type { display: block; } /* JS will override when user switches */

.mdp-week-tabs,
.mdp-week-select-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff; /* white box */
    padding: 0.75rem 1rem;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    margin-bottom: 1rem;
}

/* Tabs: allow horizontal scroll for many weeks */
.mdp-week-tabs {
    flex-wrap: nowrap;          /* prevent wrapping */
    overflow-x: auto;           /* scroll when too many */
    white-space: nowrap;        /* keep links on one line */
    scrollbar-width: thin;      /* Firefox scrollbar */
}
.mdp-week-tabs::-webkit-scrollbar {
    height: 6px;                /* small scrollbar height */
}
.mdp-week-tabs::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.mdp-week-tab {
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    color: #004080;
    font-weight: 600;
    flex-shrink: 0; /* stops tabs shrinking when overflowed */
}

.mdp-week-tab.is-active {
    background: #004080;
    color: #fff;
}

.mdp-week-select {
    padding: 0.4rem 0.6rem;
}

/* Mobile: hide tabs, only show dropdown */
@media screen and (max-width: 768px) {
    .mdp-week-tabs { display: none; }
    .mdp-week-select-wrap { display: flex; }
}

/* Ensure nav sits above hero title */
.header-background {
  position: relative !important;
  z-index: auto !important; /* let children define stacking */
}

.header-background .site-header,
.header-background .split-nav,
.header-background .main-navigation {
  position: relative !important;
  z-index: 1000 !important; /* higher than hero title */
}

.header-background .page-hero-title {
  position: relative !important;
  z-index: 1 !important; /* keep low */
}

/* Base: dropdowns positioned off their LI, no reflow */
.main-navigation .menu > li { position: relative; }           /* anchor */
.main-navigation .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3000;                                              /* above title */
  display: none;
}
.main-navigation .menu > li:hover > .sub-menu,
.main-navigation .menu > li:focus-within > .sub-menu { display: block; }

/* Keep nav layer above hero/title */
.main-navigation { position: relative; z-index: 2500; }

/* Title sits below nav */
.page-hero-title { position: relative; z-index: 1000; }

/* Non-home pages: use the wave once, make it tall enough, keep menus above */
body.page:not(.home) .header-background {
  position: relative;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;       /* use the full width and keep aspect */
  min-height: 340px;            /* extend the wave so it passes the title */
  z-index: 0;                   /* stays behind nav/title */
}

/* Lift title + content above the banner (menus already work) */
body.page:not(.home) .page-hero-title,
body.page:not(.home) .content-shell-inner {
  position: relative;
  z-index: 2;
}

/* Keep dropdowns safely on top */
.main-navigation .sub-menu { position: absolute; z-index: 3000; }

/* Keep content above the banner, no overlap */
body.page:not(.home) .page-hero-title,
body.page:not(.home) .content-shell-inner {
  position: relative;
  z-index: 2;
}
body.page:not(.home) .page-hero-title { margin-top: 12px; }
body.page:not(.home) .content-shell-inner { margin-top: 24px; }

/* If you have an overlay element, keep it behind & non-interactive */
body.page:not(.home) .page-hero-overlay {
  position: relative;
  z-index: 0;
  pointer-events: none;
}
/* Extend the wave behind the title */
body.page:not(.home) .header-background {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;      /* or try 100% 140% if you need more vertical stretch */
  min-height: 420px;           /* bump until the fade reaches below “RESULTS” */
  position: relative;
  z-index: 0;                  /* stays behind title/content (z=2) */
}

/* If you STILL see the image too short, add a bottom fade only */
body.page:not(.home) .header-background::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 160px;               /* adjust */
  background: linear-gradient(to bottom, rgba(11,36,113,0) 0%, rgba(11,36,113,1) 80%);
  pointer-events: none;
  z-index: 1;                  /* below title/content (z=2) */
}
/* 0) Keep menus above everything */
.main-navigation,
.main-navigation .sub-menu { position: relative; z-index: 10000; }

/* 1) Put title + content back up (no extra nudge) */
body.page:not(.home) .page-hero-title,
body.page:not(.home) .content-shell-inner {
  position: relative;
  z-index: 2;
  margin-top: 0 !important;   /* undo any nudges that pushed them down */
}

/* 2) Wave background lives on .header-background – make it taller */
body.page:not(.home) .header-background {
  position: relative;
  z-index: 0;                  /* behind title/content */
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;      /* try this first */
  min-height: 480px;           /* ↑ increase until it clears the title */
}

/* If the fade STILL ends too high, comment out cover above and use this: */
/*
body.page:not(.home) .header-background { 
  background-size: 100% 150%;  // vertical stretch of the same image
}
*/

/* Optional: extra fade to solid blue at the bottom (no repeats) */
body.page:not(.home) .header-background::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 160px;               /* adjust if needed */
  pointer-events: none;
  z-index: 1;                  /* still below title/content */
  background: linear-gradient(to bottom, rgba(11,36,113,0) 0%, rgba(11,36,113,1) 80%);
}

/* Desktop can use a bit more height than mobile */
@media (min-width: 900px){
  body.page:not(.home) .header-background { min-height: 750px; }
}

body.page:not(.home) .header-background { position: relative; z-index: 1; }
body.page:not(.home) main               { position: relative; z-index: 2; margin-top: -80px; }

/* Wave stays behind */
body.page:not(.home) .header-background { position: relative; z-index: 1; }

/* Lift the entire page content above the wave and nudge up */
/* desktop */
body.page:not(.home) .site-main { margin-top: -600px; }

/* tablets */
@media (max-width: 1200px){
  body.page:not(.home) .site-main { margin-top: 0px; }
}

/* phones */
@media (max-width: 768px){
  body.page:not(.home) .site-main { margin-top: 0px; }
}

/* Keep dropdowns above everything */
.main-navigation .sub-menu { position: absolute; z-index: 9999; }
@media (max-width: 782px) { }

/* lock page scroll when drawer open */
body.menu-open{ overflow:hidden; }



body.page-id-340 .home-content-shell,
body.page-id-340 .content-shell-inner,
body.page-id-340 .home-content-shell .content-shell-inner {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}


body.page-id-381 .home-content-shell,
body.page-id-381 .content-shell-inner,
body.page-id-381 .home-content-shell .content-shell-inner {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.page-id-264 .content-shell-inner {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.page-id-310 .content-shell-inner,
body.page-id-646 .content-shell-inner {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.page-id-700 .content-shell-inner {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.page-id-377 .content-shell-inner {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Single post (desktop) — slim featured image */
@media (min-width: 1025px){
  /* The wrapper that holds the featured image */
  body.single-post .single-post-thumbnail{
    max-width: 720px !important;   /* adjust: 640–800px */
    margin: 0 auto 24px !important;
  }

  /* The image itself */
  body.single-post .single-post-thumbnail img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 420px !important;  /* adjust height cap */
    object-fit: contain !important; /* no cropping; show full image */
  }

  /* If your theme also marks the block as 'wide' or 'full', rein it in */
  body.single-post .alignwide,
  body.single-post .alignfull{
    max-width: 720px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Hide the whole week selector on desktop */
@media (min-width: 768px){
  .mdp-week-select-wrap { display: none !important; }
}

/* Merseyside Darts – venue tables */
.mdp-venues{
  background:#ffffff;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:20px;
  margin:24px auto;
  max-width:1100px;
}
.mdp-venues .mdp-title{
  margin:0 0 6px;
  font-weight:800;
  letter-spacing:.5px;
  text-align:center;
  color:#111111;
}
.mdp-venues .mdp-sub{
  margin:0 0 18px;
  text-align:center;
  color:#4a4a4a;
}
.mdp-venues .mdp-rule{
  width:120px;
  height:6px;
  background:#ffd700;           /* Merseyside gold */
  border-radius:3px;
  margin:0 auto 18px;
}

/* Table */
.mdp-venues table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:16px;
}
.mdp-venues thead th{
  background:#0b2471;           /* Merseyside blue */
  color:#ffffff;
  text-align:left;
  padding:14px 12px;
  font-weight:700;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}
.mdp-venues th + th{ border-left:1px solid rgba(255,255,255,.15); }

.mdp-venues tbody td{
  padding:12px;
  vertical-align:top;
  border-top:1px solid #eef1f7;
  word-break:break-word;
  hyphens:auto;
}
.mdp-venues tbody tr:nth-child(odd) td{ background:#f9fbff; }
.mdp-venues tbody tr:hover td{ background:#f1f5ff; }
.mdp-venues td strong{ color:#111111; }

/* Mobile: stack rows into sleek cards */
@media (max-width: 780px){
  .mdp-venues table,
  .mdp-venues thead,
  .mdp-venues tbody,
  .mdp-venues th,
  .mdp-venues td,
  .mdp-venues tr{ display:block; }
  .mdp-venues thead{ display:none; }
  .mdp-venues tbody tr{
    border:1px solid #e6ebf5;
    border-radius:12px;
    margin:12px 0;
    overflow:hidden;
    background:#ffffff;
  }
  .mdp-venues tbody td{
    border:none;
    padding:10px 12px;
  }
  .mdp-venues tbody td::before{
    content:attr(data-label);
    display:block;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.4px;
    color:#6b7280;
    margin-bottom:2px;
  }
}

/* Page 254: shrink the white box so it hugs the content */
body.page-id-254 .content-shell-inner {
  max-width: 850px;        /* narrower than full site width */
  margin: 2rem auto;       /* center it with a bit of breathing room */
  padding: 0.1rem;         /* internal padding around the cards */
  background: #fff;        /* keep the white background */
  border-radius: 12px;     /* soften the edges */
  box-shadow: 0 6px 20px rgba(0,0,0,0.08); /* subtle shadow */
  background: #f8f9fb !important;
}


/* ===== Committee (Desktop) ===== */
.committee{
  max-width: 980px;
  margin: 2rem auto 3rem;
  padding: 0 16px;
}

.committee-block{
  margin-bottom: 28px;
}

.committee-title{
  background: #0b2471;            /* Merseyside navy */
  color: #fff;
  padding: 12px 16px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  border-bottom: 3px solid #FFD700;/* Gold accent */
  border-radius: 10px 10px 0 0;
}

.committee-card{
  background: #fff;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  overflow: hidden;
}

.committee-row{
  display: flex;                   /* side-by-side on desktop */
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

.committee-row:last-child{
  border-bottom: none;
}

/* Role (left) and Name (right) */
.committee-row .role,
.committee-row .name{
  display: block;                  /* ensures wrapping works */
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.committee-row .role{
  color: #0b2471;
  font-weight: 700;
  flex: 0 1 52%;                   /* left column width */
  min-width: 240px;
}

.committee-row .name{
  color: #222;
  flex: 1 1 48%;                   /* right column grows */
  text-align: right;               /* neat two-column look */
}

/* Subtle hover polish (optional) */
.committee-card:hover{
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  transition: box-shadow .2s ease;
}

/* NextGEN breadcrumb: sub-header strip */
ul.ngg-breadcrumbs{
  display:inline-block;
  list-style:none;
  background: rgba(11,36,113,.9); /* brand navy */
  color:#fff;
  padding:6px 12px;
  border-radius:6px;
  margin:0 0 1rem 0;
}
ul.ngg-breadcrumbs li{ display:inline; }
ul.ngg-breadcrumbs a{
  color:#FFD700 !important;      /* gold links */
  text-decoration:none;
  font-weight:600;
}
ul.ngg-breadcrumbs a:hover{
  color:#fff !important;
  text-decoration:underline;
}

/* ===== Custom 404 (clean, bold, one button) ===== */

/* 404: keep the header/nav, but remove the big blue backdrop + extra space */
body.error404 .header-background {
  background: transparent !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

/* If the backdrop is drawn with pseudo elements, kill those only */
body.error404 .header-background::before,
body.error404 .header-background::after {
  content: none !important;
}

/* Make sure the main content starts right away */
body.error404 #site-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Nudge the 404 card a touch closer under the nav */
body.error404 .mdp-404 {
  margin-top: 12px !important;   /* adjust 8–20px to taste */
}

.mdp-404 {
  max-width: 900px;
  margin: 56px auto;
  padding: 28px 24px 32px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  text-align: center;
}

/* Floating badge header */
.mdp-404-badge {
  display: inline-block;
  background: #0b2471;
  color: #fff;
  padding: 14px 18px 10px;
  border-radius: 10px;
  position: relative;
  margin-top: -42px;  /* pulls badge up for a “tab” effect */
}

.mdp-404-badge h1 {
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0;
  letter-spacing: .3px;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.mdp-404-underline {
  display: block;
  width: 56px;
  height: 3px;
  margin: 8px auto 0;
  background: #FFD700;
  border-radius: 3px;
}

/* Body copy */
.mdp-404-copy {
  margin: 14px 0 20px;
  color: #1f2a44;
  font-size: 1rem;
}

/* Single action button */
.mdp-404-actions {
  display: flex;
  justify-content: center;
}

.mdp-btn {
  background: #0b2471;
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  border: 2px solid transparent;
}

.mdp-btn:hover {
  background: #FFD700;
  color: #0b2471;
  border-color: #FFD700;
}

/* add arrows to my superleague average sorter */
thead th.asc::after { content: " ▲"; }
thead th.desc::after { content: " ▼"; }
/* (optional) nicer spacing */
thead th.asc::after, thead th.desc::after { margin-left: 4px; }
thead th { cursor: pointer; } /* visual cue */


/* ===== Contact page (ID 320) ===== */

/* Remove your theme’s big white wrapper */
.page-id-320 .content-shell-inner{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Intro card */
.page-id-320 .mdp-contact-intro{
  max-width: 1040px;
  margin: 0 auto 20px;
  background: #0b316b; /* brand navy */
  color: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.page-id-320 .mdp-contact-intro p{
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
}

/* Form card */
.page-id-320 .mdp-form-shell{
  max-width: 1040px;
  margin: 0 auto 40px;
}
.page-id-320 .mdp-form-shell .fluentform{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 24px;
}

/* Labels + inputs */
.page-id-320 .ff-el-input--label label{
  font-weight: 600;
  color: #0b316b;
}
.page-id-320 .ff-el-form-control,
.page-id-320 select,
.page-id-320 textarea{
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 12px 14px;
  transition: box-shadow .2s, border-color .2s;
}
.page-id-320 .ff-el-form-control:focus{
  outline: none;
  border-color: #1e63ff;
  box-shadow: 0 0 0 3px rgba(30,99,255,.15);
}

/* Submit button */
.page-id-320 .ff-btn-submit{
  background: linear-gradient(90deg, #1e63ff, #0b316b);
  color: #fff;
  border: 0;
  border-radius: 9999px;
  padding: 12px 20px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(30,99,255,.25);
}
.page-id-320 .ff-btn-submit:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Mobile tweaks */
@media (max-width: 640px){
  .page-id-320 .mdp-contact-intro{ border-radius: 12px; padding: 14px 16px; }
  .page-id-320 .mdp-form-shell .fluentform{ padding: 16px; }
}

/* ==== Force stacked layout + sane heights on Contact page (ID 320) ==== */
.page-id-320 .entry-content{ 
  display:block !important;              /* kill any flex/grid */
}
.page-id-320 .entry-content::after{
  content:""; display:block; clear:both; /* clear legacy floats */
}

/* Make intro + form full-width blocks, not columns */
.page-id-320 .mdp-contact-intro,
.page-id-320 .mdp-form-shell{
  float:none !important;
  clear:both !important;
  display:block !important;
  width:100% !important;
  max-width:1040px;
  margin:0 auto 24px;                    /* center them */
}

/* Fix the giant blue box height */
.page-id-320 .mdp-contact-intro{
  height:auto !important;
  min-height:0 !important;
  background:#0b316b;
  color:#fff;
  border-radius:16px;
  padding:18px 20px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}



/* ============================================================
   SUPER LEAGUE AVERAGES TABLE (mdp-avg-scope) — legacy-safe CSS
   No CSS variables, no CSS Grid, no inline-grid/place-items.
   ============================================================ */

.mdp-avg-scope .mdp-avg-wrap{
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  overflow:hidden;
}

.mdp-avg-scope .mdp-avg-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  background:linear-gradient(180deg, #0b2471, #0a1f61);
  border-bottom:1px solid rgba(0,0,0,0.125);
}
.mdp-avg-scope .mdp-avg-head h2{
  margin:0;
  font-size:1.25rem;
  font-weight:800;
  color:#fff;
  letter-spacing:.3px;
}
.mdp-avg-scope .mdp-avg-head .sub{
  font-size:.85rem;
  color:#e3e9ff;
}

.mdp-avg-scope .mdp-avg-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:.95rem;
}
.mdp-avg-scope .mdp-avg-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:#0e2a80;
  color:#ffffff;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:.8rem;
  border-bottom:1px solid rgba(0,0,0,0.2);
  padding:12px 10px;
  white-space:nowrap;
}

.mdp-avg-scope .mdp-row{ background:#ffffff; }
.mdp-avg-scope .mdp-row.is-odd{ background:#f6f8ff; }
.mdp-avg-scope .mdp-row:hover{ background:rgba(255,204,0,.10); }

.mdp-avg-scope td{
  padding:12px 10px;
  border-bottom:1px solid #e2e8f0;
  vertical-align:middle;
  white-space:nowrap;
  color:#0a0a0a;
}
.mdp-avg-scope td strong{ color:#0a0a0a; }

.mdp-avg-scope .mdp-avg-pos{
  width:56px;
  text-align:right;
  font-weight:800;
  color:#0b2471;
}
.mdp-avg-scope .mdp-avg-name{ font-weight:700; color:#0a0a0a; }
.mdp-avg-scope .mdp-avg-team{
  color:#374151;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Toggle styles — boxed +/– icon */
.mdp-avg-scope .mdp-toggle{
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
}

.mdp-avg-scope .mdp-toggle::before{
  content:"+";
  display:inline-block;
  width:22px;
  height:22px;
  line-height:22px;
  text-align:center;
  font-weight:700;
  font-size:15px;
  background:#fff;
  color:#0a0a0a;
  border:1px solid #e2e8f0;
  border-radius:6px;
}

.mdp-avg-scope .mdp-row.expanded .mdp-toggle::before{
  content:"–";
  border-color:#0b2471;
}


/* Details row */
.mdp-avg-scope .mdp-details{ background:#f9fbff; }
.mdp-avg-scope .mdp-details td{
  border-bottom:1px solid #e2e8f0;
  padding:10px 16px;
}

/* Details layout — FLEX fallback (replaces CSS Grid) */
.mdp-avg-scope .mdp-detail-grid{
  display:flex;
  flex-wrap:wrap;
  margin:-5px;
}
.mdp-avg-scope .mdp-detail-cell{
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.9rem;
  white-space:nowrap;
  margin:5px;
  /* 4 columns on wide screens */
  flex:1 1 220px; /* grows, wraps; ~min 220px box */
}
.mdp-avg-scope .mdp-detail-label{ color:#6b7280; }
.mdp-avg-scope .mdp-detail-value{ font-weight:800; color:#0b2471; }

/* Mobile: effectively 2 columns */
@media (max-width: 640px){
  .mdp-avg-scope .mdp-detail-cell{ flex-basis: 48%; }
}

.mdp-avg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.mdp-avg-controls {
  margin-left: auto; /* push to the right */
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mdp-avg-controls .mdp-team-filter {
  min-width: 12ch;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  font: inherit;
}

/* Optional: hide label text visually if you keep it for accessibility */
.sr-only {
  position: absolute!important;
  width: 1px!important;
  height: 1px!important;
  padding: 0!important;
  margin: -1px!important;
  overflow: hidden!important;
  clip: rect(0, 0, 0, 0)!important;
  white-space: nowrap!important;
  border: 0!important;
}

/* ============================================================
   END SUPER LEAGUE AVERAGES TABLE — legacy-safe CSS
   ============================================================ */