/*
 * WordPress adaptation layer. base.css is the preview's design, generated
 * verbatim; this file maps WordPress block markup onto it. Hand-written.
 */

/* Core blocks render their own wrappers; neutralise their default spacing. */
figure { margin: 0; }
.wp-block-post-content > *, .wp-site-blocks > * { margin-block: 0; }

/* Logged-in admin bar sits above the sticky header. */
.admin-bar header.site { top: 32px; }
@media (max-width: 782px) { .admin-bar header.site { top: 46px; } }
@media (max-width: 600px) { .admin-bar header.site { top: 0; } }

/* --- Hero ------------------------------------------------------------------
   The tagline is the big display line and the <h1> carries the location +
   service keywords, so search engines read "General contractor ... Cannon
   Falls" as the page heading while the design is unchanged. */
.hero .hero-tagline {
  font-family: 'Bitter', Georgia, serif; font-weight: 800;
  font-size: clamp(2.4rem, 5.2vw, 3.6rem); line-height: 1.06;
  letter-spacing: -0.018em; text-wrap: balance;
  margin-top: 16px; color: var(--on-deep);
}
.hero h1 {
  font-family: 'Plex Sans', sans-serif; font-weight: 600;
  font-size: 0.95rem; line-height: 1.4; letter-spacing: 0.01em;
  margin-top: 14px; color: var(--on-deep-accent);
}

/* --- Buttons (core/button) mapped onto .btn ------------------------------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Plex Sans', sans-serif; font-weight: 700; font-size: 0.92rem;
  padding: 12px 22px; border-radius: 0; text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent; cursor: pointer; transition: background 0.15s ease;
}
.wp-block-button__link:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.wp-block-button.is-primary .wp-block-button__link { background: var(--green); color: #F8F7F1; }
.wp-block-button.is-primary .wp-block-button__link:hover { background: var(--green-deep); }
.wp-block-button.is-outline .wp-block-button__link { background: transparent; border-color: currentColor; color: var(--on-deep); }
.wp-block-button.is-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.08); }

/* --- About ----------------------------------------------------------------- */
/* The placeholder image already carries the drafting-plate look; a real photo
   replaces it and simply fills the frame. */
.photo-card::before, .photo-card::after { display: none; }
.photo-card .wp-block-image { display: flex; flex-direction: column; height: 100%; }
.photo-card .wp-block-image img { flex: 1 1 0; min-height: 0; width: 100%; height: auto; object-fit: cover; display: block; }
.photo-card figcaption {
  background: var(--bg-elevated); color: var(--text); border-top: 1px solid var(--border);
  font-size: 0.8rem; font-weight: 600; padding: 12px 14px; margin: 0;
}
/* .about-copy p (0,1,1) used to beat .signature (0,1,0) and turn the name grey. */
.about-copy .signature { margin-top: 26px; font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: 1.05rem; color: var(--green); }
.about-copy .signature-role { margin-top: 2px; font-weight: 500; font-size: 0.85rem; color: var(--text-muted); }

/* --- Gallery (core/image as tiles) ------------------------------------------ */
.gallery-tile::before { display: none; }
.gallery-tile img {
  flex: 1 1 0; min-height: 0; width: 100%; height: auto;
  object-fit: cover; display: block; transition: transform 0.5s ease;
}
.gallery-tile:hover img { transform: scale(1.03); }
.gallery-tile figcaption {
  position: relative; z-index: 1; margin: 0; padding: 13px 15px;
  background: var(--bg-elevated); border-top: 1px solid var(--border);
  font-family: 'Plex Mono', ui-monospace, monospace; font-size: 0.72rem;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.gallery-tile figcaption strong {
  display: block; margin-bottom: 3px;
  font-family: 'Plex Sans', sans-serif; font-weight: 600; font-size: 0.88rem;
  letter-spacing: 0; color: var(--text);
}
.gallery-tile:nth-of-type(1) figcaption { padding: 17px 19px; }
.gallery-tile:nth-of-type(1) figcaption strong { font-size: 1rem; }

/* --- Gallery lightbox (assets/lightbox.js) ---------------------------------- */
.gallery-tile.is-zoomable { cursor: zoom-in; }
.gallery-tile.is-zoomable:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
html.lightbox-open { overflow: hidden; }
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: #ECE9E0;
}
.lightbox::backdrop { background: rgba(8, 11, 14, 0.92); }
.lightbox[open] { display: grid; place-items: center; animation: lightbox-in 0.2s ease; }
@keyframes lightbox-in { from { opacity: 0; } }
.lightbox-frame {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: calc(100vw - 152px);
}
.lightbox-frame img {
  display: block; max-width: 100%; max-height: calc(100dvh - 120px);
  width: auto; height: auto; object-fit: contain; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}
.lightbox-frame figcaption {
  display: flex; gap: 14px; align-items: baseline;
  font-family: 'Plex Sans', sans-serif; font-weight: 600; font-size: 0.95rem;
}
.lightbox-frame figcaption span {
  font-family: 'Plex Mono', ui-monospace, monospace; font-weight: 400;
  font-size: 0.75rem; color: #A2A599; font-variant-numeric: tabular-nums;
}
.lightbox-btn {
  position: fixed; display: grid; place-items: center; width: 52px; height: 52px;
  padding: 0; border: 1px solid rgba(236, 233, 224, 0.22); border-radius: 50%;
  background: rgba(17, 21, 26, 0.6); color: #ECE9E0; font-size: 1.9rem; line-height: 1;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.lightbox-btn:hover { background: rgba(236, 233, 224, 0.14); border-color: rgba(236, 233, 224, 0.45); }
.lightbox-btn:focus-visible { outline: 3px solid #8AA070; outline-offset: 2px; }
.lightbox-close { top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox.is-single .lightbox-prev, .lightbox.is-single .lightbox-next { display: none; }
@media (max-width: 700px) {
  .lightbox-frame { max-width: calc(100vw - 24px); }
  .lightbox-frame img { max-height: calc(100dvh - 170px); }
  .lightbox-prev, .lightbox-next { top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: none; }
  .lightbox-prev { left: calc(50% - 64px); }
  .lightbox-next { right: calc(50% - 64px); }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox[open] { animation: none; }
}

/* Photo count on tiles that open an album (inc/gallery.php). */
.album-count {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: rgba(16, 26, 41, 0.78); color: #F3F0E7;
  font-family: 'Plex Mono', ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.04em;
  pointer-events: none;
}

/* --- Social links (dvc/social-links) ---------------------------------------- */
.social-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.social-link {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px;
  border: 1px solid var(--border-strong); color: var(--text);
  font-weight: 600; font-size: 0.9rem; text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.social-link svg { color: var(--green); flex-shrink: 0; }
.social-link:hover { background: var(--bg-elevated); border-color: var(--text-muted); }
.gallery-social { margin-top: 40px; text-align: center; }
.gallery-social p { margin: 0 auto; max-width: 560px; color: var(--text-muted); }
.gallery-social .social-links { justify-content: center; margin-top: 16px; }

/* --- Service area ------------------------------------------------------------ */
.area-intro { margin-top: 16px; color: var(--text-muted); }

/* --- FAQ (core/details) ------------------------------------------------------ */
.faq-item > :not(summary) { margin: 0 0 12px; padding-right: 46px; color: var(--text-muted); font-size: 0.99rem; }
.faq-item > :last-child { margin-bottom: 24px; }

/* --- Estimate form ----------------------------------------------------------- */
.form-card .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0 0 18px; padding: 12px 14px; font-size: 0.92rem; border-left: 3px solid; }
.form-status.ok { border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); }
.form-status.err { border-color: #B4562E; background: color-mix(in srgb, #B4562E 10%, transparent); }
.credential a { color: inherit; }

/* --- Plain pages (privacy policy etc.) -------------------------------------- */
.plain-page { max-width: 760px; margin: 0 auto; padding: 72px 28px; }
.plain-page > * + * { margin-top: 16px; }
.plain-page h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }

/* Width/height attributes are set for layout stability; CSS must still let the
   height follow the width or the crest stretches. */
.hero-mark img { height: auto; }

/* .section-head p and .about-copy p (0,1,1) outrank .eyebrow (0,1,0) and were
   inflating some section labels to body size while others stayed small. One
   size everywhere; same specificity, later file, so this wins. */
main .eyebrow { font-size: 0.76rem; }

/* --- Testimonials ------------------------------------------------------------ */
/* An unfilled review slot would show as a bare accent rule; hide it until it has
   words in it, and drop empty paragraphs left behind in the editor. */
.testi-card p:empty { display: none; }
.testi-card:not(:has(p:not(:empty))) { display: none; }

/* --- Process steps, single column -------------------------------------------- */
/* Stacked, steps 2 and 3 had no schedule rule under their tick, so the tick read
   as a stray underline on the previous paragraph. Give each step its own rule. */
@media (max-width: 880px) {
  .process-item { padding-right: 0; }
  .process-item + .process-item { margin-top: 30px; border-top: 1px solid var(--border-strong); }
}