/* ════════════════════════════════════════════
   SEDGEMOOR SKITTLES LEAGUE
   Main Stylesheet
   ════════════════════════════════════════════ */

   @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300&family=DM+Mono:wght@400;500&display=swap');

   :root {
       --cream:      #F5F0E8;
       --dark:       #1A1A18;
       --green:      #2D5A27;
       --green-light:#3D7A35;
       --gold:       #C4922A;
       --gold-light: #E8B84B;
       --rust:       #8B3A2A;
       --mid:        #6B6456;
       --border:     #D4CCB8;
       --card-bg:    #FDFAF4;
   }
   
   * { margin: 0; padding: 0; box-sizing: border-box; }
   
   body {
       background: var(--cream);
       color: var(--dark);
       font-family: 'Source Serif 4', Georgia, serif;
       font-size: 16px;
       line-height: 1.6;
   }
   
   /* ── HEADER ── */
   header {
       background: var(--green);
       color: var(--cream);
       position: sticky;
       top: 0;
       z-index: 100;
       box-shadow: 0 2px 12px rgba(0,0,0,0.3);
   }
   
   .header-inner {
       max-width: 1100px;
       margin: 0 auto;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0 1.5rem;
       height: 64px;
   }
   
   .logo {
       display: flex;
       flex-direction: column;
       line-height: 1;
       text-decoration: none;
   }
   
   .logo-main {
       font-family: 'Bebas Neue', sans-serif;
       font-size: 1.8rem;
       letter-spacing: 0.05em;
       color: var(--gold-light);
   }
   
   .logo-sub {
       font-family: 'DM Mono', monospace;
       font-size: 0.62rem;
       letter-spacing: 0.2em;
       text-transform: uppercase;
       color: rgba(245,240,232,0.6);
   }
   
   /* ── NAV ── */
   nav {
       display: flex;
       gap: 0.25rem;
   }
   
   nav a {
       color: rgba(245,240,232,0.85);
       text-decoration: none;
       font-family: 'DM Mono', monospace;
       font-size: 0.7rem;
       letter-spacing: 0.12em;
       text-transform: uppercase;
       padding: 0.5rem 0.75rem;
       border-radius: 3px;
       transition: all 0.15s;
   }
   
   nav a:hover, nav a.active {
       background: rgba(255,255,255,0.12);
       color: var(--gold-light);
   }
   
   /* ── HAMBURGER ── */
   .hamburger {
       display: none;
       flex-direction: column;
       gap: 5px;
       cursor: pointer;
       padding: 8px;
       margin-right: -8px;
   }
   
   .hamburger span {
       width: 26px;
       height: 2px;
       background: var(--cream);
       display: block;
       transition: all 0.3s;
   }
   
   /* ── MOBILE NAV ── */
   .mobile-nav {
       display: none;
       background: var(--dark);
       padding: 0.5rem 0;
   }
   
   .mobile-nav.open { display: block; }
   
   .mobile-nav a {
       display: block;
       color: var(--cream);
       text-decoration: none;
       font-family: 'DM Mono', monospace;
       font-size: 0.85rem;
       letter-spacing: 0.12em;
       text-transform: uppercase;
       padding: 1rem 1.5rem;
       border-bottom: 1px solid rgba(255,255,255,0.08);
   }
   
   .mobile-nav a:active {
       background: rgba(255,255,255,0.08);
   }
   
   @media (max-width: 700px) {
       nav { display: none; }
       .hamburger { display: flex; }
       .header-inner { height: 72px; }
       .logo-main { font-size: 2rem; }
       .logo-sub { font-size: 0.65rem; }
   }
   
   /* ── HERO ── */
   .hero {
       background: var(--dark);
       background-image: repeating-linear-gradient(
           45deg,
           transparent,
           transparent 40px,
           rgba(196,146,42,0.03) 40px,
           rgba(196,146,42,0.03) 80px
       );
       padding: 3rem 1.5rem;
       text-align: center;
       border-bottom: 3px solid var(--gold);
   }
   
   .hero h1 {
       font-family: 'Bebas Neue', sans-serif;
       font-size: clamp(3rem, 8vw, 6rem);
       letter-spacing: 0.04em;
       color: var(--cream);
       line-height: 0.95;
   }
   
   .hero h1 span {
       color: var(--gold-light);
       display: block;
   }
   
   .hero-meta {
       font-family: 'DM Mono', monospace;
       font-size: 0.7rem;
       letter-spacing: 0.2em;
       text-transform: uppercase;
       color: var(--mid);
       margin-top: 1rem;
   }
   
   /* ── PAGE HEADER ── */
   .page-header {
       background: var(--dark);
       padding: 2rem 1.5rem;
       border-bottom: 3px solid var(--gold);
   }
   
   .page-header h1 {
       font-family: 'Bebas Neue', sans-serif;
       font-size: clamp(2rem, 5vw, 3.5rem);
       color: var(--cream);
       letter-spacing: 0.04em;
       max-width: 1100px;
       margin: 0 auto;
   }
   
   .page-header h1 span {
       color: var(--gold-light);
   }
   
   /* ── LAYOUT ── */
   .container {
       max-width: 1100px;
       margin: 0 auto;
       padding: 2rem 1.5rem;
   }
   
   /* ── SECTION HEADER ── */
   .section-header {
       display: flex;
       align-items: baseline;
       gap: 1rem;
       margin-bottom: 1.25rem;
       border-bottom: 2px solid var(--border);
       padding-bottom: 0.75rem;
   }
   
   .section-title {
       font-family: 'Bebas Neue', sans-serif;
       font-size: 2rem;
       letter-spacing: 0.04em;
       color: var(--green);
   }
   
   .section-sub {
       font-family: 'DM Mono', monospace;
       font-size: 0.65rem;
       letter-spacing: 0.15em;
       text-transform: uppercase;
       color: var(--mid);
   }
   
   /* ── NOTICEBOARD ── */
   .notice-box {
       background: var(--card-bg);
       border: 1px solid var(--border);
       border-left: 4px solid var(--gold);
       padding: 1.25rem 1.5rem;
       margin-bottom: 0.75rem;
       border-radius: 0 4px 4px 0;
   }
   
   .notice-box.green { border-left-color: var(--green); }
   .notice-box.rust  { border-left-color: var(--rust); }
   
   .notice-label {
       font-family: 'DM Mono', monospace;
       font-size: 0.62rem;
       letter-spacing: 0.2em;
       text-transform: uppercase;
       color: var(--gold);
       margin-bottom: 0.4rem;
   }
   
   .notice-box.green .notice-label { color: var(--green); }
   .notice-box.rust  .notice-label { color: var(--rust); }
   
   .notice-box p {
       color: var(--dark);
       font-size: 0.95rem;
   }
   
   /* ── TABLE GRID ── */
   .tables-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 2rem;
   }
   
   @media (max-width: 800px) {
       .tables-grid { grid-template-columns: 1fr; }
   }
   
   /* ── TABLE CARD ── */
   .table-card {
       background: var(--card-bg);
       border: 1px solid var(--border);
       border-radius: 6px;
       overflow: hidden;
       margin-bottom: 2rem;
   }
   
   .table-card-header {
       background: var(--green);
       color: var(--cream);
       padding: 0.75rem 1rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .table-card-header h3 {
       font-family: 'Bebas Neue', sans-serif;
       font-size: 1.2rem;
       letter-spacing: 0.05em;
   }
   
   .division-badge {
       font-family: 'DM Mono', monospace;
       font-size: 0.6rem;
       letter-spacing: 0.15em;
       text-transform: uppercase;
       background: var(--gold);
       color: var(--dark);
       padding: 0.2rem 0.5rem;
       border-radius: 2px;
   }
   
   /* ── TABLES ── */
   .table-wrap {
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
   }
   
   table {
       width: 100%;
       border-collapse: collapse;
       font-size: 0.875rem;
   }
   
   thead tr {
       background: var(--dark);
       color: var(--gold-light);
   }
   
   thead th {
       font-family: 'DM Mono', monospace;
       font-size: 0.6rem;
       letter-spacing: 0.15em;
       text-transform: uppercase;
       padding: 0.6rem 0.75rem;
       text-align: left;
       white-space: nowrap;
   }
   
   thead th.num { text-align: right; }
   
   tbody tr {
       border-bottom: 1px solid var(--border);
       transition: background 0.1s;
   }
   
   tbody tr:hover { background: rgba(45,90,39,0.05); }
   tbody tr:first-child td { font-weight: 600; }
   
   tbody tr:nth-child(1) .pos { color: var(--gold); }
   tbody tr:nth-child(2) .pos { color: var(--mid); }
   tbody tr:nth-child(3) .pos { color: #A07850; }
   
   td { padding: 0.65rem 0.75rem; color: var(--dark); }
   
   td.num {
       text-align: right;
       font-family: 'DM Mono', monospace;
       font-size: 0.8rem;
   }
   
   td.pos {
       font-family: 'DM Mono', monospace;
       font-size: 0.75rem;
       font-weight: 500;
       width: 2rem;
       text-align: center;
   }
   
   td.pts {
       font-family: 'DM Mono', monospace;
       font-weight: 700;
       font-size: 0.9rem;
       color: var(--green);
       text-align: right;
   }
   
   td.team-name { font-weight: 600; }
   
   td.score {
       font-family: 'DM Mono', monospace;
       font-weight: 700;
       font-size: 0.9rem;
       text-align: center;
       color: var(--green);
   }
   
   .result-W { color: var(--green-light); font-weight: 700; }
   .result-L { color: var(--rust); }
   .result-D { color: var(--mid); }
   
   /* ── MOBILE CARD VIEW ── */
   @media (max-width: 500px) {
       .table-wrap { overflow: visible; }
   
       table thead { display: none; }
   
       table tbody tr {
           display: flex;
           flex-wrap: wrap;
           padding: 0.75rem;
           gap: 0.4rem;
           border-bottom: 1px solid var(--border);
           position: relative;
       }
   
       table tbody td { padding: 0; border: none; }
   
       table tbody td.pos {
           position: absolute;
           top: 0.75rem;
           left: 0.75rem;
           font-size: 0.7rem;
           background: var(--dark);
           color: var(--cream);
           width: 1.4rem;
           height: 1.4rem;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 2px;
       }
   
       table tbody td.team-name {
           width: 100%;
           padding-left: 2rem;
           font-size: 0.95rem;
       }
   
       table tbody td.num {
           text-align: left;
           font-size: 0.72rem;
           background: rgba(0,0,0,0.04);
           border-radius: 3px;
           padding: 0.2rem 0.5rem;
       }
   
       table tbody td.num::before {
           content: attr(data-label) ' ';
           font-size: 0.55rem;
           text-transform: uppercase;
           letter-spacing: 0.1em;
           color: var(--mid);
           display: block;
       }
   
       table tbody td.pts {
           text-align: left;
           background: var(--green);
           color: var(--cream) !important;
           border-radius: 3px;
           padding: 0.2rem 0.6rem;
           font-size: 0.8rem;
       }
   
       table tbody td.pts::before {
           content: 'Pts ';
           font-size: 0.55rem;
           text-transform: uppercase;
           letter-spacing: 0.1em;
           color: rgba(245,240,232,0.6);
           display: block;
       }
   }
   
   /* ── LOADING / STATUS ── */
   .table-status {
       padding: 2rem;
       text-align: center;
       font-family: 'DM Mono', monospace;
       font-size: 0.75rem;
       letter-spacing: 0.1em;
       color: var(--mid);
   }
   
   .table-status.error { color: var(--rust); }
   
   /* ── UPDATED BADGE ── */
   .updated {
       font-family: 'DM Mono', monospace;
       font-size: 0.62rem;
       letter-spacing: 0.15em;
       color: var(--mid);
       text-align: right;
       padding: 0.5rem 1rem;
       border-top: 1px solid var(--border);
   }
   
   /* ── STATIC CONTENT (rules, history) ── */
   .content-body {
       max-width: 800px;
   }
   
   .content-body h2 {
       font-family: 'Bebas Neue', sans-serif;
       font-size: 1.5rem;
       color: var(--green);
       letter-spacing: 0.04em;
       margin: 2rem 0 0.5rem;
       border-bottom: 1px solid var(--border);
       padding-bottom: 0.5rem;
   }
   
   .content-body h3 {
       font-family: 'DM Mono', monospace;
       font-size: 0.8rem;
       letter-spacing: 0.15em;
       text-transform: uppercase;
       color: var(--gold);
       margin: 1.5rem 0 0.5rem;
   }
   
   .content-body p {
       margin-bottom: 1rem;
       font-size: 0.95rem;
       color: var(--dark);
   }
   
   .content-body ul {
       margin: 0 0 1rem 1.5rem;
       font-size: 0.95rem;
   }
   
   .content-body li { margin-bottom: 0.4rem; }
   
   /* ── FOOTER ── */
   footer {
       background: var(--dark);
       color: rgba(245,240,232,0.4);
       text-align: center;
       padding: 2rem;
       font-family: 'DM Mono', monospace;
       font-size: 0.65rem;
       letter-spacing: 0.15em;
       margin-top: 3rem;
   }
   
   footer span { color: var(--gold); }
   footer a {
       color: rgba(245,240,232,0.4);
       text-decoration: none;
   }
   footer a:hover { color: var(--gold-light); }