/* Square 2.0.70 compatibility: do not use the theme's floated #primary.
   Layout stays in normal flow inside #sq-content, preserving the Square header/footer. */
body.phe-editorial-active #sq-content { overflow:visible; }
body.phe-editorial-active #phe-editorial-main {
 display:block; float:none; clear:both; position:relative; left:auto;
 width:100%; max-width:none; margin:0; overflow:visible;
}
body.phe-editorial-active #phe-editorial-main .phe-container {
 width:min(1200px,calc(100% - 40px)); max-width:1200px;
 margin-left:auto; margin-right:auto;
}
body.phe-editorial-active #phe-editorial-main .phe-layout {
 display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:30px;
}
body.phe-editorial-active #phe-editorial-main .phe-sidebar {min-width:0;}
@media(max-width:760px) {
 body.phe-editorial-active #phe-editorial-main .phe-container {width:calc(100% - 28px);max-width:600px;}
 body.phe-editorial-active #phe-editorial-main .phe-layout {grid-template-columns:minmax(0,1fr);gap:24px;}
}
/* Pusat Honda Editorial Blog - scoped styles */
.phe-editorial-active .site-content,
.phe-editorial-active #content { background:#f5f7fa; }
.phe-page{--phe-ink:#172536;--phe-muted:#687789;--phe-red:#d71920;--phe-cyan:#00a9c7;--phe-line:#e5e9ef;--phe-card:#fff;color:var(--phe-ink);font-family:inherit;padding:42px 0 64px}
.phe-page *{box-sizing:border-box}
.phe-container{width:min(1200px,calc(100% - 40px));margin:0 auto}
.phe-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;min-height:210px;padding:38px 46px;margin:0 0 34px;border-radius:18px;background:linear-gradient(115deg,#102338 0%,#183b58 62%,#0b2438 100%);color:#fff;box-shadow:0 14px 34px rgba(17,39,61,.12)}
.phe-hero:after{content:"";position:absolute;width:390px;height:390px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:70px;top:-130px;box-shadow:0 0 0 35px rgba(255,255,255,.035),0 0 0 75px rgba(255,255,255,.025)}
.phe-hero-copy{position:relative;z-index:1;max-width:720px}
.phe-kicker{display:inline-block;color:var(--phe-red);font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:10px}
.phe-hero .phe-kicker{color:#ffcf45}
.phe-hero h1{font-size:clamp(28px,4vw,43px);line-height:1.12;font-weight:800;letter-spacing:-.8px;color:#fff;margin:0 0 12px}
.phe-hero p{max-width:650px;color:#d7e1eb;font-size:15px;line-height:1.7;margin:0}
.phe-hero-mark{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;color:#fff;opacity:.92;transform:skew(-8deg);padding-right:8px}
.phe-hero-mark span{font-size:13px;font-weight:800;letter-spacing:5px}
.phe-hero-mark strong{font-size:43px;line-height:1;font-weight:900;letter-spacing:-2px}
.phe-hero-mark i{font-size:10px;font-style:normal;letter-spacing:5px;color:#ffcf45}
.phe-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start}
.phe-main-column{min-width:0}
.phe-featured{display:grid;grid-template-columns:1.08fr .92fr;overflow:hidden;background:#fff;border:1px solid var(--phe-line);border-radius:16px;box-shadow:0 8px 25px rgba(18,38,58,.045);margin-bottom:42px}
.phe-featured-image,.phe-card-image,.phe-related-image{position:relative;display:block;overflow:hidden;background:#e9eef3;aspect-ratio:1.45}
.phe-featured-image img,.phe-card-image img,.phe-related-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.phe-featured-image:hover img,.phe-card-image:hover img,.phe-related-image:hover img{transform:scale(1.045)}
.phe-featured-badge{position:absolute;left:18px;top:18px;background:var(--phe-red);color:#fff;border-radius:4px;padding:8px 11px;font-size:10px;font-weight:800;letter-spacing:1px}
.phe-featured-content{padding:28px 28px 25px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.phe-card-cats{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.phe-card-cats a{display:inline-block;text-decoration:none!important;color:#b71920!important;background:#fff0f0;border-radius:3px;padding:5px 8px;font-size:10px;font-weight:800;letter-spacing:.45px;text-transform:uppercase}
.phe-featured h2{font-size:clamp(21px,2.4vw,29px);line-height:1.25;font-weight:800;margin:0 0 12px;color:var(--phe-ink)}
.phe-featured h2 a,.phe-post-card h3 a,.phe-related-card h3 a{color:inherit;text-decoration:none}
.phe-featured h2 a:hover,.phe-post-card h3 a:hover,.phe-related-card h3 a:hover{color:var(--phe-red)}
.phe-meta{display:flex;flex-wrap:wrap;gap:12px;color:#8994a1;font-size:11px;line-height:1.5}
.phe-meta-item{display:inline-flex;align-items:center;gap:5px}
.phe-featured-content>p{font-size:13px;line-height:1.75;color:var(--phe-muted);margin:15px 0 18px}
.phe-read-link{display:inline-flex;align-items:center;gap:10px;color:var(--phe-red)!important;text-decoration:none!important;font-size:12px;font-weight:800;letter-spacing:.2px}
.phe-read-link span{font-size:19px;transition:transform .2s}
.phe-read-link:hover span{transform:translateX(4px)}
.phe-list-heading,.phe-section-heading{display:flex;align-items:end;justify-content:space-between;margin:0 0 18px}
.phe-list-heading h2,.phe-section-heading h2{font-size:24px;line-height:1.2;margin:0;font-weight:800;color:var(--phe-ink)}
.phe-list-heading .phe-kicker,.phe-section-heading .phe-kicker{margin-bottom:6px}
.phe-result-count{font-size:11px;color:var(--phe-muted);padding-bottom:4px}
.phe-post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.phe-post-card{background:#fff;border:1px solid var(--phe-line);border-radius:13px;overflow:hidden;box-shadow:0 6px 20px rgba(18,38,58,.035);transition:transform .25s,box-shadow .25s}
.phe-post-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(18,38,58,.09)}
.phe-card-image{aspect-ratio:1.55}
.phe-card-body{padding:20px 20px 21px}
.phe-post-card h3{font-size:18px;line-height:1.35;font-weight:800;margin:0 0 10px;color:var(--phe-ink)}
.phe-post-card .phe-card-body>p{font-size:12px;line-height:1.7;color:var(--phe-muted);margin:12px 0 15px}
.phe-post-card .phe-read-link{font-size:11px}
.phe-image-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:150px;background:linear-gradient(135deg,#e8edf2,#d5dee8);color:#8391a1;font-size:13px;font-weight:900;letter-spacing:2px}
.phe-sidebar{display:flex;flex-direction:column;gap:20px;min-width:0}
.phe-widget{background:#fff;border:1px solid var(--phe-line);border-radius:12px;padding:20px;box-shadow:0 6px 20px rgba(18,38,58,.035);margin:0 0 0!important}
.phe-widget-title{position:relative;font-size:15px;font-weight:800;color:var(--phe-ink);padding-bottom:12px;margin:0 0 15px!important;border-bottom:1px solid var(--phe-line)}
.phe-widget-title:after{content:"";position:absolute;left:0;bottom:-1px;width:42px;height:2px;background:var(--phe-red)}
.phe-search-form{display:flex;gap:0}
.phe-search-form input{min-width:0;width:100%;height:43px;border:1px solid #dfe5eb;border-right:0;border-radius:5px 0 0 5px;padding:0 12px;font-size:12px;background:#fff}
.phe-search-form button{width:48px;flex:0 0 48px;border:0;border-radius:0 5px 5px 0;background:var(--phe-red);color:#fff;font-size:24px;cursor:pointer}
.phe-category-list{list-style:none;margin:0;padding:0}
.phe-category-list li{margin:0;padding:9px 0;border-bottom:1px solid #eff2f5}
.phe-category-list li:last-child{border-bottom:0}
.phe-category-list a{font-size:12px;color:#475569;text-decoration:none}
.phe-category-list a:hover{color:var(--phe-red)}
.phe-category-list .count{float:right;color:#99a3ae;font-size:11px}
.phe-mini-posts{display:flex;flex-direction:column;gap:13px}
.phe-mini-post{display:grid;grid-template-columns:66px 1fr;gap:11px;align-items:center;text-decoration:none!important;color:var(--phe-ink)!important}
.phe-mini-thumb{width:66px;height:58px;overflow:hidden;border-radius:6px;background:#eef1f4}
.phe-mini-thumb img{width:100%;height:100%;object-fit:cover}
.phe-mini-post strong{display:block;font-size:11px;line-height:1.45;font-weight:700}
.phe-mini-post small{display:block;margin-top:5px;color:#929ca7;font-size:10px}
.phe-sales-card{overflow:hidden;border-radius:13px;background:#132b42;color:#fff;box-shadow:0 10px 25px rgba(15,39,61,.12)}
.phe-sales-image{display:block;width:100%;max-height:190px;object-fit:cover}
.phe-sales-content{padding:23px}
.phe-sales-kicker{font-size:9px;font-weight:800;letter-spacing:1.8px;color:#ffcf45}
.phe-sales-content h3{font-size:20px;line-height:1.25;color:#fff;font-weight:800;margin:9px 0}
.phe-sales-content p{font-size:12px;line-height:1.65;color:#d5e0e9;margin:0 0 14px}
.phe-sales-name,.phe-sales-phone{display:block;color:#fff;font-size:12px;margin:4px 0}
.phe-sales-button{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:17px;padding:12px 15px;border-radius:6px;background:#20bd68;color:#fff!important;text-decoration:none!important;font-size:12px;font-weight:800}
.phe-sales-button:hover{background:#159d54;color:#fff!important}
.navigation.pagination{margin:32px 0 0;text-align:left}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:7px}
.navigation.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border:1px solid var(--phe-line);border-radius:5px;background:#fff;color:#4c5b6b;text-decoration:none;font-size:12px}
.navigation.pagination .page-numbers.current{background:var(--phe-red);border-color:var(--phe-red);color:#fff}
.phe-breadcrumb{display:flex;flex-wrap:wrap;gap:9px;align-items:center;color:#98a2ad;font-size:11px;margin:0 0 24px}
.phe-breadcrumb a{color:#64748b;text-decoration:none}
.phe-article{min-width:0;background:#fff;border:1px solid var(--phe-line);border-radius:15px;padding:34px;box-shadow:0 8px 25px rgba(18,38,58,.04)}
.phe-article-header h1{font-size:clamp(27px,3.2vw,39px);line-height:1.2;letter-spacing:-.7px;font-weight:850;color:var(--phe-ink);margin:0 0 15px}
.phe-article-intro{font-size:16px;line-height:1.75;color:#637184;margin:18px 0 0}
.phe-article-featured{margin:25px 0 28px;border-radius:10px;overflow:hidden}
.phe-article-featured img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover}
.phe-article-content{font-size:15px;line-height:1.85;color:#334155;overflow-wrap:anywhere}
.phe-article-content h2,.phe-article-content h3,.phe-article-content h4{color:var(--phe-ink);line-height:1.3;font-weight:800;margin:1.6em 0 .7em}
.phe-article-content h2{font-size:27px}.phe-article-content h3{font-size:21px}
.phe-article-content p{margin:0 0 1.25em}
.phe-article-content img{max-width:100%;height:auto;border-radius:7px}
.phe-article-content a{color:#c71920;text-decoration:underline}
.phe-article-content blockquote{margin:25px 0;padding:18px 22px;border-left:4px solid var(--phe-red);background:#f7f9fb;color:#526173}
.phe-article-content table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}
.phe-article-content th,.phe-article-content td{border:1px solid #e4e9ef;padding:10px;text-align:left}
.phe-article-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;border-top:1px solid var(--phe-line);padding-top:20px;margin-top:30px;font-size:11px;color:#788595}
.phe-article-tags a,.phe-share a{display:inline-block;margin:3px 5px 3px 0;padding:6px 9px;border-radius:4px;background:#f1f4f7;color:#526173;text-decoration:none}
.phe-related{margin-top:42px}
.phe-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.phe-related-card{border:1px solid var(--phe-line);border-radius:10px;overflow:hidden;background:#fff}
.phe-related-image{aspect-ratio:1.4}
.phe-related-body{padding:13px}
.phe-related-card h3{font-size:13px;line-height:1.4;margin:0 0 8px;font-weight:800}
.phe-related-card .phe-card-cats a{font-size:8px}
.phe-related-card .phe-meta{font-size:9px}
.phe-empty{padding:45px 25px;text-align:center;background:#fff;border:1px solid var(--phe-line);border-radius:12px}
@media(max-width:980px){.phe-layout{grid-template-columns:minmax(0,1fr) 270px;gap:22px}.phe-featured{grid-template-columns:1fr}.phe-featured-image{aspect-ratio:1.8}.phe-featured-content{padding:23px}}
@media(max-width:760px){.phe-page{padding:25px 0 42px}.phe-container{width:min(100% - 28px,600px)}.phe-hero{min-height:0;padding:27px 23px;border-radius:12px;margin-bottom:24px}.phe-hero-mark{display:none}.phe-hero h1{font-size:29px}.phe-hero p{font-size:13px}.phe-layout{grid-template-columns:1fr;gap:25px}.phe-post-grid{grid-template-columns:1fr 1fr;gap:13px}.phe-card-body{padding:14px}.phe-post-card h3{font-size:15px}.phe-post-card .phe-card-body>p{font-size:11px}.phe-article{padding:22px 18px}.phe-article-header h1{font-size:27px}.phe-article-content{font-size:14px}.phe-related-grid{grid-template-columns:1fr 1fr}.phe-sidebar{display:grid;grid-template-columns:1fr 1fr;align-items:start}.phe-sales-card{grid-column:1/-1}}
@media(max-width:480px){.phe-post-grid{grid-template-columns:1fr}.phe-card-image{aspect-ratio:1.65}.phe-sidebar{grid-template-columns:1fr}.phe-related-grid{grid-template-columns:1fr}.phe-featured-content{padding:20px}.phe-list-heading h2,.phe-section-heading h2{font-size:21px}.phe-article-footer{display:block}.phe-share{margin-top:12px}}

@media(max-width:760px){
  body.phe-editorial-active .phe-page .phe-container{width:calc(100% - 28px);max-width:600px}
  .phe-page .phe-layout{grid-template-columns:1fr;gap:24px}
}


/* V1.0.3 — Typography and search control aligned with Square 2.0.70 */
body.phe-editorial-active .phe-page {
    font-family: var(--square-body-family, 'Open Sans', sans-serif) !important;
    font-weight: var(--square-body-weight, 400);
    font-style: var(--square-body-style, normal);
    letter-spacing: var(--square-body-letter-spacing, 0);
}
body.phe-editorial-active .phe-page h1,
body.phe-editorial-active .phe-page h2,
body.phe-editorial-active .phe-page h3,
body.phe-editorial-active .phe-page h4,
body.phe-editorial-active .phe-page h5,
body.phe-editorial-active .phe-page h6,
body.phe-editorial-active .phe-page .phe-widget-title,
body.phe-editorial-active .phe-page .phe-sales-content h3 {
    font-family: var(--square-h-family, 'Roboto Condensed', sans-serif) !important;
    font-weight: var(--square-h-weight, 700);
    font-style: var(--square-h-style, normal);
    letter-spacing: var(--square-h-letter-spacing, 0);
}
body.phe-editorial-active .phe-page p,
body.phe-editorial-active .phe-page a,
body.phe-editorial-active .phe-page input,
body.phe-editorial-active .phe-page button,
body.phe-editorial-active .phe-page .phe-meta,
body.phe-editorial-active .phe-page .phe-card-cats,
body.phe-editorial-active .phe-page .phe-sales-content,
body.phe-editorial-active .phe-page .phe-breadcrumb {
    font-family: var(--square-body-family, 'Open Sans', sans-serif) !important;
}

/* Force the search input and submit button to share the same control height.
   Square's global button padding must not enlarge the submit button. */
body.phe-editorial-active .phe-page .phe-search-form {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100%;
    height: 43px !important;
    min-height: 43px !important;
}
body.phe-editorial-active .phe-page .phe-search-form input[type="search"] {
    display: block;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 12px !important;
    line-height: 41px !important;
    border: 1px solid #dfe5eb !important;
    border-right: 0 !important;
    border-radius: 5px 0 0 5px !important;
}
body.phe-editorial-active .phe-page .phe-search-form button,
body.phe-editorial-active .phe-page .phe-search-form button[type="submit"] {
    display: flex !important;
    flex: 0 0 52px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    border: 0 !important;
    border-radius: 0 5px 5px 0 !important;
    box-shadow: none !important;
}
body.phe-editorial-active .phe-page .phe-search-form button span {
    display: block;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* V1.0.5 — Mobile archive top clearance and exact search button sizing */
/* Square's mobile masthead is in normal document flow. Add breathing room
   only to archive/blog pages; single-post spacing is intentionally unchanged. */
@media screen and (max-width: 768px) {
    body.phe-editorial-active:not(.single-post) .phe-archive {
        padding-top: 28px !important;
    }
}

/* Clip any inherited Square button padding/line-height that makes the
   search submit taller than the input. The selector is deliberately scoped. */
body.phe-editorial-active .phe-page .phe-search-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px !important;
    align-items: stretch !important;
    gap: 0 !important;
    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;
    overflow: hidden !important;
}
body.phe-editorial-active .phe-page .phe-search-form input[type="search"] {
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    height: 43px !important;
    min-height: 0 !important;
    max-height: 43px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    line-height: normal !important;
    align-self: stretch !important;
}
body.phe-editorial-active .phe-page .phe-search-form button,
body.phe-editorial-active .phe-page .phe-search-form button[type="submit"] {
    grid-column: 2;
    grid-row: 1;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 43px !important;
    min-height: 0 !important;
    max-height: 43px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 5px 5px 0 !important;
    overflow: hidden !important;
}
body.phe-editorial-active .phe-page .phe-search-form button::before,
body.phe-editorial-active .phe-page .phe-search-form button::after {
    display: none !important;
    content: none !important;
}


/* V1.0.6 — Keep the desktop fixed Square masthead clear of the blog hero.
   Square's #sq-masthead is fixed on desktop and its content does not reserve
   vertical space. Offset archive pages only; leave single posts untouched. */
@media screen and (min-width: 769px) {
    body.phe-editorial-active:not(.single-post) #sq-content > main#primary.phe-page {
        padding-top: 82px !important;
    }
}

/* On mobile Square changes #sq-masthead to position:relative, so no extra
   masthead compensation is needed. The WordPress admin toolbar's top gap
   is generated by WordPress only for logged-in administrators. */


/* V1.0.7 — Remove the extra gap above the Square masthead on blog archives.
   Square 2.0.70 uses position:fixed without an explicit top value. Setting
   top explicitly avoids the extra static-position offset caused by the
   WordPress admin-bar document offset. Single posts are intentionally excluded. */
@media screen and (min-width: 769px) {
    body.phe-editorial-active:not(.single-post) #sq-masthead {
        top: 0 !important;
    }
    body.admin-bar.phe-editorial-active:not(.single-post) #sq-masthead {
        top: 32px !important;
    }
}
@media screen and (min-width: 769px) and (max-width: 782px) {
    body.admin-bar.phe-editorial-active:not(.single-post) #sq-masthead {
        top: 46px !important;
    }
}


/* V1.0.8 — Mobile logged-in archive: remove the white spacer after WP admin bar.
   Square changes #sq-masthead to position:relative on <=768px. WordPress'
   mobile admin-bar offset leaves an additional blank strip before this header.
   Pull only the archive masthead into that strip; do not change single posts. */
@media screen and (max-width: 768px) {
    body.admin-bar.phe-editorial-active:not(.single-post) #sq-masthead {
        margin-top: -40px !important;
        position: relative !important;
        top: auto !important;
    }
    body.admin-bar.phe-editorial-active:not(.single-post) #sq-content > main#primary.phe-page {
        padding-top: 28px !important;
    }
}


/* V1.0.9 — Mobile visitor archive: remove the remaining ~36px top gap.
   This margin compensates the empty offset before Square's relative mobile
   masthead. Applies to blog/archive routes only, including logged-out visitors.
   Single posts and desktop layouts remain unchanged. */
@media screen and (max-width: 768px) {
    body.phe-editorial-active:not(.single-post) #sq-masthead {
        margin-top: -36px !important;
    }
    body.admin-bar.phe-editorial-active:not(.single-post) #sq-masthead {
        margin-top: -40px !important;
    }
}


/* V1.1.0 — Re-enable mobile sticky masthead for Editorial Blog + Single Post.
   Square 2.0.70 deliberately resets the header to position:relative on mobile.
   Use sticky rather than fixed to preserve the header's normal document space
   and avoid shifting the hero/article content when the page first loads. */
@media screen and (max-width: 768px) {
    /* Apply to all public pages, not just the editorial blog templates. */
    html body #sq-masthead {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        left: auto !important;
        right: auto !important;
        z-index: 1005 !important;
        width: 100% !important;
    }
}


/* V1.1.1 — The sticky masthead is global. Only the editorial page's
   content spacing rules remain scoped to .phe-editorial-active. */