/* ==========================================================================
   Lakeshore Loans USA — Header, footer, hero shell, page structure
   Part of the modular "Shoreline" design system. Load order: base → layout → components → sections.
   ========================================================================== */

/* ---------- Top utility / disclosure bar ---------- */
.disclosure-bar{
  background:var(--lake-navy);
  color:rgba(237,230,216,0.78);
  font-size:.78rem;
  letter-spacing:.01em;
  padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.disclosure-bar .container{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.disclosure-bar a{ color:var(--shore-sand); text-decoration:underline; text-underline-offset:2px; }


/* ---------- Header ---------- */
header.site-header{
  background:var(--lake-navy);
  box-shadow:0 1px 0 rgba(255,255,255,0.06);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
  gap:24px;
}
.brand{ display:flex; flex-direction:column; gap:2px; text-decoration:none; }
.brand-mark{
  font-family:var(--display);
  font-size:1.5rem;
  font-weight:600;
  color:var(--white);
  letter-spacing:.01em;
}
.brand-mark span{ color:var(--amber-tide); }
.brand-sub{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(237,230,216,0.55);
  border-top:1px solid rgba(217,138,61,0.5);
  padding-top:3px;
}
nav.main-nav{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
nav.main-nav a{
  font-size:.86rem; font-weight:600; text-decoration:none;
  color:rgba(237,230,216,0.82);
  padding:6px 0; position:relative;
}
nav.main-nav a:hover, nav.main-nav a.active{ color:var(--white); }
nav.main-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--amber-tide);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:700; font-size:.88rem;
  padding:12px 22px; border-radius:2px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.btn-primary{ background:var(--amber-tide); color:var(--lake-navy); }
.btn-primary:hover{ background:var(--amber-tide-dark); }
.btn-ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,0.35); }
.btn-ghost:hover{ border-color:var(--white); }
.btn-outline-navy{ background:transparent; color:var(--lake-navy); border-color:var(--lake-navy); }
.btn-outline-navy:hover{ background:var(--lake-navy); color:var(--white); }
.btn-block{ width:100%; }
.nav-toggle{
  display:none; background:none; border:1px solid rgba(255,255,255,0.3); border-radius:2px;
  width:44px; height:44px; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.nav-toggle span{ width:20px; height:2px; background:var(--shore-sand); display:block; }


/* ---------- Hero / shoreline divider motif ---------- */
.shoreline{
  height:14px;
  background:
    linear-gradient(180deg, var(--lake-teal-light) 0%, var(--lake-teal) 100%);
  position:relative;
  overflow:hidden;
}
.shoreline::after{
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(110deg, rgba(255,255,255,0.16) 0 2px, transparent 2px 38px);
}

.page-hero{
  background:
    radial-gradient(ellipse at 18% -10%, rgba(217,168,108,0.18), transparent 55%),
    linear-gradient(180deg, var(--shore-sand-2) 0%, #F1ECDF 100%);
  color:var(--ink);
  padding:56px 0 44px;
  border-bottom:1px solid var(--line);
}
.page-hero .eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber-tide-dark); margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.page-hero .eyebrow::before{ content:""; width:22px; height:1px; background:var(--amber-tide-dark); display:inline-block; }
.page-hero h1{ color:var(--ink); max-width:18ch; }
.page-hero h1 .hero-brand{
  color:var(--lake-navy); display:inline-block; position:relative;
}
.page-hero h1 .hero-brand::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px;
  background:var(--lake-navy); opacity:.35; border-radius:2px;
}
.page-hero .lede{ color:var(--ink-soft); }
.hero-cta-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:28px; }
.hero-cta-row .btn-link{
  color:var(--lake-navy); font-size:.88rem; font-weight:700; text-decoration:none;
  border-bottom:1px solid rgba(58,86,112,0.4); padding-bottom:2px;
}
.hero-cta-row .btn-link:hover{ border-color:var(--lake-navy); }
.hero-meta{ display:flex; gap:22px; flex-wrap:wrap; margin-top:22px; font-size:.82rem; color:var(--ink-soft); }

.page-hero .hero-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:center; }
@media (max-width:900px){ .page-hero .hero-grid{ grid-template-columns:1fr; } }
.hero-media{ position:relative; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; display:block;
  border-radius:4px; border:1px solid var(--line); box-shadow:0 20px 50px rgba(43,57,70,0.12);
}
.hero-media::before{
  content:""; position:absolute; inset:-10px -10px auto auto; width:64px; height:64px;
  border-top:2px solid var(--amber-tide-dark); border-right:2px solid var(--amber-tide-dark); opacity:.55;
}
@media (max-width:900px){ .hero-media{ max-width:420px; margin:0 auto; } }
.hero-meta strong{ color:var(--ink); }


/* ---------- Footer ---------- */
footer.site-footer{ background:var(--lake-navy); color:rgba(237,230,216,0.72); padding:54px 0 24px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; margin-bottom:36px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h5,
.footer-grid .footer-h{ color:var(--shore-sand); font-family:var(--mono); font-size:.72rem; line-height:1.15; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin:0 0 14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a{ color:rgba(237,230,216,0.72); text-decoration:none; font-size:.88rem; }
.footer-grid a:hover{ color:var(--white); text-decoration:underline; }
.footer-disclosure{
  border-top:1px solid rgba(255,255,255,0.12); padding-top:24px; font-size:.78rem; color:rgba(237,230,216,0.5);
}
.footer-disclosure p{ color:rgba(237,230,216,0.5); max-width:none; }
.footer-bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:18px; font-size:.78rem; color:rgba(237,230,216,0.4); }


/* Footer legal links row */
.footer-legal-links a{
  color:rgba(237,230,216,0.65); text-decoration:none; transition:color .15s ease;
}
.footer-legal-links a:hover{ color:var(--white); text-decoration:underline; }