/* ==========================================================================
   Custom Header & Hero Overrides
   Matches blkwealthconnect.com header/hero layout, alignment & spacing.
   Loaded after main.css — do not edit main.css for header/hero changes.
   ========================================================================== */

/* ---- Header shell ---- */
#header.site-header {
  background: #000000;
  box-shadow: none;
  padding: 0;
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 1030;
  width: 100%;
}

.site-header__container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

.site-header__row {
  height: 122px;
}

.site-header__col--logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.site-header__col--menu {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header__col--right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#header .site-header__logo {
  display: inline-flex;
  align-items: center;
}

.site-header__col--logo img {
  width: 250px;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  margin: 0;
}
/* Desktop (≥992px): logo stays hidden — unchanged. */
@media (min-width: 992px) {
  .site-header__col--logo img {
    display: none;
  }
}
/* Mobile/tablet (<992px): show the logo, fixed height so it fits the
   80px mobile header row with no layout shift. */
@media (max-width: 991.98px) {
  .site-header__col--logo img {
    display: block;
    width: auto;
    height: 40px;
    max-height: 40px;
  }
}

/* ---- Nav menu — desktop ≥1200px ---- */
@media (min-width: 1200px) {
  #navmenu ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #navmenu li {
    margin-right: 36px;
  }
  #navmenu li:last-child {
    margin-right: 0;
  }
  #navmenu a {
    font-family: "Raleway", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: normal;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 122px;
    padding: 0;
    white-space: nowrap;
  }
  #navmenu a:hover,
  #navmenu a.active {
    color: #cccccc;
  }
}

/* ---- Nav menu — 992–1199px ---- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #navmenu ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #navmenu li {
    margin-right: 24px;
  }
  #navmenu li:last-child {
    margin-right: 0;
  }
  #navmenu a {
    font-family: "Raleway", sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: normal;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 122px;
    padding: 0;
    white-space: nowrap;
  }
  #navmenu a:hover,
  #navmenu a.active {
    color: #cccccc;
  }
}

/* ---- Header & nav — below 992px (tablet/mobile) ---- */
@media (max-width: 991.98px) {
  /* Row height and the menu/logo/right column layout at this width are
     handled by the flex-nowrap rules at the end of this file. */

  #navmenu ul {
    display: none;
  }

  /* Panel is always in the layout (position:fixed, full-screen) but inert
     and invisible until .mobile-nav-active is set — toggling opacity/
     visibility instead of display lets this transition smoothly with no
     white flash. */
  #navmenu {
    position: fixed;
    inset: 0;
    background: #000000;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  body.mobile-nav-active #navmenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.mobile-nav-active #navmenu ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 20px 0;
    width: 100%;
    /* Explicit dark background — main.css's --nav-mobile-background-color
       defaults this ul to white, which was invisible against #navmenu's
       black panel. */
    background-color: #000000;
  }

  body.mobile-nav-active #navmenu li {
    margin: 0;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  body.mobile-nav-active #navmenu li:last-child {
    border-bottom: none;
  }

  body.mobile-nav-active #navmenu a {
    font-family: "Raleway", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: normal;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 15px 20px;
  }

  body.mobile-nav-active #navmenu a:hover,
  body.mobile-nav-active #navmenu a.active {
    color: #cccccc;
  }
  body.mobile-nav-active #navmenu a.active {
    background-color: rgba(255, 255, 255, 0.08);
  }
}

/* ---- Keep in-page anchor links (About, Speaking, ...) from landing
   under the sticky header ---- */
@media (min-width: 992px) {
  section,
  .section {
    scroll-margin-top: 122px;
  }
}
@media (max-width: 991.98px) {
  section,
  .section {
    scroll-margin-top: 80px;
  }
}

/* ---- Hero ---- */
.hero {
  height: 82vh;
  min-height: 0;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero::before {
  display: none; /* remove the template's old tint overlay */
}

/* Image fallback (no assets/video/hero.mp4 uploaded yet) */
.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

/* Background video (once assets/video/hero.mp4 exists, swap the <img>
   for the .hero-video-bg/<video> markup described in custom.css — no
   further CSS changes needed, these rules are already in place). */
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}
.hero-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
  color: #ffffff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ---- Fix pre-existing template bug: main.css's ".newsletter-form button"
   rule (height:50px; padding:0 35px) has higher specificity than
   .btn-getstarted's own padding, silently zeroing its vertical padding and
   clipping the pill shape. Restores the button to its intended look
   (Book Now, Send Message, Get Your Copy — all share this wrapper). ---- */
.newsletter-form .btn-getstarted {
  height: auto;
  padding: 13px 25px;
}

/* ---- Mobile/tablet header fix: keep logo (left) and hamburger (right)
   on one line, both vertically centered, instead of wrapping ---- */
@media (max-width: 991px) {
  .site-header__row {
    flex-wrap: nowrap;
    height: 80px;
    align-items: center;
  }
  .site-header__col--menu {
    flex: 0 0 0;
    width: 0;
    max-width: 0;
    padding: 0;
  }
  .site-header__col--logo {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    display: flex;
    align-items: center;
  }
  .site-header__col--right {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .mobile-nav-toggle {
    font-size: 28px;
    line-height: 1;
    margin: 0;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
  }
  /* main.css sets the open-state (X) icon to black — invisible against
     the now-black off-canvas panel. Keep it white instead. */
  body.mobile-nav-active .mobile-nav-toggle {
    color: #ffffff;
  }

  /* Scroll-to-top button sits above the mobile nav panel (z-index 99999
     vs 9998) — hide it while the menu is open so it can't float on top. */
  body.mobile-nav-active .scroll-top,
  body.mobile-nav-active .scroll-top.active {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

/* ---- Contact section: Send Message button inverted (white bg, black
   text) so it's visible against the section's black background.
   Scoped to #contact only — Book Now / Get Your Copy / Coming Soon
   elsewhere keep their normal black-bg/white-text look. ---- */
#contact .btn-getstarted {
  background: #ffffff;
  color: #000000;
}
#contact .btn-getstarted:hover {
  background: #eeeeee;
  color: #000000;
}

/* ---- Books section: Coming Soon button inverted (white bg, black
   text), same reason — it was nearly invisible on the black
   dark-background section. Scoped to #books only. ---- */
#books .btn-getstarted {
  background: #ffffff;
  color: #000000;
}
#books .btn-getstarted:hover {
  background: #eeeeee;
  color: #000000;
}

/* ---- About section photo: sharp/square corners (rounded-5 removed
   from the HTML; this is a defensive backstop in case anything else
   adds radius). Scoped to #about only. ---- */
#about img {
  border-radius: 0 !important;
}

/* ---- All buttons: square corners instead of the pill shape.
   !important because Bootstrap's .btn sets border-radius via a CSS
   custom property, and reports showed the plain override not always
   winning in some browsers — this removes any ambiguity. ---- */
.btn-getstarted,
.btn-getstarted:hover,
.btn-getstarted:focus,
.btn-getstarted:active,
.btn-getstarted:visited {
  border-radius: 0 !important;
}

/* ---- "Let's Work Together" cards: sharp/square corners everywhere.
   Bootstrap's base .card sets border-radius via a CSS custom property
   (~6px by default) even without a .rounded-* utility, so this needs
   an explicit override. Scoped to #speakers only — shadow, padding,
   colors, fonts and hover effects are untouched. ---- */
#speakers .card,
#speakers .card-header,
#speakers .card-header img,
#speakers .card-body {
  border-radius: 0 !important;
}

/* ---- Podcast section cards: same sharp/square-corner fix, same
   reason (Bootstrap's base .card radius + rounded-4/rounded-top-4
   utilities). Scoped to #podcast only — size/layout untouched. ---- */
#podcast .card,
#podcast .card-header,
#podcast .card-header img,
#podcast .card-body {
  border-radius: 0 !important;
}

/* ---- About section heading: explicitly tied to the same font-family
   as the header nav menu (Raleway), rather than relying on the
   generic h1-h6 rule and the nav's rule happening to match by
   coincidence. Font-size is untouched — stays at main.css's 2rem.
   Scoped to #about only. ---- */
#about .content h3 {
  font-family: "Raleway", sans-serif;
}

/* ---- "Let's Work Together" section title: pure black text instead
   of the default dark-gray heading color. Scoped to #speakers only. ---- */
#speakers .section-title h2 {
  color: #000000;
}

/* ---- "Let's Work Together" card descriptions: pure black text
   instead of the inherited Bootstrap body color (#212529). Scoped
   to #speakers only. ---- */
#speakers .service-item p {
  color: #000000;
}

/* ---- "Let's Work Together" card titles: pure black always, not
   just on :hover (main.css only turns them black on hover; default
   state was the dark-gray heading color). Scoped to #speakers only. ---- */
#speakers .service-item h3 {
  color: #000000;
}

/* ---- Podcast section card titles & descriptions: same black-text
   treatment as "Let's Work Together" (font-family/size already match
   since both sections share the identical .service-item markup/CSS
   — only the color override was missing). Scoped to #podcast only. ---- */
#podcast .service-item h3,
#podcast .service-item p {
  color: #000000;
}

/* ---- Podcast cards: the Speaking section's title/description sizing
   (main.css's .services .service-item h3/p) requires a ".services"
   ancestor class that #podcast doesn't have, so these were silently
   falling back to a different default size. Matching explicitly. ---- */
#podcast .service-item h3 {
  font-size: 22px;
  font-weight: 700;
}
#podcast .service-item p {
  font-size: 14px;
  line-height: 24px;
}

/* ---- Contact form: pure black fields with a thin visible border and
   square corners (border-radius:0 — already the template default, set
   explicitly here too). Scoped to #contact only. ---- */
#contact .contact-form input[type="text"],
#contact .contact-form input[type="email"],
#contact .contact-form textarea {
  background-color: #000000;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  color: #ffffff;
  padding: 14px 18px;
}
#contact .contact-form input[type="text"]:focus,
#contact .contact-form input[type="email"]:focus,
#contact .contact-form textarea:focus {
  background-color: #000000;
  border-color: rgba(255, 255, 255, 0.5);
}
#contact .contact-form input[type="text"]::placeholder,
#contact .contact-form input[type="email"]::placeholder,
#contact .contact-form textarea::placeholder {
  color: #e5e7eb;
  font-weight: 500;
}

/* ---- Contact form left/right alignment: root cause was
   .contact .contact-form{padding:30px} in main.css (and a mobile
   variant {padding:20px} under @media max-width:575px) — the FORM
   element itself had horizontal padding that no amount of
   row/column gutter math could fix, since it sat one level above
   them. Both main.css rules use selector ".contact .contact-form"
   (2 classes, specificity 0-2-0), so the override below uses
   "#contact .contact-form" (1 id + 1 class, specificity 1-1-0) to
   win on specificity alone — no !important needed. ---- */
#contact .contact-form {
  padding-left: 0;
  padding-right: 0;
}
#contact .contact-form .contact-fields-row {
  --bs-gutter-x: 1.5rem;
  margin-left: calc(-0.5 * var(--bs-gutter-x));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  width: auto;
}
#contact .contact-form .contact-fields-row > * {
  padding-left: calc(0.5 * var(--bs-gutter-x));
  padding-right: calc(0.5 * var(--bs-gutter-x));
}

/* main.css redefines .contact-form's padding again at this exact
   breakpoint — match it here so the override holds on mobile too. */
@media (max-width: 575px) {
  #contact .contact-form {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Vertical gap between field rows (gy-4 was removed earlier). */
#contact .contact-fields-row > div {
  margin-bottom: 24px;
}
#contact .contact-fields-row > div:last-child {
  margin-bottom: 0;
}