/* ============================================================
   footballwa.net — site stylesheet (modern.css)
   Self-contained: no @import, no url(), no @font-face, no
   external assets. Loaded by index.htm via the relative
   reference <link rel="stylesheet" href="modern.css">, which
   resolves to whatever directory index.htm is served from.
   ============================================================ */

/* --- Design tokens --- */
:root {
  --color-bg: #f4f6f8;
  --color-surface: #ffffff;
  --color-text: #15202b;
  --color-text-muted: #4a5660;
  --color-border: #d8dee5;
  --color-primary: #0a2240;        /* deep navy */
  --color-primary-dark: #061635;
  --color-primary-light: #e6ebf3;
  --color-accent: #f5b32e;         /* warm gold */
  --color-accent-dark: #c98c00;
  --color-link: #0a4480;
  --color-link-visited: #4a3580;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --max-width: 1200px;
  --radius: 6px;
  --shadow-sm: 0 1px 2px rgba(10, 34, 64, 0.08);
  --shadow-md: 0 4px 12px rgba(10, 34, 64, 0.12);
  --transition: 160ms ease;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--color-link); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
a:visited { color: var(--color-link-visited); }

/* --- Skip link / a11y --- */
.skip-link {
  position: absolute;
  top: -100px; left: 12px;
  z-index: 9999;
  padding: 8px 14px;
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-weight: 700;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top var(--transition);
}
.skip-link:focus { top: 0; outline: 3px solid var(--color-primary); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  /* FootballWA black-and-gold: full-width gold band, framed top
     and bottom by dark-navy rules so the masthead reads as a
     branded panel rather than a flat colour wash. */
  background: var(--color-accent);
  color: var(--color-primary-dark);
  border-top: 4px solid var(--color-primary-dark);
  border-bottom: 4px solid var(--color-primary-dark);
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
.header-logo a { display: block; line-height: 0; }
.header-logo img {
  height: 96px;
  width: auto;
  background: var(--color-surface);
  padding: 4px;
  border: 1px solid var(--color-primary-dark);
  border-radius: var(--radius);
}
.header-sponsors {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.header-sponsor img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: var(--color-surface);
  border: 1px solid var(--color-primary-dark);
  border-radius: var(--radius);
  padding: 4px;
  transition: transform var(--transition);
}
.header-sponsor img:hover { transform: scale(1.04); }
.header-banner img {
  height: 96px;
  width: auto;
  border: 1px solid var(--color-primary-dark);
  border-radius: var(--radius);
}

/* ============================================================
   NAV
   ============================================================ */
.site-nav {
  /* FootballWA black-and-gold: gold band, separated from the gold
     header above by the header's own dark-navy border-bottom, and
     sealed against the page below by a 4 px dark-navy rule. */
  background: var(--color-accent);
  border-bottom: 4px solid var(--color-primary-dark);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-md);
}
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 8px;
  position: relative;
}
.nav-toggle { display: none; }
.nav-toggle-label {
  display: none;
  cursor: pointer;
  padding: 14px 8px;
  color: var(--color-primary-dark);
  font-weight: 700;
  user-select: none;
}
.nav-toggle-label .bars,
.nav-toggle-label .bars::before,
.nav-toggle-label .bars::after {
  display: block;
  width: 24px; height: 3px;
  background: var(--color-primary-dark);
  border-radius: 2px;
  position: relative;
  transition: transform var(--transition), top var(--transition);
}
.nav-toggle-label .bars::before { content: ""; position: absolute; top: -8px; }
.nav-toggle-label .bars::after  { content: ""; position: absolute; top: 8px; }
.nav-toggle:checked ~ .nav-toggle-label .bars { background: transparent; }
.nav-toggle:checked ~ .nav-toggle-label .bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle:checked ~ .nav-toggle-label .bars::after  { top: 0; transform: rotate(-45deg); }

.nav-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.nav-menu > li { position: relative; }
.nav-menu > li > a,
.nav-menu > li > span {
  display: block;
  padding: 14px 14px;
  color: var(--color-primary-dark);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.nav-menu > li > a:visited { color: var(--color-primary-dark); }
.nav-menu > li:hover > a,
.nav-menu > li:hover > span,
.nav-menu > li:focus-within > a,
.nav-menu > li:focus-within > span {
  background: var(--color-primary-dark);
  color: var(--color-surface);
}
.nav-menu > li.has-sub > a::after,
.nav-menu > li.has-sub > span::after {
  content: " \25BE";
  font-size: 0.8em;
  margin-left: 4px;
}

/* Submenus */
.nav-menu .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);
}
.nav-menu > li:hover > .submenu,
.nav-menu > li:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--transition), transform var(--transition), visibility 0s;
}
.nav-menu .submenu li a {
  display: block;
  padding: 10px 16px;
  color: var(--color-text);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--color-border);
  white-space: normal;
}
.nav-menu .submenu li:last-child a { border-bottom: none; }
.nav-menu .submenu li a:hover,
.nav-menu .submenu li a:focus {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  text-decoration: none;
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.site-main {
  max-width: var(--max-width);
  margin: 24px auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 24px;
  align-items: start;
}
.content-main { min-width: 0; }

/* Hero */
.hero {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.hero img {
  margin: 0 auto 12px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}
.hero figcaption {
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

/* Intro */
.intro {
  background: var(--color-surface);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.intro p { font-size: 0.96rem; line-height: 1.65; }

/* Search */
.search {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px 20px;
  margin-bottom: 20px;
}
.search form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.search input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 9px 12px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
}
.search input[type="text"]:focus {
  border-color: var(--color-accent);
  outline: none;
}
.search input[type="submit"] {
  padding: 9px 18px;
  background: var(--color-primary);
  color: var(--color-surface);
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
.search input[type="submit"]:hover {
  background: var(--color-accent);
  color: var(--color-primary-dark);
}
.search img { display: inline; height: 18px; vertical-align: middle; }

/* Callout */
.callout {
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin-bottom: 24px;
}
.callout h2 {
  font-size: 1.05rem;
  color: var(--color-primary-dark);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.callout p { font-size: 0.92rem; line-height: 1.65; margin-bottom: 8px; }
.callout p:last-child { margin-bottom: 0; }
.callout a { font-weight: 600; }

/* News articles */
.news-article {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  margin-bottom: 18px;
  border-left: 4px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.news-article:hover,
.news-article:focus-within {
  border-left-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}
.news-article .article-date {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-accent);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.news-article h2 {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--color-primary-dark);
  margin-bottom: 10px;
  line-height: 1.3;
}
.news-article p {
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 10px;
}
.news-article p:last-child { margin-bottom: 0; }
.news-article p.lineup {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
  margin-top: 14px;
  line-height: 1.55;
}

/* Anchor link offsetting under sticky nav (optional) */
.news-article { scroll-margin-top: 80px; }

/* ============================================================
   SIDEBAR (sponsors)
   On desktop and wide tablet (≥ 769 px) the sidebar is a plain
   right-hand column inside the page grid. It scrolls naturally
   with the rest of the page: no sticky positioning, no internal
   scrollbar, no viewport-height cap. When the reader scrolls past
   the supporter list and the weekly tips graphic, the column ends
   like any other page content. The parent grid uses
   `align-items: start`, so the column sits at the top of its track
   and takes its intrinsic height.
   Hidden at and below 768 px (see the mobile breakpoint); the
   `.mobile-priority-supporters` block carries the same content
   there.
   ============================================================ */
.sidebar-title {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  padding-bottom: 6px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--color-accent);
}
.sponsor-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sponsor-list a {
  display: block;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 6px;
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
}
.sponsor-list a:hover,
.sponsor-list a:focus {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.sponsor-list img {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}
.weekly-tips {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 6px;
  text-align: center;
}
.weekly-tips img { width: 100%; height: auto; max-width: 200px; margin: 0 auto; }

/* ============================================================
   SPONSOR-BREAK
   One unified panel that sits after every second article (after
   articles 2, 4, 6, 8, 10, 12, 14, 16, 18). Each panel surfaces
   four supporters as square cards.
   Card layout responds to width:
     - desktop and tablet (≥ 641 px): 4 across in a single row
     - phones        (≤ 640 px):       2 across in a 2×2 grid
   Cards are square (aspect-ratio: 1 / 1) so square logos
   (Macron, Cat Bryant) and landscape logos (Zettagrid, NPL Photos)
   both sit comfortably; logos are centred via object-fit and
   capped at ~80% of card edge so they never crowd the border.
   The 12 sponsors are distributed across 9 panels × 4 cards = 36
   slots using a sliding-window pattern. Panel p (1-indexed) starts
   at sponsor index s_p = (4·((p-1) mod 3) + (p-1) div 3) mod 12 and
   takes the next four sponsors (mod 12). Every supporter appears
   exactly three times and every panel is unique.
   No JavaScript, no randomisation. Visually subdued — gentle
   surface, accent rule above the logos — so it does not feel
   like a banner ad.
   ============================================================ */
.sponsor-break {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--color-accent);
  padding: 14px 16px 16px;
  margin: 4px 0 18px;
}
.sponsor-break-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: 12px;
}
.sponsor-break-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.sponsor-break-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;             /* allow grid columns to shrink below image width */
  aspect-ratio: 1 / 1;      /* square cards */
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.sponsor-break-row a:hover,
.sponsor-break-row a:focus {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.sponsor-break-row img {
  display: block;
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 80%;
  margin: 0 auto;
  object-fit: contain;
}

/* ============================================================
   MOBILE-PRIORITY-SUPPORTERS
   Phone-only block sitting between the hero and the intro.
   Surfaces the two main supporters (Macron + ID Athletic) and the
   weekly tips graphic, since the desktop sidebar is hidden on
   phones. Hidden on desktop and tablet (the sidebar covers the
   same supporters and tips graphic at those widths).
   Two equal square sponsor cards mirror the sponsor-break style;
   the weekly tips card is a single capped-width image.
   ============================================================ */
.mobile-priority-supporters { display: none; }
.mobile-priority-section {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--color-accent);
  padding: 14px 16px 16px;
  margin-bottom: 16px;
}
.mobile-priority-section:last-child { margin-bottom: 20px; }
.mobile-priority-heading {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: 12px;
}
.mobile-priority-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.mobile-priority-cards a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px;
  transition: box-shadow var(--transition);
}
.mobile-priority-cards a:hover,
.mobile-priority-cards a:focus {
  box-shadow: var(--shadow-md);
}
.mobile-priority-cards img {
  display: block;
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 80%;
  margin: 0 auto;
  object-fit: contain;
}
.mobile-priority-tips {
  text-align: center;
}
.mobile-priority-tips img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-primary-dark);
  color: #cdd5e0;
  margin-top: 40px;
  border-top: 4px solid var(--color-accent);
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 28px 16px;
  text-align: center;
}
.footer-inner p { font-size: 0.85rem; line-height: 1.7; margin-bottom: 8px; }
.footer-inner a { color: var(--color-accent); }
.footer-inner a:visited { color: var(--color-accent); }
.footer-counter {
  margin: 14px 0;
  font-size: 0.78rem;
  color: #95a4b8;
}
.footer-tracking { margin: 12px 0; }
.footer-meta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #243454;
  font-size: 0.78rem;
  color: #95a4b8;
}
.footer-meta p { margin-bottom: 4px; }

/* ============================================================
   RESPONSIVE — Tablet
   ============================================================ */
@media screen and (max-width: 1024px) {
  .site-main {
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 16px;
  }
  .header-logo img,
  .header-sponsor img,
  .header-banner img { height: 80px; width: auto; }
  .header-sponsor img { width: 80px; }
  .nav-menu > li > a,
  .nav-menu > li > span { padding: 14px 10px; font-size: 0.82rem; }
}

/* ============================================================
   RESPONSIVE — Mobile
   ============================================================ */
@media screen and (max-width: 768px) {
  .header-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 10px;
  }
  .header-logo img { height: 72px; margin: 0 auto; }
  .header-sponsors { display: none; }     /* header sponsor row hidden at this width; in-flow sponsor panels handle exposure */

  .nav-toggle-label { display: flex; align-items: center; }
  .nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    padding-bottom: 8px;
  }
  /* The .site-nav is position: sticky, so when the hamburger menu opens
     the entire .nav-menu is pinned with the nav. Without an internal
     cap the bottom items (Notices, Links, About footballwa) sit below
     the viewport with no way to reach them — page scrolling does not
     reveal them because the sticky nav stays put. Giving the open menu
     a max-height just under the viewport and overflow-y: auto makes the
     menu itself scroll, so every item is reachable on any phone size. */
  .nav-toggle:checked ~ .nav-menu {
    display: flex;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-menu > li > a,
  .nav-menu > li > span {
    padding: 12px 16px;
    font-size: 0.92rem;
    border-bottom: 1px solid rgba(10, 22, 53, 0.18);
  }
  .nav-menu .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: rgba(10, 22, 53, 0.08);
  }
  .nav-menu .submenu li a {
    color: var(--color-primary-dark);
    padding: 10px 28px;
    border-bottom: 1px solid rgba(10, 22, 53, 0.1);
    font-size: 0.86rem;
  }
  .nav-menu .submenu li a:hover,
  .nav-menu .submenu li a:focus {
    background: var(--color-primary-dark);
    color: var(--color-surface);
  }

  .site-main {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 14px;
  }
  .sidebar { display: none; }              /* hide right column at this width */
  /* The mobile priority block (Macron, ID Athletic, weekly tips) is
     revealed at the same width the sidebar is hidden, so the
     supporters and tips graphic stay visible without a 641–768 px
     gap. */
  .mobile-priority-supporters { display: block; }

  /* sponsor-break stays as the base 4-column grid here. The 2-column
     override for phones kicks in at the 640 px breakpoint below. */

  .news-article { padding: 16px 18px; }
  .news-article h2 { font-size: 1.02rem; }
  .news-article p { font-size: 0.9rem; line-height: 1.65; }
  .news-article p.lineup { font-size: 0.78rem; }

  .hero, .intro, .search, .callout { padding: 14px 16px; }
  .callout h2 { font-size: 1rem; }
}

/* ============================================================
   RESPONSIVE — Phones (≤ 640 px)
   The unified .sponsor-break panel still renders here, but its
   four cards reflow into a tidy 2 × 2 grid so two square cards
   sit side-by-side on phone widths instead of four squashed
   thumbnails on a single line. The cards stay square, so each
   block is compact in vertical space.
   ============================================================ */
@media screen and (max-width: 640px) {
  .sponsor-break {
    padding: 12px 14px 14px;
    margin-bottom: 16px;
  }
  .sponsor-break-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* ============================================================
   RESPONSIVE — Small phones (≤ 480 px)
   ============================================================ */
@media screen and (max-width: 480px) {
  .header-logo img { height: 60px; }
  .nav-menu > li > a,
  .nav-menu > li > span { padding: 11px 14px; font-size: 0.88rem; }
  .news-article { padding: 14px 16px; }

  .sponsor-break { padding: 10px 12px 12px; margin-bottom: 14px; }
  .sponsor-break-row { gap: 8px; }
  .sponsor-break-row a { padding: 8px; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .site-nav, .site-header .header-sponsors, .sidebar,
  .sponsor-break, .mobile-priority-supporters,
  .search, .footer-tracking, .footer-counter {
    display: none !important;
  }
  body { background: #fff; }
  .news-article { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
}