/* Rivertown FC — light theme inspired by wvi.org */
:root{
  --bg: #ffffff;
  --bg-alt: #f7f7f7;
  --text: #1a1a1a;
  --muted: #5c6975;
  --primary: #ff7a00; /* orange accent */
  --primary-dark: #e86f00;
  --card: #ffffff;
  --border: #e6e6e6;
  --shadow: 0 8px 24px rgba(0,0,0,0.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: var(--bg);
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1120px, 92%); margin-inline:auto; padding-inline: clamp(12px, 3.5vw, 24px)}

/* Header */
.site-header{position:sticky; top:0; z-index:100; background:var(--primary); border-bottom:1px solid color-mix(in srgb, var(--primary) 80%, #0000); box-shadow: 0 1px 0 rgba(0,0,0,0.02)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:0.3px; color:#fff}
.brand .logo{height:32px; width:auto; display:block}
.brand .brand-text{font-family: Montserrat, Inter, system-ui, sans-serif; font-weight:800}
.site-nav{display:flex; gap:4px 10px; align-items:center}
.site-nav a{padding:10px 12px; border-radius:8px; color:#fff}
.site-nav a:hover{background:rgba(255,255,255,0.12); color:#fff}
.site-nav .cta{background:#fff; color:var(--primary); font-weight:700}
.nav-toggle{display:none; background:none; border:none; color:#fff; font-size:22px}

@media (max-width: 760px){
  .nav-toggle{display:block}
  .site-nav{position:fixed; inset:60px 0 auto 0; background:rgba(255,255,255,0.98); border-bottom:1px solid var(--border); padding:10px 16px; transform: translateY(-120%); transition: transform .25s ease; flex-direction:column; align-items:flex-start}
  body.nav-open .site-nav{transform: translateY(0)}
}

/* Hero: full-bleed with overlay */
/*.hero{position:relative; min-height:58vh; display:flex; align-items:center; color:#fff; background: url('https://images.unsplash.com/photo-1588072432836-e10032774350?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;}*/
/*.hero{position:relative; min-height:58vh; display:flex; align-items:center; color:#fff; background: url('./update-section-pictures/pic5.png') center/cover no-repeat;}*/
.hero{position:relative; min-height:58vh; display:flex; align-items:center; color:#fff; background: url('./landing-page/pic1.png') center/cover no-repeat;}
.hero::before{content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.25));}
.hero-inner{position:relative; z-index:1; width:100%; padding-block: clamp(32px, 8vw, 64px)}
.hero-inner{display:grid; grid-template-columns: 1fr; gap:24px}
.hero .hero-text{max-width:720px}
.hero h1{font-family: Montserrat, Inter, system-ui, sans-serif; font-weight:800; line-height:1.05; font-size: clamp(30px, 5vw, 60px); margin:0 0 12px}
.hero p{color:#f0f3f7; margin:0 0 20px; font-size: clamp(16px, 1.8vw, 18px)}
.hero-art{display:none}
.hero-actions{display:flex; gap:12px}

/* Sections */
/* Use a soft, accessible orange background for content sections */
.section{padding:64px 0; background: #fff4e8}
.section.alt{background: #ffefe0}
.section-title{font-family: Montserrat, Inter, system-ui, sans-serif; font-weight:800; margin:0 0 20px; font-size: clamp(22px, 3.2vw, 34px); color: var(--primary)}

/* Buttons */
.btn{display:inline-block; padding:12px 18px; border:1px solid var(--border); color:#111; border-radius:999px; transition: transform .06s ease, background .2s ease, color .2s ease, box-shadow .2s ease; background:#fff}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow)}
.btn.primary{background:var(--primary); color:#fff; border-color: transparent; font-weight:700}
.btn.primary:hover{background: var(--primary-dark)}
.btn.small{padding:8px 12px; font-size:14px}

/* Cards/News */
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px}
.card{background: var(--card); border:1px solid var(--border); padding:18px; border-radius:16px; box-shadow: var(--shadow)}
.card h3{margin:4px 0 8px; font-size:18px}
.card p{margin:0 0 10px; color:var(--muted)}
.card time{font-size:12px; color:#7c8794}
@media (max-width: 900px){ .cards{grid-template-columns:1fr 1fr} }
@media (max-width: 600px){ .cards{grid-template-columns:1fr} }

/* Roster */
.roster{display:grid; grid-template-columns: repeat(2, 1fr); gap:16px}
.player{display:flex; align-items:center; gap:12px; background: var(--card); border:1px solid var(--border); padding:14px; border-radius:14px; box-shadow: var(--shadow)}
.player .number{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:10px; background:var(--primary); color:#fff; font-weight:800}
.player h3{margin:0}
.player p{margin:2px 0 0; color:var(--muted)}
@media (max-width: 700px){ .roster{grid-template-columns:1fr} }

/* Fixtures */
.fixtures{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.fixtures li{display:grid; grid-template-columns: 140px 1fr 1fr auto; gap:12px; align-items:center; background: var(--card); border:1px solid var(--border); padding:14px; border-radius:14px; box-shadow: var(--shadow)}
.fixture-date{color:#7c8794}
.fixture-venue{color:var(--muted)}
@media (max-width: 800px){ .fixtures li{grid-template-columns: 1fr; align-items:start} }

/* About */
.two-col{display:grid; grid-template-columns: 1.1fr 1fr; gap:28px; align-items:center}
.about-art{height:240px; border-radius:16px; border:1px solid var(--border); background:url('./update-section-pictures/pic8.jpg') center/cover; box-shadow: var(--shadow)}
.values{display:flex; gap:10px; flex-wrap:wrap; padding:0; margin:14px 0 0; list-style:none}
.values li{padding:8px 12px; background:#fff; border:1px solid var(--border); border-radius:999px}
@media (max-width: 900px){ .two-col{grid-template-columns:1fr} }

/* Contact */
.contact-form{background: var(--card); border:1px solid var(--border); padding:16px; border-radius:16px; box-shadow: var(--shadow)}
.contact-form .grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.contact-form label{display:grid; gap:6px}
.contact-form input, .contact-form textarea{width:100%; padding:12px 14px; border-radius:12px; background:#fff; color:#111; border:1px solid var(--border)}
.contact-form input:focus, .contact-form textarea:focus{outline:2px solid color-mix(in srgb, var(--primary) 35%, transparent)}
@media (max-width: 700px){ .contact-form .grid{grid-template-columns:1fr} }

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:24px 0; background: var(--bg-alt)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.brand.foot{display:flex; align-items:center; gap:8px; font-weight:700; color:#111}
.brand.foot .logo{height:28px; width:auto}
.site-footer p{margin:0; color:#2d3436}
.site-footer .powered-by{opacity:.8}

@media (max-width: 760px){
  .footer-inner{flex-direction:column; justify-content:center; text-align:center; gap:10px}
  .brand.foot{justify-content:center}
  .site-footer{padding:20px 0}
  .site-footer p{font-size:14px; line-height:1.4}
}

/* Utilities */
.visually-hidden{position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}

/* Icons (Material Symbols) */
.material-symbols-rounded{font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24; vertical-align:middle; display:inline-block; line-height:1}
.ic{font-size:20px; margin-right:6px}
.btn .material-symbols-rounded{margin-right:8px}
.section-title .material-symbols-rounded{margin-right:8px}
.fixt .material-symbols-rounded{margin-right:6px}
.label-icon{margin-right:6px}

/* Nav dropdowns */
.site-nav details{position:relative}
.site-nav summary{list-style:none; cursor:pointer; padding:10px 12px; border-radius:8px; color:#fff; display:inline-flex; align-items:center; gap:6px}
.site-nav summary::-webkit-details-marker{display:none}
.site-nav details:hover summary{background:rgba(255,255,255,0.12); color:#fff}
.site-nav summary:focus-visible{outline:2px solid color-mix(in srgb, #fff 50%, transparent); outline-offset:2px; border-radius:10px}
.site-nav summary.cta{background:#fff; color:var(--primary); font-weight:700}
.site-nav details:hover summary.cta{background:#f7f7f7; color:var(--primary)}
.site-nav summary::after{content:'▾'; font-size:12px; line-height:1; transition: transform .2s ease}
.site-nav details[open] > summary::after{transform: rotate(180deg)}
.site-nav .menu{position:absolute; top:calc(100% + 6px); left:0; min-width:200px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow); padding:8px; display:none; z-index:200}
.site-nav details[open] .menu{display:block}
.site-nav .menu a{display:block; padding:10px 10px; border-radius:8px; color:#2d3436}
.site-nav .menu a:hover{background:rgba(0,0,0,0.04); color:#111}

@media (max-width: 760px){
  .site-nav details{width:100%}
  .site-nav summary{padding:12px 0; color:#2d3436}
  .site-nav details:hover summary{background:rgba(0,0,0,0.04); color:#111}
  .site-nav summary.cta{background:var(--primary); color:#fff}
  .site-nav details:hover summary.cta{background:var(--primary-dark); color:#fff}
  .site-nav .menu{position:static; top:auto; left:auto; min-width:unset; border:none; border-radius:0; box-shadow:none; padding:4px 0 10px; display:block}
  .site-nav .menu a{padding:10px 0; color:#2d3436}
}


/* Updates cards: collapsible */
#news .card.update{position:relative}
#news .card.update .content{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
#news .card.update.expanded .content{display:block; -webkit-line-clamp:unset}
#news .card.update .expand-btn{margin-top:8px; display:inline-flex; align-items:center; gap:6px; font-size:14px; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:#fff; color:#111; cursor:pointer}
#news .card.update .expand-btn:hover{box-shadow: var(--shadow)}
#news .card.update .expand-btn .chev{transition: transform .2s ease}
#news .card.update[aria-expanded="true"] .expand-btn .chev{transform: rotate(180deg)}

/* Photo slider beneath Latest Updates */
.photo-slider{width:100%; height:500px; border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow: var(--shadow); background:#000}
.photo-slider .photo-track{display:flex; width:100%; height:100%; transition: transform .5s ease-in-out}
.photo-slider .photo-slide{min-width:100%; height:100%}
.photo-slider .photo-slide img{width:100%; height:100%; object-fit:cover; display:block}

/* Gallery */
.gallery-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:12px}
.gallery-item{background: var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow: var(--shadow)}
.gallery-item img{width:100%; height:100%; aspect-ratio: 4 / 3; object-fit: cover; display:block}
.gallery-item figcaption{padding:10px 12px; font-size:14px; color:var(--muted); background:#fff}