/* Site header -- from the Riata Design Concept, ported onto the real menu (the concept's own
   link list was a bit stale: missing the stats page and the payee form, and still carrying Rope
   Horse Rewards as a dropdown instead of the external link it is now). Scoped to .hd/.mob so
   nothing here depends on or overwrites the rest of the site's styles. */
/* Overrides a sitewide `header { text-align:center; margin-bottom:3em; padding-top:1em; }` rule
   (_mainnew.css) meant for the centered page-hero <header> every content page opens with --
   this is a different <header>, the site nav, and needs none of that. */
.hd { position:sticky; top:0; z-index:50; background:#111111; color:#fff; border-bottom:.5px solid #4a4a4a; text-align:left; margin-bottom:0; padding-top:0; }
.hd-in { height:76px; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.hd-logo img { height:auto; max-height:92px; margin-bottom:-20px; z-index:999; position:relative; }
.hd-nav { display:flex; align-items:center; gap:.25rem; margin:0; padding:0; list-style:none; }
.hd-nav > li { position:relative; }
.hd-nav > li > a, .hd-nav > li > button {
    display:inline-flex; align-items:center; gap:.4rem; height:76px; padding:0 .95rem;
    background:none; border:0; color:#fff; cursor:pointer; font:inherit; font-family:poppins,"Helvetica Neue",Arial,sans-serif;
    font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.16em;
    white-space:nowrap; text-decoration:none; transition:color .15s ease;
}
.hd-nav > li > a:hover, .hd-nav > li > button:hover, .hd-nav > li.open > button,
.hd-nav > li > a:focus-visible, .hd-nav > li > button:focus-visible { color:#c2272c; outline:none; }
.hd-nav .chev { width:9px; height:9px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); flex:0 0 auto; }
.hd-sub {
    position:absolute; top:100%; left:0; min-width:250px; margin:0; padding:.5rem 0; list-style:none;
    background:#fff; color:#222222; border-top:3px solid #c2272c; box-shadow:0 18px 40px rgba(0,0,0,.25);
    opacity:0; visibility:hidden; transform:translateY(8px); transition:all .18s ease;
}
.hd-nav > li:hover .hd-sub, .hd-nav > li.open .hd-sub, .hd-nav > li:focus-within .hd-sub { opacity:1; visibility:visible; transform:none; }
.hd-sub a { display:block; padding:.7rem 1.25rem; font-size:.78rem; font-weight:500; letter-spacing:.06em; text-decoration:none; color:#222222; border-left:3px solid transparent; }
.hd-sub a:hover, .hd-sub a:focus-visible { background:#f7f7f7; border-left-color:#c2272c; outline:none; }
.hd-burger { display:none; background:none; border:0; color:#fff; padding:.5rem; cursor:pointer; }
.hd-burger span { display:block; width:26px; height:2px; background:currentColor; margin:6px 0; }

/* mobile menu */
body.lock { overflow:hidden; }
.mob { position:fixed; inset:0; z-index:70; background:#111111; color:#fff; transform:translateX(100%); transition:transform .28s ease; overflow-y:auto; }
.mob.open { transform:none; }
.mob-top { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.12); }
.mob-top img { height:48px; }
.mob-close { background:none; border:0; color:#fff; font:inherit; font-family:poppins,"Helvetica Neue",Arial,sans-serif; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; cursor:pointer; padding:.5rem; }
.mob-g { border-bottom:1px solid rgba(255,255,255,.12); }
.mob-g > button, .mob-g > a {
    width:100%; display:flex; justify-content:space-between; align-items:center; background:none; border:0;
    color:#fff; font:inherit; font-family:poppins,"Helvetica Neue",Arial,sans-serif; font-weight:700; font-size:.85rem;
    text-transform:uppercase; letter-spacing:.14em; padding:1.15rem 1.25rem; text-align:left; text-decoration:none; cursor:pointer;
}
.mob-g > button .chev { width:10px; height:10px; border-right:2px solid #c2272c; border-bottom:2px solid #c2272c; transform:rotate(45deg); transition:transform .2s ease; flex:0 0 auto; margin-right:.3rem; }
.mob-g.open > button .chev { transform:rotate(-135deg); }
.mob-g ul { list-style:none; margin:0; padding:0 0 .6rem; display:none; }
.mob-g.open ul { display:block; }
.mob-g ul a { display:block; padding:.7rem 1.25rem .7rem 2rem; color:#d6d6d6; text-decoration:none; font-size:.88rem; letter-spacing:.04em; border-left:3px solid transparent; }
.mob-g ul a:active, .mob-g ul a:focus-visible { color:#fff; border-left-color:#c2272c; outline:none; }
.mob-foot { padding:1.5rem 1.25rem 3rem; color:#d6d6d6; font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; line-height:2; }
.mob-foot a { color:#fff; text-decoration:none; }

@media (max-width:1080px) {
    .hd-nav { display:none; }
    .hd-burger { display:block; }
}
@media (max-width:640px) {
    .hd-in { height:64px; }
    .hd-nav > li > a, .hd-nav > li > button { height:64px; }
    .hd-logo img { max-height:66px; margin-bottom:-14px; }
}
