/*
 * Bootstrap 4 → Bootstrap 5 class-alias shim.
 * Re-applies BS5 declarations under the old BS4 class names that
 * existed in this theme's SCSS and templates before the Barrio 4 → 5
 * upgrade. Loaded after Barrio 5's base CSS so it overrides as needed.
 */

/* margin / padding logical-direction renames (left → start, right → end) */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

/* text alignment */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* float */
.float-left { float: left !important; }
.float-right { float: right !important; }

/* grid gutters */
.no-gutters { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.no-gutters > .col,
.no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; }

/* font weight & style */
.font-weight-bold { font-weight: 700 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-light { font-weight: 300 !important; }
.font-weight-bolder { font-weight: bolder !important; }
.font-weight-lighter { font-weight: lighter !important; }
.font-italic { font-style: italic !important; }

/* rounded / border directional */
.rounded-left { border-top-left-radius: var(--bs-border-radius) !important; border-bottom-left-radius: var(--bs-border-radius) !important; }
.rounded-right { border-top-right-radius: var(--bs-border-radius) !important; border-bottom-right-radius: var(--bs-border-radius) !important; }
.border-left { border-left: var(--bs-border-width) solid var(--bs-border-color) !important; }
.border-right { border-right: var(--bs-border-width) solid var(--bs-border-color) !important; }

/* close button (BS5 renamed to .btn-close) */
.close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: #000;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E") center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: 0.5;
}
.close:hover { color: #000; opacity: 0.75; }

/* badge color variants (BS5 split badge color into .bg-*) */
.badge.badge-primary { background-color: var(--bs-primary) !important; color: #fff; }
.badge.badge-secondary { background-color: var(--bs-secondary) !important; color: #fff; }
.badge.badge-success { background-color: var(--bs-success) !important; color: #fff; }
.badge.badge-danger { background-color: var(--bs-danger) !important; color: #fff; }
.badge.badge-warning { background-color: var(--bs-warning) !important; color: #000; }
.badge.badge-info { background-color: var(--bs-info) !important; color: #000; }
.badge.badge-light { background-color: var(--bs-light) !important; color: #000; }
.badge.badge-dark { background-color: var(--bs-dark) !important; color: #fff; }

/* screen-reader only (BS5 renamed to .visually-hidden) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* form custom-* → form-* */
.custom-control { display: block; min-height: 1.5rem; padding-left: 1.5em; }
.custom-control-input { position: absolute; left: 0; z-index: -1; width: 1em; height: 1.25em; opacity: 0; }
.custom-control-label { display: inline-block; margin-bottom: 0; vertical-align: top; }
.custom-checkbox,
.custom-radio,
.custom-switch { padding-left: 1.5em; }
.custom-select { display: block; width: 100%; padding: 0.375rem 2.25rem 0.375rem 0.75rem; }
.custom-file { position: relative; display: inline-block; width: 100%; height: calc(1.5em + 0.75rem + 2px); }
.custom-file-input { position: relative; z-index: 2; width: 100%; height: calc(1.5em + 0.75rem + 2px); margin: 0; opacity: 0; }
.custom-file-label { position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; }

/* navbar inline form (BS5 removed .form-inline) */
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.form-inline .form-control { display: inline-block; width: auto; }

/*
 * Barrio 5 dropped .navbar-nav from the menu <ul>, leaving just .nav.
 * In BS5 .nav alone doesn't render as a horizontal navbar list. Restore
 * the horizontal layout for menus inside navbars and similar contexts.
 */
.navbar .nav,
.region-primary-menu .nav,
.region-footer-first .nav,
.region-footer-second .nav,
.region-footer-third .nav,
.region-footer-fourth .nav,
.region-footer-fifth .nav,
.site-footer .nav {
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  margin-bottom: 0;
}
.navbar .nav .nav-item,
.site-footer .nav .nav-item {
  display: inline-block;
}

/*
 * Drupal renders every region in a `<section class="row region region-X">`,
 * but those are containers, not Bootstrap grid rows. BS5 added
 * `.row > * { width: 100%; max-width: 100%; flex-shrink: 0; padding: 0 calc(var(--bs-gutter-x) * 0.5) }`
 * which then forces every region's child block to stack full-width and gain
 * 12px horizontal gutter padding. BS4 had no such rule, so children sat
 * naturally. Undo it for Drupal region rows.
 */
.row.region > * {
  width: auto;
  max-width: none;
  flex-shrink: 1;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 768px) {
  .site-footer .row.region {
    display: flex;
    flex-wrap: wrap;
  }
}

/*
 * Navbar layout: Barrio 5 wraps the top-level brand + menu in flex containers
 * but the existing tic theme markup expects them positioned via floats and
 * inline-block. Restore the row layout for top header.
 */
.region-top-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.region-top-header > .navbar-brand { margin-right: auto; }
/*
 * The social-icon blocks are plain block_content divs that, without a
 * size constraint, expand to the .region-top-header container width
 * (1200px) and push their icons to the far left. Constrain them to
 * their content width and pin them to the right side of the header.
 */
.region-top-header > [id^="block-twitter"],
.region-top-header > [id^="block-email"],
.region-top-header > [id^="block-facebook"],
.region-top-header > [id*="socialicon"] {
  flex: 0 0 auto;
  width: auto;
  margin-left: 0.5rem;
}
.region-top-header > [id^="block-twitter"] { margin-left: auto; }

/*
 * Bootstrap 5 reintroduced text-decoration: underline on <a> by default
 * (BS4 had none). The tic theme expects underline-less links. Restore
 * site-wide.
 */
a, a:hover, a:focus, a:active { text-decoration: none; }

/*
 * BS5 dropped --bs-card-spacer-{y,x} from :root and only defines them on `.card`.
 * This theme renders `.card-body` without an enclosing `.card`, so the vars
 * resolve to invalid and `.card-body`'s padding falls back to 0. Restore BS4's
 * 1.25rem default at the .card-body level so cards keep their inner spacing.
 */
.card-body {
  --bs-card-spacer-y: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
}

/*
 * Footer social icons: `img { max-width: 100% }` (responsive image default)
 * caps the icon width to whatever its flex-shrunk parent gives it, which
 * under BS5's flex layout collapses to ~13px. Let the icon use its natural
 * aspect ratio derived from `height: 2.5rem` instead.
 */
#block-footeremailsocialiconlink img {
  max-width: none;
}

/*
 * Flickity carousels: the carousel container has class `.row` so BS5's
 * `.row > * { padding-right/left: calc(var(--bs-gutter-x) * 0.5) }` injects
 * 12px of horizontal padding into the .flickity-viewport. Prod (BS4) had no
 * such rule. Strip it so the viewport sits flush with the carousel edges.
 */
.flickity-enabled > .flickity-viewport {
  padding-left: 0;
  padding-right: 0;
}

/*
 * Subpage hero image: views-header-image renders a single full-width image
 * as a `.views-row` directly under `.view-content.row`. BS5's `.row > *`
 * column gutter (12px each side) chops 24px off the image. Card-grid views
 * legitimately need that gutter, so target the header-image view by class.
 */
.view-header-image .view-content > .views-row {
  padding-left: 0;
  padding-right: 0;
}

/*
 * BS4 panel-group → BS5 accordion class aliases. The D8 views_bootstrap
 * module rendered accordions with `.panel-group > .card > .class-header >
 * button` markup; the D10 module uses `.accordion > .accordion-item >
 * .accordion-header > .accordion-button`. The theme's compiled SCSS still
 * styles the BS4 names. Re-apply the prod card chrome and the
 * name-left/role-right floats to the new markup so /contact accordions
 * render with the same two-column header as prod.
 */
.accordion {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.accordion .accordion-item { border: 3px solid #fcbf3d; background: #fff; }
.accordion .accordion-item + .accordion-item { margin-top: 0.25rem; }
.accordion .accordion-button {
  overflow: hidden;
  position: relative;
  width: 100%;
  background: #fff;
  box-shadow: none;
}
.accordion .accordion-button > .header {
  flex: 1 1 auto;
  width: 100%;
}
.accordion .accordion-button::after { display: none; }
.accordion .accordion-button:focus { box-shadow: none; }
.accordion .accordion-button:not(.collapsed) { color: inherit; background: #fff; }
.accordion .accordion-button .name {
  display: block;
  float: left;
  width: 55%;
  padding: 3px 20px;
  text-align: left;
  font-weight: bold;
  font-size: 20px;
  color: #000;
}
.accordion .accordion-button .role {
  float: right;
  width: 45%;
  text-align: left;
  font-size: 12px;
  color: #000;
}
.accordion .accordion-button .role .title { font-weight: bold; }
.accordion .accordion-button .role .company { font-style: italic; }
.accordion .accordion-button .fa-caret-right {
  display: block;
  position: absolute;
  top: 50%;
  left: 12px;
  width: 13px;
  height: 20px;
  background-image: url('/themes/custom/tic/assets/images/icon/caret-right-solid.svg');
  background-repeat: no-repeat;
  transform: translateY(-50%);
}
.accordion .accordion-body .fa-caret-right { display: none; }
.accordion .accordion-body img { float: left; margin: 0 20px 0 0; }
.accordion .accordion-body .label { font-weight: bold; }
.accordion .accordion-body .description { clear: both; padding: 20px 0 0; }

/*
 * Exposed-filter form (Show Only: dropdown + Apply button). The prod styling
 * is scoped under `.form-row .form-item-* label`/`#edit-submit-*` — but
 * `.form-row` was a BS4 helper that BS5 removed in favour of `.d-flex` /
 * `.row.g-N`, so Drupal's exposed-form template now wraps items in
 * `.d-flex.flex-wrap` instead. The original selectors no longer match.
 * Re-apply the prod blue label + blue Apply button on the BS5 markup.
 */
form.views-exposed-form label {
  font-weight: bold;
  color: #0055a5;
  margin-bottom: 0.5rem;
}
form.views-exposed-form > .d-flex {
  column-gap: 10px;
  align-items: flex-end;
}
form.views-exposed-form input.form-submit {
  background-color: #0055a5;
  border-color: #0055a5;
}
form.views-exposed-form input.form-submit:hover,
form.views-exposed-form input.form-submit:focus {
  background-color: #003e7a;
  border-color: #003e7a;
}

/*
 * The theme positions .navbar-brand absolutely with z-index 2 so the
 * logo can hang outside the nav row. On prod (BS4) the absolute anchor
 * shrinks to fit its image. Under BS5 + my .region-top-header flex
 * wrapper, the same absolute anchor expands to the container's full
 * width, covering and intercepting clicks on the menu items behind it.
 * Constrain the anchor to its content size.
 */
#navbar-top .navbar-brand {
  width: auto;
  right: auto;
}

/*
 * .row-offcanvas was a deprecated BS4 helper (collapsible mobile sidebars)
 * that some Drupal Bootstrap Barrio 4 templates still output. In BS5 there
 * is no .row-offcanvas style, but the legacy rule from Barrio 4 forces
 * display:block on the .row, which kills the flex grid for the sidebar.
 * Restore .row's BS5 flex behavior when it also has .row-offcanvas.
 */
.row.row-offcanvas {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

/*
 * Sidebar layout: the tic theme's compiled SCSS sizes `.sidebar` at 25%
 * width (matches prod). The previous shim was forcing col-md-2's 16.67%
 * instead, which made the sidebar narrower than prod. Drop the width
 * override; keep the row-offcanvas order/flex pieces.
 */
@media (min-width: 768px) {
  .row.row-offcanvas > .sidebar_first.col-md-2 {
    flex: 0 0 auto;
    order: -1;
  }
  .row.row-offcanvas > .sidebar_first.sidebar.col-md-2 ~ .main-content.col {
    flex: 1 0 0%;
    order: 0;
  }
  .row.row-offcanvas > .main-content.col {
    flex: 1 0 0%;
  }
}

/*
 * Sidebar nav submenu indentation: BS5 Reboot sets `ul { padding-left: 2rem }`
 * which the theme's `* { padding: 0 }` reset can't beat (element selector
 * wins over universal selector). On prod (BS4) the reboot had no ul padding
 * so the universal reset took effect and submenus sat flush. Restore that.
 */
#block-navigation-2 ul {
  padding-left: 0;
}

/*
 * Sidebar navigation menu items: the existing tic SCSS hides all
 * .nav-item by default and used .menu-item--active-trail to re-show
 * trail items. Drupal 10 menu_block doesn't emit that class — instead
 * the active LI gets .active and the active <a> gets .is-active +
 * aria-current="page". Use :has() to walk back up from the active
 * link to its ancestors, matching the prod active-trail behaviour.
 */
.type--page #main .row #block-navigation-2 .nav-item.active,
.type--page #main .row #block-navigation-2 .nav-item:has(> a.is-active),
.type--page #main .row #block-navigation-2 .nav-item:has(> ul .is-active),
.type--page #main .row #block-navigation-2 .nav-item.active > ul > .nav-item,
.type--page #main .row #block-navigation-2 .nav-item:has(> a.is-active) > ul > .nav-item,
.type--page #main .row #block-navigation .nav-item.active,
.type--page #main .row #block-navigation .nav-item:has(> a.is-active),
.type--page #main .row #block-navigation .nav-item:has(> ul .is-active),
.type--page #main .row #block-navigation .nav-item.active > ul > .nav-item,
.type--page #main .row #block-navigation .nav-item:has(> a.is-active) > ul > .nav-item {
  display: block !important;
}

/*
 * Views card grids: existing SCSS sets per-card widths (e.g. 33.33%)
 * but relies on the parent .view-content (which is also a Bootstrap .row)
 * being a flex container. Barrio 5 plus the tic compiled CSS leaves
 * .view-content as display: block, so the percentage-width cards stack
 * instead of flowing as a grid. Force the flex container behaviour for
 * any .view-content that contains percentage-width .views-row children.
 */
.view-content,
.view-content.row {
  display: flex;
  flex-wrap: wrap;
}
#block-views-block-busineses-directory-block-1 .content,
#block-views-block-busineses-directory-block-1 .view-content,
#block-views-block-industries-block-1 .view-content,
#block-views-block-projects-block-1 .view-content,
#block-views-block-projects-block-2 .view-content,
#block-views-block-projects-block-3 .view-content,
#block-views-block-contacts-block-1 .view-content,
#block-views-block-news-updates-block-1 .view-content,
#block-views-block-accomodations-block-1 .view-content,
#block-views-block-faq-block-1 .view-content {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}