/* Shared by: convictions.html, give.html, our-dna.html, our-story.html, the-porch.html
   Extracted verbatim from those pages inline <style>. Edit here only. */

/* ---- Footer railing: same lit nav as the homepage, on every page ---- */
  footer .footer-nav{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 0;
    max-width: 760px;
    margin: 56px auto 22px;
    padding-top: 26px;
    border-top: none;
    font-size: 12px;
    letter-spacing: 0;
  }
  footer .footer-nav::before{
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,162,59,0.35) 22%, rgba(244,201,122,0.55) 50%, rgba(232,162,59,0.35) 78%, transparent);
  }
  footer .footer-nav a{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #C4D2D9;
    text-decoration: none;
    background: transparent;
    border: none;
    border-right: none;
    border-radius: 0;
    padding: 11px 16px;
    margin: 0;
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
  }
  footer .footer-nav a::after{
    content: '';
    position: absolute;
    left: 50%; top: 3px;
    width: 0; height: 1px;
    background: var(--porch-amber-soft);
    box-shadow: 0 0 12px rgba(244,201,122,0.8);
    transform: translateX(-50%);
    transition: width 0.35s ease;
  }
  footer .footer-nav a:hover,
  footer .footer-nav a:focus-visible{
    color: var(--cream, #F4EFE3);
    text-shadow: 0 0 20px rgba(244,201,122,0.45);
    transform: translateY(-2px);
    background: transparent;
  }
  footer .footer-nav a:hover::after,
  footer .footer-nav a:focus-visible::after{ width: 78%; }
  footer .footer-nav a.current{ color: var(--porch-amber); }
  /* The page you're on is bracketed by two lit hairlines */
  footer .footer-nav a.current::after{ width: 78%; }
  footer .footer-nav a.current::before{
    content: '';
    position: absolute;
    left: 50%; bottom: 3px;
    width: 78%; height: 1px;
    background: var(--porch-amber-soft);
    box-shadow: 0 0 12px rgba(244,201,122,0.8);
    transform: translateX(-50%);
  }
  footer .footer-nav a.lit-cta{ color: var(--porch-amber-soft); font-weight: 700; }
  footer .footer-nav a.lit-cta:hover{ color: var(--cream, #F4EFE3); }
  footer .footer-nav .fn-actions{
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
  }
  @media (max-width: 620px){
    footer .footer-nav{ margin-top: 44px; max-width: 420px; }
    footer .footer-nav a{ font-size: 12px; padding: 11px 12px; letter-spacing: 0.12em; }
  }
  @media (max-width: 380px){
    footer .footer-nav{ max-width: 280px; }
    footer .footer-nav a{ flex: 0 1 100%; padding: 11px 8px; }
    footer .footer-nav .fn-actions a{ flex: 0 0 auto; }
  }