/* WordPress-specific layer on top of styles.css.
   Covers things the static site never had: the admin bar, block editor
   output (gallery, images, captions), and page-body rhythm. */

/* Admin bar pushes the utility bar down when logged in */
body.admin-bar .site { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site { top: 46px; } }

/* Page body: give block output the same rhythm the hand-written pages had */
.page-body > h2 { margin-top: 44px; }
.page-body > h2:first-child { margin-top: 0; }
.page-body > p { max-width: 68ch; }
.page-body > p + p { margin-top: 12px; }
.page-body > ul:not([class]), .page-body > ol:not([class]) { padding-left: 22px; max-width: 68ch; color: var(--indigo-soft); }
.page-body > .grid2 + .callout, .page-body > .callout + .callout { margin-top: 34px; }
.page-body figure { margin: 0; }
.page-body img { border-radius: var(--radius); }

/* Native gallery block, styled like the original gallery-grid */
/* Gallery. Identical to the original static layout: masonry columns, each
   photo at its own natural proportions, nothing cropped and nothing stretched.
   WordPress ships the block as a flex grid and "is-cropped" forces uniform
   tiles, so both are overridden rather than worked around. The one rule that
   matters is that the image gets width:100% and height:auto and no object-fit,
   which is what keeps its shape. */
.wp-block-gallery.has-nested-images,
.wp-block-gallery.has-nested-images.is-layout-flex,
.wp-block-gallery.has-nested-images.columns-2,
.wp-block-gallery.has-nested-images.columns-3,
.wp-block-gallery.has-nested-images.columns-4 {
  display: block !important;
  columns: 3 260px;
  column-gap: 16px;
  margin-top: 32px;
  gap: 0 !important;
}
.wp-block-gallery.has-nested-images figure.wp-block-image,
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  align-self: auto !important;
  break-inside: avoid;
  margin: 0 0 16px !important;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  position: relative;
  transition: transform .18s, box-shadow .18s;
}
.wp-block-gallery.has-nested-images figure.wp-block-image:hover {
  transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink);
}
/* width + height:auto only. Do NOT override aspect-ratio here: WordPress
   derives it from the img width/height attributes, and clearing it lets the
   raw height attribute through, so an unloaded portrait rendered 361x1024
   instead of 361x481. That was the stretching. */
.wp-block-gallery.has-nested-images figure.wp-block-image img,
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image img {
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 0;
}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 20px 14px 10px; text-align: left;
  max-height: none !important; overflow: visible;
  background: linear-gradient(rgba(32,38,76,0), rgba(32,38,76,.95));
  color: var(--cream); font-size: .82rem; font-weight: 700;
  opacity: 0; transition: opacity .2s;
}
.wp-block-gallery.has-nested-images figure.wp-block-image:hover figcaption { opacity: 1; }
@media (max-width: 560px) { .wp-block-gallery.has-nested-images { columns: 2 150px; } }

/* Single image block with caption */
.wp-block-image figcaption { font-size: .85rem; color: var(--indigo-soft); margin-top: 8px; }

/* Buttons block, in case Abby uses it */
.wp-block-button__link { font: inherit; }
.wp-block-button__link:not(.has-background) { background: var(--coral); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); border-radius: 999px; font-weight: 800; padding: 12px 22px; text-decoration: none; }

/* Pagination on archive fallback */
.pagination { margin-top: 32px; display: flex; gap: 8px; }
.pagination .page-numbers { padding: 8px 14px; border: 2px solid var(--ink); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 700; }
.pagination .page-numbers.current { background: var(--coral); }

/* Screen reader text WP expects */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── Lightbox ──────────────────────────────────────────────────── */
/* Gallery photos and event flyers open full size. The figures keep their
   own layout; only the zoom button is added inside them, so none of the
   masonry or aspect-ratio work above is disturbed. */
.has-lb { position: relative; }
.has-lb img { cursor: zoom-in; }

.lb-zoom {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 999px;
  background: var(--cream); color: var(--ink);
  cursor: zoom-in; opacity: 0; transition: opacity .18s;
}
.lb-zoom svg { width: 17px; height: 17px; }
.has-lb:hover .lb-zoom,
.lb-zoom:focus-visible { opacity: 1; }
/* Touch has no hover, so leave the affordance showing. */
@media (hover: none) { .lb-zoom { opacity: 1; } }

.lb {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  padding: 72px 64px 84px;
  /* Solid, not translucent. At 94% the cream page and its dark text still
     read through clearly enough to fight the caption on a phone. */
  background: #12162e;
}
.lb[hidden] { display: none; }

.lb-stage { margin: 0; display: grid; place-items: center; gap: 14px; max-width: 100%; max-height: 100%; }
.lb-stage img {
  max-width: 100%; max-height: calc(100vh - 190px);
  width: auto; height: auto; display: block;
  border: 3px solid var(--ink); border-radius: var(--radius);
  background: var(--cream);
}
.lb.is-loading .lb-stage img { opacity: .25; }
.lb-stage figcaption {
  color: var(--cream); font-size: .95rem; font-weight: 700;
  text-align: center; max-width: 62ch;
}
.lb-stage figcaption[hidden] { display: none; }

.lb-count {
  position: absolute; bottom: 26px; left: 0; right: 0;
  text-align: center; color: var(--cream); opacity: .75;
  font-size: .85rem; font-weight: 700;
}

.lb-close, .lb-nav {
  position: absolute; z-index: 2; padding: 0;
  border: 2px solid var(--cream); border-radius: 999px;
  background: rgba(20, 24, 50, .8); color: var(--cream);
  cursor: pointer; line-height: 1;
  display: grid; place-items: center;
}
.lb-close { top: 18px; right: 18px; width: 46px; height: 46px; font-size: 1.9rem; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 2.2rem; }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
.lb-nav[hidden] { display: none; }
.lb-close:hover, .lb-nav:hover { background: var(--coral); color: var(--ink); border-color: var(--ink); }
.lb :focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }

@media (max-width: 640px) {
  .lb { padding: 64px 12px 76px; }
  .lb-stage img { max-height: calc(100vh - 170px); }
  .lb-nav { width: 42px; height: 42px; font-size: 1.8rem; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-zoom { transition: none; }
}

/* ── Embedded Little Green Light forms ─────────────────────────── */
/* LGL writes an iframe with its own fixed width. Left alone it overflows
   on a phone, so it is made to fill whatever it is given. */
.lgl-form {
  margin-top: 26px;
  background: var(--white); border: 2px solid var(--ink);
  border-radius: var(--radius); box-shadow: 5px 5px 0 var(--ink);
  padding: 20px; overflow: hidden;
}
.lgl-form iframe { width: 100% !important; max-width: 100% !important; border: 0; display: block; min-height: 620px; }
.lgl-form p { color: var(--indigo-soft); }
@media (max-width: 560px) { .lgl-form { padding: 14px; } }

/* ── Embedded map ──────────────────────────────────────────────── */
/* Sized by ratio so it matches the card beside it at any width and does
   not collapse to nothing on a phone. */
.map-embed {
  border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--ink); overflow: hidden;
  margin-top: 22px; background: var(--cream-deep);
  /* Full width of the page, and tall enough to show the surrounding
     streets rather than just the pin. */
  height: clamp(300px, 40vw, 540px);
}
/* Address and directions sit above the map rather than beside it, so the
   map itself gets the whole width. */
.find-us {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 18px; margin-top: 14px;
}
.find-us > div { max-width: 62ch; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }