/* ============================================================
   FINSEICH — NAV.CSS
   Header · Mega menu · Mobile drawer · Footer
   ============================================================ */

/* ─── BACKDROP ─────────────────────────────────────────── */
.backdrop { position:fixed; inset:0; z-index:40; display:none; }

/* ─── NAVBAR ───────────────────────────────────────────── */
.nav { position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(255,255,255,.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(14,14,15,.1); transition:box-shadow .3s ease; }
.nav.scrolled { box-shadow:0 2px 24px rgba(0,0,0,.08); }
.nav-inner    { display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); }

/* Logo */
.nav-logo      { font-family:var(--font-serif); font-weight:600; font-size:1.5rem; letter-spacing:-.02em; color:var(--ink); flex-shrink:0; }
.nav-logo span { color:var(--accent); }
.nav-logo-footer { font-family:var(--font-serif); font-weight:600; font-size:1.5rem; letter-spacing:-.02em; color:rgba(255,255,255,.95); flex-shrink:0; }



/* Desktop links */
.nav-links { display:none; align-items:center; gap:.25rem; list-style:none; }
@media(min-width:1024px) { .nav-links { display:flex; } }

.nav-link { font-size:.9375rem; font-weight:500; color:var(--soft); padding:.5rem .75rem; border-radius:var(--r-sm); transition:color .15s ease,background .15s ease; }
.nav-link:hover, .nav-link.active { color:var(--accent); background:var(--alight); }

.nav-trigger { display:flex; align-items:center; gap:.375rem; font-size:.9375rem; font-weight:500; color:var(--soft); padding:.5rem .75rem; border-radius:var(--r-sm); transition:color .15s ease,background .15s ease; }
.nav-trigger:hover, .nav-item.open .nav-trigger { color:var(--accent); background:var(--alight); }
.nav-chevron { width:1rem; height:1rem; transition:transform .2s ease; }
.nav-item.open .nav-chevron { transform:rotate(180deg); }

/* ─── MEGA MENU ────────────────────────────────────────── */

/* Each nav-item must be position:relative so dropdown anchors to it */
.nav-item { position:relative; }

.mega-drop {
  position:absolute; top:calc(100% + 8px);
  background:var(--white); border:1px solid rgba(14,14,15,.1); border-radius:var(--r-xl);
  box-shadow:0 20px 60px rgba(14,14,15,.15); padding:1.25rem;
  z-index:100; opacity:0; pointer-events:none; display:none;
}
.mega-drop.open { display:block; opacity:1; pointer-events:all; animation:megaIn .2s ease both; }

/* Arrow tip — positioned per dropdown below */
.mega-tip::before {
  content:''; position:absolute; top:-7px;
  width:13px; height:13px; background:var(--white);
  border-top:1px solid rgba(14,14,15,.1); border-left:1px solid rgba(14,14,15,.1);
  border-radius:2px; transform:rotate(45deg);
}

/* Widths per dropdown */
.mega-drop--loans     { width:580px; }
.mega-drop--insurance { width:320px; }
.mega-drop--dsa       { width:500px; }

/* LOANS — left-align to trigger, arrow at left */
.mega-drop--loans { left:0; }
.mega-drop--loans::before { left:1.25rem; }

/* INSURANCE — center under trigger, arrow centered */
.mega-drop--insurance { left:50%; transform:translateX(-50%); }
.mega-drop--insurance::before { left:50%; transform:translateX(-50%) rotate(45deg); }

/* DSA — right-align to trigger, arrow at right */
.mega-drop--dsa { left:auto; right:0; }
.mega-drop--dsa::before { left:auto; right:1.25rem; }

.mega-label { font-size:.6875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding-bottom:.75rem; border-bottom:1px solid rgba(14,14,15,.08); margin-bottom:.75rem; }

.mega-grid   { display:grid; gap:.25rem; }
.mega-grid-1 { grid-template-columns:1fr; }
.mega-grid-2 { grid-template-columns:1fr 1fr; }

.mega-item { display:flex; align-items:flex-start; gap:.75rem; padding:.625rem; border-radius:var(--r-md); transition:background .15s ease; }
.mega-item:hover { background:var(--alight); }
.mega-item:hover .mega-item-title { color:var(--accent); }

.mega-icon { width:2.25rem; height:2.25rem; border-radius:.625rem; background:var(--cream); display:flex; align-items:center; justify-content:center; font-size:.875rem; flex-shrink:0; transition:background .15s ease; }
.mega-item:hover .mega-icon { background:var(--accent); }

.mega-item-title { font-size:.875rem; font-weight:500; color:var(--ink); transition:color .15s ease; }
.mega-item-sub   { font-size:.75rem;  font-weight:300; color:var(--muted); margin-top:.1rem; }

.mega-cta { display:flex; align-items:center; justify-content:space-between; margin-top:.75rem; padding:.875rem; background:var(--ink); border-radius:var(--r-md); transition:background .15s ease; }
.mega-cta:hover { background:var(--accent); }
.mega-cta-sub   { font-size:.75rem; color:rgba(255,255,255,.5); }
.mega-cta-title { font-family:var(--font-serif); font-size:1rem; font-weight:600; color:var(--white); }
.mega-cta-btn   { background:var(--abright); color:var(--ink); font-size:.75rem; font-weight:600; padding:.375rem .875rem; border-radius:var(--r-full); white-space:nowrap; flex-shrink:0; }

/* ─── HAMBURGER ────────────────────────────────────────── */
.hamburger { display:flex; flex-direction:column; justify-content:center; align-items:center; width:2.5rem; height:2.5rem; gap:.375rem; border-radius:var(--r-sm); transition:background .15s ease; }
.hamburger:hover { background:var(--cream); }
@media(min-width:1024px) { .hamburger { display:none; } }
.ham-bar { display:block; width:1.5rem; height:2px; background:var(--ink); border-radius:1px; transition:all .3s ease; }

/* Mega-drop responsive: clamp widths so they don't overflow viewport */
@media(max-width:1100px) {
  .mega-drop--loans     { width:min(580px, calc(100vw - 2rem)); }
  .mega-drop--dsa       { width:min(500px, calc(100vw - 2rem)); }
  .mega-drop--insurance { width:min(320px, calc(100vw - 2rem)); }
}
@media(max-width:680px) {
  .mega-drop--loans .mega-grid-2,
  .mega-drop--dsa  .mega-grid-2  { grid-template-columns:1fr; }
}

/* ─── MOBILE DRAWER ────────────────────────────────────── */
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(85%,22rem); background:var(--white); z-index:60; box-shadow:var(--shadow-xl); overflow-y:auto; transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s ease; }
.drawer-closed { transform:translateX(100%); opacity:0; pointer-events:none; }
.drawer-open   { transform:translateX(0);    opacity:1; pointer-events:all; }

.drawer-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid rgba(14,14,15,.1); }
.drawer-close  { width:2.25rem; height:2.25rem; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:1.25rem; color:var(--soft); transition:background .15s ease; }
.drawer-close:hover { background:var(--cream); }
.drawer-body   { padding:1rem; display:flex; flex-direction:column; gap:.25rem; }

.drawer-link       { display:flex; align-items:center; gap:.75rem; padding:.625rem .75rem; border-radius:.625rem; font-size:.875rem; font-weight:500; color:var(--soft); transition:all .15s ease; }
.drawer-link:hover, .drawer-link.active { background:var(--alight); color:var(--accent); }
.drawer-link-plain { display:block; padding:.75rem; border-radius:var(--r-md); font-size:.9375rem; font-weight:500; color:var(--ink); transition:background .15s ease; }
.drawer-link-plain:hover { background:var(--cream); }

/* Mobile accordion */
.acc-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; padding:.75rem; border-radius:var(--r-md); font-size:.9375rem; font-weight:500; color:var(--ink); transition:background .15s ease; }
.acc-trigger:hover { background:var(--cream); }
.acc-chevron { width:1rem; height:1rem; transition:transform .3s ease; color:var(--muted); flex-shrink:0; }
.acc-body    { max-height:0; overflow:hidden; transition:max-height .35s ease; padding-left:.75rem; }

/* Mobile backdrop */
.mobile-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:50; }

/* ─── FOOTER ───────────────────────────────────────────── */
.footer { background:var(--ink); padding-top:4rem; padding-bottom:2rem; }

.footer-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:2rem; }
@media(min-width:640px)  { .footer-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px) { .footer-grid { grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; } }

.footer-brand { grid-column:1/-1; }
@media(min-width:1024px) { .footer-brand { grid-column:auto; } }

.footer-tagline  { font-size:.8125rem; color:rgb(245, 236, 236); font-weight:300; line-height:1.7; margin-top:.75rem; max-width:20rem; }
.footer-heading  { font-size:.6875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--white); margin-bottom:1.25rem; }
.footer-links    { display:flex; flex-direction:column; gap:.625rem; }
.footer-links a  { font-size:.8125rem; color:rgba(232, 224, 224, 0.938); font-weight:300; transition:color .15s ease; }
.footer-links a:hover  { color:var(--white); }
.footer-links a.active { color:var(--abright); font-weight:500; }

.footer-bottom { display:flex; flex-direction:column; gap:.75rem; align-items:center; text-align:center; }
@media(min-width:640px) { .footer-bottom { flex-direction:row; justify-content:space-between; text-align:left; } }

.footer-copy  { font-size:.8125rem; color:rgba(243, 233, 233, 0.956); }
.footer-phone { font-size:.8125rem; color:var(--white); font-weight:500; transition:color .15s ease; }
.footer-phone:hover { color:var(--abright); }
