/**
 * Impact Trails — custom theme styles (gowilds_sub).
 * Migrated from the Drupal 'Custom CSS' setting and de-duplicated.
 * Edit here, commit in GitHub Desktop -> auto-deploys. Clear Drupal cache after.
 */

.header-one__main {
  background-color: #1a1a1a !important;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 100px;
  transition: none !important;
}

.gv-sticky-menu.is-sticky {
  position: static !important;
  height: auto !important;
  transition: none !important;
}

.gv-sticky-menu.is-sticky .header-one__main {
  position: fixed !important;
  top: 0 !important;
  height: 100px !important;
  transition: none !important;
}

/* Drop the fixed header below the Drupal admin toolbar when logged in.
   --drupal-displace-offset-top is set/updated live by Drupal's toolbar
   (≈80px tray open, ≈40px closed, 0 for logged-out visitors). */
.header-one__main,
.gv-sticky-menu.is-sticky .header-one__main {
  top: var(--drupal-displace-offset-top, 0px) !important;
}

body {
  /* Reserve space for the fixed 100px header PLUS the Drupal admin toolbar
     when logged in, so the hero/content starts below BOTH.
     - Logged-out: --drupal-displace-offset-top is unset → fallback 0px →
       100px, identical to before.
     - Logged-in: Drupal's toolbar sets an inline body padding-top of just the
       toolbar height (~79px), which would drop the header's 100px reservation
       and slide the hero up *under* the header (cropping it). The !important
       calc beats that inline style and reserves toolbar + header, so the
       logged-in front-end matches the anonymous view — the admin toolbar
       simply sits above an otherwise-unchanged site. */
  padding-top: calc(var(--drupal-displace-offset-top, 0px) + 100px) !important;
}

/* Homepage hero image — driven by a single stable file: /sites/default/files/hero.jpg.
   This overrides whatever background the page builder sets on the hero column, so to
   change the hero in future you just replace that one file (and purge the CDN) — no
   page-builder edits needed. The matching <link rel=preload> for hero.jpg lives in
   page/html.html.twig so it always paints immediately (no grey-gradient flash).
   Targets the stable `hero-fullscreen` column on the front page, plus the current
   page-builder element id as a belt-and-braces fallback. */
body.frontpage .gsc-column.hero-fullscreen,
.gsc-column.el-93702502 {
  background-image: url("/sites/default/files/hero.jpg") !important;
}

.header-one__main a,.header-one__main .menu-item > a {
  color: #ffffff !important;
}

.header-one__main .gva_menu_main {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100px;
}

.gva_menu_main > li {
  margin-left: 20px;
  display: flex;
  align-items: stretch;
}

.gva_menu_main > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  height: 100%;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  text-decoration: none;
  border: none;
  border-radius: 0;
  transition: background 0.3s ease, color 0.3s ease;
  box-sizing: border-box;
  /* Keep the label and its dropdown caret on one line at every width.
     The caret is a separate inline <span class="icaret"> after the label;
     without this, at tight breakpoints the line breaks at the whitespace
     between them and the caret drops below the word (PROGRAMMES). */
  white-space: nowrap;
}

.gva_menu_main a[href="/enquire"] {
  background-color: #333333;
  color: #ffffff !important;
}

.gva_menu_main a[href="/enquire"]:hover {
  background-color: #555555;
}

/* Apply = primary CTA → orange (the scarce colour, so it stands out) */
.gva_menu_main a[href="/apply"] {
  background-color: #f7921e !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.gva_menu_main a[href="/apply"]:hover {
  background-color: #db7e10 !important;
}

.gva-menu-contact-block {
  background-color: #1a1a1a;
  color: #ffffff;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  height: 100px;
  border-radius: 0;
}

.gva-menu-contact-block i {
  font-size: 16px;
  margin-right: 8px;
}

.gva-menu-contact-block .phone-number {
  display: block;
  font-weight: bold;
  font-size: 13px;
}

.hero-section,.page-banner,.view-header,.region-content-top {
  min-height: 600px;
  overflow: hidden;
}

.hero-fullscreen {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero-fullscreen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.1));
  z-index: 1;
}

.hero-fullscreen > * {
  position: relative;
  z-index: 2;
}

.hero-content {
  position: relative;
  top: -80px;
  text-align: center;
  color: #ffffff;
  padding: 0 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.hero-content h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}

.hero-content p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

/* Explore = secondary CTA → green. Soft shadow so it always separates from
   the hero photo behind it (even if a future hero has greenery). */
.btn-cta {
  background-color: #63ab45;
  color: #fff;
  padding: 0.75em 1.5em;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: background-color 0.3s ease;
}

.btn-cta:hover {
  background-color: #55903a;
  text-decoration: none;
}

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  color: white;
  animation: bounce 2s infinite;
  z-index: 3;
}

@keyframes bounce  {
  0%, 100%  {
    transform: translate(-50%, 0);
  }
  50%  {
    transform: translate(-50%, 10px);
  }
}

@media (max-width: 768px)  {
  .hero-content h1  {
    font-size: 2rem;
  }
  .hero-content p  {
    font-size: 1rem;
  }
  .btn-cta  {
    width: 100%;
  }
  .gva_menu_main a[href="/enquire"],.gva_menu_main a[href="/apply"],.gva-menu-contact-block  {
    display: none;
  }
}

.gva_menu_main > li:last-child,.gva_menu_main > li:nth-last-child(2) {
  margin-left: 0;
}

.gva_menu_main > li.menu-item--enquire {
  margin-left: 0;
}

.gva_menu_main > li.menu-item--apply {
  margin-left: 0;
}

.webform-button--submit {
  background-color: #63ab45;
  color: #fff;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.webform-button--submit:hover {
  background-color: #55903a;
}

.webform-submission-form {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  max-width: 700px;
  margin: 2rem auto;
  position: relative;
  padding-bottom: 4rem;
}

.webform-button--previous {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: transparent !important;
  color: #006d77 !important;
  font-weight: bold;
  border: none;
  font-size: 1rem;
  text-decoration: underline;
  padding: 0;
}

.webform-actions {
  text-align: center !important;
  margin-top: 2rem;
}

@media (max-width: 768px)  {
  .webform-button--previous  {
    top: 0.5rem;
    left: 0.5rem;
  }
  .webform-button--next,.webform-button--submit  {
    width: 100%;
    max-width: 90%;
  }
}

.webform-button--next,.webform-button--submit,.webform-button--previous {
  background-color: #c3dc00 !important;
  color: #000000 !important;
  font-weight: bold;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.webform-button--next:hover,.webform-button--submit:hover,.webform-button--previous:hover {
  background-color: #b0ca00 !important;
}

.iti__flag-container {
  display: none !important;
}

.iti__selected-flag {
  display: none !important;
  pointer-events: none;
}

.iti input[type="tel"] {
  padding-left: 10px !important;
}

.heading-above {
  position: relative;
  top: -60px;
  margin-bottom: -40px;
}

.form-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: black;
  text-align: center;
}

.form-tagline {
  font-size: 0.9rem;
  text-align: center;
  color: black;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.form-intro {
  font-size: 1.1rem;
  color: gray;
  text-align: center;
  margin-bottom: 2rem;
}

.webform-submission-form .form-wrapper {
  margin-bottom: 0.1rem;
}

.webform-submission-form .form-item {
  margin-bottom: 0.1rem;
}

.webform-submission-form .webform-description {
  margin-bottom: 0.1rem;
}

.webform-button--next,.webform-button--submit {
  background-color: #c4f000 !important;
  color: #000000 !important;
  padding: 14px 32px !important;
  border-radius: 30px !important;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
  text-align: center;
  display: inline-block;
}

.webform-button--next:hover,.webform-button--submit:hover {
  background-color: #a8d000 !important;
}

@media (max-width: 768px)  {
  .webform-submission-form .form-item  {
    width: 100% !important;
  }
}

.user-one__content .block-menu.menu--account .gva_menu li:first-child a::before {
  content: "\f2bd";
}

.user-one__content .block-menu.menu--account .gva_menu li:last-child a::before {
  content: "\f2f5";
}

.user-one__content .block-menu.menu--account .gva_menu li:nth-child(1) a::before {
  content: "\f2bd";
}

.user-one__content .block-menu.menu--account .gva_menu li:nth-child(2) a::before {
  content: "\f2f5";
}

.user-one__content .block-menu.menu--account .gva_menu li:nth-child(3) a::before {
  content: "\f234";
  color: #000;
}

.user-one__content .block-menu.menu--account {
  background: #fff;
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  min-width: 200px;
}

.user-one__content .block-menu.menu--account .block-content {
  padding: 0 !important;
  box-shadow: none !important;
  background: none !important;
  border-radius: 0 !important;
}

.user-one__content .block-menu.menu--account .gva_menu a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #000 !important;
  text-decoration: none;
  border-radius: 0;
}

.user-one__content .block-menu.menu--account .gva_menu a:hover {
  background-color: #f5f5f5;
  color: #000 !important;
}

.user-one__content .block-menu.menu--account .gva_menu a::before {
  font-family: "Line Awesome Free", "Font Awesome 5 Free", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  display: inline-block;
  color: #000;
}

.user-one__content .block-menu.menu--account .gva_menu a[href*="/user/login"]::before {
  content: "\f2bd";
}

.user-one__content .block-menu.menu--account .gva_menu a[href*="/user/logout"]::before {
  content: "\f2f5";
}

.user-one__content .block-menu.menu--account .gva_menu a[href*="/user/register"]::before {
  content: "\f234";
}

.user-one__icon {
  background-color: #1a1a1a;
  border-radius: 50%;
  padding: 12px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

.user-one__icon .icon {
  font-family: "Line Awesome Free", "Font Awesome 5 Free";
  font-weight: 400;
  font-size: 2rem;
  color: #ffffff;
  line-height: 1;
}

.user-one__icon:hover {
  background-color: #333333;
}

.user-one__content .block-menu.menu--account,.user-one__content .block-menu.menu--account .block-content,.user-one__content .block-menu.menu--account .gva_menu {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.page-user-login *,.page-user-pass * {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
}

.page-user-login .layout-container,.page-user-pass .layout-container,.page-user-login .main-content,.page-user-pass .main-content,.page-user-login .region__content,.page-user-pass .region__content,.page-user-login .block-user-login-block,.page-user-pass .block-user-pass {
  background: #1a1a1a !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.page-user-login .tabs,.page-user-pass .tabs {
  background: #1a1a1a !important;
  margin: 0 !important;
  padding: 1rem 1.5rem 0.5rem !important;
}

.page-user-login .tabs a,.page-user-pass .tabs a {
  color: #bbb !important;
  background: none !important;
}

.page-user-login .tabs .is-active a,.page-user-pass .tabs .is-active a {
  color: #fff !important;
  font-weight: bold !important;
}

.page-user-login form,.page-user-pass form {
  background: #1a1a1a !important;
  padding: 1.5rem !important;
}

.page-user-login label,.page-user-pass label,.page-user-login .form-item,.page-user-pass .form-item {
  color: #fff !important;
}

.page-user-login input.form-text,.page-user-login input.form-email,.page-user-login input.form-password,.page-user-pass input.form-text,.page-user-pass input.form-email {
  background: #2a2a2a !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  border-radius: 6px !important;
  padding: 0.6rem !important;
  width: 100% !important;
}

.page-user-login input::placeholder,.page-user-pass input::placeholder {
  color: #bbb !important;
}

.page-user-login input.form-submit,.page-user-pass input.form-submit {
  visibility: visible !important;
  display: inline-block !important;
  background-color: #c4f000 !important;
  color: #000 !important;
  font-weight: bold !important;
  padding: 0.6rem 1.2rem !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  margin-top: 1rem !important;
}

.page-user-login input.form-submit:hover,.page-user-pass input.form-submit:hover {
  background-color: #a8d000 !important;
}

.page-user-login img,.page-user-pass img {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  max-height: 80px !important;
  display: block !important;
  margin: 1rem auto !important;
}

body.page-user-login,body.page-user-pass {
  background: #0d1b2a !important;
  background-size: cover !important;
  background-position: center !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.page-user-login .tabs a[href*="/user/register"],.page-user-pass .tabs a[href*="/user/register"] {
  display: none !important;
}

.page-user-reset .form-actions {
  display: block !important;
  text-align: center;
  margin-top: 2rem;
}

.page-user-reset .form-actions input[type="submit"] {
  display: inline-block !important;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  background-color: #c6f300;
  border: none;
  cursor: pointer;
}

.user-dashboard h2 {
  font-size: 2rem;
  font-weight: 600;
}

.dashboard-cards .card {
  border: none;
  transition: transform 0.2s ease;
  background-color: #f8f9fa;
  border-radius: 0.75rem;
}

.dashboard-cards .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.dashboard-cards i {
  color: #1a1a1a;
}

.header-one__main .gva_menu_main > li > a:not([href="/enquire"]):not([href="/apply"]):hover {
  color: #5DB075 !important;
}

.header-one__main .gva_menu_main > li.is-active > a:not([href="/enquire"]):not([href="/apply"]),.header-one__main .gva_menu_main > li.active > a:not([href="/enquire"]):not([href="/apply"]),.header-one__main .gva_menu_main > li.menu-item--active-trail > a:not([href="/enquire"]):not([href="/apply"]) {
  color: #5DB075 !important;
}

/* Hide the contextual-link gear button only.
   IMPORTANT: do NOT hide .contextual-region — Drupal adds that class to the
   content blocks/node themselves for editors, so hiding it blanks the whole
   page for logged-in admins (this was the cause of the admin "white page"). */
.contextual {
  display: none !important;
}

.impact-hero-subheadline {
  color: #e59218;
  font-size: 1.3rem;
  margin-top: 0.7rem;
}

.impact-summary-block {
  background: #f4f5f7;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 44px 0 38px 0;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
}

.impact-summary-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}

.impact-summary-author {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
}

.impact-summary-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #e0e0e0;
  font-size: 2.8rem;
  color: #5cb85c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.impact-summary-avatar-icon {
  background: #5cb85c;
  color: #fff;
}

.impact-summary-avatar-icon .fa-user-circle {
  font-size: 2.5rem;
  color: #fff;
}

.impact-summary-author-name {
  font-weight: 600;
  font-size: 1.18rem;
  color: #3d4852;
}

.impact-body-block {
  display: flex;
  justify-content: center;
  margin: 26px 0 50px 0;
}

.impact-body-inner {
  max-width: 700px;
  width: 100%;
  font-size: 1.08rem;
  line-height: 1.7;
  color: #22292f;
}

.impact-body-inner blockquote {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #ffb347;
  border: none;
  border-radius: 0;
  padding: 44px 0 38px 0;
  margin-top: 2.6em;
  margin-bottom: 2.6em;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.comment-wrapper,.impact-comments-block,#comments,#node-single-comment,.impact-blog-comments {
  max-width: 700px;
  margin: 0 auto 64px auto !important;
  width: 100%;
  display: block;
}

.impact-hero-inner,.impact-hero-title,.impact-hero-subheadline {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.impact-blog-comments,#comments,#node-single-comment,.comment-wrapper,.impact-comments-block {
  max-width: 700px;
  margin: 0 auto 64px auto !important;
  width: 100%;
  display: block;
}

.impact-summary-author img,.impact-summary-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.impact-summary-content {
  font-size: 1.19rem;
  color: #353a3e;
  line-height: 1.58;
  margin-top: 1em;
}

.impact-body-inner blockquote:nth-of-type(1) {
  background: #ffb347;
}

.impact-body-inner blockquote:nth-of-type(2) {
  background: #353a3e;
}

.impact-body-inner blockquote > * {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  color: #f4f5f7 !important;
  font-size: 1.18rem;
  font-style: italic;
  text-align: left;
  background: transparent !important;
  border: none !important;
  box-sizing: border-box;
  padding: 0;
}

@media (max-width: 768px)  {
  .impact-body-inner blockquote  {
    padding-left: 16px;
    padding-right: 16px;
  }
  .impact-body-inner blockquote > *  {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 768px)  {
  .impact-summary-inner,.impact-body-inner,.impact-body-inner blockquote > *  {
    padding-left: 18px;
    padding-right: 18px;
    box-sizing: border-box;
  }
}

.filter-guidelines,div.filter-guidelines,.form-item--filter-guidelines {
  display: none !important;
}

#edit-comment-body-0-format-help,div[data-drupal-selector$="format-help"] {
  display: none !important;
}

#edit-comment-body-0-format-help,[data-drupal-selector="edit-comment-body-0-format-help"],#edit-comment-body-0-format-help-about,.js-form-wrapper.form-wrapper a[href*="/filter/tips"],div[data-drupal-selector$="format-help"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.js-filter-guidelines,div.js-filter-guidelines,.form-item--filter-guidelines,#edit-comment-body-0-format-guidelines,#edit-comment-body-0-format-help,div[data-drupal-selector$="format-guidelines"],div[data-drupal-selector$="format-help"],#edit-comment-body-0-format-help-about,#edit-comment-body-0-format-guidelines {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.impact-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  min-height: 600px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  z-index: 2;
  height: 100vh;
  background-repeat: no-repeat;
  justify-content: center;
}

.impact-hero-inner {
  padding: 80px 48px 54px 48px;
  max-width: 900px;
  margin: 0 auto;
  background: rgba(0,0,0,0.26);
  border-radius: 0 0 32px 0;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.impact-hero-title {
  color: #fff;
  font-size: 3.2rem;
  font-weight: bold;
  margin: 0;
  text-align: center;
  padding: 0 16px;
  line-height: 1.1;
}

@media (max-width: 768px)  {
  .impact-hero  {
    height: auto;
    min-height: 360px;
  }
}

.menu .menu__submenu a,.gva_menu .sub-menu a,ul.menu li ul li a {
  color: #111 !important;
  background: #fff !important;
}

.menu .menu__submenu a:hover,.menu .menu__submenu a.is-active,.menu .menu__submenu a.active,.menu .menu__submenu a.current,.gva_menu .sub-menu a:hover,.gva_menu .sub-menu a.is-active,.gva_menu .sub-menu a.active,.gva_menu .sub-menu a.current,ul.menu li ul li a:hover,ul.menu li ul li a.is-active,ul.menu li ul li a.active,ul.menu li ul li a.current {
  color: #5DB075 !important;
  background: #fff !important;
}

.crm-contact-employer-section,#employer_id {
  display: none !important;
}

/* =========================================================
   MOBILE MENU — GVI-style: hamburger far right + white, drawer from right
   (mobile only; desktop nav is untouched)
   ========================================================= */
@media (max-width: 1024px) {

  /* Hamburger pinned to the far-right edge (overrides the theme's right:120px) */
  .header-one__main .menu-bar-mobile,
  .has-button .menu-bar-mobile {
    right: 6px;
    left: auto;
  }

  /* WHITE bars on the dark header */
  .header-one__main .menu-bar-mobile span,
  .has-button .menu-bar-mobile span {
    background-color: #ffffff !important;
  }

  /* GVI-style icon: bigger tap target, bolder + wider bars with soft ends,
     evenly spaced. */
  .header-one__main .menu-bar-mobile,
  .has-button .menu-bar-mobile {
    width: 34px;
    height: 34px;
    margin-top: -17px;        /* keep vertically centred (half of new height) */
  }
  .header-one__main .menu-bar-mobile span,
  .has-button .menu-bar-mobile span {
    width: 30px;          /* middle line = longest (default) */
    height: 3px;
    border-radius: 3px;
    left: auto;           /* right-align all bars */
    right: 0;
  }
  /* Even vertical spacing: explicit positions, ~6px gaps (more breathing room) */
  .header-one__main .menu-bar-mobile span.one,
  .has-button .menu-bar-mobile span.one {
    top: 6px;
    bottom: auto;
  }
  .header-one__main .menu-bar-mobile span.two,
  .has-button .menu-bar-mobile span.two {
    top: 15px;
    bottom: auto;
    margin-top: 0;
    margin-bottom: 0;
  }
  .header-one__main .menu-bar-mobile span.three,
  .has-button .menu-bar-mobile span.three {
    top: 24px;
    bottom: auto;
  }

  /* GVI-style detail: MIDDLE line longest; top + bottom SHORTER, right-aligned */
  .header-one__main .menu-bar-mobile span.one,
  .header-one__main .menu-bar-mobile span.three,
  .has-button .menu-bar-mobile span.one,
  .has-button .menu-bar-mobile span.three {
    width: 22px;
  }

  /* Push the in-flow icons (account/search) left so they sit to the LEFT of the
     absolutely-positioned hamburger instead of under it. */
  .header-one__right {
    padding-right: 56px;
  }

  /* Drawer slides in from the RIGHT instead of the left */
  .gva-offcanvas-mobile {
    left: auto !important;
    right: 0 !important;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
  }
  .gva-offcanvas-mobile.show-view {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
  }

  /* Close (x) button to the top-right of the panel, matching the slide side */
  .gva-offcanvas-mobile .close-offcanvas {
    margin-left: auto;
    text-align: right;
  }

  /* Cleaner account icon: drop the heavy dark circle + shadow (reads as a smudge
     on the dark header) — a crisp white user icon in a FIXED-width box so the
     dropdown stays anchored to it. */
  .user-one__box .user-one__icon {
    background-color: transparent !important;
    box-shadow: none !important;
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .user-one__box .user-one__icon:hover {
    background-color: transparent !important;
  }
  .user-one__box .user-one__icon .icon {
    font-size: 2.1rem;
    color: #ffffff;
  }

  /* Keep the dropdown anchored to the icon at ALL mobile/tablet widths.
     (The theme only forces right:0 below 767px, so on tablet the dropdown
     fell back to the desktop right:-20px and drifted off the icon.) */
  .user-one__content {
    right: 0 !important;
  }
  /* Pointer under the icon centre (theme hard-codes 45px for the old big circle) */
  .user-one__content:after {
    right: 12px;
  }

  /* --- Shorter, more balanced header on mobile (100px -> 80px) --- */
  .header-one__main,
  .gv-sticky-menu.is-sticky .header-one__main {
    height: 80px !important;
  }
  body {
    /* Mobile header is 80px; reserve toolbar + header so logged-in editing
       matches the anonymous view (see desktop body rule above). */
    padding-top: calc(var(--drupal-displace-offset-top, 0px) + 80px) !important;
  }

  /* Keep the Drupal admin toolbar BAR pinned to the top on mobile.
     On narrow screens Drupal drops the `toolbar-fixed` body class, so its
     core rule `.toolbar-fixed .toolbar-oriented .toolbar-bar{position:fixed}`
     stops matching and the bar falls back to `position:absolute; top:0`
     (pinned to the document, not the viewport). It then scrolls out of view
     while our fixed site header stays offset below it, leaving an empty band
     above the menu. Forcing the bar fixed keeps it stuck to the top so the
     header sits directly beneath it and the gap closes. (Drupal already
     fixes the vertical tray itself.) */
  #toolbar-bar.toolbar-bar,
  .toolbar .toolbar-bar {
    position: fixed !important;
    top: 0 !important;
    inset-inline: 0 !important;
  }

  header .site-branding-logo {
    padding: 8px 0 !important;
  }
  header .site-branding-logo img,
  .header-one__branding img {
    max-height: 60px;
    width: auto;
  }

  /* =======================================================================
     MOBILE SLIDE-OUT DRAWER — clean vertical menu.
     Everything here is scoped to .gva-offcanvas-mobile inside the mobile
     breakpoint, so the DESKTOP menu is completely unaffected.
     ======================================================================= */

  /* Panel */
  .gva-offcanvas-mobile {
    max-width: 300px;
    padding-top: 0;
  }

  /* X close button: clean, right-aligned, decent tap target */
  .gva-offcanvas-mobile .close-offcanvas {
    text-align: right !important;
    padding: 18px 24px 6px !important;
    border-bottom: none !important;
    cursor: pointer;
  }
  .gva-offcanvas-mobile .close-offcanvas i {
    font-size: 1.5rem;
    line-height: 1;
    color: #1a1a1a;
  }

  /* Remove the block-wrapper divider line under the menu (theme adds a border) */
  .gva-offcanvas-mobile .block {
    border-bottom: none !important;
  }

  /* Undo the desktop horizontal layout (flex / fixed height) -> vertical list */
  .gva-offcanvas-mobile .gva_menu_main {
    display: block !important;
    height: auto !important;
    flex-direction: column;
    padding: 6px 0;
  }
  .gva-offcanvas-mobile .gva_menu_main > li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
  /* kill any divider drawn via pseudo-elements on the list items */
  .gva-offcanvas-mobile .gva_menu_main > li:before,
  .gva-offcanvas-mobile .gva_menu_main > li:after {
    display: none !important;
  }

  /* Clean items: NO dividers, generous spacing, elegant uppercase, smooth hover */
  .gva-offcanvas-mobile .gva_menu_main > li > a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 13px 30px !important;
    text-align: left !important;
    color: #1a1a1a !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: color 0.2s ease, padding-left 0.2s ease;
  }
  /* hover + current page: green, with a subtle indent */
  .gva-offcanvas-mobile .gva_menu_main > li > a:hover,
  .gva-offcanvas-mobile .gva_menu_main > li.menu-item--active-trail > a,
  .gva-offcanvas-mobile .gva_menu_main > li.active > a {
    color: #5DB075 !important;
    padding-left: 37px !important;
    background: none !important;
  }

  /* ENQUIRE & APPLY now live in the fixed bottom bar -> remove from the menu */
  .gva-offcanvas-mobile .gva_menu_main > li > a[href="/enquire"],
  .gva-offcanvas-mobile .gva_menu_main > li > a[href="/apply"] {
    display: none !important;
  }
}

/* ============================================================
   MOBILE STICKY CTA BAR (Enquire | Apply) — GVI-style.
   Hidden on desktop; fixed to the bottom of the viewport on mobile.
   ============================================================ */
.mobile-cta-bar { display: none; }

@media (max-width: 1024px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.18);
  }
  .mobile-cta-bar .mobile-cta {
    flex: 1 1 50%;
    text-align: center;
    padding: 16px 8px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: filter 0.15s ease;
  }
  .mobile-cta-bar .mobile-cta:active {
    filter: brightness(0.9);
  }
  .mobile-cta--enquire {
    background: #1f1f1f;
    color: #ffffff;
  }
  .mobile-cta--apply {
    background: #f7921e;
    color: #ffffff;
  }
  /* leave room so the fixed bar never covers page content */
  body {
    padding-bottom: 58px;
  }
  /* hide the bar while the slide-out drawer is open, so they don't overlap */
  body:has(.gva-offcanvas-mobile.show-view) .mobile-cta-bar {
    display: none !important;
  }
}

/* =======================================================================
   "CHOOSE YOUR ADVENTURE" — exposed filter as pills (transparent)
   The dark background is set on the block in the PAGE BUILDER, so this
   styles the filter TRANSPARENTLY on top of it: full-width pill rows,
   outlined Programme pills + translucent Location pills, brand-green
   active state, light labels.

   Scoped to the view's own wrapper + the stable exposed-form id
   (.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"])
   rather than a page-builder column id, so it SURVIVES page-builder edits
   (moving the block changes the column id, which previously broke this).
   The `.listing-filter-top` prefix is needed to outrank Gavias's own
   `.listing-filter-top .views-exposed-form …` layout rules. Filtering is
   instant (BEF AJAX); the keyword box + Apply button are hidden.
   ======================================================================= */
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"],
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .js-form-type-select,
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .view-content-1,
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .view-content-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] {
  display: flex !important;
  flex-direction: column;
  gap: 22px;
  padding: 6px 0 !important;
}

/* hide the keyword search filter and the Apply submit (AJAX auto-applies) */
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .form-item-title,
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .form-actions {
  display: none !important;
}

/* each filter group → full width, single column, no float/icon slot */
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .js-form-type-select {
  float: none !important;
  clear: both;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .js-form-type-select::before {
  content: none !important;
  display: none !important;
}
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .js-form-type-select > label {
  display: block;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* the BEF link list → horizontal pill row (kills default list bullets) */
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .bef-links,
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .bef-links ul {
  list-style: none !important;
  margin: 0;
  padding: 0;
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  background: transparent !important;
}
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .bef-links li {
  margin: 0 !important;
  list-style: none !important;
}

/* base pill */
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] a.bef-link {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.16s ease;
}
/* Programme row → outlined pills */
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .form-item-field-listing-category-target-id a.bef-link {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
}
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .form-item-field-listing-category-target-id a.bef-link:hover {
  border-color: #ffffff;
}
/* Location row → translucent fill pills (works on any dark bg) */
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .form-item-field-listing-location-target-id a.bef-link {
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .form-item-field-listing-location-target-id a.bef-link:hover {
  background: rgba(255, 255, 255, 0.18);
}
/* active pill → accent green #63ab45 (lime is reserved for the Apply CTA) */
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] a.bef-link.bef-link--selected {
  background: #63ab45 !important;
  border-color: #63ab45 !important;
  color: #ffffff !important;
  font-weight: 700;
}

/* relabel the first ("Any") pill in each row to just "All" — pure CSS so it
   survives BEF's AJAX re-render; the "All" option is always first */
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .bef-links li:first-child a.bef-link {
  font-size: 0 !important;
}
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .bef-links li:first-child a.bef-link::before {
  content: "All";
  font-size: 14px;
  font-weight: inherit;
  letter-spacing: 0;
}
/* relabel the second filter from "Country" to "Location" */
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .form-item-field-listing-location-target-id > label {
  font-size: 0 !important;
}
.listing-filter-top form[id^="views-exposed-form-listing-content-block-5"] .form-item-field-listing-location-target-id > label::before {
  content: "Location";
  font-size: 12px;
  font-weight: inherit;
  letter-spacing: 0.1em;
}

/* Blog category tag — straighten the tilted/rotated label into a clean
   rounded tag (the theme rotates it ~-6deg with sharp corners). */
.post-categories {
  transform: none !important;
  border-radius: 4px !important;
}

/* Listing-card gallery (camera/video) toggle → logo blue #0696ba.
   This is where the third brand colour lives — small and purposeful, so
   blue has a home without competing with the green/orange. */
.listing-one__preview a.image-popup,
.listing-one__preview a.image-popup i,
.listing-one__preview i.icon {
  color: #0696ba !important;
}

/* New listing-card meta rows (Country + Start date) — match the old meta look */
.listing-one__meta .listing-one__location,
.listing-one__meta .listing-one__startdate {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #797f89;
  font-weight: 600;
}
.listing-one__meta .listing-one__location i,
.listing-one__meta .listing-one__startdate i {
  color: #63ab45;
  font-size: 18px;
}

/* Programme/listing card title -> brand orange */
.listing-one__single .listing-one__title a { color: #f7921e; }
.listing-one__single .listing-one__title a:hover { color: #db7e10; }

/* =======================================================================
   PROGRAMMES grid — exposed filter pills (mirrors the listing "Choose your
   adventure" filter). Self-contained dark band so it works wherever placed.
   Band colour (#16241d) is easily changed.
   ======================================================================= */
form[id^="views-exposed-form-programmes"] {
  background: #16241d !important;
  box-shadow: none !important; border: 0 !important;
  display: flex !important; flex-direction: column; gap: 22px;
  padding: 28px 30px !important; border-radius: 14px;
}
form[id^="views-exposed-form-programmes"] .js-form-type-select,
form[id^="views-exposed-form-programmes"] .view-content-wrapper {
  background: transparent !important; box-shadow: none !important; border: 0 !important;
}
form[id^="views-exposed-form-programmes"] .form-item-title,
form[id^="views-exposed-form-programmes"] .form-actions { display: none !important; }
form[id^="views-exposed-form-programmes"] .js-form-type-select {
  float: none !important; clear: both; width: 100% !important; margin: 0 !important; padding: 0 !important;
}
form[id^="views-exposed-form-programmes"] .js-form-type-select::before { content: none !important; display: none !important; }
form[id^="views-exposed-form-programmes"] .js-form-type-select > label {
  display: block; margin: 0 0 12px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.65) !important;
}
form[id^="views-exposed-form-programmes"] .bef-links,
form[id^="views-exposed-form-programmes"] .bef-links ul {
  list-style: none !important; margin: 0; padding: 0; width: 100% !important;
  display: flex !important; flex-wrap: wrap; gap: 10px; background: transparent !important;
}
form[id^="views-exposed-form-programmes"] .bef-links li { margin: 0 !important; list-style: none !important; }
form[id^="views-exposed-form-programmes"] a.bef-link {
  display: inline-block; padding: 10px 20px; border-radius: 999px; font-size: 14px;
  font-weight: 600; line-height: 1.25; text-decoration: none; white-space: nowrap; transition: all 0.16s ease;
}
form[id^="views-exposed-form-programmes"] .form-item-field-prog-category-target-id a.bef-link {
  background: transparent; border: 1.5px solid rgba(255,255,255,0.4); color: #fff;
}
form[id^="views-exposed-form-programmes"] .form-item-field-prog-category-target-id a.bef-link:hover { border-color: #fff; }
form[id^="views-exposed-form-programmes"] .form-item-field-prog-location-target-id a.bef-link {
  background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.12); color: #fff;
}
form[id^="views-exposed-form-programmes"] .form-item-field-prog-location-target-id a.bef-link:hover { background: rgba(255,255,255,0.18); }
form[id^="views-exposed-form-programmes"] a.bef-link.bef-link--selected {
  background: #63ab45 !important; border-color: #63ab45 !important; color: #fff !important; font-weight: 700;
}

/* ===================== Programme detail / booking page ===================== */
.product--programme .listing-gallery { position: relative; }
.product--programme .listing-detail-hero img { width: 100%; max-height: 520px; object-fit: cover; display: block; }
.product--programme .listing-gallery .gallery-popup--listing { position: absolute; right: 20px; bottom: 20px; }
.product--programme .listing-gallery .gallery-popup--listing a.image-popup { display: none; }
.product--programme .listing-gallery .gallery-popup--listing a.image-first { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.55); }
.product--programme .listing-gallery .gallery-popup--listing a.image-first i { color: #fff !important; font-size: 20px; }
.product--programme .programme-booking { border: 1px solid #ececec; border-radius: 12px; padding: 24px; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.06); margin-bottom: 24px; }
.product--programme .programme-booking .title { margin-top: 0; }
.product--programme .commerce-order-item-add-to-cart-form .button,
.product--programme .commerce-order-item-add-to-cart-form input[type="submit"] {
  background: #f7921e !important; border-color: #f7921e !important; color: #fff !important;
  border-radius: 8px; padding: 12px 24px; font-weight: 700; width: 100%; box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.product--programme .commerce-order-item-add-to-cart-form .button:hover { background: #db7e10 !important; border-color: #db7e10 !important; }
.product--programme .commerce-order-item-add-to-cart-form select,
.product--programme .commerce-order-item-add-to-cart-form input[type="number"] {
  width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 14px;
}

/* Programme detail hero: static SQUARE multi-image band (matches listing) */
.product--programme .listing-gallery { position: relative; }
.product--programme .programme-gallery-strip { display: flex; gap: 4px; width: 100%; overflow: hidden; }
.product--programme .programme-gallery-strip .pg-item { flex: 1 1 0; aspect-ratio: 1 / 1; overflow: hidden; position: relative; }
.product--programme .programme-gallery-strip .pg-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product--programme .programme-gallery-strip .pg-item:after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.4); opacity: 0; transition: all .35s; z-index: 1; }
.product--programme .programme-gallery-strip .pg-item:hover:after { opacity: 1; }
.product--programme .programme-gallery-strip .pg-item a.image-popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 50px; height: 50px; background: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #000; font-size: 16px; z-index: 9; opacity: 0; transition: all .35s; }
.product--programme .programme-gallery-strip .pg-item:hover a.image-popup { opacity: 1; }
.product--programme .programme-gallery-strip .pg-item a.image-popup:hover { background: #63ab45; color: #fff; }
@media (max-width: 767px) {
  .product--programme .programme-gallery-strip { flex-wrap: wrap; gap: 2px; }
  .product--programme .programme-gallery-strip .pg-item { flex: 1 1 calc(50% - 2px); }
}