/*
Theme Name: SMART Krav Maga
Theme URI: https://kravmagabrussels.be/
Author: SMART Krav Maga Brussels
Description: Custom theme for SMART Krav Maga Brussels. Dark charcoal / paper editorial design with a single red accent, built around the club's real schedule, programs and contact info. Key fields are editable under Appearance > Customize; nav menus are managed under Appearance > Menus.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: smart-krav-maga
*/

:root{
  --charcoal: #1B1B1D;
  --charcoal-2: #242426;
  --paper: #EDEAE3;
  --paper-dim: #E2DED4;
  --ink: #1B1B1D;
  --red: #D6402A;
  --steel: #5C6670;
  --line-dark: rgba(255,255,255,0.16);
  --line-light: rgba(27,27,29,0.16);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900;
  text-transform:uppercase;
  line-height:0.95;
  letter-spacing:0.005em;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%; height:auto;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
@media (max-width:640px){.wrap{padding:0 20px;}}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--red); color:#fff;
  padding:12px 18px; z-index:1000; font-size:14px; font-weight:600;
}
.skip-link:focus{left:12px; top:12px;}

/* ---------- top bar ---------- */
header.topbar{
  background:var(--charcoal);
  color:var(--paper);
  border-bottom:1px solid var(--line-dark);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; max-width:1180px; margin:0 auto; gap:24px; flex-wrap:wrap;
}
.brand{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800;
  font-size:20px;
  letter-spacing:0.02em;
}
.brand img{height:34px; width:auto;}
.brand span{color:var(--red);}
nav.primary ul{display:flex; gap:28px; font-size:14px; font-weight:500; list-style:none;}
nav.primary a{opacity:0.82; transition:opacity .15s ease;}
nav.primary a:hover, nav.primary a:focus{opacity:1;}
.topbar-right{display:flex; align-items:center; gap:22px;}
nav.langs ul{display:flex; gap:10px; font-size:13px; opacity:0.75; list-style:none;}
nav.langs a:hover{opacity:1; text-decoration:underline;}
.btn{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-weight:600;
  font-size:14px;
  padding:11px 20px;
  border-radius:0;
  border:1px solid var(--red);
}
.btn:hover{background:#B93A26; border-color:#B93A26;}
.btn-outline{background:transparent; border:1px solid var(--paper); color:var(--paper);}
.btn-outline:hover{background:var(--paper); color:var(--charcoal);}
.menu-toggle{display:none; background:none; border:1px solid var(--line-dark); color:var(--paper); padding:8px 12px; font-size:14px;}
@media (max-width:900px){
  nav.primary{display:none; width:100%; order:3;}
  nav.primary.is-open{display:block;}
  nav.primary ul{flex-direction:column; gap:14px; padding:18px 0 4px;}
  .menu-toggle{display:inline-block;}
}

/* ---------- hero ---------- */
.hero{background:var(--charcoal); color:var(--paper); position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; align-items:stretch;}
.hero-copy{
  padding:88px 48px 72px 32px; max-width:1180px; margin:0 auto;
  display:flex; flex-direction:column; justify-content:center;
}
.hero-copy .kicker{font-size:13px; font-weight:600; color:var(--red); margin-bottom:18px;}
.hero-copy h1{font-size:clamp(44px, 6vw, 76px);}
.hero-copy h1 span{display:block; opacity:0; transform:translateY(16px); animation:riseIn .7s ease forwards;}
.hero-copy h1 span:nth-child(2){animation-delay:.08s;}
.hero-copy h1 span:nth-child(3){animation-delay:.16s;}
@keyframes riseIn{to{opacity:1; transform:translateY(0);}}
.hero-copy p.lede{margin-top:26px; max-width:38ch; font-size:17px; color:#CFCBC1;}
.hero-actions{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap;}
.hero-photo{
  position:relative; min-height:420px; background-size:cover; background-position:center 30%;
  filter:grayscale(0.55) contrast(1.08); background-color:#333;
}
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(27,27,29,0) 40%, rgba(27,27,29,0.85) 100%),
             linear-gradient(90deg, rgba(27,27,29,0.55) 0%, rgba(27,27,29,0) 22%);
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-photo{min-height:280px; order:-1;}
  .hero-copy{padding:44px 8px 56px;}
}

/* ---------- stat strip ---------- */
.stats{background:var(--charcoal-2); color:var(--paper); border-top:1px solid var(--line-dark);}
.stats-inner{display:flex; max-width:1180px; margin:0 auto; flex-wrap:wrap;}
.stat{flex:1; padding:26px 28px; border-left:1px solid var(--line-dark); min-width:140px;}
.stat:first-child{border-left:none;}
.stat .num{font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:28px;}
.stat .label{font-size:13px; color:#B9B5AB; margin-top:4px;}
@media (max-width:800px){
  .stat{flex:1 1 50%; border-left:none; border-top:1px solid var(--line-dark);}
}

/* ---------- section shell ---------- */
section{padding:84px 0;}
section.tight{padding:64px 0;}
.section-head{display:grid; grid-template-columns:0.9fr 1.8fr; gap:40px; margin-bottom:44px;}
.section-head h2{font-size:clamp(30px,4vw,44px);}
.section-head .intro{font-size:16px; color:#3A3A3C; align-self:end; max-width:72ch;}
@media (max-width:760px){.section-head{grid-template-columns:1fr; gap:16px;}}

/* ---------- smart section ---------- */
.smart{background:var(--paper);}
.smart-body{display:grid; grid-template-columns:0.9fr 1.8fr; gap:40px;}
.smart-body p{max-width:72ch; margin-bottom:16px; color:#2E2E2F;}
.smart-body p:last-child{margin-bottom:0;}
.smart-body strong{color:var(--red);}
@media (max-width:760px){.smart-body{grid-template-columns:1fr;}}

/* ---------- steps ---------- */
.steps{background:var(--paper-dim); border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light);}
.steps-list{display:grid; grid-template-columns:repeat(3,1fr);}
.step{padding:34px 30px; border-left:1px solid var(--line-light);}
.step:first-child{border-left:none;}
.step .idx{font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:15px; color:var(--red); margin-bottom:14px;}
.step h3{font-size:22px; margin-bottom:10px;}
.step p{font-size:14.5px; color:#3A3A3C;}
@media (max-width:760px){
  .steps-list{grid-template-columns:1fr;}
  .step{border-left:none; border-top:1px solid var(--line-light);}
  .step:first-child{border-top:none;}
}

/* ---------- programs ---------- */
.programs{background:var(--paper);}
.programs-list{display:grid; grid-template-columns:repeat(2,1fr); border-top:0px solid var(--line-light);}
.program{padding:30px 0; border-bottom:0px solid var(--line-light);}
.program:nth-child(odd){padding-right:32px; border-right:1px solid var(--line-light);}
.program:nth-child(even){padding-left:32px;}
.program h3{font-size:21px; margin-bottom:8px;}
.program p{font-size:14.5px; color:#3A3A3C; max-width:44ch;}
.program a.more{display:block; margin-top:12px; font-size:13.5px; font-weight:600; border-bottom:1px solid var(--red); color:var(--red);}
@media (max-width:760px){
  .programs-list{grid-template-columns:1fr;}
  .program:nth-child(odd), .program:nth-child(even){padding-left:0; padding-right:0; border-right:none;}
}

/* ---------- schedule ---------- */
.schedule{background:var(--charcoal); color:var(--paper);}
.schedule .section-head .intro{color:#CFCBC1;}
.schedule .section-head .intro .idx { color: #D6402A;}
table.sched{width:100%; border-collapse:collapse; font-size:15px;}
table.sched th{text-align:left; font-weight:600; font-size:13px; color:#B9B5AB; padding:0 0 12px; border-bottom:1px solid var(--line-dark);}
table.sched td{padding:16px 0; border-bottom:1px solid var(--line-dark);}
.fees{margin-top:36px; display:flex; gap:48px; flex-wrap:wrap;}
.fee .num{font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:32px; color:var(--red);}
.fee .label{font-size:14px; color:#CFCBC1; margin-top:4px;}
.venue{margin-top:36px; font-size:14.5px; color:#CFCBC1;}
.venue a{border-bottom:1px solid var(--steel);}

.sched2{
	width:100%; 
	border-collapse:collapse; 
	font-size:15px;
	color: var(--charcoal);
}
.sched2 th{
	text-align:left; font-weight:600; font-size:13px; padding:0 0 12px; border-bottom: 2px solid var(--charcoal);
}
.sched2 td{
	padding:16px 0; border-bottom:1px solid var(--charcoal);
}

.idx{ text-align: center; font-weight:800; font-size:15px; color:var(--red); margin-bottom:14px;}
.feelabel{font-size:14px; color:var(--charcoal); margin-top:4px;}

/* ---------- contact cta ---------- */
.contact{background:var(--red); color:#fff;}
.contact-inner{display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:end;}
.contact h2{font-size:clamp(30px,4.5vw,52px); color:#fff;}
.contact p{max-width:44ch; margin-top:16px; color:rgba(255,255,255,0.9);}
.phones{display:flex; flex-direction:column; gap:10px; font-size:15px;}
.phones .lang{opacity:0.85; font-size:13px;}
.contact .btn-outline2{display:inline-block; margin-top:22px; border:1px solid #fff; color:#fff; padding:12px 22px; font-weight:600; font-size:14px;}
.contact .btn-outline2:hover{background:#fff; color:var(--red);}
@media (max-width:760px){.contact-inner{grid-template-columns:1fr;}}

/* ---------- footer ---------- */
footer.site-footer{background:var(--charcoal); color:#8E8A80; padding:40px 0; font-size:13.5px;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.footer-inner a{color:#B9B5AB;}
.footer-inner a:hover{color:var(--paper);}
.footer-inner nav ul{display:flex; gap:12px; list-style:none;}

/* ---------- generic page / blog content ---------- */
.page-hero{background:var(--charcoal); color:var(--paper); padding:72px 0 52px;}
.page-hero h1{font-size:clamp(34px,5vw,56px);}
.content-wrap{padding:64px 0; max-width:760px; margin:0 auto;}
.content-wrap .entry-content{font-size:16.5px; color:#2E2E2F;}
.content-wrap .entry-content p{margin-bottom:18px; max-width:68ch;}
.content-wrap .entry-content h2{font-size:28px; margin:36px 0 14px; text-transform:none; letter-spacing:normal;}
.content-wrap .entry-content h3{font-size:21px; margin:28px 0 10px; text-transform:none; letter-spacing:normal;}
.content-wrap .entry-content ul, .content-wrap .entry-content ol{margin:0 0 18px 22px;}
.content-wrap .entry-content img{margin:20px 0;}
.content-wrap .entry-content a{color:var(--red); border-bottom:1px solid var(--red);}

.blog-list{padding:64px 0; max-width:820px; margin:0 auto;}
.blog-item{padding:28px 0; border-bottom:1px solid var(--line-light);}
.blog-item:first-child{padding-top:0;}
.blog-item h2{font-size:26px; text-transform:none; letter-spacing:normal; margin-bottom:8px;}
.blog-item .meta{font-size:13px; color:var(--steel); margin-bottom:10px;}
.blog-item p{font-size:15px; color:#3A3A3C;}
.blog-item a.readmore{display:inline-block; margin-top:10px; font-size:13.5px; font-weight:600; border-bottom:1px solid var(--red); color:var(--red);}

.pagination{display:flex; gap:16px; padding:0 0 64px; max-width:820px; margin:0 auto; font-size:14px; font-weight:600;}
.pagination a{border-bottom:1px solid var(--red); color:var(--red);}