/* MyDealLoan brand + shared header/footer. Loaded on every page by deploy/sync-chrome.py.
   Brand (2026-10-08, revised): ink navy + marigold (Pantone 123 C), Sora headlines, Hanken Grotesk body, "Locked M" mark.
   Tailwind's brand-navy / brand-gold map to the same colors (tailwind.config.js). */
:root {
  --mdl-ever: #0B1C3E;      /* ink navy: primary */
  --mdl-pine: #071229;      /* deep navy: footer, text on marigold buttons */
  --mdl-yellow: #FFC72C;    /* marigold, Pantone 123 C: CTAs, the keystone */
  --mdl-yellow-ink: #6B5300;/* yellow-family text on light backgrounds */
  --mdl-yellow-wash: #FFF8DE;
  --mdl-mint: #9DB4D6;
  --mdl-mint-wash: #E8EEF7;
  --mdl-mist: #F2F4F7;      /* light section ground */
  --mdl-line: #D3DAE6;
  --mdl-ink: #0F1A2E;
  --mdl-muted: #3E4A5E;
  --mdl-on-dark: #CBD3E1;   /* body text on navy */
  --mdl-head: "Sora", system-ui, sans-serif;
  --mdl-body: "Hanken Grotesk", system-ui, sans-serif;
}

body { font-family: var(--mdl-body); color: var(--mdl-ink); }
h1, h2, h3, .font-heading { font-family: var(--mdl-head); letter-spacing: -0.02em; }

.mdl-wrap { max-width: 1240px; margin: 0 auto; padding-inline: 20px; box-sizing: border-box; }
@media (min-width: 768px) { .mdl-wrap { padding-inline: 40px; } }

/* ---- Buttons ---- */
.mdl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--mdl-body);
  font-weight: 700; font-size: 17px; line-height: 1.2; padding: 15px 28px; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; white-space: nowrap; }
.mdl-btn-sm { font-size: 14px; padding: 9px 16px; }
.mdl-btn-yellow { background: var(--mdl-yellow); color: var(--mdl-pine); }
.mdl-btn-yellow:hover { background: #FFD666; color: var(--mdl-pine); }
.mdl-btn-dark { background: var(--mdl-pine); color: #fff; }
.mdl-btn-dark:hover { background: var(--mdl-ever); color: #fff; }
.mdl-btn-mint { background: var(--mdl-mint); color: var(--mdl-pine); }
.mdl-btn-mint:hover { background: #B8CBE6; color: var(--mdl-pine); }
.mdl-btn-ghost { background: transparent; color: #fff; border-color: #50668F; }
.mdl-btn-ghost:hover { border-color: #fff; color: #fff; }
.mdl-btn:focus-visible, .mdl-header a:focus-visible, .mdl-footer a:focus-visible, .mdl-menu-btn:focus-visible {
  outline: 3px solid var(--mdl-yellow); outline-offset: 3px; }

/* ---- Mark ---- */
.mdl-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.mdl-mark { display: block; }
.mdl-mark-m { fill: #fff; }
.mdl-mark-k { fill: var(--mdl-yellow); }
.mdl-wordmark { font-family: var(--mdl-head); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; color: #fff; }

/* ---- Header ---- */
.mdl-header { position: sticky; top: 0; z-index: 50; background: var(--mdl-ever); border-bottom: 1px solid rgba(255,255,255,.08); }
.mdl-header-in { max-width: 1240px; margin: 0 auto; height: 80px; padding-inline: 20px; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; box-sizing: border-box; }
@media (min-width: 768px) { .mdl-header-in { padding-inline: 40px; } }
.mdl-nav-link { color: var(--mdl-on-dark); text-decoration: none; font-weight: 500; font-size: 16px; }
.mdl-nav-link:hover { color: #fff; }
.mdl-nav-phone { color: #fff; font-weight: 700; }
.mdl-menu-btn { background: none; border: 0; color: #fff; padding: 6px; cursor: pointer; }
@media (min-width: 768px) and (max-width: 1100px) {
  .mdl-header .mdl-nav-phone { display: none; }
  .mdl-header #mobile-nav.space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-left: 18px; }
  .mdl-nav-link { font-size: 15px; }
  .mdl-header .mdl-nav-cta { padding: 11px 18px; font-size: 15px; }
}
@media (max-width: 380px) { .mdl-wordmark { font-size: 20px; } .mdl-header .mdl-btn-sm { padding: 8px 12px; } }
/* Mobile menu open: the page script turns #mobile-nav into a white dropdown under the header. */
#mobile-nav.flex-col { align-items: stretch; border-bottom: 3px solid var(--mdl-yellow); z-index: 60; }
#mobile-nav.flex-col .mdl-nav-link { color: var(--mdl-ever); font-size: 18px; font-weight: 600; padding: 6px 4px; }
#mobile-nav.flex-col .mdl-nav-cta { align-self: flex-start; }

/* ---- Footer ---- */
.mdl-footer { background: var(--mdl-pine); color: #9FAEC7; font-size: 15px; line-height: 1.6; padding: 56px 0 36px; }
.mdl-footer a { color: #9FAEC7; text-decoration: none; }
.mdl-footer a:hover { color: #fff; }
.mdl-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px; margin-bottom: 40px; }
.mdl-footer-grid > div { display: flex; flex-direction: column; gap: 6px; }
.mdl-footer-brand p { margin: 12px 0 0; }
.mdl-footer-brand .mdl-wordmark { font-size: 21px; }
.mdl-footer-h { font-family: var(--mdl-body); font-size: 15px; font-weight: 700; letter-spacing: 0; color: #fff; margin: 0 0 6px; }
.mdl-footer-legal { border-top: 1px solid #1B2E52; padding-top: 24px; font-size: 13px; }
.mdl-footer-legal p { margin: 0 0 8px; max-width: 72em; }
.mdl-footer-legal a { margin-left: 14px; text-decoration: underline; }

/* ---- Older pages: brand fixes for Tailwind-era markup ---- */
/* Yellow text is only legible on dark grounds: default to the dark yellow ink, bright yellow on dark sections. */
.text-brand-gold { color: var(--mdl-yellow-ink); }
.bg-brand-navy .text-brand-gold, .bg-gray-900 .text-brand-gold, .bg-gray-800 .text-brand-gold, .bg-black .text-brand-gold,
.hero-bg .text-brand-gold { color: var(--mdl-yellow); }
.bg-brand-navy .bg-white .text-brand-gold, .bg-gray-900 .bg-white .text-brand-gold { color: var(--mdl-yellow-ink); }
.hover\:text-brand-gold:hover { color: var(--mdl-yellow-ink); }
.bg-brand-gold, .bg-brand-gold.text-white, .bg-brand-gold .text-white { color: var(--mdl-pine); }
.bg-white .text-brand-gold, .bg-gray-50 .bg-white .text-brand-gold { color: var(--mdl-yellow-ink); }

/* ---- QA fixes 2026-10-08 ---- */
[id] { scroll-margin-top: 96px; }
.mdl-brand { min-width: 0; }
/* Below 1024px the full nav doesn't fit: use the menu button (the page script opens #mobile-nav as a dropdown). */
@media (max-width: 1023px) {
  .mdl-header #mobile-nav:not(.flex-col) { display: none !important; }
  .mdl-header .md\:hidden { display: flex !important; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .mdl-header .mdl-nav-phone { display: none; }
}
#mobile-nav.flex-col { padding: 16px 20px 20px !important; }
#mobile-nav.flex-col .mdl-nav-phone { display: block; color: var(--mdl-ever); }
@media (max-width: 420px) {
  .mdl-header-in { padding-inline: 16px; gap: 10px; }
  .mdl-brand { gap: 8px; }
  .mdl-header .mdl-mark { width: 32px; height: 27px; }
  .mdl-header .mdl-wordmark { font-size: 19px; }
  .mdl-header .mdl-btn-sm { padding: 8px 12px; font-size: 13px; }
  .mdl-menu-btn { padding: 4px; }
}