/* Sitewide mobile / desktop layout safety — Köln visitor guide */

/* Tailwind Play CDN used to reset these. Without it, browsers paint
   default purple/underlined links on the white-text nav and footer.
   Wrapped in :where() so it has ZERO specificity: it still beats the
   browser default, but never overrides a class such as .btn.
   (A bare a:link is 0,1,1 and silently clobbered .btn's white text.) */
:where(a:link, a:visited) {
  color: inherit;
  text-decoration: inherit;
}

:where(nav a:link, nav a:visited, nav a:hover, nav a:active,
       .nav-link:link, .nav-link:visited, .nav-link:hover,
       footer a:link, footer a:visited, footer a:hover) {
  color: inherit;
  text-decoration: none;
}

footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  max-width: 100%;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

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

.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

input,
select,
textarea,
button {
  font-size: 16px;
  max-width: 100%;
}

.site-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}

#siteNavDrawer {
  display: none;
  width: 100%;
  background: #1e3a8a;
  padding: 0.25rem 1rem 0.75rem;
}

#siteNavDrawer.is-open {
  display: block;
}

#siteNavDrawer a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.65rem 0.35rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

#siteNavDrawer a:last-child {
  border-bottom: 0;
}

@media (min-width: 768px) {
  .site-nav-toggle {
    display: none !important;
  }

  #siteNavDrawer,
  #siteNavDrawer.is-open {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  h1 {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
  }

  h2 {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
  }

  .hero-image {
    height: auto !important;
    min-height: 70svh !important;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .hero-section,
  .hero-history,
  .hero-facts {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .text-5xl,
  .text-6xl,
  .text-7xl {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  nav a,
  footer a,
  .nav-link {
    min-height: 44px;
  }

  .sticky {
    max-height: 40vh;
    overflow: auto;
  }

  /* Homepage language chip sits on the hero, not over the menu */
  .fixed.top-4.right-4 {
    top: 3.25rem;
    right: 0.75rem;
  }

  /* Ads and wide widgets */
  ins.adsbygoogle,
  .adsbygoogle {
    max-width: 100% !important;
    overflow: hidden;
  }
}