/* Public pages: header with the country menu, content column, cards. */
body.site-page { display: block; min-height: 100vh; }
header.site {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1.25rem; padding: 1rem 1.25rem; border-bottom: 1px solid #ddd3bd;
}
.logo { font-family: "Cinzel", Georgia, serif; font-weight: 600; letter-spacing: 0.15em; color: var(--bronze); text-decoration: none; font-size: 1.35rem; }
header.site nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.1rem; font-size: 0.95rem; }
header.site nav > a { text-decoration: none; }
header.site nav > a:hover, .menu summary:hover { color: var(--bronze); }

.menu { position: relative; }
.menu summary { cursor: pointer; list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: " ▾"; font-size: 0.8em; }
.menu[open] summary::after { content: " ▴"; }
.menu ul {
  position: absolute; left: 0; top: 1.8rem; z-index: 10; min-width: 15rem; margin: 0; padding: 0.4rem 0;
  list-style: none; background: #fffdf8; border: 1px solid #ddd3bd; border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(26, 26, 46, 0.12);
}
.menu li a { display: block; padding: 0.5rem 1rem; text-decoration: none; }
.menu li a:hover, .menu li a[aria-current="page"] { background: var(--paper); color: var(--bronze); }

main.content { width: 100%; max-width: 40rem; margin: 0 auto; padding: 2rem 1.25rem 1rem; text-align: left; }
main.content h1 { margin-bottom: 0.2rem; }
main.content h2 { font-weight: 600; font-size: 1.3rem; margin: 2rem 0 0.2rem; }
.uk-title { margin: 0 0 1.25rem; color: #4a4a5e; }
.crumbs { font-size: 0.85rem; color: #6b6b7b; margin: 0 0 1rem; }
.badge { display: inline-block; font-size: 0.85rem; padding: 0.15rem 0.6rem; border: 1px solid var(--bronze); border-radius: 1rem; color: var(--bronze); }

.cards { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 0.75rem; }
.cards a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1rem 1.1rem; background: #fffdf8; border: 1px solid #ddd3bd; border-radius: 0.5rem; text-decoration: none;
}
.cards a:hover { border-color: var(--bronze); }
.cards small { color: #6b6b7b; white-space: nowrap; }

.photo-placeholder {
  margin: 1.25rem 0; aspect-ratio: 4 / 3; display: grid; place-content: center; text-align: center; gap: 0.2rem;
  background: repeating-linear-gradient(45deg, #efe8d8, #efe8d8 12px, #f5f0e6 12px, #f5f0e6 24px);
  border: 1px solid #ddd3bd; border-radius: 0.5rem; color: #6b6b7b; font-size: 0.9rem;
}

footer.site { max-width: 40rem; margin: 0 auto; padding: 1rem 1.25rem 2.5rem; text-align: center; }

/* language menu */
.menu.lang summary { font-size: 0.85rem; letter-spacing: 0.05em; padding: 0.1rem 0.5rem; border: 1px solid #ddd3bd; border-radius: 1rem; }
.menu.lang ul { left: auto; right: 0; min-width: 10rem; }
.menu.lang a[aria-current] { color: var(--bronze); }
body.home { position: relative; }
.home-lang { position: absolute; top: 1rem; right: 1.25rem; text-align: left; }

/* collector pages inside the site layout */
.app { margin-top: 0.5rem; }
.app form { justify-items: start; }
header.site > .menu.lang { margin-left: auto; }
header.site nav { order: 3; width: 100%; }
@media (min-width: 760px) { header.site nav { order: 0; width: auto; margin-left: auto; } header.site > .menu.lang { order: 4; margin-left: 0; } }