/* ==========================================================================
   Compile — site preferences (dark mode + language toggle)
   ========================================================================== */

/* ---- Toggle buttons in header ---- */
.site-prefs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: 18px;
  border: 1px solid #e7e7e8;
  background: transparent;
  color: var(--heading-color);
  font-family: Afacad, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all .3s ease;
  margin-right: 16px;
}

.site-prefs-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

/* Theme icons are inline SVGs (currentColor) rather than the icon font --
   this template's remixicon.css is a trimmed subset that doesn't include a
   moon/sun glyph, which is why a font-icon version of this button rendered
   empty. */
.site-prefs-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.site-prefs-btn .theme-icon-light { display: none; }

:root[data-theme="dark"] .site-prefs-btn .theme-icon-dark { display: none; }
:root[data-theme="dark"] .site-prefs-btn .theme-icon-light { display: block; }

:root[data-theme="dark"] .site-prefs-btn {
  border-color: rgba(255, 255, 255, 0.18);
}

/* ---- Language toggle (ES / EN segmented control) ---- */
.lang-toggle-group {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e7e7e8;
  border-radius: 18px;
  padding: 3px;
  margin-right: 16px;
  gap: 2px;
}

:root[data-theme="dark"] .lang-toggle-group {
  border-color: rgba(255, 255, 255, 0.18);
}

.lang-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--body-color);
  font-family: Afacad, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: all .3s ease;
}

.lang-opt .lang-opt-flag {
  font-size: 15px;
  line-height: 1;
}

.lang-opt:hover {
  opacity: 0.85;
}

.lang-opt.is-active {
  background: var(--accent-color);
  color: var(--white-color);
  opacity: 1;
}

.lang-opt.is-active:hover {
  opacity: 1;
}

/* ---- Brand logo ---- */
.brand-logo-link {
  display: inline-flex;
  align-items: center;
}

.brand-logo-img {
  height: 60px;
  width: auto;
  display: block;
}

.dark-version-logo { display: none; }
:root[data-theme="dark"] .light-version-logo { display: none !important; }
:root[data-theme="dark"] .dark-version-logo { display: inline-block !important; }

/* ==========================================================================
   Dark theme palette
   Scoped to [data-theme="dark"] on <html>. The site already relies on
   CSS custom properties (--heading-color, --body-color, --white-bg,
   --light-bg1) for nearly every light surface, so re-defining them here
   cascades through the bulk of the page automatically. Sections that are
   intentionally dark in both themes (hero, breadcrumb, footer) use
   --dark-bg / --white-color, which are left untouched.
   ========================================================================== */

:root[data-theme="dark"] {
  --heading-color: #F5F6FA;
  --body-color: #C9CBD9;
  --white-bg: #0D0E1D;
  --light-bg1: #15162B;
}

/* Elements with colors hardcoded outside the variable system */

:root[data-theme="dark"] body {
  background-color: #0D0E1D;
}

/* Bootstrap ships its own `.bg-white` utility with `!important`, which beats
   the theme's non-important `.bg-white{background-color:var(--white-bg)}`
   rule regardless of load order. That's invisible in light mode (both
   resolve to white) but means the site's many `.bg-white` sections (header,
   cards, etc.) never actually follow --white-bg — force it here so they
   flip to the dark surface color. */
:root[data-theme="dark"] .bg-white {
  background-color: #0D0E1D !important;
}

:root[data-theme="dark"] .site-menu-main .sub-menu {
  background-color: #15162B !important;
}

:root[data-theme="dark"] .site-menu-main .sub-menu--item > a,
:root[data-theme="dark"] .site-menu-main > li .sub-menu > ul > li > a {
  color: #E5E6F0 !important;
}

/* The mobile off-canvas menu panel only exists as its own block below the
   nav breakpoint — scope its dark styling the same way the original
   light-mode rule is scoped, so it doesn't bleed into the desktop nav bar. */
@media (max-width: 991px) {
  :root[data-theme="dark"] .site-header .menu-block,
  :root[data-theme="dark"] .site-header .menu-block .mobile-menu-head {
    background-color: #15162B !important;
  }

  :root[data-theme="dark"] .site-header .menu-block .mobile-menu-head .go-back,
  :root[data-theme="dark"] .site-header .menu-block .mobile-menu-head .current-menu-title,
  :root[data-theme="dark"] .site-header .menu-block .mobile-menu-head .mobile-menu-close {
    color: #F5F6FA !important;
  }

  :root[data-theme="dark"] .site-header .menu-block .mobile-menu-head,
  :root[data-theme="dark"] .site-menu-main > li > a {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  }
}

:root[data-theme="dark"] .mobile-menu-trigger span,
:root[data-theme="dark"] .mobile-menu-trigger span:before,
:root[data-theme="dark"] .mobile-menu-trigger span:after {
  background-color: #F5F6FA !important;
}

:root[data-theme="dark"] input[type=text],
:root[data-theme="dark"] input[type=email],
:root[data-theme="dark"] input[type=tel],
:root[data-theme="dark"] input[type=date],
:root[data-theme="dark"] textarea {
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: rgba(197, 199, 217, 0.55) !important;
}

:root[data-theme="dark"] .top-contact-block a {
  color: #E5E6F0;
}

:root[data-theme="dark"] .border-all {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

:root[data-theme="dark"] hr {
  border-top-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .tekup-iconbox-wrap3:hover {
  box-shadow: 0 16px 50px 0 rgba(0, 0, 0, 0.35);
}

/* ---- Breadcrumb offset: match the fixed header's real height ----
   app.min.css hardcodes .tekup-breadcrumb's margin-top to clear the
   theme's default fixed header. Our header (logo + language/theme
   toggles) renders at different heights, so the hardcoded value left
   a visible white gap below the header on desktop (and would overlap
   it on narrow screens). Override per breakpoint to match. */
.tekup-breadcrumb {
  margin-top: 102px;
}

@media (max-width: 991px) {
  .tekup-breadcrumb {
    margin-top: 109px;
  }
}

@media (max-width: 520px) {
  .tekup-breadcrumb {
    margin-top: 145px;
  }
}