/* Header visuals: nav pill active, theme dropdown, backdrop */

header {
  box-shadow: 0 6px 28px rgba(9, 30, 24, 0.03);
  border-bottom-color: rgba(241, 245, 249, 0.8);
  max-width: 100vw;
}

:is(.dark) header {
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.2);
}

/* Contain header content */
header>div {
  max-width: 100%;
}

/* Logo refinement */
header img {
  height: 40px;
  transition: transform 0.2s ease;
}

header img:hover {
  transform: scale(1.02);
}

/* Nav container */
.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 1;
  min-width: 0;
}

/* Custom HSS Language Switcher */
.hss-lang-switcher {
  position: relative;
  flex-shrink: 0;
}

.hss-lang-menu {
  animation: slideDown 0.15s ease-out;
}

.hss-lang-toggle:focus {
  outline: 2px solid rgba(16, 185, 129, 0.4);
  outline-offset: 2px;
}

/* Nav items - each menu link */
.site-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  transition: all 0.2s ease;
  color: #4b5563;
  font-weight: 500;
  font-size: 0.8875rem;
  white-space: nowrap;
}

:is(.dark) .site-nav a {
  color: #cbd5e1;
}

.site-nav a:hover {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
  transform: translateY(-2px);
}

:is(.dark) .site-nav a:hover {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

/* Active menu item (e.g., Home) */
.site-nav .current-menu-item>a {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.08));
  color: #059669;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

:is(.dark) .site-nav .current-menu-item>a {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.15));
  color: #10b981;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.site-nav .current-menu-item>a:hover {
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.12);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.1));
}

:is(.dark) .site-nav .current-menu-item>a:hover {
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.3);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.2));
}

/* Focus state */
.site-nav a:focus {
  outline: 3px solid rgba(16, 185, 129, 0.12);
  outline-offset: 2px;
}

:is(.dark) .site-nav a:focus {
  outline: 3px solid rgba(16, 185, 129, 0.3);
}

/* Theme dropdown & toggle */
#theme-toggler {
  color: #9ca3af;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.2s ease;
}

:is(.dark) #theme-toggler {
  color: #64748b;
}

#theme-toggler:hover {
  color: #6b7280;
  background: rgba(31, 41, 55, 0.05);
  transform: rotate(20deg);
}

:is(.dark) #theme-toggler:hover {
  color: #cbd5e1;
  background: rgba(51, 65, 85, 0.3);
}

#theme-toggler:focus {
  outline: 3px solid rgba(16, 185, 129, 0.12);
  outline-offset: 2px;
}

:is(.dark) #theme-toggler:focus {
  outline: 3px solid rgba(16, 185, 129, 0.3);
}

/* Theme menu dropdown */
#theme-menu {
  min-width: 13rem;
  border-radius: 12px;
  border: 1px solid rgba(241, 245, 249, 0.8);
  background: #fff;
  box-shadow: 0 18px 48px rgba(12, 78, 46, 0.1);
  animation: slideDown 0.2s ease;
}

:is(.dark) #theme-menu {
  background: #1e293b;
  border: 1px solid rgba(148, 163, 184, 0.1);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#theme-menu button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.7rem 1rem;
  width: 100%;
  text-align: left;
  transition: all 0.15s ease;
  color: #4b5563;
  font-weight: 500;
}

:is(.dark) #theme-menu button {
  color: #cbd5e1;
}

#theme-menu button:hover {
  background: rgba(16, 185, 129, 0.06);
  color: #059669;
  padding-left: 1.2rem;
}

:is(.dark) #theme-menu button:hover {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

#theme-menu .active {
  font-weight: 700;
  color: #059669;
  background: rgba(16, 185, 129, 0.08);
}

:is(.dark) #theme-menu .active {
  color: #10b981;
  background: rgba(16, 185, 129, 0.2);
}

/* Mobile menu */
#mobile-menu {
  border-top: 1px solid rgba(15, 23, 42, 0.04);
  background: rgba(255, 255, 255, 0.98);
}

:is(.dark) #mobile-menu {
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(15, 23, 42, 0.95);
}

#mobile-menu .current-menu-item>a {
  color: #059669;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.06);
  border-radius: 8px;
}

:is(.dark) #mobile-menu .current-menu-item>a {
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
}

/* NOTE: Contact button styling removed since Contact is now in nav menu
   and should not have special button-like styling */

/* Responsive adjustments */
@media (max-width: 1024px) {
  .site-nav a {
    padding: 0.55rem 0.9rem;
    font-size: 0.825rem;
  }
}

/* Add extra spacing between logo block and nav on desktop to avoid crowding */
@media (min-width: 768px) {
  .site-nav {
    margin-left: 1.25rem;
  }

  header .flex-shrink-0 {
    margin-right: 0.25rem;
  }
}

@media (max-width: 768px) {
  .site-nav a {
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
  }
}

/* Hero / feature-card dark-mode overrides
   Some components were still appearing light due to cascading styles.
   Force fully dark backgrounds and readable text for the hero area. */
:is(.dark) .home-hero {
  /* Forcefully remove any light gradient/background-image set in later CSS
     and apply a solid dark background when `.dark` is present. */
  background: #020617 !important;
  background-image: none !important;
}

:is(.dark) .home-hero .features-card {
  background-color: #0b1720 !important;
  border-color: rgba(255, 255, 255, 0.03) !important;
}

:is(.dark) .home-hero .feature-tile {
  background-color: #0f1724 !important;
  color: #e6eef8 !important;
}

:is(.dark) .home-hero .feature-tile h3,
:is(.dark) .home-hero .feature-tile p {
  color: #e6eef8 !important;
}

:is(.dark) .home-hero .features-card .feature-tile.feature-tile--highlight {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  color: #fff !important;
}

/* Language switcher flag styling */
.language-switcher .lang-flag,
.language-switcher img {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
}

.language-switcher a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Polylang dropdown adjustments */
.language-switcher .pll_dropdown select {
  border-radius: 8px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

:is(.dark) .language-switcher .pll_dropdown select {
  border: 1px solid rgba(148, 163, 184, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

/* Compact Polylang switcher: prevent header stretching on desktop */
.language-switcher {
  display: inline-flex;
  align-items: center;
  max-width: 4.5rem;
  overflow: hidden;
  white-space: nowrap;
}

.language-switcher img.lang-flag {
  width: 20px;
  height: 14px;
}

/* Hide textual language names on large screens but keep accessible for screen readers */
@media (min-width: 1024px) {

  .language-switcher .pll_dropdown .pll_selected,
  .language-switcher .pll_dropdown .pll_current_language,
  .language-switcher a span {
    font-size: 0 !important;
    line-height: 0 !important;
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* Keep labels visible on smaller screens where space stacks */
@media (max-width: 1023px) {
  .language-switcher {
    max-width: none;
  }

  .language-switcher a span {
    font-size: 0.95rem;
    line-height: 1;
  }
}

/* Ensure nav items don't wrap and truncate long labels */
.site-nav {
  flex-wrap: nowrap;
}

.site-nav a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Polylang dropdown & menu styling for light and dark themes */
.language-switcher .pll_dropdown,
.language-switcher .pll_dropdown select,
.language-switcher .pll_dropdown .pll_current_language {
  color: #0f1724;
  background: transparent;
  border-radius: 8px;
}

:is(.dark) .language-switcher .pll_dropdown,
:is(.dark) .language-switcher .pll_dropdown select,
:is(.dark) .language-switcher .pll_dropdown .pll_current_language {
  color: #e6eef8;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(148, 163, 184, 0.06);
}

.language-switcher .pll_dropdown select {
  padding: 6px 8px;
  min-width: 3.2rem;
}

.language-switcher .pll_dropdown ul {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(9, 30, 24, 0.06);
}

:is(.dark) .language-switcher .pll_dropdown ul {
  background: #0f1724;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* Stronger dark-mode overrides for Polylang dropdown elements to ensure
   the select and custom dropdown list follow the theme even on browsers
   or configurations that add extra wrappers. Using higher specificity
   and !important to avoid other CSS from overriding these colors. */
:is(.dark) .language-switcher .pll_dropdown,
:is(.dark) .language-switcher .pll_dropdown select,
:is(.dark) .language-switcher .pll_dropdown .pll_current_language,
:is(.dark) .language-switcher .pll_dropdown ul,
:is(.dark) .language-switcher .pll_dropdown ul li a,
:is(.dark) .language-switcher .pll_dropdown .pll_selected {
  background-color: #0f1724 !important;
  color: #e6eef8 !important;
  border-color: rgba(148, 163, 184, 0.06) !important;
}

/* Ensure native select options on dark mode have readable text where possible */
:is(.dark) .language-switcher .pll_dropdown select option {
  background: #0f1724 !important;
  color: #e6eef8 !important;
}

.language-switcher .pll_dropdown ul li a {
  color: #0f1724;
  padding: 8px 12px;
}

:is(.dark) .language-switcher .pll_dropdown ul li a {
  color: #e6eef8;
}

/* Polylang list output (.pll_languages_list) styling for inline list variant */
.pll_languages_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
}

.pll_languages_list li {
  display: inline-flex;
}

.pll_languages_list li a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 8px;
  border-radius: 8px;
  color: #0f1724;
  background: transparent;
  transition: background 0.12s, color 0.12s;
}

.pll_languages_list li a img {
  width: 20px;
  height: 14px;
}

.pll_languages_list li a:hover {
  background: rgba(16, 185, 129, 0.06);
  color: #064e3b;
}

:is(.dark) .pll_languages_list li a {
  color: #e6eef8;
}

:is(.dark) .pll_languages_list li a:hover {
  background: rgba(16, 185, 129, 0.14);
  color: #a7f3d0;
}

/* Custom dropdown container styling: make Polylang list render as a stacked dropdown */
.language-switcher #lang-menu .pll_languages_list {
  display: block;
  flex-direction: column;
  gap: 0;
}

.language-switcher #lang-menu .pll_languages_list li {
  display: block;
}

.language-switcher #lang-menu .pll_languages_list li a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 8px 12px;
  color: #0f1724;
  background: transparent;
  border-radius: 6px;
}

:is(.dark) .language-switcher #lang-menu .pll_languages_list li a {
  color: #e6eef8;
}

.language-switcher #lang-menu .pll_languages_list li a img {
  width: 18px;
  height: 12px;
  display: inline-block;
}

.language-switcher #lang-menu .pll_languages_list li a:hover {
  background: rgba(15, 23, 42, 0.06);
}

/* Ensure language names are visible inside the dropdown menu on large screens.
   There is a rule that hides textual names for the compact inline switcher;
   this overrides that rule only for items inside #lang-menu. */
.language-switcher #lang-menu .pll_languages_list li a span {
  font-size: 0.95rem !important;
  line-height: 1 !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  color: inherit !important;
}

.language-switcher #lang-menu .pll_languages_list {
  padding: 0 6px;
}

/* Strong override: ensure any hidden/zero-sized language name from global rules
   becomes visible inside our dropdown. Targets Polylang classes often used. */
.language-switcher #lang-menu .pll_languages_list,
.language-switcher #lang-menu .pll_languages_list li,
.language-switcher #lang-menu .pll_languages_list li a,
.language-switcher #lang-menu .pll_languages_list li a *,
.language-switcher #lang-menu .pll_current_language,
.language-switcher #lang-menu .pll_current_language a {
  font-size: 0.95rem !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  white-space: normal !important;
}

.language-switcher #lang-menu .pll_languages_list li a {
  padding: 8px 10px !important;
}

/* Styling for rebuilt language list items to ensure clarity and clickability */
.language-switcher .pll_languages_list.rebuilt {
  padding: 0;
}

.language-switcher .pll_languages_list.rebuilt .lang-item {
  margin: 2px 0;
}

.language-switcher .pll_languages_list.rebuilt .lang-item a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.language-switcher .pll_languages_list.rebuilt .lang-item a img {
  width: 18px;
  height: 12px;
}

.language-switcher .pll_languages_list.rebuilt .lang-item a:hover {
  background: rgba(16, 185, 129, 0.06);
  color: #064e3b;
}

:is(.dark) .language-switcher .pll_languages_list.rebuilt .lang-item a:hover {
  background: rgba(16, 185, 129, 0.14);
  color: #a7f3d0;
}

/* Strong visibility overrides for lang names inside the dropdown. This forces
   any hidden/zero-sized spans to render normally and ensures readable color. */
#lang-menu.pll_override,
.language-switcher #lang-menu {
  z-index: 10000 !important;
}

.language-switcher #lang-menu .pll_languages_list.rebuilt li a .lang-name,
.language-switcher #lang-menu .pll_languages_list.rebuilt li a span {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  white-space: normal !important;
}

.language-switcher #lang-menu .pll_languages_list.rebuilt li a {
  color: inherit !important;
}



/* Current language indicator */
.pll_languages_list .pll_current_language a {
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.08);
}

:is(.dark) .pll_languages_list .pll_current_language a {
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.18);
}