/*
Theme Name: TRIAZ Native
Theme URI: https://triaz.co.id/
Author: TRIAZ
Description: Tema mandiri untuk PT Triiaz Success Abady. Tidak memerlukan Oxygen.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: triaz-native
*/

:root { --green:#025e51; --green-deep:#00584e; --mint:#54af9d; --blue:#0a5888; --coral:#ff8a5b; --ink:#1c3e3c; --white:#fff; }
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:#404040; background:#fff; font:16px/1.6 'Open Sans',Arial,sans-serif; }
h1,h2,h3,h4,h5,h6 { font-family:'Source Sans Pro','Open Sans',Arial,sans-serif; }
img { max-width:100%; height:auto; }
a { color:inherit; }
button, input, textarea, select { font:inherit; }
button { cursor:pointer; }
.container { width:min(1120px, calc(100% - 36px)); margin-inline:auto; }
.skip-link { position:absolute; left:12px; top:-100px; z-index:999; padding:10px 16px; background:#fff; color:var(--green); }
.skip-link:focus { top:12px; }
:focus-visible { outline:3px solid var(--coral); outline-offset:3px; }

/* Header follows the former site's proportions, with native navigation. */
.site-header { position:relative; z-index:30; background:#fff; }
.topbar { background:#075e54; color:#fff; font-size:14px; font-style:italic; }
.topbar-inner { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar a { text-decoration:none; white-space:nowrap; }
.topbar a:hover { text-decoration:underline; }
.nav-shell { background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.nav-inner { min-height:73px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { display:flex; align-items:center; flex:0 0 80px; }
.brand img, .brand .custom-logo { display:block; width:80px; height:auto; max-height:60px; object-fit:contain; }
.primary-nav { flex:1; align-self:stretch; display:flex; align-items:center; }
.nav-list { list-style:none; display:flex; align-items:stretch; justify-content:space-between; gap:0; width:100%; margin:0; padding:0; }
.nav-list > li { position:relative; display:flex; align-items:center; }
.nav-list > li > a, .nav-list > li > .submenu-toggle { padding:15px 12px; display:flex; align-items:center; gap:5px; color:#164943; border:0; background:transparent; text-decoration:none; font-size:16px; text-transform:uppercase; white-space:nowrap; }
.nav-list > li > a:hover, .nav-list > li > button:hover { color:var(--mint); }
.submenu-toggle span { font-size:17px; line-height:1; }
.header-cta { align-self:stretch; min-width:174px; display:flex; align-items:center; justify-content:center; text-align:center; border-radius:4px; color:#fff; background:var(--green); text-decoration:none; text-transform:uppercase; font-weight:700; letter-spacing:4px; line-height:1.3; font-size:15px; }
.header-cta:hover { background:#03483f; }
.mega-menu { position:absolute; top:100%; left:50%; transform:translateX(-45%); display:none; grid-template-columns:repeat(5,minmax(150px,1fr)); gap:20px; width:min(1040px,calc(100vw - 50px)); padding:26px 30px; background:#fff; border-top:3px solid var(--green); box-shadow:0 18px 40px rgba(0,0,0,.18); z-index:50; }
.mega-group h3 { color:var(--green); margin:0 0 10px; font:700 17px/1.2 'Source Sans Pro',Arial,sans-serif; }
.mega-group h3 a { color:inherit; text-decoration:none; }
.mega-group h3 a:hover { text-decoration:underline; }
.mega-group ul { list-style:none; margin:0; padding:0; }
.mega-group li { margin:0 0 7px; }
.mega-group a { color:#2c4948; font-size:14px; text-decoration:none; line-height:1.3; display:block; }
.mega-group a:hover { color:var(--green); text-decoration:underline; }
.nav-products:hover .mega-menu, .nav-products:focus-within .mega-menu, .nav-products.is-open .mega-menu { display:grid; }
.nav-list .sub-menu { display:none; position:absolute; top:100%; left:0; min-width:220px; margin:0; padding:12px; list-style:none; background:#fff; box-shadow:0 14px 28px rgba(0,0,0,.16); }
.nav-list li:hover > .sub-menu, .nav-list li:focus-within > .sub-menu { display:block; }
.sub-menu li { position:relative; }
.sub-menu .sub-menu { top:0; left:100%; }
.sub-menu a { display:block; padding:8px; font-size:14px; color:#164943; text-decoration:none; }
.sub-menu a:hover { background:#eff7f5; }
.nav-toggle { display:none; background:none; border:0; padding:10px; }
.nav-toggle span { display:block; width:25px; height:2px; margin:5px; background:var(--green); }

/* Home */
.hero { min-height:550px; display:flex; align-items:center; background-color:var(--blue); background-image:linear-gradient(rgba(84,175,157,.3),rgba(84,175,157,.3)),url('assets/images/vendor-supplier-kaca-tempered-triaz.co_.id_.webp'); background-size:cover; background-position:center; background-attachment:fixed; color:#fff; text-align:center; }
.hero-inner { padding:72px 0 92px; }
.hero h1 { max-width:1040px; margin:0 auto 12px; font:700 clamp(36px,4.2vw,58px)/1.1 'Source Sans Pro',Arial,sans-serif; letter-spacing:.2px; }
.hero p { max-width:640px; margin:0 auto 25px; line-height:1.45; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:49px; padding:12px 40px; border-radius:5px; color:#fff; text-decoration:none; text-transform:uppercase; font-weight:700; letter-spacing:4px; font-size:15px; transition:filter .2s,transform .2s; }
.button:hover { filter:brightness(.94); transform:translateY(-2px); }
.button-coral { background:var(--coral); }
.section-title { color:var(--green); text-align:center; margin:0; font:700 clamp(33px,3.3vw,46px)/1.2 'Source Sans Pro',Arial,sans-serif; }
.title-rule { width:262px; height:2px; background:var(--green); margin:14px auto 22px; }
.clients { min-height:532px; padding-top:34px; padding-bottom:44px; }
.client-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:15px; }
.client-card { min-width:0; margin:0; text-align:center; }
.client-card img { display:block; width:100%; height:120px; object-fit:contain; padding:10px; border:1px solid #e7e9eb; transition:box-shadow .2s; }
.client-card:hover img { box-shadow:0 12px 24px rgba(0,0,0,.06); }
.client-card figcaption { color:#575853; font:12px/1.3 'Open Sans',Arial,sans-serif; letter-spacing:1px; text-transform:uppercase; margin:8px 2px 4px; }
.portfolio-heading { padding-top:24px; }
.portfolio .title-rule { margin-bottom:12px; }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.portfolio-tile { height:clamp(190px,20vw,350px); border:1px solid #fff; background:var(--blue); overflow:hidden; }
.portfolio-tile img { display:block; width:100%; height:100%; object-fit:cover; }
.about-home { padding:62px 0 70px; background:linear-gradient(135deg,#025e51,#54af9d,#025e51); color:#fff; }
.about-inner { max-width:1050px; }
.about-home h2 { font:700 clamp(32px,3.5vw,48px)/1.17 'Source Sans Pro',Arial,sans-serif; text-align:center; margin:0 0 26px; }
.accordion-list { max-width:980px; margin:auto; }
.accordion-list details { border-bottom:1px solid rgba(255,255,255,.45); }
.accordion-list details:first-child { border-top:1px solid rgba(255,255,255,.45); }
.accordion-list summary { cursor:pointer; position:relative; list-style:none; padding:13px 38px 13px 8px; font-size:20px; font-weight:700; }
.accordion-list summary::-webkit-details-marker { display:none; }
.accordion-list summary::after { content:'+'; position:absolute; right:12px; font-size:25px; top:7px; }
.accordion-list details[open] summary::after { content:'−'; }
.accordion-list p { margin:0 0 17px; padding:0 35px 0 8px; line-height:1.65; }
.closing-cta { min-height:449px; display:flex; align-items:center; justify-content:center; text-align:center; background:#f5f8f7 url('assets/images/bgtriaz.webp') center/cover no-repeat; color:var(--green); }
.closing-cta .container { padding:55px 0; }
.closing-cta h2 { margin:0 0 12px; font-size:clamp(32px,3.5vw,47px); line-height:1.2; }
.closing-cta p { margin:0 auto 24px; max-width:710px; font-size:19px; }

/* Footer */
.site-footer { background:var(--green); color:#fff; }
.footer-grid { display:grid; grid-template-columns:2.2fr 1.6fr .9fr 1fr; gap:35px; padding-top:62px; padding-bottom:46px; }
.footer-brand { display:inline-flex; align-items:center; min-height:45px; }
.footer-brand img { width:210px; height:auto; }
.site-footer p { margin:12px 0; line-height:1.6; }
.site-footer h2 { margin:0 0 18px; color:#fff; text-transform:uppercase; letter-spacing:1px; font-size:18px; }
.footer-addresses strong { display:block; margin-top:13px; font-size:14px; }
.footer-addresses a, .footer-bottom a { color:#fff; text-underline-offset:4px; }
.footer-links a { display:block; margin:0 0 11px; color:#fff; text-decoration:none; text-transform:uppercase; font-size:14px; }
.footer-links a:hover { text-decoration:underline; }
.social-links { display:flex; gap:8px; margin-top:20px; }
.social-links a { width:31px; height:31px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #fff; border-radius:50%; text-decoration:none; font:700 15px Arial,sans-serif; }
.social-links a:hover { background:#fff; color:var(--green); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.28); display:flex; justify-content:space-between; gap:18px; padding-top:15px; padding-bottom:18px; font-size:13px; }

/* Internal WordPress templates */
.page-heading { background:linear-gradient(125deg,#034b43,#246d74); color:#fff; padding:60px 0; }
.page-heading h1 { margin:0; font-size:clamp(36px,4vw,54px); line-height:1.2; }
.page-heading p { margin:12px 0 0; }
.breadcrumb { font-size:14px; margin-bottom:12px; }
.breadcrumb a { color:#fff; }
.entry-content { overflow-wrap:anywhere; }
.native-entry, .converted-entry { padding-top:42px; padding-bottom:75px; }
.native-entry { max-width:950px; }
.authored-entry { padding:0; }
.native-entry h1, .native-entry h2, .native-entry h3 { color:var(--green); line-height:1.25; }
.native-entry h1 { font-size:clamp(32px,3.5vw,48px); }
.native-entry h2 { font-size:clamp(27px,3vw,37px); }
.native-entry h3 { font-size:23px; }
.native-entry p, .native-entry li { line-height:1.75; }
.native-entry a { color:var(--green); text-underline-offset:3px; }
.entry-content img { max-width:100%; height:auto; }
.entry-content iframe { width:100%; max-width:100%; border:0; }
.entry-content table { border-collapse:collapse; width:100%; overflow-x:auto; display:block; }
.entry-content th, .entry-content td { border:1px solid #dce6e4; padding:9px; }
.entry-content blockquote { border-left:4px solid var(--green); padding-left:18px; margin-left:0; }
.entry-content .triaz-migrated-section { padding:32px 0; border-bottom:1px solid #e8efec; }
.entry-content .triaz-migrated-section:first-child { padding-top:0; }
.entry-content .triaz-migrated-section > .triaz-migrated-group { max-width:1080px; margin:auto; }
.entry-content .triaz-migrated-group > .triaz-migrated-group { margin-block:8px; }
.entry-content .triaz-migrated-group:empty { display:none; }
.entry-content .triaz-migrated-section img { display:block; margin:18px auto; max-height:580px; object-fit:contain; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:35px 0; }
.contact-card { padding:30px; border:1px solid #dce7e4; background:#f7fbfa; border-radius:4px; }
.contact-card h2 { margin-top:0; font-size:27px; }
.contact-card p { font-size:18px; }
.contact-map { width:100%; min-height:380px; border:0; margin:10px 0 40px; }
.article-meta { color:#526c68; font-size:14px; }
.post-native-layout { background:rgba(84,175,157,.15); }
.post-native-inner { width:min(1200px,100%); margin:auto; padding:75px 20px; }
.post-native-inner > h1 { margin:0 0 35px; color:#404040; font:700 clamp(38px,4.45vw,60px)/1.1 'Lato','Source Sans Pro',Arial,sans-serif; }
.triaz-post-cover { display:block; width:100%; height:auto; margin:0 0 36px; }
.post-native-content { color:#404040; line-height:1.7; }
.post-native-content h2, .post-native-content h3 { color:#404040; }
.archive-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:35px 0 55px; }
.post-card { border:1px solid #e2ebe8; background:#fff; display:flex; flex-direction:column; }
.post-card img { width:100%; height:210px; object-fit:cover; margin:0; }
.post-card-inner { padding:22px; flex:1; }
.post-card h2 { margin:0 0 10px; font-size:24px; }
.post-card h2 a { color:var(--green); text-decoration:none; }
.post-card p { margin:0; }
.pagination { padding-bottom:60px; }
.search-form { display:flex; max-width:500px; margin:24px 0; gap:8px; }
.search-field { flex:1; min-width:0; border:1px solid #aac3bd; padding:12px; }
.search-submit { background:var(--green); color:#fff; border:0; padding:12px 20px; }

@media (max-width:1100px) {
    .nav-list > li > a, .nav-list > li > .submenu-toggle { padding-inline:9px; font-size:13px; }
    .header-cta { min-width:130px; letter-spacing:2px; }
    .footer-grid { grid-template-columns:1.5fr 1.3fr 1fr 1fr; gap:22px; }
}
@media (max-width:900px) {
    .nav-inner { min-height:74px; }
    .nav-toggle { display:block; margin-left:auto; }
    .header-cta { min-height:54px; align-self:center; }
    .primary-nav { display:none; position:absolute; left:0; right:0; top:100%; margin:0; background:#fff; box-shadow:0 12px 24px rgba(0,0,0,.16); max-height:calc(100vh - 105px); overflow-y:auto; }
    .primary-nav.is-open { display:block; }
    .nav-list, .nav-list > li { display:block; }
    .nav-list > li { border-top:1px solid #e5eeeb; }
    .nav-list > li > a, .nav-list > li > button { padding:14px 22px; width:100%; justify-content:space-between; font-size:15px; }
    .mega-menu { position:static; display:none; transform:none; width:100%; padding:20px; box-shadow:none; border-top:1px solid #e5eeeb; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .nav-products:hover .mega-menu, .nav-products:focus-within .mega-menu { display:none; }
    .nav-products.is-open .mega-menu { display:grid; }
    .nav-list .sub-menu { position:static; box-shadow:none; padding:0 18px 12px; }
    .nav-list li:hover > .sub-menu, .nav-list li:focus-within > .sub-menu { display:none; }
    .nav-list li.is-open > .sub-menu { display:block; }
    .hero { background-attachment:scroll; }
    .client-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .archive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
    .container { width:min(100% - 30px,1120px); }
    .topbar { font-size:12px; }
    .topbar-inner { min-height:39px; }
    .topbar-inner span { max-width:65%; }
    .header-cta { display:none; }
    .brand { flex-basis:80px; }
    .nav-inner { min-height:69px; }
    .mega-menu { grid-template-columns:1fr; gap:16px; }
    .hero { min-height:500px; }
    .hero-inner { padding:62px 0; }
    .hero h1 { font-size:clamp(32px,8vw,43px); }
    .desktop-break { display:none; }
    .hero p { font-size:16px; }
    .clients { padding:30px 0 42px; }
    .client-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .client-card img { height:100px; }
    .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .portfolio-tile { height:160px; }
    .about-home { padding:52px 0; }
    .accordion-list summary { font-size:18px; }
    .closing-cta { min-height:370px; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:25px; padding-top:44px; }
    .footer-about, .footer-addresses { grid-column:1/-1; }
    .footer-bottom { display:block; }
    .footer-bottom a { display:block; margin-top:8px; }
    .contact-grid, .archive-grid { grid-template-columns:1fr; }
    .page-heading { padding:45px 0; }
    .native-entry, .converted-entry { padding-top:28px; }
    .post-native-inner { padding:45px 18px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }