@import url("modern.css?v=2");

/* Final public-header logo sizing override.
   Loaded after page-specific styles so every page uses the same dimensions. */
header:not(.admin-header) > .logo {
  flex: 0 0 auto !important;
}

/* One shared desktop navigator on every public page. These final overrides
   intentionally win over older page-specific header rules. */
header:not(.admin-header) {
  width: min(1240px, calc(100% - 32px)) !important;
  margin: 12px auto 0 !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  border: 1px solid var(--line, rgba(255, 255, 255, .1)) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--bg, #070812) 84%, transparent) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, .12) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  box-sizing: border-box !important;
}

header:not(.admin-header) > nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin-left: auto !important;
}

header:not(.admin-header) > nav > a {
  flex: 0 0 auto !important;
  padding: 9px 11px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}

/* Day mode fallbacks for older pages that still contain hard-coded dark
   component colors. Kept here because this stylesheet loads last site-wide. */
html[data-theme="light"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

html[data-theme="light"] :is(
  .card, .tool-card, .category-card, .utility-card, .dev-card,
  .panel, .client-card, .qr-panel, .payment-card, .project-card,
  .service-card, .feature-card, .chat-panel, .form-card
) {
  background: var(--surface-strong) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

html[data-theme="light"] :is(
  p, li, label, .muted, .subtitle, .categories-intro,
  .tools-intro, .card-description, .category-card p,
  .category-card ul, .tool-card p, .service-card p
) {
  color: var(--muted) !important;
}

html[data-theme="light"] :is(input, textarea, select) {
  background: var(--surface-strong) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

html[data-theme="light"] footer {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

header:not(.admin-header) > .logo img {
  display: block !important;
  width: 180px !important;
  max-width: 180px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
}

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    -webkit-text-size-adjust: 100%;
  }

  header:not(.admin-header) {
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  header:not(.admin-header) > .logo {
    width: auto !important;
    justify-content: center !important;
  }

  header:not(.admin-header) > .logo img {
    width: 160px !important;
    max-width: 160px !important;
  }

  header:not(.admin-header) > nav {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    padding: 2px 2px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  header:not(.admin-header) > nav > a {
    flex: 0 0 auto !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  main,
  main *,
  section,
  section * {
    min-width: 0;
  }

  main,
  .section,
  .tools-page,
  .categories-page,
  .ai-page,
  .qr-page,
  .services-page,
  .contact-page,
  .about-page,
  .legal-page,
  .client-wrap,
  .chat-wrap,
  .payment-container,
  .project-container {
    max-width: 100% !important;
  }

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

  input,
  select,
  textarea,
  button {
    max-width: 100%;
    box-sizing: border-box;
  }

  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre,
  code {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  h1,
  h2,
  h3,
  p,
  a,
  span,
  strong {
    overflow-wrap: anywhere;
  }

  .hero,
  .section,
  footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 480px) {
  header:not(.admin-header) > .logo img {
    width: 145px !important;
    max-width: 145px !important;
  }

  header:not(.admin-header) > nav {
    gap: 15px !important;
  }

  .grid,
  .tools-grid,
  .category-grid,
  .services-grid,
  .features-grid,
  .project-summary,
  .ai-form,
  .ai-modes,
  .qr-colors {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-search,
  .button-group,
  .cta-buttons,
  .qr-actions {
    width: 100% !important;
    max-width: 100% !important;
  }

  .card,
  .panel,
  .client-card,
  .qr-panel {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}