/* Shared marketing header for every public page, the homepage included
   (includes/marketing_nav.php). Colors fall back to the brand palette so
   this file works on its own. */

.mkhead{ background:var(--navy,#002868); position:sticky; top:0; z-index:30;
         border-bottom:3px solid var(--gold,#C9A84C); }
.mkhead-in{ max-width:1180px; margin:0 auto; padding:10px 22px;
            display:flex; align-items:center; gap:22px; position:relative; }

.mkbrand{ color:#fff; font-weight:800; font-size:1.08rem; text-decoration:none;
          display:flex; align-items:center; gap:9px; white-space:nowrap; }
.mkbrand img{ display:block; border-radius:5px; }

.mknav{ margin-left:auto; display:flex; align-items:center; gap:24px; }
.mknav > a, .mkdrop-btn{ color:#c9d4ea; text-decoration:none; font-size:.95rem; font-weight:600; white-space:nowrap;
                         background:none; border:0; padding:6px 0; cursor:pointer; font-family:inherit; }
.mknav > a:hover, .mkdrop-btn:hover{ color:#fff; }
.mknav > a.on, .mkdrop.on > .mkdrop-btn{ color:var(--gold,#C9A84C); }
/* Log in: a plain text link, set apart from the page links by a divider. */
.mknav > a.mklogin{ color:#fff; padding-left:22px; border-left:1px solid rgba(255,255,255,.22); }

/* "Who it's for" dropdown */
.mkdrop{ position:relative; }
.mkdrop-btn span{ font-size:.75em; margin-left:2px; }
.mkdrop-menu{ display:none; position:absolute; top:calc(100% + 12px); left:-18px; min-width:320px;
              background:#fff; border-radius:14px; padding:8px; box-shadow:0 22px 50px rgba(4,12,30,.3); }
.mkdrop-menu::before{ content:''; position:absolute; top:-14px; left:0; right:0; height:14px; } /* hover bridge */
.mkdrop:hover .mkdrop-menu, .mkdrop:focus-within .mkdrop-menu, .mkdrop.open .mkdrop-menu{ display:block; }
.mkdrop-menu a{ display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:10px;
                text-decoration:none; color:var(--navy,#002868); }
.mkdrop-menu a:hover, .mkdrop-menu a.on{ background:#f2f5fa; }
.mkdrop-menu b{ display:block; font-size:.98rem; }
.mkdrop-menu small{ display:block; color:#667089; font-size:.82rem; margin-top:1px; }
.mkdrop-ic{ width:38px; height:38px; border-radius:10px; background:#f2f5fa; display:flex; align-items:center;
            justify-content:center; font-size:1.2rem; flex:none; }

.mkhead-cta{ display:flex; align-items:center; gap:10px; }
.mkbtn{ background:var(--gold,#C9A84C); color:var(--navy2,#00152f); font-weight:800;
        padding:10px 18px; border-radius:10px; text-decoration:none; font-size:.92rem;
        white-space:nowrap; }
.mkbtn:hover{ filter:brightness(1.07); }

/* ☰ toggle: the checkbox is the switch, the label is the button. */
.mkmenu-cb{ display:none; }
.mkburger{ display:none; color:var(--gold,#C9A84C); font-size:1.5rem; line-height:26px;
           cursor:pointer; padding:8px 10px; border:1.5px solid rgba(201,168,76,.55);
           border-radius:9px; min-width:44px; min-height:44px; text-align:center; }

@media (max-width:1100px){
  .mknav{ gap:16px; }
  .mknav > a, .mkdrop-btn{ font-size:.9rem; }
  .mknav > a.mklogin{ padding-left:16px; }
  .mkhead-in{ gap:16px; }
}

@media (max-width:940px){
  .mkhead-in{ padding:9px 16px; gap:10px; }
  .mkbrand{ font-size:.98rem; }
  .mknav{ display:none; position:absolute; left:0; right:0; top:100%;
          flex-direction:column; align-items:stretch; gap:0;
          background:#fff; box-shadow:0 18px 40px rgba(4,12,30,.28);
          border-bottom:3px solid var(--gold,#C9A84C); max-height:calc(100vh - 70px); overflow-y:auto; }
  .mknav > a{ color:var(--navy,#002868); font-size:1.05rem; font-weight:700;
              padding:15px 22px; border-top:1px solid #f2f5fa; }
  .mknav > a.on{ background:#f2f5fa; color:var(--navy,#002868); }
  .mknav > a.mklogin{ border-left:0; padding-left:22px; color:var(--navy,#002868); }
  /* The dropdown's pages are simply listed at the top of the ☰ menu. */
  .mkdrop-btn{ display:none; }
  .mkdrop-menu{ display:block; position:static; min-width:0; box-shadow:none; border-radius:0; padding:6px 10px; background:#fbfcfe; }
  .mkdrop-menu::before{ display:none; }
  .mkmenu-cb:checked ~ .mknav{ display:flex; }
  .mkhead-cta{ margin-left:auto; }
  .mkbtn{ padding:9px 13px; font-size:.84rem; }
  .mkburger{ display:block; }
}

/* The ~gold~ marker from editable copy (includes/site_content.php). Lives here
   because every marketing page already loads this file. */
.sc-g{ color:var(--gold,#C9A84C); }