/*
Theme Name: punjasalva
Template: generatepress
*/

/* ── GLOBAL ── */
:root{
  --red:#a8001a;--red-dark:#850015;--red-light:#f5e0e4;
  --white:#fff;--gray-light:#F4F4F4;--gray-border:#E5E5E5;
  --gray-text:#6A6A6A;--text:#181818;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body,body *,h1,h2,h3,h4,h5,h6,p,a,span,li,button,input,select,textarea{
  font-family:'Plus Jakarta Sans',sans-serif !important;
}

/* ── HIDE GP ── */
.site-header,.main-navigation,#site-navigation,.site-footer,
.footer-widgets,.footer-bar,.nav-primary,.widget-area{display:none !important}
.site-content{padding-top:0 !important;margin:0 !important}
.site-main{margin:0 !important}

/* ══════════════════════════════════
   NAV — HEADER 4 STYLE
   White bg · Red left border · Underline hover
══════════════════════════════════ */
nav#navbar{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  background:#fff;
  border-left:5px solid var(--red);
  border-bottom:1px solid var(--gray-border);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  padding:0 48px;
}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:72px;max-width:1400px;margin:0 auto;
}

/* LOGO */
.nav-logo{
  display:flex;align-items:center;gap:12px;
  text-decoration:none !important;flex-shrink:0;
}
.nav-logo-img{height:42px;width:auto;object-fit:contain;display:block}
.logo-sq{
  width:40px;height:40px;background:var(--red);
  display:flex;align-items:center;justify-content:center;
  font-size:14px !important;font-weight:800 !important;color:#fff !important;flex-shrink:0;
}
.nav-logo-divider{width:1px;height:30px;background:var(--gray-border);flex-shrink:0}
.logo-name{font-size:19px !important;font-weight:800 !important;color:var(--text) !important;letter-spacing:.5px}
.logo-sub{font-size:9px !important;font-weight:600 !important;letter-spacing:1.8px;color:var(--gray-text) !important;text-transform:uppercase;margin-top:2px}

/* LINKS */
.nav-links{
  display:flex;align-items:center;gap:0;
  list-style:none !important;margin:0 !important;padding:0 !important;
}
.nav-links li{margin:0 !important;padding:0 !important}
.nav-links a{
  font-size:14px !important;font-weight:600 !important;
  color:var(--gray-text) !important;
  text-decoration:none !important;
  padding:8px 13px !important;
  display:block;
  position:relative;
  transition:color .18s;
}
.nav-links a::after{
  content:'';position:absolute;
  bottom:0;left:13px;right:13px;
  height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:center;
  transition:transform .22s ease;
}
.nav-links a:hover{color:var(--red) !important}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.nav-cta{
  background:var(--red) !important;color:#fff !important;
  margin-left:8px;padding:10px 22px !important;
  font-weight:700 !important;
}
.nav-links a.nav-cta::after{display:none}
.nav-links a.nav-cta:hover{background:var(--red-dark) !important;color:#fff !important}

/* HAMBURGER */
.nav-hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;padding:8px;z-index:10;
  width:44px;height:44px;
}
.nav-hamburger span{
  display:block;width:22px;height:2px;background:var(--text);
  transition:all .28s;border-radius:2px;
}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */
footer{background:#a8001a !important;padding:56px 60px 28px !important;margin:0 !important}
.ft-wrap{max-width:1200px;margin:0 auto}
.ft-top{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:48px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.15)}
.ft-brand-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ft-logo-img{height:38px;width:auto;filter:brightness(0) invert(1);object-fit:contain}
.ft-logo-sq{width:32px;height:32px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:12px !important;font-weight:800 !important;color:#fff !important}
.ft-logo-name{font-size:15px !important;font-weight:800 !important;color:#fff !important;letter-spacing:.5px}
.ft-logo-sub{font-size:9px !important;font-weight:600 !important;letter-spacing:2px;color:rgba(255,255,255,.5) !important;text-transform:uppercase}
.ft-brand-desc{font-size:12px !important;color:rgba(255,255,255,.75) !important;line-height:1.85 !important;max-width:210px}
.ft-col h5{font-size:9px !important;font-weight:700 !important;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.5) !important;margin-bottom:16px !important}
.ft-col ul{list-style:none !important;margin:0 !important;padding:0 !important;display:flex;flex-direction:column;gap:9px}
.ft-col ul li{margin:0 !important;padding:0 !important}
.ft-col ul a{font-size:13px !important;color:rgba(255,255,255,.65) !important;text-decoration:none !important;transition:color .18s}
.ft-col ul a:hover{color:#fff !important}
.ft-contacts{list-style:none !important;margin:0 !important;padding:0 !important;display:flex;flex-direction:column;gap:12px}
.ft-contacts li{display:flex;align-items:flex-start;gap:8px;font-size:12px !important;color:rgba(255,255,255,.65) !important;line-height:1.65;margin:0 !important}
.ft-contacts svg{width:13px;height:13px;stroke:rgba(255,255,255,.85);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:2px}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;flex-wrap:wrap;gap:10px}
.ft-copy{font-size:11px !important;color:rgba(255,255,255,.38) !important}
.ft-slogan{font-size:9px !important;font-weight:700 !important;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5) !important}

/* ══════════════════════════════════
   MOBILE RESPONSIVE
══════════════════════════════════ */
@media (max-width:1100px){
  nav#navbar{padding:0 24px}
  .nav-links a{padding:8px 10px !important;font-size:13px !important}
}

@media (max-width:900px){
  /* Show hamburger, hide links */
  .nav-hamburger{display:flex !important}
  .nav-links{
    display:none !important;
    position:fixed;top:72px;left:0;right:0;bottom:0;
    background:#fff;
    flex-direction:column !important;gap:0 !important;
    align-items:stretch !important;
    overflow-y:auto;
    border-top:3px solid var(--red);
    padding:8px 0 40px;
    box-shadow:0 8px 32px rgba(0,0,0,.12);
  }
  .nav-links.open{display:flex !important}
  .nav-links li{width:100%}
  .nav-links a{
    font-size:16px !important;font-weight:600 !important;
    color:var(--text) !important;
    padding:16px 28px !important;
    border-bottom:1px solid var(--gray-border);
  }
  .nav-links a::after{display:none}
  .nav-links a:hover{color:var(--red) !important;background:#f5e0e4}
  .nav-links a.nav-cta{
    margin:16px 28px 0 !important;
    padding:14px 28px !important;
    text-align:center;
  }
  /* Overlay when menu open */
  body.nav-open::before{
    content:'';position:fixed;inset:0;
    background:rgba(0,0,0,.3);z-index:9998;top:72px;
  }

  /* HERO adjustments */
  .hero-content{padding:0 20px 60px !important}
  .hero h1{font-size:34px !important;letter-spacing:-0.5px !important}
  .hero-sub{font-size:15px !important;max-width:100% !important}

  /* SERVICE STRIP */
  .service-strip{flex-direction:column !important;height:auto !important}
  .sv-item{flex:none !important;padding:22px 20px !important;border-right:none !important;border-bottom:1px solid rgba(255,255,255,.12) !important}
  .sv-item:last-child{border-bottom:none !important}
  .sv-desc{max-height:none !important;opacity:1 !important;margin-top:8px !important}
  .sv-read{max-height:none !important;opacity:1 !important;margin-top:10px !important}
  .sv-num{display:none !important}

  /* ABOUT */
  .about-wrap{flex-direction:column !important;gap:40px !important;padding:0 20px !important}
  .about-visual{flex:none !important;width:100% !important}
  .about-badge{bottom:-10px;left:-6px}

  /* SECTIONS */
  .section-about,.section-why,.section-faq,.section-cta,
  .section,.lyr,.lyr-inner{padding-left:20px !important;padding-right:20px !important}
  .why-inner,.faq-inner,.iso-inner,.cta-wrap{padding-left:20px !important;padding-right:20px !important}

  /* WHY */
  .why-grid{grid-template-columns:1fr !important}

  /* ISO */
  .iso-strip{flex-direction:column !important}
  .iso-item{border-right:none !important;border-bottom:1px solid rgba(255,255,255,.18) !important;padding:24px 20px !important}
  .iso-item:last-child{border-bottom:none !important}
  .iso-top{flex-direction:column !important;gap:12px !important}
  .iso-count{font-size:60px !important;text-align:left !important}
  .iso-count-lbl{text-align:left !important}

  /* FAQ */
  .faq-wrap{flex-direction:column !important;gap:28px !important}
  .faq-left{flex:none !important;width:100% !important}

  /* CTA */
  .cta-wrap{flex-direction:column !important;gap:20px !important}
  .cta-right{flex-direction:column !important;align-items:flex-start !important;gap:12px !important}

  /* PAGE HERO */
  .page-hero{height:240px !important;padding:0 20px 36px !important;margin-top:72px !important}
  .page-hero h1{font-size:28px !important}
  .page-hero-sub{font-size:14px !important}

  /* TENTANG */
  .sejarah-wrap{grid-template-columns:1fr !important;gap:32px !important;padding:0 20px !important}
  .sejarah-visual{order:-1}
  .vm-grid,.nilai-grid{grid-template-columns:1fr !important}
  .masalah-grid{grid-template-columns:1fr !important;padding:0 20px !important}
  .masalah-intro{flex-direction:column !important;gap:12px !important;padding:0 20px !important}
  .komitmen-inner{flex-direction:column !important;gap:20px !important;padding:0 20px !important}
  .komitmen-stats{flex-wrap:wrap !important}
  .ks-item{padding:16px 20px !important}

  /* LAYANAN */
  .lyr .inner,.lyr-inner{grid-template-columns:1fr !important;gap:0 !important;direction:ltr !important}
  .lyr.rev .inner,.lyr.rev .lyr-inner{direction:ltr !important}
  .lyr-imgs,.about-visual{order:-1}
  .img-second{width:40% !important;right:-8px !important;left:auto !important}
  .lyr.rev .img-second{right:auto !important;left:-8px !important}
  .scope-grid,.lyr-scope{grid-template-columns:1fr !important}
  .intro-inner{flex-direction:column !important;gap:14px !important;padding:0 20px !important}
  .ap-grid{grid-template-columns:1fr 1fr !important}
  .approach-inner{padding:0 20px !important}

  /* PROYEK */
  .stats-inner{flex-wrap:wrap !important}
  .stat-item{flex:0 0 50% !important;border-right:none !important;border-bottom:1px solid rgba(255,255,255,.15) !important;padding:16px !important}
  .filter-inner{flex-wrap:wrap !important;padding:0 !important}
  .search-wrap{min-width:100% !important;flex:1 1 100% !important}
  .filter-count,.btn-reset{flex-shrink:0}
  .project-table{font-size:12px !important}
  .project-table th,.project-table td{padding:10px 10px !important}
  .section-table{padding:0 20px 60px !important}

  /* PENGHARGAAN */
  .awards-grid{grid-template-columns:1fr 1fr !important}
  .section-awards,.awards-inner{padding:32px 20px 48px !important}
  .intro .intro-inner{flex-direction:column !important;padding:20px !important;gap:12px !important}
  .cta-strip{padding:40px 20px !important}
  .cta-inner{flex-direction:column !important}

  /* GALLERY */
  .gallery-grid{columns:2 !important;column-gap:10px !important}
  .section-gallery{padding:32px 20px 60px !important}
  .gal-header{flex-direction:column !important;align-items:flex-start !important;margin-bottom:20px !important}

  /* KONTAK */
  .contact-inner{grid-template-columns:1fr !important}
  .contact-info{border-right:none !important;padding:32px 20px !important}
  .contact-form-wrap{padding:0 20px 40px !important}
  .form-grid{grid-template-columns:1fr !important}
  .form-group.full{grid-column:1 !important}
  .map-inner{grid-template-columns:1fr !important}
  .map-info{border-right:none !important;padding:28px 20px !important}
  .map-embed{height:260px !important}

  /* FOOTER */
  footer{padding:36px 20px 20px !important}
  .ft-top{grid-template-columns:1fr 1fr !important;gap:28px !important}
  .ft-bottom{flex-direction:column !important;align-items:flex-start !important;gap:6px !important}
}

@media (max-width:520px){
  nav#navbar{padding:0 16px;border-left-width:4px}
  .hero h1{font-size:28px !important}
  .hero-btns{flex-direction:column !important;align-items:flex-start !important}
  .btn-white,.btn-ghost-white{width:100% !important;justify-content:center !important}
  .awards-grid{grid-template-columns:1fr !important}
  .gallery-grid{columns:1 !important}
  .ap-grid{grid-template-columns:1fr !important}
  .ft-top{grid-template-columns:1fr !important}
  .stat-item{flex:0 0 100% !important}
  .lyr-scope,.scope-grid{grid-template-columns:1fr !important}
  .vm-grid{grid-template-columns:1fr !important}
}