/*
Theme Name: Conditionary
Theme URI: https://conditionary.com
Author: Conditionary
Author URI: https://conditionary.com
Description: The Conditionary marketing site. Crimson Noir Minimal palette, General Sans and Satoshi type, full-width landing template and section pages with product screenshots.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: conditionary
Tags: one-column, custom-menu, featured-images, full-width-template
*/

/* ---------------------------------------------------------------- tokens */
:root {
  --paper: #F9F9FB;
  --white: #FFFFFF;
  --ink: #111113;
  --charcoal: #1F1F24;
  --crimson: #C1121F;
  --coral: #FF4D4D;
  --slate: #6E6E77;
  --rule: #E3E3E9;
  --rule-2: #CFCFD7;
  --crimson-soft: #FBECEE;
  --charcoal-2: #2B2B32;

  --font-display: 'General Sans', 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Satoshi', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --text-hero: clamp(2.5rem, 5.2vw, 4.25rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 7rem;

  --wrap: 1200px;
  --wrap-narrow: 760px;
  --radius: 6px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(17, 17, 19, .06), 0 12px 32px rgba(17, 17, 19, .08);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--crimson); text-decoration: none; text-underline-offset: .15em; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--charcoal); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); font-weight: 600; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 var(--space-2); }
ul, ol { margin: 0 0 var(--space-2); padding-left: 1.25rem; }
small, .small { font-size: var(--text-sm); }
.muted { color: var(--slate); }
.screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--charcoal); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.wrap-narrow { width: min(var(--wrap-narrow), 100% - 2.5rem); margin-inline: auto; }

.kicker { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--crimson); margin-bottom: var(--space-2); }
.kicker::before { content: ""; width: 1.5rem; height: 2px; background: var(--crimson); }
.lede { font-size: var(--text-lg); color: #3A3A42; line-height: 1.5; max-width: 42rem; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .75rem 1.35rem; border-radius: var(--radius); font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); letter-spacing: .01em; border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--coral); color: #fff; border-color: var(--coral); }
.btn-primary:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.btn-secondary { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn-secondary:hover { background: var(--charcoal); color: #fff; }
.btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-light:hover { background: #fff; color: var(--charcoal); border-color: #fff; }

/* ---------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: var(--space-3); }
.brand img { height: 46px; width: auto; }
.brand { display: inline-flex; align-items: center; }
.nav-toggle { display: none; background: none; border: 2px solid var(--charcoal); border-radius: var(--radius); min-width: 48px; min-height: 44px; padding: 0 .75rem; font: inherit; font-weight: 700; color: var(--charcoal); cursor: pointer; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; align-items: center; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border-radius: var(--radius); color: var(--charcoal); font-weight: 500; font-size: var(--text-sm); position: relative; }
.site-nav a:hover { text-decoration: none; color: var(--crimson); }
.site-nav .current-menu-item > a, .site-nav .current-menu-ancestor > a, .site-nav .current_page_item > a, .site-nav .current_page_ancestor > a, .site-nav a[aria-current="page"], .site-nav a.is-current { color: var(--crimson); }
.site-nav .current-menu-item > a::after, .site-nav .current-menu-ancestor > a::after, .site-nav .current_page_item > a::after, .site-nav .current_page_ancestor > a::after, .site-nav a[aria-current="page"]::after, .site-nav a.is-current::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 6px; height: 2px; background: var(--crimson); }
.site-nav .sub-menu { display: none; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--rule); box-shadow: var(--shadow); }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; padding: var(--space-2) 1.25rem var(--space-3); }
  .site-nav a { min-height: 48px; font-size: var(--text-base); }
  .site-nav a::after { display: none; }
}

/* ---------------------------------------------------------------- sections */
.section { padding: var(--space-6) 0; }
.section-tight { padding: var(--space-5) 0; }
.section-white { background: var(--white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section-dark { background: var(--charcoal); color: #E6E6EC; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .kicker { color: var(--coral); } .section-dark .kicker::before { background: var(--coral); }
.section-dark .lede { color: #C9C9D2; }
.section-dark a { color: #FF8080; }
.section-head { max-width: 46rem; margin-bottom: var(--space-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-5); align-items: center; }
.grid-5-7 { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-5); align-items: center; }
.grid-7-5 { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-5); align-items: center; }
@media (max-width: 900px) { .grid-2, .grid-5-7, .grid-7-5 { grid-template-columns: 1fr; gap: var(--space-4); } }

/* window frame for screenshots */
.window { background: #fff; border: 1px solid var(--rule-2); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.window-bar { height: 34px; background: var(--charcoal); display: flex; align-items: center; gap: 6px; padding: 0 14px; }
.window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #4A4A52; display: block; }
.window-bar i:first-child { background: var(--coral); }
.window-bar span { margin-left: auto; color: #8A8A94; font-size: 11px; font-family: var(--font-mono); letter-spacing: .02em; }
.window img { width: 100%; height: auto; }

/* ---------------------------------------------------------------- hero */
.hero { padding: var(--space-6) 0 var(--space-6); background: linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%); overflow: hidden; }
.hero h1 { font-size: var(--text-hero); font-weight: 600; letter-spacing: -0.025em; margin-bottom: var(--space-3); }
.hero h1 em { font-style: normal; color: var(--crimson); }
.hero .lede { margin-bottom: var(--space-4); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.hero-proof { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--slate); font-size: var(--text-sm); padding: 0; margin: 0; list-style: none; }
.hero-proof li { display: inline-flex; align-items: center; gap: .5rem; }
.hero-proof li::before { content: ""; width: 8px; height: 8px; background: var(--coral); border-radius: 2px; }
.hero-visual { position: relative; }
.hero-visual .window { transform: rotate(-1deg) translateX(3%); width: 112%; max-width: none; }
@media (max-width: 900px) { .hero-visual .window { transform: none; width: 100%; } }

/* ---------------------------------------------------------------- one minute */
.minute { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4); }
.minute article:nth-child(2) { transform: translateY(var(--space-2)); }
.minute article:nth-child(3) { transform: translateY(var(--space-4)); }
.minute .num { font-family: var(--font-display); font-size: 4rem; line-height: 1; font-weight: 700; color: var(--crimson); margin-bottom: var(--space-2); letter-spacing: -0.04em; }
.minute h3 { margin-bottom: var(--space-1); }
.minute p { color: #3A3A42; }
@media (max-width: 900px) { .minute { grid-template-columns: 1fr; } .minute article { transform: none !important; } }

/* ---------------------------------------------------------------- feature rows */
.feature-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.feature-list li { display: grid; grid-template-columns: 28px 1fr; gap: .9rem; align-items: start; }
.feature-list li::before { content: ""; width: 28px; height: 28px; border-radius: var(--radius); background: var(--crimson-soft); border: 1px solid #F2C7CB; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C1121F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); background-size: 16px; background-repeat: no-repeat; background-position: center; margin-top: 2px; }
.section-dark .feature-list li::before { background-color: #2B2B32; border-color: #3A3A42; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF4D4D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.feature-list b { display: block; color: var(--charcoal); }
.section-dark .feature-list b { color: #fff; }
.figure { margin: 0; }
.figure img { max-width: 100%; height: auto; display: block; }
.figure figcaption { font-size: var(--text-xs); color: var(--slate); margin-top: .6rem; }

/* ---------------------------------------------------------------- regulations */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); }
.stats div { border-top: 2px solid var(--charcoal); padding-top: var(--space-2); }
.stats b { display: block; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--charcoal); margin-bottom: .4rem; }
.stats span { color: var(--slate); font-size: var(--text-sm); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.reg-groups { display: grid; gap: var(--space-3); }
.reg-group { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-3); align-items: start; padding-top: var(--space-3); border-top: 1px solid var(--rule-2); }
.reg-group h3 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 700; color: var(--crimson); margin: .35rem 0 0; letter-spacing: .02em; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.chips li { border: 1px solid var(--charcoal); color: var(--charcoal); border-radius: 999px; padding: .35rem .8rem; font-size: var(--text-xs); font-weight: 500; background: #fff; }
@media (max-width: 760px) { .reg-group { grid-template-columns: 1fr; gap: var(--space-1); } }
.footnote { font-size: var(--text-xs); color: var(--slate); margin-top: var(--space-3); }

/* ---------------------------------------------------------------- reports */
.report-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); }
.report-card { background: var(--white); border: 1px solid var(--rule-2); border-radius: var(--radius-lg); padding: var(--space-3); display: grid; grid-template-rows: auto 1fr auto; gap: .5rem; min-height: 160px; }
.report-card .rc-num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--slate); letter-spacing: .06em; }
.report-card h3 { font-size: var(--text-lg); margin: 0; }
.report-card p { color: #3A3A42; margin: 0; font-size: var(--text-sm); }
.report-card.featured { grid-column: span 2; background: var(--charcoal); border-color: var(--charcoal); color: #E6E6EC; }
.report-card.featured h3 { color: #fff; } .report-card.featured p { color: #C9C9D2; } .report-card.featured .rc-num { color: var(--coral); }
.formats { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.formats li { background: var(--crimson-soft); color: var(--crimson); border-radius: 4px; padding: .25rem .6rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; }
@media (max-width: 900px) { .report-grid { grid-template-columns: 1fr 1fr; } .report-card.featured { grid-column: span 2; } }
@media (max-width: 600px) { .report-grid { grid-template-columns: 1fr; } .report-card.featured { grid-column: span 1; } }

/* ---------------------------------------------------------------- ease */
.ease { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4) var(--space-5); }
.ease article { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-2); align-items: start; }
.ease .sq { width: 56px; height: 56px; display: block; border-radius: var(--radius); }
.ease h3 { font-size: var(--text-lg); margin-bottom: .35rem; }
.ease p { color: #3A3A42; margin: 0; }
@media (max-width: 760px) { .ease { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- cards (serve, what we do index) */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); }
.card { background: var(--white); border: 1px solid var(--rule-2); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; color: inherit; }
a.card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--charcoal); }
.card img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-bottom: 1px solid var(--rule); }
.card-body { padding: var(--space-3); display: grid; gap: .4rem; }
.card h3 { font-size: var(--text-lg); margin: 0; }
.card p { margin: 0; color: #3A3A42; font-size: var(--text-sm); }
.card .more { color: var(--crimson); font-weight: 700; font-size: var(--text-sm); margin-top: .25rem; }
.card .more::after { content: " \2192"; }
.card.wide { grid-column: span 2; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr 1fr; } .card.wide { grid-column: span 2; } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } .card.wide { grid-column: span 1; } }
.sector-cards .card-body { padding-top: var(--space-3); }
.sector-cards .card { border-top: 4px solid var(--crimson); }

/* ---------------------------------------------------------------- cta band */
.cta-band { background: var(--white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--space-6) 0; }
.cta-band .wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-4); align-items: center; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
@media (max-width: 760px) { .cta-band .wrap { grid-template-columns: 1fr; } .cta-band .actions { justify-content: flex-start; } }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--charcoal); color: #B9B9C2; padding: var(--space-5) 0 var(--space-4); font-size: var(--text-sm); }
.site-footer .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--space-4); }
.site-footer .foot-brand { background: #fff; display: inline-block; padding: .6rem .9rem; border-radius: var(--radius); margin-bottom: var(--space-2); }
.site-footer .foot-brand img { height: 36px; width: auto; }
.site-footer h2 { color: #fff; font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .75rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.site-footer a { color: #E6E6EC; }
.site-footer a:hover { color: var(--coral); }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid #3A3A42; padding-top: var(--space-3); margin-top: var(--space-2); color: #8A8A94; font-size: var(--text-xs); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; }
@media (max-width: 860px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- page (section) layout */
.page-hero { background: var(--white); border-bottom: 1px solid var(--rule); padding: var(--space-5) 0 var(--space-5); }
.page-hero .crumbs { font-size: var(--text-xs); color: var(--slate); margin-bottom: var(--space-2); }
.page-hero .crumbs a { color: var(--slate); }
.page-hero .crumbs a:hover { color: var(--crimson); }
.page-hero .crumbs span::before { content: "/"; margin: 0 .5rem; color: var(--rule-2); }
.page-hero h1 { max-width: 20ch; }
.page-hero .lede { margin: 0; }
.entry { padding: var(--space-5) 0 var(--space-6); }
.entry-content { max-width: none; }
.entry-content > :is(p, h2, h3, h4, ul, ol, blockquote, .pull, .pager), .entry-content .wide > :is(p, h2, h3) { max-width: var(--wrap-narrow); }
.entry-content p { font-size: var(--text-base); line-height: 1.7; color: #26262C; }
.entry-content h2 { margin-top: var(--space-5); }
.entry-content h3 { margin-top: var(--space-4); }
.entry-content .window, .entry-content .figure { max-width: none; margin: var(--space-4) 0; }
.entry-content .shot { margin: var(--space-4) 0 var(--space-5); width: min(var(--wrap), 100%); }
.entry-content .shot figcaption { font-size: var(--text-xs); color: var(--slate); margin-top: .6rem; }
.entry-content .pull { border-left: 4px solid var(--crimson); padding: .25rem 0 .25rem var(--space-3); font-size: var(--text-lg); color: var(--charcoal); font-family: var(--font-display); margin: var(--space-4) 0; }
.entry-content .cards, .entry-content .reg-groups, .entry-content .stats, .entry-content .report-grid, .entry-content .minute, .entry-content .ease { max-width: none; }
.entry-content .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 760px) { .entry-content .two-col { grid-template-columns: 1fr; } }
.entry-content .panel { background: var(--white); border: 1px solid var(--rule-2); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.entry-content .panel :is(h2, h3) { margin-top: 0; font-size: var(--text-lg); }
.entry-content .panel ul { margin-bottom: 0; }
.entry-content .panel li { margin-bottom: .35rem; }
.entry-content .panel.crimson { background: var(--crimson-soft); border-color: #F2C7CB; }
.entry-content .panel.crimson h3 { color: var(--crimson); }
.entry-content .wide { max-width: none; }
.pager { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--rule-2); font-size: var(--text-sm); }
.pager a { font-weight: 700; }
.pager .next { margin-left: auto; text-align: right; }
.pager small { display: block; color: var(--slate); font-weight: 400; }

/* how we do it diagram helpers */
.streams { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.stream { border-top: 3px solid var(--coral); padding-top: var(--space-2); }
.stream h3 { font-size: var(--text-lg); margin-bottom: .35rem; }
.stream p { color: #3A3A42; font-size: var(--text-sm); margin-bottom: .5rem; }
@media (max-width: 760px) { .streams { grid-template-columns: 1fr; } }

/* WordPress editor defaults */
.alignwide { max-width: var(--wrap); } .alignfull { width: 100vw; margin-left: calc(50% - 50vw); }
.wp-block-image img { height: auto; }