/* DrumDestroyer Themes — shared styles for every page on drumdestroyerthemes.com */

/* Fonts are served from this site (see /fonts, SIL OFL 1.1), so no visitor request goes to a third party. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/space-grotesk-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');}

:root{
  color-scheme:dark;
  --bg:#07070b; --surface:#0f0f16; --surface-2:#14141d; --border:#23232c;
  --ink:#eef0f4; --ink-dim:#a0a6b2; --ink-faint:#858b98;
  --teal:#2fe6c6; --magenta:#ff3fa4; --violet:#8b5cf6; --amber:#ffb648;
  --gradient:linear-gradient(100deg,var(--teal),var(--violet) 45%,var(--magenta) 78%,var(--amber));
  --radius:14px; --maxw:1040px; --gutter:24px;
  --font-display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (max-width:420px){ :root{ --gutter:18px; } }

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-wrap:break-word;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-display); margin:0; font-weight:700; letter-spacing:-0.01em; line-height:1.2;}

/* Horizontal gutters live here only. Sections set padding-block, never the padding shorthand,
   so they can't zero these out (the earlier bug that ran text into the screen edge on phones). */
.wrap{
  max-width:var(--maxw); margin-inline:auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right:max(var(--gutter), env(safe-area-inset-right, 0px));
}
.visually-hidden{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;}

/* Skip link */
.skip{
  position:absolute; left:12px; top:-64px; z-index:50; background:var(--ink); color:#0a0a0e;
  padding:10px 16px; border-radius:8px; font-weight:600; text-decoration:none;
}
.skip:focus{top:12px;}

/* Header */
header.site{
  position:sticky; top:0; z-index:20; padding-top:env(safe-area-inset-top, 0px);
  background:rgba(7,7,11,0.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.navrow{
  max-width:var(--maxw); margin-inline:auto; padding:14px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0;}
.brand img{width:30px; height:30px; border-radius:50%;}
.brand span{font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:0.02em; color:var(--ink); white-space:nowrap;}
nav.links{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
nav.links a{
  font-size:14px; font-weight:500; text-decoration:none; color:var(--ink-dim); white-space:nowrap;
  padding:8px 14px; border-radius:20px; transition:color .15s ease, background-color .15s ease;
}
nav.links a:hover, nav.links a:focus-visible{color:var(--ink); background:var(--surface-2);}
nav.links a[aria-current="page"]{color:var(--ink); background:var(--surface-2);}
nav.links a.nav-cta{color:#0a0a0e; background:var(--ink); font-weight:600; margin-left:6px;}
nav.links a.nav-cta:hover, nav.links a.nav-cta:focus-visible{background:var(--teal); color:#0a0a0e;}

@media (max-width:640px){
  html{scroll-padding-top:16px;}
  /* On phones the header scrolls away with the page instead of pinning over the text. */
  header.site{position:static; background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none;}
  .navrow{padding:12px var(--gutter) 10px;}
  nav.links{width:100%; margin-left:-10px; gap:2px; flex-wrap:nowrap;}
  nav.links a{padding:7px 10px; font-size:13.5px;}
  nav.links a.nav-cta{margin-left:auto; padding:7px 12px;}
  .hide-sm{display:none;}
}
@media (max-width:340px){ nav.links{flex-wrap:wrap;} nav.links a.nav-cta{margin-left:0;} }

/* Footer */
footer.site{border-top:1px solid var(--border); margin-top:88px;}
.footrow{
  max-width:var(--maxw); margin-inline:auto;
  padding:32px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.footbrand{display:flex; align-items:center; gap:10px;}
.footbrand img{width:22px; height:22px; border-radius:50%;}
.footbrand span{font-size:13px; color:var(--ink-faint);}
.footlinks{display:flex; gap:8px 18px; flex-wrap:wrap;}
.footlinks a{font-size:13px; color:var(--ink-dim); text-decoration:none;}
.footlinks a:hover, .footlinks a:focus-visible{color:var(--ink); text-decoration:underline; text-underline-offset:2px;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  padding:12px 22px; border-radius:30px; border:1px solid var(--border);
  transition:background-color .15s ease, transform .15s ease;
}
.btn-primary{background:var(--ink); color:#0a0a0e; border-color:var(--ink);}
.btn-primary:hover, .btn-primary:focus-visible{background:var(--teal); border-color:var(--teal); transform:translateY(-1px);}

a:focus-visible, button:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:6px;}

/* ---------- Home ---------- */
.hero{padding-block:64px 24px; overflow:hidden;}
.frame-wrap{position:relative; margin:22px auto 44px; max-width:920px;}
.frame-wrap::before, .frame-wrap::after{content:""; position:absolute; border-radius:4px; pointer-events:none;}
.frame-wrap::before{inset:-14px -20px -14px -10px; border:1px solid rgba(47,230,198,.35); transform:rotate(-0.6deg);}
.frame-wrap::after{inset:-20px -10px -20px -20px; border:1px solid rgba(255,63,164,.28); transform:rotate(0.9deg);}
.frame-wrap img{position:relative; z-index:1; width:100%; border-radius:6px;}
.hero h1{font-size:clamp(26px,4.2vw,38px); text-align:center; max-width:680px; margin:0 auto 14px;}
.hero p.lead{text-align:center; max-width:580px; margin:0 auto; color:var(--ink-dim); font-size:16.5px;}
.hero .ctas{display:flex; justify-content:center; gap:12px; margin-top:28px; flex-wrap:wrap;}
@media (max-width:640px){
  .hero{padding-block:36px 8px;}
  .frame-wrap{margin:12px auto 32px;}
  .frame-wrap::before{inset:-8px -10px -8px -6px;}
  .frame-wrap::after{inset:-12px -6px -12px -12px;}
}

.section{padding-block:56px;}
.section h2{font-size:22px; margin-bottom:6px;}
.section .kicker{color:var(--ink-faint); font-size:14px; margin:0 0 28px;}
.rows{border-top:1px solid var(--border);}
.row{display:grid; grid-template-columns:200px 1fr; gap:24px; padding-block:26px; border-bottom:1px solid var(--border);}
.row h3{font-size:17px; font-weight:600; font-family:var(--font-body);}
.row p{margin:0; color:var(--ink-dim); font-size:15px;}
@media (max-width:640px){ .section{padding-block:40px;} .row{grid-template-columns:1fr; gap:6px; padding-block:20px;} }

.policy-links{border-top:1px solid var(--border);}
.policy-link{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-block:24px; border-bottom:1px solid var(--border); text-decoration:none; color:inherit;
}
.policy-link:hover .pl-title, .policy-link:focus-visible .pl-title{color:var(--teal);}
.pl-title{display:block; font-family:var(--font-display); font-weight:700; font-size:18px; transition:color .15s ease;}
.pl-desc{display:block; color:var(--ink-dim); font-size:14.5px; margin-top:4px;}
.pl-arrow{font-size:22px; color:var(--ink-faint); flex-shrink:0;}

/* ---------- Policy pages ---------- */
.policy-hero{padding-block:56px 32px; border-bottom:1px solid var(--border);}
.policy-hero .eyebrow{font-size:13px; color:var(--ink-faint); margin:0 0 10px;}
.policy-hero h1{
  font-size:clamp(30px,4.6vw,42px); width:fit-content;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.policy-hero p.dek{color:var(--ink-dim); max-width:640px; margin:16px 0 12px; font-size:16px;}
.policy-hero p.updated{color:var(--ink-faint); font-size:13.5px; margin:0;}
@media (forced-colors:active){ .policy-hero h1{background:none; color:CanvasText;} }

.policy-body{display:grid; grid-template-columns:200px minmax(0,1fr); gap:56px; padding-block:48px 16px;}
.toc{position:sticky; top:96px; align-self:start;}
.toc-label{font-size:12.5px; font-weight:600; color:var(--ink-faint); margin:0 0 12px;}
.toc ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--border);}
.toc li{margin:0; break-inside:avoid;}
.toc a{
  display:block; padding:7px 0 7px 16px; margin-left:-1px; border-left:1px solid transparent;
  font-size:13.5px; line-height:1.4; color:var(--ink-dim); text-decoration:none;
}
.toc a:hover, .toc a:focus-visible{color:var(--ink); border-left-color:var(--teal);}

/* Below 800px the contents list is a normal box above the article.
   It used to stay sticky here, which is what slid it over the text while scrolling. */
@media (max-width:800px){
  .policy-body{grid-template-columns:minmax(0,1fr); gap:32px; padding-block:28px 8px;}
  .toc{position:static; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px 10px;}
  .toc ol{border-left:none; columns:2; column-gap:20px;}
  .toc a{padding:6px 0; margin-left:0; border-left:none;}
  .policy-hero{padding-block:36px 24px;}
}
@media (max-width:340px){ .toc ol{columns:1;} }

article.policy{max-width:680px;}
article.policy h2{font-size:21px; margin:44px 0 14px;}
article.policy h2:first-child{margin-top:0;}
article.policy h3{font-family:var(--font-body); font-size:16px; font-weight:600; margin:22px 0 8px;}
article.policy p{margin:0 0 14px; color:var(--ink-dim); font-size:15.5px;}
article.policy ul{margin:0 0 14px; padding-left:20px; color:var(--ink-dim); font-size:15.5px;}
article.policy li{margin-bottom:10px;}
article.policy strong{color:var(--ink); font-weight:600;}
article.policy a{color:var(--teal); text-decoration:underline; text-underline-offset:2px;}

.table-scroll{overflow-x:auto;}
table.safety{width:100%; border-collapse:collapse; margin:4px 0 28px; font-size:14px;}
table.safety th, table.safety td{text-align:left; padding:12px 12px; border-bottom:1px solid var(--border); vertical-align:top;}
table.safety th{font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--ink-faint); border-bottom-color:var(--ink-faint);}
table.safety td{color:var(--ink-dim);}
table.safety td:first-child{color:var(--ink); font-weight:600;}
table.safety .cat{display:block; font-weight:400; font-size:12.5px; color:var(--ink-faint); margin-top:2px;}
.tag{display:inline-block; padding:1px 9px; border-radius:20px; font-size:12.5px; font-weight:600; white-space:nowrap;}
.tag-all{background:rgba(47,230,198,.13); color:var(--teal);}
.tag-ads{background:rgba(255,182,72,.13); color:var(--amber);}
.tag-buy{background:rgba(139,92,246,.18); color:#b9a2fb;}

/* Phones: each table row becomes a stacked card. Explicit ARIA roles in the markup keep the
   table semantics that some browsers drop when table elements are restyled like this. */
@media (max-width:640px){
  table.safety, table.safety tbody, table.safety tr, table.safety td{display:block; width:100%;}
  table.safety thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);}
  table.safety tr{padding-block:14px; border-bottom:1px solid var(--border);}
  table.safety td{border:none; padding:3px 0; display:grid; grid-template-columns:84px minmax(0,1fr); gap:12px;}
  table.safety td::before{content:attr(data-label); color:var(--ink-faint); font-size:12.5px; font-weight:600; padding-top:2px;}
  table.safety td:first-child{display:block; font-size:15.5px; padding-bottom:8px;}
  table.safety td:first-child::before{content:none;}
}

ul.chips{list-style:none; padding:0 !important; display:flex; flex-wrap:wrap; gap:8px;}
ul.chips li{margin:0 !important; font-size:13.5px; color:var(--ink-dim); background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:4px 12px;}

.note{
  border:1px solid var(--border); background:var(--surface); border-radius:var(--radius);
  padding:16px 18px; font-size:14.5px; color:var(--ink-dim); margin:0 0 28px;
}
.note strong{color:var(--ink);}
article.policy .note p{font-size:14.5px; margin:0;}

/* ---------- 404 ---------- */
.notfound{padding-block:96px 24px; text-align:center;}
.notfound h1{font-size:clamp(28px,5vw,40px); margin-bottom:12px;}
.notfound p{color:var(--ink-dim); margin:0 auto 28px; max-width:460px;}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none !important;} }
@media (max-width:640px){ table.safety td .tag{justify-self:start;} }

/* ---------- Added with the Core pages ---------- */
article.policy ol{margin:0 0 14px; padding-left:22px; color:var(--ink-dim); font-size:15.5px;}
article.policy ol li{padding-left:4px;}
.policy-body.single{grid-template-columns:minmax(0,1fr);}
.policy-hero .ctas{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap;}
.row p a{color:var(--teal); text-decoration:underline; text-underline-offset:2px; white-space:nowrap;}