/*
Theme Name: Whitlock & Lane
Template: kadence
Description: Child theme of Kadence for a wrongful death law firm. A fixed photo panel beside scrolling text; every section is a standard block the firm can edit.
Version: 2.0
*/

@font-face { font-family: "Host Grotesk"; src: url("fonts/host-grotesk.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("fonts/host-grotesk-italic.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("fonts/martian-mono.woff2") format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-style: normal; font-display: swap; }

:root {
    --wl-paper: #fbfaf7;
    --wl-ink: #1c1a20;
    --wl-ink-2: rgba(28, 26, 32, 0.72);
    --wl-ink-3: rgba(28, 26, 32, 0.5);
    --wl-rule: rgba(28, 26, 32, 0.14);
    --wl-lav: #7b6790;
    --wl-lav-deep: #4e3f5e;
    --wl-lav-soft: #ece6f1;
    --wl-gutter: clamp(20px, 4.4vw, 72px);
    --wl-head: 76px;
    --wl-sans: "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
    --wl-mono: "Martian Mono", ui-monospace, Menlo, monospace;
}

html { scroll-padding-top: 90px; }
body { font-family: var(--wl-sans); color: var(--wl-ink); background: var(--wl-paper); font-size: 17px; line-height: 1.65; overflow-x: clip; -webkit-font-smoothing: antialiased; }
.site, #wrapper, .content-bg, body.content-style-unboxed .site { background: transparent; }
h1, h2, h3, h4, .site-title, .entry-title { font-family: var(--wl-sans); font-weight: 600; letter-spacing: -0.03em; color: inherit; }
h2 { font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.04; margin: 0 0 0.5em; }
h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.2; margin: 0 0 0.35em; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration-color: var(--wl-lav); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--wl-lav-deep); }

.wl-sample-bar { margin: 0; padding: 7px var(--wl-gutter); background: var(--wl-lav-soft); color: var(--wl-lav-deep); font-family: var(--wl-mono); font-size: 0.66rem; letter-spacing: 0.02em; line-height: 1.5; }
.wl-label { font-family: var(--wl-mono); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wl-lav); margin: 0 0 1.6em; }

/* header: a plain rule, nothing more */
#masthead, #masthead .site-header-row-container-inner { background: var(--wl-paper); }
#masthead .site-header-row-container-inner { border-bottom: 1px solid var(--wl-ink); }
#masthead .site-container { padding-left: var(--wl-gutter); padding-right: var(--wl-gutter); max-width: none; }
.site-header .site-title { font-family: var(--wl-sans); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.03em; }
.site-header .site-title a, #masthead .site-branding .site-title { color: var(--wl-ink) !important; }
.main-navigation .primary-menu-container > ul > li.menu-item > a { font-family: var(--wl-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wl-ink); }
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover, .main-navigation .primary-menu-container > ul > li.current-menu-item > a, .main-navigation .primary-menu-container > ul > li.current-menu-ancestor > a { color: var(--wl-lav); }
.main-navigation .primary-menu-container > ul > li.menu-item.wl-cta > a { background: var(--wl-ink); color: var(--wl-paper); padding: 0.9em 1.2em; margin-left: 12px; border-radius: 0; }
.main-navigation .primary-menu-container > ul > li.menu-item.wl-cta > a:hover { background: var(--wl-lav-deep); color: var(--wl-paper); }
.menu-toggle-open { color: var(--wl-ink) !important; }
#mobile-drawer .drawer-inner { background: var(--wl-ink); }
.header-navigation .header-menu-container ul ul.sub-menu { background: var(--wl-paper); border: 1px solid var(--wl-ink); box-shadow: none; }
.header-navigation .header-menu-container ul ul li.menu-item > a { font-family: var(--wl-sans); font-size: 0.92rem; color: var(--wl-ink); text-transform: none; letter-spacing: 0; }

/* the split page: photos stay, words move */
.entry-content > .alignfull { margin: 0 !important; width: auto; max-width: none; }
.entry-content > .wp-block-group.wl-page { padding: 0 !important; }
.wl-page > .wp-block-group__inner-container > .wp-block-columns.wl-split { margin: 0; gap: 0; align-items: stretch; }
.wl-split > .wp-block-column:first-child { position: relative; border-right: 1px solid var(--wl-ink); }
.wl-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--wl-ink); }
.admin-bar .wl-stage { top: 32px; height: calc(100svh - 32px); }
.wl-stage > .wp-block-group__inner-container { position: absolute; inset: 0; }
.wl-stage .wp-block-image { position: absolute !important; inset: 0; margin: 0 !important; opacity: 0; transition: opacity 0.9s ease; }
.wl-stage .wp-block-image.is-on { opacity: 1; }
.wl-stage .wp-block-image:first-child { opacity: 1; }
.wl-stage.is-live .wp-block-image:first-child:not(.is-on) { opacity: 0; }
.wl-stage .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 6s ease-out; }
.wl-stage .wp-block-image.is-on img { transform: scale(1); }
.wl-stage .wp-block-image figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 16px var(--wl-gutter) 18px; font-family: var(--wl-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(251, 250, 247, 0.85); text-align: left; background: linear-gradient(0deg, rgba(20, 18, 24, 0.7), rgba(20, 18, 24, 0)); }

.wl-flow > .wp-block-group__inner-container > * { margin-top: 0; }
.wl-ch { padding: clamp(56px, 8vw, 120px) var(--wl-gutter); border-bottom: 1px solid var(--wl-ink); min-height: 70svh; display: flex; flex-direction: column; justify-content: center; }
.wl-ch > .wp-block-group__inner-container { max-width: 640px; width: 100%; }
.wl-ch > .wp-block-group__inner-container > * { margin-top: 0; }
.wl-ch:last-child { border-bottom: 0; }

/* opening */
.wl-open { min-height: calc(100svh - var(--wl-head)); }
.wl-open h1 { font-size: clamp(2.6rem, 4.6vw, 4.6rem); line-height: 0.98; font-weight: 650; letter-spacing: -0.045em; margin: 0 0 0.45em; }
.wl-open .wl-lede { font-size: clamp(1.08rem, 1.3vw, 1.22rem); color: var(--wl-ink-2); max-width: 32rem; }
.wl-facts { list-style: none; padding: 0 !important; margin: 2.2em 0 0 !important; border-top: 1px solid var(--wl-ink); }
.wl-facts li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--wl-rule); margin: 0; font-size: 0.95rem; color: var(--wl-ink-2); }
.wl-facts li strong { font-family: var(--wl-mono); font-weight: 400; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wl-ink); padding-top: 3px; }

.wl-big { font-size: clamp(1.4rem, 2.2vw, 1.95rem); line-height: 1.3; letter-spacing: -0.02em; font-weight: 450; color: var(--wl-ink); }

/* buttons: square, and plain links with arrows */
.wp-block-button__link, .wl-submit { font-family: var(--wl-sans); font-weight: 600; font-size: 0.95rem; border-radius: 0 !important; padding: 1em 1.4em; background: var(--wl-ink); color: var(--wl-paper); border: 1px solid var(--wl-ink); transition: background 0.2s ease, color 0.2s ease; }
.wp-block-button__link::after { content: " \2192"; display: inline-block; transition: transform 0.25s ease; }
.wp-block-button__link:hover, .wl-submit:hover { background: var(--wl-lav-deep); border-color: var(--wl-lav-deep); color: var(--wl-paper); }
.wp-block-button__link:hover::after { transform: translateX(4px); }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent !important; color: var(--wl-ink) !important; border-color: var(--wl-ink) !important; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wl-ink) !important; color: var(--wl-paper) !important; }
.wp-block-buttons { gap: 10px; }

/* the cases, as a ledger */
.wl-ledger > .wp-block-group__inner-container { border-top: 1px solid var(--wl-ink); }
.wl-row { position: relative; border-bottom: 1px solid var(--wl-rule); overflow: hidden; }
.wl-row::before { content: ""; position: absolute; inset: 0; background: var(--wl-lav-soft); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(.2, .7, .2, 1); }
.wl-row > .wp-block-group__inner-container { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) 1.5rem; column-gap: 14px; padding: 18px 6px; }
.wl-row > .wp-block-group__inner-container > * { margin: 0 !important; }
.wl-row .wl-n { font-family: var(--wl-mono); font-size: 0.7rem; color: var(--wl-ink-3); padding-top: 6px; grid-row: 1 / span 2; }
.wl-row h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); }
.wl-row h3 a { text-decoration: none; }
.wl-row h3 a::after { content: ""; position: absolute; inset: 0; }
.wl-row .wl-line { grid-column: 2; font-size: 0.92rem; color: var(--wl-ink-2); margin-top: 2px !important; }
.wl-row .wl-go { grid-column: 3; grid-row: 1; font-size: 1.1rem; transition: transform 0.25s ease; }
.wl-row:hover::before { transform: scaleX(1); }
.wl-row:hover .wl-go { transform: translateX(4px); color: var(--wl-lav-deep); }
.wl-tag { font-family: var(--wl-mono); font-size: 0.56rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wl-lav); border: 1px solid currentColor; padding: 0.15em 0.5em; margin-left: 0.7em; vertical-align: middle; }

/* how it works: a plain numbered column */
.wl-steps { list-style: none; padding: 0 !important; margin: 0 !important; counter-reset: s; }
.wl-steps li { counter-increment: s; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--wl-rule); margin: 0; color: var(--wl-ink-2); }
.wl-steps li::before { content: "0" counter(s); font-family: var(--wl-mono); font-size: 0.7rem; color: var(--wl-lav); padding-top: 5px; }
.wl-steps li strong { display: block; color: var(--wl-ink); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 2px; }

.wl-promises { list-style: none; padding: 0 !important; margin: 0 0 1.8em !important; }
.wl-promises li { padding: 10px 0 10px 26px; border-bottom: 1px solid var(--wl-rule); position: relative; margin: 0; }
.wl-promises li::before { content: "\2014"; position: absolute; left: 0; color: var(--wl-lav); }

/* questions */
.wp-block-details { border-top: 1px solid var(--wl-rule); margin: 0 !important; padding: 0; }
.wp-block-details:last-child { border-bottom: 1px solid var(--wl-rule); }
.wp-block-details summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 1.1rem; letter-spacing: -0.015em; padding: 18px 40px 18px 0; position: relative; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--wl-mono); font-size: 1rem; color: var(--wl-lav); }
.wp-block-details[open] summary::after { content: "\2212"; }
.wp-block-details > p { color: var(--wl-ink-2); padding-bottom: 14px; }

/* closing */
.wl-close { background: var(--wl-lav-soft); }
.wl-close h2 { font-size: clamp(2.4rem, 4.4vw, 4rem); letter-spacing: -0.045em; }

/* inner pages */
.wl-crumbs { font-family: var(--wl-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wl-ink-3); margin-bottom: 2em !important; }
.wl-crumbs a { text-decoration: none; color: var(--wl-ink-2); }
.wl-crumbs a:hover { color: var(--wl-lav); }
.wl-checks { list-style: none; padding: 0 !important; margin: 0 0 2em !important; border-top: 1px solid var(--wl-ink); }
.wl-checks li { padding: 11px 0 11px 28px; border-bottom: 1px solid var(--wl-rule); position: relative; margin: 0; }
.wl-checks li::before { content: "\2713"; position: absolute; left: 2px; color: var(--wl-lav); font-size: 0.9rem; }
.wl-note-box { border: 1px solid var(--wl-ink); padding: clamp(20px, 2.6vw, 30px); background: var(--wl-paper); }
.wl-note-box > .wp-block-group__inner-container > * { margin-top: 0; }

.wl-people > .wp-block-group__inner-container { border-top: 1px solid var(--wl-ink); }
.wl-person { padding: 20px 0; border-bottom: 1px solid var(--wl-rule); }
.wl-person > .wp-block-group__inner-container { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 18px; }
.wl-person > .wp-block-group__inner-container > * { grid-column: 2; margin: 0 !important; }
.wl-person .wl-initials { grid-column: 1; grid-row: 1 / span 3; font-family: var(--wl-mono); font-size: 0.72rem; color: var(--wl-lav); padding-top: 5px; }
.wl-person .wl-role { font-family: var(--wl-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wl-ink-3); margin: 2px 0 8px !important; }
.wl-person p:last-child { color: var(--wl-ink-2); font-size: 0.96rem; }

/* contact form */
.wl-direct p { margin: 0 0 14px; color: var(--wl-ink-2); }
.wl-direct strong { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; color: var(--wl-ink); }
.wl-form-wrap { border-top: 1px solid var(--wl-ink); padding-top: 24px; }
.wl-form label { display: block; font-family: var(--wl-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wl-ink); margin-bottom: 18px; }
.wl-form label span { color: var(--wl-ink-3); text-transform: none; }
.wl-form input[type="text"], .wl-form input[type="email"], .wl-form input[type="tel"], .wl-form select, .wl-form textarea { display: block; width: 100%; margin-top: 8px; font: 400 1rem var(--wl-sans); letter-spacing: 0; text-transform: none; padding: 10px 0; border: 0; border-bottom: 1px solid var(--wl-ink); border-radius: 0; background: transparent; color: var(--wl-ink); box-sizing: border-box; }
.wl-form textarea { border: 1px solid var(--wl-ink); padding: 10px 12px; }
.wl-form input:focus, .wl-form select:focus, .wl-form textarea:focus { outline: none; border-color: var(--wl-lav); box-shadow: 0 1px 0 0 var(--wl-lav); }
.wl-row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.wl-captcha { background: var(--wl-lav-soft); padding: 14px 16px 2px; margin-bottom: 20px; }
.wl-captcha input { max-width: 140px; }
.wl-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wl-submit { cursor: pointer; }
.wl-note { font-size: 0.85rem; color: var(--wl-ink-3); margin: 12px 0 0; }
.wl-done { background: var(--wl-lav-soft); border-left: 3px solid var(--wl-lav); padding: 16px 18px; margin-bottom: 22px; }
.wl-done p { margin: 0; color: var(--wl-ink-2); }
.wl-done .wl-done__title { font-weight: 600; font-size: 1.15rem; color: var(--wl-ink); margin-bottom: 4px; }
.wl-error { background: #f8e7e2; color: #7d2a19; padding: 12px 16px; font-size: 0.95rem; }

/* footer */
#colophon .site-footer-row-container-inner { background: var(--wl-paper); color: var(--wl-ink-3); border-top: 1px solid var(--wl-ink); }
#colophon .site-container { padding-left: var(--wl-gutter); padding-right: var(--wl-gutter); max-width: none; }
.site-footer .footer-html { font-family: var(--wl-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 781px) {
    .wl-page > .wp-block-group__inner-container > .wp-block-columns.wl-split { flex-direction: column; }
    .wl-split > .wp-block-column { flex-basis: 100% !important; }
    .wl-split > .wp-block-column:first-child { border-right: 0; border-bottom: 1px solid var(--wl-ink); position: sticky; top: 0; z-index: 5; height: 34svh; }
    .wl-stage { height: 34svh; }
    .admin-bar .wl-stage { top: 0; height: 34svh; }
    .wl-ch { min-height: 0; padding: 48px var(--wl-gutter); }
    .wl-open { min-height: 0; }
    .wl-facts li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .wl-row-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}
.wl-steps li { display: block; position: relative; padding: 18px 0 18px 3.4rem; }
.wl-steps li::before { position: absolute; left: 0; top: 22px; padding-top: 0; }