/*
 * Public shell adjustments.
 *
 * This file is loaded after the application styles so the public surface does
 * not inherit the former display type.  The map's alphaTK3 labels are the
 * one intentional exception: map.js applies the font selected by its
 * dedicated font dropdown directly to those labels.
 */
@import url("ads.css");

body {
  font-family: var(--ui-screen-font, Arial), Helvetica, sans-serif !important;
}

body *:where(:not(.map-suffix-marker span)) {
  font-family: var(--ui-screen-font, Arial), Helvetica, sans-serif !important;
}

body *::before,
body *::after {
  font-family: var(--ui-screen-font, Arial), Helvetica, sans-serif !important;
}

.site-header {
  justify-content: flex-start;
}

.admin-site-nav {
  display: flex;
  margin-left: auto;
}

.admin-site-nav form {
  margin: 0;
}

.home-search-content .search-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-search-content .search-actions button,
.home-search-content .search-actions .button {
  margin-right: 0;
}

.home-search-content .search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.home-search-content .search-field input { margin-top: 0; min-width: 0; }
.home-search-content .search-prefix {
  flex: 0 0 25px;
  color: #e5eee6;
  font-size: 15px;
  line-height: 1;
  text-align: right;
}

.public-howto-link {
  margin: 12px auto 18px;
  padding: 3px 0;
  min-height: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: var(--teal-deep);
  font-weight: 800;
}
.public-howto-link:hover { background: transparent; transform: none; }
.public-howto-link--hero { color: var(--citrus); }
.public-home-extras { display: grid; justify-items: center; margin: 24px auto 0; }
.public-home-extras > .public-howto-link--hero { display: none; }
.public-home-ad {
  position: relative;
  width: min(100%, 480px);
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.public-home-ad a, .public-home-ad img { display: block; width: 100%; height: 100%; }
.public-home-ad img { object-fit: cover; }
.public-home-ad-label {
  position: absolute; z-index: 1; top: 8px; left: 8px;
  padding: 4px 7px; border-radius: 4px;
  background: rgba(0,0,0,.72); color: #fff; font-size: 11px;
}
.site-footer .country-switch { margin: 4px 0 0; }

/* Keep the complete selected-country landing view practical at common
   viewport heights while preserving a genuinely square advertising image. */
.public-selected-home .wrap {
  padding-top: clamp(14px, 2.5vh, 24px);
  padding-bottom: clamp(14px, 2.5vh, 24px);
}
.public-selected-home .public-hero { padding: clamp(16px, 3vh, 28px); }
.public-selected-home .public-howto-link { margin: 0 auto 8px; }
.public-selected-home .home-search-content .search-field { margin-top: 6px; }
.public-selected-home .home-search-content .search-actions button,
.public-selected-home .home-search-content .search-actions .button { margin-top: 10px; }
.public-selected-home .public-home-extras { margin-top: 12px; }
.public-selected-home .public-home-ad {
  width: min(100%, 480px, calc(100vh - 390px));
  min-width: 220px;
}
.public-selected-home .public-home-ad .ad-unit-image {
  width: 100%;
  aspect-ratio: 1;
}
.reading-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(4,13,13,.64);
  opacity: 0; transition: opacity .2s ease;
}
.reading-backdrop.is-open { opacity: 1; }
.reading-sheet {
  position: fixed; z-index: 1; left: 50%; top: var(--reading-top, 25vh); bottom: 0;
  display: flex; flex-direction: column;
  width: min(480px, calc(100% - 24px));
  padding: 24px 22px 16px;
  border-radius: 12px 12px 0 0; background: var(--surface); color: var(--ink);
  transform: translate(-50%, 100%); transition: transform .22s ease;
  box-shadow: 0 -12px 45px rgba(0,0,0,.25);
}
.reading-backdrop.is-open .reading-sheet { transform: translate(-50%, 0); }
.reading-sheet-scroll { min-height: 0; overflow-y: auto; }
.reading-sheet h2 { margin: 0 0 18px; font-size: clamp(24px, 5vw, 34px); line-height: 1.08; }
.reading-sheet p { line-height: 1.65; }
.reading-close { width: 100%; margin: 14px 0 0; flex: 0 0 auto; }
body.reading-is-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .reading-backdrop, .reading-sheet { transition: none; }
}

@media (max-width: 760px) {
  .admin-site-nav {
    position: static;
    padding: 0;
    background: transparent;
    flex-direction: row;
    align-items: center;
  }

  .admin-site-nav a,
  .admin-site-nav .logout {
    text-align: center;
  }

  .public-selected-home .public-home-ad {
    width: min(100%, 480px, calc(100vh - 475px));
    min-width: min(220px, 100%);
  }
}

@media (max-height: 680px) {
  .public-selected-home .public-home-ad {
    width: min(100%, 290px, calc(100vh - 365px));
    min-width: min(180px, 100%);
  }
}
.service-grid {
  margin: 24px 0;
  padding: clamp(14px, 3vw, 24px);
  border: 1px solid #d3e1e7;
  border-radius: 16px;
  background: #f7fafc;
  color: #102b40;
}
.service-grid h2 { font-size: 1.2rem; margin: 0 0 16px; }
.service-grid table { border-collapse: collapse; width: 100%; text-align: left; }
.service-grid th, .service-grid td {
  padding: 12px;
  border-bottom: 1px solid #d3e1e7;
  vertical-align: top;
  min-width: 125px;
}
.service-grid thead { background: #102b40; color: white; }
.service-grid tbody th { color: #066f89; }
.service-grid .help { line-height: 1.6; font-size: .9rem; }
.site-header .qr-scanner-header-link {
  color: inherit;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid currentColor;
  border-radius: 5px;
  text-decoration: none;
  white-space: nowrap;
}

/* Header icon controls: retain a clear target without adding navigation width. */
.site-header .qr-scanner-header-link,
.site-header .ui-appearance-controls .ui-logout {
  box-sizing: border-box;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
}
.site-header .qr-scanner-header-link {
  margin-left: 8px;
}
.site-header .qr-scanner-header-link:hover,
.site-header .ui-appearance-controls .ui-logout:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.site-header .qr-scanner-header-link:focus-visible,
.site-header .ui-appearance-controls .ui-logout:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
.header-qr-icon,
.header-logout-icon {
  display: block;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  color: currentColor;
  stroke: currentColor;
}
.site-header .qr-scanner-header-link[aria-current="page"] {
  background: color-mix(in srgb, currentColor 12%, transparent);
}