/* SuperFresh Supermarket - Arverne, NY
   Brand colors are taken from the logo: cyan #01AEEF, green #78C045. */

:root {
  --brand: #01AEEF;
  --brand-dark: #0a86b8;
  --green: #78C045;
  --green-dark: #5d9a32;
  --ink: #14202b;
  --ink-soft: #4a5b6b;
  --line: #dfe6ec;
  --bg: #ffffff;
  --bg-alt: #f4f8fa;
  --sale: #d92b2b;
  --radius: 12px;
  --wrap: 1120px;
  --shadow: 0 1px 2px rgba(20, 32, 43, .06), 0 8px 24px rgba(20, 32, 43, .07);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-dark); }

h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.125rem); }
h3 { font-size: 1.125rem; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.muted { color: var(--ink-soft); font-size: .875rem; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5em; min-height: 48px; padding: 12px 22px;
  border: 2px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  cursor: pointer; background: none; font-family: inherit;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { border-color: currentColor; color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .16); }
.btn-call {
  background: var(--green); color: #fff; padding: 10px 18px;
  min-height: 44px; white-space: nowrap;
}
.btn-call:hover { background: var(--green-dark); }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 16px;
  min-height: 68px; flex-wrap: wrap;
}
.brand { margin-right: auto; display: flex; align-items: center; }
.logo { width: 180px; height: auto; }
.logo-text { font-weight: 800; font-size: 1.25rem; color: var(--brand); }

.nav { display: none; gap: 22px; }
.nav a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: 8px 0; border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--brand); }

@media (min-width: 900px) { .nav { display: flex; } }

/* Keep the logo and the call button on one row on a phone; at the full logo
   width they wrap and the sticky header eats a third of the screen. */
@media (max-width: 560px) {
  .header-inner { min-height: 58px; gap: 10px; }
  .logo { width: 132px; }
  .btn-call { padding: 8px 14px; min-height: 40px; font-size: .9375rem; }
  .section { scroll-margin-top: 62px; }
}

/* ---------- hero ---------- */

.hero { position: relative; background: var(--ink); }
.hero-img {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0; opacity: .55;
}
.hero-overlay {
  position: relative;
  padding: clamp(48px, 9vw, 104px) 0;
  color: #fff;
  background: linear-gradient(180deg, rgba(20, 32, 43, .58), rgba(20, 32, 43, .88));
}
.hero-overlay .wrap { max-width: 820px; margin-inline: auto; }
.eyebrow {
  margin: 0 0 8px; font-size: .875rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #cfe9f6;
}
.hero h1 { margin-bottom: .25em; }
.lede { font-size: clamp(1.05rem, 2.2vw, 1.25rem); margin: 0 0 20px; color: #e8f1f7; }
.hero-sale {
  display: inline-block; margin: 0 0 24px; padding: 8px 16px;
  background: var(--sale); color: #fff; border-radius: 999px;
  font-weight: 700; font-size: .95rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
.open-status { margin: 0; font-weight: 600; font-size: .95rem; color: #e8f1f7; }
.open-status .dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 8px; vertical-align: middle; background: var(--ink-soft);
}
.open-status.is-open .dot { background: #46d17a; }
.open-status.is-closed .dot { background: #ff7a7a; }

/* ---------- sections ---------- */

.section { padding: clamp(44px, 7vw, 80px) 0; scroll-margin-top: 76px; }
.section-alt { background: var(--bg-alt); }
.section-note { color: var(--ink-soft); margin: -.25em 0 1.75em; max-width: 62ch; }

/* ---------- circular ---------- */

.circ-pages {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.circ-page { margin: 0; }
.circ-page a { display: block; border-radius: var(--radius); }
.circ-page img {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.circ-page a:hover img {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(20, 32, 43, .1), 0 16px 36px rgba(20, 32, 43, .14);
}
.circ-page figcaption {
  margin-top: 8px; font-size: .8125rem; color: var(--ink-soft); text-align: center;
}

/* ---------- deals ---------- */

.deal-tools { display: grid; gap: 14px; margin-bottom: 18px; }
.search input {
  width: 100%; min-height: 52px; padding: 12px 18px;
  border: 2px solid var(--line); border-radius: 999px;
  font-size: 1rem; font-family: inherit; background: #fff; color: var(--ink);
}
.search input:focus { border-color: var(--brand); outline: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 40px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  font: 600 .875rem/1 inherit; font-family: inherit; cursor: pointer;
}
.chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.deal-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin: 0 0 18px;
}
.deal-count { color: var(--ink-soft); font-size: .875rem; margin: 0; }

.link-button {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: 600 .875rem/1 inherit; font-family: inherit;
  color: var(--brand-dark); text-decoration: underline;
}

/* Departments collapse by default - fully expanded, 348 deals made the page
   about 15,000px tall and buried the hours and contact details. */
.deal-group { margin: 0 0 10px; border-bottom: 1px solid var(--line); }
.deal-group > summary {
  position: sticky; top: 68px; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 14px 0; cursor: pointer;
  background: var(--bg); list-style: none;
}
.deal-group > summary::-webkit-details-marker { display: none; }
.deal-group > summary::after {
  content: ""; flex: 0 0 auto; margin-left: auto;
  width: 10px; height: 10px; border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.deal-group[open] > summary::after { transform: rotate(-135deg) translate(-4px, -4px); }
.deal-group > summary:hover { color: var(--brand-dark); }
.deal-group > summary h3 {
  display: inline; margin: 0;
  font-size: 1rem; text-transform: uppercase; letter-spacing: .06em;
}
.deal-group-count {
  font-size: .8125rem; font-weight: 600; color: var(--ink-soft);
  padding: 3px 10px; border-radius: 999px; background: var(--bg-alt);
}
.deal-group > .deal-list { padding-bottom: 22px; }
.deal-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.deal {
  display: flex; gap: 14px; align-items: baseline;
  padding: 12px 14px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.deal-price {
  flex: 0 0 auto; font-weight: 800; font-size: 1.0625rem;
  color: var(--sale); font-variant-numeric: tabular-nums;
}
.deal-price .unit { font-weight: 600; font-size: .8125rem; color: var(--ink-soft); }
.deal-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.deal-name { font-weight: 600; line-height: 1.35; }
.deal-detail { font-size: .8125rem; color: var(--ink-soft); line-height: 1.4; }
.deal[hidden] { display: none; }
.no-results { color: var(--ink-soft); font-style: italic; }

/* ---------- departments ---------- */

.depts {
  display: grid; gap: 20px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.dept {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.dept-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); }
.dept-media img { width: 100%; height: 100%; object-fit: cover; }
.dept-body { padding: 18px 20px 22px; }
.dept-body p { margin: 0 0 12px; color: var(--ink-soft); font-size: .9375rem; }
.dept-badge {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: #eaf7dd; color: var(--green-dark);
  font-size: .8125rem; font-weight: 700;
}
.dept-textonly .dept-body { padding-top: 22px; }

.services {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px;
  margin: 28px 0 0; padding: 0;
}
.services li {
  padding: 8px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: .9375rem; font-weight: 600;
}

/* ---------- hours / visit ---------- */

.visit-grid, .contact-grid {
  display: grid; gap: 32px; align-items: start;
}
@media (min-width: 860px) {
  .visit-grid, .contact-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.visit-media img { border-radius: var(--radius); box-shadow: var(--shadow); }

.hours { margin: 0 0 18px; }
.hours-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.hours dt { font-weight: 600; }
.hours dd { margin: 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- contact ---------- */

.store-address { font-style: normal; line-height: 1.8; margin: 0 0 24px; }
.email-link { cursor: pointer; }

.form { display: grid; gap: 4px; }
.field { margin: 0 0 14px; display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .9375rem; }
.field input, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit;
  border: 2px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink);
}
.field input:focus, .field textarea:focus { border-color: var(--brand); outline: none; }
.field textarea { resize: vertical; min-height: 120px; }
.form-status { margin: 4px 0 0; font-weight: 600; }
.form-status.ok { color: var(--green-dark); }
.form-status.err { color: var(--sale); }

.form-placeholder {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.form-placeholder p { margin: 0 0 12px; }
.form-placeholder p:last-child { margin-bottom: 0; }

.map {
  aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  background: var(--bg-alt) center / cover no-repeat;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-load {
  flex-direction: column; gap: 4px; background: #fff;
  border: 2px solid var(--line); color: var(--ink);
}
.map-load:hover { border-color: var(--brand); }
.map-links { margin: 12px 0 0; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--ink); color: #c9d6e0;
  padding: 40px 0; margin-top: 0;
}
.footer-inner { display: grid; gap: 20px; }
@media (min-width: 760px) { .footer-inner { grid-template-columns: 1fr 1.4fr; gap: 48px; } }
.site-footer strong { color: #fff; }
.site-footer a { color: #9fdcf7; }
.site-footer .muted { color: #8fa3b3; }

/* ---------- circular viewer ---------- */

/* Tapping a page used to navigate to the .webp file, which phones treat as a
   download rather than something to look at. This opens it in place instead. */
.viewer {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  background: #0d1620;
}
.viewer[hidden] { display: none; }

.viewer-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: #14202b; color: #fff;
}
.viewer-label { font-weight: 600; font-size: .9375rem; margin-right: auto; }
.viewer-tools { display: flex; gap: 6px; }
.viewer-tools button {
  width: 44px; height: 44px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08); color: #fff;
  font: 600 1.25rem/1 inherit; font-family: inherit;
}
/* Closing matters more than the other controls, so give it the biggest
   target glyph the button can hold without changing the button. */
.viewer-tools #viewer-close { font-size: 2rem; font-weight: 400; }
.viewer-tools #viewer-prev,
.viewer-tools #viewer-next { font-size: 1.75rem; }
.viewer-tools button:hover { background: rgba(255, 255, 255, .18); }
.viewer-tools button[disabled] { opacity: .35; cursor: default; }

.viewer-stage {
  flex: 1 1 auto; overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12px;
}
.viewer-stage img {
  max-width: none; height: auto; display: block;
  border-radius: 6px; background: #fff;
  cursor: zoom-in; user-select: none;
}
.viewer-stage.is-zoomed img { cursor: grab; }
.viewer-stage.is-dragging img { cursor: grabbing; }

.viewer-hint {
  flex: 0 0 auto; margin: 0; padding: 8px 14px 12px;
  text-align: center; color: #8fa3b3; font-size: .8125rem;
}

body.viewer-open { overflow: hidden; }

@media (max-width: 560px) {
  .deal-group > summary { top: 58px; }
  .viewer-hint { font-size: .75rem; }
  /* Two thumbnails to a row. A circular page is twice as tall as it is wide,
     so one per row put 3,000px of flyer between the hero and everything
     below it. They open in the viewer anyway. */
  .circ-pages { grid-template-columns: 1fr 1fr; gap: 14px; }
}