/**
 * UCG Blocks — Global Stylesheet Entry Point
 * assets/css/global/ucg-global.css
 *
 * Enqueued ONCE on every page via plugin.php.
 * All per-block CSS files depend on this (registered with 'ucg-global' as dep).
 *
 * Contains:
 *   1. Typography base styles for .UCG-block and .ucg-block wrappers
 *   2. Extended typography utility classes (Display, Nav, Megamenu, Label, Input, Disclaimer)
 *   3. Button base styles (.ucg-btn) — single source of truth
 *   4. Utility classes (.ucg-section, .ucg-container, etc.)
 *
 * Color values come from CSS custom properties set by theme-setting.php.
 * ZERO hardcoded colors in this file.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BASE TYPOGRAPHY
   Applied to all UCG block wrappers.
   ═══════════════════════════════════════════════════════════════════════════ */

html :where([style*="border-width"]) {
  border-style: none !important;
}

.UCG-block h1, .UCG-block h2, .UCG-block h3,
.UCG-block h4, .UCG-block h5, .UCG-block h6,
.ucg-block h1, .ucg-block h2, .ucg-block h3,
.ucg-block h4, .ucg-block h5, .ucg-block h6 {
    color:       var(--color-text-heading);
    line-height: 1.2;
    margin-top:  0;
}

.UCG-block p,
.ucg-block p {
    color:         var(--color-text-body);
    margin-top:    0;
    margin-bottom: 1em;
}

.UCG-block p:last-child,
.ucg-block p:last-child {
    margin-bottom: 0;
}

.UCG-block strong,
.UCG-block b,
.ucg-block strong,
.ucg-block b {
    color:       var(--color-text-heading);
    font-weight: 700;
}

.UCG-block a:not(.ucg-btn),
.ucg-block a:not(.ucg-btn) {
    color:                 var(--color-text-link);
    text-decoration:       underline;
    text-underline-offset: 2px;
    transition:            color 0.2s ease;
}

.UCG-block a:not(.ucg-btn):hover,
.ucg-block a:not(.ucg-btn):hover {
    color: var(--color-text-link-hover);
}

.UCG-block ul,
.UCG-block ol,
.ucg-block ul,
.ucg-block ol {
    padding-left: 1.4em;
    color:        var(--color-text-body);
}

.UCG-block li,
.ucg-block li {
    margin-bottom: 0.4em;
}

.UCG-block hr,
.ucg-block hr {
    border:     none;
    border-top: 1px solid var(--color-divider, var(--color-border-default));
    margin:     1.5em 0;
}

.ucg-text-muted {
    color:     var(--color-text-muted);
    font-size: 0.875em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXTENDED TYPOGRAPHY UTILITY CLASSES
   These apply CSS custom properties from global theme settings.
   Use them on any HTML element inside a UCG block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── H1 ─────────────────────────────────────────────────────────────────── */

body .entry-content h1 {
    font-family:     var(--h1-font-family, inherit);
    font-weight:     var(--h1-font-weight, 400);
    font-size:       var(--h1-font-size, 2.25rem);
    line-height:     var(--h1-line-height, 1.2);
    letter-spacing:  var(--h1-letter-spacing, 0);
    text-transform:  var(--h1-text-transform, none);
    text-decoration: var(--h1-text-decoration, none);
    font-style:      var(--h1-font-style, normal);
    word-spacing:    var(--h1-word-spacing, normal);
    margin-top:      var(--h1-margin-top, 0);
    margin-bottom:   var(--h1-margin-bottom, 0.5em);
}

/* ─── H2 ─────────────────────────────────────────────────────────────────── */
body .entry-content h2 {
    font-family:      var(--h2-font-family, inherit);
    font-weight:      var(--h2-font-weight, 400);
    font-size:        var(--h2-font-size, 1.875rem);
    line-height:      var(--h2-line-height, 1.25);
    letter-spacing:   var(--h2-letter-spacing, 0);
    text-transform:   var(--h2-text-transform, none);
    text-decoration:  var(--h2-text-decoration, none);
    font-style:       var(--h2-font-style, normal);
    word-spacing:     var(--h2-word-spacing, normal);
    margin-top:       var(--h2-margin-top, 0);
    margin-bottom:    var(--h2-margin-bottom, 0.5em);
}

/* ─── H3 ─────────────────────────────────────────────────────────────────── */
body .entry-content h3 {
    font-family:      var(--h3-font-family, inherit);
    font-weight:      var(--h3-font-weight, 400);
    font-size:        var(--h3-font-size, 1.5rem);
    line-height:      var(--h3-line-height, 1.3);
    letter-spacing:   var(--h3-letter-spacing, 0);
    text-transform:   var(--h3-text-transform, none);
    text-decoration:  var(--h3-text-decoration, none);
    font-style:       var(--h3-font-style, normal);
    word-spacing:     var(--h3-word-spacing, normal);
    margin-top:       var(--h3-margin-top, 0);
    margin-bottom:    var(--h3-margin-bottom, 0.5em);
}

/* ─── H4 ─────────────────────────────────────────────────────────────────── */
body .entry-content h4 {
    font-family:      var(--h4-font-family, inherit);
    font-weight:      var(--h4-font-weight, 400);
    font-size:        var(--h4-font-size, 1.25rem) !important;
    line-height:      var(--h4-line-height, 1.35);
    letter-spacing:   var(--h4-letter-spacing, 0);
    text-transform:   var(--h4-text-transform, none);
    text-decoration:  var(--h4-text-decoration, none);
    font-style:       var(--h4-font-style, normal);
    word-spacing:     var(--h4-word-spacing, normal);
    margin-top:       var(--h4-margin-top, 0);
    margin-bottom:    var(--h4-margin-bottom, 0.5em);
}

/* ─── H5 ─────────────────────────────────────────────────────────────────── */
body .entry-content h5 {
    font-family:      var(--h5-font-family, inherit);
    font-weight:      var(--h5-font-weight, 400);
    font-size:        var(--h5-font-size, 1.125rem);
    line-height:      var(--h5-line-height, 1.4);
    letter-spacing:   var(--h5-letter-spacing, 0);
    text-transform:   var(--h5-text-transform, none);
    text-decoration:  var(--h5-text-decoration, none);
    font-style:       var(--h5-font-style, normal);
    word-spacing:     var(--h5-word-spacing, normal);
    margin-top:       var(--h5-margin-top, 0);
    margin-bottom:    var(--h5-margin-bottom, 0.5em);
}

/* ─── H6 ─────────────────────────────────────────────────────────────────── */
body .entry-content h6 {
    font-family:      var(--h6-font-family, inherit);
    font-weight:      var(--h6-font-weight, 400);
    font-size:        var(--h6-font-size, 1rem);
    line-height:      var(--h6-line-height, 1.4);
    letter-spacing:   var(--h6-letter-spacing, 0);
    text-transform:   var(--h6-text-transform, none);
    text-decoration:  var(--h6-text-decoration, none);
    font-style:       var(--h6-font-style, normal);
    word-spacing:     var(--h6-word-spacing, normal);
    margin-top:       var(--h6-margin-top, 0);
    margin-bottom:    var(--h6-margin-bottom, 0.5em);
}


/* ─── Paragraph (default body text) ───────────────────────────────────────── */
body {
    font-family:      var(--paragraph-font-family, inherit);
    font-weight:      var(--paragraph-font-weight, 400);
    font-size:        var(--paragraph-font-size, 0.9375rem);
    line-height:      var(--paragraph-line-height, 1.6);
    letter-spacing:   var(--paragraph-letter-spacing, 0);
    text-transform:   var(--paragraph-text-transform, none);
    text-decoration:  var(--paragraph-text-decoration, none);
    font-style:       var(--paragraph-font-style, normal);
    word-spacing:     var(--paragraph-word-spacing, normal);
    margin-top:       var(--paragraph-margin-top, 0);
    margin-bottom:    var(--paragraph-margin-bottom, 1em);
}

/* ─── Paragraph XL ─────────────────────────────────────────────────────────── */
.paragraph-xl {
    font-family:      var(--paragraph-xl-font-family, inherit);
    font-weight:      var(--paragraph-xl-font-weight, 400);
    font-size:        var(--paragraph-xl-font-size, 1rem);
    line-height:      var(--paragraph-xl-line-height, 1.6);
    letter-spacing:   var(--paragraph-xl-letter-spacing, 0);
    text-transform:   var(--paragraph-xl-text-transform, none);
    text-decoration:  var(--paragraph-xl-text-decoration, none);
    font-style:       var(--paragraph-xl-font-style, normal);
    word-spacing:     var(--paragraph-xl-word-spacing, normal);
    margin-top:       var(--paragraph-xl-margin-top, 0);
    margin-bottom:    var(--paragraph-xl-margin-bottom, 1em);
}

/* ─── Paragraph L ──────────────────────────────────────────────────────────── */
.paragraph-l {
    font-family:      var(--paragraph-l-font-family, inherit);
    font-weight:      var(--paragraph-l-font-weight, 400);
    font-size:        var(--paragraph-l-font-size, 0.9375rem);
    line-height:      var(--paragraph-l-line-height, 1.6);
    letter-spacing:   var(--paragraph-l-letter-spacing, 0);
    text-transform:   var(--paragraph-l-text-transform, none);
    text-decoration:  var(--paragraph-l-text-decoration, none);
    font-style:       var(--paragraph-l-font-style, normal);
    word-spacing:     var(--paragraph-l-word-spacing, normal);
    margin-top:       var(--paragraph-l-margin-top, 0);
    margin-bottom:    var(--paragraph-l-margin-bottom, 1em);
}

/* ─── Paragraph S ──────────────────────────────────────────────────────────── */
.paragraph-s {
    font-family:      var(--paragraph-s-font-family, inherit);
    font-weight:      var(--paragraph-s-font-weight, 400);
    font-size:        var(--paragraph-s-font-size, 0.8125rem);
    line-height:      var(--paragraph-s-line-height, 1.6);
    letter-spacing:   var(--paragraph-s-letter-spacing, 0);
    text-transform:   var(--paragraph-s-text-transform, none);
    text-decoration:  var(--paragraph-s-text-decoration, none);
    font-style:       var(--paragraph-s-font-style, normal);
    word-spacing:     var(--paragraph-s-word-spacing, normal);
    margin-top:       var(--paragraph-s-margin-top, 0);
    margin-bottom:    var(--paragraph-s-margin-bottom, 1em);
}



/* ─── Display1 ───────────────────────────────────────────────────────────── */
.display1 {
    font-family:      var(--display1-font-family, inherit);
    font-weight:      var(--display1-font-weight, 400);
    font-size:        var(--display1-font-size, 3rem);
    line-height:      var(--display1-line-height, 1.2);
    letter-spacing:   var(--display1-letter-spacing, 0);
    text-transform:   var(--display1-text-transform, none);
    text-decoration:  var(--display1-text-decoration, none);
    font-style:       var(--display1-font-style, normal);
    word-spacing:     var(--display1-word-spacing, normal);
    margin-top:       var(--display1-margin-top, 0);
    margin-bottom:    var(--display1-margin-bottom, 0.5em);
}

/* ─── Display2 ───────────────────────────────────────────────────────────── */
.display2 {
    font-family:      var(--display2-font-family, inherit);
    font-weight:      var(--display2-font-weight, 400);
    font-size:        var(--display2-font-size, 2.5rem);
    line-height:      var(--display2-line-height, 1.2);
    letter-spacing:   var(--display2-letter-spacing, 0);
    text-transform:   var(--display2-text-transform, none);
    text-decoration:  var(--display2-text-decoration, none);
    font-style:       var(--display2-font-style, normal);
    word-spacing:     var(--display2-word-spacing, normal);
    margin-top:       var(--display2-margin-top, 0);
    margin-bottom:    var(--display2-margin-bottom, 0.5em);
}

/* ─── Nav1 ───────────────────────────────────────────────────────────────── */
.nav1 li a {
    font-family:      var(--nav1-font-family, inherit);
    font-weight:      var(--nav1-font-weight, 500);
    font-size:        var(--nav1-font-size, 1rem);
    line-height:      var(--nav1-line-height, 1.5);
    letter-spacing:   var(--nav1-letter-spacing, 0);
    text-transform:   var(--nav1-text-transform, none);
    text-decoration:  var(--nav1-text-decoration, none);
    font-style:       var(--nav1-font-style, normal);
    word-spacing:     var(--nav1-word-spacing, normal);
    margin-top:       var(--nav1-margin-top, 0);
    margin-bottom:    var(--nav1-margin-bottom, 0.5em);
}

/* ─── Nav2 ───────────────────────────────────────────────────────────────── */
.nav2 li a {
    font-family:      var(--nav2-font-family, inherit);
    font-weight:      var(--nav2-font-weight, 500);
    font-size:        var(--nav2-font-size, 0.875rem);
    line-height:      var(--nav2-line-height, 1.5);
    letter-spacing:   var(--nav2-letter-spacing, 0);
    text-transform:   var(--nav2-text-transform, none);
    text-decoration:  var(--nav2-text-decoration, none);
    font-style:       var(--nav2-font-style, normal);
    word-spacing:     var(--nav2-word-spacing, normal);
    margin-top:       var(--nav2-margin-top, 0);
    margin-bottom:    var(--nav2-margin-bottom, 0.5em);
}

/* ─── Mega Menu 1 ────────────────────────────────────────────────────────── */
.ucg-megamenu1 li a {
    font-family:      var(--megamenu1-font-family, inherit);
    font-weight:      var(--megamenu1-font-weight, 600);
    font-size:        var(--megamenu1-font-size, 1.125rem);
    line-height:      var(--megamenu1-line-height, 1.4);
    letter-spacing:   var(--megamenu1-letter-spacing, 0);
    text-transform:   var(--megamenu1-text-transform, none);
    text-decoration:  var(--megamenu1-text-decoration, none);
    font-style:       var(--megamenu1-font-style, normal);
    word-spacing:     var(--megamenu1-word-spacing, normal);
    margin-top:       var(--megamenu1-margin-top, 0);
    margin-bottom:    var(--megamenu1-margin-bottom, 0.5em);
}

/* ─── Mega Menu 2 ────────────────────────────────────────────────────────── */
.ucg-megamenu2 li a {
    font-family:      var(--megamenu2-font-family, inherit);
    font-weight:      var(--megamenu2-font-weight, 500);
    font-size:        var(--megamenu2-font-size, 1rem);
    line-height:      var(--megamenu2-line-height, 1.4);
    letter-spacing:   var(--megamenu2-letter-spacing, 0);
    text-transform:   var(--megamenu2-text-transform, none);
    text-decoration:  var(--megamenu2-text-decoration, none);
    font-style:       var(--megamenu2-font-style, normal);
    word-spacing:     var(--megamenu2-word-spacing, normal);
    margin-top:       var(--megamenu2-margin-top, 0);
    margin-bottom:    var(--megamenu2-margin-bottom, 0.5em);
}

/* ─── Label Text ─────────────────────────────────────────────────────────── */
.label {
    font-family:      var(--label-text-font-family, inherit);
    font-weight:      var(--label-text-font-weight, 600);
    font-size:        var(--label-text-font-size, 0.75rem);
    line-height:      var(--label-text-line-height, 1.4);
    letter-spacing:   var(--label-text-letter-spacing, 0.5px);
    text-transform:   var(--label-text-text-transform, uppercase);
    text-decoration:  var(--label-text-text-decoration, none);
    font-style:       var(--label-text-font-style, normal);
    word-spacing:     var(--label-text-word-spacing, normal);
    margin-top:       var(--label-text-margin-top, 0);
    margin-bottom:    var(--label-text-margin-bottom, 0.25em);
}

/* ─── Input Text ─────────────────────────────────────────────────────────── */
.input {
    font-family:      var(--input-text-font-family, inherit);
    font-weight:      var(--input-text-font-weight, 400);
    font-size:        var(--input-text-font-size, 1rem);
    line-height:      var(--input-text-line-height, 1.5);
    letter-spacing:   var(--input-text-letter-spacing, 0);
    text-transform:   var(--input-text-text-transform, none);
    text-decoration:  var(--input-text-text-decoration, none);
    font-style:       var(--input-text-font-style, normal);
    word-spacing:     var(--input-text-word-spacing, normal);
    margin-top:       var(--input-text-margin-top, 0);
    margin-bottom:    var(--input-text-margin-bottom, 0.5em);
}

/* ─── Disclaimer ─────────────────────────────────────────────────────────── */
.disclaimer {
    font-family:      var(--disclaimer-font-family, inherit);
    font-weight:      var(--disclaimer-font-weight, 400);
    font-size:        var(--disclaimer-font-size, 0.75rem);
    line-height:      var(--disclaimer-line-height, 1.4);
    letter-spacing:   var(--disclaimer-letter-spacing, 0);
    text-transform:   var(--disclaimer-text-transform, none);
    text-decoration:  var(--disclaimer-text-decoration, none);
    font-style:       var(--disclaimer-font-style, normal);
    word-spacing:     var(--disclaimer-word-spacing, normal);
    margin-top:       var(--disclaimer-margin-top, 0);
    margin-bottom:    var(--disclaimer-margin-bottom, 0);
    color:            var(--color-text-muted);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS — SINGLE SOURCE OF TRUTH
   Structure and layout only. Colors come from theme vars on the
   parent section element via ucg_get_theme_css_vars().
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   SIZE MODIFIERS
   ─────────────────────────────────────────────────────────────────────────── */

.ucg-btn.btn-lg {
    padding:    var(--btn-pt-lg, 16px) var(--btn-px-lg, 36px) var(--btn-pb-lg, 16px);
    min-height: var(--btn-h-lg, 56px);
    font-size:  calc(var(--size-base-font, 16px) * 1.125);
}

.ucg-btn.btn-sm {
    padding:    var(--btn-pt-sm, 8px) var(--btn-px-sm, 18px) var(--btn-pb-sm, 8px);
    min-height: var(--btn-h-sm, 36px);
    font-size:  calc(var(--size-base-font, 16px) * 0.875);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRIMARY BUTTON  (.bbt-primary)
   Colors + typography applied via block CSS / theme vars from ACF settings.
   ═══════════════════════════════════════════════════════════════════════════ */

.ucg-btn.bbt-primary {
    background-color: var(--btn-primary-bg,           var(--brand-primary, #000));
    color:            var(--btn-primary-color,         var(--brand-primary-text, #fff));
    border-color:     var(--btn-primary-border-color,  transparent);
    border-width:     var(--btn-primary-border-width,  2px);
    border-style:     var(--btn-primary-border-style,  solid);
    border-radius:    var(--btn-primary-border-radius, var(--global-border-radius, 4px));

    /* Typography from ACF */
    font-family:      var(--btn-primary-font-family,      inherit);
    font-size:        var(--btn-primary-font-size,        var(--size-base-font, 16px));
    font-weight:      var(--btn-primary-font-weight,      600);
    font-style:       var(--btn-primary-font-style,       normal);
    letter-spacing:   var(--btn-primary-letter-spacing,   var(--size-letter-spacing, 0em));
    word-spacing:     var(--btn-primary-word-spacing,     normal);
    text-transform:   var(--btn-primary-text-transform,   none);
    line-height:      var(--btn-primary-line-height,      1);

    /* Sizing from ACF */
    min-height:       var(--btn-primary-height,     44px);
    width:            var(--btn-primary-width,      auto);
    min-width:        var(--btn-primary-min-width,  unset);
    padding:          var(--btn-primary-padding,    12px 28px);

    /* Misc from ACF */
    cursor:           var(--btn-primary-cursor,     pointer);
    opacity:          var(--btn-primary-opacity,    1);
    outline:          var(--btn-primary-outline,    none);
    box-shadow:       var(--btn-primary-box-shadow, none);
    transition:       var(--btn-primary-transition,
                          background-color 0.25s ease,
                          color            0.25s ease,
                          border-color     0.25s ease,
                          box-shadow       0.25s ease,
                          opacity          0.25s ease);
}

.ucg-btn.bbt-primary:hover {
    background-color: var(--btn-primary-bg-hover,         var(--btn-primary-bg,          var(--brand-primary, #000)));
    color:            var(--btn-primary-color-hover,       var(--btn-primary-color,       var(--brand-primary-text, #fff)));
    border-color:     var(--btn-primary-border-color-hover, transparent);
    box-shadow:       var(--btn-primary-hover-box-shadow,  none);
    opacity:          var(--btn-primary-hover-opacity,     1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECONDARY BUTTON  (.bbt-secondary)
   Outlined style — border uses currentColor by default; fully overridable.
   ═══════════════════════════════════════════════════════════════════════════ */

.ucg-btn.bbt-secondary {
    background-color: var(--btn-secondary-bg,           transparent);
    color:            var(--btn-secondary-color,         var(--brand-primary, #000));
    border-color:     var(--btn-secondary-border-color,  currentColor);
    border-width:     var(--btn-secondary-border-width,  2px);
    border-style:     var(--btn-secondary-border-style,  solid);
    border-radius:    var(--btn-secondary-border-radius, var(--global-border-radius, 4px));

    /* Typography from ACF */
    font-family:      var(--btn-secondary-font-family,    inherit);
    font-size:        var(--btn-secondary-font-size,      var(--size-base-font, 16px));
    font-weight:      var(--btn-secondary-font-weight,    600);
    font-style:       var(--btn-secondary-font-style,     normal);
    letter-spacing:   var(--btn-secondary-letter-spacing, var(--size-letter-spacing, 0em));
    word-spacing:     var(--btn-secondary-word-spacing,   normal);
    text-transform:   var(--btn-secondary-text-transform, none);
    line-height:      var(--btn-secondary-line-height,    1);

    /* Sizing from ACF */
    min-height:       var(--btn-secondary-height,     44px);
    width:            var(--btn-secondary-width,      auto);
    min-width:        var(--btn-secondary-min-width,  unset);
    padding:          var(--btn-secondary-padding,    12px 28px);

    /* Misc from ACF */
    cursor:           var(--btn-secondary-cursor,     pointer);
    opacity:          var(--btn-secondary-opacity,    1);
    outline:          var(--btn-secondary-outline,    none);
    box-shadow:       var(--btn-secondary-box-shadow, none);
    transition:       var(--btn-secondary-transition,
                          background-color 0.25s ease,
                          color            0.25s ease,
                          border-color     0.25s ease,
                          box-shadow       0.25s ease,
                          opacity          0.25s ease);
}

.ucg-btn.bbt-secondary:hover {
    background-color: var(--btn-secondary-bg-hover,           var(--btn-secondary-bg,          transparent));
    color:            var(--btn-secondary-color-hover,         var(--btn-secondary-color,       var(--brand-primary, #000)));
    border-color:     var(--btn-secondary-border-color-hover,  currentColor);
    box-shadow:       var(--btn-secondary-hover-box-shadow,    none);
    opacity:          var(--btn-secondary-hover-opacity,       1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TERTIARY BUTTON  (.bbt-tertiary)
   Text / link style — no background, underline decoration, arrow animation.
   ═══════════════════════════════════════════════════════════════════════════ */

.ucg-btn.bbt-tertiary {
    background-color:      var(--btn-tertiary-bg,            transparent);
    color:                 var(--btn-tertiary-color,          var(--brand-primary, #000));
    border-color:          transparent;
    border-width:          var(--btn-tertiary-border-width,  2px);
    border-style:          var(--btn-tertiary-border-style,  solid);
    border-radius:         var(--btn-tertiary-border-radius, 0);
    padding-left:          var(--btn-tertiary-padding-left,  0);
    padding-right:         var(--btn-tertiary-padding-right, 0);
/*     text-decoration:       underline; */
    text-underline-offset: 3px;

    /* Typography from ACF */
    font-family:           var(--btn-tertiary-font-family,    inherit);
    font-size:             var(--btn-tertiary-font-size,      var(--size-base-font, 16px));
    font-weight:           var(--btn-tertiary-font-weight,    500);
    font-style:            var(--btn-tertiary-font-style,     normal);
    letter-spacing:        var(--btn-tertiary-letter-spacing, var(--size-letter-spacing, 0em));
    word-spacing:          var(--btn-tertiary-word-spacing,   normal);
    text-transform:        var(--btn-tertiary-text-transform, none);
    line-height:           var(--btn-tertiary-line-height,    1);

    /* Sizing from ACF */
    min-height:            var(--btn-tertiary-height,     auto);
    width:                 var(--btn-tertiary-width,      auto);
    min-width:             var(--btn-tertiary-min-width,  unset);

    /* Misc from ACF */
    cursor:                var(--btn-tertiary-cursor,     pointer);
    opacity:               var(--btn-tertiary-opacity,    1);
    outline:               var(--btn-tertiary-outline,    none);
    box-shadow:            var(--btn-tertiary-box-shadow, none);
    transition:            var(--btn-tertiary-transition,
                               color      0.25s ease,
                               opacity    0.25s ease,
                               box-shadow 0.25s ease);
}

.ucg-btn.bbt-tertiary:hover {
    background-color: var(--btn-tertiary-bg-hover,    transparent);
    color:            var(--btn-tertiary-color-hover,  var(--btn-tertiary-color, var(--brand-primary, #000)));
    border-color:     transparent;
    text-decoration:  none;
    box-shadow:       var(--btn-tertiary-hover-box-shadow, none);
    opacity:          var(--btn-tertiary-hover-opacity, 1);
}

/* Arrow / icon animation */
.ucg-btn.bbt-tertiary i,
.ucg-btn.bbt-tertiary .fa-arrow-right {
    font-size:  0.85em;
    transition: transform 0.2s ease;
}

.ucg-btn.bbt-tertiary:hover i,
.ucg-btn.bbt-tertiary:hover .fa-arrow-right {
    transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUATERNARY BUTTON  (.bbt-quaternary)
   Ghost / outline style — transparent bg, subtle border.
   ═══════════════════════════════════════════════════════════════════════════ */

.ucg-btn.bbt-quaternary {
    background-color: var(--btn-quaternary-bg,           transparent);
    color:            var(--btn-quaternary-color,         inherit);
    border-color:     var(--btn-quaternary-border-color,  var(--color-border-default, rgba(0,0,0,0.2)));
    border-width:     var(--btn-quaternary-border-width,  2px);
    border-style:     var(--btn-quaternary-border-style,  solid);
    border-radius:    var(--btn-quaternary-border-radius, var(--global-border-radius, 4px));

    /* Typography from ACF */
    font-family:      var(--btn-quaternary-font-family,    inherit);
    font-size:        var(--btn-quaternary-font-size,      var(--size-base-font, 16px));
    font-weight:      var(--btn-quaternary-font-weight,    600);
    font-style:       var(--btn-quaternary-font-style,     normal);
    letter-spacing:   var(--btn-quaternary-letter-spacing, var(--size-letter-spacing, 0em));
    word-spacing:     var(--btn-quaternary-word-spacing,   normal);
    text-transform:   var(--btn-quaternary-text-transform, none);
    line-height:      var(--btn-quaternary-line-height,    1);

    /* Sizing from ACF */
    min-height:       var(--btn-quaternary-height,     44px);
    width:            var(--btn-quaternary-width,      auto);
    min-width:        var(--btn-quaternary-min-width,  unset);
    padding:          var(--btn-quaternary-padding,    12px 28px);

    /* Misc from ACF */
    cursor:           var(--btn-quaternary-cursor,     pointer);
    opacity:          var(--btn-quaternary-opacity,    1);
    outline:          var(--btn-quaternary-outline,    none);
    box-shadow:       var(--btn-quaternary-box-shadow, none);
    transition:       var(--btn-quaternary-transition,
                          background-color 0.25s ease,
                          color            0.25s ease,
                          border-color     0.25s ease,
                          box-shadow       0.25s ease,
                          opacity          0.25s ease);
}

.ucg-btn.bbt-quaternary:hover {
    background-color: var(--btn-quaternary-bg-hover,           var(--btn-quaternary-bg,         transparent));
    color:            var(--btn-quaternary-color-hover,         var(--btn-quaternary-color,      inherit));
    border-color:     var(--btn-quaternary-border-color-hover,  var(--color-border-default, rgba(0,0,0,0.2)));
    box-shadow:       var(--btn-quaternary-hover-box-shadow,    none);
    opacity:          var(--btn-quaternary-hover-opacity,       1);
}



/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON WRAPPER
   ═══════════════════════════════════════════════════════════════════════════ */

.ucg-btn-wrap {
    display:    flex;
    flex-wrap:  wrap;
    gap:        12px;
    margin-top: 28px;
}

/* Alignment — set by button.php via the "align-{left|center|right}" class,
   which follows the block's Text Align (CMS) setting. */
.ucg-btn-wrap.align-left   { justify-content: flex-start; }
.ucg-btn-wrap.align-center { justify-content: center;     }
.ucg-btn-wrap.align-right  { justify-content: flex-end;   }

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Desktop */
.ucg-section {
    padding-top: var(--size-section-pt, 6.25rem);      /* 100px */
    padding-bottom: var(--size-section-pb, 6.25rem);   /* 100px */
}

/* Tablet */
@media (max-width: 1024px) {
     body .ucg-section {
        padding-top: calc(var(--size-section-pt, 60px) * 0.75);
        padding-bottom: calc(var(--size-section-pb, 60px) * 0.75);
    }
}

/* Mobile */
@media (max-width: 767px) {
    body .ucg-section {
        padding-top: calc(var(--size-section-pt, 40px) * 0.5);
        padding-bottom: calc(var(--size-section-pb, 40px) * 0.5);
    }
}

/* .ucg-container, .container{
    width:         var(--size-container-max, 90%);
    max-width:     100%;
    margin-left:   auto;
    margin-right:  auto;
    padding-left:  var(--size-container-px, 24px);
    padding-right: var(--size-container-px, 24px);
} */

/*==== container ====*/
.pg--width {
	padding-left: 20px;
	padding-right: 20px;
}
.pg-container,
.ucg-container, 
.container {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--size-container-max, 87%);
	width: 100%;
}
/* responsive */
@media (max-width: 1349px) {
	.pg-container, 
	.ucg-container, 
	.container {
		max-width: 95%;
	}
}
@media (max-width: 1024px) {
	.pg-container, 
	.ucg-container, 
	.container {
		max-width: 97%;
	}
}
@media (max-width: 767px) {
	.pg--width {
		padding-left: 15px;
		padding-right: 15px;
	}
	.pg-container, 
	.ucg-container, 
	.container {
		max-width: 100%;
	}
}
/*==== end container ====*/

.ucg-img-cover {
    display:         block;
    width:           100%;
    height:          100%;
    object-fit:      var(--img-object-fit, cover);
    object-position: center center;
}

.ucg-icon-box {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           var(--icon-bg-size, 48px);
    height:          var(--icon-bg-size, 48px);
    background:      var(--icon-bg, transparent);
    border-radius:   var(--icon-bg-radius, 50%);
    flex-shrink:     0;
}

.ucg-icon {
    width:  var(--icon-size, 24px);
    height: var(--icon-size, 24px);
    color:  var(--icon-color, currentColor);
    fill:   var(--icon-color, currentColor);
}

/* Aspect ratio helpers */
.ucg-ratio           { position: relative; width: 100%; overflow: hidden; }
.ucg-ratio > *       { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ucg-ratio--1x1      { aspect-ratio: 1 / 1; }
.ucg-ratio--4x3      { aspect-ratio: 4 / 3; }
.ucg-ratio--16x9     { aspect-ratio: 16 / 9; }
.ucg-ratio--3x2      { aspect-ratio: 3 / 2; }

/* Column grid (12-col) — reusable across any block */
.ucg-col-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.ucg-col-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.ucg-col-3  { flex: 0 0 25%;      max-width: 25%; }
.ucg-col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.ucg-col-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.ucg-col-6  { flex: 0 0 50%;      max-width: 50%; }
.ucg-col-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.ucg-col-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.ucg-col-9  { flex: 0 0 75%;      max-width: 75%; }
.ucg-col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.ucg-col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.ucg-col-12 { flex: 0 0 100%;     max-width: 100%; }

@media (max-width: 767px) {
    [class^="ucg-col-"],
    [class*=" ucg-col-"] {
        flex:      0 0 100%;
        max-width: 100%;
    }
}

/* Section height presets — set --ucg-row-min-height for block CSS to consume */
.ucg-section-height--small  { --ucg-row-min-height: 560px; }
.ucg-section-height--medium { --ucg-row-min-height: 720px; }
.ucg-section-height--full   { --ucg-row-min-height: 100vh; }

@media (max-width: 1024px) {
    .ucg-section-height--small  { --ucg-row-min-height: 480px; }
    .ucg-section-height--medium { --ucg-row-min-height: 600px; }
    .ucg-section-height--full   { --ucg-row-min-height: 100vh; }
}

@media (max-width: 767px) {
    .ucg-section-height--small,
    .ucg-section-height--medium,
    .ucg-section-height--full {
        --ucg-row-min-height: unset;
    }
}

/* Text align presets — set --ucg-text-align for block CSS to consume */
.ucg-text-align--left   { --ucg-text-align: left; }
.ucg-text-align--right  { --ucg-text-align: right; }
.ucg-text-align--center { --ucg-text-align: center; }

/* Card */
.ucg-card,
.card {
    border-radius: var(--card-radius, var(--global-card-radius, 8px));
}

/* Padding presets — CMS → UCG Settings → Styling → Sizes & Spaces */
.ucg-card-padding-tight {
    padding: var(--card-padding-tight, 16px);
}

.ucg-card-padding-roomy {
    padding: var(--card-padding-roomy, 40px);
}

/* Responsive visibility helpers */
@media (max-width: 767px)                         { .ucg-hide-mobile  { display: none !important; } }
@media (min-width: 768px) and (max-width: 1023px) { .ucg-hide-tablet  { display: none !important; } }
@media (min-width: 1024px)                        { .ucg-hide-desktop { display: none !important; } }

@media (min-width: 1750px) {
	body .entry-content h1 {
		font-size: calc(var(--h1-font-size) * 1.25);
	}
	body .entry-content h2 {
		font-size: calc(var(--h2-font-size) * 1.25);
	}
	body .entry-content h3 {
		font-size: calc(var(--h3-font-size) * 1.25);
	}
	body .entry-content h4 {
		font-size: calc(var(--h4-font-size) * 1.25);
	}
	body .entry-content h5 {
		font-size: calc(var(--h5-font-size) * 1.25);
	}
	body .entry-content h6 {
		font-size: calc(var(--h6-font-size) * 1.25);
	}
	body .entry-content .display1 {
		font-size: calc(var(--display1-font-size) * 1.25);
	}
	body .entry-content .display2 {
		font-size: calc(var(--display2-font-size) * 1.25);
	}
	body .entry-content .body1 {
		font-size: calc(var(--body1-font-size) * 1.25);
	}
	body .entry-content .body2 {
		font-size: calc(var(--body2-font-size) * 1.25);
	}
	body .entry-content .body3 {
		font-size: calc(var(--body3-font-size) * 1.25);
	}
	body .entry-content .body4 {
		font-size: calc(var(--body4-font-size) * 1.25);
	}
}

@media (max-width: 1024px) {
	body .entry-content h1 {
		font-size: calc(var(--h1-font-size) * 0.85);
	}
	body .entry-content h2 {
		font-size: calc(var(--h2-font-size) * 0.85);
	}
	body .entry-content h3 {
		font-size: calc(var(--h3-font-size) * 0.85);
	}
	body .entry-content h4 {
		font-size: calc(var(--h4-font-size) * 0.85);
	}
	body .entry-content h5 {
		font-size: calc(var(--h5-font-size) * 0.85);
	}
	body .entry-content h6 {
		font-size: calc(var(--h6-font-size) * 0.85);
	}
	body .entry-content .display1 {
		font-size: calc(var(--display1-font-size) * 0.85);
	}
	body .entry-content .display2 {
		font-size: calc(var(--display2-font-size) * 0.85);
	}
	body .entry-content .body1 {
		font-size: calc(var(--body1-font-size) * 0.85);
	}
	body .entry-content .body2 {
		font-size: calc(var(--body2-font-size) * 0.85);
	}
	body .entry-content .body3 {
		font-size: calc(var(--body3-font-size) * 0.85);
	}
	body .entry-content .body4 {
		font-size: calc(var(--body4-font-size) * 0.85);
	}
}

@media (max-width: 767px) {
	body .entry-content h1 {
		font-size: calc(var(--h1-font-size) * 0.75);
	}
	body .entry-content h2 {
		font-size: calc(var(--h2-font-size) * 0.75);
	}
	body .entry-content h3 {
		font-size: calc(var(--h3-font-size) * 0.75);
	}
	body .entry-content h4 {
		font-size: calc(var(--h4-font-size) * 0.75);
	}
	body .entry-content h5 {
		font-size: calc(var(--h5-font-size) * 0.75);
	}
	body .entry-content h6 {
		font-size: calc(var(--h6-font-size) * 0.75);
	}
	body .entry-content .display1 {
		font-size: calc(var(--display1-font-size) * 0.75);
	}
	body .entry-content .display2 {
		font-size: calc(var(--display2-font-size) * 0.75);
	}
	body .entry-content .body1 {
		font-size: calc(var(--body1-font-size) * 0.75);
	}
	body .entry-content .body2 {
		font-size: calc(var(--body2-font-size) * 0.75);
	}
	body .entry-content .body3 {
		font-size: calc(var(--body3-font-size) * 0.75);
	}
	body .entry-content .body4 {
		font-size: calc(var(--body4-font-size) * 0.75);
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   IMAGE RASIO CSS
   ═══════════════════════════════════════════════════════════════════════════ */

.ratio-square {
    aspect-ratio: 1 / 1;
}

.ratio-standard {
    aspect-ratio: 4 / 3;
}

.ratio-portrait {
    aspect-ratio: 3 / 4;
}

.ratio-classic {
    aspect-ratio: 3 / 2;
}

.ratio-classic-portrait {
    aspect-ratio: 2 / 3;
}

.ratio-wide {
    aspect-ratio: 16 / 9;
}

.ratio-tall {
    aspect-ratio: 9 / 16;
}

.ratio-original {
    aspect-ratio: auto;
}



header.new-header.sticky {
    position: fixed;
    width: 100%;
    height: auto;
     top: 0;
    z-index: 11119;
    animation: headslideDown 0.4s ease forwards;
}
@keyframes headslideDown {
    0% {
        top: -200px; /* Off-screen */
    }
    100% {
        top: 0; /* Fully visible */
    }
}

.ucg-btn {
  text-decoration: none;
}


/* ============================================================
   CARD HEADING
   Explicit .ucg-media-text__card-heading element (from ACF text field)
   + any heading tags authored inside the wysiwyg copy area.

   Each level (H1–H6) resolves to its OWN Color Styling → "Text / On Card"
   selection (text_card_h1 … text_card_h6), so cards can use a different
   heading color per level, exactly like block-level headings do.

   Fallback chain (per level, e.g. H1):
     --card-heading   (per-block ACF override — wins for ALL levels)
     --text-card-h1   (theme Color Styling → Text / On Card → H1)
     --text-card-headings (legacy catch-all, if ever set)
     --heading        (legacy alias → text_block_headings)
     --text-block-headings (semantic long form)
============================================================ */

.card .ucg-media-text__card-heading,
.ucg-text-narrow-left-and-right .ucg-card .ucg-media-text__card-heading {
    color: var(--card-heading, var(--text-card-h2, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.card h1,
.ucg-card h1 {
    color: var(--card-heading, var(--text-card-h1, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.card h2,
.ucg-card h2 {
    color: var(--card-heading, var(--text-card-h2, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.card h3,
.ucg-card h3 {
    color: var(--card-heading, var(--text-card-h3, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.card h4,
.ucg-card h4 {
    color: var(--card-heading, var(--text-card-h4, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.card h5,
.ucg-card h5 {
    color: var(--card-heading, var(--text-card-h5, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.card h6,
.ucg-card h6 {
    color: var(--card-heading, var(--text-card-h6, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

/* ─── Display1 / Display2 inside a card ─────────────────────────────────────
   .display1 / .display2 are global utility classes (ucg-global.css). When
   authored inside a card, pull their color from the card-specific
   Display1/Display2 selections instead of the block-level ones. */

.card .display1,
.ucg-card .display1 {
    color: var(--card-heading, var(--text-card-display1, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}

.card .display2,
.ucg-card .display2 {
    color: var(--card-heading, var(--text-card-display2, var(--text-card-headings, var(--heading, var(--text-block-headings)))));
}


/* ============================================================
   CARD BODY TEXT
   Fallback chain:
     --card-text      (per-block ACF override)
     --text-card-body (theme Color Styling → card body)
     --text           (legacy alias → text_block_body)
     --text-block-body (semantic long form)
============================================================ */

.card p,
.card li,
.card span,
.ucg-card p,
.ucg-card li,
.ucg-card span {
    color: var(--card-text, var(--text-card-body, var(--text, var(--text-block-body))));
}

.card strong,
.card b,
.ucg-card strong,
.ucg-card b {
    /* Bold text inside cards inherits the card heading color for visual weight */
    color: var(--card-heading, var(--text-card-headings, var(--heading, var(--text-block-headings))));
}


/* ============================================================
   CARD LINKS
   Uses card-specific link vars from Color Styling.
============================================================ */

.card a:not(.ucg-btn),
.ucg-card a:not(.ucg-btn) {
    color: var(--text-card-link, var(--highlight, var(--highlight-main)));
}

.card a:not(.ucg-btn):hover,
.ucg-card a:not(.ucg-btn):hover {
    color: var(--text-card-link-hover, var(--highlight-hover, var(--highlight-secondary)));
}


.ucg-btn-wrap .small {
    padding: 10px 12px;
}