/* Responsive Navigation CSS */
:root {
  /* Mobile baseline (current sizes) */
  --nav-logo-size: 40px;
  --nav-logo-text-size: 16px;
  --nav-link-font-size: 13px;
  --nav-button-font-size: 15px;
  --nav-button-padding: 8px 8px;
  --nav-spacing-top: 12px;
  --nav-spacing-left: 12px;
  --nav-spacing-right: 12px;
  --nav-link-spacing: 12px; /* 65px - 12px - 13px line height */
  --nav-link-line-height: 12px;
}

/* Tablet styles (880px - 1023px) */
@media (min-width: 880px) and (max-width: 1023px) {
  :root {
    --nav-logo-size: 50px; /* +25% */
    --nav-logo-text-size: 20px; /* +25% */
    --nav-link-font-size: 16px; /* +25% */
    --nav-button-font-size: 19px; /* +25% */
    --nav-button-padding: 10px 10px; /* +25% */
    --nav-spacing-top: 15px; /* +25% */
    --nav-spacing-left: 15px; /* +25% */
    --nav-spacing-right: 15px; /* +25% */
    --nav-link-spacing: 15px; /* +25% */
    --nav-link-line-height: 15px; /* +25% */
  }
}

/* Desktop styles (1024px+) */
@media (min-width: 1024px) {
  :root {
    --nav-logo-size: 60px; /* +50% */
    --nav-logo-text-size: 24px; /* +50% */
    --nav-link-font-size: 20px; /* +50% */
    --nav-button-font-size: 23px; /* +50% */
    --nav-button-padding: 12px 12px; /* +50% */
    --nav-spacing-top: 18px; /* +50% */
    --nav-spacing-left: 18px; /* +50% */
    --nav-spacing-right: 18px; /* +50% */
    --nav-link-spacing: 18px; /* +50% */
    --nav-link-line-height: 18px; /* +50% */
  }
}

/* Apply responsive variables to navigation elements */
.nav-logo {
  top: var(--nav-spacing-top) !important;
  left: var(--nav-spacing-left) !important;
}

.nav-logo .logo-image-container {
  width: var(--nav-logo-size) !important;
  height: var(--nav-logo-size) !important;
}

.nav-logo .logo-static,
.nav-logo .logo-animated {
  width: var(--nav-logo-size) !important;
  height: var(--nav-logo-size) !important;
}

.nav-logo .logo-text {
  font-size: var(--nav-logo-text-size) !important;
}

.nav-post-job-button {
  top: var(--nav-spacing-top) !important;
  right: var(--nav-spacing-right) !important;
  font-size: var(--nav-button-font-size) !important;
  padding: var(--nav-button-padding) !important;
}

.nav-link-about,
.nav-link-legal {
  left: var(--nav-spacing-left) !important;
  font-size: var(--nav-link-font-size) !important;
  line-height: var(--nav-link-line-height) !important;
}

.nav-link-about {
  top: calc(var(--nav-spacing-top) + var(--nav-logo-size) + var(--nav-link-spacing)) !important;
}

.nav-link-legal {
  top: calc(var(--nav-spacing-top) + var(--nav-logo-size) + var(--nav-link-spacing) + var(--nav-link-font-size) + var(--nav-link-line-height)) !important;
}