/* Intelliguard palette overrides — driven by per-widget Background/Font color controls
   (see includes/palette-controls.php).

   Graceful, design-system-native model (no !important, no blanket `> *`):
   the palette controls only SET two input custom properties on the widget wrapper —
   --ig-surface (background) and --ig-ink (text). Each widget's own brand tokens
   (--ig-background / --ig-foreground, defined on its wrapper) read from these inputs
   with the original value as the fallback, so nothing changes until a palette is
   chosen, and the colour then flows through the existing token system via the normal
   cascade. Custom colour pickers set the same inputs inline (see before_render).

   Wrapper classes land on .elementor-element (an ancestor of the widget wrapper);
   custom properties inherit down into the widget's token scope. */

/* ---- Background input (palette selection) ----
   --ig-surface may be a solid colour OR a gradient; it is applied with the
   `background` shorthand (below), which accepts both. */

/* Solids */
.ig-pbg-navy       { --ig-surface: hsl(225, 70%, 17%); }
.ig-pbg-navy-light { --ig-surface: hsl(225, 50%, 30%); }
.ig-pbg-gold       { --ig-surface: hsl(38, 91%, 55%); }
.ig-pbg-gold-light { --ig-surface: hsl(38, 91%, 70%); }
.ig-pbg-teal       { --ig-surface: hsl(174, 60%, 42%); }
.ig-pbg-teal-light { --ig-surface: hsl(174, 50%, 60%); }
.ig-pbg-white      { --ig-surface: #ffffff; }
.ig-pbg-muted      { --ig-surface: hsl(220, 20%, 96%); }

/* Gradients (derived from the brand palette) */
.ig-pbg-navy-gradient  { --ig-surface: linear-gradient(135deg, hsl(225, 70%, 20%), hsl(225, 72%, 11%)); }
.ig-pbg-gold-gradient  { --ig-surface: linear-gradient(135deg, hsl(38, 92%, 60%), hsl(38, 90%, 46%)); }
.ig-pbg-teal-gradient  { --ig-surface: linear-gradient(135deg, hsl(174, 62%, 47%), hsl(174, 60%, 33%)); }
.ig-pbg-brand-gradient { --ig-surface: linear-gradient(135deg, hsl(225, 70%, 17%), hsl(174, 60%, 42%)); }

/* ---- Font input (palette selection) ---- */
.ig-pfont-navy  { --ig-ink: hsl(225, 70%, 17%); }
.ig-pfont-gold  { --ig-ink: hsl(38, 91%, 55%); }
.ig-pfont-teal  { --ig-ink: hsl(174, 60%, 42%); }
.ig-pfont-white { --ig-ink: #ffffff; }
.ig-pfont-gray  { --ig-ink: hsl(220, 10%, 46%); }

/* Apply the ink to the container so it INHERITS to all descendant text that does
   not set its own colour — broad, graceful coverage with no !important. Elements
   that hardcode their own colour (intentional accents) are left alone. */
.ig-pfont-navy  > .elementor-widget-container,
.ig-pfont-gold  > .elementor-widget-container,
.ig-pfont-teal  > .elementor-widget-container,
.ig-pfont-white > .elementor-widget-container,
.ig-pfont-gray  > .elementor-widget-container { color: var(--ig-ink); }

/* Paint the Elementor container surface directly so the component background follows
   the palette even where the widget's own root is transparent. Widgets never style
   .elementor-widget-container, so there is no specificity fight — no !important needed.
   Uses the `background` shorthand so --ig-surface can be a solid OR a gradient. The
   attribute selector picks up every ig-pbg-* option, including future ones. */
[class*="ig-pbg-"] > .elementor-widget-container { background: var(--ig-surface); }

/* ---- Text alignment ---- (explicit layout override; inherits to text elements) ---- */
.ig-talign-left    > .elementor-widget-container { text-align: left; }
.ig-talign-center  > .elementor-widget-container { text-align: center; }
.ig-talign-right   > .elementor-widget-container { text-align: right; }
.ig-talign-justify > .elementor-widget-container { text-align: justify; }

/* ---- Component alignment on the page (visible when the component is narrower than full width) ---- */
.ig-calign-left   > .elementor-widget-container { margin-left: 0;    margin-right: auto; }
.ig-calign-center > .elementor-widget-container { margin-left: auto; margin-right: auto; }
.ig-calign-right  > .elementor-widget-container { margin-left: auto; margin-right: 0; }