/* ezwp Meridian — the parts theme.json can't express.
   Tokens: cream #f3ebe4 · sand #d8cdbc · ink #181312 · charcoal #2e2927 · amber #fcaa2d */

:root {
  --ezwp-border: color-mix(in srgb, var(--wp--preset--color--contrast) 16%, transparent);
  --ezwp-border-on-dark: color-mix(in srgb, var(--wp--preset--color--base) 16%, transparent);
  --ezwp-ease: cubic-bezier(.645, .045, .355, 1);
}

/* ---------- Text styles ---------- */
.is-style-eyebrow {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  color: color-mix(in srgb, currentColor 70%, transparent);
  margin-bottom: var(--wp--preset--spacing--40) !important;
}
.is-style-faded { color: color-mix(in srgb, currentColor 70%, transparent); }
.ezwp-lede { font-size: var(--wp--preset--font-size--large); line-height: 1.45; max-width: 40rem; }
.ezwp-measure { max-width: 42rem; }
/* Centered variants (CTA sections) */
.has-text-align-center.ezwp-lede { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.wp-block-button__link {
  transition: transform .3s var(--ezwp-ease), background-color .3s var(--ezwp-ease), border-color .3s var(--ezwp-ease);
}
.wp-block-button__link:hover { transform: scale(.98); }
.wp-block-button.is-style-outline .wp-block-button__link { background: var(--wp--preset--color--sand); border-color: var(--wp--preset--color--sand); color: var(--wp--preset--color--contrast); }
/* Secondary button on dark sections: translucent cream */
.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-charcoal-background-color .wp-block-button.is-style-outline .wp-block-button__link {
  background: color-mix(in srgb, var(--wp--preset--color--base) 8%, transparent);
  border-color: color-mix(in srgb, var(--wp--preset--color--base) 8%, transparent);
  color: var(--wp--preset--color--base);
}
/* Secondary on sand sections: cream */
.has-sand-background-color .wp-block-button.is-style-outline .wp-block-button__link { background: var(--wp--preset--color--base); border-color: var(--wp--preset--color--base); }

/* ---------- Sections ---------- */
.ezwp-section { padding-top: var(--wp--preset--spacing--90); padding-bottom: var(--wp--preset--spacing--90); }
.ezwp-section--tight { padding-top: var(--wp--preset--spacing--80); padding-bottom: var(--wp--preset--spacing--80); }
.ezwp-section--huge { padding-top: var(--wp--preset--spacing--100); padding-bottom: var(--wp--preset--spacing--100); }
.ezwp-section--hairline-top { border-top: 1px solid var(--ezwp-border); }
.has-contrast-background-color.ezwp-section--hairline-top,
.has-charcoal-background-color.ezwp-section--hairline-top { border-top-color: var(--ezwp-border-on-dark); }

/* ---------- Header ---------- */
.ezwp-header { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); border-bottom: 1px solid var(--ezwp-border); }
.ezwp-header .wp-block-site-title { margin: 0; }
.ezwp-header .ezwp-nav { gap: var(--wp--preset--spacing--60); }
.ezwp-header .ezwp-header-cta .wp-block-button__link { padding: .6rem 1.1rem; font-size: var(--wp--preset--font-size--small); }
@media (max-width: 900px) {
  .ezwp-header .ezwp-header-cta { display: none; }
}

/* ---------- Cards ---------- */
.wp-block-group.is-style-card {
  background: color-mix(in srgb, var(--wp--preset--color--base) 100%, transparent);
  border: 1px solid var(--ezwp-border);
  border-radius: var(--wp--custom--radius--main);
  padding: var(--wp--preset--spacing--60);
  height: 100%;
}
.has-sand-background-color .wp-block-group.is-style-card { background: var(--wp--preset--color--base); border-color: transparent; }
.wp-block-group.is-style-card-dark {
  background: var(--wp--preset--color--charcoal);
  color: var(--wp--preset--color--base);
  border-radius: var(--wp--custom--radius--main);
  padding: var(--wp--preset--spacing--60);
  height: 100%;
}
.wp-block-group.is-style-card .wp-block-image img,
.wp-block-group.is-style-card-dark .wp-block-image img { border-radius: var(--wp--custom--radius--small); }
.ezwp-card-link { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .1em; }
.ezwp-card-link:hover { border-bottom-color: transparent; }

/* Card title in serif but smaller than page headings */
.is-style-card h3, .is-style-card-dark h3 { font-size: 1.75rem; letter-spacing: -0.02em; }

/* ---------- Stats ---------- */
.wp-block-group.is-style-stat { border-top: 1px solid var(--ezwp-border); padding-top: var(--wp--preset--spacing--50); }
.has-contrast-background-color .wp-block-group.is-style-stat,
.has-charcoal-background-color .wp-block-group.is-style-stat { border-top-color: var(--ezwp-border-on-dark); }
.ezwp-stat-number { font-family: var(--wp--preset--font-family--gambarino); font-size: var(--wp--preset--font-size--h1); line-height: 1; letter-spacing: -0.03em; margin: 0 0 .35rem !important; }

/* ---------- Image placeholder (until real imagery lands) ---------- */
.ezwp-placeholder {
  background: linear-gradient(135deg, var(--wp--preset--color--sand), color-mix(in srgb, var(--wp--preset--color--sand) 60%, var(--wp--preset--color--base)));
  border-radius: var(--wp--custom--radius--main);
  aspect-ratio: 4 / 3;
  width: 100%;
}
.ezwp-placeholder--wide { aspect-ratio: 16 / 7; }
.ezwp-placeholder--card { aspect-ratio: 3 / 2; margin-bottom: var(--wp--preset--spacing--50); }

/* ---------- Hero: full-width visual with the chat card riding on it ---------- */
.ezwp-hero-visual { position: relative; }
@media (min-width: 901px) {
  .ezwp-hero-visual .ezwp-chat { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); margin: 0 !important; }
}
@media (max-width: 900px) {
  .ezwp-hero-visual .ezwp-chat { margin-top: calc(-1 * var(--wp--preset--spacing--70)) !important; margin-left: auto !important; margin-right: auto !important; width: calc(100% - 2rem); }
}

/* ---------- Hero chat demo (the one bold element) ---------- */
.ezwp-chat {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  border-radius: var(--wp--custom--radius--main);
  padding: var(--wp--preset--spacing--60);
  max-width: 34rem;
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
}
.ezwp-chat-meta { display: flex; justify-content: space-between; font-size: var(--wp--preset--font-size--x-small); color: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent); margin-bottom: var(--wp--preset--spacing--50) !important; }
.ezwp-chat-meta::after { content: "agent active"; color: var(--wp--preset--color--accent); }
.ezwp-msg { display: flex; flex-direction: column; gap: .2rem; margin: 0 0 var(--wp--preset--spacing--40) !important; font-size: var(--wp--preset--font-size--small); }
.ezwp-msg small { font-size: var(--wp--preset--font-size--x-small); color: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent); }
.ezwp-msg span { background: var(--wp--preset--color--charcoal); padding: .7rem .95rem; border-radius: var(--wp--custom--radius--main); max-width: 88%; }
.ezwp-msg--agent { align-items: flex-end; text-align: right; }
.ezwp-msg--agent span { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
.ezwp-chat-status { display: inline-block; margin: var(--wp--preset--spacing--30) 0 0 !important; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: .06em; color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--accent); padding: .3rem .6rem; border-radius: var(--wp--custom--radius--small); }

/* ---------- Pricing ---------- */
.ezwp-price { font-family: var(--wp--preset--font-family--gambarino); font-size: var(--wp--preset--font-size--h3); letter-spacing: -0.02em; line-height: 1; margin: .5rem 0 1rem !important; }
.ezwp-price small { font-family: var(--wp--preset--font-family--geist); font-size: var(--wp--preset--font-size--small); letter-spacing: 0; }
.ezwp-tier--featured { outline: 1px solid var(--wp--preset--color--accent); }

/* ---------- FAQ ---------- */
.ezwp-faq .wp-block-details { border-top: 1px solid var(--ezwp-border); padding: var(--wp--preset--spacing--40) 0; }
.ezwp-faq .wp-block-details summary { font-family: var(--wp--preset--font-family--gambarino); font-size: 1.5rem; letter-spacing: -0.02em; cursor: pointer; }
.ezwp-faq .wp-block-details:last-child { border-bottom: 1px solid var(--ezwp-border); }

/* ---------- Footer ---------- */
.ezwp-footer-heading { font-size: var(--wp--preset--font-size--small); font-weight: 500; margin-bottom: var(--wp--preset--spacing--40) !important; }
.ezwp-footer-links { list-style: none; padding: 0; margin: 0; }
.ezwp-footer-links li { margin-bottom: .6rem; color: color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent); }
.ezwp-footer-links a { text-decoration: none; }
.ezwp-footer-links a:hover { text-decoration: underline; }
.ezwp-footer-rule { border-color: var(--ezwp-border-on-dark) !important; opacity: 1; }
.ezwp-footer .wp-block-site-title { font-size: 2rem; }

/* ---------- Lists inside cards ---------- */
.is-style-card ul, .is-style-card-dark ul { padding-left: 1.1rem; }
.is-style-card li, .is-style-card-dark li { margin-bottom: .4rem; }

/* ---------- Focus & motion ---------- */
:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link { transition: none; }
  .wp-block-button__link:hover { transform: none; }
}

/* Hero placeholder is taller on small screens so the chat card has something to sit on */
@media (max-width: 900px) { .ezwp-placeholder--wide { aspect-ratio: 4 / 3; } }

/* =========================================================
   Animation layer (paired with assets/js/meridian.js)
   ========================================================= */
/* Hidden until GSAP reveals them. Only applies when html.ezwp-anim is set (JS on, motion allowed). */
html.ezwp-anim .ezwp-header,
html.ezwp-anim .anim-heading, html.ezwp-anim .anim-lines,
html.ezwp-anim .anim-fade-up, html.ezwp-anim .anim-fade-left, html.ezwp-anim .anim-image,
html.ezwp-anim .anim-load-heading, html.ezwp-anim .anim-load-lines,
html.ezwp-anim .anim-load-fade-up, html.ezwp-anim .anim-load-fade-left, html.ezwp-anim .anim-load-image { visibility: hidden; }

/* SplitText masks */
.ezwp-line, .ezwp-word, .ezwp-char { will-change: transform; }

/* Hover text swap (buttons + footer links) */
.ezwp-swap { display: inline-block; position: relative; overflow: hidden; vertical-align: top; line-height: inherit; }
.ezwp-swap-text { display: block; white-space: nowrap; }
.ezwp-swap-text.is-hover { position: absolute; left: 0; top: 100%; }
.ezwp-swap-text div { display: inline-block; } /* SplitText word wrappers */

/* Card hover (timeline t-67e010bb): image 1.06, underline grows — .7s power3.inOut */
.ezwp-card-link { position: relative; border-bottom: 0; padding-bottom: .15em; }
.ezwp-card-link::before { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; opacity: .3; }
.ezwp-card-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: currentColor; transition: width .7s cubic-bezier(.645,.045,.355,1); }
.anim-card:hover .ezwp-card-link::after { width: 100%; }

/* FAQ accordion body (JS wraps content) */
.ezwp-faq-body { overflow: hidden; }
.ezwp-faq summary::-webkit-details-marker { display: none; }
.ezwp-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ezwp-faq summary::after { content: "+"; font-family: var(--wp--preset--font-family--geist); font-size: 1.5rem; transition: transform .7s cubic-bezier(.87,0,.13,1); }
.ezwp-faq details[open] summary::after { transform: rotate(-135deg); }

/* =========================================================
   Image slots (filled by assets/img/*.jpg from generate-images.py)
   ========================================================= */
.ezwp-placeholder { position: relative; overflow: hidden; --img-scale: 1; }
.ezwp-placeholder::before { content: ""; position: absolute; inset: 0; background: var(--img) center / cover no-repeat; transform: scale(var(--img-scale)); will-change: transform; }
.ezwp-img-hero    { --img: url("../img/hero.jpg"); }
.ezwp-img-why     { --img: url("../img/why.jpg"); }
.ezwp-img-about   { --img: url("../img/about.jpg"); }
.ezwp-img-install { --img: url("../img/install.jpg"); }
.ezwp-img-operate { --img: url("../img/operate.jpg"); }
.ezwp-img-grow    { --img: url("../img/grow.jpg"); }
/* Dark bands + footer get the subtle texture, like the reference's playbook-bg / footer-bg */
.ezwp-img-band, .ezwp-footer { position: relative; }
.ezwp-img-band::before, .ezwp-footer::before { content: ""; position: absolute; inset: 0; background: url("../img/band.jpg") center / cover no-repeat; opacity: .35; pointer-events: none; }
.ezwp-img-band > *, .ezwp-footer > * { position: relative; }