/*
Theme Name: UMKM Template Nine
Author: UMKM Studio
Description: A reusable five-section UMKM website with an automotive-inspired default presentation. Requires the UMKM Site plugin.
Version: 1.1.1
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: umkm-template-nine
*/

:root{--color-primary:#161b1c;--color-secondary:#f4f1eb;--color-accent:#e76b31;--color-ink:#161b1c;--color-paper:#f4f1eb;--color-muted:#65706d;--container:1200px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--color-secondary);color:var(--color-ink);font-family:Arial,Helvetica,sans-serif;line-height:1.6}img{max-width:100%;height:auto}a{color:inherit}button,input{font:inherit}button{cursor:pointer}.wrap{width:min(calc(100% - 48px),var(--container));margin-inline:auto}.site-header{position:sticky;top:0;z-index:50;background:var(--color-primary);color:#fff;border-bottom:1px solid #ffffff22}.admin-bar .site-header{top:32px}.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;line-height:1.05;font-weight:900;letter-spacing:.09em;font-size:19px}.brand img{max-height:49px;width:auto}.brand-mark{width:34px;height:34px;border:3px solid var(--color-accent);display:inline-block;transform:skew(-12deg);flex:none}.site-nav{display:flex;align-items:center;gap:clamp(16px,2vw,32px)}.site-nav a{text-decoration:none;text-transform:uppercase;letter-spacing:.13em;font-size:11px;font-weight:800;transition:color .2s}.site-nav a:hover,.site-nav a:focus-visible{color:var(--color-accent)}.header-cta,.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--color-accent);color:#111!important;text-decoration:none;padding:15px 24px;font-size:12px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;border:0;min-height:48px;transition:transform .2s,filter .2s}.button:hover,.header-cta:hover{transform:translateY(-2px);filter:brightness(1.08)}.button:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}.button-dark{background:var(--color-primary);color:#fff!important}.nav-toggle{display:none;background:none;color:#fff;border:1px solid #ffffff55;padding:8px 11px}.section{scroll-margin-top:82px}.eyebrow{color:var(--color-accent);font-size:12px;letter-spacing:.23em;font-weight:900;text-transform:uppercase;display:flex;align-items:center;gap:14px}.eyebrow:before{content:'';width:25px;height:2px;background:currentColor}.section-heading{font-size:clamp(38px,5.2vw,74px);line-height:1.07;letter-spacing:-.055em;margin:18px 0 26px;font-weight:900;max-width:850px}.hero{background:var(--color-primary);color:#fff;min-height:650px;display:grid;grid-template-columns:45% 55%;overflow:hidden}.hero-copy{padding:clamp(70px,7vw,120px) clamp(24px,5vw,90px) clamp(70px,7vw,120px) max(24px,calc((100vw - var(--container))/2));display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative}.hero-copy:after{content:'09';position:absolute;bottom:16px;left:max(24px,calc((100vw - var(--container))/2));font-size:11px;letter-spacing:.3em;color:#ffffff66}.hero h1{font-size:clamp(45px,5.7vw,86px);line-height:1.02;letter-spacing:-.06em;max-width:650px;margin:24px 0}.hero p{color:#d1d5d1;font-size:17px;max-width:490px;margin:0 0 35px}.hero-visual{position:relative;min-height:610px;background:#2c3434;overflow:hidden}.hero-visual img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}.hero-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#161b1c33,transparent 45%)}.hero-visual .visual-caption{position:absolute;bottom:32px;right:32px;color:#fff;z-index:1;font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;border-top:1px solid #ffffff88;padding-top:13px}.section-pad{padding:clamp(78px,9vw,140px) 0}.section-intro{margin-bottom:50px}.about{background:var(--color-secondary)}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}.about-visual{height:590px;position:relative;background:#d4d2ca}.about-visual img{width:100%;height:100%;object-fit:cover}.about-visual:after{content:'';position:absolute;left:-15px;bottom:-15px;width:110px;height:110px;border-left:5px solid var(--color-accent);border-bottom:5px solid var(--color-accent);pointer-events:none}.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.8;color:#4b5653;max-width:610px}.highlights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px;margin-top:45px;border-top:1px solid #aab1a8;padding-top:28px}.highlight strong{display:block;font-size:clamp(30px,3vw,48px);line-height:1;font-weight:900;letter-spacing:-.06em;color:var(--color-primary)}.highlight span{display:block;text-transform:uppercase;font-size:11px;letter-spacing:.13em;font-weight:800;margin-top:9px;color:#596561}.items{background:var(--color-primary);color:#fff}.items .section-heading{max-width:900px}.items-list{border-top:1px solid #ffffff33}.item-card{display:grid;grid-template-columns:260px 1fr auto;align-items:center;gap:clamp(26px,4vw,65px);border-bottom:1px solid #ffffff33;padding:27px 0}.item-card>img{width:260px;height:170px;object-fit:cover;background:#39413f}.item-number{font-size:12px;letter-spacing:.18em;color:var(--color-accent);font-weight:800}.item-card h3{font-size:clamp(26px,2.4vw,37px);letter-spacing:-.04em;line-height:1.13;margin:9px 0}.item-card p{color:#b9c2bd;max-width:570px;margin:0}.item-meta{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.1em;color:#fff}.item-action{text-align:right;min-width:155px}.item-action .button{padding-inline:15px}.gallery{background:var(--color-secondary)}.gallery-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}.gallery-tile{position:relative;min-height:270px;overflow:hidden;background:#d7d8d1;border:0;padding:0;color:#fff;text-align:left;display:block}.gallery-tile:nth-child(3n+1){grid-row:span 2;min-height:560px}.gallery-tile img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .3s}.gallery-tile:hover img{transform:scale(1.035)}.gallery-tile:after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#0009)}.gallery-title{position:absolute;left:25px;bottom:20px;z-index:1;text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.15em}.play-icon{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:var(--color-accent);color:#111;font-size:23px;padding-left:4px}.gallery-tile iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}.contact{background:#e8e8e0}.contact-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(45px,7vw,100px);align-items:stretch}.map-frame{min-height:540px;background:#c8cdc6;position:relative}.map-frame iframe{width:100%;height:100%;min-height:540px;border:0}.map-empty{height:100%;display:grid;place-items:center;color:#50605c;padding:30px;text-align:center}.contact-info{padding:30px 0}.contact-info .section-heading{font-size:clamp(36px,4.3vw,62px)}.contact-description{font-size:18px;color:#4b5653;max-width:500px}.contact-detail{display:grid;grid-template-columns:130px 1fr;gap:20px;border-top:1px solid #adb7ae;padding:18px 0}.contact-detail dt{text-transform:uppercase;font-size:11px;font-weight:900;letter-spacing:.15em;color:#65706d}.contact-detail dd{margin:0;font-weight:700}.contact-detail a{text-decoration:none}.contact-detail a:hover{text-decoration:underline}.socials{display:flex;flex-wrap:wrap;gap:20px;margin-top:30px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.12em}.footer{background:var(--color-primary);color:#fff;padding:30px 0}.footer-inner{display:flex;justify-content:space-between;gap:20px;font-size:11px;text-transform:uppercase;letter-spacing:.12em}.empty-note{border:1px solid currentColor;padding:35px;opacity:.75}.screen-reader-text{position:absolute;clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden}@media(max-width:1100px){.site-nav{gap:15px}.header-cta{display:none}.item-card{grid-template-columns:210px 1fr}.item-card>img{width:210px}.item-action{grid-column:2;text-align:left}}@media(max-width:780px){.admin-bar .site-header{top:46px}.wrap{width:min(calc(100% - 36px),var(--container))}.header-inner{min-height:68px}.nav-toggle{display:block}.site-nav{display:none;position:absolute;left:0;right:0;top:100%;padding:22px 18px;background:var(--color-primary);border-top:1px solid #ffffff33;flex-direction:column;align-items:stretch;gap:0}.site-nav.is-open{display:flex}.site-nav a{padding:13px 5px}.hero{grid-template-columns:1fr}.hero-copy{padding:80px 18px 70px}.hero-copy:after{left:18px}.hero-visual{min-height:420px}.about-grid,.contact-layout{grid-template-columns:1fr}.about-visual{height:430px;order:2}.contact-info{padding:0}.map-frame,.map-frame iframe{min-height:380px}.gallery-tile:nth-child(3n+1){min-height:500px}}@media(max-width:560px){.hero h1{font-size:49px}.hero-visual{min-height:330px}.section-pad{padding:75px 0}.about-visual{height:350px}.item-card{grid-template-columns:1fr;gap:18px}.item-card>img{width:100%;height:220px}.item-action{grid-column:auto}.gallery-grid{grid-template-columns:1fr}.gallery-tile,.gallery-tile:nth-child(3n+1){min-height:320px;grid-row:auto}.contact-detail{grid-template-columns:1fr;gap:4px}.footer-inner{flex-direction:column}}

.gallery-tile{margin:0}.gallery-tile>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}


.site-header,.hero,.items,.footer{color:var(--on-primary)}.about,.gallery{color:var(--on-secondary)}.hero p,.items .item-card p{color:var(--on-primary);opacity:.78}.about .lead{color:var(--on-secondary);opacity:.8}.button,.header-cta,.play-icon{color:var(--on-accent)!important}.button-dark{color:var(--on-primary)!important}.site-header,.items,.footer{border-color:color-mix(in srgb,var(--on-primary) 25%,transparent)}.item-card,.items-list{border-color:color-mix(in srgb,var(--on-primary) 24%,transparent)}


.contact{background:color-mix(in srgb,var(--color-secondary) 92%,var(--color-primary) 8%);color:var(--on-secondary)}.contact-description,.contact-detail dt{color:var(--on-secondary);opacity:.75}.contact-detail{border-color:color-mix(in srgb,var(--on-secondary) 30%,transparent)}

.about-copy .lead{text-align:justify;text-justify:inter-word}
.socials{gap:12px}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;background:#fff;border:1px solid color-mix(in srgb,var(--on-secondary) 25%,transparent);transition:background .2s,border-color .2s,transform .2s}
.socials a:hover{background:var(--color-accent);border-color:var(--color-accent);transform:translateY(-2px)}
.socials a img{display:block;width:20px;height:20px}

/* Developer layout presets. Variant A uses the base layout above. */
.hero.variant-b{display:block;position:relative;min-height:690px;color:#fff}
.hero.variant-b .hero-visual{position:absolute;inset:0;min-height:0}
.hero.variant-b .hero-visual:after{background:linear-gradient(90deg,rgba(8,13,14,.9),rgba(8,13,14,.62) 48%,rgba(8,13,14,.2))}
.hero.variant-b .hero-copy{position:relative;z-index:2;min-height:690px;max-width:870px;padding-right:36px}
.hero.variant-b .hero-copy p{color:#fff;opacity:.88}
.hero.variant-b .hero-copy:after{color:#ffffff99}

.about.variant-b .about-grid{grid-template-columns:1.1fr .9fr}
.about.variant-b .about-copy{order:1}
.about.variant-b .about-visual{order:2;height:520px}
.about.variant-b .highlights{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0;border-left:3px solid var(--color-accent);padding:0 0 0 24px;margin-top:38px}

.items.variant-b .items-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;border-top:0}
.items.variant-b .item-card{display:flex;flex-direction:column;align-items:stretch;gap:18px;border:1px solid color-mix(in srgb,var(--on-primary) 24%,transparent);padding:0 0 25px}
.items.variant-b .item-card>img{width:100%;height:230px}
.items.variant-b .item-card>div{padding-inline:24px}
.items.variant-b .item-card h3{font-size:clamp(26px,2.3vw,34px)}
.items.variant-b .item-action{grid-column:auto;min-width:0;text-align:left;margin-top:auto}

.gallery.variant-b .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery.variant-b .gallery-tile,.gallery.variant-b .gallery-tile:nth-child(3n+1){grid-row:auto;min-height:300px}

.contact.variant-b .contact-layout{display:flex;flex-direction:column;gap:40px}
.contact.variant-b .contact-info{order:1;padding:0}
.contact.variant-b .contact-info .section-heading{max-width:900px}
.contact.variant-b .contact-info dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:35px}
.contact.variant-b .map-frame{order:2;min-height:390px}
.contact.variant-b .map-frame iframe{min-height:390px}

@media(max-width:1100px){
  .items.variant-b .items-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery.variant-b .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:780px){
  .hero.variant-b,.hero.variant-b .hero-copy{min-height:620px}
  .hero.variant-b .hero-copy{padding:80px 18px 70px}
  .about.variant-b .about-grid{grid-template-columns:1fr}
  .about.variant-b .about-visual{height:430px}
  .contact.variant-b .contact-info dl{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hero.variant-b,.hero.variant-b .hero-copy{min-height:590px}
  .items.variant-b .items-list,.gallery.variant-b .gallery-grid{grid-template-columns:1fr}
  .about.variant-b .about-visual{height:350px}
  .gallery.variant-b .gallery-tile,.gallery.variant-b .gallery-tile:nth-child(3n+1){min-height:320px}
}