/* ViewerPix Clean Tool-First UI v2.1
   Final responsive polish for mobile navigation, active tool state, compact cards,
   readable helper text, and localized footer wrapping. */

body[data-tool="viewer"] .main-nav a[href$="/image-viewer/"],
body[data-tool="merge"] .main-nav a[href$="/merge-images/"],
body[data-tool="splitter"] .main-nav a[href$="/image-splitter/"],
body[data-tool="collage"] .main-nav a[href$="/collage-maker-online/"],
body[data-tool="converter"] .main-nav a[href$="/image-converter/"],
body[data-tool="metadata"] .main-nav a[href$="/image-metadata-viewer/"],
body[data-tool="editor"] .main-nav a[href$="/resize-image/"],
body[data-tool="compressor"] .main-nav a[href$="/compress-image/"] {
  color: #1d4ed8;
  background: #eff6ff;
}

.dropzone small { font-size: 11px; }
.footer-links { flex-wrap: wrap; row-gap: 6px; }

.main-nav a:focus-visible,
.primary-tool-card:focus-visible,
.dropzone:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .site-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand language"
      "nav nav";
    align-items: center;
    column-gap: 12px;
    row-gap: 7px;
    min-height: 0;
    padding: 10px 0 8px;
  }
  .brand { grid-area: brand; }
  .header-actions { display: contents; }
  .main-nav {
    grid-area: nav;
    max-width: 100%;
    overflow-x: auto;
    scroll-padding-inline: 4px;
    overscroll-behavior-inline: contain;
  }
  .main-nav a { padding: 6px 7px; font-size: 11px; }
  .language-control { grid-area: language; justify-self: end; }
  .language-control select { height: 32px; max-width: 160px; font-size: 11px; }
  .site-footer { gap: 8px; }
  .footer-links { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .primary-tool-grid,
  .primary-tool-grid.converter-grid,
  .primary-tool-grid.converter-grid.metadata-grid {
    grid-template-columns: 1fr;
  }
}