/* Черный фон вне медиа-запроса для всех устройств */
body.overflow-x-hidden.bg-black {
  background-color: black !important;
}

/* Fix: make vertical footer nav links fit text width exactly */
footer nav.space-y-4 a {
  /* Ensure vertical stacking (column) — links are block-level in markup, keep it that way */
  display: block !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Disable the ::after based underline for this vertical list and use native text-decoration */
footer nav.space-y-4 a::after {
  display: none !important;
}

footer nav.space-y-4 a:hover {
  text-decoration: underline !important;
  text-decoration-color: #DAFFF1 !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 6px !important;
}


/* Ensure the burger icon inside the mobile menu wrapper stays square while wrapper can be rounded */
.mobile-menu img,
.mobile-menu > img {
  border-radius: 0 !important;
  display: block;
}

.mobile-menu {
  cursor: pointer;
}

/* Основные стили для растягивания фона на всю ширину экрана (только для десктопа) */
@media (min-width: 1200px) {
  
  /* Убираем ограничения ширины у всех секций и футера - БЕЗОПАСНЫЙ способ */
  section,
  footer {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    /* НЕ трогаем position, left, transform - это ломает элементы */
  }
  
  /* Центрируем контент внутри секций, НО НЕ ТРОГАЕМ позиционирование самих секций */
  section > div.max-w-\[1920px\],
  footer > div.max-w-\[1920px\] {
    max-width: 1920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  
  /* Специальная обработка для секции "Твоя роль в экологии" */
  section.w-full.bg-white.min-h-\[700px\].flex.flex-col.relative.overflow-visible {
    /* НЕ трогаем position: relative - это важно для абсолютных элементов внутри */
    background-color: white !important;
  }
  
  /* Обеспечиваем правильное отображение фоновых изображений */
  .bg-cover {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  
  /* Черные секции */
  section.bg-black,
  section.leaderboard-section {
    background-color: black !important;
  }
  
  /* Белые секции */
  section.bg-white {
    background-color: white !important;
  }

  #forestProjectsSection{
    background-color: white !important;
  }
  
  /* Общие стили для футеров */
  footer.relative.overflow-hidden {
    background-color: black !important;
  }
  #plantForestFooter{
    background-color: black !important;
  }
  
  /* Специально для Project.html - страница проектов */
  .bg-black.relative.overflow-hidden footer.relative.overflow-hidden {
    /* Сохраняем прозрачный фон для футера внутри черной секции, чтобы был виден зеленый круг */
    background-color: transparent !important;
  }
  

  
  /* Специально для Emission.html и EmissionAuth.html */
  body > footer.relative.overflow-hidden.py-5 {
    background-color: transparent !important;
    z-index: 10 !important;
  }
  
  /* Добавляем черный фон для страниц авторизации */
  body {
    background-color: black !important;
  }
  
  /* Особые стили для страниц авторизации */
  body.overflow-x-hidden.bg-black {
    width: 100vw !important;
    max-width: none !important;
    background-color: black !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  
  /* Делаем контейнеры с контентом на страницах авторизации шире */
  body.overflow-x-hidden.bg-black > div.flex.flex-col.w-full.mx-auto.max-w-\[1920px\] {
    width: 100vw !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  
  /* Убираем отступы у контейнера EmissionAuth для черного фона по всей ширине */
  body.overflow-x-hidden.bg-black {
    padding: 0 !important;
    overflow-x: hidden !important;
    margin: 0 !important;
  }
  
  /* Делаем зеленые круги в Emission и EmissionAuth видимыми в футере */
  .absolute.w-\[769px\].h-\[769px\].rounded-full.blur-\[600px\] {
    z-index: 1 !important;
    opacity: 0.7 !important;
  }
  
}

/* Навигация: убираем стандартное подчеркивание и реализуем тонкую нижнюю линию */
nav a {
  text-decoration: none !important;
  position: relative;
  padding-bottom: 10px; /* место для линии */
}

/* Ховер: белая тонкая линия */
nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  background: transparent;
  transition: background-color 160ms ease, transform 160ms ease;
  transform-origin: center;
  transform: scaleX(0);
}

nav a:hover::after {
  background: rgba(255,255,255,0.9);
  transform: scaleX(1);
}

/* Активная страница: цвет линии DAFFF1 и более заметный */
nav a.active, nav a[aria-current='page'] {
  color: #DAFFF1 !important;
}

nav a.active::after, nav a[aria-current='page']::after {
  background: #DAFFF1 !important;
  transform: scaleX(1);
}

/* Глобальная поддержка для всех ссылок, помеченных aria-current="page".
   Иногда активная ссылка находится вне <nav> (мобильное меню или разные шаблоны),
   поэтому добавим универсальные правила, чтобы подчерк была видна везде. */
a[aria-current='page'] {
  position: relative !important;
  padding-bottom: 10px !important; /* резерв для линии */
  font-weight: 700 !important;
  color: #DAFFF1 !important;
  border-bottom: none !important;
}

a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  background: #DAFFF1 !important;
  transform-origin: center;
  transform: scaleX(1);
}

/* Mobile menu: make active item bold like on главная */
#mobileMenu a[aria-current='page'] {
  font-weight: 700 !important;
  color: #DAFFF1 !important;
}

/* Desktop menu: enforce bold active link for desktop navigation lists */
.desktop-nav a[aria-current='page'],
nav[role="navigation"] .desktop-nav a[aria-current='page'],
nav[role="navigation"] a[aria-current='page'] {
  font-weight: 700 !important; /* extra bold to be visually prominent */
  color: #DAFFF1 !important;
}

/* Footer navigation should visually match header navigation */
footer .desktop-nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

footer .desktop-nav a {
  color: #DAFFF1 !important;
  text-decoration: none !important;
  position: relative;
  display: inline-block; /* ensure underline width equals text width */
  padding-bottom: 10px;
  padding-left: 0 !important; /* remove horizontal padding so underline doesn't extend */
  padding-right: 0 !important;
}

footer .desktop-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  background: transparent;
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 160ms ease, background-color 160ms ease;
}

footer .desktop-nav a:hover::after,
footer .desktop-nav a[aria-current='page']::after {
  background: #DAFFF1 !important;
  transform: scaleX(1);
}

/* Keep footer borders blue-tinted */
footer .border-white,
footer .border-white\/20,
footer .border-white\/10 {
  border-color: rgba(218, 255, 241, 0.12) !important;
}

/* Уменьшаем визуальное изменение при фокусе (кнопки и т.д.) */
nav a:focus {
  outline: none;
}

/* --- header-specific fixes --- */
/* Убираем реальный border-bottom у ссылок внутри основного header навигации
   — большинство страниц раньше ставили классы border-b-2 border-white,
   это приводило к двойной линии. Пусть линия рисуется только через ::after */
nav[role="navigation"] a,
nav[role="navigation"] a[aria-current='page'] {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Активная ссылка в header: всегда жирная и голубая (DAFFF1) */
nav[role="navigation"] a[aria-current='page'] {
  font-weight: 700 !important;
  color: #DAFFF1 !important;
}

/* Если где-то осталась классная реализация border через span — тоже перекроем */
nav[role="navigation"] span[aria-current='page'] {
  font-weight: 700 !important;
  color: #DAFFF1 !important;
  border-bottom: none !important;
}

/* --- footer-specific theme overrides --- */
/* Make footer text and links blue-tinted and replace white borders with blue variants */

/* Override Tailwind-like border-white utility inside footer */
footer .border-white,
footer .border-white\/10,
footer .border-white\/20,
footer .border-white\/30 {
  /* soft blue for borders, keep low opacity to match existing design */
  border-color: rgba(218, 255, 241, 0.12) !important;
}

/* Buttons/controls in footer that used border-white/20 */
footer .border-white\/20,
footer .border-\[3px\] {
  border-color: rgba(218, 255, 241, 0.12) !important;
}

/* Ensure links keep hover behaviour but with white-on-hover preserved where desired */
footer a:hover::after {
  background: rgba(255,255,255,0.9);
  transform: scaleX(1);
}

/* Footer: unified underline for hover and active (aria-current) */
footer a {
  position: relative;
  padding-bottom: 8px; /* space for underline */
  color: inherit !important;
  text-decoration: none !important;
}

footer a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: transparent;
  transform-origin: center;
  transform: scaleX(0);
  transition: background-color 160ms ease, transform 160ms ease;
}


/* Only hover shows underline in footer; active (aria-current) will NOT get underline here */
footer a:hover::after {
  background: #DAFFF1 !important;
  transform: scaleX(1);
}

/* Active footer link: make it slightly bolder on desktop only (no underline) */
@media (min-width: 1024px) {
  footer a[aria-current='page'] {
    font-weight: 700 !important;
    color: #DAFFF1 !important;
  }
}

/* Progressive enhancement: when parent container supports :has, tint its border when it contains an active or hovered link */
@supports(selector(:has(*))) {
  footer :has(a[aria-current='page']) {
    /* increase contrast of borders around the column */
    --footer-border-color: rgba(218,255,241,0.18);
  }
  footer :has(a:hover) {
    --footer-border-color: rgba(218,255,241,0.12);
  }
  /* Apply the variable to common border utilities inside footer */
  footer .border-r,
  footer .border-b,
  footer .border-t {
    border-color: var(--footer-border-color, rgba(218,255,241,0.12)) !important;
  }
}

/* Ensure the footer's third column keeps a right border (vertical separator) */
footer .grid.grid-cols-4 > div:nth-child(3) {
  border-right: 1px solid var(--footer-border-color, rgba(218,255,241,0.12)) !important;
}


/* ProjectInfo: larger nav arrows on desktop and remove hover border/background */
@media (min-width: 1024px) {
  /* Force larger circular buttons (override tailwind w-16 h-16) */
  .nav-arrow {
    width: 88px !important;
    height: 88px !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
  }

  /* Bigger icon inside the button */
  .nav-arrow img {
    width: 44px !important;
    height: 44px !important;
  }

  /* Remove any visible border / background / glow on hover for desktop
     keep a subtle scale to indicate interactivity but no bordered highlight */

  /* iOS / Safari color-stability fixes
     iOS can automatically adjust/invert some images and svg when the system
     appearance switches between light/dark. Disable auto color adjustments
     and force images/icons/buttons to use intended colors. */
  img, svg, button, .icon, .btn {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  /* Remove blend modes and filters that may cause visual inversion on iOS */
  img:not(#grayImage):not(#colorImage), svg:not(#grayImage):not(#colorImage) {
    mix-blend-mode: normal !important;
    filter: none !important;
    -webkit-filter: none !important;
    background-blend-mode: normal !important;
    isolation: isolate !important;
  }

  /* Some inline SVGs use currentColor — ensure the intended color is set explicitly
     where we know icons should be white/green etc. Add targeted overrides below. */
  .lepestok-icon,
  .kaspi-logo,
  svg.lepestok-icon,
  svg.kaspi-logo,
  img.lepestok-icon,
  img.kaspi-logo {
    mix-blend-mode: normal !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    /* if icons should stay white on dark backgrounds, force white; adjust if needed */
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  /* Buttons: ensure background and foreground do not get auto-inverted */
  button, .btn, input[type="button"], input[type="submit"] {
    mix-blend-mode: normal !important;
    filter: none !important;
    -webkit-filter: none !important;
    background-clip: padding-box !important;
  }

  /* Prevent forced color adjustments in user agents that support forced-color-adjust */
  * {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    forced-color-adjust: none !important;
    -webkit-text-size-adjust: 100% !important;
  }

/* Mobile-specific overrides: ensure fixes apply on phones (max-width 1023px) */
@media (max-width: 1023px) {
  img:not(#grayImage):not(#colorImage), svg:not(#grayImage):not(#colorImage), button, .icon, .btn {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    -webkit-filter: none !important;
    background-blend-mode: normal !important;
    isolation: isolate !important;
    opacity: 1 !important;
  }

  .lepestok-icon,
  .kaspi-logo,
  svg.lepestok-icon,
  svg.kaspi-logo,
  img.lepestok-icon,
  img.kaspi-logo {
    mix-blend-mode: normal !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  button, .btn, input[type="button"], input[type="submit"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    -webkit-filter: none !important;
    background-clip: padding-box !important;
  }
}
  .nav-arrow:hover {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: scale(1.03) !important;
  }

  /* Also ensure active/loading states don't inject a border or bright bg */
  .nav-arrow.active,
  .nav-arrow.loading,
  .nav-arrow:active {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}

/* Ensure hover/bg/border suppressed on all viewports (phones included) and
   establish guaranteed desktop size with a mobile override. Placed after
   previous rules so it wins when necessary. */
.nav-arrow {
  /* default (desktop) size */
  width: 88px !important;
  height: 88px !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;

  /* Keep emission image clipping/grayscale intact — do not override these
     via global img/svg rules. This rule ensures the grayImage effect works. */
  #grayImage {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%) !important;
  }

  #colorImage {
    clip-path: polygon(0 33%, 100% 33%, 100% 100%, 0 100%) !important;
  }
}

.nav-arrow img {
  width: 44px !important;
  height: 44px !important;
}

.nav-arrow:hover,
.nav-arrow:active,
.nav-arrow.active,
.nav-arrow.loading {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.03) !important;
}

/* Mobile override: keep them reasonably sized on phones/tablets */
@media (max-width: 1023px) {
  .nav-arrow {
    width: 64px !important;
    height: 64px !important;
  }
  .nav-arrow img {
    width: 32px !important;
    height: 32px !important;
  }
  /* On touch devices hover is less important, but ensure no background appears */
  .nav-arrow:hover {
    background-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

/* ID-specific overrides: input.css sets #leftProject img / #rightProject img to 30px
   using ID selectors; to reliably increase them on desktop we must target the same
   IDs with !important. */
@media (min-width: 1024px) {
  #leftProject, #rightProject {
    width: 88px !important;
    height: 88px !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  #leftProject img, #rightProject img {
    width: 44px !important;
    height: 44px !important;
  }

  /* Also ensure hover/active states on the IDs don't introduce bg/border */
  #leftProject:hover, #rightProject:hover,
  #leftProject:active, #rightProject:active,
  #leftProject.active, #rightProject.active {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: scale(1.03) !important;
  }
}


/* Styles for the "Посадить дерево" modal: font, colors, weights */
/* Use PP Neue Montreal if available, otherwise fall back to system sans */
@font-face {
  font-family: 'PP Neue Montreal';
  /* No src provided — local files not included in repo. Browsers will use local() if installed */
  src: local('PP Neue Montreal'), local('PPNeueMontreal');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Footer: explicit styling for the 'Пользовательское соглашение' link to match mobile mock */
.user-agreement-link {
  display: block !important;
  color: #BFBFBF !important;
  text-decoration: none !important;
  padding: 0 !important;
  border-radius: 6px !important;
  margin-top: 18px !important;
  max-width: 180px !important;
  box-sizing: border-box !important;
  line-height: 105% !important;
}

.user-agreement-link:hover,
.user-agreement-link:focus {
  color: #FFFFFF !important;
  border-color: rgba(191,191,191,0.18) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

@media (max-width: 767px) {
  footer#footerMainPageFirst .user-agreement-link {
    font-size: 20px !important;
    line-height: 1.15 !important;
    padding: 10px 12px !important;
    margin-left: 12px !important;
  }
}

/* Mobile: make long placeholders truncate with ellipsis for modal inputs */
@media (max-width: 767px) {
  /* Target the carbon modal public transport input specifically */
  #carbon-public-transport {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Ensure the placeholder text also truncates visually */
  #carbon-public-transport::placeholder {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    max-width: 100% !important;
  }

  /* If the input is inside a modal with limited width, make sure it doesn't wrap */
  .carbon-field .border input[type="number"] {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Remove any extra pseudo-element underline or blue border that footer rules may add
   for this specific link. This prevents duplicate underlines/borders while keeping
   other footer links intact. */
.user-agreement-link::after,
footer#footerMainPageFirst .user-agreement-link::after {
  display: none !important;
  content: none !important;
}

.user-agreement-link,
footer#footerMainPageFirst .user-agreement-link {
  border-bottom: none !important;
  box-shadow: none !important;
}