/* Project overrides. Loaded after the vendor template CSS. */

/* Hero: light scrim so white text reads over the bright banner photo. */
#section-home.cover-bg-black:before {
  opacity: .25;
}

/* Strong layered shadow does most of the legibility work. */
#section-home .heading,
#section-home .sub-heading,
.pb_navbar ul > li > a,
.pb_navbar .navbar-toggler {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .75), 0 0 20px rgba(0, 0, 0, .45);
}

/* Once scrolled the navbar turns solid white with dark links — drop the shadow. */
.pb_navbar.scrolled.pb_scrolled-light ul > li > a,
.pb_navbar.scrolled.pb_scrolled-light .navbar-toggler {
  text-shadow: none;
}

/* Nav links sit over the hero photo, where white-on-photo washes out wherever
   the image goes light. A translucent pill gives each label its own backing so
   it reads against any part of the picture. Keep the alpha low — it should look
   like a tint, not a solid button. Desktop only: under 992px the collapsed menu
   already sits on its own rgba(0,0,0,.8) panel (style-v2.css:1189). */
@media (min-width: 992px) {
  .pb_navbar .navbar-nav > .nav-item + .nav-item {
    margin-left: .35rem;
  }

  .pb_navbar .navbar-nav .nav-link {
    /* bootstrap.css:2861 sets .nav-link to padding:2rem 1rem — invisible on bare
       text, but it makes a pill 91px tall. .5rem matches what the scrolled state
       already uses, so the links no longer jump when the navbar goes solid. */
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-radius: 2rem;
    background-color: rgba(0, 0, 0, .25);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    transition: background-color .25s ease;
    /* The pill carries the contrast now, so the heavy triple glow above would
       only smear the text. Keep a single soft shadow for crispness. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  }

  .pb_navbar .navbar-nav .nav-link:hover,
  .pb_navbar .navbar-nav .nav-link:focus,
  .pb_navbar .navbar-nav .nav-link.active {
    background-color: rgba(0, 0, 0, .42);
  }

  /* Scrolled state is a solid white bar with dark links — pills there would
     read as clutter against the flat header. */
  .pb_navbar.scrolled.pb_scrolled-light .navbar-nav .nav-link,
  .pb_navbar.scrolled.pb_scrolled-light .navbar-nav .nav-link:hover,
  .pb_navbar.scrolled.pb_scrolled-light .navbar-nav .nav-link.active {
    background-color: transparent;
    box-shadow: none;
  }
}

/* Reading Challenge: embed.js copies the blockquote's inline styles onto the
   iframe it swaps in, and ours carries no width — so without this the embed
   falls back to its 326px min-width. Match the Facebook frame's 500px so the
   two stacked posts line up; min-width:0 keeps it from forcing a horizontal
   scrollbar on phones narrower than 326px. */
#section-reading-challenge .instagram-media {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 500px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Facebook's post plugin renders at its width= parameter regardless of the
   iframe element's size, so max-width alone crops the caption. The section's
   inline script scales the frame to fit and sets this wrapper's height to the
   scaled result; overflow:hidden trims the sub-pixel remainder. */
.pb_fb_embed {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  overflow: hidden;
}

.pb_fb_embed iframe {
  display: block;
  transform-origin: top left;
}

/* Reading Challenge: the baseball and book flanking the blurb. Ionicons glyphs
   rather than photos — the theme already loads the font, so there is no new
   asset to ship and the mark stays crisp at any density. */
#section-reading-challenge .pb_rc_glyph {
  font-size: 5.5rem;
  line-height: 1;
  opacity: .85;
}

/* Under 992px the col-lg-2 side columns are hidden and this pair takes over
   beneath the heading. Smaller, because inline it is a flourish rather than
   the framing device it is on desktop. */
#section-reading-challenge .pb_rc_glyphs_sm .pb_rc_glyph {
  font-size: 3rem;
  margin: 0 .5rem;
}