/*
 * Custom styles for atoatranslate.eu
 * Overrides and supplements PicoCSS for site-specific needs
 *
 * Dependencies: pico.min.css, fonts.css (Open Sans)
 */

/* ===== Font Override ===== */
/* Use locally-hosted Open Sans instead of PicoCSS default system fonts */
:root {
  --pico-font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ===== Header / Brand ===== */

/* Photo in nav brand area */
nav img.brand-photo {
  height: 80px;
  width: auto;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* ===== Nav Alignment ===== */
/* PicoCSS gives details.dropdown different display/margin/padding than <a> links.
   Override all three to match so nav items align on the same baseline. */
nav ul li details.dropdown {
  display: inline-block;
  margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1);
}
nav ul li details.dropdown > summary:not([role]) {
  height: auto;
  padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);
}

/* ===== Contact Icons ===== */

.contact-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-weight: bold;
  font-style: italic;
}

.contact-line img {
  height: 22px;
  width: auto;
  flex-shrink: 0;
}

/* ===== PDF Icons ===== */

img.pdf-icon {
  height: 16px;
  width: 16px;
  margin-right: 0.25rem;
  vertical-align: middle;
  opacity: 0.85;
}

a:hover img.pdf-icon {
  opacity: 1;
}

/* ===== Footer ===== */

footer nav ul {
  flex-wrap: wrap;
}

/* ===== Accessibility ===== */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--pico-primary);
  color: white;
  padding: 0.5rem 1rem;
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/* ===== Print Styles ===== */

@media print {
  nav,
  .skip-link {
    display: none !important;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }
}