/* ==========================================================================
   WMY COMPONENT LIBRARY  —  walzermelcher.com
   Consolidated custom CSS for content components previously pasted as
   per-widget <style> blocks in Elementor HTML widgets.
   Created: 2026-07-06  |  Source audit: HTML Widget Audit 2026-07

   DEPLOYMENT: enqueue site-wide from the Astra child theme (see report,
   Phase 1). Once live, DELETE the local <style> blocks from the HTML
   widgets on:
     - /news/celebrity-lawyer-chris-melcher-analyzes-alec-baldwin-civil-trial/
     - /news/celebrity-lawyer-chris-melcher-michael-jackson-estate-lawsuit-la/
     - /business-owner-divorce/

   RULES FOR FUTURE COMPONENTS (see WMY-Component-Usage-Guide.md):
     1. Every class is prefixed  wmy-  (never generic names: hero, card, grid)
     2. Colors come from the brand variables below (never hard-coded hex)
     3. No <style> blocks inside HTML widgets — add new rules to THIS file
     4. No inline style="" attributes in post content
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BRAND VARIABLES
   Mapped to Elementor Global Colors where they exist (fallback = same value).
   Elementor kit refs: f7e9286=navy, 31ef0c0=grey, dcf97e3=light, accent=white
   -------------------------------------------------------------------------- */
:root {
  --wmy-navy:      var(--e-global-color-f7e9286, #1E2B55);
  --wmy-navy-deep: #0a1430;
  --wmy-maroon:    #5C003E;
  --wmy-maroon-deep: #3a0028;
  --wmy-green:     #006009;
  --wmy-peach:     #FFBC7D;
  --wmy-text:      #3A3A3A;
  --wmy-grey:      var(--e-global-color-31ef0c0, #757575);
  --wmy-light:     var(--e-global-color-dcf97e3, #EBEBEB);
  --wmy-white:     var(--e-global-color-accent, #FFFFFF);
  /* Tokens confirmed against the Sample Page style guide (private page, ID 2) */
  --wmy-btn-green: #67c770;   /* official button text color */
  --wmy-link:      #0534FF;   /* body link blue */
  --wmy-slate:     #7F98A6;   /* decorative slate */
  --wmy-font-head: 'Playfair Display', Georgia, serif;
  --wmy-font-body: 'Montserrat', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. HERO CARD  (.wmy-hero-card)
   Dark navy intro card with eyebrow label, headline, and meta row.
   -------------------------------------------------------------------------- */
.wmy-hero-card{position:relative;background:linear-gradient(135deg,var(--wmy-navy) 0%,var(--wmy-navy-deep) 100%);color:#fff;border-radius:14px;padding:32px 24px;margin:24px auto;max-width:1000px;font-family:var(--wmy-font-body);line-height:1.6;overflow:hidden;box-sizing:border-box}
.wmy-hero-card *{box-sizing:border-box}
.wmy-hero-card::before{content:"";position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(255,188,125,.18) 0%,transparent 70%);pointer-events:none}
.wmy-hero-card .wmy-eyebrow{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--wmy-peach);margin:0 0 8px}
.wmy-hero-card h2{font-family:var(--wmy-font-head);font-size:28px;font-weight:600;line-height:1.25;margin:0 0 12px;color:#fff}
.wmy-hero-card p{font-size:15px;margin:0 0 16px;opacity:.92;color:#fff}
.wmy-hero-card .wmy-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;letter-spacing:.5px;text-transform:uppercase;font-weight:500;opacity:.85;color:#fff}
@media(max-width:600px){
  .wmy-hero-card{padding:24px 18px;border-radius:10px}
  .wmy-hero-card h2{font-size:22px}
  .wmy-hero-card p{font-size:14px}
}

/* --------------------------------------------------------------------------
   3. SNAPSHOT GRID  (.wmy-snapshot > .wmy-snap-card)
   3-up icon cards; collapses to stacked rows on mobile.
   -------------------------------------------------------------------------- */
.wmy-snapshot{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px auto;max-width:1000px;font-family:var(--wmy-font-body);box-sizing:border-box}
.wmy-snapshot *{box-sizing:border-box}
.wmy-snap-card{background:var(--wmy-white);border:1px solid var(--wmy-light);border-top:4px solid var(--wmy-navy);border-radius:10px;padding:18px 14px;text-align:center}
.wmy-snap-card:nth-child(2){border-top-color:var(--wmy-maroon)}
.wmy-snap-card:nth-child(3){border-top-color:var(--wmy-green)}
.wmy-snap-icon{width:42px;height:42px;margin:0 auto 10px}
.wmy-snap-icon--circle{background:var(--wmy-navy);border-radius:50%;display:flex;align-items:center;justify-content:center}
.wmy-snap-icon--circle svg{width:22px;height:22px;stroke:#fff;fill:none}
.wmy-snap-card h4{font-family:var(--wmy-font-head);font-size:15px;font-weight:600;color:var(--wmy-navy);margin:0 0 6px;text-transform:none;line-height:1.3}
.wmy-snap-card p{font-size:12px;line-height:1.45;margin:0;color:var(--wmy-text);font-family:var(--wmy-font-body)}
@media(max-width:600px){
  .wmy-snapshot{grid-template-columns:1fr;gap:10px}
  .wmy-snap-card{display:flex;text-align:left;align-items:center;gap:14px;padding:14px}
  .wmy-snap-icon{margin:0;width:36px;height:36px;flex-shrink:0}
  .wmy-snap-body{flex:1}
  .wmy-snap-card h4{font-size:14px;margin-bottom:2px}
}

/* --------------------------------------------------------------------------
   4. KEY TAKEAWAYS  (.wmy-takeaways > .wmy-take-item)
   Numbered takeaway list on light panel with navy left rule.
   -------------------------------------------------------------------------- */
.wmy-takeaways{background:#FAFAFA;border-left:4px solid var(--wmy-navy);border-radius:8px;padding:24px 22px;margin:28px auto;max-width:1000px;font-family:var(--wmy-font-body);color:var(--wmy-text);line-height:1.6;box-sizing:border-box}
.wmy-takeaways *{box-sizing:border-box}
.wmy-takeaways .wmy-eyebrow{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--wmy-maroon);margin:0 0 8px}
.wmy-takeaways h3{font-family:var(--wmy-font-head);font-size:22px;font-weight:600;color:var(--wmy-navy);margin:0 0 16px;line-height:1.3}
.wmy-take-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--wmy-light)}
.wmy-take-item:last-child{border-bottom:none;padding-bottom:0}
.wmy-take-num{flex-shrink:0;width:34px;height:34px;background:var(--wmy-navy);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--wmy-font-head);font-weight:600;font-size:16px}
.wmy-take-body strong{font-family:var(--wmy-font-head);color:var(--wmy-navy);font-size:16px;display:block;margin-bottom:4px;font-weight:600}
.wmy-take-body span{font-size:14px;color:var(--wmy-text);line-height:1.55;font-family:var(--wmy-font-body)}
@media(max-width:600px){
  .wmy-takeaways{padding:20px 16px}
  .wmy-takeaways h3{font-size:19px}
}

/* --------------------------------------------------------------------------
   5. PULL QUOTE  (.wmy-quote)
   Navy quote card with oversized peach quotation mark and cite line.
   -------------------------------------------------------------------------- */
.wmy-quote{background:var(--wmy-navy);color:#fff;border-radius:12px;padding:32px 26px;margin:32px auto;max-width:1000px;position:relative;font-family:var(--wmy-font-body);line-height:1.6;box-sizing:border-box}
.wmy-quote *{box-sizing:border-box}
.wmy-quote::before{content:"\201C";position:absolute;top:-8px;left:18px;font-family:var(--wmy-font-head);font-size:90px;color:var(--wmy-peach);line-height:1;font-weight:700}
.wmy-quote p{font-family:var(--wmy-font-head);font-size:20px;font-style:italic;line-height:1.45;margin:14px 0 16px;color:#fff;font-weight:500}
.wmy-quote cite{display:block;font-family:var(--wmy-font-body);font-size:12px;font-style:normal;letter-spacing:1.2px;text-transform:uppercase;color:var(--wmy-peach);font-weight:600}
.wmy-quote cite span{display:block;color:#fff;opacity:.75;font-weight:400;letter-spacing:.5px;text-transform:none;font-size:12px;margin-top:4px}
@media(max-width:600px){
  .wmy-quote{padding:28px 20px}
  .wmy-quote p{font-size:17px}
}

/* --------------------------------------------------------------------------
   6. TIMELINE  (.wmy-timeline > .wmy-time-row)
   Vertical dot timeline in a bordered white panel.
   -------------------------------------------------------------------------- */
.wmy-timeline{margin:28px auto;padding:24px 22px;background:var(--wmy-white);border:1px solid var(--wmy-light);border-radius:10px;max-width:1000px;font-family:var(--wmy-font-body);color:var(--wmy-text);line-height:1.6;box-sizing:border-box}
.wmy-timeline *{box-sizing:border-box}
.wmy-timeline .wmy-eyebrow{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--wmy-maroon);margin:0 0 8px}
.wmy-timeline h3{font-family:var(--wmy-font-head);font-size:22px;font-weight:600;color:var(--wmy-navy);margin:0 0 18px;line-height:1.3}
.wmy-time-row{display:flex;gap:14px;align-items:flex-start;padding:10px 0;position:relative}
.wmy-time-dot{flex-shrink:0;width:14px;height:14px;border-radius:50%;background:var(--wmy-navy);margin-top:5px;position:relative;z-index:2}
.wmy-time-row:not(:last-child)::after{content:"";position:absolute;left:6px;top:18px;bottom:-10px;width:2px;background:var(--wmy-light);z-index:1}
.wmy-time-body strong{display:block;font-family:var(--wmy-font-head);color:var(--wmy-navy);font-size:15px;margin-bottom:2px;font-weight:600}
.wmy-time-body span{font-size:13px;color:var(--wmy-text);line-height:1.5;font-family:var(--wmy-font-body)}
@media(max-width:600px){
  .wmy-timeline{padding:20px 16px}
  .wmy-timeline h3{font-size:19px}
}

/* --------------------------------------------------------------------------
   7. CTA CARD  (.wmy-cta)
   Maroon gradient call-to-action with white button.
   -------------------------------------------------------------------------- */
.wmy-cta{background:linear-gradient(135deg,var(--wmy-maroon) 0%,var(--wmy-maroon-deep) 100%);color:#fff;border-radius:12px;padding:30px 26px;margin:32px auto;max-width:1000px;text-align:center;font-family:var(--wmy-font-body);line-height:1.6;box-sizing:border-box}
.wmy-cta *{box-sizing:border-box}
.wmy-cta h3{font-family:var(--wmy-font-head);font-size:24px;font-weight:600;color:#fff;margin:0 0 10px;line-height:1.3}
.wmy-cta p{font-size:14px;margin:0 0 18px;opacity:.92;line-height:1.55;color:#fff}
.wmy-cta a{display:inline-block;background:#fff;color:var(--wmy-maroon);font-family:var(--wmy-font-body);font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;text-decoration:none;padding:14px 32px;border-radius:4px;transition:all .2s}
.wmy-cta a:hover{background:var(--wmy-peach);color:var(--wmy-navy)}
@media(max-width:600px){
  .wmy-cta{padding:26px 20px}
  .wmy-cta h3{font-size:20px}
}

/* --------------------------------------------------------------------------
   8. COMPARISON CHART  (.wmy-chart-wrap / .wmy-chart-table / .wmy-badge)
   Responsive comparison table; converts to stacked cards under 544px.
   Already written against Elementor globals — preserved verbatim, with
   fallbacks added.
   -------------------------------------------------------------------------- */
.wmy-chart-wrap{font-family:var(--wmy-font-body);max-width:100%;margin:20px 0}
.wmy-chart-label{font-family:var(--wmy-font-body);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--wmy-grey);margin:0 0 12px 0}
.wmy-chart-table{width:100%;border-collapse:collapse;border:1px solid var(--wmy-light)}
.wmy-chart-table thead tr{border-bottom:2px solid var(--wmy-navy)}
.wmy-chart-table thead th{padding:20px 24px;text-align:left;background-color:var(--wmy-white)}
.wmy-chart-table thead th:first-child{width:20%;background-color:var(--wmy-light)}
.wmy-chart-col-title{font-family:var(--wmy-font-head);font-size:20px;font-weight:600;color:var(--wmy-navy);display:block;margin-bottom:4px;line-height:1.3em}
.wmy-chart-col-sub{font-family:var(--wmy-font-body);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--wmy-grey)}
.wmy-chart-table tbody tr{border-bottom:1px solid var(--wmy-light)}
.wmy-chart-table tbody tr:last-child{border-bottom:none}
.wmy-chart-table tbody td{padding:18px 24px;vertical-align:top;font-family:var(--wmy-font-body);font-size:15px;font-weight:300;line-height:1.6em;color:var(--wmy-text);background-color:var(--wmy-white)}
.wmy-chart-table tbody tr:nth-child(even) td{background-color:var(--wmy-light)}
.wmy-chart-table tbody td:first-child{font-family:var(--wmy-font-body);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--wmy-grey);background-color:var(--wmy-light);vertical-align:middle}
.wmy-chart-table tbody tr:nth-child(even) td:first-child{background-color:var(--wmy-light)}
.wmy-badge{display:inline-block;font-family:var(--wmy-font-body);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:0 9px;margin-bottom:6px}
.wmy-badge-high{background-color:var(--wmy-navy);color:var(--wmy-white)}
.wmy-badge-low{background-color:var(--wmy-light);color:var(--wmy-grey)}
.wmy-badge-sub{display:block;font-family:var(--wmy-font-body);font-size:15px;font-weight:300;letter-spacing:0;text-transform:none;color:var(--wmy-text);margin-top:6px;line-height:1.6em}
.wmy-chart-note{font-family:var(--wmy-font-body);font-size:13px;font-weight:400;font-style:italic;color:var(--wmy-grey);line-height:1.6em;margin:14px 0 0 0;padding:12px 16px;border-left:3px solid var(--wmy-navy);background-color:var(--wmy-light)}
@media(max-width:544px){
  .wmy-chart-table,.wmy-chart-table thead,.wmy-chart-table tbody,.wmy-chart-table tr,.wmy-chart-table th,.wmy-chart-table td{display:block;width:100%;box-sizing:border-box}
  .wmy-chart-table thead tr{display:none}
  .wmy-chart-table tbody tr{border:1px solid var(--wmy-light);margin-bottom:20px}
  .wmy-chart-table tbody td:first-child{background-color:var(--wmy-navy);color:var(--wmy-white);padding:10px 16px}
  .wmy-chart-table tbody td{padding:12px 16px;border-bottom:1px solid var(--wmy-light)}
  .wmy-chart-table tbody td::before{content:attr(data-col);display:block;font-family:var(--wmy-font-head);font-size:15px;font-weight:600;font-style:italic;color:var(--wmy-navy);margin-bottom:6px;line-height:1.3em}
}

/* --------------------------------------------------------------------------
   8b. CARD LIST  (ul.wmy-card-list)
   Bordered card per list item; H3 title (site default type) + paragraph.
   Replaces the inline-styled card lists formerly pasted into articles.
   -------------------------------------------------------------------------- */
ul.wmy-card-list{list-style:none;padding:0;margin:30px 0}
ul.wmy-card-list>li{list-style:none;border:1px solid var(--wmy-light);border-radius:12px;padding:18px 20px;margin-bottom:15px;background:#FAFAFA}
ul.wmy-card-list>li:last-child{margin-bottom:0}
ul.wmy-card-list>li>h3{margin-top:0}
ul.wmy-card-list>li>p:last-child{margin-bottom:0}

/* ==========================================================================
   9. PODCAST / EPISODE COMPONENTS
   Promoted from the one-off wm1-wm6 classes (Michael Jackson estate
   article) into named, reusable wmy-* components. 520px content width.
   ========================================================================== */

/* 9a. EPISODE CARD (.wmy-episode-card) — podcast episode intro w/ guest row */
.wmy-episode-card *{box-sizing:border-box;margin:0;padding:0}
.wmy-episode-card{max-width:520px;margin:1.5rem auto}
.wmy-ep-tag{display:inline-block;font-family:var(--wmy-font-body);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:20px}
.wmy-ep-tag--radio{background:#c8cfde;color:var(--wmy-navy)}
.wmy-ep-tag--break{background:#d9c0ce;color:var(--wmy-maroon)}
.wmy-ep-hero{background:var(--wmy-white);border:1px solid #c8c8c8;border-top:4px solid var(--wmy-navy);border-radius:4px;padding:1.5rem}
.wmy-ep-eyebrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.wmy-ep-title{font-family:var(--wmy-font-head);font-size:22px;font-weight:600;line-height:1.3;color:var(--wmy-navy);margin-bottom:10px}
.wmy-ep-meta{font-family:var(--wmy-font-body);font-size:12px;font-weight:500;color:var(--wmy-text);display:flex;align-items:center;gap:8px;margin-bottom:16px}
.wmy-ep-dot{width:3px;height:3px;border-radius:50%;background:var(--wmy-text);display:inline-block}
.wmy-ep-guest{display:flex;align-items:center;gap:14px;background:#e8e8e8;border-radius:4px;padding:12px 16px}
.wmy-ep-avatar{width:44px;height:44px;border-radius:50%;background:var(--wmy-navy);display:flex;align-items:center;justify-content:center;font-family:var(--wmy-font-body);font-size:13px;font-weight:600;color:#fff;flex-shrink:0}
.wmy-ep-guest-name{font-family:var(--wmy-font-body);font-size:14px;font-weight:600;color:var(--wmy-navy);line-height:1.3}
.wmy-ep-guest-cred{font-family:var(--wmy-font-body);font-size:11px;font-weight:500;color:var(--wmy-text);margin-top:3px;line-height:1.3}

/* 9b. QUOTE PANEL (.wmy-quote-panel) — light quote box; color via modifier */
.wmy-quote-panel *{box-sizing:border-box;margin:0;padding:0}
.wmy-quote-panel{max-width:520px;margin:1.5rem auto}
.wmy-qp-box{background:#e8e8e8;border-radius:4px;padding:2em 15px;box-shadow:10px 10px 20px -9px rgba(0,0,0,.2)}
.wmy-qp-text{font-family:var(--wmy-font-body);font-size:18px;font-weight:400;font-style:italic;color:var(--wmy-navy);line-height:1.3;letter-spacing:.8px;margin-bottom:12px}
.wmy-quote-panel--green .wmy-qp-text{color:var(--wmy-green)}
.wmy-quote-panel--maroon .wmy-qp-text{color:var(--wmy-maroon)}
.wmy-qp-attr{font-family:var(--wmy-font-body);font-size:12px;font-weight:500;color:var(--wmy-text)}

/* 9c. TOPIC GRID (.wmy-topic-grid) — 2-col tagged topic cards */
.wmy-topic-grid *{box-sizing:border-box;margin:0;padding:0}
.wmy-topic-grid{max-width:520px;margin:1.5rem auto}
.wmy-topic-label{font-family:var(--wmy-font-body);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--wmy-text);margin-bottom:12px}
.wmy-topic-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wmy-topic-card{background:var(--wmy-white);border:1px solid #c8c8c8;border-radius:4px;padding:16px 14px;display:flex;flex-direction:column;gap:8px}
.wmy-topic-card--blue{border-top:3px solid var(--wmy-navy)}
.wmy-topic-card--maroon{border-top:3px solid var(--wmy-maroon)}
.wmy-topic-card--green{border-top:3px solid var(--wmy-green)}
.wmy-topic-card--grey{border-top:3px solid var(--wmy-text)}
.wmy-topic-tag{display:inline-block;font-family:var(--wmy-font-body);font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border-radius:20px;align-self:flex-start}
.wmy-topic-tag--blue{background:#c8cfde;color:var(--wmy-navy)}
.wmy-topic-tag--maroon{background:#d9c0ce;color:var(--wmy-maroon)}
.wmy-topic-tag--green{background:#b3cfb3;color:#003d05}
.wmy-topic-tag--grey{background:#c8c8c8;color:#1a1a1a}
.wmy-topic-headline{font-family:var(--wmy-font-body);font-size:13px;font-weight:600;color:var(--wmy-navy);line-height:1.3}
.wmy-topic-body{font-family:var(--wmy-font-body);font-size:12px;font-weight:400;color:var(--wmy-text);line-height:1.5}
@media(max-width:400px){.wmy-topic-cards{grid-template-columns:1fr}}

/* 9d. STATS (.wmy-stats) — 3-up numeric stat tiles */
.wmy-stats *{box-sizing:border-box;margin:0;padding:0}
.wmy-stats{max-width:520px;margin:1.5rem auto}
.wmy-stats-label{font-family:var(--wmy-font-body);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--wmy-text);margin-bottom:12px}
.wmy-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wmy-stat{background:#e8e8e8;border:1px solid #c8c8c8;border-radius:4px;padding:16px 8px;text-align:center}
.wmy-stat-num{font-family:var(--wmy-font-head);font-size:26px;font-weight:600;color:var(--wmy-navy);display:block;line-height:1.2}
.wmy-stat-lbl{font-family:var(--wmy-font-body);font-size:11px;font-weight:500;color:var(--wmy-text);line-height:1.5;display:block;margin-top:6px}

/* 9e. FOLLOW CTA (.wmy-follow-cta) — navy bar w/ handle + outline button */
.wmy-follow-cta *{box-sizing:border-box;margin:0;padding:0}
.wmy-follow-cta{max-width:520px;margin:1.5rem auto}
.wmy-follow-box{background:var(--wmy-navy);border-radius:4px;padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:14px}
.wmy-follow-handle{font-family:var(--wmy-font-body);font-size:14px;font-weight:600;color:#fff}
.wmy-follow-sub{font-family:var(--wmy-font-body);font-size:11px;font-weight:400;color:rgba(255,255,255,.85);margin-top:3px}
.wmy-follow-cta .wmy-follow-btn{background:transparent;border:1px solid var(--wmy-btn-green);border-radius:4px;padding:9px 18px;font-family:var(--wmy-font-body);font-size:12px;font-weight:500;color:var(--wmy-btn-green);text-decoration:none;white-space:nowrap;display:inline-block}
.wmy-follow-cta .wmy-follow-btn:hover{background:rgba(103,199,112,.15)}