/* ============================================================
   Site theme — maroon/cream color scheme (replaces the original
   yellow/amber theme). Loaded on every page via layouts/app.blade.php.
   To fully revert to the original theme: delete this file's <link>
   line in layouts/app.blade.php (and optionally this file).
   ============================================================ */
:root {
  --colorPrimary: #92190d;
  --colorRed: #92190e;
}

/* Custom uploaded logo (Settings > Logo) — constrain by HEIGHT, not width.
   The old markup used "w-100" which stretched the image to fill its
   container's fixed width (165px), and since many uploaded logos are taller
   than they are wide, height:auto then blew the image up well past the
   navbar's height, spilling into the hero banner below. */
.main_menu .navbar-brand {
  width: auto !important;
  display: flex;
  align-items: center;
}
img.site-logo {
  width: auto !important;
  max-width: 100%;
  display: block;
}
img.site-logo--header {
  max-height: 52px !important;
}
.footer_top .footer_logo {
  width: auto;
}
img.site-logo--footer {
  max-height: 70px !important;
}

/* The footer's "supporters / funds raised" stats row was removed (just the
   logo remains here now), but .footer_top still reserved padding/margin
   sized for that taller two-column row — leaving a big empty gap above the
   Company/Quick Links columns. Tighten it back down to fit the logo alone. */
.footer_top {
  padding-bottom: 30px !important;
  margin-bottom: 40px !important;
}

/* Mobile — same height-capped approach, just smaller so the logo doesn't
   crowd the hamburger menu / dominate the footer on small screens. */
@media (max-width: 767.99px) {
  img.site-logo--header {
    max-height: 42px !important;
  }
  img.site-logo--footer {
    max-height: 55px !important;
  }
}
@media (max-width: 575.99px) {
  img.site-logo--header {
    max-height: 40px !important;
  }
}

/* Button text was designed for the old yellow background (black text = good
   contrast). On maroon, black is hard to read, so force white text/icons on
   the main CTA buttons. */
.common_btn,
.common_btn::after,
.play_btn {
  color: var(--colorWhite) !important;
}

/* Header / main nav: ALWAYS solid white background + black text, whether
   scrolled or not (client wants the "scrolled" look permanently, no
   transparent-over-photo state). Overrides style.css's default
   .main_menu { position:absolute; top:43px } (transparent, floats over the
   hero photo pre-scroll) so the nav is always position:fixed at the very
   top, same as the old .menu_fix scrolled state. */
.main_menu {
  position: fixed !important;
  top: 0 !important;
  background: var(--colorWhite) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  z-index: 999;
}
.main_menu .navbar-nav .nav-item .nav-link {
  color: var(--colorBlack) !important;
}

/* The mobile/tablet collapsed nav dropdown panel itself always has a dark
   background (see responsive.css .main_menu .navbar-nav { background:
   var(--colorBlack) }), so its links need to stay white, not black. */
@media (max-width: 991.99px) {
  .main_menu .navbar-nav .nav-item .nav-link {
    color: var(--colorWhite) !important;
  }
}

/* Text-logo fallback (shown only when no custom logo is uploaded in
   Settings) — always show the solid maroon version now, never the
   transparent white one. */
.text-brand-logo {
  font-size: 26px;
  font-weight: 800;
  font-family: var(--headingFont);
}
.text-brand-logo--transparent { display: none !important; }
.text-brand-logo--scrolled {
  display: inline !important;
  color: var(--colorPrimary);
}

/* The nav is now permanently fixed on top of the page, so the hero banner
   needs to be pushed down by the nav's height (80px, constant across every
   breakpoint — see style.css .main_menu { height: 80px }) instead of
   sitting underneath it. Without this the top of the banner photo would be
   permanently hidden behind the now-opaque nav. */
.banner {
  margin-top: 80px;
}

/* Plain image slider — no text/button overlay, no forced 100vh height (the
   old design centered a big heading inside a full-viewport-height box; a
   plain image just renders at its own natural aspect ratio, full width,
   which is also what makes this look right on mobile without needing a
   separate mobile slider). */
.banner {
  height: auto !important;
}
.banner div {
  height: auto;
}
.plain_banner_slide {
  display: block;
  line-height: 0;
}
.plain_banner_slide img {
  width: 100%;
  height: auto;
  display: block;
}
.banner .circle_box,
.banner::after,
.banner::before {
  display: none !important;
}

/* Every other spot in the theme that puts black text/icons on a maroon
   (--colorPrimary) background or hover state — swept from style.css. */
.main_menu .menu_right .user_icon .user_link,
.main_menu .navbar-toggler,
.video_donation_box .input_box span,
.footer_newsletter form button,
.counter_2_item .icon,
.single_blog_2 .tags,
.home_3 .menu_right .menu_toggle_icon:hover,
.event_3_area .nextArrow,
.home_3_offcanvas .btn-close:hover,
.contact_info span,
.gallery_item span,
.donor_list_item .pay,
.dashboard_sidebar_menu li a:hover,
.dashboard_sidebar_menu li a.active,
.payment_method::after,
.campaign_details .nav .nav-item button.active,
.blog_det_tags_share .tags li a:hover,
.blog_det_tags_share .share li a:hover,
.sidebar_blog_tags ul li a:hover,
.sidebar_search form button,
.video_donation_box ul li.active,
.faq_text .accordion-button:not(.collapsed) {
  color: var(--colorWhite) !important;
}

/* Correction: the nav "Donate Now" button and the login icon both fill
   with a WHITE circle on hover (by original theme design) — so their
   hover text/icon needs to go dark again, not stay white like the base
   button. Without this they'd be white-on-white (invisible) on hover. */
.main_menu .menu_right .common_btn:hover,
.main_menu .menu_right .common_btn:hover::after {
  color: var(--colorBlack) !important;
}
.main_menu .menu_right .user_icon:hover .user_link {
  color: var(--colorPrimary) !important;
}

/* Same white-fill-on-hover pattern also exists on the hero slider CTA
   button and the "Become a Volunteer" section button — both need dark
   text on hover for the same reason (white ::before fill on hover). */
.banner_text .common_btn:hover,
.banner_text .common_btn:hover::after,
.become_volunteer_text .common_btn:hover,
.become_volunteer_text .common_btn:hover::after {
  color: var(--colorBlack) !important;
}

/* The hairline "border" on hover comes from two theme quirks:
   1) the button's white hover-fill (::before) uses mismatched corner
      radii vs the pill's own 30px radius, leaving a thin sliver of the
      maroon base peeking through at the edge.
   2) the browser's default focus/active outline on <a>/<button> is a
      plain rectangle, which looks broken against a rounded pill/circle.
   Fix both: match the fill's radius exactly, and drop the default outline. */
.main_menu .menu_right .common_btn::before {
  border-radius: 30px !important;
}
.main_menu .menu_right .common_btn:hover::before {
  border-radius: 30px !important;
}
.main_menu .menu_right .common_btn,
.main_menu .menu_right .common_btn:focus,
.main_menu .menu_right .common_btn:active,
.main_menu .menu_right .user_icon .user_link,
.main_menu .menu_right .user_icon .user_link:focus,
.main_menu .menu_right .user_icon .user_link:active {
  outline: none !important;
  box-shadow: none !important;
}