:root {
  color-scheme: dark;
}

html,
body {
  overflow-x: clip;
}

body {
  min-width: 320px;
}

img {
  max-width: 100%;
  height: auto;
}

main,
header,
nav,
section,
article,
footer {
  min-width: 0;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

.page-main {
  display: block;
}

.navigation-bar {
  position: relative;
}

.navigation-overlay {
  background: transparent;
}

.navigation-menu-link,
.navigation-menu-link-dummy {
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .navigation-bar-container {
    position: relative;
    z-index: 2;
    min-height: 5.25rem;
    flex-wrap: nowrap;
    gap: var(--spacing-xl);
  }

  .navigation-desktop-menu {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
    white-space: nowrap;
  }

  .navigation-desktop-link {
    color: var(--color-on-surface);
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    font-size: var(--font-size-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.2s ease;
  }

  .navigation-desktop-link:hover,
  .navigation-desktop-link:focus-visible {
    color: var(--color-accent);
  }

  .navigation-hamburger,
  .navigation-close,
  .navigation-overlay-texture,
  .navigation-overlay-divider,
  .navigation-overlay-divider-small,
  .navigation-overlay-right {
    display: none !important;
  }

  .navigation-desktop-actions {
    display: none !important;
  }

  .navigation-overlay {
    display: none !important;
    position: absolute !important;
    inset: 0 !important;
    transform: none;
    background: transparent !important;
    box-shadow: none;
    backdrop-filter: none;
    pointer-events: none;
  }

  .navigation-overlay-header {
    display: none;
  }

  .navigation-overlay-content {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0 var(--spacing-4xl);
    align-items: center;
  }

  .navigation-overlay-split {
    display: flex;
    width: 100%;
    padding: 0;
    max-width: none;
    align-items: center;
    justify-content: flex-end;
  }

  .navigation-overlay-left {
    display: flex;
    height: 100%;
    pointer-events: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-lg);
  }

  .navigation-menu-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacing-sm) var(--spacing-lg);
    overflow-x: auto;
    white-space: nowrap;
  }

  .navigation-menu-link,
  .navigation-menu-link-dummy {
    font-size: var(--font-size-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .navigation-btn-dummy {
    display: none;
  }
}

@media (max-width: 767px) {
  .navigation-desktop-menu {
    display: none;
  }

  .navigation-bar-container {
    align-items: center;
  }

  .navigation-overlay {
    display: none;
  }

  .navigation-checkbox:checked ~ .navigation-overlay {
    display: flex;
  }

  .navigation-overlay-content {
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-3xl);
  }

  .navigation-overlay-split {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    padding: 0;
  }

  .navigation-menu-list {
    gap: var(--spacing-sm);
  }

  .navigation-menu-link,
  .navigation-menu-link-dummy {
    font-size: var(--font-size-xl);
  }

  .navigation-contact-block {
    margin-top: var(--spacing-lg);
  }

  .navigation-overlay-right {
    display: none;
  }

  .navigation-overlay-controls {
    align-self: flex-start;
  }
}

.hero-velunora {
  isolation: isolate;
}

.hero-velunora::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(rgba(12, 14, 18, 0.58), rgba(12, 14, 18, 0.58)),
    url("./assets/images/pexels-photo-7614716-80a2f87d2f.webp") center / cover no-repeat;
}

.hero-velunora-gallery {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.hero-velunora-tile {
  min-height: 18rem;
  background: var(--color-surface-elevated);
}

.hero-velunora-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(12, 14, 18, 0.42), transparent 55%);
}

.hero-velunora-tile img {
  display: block;
  position: relative;
  z-index: 0;
}

.navigation-menu-link-dummy,
.velunora-footer-link-dummy {
  opacity: 1 !important;
}

.footer-link1,
.footer-link2,
.footer-navlink1,
.footer-navlink2,
.footer-navlink3,
.footer-navlink4,
.footer-navlink5,
.velunora-footer-nav-col a,
.velunora-footer-legal-links a,
.velunora-footer-logo-link {
  display: inline-flex !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.footer-link1 .velunora-footer-contact-link,
.footer-link2 .velunora-footer-contact-link {
  text-decoration: none;
}

.velunora-footer-legal-links {
  flex-wrap: wrap;
}

.velunora-footer-link-dummy {
  color: var(--color-on-surface-secondary);
  cursor: pointer !important;
  font-size: var(--font-size-sm);
}

.velunora-footer-link-dummy:hover {
  color: var(--color-accent);
}

.velunora-footer-nav-col a {
  display: inline-flex !important;
  width: fit-content;
}

.velunora-footer-nav-col a:hover,
.velunora-footer-legal-links a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.legal-page {
  padding: var(--spacing-3xl) 0 var(--spacing-4xl);
  background: var(--color-surface);
}

.legal-shell {
  width: 100%;
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 var(--spacing-4xl);
  box-sizing: border-box;
}

.legal-hero {
  gap: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-2xl);
}

.legal-overline {
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.legal-grid {
  gap: var(--spacing-2xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.legal-card {
  border: 1px solid var(--color-outline);
  border-radius: var(--border-radius-card);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-level-1);
  padding: var(--spacing-3xl);
}

.legal-card .section-content,
.legal-card .legal-list {
  max-width: 72rem;
}

.legal-card .section-content {
  font-size: var(--font-size-lg);
}

.legal-section + .legal-section {
  margin-top: var(--spacing-2xl);
}

.legal-list {
  display: grid;
  gap: var(--spacing-sm);
  padding-left: 1.2rem;
}

.legal-back {
  display: inline-flex;
  margin-top: var(--spacing-2xl);
}

@media (max-width: 767px) {
  .legal-shell {
    padding: 0 var(--spacing-lg);
  }

  .legal-card {
    padding: var(--spacing-lg);
  }
}