/* ==========================================================================
   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 .navbar-brand {
    padding: 10px 0;
}

body.is-mainland-page .navbar-brand img {
    height: 70px;
    width: auto;
}

.navbar-brand-mainland img {
    height: 60px;
    width: auto;
    transition: height 0.3s ease;
}

@media (min-width: 1200px) {
  .navbar-brand-mainland img {
      height: 70px;
  }
  body.sticky-menu-fixed .navbar-brand-mainland img {
      height: 60px;
  }
}

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) {

  body.is-mainland-page .navbar-brand img {
      height: 60px;
  }

  .offcanvas {
    max-width: 500px;
  }

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

  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;
      margin-bottom: 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;
      padding-top: 0;
  }

  /* 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: pointer;
  }

  /* 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: #e84c0e;
      background-color: #eeeeee;
  }

  /* ── Home nav item: show as standalone icon above the menu (replaces old hardcoded offcanvas-home-icon) ── */
  header .region-nav-main-mainland .menu-level-0 > .menu-item:first-child {
      display: block;
      border-bottom: none;   /* no separator line for the home icon */
      width: auto;
  }

  header .region-nav-main-mainland .menu-level-0 > .menu-item:first-child > a {
      display: inline-block;
      width: 26px;
      height: 24px;
      margin-bottom: 16px;
      padding: 0;
      font-size: 0;
      line-height: 0;
      overflow: hidden;
      color: transparent;
      background: none !important;
      -webkit-text-fill-color: initial !important;
  }

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

} /* 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;
  }

  body.is-mainland-page .navbar-brand {
      padding: 4px 0;
  }

  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: 1.125rem;
      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: 22px;
      background-image: url('../image/icon/home.svg');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
  }


  /* 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 so the panel
         occupies space for layout. Opacity is animated on .megamenu-inner.
         pointer-events:none prevents the invisible panel from blocking clicks.
         transition delay keeps visibility:hidden until the child fade-out ends. */
      display: block;
      visibility: hidden;
      pointer-events: none;
  }

  /* 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: -50px;
      left: 0;
      right: 0;
      height: 50px;
      background: #fff;
  }

  /* Show on hover / keyboard focus — reveal container immediately, fade in child */
  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 {
      visibility: visible;
      pointer-events: auto;
      transition: visibility 0s; /* show immediately — no delay */
  }

  header .region-nav-main-mainland .menu-level-0 > .menu-item:hover        > .menu-dropdown-0 .megamenu-inner,
  header .region-nav-main-mainland .menu-level-0 > .menu-item:focus-within > .menu-dropdown-0 .megamenu-inner {
      opacity: 1;
      transition: opacity 0.25s ease-in-out; /* animate only when showing */
  }


  /* 4. Megamenu inner layout (flex: image | content)
     ------------------------------------------------------------------ */
  header .region-nav-main-mainland .megamenu-panel .megamenu-inner {
      /* Fade-in target: starts invisible; transition only on hover rule (show only) */
      opacity: 0;
      visibility: visible; /* override inherited visibility:hidden from parent */
      transition: none; /* hide is instant */

      display: flex;
      align-items: stretch;
      padding: 0 20px 50px 20px;

      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 0, 100% 0, 100% 90%, 0 98%);
      aspect-ratio: 4 / 3;
      min-height: 300px;
      margin: 10px 0;
  }

  /* 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: 10px;
      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: #000;
      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) */

/* Social icons block is already shown in the utility bar — hide the duplicate
   that gets rendered via the nav_main_mainland region (appears before search). */
.region-nav-main-mainland #block-socialiconsmainland-header {
    display: none !important;
}




#block-sidebarapplynow-mainland {
    position: fixed;
    z-index: 1000;
    top: 160px;
    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.apply-now-btn {
    display: block;
    width: 65px;
    height: 80px;
    font-size: 0;
    background: url(../image/icon/apply_now_btn-square-mainland.svg) center right no-repeat;
}


/* ==========================================================================
   HEADER REDESIGN — white, sticky, 3-row layout (utility + branding + nav)
   ========================================================================== */

/* ── Fix sticky container: Bootstrap h-100 caps parent height to viewport,
      which breaks position:sticky beyond that height. Force auto height so
      the wrapper grows with content and sticky works the entire page.       */
body.is-mainland-page .dialog-off-canvas-main-canvas {
    height: auto !important;
}

/* ── Override global header (custom.css): fixed + transparent → sticky+white */
body.is-mainland-page header {
    position: sticky !important;
    top: 0;
    background: #fff !important;
    background-image: none !important;
    height: auto !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 200;
}

/* Suppress the scroll-driven white-fade pseudo-element from the global theme */
body.is-mainland-page header::after {
    display: none !important;
}

/* sticky-menu-fixed JS class must not collapse the mainland header height    */
body.is-mainland-page.sticky-menu-fixed header {
    height: auto !important;
}

/* Remove top padding that was reserved for the gradient stripe on the navbar */
body.is-mainland-page header nav.navbar {
    margin-top: 6px;
    padding: 0;
    height: auto;
}


/* ── Utility bar (same row as logo, right-aligned) ────────────────────── */

.mainland-utility-bar {
    display: none; /* hidden on mobile, shown at desktop via media query */
    align-items: center;
    margin-left: auto;  /* push to right within the flex row */
}

.mainland-utility-bar__inner {
    display: flex;
    align-items: center;
}

.mainland-utility-bar__links {
    display: flex;
    align-items: center;
}

.mainland-utility-bar__link {
    font-size: 18px;
    color: #000 !important;
    text-decoration: none;
    padding: 0 12px;
    white-space: nowrap;
    line-height: 1;
}

.mainland-utility-bar__link:first-child {
    padding-left: 0;
}

.mainland-utility-bar__link:hover {
    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;
}

.mainland-utility-bar__separator {
    width: 1px;
    height: 50px;
    background-color: #CACACA;
    margin: 0 12px;
    flex-shrink: 0;
}

.mainland-utility-bar__social {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 10px 0;
    gap: 16px;
}

.mainland-utility-bar__social li {
    list-style: none;
}

.mainland-utility-bar__social a {
    display: inline-flex;
    align-items: center;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.mainland-utility-bar__social a:hover {
    opacity: 1;
}

.mainland-utility-bar__social img {
    width: 30px;
    height: 30px;
    display: block;
}

/* ── Social media icons block (.social-media-icons) in the utility bar ─── */
.mainland-utility-bar .social-media-icons {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 10px 0 10px 12px;
    gap: 16px;
}

.mainland-utility-bar .social-media-icons li {
    list-style: none;
    height: 30px;
}

.mainland-utility-bar .social-media-icons a {
    display: inline-flex;
    align-items: center;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.mainland-utility-bar .social-media-icons a:hover {
    opacity: 1;
}

/* Icon spans — image paths declared in CSS, not in block HTML */
.mainland-utility-bar .social-media-icons .social-icon {
    display: block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.mainland-utility-bar .social-media-icons .social-icon--rednote {
    background-image: url('../image/icon/rednote.svg');
}

.mainland-utility-bar .social-media-icons .social-icon--weibo {
    background-image: url('../image/icon/weibo-new.svg');
}

.mainland-utility-bar .social-media-icons .social-icon--wechat {
    background-image: url('../image/icon/wechat.svg');
}

.mainland-utility-bar .social-media-icons .social-icon--bilibili {
    background-image: url('../image/icon/bilibili.svg');
}


/* ── Mainland nav label (中国内地本科招生网) — hidden on mobile ────────── */
.mainland-nav-label {
    display: none;
}

/* ── Mobile/tablet: site title row below logo (flex item, wraps below logo+toggler) ── */
.mainland-header-subtitle {
    flex: 0 0 100%;
    order: 10;
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-top: 16px;
    line-height: 1.2;
}

/* Inline search icon — hidden on mobile (offcanvas has its own) */
.mainland-nav-search {
    display: none;
}


/* ── Mobile/tablet: allow flex-wrap so the subtitle can sit below the logo ── */
@media (max-width: 1199.98px) {
    body.is-mainland-page header nav.navbar > .container-xxl {
        flex-wrap: wrap;
        align-content: flex-start;
        padding-top: 14px;
        padding-bottom: 16px;
    }
}

/* ── Mobile: utility bar hidden (already display:none by default) ────────── */


/* ── Desktop (≥ 1200 px): 3-row header layout ─────────────────────────── */
@media (min-width: 1200px) {

    /* Allow branding row and nav row to stack                               */
    body.is-mainland-page header nav.navbar > .container-xxl {
        flex-wrap: wrap;
        align-items: center;
        padding-top: 16px;
        padding-bottom: 10px;
    }

    /* Row 1 — branding: grows to fill left side, vertically centred         */
    body.is-mainland-page header nav.navbar > .container-xxl > .region-nav-branding {
        flex: 1 1 auto;
    }

    /* Row 1 — utility bar: sits right of logo, shrinks to its content       */
    body.is-mainland-page .mainland-utility-bar {
        display: flex;
        flex: 0 0 auto;
    }

    /* Row 2 — nav: full width, own line                                     */
    body.is-mainland-page header nav.navbar > .container-xxl > .offcanvas {
        flex: 0 0 100%;
        overflow: visible;
        min-width: 0;
        margin-top: 12px;
    }

    body.is-mainland-page header .offcanvas-body {
        padding: 12px 0;
        align-items: center;
    }

    /* Mainland nav label (中国内地本科招生网) sits left of the nav links    */
    .mainland-nav-label {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        font-size: 20px;
        font-weight: 700;
        color: #000;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
    }

    /* Nav links pushed to the right                                         */
    body.is-mainland-page header .offcanvas-body > .region-nav-main-mainland {
        flex: 1 1 auto;
        justify-content: flex-end;
    }

    /* Hide the original headerrighticonmainland block entirely              */
    body.is-mainland-page header #block-admission-theme-headerrighticonmainland {
        display: none !important;
    }

    /* Inline search icon next to nav                                        */
    .mainland-nav-search {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        padding: 8px 0 8px 12px;
        opacity: 0.75;
        transition: opacity 0.15s ease;
    }

    .mainland-nav-search:hover {
        opacity: 1;
    }

    .mainland-nav-search img {
        width: 22px;
        height: 22px;
        display: block;
    }

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


/* ==========================================================================
   Mobile offcanvas enhancements — mainland
   ========================================================================== */

@media (max-width: 1199.98px) {

    /* ── Close button: larger and shifted down ── */
    body.is-mainland-page .offcanvas-header {
        padding: 36px 20px;
    }

    body.is-mainland-page .offcanvas-header .btn-close {
        width: 1.75em;
        height: 1.75em;
        background-size: 1.25em auto;
    }

    /* ── Utility tools below main nav — horizontal row like desktop ── */
    .offcanvas-utility-mainland {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 0;
        margin-top: 30px;
    }

    .offcanvas-utility-mainland__link {
        display: inline-flex;
        align-items: center;
        font-size: 16px;
        color: #000 !important;
        text-decoration: none;
        padding: 0 12px;
        white-space: nowrap;
        line-height: 1;
        height: 50px;
    }

    .offcanvas-utility-mainland__link:first-child {
        padding-left: 0;
    }

    .offcanvas-utility-mainland__link:hover {
        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;
    }

    .offcanvas-utility-mainland__separator {
        width: 1px;
        height: 50px;
        background-color: #CACACA;
        margin: 0 12px;
        flex-shrink: 0;
    }

    .offcanvas-utility-mainland .social-media-icons {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 10px 0 10px 12px;
        gap: 16px;
        align-items: center;
    }

    .offcanvas-utility-mainland .social-media-icons li {
        list-style: none;
        height: 30px;
    }

    .offcanvas-utility-mainland .social-media-icons a {
        display: inline-flex;
        align-items: center;
        opacity: 0.8;
        transition: opacity 0.15s ease;
    }

    .offcanvas-utility-mainland .social-media-icons a:hover {
        opacity: 1;
    }

    .offcanvas-utility-mainland .social-media-icons .social-icon {
        display: block;
        width: 30px;
        height: 30px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .offcanvas-utility-mainland .social-media-icons .social-icon--rednote {
        background-image: url('../image/icon/rednote.svg');
    }

    .offcanvas-utility-mainland .social-media-icons .social-icon--weibo {
        background-image: url('../image/icon/weibo-new.svg');
    }

    .offcanvas-utility-mainland .social-media-icons .social-icon--wechat {
        background-image: url('../image/icon/wechat.svg');
    }

    .offcanvas-utility-mainland .social-media-icons .social-icon--bilibili {
        background-image: url('../image/icon/bilibili.svg');
    }

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