/* ===========================================================
   UMGCCC Research — Custom CSS
   Theme: b5subtheme121923 (Bootstrap 5)
   Purpose:
     - Keep existing site styles
     - On mobile (≤991.98px): stack & center Branding, Patients & Caregivers, and Search
     - Always show Patients & Caregivers + Search on mobile (no hamburger)
     - Keep desktop (≥992px) behavior unchanged
   Notes:
     - Relies on Drupal regions:
         • Navigation branding: Site Branding (logo + title)
         • Additional navigation: Patients & Caregivers (menu) + Search (form)
     - We override Bootstrap’s collapse on mobile and hide the toggler there
   =========================================================== */


/* =========================
   Global links & headings
   ========================= */
a {
  color: #0a4ca3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
  word-break: normal;
}

.no-underline {
  text-decoration: none;
}

.no-underline:hover {
  text-decoration: underline;
}


/* ==========================================
   Branding Block Layout (logo + site title)
   - Default: stacked & centered on mobile
   - Tablet+ (≥768px): row, left-aligned
   ========================================== */
.block-system-branding-block {
  display: flex;
  flex-direction: column;   /* stack logo + title on mobile */
  align-items: center;      /* center horizontally */
  text-align: center;
  width: 100%;              /* ensure proper centering */
}

/* Logo sizing: keep natural size but prevent overflow */
.block-system-branding-block img.site-logo {
  height: auto;
  width: auto;
  max-width: 100%;          /* prevents overflow on small screens */
}

/* Title styling */
.block-system-branding-block .site-title {
  margin-top: .5rem;        /* space under logo */
  font-family: montserrat, sans-serif;
  letter-spacing: 2px;
  text-transform: none;
  font-size: clamp(1.1rem, 2.2vw + 0.5rem, 2rem);
  white-space: normal;
  line-height: 1.2;
}

/* Tablet & up: logo + title side-by-side */
@media (min-width: 768px) {
  .block-system-branding-block {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; /* change to center if you prefer */
    text-align: left;
  }

  .block-system-branding-block .site-title {
    margin-top: 0;
    margin-left: 1rem;      /* spacing between logo and title */
  }
}


/* =========================
   Top Main Menu (Superfish)
   ========================= */
a.sf-depth-1.custom-top-menu {
  position: relative;
  color: #000;
  font-family: montserrat, sans-serif;
  font-weight: 400;
  text-decoration: none;
  margin: 0.5em 0.5em;
  padding: 0 0 4px 0;
}

/* Hover & active state */
a.sf-depth-1.custom-top-menu:hover,
a.is-active.sf-depth-1.custom-top-menu,
a.sf-depth-1.custom-top-menu:hover::after,
a.is-active.sf-depth-1.custom-top-menu::after {
  color: #c8102e;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  text-decoration: none;
}


/* ==========================================
   Navbar background image (optional/disabled)
   Uncomment to enable a banner image in navbar
   ========================================== */
/*
nav.navbar.navbar-expand-lg.navbar-light.text-dark.bg-light {
  background-image: url(/sites/default/files/2023-05/umgccc-banner.png);
  background-size: cover;
  padding: 0;
}
*/


/* ==========================================
   Search block alignment
   - Desktop only: keep floated right
   - Mobile is controlled by the mobile navbar rules below
   ========================================== */
@media (min-width: 992px) {
  form#search-block-form {
    float: right;
  }
}


/* =========================
   Body container padding
   ========================= */
.container-fluid > * {
  padding: 0 20px 0 20px;
}


/* =========================
   Breadcrumbs
   ========================= */
.region.region-breadcrumb {
  padding: 0;
}

li.breadcrumb-item {
  padding-left: 22px;
  padding-top: 20px;
}

li.breadcrumb-item a {
  color: #212529;
  text-decoration: none;
}

li.breadcrumb-item a:hover {
  color: #C8102E;
}


/* ===========================================================
   NAVBAR — MOBILE LAYOUT (≤ 991.98px)
   Goal: 
     - Stack & center: Branding (logo+title), Patients & Caregivers, Search
     - Make collapsed area always visible
     - Hide hamburger button (since nothing collapses)
   Affected DOM (from your markup):
     - header .navbar .container-fluid
     - .region-nav-branding (branding region)
     - .region-nav-additional (menu + search region)
     - .navbar-brand (wraps logo + title)
     - .collapse.navbar-collapse (Bootstrap’s collapsible wrapper)
     - .navbar-toggler (the hamburger)
   =========================================================== */
@media (max-width: 991.98px) {
  /* Stack the navbar vertically on phones */
  header .navbar .container-fluid {
    display: flex;              /* re-assert just in case */
    flex-direction: column;     /* vertical stacking of regions */
    align-items: center;        /* center each row */
    gap: 0.25rem;               /* subtle spacing between rows */
  }

  /* Make both regions full width and centered */
  header .region-nav-branding,
  header .region-nav-additional {
    width: 100%;
    text-align: center;
  }

  /* Branding row: logo above title, centered */
  header .navbar-brand {
    width: 100%;
    display: flex;
    flex-direction: column;     /* logo then title */
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0;
  }

  /* Keep logo from getting too big on narrow screens (tweak to taste) */
  header .navbar-brand .site-logo img {
    max-width: 220px;
    height: auto;
  }

  /* Patients & Caregivers (menu block): stack/center list items */
  header .region-nav-additional nav ul.nav {
    display: flex;
    flex-direction: column;     /* one per line */
    align-items: center;
    margin: 0.25rem 0 0.5rem;
  }

  header .region-nav-additional .nav-link {
    padding: 0.375rem 0.5rem;
  }

  /* Search: give it a full-width feel, centered, with comfortable max width */
  header .region-nav-additional .search-block-form form,
  header #block-b5subtheme121923-searchform form,
  form#search-block-form {
    width: 100%;
    max-width: 540px;
    margin: 0 auto 0.5rem;
    display: flex;
    gap: 0.5rem;
    padding: 0 0.75rem;
    float: none;                /* override any float on mobile */
  }

  header .region-nav-additional .search-block-form input[type="search"],
  form#search-block-form input[type="search"] {
    flex: 1 1 auto;             /* input grows to fill */
  }

  /* Always show the collapsed area on mobile so link + search are visible */
  header .navbar .collapse.navbar-collapse {
    display: block !important;  /* override Bootstrap collapse */
    width: 100%;
  }

  /* Hide the hamburger on mobile since nothing collapses anymore */
  header .navbar .navbar-toggler {
    display: none !important;
  }
}

/* ===========================================================
   Fix: center search input + button on small/landscape screens
   =========================================================== */
@media (max-width: 991.98px) {
  header .region-nav-additional .search-block-form form,
  header #block-b5subtheme121923-searchform form,
  form#search-block-form {
    justify-content: center;   /* center flex children horizontally */
  }
}



/* ***Event filter block styles*** */

/* **COE style** */
.js-form-item.form-item.js-form-type-checkbox.form-type-checkbox.js-form-item-field-event-type-target-id-7.form-item-field-event-type-target-id-7 {
  /*    background-color: #C1AF8F; */
  /*    margin-top: 0; */
      margin-bottom: 5px;
  }
  label[for=edit-field-event-type-target-id-7--2]
  {
     background-color: #C1AF8F !important;
  }

  /* **Conference style** */
  .js-form-item.form-item.js-form-type-checkbox.form-type-checkbox.js-form-item-field-event-type-target-id-2.form-item-field-event-type-target-id-2 {
  /*    background-color: #86fd94; */
      margin-top: 0;
      margin-bottom: 5px;
  }
  label[for=edit-field-event-type-target-id-2--2]
  {
    background-color: #86fd94 !important;
  }

  /* **Program Monthly Meeting style** */
  .js-form-item.form-item.js-form-type-checkbox.form-type-checkbox.js-form-item-field-event-type-target-id-3.form-item-field-event-type-target-id-3 {
  /*    background-color: #e7a3ff; */
      margin-top: 0;
      margin-bottom: 5px;
  }
  label[for=edit-field-event-type-target-id-3--2]
  {
     background-color: #e7a3ff !important;
  }

  /* **IDEA style** */
  .js-form-item.form-item.js-form-type-checkbox.form-type-checkbox.js-form-item-field-event-type-target-id-8.form-item-field-event-type-target-id-8 {
  /*    background-color: #ff7575; */
      margin-top: 0;
      margin-bottom: 5px;
  }
  label[for=edit-field-event-type-target-id-8--2]
  {
     background-color: #ff7575 !important;
  }

  /* **Grand Rounds style** */
  .js-form-item.form-item.js-form-type-checkbox.form-type-checkbox.js-form-item-field-event-type-target-id-6.form-item-field-event-type-target-id-6 {
  /*    background-color: #f9e45d; */
      margin-top: 0;
      margin-bottom: 5px;
  }
  label[for=edit-field-event-type-target-id-6--2]
  {
     background-color: #f9e45d !important;
  }

  /* **Frontiers in Oncology style** */
  .js-form-item.form-item.js-form-type-checkbox.form-type-checkbox.js-form-item-field-event-type-target-id-17.form-item-field-event-type-target-id-17 {
  /*    background-color: #c7c6c6; */
      margin-top: 0;
      margin-bottom: 5px;
  }
  label[for=edit-field-event-type-target-id-17--2]
  {
      background-color: #c7c6c6 !important;
  }

  /* **CRTEC style** */
  .js-form-item.form-item.js-form-type-checkbox.form-type-checkbox.js-form-item-field-event-type-target-id-9.form-item-field-event-type-target-id-9 {
  /*    background-color: #FFC0CB; */
      margin-top: 0;
      margin-bottom: 5px;
  }
  label[for=edit-field-event-type-target-id-9--2]
  {
      background-color: #FFC0CB !important;
  }

  /* **Fellows Lecture style** */
  .js-form-item.form-item.js-form-type-checkbox.form-type-checkbox.js-form-item-field-event-type-target-id-5.form-item-field-event-type-target-id-5 {
  /*    background-color: #56C0F5; */
      margin-top: 0;
      margin-bottom: 5px;
  }
  label[for=edit-field-event-type-target-id-5--2]
  {
      background-color: #56C0F5 !important;
  }

  /* **Program Retreat style** */
  .js-form-item.form-item.js-form-type-checkbox.form-type-checkbox.js-form-item-field-event-type-target-id-4.form-item-field-event-type-target-id-4 {
  /*    background-color: #53FAFD; */
      margin-top: 0;
      margin-bottom: 5px;
  }
  label[for=edit-field-event-type-target-id-4--2]
  {
      background-color: #53FAFD !important;
  }

  /* **Seminar style** */
  .js-form-item.form-item.js-form-type-checkbox.form-type-checkbox.js-form-item-field-event-type-target-id-1.form-item-field-event-type-target-id-1 {
  /*    background-color: #EEB463; */
      margin-top: 0;
      margin-bottom: 5px;
  }
  label[for=edit-field-event-type-target-id-1--2]
  {
      background-color: #EEB463 !important;
  }

  /* **Event Type Filter Apply button** */
  fieldset#edit-field-event-type-target-id--2--wrapper {
      margin: 0;
  }

  /* **Search Block styles** */
  /* .search-block-form__form {
      margin-left: 420px;
  } */

  div#block-b5subtheme121923-search-form {
    float: right;
    margin: 10px;
}

  input#edit-keys { /*background color of search box*/
    background-color: #f0f0f0;
  }

  /* **Banner Image** */
  .l-rw.regions.container.pr-header__rw.arc--2.hr--1-2 {
      background-image: url('/sites/default/files/2023-05/umgccc-banner.png');
  }

  /* **Funding Opps Search Filter Block** */
  h2#block-exposedformfunding-opportunitiespage-1-title {
      font-size: 1.5rem;
      color: #8d1d1b;
  }
  input#edit-submit-funding-opportunities--2 {
      background-color: #8d1d1b;
  }
  div#block-exposedformfunding-opportunitiespage-1 {
      background-color: #f7f7d1;
      padding-left: 22px;
      padding-top: 10px;
  }

  /* .region.region-sidebar-first {
    padding: 0;
    width: 90%;
} */

/* ***Advisory and Partnership Boards cards*** */
/*----  Main Style  ----*/
#cards_landscape_wrap-2 {
  text-align: center;
  /* background: #af2626; */
}

#cards_landscape_wrap-2 .container {
  padding-bottom: 100px;
}

#cards_landscape_wrap-2 a {
  text-decoration: none;
  outline: none;
}

#cards_landscape_wrap-2 .card-flyer {
  border-radius: 5px;
}

#cards_landscape_wrap-2 .card-flyer .image-box {
  background: #f7f7f7;
  overflow: hidden;
  /* box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.50); */
  border-radius: 5px;
  position: relative;
}

#cards_landscape_wrap-2 .card-flyer .image-box img {
  -webkit-transition: all .9s ease;
  -moz-transition: all .9s ease;
  -o-transition: all .9s ease;
  -ms-transition: all .9s ease;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

#cards_landscape_wrap-2 .card-flyer:hover .image-box img {
  opacity: 0.7;
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15);
}

#cards_landscape_wrap-2 .card-flyer .text-box {
  text-align: center;
}

#cards_landscape_wrap-2 .card-flyer .text-box .text-container {
  padding: 15px 5px;
}

#cards_landscape_wrap-2 .card-flyer {
  background: #FFFFFF;
  margin-top: 50px;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  /* box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.40); */
}

#cards_landscape_wrap-2 .card-flyer:hover {
  background: #fff;
  /* box-shadow: 0px 15px 26px rgba(0, 0, 0, 0.50); */
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  margin-top: 50px;
}

#cards_landscape_wrap-2 .card-flyer .text-box p {
  margin-top: 10px;
  margin-bottom: 0px;
  padding-bottom: 0px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #000000;
}

#cards_landscape_wrap-2 .card-flyer .text-box h6 {
  margin-top: 0px;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: bold;
  /* text-transform: uppercase; */
  font-family: 'Roboto Black', sans-serif;
  letter-spacing: 1px;
  color: #00acc1;
}

.image-box img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.image-box .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  width: 100%;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
}

#cards_landscape_wrap-2 .image-box .overlay a {
  color: white;
  text-decoration: none;
  font-family: montserrat, sans-serif;
  font-weight: 400;
}

#cards_landscape_wrap-2 .image-box .overlay a:hover {
  color: #FFCD00;
  font-family: montserrat, sans-serif;
  font-weight: 400;
}

/* **Blocks - Events, Funding Opps, News** */
.eventblock {
  background-color: #fdf8e4;
  border-top: 5px solid #7e7b7b;
  padding: 1rem;
}

.fundingoppsblock {
  background-color: #e9f6f9;
  border-top: 5px solid #7e7b7b;
  padding: 1rem;
}

.newsblock {
  background-color: #f2fee1;
  border-top: 5px solid #7e7b7b;
  padding: 1rem;
}

/* ***Resource Block*** */
.resource-block {
  background-color: #fff;
  border: 1px solid #818181;
  /* box-shadow: 0 0 9px 1px rgba(0, 0, 0, .15); */
  padding: 20px;
  height: 100%;
  margin-right: 20px;
  border-radius: 10px;
}

/* ***Member Links Block on Homepage*** */
.member-links-homepage-block {
  box-shadow: 4px 4px 20px #dddddd;
  border-top: solid 4px rgb(251, 222, 108);
  padding: 20px;
  height: 100%;
  margin-left: 40px;
  border-radius: 10px;
}

/* ***Layout Builder Modal Source code text area*** */
#layout-builder-modal * textarea,
#layout-builder-modal *:not(div) textarea {
  height: 400px;
  resize: vertical;
  overflow-y: scroll;
}

/* ***Grants & Contracts Request Form***
form#webform-submission-umgccc-request-for-proposal-add-form {
  width: 80%;
} */
.new-region-wrapper {
  margin-bottom: 20px;
}

/* New Region - Main Navigation Menu */
.region.region-new-region {
  background-color: #ffcd00;
}
/* Question 1 title label */
label.q-1-bold-title {
  font-weight: bold;
}

/* ***IDEA Top Navigation Menu*** */


/* ***program leader portraits*** */
.image-container {
  display: flex;
  justify-content: flex-start;
}

.image-caption {
  text-align: center;
  margin-right: 20px;
}

.image-caption:last-child {
  margin-right: 0;
}

.image-caption p {
  font-size: 14px;
  margin-top: 5px;
}

.image-caption img {
  margin-bottom: 5px;
}

.image-caption a {
  text-decoration: none;
}

/*** *Calendar Filter Options* ***/
.event-type--filters label.option {
  /* color: white; */
  text-decoration: none;
  /* font-weight: 600; */
  font-size: .9rem;
  box-shadow: 1px 2px 0 #a39b9b;
  /* display: inline-block; */
  padding: 1px 4px;
  border-radius: 0.25rem;
}

/*** *Member Links Block* ***/
div#block-b5subtheme121923-memberssidebarmenu {
  padding: 10px;
  background-color: #c3d7eb;
}

/*** *Shared Service Directors Image Block with name in caption* ***/
.main-container {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: flex-start; /* Align items at the start */
}

.main-container p a {
  margin-bottom: 2px; /* Add some space below the title */
  font-size: 1.2em; /* Smaller font size for titles */
  text-decoration: none;
}

.main-container p a:hover {
  text-decoration: underline;
}

.content-container {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: flex-start; /* Align items at the start */
}

.content-container p {
  margin: 0 0 5px 0; /* Remove margin from the top and add some margin to the bottom */
}

.image-container {
  display: flex; /* Align images side by side */
}

.image-wrapper {
  position: relative;
  display: inline-block;
  margin-right: 2px; /* Add space between the images */
}

.image-wrapper img {
  display: block;
  width: 150px;
  height: 188px;
}

.image-wrapper:last-child {
  margin-right: 0; /* Remove right margin from the last image */
}

.image-caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  padding: 5px 0;
}

.image-caption a {
  color: whitesmoke;
  text-decoration: none;
}

.image-caption a:hover {
  color: #FFCD00;
}

/* Ensure no margins or padding for the body and main content */
body,
.main-content {
    margin: 0;
    padding: 0;
}

/***********Landing Page Slideshow - start*****************/
/* Remove padding and margin from the main slideshow container */
.views_slideshow_cycle_main.views_slideshow_main {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Ensure slideshow images are fluid */
.views_slideshow_cycle_main.views_slideshow_main img {
    display: block;
    width: 100%;
    height: auto;
}

/* Reset any extra spacing on the block wrapper */
#block-b5subtheme121923-content {
    margin: 0;
    padding: 0;
}

/* Reserve responsive height for the slideshow area */
#views_slideshow_cycle_teaser_section_landing_page_slideshow-block_1 {
    width: 100% !important;
    aspect-ratio: 1920 / 680; /* Matches your slideshow image style ratio */
    position: relative;
    overflow: hidden;
}

/* Keep slides overlapping for fade/slide transitions */
#views_slideshow_cycle_teaser_section_landing_page_slideshow-block_1
  .views_slideshow_cycle_slide {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

/* Make images fill the container without distortion */
#views_slideshow_cycle_teaser_section_landing_page_slideshow-block_1
  .views_slideshow_cycle_slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Full-width breakout for the slideshow block */
#views_slideshow_cycle_main_landing_page_slideshow-block_1 {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
}

/* Prevent horizontal scroll caused by 100vw breakout */
body {
    overflow-x: hidden;
}
/***********Landing Page Slideshow - end*****************/


/* Top Main Menu */
.top-main-menu {
  color: #C8102E;
}

/* *****TBMega Main Menu*** */
.nav-collapse.always-show {
  background-color: #FFCD00;
  border-top: 6px solid #212529;
}

.tb-megamenu .dropdown-menu {
  border: 0;
  border-bottom: 4px solid #C8102E;
}

.tb-megamenu .nav>li>a,
.tb-megamenu .nav>li>span.tb-megamenu-no-link {
  border-bottom: 0;
  border-right: 0;
  border-top: 0;
  color: #2C2A29;
  padding: 10px 10px;
  font-weight: normal;
  font-stretch: condensed;
  text-shadow: none;
  text-decoration: none;
}

/*Active Main Menu Links*/
.tb-megamenu .nav>.active>a,
.tb-megamenu .nav li.dropdown.active>.dropdown-toggle,
.tb-megamenu .nav li.dropdown.open.active>.dropdown-toggle,
.tb-megamenu .nav>li.dropdown.open.active>a:hover,
.tb-megamenu .nav>li.dropdown.open.active>span.tb-megamenu-no-link:hover {
  background-color: #fff;
  color: black;
}

.tb-megamenu .nav>.active>a::before {
  border-bottom: solid 4px #8d8b8b;  
}

/*On-Hover Main Menu Links*/
.tb-megamenu .nav>.active>a:hover {
  background-color: #fff;
  color: #C8102E;
}

.tb-megamenu .mega-nav>li a,
.tb-megamenu .dropdown-menu .mega-nav>li a,
.tb-megamenu .mega-nav>li span.tb-megamenu-no-link,
.tb-megamenu .dropdown-menu .mega-nav>li span.tb-megamenu-no-link {
  color: #2c2a29;
  text-decoration: none;
}

.tb-megamenu .mega-nav>li a:hover,
.tb-megamenu .dropdown-menu .mega-nav>li a:hover,
.tb-megamenu .mega-nav>li span.tb-megamenu-no-link,
.tb-megamenu .dropdown-menu .mega-nav>li span.tb-megamenu-no-link {
  color: #C8102E;
  text-decoration: none;
}

/* .tb-megamenu .nav li.dropdown.open > .dropdown-toggle {
  border-bottom: solid 4px #fff;
} */

/* Active submenu links */
.tb-megamenu .dropdown-menu .active>a,
.tb-megamenu .dropdown-menu .active>a:hover,
.tb-megamenu .dropdown-menu .active>span.tb-megamenu-no-link,
.tb-megamenu .dropdown-menu .active>span.tb-megamenu-no-link:hover {
  color: #C8102E;
  text-decoration: none;
  outline: 0;
  background-color: #08c;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #08c, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #08c, #0077b3);
  background-image: -o-linear-gradient(top, #e7e9e9, #e7e9e9);
  background-image: linear-gradient(to bottom, #e7e9e9, #e7e9e9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0076b2', GradientType=0);
}

/* Fix TB Mega Menu mobile-Hamburger menu visibility issue */
.tb-megamenu .nav-collapse,
.tb-megamenu .nav-collapse.collapse {
  z-index: 999;
  display: block !important;
}

/* Background color of hamburger menu list */
.tb-megamenu-column-inner.mega-inner.clearfix {
    background-color: #fff; /* Ensures white background */
}

/* Ensure TB Mega Menu submenus stay collapsed by default on mobile */
@media (max-width: 991px) {
  .tb-megamenu .nav > li > .dropdown-menu {
    display: none !important;  /* Hide submenus initially */
  }
  .tb-megamenu .nav > li.open > .dropdown-menu {
    display: block !important; /* Show submenu when parent is open */
  }
  /* Ensure submenu background remains white */
  .tb-megamenu .nav > li > .dropdown-menu li {
    background-color: white !important;
  }
}









/* Styling for the vertical menu of each section */
.sidebar-menu-block {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 20px;
  margin-right: 20px;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .3), 0 -5px 11px -6px rgba(0, 0, 0, .3);
}

.sidebar-menu-block h5 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2C2A29;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

.sidebar-menu-block .nav {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu-block .nav-item {
  position: relative;
  border-bottom: 1px solid #ddd;
}

a.nav-link {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #2C2A29;
  font-size: 1rem;
}

.sidebar-menu-block .nav-link:hover,
.sidebar-menu-block .nav-link.active,
.sidebar-menu-block .nav-link.is-active {
  background-color: #dfe1e2;
  color: #C8102E;
}

.sidebar-menu-block .nav-item>ul {
  display: none;
  list-style-type: none;
  padding-left: 20px;
}

.sidebar-menu-block .nav-item:hover>ul,
.sidebar-menu-block .nav-item.active>ul,
.sidebar-menu-block .nav-item>.nav-link.active+ul,
.sidebar-menu-block .nav-item>ul>.nav-item>.nav-link.is-active {
  display: block;
}

.sidebar-menu-block .nav-item ul li {
  border-bottom: none;
}

/* Ensure the sidebar menu links wrap within the container */
.sidebar-menu-block {
  /* width: 100%; */
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
}

.sidebar-menu-block a {
  display: block;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

/* Ensure padding is correctly applied to sidebar and content areas */
/* .container-fluid.px-4 {
  padding-left: 10px;
  padding-right: 10px;
} */

/* ***Patients & Caregiver link on homepage*** */
nav#block-b5subtheme121923-topsecondarymenu {
  margin-right: 20px;
}

nav#block-b5subtheme121923-topsecondarymenu a.nav-link:hover {
  color: #C8102E;
}

/* Newsroom View */
.news-item {
  display: flex;
  align-items: flex-start; /* Ensures image and text align at the top */
  gap: 15px; /* Space between image and text */
  margin-bottom: 20px; /* Adds spacing between news items */
  padding-bottom: 15px; /* Space before separator */
  border-bottom: 1px solid #ccc; /* Gray separator line */
}

.news-image {
  flex-shrink: 0; /* Prevents image from shrinking */
}

.news-image img {
  max-width: 200px;	
  height: 220px; /* Ensures consistent height */
  object-fit: cover; /* Ensures proportional scaling */
}

.news-text {
  display: flex;
  flex-direction: column; /* Ensures date, title, and summary are in a column */
  justify-content: flex-start; /* Aligns text to the top */
}

.news-date {
  font-size: 1em;
  color: #666; /* Lighter text for subtle emphasis */
  margin-bottom: 3px; /* Adds space below date */
}

.news-title {
  font-size: 1.2em;
  font-weight: normal;
  margin-bottom: 5px; /* Space between title and summary */
}

.news-summary {
  font-size: 1em;
  color: #333; /* Slightly darker text */
  margin-bottom: 30px;	/* Space between summary text and next news item */
}

/* Responsive styles for mobile */
@media (max-width: 768px) {
  .news-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .news-image img {
    width: 100%; /* Makes image full width on mobile */
    height: auto;
  }
}

/*Add Event Button in Calendar*/
a.btn.btn-primary.add-event {
    margin-bottom: 20px;
}

/*** WEBFORMS ***/
/* Horizontal Rule */
.webform-horizontal-rule--medium {
	border: 4px solid;
}

/*** Funding Opps node title ***/
body.page-node-type-funding-opportunity span.field.field--name-title.field--type-string.field--label-hidden {
  font-size: 1.5rem !important;
  line-height: 1.2 !important;
}

/*** Calendar entry text/bullet formatting ***/
.fc-event {
  color: black !important;
  background-color: transparent !important;
  border: none !important;
  padding-left: 1.5em;
  position: relative;
}

.fc-event::before {
  content: "";
  position: absolute;
  left: 0.4em;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background-color: var(--event-color, black); /* fallback to black */
}

/* changes event time which is rendered in bold to regular 400 */
.fc-day-grid-event .fc-time {
  font-weight: 400 !important; /* 400 = normal */
}

/* Font weight of titles in calendar */
span.fc-title {
  font-weight: 600;
}




/* === UMB Superfish Menu Styling === */

/* Base menu styling */
#umb-block-superfish-1 .sf-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Top-level menu links */
#umb-block-superfish-1 .sf-menu a,
#umb-block-superfish-1 .sf-menu span.nolink {
  background: #ffcc00; /* UMB yellow */
  color: #000; /* black text */
  font-weight: normal;
  padding: 0.75em 1em;
  text-decoration: none;
  display: inline-block;
}

/* Active link (current page) - normal font, UMB red over white */
#umb-block-superfish-1 .sf-menu a.is-active {
  background: #ffffff;
  color: #e21833; /* UMB red */
  font-weight: normal;
}

/* Highlight parent link when on a child active page */
#umb-block-superfish-1 .sf-menu li.active-trail > a {
  background-color: #ffffff !important;
  color: #e21833 !important;
  font-weight: normal !important;
}

/* Dropdown children */
#umb-block-superfish-1 .sf-menu li ul {
  background: #ffffff;
}

#umb-block-superfish-1 .sf-menu li ul li a {
  background: #ffffff;
  color: #000000;
}

#umb-block-superfish-1 .sf-menu li ul li a:hover {
  color: #e21833; /* UMB red on hover */
}

/* Hover effects for top-level */
#umb-block-superfish-1 .sf-menu li:hover,
#umb-block-superfish-1 .sf-menu li.sfHover,
#umb-block-superfish-1 .sf-menu a:hover,
#umb-block-superfish-1 .sf-menu span.nolink:hover {
  background: #ffffff;
  color: #e21833; /* UMB red */
  outline: none;
}

/* Dropdown indicator (arrow) alignment */
#umb-block-superfish-1 .sf-menu a.sf-with-ul::after {
  content: "▼";
  font-size: 0.65em;
  margin-left: 0.4em;
  display: inline-block;
  vertical-align: middle;
}

/* Remove default sub-indicator arrows */
.sf-sub-indicator::after {
  content: none !important;
}

/* Hamburger toggle for mobile */
#umb-block-superfish-1 .sf-accordion-toggle {
  text-align: right;
  padding: 1em;
}

#umb-block-superfish-1 .sf-accordion-toggle a {
  background-color: #ffcc00;
  color: #000;
  font-size: 1.2em;
  font-weight: bold;
  padding: 0.75em 1em;
  display: inline-block;
  position: relative;
}

#umb-block-superfish-1 .sf-accordion-toggle a::after {
  content: "≡";
  font-size: 1.5em;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
}

/* Expanded state of accordion */
#umb-block-superfish-1 .sf-accordion-toggle a.sf-expanded {
  background: #ffffff;
  color: #e21833;
}

/* Hide block title on small screens */
@media (max-width: 768px) {
  #umb-block-superfish-1 .block-title,
  #umb-block-superfish-1 h2 {
    display: none;
  }
}

/* Responsive layout: full width menu items */
@media (max-width: 768px) {
  #umb-block-superfish-1 .sf-menu li {
    width: 100%;
  }

  #umb-block-superfish-1 .sf-menu li a {
    display: block;
    width: 100%;
  }
}

/* === Mobile Hamburger Menu Fix === */

/* Remove "Main Menu" title on small screens */
@media (max-width: 768px) {
  #umb-block-superfish-1 .block-title,
  #umb-block-superfish-1 h2 {
    display: none !important;
  }
}

/* Center-align the hamburger menu */
@media (max-width: 768px) {
  #umb-block-superfish-1 .sf-accordion-toggle {
    text-align: center !important; /* Center aligns the button */
    padding: 0.5em 0;
  }

  #umb-block-superfish-1 .sf-accordion-toggle a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffcc00;
    color: #000;
    font-size: 1.2em;
    font-weight: bold;
    padding: 0.75em 1.5em;
    width: 100%; /* Ensures it takes full width */
    max-width: 250px;
    margin: 0 auto; /* Centers it */
  }

  /* Ensure icon is properly spaced from text */
  #umb-block-superfish-1 .sf-accordion-toggle a::after {
    content: "≡";
    font-size: 1.5em;
    margin-left: 10px;
    position: static; /* No absolute positioning issues */
    transform: none;
  }
}


/*** ***Layout Builder Block Styles*** ***/

/* Button-Link Block */
.field.field--name-field-button-link.field--type-link.field--label-hidden.field__item {
    margin-top: 40px;
}

.field--name-field-button-link a {
    background-color: #C8102E;
    border-radius: 8px;
    color: #FFFFFF;
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    transition: background-color 0.3s ease-in-out;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.field--name-field-button-link a:hover {
    background-color: #000000;
}

/* Paragraph-with-Title block */
._none.block.block-layout-builder.block-inline-blockparagraph-with-title {
    margin-top: 40px;
}




/*** ***Funding Opps Filters Block*** ***/
.sidebar-menu-block:has(.funding-opps-filters--block) {
  background-color: #CFE8FF;
  border-radius: 8px;
}




/*** Tutorials sidebar menu ***/
#block-b5subtheme121923-websitetutorialssidebarmenu ul.sf-menu.sf-vertical {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  padding-left: 0;
  margin-left: 0;
  list-style: none;
  counter-reset: item;
}

#block-b5subtheme121923-websitetutorialssidebarmenu ul.sf-menu.sf-vertical li {
  position: relative;
  padding-left: 1.5em; /* tighter padding */
  counter-increment: item;
  width: 100%;
  box-sizing: border-box;
}

#block-b5subtheme121923-websitetutorialssidebarmenu ul.sf-menu.sf-vertical li::before {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  top: 0.2em;
  font-weight: normal;
  color: black;
  width: 1.2em;
  text-align: right;
  display: inline-block;
}

#block-b5subtheme121923-websitetutorialssidebarmenu ul.sf-menu.sf-vertical li a {
  display: block;
  text-decoration: none;
  color: #000;
  padding: 0.25rem 0;
}

/* ACTIVE: white background, red number and link */
#block-b5subtheme121923-websitetutorialssidebarmenu ul.sf-menu.sf-vertical li a.is-active {
  color: #c4001a;
  font-weight: normal;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  margin-left: -0.5rem;
  display: inline-block;
}

/* ACTIVE: red number */
#block-b5subtheme121923-websitetutorialssidebarmenu ul.sf-menu.sf-vertical li.is-active::before {
  color: #c4001a;
}

/* HOVER: red text and number */
#block-b5subtheme121923-websitetutorialssidebarmenu ul.sf-menu.sf-vertical li:hover::before,
#block-b5subtheme121923-websitetutorialssidebarmenu ul.sf-menu.sf-vertical li a:hover {
  color: #c4001a;
}

/* Custom Button for APPLY HERE */
.custom-btn {
  background-color: #9F001C; /* default red */
  color: #fff;
  font-weight: bold;
  border: none;
  text-decoration: none;
  transition: background-color 0.2s ease; /* smooth fade */
}

/* Keep text consistent in all states */
.custom-btn:visited,
.custom-btn:focus,
.custom-btn:active {
  color: #fff;
  text-decoration: none;
  background-color: #9F001C; /* default red */
}

/* Put hover last so it always wins */
.custom-btn:hover {
  background-color: #222; /* dark on hover */
  color: #fff;
  text-decoration: none;
}


/* ==========================================================
   HERO BANNER (auto-height using actual image ratio 1920×500)
   ----------------------------------------------------------
   Keeps proportions exactly, fills full browser width,
   and ensures the overlay touches the bottom of the image.
   ========================================================== */

.bg-image.block-layout-builder {
  position: relative;

  /* Force full browser width */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;

  /* --- Auto height based on 1920×500 ratio (3.84) --- */
  height: calc(100vw / 3.84);

  /* --- Background image behavior --- */
  background-size: 100% auto !important;    /* fit width, keep ratio */
  background-position: center top !important;
  background-repeat: no-repeat !important;

  z-index: 1;
}

/* --- Overlay bar at bottom --- */
.hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.65);
  padding: 1.25rem 1rem;
  text-align: left;
  z-index: 2;
  margin: 0;  /* ensures it sits flush to the bottom */
}

/* --- Title text --- */
.hero-title {
  color: #fff;
  font-size: 2.4rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
}

/* --- Responsive adjustments --- */
@media (max-width: 992px) {
  .bg-image.block-layout-builder {
    height: calc(100vw / 3.2); /* slightly taller for medium screens */
  }
  .hero-title { font-size: 2rem; }
}

@media (max-width: 768px) {
  .bg-image.block-layout-builder {
    height: calc(100vw / 2.5); /* taller on phones for readability */
  }
  .hero-overlay {
    padding: 1.5rem;
    text-align: center;
  }
  .hero-title {
    font-size: 1.6rem;
  }
}

/* ==========================================================
   NOTES:
   - The height formula (100vw / 3.84) preserves 1920×500 ratio.
   - Overlay now touches the bottom edge of the image.
   - Adjust ratio if you change image dimensions again.
   - Smaller screens slightly increase relative height to
     maintain readability and visual balance.
   ========================================================== */

/**************************************************************
 * Horizontal Scrollbar for Funding Opportunities Table
 * ----------------------------------------------------
 * This CSS adds a horizontal scrollbar to the bottom of the
 * table in the Funding Opportunities View, without changing 
 * column widths, wrapping behavior, or table layout.
 *
 * HOW IT WORKS:
 * - In the View, we added the custom CSS class "scroll-view"
 *   under: Views → Advanced → Other → CSS class.
 * - This CSS targets only that View.
 * - Only horizontal overflow is enabled; vertical remains normal.
 * - No JavaScript is needed.
 *
 * IMPORTANT:
 * - This preserves original Bootstrap column widths.
 * - No forced nowrap. No max-content width.
 * - Scrollbar appears ONLY when table naturally exceeds container.
 **************************************************************/

/* Enable horizontal scrolling underneath the table */
.scroll-view .view-content {
  overflow-x: auto;                /* horizontal scroll only when needed */
  overflow-y: visible;             /* do not touch vertical scrolling */
  -webkit-overflow-scrolling: touch;  /* smooth scrolling on iOS */
}

/* We intentionally do NOT modify the table width or white-space
   so the table keeps its original responsive behavior:

   DO NOT add:
     width: max-content;
     white-space: nowrap;
   DO NOT override Bootstrap's .table styles here.
*/







/* =========================
   End of custom.css
   ========================= */