/* ============================================
   BLOG ARCHIVE — Grid layout + card styling
   ALL selectors scoped under body.bwm-blog
   ============================================ */

/* --- theme toggle floating button (blog) --- */
body.bwm-blog .site-header nav a {
  color: var(--bwm-text);
}
/* menu header rata kiri (rapat ke logo), tombol CTA tetap di kanan.
   Selector dinaikkan spesifisitasnya karena CSS chrome (inline) memakai .brand{margin-right:auto}. */
body.bwm-blog .site-header .container.nav .brand {
  margin-right: 0;
}
body.bwm-blog .site-header .container.nav nav {
  margin-right: auto;
}
body.bwm-blog .site-header nav a:hover {
  color: var(--bwm-accent2);
}
body.bwm-blog .site-header .brand {
  color: var(--bwm-text);
}
body.bwm-blog .site-header .menu {
  color: var(--bwm-text);
}
body.bwm-blog .theme-btn {
  position: fixed;
  top: 88px;
  right: 22px;
  z-index: 999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--bwm-line);
  background: var(--bwm-surface);
  color: var(--bwm-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: .2s;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
body.bwm-blog .theme-btn:hover {
  background: var(--bwm-surface2);
  border-color: #3f3f46;
}
body.bwm-blog .theme-btn svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 800px) {
  body.bwm-blog .theme-btn {
    right: 14px;
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

/* --- light mode --- */
html.light body.bwm-blog{--bwm-bg:#f5f5f5;--bwm-surface:#fff;--bwm-surface2:#e8e8e8;--bwm-line:rgba(0,0,0,.1);--bwm-text:#1a1a1a;--bwm-muted:#666;--bwm-accent:#0d9488;--bwm-accent2:#14b8a6;--bwm-accent3:#059669;--bwm-grad:linear-gradient(135deg,#14b8a6 0%,#0d9488 55%,#059669 100%)}
html.light body.bwm-blog .site-header{background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
html.light body.bwm-blog .site-content{background:var(--bwm-bg)}
html.light body.bwm-blog{background:var(--bwm-bg)!important}
html.light body.bwm-blog .site-header nav a,
html.light body.bwm-blog .site-header .brand,
html.light body.bwm-blog .site-header .menu{color:#1a1a1a}
html.light body.bwm-blog .bwm-archive-title{color:#1a1a1a}
html.light body.bwm-blog .bwm-single-title{color:#1a1a1a}
html.light body.bwm-blog .bwm-post-card{background:#fff;border-color:rgba(0,0,0,.08)}
html.light body.bwm-blog .bwm-card-title a{color:#1a1a1a}
html.light body.bwm-blog .bwm-card-excerpt,.light body.bwm-blog .bwm-card-excerpt p{color:#555}
html.light body.bwm-blog .bwm-card-date{color:#777}
html.light body.bwm-blog .wp-block-post-content h1,
html.light body.bwm-blog .wp-block-post-content h2,
html.light body.bwm-blog .wp-block-post-content h3,
html.light body.bwm-blog .wp-block-post-content strong{color:#1a1a1a}
html.light body.bwm-blog .wp-block-post-content{color:#444}
html.light body.bwm-blog .wp-block-post-content blockquote{background:#f0f0f2;color:#333}
html.light body.bwm-blog .wp-block-query-pagination a{background:#eee;border-color:rgba(0,0,0,.1);color:#555}
html.light body.bwm-blog .wp-block-post-content th{background:#f0f0f2;color:#1a1a1a}
html.light body.bwm-blog .wp-block-post-content td{color:#444}

/* Mode light: paragraf/daftar/tabel ditimpa aturan dark (color:#a1a1aa) → kontras 2.35:1.
   Spesifisitas harus di atas `body.bwm-blog .wp-block-post-content p`. */
html.light body.bwm-blog .wp-block-post-content p,
html.light body.bwm-blog .wp-block-post-content li,
html.light body.bwm-blog .wp-block-post-content td,
html.light body.bwm-blog .wp-block-post-content figcaption,
html.light body.bwm-blog .wp-block-post-content table{color:#333}
html.light body.bwm-blog .wp-block-post-content figcaption{color:#52525b}
html.light body.bwm-blog .wp-block-post-content a{color:#0f766e;border-bottom-color:rgba(15,118,110,.35)}
html.light body.bwm-blog .wp-block-post-content a:hover{color:#0d9488;border-bottom-color:#0d9488}
html.light body.bwm-blog .bwm-single-meta,
html.light body.bwm-blog .bwm-single-meta .wp-block-post-date,
html.light body.bwm-blog .bwm-single-meta .wp-block-post-date time,
html.light body.bwm-blog .bwm-single-meta .wp-block-post-author-name,
html.light body.bwm-blog .bwm-single-meta .wp-block-post-author-name a{color:#52525b}
html.light body.bwm-blog .bwm-single-head .wp-block-post-terms a{color:#0f766e}

/* Pill teal terang (#2dd4bf) di atas putih = 1.7:1 → pakai teal 700 di mode light. */
html.light body.bwm-blog .bwm-single-foot .wp-block-post-terms a,
html.light body.bwm-blog .bwm-card-cat a{color:#0f766e}
html.light body.bwm-blog .bwm-single-foot .wp-block-post-terms a:hover{color:#0d9488}
html.light body.bwm-blog .wp-block-query-pagination a:hover{color:#0d9488}

/* Footer selalu berlatar gelap (#0b0b0e) walau mode light → teks tidak boleh pakai token tema terang.
   Tanpa ini: logo footer #1a1a1a di atas hitam (kontras 1.13:1) → tak terlihat. */
html.light body.bwm-blog .bwm-footer .brand,
html.light body.bwm-blog footer#bwmFooter .brand{color:#f5f5f5}
html.light body.bwm-blog .bwm-footer .footer,
html.light body.bwm-blog .bwm-footer .footer p,
html.light body.bwm-blog footer#bwmFooter .footer,
html.light body.bwm-blog footer#bwmFooter .footer p{color:#a1a1aa}

/* Teks redup lain di mode light: #a1a1aa di atas #f5f5f5 = 2.35:1 (gagal AA). */
html.light body.bwm-blog .bwm-archive-sub,
html.light body.bwm-blog .bwm-card-excerpt,
html.light body.bwm-blog .bwm-card-excerpt p,
html.light body.bwm-blog .bwm-single-foot .wp-block-post-terms{color:#52525b}
html.light body.bwm-blog .bwm-card-date,
html.light body.bwm-blog .bwm-card-date time,
html.light body.bwm-blog .wp-block-query-pagination a,
html.light body.bwm-blog .wp-block-query-pagination .page-numbers{color:#52525b}
html.light body.bwm-blog .bwm-card-excerpt,
html.light body.bwm-blog .bwm-card-excerpt p{color:#3f3f46}

body.bwm-blog ::selection {
  background: rgba(45,212,191,0.35);
  color: #fff;
}

body.bwm-blog .site-content {
  max-width: 1120px !important;
  width: 100%;
  margin: 0 auto;
  background: radial-gradient(ellipse at 78% 0%, rgba(45,212,191,0.14), transparent 45%);
}

/* — Archive header — */
body.bwm-blog .bwm-archive-head {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 20px 0;
  text-align: left;
}

body.bwm-blog .bwm-archive-title {
  color: #f5f5f5;
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.1;
  letter-spacing: -2px;
  margin: 0;
}

body.bwm-blog .bwm-archive-sub {
  color: #a1a1aa;
  font-size: 16px;
  margin: 14px 0 0;
}

/* — Grid — */
body.bwm-blog .wp-block-query {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

body.bwm-blog .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 22px;
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
}

body.bwm-blog .wp-block-post-template > li {
  margin: 0;
}

/* — Card — */
body.bwm-blog .bwm-post-card {
  background: #121215;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

body.bwm-blog .bwm-post-card:hover {
  border-color: rgba(45,212,191,0.45);
  transform: translateY(-3px);
}

/* — Thumbnail — */
body.bwm-blog .bwm-card-thumb {
  margin: 0;
  line-height: 0;
}

body.bwm-blog .bwm-card-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 0;
  border: none;
}

/* — Category — */
body.bwm-blog .bwm-card-cat {
  margin: 20px 20px 0;
}

body.bwm-blog .bwm-card-cat a {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #2dd4bf;
  background: rgba(45,212,191,0.12);
  padding: 3px 10px;
  border-radius: 100px;
  text-decoration: none;
}

/* — Title — */
body.bwm-blog .bwm-card-title {
  margin: 12px 20px 0;
  font-size: 19px;
  line-height: 1.32;
  font-weight: 750;
  letter-spacing: -0.4px;
}

body.bwm-blog .bwm-card-title a {
  color: #f5f5f5;
  text-decoration: none;
}

body.bwm-blog .bwm-card-title a:hover {
  color: #2dd4bf;
}

/* — Excerpt — */
body.bwm-blog .bwm-card-excerpt {
  margin: 10px 20px 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: #a1a1aa;
}

body.bwm-blog .bwm-card-excerpt p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: #a1a1aa;
}

/* — Date — */
body.bwm-blog .bwm-card-date {
  margin: auto 20px 20px;
  padding-top: 16px;
  font-size: 12.5px;
  color: #a1a1aa;
}

body.bwm-blog .bwm-card-date time {
  color: #a1a1aa;
  font-size: 12.5px;
}

/* — Pagination — */
body.bwm-blog .wp-block-query-pagination {
  max-width: 1120px;
  margin: 36px auto 0;
  padding: 0 20px;
  gap: 8px;
  justify-content: center;
}

body.bwm-blog .wp-block-query-pagination a,
body.bwm-blog .wp-block-query-pagination .page-numbers {
  background: #18181c;
  border: 1px solid rgba(255,255,255,0.08);
  color: #a1a1aa;
  border-radius: 8px;
  padding: 8px 14px;
  text-decoration: none;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
}

body.bwm-blog .wp-block-query-pagination a:hover {
  border-color: rgba(45,212,191,0.45);
  color: #f5f5f5;
}

body.bwm-blog .wp-block-query-pagination .current {
  background: linear-gradient(135deg, #22d3ee, #2dd4bf 55%, #34d399 100%);
  color: #04201c;
  font-weight: 700;
  border-color: transparent;
}

/* — No results — */
body.bwm-blog .wp-block-query-no-results {
  max-width: 1120px;
  margin: 34px auto;
  padding: 0 20px;
  color: #a1a1aa;
}

/* ============================================
   SINGLE POST
   ============================================ */

body.bwm-blog .bwm-single-head {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 20px 0;
  text-align: left;
}

body.bwm-blog .bwm-single-head .wp-block-post-terms {
  color: #a1a1aa;
  font-size: 12.5px;
  margin: 0 0 16px;
}

body.bwm-blog .bwm-single-head .wp-block-post-terms a {
  color: #2dd4bf;
  background: rgba(45,212,191,0.1);
  border: 1px solid rgba(45,212,191,0.25);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  font-size: 12.5px;
}

body.bwm-blog .bwm-single-title {
  color: #f5f5f5;
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.1;
  letter-spacing: -2px;
  margin: 0 0 18px;
}

body.bwm-blog .bwm-single-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  color: #a1a1aa;
  font-size: 13px;
  margin-bottom: 8px;
}

body.bwm-blog .bwm-single-meta .wp-block-post-date,
body.bwm-blog .bwm-single-meta .wp-block-post-date time,
body.bwm-blog .bwm-single-meta .wp-block-post-author-name,
body.bwm-blog .bwm-single-meta .wp-block-post-author-name a {
  color: #a1a1aa;
  font-size: 13px;
  text-decoration: none;
}

body.bwm-blog .bwm-single-meta .wp-block-post-author-name a:hover {
  color: #2dd4bf;
}

body.bwm-blog .bwm-single-thumb {
  max-width: 760px;
  margin: 26px auto 0;
  padding: 0 20px;
}

body.bwm-blog .bwm-single-thumb img {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  width: 100%;
  height: auto;
}

body.bwm-blog .wp-block-post-content {
  max-width: 820px;
  margin: 0 auto;
  padding: 8px 20px 60px;
  font-size: 17px;
  line-height: 1.78;
  color: #a1a1aa;
}

body.bwm-blog .wp-block-post-content > :first-child {
  margin-top: 0;
}

body.bwm-blog .wp-block-post-content h1 {
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.1;
  letter-spacing: -2px;
  font-weight: 800;
  color: #f5f5f5;
  margin: 0.4em 0;
}

body.bwm-blog .wp-block-post-content h2 {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -1.2px;
  font-weight: 800;
  color: #f5f5f5;
  margin: 1.8em 0 0.6em;
}

body.bwm-blog .wp-block-post-content h3 {
  font-size: clamp(20px, 2.3vw, 26px);
  font-weight: 750;
  color: #f5f5f5;
  margin: 1.5em 0 0.5em;
}

body.bwm-blog .wp-block-post-content p,
body.bwm-blog .wp-block-post-content li {
  color: #a1a1aa;
  font-size: 17px;
  line-height: 1.78;
}

body.bwm-blog .wp-block-post-content strong {
  color: #f5f5f5;
  font-weight: 700;
}

body.bwm-blog .wp-block-post-content a {
  color: #2dd4bf;
  text-decoration: none;
  border-bottom: 1px solid rgba(45,212,191,0.35);
}

body.bwm-blog .wp-block-post-content a:hover {
  color: #34d399;
  border-bottom-color: #34d399;
}

body.bwm-blog .wp-block-post-content h1 a,
body.bwm-blog .wp-block-post-content h2 a,
body.bwm-blog .wp-block-post-content h3 a {
  color: inherit;
  border-bottom: none;
}

body.bwm-blog .wp-block-post-content ul,
body.bwm-blog .wp-block-post-content ol {
  padding-left: 1.4em;
}

body.bwm-blog .wp-block-post-content li {
  margin-bottom: 0.5em;
}

body.bwm-blog .wp-block-post-content li::marker {
  color: #2dd4bf;
}

body.bwm-blog .wp-block-post-content blockquote {
  border-left: 3px solid #2dd4bf;
  background: #121215;
  margin: 1.6em 0;
  padding: 16px 20px;
  border-radius: 10px;
  color: #f5f5f5;
}

body.bwm-blog .wp-block-post-content code {
  background: #18181c;
  color: #2dd4bf;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.9em;
}

body.bwm-blog .wp-block-post-content img {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
}

body.bwm-blog .wp-block-post-content figure {
  margin: 26px 0;
}

body.bwm-blog .wp-block-post-content table {
  width: 100%;
  border-collapse: collapse;
  color: #a1a1aa;
}

body.bwm-blog .wp-block-post-content th,
body.bwm-blog .wp-block-post-content td {
  border: 1px solid rgba(255,255,255,0.1);
  padding: 10px 14px;
  text-align: left;
}

body.bwm-blog .wp-block-post-content th {
  background: #121215;
  color: #f5f5f5;
  font-weight: 700;
}

body.bwm-blog .wp-block-post-content figcaption {
  color: #a1a1aa;
  font-size: 13px;
  text-align: center;
  margin-top: 8px;
}

/* — Neutralize WP layout classes — */


body.bwm-blog .wp-block-post-content.has-global-padding {
  padding-left: 20px;
  padding-right: 20px;
}



body.bwm-blog .bwm-single-head.is-layout-flow,
body.bwm-blog .bwm-single-foot.is-layout-flow,
body.bwm-blog .bwm-single-meta.is-layout-flex {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* head tidak ikut direset: harus tetap selebar kolom teks dan center */
body.bwm-blog .bwm-single-head.is-layout-flow {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* — Separator — */
body.bwm-blog .wp-block-separator {
  border-color: rgba(255,255,255,0.1);
  max-width: 820px;
  margin: 40px auto 26px;
  opacity: 1;
}

/* — Single footer — */
body.bwm-blog .bwm-single-foot {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

body.bwm-blog .bwm-single-foot .wp-block-post-terms {
  color: #a1a1aa;
  font-size: 12.5px;
}

body.bwm-blog .bwm-single-foot .wp-block-post-terms a {
  color: #2dd4bf;
  background: rgba(45,212,191,0.08);
  border: 1px solid rgba(45,212,191,0.22);
  padding: 3px 10px;
  border-radius: 999px;
  text-decoration: none;
  margin-right: 6px;
  display: inline-block;
  font-size: 12.5px;
}

body.bwm-blog .bwm-single-foot .wp-block-post-terms a:hover {
  color: #34d399;
  border-color: #34d399;
}

/* — CTA inline — */
body.bwm-blog .bwm-cta-inline {
  background: #121215;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 18px 22px;
  color: #a1a1aa;
  font-size: 15px;
  margin: 26px 0 0;
}

body.bwm-blog .bwm-cta-inline a {
  color: #2dd4bf;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(45,212,191,0.35);
}

/* — Post navigation — */
body.bwm-blog .post-navigation {
  max-width: 820px;
  margin: 0 auto 40px;
  padding: 0 20px;
}

body.bwm-blog .post-navigation a {
  background: #121215;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 16px 18px;
  display: block;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

body.bwm-blog .post-navigation a:hover {
  border-color: rgba(45,212,191,0.45);
  transform: translateY(-2px);
}

/* — Comments — */
body.bwm-blog #comments,
body.bwm-blog #respond {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
}

body.bwm-blog #comments .comments-title,
body.bwm-blog .comment-reply-title {
  color: #f5f5f5;
  font-weight: 800;
}

body.bwm-blog .comment-form input[type=text],
body.bwm-blog .comment-form input[type=email],
body.bwm-blog .comment-form input[type=url],
body.bwm-blog .comment-form textarea {
  background: #121215;
  border: 1px solid rgba(255,255,255,0.1);
  color: #f5f5f5;
  border-radius: 10px;
}

body.bwm-blog .comment-form input:focus,
body.bwm-blog .comment-form textarea:focus {
  border-color: rgba(45,212,191,0.5);
  outline: none;
}

body.bwm-blog .comment-form .submit,
body.bwm-blog .comment-form button[type=submit],
body.bwm-blog .comment-form input[type=submit] {
  background: linear-gradient(135deg, #22d3ee, #2dd4bf 55%, #34d399 100%);
  color: #04201c;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  padding: 11px 22px;
  cursor: pointer;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 520px) {
  body.bwm-blog .bwm-archive-title {
    padding: 28px 20px 0;
    font-size: clamp(22px, 6vw, 30px);
  }
  body.bwm-blog .bwm-archive-head {
    padding: 0 20px;
  }
  body.bwm-blog .bwm-archive-head p {
    font-size: 14px;
  }
  body.bwm-blog .wp-block-query {
    padding: 0 20px;
  }
  body.bwm-blog .wp-block-post-template {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  body.bwm-blog .wp-block-query-pagination {
    padding: 0 20px;
  }
  body.bwm-blog .wp-block-query-no-results {
    padding: 0 20px;
  }
  body.bwm-blog .bwm-single-head {
    padding: 28px 20px 0;
  }
  body.bwm-blog .bwm-single-meta {
    font-size: 12px;
    gap: 10px;
  }
  body.bwm-blog .wp-block-post-content {
    padding: 8px 20px 40px;
    font-size: 16px;
    line-height: 1.75;
  }
  body.bwm-blog .wp-block-post-content h1 {
    font-size: clamp(22px, 6vw, 30px);
  }
  body.bwm-blog .wp-block-post-content h2 {
    font-size: clamp(18px, 5vw, 24px);
  }
  body.bwm-blog .bwm-single-foot {
    padding: 0 20px 30px;
  }
  body.bwm-blog .post-navigation {
    padding: 0 20px;
  }
  body.bwm-blog .wp-block-query-no-results {
    padding: 0 20px;
  }
}

/* ============================================
   HEADER & FOOTER RESPONSIVE
   ============================================ */

@media (max-width: 800px) {
  body.bwm-blog .site-header {
    padding: 0;   /* gutter diatur .container.nav supaya ikon pas pojok kanan */
  }
  body.bwm-blog .site-header .menu {
    display: block;
    width: 48px;
    height: 48px;
    font-size: 22px;
    padding: 0;
    line-height: 48px;
    text-align: center;
    margin-left: auto; /* nav disembunyikan → tanpa ini tombol ikut rapat kiri (gap 30px dari logo) */
  }
  body.bwm-blog .site-header nav {
    display: none;
  }
  body.bwm-blog .site-header nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* chrome CSS set align-items:center → item jadi sempit & rata tengah */
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 74px;
    height: calc(100dvh - 74px);
    z-index: 999;
    background: rgba(9,9,11,.98);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    padding: 10px 0;
    overflow-y: auto;
  }
  html.light body.bwm-blog .site-header nav.open {
    background: rgba(255,255,255,.98);
  }
  body.bwm-blog .site-header nav.open a {
    padding: 16px 24px;
    font-size: 16px;
    border-bottom: 1px solid var(--bwm-line);
    color: var(--bwm-text);
  }
  body.bwm-blog .site-header nav.open a:hover {
    background: rgba(255,255,255,.04);
  }
  body.bwm-blog .site-header .btn.btn-small {
    display: none;
  }
  body.bwm-blog .site-header .container.nav {
    width: 100%;    /* chrome CSS: .container{width:min(100% - 30px,600px)} → container 30px lebih sempit dari header */
    margin: 0;
    padding: 0 14px;
  }
  body.bwm-blog .bwm-footer {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 20px 14px;
  }
}

@media (max-width: 520px) {
  body.bwm-blog .site-header {
    padding: 0;   /* gutter diatur .container.nav supaya ikon pas pojok kanan */
  }
  body.bwm-blog .site-header .brand {
    font-size: 16px;
  }
  body.bwm-blog .bwm-footer p {
    font-size: 12px;
  }
}