/* ==========================================================================
   WI1 — Workflow Intelligence · marketing theme stylesheet
   Loaded on the front end and in the editor (see functions.php).

   theme.json already emits the colour/spacing/font presets as
   --wp--preset--* custom properties. This file adds:
     1. the original brand tokens + .wi1-wordmark / .wi1-badge helpers
     2. marketing helpers (dark sections, nav, hero, cards, buttons)
   ========================================================================== */

:root {
  /* Brand greens */
  --wi1-green-deep:   #0F6E56;
  --wi1-green-bright: #1D9E75;
  --wi1-green-pale:   #E1F5EE;
  --wi1-green-mid:    #5DCAA5;
  --wi1-green-100:    #9FE1CB;
  --wi1-green-800:    #085041;
  --wi1-green-900:    #04342C;

  /* Neutrals */
  --wi1-ink:         #1a1a18;
  --wi1-ink-muted:   #5F5E5A;
  --wi1-paper:       #f5f5f0;
  --wi1-paper-muted: #9a9a92;

  /* Live accent — deep on light, bright on dark (see .wi1-dark below). */
  --wi1-accent: var(--wi1-green-deep);

  --wi1-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   Helvetica, Arial, sans-serif;
  --wi1-radius-badge: 20%;
}

@media (prefers-color-scheme: dark) {
  :root { --wi1-accent: var(--wi1-green-bright); }
}
[data-theme="dark"]  { --wi1-accent: var(--wi1-green-bright); }
[data-theme="light"] { --wi1-accent: var(--wi1-green-deep); }

/* --------------------------------------------------------------------------
   Wordmark + badge (from the brand pack)
   -------------------------------------------------------------------------- */
.wi1-wordmark {
  font-family: var(--wi1-font-sans);
  font-weight: 500;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.wi1-wordmark .wi1-accent { color: var(--wi1-accent); }

.wi1-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--wi1-green-deep);
  color: var(--wi1-green-pale);
  font-family: var(--wi1-font-sans);
  font-weight: 500;
  border-radius: var(--wi1-radius-badge);
}

/* --------------------------------------------------------------------------
   Dark sections — apply the "wi1-dark" class (or use a Cover/Group with a
   dark green background). Flips text to paper and the accent to bright green,
   honouring the one brand rule.
   -------------------------------------------------------------------------- */
.wi1-dark {
  --wi1-accent: var(--wi1-green-bright);
  color: var(--wp--preset--color--paper);
}
.wi1-dark :where(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--paper); }
.wi1-dark :where(p, li, figcaption) { color: var(--wp--preset--color--paper); }
.wi1-dark :where(p, li) a:not(.wp-element-button) { color: var(--wp--preset--color--green-mid); }
.wi1-dark .wi1-eyebrow { color: var(--wp--preset--color--green-mid); }
.wi1-dark .wi1-muted { color: var(--wp--preset--color--paper-muted); }

/* Accent word inside a heading (mirrors the wordmark rule) */
.wi1-accent-word { color: var(--wi1-accent); }

/* --------------------------------------------------------------------------
   Small typographic helpers used by the patterns
   -------------------------------------------------------------------------- */
.wi1-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--green-deep);
}
.wi1-muted { color: var(--wp--preset--color--ink-muted); }

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */
/* The header is rendered inside a template-part wrapper div whose height is
   only the header itself — that would make position:sticky useless (it sticks
   within its parent box, which scrolls straight off). Collapsing the wrapper
   with display:contents promotes <header> to a direct child of the full-height
   .wp-site-blocks container, so it sticks across the whole page. */
.wp-site-blocks > .wp-block-template-part {
  display: contents;
}

.wi1-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Reduced state once the page is scrolled (toggled by assets/js/header.js) */
.wi1-site-header.is-scrolled {
  background: color-mix(in srgb, var(--wp--preset--color--paper) 94%, transparent);
  box-shadow: 0 6px 24px rgba(4, 52, 44, 0.08);
}

/* The bar whose padding shrinks on scroll. Padding lives here (not inline) so it
   can animate. */
.wi1-header-bar {
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
  gap: 0.75rem 1.25rem;
  transition: padding 0.25s ease;
}
.wi1-site-header.is-scrolled .wi1-header-bar {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

/* Logo lockup: badge + stacked wordmark/tagline */
.wi1-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.wi1-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.wi1-logo-name {
  font-size: 1.15rem;
  color: var(--wp--preset--color--ink);
  transition: font-size 0.25s ease;
}
.wi1-logo-badge {
  width: 38px;
  font-size: 16px;
  flex: 0 0 auto;
  transition: width 0.25s ease, font-size 0.25s ease;
}
.wi1-logo-tagline {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--wp--preset--color--ink-muted);
  margin-top: 1px;
  overflow: hidden;
  max-height: 1.4em;
  opacity: 1;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
}
/* On scroll the lockup tightens and the tagline tucks away */
.wi1-site-header.is-scrolled .wi1-logo-tagline {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}
.wi1-site-header.is-scrolled .wi1-logo-badge {
  width: 32px;
  font-size: 14px;
}
.wi1-site-header.is-scrolled .wi1-logo-name {
  font-size: 1.05rem;
}

.wi1-header-actions {
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.wi1-site-header .wp-block-navigation a:not(.wp-element-button) {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  font-weight: 500;
}
.wi1-site-header .wp-block-navigation a:not(.wp-element-button):hover {
  color: var(--wp--preset--color--green-deep);
}

/* -------- Header responsive behaviour -------- */
/* Tablet/below: hide the tagline (too small to read in the bar) */
@media (max-width: 781px) {
  .wi1-logo-tagline { display: none; }
}
/* Phones: keep the badge + name, drop the secondary "Log in" button so the
   primary CTA and the menu toggle always fit. */
@media (max-width: 600px) {
  .wi1-header-bar { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .wi1-header-actions { gap: 0.5rem 0.6rem; }
  .wi1-btn-login { display: none; }
  .wi1-logo-name { font-size: 1.05rem; }
}
/* Very narrow: show the badge only, hide the wordmark text to guarantee room */
@media (max-width: 380px) {
  .wi1-logo-text { display: none; }
}

/* Secondary / ghost button style (block style "Ghost") */
.wp-block-button.is-style-ghost .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--green-deep);
  border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--green-deep) 35%, transparent);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background: var(--wp--preset--color--green-pale);
  border-color: var(--wp--preset--color--green-deep);
}
.wi1-dark .wp-block-button.is-style-ghost .wp-block-button__link {
  color: var(--wp--preset--color--paper);
  border-color: color-mix(in srgb, var(--wp--preset--color--paper) 45%, transparent);
}
.wi1-dark .wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--wp--preset--color--paper) 12%, transparent);
}

/* --------------------------------------------------------------------------
   Cards (Group block with the "Card" block style)
   -------------------------------------------------------------------------- */
.wp-block-group.is-style-card {
  background: var(--wp--preset--color--white);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 9%, transparent);
  border-radius: 16px;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  box-shadow: var(--wp--preset--shadow--soft);
  height: 100%;
}
.wi1-dark .wp-block-group.is-style-card {
  background: color-mix(in srgb, var(--wp--preset--color--paper) 7%, transparent);
  border-color: color-mix(in srgb, var(--wp--preset--color--paper) 14%, transparent);
  box-shadow: none;
}

/* Feature icon chip */
.wi1-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: var(--wp--preset--color--green-pale);
  color: var(--wp--preset--color--green-deep);
  font-size: 1.35rem;
  line-height: 1;
}
.wi1-dark .wi1-icon-chip {
  background: color-mix(in srgb, var(--wp--preset--color--green-bright) 22%, transparent);
  color: var(--wp--preset--color--green-pale);
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.wi1-price {
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--wp--preset--color--ink);
}
.wi1-dark .wi1-price { color: var(--wp--preset--color--paper); }
.wi1-price .wi1-price-suffix {
  font-size: 1rem;
  font-weight: 500;
  color: var(--wp--preset--color--ink-muted);
}
.wi1-dark .wi1-price .wi1-price-suffix { color: var(--wp--preset--color--paper-muted); }

/* "Most popular" highlighted plan */
.wp-block-group.is-style-card.wi1-plan-featured {
  border-color: var(--wp--preset--color--green-deep);
  box-shadow: var(--wp--preset--shadow--card);
  position: relative;
}
.wi1-plan-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--paper);
  background: var(--wp--preset--color--green-deep);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}

/* Check list (use a list with the "Checks" block style) */
ul.is-style-checks { list-style: none; padding-left: 0; }
ul.is-style-checks li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.5rem;
}
ul.is-style-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--wp--preset--color--green-pale)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230F6E56' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E")
    center / 0.85rem no-repeat;
}
.wi1-dark ul.is-style-checks li::before {
  background-color: color-mix(in srgb, var(--wp--preset--color--green-bright) 25%, transparent);
}

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */
/* Slightly tighter measure for lead paragraphs */
.wi1-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.5; }

/* Logo-cloud row */
.wi1-logo-cloud img { opacity: 0.55; filter: grayscale(1); max-height: 32px; width: auto; }

/* Rounded media */
.wi1-rounded img, img.wi1-rounded { border-radius: 16px; }

/* Footer */
.wi1-site-footer a:not(.wp-element-button) { color: var(--wp--preset--color--green-mid); }

/* --------------------------------------------------------------------------
   Mobile: tighten the largest section spacing presets so hero/CTA bands and
   gaps don't feel oversized on phones. Overriding the preset variables means
   every pattern that uses them shrinks together.
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
  :root {
    --wp--preset--spacing--60: 3.75rem; /* 5rem  */
    --wp--preset--spacing--70: 4.5rem;  /* 7rem  */
    --wp--preset--spacing--80: 5.5rem;  /* 9.5rem */
  }
}
@media (max-width: 480px) {
  :root {
    --wp--preset--spacing--50: 2.5rem;  /* 3.25rem */
    --wp--preset--spacing--60: 3rem;
    --wp--preset--spacing--70: 3.5rem;
    --wp--preset--spacing--80: 4.25rem;
  }
}

/* Never let media or cards force horizontal scrolling on small screens */
img, svg, video { max-width: 100%; height: auto; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .wi1-site-header, .wi1-header-bar, .wi1-logo-tagline,
  .wi1-logo-badge, .wi1-logo-name { transition: none !important; }
}