@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Poppins:wght@400;500;600&display=swap');

*{box-sizing:border-box;}
body{margin:0;background:#f5f4f1;color:#1a1410;font-family:'Poppins',sans-serif;font-size:14px;}
a{color:#6b5c45;text-decoration:none;}
a:hover{color:#3d3222;}

.vh-topbar{background:#1a1410;color:#FFFDD0;padding:0 32px;display:flex;justify-content:space-between;align-items:center;}
.vh-brand{display:flex;align-items:center;gap:12px;padding:14px 0;}
.vh-brand img{height:36px;width:auto;}
.vh-topbar h1{font-family:'Cinzel',serif;font-size:16px;letter-spacing:1px;margin:0;color:#FFF8DC;}

.vh-nav{display:flex;gap:4px;align-self:stretch;margin-left:8px;margin-right:auto;}
.vh-nav a{display:flex;align-items:center;padding:0 16px;color:rgba(255,253,208,.72);text-decoration:none;font-size:13px;font-weight:500;border-bottom:2px solid transparent;}
.vh-nav a:hover{color:#FFF8DC;}
.vh-nav a.active{color:#FFF8DC;border-bottom-color:#6b5c45;font-weight:600;}

.vh-acct{position:relative;}
.vh-acct-btn{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid rgba(255,253,208,.25);border-radius:20px;padding:6px 12px 6px 6px;cursor:pointer;font-family:inherit;}
.vh-acct-btn .av{width:24px;height:24px;border-radius:50%;background:#6b5c45;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;flex-shrink:0;}
.vh-acct-btn .nm{font-size:12.5px;color:#FFFDD0;}
.vh-acct-btn .ch{font-size:8px;color:rgba(255,253,208,.6);transition:transform .15s;}
.vh-acct-btn[aria-expanded="true"] .ch{transform:rotate(180deg);}
.vh-acct-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.25);min-width:170px;padding:6px;display:none;z-index:60;}
.vh-acct-menu.open{display:block;}
.vh-acct-menu a{display:block;padding:9px 12px;border-radius:7px;color:#3d3222;text-decoration:none;font-size:13px;}
.vh-acct-menu a:hover{background:#f5f4f1;}

.vh-footer{max-width:1100px;margin:0 auto;padding:18px 24px 40px;text-align:center;font-size:12px;color:rgba(0,0,0,.4);}
.vh-footer a{color:#6b5c45;text-decoration:none;font-weight:600;}
.vh-footer a:hover{text-decoration:underline;}

.vh-preview-banner{background:#fff3cd;color:#7a5c00;padding:10px 32px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;font-size:13px;font-weight:500;text-align:center;}
.vh-preview-banner a{color:#7a5c00;text-decoration:underline;font-weight:600;white-space:nowrap;}
.vh-preview-banner a:hover{color:#4a3800;}

.vh-wrap{max-width:1100px;margin:0 auto;padding:36px 24px 80px;}

.vh-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:28px;margin-bottom:24px;box-shadow:0 2px 10px rgba(0,0,0,.04);}

/* Cursor-tracked zoom on a featured image thumbnail — the actual uploaded
   files are often much larger than the ~480px box they're shown in here, so
   this is how someone checks composition/detail without opening the full
   file elsewhere. transform-origin is set to the pointer position on
   mousemove (see vhWireZoom() in post.php), scale only applied on hover.
   overflow:hidden on the wrapper is load-bearing, not decorative: an
   earlier version let the image grow past its own box, and on this page's
   layout that pushed the left edge out past the visible column and it just
   silently disappeared rather than merely looking cropped (found
   2026-09-22). Staying inside this box the whole time — same box the image
   already sits in at normal size — makes that impossible regardless of
   where in the page the image sits. */
.vh-zoom-wrap{position:relative;display:inline-block;max-width:480px;width:100%;overflow:hidden;border-radius:10px;}
.vh-zoom-wrap img{display:block;width:100%;cursor:zoom-in;transition:transform .12s ease-out;}
@media (prefers-reduced-motion:reduce){.vh-zoom-wrap img{transition:none;}}

h2.vh-heading{font-family:'Cinzel',serif;font-size:19px;letter-spacing:.5px;margin:0 0 6px;}
p.vh-sub{color:rgba(0,0,0,.5);font-size:13px;margin:0 0 22px;}

.vh-tabs{display:flex;gap:8px;margin-bottom:24px;}
.vh-tab{padding:9px 18px;border-radius:20px;border:1px solid rgba(0,0,0,.15);font-size:12.5px;letter-spacing:.5px;}
.vh-tab.active{background:#6b5c45;color:#fff;border-color:#6b5c45;}

.vh-list-item{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid rgba(0,0,0,.08);}
.vh-list-item:last-child{border-bottom:none;}
.vh-list-item h3{font-size:14.5px;font-weight:600;margin:0 0 4px;}
.vh-list-item .vh-meta{font-size:11.5px;color:rgba(0,0,0,.45);}
.vh-badge{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:20px;}
.vh-badge.raw{background:#fff3cd;color:#7a5c00;}
.vh-badge.ready{background:#d4edda;color:#1a5c2a;}
.vh-badge.published{background:#dce4f0;color:#2a3d5c;}
.vh-badge.queued{background:#e6e0f7;color:#4a3a8a;}
.vh-badge.stale{background:#fbe0dc;color:#8a2f27;}

.vh-alert.warn{background:#fff3cd;color:#7a5c00;}
.vh-failed-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.08);font-size:13px;}
.vh-failed-item:last-child{border-bottom:none;}
.vh-failed-item .vh-meta{font-size:11.5px;color:rgba(0,0,0,.45);margin-top:3px;}

.vh-empty{color:rgba(0,0,0,.4);padding:30px 0;text-align:center;font-size:13px;}

form.vh-form label{display:block;font-size:12.5px;font-weight:600;margin:18px 0 6px;}
form.vh-form label:first-child{margin-top:0;}
form.vh-form input[type=text],form.vh-form input[type=email],form.vh-form input[type=password],
form.vh-form textarea,form.vh-form select{
  width:100%;padding:11px 14px;border:1px solid rgba(0,0,0,.15);border-radius:8px;
  font-family:'Poppins',sans-serif;font-size:13.5px;background:#fafafa;
}
form.vh-form textarea{min-height:160px;resize:vertical;}
form.vh-form .vh-hint{font-size:11.5px;color:rgba(0,0,0,.4);margin-top:4px;}
.vh-required{color:#a4453c;margin-left:2px;}
.vh-length-hint{font-size:11px;font-weight:600;display:inline-block;padding:2px 8px;border-radius:10px;}
.vh-length-hint.low{background:#fbe7e6;color:#8a2f27;}
.vh-length-hint.high{background:#fff3cd;color:#8a5a00;}
.vh-length-hint.ok{background:#e2f1e5;color:#1f5c30;}

.vh-btn{display:inline-block;background:#6b5c45;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;letter-spacing:.3px;}
.vh-btn:hover{background:#4a3f2f;color:#fff;}
.vh-btn.vh-btn-outline{background:transparent;color:#6b5c45;border:1px solid #6b5c45;}
.vh-btn.vh-btn-outline:hover{background:#6b5c45;color:#fff;}
.vh-btn.vh-btn-danger{background:#a4453c;}
.vh-btn.vh-btn-danger:hover{background:#7d332c;}

/* Preview gate — the button stays genuinely clickable (never a real
   `disabled` attribute, see post.php's vhGateSubmit for why), just visually
   nudged toward "preview first" until it's been opened. */
.vh-btn.vh-gate-pending{opacity:.55;}
.vh-btn.vh-gate-pending:hover{opacity:.75;}

#vh-gate-hint{font-size:12.5px;color:rgba(0,0,0,.5);margin-top:8px;transition:color .2s,font-weight .2s;}
#vh-gate-hint.vh-gate-hint-attn{color:#a4453c;font-weight:600;}

@keyframes vhAttnPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(164,69,60,.55);}
  50%{box-shadow:0 0 0 6px rgba(164,69,60,0);}
}
.vh-btn.vh-btn-attn{animation:vhAttnPulse 1s ease-in-out 2;}

.vh-alert{padding:13px 16px;border-radius:8px;font-size:13px;margin-bottom:20px;}
.vh-alert.error{background:#fbe7e6;color:#8a2f27;}
.vh-alert.success{background:#e2f1e5;color:#1f5c30;}

.vh-login-wrap{max-width:380px;margin:90px auto;}
.vh-login-logo{display:block;height:64px;width:auto;margin:0 auto 18px;}
.vh-login-wrap h1{font-family:'Cinzel',serif;font-size:20px;text-align:center;margin-bottom:6px;}
.vh-login-wrap p.vh-sub{text-align:center;}

.vh-actions{display:flex;gap:10px;margin-top:22px;}

/* Sticky work bar on the agency "Needs SEO Pass" edit page (post.php): the
   whole review loop (Format -> Generate SEO -> Preview -> Save -> Mark
   SEO-Ready) plus jump links stay on screen instead of requiring a scroll
   to the top/bottom of a very long form for every step. Buttons proxy to the
   page's original buttons, so no existing handler changed. */
body.vh-has-workbar{padding-bottom:84px;}
.vh-workbar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:#1a1410;color:#FFFDD0;box-shadow:0 -6px 22px rgba(0,0,0,.28);}
.vh-workbar-inner{max-width:1100px;margin:0 auto;padding:9px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;}
.vh-workbar-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.vh-workbar-nav button{background:transparent;border:0;color:rgba(255,253,208,.72);font:500 12px 'Poppins',sans-serif;padding:6px 9px;border-radius:6px;cursor:pointer;}
.vh-workbar-nav button:hover{background:rgba(255,253,208,.12);color:#FFF8DC;}
.vh-workbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto;}
.vh-workbar .vh-wb-btn{background:transparent;color:#FFF8DC;border:1px solid rgba(255,253,208,.4);border-radius:8px;padding:8px 14px;font:600 12.5px 'Poppins',sans-serif;cursor:pointer;white-space:nowrap;}
.vh-workbar .vh-wb-btn:hover{background:rgba(255,253,208,.14);}
.vh-workbar .vh-wb-btn:disabled{opacity:.55;cursor:wait;}
.vh-workbar .vh-wb-btn.vh-wb-primary{background:#6b5c45;border-color:#6b5c45;}
.vh-workbar .vh-wb-btn.vh-wb-primary:hover{background:#85734f;}
.vh-workbar .vh-wb-btn.vh-wb-final{background:#FFF8DC;color:#1a1410;border-color:#FFF8DC;}
.vh-workbar .vh-wb-btn.vh-wb-final.vh-gate-pending{opacity:.6;}
.vh-workbar-status{flex-basis:100%;display:none;font-size:12px;line-height:1.5;padding:2px 2px 0;}
.vh-workbar-status.ok{color:#bfe8c7;}
.vh-workbar-status.err{color:#ffb3ab;}
.vh-workbar-dirty{display:none;font-size:11.5px;font-weight:600;color:#ffd27a;}
[id^="vh-sec-"]{scroll-margin-top:16px;}
@media (max-width:700px){
  .vh-workbar-inner{padding:8px 12px;}
  .vh-workbar-nav{display:none;}
  .vh-workbar-actions{margin-left:0;width:100%;}
  .vh-workbar .vh-wb-btn{flex:1 1 auto;padding:8px 10px;}
}