/*
Theme Name: Sabda Sunda Official — Content Update
Theme URI: https://example.com/sabda-sunda
Author: OpenAI
Description: Responsive one-page WordPress theme for Perguruan Pencak Silat Sabda Sunda. Cinematic black, crimson, and gold visual identity.
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: sabda-sunda
*/
:root{--ss-red:#d20c18;--ss-red-dark:#79080d;--ss-gold:#d9b66a;--ss-gold-light:#f7e6b7;--ss-ink:#070707;--ss-panel:#101010;--ss-white:#f8f4e9;--ss-muted:#c7c0b4;--ss-max:1240px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--ss-ink);color:var(--ss-white);font-family:Arial,Helvetica,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button,a{ -webkit-tap-highlight-color:transparent}
.ss-container{width:min(var(--ss-max),calc(100% - 48px));margin-inline:auto}
.ss-header{position:absolute;z-index:20;top:0;left:0;right:0;border-bottom:1px solid rgba(217,182,106,.24);background:linear-gradient(180deg,rgba(0,0,0,.88),rgba(0,0,0,.34))}
.ss-nav{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.ss-brand{display:flex;align-items:center;gap:13px;min-width:245px}
.ss-brand-mark{width:66px;height:66px;border:2px solid var(--ss-gold);border-radius:50%;display:grid;place-items:center;color:var(--ss-gold);font-family:Georgia,serif;font-weight:bold;font-size:24px;box-shadow:inset 0 0 0 4px rgba(210,12,24,.45);background:#120d08}
.ss-brand small{display:block;font:600 10px/1.5 Georgia,serif;letter-spacing:1px;color:var(--ss-gold-light)}
.ss-brand strong{display:block;font:700 clamp(17px,2vw,27px)/1.05 Georgia,serif;letter-spacing:.5px}
.ss-menu{display:flex;align-items:center;gap:clamp(14px,2.1vw,30px);font-size:12px;font-weight:700;letter-spacing:.8px}
.ss-menu a{padding:12px 0;color:#f5eee1;transition:color .2s}
.ss-menu a:hover,.ss-menu a:focus{color:var(--ss-gold)}
.ss-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:13px 22px;border:1px solid var(--ss-red);border-radius:4px;background:linear-gradient(135deg,#e01820,#85080d);color:white;font-weight:800;font-size:12px;letter-spacing:.8px;text-align:center;box-shadow:0 8px 24px rgba(120,0,0,.22);transition:transform .2s,filter .2s}
.ss-button:hover{transform:translateY(-2px);filter:brightness(1.12)}
.ss-button-outline{background:rgba(0,0,0,.45);border-color:var(--ss-gold);box-shadow:none}
.ss-menu-cta{white-space:nowrap}
.ss-toggle{display:none;background:#100b08;border:1px solid var(--ss-gold);color:var(--ss-gold);font-size:25px;width:44px;height:44px;border-radius:4px}
.ss-hero{min-height:680px;position:relative;display:flex;align-items:center;overflow:hidden;padding:135px 0 50px;background:#050505}
.ss-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.87) 31%,rgba(0,0,0,.30) 61%,rgba(0,0,0,.08) 100%),url('assets/images/sabda-sunda-hero-bg.jpg');background-size:cover;background-position:center right;opacity:.96}
.ss-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--ss-red),var(--ss-gold),var(--ss-red))}
.ss-hero-content{position:relative;z-index:1;max-width:660px}
.ss-eyebrow{display:flex;align-items:center;gap:12px;color:var(--ss-gold);font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:700}
.ss-eyebrow:before{content:"";width:32px;height:1px;background:var(--ss-gold)}
.ss-hero h1{font:900 clamp(42px,6vw,78px)/.98 Georgia,'Times New Roman',serif;letter-spacing:-1.8px;text-transform:uppercase;margin:22px 0;color:#fff4dd;text-shadow:0 4px 0 rgba(96,40,0,.45)}
.ss-hero h1 span{display:block;color:var(--ss-gold)}
.ss-lead{max-width:470px;color:#eee8df;font:clamp(16px,1.55vw,21px)/1.45 Georgia,serif;margin:22px 0 28px}
.ss-actions{display:flex;flex-wrap:wrap;gap:12px}
.ss-pillars{position:relative;background:linear-gradient(100deg,#080808,#121212 50%,#080808);border-bottom:1px solid rgba(217,182,106,.55);padding:28px 0}
.ss-pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.ss-pillar{display:flex;gap:17px;align-items:center;padding:8px 24px;border-right:1px solid rgba(217,182,106,.55)}
.ss-pillar:first-child{padding-left:0}.ss-pillar:last-child{border:0;padding-right:0}
.ss-pillar-icon{flex:0 0 54px;width:54px;height:54px;border:1px solid var(--ss-gold);border-radius:50%;display:grid;place-items:center;color:var(--ss-gold);font-size:23px}
.ss-pillar h3{font:700 14px Georgia,serif;color:var(--ss-gold-light);margin:0 0 6px;text-transform:uppercase}
.ss-pillar p{font:13px/1.45 Georgia,serif;color:#d2cbc0;margin:0}
.ss-section{padding:86px 0}
.ss-section-dark{background:#0c0c0c}
.ss-section-red{background:radial-gradient(ellipse at top right,rgba(210,12,24,.2),transparent 55%),#100909}
.ss-section-head{text-align:center;max-width:760px;margin:0 auto 42px}
.ss-section-head .ss-eyebrow{justify-content:center}
.ss-section-head h2{font:800 clamp(30px,4vw,48px)/1.1 Georgia,serif;margin:15px 0;color:var(--ss-gold-light)}
.ss-section-head p{color:var(--ss-muted);margin:0}
.ss-about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.ss-about-art{min-height:340px;border:1px solid rgba(217,182,106,.4);background:radial-gradient(circle at center,rgba(210,12,24,.22),transparent 56%),linear-gradient(135deg,#17100d,#050505);display:grid;place-items:center;position:relative;overflow:hidden}
.ss-about-art:before,.ss-about-art:after{content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(217,182,106,.25);border-radius:50%}
.ss-about-art:after{width:210px;height:210px}
.ss-emblem{position:relative;z-index:1;width:180px;height:180px;border:5px double var(--ss-gold);border-radius:50%;display:grid;place-items:center;text-align:center;color:var(--ss-gold-light);font:700 16px Georgia,serif;box-shadow:0 0 45px rgba(210,12,24,.18),inset 0 0 0 10px rgba(210,12,24,.22)}
.ss-about-copy h2{font:800 clamp(28px,3vw,42px)/1.12 Georgia,serif;margin:0 0 18px;color:var(--ss-gold-light)}
.ss-about-copy p{color:var(--ss-muted)}
.ss-checks{list-style:none;padding:0;margin:24px 0}
.ss-checks li{margin:10px 0;padding-left:27px;position:relative;color:#eee4d4}
.ss-checks li:before{content:"✦";position:absolute;left:0;color:var(--ss-gold)}
.ss-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ss-card{padding:28px;border:1px solid rgba(217,182,106,.28);background:linear-gradient(145deg,#171311,#090909);min-height:220px;transition:transform .2s,border-color .2s}
.ss-card:hover{transform:translateY(-4px);border-color:var(--ss-gold)}
.ss-card-icon{font-size:27px;color:var(--ss-gold);margin-bottom:16px}
.ss-card h3{font:700 21px Georgia,serif;color:var(--ss-gold-light);margin:0 0 10px}
.ss-card p{font-size:14px;color:var(--ss-muted);margin:0}
.ss-programs .ss-card{border-top:3px solid var(--ss-red)}
.ss-gallery-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px}
.ss-gallery-tile{min-height:170px;display:flex;align-items:end;padding:20px;background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.05)),radial-gradient(circle at 60% 30%,rgba(210,12,24,.35),transparent 45%),#1a100d;border:1px solid rgba(217,182,106,.22)}
.ss-gallery-tile strong{font:700 18px Georgia,serif;color:var(--ss-gold-light)}
.ss-join{padding:58px 0;background:linear-gradient(110deg,#79080d,#1a0707 65%,#090909);border-block:1px solid var(--ss-gold)}
.ss-join-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}
.ss-join h2{font:800 clamp(28px,4vw,42px)/1.1 Georgia,serif;margin:0 0 8px}
.ss-join p{margin:0;color:#e7d8c8}
.ss-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.ss-contact-box{padding:26px;border:1px solid rgba(217,182,106,.3);background:#111}
.ss-contact-box h3{color:var(--ss-gold-light);font:700 22px Georgia,serif;margin-top:0}
.ss-contact-box p{color:var(--ss-muted)}
.ss-footer{padding:28px 0;background:#070707;border-top:1px solid rgba(217,182,106,.35);text-align:center}
.ss-footer strong{display:block;letter-spacing:8px;color:var(--ss-gold-light);font:italic 20px Georgia,serif}
.ss-footer p{margin:8px 0 0;color:#c7b7a0;font:italic 13px Georgia,serif}
.ss-footer small{display:block;margin-top:14px;color:#777;font-size:11px}
.ss-admin-note{padding:12px;background:#241818;color:#f6d9a1;text-align:center;font-size:12px}
@media(max-width:1020px){.ss-menu{gap:13px;font-size:11px}.ss-brand{min-width:215px}.ss-menu-cta{display:none}.ss-hero{min-height:640px}.ss-hero:before{background-position:62% center}.ss-pillar{padding-inline:14px}}
@media(max-width:760px){
 .ss-container{width:min(100% - 32px,var(--ss-max))}
 .ss-header{position:absolute}.ss-nav{min-height:76px;gap:12px}
 .ss-brand{min-width:0;gap:9px}.ss-brand-mark{width:49px;height:49px;font-size:18px}.ss-brand small{font-size:8px;letter-spacing:.5px}.ss-brand strong{font-size:19px}
 .ss-toggle{display:block;flex-shrink:0}
 .ss-menu{display:none;position:absolute;top:75px;left:16px;right:16px;padding:12px 18px;background:rgba(5,5,5,.98);border:1px solid rgba(217,182,106,.45);flex-direction:column;align-items:stretch;gap:0}
 .ss-menu.is-open{display:flex}.ss-menu a{padding:13px 4px;border-bottom:1px solid rgba(217,182,106,.13);font-size:12px}.ss-menu a:last-child{border-bottom:0}
 .ss-hero{min-height:710px;align-items:flex-end;padding:125px 0 40px}
 .ss-hero:before{background-image:linear-gradient(0deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.83) 42%,rgba(0,0,0,.25) 100%),url('assets/images/sabda-sunda-hero-bg.jpg');background-position:63% center}
 .ss-hero-content{max-width:600px}.ss-eyebrow{font-size:9px;letter-spacing:2px}.ss-hero h1{font-size:clamp(38px,11vw,60px);letter-spacing:-1px;margin:16px 0}.ss-lead{font-size:17px;max-width:410px;margin:16px 0 22px}
 .ss-actions{display:grid;grid-template-columns:1fr 1fr}.ss-button{padding:12px 10px;font-size:10px;min-height:46px}
 .ss-pillar-grid{grid-template-columns:1fr;gap:0}.ss-pillar,.ss-pillar:first-child,.ss-pillar:last-child{padding:17px 0;border-right:0;border-bottom:1px solid rgba(217,182,106,.25)}.ss-pillar:last-child{border-bottom:0}
 .ss-pillar-icon{width:48px;height:48px;flex-basis:48px}
 .ss-section{padding:60px 0}.ss-about-grid,.ss-contact-grid{grid-template-columns:1fr;gap:28px}.ss-about-art{min-height:250px}
 .ss-cards{grid-template-columns:1fr;gap:14px}.ss-card{min-height:0;padding:24px}
 .ss-gallery-grid{grid-template-columns:1fr 1fr}.ss-gallery-tile:first-child{grid-column:1/-1;min-height:180px}.ss-gallery-tile{min-height:140px;padding:15px}
 .ss-join-inner{align-items:flex-start;flex-direction:column}.ss-join .ss-button{width:100%}
 .ss-footer strong{letter-spacing:5px;font-size:17px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* Official emblem in header */
.ss-brand-logo{display:block;flex:0 0 66px;width:66px;height:66px;object-fit:cover;border-radius:50%;border:2px solid var(--ss-gold);box-shadow:0 0 0 3px rgba(210,12,24,.42),0 4px 16px rgba(0,0,0,.45);background:#100b08}
@media(max-width:760px){.ss-brand-logo{flex-basis:49px;width:49px;height:49px}}


/* V1.2 mobile header fix: hide desktop links until the hamburger opens */
.ss-skip-link{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
.ss-skip-link:focus{left:12px!important;top:12px!important;width:auto!important;height:auto!important;clip:auto!important;z-index:99999!important;padding:10px 14px!important;background:#fff!important;color:#111!important;border:2px solid #d9b66a!important}
@media(max-width:760px){
  .ss-header{z-index:9999!important}
  .ss-header .ss-nav{position:relative!important;display:flex!important;flex-wrap:nowrap!important;min-height:76px!important}
  .ss-header .ss-toggle{display:block!important;position:relative!important;z-index:10002!important;margin-left:auto!important}
  .ss-header #ss-menu.ss-menu{display:none!important;position:absolute!important;top:76px!important;left:0!important;right:0!important;width:100%!important;max-height:calc(100vh - 100px)!important;overflow-y:auto!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:10px 18px!important;margin:0!important;background:rgba(5,5,5,.98)!important;border:1px solid rgba(217,182,106,.55)!important;box-shadow:0 14px 30px rgba(0,0,0,.55)!important}
  .ss-header #ss-menu.ss-menu.is-open{display:flex!important}
  .ss-header #ss-menu.ss-menu a{display:block!important;width:100%!important;padding:13px 4px!important;border-bottom:1px solid rgba(217,182,106,.18)!important;font-size:12px!important;line-height:1.4!important}
  .ss-header #ss-menu.ss-menu a:last-child{border-bottom:0!important}
  .ss-header .ss-menu-cta{display:none!important}
  .ss-hero{padding-top:112px!important}
}


/* V1.3: use a clean background crop; the original mockup had UI copy baked into the artwork. */
@media(max-width:760px){
  .ss-header .ss-menu:not(.is-open){display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
  .ss-header .ss-menu.is-open{display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
  .ss-hero:before{
    background-image:linear-gradient(0deg,rgba(0,0,0,.97) 0%,rgba(0,0,0,.79) 48%,rgba(0,0,0,.18) 100%),url('assets/images/sabda-sunda-hero-bg.jpg')!important;
    background-position:66% center!important;
    background-size:cover!important;
  }
}
@media(min-width:761px){
  .ss-hero:before{
    background-image:linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.86) 31%,rgba(0,0,0,.22) 61%,rgba(0,0,0,.04) 100%),url('assets/images/sabda-sunda-hero-bg.jpg')!important;
    background-position:center right!important;
    background-size:cover!important;
  }
}

/* V1.4 official values, motto, slogan, prohibitions, and pledge sections */
.ss-values-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.ss-values-panel{padding:clamp(22px,3vw,34px);border:1px solid rgba(217,182,106,.36);background:linear-gradient(145deg,#171311,#090909);position:relative;overflow:hidden}.ss-values-panel:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--ss-red),var(--ss-gold))}.ss-values-panel h3{font:800 clamp(22px,2.5vw,30px)/1.1 Georgia,serif;color:var(--ss-gold-light);margin:0 0 18px;text-transform:uppercase}.ss-values-panel p{color:#eee4d4;font:clamp(16px,1.7vw,20px)/1.65 Georgia,serif;margin:0}.ss-values-panel ol{margin:0;padding-left:24px;color:#eee4d4}.ss-values-panel ol li{padding:0 0 11px 5px}.ss-values-panel ol li::marker{color:var(--ss-gold);font-weight:800}.ss-motto{font:italic clamp(18px,2.2vw,25px)/1.75 Georgia,serif!important;color:#fff0cf!important}.ss-slogan-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.ss-slogan-item{padding:24px 8px;text-align:center;border:1px solid rgba(217,182,106,.42);background:linear-gradient(160deg,#240b0c,#090909);font:800 clamp(14px,1.8vw,22px) Georgia,serif;letter-spacing:1px;color:var(--ss-gold-light)}.ss-slogan-item:last-child{background:linear-gradient(145deg,#d20c18,#79080d);border-color:var(--ss-gold);color:#fff}.ss-prohibitions{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.ss-prohibition{padding:18px 8px;text-align:center;background:#100c0b;border:1px solid rgba(217,182,106,.4);color:var(--ss-gold-light);font:800 clamp(14px,1.6vw,20px) Georgia,serif}.ss-prohibition span{display:block;color:var(--ss-red);font-size:10px;letter-spacing:2px;margin-top:7px}.ss-pledge{max-width:900px;margin:0 auto;counter-reset:pledge;list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.ss-pledge li{counter-increment:pledge;position:relative;padding:16px 12px 16px 56px;border-bottom:1px solid rgba(217,182,106,.2);color:#eee4d4;min-height:72px}.ss-pledge li:before{content:counter(pledge,decimal-leading-zero);position:absolute;left:0;top:13px;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--ss-gold);color:var(--ss-gold);font:700 13px Georgia,serif}
@media(max-width:760px){.ss-values-grid{grid-template-columns:1fr}.ss-slogan-grid{grid-template-columns:repeat(2,1fr)}.ss-slogan-item:last-child{grid-column:1/-1}.ss-prohibitions{grid-template-columns:repeat(2,1fr)}.ss-prohibition:last-child{grid-column:1/-1}.ss-pledge{grid-template-columns:1fr}}