/* Shared site-wide header + footer, matching The 500 Project homepage.
   Classes are "hf-" prefixed and variables are namespaced (--hf-*) so this
   file can be dropped onto any Oregon 500 page without colliding with that
   page's own .wrap/.nav/.brand/etc rules. */
:root{
  --hf-navy:#071D49;
  --hf-red:#A6192E;
  --hf-ink:#050E22;
  --hf-gray:#E8EAEE;
  --hf-max:1260px;
}
.hf-wrap{width:min(var(--hf-max),calc(100% - 48px));margin:auto}
.hf-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);border-top:5px solid var(--hf-red);border-bottom:1px solid var(--hf-gray);backdrop-filter:blur(12px)}
.hf-nav{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:26px}
/* Official logo artwork (navy/red in the header, white in the footer) */
.hf-brand{display:block;line-height:0;text-decoration:none}
.hf-brand img{display:block;width:300px;max-width:31vw;height:auto}
.hf-navlinks{display:flex;align-items:center;gap:23px;font-family:"IBM Plex Sans",Arial,sans-serif;font-size:.77rem;font-weight:700;letter-spacing:.035em;text-transform:uppercase}
.hf-navlinks a{color:inherit;text-decoration:none}
.hf-navlinks a:not(.hf-join):hover{color:var(--hf-red)}
.hf-join{background:var(--hf-red);color:#fff;padding:12px 17px}
.hf-join:link,.hf-join:visited,.hf-join:hover,.hf-join:active{color:#fff}
.hf-mobile-toggle{display:none;border:0;background:none;font-size:1.8rem;color:var(--hf-navy);cursor:pointer}
.hf-mobile-menu{display:none;padding:10px 24px 22px;border-top:1px solid var(--hf-gray)}
.hf-mobile-menu.open{display:grid;gap:4px}
.hf-mobile-menu a{padding:10px 0;font-family:"IBM Plex Sans",Arial,sans-serif;font-weight:700;text-transform:uppercase;font-size:.86rem;color:inherit;text-decoration:none}
footer.hf-footer{background:var(--hf-ink);color:#aeb8c6;padding:58px 0 24px;font-family:"IBM Plex Sans",Arial,sans-serif;line-height:1.56}
.hf-footer-grid{display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:42px}
.hf-footer-grid h4{color:#fff;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;margin:0 0 16px}
.hf-footer-links{display:grid;gap:9px;font-size:.9rem}
.hf-footer-links a{color:inherit;text-decoration:none}
.hf-footer-links a:hover{color:#fff}
.hf-footer-brand .hf-brand img{width:310px;max-width:100%}
.hf-footer-brand p{max-width:335px;margin:1em 0;font-size:.9rem;color:#aeb8c6}
.hf-footer-bottom{border-top:1px solid rgba(255,255,255,.13);margin-top:38px;padding-top:24px;display:flex;justify-content:space-between;gap:20px;font-size:.8rem}
.hf-footer-bottom a{color:inherit;text-decoration:none}
.hf-footer-tag{color:#fff;font-weight:700;letter-spacing:.08em}
.hf-future{opacity:.52;margin-top:5px}
/* Honeypot field used by the anti-spam pattern shared with assets/js/main.js */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Keeps fields focused by the browser or by main.js clear of the sticky header */
html{scroll-padding-top:110px}
/* Form errors and toasts rendered by assets/js/main.js */
.form-error{grid-column:1/-1;margin-top:6px;color:var(--hf-red);font-family:"IBM Plex Sans",Arial,sans-serif;font-size:.84rem;font-weight:600;line-height:1.4;text-transform:none;letter-spacing:0}
input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:var(--hf-red)!important;box-shadow:0 0 0 1px var(--hf-red)}
.form-alert{display:block;margin:0 0 16px;padding:13px 16px;border-left:4px solid var(--hf-red);background:#FBEEF0;color:#6E1020;font-family:"IBM Plex Sans",Arial,sans-serif;font-size:.92rem;font-weight:500;line-height:1.5;text-align:left;text-transform:none;letter-spacing:0}
.form-alert[hidden]{display:none}
.form-alert a,.toast-description a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.form-alert a:hover,.toast-description a:hover{color:var(--hf-red)}
#toast-region{position:fixed;top:96px;right:20px;z-index:200;display:flex;flex-direction:column;gap:12px;width:min(380px,calc(100vw - 40px));pointer-events:none}
.toast{pointer-events:auto;background:#fff;border-left:4px solid var(--hf-navy);box-shadow:0 10px 30px rgba(5,14,34,.18);padding:14px 18px;font-family:"IBM Plex Sans",Arial,sans-serif;opacity:0;transform:translateY(-10px);transition:opacity .25s ease,transform .25s ease}
.toast.is-visible{opacity:1;transform:translateY(0)}
.toast-title{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hf-navy);margin-bottom:4px}
.toast-description{font-size:.9rem;line-height:1.45;color:#3c4658}
.toast.toast-destructive{border-left-color:var(--hf-red)}
.toast.toast-destructive .toast-title{color:var(--hf-red)}
@media(max-width:600px){#toast-region{top:auto;bottom:16px;right:16px;width:calc(100vw - 32px)}}
@media(min-width:1031px){
  .hf-nav{min-height:72px}
  .hf-brand img{width:270px}
  .hf-footer-grid{gap:34px}
}
@media(max-width:1030px){
  .hf-brand img{width:270px;max-width:58vw}
  .hf-navlinks{display:none}
  .hf-mobile-toggle{display:block}
  .hf-footer-grid{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:680px){
  .hf-wrap{width:min(100% - 28px,var(--hf-max))}
  .hf-footer-grid{grid-template-columns:1fr}
  .hf-footer-bottom{display:block}
  .hf-footer-tag{margin-top:12px}
  .hf-brand img{width:225px;max-width:70vw}
}

/* ---- Shared components ---- */

/* 500 Member Number on the Join "Received" pages (filled by member-number.js). */
.member-number{display:flex;flex-direction:column;gap:6px;max-width:520px;margin:30px 0 0;padding:20px 24px;background:#fff;border:1px solid var(--hf-gray);border-left:5px solid var(--hf-red);font-family:"IBM Plex Sans",Arial,sans-serif}
.member-number[hidden]{display:none}
.member-number-label{color:var(--hf-red);font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.member-number-value{color:var(--hf-navy);font-size:clamp(2rem,4vw,2.6rem);font-weight:800;letter-spacing:.02em;line-height:1.1}
.member-number-note{color:var(--hf-navy);font-size:.92rem;line-height:1.45}

/* Member-only forms (CORE, RISE, Portal). */
.member-number-input{text-transform:uppercase}
.member-number-input::placeholder{text-transform:none}
.member-join-note a{color:var(--hf-red);font-weight:700;text-decoration:underline}
.consent label a{color:var(--hf-red);font-weight:700;text-decoration:underline}