/* =========================================================================
   FenceWorks — editable section patterns (team page-building)
   -------------------------------------------------------------------------
   These style the NATIVE-block section patterns (patterns/section-*.php) that
   the team drops into new pages and edits in the block editor. Kept OUT of
   site.css on purpose: everything here is scoped to .fw-sec, so it can never
   affect the flagship (file-first) pages, and site.css stays untouched.

   Brand match comes from reusing site.css's :root tokens (--cta-red, --ink,
   --section-pad, --maxw, --gutter, fonts…). Loaded after site.css on the front
   end AND added as an editor style, so sections look identical in the editor
   and on the page.
   ========================================================================= */

/* --- Section shell ------------------------------------------------------- */
.fw-sec { padding-block: var(--section-pad); padding-inline: var(--gutter); }

/* --- CTA-style buttons: match the site's clay .btn-cta, overriding the
   theme.json amber button element style (which ships as a low-specificity
   :where() rule, so any .fw-sec selector wins without !important). ---------- */
.fw-sec .wp-block-button__link {
  background-color: var(--cta-red);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  padding: 13px 24px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: background-color .15s ease, transform .05s ease;
}
.fw-sec .wp-block-button__link:hover { background-color: var(--cta-red-dark); color: #fff; }
.fw-sec .wp-block-button__link:active { transform: translateY(1px); }

/* --- A. CTA band --------------------------------------------------------- */
.fw-sec--cta { background: var(--ink); color: #fff; text-align: center; }
.fw-sec--cta > * { max-width: 640px; margin-inline: auto; }
.fw-sec--cta .wp-block-heading {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(26px, 5.4vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.fw-sec--cta p {
  color: var(--text-light);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 auto 24px;
}
.fw-sec--cta .wp-block-buttons { justify-content: center; }

/* --- B. Text + image ----------------------------------------------------- */
.fw-sec--media { background: #fff; }
.fw-sec--media .wp-block-columns {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}
.fw-sec--media .fw-media-img img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.fw-sec--media .wp-block-heading {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: clamp(24px, 4.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}
.fw-sec--media p {
  color: var(--text);
  font-size: 17px;
  line-height: 1.65;
  max-width: 54ch;
  margin: 0 0 22px;
}

/* Stacked (mobile): WP stacks columns < 782px; keep the image from feeling
   cramped and restore comfortable rhythm between the two stacked halves. */
@media (max-width: 781px) {
  .fw-sec--media .wp-block-columns { gap: clamp(20px, 6vw, 32px); }
  .fw-sec--media p { max-width: none; }
}

/* =========================================================================
   Expanded section library (Phase 3): hero, features, FAQ, testimonials.
   All scoped under .fw-sec, reusing site.css tokens; site.css/style.css untouched.
   ========================================================================= */

/* Shared centered section heading — brand emphasis is the green underline
   accent (site.css convention), never an eyebrow/kicker label. */
.fw-sec__head { max-width: 62ch; margin: 0 auto clamp(28px, 4vw, 42px); text-align: center; }
.fw-sec__head .wp-block-heading {
  font-family: var(--font-display); color: var(--ink);
  font-size: clamp(26px, 5.4vw, 40px); line-height: 1.12; letter-spacing: -0.015em; margin: 0;
}
.fw-sec__head .wp-block-heading::after {
  content: ""; display: block; width: 56px; height: 3px; border-radius: 2px;
  background: var(--brand-green); margin: 16px auto 0;
}
.fw-sec__head p { color: var(--text-muted); font-size: 16px; line-height: 1.6; margin: 12px 0 0; }

/* --- C. Hero-lite (photo band + left-weighted scrim) --------------------- */
.fw-sec--hero {
  position: relative; overflow: hidden;
  padding: clamp(48px, 8vh, 88px) 0;
  min-height: clamp(320px, 42vh, 460px);
  display: flex; flex-direction: column; justify-content: center;
  background: var(--brand-green-deep) url(../img/wood-privacy-dog-ear-fenceworks.jpg) center / cover no-repeat;
}
.fw-sec--hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(15,28,17,0.90) 0%, rgba(15,28,17,0.60) 55%, rgba(15,28,17,0.38) 100%);
}
.fw-sec--hero > * {
  position: relative; z-index: 1; width: 100%;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
}
.fw-sec--hero .wp-block-heading {
  color: #fff; font-family: var(--font-display);
  font-size: clamp(32px, 6.2vw, 52px); line-height: 1.06; letter-spacing: -0.02em;
  max-width: 17ch; margin: 0 0 14px; text-shadow: 0 2px 22px rgba(0,0,0,0.35);
}
.fw-sec--hero p {
  color: #eef3ea; font-size: clamp(16px, 2.4vw, 19px); line-height: 1.6;
  max-width: 46ch; margin: 0 0 24px; text-shadow: 0 1px 12px rgba(0,0,0,0.3);
}
.fw-sec--hero .wp-block-buttons { gap: 12px; }
.fw-sec--hero .wp-block-buttons > .wp-block-button:nth-child(2) .wp-block-button__link {
  background-color: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.45);
}
.fw-sec--hero .wp-block-buttons > .wp-block-button:nth-child(2) .wp-block-button__link:hover {
  background-color: rgba(255,255,255,0.20);
}

/* --- D. Feature trio ----------------------------------------------------- */
.fw-sec--features { background: var(--surface); }
.fw-sec--features .wp-block-columns {
  max-width: var(--maxw); margin-inline: auto; gap: clamp(18px, 2.6vw, 26px); align-items: stretch;
}
.fw-sec--features .fw-card {
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: clamp(22px, 3vw, 30px); height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fw-sec--features .fw-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.fw-sec--features .fw-card .wp-block-heading {
  font-family: var(--font-display); color: var(--ink); font-size: 19px; line-height: 1.25; margin: 0 0 8px;
}
.fw-sec--features .fw-card p { color: var(--text-muted); font-size: 15.5px; line-height: 1.6; margin: 0; }

/* --- E. FAQ (native <details> accordion, no JS) -------------------------- */
.fw-sec--faq { background: #fff; }
.fw-sec--faq .fw-faq { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.fw-sec--faq .wp-block-details {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.fw-sec--faq .wp-block-details summary {
  list-style: none; cursor: pointer; padding: 17px 20px;
  font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.fw-sec--faq .wp-block-details summary::-webkit-details-marker { display: none; }
.fw-sec--faq .wp-block-details summary::after {
  content: "+"; font-size: 24px; line-height: 1; color: var(--brand-green); flex: none; transition: transform .2s ease;
}
.fw-sec--faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
.fw-sec--faq .wp-block-details > *:not(summary) { padding: 0 20px 18px; margin: 0; }
.fw-sec--faq .wp-block-details p { color: var(--text-muted); font-size: 15.5px; line-height: 1.65; margin: 0; }

/* --- F. Testimonials (deep-green band) ----------------------------------- */
.fw-sec--testimonials { background: var(--brand-green-deep); }
.fw-sec--testimonials .fw-sec__head .wp-block-heading { color: #fff; }
.fw-sec--testimonials .fw-sec__head .wp-block-heading::after { background: #E7A93B; }
.fw-sec--testimonials .fw-sec__head p { color: var(--text-light); }
.fw-sec--testimonials .wp-block-columns {
  max-width: var(--maxw); margin-inline: auto; gap: clamp(16px, 2.4vw, 22px); align-items: stretch;
}
.fw-sec--testimonials .fw-card {
  background: var(--brand-green-deep); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius); padding: 22px; height: 100%;
}
.fw-sec--testimonials .fw-stars { color: #E7A93B; letter-spacing: 2px; font-size: 15px; margin: 0 0 10px; }
.fw-sec--testimonials .fw-card p:not(.fw-stars):not(.fw-attr) { color: #eaf1e6; font-size: 15.5px; line-height: 1.6; margin: 0 0 12px; }
.fw-sec--testimonials .fw-attr { color: var(--text-light); font-size: 14px; font-weight: 600; margin: 0; }

/* =========================================================================
   Expanded section library (Phase 3, batch 2): services list, photo gallery,
   content/rich-text band, contact/call band. Same rules as above — every
   selector stays scoped under .fw-sec so the WP-Rocket RUCSS safelist (.fw-sec)
   already covers it; site.css/style.css untouched.
   ========================================================================= */

/* --- G. Services / fence-type list (auto-fit card grid) ------------------ */
.fw-sec--services { background: #fff; }
.fw-sec--services .fw-svc-grid {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(18px, 2.4vw, 24px);
}
.fw-sec--services .fw-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: clamp(22px, 3vw, 30px); height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fw-sec--services .fw-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.fw-sec--services .fw-card .wp-block-heading {
  font-family: var(--font-display); color: var(--ink); font-size: 20px; line-height: 1.25; margin: 0 0 8px;
}
.fw-sec--services .fw-card p { color: var(--text-muted); font-size: 15.5px; line-height: 1.6; margin: 0 0 16px; }
.fw-sec--services .fw-svc-link { margin: auto 0 0; }
.fw-sec--services .fw-svc-link a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--brand-green); font-weight: 600; font-size: 15px; text-decoration: none;
}
.fw-sec--services .fw-svc-link a::after { content: "\2192"; transition: transform .15s ease; }
.fw-sec--services .fw-svc-link a:hover { color: var(--cta-red); }
.fw-sec--services .fw-svc-link a:hover::after { transform: translateX(3px); }

/* --- H. Photo gallery grid (replaceable image tiles) --------------------- */
.fw-sec--gallery { background: var(--surface); }
.fw-sec--gallery .fw-gallery-grid {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(12px, 1.8vw, 18px);
}
.fw-sec--gallery .fw-gallery-img { margin: 0; }
.fw-sec--gallery .fw-gallery-img img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}

/* --- I. Content / rich-text band (SEO body copy) ------------------------- */
.fw-sec--content { background: #fff; }
.fw-sec--content .fw-prose { max-width: 70ch; margin-inline: auto; }
.fw-sec--content .fw-prose > :first-child { margin-top: 0; }
.fw-sec--content .fw-prose > :last-child { margin-bottom: 0; }
.fw-sec--content .fw-prose .wp-block-heading {
  font-family: var(--font-display); color: var(--ink);
  font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; margin: 30px 0 10px;
}
.fw-sec--content .fw-prose p { color: var(--text); font-size: 17px; line-height: 1.75; margin: 0 0 18px; }
.fw-sec--content .fw-prose a { color: var(--brand-green); text-decoration: underline; text-underline-offset: 2px; }
.fw-sec--content .fw-prose a:hover { color: var(--cta-red); }

/* --- J. Contact / call band (phone-forward CTA variant) ------------------ */
.fw-sec--contact { background: var(--brand-green); }
.fw-sec--contact .fw-contact-inner {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
}
.fw-sec--contact .fw-contact-copy { flex: 1 1 420px; }
.fw-sec--contact .wp-block-heading {
  color: #fff; font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 34px); line-height: 1.14; letter-spacing: -0.015em; margin: 0 0 8px;
}
.fw-sec--contact p { color: var(--text-light); font-size: 16.5px; line-height: 1.6; margin: 0; }
.fw-sec--contact .wp-block-buttons { flex: 0 0 auto; gap: 12px; }
/* Second button = white outline (the first keeps the shared clay fill). */
.fw-sec--contact .wp-block-buttons > .wp-block-button:nth-child(2) .wp-block-button__link {
  background-color: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6);
}
.fw-sec--contact .wp-block-buttons > .wp-block-button:nth-child(2) .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.14);
}
@media (max-width: 640px) {
  .fw-sec--contact .wp-block-buttons { width: 100%; }
}

/* ------------------ core/table style: FenceWorks table ------------------
   Editable comparison/spec tables on converted + team-built pages. Mirrors the
   prototype's .cmp-table look (pages.css) but targets the core/table block,
   whose custom class lands on the wrapping <figure>, not the <table>. */
.wp-block-table.is-style-fw-table {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); background: #fff;
}
.wp-block-table.is-style-fw-table table {
  width: 100%; border-collapse: collapse; min-width: 560px; font-size: 15px;
  border: 0;
}
.wp-block-table.is-style-fw-table th,
.wp-block-table.is-style-fw-table td {
  padding: 13px 16px; text-align: left; border: 0;
  border-bottom: 1px solid var(--hairline); vertical-align: top; line-height: 1.45;
}
.wp-block-table.is-style-fw-table thead th {
  font-family: var(--font-display); font-weight: 600; font-size: 15.5px;
  color: var(--ink); background: var(--brand-green-tint);
  border-bottom: 1px solid rgba(47, 93, 42, 0.20);
}
.wp-block-table.is-style-fw-table thead th:first-child { background: #fff; }
.wp-block-table.is-style-fw-table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.wp-block-table.is-style-fw-table tbody tr:last-child th,
.wp-block-table.is-style-fw-table tbody tr:last-child td { border-bottom: 0; }
.wp-block-table.is-style-fw-table tbody tr:hover { background: var(--surface); }
.wp-block-table.is-style-fw-table figcaption {
  text-align: left; padding: 10px 4px 0; color: var(--text-muted); font-size: 14px;
}

/* ------------------ Converted-page adaptations (fw-pg) ------------------
   The page-section patterns (section-hero-photo, section-photo-band, facts,
   cost, how) and converter-emitted pages rebuild the prototype's markup with
   native blocks. These shims bridge the small structural differences native
   blocks introduce (figure wrappers, paragraphs around inline elements) so the
   extracted pages.css renders them identically. Inert on pages without fw-pg
   markup. */

/* Native buttons inside converted sections = the prototype .btn.btn-cta.btn-lg */
.fw-pg .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 500; font-size: 16px;
  padding: 14px 24px; border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  background-color: var(--cta-red); color: #fff;
}
.fw-pg .wp-block-button__link:hover { background-color: var(--cta-red-dark); }

/* Hero: second button = light outline on the photo (prototype .btn-outline-light) */
.res-hero__actions .wp-block-button:nth-child(2) .wp-block-button__link {
  background-color: rgba(255, 255, 255, 0.10); color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.res-hero__actions .wp-block-button:nth-child(2) .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Hero background photo is a core/image: the figure carries res-hero__bg, so
   the figure takes the absolute fill and the img covers it. */
figure.res-hero__bg { position: absolute; inset: 0; margin: 0; }
figure.res-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* facts-glance: the bold title is a paragraph-wrapped strong in block markup */
.facts-glance > p { margin: 0; }
.facts-glance > p > strong {
  font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink);
}
.facts-glance > p + ul { margin-top: 10px; }

/* cost-note: price + caption + links are paragraphs in block markup */
.cost-note p { margin: 0; }
.cost-note__pricesub {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 500;
  color: var(--brand-green); letter-spacing: .06em; text-transform: uppercase;
}
p.cost-note__cta a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--brand-green); font-weight: 600; font-size: 15px; white-space: nowrap;
}
p.cost-note__cta a:hover { color: var(--brand-green-deep); }

/* Badge strip inside converted page content: site.css carries the homepage
   variant of .badge-strip/.badge-row (different paddings/heights), so the
   prototype's leaf-page variant is scoped to post content here. */
.entry-content .badge-strip { padding-block: clamp(14px, 2.2vw, 24px); }
.entry-content .badge-row {
  list-style: none; margin: 0 auto; max-width: 1800px;
  padding: 0 clamp(24px, 4vw, 60px); display: flex; align-items: center;
  /* the theme's homepage marquee sets width:max-content + an animation on
     .badge-row — this static strip must neutralize both or it overflows */
  width: 100%; animation: none;
}
.entry-content .badge-row li {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  margin-right: 0;
}
.entry-content .badge-row img { height: 62px; width: auto; max-width: 100%; display: block; }
.entry-content .badge-row a { display: inline-flex; transition: transform .15s ease; }
.entry-content .badge-row a:hover { transform: scale(1.06); }
@media (max-width: 900px) {
  .entry-content .badge-row {
    flex-wrap: wrap; justify-content: center; gap: 22px 28px; padding-inline: var(--gutter);
  }
  .entry-content .badge-row li { flex: 0 0 auto; }
  .entry-content .badge-row li::after { display: none; }
  /* Phones: the interior strip becomes the same one-row ticker as the homepage
     (Austin 2026-09-17 — the 8 badges wrapped into a 4/3/1 stack, 258px tall, pushing
     the page's content a screen down). patterns/page-badges.php wraps the row in
     .badge-viewport--mobile; home.js clones the set only while this query matches, so
     desktop stays the static one-row strip above. */
  .entry-content .badge-viewport--mobile {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .entry-content .badge-viewport--mobile .badge-row {
    width: max-content; max-width: none; padding: 0; gap: 0;
    flex-wrap: nowrap; justify-content: flex-start;
    animation: badge-scroll 60s linear infinite; will-change: transform;
  }
  .entry-content .badge-viewport--mobile .badge-row:hover { animation-play-state: paused; }
  .entry-content .badge-viewport--mobile .badge-row li { flex: 0 0 auto; margin-right: 36px; }
  .entry-content .badge-viewport--mobile .badge-row img { height: 54px; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .entry-content .badge-viewport--mobile { -webkit-mask-image: none; mask-image: none; }
  .entry-content .badge-viewport--mobile .badge-row {
    animation: none; width: 100%; flex-wrap: wrap; justify-content: center; gap: 22px 28px; padding-inline: var(--gutter);
  }
  .entry-content .badge-viewport--mobile .badge-row li { margin-right: 0; }