/*
 * Yume Asset Lab Common UI
 * Reusable visual components based on the Yume Trading Tools design.
 * v1.2.0: Publication-ready DWM CTA naming (label/title/text), Gutenberg button support, and CTA click tracking classes.
 * Child title/body corners are rounded separately without clipping the outer border.
 */
:root {
    --yume-navy: #142b44;
    --yume-navy-2: #1f3d5a;
    --yume-accent: #b38a45;
    --yume-bg: #f6f8fb;
    --yume-border: #dfe5ec;
    --yume-text: #1f2933;
    --yume-muted: #667381;
    --yume-danger: #b84a4a;
    --yume-blue: #3f78b7;
    --yume-yellow: #b88818;
    --yume-green: #4d865f;
    --yume-gray: #697684;
    --yume-radius: 14px;
    --yume-radius-sm: 8px;
    --yume-radius-md: 12px;
    --yume-radius-lg: 18px;
    --yume-radius-xl: 24px;
}

.yume-ui {
    color: var(--yume-text);
    font-family: inherit;
    line-height: 1.7;
}
.yume-ui *, .yume-ui *::before, .yume-ui *::after { box-sizing: border-box; }

.yume-hero {
    padding: 30px;
    border-radius: var(--yume-radius);
    background: linear-gradient(135deg, var(--yume-navy), var(--yume-navy-2));
    color: #fff;
    margin-bottom: 18px;
}
.yume-hero h1, .yume-hero h2, .yume-hero h3 { color: #fff; margin: 3px 0 8px; }
.yume-hero h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.yume-hero p { margin: 0; }
.yume-eyebrow { margin: 0 0 3px; font-weight: 700; letter-spacing: .08em; font-size: .82rem; }

.yume-notice {
    --yume-notice-accent: var(--yume-accent);
    --yume-notice-border: #e4d7bf;
    --yume-notice-bg: #fffaf1;
    border: 1px solid var(--yume-notice-border);
    border-left: 5px solid var(--yume-notice-accent);
    background: var(--yume-notice-bg);
    padding: 14px 16px;
    border-radius: 10px;
    margin: 0 0 18px;
}
.yume-notice strong { display: block; margin-bottom: 2px; }

/* Notice color variations. Use together with .yume-notice. */
.yume-notice--gold {
    --yume-notice-accent: var(--yume-accent);
    --yume-notice-border: #e4d7bf;
    --yume-notice-bg: #fffaf1;
}
.yume-notice--red,
.yume-notice--danger {
    --yume-notice-accent: var(--yume-danger);
    --yume-notice-border: #efcccc;
    --yume-notice-bg: #fff4f4;
}
.yume-notice--blue {
    --yume-notice-accent: var(--yume-blue);
    --yume-notice-border: #cbdcf0;
    --yume-notice-bg: #f3f8fd;
}
.yume-notice--yellow {
    --yume-notice-accent: var(--yume-yellow);
    --yume-notice-border: #ead9a5;
    --yume-notice-bg: #fff9e7;
}
.yume-notice--green {
    --yume-notice-accent: var(--yume-green);
    --yume-notice-border: #cce1d3;
    --yume-notice-bg: #f2f9f4;
}
.yume-notice--navy {
    --yume-notice-accent: var(--yume-navy);
    --yume-notice-border: #ccd7e2;
    --yume-notice-bg: #f3f6f9;
}
.yume-notice--gray {
    --yume-notice-accent: var(--yume-gray);
    --yume-notice-border: #d7dde3;
    --yume-notice-bg: #f6f7f8;
}

.yume-panel,
.yume-card-group {
    background: #fff;
    border: 1px solid var(--yume-border);
    border-radius: var(--yume-radius);
    padding: 24px;
    margin-bottom: 18px;
    box-shadow: 0 8px 28px rgba(23, 42, 62, .06);
}

.yume-section-title { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.yume-section-title > span {
    background: var(--yume-navy);
    color: #fff;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
    white-space: nowrap;
}
.yume-section-title h2, .yume-section-title h3 { margin: 0; font-size: 1.25rem; }

.yume-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.yume-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yume-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yume-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.yume-card {
    background: var(--yume-bg);
    border: 1px solid var(--yume-border);
    border-radius: 10px;
    padding: 15px;
}
.yume-card h3, .yume-card h4 { margin-top: 0; }
.yume-card > :last-child { margin-bottom: 0; }
.yume-card--white { background: #fff; }
.yume-card--navy { background: var(--yume-navy); color: #fff; border-color: var(--yume-navy); }
.yume-card--navy h2, .yume-card--navy h3, .yume-card--navy h4 { color: #fff; }

.yume-subpanel {
    background: var(--yume-bg);
    border: 1px solid var(--yume-border);
    border-radius: 12px;
    padding: 16px;
    margin-top: 5px;
}
.yume-subpanel h2, .yume-subpanel h3, .yume-subpanel h4 { margin-top: 0; }

.yume-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    padding: 12px 18px;
    min-height: 46px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none !important;
    transition: transform .15s ease, opacity .15s ease;
}
.yume-btn:hover { transform: translateY(-1px); opacity: .94; }
.yume-btn--primary { background: var(--yume-navy); color: #fff !important; }
.yume-btn--secondary { background: var(--yume-accent); color: #fff !important; }
.yume-btn--ghost { background: var(--yume-bg); color: var(--yume-text) !important; border: 1px solid var(--yume-border); }
.yume-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.yume-link-card {
    display: block;
    border: 1px solid var(--yume-border);
    border-radius: 10px;
    padding: 15px;
    font-weight: 800;
    text-decoration: none !important;
    color: var(--yume-navy) !important;
    background: var(--yume-bg);
    transition: transform .15s ease, box-shadow .15s ease;
}
.yume-link-card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(23, 42, 62, .08); }

.yume-kpi {
    background: var(--yume-navy);
    color: #fff;
    border-radius: 12px;
    padding: 18px;
}
.yume-kpi span { display: block; font-size: .82rem; opacity: .82; margin-bottom: 4px; }
.yume-kpi strong { display: block; font-size: clamp(1.25rem, 3vw, 1.7rem); }

.yume-muted { color: var(--yume-muted); }
.yume-small { font-size: .82rem; }
.yume-divider { border: 0; border-top: 1px solid var(--yume-border); margin: 20px 0; }

.yume-table-wrap { overflow-x: auto; border: 1px solid var(--yume-border); border-radius: 12px; }
.yume-table { width: 100%; border-collapse: collapse; margin: 0; background: #fff; }
.yume-table th, .yume-table td { padding: 12px 14px; border-bottom: 1px solid var(--yume-border); text-align: left; }
.yume-table th { background: var(--yume-bg); color: var(--yume-navy); font-weight: 800; }
.yume-table tr:last-child td { border-bottom: 0; }

.yume-badge {
    display: inline-block;
    background: var(--yume-navy);
    color: #fff;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .04em;
}
.yume-badge--accent { background: var(--yume-accent); }

.yume-callout {
    background: var(--yume-bg);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--yume-border);
}
.yume-callout h2, .yume-callout h3, .yume-callout h4 { margin-top: 0; }
.yume-callout > :last-child { margin-bottom: 0; }

@media (max-width: 760px) {
    .yume-panel, .yume-card-group, .yume-hero { padding: 18px; }
    .yume-grid--2, .yume-grid--3, .yume-grid--4 { grid-template-columns: 1fr; }
    .yume-actions .yume-btn { width: 100%; }
}


/* v1.1.2: SWELL / Gutenberg standard block compatibility.
 * These selectors intentionally add a little specificity so theme defaults do not
 * erase the reusable component styling when classes are assigned via
 * Advanced > Additional CSS class(es).
 */
body .yume-notice {
    border: 1px solid var(--yume-notice-border, #e4d7bf);
    border-left: 5px solid var(--yume-notice-accent, var(--yume-accent));
    background: var(--yume-notice-bg, #fffaf1);
    padding: 14px 16px;
    border-radius: 10px;
    margin: 0 0 18px;
    box-sizing: border-box;
}
body .yume-panel,
body .yume-card-group,
body .yume-card,
body .yume-subpanel,
body .yume-callout,
body .yume-hero,
body .yume-kpi { box-sizing: border-box; }

/* SWELL content-area specificity helpers */
.post_content .yume-notice,
.entry-content .yume-notice {
    background: var(--yume-notice-bg, #fffaf1);
    border-color: var(--yume-notice-border, #e4d7bf);
    border-left-color: var(--yume-notice-accent, var(--yume-accent));
    padding: 14px 16px;
}
.post_content .yume-panel,
.entry-content .yume-panel {
    background: #fff;
    border: 1px solid var(--yume-border);
    border-radius: var(--yume-radius);
    padding: 24px;
    box-shadow: 0 8px 28px rgba(23, 42, 62, .06);
}


/* =========================================================
 * v1.1.3 Rounded-corner utilities
 * Add one class in Advanced > Additional CSS class(es).
 * Default: yume-rounded (14px)
 * Variants: yume-rounded--sm / --md / --lg / --xl / --pill
 * ========================================================= */
.yume-rounded { --yume-round-size: var(--yume-radius); }
.yume-rounded--sm { --yume-round-size: var(--yume-radius-sm); }
.yume-rounded--md { --yume-round-size: var(--yume-radius-md); }
.yume-rounded--lg { --yume-round-size: var(--yume-radius-lg); }
.yume-rounded--xl { --yume-round-size: var(--yume-radius-xl); }
.yume-rounded--pill { --yume-round-size: 999px; }

/* Standard WordPress/SWELL blocks */
body .yume-rounded,
body .yume-rounded--sm,
body .yume-rounded--md,
body .yume-rounded--lg,
body .yume-rounded--xl,
body .yume-rounded--pill {
    border-radius: var(--yume-round-size, var(--yume-radius)) !important;
}

/* Optional clipping for blocks with child background colors/images. */
body .yume-rounded-clip {
    overflow: hidden !important;
}

/* SWELL accordion:
 * Do not clip the whole <details> element. SWELL's border/background structure
 * can lose the visible lower-left/lower-right corners when overflow:hidden is
 * applied to the item. Instead, round the item, title and body separately.
 */
.swell-block-accordion.yume-rounded .swell-block-accordion__item,
.swell-block-accordion.yume-rounded--sm .swell-block-accordion__item,
.swell-block-accordion.yume-rounded--md .swell-block-accordion__item,
.swell-block-accordion.yume-rounded--lg .swell-block-accordion__item,
.swell-block-accordion.yume-rounded--xl .swell-block-accordion__item {
    border-radius: var(--yume-round-size, var(--yume-radius)) !important;
    overflow: visible !important;
}

.swell-block-accordion.yume-rounded .swell-block-accordion__title,
.swell-block-accordion.yume-rounded--sm .swell-block-accordion__title,
.swell-block-accordion.yume-rounded--md .swell-block-accordion__title,
.swell-block-accordion.yume-rounded--lg .swell-block-accordion__title,
.swell-block-accordion.yume-rounded--xl .swell-block-accordion__title {
    border-radius: var(--yume-round-size, var(--yume-radius)) var(--yume-round-size, var(--yume-radius)) 0 0 !important;
}

/* Closed accordion: the title is the whole visible box, so round all corners. */
.swell-block-accordion.yume-rounded .swell-block-accordion__item:not([open]) > .swell-block-accordion__title,
.swell-block-accordion.yume-rounded--sm .swell-block-accordion__item:not([open]) > .swell-block-accordion__title,
.swell-block-accordion.yume-rounded--md .swell-block-accordion__item:not([open]) > .swell-block-accordion__title,
.swell-block-accordion.yume-rounded--lg .swell-block-accordion__item:not([open]) > .swell-block-accordion__title,
.swell-block-accordion.yume-rounded--xl .swell-block-accordion__item:not([open]) > .swell-block-accordion__title {
    border-radius: var(--yume-round-size, var(--yume-radius)) !important;
}

/* Open accordion: the body owns the lower two corners. */
.swell-block-accordion.yume-rounded .swell-block-accordion__body,
.swell-block-accordion.yume-rounded--sm .swell-block-accordion__body,
.swell-block-accordion.yume-rounded--md .swell-block-accordion__body,
.swell-block-accordion.yume-rounded--lg .swell-block-accordion__body,
.swell-block-accordion.yume-rounded--xl .swell-block-accordion__body {
    border-radius: 0 0 var(--yume-round-size, var(--yume-radius)) var(--yume-round-size, var(--yume-radius)) !important;
}

/* SWELL caption box:
 * Follow SWELL's own radius model: title owns the top corners and content owns
 * the bottom corners. Avoid blanket overflow:hidden so the bottom border stays visible.
 */
.swell-block-capbox.yume-rounded,
.swell-block-capbox.yume-rounded--sm,
.swell-block-capbox.yume-rounded--md,
.swell-block-capbox.yume-rounded--lg,
.swell-block-capbox.yume-rounded--xl,
.cap_box.yume-rounded,
.cap_box.yume-rounded--sm,
.cap_box.yume-rounded--md,
.cap_box.yume-rounded--lg,
.cap_box.yume-rounded--xl {
    border-radius: var(--yume-round-size, var(--yume-radius)) !important;
    overflow: visible !important;
}

.swell-block-capbox.yume-rounded > .cap_box_ttl,
.swell-block-capbox.yume-rounded--sm > .cap_box_ttl,
.swell-block-capbox.yume-rounded--md > .cap_box_ttl,
.swell-block-capbox.yume-rounded--lg > .cap_box_ttl,
.swell-block-capbox.yume-rounded--xl > .cap_box_ttl,
.cap_box.yume-rounded > .cap_box_ttl,
.cap_box.yume-rounded--sm > .cap_box_ttl,
.cap_box.yume-rounded--md > .cap_box_ttl,
.cap_box.yume-rounded--lg > .cap_box_ttl,
.cap_box.yume-rounded--xl > .cap_box_ttl {
    border-radius: var(--yume-round-size, var(--yume-radius)) var(--yume-round-size, var(--yume-radius)) 0 0 !important;
}

.swell-block-capbox.yume-rounded > .cap_box_content,
.swell-block-capbox.yume-rounded--sm > .cap_box_content,
.swell-block-capbox.yume-rounded--md > .cap_box_content,
.swell-block-capbox.yume-rounded--lg > .cap_box_content,
.swell-block-capbox.yume-rounded--xl > .cap_box_content,
.cap_box.yume-rounded > .cap_box_content,
.cap_box.yume-rounded--sm > .cap_box_content,
.cap_box.yume-rounded--md > .cap_box_content,
.cap_box.yume-rounded--lg > .cap_box_content,
.cap_box.yume-rounded--xl > .cap_box_content {
    border-radius: 0 0 var(--yume-round-size, var(--yume-radius)) var(--yume-round-size, var(--yume-radius)) !important;
}

/* Match SWELL's style-specific corner ownership. */
.cap_box.yume-rounded.is-style-small_ttl > .cap_box_content,
.cap_box.yume-rounded--sm.is-style-small_ttl > .cap_box_content,
.cap_box.yume-rounded--md.is-style-small_ttl > .cap_box_content,
.cap_box.yume-rounded--lg.is-style-small_ttl > .cap_box_content,
.cap_box.yume-rounded--xl.is-style-small_ttl > .cap_box_content {
    border-radius: 0 var(--yume-round-size, var(--yume-radius)) var(--yume-round-size, var(--yume-radius)) var(--yume-round-size, var(--yume-radius)) !important;
}

.cap_box.yume-rounded.is-style-inner > .cap_box_content,
.cap_box.yume-rounded--sm.is-style-inner > .cap_box_content,
.cap_box.yume-rounded--md.is-style-inner > .cap_box_content,
.cap_box.yume-rounded--lg.is-style-inner > .cap_box_content,
.cap_box.yume-rounded--xl.is-style-inner > .cap_box_content,
.cap_box.yume-rounded.is-style-onborder_ttl > .cap_box_content,
.cap_box.yume-rounded--sm.is-style-onborder_ttl > .cap_box_content,
.cap_box.yume-rounded--md.is-style-onborder_ttl > .cap_box_content,
.cap_box.yume-rounded--lg.is-style-onborder_ttl > .cap_box_content,
.cap_box.yume-rounded--xl.is-style-onborder_ttl > .cap_box_content,
.cap_box.yume-rounded.is-style-onborder_ttl2 > .cap_box_content,
.cap_box.yume-rounded--sm.is-style-onborder_ttl2 > .cap_box_content,
.cap_box.yume-rounded--md.is-style-onborder_ttl2 > .cap_box_content,
.cap_box.yume-rounded--lg.is-style-onborder_ttl2 > .cap_box_content,
.cap_box.yume-rounded--xl.is-style-onborder_ttl2 > .cap_box_content {
    border-radius: var(--yume-round-size, var(--yume-radius)) !important;
}

.cap_box.yume-rounded.is-style-onborder_ttl2 > .cap_box_ttl,
.cap_box.yume-rounded--sm.is-style-onborder_ttl2 > .cap_box_ttl,
.cap_box.yume-rounded--md.is-style-onborder_ttl2 > .cap_box_ttl,
.cap_box.yume-rounded--lg.is-style-onborder_ttl2 > .cap_box_ttl,
.cap_box.yume-rounded--xl.is-style-onborder_ttl2 > .cap_box_ttl {
    border-radius: var(--yume-round-size, var(--yume-radius)) !important;
}

/* Shadow style needs clipping for the shadow card itself, matching SWELL's own behavior. */
.cap_box.yume-rounded.is-style-shadow,
.cap_box.yume-rounded--sm.is-style-shadow,
.cap_box.yume-rounded--md.is-style-shadow,
.cap_box.yume-rounded--lg.is-style-shadow,
.cap_box.yume-rounded--xl.is-style-shadow {
    border-radius: var(--yume-round-size, var(--yume-radius)) !important;
    overflow: hidden !important;
}

/* If the Additional CSS class is placed on a wrapping block instead of the capbox. */
.yume-rounded .swell-block-capbox,
.yume-rounded--sm .swell-block-capbox,
.yume-rounded--md .swell-block-capbox,
.yume-rounded--lg .swell-block-capbox,
.yume-rounded--xl .swell-block-capbox {
    border-radius: var(--yume-round-size, var(--yume-radius)) !important;
    overflow: visible !important;
}

.yume-rounded .swell-block-capbox > .cap_box_ttl,
.yume-rounded--sm .swell-block-capbox > .cap_box_ttl,
.yume-rounded--md .swell-block-capbox > .cap_box_ttl,
.yume-rounded--lg .swell-block-capbox > .cap_box_ttl,
.yume-rounded--xl .swell-block-capbox > .cap_box_ttl {
    border-radius: var(--yume-round-size, var(--yume-radius)) var(--yume-round-size, var(--yume-radius)) 0 0 !important;
}

.yume-rounded .swell-block-capbox > .cap_box_content,
.yume-rounded--sm .swell-block-capbox > .cap_box_content,
.yume-rounded--md .swell-block-capbox > .cap_box_content,
.yume-rounded--lg .swell-block-capbox > .cap_box_content,
.yume-rounded--xl .swell-block-capbox > .cap_box_content {
    border-radius: 0 0 var(--yume-round-size, var(--yume-radius)) var(--yume-round-size, var(--yume-radius)) !important;
}



/* =========================================================
 * v1.2.0 Common DWM CTA / WordPress button compatibility
 * ========================================================= */
.yume-dwm-cta {
    background: linear-gradient(135deg, var(--yume-navy), var(--yume-navy-2));
    color: #fff;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--yume-radius-lg);
    padding: clamp(22px, 4vw, 34px);
    box-shadow: 0 12px 34px rgba(20, 43, 68, .16);
    margin: 28px 0;
}
.yume-dwm-cta h2,
.yume-dwm-cta h3,
.yume-dwm-cta h4 {
    color: #fff !important;
    margin-top: 0;
}
.yume-dwm-cta p { color: rgba(255,255,255,.92); }
.yume-dwm-cta > :last-child { margin-bottom: 0; }
.yume-dwm-cta__label,
.yume-dwm-cta__eyebrow { /* legacy alias */
    color: #e4c686 !important;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .10em;
    margin-bottom: 4px !important;
}
.yume-dwm-cta__title {
    color: #fff !important;
    font-size: clamp(1.3rem, 2.8vw, 1.75rem);
    line-height: 1.45;
    margin: 0 0 12px !important;
}
.yume-dwm-cta__text,
.yume-dwm-cta__lead { /* legacy alias */
    font-size: 1.02rem;
    line-height: 1.8;
}
.yume-dwm-cta__sub {
    font-size: .88rem;
    color: rgba(255,255,255,.76) !important;
}
.yume-dwm-cta .wp-block-buttons {
    gap: 10px;
    margin-top: 18px;
}

/* Core Gutenberg Button: Additional CSS class is attached to the wrapper. */
.wp-block-button.yume-btn {
    padding: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.wp-block-button.yume-btn:hover { transform: none; opacity: 1; }
.wp-block-button.yume-btn > .wp-block-button__link,
.yume-btn > a,
a.yume-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding: 12px 18px;
    min-height: 46px;
    font-weight: 800;
    text-decoration: none !important;
    transition: transform .15s ease, opacity .15s ease;
}
.wp-block-button.yume-btn > .wp-block-button__link:hover,
.yume-btn > a:hover,
a.yume-btn:hover {
    transform: translateY(-1px);
    opacity: .94;
}
.wp-block-button.yume-btn--primary > .wp-block-button__link,
.yume-btn--primary > a,
a.yume-btn--primary {
    background: var(--yume-navy) !important;
    color: #fff !important;
}
.wp-block-button.yume-btn--secondary > .wp-block-button__link,
.yume-btn--secondary > a,
a.yume-btn--secondary {
    background: var(--yume-accent) !important;
    color: #fff !important;
}
.wp-block-button.yume-btn--ghost > .wp-block-button__link,
.yume-btn--ghost > a,
a.yume-btn--ghost {
    background: var(--yume-bg) !important;
    color: var(--yume-text) !important;
    border: 1px solid var(--yume-border) !important;
}
.wp-block-button.yume-btn--ghost-light > .wp-block-button__link,
.yume-btn--ghost-light > a,
a.yume-btn--ghost-light {
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.48) !important;
}

@media (max-width: 600px) {
    .yume-dwm-cta .wp-block-buttons { display: grid; grid-template-columns: 1fr; }
    .yume-dwm-cta .wp-block-button,
    .yume-dwm-cta .wp-block-button__link { width: 100%; }
}