/* Grammy's Town shared styles: asphalt main street, sunny-yellow signs, sky-blue labels, awning red. */
:root {
  --asphalt: #1c1e22;
  --asphalt-raised: #26292f;
  --curb: #353942;
  --line: #f4f1e6;
  --sun: #fff200;
  --sky: #4ea3ff;
  --awning: #e8473a;
  --grass: #5fc15a;
  --muted: #b7bcc6;
  --display: "Sniglet", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--asphalt);
  color: var(--line);
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sun); font-weight: 800; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }

/* Site navigation */
.site-nav {
  background: var(--asphalt);
  border-bottom: 6px solid transparent;
  border-image: repeating-linear-gradient(90deg, var(--line) 0 34px, transparent 34px 58px) 6;
  padding-block: 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.site-nav .inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.site-nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sun); font-family: var(--display); font-weight: 800; font-size: 1.35rem; }
.site-nav .brand img { width: 40px; height: 40px; border-radius: 8px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.site-nav ul a { display: block; padding: 6px 12px; border-radius: 999px; color: var(--line); text-decoration: none; font-weight: 800; font-size: .95rem; }
.site-nav ul a:hover { background: var(--asphalt-raised); }
.site-nav ul a[aria-current="page"] { background: var(--sun); color: var(--asphalt); }

/* Page shell */
.page {
  padding-block: 32px 40px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.wrap { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.intro { display: flex; flex-direction: column; gap: 12px; max-width: 46em; }
.eyebrow { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.12; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 6vw, 3.3rem); color: var(--sun); }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
h3 { font-size: 1.35rem; }
p { margin: 0; }
.lede { font-size: 1.15rem; text-wrap: pretty; }
.muted { color: var(--muted); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  color: var(--asphalt); background: var(--sun);
  border: 0; border-radius: 999px; padding: 11px 20px;
  text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--sun); box-shadow: inset 0 0 0 2px var(--sun); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Forms */
form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
label { font-weight: 800; font-size: .95rem; }
.opt { font-weight: 400; color: var(--muted); }
input, select, textarea {
  font: inherit; color: var(--line); background: var(--asphalt);
  border: 2px solid var(--curb); border-radius: 10px; padding: 10px 12px; width: 100%; min-width: 0;
}
textarea { min-height: 110px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--sun); }
.hidden-field { position: absolute; left: -9999px; }
form .btn { align-self: flex-start; }

.panel { background: var(--asphalt-raised); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.site-footer {
  border-top: 2px solid var(--curb);
  padding-block: 24px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  color: var(--muted); font-size: .9rem;
}
.site-footer .inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }

/* Placeholder for a shop with no photo yet */
.no-photo {
  width: 100%; aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 16px; text-align: center;
  background: repeating-linear-gradient(135deg, var(--asphalt-raised) 0 22px, var(--curb) 22px 44px);
}
.no-photo span { font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--sun); }
.no-photo small { color: var(--muted); font-size: .9rem; }
.chip.taken { background: var(--sun); }