/* DMA-Events site styles. Most styling sits on each element; this file holds the shared basics.
   --accent is the magenta used for buttons and the current menu item. */

:root { --accent: #A21C6E; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FBFAF7; }
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: #1C1B19; }
a:hover { color: #55524C; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 20; background: #1C1B19; color: #FFFFFF; padding: 8px 14px; }
.skip-link:focus { left: 8px; color: #FFFFFF; }

/* spam trap on the forms; people never see it */
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Murals page: town filter */
.town-btn {
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font-family: Archivo, sans-serif; font-weight: 600; font-size: 15px;
  border: 1.5px solid #B9B3A8; background: #FFFFFF; color: #1C1B19;
}
.town-btn:hover { border-color: #1C1B19; }
.town-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #FFFFFF; }

/* Mural page: photo thumbnails */
.thumb { width: 112px; height: 84px; padding: 3px; border-radius: 9px; cursor: pointer; background: #FFFFFF; border: 2px solid #E6E2DA; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; }
.thumb[aria-pressed="true"] { border-color: var(--accent); }

@media (max-width: 640px) {
  .thumb { width: 84px; height: 64px; }
}