/**
 * megamenu.css
 * UPEI TB Mega Menu styles — header layout + nav styling + dropdown.
 * Author: Edwin M  |  Date: 2026-04-15
 */

/* ============================================================
   1. HEADER LAYOUT — logo | nav | search on one line
   ============================================================ */

/* Outer container — override existing float + padding from adminimal_upei.css */
header .header-layout-container .header-container {
  display: flex !important;
  align-items: center !important;
  background: #fff !important;
  padding: 15px 0 !important;
  float: none !important;
  overflow: visible !important;
}

/* Clearfix ::after on .header-container becomes a stray flex item — kill it */
header .header-layout-container .header-container::after,
header .header-layout-container .header-container::before {
  display: none !important;
}

/* Logo — bigger than the default 169px, override float:left */
header .header-layout-container .upeilogo {
  float: none !important;
  width: auto !important;
  flex-shrink: 0 !important;
  padding-right: 32px !important;
  display: block !important;
}

header .header-layout-container .upeilogo a {
  display: block !important;
}

header .header-layout-container .upeilogo img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

/* headercontent — override existing float:right + width:75% */
header .header-layout-container .headercontent {
  float: none !important;
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/*
 * region-header is the actual flex parent of the two blocks.
 * This gets nav + search on the same line.
 */
header .header-layout-container .headercontent .region-header {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  overflow: visible !important;
}

/* TB Mega Menu block — takes remaining space */
header
  .header-layout-container
  .headercontent
  #block-adminimal-upei-mainnavigation {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Search block — pushed hard to the right */
header .header-layout-container .headercontent #block-swifttypesearchdefault {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  padding-left: 40px !important;
  padding-bottom: 11px !important;
}

/* ============================================================
   2. TB MEGA MENU WRAPPER — strip default dark bar
   ============================================================ */

/* Suppress the module's float-clearfix pseudo-elements — they add
   phantom height when nav items are overridden to flex */
.tb-megamenu::before,
.tb-megamenu::after {
  display: none !important;
}

.tb-megamenu {
  background: #fff !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.tb-megamenu .nav-collapse {
  background: #fff !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Hide the mobile toggle button (handled by theme mobile region) */
.tb-megamenu .tb-megamenu-button {
  display: none !important;
}

/* ============================================================
   3. TOP-LEVEL NAV LIST
   ============================================================ */
.tb-megamenu .nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  background: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  flex-wrap: nowrap !important;
  border: none !important;
  box-shadow: none !important;
}

.tb-megamenu .nav > li {
  float: none !important;
  /* Keep position: relative (base CSS default for .dropdown) so each
     dropdown's position: absolute; left: 0 anchors to its own li. */
  position: relative !important;
  /* Remove vertical pipe dividers */
  border-right: none !important;
  border-left: none !important;
}

/* Remove any pipe/divider pseudo-elements the theme adds */
.tb-megamenu .nav > li::before,
.tb-megamenu .nav > li::after {
  display: none !important;
}

/* ============================================================
   4. TOP-LEVEL LINK STYLE
   ============================================================ */
.tb-megamenu .nav > li > a,
.tb-megamenu .nav > li > span {
  border-bottom: 4px solid transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  background-color: #fff !important;
  font-family: adelle, Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  text-transform: capitalize !important;
  padding: 16px 20px !important;
  color: #6a7278 !important;
  display: block !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: border-color 0.15s ease !important;
  box-shadow: none !important;
}

/* Active / hover / open */
.tb-megamenu .nav > li.active > a,
.tb-megamenu .nav > li > a:hover,
.tb-megamenu .nav > li > a:focus,
.tb-megamenu .nav > li.open > a,
.tb-megamenu .nav > li.open > a:hover,
.tb-megamenu .nav > li.open > a:focus {
  border-bottom: 4px solid #8c2004 !important;
  background-color: #fff !important;
  color: #333 !important;
  text-decoration: none !important;
}

/* Remove caret arrows */
.tb-megamenu .caret {
  display: none !important;
}

/* ============================================================
   5. DROPDOWN PANEL
   ============================================================ */
.tb-megamenu .mega-dropdown-menu {
  background: #fff !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
  border-radius: 0 !important;
  /* padding-top: 22px matches old site .we-mega-menu-submenu { padding-top: 22px }
     so both image and links start at the same top line inside the dropdown */
  padding: 22px 0 22px 0 !important;
  margin-top: 0 !important;
  left: 0 !important;
  /* ↓ Change this ONE value to resize the dropdown (580px = 240 image + 340 links) */
  width: 580px !important;
  min-width: 580px !important;
}

/* Last 2 nav items (Apply, About Us): align dropdown's right edge to li's right
   edge so the panel opens leftward and stays inside the viewport. */
.tb-megamenu .nav > li:nth-last-child(-n+2) > .mega-dropdown-menu {
  left: auto !important;
  right: 0 !important;
}

.tb-megamenu .mega-dropdown-inner {
  display: flex !important;
  padding: 0 !important;
}

/* Row — normal flex direction; image column uses order: -1 to appear first.
   No padding — spacing is handled by the UL margin (old site technique).
   height: 200px is explicit so nested flex-grow (flex: 1 1 auto on .mega-inner
   and ul) has a definitively-resolved parent height to grow into — browsers
   don't treat stretch-determined height as "definite" for descendant flex-grow.
   All mega-menu images are 240×200px; update this value if images change size. */
.tb-megamenu .tb-megamenu-row {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  padding: 0 !important;
  align-items: stretch !important;
  overflow: hidden !important;
  height: 200px !important;
}

/* Suppress Bootstrap clearfix pseudo-elements — they become stray flex items */
.tb-megamenu .tb-megamenu-row::before,
.tb-megamenu .tb-megamenu-row::after {
  display: none !important;
}

/* Override Bootstrap span: remove float + percent width so flex controls layout */
.tb-megamenu .tb-megamenu-row > [class*="span"] {
  float: none !important;
  width: auto !important;
  min-height: 0 !important;
}

/* Column fills the full dropdown width. display: flex + flex-direction: column
   turns each column into a vertical flex container so .mega-inner / ul can
   use flex-grow to fill the stretched column height. */
.tb-megamenu .tb-megamenu-column {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ============================================================
   6. IMAGE / BLOCK COLUMN
   The module sets data-showblocktitle on any column that contains
   a block (set in template_preprocess_tb_megamenu_column, else branch).
   order: -1 places it first (left) regardless of markup order.
   240px matches the natural HTML width="240" on the mm-image.
   ============================================================ */
.tb-megamenu .tb-megamenu-column[data-showblocktitle],
.tb-megamenu .tb-megamenu-column.upei-menu-image-col {
  order: -1 !important;
  flex: 0 0 240px !important;
  width: 240px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Zero out margins/padding on every Drupal wrapper inside the block column.
   Layout classes, block content wrappers, and article elements all add phantom
   margins that create whitespace below the image. */
.tb-megamenu .tb-megamenu-column[data-showblocktitle] .mega-inner,
.tb-megamenu .tb-megamenu-column[data-showblocktitle] .tb-block,
.tb-megamenu .tb-megamenu-column[data-showblocktitle] .block-inner,
.tb-megamenu .tb-megamenu-column[data-showblocktitle] .block,
.tb-megamenu .tb-megamenu-column[data-showblocktitle] .block__content,
.tb-megamenu .tb-megamenu-column[data-showblocktitle] .contextual-region,
.tb-megamenu .tb-megamenu-column[data-showblocktitle] .layout,
.tb-megamenu .tb-megamenu-column[data-showblocktitle] .layout__region,
.tb-megamenu .tb-megamenu-column[data-showblocktitle] article,
.tb-megamenu .tb-megamenu-column[data-showblocktitle] .block-content,
.tb-megamenu .tb-megamenu-column[data-showblocktitle] .block-content__content,
.tb-megamenu .tb-megamenu-column[data-showblocktitle] .field,
.tb-megamenu .tb-megamenu-column[data-showblocktitle] .field__item,
.tb-megamenu .upei-menu-image-col .mega-inner,
.tb-megamenu .upei-menu-image-col .tb-block,
.tb-megamenu .upei-menu-image-col .block-inner,
.tb-megamenu .upei-menu-image-col .block,
.tb-megamenu .upei-menu-image-col .block__content,
.tb-megamenu .upei-menu-image-col .contextual-region,
.tb-megamenu .upei-menu-image-col .layout,
.tb-megamenu .upei-menu-image-col .layout__region,
.tb-megamenu .upei-menu-image-col article,
.tb-megamenu .upei-menu-image-col .block-content,
.tb-megamenu .upei-menu-image-col .block-content__content,
.tb-megamenu .upei-menu-image-col .field,
.tb-megamenu .upei-menu-image-col .field__item {
  margin: 0 !important;
  padding: 0 !important;
}

/* Suppress clearfix pseudo-elements on field wrapper */
.tb-megamenu .tb-megamenu-column[data-showblocktitle] .field::before,
.tb-megamenu .tb-megamenu-column[data-showblocktitle] .field::after,
.tb-megamenu .upei-menu-image-col .field::before,
.tb-megamenu .upei-menu-image-col .field::after {
  display: none !important;
}

/* Links column .mega-inner: grow to fill the stretched column height and act as
   a flex column so the ul can use flex-grow. Padding: 0 overrides base 10px.
   Suppress clearfix pseudo-elements — in a flex context they become phantom
   flex items that can add unwanted space around the ul. */
.tb-megamenu .mega-dropdown-menu .tb-megamenu-column:not([data-showblocktitle]) .mega-inner {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}
.tb-megamenu .mega-dropdown-menu .tb-megamenu-column:not([data-showblocktitle]) .mega-inner::before,
.tb-megamenu .mega-dropdown-menu .tb-megamenu-column:not([data-showblocktitle]) .mega-inner::after {
  display: none !important;
}

/* ============================================================
   7. DROPDOWN LINKS
   ============================================================ */
.tb-megamenu .mega-dropdown-menu ul {
  list-style: none !important;
  /* old site: header nav .we-mega-menu-submenu ul { margin: -5px 0 0 13px }
     -5px top pulls list flush with the image top; 13px left places links near image edge */
  margin: -5px 0 0 13px !important;
  padding: 0 !important;
  /* flex: 1 1 auto fills .mega-inner (= image height) reliably in a flex chain;
     justify-content: space-between then distributes links evenly over that height */
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 1 auto !important;
}

.tb-megamenu .mega-dropdown-menu ul li {
  border-top: none !important;
  border-bottom: none !important;
  border-right: none !important;
  border-left: none !important;
}

.tb-megamenu .dropdown-menu li > a,
.tb-megamenu .dropdown-menu li > span.tb-megamenu-no-link {
  border-top: none !important;
  border-bottom: none !important;
}

.tb-megamenu .mega-dropdown-menu ul li a {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #6a7278 !important;
  /* tight padding so 6 links fit within the ~200px image height */
  padding: 6px 4px !important;
  display: block !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
  white-space: normal !important;
  border-bottom-width: 0 !important;
}

.tb-megamenu .mega-dropdown-menu ul li a:hover,
.tb-megamenu .mega-dropdown-menu ul li a:focus {
  color: #0e0e0e !important;
  background: transparent !important;
}

/* ============================================================
   8. COLUMN TITLE
   ============================================================ */
.tb-megamenu .tb-megamenu-column .tb-megamenu-column-header {
  font-family: adelle, Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #8c2004 !important;
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid #eee !important;
}

/* ============================================================
   9. MM-IMAGE-CONTAINER — composite overlay (ported from
   adminimal_upei.min.css .we-mega-menu-submenu .mm-image-container)
   ============================================================ */

/* Positioning root — block-level fills the 320px column; height driven by mm-image */
.tb-megamenu .mm-image-container {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
}

/* Base photo — natural 240px width from HTML attribute; no width override
   so the image renders at its native 240×200 size filling the 240px column. */
.tb-megamenu .mm-image-container img.mm-image {
  display: block !important;
  width: 240px !important;
  height: auto !important;
  max-width: none !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Dark panel overlay — matches the 240px image width exactly. */
.tb-megamenu .mm-image-container img.mm-panel {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 240px !important;
  height: auto !important;
  max-width: none !important;
  opacity: 0.6 !important;
  z-index: 2 !important;
}

/* Green arrow — anchored bottom-right at natural 64×64 size.
   No explicit width/height needed: the img width="64" height="64"
   HTML attributes set the intrinsic size, and max-width: 100% only
   clamps when the image would exceed the container (64 < 240, no clamp). */
.tb-megamenu .mm-image-container img.mm-arrow {
  position: absolute !important;
  right: 1px !important;
  bottom: 0 !important;
  z-index: 3 !important;
}

/* Text overlay — white Adelle text over the composited image.
   right: 0 constrains width to the 240px container so text wraps.
   text-align: center horizontally centers the text on the image. */
.tb-megamenu .mm-image-container .mm-text {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  color: #fff !important;
  font-size: 20px !important;
  padding: 18px !important;
  line-height: 1.3em !important;
  font-family: adelle, Georgia, serif !important;
  text-align: center !important;
}

/* ============================================================
   10. HEADING LINE-HEIGHT FIX
   The live server loads TB Mega Menu's Bootstrap CSS which sets
   line-height: 1.1 on all headings (h1–h6). Without it, headings
   inherit the body line-height (≈20px), which is less than the
   40px font-size used on .frontpageeventtitle, causing lines to
   crunch together. Declare it explicitly here so dev matches live
   regardless of which TB Mega Menu style is active.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  line-height: 1.1;
}

/* ============================================================
   11. FRONT-PAGE GAP FIX
   The breadcrumb region is empty on the front page but still carries
   margin: 0 auto 36px — zero it out.
   The page title block renders an h1 inside .pagecontainer before
   the hero image; hide it on the front page.
   NOTE: #navigation-full (red audience nav bar) must remain visible —
   it is styled by .menu-page-top-fullwidth { background: #8c2004 }.
   ============================================================ */
.path-frontpage .region-breadcrumb {
  margin-bottom: 0 !important;
  margin-top: -40px !important;
}

.path-frontpage #block-pagetitle {
  display: none !important;
}