/* =============================================================
   Skippack Village — Business Profile Page
   -------------------------------------------------------------
   Production translation of the redesign handoff (Claude Design,
   2026-06-05). Bleed hero + 2-col body with a sticky contact card.
   Shipped configuration:
     hero = bleed · accent = brass · corners = classical · card = sticky
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Great+Vibes&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0..1,0&display=block');

:root {
  --green-900:#16291f;
  --green-800:#1f3a2e;
  --green-700:#2c4d3c;
  --espresso:#2b2620;
  --brick:#6e2f1c;

  --brass-500:#a98438;
  --brass-400:#c2a05a;
  --brass-600:#8a6a26;

  --bg-sage-cream:#edefe0;
  --cream-50:#fbf7ee;
  --cream-100:#f6f1e4;
  --cream-200:#ece4d2;
  --cream-300:#ddd2bb;
  --border:#ddd2bb;
  --border-strong:#cbbfa6;
  --border-on-dark:rgba(243,237,224,0.18);

  --ink-900:#23201b;
  --ink-700:#4a443b;
  --ink-500:#7a7264;
  --fg2:#4a443b;
  --fg3:#7a7264;
  --paper-on-dark:#f3ede0;
  --fg-on-dark-2:rgba(243,237,224,0.72);

  --positive:#3c6450;
  --slate:#5f6b72;

  --t-accent:#a98438;
  --t-accent-hover:#c2a05a;
  --t-accent-press:#8a6a26;
  --t-radius:8px;
  --t-radius-lg:12px;

  --font-sans:'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-script:'Great Vibes', cursive;
  --font-display:'Cinzel', 'Trajan Pro', Georgia, serif;

  --shadow-sm:0 1px 2px rgba(35,32,27,.06), 0 1px 3px rgba(35,32,27,.08);
  --shadow-md:0 4px 14px rgba(35,32,27,.10);
  --shadow-lg:0 18px 48px rgba(22,41,31,.18);
}

/* ===== Business-profile page scope =====
   All these rules apply only when body.sv-bp is set (added via PHP body_class
   filter when single-business.php renders). Keeps the theme's other pages
   unaffected. */
body.sv-bp {
  background:var(--bg-sage-cream);
  color:var(--ink-900);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  margin:0;
}
.sv-bp * { box-sizing:border-box; }
.sv-bp img { display:block; max-width:100%; }
.sv-bp button { font-family:inherit; cursor:pointer; }
.sv-bp a { color:inherit; text-decoration:none; }
.sv-bp .material-symbols-rounded {
  font-family:'Material Symbols Rounded'; font-weight:normal;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  line-height:1; letter-spacing:normal; text-transform:none;
  white-space:nowrap; font-feature-settings:'liga';
  vertical-align:middle;
}

.sv-bp .wrap { max-width:1180px; margin:0 auto; padding:0 32px; }

/* ============ Buttons ============ */
.sv-bp .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:700; font-size:13.5px; letter-spacing:.04em;
  padding:13px 22px; border-radius:var(--t-radius);
  border:1.5px solid transparent; transition:.18s; white-space:nowrap;
}
.sv-bp .btn .material-symbols-rounded { font-size:19px; }
.sv-bp .btn--primary { background:var(--t-accent); color:#fff; }
.sv-bp .btn--primary:hover { background:var(--t-accent-hover); color:#fff; }
.sv-bp .btn--primary:active { transform:translateY(1px); }
.sv-bp .btn--outline { background:transparent; color:var(--ink-900); border-color:var(--border-strong); }
.sv-bp .btn--outline:hover { background:var(--cream-100); border-color:var(--ink-500); }
.sv-bp .btn--onphoto { background:rgba(255,255,255,.94); color:var(--green-900); backdrop-filter:blur(4px); }
.sv-bp .btn--onphoto:hover { background:#fff; }
.sv-bp .btn--block { width:100%; }

.sv-bp .eyebrow { font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--t-accent); }
.sv-bp .rule { width:46px; height:2px; background:var(--t-accent); border:0; margin:14px 0; }
.sv-bp .sec-title {
  font-family:var(--font-serif); font-weight:600;
  font-size:30px; color:var(--ink-900); margin:0;
  letter-spacing:.005em; text-transform:none; line-height:1.15;
}

/* ============ Preview banner override (we already have one) ============ */
.sv-bp .sv-preview-banner {
  position:sticky; top:0; z-index:50;
  background:#fbf0d6; color:#8a6500;
  text-align:center; padding:10px 16px;
  font-size:13.5px; font-weight:600;
  border-bottom:1px solid #e7d8b4;
}
.sv-bp .sv-preview-banner a { color:var(--brick); text-decoration:underline; margin-left:8px; }

/* ============ Breadcrumb ============ */
/* z-index: site <header> is position:absolute z:50 and overlays the breadcrumb,
   silently stealing clicks. Raise the crumb above it. */
/* Breadcrumb styles + the absolute-header push now live in the global
   sv_render_breadcrumb() output in functions.php (Tailwind utilities +
   one tiny inline <style> block), so the strip works on every template,
   not just business profiles. */

/* ============ HERO (bleed) ============ */
.sv-bp .hero { position:relative; }
.sv-bp .hero__band { height:440px; position:relative; overflow:hidden; background:var(--green-800); }
.sv-bp .hero__band img { width:100%; height:100%; object-fit:cover; }
.sv-bp .hero__band::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,41,31,.18) 0%, rgba(22,41,31,.04) 40%, rgba(22,41,31,.78) 100%);
}
/* Hero plaque was 128px — bumped to 180px so logos read clearly at the
   distance they sit from the storefront name. Negative top-margin grows
   in proportion so the bar still tucks neatly under the band. */
.sv-bp .hero__bar { position:relative; margin-top:-200px; z-index:2; }
.sv-bp .hero__row { display:flex; align-items:flex-end; gap:28px; }
.sv-bp .hero__plaque {
  width:180px; height:180px; border-radius:999px;
  background:#fff; border:5px solid #fff; box-shadow:var(--shadow-lg);
  display:grid; place-items:center; overflow:hidden; padding:18px; flex:none;
}
.sv-bp .hero__plaque img { max-width:100%; max-height:100%; object-fit:contain; }
.sv-bp .hero__id { padding-bottom:8px; flex:1; min-width:0; }
.sv-bp .hero__cat { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.sv-bp .hero__cat .pill {
  background:var(--t-accent); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; padding:4px 11px; border-radius:999px;
}
.sv-bp .hero__cat .sub { font-size:13px; color:rgba(255,255,255,.85); font-weight:600; letter-spacing:.02em; }
.sv-bp .hero__name {
  font-family:var(--font-serif); font-weight:600;
  font-size:52px; line-height:1; color:#fff;
  margin:0; text-transform:none; letter-spacing:.005em;
}
.sv-bp .hero__actions { display:flex; gap:10px; padding-bottom:14px; }
.sv-bp .hero__actions .btn--primary { background:rgba(255,255,255,.94); color:var(--green-900); }
.sv-bp .hero__actions .btn--primary:hover { background:#fff; }
.sv-bp .hero__actions .btn--outline { color:#fff; border-color:rgba(255,255,255,.6); }
.sv-bp .hero__actions .btn--outline:hover { background:rgba(255,255,255,.1); border-color:#fff; color:#fff; }

.sv-bp .status {
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700; padding:5px 12px;
  border-radius:999px; letter-spacing:.02em; white-space:nowrap;
}
.sv-bp .status--open { background:color-mix(in srgb, var(--positive) 16%, #fff); color:var(--positive); }
.sv-bp .status--closed { background:var(--cream-200); color:var(--fg2); }
.sv-bp .status .dot { width:7px; height:7px; border-radius:999px; background:currentColor; }

/* Google rating pill in the hero — appears next to the open/closed status
   when SV_GOOGLE_PLACES_API_KEY + business_google_place_id are both set. */
.sv-bp .g-rating {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.94); color:var(--ink-900);
  padding:5px 12px; border-radius:999px;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
  text-decoration:none; transition:.16s;
}
.sv-bp .g-rating:hover { background:#fff; transform:translateY(-1px); }
.sv-bp .g-rating__star { color:#fbbf24; font-size:16px; font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24; }
.sv-bp .g-rating__num { font-weight:800; }
.sv-bp .g-rating__count { color:var(--fg3); font-weight:500; }
.sv-bp .g-rating__google { color:var(--fg3); font-weight:500; font-size:11.5px; }

/* ============ BODY GRID ============ */
.sv-bp .body { padding:44px 0 72px; }
.sv-bp .body__grid { display:grid; grid-template-columns:1fr 372px; gap:40px; align-items:start; }
.sv-bp .block+.block { margin-top:48px; }
.sv-bp .block__head { margin-bottom:20px; }

/* About */
.sv-bp .about__tagline {
  font-family:var(--font-serif); font-weight:600;
  font-size:30px; line-height:1.15; color:var(--ink-900);
  margin:0 0 16px; max-width:22ch;
}
.sv-bp .about p {
  font-size:17px; line-height:1.7;
  color:var(--fg2); margin:0 0 14px; max-width:60ch;
}
.sv-bp .about__sign {
  font-family:var(--font-script); font-size:34px;
  color:var(--t-accent); line-height:1; margin-top:6px;
}

/* Rendered Gutenberg post body (legacy "about" copy on most listings) */
.sv-bp .body-content { max-width:60ch; color:var(--fg2); }
.sv-bp .body-content > *:first-child { margin-top:0; }
.sv-bp .body-content > *:last-child { margin-bottom:0; }
.sv-bp .body-content p {
  font-size:17px; line-height:1.7;
  color:var(--fg2); margin:0 0 14px;
}
.sv-bp .body-content h1,
.sv-bp .body-content h2,
.sv-bp .body-content h3 {
  font-family:var(--font-serif); font-weight:600;
  color:var(--ink-900); line-height:1.15; margin:24px 0 12px;
}
.sv-bp .body-content h1, .sv-bp .body-content h2 { font-size:28px; }
.sv-bp .body-content h3 { font-size:22px; }
.sv-bp .body-content a { color:var(--t-accent); text-decoration:underline; }
.sv-bp .body-content ul,
.sv-bp .body-content ol { margin:0 0 14px 1.25em; padding:0; }
.sv-bp .body-content li { font-size:17px; line-height:1.7; margin:0 0 6px; }
.sv-bp .body-content img { max-width:100%; height:auto; border-radius:var(--t-radius); margin:14px 0; }
.sv-bp .body-content blockquote {
  border-left:3px solid var(--t-accent);
  padding:6px 0 6px 16px; margin:18px 0;
  font-style:italic; color:var(--fg2);
}
.sv-bp .body-content .has-text-align-center { text-align:center; }
.sv-bp .body-content .has-text-align-right  { text-align:right; }
.sv-bp .body-content .has-text-align-left   { text-align:left; }
/* Center-aligned bodies (Hazel Mac pattern) get wider line lengths */
.sv-bp .body-content:has(.has-text-align-center) { max-width:none; text-align:center; }
.sv-bp .body-content:has(.has-text-align-center) p { max-width:none; }

/* Gallery */
.sv-bp .gallery {
  display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr;
  gap:12px; height:380px;
}
.sv-bp .gallery a {
  display:block; border-radius:var(--t-radius-lg); overflow:hidden;
  position:relative; background:var(--cream-200); cursor:zoom-in;
}
.sv-bp .gallery a:first-child { grid-row:1 / span 2; }
.sv-bp .gallery img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.sv-bp .gallery a:hover img { transform:scale(1.05); }
.sv-bp .gallery__more {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20, 20, 20, 0.55);
  color:#fff; font-family:var(--font-serif); font-weight:600;
  font-size:18px; letter-spacing:.02em;
  pointer-events:none; transition:background .2s;
}
.sv-bp .gallery a:hover .gallery__more { background:rgba(20, 20, 20, 0.65); }

/* Lightbox modal */
html.sv-lightbox-open { overflow:hidden; }
.sv-lightbox {
  position:fixed; inset:0; z-index:9999;
  background:rgba(15, 15, 15, 0.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s ease;
  padding:24px;
}
.sv-lightbox.is-open { opacity:1; }
.sv-lightbox__stage {
  margin:0; max-width:min(1280px, 92vw); max-height:88vh;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  position:relative;
}
.sv-lightbox__img {
  max-width:100%; max-height:84vh;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 18px 60px rgba(0,0,0,0.6);
  background:#0c0c0c;
  transition:opacity .15s ease;
}
.sv-lightbox__img.is-loading { opacity:0.35; }
.sv-lightbox__caption {
  color:rgba(255,255,255,0.85); font-size:14px;
  max-width:60ch; text-align:center; line-height:1.5;
}
.sv-lightbox__counter {
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,0.75); font-size:13px; letter-spacing:.05em;
  font-weight:500;
}
.sv-lightbox__close,
.sv-lightbox__nav {
  position:absolute; background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:background .15s ease, transform .15s ease;
  padding:0;
}
.sv-lightbox__close:hover,
.sv-lightbox__nav:hover { background:rgba(255,255,255,0.18); }
.sv-lightbox__close {
  top:18px; right:18px; width:44px; height:44px;
}
.sv-lightbox__close .material-symbols-rounded { font-size:24px; }
.sv-lightbox__nav {
  top:50%; transform:translateY(-50%); width:52px; height:52px;
}
.sv-lightbox__nav:hover { transform:translateY(-50%) scale(1.06); }
.sv-lightbox__nav .material-symbols-rounded { font-size:30px; }
.sv-lightbox__nav--prev { left:18px; }
.sv-lightbox__nav--next { right:18px; }

@media (max-width:680px) {
  .sv-lightbox { padding:12px; }
  .sv-lightbox__nav { width:44px; height:44px; }
  .sv-lightbox__nav--prev { left:8px; }
  .sv-lightbox__nav--next { right:8px; }
  .sv-lightbox__close { top:10px; right:10px; }
  .sv-lightbox__counter { top:14px; }
}

/* Nearby */
.sv-bp .nearby { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.sv-bp .ncard {
  background:var(--cream-50); border:1px solid var(--border);
  border-radius:var(--t-radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:.2s; display:block;
}
.sv-bp .ncard:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.sv-bp .ncard__img { height:118px; overflow:hidden; background:var(--cream-200); }
.sv-bp .ncard__img img { width:100%; height:100%; object-fit:cover; }
.sv-bp .ncard__b { padding:15px 16px 18px; }
.sv-bp .ncard__cat { font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--t-accent); }
.sv-bp .ncard__name { font-family:var(--font-serif); font-weight:600; font-size:18px; color:var(--ink-900); margin:5px 0 6px; line-height:1.15; }
.sv-bp .ncard__addr { font-size:12.5px; color:var(--fg3); display:flex; gap:6px; align-items:flex-start; }
.sv-bp .ncard__addr .material-symbols-rounded { font-size:15px; margin-top:1px; }

/* Events */
.sv-bp .events { display:flex; flex-direction:column; gap:12px; }
.sv-bp .events-divider {
  display:flex; align-items:center; gap:14px;
  margin:24px 0 8px;
  color:var(--fg3); font-size:13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
}
.sv-bp .events-divider::before,
.sv-bp .events-divider::after {
  content:''; flex:1; height:1px; background:var(--border);
}
.sv-bp .erow {
  display:flex; align-items:center; gap:18px;
  background:var(--cream-50); border:1px solid var(--border);
  border-radius:var(--t-radius-lg); padding:16px 18px; transition:.2s;
}
.sv-bp .erow:hover { border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.sv-bp .datebox {
  width:58px; height:58px; border-radius:var(--t-radius);
  background:var(--espresso); color:#fff; flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
}
.sv-bp .datebox .m { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-400); font-weight:800; }
.sv-bp .datebox .d { font-family:var(--font-serif); font-size:24px; font-weight:600; margin-top:3px; }
.sv-bp .erow__main { flex:1; min-width:0; }
.sv-bp .erow__name { font-family:var(--font-serif); font-weight:600; font-size:19px; color:var(--ink-900); }
.sv-bp .erow__meta { font-size:13px; color:var(--fg3); margin-top:2px; }
.sv-bp .erow .material-symbols-rounded { color:var(--t-accent); font-size:22px; }

/* ============ Sticky Contact Card ============ */
.sv-bp .aside { position:sticky; top:104px; }
.sv-bp .aside.inline { position:static; }
.sv-bp .ccard {
  background:var(--cream-50); border:1px solid var(--border);
  border-radius:var(--t-radius-lg); overflow:hidden;
  box-shadow:var(--shadow-md);
}
.sv-bp .ccard__sec { padding:22px 24px; }
.sv-bp .ccard__sec+.ccard__sec { border-top:1px solid var(--border); }
.sv-bp .ccard__h { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin:0 0 14px; }
.sv-bp .crow {
  display:flex; align-items:flex-start; gap:13px;
  padding:8px 0; font-size:14.5px; color:var(--ink-900);
}
.sv-bp .crow .material-symbols-rounded { font-size:20px; color:var(--t-accent); flex:none; margin-top:1px; }
.sv-bp .crow a { color:inherit; }
.sv-bp .crow a:hover { color:var(--t-accent-press); }
.sv-bp .crow .lbl { font-size:11.5px; color:var(--fg3); display:block; margin-bottom:1px; letter-spacing:.02em; }
.sv-bp .ccard .socials { display:flex; gap:10px; margin-top:14px; }
.sv-bp .ccard .socials a {
  width:36px; height:36px; border:1px solid var(--border);
  border-radius:var(--t-radius); display:grid; place-items:center;
  transition:.16s;
}
.sv-bp .ccard .socials a:hover { background:var(--cream-100); transform:translateY(-2px); }
.sv-bp .ccard .socials img { width:18px; height:18px; }
.sv-bp .ccard .socials a:hover img { transform:none; }

/* Hours */
.sv-bp .hours { display:flex; flex-direction:column; gap:1px; }
.sv-bp .hrow { display:flex; justify-content:space-between; align-items:center; font-size:14px; padding:7px 0; color:var(--fg2); }
.sv-bp .hrow .d { font-weight:600; color:var(--ink-700); }
.sv-bp .hrow .t { font-variant-numeric:tabular-nums; }
.sv-bp .hrow.closed .t { color:var(--fg3); }
.sv-bp .hrow.today { margin:0 -12px; padding:7px 12px; background:color-mix(in srgb, var(--t-accent) 12%, transparent); border-radius:var(--t-radius); }
.sv-bp .hrow.today .d { color:var(--t-accent-press); font-weight:800; }
.sv-bp .hrow.today .t { font-weight:700; color:var(--ink-900); }

/* Map — Google Maps embed iframe (no API key required). The iframe is
   interactive (zoom, pan, click on locations) and shows Google's own pin
   so we no longer overlay one. Falls back gracefully to a soft cream
   gradient if the iframe is blocked. */
.sv-bp .cmap {
  display:block; position:relative; height:180px;
  background:linear-gradient(135deg, #dfe6d6, #cdd8c2);
  overflow:hidden;
}
.sv-bp .cmap iframe { width:100%; height:100%; border:0; display:block; }
.sv-bp .cmap__addr {
  padding:14px 24px; font-size:13px; color:var(--fg2);
  line-height:1.5; border-top:1px solid var(--border);
}
.sv-bp .cmap__addr b { color:var(--ink-900); font-weight:700; }

/* ============ Responsive ============ */
@media (max-width:940px) {
  .sv-bp .body__grid { grid-template-columns:1fr; }
  .sv-bp .aside { position:static; }
  .sv-bp .nearby { grid-template-columns:1fr; }
  .sv-bp .hero__band { height:340px; }
  .sv-bp .hero__bar { margin-top:-110px; }
  .sv-bp .hero__name { font-size:40px; }
  .sv-bp .hero__row { flex-wrap:wrap; gap:16px; }
  .sv-bp .hero__actions { padding-bottom:0; width:100%; }
  .sv-bp .hero__actions .btn { flex:1; }
  .sv-bp .gallery { grid-template-columns:1fr 1fr; height:auto; grid-template-rows:none; }
  .sv-bp .gallery a:first-child { grid-row:auto; grid-column:1 / span 2; height:220px; }
  .sv-bp .gallery a { height:140px; }
}