/*
 * Laidre theme layer. Loaded after tailwind.css.
 * 1. Neutralise WordPress wrappers so the Tailwind markup lays out exactly as on the Next.js site.
 * 2. Small helpers used by the converted blocks (lw-*).
 */

/* 1. Wrappers --------------------------------------------------------- */
body { margin: 0; }
.wp-site-blocks { padding: 0 !important; }
.wp-site-blocks > *,
.wp-site-blocks > * + * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.wp-site-blocks > .lw-part,
.wp-site-blocks > .wp-block-template-part,
.wp-block-post-content,
.entry-content { display: contents; }
:where(.wp-block-group) { margin: 0; }
figure.wp-block-image,
figure.wp-block-video { margin: 0; }
:where(ul.wp-block-list, ol.wp-block-list) { padding: 0; margin: 0; list-style: none; }
.wp-block-details summary { cursor: pointer; }

/* 2. Helpers ---------------------------------------------------------- */

/* A paragraph that only exists so an inline element (a pill link, a badge) can be edited. */
.lw-contents { display: contents; }

/* Images that fill their box (Next.js <Image fill>). */
.wp-block-image.lw-fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.wp-block-image.lw-fill img,
.wp-block-image.lw-fill a { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; color: transparent; display: block; }
.wp-block-image.lw-fill a img { position: static; }

/* Sized images (logos, badges, portraits). The size classes sit on the <figure>. */
.wp-block-image.lw-img { display: block; }
.wp-block-image.lw-img a { display: block; height: 100%; }
.wp-block-image.lw-img img { display: block; height: 100%; width: auto; max-width: none; color: transparent; }
.wp-block-image.lw-img.w-full img { width: 100%; }
.wp-block-image.lw-img.object-cover img { object-fit: cover; }

/* Background video (home hero). */
.wp-block-video.lw-fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.wp-block-video.lw-fill video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cards: the heading link is stretched over the whole card. */
.lw-card-link { position: relative; }
.lw-card-link a.lw-stretch { color: inherit; text-decoration: none; }
.lw-card-link a.lw-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Trailing arrow icon (replaces the inline SVG in "Read more" style links). */
.lw-arrow-after::after {
	content: ""; display: inline-block; width: 1rem; height: 1rem; flex-shrink: 0; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* FAQ (core Details block styled like the original accordion). */
.lw-faq > summary {
	display: flex; cursor: pointer; list-style: none; align-items: center; justify-content: space-between; gap: 1rem;
	font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: #1a1a1a;
}
.lw-faq > summary::-webkit-details-marker { display: none; }
.lw-faq > summary::marker { content: none; }
.lw-faq > summary::after {
	content: ""; width: 1.25rem; height: 1.25rem; flex-shrink: 0; background-color: currentColor;
	transition-property: transform; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lw-faq[open] > summary::after { transform: rotate(45deg); }

/* Fade-in on scroll (FadeIn component). JS adds .is-visible. */
.lw-fade { transition-property: all; transition-timing-function: cubic-bezier(0,0,.2,1); transition-duration: .7s; }
/* Hide for the fade-in only when JS is running, so content never stays invisible without it. */
.lw-js .lw-fade { opacity: 0; transform: translateY(1rem); }
@media print { .lw-fade { opacity: 1 !important; transform: none !important; } }
.lw-js .lw-fade.is-visible, .lw-fade.is-visible { opacity: 1; transform: none; }
.lw-fade.is-visible.lw-delay-50 { transition-delay: 50ms; }
.lw-fade.is-visible.lw-delay-75 { transition-delay: 75ms; }
.lw-fade.is-visible.lw-delay-100 { transition-delay: 100ms; }
.lw-fade.is-visible.lw-delay-125 { transition-delay: 125ms; }
.lw-fade.is-visible.lw-delay-150 { transition-delay: 150ms; }
.lw-fade.is-visible.lw-delay-200 { transition-delay: 200ms; }
.lw-fade.is-visible.lw-delay-225 { transition-delay: 225ms; }
.lw-fade.is-visible.lw-delay-250 { transition-delay: 250ms; }
.lw-fade.is-visible.lw-delay-300 { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) { .lw-fade { transition: none; opacity: 1; transform: none; } }

/* Project slider (home). */
.lw-slider-track { will-change: transform; }

/* 3. Accent colour: Dylan's "New Yellow" (#F7A823, screen version of CMYK 0/35/100/0) -----------
 * The palette slug stays "taupe" so existing content keeps working; tailwind.css now maps it to #F7A823.
 * Yellow is about 2:1 on white, so it is only used as a fill, line or tag on light backgrounds
 * (always with dark text on it). Accent TEXT on light backgrounds uses a deep yellow (#8F5A00, 5:1+),
 * and the bright yellow is used for text only on charcoal, where it is 7:1.
 */
:root { --lw-yellow: #F7A823; --lw-yellow-text: #8F5A00; --lw-yellow-soft: #FDEBC8; }

/* Accent text and hover text on light backgrounds. */
.text-taupe,
.hover\:text-taupe:hover,
.group:hover .group-hover\:text-taupe { color: var(--lw-yellow-text); }

/* On charcoal (dark sections, footer, dark CTA boxes) the bright yellow reads well. */
.bg-charcoal .text-taupe,
.bg-charcoal .hover\:text-taupe:hover,
.bg-charcoal .group:hover .group-hover\:text-taupe { color: var(--lw-yellow); }

/* Yellow fills always carry dark text. */
.bg-taupe { color: #2B2B2B; }
.hover\:bg-taupe:hover { color: #2B2B2B; }

/* Yellow buttons on charcoal used to hover to charcoal (invisible on a charcoal section). Hover to white instead. */
.bg-charcoal .bg-taupe.hover\:bg-charcoal:hover { background-color: #fff; color: #2B2B2B; }

/* Underlines: keep the yellow line, but make it heavier so it reads on white. */
.decoration-taupe { text-decoration-thickness: 2px; }

/* Focus rings: yellow is too faint on white, so use charcoal there and yellow on charcoal. */
:focus-visible { outline-color: #2B2B2B; }
.focus-visible\:outline-taupe:focus-visible { outline-color: #2B2B2B; }
.focus\:ring-taupe:focus { --tw-ring-color: var(--lw-yellow); }
.bg-charcoal :focus-visible,
.bg-charcoal .focus-visible\:outline-taupe:focus-visible { outline-color: var(--lw-yellow); }

/* Header: a thin yellow rule along the top, like the strips on the capability statement. */
header.sticky { border-top: 4px solid var(--lw-yellow); }

/* 4. Stats band: the "80+ Clients" tile links to the clients section (#clients). ------------------ */
.lw-stat-link { position: relative; border-radius: 0.5rem; }
.lw-stat-link a.lw-stretch { color: inherit; text-decoration: none; }
.lw-stat-link a.lw-stretch::after { content: ""; position: absolute; inset: -0.5rem; z-index: 1; border-radius: 0.75rem; }
.lw-stat-link a.lw-stretch:focus-visible { outline: none; }
.lw-stat-link a.lw-stretch:focus-visible::after { outline: 2px solid #2B2B2B; outline-offset: 2px; }
.lw-stat-link .lw-stat-label { display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: underline; text-decoration-color: rgba(43,43,43,.45); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lw-stat-link .lw-stat-label::after {
	content: ""; display: inline-block; width: 0.9rem; height: 0.9rem; background-color: currentColor; transition: transform .2s;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lw-stat-link:hover .lw-stat-label { text-decoration-color: #2B2B2B; color: #2B2B2B; }
.lw-stat-link:hover .lw-stat-label::after { transform: translateY(2px); }

/* 5. Clients ("Who we work with", home #clients). Built from core blocks so it can be edited. ----- */
.lw-clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; padding: 0; list-style: none; }
@media (min-width: 640px) { .lw-clients { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.lw-client { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; }
.lw-client-tile { display: flex; align-items: center; justify-content: center; height: 6.5rem; padding: 1.25rem 1.5rem; border-radius: 0.75rem; background: #fff; border-top: 3px solid var(--lw-yellow); }
@media (min-width: 1024px) { .lw-client-tile { height: 7.5rem; } }
.lw-client-tile figure.wp-block-image { margin: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.lw-client-tile figure.wp-block-image img { display: block; max-height: 3.25rem; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.lw-client-tile figure.wp-block-image.lw-logo-tall img { max-height: 4rem; }
.lw-client-tile figure.wp-block-image.lw-logo-wide img { max-height: 2.25rem; }
.lw-client-tile .lw-client-wordmark { margin: 0; text-align: center; font-family: var(--font-manrope), sans-serif; font-weight: 800; font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.01em; color: #2B2B2B; }
@media (min-width: 1024px) { .lw-client-tile .lw-client-wordmark { font-size: 1.35rem; } }
.lw-client-name { margin: 0; font-size: 0.8125rem; line-height: 1.25rem; color: rgba(255,255,255,.75); }
.editor-styles-wrapper .lw-client-tile { min-height: 6.5rem; height: auto; }

/* 6. Client quote on project pages (core Quote block with .lw-quote). ----- */
.wp-block-quote.lw-quote { margin-left: 0; margin-right: 0; padding: 0.25rem 0 0.25rem 1.5rem; border-left: 4px solid var(--lw-yellow); }
.wp-block-quote.lw-quote p { margin: 0; font-family: var(--font-manrope), sans-serif; font-size: 1.25rem; line-height: 1.55; font-weight: 500; color: #1A1A1A; }
@media (min-width: 1024px) { .wp-block-quote.lw-quote p { font-size: 1.5rem; } }
.wp-block-quote.lw-quote cite { display: block; margin-top: 1rem; font-style: normal; font-size: 0.875rem; line-height: 1.25rem; color: rgba(26,26,26,.7); }

/* 7. No-photo placeholder (project cards and pages without a photo): a faint Laidre mark on the soft grey. ----- */
.aspect-\[4\/3\].bg-ink\/10, .aspect-\[16\/9\].bg-ink\/10 { position: relative; overflow: hidden; }
.aspect-\[4\/3\].bg-ink\/10::after, .aspect-\[16\/9\].bg-ink\/10::after { content: ""; position: absolute; inset: 0; background: url("/wp-content/uploads/2026/11/Laidre-Logo-dark-300x103.png") center / 32% auto no-repeat; opacity: .14; pointer-events: none; }
.aspect-\[4\/3\].bg-ink\/10::before, .aspect-\[16\/9\].bg-ink\/10::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lw-yellow); opacity: .9; }

/* 8. Client logo marquee (#clients). JS clones the set for a seamless loop; without JS or with reduced motion it is a wrapped, static row. ----- */
.lw-marquee { position: relative; margin-top: 2.5rem; }
.lw-marquee-track { display: flex; width: max-content; }
.lw-marquee-set { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0; margin: 0; }
.lw-marquee:not(.is-running) .lw-marquee-track { width: auto; }
.lw-marquee:not(.is-running) .lw-marquee-set { justify-content: flex-start; }
.lw-marquee.is-running { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.lw-marquee.is-running .lw-marquee-set { flex-wrap: nowrap; padding-right: 1rem; }
.lw-marquee.is-running .lw-marquee-track { animation: lw-marquee var(--lw-marquee-duration, 70s) linear infinite; }
.lw-marquee.is-running:hover .lw-marquee-track, .lw-marquee.is-running:focus-within .lw-marquee-track, .lw-marquee.is-paused .lw-marquee-track { animation-play-state: paused; }
@keyframes lw-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .lw-marquee .lw-marquee-track { animation: none !important; } }
.lw-marquee-item { flex: 0 0 auto; margin: 0; }
.lw-marquee .lw-client-tile { width: 9rem; height: 4.75rem; padding: 0.85rem 1rem; }
@media (min-width: 640px) { .lw-marquee .lw-client-tile { width: 11rem; height: 5.75rem; padding: 1rem 1.25rem; } }
.lw-client-tile--dark { background: #1A1A1A; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.lw-marquee .lw-client-tile figure.wp-block-image img { max-height: 2.6rem; filter: grayscale(1); opacity: .72; transition: filter .3s ease, opacity .3s ease; }
.lw-marquee .lw-client-tile figure.wp-block-image.lw-logo-tall img { max-height: 3.25rem; }
.lw-marquee .lw-client-tile .lw-client-wordmark { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; color: #4a4a4a; transition: color .3s ease; }
.lw-client-tile--dark figure.wp-block-image img { opacity: .85; }
.lw-marquee-item:hover .lw-client-tile figure.wp-block-image img { filter: none; opacity: 1; }
.lw-marquee-item:hover .lw-client-tile .lw-client-wordmark { color: #1A1A1A; }
@media (min-width: 640px) { .lw-marquee .lw-client-tile .lw-client-wordmark { font-size: 1.2rem; } }
.lw-marquee-toggle { display: flex; width: max-content; margin: 1rem 0 0 auto; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: rgba(255,255,255,.85); font-size: .75rem; font-weight: 600; cursor: pointer; }
.lw-marquee-toggle:hover { border-color: var(--lw-yellow); color: #fff; }
.lw-marquee-toggle:focus-visible { outline: 2px solid var(--lw-yellow); outline-offset: 2px; }
.lw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.editor-styles-wrapper .lw-marquee .lw-client-tile { height: auto; min-height: 4.75rem; }

/* 9. Sharper corners (4 Nov review): cards, images and tiles go from 16px to 2px. Pills and buttons stay round. ----- */
.rounded-soft { border-radius: 2px; }
.rounded-t-soft { border-top-left-radius: 2px; border-top-right-radius: 2px; }
.rounded-b-soft { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; }
.rounded-xl, .rounded-lg, .rounded-md { border-radius: 2px; }
.lw-client-tile, .lw-stat-link, .lw-stat-link a.lw-stretch::after { border-radius: 2px; }

/* 10. Contact form ([laidre_contact_form]). ----- */
.lw-form { margin-top: 1.5rem; }
.lw-form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem 1.25rem; }
@media (min-width: 640px) { .lw-form-grid { grid-template-columns: 1fr 1fr; } .lw-field-wide { grid-column: 1 / -1; } }
.lw-field label { display: block; margin-bottom: .35rem; font-size: .875rem; font-weight: 600; color: #1A1A1A; }
.lw-opt { font-weight: 400; color: rgba(26,26,26,.7); }
.lw-field input, .lw-field textarea { display: block; width: 100%; padding: .7rem .85rem; font: inherit; font-size: 1rem; color: #1A1A1A; background: #fff; border: 1px solid rgba(26,26,26,.35); border-radius: 2px; }
.lw-field textarea { resize: vertical; min-height: 9rem; }
.lw-field input:focus, .lw-field textarea:focus { outline: 2px solid #2B2B2B; outline-offset: 1px; border-color: #2B2B2B; }
.lw-field [aria-invalid="true"] { border-color: #B42318; }
.lw-field-err, .lw-form-alert { margin: .35rem 0 0; font-size: .875rem; color: #B42318; font-weight: 600; }
.lw-form-alert { margin: 0 0 1rem; }
.lw-check { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1.25rem; padding: .85rem 1rem; background: var(--lw-yellow-soft); border-left: 4px solid var(--lw-yellow); font-weight: 600; color: #1A1A1A; cursor: pointer; }
.lw-check input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: #2B2B2B; flex: 0 0 auto; }
.lw-form-submit { margin-top: 1.25rem; display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.75rem; border: 0; border-radius: 9999px; background: #2B2B2B; color: #fff; font-weight: 600; font-size: .9375rem; cursor: pointer; transition: background-color .2s, color .2s; }
.lw-form-submit:hover { background: var(--lw-yellow); color: #2B2B2B; }
.lw-form-submit:focus-visible { outline: 2px solid #2B2B2B; outline-offset: 3px; }
.lw-form-note { margin-top: .85rem; font-size: .8125rem; color: rgba(26,26,26,.75); }
.lw-form-note a, .lw-form-thanks a { color: #1A1A1A; text-decoration: underline; }
.lw-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.lw-form-thanks { margin-top: 1.5rem; padding: 1.25rem 1.5rem; background: var(--lw-yellow-soft); border-left: 4px solid var(--lw-yellow); color: #1A1A1A; }
.lw-form-thanks-title { margin: 0 0 .35rem; font-family: var(--font-manrope), sans-serif; font-size: 1.25rem; font-weight: 700; }
.lw-form-thanks p { margin: 0; }

/* 11. "How do you say Laidre?" (footer, only when the recording exists). ----- */
.lw-say { display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; padding: .35rem .8rem; border: 1px solid rgba(255,255,255,.35); border-radius: 9999px; background: transparent; color: #fff; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.lw-say:hover, .lw-say.is-playing { border-color: var(--lw-yellow); color: var(--lw-yellow); }
.lw-say:focus-visible { outline: 2px solid var(--lw-yellow); outline-offset: 2px; }