/* BAN custom layer — components not covered by the compiled utility CSS.
   Keep this file small; page markup should reuse existing utility classes. */

/* Header conditions dropdown (was React state; now CSS + JS) */
.dropdown-panel{opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:60}
[data-dropdown]:hover .dropdown-panel,
[data-dropdown]:focus-within .dropdown-panel,
[data-dropdown].open .dropdown-panel{opacity:1;visibility:visible;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){.dropdown-panel{transition:none}}

/* Mobile menu */
[data-mobile-panel].hidden{display:none}

/* The desktop nav needs ~1160px of room; between md and that, keep the mobile menu.
   (Fixes a pre-existing overflow on the live site at tablet widths.) */
@media (min-width:768px) and (max-width:1159px){
  nav[aria-label="Main"]{display:none}
  [data-mobile-btn]{display:block}
  #mobile-menu:not(.hidden){display:block}
}

/* Form feedback states */
.form-status{padding:1rem 1.25rem;font-size:.9rem;line-height:1.5;margin-top:1.5rem}
.form-status.ok{background:#e8efe9;color:#2f4a36;border:1px solid #c4d6c8}
.form-status.err{background:#f6e7e3;color:#7c2d1e;border:1px solid #e3c4bb}
button[disabled]{opacity:.6;cursor:not-allowed}

/* Honeypot — visually hidden, still fillable by bots */
.hp-field{position:absolute!important;left:-9999px!important;height:1px;width:1px;overflow:hidden}

/* Long-form article additions (used by 2026 articles; base longform-* styles live in site.css) */
.vignette-label{font-weight:600;font-style:normal;display:block;margin-bottom:12px;color:var(--color-text-muted,#5c5c5c);text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.cta-button{display:inline-block;background-color:#27343b;color:#fff;padding:.85rem 1.9rem;text-decoration:none;font-weight:500;font-size:.9rem;letter-spacing:.02em;transition:background-color .2s}
.cta-button:hover{background-color:#3a4a53}

/* NGE letter builder */
.nge-input{border:1px solid var(--color-border-subtle,#e6e4e0);background:#fff;padding:.4rem .6rem;font-size:.9rem;min-width:12rem}
.nge-letter{white-space:pre-wrap;font-size:.92rem;line-height:1.65;background:#fff;border:1px solid #e6e4e0;padding:2rem}
@media print{
  header, footer, .no-print, [data-mobile-panel]{display:none!important}
  .nge-letter{border:none;padding:0}
}