:root {
  --ohe-border: #e1e4e8;
  --ohe-text: #24292f;
  --ohe-muted: #57606a;
  --ohe-accent: #0969da;
  --ohe-radius: 20px;
  --ohe-shadow: 0 2px 8px rgba(140, 149, 159, 0.1);
  --ohe-pane-height: 520px;
}

.tool-section {
  display: flex;
  justify-content: center;
}

.ohe-app {
  width: 100%;
  max-width: 1200px;
}

.ohe-card {
  background: #ffffff;
  border: 1px solid var(--ohe-border);
  border-radius: var(--ohe-radius);
  padding: 20px;
  box-shadow: var(--ohe-shadow);
}

/* Prevent layout flashing during editor initialization.
   Keep space reserved but hide the card until HugeRTE has initialized and layout is synced. */
body.ohe-loading .ohe-card {
  visibility: hidden;
}

.ohe-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.ohe-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ─── Code pane mini-toolbar ─── */
.ohe-code-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(9, 105, 218, 0.04);
  border: 1px solid var(--ohe-border);
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid var(--ohe-border);
  position: relative;
}

/* Gear + Clean pill group */
.ohe-cbt-group {
  display: inline-flex;
  align-items: stretch;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(9, 105, 218, 0.3);
  flex-shrink: 0;
}

.ohe-cbt-btn {
  border: 0;
  background: var(--ohe-accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  height: 32px;
  padding: 0 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: filter 0.13s ease, transform 0.08s ease;
}

.ohe-cbt-btn svg {
  width: 14px;
  height: 14px;
  fill: #fff;
  display: block;
  flex-shrink: 0;
}

.ohe-cbt-btn--settings {
  width: 34px;
  padding: 0;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.ohe-cbt-btn--clean {
  min-width: 90px;
  justify-content: center;
}

.ohe-cbt-btn:hover { filter: brightness(0.9); }
.ohe-cbt-btn:active { transform: translateY(1px); }
.ohe-cbt-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* Vertical divider between group and icon buttons */
.ohe-cbt-vsep {
  display: block;
  width: 1px;
  height: 22px;
  background: var(--ohe-border);
  align-self: center;
  flex-shrink: 0;
  margin: 0 2px;
}

/* Copy / Clear icon+label buttons */
.ohe-cbt-icon-btn {
  height: 32px;
  min-width: 90px;
  max-width: 100%;
  border: 1px solid var(--ohe-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ohe-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 0 10px;
  font-weight: 600;
  font-size: 0.88rem;
  transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease, transform 0.08s ease;
}

.ohe-cbt-icon-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  display: block;
  flex-shrink: 0;
}

/* Copy button — light yellow */
#oheCopyBtn {
  background: #fffbea;
  border-color: #f0d060;
  color: #7a5c00;
}
#oheCopyBtn svg { fill: #7a5c00; }
#oheCopyBtn:hover {
  background: #fff3b0;
  border-color: #d4a800;
  color: #5a4200;
}

/* Clear button — red */
#oheClearBtn {
  background: #d1242f;
  border-color: #b01c26;
  color: #fff;
}
#oheClearBtn svg { fill: #fff; }
#oheClearBtn:hover {
  background: #b01c26;
  border-color: #8c151e;
  color: #fff;
}

.ohe-cbt-icon-btn:active { transform: translateY(1px); }
.ohe-cbt-icon-btn:focus-visible {
  outline: 2px solid var(--ohe-accent);
  outline-offset: 2px;
}

/* Inline confirmation feedback — absolutely positioned so it never shifts toolbar layout */
.ohe-cbt-feedback {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ohe-muted);
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--ohe-border);
  border-radius: 6px;
  padding: 3px 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.ohe-cbt-feedback.ohe-cbt-feedback--visible {
  opacity: 1;
}

.ohe-label {
  font-size: 0.85rem;
  color: var(--ohe-muted);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.ohe-hint {
  opacity: 0.85;
}

/* HugeRTE/TinyMCE container */
.ohe-pane .tox-tinymce {
  border-radius: 12px;
  border-color: var(--ohe-border);
  overflow: hidden;
}

/* Toolbar: remove the bottom divider under the last row */
.ohe-pane .tox .tox-toolbar-overlord,
.ohe-pane .tox .tox-toolbar__primary {
  border-bottom: 0 !important;
}

/* Keep initial textarea unobtrusive before init */
#editor {
  width: 100%;
  height: var(--ohe-pane-height);
  border-radius: 12px;
  border: 1px solid var(--ohe-border);
  padding: 12px;
}

.ohe-html {
  width: 100%;
  height: var(--ohe-pane-height);
  border-radius: 0 0 12px 12px;
  border: 1px solid var(--ohe-border);
  border-top: 0;
  padding: 12px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ohe-text);
  background: #ffffff;
  resize: vertical;
  outline: none;
}

.ohe-html:focus {
  border-color: var(--ohe-accent);
  box-shadow: 0 0 0 4px rgba(9, 105, 218, 0.18);
}

.ohe-footnote {
  margin: 12px 2px 0;
  color: var(--ohe-muted);
  font-size: 0.85rem;
}

.ohe-error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(209, 36, 47, 0.35);
  background: rgba(209, 36, 47, 0.07);
  color: #7a1a1d;
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .ohe-split {
    grid-template-columns: 1fr;
  }
}

/* ─── HugeRTE dialog: global fix ───
   The modal is appended to body > .tox.tox-tinymce-aux, outside any scoped element.
   Raise it above the sticky site header (z-index 999999) on all screen sizes
   and shift the dialog down so it never hides behind the header (~85px). */
.tox.tox-tinymce-aux {
  z-index: 1000010 !important;
}

.tox-dialog-wrap {
  padding-top: 90px !important;
  box-sizing: border-box;
  overflow-y: auto;
}

@media (max-width: 600px) {
  .ohe-code-toolbar {
    gap: 5px;
    padding: 6px 8px;
  }

  .ohe-cbt-vsep {
    display: none;
  }

  .ohe-cbt-btn--clean {
    min-width: unset;
  }

  .ohe-cbt-icon-btn {
    min-width: unset;
    flex: 1 1 auto;
  }

  .ohe-cbt-feedback {
    width: 100%;
    text-align: center;
  }

  /* Mobile: prevent horizontal scrolling while allowing wrapped toolbar rows to display. */
  .ohe-pane .tox .tox-editor-header,
  .ohe-pane .tox .tox-toolbar-overlord,
  .ohe-pane .tox .tox-toolbar,
  .ohe-pane .tox .tox-toolbar__primary {
    overflow-x: hidden !important;
  }

  /* ─── Cleanup settings popup: mobile fix ───
     HugeRTE appends the modal to a body-level <div class="tox tox-tinymce-aux">,
     which is outside the editor's own .tox node.
     Target that host + its children directly, and raise everything above the
     sticky site header (z-index 999999). */

  /* Push the wrap below the sticky header (85px) and keep a 12px bottom gap */
  .tox-dialog-wrap {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 90px 12px 12px !important;
    z-index: 1000010 !important;
    box-sizing: border-box;
    overflow-y: auto;
  }

  .tox-dialog-wrap__backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
  }

  .tox-dialog {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Never taller than what's available below the header */
    max-height: calc(100dvh - 110px) !important;
    margin: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28) !important;
  }

  .tox-dialog__header {
    flex-shrink: 0 !important;
    padding: 8px 12px !important;
  }

  .tox-dialog__title {
    font-size: 0.88rem !important;
  }

  /* The checkbox list: fixed height, always scrollable */
  .tox-dialog__body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 8px 12px !important;
    min-height: 0 !important;
    max-height: 46vh !important;
  }

  .tox-dialog__body-content {
    padding: 0 !important;
  }

  /* Tighten individual checkbox rows */
  .tox-form__group {
    margin-bottom: 4px !important;
  }

  .tox-checkbox__label {
    font-size: 0.82rem !important;
  }

  .tox-dialog__footer {
    flex-shrink: 0 !important;
    padding: 8px 12px !important;
  }
}

/* Force HugeRTE dialog to use the site default font (Heebo) instead of its own -apple-system stack */
.tox-dialog,
.tox-dialog__title,
.tox-dialog__body,
.tox-dialog__body-content,
.tox-dialog__footer,
.tox-checkbox__label,
.tox-label,
.tox-form__group,
.tox-button {
  font-family: inherit !important;
}

/* Fullscreen mode: site header is sticky with a very high z-index.
   When the editor goes fullscreen, hide header/footer and ensure the editor overlay is on top. */
body.ohe-fullscreen {
  overflow: hidden;
}

body.ohe-fullscreen #site-header,
body.ohe-fullscreen #site-footer {
  display: none !important;
}

body.ohe-fullscreen .tox.tox-tinymce.tox-fullscreen,
body.ohe-fullscreen .tox-fullscreen {
  z-index: 1000006 !important;
}

body.ohe-fullscreen .tox.tox-tinymce-aux,
body.ohe-fullscreen .tox .tox-dialog,
body.ohe-fullscreen .tox .tox-menu {
  z-index: 1000007 !important;
}

/* Remove the global container bottom gap for this tool page */
.main > .container {
  margin-bottom: 0;
}

/* --- Content article + FAQ (matches SERP Preview Tool styling) --- */
#oheContent .content-card {
  margin-top: 100px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#oheContent .content-card h2 {
  margin: 0 0 12px 0;
  color: black;
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
}
#oheContent .content-card h3 {
  margin: 18px 0 8px;
  color: black;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
}
#oheContent .content-card p {
  margin: 0 0 12px;
  color: black;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
}
#oheContent .content-card ol,
#oheContent .content-card ul {
  margin: 0 0 12px;
  padding-left: 26px;
  list-style-position: outside;
  color: black;
  line-height: 1.55;
}
#oheContent .content-card ul { list-style: disc; }
#oheContent .content-card ol { list-style: decimal; }
#oheContent .content-card li {
  margin: 0 0 8px;
  color: black;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  display: list-item;
  padding-left: 6px;
}

/* FAQ styles (scoped to OHE page) */
#oheContent .serp-faq.FaqSection .FaqTitle h2 { margin-bottom: 30px; }

#oheContent .serp-faq.first-faq-block .accordian-wrapper {
  background: linear-gradient(138deg, #fff0 0%, #fff0 100%);
  padding: .15rem;
  border-radius: 15px;
  position: relative;
}

#oheContent .serp-faq.first-faq-block .faq-boxes {
  background-color: #fff;
  backdrop-filter: blur(10px);
  padding: 0;
  border-radius: 15px;
  border: 2px solid #a200ff38;
}

#oheContent .serp-faq.first-faq-block .faq-boxes.active {
  background-color: #FBF4FF;
  border: 2px solid #A200FF;
}

#oheContent .serp-faq .accordion-body {
  padding: 0 15px 18px 22px;
  font-size: 20px;
  font-weight: 400;
  color: #000;
}

#oheContent .serp-faq .accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 18px 15px 18px 22px;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  background-color: #fff0;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease;
  cursor: pointer;
}

#oheContent .serp-faq .accordion-button h3 {
  font-weight: 600;
  font-size: 20px;
  margin: 0;
  line-height: 1.3;
}

#oheContent .serp-faq.first-faq-block .get-started-faq-inner .accordion .accordion-item .accordion-button:not(.collapsed)::before {
  border: 6px solid #c3dae7;
  background-color: #0582d2;
  top: 28%;
}

#oheContent .serp-faq .accordion-button:not(.collapsed) {
  color: #212529;
  background-color: #fff0;
  transition: 0.2s ease-in all;
  padding-bottom: 12px;
  border: 0;
  box-shadow: none;
}

#oheContent .serp-faq .accordion-button h3 { color: #000; }

#oheContent .serp-faq .accordion-button:focus {
  z-index: 3;
  border-color: #cecbdc;
  outline: 0;
  box-shadow: 0 0 0 .25rem #fff0;
}

#oheContent .serp-faq.first-faq-block .accordion-item {
  background-color: #fff0;
  border: 0 solid rgb(0 0 0 / .125);
  margin-bottom: 20px;
}

#oheContent .serp-faq.first-faq-block .accordion-body p {
  font-size: 16px;
  color: #000;
  font-weight: 400;
  margin-bottom: 0;
  padding-right: 11%;
  line-height: 26px;
}

#oheContent .serp-faq.first-faq-block .accordion-body p a {
  color: #4A2574;
  font-size: 18px;
  line-height: 32px;
  text-decoration: none;
  font-weight: 400;
}

#oheContent .serp-faq.first-faq-block .accordion-button:not(.collapsed)::after {
  content: "\2013";
  transform: none;
}

#oheContent .serp-faq.first-faq-block .accordion-button::after {
  margin-left: auto;
  content: "+";
  width: 24px;
  height: 24px;
  min-width: 24px;
  flex: 0 0 24px;
  align-self: center;
  margin-right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  color: #4A2574;
}

#oheContent .serp-faq .accordion-collapse { display: none; }
#oheContent .serp-faq .accordion-collapse.show { display: block; }

@media (max-width: 480px) {
  #oheContent .serp-faq.first-faq-block .faq-boxes { padding-right: 18px; }
}

/* Light theme only: add visible color accents to the tool UI.
   Keep this block at the end so it overrides the base rules above. */
@media (prefers-color-scheme: light) {
  .ohe-card {
    background: linear-gradient(180deg, rgba(9, 105, 218, 0.14) 0%, #ffffff 46%);
    border-color: rgba(9, 105, 218, 0.22);
  }

  .ohe-label {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(9, 105, 218, 0.08);
    border: 1px solid rgba(9, 105, 218, 0.18);
    margin-bottom: 10px;
  }

  .ohe-pane .tox-tinymce {
    border-color: rgba(9, 105, 218, 0.2);
  }

  .ohe-pane .tox .tox-editor-header {
    background: rgba(9, 105, 218, 0.05);
  }

  #editor,
  .ohe-html {
    border-color: rgba(9, 105, 218, 0.18);
  }

  .ohe-html {
    background: rgba(9, 105, 218, 0.02);
  }

  .ohe-code-toolbar {
    border-color: rgba(9, 105, 218, 0.18);
    background: rgba(9, 105, 218, 0.06);
  }

  .ohe-cbt-icon-btn {
    border-color: rgba(9, 105, 218, 0.18);
  }
}