/* ============================================================================
   DD Skin v1 — homepage-match layer for derickdowns.com WordPress
   Scope: everything is gated under `body.dd-skin`.
   Rule of the road: COLORS / TYPE / SURFACES only. Elementor owns layout &
   spacing — we never set width/display/flex/grid/margin/padding on structure.
   Kill switch: ?ddskin=off (PHP) — this file simply won't enqueue.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Instrument+Sans:ital,wght@0,400;0,500;1,400&family=Instrument+Serif:ital@1&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---- Design tokens (from the homepage) --------------------------------- */
body.dd-skin{
  --ink:#050508;
  --panel:rgba(255,255,255,.04);
  --brd:rgba(255,255,255,.09);
  --text:#f2f3f7;
  --dim:rgba(230,233,242,.76);
  --blue:#4d7cff;
  --violet:#8b5cf6;
  --gold:#c9a227;
  --green:#3ddc84;
}

/* ---- Base surface: dark everywhere ------------------------------------- */
body.dd-skin{
  background-color:var(--ink) !important;
  color:var(--text);
  font-family:'Instrument Sans',system-ui,sans-serif;
}
/* Reveal the dark body through Elementor's structural containers so no
   light section survives (colour change only — layout untouched). */
body.dd-skin .elementor-section,
body.dd-skin .elementor-inner-section,
body.dd-skin .e-con,
body.dd-skin .e-con-inner,
body.dd-skin .e-con-outer,
body.dd-skin .elementor-column-wrap,
body.dd-skin .elementor-widget-wrap,
body.dd-skin main,
body.dd-skin #content,
body.dd-skin #primary,
body.dd-skin .site-main,
body.dd-skin .page-content,
body.dd-skin article.post,
body.dd-skin article.page,
body.dd-skin .entry-content{
  background-color:transparent !important;
}

/* ---- Headings: Syne, tight tracking ------------------------------------ */
body.dd-skin h1, body.dd-skin h2, body.dd-skin h3,
body.dd-skin h4, body.dd-skin h5, body.dd-skin h6,
body.dd-skin .elementor-heading-title{
  font-family:'Syne',system-ui,sans-serif !important;
  font-weight:700 !important;
  letter-spacing:-.015em !important;
  color:var(--text) !important;
}

/* em / i inside headings -> Instrument Serif italic, gradient text-clip */
body.dd-skin h1 em, body.dd-skin h2 em, body.dd-skin h3 em, body.dd-skin h4 em,
body.dd-skin h1 i,  body.dd-skin h2 i,  body.dd-skin h3 i,  body.dd-skin h4 i,
body.dd-skin .elementor-heading-title em,
body.dd-skin .elementor-heading-title i{
  font-family:'Instrument Serif',Georgia,serif !important;
  font-style:italic !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  background:linear-gradient(100deg,#9db8ff,#c9b3ff 55%,#e8cf8e) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}

/* ---- Body copy & links ------------------------------------------------- */
body.dd-skin p, body.dd-skin li, body.dd-skin dd, body.dd-skin dt,
body.dd-skin td, body.dd-skin th, body.dd-skin figcaption,
body.dd-skin label, body.dd-skin blockquote{
  font-family:'Instrument Sans',system-ui,sans-serif;
  color:var(--dim) !important;
}
body.dd-skin a{ color:#fff; text-decoration:none; }
body.dd-skin a:hover{ text-decoration:underline; }

/* ---- Buttons: green gradient pills, dark ink label --------------------- */
body.dd-skin .elementor-button,
body.dd-skin .elementor-button-wrapper .elementor-button,
body.dd-skin button,
body.dd-skin input[type=submit],
body.dd-skin input[type=button],
body.dd-skin input[type=reset],
body.dd-skin .wp-block-button__link,
body.dd-skin a.button, body.dd-skin .button, body.dd-skin .btn{
  background:linear-gradient(115deg,#25a862,#3ddc84 60%,#8ce99a) !important;
  color:#07130c !important;
  font-family:'Instrument Sans',system-ui,sans-serif !important;
  font-weight:600 !important;
  border:none !important;
  border-radius:999px !important;
  box-shadow:0 4px 30px -6px rgba(61,220,132,.65) !important;
  text-decoration:none !important;
  text-shadow:none !important;
}
body.dd-skin .elementor-button *,
body.dd-skin button *,
body.dd-skin .wp-block-button__link *,
body.dd-skin a.button *{ color:#07130c !important; fill:#07130c !important; }
body.dd-skin .elementor-button:hover,
body.dd-skin button:hover,
body.dd-skin input[type=submit]:hover,
body.dd-skin .wp-block-button__link:hover,
body.dd-skin a.button:hover{ filter:brightness(1.06); }

/* ---- Glass cards / widgets / quotes / comments ------------------------- */
body.dd-skin blockquote,
body.dd-skin .wp-block-quote,
body.dd-skin .comment-body,
body.dd-skin li.comment .comment-body,
body.dd-skin ol.comment-list > li,
body.dd-skin .elementor-widget-icon-box .elementor-icon-box-wrapper,
body.dd-skin .elementor-widget-image-box .elementor-image-box-wrapper,
body.dd-skin .elementor-widget-call-to-action .elementor-cta,
body.dd-skin .elementor-widget-price-table .elementor-price-table,
body.dd-skin .elementor-testimonial-wrapper,
body.dd-skin .elementor-widget-testimonial,
body.dd-skin .elementor-tab-content,
body.dd-skin .elementor-accordion-item,
body.dd-skin .card, body.dd-skin .widget, body.dd-skin .wp-block-group.has-background{
  background:var(--panel) !important;
  border:1px solid var(--brd) !important;
  border-radius:18px !important;
  -webkit-backdrop-filter:blur(14px) !important;
  backdrop-filter:blur(14px) !important;
}

/* ---- Post meta / dates / cats / tags: mono micro-caps ------------------ */
body.dd-skin .elementor-post-info,
body.dd-skin .elementor-post-info__item,
body.dd-skin .elementor-post-date,
body.dd-skin .elementor-post-author,
body.dd-skin .post-meta, body.dd-skin .entry-meta,
body.dd-skin .posted-on, body.dd-skin .byline,
body.dd-skin .cat-links, body.dd-skin .tags-links,
body.dd-skin .entry-footer, body.dd-skin time.entry-date,
body.dd-skin .wp-block-post-date, body.dd-skin .wp-block-post-terms{
  font-family:'IBM Plex Mono',ui-monospace,monospace !important;
  font-size:10px !important;
  text-transform:uppercase !important;
  letter-spacing:.22em !important;
  color:var(--dim) !important;
}

/* ---- Media -------------------------------------------------------------- */
body.dd-skin img,
body.dd-skin iframe,
body.dd-skin video,
body.dd-skin .wp-block-embed iframe,
body.dd-skin .elementor-widget-image img{
  border-radius:14px;
}

/* ---- Forms / inputs ----------------------------------------------------- */
body.dd-skin input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]),
body.dd-skin textarea,
body.dd-skin select{
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--brd) !important;
  color:var(--text) !important;
  border-radius:12px !important;
}
body.dd-skin input::placeholder,
body.dd-skin textarea::placeholder{ color:rgba(230,233,242,.5) !important; }

/* ---- Selection, rules, scrollbar --------------------------------------- */
body.dd-skin ::selection{ background:var(--blue); color:#fff; }
body.dd-skin hr,
body.dd-skin .elementor-divider-separator{
  border:none !important;
  border-top:1px solid var(--brd) !important;
  background:transparent !important;
}
body.dd-skin ::-webkit-scrollbar{ width:10px; height:10px; }
body.dd-skin ::-webkit-scrollbar-track{ background:#0a0a0f; }
body.dd-skin ::-webkit-scrollbar-thumb{ background:#26262e; border-radius:8px; }
body.dd-skin ::-webkit-scrollbar-thumb:hover{ background:#33333d; }
body.dd-skin{ scrollbar-width:thin; scrollbar-color:#26262e #0a0a0f; }

/* ---- Nav / menu: mono micro-caps, gold current ------------------------- */
body.dd-skin nav a,
body.dd-skin .elementor-nav-menu a,
body.dd-skin .hfe-nav-menu a,
body.dd-skin .menu-item a,
body.dd-skin #site-navigation a{
  font-family:'IBM Plex Mono',ui-monospace,monospace !important;
  font-size:11px !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  color:var(--text) !important;
  text-decoration:none !important;
}
body.dd-skin .current-menu-item > a,
body.dd-skin .current_page_item > a,
body.dd-skin .elementor-item.elementor-item-active,
body.dd-skin .hfe-nav-menu .current-menu-item > a{
  color:var(--gold) !important;
}

/* ---- Starfield stacking: canvas behind, content above ------------------ */
body.dd-skin > #dd-starfield{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  z-index:0 !important;
  pointer-events:none !important;
}
body.dd-skin > :not(#dd-starfield){
  position:relative;
  z-index:1;
}

/* ============================================================================
   v1.0.1 — neutralize DECORATIVE section backgrounds so the dark base +
   starfield show through and forced-light text never lands on a light band.
   (background-image only; layout untouched.)
   ============================================================================ */
body.dd-skin .elementor-section,
body.dd-skin .elementor-inner-section,
body.dd-skin .e-con, body.dd-skin .e-con-inner, body.dd-skin .e-con-outer,
body.dd-skin .elementor-column-wrap,
body.dd-skin .elementor-widget-wrap,
body.dd-skin main, body.dd-skin #content, body.dd-skin #primary,
body.dd-skin .site-main, body.dd-skin .page-content,
body.dd-skin article.post, body.dd-skin article.page,
body.dd-skin .entry-content, body.dd-skin .hentry{
  background-image:none !important;
}
/* Elementor colour/image overlays on sections -> gone (dark base handles it) */
body.dd-skin .elementor-background-overlay{
  background-image:none !important;
  background-color:transparent !important;
  opacity:1 !important;
}
/* White shape dividers (the bright horizontal bands) */
body.dd-skin .elementor-shape,
body.dd-skin .elementor-shape-top,
body.dd-skin .elementor-shape-bottom{ display:none !important; }
body.dd-skin .elementor-shape .elementor-shape-fill{ fill:transparent !important; }

/* ============================================================================
   v1.0.2 — kill background-VIDEO heroes and ANY element carrying an inline
   background-image (footer_bg.jpg etc.), so nothing photographic or light
   survives over the dark base + starfield.
   ============================================================================ */
body.dd-skin .elementor-background-video-container,
body.dd-skin .elementor-background-video-hosted,
body.dd-skin .elementor-background-video-embed,
body.dd-skin .elementor-background-slideshow{ display:none !important; }
/* catch-all: strip inline background-image from Elementor wrappers only
   (never touches <img> tags or the glass cards, which use background-color) */
body.dd-skin [class*="elementor-element"][style*="background-image"],
body.dd-skin [class*="e-con"][style*="background-image"]{
  background-image:none !important;
}

/* ============================================================================
   v1.0.3 — print fidelity: keep the dark theme + green buttons when printed
   (also lets a full-page PDF render the true on-screen colours for QA).
   Screen rendering is unaffected by this block.
   ============================================================================ */
@media print{
  body.dd-skin, body.dd-skin *{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
  body.dd-skin #dd-starfield{ display:none !important; }
}

/* ============================================================================
   v1.0.3 — links white per spec. Specificity raised via body.dd-skin prefix +
   !important on COLOUR ONLY (nothing structural). Buttons keep their dark ink
   label and current-nav keeps gold — both win on higher specificity.
   ============================================================================ */
body.dd-skin a,
body.dd-skin p a, body.dd-skin li a,
body.dd-skin .entry-content a,
body.dd-skin .elementor-widget-text-editor a,
body.dd-skin .elementor-location-footer a,
body.dd-skin footer a{
  color:#fff !important;
}