/* ==========================================================
   Schema Markup Tester — Futuristic Glass + Code Editor (EaseFy)
   - Glass card + holographic micro-border + noise grain
   - Code-like textarea (monospace, scanlines, gutter)
   - Tiny toolbar (Paste / Beautify / Copy / Clear)
   - Analyze button: brown→coral gradient, sticky bottom-right
   - Result panels with glass badges (good / warn / error)
   - Extra: focus-reactive CTA pulse, parallax tilt, neon scrollbar
   ========================================================== */

/* ---------- Tokens ---------- */
:root{
  --brand:#663d29;        /* EaseFy brown */
  --accent:#da926e;       /* Coral neon */
  --muted:#b59d55;        /* Gold */
  --bg:#f8f4f0;           /* Canvas */
  --ink:#3a2a22;

  --glass:rgba(255,250,243,.42);
  --glass-border:rgba(255,255,255,.38);
  --glass-shadow:0 10px 30px rgba(102,61,41,.18), inset 0 1px 0 rgba(255,255,255,.35);
  --glow:0 0 0 1px rgba(218,146,110,.22), 0 0 36px rgba(218,146,110,.22);

  --radius:18px;
  --pad:18px;
  --gutter:64px;          /* “line number” gutter width look */
}

/* ---------- Card around the editor ---------- */
#schemaForm{
  position:relative;
  isolation:isolate;                  /* allows stacked pseudo-layers */
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:
    var(--glass-shadow),
    var(--glow),
    inset 0 0 0 1px rgba(218,146,110,.24),
    0 0 24px rgba(218,146,110,.12);
  backdrop-filter: blur(14px) saturate(130%);
  padding: calc(var(--pad) + 6px);
  will-change: transform;
}

/* 1) Holographic micro-border + noise */
#schemaForm::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background:
    linear-gradient(140deg, #fff0, #da926e33 20%, #b59d5522 55%, #fff0 85%),
    linear-gradient(0deg, #ffffffb3, #ffffff66);
  filter:saturate(120%);
}
#schemaForm::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.02'/></feComponentTransfer></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay; opacity:.6;
}

/* 4) Subtle parallax tilt on the card */
@media (hover:hover){
  #schemaForm{ transition: transform .25s ease; transform-style:preserve-3d; }
  #schemaForm:hover{ transform:perspective(1000px) rotateX(1.1deg) rotateY(-1.1deg); }
}

/* ---------- Tiny toolbar (place above the textarea) ---------- */
/* Example HTML:
   <div class="schema-toolbar">
     <button class="schema-tool" id="pasteSchemaBtn">Paste sample</button>
     <button class="schema-tool" id="beautifySchemaBtn">Beautify</button>
     <button class="schema-tool" id="copySchemaBtn">Copy</button>
     <button class="schema-tool" id="clearSchemaBtn">Clear</button>
   </div>
*/
.schema-toolbar{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.6rem; }
.schema-tool{
  background:linear-gradient(180deg,#e6c1b1,#d39a84);
  color:#5a3728; border:1px solid rgba(255,255,255,.35);
  border-radius:10px; padding:.35rem .7rem; font-weight:700; font-size:.85rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 6px 12px rgba(102,61,41,.08);
  transition:transform .12s ease, filter .12s ease;
}
.schema-tool:hover{ transform:translateY(-1px); filter:brightness(1.03); }

/* ---------- Textarea => code editor feel ---------- */
#schemaInput{
  width:100%;
  min-height:380px;
  resize:vertical;
  font: 500 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color:var(--ink);
  tab-size: 2;
  border:1px solid var(--glass-border);
  border-radius:14px;
  padding:14px 16px 14px calc(var(--gutter) + 16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  caret-color:#7a4a35;

  /* Layers: soft paper, row scanlines, left gutter band */
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,250,243,.58)),
    repeating-linear-gradient(0deg, #0000 0 28px, rgba(0,0,0,.06) 28px 29px),
    linear-gradient(90deg, rgba(122,74,53,.10) var(--gutter), transparent var(--gutter));
}
#schemaInput::placeholder{ color:#a48778; }
#schemaInput:focus{
  outline:0;
  border-color:#e4c2b3;
  box-shadow:
    0 0 0 3px rgba(218,146,110,.22),
    0 0 0 6px rgba(218,146,110,.12),
    inset 0 1px 0 rgba(255,255,255,.65);
}

/* 5) Neon scrollbar (textarea only) */
#schemaInput::-webkit-scrollbar{ width:12px; }
#schemaInput::-webkit-scrollbar-track{ background:transparent; }
#schemaInput::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg,#7a4a35,#da926e);
  border-radius:8px;
  border:3px solid transparent; background-clip:padding-box;
  box-shadow: 0 0 12px rgba(218,146,110,.35) inset;
}

/* 3) Numbered gutter overlay (simple, fill with JS) */
.schema-gutter{
  position:absolute; top:calc(var(--pad) + 56px); /* just below toolbar */
  left:calc(var(--pad) + 10px);
  width:calc(var(--gutter) - 20px);
  bottom:calc(var(--pad) + 56px);
  color:#9f806f; font:600 12px/28px ui-monospace, monospace;
  pointer-events:none; text-align:right; opacity:.75;
}

/* ---------- Analyze button: brand gradient + sticky to bottom-right ---------- */
#schemaForm .easefy-btn{
  position:absolute; right:var(--pad); bottom:var(--pad);
  background:linear-gradient(180deg,#7a4a35 0%, #633924 52%, #da926e 120%);
  color:#fff; border:1px solid rgba(255,255,255,.35);
  border-radius:12px; padding:.6rem 1.05rem; font-weight:800; letter-spacing:.2px;
  box-shadow:0 10px 22px rgba(102,61,41,.24), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* 2) CTA: focus-reactive pulse when the textarea is focused */
#schemaInput:focus ~ .easefy-btn{
  animation:ctaPulse 2.2s ease-in-out infinite;
}
@keyframes ctaPulse{
  0%,100%{ box-shadow:0 10px 22px rgba(102,61,41,.24), 0 0 0 0 rgba(218,146,110,.22); }
  50%     { box-shadow:0 16px 30px rgba(102,61,41,.28), 0 0 0 10px rgba(218,146,110,.10); }
}

#schemaForm .easefy-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(102,61,41,.28);
  filter:saturate(1.02);
}

/* On mobile, keep the button inline so it doesn't overlap the textarea */
@media (max-width: 576px){
  #schemaForm .easefy-btn{ position:static; margin-top:.75rem; display:inline-flex; }
}

/* ---------- Results panel ---------- */
/* Use:
   <div id="schemaResult">
     <div class="schema-result good">Valid JSON-LD</div>
     <div class="schema-result warn">Missing recommended property …</div>
     <div class="schema-result bad">Syntax error …</div>
   </div>
*/
#schemaResult{
  margin-top:1rem;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:14px;
  padding:14px;
  box-shadow:var(--glass-shadow);
  backdrop-filter: blur(10px) saturate(120%);
}
.schema-result{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .75rem; border-radius:10px; font-weight:700; margin:.35rem 0;
  color:#fff;
}
.schema-result::before{
  content:""; width:10px; height:10px; border-radius:50%;
  box-shadow:0 0 10px currentColor;
}
.schema-result.good{
  background:linear-gradient(180deg,#31d087,#22a86a);
}
.schema-result.warn{
  background:linear-gradient(180deg,#ffd27a,#e8b243);
  color:#4a3515;
}
.schema-result.bad{
  background:linear-gradient(180deg,#ff8b8b,#e35f5f);
}

/* ---------- Page header tweaks ---------- */
h1{ color:var(--brand); font-weight:900; letter-spacing:.2px; }
.text-muted{ color:#7a5a4bcc !important; }

/* ==========================================================
   AI Overview Visibility Checker (brand-aligned)
   ========================================================== */
#aiOverviewChecker {
  border-left: 4px solid var(--brand);
  padding-left: 1.5rem;
  margin-top: 2rem;
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}
#aiOverviewChecker h6 {
  color: var(--brand);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
#aiOverviewChecker .badge.bg-primary {
  background-color: #e3c56b;
  color: var(--brand);
  font-weight: 600;
}
#aiOverviewChecker p.text-muted { color: #6c757d; font-size: .95rem; margin-bottom: 1rem; }
#aiOverviewChecker .border {
  border: 1px solid var(--muted);
  border-left: 4px solid #b97c5d;
  padding: 1rem;
  border-radius: 10px;
  background: rgba(255,250,243,.6);
  backdrop-filter: blur(8px);
}
#aiRegisteredDomain { font-size: 1rem; color: #b97c5d; }
#checkAiBtn{
  background:linear-gradient(180deg,#7a4a35,#633924);
  color:#fff; border:none; padding:.55rem 1.1rem;
  border-radius:10px; font-weight:800;
  transition:.2s ease;
}
#checkAiBtn:hover{ filter:brightness(1.04); }

/* ---------- Base EaseFy button (fallback outside the schema card) ---------- */
.easefy-btn{
  background-color: var(--brand);
  color:#fff; border:none; padding:12px 24px;
  font-size:16px; font-weight:700; border-radius:10px;
  transition: background-color .2s ease, transform .18s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.easefy-btn:hover{ background-color:#9a674d; transform:translateY(-1px); }
.easefy-btn:active{ background-color:#b97c5d; transform:translateY(0); }
/* ==========================================================
   Schema Markup Tester — FAQ (matches homepage glass style)
   Target block: <section id="schema-faq" aria-labelledby="schema-faq-title">
   ========================================================== */

/* Section heading (same width/gutters/center as homepage) */
section[aria-labelledby="schema-faq-title"] h2{
  width: min(var(--maxw), 100% - 2*var(--gutter));
  margin: 28px auto 12px;
  text-align:center;
}

/* Layout the list like stacked glass cards */
#schema-faq .faq-list{
  width: min(var(--maxw), 100% - 2*var(--gutter));
  margin-inline:auto;
  display:grid;
  gap: clamp(12px, 2.4vw, 20px);
}

/* Glass card base for each Q/A */
#schema-faq .faq-list details{
  position:relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(14px) saturate(130%);
  padding: var(--pad);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  will-change: transform, box-shadow;
}

/* Subtle neon edge like other cards */
#schema-faq .faq-list details::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(218,146,110,.28), 0 0 24px rgba(218,146,110,.18);
}

/* Micro-lift on hover (keep text contrast) */
#schema-faq .faq-list details:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(102,61,41,.22), inset 0 1px 0 rgba(255,255,255,.55);
  background: linear-gradient(180deg, rgba(255,250,243,.92), rgba(255,250,243,.66));
}

/* Open state = stronger surface + glow */
#schema-faq .faq-list details[open]{
  background: linear-gradient(180deg, rgba(255,250,243,.90), rgba(255,250,243,.65));
  box-shadow: var(--glass-shadow), 0 0 36px rgba(218,146,110,.22);
}

/* Summary (question row) */
#schema-faq .faq-list summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:center; gap:.75rem;
  margin:-.2rem 0 0;
  padding-right: 2.2rem; /* room for chevron */
  color:var(--brand);
  font-weight:800;
  letter-spacing:.2px;
  user-select:none;
}
#schema-faq .faq-list summary::-webkit-details-marker{ display:none; }

/* Chevron icon (rotates when open) */
#schema-faq .faq-list summary::after{
  content:"";
  position:absolute; right:16px; top: calc(var(--pad) - 2px);
  width: 18px; height: 18px; opacity:.9;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.35));
  transition: transform .18s ease, opacity .18s ease;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') center/contain no-repeat;
}
#schema-faq .faq-list details[open] summary::after{ transform: rotate(180deg); }

/* Focus ring (keyboard + a11y) */
#schema-faq .faq-list summary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(218,146,110,.35), 0 0 0 6px rgba(218,146,110,.18);
  border-radius: 12px;
}

/* Answer body */
#schema-faq .faq-list details > p{
  margin: .85rem 0 0;
  color: var(--ink);
  line-height:1.6;
  background: linear-gradient(180deg, rgba(255,250,243,.78), rgba(255,250,243,.52));
  border-radius: calc(var(--radius) - 6px);
  padding: clamp(10px, 1.6vw, 14px);
  animation: schemaFaqOpen .22s ease both;
}

/* Code/inline code readability */
#schema-faq .faq-list code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .92em;
  background: rgba(0,0,0,.06);
  padding: .08em .35em;
  border-radius: 6px;
}

/* Dark theme answer background */
[data-theme="dark"] #schema-faq .faq-list details > p{
  background: linear-gradient(180deg, rgba(31,28,26,.55), rgba(31,28,26,.38));
}

/* Open/close content motion */
@keyframes schemaFaqOpen{
  from { opacity:0; transform: translateY(-4px); }
  to   { opacity:1; transform: translateY(0); }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  #schema-faq .faq-list details,
  #schema-faq .faq-list summary::after{
    transition: none;
  }
  #schema-faq .faq-list details > p{
    animation: none;
  }
}

/* Compact on small screens */
@media (max-width: 576px){
  #schema-faq .faq-list{ gap: 12px; }
  #schema-faq .faq-list summary{ padding-right: 1.9rem; }
}