/* ==========================================================================
   Navbar — admission_theme
   Bootstrap breakpoint: navbar-expand-xl = 1200 px
   ========================================================================== */

/* ── Global (all viewports) ─────────────────────────────────────────────── */

/* Gradient accent line above the header .region-nav-main-mainland */
body.is-mainland-page header::before {
    content: '';
    display: block;
    height: 6px;
    width: 100%;
    background: linear-gradient(90deg, #DF7433 0%, #DA562B 60%, #CC103C 90%, #9F0D43 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

header .region-nav-main-mainland {
    display: flex;
}


body.is-mainland-page header nav.navbar {
    padding: 6px 0 0 0;
    height: 100%;
    width: 100%;
}

body.is-mainland-page.sticky-menu-fixed .navbar-brand {
    margin: 0;
}

/* Megamenu panel content is always hidden by default.
   On desktop it is revealed via hover (see @media block below).
   On mobile it stays hidden so the offcanvas renders a plain vertical list. */
header .region-nav-main-mainland .menu-dropdown-0 {
    display: none;
}

/* Level-1 / level-2 extra dropdown divs from menu_item_extras — always gone */
header .region-nav-main-mainland .megamenu-panel .menu-dropdown-1 {
    display: none !important;
}

header .region-nav-main-mainland .megamenu-panel .menu-dropdown-2 {
    display: none !important;
}


/* ── Mobile menu styles (< 1200 px — offcanvas slide-in panel) ─────────── */
@media (max-width: 1199.98px) {

  /* Region: stack vertically inside the offcanvas body */
  header .region-nav-main-mainland {
      flex-direction: column;
      align-items: stretch;
  }

  header .region-nav-main-mainland #block-admission-theme-mainnavmainland {
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      order: 1;
  }

  /* Icons block: move below the menu */
  header .region-nav-main-mainland #block-admission-theme-headerrighticonmainland {
      order: 2;
      width: 100%;
      margin-top: 32px;
  }

  /* Menu list: vertical, full-width */
  header .region-nav-main-mainland .menu.menu-level-0 {
      display: flex !important;
      flex-direction: column !important;
      width: 100%;
      list-style: none;
      padding: 0;
      margin: 0;
  }

  /* Each top-level item: full width with bottom-rule separator */
  header .region-nav-main-mainland .menu-level-0 > .menu-item {
      display: block;
      width: 100%;
      border-bottom: 1px solid #cecece;
  }

  /* First item (Home icon): no borders, extra gap below to separate from nav items */
  header .region-nav-main-mainland .menu-level-0 > .menu-item:first-child {
      border-top: none;
      border-bottom: none;
      padding-bottom: 12px;
  }

  /* Links: block, bold, generous padding; position:relative for chevron */
  header .region-nav-main-mainland .menu-level-0 > .menu-item > a,
  header .region-nav-main-mainland .menu-level-0 > .menu-item > span {
      display: block;
      padding: 18px 30px 18px 0;   /* right gap reserved for the chevron */
      font-size: 1.15rem;
      font-weight: 600;
      color: #1a1a1a;
      text-decoration: none;
      position: relative;
      /* cancel any SVG gradient text-fill applied by desktop :hover rules */
      background: none !important;
      -webkit-text-fill-color: initial !important;
  }

  header .region-nav-main-mainland .menu-level-0 > .menu-item > span {
      cursor: default;
  }

  /* Suppress desktop hover gradient on mobile */
  header .region-nav-main-mainland .menu-level-0 > .menu-item:hover > a,
  header .region-nav-main-mainland .menu-level-0 > .menu-item:hover > span,
  header .region-nav-main-mainland .menu-level-0 > .menu-item:focus-within > a,
  header .region-nav-main-mainland .menu-level-0 > .menu-item:focus-within > span {
      background: none !important;
      -webkit-text-fill-color: initial !important;
      color: #1a1a1a;
  }

  /* Bootstrap's dropdown-toggle caret is not relevant here; hide it */
  header .region-nav-main-mainland .menu-level-0 > .menu-item > a::after,
  header .region-nav-main-mainland .menu-level-0 > .menu-item > span::after {
      display: none;
  }

  /* Right-side red dropdown arrow for items that have children */
  header .region-nav-main-mainland .menu-level-0 > .menu-item--expanded > a::after,
  header .region-nav-main-mainland .menu-level-0 > .menu-item--expanded > span::after {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      background-image: url('../image/icon/arrow-bottom-red.svg');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      transition: transform 0.25s ease;
  }

  /* Rotate arrow 180° when the item is open */
  header .region-nav-main-mainland .menu-level-0 > .menu-item--expanded.is-open > a::after,
  header .region-nav-main-mainland .menu-level-0 > .menu-item--expanded.is-open > span::after {
      transform: translateY(-50%) rotate(180deg);
  }

  /* Show submenu when parent has .is-open (toggled by JS) */
  header .region-nav-main-mainland .menu-level-0 > .menu-item.is-open > .menu-dropdown-0 {
      display: block !important;
      position: static;
      width: 100%;
  }

  /* Mobile dropdown: hide decorative image & heading; show only links */
  header .region-nav-main-mainland .menu-level-0 > .menu-item > .menu-dropdown-0 .megamenu-image,
  header .region-nav-main-mainland .menu-level-0 > .menu-item > .menu-dropdown-0 .megamenu-heading {
      display: none;
  }

  header .region-nav-main-mainland .menu-level-0 > .menu-item > .menu-dropdown-0 .megamenu-inner {
      display: block;
  }

  /* Strip markers from all lists/items inside mobile dropdown (incl. menu-item--expanded) */
  header .region-nav-main-mainland .menu-level-0 > .menu-item > .menu-dropdown-0 .megamenu-links ul,
  header .region-nav-main-mainland .menu-level-0 > .menu-item > .menu-dropdown-0 .megamenu-links li {
      list-style: none;
  }

  header .region-nav-main-mainland .menu-level-0 > .menu-item > .menu-dropdown-0 .megamenu-links ul {
      padding: 0;
      margin: 0;
  }

  header .region-nav-main-mainland .menu-level-0 > .menu-item > .menu-dropdown-0 .megamenu-links li {
      border-top: 1px solid #eeeeee;
      padding-top: 0;   /* override contrib menu.css .menu-item { padding-top: 0.2em } */
  }

  header .region-nav-main-mainland .menu-level-0 > .menu-item > .menu-dropdown-0 .megamenu-links li a {
      display: block;
      padding: 13px 16px;
      font-size: 0.95rem;
      font-weight: 500;
      color: #444444;
      text-decoration: none;
      /* background-color: #f8f8f8; */
  }

  header .region-nav-main-mainland .menu-level-0 > .menu-item > .menu-dropdown-0 .megamenu-links li a:hover {
      color: #c8001d;
      background-color: #eeeeee;
  }

  /* ── Home icon: shrink link to icon size only (not full-row clickable) ─── */
  header .region-nav-main-mainland .menu-level-0 > .menu-item:first-child > a {
      display: inline-flex;
      align-items: center;
      padding: 18px 0 36px;
      font-size: 0;              /* hide link text visually */
      color: transparent;
  }

  header .region-nav-main-mainland .menu-level-0 > .menu-item:first-child > a::before {
      content: '';
      display: inline-block;
      width: 24px;
      height: 22px;
      background-image: url('../image/icon/home-mob.svg');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      vertical-align: middle;
  }

} /* end @media (max-width: 1199.98px) */


/* ── Desktop only (≥ 1200 px — matches navbar-expand-xl) ───────────────── */
@media (min-width: 1200px) {

  /* ──────────────────────────────────────────────────────────────────────
     1. Navbar layout — vertical alignment
        Layout chain at desktop:
          nav.navbar > .container-xxl.d-flex
            ├── .region-nav-branding   (fixed width, flex-shrink:0)
            └── .offcanvas             (fills remaining space)
                 └── .offcanvas-body   (flex row)
                      └── .region-nav-main  (flex row, fills offcanvas-body)
                           ├── nav#block-...main-navigation  (flex-grow:1)
                           └── #block-headerrighticon         (flex-shrink:0)
     ────────────────────────────────────────────────────────────────────── */

  body.is-mainland-page header nav.navbar > .container-xxl {
      align-items: center;
      flex-wrap: nowrap;    /* branding + offcanvas stay on one line */
  }

  /* Branding: never shrink */
  body.is-mainland-page header nav.navbar > .container-xxl > .region-nav-branding {
      flex: 0 0 auto;
      position: relative;
      z-index: 100;
  }

  /* Offcanvas: fill remaining space; overflow:visible lets the megamenu panel
     escape its bounds and display over the page content below. */
  body.is-mainland-page header nav.navbar > .container-xxl > .offcanvas {
      flex: 1 1 0;
      min-width: 0;
      overflow: visible;
  }

  body.is-mainland-page header .offcanvas-body {
      flex: 1 1 0;
      min-width: 0;
      align-items: center;
  }

  header .region-nav-main-mainland {
      flex: 1 1 0;
      min-width: 0;
      align-items: center;
  }

  /* Nav menu block: grows to fill space; overflow:hidden clips any text that
     would otherwise spill past the icons block on the right.
     position:static ensures Drupal's contextual-region module (which adds
     position:relative for logged-in users) does not make this block the
     containing block for the absolutely-positioned megamenu panel — which
     would cause overflow:hidden to clip the panel for admin users. */
  header .region-nav-main-mainland #block-admission-theme-mainnavmainland {
      flex: 1 1 0;
      min-width: 0;
      overflow: hidden;
      justify-content: flex-end;
      position: static;
  }

  /* Prevent the icons block from hidden when a nav item is active */
  header .region-nav-main-mainland #block-admission-theme-headerrighticonmainland {
    position: relative;
    z-index: 1;
  }


  /* ──────────────────────────────────────────────────────────────────────
     2. Megamenu — requires menu_item_extras rendering
        header .region-nav-main-mainland .menu.menu-level-0 > li > .menu-dropdown-0
     ────────────────────────────────────────────────────────────────────── */

  /* nav.navbar is the positioning context (position:relative by Bootstrap).
     header .region-nav-main-mainland Keep .menu-level-0 and its <li> as position:static so the absolutely-
     placed .menu-dropdown-0 escapes up to nav.navbar (full viewport width). */
  header .region-nav-main-mainland #block-admission-theme-mainnavmainland .menu.menu-level-0 {
      position: static;
  }

  header .region-nav-main-mainland #block-admission-theme-mainnavmainland .menu-level-0 > .menu-item {
      position: static;
  }

  /* Make the level-0 nav menu horizontal inside the header .region-nav-main-mainland region.
     The <ul> renders without .navbar-nav so Bootstrap's flex-direction:row
     is not applied automatically — we add it here, scoped to the header. */
  header .region-nav-main-mainland #block-admission-theme-mainnavmainland .menu.menu-level-0 {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow: hidden;
      align-items: center;
      list-style: none;
      padding: 0;
      margin: 0;
      width: 100%;
      justify-content: flex-end;
  }

  header .region-nav-main-mainland #block-admission-theme-mainnavmainland .menu-level-0 > .menu-item {
      display: flex;
      align-items: center;
      padding: 0 5px;
  }

  header .region-nav-main-mainland #block-admission-theme-mainnavmainland .menu-level-0 > .menu-item > a,
  header .region-nav-main-mainland #block-admission-theme-mainnavmainland .menu-level-0 > .menu-item > span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 0.5rem 0.5rem;
      font-size: 1rem;
      white-space: nowrap;
      color: #000;
      text-decoration: none;
      position: relative;
      z-index: 100;
  }

  header .region-nav-main-mainland #block-admission-theme-mainnavmainland .menu-level-0 > .menu-item > span {
      cursor: default;
  }

  header .region-nav-main-mainland #block-admission-theme-mainnavmainland .menu-level-0 > .menu-item:hover > a,
  header .region-nav-main-mainland #block-admission-theme-mainnavmainland .menu-level-0 > .menu-item:hover > span,
  header .region-nav-main-mainland #block-admission-theme-mainnavmainland .menu-level-0 > .menu-item:focus-within > a,
  header .region-nav-main-mainland #block-admission-theme-mainnavmainland .menu-level-0 > .menu-item:focus-within > span {
      background: linear-gradient(90deg, #DF7433 2.14%, #DA562B 58.13%, #CC103C 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-decoration: none;
  }

  /* Dropdown arrow for items with children */
  header .region-nav-main-mainland #block-admission-theme-mainnavmainland .menu-level-0 > .menu-item--expanded > a::after,
  header .region-nav-main-mainland #block-admission-theme-mainnavmainland .menu-level-0 > .menu-item--expanded > span::after {
      content: '';
      display: inline-block;
      width: 12px;
      height: 7px;
      background-image: url('../image/icon/dropdown-arrow-2.svg');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      flex-shrink: 0;
  }

  /* Home icon: first desktop nav item shows icon instead of text */
  header .region-nav-main-mainland #block-admission-theme-mainnavmainland .menu-level-0 > .menu-item:first-child > a {
      font-size: 0;
      color: transparent;
      -webkit-text-fill-color: transparent;
      padding: 0.5rem;
  }

  header .region-nav-main-mainland #block-admission-theme-mainnavmainland .menu-level-0 > .menu-item:first-child > a::before {
      content: '';
      display: inline-block;
      width: 22px;
      height: 20px;
      background-image: url('../image/icon/home.svg');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
  }

  /* Hide dropdown arrow on the home item (not expandable) */
  header .region-nav-main-mainland #block-admission-theme-mainnavmainland .menu-level-0 > .menu-item:first-child > a::after {
      display: none;
  }


  /* 3. Dropdown container — hidden globally; positioned here for desktop
     ------------------------------------------------------------------ */
  header .region-nav-main-mainland .menu-dropdown-0 {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      background-color: #fff;
      box-shadow: 0 4px 20px rgba(0,0,0,0.12);
      /* z-index: 1000; */
      /* Fade-in: override the global display:none with visibility+opacity so
         CSS transitions can run. pointer-events:none prevents the invisible
         panel from blocking clicks on content below it. */
      display: block;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  /* Transparent bridge so the cursor can travel from <li> to the panel
     without the :hover chain being broken mid-gap.                     */
  header .region-nav-main-mainland .menu-dropdown-0::before {
      content: '';
      position: absolute;
      top: -200px;
      left: 0;
      right: 0;
      height: 200px;
      background: #fff;
  }

  /* Show on hover / keyboard focus — fade in */
  header .region-nav-main-mainland .menu-level-0 > .menu-item:hover        > .menu-dropdown-0,
  header .region-nav-main-mainland .menu-level-0 > .menu-item:focus-within > .menu-dropdown-0 {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
  }


  /* 4. Megamenu inner layout (flex: image | content)
     ------------------------------------------------------------------ */
  header .region-nav-main-mainland .megamenu-panel .megamenu-inner {
      display: flex;
      align-items: stretch;
      padding: 0 30px 50px 30px;

      max-width: 1540px;   /* match Bootstrap's container-xxl max-width */
      margin: auto;
  }

  /* Image column */
  header .region-nav-main-mainland .megamenu-panel .megamenu-image {
      flex: 0 0 40%;
      max-width: 40%;
      overflow: hidden;
      line-height: 0;
      position: relative;
      clip-path: polygon(0 2%, 100% 0, 100% 90%, 0 98%);
      aspect-ratio: 4 / 3;
      min-height: 300px;
  }

  /* Drupal field wrappers need to fill the full flex height */
  header .region-nav-main-mainland .megamenu-panel .megamenu-image .field,
  header .region-nav-main-mainland .megamenu-panel .megamenu-image article,
  header .region-nav-main-mainland .megamenu-panel .megamenu-image .field__item {
      height: 100%;
  }

  header .region-nav-main-mainland .megamenu-panel .megamenu-image img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  header .region-nav-main-mainland .megamenu-panel .megamenu-image img.megamenu-image--default {
      object-position: center left;
  }

  /* Content column */
  header .region-nav-main-mainland .megamenu-panel .megamenu-content {
      flex: 1 1 auto;
      padding: 10px 40px;
      min-width: 0;
  }


  /* 5. Heading (title + gradient rule)
     ------------------------------------------------------------------ */
  header .region-nav-main-mainland .megamenu-heading {
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 2px solid transparent;
      border-image: linear-gradient(90deg, #DF7433 32.07%, #DA562B 70.93%, #CC103C 100%) 1;
  }

  header .region-nav-main-mainland .megamenu-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: #1a1a1a;
      line-height: 1.3;
  }


  /* 6. Child links — 2-column layout
     ------------------------------------------------------------------ */
  header .region-nav-main-mainland .megamenu-panel .megamenu-links .menu.menu-level-1 {
      list-style: none;
      padding: 0;
      margin: 0;
      columns: 2;
      column-gap: 32px;
  }

  header .region-nav-main-mainland .megamenu-panel .megamenu-links .menu-level-1 > .menu-item {
      break-inside: avoid;
      padding: 10px 0;
  }

  header .region-nav-main-mainland .megamenu-panel .megamenu-links .menu-level-1 > .menu-item > a {
      color: #333;
      text-decoration: none;
      font-size: 1rem;
      transition: color 0.15s ease;
  }

  header .region-nav-main-mainland .megamenu-panel .megamenu-links .menu-level-1 > .menu-item > a:hover {
      color: #e84c0e;
  }


  /* 7. Variant: no image — mirrors the with-image layout (no image column)
     ------------------------------------------------------------------ */

  /* Indent level-2 items under their parent */
  header .region-nav-main-mainland .megamenu-inner--no-image .menu-level-2 {
      list-style: none;
      padding-left: 16px;
      margin: 4px 0 8px;
  }

  header .region-nav-main-mainland .megamenu-inner--no-image .menu-level-2 > .menu-item > a {
      color: #555;
      font-size: 0.85rem;
  }

} /* end @media (min-width: 1200px) */






#block-sidebarapplynow-mainland {
    position: fixed;
    z-index: 1000;
    top: 180px;
    right: 0px;
    transition: top 0.3s ease;
}

@media (max-width: 1199.98px) {
    body.mobile-menu-open #block-sidebarapplynow-mainland {
        top: 80px;
    }
}

#block-sidebarapplynow-mainland a {
    display: block;
    width: 65px;
    height: 80px;
    font-size: 0;
    background: url(../image/icon/apply_now_btn-square-mainland.svg) center right no-repeat;
}