/*
Theme Name: CrossPlayWire (Astra Child)
Theme URI: https://crossplaywire.com
Description: Astra child theme implementing the CrossPlayWire neon/dark editorial design. Content areas (page body) are built in Elementor; this stylesheet supplies the shared design system — colors, type, buttons, cards — so every new page automatically matches.
Author: 
Template: astra
Version: 1.0.0
Text Domain: cpw-astra-child
*/

/* =========================================================
   0b. FIX: Elementor widget wrappers default to a fixed ~1140px
   "boxed" width even inside a full-width flex container, which
   left-anchors every .cpw-section/.cpw-hero instead of letting
   them center. Force widgets to fill their real container.
   ========================================================= */
.e-con > .elementor-widget,
.e-con > .elementor-element{
  width:100% !important;
  max-width:100% !important;
}

/* =========================================================
   0c. SINGLE POST CLEANUP — Astra's automatic entry-header
   (duplicate byline) and post navigation are replaced by our
   own in-content byline and are hidden here.
   ========================================================= */
.entry-header,
nav.post-navigation{ display:none !important; }
.cpw-post-byline{
  color: var(--cpw-muted); font-size:13px; margin: 0 0 18px; text-transform:none; letter-spacing:0;
}
.cpw-post-byline a{ color: var(--cpw-cyan); }

/* =========================================================
   1. DESIGN TOKENS
   Copy these hex values into Elementor → Site Settings →
   Global Colors / Global Fonts so widgets you drag in can
   pick them from the color/font pickers directly.
   ========================================================= */
:root{
  --cpw-magenta:      #ff2e7a;
  --cpw-cyan:          #00e5ff;
  --cpw-yellow:        #f4e400;
  --cpw-bg:            #0a0a0f;
  --cpw-card:          #1a0f2e;
  --cpw-text:          #f2f0f5;
  --cpw-muted:         #9a94a6;
  --cpw-border:        rgba(255,255,255,0.08);
  --cpw-border-strong: rgba(255,255,255,0.15);

  --cpw-font-display:  'Anton', sans-serif;
  --cpw-font-body:     'Inter', sans-serif;

  /* Short-name aliases: several tool-page widgets were built against
     these unprefixed variable names (var(--bg), var(--ink), etc). They
     were never defined, so those pages fell back to browser/Elementor
     default text color (near-black on our dark bg = unreadable).
     Aliasing them here fixes every affected page in one place. */
  --bg: var(--cpw-bg);
  --ink: var(--cpw-text);
  --text: var(--cpw-text);
  --muted: var(--cpw-muted);
  --card: var(--cpw-card);
  --border: var(--cpw-border);
  --border-strong: var(--cpw-border-strong);
  --magenta: var(--cpw-magenta);
  --cyan: var(--cpw-cyan);
  --yellow: var(--cpw-yellow);
}
.e-con > .elementor-widget,
.e-con > .elementor-element{
  width:100% !important;
  max-width:100% !important;
}

/* Baseline legible text for any page content that isn't explicitly
   color-styled (older tool pages built with plain <p>/<label>/<span>,
   which were inheriting a dark Elementor/Astra default instead of the
   site's white body color). Inline styles and classed components
   still win over this, so nothing already-correct is affected. */
.entry-content, .entry-content p, .entry-content label, .entry-content span,
.entry-content li, .entry-content div, .entry-content h1, .entry-content h2,
.entry-content h3, .entry-content h4, .entry-content td, .entry-content th{
  color: var(--cpw-text);
}

/* Search toggle removed from the header per site owner request. */
.cpw-search-toggle{ display:none !important; }

/* =========================================================
   2. BASE / RESET
   ========================================================= */
body{
  background: var(--cpw-bg) !important;
  color: var(--cpw-text);
  font-family: var(--cpw-font-body);
}
a{ color: var(--cpw-magenta); text-decoration: none; }
a:hover{ color: var(--cpw-cyan); }
::selection{ background: var(--cpw-magenta); color: var(--cpw-bg); }
h1,h2,h3,h4,.cpw-display{
  font-family: var(--cpw-font-display);
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: 0.3px;
}

/* Neutralise Astra's boxed container so Elementor content runs
   edge-to-edge on the dark background. Pair this with setting
   each page's Astra "Content Layout" to "Page Builder" (Full
   width, no padding) in the page's Astra sidebar settings — see
   README. This CSS is a safety net in case that setting is missed. */
.ast-container,
.site-content,
#primary,
#content,
.entry-content,
.ast-page-builder-template .site-content{
  background: transparent !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.ast-separate-container #primary,
.ast-separate-container .ast-article-single{
  background: transparent !important;
  border: none !important;
}

/* =========================================================
   3. LAYOUT SHELL
   ========================================================= */
.cpw-site-root{
  background: var(--cpw-bg);
  color: var(--cpw-text);
  min-height: 100vh;
  overflow-x: hidden;
}
.cpw-main{ display:block; }
.cpw-wrap{
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(16px,4vw,32px);
}

/* =========================================================
   4. HEADER
   ========================================================= */
.cpw-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,10,15,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,46,122,0.25);
}
.cpw-header-inner{
  max-width: 1360px;
  margin: 0 auto;
  padding: 16px clamp(16px,4vw,32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cpw-logo{
  font-family: var(--cpw-font-display);
  font-size: clamp(20px,2.6vw,28px);
  letter-spacing: 0.5px;
  color: var(--cpw-text);
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.cpw-logo img{ max-height: 40px; width: auto; }
.cpw-logo-1{ color: var(--cpw-magenta); }
.cpw-logo-2{ color: var(--cpw-cyan); }
.cpw-logo-3{ color: var(--cpw-text); }

.cpw-nav-list{ display:flex; gap:28px; align-items:center; list-style:none; margin:0; padding:0; }
.cpw-nav-list li{ margin:0; }
.cpw-nav-list a{
  font-size: 14px; font-weight: 600; color: var(--cpw-text);
  text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap;
}
.cpw-nav-list a:hover,
.cpw-nav-list .current-menu-item > a{ color: var(--cpw-cyan); }

.cpw-header-actions{ display:flex; align-items:center; gap:16px; }
.cpw-search-toggle{
  background:none; border:1px solid rgba(242,240,245,0.25); width:38px; height:38px;
  border-radius:50%; color: var(--cpw-text); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.cpw-search-toggle:hover{ border-color: var(--cpw-cyan); color: var(--cpw-cyan); }
.cpw-search-icon{ width:14px; height:14px; border:2px solid currentColor; border-radius:50%; position:relative; display:inline-block; }
.cpw-search-icon::after{ content:""; position:absolute; width:2px; height:8px; background:currentColor; bottom:-7px; right:-2px; transform:rotate(45deg); }

.cpw-hamburger{
  display:none; background:none; border:1px solid rgba(242,240,245,0.25); width:38px; height:38px;
  border-radius:4px; color: var(--cpw-text); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:3px;
}
.cpw-hamburger span{ width:18px; height:2px; background:currentColor; display:block; }

.cpw-mobile-nav{
  display:none; flex-direction:column; padding:8px clamp(16px,4vw,32px) 20px; gap:4px;
  border-top:1px solid rgba(255,46,122,0.15);
}
.cpw-mobile-nav.is-open{ display:flex; }
.cpw-mobile-nav-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.cpw-mobile-nav-list a{
  display:block; padding:12px 4px; font-size:15px; font-weight:600; color: var(--cpw-text);
  text-transform:uppercase; letter-spacing:0.4px; border-bottom:1px solid rgba(255,255,255,0.06);
}

@media (max-width: 900px){
  .cpw-nav{ display:none; }
  .cpw-hamburger{ display:flex; }
}

/* =========================================================
   5. BUTTONS  (apply via Elementor → Advanced → CSS Classes)
   ========================================================= */
.cpw-btn-primary,
.cpw-btn-secondary{
  display:inline-block; font-weight:800; font-size:15px; letter-spacing:0.3px;
  text-transform:uppercase; padding:15px 28px; cursor:pointer; border:none;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
}
.cpw-btn-primary{ background: var(--cpw-magenta); color: var(--cpw-bg); }
.cpw-btn-primary:hover{ background: var(--cpw-cyan); color: var(--cpw-bg); }
.cpw-btn-secondary{
  background: transparent; border:2px solid var(--cpw-cyan); color: var(--cpw-cyan); padding:13px 26px;
}
.cpw-btn-secondary:hover{ background: rgba(0,229,255,0.1); }

/* =========================================================
   6. BADGES / PILLS / EYEBROWS
   ========================================================= */
.cpw-eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:1.5px;
  color: var(--cpw-yellow); background: rgba(244,228,0,0.1); border:1px solid rgba(244,228,0,0.4);
  padding:5px 12px; text-transform:uppercase; white-space:nowrap;
  clip-path: polygon(8px 0,100% 0,100% 100%,0 100%,0 8px);
}
.cpw-badge{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:1px;
  padding:4px 10px; text-transform:uppercase; border:1px solid currentColor;
}
.cpw-badge--magenta{ color: var(--cpw-magenta); background: rgba(255,46,122,0.1); }
.cpw-badge--cyan{ color: var(--cpw-cyan); background: rgba(0,229,255,0.1); }
.cpw-badge--yellow{ color: var(--cpw-yellow); background: rgba(244,228,0,0.1); }

/* =========================================================
   7. CARDS
   ========================================================= */
.cpw-card{
  background: var(--cpw-card);
  border: 1px solid var(--cpw-border);
  overflow: hidden;
}
.cpw-card-clip{
  clip-path: polygon(0 0,100% 0,100% 100%,16px 100%,0 calc(100% - 16px));
}
.cpw-card-body{ padding: 20px; }
.cpw-card-media{
  aspect-ratio: 16/9;
  border-bottom: 2px solid var(--cpw-cyan);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 10px, rgba(255,255,255,0.01) 10px, rgba(255,255,255,0.01) 20px);
  display:flex; align-items:center; justify-content:center;
}
.cpw-card-media span{
  font-family: monospace; font-size:11px; letter-spacing:2px; color: var(--cpw-muted);
  border:1px solid var(--cpw-muted); padding:4px 10px;
}
.cpw-card h3{ font-size:19px; margin:0 0 10px; }
.cpw-card p{ color: var(--cpw-muted); font-size:14px; line-height:1.55; margin:0 0 14px; }
.cpw-card-meta{ font-size:12px; color: var(--cpw-muted); }

.cpw-pillar-tile{
  background: var(--cpw-card); border:1px solid var(--cpw-border); padding:28px 22px;
  display:flex; flex-direction:column; gap:14px;
}
.cpw-pillar-icon{
  width:44px; height:44px; transform:rotate(45deg); border:1.5px solid var(--cpw-cyan);
  background: rgba(0,229,255,0.1); display:flex; align-items:center; justify-content:center;
}
.cpw-pillar-icon span{ transform:rotate(-45deg); font-family: var(--cpw-font-display); color: var(--cpw-cyan); font-size:16px; }

.cpw-tool-card{
  background: var(--cpw-card); border:1.5px solid var(--cpw-cyan); box-shadow: 0 0 24px rgba(0,229,255,0.08);
  padding:26px 22px; display:flex; flex-direction:column; gap:14px;
}
.cpw-tool-icon{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--cpw-cyan); background: rgba(0,229,255,0.08);
  display:flex; align-items:center; justify-content:center; font-family: var(--cpw-font-display); color: var(--cpw-cyan); font-size:16px;
}

/* =========================================================
   8. GRIDS / SECTIONS
   ========================================================= */
.cpw-section{ max-width:1360px; margin:0 auto; padding: clamp(40px,6vw,72px) clamp(16px,4vw,32px); }
.cpw-section-title{
  font-size: clamp(26px,3.4vw,38px); margin:0 0 28px; padding-left:16px; border-left:4px solid var(--cpw-magenta);
}
.cpw-section-title--cyan{ border-left-color: var(--cpw-cyan); }
.cpw-section-title--yellow{ border-left-color: var(--cpw-yellow); }

.cpw-grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.cpw-grid-4{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.cpw-grid-6{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }

/* =========================================================
   9. HERO / COUNTDOWN
   ========================================================= */
.cpw-hero{
  position:relative; padding: clamp(48px,8vw,96px) clamp(16px,4vw,32px) clamp(40px,6vw,72px);
  background:
    radial-gradient(ellipse at top left, rgba(255,46,122,0.16), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(0,229,255,0.14), transparent 55%),
    var(--cpw-bg);
  overflow:hidden;
}
.cpw-hero h1{ font-size: clamp(38px,7vw,84px); margin:0 0 20px; }
.cpw-hero h1 em{ font-style:normal; color: var(--cpw-magenta); }
.cpw-hero p{ font-size: clamp(16px,2vw,19px); line-height:1.6; color: var(--cpw-muted); max-width:560px; margin:0 0 32px; }

.cpw-countdown{
  background: linear-gradient(120deg, rgba(255,46,122,0.18), rgba(0,229,255,0.14));
  border: 1px solid rgba(255,46,122,0.35);
  padding: 24px clamp(16px,3vw,32px);
  clip-path: polygon(0 0,100% 0,100% 100%,20px 100%,0 calc(100% - 20px));
  display:flex; flex-wrap:wrap; align-items:center; gap: clamp(16px,3vw,32px);
}
.cpw-countdown-label{ font-family: var(--cpw-font-display); font-size:14px; letter-spacing:1.5px; text-transform:uppercase; }
.cpw-countdown-blocks{ display:flex; gap: clamp(10px,2vw,20px); flex-wrap:wrap; }
.cpw-countdown-block{ text-align:center; min-width:64px; }
.cpw-countdown-value{ font-family: var(--cpw-font-display); font-size: clamp(28px,4vw,40px); line-height:1; }
.cpw-countdown-unit{ font-size:11px; letter-spacing:1px; color: var(--cpw-muted); text-transform:uppercase; margin-top:4px; }

/* =========================================================
   10. AD SLOTS (placeholders)
   ========================================================= */
.cpw-ad-slot{
  border:2px dashed rgba(154,148,166,0.4); background: rgba(255,255,255,0.02);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.cpw-ad-slot span{ font-size:11px; letter-spacing:1.5px; color: var(--cpw-muted); text-transform:uppercase; font-family:monospace; }
.cpw-ad-slot--leaderboard{ max-width:728px; width:100%; height: clamp(100px,18vw,90px); margin:24px auto; }
.cpw-ad-slot--sky{ width:100%; max-width:300px; height:400px; }
.cpw-ad-slot--mrec{ width:100%; max-width:300px; height:250px; }
.cpw-ad-slot--infeed{ min-height:280px; }

/* =========================================================
   11. AFFILIATE / IN-CONTENT BLOCKS
   ========================================================= */
.cpw-affiliate-pick{
  border:2px solid var(--cpw-magenta); background: rgba(255,46,122,0.06); padding:24px; margin:28px 0;
  display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between;
}
.cpw-affiliate-pick h4{ font-size:19px; margin:0 0 6px; }
.cpw-affiliate-pick p{ color: var(--cpw-muted); font-size:14px; margin:0 0 10px; max-width:400px; }
.cpw-affiliate-price{ font-size:15px; font-weight:700; color: var(--cpw-text); }

/* =========================================================
   12. EMAIL CAPTURE
   ========================================================= */
.cpw-email-capture{
  max-width:1360px; margin:0 auto; padding: clamp(32px,5vw,56px) clamp(24px,4vw,48px);
  background: linear-gradient(120deg, rgba(255,46,122,0.12), rgba(0,229,255,0.1));
  border:1px solid var(--cpw-border); text-align:center;
}
.cpw-email-capture h2{ font-size: clamp(22px,3vw,32px); margin:0 0 10px; }
.cpw-email-capture p{ color: var(--cpw-muted); font-size:15px; margin:0 0 24px; }
.cpw-email-form{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:480px; margin:0 auto; }
.cpw-email-form input[type="email"]{
  flex:1; min-width:220px; padding:14px 16px; background: var(--cpw-bg); border:1px solid var(--cpw-border-strong);
  color: var(--cpw-text); font-size:14px;
}
.cpw-email-form button{
  background: var(--cpw-magenta); color: var(--cpw-bg); font-weight:800; font-size:14px; letter-spacing:0.3px;
  text-transform:uppercase; padding:14px 26px; border:none; cursor:pointer;
}
.cpw-email-note{ font-size:12px; color: var(--cpw-muted); margin:14px 0 0; }

/* =========================================================
   13. BREADCRUMB / PAGE TITLE / FILTER BAR
   ========================================================= */
.cpw-breadcrumb{ font-size:13px; color: var(--cpw-muted); margin-bottom:16px; }
.cpw-breadcrumb a{ color: var(--cpw-muted); }
.cpw-breadcrumb .current{ color: var(--cpw-text); }
.cpw-page-title{ font-size: clamp(32px,5vw,52px); margin:0 0 28px; }

.cpw-filter-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:20px; border-bottom:1px solid var(--cpw-border); margin-bottom:32px;
}
.cpw-chip{
  background:transparent; color: var(--cpw-muted); border:1px solid var(--cpw-border-strong); border-radius:999px;
  padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer;
}
.cpw-chip.is-active{ background: rgba(255,46,122,0.15); color: var(--cpw-magenta); border-color: var(--cpw-magenta); }

/* =========================================================
   14. PAGINATION
   ========================================================= */
.cpw-pagination{ display:flex; gap:8px; justify-content:center; margin-top:40px; }
.cpw-pagination a,
.cpw-pagination span{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:transparent; color: var(--cpw-text); border:1px solid var(--cpw-border-strong); font-weight:700;
}
.cpw-pagination .current{ background: var(--cpw-magenta); color: var(--cpw-bg); border-color: var(--cpw-magenta); }

/* =========================================================
   15. SINGLE POST / TOC / SIDEBAR WIDGETS
   ========================================================= */
.cpw-post-header .cpw-page-title{ line-height:1.02; margin:0 0 16px; }
.cpw-post-meta{ display:flex; align-items:center; gap:10px; font-size:13.5px; color: var(--cpw-muted); margin-bottom:24px; }
.cpw-post-avatar{ width:28px; height:28px; border-radius:50%; background: linear-gradient(135deg, var(--cpw-magenta), var(--cpw-cyan)); display:inline-block; }
.cpw-post-feature-img{
  aspect-ratio: 21/9; border:2px solid var(--cpw-magenta);
  background: repeating-linear-gradient(135deg, rgba(255,46,122,0.06), rgba(255,46,122,0.06) 12px, rgba(255,46,122,0.02) 12px, rgba(255,46,122,0.02) 24px);
  display:flex; align-items:center; justify-content:center;
}

.cpw-post-body{ font-size:16.5px; line-height:1.75; color: var(--cpw-text); }
.cpw-post-body h2{ font-size:26px; margin:36px 0 16px; }
.cpw-post-body h3{ font-size:20px; margin:24px 0 12px; }
.cpw-post-body p{ margin:0 0 20px; }
.cpw-post-body blockquote{
  border-left:3px solid var(--cpw-magenta); margin:32px 0; padding:4px 0 4px 24px; font-size:20px; font-style:italic;
}

.cpw-toc{ background: var(--cpw-card); border:1px solid var(--cpw-border); padding:20px; }
.cpw-toc-toggle{ width:100%; background:none; border:none; display:flex; align-items:center; justify-content:space-between; cursor:pointer; padding:0; }
.cpw-toc-toggle h3{ font-size:15px; margin:0; color: var(--cpw-text); }
.cpw-toc-toggle .cpw-toc-icon{ color: var(--cpw-cyan); font-size:18px; }
.cpw-toc-list{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.cpw-toc-list a{ font-size:13px; color: var(--cpw-muted); }

.cpw-popular-list .cpw-popular-item{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.cpw-popular-rank{ font-family: var(--cpw-font-display); color: var(--cpw-cyan); font-size:18px; min-width:24px; }

.cpw-comments h2{ font-size:22px; margin:0 0 20px; }
.cpw-comment{ display:flex; gap:14px; padding:20px; background: var(--cpw-card); border:1px solid var(--cpw-border); }
.cpw-comment-avatar{ width:40px; height:40px; border-radius:50%; background: linear-gradient(135deg, var(--cpw-cyan), var(--cpw-magenta)); flex-shrink:0; }
.cpw-comment-name{ font-weight:700; font-size:14px; }
.cpw-comment-date{ font-size:12px; color: var(--cpw-muted); }
.cpw-comment p{ margin:0; font-size:14.5px; line-height:1.6; }

/* =========================================================
   16. FOOTER
   ========================================================= */
.cpw-footer{ border-top:1px solid var(--cpw-border); background: var(--cpw-card); }
.cpw-footer-grid{
  max-width:1360px; margin:0 auto; padding:56px clamp(16px,4vw,32px) 32px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:32px;
}
.cpw-footer-tagline{ color: var(--cpw-muted); font-size:13px; line-height:1.6; max-width:220px; }
.cpw-footer-heading{ font-size:13px; letter-spacing:1px; text-transform:uppercase; color: var(--cpw-text); margin:0 0 16px; }
.cpw-footer-widget ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.cpw-footer-widget a{ font-size:13.5px; color: var(--cpw-muted); }
.cpw-footer-bottom{
  max-width:1360px; margin:0 auto; padding:20px clamp(16px,4vw,32px) 32px; border-top:1px solid rgba(255,255,255,0.06);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:12px; color: var(--cpw-muted);
}
.cpw-footer-bottom p{ margin:0; }
.cpw-social-links{ display:flex; gap:10px; margin-top:16px; }
.cpw-social-links a{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--cpw-border-strong);
  display:flex; align-items:center; justify-content:center; color: var(--cpw-text); font-size:12px; font-weight:700;
}

/* =========================================================
   17a. TOOL WIDGET FORM CONTROLS — force readable text on dark bg,
   overriding any inherited/UA default that renders labels dark.
   ========================================================= */
.cpw-tool-page-wrap label,
.cpw-tool-page-wrap p,
.cpw-tool-page-wrap h1, .cpw-tool-page-wrap h2, .cpw-tool-page-wrap h3,
.cpw-widget label{
  color: var(--cpw-text) !important;
}
.cpw-tool-page-wrap select,
.cpw-tool-page-wrap input,
.cpw-widget select,
.cpw-widget input{
  color: var(--cpw-text) !important;
  background: var(--cpw-bg) !important;
  border-color: var(--cpw-border-strong) !important;
}
.cpw-tool-page-wrap select option{ color:#000; }

/* =========================================================
   17b. NAV DROPDOWNS (desktop hover/focus, mobile tap toggle)
   ========================================================= */
.cpw-nav-list li{ position:relative; }
.cpw-nav-list .sub-menu{
  list-style:none; margin:0; padding:10px; position:absolute; top:100%; left:0;
  min-width:220px; background: var(--cpw-card); border:1px solid var(--cpw-border-strong);
  border-top:2px solid var(--cpw-magenta); display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .15s ease, transform .15s ease;
  z-index:200;
}
.cpw-nav-list li:hover > .sub-menu,
.cpw-nav-list li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.cpw-nav-list .sub-menu a{
  display:block; padding:10px 12px; font-size:13px; text-transform:none; letter-spacing:0;
  font-weight:500; color: var(--cpw-muted); white-space:nowrap;
}
.cpw-nav-list .sub-menu a:hover{ color: var(--cpw-cyan); }
.cpw-nav-list .menu-item-has-children > a::after{ content:"▾"; font-size:10px; margin-left:5px; color: var(--cpw-muted); }

.cpw-mobile-nav-list li{ position:relative; }
.cpw-mobile-nav-list .sub-menu{
  list-style:none; margin:0 0 8px; padding:0 0 0 14px; display:none; flex-direction:column; gap:2px;
  border-left:2px solid var(--cpw-border-strong);
}
.cpw-mobile-nav-list li.is-submenu-open > .sub-menu{ display:flex; }
.cpw-mobile-nav-list .sub-menu a{
  padding:9px 4px; font-size:13.5px; text-transform:none; letter-spacing:0; font-weight:500;
  color: var(--cpw-muted); border-bottom:none;
}
.cpw-submenu-toggle{
  position:absolute; right:0; top:2px; background:none; border:none; color: var(--cpw-text);
  width:38px; height:38px; font-size:12px; cursor:pointer;
}

/* =========================================================
   17. RESPONSIVE — sidebar/content two-column collapse
   ========================================================= */
.cpw-two-col{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:40px; align-items:start; }
.cpw-two-col--post{ gap:48px; }
@media (max-width: 900px){
  .cpw-two-col{ grid-template-columns: 1fr; }
}
.cpw-sticky{ position:sticky; top:96px; display:flex; flex-direction:column; gap:24px; }