/* assets/css/site-header.css: public site header (header.php), redesigned 2026-10-17.
   Desktop (> 1024px): one row, ≤ 72px. Mobile (≤ 1024px): slim bar ≤ 60px + full-height menu. Loaded render-blocking
   (small) so the header never shifts. JS: assets/js/site-header.js. Prefix sh- keeps it clear of Tailwind/header.css. */
.sh, .sh-menu { --sh-g9:#062c24; --sh-g8:#064e3b; --sh-g7:#047857; --sh-g6:#059669; --sh-g0:#ecfdf5; --sh-or:#f97316; --sh-ink:#0f172a; --sh-mut:#64748b; --sh-line:#e5e7eb; }
.sh { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--sh-line);
      font-family: 'Outfit', system-ui, sans-serif; transition: box-shadow .2s; }
@supports (backdrop-filter: blur(12px)) { .sh { background: rgba(255,255,255,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } }
.sh.sh-scrolled { box-shadow: 0 6px 24px rgba(15,23,42,.08); }
.sh *, .sh-menu * { box-sizing: border-box; }
.sh a, .sh-menu a { text-decoration: none; }
.sh-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sh-bar { max-width: 1360px; margin: 0 auto; height: 71px; padding: 0 20px; display: flex; align-items: center; gap: 12px; }

/* logo */
.sh-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--sh-ink); border-radius: 12px; }
.sh-logo img { height: 44px; width: auto; display: block; }
.sh-word { display: flex; flex-direction: column; line-height: 1; }
.sh-word b { font: 900 21px/1 'Poppins', sans-serif; color: var(--sh-g8); letter-spacing: -.03em; text-transform: uppercase; }
.sh-word b span { color: var(--sh-or); }
.sh-word small { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #9ca3af; margin-top: 4px; white-space: nowrap; }

/* desktop nav */
.sh-nav { display: flex; align-items: center; gap: 2px; margin-left: 18px; }
.sh-nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.sh-nav li { position: relative; }
.sh-top { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border: 0; background: none; border-radius: 10px;
          font: 600 15px/1 'Outfit', sans-serif; color: #1f2937; cursor: pointer; white-space: nowrap; }
.sh-top:hover, .sh-dd.sh-open > .sh-top { background: #f3f4f6; color: var(--sh-g8); }
.sh-top .fa-chevron-down { font-size: 10px; opacity: .55; transition: transform .2s; }
.sh-dd.sh-open > .sh-top .fa-chevron-down { transform: rotate(180deg); }
.sh-top.sh-active { color: var(--sh-g7); }
.sh-top.sh-active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--sh-g6); }
.sh-new { font-size: 10px; font-weight: 900; letter-spacing: .08em; color: #fff; background: var(--sh-or); padding: 2px 6px; border-radius: 99px; line-height: 1.2; }

.sh-panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 320px; padding: 8px; background: #fff; border: 1px solid var(--sh-line); border-radius: 16px;
            box-shadow: 0 18px 48px rgba(15,23,42,.14); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.sh-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }   /* hover bridge */
.sh-dd.sh-open > .sh-panel { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 1025px) { .sh-dd:hover > .sh-panel { opacity: 1; visibility: visible; transform: none; } }
.sh-panel a { display: grid; grid-template-columns: 36px 1fr; gap: 2px 12px; align-items: center; padding: 10px 10px; border-radius: 12px; color: var(--sh-ink); }
.sh-panel a:hover { background: var(--sh-g0); }
.sh-panel a i { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--sh-g0); color: var(--sh-g7); font-size: 15px; }
.sh-panel a b { font-weight: 700; font-size: 15px; line-height: 1.25; }
.sh-panel a small { color: var(--sh-mut); font-size: 13px; line-height: 1.3; }
.sh-panel a.sh-cur { background: var(--sh-g0); }
.sh-panel a.sh-cur b { color: var(--sh-g7); }
.sh-panel .sh-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #c2410c; background: #ffedd5; padding: 1px 6px; border-radius: 99px; margin-left: 6px; vertical-align: 1px; }
.sh-panel-note { margin: 6px 4px 2px; padding: 10px 12px 4px; border-top: 1px solid var(--sh-line); font-size: 13px; color: var(--sh-mut); }
.sh-panel-note b { color: #c2410c; }

/* right side */
.sh-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sh-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px; background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; font-size: 13px; font-weight: 700; white-space: nowrap; }
.sh-ico { position: relative; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #4b5563; font-size: 19px; }
.sh-ico:hover { background: #f3f4f6; }
.sh-ico.wa:hover { color: #128C7E; } .sh-ico.tg:hover { color: #229ED9; }
.sh-tip { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #111827; color: #fff; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.sh-ico:hover .sh-tip, .sh-ico:focus-visible .sh-tip { opacity: 1; }
.sh-cta { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 99px; background: var(--sh-g8); color: #fff !important; font-weight: 700; font-size: 15px; white-space: nowrap; box-shadow: 0 6px 16px rgba(6,78,59,.22); transition: background .15s; }
.sh-cta:hover { background: var(--sh-g7); }
.sh-cta img { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); object-fit: cover; }
.sh-burger { display: none; width: 44px; height: 44px; border: 0; background: none; border-radius: 12px; color: #374151; font-size: 22px; cursor: pointer; }
.sh-burger:hover { background: #f3f4f6; }

/* focus */
.sh a:focus-visible, .sh button:focus-visible, .sh-menu a:focus-visible, .sh-menu button:focus-visible { outline: 3px solid var(--sh-or); outline-offset: 2px; }

@media (max-width: 1240px) { .sh-word small { display: none; } .sh-top { padding: 0 10px; } }
@media (max-width: 1439px) { .sh-chip { display: none; } }

/* mobile bar */
@media (max-width: 1024px) {
  .sh-bar { height: 59px; padding: 0 12px; gap: 8px; }
  .sh-nav, .sh-ico { display: none; }
  .sh-logo img { height: 38px; }
  .sh-word b { font-size: 18px; }
  .sh-cta { height: 40px; width: 40px; padding: 0; justify-content: center; box-shadow: none; }
  .sh-cta .sh-cta-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sh-cta img { width: 32px; height: 32px; border: 0; }
  .sh-burger { display: inline-flex; align-items: center; justify-content: center; }
}

/* mobile menu (full height) */
.sh-menu { position: fixed; inset: 0; z-index: 2000; background: #fff; display: flex; flex-direction: column; font-family: 'Outfit', system-ui, sans-serif; color: var(--sh-ink, #0f172a); }
.sh-menu[hidden] { display: none; }
.sh-menu-head { height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 16px; border-bottom: 1px solid #e5e7eb; }
.sh-menu-head b { font: 900 18px 'Poppins', sans-serif; color: #064e3b; text-transform: uppercase; letter-spacing: -.02em; }
.sh-menu-head b span { color: #f97316; }
.sh-close { width: 48px; height: 48px; border: 0; background: #f3f4f6; border-radius: 14px; font-size: 20px; color: #374151; cursor: pointer; }
.sh-menu-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 16px 16px; overscroll-behavior: contain; }
.sh-m-user { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 8px 0; background: #ecfdf5; border-radius: 16px; }
.sh-m-user img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.sh-m-user div { flex: 1; min-width: 0; }
.sh-m-user strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-m-user form { margin: 0; }
.sh-m-user button { background: none; border: 0; padding: 0; color: #dc2626; font-weight: 700; font-size: 13px; cursor: pointer; min-height: 32px; }
.sh-m-link, .sh-acc > button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 4px; border: 0; border-bottom: 1px solid #f1f5f9; background: none;
                               font: 700 17px 'Outfit', sans-serif; color: #111827; cursor: pointer; text-align: left; }
.sh-m-link > i:first-child, .sh-acc > button > i:first-child { width: 22px; text-align: center; color: #047857; }
.sh-acc > button .fa-chevron-down { margin-left: auto; font-size: 13px; color: #9ca3af; transition: transform .2s; }
.sh-acc > button[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.sh-acc-panel { padding: 4px 0 10px 34px; }
.sh-acc-panel[hidden] { display: none; }
.sh-acc-panel a { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 6px 4px; color: #1f2937; font-weight: 600; font-size: 16px; border-radius: 10px; }
.sh-acc-panel a small { color: #64748b; font-weight: 500; font-size: 13px; }
.sh-acc-panel a.sh-cur { color: #047857; }
.sh-m-link .sh-new { margin-left: 4px; }
.sh-m-chip { display: inline-flex; margin: 12px 0 4px; }
.sh-menu-foot { flex-shrink: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #e5e7eb; display: grid; gap: 10px; }
.sh-menu-foot .sh-cta { width: 100%; height: 52px; justify-content: center; font-size: 16px; padding: 0 18px; }
.sh-menu-foot .sh-cta .sh-cta-t { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
.sh-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sh-social a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 14px; font-weight: 700; font-size: 15px; color: #fff; }
.sh-social a.wa { background: #128C7E; } .sh-social a.tg { background: #229ED9; }
html.sh-lock, html.sh-lock body { overflow: hidden !important; }
@media (min-width: 1025px) { .sh-menu { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .sh-panel, .sh, .sh-top .fa-chevron-down { transition: none; } }
@media print { .sh, .sh-menu { display: none !important; } }