/* All values are in px */
:root {
  --wp--preset--color--eyi-dark-purple: #372142;
  --wp--preset--font-family--avant-garde-gothic: "century-gothic",
    "Century Gothic", "Avant Garde Gothic", sans-serif;
}

*:not(#wpadminbar *) {
  font-family: var(--lib-font, "century-gothic", "Century Gothic", "Avant Garde Gothic", sans-serif) !important;
  font-weight: 400;
}

strong,
b,
a:not(.menu-item a):not(.main-navigation a):not(.current-menu-item a):not(#wpadminbar a),
h1,
h2,
h3,
h4,
h5,
h6,
button,
th {
  font-weight: 600 !important;
}

.text-wrap-balance {
  text-wrap: balance;
}

/* NAV BAR */
#masthead {
  position: relative;
  z-index: 1;
  overflow-y: visible;
  overflow-x: clip;
}

#masthead::after {
  display: none;
}

#masthead::before {
  position: absolute;
  top: -212px;
  left: 50%;
  z-index: -1;
  width: 745px;
  height: 745px;
  border-radius: 50%;
  background: var(--lib-header-bg, linear-gradient(90deg, #b72d57 0%, #611a31 100%));
  content: "";
  transform: translate(-50%, -50%);
}

/* The curve is a 745px circle centred at -212px, so its lower edge lands at
   160.5px. In the Figma every curve brand centres its logo on the same ~68px
   axis whatever its height — Catalight's wordmark is 46.75 tall, the
   Easterseals marks 77-85 — so the logo is centred on that axis rather than
   pinned by a top margin, which only ever suits one logo aspect and pushed the
   taller marks down into the curve edge.

   It is centred out of flow, so the header keeps its original ~94px layout
   height and the description below stays where the design puts it. A taller
   logo grows over the curve, not into the content. */
#masthead #masthead-inner {
  position: relative;
  min-height: 94px;
}

.lib-header--curve .site-branding {
  position: absolute;
  top: 68px;
  left: 50%;
  width: 100%;
  margin: 0 !important;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* HEADER TREATMENTS
   Three variants, chosen per brand in inc/brands.php and resolved by
   link_in_bio_header_style(). The `curve` treatment is the #masthead::before
   ellipse above; the other two replace it with a photographic band.
   Dimensions follow the Figma frames (402px wide artboards). */

/* Photo — full-bleed image with the logo overlaid. Catalight Academy.
   NOTE: the #masthead-inner overrides below are written as
   `#masthead.lib-header--<variant> #masthead-inner` on purpose. The base rule
   is `#masthead #masthead-inner` — two IDs — so a plain
   `.lib-header--photo #masthead-inner` loses to it and the header falls out of
   the image into normal flow. Do not lower this specificity. */
.lib-header--photo::before,
.lib-header--badge::before {
  display: none;
}

.lib-header__media {
  position: relative;
  z-index: -1;
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--lib-header-bg, #611a31);
}

.lib-header--photo .lib-header__media {
  height: 200px;
}

#masthead.lib-header--photo #masthead-inner {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 200px;
}

.lib-header--photo .site-branding img {
  margin-top: 0;
}

/* Badge — photographic band with a circular logo overlapping its lower edge.
   NSAP. Figma: 164px band, 150px badge starting at y=98, so the badge rises
   66px into the band and the header ends 84px below it. */
.lib-header--badge .lib-header__media {
  height: 164px;
}

#masthead.lib-header--badge #masthead-inner {
  display: flex;
  justify-content: center;
  min-height: 0;
  padding-bottom: 16px;
}

.lib-header--badge .site-branding {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  margin: -66px auto 0 !important;
  border-radius: 50%;
  background: var(--lib-header-bg, #1e1e1e);
}

.lib-header--badge .site-branding img {
  /* Figma: a 132px logo inside the 150px badge. */
  max-width: 110px;
  margin-top: 0;
}

/* The intro block carries ~90px of editorial top spacing set as inline styles
   in the page content — padding-top: spacing--70 (54px) on the first columns
   block plus margin-top: spacing--60 (36px) on the group inside it. That
   clearance exists for the curve, which paints down to 160px while the header
   box is only 94px tall.

   The photo and badge headers occupy their full visual height, so the same
   spacing pushes the intro ~90px below where the Figma puts it. Neutralise it
   for those two treatments only; curve sites are untouched. !important is
   required because the source is an inline style.

   If a site genuinely wants that spacing back, remove these rules rather than
   fighting them from the editor. */
body.lib-header-photo #link-in-bio .acf-innerblocks-container > .wp-block-columns:first-child,
body.lib-header-badge #link-in-bio .acf-innerblocks-container > .wp-block-columns:first-child {
  padding-top: 0 !important;
}

body.lib-header-photo #link-in-bio .acf-innerblocks-container > .wp-block-columns:first-child .wp-block-group,
body.lib-header-badge #link-in-bio .acf-innerblocks-container > .wp-block-columns:first-child .wp-block-group {
  margin-top: var(--wp--preset--spacing--40, 1rem) !important;
}

/* #masthead-inner also carries the parent theme's .container class. Neutralise
   its box model for the overlay treatments so the logo centres on the card and
   is not inset by container padding. */
#masthead.lib-header--photo #masthead-inner,
#masthead.lib-header--badge #masthead-inner {
  box-sizing: border-box;
  max-width: none;
  padding-right: 0;
  padding-left: 0;
  margin: 0;
}

/* The masthead sits above the page in the curve treatment so the ellipse can
   bleed upward; the photo treatments need it to clip instead. */
.lib-header--photo,
.lib-header--badge {
  overflow: hidden;
}


.site-branding {
  margin: auto !important;
}
.site-branding img {
  width: auto;
  max-width: var(--lib-logo-max-w, 300px);
  height: auto;
  max-height: var(--lib-logo-max-h, 60px);
  margin-top: 0;
}

/* MAIN PAGE */
@media only screen and (min-width: 520px) {
  .phone-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100lvh - 2.5rem);
    padding: 2rem;
    background: var(--lib-page-bg, #f0f0f0);
  }
  #page {
    position: relative;
    z-index: 1;
    width: 480px;
    border-radius: 24px;
    background: white;
    box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }
}
.catalight-social-media-buttons {
  width: fit-content;
  margin: auto !important;
}
.catalight-social-media-buttons li {
  margin: auto !important;
  transform: scale(0.75) !important;
}
.catalight-social-media-buttons li a {
  border: 0.5px solid var(--lib-social, var(--wp--preset--color--pink)) !important;
  background: var(--lib-social, var(--wp--preset--color--pink)) !important;
}
.catalight-social-media-buttons li a path {
  fill: var(--lib-social-contrast, var(--wp--preset--color--white)) !important;
}
.catalight-social-media-buttons li a:hover {
  border: 0.5px solid var(--lib-social, var(--wp--preset--color--pink)) !important;
  background: var(--lib-social-contrast, var(--wp--preset--color--white)) !important;
}
.catalight-social-media-buttons li a:hover path {
  fill: var(--lib-social, var(--wp--preset--color--pink)) !important;
}

.link-in-bio-grid .components-resizable-box__container {
  max-height: unset !important;
}

.wp-block-column-5-lines {
  height: 129.8px !important;
}
.wp-block-column-5-lines img {
  height: 139.8px !important;
}

.wp-block-column-6-lines {
  height: 149.36px !important;
}
.wp-block-column-6-lines img {
  height: 159.36px !important;
}

.wp-block-column-7-lines {
  height: 168.92px !important;
}
.wp-block-column-7-lines img {
  height: 178.92px !important;
}

.wp-block-column-8-lines {
  height: 188.48px !important;
}
.wp-block-column-8-lines img {
  height: 198.48px !important;
}

.wp-block-column-9-lines {
  height: 208.04px !important;
}
.wp-block-column-9-lines img {
  height: 218.04px !important;
}

.wp-block-column-10-lines {
  height: 227.6px !important;
}
.wp-block-column-10-lines img {
  height: 237.6px !important;
}

#link-in-bio a {
  text-decoration: none !important;
}
#link-in-bio .wp-block-columns .wp-block-column {
  margin: auto !important;
}
#link-in-bio .wp-block-columns .wp-block-column .wp-block-columns {
  min-height: 110px;
}
#link-in-bio .wp-block-columns .wp-block-column .wp-block-columns .wp-block-column:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 110px;
  border-radius: 10px 0 0 10px;
  overflow: hidden;
}
#link-in-bio .wp-block-columns .wp-block-column .wp-block-columns .wp-block-column:nth-child(1) img {
  width: auto;
  height: 120px;
  object-fit: cover !important;
}
#link-in-bio .wp-block-columns .wp-block-column .wp-block-columns .wp-block-column:nth-child(2) h2 {
  position: relative;
  display: block;
  align-items: center;
  width: 100%;
  padding-top: var(--wp--preset--spacing--40) !important;
  padding-right: 20px;
  padding-bottom: var(--wp--preset--spacing--40) !important;
}
#link-in-bio .wp-block-columns .wp-block-column .wp-block-columns .wp-block-column:nth-child(2) h2::after {
  position: absolute;
  top: 50%;
  right: 0;
  font-size: 1.2em;
  font-weight: 300;
  content: ">";
  transform: translateY(-50%) scaleY(1.75) scaleX(0.9);
}

@media only screen and (max-width: 1023px) {
  #link-in-bio {
    padding-right: var(--wp--preset--spacing--50) !important;
    padding-left: var(--wp--preset--spacing--50) !important;
  }
  #link-in-bio .wp-block-columns .wp-block-column .wp-block-columns .wp-block-column:nth-child(2) {
    padding-right: var(--wp--preset--spacing--60) !important;
    padding-left: var(--wp--preset--spacing--40) !important;
  }
  #link-in-bio .wp-block-columns .wp-block-column .wp-block-columns .wp-block-column:nth-child(2) h2 {
    padding-top: var(--wp--preset--spacing--40) !important;
    padding-bottom: var(--wp--preset--spacing--40) !important;
  }
}
button.social-link-grid-load-more {
  padding: 0 13px;
  padding: 10px 30px;
  border: 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--lib-accent-contrast, #fff);
  background: var(--lib-accent, #af1f57);
  box-shadow: unset;
}

/* FOOTER */

/* The parent theme sets `#colophon { color: var(--wp--preset--color--plum) }` —
   it uses Catalight's brand purple as the footer text colour. `plum` maps to
   the brand `primary` token, which is navy on Easterseals and indigo on NSAP,
   so the address rendered dark blue on those sites. The footer here is body
   text, so drive it from --lib-body-fg and stop inheriting the parent's
   corporate-footer styling. */
#colophon.site-footer {
  color: var(--lib-body-fg, #435b73);
}

#colophon-inner {
  text-align: center;
}
#colophon-inner img {
  margin-bottom: var(--wp--preset--spacing--50);
}

/* Footer logos vary from wide-and-short (Catalight, 210x34) to tall (NSAP,
   172x93), so bound both axes and let the image keep its aspect ratio. Without
   this the logo renders at its intrinsic size — a 977px-wide PNG stretched the
   footer open. */
#colophon-inner img.footer-logo {
  width: auto;
  max-width: 200px;
  height: auto;
  max-height: 96px;
}

#colophon-end {
  padding-top: 1rem;
}
#colophon-end .copyright {
  margin: 0.75em auto;
}

footer {
  padding-bottom: var(--wp--preset--spacing--60) !important;
}

.gradient-line {
  width: 100%;
  height: 2rem;
  background: var(--lib-bottom-bar, linear-gradient(90deg, #611a31, #b72d57));
}