/* ================================================================
   WOA Color Schemas  v2.0

   Apply a schema class to the card container (new: .woa-card) or
   directly to the content panel (legacy: .woa-card-panel) to set
   all card colours — background, text, buttons, hover — from one
   token set. Swapping the schema class recolours the entire panel.

   New usage (v4 patterns): schema goes on the Columns/outer block
     "woa-card woa-schema-2"          ← Columns block
     "woa-card-panel"                 ← inner Group block
   The CSS vars cascade from the container down to the panel.

   Legacy usage (v3 patterns): schema goes directly on the panel
     "woa-card-panel woa-schema-2"    ← Group block (still works)

   Schemas:
     woa-schema-1  Base       (Dahlia White)      — light, neutral
     woa-schema-2  Base 2     (Shocking Lavender) — soft purple
     woa-schema-3  Base 3     (Beryl Green)       — fresh green
     woa-schema-4  Base 4     (Cape Honey)        — warm yellow
     woa-schema-5  Accent 2   (Harbour Blue)      — bold teal, inverted
     woa-schema-6  Contrast   (Phantom)           — dark, inverted

   Schema 6 is also used for full-bleed CTA panels and footers.
   The hover colour (--woa-s-hover) is always Accent (East Side).
================================================================ */


/* ----------------------------------------------------------------
   Schema variable definitions
   Each schema defines five local custom properties that the
   applicator rules below consume. When placed on a container,
   these vars cascade naturally to all descendants including
   the nested .woa-card-panel.
---------------------------------------------------------------- */

.woa-schema-1 {
    --woa-s-bg:       var(--wp--preset--color--base);
    --woa-s-text:     var(--wp--preset--color--contrast);
    --woa-s-btn-bg:   var(--wp--preset--color--contrast);
    --woa-s-btn-text: var(--wp--preset--color--base);
    --woa-s-hover:    var(--wp--preset--color--accent);
}

.woa-schema-2 {
    --woa-s-bg:       var(--wp--preset--color--base-2);
    --woa-s-text:     var(--wp--preset--color--contrast);
    --woa-s-btn-bg:   var(--wp--preset--color--contrast);
    --woa-s-btn-text: var(--wp--preset--color--base-2);
    --woa-s-hover:    var(--wp--preset--color--accent);
}

.woa-schema-3 {
    --woa-s-bg:       var(--wp--preset--color--base-3);
    --woa-s-text:     var(--wp--preset--color--contrast);
    --woa-s-btn-bg:   var(--wp--preset--color--contrast);
    --woa-s-btn-text: var(--wp--preset--color--base-3);
    --woa-s-hover:    var(--wp--preset--color--accent);
}

.woa-schema-4 {
    --woa-s-bg:       var(--wp--preset--color--base-4);
    --woa-s-text:     var(--wp--preset--color--contrast);
    --woa-s-btn-bg:   var(--wp--preset--color--contrast);
    --woa-s-btn-text: var(--wp--preset--color--base-4);
    --woa-s-hover:    var(--wp--preset--color--accent);
}

.woa-schema-5 {
    --woa-s-bg:       var(--wp--preset--color--accent-2);
    --woa-s-text:     var(--wp--preset--color--base);
    --woa-s-btn-bg:   var(--wp--preset--color--base);
    --woa-s-btn-text: var(--wp--preset--color--accent-2);
    --woa-s-hover:    var(--wp--preset--color--accent);
}

.woa-schema-6 {
    --woa-s-bg:       var(--wp--preset--color--contrast);
    --woa-s-text:     var(--wp--preset--color--base);
    --woa-s-btn-bg:   var(--wp--preset--color--base);
    --woa-s-btn-text: var(--wp--preset--color--contrast);
    --woa-s-hover:    var(--wp--preset--color--accent);
}


/* ----------------------------------------------------------------
   Applicator rules  v2.0
   Dual selectors handle both placement styles:
     .woa-card-panel[class*="woa-schema-"]   — schema ON the panel (v3 legacy)
     [class*="woa-schema-"] .woa-card-panel  — schema on a container (v4 new)
   Both resolve to the same visual output.
---------------------------------------------------------------- */

/* Panel background */
.woa-card-panel[class*="woa-schema-"],
[class*="woa-schema-"] .woa-card-panel {
    background-color: var(--woa-s-bg) !important;
}

/* Headings and paragraphs — WP block class selectors (modern WP, class always present)
   AND bare element selectors (older saved content / paragraphs without the block class).
   Both sets carry !important so neither font-colour set in the editor nor WP utility
   classes (.has-X-color) can override the schema token on the panel. */
.woa-card-panel[class*="woa-schema-"] .wp-block-heading,
.woa-card-panel[class*="woa-schema-"] .wp-block-paragraph,
[class*="woa-schema-"] .woa-card-panel .wp-block-heading,
[class*="woa-schema-"] .woa-card-panel .wp-block-paragraph,
.woa-card-panel[class*="woa-schema-"] > h1, .woa-card-panel[class*="woa-schema-"] > h2,
.woa-card-panel[class*="woa-schema-"] > h3, .woa-card-panel[class*="woa-schema-"] > h4,
.woa-card-panel[class*="woa-schema-"] > h5, .woa-card-panel[class*="woa-schema-"] > h6,
.woa-card-panel[class*="woa-schema-"] > p,
[class*="woa-schema-"] .woa-card-panel > h1, [class*="woa-schema-"] .woa-card-panel > h2,
[class*="woa-schema-"] .woa-card-panel > h3, [class*="woa-schema-"] .woa-card-panel > h4,
[class*="woa-schema-"] .woa-card-panel > h5, [class*="woa-schema-"] .woa-card-panel > h6,
[class*="woa-schema-"] .woa-card-panel > p {
    color: var(--woa-s-text) !important;
}

/* Inline links inside headings and paragraphs */
.woa-card-panel[class*="woa-schema-"] .wp-block-heading a,
.woa-card-panel[class*="woa-schema-"] .wp-block-paragraph a,
[class*="woa-schema-"] .woa-card-panel .wp-block-heading a,
[class*="woa-schema-"] .woa-card-panel .wp-block-paragraph a,
[class*="woa-schema-"] .woa-card-panel > h1 a, [class*="woa-schema-"] .woa-card-panel > h2 a,
[class*="woa-schema-"] .woa-card-panel > h3 a, [class*="woa-schema-"] .woa-card-panel > h4 a,
[class*="woa-schema-"] .woa-card-panel > h5 a, [class*="woa-schema-"] .woa-card-panel > h6 a,
[class*="woa-schema-"] .woa-card-panel > p a {
    color: var(--woa-s-text) !important;
}

/* Primary (filled) button */
.woa-card-panel[class*="woa-schema-"] .wp-block-button:not(.woa-button-outline) .wp-block-button__link,
[class*="woa-schema-"] .woa-card-panel .wp-block-button:not(.woa-button-outline) .wp-block-button__link {
    background-color: var(--woa-s-btn-bg) !important;
    color:            var(--woa-s-btn-text) !important;
    border:           none !important;
}

/* Primary button — hover */
.woa-card-panel[class*="woa-schema-"] .wp-block-button:not(.woa-button-outline) .wp-block-button__link:hover,
[class*="woa-schema-"] .woa-card-panel .wp-block-button:not(.woa-button-outline) .wp-block-button__link:hover {
    background-color: var(--woa-s-hover) !important;
    color:            var(--wp--preset--color--base) !important;
}

/* Outline button — schema-aware
   woa-button-outline inside a schema panel automatically uses the
   correct border/text colour for that schema (contrast on light,
   base on dark). No need for a separate woa-button-outline-light. */
.woa-card-panel[class*="woa-schema-"] .woa-button-outline .wp-block-button__link,
[class*="woa-schema-"] .woa-card-panel .woa-button-outline .wp-block-button__link {
    background: transparent !important;
    border:     2px solid var(--woa-s-btn-bg) !important;
    color:      var(--woa-s-btn-bg) !important;
}

.woa-card-panel[class*="woa-schema-"] .woa-button-outline .wp-block-button__link:hover,
[class*="woa-schema-"] .woa-card-panel .woa-button-outline .wp-block-button__link:hover {
    background: var(--woa-s-btn-bg) !important;
    color:      var(--woa-s-btn-text) !important;
}