/* ==========================================================================
   AstroNavigations — site theme branding
   Loaded after styles.css, so these rules win over the theme defaults.
   Palette and type match the funnel pages (homepage, upsell, thank-you,
   birth details, readings, checkout).
   ========================================================================== */

:root {
  --astro-navy-deep:  #060F24;
  --astro-navy:       #09132A;
  --astro-ink:        #1B2A4A;
  --astro-heading:    #0E1D3F;
  --astro-gold:       #C9A96E;
  --astro-gold-light: #E1B475;
  --astro-gold-deep:  #A57B44;
  --astro-cream:      #FAF1EB;
  --astro-font: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
}

/* --------------------------------------------------------------------------
   1. Typography — Cormorant Garamond on body, headings, links and buttons.
   Kajabi requests the font from Google because it is set in the Style guide;
   these rules stop anything falling back.
   -------------------------------------------------------------------------- */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
p, a, li, span, label, legend, blockquote, figcaption,
.btn, .link-list__link, .logo__text {
  font-family: var(--astro-font);
}
body { -webkit-font-smoothing: antialiased; }

/* --------------------------------------------------------------------------
   2. HEADER
   Transparent over a dark hero, navy once stuck. Gold pipe separators between
   top-level menu items, as on the landing pages.
   -------------------------------------------------------------------------- */
.header { border-bottom: 1px solid rgba(201, 169, 110, .35); }
.header--sticky { border-bottom-color: rgba(201, 169, 110, .5); }
.header .header__container { max-width: 1340px; }


.header .logo__text {
  color: var(--astro-gold);
  letter-spacing: .26em;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}

.header .link-list__link,
.header a.link-list__link {
  text-transform: uppercase;
  letter-spacing: .16em;
  transition: color .18s ease;
}
.header .link-list__link:hover,
.header a.link-list__link:hover { color: var(--astro-gold); }

/* Gold pipes between desktop menu items */
@media (min-width: 768px) {
  .header .header__content--desktop .link-list__links { display: flex; align-items: center; gap: 20px; }
  .header .header__content--desktop .link-list__link + .link-list__link::before {
    content: "|";
    color: var(--astro-gold);
    opacity: .7;
    margin-right: 20px;
    display: inline-block;
  }
}

/* Mobile menu: centred, comfortable tap targets, no pipes */
@media (max-width: 767px) {
   
  .header .header__content--mobile .link-list__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .header .header__content--mobile .link-list__link {
    display: block;
    padding: 12px 8px;          /* 44px+ tap target */
    letter-spacing: .18em;
  }
  .header .header__content--mobile .link-list__link + .link-list__link::before { content: none; }
}

/* Very narrow screens: stop a long wordmark forcing a horizontal scrollbar */
@media (max-width: 400px) {
  .header .logo__text { font-size: 15px; letter-spacing: .2em; }
  
}

/* --------------------------------------------------------------------------
   3. FOOTER — copied from the landing page theme
   Six blocks in one row: logo, divider, menu, divider, contact, legal bar.
   The menu renders through block.liquid, so it arrives carrying a grid class
   (col-6 = 50% width). Left alone that eats half the row.
   -------------------------------------------------------------------------- */
.footer {
  background-image: url("astro-bg-hero-navy.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

@media (min-width: 992px) {
  .footer .footer__container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: space-between;
    gap: 0 20px;
    max-width: 1340px;
  }
  .footer .footer__container > .footer__block { flex: 1 1 auto; margin: 0; min-width: 0; }
  .footer .footer__container > .footer__block--astro-sep { flex: 0 0 auto; }
  .footer .footer__container > .footer__block--astro-legal { flex: 0 0 100%; width: 100%; }
  .footer .footer__container > [class*="col-"] {
    width: auto !important;
    flex: 1 1 auto;
    padding: 0 !important;
    margin: 0 !important;
  }
}

.footer .link-list__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 34px;
}
.footer .link-list__link {
  text-decoration: none; margin: 0 !important; transition: opacity .18s ease;
}
.footer .link-list__link:hover { opacity: .78; }

.footer .logo__image { width: 84px !important; height: auto; max-width: 100%; }

@media (max-width: 991px) {
  .footer .footer__container { text-align: center; }
  .footer .footer__block { margin: 14px 0; }
}
/* below 768px, give footer links a proper tap target */
@media (max-width: 767px) {
    
    br {
    display: none;
}
  .footer .link-list__links { gap: 4px 24px; }
  .footer .link-list__link { padding: 10px 4px; display: inline-block; }
}

/* --------------------------------------------------------------------------
   4. Shared page rules
   -------------------------------------------------------------------------- */
.btn { letter-spacing: .04em; }

/* nothing overflows its column on any screen */
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, p { overflow-wrap: break-word; }

:target { scroll-margin-top: 90px; }