/* ==========================================================================
   Shared site header, mobile menu and sticky Call / Book bar.
   Used on every page. Classes start with "site-" or "mobile-cta" so the
   styles written inside each page can't clash with them.
   Menu behaviour lives in js/site.js.
   ========================================================================== */

/* ---------- Header ---------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  max-width: none; margin: 0;               /* undo "body > *" rules on the legal pages */
  height: 68px; padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: rgba(255, 254, 251, 0.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid #e2d9cc;
  font-family: 'Plus Jakarta Sans', sans-serif;
  line-height: 1.2;
}

/* Pages whose content starts at the very top use this to sit below the fixed header */
.site-nav-spacer { height: 68px; max-width: none; margin: 0; }

.site-nav__logo {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  text-decoration: none; color: #1c1a17;
}
.site-nav__logo img { display: block; width: 48px; height: 48px; object-fit: contain; }
.site-nav__name {
  font-family: 'Lora', serif; font-size: 18px; font-weight: 600;
  color: #1c1a17; letter-spacing: -0.01em; line-height: 1.2;
}
.site-nav__name span {
  display: block; margin-top: 1px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10px; font-weight: 500;
  color: #6f6a64; letter-spacing: 0.06em; text-transform: uppercase;
}

.site-nav__links { display: flex; align-items: center; gap: 28px; }
.site-nav__links a {
  font-size: 14px; font-weight: 400; color: #5a5650;
  text-decoration: none; white-space: nowrap; transition: color 0.2s;
}
.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] { color: #1c1a17; }

.site-nav__links a.site-nav__phone {
  display: inline-flex; align-items: center; gap: 6px;
  color: #1c1a17; font-weight: 500;
}
.site-nav__phone svg { width: 15px; height: 15px; flex-shrink: 0; }

.site-nav__links a.site-nav__cta {
  padding: 9px 22px; border-radius: 100px;
  background: #455a8c; color: #fff; font-weight: 500;
  transition: background 0.2s, transform 0.15s;
}
.site-nav__links a.site-nav__cta:hover { background: #374a75; color: #fff; transform: translateY(-1px); }

.site-nav a:focus-visible,
.site-nav__toggle:focus-visible,
.mobile-cta a:focus-visible { outline: 2px solid #455a8c; outline-offset: 3px; }

/* ---------- Menu button (phones and tablets only) ---------- */
.site-nav__toggle {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; margin-right: -10px; padding: 0;
  background: none; border: 0; border-radius: 8px; cursor: pointer; color: #1c1a17;
}
.site-nav__toggle span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform 0.2s, opacity 0.2s;
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .site-nav { padding: 0 20px; }
  .site-nav__toggle { display: flex; }
  .site-nav__links {
    display: none;
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100vh - 68px); overflow-y: auto;
    padding: 8px 20px 20px;
    background: #fffefb;
    border-bottom: 1px solid #e2d9cc;
    box-shadow: 0 12px 24px rgba(28, 26, 23, 0.08);
  }
  .site-nav__links.is-open { display: flex; }
  .site-nav__links a { padding: 14px 0; font-size: 16px; border-bottom: 1px solid #efe8dd; }
  .site-nav__links a.site-nav__cta { margin-top: 14px; padding: 14px 22px; text-align: center; border-bottom: 0; }
}

/* ---------- Sticky Call / Book bar (phones and small tablets) ---------- */
.mobile-cta { display: none; }

@media (max-width: 920px) {
  .mobile-cta {
    display: flex; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 99;
    max-width: none; margin: 0;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: #fffefb;
    border-top: 1px solid #e2d9cc;
    box-shadow: 0 -6px 20px rgba(28, 26, 23, 0.08);
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
  .mobile-cta a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 10px; border-radius: 100px;
    font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  }
  .mobile-cta svg { width: 17px; height: 17px; flex-shrink: 0; }
  .mobile-cta a.mobile-cta__call { background: #fff; color: #455a8c; border: 1.5px solid #455a8c; }
  .mobile-cta a.mobile-cta__book { background: #455a8c; color: #fff; border: 1.5px solid #455a8c; }

  /* keep the last part of each page clear of the bar */
  body { padding-bottom: 72px; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* Anchor links (How we help, Loan types…) land below the fixed header, not under it */
section[id], [id="booking"] { scroll-margin-top: 76px; }