/* ==========================================================================
   By Jillian Rose — Legal Pages (Privacy Policy / Terms of Use)
   Only loaded on page-templates/legal.php (see functions.php), never
   site-wide. Uses exclusively existing design-system tokens — no new
   colors, fonts, spacing, or icon styles introduced here.
   ========================================================================== */

/* ---- Hero: full-width photo, text overlaid on the left via a gradient
   scrim — SECOND revision, replacing the earlier split-column (42/58)
   layout entirely. The scrim's color values are rgba() equivalents of
   --color-bg (#F7F5F2 → rgb(247,245,242)); custom properties can't carry
   an alpha channel on their own, so the RGB is restated here rather than
   introducing an actual new color. Opaque near the text (left), fully
   transparent by ~60% across (right) — per explicit spec. ---- */
.legal-hero { padding: 0; }
.legal-hero-media {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.legal-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin: 0;
}
.legal-hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(247,245,242,.95) 0%, rgba(247,245,242,.8) 26%, rgba(247,245,242,.35) 48%, rgba(247,245,242,0) 62%);
  pointer-events: none;
}
.legal-hero-text-wrap {
  position: relative;
  z-index: 3;
  width: 100%;
}
.legal-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 460px;
}
.legal-hero-text .eyebrow { margin-bottom: 0; }
.legal-hero-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, var(--text-h1));
  line-height: 1.15;
  color: var(--color-text);
  margin: 0;
}
/* Small solid heart, same path used site-wide (announcement bar motto,
   homepage section divider) — decorative only, hence aria-hidden in the
   markup and no independent alt text. */
.legal-hero-heart { width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; }
.legal-hero-intro {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text);
  max-width: 46ch;
  margin: 0;
}

@media (max-width: 900px) {
  .legal-hero-media { min-height: 360px; }
  .legal-hero-text { max-width: 100%; }
  /* Photo crops narrower here, so the left-side negative space can't be
     relied on the same way — the scrim switches to a top-to-bottom fade
     that stays mostly opaque behind the text block regardless of exactly
     where the photo gets cropped, rather than a left-right fade that
     could land the text over a busy part of the image. */
  .legal-hero-gradient {
    background: linear-gradient(180deg, rgba(247,245,242,.95) 0%, rgba(247,245,242,.88) 55%, rgba(247,245,242,.55) 100%);
  }
}

/* ---- Body content: centered container, real post content ---- */
/* Bottom padding trimmed (--space-6 -> --space-3) per explicit
   follow-up — the gap after Contact/the Last Updated line was reading
   as extra empty space before the newsletter section below. Top stays
   as-is, unrelated to that complaint. */
.legal-content { padding: var(--space-6) 0 var(--space-3) 0; }

/* Deliberately smaller and lighter than the 14.5px/400 body copy — a
   footnote-style timestamp, not a label. The bold/uppercase/tracked
   combination it had before read as a small heading, which is the
   opposite of what a "Last Updated" line should signal. Shared between
   both legal pages (used at the top of Terms of Use, at the bottom of
   Privacy Policy since an earlier request moved just that one
   instance), so this change applies to both positions identically. */
.legal-updated {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
}

.legal-intro { max-width: 72ch; margin: 0 0 var(--space-5); }
.legal-intro p {
  font-size: 14.5px;
  line-height: 1.65;
}
.legal-intro p:last-child { margin-bottom: 0; }

/* Two-column grid of section "rows" on desktop, one column below 900px
   (same breakpoint used for every other two-column section site-wide).
   Each .legal-section carries its own thin top divider — reusing the
   existing decorative border token, not a new color — so every section,
   including the first row, reads as visually separated. */
.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-5);
  row-gap: 0;
}
.legal-section {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) 0;
}
.legal-section--full { grid-column: 1 / -1; }
/* Contact is always the last section in both legal pages' verbatim
   content, so this targets it by position rather than needing a
   page-specific class or an HTML/content edit — full width like the
   other full-width sections, and no divider above it (the generic
   border-top every .legal-section gets isn't wanted here). */
.legal-grid > .legal-section:last-child {
  grid-column: 1 / -1;
  border-top: none;
}

/* Section heading: small uppercase/letter-spaced style, matching the
   site's existing .widget-title treatment — not a new heading style. */
.legal-section h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

/* Sized to match typical paragraph copy elsewhere on the site (most
   body text runs ~14-15px, not the 17px --text-body token, which is
   really the long-form blog-post size) rather than left at --text-body,
   which read oversized in this narrower 2-column layout. Still well
   clear of hard-to-read territory — not shrunk to save space. */
.legal-section p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.legal-section p:last-child { margin-bottom: 0; }

/* ---- "Changes to This Privacy Policy" card (Privacy Policy only —
   lives in that page's own content, not in the template, so this does
   nothing on pages that don't include it). Single bordered card instead
   of three stacked elements, per explicit mockup. Border/fill are
   rgba() derivations of the existing --color-accent (#B68A93) and
   --color-bg (#F7F5F2) tokens, not new colors — same technique already
   used for the hero gradient scrim. Full width of the section's own
   full-width row (its parent already carries legal-section--full), not
   a narrower inset card. ---- */
/* Left/right padding no longer match (320px / 220px), per explicit
   follow-up: the leaf spans the card's full height at its own aspect
   ratio (near-square, so tall = wide) and can't be narrowed without
   either losing the "touches the bottom" requirement or distorting the
   artwork — so the fix went the other direction, pushing the text
   block in another ~1in (220px -> 320px) instead of shrinking the leaf.
   Right side stays 220px, unchanged, since nothing crowds it there.
   Top/bottom stays tightened (--space-2, 16px) from an earlier pass.
   The leaf still ignores this value entirely either way: for a
   position:absolute child, the containing block is the PADDING EDGE of
   the nearest positioned ancestor, which sits at the inside of the
   border regardless of how much padding that ancestor has — so left:0
   on the leaf always pins it flush to the card's true left edge. */
.legal-changes-card {
  width: 100%;
  position: relative;
  border: 1px solid rgba(182,138,147,.45);
  border-radius: 10px;
  background: rgba(182,138,147,.07);
  padding: var(--space-2) 220px var(--space-2) 320px;
}
/* Clearfix for the floated signoff image below — avoids overflow:hidden,
   which would risk clipping the leaf icon or border under some zoom
   levels. */
.legal-changes-card::after { content: ""; display: table; clear: both; }
/* Leaf spans the card's full height, touching both top and bottom.
   PREVIOUS BUG: top:0 + bottom:0 + an explicit height:85% together is
   over-constrained for an absolutely-positioned replaced element (img)
   — browsers resolve that by honoring top+height and silently dropping
   bottom, which is exactly why it stopped short of the bottom edge
   instead of "85%" reading as evenly-trimmed on both ends. Fixed by
   dropping bottom entirely and using top:0 + height:100% alone — no
   conflicting constraint, so it reaches exactly to the container's true
   bottom edge. width:auto lets its real aspect ratio set the width, so
   — same as before — it's noticeably wider at 100% than it was at 85%,
   since it's a near-square graphic. That may partly reintroduce the
   text-crowding this 85% value was originally added to fix; flagged
   rather than silently re-narrowing it against what was just asked. */
.legal-changes-leaf {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
}
.legal-changes-card-head { margin-bottom: var(--space-1); }
.legal-changes-card-head h2 { margin: 0; }
/* Full justification (both edges of the text block line up evenly) —
   scoped to just this card's own paragraph via the two-class selector,
   so it doesn't touch any other section's paragraph on the page. The
   indent itself now comes from .legal-changes-card's own padding above,
   not a separate rule here. */
.legal-changes-card p {
  text-align: justify;
}
/* Floated after the paragraph in markup, so it sits to the right near
   the paragraph's last line rather than beside its first — a float
   only affects flow content that comes after it. margin-right:0 keeps
   it flush against the card's own padding-right (220px, same ~2in
   indent as the left side) — the true right-side margin, not flush
   against the border. margin-left widened (16px -> 32px) in an earlier
   pass so it reads as clearly separated from the paragraph text rather
   than sitting close beside it. */
.legal-changes-signoff {
  float: right;
  width: 300px;
  max-width: 100%;
  height: auto;
  margin: -6px 0 0 var(--space-4);
  margin-right: 0;
}
/* Placeholder for the corrected signoff graphic — real file not
   provided yet, so this reads unmistakably as "not real content," same
   dashed-border convention used site-wide, rather than showing the
   wrong (mismatched-text) graphic as if it were correct. */
.legal-changes-signoff-placeholder {
  float: right;
  width: 300px;
  max-width: 100%;
  margin: -6px 0 0 var(--space-2);
  padding: var(--space-1);
  border: 1px dashed var(--color-border-interactive);
  border-radius: var(--radius);
  background: var(--color-bg-secondary);
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--color-text-secondary);
  text-align: center;
}
/* The desktop indent (220px each side) and justified text would crush
   readability on a narrow phone-width card, so both ease off below the
   same 900px breakpoint already used for the two-column grid elsewhere
   on this page — not requested explicitly, but the desktop spacing is
   unusable at that width otherwise. Leaf drops to a fixed small size
   here too, since "full card height" on a phone-width, wide-open card
   would make it enormous relative to the now-narrower text column. */
@media (max-width: 900px) {
  .legal-changes-card { padding: 24px; }
  /* Reverts to a small, stacked, in-flow icon above the heading — a
     leaf pinned to "full card height" only makes sense next to a
     multi-line indented text block; at this width the text isn't
     indented at all, so the absolute/full-height version has nothing
     to visually pair with. */
  .legal-changes-leaf { position: static; height: auto; width: 80px; margin-bottom: var(--space-1); }
  .legal-changes-card p { text-align: left; }
  .legal-changes-signoff,
  .legal-changes-signoff-placeholder { width: 160px; max-width: 45%; }
}

@media (max-width: 900px) {
  .legal-grid { grid-template-columns: 1fr; }
}

/* Single-column variant (Affiliate Disclosure — shorter sections, no
   2-col grid needed). Sections just stack in normal block flow and
   inherit .legal-section's own divider/heading/paragraph styles
   unchanged — deliberately a different class name from .legal-grid so
   the 2-col pages' .legal-grid > .legal-section:last-child override
   (built specifically for Contact — full width, no divider) doesn't
   apply here, where every section including the last should look
   identical. Constrained to the same 72ch reading width as .legal-intro
   rather than stretching the full container, which would make lines
   uncomfortably long in a true single column. */
.legal-stack { max-width: 72ch; }

/* ---------------------------------------------------------------------
   Newsletter CTA — legal-page variant (bjr_legal_newsletter() in
   page-templates/legal.php). Deliberately its own component, not the
   homepage's .home-newsletter/bjr_home_newsletter() — per explicit
   instruction, the homepage's "Stay in the Loop" section is untouched,
   so its CSS (in components.css) is untouched too. Base layout mirrors
   it closely (same centered card look, same real Mailchimp form) since
   the underlying signup functionality is meant to match exactly — only
   the heading and the added leaf accent differ.
   --------------------------------------------------------------------- */
/* Padding trimmed (--space-6 -> --space-3) per explicit follow-up —
   was reading as too much air inside the box. */
.legal-newsletter {
  padding: var(--space-3) 0;
  text-align: center;
  background: var(--color-bg-secondary);
}
.legal-newsletter-inner { max-width: 560px; margin: 0 auto; }
/* Same leaf graphic as the Privacy Policy "Changes to This Privacy
   Policy" card (attachment #1489), but at its own modest accent size
   here — this section has no tall bordered card to fill the height of,
   so it's sized like a small decorative mark, not stretched. */
.legal-newsletter-leaf {
  display: block;
  width: 64px;
  height: auto;
  margin: 0 auto var(--space-1);
}
.legal-newsletter-inner .eyebrow { display: block; }
.legal-newsletter-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-text);
  margin: var(--space-1) 0 var(--space-2);
}
.legal-newsletter-inner p { margin-bottom: var(--space-3); }
.legal-newsletter .newsletter-form {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  align-items: flex-start;
}
.legal-newsletter .newsletter-form .field { flex: 1; max-width: 320px; margin-bottom: 0; text-align: left; }
.legal-newsletter .newsletter-form label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.legal-newsletter .newsletter-form button { white-space: nowrap; }
@media (max-width: 780px) {
  .legal-newsletter .newsletter-form { flex-direction: column; align-items: stretch; }
  .legal-newsletter .newsletter-form .field { max-width: none; }
  .legal-newsletter .newsletter-form button { width: 100%; justify-content: center; }
}