/*
Theme Name: Apareto Child
Theme URI: https://apareto.eu
Description: Apareto design as a child of Twenty Twenty-Five. Design tokens live in
             theme.json; the ap-* component classes are below. Living source of truth
             for site styling (the copy in export/wordpress is the original handoff).
Author: Apareto
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: apareto-child
*/

/* ============================================================
   Apareto — component styles (ap-* classes used by the pages)
   ============================================================ */

:root {
  --ap-paper: #f7f7f5;
  --ap-ink: #171a18;
  --ap-body: #4d504d;
  --ap-muted: #8a8780;
  --ap-green: #2d5c48;
  --ap-green-light: #8fbfa5;
  --ap-border: #e3e1db;
  --ap-border-strong: #d6d4ce;
  --ap-mono: 'IBM Plex Mono', Menlo, Consolas, monospace;
  --ap-sans: Helvetica, Arial, sans-serif;
}

body {
  background: var(--ap-paper);
  color: var(--ap-ink);
  font-family: var(--ap-sans);
}

a { color: var(--ap-green); }
a:hover { color: var(--ap-ink); }

/* ---- type ---- */
.ap-eyebrow {
  font-family: var(--ap-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--ap-green);
  text-transform: uppercase;
}

.ap-h1 {
  font-weight: 700;
  font-size: clamp(44px, 8.5vw, 96px);
  line-height: .98;
  letter-spacing: -.035em;
  color: var(--ap-ink);
}

.ap-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ap-body);
  max-width: 660px;
}

.ap-label {
  font-family: var(--ap-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--ap-muted);
  text-transform: uppercase;
}

.ap-body, .ap-cards p, .ap-dark p { color: var(--ap-body); }
.ap-body { font-size: 16px; line-height: 1.75; max-width: 680px; }

/* ---- section rule ---- */
hr.ap-rule {
  border: none;
  border-top: 1px solid var(--ap-ink);
  background: none;
  opacity: 1;
  margin: 56px 0 40px;
}

/* ---- chips (spans inside a paragraph) ---- */
.ap-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ap-chips span {
  font-family: var(--ap-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ap-body);
  border: 1px solid var(--ap-border-strong);
  border-radius: 6px;
  padding: 10px 14px;
}
.ap-chips span.ap-hot {
  color: var(--ap-green);
  border-color: var(--ap-green);
  background: rgba(45, 92, 72, .06);
}
.ap-chips.ap-pills span { border-radius: 999px; padding: 8px 13px; font-size: 12.5px; }

/* ---- card grids (wp:columns) ---- */
.ap-cards .wp-block-column {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 22px 24px;
}
.ap-cards h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 8px; color: var(--ap-ink); }
.ap-cards p { font-size: 13.5px; line-height: 1.6; margin: 0; }

/* ---- dark band (wp:group) ---- */
.ap-dark {
  background: var(--ap-ink);
  color: #f0efec;
  padding: 56px;
  border-radius: 0;
}
.ap-dark h2 { color: #f0efec; font-weight: 700; letter-spacing: -.02em; }
.ap-dark h3 { color: var(--ap-green-light); font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.ap-dark p { color: #b9bcb6; font-size: 14px; line-height: 1.65; }
.ap-dark .wp-block-column { border-left: 1px solid #33362f; padding: 6px 28px; }

/* ---- buttons ---- */
.wp-block-button__link {
  border-radius: 999px;
  font-weight: 500;
  font-size: 14.5px;
  padding: 14px 26px;
  background: var(--ap-ink);
  color: #fff;
}
.ap-btn-green .wp-block-button__link { background: var(--ap-green); color: #fff; }
.ap-btn-ghost .wp-block-button__link {
  background: transparent;
  color: var(--ap-ink);
  border: 1px solid #c9c7c1;
}

/* ---- math callout ---- */
.ap-math {
  background: #fff;
  border: 1px solid var(--ap-border);
  border-radius: 10px;
  padding: 32px;
  max-width: 680px;
}
.ap-math .ap-formula { font-family: var(--ap-mono); font-size: 26px; color: var(--ap-ink); margin: 0 0 14px; }
.ap-math p:not(.ap-formula) { font-size: 14px; line-height: 1.7; color: var(--ap-body); margin: 0; }

/* ---- mono quote block (ratios) ---- */
.ap-quote {
  font-family: var(--ap-mono);
  font-size: 15px;
  line-height: 2;
  color: var(--ap-ink);
  border-left: 2px solid var(--ap-green);
  padding-left: 24px;
}
.ap-quote strong { color: var(--ap-green); font-weight: 500; }

/* ---- ruled lists (questions, who-for, process) ---- */
.ap-ruled { list-style: none; padding: 0; margin: 0; max-width: 680px; }
.ap-ruled li {
  padding: 14px 0;
  border-bottom: 1px solid var(--ap-border);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ap-body);
}
.ap-ruled li:last-child { border-bottom: none; }

.ap-process { counter-reset: step; list-style: none; padding: 0; margin: 0; max-width: 680px; }
.ap-process li {
  counter-increment: step;
  padding: 13px 0;
  border-bottom: 1px solid var(--ap-border);
  font-size: 15px;
  font-weight: 500;
  color: var(--ap-ink);
}
.ap-process li::before {
  content: counter(step);
  font-family: var(--ap-mono);
  font-size: 13px;
  color: var(--ap-green);
  margin-right: 18px;
}
.ap-process li:last-child { border-bottom: none; }

/* ---- info cards (trust / product / founder notes) ---- */
.ap-note {
  background: #fff;
  border: 1px solid var(--ap-border);
  border-radius: 10px;
  padding: 28px;
}
.ap-note .ap-note-label {
  font-family: var(--ap-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--ap-green);
  margin: 0 0 10px;
}
.ap-note p { font-size: 14.5px; line-height: 1.65; color: var(--ap-body); margin: 0; }

/* ---- empty state (research) ---- */
.ap-empty {
  border: 1px dashed #c9c7c1;
  border-radius: 10px;
  padding: 40px;
  max-width: 720px;
}
.ap-empty h3 { font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.ap-empty p { font-size: 14.5px; line-height: 1.65; color: var(--ap-body); margin: 0; }

/* ---- footnote mono line ---- */
.ap-fineprint { font-family: var(--ap-mono); font-size: 12px; color: var(--ap-muted); }

/* ============================================================
   Theme shell — masthead, navigation, footer, full-bleed bands
   ============================================================ */

/* stop full-bleed sections from creating horizontal scroll */
html { overflow-x: hidden; }

/* ---- masthead / ruled nav ---- */
.ap-masthead {
  padding-top: 20px;
  padding-bottom: 6px;
  margin-bottom: 0;
  background: var(--ap-paper);
}
.ap-masthead .ap-bar { align-items: center; gap: 30px; }
.ap-masthead .wp-block-site-logo { margin: 0; }
.ap-masthead .wp-block-site-logo img { width: 210px; height: auto; display: block; }
.ap-nav-wrap { align-items: center; gap: 30px; }

/* plain Swiss sans nav (matches 3a — not mono, not uppercase) */
.ap-nav { gap: 30px; }
.ap-nav .wp-block-navigation-item__content,
.ap-nav a {
  font-family: var(--ap-sans);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ap-body);
}
.ap-nav .wp-block-navigation-item__content:hover,
.ap-nav a:hover { color: var(--ap-ink); }
.ap-nav-cta .wp-block-button__link {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* ---- footer: light / paper (matches 3a) ---- */
.ap-footer {
  background: var(--ap-paper);
  color: var(--ap-ink);
  border-top: 1px solid var(--ap-ink);
  padding-top: 44px;
  padding-bottom: 36px;
  margin-top: 0;
}
.ap-footer .wp-block-column { border: none; padding: 0; background: none; }
.ap-footer p, .ap-footer li { color: var(--ap-body); font-size: 13px; line-height: 1.6; }
.ap-footer a { color: var(--ap-body); }
.ap-footer a:hover { color: var(--ap-ink); }
.ap-foot-logo { display: inline-flex; align-items: center; gap: 2px; }
.ap-foot-logo svg { width: 20px; height: 18px; display: block; }
.ap-foot-logo b { font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--ap-ink); }
.ap-foot-brand { color: var(--ap-muted); font-size: 13px; line-height: 1.6; margin: 8px 0 0; }
.ap-foot-head {
  font-family: var(--ap-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #b3b0aa;
  margin: 0 0 8px;
}
.ap-footer ul { list-style: none; padding: 0; margin: 0; }
.ap-footer li { padding: 3px 0; }
.ap-footer .ap-fineprint {
  border-top: 1px solid var(--ap-border);
  padding-top: 20px;
  margin-top: 28px;
  color: var(--ap-muted);
  font-size: 12px;
}

/* ---- make ap-dark bands inside page content bleed full width ---- */
.wp-block-post-content .ap-dark,
.entry-content .ap-dark {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50% + clamp(24px, 5vw, 56px));
  padding-right: calc(50vw - 50% + clamp(24px, 5vw, 56px));
  padding-top: 56px;
  padding-bottom: 56px;
}
.ap-dark > *:first-child { margin-top: 0; }
.ap-dark .ap-dark-eyebrow { font-family: var(--ap-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: #7f837e; }
.ap-dark .wp-block-columns { margin-top: 8px; }

/* ============================================================
   Page section system (matches inner-page layout 8a–8f)
   ============================================================ */

/* ruled hero: eyebrow row (green left / slug right), big headline, lead */
.ap-hero { border-top: 1px solid var(--ap-ink); padding: 48px 0 8px; margin-top: 0; }
.ap-eyebrow-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  font-family: var(--ap-mono); font-weight: 500; font-size: 12px; margin: 0 0 22px;
}
.ap-eyebrow-row .ap-eye { color: var(--ap-green); letter-spacing: .18em; text-transform: uppercase; }
.ap-eyebrow-row .ap-slug { color: var(--ap-muted); letter-spacing: .1em; }
.ap-hero .ap-h1 { margin: 0 0 22px; }
.ap-hero .ap-h1 .ap-dot { color: var(--ap-green); }

/* hero: lead left, buttons right */
.ap-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; margin-top: 24px; }
.ap-hero-grid .ap-hero-actions { display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap; }

/* labelled section: mono label column (280px) + content */
.ap-sec {
  display: grid; grid-template-columns: 280px 1fr; gap: 56px;
  border-top: 1px solid var(--ap-ink); padding: 48px 0 56px; margin: 0;
}
.ap-sec > .ap-sec-label {
  font-family: var(--ap-mono); font-weight: 500; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ap-muted); margin: 0;
}
.ap-sec > .ap-sec-body { display: flex; flex-direction: column; gap: 20px; }

/* numbered focus cards (01–06) */
.ap-numgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ap-numcard {
  border: 1px solid #ddd; background: #fff; border-radius: 8px;
  padding: 18px 20px; display: flex; gap: 12px; align-items: baseline; margin: 0;
}
.ap-numcard .n { font-family: var(--ap-mono); font-weight: 500; font-size: 12px; color: var(--ap-green); }
.ap-numcard .t { font-weight: 500; font-size: 14.5px; }

/* white chart card */
.ap-chartcard { border: 1px solid var(--ap-border); border-radius: 10px; background: #fff; padding: 28px; }
.ap-chartcard img { display: block; width: 100%; height: auto; }

/* section-level cross-link */
.ap-seclink { font-weight: 500; font-size: 14px; color: var(--ap-green); }

/* generic ruled band (equal columns) + flex row (research preview) */
.ap-band { border-top: 1px solid var(--ap-ink); padding: 52px 0 60px; margin: 0; }
.ap-band > .wp-block-columns { align-items: center; margin: 0; }
.ap-flexrow {
  border-top: 1px solid var(--ap-ink); padding: 40px 0 48px; margin: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap;
}
.ap-vis-head { font-weight: 700; font-size: 30px; letter-spacing: -.02em; margin: 0 0 4px; }

/* inner-page hero headline (64px vs the 96px home hero) */
.ap-h1-inner { font-size: clamp(40px, 6vw, 64px); }

/* dark-band four/three step grids (mono number + green head + body) */
.ap-dark .ap-step-num { font-family: var(--ap-mono); font-weight: 500; font-size: 12px; color: var(--ap-green-light); margin: 0 0 4px; }

/* flat 3-up card grid (beyond-AI, what-you-get) */
.ap-cardgrid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ap-flatcard { border: 1px solid #ddd; background: #fff; border-radius: 8px; padding: 16px 20px; font-weight: 500; font-size: 14.5px; margin: 0; }

/* contact: form + side cards */
.ap-contact-grid { display: grid; grid-template-columns: 1fr 360px; gap: 56px; border-top: 1px solid var(--ap-ink); padding: 48px 0 60px; margin: 0; }
.ap-field { display: flex; flex-direction: column; gap: 7px; margin: 0 0 16px; }
.ap-field .l { font-family: var(--ap-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .1em; color: var(--ap-body); }
.ap-field .b { border: 1px solid #c9c7c1; border-radius: 8px; background: #fff; padding: 13px 14px; font-size: 14px; color: #b3b0aa; }
.ap-field .b.area { min-height: 110px; }
.ap-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 781px) {
  .ap-cardgrid3 { grid-template-columns: 1fr; }
  .ap-contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .ap-field-row { grid-template-columns: 1fr; }
}

@media (max-width: 781px) {
  .ap-sec { grid-template-columns: 1fr; gap: 18px; }
  .ap-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .ap-hero-grid .ap-hero-actions { justify-content: flex-start; }
  .ap-numgrid { grid-template-columns: 1fr; }
}

/* ============================================================
   WPForms — styled to match the Apareto form design
   ============================================================ */
.ap-formwrap .wpforms-container { margin: 0; }
.ap-formwrap .wpforms-field { padding: 0 0 16px; }
.ap-formwrap .wpforms-field-name .wpforms-field-row { display: flex; gap: 18px; }
.ap-formwrap .wpforms-field-label {
  font-family: var(--ap-mono); font-weight: 500; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ap-body); margin: 0 0 7px;
}
.ap-formwrap input[type="text"],
.ap-formwrap input[type="email"],
.ap-formwrap textarea {
  width: 100%; border: 1px solid #c9c7c1; border-radius: 8px; background: #fff;
  padding: 13px 14px; font-size: 14px; font-family: var(--ap-sans); color: var(--ap-ink);
  box-shadow: none; -webkit-appearance: none; appearance: none;
}
.ap-formwrap textarea { min-height: 110px; }
.ap-formwrap input:focus, .ap-formwrap textarea:focus { border-color: var(--ap-green); outline: none; }

/* inquiry type: radios as pills */
.ap-formwrap ul.wpforms-field-radio { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ap-formwrap ul.wpforms-field-radio li { margin: 0; padding: 0; position: relative; }
.ap-formwrap ul.wpforms-field-radio li input { position: absolute; opacity: 0; width: 0; height: 0; }
.ap-formwrap ul.wpforms-field-radio li label {
  border: 1px solid #c9c7c1; border-radius: 999px; padding: 9px 14px;
  font-weight: 500; font-size: 13px; color: var(--ap-body); cursor: pointer; display: inline-block;
}
.ap-formwrap ul.wpforms-field-radio li input:checked + label,
.ap-formwrap ul.wpforms-field-radio li input:focus + label {
  border-color: var(--ap-green); color: var(--ap-green); background: rgba(45, 92, 72, .06);
}

/* submit */
.ap-formwrap .wpforms-submit {
  background: var(--ap-green); color: #fff; border: none; border-radius: 999px;
  padding: 14px 26px; font-weight: 500; font-size: 14.5px; font-family: var(--ap-sans); cursor: pointer;
}
.ap-formwrap .wpforms-submit:hover { background: var(--ap-ink); }
.ap-formwrap .wpforms-required-label { color: var(--ap-green); border: none; }
.ap-formwrap .wpforms-confirmation-container-full {
  background: #fff; border: 1px solid var(--ap-border); border-radius: 10px; padding: 24px; color: var(--ap-body);
}