/* ===========================================================
   Crash Course SEO — Optimizer Page CSS (v21a)
   Scope: ONLY things used by /optimize/
   - Full-bleed video hero (.ccseo-hero--opt + inner layers)
   - Gradient stage + dark Optimizer card (.ccseo-hero + .ccseo-card)
   - Minimal text/button styles used inside this page
   - Optional: hide theme page title strip (update the page ID)
   =========================================================== */

/* ---- Local fallbacks so this page is self-contained Keep all this, this page is for the optimizer video ect on that page. ---- */
:root{
  --cc-accent: #e00000;
  --cc-gold:   #ddb83d;
  --cc-muted:  #9fb0cb;
  --cc-surface-2:#14243a;
}

/* ===========================================================
   A) OPTIMIZER — Full‑bleed video hero
   =========================================================== */
.ccseo-hero--opt{
  --hero-overscan: 1.12; /* zoom video slightly to avoid banding */
  --video-nudge: 0px;    /* mobile nudge */
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  min-height:100dvh;
  padding:0;
  overflow:hidden;
  color:#fff;
  isolation:isolate;
}
.ccseo-hero--opt .ccseo-hero-video__bg{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
}
.ccseo-hero--opt .ccseo-hero-video__bg iframe{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%, calc(-50% + var(--video-nudge)));
  width: calc(max(100vw, 177.78vh) * var(--hero-overscan));
  height: calc(max(56.25vw, 100vh) * var(--hero-overscan));
  border:0; object-fit:cover;
  filter:saturate(1) contrast(1.05) brightness(.88);
}
.ccseo-hero--opt .ccseo-hero-video__scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(36,99,235,.25) 0%, rgba(29,78,216,.18) 45%, rgba(15,23,42,.72) 100%),
    linear-gradient(180deg, rgba(2,6,23,.45), rgba(2,6,23,.65));
}
.ccseo-hero--opt .ccseo-hero-video__inner{
  position:relative; z-index:1; max-width:1100px; margin:0 auto;
  text-align:center; padding: clamp(64px, 10svh, 140px) 16px 48px;
}

/* Minimal text/button styles used in the hero */
.ccseo-badge2{
  display:inline-flex; align-items:center; gap:.5ch; padding:6px 12px;
  font-weight:700; letter-spacing:.02em; border-radius:999px;
  background:linear-gradient(#0b1226aa,#0b1226aa) padding-box,
             linear-gradient(135deg,#7c3aed,#22d3ee 55%,#60a5fa) border-box;
  border:1.5px solid transparent; color:#fff;
  box-shadow:0 8px 30px rgba(124,58,237,.35), 0 2px 10px rgba(0,0,0,.25);
}
.ccseo-hero-video__title{
  margin:.35rem 0; line-height:1.1; font-size:clamp(36px,6vw,64px);
  font-weight:900; letter-spacing:-.02em;
}
.ccseo-hero-video__sub{
  font-size:clamp(16px,2vw,20px); color:#e6ebf3; opacity:.95;
  margin:1rem auto 2rem; max-width:48ch;
}
.ccseo-hero-video__cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Buttons used here only */
.ccseo-btn2{
  display:inline-flex; align-items:center; justify-content:center; gap:.6ch;
  padding:13px 18px; border-radius:999px; font-weight:800; text-decoration:none;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.ccseo-btn2--gold{
  background:#ddb83d; color:#000;
  box-shadow:0 8px 30px rgba(124,58,237,.35), 0 2px 10px rgba(0,0,0,.25);
}
.ccseo-btn2--gold:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.ccseo-btn2--ghost{ border:2px solid #fff; color:#fff; background:transparent; }
.ccseo-btn2--ghost:hover{ background:#fff; color:#000; transform:translateY(-1px); }

@media (max-width:680px){
  .ccseo-hero--opt{ --video-nudge:56px; }
  .ccseo-hero--opt .ccseo-hero-video__inner{ padding-top: clamp(72px, 14svh, 160px); }
}

/* ===========================================================
   B) OPTIMIZER — Gradient stage + dark card
   =========================================================== */
.ccseo-hero{
  position:relative; width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(219,0,0,.15), transparent 60%),
    radial-gradient(1000px 500px at 85% 10%, rgba(221,184,61,.10), transparent 60%),
    linear-gradient(180deg, #0b1320 0%, #0f1e33 42%, #ffffff 42.1%, #ffffff 100%);
  padding: 7rem 1rem 6rem;
}
.ccseo-shell{ max-width:860px; margin:0 auto; }
.ccseo-title{
  color:#fff; font-size:clamp(28px, 3vw, 40px); font-weight:800; letter-spacing:.2px;
  margin:0 0 1.25rem; text-align:center; text-wrap:balance;
}
.ccseo-card{
  background: linear-gradient(145deg, #0e1d31, #13294b);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 8px 16px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.05);
  padding:32px; color:#e7eef9; transform:translateY(0);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ccseo-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,.55), 0 10px 20px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.06);
}
.ccseo-card *{ box-sizing:border-box; }

/* Controls */
.ccseo-card input[type="text"],
.ccseo-card input[type="url"],
.ccseo-card input[type="email"],
.ccseo-card textarea,
.ccseo-card select{
  width:100%; background:#0b1728; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; color:#e7eef9; padding:12px 14px; font-size:16px; line-height:1.35;
  outline:0; transition:border-color .15s ease, box-shadow .15s ease; margin:8px 0 14px;
}
.ccseo-card textarea{ min-height:140px; resize:vertical; }
.ccseo-card input:focus,
.ccseo-card textarea:focus,
.ccseo-card select:focus{
  border-color:var(--cc-gold); box-shadow:0 0 0 3px rgba(221,184,61,.18);
}
.ccseo-card label{
  display:block; font-weight:600; margin-bottom:6px; color:#cfddf5;
}
.ccseo-card .help, .ccseo-note{ color:var(--cc-muted); font-size:14px; margin-top:8px; }

/* Submit buttons inside the card */
.ccseo-card button,
.ccseo-card input[type="submit"],
.ccseo-card .button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--cc-accent); color:#fff; border:0; border-radius:999px; padding:12px 18px;
  font-weight:700; cursor:pointer;
  transition: transform .05s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow: 0 3px 8px rgba(224,0,0,.45);
}
.ccseo-card button:hover,
.ccseo-card input[type="submit"]:hover,
.ccseo-card .button:hover{ filter:brightness(1.05); box-shadow:0 6px 12px rgba(224,0,0,.55); }
.ccseo-card button:active,
.ccseo-card input[type="submit"]:active,
.ccseo-card .button:active{ transform: translateY(1px); }
.ccseo-card .button.secondary{
  background:transparent; color:#e7eef9; border:1px solid rgba(255,255,255,.18);
}

/* Gate helpers */
.blurred{ filter: blur(8px); pointer-events:none; user-select:none; }
#gate-msg{
  color:#fff; background:var(--cc-surface-2); border:1px dashed rgba(255,255,255,.25);
  padding:10px 14px; border-radius:12px; display:inline-block; margin-bottom:14px;
}
.ccseo-note{ text-align:center; margin:18px 0 0; }
.ccseo-hero + .wp-block-group, .ccseo-hero + *{ margin-top:24px !important; }

/* ===========================================================
   C) Optional: Hide theme page title strip on /optimize/
   —— Change 3887 to your Optimize page ID ——
   =========================================================== */
.page-id-3887 .eltdf-title-wrapper,
.page-id-3887 .eltdf-title-holder,
.page-id-3887 .qodef-page-title,
.page-id-3887 .qodef-page-title-holder{
  display:none !important; height:0 !important; padding:0 !important; margin:0 !important;
}
.page-id-3887 .eltdf-content .eltdf-content-inner{ padding-top:0 !important; }

/* ===========================================================
   D) Small a11y polish
   =========================================================== */
.ccseo-btn2:focus-visible,
.ccseo-card .button:focus-visible,
.ccseo-card button:focus-visible,
.ccseo-card input[type="submit"]:focus-visible{
  outline:2px solid #a5f3fc; outline-offset:2px;
}

/* ==============================
   Google Ads Generator – main shell
   ============================== */
.ccseo-google-ads-wrap {
  max-width: 980px;
  margin: 60px auto;
  padding: 32px 28px 40px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at top left, #1d4ed8 0, transparent 55%),
              radial-gradient(circle at bottom right, #e00000 0, transparent 50%),
              #020617;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  color: #e5e7eb;
}

/* Inner content layer so text stays sharp */
.ccseo-google-ads-wrap > * {
  position: relative;
  z-index: 1;
}

/* Headline + subtitle */
.ccseo-ga-title {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  text-transform: uppercase;
  color: #f9fafb;
}

.ccseo-ga-subtitle {
  margin-bottom: 24px;
  color: #cbd5e1;
  font-size: 0.98rem;
}

/* Form layout */
#ccseo-google-ads-form {
  display: grid;
  gap: 16px;
}

/* Labels + help text */
.ccseo-ga-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a5b4fc;
}

.ccseo-ga-field small {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: #9ca3af;
}

/* Inputs / textarea / select */
.ccseo-ga-field input[type="url"],
.ccseo-ga-field input[type="text"],
.ccseo-ga-field textarea,
.ccseo-ga-field select {
  width: 100%;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  background: rgba(15, 23, 42, 0.96);
  color: #e5e7eb;
  font-size: 0.95rem;
  outline: none;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.6);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.ccseo-ga-field textarea {
  resize: vertical;
  min-height: 120px;
}

.ccseo-ga-field input:focus,
.ccseo-ga-field textarea:focus,
.ccseo-ga-field select:focus {
  border-color: #e00000;
  box-shadow: 0 0 0 1px #e00000, 0 0 24px rgba(224, 0, 0, 0.45);
  transform: translateY(-1px);
}

/* Button – big WOW CTA */
.ccseo-ga-button {
  margin-top: 8px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 999px;
  border: none;
  background: radial-gradient(circle at 0 0, #f97316 0, transparent 55%),
              linear-gradient(90deg, #e00000, #f97316);
  color: #f9fafb;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(148,163,184,0.7),
              0 20px 40px rgba(0, 0, 0, 0.6);
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.ccseo-ga-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px #fecaca,
              0 24px 60px rgba(239, 68, 68, 0.55);
}

.ccseo-ga-button:active {
  transform: translateY(0);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7);
}

/* Status text */
#ccseo-ga-status {
  margin-top: 16px;
  font-size: 0.9rem;
  color: #a5b4fc;
}

/* Results container – ALWAYS VISIBLE */
#ccseo-ga-results {
  margin-top: 22px;
  padding: 22px 20px;
  border-radius: 16px;
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.7);
  max-height: 70vh;
  overflow-y: auto;
  font-size: 0.99rem;
  line-height: 1.5;
}

/* Force readable text inside results */
#ccseo-ga-results,
#ccseo-ga-results * {
  color: #f9fafb !important;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

/* Headings + lists inside results */
#ccseo-ga-results h3,
#ccseo-ga-results h4,
#ccseo-ga-results h5 {
  margin-top: 12px;
  margin-bottom: 6px;
  font-weight: 700;
}

#ccseo-ga-results ul {
  padding-left: 18px;
  margin-bottom: 10px;
}

#ccseo-ga-results li::marker {
  color: #f97316;
}


#ccseo-create-post {
  accent-color: #e00000;
}
/* Optimizer /optimize hero: hide overlay text + buttons, show only video */
.ccseo-hero--opt .ccseo-badge2,
.ccseo-hero--opt .ccseo-hero-video__title,
.ccseo-hero--opt .ccseo-hero-video__sub,
.ccseo-hero--opt .ccseo-hero-video__cta {
  display: none !important;
}
/* Inner campaign layout (upgraded generator) */
.ccseo-ads-wrap {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 16px;
  padding: 20px 18px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.ccseo-ads-wrap h2,
.ccseo-ads-wrap h3,
.ccseo-ads-wrap h4 {
  color: #f9fafb;
  margin-top: 10px;
  margin-bottom: 4px;
}

.ccseo-ads-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 12px 0 16px;
}

.ccseo-ads-column ul {
  padding-left: 18px;
  margin: 0;
}

.ccseo-ga-raw {
  background: #020617;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(30, 64, 175, 0.9);
  max-height: 260px;
  overflow: auto;
  font-size: 0.8rem;
}

.ccseo-ga-error {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(127, 29, 29, 0.7);
  border: 1px solid rgba(248, 113, 113, 0.8);
  color: #fee2e2 !important;
}

/* ==========================================
   Optimizer result – full width + mobile fix
   ========================================== */

#ccseo-result {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Softer spacing + readable text on phones */
@media (max-width: 640px) {
  #ccseo-result {
    margin: 14px auto 0 !important;
    padding: 16px 14px !important;
    font-size: 0.99rem;
    line-height: 1.6;
  }

  #ccseo-result p {
    font-size: 0.99rem;
  }
}

/* ================================
   Crash Course SEO – Optimizer Output Styling
   ================================ */

/* Output container */
#ccseo-result,
.ccseo-output {
  background: #0b1220;
  border-radius: 14px;
  padding: 28px;
  color: #e5e7eb;
}

/* Section cards inside output */
#ccseo-optimized section {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 22px;
}

/* Main optimized title */
#ccseo-optimized h1 {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 12px;
}

/* Subheadings */
#ccseo-optimized h2,
#ccseo-optimized h3 {
  color: #93c5fd;
  margin-top: 26px;
  margin-bottom: 10px;
}

/* Body text */
#ccseo-optimized p,
#ccseo-optimized li {
  color: #d1d5db;
  line-height: 1.65;
  font-size: 1rem;
}

/* Lists */
#ccseo-optimized ul {
  padding-left: 20px;
}

/* Links inside output */
#ccseo-optimized a {
  color: #22d3ee;
  text-decoration: underline;
}
#ccseo-optimized h1 {
  background: linear-gradient(90deg, #22d3ee, #a855f7, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* If notes heading is outside #ccseo-optimized but still in the output */
#ccseo-result h2,
#ccseo-result h3 {
  color: #93c5fd !important;
}