/*
Theme Name: Lestari Digital Solutions — Responsive
Description: Responsive, compact WordPress theme for Lestari Digital Solutions, with tab navigation and editable content.
Version: 2.1.0
Author: Lestari Digital Solutions
Text Domain: lestari-digital
*/
:root{--font-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-heading:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--base-size:16px;--heading-weight:750;--navy:#092b49;--blue:#0878d1;--green:#159d58;--ink:#17324f;--muted:#526a80;--line:#d7e5ef;--paper:#f5f9fc;--white:#fff;--radius:14px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--base-size);letter-spacing:-.01em}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}
.site{min-height:100vh;display:flex;flex-direction:column}.header{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,3vw,48px);gap:20px;position:relative;z-index:5}
.brand{display:flex;align-items:center;min-width:190px}.brand img{width:225px;max-width:100%;height:auto;max-height:58px;object-fit:contain;object-position:left center}.brand-name{font-family:var(--font-heading);font-weight:800;font-size:23px;letter-spacing:.055em;color:var(--navy)}.brand-name small{display:block;font-size:9px;letter-spacing:.38em;font-weight:600}
.nav{display:flex;align-items:center;gap:7px}.nav button{border:0;background:transparent;color:#172c43;padding:12px 16px;border-radius:9px;font-weight:650}.nav button:hover,.nav button[aria-selected=true]{color:#0758b8;background:#edf6ff}.nav button[aria-selected=true]{box-shadow:inset 0 -3px #159d58;border-radius:0}
.header-right{display:flex;align-items:center;gap:14px}.header-tagline{font-size:12px;color:#50657b;white-space:nowrap}.cta{border:0;border-radius:9px;background:linear-gradient(110deg,#0869ca,#22a84c);color:white;padding:12px 20px;font-weight:750;white-space:nowrap}.menu-toggle{display:none;border:1px solid var(--line);background:#fff;color:var(--navy);padding:10px 12px;border-radius:9px}
main{flex:1}.view{display:none}.view.active{display:block}
.hero{min-height:390px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);position:relative;overflow:hidden;color:white;background:linear-gradient(90deg,rgba(5,34,57,.97) 0%,rgba(5,34,57,.82) 42%,rgba(5,34,57,.23) 100%),url("assets/river-hero.svg") center 48%/cover}
.hero-copy{padding:clamp(28px,4vw,58px);align-self:center;max-width:760px}.eyebrow{font-size:11px;letter-spacing:.23em;text-transform:uppercase;font-weight:800;margin:0 0 16px;color:#d6e8f4}.hero h1{font-family:var(--font-heading);font-weight:var(--heading-weight);font-size:clamp(36px,4.2vw,64px);line-height:1.04;letter-spacing:-.055em;margin:0 0 15px;color:white}.hero h1 .blue{color:#19a8f0}.hero h1 .green{color:#65d58a}.hero p{max-width:590px;font-size:clamp(15px,1.3vw,19px);line-height:1.48;color:#f1f7fb;margin:0 0 23px}.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}.btn-primary,.btn-ghost,.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:12px 19px;border-radius:9px;font-weight:750;border:1px solid #d3e2ed;background:#fff;color:#12344a;}.btn-primary{background:linear-gradient(110deg,#0869ca,#23a84c);color:#fff}.btn-ghost{background:#ffffff12;border:1px solid #ffffffb0;color:#fff}.hero-traits{display:flex;gap:clamp(12px,2vw,28px);flex-wrap:wrap;margin-top:27px;font-size:12px;color:#e5f1f7}.hero-traits span{display:flex;gap:8px;align-items:center}.hero-traits b{color:#70dc91;font-size:18px}
.hero-map{align-self:center;justify-self:center;width:min(82%,480px);margin:20px 7% 20px 0;min-height:220px;border:1px solid #d3e9f4;border-radius:12px;overflow:hidden;background:linear-gradient(145deg,#214e59dd,#092b49e8);box-shadow:0 16px 38px #001a2b55;position:relative}
.map-head{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;background:#082943d9;color:#fff;font-weight:750}.map-art{height:230px;position:relative;background:linear-gradient(35deg,#174d3c,#518e62 38%,#294f60 39%,#1e637f 64%,#75a879);overflow:hidden}.map-art:before{content:"";position:absolute;width:140%;height:65px;left:-15%;top:80px;transform:rotate(-20deg);border:15px solid #3db8e4;border-left:0;border-right:0;border-radius:50%;box-shadow:0 0 0 8px #1378c4aa}.map-art:after{content:"";position:absolute;inset:0;background-image:radial-gradient(#f4e58a 2px,transparent 3px);background-size:54px 48px;opacity:.85}.map-legend{position:absolute;right:12px;bottom:12px;background:#082943e8;border-radius:8px;padding:10px 12px;font-size:11px;line-height:1.8;color:#fff}.map-legend i{display:inline-block;width:12px;height:7px;margin-right:7px;background:#19a8f0}.map-legend i:nth-child(3){background:#50b96b}.map-legend i:nth-child(5){background:#f2df70;border-radius:50%;height:9px;width:9px}
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:14px clamp(14px,2.2vw,34px);background:#fff}
.service{display:flex;align-items:center;gap:16px;min-height:118px;padding:17px;border-radius:9px;border:1px solid #e1edf4;background:linear-gradient(120deg,#eaf6ff,#f8fcff);text-align:left;transition:transform .18s,border-color .18s}.service:nth-child(2){background:linear-gradient(120deg,#eaf5ff,#f8fcff)}.service:nth-child(3){background:linear-gradient(120deg,#eaf9ef,#f9fdf9)}.service:nth-child(4){background:linear-gradient(120deg,#f8f7ed,#fffdf7)}.service:hover{transform:translateY(-2px);border-color:#8bc9ad}.service-icon{font-size:35px;line-height:1;color:#087fc5;flex-shrink:0}.service:nth-child(3) .service-icon{color:#159d58}.service h3{font-family:var(--font-heading);font-weight:var(--heading-weight);letter-spacing:-.025em;margin:0 0 7px;font-size:16px;line-height:1.25;color:var(--navy)}.service p{margin:0;font-size:13px;line-height:1.35;color:#526a80}.service-arrow{margin-left:auto;font-size:23px;color:#1264ad}
.bottom-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.1fr) minmax(210px,.65fr);gap:12px;padding:0 clamp(14px,2.2vw,34px) 16px;background:#fff}
.panel{border:1px solid #dce9f2;border-radius:10px;background:#fff;padding:15px;min-width:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.panel h2{font-family:var(--font-heading);font-weight:var(--heading-weight);letter-spacing:-.025em;font-size:17px;color:var(--navy);margin:0}.panel-head h2:before{content:"";display:inline-block;width:18px;height:4px;border-radius:5px;background:#20a65b;margin:0 10px 4px 0}.text-link{border:0;background:transparent;color:#075fbd;font-weight:750;font-size:13px}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.project{position:relative;min-height:150px;border-radius:7px;overflow:hidden;color:#fff;display:flex;align-items:flex-end;padding:11px;background:#174b62}.project:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 12%,#041d2be8)}.project-art{position:absolute;inset:0;background:url("assets/project-flood.svg") center/cover}.project:nth-child(2) .project-art{background-image:url("assets/our-commitment.svg")}.project:nth-child(3) .project-art{background-image:url("assets/project-coastal.svg")}.project div:last-child{position:relative}.project h3{font-size:12px;margin:0 0 3px}.project p{font-size:10px;margin:0;color:#e3edf2}
.about-wrap{display:grid;grid-template-columns:1fr .7fr;gap:12px;align-items:stretch}.about-copy p{font-size:13px;line-height:1.45;color:#526a80;margin:9px 0 12px}.about-image{border-radius:7px;min-height:120px;background-position:center;background-size:cover;background-repeat:no-repeat}.values{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:11px;color:#526a80}.values span:before{content:"✦";color:#159d58;margin-right:5px}
.contact-copy{font-size:13px;line-height:1.4;color:#526a80;margin:8px 0 10px}.contact-lines{display:grid;gap:7px;font-size:12px;color:#526a80;margin-bottom:12px}.contact-lines strong{color:var(--navy)}.contact-buttons{display:grid;gap:7px}.contact-buttons a{padding:9px 12px;border-radius:7px;text-align:center;font-size:13px;font-weight:750}.whatsapp{background:#14a75a;color:white}.email{border:1px solid #9bb8d1;color:var(--navy);background:#fff}
.footer{background:#082b49;color:#d9e9f3;padding:16px clamp(14px,2.5vw,40px);display:grid;grid-template-columns:1.2fr 1.3fr 1fr;align-items:center;gap:16px;font-size:11px}.footer-brand{font-size:20px;font-weight:900;letter-spacing:.08em;color:white}.footer-brand small{display:block;font-size:8px;letter-spacing:.35em}.footer-nav{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}.footer-motto{text-align:right;color:#c5d9e5}
.detail-layout{padding:clamp(20px,4vw,55px);min-height:calc(100vh - 150px);background:linear-gradient(130deg,#f7fbfd,#eaf5f9)}.detail-panel{max-width:1200px;margin:auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(22px,4vw,48px);box-shadow:0 14px 40px #092b4910}.detail-panel h1{font-family:var(--font-heading);font-weight:var(--heading-weight);letter-spacing:-.045em;font-size:clamp(28px,4vw,48px);margin:8px 0;color:var(--navy)}.detail-panel>p{color:var(--muted);line-height:1.65;max-width:850px}.detail-services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:25px}.detail-services .service{align-items:flex-start;flex-direction:column}.detail-projects{margin-top:22px}
@media(max-width:1100px){.header{height:auto;min-height:72px;flex-wrap:wrap;padding-block:12px}.header-tagline{display:none}.hero{grid-template-columns:1fr 0.8fr}.hero-map{width:90%;margin-right:15px}.services{grid-template-columns:repeat(2,minmax(0,1fr))}.bottom-grid{grid-template-columns:1.2fr 1fr}.contact-panel{grid-column:1/-1}.contact-buttons{grid-template-columns:1fr 1fr}.footer{grid-template-columns:1fr 1fr}.footer-motto{display:none}.detail-services{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.header{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 15px}.brand{min-width:0}.brand img{width:190px}.menu-toggle{display:block}.nav{display:none;grid-column:1/-1;order:3;width:100%;grid-template-columns:repeat(3,1fr);gap:4px}.nav.open{display:grid}.nav button{padding:10px 5px;font-size:13px}.header-right{display:none}.hero{grid-template-columns:1fr;background-position:center}.hero-copy{padding:30px 22px 22px}.hero h1{font-size:clamp(36px,10vw,52px)}.hero-map{width:calc(100% - 44px);margin:0 22px 22px;min-height:0}.map-art{height:145px}.hero-traits{gap:12px;margin-top:20px}.services{grid-template-columns:1fr;padding:12px}.service{min-height:98px}.bottom-grid{grid-template-columns:1fr;padding:0 12px 12px}.contact-panel{grid-column:auto}.project-grid{grid-template-columns:1fr}.project{min-height:170px}.about-wrap{grid-template-columns:1fr}.about-image{min-height:150px;order:-1}.footer{grid-template-columns:1fr;text-align:center}.footer-nav{gap:12px}.detail-layout{padding:14px}.detail-services{grid-template-columns:1fr}.detail-panel{padding:20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* About section Learn More button: white background */
.about-copy .btn-outline{background:#fff!important;color:#12344a!important;border:1px solid #d3e2ed!important;box-shadow:none}
.about-copy .btn-outline:hover{background:#f5fafc!important;border-color:#b8d2e2!important}

/* WordPress menu markup support; preserves the V8 header styling. */
.nav-list{display:flex;align-items:center;gap:7px;list-style:none;margin:0;padding:0}.nav-list>li{margin:0;padding:0}.nav a{display:block;text-decoration:none;border:0;background:transparent;color:#172c43;padding:12px 16px;border-radius:9px;font-weight:650}.nav a:hover,.nav a[aria-current="page"]{color:#0758b8;background:#edf6ff}.nav a[aria-current="page"]{box-shadow:inset 0 -3px #159d58;border-radius:0}
@media(max-width:700px){.nav-list{display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:4px}.nav a{padding:10px 5px;font-size:13px;text-align:center}}

/* Customizable hero preview image */
.hero-preview-image{display:block;width:100%;height:230px;object-fit:cover;object-position:center;border:0;margin:0}

/* When a custom preview graphic is selected, show it as a complete visual
   without adding a second dashboard frame or title bar around it. */
.hero-map.hero-map-image-only{
  width:min(100%,620px);
  min-height:0;
  margin:20px 0;
  border:0;
  border-radius:0;
  overflow:visible;
  background:transparent;
  box-shadow:none;
}
.hero-map-image-only .hero-preview-image{
  display:block;
  width:100%;
  height:auto;
  max-height:440px;
  object-fit:contain;
  border:0;
  border-radius:12px;
  margin:0;
  box-shadow:0 16px 38px #001a2b55;
}

/* Footer navigation menu support */
.footer-nav ul.footer-menu{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;list-style:none;margin:0;padding:0}
.footer-nav ul.footer-menu li{list-style:none;margin:0;padding:0}
.footer-nav ul.footer-menu a{display:inline-block;color:inherit;text-decoration:none}
.footer-nav ul.footer-menu a:hover,.footer-nav ul.footer-menu a:focus{text-decoration:underline}