/* ═══════════════════════════════════════════════════════════════════════
   BLOCK-STYLES BRIDGE — Maps .wp-block-* to token system
   Neutralizes WordPress default block styles and layout classes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Reset WP Layout Classes ────────────────────────────────────────
   WP adds is-layout-constrained which sets max-width on children.
   We control max-width ourselves via section-inner/section-wide classes.
   But keep margin: auto for centering.
   ───────────────────────────────────────────────────────────────────── */

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none;
}

.wp-block-group,
.wp-block-columns,
.wp-block-column {
    box-sizing: border-box;
}

/* ─── Group Blocks ─────────────────────────────────────────────────── */

/* Top-level section groups get section padding */
.wp-block-group.section {
    padding: var(--gap-section) var(--space-6);
}

.wp-block-group.section-alt,
.section-alt {
    background: var(--bg-page);
}

/* Inner groups — centered, no extra padding */
.wp-block-group.section-inner,
.wp-block-group.section-wide,
.wp-block-group.section-narrow,
.wp-block-group.hero-inner,
.wp-block-group.faq-list {
    padding: 0;
    max-width: var(--zone-content);
    margin-left: auto !important;
    margin-right: auto !important;
}

.wp-block-group.section-wide {
    max-width: var(--zone-wide);
}

.wp-block-group.section-narrow {
    max-width: 720px;
}

/* Hero gets its own padding */
.wp-block-group.hero {
    padding: calc(var(--gap-page) + var(--header-height)) var(--space-6) var(--gap-page);
    text-align: center;
    background: linear-gradient(180deg, var(--accent-subtle) 0%, var(--bg-white) 100%);
}

.wp-block-group.hero-inner {
    max-width: var(--zone-content);
}

/* Bare groups (no custom class) — no padding */
.wp-block-group:not([class*="section"]):not([class*="hero"]):not([class*="faq"]) {
    padding: 0;
}

/* ─── Content Flow — vertical rhythm for dequeued WP defaults ─────── */

.wp-block-heading + .wp-block-heading { margin-top: var(--space-6); }
.wp-block-heading + p,
.wp-block-heading + .wp-block-paragraph { margin-top: var(--space-3); }
p + .wp-block-heading,
.wp-block-paragraph + .wp-block-heading { margin-top: var(--space-8); }
p + p,
.wp-block-paragraph + .wp-block-paragraph { margin-top: var(--space-4); }
p + .wp-block-list,
.wp-block-paragraph + .wp-block-list { margin-top: var(--space-3); }
.wp-block-list + .wp-block-heading { margin-top: var(--space-8); }
.wp-block-list + p,
.wp-block-list + .wp-block-paragraph { margin-top: var(--space-4); }

/* ─── Headings ─────────────────────────────────────────────────────── */

.wp-block-heading {
    font-family: var(--font-body);
    color: var(--color-heading);
    line-height: var(--leading-snug);
}

h1.wp-block-heading { font-size: var(--text-3xl); font-weight: var(--weight-semibold); }
h2.wp-block-heading { font-size: var(--text-2xl); font-weight: var(--weight-semibold); }
h3.wp-block-heading { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
h4.wp-block-heading { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

/* ─── Paragraphs ───────────────────────────────────────────────────── */
/* WP often renders <p> without .wp-block-paragraph class */

.wp-block-paragraph,
.wp-block-group p:not([class]),
.wp-block-column p:not([class]) {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
}

/* ─── Lists ────────────────────────────────────────────────────────── */

.wp-block-list {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text);
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
}

.wp-block-list li {
    line-height: var(--leading-normal);
    margin-bottom: var(--space-1);
}

/* Service/product lists — checkmarks */
.wp-block-list.service-list,
.wp-block-list.product-features {
    list-style: none;
    padding-left: 0;
}

.wp-block-list.service-list li,
.wp-block-list.product-features li {
    padding-left: 20px;
    position: relative;
}

.wp-block-list.service-list li::before,
.wp-block-list.product-features li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-size: var(--text-xs);
}

.wp-block-list.service-list li {
    font-size: var(--text-xs);
    padding: var(--space-1) 0 var(--space-1) 20px;
}

.wp-block-list.product-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1) var(--space-4);
    margin-top: var(--space-4);
}

.wp-block-list.product-features li {
    font-size: var(--text-xs);
    padding: 3px 0 3px 18px;
}

/* ─── Buttons ──────────────────────────────────────────────────────── */

.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.wp-block-button__link {
    display: inline-block;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm) !important;
    padding: var(--space-3) var(--space-8) !important;
    transition: background-color var(--transition-fast);
}

.wp-block-button__link,
.wp-block-button__link:not(.is-style-outline) {
    background: var(--accent) !important;
    color: white !important;
}

.wp-block-button__link:not(.is-style-outline):hover {
    background: var(--accent-hover) !important;
    color: white !important;
}

/* ─── Columns ──────────────────────────────────────────────────────── */

/* Must define flex layout ourselves since we dequeue WP's inline block styles */
.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.wp-block-column {
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
}

@media (max-width: 781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
    }
}

@media (min-width: 782px) {
    .wp-block-columns {
        flex-wrap: nowrap;
    }
}

.wp-block-columns.card-grid {
    gap: var(--space-6);
}

/* ─── Service Cards (columns with .service-card) ───────────────────── */

.wp-block-column.service-card {
    background: var(--bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.wp-block-column.service-card h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
}

.wp-block-column.service-card > p {
    font-size: var(--text-sm);
    color: var(--color-secondary);
    margin-bottom: var(--space-4);
}

/* ─── Product Cards (columns with .product-card) ───────────────────── */

.wp-block-column.product-card {
    background: var(--bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    overflow: hidden;
}

.wp-block-column.product-card h3 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

.wp-block-column.product-card > p:not(.badge) {
    font-size: var(--text-sm);
    color: var(--color-secondary);
}

/* Badges */
.wp-block-paragraph.badge,
.badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
}

.wp-block-paragraph.badge-available,
.badge-available { background: var(--success-bg); color: var(--success); }
.wp-block-paragraph.badge-dev,
.badge-dev { background: var(--status-indigo-bg); color: var(--status-indigo); }

/* ─── Steps (columns with .step) ───────────────────────────────────── */

.wp-block-columns.steps {
    margin-bottom: var(--space-6);
}

.wp-block-column.step {
    padding: var(--space-4);
}

.step-heading {
    font-size: var(--text-sm) !important;
    margin-bottom: var(--space-1);
}

.step-number {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    margin-right: var(--space-2);
}

/* Colored step numbers */
.wp-block-columns.steps:first-of-type .wp-block-column:nth-child(1) .step-number { color: var(--status-blue); }
.wp-block-columns.steps:first-of-type .wp-block-column:nth-child(2) .step-number { color: var(--status-indigo); }
.wp-block-columns.steps:first-of-type .wp-block-column:nth-child(3) .step-number { color: var(--status-purple); }
.wp-block-columns.steps:nth-of-type(2) .wp-block-column:nth-child(1) .step-number { color: var(--status-teal); }
.wp-block-columns.steps:nth-of-type(2) .wp-block-column:nth-child(2) .step-number { color: var(--status-orange); }
.wp-block-columns.steps:nth-of-type(2) .wp-block-column:nth-child(3) .step-number { color: var(--status-lime); }

.wp-block-column.step p {
    font-size: var(--text-sm);
    color: var(--color-secondary);
    line-height: var(--leading-normal);
}

/* ─── Principles (columns with .principle) ─────────────────────────── */

.principles-title {
    font-size: var(--text-xl) !important;
    margin-bottom: var(--space-4);
}

.wp-block-columns.principles {
    margin-bottom: var(--space-6);
}

.wp-block-column.principle {
    padding: var(--space-4) var(--space-6);
    background: var(--bg-white);
    border-radius: var(--radius-md);
    border-left: 3px solid transparent;
}

/* Principles are 3rd + 4th div siblings (after 2 steps divs) */
.wp-block-columns.principles:nth-of-type(3) .wp-block-column:nth-child(1) { border-left-color: var(--status-blue); }
.wp-block-columns.principles:nth-of-type(3) .wp-block-column:nth-child(2) { border-left-color: var(--status-teal); }
.wp-block-columns.principles:nth-of-type(3) .wp-block-column:nth-child(3) { border-left-color: var(--status-orange); }
.wp-block-columns.principles:nth-of-type(4) .wp-block-column:nth-child(1) { border-left-color: var(--status-indigo); }
.wp-block-columns.principles:nth-of-type(4) .wp-block-column:nth-child(2) { border-left-color: var(--status-purple); }
.wp-block-columns.principles:nth-of-type(4) .wp-block-column:nth-child(3) { border-left-color: var(--status-lime); }

.wp-block-column.principle h4 {
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
}

.wp-block-column.principle p {
    font-size: var(--text-sm);
    color: var(--color-secondary);
    line-height: var(--leading-normal);
}

/* ─── Section Labels ───────────────────────────────────────────────── */

.wp-block-paragraph.section-label,
.section-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
}

.section-label.label-blue   { color: var(--status-blue); }
.section-label.label-teal   { color: var(--status-teal); }
.section-label.label-indigo { color: var(--status-indigo); }
.section-label.label-orange { color: var(--status-orange); }

.wp-block-heading.section-title,
.section-title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-4);
}

.wp-block-paragraph.section-intro,
.section-intro {
    font-size: var(--text-lead);
    color: var(--color-secondary);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-12);
}

/* ─── Hero Custom Styles ───────────────────────────────────────────── */

.wp-block-heading.hero-title {
    font-size: var(--text-hero);
    letter-spacing: -0.5px;
    line-height: var(--leading-tight);
    margin-bottom: var(--space-6);
}

.wp-block-paragraph.hero-subtitle,
p.hero-subtitle {
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    color: var(--accent);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-6);
}

.wp-block-paragraph.hero-lead,
p.hero-lead {
    font-size: var(--text-lead);
    color: var(--color-secondary);
    max-width: 680px;
    margin: 0 auto var(--space-8);
}

.wp-block-group.hero .wp-block-buttons {
    justify-content: center;
}

/* ─── FAQ ──────────────────────────────────────────────────────────── */

h4.faq-q {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-heading);
    padding: var(--space-3) 0 var(--space-1);
}

p.faq-a {
    font-size: var(--text-sm);
    color: var(--color-secondary);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-2);
}

/* No-JS fallback: show separator between items when not wrapped by accordion */
.faq-list > p.faq-a {
    border-bottom: 1px solid var(--color-border);
}

/* JS wraps into .faq-item — see components.css for accordion styles */

/* ─── Separator ────────────────────────────────────────────────────── */

.wp-block-separator {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-8) auto;
}

/* ─── Quote ────────────────────────────────────────────────────────── */

.wp-block-quote {
    border-left: 3px solid var(--accent);
    padding-left: var(--space-6);
    margin: var(--space-6) 0;
    font-style: italic;
    color: var(--color-secondary);
}

/* ─── Image ────────────────────────────────────────────────────────── */

.wp-block-image img {
    border-radius: var(--radius-md);
}

/* ─── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .wp-block-group.hero {
        padding-top: calc(var(--space-16) + 56px);
        padding-bottom: var(--space-16);
    }

    .wp-block-heading.hero-title { font-size: var(--text-3xl); }
    .wp-block-paragraph.hero-subtitle, p.hero-subtitle { font-size: var(--text-2xl); }
    .wp-block-heading.section-title { font-size: var(--text-2xl); }

    .wp-block-columns {
        flex-direction: column;
    }

    .wp-block-list.product-features {
        grid-template-columns: 1fr;
    }
}