/* Odyssey Behavioral Health: reusable UI components and utilities. */

/* 5. SPECIAL ICON LIST ===================================
   Widget class: special-icon-list
   Optional colors: icon-primary, icon-navy, icon-blue,
   icon-purple, icon-accent, icon-white, icon-off-white
   ========================================================= */
.elementor-widget-icon-list:not(.special-icon-list) .elementor-icon-list-item::before,
.elementor-widget-icon-list:not(.special-icon-list) .elementor-icon-list-items::before,
.elementor-widget-icon-box li::before { content: none !important; display: none !important; }

.special-icon-list,
.special-icon-list .elementor-widget-container,
.special-icon-list .elementor-icon-list-items { width: 100% !important; max-width: 100% !important; }

.special-icon-list .elementor-icon-list-items {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
}

.special-icon-list .elementor-icon-list-item {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(1.17rem, 1.5vw, 1.17rem) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

.special-icon-list .elementor-icon-list-item:not(:last-child) { margin-bottom: 16px !important; }
.special-icon-list .elementor-icon-list-icon { display: none !important; }
.special-icon-list .elementor-icon-list-item > a { display: block !important; width: 100% !important; padding: 0 !important; }

.special-icon-list .elementor-icon-list-text {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  padding: 0 0 0 calc(0.95em + 10px) !important;
  box-sizing: border-box !important;
  font: inherit !important;
  white-space: normal !important;
}

.special-icon-list .elementor-icon-list-text::before {
  content: "" !important;
  position: absolute !important;
  top: 0.15em !important;
  left: 0 !important;
  width: 0.7em !important;
  height: 0.7em !important;
  background-color: var(--special-icon-color, currentColor) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3V21M3 12H21' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3V21M3 12H21' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--obh-transition-fast), background-color var(--obh-transition-fast);
}

.special-icon-list a:hover .elementor-icon-list-text::before { transform: translateX(2px); }
.special-icon-list.icon-primary { --special-icon-color: var(--obh-primary); }
.special-icon-list.icon-navy { --special-icon-color: var(--obh-navy); }
.special-icon-list.icon-blue { --special-icon-color: var(--obh-blue); }
.special-icon-list.icon-purple { --special-icon-color: var(--obh-purple); }
.special-icon-list.icon-accent { --special-icon-color: var(--obh-accent); }
.special-icon-list.icon-white { --special-icon-color: var(--obh-white); }
.special-icon-list.icon-off-white { --special-icon-color: var(--obh-off-white); }

/* Existing Odyssey icon-list hover class retained. */
.icon-bold .elementor-icon-list-item,
.icon-bold .elementor-icon-list-item a,
.icon-bold .elementor-icon-list-text {
  font-family: var(--obh-font-body) !important;
  font-weight: 400 !important;
  transition: font-weight var(--obh-transition-slow), letter-spacing var(--obh-transition-fast);
}
.icon-bold .elementor-icon-list-item:hover .elementor-icon-list-text,
.icon-bold .elementor-icon-list-item:hover a { font-weight: 500 !important; letter-spacing: -0.1px !important; }

/* 6. BUTTON SYSTEM ======================================= */

/* ----------------------------------------------------------
   SHARED SECTION CTA SPACING

   Default:
   final content -> CTA = 36px

   When the CTA is a direct child of .obh-heading-stack,
   the parent already contributes the standard 24px content
   gap. The button adds only the remaining difference needed
   to reach the 36px CTA relationship.

   Spacing tokens are defined in 01-foundation.css.
   ---------------------------------------------------------- */

body .obh-section-button {
  margin-top: var(--obh-section-button-gap) !important;
}

body .obh-heading-stack > .obh-section-button {
  margin-top: calc(
    var(--obh-section-button-gap) -
    var(--obh-section-eyebrow-gap)
  ) !important;
}

/* ----------------------------------------------------------
   DEFAULT ODYSSEY BUTTON — BLUE FILL
   Applies to every Elementor Button widget automatically.
   ---------------------------------------------------------- */

.elementor-button {
  font-family: var(--obh-font-body) !important;
  font-size: 1.03rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0px !important;

  color: var(--obh-white) !important;
  background: var(--obh-blue) !important;
  border: 1px solid var(--obh-blue) !important;
  border-radius: var(--obh-button-radius) !important;

  padding:
    var(--obh-button-padding-y)
    var(--obh-button-padding-x) !important;

  text-decoration: none !important;

  transition:
    color var(--obh-transition-slow),
    background-color var(--obh-transition-fast),
    border-color var(--obh-transition-fast),
    box-shadow var(--obh-transition-fast);
}

.elementor-button:hover,
.elementor-button:focus-visible {
  color: var(--obh-white) !important;
  background: var(--obh-blue-deep) !important;
  border-color: var(--obh-blue-deep) !important;
  font-weight: 700 !important;
}


/* ----------------------------------------------------------
   STANDARD BUTTON SHAPE
   Approved filled / outline variants
   ---------------------------------------------------------- */

.obh-purplefill-btn .elementor-button,
.btn-bg-fill-purple .elementor-button,
.obh-bluefill-btn .elementor-button,
.btn-bg-fill-blue .elementor-button,
.obh-whiteoutline-btn .elementor-button,
.btn-white-outline-transp .elementor-button,
.obh-blueoutline-btn .elementor-button,
.obh-whitefill-btn .elementor-button {
  padding:
    var(--obh-button-padding-y)
    var(--obh-button-padding-x) !important;

  border-radius: var(--obh-button-radius) !important;
  text-decoration: none !important;
}


/* ----------------------------------------------------------
   PURPLE FILLED BUTTON
   ---------------------------------------------------------- */

.obh-purplefill-btn .elementor-button,
.btn-bg-fill-purple .elementor-button {
  color: var(--obh-white) !important;
  background: var(--obh-purple-fill) !important;
  border-color: var(--obh-purple-fill) !important;
}

.obh-purplefill-btn .elementor-button:hover,
.obh-purplefill-btn .elementor-button:focus-visible,
.btn-bg-fill-purple .elementor-button:hover,
.btn-bg-fill-purple .elementor-button:focus-visible {
  color: var(--obh-white) !important;
  background: var(--obh-purple-deep) !important;
  border-color: var(--obh-purple-deep) !important;
}


/* ----------------------------------------------------------
   BLUE FILLED BUTTON
   Explicit class alias for the default button
   ---------------------------------------------------------- */

.obh-bluefill-btn .elementor-button,
.btn-bg-fill-blue .elementor-button {
  color: var(--obh-white) !important;
  background: var(--obh-blue) !important;
  border-color: var(--obh-blue) !important;
}

.obh-bluefill-btn .elementor-button:hover,
.obh-bluefill-btn .elementor-button:focus-visible,
.btn-bg-fill-blue .elementor-button:hover,
.btn-bg-fill-blue .elementor-button:focus-visible {
  color: var(--obh-white) !important;
  background: var(--obh-blue-deep) !important;
  border-color: var(--obh-blue-deep) !important;
}


/* ----------------------------------------------------------
   WHITE OUTLINE BUTTON
   ---------------------------------------------------------- */

.obh-whiteoutline-btn .elementor-button,
.btn-white-outline-transp .elementor-button {
  color: var(--obh-white) !important;
  background: transparent !important;
  border-color: var(--obh-white) !important;
}

.obh-whiteoutline-btn .elementor-button:hover,
.obh-whiteoutline-btn .elementor-button:focus-visible,
.btn-white-outline-transp .elementor-button:hover,
.btn-white-outline-transp .elementor-button:focus-visible {
  color: var(--obh-white) !important;
  background: var(--obh-purple-deep) !important;
  border-color: var(--obh-white) !important;
}


/* ----------------------------------------------------------
   BLUE OUTLINE BUTTON
   ---------------------------------------------------------- */

.obh-blueoutline-btn .elementor-button {
  color: var(--obh-blue-deep) !important;
  background: transparent !important;
  border-color: var(--obh-blue-deep) !important;
}

.obh-blueoutline-btn .elementor-button:hover,
.obh-blueoutline-btn .elementor-button:focus-visible {
  color: var(--obh-white) !important;
  background: var(--obh-blue) !important;
  border-color: var(--obh-blue) !important;
}


/* ----------------------------------------------------------
   WHITE FILLED BUTTON
   ---------------------------------------------------------- */

.obh-whitefill-btn .elementor-button {
  color: var(--obh-navy) !important;
  background: var(--obh-white) !important;
  border-color: var(--obh-white) !important;
}

.obh-whitefill-btn .elementor-button:hover,
.obh-whitefill-btn .elementor-button:focus-visible {
  color: var(--obh-navy) !important;
  background: var(--obh-off-white) !important;
  border-color: var(--obh-off-white) !important;
}


/* ----------------------------------------------------------
   TEXT + NORTHEAST ARROW BUTTON
   New and legacy class names are aliases.
   ---------------------------------------------------------- */

.obh-textarrow-btn .elementor-button,
.btn-uppercase-arrowline .elementor-button {
  display: inline-flex;
  align-items: center;

  width: auto;
  min-width: 0;

  padding: 0 0 1px !important;

  background: transparent !important;

  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  font-family: var(--obh-font-body) !important;
  font-size: 1.03rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.3px !important;

  text-transform: uppercase !important;
}


/* Legacy uppercase text-arrow variant */

.btn-uppercase-arrowline .elementor-button {
  text-transform: uppercase !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.5px !important;
}


/* Arrow layout */

.obh-textarrow-btn .elementor-button-content-wrapper,
.btn-uppercase-arrowline .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
}


/* Suppress unwanted pseudo-elements */

.obh-textarrow-btn .elementor-button::before,
.btn-uppercase-arrowline .elementor-button::before,
.obh-textarrow-btn .elementor-button::after,
.btn-uppercase-arrowline .elementor-button::after,
.obh-textarrow-btn .elementor-button-content-wrapper::before,
.btn-uppercase-arrowline .elementor-button-content-wrapper::before,
.obh-textarrow-btn .elementor-button-content-wrapper::after,
.btn-uppercase-arrowline .elementor-button-content-wrapper::after,
.obh-textarrow-btn .elementor-button-text::before,
.btn-uppercase-arrowline .elementor-button-text::before {
  content: none !important;
}


/* Northeast arrow */

.obh-textarrow-btn .elementor-button-text::after,
.btn-uppercase-arrowline .elementor-button-text::after {
  content: "\2197" !important;

  display: inline-block;
  margin-left: 0.35em;

  font: inherit;
  font-size: 0.85em;
  line-height: 1;

  transform: translateY(-0.08em);

  transition: transform var(--obh-transition-fast);
}


/* Text-arrow hover / focus */

.obh-textarrow-btn .elementor-button:hover,
.obh-textarrow-btn .elementor-button:focus-visible,
.btn-uppercase-arrowline .elementor-button:hover,
.btn-uppercase-arrowline .elementor-button:focus-visible {
  color: inherit !important;
  background: transparent !important;
  border-bottom-color: currentColor !important;
}

.obh-textarrow-btn .elementor-button:hover .elementor-button-text::after,
.obh-textarrow-btn .elementor-button:focus-visible .elementor-button-text::after,
.btn-uppercase-arrowline .elementor-button:hover .elementor-button-text::after,
.btn-uppercase-arrowline .elementor-button:focus-visible .elementor-button-text::after {
  transform: translate(2px, -0.12em);
}

/* ----------------------------------------------------------
   TEXT-ARROW COLOR VARIANTS

   Apply modifier to the same Elementor widget wrapper
   that carries .obh-textarrow-btn.
   ---------------------------------------------------------- */

.obh-textarrow-btn.obh-textarrow-btn--navy .elementor-button {
  color: var(--obh-navy) !important;
}

.obh-textarrow-btn.obh-textarrow-btn--navy .elementor-button:hover,
.obh-textarrow-btn.obh-textarrow-btn--navy .elementor-button:focus-visible {
  color: var(--obh-purple) !important;
}

.obh-textarrow-btn.obh-textarrow-btn--primary .elementor-button {
  color: var(--obh-primary) !important;
}

.obh-textarrow-btn.obh-textarrow-btn--purple .elementor-button {
  color: var(--obh-purple) !important;
}

.obh-textarrow-btn.obh-textarrow-btn--light .elementor-button {
  color: var(--obh-white) !important;
}

/* ----------------------------------------------------------
   ACCESSIBLE KEYBOARD FOCUS
   ---------------------------------------------------------- */

.elementor-button:focus-visible {
  outline: 2px solid var(--obh-accent);
  outline-offset: 1px;
}

/* ----------------------------------------------------------
   MOBILE BUTTON TYPOGRAPHY
   Standard sitewide buttons = 1rem
   Text-arrow buttons = 0.95rem
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .elementor-button {
    font-size: 0.97rem !important;
  }

  .obh-textarrow-btn .elementor-button,
  .btn-uppercase-arrowline .elementor-button {
    font-size: 0.92rem !important;
  }

  .obh-form button,
  .obh-form input[type="submit"],
  .obh-form .gform_button {
    font-size: 1rem;
  }
}

/* 7. DROPDOWN HEADING LINK =============================== */
.obh-dropdown-link .elementor-heading-title,
.obh-dropdown-link .elementor-heading-title a { display: inline-flex; align-items: center; }
.obh-dropdown-link .elementor-heading-title a { color: inherit; text-decoration: none; }
.obh-dropdown-link .elementor-heading-title a::after {
  content: "→";
  width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-5px);
  transition: width var(--obh-transition-fast), margin-left var(--obh-transition-fast), opacity var(--obh-transition-fast), transform var(--obh-transition-fast);
}
.obh-dropdown-link:hover .elementor-heading-title a::after,
.obh-dropdown-link .elementor-heading-title a:focus-visible::after {
  width: 1em; margin-left: 0.4em; opacity: 1; transform: translateX(0);
}

/* 8. OPT-IN LAYOUT UTILITIES =============================
   Apply these classes only where wanted; they do not rewrite
   every existing Elementor container.
   ========================================================= */
.obh-page-width { width: min(var(--obh-content-width), 1440px); margin-inline: auto; }
.obh-section { padding-block: var(--obh-section-space); padding-inline: var(--obh-inline-gutter); }
.obh-reading-width { width: min(100%, var(--obh-reading-width)); }
.obh-stack { display: flex; flex-direction: column; gap: var(--obh-content-gap); }

/* 9. OPT-IN FORM SYSTEM ==================================
   Add obh-form to an Elementor Form or Gravity Forms wrapper.
   ========================================================= */
.obh-form label,
.obh-form .gfield_label {
  color: var(--obh-navy);
  font: 600 1rem/1.3 var(--obh-font-body);
}

.obh-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.obh-form select,
.obh-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  color: var(--obh-navy);
  background: var(--obh-white);
  border: 1px solid var(--obh-primary-deep);
  border-radius: 4px;
  font: 400 1rem/1.4 var(--obh-font-body);
  transition: border-color var(--obh-transition-fast), box-shadow var(--obh-transition-fast);
}
.obh-form textarea { min-height: 140px; resize: vertical; }
.obh-form input:focus,
.obh-form select:focus,
.obh-form textarea:focus {
  outline: none;
  border-color: var(--obh-primary);
  box-shadow: 0 0 0 3px rgba(123, 212, 244, 0.42);
}
.obh-form button,
.obh-form input[type="submit"],
.obh-form .gform_button {
  min-height: 44px;
  padding: var(--obh-button-padding-y) var(--obh-button-padding-x);
  color: var(--obh-white);
  background: var(--obh-blue);
  border: 1px solid var(--obh-blue);
  border-radius: var(--obh-button-radius);
  font: 500 1.03rem/1.2 var(--obh-font-body);
  cursor: pointer;
}
.obh-form button:hover,
.obh-form input[type="submit"]:hover,
.obh-form .gform_button:hover { background: var(--obh-blue-deep); border-color: var(--obh-blue-deep); }

/* 11. TEAM CARDS ========================================= */
.team-headshot { width: 225px; max-width: 100%; aspect-ratio: 1; margin-inline: auto; }
.team-headshot .elementor-widget-container { width: 100%; height: 100%; overflow: hidden; border-radius: 50%; }
.team-headshot img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.team-card { width: 100%; max-width: 320px; margin-inline: auto; }


/* =========================================================
   STRUCTURED LIST
   PHP-rendered semantic lists from ACF repeaters.

   Markup:
   <ul class="obh-structured-list__items">
     <li class="obh-structured-list__item">...</li>
   </ul>

   Used for Conditions Treated, Levels of Care, treatment
   modalities, program features, and similar structured data.
   ========================================================= */

.obh-structured-list__items {
  list-style: none !important;
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.obh-structured-list__item {
  position: relative;
  display: block;
  width: 100%;

  list-style: none !important;
  margin: 0 !important;
  padding: 0 0 0 calc(0.95em + 10px) !important;

  font-family: var(--obh-font-heading) !important;
  font-size: clamp(1.17rem, 1.5vw, 1.2rem) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.8px !important;
}

.obh-structured-list__item::marker {
  content: "" !important;
}

.obh-structured-list__item:not(:last-child) {
  margin-bottom: 16px !important;
}

/* Odyssey plus marker */
.obh-structured-list__item::before {
  content: "" !important;
  position: absolute;
  top: 0.15em;
  left: 0;
  width: 0.7em;
  height: 0.7em;

  background:
    linear-gradient(#2799DE, #2799DE) center / 100% 3px no-repeat,
    linear-gradient(#2799DE, #2799DE) center / 3px 100% no-repeat;
}

.obh-structured-list__item a {
  font: inherit !important;
  color: #176FA8 !important;
}

/* Responsive */
@media (max-width: 767px) {
  .obh-structured-list__item {
    font-size: 1.1rem !important;
  }

  .obh-structured-list__item:not(:last-child) {
    margin-bottom: 12px !important;
  }
}


/* =========================================================
   SHARED CONTENT COMPONENT TYPOGRAPHY

   Used by:
   - Referral Process steps
   - Communication Standards points
   ========================================================= */

.obh-referral-step__heading,
.obh-communication-point__heading {
  margin: 0;
  padding: 0;

  color: var(--obh-primary-deep);
  font-family: var(--obh-font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
}

.obh-referral-step__copy,
.obh-communication-point__copy {
  margin: 0 !important;
  padding: 0 !important;

  color: #102A4D !important;
  font-family: var(--obh-font-body) !important;
  font-size: 1.03rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.1px !important;
}


/* =========================================================
   REFERRAL PROCESS STEPS
   PHP-rendered ACF repeater component.
   ========================================================= */

.obh-referral-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
}

.obh-referral-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;

  margin: 0;
  padding: 0 12px 0 28px;

  border-left: 8px solid #A2DAF4;
  box-sizing: border-box;
}

.obh-referral-step__copy p {
  margin: 0 !important;
}

@media (max-width: 1024px) {
  .obh-referral-steps {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   COMMUNICATION STANDARDS POINTS
   PHP-rendered ACF repeater component.
   ========================================================= */

.obh-communication-points {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  width: 100%;
  max-width: 100%;

  margin: 0 !important;
  padding: 0 !important;
}

.obh-communication-point {
  position: relative;
  display: block;
  width: 100%;

  margin: 0 !important;
  padding: 0 0 0 calc(0.95em + 10px) !important;

  box-sizing: border-box;
}

.obh-communication-point:not(:last-child) {
  margin-bottom: 22px !important;
}

/* Odyssey plus marker */
.obh-communication-point::before {
  content: "" !important;

  position: absolute;
  top: 0.16em;
  left: 0;

  width: 0.7em;
  height: 0.7em;

  background:
    linear-gradient(#2799DE, #2799DE) center / 100% 3px no-repeat,
    linear-gradient(#2799DE, #2799DE) center / 3px 100% no-repeat;
}

/* Communication heading sits above supporting copy */
.obh-communication-point__heading {
  display: block;
}

/* Supporting explanation spacing */
.obh-communication-point__copy {
  display: block;
  margin-top: 16px !important;
}

/* Prevent any old separator from appearing */
.obh-communication-point__heading + .obh-communication-point__copy::before {
  content: none !important;
}

/* =========================================================
   COMPONENT RESPONSIVE TYPOGRAPHY
   ========================================================= */

@media (max-width: 767px) {

  .obh-referral-step__heading,
  .obh-communication-point__heading {
    font-size: 1.35rem;
  }

  .obh-referral-step__copy,
  .obh-communication-point__copy {
    font-size: 1.1rem !important;
  }

  .obh-communication-point:not(:last-child) {
    margin-bottom: 18px !important;
  }
}

/* =========================================================
   FEATURED INSURANCE PROVIDERS
   Global ACF-driven insurance grid.

   Source:
   Odyssey Site Settings > Insurance Directory

   Shortcode:
   [obh_insurance_grid]
   ========================================================= */

.obh-insurance-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
}


/* =========================================================
   PROVIDER CARD
   ========================================================= */

.obh-insurance-card {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-width: 0;
	min-height: 88px;

	margin: 0;
	padding: 10px 16px;

	background: transparent;

	/* Soft border for dark gradient backgrounds */
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 3px;

	box-sizing: border-box;
}


/* =========================================================
   LOGO AREA
   Gives differently proportioned logos a consistent box.
   ========================================================= */

.obh-insurance-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 66px;
	min-width: 0;
}


/* Actual WordPress image */

.obh-insurance-card__image {
	display: block;

	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: 66px !important;

	object-fit: contain;
}


/* =========================================================
   PROVIDER NAME
   Keep markup available but remove it visually.
   ========================================================= */

.obh-insurance-card__name {
	display: none;
}


/* =========================================================
   "+ MORE" CARD
   Automatically added after the final insurance provider.
   ========================================================= */

.obh-insurance-grid::after {
	content: "+ more";

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-width: 0;
	min-height: 56px;

	margin: 0;
	padding: 8px 12px;

	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 3px;

	box-sizing: border-box;

	color: #ffffff;

	font-family: var(--obh-font-body);
	font-size: 1.13rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;

	text-align: center;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

	.obh-insurance-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.obh-insurance-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.obh-insurance-card,
	.obh-insurance-grid::after {
		min-height: 100px;
		padding: 12px 16px;
	}

	.obh-insurance-card__logo {
		height: 70px;
	}

	.obh-insurance-card__image {
		max-height: 60px !important;
	}

	.obh-insurance-grid::after {
		font-size: 1rem;
	}

}

/* =========================================================
   ODYSSEY VIRTUAL — SCROLL-SWAP HEADER
   Page ID: 1813
   ========================================================= */

.page-id-1813 .obh-virtual-header-initial,
.page-id-1813 .obh-virtual-header-scrolled {
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease,
    transform 0.35s ease;
}

/* Initial header */
.page-id-1813 .obh-virtual-header-initial {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Scrolled header starts hidden */
.page-id-1813 .obh-virtual-header-scrolled {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;

  width: 100%;
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
}

/* ---------------------------------------------------------
   SCROLLED STATE
   --------------------------------------------------------- */

.page-id-1813.obh-virtual-header-is-scrolled
.obh-virtual-header-initial {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
}

.page-id-1813.obh-virtual-header-is-scrolled
.obh-virtual-header-scrolled {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}


/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .page-id-1813 .obh-virtual-header-initial,
  .page-id-1813 .obh-virtual-header-scrolled {
    transition: none;
    transform: none;
  }
}

/* ----------------------------------------------------------
   LINKED CONTAINER / CARD
   Whole container is clickable, text remains navy.
   ---------------------------------------------------------- */

.obh-linked-card,
.obh-linked-card:hover,
.obh-linked-card:focus,
.obh-linked-card:focus-visible,
.obh-linked-card p,
.obh-linked-card h2,
.obh-linked-card h3,
.obh-linked-card h4,
.obh-linked-card span,
.obh-linked-card:hover p,
.obh-linked-card:hover h2,
.obh-linked-card:hover h3,
.obh-linked-card:hover h4,
.obh-linked-card:hover span {
  color: var(--obh-navy) !important;
  text-decoration: none !important;
}

.obh-no-link-underline a {
  text-decoration: none !important;
}
/* ----------------------------------------------------------
   ELEMENTOR TEXT — INHERIT WIDGET FONT WEIGHT
   Removes inline editor weight lock when helper class is used.
   ---------------------------------------------------------- */

.obh-inherit-widget-weight
.elementor-widget-container,
.obh-inherit-widget-weight
.elementor-widget-container p,
.obh-inherit-widget-weight
.elementor-widget-container span {
  font-weight: inherit !important;
}

/* ----------------------------------------------------------
   ELEMENTOR TEXT — INHERIT WIDGET FONT WEIGHT
   Removes inline editor weight lock when helper class is used.
   ---------------------------------------------------------- */

.obh-inherit-widget-weight
.elementor-widget-container,
.obh-inherit-widget-weight
.elementor-widget-container p,
.obh-inherit-widget-weight
.elementor-widget-container span {
  font-weight: inherit !important;
}