/*
Theme Name: Winnfield
Theme URI: https://winnfield.ai
Template: twentytwentyfive
Description: Winnfield's site design (option A, "Casefile"): IBM Plex Sans and Mono served from this theme, square corners, hairline rules, one accent. A child of Twenty Twenty-Five.
Version: 1.0.2
Requires at least: 6.7
Requires PHP: 7.4
Update URI: false
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: winnfield
*/

/* Every rule here styles a `wf-*` class carried by plain core blocks, or the theme's template parts.
   Colors, fonts, sizes and buttons live in theme.json. No shadows, gradients or rounded corners. */

:root {
	--wf-ground: var(--wp--preset--color--ground);
	--wf-ink: var(--wp--preset--color--ink);
	--wf-body: var(--wp--preset--color--body);
	--wf-muted: var(--wp--preset--color--muted);
	--wf-muted-2: var(--wp--preset--color--muted-2);
	--wf-rule: var(--wp--preset--color--rule);
	--wf-card: var(--wp--preset--color--card);
	--wf-field: var(--wp--preset--color--field);
	--wf-accent: var(--wp--preset--color--accent);
	--wf-mono: var(--wp--preset--font-family--plex-mono);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.wp-site-blocks) :focus-visible { outline: 2px solid var(--wf-accent); outline-offset: 2px; }
.wp-element-button, .wp-block-button__link { border-radius: 0; box-shadow: none; }

/* Containers that lay out their own children: no flow margins inside them. */
body :is(.wf-header-inner, .wf-nav, .wf-hero, .wf-hero-copy, .wf-evidence, .wf-verdict, .wf-dl, .wf-section,
	.wf-section-head, .wf-steps, .wf-step, .wf-strip, .wf-cell, .wf-split, .wf-form-card, .wf-partners-copy,
	.wf-footer-inner, .wf-page-head, .wf-cards, .wf-card-item, .wf-faq, .wf-faq-item, .wf-example-section) > * {
	margin-block-start: 0; margin-block-end: 0; }

/* ---------- Header ---------- */
.wf-header-inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
	padding: 28px 0; border-bottom: 1px solid var(--wf-rule);
}
.wf-brand a { display: inline-flex; align-items: center; gap: 10px; color: var(--wf-ink); text-decoration: none; }
.wf-brand a::before {
	content: "W";
	content: "W" / "";
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border: 2px solid var(--wf-ink);
	font-family: var(--wf-mono); font-size: 14px; font-weight: 500; letter-spacing: 0;
}
.wf-brand a:hover { color: var(--wf-ink); }
.wf-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.wf-nav .wp-block-navigation { font-size: 15px; }
.wf-nav .wp-block-navigation .wp-block-navigation__container,
.wf-nav .wp-block-navigation { gap: 8px 28px; }
.wf-nav .wp-block-navigation-item__content { color: var(--wf-body); text-decoration: none; }
.wf-nav .wp-block-navigation-item__content:hover,
.wf-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wf-ink); text-decoration: underline; text-underline-offset: 4px; }
.wf-nav-cta .wp-block-button__link { padding: 11px 17px; font-size: 15px; white-space: nowrap; }

/* ---------- Home: hero and the illustrative evidence card ---------- */
.wf-hero {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	gap: 56px; padding: 88px 0 96px; align-items: center;
}
/* Where the hero has two columns (1040px and wider), the copy takes 7 parts to the image's 5, so the headline sits on
   three lines and both buttons are on the first screen. Narrower screens keep the stacked layout above. */
@media (min-width: 1040px) {
	.wf-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.wf-hero-copy { display: flex; flex-direction: column; gap: 26px; }
.wf-eyebrow { font-family: var(--wf-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wf-accent); }
.wf-hero h1 { font-size: 58px; line-height: 1.04; letter-spacing: -0.025em; }
.wf-lede { font-size: 19px; line-height: 1.6; color: var(--wf-body); max-width: 34em; }
.wf-hero .wp-block-buttons { gap: 14px; padding-top: 6px; }

.wf-card { background: var(--wf-card); border: 1px solid var(--wf-rule); padding: 28px; box-sizing: border-box; }
.wf-evidence { display: flex; flex-direction: column; gap: 18px; }
.wf-caption { font-family: var(--wf-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wf-muted-2); }
.wf-question { font-size: 17px; font-weight: 500; }
.wf-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wf-stamp {
	font-family: var(--wf-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--wf-accent); border: 1.5px solid var(--wf-accent); padding: 4px 8px; line-height: 1.4;
}
.wf-verdict-text { font-size: 15px; color: var(--wf-body); }
.wf-dl { display: grid; grid-template-columns: 110px 1fr; gap: 10px 16px; font-size: 14px; }
.wf-dt { color: var(--wf-muted-2); }
.wf-dd { line-height: 1.6; }
.wf-mono { font-family: var(--wf-mono); }
.wf-dd.wf-mono { font-size: 13px; line-height: 1.7; }

/* Illustrations: explicit width and height in the markup, scaled down here, so nothing shifts as they load. */
.wf-figure { margin: 0; }
.wf-figure img { display: block; max-width: 100%; height: auto; }
.wf-figure-hero img { width: 100%; }
.wf-figure-step img { width: 100%; max-width: 240px; }
.wf-figure-security { margin-top: 8px; }
.wf-figure-security img { width: 100%; max-width: 480px; }

/* The example: one escalation, from answer to fix */
.wf-example-section { display: flex; flex-direction: column; gap: 20px; }
.wf-example { max-width: 760px; }
.wf-example .wf-label { margin-top: 4px; }
.wf-verdict-text { max-width: 36em; }
.wf-evidence-sum { font-family: var(--wf-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--wf-muted-2); }
.wf-dd > * { margin: 0; }
.wf-dd.wp-block-group { display: flex; flex-direction: column; gap: 6px; }
ul.wf-evidence-list { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 4px; }
.wf-evidence-list li { line-height: 1.55; }
.wf-evidence code, .wf-evidence-list code { font-family: var(--wf-mono); font-size: 0.92em; color: var(--wf-ink); }
.wf-proof { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--wf-ink); }
.wf-proof::before {
	content: ""; display: inline-block; width: 28px; height: 2px; margin-right: 14px; vertical-align: middle;
	background: var(--wf-accent);
}

/* A visible FAQ: questions as headings, answers as text, hairlines between */
.wf-faq { display: flex; flex-direction: column; }
.wf-faq-item { padding: 20px 0; border-bottom: 1px solid var(--wf-rule); display: flex; flex-direction: column; gap: 6px; max-width: 46em; }
.wf-faq-item:first-child { padding-top: 0; }
.wf-faq-item:last-child { border-bottom: 0; }
.wf-faq-item h3 { font-size: 18px; }
.wf-faq-item p { color: var(--wf-body); line-height: 1.6; }

/* ---------- Sections ---------- */
.wf-section { padding: 80px 0; border-top: 1px solid var(--wf-rule); display: flex; flex-direction: column; gap: 40px; }
.wf-section-head { display: flex; flex-direction: column; gap: 12px; }
.wf-section-head p, .wf-section > p { font-size: 17px; line-height: 1.6; color: var(--wf-body); max-width: 40em; }
.wf-section h2 { font-size: 36px; letter-spacing: -0.02em; }
.wf-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 48px; align-items: start; }
.wf-more { font-size: 15px; }

/* Numbered steps, each under a 2px ink rule */
.wf-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.wf-step { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid var(--wf-ink); }
.wf-num { font-family: var(--wf-mono); font-size: 13px; color: var(--wf-accent); }
.wf-step h3 { font-size: 19px; }
.wf-step p:not(.wf-num) { font-size: 15px; line-height: 1.6; color: var(--wf-body); }

/* Five plain numbered steps (the support desk's flow) */
.wf-steps.wf-steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* A plan label: small, mono, hairline-bordered, square */
.wf-plan-label { align-self: flex-start; border: 1px solid var(--wf-rule); padding: 3px 8px; line-height: 1.5; }

/* An image slot (16:10). Until an image is put in it, it takes no space at all. */
.wf-media-slot:not(:has(img)) { display: none; }
.wf-media-slot { margin: 0; }
.wf-media-slot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

/* Stages: cells in one bordered white strip */
.wf-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--wf-rule); border: 1px solid var(--wf-rule); }
.wf-cell { background: var(--wf-card); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.wf-label { font-family: var(--wf-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wf-muted-2); }
.wf-cell h3 { font-size: 18px; }
.wf-cell p:not(.wf-label) { font-size: 15px; line-height: 1.55; color: var(--wf-body); }

/* Audience cards: separate white cards, square, hairline borders */
.wf-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.wf-card-item { background: var(--wf-card); border: 1px solid var(--wf-rule); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.wf-card-item h3 { font-size: 18px; }
.wf-card-item p:not(.wf-label) { font-size: 15px; line-height: 1.55; color: var(--wf-body); }

/* Lists with hairline separators; a bold first phrase becomes the item's title */
ul.wf-list, ol.wf-list { list-style: none; margin: 0; padding: 0; }
.wf-list > li { padding: 18px 0; border-bottom: 1px solid var(--wf-rule); color: var(--wf-body); line-height: 1.55; max-width: 44em; }
.wf-list > li:first-child { padding-top: 0; }
.wf-list > li:last-child { border-bottom: 0; }
.wf-list > li > strong:first-child { display: block; color: var(--wf-ink); font-weight: 600; margin-bottom: 4px; }

/* Boxes and cards */
.wf-box { font-size: 14px; line-height: 1.6; color: var(--wf-muted); padding: 14px 16px; background: var(--wf-card); border: 1px solid var(--wf-rule); }
.wf-partners-copy { display: flex; flex-direction: column; gap: 18px; }
.wf-form-card { display: flex; flex-direction: column; gap: 16px; }
.wf-form-card h3 { font-size: 22px; }

/* ---------- Forms (Contact Form 7) ---------- */
.wpcf7 form { display: flex; flex-direction: column; gap: 16px; }
.wpcf7 form > * { margin: 0; }
.wf-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--wf-ink); }
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 select, .wpcf7 textarea {
	font: inherit; font-size: 16px; font-weight: 400; color: var(--wf-ink); background: #FFFFFF;
	padding: 12px; border: 1px solid var(--wf-field); border-radius: 0; width: 100%; box-sizing: border-box;
}
.wpcf7 textarea { resize: vertical; min-height: 96px; }
.wpcf7 input:focus-visible, .wpcf7 select:focus-visible, .wpcf7 textarea:focus-visible { outline: 2px solid var(--wf-accent); outline-offset: 1px; border-color: var(--wf-ink); }
.wpcf7 input[type="submit"] {
	font: inherit; font-size: 16px; font-weight: 500; padding: 15px 24px; min-height: 48px; align-self: flex-start;
	background: var(--wf-ink); color: var(--wf-ground); border: 0; border-radius: 0; cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: var(--wf-body); }
.wf-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.wf-submit-row .wpcf7-spinner { margin: 0; }
.wf-form-note { font-size: 13px; color: var(--wf-muted); }
.wpcf7 .wpcf7-not-valid-tip { color: var(--wf-accent); font-size: 13px; font-weight: 400; margin-top: 4px; }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: 12px 14px; border: 1px solid var(--wf-rule); font-size: 14px; color: var(--wf-ink); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: var(--wf-accent); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--wf-ink); }

/* ---------- Other pages ---------- */
.wf-page-head { padding: 72px 0 0; display: flex; flex-direction: column; gap: 20px; }
.wf-page-head .wp-block-post-title { font-size: 44px; line-height: 1.08; letter-spacing: -0.025em; }
.wf-content > .wf-lede { margin: 20px 0 64px; }
.wf-content > .wf-updated { margin: 16px 0 48px; color: var(--wf-muted); font-size: 15px; }
.wf-prose.wf-section { padding: 48px 0; gap: 18px; }
.wf-prose h2 { font-size: 26px; }
.wf-prose p, .wf-prose li { max-width: 44em; }

/* ---------- Footer ---------- */
.wf-footer-inner {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
	padding: 28px 0 40px; border-top: 1px solid var(--wf-rule); font-size: 14px; color: var(--wf-muted);
}
.wf-footer-inner .wp-block-navigation { font-size: 14px; gap: 8px 20px; }
.wf-footer-inner .wp-block-navigation .wp-block-navigation__container { gap: 8px 20px; }
.wf-footer-inner .wp-block-navigation-item__content { color: var(--wf-muted); text-decoration: underline; }
.wf-footer-inner .wp-block-navigation-item__content:hover { color: var(--wf-ink); }

/* ---------- 404 ---------- */
.wf-404 { padding: 72px 0 96px; display: flex; flex-direction: column; gap: 20px; }
body .wf-404 > * { margin: 0; }

/* ---------- Narrower screens: everything stacks; the nav wraps ---------- */
@media (max-width: 900px) {
	.wf-steps, .wf-steps.wf-steps-5, .wf-strip, .wf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	html body { --wp--style--root--padding-left: 20px; --wp--style--root--padding-right: 20px; }
	.wf-header-inner { padding: 20px 0; }
	.wf-hero { padding: 48px 0 56px; gap: 40px; }
	.wf-hero h1 { font-size: 40px; }
	.wf-section { padding: 56px 0; gap: 28px; }
	.wf-section h2 { font-size: 28px; }
	.wf-page-head { padding-top: 48px; }
	.wf-page-head .wp-block-post-title { font-size: 34px; }
	.wf-steps, .wf-steps.wf-steps-5, .wf-strip, .wf-cards { grid-template-columns: minmax(0, 1fr); }
	.wf-dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.wf-dl .wf-dd { margin-bottom: 10px; }
	.wf-proof { font-size: 19px; }
	.wf-card { padding: 22px; }
}