/* Brand color override — #df0a0b (no orange hovers) */
:root {
  --brand: #df0a0b;
  --brand-light: #df0a0b;
  --brand-dark: #b00809;
}

/* Solid brand backgrounds (skip opacity helpers) */
.bg-\[\#df0a0b\]:not([class*="bg-opacity"]),
.\!bg-\[\#df0a0b\] {
  background-color: #df0a0b !important;
}

.hover\:bg-\[\#df0a0b\]:hover,
.hover\:bg-\[\#b00809\]:hover {
  background-color: #b00809 !important;
}

/* Brand text + hover — force theme red (kill orange) */
.text-\[\#df0a0b\],
.text-\[\#f03a3b\],
.text-\[\#eb891b\] {
  color: #df0a0b !important;
}

.hover\:text-\[\#df0a0b\]:hover,
.hover\:text-\[\#f03a3b\]:hover,
.hover\:text-\[\#eb891b\]:hover,
.group:hover .group-hover\:text-\[\#df0a0b\],
.group:hover .group-hover\:text-\[\#f03a3b\] {
  color: #df0a0b !important;
}

/* Nav pills hover border */
.hover\:border-\[\#df0a0b\]:hover,
.hover\:border-\[\#df0a0b\]\/35:hover,
.hover\:border-\[\#ffcccc\]:hover,
.hover\:border-\[\#f03a3b\]:hover {
  border-color: rgba(223, 10, 11, 0.45) !important;
}

/* On solid brand red backgrounds, force readable white text */
.bg-\[\#df0a0b\].text-white,
.bg-\[\#df0a0b\] .text-white,
a.bg-\[\#df0a0b\],
button.bg-\[\#df0a0b\],
span.bg-\[\#df0a0b\] {
  color: #fff !important;
}

/* Allow hover invert: white bg + red text */
.hover\:bg-white:hover.hover\:text-\[\#df0a0b\]:hover,
a.hover\:bg-white:hover.hover\:text-\[\#df0a0b\]:hover {
  color: #df0a0b !important;
  background-color: #fff !important;
}

.border-\[\#df0a0b\],
.border-\[\#f03a3b\] {
  border-color: #df0a0b;
}

.hover\:border-\[\#df0a0b\]:hover {
  border-color: #df0a0b;
}

.from-\[\#df0a0b\] {
  --tw-gradient-from: #df0a0b var(--tw-gradient-from-position);
}

.to-\[\#df0a0b\],
.to-\[\#b00809\] {
  --tw-gradient-to: #df0a0b var(--tw-gradient-to-position);
}

/* Ensure Lucide SVGs are visible after replacement */
i[data-lucide] {
  display: inline-flex;
  width: 1.25em;
  height: 1.25em;
}
svg.lucide {
  display: inline-block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
}

/* Navbar logo — balanced, slightly larger */
.navbar-logo,
#navbar img[alt*="Skynex"] {
  height: 3rem !important; /* 48px mobile */
  width: auto !important;
  max-height: none !important;
  object-fit: contain;
}
@media (min-width: 640px) {
  .navbar-logo,
  #navbar img[alt*="Skynex"] {
    height: 3.5rem !important; /* 56px */
  }
}
@media (min-width: 768px) {
  .navbar-logo,
  #navbar img[alt*="Skynex"] {
    height: 4.25rem !important; /* 68px laptop */
  }
}
@media (min-width: 1024px) {
  .navbar-logo,
  #navbar img[alt*="Skynex"] {
    height: 4.75rem !important; /* 76px desktop */
  }
}
#navbar-inner {
  min-height: 3.75rem;
}
@media (min-width: 768px) {
  #navbar-inner {
    min-height: 5rem;
  }
}

/* Keep hero clear of fixed navbar (mobile + laptop + desktop) */
#hero {
  padding-top: 9.5rem !important; /* ~152px mobile — below floating nav */
}
@media (min-width: 768px) {
  #hero {
    padding-top: 10.5rem !important; /* ~168px laptop */
  }
}
@media (min-width: 1024px) {
  #hero {
    padding-top: 11.5rem !important; /* ~184px desktop — tall logo + nav */
  }
}

/* Don't vertically center hero columns — that pulled the headline under the nav */
#hero .grid.lg\:grid-cols-2 {
  align-items: start;
}

/* Other pages: first content after nav shouldn't tuck under header */
main#smooth-wrapper {
  padding-top: 0;
}
body {
  scroll-padding-top: 7rem;
}