/* ============================================================
   WordPress-only additions. The design stylesheet
   (assets/css/style.css) is an untouched copy of the original
   static site's CSS — rules here only cover WordPress-specific
   states that the static site never had.
   ============================================================ */

/* Keep the sticky header below the admin bar for logged-in users. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* Optional hero photo (when an editor replaces the built-in illustration). */
.hero-art > img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

/* Optional custom logo image (Appearance → Customize → Site identity). */
.logo .custom-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: none;
}

/* Real photos inside gallery tiles (documented pattern from the README). */
.tile-art > img,
.lightbox-art .tile-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Optional photo replacing the drawn story portrait (Home page). */
.story-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Optional photo replacing the initials avatar (team cards). */
.avatar--photo {
  overflow: hidden;
  background: var(--sky-soft);
}
.avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
}

/* A lone team card (e.g. the founder) gets a larger, featured layout. */
.team-card--solo {
  padding: clamp(2rem, 4vw, 3rem);
}
.team-card--solo .avatar {
  width: 200px;
  height: 200px;
  margin-bottom: 1.4rem;
}
.team-card--solo h3 {
  font-size: 1.6rem;
}
.team-card--solo .role {
  font-size: 0.95rem;
}
.team-card--solo p {
  font-size: 1.08rem;
}

/* Optional image replacing the drawn map background (Contact page). */
img.map-doodle {
  object-fit: cover;
}

/* Generic content pages (page.php / index.php / 404) reuse design classes;
   give plain running text comfortable width. */
.cutea-plain-content { max-width: 820px; margin-inline: auto; }

/* Topic albums: each topic shows one main picture; clicking it opens the
   whole album in the lightbox viewer. */
.gallery-grid--album { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
.gallery-grid--album .tile-art { height: clamp(240px, 42vw, 400px); }

/* The album viewer shows whole photos (no cropping) on an ink backdrop. */
.lightbox-card { width: min(860px, 100%); }
.lightbox-card .tile-art { height: min(60vh, 540px); background: var(--ink); }
.lightbox-card .tile-art::before,
.lightbox-card .tile-art::after { display: none; }
.lightbox-card .tile-art img { width: 100%; height: 100%; object-fit: contain; }

/* Live map on the contact page (when a Map location is configured): the card
   is just the pinned map, edge to edge. */
.map-card--live { display: block; padding: 0; min-height: 0; }
.map-card--live .map-embed { display: block; width: 100%; height: clamp(300px, 46vw, 460px); border: 0; }

/* Contact form honeypot: humans never see or fill it. */
.form .hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }

/* Contact form result banner (the page comes back to this after sending). */
.form-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.4rem;
  padding: 0.9rem 1.2rem;
  border-radius: var(--radius);
  font-weight: 700;
  scroll-margin-top: 90px; /* land clear of the sticky header */
}
.form-status--ok  { background: var(--teal-soft); color: #0B7E77; border: 2px solid #0B7E77; }
.form-status--err { background: var(--pink-soft); color: var(--pink-deep); border: 2px solid var(--pink-deep); }
.form-status--err a { color: inherit; }