/*
Theme Name: Legacy Farm
Theme URI: https://legacydigital.net/
Description: Child theme of Twenty Twenty-Five for the Legacy Digital microsite farm. Warm archival palette, serif display type, content-first layout. One theme, five sites: per-site colour is the only intended variation.
Author: Legacy Digital Productions
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: legacyfarm
*/

/* Long-form readability: the content engine is the point of these sites. */
.entry-content > p { max-width: 42rem; }
.entry-content h2 { margin-top: 2.6em; }
.entry-content h3 { margin-top: 1.9em; }

/* Tables carry the format-comparison content and must never blow out mobile. */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th,
.wp-block-table td {
  border: 1px solid var(--wp--preset--color--line);
  padding: 0.6rem 0.8rem;
  text-align: left;
}
.wp-block-table thead th {
  background: var(--wp--preset--color--surface);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
}

/* Callout: used by "From the lab" and "At a glance" blocks in drafts. */
.lf-callout {
  background: var(--wp--preset--color--surface);
  border-left: 3px solid var(--wp--preset--color--primary);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.lf-callout > *:first-child { margin-top: 0; }
.lf-callout > *:last-child { margin-bottom: 0; }

/* Eyebrow label above section headings. */
.lf-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}

/* Stat figure in the trust bar. */
.lf-stat strong {
  font-family: var(--wp--preset--font-family--display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.05;
  display: block;
  color: var(--wp--preset--color--deep);
}

/* Deep sections invert; make sure headings and rules follow. */
.has-deep-background-color :is(h1,h2,h3,h4,p,li) { color: var(--wp--preset--color--base); }
.has-deep-background-color .lf-eyebrow { color: #E8B67F; }

/* Four-step process: stack earlier than the block default so headings
   like "1. Intake" never wrap mid-word in a squeezed column. */
@media (max-width: 900px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap !important; }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: calc(50% - var(--wp--style--block-gap, 1.2rem)) !important;
    flex-grow: 0;
  }
}
@media (max-width: 560px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* An eyebrow belongs to the heading under it, so kill the heading's default
   top margin when it follows one. Without this the label floats ~100px above
   its own section and reads as unrelated. */
.lf-eyebrow { margin-bottom: 0.35rem; }
.lf-eyebrow + h2,
.lf-eyebrow + h3,
.lf-eyebrow + .wp-block-heading { margin-top: 0.1em !important; }

/* Section rhythm: headings inside page content should not inherit the
   long-form article spacing used inside .entry-content. */
.wp-block-group > .wp-block-heading:first-child { margin-top: 0; }

/* Contact details rendered by the per-site shortcodes. Absent sites render
   nothing, so these rules simply do not apply there. */
.lf-phone {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.lf-phone-header {
  color: var(--wp--preset--color--primary);
  font-size: 1.0625rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--wp--preset--color--line);
}
@media (max-width: 600px) {
  .lf-phone-header { border-left: 0; padding-left: 0; }
}
.lf-nap {
  display: block;
  font-size: 0.875rem;
  color: var(--wp--preset--color--muted);
  margin-top: var(--wp--preset--spacing--20);
}
.lf-nap .lf-phone { color: var(--wp--preset--color--muted); }
.has-deep-background-color .lf-phone { color: #E8B67F; }
.lf-gbp { font-weight: 600; white-space: nowrap; }

/* --- 16mm redesign components ------------------------------------- */

/* Numbered cards (the four questions, the archive steps). */
.lf-cardnum {
  font-family: var(--wp--preset--font-family--display);
  font-size: 2rem; font-weight: 700; line-height: 1;
  color: var(--wp--preset--color--primary);
  margin: 0 0 0.15em;
}

/* Rate card + per-reel price cards. */
.lf-rate {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 700; line-height: 1.05;
  color: var(--wp--preset--color--deep); margin: 0.1em 0 0.4em;
}
.lf-rate span { font-size: 0.4em; font-weight: 600; color: var(--wp--preset--color--muted); }
.lf-price {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.9rem; font-weight: 700; line-height: 1.1;
  color: var(--wp--preset--color--deep); margin: 0.1em 0 0.3em;
}
.lf-rating {
  font-family: var(--wp--preset--font-family--display);
  font-size: 2.6rem; font-weight: 700; line-height: 1; margin: 0 0 0.25em;
  color: var(--wp--preset--color--deep);
}
.lf-rating span { font-size: 0.42em; color: var(--wp--preset--color--primary); letter-spacing: 0.06em; }

/* Review quote cards: equal visual weight, no drop shadows. */
.lf-quote { height: 100%; }
.lf-quote p:first-child { font-size: 1.0625rem; }

/* The double-perf diagram. Scales down without overflowing on mobile. */
.lf-diagram {
  margin: var(--wp--preset--spacing--30) 0;
  padding: var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--surface);
  border-radius: 6px;
  overflow-x: auto;
}
.lf-diagram svg { display: block; max-width: 560px; margin: 0 auto; height: auto; }
.lf-diagram figcaption {
  margin-top: 1rem; font-size: 0.875rem; line-height: 1.5;
  color: var(--wp--preset--color--muted); text-align: center;
  max-width: 46ch; margin-inline: auto;
}

/* --- Artboard components (16mm redesign) --------------------------- */

/* Header: phone with icon, then a filled quote button. */
.lf-headcta .wp-block-button__link { padding: 0.65rem 1.35rem; font-size: 0.95rem; }
.lf-phone-header::before {
  content: "";
  display: inline-block; width: 15px; height: 15px; margin-right: 0.4rem;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: var(--lf-phone-icon) center/contain no-repeat;
  mask: var(--lf-phone-icon) center/contain no-repeat;
}
:root {
  --lf-phone-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* Hero film strip: three frames with sprocket holes down one edge.
   Single-perf, matching the copy on the How-it-works page. */
.lf-filmstrip {
  background: var(--wp--preset--color--deep);
  border-radius: 6px;
  padding: 18px 18px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.lf-filmstrip-row { display: flex; gap: 10px; align-items: stretch; }
.lf-perfs {
  display: flex; flex-direction: column; justify-content: space-around;
  padding: 4px 0; flex: 0 0 9px;
}
.lf-perfs i { display: block; width: 9px; height: 13px; background: var(--wp--preset--color--surface); border-radius: 2px; }
.lf-frame {
  flex: 1 1 auto; border-radius: 3px; overflow: hidden;
  background: #1b2723; min-height: 92px;
  display: flex; align-items: center; justify-content: center;
}
.lf-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-filmstrip figcaption {
  font-size: 12px; color: #9DB0AA; padding-left: 19px; font-weight: 500; margin: 2px 0 0;
}

/* Bordered cards: steps, prices, reviews. */
.lf-card {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 5px;
  padding: 1.15rem 1.25rem;
  background: var(--wp--preset--color--base);
  height: 100%;
}
.lf-card > *:first-child { margin-top: 0; }
.lf-card > *:last-child { margin-bottom: 0; }
.lf-card-label {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--wp--preset--color--primary); margin: 0 0 0.5rem;
}
.lf-stars { color: var(--wp--preset--color--primary); letter-spacing: 0.08em; }

/* NAP card with iconography, used on the homepage lab section. */
.lf-napcard { border: 1px solid var(--wp--preset--color--line); border-radius: 5px; padding: 1.1rem 1.25rem; }
.lf-napcard p { margin: 0 0 0.55rem; font-size: 0.9375rem; }
.lf-napcard p:last-child { margin-bottom: 0; }

/* Two-column artboard sections: keep the ratio, stack on narrow screens. */
@media (min-width: 901px) {
  .lf-split { display: flex; gap: 4rem; align-items: center; }
  .lf-split > * { flex: 1 1 0; min-width: 0; }
  .lf-split-wide-left > *:first-child { flex: 1.15 1 0; }
  .lf-split-wide-right > *:last-child { flex: 1.15 1 0; }
}

/* Two film strips side by side with their own captions, per the artboard. */
.lf-perfpair { display: flex; gap: 1.75rem; align-items: flex-start; }
.lf-perfpair figure { margin: 0; flex: 1 1 0; min-width: 0; text-align: center; }
.lf-perfstrip { max-width: 170px; margin: 0 auto; }
.lf-perfpair figcaption { margin-top: 0.7rem; line-height: 1.4; }
.lf-perfpair figcaption strong { display: block; font-size: 0.9375rem; }
.lf-perfpair figcaption span { display: block; font-size: 0.8125rem; color: var(--wp--preset--color--muted); margin-top: 0.15rem; }
@media (max-width: 520px) { .lf-perfpair { gap: 1rem; } }

/* Cards inside a columns row should match height. */
.wp-block-column > .lf-card { height: 100%; }

/* Header quote button, per the artboard. */
.lf-headcta {
  display: inline-block;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base) !important;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600; font-size: 0.9375rem;
  padding: 0.65rem 1.35rem; border-radius: 4px;
  text-decoration: none !important; white-space: nowrap;
}
.lf-headcta:hover { background: var(--wp--preset--color--deep); }

/* --- Quote form ---------------------------------------------------- */
.lf-quote-form { max-width: 34rem; }
.lf-field { margin: 0 0 1.35rem; }
.lf-field > label, .lf-field legend {
  display: block; font-weight: 700; font-size: 0.9375rem; margin-bottom: 0.35rem;
  font-family: var(--wp--preset--font-family--body);
}
.lf-quote-form input[type=text],
.lf-quote-form input[type=number],
.lf-quote-form textarea,
.lf-quote-form input[type=file] {
  width: 100%; padding: 0.7rem 0.85rem; font: inherit; font-size: 1rem;
  border: 1px solid var(--wp--preset--color--line); border-radius: 4px;
  background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast);
}
.lf-quote-form input:focus-visible,
.lf-quote-form textarea:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px;
}
.lf-hint { display: block; font-size: 0.8125rem; color: var(--wp--preset--color--muted); margin-top: 0.35rem; line-height: 1.45; }
.lf-quote-form fieldset { border: 0; padding: 0; margin: 0 0 1.35rem; }
.lf-reelrow { display: flex; gap: 0.75rem; }
.lf-reel { flex: 1 1 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.875rem; font-weight: 500; }
.lf-reel input { text-align: center; }
.lf-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.lf-checks label { font-size: 0.9375rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.4rem; }
.lf-submit { margin: 1.5rem 0 0.6rem; }
.lf-submit button { cursor: pointer; border: 0; }
.lf-promise { max-width: 34rem; }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lf-quote-ok, .lf-quote-err { margin-bottom: 1.5rem; }
.lf-quote-ok { border-left: 3px solid var(--wp--preset--color--primary); }
.lf-quote-err { border-left: 3px solid #A33; }

/* Reel steppers overflow their row at 390px: the three number inputs plus
   gaps exceed the container. Let them wrap rather than scroll. */
@media (max-width: 480px) {
  .lf-reelrow { flex-wrap: wrap; gap: 0.6rem; }
  .lf-reel { flex: 1 1 calc(33.333% - 0.4rem); min-width: 5.5rem; }
  .lf-reel input { padding-left: 0.35rem; padding-right: 0.35rem; }
}

/* width:100% plus padding overflows unless the padding is inside the box.
   Without this every field on the form sits ~29px wider than its container. */
.lf-quote-form input,
.lf-quote-form textarea,
.lf-quote-form select { box-sizing: border-box; max-width: 100%; }

/* Hollywood credit band. Gold eyebrow only on the deep ground. */
.lf-eyebrow-gold { color: #C9A97C !important; }
.lf-credit {
  border: 1px solid rgba(242,236,226,0.22);
  border-radius: 5px; padding: 0.9rem 1.1rem;
  margin-bottom: 0.85rem;
}
.lf-credit:last-child { margin-bottom: 0; }
.lf-credit-kicker {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: #C9A97C; margin: 0 0 0.2rem;
}
.lf-credit-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.25rem; font-weight: 700; margin: 0 0 0.3rem; line-height: 1.2;
}
.lf-credit p:last-child { margin-bottom: 0; color: #B8C9C3; }

/* Tape sites ask for counts by format, five inputs rather than three. Let
   the row wrap into two lines well before it would squeeze the inputs. */
.lf-reelrow-5 { flex-wrap: wrap; }
.lf-reelrow-5 .lf-reel { flex: 1 1 calc(33.333% - 0.5rem); min-width: 7rem; }
.lf-reelrow-5 .lf-reel span { font-size: 0.8125rem; line-height: 1.25; min-height: 2.5em; display: flex; align-items: flex-end; }

/* Cassette identification table: format pages need a wider first column on
   desktop, and on phones the table becomes a stack of cards, one per format,
   with the column headings repeated as labels. Nothing scrolls sideways. */
.lf-idtable td:first-child { white-space: nowrap; font-weight: 600; }
@media (max-width: 640px) {
  .lf-idtable thead { display: none; }
  .lf-idtable table, .lf-idtable tbody, .lf-idtable tr, .lf-idtable td { display: block; width: 100%; box-sizing: border-box; }
  .lf-idtable tr {
    border: 1px solid var(--wp--preset--color--line); border-radius: 5px;
    padding: 0.6rem 0.9rem 0.75rem; margin-bottom: 0.75rem; background: var(--wp--preset--color--base);
  }
  .lf-idtable td { border: 0; padding: 0.25rem 0; white-space: normal; }
  .lf-idtable td::before {
    content: attr(data-label); display: block;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--wp--preset--color--primary); margin-bottom: 0.1rem;
  }
  .lf-idtable td:first-child { font-family: var(--wp--preset--font-family--display); font-size: 1.15rem; padding-bottom: 0.4rem; }
  .lf-idtable td:first-child::before { display: none; }
}