/* Public header and footer, every public page. Linked from RecoveredPage.astro.

   The header reads from the left: the logo, Support & Services, Our Approach,
   About Us, Ways We Bloom, then Begin Your Journey, as one group. About Us is a
   plain link; Community, News & Greetings and Bloom With Us are reached from the
   About Us page and the footer. The far right is reserved for Parent Login, the
   way back in for existing families. Until the Parent Portal is live
   (src/data/site-features.js) the account area is empty and takes no space.

   Labels keep their full size. At 980px and below the navigation collapses into
   the menu button, which sits beside the logo; this matches the shared
   navigation script, which closes the menu above 980px. */

body[data-public-sizing] .brand-link {
  flex-shrink: 0;
}

/* Begin Your Journey stays white on navy on its own page. */
body[data-public-sizing] .site-menu .nav-cta[aria-current="page"] {
  color: #fff;
}

/* About Us is marked as the section on Community, News & Greetings and
   Bloom With Us. */
body[data-public-sizing] .site-menu a[data-current="true"] {
  color: var(--coral-dark);
}

body[data-public-sizing] .site-menu a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 0.4rem;
}

/* Desktop: one group from the left edge; nothing pushes it to the right. */
@media (min-width: 981px) {
  body[data-public-sizing] .site-menu {
    flex: 0 1 auto;
    justify-content: flex-start;
  }
}

/* Footer: For families, About, Contact. */
@media (min-width: 701px) {
  body[data-public-sizing] .footer-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.25fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
}

@media (min-width: 701px) and (max-width: 1199px) {
  body[data-public-sizing] .footer-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.3fr);
  }

  body[data-public-sizing] .footer-brand {
    grid-column: 1 / -1;
  }
}

body[data-public-sizing] .footer a {
  overflow-wrap: anywhere;
}

body[data-public-sizing] .footer a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  color: #fff;
}

/* Official social accounts, shown only once their addresses are confirmed
   (src/data/social-links.js). */
body[data-public-sizing] .footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 1.5rem;
}

body[data-public-sizing] .footer .footer-social a {
  display: inline-block;
  margin-top: 0;
  color: #fff;
  font-size: 0.88rem;
  text-decoration: underline;
  text-decoration-color: rgba(237, 183, 53, 0.6);
  text-underline-offset: 0.3em;
}

/* Account area: the far right of the header, outside the visitor navigation
   (src/lib/account-links.js). Empty, and taking no space, until the Parent
   Portal is live. */
body[data-public-sizing] .site-account {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  margin-left: auto;
}

body[data-public-sizing] .site-account:empty {
  display: none;
}

/* Parent Login, once live: a soft sage pill with a navy label, clearly not
   the navy Begin Your Journey button. */
body[data-public-sizing] .site-account__login {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(25, 59, 70, 0.22);
  border-radius: 999px;
  background: var(--sage-pale);
  color: var(--navy);
  font-size: 0.89rem;
  font-weight: 700;
  white-space: nowrap;
}

body[data-public-sizing] .site-account__login svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-public-sizing] .site-account__login:hover {
  border-color: var(--navy);
  background: #d9e7e2;
}

body[data-public-sizing] .site-account__login:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* Tablets and phones: the logo and the menu button stay together on the left;
   Parent Login, once live, alone takes the right. */
@media (max-width: 980px) {
  body[data-public-sizing] .menu-button {
    flex-shrink: 0;
  }
}

@media (max-width: 420px) {
  body[data-public-sizing] .site-header--account .nav-wrap {
    gap: 0.75rem;
  }

  body[data-public-sizing] .site-header--account .brand-link img {
    width: min(205px, calc(100vw - 205px));
  }

  body[data-public-sizing] .site-account__login {
    padding: 0.5rem 0.8rem;
    font-size: 0.82rem;
  }

  body[data-public-sizing] .site-account__login svg {
    display: none;
  }
}

/* Parent Login on narrow desktops (981-1120px): the group tightens its gaps
   and the logo narrows slightly so every label keeps its full size and the
   navigation does not need to collapse above the script's 980px point. */
@media (min-width: 981px) and (max-width: 1120px) {
  body[data-public-sizing] .site-header--account .nav-wrap {
    gap: 1rem;
  }

  body[data-public-sizing] .site-header--account .site-menu__primary {
    gap: 0.75rem;
  }

  body[data-public-sizing] .site-header--account .brand-link img {
    width: 168px;
  }

  body[data-public-sizing] .site-header--account .site-account__login {
    padding-inline: 0.85rem;
  }

  body[data-public-sizing] .site-header--account .site-account__login svg {
    display: none;
  }
}