/* --- CRUISEHABIT 2026 BASELINE --- */
:root {
  --ch-blue: #002d58;
  --ch-accent: #f05a28;
  /* Primary nav bar; active states use a slightly darker tint */
  --ch-nav-blue: #7796a8;
  --ch-nav-blue-active: #5f7f92;
  /* Page grid: header, nav, main, and footer share this max-width */
  --ch-layout-max: 1400px;
  /* Sidebar “one-box” stack: line between Search / Social / Lead-Gen */
  --ch-sidebar-one-box-divider: #ffffff;
}

body {
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* 1. Header & Branding */
.site-header,
.site-header__initial,
.site-header__inner {
  background-color: #c8d5dc !important;
  background-image: none !important;
}

.site-header__logo-link img {
  max-height: 80px;
  width: auto;
}

/* 2. Navigation Colors */
.primary-nav__menu-link,
.primary-nav__menu-link--level-1,
.primary-nav__menu-link-inner {
  color: #ffffff !important;
}

.primary-nav__menu-link:hover .primary-nav__menu-link-inner {
  color: var(--ch-accent) !important;
}

/* 3. Sub-menus (Visible & Navy) */
.primary-nav__menu--level-2 {
  background-color: var(--ch-blue) !important;
}

.primary-nav__button-icon {
  background-color: #ffffff !important;
}

/* 4. Layout — outer shell is full width; inner wrappers share one max-width so
 * header, nav, main (and sidebar) align to the same edges. */
.layout-container {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

.header-wrapper,
.nav-wrapper,
.main-wrapper,
.footer-wrapper {
  max-width: var(--ch-layout-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
  /* Match header and main: no extra horizontal inset here (gutter is .layout-container only). */
  padding-left: 0;
  padding-right: 0;
}

.header-wrapper > header[role="banner"],
.nav-wrapper,
.main-wrapper > main {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* Lead-gen blocks (class added in cruisehabit_clean_preprocess_block).
 * Also target webform client block id when present (e.g. sidebar Cruise Deal). */
/* Compact Sidebar Webform */
.block-webform-client-block-352,
.block-custom-lead-gen {
  background: #f4f7f9; /* Light navy tint */
  padding: 15px !important; /* Reduced from 25px */
  border-radius: 8px;
  margin-bottom: 20px;
  border-left: 5px solid #7796a8;
}

.block-webform-client-block-352 .form-item,
.block-custom-lead-gen .form-item {
  margin-bottom: 10px; /* Tighter spacing between fields */
}

.block-webform-client-block-352 label,
.block-custom-lead-gen label {
  font-size: 0.9rem; /* Slightly smaller labels for sidebar */
  margin-bottom: 2px;
}

.block-webform-client-block-352 input[type="text"],
.block-webform-client-block-352 input[type="email"],
.block-webform-client-block-352 select,
.block-custom-lead-gen input[type="text"],
.block-custom-lead-gen input[type="email"],
.block-custom-lead-gen select {
  width: 100%;
  padding: 8px; /* Slimmer inputs */
  margin-top: 0;
  box-sizing: border-box;
}

/* Inline Checkbox for "Specials" */
.block-webform-client-block-352 .form-type-checkbox,
.block-custom-lead-gen .form-type-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.block-webform-client-block-352 .form-type-checkbox input,
.block-custom-lead-gen .form-type-checkbox input {
  margin: 0; /* Remove default browser margins */
  width: auto; /* Prevent it from taking 100% width */
}

.block-webform-client-block-352 .form-type-checkbox label,
.block-custom-lead-gen .form-type-checkbox label {
  display: inline;
  margin: 0;
  cursor: pointer;
}

/* Compact Submit Button */
.block-webform-client-block-352 .form-submit,
.block-custom-lead-gen .form-submit {
  width: 100%; /* Full width on mobile for easy tapping */
  padding: 10px !important;
  font-size: 0.9rem;
  margin-top: 10px;
  box-sizing: border-box;
}

/* Purple Lead-Gen Block Styling (Cruise Deal — overrides compact container above) */
.block-webform-client-block-352,
[data-drupal-selector="cruisehabit-clean-cruise-deal"] {
  background-color: #B49EC8 !important;
  padding: 20px !important;
  border-radius: 8px;
  border: none !important; /* Removes the previous navy left border */
}

/* Ensure text inside the purple block is readable */
.block-webform-client-block-352 label,
.block-webform-client-block-352 .webform-intro-text,
[data-drupal-selector="cruisehabit-clean-cruise-deal"] label,
[data-drupal-selector="cruisehabit-clean-cruise-deal"] .webform-intro-text {
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Adjust the button to stand out against the purple */
.block-webform-client-block-352 .form-submit,
[data-drupal-selector="cruisehabit-clean-cruise-deal"] .form-submit,
.sidebar-brand-box.sidebar-promo-purple .form-submit {
  background-color: #333333 !important;
  color: #ffffff !important;
}

/* Block Class module: assign on block configure (e.g. sidebar Cruise Deal) */
.sidebar-promo-purple {
  background-color: #B49EC8 !important;
  padding: 20px !important;
  border-radius: 12px;
  border: none !important; /* This kills that blue shadow/border */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 25px;
}

.sidebar-promo-purple label,
.sidebar-promo-purple .webform-intro-text {
  color: #ffffff !important;
}

/* Block Class: unified brand blue sidebar boxes */
.sidebar-brand-box {
  background-color: var(--ch-nav-blue, #7796a8) !important;
  padding: 20px !important;
  border-radius: 8px;
  margin-bottom: 0 !important; /* Stack tight with block below (e.g. Cruise Deal) */
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Ensure all text inside these boxes stays white */
.sidebar-brand-box label,
.sidebar-brand-box p,
.sidebar-brand-box a,
.sidebar-brand-box .webform-intro-text {
  color: #ffffff !important;
}

.sidebar-brand-box a:hover {
  text-decoration: underline;
  color: #e0e0e0 !important;
}

/* Cruise Deal lead-gen: keep sidebar-brand-box for one-box stack; purple wins over navy above */
.sidebar-brand-box.sidebar-promo-purple {
  background-color: #B49EC8 !important;
  color: #ffffff !important;
  border-left: none !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.sidebar-brand-box.sidebar-promo-purple label,
.sidebar-brand-box.sidebar-promo-purple p,
.sidebar-brand-box.sidebar-promo-purple a,
.sidebar-brand-box.sidebar-promo-purple .webform-intro-text {
  color: #ffffff !important;
}

.sidebar-brand-box.sidebar-promo-purple a:hover {
  color: #e0e0e0 !important;
}

/* Deal inquiry webform field (any bundle): matches Great Travel Agent sidebar — gradient, white copy, radius */
/* No horizontal padding on the field so the purple box lines up with body text; inner padding lives on the wrapper. */
.field--name-field-deal-inquiry-webform {
  width: 100%;
  max-width: 100%;
  margin: 0;
  margin-top: 30px;
  padding: 0;
  clear: both;
  box-sizing: border-box;
}
.field--name-field-deal-inquiry-webform .webform-wrapper,
.field--name-field-deal-inquiry-webform form.webform-submission-form {
  width: 100%;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  background: linear-gradient(135deg, var(--ch-nav-blue, #7796a8) 0%, #b49ec8 100%) !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: none !important;
  color: #ffffff !important;
}
.field--name-field-deal-inquiry-webform form .js-form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}
.field--name-field-deal-inquiry-webform form .js-form-item.form-type-checkbox,
.field--name-field-deal-inquiry-webform form .js-form-item.form-type-radio {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.field--name-field-deal-inquiry-webform form .js-form-item.form-type-checkbox .option,
.field--name-field-deal-inquiry-webform form .js-form-item.form-type-radio .option {
  margin-bottom: 0;
}
.field--name-field-deal-inquiry-webform .form-actions {
  margin-bottom: 0;
  text-align: center;
}
.field--name-field-deal-inquiry-webform label,
.field--name-field-deal-inquiry-webform .form-item label {
  color: #ffffff !important;
  font-weight: bold;
}
.field--name-field-deal-inquiry-webform .webform-element-description,
.field--name-field-deal-inquiry-webform .description {
  color: #ffffff !important;
}
.field--name-field-deal-inquiry-webform .webform-intro-text,
.field--name-field-deal-inquiry-webform .webform-intro-text p {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  margin-top: 0;
}
.field--name-field-deal-inquiry-webform input[type="text"],
.field--name-field-deal-inquiry-webform input[type="email"],
.field--name-field-deal-inquiry-webform input[type="tel"],
.field--name-field-deal-inquiry-webform input[type="number"],
.field--name-field-deal-inquiry-webform select,
.field--name-field-deal-inquiry-webform textarea {
  width: 100%;
  padding: 10px;
  color: #222222 !important;
  background: #ffffff !important;
  border-radius: 5px;
  border: none;
  box-sizing: border-box;
  max-width: 100%;
}
.field--name-field-deal-inquiry-webform .form-actions input.form-submit,
.field--name-field-deal-inquiry-webform .form-actions .webform-button--submit,
.field--name-field-deal-inquiry-webform button.webform-button--submit {
  background-color: #333333 !important;
  color: #ffffff !important;
  border-radius: 6px;
  border: none;
  padding: 10px 1.25rem !important;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.field--name-field-deal-inquiry-webform .form-actions input.form-submit:hover,
.field--name-field-deal-inquiry-webform .form-actions input.form-submit:focus,
.field--name-field-deal-inquiry-webform .form-actions .webform-button--submit:hover,
.field--name-field-deal-inquiry-webform .form-actions .webform-button--submit:focus,
.field--name-field-deal-inquiry-webform button.webform-button--submit:hover,
.field--name-field-deal-inquiry-webform button.webform-button--submit:focus {
  background-color: var(--ch-accent, #f05a28) !important;
  color: #ffffff !important;
}
.field--name-field-deal-inquiry-webform .webform-confirmation {
  color: #ffffff !important;
  margin: 0;
  padding: 0;
}

/* Sidebar narrow search: minimal vertical padding so it sits flush with Social block */
.layout-sidebar-first #block-cruisehabit-clean-search-form-narrow.sidebar-brand-box {
  padding: 4px 15px !important;
}

.sidebar-brand-box .form-search {
  border: none;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}

.sidebar-brand-box .search-form__submit {
  display: none; /* Enter key to submit in sidebar */
}

/* Fallback if theme uses generic submit naming */
.sidebar-brand-box.block-search-narrow .form-submit,
.sidebar-brand-box.block-search-narrow input[type="submit"] {
  display: none;
}

/*
 * Sidebar “one-box” stack (top → bottom): Search, Social/About, Lead Gen.
 * (Sponsor ads moved to header; Lead Gen is the last segment — full bottom radius.)
 * IDs = block-cruisehabit-clean-* (theme cruisehabit_clean).
 * Flush inner corners + 1px dividers (no double margins between segments).
 */
.layout-sidebar-first #block-cruisehabit-clean-search-form-narrow,
.layout-sidebar-first #block-cruisehabit-clean-social-media-old-about,
.layout-sidebar-first #block-cruisehabit-clean-cruise-deal {
  margin: 0 !important;
}

/* Top — Search: round only top outer corners; flat bottom; 1px divider under */
.layout-sidebar-first #block-cruisehabit-clean-search-form-narrow {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--ch-sidebar-one-box-divider) !important;
}

/* Middle — Social: square corners; 1px divider under (line between Social and Lead Gen) */
.layout-sidebar-first #block-cruisehabit-clean-social-media-old-about {
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--ch-sidebar-one-box-divider) !important;
}

/* Bottom — Lead Gen (purple): flat top + divider; round bottom corners; clip to radius (one-box stack) */
.layout-sidebar-first #block-cruisehabit-clean-cruise-deal {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-bottom: none !important;
  margin-top: 0 !important;
  overflow: hidden;
}

/* Only add bottom breathing room on the last block in the sidebar column (one-box stack uses margin: 0 + !important above). */
.layout-sidebar-first .block:last-child {
  margin-bottom: 25px;
}

/*
 * Social icons (migrated D7 “Social Media / Old About” block; also node teasers if wrapped).
 * social-sprite.png 126×84px: row1 = Facebook | Instagram | YouTube; row2 = Periscope | Twitter.
 */
.social-sprite-icons .sprite {
  display: inline-block;
  width: 42px;
  height: 42px;
  background: url('/themes/custom/cruisehabit_clean/images/social-sprite.png') no-repeat;
  vertical-align: middle;
}

.social-sprite-icons .sprite-facebook-color {
  background-position: 0 0;
}

.social-sprite-icons .sprite-instagram-color {
  background-position: -42px 0;
}

.social-sprite-icons .sprite-youtube-color {
  background-position: -84px 0;
}

.social-sprite-icons .sprite-periscope-color {
  background-position: 0 -42px;
}

.social-sprite-icons .sprite-twitter-color {
  background-position: -42px -42px;
}

/* Global responsive sidebar: only when sidebar_first is rendered */
main:has(.layout-sidebar-first) {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.layout-sidebar-first {
  padding-right: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

@media (min-width: 992px) {
  main:has(.layout-sidebar-first) {
    flex-direction: row;
    align-items: flex-start;
  }

  /*
   * Do not use flex-basis 70% + 30% with gap — that sums to 100% + gap and overflows,
   * so the sidebar column extends past the header/main-wrapper edge.
   */
  .layout-content {
    flex: 7 1 0;
    min-width: 0;
  }

  .layout-sidebar-first {
    flex: 3 1 0;
    min-width: 0;
    position: sticky;
    top: 120px;
  }
}

/*
 * Front page + sidebar: between 992px and 1199px keep main full-width with sidebar
 * below so magazine grids (e.g. 3 columns) are not squeezed beside the sidebar.
 * At 1200px+ use the same side-by-side layout as inner pages.
 */
@media (min-width: 992px) and (max-width: 1199px) {
  body.path-frontpage main:has(.layout-sidebar-first) {
    flex-direction: column;
    align-items: stretch;
  }

  body.path-frontpage main:has(.layout-sidebar-first) .layout-content,
  body.path-frontpage main:has(.layout-sidebar-first) .layout-sidebar-first {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
  }

  body.path-frontpage main:has(.layout-sidebar-first) .layout-sidebar-first {
    position: static;
  }
}

/* --- NAV EMERGENCY OVERRIDE --- */
.site-header__navigation,
.primary-nav,
.primary-nav__menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: transparent !important;
}

.primary-nav__menu-link-inner {
  color: #ffffff !important;
  display: inline-block !important;
}

/* --- Mobile menu toggle (hamburger) --- */
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
}

.site-header__bar .region {
  flex: 1 1 auto;
  min-width: 0;
}

.menu-toggle {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid #333;
  border-radius: 4px;
  background: #fff;
  color: #333;
  cursor: pointer;
  line-height: 1;
}

.menu-toggle:focus {
  outline: 2px solid var(--ch-accent);
  outline-offset: 2px;
}

.menu-toggle__icon {
  display: block;
  width: 1.35rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
}

/* MOBILE-YT-HEADER-START
 * Mobile-only YouTube control: absolute positioning so flex header is unchanged.
 * Rollback: delete through MOBILE-YT-HEADER-END, the <a class="site-header__mobile-youtube"> in page.html.twig,
 * and cruisehabit_mobile_youtube_url in cruisehabit_clean_preprocess_page().
 */
.site-header__mobile-youtube {
  display: none;
}

@media (max-width: 767px) {
  .site-header__mobile-youtube {
    display: block;
    position: absolute;
    left: 15px;
    top: 10px;
    width: 40px;
    height: 40px;
    z-index: 50005;
    margin: 0;
    padding: 4px;
    box-sizing: border-box;
    line-height: 0;
    color: #ffffff;
    background-color: transparent;
    border: 0;
    text-decoration: none;
  }

  /* Same asset as .social-sprite-icons; 32×32 tile (sheet 126×84, 42px cells → background-size 96×64, YouTube = -64px 0). */
  .site-header__mobile-youtube .sprite {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0;
    background: url('/themes/custom/cruisehabit_clean/images/social-sprite.png') no-repeat;
    background-size: 96px 64px;
    background-position: -64px 0;
  }

  .site-header__mobile-youtube:focus {
    outline: 2px solid var(--ch-accent, #f05a28);
    outline-offset: 2px;
  }

  .site-header__mobile-youtube:focus:not(:focus-visible) {
    outline: none;
  }

  /* Below hamburger (50010); hidden while overlay is open so it does not sit on top of the menu. */
  .site-header:has(#primary-menu-wrapper.is-active) .site-header__mobile-youtube {
    visibility: hidden;
    pointer-events: none;
  }
}
/* MOBILE-YT-HEADER-END */

/* Submenu expand control: hidden on desktop (hover menus), shown on mobile. */
#primary-menu-wrapper .region-header .menu-submenu-toggle {
  display: none;
}

#primary-menu-wrapper .region-header .menu-item__row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}

#primary-menu-wrapper .region-header .menu-item__row > a {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 767px) {
  /* Entire header above nav strip + main so fixed hamburger isn’t covered on <front> */
  .header-wrapper,
  .site-header {
    position: relative;
    z-index: 50000;
    overflow: visible !important;
  }

  .site-header__bar {
    padding-right: 3.5rem;
    position: relative;
    z-index: 50001;
    overflow: visible !important;
  }

  /* Full-screen nav overlay when open (below fixed hamburger) — matches desktop bar (--ch-nav-blue / #7796a8) */
  #primary-menu-wrapper.is-active,
  #primary-menu-wrapper.main-navigation-wrapper.main-nav.is-active {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: auto !important;
    background-color: #7796a8 !important;
    z-index: 49990;
    padding-top: 4.5rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* Fixed hamburger — above overlay and page chrome */
  .menu-toggle,
  .navbar-toggler {
    display: block !important;
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 50010 !important;
    width: 44px;
    height: 44px;
    background-color: #7796a8 !important;
    color: #ffffff !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box;
  }

  /* Hide header nav region until hamburger opens */
  #primary-menu-wrapper:not(.is-active) .region-header {
    display: none;
  }

  #primary-menu-wrapper.is-active .region-header {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: transparent !important;
  }

  /*
   * Top-level main menu on lighter overlay: navy text for contrast on #7796a8; orange for hover / focus / active.
   */
  #primary-menu-wrapper.is-active .region-header ul.menu.menu--main > li > a,
  #primary-menu-wrapper.is-active .region-header ul.menu.menu--main > li > .menu-item__row > a {
    color: var(--ch-blue) !important;
    background-color: transparent !important;
  }

  #primary-menu-wrapper.is-active .region-header ul.menu.menu--main > li > a:hover,
  #primary-menu-wrapper.is-active .region-header ul.menu.menu--main > li > .menu-item__row > a:hover,
  #primary-menu-wrapper.is-active .region-header ul.menu.menu--main > li > a:focus-visible,
  #primary-menu-wrapper.is-active .region-header ul.menu.menu--main > li > .menu-item__row > a:focus-visible,
  #primary-menu-wrapper.is-active .region-header ul.menu.menu--main > li > a.is-active,
  #primary-menu-wrapper.is-active .region-header ul.menu.menu--main > li > .menu-item__row > a.is-active,
  #primary-menu-wrapper.is-active .region-header ul.menu.menu--main > li.menu-item--active-trail > a,
  #primary-menu-wrapper.is-active .region-header ul.menu.menu--main > li.menu-item--active-trail > .menu-item__row > a {
    color: var(--ch-accent) !important;
    background-color: transparent !important;
  }

  #primary-menu-wrapper.is-active .region-header .menu {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
  }

  #primary-menu-wrapper.is-active .region-header .menu > li {
    width: 100%;
  }

  #primary-menu-wrapper.is-active .region-header .menu a {
    width: 100%;
    box-sizing: border-box;
  }

  #primary-menu-wrapper.is-active .region-header .menu-item__row > a {
    width: auto;
  }

  /* Collapse nested menus until opened via toggle (overrides desktop :hover). */
  #primary-menu-wrapper.is-active .region-header li.menu-item--expanded > ul.menu {
    display: none !important;
  }

  #primary-menu-wrapper.is-active .region-header li.menu-item--expanded.is-submenu-open > ul.menu {
    display: block !important;
    position: static;
    left: auto;
    top: auto;
    margin: 0 0 0.25rem 0;
    padding: 0.25rem 0;
    min-width: 0;
    width: 100%;
    max-width: none;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  /* Explicit flyout list class (in case other ul.menu rules compete) */
  #primary-menu-wrapper.is-active .region-header li.is-submenu-open > ul.menu--sub-menu {
    display: block !important;
  }

  #primary-menu-wrapper.is-active .region-header ul.menu ul.menu a {
    color: #000000 !important;
  }

  #primary-menu-wrapper.is-active .region-header .menu-submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0 0.35rem;
    border: 1px solid rgba(0, 45, 88, 0.35);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.35);
    color: var(--ch-blue);
    cursor: pointer;
    line-height: 1;
  }

  #primary-menu-wrapper.is-active .region-header .menu-submenu-toggle:focus {
    outline: 2px solid var(--ch-accent);
    outline-offset: 2px;
  }

  #primary-menu-wrapper.is-active .region-header .menu-submenu-toggle__icon {
    display: block;
    width: 0.45rem;
    height: 0.45rem;
    margin-top: -0.2rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease, margin 0.2s ease;
  }

  #primary-menu-wrapper.is-active .region-header li.is-submenu-open > .menu-item__row .menu-submenu-toggle__icon {
    margin-top: 0.15rem;
    transform: rotate(-135deg);
  }

  #primary-menu-wrapper.is-active .region-header ul.menu ul.menu .menu-submenu-toggle {
    border-color: rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.06);
    color: #000000;
  }
}

/* --- CruiseHabit Clean (Starterkit / stable9 regions) --- */
/* Navy top bar: main nav + search in header; logo row below uses light strip. */
header[role="banner"] {
  background-color: transparent;
  padding: 0;
}

.site-header__bar {
  background-color: var(--ch-nav-blue);
  color: #fff;
  align-items: center;
  min-height: 3.25rem;
}

.main-navigation-wrapper.main-nav {
  background-color: var(--ch-nav-blue);
  color: #fff;
  flex: 1 1 auto;
  min-width: 0;
}

.main-navigation-wrapper.main-nav .region-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  /* Horizontal inset comes from .layout-container padding */
  padding: 0.5rem 0 0.75rem;
}

/*
 * Logo / ad strip — FLUSH vertical (was padded; rollback = restore 10px region padding + separate sponsor margins).
 * Backup: if the logo feels squeezed against the navy bar, re-add 2px–5px padding-top on this row or .region-primary-menu.
 */
.site-branding-row {
  background-color: #c8d5dc;
  max-width: var(--ch-layout-max);
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.site-branding-row .region-primary-menu {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0;
  padding-right: 0;
}

/* Branding block + logo image: no trailing margin/padding that stretches row height */
.site-branding-row #block-cruisehabit-clean-site-branding {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.site-branding-row #block-cruisehabit-clean-site-branding .site-logo,
.site-branding-row #block-cruisehabit-clean-site-branding a.site-logo {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.site-branding-row #block-cruisehabit-clean-site-branding .site-logo img,
.site-branding-row #block-cruisehabit-clean-site-branding img {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: middle;
}

.site-branding-row .region-primary-menu .block {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/*
 * Primary menu region: logo + sponsor banner (desktop inline-block); mobile stacked under logo.
 */
@media (min-width: 768px) {
  .region-primary-menu {
    display: block !important;
    text-align: left;
    white-space: nowrap;
  }

  #block-cruisehabit-clean-site-branding,
  #block-cruisehabit-clean-simpleads-sponsor {
    display: inline-block !important;
    vertical-align: middle;
  }

  #block-cruisehabit-clean-simpleads-sponsor {
    margin: 0 0 0 100px !important;
    width: 468px;
    max-width: 100%;
    min-height: 60px; /* Placeholder so the header doesn't jump */
    overflow: visible !important; /* Do not clip rotated / slick ad output */
  }

  #block-cruisehabit-clean-simpleads-sponsor img {
    max-width: 100%;
    height: auto;
    display: block;
  }
}

@media (max-width: 767px) {
  .region-primary-menu {
    white-space: normal;
  }

  #block-cruisehabit-clean-simpleads-sponsor {
    display: block !important;
    margin: 0 auto !important;
    text-align: center;
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
  }

  #block-cruisehabit-clean-simpleads-sponsor img {
    max-width: 100%;
    height: auto;
  }
}

.main-navigation-wrapper.main-nav,
.main-navigation-wrapper.main-nav .region-header,
.block-system-menu-block-main {
  overflow: visible !important;
}

.region-secondary-menu {
  background-color: #c8d5dc;
  padding: 0 0 0.75rem;
}

header[role="banner"] .menu a,
.site-branding-row a.site-logo,
.region-secondary-menu a {
  color: #333;
}

/* Primary menu inside banner: win over header .menu a (#333) — fixes “More” / last item when the block sits in the banner. */
header[role="banner"] #primary-menu-wrapper .region-header ul.menu > li > a,
header[role="banner"] #primary-menu-wrapper .region-header ul.menu > li > .menu-item__row > a {
  color: #ffffff !important;
}

/* Primary bar links (not dropdown): always white; size + weight consistent. */
#primary-menu-wrapper .region-header ul.menu > li > a,
#primary-menu-wrapper .region-header ul.menu > li > .menu-item__row > a,
.main-nav ul.menu > li > a,
.main-nav ul.menu > li > .menu-item__row > a {
  color: #ffffff !important;
  font-size: 1.125rem;
  font-weight: 500;
  padding: 10px 12px;
  display: inline-block;
}

#primary-menu-wrapper .region-header a,
.main-nav a {
  color: #fff;
  display: inline-block;
}

/*
 * Navigation: universal reset — no underlines or forced borders in any state.
 * (Link-scoped .is-active only — do not match #primary-menu-wrapper.is-active mobile wrapper.)
 */
.main-nav a,
#primary-menu-wrapper a,
.menu--main a,
.main-nav a.is-active,
#primary-menu-wrapper a.is-active,
.menu--main a.is-active,
.main-nav .menu-item--active-trail > a,
#primary-menu-wrapper .menu-item--active-trail > a,
.menu--main .menu-item--active-trail > a {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Top-level links: default white, transparent background */
.main-nav > .region-header > ul > li > a,
.main-nav > .region-header > ul > li > .menu-item__row > a,
#primary-menu-wrapper > .region-header > ul > li > a,
#primary-menu-wrapper > .region-header > ul > li > .menu-item__row > a {
  color: #ffffff !important;
  background: transparent !important;
}

/* Single hover treatment: orange text, no underline, no hover “pill” */
.main-nav a:hover,
#primary-menu-wrapper a:hover,
.menu--main a:hover,
.menu--sub-menu a:hover {
  color: var(--ch-accent, #f05a28) !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Top-level hover: same as submenus (higher specificity vs header .menu link color). */
#primary-menu-wrapper .region-header ul.menu > li > a:hover,
#primary-menu-wrapper .region-header ul.menu > li > .menu-item__row > a:hover,
.main-nav .region-header ul.menu > li > a:hover,
.main-nav .region-header ul.menu > li > .menu-item__row > a:hover {
  color: var(--ch-accent, #f05a28) !important;
  background-color: transparent !important;
  text-decoration: none !important;
}

/* Home / More / active-trail top-level rows (scoped to header primary nav). */
#primary-menu-wrapper .region-header .menu-item--expanded > a:hover,
#primary-menu-wrapper .region-header .menu-item--expanded > .menu-item__row > a:hover,
#primary-menu-wrapper .region-header .menu-item--active-trail > a:hover,
.main-nav .region-header .menu-item--expanded > a:hover,
.main-nav .region-header .menu-item--expanded > .menu-item__row > a:hover,
.main-nav .region-header .menu-item--active-trail > a:hover {
  color: var(--ch-accent, #f05a28) !important;
}

header[role="banner"] .menu a:hover,
.site-branding-row a.site-logo:hover,
.region-secondary-menu a:hover {
  color: var(--ch-accent);
}

/* Top-level items with children: chevron (main nav in header) */
.menu--main .menu-item--expanded > a::after,
.menu--main .menu-item--expanded > .menu-item__row > a::after,
#primary-menu-wrapper .region-header .menu-item--expanded > a::after,
#primary-menu-wrapper .region-header .menu-item--expanded > .menu-item__row > a::after {
  content: ' ▾';
  font-size: 0.8em;
  margin-left: 5px;
  font-weight: 400;
}

@media (max-width: 767px) {
  /* Mobile row uses .menu-submenu-toggle; hide duplicate chevron on the link */
  #primary-menu-wrapper .region-header .menu-item--expanded > .menu-item__row > a::after {
    content: none;
  }
}

#primary-menu-wrapper .region-header .menu,
.region-secondary-menu .menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#primary-menu-wrapper .region-header .menu li,
.region-secondary-menu .menu li {
  margin: 0;
}

@media (min-width: 768px) {
  #primary-menu-wrapper .region-header ul.menu > li,
  .main-nav ul.menu > li {
    display: flex;
    align-items: center;
  }

  #primary-menu-wrapper .region-header .menu-item__row,
  .main-nav .menu-item__row {
    align-items: center;
  }
}

/* Main menu: show nested menus on hover/focus (no JS). */
#primary-menu-wrapper .region-header ul.menu > .menu-item.menu-item--expanded {
  position: relative;
}

#primary-menu-wrapper .region-header .menu-item--expanded > ul.menu {
  display: none;
  position: absolute;
  z-index: 200;
  min-width: 14rem;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#primary-menu-wrapper .region-header .menu > .menu-item.menu-item--expanded > ul.menu {
  left: 0;
  top: 100%;
}

#primary-menu-wrapper .region-header .menu ul.menu .menu-item.menu-item--expanded > ul.menu {
  left: 100%;
  top: 0;
  margin-left: 0.15rem;
}

#primary-menu-wrapper .region-header .menu-item--expanded:hover > ul.menu,
#primary-menu-wrapper .region-header .menu-item--expanded:focus-within > ul.menu {
  display: block;
}

/*
 * Desktop flyouts only (min-width: 768px).
 * Keeps these rules from competing with the mobile accordion (max-width: 767px).
 * Header + nav z-index: main content can overlap the bar after paint/cache and steal :hover.
 */
@media (min-width: 768px) {
  .header-wrapper > header[role="banner"] {
    position: relative;
    z-index: 200;
  }

  .main-nav ul.menu li ul {
    display: none;
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    min-width: 14rem;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  body .main-nav ul.menu li.menu-item--expanded {
    position: relative !important;
  }

  body .main-nav ul.menu li:hover > ul,
  body .main-nav ul.menu li:focus-within > ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    background-color: #ffffff !important;
    z-index: 9999;
  }

  body .main-nav ul.menu > li:hover > ul,
  body .main-nav ul.menu > li:focus-within > ul {
    top: 100% !important;
    left: 0 !important;
    min-width: 200px;
  }

  body .main-nav ul.menu ul.menu li:hover > ul,
  body .main-nav ul.menu ul.menu li:focus-within > ul {
    top: 0 !important;
    left: 100% !important;
    margin-left: 0.15rem;
  }
}

/* Hide the toggle button on desktop so it doesn't cause spacing issues */
@media (min-width: 992px) {
  .menu-submenu-toggle {
    display: none !important;
  }
}

/* Submenu links on white flyout panels */
#primary-menu-wrapper .region-header ul.menu ul.menu a {
  color: #000000 !important;
  padding: 10px 18px;
}

/* Top bar only — dropdown links use dark text on white (match #primary-menu-wrapper .region-header panels). */
body .main-nav ul.menu > li > a,
body .main-nav ul.menu > li > .menu-item__row > a {
  color: #ffffff !important;
}

body .main-nav ul.menu ul.menu a {
  color: #000000 !important;
  padding: 10px 18px;
}

/*
 * Submenu flyouts: override broad white nav link rules (#primary-menu-wrapper
 * .region-header a / .main-nav a).
 */
#primary-menu-wrapper .region-header .menu--main .menu--sub-menu a:not(:hover),
body .main-nav .menu--main .menu--sub-menu a:not(:hover) {
  color: #000000 !important;
}

#primary-menu-wrapper .region-header .menu--main .menu--sub-menu a:hover,
body .main-nav .menu--main .menu--sub-menu a:hover {
  color: var(--ch-accent) !important;
}

/* Force all nested dropdown links to black (structural: ul inside main nav). */
.main-nav ul li ul li a,
#primary-menu-wrapper ul li ul li a,
.navbar-nav .dropdown-menu a {
  color: #000000 !important;
  background-color: #ffffff !important;
}

/*
 * DOM (cruisehabit_clean): Flyouts live under
 *   header.site-header > #primary-menu-wrapper.main-nav > .region-header >
 *   ul.menu.menu--main > li.menu-item--expanded > ul.menu (nested ul had ONLY
 *   class "menu" until menu.html.twig added menu--sub-menu / menu--level-N).
 * Cruise Lines / More use the same structure (main menu block in header region).
 */
/*
 * Ultimate fallback: nested menus only. Do NOT use [class*="menu"] twice — li.menu-item
 * contains "menu", so that pattern wrongly styled top-level bar links.
 */
header[role="banner"] .region-header ul.menu ul.menu a,
.region-header ul ul a,
.dropdown-menu a,
.sub-menu a {
  color: #000000 !important;
  background-color: #ffffff !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Restore Top-Level Nav Appearance (punch through any broad header menu rules). */
.main-nav > .region-header > ul.menu > li > a,
.main-nav > .region-header > ul.menu > li > .menu-item__row > a,
#primary-menu-wrapper > .region-header > ul.menu > li > a,
#primary-menu-wrapper > .region-header > ul.menu > li > .menu-item__row > a {
  background-color: transparent !important;
  color: #ffffff !important;
}

/* Keep the dropdowns white/black */
.main-nav ul.menu ul.menu a,
#primary-menu-wrapper ul.menu ul.menu a {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/*
 * Hover “ghost”: scoped to site header only (not sidebar/footer lists).
 * :not(:hover) so the hovered row can use the unified accent color (see above).
 */
header[role="banner"] li:hover > ul a:not(:hover),
header[role="banner"] li:hover > .dropdown-menu a:not(:hover) {
  color: #000000 !important;
}

.site-logo img {
  max-height: 80px;
  width: auto;
}

/*
 * Front page (frontpage view): plain float grid — no table/grid/float-hack overrides.
 * Row uses overflow clearfix; columns float two-across; card chrome only on teasers.
 */
body.path-frontpage .view-id-frontpage .views-view-grid .views-row {
  display: block;
  width: 100%;
  overflow: hidden;
}

body.path-frontpage .view-id-frontpage .views-view-grid .views-col {
  float: left !important;
  width: 50% !important;
  padding: 10px;
  box-sizing: border-box;
  margin: 0;
  border: none;
  background: transparent;
}

body.path-frontpage .view-id-frontpage .views-view-grid .node--view-mode-teaser {
  position: relative;
  cursor: pointer;
  border: 1px solid #eee;
  background: #fff;
  padding: 1.25rem;
  box-sizing: border-box;
  margin-bottom: 20px;
  transition: transform 0.2s, box-shadow 0.2s;
}

body.path-frontpage .view-id-frontpage .views-view-grid .node--view-mode-teaser:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Beat global .node--view-mode-teaser img { max-width: 350px !important } so front-page grid columns don’t blow out. */
body.path-frontpage .view-id-frontpage .node--view-mode-teaser img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block;
}

body.path-frontpage .view-id-frontpage .views-view-grid .views-col,
body.path-frontpage .view-id-frontpage .views-view-grid .node--view-mode-teaser {
  min-width: 0;
}

@media (max-width: 767px) {
  body.path-frontpage .view-id-frontpage .views-view-grid .views-col {
    float: none !important;
    width: 100% !important;
  }

  body.path-frontpage .view-id-frontpage .views-view-grid .node--view-mode-teaser {
    width: 100%;
    display: block;
  }

  body.path-frontpage .view-id-frontpage .views-view-grid .node--view-mode-teaser img {
    width: 100%;
    max-width: 100%;
    height: auto;
    float: none;
    display: block;
  }
}

/* Teaser listings (article, cruisedeal, etc.): same layout for any bundle using view_mode teaser */
.node--view-mode-teaser img {
  max-width: 350px !important;
  width: auto !important;
  height: auto !important;
  display: block;
  margin-bottom: 1rem;
  border-radius: 4px;
}

.node--view-mode-teaser .content,
.node--view-mode-teaser .node__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.node--view-mode-teaser .field--name-field-image,
.node--view-mode-teaser .cruise-teaser-image,
.node--view-mode-teaser .cruise-teaser-image .field--name-field-image,
.node--view-mode-teaser .cruise-teaser-image .field--name-field-cruise-image {
  float: none !important;
  max-width: 100%;
}

/* Small gap only under the teaser image (wrapper link in node.html.twig), not extra padding on the field. */
.node--view-mode-teaser .node__content > a:first-of-type {
  display: block;
  margin-bottom: 0.5rem;
}

.node--view-mode-teaser h2.node__title {
  margin-top: 0;
  margin-bottom: 0.35rem;
}

.node--view-mode-teaser .field--name-body {
  line-height: 1.45;
}

.node--view-mode-teaser .field--name-body p:first-child {
  margin-top: 0;
}

/* Make the whole teaser card feel like a single link (title <a> is first in tab/AT order). */
.node--view-mode-teaser {
  position: relative;
  cursor: pointer;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  box-sizing: border-box;
}

/*
 * Stretch hit target to the article: title link must stay position: static so ::after
 * is positioned against .node--view-mode-teaser (not the narrow title box).
 * .node__content stays z-index: 0; ::after is z-index: 1; real links z-index: 2.
 */
.node--view-mode-teaser .node__content {
  position: relative;
  z-index: 0;
  user-select: text;
}

.node--view-mode-teaser h2.node__title a {
  position: static;
}

.node--view-mode-teaser h2.node__title a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

/* Image / body / “Read more” links stay clickable above the overlay. */
.node--view-mode-teaser .node__content a {
  position: relative;
  z-index: 2;
}

.node--view-mode-teaser .node__links {
  position: relative;
  z-index: 2;
}

.node--view-mode-teaser .node__links ul {
  padding: 0;
  list-style: none;
}

.node--view-mode-teaser .node__links a {
  background: var(--ch-blue);
  color: #fff !important;
  padding: 8px 15px;
  border-radius: 4px;
  display: inline-block;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.node--view-mode-teaser .comment-forbidden,
.node--view-mode-teaser .comment-add {
  display: none !important;
}

/* "Log in or register to post comments" shares .node__links with Read more; no comment-* class on the li. */
.node--view-mode-teaser .node__links li:has(a[href*="/user/login"][href*="comment-form"]) {
  display: none !important;
}

a {
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

/* Global a:hover had no !important but still competed with header nav in aggregated CSS order.
 * Header uses --ch-accent hovers at EOF; body links keep color via more specific rules (e.g. teasers). */
/*
a:hover {
  color: #7796a8;
  text-decoration: none;
}
*/

.node--view-mode-teaser h2 a {
  color: #333;
}

.node--view-mode-teaser h2 a:hover {
  color: #7796a8;
}

/* Maintain D7 aspect ratios while honoring hardcoded dimensions */
.node__content img[width][height] {
  max-width: 100%; /* Prevents images from breaking the mobile layout */
  height: auto !important; /* Forces the browser to calculate height based on original proportions */
  display: block;
  margin-bottom: 1.5rem;
}

/* Nav: parent-li / row hover — final override (wins over global a:hover and header link rules). */
.main-nav ul.menu li:hover > a,
.main-nav ul.menu li:hover > .menu-item__row a,
#primary-menu-wrapper ul.menu li:hover > a,
#primary-menu-wrapper ul.menu li:hover > .menu-item__row a {
  color: var(--ch-accent, #f05a28) !important;
  text-decoration: none !important;
  background-color: transparent !important;
}

/* Force orange hover on all header primary-nav links — final cascade. */
#primary-menu-wrapper a:hover,
.main-nav a:hover,
#primary-menu-wrapper li:hover > a,
.main-nav li:hover > a,
#primary-menu-wrapper .menu-item__row:hover a,
.main-nav .menu-item__row:hover a {
  color: var(--ch-accent, #f05a28) !important;
  background-color: transparent !important;
  fill: var(--ch-accent, #f05a28) !important;
}

/* Target the link inside the row wrapper when the row or the link is hovered */
.menu-item__row:hover a,
.menu-item__row a:hover,
.menu-item--expanded:hover > .menu-item__row a {
  color: var(--ch-accent, #f05a28) !important;
  text-decoration: none !important;
  background-color: transparent !important;
}

/* Ensure the expansion button icon doesn't turn orange unless we want it to */
.menu-submenu-toggle:hover .menu-submenu-toggle__icon {
  background-color: var(--ch-accent, #f05a28);
}

/* State-surgical: row hover + scoped wrappers + span text inside links */
.menu-item__row:hover a,
.menu-item__row a:hover,
.menu-item--expanded:hover > .menu-item__row > a,
#primary-menu-wrapper .menu-item__row a:hover,
.main-nav .menu-item__row a:hover {
  color: var(--ch-accent, #f05a28) !important;
  text-decoration: none !important;
  background-color: transparent !important;
}

.menu-item__row a:hover span,
.menu-item__row:hover a span {
  color: var(--ch-accent, #f05a28) !important;
}

/* Master key: any href link in nav wrappers + kill transition ghosting */
#primary-menu-wrapper a[href]:hover,
.main-nav a[href]:hover,
#primary-menu-wrapper .menu-item__row:hover a[href],
.main-nav .menu-item__row:hover a[href] {
  color: var(--ch-accent, #f05a28) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: none !important;
}

/* More / expand control: don’t paint a solid hover box over the link */
.menu-submenu-toggle:hover {
  background-color: transparent !important;
}

/* Mobile: full-width columns only — do not force display/padding on main (breaks front grids) */
@media (max-width: 767px) {
  .layout-content,
  .layout-sidebar-first,
  .layout-sidebar-second,
  .sidebar {
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
    box-sizing: border-box;
  }

  .node--view-mode-teaser {
    display: block !important;
  }
}

/* Mobile hamburger: match primary nav block (above overlay z-index 49990) */
@media (max-width: 767px) {
  .menu-toggle,
  .navbar-toggler {
    z-index: 50010 !important;
  }
}

/* ≤991px: stack sidebar under content (main only — not .main-wrapper, so breadcrumb/highlight stay normal) */
@media (max-width: 991px) {
  main:has(.layout-sidebar-first) {
    display: flex !important;
    flex-direction: column !important;
  }

  .layout-content,
  .layout-sidebar-first,
  .layout-sidebar-second,
  .sidebar {
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

.node--view-mode-teaser .field--name-field-image,
.node--view-mode-teaser .cruise-teaser-image .field--name-field-cruise-image {
  display: block !important;
  width: 100% !important;
  float: none !important;
}

/* Ensure contextual edit menu links are visible regardless of sidebar colors */
.contextual .trigger,
.contextual .contextual-links li a {
  color: #333333 !important;
  background-color: #ffffff;
}

.contextual .contextual-links li a:hover {
  background-color: #f0f0f0;
  color: #000000 !important;
}