/* ============================================================================
   gll-ux.css: lane UX of the 2026-10-13 grand audit (public pages only).
   Owner style: Inter Tight, ink/white/greys, square corners, 1px hairlines, no shadows or glows,
   gold only as 11px captions. Every motion here is opacity/transform only and is switched off
   under prefers-reduced-motion. Selectors carry :not(#guxN) boosters so they win over the
   up-to-4-id rules in gll-qoves / gll-final / gll-directory without touching those files.
   Report: /private/tmp/gll-audit-fixes/GRAND-UX.md
   ============================================================================ */

/* ── 1. Listing cards: one bottom line for the action row, ink titles, hover reveal ──────────
   Cards in a row were equal height but "View law firm" floated (y 567 vs 591 on /london).
   The card body becomes a column and the footer sits on margin-top:auto. Only the stacked
   (grid) card layout is touched: image column and body column both col-12. */
html:root body .listing-card:not(#gux1):not(#gux2) > .row.g-0:has(> .listing-card-img.col-12):has(> .listing-card-body.col-12){
  flex:1 1 auto;flex-direction:column;flex-wrap:nowrap}
html:root body .listing-card:not(#gux1):not(#gux2) > .row.g-0:has(> .listing-card-img.col-12) > .listing-card-body.col-12{
  flex:1 1 auto;display:flex;flex-direction:column}
html:root body .listing-card:not(#gux1):not(#gux2) > .row.g-0:has(> .listing-card-img.col-12) > .listing-card-body.col-12 > .card-footer{margin-top:auto}

/* titles: ink, not grey (labels below were darker than the name) */
html:root body .listing-card:not(#gux1):not(#gux2) :is(h3,h4,h5).display-9,
html:root body .listing-card:not(#gux1):not(#gux2) :is(h3,h4,h5).display-9 a{color:#0a0a0a !important}

/* hover / keyboard reveal: photo eases in 3% inside its frame, the name draws an ink underline */
html:root body .listing-card:not(#gux1) .listing-card-img > a{display:block;overflow:hidden}
html:root body .listing-card:not(#gux1) .listing-card-img img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
html:root body .listing-card:not(#gux1) :is(h3,h4,h5).display-9 a{
  text-decoration:none !important;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .4s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){
  html:root body .listing-card:not(#gux1):hover .listing-card-img img{transform:scale(1.03)}
  html:root body .listing-card:not(#gux1):hover :is(h3,h4,h5).display-9 a{background-size:100% 1px}
}
html:root body .listing-card:not(#gux1):focus-within :is(h3,h4,h5).display-9 a{background-size:100% 1px}

/* cards without a photo: neutral tint instead of blue-grey */
html:root body .listing-card-img.col-12:not(#gux1){background-color:#f2f2f2 !important}

/* ── 2. Contrast (WCAG 1.4.3 AA): muted text that measured under 4.5:1 ───────────────────── */
/* card labels: #8a9399 (3.13) on results pages, #777 (4.29) on profile cards */
html:root body .listing-card:not(#gux1):not(#gux2):not(#gux3) .display-11 p strong{color:#5f6b70 !important}
html:root body .listing-card:not(#gux1):not(#gux2):not(#gux3) .display-11 .mb-2 p{color:#222 !important}
html:root body .listing-card:not(#gux1):not(#gux2):not(#gux3) .gll-card-at{color:#5f6b70 !important}
/* rail headings two-tone grey: #8a9399 on #f4f4f2 was 2.84 (large text needs 3) */
html:root body :is(.glws-heading,.gsl-head :is(h2,h3)):not(#gux1):not(#gux2):not(#gux3) > span{color:#6b7378 !important;-webkit-text-fill-color:#6b7378 !important}
/* insights cards meta 4.34 */
html:root body .gll-ac:not(#gux1):not(#gux2) :is(.gll-ac__category,.gll-ac__date){color:#5f6b70 !important}
/* join strip / audience blocks (law-firms, lawyers, insights): 2.64 / 4.06 / gold 2.92 */
html:root body .gllr-xw:not(#gux1):not(#gux2) :is(.gllr-xsub,.gllr-xcap){color:#5f6b70 !important}
html:root body .gllr-xw:not(#gux1):not(#gux2) .gllr-xgl{color:#7A5B12 !important;font-size:11px !important}
html:root body :is(.gllr-xw ol li,.gllr-xcol):not(#gux1):not(#gux2) > p{color:#4f585c !important}
/* about hero caption: dark gold on black (3.97) -> light gold, 11px */
html:root body .gll-ah-eyebrow:not(#gux1):not(#gux2) span{color:#D4AF5A !important;font-size:11px !important}
/* profile sidebar secondary link (#898989, 3.5) */
html:root body .gll-sidebar-cta-link--secondary:not(#gux1):not(#gux2) span{color:#5f6b70 !important}

/* profile "Closed now" state and /lawyers accordion accent: #8a9399 (2.84 to 3.13) */
html:root body .gll-lw.gllp2:not(#gux1):not(#gux2) :is(.gllp2-openstate,.gll-status.closed){color:#5f6b70 !important}
html:root body:has(#gll-dir-mark) .gll-dir-acc:not(#gux1):not(#gux2){color:#5f6b70 !important}

/* rail caption on the #f2f2f2 band (4.45) and the search chip remove "x" (3.13) */
html:root body .glws-caption:not(#gux1):not(#gux2){color:#7A5B12 !important}
html:root body button.gll-x:not(#gux1):not(#gux2){color:#5f6b70 !important}
/* the fixed bar drew a faint navy shadow once scrolled (owner: no shadows anywhere) */
html:root body #sticky-header-nav:not(#gux1):not(#gux2){box-shadow:none !important}

/* ── 3. Footer brand mark: today's no-glow rule (footer *{filter:none}) left the logo black on black.
   The widget now sets the invert with !important; this is the belt-and-braces copy. ── */
html:root body footer .glf3-logo:not(#gux1) img{filter:brightness(0) invert(1) !important}

/* ── 4. Keyboard focus: hero search bars had no ring at all (outline:none + box-shadow:none) ── */
html:root body .gll-search-bar:not(#gux1):not(#gux2):not(#gux3) :is(input,select,button):focus-visible{
  outline:2px solid #0a0a0a !important;outline-offset:-2px !important}
html:root body .gll-search-bar:not(#gux1):not(#gux2):not(#gux3) .gll-go-btn:focus-visible{outline-color:#fff !important;outline-offset:-4px !important}
/* skip link: square, ink, white ring */
html body .gll-skip-link{border-radius:0 !important;background:#0a0a0a !important;font-family:'Inter Tight','Inter',sans-serif !important;min-height:44px;display:inline-flex;align-items:center}
html body .gll-skip-link:focus{outline:2px solid #fff !important;outline-offset:-4px !important}

/* ── 5. Home ─────────────────────────────────────────────────────────────────────────── */
/* "Counsel without borders": the figure had a 72px rounded bottom-right corner (44 on phones) with
   overflow hidden, which also clipped the caption's last word. Square, as everywhere else. */
html:root body #gll-team:not(#gux1) figure{border-radius:0 !important}
/* Law Firm of the Day: cards sat 8px inside the section edge (track padding) */
@media (min-width:992px){html:root body section.feature-widget:not(#gux1):not(#gux2) .gfd-duo.gsl-track{padding-left:0 !important;padding-right:0 !important}}
/* "More law firms" band: blue-grey tint -> palette tint */
html:root body section.listings-slider-widget.bg-light:not(#gux1):not(#gux2){background-color:#f2f2f2 !important}
/* "For law firms & lawyers" band: gold icons and link -> white (gold stays a caption) */
html:root body .gh2-col:not(#gux1):not(#gux2) .gh2-ic,html:root body .gh2-col:not(#gux1):not(#gux2) .gh2-ic i{color:#fff !important}
html:root body .gh2-col:not(#gux1):not(#gux2) p a{color:#fff !important;text-decoration:underline !important;text-underline-offset:3px;text-decoration-thickness:1px}
/* stat figures count up: tabular figures so the row never jitters while counting */
html body :is(#gh-figs b,.gll-stat-number,.iln-stat-n,.gla-stat-n,.glr-stat-n,[class*="stat-num"]){font-variant-numeric:tabular-nums}
/* photos fade in when loaded (the footer script sets opacity 0 until load): ease instead of a hard pop */
:where(main img){transition:opacity .45s ease}

/* ── 5b. Results "browse by practice area" band (header-default widget): cream wash, gold bars,
   lift-and-shadow hover -> white, ink, hairlines; Inter Tight 600 headings ── */
html:root body section.content-section:not(#gux1):not(#gux2){background:#fff !important}
html:root body section.content-section:not(#gux1):not(#gux2)::before{display:none !important}
html:root body section.content-section:not(#gux1):not(#gux2) :is(.page-title,.accordion-title){font-family:'Inter Tight','Inter',sans-serif !important;font-weight:600 !important;color:#0a0a0a !important;letter-spacing:-.02em}
html:root body section.content-section:not(#gux1):not(#gux2) .page-title{padding-bottom:0 !important}
html:root body section.content-section:not(#gux1):not(#gux2) .page-title::after{display:none !important}
html:root body section.content-section:not(#gux1):not(#gux2) .page-description a{color:#0a0a0a !important}
html:root body section.content-section:not(#gux1):not(#gux2) :is(.accordion-header,.accordion-header:hover,.categories-grid){background:#fff !important}
html:root body section.content-section:not(#gux1):not(#gux2) :is(.accordion-icon,.arrow-icon){stroke:#0a0a0a !important}
html:root body section.content-section:not(#gux1):not(#gux2) .category-card{min-height:44px;transition:border-color .2s ease !important}
html:root body section.content-section:not(#gux1):not(#gux2) .category-card:is(:hover,:focus-visible){border-color:#0a0a0a !important;transform:none !important;box-shadow:none !important}
html:root body .gll-def-eyebrow:not(#gux1) :is(.gll-def-eyebrow-accent,.gll-def-eyebrow-line){display:none !important}
html:root body .gll-def-eyebrow:not(#gux1) .gll-def-eyebrow-text{font-size:11px !important;color:#D4AF5A !important}
/* empty-state caption: no gold square before it (kept in an older rule) */
html:root body .glsr-empty-eyebrow:not(#gux1)::before{display:none !important}

/* ── 6. Smooth anchors land below the fixed bar (111px tall at desktop once scrolled, 81 on phones) ─────────────────────────────────────── */
html:root{scroll-padding-top:128px}
@media (max-width:991.98px){html:root{scroll-padding-top:96px}}

/* ── 7. Article reading progress: a 2px ink line on the top edge, driven by scroll (no JS).
   Only where the browser supports scroll timelines; inert elsewhere. ── */
@supports (animation-timeline: scroll()){
  html body:has(.gll-art__body)::after{content:"";position:fixed;left:0;right:0;top:0;height:2px;z-index:2147482000;
    background:#0a0a0a;transform-origin:0 50%;transform:scaleX(0);animation:gux-read linear both;animation-timeline:scroll(root block);pointer-events:none}
  @keyframes gux-read{to{transform:scaleX(1)}}
}

/* ── 8. Reduced motion ─────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html:root body .listing-card .listing-card-img img,html:root body .listing-card :is(h3,h4,h5).display-9 a{transition:none !important}
  html:root body .listing-card:hover .listing-card-img img{transform:none !important}
  :where(main img){transition:none}
}

/* ── 9. Print: profiles and articles print as clean black-on-white documents ─────────── */
@media print{
  @page{margin:16mm 14mm}
  html,body{background:#fff !important;color:#000 !important}
  body *{box-shadow:none !important;text-shadow:none !important;animation:none !important;transition:none !important}
  #sticky-header-nav,body > header,.gll-topbar,footer,.glf3,#gllCookie,#gm-progress,.gll-skip-link,.gll-art__sidebar,.gll-art__share-row,
  .gll-art__related-section,.gll-art__cta,.gllp2-share,.gll-sidebar-cta,.gll-lang,.modal,.offcanvas,.toast,iframe,video,
  .leaflet-container,[class*="map"]:has(.leaflet-container),form,.btn,button,.gsl-nav,.gfd-wrap,[data-print="hide"]{display:none !important}
  main,main *{color:#000 !important;background:transparent !important;border-color:#bbb !important}
  main a{text-decoration:underline !important}
  main .gll-art__body a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
  html body{padding-top:0 !important}
  .gll-art__hero{min-height:0 !important;padding:0 !important}
  .gll-art__hero-img,.gll-art__hero-overlay,body::after{display:none !important}
  .gll-art__layout{display:block !important}
  .gll-art__main{max-width:none !important;width:100% !important}
  h1,h2,h3{page-break-after:avoid;break-after:avoid}
  img{max-width:100% !important;page-break-inside:avoid;break-inside:avoid}
  p,li,blockquote{orphans:3;widows:3}
  html.gm .gm-rv{opacity:1 !important;transform:none !important}
}