/**
 * @file
 * iDestination Theme - Splash design adapted for Bootstrap Barrio / Drupal 11.
 */

/* ==========================================================================
   Font-face
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');

@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/bf9f5d50c1b928ff21436517a1a95ad9.eot');
  src: url('../fonts/bf9f5d50c1b928ff21436517a1a95ad9.eot?#iefix') format('embedded-opentype'),
       url('../fonts/bf9f5d50c1b928ff21436517a1a95ad9.woff2') format('woff2'),
       url('../fonts/bf9f5d50c1b928ff21436517a1a95ad9.woff') format('woff'),
       url('../fonts/bf9f5d50c1b928ff21436517a1a95ad9.ttf') format('truetype'),
       url('../fonts/bf9f5d50c1b928ff21436517a1a95ad9.svg') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Base / Typography
   ========================================================================== */

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
  color: #666666;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  color: #2D3237;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

a {
  color: #cd2832;
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover,
a:focus {
  color: #cd2832;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

p {
  margin: 0 0 15px;
}

hr {
  border: none;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 30px;
  margin-bottom: 60px;
}

/* ==========================================================================
   Top Header - Red bar (matches D7 Splash header-color style)
   ========================================================================== */

.top-header {
  background: #cd2832;
  border-bottom: 0;
  line-height: 35px;
  font-size: 11px;
  color: #fff;
  padding: 0;
  /* Stack above the sticky #section-header (z-index 1030) so the user
     dropdown (Change password / Logout) isn't hidden behind it. Must be
     strictly greater — an equal z-index lets the later-in-DOM header win. */
  position: relative;
  z-index: 1040;
}

.top-header a,
.top-header .nav-link {
  color: #fff !important;
  font-size: 11px;
}

.top-header a:hover,
.top-header .nav-link:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}

.top-header i {
  color: #fff;
}

.top-header .hotline {
  font-size: 11px;
}

.top-header .hotline address {
  margin-bottom: 0;
}

.top-header .hotline address span {
  display: inline-block;
  line-height: 36px;
}

.top-header .menu--account .nav {
  justify-content: flex-end;
}

.top-header .menu--account .nav-item {
  border-right: none;
}

.top-header .menu--account .nav-link {
  padding: 0 10px;
  line-height: 35px;
}

.top-header .block {
  margin-bottom: 0;
}

/* Logged-in top header: white background, dark text (matches D7 Splash) */
.top-header.top-header--logged-in {
  background: #fff;
  border-bottom: 1px solid #eceef0;
  color: #666;
}

.top-header.top-header--logged-in a,
.top-header.top-header--logged-in .nav-link {
  color: #666 !important;
  font-size: 11px;
}

.top-header.top-header--logged-in a:hover,
.top-header.top-header--logged-in .nav-link:hover {
  color: #cd2832 !important;
}

.top-header.top-header--logged-in i {
  color: #cd2832;
}

.top-header.top-header--logged-in .nav {
  justify-content: flex-end;
}

.top-header.top-header--logged-in .nav-item {
  border-right: 1px solid #eceef0;
  padding: 0;
}

.top-header.top-header--logged-in .nav-item:last-child {
  border-right: none;
}

.top-header.top-header--logged-in .nav-link {
  padding: 0 12px !important;
  line-height: 35px;
}

.top-header__greeting {
  font-size: 11px;
  color: #666;
  white-space: nowrap;
  margin-right: 10px;
  line-height: 35px;
}

.top-header__greeting i {
  color: #cd2832;
  margin-right: 4px;
  font-size: 14px;
}

/* Messages link in the top bar. */
.top-header__link {
  font-size: 11px;
  white-space: nowrap;
  margin-right: 16px;
  line-height: 35px;
  text-decoration: none;
}
.top-header__link i {
  color: #cd2832;
  margin-right: 4px;
  font-size: 13px;
}

/* User greeting dropdown (Change password / Logout). */
.top-header__user {
  margin-right: 0;
}
.top-header__user .top-header__greeting.dropdown-toggle {
  display: inline-block;
  margin-right: 0;
  cursor: pointer;
  text-decoration: none;
}
.top-header__user .dropdown-menu {
  min-width: 170px;
  margin-top: 2px;
  padding: 4px 0;
  border: 1px solid #eaeaea;
  border-radius: 3px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
.top-header__user .dropdown-item {
  padding: 7px 16px;
  font-size: 12px;
  line-height: 1.4;
}
.top-header__user .dropdown-item:hover,
.top-header__user .dropdown-item:focus {
  background: #f7f7f7;
  color: #cd2832 !important;
}

.top-header.top-header--logged-in .region {
  margin: 0;
  display: flex;
  align-items: center;
}

.top-header.top-header--logged-in .block {
  margin: 0;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

#section-header {
  background: #fff;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: all 0.3s linear;
  border-bottom: 1px solid #eee;
}

#section-header .site-branding {
  display: flex;
  align-items: center;
  height: 80px;
}

#section-header .site-branding .site-logo,
#section-header .site-branding .navbar-brand {
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0;
  margin: 0;
  font-size: 0;
  color: transparent;
}

#section-header .site-branding .site-logo img,
#section-header .site-branding .navbar-brand img {
  max-height: 45px;
  width: auto;
  display: block;
}

#section-header .site-branding .site-name a {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2D3237;
  text-decoration: none;
}

/* Scrolled / fixed state */
#section-header.header--scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
}

#section-header.header--scrolled .site-branding,
#section-header.header--scrolled .site-branding .site-logo,
#section-header.header--scrolled .site-branding .navbar-brand {
  height: 55px;
}

#section-header.header--scrolled #navbar-main .navbar-nav .nav-link {
  /* line-height: 55px; */
}

#section-header.header--scrolled .header-search .search-toggle {
  line-height: 55px;
}

/* Page-title section hidden site-wide. The page title block is disabled, so
   this strip only held the (now unwanted) title/breadcrumb area. */
#section-page-title {
  display: none;
}

/* Navigation */
#navbar-main {
  padding: 0;
  height: 80px;
  display: flex;
  align-items: center;
}

#navbar-main .navbar-nav {
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  height: 80px;
}

#navbar-main .navbar-nav .nav-item {
  height: 80px;
  /* display: flex; */
  align-items: center;
}

#navbar-main .navbar-nav .nav-link {
  color: #000;
  font-weight: 400;
  font-size: 14px;
  text-transform: capitalize;
  padding: 0 17px;
  line-height: 80px;
  position: relative;
  transition: line-height 0.3s linear, color 0.2s ease;
  white-space: nowrap;
}

#navbar-main .navbar-nav .nav-link:after {
  content: "";
  width: 0;
  height: 2px;
  background: #cd2832;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  transition: width 0.3s linear;
}

#navbar-main .navbar-nav .nav-link:hover,
#navbar-main .navbar-nav .nav-link.active,
#navbar-main .navbar-nav .nav-link.is-active {
  color: #cd2832;
}

#navbar-main .navbar-nav .nav-link:hover:after {
  width: 16px;
}

#navbar-main .navbar-nav .nav-link.is-active:after {
  width: 16px;
}

#navbar-main .navbar-nav .dropdown-menu {
  background: #fff;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  border-radius: 0;
  padding: 0;
  margin-top: 0;
}

/* Desktop dropdown caret fix */
@media (min-width: 1200px) {
  #navbar-main .navbar-nav .dropdown-toggle::after {
    display: none;
  }

  /* Parent must be positioned for submenu anchor */
  #navbar-main .navbar-nav .dropdown,
  #navbar-main .navbar-nav .nav-item.dropdown {
    position: relative;
  }

  /* Hide dropdown by default, anchor to bottom-left of parent */
  #navbar-main .navbar-nav .dropdown > .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    bottom: auto;
    transform: none !important;
    margin: 0 !important;
    inset: auto !important;
    min-width: 200px;
    z-index: 1001;
  }

  /* Show on hover (via JS-added class) */
  #navbar-main .navbar-nav .dropdown.is-hovered > .dropdown-menu {
    display: block;
  }

  #navbar-main .navbar-nav .dropdown-menu .dropdown-item {
    line-height: 40px;
    padding: 0 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: block;
    white-space: nowrap;
  }

  #navbar-main .navbar-nav .dropdown-menu .dropdown-item:last-child {
    border-bottom: none;
  }
}

#navbar-main .navbar-nav .dropdown-menu .dropdown-item {
  line-height: 40px;
  padding: 0 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 13px;
  color: #000;
}

#navbar-main .navbar-nav .dropdown-menu .dropdown-item:hover,
#navbar-main .navbar-nav .dropdown-menu .dropdown-item.active {
  color: #cd2832;
  background: transparent;
}

/* Search in header */
.header-search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 80px;
}

.header-search .search-toggle {
  display: flex;
  align-items: center;
  height: 80px;
  cursor: pointer;
  color: #999;
  font-size: 16px;
  background: none;
  border: none;
}

.header-search .search-toggle:hover {
  color: #cd2832;
}

.header-search .region-search {
  width: 100%;
}

.header-search .block-search {
  margin-bottom: 0;
}

.header-search .search-form {
  display: flex;
  align-items: center;
  margin: 0;
  flex-wrap: nowrap;
}

.header-search .search-form .form-type-search {
  margin-bottom: 0 !important;
  flex: 1;
}

.header-search .search-form .form-search {
  border: none;
  border-bottom: 1px solid #e5e5e5;
  border-radius: 0;
  padding: 5px 0;
  font-size: 12px;
  height: auto;
  line-height: 20px;
  background: transparent;
  width: 100%;
}

.header-search .search-form .form-search:focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: #cd2832;
}

.header-search .search-form .form-actions {
  margin-bottom: 0 !important;
}

.header-search .search-form .form-submit {
  padding: 5px 10px;
  font-size: 0;
  background: transparent;
  border: none;
  color: #999;
  position: relative;
}

.header-search .search-form .form-submit:before {
  content: "\f002";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  color: #999;
  display: block;
  background: none;
  height: auto;
  position: static;
}

.header-search .search-form .form-submit:hover:before {
  color: #cd2832;
  height: auto;
}

/* Hide duplicate narrow search */
#block-idestination-theme-search-form-narrow {
  display: none;
}

/* Dropdown menu fixes */
#navbar-main .navbar-nav .dropdown-toggle::after {
  display: none;
}

#navbar-main .navbar-nav .dropdown-menu {
  margin-top: 0;
  border-top: 2px solid #cd2832;
}

/* Fix Bootstrap Barrio region overrides */
.region {
  margin: 0;
}

#navbar-main .region-navigation {
  width: 100%;
  margin: 0;
  display: flex;
}

#navbar-main .region-navigation .block {
  width: 100%;
  margin: 0;
}

#navbar-main .region-navigation .block .navbar-nav {
  width: 100%;
}

/* Search region in header */
.header-search .region-search {
  margin: 0;
}

.header-search .region-search .block {
  margin: 0;
}

/* Fix page title size in content */
.block-page-title-block .title {
  font-size: 22px;
  font-weight: 600;
  color: #2D3237;
  margin-bottom: 20px;
}

/* ==========================================================================
   Banner / Slider
   ========================================================================== */

.banner-region {
  position: relative;
  overflow: hidden;
}

.banner-region .slick-slide img {
  width: 100%;
  height: auto;
}

.banner-region .slick-dots {
  bottom: 15px;
}

.banner-region .slick-dots li button:before {
  font-size: 12px;
  color: #fff;
}

/* Page title region */
.page-title-region .region-pagetitle {
  text-align: right;
  padding-top: 60px;
}

.page-title-region .region-pagetitle h1 {
  font-size: 25px;
  text-transform: uppercase;
  padding-right: 13px;
}

/* ==========================================================================
   Content Areas
   ========================================================================== */

.main-wrapper {
  padding: 40px 0;
  min-height: 60vh;
}

/* Hide empty regions */
.breadcrumb-region:empty,
.highlighted:empty,
.highlighted:has(> .container:only-child > [data-drupal-messages-fallback].hidden:only-child) {
  display: none;
  padding: 0;
}

.breadcrumb-region {
  background: #f6f6f6;
  padding: 10px 0;
  border-bottom: 1px solid #e9ecef;
}

.breadcrumb-region .breadcrumb {
  margin-bottom: 0;
  background: transparent;
  padding: 0;
  color: #ccc;
}

.breadcrumb-region .breadcrumb a {
  color: #ccc;
  font-family: 'Proxima Nova', Georgia, 'Times New Roman', Times, serif;
  font-style: italic;
  padding: 0 5px;
}

.breadcrumb-region .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: '>';
  color: #ccc;
}

.highlighted {
  padding: 0;
  background: transparent;
}

.highlighted:has(.messages) {
  padding: 10px 0;
  background: transparent;
}

/* ===== Compact D7-style status / warning / error messages ===== */
.messages-list {
  margin: 0;
}

.messages {
  position: relative;
  margin: 0 0 6px;
  padding: 12px 18px 12px 46px;
  font-size: 14px;
  line-height: 1.45;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: 3px;
}

.messages:last-child {
  margin-bottom: 0;
}

/* Small status icon */
.messages::before {
  position: absolute;
  left: 16px;
  top: 11px;
  width: 20px;
  height: 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
}

.messages__list {
  margin: 0;
  padding-left: 18px;
}

.messages__item {
  margin: 0;
}

.messages--status {
  background: #f3faef;
  border-color: #c9e1b9;
  border-left-color: #77b259;
  color: #325e1c;
}

.messages--status::before {
  content: "\2713"; /* check */
  background: #77b259;
}

.messages--warning {
  background: #fdf8ed;
  border-color: #f0e0b6;
  border-left-color: #e09600;
  color: #734c00;
}

.messages--warning::before {
  content: "!";
  background: #e09600;
}

.messages--error {
  background: #fcf4f2;
  border-color: #f0c9c1;
  border-left-color: #e62600;
  color: #a51b00;
}

.messages--error::before {
  content: "\00d7"; /* x */
  background: #e62600;
}

/* Keep message links readable on the tinted background */
.messages a {
  text-decoration: underline;
}

.featured-region {
  padding: 40px 0;
  background: #f6f6f6;
}

/* Node styles */
.node {
  margin-bottom: 2rem;
}

.node__title a {
  color: #2D3237;
}

.node__title a:hover {
  color: #cd2832;
}

.node__meta {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: #6c757d;
}

.node__meta .field--name-uid,
.node__meta .field--name-created {
  margin-right: 1rem;
}

.node__meta i {
  margin-right: 0.25rem;
}

.node__content {
  margin-bottom: 1.5rem;
}

/* Block titles (Splash pattern) */
.block-title,
.block__title {
  position: relative;
  text-transform: uppercase;
  font-size: 25px;
  font-weight: 300;
  color: #2D3237;
}

.block-subtitle {
  padding-bottom: 30px;
  color: #666666;
}

.title-center {
  text-align: center;
}

.title-center .block-title:after,
.title-center .block__title:after {
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  background: #cd2832;
  margin: 15px auto 0;
}

/* ==========================================================================
   Sidebar & Blocks
   ========================================================================== */

.sidebar .block {
  margin-bottom: 2rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 3px;
}

.sidebar .block .block__title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #cd2832;
}

.sidebar .block .block__title:after {
  display: none;
}

/* ==========================================================================
   Events
   ========================================================================== */

.node-event .event-type-badge {
  margin-bottom: 1rem;
}

.node-event .event-gallery {
  margin-top: 2rem;
}

.node-event .event-gallery h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.node-event .event-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  margin-bottom: 1rem;
}

.node-event .event-gallery-item img {
  transition: transform 0.3s ease;
}

.node-event .event-gallery-item:hover img {
  transform: scale(1.05);
}

.node-event .event-gallery-item .gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #fff;
  font-size: 1.5rem;
}

.node-event .event-gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.node-event .event-videos {
  margin-top: 2rem;
}

.node-event .event-videos h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.node-event .event-videos video {
  border-radius: 3px;
  background: #000;
}

/* ==========================================================================
   Buttons & Forms
   ========================================================================== */

.btn,
.btn-submit,
.btn-primary,
.form-submit {
  background: #cd2832;
  border: none;
  border-radius: 3px;
  box-shadow: none;
  color: #fff !important;
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 14px 20px 13px;
  position: relative;
  text-shadow: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.btn:before,
.btn-submit:before,
.btn-primary:before,
.form-submit:before {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  content: "";
  display: block;
  height: 0;
  left: 0;
  position: absolute;
  top: 0;
  transition: height 0.15s ease-out;
  width: 100%;
}

.btn:hover:before,
.btn-submit:hover:before,
.btn-primary:hover:before,
.form-submit:hover:before {
  height: 100%;
}

.btn:hover,
.btn-submit:hover,
.btn-primary:hover,
.form-submit:hover {
  color: #2D3237 !important;
}

.btn-large {
  padding: 18px 24px;
}

.btn-white {
  background: rgba(255, 255, 255, 0.5);
  color: #2D3237 !important;
}

.btn-white:hover,
.btn-white:focus,
.btn-white:active {
  background: #f0f0f0 !important;
}

/* Form elements (Splash style) */
select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"] {
  background: transparent;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  box-shadow: none;
  color: #999;
  font-size: 14px;
  line-height: 25px;
  padding: 10px;
  transition: all 0.3s ease;
  width: 100%;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
  border-color: #ccc;
  background: none;
  box-shadow: none;
  outline: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: #282828;
  color: #ccc;
  margin-top: 0;
  padding-bottom: 0;
}

.site-footer a {
  color: #aaa;
}

.site-footer a:hover {
  color: #fff;
}

.site-footer .footer-top {
  background: #282828;
  padding: 22px 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer .footer-top .block__title,
.site-footer .footer-top h2 {
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.2rem;
  padding-bottom: 0.75rem;
  padding-top: 15px;
}

.site-footer .footer-top .block__title:after,
.site-footer .footer-top h2:after {
  display: none;
}

.site-footer .footer-menu {
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer .footer-menu .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.site-footer .footer-menu .menu li {
  margin: 0 15px;
}

/* Copyright bar */
.site-footer .footer-bottom {
  background: #000000;
  padding: 15px 0;
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-top: 30px;
}

.site-footer .footer-bottom a {
  color: #cd2832;
  text-decoration: underline;
}

.site-footer .footer-bottom a:hover {
  color: #fff;
}

.site-footer .footer-bottom .block {
  margin-bottom: 0;
}

.site-footer .footer-bottom .region {
  margin: 0;
}

.site-footer .footer-bottom .block-system-powered-by-block {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

.site-footer .footer-bottom .block-system-powered-by-block .block__content {
  background: transparent;
}

.site-footer .footer-bottom .block-system-powered-by-block span {
  color: #999;
  font-size: 12px;
}

/* Bottom bar with search/login */
.site-footer .footer-bottom-bar {
  background: #111;
  padding: 15px 0;
  border-top: 1px solid #222;
}

/* Social icons (Splash style) */
.social {
  padding: 0;
  margin: 0;
  list-style: none;
}

.social li {
  display: inline-block;
  margin-right: 5px;
}

.social li a i {
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  color: #aaa;
  border: 1px solid #000;
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  border-radius: 3px;
  transition: all 200ms ease-in;
}

/* ==========================================================================
   Admin Toolbar Adjustments
   ========================================================================== */

body.toolbar-fixed #section-header {
  position: relative;
  top: auto;
}

body.toolbar-fixed .top-header {
  position: relative;
}

body.toolbar-horizontal.toolbar-tray-open #section-header {
  position: relative;
  top: auto;
}

/* D7 Splash section spacing */
.section-feature,
.section-user,
.section-client {
  padding: 40px 0;
}

.section-parallax {
  padding: 60px 0;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

#section-page-title {
  padding: 10px 0;
}

#section-page-title .region-pagetitle {
  text-align: right;
  padding-top: 15px;
}

#section-page-title .region-pagetitle h1 {
  font-size: 25px;
  text-transform: uppercase;
}

/* D7 Splash grid items */
.dexp-grid-items .dexp-grid-item {
  margin-bottom: 30px;
}

/* D7 Splash dark wrapper */
.dark-wrapper {
  background-color: #f5f5f5;
}

.bg-gray {
  background-color: #f6f6f6;
}

/* D7 Splash color wrapper */
.color-wrapper {
  background-color: #cd2832;
  color: #fff;
  padding: 40px 0;
}

.color-wrapper h1,
.color-wrapper h2,
.color-wrapper h3,
.color-wrapper h4 {
  color: #fff;
}

/* D7 Splash portfolio styles */
.portfolio-image figure {
  position: relative;
  overflow: hidden;
  margin: 0;
}

.portfolio-image figure a .text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-image figure:hover a .text-overlay {
  opacity: 1;
}

.portfolio-image figure a .text-overlay .info {
  text-align: center;
  color: #fff;
}

/* D7 Splash timeline styles */
.timeline-item {
  position: relative;
  padding-left: 30px;
  margin-bottom: 30px;
}

/* D7 Splash separator */
.sep60 {
  height: 60px;
  width: 100%;
}

.l-pad30 {
  padding-left: 30px;
}

.t-pad40 {
  padding-top: 40px;
}

/* Hide admin toolbar contextual links styling bleed */
.contextual-region .contextual {
  z-index: 999;
}

/* The "iDestination Admin Menu" toolbar item is a <nolink> parent, so it
   renders as a <span>. Core's toolbar line-height (which keeps items the same
   height) is scoped to <a>/<button>, so on the front end the <span> inherits
   the theme's larger body line-height and its tab grows taller than the sibling
   items. Normalise it so all toolbar items match in height. */
.toolbar .toolbar-menu span.toolbar-icon {
  line-height: 1;
}

/* ==========================================================================
   Back to Top Button
   ========================================================================== */

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #cd2832;
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1050;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.back-to-top:hover {
  background: #a81f28;
  transform: translateY(-2px);
}

/* ==========================================================================
   Login Page (D7 Splash style)
   ========================================================================== */

.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* Banner */
.login-banner {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.login-banner__image {
  width: 100%;
  height: auto;
  display: block;
}

/* Form wrapper */
.login-form-wrapper {
  flex: 1;
  padding: 40px 0 60px;
}

/* Login tabs */
.login-tabs {
  margin-bottom: 25px;
  padding-bottom: 10px;
}

/* Specificity raised + !important to beat the global red link color on the
   login page, so the active tab reads clearly (brand red + bold + underline)
   against the muted grey of inactive tabs. */
.login-page .login-tabs .login-tabs__tab {
  font-size: 13px;
  color: #999 !important;
  text-decoration: none;
  margin-right: 20px;
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.login-page .login-tabs .login-tabs__tab:hover {
  color: #cd2832 !important;
}

.login-page .login-tabs .login-tabs__tab--active {
  color: #cd2832 !important;
  font-weight: 600;
  border-bottom-color: #cd2832;
}

/* Login form styling */
.login-form-content .form-item {
  margin-bottom: 15px;
}

/* Field labels shown above inputs (match D7 production login) */
.login-page .login-form-content label,
.login-page .user-login-form label,
.login-page .form-item label,
.login-page label.form-required,
.login-page label.js-form-required {
  display: block !important;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin-bottom: 6px;
}

/* Required asterisk in brand red */
.login-page .form-required::after,
.login-page label.js-form-required::after {
  color: #cd2832;
}

/* Description/help text under fields */
.login-form-content .form-item .description,
.login-form-content .form-item .form-item__description {
  font-size: 11px;
  color: #999;
  margin-top: 5px;
  font-style: italic;
}

/* The login form + its items must stay 100% of their column, never expand to
   the size="60" inputs' intrinsic width (which overflowed small screens). */
.login-form-content .user-login-form,
.login-form-content .js-form-item,
.login-form-content .form-item {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.login-form-content .form-text,
.login-form-content .form-email,
.login-form-content input[type="text"],
.login-form-content input[type="password"],
.login-form-content input[type="email"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 10px 12px;
  font-size: 13px;
  color: #333;
  outline: none;
  box-shadow: none;
  transition: border-color 0.3s ease;
}

.login-form-content input[type="text"]:focus,
.login-form-content input[type="password"]:focus,
.login-form-content input[type="email"]:focus {
  border-color: #cd2832;
}

.login-form-content input::placeholder {
  color: #bbb;
  font-size: 13px;
}

.login-form-content .description {
  font-size: 11px;
  color: #999;
  margin-top: 5px;
  line-height: 1.4;
}

.login-form-content .form-actions {
  margin-top: 20px;
}

.login-form-content .form-submit,
.login-form-content .button {
  background: #cd2832;
  color: #fff !important;
  border: none;
  border-radius: 3px;
  padding: 10px 30px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.login-form-content .form-submit:hover,
.login-form-content .button:hover {
  background: #a81f28;
}

/* Hide elements not needed on login page */
.login-page .block-page-title-block,
.login-page .block-local-tasks-block,
.login-page .block-system-local-tasks-block,
.login-page .tabs,
.login-page .feed-icons,
.login-form-content .block-page-title-block,
.login-form-content h1.title,
.login-form-content .block-local-tasks-block,
.login-form-content nav.tabs {
  display: none;
}

/* Login form button - not full width */
.login-form-content .form-submit,
.login-form-content .button,
.login-form-content .btn {
  width: auto !important;
  display: inline-block !important;
  padding: 10px 30px;
}

/* Fix Bootstrap .form-control on submit button */
.login-form-content input[type="submit"].form-control {
  width: auto !important;
  display: inline-block !important;
}

/* Hide all local task nav tabs on login page */
.login-page nav.tabs,
.login-page .nav.primary,
.login-page .block-local-tasks-block {
  display: none !important;
}

/* Hide extra empty blocks on login page */
.login-page .block-block-content .field__item:empty {
  display: none;
}

.login-page .block-block-content:has(.field__item:empty) {
  display: none;
}

/* Login footer */
.login-footer {
  background: #000;
  color: #999;
  padding: 15px 0;
  font-size: 12px;
  margin-top: auto;
}

.login-footer a {
  color: #cd2832;
  text-decoration: underline;
}

.login-footer a:hover {
  color: #fff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Collapse the main menu to the hamburger up to xl (1199.98px): the ten
   top-level items only fit horizontally in the xl container (>=1200px), so
   below that they wrap and spill below the fixed-height header. */
@media (max-width: 1199.98px) {
  #section-header {
    box-shadow: 0 2px 4px -3px gray;
  }

  #section-header .site-branding {
    text-align: center;
    margin-bottom: 0;
  }

  #section-header .site-branding,
  #section-header .site-branding .site-logo,
  #section-header .site-branding .navbar-brand {
    height: 60px;
  }

  .header-search {
    height: auto;
    margin-bottom: 10px;
  }

  /* Mobile menu: plain block flow so items stack in a single column and the
     container grows to fit (the desktop rules set fixed 80px heights + flex
     row/end alignment that broke the collapsed menu). */
  #navbar-main .navbar-collapse .region,
  #navbar-main .navbar-collapse .block-menu,
  #navbar-main .navbar-nav,
  #navbar-main .navbar-nav .nav-item {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    float: none;
  }

  #navbar-main .navbar-nav {
    text-align: left;
  }

  #navbar-main .navbar-nav .nav-link {
    display: block;
    position: relative;
    height: auto;
    line-height: 1.4;
    padding: 13px 40px 13px 20px;
  }

  /* Keep the mobile menu collapsed until the hamburger toggles it open
     (something was forcing it to display:flex and show permanently). */
  #navbar-main .navbar-collapse:not(.show) {
    display: none !important;
  }
  #navbar-main .navbar-collapse.show {
    display: block !important;
    height: auto !important;
  }

  #navbar-main .navbar-collapse {
    background: #333;
    padding: 0;
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    z-index: 999;
  }

  /* Row separators between menu items. */
  #navbar-main .navbar-collapse .nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  #navbar-main .navbar-collapse .nav-link {
    color: #fff !important;
  }

  #navbar-main .navbar-collapse .nav-link:hover,
  #navbar-main .navbar-collapse .nav-link.active {
    color: #cd2832 !important;
  }

  /* Right chevron (>) on each item, like the D7 mobile menu. */
  #navbar-main .navbar-collapse .nav-link:after {
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    left: auto;
    bottom: auto;
    width: 7px;
    height: 7px;
    border: solid rgba(255, 255, 255, 0.55);
    border-width: 2px 2px 0 0;
    background: none;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.2s ease;
  }

  /* Rotate the chevron to point down when its sub-menu is open. */
  #navbar-main .navbar-collapse .nav-link[aria-expanded="true"]:after {
    transform: translateY(-50%) rotate(135deg);
  }

  #navbar-main .navbar-collapse .dropdown-menu {
    background: #444;
  }

  /* Sub-menu items — including <nolink> section headers (e.g. "WFH guidelines")
     which otherwise render dark and unreadable on the dark background. */
  #navbar-main .navbar-collapse .dropdown-menu .dropdown-item,
  #navbar-main .navbar-collapse .dropdown-menu a,
  #navbar-main .navbar-collapse .dropdown-menu span,
  #navbar-main .navbar-collapse .dropdown-menu .nolink {
    color: rgba(255, 255, 255, 0.9) !important;
  }
  #navbar-main .navbar-collapse .dropdown-menu a:hover,
  #navbar-main .navbar-collapse .dropdown-menu a.active {
    color: #fff !important;
  }

  /* Hamburger now lives in the logo row (flex), so no absolute positioning. */
  .navbar-toggler {
    flex: 0 0 auto;
    border: 1px solid #ccc;
    color: #666;
    padding: 6px 12px;
    position: static;
    transform: none;
  }

  .navbar-toggler .navbar-toggler-icon {
    width: 1.2em;
    height: 1.2em;
  }

  /* The nav column now only holds the absolutely-positioned dropdown, so it
     shouldn't reserve the desktop 80px height (which left a gap under the
     logo row). */
  #navbar-main {
    height: auto;
    min-height: 0;
  }

  /* Logo row holds the logo + hamburger. */
  #section-header .branding-row {
    height: 60px;
  }
}

@media (max-width: 767.98px) {
  .main-wrapper {
    padding: 20px 0;
  }

  .site-footer .footer-menu .menu {
    flex-direction: column;
    text-align: center;
  }

  .site-footer .footer-menu .menu li {
    margin: 5px 0;
  }

  .node-event .event-gallery-item {
    margin-bottom: 15px;
  }

  .login-form-wrapper {
    padding: 25px 15px 40px;
  }

  .login-form-wrapper .col-lg-5 {
    max-width: 100%;
    flex: 0 0 100%;
  }
}

/* ==========================================================================
   Masonry / Portfolio Grid (iFamily Board, Pehchaan Kaun, etc.)
   ========================================================================== */

.view-ifamily-board .view-content,
.view-pehchaan-kaun .view-content,
.view-rewards-recog .view-content,
.view-ibuzz-page .view-content,
.masonry-grid,
.masonry-columns {
  column-count: 5;
  column-gap: 4px;
  padding: 0 4px;
}

.masonry-grid-item {
  break-inside: avoid;
  margin-bottom: 4px;
  overflow: hidden;
}

.masonry-grid-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.masonry-grid-item:hover img {
  transform: scale(1.05);
  opacity: 0.85;
}

.masonry-grid-item a {
  display: block;
  line-height: 0;
}

/* Masonry item title overlay */
.masonry-grid-item .masonry-item-title {
  font-size: 11px;
  font-weight: 600;
  margin: 0;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.6);
  position: relative;
  margin-top: -30px;
  z-index: 2;
}

.masonry-grid-item .masonry-item-title a {
  color: #fff;
  text-decoration: none;
}

.masonry-grid-item .masonry-item-title a:hover {
  color: #cd2832;
}

/* ==========================================================================
   Dexp Portfolio Card Grid (D7 style - talent, awards, etc.)
   ========================================================================== */

.dexp-portfolio-grid .row {
  margin: 0 -10px;
}

.dexp-grid-item {
  padding: 0 10px;
  margin-bottom: 25px;
}

.portfolio-card {
  background: #fff;
}

.portfolio-card .portfolio-thumb {
  overflow: hidden;
  position: relative;
  margin-bottom: 0;
}

.portfolio-card .portfolio-thumb a {
  display: block;
  line-height: 0;
}

.portfolio-card .portfolio-thumb img,
.portfolio-card .views-field-field-talent-images img,
.portfolio-card .views-field-field-team-image img,
.portfolio-card .views-field-field-video-thumbnail img,
.portfolio-card .views-field-field-event-thumbnail img,
.portfolio-card .views-field-field-images-of-events img,
.portfolio-card .field-content img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.portfolio-card:hover .portfolio-thumb img,
.portfolio-card:hover .views-field-field-talent-images img,
.portfolio-card:hover .views-field-field-team-image img,
.portfolio-card:hover .field-content img {
  transform: scale(1.05);
}

.portfolio-card .views-field-field-talent-images,
.portfolio-card .views-field-field-team-image {
  overflow: hidden;
  margin-bottom: 0;
}

.portfolio-card .views-field-field-talent-images .field-content,
.portfolio-card .views-field-field-team-image .field-content {
  line-height: 0;
}

.portfolio-card .views-field-field-talent-images a,
.portfolio-card .views-field-field-team-image a {
  display: block;
  line-height: 0;
}

/* Portfolio card meta: date, author */
.portfolio-card .views-field-created,
.portfolio-card .views-field-uid {
  display: inline;
  font-size: 11px;
  color: #999;
}

.portfolio-card .views-field-created .date {
  color: #cd2832;
  font-size: 11px;
}

.portfolio-card .views-field-created:after {
  content: "  |  ";
  color: #ddd;
}

.portfolio-card .views-field-uid .author {
  font-size: 11px;
  color: #999;
}

.portfolio-card .views-field-uid label {
  font-weight: 400;
  font-size: 11px;
  color: #999;
}

.portfolio-card .post-title {
  font-size: 13px;
  font-weight: 600;
  margin: 5px 0 0;
  line-height: 1.4;
}

.portfolio-card .post-title a {
  color: #2D3237;
}

.portfolio-card .post-title a:hover {
  color: #cd2832;
}

/* Portfolio filter tabs (D7 isotope-style) */
.portfolio-filter {
  margin-bottom: 20px;
  padding: 0 4px;
  text-align: center;
}

.portfolio-filter-tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
}

.portfolio-filter-tabs li {
  margin: 0;
}

.portfolio-filter-tabs .filter-tab {
  display: inline-block;
  padding: 8px 20px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #666;
  text-decoration: none;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  background: #fff;
  transition: all 0.2s ease;
  margin-right: 5px;
  cursor: pointer;
}

.portfolio-filter-tabs .filter-tab:hover {
  color: #cd2832;
  border-color: #cd2832;
  background: #fff;
  text-decoration: none;
}

.portfolio-filter-tabs .filter-tab.active {
  background: #cd2832;
  color: #fff;
  border-color: #cd2832;
}

/* Override Bootstrap row on masonry views */
.view-ifamily-board .view-content.row,
.view-pehchaan-kaun .view-content.row,
.view-rewards-recog .view-content.row,
.view-ibuzz-page .view-content.row,
.masonry-columns.row,
.masonry-columns {
  display: block !important;
  flex-wrap: unset;
  margin: 0;
}

@media (max-width: 1199.98px) {
  .view-ifamily-board .view-content,
  .view-pehchaan-kaun .view-content,
  .masonry-grid {
    column-count: 4;
  }
}

@media (max-width: 991.98px) {
  .view-ifamily-board .view-content,
  .view-pehchaan-kaun .view-content,
  .masonry-grid {
    column-count: 3;
  }
}

@media (max-width: 575.98px) {
  .view-ifamily-board .view-content,
  .view-pehchaan-kaun .view-content,
  .masonry-grid {
    column-count: 2;
  }
}

/* ==========================================================================
   Today's Special (birthdays / anniversaries) - D7 style
   ========================================================================== */

.todays-special-container {
  padding: 40px 0;
}

.todays-special-container .ts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
}

.todays-special-container .ts-col {
  flex: 1 1 calc(50% - 20px);
  min-width: 280px;
}

.todays-special-container .ts-heading {
  font-size: 18px;
  font-weight: 600;
  color: #2D3237;
  margin-bottom: 5px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
}

.todays-special-container .ts-subtitle {
  font-size: 12px;
  color: #999;
  margin-bottom: 15px;
  font-style: italic;
}

.todays-special-container .ts-list {
  padding-top: 5px;
}

.todays-special-container .ts-person {
  display: flex;
  align-items: center;
  padding: 8px 0;
  gap: 12px;
}

.todays-special-container .ts-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.todays-special-container .ts-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.todays-special-container .ts-avatar .default-avatar {
  width: 100%;
  height: 100%;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.todays-special-container .ts-avatar .default-avatar::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #888;
  position: absolute;
  top: 8px;
}

.todays-special-container .ts-avatar .default-avatar::after {
  content: '';
  width: 30px;
  height: 16px;
  border-radius: 15px 15px 0 0;
  background: #888;
  position: absolute;
  bottom: 0;
}

.todays-special-container .ts-name {
  color: #cd2832;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.todays-special-container .ts-name:hover {
  color: #a81f28;
  text-decoration: underline;
}

.todays-special-container .ts-years {
  color: #666;
  font-size: 12px;
  margin-left: 4px;
}

.todays-special-container .no-items {
  color: #999;
  padding: 10px 0;
  font-style: italic;
  font-size: 12px;
}

@media (max-width: 767.98px) {
  .todays-special-container .ts-row {
    flex-direction: column;
    gap: 30px;
  }
}

/* ==========================================================================
   Homepage Sections
   ========================================================================== */

/* Slider section */
#section-slider {
  position: relative;
  overflow: hidden;
  /* Reserve the banner height (slides are 1600x380 ~= 23.75% of width) so the
     page does not jump when tinySlider initialises and the banner appears. */
  min-height: 23vw;
  /* background: #ececec; */
}

@media (max-width: 991px) {
  #section-slider {
    /* Match the slide's aspect ratio (~22% of width) so no empty grey space
       shows under the short mobile banner (a fixed 200px was far too tall). */
    min-height: 22vw;
  }
}

/* Show the first slide immediately; tinySlider manages the rest once ready,
   avoiding a blank/late-appearing banner on first paint. */
#section-slider .view-content > .views-row:first-child,
#section-slider .view-content > .slide-item:first-child {
  display: block;
}

#section-slider .view-homepage-banner-d11 .view-content {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

#section-slider .slide-item {
  min-width: 100%;
  scroll-snap-align: start;
}

#section-slider .slide-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Tiny-slider nav dots */
#section-slider .tns-nav {
  text-align: center;
  padding: 10px 0;
  /* position: absolute; */
  bottom: 10px;
  width: 100%;
  z-index: 10;
}

#section-slider .tns-nav button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  margin: 0 4px;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease;
}

#section-slider .tns-nav button.tns-nav-active {
  background: #cd2832;
}

/* On phones the banner is too short to overlay the dots, so drop them into
   their own row below the slider (matches the desktop dot styling). */
@media (max-width: 767.98px) {
  #section-slider .tns-nav {
    position: static;
    bottom: auto;
    padding: 12px 0;
    background: #fff;
  }
}

/* Homepage content grid */
.homepage-content-grid {
  padding: 40px 0;
}

.homepage-content-grid .dexp-grid-item {
  margin-bottom: 30px;
}

.homepage-content-grid .portfolio-image {
  margin-bottom: 10px;
}

.homepage-content-grid .portfolio-image figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 3px;
}

.homepage-content-grid .portfolio-image figure img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
  display: block;
}

.homepage-content-grid .portfolio-image figure:hover img {
  transform: scale(1.05);
}

.homepage-content-grid .portfolio-image .text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.homepage-content-grid .portfolio-image figure:hover .text-overlay {
  opacity: 1;
}

.homepage-content-grid .meta {
  line-height: 18px;
  margin: 8px 0 5px;
  font-size: 11px;
  color: #999;
}

.homepage-content-grid .meta ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 15px;
}

.homepage-content-grid .meta .date {
  color: #cd2832;
}

.homepage-content-grid .post-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.homepage-content-grid .post-title a {
  color: #2D3237;
}

.homepage-content-grid .post-title a:hover {
  color: #cd2832;
}

/* Footer sections on homepage - dark background */
#section-bottom {
  background: #1a1a1a;
}

.site-footer .footer-top .region-bottom-first,
.site-footer .footer-top .region-bottom-second {
  padding: 8px 0;
}

/* Latest news list */
.latest-news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* In the wide footer column, show the news items in two columns. */
@media (min-width: 992px) {
  .site-footer .latest-news-list {
    column-count: 2;
    column-gap: 40px;
  }
}

.latest-news-list li {
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  break-inside: avoid;
}

.latest-news-list li a {
  color: #ccc;
  font-size: 13px;
  font-weight: 600;
  display: block;
  margin-bottom: 3px;
}

.latest-news-list li a:hover {
  color: #fff;
}

.latest-news-list li .views-field-created {
  color: #cd2832;
  font-size: 11px;
}

/* Hide page title on front page */
.path-frontpage .block-page-title-block {
  display: none;
}

.path-frontpage .block-system-main-block .field--name-body {
  max-width: 100%;
}

/* Front page main content - no extra padding */
.path-frontpage #section-main-content {
  padding-top: 0;
}

/* ── iDestination home feature grid (ported D7 homepage_content view) ── */
.path-frontpage [class*="block-views-blockhomepage-content"] {
  margin: 0 0 28px;
}
@media (min-width: 768px) {
  .path-frontpage [class*="block-views-blockhomepage-content"] {
    float: left;
    width: 30.66%;
    margin: 0 1% 28px;
  }
  .path-frontpage [class*="block-views-blockhomepage-content"]:nth-of-type(3n+1) {
    clear: left;
  }
  /* contain the floated cards so the footer/regions below clear them */
  .path-frontpage .region-content::after,
  .path-frontpage #section-main-content::after {
    content: "";
    display: block;
    clear: both;
  }
}
.path-frontpage [class*="block-views-blockhomepage-content"] img {
  width: 100%;
  /* Match D7's homepage cards: fixed 366x209 (~1.75:1) "talent_and_news" ratio,
     cropped to fill so every card is uniform regardless of source image ratio. */
  aspect-ratio: 366 / 209;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}
.path-frontpage [class*="block-views-blockhomepage-content"] .post-title {
  margin-top: 10px;
  font-size: 1.05rem;
}
.path-frontpage [class*="block-views-blockhomepage-content"] .date,
.path-frontpage [class*="block-views-blockhomepage-content"] .author {
  display: inline-block;
  margin-right: 8px;
  font-style: italic;
  color: #8a8a8a;
  font-size: 0.85rem;
}

/* Align the home feature cards into a clean equal-height grid. The 7 cards are
   separate float:left blocks of uneven height (some have no image), which made
   them stagger. Grid the container (scoped to the one holding these blocks),
   hide the two empty system blocks so they don't take cells, and unfloat. */
@media (min-width: 768px) {
  .path-frontpage .col-12:has(> [class*="block-views-blockhomepage-content"]) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 24px;
    align-items: stretch;
    /* Breathing room below the banner (cards were flush against it). */
    padding-top: 45px;
  }
  .path-frontpage .col-12:has(> [class*="block-views-blockhomepage-content"]) > .block-system-main-block,
  .path-frontpage .col-12:has(> [class*="block-views-blockhomepage-content"]) > .block-page-title-block {
    display: none;
  }
  .path-frontpage [class*="block-views-blockhomepage-content"] {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
}

/* ── Fix feature-listing grids: views_bootstrap_grid columns were collapsing
   (squeezed bootstrap-row nesting). Flatten to a clean responsive CSS grid. ── */
.view .view-content > .views-view-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
  width: 100% !important;
}
.view .views-view-grid > .row {
  display: contents; /* let the column cells become direct grid items */
}
.view .views-view-grid .row > [class*="col-"] {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0;
}

/* ── Chat on Slack launcher (replaces D7 DrupalChat bottom-right widget) ── */
.slack-chat-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #cd2832;
  color: #fff !important;
  padding: 11px 18px;
  border-radius: 26px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.slack-chat-launcher:hover {
  background: #b21f29;
  color: #fff !important;
  transform: translateY(-1px);
}
.slack-chat-launcher i { font-size: 18px; line-height: 1; }
@media (max-width: 575px) {
  .slack-chat-launcher__label { display: none; }
  .slack-chat-launcher { padding: 12px; border-radius: 50%; }
}

/* ── Footer Connect (LinkedIn) column + compact Latest News ── */
.site-footer .footer-top .latest-news-list li a {
  line-height: 1.35;
  margin: 0 0 2px;
}
.site-footer .footer-social {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer .footer-social li { padding: 7px 0; }
.site-footer .footer-social a {
  color: #ccc;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-footer .footer-social a:hover { color: #fff; }
.site-footer .footer-social a i { color: #0a66c2; font-size: 18px; }

/* iBuzz month index: title and date were running together on one line. */
.view-ibuzz-page .grid a {
  display: block;
  font-weight: 600;
  margin-top: 8px;
}
.view-ibuzz-page .grid time.datetime {
  display: block;
  font-size: 12px;
  color: #999;
}

/* ===== Views CORE "grid" style (markup: .views-view-grid > .views-row >
   .views-col) — used by /deals, /news-and-updates, /rewards-and-recognition.
   The bootstrap-grid fix above forces display:grid on .views-view-grid, which
   turns each .views-row into a single grid cell and squashes its columns.
   Scope an override to core-grid markup only (it has .views-row children) and
   lay each row out as a flex of equal columns — the per-row .views-col count
   already reflects the configured columns (cols-3 => 3 cols). ===== */
.view .view-content > .views-view-grid:has(> .views-row) {
  display: block !important;
}
.views-view-grid > .views-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}
.views-view-grid > .views-row > .views-col {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 575px) {
  .views-view-grid > .views-row { flex-direction: column; }
}

/* ===== Social event RSVP buttons ===== */
.social-rsvp {
  margin: 18px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.social-rsvp .rsvp-label {
  font-weight: 600;
  color: #2D3237;
  margin-right: 4px;
}
.social-rsvp .rsvp-btns { display: inline-flex; gap: 8px; }
.rsvp-btn {
  display: inline-block;
  padding: 7px 18px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #555 !important;
  background: #fff;
  text-decoration: none;
  transition: all 0.15s ease;
}
.rsvp-btn:hover { border-color: #999; }
.rsvp-btn--yes.rsvp-btn--active   { background: #77b259; border-color: #77b259; color: #fff !important; }
.rsvp-btn--no.rsvp-btn--active    { background: #cd2832; border-color: #cd2832; color: #fff !important; }
.rsvp-btn--maybe.rsvp-btn--active { background: #e09600; border-color: #e09600; color: #fff !important; }
.social-rsvp .rsvp-current {
  font-size: 12px;
  color: #777;
  margin-left: 6px;
}

/* ===== Talent / portfolio grid (dexp): proper 3-col card grid =====
   The feature-listing fix flattens the bootstrap .row (display:contents) and
   strips the col widths, so dexp-portfolio-grid items stacked single-column.
   Make the grid container a real CSS grid; the flattened .dexp-grid-item cells
   then lay out as cards. Matches D7's filterable portfolio card grid. */
.dexp-portfolio-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 24px;
  align-items: stretch;
}
/* Beat the broad ".view .view-content > .views-view-grid" auto-fill rule so
   the portfolio listings show 3 homepage-sized columns, not 5 small ones. */
.view .view-content > .views-view-grid.dexp-portfolio-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) {
  .dexp-portfolio-grid,
  .view .view-content > .views-view-grid.dexp-portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .dexp-portfolio-grid,
  .view .view-content > .views-view-grid.dexp-portfolio-grid {
    grid-template-columns: 1fr;
  }
}
.dexp-portfolio-grid .dexp-grid-item { width: auto !important; max-width: none !important; }
.dexp-portfolio-grid .portfolio-card img {
  width: 100%;
  aspect-ratio: 366 / 209;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ===== D7-style private message inbox (Subject | Participants | Last Updated) ===== */
.pm-toolbar { margin: 6px 0 20px; }
.pm-compose-btn {
  background: #cd2832; color: #fff !important; padding: 11px 24px;
  border-radius: 4px; font-weight: 600; font-size: 13px; text-transform: uppercase;
  letter-spacing: .03em; display: inline-block; text-decoration: none; border: 0;
}
.pm-compose-btn:hover { background: #b21f29; color: #fff !important; }
.pm-inbox-table { width: 100%; border-collapse: collapse; }
.pm-inbox-table thead th {
  color: #cd2832; font-weight: 600; text-align: left;
  padding: 14px 12px; border-bottom: 2px solid #ececec; background: #f7f7f7;
}
.pm-inbox-table tbody td { padding: 15px 12px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.pm-inbox-table tbody tr:hover td { background: #fafafa; }
.pm-inbox-table a { color: #cd2832; font-weight: 500; }

/* ===== Third-level menu (flyout) — e.g. iUpdate > WFH guidelines > Tech Team.
   Menu depth is unlimited; nested submenus open to the side of their parent. */
@media (min-width: 1200px) {
  #navbar-main .navbar-nav .dropdown-menu .dropdown { position: relative !important; }
  #navbar-main .navbar-nav .dropdown-menu .dropdown > .dropdown-menu {
    display: none;
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    right: auto !important;
    transform: none !important;
    inset: auto !important;
    margin: 0 !important;
    min-width: 220px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
  #navbar-main .navbar-nav .dropdown-menu .dropdown.is-hovered > .dropdown-menu {
    display: block;
  }
  /* Caret indicating a nested submenu on the parent item. */
  #navbar-main .navbar-nav .dropdown-menu .dropdown.menu-item--expanded > .nav-link::after,
  #navbar-main .navbar-nav .dropdown-menu .dropdown.menu-item--expanded > span::after,
  #navbar-main .navbar-nav .dropdown-menu .dropdown.menu-item--expanded > a::after {
    content: "\203A";
    float: right;
    margin-left: 8px;
    color: #cd2832;
  }
}

/* ===== Event gallery (iGallery) — uniform cropped 3-col grid like D7 ===== */
.event-gallery-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}
.event-gallery-item { overflow: hidden; }
/* D7 centred the event title above the gallery. */
.page-node-type-events #block-idestination-theme-page-title h1,
.page-node-type-events .block-page-title-block h1 {
  text-align: center;
  margin-bottom: 28px;
}

/* -------------------------------------------------------------------------
   Comment form (all content types)
   Node media fields (portfolio/talent/team images) float left, so the
   comment section must clear the float and render full-width BELOW the
   media instead of wrapping up beside it (matches D7).
   ------------------------------------------------------------------------- */
.node .comment-wrapper,
section.field--type-comment {
  clear: both;
}
.node .comment-wrapper .comment-form {
  max-width: 100%;
}
/* Hide the "About text formats" help + filter guidelines under the comment
   box (D7 didn't show them). Keep the textarea and the tagging note. */
.comment-form .filter-help,
.comment-form .filter-guidelines,
.comment-form [id$="-format-help"],
.comment-form [id$="-format-guidelines"] {
  display: none;
}

/* -------------------------------------------------------------------------
   jQuery UI autocomplete dropdown (message "To" field + all autocompletes)
   Core ships the menu with a transparent background, so page text bleeds
   through and results overlap the fields below. Give it a solid panel and
   readable, hoverable rows.
   ------------------------------------------------------------------------- */
.ui-autocomplete.ui-menu {
  background: #fff;
  border: 1px solid #c5c5c5;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  z-index: 1300;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
  margin: 0;
  list-style: none;
}
.ui-autocomplete.ui-menu .ui-menu-item {
  margin: 0;
  list-style: none;
}
.ui-autocomplete.ui-menu .ui-menu-item-wrapper {
  display: block;
  padding: 8px 14px;
  color: #333;
  text-decoration: none;
  line-height: 1.3;
  cursor: pointer;
}
.ui-autocomplete.ui-menu .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete.ui-menu .ui-menu-item-wrapper:hover {
  background: #c1272d;
  color: #fff;
  border: 0;
  margin: 0;
}
/* The loading throbber is a single icon on the right. Bootstrap's .form-control
   resets background-repeat to "repeat", which tiles the throbber SVG into a row
   of spinners across the field while typing. Force a single, right-aligned
   throbber. */
input.form-autocomplete,
input.form-autocomplete.ui-autocomplete-loading {
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
}

/* ==========================================================================
   User List page (/user-lists) — exposed filter form
   The exposed filters were unstyled: uneven field widths that wrapped
   messily, and the Birthdate range rendered its <legend> as a large 24px
   heading out of line with the small filter labels. Tidy it into an even,
   bottom-aligned row of compact fields.
   ========================================================================== */

/* Even, bottom-aligned row (so the Apply button lines up with the fields). */
.path-user-lists .views-exposed-form .d-flex {
  align-items: flex-end;
  gap: 18px 16px;
}

/* Uniform top-level filter columns. */
.path-user-lists .views-exposed-form > .d-flex > .js-form-item {
  width: 200px;
  margin-bottom: 0 !important;
}

/* Compact, consistent labels — including the Birthdate legend. */
.path-user-lists .views-exposed-form label,
.path-user-lists .views-exposed-form legend,
.path-user-lists .views-exposed-form .fieldset-legend {
  display: block;
  margin: 0 0 5px;
  padding: 0;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: #555;
}

/* Uniform field sizing. Zero the field margin so every filter item is the same
   height (text inputs otherwise carry a 15px bottom margin that selects don't,
   which knocks the bottom-aligned row out of line). */
.path-user-lists .views-exposed-form .form-control,
.path-user-lists .views-exposed-form .form-select,
.path-user-lists .views-exposed-form select,
.path-user-lists .views-exposed-form input[type="text"],
.path-user-lists .views-exposed-form input[type="date"] {
  height: 38px;
  margin-bottom: 0;
  font-size: 13px;
}

/* Birthdate range: small label on top, Min & Max side by side. */
.path-user-lists .views-exposed-form > .d-flex > fieldset.js-form-item {
  width: auto;
  margin-bottom: 0 !important;
  padding: 0;
  border: 0;
}
.path-user-lists .views-exposed-form .fieldset-wrapper {
  display: flex;
  gap: 12px;
}
.path-user-lists .views-exposed-form fieldset .js-form-item {
  width: 150px;
  margin-bottom: 0 !important;
}

/* Apply + Reset buttons: side by side on the field baseline (they are
   .form-control = full width by default, which would otherwise stack them). */
.path-user-lists .views-exposed-form .form-actions {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 0 !important;
}
.path-user-lists .views-exposed-form .form-actions .form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 38px; /* match the exposed filter input/select height */
  padding: 0 22px;
  margin: 0;
  line-height: 1;
}

/* Reset button as an outlined secondary, to distinguish it from Apply.
   (The compiled splash CSS sets .btn-primary colour with !important, so the
   overrides here need it too.) */
.path-user-lists .views-exposed-form #edit-reset {
  background-color: #fff !important;
  border: 1px solid #cd2832 !important;
  color: #cd2832 !important;
}
.path-user-lists .views-exposed-form #edit-reset:hover,
.path-user-lists .views-exposed-form #edit-reset:focus {
  background-color: #cd2832 !important;
  color: #fff !important;
}

/* Bulk operations ("Block current user") action bar: normal-sized controls
   instead of the default full-width Bootstrap button. Scoped to the bulk
   form (.views-form), leaving the exposed filter form untouched. */
.path-user-lists .views-form .form-item-action {
  max-width: 320px;
}
.path-user-lists .views-form .form-item-action select {
  height: 38px;
}
.path-user-lists .views-form .form-actions .form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 38px;
  padding: 0 22px;
  margin: 0;
}

/* Keep only the bulk button that sits with the Action select (in the header);
   hide the duplicate one core renders below the table. It stays in the DOM so
   the form's submit handlers remain intact. */
.path-user-lists #views-form-user-list-idest-page-1 > .form-actions {
  display: none;
}

/* Put the Action select and its "Apply to selected items" button on one line. */
.path-user-lists .views-form [data-drupal-selector="edit-user-bulk-form"] {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.path-user-lists .views-form [data-drupal-selector="edit-user-bulk-form"] .form-item-action,
.path-user-lists .views-form [data-drupal-selector="edit-user-bulk-form"] .form-actions {
  margin-bottom: 0 !important;
}

/* The bundled D7 splash CSS collapses Bootstrap's appearance:none checkboxes to
   ~2px wide, so every checkbox renders as a thin sliver. Restore a proper,
   normal-sized native checkbox site-wide — the User List bulk form, the Merchops
   access form (/merchops_department_display), and any other admin form/view. */
input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  opacity: 1;
  vertical-align: middle;
  cursor: pointer;
}

/* No extra margin around the row-selection checkboxes inside views tables. */
.views-table input[type="checkbox"] {
  margin: 0;
}

/* ==========================================================================
   Listing views — any table + pager rendered in the main content (User List,
   User Stats, and every other table view) share one themed look: red header,
   subtle grid borders, red row links and a red pager.
   ========================================================================== */

/* Table header in the theme red (was plain white/black). */
#section-main-content .views-table thead th,
#section-main-content .views-table thead th a {
  background-color: #cd2832;
  color: #fff;
}
#section-main-content .views-table thead th {
  border-color: #cd2832;
  font-weight: 600;
  white-space: nowrap;
  padding: 11px 12px;
}
#section-main-content .views-table thead th a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Body cells: comfortable padding, subtle borders, themed row hover/select. */
#section-main-content .views-table tbody td {
  padding: 9px 12px;
  vertical-align: middle;
  border-color: #eee;
}
#section-main-content .views-table tbody tr:hover td,
#section-main-content .views-table tbody tr.selected td {
  background-color: rgba(205, 40, 50, 0.06);
}

/* Vertical (left/right) cell borders so the table reads as a full grid,
   including the outer left and right edges. */
#section-main-content .views-table th,
#section-main-content .views-table td {
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}
#section-main-content .views-table thead th {
  border-left-color: rgba(255, 255, 255, 0.25);
  border-right-color: rgba(255, 255, 255, 0.25);
}

/* Row links (Name, Edit, …) in the theme red. */
#section-main-content .views-table tbody a {
  color: #cd2832;
}

/* Pager: match the theme red instead of the default Bootstrap blue. */
#section-main-content .pager .pagination .page-link,
#section-main-content .pagination .page-link {
  color: #cd2832;
}
#section-main-content .pagination .page-item.active .page-link,
#section-main-content .pagination .page-link:hover {
  background-color: #cd2832;
  border-color: #cd2832;
  color: #fff;
}
#section-main-content .pagination .page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(205, 40, 50, 0.25);
}

/* ==========================================================================
   User profile view — two-column card
   Structure comes from the user.user.default view display field groups
   (.profile-card > .profile-card__col), added alongside the two-column edit
   form. Renders the profile fields as tidy label:value rows in a bordered card
   instead of full-width stacked pills.
   ========================================================================== */
#section-main-content .profile-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 48px;
  max-width: 900px;
  margin: 24px 0 40px;
  padding: 24px 32px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
#section-main-content .profile-card__col {
  min-width: 0;
}

/* Each profile field is a label : value row. */
#section-main-content .profile-card .field {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #f2f2f2;
  font-size: 14px;
  line-height: 1.4;
  background: none;
}
#section-main-content .profile-card .profile-card__col > .field:last-child {
  border-bottom: none;
}
#section-main-content .profile-card .field__label {
  flex: 0 0 40%;
  margin: 0;
  font-weight: 600;
  color: #666;
}
#section-main-content .profile-card .field__item,
#section-main-content .profile-card .field__items {
  color: #222;
  font-weight: 400;
}
#section-main-content .profile-card .field a {
  color: #cd2832;
}

/* "Member for" is an extra field (heading + value) rather than a .field. */
#section-main-content .profile-card .field--name-member-for,
#section-main-content .profile-card [class*="member-for"] {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f2f2f2;
  font-size: 14px;
}
#section-main-content .profile-card h4 {
  flex: 0 0 40%;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

@media (max-width: 767px) {
  #section-main-content .profile-card {
    grid-template-columns: 1fr;
    padding: 20px;
  }
}

/* Neutralise the default grey "pill" (body.path-user .field--label-inline
   .field__item) so values read as plain text inside the profile card. */
#section-main-content .profile-card .field__item,
#section-main-content .profile-card .field__items {
  background: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  min-width: 0;
}

/* "Member for" is a form item (heading + value), not a .field — align it as a
   label:value row to match the surrounding fields. */
#section-main-content .profile-card .js-form-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #f2f2f2;
  font-size: 14px;
}
#section-main-content .profile-card .js-form-item > h4,
#section-main-content .profile-card .js-form-item > .label,
#section-main-content .profile-card .js-form-item > label {
  flex: 0 0 40%;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

/* Beat the bootstrap mb-3 utility on the member_for item. */
#section-main-content .profile-card .js-form-item { margin: 0 !important; }

/* Header avatar — the user's uploaded profile picture, replacing the
   fa-user-circle icon in the top header greeting. */
.top-header__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 5px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   Self-learning taxonomy pages (PPT /selflearning-options/ppt term 9650,
   Video term 9651) — two-up grid of white "cards", matching production.
   ========================================================================== */
.page-taxonomy-term-9650 .view-taxonomy-term .view-content.row,
.page-taxonomy-term-9651 .view-taxonomy-term .view-content.row {
  margin-left: -12px;
  margin-right: -12px;
}

.page-taxonomy-term-9650 .view-taxonomy-term .views-row,
.page-taxonomy-term-9651 .view-taxonomy-term .views-row {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 12px;
  margin-bottom: 24px;
  display: flex;
}

.page-taxonomy-term-9650 .view-taxonomy-term .views-row > .node,
.page-taxonomy-term-9651 .view-taxonomy-term .views-row > .node {
  width: 100%;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

/* Embedded presentations (SlideShare, etc.) fill the card width. */
.page-taxonomy-term-9650 .view-taxonomy-term .views-row .node__content iframe,
.page-taxonomy-term-9651 .view-taxonomy-term .views-row .node__content iframe {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 767.98px) {
  .page-taxonomy-term-9650 .view-taxonomy-term .views-row,
  .page-taxonomy-term-9651 .view-taxonomy-term .views-row {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* ==========================================================================
   MyCorner homepage redesign
   (hero banner, Latest Posts grid, CTA banner, footer columns)
   ========================================================================== */

/* ----- Banner: sit inside the content width with rounded corners -----
   Applies to the homepage carousel and to the static per-section banner
   image shown on inner pages (both live in the slider region). */
#section-slider .region-slider > .block {
  max-width: 1320px;
  margin: 24px auto 0;
  padding: 0 15px;
}
#section-slider .view-homepage-banner-d11 {
  border-radius: 16px;
  overflow: hidden;
}
#section-slider .region-slider img,
#section-slider .slide-item img,
#section-slider .view-homepage-banner-d11 img {
  display: block;
  width: 100%;
  border-radius: 16px;
}
/* Inner-page banner is a plain content block; drop the default paragraph gap. */
#section-slider .region-slider .field--name-body p {
  margin: 0;
}

/* ----- Flow the homepage_content view blocks into one 3-column grid ----- */
.hp-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 30px;
}
.hp-posts-grid > * {
  min-width: 0;
}
/* The empty "Main page content" block would occupy a cell — remove it. */
.hp-posts-grid > .block-system-main-block,
.hp-posts-grid > [id*="block-system-main"] {
  display: none;
}
/* Neutralise each block's inner Bootstrap grid so the card fills its cell. */
.hp-posts-grid .view-homepage-content .views-view-grid,
.hp-posts-grid .view-homepage-content .views-view-grid > .row {
  display: block;
  margin: 0;
}
.hp-posts-grid .view-homepage-content .views-view-grid > .row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  padding: 0;
  display: flex;
}
.hp-posts-grid .view-homepage-content .view-content.row {
  display: block;
  margin: 0;
}
/* Stretch cards to fill their grid cell so cards in a row share one height. */
.hp-posts-grid > .views-element-container,
.hp-posts-grid .block__content,
.hp-posts-grid .block__content > div,
.hp-posts-grid .view-homepage-content,
.hp-posts-grid .view-homepage-content > .view-content,
.hp-posts-grid .views-view-grid,
.hp-posts-grid .views-view-grid > .row,
.hp-posts-grid .views-view-grid > .row > [class*="col-"] {
  height: 100%;
}
.hp-card {
  height: 100%;
}

/* ----- Post card ----- */
.hp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.hp-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.hp-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: #f4f4f4;
  overflow: hidden;
}
.hp-card__media:not(:has(img)) {
  display: none;
}
.hp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hp-card__media .views-field,
.hp-card__media .field-content,
.hp-card__media a {
  display: block;
  height: 100%;
}
.hp-card__body {
  position: relative;
  padding: 26px 20px 22px;
  flex: 1 1 auto;
}
/* When a card has no image, keep the date badge inside the body (not clipped
   at the card's top edge). The empty media element is still a DOM sibling. */
.hp-card__media:not(:has(img)) + .hp-card__body {
  padding-top: 54px;
}
.hp-card__media:not(:has(img)) + .hp-card__body .hp-card__date {
  top: 16px;
}
/* Date badge overlapping the image / body boundary. */
.hp-card__date {
  position: absolute;
  top: -15px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #333;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.hp-card__date i {
  color: #cd2832;
}
.hp-card__date .field-content,
.hp-card__date time {
  color: #333;
}
.hp-card__author {
  font-size: 13px;
  color: #8a8a8a;
  margin-bottom: 8px;
}
.hp-card__author .views-label {
  font-style: normal;
}
.hp-card__author .author {
  font-style: italic;
}
.hp-card__title {
  margin: 0;
  padding-right: 44px; /* room for the arrow */
}
.hp-card__title .post-title,
.hp-card__title h6 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.hp-card__title a {
  color: #1a1a1a;
  text-decoration: none;
}
.hp-card__title a:hover {
  color: #cd2832;
}
/* Stretched link: the whole card body is clickable via the title link. */
.hp-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hp-card__arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #cd2832;
  color: #cd2832;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  pointer-events: none;
}
.hp-card:hover .hp-card__arrow {
  background: #cd2832;
  color: #fff;
}

@media (max-width: 991.98px) {
  .hp-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575.98px) {
  .hp-posts-grid {
    grid-template-columns: 1fr;
  }
  .view .view-content > .views-view-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* ----- MyCorner CTA banner ----- */
.mycorner-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  background: #fdeaec;
  border-radius: 14px;
  padding: 34px 40px;
  margin: 10px 0 50px;
  overflow: hidden;
}
.mycorner-cta__icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #cd2832;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.mycorner-cta__body {
  flex: 1 1 auto;
}
.mycorner-cta__title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
}
.mycorner-cta__text {
  margin: 0 0 16px;
  color: #666;
  font-size: 15px;
}
#section-main-content .mycorner-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #cd2832;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease;
}
#section-main-content .mycorner-cta__btn:hover,
#section-main-content .mycorner-cta__btn:focus {
  background: #a81f28;
  color: #fff;
}
/* Decorative dotted accent on the right (mockup camera-lens area). */
.mycorner-cta__decor {
  flex: 0 0 auto;
  width: 150px;
  align-self: stretch;
  background-image: radial-gradient(#e7b3b8 2px, transparent 2px);
  background-size: 16px 16px;
  opacity: 0.7;
}
@media (max-width: 767.98px) {
  .mycorner-cta {
    flex-direction: column;
    text-align: center;
    padding: 28px 22px;
  }
  .mycorner-cta__decor {
    display: none;
  }
}

/* ----- Footer: social icons + Quick Links ----- */
.site-footer .footer-social-icons {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  gap: 10px;
}
.site-footer .footer-social-icons a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ccc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.site-footer .footer-social-icons a:hover {
  background: #cd2832;
  border-color: #cd2832;
  color: #fff;
}
.site-footer .footer-quick-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer .footer-quick-links li {
  margin-bottom: 10px;
}
.site-footer .footer-quick-links a {
  color: #bbb;
  font-size: 14px;
  text-decoration: none;
}
.site-footer .footer-quick-links a:hover {
  color: #fff;
}
.site-footer .block {
  margin: 0px;
  border: none;
  padding: 0px 10px;
}
footer .footer-top .region-bottom-second{
  padding: 0px !important;
}
footer ul.footer-quick-links, footer ul.latest-news-list{
  border-top: solid 1px #e5e5e5;
}

/* ==========================================================================
   Live crop preview (Image Widget Crop) — updates as the crop is dragged.
   ========================================================================== */
.iwc-live-preview {
  margin-top: 14px;
}
.iwc-live-preview__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  margin-bottom: 6px;
}
.iwc-live-preview__box {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f4f4f4;
}
/* Cropper injects a cloned <img> into the preview box; keep it contained. */
.iwc-live-preview__box img {
  max-width: none;
}

/* ==========================================================================
   Listing "posts" cards (events, portfolio, deals, talent, awards …)
   Styled to match the homepage post cards: white card, rounded, shadow,
   overlapping date badge and a red arrow.
   ========================================================================== */
.dexp-portfolio-grid .portfolio-card,
.portfolio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  padding-bottom: 46px; /* room for the arrow */
}
.dexp-portfolio-grid .portfolio-card:hover,
.portfolio-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Date badge overlapping the image bottom-left. Pulled up with a negative
   margin so it overlaps regardless of the image's rendered height. */
.portfolio-card .views-field-created {
  align-self: flex-start;
  position: relative;
  z-index: 2;
  margin: -18px 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #333;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.portfolio-card .views-field-created::before {
  content: "\f133"; /* fa-calendar */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #cd2832;
  font-size: 11px;
}
.portfolio-card .views-field-created::after {
  content: none;
}
.portfolio-card .views-field-created .date,
.portfolio-card .views-field-created .field-content,
.portfolio-card .views-field-created time {
  color: #333;
  font-size: 12px;
}

/* Author + title form the padded card body. */
.portfolio-card .views-field-uid {
  display: block;
  padding: 10px 18px 0;
  font-size: 13px;
  color: #8a8a8a;
}
.portfolio-card .views-field-title {
  display: block;
  padding: 8px 18px 0;
}
.portfolio-card .post-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
}

/* Red arrow bottom-right. */
.portfolio-card::after {
  content: "\f061"; /* fa-arrow-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #cd2832;
  color: #cd2832;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background 0.2s ease, color 0.2s ease;
}
.portfolio-card:hover::after {
  background: #cd2832;
  color: #fff;
}
/* ==========================================================================
   User profile VIEW redesign — icon rows, cards, pink profile banner.
   ========================================================================== */
#section-main-content .profile-card {
  gap: 0 56px;
  max-width: unset;
  margin: 24px auto 28px;
  padding: 30px 36px;
  border-radius: 14px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.05);
}

/* Each field is: [icon] label .......... value, with a separator line. */
#section-main-content .profile-card .field,
#section-main-content .profile-card [class*="member-for"] {
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  border-bottom: 1px solid #f1f1f1;
}
/* Red circular icon before each row. */
#section-main-content .profile-card .field::before,
#section-main-content .profile-card [class*="member-for"]::before {
  content: "\f007";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fdeaec;
  color: #cd2832;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
/* Per-field icons. */
#section-main-content .profile-card .field--name-field-birthdate::before,
#section-main-content .profile-card .field--name-field-date-of-joining::before {
  content: "\f073"; /* calendar */
}
#section-main-content .profile-card [class*="member-for"]::before {
  content: "\f0c0"; /* users */
}
#section-main-content .profile-card .field--name-field-location::before {
  content: "\f3c5"; /* map-marker */
}
#section-main-content .profile-card .field--name-field-department::before {
  content: "\f2c2"; /* id-card */
}
#section-main-content .profile-card .field--name-field-department-group::before {
  content: "\f0e8"; /* sitemap */
}
#section-main-content .profile-card .field--name-field-profile-picture::before {
  content: "\f007"; /* user */
  align-self: flex-start;
}

#section-main-content .profile-card .field__label,
#section-main-content .profile-card [class*="member-for"] h4 {
  flex: 0 0 34%;
  font-size: 14px;
  font-weight: 500;
  color: #7a7a7a;
}
#section-main-content .profile-card .field__item,
#section-main-content .profile-card .field__items {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}
/* Department / Department Group values in brand red. */
#section-main-content .profile-card .field--name-field-department .field__item,
#section-main-content .profile-card .field--name-field-department-group .field__item {
  color: #cd2832;
  font-weight: 600;
}

/* In the card's right column: the Profile Picture as a framed thumbnail. */
#section-main-content .profile-card .field--name-field-profile-picture {
  flex-wrap: wrap;
  align-items: flex-start;
  border-bottom: none;
  background: none;
  max-width: none;
  margin: 0;
  padding: 16px 4px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#section-main-content .profile-card .field--name-field-profile-picture .field__label {
  flex-basis: auto;
  display: inline;
  font-size: 14px;
  font-weight: 500;
  color: #7a7a7a;
  margin: 0;
}
#section-main-content .profile-card .field--name-field-profile-picture .field__label::before {
  content: none;
}
#section-main-content .profile-card .field--name-field-profile-picture .field__item {
  flex: 1 1 100%;
  margin-top: 12px;
  background: none;
  padding: 0;
}
#section-main-content .profile-card .field--name-field-profile-picture img {
  width: 120px;
  height: auto;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 5px;
  background: #fafafa;
  box-shadow: none;
  display: block;
}

/* Standalone below the card: the Image Gallery as a pink banner card. */
#section-main-content .field--name-field-image-gallery {
  max-width: 1140px;
  margin: 0 auto 40px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.05);
}
#section-main-content .field--name-field-image-gallery .field__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 16px;
}
#section-main-content .field--name-field-image-gallery .field__label::before {
  content: "\f302"; /* images */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fdeaec;
  color: #cd2832;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
#section-main-content .field--name-field-image-gallery .field__items {
  background: linear-gradient(90deg, #fdeef0, #fdf6f7);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
#section-main-content .field--name-field-image-gallery .field__item {
  flex: 0 0 calc(33.333% - 11px);
}
#section-main-content .field--name-field-image-gallery img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: block;
}

@media (max-width: 767px) {
  #section-main-content .field--name-field-image-gallery .field__item {
    flex: 0 0 calc(50% - 8px);
  }
}

/* "Member for" pseudo-field row — match the icon-row style of the other fields. */
#section-main-content .profile-card .js-form-item.form-type-item {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  margin: 0;
  border-bottom: 1px solid #f1f1f1;
}
#section-main-content .profile-card .js-form-item.form-type-item::before {
  content: "\f0c0"; /* users */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fdeaec;
  color: #cd2832;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
#section-main-content .profile-card .js-form-item.form-type-item h4.label {
  flex: 0 0 34%;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #7a7a7a;
}