/* ======================================
   Revision 20 fix on this is the optimzie page renders blue container keep going Crash Course SEO – Optimize Page Styles (CLEAN)
   Scope: Optimize page hero video, form card + gate, decks/sections
   Notes: Duplicates merged, unused selectors removed, properties normalized
   ====================================== */

:root {
  --cc-ink: #262626;
  --cc-muted: #6b7280;
  --cc-bg: #ffffff;
  --cc-surface: #0d1b2a;
  --cc-surface-2: #14243a;
  --cc-accent: #e00000;
  --cc-gold: #ddb83d;
  --cc-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* ======================
   HERO with video background
   ====================== */
.ccseo-hero--opt {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 100vh;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.ccseo-hero-video__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ccseo-hero-video__bg iframe {
  width: 100%; height: 100%; border: 0; pointer-events: none; object-fit: cover;
}
.ccseo-hero-video__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.7) 60%, rgba(0,0,0,.85) 100%);
}
.ccseo-hero-video__inner { position: relative; z-index: 2; max-width: 800px; padding: 0 1.5rem; }

.ccseo-badge2 {
  display: inline-block; background: rgba(255,255,255,.15); color: #fff; font-weight: 600;
  border-radius: 999px; padding: 6px 16px; margin-bottom: 1rem; font-size: 14px; letter-spacing: .5px;
}
.ccseo-hero-video__title { font-size: clamp(32px, 5vw, 54px); font-weight: 800; line-height: 1.2; margin: 0 0 1rem; }
.ccseo-hero-video__sub   { font-size: clamp(16px, 2vw, 20px); opacity: .9; margin-bottom: 2rem; }

/* rotating words */
.ccseo-rotate { display: inline-block; overflow: hidden; vertical-align: bottom; }
.ccseo-rotate span { display: inline-block; animation: ccseo-rotateWords 8s linear infinite 0s; }
.ccseo-rotate span:nth-child(2) { animation-delay: 2s; }
.ccseo-rotate span:nth-child(3) { animation-delay: 4s; }
.ccseo-rotate span:nth-child(4) { animation-delay: 6s; }
@keyframes ccseo-rotateWords {
  0%,20%{ transform: translateY(0%);    opacity: 1; }
  25%,45%{ transform: translateY(-120%); opacity: 0; }
  50%,70%{ transform: translateY(0%);    opacity: 1; }
  75%,100%{transform: translateY(120%);  opacity: 0; }
}

/* hero buttons */
.ccseo-btn2 { display: inline-block; font-weight: 700; border-radius: 999px; padding: 12px 24px; margin: 0 8px; text-decoration: none; transition: all .2s ease; }
.ccseo-btn2--gold  { background: var(--cc-gold); color: #000; }
.ccseo-btn2--gold:hover { filter: brightness(1.1); }
.ccseo-btn2--ghost { border: 2px solid #fff; color: #fff; }
.ccseo-btn2--ghost:hover { background: #fff; color: #000; }

/* ======================
   Polished FORM section (dark card on white)
   ====================== */
.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; }

/* Card (merged + enhanced) */
.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: none; 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 (merged + glow) */
.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: none; 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 */
.blurred { filter: blur(6px); pointer-events: 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; }

/* spacing helpers */
.ccseo-note { text-align: center; margin: 18px 0 0; }
.ccseo-hero + .wp-block-group,
.ccseo-hero + * { margin-top: 24px !important; }

/* ======================
   Alternate small card (pricing/tiles)
   ====================== */
.ccseo-card2 {
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 22px 20px; min-height: 280px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .2s ease;
}
.ccseo-card2:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(0,0,0,.35); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border-color: rgba(255,255,255,.22); }
.ccseo-card2__badge { position: absolute; top: 12px; right: 12px; font-size: 12px; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.09); color: #e5e7eb; border: 1px solid rgba(255,255,255,.18); }
.ccseo-card2__icon{ font-size: 30px; margin-bottom: 12px; }
.ccseo-card2__title{ font-size: 20px; margin: 0 0 6px; font-weight: 800; }
.ccseo-card2__desc { font-size: 14px; opacity: .9; margin: 0 0 12px; }
.ccseo-card2__price{ font-size: 18px; font-weight: 800; margin-top: auto; }
.ccseo-card2__btn  { display: inline-block; margin-top: 12px; padding: 10px 14px; border-radius: 10px; font-weight: 800; background: linear-gradient(135deg, #c80000, var(--cc-accent)); color: #fff; box-shadow: 0 8px 22px rgba(224,0,0,.30); transition: transform .15s ease, box-shadow .25s ease, filter .15s ease; }
.ccseo-card2:hover .ccseo-card2__btn { filter: saturate(1.06); box-shadow: 0 12px 28px rgba(224,0,0,.40); }

/* ======================
   Packages deck (Dark)
   ====================== */
.ccseo-pack {
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  background: radial-gradient(1200px 600px at 30% -10%, rgba(91,44,131,.25), rgba(224,0,0,.12) 45%, #0b1220 100%), #0b1220;
  color: #fff; padding: clamp(40px, 8vh, 96px) 16px;
}
.ccseo-pack__inner { max-width: 1200px; margin: 0 auto; }
.ccseo-pack__head { text-align: center; margin-bottom: 28px; }
.ccseo-pack__head h2 { font-size: clamp(28px, 4vw, 46px); margin: 0 0 6px; font-weight: 800; }
.ccseo-pack__head p { opacity: .9; margin: 0; }
.ccseo-pack__grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1100px){ .ccseo-pack__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .ccseo-pack__grid { grid-template-columns: 1fr; } }

/* ======================
   Testimonials (Dark)
   ====================== */
.ccseo-social {
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  background: radial-gradient(900px 420px at 10% -10%, rgba(91,44,131,.22), rgba(224,0,0,.12) 45%, #0b1220 100%), #0b1220;
  color: #fff; padding: clamp(36px, 7vh, 88px) 16px;
}
.ccseo-social__inner { max-width: 1200px; margin: 0 auto; }
.ccseo-social__head { text-align: center; margin-bottom: 18px; }
.ccseo-social__head h2 { margin: 0 0 6px; font-size: clamp(24px, 3.6vw, 38px); font-weight: 800; }
.ccseo-social__head p { margin: 0; opacity: .9; }

.ccseo-caro { display: grid; grid-auto-flow: column; grid-auto-columns: min(85vw, 520px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px; }
.ccseo-caro::-webkit-scrollbar       { height: 10px; }
.ccseo-caro::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 10px; }

.ccseo-quote { scroll-snap-align: start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; min-height: 180px; }
.ccseo-quote p { margin: 0 0 12px; font-size: 16px; }
.ccseo-quote footer { display: flex; gap: 10px; align-items: center; }
.ccseo-quote footer img { width: 40px; height: 40px; border-radius: 50%; }
.ccseo-quote footer div { display: flex; flex-direction: column; line-height: 1.1; }
.ccseo-quote footer span { opacity: .8; font-size: 12px; }
.ccseo-caro__hint { text-align: center; margin-top: 8px; opacity: .8; font-size: 12px; }

/* ======================
   Before / After (Light)
   ====================== */
.ccseo-compare {
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  background: #ffffff; color: var(--cc-ink); padding: clamp(36px, 7vh, 88px) 16px;
}
.ccseo-compare__inner { max-width: 1200px; margin: 0 auto; }
.ccseo-compare__head { text-align: center; margin-bottom: 16px; }
.ccseo-compare__head h2 { margin: 0 0 6px; font-size: clamp(24px, 3.6vw, 38px); font-weight: 800; }
.ccseo-compare__head p { margin: 0; color: var(--cc-muted); }
.ccseo-compare__grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 900px){ .ccseo-compare__grid { grid-template-columns: 1fr; } }

.ccseo-box { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid #e5e7eb; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.05); }
.ccseo-box--before .ccseo-box__content { filter: blur(1px) grayscale(.25); opacity: .85; }
.ccseo-box__label { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 999px; font-size: 12px; background: #f1f5f9; color: #0f172a; border: 1px solid #e2e8f0; }
.ccseo-box__content { padding: 18px; }
.ccseo-compare__cta { text-align: center; margin-top: 16px; }

/* ======================
   FAQ (Light)
   ====================== */
.ccseo-faq { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #f8fafc; color: var(--cc-ink); padding: clamp(36px, 7vh, 88px) 16px; }
.ccseo-faq__inner { max-width: 900px; margin: 0 auto; }
.ccseo-faq__head  { text-align: center; margin-bottom: 10px; }

.ccseo-acc details { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; margin: 10px 0; overflow: hidden; }
.ccseo-acc summary { list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 700; position: relative; }
.ccseo-acc summary::-webkit-details-marker { display: none; }
.ccseo-acc summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--cc-accent); }
.ccseo-acc details[open] summary::after { content: "–"; }
.ccseo-acc__body { padding: 0 16px 14px; color: #475569; }

/* ======================
   Final CTA (Dark)
   ====================== */
.ccseo-final { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: radial-gradient(900px 420px at 80% -10%, rgba(224,0,0,.22), rgba(91,44,131,.20) 45%, #0a0f1d 100%), #0a0f1d; color: #fff; text-align: center; padding: clamp(36px, 8vh, 100px) 16px; }
.ccseo-final__inner { max-width: 900px; margin: 0 auto; }
.ccseo-final h2 { margin: 0 0 6px; font-size: clamp(26px, 4vw, 44px); font-weight: 800; }
.ccseo-final p  { margin: 0 0 14px; opacity: .9; }
.ccseo-final__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ccseo-video2__wrap { position: relative; }

/* ==========================
   Mobile full-bleed & cards
   ========================== */
@media (max-width: 640px) {
  .ccseo-hero,
  .ccseo-pack,
  .ccseo-social,
  .ccseo-compare,
  .ccseo-faq,
  .ccseo-final {
    width: 100dvw !important;
    margin-left:  calc(50% - 50dvw) !important;
    margin-right: calc(50% - 50dvw) !important;
  }
  .ccseo-hero--opt { min-height: 560px; }
  .ccseo-hero { padding: 5rem 1rem 4rem; }
  .ccseo-card { padding: 18px; border-radius: 16px; }
}

/* ==========================
   Rotating phrases in the H1
   ========================== */
.ccseo-rotate {
  display: inline-block;
  position: relative;
  vertical-align: top;
  margin-left: .25em;
  min-width: 11ch; /* keeps the title from jumping as words change */
}
.ccseo-rotate > span {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(6px);
  animation: ccseoRotate 14s infinite both; /* add fill-mode */
  will-change: opacity, transform;
}
/* Stagger each phrase’s start time */
.ccseo-rotate > span:nth-child(1) { animation-delay: 0s; }
.ccseo-rotate > span:nth-child(2) { animation-delay: 3.5s; }
.ccseo-rotate > span:nth-child(3) { animation-delay: 7s; }
.ccseo-rotate > span:nth-child(4) { animation-delay: 10.5s; }

@keyframes ccseoRotate {
  0%   { opacity: 0; transform: translateY(6px); }
  3%   { opacity: 1; transform: translateY(0); }
  21%  { opacity: 1; transform: translateY(0); }
  25%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; }
}


 


/* ----- Crash Course SEO Optimizer: contrast fixes ----- */
.ccseo-tool-wrapper { background: #0b1120 !important; color: #f1f5f9 !important; }
/* All text inside */
.ccseo-tool-wrapper h1,
.ccseo-tool-wrapper h2,
.ccseo-tool-wrapper h3,
.ccseo-tool-wrapper p,
.ccseo-tool-wrapper label,
.ccseo-tool-wrapper .row,
.ccseo-tool-wrapper .ccseo-result { color: #e5e7eb !important; }
/* Inputs + textarea */
#ccseo-token,
#ccseo-content {
  background: #111827 !important;
  color: #f8fafc !important;
  border: 1px solid #1f2937 !important;
  caret-color: #f8fafc !important;
}
/* Placeholder color */
#ccseo-token::placeholder,
#ccseo-content::placeholder { color: #94a3b8 !important; opacity: 1; }
/* Checkbox label */
#ccseo-create-post + label,
.ccseo-form label { color: #e5e7eb !important; }
/* Submit button */
#ccseo-submit { background: #e00000 !important; color: #ffffff !important; }
/* Output area */
#ccseo-result {
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border: 1px solid #1e293b !important;
}
/* Links in dark card */
.ccseo-tool-wrapper a { color: #93c5fd !important; }
.ccseo-tool-wrapper a:hover { color: #bfdbfe !important; }

/* ----- Fix schema JSON code box contrast ----- */
.ccseo-tool-wrapper pre,
.ccseo-tool-wrapper code {
  background: #111827 !important;
  color: #f8fafc !important;
  border: 1px solid #1f2937 !important;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  white-space: pre-wrap;
  word-break: break-word;
  display: block;
}

/* ===== Animated blog hero for the Posts page ===== */
.blog .site-main .page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 24px auto;
  padding: clamp(42px, 8vw, 96px) 20px;
  border-radius: 16px;
  max-width: 1100px;
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
}
.blog .site-main .page-header::before {
  content: "";
  position: absolute; inset: -10%;
  background:
    radial-gradient(800px 320px at 8% 0%, rgba(221,184,61,.18), rgba(224,0,0,.12) 40%, transparent 70%),
    linear-gradient(120deg, #0b1220 0%, #0f172a 40%, #0b1220 100%);
  background-size: 160% 160%, 100% 100%;
  animation: ccseoBg 14s ease-in-out infinite alternate;
  z-index: -1;
}
.blog .site-main .page-header::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1; opacity: .08; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 20 20'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='1' cy='1' r='.5'/%3E%3Ccircle cx='10' cy='4' r='.4'/%3E%3Ccircle cx='18' cy='12' r='.35'/%3E%3C/g%3E%3C/svg%3E");
}
.blog .site-main .page-header .page-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(28px, 7vw, 56px);
  letter-spacing: .5px;
  line-height: 1.05;
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  animation: ccseoFadeUp .7s ease forwards .3s;
}
.blog .site-main .page-header .page-title span.ccseo-letter {
  display: inline-block;
  transform: translateY(14px) scale(.96);
  opacity: 0;
  animation: ccseoLetter .6s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--i) * 40ms + 280ms);
}

@keyframes ccseoBg {
  0%   { background-position: 0% 30%, 0 0; filter: saturate(1); }
  100% { background-position:100% 70%, 0 0; filter: saturate(1.15) brightness(1.02); }
}
@keyframes ccseoFadeUp { to { opacity: 1; transform: none; } }
@keyframes ccseoLetter {
  40%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .blog .site-main .page-header::before { animation: none; }
  .blog .site-main .page-header .page-title,
  .blog .site-main .page-header .page-title span.ccseo-letter {
    animation: none; opacity: 1; transform: none;
  }
}

/* Featured image (hero) — clamp height + crop */
.single-post .qodef-blog-single .qodef-e-media,
.single-post .eltdf-post-image,
.single-post .eltdf-blog-holder article .eltdf-post-image {
  height: clamp(220px, 40vh, 420px) !important;
  overflow: hidden !important;
  margin: 0 auto 28px !important;
  border-radius: 14px !important;
}
.single-post .qodef-blog-single .qodef-e-media img,
.single-post .eltdf-post-image img,
.single-post .eltdf-blog-holder article .eltdf-post-image img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important; /* move focal point if needed */
  display: block !important;
}

/* Hide the "BLOG" strip/title bar (optional) */
.single-post .qodef-page-title,
.single-post .qodef-page-title-holder,
.single-post .eltdf-page-title,
.single-post .eltdf-title-holder { display: none !important; }

.blurred { filter: blur(8px); pointer-events: none; user-select: none; }
#gate-msg {
  margin: 16px 0;
  padding: 10px 12px;
  background: #0f172a;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
}


/* Buttons (reused site-wide) */
.ccseo-btn2--primary {
  background: linear-gradient(135deg, #c80000, var(--cc-accent, #ff4d4d));
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.ccseo-btn2--ghost {
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

/* Rotating phrases inside hero */
.ccseo-hero-video .ccseo-rotate {
  display: inline-block;
  position: relative;
  vertical-align: top;
  margin-left: .25em;
  min-width: 11ch;
  white-space: nowrap;
  height: 1em;
  color: var(--cc-gold, #ffcc00);
  font-weight: 800;
}

/* ===== KEEP Alternative hero sizing variant ===== */
.ccseo-hero-video {
  position: relative;
  width: 100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  /* Remove the forced clamp height */
  min-height: auto !important;
  height: auto !important;
  padding: 0 !important;
}

/*KEEP Background video */
.ccseo-hero-video__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ccseo-hero-video__bg iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;              /* 16:9 ratio */
  min-height: 100vh; min-width: 177.77vh;     /* keep cover on tall screens */
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -2;
  filter: saturate(1) contrast(1.05) brightness(.85);
}

/*KEEP  Overlay scrim */
.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,.70) 100%),
    linear-gradient(180deg, rgba(2,6,23,.45), rgba(2,6,23,.65));
}

/* KEEP Inner content */
.ccseo-hero-video__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 8vh, 96px) 16px;
  text-align: center;
}
.ccseo-hero-video__title {
  font-size: clamp(34px, 6vw, 68px);
  line-height: 1.03;
  font-weight: 800;
  margin: 6px 0 12px;
  color: #fff;
}
.ccseo-hero-video__sub {
  font-size: clamp(16px, 1.4vw, 20px);
  opacity: .92;
  margin: 0 0 18px;
}
.ccseo-hero-video__cta {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* Buttons */
.ccseo-btn2--primary { background: linear-gradient(135deg, #c80000, var(--cc-accent)); color: #fff; }
.ccseo-btn2--ghost   { background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.18); }

/* Rotating phrases */
.ccseo-hero-video .ccseo-rotate {
  display: inline-block; position: relative; vertical-align: top;
  margin-left: .25em; min-width: 11ch; white-space: nowrap; height: 1em;
  color: var(--cc-gold); font-weight: 800;
}
.ccseo-hero-video .ccseo-rotate > span {
  position: absolute; inset: 0; opacity: 0; transform: translateY(6px);
  animation: ccseoRotate 14s infinite both;
}
.ccseo-hero-video .ccseo-rotate > span:nth-child(1) { animation-delay: 0s; }
.ccseo-hero-video .ccseo-rotate > span:nth-child(2) { animation-delay: 3.5s; }
.ccseo-hero-video .ccseo-rotate > span:nth-child(3) { animation-delay: 7s; }
.ccseo-hero-video .ccseo-rotate > span:nth-child(4) { animation-delay: 10.5s; }

@keyframes ccseoRotate {
  0%   { opacity: 0; transform: translateY(6px); }
  3%   { opacity: 1; transform: translateY(0); }
  21%  { opacity: 1; transform: translateY(0); }
  25%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; }
}



/* ===== MOBILE ===== */
@media (max-width: 680px) {
  .ccseo-hero-video__bg iframe { width: 177.78vh; height: 100vh; }
  .ccseo-hero-video__inner     { padding: 64px 20px; }
  .ccseo-hero-video__title     { font-size: 2rem; }
  .ccseo-hero-video__sub       { font-size: 1rem; }
}

/* Reset any VC spacing that creates big dark gap */
.ccseo-hero-video .wpb_row,
.ccseo-hero-video .vc_row,
.ccseo-hero-video .ccseo-hero-video,
.ccseo-hero-video .vc_column_container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Full-viewport panel */
.ccseo-hero-video {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw); /* full-bleed */
  min-height: 100vh !important;  /* full screen height */
  padding: 0;                    /* no extra height from padding */
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

/* Move the TEXT down from under the header (not the section height) */
.ccseo-hero-video__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 1200px; margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) 16px 32px; /* top pad only affects content */
  text-align: center;
}






/* =========================================================
   Admin bar safety (when logged in)
   ========================================================= */
@media (min-width: 783px) {
  body.admin-bar .ccseo-hero-video {
    margin-top: -32px;
    padding-top: 32px;
  }
}

/* Kill ALL extra space in hero */
#top.ccseo-hero-video,
#top.ccseo-hero-video .wpb_row,
#top.ccseo-hero-video .vc_row,
#top.ccseo-hero-video .vc_column_container {
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure hero itself fills viewport only */
#top.ccseo-hero-video {
  min-height: 100vh !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Center inner content cleanly */
#top.ccseo-hero-video .ccseo-hero-video__inner {
  margin: 0 auto;
  padding: 0 !important;
  max-width: 1200px;
  text-align: center;
}



/*keep this do not dispose this is the sizing of the home page video*/
section#top.ccseo-hero-video .ccseo-hero-video__bg iframe {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw !important;
  height: 56.25vw !important;      /* full frame visible */
  border: 0;
  object-fit: contain;              /* guard iframes that support it */
  pointer-events: none;
  z-index: -1;
}



/* =========================================================
   KEEP THIS its the WHAT IS SEO VIDEO header size. HERO — FORCE CONTAIN (show full 16:9)
   ========================================================= */
section#top.ccseo-hero-video {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  height: 56.25vw !important;     /* 16:9 of the viewport width */
  min-height: 520px !important;    /* keeps it tall enough on small laptops */
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

/* Centered content: no extra vertical padding that adds “mystery gap” */
section#top.ccseo-hero-video .ccseo-hero-video__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 4vh, 48px) 16px;
  text-align: center;
}

/* Phones: keep full frame, but don’t let it collapse too short */
@media (max-width: 680px) {
  section#top.ccseo-hero-video {
    min-height: 60vh !important;
    height: auto !important;
  }
  section#top.ccseo-hero-video .ccseo-hero-video__bg iframe {
    width: 100vw !important;
    height: 56.25vw !important;
  }
}

/* =========================================================
   OPTIMIZE PAGE — SINGLE SOURCE HERO (drop-in)
   ========================================================= */
.ccseo-hero--opt {
  /* knobs */
  --hero-overscan: 1.12; /* 1.08–1.22 zoom of bg video */
  --video-nudge: 0px;    /* + moves video down, – moves up */

  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 100dvh; /* full viewport, mobile-safe */
  padding: 0;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

/* Background video layer (always behind, never blocks clicks) */
.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));  /* 16:9 cover */
  height: calc(max(56.25vw, 100vh) * var(--hero-overscan));
  border: 0;
  object-fit: cover;
  filter: saturate(1) contrast(1.05) brightness(.88);
}

/* Soft readability scrim */
.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));
}

/* Text/content area (safe above video/scrim) */
.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;
}

/* If you put any inputs inside hero, keep them legible on dark bg */
.ccseo-hero--opt .ccseo-hero-video__inner input,
.ccseo-hero--opt .ccseo-hero-video__inner textarea,
.ccseo-hero--opt .ccseo-hero-video__inner select {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
.ccseo-hero--opt .ccseo-hero-video__inner ::placeholder {
  color: rgba(255,255,255,.75);
}

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

/* =========================================================
   FORM SECTION (below hero, styles AROUND not INSIDE plugin)
   ========================================================= */
.optv2--plain {
  background: linear-gradient(180deg, #0b1222 0%, #0b1222 32%, #0e162a 100%);
  color: #e8edf7;
}
.optv2--plain .optv2__wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 16px 80px;
}
@media (max-width: 860px) {
  .optv2--plain .optv2__wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Field polish without renaming plugin selectors */
.optv2--plain :where(
  input[type="text"],
  input[type="url"],
  input[type="email"],
  input[type="search"],
  textarea,
  select
) {
  width: 100%;
  background: #0f1a32;
  color: #f5f7ff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 12px 14px;
  box-sizing: border-box;
}
.optv2--plain :where(button[type="submit"], input[type="submit"]) {
  width: 100%;
  display: block;
  border-radius: 12px;
  font-weight: 700;
  padding: 14px 18px;
}

/* Make sure nothing steals clicks */
.ccseo-hero--opt .ccseo-hero-video__bg,
.ccseo-hero--opt .ccseo-hero-video__scrim {
  pointer-events: none;
}

/* Keep paywall blur ONLY where you expect it */
#paywall.blurred {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}


/* ============================================================
   CRASH COURSE SEO — BLOG / ARCHIVE / SINGLE POST POLISH
   Scope: .blog / .archive / .single-post only
   ============================================================ */
   
   
   /* ===== Animated blog hero for the Posts page ===== */
.blog .site-main .page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 24px auto;
  padding: clamp(42px, 8vw, 96px) 20px;
  border-radius: 16px;
  max-width: 1100px;
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
}
.blog .site-main .page-header::before {
  content: "";
  position: absolute; inset: -10%;
  background:
    radial-gradient(800px 320px at 8% 0%, rgba(221,184,61,.18), rgba(224,0,0,.12) 40%, transparent 70%),
    linear-gradient(120deg, #0b1220 0%, #0f172a 40%, #0b1220 100%);
  background-size: 160% 160%, 100% 100%;
  animation: ccseoBg 14s ease-in-out infinite alternate;
  z-index: -1;
}
.blog .site-main .page-header::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1; opacity: .08; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 20 20'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='1' cy='1' r='.5'/%3E%3Ccircle cx='10' cy='4' r='.4'/%3E%3Ccircle cx='18' cy='12' r='.35'/%3E%3C/g%3E%3C/svg%3E");
}
.blog .site-main .page-header .page-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(28px, 7vw, 56px);
  letter-spacing: .5px;
  line-height: 1.05;
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  animation: ccseoFadeUp .7s ease forwards .3s;
}
.blog .site-main .page-header .page-title span.ccseo-letter {
  display: inline-block;
  transform: translateY(14px) scale(.96);
  opacity: 0;
  animation: ccseoLetter .6s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--i) * 40ms + 280ms);
}

@keyframes ccseoBg {
  0%   { background-position: 0% 30%, 0 0; filter: saturate(1); }
  100% { background-position:100% 70%, 0 0; filter: saturate(1.15) brightness(1.02); }
}
@keyframes ccseoFadeUp { to { opacity: 1; transform: none; } }
@keyframes ccseoLetter {
  40%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .blog .site-main .page-header::before { animation: none; }
  .blog .site-main .page-header .page-title,
  .blog .site-main .page-header .page-title span.ccseo-letter {
    animation: none; opacity: 1; transform: none;
  }
}
   
   
   

/* ---------- Archive grid (VC Basic Grid & theme loop) ---------- */
.blog .vc_basic_grid .vc_pageable-slide-wrapper,
.archive .vc_basic_grid .vc_pageable-slide-wrapper,
.blog .eltdf-blog-holder.eltdf-blog-standard .eltdf-blog-holder-inner,
.archive .eltdf-blog-holder.eltdf-blog-standard .eltdf-blog-holder-inner{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(280px,1fr)) !important;
  gap:20px !important;
  margin:32px auto !important;
  max-width:1200px !important;
  width:100% !important;
}

/* Kill inline floats/widths so grid can do its job */
.blog .vc_basic_grid .vc_grid-item,
.archive .vc_basic_grid .vc_grid-item,
.blog .eltdf-blog-holder.eltdf-blog-standard article,
.archive .eltdf-blog-holder.eltdf-blog-standard article{
  float:none !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
}

/* Real “card” look (shared by both grids) */
.blog .vc_basic_grid .vc_grid-item,
.archive .vc_basic_grid .vc_grid-item,
.blog .eltdf-blog-holder.eltdf-blog-standard article,
.archive .eltdf-blog-holder.eltdf-blog-standard article{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .25s ease;
}
.blog .vc_basic_grid .vc_grid-item:hover,
.archive .vc_basic_grid .vc_grid-item:hover,
.blog .eltdf-blog-holder.eltdf-blog-standard article:hover,
.archive .eltdf-blog-holder.eltdf-blog-standard article:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}

/* Featured image (top, 16:9, zoom on hover) */
.blog .vc_basic_grid .vc_gitem-zone-a,
.archive .vc_basic_grid .vc_gitem-zone-a,
.blog .eltdf-post-image,
.archive .eltdf-post-image{
  aspect-ratio:16/9;
  overflow:hidden !important;
  border-radius:14px 14px 0 0 !important;
}
.blog .vc_basic_grid .vc_gitem-zone-a img,
.archive .vc_basic_grid .vc_gitem-zone-a img,
.blog .eltdf-post-image img,
.archive .eltdf-post-image img{
  width:100% !important; height:100% !important; object-fit:cover !important;
  display:block !important; transition:transform .35s ease;
}
.blog .vc_basic_grid .vc_grid-item:hover .vc_gitem-zone-a img,
.archive .vc_basic_grid .vc_grid-item:hover .vc_gitem-zone-a img,
.blog .eltdf-blog-holder.eltdf-blog-standard article:hover .eltdf-post-image img,
.archive .eltdf-blog-holder.eltdf-blog-standard article:hover .eltdf-post-image img{
  transform:scale(1.05);
}

/* Meta, title, excerpt spacing */
.blog .vc_basic_grid .vc_gitem-post-meta,
.archive .vc_basic_grid .vc_gitem-post-meta{ font-size:13px; color:#6b7280; margin:12px 16px 6px; }
.blog .vc_basic_grid .vc_gitem-zone-b h4,
.archive .vc_basic_grid .vc_gitem-zone-b h4{ font-size:1.1rem; font-weight:700; margin:0 16px 8px; line-height:1.35; color:#0f172a; }
.blog .vc_basic_grid .vc_gitem-post-data,
.archive .vc_basic_grid .vc_gitem-post-data{ font-size:14px; color:#374151; margin:0 16px 12px; flex-grow:1; }

/* “Read more” button (keeps your gradient) */
.blog .vc_basic_grid .vc_btn3,
.archive .vc_basic_grid .vc_btn3{
  display:block; margin:12px 16px 16px; padding:10px 14px; border-radius:10px; font-weight:700;
  background:linear-gradient(135deg,#c80000,#e00000); color:#fff !important; text-align:center;
  box-shadow:0 8px 22px rgba(224,0,0,.25); transition:all .2s ease;
}
.blog .vc_basic_grid .vc_btn3:hover,
.archive .vc_basic_grid .vc_btn3:hover{
  filter:saturate(1.1); box-shadow:0 10px 28px rgba(224,0,0,.35); transform:translateY(-2px);
}

/* Center the page content area like the home page */
.blog .eltdf-container-inner,
.archive .eltdf-container-inner,
.single-post .eltdf-content .eltdf-content-inner{
  max-width:1120px !important; margin-inline:auto !important; padding-inline:16px !important;
}

/* ---------- Breakpoints (3 → 2 → 1) ---------- */
@media (max-width:1100px){
  .blog .vc_basic_grid .vc_pageable-slide-wrapper,
  .archive .vc_basic_grid .vc_pageable-slide-wrapper,
  .blog .eltdf-blog-holder.eltdf-blog-standard .eltdf-blog-holder-inner,
  .archive .eltdf-blog-holder.eltdf-blog-standard .eltdf-blog-holder-inner{
    grid-template-columns:repeat(2, minmax(280px,1fr)) !important;
  }
}
@media (max-width:680px){
  .blog .vc_basic_grid .vc_pageable-slide-wrapper,
  .archive .vc_basic_grid .vc_pageable-slide-wrapper,
  .blog .eltdf-blog-holder.eltdf-blog-standard .eltdf-blog-holder-inner,
  .archive .eltdf-blog-holder.eltdf-blog-standard .eltdf-blog-holder-inner{
    grid-template-columns:1fr !important;
  }
}












/* Archive/Posts page hero – never match the Home page */
.blog:not(.home) .site-main .page-header { 
  /* keep your existing rules here */
}
.blog:not(.home) .site-main .page-header .page-title { 
  /* keep your existing rules here */
}

/* Full-bleed stage & container polish – archives only */
.blog:not(.home) .eltdf-container,
.archive .eltdf-container { background: transparent !important; padding: 0 !important; }
.blog:not(.home) .eltdf-content,
.archive .eltdf-content { position: relative; background: transparent !important; }
.blog:not(.home) .eltdf-content::before,
.archive .eltdf-content::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(219,0,0,.18), transparent 60%),
    radial-gradient(900px 500px at 80% 12%, rgba(221,184,61,.12), transparent 60%),
    linear-gradient(180deg, #0b1320 0%, #0f1e33 45%, #0f172a 100%);
}
.blog:not(.home) .eltdf-container-inner,
.archive .eltdf-container-inner { position:relative; z-index:1; }


/* ===== Single Post — sectioning & transitions (CLEAN) ===== */

/* Divider BEFORE nav (exclude nav so card doesn’t get a seam) */
.single-post .post-navigation,
.single-post .eltdf-post-info-bottom {
  margin: 36px 0 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

/* Navigation as a card */
.single-post .eltdf-blog-single-navigation{
  max-width: 920px;
  margin: 36px auto 28px;
  padding: 0;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08), 0 22px 46px rgba(0,0,0,.10);
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .2s ease, box-shadow .28s ease;
}
.single-post .eltdf-blog-single-navigation:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,.12), 0 34px 64px rgba(0,0,0,.16);
}
.single-post .eltdf-blog-single-navigation-inner.clearfix{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px; padding: 16px 18px !important;
}
.single-post .eltdf-blog-single-navigation-inner.clearfix > span{
  flex: 0 0 auto; font-size: 13px; font-weight: 600; color:#6b7280;
  padding: 8px 12px; background: #f3f4f6;
  border: 1px solid rgba(0,0,0,.06); border-radius: 999px;
}
.single-post .eltdf-blog-single-navigation a{
  display:inline-flex; align-items:center; gap:10px; max-width: 38%;
  padding: 12px 14px; text-decoration:none; font-weight:700; line-height:1.25;
  color:#0f172a; background:#ffffff; border:1px solid rgba(0,0,0,.06); border-radius:12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .2s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.single-post .eltdf-blog-single-navigation a:first-of-type::before{ content:"←"; font-weight:900; opacity:.7; }
.single-post .eltdf-blog-single-navigation a:last-of-type::after{  content:"→"; font-weight:900; opacity:.7; }
.single-post .eltdf-blog-single-navigation a small{ display:block; font-weight:600; font-size:11px; color:#6b7280; }
.single-post .eltdf-blog-single-navigation a:hover{
  transform: translateY(-2px);
  border-color: rgba(221,184,61,.55);
  box-shadow: 0 8px 18px rgba(0,0,0,.12), 0 0 16px rgba(221,184,61,.25);
}
@media (max-width: 780px){
  .single-post .eltdf-blog-single-navigation-inner.clearfix{ flex-wrap:wrap; row-gap:12px; }
  .single-post .eltdf-blog-single-navigation a{ max-width:100%; }
}

/* Comments intro + cards (merged) */
.single-post .eltdf-comment-holder{
  margin-top: 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #f8fafc 36%, #f8fafc 100%);
  padding-top: 20px;
}
.single-post .eltdf-comment-holder-inner{
  background:#ffffff; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  padding: 22px 22px 8px !important; margin: 0 auto 24px; position: relative;
}
.single-post .eltdf-comment-holder-inner::before{
  content:""; position:absolute; left:20px; right:20px; top:-12px; height:12px;
  border-radius:12px; background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0)); filter: blur(6px);
}
.single-post .comments-title,
.single-post #reply-title{ font-size:22px; font-weight:800; color:#111827; margin:0 0 12px; }
.single-post .comment-list > li{ border-bottom:1px solid #eef2f7; padding:14px 0; }
.single-post .comment-list > li:last-child{ border-bottom:0; }
.single-post .comment-respond{
  background:#ffffff; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  padding:22px !important; margin:18px 0 40px; position:relative;
}
.single-post .comment-respond::before{
  content:""; position:absolute; left:20px; right:20px; top:-12px; height:12px;
  border-radius:12px; background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0)); filter: blur(6px);
}
.single-post .comment-form input[type="text"],
.single-post .comment-form input[type="email"],
.single-post .comment-form input[type="url"],
.single-post .comment-form textarea{
  width:100%; background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px;
  padding:12px 14px; font-size:16px; outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.single-post .comment-form textarea{ min-height:160px; }
.single-post .comment-form input:focus,
.single-post .comment-form textarea:focus{ border-color:#ddb83d; box-shadow:0 0 0 3px rgba(221,184,61,.2); }
.single-post .comment-form input[type="submit"]{
  background:#e00000; color:#fff; border:0; border-radius:12px; padding:12px 18px; font-weight:700; cursor:pointer;
  box-shadow:0 4px 12px rgba(224,0,0,.35); transition: transform .08s ease, box-shadow .18s ease;
}
.single-post .comment-form input[type="submit"]:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(224,0,0,.45); }
.single-post .site-main{
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #f8fafc 55.1%, #f8fafc 100%);
}

/* Single-post featured image: force the wrapper to span the content width */
.single-post .qodef-blog-single .qodef-e-media,
.single-post .eltdf-post-image,
.single-post .eltdf-blog-holder article .eltdf-post-image {
  width: 100% !important;
  max-width: 1120px !important;       /* match your content container */
  height: clamp(260px, 42vh, 480px) !important;
  display: block !important;
  float: none !important;              /* defeat any theme float */
  margin: 0 auto 28px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

/* Ensure the link (if present) fills the wrapper */
.single-post .qodef-blog-single .qodef-e-media > a,
.single-post .eltdf-post-image > a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Image fills the wrapper and crops nicely */
.single-post .qodef-blog-single .qodef-e-media img,
.single-post .eltdf-post-image img,
.single-post .eltdf-blog-holder article .eltdf-post-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
  display: block !important;
}

/* OPTIMIZE page — remove theme’s white stage */
.page-id-3887 .eltdf-container,
.page-id-3887 .eltdf-container-inner,
.page-id-3887 .eltdf-content,
.page-id-3887 .eltdf-page-content-holder,
.page-id-3887 .eltdf-full-width {
  background: transparent !important;
}

/* Dark stage behind everything on Optimize */
.page-id-3887 .eltdf-content::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(219,0,0,.18), transparent 60%),
    radial-gradient(900px 500px at 80% 12%, rgba(221,184,61,.12), transparent 60%),
    linear-gradient(180deg, #0b1320 0%, #0f1e33 45%, #0f172a 100%);
}
.page-id-3887 .eltdf-container-inner { position: relative; z-index: 1; }