/*!
 * Start Bootstrap - Grayscale v5.0.7 (https://startbootstrap.com/template-overviews/grayscale)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-grayscale/blob/master/LICENSE)
 */

#mainNav {
  min-height: 56px;
  background-color: #fff;
}

#mainNav .navbar-toggler {
  font-size: 80%;
  padding: 0.75rem;
  color: #64a19d;
  border: 1px solid #64a19d;
}

#mainNav .navbar-toggler:focus {
  outline: none;
}

#mainNav .navbar-brand {
  color: #161616;
  font-weight: 700;
  padding: .9rem 0;
}

#mainNav .navbar-nav .nav-item:hover {
  color: fade(white, 80%);
  outline: none;
  background-color: transparent;
}

#mainNav .navbar-nav .nav-item:active, #mainNav .navbar-nav .nav-item:focus {
  outline: none;
  background-color: transparent;
}

@media (min-width: 992px) {
  #mainNav {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    background-color: transparent;
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
  }
  #mainNav .navbar-brand {
    padding: .5rem 0;
    color: rgba(255, 255, 255, 0.5);
  }
  #mainNav .nav-link {
    -webkit-transition: none;
    transition: none;
    padding: 2rem 1.5rem;
    color: rgba(255, 255, 255, 0.5);
  }
  #mainNav .nav-link:hover {
    color: rgba(255, 255, 255, 0.75);
  }
  #mainNav .nav-link:active {
    color: transparent;
  }
  #mainNav.navbar-shrink {
    background-color: transparent;
  }
  #mainNav.navbar-shrink .navbar-brand {
    color: #dddddd;
  }
  #mainNav.navbar-shrink .nav-link {
    color: #dddddd;
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 0.25rem solid transparent;
  }
  #mainNav.navbar-shrink .nav-link:hover {
    color: #64a19d;
  }
  #mainNav.navbar-shrink .nav-link:active {
    color: #467370;
  }
  #mainNav.navbar-shrink .nav-link.active {
    color: #64a19d;
    outline: none;
    border-bottom: 0.25rem solid #64a19d;
  }
}

.masthead {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 16rem;
  /* Asymmetric on purpose: ~1cm (2.5rem) more room above the heading than
     below it, not a symmetric padding bump — the earlier fix compacted
     both equally, and this brings a little of the top space back without
     redoing that. */
  padding: 6.5rem 0 4rem;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 22, 22, 0.3)), color-stop(75%, rgba(22, 22, 22, 0.7)), to(#161616)), url("../img/bg-masthead.jpg");
  background: linear-gradient(to bottom, rgba(22, 22, 22, 0.3) 0%, rgba(22, 22, 22, 0.7) 75%, #161616 100%), url("../img/yo-IMG_56547-5DII-raw16-rawtherapee-shaped.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.mastblank {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 10rem;
  padding: 5rem 0;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.masthead h1 {
  font-family: 'Varela Round';
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.8rem;
  /* Nearly white with a very subtle rose warmth, not pure white — also
     replaces the old webkit-only gradient-text-fill trick (no plain
     `color` fallback existed, so this heading rendered as invisible dark-
     on-dark text outside Safari/Chrome; a flat color fixes both). */
  color: #fbf3f4;
}

.masthead p {
  color: #fbf3f4;
}

.masthead h2 {
  max-width: 20rem;
  font-size: 1rem;
  /* Never actually rendered until coach-profile.php started nesting an h2
     in a mastblank header for a coach's location: with no color rule here
     it fell back to Bootstrap's dark heading color, all but unreadable
     against this section's dark photo background. Same fix as h1/p above. */
  color: #fbf3f4;
}

.mastblank h1 {
  font-family: 'Varela Round';
  font-size: 3.5rem;
  line-height: 3.5rem;
  letter-spacing: 0.8rem;
  /* Same fix as .masthead h1: flat color instead of the webkit-only
     gradient-text-fill trick, which had no plain-color fallback and
     rendered invisible on non-webkit browsers. */
  color: #fbf3f4;
}

.mastblank h2 {
  max-width: 20rem;
  font-size: 1.5rem;
  /* Same fix as .masthead h2 just above: this rule had no color of its
     own until coach-profile.php became the first template to actually
     put an h2 inside a mastblank header (a coach's location), and it was
     rendering nearly invisible against the dark photo background. */
  color: #fbf3f4;
}

@media (min-width: 768px) {
  .masthead h1 {
    font-size: 4rem;
    line-height: 4rem;
  }
}

@media (min-width: 992px) {
  .masthead {
    /* Not height: 100vh — that was the real cause of the excess vertical
       space around the heading (this rule applies at any normal desktop
       width, so it was overriding the base .masthead rule's much smaller
       padding/min-height on every viewport actually tested against). */
    min-height: 18rem;
    /* Same ~1cm (2.5rem) asymmetric top padding as the base rule above. */
    padding: 5.5rem 0 3rem;
  }
  .masthead h1 {
    font-size: 6.5rem;
    line-height: 6.5rem;
    letter-spacing: 0.8rem;
  }
  .masthead h2 {
    max-width: 30rem;
    font-size: 1.25rem;
  }
}

.btn {
  -webkit-box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
  padding: 1.25rem 2rem;
  font-family: 'Varela Round';
  font-size: 80%;
  text-transform: uppercase;
  letter-spacing: .15rem;
  border: 0;
  /* Same rounded/pill aesthetic as the hub's Explore buttons, applied to
     every button site-wide rather than one-off per button style. */
  border-radius: 2rem;
}

.btn-primary {
  background-color: #788878;
}

.btn-primary:hover {
  background-color: #565676;
}

.btn-primary:focus {
  background-color: #565676;
  color: white;
}

.btn-primary:active {
  background-color: #444444 !important;
}

.about-section {
  padding-top: 10rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#161616), color-stop(75%, rgba(22, 22, 22, 0.9)), to(rgba(22, 22, 22, 0.8)));
  background: linear-gradient(to bottom, #161616 0%, rgba(22, 22, 22, 0.9) 75%, rgba(22, 22, 22, 0.8) 100%);
}

.about-section p {
  margin-bottom: 5rem;
}

.projects-section {
  padding: 10rem 0;
}

.projects-section .featured-text {
  padding: 2rem;
}

@media (min-width: 992px) {
  .projects-section .featured-text {
    padding: 0 0 0 2rem;
    border-left: 0.5rem solid #64a19d;
  }
}

.projects-section .project-text {
  padding: 3rem;
  font-size: 90%;
}

@media (min-width: 992px) {
  .projects-section .project-text {
    padding: 5rem;
  }
  .projects-section .project-text hr {
    border-color: #64a19d;
    border-width: .25rem;
    width: 30%;
  }
}

.signup-section {
  padding: 10rem 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 22, 22, 0.1)), color-stop(75%, rgba(22, 22, 22, 0.5)), to(#161616)), url("../img/bg-signup.jpg");
  background: linear-gradient(to bottom, rgba(22, 22, 22, 0.1) 0%, rgba(22, 22, 22, 0.5) 75%, #161616 100%), url("../img/bg-signup.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

.signup-section .form-inline input {
  -webkit-box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
  padding: 1.25rem 2rem;
  height: auto;
  font-family: 'Varela Round';
  font-size: 80%;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  border: 0;
}

.contact-section {
  padding: 5rem 0 0;
}

.contact-section .card {
  border: 0;
  border-bottom: 0.25rem solid #64a19d;
}

.contact-section .card h4 {
  font-size: 0.8rem;
  font-family: 'Varela Round';
  text-transform: uppercase;
  letter-spacing: 0.15rem;
}

.contact-section .card hr {
  border-color: #64a19d;
  border-width: 0.25rem;
  width: 3rem;
}

.contact-section .social {
  margin-top: 5rem;
}

.contact-section .social a {
  text-align: center;
  height: 3rem;
  width: 3rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100%;
  line-height: 3rem;
  color: rgba(255, 255, 255, 0.3);
}

.contact-section .social a:hover {
  color: rgba(255, 255, 255, 0.5);
}

.contact-section .social a:active {
  color: #fff;
}

body {
  font-family: 'Nunito';
  letter-spacing: 0.0625em;
  background-color: #161616;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

a {
  color: #64a19d;
}

a:focus, a:hover {
  text-decoration: none;
  color: #3c6360;
}

.bg-black {
  background-color: #000000 !important;
}

.bg-primary {
  background-color: #64a19d !important;
}

.text-primary {
  color: #64a19d !important;
}

.tw {
  color: #ffffff !important;
}

/* Reserves room at the top of a page whose first content isn't a
   masthead/mastblank hero (coach-profile.php, currently the only user) —
   #mainNav is `fixed-top`, so without this the page's real content
   starts hidden underneath it instead of below it. Margin, not padding,
   so it isn't clobbered by Bootstrap's `!important` spacing utilities
   (e.g. `.p-3`) on the same element. Values match .masthead's own
   already-tuned top padding, which clears the same navbar. */
.nav-clearance {
  margin-top: 6.5rem;
}
@media (min-width: 992px) {
  .nav-clearance {
    margin-top: 5.5rem;
  }
}

/* A coach's in-person location on their full profile page, shown right
   under their name. Plain text sitting directly on the page's dark
   background (not inside a .card-glass box), so it can't use Bootstrap's
   .text-muted — that's a mid-grey meant for light card backgrounds and
   is nearly illegible here. Same near-white/quieter treatment as
   .card-text-secondary uses for the hub's hook2 line. */
.coach-location {
  color: rgba(245, 245, 245, 0.75);
}


footer {
  padding: 5rem 0;
  /* Same nearly-white, subtle-rose color as .masthead h1/p — the footer
     sits over the same kind of dark/photo background and needs the same
     treatment for its default (unstyled) text to be legible. */
  color: #fbf3f4;
}

/* pulled from business casual */

@media (min-width: 800px) {
  .product-item .product-item-title {
    position: relative;
    z-index: 1;
    margin-bottom: -3rem;
  }
  .product-item .product-item-img {
    position: relative;
    z-index: 0;
    max-width: 20vw;
  }
  .product-item .product-item-description {
    position: relative;
    z-index: 1;
    margin-top: 0rem;
    max-width: 50vw;
  }
}

.page-section {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.section-heading {
  text-transform: uppercase;
}

.section-heading .section-heading-upper {
  display: block;
  font-size: 1rem;
  font-weight: 800;
}

.section-heading .section-heading-lower {
  display: block;
  font-size: 3rem;
  font-weight: 100;
}

.bg-faded {
  background-color: rgba(255, 255, 255, 0.1);
}

.bg-faded2 {
  background-color: rgba(10, 0, 0, 0.3);
}

/* Translucent dark-grey cards, for content sitting directly over the
   fixed page-background photo (the hub's domain grid, for now) — replaces
   Bootstrap's opaque white .card default, which reads jarring against a
   full-page dark photo. Text/link colors are overridden too: Bootstrap's
   default dark card text (#212529) is illegible on a dark card. */
.card-glass {
  /* Translucent, NOT blurred — the background photo must stay sharp
     through it (see CLAUDE.md's "Never blur the background images" rule).
     Opacity alone is the only lever here. */
  background-color: rgba(30, 30, 30, 0.25);
  border-color: rgba(255, 255, 255, 0.15);
  border-radius: 1rem;
  /* Clips a full-bleed child (a resource card's cover image, sitting
     flush against the card's top edge before .card-body's padding
     starts) to the card's own rounded corners — without this its square
     bottom corners poke out past the card's rounded top. */
  overflow: hidden;
  /* Set here (inherited by every descendant) rather than listed out by
     child selector — new card content (whisper teasers, event listings,
     coach cards) shouldn't need a matching selector added by hand every
     time just to not render Bootstrap's default dark card text. */
  color: #f5f5f5;
}

/* A resource card's optional cover image (book cover, video thumbnail,
   ...) — full width, fixed height, cropped to fill rather than
   stretched. Sits directly inside .card, above .card-body, so
   .card-glass's own overflow:hidden is what keeps its square corners
   from poking out past the card's rounded ones. */
.resource-cover {
  width: 100%;
  height: 12rem;
  object-fit: cover;
}

.card-glass .text-muted {
  color: rgba(245, 245, 245, 0.65) !important;
}

/* Per-domain variant (see gen-site.php's $domain_design "card_class"):
   fully transparent instead of the standard translucent dark fill. Kept
   as a separate modifier rather than changing .card-glass itself, since
   that's still the default for the hub and any domain not opted into
   this. Border/rounding/text color are inherited from .card-glass. */
.card-glass-transparent {
  background-color: transparent;
}

/* A card nested inside another .card-glass panel — currently a coach's
   testimonials/whispers box on their own profile page (coach-profile.php)
   — "a card within a card". A lighter overlay than the outer card's own
   translucent dark, rather than reusing .card-glass itself, so the
   nested cards read as distinct from the panel holding them instead of
   both blending into one flat dark surface. Fixed regardless of domain —
   ignores $card_class — since the point is contrast against the outer
   card, not per-domain theming. */
.card-glass-nested {
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.75rem;
}

/* Bounded-height, scrollable stack of .card-glass-nested cards — shows
   roughly the target number of cards before the rest need a scroll,
   rather than growing a coach's profile page indefinitely as more
   testimonials/whispers pile up. The two max-heights are tuned to each
   card type's typical size, not a hard guarantee (card height still
   varies with content length). */
.card-scroll-box {
  overflow-y: auto;
  padding-right: 0.5rem; /* clears the scrollbar so it doesn't sit on the card edge */
}

.card-scroll-box > * + * {
  margin-top: 1rem;
}

.testimonial-scroll-box {
  max-height: 24rem; /* roughly three testimonial cards */
}

.whisper-scroll-box {
  max-height: 30rem; /* roughly five whisper teaser cards */
}

/* The second, deeper hook question on each domain card — visually a
   quieter follow-up to the first, not equal weight. */
.card-glass .card-text-secondary {
  color: rgba(245, 245, 245, 0.7);
  font-size: 0.9rem;
  margin-top: -0.5rem;
}

/* Coach headshot on a domain page's coach-card teaser: capped at 120x120,
   cropped to fill that box rather than stretched (object-fit: cover).
   Floated (not flexed) so the name and summary text wrap around it —
   the name top-aligns with the image and the text starts right under the
   name, the way a magazine pull-image works, instead of the photo and
   name sitting centered in their own row above the text. */
.coach-photo {
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.coach-photo-left {
  float: left;
  margin: 0 1rem 0.5rem 0;
}

.coach-photo-right {
  float: right;
  margin: 0 0 0.5rem 1rem;
}

/* Floated images inside a long-form entry body — currently used by an
   event's full description (templates/event-article.php) to show off an
   in-person event's venue/facility, text flowing around the photo,
   magazine-style — same idea as .coach-photo-left/-right above, just
   sized for body content rather than a fixed 120x120 headshot. There's
   no front-matter field or engine support for this: an entry's body is
   Markdown, and Parsedown (unconfigured here) passes raw HTML in it
   through untouched, so an author adds these classes directly on an
   <img> tag written by hand in the body. See CONTENT-GUIDE.md. */
.content-photo {
  max-width: 45%;
  border-radius: 0.5rem;
}

.content-photo-left {
  float: left;
  margin: 0 1.5rem 1rem 0;
}

.content-photo-right {
  float: right;
  margin: 0 0 1rem 1.5rem;
}

/* Dark blue, for the hub's domain-card "Explore" buttons specifically —
   not a change to .btn-primary itself, which is used site-wide (booking
   links, etc.) and stays the existing sage green. */
.btn-explore {
  /* Shifted further toward true navy: the previous color (#1c2b4a) had
     green notably closer to blue than to red, giving it a steel/slate
     cast. Keeping red and green close together (both well below blue) is
     what reads as navy rather than a generic dark blue-grey. */
  background-color: #151c40;
  border-color: #151c40;
}

.btn-explore:hover,
.btn-explore:focus {
  background-color: #10152f;
  border-color: #10152f;
}

.btn-explore:active {
  background-color: #0a0d20 !important;
}

/* Creativity's own button accent — dark green, per-domain (see
   gen-site.php's $domain_design "button_class"), same pattern as the
   hub's .btn-explore navy. */
.btn-creativity {
  /* Three shades darker than the original #234d34, then 15% darker,
     then another 20% darker on top of that. Applied uniformly to every
     real button on this page (coach Book/Full profile, More resources,
     Read more, Register) via gen-site.php's per-domain button_class. */
  background-color: #0f2115;
  border-color: #0f2115;
}

.btn-creativity:hover,
.btn-creativity:focus {
  background-color: #0b1810;
  border-color: #0b1810;
}

.btn-creativity:active {
  background-color: #07100a !important;
}

/* The same per-domain button-accent pattern as .btn-creativity above, one
   per remaining domain — dark, muted, distinct hues rather than shades of
   the same color, so each domain reads as its own place. */
.btn-leadership {
  background-color: #2a3644; /* dark slate blue-grey */
  border-color: #2a3644;
}
.btn-leadership:hover,
.btn-leadership:focus {
  background-color: #202933;
  border-color: #202933;
}
.btn-leadership:active {
  background-color: #171e25 !important;
}

.btn-change {
  background-color: #4a3418; /* dark amber/bronze */
  border-color: #4a3418;
}
.btn-change:hover,
.btn-change:focus {
  background-color: #382712;
  border-color: #382712;
}
.btn-change:active {
  background-color: #291d0d !important;
}

.btn-performance {
  background-color: #3f1620; /* dark crimson/burgundy */
  border-color: #3f1620;
}
.btn-performance:hover,
.btn-performance:focus {
  background-color: #2f1118;
  border-color: #2f1118;
}
.btn-performance:active {
  background-color: #230c12 !important;
}

.btn-intimate {
  background-color: #3a1530; /* dark plum/wine */
  border-color: #3a1530;
}
.btn-intimate:hover,
.btn-intimate:focus {
  background-color: #2c1024;
  border-color: #2c1024;
}
.btn-intimate:active {
  background-color: #200c1a !important;
}

.btn-discovery {
  background-color: #123430; /* dark teal */
  border-color: #123430;
}
.btn-discovery:hover,
.btn-discovery:focus {
  background-color: #0e2724;
  border-color: #0e2724;
}
.btn-discovery:active {
  background-color: #0a1d1a !important;
}

/* Non-interactive stand-in for a Book button when a coach has no
   booking_link set — same size/shape as a real button so the layout
   doesn't shift, but visibly not clickable, and every interaction state
   (hover/focus/active) is pinned to the same resting appearance since
   there's nothing to actually interact with. The diagonal (top-right to
   bottom-left, via ::after) reinforces that visually too. */
.btn-unavailable {
  /* Tighter than the shared .btn padding (1.25rem 2rem) — "Fully Booked"
     is short, but the sibling button next to it (Full profile, Book) can
     still wrap to two lines, and flex's default align-items: stretch
     makes both buttons match that height. display:flex + centering here
     is what actually keeps this one's own text centered in whatever
     height it ends up stretched to, rather than sitting at the top of
     it. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem 0.75rem;
  font-size: 70%;
  line-height: 1.3;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid rgba(245, 245, 245, 0.35);
  color: rgba(245, 245, 245, 0.6);
  cursor: default;
  box-shadow: none !important;
}

.btn-unavailable:hover,
.btn-unavailable:focus,
.btn-unavailable:active {
  background-color: transparent !important;
  border-color: rgba(245, 245, 245, 0.35) !important;
  color: rgba(245, 245, 245, 0.6) !important;
}

.btn-unavailable::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(245, 245, 245, 0.45) 50%, transparent calc(50% + 1px));
  pointer-events: none;
}

/* Generic expandable-content block, revealed by a .toggle-more chevron
   (content/js/toggle-expand.js) — used by coach cards (full bio) and the
   resources card (a bit more teaser text). */
.expand-content {
  margin-top: 0.75rem;
}

.resource-pointers {
  padding-left: 1.1rem;
  margin-bottom: 0.5rem;
}

.resource-pointers li {
  margin-bottom: 0.35rem;
}

.toggle-more {
  background: none;
  border: none;
  padding: 0 0.25rem;
  color: inherit;
  cursor: pointer;
  vertical-align: baseline;
}

.toggle-more i {
  display: inline-block;
  transition: transform 0.15s ease;
}

.toggle-more.is-open i {
  transform: rotate(90deg);
}

/* Sits directly under a preceding list/paragraph it belongs to (the
   resources card's pointers), rather than floating with no clear
   attachment to either what's above or the button below it. */
.toggle-more-tight {
  display: block;
  margin-top: 0.1rem;
}

/* background-attachment: fixed is unreliable on mobile browsers (notably
   iOS Safari, where it can render blank or glitch on scroll), so fall back
   to a normal scrolling background below the tablet breakpoint. */
@media (max-width: 767px) {
  body,
  .masthead,
  .mastblank {
    background-attachment: scroll;
  }
}