/*
Theme Name: Ellenborough TTC
Theme URI: https://ettc.club
Author: Ellenborough Table Tennis Club
Author URI: https://ettc.club
Description: Custom theme for Ellenborough Table Tennis Club, styled to match the club's TV wallboard — royal blue background, rounded light-blue cards, red accent, Baloo 2 headings.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ettc-wallboard
*/
:root{
    --blue:#4361ee;
    --blue-deep:#2c3aa0;
    --blue-mid:#3850d6;
    --card:#7fc8ec;
    --card-2:#8fd0ee;
    --red:#ef3f4e;
    --white:#ffffff;
    --ink:#10142b;
    --grey:#9aa3c9;
    --muted: rgba(255,255,255,.86);
    --muted-2: rgba(255,255,255,.65);
    --radius: 18px;
    --maxw: 1180px;
    --font-head: 'Baloo 2', 'Arial Rounded MT Bold', 'Segoe UI', sans-serif;
    --font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  }
  :root:not([data-theme="light"]){
    /* page is a single branded blue theme — keep consistent under OS dark mode */
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --blue:#3a51d8;
      --blue-deep:#232f8c;
    }
  }
  :root[data-theme="dark"]{
    --blue:#3a51d8;
    --blue-deep:#232f8c;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background: var(--blue);
    background-attachment: fixed;
    font-family: var(--font-body);
    color: var(--white);
    -webkit-font-smoothing: antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  @media (max-width:600px){ .wrap{padding:0 18px;} }
  h1,h2,h3{font-family:var(--font-head); font-weight:800; margin:0; line-height:1.05;}
  p{line-height:1.6;}

  /* ---------- Skip link ---------- */
  .skip-link{position:absolute; left:-999px; top:0; background:var(--white); color:var(--ink); padding:10px 16px; border-radius:0 0 10px 0; z-index:200;}
  .skip-link:focus{left:0;}

  /* ---------- Nav ---------- */
  header.site-nav{
    position: sticky; top:0; z-index:100;
    background: rgba(67,97,238,.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .nav-inner{
    max-width:var(--maxw); margin:0 auto; padding:14px 28px;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
  }
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0;}
  .brand-logo{width:42px; height:42px; object-fit:contain; flex:none;}
  .brand-name{font-family:var(--font-head); font-weight:700; font-size:18px; color:var(--white); letter-spacing:.2px; white-space:nowrap;}
  .brand-name small{display:block; font-family:var(--font-body); font-weight:600; font-size:11px; color:var(--muted-2); letter-spacing:.6px;}

  .nav-right{display:flex; align-items:center; gap:16px; flex:none;}
  .sponsor-badge{display:flex; align-items:center; gap:9px; text-decoration:none; padding:6px 10px; border-radius:10px; background:rgba(255,255,255,.08);}
  .sponsor-badge:hover{background:rgba(255,255,255,.16);}
  .sponsor-text{font-size:11.5px; font-weight:700; color:var(--muted-2); white-space:nowrap; letter-spacing:.2px;}
  .sponsor-logo{height:26px; width:auto; flex:none; background:#fff; border-radius:6px; padding:3px 6px;}

  nav.links{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
  nav.links a{
    font-weight:700; font-size:14.5px; text-decoration:none; color:var(--muted);
    padding:6px 2px; border-bottom:2px solid transparent;
  }
  nav.links a:hover, nav.links a:focus-visible{color:var(--white); border-bottom-color:var(--red);}

  .socials{display:flex; gap:10px; align-items:center;}
  .socials a{
    width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center; text-decoration:none;
    color:var(--white); flex:none;
  }
  .socials a:hover{background:var(--red);}
  .socials svg{width:16px; height:16px; fill:currentColor;}

  .nav-toggle{display:none; background:none; border:0; color:var(--white); cursor:pointer; padding:6px;}
  .nav-toggle svg{width:26px; height:26px; fill:currentColor;}

  @media (max-width: 980px){
    nav.links{
      position:fixed; inset:64px 0 0 0; background:var(--blue);
      flex-direction:column; align-items:flex-start; gap:2px; padding:18px 28px;
      transform:translateX(100%); transition:transform .25s ease; overflow-y:auto;
    }
    nav.links.open{transform:translateX(0);}
    nav.links a{width:100%; padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.08); font-size:17px;}
    .nav-toggle{display:block;}
    .socials{display:none;}
    nav.links .socials{display:flex; margin-top:14px;}
  }
  @media (max-width: 700px){
    .sponsor-text{display:none;}
    .sponsor-badge{padding:5px 7px;}
    .sponsor-logo{height:22px;}
  }
  @media (max-width: 480px){
    .brand-name small{display:none;}
    .brand-name{font-size:15px;}
    .brand-logo{width:34px; height:34px;}
    .nav-inner{padding:12px 16px; gap:10px;}
    .sponsor-logo{height:19px;}
  }

  /* ---------- Section shell ---------- */
  section{padding:80px 0;}
  @media (max-width:700px){ section{padding:52px 0;} }
  .eyebrow-heading{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
  .dot{
    width:16px; height:16px; border-radius:50%; background:var(--red); flex:none;
    box-shadow: 0 0 0 8px rgba(239,63,78,.18);
  }
  .section-intro{color:var(--muted); font-size:18px; max-width:60ch; margin:0 0 40px;}
  .section-head h2{font-size:clamp(30px,4vw,44px); color:var(--white);}

  .card{
    background: linear-gradient(160deg, var(--card), var(--card-2));
    border-radius: var(--radius);
    padding:28px;
    color: var(--white);
  }
  .card h3, .card h4{color:var(--white);}
  .card .role{color:var(--red); font-weight:700;}
  .card .meta{color: rgba(15,18,43,.75); font-size:14px;}

  /* ---------- Hero ---------- */
  .hero{padding-top: calc(56px + 5mm);}
  .anniversary-badge{text-align:center; margin-bottom:18px;}
  .anniversary-badge img{width:118px; height:auto; margin:0 auto; display:inline-block;}
  @media (max-width:600px){ .anniversary-badge img{width:88px;} }
  .hero-frame{
    border-radius: 22px; overflow:hidden; aspect-ratio: 16/6; margin-bottom:44px;
    background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.16), transparent 55%),
                repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px),
                linear-gradient(120deg, var(--blue-deep), var(--blue));
    position:relative;
    display:flex; align-items:center; justify-content:center;
  }
  .hero-frame .ball{
    position:absolute; width:64px; height:64px; border-radius:50%;
    background: radial-gradient(circle at 35% 30%, #fff, #e7ecff 60%, #c6cffb 100%);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  }
  .hero-frame .ball.b1{top:18%; left:12%;}
  .hero-frame .ball.b2{bottom:14%; right:16%; width:40px; height:40px; opacity:.85;}
  .hero-frame .ball.b3{top:50%; right:38%; width:26px; height:26px; opacity:.6;}
  .hero-frame .frame-label{
    color: rgba(255,255,255,.55); font-weight:700; font-size:14px; letter-spacing:.4px;
    background: rgba(0,0,0,.18); padding:8px 16px; border-radius:999px;
  }
  .hero-frame img{width:100%; height:100%; object-fit:cover; display:block;}

  .hero h1{
    font-size:clamp(32px,9vw,88px);
    background: linear-gradient(90deg, var(--white) 0%, var(--white) 30%, var(--grey) 55%, var(--ink) 85%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero-sub{font-size:22px; font-weight:700; margin:18px 0 4px; color:var(--white);}
  .hero-copy{max-width:62ch; font-size:18px; color:var(--muted); margin:14px 0 28px;}
  .hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:34px;}
  .btn{
    font-family:var(--font-head); font-weight:700; font-size:16px; text-decoration:none;
    padding:14px 26px; border-radius:999px; display:inline-block;
  }
  .btn-primary{background:var(--red); color:var(--white);}
  .btn-primary:hover{background:#d8303e;}
  .btn-ghost{background:rgba(255,255,255,.1); color:var(--white); border:1px solid rgba(255,255,255,.35);}
  .btn-ghost:hover{background:rgba(255,255,255,.18);}

  .hero-facts{
    display:flex; flex-wrap:wrap; gap:10px 26px; color:var(--muted-2); font-size:14.5px; font-weight:600;
  }
  .hero-facts span{white-space:nowrap;}
  .hero-facts a{color:var(--muted-2); text-decoration:underline;}

  /* ---------- Grids ---------- */
  .grid{display:grid; gap:22px;}
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-2{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(4,1fr);}
  @media (max-width:900px){
    .grid-3{grid-template-columns:repeat(2,1fr);}
    .grid-4{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:600px){
    .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}
  }

  /* ---------- Person card ---------- */
  .person{
    background: linear-gradient(160deg, var(--card), var(--card-2));
    border-radius:16px; padding:22px; text-align:left;
  }
  .avatar{
    width:64px; height:64px; border-radius:14px; margin-bottom:14px;
    background: var(--blue-deep);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-head); font-weight:800; font-size:22px; color:var(--white);
    border:2px solid var(--red);
  }
  .person-photo{
    width:100%; aspect-ratio: 2/3; object-fit:cover; object-position:top center;
    border-radius:12px; margin-bottom:14px; border:2px solid var(--red);
    background:var(--blue-deep);
  }
  .person h4{font-size:18px; margin-bottom:4px;}
  .person .role{display:block; margin-bottom:8px; font-size:14px;}
  .person .contact{font-size:14px; color:rgba(15,18,43,.85);}
  .person .contact a{color:var(--blue-deep); font-weight:700; text-decoration:none;}
  .person .contact a:hover{text-decoration:underline;}
  .photo-note{font-size:13px; color:var(--muted-2); margin-top:6px;}

  /* ---------- About ---------- */
  .about-columns{display:grid; grid-template-columns: 1.1fr .9fr; gap:36px; align-items:start;}
  @media (max-width:880px){.about-columns{grid-template-columns:1fr;}}
  .highlight-list{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:12px;}
  .highlight-list li{
    background:rgba(255,255,255,.08); border-left:3px solid var(--red);
    padding:12px 16px; border-radius:8px; font-size:15px; color:var(--muted);
  }
  .notice{
    background:rgba(239,63,78,.14); border:1px solid rgba(239,63,78,.4);
    border-radius:14px; padding:20px 22px; font-size:14.5px; color:var(--muted); margin-top:24px;
  }
  .notice strong{color:var(--white); display:block; margin-bottom:6px; font-size:15px;}

  .subhead{font-family:var(--font-head); font-weight:700; font-size:24px; margin:52px 0 6px;}
  .subhead-sub{color:var(--muted); font-size:15px; margin:0 0 22px;}

  .honor-card ul{list-style:none; margin:0; padding:0;}
  .honor-card li{padding:9px 0; border-bottom:1px solid rgba(15,18,43,.15); font-size:15px;}
  .honor-card li:last-child{border-bottom:none;}
  .honor-card h4{margin-bottom:4px;}

  /* ---------- Membership table ---------- */
  .fee-table{width:100%; border-collapse:collapse; margin-top:10px;}
  .fee-table tr{border-bottom:1px solid rgba(255,255,255,.14);}
  .fee-table tr:last-child{border-bottom:none;}
  .fee-table td{padding:16px 6px; font-size:16px;}
  .fee-table td:last-child{text-align:right; font-weight:800; font-family:var(--font-head); font-size:17px;}
  .fee-note{margin-top:26px; color:var(--muted); font-size:15px; max-width:65ch;}

  /* ---------- Competitions ---------- */
  .comp-card{
    background: linear-gradient(160deg, var(--card), var(--card-2));
    border-radius:16px; padding:24px 26px; border-left:5px solid var(--red);
  }
  .comp-card h4{font-size:20px; margin-bottom:4px;}
  .comp-card .when{font-size:14px; font-weight:700; color:rgba(15,18,43,.7); margin-bottom:10px;}
  .comp-card p{font-size:14.5px; color:rgba(15,18,43,.9); margin:0;}

  /* ---------- News ---------- */
  .news-card{
    background: linear-gradient(160deg, var(--card), var(--card-2));
    border-radius:18px; padding:30px; border-left:5px solid var(--red);
  }
  .news-card .date{font-weight:700; font-size:14px; color:rgba(15,18,43,.75); margin-bottom:12px;}
  .news-card p{font-size:15px; color:rgba(15,18,43,.92); margin:0;}

  /* ---------- Policies ---------- */
  .policy-list{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
  .policy-list li{
    background:rgba(255,255,255,.08); border-radius:12px; padding:16px 20px;
    display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  }
  .policy-list .name{font-weight:700; font-size:15.5px;}
  .policy-list .status{font-size:13px; color:var(--muted-2);}
  .policy-list a.doc-link{
    font-size:13.5px; font-weight:700; color:var(--white); background:rgba(255,255,255,.14);
    padding:8px 14px; border-radius:999px; text-decoration:none; white-space:nowrap;
  }
  .policy-list a.doc-link:hover{background:var(--red);}

  /* ---------- Useful links ---------- */
  .link-card{
    background:rgba(255,255,255,.08); border-radius:14px; padding:20px 22px;
    text-decoration:none; display:block; border:1px solid rgba(255,255,255,.14);
  }
  .link-card:hover{background:rgba(255,255,255,.15); border-color:var(--red);}
  .link-card .kicker{font-size:12.5px; font-weight:800; letter-spacing:.4px; color:var(--red); margin-bottom:6px;}
  .link-card h4{font-size:17px; margin-bottom:4px; color:var(--white);}
  .link-card p{font-size:13.5px; color:var(--muted-2); margin:0;}

  /* ---------- Contact / footer ---------- */
  footer{background:var(--blue); padding:70px 0 34px; border-top:1px solid rgba(255,255,255,.1);}
  .footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:44px;}
  @media (max-width:820px){.footer-grid{grid-template-columns:1fr; gap:32px;}}
  .footer-grid h4{font-family:var(--font-head); font-size:16px; margin-bottom:14px; color:var(--white);}
  .footer-grid p, .footer-grid li{color:var(--muted); font-size:14.5px; line-height:1.8;}
  .footer-grid ul{list-style:none; margin:0; padding:0;}
  .footer-grid a{text-decoration:none; color:var(--muted);}
  .footer-grid a:hover{color:var(--white); text-decoration:underline;}
  .sponsor-line{
    text-align:center; margin-top:54px; padding-top:28px; border-top:1px solid rgba(255,255,255,.1);
    color:var(--muted-2); font-size:14px;
  }
  .sponsor-line a{color:var(--muted); font-weight:700; text-decoration:none;}
  .sponsor-line a:hover{text-decoration:underline;}
  .fine-print{text-align:center; color:var(--muted-2); font-size:12.5px; margin-top:14px;}

  ::selection{background:var(--red); color:var(--white);}
  :focus-visible{outline:3px solid var(--red); outline-offset:2px;}

/* active nav state (multi-page) */
nav.links a.active{color:var(--white); border-bottom-color:var(--red);}