/* FUJC simple site — navy & yellow, beginner-friendly */
:root{
  --bg:#071a2b;
  --text:#f5f7fb;
  --muted:#c8d2e2;
  --accent:#f7d400;
  --accent2:#ffd84a;
  --border:rgba(255,255,255,.14);
  --shadow: 0 18px 55px rgba(0,0,0,.35);
  --radius: 18px;
  --max: 1100px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 15% 0%, #14375f 0%, var(--bg) 55%),
    radial-gradient(900px 500px at 85% 10%, #11365c 0%, var(--bg) 60%),
    var(--bg);
  line-height:1.5;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(var(--max), calc(100% - 40px)); margin-inline:auto;}
.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; padding:10px 12px; background:#000; color:#fff; border-radius:10px; z-index:9999;}
.site-header{position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); background: rgba(7,26,43,.78); border-bottom:1px solid var(--border);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px;}
.brand{display:flex; align-items:center; gap:12px; min-width:240px}
.brand-mark{width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid var(--border); object-fit:cover;}
.brand-name{font-weight:800; letter-spacing:.2px}
.brand-tag{font-size:12px; color:var(--muted)}
.site-nav{display:flex; gap:18px; align-items:center}
.site-nav a{color:var(--text); font-weight:700; font-size:14px; opacity:.92}
.site-nav a:hover{opacity:1; text-decoration:none}
.site-nav a:focus{outline:2px solid var(--accent); outline-offset:4px; border-radius:8px}
.nav-toggle{display:none; border:1px solid var(--border); background:rgba(255,255,255,.05); border-radius:14px; padding:10px 12px; color:var(--text);}
.nav-toggle-lines{width:18px; height:12px; display:block; position:relative;}
.nav-toggle-lines::before,.nav-toggle-lines::after{content:""; position:absolute; left:0; right:0; height:2px; background:var(--text); border-radius:2px;}
.nav-toggle-lines::before{top:0}
.nav-toggle-lines::after{bottom:0}
.sr-only{position:absolute; left:-999px; width:1px; height:1px; overflow:hidden}
.hero{padding:48px 0 28px}
.hero-grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:22px; align-items:stretch}
.pill{display:inline-flex; gap:10px; align-items:center; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--muted); font-weight:700; font-size:13px;}
h1{font-size:44px; line-height:1.08; margin:14px 0 12px; letter-spacing:-.6px}
.lead{font-size:17px; color:var(--muted); margin:0 0 18px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin:6px 0 14px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:14px; border:1px solid var(--border); font-weight:800; letter-spacing:.2px; text-decoration:none !important; min-height:44px;}
.btn-primary{background:linear-gradient(180deg, var(--accent2), var(--accent)); color:#112; border-color: rgba(0,0,0,.15);}
.btn-primary:hover{filter:saturate(1.05) brightness(1.02)}
.btn-ghost{background:rgba(255,255,255,.05); color:var(--text);}
.btn-ghost:hover{background:rgba(255,255,255,.07)}
.hero-bullets{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:8px; color:var(--muted);}
.hero-bullets li{padding-left:26px; position:relative;}
.hero-bullets li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:900;}
.hero-card{display:grid; grid-template-rows:auto 1fr; gap:14px}
.card,.panel{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
.card{padding:16px}
.panel{padding:18px}
.card-title{font-weight:900; margin-bottom:10px}
.card-row{display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px dashed rgba(255,255,255,.14); color:var(--muted);}
.card-row span:last-child{color:var(--text); font-weight:800}
.card-row:last-of-type{border-bottom:0}
.card-note{margin-top:12px; color:var(--muted)}
.hero-image{border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:rgba(0,0,0,.2); box-shadow:var(--shadow); min-height:210px;}
.hero-image img{width:100%; height:100%; object-fit:cover; display:block}
.section{padding:56px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.section-head{margin-bottom:18px}
.section-head h2{margin:0; font-size:30px; letter-spacing:-.3px}
.section-head p{margin:8px 0 0; color:var(--muted)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
h3{margin:0 0 10px}
.muted{color:var(--muted)}
.small{font-size:13px}
.table-wrap{overflow:auto; border-radius:14px; border:1px solid rgba(255,255,255,.12)}
.table{width:100%; border-collapse:collapse; min-width:520px; background:rgba(0,0,0,.12)}
.table th,.table td{padding:12px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,.10)}
.table th{font-size:13px; color:var(--muted); font-weight:900}
.table td{font-weight:700}
.table tbody tr:hover{background:rgba(255,255,255,.04)}
.callout{margin-top:14px; padding:12px 14px; border-radius:14px; border:1px solid rgba(247,212,0,.28); background:rgba(247,212,0,.08); color:var(--text);}
.location-card{margin-top:10px; padding:14px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.10);}
.location-item{display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px dashed rgba(255,255,255,.12)}
.location-item:last-child{border-bottom:0}
.label{color:var(--muted); font-weight:900}
.value{font-weight:800}
.list{margin:0; padding-left:18px; color:var(--muted)}
.list li{margin:8px 0}
.list strong{color:var(--text)}
.divider{height:1px; background:var(--border); margin:24px 0}
.faq details{border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(0,0,0,.10); padding:12px 14px; margin:10px 0;}
.faq summary{cursor:pointer; font-weight:900}
.faq p{margin:10px 0 0; color:var(--muted)}
.contact-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px}
.site-footer{padding:26px 0 18px; border-top:1px solid var(--border); background:rgba(0,0,0,.18);}
.footer-inner{display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap}
.footer-title{font-weight:900}
.footer-links{display:flex; gap:14px; flex-wrap:wrap}
.footer-links a{color:var(--muted); font-weight:800}
.footer-links a:hover{color:var(--text); text-decoration:none}
.footer-bottom{margin-top:14px}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  h1{font-size:38px}
  .grid-3{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .site-nav{display:none; position:absolute; right:20px; top:64px; background:rgba(7,26,43,.96); border:1px solid var(--border); border-radius:16px; padding:12px; box-shadow:var(--shadow); flex-direction:column; min-width:220px;}
  .site-nav a{padding:10px 10px; border-radius:12px}
  .site-nav a:hover{background:rgba(255,255,255,.06)}
  .nav-toggle{display:inline-flex}
  .site-nav.is-open{display:flex}
}

/* Dropdown menus in nav */
.nav-dropdown{position:relative; display:inline-flex; align-items:center;}
.nav-dropbtn{
  background:transparent;
  border:0;
  color:var(--text);
  font-weight:700;
  font-size:14px;
  opacity:.92;
  cursor:pointer;
  padding:0;
}
.nav-dropbtn:hover{opacity:1}
.nav-dropbtn:focus{outline:2px solid var(--accent); outline-offset:4px; border-radius:8px}
.nav-caret{margin-left:6px; font-weight:900; opacity:.9}
.nav-dropmenu{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: rgba(7,26,43,.96);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px;
  box-shadow: var(--shadow);
  display:none;
  z-index: 60;
}
.nav-dropmenu a{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  color: var(--text);
  font-weight:800;
  font-size:14px;
}
.nav-dropmenu a:hover{background: rgba(255,255,255,.06); text-decoration:none}
.nav-dropdown:hover .nav-dropmenu{display:block;}
.nav-dropdown:focus-within .nav-dropmenu{display:block;}
@media (max-width: 720px){
  .nav-dropdown{width:100%;}
  .nav-dropbtn{
    width:100%;
    text-align:left;
    padding:12px 12px;
    font-size:16px;
    border-radius:12px;
  }
  .nav-dropmenu{
    position:static;
    display:block;
    margin-top:6px;
    min-width:unset;
    padding:8px;
  }
  .nav-dropmenu a{padding:12px 12px; font-size:16px;}
}

/* Footer social links (small icon buttons) */
.social-links{
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:center;
  margin-top:18px;
}
.social-links a{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.social-links a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
/* Important: override any global img rules that might force full width */
.social-links img{
  width:20px !important;
  height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
  object-fit:contain;
  display:block;
  filter: brightness(0) invert(1);
  opacity:.9;
}
@media (max-width: 520px){
  .social-links a{width:44px; height:44px;}
  .social-links img{width:22px !important; height:22px !important; max-width:22px !important; max-height:22px !important;}
}

.coach-tile{
  max-height:440px;
  aspect-ratio:4 / 3;
  background-position:center 25%;min-height:280px;}
}


/* Coaches full-bleed photo strip */
.coaches{padding:0;margin:0;}
.coaches-head{padding:36px 0 18px;}
.coaches-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  width:100%;
}
.coach-tile{
  position:relative;
  min-height:320px;
  background-image:var(--bg);
  background-size:cover;
  background-position:center;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.coach-tile:not(:last-child){border-right:1px solid var(--border);}
.coach-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.70) 100%);
}
.coach-text{position:absolute; left:18px; right:18px; bottom:16px; z-index:2;}
.coach-name{font-weight:900; font-size:18px; letter-spacing:-.2px;}
.coach-sub{margin-top:4px; font-weight:800; color:var(--muted); font-size:13px;}


/* Coaches grid responsive layout
   Desktop: 4 x 1
   Mobile/Tablet: 2 x 2
*/
@media (max-width: 980px){
  .coaches-grid{grid-template-columns: repeat(2, 1fr);}
  .coach-tile{min-height: 260px;}
  .coach-tile{border-right:1px solid var(--border);}
  .coach-tile:nth-child(2){border-right:0;}
  .coach-tile:nth-child(4){border-right:0;}
}
@media (max-width: 520px){
  .coaches-grid{grid-template-columns: repeat(2, 1fr);}
  .coach-tile{min-height: 220px;}
  .coach-tile{border-right:1px solid var(--border);}
  .coach-tile:nth-child(2){border-right:0;}
  .coach-tile:nth-child(4){border-right:0;}
}

/* Standardised header + larger logo */
.brand-mark{
  width: 96px !important;
  height: 96px !important;
}
@media (max-width: 720px){
  .brand-mark{
    width: 84px !important;
    height: 84px !important;
  }
}

.brand-link{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:inherit;
}
.brand-link:hover{
  opacity:1;
}

/* Ultra-wide tuning: keep coach tiles proportional on very wide monitors */
@media (min-width: 1600px){
  .coach-tile{
    min-height: 340px;
    max-height: 520px;
    background-position: center 20%;
  }
}

/* Sponsors */
.sponsors .section-head p{max-width:70ch;}
.sponsor-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:14px;
}
.sponsor-slot{
  height:92px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.22);
  background:rgba(255,255,255,.04);
}
@media (max-width: 980px){
  .sponsor-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 520px){
  .sponsor-grid{grid-template-columns:1fr;}
}

/* Active nav states */
.site-nav a.active,
.nav-dropbtn.active{
  opacity: 1;
}

.site-nav a.active{
  position: relative;
}
.site-nav a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:3px;
  border-radius:3px;
  background: var(--accent);
}

.nav-dropbtn.active{
  position: relative;
}
.nav-dropbtn.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:3px;
  border-radius:3px;
  background: var(--accent);
}

/* Mobile: use left bar highlight instead of underline */
@media (max-width: 720px){
  .site-nav a.active::after,
  .nav-dropbtn.active::after{display:none;}
  .site-nav a.active{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding-left: 14px;
    box-shadow: inset 4px 0 0 var(--accent);
  }
  .nav-dropbtn.active{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding-left: 14px;
    box-shadow: inset 4px 0 0 var(--accent);
  }
}

/* Coaches strip robustness: prevent horizontal overflow and ensure all 4 tiles fit */
.coaches, .coaches-grid{max-width:100%; overflow-x:hidden;}
.coaches-grid{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.coach-tile{min-width:0; box-sizing:border-box;}
html, body{overflow-x:hidden;}

@media (max-width: 980px){
  .coaches-grid{grid-template-columns: repeat(2, minmax(0,1fr)) !important;}
}
@media (max-width: 520px){
  .coaches-grid{grid-template-columns: repeat(2, minmax(0,1fr)) !important;}
}

/* Women's course coach photo layout */
.women-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: stretch;
}

.women-content{align-self:center;}

.women-photo{
  position:relative;
  border-radius:18px;
  background-image:var(--bg);
  background-size:cover;
  background-position:center 20%;
  min-height:320px;
  overflow:hidden;
}

.photo-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.45) 70%,
    rgba(0,0,0,.6) 100%
  );
}

.photo-caption{
  position:absolute;
  left:16px;
  bottom:14px;
  z-index:2;
  font-size:14px;
}

.photo-caption span{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

/* Mobile behaviour */
@media (max-width: 900px){
  .women-grid{
    grid-template-columns:1fr;
  }
  .women-photo{
    min-height:260px;
  }
}

.judo-highlights{
    grid-template-columns:1fr;
  }
}

/* Intro: What is Judo (text-only, compact) */
.intro-judo{
  padding-top: 18px;
  padding-bottom: 18px;
}

.intro-judo-text{
  max-width: 72ch;
}

.intro-judo-text h2{
  margin-bottom: 10px;
}

/* Inline "What is Judo?" under hero */
.hero-judo-inline{
  margin-top: 14px;
  max-width: 60ch;
}
.hero-judo-inline h3{
  margin-bottom: 6px;
}
.hero-judo-inline p{
  margin-bottom: 8px;
}
@media (max-width: 900px){
  .hero-judo-inline{
    max-width: none;
  }
}

/* Mobile schedule cards */
.schedule-cards{display:none;}
.schedule-card{
  padding:14px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.schedule-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}
.schedule-day{font-weight:900;}
.schedule-time{font-weight:800; opacity:.92;}
.schedule-meta{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.schedule-pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-weight:800;
}
.schedule-level{color:var(--muted); font-weight:800;}
@media (max-width: 720px){
  .schedule-desktop{display:none;}
  .schedule-cards{display:grid; gap:12px;}
}

/* Mobile dropdown behaviour: tap-to-toggle */
@media (max-width: 720px){
  .nav-dropmenu{display:none !important;}
  .nav-dropdown.open .nav-dropmenu{display:block !important;}
  .nav-dropdown{width:100%;}
  .nav-dropbtn{
    width:100%;
    text-align:left;
    padding:12px 12px;
    font-size:16px;
    border-radius:12px;
  }
  .nav-dropdown.open .nav-dropbtn{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 4px 0 0 var(--accent);
  }
}

/* Mobile dropdowns: drop DOWN (not sideways) */
@media (max-width: 720px){
  .site-nav{flex-direction:column; align-items:stretch;}
  .nav-dropdown{display:block; width:100%;}
  .nav-dropbtn{display:flex; width:100%; justify-content:space-between; align-items:center;}
  .nav-dropmenu{
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100%;
    min-width: unset !important;
    margin-top: 8px;
    padding: 8px;
  }
}