/*!
 * SB UI Pro Components — Bootstrap 5 Edition
 * Extracted & rewritten from SB UI Pro v1.0.1 (Bootstrap 4)
 * Bootstrap base code removed; contains only custom components.
 * Compatible with Bootstrap 5.3.x
 */

/* ══════════════════════════════════════════════════════════
   1. BOOTSTRAP 4 → 5 SHIMS (backward compatibility)
   ══════════════════════════════════════════════════════════ */

/* rounded-lg (BS4) → rounded-3 (BS5) */
.rounded-lg { border-radius: var(--bs-border-radius-lg, 0.5rem) !important; }

/* font-weight-* (BS4) */
.font-weight-bold   { font-weight: 700 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-light  { font-weight: 300 !important; }

/* text-left / text-right (BS4) */
.text-left  { text-align: left !important; }
.text-right { text-align: right !important; }

/* float-left / float-right (BS4) */
.float-left  { float: left !important; }
.float-right { float: right !important; }

/* no-gutters (BS4 row modifier) */
.no-gutters { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; }

/* text-white-50 */
.text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }

/* sr-only → visually-hidden (BS5) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   2. BACKGROUND IMAGE + OVERLAY
   ══════════════════════════════════════════════════════════ */

.bg-img-cover {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.overlay {
  position: relative;
}

.overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(7, 13, 25, 0.65) 0%,
    rgba(7, 13, 25, 0.55) 60%,
    rgba(7, 13, 25, 0.4) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.overlay > * { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════
   3. PAGE HEADER
   ══════════════════════════════════════════════════════════ */

.page-header {
  position: relative;
  padding-top: 8rem;
  padding-bottom: 5rem;
  overflow: hidden;
}

.page-header-dark {
  background-color: #0f172a;
  color: rgba(255, 255, 255, 0.75);
}

.page-header-content {
  position: relative;
  z-index: 2;
}

.page-header-title {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.page-header-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
}

/* Inner pages page-header-ui */
.page-header-ui {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 3rem;
  background-color: #0f172a;
}

.page-header-ui-dark { background-color: #070d19; }

.page-header-ui-content {
  position: relative;
  z-index: 1;
}

/* Blog/inner hero */
.page-header.bg-img-cover {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ══════════════════════════════════════════════════════════
   4. CONTENT SKEWED (3D perspective image)
   ══════════════════════════════════════════════════════════ */

.content-skewed {
  perspective: 1500px;
  transform-style: preserve-3d;
  overflow: hidden;
}

.content-skewed-right .content-skewed-item {
  transform: rotateY(-8deg) rotateX(4deg) skewY(1deg);
  transform-origin: top right;
  border-radius: 0.75rem;
  transition: transform 0.4s ease;
}

.content-skewed-right:hover .content-skewed-item {
  transform: rotateY(-4deg) rotateX(2deg) skewY(0.5deg);
}

.content-skewed-left .content-skewed-item {
  transform: rotateY(8deg) rotateX(4deg) skewY(-1deg);
  transform-origin: top left;
  border-radius: 0.75rem;
}

/* ══════════════════════════════════════════════════════════
   5. ICON STACK
   ══════════════════════════════════════════════════════════ */

.icon-stack {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1rem;
  flex-shrink: 0;
}

.icon-stack svg {
  width: 1em;
  height: 1em;
}

.icon-stack-xl {
  width: 5.5rem;
  height: 5.5rem;
  font-size: 2rem;
}

.icon-stack-xl svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* bg-teal for FAQ icon stacks */
.bg-teal {
  background-color: rgba(0, 186, 148, 0.15) !important;
}

/* ══════════════════════════════════════════════════════════
   6. BADGE VARIANTS
   ══════════════════════════════════════════════════════════ */

/* Base badge (BS5 uses .badge, same) */
.badge { font-size: 0.75em; }

/* badge-pill — alias for rounded-pill */
.badge.badge-pill,
.badge-pill { border-radius: 50rem !important; }

/* badge-marketing: larger, uppercase with spacing */
.badge-marketing {
  padding: 0.5em 1.25em;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 50rem;
}

/* badge-sm: compact */
.badge-sm { padding: 0.3em 0.85em; font-size: 0.65rem; }

/* Light badge (BS4: badge-light → custom) */
.badge-light {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
}

/* Transparent light (used on dark backgrounds) */
.badge-transparent-light {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Primary soft */
.badge-primary-soft {
  background-color: rgba(245, 158, 11, 0.12);
  color: #92400e;
}

/* ══════════════════════════════════════════════════════════
   7. BUTTON VARIANTS
   ══════════════════════════════════════════════════════════ */

/* btn-marketing: larger CTA button sizing */
.btn-marketing {
  padding: 1.1rem 2.2rem;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

/* btn-white (alias, styled fully in restyle.css) */
/* btn-teal (styled fully in restyle.css) */
/* btn-transparent-dark (styled in restyle.css) */

/* Bootstrap 5: .btn-close replaces BS4 .close */
/* Keep .close for modal close button */
button.close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  opacity: 0.5;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  color: inherit;
}
button.close:hover { opacity: 0.85; }

/* ══════════════════════════════════════════════════════════
   8. FORMS (Bootstrap 4 compat)
   ══════════════════════════════════════════════════════════ */

/* form-group: same as mb-3 in BS5 */
.form-group { margin-bottom: 1rem; }

/* form-control — ensure consistent styling with BS5 */
.form-control {
  display: block;
  width: 100%;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════
   9. NAVBAR MARKETING
   ══════════════════════════════════════════════════════════ */

/* Base structural styles for marketing navbar */
.navbar-marketing {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  padding: 0.75rem 1rem;
}

/* Animated navbar state class (managed by scripts.js) */
.navbar-scrolled { /* visual handled by restyle.css */ }

/* ══════════════════════════════════════════════════════════
   10. TEXT UTILITIES
   ══════════════════════════════════════════════════════════ */

.text-uppercase-expanded {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
}

.text-gray-400 { color: #94a3b8 !important; }
.text-gray-500 { color: #64748b !important; }
.text-gray-600 { color: #475569 !important; }

/* ══════════════════════════════════════════════════════════
   11. BORDER UTILITIES
   ══════════════════════════════════════════════════════════ */

/* border-top-lg: thick decorative top border */
.border-top-lg { border-top: 0.25rem solid currentColor !important; }

/* Colored top borders for contact cards */
.border-teal    { border-color: #00ba94 !important; }
/* border-secondary and border-primary use BS5 defaults */

/* ══════════════════════════════════════════════════════════
   12. NEGATIVE MARGIN UTILITIES
   (Bootstrap 5 includes some, but SB UI Pro uses custom scale)
   ══════════════════════════════════════════════════════════ */

/* Custom spacer scale used in SB UI Pro:
   n5  = -2.5rem  (spacer × 5 × 0.5)
   n10 = -5.5rem  (spacer × 10 × 0.55)
   n15 = -7.5rem  (spacer × 15 × 0.5)
*/

.mt-n5  { margin-top:    -2.5rem !important; }
.mb-n5  { margin-bottom: -2.5rem !important; }
.ms-n5  { margin-left:   -2.5rem !important; }
.me-n5  { margin-right:  -2.5rem !important; }

.mt-n10 { margin-top:    -5.5rem !important; }
.mb-n10 { margin-bottom: -5.5rem !important; }

.mt-n15 { margin-top:    -7.5rem !important; }
.mb-n15 { margin-bottom: -7.5rem !important; }

/* Responsive negative margins */
@media (min-width: 992px) {
  .mb-lg-n10  { margin-bottom: -5.5rem !important; }
  .mt-lg-n10  { margin-top:    -5.5rem !important; }
  .me-lg-n15  { margin-right:  -7.5rem !important; }
  .ms-lg-n15  { margin-left:   -7.5rem !important; }
}

@media (min-width: 768px) {
  .mb-md-n10 { margin-bottom: -5.5rem !important; }
}

/* ══════════════════════════════════════════════════════════
   13. CUSTOM SPACING (non-standard scale)
   ══════════════════════════════════════════════════════════ */

.pt-10  { padding-top:    5.5rem; }
.pb-10  { padding-bottom: 5.5rem; }
.py-10  { padding-top:    5.5rem; padding-bottom: 5.5rem; }
.mt-10  { margin-top:     5.5rem; }
.mb-10  { margin-bottom:  5.5rem; }
.my-10  { margin-top:     5.5rem; margin-bottom: 5.5rem; }
.mb-8   { margin-bottom:  4rem; }
.mt-8   { margin-top:     4rem; }

/* ══════════════════════════════════════════════════════════
   14. Z-INDEX UTILITIES
   ══════════════════════════════════════════════════════════ */

.z-n1 { z-index: -1 !important; position: relative; }
.z-1  { z-index:  1 !important; position: relative; }
.z-2  { z-index:  2 !important; position: relative; }

/* ══════════════════════════════════════════════════════════
   15. MISC UTILITIES
   ══════════════════════════════════════════════════════════ */

.o-visible { overflow: visible !important; }
.o-hidden  { overflow: hidden  !important; }

/* Lift animation */
.lift {
  box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lift:hover {
  transform: translateY(-0.3325rem);
  box-shadow: 0 0.5rem 2rem 0 rgba(33, 40, 50, 0.2);
}
.lift-sm {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lift-sm:hover { transform: translateY(-0.1625rem); }

/* ══════════════════════════════════════════════════════════
   16. DROPDOWN ANIMATIONS (SB UI Pro dropdowns)
   ══════════════════════════════════════════════════════════ */

.animated--fade-in-up {
  animation-name: fadeInUp;
  animation-duration: 0.2s;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.no-caret .dropdown-toggle::after { display: none; }

/* ══════════════════════════════════════════════════════════
   17. BREADCRUMB BASE
   ══════════════════════════════════════════════════════════ */

.breadcrumb {
  background-color: transparent;
  padding: 0.5rem 0;
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════
   18. CARD COMPAT
   ══════════════════════════════════════════════════════════ */

/* card-link stays as a block level anchor */
a.card-link { display: block; text-decoration: none; color: inherit; }
a.card-link:hover { text-decoration: none; color: inherit; }

/* Bootstrap 5 removes .card-deck, .card-columns */
/* card-body, card-footer etc are still in BS5 */

/* ══════════════════════════════════════════════════════════
   19. POST PREVIEW META (blog components)
   ══════════════════════════════════════════════════════════ */

.post-preview-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.post-preview-meta-img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.post-preview-meta-details {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.post-preview-meta-details-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #1e293b;
}

.post-preview-meta-details-date {
  font-size: 0.72rem;
  color: #64748b;
}

/* ══════════════════════════════════════════════════════════
   20. FEATHER ICONS ALIGNMENT FIX
   ══════════════════════════════════════════════════════════ */

[data-feather] {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  stroke-width: 2;
}

/* Navbar toggler icon */
.navbar-toggler [data-feather] {
  width: 1.25rem;
  height: 1.25rem;
}