/*
Theme Name: WAF Aggregator
Theme URI: https://example.com/waf-theme
Author: Your Name
Author URI: https://example.com
Description: A sharp, high-contrast custom theme for the "WAF" football news aggregator. Built with Tailwind CSS utilities, Oswald/Inter typography, and an aggressive angled aesthetic for fast-paced sports content pulled in from RSS aggregator plugins.
Version: 2.1.11
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: waf-theme
*/

/*
 * This file intentionally stays minimal — almost all visual styling is
 * handled by Tailwind utility classes in the template files. The few
 * custom rules below (clip-path angles, WP-generated menu markup) live
 * inline in header.php so they load in the same request as their markup.
 *
 * WordPress requires this file's header comment above to register the
 * theme; do not remove it.
 */


/* v1.6.0 traffic homepage */
.waf-premier-now, .waf-news-river, .waf-club-hubs { contain: layout paint; }
.waf-card-compact:last-child { border-bottom: 0; }
@media (max-width: 640px) {
  .waf-card-compact h3 { font-size: 0.92rem; }
}

/* v1.6.1 feed/season repair */


/* v1.7.0 supporter-first club news */
.waf-club-mode.hidden, .waf-premier-now.hidden { display:none !important; }


/* v1.8.0 club hub SEO engine */
.waf-club-news-row:last-child { border-bottom: 0; }
.waf-club-pagination a[aria-current="page"] { background:#0F2041; color:#fff; }

/* v1.8.2 conservative story-to-club relevance repair */

/* v1.8.5 Google News geographic club precision repair */

/* v1.9.0 permanent match pages */
.waf-match-link { text-decoration:none; }

/* v2.0.0 traffic sprint: readable club URLs + transfer intent links */
.waf-traffic-cta{ text-decoration:none; }


/* v2.1.0 usability/freshness pass */

/* v2.1.1 sidebar containment repair
 * The old desktop layout used 70% + 30% widths PLUS a 2rem flex gap,
 * making the row wider than its parent and pushing the sidebar outside
 * the white content panel. Use grid fractions so the gap is included in
 * the available width. minmax(0, ...) also lets long headlines wrap.
 */
.waf-content-with-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.waf-main-column,
.waf-sidebar-column,
.waf-sidebar-sticky {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.waf-sidebar-sticky > section,
.waf-sidebar-sticky > .widget {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.waf-transfer-centre a,
.waf-trending-now a {
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  .waf-content-with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
    gap: 2rem;
    align-items: start;
  }

  /* v2.1.2 sticky repair
   * Keep the grid item itself sticky. In v2.1.1 the inner wrapper was
   * sticky while its <aside> parent was only as tall as the sidebar;
   * that gave the sticky element no vertical containing space to travel.
   */
  .waf-sidebar-column {
    position: sticky;
    top: 5rem;
    align-self: start;
    height: fit-content;
  }
  .waf-sidebar-sticky {
    position: static;
  }
}

/* v2.1.8 mobile-first polish
 * Preserve the approved desktop design while making WAF behave like a
 * purpose-built mobile news product: compact chrome, readable hero/card
 * proportions, horizontal discovery modules, safe tap targets and zero
 * accidental horizontal overflow.
 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
}
img, svg, video, iframe {
  max-width: 100%;
}
.waf-card-compact,
.waf-club-news-row {
  content-visibility: auto;
  contain-intrinsic-size: 120px;
}

@media (max-width: 639px) {
  /* Give mobile the screen width back; desktop spacing is unchanged. */
  .site-main {
    width: 100%;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 16px !important;
    padding-bottom: 20px !important;
  }
  .waf-content-panel {
    padding: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }
  .waf-content-with-sidebar {
    gap: 20px;
  }

  /* Compact, safe-area-aware sticky header. */
  #masthead {
    padding-top: env(safe-area-inset-top, 0px);
  }
  .waf-header-inner {
    min-height: 52px;
    position: relative;
  }
  .waf-logo img,
  .waf-logo .custom-logo,
  .custom-logo-link img {
    height: 28px !important;
    max-width: 190px !important;
  }
  #site-navigation {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #waf-mobile-menu-toggle {
    min-width: 76px;
    min-height: 40px;
    margin-right: 10px !important;
    padding: 0 11px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    touch-action: manipulation;
  }
  .waf-mobile-menu-icon {
    width: 17px;
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
  }
  .waf-mobile-menu-icon > span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
  }
  #waf-mobile-menu {
    max-height: calc(100dvh - 52px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 18px 32px rgba(15, 32, 65, .28);
  }
  body.waf-mobile-menu-open {
    overflow: hidden;
  }
  #waf-primary-menu-mobile > li > a,
  #waf-primary-menu-mobile summary {
    min-height: 48px;
    padding: .82rem 1rem;
  }
  #waf-primary-menu-mobile .waf-mobile-clubs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: .25rem;
  }
  #waf-primary-menu-mobile .waf-mobile-clubs a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: .65rem .7rem;
    line-height: 1.15;
  }

  /* The ticker remains useful without taking over the viewport. */
  .waf-ta-ticker-label {
    max-width: 42vw;
    padding: .45rem .6rem !important;
    gap: .25rem !important;
    font-size: .65rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .waf-ta-ticker-segment {
    padding: .45rem 1.25rem .45rem 0 !important;
    font-size: .72rem !important;
  }

  /* Club picker becomes a deliberate swipe control rather than a squeezed row. */
  #waf-club-filter {
    margin-bottom: 18px !important;
  }
  .waf-club-filter-head {
    align-items: flex-start !important;
    gap: 8px;
    padding: 10px 12px !important;
  }
  .waf-club-filter-head h2 {
    font-size: .92rem !important;
    line-height: 1.05;
  }
  #waf-filter-status {
    max-width: 42%;
    text-align: right;
    font-size: 9px !important;
    line-height: 1.2;
  }
  .waf-club-filter-row,
  .waf-league-row {
    gap: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }
  .waf-club-filter-row {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }
  .waf-league-row {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }
  .waf-club-circle,
  .waf-league-toggle {
    scroll-snap-align: start;
  }
  .waf-club-circle {
    width: 40px !important;
    height: 40px !important;
  }
  .waf-club-circle img {
    width: 25px !important;
    height: 25px !important;
  }
  .waf-league-toggle {
    height: 40px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 10px !important;
  }

  /* Football Now: mobile gets a taller editorial hero and controlled text. */
  .waf-premier-now {
    margin-bottom: 20px !important;
  }
  .waf-premier-now > div:first-child {
    padding: 12px !important;
  }
  .waf-premier-now > div:first-child > p {
    font-size: 10px !important;
    line-height: 1.25;
  }
  .waf-lead-media {
    aspect-ratio: 4 / 3 !important;
  }
  .waf-lead-headline {
    font-size: 1.55rem !important;
    line-height: 1.02 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
  .waf-lead-meta {
    margin-top: 8px !important;
    gap: 8px !important;
    font-size: 10px !important;
    flex-wrap: wrap;
  }
  .waf-spotlight-item {
    padding: 12px !important;
    gap: 12px !important;
  }
  .waf-spotlight-image {
    width: 98px !important;
  }
  .waf-spotlight-item h3 {
    font-size: .9rem !important;
    line-height: 1.2 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  /* Make the homepage sidebar useful on phones: a swipeable WAF Now rail
     before the long news river rather than something hidden after 40 cards. */
  .home .waf-home-sidebar {
    order: -1;
  }
  .home .waf-home-sidebar .waf-sidebar-sticky {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 0 4px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .home .waf-home-sidebar .waf-sidebar-sticky::-webkit-scrollbar {
    display: none;
  }
  .home .waf-home-sidebar .waf-sidebar-sticky > section,
  .home .waf-home-sidebar .waf-sidebar-sticky > .widget {
    flex: 0 0 min(86vw, 360px);
    margin-bottom: 0 !important;
    scroll-snap-align: start;
  }
  .home .waf-home-sidebar .waf-trending-now li:nth-child(n+4),
  .home .waf-home-sidebar .waf-transfer-centre li:nth-child(n+4) {
    display: none;
  }

  /* Latest-news river: image remains useful without crushing the headline. */
  .waf-news-river-head {
    align-items: flex-end !important;
    gap: 10px !important;
  }
  #waf-feed-status {
    max-width: 110px;
    text-align: right;
    line-height: 1.2;
    font-size: 9px !important;
  }
  .waf-card-compact {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }
  .waf-card-compact > div {
    gap: 12px !important;
  }
  .waf-card-compact > div > a:first-child {
    width: 108px !important;
  }
  .waf-card-compact h3 {
    font-size: .94rem !important;
    line-height: 1.18 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .waf-card-compact .mt-auto {
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Club-hub cards and permanent club pages. */
  .waf-club-hubs {
    margin-top: 20px !important;
  }
  .waf-club-hubs > div:first-child {
    padding: 12px !important;
  }
  .waf-club-hubs a {
    padding: 11px 9px !important;
    gap: 8px !important;
    min-width: 0;
  }
  .waf-club-hubs a > span:first-child {
    width: 32px !important;
    height: 32px !important;
  }
  .waf-club-hubs a > span:last-child {
    font-size: .72rem !important;
    overflow-wrap: anywhere;
  }
  .waf-club-header {
    margin-bottom: 20px !important;
  }
  .waf-club-header-inner {
    padding: 18px 16px !important;
    gap: 14px !important;
    align-items: center;
    text-align: center;
  }
  .waf-club-header-inner > div:nth-child(2) {
    width: 100%;
  }
  .waf-club-header-inner h1 {
    font-size: 1.85rem !important;
    overflow-wrap: anywhere;
  }
  .waf-club-header-inner p {
    margin-left: auto;
    margin-right: auto;
  }
  .waf-club-header-inner .waf-traffic-cta {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  .waf-club-header-stats {
    width: 100%;
    justify-content: center;
  }
  .waf-club-header-stats > div {
    flex: 1 1 0;
    min-width: 0 !important;
  }
  .waf-team-hub-layout {
    gap: 20px !important;
  }
  .waf-team-hub-main {
    padding: 14px !important;
  }
  .waf-club-news-row {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  .waf-club-news-row h3 {
    font-size: .92rem !important;
    line-height: 1.18 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
  .waf-club-pagination {
    gap: 6px !important;
  }
  .waf-club-pagination a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Story pages: readable type, responsive media and CTAs that never bleed. */
  .waf-single-post h1 {
    font-size: 1.75rem !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere;
  }
  .waf-single-post .waf-corner-frame {
    aspect-ratio: 4 / 3 !important;
    margin-bottom: 20px !important;
  }
  .waf-corner-frame::before,
  .waf-corner-frame::after {
    width: 20px;
    height: 20px;
  }
  .waf-corner-frame::before {
    top: -4px;
    left: -4px;
    border-top-width: 3px;
    border-left-width: 3px;
  }
  .waf-corner-frame::after {
    bottom: -4px;
    right: -4px;
    border-bottom-width: 3px;
    border-right-width: 3px;
  }
  .waf-single-post .prose {
    font-size: 1rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }
  .waf-single-post .prose img,
  .waf-single-post .prose video,
  .waf-single-post .prose iframe {
    max-width: 100%;
    height: auto;
  }
  .waf-single-post .prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .waf-source-cta {
    width: 100%;
    min-height: 46px;
    justify-content: center;
    text-align: center;
    padding-left: 14px !important;
    padding-right: 14px !important;
    line-height: 1.2;
  }

  /* Footer should feel intentional, not desktop chrome stacked on a phone. */
  #colophon {
    margin-top: 32px !important;
  }
  #colophon > div {
    padding: 24px 16px !important;
    gap: 18px !important;
  }
}

@media (max-width: 380px) {
  .site-main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .waf-mobile-menu-text {
    display: none;
  }
  #waf-mobile-menu-toggle {
    min-width: 44px;
    width: 44px;
    padding: 0 !important;
  }
  .waf-logo img,
  .waf-logo .custom-logo,
  .custom-logo-link img {
    height: 26px !important;
    max-width: 175px !important;
  }
  .waf-lead-headline {
    font-size: 1.38rem !important;
  }
  .waf-spotlight-image {
    width: 88px !important;
  }
  .waf-card-compact > div > a:first-child {
    width: 96px !important;
  }
  .waf-club-news-row {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  #waf-feed-status {
    display: none;
  }
}


/* ================================================================
   2.1.9 — mobile navigation containment
   The desktop ribbon has custom display:flex styling in header.php, which
   previously won over Tailwind's .hidden class on narrow screens. These
   rules make the breakpoint ownership explicit and keep the opened mobile
   drawer pinned to the viewport instead of participating in page width.
   ================================================================ */
html,
body,
#page {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 1023.98px) {
  .waf-nav-ribbon-track,
  #waf-primary-menu {
    display: none !important;
  }

  .waf-header-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #site-navigation {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #waf-mobile-menu-toggle {
    display: inline-flex !important;
    flex: 0 0 auto;
  }

  #waf-mobile-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(52px + env(safe-area-inset-top, 0px)) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 9999 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: calc(100dvh - 52px - env(safe-area-inset-top, 0px)) !important;
  }

  #waf-mobile-menu.hidden {
    display: none !important;
  }

  #waf-mobile-menu:not(.hidden) {
    display: block !important;
  }

  #waf-primary-menu-mobile,
  #waf-primary-menu-mobile > li,
  #waf-primary-menu-mobile details,
  #waf-primary-menu-mobile .waf-mobile-clubs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #waf-primary-menu-mobile {
    margin: 0 !important;
    padding: 0 !important;
  }

  #waf-primary-menu-mobile a,
  #waf-primary-menu-mobile summary {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 1024px) {
  .waf-nav-ribbon-track { display: flex !important; }
  #waf-mobile-menu-toggle,
  #waf-mobile-menu { display: none !important; }
}

/* v2.1.10 static-page repair
 * Standard WordPress pages previously fell through to index.php and rendered
 * the full WAF news homepage. Give them a dedicated, fast, mobile-safe shell.
 */
.waf-static-page {
  width: 100%;
  padding: 34px 20px 10px;
  box-sizing: border-box;
}
.waf-static-page__shell {
  width: min(900px, 100%);
  margin: 0 auto;
}
.waf-static-page__article {
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 28px rgba(15,32,65,.06);
}
.waf-static-page__header {
  padding: 34px 40px 28px;
  border-bottom: 1px solid #e5e7eb;
}
.waf-static-page__eyebrow {
  margin: 0 0 7px;
  color: #9f1d2f;
  font-family: Oswald, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.waf-static-page__title {
  margin: 0;
  color: #0f2041;
  font-family: Anton, Oswald, Arial, sans-serif;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 400;
  line-height: 1.02;
  text-transform: uppercase;
}
.waf-static-page__rule {
  display: block;
  width: 74px;
  height: 4px;
  margin-top: 18px;
  background: #9f1d2f;
}
.waf-static-page__content {
  padding: 34px 40px 42px;
  color: #334155;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.waf-static-page__content > :first-child { margin-top: 0; }
.waf-static-page__content > :last-child { margin-bottom: 0; }
.waf-static-page__content p,
.waf-static-page__content ul,
.waf-static-page__content ol,
.waf-static-page__content blockquote,
.waf-static-page__content table,
.waf-static-page__content .wp-block-group {
  margin-top: 0;
  margin-bottom: 1.25rem;
}
.waf-static-page__content h2,
.waf-static-page__content h3,
.waf-static-page__content h4 {
  margin: 2rem 0 .75rem;
  color: #0f2041;
  font-family: Oswald, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.waf-static-page__content h2 { font-size: 1.6rem; }
.waf-static-page__content h3 { font-size: 1.25rem; }
.waf-static-page__content h4 { font-size: 1.05rem; }
.waf-static-page__content a {
  color: #9f1d2f;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.waf-static-page__content a:hover { color: #0f2041; }
.waf-static-page__content ul,
.waf-static-page__content ol { padding-left: 1.4rem; }
.waf-static-page__content li { margin-bottom: .45rem; }
.waf-static-page__content blockquote {
  padding: 16px 20px;
  border-left: 4px solid #9f1d2f;
  background: #f8fafc;
}
.waf-static-page__content img,
.waf-static-page__content iframe,
.waf-static-page__content video {
  max-width: 100%;
  height: auto;
}
.waf-static-page__content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.waf-static-page__content th,
.waf-static-page__content td {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  text-align: left;
}
.waf-static-page__content input:not([type="checkbox"]):not([type="radio"]),
.waf-static-page__content textarea,
.waf-static-page__content select {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 0;
  background: #fff;
  color: #0f172a;
  font: inherit;
  box-sizing: border-box;
}
.waf-static-page__content textarea { min-height: 150px; resize: vertical; }
.waf-static-page__content button,
.waf-static-page__content input[type="submit"],
.waf-static-page__content .wp-element-button,
.waf-static-page__content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: 0;
  background: #9f1d2f;
  color: #fff;
  font-family: Oswald, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.waf-static-page__content button:hover,
.waf-static-page__content input[type="submit"]:hover,
.waf-static-page__content .wp-element-button:hover,
.waf-static-page__content .wp-block-button__link:hover { background: #0f2041; color: #fff; }

@media (max-width: 640px) {
  .waf-static-page { padding: 18px 12px 0; }
  .waf-static-page__header { padding: 24px 20px 20px; }
  .waf-static-page__content { padding: 24px 20px 30px; font-size: 15px; line-height: 1.68; }
  .waf-static-page__content h2 { font-size: 1.35rem; }
  .waf-static-page__content h3 { font-size: 1.15rem; }
}


/* v2.1.11 We Are network cross-promotion. */
.waf-network-ad {
  margin: 0 0 2rem;
  max-width: 100%;
}
.waf-network-ad__eyebrow {
  display: block;
  margin: 0 0 .55rem;
  color: #6b7280;
  font-family: Oswald, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
}
.waf-network-ad > a,
.waf-network-ad img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0 !important;
  outline: 0;
  box-shadow: none !important;
  background: #000;
}
.waf-network-ad > a { overflow: hidden; text-decoration: none; }
.waf-network-ad img { transition: opacity .16s ease, transform .18s ease; }
.waf-network-ad > a:hover img { opacity: .94; transform: scale(1.008); }