/* ==========================================================================
   JULIANO BRAZILIAN JIU-JITSU DUBLIN — DESIGN SYSTEM
   --------------------------------------------------------------------------
   Tokens
   Color    — ink:#111111  paper:#FFFFFF  mat:#0B7A3B  cord:#D4AF37  chalk:#F5F5F5
   Type     — display: 'Bebas Neue' (headlines, wide tracking, uppercase)
              body: 'Inter' (paragraphs, UI)
              alt: 'Manrope' (labels, nav, small caps data)
   Signature — the "belt bar": a black stripe carrying a green field and a
              gold rank stripe, used as a section-marker in place of generic
              numbering. It stands for promotion — the site's core promise.
   ========================================================================== */

:root{
  --ink:#111111;
  --ink-soft:#1c1c1c;
  --paper:#FFFFFF;
  --mat:#0B7A3B;
  --mat-deep:#075C2C;
  --cord:#D4AF37;
  --cord-soft:#e8cc6b;
  --chalk:#F5F5F5;
  --chalk-line:#e4e4e4;

  --font-display:'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:'Inter', -apple-system, sans-serif;
  --font-alt:'Manrope', -apple-system, sans-serif;

  --space-section: clamp(4rem, 8vw, 8rem);
  --space-block: clamp(2rem, 4vw, 3.5rem);
  --radius-card: 18px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* Focus visibility — never remove */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--cord);
  outline-offset:3px;
  border-radius:4px;
}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--ink); color:var(--paper); padding:1rem 1.5rem;
  font-family:var(--font-alt); font-weight:700;
}
.skip-link:focus{left:1rem; top:1rem;}

/* ---------- Typography ---------- */
h1,h2,h3,.font-display{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.95;
  font-weight:400;
}
h1{font-size:clamp(2.75rem, 7vw, 6rem);}
h2{font-size:clamp(2.1rem, 5vw, 3.75rem);}
h3{font-size:clamp(1.4rem, 3vw, 2rem);}
.eyebrow{
  font-family:var(--font-alt);
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.75rem;
  color:var(--mat);
}
.eyebrow.on-dark{color:var(--cord-soft);}
p{line-height:1.7;}
.lede{font-size:clamp(1.05rem,2vw,1.25rem); line-height:1.6; color:#4a4a4a;}

/* ---------- Belt bar (signature element) ---------- */
.belt-bar{
  display:flex; align-items:stretch; height:10px; width:64px; border-radius:2px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.belt-bar span{flex:1;}
.belt-bar .b-black{background:var(--ink); flex:3;}
.belt-bar .b-green{background:var(--mat); flex:5;}
.belt-bar .b-gold{background:var(--cord); flex:2;}
.belt-bar.small{width:44px; height:7px;}
.belt-divider{
  position:relative; height:1px; background:var(--chalk-line); margin:0 auto;
}
.belt-divider::after{
  content:''; position:absolute; left:50%; top:-3px; transform:translateX(-50%);
  width:52px; height:7px; border-radius:2px;
  background:linear-gradient(90deg, var(--ink) 0 30%, var(--mat) 30% 78%, var(--cord) 78% 100%);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-alt); font-weight:700; font-size:.95rem;
  padding:.95rem 1.9rem; border-radius:var(--radius-pill);
  border:2px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease-out), background-color .25s, border-color .25s, color .25s, box-shadow .25s;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--mat); color:var(--paper);}
.btn-primary:hover{background:var(--mat-deep); box-shadow:0 8px 24px -8px rgba(11,122,59,.6);}
.btn-gold{background:var(--cord); color:var(--ink);}
.btn-gold:hover{background:var(--cord-soft); box-shadow:0 8px 24px -8px rgba(212,175,55,.55);}
.btn-outline-dark{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn-outline-dark:hover{background:var(--ink); color:var(--paper);}
.btn-outline-light{border-color:rgba(255,255,255,.55); color:var(--paper); background:transparent;}
.btn-outline-light:hover{background:var(--paper); color:var(--ink); border-color:var(--paper);}
.btn-ghost{color:var(--ink); background:transparent; padding:.6rem .2rem;}
.btn-ghost:hover{color:var(--mat);}
.btn-whatsapp{background:#1f9e4a; color:#fff;}
.btn-whatsapp:hover{background:#188039;}
.btn-block{width:100%;}

/* ---------- Cards ---------- */
.card{
  background:var(--paper);
  border-radius:var(--radius-card);
  border:1px solid var(--chalk-line);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s;
}
.card:hover{transform:translateY(-6px); box-shadow:0 24px 48px -20px rgba(17,17,17,.25); border-color:transparent;}
.card-dark{background:var(--ink); color:var(--paper); border-color:#2a2a2a;}
.card-dark:hover{box-shadow:0 24px 48px -20px rgba(0,0,0,.6);}

/* Glass utility */
.glass{
  background:rgba(17,17,17,.55);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);
}
.glass-light{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.5);
}

/* Badge */
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-alt); font-weight:700; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase;
  padding:.35rem .8rem; border-radius:var(--radius-pill);
  background:var(--chalk); color:var(--ink);
}
.badge-gold{background:rgba(212,175,55,.15); color:#8a6f1f;}
.badge-green{background:rgba(11,122,59,.12); color:var(--mat-deep);}
.badge-dark{background:var(--ink); color:var(--paper);}

/* ---------- Section rhythm ---------- */
.section{padding:var(--space-section) 0;}
.section-title{margin-bottom:1rem;}
.section-subtitle{max-width:640px;}
.container-x{width:100%; max-width:1280px; margin-inline:auto; padding-inline:1.25rem;}
@media(min-width:768px){.container-x{padding-inline:2.5rem;}}

.bg-chalk{background:var(--chalk);}
.bg-ink{background:var(--ink); color:var(--paper);}
.bg-mat{background:var(--mat); color:var(--paper);}

/* ---------- Nav ---------- */
#site-header{position:sticky; top:0; z-index:100; transition:background-color .35s, box-shadow .35s, padding .35s;}
#site-header.scrolled{background:rgba(17,17,17,.92); backdrop-filter:blur(10px); box-shadow:0 8px 30px -12px rgba(0,0,0,.5);}
.nav-link{
  font-family:var(--font-alt); font-weight:600; font-size:.92rem;
  color:rgba(255,255,255,.85); position:relative; padding:.4rem 0;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--cord); transition:width .3s var(--ease-out);
}
.nav-link:hover::after,.nav-link.active::after{width:100%;}
.nav-link.active{color:var(--paper);}

#scroll-progress{position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--mat),var(--cord)); z-index:110; transition:width .1s linear;}

/* Mobile menu */
#mobile-menu{
  position:fixed; inset:0; z-index:120; background:var(--ink);
  transform:translateX(100%); transition:transform .45s var(--ease-out);
  display:flex; flex-direction:column;
}
#mobile-menu.open{transform:translateX(0);}

/* Floating buttons */
.fab{
  position:fixed; z-index:90; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.45);
  transition:transform .3s var(--ease-out), opacity .3s;
}
.fab:hover{transform:scale(1.08);}
#whatsapp-fab{right:1.25rem; bottom:1.25rem; background:#25D366; color:#fff;}
#totop-fab{right:1.25rem; bottom:5.5rem; background:var(--ink); color:#fff; opacity:0; pointer-events:none;}
#totop-fab.show{opacity:1; pointer-events:auto;}

/* Animated counters */
.counter{font-family:var(--font-display); font-size:clamp(2.5rem,6vw,4.25rem); line-height:1;}

/* Testimonial carousel */
.carousel-track{display:flex; transition:transform .6s var(--ease-out);}
.carousel-slide{flex:0 0 100%;}
.carousel-dots{display:flex; gap:.5rem; justify-content:center;}
.carousel-dot{width:9px; height:9px; border-radius:50%; background:var(--chalk-line); border:none; cursor:pointer; transition:background .25s, transform .25s;}
.carousel-dot.active{background:var(--mat); transform:scale(1.25);}

/* FAQ accordion */
.faq-item{border-bottom:1px solid var(--chalk-line);}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  text-align:left; padding:1.4rem 0; background:none; border:none; cursor:pointer;
  font-family:var(--font-alt); font-weight:700; font-size:1.05rem; color:var(--ink);
}
.faq-icon{transition:transform .3s var(--ease-out); flex-shrink:0;}
.faq-item[aria-expanded="true"] .faq-icon{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease-out);}
.faq-a-inner{padding-bottom:1.4rem; color:#4a4a4a;}

/* Gallery lightbox */
.gallery-tile{position:relative; overflow:hidden; border-radius:var(--radius-card); cursor:pointer;}
.gallery-tile img{transition:transform .6s var(--ease-out);}
.gallery-tile:hover img{transform:scale(1.08);}
#lightbox{position:fixed; inset:0; z-index:200; background:rgba(17,17,17,.96); display:none; align-items:center; justify-content:center;}
#lightbox.open{display:flex;}

/* Forms */
.field{margin-bottom:1.25rem;}
.field label{display:block; font-family:var(--font-alt); font-weight:700; font-size:.85rem; margin-bottom:.45rem;}
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--chalk-line); border-radius:10px;
  font-family:var(--font-body); font-size:1rem; background:var(--paper); transition:border-color .25s, box-shadow .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--mat); box-shadow:0 0 0 4px rgba(11,122,59,.12); outline:none;}
.field .error{color:#b3261e; font-size:.82rem; margin-top:.35rem; display:none;}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#b3261e;}
.field.has-error .error{display:block;}
.hp-field{position:absolute; left:-9999px; opacity:0;}

/* Cookie banner */
#cookie-banner{position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:150; transform:translateY(140%); transition:transform .5s var(--ease-out);}
#cookie-banner.show{transform:translateY(0);}

/* Placeholder media blocks (used until real photography is uploaded) */
.ph-media{
  position:relative; overflow:hidden; background:
    linear-gradient(135deg, var(--ink) 0%, #262626 45%, var(--mat-deep) 100%);
}
.ph-media::before{
  content:''; position:absolute; inset:0; opacity:.15;
  background-image:repeating-linear-gradient(45deg, var(--cord) 0 2px, transparent 2px 22px);
}
.ph-tag{
  position:absolute; bottom:.75rem; left:.75rem; font-family:var(--font-alt); font-size:.68rem;
  letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.4); padding:.3rem .6rem; border-radius:6px;
}

/* Skeleton for section fade-in via AOS fallback handled by AOS itself */
.marquee{display:flex; gap:3rem; white-space:nowrap;}

/* Utility */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}