:root {
  --navy: #1B2A4A;
  --navy-deep: #12203A;
  --cream: #FAF6EC;
  --cream-card: #F0E9D8;
  --gold: #B98B34;
  --gold-dark: #96702A;
  --gold-light: #E4C583;
  --ink: #1B2A4A;
  --ink-soft: #5C6B87;
  --line: rgba(27,42,74,0.12);
  --white: #FFFFFF;
  --card-shadow: 0 1px 2px rgba(27,42,74,0.06), 0 8px 24px -12px rgba(27,42,74,0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Karla', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

h1, h2, h3, .serif { font-family: 'Cormorant Garamond', serif; }

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

/* ---------- Navbar ---------- */
/* ---- Layout-shift guards -------------------------------------------------
   The nav and footer are injected by script AFTER the HTML paints. While their
   containers were empty they had zero height, so the moment the nav appeared it
   shoved the entire page down — that was the single biggest layout shift on the
   site. Reserving their final height up front keeps everything still. */
#site-nav { min-height: 77px; }          /* 76px bar + 1px border */
#site-footer { min-height: 128px; }      /* 34+34 padding + content + top margin */

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250,246,236,0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.navbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.navbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.navbar .brand svg { width: 34px; height: 34px; }
.navbar .brand-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 21px;
  color: var(--navy);
  line-height: 1.05;
}
.navbar nav {
  display: flex;
  gap: 30px;
  align-items: center;
}
.navbar nav a {
  text-decoration: none;
  color: var(--navy);
  font-size: 14.5px;
  font-weight: 600;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}
.navbar nav a:hover, .navbar nav a.active { opacity: 1; }

/* Mobile menu toggle (hamburger) — hidden on desktop */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--navy);
  padding: 6px;
  line-height: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-gold { background: var(--gold); color: var(--white); }
.btn-gold:hover { background: var(--gold-dark); }
.btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn:active { transform: scale(0.98); }
.btn-block { display: block; width: 100%; text-align: center; }

/* ---------- Hero ---------- */
.hero { padding: 64px 0 80px; }
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hero h1 {
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 600;
  line-height: 1.05;
  margin: 16px 0 20px;
  color: var(--navy);
}
.hero p.lead { font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: 46ch; margin: 0 0 30px; }
.hero-img {
  width: 100%;
  aspect-ratio: 4/3.2;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: var(--card-shadow);
}
.hero .ph-frame { aspect-ratio: 4/3.2; border-radius: 6px; box-shadow: var(--card-shadow); }
.hero .ph-frame img { aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.hero-search {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-search input {
  flex: 1 1 240px;
  padding: 14px 18px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  outline: none;
  background: var(--white);
}
.hero-search input:focus { border-color: var(--gold); }

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }

  .nav-toggle { display: block; }

  /* Nav becomes a full-width dropdown panel, shown when toggled open */
  .navbar nav {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 0 16px;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 26px -14px rgba(27,42,74,0.4);
  }
  .navbar nav.open { display: flex; }
  .navbar nav a { padding: 12px 32px; opacity: 1; }
  .navbar nav span { padding: 10px 32px; }
  .navbar nav a.btn, .navbar nav .btn-gold {
    margin: 10px 32px 4px;
    text-align: center;
  }
}

/* ---------- Section headings ---------- */
.section { padding: 64px 0; }
.section-title { text-align: center; margin-bottom: 40px; }
.section-title h2 { font-size: 38px; font-weight: 600; color: var(--navy); margin: 10px 0 0; }

/* ---------- Category circles ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 34px;
  text-align: center;
}
.cat-grid a { text-decoration: none; }
.cat-circle {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--card-shadow);
  transition: transform 0.18s ease;
}
.cat-circle-wrap .ph-frame { aspect-ratio: 1; border-radius: 50%; box-shadow: var(--card-shadow); transition: transform 0.18s ease; }
.cat-grid a:hover .cat-circle,
.cat-grid a:hover .cat-circle-wrap .ph-frame { transform: translateY(-4px); }
.cat-circle-wrap .ph-frame img { aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.cat-label {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 21px;
  color: var(--navy);
  margin-top: 14px;
}

/* ---------- Photo frame (clips zoomed images) ----------
   A fixed-shape box that holds a vendor/site photo. overflow:hidden clips the
   image when it's zoomed (scaled) past the frame; the cream fill shows softly
   at the edges when a photo is zoomed OUT to reveal more of it. */
.ph-frame { display: block; width: 100%; overflow: hidden; position: relative; background: var(--cream-card); }
.ph-frame > img { display: block; width: 100%; height: 100%; }

/* ---------- Listing cards ---------- */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 44px 32px;
}
/* Phone button that expands to Call / Text / WhatsApp actions. */
.phone-menu { display: inline-block; position: relative; }
.phone-menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.phone-menu > summary::-webkit-details-marker { display: none; }
.phone-menu[open] > summary { border-color: var(--gold); }
.phone-actions {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px -12px rgba(27,42,74,0.4); overflow: hidden; min-width: 190px;
}
.phone-actions a {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  font-family: 'Karla', sans-serif; font-size: 14.5px; color: var(--navy); text-decoration: none;
}
.phone-actions a + a { border-top: 1px solid var(--line); }
.phone-actions a:hover { background: rgba(185,139,52,0.10); }

/* Featured row with fewer than 3 cards: center them instead of pinning left. */
#featuredGrid.is-centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 44px 32px;
}
#featuredGrid.is-centered > * {
  flex: 0 1 340px;
  max-width: 360px;
}
.listing-card {
  background: var(--cream-card);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.listing-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px -6px rgba(27,42,74,0.3); }
.listing-card .ph-frame { aspect-ratio: 4/3; }
.listing-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.listing-card .ph-frame img { aspect-ratio: auto; }
/* The clickable region of a card. Buttons must live OUTSIDE this link —
   interactive elements can't legally nest inside an anchor. */
.listing-card-link { display: block; text-decoration: none; color: inherit; }
.listing-card-actions { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
/* Actions sit in their own block below the link, so the link's body doesn't
   need its full bottom padding any more. */
.listing-card-link .listing-card-body { padding-bottom: 14px; }
.listing-card-body { padding: 18px 20px 22px; }
.listing-card-body .eyebrow { display: block; margin-bottom: 8px; }
.listing-card-body h3 { font-size: 22px; font-weight: 600; margin: 0 0 8px; color: var(--navy); }
.listing-card-body p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 16px; }
.listing-stars { font-size: 13px; color: var(--gold-dark); margin-bottom: 6px; }
/* "Want to be featured" invite that fills empty featured slots. */
.feat-promo {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 2px dashed var(--gold); background: var(--cream);
}
.feat-promo-body { padding: 30px 22px; }
.feat-promo-star { font-size: 26px; color: var(--gold); margin-bottom: 8px; }
.feat-promo h3 { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--navy); margin: 0 0 8px; }
.feat-promo p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 14px; }
.feat-promo-contact { display: block; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--gold-dark); text-decoration: none; margin: 2px 0; }
.feat-promo-contact:hover { text-decoration: underline; }
.badge-free {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--navy); color: var(--white);
  padding: 3px 9px; border-radius: 999px; margin-bottom: 8px;
}

/* ---------- About band ---------- */
.about-band { background: var(--navy-deep); color: var(--white); padding: 80px 0; }
.about-band h2 { font-size: 42px; font-weight: 600; text-align: center; margin: 0 0 22px; }
.about-band p { font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,0.82); max-width: 68ch; margin: 0 auto; text-align: center; }

/* ---------- Search / filter (directory page) ---------- */
.controls { margin-bottom: 10px; }
.search-row { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.search-box { flex: 1 1 320px; position: relative; }
.search-box input {
  width: 100%; padding: 14px 18px 14px 42px;
  border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--white); font-size: 15px; outline: none;
}
.search-box input:focus { border-color: var(--gold); }
.search-box svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--ink-soft); }
.loc-select {
  padding: 14px 38px 14px 16px; border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--white); font-size: 15px; outline: none; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B2A4A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
/* Also script-filled: hold their space so the results below don't jump. */
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; min-height: 80px; }
@media (max-width: 700px) { .pill-row { min-height: 124px; } }
/* Gemach sub-filters: a lighter, indented second row under the categories. */
.sub-pill-row { min-height: 0; margin: -18px 0 26px; padding-left: 14px; border-left: 2px solid var(--gold); }
.sub-pill-row[hidden] { display: none; }
.sub-pill-row .pill { font-size: 11.5px; padding: 6px 13px; }
@media (max-width: 700px) { .sub-pill-row { min-height: 0; } }
.pill {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  padding: 8px 15px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--white); color: var(--ink-soft); cursor: pointer;
}
.pill.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.empty-state { text-align: center; padding: 70px 20px; color: var(--ink-soft); }

/* ---------- Advertisements (admin-managed, hidden until set) ---------- */
.ad-leaderboard { display: block; position: relative; border-radius: 12px; overflow: hidden; margin: 0 0 30px; box-shadow: var(--card-shadow); }
.ad-leaderboard img { display: block; width: 100%; height: auto; }
.ad-tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(27,42,74,0.85); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
}
.ad-card { position: relative; border: 2px solid var(--gold); }
.ad-card .ad-tag { background: var(--gold); left: auto; right: 10px; }

/* Checkbox pickers (categories / locations / simchas in the admin forms).
   A plain <select multiple> hides selected rows once the list scrolls; a
   checkbox grid keeps every option and its state visible at once. */
.chk-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.chk-group label {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border: 1.5px solid var(--line); border-radius: 999px;
  font-family: 'Karla', sans-serif; font-size: 13.5px; color: var(--navy);
  cursor: pointer; user-select: none; background: var(--white);
  transition: border-color .12s, background .12s;
}
.chk-group label:hover { border-color: var(--gold); }
.chk-group input { width: auto; margin: 0; cursor: pointer; }
.chk-group label:has(input:checked) {
  border-color: var(--gold); background: rgba(185,139,52,0.12); font-weight: 700;
}
.chk-empty { font-size: 13px; color: var(--ink-soft); margin: 2px 0 0; }

/* ---------- Vendor detail page ---------- */
.vendor-hero { padding: 40px 0 10px; }
.vendor-hero img { width: 100%; max-height: 380px; object-fit: cover; border-radius: 10px; box-shadow: var(--card-shadow); }
.vendor-hero .ph-frame { width: 340px; max-width: 100%; aspect-ratio: 4/3; border-radius: 10px; box-shadow: var(--card-shadow); }
.vendor-hero .ph-frame img { aspect-ratio: auto; max-height: none; border-radius: 0; box-shadow: none; }
@media (max-width: 420px) { .vendor-hero .ph-frame { width: 100%; } }
.vendor-meta { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin: 18px 0; }
.vendor-tags { display: flex; gap: 8px; flex-wrap: wrap; }
/* Instagram / website links on a vendor page — shown only when the vendor
   actually has them. */
.vendor-links { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 4px; }
.vendor-social {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px;
  color: var(--navy); text-decoration: none; font-size: 13px;
  font-family: 'Karla', sans-serif; transition: border-color .12s, color .12s;
}
.vendor-social:hover { border-color: var(--gold); color: var(--gold-dark); }
.vendor-social svg { width: 17px; height: 17px; display: block; }
.tag {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--navy);
  background: rgba(27,42,74,0.08); padding: 3px 10px; border-radius: 999px;
}
.stars-large { font-size: 20px; color: var(--gold); letter-spacing: 2px; }
.review-card { border-bottom: 1px solid var(--line); padding: 18px 0; }
.review-card .review-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.review-card .review-name { font-weight: 700; font-size: 14.5px; }
.review-card .review-date { font-size: 12px; color: var(--ink-soft); }
.review-card .review-stars { color: var(--gold); font-size: 14px; margin-bottom: 6px; }
.review-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }

.review-form {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 26px; margin-top: 20px;
}
.review-form label { display: block; font-size: 13px; font-weight: 700; margin: 14px 0 6px; color: var(--navy); }
.review-form label:first-child { margin-top: 0; }
.review-form input, .review-form textarea, .review-form select {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 6px;
  font-family: 'Karla', sans-serif; font-size: 14.5px; outline: none; resize: vertical;
}
.review-form input:focus, .review-form textarea:focus, .review-form select:focus { border-color: var(--gold); }
.star-picker { display: flex; gap: 6px; font-size: 26px; cursor: pointer; user-select: none; }
.star-picker span { color: #D8D2C4; transition: color 0.1s ease; }
.star-picker span.filled { color: var(--gold); }
.form-status { font-size: 13.5px; margin-top: 10px; }
.form-status.ok { color: #4A7A5C; }
.form-status.err { color: #A2453B; }

/* ---------- Recommend card (vendor page) ---------- */
.rec-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 36px 26px 30px;
  text-align: center;
  box-shadow: var(--card-shadow);
}
.rec-badge {
  width: 58px; height: 58px; margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(185,139,52,0.12);
  color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.rec-badge svg { width: 27px; height: 27px; }
.rec-count {
  font-family: 'Cormorant Garamond', serif;
  font-size: 54px; font-weight: 600; line-height: 1;
  color: var(--navy);
}
.rec-count[hidden] { display: none; }
.rec-label {
  font-size: 15.5px; color: var(--ink-soft);
  margin: 10px 0 24px; line-height: 1.5;
}
.rec-btn { min-width: 250px; }
.rec-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); margin: 16px 0 0;
}
/* When it's your own recommendation the card shifts from gold to green. */
.rec-card.is-mine .rec-badge { background: rgba(74,122,92,0.16); color: #3E6B4E; }
.rec-card.is-mine .rec-count { color: #3E6B4E; }

@media (max-width: 480px) {
  .rec-card { padding: 28px 18px 24px; }
  .rec-count { font-size: 44px; }
  .rec-btn { min-width: 0; width: 100%; }
}

/* ---------- About page ---------- */
.about-page-body { padding: 50px 0 70px; }
.about-page-body h2 { font-size: 30px; color: var(--navy); margin: 40px 0 14px; }
.about-page-body p { font-size: 16px; line-height: 1.75; color: var(--ink-soft); max-width: 68ch; }

/* ---------- Modal dialogs (featured picker, category manager, vendor editor) ----------
   These were previously declared inside index.html's <style> block, so any modal
   opened from another page rendered with no styling at all. */
.feat-overlay {
  position: fixed; inset: 0; background: rgba(18,32,58,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.feat-modal {
  background: var(--cream); max-width: 480px; width: 100%;
  border-radius: 12px; padding: 24px; max-height: 88vh; overflow: auto;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.5);
}
.feat-modal h3 {
  font-family: 'Cormorant Garamond', serif; font-size: 24px;
  color: var(--navy); margin: 0 0 4px;
}
.feat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 6px; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.feat-row input { width: auto; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); padding: 34px 0; margin-top: 20px; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
footer .foot-brand { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--navy); }
footer .foot-note { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--ink-soft); }

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .section { padding: 44px 0; }
}