/* ===========================
   activators.css (RESPONSIVE)
   Overwrites/fixes for activators page
   Replace your existing activators.css with this file.
   =========================== */

:root{
  --black:#0b0b0b;
  --dark:#141414;
  --gold:#c9a86a;
  --gray:#9aa0a6;
  --blue-btn:#007bff;
  --blue-btn-hover:#0056b3;
}

*{box-sizing:border-box;margin:0;padding:0;font-family:"Inter",system-ui,sans-serif}

body{
  color:#eee;
  background-image:url('src/bg.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-color:var(--black);
  min-height:100vh;
  position:relative;
}

/* dim/backdrop */
body::before{
  content:"";
  position:fixed;inset:0;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(8px);
  z-index:-1;
}

/* ============= Header/nav (kept simple) ============= */
header{
  background:var(--black);
  border-bottom:1px solid #222;
  position:fixed;top:0;left:0;width:100%;z-index:9999;
}
.nav{max-width:2200px;margin:auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between}

/* ============= Container ============= */
.container {
  width: 100%;
  margin: 100px 0 60px;
  padding: 0 60px; /* small breathing room from edges */
}


/* ============= Shared boxes ============= */
.content-box{
  background:rgba(20,20,20,0.6);
  border:1px solid rgba(255,255,255,0.08);
  padding:30px;
  border-radius:10px;
  backdrop-filter:blur(10px);
  margin:30px 0;
}

/* ============= TOOL CARD ============= */
/* Make cards flexible (no fixed width) */
.tool-card {
  width: 100%;
  height: 100%;
  padding: 28px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}


/* Title + image */
.tool-title{ color:var(--gold); font-size:clamp(16px,1.6vw,20px); font-weight:700; text-transform:uppercase; letter-spacing:1px; text-align:center }
/* ============= TOOL CARD IMAGES ============= */
.tool-image {
  /* CHANGE: Reduce width from 100% to 60-70% to make it smaller */
  width: 40%; 
  height: auto; 
  border-radius: 6px; 
  border: 1px solid #333; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
  /* Keeps the smaller image centered in the card */
  align-self: center; 
  /* Adds space between the title and the instructions */
  margin: 10px 0; 
}

/* guide text: allow line length control and responsive font-size */
.guide-text{ text-align:left; font-size:clamp(13px,1.1vw,16px); color:#ccc; line-height:1.6 }

/* notes, small text */
.note-text{ text-align:left; font-size:clamp(12px,1vw,14px); color:#999; margin-top:10px; border-top:1px solid rgba(255,255,255,0.06); padding-top:12px }

/* Button */
.btn-download-blue{
  display:inline-block;
  background:var(--blue-btn);
  color:#fff;
  padding:10px 28px;
  font-weight:700;
  border-radius:6px;
  border:1px solid var(--blue-btn-hover);
  text-transform:uppercase;
  font-size:clamp(12px,1vw,15px);
  align-self:center;
  text-decoration:none;
}

/* ================= TWO TOOL LAYOUT (NO ADS) ================= */

.two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 40px;
  width: 100%;
  max-width: 1600px;   /* prevents ultra-stretch on 4K */
  margin: 60px auto;
}

/* Keep cards clean */
.two-column .content-box {
  width: 100%;
  max-width: none;
}

/* --- Hero Section --- */
.disclaimer-hero {
  text-align: center;
  padding: 40px 20px;
}

.hero-image {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block;
  margin: 0 auto 20px auto;
  border-radius: 8px;
}

.page-hero h1 {
  font-size: 3rem;
  background: linear-gradient(135deg, var(--gold), #f4e4c1);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
  letter-spacing: 2px;
}

.page-hero p {
  color: var(--gray);
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto;
}

/* Section title */
.section-title{ font-size:clamp(22px,3vw,36px); text-align:center; margin:50px 0 20px; color:#fff; text-transform:uppercase }

/* ============= Misc small helpers ============= */
.guide-header{ display:block; text-align:center; color:#fff; font-weight:700; text-decoration:underline; text-decoration-color:var(--gold); margin-bottom:8px }

/* top ad banner */
.top-ad-banner{ width:100%; max-width:900px; height:auto; min-height:140px; background:rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; margin:0 auto 40px; padding:20px; color:#555; font-size:1.6rem }

/* footer kept as-is but text sizes responsive */
footer{ background:var(--black); color:#ddd; padding:40px 24px; margin-top:60px }
.footer-grid{ max-width:2200px; margin:auto; display:grid; grid-template-columns:2fr 1fr 2fr; gap:30px }

/* ============= RESPONSIVE BREAKPOINTS ============= */
/* Tablet */
@media (max-width: 1100px) {
  .two-column {
    gap: 30px;
  }
}

/* Mobile */
@media (max-width: 900px) {
  .two-column {
    grid-template-columns: 1fr;
  }
}