/**
 * TRITON UI polish — production interface fixes.
 * Loaded after main.css. Does not replace the Tailwind build.
 */

/* -------------------------------------------------------------------------- */
/* Global layout safety                                                       */
/* -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
}

img,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

/* Logo theme swap:
   --on-light = dark ink (visible on light bg)
   --on-dark  = white mark (visible on dark bg) */
.logo-mark__icon {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: inherit;
}

.logo-mark--footer .logo-mark__icon {
  width: 2.5rem;
  height: 2.5rem;
}

.logo-mark__svg {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  line-height: 0;
}

.logo-mark__svg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.logo-mark__icon .logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Hide square black/white underlays on CMS raster logos */
html.dark .logo-img--blend.logo-img--on-dark {
  mix-blend-mode: lighten;
}
html.light .logo-img--blend.logo-img--on-light {
  mix-blend-mode: multiply;
}

.logo-mark__icon .logo-img--on-light {
  opacity: 0;
}
.logo-mark__icon .logo-img--on-dark {
  opacity: 1;
}

html.light .logo-mark__icon .logo-img--on-light {
  opacity: 1;
}
html.light .logo-mark__icon .logo-img--on-dark {
  opacity: 0;
}
html.dark .logo-mark__icon .logo-img--on-light {
  opacity: 0;
}
html.dark .logo-mark__icon .logo-img--on-dark {
  opacity: 1;
}

/* Prefer class-based theme (html.dark / html.light) over prefers-color-scheme. */

/* -------------------------------------------------------------------------- */
/* Header — grid: [logo+nav] | [actions] — actions never overlap nav          */
/* -------------------------------------------------------------------------- */

#site-header .site-header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.5rem;
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding: 1rem 1.5rem;
}

@media (min-width: 1024px) {
  #site-header .site-header-inner {
    padding-inline: 2rem;
    column-gap: 2rem;
  }
}

#site-header .site-header-primary {
  display: flex;
  align-items: center;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
  gap: 1.25rem;
  overflow: hidden;
}

@media (min-width: 1536px) {
  #site-header .site-header-primary {
    gap: 1.75rem;
  }
}

/* Logo — full company name, no ellipsis */
#site-header .site-logo-slot {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: none;
  min-width: 0;
  overflow: visible;
}

#site-header .site-logo-slot .logo-mark {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: auto;
  max-width: none;
  min-width: 0;
}

#site-header .site-logo-slot .logo-mark img,
#site-header .site-logo-slot .logo-mark svg,
#site-header .site-logo-slot .logo-mark__icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

#site-header .site-logo-slot .logo-wordmark {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  min-width: 0;
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: clamp(1rem, 0.2vw + 0.95rem, 1.25rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Long full name without short alias: allow 2 lines in header */
#site-header .site-logo-slot .logo-mark--wrap {
  max-width: min(14rem, 42vw);
}

#site-header .site-logo-slot .logo-mark--wrap .logo-wordmark {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.15;
  font-size: clamp(0.9rem, 0.15vw + 0.85rem, 1.1rem);
}

/*
 * Desktop nav only when width fits all items + phone.
 * .site-header--compact (JS) forces hamburger if anything would clip.
 */
#site-header .site-nav-desktop {
  display: none;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 0.55rem;
  overflow: visible;
}

@media (min-width: 1360px) {
  #site-header:not(.site-header--compact) .site-nav-desktop {
    display: flex;
  }
}

@media (min-width: 1536px) {
  #site-header:not(.site-header--compact) .site-nav-desktop {
    gap: 0.9rem;
  }
}

@media (min-width: 1680px) {
  #site-header:not(.site-header--compact) .site-nav-desktop {
    gap: 1.25rem;
  }
}

#site-header .site-nav-desktop a {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.25rem 0;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--muted, hsl(var(--muted)));
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

@media (min-width: 1536px) {
  #site-header .site-nav-desktop a {
    font-size: 0.875rem;
  }
}

#site-header .site-nav-desktop a:hover,
#site-header .site-nav-desktop a[aria-current="page"],
#site-header .site-nav-desktop a.is-active {
  color: var(--foreground, hsl(var(--foreground)));
}

#site-header .site-nav-desktop a:focus-visible,
#site-header .site-nav-mobile > a:focus-visible,
#mobile-menu-btn:focus-visible {
  outline: 2px solid var(--ring, #d9b876);
  outline-offset: 2px;
}

/* Right column: theme + phone — reserved width, never under nav */
#site-header .site-header-actions {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  isolation: isolate;
  padding-left: 0.25rem;
  grid-column: 2;
  grid-row: 1;
}

@media (min-width: 1360px) {
  #site-header:not(.site-header--compact) .site-header-actions {
    display: flex;
  }
}

#site-header .site-header-phone {
  position: relative;
  z-index: 1;
  box-shadow: none;
  max-width: min(100%, 16rem);
}

#site-header .site-header-phone:hover {
  box-shadow: none;
}

#site-header .site-header-phone__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#site-header .site-header-mobile-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 60;
}

@media (min-width: 1360px) {
  #site-header:not(.site-header--compact) .site-header-mobile-actions {
    display: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile / tablet drawer                                                     */
/* -------------------------------------------------------------------------- */

#mobile-navigation .site-nav-mobile > a {
  display: block;
  border-radius: 0.5rem;
  padding: 0.85rem 0.75rem;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted, hsl(var(--muted)));
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

#mobile-navigation .site-nav-mobile > a:hover,
#mobile-navigation .site-nav-mobile > a[aria-current="page"],
#mobile-navigation .site-nav-mobile > a.is-active {
  color: var(--foreground, hsl(var(--foreground)));
  background-color: color-mix(in srgb, var(--foreground, #fff) 5%, transparent);
}

/*
 * Fixed full-bleed panel under the header bar.
 * Opaque — hero/CTA never bleed through (phone + tablet + compact desktop).
 */
#mobile-navigation[data-mobile-nav] {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--site-header-height, 4.5rem);
  bottom: 0;
  z-index: 55;
  display: none;
  flex-direction: column;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background-color: #060b12;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.light #mobile-navigation[data-mobile-nav] {
  background-color: #f4f7fa;
  border-top-color: rgba(0, 0, 0, 0.08);
}

#mobile-navigation[data-mobile-nav]:not([hidden]):not(.hidden) {
  display: flex;
}

#mobile-navigation .site-nav-mobile {
  flex: 1 1 auto;
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding: 1.25rem 1.25rem max(1.75rem, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

#mobile-navigation .mobile-nav-cta {
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
  background: transparent;
}

html.light #mobile-navigation .mobile-nav-cta {
  border-top-color: rgba(0, 0, 0, 0.1);
}

#mobile-navigation .mobile-nav-cta a {
  box-shadow: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Solid header chrome while drawer is open (no see-through over hero) */
#site-header.is-nav-open {
  background-color: #060b12 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.light #site-header.is-nav-open {
  background-color: #f4f7fa !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

body.triton-mobile-nav-open {
  overflow: hidden !important;
  touch-action: none;
}

body.triton-mobile-nav-open main,
body.triton-mobile-nav-open footer {
  visibility: hidden;
  pointer-events: none;
}

body.triton-mobile-nav-open [data-grain] {
  visibility: hidden;
  opacity: 0;
}

/* Never show drawer in full desktop layout */
@media (min-width: 1360px) {
  #site-header:not(.site-header--compact) #mobile-navigation[data-mobile-nav] {
    display: none !important;
  }
}

/* Narrow phones: keep logo from crushing the burger */
@media (max-width: 379px) {
  #site-header .site-header-inner {
    padding: 0.75rem 1rem;
    column-gap: 0.75rem;
  }

  #site-header .site-logo-slot .logo-mark--wrap {
    max-width: min(11rem, 48vw);
  }

  #site-header .site-logo-slot .logo-mark--wrap .logo-wordmark {
    font-size: 0.85rem;
  }
}

/* Tablets in compact/hamburger mode: comfortable tap targets */
@media (min-width: 768px) and (max-width: 1359px) {
  #mobile-navigation .site-nav-mobile {
    padding-inline: 2rem;
    max-width: 36rem;
  }

  #mobile-navigation .site-nav-mobile > a {
    padding: 1rem 0.85rem;
    font-size: 1.125rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Contacts map — prevent collapse / layout shift                             */
/* -------------------------------------------------------------------------- */

#contacts .contacts-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  #contacts .contacts-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

#contacts .contacts-map {
  position: relative;
  width: 100%;
  min-height: 260px;
  overflow: hidden;
  border-radius: 0.125rem;
}

@media (min-width: 640px) {
  #contacts .contacts-map {
    min-height: 320px;
  }
}

@media (min-width: 1024px) {
  #contacts .contacts-map {
    min-height: 360px;
    height: 100%;
  }
}

#contacts .contacts-map iframe,
#contacts .contacts-map .contacts-map-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

#contacts .contacts-map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  backdrop-filter: blur(4px);
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */

footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1024px) {
  footer .footer-grid {
    grid-template-columns: 1.4fr 2fr;
    gap: 3rem;
  }
}

footer .footer-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

@media (min-width: 640px) {
  footer .footer-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

footer .footer-columns h3 {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

footer .footer-columns a,
footer .footer-columns span {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

footer .footer-brand .logo-mark {
  max-width: none;
  align-items: flex-start;
  gap: 0.75rem;
}

footer .footer-brand .logo-mark__icon {
  width: 2.5rem;
  height: 2.5rem;
}

footer .footer-brand .logo-wordmark {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: 1.125rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* -------------------------------------------------------------------------- */
/* Typography consistency                                                     */
/* -------------------------------------------------------------------------- */

.font-display {
  text-wrap: balance;
}

h1.font-display,
h2.font-display {
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* -------------------------------------------------------------------------- */
/* Images / CLS                                                               */
/* -------------------------------------------------------------------------- */

.photo-duotone,
section img[width][height].object-cover {
  aspect-ratio: auto;
}

.media-frame {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground, #fff) 4%, transparent);
}

.media-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* News cards — reserve space */
.news-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0.125rem;
  background: color-mix(in srgb, var(--foreground, #fff) 5%, transparent);
}

.news-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Partners logos — contain without distortion */
#partners img {
  object-fit: contain;
}

/* -------------------------------------------------------------------------- */
/* Buttons / interactive consistency                                          */
/* -------------------------------------------------------------------------- */

a[data-nav-link],
button {
  -webkit-tap-highlight-color: transparent;
}

/* Reduce grain overlay paint cost on low-power devices */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .animate-float,
  [data-reveal] {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}