/*
Theme Name: Olorum Capoeira
Theme URI: https://olorumcapoeira.com
Author: Olorum Capoeira
Description: Custom theme for Olorum Capoeira — East London capoeira school. Fight, music, folklore.
Version: 1.0
Requires PHP: 7.4
Text Domain: olorum-capoeira
*/

  :root{
    --ink:#1C1712;
    --ink-soft:#2A231C;
    --chalk:#F3EEE2;
    --chalk-dim:#E6DECB;
    --rust:#A8431E;
    --rust-deep:#7E3116;
    --brass:#C79A3B;
    --verde:#33513F;
    --rope:#C7B49A;
    --serif-display:'Bricolage Grotesque', sans-serif;
    --sans:'Work Sans', sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--chalk);
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
  @media (max-width:640px){ .wrap{padding:0 20px;} }

  :focus-visible{outline:2px solid var(--rust);outline-offset:3px;}

  /* ---------- NAV ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    background:var(--chalk); border-bottom:1px solid var(--rope);
  }
  .nav-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 0;
  }
  .brand{
    font-family:var(--serif-display); font-weight:700; font-size:1.3rem;
    letter-spacing:-0.01em; text-decoration:none; color:var(--ink);
    display:flex; align-items:center; gap:10px;
  }
  .brand .mark{width:26px;height:26px;flex:none;}
    .brand .logo{height:34px; width:auto; display:block;}
  nav.links{display:flex; gap:36px; align-items:center;}
  nav.links a{
    text-decoration:none; font-size:0.98rem; color:var(--ink-soft);
    position:relative; padding:4px 0;
  }
  nav.links a::after{
    content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
    background:var(--rust); transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
  }
  nav.links a:hover::after{transform:scaleX(1);}
  .btn{
    display:inline-block; font-family:var(--sans); font-weight:600; font-size:0.95rem;
    text-decoration:none; padding:11px 22px; border-radius:2px;
    border:1.5px solid var(--ink); color:var(--ink); transition:all .2s ease;
  }
  .btn:hover{background:var(--ink); color:var(--chalk);}
  .btn.solid{background:var(--rust); border-color:var(--rust); color:var(--chalk);}
  .btn.solid:hover{background:var(--rust-deep); border-color:var(--rust-deep);}
  .nav-toggle{display:none;}
  @media (max-width:860px){
    nav.links{
      position:fixed; inset:0 0 0 auto; width:min(78vw,320px); height:100vh;
      background:var(--ink); flex-direction:column; align-items:flex-start;
      padding:100px 32px; gap:26px; transform:translateX(100%);
      transition:transform .3s ease; box-shadow:-8px 0 30px rgba(0,0,0,.2);
    }
    nav.links a{color:var(--chalk-dim); font-size:1.15rem;}
    nav.links.open{transform:translateX(0);}
    .nav-toggle{
      display:flex; flex-direction:column; gap:5px; background:none; border:none;
      cursor:pointer; padding:8px; z-index:60;
    }
    .nav-toggle span{width:24px;height:2px;background:var(--ink);}
    .nav-cta{display:none;}
  }

  /* ---------- HERO ---------- */
  .hero{
    background:var(--ink); color:var(--chalk);
    padding:88px 0 100px;
    overflow:hidden; position:relative;
  }
  .hero .wrap{
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; align-items:center;
  }
  .eyebrow-line{
    display:flex; align-items:center; gap:14px; margin-bottom:28px;
    color:var(--brass); font-size:0.92rem;
  }
  .eyebrow-line .rule{width:40px;height:1px;background:var(--brass);}
  .hero h1{
    font-family:var(--serif-display); font-weight:700; font-size:clamp(2.6rem,5.4vw,4.4rem);
    line-height:0.98; letter-spacing:-0.015em; margin:0 0 26px;
  }
  .hero h1 em{font-style:italic; color:var(--rust); font-weight:600;}
  .hero p.lede{
    font-size:1.18rem; color:var(--chalk-dim); max-width:46ch; margin:0 0 36px;
  }
  .hero .cta-row{display:flex; gap:16px; flex-wrap:wrap;}
  .hero .btn{border-color:var(--chalk);}
  .hero .btn:not(.solid){color:var(--chalk);}
  .hero .btn:not(.solid):hover{background:var(--chalk); color:var(--ink);}

  .roda{position:relative; width:100%; aspect-ratio:1/1; max-width:440px; margin:0 auto;}
 
  .roda-media{
    position:absolute; inset:0; z-index:1;
  }
  .roda-media .roda-card,
  .roda-media .roda-peek{
    position:absolute; top:50%; left:50%;
    width:60%; aspect-ratio:3/4;
    background-size:cover; background-position:center;
    border:6px solid var(--chalk);
    box-sizing:border-box;
  }
  .roda-media .roda-peek{
    transform:translate(-46%,-54%) rotate(3deg);
    opacity:0.35; z-index:1;
  }
  .roda-media .roda-card{
    transform:translate(-50%,-50%) rotate(-4deg);
    opacity:0; transition:opacity 1.4s ease;
    z-index:2;
  }
  .roda-media .roda-card.active{opacity:1;}
  .roda-media .roda-dots{
    position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
    display:flex; gap:6px; z-index:3;
  }
  .roda-media .roda-dots .dot{
    width:6px; height:6px; border-radius:50%; background:var(--rope);
    opacity:0.6;
  }
  .roda-media .roda-dots .dot.active{background:var(--rust); opacity:1;}
  
  @media (max-width:860px){
    .hero .wrap{grid-template-columns:1fr; text-align:left;}
    .roda{margin-top:20px; max-width:300px;}
  }

  /* ---------- PILLARS (Luta / Música / Malícia) ---------- */
  .pillars{background:var(--chalk); padding:96px 0;}
  .pillars .intro{max-width:60ch; margin-bottom:56px;}
  .pillars .intro h2{
    font-family:var(--serif-display); font-weight:700; font-size:clamp(1.8rem,3.2vw,2.4rem);
    margin:0 0 16px; letter-spacing:-0.01em;
  }
  .pillars .intro p{font-size:1.08rem; color:var(--ink-soft);}
  .pillar-strip{
    display:grid; grid-template-columns:repeat(3,1fr);
    border-top:1.5px solid var(--ink);
  }
  .pillar{
    padding:32px 28px 0; border-right:1.5px solid var(--rope);
  }
  .pillar:last-child{border-right:none;}
  .pillar .pt-word{
    font-family:var(--serif-display); font-weight:700; font-size:1.5rem;
    color:var(--rust); margin-bottom:10px; letter-spacing:-0.01em;
  }
  .pillar p{color:var(--ink-soft); font-size:0.98rem; max-width:32ch;}
  @media (max-width:720px){
    .pillar-strip{grid-template-columns:1fr;}
    .pillar{border-right:none; border-bottom:1.5px solid var(--rope); padding-bottom:28px; margin-bottom:8px;}
  }

  /* ---------- SCHEDULE (timeline) ---------- */
  .schedule{background:var(--verde); color:var(--chalk); padding:96px 0;}
  .schedule .intro h2{
    font-family:var(--serif-display); font-weight:700; font-size:clamp(1.8rem,3.2vw,2.4rem);
    margin:0 0 12px; letter-spacing:-0.01em;
  }
  .schedule .intro p{color:#D8E0DA; max-width:56ch; margin-bottom:56px;}
  .timeline{display:flex; flex-direction:column;}
  .t-row{
    display:grid; grid-template-columns:120px 1fr auto; gap:24px; align-items:baseline;
    padding:26px 0; border-top:1px solid rgba(243,238,226,0.22);
  }
  .timeline .t-row:last-child{border-bottom:1px solid rgba(243,238,226,0.22);}
  .t-day{font-family:var(--serif-display); font-weight:700; font-size:1.1rem; color:var(--brass);}
  .t-body h3{margin:0 0 6px; font-size:1.15rem; font-weight:600;}
  .t-body p{margin:0; color:#CFD8D2; font-size:0.94rem;}
  .t-time{font-size:0.95rem; color:var(--chalk-dim); white-space:nowrap; text-align:right;}
  @media (max-width:640px){
    .t-row{grid-template-columns:1fr; gap:6px;}
    .t-time{text-align:left;}
  }

  /* ---------- PRICING ---------- */
  .pricing{background:var(--chalk); padding:96px 0;}
  .price-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--ink); margin-top:48px;}
  .price-cell{background:var(--chalk); padding:44px 36px;}
  .price-cell .who{font-size:0.95rem; color:var(--rust); font-weight:600; margin-bottom:6px;}
  .price-cell .amount{font-family:var(--serif-display); font-weight:700; font-size:3.2rem; letter-spacing:-0.02em;}
  .price-cell .amount span{font-size:1.1rem; font-weight:500; color:var(--ink-soft); font-family:var(--sans);}
  .price-cell p.note{color:var(--ink-soft); font-size:0.95rem; margin:14px 0 26px; max-width:34ch;}
  @media (max-width:640px){.price-grid{grid-template-columns:1fr;}}

  /* ---------- TESTIMONIAL ---------- */
  .testimonial{background:var(--ink); color:var(--chalk); padding:110px 0;}
  .testimonial blockquote{
    margin:0; font-family:var(--serif-display); font-weight:500; font-style:italic;
    font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.4; max-width:44ch; letter-spacing:-0.005em;
  }
  .testimonial cite{
    display:block; margin-top:32px; font-style:normal; font-size:0.95rem; color:var(--brass);
  }

  /* ---------- CTA / CONTACT ---------- */
  .cta-band{background:var(--rust); color:var(--chalk); padding:80px 0; text-align:left;}
  .cta-band h2{
    font-family:var(--serif-display); font-weight:700; font-size:clamp(2rem,4vw,2.8rem);
    margin:0 0 20px; letter-spacing:-0.01em; max-width:20ch;
  }
  .cta-band .row{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;}
  .cta-band p{max-width:42ch; color:#F6E4D8; font-size:1.05rem;}
  .cta-band .btn{border-color:var(--chalk);}
  .cta-band .btn:hover{background:var(--chalk); color:var(--rust);}

  /* ---------- FOOTER ---------- */
  footer{background:var(--ink-soft); color:var(--chalk-dim); padding:56px 0 36px;}
  .foot-grid{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid rgba(243,238,226,0.15);}
  .foot-grid .brand{color:var(--chalk);}
  .foot-cols{display:flex; gap:64px; flex-wrap:wrap;}
  .foot-col h4{font-size:0.85rem; color:var(--brass); margin:0 0 14px; font-weight:600;}
  .foot-col p, .foot-col a{display:block; font-size:0.92rem; color:var(--chalk-dim); text-decoration:none; margin-bottom:8px;}
  .foot-col a:hover{color:var(--chalk);}
  .foot-bottom{padding-top:24px; display:flex; justify-content:space-between; font-size:0.82rem; color:#8A8177; flex-wrap:wrap; gap:10px;}

  /* ---------- INTERIOR PAGE HEADER (About / Classes / Gallery / Contact) ---------- */
  .page-header{background:var(--ink); color:var(--chalk); padding:64px 0 56px;}
  .page-header .eyebrow-line{margin-bottom:18px;}
  .page-header h1{
    font-family:var(--serif-display); font-weight:700; font-size:clamp(2.2rem,4.4vw,3.2rem);
    letter-spacing:-0.015em; margin:0 0 18px; line-height:1.02;
  }
  .page-header p.lede{font-size:1.08rem; color:var(--chalk-dim); max-width:56ch; margin:0;}

  /* ---------- GENERIC SECTION HELPERS ---------- */
  .section{padding:96px 0;}
  .section.tight{padding:72px 0;}
  .section.on-chalk{background:var(--chalk);}
  .section.on-ink{background:var(--ink); color:var(--chalk);}
  .section.on-verde{background:var(--verde); color:var(--chalk);}
  .section .intro h2{
    font-family:var(--serif-display); font-weight:700; font-size:clamp(1.8rem,3.2vw,2.4rem);
    margin:0 0 16px; letter-spacing:-0.01em;
  }
  .section .intro p{font-size:1.08rem; color:var(--ink-soft); max-width:60ch;}
  .section.on-ink .intro p, .section.on-verde .intro p{color:var(--chalk-dim);}

  /* ---------- ABOUT: story block + values strip ---------- */
  .story{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;}
  .story .figure-block{
    aspect-ratio:4/5; border-radius:2px; overflow:hidden; position:relative;
  }
  .story .figure-block img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .story .figure-block .tag{
    position:absolute; left:20px; bottom:20px; color:var(--chalk-dim); font-size:0.78rem;
    background:rgba(28,23,18,0.55); padding:5px 12px; border-radius:20px;
  }
  .story .copy p{font-size:1.05rem; color:var(--ink-soft); margin:0 0 20px; max-width:58ch;}
  .story .copy p:last-child{margin-bottom:0;}
  @media (max-width:860px){ .story{grid-template-columns:1fr;} }

  .values-strip{display:grid; grid-template-columns:repeat(3,1fr); border-top:1.5px solid var(--rope); margin-top:64px;}
  .value{padding:28px 28px 0;}
  .value:not(:last-child){border-right:1.5px solid var(--rope);}
  .value .num{font-family:var(--serif-display); font-weight:700; color:var(--brass); font-size:0.95rem; margin-bottom:10px;}
  .value h3{margin:0 0 8px; font-size:1.1rem; font-weight:600;}
  .value p{margin:0; color:var(--ink-soft); font-size:0.95rem; max-width:30ch;}
  @media (max-width:720px){
    .values-strip{grid-template-columns:1fr;}
    .value{border-right:none !important; border-bottom:1.5px solid var(--rope); padding-bottom:24px; margin-bottom:8px;}
  }

  /* Mestre / instructor card */
  .instructor{display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:center; margin-top:64px;}
  .instructor .portrait{
    aspect-ratio:1/1; border-radius:50%; overflow:hidden;
    background:linear-gradient(165deg,#33513F 0%,#1C1712 70%); position:relative;
  }
  .instructor .name{font-family:var(--serif-display); font-weight:700; font-size:1.3rem; margin:0 0 4px;}
  .instructor .role{color:var(--rust); font-size:0.92rem; font-weight:600; margin-bottom:14px;}
  .instructor p.bio{margin:0; color:var(--ink-soft); max-width:60ch;}
  @media (max-width:640px){ .instructor{grid-template-columns:120px 1fr; gap:24px;} }

  /* ---------- CLASSES page: level guide cards (rows, not shadowed cards) ---------- */
  .level-list{border-top:1.5px solid var(--ink); margin-top:48px;}
  .level-row{
    display:grid; grid-template-columns:200px 1fr; gap:32px;
    padding:32px 0; border-bottom:1.5px solid var(--rope);
  }
  .level-row .level-name{font-family:var(--serif-display); font-weight:700; font-size:1.3rem;}
  .level-row .level-tag{display:block; font-size:0.85rem; color:var(--rust); font-weight:600; margin-top:6px;}
  .level-row p{margin:0; color:var(--ink-soft); max-width:60ch; font-size:1rem;}
  @media (max-width:640px){ .level-row{grid-template-columns:1fr; gap:8px;} }

  .faq-list{margin-top:48px; border-top:1.5px solid var(--ink);}
  .faq-item{border-bottom:1.5px solid var(--rope);}
  .faq-item summary{
    padding:22px 0; cursor:pointer; font-weight:600; font-size:1.05rem;
    display:flex; justify-content:space-between; align-items:center; list-style:none;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:'+'; font-family:var(--serif-display); font-size:1.4rem; color:var(--rust);
    transition:transform .2s ease;
  }
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item .faq-a{margin:0 0 24px; color:var(--ink-soft); max-width:64ch;}

  /* ---------- GALLERY page: mixed-ratio grid ---------- */
  .gallery-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:16px;
  }
  .g-item{
    position:relative; border-radius:2px; overflow:hidden;
    background:linear-gradient(155deg,#2A231C,#1C1712 55%,#33513F 130%);
  }
  .g-item::after{
    content:''; position:absolute; inset:0;
    background-image:repeating-linear-gradient(115deg, rgba(199,154,59,0.07) 0 2px, transparent 2px 24px);
  }
  .g-item .g-label{
    position:absolute; left:14px; bottom:12px; font-size:0.72rem; color:var(--chalk-dim);
    background:rgba(28,23,18,0.55); padding:4px 10px; border-radius:20px;
  }
  .g-item.tall{grid-row:span 2; aspect-ratio:3/5;}
  .g-item.wide{grid-column:span 2; aspect-ratio:16/9;}
  .g-item.sq{aspect-ratio:1/1;}
  @media (max-width:860px){
    .gallery-grid{grid-template-columns:repeat(2,1fr);}
    .g-item.wide{grid-column:span 2;}
  }
  @media (max-width:480px){
    .gallery-grid{grid-template-columns:1fr;}
    .g-item.wide, .g-item.tall{grid-column:span 1; grid-row:span 1; aspect-ratio:4/3;}
  }

  /* ---------- CONTACT page ---------- */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px;}
  .contact-form{display:flex; flex-direction:column; gap:20px;}
  .field label{display:block; font-size:0.88rem; font-weight:600; margin-bottom:8px; color:var(--ink-soft);}
  .field input, .field textarea{
    width:100%; border:1.5px solid var(--rope); background:var(--chalk); color:var(--ink);
    font-family:var(--sans); font-size:1rem; padding:12px 14px; border-radius:2px;
    transition:border-color .2s ease;
  }
  .field input:focus, .field textarea:focus{border-color:var(--rust); outline:none;}
  .field textarea{resize:vertical; min-height:120px;}
  .contact-form .btn.solid{align-self:flex-start; border:none; cursor:pointer;}
  .contact-info h3{font-family:var(--serif-display); font-size:1.2rem; margin:0 0 10px;}
  .contact-info .info-block{margin-bottom:32px;}
  .contact-info .info-block p{margin:2px 0; color:var(--ink-soft);}
  .map-frame{
    margin-top:8px; aspect-ratio:16/10; border-radius:2px; overflow:hidden;
    background:linear-gradient(155deg,#2A231C,#1C1712 60%,#33513F 140%); position:relative;
  }
  .map-frame .g-label{position:absolute; left:14px; bottom:12px; font-size:0.72rem; color:var(--chalk-dim); background:rgba(28,23,18,.55); padding:4px 10px; border-radius:20px;}
  @media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }