/* X-Treme Civils theme */
:root {
  --xt-primary: #002060;
  --xt-secondary: #bf9000;
  --xt-bg-soft: #f5f7fb;
}

body {
  background: #fff;
}

.bg-xt-primary { background-color: var(--xt-primary) !important; }
.bg-xt-secondary { background-color: var(--xt-secondary) !important; }
.text-xt-primary { color: var(--xt-primary) !important; }
.text-xt-secondary { color: var(--xt-secondary) !important; }

.btn-primary {
  --bs-btn-bg: var(--xt-primary);
  --bs-btn-border-color: var(--xt-primary);
  --bs-btn-hover-bg: #00194d;
  --bs-btn-hover-border-color: #00194d;
}

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

.btn-secondary {
  --bs-btn-bg: var(--xt-secondary);
  --bs-btn-border-color: var(--xt-secondary);
  --bs-btn-hover-bg: #a87c00;
  --bs-btn-hover-border-color: #a87c00;
}

.topbar-xt .topbar-link,
.topbar-xt .topbar-social {
  color: var(--xt-primary);
  text-decoration: none;
}
.topbar-xt .topbar-link:hover,
.topbar-xt .topbar-link:focus,
.topbar-xt .topbar-social:hover,
.topbar-xt .topbar-social:focus {
  color: var(--xt-secondary);
}
.topbar-xt .topbar-location {
  max-width: 520px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-xt .topbar-social {
  width: 32px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  line-height: 1;
}
.topbar-xt .topbar-social i { line-height: 1; display: block; }
.topbar-xt .topbar-social:hover,
.topbar-xt .topbar-social:focus {
  background: rgba(0, 32, 96, .06);
}

@media (max-width: 575.98px) {
  .topbar-xt .topbar-left,
  .topbar-xt .topbar-right {
    width: 100%;
    justify-content: center;
  }
  .topbar-xt .topbar-left {
    gap: .65rem !important;
    text-align: center;
  }
  .topbar-xt .topbar-location {
    max-width: 100%;
  }
}

/* Hide only the topbar on scroll (navbar stays) */
.site-header {
  z-index: 1030; /* bootstrap sticky-top */
  overflow-anchor: none; /* prevent scroll anchoring jitter */
}
.site-header .topbar-xt {
  overflow: hidden;
  max-height: 120px;
  opacity: 1;
  padding-block: .35rem;
  overflow-anchor: none; /* prevent scroll anchoring jitter */
  will-change: max-height, opacity, padding;
  transition:
    max-height .28s cubic-bezier(.22, 1, .36, 1),
    opacity .22s ease,
    padding .28s cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 575.98px) {
  .site-header .topbar-xt {
    transition:
      max-height .20s cubic-bezier(.22, 1, .36, 1),
      opacity .15s ease,
      padding .20s cubic-bezier(.22, 1, .36, 1);
  }
}
.site-header.is-topbar-hidden .topbar-xt {
  max-height: 0;
  opacity: 0;
  padding-block: 0;
  border-bottom-width: 0 !important;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-header .topbar-xt {
    transition: none;
  }
}

/* White header (navbar) */
.navbar-xt .navbar-brand,
.navbar-xt .nav-link {
  color: var(--xt-primary) !important;
}
.navbar-xt .brand-name {
  color: var(--xt-primary);
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 1.02rem;
  line-height: 1.1;
}
@media (max-width: 575.98px) {
  .navbar-xt .brand-name {
    font-size: .98rem;
  }
}
.navbar-xt .nav-link:hover,
.navbar-xt .nav-link:focus {
  color: var(--xt-secondary) !important;
}
.navbar-xt .nav-link.active {
  color: var(--xt-secondary) !important;
  font-weight: 600;
}
.navbar-xt .navbar-toggler {
  border: 0;
  padding: .25rem .25rem;
}
.navbar-xt .navbar-toggler:hover { background: transparent; }
.navbar-xt .navbar-toggler:focus-visible { background: transparent; }
.navbar-xt .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(191, 144, 0, 0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-xt .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(191, 144, 0, .20);
}

/* FAQ / accordion styling */
.accordion {
  --bs-accordion-btn-color: var(--xt-primary);
  --bs-accordion-active-color: var(--xt-primary);
  --bs-accordion-active-bg: rgba(191, 144, 0, .10);
  --bs-accordion-btn-focus-border-color: rgba(191, 144, 0, .55);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(191, 144, 0, .18);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3e%3cpath stroke='rgba(0, 32, 96, 0.9)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3e%3cpath stroke='rgba(191, 144, 0, 0.95)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 11l6-6 6 6'/%3e%3c/svg%3e\");
}
.accordion .accordion-button:hover {
  color: var(--xt-secondary);
}
.accordion .accordion-button:not(.collapsed) {
  border-bottom-color: rgba(191, 144, 0, .25);
}

/* Homepage hero slider: hide arrows, gold indicator */
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next {
  display: none !important;
}
.hero-slider .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-inline: 6px;
  background-color: rgba(255, 255, 255, .55);
  opacity: 1;
}
.hero-slider .carousel-indicators .active {
  background-color: var(--xt-secondary);
}

/* Fixed/pinned About image (desktop/tablet) */
.about-pin {
  position: relative;
  height: 100%;
  display: flex;
}
.about-pin-inner {
  width: 100%;
}
.about-pin-inner.is-fixed {
  position: fixed;
  top: calc(var(--xt-header-offset, 140px) + 12px);
  z-index: 2;
}
.about-pin-inner.is-bottom {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
}
@media (max-width: 991.98px) {
  .about-pin-inner.is-fixed,
  .about-pin-inner.is-bottom {
    position: static;
  }
}

.hero {
  background: linear-gradient(120deg, rgba(0,32,96,0.95), rgba(0,32,96,0.70)),
              radial-gradient(800px circle at 20% 20%, rgba(191,144,0,0.25), transparent 60%);
  color: #fff;
}
.hero.hero-sm {
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
}

/* Other pages hero background image */
.page-hero {
  background:
    linear-gradient(120deg, rgba(0,32,96,0.90), rgba(0,32,96,0.65)),
    url("../imgs/hero.jpg");
  background-size: cover;
  background-position: center;
}

/* Homepage hero slider */
.hero-slider {
  padding: 0;
}
.hero-slide {
  position: relative;
  min-height: 560px;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(0,32,96,0.92), rgba(0,32,96,0.60)),
    radial-gradient(800px circle at 20% 20%, rgba(191,144,0,0.22), transparent 60%);
}
.hero-slide > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 991.98px) {
  .hero-slide {
    min-height: 520px;
  }
}

/* Admin login split layout */
.auth-hero {
  position: relative;
  min-height: 100vh;
  background:
    linear-gradient(120deg, rgba(0,32,96,0.86), rgba(0,32,96,0.55)),
    url("../imgs/hero.jpg");
  background-size: cover;
  background-position: center;
  color: #fff;
}
.auth-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px circle at 20% 20%, rgba(191,144,0,0.20), transparent 60%);
  pointer-events: none;
}
.auth-hero .auth-hero-inner {
  position: relative;
  z-index: 1;
}

.section-soft {
  background: var(--xt-bg-soft);
}

.card-hover {
  transition: transform .15s ease, box-shadow .15s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,.08);
}

/* Public cards */
.card-corporate .card-title {
  letter-spacing: .1px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.card-corporate img.card-img-top {
  filter: saturate(1.02);
}
.card-corporate .stretched-link::after {
  border-radius: var(--bs-card-border-radius);
}
.card-corporate:hover .card-title {
  color: var(--xt-secondary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* CTA button hover (Read more / View details) */
.btn-action {
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-action:hover,
.btn-action:focus {
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.10);
}
.btn-action.btn-outline-primary:hover,
.btn-action.btn-outline-primary:focus {
  background: rgba(191, 144, 0, 0.12);
  border-color: var(--xt-secondary);
  color: var(--xt-secondary);
}

.admin-sidebar {
  min-height: 100vh;
  background: var(--xt-primary);
}
.admin-sidebar .nav-link {
  color: rgba(255,255,255,.85);
}
.admin-sidebar .nav-link.active,
.admin-sidebar .nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.10);
}

.admin-offcanvas {
  background: var(--xt-primary);
  color: #fff;
}
.admin-offcanvas .nav-link {
  color: rgba(255,255,255,.85);
}
.admin-offcanvas .nav-link.active,
.admin-offcanvas .nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.10);
}

/* Footer: force white text, gold hover */
.footer-xt {
  --bs-link-color: #ffffff;
  --bs-link-hover-color: var(--xt-secondary);
}
.footer-xt,
.footer-xt .text-muted,
.footer-xt .text-white-50,
.footer-xt .text-white-75 {
  color: #fff !important;
}
footer.footer-xt a,
.footer-xt a:link,
.footer-xt a:visited {
  color: #fff !important;
}
footer.footer-xt a:hover,
footer.footer-xt a:focus {
  color: var(--xt-secondary) !important;
}

.footer-xt .footer-logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .65rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.12);
}
.footer-xt .footer-brand-name {
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Badges */
.badge-xt-secondary {
  background: rgba(191, 144, 0, .18);
  color: var(--xt-secondary);
  border: 1px solid rgba(191, 144, 0, .35);
  font-weight: 600;
}

.footer-xt .footer-accent {
  height: 4px;
  width: 100%;
  background: var(--xt-secondary);
}

.site-header .header-accent {
  height: 4px;
  width: 100%;
  background: var(--xt-secondary);
}