/* ============================================================
   4IFM Skin v1.0 — brand layer over Bootstrap 5
   Brand Guidelines v2.0 (August 2026). Tokens are the source of truth.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family: 'Space Grotesk'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/space-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); }

/* ---------- Design tokens ---------- */
:root {
  --4ifm-navy: #242861;      --4ifm-navy-900: #1A1D47;
  --4ifm-indigo: #49477A;    --4ifm-mist: #D9D7E3;
  --4ifm-green: #8BC540;     --4ifm-green-dark: #446B19;
  --4ifm-green-tint: #EEF7E2;
  --4ifm-ink: #23232B;       --4ifm-charcoal: #4C4C57;
  --4ifm-slate: #6B7280;     --4ifm-silver: #D8DBE0;
  --4ifm-cloud: #F5F6F8;     --4ifm-white: #FFFFFF;
  --4ifm-amber: #FFCB47;     --4ifm-coral: #E25555;
  --4ifm-font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --4ifm-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --4ifm-radius: 14px;       --4ifm-radius-sm: 8px;
  --4ifm-gradient: linear-gradient(90deg, #242861, #8BC540);
  --4ifm-shadow: 0 10px 34px rgba(26, 29, 71, 0.10);
  --4ifm-header-h: 88px;
}

/* ---------- Base ---------- */
.ifm-theme {
  font-family: var(--4ifm-font-body);
  color: var(--4ifm-charcoal);
  background: var(--4ifm-white);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.ifm-theme h1, .ifm-theme h2, .ifm-theme h3,
.ifm-theme h4, .ifm-theme h5, .ifm-theme h6 {
  font-family: var(--4ifm-font-display);
  color: var(--4ifm-navy);
  font-weight: 700;
  line-height: 1.15;
}
.ifm-theme h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: -0.02em; }
.ifm-theme h2 { font-size: clamp(1.7rem, 3vw, 2.25rem); }
.ifm-theme h3 { font-size: 1.3rem; }
.ifm-theme a { color: var(--4ifm-green-dark); text-decoration: none; }
.ifm-theme a:hover { color: var(--4ifm-navy); text-decoration: underline; }
.ifm-theme ::selection { background: var(--4ifm-mist); color: var(--4ifm-navy); }
.ifm-theme img { max-width: 100%; height: auto; }

.ifm-container { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.ifm-section { padding-block: 56px; }

/* ---------- Buttons ---------- */
.ifm-btn {
  display: inline-block;
  font-family: var(--4ifm-font-display);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 10px;
  padding: 13px 26px;
  text-decoration: none !important;
  border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  cursor: pointer;
}
.ifm-btn:hover { transform: translateY(-1px); }
.ifm-btn-primary { background: var(--4ifm-green); color: var(--4ifm-navy) !important; }
.ifm-btn-primary:hover { background: #97CF52; box-shadow: 0 6px 18px rgba(139, 197, 64, .35); }
.ifm-btn-secondary { background: var(--4ifm-navy); color: #fff !important; }
.ifm-btn-secondary:hover { background: var(--4ifm-navy-900); }
.ifm-btn-ghost { background: transparent; color: var(--4ifm-navy) !important; border-color: var(--4ifm-navy); }
.ifm-btn-ghost:hover { background: var(--4ifm-mist); }
.ifm-btn-lg { font-size: 1.1rem; padding: 16px 34px; }

/* Bootstrap button mapping so module output stays on brand */
.ifm-theme .btn-primary {
  --bs-btn-bg: var(--4ifm-green); --bs-btn-border-color: var(--4ifm-green);
  --bs-btn-color: var(--4ifm-navy);
  --bs-btn-hover-bg: #97CF52; --bs-btn-hover-border-color: #97CF52;
  --bs-btn-hover-color: var(--4ifm-navy);
  --bs-btn-active-bg: var(--4ifm-green-dark); --bs-btn-active-color: #fff;
  font-family: var(--4ifm-font-display); font-weight: 700;
}
.ifm-theme .btn-secondary {
  --bs-btn-bg: var(--4ifm-navy); --bs-btn-border-color: var(--4ifm-navy);
  --bs-btn-hover-bg: var(--4ifm-navy-900); --bs-btn-hover-border-color: var(--4ifm-navy-900);
  font-family: var(--4ifm-font-display); font-weight: 700;
}
.ifm-theme .form-control:focus, .ifm-theme .form-select:focus {
  border-color: var(--4ifm-green);
  box-shadow: 0 0 0 .25rem rgba(139, 197, 64, .25);
}

/* ---------- Header ---------- */
.ifm-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.ifm-header.is-stuck { border-bottom-color: var(--4ifm-silver); box-shadow: 0 4px 24px rgba(26,29,71,.08); }
.ifm-header-inner { display: flex; align-items: center; gap: 28px; height: var(--4ifm-header-h); }
.ifm-brand { display: flex; align-items: center; flex-shrink: 0; }
.ifm-theme .ifm-brand-logo { height: 64px; width: auto; display: block; }
.ifm-nav-desktop { flex: 1; display: flex; justify-content: center; }
.ifm-header-actions { display: flex; align-items: center; gap: 14px; }

/* Desktop menu */
.ifm-menu { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ifm-menu-item { position: relative; }
.ifm-menu-link {
  display: inline-block; padding: 10px 14px;
  font-family: var(--4ifm-font-display); font-weight: 500; font-size: 1rem;
  color: var(--4ifm-navy) !important; text-decoration: none !important;
  border-radius: 8px;
}
.ifm-menu-item:hover > .ifm-menu-link,
.ifm-menu-item.is-active > .ifm-menu-link { background: var(--4ifm-cloud); color: var(--4ifm-navy); }
.ifm-menu-item.is-active > .ifm-menu-link { box-shadow: inset 0 -3px 0 var(--4ifm-green); border-radius: 8px 8px 0 0; }
.ifm-caret { display: inline-block; margin-left: 7px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.ifm-menu-item.has-children > .ifm-menu-link::after { content: ""; display: inline-block; margin-left: 7px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.ifm-submenu {
  position: absolute; top: 100%; left: 0; min-width: 240px;
  background: #fff; border: 1px solid var(--4ifm-silver); border-radius: 12px;
  box-shadow: var(--4ifm-shadow); padding: 8px; margin: 6px 0 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.ifm-menu-item:hover > .ifm-submenu,
.ifm-menu-item:focus-within > .ifm-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.ifm-submenu a {
  display: block; padding: 10px 14px; border-radius: 8px;
  font-weight: 500; color: var(--4ifm-charcoal) !important; text-decoration: none !important;
}
.ifm-submenu a:hover { background: var(--4ifm-green-tint); color: var(--4ifm-green-dark) !important; }
.ifm-submenu .is-active a { background: var(--4ifm-cloud); color: var(--4ifm-navy) !important; }

/* Mobile nav */
.ifm-nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.ifm-nav-toggle span { display: block; width: 24px; height: 2.5px; background: var(--4ifm-navy); margin: 5px 0; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.ifm-nav-open .ifm-nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.ifm-nav-open .ifm-nav-toggle span:nth-child(2) { opacity: 0; }
.ifm-nav-open .ifm-nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.ifm-nav-mobile {
  display: none; background: #fff; border-top: 1px solid var(--4ifm-silver);
  padding: 18px 24px 26px; box-shadow: 0 20px 30px rgba(26,29,71,.12);
}
.ifm-nav-open .ifm-nav-mobile { display: block; }
.ifm-mobile-menu { list-style: none; margin: 0 0 16px; padding: 0; }
.ifm-mobile-menu > li { border-bottom: 1px solid var(--4ifm-cloud); }
.ifm-mobile-menu a {
  display: block; padding: 13px 4px;
  font-family: var(--4ifm-font-display); font-weight: 500; font-size: 1.05rem;
  color: var(--4ifm-navy) !important; text-decoration: none !important;
}
.ifm-mobile-menu li.is-active > a { color: var(--4ifm-green-dark) !important; }
.ifm-mobile-menu ul { list-style: none; margin: 0; padding: 0 0 8px 18px; }
.ifm-mobile-menu ul a { font-size: .97rem; font-weight: 400; color: var(--4ifm-charcoal) !important; padding: 9px 4px; }
.ifm-mobile-cta { width: 100%; text-align: center; }

@media (max-width: 991px) {
  .ifm-nav-desktop, .ifm-header-cta { display: none; }
  .ifm-nav-toggle { display: block; }
  .ifm-theme .ifm-brand-logo { height: 52px; }
}

/* ---------- Hero (home layout) ---------- */
.ifm-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--4ifm-navy-900) 0%, var(--4ifm-navy) 55%, #2E3470 100%);
  color: #fff;
}
.ifm-hero-blob-green {
  position: absolute; width: 560px; height: 560px; right: -160px; top: -180px;
  background: var(--4ifm-green); opacity: .13; border-radius: 34%; transform: rotate(24deg);
}
.ifm-hero-pane { position: relative; z-index: 2; padding-block: 88px 96px; }
/* high specificity: Portal.css (.DnnModule h1 …) loads after the skin */
.ifm-theme .ifm-hero-pane h1, .ifm-theme .ifm-hero-pane h2,
.ifm-hero-pane .DnnModule h1, .ifm-hero-pane .DnnModule h2 { color: #fff; }
.ifm-hero-pane h1 .accent, .ifm-hero-pane .accent { color: var(--4ifm-green); }
.ifm-theme .ifm-hero-pane p, .ifm-hero-pane .DnnModule p { color: var(--4ifm-mist); font-size: 1.2rem; max-width: 58ch; }
.ifm-hero-pane .ifm-btn-ghost { color: #fff !important; border-color: rgba(255,255,255,.7); }
.ifm-hero-pane .ifm-btn-ghost:hover { background: rgba(255,255,255,.12); }

/* ---------- Interior page band ---------- */
.ifm-page-band {
  background: linear-gradient(135deg, var(--4ifm-navy-900), var(--4ifm-navy));
  padding-block: 44px;
  position: relative;
}
.ifm-page-band::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px;
  background: var(--4ifm-gradient);
}
.ifm-page-title { color: #fff !important; margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.6rem); text-transform: lowercase; }
.ifm-page-title::first-letter { text-transform: uppercase; }

/* ---------- Panes & layout helpers ---------- */
.ifm-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .ifm-feature-grid { grid-template-columns: 1fr; } }
.ifm-proof { background: var(--4ifm-cloud); border-block: 1px solid var(--4ifm-silver); }
.ifm-page-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.ifm-layout-default .ifm-page-grid:has(.ifm-sidebar-pane .DnnModule) { grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr); }
@media (max-width: 900px) { .ifm-layout-default .ifm-page-grid:has(.ifm-sidebar-pane .DnnModule) { grid-template-columns: 1fr; } }
body:not(.dnnEditState) .ifm-sidebar-pane:not(:has(.DnnModule)),
body:not(.dnnEditState) .ifm-fluid-pane:not(:has(.DnnModule)) { display: none; }
body:not(.dnnEditState) .ifm-proof:not(:has(.DnnModule)) { display: none; }


/* ---------- Stat tiles (proof band) ---------- */
.ifm-stats { display: flex; flex-wrap: wrap; gap: 24px; text-align: center; }
.ifm-stat { flex: 1 1 240px; }
.ifm-theme .ifm-stat-value, .ifm-stats .ifm-stat-value {
  font-family: var(--4ifm-font-display);
  font-size: 2.6rem; font-weight: 700; line-height: 1.15;
  color: var(--4ifm-navy); margin-bottom: 6px;
}
.ifm-theme .ifm-stat-label, .ifm-stats .ifm-stat-label { color: var(--4ifm-charcoal); margin: 0; }

/* ---------- CTA band (pre-footer) ---------- */
.ifm-cta-band { background: var(--4ifm-navy); position: relative; overflow: hidden; }
.ifm-cta-band::before {
  content: ""; position: absolute; width: 420px; height: 420px; left: -140px; bottom: -240px;
  background: var(--4ifm-green); opacity: .12; border-radius: 34%; transform: rotate(-18deg);
}
.ifm-cta-band-inner {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 32px; padding-block: 52px; flex-wrap: wrap;
}
.ifm-cta-title { color: #fff !important; margin: 0 0 8px; }
.ifm-cta-sub { color: var(--4ifm-mist); margin: 0; max-width: 52ch; }

/* ---------- Footer ---------- */
.ifm-footer { background: var(--4ifm-navy-900); color: #9BA0C4; }
.ifm-footer .ifm-container { padding-block: 56px 32px; }
.ifm-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .ifm-footer-grid { grid-template-columns: 1fr; } }
.ifm-theme .ifm-footer-logo { height: 72px; width: auto; margin-bottom: 16px; }
.ifm-footer-tagline { font-family: var(--4ifm-font-display); font-weight: 700; font-size: 1.15rem; color: #fff; margin-bottom: 10px; }
.ifm-footer-desc { font-size: .95rem; max-width: 46ch; }
.ifm-footer-heading {
  font-family: var(--4ifm-font-display); font-size: .85rem !important; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--4ifm-green) !important; margin-bottom: 14px;
}
.ifm-footer a { color: #C9CCE3 !important; text-decoration: none; }
.ifm-footer a:hover { color: #fff !important; text-decoration: underline; }
.ifm-footer-menu { list-style: none; margin: 0; padding: 0; }
.ifm-footer-menu li { margin-bottom: 9px; }
.ifm-footer-contact p { margin-bottom: 9px; }
.ifm-footer-login { margin-top: 18px; font-size: .85rem; opacity: .8; }
.ifm-footer-legal {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 22px; font-size: .85rem;
}
.ifm-gradient-bar { height: 5px; background: var(--4ifm-gradient); }

/* ---------- Cards (used by containers & content) ---------- */
.ifm-card {
  background: #fff; border: 1px solid var(--4ifm-silver);
  border-radius: var(--4ifm-radius); padding: 28px;
  box-shadow: 0 2px 10px rgba(26,29,71,.04);
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}
.ifm-card:hover { transform: translateY(-3px); box-shadow: var(--4ifm-shadow); }
.ifm-card-highlight { background: var(--4ifm-green-tint); border-color: #D3E9B6; }
.ifm-card h3, .ifm-card h4 { margin-top: 0; }

/* ---------- Module title container ---------- */
.ifm-module-title {
  font-family: var(--4ifm-font-display); color: var(--4ifm-navy);
  font-size: 1.35rem; font-weight: 700; margin: 0 0 16px;
  padding-left: 14px; border-left: 4px solid var(--4ifm-green);
}

/* ---------- Popup skin ---------- */
.ifm-popup { padding: 20px; background: #fff; }

/* ---------- Edit-mode niceties ---------- */
.dnnEditState .ifm-hero-pane, .dnnEditState .ifm-sidebar-pane, .dnnEditState .ifm-fluid-pane { min-height: 60px; }

/* ---------- Live-site tidy: collapse empty section spacing ---------- */
.ifm-section:not(:has(.DnnModule)) { padding-block: 0; }
.ifm-hero:not(:has(.DnnModule)) .ifm-hero-pane { padding-block: 40px; }
.dnnEditState .ifm-section:not(:has(.DnnModule)) { padding-block: 32px; } /* keep drop targets usable in edit mode */