/* ink-base.css — base LAYOUT for the shared header/footer (the "ink-" design system).
 * The original WP→Astro export kept these rules in per-page /_assets bundles that were
 * never published, so the nav/footer rendered unstyled. lp-theme.css only OVERRIDES
 * (colors, .scrolled state) and assumes this base exists. Load order (BaseLayout):
 *   ink-base.css  →  lp-theme.css   (lp-theme wins on conflicts)
 * Tokens: navy #00163A, gold #FFB800, fonts Mulish (ui) / Outfit (sans) / Roboto Slab (serif).
 */

/* ===================== HEADER (desktop bar) ===================== */
.ink-header { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid rgba(0,22,58,.08); }
.header-shell { display: flex; align-items: flex-start; gap: 18px; max-width: 1180px; margin: 0 auto; padding: 10px 24px; }
.crest-rail { flex: 0 0 auto; display: block; line-height: 0; }
/* right spacer equal to the logo, so the panel (and its centered nav) is balanced → true-centered menu */
.header-shell::after { content: ""; flex: 0 0 auto; width: 82px; }
.crest-rail img { height: 64px; width: auto; border-radius: 8px; object-fit: contain; display: block; }
.header-panel { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.header-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand-block { min-width: 0; }
.brand-title { font-family: Mulish, sans-serif; font-weight: 800; letter-spacing: .1em; font-size: .8rem; color: #00163A; margin: 0; line-height: 1.2; }
.brand-subtitle { font-family: Outfit, sans-serif; font-size: .74rem; color: #5a6678; margin: 2px 0 0; }

/* primary nav (desktop) */
.primary-nav { width: 100%; }
.primary-nav-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; margin: 0; padding: 0; }
.primary-nav-item { position: relative; }
.primary-nav-link { display: inline-flex; align-items: center; gap: 5px; padding: .5rem .7rem; font-family: Mulish, sans-serif; font-weight: 700; font-size: .86rem; color: #00163A; border-radius: 7px; white-space: nowrap; transition: background .15s, color .15s; }
.primary-nav-link:hover, .primary-nav-item:focus-within > .primary-nav-link { background: rgba(0,22,58,.06); }
.primary-nav-caret { font-size: .58rem; opacity: .55; }
.primary-nav-item:last-child .primary-nav-link { background: #FFB800; }
.primary-nav-item:last-child .primary-nav-link:hover { background: #F1B722; }

/* flyout dropdowns (CSS hover/focus — no JS needed on desktop) */
.primary-nav-flyout { position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff; border: 1px solid rgba(0,22,58,.1); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,22,58,.16); padding: 8px; display: flex; flex-direction: column; gap: 1px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 60; }
.primary-nav-item.has-submenu:hover > .primary-nav-flyout,
.primary-nav-item.has-submenu:focus-within > .primary-nav-flyout { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-nav-flyout-link { padding: .5rem .65rem; border-radius: 6px; font-family: Outfit, sans-serif; font-size: .85rem; color: #27324a; white-space: nowrap; }
.primary-nav-flyout-link:hover { background: rgba(255,184,0,.16); color: #00163A; }

/* header CTAs */
.header-actions { flex: 0 0 auto; }
.hero-action-row { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.header-cta { display: inline-flex; align-items: center; font-family: Mulish, sans-serif; font-weight: 700; font-size: .8rem; padding: .5rem .9rem; border-radius: 7px; border: 1px solid rgba(0,22,58,.2); color: #00163A; white-space: nowrap; transition: background .15s; }
.header-cta:first-child { background: #FFB800; border-color: #FFB800; }
.header-cta:hover { background: rgba(0,22,58,.06); }
.header-cta:first-child:hover { background: #F1B722; }

/* hamburger (hidden on desktop) */
.menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 40px; padding: 0 9px; background: #fff; border: 1px solid rgba(0,22,58,.18); border-radius: 8px; cursor: pointer; }
.menu-toggle span { display: block; height: 2px; background: #00163A; border-radius: 2px; }

/* mobile drawer + backdrop hidden on desktop */
.menu-drawer, .menu-backdrop { display: none; }

/* ===================== MOBILE (<=1024px) ===================== */
@media (max-width: 1024px) {
  .header-shell { align-items: center; padding: 10px 18px; }
  .crest-rail img { height: 50px; }
  .primary-nav, .header-actions { display: none; }
  .header-shell::after { display: none; }
  .header-topline { flex: 1 1 auto; }
  .menu-toggle { display: flex; }

  .menu-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; background: rgba(0,22,58,.55); z-index: 1100; }
  .menu-drawer:not([hidden]) { display: block; position: fixed; top: 0; right: 0; width: min(88vw, 372px); height: 100%; overflow-y: auto; background: #fff; z-index: 1200; box-shadow: -12px 0 44px rgba(0,22,58,.28); }

  .menu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid rgba(0,22,58,.1); position: sticky; top: 0; background: #fff; }
  .menu-title { font-family: 'Roboto Slab', serif; font-weight: 600; color: #00163A; font-size: 1.1rem; margin: 0; }
  .menu-subtitle { font-family: Outfit, sans-serif; font-size: .78rem; color: #5a6678; margin: 3px 0 0; }
  .menu-close { flex: 0 0 auto; font-family: Mulish, sans-serif; font-weight: 700; font-size: .8rem; padding: .45rem .8rem; border: 1px solid rgba(0,22,58,.2); border-radius: 7px; background: #fff; cursor: pointer; color: #00163A; }
  .menu-grid { display: flex; flex-direction: column; padding: 8px 12px 28px; }
  .menu-card { border-bottom: 1px solid rgba(0,22,58,.07); }
  .menu-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .menu-card-top > a { flex: 1 1 auto; padding: .85rem 6px; font-family: Mulish, sans-serif; font-weight: 700; font-size: .95rem; color: #00163A; }
  .submenu-toggle { flex: 0 0 auto; width: 34px; height: 34px; font-size: 1.3rem; line-height: 1; background: #fff; border: 1px solid rgba(0,22,58,.18); border-radius: 7px; color: #00163A; cursor: pointer; }
  .submenu-panel { display: none; padding: 2px 6px 12px; }
  .menu-card.open .submenu-panel { display: block; }
  .menu-card.open .submenu-toggle { background: #FFB800; border-color: #FFB800; }
  .submenu-all { display: block; font-family: Mulish, sans-serif; font-weight: 700; font-size: .8rem; color: #8e6a2a; padding: .35rem 8px .5rem; }
  .submenu-links { display: flex; flex-direction: column; }
  .submenu-links a { padding: .5rem 8px; font-family: Outfit, sans-serif; font-size: .9rem; color: #27324a; border-radius: 6px; }
  .submenu-links a:hover { background: rgba(255,184,0,.14); }
}

/* ===================== FOOTER (matches the LP footer) ===================== */
.ink-footer { background: #050F1F; color: #fff; font-family: Outfit, sans-serif; }
.ink-footer-inner { }
.ink-footer-contact-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; max-width: 1200px; margin: 0 auto; padding: 60px 24px; }
.ink-footer-contact h2 { font-family: 'Roboto Slab', serif; font-weight: 600; color: #fff; font-size: 1rem; margin: 0 0 20px; }
/* opacity:1 — ancestor opacity composites into link color and dropped gold links below AA contrast (4.47). Use rgba on the text instead so links stay full #FFB800. */
.ink-footer-contact p { font-size: 14px; color: rgba(255,255,255,.82); margin: 0 0 10px; display: flex; align-items: flex-start; gap: 10px; }
.ink-footer-contact svg, .ink-footer-pin { width: 16px; height: 16px; color: #FFB800; flex-shrink: 0; margin-top: 2px; }
.ink-footer a { color: #FFB800; transition: color .3s ease; }
.ink-footer a:hover { color: #fff; }
.ink-footer-tagline { opacity: .55; font-size: 13px; font-style: italic; }
.ink-footer-social { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 24px 0 0; padding: 0; list-style: none; }
.ink-footer-social a, .ink-footer-social-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ink-footer-social a { border: 1px solid rgba(255,255,255,.2); color: #fff; transition: all .3s ease; }
.ink-footer-social-icon { color: #fff; }
.ink-footer-social-icon svg { width: 18px; height: 18px; }
.ink-footer-social a:hover { background: #FFB800; border-color: #FFB800; color: #050F1F; transform: translateY(-3px); }
.ink-footer-social a:hover .ink-footer-social-icon { color: #050F1F; }
.ink-footer-map { border-radius: 8px; overflow: hidden; }
.ink-footer-map iframe { width: 100%; height: 220px; border: 0; }
.ink-footer-nav { border-top: 1px solid rgba(255,255,255,.1); }
.ink-footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 24px; list-style: none; font-size: 13px; }
.ink-footer-nav a { opacity: .7; color: #fff; transition: all .3s ease; position: relative; }
.ink-footer-nav a:hover { opacity: 1; color: #FFB800; }
.ink-footer-nav a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background: #FFB800; transform: scaleX(0); transition: transform .3s ease; }
.ink-footer-nav a:hover::after { transform: scaleX(1); }
.ink-footer-brand { text-align: center; padding: 14px 0 0; }
.ink-footer-brand img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; background: #fff; }
/* color:rgba instead of opacity — ancestor opacity composited gold links to #9b740c (4.47, under AA). With opacity removed, gold links keep full #FFB800. */
.ink-footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; max-width: 1200px; margin: 0 auto; padding: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; color: rgba(255,255,255,.65); }
.ink-footer-legal p { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0; }
.ink-footer-sep { opacity: .4; }
@media (max-width: 760px) { .ink-footer-contact-row { grid-template-columns: 1fr; gap: 32px; padding: 44px 18px; } .ink-footer-legal { flex-direction: column; text-align: center; } }