@import url("https://fonts.googleapis.com/css2?family=Special+Gothic+Expanded+One&display=swap");

/* CMRF brand tokens. Keep the template's component structure below this layer. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --cmrf-accent: #5AADBD;
  --cmrf-accent-rgb: 90, 173, 189;
  --cmrf-white: #F7FAFC;
  --cmrf-white-rgb: 247, 250, 252;
  --cmrf-surface: #FFFFFF;
  --cmrf-surface-rgb: 255, 255, 255;
  --cmrf-dark: #0B1F33;
  --cmrf-dark-rgb: 11, 31, 51;
  --cmrf-primary: var(--cmrf-accent);
  --cmrf-canvas: var(--cmrf-white);
  --cmrf-ink: var(--cmrf-dark);
  --cmrf-muted: rgba(var(--cmrf-dark-rgb), 0.6);
  --cmrf-dark-light: rgba(var(--cmrf-dark-rgb), 0.7);

  --cmrf-body-font-family: "Manrope", sans-serif;
  --cmrf-title-font-family: "Special Gothic Expanded One", Arial, sans-serif;

  /* Existing template geometry, exposed for brand-wide adjustments. */
  --cmrf-border-width: 1px;
  --cmrf-border-radius-sm: 20px;
  --cmrf-border-radius-md: 24px;
  --cmrf-border-radius-pill: 9999px;
  --cmrf-shadow: 0px 1px 3px rgba(11, 31, 51, 0.15);

  /* Bootstrap/template semantic bridge. */
  --bs-blue: var(--cmrf-accent);
  --bs-primary: var(--cmrf-accent);
  --bs-primary-rgb: var(--cmrf-accent-rgb);
  --bs-primary-text-emphasis: #285663;
  --bs-primary-bg-subtle: #E8F4F6;
  --bs-primary-border-subtle: #B5DDE4;
  --bs-secondary: var(--cmrf-dark);
  --bs-secondary-rgb: var(--cmrf-dark-rgb);
  --bs-light: rgba(var(--cmrf-dark-rgb), 0.12);
  --bs-light-rgb: var(--cmrf-dark-rgb);
  --bs-dark: var(--cmrf-dark);
  --bs-dark-rgb: var(--cmrf-dark-rgb);
  --bs-muted: var(--cmrf-muted);
  --bs-muted-rgb: var(--cmrf-dark-rgb);
  --bs-dark-light: var(--cmrf-dark-light);
  --bs-dark-light-rgb: var(--cmrf-dark-rgb);
  --bs-light-gray: var(--cmrf-white);
  --bs-light-gray-rgb: var(--cmrf-white-rgb);
  --bs-white: var(--cmrf-white);
  --bs-white-rgb: var(--cmrf-white-rgb);
  --bs-card-bg: var(--cmrf-surface);
  --bs-card-cap-bg: var(--cmrf-surface);
  --bs-body-font-family: var(--cmrf-body-font-family);
  --bs-body-color: rgba(var(--cmrf-dark-rgb), 0.7);
  --bs-body-color-rgb: var(--cmrf-dark-rgb);
  --bs-body-bg: var(--cmrf-white);
  --bs-body-bg-rgb: var(--cmrf-white-rgb);
  --bs-emphasis-color: var(--cmrf-dark);
  --bs-emphasis-color-rgb: var(--cmrf-dark-rgb);
  --bs-secondary-color: rgba(var(--cmrf-dark-rgb), 0.75);
  --bs-secondary-color-rgb: var(--cmrf-dark-rgb);
  --bs-secondary-bg: var(--cmrf-white);
  --bs-secondary-bg-rgb: var(--cmrf-white-rgb);
  --bs-tertiary-color: rgba(var(--cmrf-dark-rgb), 0.5);
  --bs-tertiary-color-rgb: var(--cmrf-dark-rgb);
  --bs-tertiary-bg: rgba(var(--cmrf-dark-rgb), 0.12);
  --bs-tertiary-bg-rgb: var(--cmrf-dark-rgb);
  --bs-heading-color: var(--cmrf-dark);
  --bs-link-color: var(--cmrf-dark);
  --bs-link-color-rgb: var(--cmrf-dark-rgb);
  --bs-link-hover-color: var(--cmrf-accent);
  --bs-link-hover-color-rgb: var(--cmrf-accent-rgb);
  --bs-border-color: rgba(var(--cmrf-dark-rgb), 0.12);
  --bs-border-color-translucent: rgba(var(--cmrf-dark-rgb), 0.175);
  --bs-focus-ring-color: rgba(var(--cmrf-accent-rgb), 0.25);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: var(--cmrf-border-radius-sm);
  --bs-border-radius-lg: var(--cmrf-border-radius-md);
  --bs-border-radius-pill: var(--cmrf-border-radius-pill);
  --bs-box-shadow: var(--cmrf-shadow);
}

body {
  font-family: var(--cmrf-body-font-family);
  color: rgba(var(--cmrf-dark-rgb), 0.7);
  background-color: var(--cmrf-white);
}

.header {
  z-index: 1100;
}

.header .dropdown-menu {
  z-index: 1101;
}

.cmrf-brand-logo {
  display: block;
  width: auto;
  max-width: 180px;
  max-height: 44px;
  object-fit: contain;
}

.cmrf-footer-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.cmrf-footer-logo img {
  display: block;
  width: auto;
  max-width: 220px;
  max-height: 64px;
  object-fit: contain;
}

.cmrf-location-banner {
  width: 100%;
  background: var(--cmrf-dark);
  border-top: 1px solid rgba(var(--cmrf-dark-rgb), 0.16);
}

.cmrf-location-banner__map {
  width: 100%;
  min-height: 260px;
  height: min(34vw, 380px);
}

.cmrf-location-banner__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.cmrf-location-banner__action {
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (max-width: 575.98px) {
  .cmrf-brand-logo {
    max-width: 140px;
    max-height: 36px;
  }

  .cmrf-location-banner__map {
    height: 280px;
  }

  .cmrf-location-banner__action {
    justify-content: flex-start;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-family: var(--cmrf-title-font-family);
  color: var(--cmrf-dark);
}

.bg-primary,
.btn-primary,
.header.fixed-header,
.accordion-button:not(.collapsed)::after,
.progress-bar,
.list-group-item.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--cmrf-accent) !important;
}

.text-primary,
.link-hover:hover,
a:hover,
.btn-outline-primary,
.services-tab .nav-tabs .nav-item .nav-link.active {
  color: var(--cmrf-accent) !important;
}

.border-primary,
.btn-primary,
.btn-outline-primary,
.progress,
.list-group-item.active {
  border-color: var(--cmrf-accent) !important;
}

.bg-dark,
.btn-dark,
.footer,
.text-bg-dark {
  background-color: var(--cmrf-dark) !important;
}

.text-dark,
.btn-outline-dark,
.text-bg-light,
.text-bg-white {
  color: var(--cmrf-dark) !important;
}

.bg-light,
.bg-light-gray,
.btn-light,
.text-bg-light-gray {
  background-color: var(--cmrf-surface) !important;
}

.card {
  --bs-card-bg: var(--cmrf-surface);
  --bs-card-cap-bg: var(--cmrf-surface);
}

.text-white,
.btn-dark,
.btn-outline-light:hover {
  color: var(--cmrf-white) !important;
}

.btn-primary,
.btn-outline-primary:hover {
  --bs-btn-color: var(--cmrf-dark);
  --bs-btn-bg: var(--cmrf-accent);
  --bs-btn-border-color: var(--cmrf-accent);
  --bs-btn-hover-color: var(--cmrf-white);
  --bs-btn-hover-bg: var(--cmrf-dark);
  --bs-btn-hover-border-color: var(--cmrf-dark);
  --bs-btn-active-color: var(--cmrf-white);
  --bs-btn-active-bg: var(--cmrf-dark);
  --bs-btn-active-border-color: var(--cmrf-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--cmrf-accent);
  --bs-btn-border-color: var(--cmrf-accent);
  --bs-btn-hover-color: var(--cmrf-dark);
  --bs-btn-hover-bg: var(--cmrf-accent);
  --bs-btn-hover-border-color: var(--cmrf-accent);
}

.btn-dark {
  --bs-btn-color: var(--cmrf-white);
  --bs-btn-bg: var(--cmrf-dark);
  --bs-btn-border-color: var(--cmrf-dark);
  --bs-btn-hover-color: var(--cmrf-dark);
  --bs-btn-hover-bg: var(--cmrf-white);
  --bs-btn-hover-border-color: var(--cmrf-white);
}

.header.fixed-header .light-dark,
.header.fixed-header .toggle-menu {
  color: var(--cmrf-dark) !important;
}

.header.fixed-header .toggle-menu {
  background-color: var(--cmrf-dark) !important;
}

.header.fixed-header .toggle-menu .menu-icon {
  color: var(--cmrf-white) !important;
}

.border-line {
  background-color: var(--cmrf-white) !important;
}

/* Inner banners must keep their own height. The landing hero intentionally
   uses min-vh-100, while inner pages use a compact, content-led banner. */
.banner-section.cmrf-inner-banner {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  height: auto;
  align-items: flex-end;
}

.banner-section.cmrf-inner-banner::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
}

.banner-section.cmrf-inner-banner > .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.banner-section.cmrf-inner-banner > .container > .d-flex {
  width: 100%;
}

@media (max-width: 991.98px) {
  .banner-section.cmrf-inner-banner {
    min-height: 360px;
  }
}