/*
Theme Name: Devils & Witches Agency
Theme URI: https://yours4hosting.com
Author: Yours4Hosting (Y4H)
Description: Spooky neon TikTok LIVE agency theme (auto creates pages+menu). Fully editable via Theme Customizer.
Version: 2.3.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: devils-witches-agency
*/

:root{
  --dw-bg:#070815;
  --dw-bg2:#0b0a1f;
  --dw-surface:rgba(16,16,34,.88);
  --dw-surface2:rgba(20,18,40,.88);
  --dw-text:#f5f5ff;
  --dw-muted:#b6bbcf;
  --dw-purple:#be46ff;
  --dw-green:#32ffc8;
  --dw-orange:#ff8c3c;
  --dw-radius:22px;
  --dw-shadow:0 18px 45px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 700px at 20% 70%, rgba(50,255,200,.16), transparent 60%),
    radial-gradient(900px 700px at 75% 40%, rgba(190,70,255,.18), transparent 58%),
    radial-gradient(850px 650px at 55% 20%, rgba(70,120,255,.12), transparent 55%),
    linear-gradient(180deg,var(--dw-bg),var(--dw-bg2));
  color:var(--dw-text);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.92}

.dw-wrap{width:min(1200px,calc(100% - 32px));margin:0 auto}

.dw-topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,24,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(190,70,255,.25);
}
.dw-header{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.dw-brand{display:flex;align-items:center;gap:12px;min-width:240px}
.dw-brand img{
  width:56px;height:56px;border-radius:999px;object-fit:cover;
  border:2px solid rgba(190,70,255,.7);
  box-shadow:0 0 0 3px rgba(50,255,200,.18);
}
.dw-title{font-weight:800;font-size:18px;line-height:1.1}
.dw-subtitle{font-size:12px;color:var(--dw-muted);margin-top:2px}

.screen-reader-text{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.dw-nav{display:flex;align-items:center;justify-content:center}
.dw-menu{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;list-style:none;margin:0;padding:0}
.dw-menu li{margin:0;padding:0}
.dw-menu a{font-weight:700;font-size:14px;padding:10px 10px;border-radius:14px;display:inline-block}
.dw-menu a:hover{background:rgba(190,70,255,.12)}

.dw-nav-cta{display:none}

.dw-nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:16px;
  border:1px solid rgba(190,70,255,.35);
  background:rgba(15,12,30,.55);
  color:var(--dw-text);
  cursor:pointer;
}
.dw-nav-toggle:hover{background:rgba(190,70,255,.12)}
.dw-nav-toggle-icon{
  position:relative;
  width:20px;height:2px;
  background:currentColor;
  border-radius:2px;
}
.dw-nav-toggle-icon::before,.dw-nav-toggle-icon::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;height:2px;
  background:currentColor;
  border-radius:2px;
}
.dw-nav-toggle-icon::before{top:-6px}
.dw-nav-toggle-icon::after{top:6px}

body.dw-nav-open{overflow:hidden}

.dw-cta{display:flex;align-items:center;gap:10px}

.dw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 18px;border-radius:16px;font-weight:800;
  border:2px solid rgba(190,70,255,.9);
  background:rgba(38,26,66,.9);
  box-shadow:0 0 26px rgba(190,70,255,.22);
}
.dw-btn.secondary{
  border-color:rgba(50,255,200,.9);
  background:rgba(18,22,44,.85);
  box-shadow:0 0 22px rgba(50,255,200,.14);
}

/* MND Charity: Events & Awareness buttons */
.dw-event-list{display:grid;gap:12px;margin-top:12px}
.dw-event-item{
  border:1px solid rgba(190,70,255,.28);
  background:rgba(15,12,30,.55);
  border-radius:18px;
  padding:12px;
}
.dw-event-actions{display:flex;flex-wrap:wrap;gap:10px}
.dw-event-desc{margin-top:8px;color:var(--dw-muted);font-size:14px;line-height:1.45}

.dw-hero{position:relative;padding:46px 0 44px;overflow:hidden}
.dw-hero::before{
  content:"";position:absolute;inset:-50px;z-index:0;
  background:
    radial-gradient(240px 240px at 82% 22%, rgba(245,245,255,.85), rgba(245,245,255,.02) 60%, transparent 70%),
    radial-gradient(900px 650px at 60% 30%, rgba(80,120,255,.16), transparent 60%),
    radial-gradient(900px 700px at 20% 90%, rgba(50,255,200,.12), transparent 60%),
    linear-gradient(180deg, rgba(10,12,28,.35), rgba(10,12,28,.78));
}
.dw-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-80px;height:260px;z-index:0;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.55));
}

.dw-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:start}
@media (max-width:980px){
  .dw-hero-grid{grid-template-columns:1fr}
  .dw-cta{display:none}

  .dw-brand{min-width:0}
  .dw-nav-toggle{display:inline-flex}
  .dw-nav{
    display:none;
    position:fixed;
    left:0;right:0;
    top:74px;
    padding:14px 16px 18px;
    background:rgba(10,10,24,.96);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(190,70,255,.25);
    box-shadow:0 18px 45px rgba(0,0,0,.35);
    z-index:9999;
  }
  .dw-nav.is-open{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .dw-menu{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px}
  .dw-menu a{display:block;padding:12px 12px;background:rgba(15,12,30,.55);border:1px solid rgba(190,70,255,.22)}
  .dw-nav-cta{display:block}
}

@media (min-width:981px){
  .dw-nav{position:static}
}

.dw-hero-left h1{
  font-size:clamp(34px,4vw,56px);
  line-height:1.04;
  letter-spacing:-0.02em;
  margin:10px 0 14px;
}
.dw-hero-left p{color:var(--dw-muted);font-size:16px;line-height:1.55;max-width:54ch;margin:0 0 18px}

.dw-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 16px}
.dw-badges{display:flex;gap:10px;flex-wrap:wrap}
.dw-badge{
  padding:8px 12px;border-radius:14px;
  background:rgba(12,12,28,.70);
  border:1px solid rgba(190,70,255,.22);
  font-size:12px;font-weight:800;
}

.dw-frame{
  border-radius:28px;background:rgba(16,16,34,.72);
  border:1px solid rgba(190,70,255,.30);
  box-shadow:var(--dw-shadow);
  padding:14px;
}
.dw-frame-inner{
  border-radius:22px;border:1px solid rgba(50,255,200,.18);
  background:rgba(12,12,28,.55);padding:14px;
}
.dw-mini-site{
  border-radius:18px;border:1px solid rgba(190,70,255,.22);
  background:rgba(10,10,24,.62);padding:14px;
}

.dw-section{padding:44px 0}
.dw-section h2{font-size:30px;margin:0 0 10px}
.dw-lead{color:var(--dw-muted);margin:0 0 18px;line-height:1.55}

.dw-card-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;margin-top:18px}
@media (max-width:980px){.dw-card-grid{grid-template-columns:1fr}}

.dw-card{
  border-radius:var(--dw-radius);
  background:var(--dw-surface);
  border:1px solid rgba(190,70,255,.24);
  box-shadow:var(--dw-shadow);
  padding:20px;
}
.dw-card.green{border-color:rgba(50,255,200,.28)}
.dw-card.orange{border-color:rgba(255,140,60,.28)}
.dw-card h3{margin:0 0 10px;font-size:18px}
.dw-card p{margin:0;color:var(--dw-muted);line-height:1.6}

.dw-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
@media (max-width:980px){.dw-features{grid-template-columns:1fr}}
.dw-feature{border-radius:var(--dw-radius);background:var(--dw-surface2);border:1px solid rgba(190,70,255,.22);padding:18px}
.dw-feature h4{margin:0 0 8px}
.dw-feature p{margin:0;color:var(--dw-muted);line-height:1.6}

.dw-split{display:grid;grid-template-columns:.95fr 1.05fr;gap:20px;align-items:start}
@media (max-width:980px){.dw-split{grid-template-columns:1fr}}
.dw-split-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;align-items:start}
@media (max-width:540px){.dw-split-3{grid-template-columns:1fr}}


.dw-media{width:100%;border-radius:22px;overflow:hidden;border:1px solid rgba(190,70,255,.20);box-shadow:var(--dw-shadow)}
.dw-media img{width:100%;height:auto;display:block}

.dw-table-row{
  margin-top:12px;border-radius:12px;background:rgba(10,10,24,.55);
  border:1px solid rgba(190,70,255,.14);
  padding:10px 12px;color:var(--dw-muted);font-size:13px;
}

.dw-video{
  aspect-ratio:16/9;border-radius:22px;
  background:rgba(10,10,24,.55);
  border:1px solid rgba(50,255,200,.22);
  overflow:hidden;box-shadow:var(--dw-shadow);
}
.dw-video iframe{width:100%;height:100%;border:0;display:block}

.dw-page{padding:38px 0 52px}
.dw-page h1{margin:0 0 10px;font-size:34px}

.dw-content{
  border-radius:26px;background:rgba(16,16,34,.74);
  border:1px solid rgba(190,70,255,.22);
  padding:22px;box-shadow:var(--dw-shadow);
}
.dw-content p{color:var(--dw-muted);line-height:1.7}

.dw-creators{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:980px){.dw-creators{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.dw-creators{grid-template-columns:1fr}}
.dw-creator{
  border-radius:18px;background:rgba(10,10,24,.55);
  border:1px solid rgba(190,70,255,.18);overflow:hidden;
}
.dw-creator img{width:100%;height:200px;object-fit:cover;display:block}
.dw-creator-meta{padding:12px}
.dw-creator-meta strong{display:block;margin-bottom:4px}
.dw-creator-meta span{color:var(--dw-muted);font-size:12px}

.dw-contact-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:700px){.dw-contact-buttons{grid-template-columns:1fr}}

.dw-footer{
  padding:26px 16px;border-top:1px solid rgba(190,70,255,.35);
  background:rgba(10,10,24,.92);text-align:center;
}
.dw-footer-space{height:14px;background:transparent}
.y4h-powered{display:flex;justify-content:center;padding:12px 0 22px}

/* Footer: size down Powered by Y4H logo */
.y4h-powered img{width:170px;max-width:70vw;height:auto;display:block}
.y4h-powered img{max-width:190px;height:auto;display:block}

.dw-note{font-size:12px;color:rgba(182,187,207,.85);margin-top:10px}

/* Footer social icons (auto-hidden when URL is blank) */
.dw-footer-social{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.dw-footer-social .dw-social-link{
  width:38px;
  height:38px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(190,70,255,.25);
  background:rgba(10,10,24,.55);
  box-shadow:var(--dw-shadow);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.dw-footer-social .dw-social-link:hover{
  transform:translateY(-1px);
  border-color:rgba(190,70,255,.55);
  background:rgba(10,10,24,.65);
}
.dw-footer-social svg{
  width:18px;
  height:18px;
  fill:rgba(226,228,244,.92);
}


/* Home hero right panel toggle */
.dw-hero-grid.dw-single{ grid-template-columns: 1fr; }
.dw-hero-grid.dw-single .dw-hero-right{ display:none; }

/* Make WP embedded video responsive inside dw-video */
.dw-video .wp-video,
.dw-video video,
.dw-video iframe{
  width:100% !important;
  max-width:100% !important;
}
.dw-video .mejs-container{
  width:100% !important;
  max-width:100% !important;
}


/* Hero right video: show entire frame (no crop) */
.dw-hero-right .dw-video video{
  object-fit: contain;
  background: rgba(0,0,0,.35);
}
.dw-hero-right .dw-video .mejs-poster{
  background-size: contain !important;
}


/* Hero right video: force MediaElement to CONTAIN (no crop) */
.dw-hero-right .dw-video{ overflow:hidden; }
.dw-hero-right .dw-video .wp-video,
.dw-hero-right .dw-video .mejs-container,
.dw-hero-right .dw-video .mejs-inner,
.dw-hero-right .dw-video .mejs-mediaelement{
  height:100% !important;
  width:100% !important;
}
.dw-hero-right .dw-video video{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  background: rgba(0,0,0,.35);
}
.dw-hero-right .dw-video .mejs-poster{
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


/* Hero autoplay video (no controls) */
.dw-hero-autoplay{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

/* If aspect-ratio is removed (Auto), allow the frame to size naturally */
.dw-hero-right .dw-video[style*="aspect-ratio"]{}

/* Hide any mediaelement controls if a browser injects them */
.dw-hero-right .mejs-controls,
.dw-hero-right .mejs-overlay-button,
.dw-hero-right .mejs-overlay-loading{
  display:none !important;
}


/* Battles embeds */
.dw-embed iframe{width:100% !important; min-height:900px; border:0; border-radius:16px;}

/* ADBH plugin inside Battles page */
.dw-content #adbh-battle{margin-top:0;}


/* Hide ADBH battle board on Home (plugin may inject site-wide) */
body.home .adbh-wrap,
body.home #adbh-battle,
body.home .adbh-modal,
body.home .adbh-toast{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
}


/* MND Charity gallery: show full photo (no crop) + click to open full */
.dw-gallery-link{
  display:block;
  padding:10px;
  border-radius:18px;
  background: rgba(0,0,0,.22);
}
.dw-gallery-img{
  width:100% !important;
  height:220px !important;
  object-fit: contain !important;
  display:block;
  background: rgba(0,0,0,.25);
  border-radius:14px;
}


/* Creators gallery grid */
.dw-creators-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:18px;
  margin-top:10px;
}
@media (max-width: 980px){
  .dw-creators-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .dw-creators-grid{ grid-template-columns: 1fr; }
}
.dw-creator-card{
  display:block;
  border-radius:18px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(168,85,247,.25);
  overflow:hidden;
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dw-creator-card:hover{
  transform: translateY(-2px);
  border-color: rgba(34,211,238,.45);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.dw-creator-img{
  width:100%;
  height:180px;
  background: rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
}
.dw-creator-img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.dw-creator-img--empty span{
  color: rgba(255,255,255,.65);
  font-size: 13px;
}
.dw-creator-meta{
  padding:12px 14px 14px;
}
.dw-creator-name{
  color:#fff;
  font-weight:700;
  font-size:14px;
  line-height:1.2;
}
.dw-creator-sub{
  margin-top:4px;
  color: rgba(255,255,255,.70);
  font-size:12px;
}


/* v2.3.0 additions: toggleable home boxes, optional hero no-frame mode, tabbed content */
.dw-frame.noframe{background:transparent;border:0;box-shadow:none;padding:0}
.dw-frame.noframe .dw-frame-inner{background:transparent;border:0;padding:0}
.dw-frame.noframe .dw-media,.dw-frame.noframe .dw-video{border:0;box-shadow:none;background:transparent}
.dw-card-grid.single{grid-template-columns:1fr;justify-items:center}
.dw-card-grid.single .dw-card{max-width:820px;width:100%}
.dw-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dw-action-grid.dw-action-single{grid-template-columns:1fr;justify-items:center}
.dw-action-grid.dw-action-single .dw-action-box{max-width:860px;width:100%}
@media (max-width:980px){.dw-action-grid{grid-template-columns:1fr}}
.dw-action-box{border-radius:var(--dw-radius);background:rgba(10,10,24,.55);border:1px solid rgba(50,255,200,.18);box-shadow:var(--dw-shadow);padding:20px;backdrop-filter:blur(8px)}
.dw-action-title{margin:0 0 8px;font-size:22px;letter-spacing:.02em;text-transform:uppercase}
.dw-action-lead{margin:0 0 14px;color:var(--dw-muted)}
.dw-action-box ul{margin:12px 0 0 18px;color:var(--dw-muted);line-height:1.6}
.dw-action-box li{margin:6px 0}
.dw-action-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.dw-action-box.for-creators{text-align:center}
.dw-action-box.for-creators ul{display:inline-block;margin:12px auto 0;text-align:left}
.dw-action-box.for-creators .dw-action-actions{justify-content:center}
.dw-tabs{margin-top:12px}
.dw-tablist{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.dw-tab{appearance:none;border-radius:999px;padding:10px 14px;border:1px solid rgba(50,255,200,.22);background:rgba(15,12,30,.55);color:rgba(50,255,200,.92);font-weight:800;letter-spacing:.02em;cursor:pointer}
.dw-tab:hover{background:rgba(190,70,255,.12);border-color:rgba(190,70,255,.32)}
.dw-tab.is-active{background:rgba(50,255,200,.92);color:rgba(10,10,24,.95);border-color:rgba(50,255,200,.92)}
.dw-tab-panel{display:none;border-radius:18px;border:1px solid rgba(50,255,200,.16);background:rgba(10,10,24,.55);padding:16px}
.dw-tab-panel.is-active{display:block}
.dw-tab-panel h4{margin:0 0 10px;font-size:18px}
.dw-tab-panel ul{margin:0 0 0 18px}