﻿/* Canonical PersonaLayouts brand and footer identity. */
@media (min-width: 901px) {
  nav .hero-brand,
  nav a.hero-brand {
    min-width: 260px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-decoration: none !important;
  }

  nav .hero-brand > div:first-child,
  nav a.hero-brand > div:first-child {
    margin: 0 0 2px !important;
    color: #f4f1ea !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 1.6rem !important;
    font-weight: 400 !important;
    letter-spacing: .5px !important;
    line-height: 1 !important;
    text-transform: none !important;
  }

  nav .hero-brand > div:first-child span,
  nav a.hero-brand > div:first-child span {
    color: #c5a059 !important;
  }

  nav .brand-tagline,
  nav .hero-brand > div:nth-child(2),
  nav a.hero-brand > div:nth-child(2) {
    margin: 0 !important;
    color: #888 !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 0.95rem !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: .5px !important;
    line-height: 1.05 !important;
    text-transform: none !important;
  }

  nav .nav-links a:not(.nav-cta) {
    color: #aaa59b !important;
    font-family: "Inter", "DM Sans", sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.055em !important;
    text-transform: none !important;
  }

  nav .nav-links a:not(.nav-cta):hover,
  nav .nav-links a:not(.nav-cta):focus-visible,
  nav .nav-links a[aria-current="page"]:not(.nav-cta) {
    color: #d2aa5b !important;
  }
}

.site-footer {
  width: 100% !important;
  margin-top: auto !important;
  padding: 60px 20px 30px !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  background: #080706 !important;
  color: #888 !important;
  font-family: "Inter", sans-serif !important;
  font-size: .85rem !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

.site-footer .footer-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 40px !important;
  max-width: 1100px !important;
  margin: 0 auto 60px !important;
}

.site-footer .footer-brand { flex: 1.5 !important; min-width: 280px !important; }
.site-footer .footer-explore { flex: 1 !important; min-width: 200px !important; }
.site-footer .footer-about { flex: 1.5 !important; min-width: 280px !important; }

.site-footer .fn {
  margin-bottom: 5px !important;
  color: #fff !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.site-footer .fn span { color: #c5a059 !important; }

.site-footer .fs {
  margin-bottom: 15px !important;
  color: #888 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: .95rem !important;
  font-style: italic !important;
  letter-spacing: 0 !important;
}

.site-footer .footer-heading {
  margin-bottom: 20px !important;
  color: #fff !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

.site-footer .footer-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.site-footer a {
  color: #888 !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #c5a059 !important;
}

.site-footer .footer-about a {
  color: #ddd !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.site-footer .footer-about a:hover,
.site-footer .footer-about a:focus-visible {
  color: #c5a059 !important;
}

.site-footer .footer-bottom-bar {
  display: flex !important;
  justify-content: space-between !important;
  gap: 20px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding-top: 25px !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  color: #666 !important;
  font-size: .75rem !important;
}

@media (max-width: 768px) {
  .site-footer { padding: 48px 24px 28px !important; }
  .site-footer .footer-grid {
    flex-direction: column !important;
    gap: 44px !important;
    margin-bottom: 44px !important;
  }
  .site-footer .footer-brand,
  .site-footer .footer-explore,
  .site-footer .footer-about {
    min-width: 0 !important;
    text-align: center !important;
  }
  .site-footer .footer-links { align-items: center !important; }
  .site-footer .footer-bottom-bar {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}


@media (min-width: 901px) {
  header .hero-brand,
  header a.hero-brand { min-width:260px !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; text-decoration:none !important; }
  header .hero-brand > div:first-child,
  header a.hero-brand > div:first-child { margin:0 0 2px !important; color:#f4f1ea !important; font-family:"Cormorant Garamond",Georgia,serif !important; font-size:1.6rem !important; font-weight:400 !important; letter-spacing:.5px !important; line-height:1 !important; text-transform:none !important; }
  header .hero-brand > div:first-child span,
  header a.hero-brand > div:first-child span { color:#c5a059 !important; }
  header .brand-tagline,
  header .hero-brand > div:nth-child(2),
  header a.hero-brand > div:nth-child(2) { margin:0 !important; color:#888 !important; font-family:"Cormorant Garamond",Georgia,serif !important; font-size:.95rem !important; font-style:italic !important; font-weight:400 !important; letter-spacing:.5px !important; line-height:1.05 !important; text-transform:none !important; }
}

/* Header-independent lockup used by focused flows such as the quiz. */
.pl-brand-lockup {
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  width:260px;
  max-width:100%;
  color:#f4f1ea !important;
  text-decoration:none !important;
}
.pl-brand-lockup .pl-brand-name {
  margin:0 0 2px !important;
  color:#f4f1ea !important;
  font-family:"Cormorant Garamond",Georgia,serif !important;
  font-size:1.6rem !important;
  font-weight:400 !important;
  letter-spacing:.5px !important;
  line-height:1 !important;
  text-transform:none !important;
}
.pl-brand-lockup .pl-brand-name span { color:#c5a059 !important; }
.pl-brand-lockup .pl-brand-tagline {
  margin:0 !important;
  color:#888 !important;
  font-family:"Cormorant Garamond",Georgia,serif !important;
  font-size:.95rem !important;
  font-style:italic !important;
  font-weight:400 !important;
  letter-spacing:.5px !important;
  line-height:1.05 !important;
  text-transform:none !important;
  white-space:nowrap;
}
@media(max-width:360px){
  .pl-brand-lockup .pl-brand-name{font-size:1.4rem !important}
  .pl-brand-lockup .pl-brand-tagline{font-size:.78rem !important}
}

/* Canonical mobile header: mirrors the homepage on every public route. */
@media (max-width: 900px) {
  nav {
    padding: 16px 24px !important;
  }

  nav .hero-brand,
  nav a.hero-brand,
  header .hero-brand,
  header a.hero-brand {
    display: flex !important;
    flex: 0 0 260px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 260px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 96px) !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    text-decoration: none !important;
  }

  nav .hero-brand > div:first-child,
  nav a.hero-brand > div:first-child,
  header .hero-brand > div:first-child,
  header a.hero-brand > div:first-child {
    display: block !important;
    margin: 0 0 3px !important;
    color: #f4f1ea !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 1.6rem !important;
    font-weight: 400 !important;
    letter-spacing: .5px !important;
    line-height: 1 !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  nav .hero-brand > div:first-child span,
  nav a.hero-brand > div:first-child span,
  header .hero-brand > div:first-child span,
  header a.hero-brand > div:first-child span {
    display: inline !important;
    color: #c5a059 !important;
  }

  nav .brand-tagline,
  nav .hero-brand > div:nth-child(2),
  nav a.hero-brand > div:nth-child(2),
  header .brand-tagline,
  header .hero-brand > div:nth-child(2),
  header a.hero-brand > div:nth-child(2) {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    color: #888 !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: .65rem !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: .5px !important;
    line-height: 1.05 !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  .pl-brand-lockup {
    width: 260px !important;
    max-width: calc(100vw - 48px) !important;
  }

  .pl-brand-lockup .pl-brand-name {
    margin-bottom: 3px !important;
    font-size: 1.6rem !important;
    white-space: nowrap !important;
  }

  .pl-brand-lockup .pl-brand-tagline {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    font-size: .65rem !important;
    white-space: nowrap !important;
  }

  .quiz-brand-row {
    margin-top: -4px !important;
    padding-inline: 8px !important;
  }

  /* Atlas places its nav inside the page-width wrapper; cancel the double inset. */
  .site-header {
    padding-block: 16px !important;
  }

  .site-header > nav.nav.wrap {
    align-items: flex-start !important;
    padding: 0 12px !important;
  }

  header.site-guide-header {
    align-items: flex-start !important;
    padding: 16px 24px !important;
  }

  nav.site-nav {
    height: 72px !important;
    align-items: flex-start !important;
  }

  nav.site-nav .nav-links {
    align-self: center !important;
  }
}
