/* ═══════════════════════════════════════════════════════════════
   DICTIO HEADER — dictio-header.css
   Masukkan ke child theme: wp-content/themes/buddyx-child/
   Enqueue via functions.php child theme
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset dalam scope header ── */
.dictio-header-wrap *,
.dictio-header-wrap *::before,
.dictio-header-wrap *::after {
  box-sizing: border-box;
}

/* ── Variables ── */
.dictio-header-wrap {
  --navy:        #1B3A6B;
  --navy-2:      #24508F;
  --amber:       #C8851A;
  --amber-2:     #E09A2A;
  --white:       #FFFFFF;
  --cream:       #F4F1EC;
  --border:      #E8E4DC;
  --ink-2:       #44484E;
  --ink-3:       #8A9099;
  --bar-height:  34px;
  --logo-height: 58px;
  --nav-height:  42px;
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ════════════════════════════════
   WRAPPER
════════════════════════════════ */
.dictio-header-wrap {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  box-shadow: 0 2px 12px rgba(27, 58, 107, 0.10), 0 1px 3px rgba(27, 58, 107, 0.06);
}

/* ════════════════════════════════
   ROW 1 — UTILITY BAR NAVY
════════════════════════════════ */
.dictio-bar {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

/* efek 3D — gradient atas terang, bawah gelap, shine line di top */
.dictio-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.04) 40%,
    rgba(0,0,0,0.12) 100%
  );
  pointer-events: none;
}
.dictio-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.30);
  pointer-events: none;
}
/* shadow bawah bar untuk kesan depth */
.dictio-bar {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.20);
}

.dictio-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: var(--bar-height);
  position: relative;
}

.dictio-bar-left {
  display: flex;
  align-items: center;
}

.dictio-bar-text {
  font-size: 11px;
  color: rgba(255,255,255,0.70);
  letter-spacing: 0.01em;
}

.dictio-bar-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* icon buttons di bar */
.dictio-bar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.dictio-bar-icon:hover {
  color: var(--white);
  background: rgba(255,255,255,0.10);
  text-decoration: none;
}

/* badge cart & notifikasi */
.dictio-cart-count,
.dictio-notif-count {
  position: absolute;
  top: 3px; right: 3px;
  min-width: 14px; height: 14px;
  background: #E53E3E;
  border: 1.5px solid var(--navy);
  border-radius: 7px;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
}

/* Dictio AI button — disiapkan untuk nanti jika sudah ada halamannya
.dictio-bar-ai { ... }
*/

/* avatar di bar */
.dictio-bar-avatar {
  display: flex;
  align-items: center;
  margin-left: 4px;
  text-decoration: none;
}
.dictio-bar-avatar img {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.30);
  object-fit: cover;
  display: block;
}
.dictio-bar-avatar:hover { opacity: 0.85; }

/* link masuk jika belum login */
.dictio-bar-login {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.25);
  margin-left: 4px;
  transition: all 0.15s;
}
.dictio-bar-login:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.50);
  background: rgba(255,255,255,0.10);
  text-decoration: none;
}

/* tombol daftar */
.dictio-bar-register {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 5px;
  background: rgba(255,255,255,0.92);
  margin-left: 4px;
  transition: all 0.15s;
}
.dictio-bar-register:hover {
  background: var(--white);
  text-decoration: none;
  color: var(--navy);
}

/* tombol profil saya — pill amber */
.dictio-bar-profile {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--amber);
  margin-left: 4px;
  transition: all 0.15s;
}
.dictio-bar-profile:hover {
  background: var(--amber-2);
  color: var(--white);
  text-decoration: none;
}

/* ════════════════════════════════
   ROW 2 — LOGO + TAGLINE
════════════════════════════════ */
.dictio-logo-row {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.dictio-logo-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: var(--logo-height);
}

.dictio-logo-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Logo image */
.dictio-logo-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  flex-shrink: 0;
}
.dictio-logo-img {
  display: block;
  height: 44px;
  width: auto;
  object-fit: contain;
}

/* Fallback teks jika tidak ada logo */
.dictio-logo-text {
  font-size: 26px;
  font-weight: 800;
  color: var(--navy);
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: -0.5px;
  line-height: 1;
}

/* Separator vertikal */
.dictio-logo-sep {
  width: 1px;
  height: 38px;
  background: var(--border);
  flex-shrink: 0;
}

/* Tagline */
.dictio-logo-tagline {
  font-size: 10px;
  color: var(--ink-2);
  line-height: 1.65;
  white-space: nowrap;
}
.dictio-logo-tagline strong {
  color: var(--navy);
  font-weight: 600;
}

/* Smart Community kanan */
.dictio-smart-text {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.dictio-smart-text span {
  font-size: 7px;
  opacity: 0.7;
}

/* ════════════════════════════════
   ROW 3 — NAVIGATION BAR
════════════════════════════════ */
.dictio-nav-row {
  background: var(--cream);
  border-top: 1px solid var(--border);
}

.dictio-nav-inner {
  display: flex;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: var(--nav-height);
  gap: 8px;
}

/* Desktop nav menu */
.dictio-nav-desktop { display: flex; align-items: center; }

.dictio-nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0; padding: 0;
}

.dictio-nav-menu > li {
  position: relative;
}

.dictio-nav-menu > li > a {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 12px;
  height: var(--nav-height);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color 0.15s;
}

.dictio-nav-menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 12px; right: 12px;
  height: 2.5px;
  background: var(--amber);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.dictio-nav-menu > li:hover > a,
.dictio-nav-menu > li.current-menu-item > a,
.dictio-nav-menu > li.current-menu-ancestor > a {
  color: var(--amber);
}

.dictio-nav-menu > li:hover > a::after,
.dictio-nav-menu > li.current-menu-item > a::after,
.dictio-nav-menu > li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}

/* Dropdown */
.dictio-nav-menu .sub-menu {
  position: absolute;
  top: 100%; left: 0;
  min-width: 200px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--amber);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 24px rgba(27,58,107,0.10), 0 2px 6px rgba(27,58,107,0.06);
  padding: 6px 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 100;
}
.dictio-nav-menu > li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dictio-nav-menu .sub-menu li a {
  display: block;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.dictio-nav-menu .sub-menu li a:hover {
  background: #F0EDE8;
  color: var(--amber);
}

/* caret arrow untuk item yang punya anak */
.dictio-nav-menu > li.menu-item-has-children > a::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 3px;
  opacity: 0.55;
  position: relative;
  top: 1px;
}

/* ── Search inline ── */
.dictio-nav-search { margin-left: auto; position: relative; }

.dictio-search-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid #DDD8CF;
  background: rgba(255,255,255,0.65);
  cursor: pointer;
  font-size: 11.5px;
  color: var(--ink-3);
  font-family: inherit;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}
.dictio-search-btn:hover {
  border-color: var(--navy);
  background: var(--white);
}
.dictio-search-btn svg { flex-shrink: 0; }

#dictio-search-form {
  display: none;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: var(--white);
  border: 1.5px solid var(--navy);
  border-radius: 20px;
  overflow: hidden;
  width: 260px;
  box-shadow: 0 4px 16px rgba(27,58,107,0.12);
}
#dictio-search-form.dictio-search-open { display: flex; }
#dictio-search-form input[type="search"] {
  flex: 1;
  border: none;
  outline: none;
  padding: 7px 14px;
  font-size: 12px;
  font-family: inherit;
  color: var(--navy);
  background: transparent;
}
#dictio-search-form button {
  padding: 0 12px;
  background: var(--navy);
  border: none;
  cursor: pointer;
  color: var(--white);
  display: flex;
  align-items: center;
}
#dictio-search-form button:hover { background: var(--navy-2); }

/* ── Hamburger (hidden desktop) ── */
.dictio-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-left: 4px;
  position: relative;
  z-index: 10000; /* di atas admin bar (z-index: 99999 admin bar, tapi kita butuh lebih tinggi dari overlay) */
  -webkit-tap-highlight-color: transparent;
}
.dictio-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.25s;
}
.dictio-hamburger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.dictio-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dictio-hamburger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ════════════════════════════════
   MOBILE DRAWER
════════════════════════════════ */
.dictio-mobile-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 85vw);
  height: 100dvh;
  background: var(--white);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(27,58,107,0.14);
  z-index: 100000; /* lebih tinggi dari admin bar (99999) */
  overflow-y: auto;
  /* Pakai visibility+transform, BUKAN display:none
     supaya CSS transition bisa jalan */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.28s;
}
.dictio-mobile-drawer.dictio-drawer-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
}

.dictio-drawer-search {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.dictio-drawer-search form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  border: 1px solid #DDD8CF;
  border-radius: 20px;
  padding: 7px 14px;
}
.dictio-drawer-search svg { flex-shrink: 0; color: var(--ink-3); }
.dictio-drawer-search input[type="search"] {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: var(--navy);
}
.dictio-drawer-search input::placeholder { color: var(--ink-3); }

/* menu dalam drawer */
.dictio-drawer-menu {
  list-style: none;
  margin: 0; padding: 0;
}
.dictio-drawer-menu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.dictio-drawer-menu li a::after {
  content: '›';
  font-size: 16px;
  color: var(--ink-3);
}
.dictio-drawer-menu li a:hover {
  background: #F0EDE8;
  color: var(--amber);
}
.dictio-drawer-menu li.current-menu-item > a { color: var(--amber); }

/* sub-menu dalam drawer */
.dictio-drawer-menu .sub-menu {
  list-style: none;
  margin: 0; padding: 0;
  background: var(--cream);
}
.dictio-drawer-menu .sub-menu li a {
  padding-left: 36px;
  font-size: 12.5px;
  font-weight: 400;
}

/* Overlay */
.dictio-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(27,58,107,0.30);
  z-index: 99999;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.dictio-overlay.dictio-overlay-show { display: block; }

/* ════════════════════════════════
   RESPONSIVE — MOBILE < 900px
════════════════════════════════ */
@media (max-width: 900px) {

  /* Bar navy: sembunyikan teks kiri, tampilkan icons + avatar */
  .dictio-bar-text   { display: none; }
  .dictio-bar-icon   { display: flex; } /* icon tetap tampil di mobile */
  .dictio-smart-text { display: none; } /* dipindah ke bar mobile via PHP */

  /* Logo row */
  .dictio-logo-inner   { height: auto; padding: 8px 14px; }
  .dictio-logo-img     { height: 34px; }
  .dictio-logo-sep     { height: 26px; }
  .dictio-logo-tagline { font-size: 9px; white-space: normal; line-height: 1.5; }

  /* Nav row disembunyikan — pakai drawer */
  .dictio-nav-row     { display: none; }
  .dictio-nav-desktop { display: none; }

  /* Hamburger muncul di logo row */
  .dictio-hamburger { display: flex; margin-left: auto; }
}

/* Mobile XS < 360px: tagline disembunyikan hanya untuk layar sangat kecil */
@media (max-width: 360px) {
  .dictio-logo-tagline { display: none; }
  .dictio-logo-sep     { display: none; }
  .dictio-bar-icon { width: 22px; height: 22px; }
  .dictio-bar-icon svg { width: 12px; height: 12px; }
}

/* ════════════════════════════════
   UTILITY
════════════════════════════════ */

/* Top diatur sepenuhnya oleh JS (fixDictioTop).
   CSS hanya set default 0 — JS yang hitung tinggi admin bar aktual */
#dictio-header.dictio-header-wrap {
  top: 0;
}

/* ════════════════════════════════
   OVERRIDE BUDDYX — hilangkan header asli & area putih
════════════════════════════════ */

/* Wrapper BuddyX: reset semua spacing & background */
.site-header-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
  height: auto !important;
  border: none !important;
  box-shadow: none !important;
}

/* Container dalam wrapper BuddyX: buang padding */
.site-header-wrapper > .container {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Header asli BuddyX (#masthead): sembunyikan sepenuhnya */
#masthead.site-header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Sticky header BuddyX: nonaktifkan */
.buddyx-sticky-header,
.site-header.sticky-header,
.site-header-wrapper.sticky-wrapper {
  position: static !important;
  top: auto !important;
}

/* ════════════════════════════════
   OVERRIDE BUDDYX — drawer menu colors
════════════════════════════════ */

/* Reset warna orange BuddyX di drawer */
#dictio-mobile-drawer .dictio-drawer-menu li a,
#dictio-mobile-drawer .dictio-drawer-menu li a:hover,
#dictio-mobile-drawer .dictio-drawer-menu li a:focus,
#dictio-mobile-drawer .dictio-drawer-menu li a:visited {
  color: var(--navy) !important;
  background: transparent !important;
  text-decoration: none !important;
}
#dictio-mobile-drawer .dictio-drawer-menu li a:hover {
  background: #F0EDE8 !important;
  color: var(--amber) !important;
}
#dictio-mobile-drawer .dictio-drawer-menu li.current-menu-item > a,
#dictio-mobile-drawer .dictio-drawer-menu li.current-menu-ancestor > a {
  color: var(--amber) !important;
  background: transparent !important;
}

/* Pastikan overlay hilang sempurna setelah close */
.dictio-overlay {
  transition: opacity 0.25s ease;
  opacity: 0;
}
.dictio-overlay.dictio-overlay-show {
  opacity: 1;
}

/* Fix: warna default link drawer harus navy, bukan amber */
#dictio-mobile-drawer .dictio-drawer-menu a {
  color: #1B3A6B !important;
}
#dictio-mobile-drawer .dictio-drawer-menu a:hover {
  color: #C8851A !important;
  background: #F0EDE8 !important;
}
#dictio-mobile-drawer .dictio-drawer-menu li.current-menu-item > a {
  color: #C8851A !important;
}

/* ── Fix area putih saat admin bar aktif ── */
body.admin-bar #dictio-header.dictio-header-wrap {
  margin-top: -32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar #dictio-header.dictio-header-wrap {
    margin-top: -46px;
  }
}

/* ── Fix warna orange dari theme BuddyX di drawer menu ── */
#dictio-mobile-drawer .dictio-drawer-menu a,
#dictio-mobile-drawer .dictio-drawer-menu a:visited {
  color: #1B3A6B !important;
  background: transparent !important;
}
#dictio-mobile-drawer .dictio-drawer-menu a:hover {
  color: #C8851A !important;
  background: #F0EDE8 !important;
}
#dictio-mobile-drawer .dictio-drawer-menu li.current-menu-item > a {
  color: #C8851A !important;
}

/* ── Hamburger warna navy, override orange BuddyX ── */
.dictio-hamburger span {
  background: #1B3A6B !important;
}

/* ── Override warna merah BuddyX pada button di header ── */
#dictio-header button,
#dictio-header input[type="button"],
#dictio-header input[type="submit"],
#dictio-mobile-drawer button {
  background-color: transparent !important;
  border-color: transparent !important;
  color: inherit !important;
}

/* Search button desktop — navy */
#dictio-header .dictio-nav-search #dictio-search-form button[type="submit"] {
  background: #1B3A6B !important;
  color: #fff !important;
  border-color: #1B3A6B !important;
}
#dictio-header .dictio-nav-search #dictio-search-form button[type="submit"]:hover {
  background: #24508F !important;
  border-color: #24508F !important;
}

/* Search button — pastikan search-btn tidak kena warna merah */
#dictio-header .dictio-search-btn {
  background: rgba(255,255,255,0.65) !important;
  color: #8A9099 !important;
  border-color: #DDD8CF !important;
}
#dictio-header .dictio-search-btn:hover {
  background: #fff !important;
  border-color: #1B3A6B !important;
  color: #1B3A6B !important;
}

/* Hamburger — pastikan tidak kena warna merah */
#dictio-header .dictio-hamburger {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
}

/* ── Mobile: perbesar logo dan tagline ── */
@media (max-width: 900px) {
  .dictio-logo-img {
    height: 42px !important;
  }
  .dictio-logo-tagline {
    font-size: 10px !important;
    line-height: 1.6 !important;
  }
  .dictio-logo-sep {
    height: 34px !important;
  }
}

/* ── Mobile: Smart Community tampil di bar navy kiri ── */
@media (max-width: 900px) {
  /* Sembunyikan di logo row */
  .dictio-smart-text {
    display: none !important;
  }

  /* Tampilkan versi bar navy via bar-left */
  .dictio-bar-left::after {
    content: 'Smart Community, Smart Society';
    font-size: 10px;
    font-weight: 700;
    color: #E09A2A;
    letter-spacing: 0.02em;
  }

  /* Sembunyikan teks bar kiri yang lain di mobile */
  .dictio-bar-text {
    display: none;
  }
}

.dictio-bar-left::after {
  padding-left: 5px;  /* ← ubah sesuai selera */
}