/* City Magnet — "Gridline — signal red" theme
   Swiss monochrome, mobile-first. Signal red is reserved for: the logo mark
   accent and section titles (.card h2 / .section-title). */

:root {
  --bg: #ffffff;
  --ink: #141414;
  --sub: #666666;
  --hairline: #e2e2e2;
  --border-strong: #767676; /* form controls: >=3:1 on white (WCAG 1.4.11) */
  --surface: #ebebeb; /* header/footer ground, a step off the page white */
  --rule: #141414;
  --signal: #c8102e;
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- Reset / base --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Reserve the scrollbar gutter permanently: pages of different heights (and
   the weather widget arriving late) otherwise toggle the scrollbar, shifting
   the centered layout sideways on every page change. */
html { scrollbar-gutter: stable; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}
a { color: inherit; }
img { max-width: 100%; }
/* Keep [hidden] authoritative over any component's own `display` rule (e.g.
   .btn/.badge-popular set display:inline-block, which otherwise beats the
   UA stylesheet's [hidden]{display:none} since author origin wins ties). */
[hidden] { display: none !important; }
input, button, textarea {
  font-family: inherit;
  border-radius: 4px;
  box-shadow: none;
  appearance: none;
}
select {
  /* native appearance kept: stripping it removes the dropdown chevron */
  font-family: inherit;
  border-radius: 4px;
  box-shadow: none;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

/* --- Header --- */
.site-header {
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 100; /* above hover-scaled cards and embedded iframes */
}
.site-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.site-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
}
.site-header-logo {
  height: 48px;
  width: auto;
  display: block;
}
.site-header-home {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.site-header-fav {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--ink);
  text-decoration: none;
  /* Fixed line-height so the ★ fallback glyph (not in Archivo) can't inflate
     the line box on some devices and knock FAVORITES/LOGOUT out of row. */
  line-height: 20px;
}
.site-header-fav:hover { text-decoration: underline; }
.site-header-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  padding: 14px 0;
  margin-top: 32px;
}
.site-footer-home {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.site-footer-logo {
  height: 40px;
}
.site-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.site-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.site-footer-link:hover { text-decoration: underline; }
/* Company contact info: address dead-center, phone and hours balanced
   on either side so the whole footer shares one center line */
.site-footer-contact-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  width: 100%;
  font-size: .875rem;
  color: var(--sub);
}
.site-footer-contact-row > a:first-child { justify-self: end; }    /* phone */
.site-footer-contact-row > a:nth-child(2) { justify-self: center; } /* address */
.site-footer-contact-row > span { justify-self: start; }            /* hours */
@media (max-width: 600px) {
  .site-footer-contact-row { grid-template-columns: 1fr; gap: 0; }
  .site-footer-contact-row > a:first-child,
  .site-footer-contact-row > a:nth-child(2),
  .site-footer-contact-row > span { justify-self: center; }
}
.site-footer-contact-row a,
.site-footer-contact-row span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer-contact-row a,
.site-footer-contact-row span {
  color: var(--ink);
}
.site-footer-contact-row a { text-decoration: none; }
.site-footer-contact-row a:hover { text-decoration: underline; }
.site-footer-copyright {
  color: var(--sub);
  font-size: .8rem;
  margin: 0;
}

/* --- Page titles: display face (Archivo Black has a single 400 weight) --- */
h1 {
  font-family: var(--font-display);
  font-weight: 400;
}

/* --- Card / section title --- */
.card {
  border: 1px solid var(--hairline);
  background: var(--bg);
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 6px;
}
.card h2,
.section-title {
  color: var(--signal);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.1rem;
  margin: 0 0 8px;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  background: var(--rule);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 4px;
  font-weight: 700;
  text-align: center;
  padding: 12px 20px;
  border: 1px solid var(--rule);
  min-height: 44px;
  line-height: 20px;
  cursor: pointer;
  font-size: .9rem;
}
.btn:hover { opacity: .85; }
.btn-outline {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--rule);
}
/* Pressed/active toggle state (e.g. Favorites filter, Favorite button) */
.btn-outline[aria-pressed="true"] {
  background: var(--rule);
  color: #fff;
}

/* --- Tile grid (listings) --- */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
}
.tile {
  border: 1px solid var(--hairline);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tile:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
/* Bare star favorite toggles: on tiles and on the listing detail bar */
.tile-fav,
.fav-star {
  background: none;
  border: none;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}
.tile-fav {
  margin-top: auto;
  align-self: flex-end;
}
/* Detail-page star: outlined box matching .btn-outline */
.fav-star {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg);
}
/* Filled (favorited) stars are gold everywhere */
.tile-fav[aria-pressed="true"],
.fav-star[aria-pressed="true"] { color: #b07d00; } /* gold, >=3:1 on white */
/* Uniform image frame, original-site style: the ad is contained (never
   cropped) and a blurred, zoomed copy of the same image fills the frame
   behind it. The anchor carries the image as an inline background-image;
   the ::before layer inherits it for the blur. */
.tile-media {
  border-radius: 4px;
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-size: 0 0; /* the sharp copy comes from the <img>, not the bg */
}
.tile-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(14px);
  transform: scale(1.2); /* hides the blur's transparent edge bleed */
}
.tile-media img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Inset variant: the photo sits slightly smaller than the frame so the
   blurred backdrop always shows, even when ratios match the frame */
.tile-media-inset img {
  padding: 6% 0;
  object-fit: cover; /* full frame width; slight vertical crop keeps the height */
}

/* Placeholder frame for entries whose photos aren't available yet */
.tile-media-placeholder {
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile-media-placeholder::after {
  content: 'PHOTO COMING SOON';
  color: var(--sub);
  font-size: .75rem;
  letter-spacing: .1em;
}
.tile-title { font-weight: 700; }
/* Non-link tile title (entries with no detail page), sized like the link */
.tile-name {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
}
.tile a { color: var(--ink); text-decoration: none; }
.tile a:hover { text-decoration: underline; }
/* Tap targets >=44px: name/phone/address links (not the image link). */
.tile a:not(:first-child) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --- Listing detail: large ad image, full width of the content column --- */
.listing-image {
  border-radius: 6px;
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 16px;
}

/* --- Listing detail: category hugs the business name --- */
#listing-name { margin: 0 0 4px; }
#listing-category { margin: 0 0 20px; }

/* Directions card: Google link underlines only on hover */
#google-link { text-decoration: none; font-weight: 700; }
#google-link:hover { text-decoration: underline; }

/* --- Listing detail: plain address line under the action buttons --- */
.listing-phone { margin: 12px 0 0; font-weight: 700; }
.listing-address { margin: 0; }
.listing-phone a,
.listing-address a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.listing-phone a:hover,
.listing-address a:hover { text-decoration: underline; }

/* --- Report dropdown (listing detail bar) --- */
.report-menu {
  position: relative;
  display: inline-block;
}
.report-menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
}
.report-menu summary::-webkit-details-marker { display: none; }
.report-form {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  width: 280px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  padding: 14px;
  display: flex;
  flex-direction: column;
  text-align: left;
  font-weight: 400;
  z-index: 50;
}
.report-q { margin: 10px 0 2px; font-weight: 700; font-size: .85rem; }
.report-q:first-child { margin-top: 0; }
.report-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: .9rem;
  cursor: pointer;
}
/* the global reset strips native radio rendering; restore it here */
.report-opt input[type="radio"] {
  appearance: auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--signal);
}
.report-form textarea {
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 8px;
  font-size: .9rem;
  min-height: 64px;
  resize: vertical;
}
.report-form .btn { margin-top: 10px; }

/* --- Toolbar (listings count / search / sort) --- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  margin-bottom: 16px;
}
.toolbar-label { font-weight: 700; }
/* Listing-detail toolbar: star + report grouped right, edges level with GO BACK */
.toolbar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.toolbar-controls .fav-star,
.toolbar-controls .report-menu summary,
#back-link {
  height: 46px;
  min-height: 46px;
}
.toolbar input[type="search"],
.toolbar select {
  min-height: 44px;
  border: 1px solid var(--border-strong);
  padding: 8px 10px;
  font-size: .9rem;
  background: var(--bg);
  color: var(--ink);
}

/* --- Tel list (schools / community numbers) --- */
.tel-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.tel-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--hairline);
  color: #1155cc;
  text-decoration: underline;
}
.tel-list a:last-child { border-bottom: none; }

/* --- Sponsor card (schools/community): centered content --- */
.sponsor-card { text-align: center; }

/* --- Home page title: centered, ink --- */
.home-title {
  text-align: center;
  font-size: clamp(2.2rem, 6vw, 3rem);
  letter-spacing: -.01em;
  margin: 8px 0 0;
}

/* --- Page-title area name (e.g. "Monroe County") --- */
.title-area { color: var(--signal); }

/* --- Weather / map boxes --- */
.weather-card { box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.weather-box {
  min-height: 44px;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
}
.map-box {
  border-radius: 6px;
  position: relative;
  width: 100%;
  padding-top: 62.5%; /* ~16:10 */
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.map-box iframe {
  position: absolute;
  /* Crop 150px off the top AND bottom of the embed: hides Google's white
     address card (top-left, no off switch) while keeping the pin, which
     sits at the iframe's center, exactly centered in the visible box. */
  top: -150px;
  left: 0;
  width: 100%;
  height: calc(100% + 300px);
  border: 0;
}

/* --- Form input (landing page code entry, listings search, etc.) --- */
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="email"] {
  min-height: 44px;
  border: 1px solid var(--border-strong);
  padding: 8px 12px;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  width: 100%;
}

/* --- Inline error text (e.g. landing page bad-code message) --- */
.error-text {
  color: var(--signal);
  font-size: .85rem;
  margin: 8px 0 0;
}

/* --- Fainter subtitle text (e.g. schools/community page intros) --- */
.text-muted {
  color: var(--sub);
  font-size: .9rem;
  margin: 0 0 12px;
}

/* --- Landing page (index.html) --- */
body.landing {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.landing-bg {
  position: fixed;
  inset: 0;
  background: url("../assets/magnet-photo.jpg") center/cover no-repeat;
  filter: grayscale(1) blur(6px);
  transform: scale(1.06); /* keeps the blur's soft edges off-screen */
  z-index: -2;
}
.landing-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, .7);
  z-index: -1;
}
.landing-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.landing-card {
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
.landing-card h1 {
  /* heading semantics only: keep the quiet body-copy look of the old <p> */
  font-family: var(--font-body);
  font-size: 1.1rem;
  margin: 16px 0;
}
.landing-card input {
  margin: 12px 0;
  text-align: center;
}
.landing-helper {
  color: var(--sub);
  font-size: .8rem;
  margin: 8px 0 0;
}

/* Tap targets >=44px: listings "<< BACK TO HOME" (listings.html), "GO BACK"
   and "Find Us on GOOGLE" (listing.html) share the #back-link/#google-link ids. */
#back-link,
#google-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --- City home: image-topped widget cards + section rhythm --- */
.section-stack {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 32px;
  padding-bottom: 72px;
}
.section-stack .card { margin-bottom: 0; }

.widget-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .section-stack { gap: 72px; }
  .widget-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

.widget-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* clips the title band to the card's rounded corners */
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.widget-card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
@media (prefers-reduced-motion: reduce) {
  .widget-card, .tile { transition: none; }
  .widget-card:hover, .tile:hover { transform: none; }
}
/* Title band doubles as a future image slot: 4:3 like the original card
   photos, so swapping the red for an <img> keeps the same footprint. */
.widget-card h2 {
  font-family: var(--font-display);
  font-weight: 400;
  background: var(--signal);
  color: #fff;
  margin: 0;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-size: 1.6rem;
}
/* Single-column below 900px: uncapped 4:3 bands balloon past 600px tall */
@media (max-width: 899px) {
  .widget-card h2 { aspect-ratio: auto; min-height: 140px; }
}
.widget-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.widget-card-body p {
  color: var(--sub);
  flex: 1;
  margin: 0 0 20px;
}
.widget-card .btn { align-self: flex-start; }

/* --- Motion ---
   State-conveying only, 150-350ms, ease-out. Tile hover lives with .tile. */

/* Cross-page crossfade (native view transitions; unsupported browsers just
   navigate normally) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .15s; }
::view-transition-new(root) { animation-duration: .2s; }

/* Grids fade-rise once when their content first arrives. :not(:empty) keys
   the animation to the first render, so search/sort re-renders don't
   re-trigger it (only an emptied-then-refilled grid does, as feedback). */
.tile-grid:not(:empty) {
  animation: fade-rise .35s var(--ease-out-quart) both;
}
@keyframes fade-rise {
  from { opacity: 0; transform: translateY(8px); }
}

/* Press feedback: buttons sink a touch, favorite stars grow under the finger */
.btn {
  transition: opacity .15s ease, transform .15s var(--ease-out-quart);
}
.btn:active { transform: scale(.97); }
.tile-fav,
.fav-star {
  transition: transform .15s var(--ease-out-quart), color .15s ease;
}
.tile-fav:active,
.fav-star:active { transform: scale(1.25); }

/* Search/sort focus eases in instead of snapping */
.toolbar input[type="search"],
.toolbar select {
  transition: border-color .15s ease;
}
.toolbar input[type="search"]:focus,
.toolbar select:focus { border-color: var(--rule); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}