/*
 * MENA GROUP — iLanding Brand Override
 * Replaces iLanding's blue accent with Mena's red/navy brand identity
 */

:root {
  --accent-color: #fe5c35;
  --heading-color: #2b1819;
  --nav-hover-color: #fe5c35;
  --nav-dropdown-hover-color: #fe5c35;
}

.dark-background {
  --background-color: #2b1819;
  --surface-color: #e04a24;
}

/* Accent elements */
.btn-getstarted,
.btn-getstarted:focus {
  background: #fe5c35;
}
.btn-getstarted:hover {
  background: #e04a24;
}

/* Bootstrap's own .btn-primary ships with its default blue (--bs-btn-bg),
   which mena's brand variables above don't touch — override it here so
   every primary button on the site matches the orange/red brand accent. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #fe5c35;
  --bs-btn-border-color: #fe5c35;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #e04a24;
  --bs-btn-hover-border-color: #e04a24;
  --bs-btn-focus-shadow-rgb: 215, 14, 26;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #e04a24;
  --bs-btn-active-border-color: #e04a24;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #fe5c35;
  --bs-btn-disabled-border-color: #fe5c35;
}

.hero .company-badge {
  background: rgba(254,92,53, 0.1);
  color: #fe5c35;
}

.hero .accent-text {
  color: #fe5c35;
}

.feature-list li i {
  color: #fe5c35;
}

.feature-box.orange { background: rgba(254,92,53, 0.1); }
.feature-box.orange i { color: #fe5c35; }
.feature-box.blue { background: rgba(43,24,25, 0.08); }
.feature-box.blue i { color: #2b1819; }

.feature-icon {
  color: #fe5c35;
  background: rgba(254,92,53, 0.1);
}

.call-to-action {
  --background-color: #fe5c35;
}

.stats-item span {
  color: #fe5c35;
}

.service-card .icon {
  background: rgba(254,92,53, 0.1);
  color: #fe5c35;
}

.service-card .read-more {
  color: #fe5c35;
}

.testimonial-item h3 {
  color: #fe5c35;
}

.section-title h2::after {
  background: #fe5c35;
}

.faq-item h3 {
  color: #2b1819;
}

.faq-item.faq-active h3 {
  color: #fe5c35;
}

.faq-toggle {
  color: #fe5c35;
}

/* Pricing popular badge */
.pricing-card.popular {
  background: #2b1819;
}

/* Footer */
.footer {
  background-color: #2b1819;
}

.footer .footer-top .footer-links ul a:hover {
  color: #fe5c35;
}

.footer .social-links a:hover {
  background: #fe5c35;
}

/* Scroll top */
.scroll-top {
  background-color: #fe5c35;
}

.scroll-top:hover {
  background-color: #e04a24;
}

/* Nav active */
.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus {
  color: #fe5c35;
}

/* experience badge */
.experience-badge {
  background: #fe5c35;
}

/* ---------------------------------------------------------------------------
   Lighthouse remediation
   --------------------------------------------------------------------------- */

/* The full Bootstrap Icons face is 128 KB for the ~100 glyphs this site uses.
   `bootstrap-icons-subset` carries exactly those glyphs (9 KB); the full face
   stays listed after it so any icon added later still renders — the browser
   only downloads the big file if a glyph is genuinely missing from the subset. */
@font-face {
  font-display: swap;
  font-family: "bootstrap-icons-subset";
  src: url("../vendor/bootstrap-icons/fonts/bootstrap-icons-subset.woff2") format("woff2");
}

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  font-family: "bootstrap-icons-subset", "bootstrap-icons" !important;
}

/* AOS initialises on window load, and aos.css holds every [data-aos] element at
   opacity 0 until then — which was costing the hero (the LCP element) ~3.8s of
   render delay. Above-the-fold content is exempted so it paints immediately;
   everything below the fold still animates in as before. */
.hero [data-aos],
.page-title [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* White on #fe5c35 is 3.6:1 and #fe5c35 text on the tinted badge is 3.1:1 — both
   below the 4.5:1 AA threshold at these text sizes. Solid accent fills move to
   #e04a24 (5.0:1 against white); accent-coloured *text* needs #b02703, because
   #e04a24 only reaches 4.35:1 against the badge's tinted background. The accent
   stays #fe5c35 everywhere it carries no small text — headings, icons, rules. */
.header .btn-getstarted,
.header .btn-getstarted:focus {
  background: #e04a24;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  background: #b02703;
}

/* Stat headline and service-tab labels are not section headings — they were
   <h4> elements following an <h1>, which broke the document's heading order.
   They are plain elements now, styled to match what they replaced. */
.hero .stat-item .stat-content .stat-title {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--heading-color);
}

.features .nav-link .tab-title {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.features .nav-link:hover .tab-title {
  color: var(--accent-color);
}

.features .nav-link.active .tab-title {
  color: var(--contrast-color);
}

.btn-primary {
  --bs-btn-bg: #e04a24;
  --bs-btn-border-color: #e04a24;
  --bs-btn-hover-bg: #b02703;
  --bs-btn-hover-border-color: #b02703;
  --bs-btn-active-bg: #b02703;
  --bs-btn-active-border-color: #b02703;
  --bs-btn-disabled-bg: #e04a24;
  --bs-btn-disabled-border-color: #e04a24;
}

.hero .company-badge {
  color: #b02703;
}

/* main.css sets the hero button's fill directly rather than through Bootstrap's
   custom properties, so it needs its own rule to pick up the darker fill. */
.hero .btn-primary {
  background-color: #e04a24;
  border-color: #e04a24;
}

.hero .btn-primary:hover {
  background-color: #b02703;
  border-color: #b02703;
}