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