/*!
 * Work Lawyers: site-wide refinements.
 *
 * Loaded after main.css (and, in practice, alongside
 * article-refresh.css). These are small, cross-cutting adjustments
 * that logically belong with the base styles but ship as a follow-on
 * overlay so the large stylesheets stay untouched. Everything is spent
 * from the existing token budget: no new colors, faces, or shadows.
 *
 * CONTENTS
 *  1. Guide card "Read More" button
 *  2. Guide card body text: readable floor
 *  3. CTA banner: breathing room below the box
 *  4. Reading sheet: close the foot of #main to match its sides
 *  5. Author bio card: text size and "More About Me" button
 *  6. Footer legal notice: 12 pt minimum
 *  7. Footer legal links row
 *  8. Blockquote: citation on its own line
 */

/* ------------------------------------------------------------------
   1. GUIDE CARD "READ MORE" BUTTON
   The card's footer link becomes a pill button (ghost outline that
   fills on hover, matching .btn--ghost). It sizes to its own content
   and stays pinned to the bottom-left of the card.
------------------------------------------------------------------ */
.card__more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding: 0.5rem 1.15rem;
  font-size: var(--text-s);
  font-weight: 700;
  line-height: 1;
  color: var(--brand-deep);
  background: transparent;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--rule-strong);
  text-decoration: none;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.card__more:hover,
.card__more:focus-visible {
  background: var(--brand);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--brand);
}
/* The trailing arrow now rides inside the pill; drop its leading
   space so the flex gap controls the spacing. */
.card__more::after { content: "\2192"; }

/* ------------------------------------------------------------------
   2. GUIDE CARD BODY TEXT: READABLE FLOOR
   The card excerpt used --text-s (14–15px), which reads small. Floor
   it at 1rem (16px) and let it rise a hair on wide screens. Line
   height, color, and margins stay as main.css sets them.
------------------------------------------------------------------ */
.card p { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.0625rem); }

/* ------------------------------------------------------------------
   3. CTA BANNER: BREATHING ROOM BELOW THE BOX
   main.css sets only a top margin on .cta-banner, so on landing pages
   the dark box met the foot of the sheet with nothing between them.
   Add a matching bottom margin site-wide. (Single posts already set
   this via .single .cta-banner in article-refresh.css, at the same
   value, so nothing changes there.)
------------------------------------------------------------------ */
.cta-banner { margin-bottom: var(--s-8); }

/* ------------------------------------------------------------------
   4. READING SHEET: CLOSE THE FOOT OF #main
   On wide screens the sheet already carries a hairline down each side
   (main { border-inline } in main.css). Close the bottom edge with the
   identical rule so the sheet reads as a finished box. Single posts
   draw their own closing rule (.single main > article), so they are
   excluded here to avoid doubling the line.
------------------------------------------------------------------ */
@media (min-width: 64em) {
  body:not(.single) main { border-bottom: 1px solid var(--rule); }
}

/* ------------------------------------------------------------------
   5. AUTHOR BIO CARD
   Moved here from all-guides.css so the All Guides page and the Page
   with Sidebar template share one definition. Card chrome (border,
   radius, background, padding, avatar, name, role) comes from
   .side-card in article-refresh.css; these are the bio-specific bits.

   The bio text was inheriting the page body size (~18-20px); set it a
   clear step below that, capped under 18px. The "More About Me" link
   is drawn as a ghost button matching the article "Copy Article Link"
   control (.copy-link.btn-copy): brand outline, fills to --wash on
   hover, full width inside the card.
------------------------------------------------------------------ */
.side-card--bio { text-align: center; }
.side-card__bio {
  margin: var(--s-4) 0 var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-strong);
  text-align: left;
  color: var(--ink-2);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); /* 15-17px, never above 18 */
  line-height: 1.55;
  text-wrap: pretty;
}
.side-card__biolink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  width: 100%;
  padding: 0.6em 1.1em;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--brand-deep);
  font-size: var(--text-s);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.side-card__biolink:hover { background: var(--wash); color: var(--brand-deep); }
.side-card__biolink:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   6. FOOTER LEGAL NOTICE: 12 PT MINIMUM
   The attorney-advertising and disclaimer copy is held at no less than
   12 pt (16px) to satisfy the advertising-notice size requirement,
   overriding the --text-xs default in main.css.
------------------------------------------------------------------ */
.footer-legal { font-size: 1rem; } /* 16px = 12pt */

/* ------------------------------------------------------------------
   7. FOOTER LEGAL LINKS ROW
   A slim row of policy links sits below the copyright line, and is the
   only place these links live. Quiet grey by default, brightening on
   hover like the rest of the footer. The extra qualifier keeps these
   from picking up the white link color .site-footer a sets.
------------------------------------------------------------------ */
.footer-legal-links {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  font-size: var(--text-s);
}
.site-footer .footer-legal-links a { color: #8ba0b0; text-decoration: none; }
.site-footer .footer-legal-links a:hover { color: var(--brand-bright); }

/* ------------------------------------------------------------------
   8. BLOCKQUOTE: CITATION ON ITS OWN LINE
   The case citation drops to the line below the case name and shares
   its left edge, instead of trailing it on the same line. The source
   line becomes a block; the leading rule and the source-link icon are
   lifted out of the flow (absolute) so the two text lines stack
   cleanly. The rule keeps its size and color from main.css; only its
   position is set here.
------------------------------------------------------------------ */
.quote__source {
  display: block;
  position: relative;
  padding-left: 2.25rem;
  padding-right: 1.75rem;
  line-height: 1.5;
}
.quote__source::before {
  position: absolute;
  left: 0;
  top: 0.72em;
}
.quote__source cite { display: block; }
.quote__source .num { display: block; }
.quote__srclink {
  position: absolute;
  top: 0.1em;
  right: 0;
}

/* ------------------------------------------------------------------
   9. HEADER NAVIGATION: MENU ITEMS
   WordPress menus render each item as an <li> directly inside the
   flex .nav (header.php strips the <ul> via items_wrap), and those
   list items kept their default markers, which printed as heavy dots
   beside every link. The hardcoded fallback links had no <li>, which
   is why the dots only appeared once a menu was assigned.
   display: contents removes the <li> boxes (and their markers) from
   layout entirely, so the anchors become the flex items themselves,
   exactly as the design intended. While here: the labels step up to
   the same 16-17px readable floor the guide cards use, and hovering
   draws a brand underline in from the left. The current page keeps
   its static underline from main.css; the consultation button is
   excluded; the stacked mobile menu keeps its hairline dividers
   instead.
------------------------------------------------------------------ */
.nav li {
  display: contents;
  list-style: none;
}

.nav a {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.0625rem);
  position: relative;
  transition: color 0.18s var(--ease);
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s var(--ease);
}
.nav a:not(.btn):hover::after,
.nav a:not(.btn):focus-visible::after { transform: scaleX(1); }

@media (max-width: 52em) {
  .nav a:not(.btn)::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav a,
  .nav a:not(.btn)::after { transition: none; }
}

/* ------------------------------------------------------------------
   10. FOOTER MENUS: MARKERLESS ITEMS
   The guides column (.footer-contact) and the policy-links row
   (.footer-legal-links) are now driven by WordPress menus, rendered as
   bare <li> items like the header nav. As with rule 9, drop the <li>
   boxes out of layout so their markers disappear and the anchors become
   the direct children the existing footer rules already style: a stack
   in the guides column, flex items in the policy row.
------------------------------------------------------------------ */
.footer-contact li,
.footer-legal-links li {
  display: contents;
  list-style: none;
}

/* Guides column: stack the mirrored header links, whatever the length. */
.site-footer .footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}

/* ------------------------------------------------------------------
   11. HEADER LOGO: COLOR SWAP ON HOVER
   The header wordmark inverts on hover: the ink half turns brand blue
   and the blue half turns ink, so the two colors trade places. Scoped
   to .site-header so the footer logo (white on the dark footer) stays
   as it is. The fill transition rides on both path groups so the swap
   eases rather than snaps. :focus-visible mirrors it for keyboard
   users, matching the pattern used elsewhere in this file.
------------------------------------------------------------------ */
.site-header .brand .logoColor1,
.site-header .brand .logoColor2 {
  transition: fill 0.2s var(--ease);
}
.site-header .brand:hover .logoColor1,
.site-header .brand:focus-visible .logoColor1 { fill: var(--ink); }
.site-header .brand:hover .logoColor2,
.site-header .brand:focus-visible .logoColor2 { fill: var(--brand); }


/* ------------------------------------------------------------------
   12. MENU LISTS RESTORED
   Screen readers need <li> items inside a <ul>, so header.php and
   footer.php now wrap menu items in <ul class="menu-bare"> instead
   of stripping the wrapper. This rule dissolves the list and its
   items out of layout, so the anchors stay the direct flex or grid
   children the existing rules style. Rules 9 and 10 still apply;
   the overlap is harmless.
------------------------------------------------------------------ */
.menu-bare,
.menu-bare > li {
  display: contents;
  list-style: none;
}

/* ------------------------------------------------------------------
   13. LIBRARY BAND: HEAD LINK CONTRAST
   "All guides →" sits on the mist band, where the default brand
   link color measures 4.19:1, just under the 4.5:1 floor. Brand
   deep clears it (9.2:1) and matches the card links around it.
------------------------------------------------------------------ */
.home-section--tint .home-section__head a { color: var(--brand-deep); }


/* ------------------------------------------------------------------
   14. TOC NUMBERS AND TARGETED FOOTNOTES: BRAND ON TINT
   The TOC's chapter and section numbers are brand blue on the mist
   panel (4.19:1, under the 4.5:1 floor); brand deep clears it at
   9.2:1 and matches the panel's heading. Same math for a footnote
   number when its reference row is target-highlighted: brand on
   wash is 4.05:1, brand deep is 8.9:1. The extra .toc qualifier
   keeps this override winning regardless of stylesheet order.
------------------------------------------------------------------ */
.toc .toc__no { color: var(--brand-deep); }
.references li:target .fn-no { color: var(--brand-deep); }