/* ============================================================================
   KORUMO THEME — STYLE.CSS
   ============================================================================
   
   Section guide (with mapping to Drupal Bootstrap Barrio CSS file structure
   for Al's reference when splitting into separate files):
   
   1.  CSS VARIABLES (Bootstrap overrides)             → colors.css OR top of style.css
   2.  BODY & GLOBAL RESETS                            → style.css (base)
   3.  LINKS                                           → style.css (base) — note: BB doesn't ship a typography.css, links live with body resets
   4.  BUTTONS                                         → style.css (base) — BB ships button styles inline; create buttons.css if you want it split
   5.  HEADINGS (h1–h6)                                → style.css (base) — same as above; create typography.css if splitting
   6.  PAGE STRUCTURE & FOOTER                         → split: page-wrapper → style.css; .site-footer rules → footer.css (BB ships this)
   7.  HEADER, NAVBAR & GIN ADMIN OVERRIDES            → header.css (BB ships this)
        7.1  Header region colour reset
        7.2  Header bar (#header / #navbar-top / #navbar-main)
        7.3  .navbar-brand (logo wrapper + image)
        7.4  Mobile / Desktop scroll-shrink behaviour
        7.5  Gin admin sticky overrides                → consider gin-overrides.css (custom)
   8.  TB MEGA MENU                                    → nav.css (BB) OR custom tb-megamenu.css
        8.1  Shared rules (all viewports)
        8.2  Desktop only (@media min-width 992px)
        8.3  Mobile only (@media max-width 991px)
        8.4  Mobile hamburger button
   9.  BREADCRUMBS                                     → nav.css (BB)
   10. IMAGES                                          → no BB equivalent — custom images.css OR keep in style.css
        10.1 Hero / Header images
        10.2 Featured images
        10.3 Other full-width images
   11. TABLES                                          → no BB ship file — custom tables.css OR keep in style.css
        11.1 Primary table
        11.2 Secondary table
   12. DASHBOARDS (general)                            → custom dashboards.css
   13. WEBFORM EDITS                                   → forms.css (BB) — also covers RTL color form helpers in section 2
   14. NOTIFICATIONS / ALERTS                          → messages.css (BB ships this)
   15. PAGE-SPECIFIC OVERRIDES                         → custom page-overrides.css (or split per-page)
        15.1 My Dashboard / Personal Dashboard
        15.2 Course Dashboard / Cohort Group
        15.3 Registration + My Account
        15.4 Events & Retreats
   
   Note for Al: Bootstrap Barrio's actual /css/ folder ships a small set of files
   (style.css, colors.css, messages.css, header.css, footer.css, nav.css, forms.css).
   Other splits above are suggestions for keeping things tidy — go with whatever
   matches your existing subtheme structure.
   
   Comment-banner tier system:
   • Tier 1 (section)               full ============= box
   • Tier 2 (subsection 8.1, 8.2)   multi-line ----- 8.1. Title ----- block
   • Tier 3 (within subsection)     /* ---------- Title ---------- */
/* • Tier 4 (mini-grouping) */
/* --- Title --- */
/* • Tier 5 (single rule) */
/* Description */

/* ============================================================================*/

/* ============================================================================
   1. CSS VARIABLES
   ============================================================================ */
:root {

  /* --- Core Colors --- */
  --bs-blue                     : #2A7FFF;
  --bs-indigo                   : #3550A0;
  --bs-purple                   : #6f42c1;
  --bs-pink                     : #C13584;
  --bs-red                      : #c71c22;
  --bs-orange                   : #FF6600;
  --bs-yellow                   : #fdc281;
  --bs-green                    : #1ca538;
  --bs-teal                     : #5CE1E6;
  --bs-cyan                     : #96D9EF;
  --bs-black                    : #080305;
  --bs-white                    : #ffffff;

  /* --- Gray Scale --- */
  --bs-gray                     : #999999;
  --bs-gray-dark                : #444444;
  --bs-gray-100                 : #FDFDFD;
  --bs-gray-200                 : #FAFAFA;
  --bs-gray-300                 : #F7F7F7;
  --bs-gray-400                 : #c6c6c6;
  --bs-gray-500                 : #999999;
  --bs-gray-600                 : #666666;
  --bs-gray-700                 : #444444;
  --bs-gray-800                 : #333333;
  --bs-gray-900                 : #222222;

  /* --- Theme Colors --- */
  /*Updated*/
  --bs-primary                  : #2a7fff;
  /* prev #333333 and before that #2fa4e7 */
  /*Updated*/
  --bs-secondary                : #FF6600;
  /* prev #09a2e4 */
  --bs-success                  : #4CAF50;
  /*Updated*/
  --bs-info                     : #96d9ef;
  /* prev #2a7fff and before that #033c73 */
  /*Updated*/
  --bs-warning                  : #E86800;
  /* prev #FF6600 and before that #FE8018 */
  --bs-danger                   : #c71c22;
  /* previously #e55c00 and before that #FF6600 and #E86800; */
  /*Updated*/
  --bs-light                    : #ffffff;
  /* prev #f8f9fa */
  /*Updated*/
  --bs-dark                     : #080305;
  /* prev #65320b */

  /* --- Theme Colors RGB --- */
  /*Updated*/
  --bs-primary-rgb              : 42, 127, 255;
  /*Updated*/
  --bs-secondary-rgb            : 255, 102, 0;
  --bs-success-rgb              : 76, 175, 80;
  /* previously 115, 168, 57 {RGB for #73a839} */
  /*Updated*/
  --bs-info-rgb                 : 150, 217, 239;
  --bs-warning-rgb              : 221, 86, 0;
  /* previously 221, 86, 0 {RGB for #dd5600} */
  --bs-danger-rgb               : 199, 28, 34;
  /*Updated*/
  --bs-light-rgb                : 255, 255, 255;
  /*Updated*/
  --bs-dark-rgb                 : 8, 3, 5;

  /* --- Text Emphasis Colors --- */
  /*Updated*/
  --bs-primary-text-emphasis    : #256fd6;
  /*Updated*/
  --bs-secondary-text-emphasis  : #e55c00;
  /* previously #5B595A */
  --bs-success-text-emphasis    : #137333;
  /*Updated*/
  --bs-info-text-emphasis       : #122b3c;
  /* Same as "--gin-bg-info" previously #3550a0 {@TODO Check if that wasn't used anywhere} and before that #1877F2 */
  --bs-warning-text-emphasis    : #CF5D00;
  /* previously #e55c00; */
  --bs-danger-text-emphasis     : #500b0e;
  --bs-light-text-emphasis      : #96D9EF;
  --bs-dark-text-emphasis       : #44525A;
  /* previously #6A7780 and before that #383234; */

  /* --- Background Subtle Colors --- */
  --bs-primary-bg-subtle        : #EEF6FF;
  --bs-secondary-bg-subtle      : #EEF3F5;
  --bs-success-bg-subtle        : #E6F5EC;
  --bs-info-bg-subtle           : #DFECFF;
  --bs-warning-bg-subtle        : #fff3cd;
  --bs-danger-bg-subtle         : #FFF2E9;
  --bs-light-bg-subtle          : #ECECEC;
  --bs-dark-bg-subtle           : #E5E5E5;

  /* --- Border Subtle Colors --- */
  --bs-primary-border-subtle    : #94BFFF;
  --bs-secondary-border-subtle  : #121212CC;
  --bs-success-border-subtle    : #5CA97D;
  --bs-info-border-subtle       : #3B8CFC;
  --bs-warning-border-subtle    : #ffeeba;
  --bs-danger-border-subtle     : #E07B52;
  --bs-light-border-subtle      : #e9ecef;
  --bs-dark-border-subtle       : #adb5bd;

  /* --- White / Black RGB --- */
  --bs-white-rgb                : 255, 255, 255;
  --bs-black-rgb                : 0, 0, 0;

  /* --- Fonts --- */
  --bs-font-sans-serif          : 'Futura', 'Trebuchet MS', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace           : SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient                 : linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

  /* --- Body Styling --- */
  --bs-body-font-family         : var(--bs-font-sans-serif);
  --bs-body-font-size           : 1rem;
  --bs-body-font-weight         : 400;
  --bs-body-line-height         : 1.5;
  /*Updated*/
  --bs-body-color               : var(--bs-gray-600);
  /* prev #333333. @TODO To discuss with Al - would prefer to have the option of a secondary body colour too. */
  /*Updated*/
  --bs-body-color-rgb           : 102, 102, 102;
  --bs-body-bg                  : #fff;
  --bs-body-bg-rgb              : 255, 255, 255;

  /* --- Emphasis / Secondary / Tertiary --- */
  --bs-emphasis-color           : #000;
  --bs-emphasis-color-rgb       : 0, 0, 0;
  --bs-secondary-color          : rgba(73, 80, 87, 0.75);
  --bs-secondary-color-rgb      : 73, 80, 87;
  --bs-secondary-bg             : #F9F9F9;
  --bs-secondary-bg-rgb         : 249, 249, 249;
  --bs-tertiary-color           : rgba(73, 80, 87, 0.5);
  --bs-tertiary-color-rgb       : 73, 80, 87;
  --bs-tertiary-bg              : #EEF3F5;
  --bs-tertiary-bg-rgb          : 238, 243, 245;
  --bs-heading-color            : #080305;
  /* @TODO To discuss with Al - not sure if correct. */

  /* --- Link Colors --- */
  --bs-link-color               : #e55c00;
  --bs-link-color-rgb           : 229, 92, 0;
  --bs-link-decoration          : none;
  /* @TODO Nina to confirm if correct */
  --bs-link-hover-color         : #CC5200;
  --bs-link-hover-color-rgb     : 204, 82, 0;
  /* @TODO AL {delete this comment and maybe the below after reading} FYI newly added items below as I saw it was pulling this in on the site and we didn't have these declared BUT they weirdly don't seem to change anything so maybe we delete them? */
  --bs-nav-link-color           : #777777;
  --bs-nav-link-hover-color     : #A0A0A0;
  --bs-nav-link-color-rgb       : 119, 119, 119;
  --bs-nav-link-hover-color-rgb : 160, 160, 160;
  /* End of newly added items */

  /* --- Code / Highlight --- */
  --bs-code-color               : #e83e8c;
  --bs-highlight-color          : #495057;
  --bs-highlight-bg             : #f8ddcc;

  /* --- Border Styles --- */
  --bs-border-width             : 1px;
  --bs-border-style             : solid;
  --bs-border-color             : #00000000;
  /* Transparent - there should be no borders as a default */
  --bs-border-color-translucent : rgba(0, 0, 0, 0.175);
  --bs-border-radius            : 0.5rem;
  /* previously 0.375rem */
  --bs-border-radius-sm         : 0.25rem;
  /* previously 0.25rem */
  --bs-border-radius-lg         : 0.75rem;
  /* previously 0.5rem */
  --bs-border-radius-xl         : 1rem;
  /* previously 1rem */
  --bs-border-radius-xxl        : 1.25rem;
  /* previously 2rem */
  --bs-border-radius-2xl        : 1.5rem;
  /* previously var(--bs-border-radius-xxl); */
  --bs-border-radius-pill       : 50rem;

  /* --- Box Shadows --- */
  --bs-box-shadow               : 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm            : 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg            : 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset         : inset 0 1px 2px rgba(0, 0, 0, 0.075);

  /* --- Focus / Form Validation --- */
  --bs-focus-ring-width         : 0.25rem;
  --bs-focus-ring-opacity       : 0.25;
  --bs-focus-ring-color         : rgba(47, 164, 231, 0.25);
  --bs-form-valid-color         : #73a839;
  --bs-form-valid-border-color  : #73a839;
  --bs-form-invalid-color       : #c71c22;
  --bs-form-invalid-border-color: #c71c22;

  /* --- Default header heights --- */
  --header-height               : 114px;
  --header-height-scrolled      : 3.375rem;

}


/* ============================================================================
   2. BODY & GLOBAL RESETS
   ============================================================================ */

body {
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
}

html,
body {
  height: 100%;
  /* Ensure full-height layout so footer sticks to bottom */
  overflow-x: hidden;
  /* Safety net so any stray full-width child can't push horizontal scroll */
}

/* Body text default colours */
body,
p,
li {
  color: var(--bs-body-color);
}

#page,
#main-wrapper,
.region-primary-menu .menu-item a.is-active,
.region-primary-menu .menu-item--active-trail a {
  background: var(--bs-body-bg);
}

.tabs ul.primary li a.is-active {
  background-color: var(--bs-white);
}

.tabs ul.primary li.is-active a {
  background-color: var(--bs-white);
  border-bottom-color: var(--bs-white);
}

.sidebar .block {
  background-color: var(--bs-secondary-color);
  border-color: var(--bs-border-color);
}

/* Slightly larger text utility */
.legible {
  font-size: 110% !important;
}

/* --- Color form helpers (RTL) --- */
[dir="rtl"] .color-form .color-palette {
  margin-left: 0;
  margin-right: 1.25rem;
}

[dir="rtl"] .color-form .form-item label {
  float: right;
}

[dir="rtl"] .color-form .color-palette .lock {
  right: -1.25rem;
  left: 0;
}


/* ============================================================================
   3. LINKS
   ============================================================================ */

a,
.link {
  color: var(--bs-link-color);
  text-decoration: none;
}

a:hover,
a:focus,
.link:hover,
.link:focus {
  color: var(--bs-link-hover-color);
  text-decoration: none;
  /* Buttons not supposed to have underline on links */
}

a:active,
.link:active {
  color: var(--bs-link-hover-color);
}

.nav-link {
  color: rgb(var(--bs-nav-link-color));
}

.nav-link:hover,
.nav-link:focus {
  color: rgb(var(--bs-nav-link-hover-color));
}

.nav-item .dropdown-item a.active {
  color: var(--bs-highlight-color);
}

.page-item.active .page-link {
  background-color: var(--bs-link-color);
  border-color: var(--bs-link-color);
}

.page-link,
.page-link:hover {
  color: var(--bs-link-hover-color);
}


/* ============================================================================
   4. BUTTONS
   ============================================================================ */

.btn {
  border-radius: 8px;
  line-height: 1.4;
  padding: 0.8rem 1.5rem;
  min-width: 160px;
  font-size: 1.1rem;
  font-weight: 600;
  /* Might need a way to switch between 500 and 600 for the default button */
  box-shadow: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid;
}

.btn:hover,
.btn:focus {
  text-decoration: none;
  transition: all 0.2s;
}

.btn-sm {
  line-height: 1.15;
  padding: 0.75rem 1.5rem;
  min-width: 150px;
  font-size: 0.95rem;
  font-weight: 500;
}

.btn-lg {
  line-height: 1.6;
  padding: 0.85rem 2rem;
  min-width: 185px;
  font-size: 1.25rem;
  font-weight: 600;
}

/* --- Primary --- */
.btn-primary {
  color: var(--bs-light);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bs-primary-text-emphasis);
  border-color: var(--bs-primary-text-emphasis);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  /* @TODO Need to add arrow icon - or maybe as separate class if that is how it should be done? */
}

.btn-outline-primary {
  color: var(--bs-primary) !important;
  /* TEMP making important because of temp link fix in tables */
  background-color: var(--bs-light);
  border: 2px solid var(--bs-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: var(--bs-dark) !important;
  /* TEMP making important because of temp link fix in tables */
  background-color: var(--bs-info);
  border: 2px solid var(--bs-info);
  /* Maybe change transition to none */
}

.btn-outline-primary-light {
  color: var(--bs-light);
  background-color: var(--bs-primary);
  border: 2px solid var(--bs-light);
}

.btn-outline-primary-light:hover,
.btn-outline-primary-light:focus {
  color: var(--bs-dark);
  background-color: var(--bs-info);
  border: 2px solid var(--bs-light);
}

/* --- Secondary --- */
.btn-secondary {
  color: var(--bs-light);
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--bs-secondary-text-emphasis);
  border-color: var(--bs-secondary-text-emphasis);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  /* @TODO Need to add arrow icon - or maybe as separate class if that is how it should be done? */
}

.btn-outline-secondary-light {
  color: var(--bs-light);
  background-color: var(--bs-secondary);
  border: 2px solid var(--bs-light);
}

.btn-outline-secondary-light:hover,
.btn-outline-secondary-light:focus {
  color: var(--bs-dark);
  background-color: var(--bs-info);
  border: 2px solid var(--bs-light);
}

.btn-outline-secondary-dark {
  color: var(--bs-light);
  background-color: var(--bs-secondary);
  border: 2px solid var(--bs-dark);
}

.btn-outline-secondary-dark:hover,
.btn-outline-secondary-dark:focus {
  color: var(--bs-dark);
  background-color: var(--bs-info);
  border: 2px solid var(--bs-dark);
}

/* --- Success / Danger / Info (placeholders for now) @TODO later --- */
.btn-success {
  /* Not set yet */
}

.btn-danger {
  /* Not set yet */
}

.btn-info {
  /* Not set yet */
}

.btn-info:hover,
.btn-info:focus {
  /* Not set yet */
}

.btn-link {
  /* N/A for now - I think?? */
}

/* --- Warning (@TODO needs icon on hover to use) --- */
.btn-warning {
  color: var(--bs-light);
  background-color: var(--bs-secondary);
  border-color: var(--bs-light);
  font-weight: 500;
}

.btn-warning:hover,
.btn-warning:focus {
  color: var(--bs-light);
  background-color: var(--bs-secondary);
  border-color: var(--bs-light);
  /* @TODO Need to add arrow icon - or maybe as separate class if that is how it should be done? */
}

/* --- Light / Dark --- */
.btn-light {
  color: var(--bs-light);
  background-color: transparent;
  /* #TODO To answer - Al is this okay or should it be var(--bs-border-color)? */
  border: 2px solid var(--bs-light);
}

.btn-light:hover,
.btn-light:focus {
  color: var(--bs-dark);
  background-color: var(--bs-info);
  border-color: var(--bs-light);
  transition: all 0.2s;
  /* Maybe change to none */
}

.btn-dark {
  color: var(--bs-dark);
  background-color: transparent;
  /* #TODO To answer - Al is this okay or should it be var(--bs-border-color)? */
  border: 2px solid var(--bs-dark);
}

.btn-dark:hover,
.btn-dark:focus {
  color: var(--bs-dark) !important;
  background-color: var(--bs-info) !important;
  border-color: var(--bs-dark);
  /* #TODO Maybe remove */
  transition: all 0.2s;
  /* Maybe change to none */
}

.btn-light-hover:hover,
.btn-light-hover:focus-visible {
  background-color: var(--bs-info) !important;
  border-color: var(--bs-info) !important;
  color: var(--bs-dark) !important;
}


/* ============================================================================
   5. HEADINGS (h1–h6)
   ============================================================================ */
/* @TODO Nina needs to compare with original non-KORUMO CSS file */

h1 {
  text-align: center;
  font-size: clamp(2.75rem, 6.5vw, 3.75rem);
  line-height: 1.15;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
  /* added so 30px padding subtracts from width rather than adding to it (prevents overflow on narrow columns) */
  max-width: 100%;
  /* prevents H1 from pushing wider than its column */
}

h1 a {
  font-size: clamp(2.75rem, 6.5vw, 3.75rem);
}

h2 {
  color: var(--bs-info-text-emphasis);
  font-weight: 500;
  font-size: clamp(2.025rem, 4.5vw, 3.375rem);
  line-height: 1;
  padding-bottom: 0.625rem;
  /* @TODO Need to check with Al if this is okay here */
}

h2 a {
  font-size: clamp(2.025rem, 4.5vw, 3.375rem);
}

h3 {
  color: var(--bs-info-text-emphasis);
  text-align: center;
  /* I think 2 variations of H2 maybe? Half the time will need it to be --bs-heading-color instead) */
  font-weight: 600;
  /* Check - maybe 700 */
  font-size: 2rem;
  /* baseline H2 - not from initial typography css - original style (don't know from where) looked like it had a calculation */
  line-height: 1.25;
  margin-bottom: 0.625rem;
  /* @TODO Need to check with Al if this is okay here */
  text-transform: uppercase;
}

h3 a {
  font-size: 2rem;
}

h4 {
  color: var(--bs-gray-dark);
  text-transform: capitalize;
  font-size: clamp(1.125rem, 2.5vw, 1.875rem);
  line-height: 1;
  letter-spacing: unset;
  font-weight: 500;
  padding-bottom: 10px;
  /* @TODO Need to check with Al if this is okay here */
  margin-bottom: 0;
  /* @TODO Need to check with Al if this is okay here */
}

h4 a {
  font-size: clamp(1.125rem, 2.5vw, 1.875rem);
  color: var(--bs-light);
}

h5 {
  font-size: clamp(1.3625rem, 2.333333333vw, 1.5625rem);
  color: var(--bs-dark);
  margin: 1.125rem 0 0.5rem 0;
  padding: 0 0 0.5rem 0;
  font-weight: 500;
}

h5 a {
  font-size: clamp(1.3625rem, 2.333333333vw, 1.5625rem);
}

h6 {
  color: var(--bs-secondary);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
}

h6 a {
  color: var(--bs-secondary);
}


/* ============================================================================
   6. PAGE STRUCTURE & FOOTER
   ============================================================================ */

/* ---------- Page wrapper / off-canvas / flex chain ---------- */

body .dialog-off-canvas-main-canvas {
  min-height: calc(100vh - 103px);
  display: flex;
  flex-direction: column;
}

.dialog-off-canvas-main-canvas,
#page-wrapper,
#page,
#main-wrapper {
  flex: 1 0 auto;
}

.main-content {
  margin-bottom: 80px;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--bs-body-color);
}

footer.site-footer {
  margin-top: auto;
}

/* ---------- Full-width helper ---------- */

.full-width {
  /* commented out duplicate property probably delete? width: 100vw; */
  width: calc(100vw - var(--drupal-displace-offset-left, 0px));
}

.region-wrapper-featured-top.full-width {
  overflow: hidden;
}


/* ============================================================================
   7. HEADER, NAVBAR & GIN ADMIN OVERRIDES
   ============================================================================
   Holds: #header (outer wrapper), #navbar-top (logo bar), #navbar-main (menu bar),
   .navbar-brand (logo wrapper + image sizing), Gin admin sticky overrides,
   and scroll-shrink behaviour. The TB Mega Menu styling lives in Section 8.
   ============================================================================ */


/* ----------------- 7.1. Header region colour reset --------------------- */

/* @TODO Nina compare with recent heading color settings she did */
.region-header,
.region-header a,
.region-header li a.is-active,
.region-header .site-branding__text,
.region-header .site-branding,
.region-header .site-branding__text a,
.region-header .site-branding a,
.region-secondary-menu .menu-item a,
.region-secondary-menu .menu-item a.is-active {
  color: var(--bs-body-color);
}


/* --- 7.2. Header bar (#header / #navbar-top / #navbar-main) ------------ */

/* CLAUDE SAYS NINA REVIEW: All "TEMP hiding while testing scroll behaviour" comment blocks (multiple commented-out chains setting height: 74px / 114px / 54px) were removed during cleanup. They were leftover early-attempt code, all commented out, so deleting them does not change behaviour. The active scroll-shrink solution lives in Section 7.4. Nina note: if shrink-on-scroll diagnosis points back at one of those, ask Claude to recover from chat history. */

/* ---------- #header — outer wrapper ---------- */
#header {
  display: flex;
  justify-content: space-between;
}

/* ---------- #navbar-top — logo bar ---------- */
/* + see scroll-shrink + mobile/desktop overrides in Section 7.4 */
#navbar-top {
  width: max-content;
  z-index: 499;
  padding: 0 32px 0 40px;
  overflow: hidden;
  height: var(--header-height);
  /* matches the menu bar height */
  display: flex;
  align-items: center;
  /* vertically centers .navbar-brand within it */
  background-color: var(--bs-white);
  transition: height 0.25s ease;
}

/* ---------- #navbar-main — menu bar ---------- */
/* + see scroll-shrink + mobile/desktop overrides in Section 7.4 */
#navbar-main {
  left: auto;
  width: 100%;
  /* was 100vw; changed to fix width overflow @TODO Nina delete comment */
  max-width: 100%;
  /* was calc(100vw - var(--drupal-displace-offset-left, 0px)); changed to fix width overflow @TODO Nina delete comment */
  z-index: 489 !important;
  display: flex;
  align-items: center;
  /* centers hamburger vertically on mobile, centers menu bar content on desktop */
  background-color: var(--bs-white);
  justify-content: right !important;
}

/* Default transition (applies all viewports — actual heights set per breakpoint in 7.4) */
header#header,
#navbar-main {
  transition: height 0.25s ease;
}


/* --------- 7.3. .navbar-brand (logo wrapper + image) ------------------- */

/* + see scroll-shrink overrides for image height in Section 7.4 */

/* @TODO AL FYI I removed the `color: var(--bs-secondary)` I had here - it was for an image, not text, so it does nothing. Empty placeholder kept for if we ever add textual brand fallback. */
.navbar-brand {
  /* not yet set */
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 65px;
}

/* Logo image — shrinks proportionally with header height via CSS variable */
.navbar-brand img {
  height: calc(var(--header-height) * 0.8);
  max-height: calc(var(--header-height) * 0.8);
  /* prevents flash of full-size image */
  width: auto;
  transition: height 0.25s ease;
}


/* ---- 7.4. Mobile / Desktop scroll-shrink behaviour -------------------- */

/* Body-class scroll trigger (added by JS when user scrolls) — applies to #navbar-top across viewports */
body.scrolled #navbar-top {
  height: var(--header-height-scrolled);
}

/* ---------- Mobile (max-width: 991px) ---------- */
@media (max-width: 991px) {

  :root {
    --header-height: 64px;
    /* mobile header height — match whatever the navbar actually is */
    --header-height-scrolled: 64px;
    /* no shrink on mobile */
  }

  #navbar-top {
    padding: 0 12px 0 20px;
    /* was padding: 0 12px 0 20px; */
    height: var(--header-height);
    /* explicit height so logo image sizes correctly inside it */
  }

  #navbar-main {
    height: var(--header-height);
    /* pinned so child .tbm-button (height: 100%) has something to fill */
  }

}

/* ---------- Desktop (min-width: 992px) ---------- */
@media (min-width: 992px) {

  /* Logged-out desktop: keep #navbar-main fixed so scroll-trigger JS can add body.scrolled.
     Gin/admin views override this later with .gin--core-navigation sticky rules. */
  #navbar-main {
    position: fixed;
    top: 0;
    right: 0;
  }

  header#header,
  #navbar-main {
    height: var(--header-height);
    transition: height 0.25s ease;
  }

  body.scrolled header#header,
  body.scrolled #navbar-main {
    height: var(--header-height-scrolled) !important;
    /* Unfortunate !important here - was needed to ensure navbar shrinks on scroll after other fixes layered up */
  }

  body.scrolled .navbar-brand img {
    height: calc(var(--header-height-scrolled) * 0.8);
  }

  body.scrolled #navbar-main .tbm-link.level-1,
  body.scrolled #navbar-main .tbm-item.level-1 {
    min-height: var(--header-height-scrolled);
    height: var(--header-height-scrolled);
  }

  /* @TODO AL please delete if happy to once you've read this - I think this partially solved the big white gap on admin views thing (also other things which is why I tested removing different parts of it)
  .gin--core-navigation #page,
  .gin--core-navigation .featured-top {
    padding-top: 50px;
  } end of section for Al to review/delete */

  .gin--core-navigation #navbar-main {
    /* @TODO AL please delete if happy to once you've read this - same here as the one above
    padding-top: 50px; */
    /* Sit above Gin admin toolbar (~999–1000) */
  }

}


/* --------- 7.5. Gin admin sticky overrides ----------------------------- */

/* Sticky positioning so admin tools work while scrolling */

.gin--core-navigation #navbar-top {
  position: sticky !important;
  top: 0;
  z-index: 499;
}

.gin--core-navigation #navbar-main {
  position: sticky !important;
  top: 0;
  /* NOTE: shrink-on-scroll does not apply on admin views (sticky overrides affix JS) */
}

.gin--core-navigation .gin-toolbar {
  position: sticky;
  top: 0;
  z-index: 1100;
}


/* ============================================================================
   8. TB MEGA MENU
   ============================================================================ */

/* -----------------------------------------------------------------------
   --------- 8.1. Shared rules (apply at all viewport widths) ------------
   ----------------------------------------------------------------------- */

/* + see desktop variations in Section 8.2; mobile variations in 8.3 */

/* ---------- Block + outer container ---------- */

/* Push menu to the right of the header */
#block-korumo-bootstrap-barrio-mainnavigation {
  margin-left: auto;
}

/* Top + bottom border on the menu bar */
#block-korumo-bootstrap-barrio-mainnavigation .tbm {
  border-top: 1px solid var(--bs-gray-300);
  border-bottom: 1px solid var(--bs-gray-300);
  background: var(--bs-white);
}

/* TB Megamenu's outer wrapper border reset */
.tbm.tbm-main.tbm-arrows {
  border: 0 !important;
}

/* Top-level nav lays out as a flex row */
#block-korumo-bootstrap-barrio-mainnavigation .tbm-nav {
  display: flex;
  align-items: stretch;
}

/* ---------- Top-level item ---------- */

/* Positioning anchor for the dropdown + no right border */
#block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-1,
.tbm-item.level-1 {
  position: relative;
  /* anchor for the absolute submenu */
  border-right: 0 !important;
}

/* Hover bridge: keeps submenu open when moving cursor from level-1 down to dropdown */
#block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-1::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 10px;
}

/* ---------- Submenus ---------- */

/* Top-level submenu (the floating dropdown box) */
#block-korumo-bootstrap-barrio-mainnavigation .tbm-submenu.tbm-item-child {
  position: absolute;
  overflow: visible;
  top: 100%;
  left: 0;
  right: auto;
  z-index: 500;
  width: 265px;
  border-top: 3px solid var(--bs-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: var(--bs-white);
}

/* Inner submenu reset */
#block-korumo-bootstrap-barrio-mainnavigation .tbm-submenu {
  margin-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: var(--bs-white);
  box-shadow: none;
}

/* Level-2 group container padding */
.tbm-group-container.tbm-item-child {
  padding: 1rem;
}

/* Column padding reset */
#block-korumo-bootstrap-barrio-mainnavigation .tbm-column {
  padding-left: 0;
  padding-right: 0;
}

/* ---------- Links: shared sizing/colour ---------- */

/* All four levels share base type styling */
#block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-1,
#block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-2,
#block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-3,
#block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-4 {
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--bs-nav-link-color);
  padding: 0.375rem 1.25rem;
  display: block;
}

/* Allow sub/sub-sub menu link text to wrap inside fixed-width dropdowns */
#block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-2,
#block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-3,
#block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-4 {
  white-space: normal;
  overflow-wrap: break-word;
  /* word-wrap: break-word; depreceated so have replaced it */
  background-color: var(--bs-white);
}

/* ---------- Hover/focus styling (split by level so level-1 isn't double-darkened) ---------- */
/* + see desktop opacity additions in Section 8.2; mobile :active bg additions in Section 8.3 */

/* Level-1 link hover/focus + always-show toggle hover/focus — dim opacity only (its parent already has a bg tint) */
#block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-1:hover,
#block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-1:focus,
.tbm-submenu-toggle.always-show:hover,
.tbm-submenu-toggle.always-show:focus,
#block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-1:hover .tbm-submenu-toggle.always-show {
  text-decoration: none;
  opacity: .7;
}

/* Sub/sub-sub link hover/focus styling — bg tint only (desktop adds opacity in 8.2; mobile :active in 8.3) */
#block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-2:hover,
#block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-2:focus,
#block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-3:hover,
#block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-3:focus,
#block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-4:hover,
#block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-4:focus {
  text-decoration: none;
  background-color: rgba(0, 0, 0, .03);
}

/* ---------- Toggle button (chevron arrow) ---------- */

/* Group title text-transform reset */
.tbm-group-title {
  text-transform: none;
}

.tbm-submenu-toggle.always-show {
  color: var(--bs-nav-link-color);
  background-color: transparent !important;
  margin-left: 5px;
  margin-right: 16px;
  width: 16px;
  display: block;
}

/* Don't add right padding to level-1 toggle link */
.tbm-link.level-1.tbm-toggle {
  padding-right: 0 !important;
}

/* ---------- Child indicator chevron icons ---------- */
/* CLAUDE SAYS NINA REVIEW: NEW FEATURE — adds a unicode chevron after links that have child menus, similar to the old site. Currently uses ▾ (down arrow) for items that open below and ▸ (right arrow) for items that open to the side. Easy to swap to FontAwesome or another icon font later — replace `content: "..."` and adjust `font-family` + size. Test on live site and tell me if you want different positioning/sizing. */

/* Items with a flat dropdown (level-1 with children) — use down chevron after the link text */
/* URGH CLAUDE DO NOT PUT THIS BACK THAT WAS MY FIX FOR THE DOUBLE ICONS AND YOUR DUMBASSEDLY JUST PUT THEM BACK 
#block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-1.tbm-item--has-dropdown>.tbm-link-container>.tbm-link::after {
  content: "▾";
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.85em;
  line-height: 1;
  vertical-align: middle;
  opacity: 0.7;
} */

/* Submenu items that have child menus (level-2/3/4 with .tbm-group) — use down chevron after the link text */
#block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-2.tbm-group>.tbm-link-container>.tbm-link::after,
#block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-3.tbm-group>.tbm-link-container>.tbm-link::after,
#block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-4.tbm-group>.tbm-link-container>.tbm-link::after {
  content: "▽";
  display: inline-block;
  float: right;
  font-size: 0.7em;
  line-height: 1;
  vertical-align: middle;
  margin-left: 0.313rem;
  padding: 0 0.25rem 0 2rem;
}

/* @TODO CLAUDE please confirm if the below is in the correct place probably not because its a new @media query */
@media (max-width: 991px) {

  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-2.tbm-group>.tbm-link-container>.tbm-link::after,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-3.tbm-group>.tbm-link-container>.tbm-link::after,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-4.tbm-group>.tbm-link-container>.tbm-link::after {
    font-size: 0.9em;
    font-weight: 900;
    line-height: 1;
  }

}

/* ---------- Cohort menu padding wrapper (specific to one block) ---------- */

.view-id-1_1_menu_my_groups.view-display-id-block_3 {
  padding: 0 45px;
}


/* -----------------------------------------------------------------------
   --------- 8.2. Desktop only (@media min-width: 992px) -----------------
   ----------------------------------------------------------------------- */

@media (min-width: 992px) {

  /* Padding to even out left and right padding */
  #block-korumo-bootstrap-barrio-mainnavigation {
    padding-right: 24px;
  }

  /* ---------- Hover-to-open behaviour ---------- */

  /* Top-level submenu opens when hovering its level-1 parent */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-1.tbm-item--has-dropdown:hover>.tbm-submenu.tbm-item-child,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-1.tbm-item--has-dropdown:focus-within>.tbm-submenu.tbm-item-child {
    display: block;
    visibility: visible;
    opacity: 1;
  }

  /* Sub-submenu opens ONLY when hovering its specific level-2 group parent (rather than when submenu opens) */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-2.tbm-group:hover>.tbm-group-container.tbm-item-child,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-2.tbm-group:focus-within>.tbm-group-container.tbm-item-child {
    display: block;
    visibility: visible;
    opacity: 1;
  }

  /* ---------- Submenu (2nd level) group positioning ---------- */
  /* Position relative so the sub-submenu anchors here, allowing vertical centring via top: 50% */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-2.tbm-group {
    position: relative;
    z-index: 502;
    width: 100%;
    box-sizing: border-box;
    /* ensure padding doesn't shrink the element below 100% of parent */
  }

  /* Force inner column wrappers to fill the full submenu width
     (so width: 100% on .level-2.tbm-group truly equals the 240px submenu width) */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-submenu.tbm-item-child .tbm-column,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-submenu.tbm-item-child .tbm-column-inner {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Extend the clickable/hoverable area of each level-2 group item rightward,
     bridging the gap to the sub-submenu so hover doesn't break when crossing */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-2.tbm-group>.tbm-link-container {
    position: relative;
  }

  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-2.tbm-group>.tbm-link-container::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -2rem;
    width: 2rem;
    z-index: 503;
  }

  /* ---------- Sub-submenu (3rd level) ---------- */
  /* Hidden by default, opens to the right and vertically centered on its level-2 item */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-group-container.tbm-item-child {
    display: none;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: calc(100% + 1rem);
    /* adds the parent submenu's right padding so flyout starts at the true outer edge */
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    /* vertically centered on the level-2 item being hovered */
    width: 240px;
    background: var(--bs-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-top: 3px solid var(--bs-primary) !important;
    z-index: 501;
    margin-left: 0;
  }

  /* ---------- Smart positioning ---------- */
  /* Last 3 menu items flip submenu right-aligned to avoid viewport overflow */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-1:nth-last-child(-n+3)>.tbm-submenu.tbm-item-child {
    left: auto;
    right: 0;
  }

  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-1:nth-last-child(-n+3) .tbm-group-container.tbm-item-child {
    left: auto;
    right: calc(100% + 1rem);
  }

  /* When sub-submenus flip left, move the hover bridge left as well. */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-1:nth-last-child(-n+3) .tbm-item.level-2.tbm-group>.tbm-link-container::after {
    right: auto;
    left: -2rem;
    width: 2rem;
  }

  /* Fill the full desktop header height so no white strip appears below the menu bar. */
  #block-korumo-bootstrap-barrio-mainnavigation,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-nav,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-1 {
    height: 100%;
  }

  /* ---------- Level-1 link layout: vertical centre, fills full menu bar height ---------- */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-1 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: var(--bs-white);
    min-height: var(--header-height);
    padding: 0 1rem;
    box-sizing: border-box;
    transition: min-height 0.25s ease, padding 0.25s ease;
    /* match header transition duration */
  }

  body.scrolled #navbar-main .tbm-link.level-1 {
    min-height: var(--header-height-scrolled);
  }

  /* ---------- Sub/sub-sub link hover opacity (desktop only — bg tint comes from shared rule in 8.1) ---------- */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-2:hover,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-2:focus,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-3:hover,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-3:focus,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-4:hover,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-4:focus {
    opacity: .7;
  }

}


/* -----------------------------------------------------------------------
   --------- 8.3. Mobile only (@media max-width: 991px) ------------------
   ----------------------------------------------------------------------- */

@media (max-width: 991px) {

  /* ---------- Open/close state (via TB Megamenu's JS toggle) ---------- */

  /* Hide sub-submenus by default on mobile, only show when their parent has .open */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item:not(.open)>.tbm-submenu.tbm-item-child,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item:not(.open)>.tbm-group-container.tbm-item-child {
    display: none !important;
    /* Unfortunately needed for menu to be collapsed by default on mobile */
  }

  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.open>.tbm-submenu.tbm-item-child,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.open>.tbm-group-container.tbm-item-child {
    display: block !important;
    /* Unfortunately needed for menu to be collapsed by default on mobile */
  }

  /* ---------- Reset desktop dropdown styling so submenus stack inline ---------- */

  #block-korumo-bootstrap-barrio-mainnavigation .tbm-submenu.tbm-item-child,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-group-container.tbm-item-child {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* No hover bridge needed on mobile */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-1::after {
    display: none;
  }

  /* ---------- Borders reset ---------- */

  #block-korumo-bootstrap-barrio-mainnavigation .tbm,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-1,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-1:last-child {
    border-left: 0;
    border-right: 0;
  }

  /* Top-level menu margin (inner padding around the full menu list) */
  ul.tbm-nav.level-0 {
    margin: 2.125rem;
  }

  /* ---------- Mobile collapse panel positioning ---------- */
  
  .tbm.tbm-main.tbm-arrows.tbm--mobile {
    justify-content: right !important;
    width: 100vw !important;
  }

  /* Anchor for the absolutely-positioned collapse panel */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm.tbm--mobile {
    position: relative;
  }

  /* Outer collapse wrapper (full-width, white bg, soft shadow) */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm.tbm--mobile .tbm-collapse {
    position: fixed;
    /* fixed instead of absolute so it's relative to viewport, not parent */
    top: var(--header-height);
    /* sits below the full header */
    left: 0;
    /* pins to left viewport edge */
    right: 0;
    /* pins to right viewport edge */
    width: 100%;
    /* fills between left and right */
    background: var(--bs-white);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 3px solid var(--bs-primary);
    padding-top: 0 !important;
    z-index: 999;
    /* above page content */
  }

  /* ---------- Mobile menu link styling (matches old site) ---------- */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-link {
    border-bottom: 1px solid rgba(0, 0, 0, .03);
    padding: 10px 1.25rem;
    font-size: 0.875rem !important;
    line-height: 1.438rem;
    color: rgba(61, 61, 61, 0.6) !important;
    font-weight: 400;
    display: block;
    transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
    min-height: 0;
    /* was auto; */
    background: transparent;
  }

  /* Top-level link layout: flex left-aligned (offsets right-align from desktop) */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-1 {
    display: flex;
    gap: 0.5rem;
    padding: 0.625rem 5%;
    justify-content: flex-start;
  }

  /* ---------- Sub-level link spacing + indentation ---------- */

  /* Level-2 group inner column padding */
  .level-2.tbm-group .tbm-column-inner {
    padding-left: 0.625rem;
  }

  /* Sub/sub-sub/sub-sub-sub link padding */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-2,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-3,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-4 {
    display: block;
    padding: 0.625rem 5%;
  }

  /* Sub/sub-sub/sub-sub-sub indentation */
  li.tbm-item.level-2 .tbm-link-container,
  li.tbm-item.level-3 .tbm-link-container,
  li.tbm-item.level-4 .tbm-link-container {
    padding-left: 5%;
  }

  .tbm-item.level-2 {
    padding-left: 0.625rem;
  }

  .tbm-item.level-3,
  .tbm-item.level-4 {
    padding-left: 5%;
  }

  /* Items with children also get bold weight */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item--has-dropdown>.tbm-link-container>.tbm-link,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.tbm-group>.tbm-link-container>.tbm-link {
    font-weight: 700;
  }

  /* ---------- Sub/sub-sub :active bg tint (mobile only — touch :active state shows the same bg as desktop hover) ---------- */
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-2:active,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-3:active,
  #block-korumo-bootstrap-barrio-mainnavigation .tbm-link.level-4:active {
    background-color: rgba(0, 0, 0, .03);
  }

  /* ---------- Level-1 panel backgrounds ---------- */

  /* Level-1 items with children get a light grey panel bg */
  li.tbm-item--has-dropdown {
    background: rgba(0, 0, 0, .03);
  }

  li.tbm-item--has-dropdown:hover,
  li.tbm-item--has-dropdown:focus,
  li.tbm-item--has-dropdown:active {
    background: rgba(0, 0, 0, .02);
  }

  /* Level-1 always white bg (overrides has-dropdown grey for the top item itself) */
  .level-1 {
    background: #ffffff;
  }

  /* ---------- Mobile arrow toggle hit area (bigger tap target) ---------- */
  /* CLAUDE SAYS NINA REVIEW: extends the chevron-toggle clickable area on mobile by adding generous padding without making it visually bigger. The visible chevron stays 16px, but the tappable area grows. If this isn't enough, increase padding values. */
  .tbm.tbm--mobile .tbm-submenu-toggle.always-show {
    padding: 1rem 1rem 1rem 2rem;
    /* generous tap area */
    margin-right: 0;
    /* remove old margin-right; padding takes over */
    width: auto;
    /* let content + padding define width */
  }

  /* ---------- Mobile child indicator chevron — show right arrow on submenu items with children ---------- */
  /* CLAUDE SAYS NINA REVIEW: NEW for mobile — Q14 — sub-level items with children show a right chevron so users know they're tappable to expand. The level-1 down-chevron rule from 8.1 applies here too. Test and tell me if positioning needs adjusting. */
  .tbm.tbm--mobile #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-2.tbm-group>.tbm-link-container>.tbm-link::after,
  .tbm.tbm--mobile #block-korumo-bootstrap-barrio-mainnavigation .tbm-item.level-3.tbm-group>.tbm-link-container>.tbm-link::after {
    content: "▽";
    float: right;
    font-size: 0.85em;
    margin-left: 0.313rem;
    opacity: 0.7;
  }

  /* ---------- TB Megamenu's wrapper overrides ---------- */

  .tbm.tbm--mobile .tbm-item {
    border-top: 0;
    height: max-content;
  }

  .tbm.tbm--mobile .tbm-nav {
    background-color: #ffffff;
    /* prev rgba(0, 0, 0, .03) */
  }

  .tbm.tbm--mobile .tbm-submenu-toggle {
    border-left: 0 !important;
  }

  .tbm.tbm-main.tbm-arrows.tbm--mobile {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: end;
  }

}


/* -----------------------------------------------------------------------
   --------- 8.4. Mobile Hamburger button --------------------------------
   ----------------------------------------------------------------------- */

@media (max-width: 991px) {

  /* Slim the bars and recolour, keep TB Megamenu's container size */
  .tbm.tbm--mobile .tbm-button .tbm-button-container span {
    height: 2px;
    border-radius: 2px;
    background: var(--bs-primary);
    /* change to var(--bs-dark) for black, etc. */
  }

  /* Shrink the container */
  .tbm.tbm--mobile .tbm-button .tbm-button-container {
    width: 22px !important;
    height: 16px !important;
    margin: 0 auto;
    /* extra safety to centre the bars within the button */
  }

  /* Re-space bars to fit the smaller container */
  .tbm.tbm--mobile .tbm-button .tbm-button-container span:nth-child(1) {
    top: 0;
  }

  .tbm.tbm--mobile .tbm-button .tbm-button-container span:nth-child(2),
  .tbm.tbm--mobile .tbm-button .tbm-button-container span:nth-child(3) {
    top: calc(50% - 1px);
  }

  .tbm.tbm--mobile .tbm-button .tbm-button-container span:nth-child(4) {
    bottom: 0;
    top: auto;
  }

  /* Force button bg transparent, no border, no focus outline; vertically centre bars */
  .tbm.tbm--mobile .tbm-button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-right: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--header-height);
    margin: 0;
    /* Keep the icon centred without adding extra height to the mobile header bar. */
  }

  .tbm.tbm--mobile .tbm-button:focus,
  .tbm.tbm--mobile .tbm-button:focus-visible {
    outline: none;
    box-shadow: none;
  }

}


/* ============================================================================
   9. BREADCRUMBS
   ============================================================================ */

.breadcrumb {
  --bs-breadcrumb-padding-x: 0;
  --bs-breadcrumb-padding-y: 0;
  --bs-breadcrumb-margin-bottom: 1rem;
  --bs-breadcrumb-bg: none;
  --bs-breadcrumb-border-radius: none;
  --bs-breadcrumb-divider-color: #6c757d;
  --bs-breadcrumb-item-padding-x: 0.5rem;
  --bs-breadcrumb-item-active-color: #6c757d;
  font-size: var(--bs-breadcrumb-font-size);
  list-style: none;
}

.breadcrumb-item li a {
  color: var(--bs-secondary);
}


/* ============================================================================
   10. IMAGES
   ============================================================================ */

/* --------- 10.1. Hero / Header images ---------------------------------- */

.img-header-bg {
  height: 300px;
  position: relative;
  background-size: cover;
  background-position: center;
}

.hero {
  margin-top: -300px;
  width: 100%;
  height: 300px;
  position: relative;
}

/* Hero image sizing */
.view-id-7_2_hero .field--name-field-media-image img,
.field--name-field-featured-image .field--name-field-media-image img {
  display: block;
  max-width: none;
  height: 300px;
  width: 100vw;
  /* Note Nina tested changing this to 100% to try solve the widths issue with home page images but it did not change anything, and 100vw is required for eg for Inside Look featured images to fill the horizontal space properly, so returned to 100vw */
  margin: 0 auto;
  object-fit: cover;
  object-position: center center;
}

/* Headers on hero images */
.view-id-7_2_hero h1 {
  margin-bottom: 0;
}

/* @TODO Nina to likely delete because of Al's header image fix and focal points but first confirming focal point works properly as does not seem consistent 
.pos-t { background-position: top; }
.pos-m { background-position: center; }
.pos-b { background-position: bottom; }
end of delete */

/* Media image layouts */
.node .overflow-auto .field--type-image,
.overflow-auto .field--type-image img {
  margin: 0;
}


/* --------- 10.2. Featured images --------------------------------------- */

/* Featured image overlay for basic page */
#views-bootstrap-7-1-featured-images-basic-page-block-1 {
  padding-right: 0;
}

#views-bootstrap-7-1-featured-images-basic-page-block-1 .list-group-item {
  height: 300px;
}

#views-bootstrap-7-1-featured-images-basic-page-block-1 h1 {
  color: #fff;
  padding-right: 25px;
  padding-left: 10px;
}

#views-bootstrap-7-1-featured-images-basic-page-block-1 h1,
#views-bootstrap-7-1-featured-images-basic-page-block-1 .views-field.views-field-title {
  position: relative;
  z-index: 101;
  margin-top: -316px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#views-bootstrap-7-1-featured-images-basic-page-block-1 img {
  width: auto !important;
  height: 300px !important;
  max-width: 100%;
  /* was 100vw; changing to try solve widths issue @TODO Nina delete comment */
  /* max-width: calc(100vw - var(--drupal-displace-offset-left, 0px));  was max-width and calc(100vw - var(--drupal-displace-offset-left, 0px)); hiding to try solve widths issue @TODO Nina delete comment */
}

/* Featured image picture wrapper */
.field--name-field-featured-image picture {
  display: flex;
  justify-content: center;
  width: 100%;
  /* @TODO AL please delete once you've read this and of all good for you too - there were two max-width declarations here so I deleted the 1st one that the 2nd one overrides - tested and checked featured images and all look good on my end. - also was previously 100vw which I had changed to 100% to try solve the widths issue I have with home page images, but it did not change anything, and now is redundant 
  max-width: 100%; */
  max-width: calc(100vw - var(--drupal-displace-offset-left, 0px));
  margin: 0 auto;
  overflow: hidden;
}

/* @TODO AL was commented out already - delete if not needed */
/*.views-field-field-featured-image .field--name-field-media-image {
  overflow: hidden;
}*/

/* Featured image trigger overrides */
#block-korumo-bootstrap-barrio-featuredimage-2 .trigger.focusable {
  left: -32px !important;
}

.field--name-field-featured-image .trigger.focusable {
  left: -68px !important;
}

/* Articles have featured images in the body */
.node--type-articles .field--name-field-featured-image .field--name-field-media-image {
  max-width: 100%;
}


/* --------- 10.3. Other full-width images ------------------------------- */

/* Homepage full-width sections — neutralise Bootstrap's .row negative margins so the row doesn't poke past the viewport edge.
   IMPORTANT: kept simple. Earlier attempts also zeroed --bs-gutter-x and .row > * padding which stripped legit
   Bootstrap utility paddings (px-3, ps-md-3, mt-lg-5, etc.) on inner cols and broke the home page layout.
   Just nullify the negative margins. Inner col gutters/utilities are preserved. */
.path-frontpage .row {
  margin-left: 0;
  margin-right: 0;
}


/* ============================================================================
   11. TABLES
   ============================================================================ */

/* --------- 11.1. Primary table ----------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 1rem;
  color: #111;
  border: none;
  padding-left: 40px;
  /* @AL TODO These seem overridden by the default. I also tried a calc like the current default. */
  padding-right: 40px;
  /* @AL TODO These seem overridden by the default. I also tried a calc like the current default. */
  border-radius: 12px;
}

/* Temp fix for links in tables */
table a {
  color: var(--bs-link-color) !important;
}

table a:hover {
  color: var(--bs-link-hover-color) !important;
  text-decoration: none !important;
}

/* Visually hidden header row for screen readers */
thead tr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

table tr th {
  font-size: 2em;
  color: #000;
  background-color: #f2f2f2;
  border: none;
  padding: 1rem 0.75rem;
}

tbody tr {
  /* not set yet */
}

tbody td {
  color: var(--bs-dark);
  border: none;
  padding: 1rem 0.75rem;
  vertical-align: middle;
}

/* First column h5 */
tbody td:first-child h5 {
  font-weight: bold;
  color: var(--bs-dark);
}

/* Striped rows */
.table-striped>tbody>tr:nth-of-type(2n+1) td {
  background-color: rgba(253, 253, 253, 1);
  color: var(--bs-dark);
}

.table-striped>tbody>tr:nth-of-type(2n) td {
  background-color: #FDFDFD;
  color: var(--bs-dark);
}

.table-striped:last-child,
.view-cohort-sessions:last-child {
  margin-bottom: 0;
}


/* --------- 11.2. Secondary table --------------------------------------- */

.table-secondary thead tr {
  /* not set yet */
}

.table-secondary tbody tr {
  /* not set yet */
}

table.table-secondary tr th {
  color: #000;
  background-color: #f2f2f2;
  border: none;
  padding: 1rem 0.75rem;
}

.table-secondary tbody td {
  border: none;
  padding: 1rem 0.75rem;
}

.table-secondary .table-striped>tbody>tr:nth-of-type(2n+1) td {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--bs-gray-500);
}

.table-secondary .table-striped>tbody>tr:nth-of-type(2n) td {
  background-color: #ECECEC;
  color: var(--bs-gray-500);
}

/* Temp fix for table indent issue */
.table-indent .view-content.row {
  margin: 0;
}

/* Empty state messaging in views */
.view-empty {
  text-align: center;
  margin-bottom: 32px;
}


/* ============================================================================
   12. DASHBOARDS (general)
   ============================================================================ */

/* General dashboard rules — apply across all dashboards.
   Page-specific dashboard styling lives in Section 15. */

/* Dashboard block headers */
.dashboard .layout .block h2 {
  font-size: clamp(1.4625rem, 2.333333333vw, 1.5625rem);
  color: var(--bs-dark);
  margin: 1.5rem 0 1rem 0;
  padding: 0 0 0.5rem 0;
  font-weight: 500;
  padding-top: 8px;
  text-align: center;
  text-transform: uppercase;
  background-color: transparent;
}

/* Remove duplicate padding/borders on nested dashboard blocks */
.dashboard--general-dashboard .layout .block .block,
.dashboard .layout .block .block {
  margin: 0;
  border: 0;
  box-shadow: none;
}

.dashboard .layout .block {
  box-shadow: none;
}

/**
 * Layout Builder: Full-Height Container & Centered Content
 * Eliminates need for repeated h-100 classes on nested structure
 */

/* Make block container and all children take full available height */
.dashboard .block-content-general {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dashboard .block-content-general > .content,
.dashboard .block-content-general .layout,
.dashboard .block-content-general .layout__region,
.dashboard .block-content-general .block-layout-builder,
.dashboard .block-content-general .block-layout-builder > .content {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

/* Full-height inner content wrapper */
.dashboard .block-content-general .field__item {
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100%;
}

/* Center content vertically and horizontally */
.dashboard .block-content-general .bg-light.rounded-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1rem;
}

/* Vertically center paragraph */
.dashboard .block-content-general .bg-light.rounded-3 > p {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* fix for bootstrap column widths */
.dashboard .override-md-63 {
  justify-content: space-between;
}
@media (min-width: 768px) {
  .dashboard .override-md-63 .col-md-3 {
    flex: 0 0 auto;
    width: 32.33%;
  }
}
@media (min-width: 768px) {
  .dashboard .override-md-63 .col-md-9 {
    flex: 0 0 auto;
    width: 65.66%;
  }
}

/* ============================================================================
   13. WEBFORM EDITS
   ============================================================================ */

/* Telephone field width */
.webform-type-tel label,
.iti.iti--allow-dropdown {
  width: 100%;
}

/* Webform action buttons centered */
.webform-submission-form #edit-actions {
  display: flex;
  justify-content: center;
}

.webform-submission-form #edit-actions>* {
  margin: 0 0.25rem;
}

/* Solve contact form jump past intro text */
.webform-submission-form {
  scroll-margin-top: 0;
}

/* Webform: hide duplicate H1 */
.node--type-webform h1 {
  display: none;
}


/* ============================================================================
   14. NOTIFICATIONS / ALERTS
   ============================================================================ */

/* Alert / messages widget positioning */
.alert-wrapper {
  position: unset;
  margin-bottom: 32px;
  margin-top: 8px;
}


/* ============================================================================
   15. PAGE-SPECIFIC OVERRIDES
   ============================================================================ */


/* --------- 15.1. My Dashboard / Personal Dashboard --------------------- */

/* (No specific styles yet — general dashboard rules in Section 12 cover this) */


/* --------- 15.2. Course Dashboard / Cohort Group ----------------------- */

/* Cohort cover image temp fix (not responsive) */
.field--name-field-cover-image img {
  max-width: 100%;
  height: auto;
}

/* Main group title block */
.block-field-blockgroupcohortlabel .field__item {
  text-align: center;
  font-weight: 600;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 30px;
  border-radius: 8px;
  font-size: xx-large;
  color: var(--bs-light);
  background-color: var(--bs-info-text-emphasis);
  border: 2px solid var(--bs-dark);
}

/* Temp invite button fix (admin actions) */
.path-group #block-korumo-bootstrap-barrio-primary-admin-actions .action-links {
  display: flex;
  gap: 0.5rem;
  padding-left: 0;
  margin: 0 0 1rem;
}

/* Buttons inside cohort sessions table — outline-primary look (Drupal view, can't apply utility classes to HTML directly) */
.view-cohort-sessions .table .btn {
  background-color: var(--bs-light) !important;
  color: var(--bs-primary) !important;
  display: inline-block;
  text-decoration: none;
  border: 2px solid var(--bs-primary);
  line-height: 1.15;
  padding: 0.75rem 1.5rem;
  min-width: 150px;
  font-size: 0.95rem;
  font-weight: 500;
}

.view-cohort-sessions .table .btn:hover,
.view-cohort-sessions .table .btn:focus {
  color: var(--bs-dark);
  background-color: var(--bs-info);
  border: 2px solid var(--bs-info);
}

.table-responsive {
  width: 100%;
  padding: 0;
}


/* --------- 15.3. Registration + My Account ----------------------------- */

/* Account notice (registration page blurb) */
.account-notice {
  background-color: #fdc281;
  /* bg-yellow */
  border-radius: 0.5rem;
  font-size: 110%;
  padding: 1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.account-notice p:first-child {
  margin-top: 0.25rem;
  color: #080305;
}

.account-notice p:last-child {
  margin-bottom: 0.25rem;
  color: #080305;
}


/* --------- 15.4. Events & Retreats ------------------------------------- */

/* H1 colour change on smaller screens */
@media (max-width: 991px) {
  .page-node-35 h1 {
    color: var(--bs-secondary) !important;
  }
}

/* --------- 15.5. Homepage ------------------------------------- */

/* homepage full-width elements */
#block-korumo-bootstrap-barrio-homepagefullwidthelements .field--name-field-body.field--type-text-long {
  display: block;
}
#block-korumo-bootstrap-barrio-homepagefullwidthelements {
  padding: 0;
}