/**
 * ScopeRight — WordPress content styling.
 *
 * Scoped to `.sr-wp-prose` (Gutenberg / classic-editor `the_content()` output)
 * and `.sr-wp-content` (the page wrapper in index.php / page.php). Applies the
 * ScopeRight design language — dark surface, Space Grotesk headings, Inter
 * body, primary blue links, accent-green buttons — to any page authored in
 * the WP admin without requiring manual CSS.
 *
 * Nothing here targets front-page.php, page-pricing.php, or the Hero island.
 */

/* --- Page shell ---------------------------------------------------------- */
body {
  background: var(--background, #07131c);
  color: var(--foreground, #f2f6f8);
}

/* --- Global background (matches homepage hero exactly) ------------------ */
.sr-wp-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--background, #07131c);
}
.sr-wp-bg-grid {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image:
    linear-gradient(var(--grid-line, rgba(255,255,255,0.06)) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line, rgba(255,255,255,0.06)) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
          mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}
.sr-wp-bg-gradient {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
}


.sr-wp-content {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 32px) 120px;
  color: var(--foreground, #f2f6f8);
}
.sr-wp-content.alignwide  { max-width: 1100px; }
.sr-wp-content.alignfull  { max-width: none; padding-left: 0; padding-right: 0; }

/* --- Article title (rendered by page.php/index.php header) --------------- */
.sr-wp-article > header h1 {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  color: var(--foreground, #f2f6f8);
}

/* --- Typography (scoped to prose) ---------------------------------------- */
.sr-wp-prose {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: color-mix(in oklab, var(--foreground, #f2f6f8) 88%, transparent);
}

.sr-wp-prose h1,
.sr-wp-prose h2,
.sr-wp-prose h3,
.sr-wp-prose h4,
.sr-wp-prose h5,
.sr-wp-prose h6 {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  color: var(--foreground, #f2f6f8);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 2.25em 0 0.6em;
}
.sr-wp-prose h1 { font-size: clamp(1.875rem, 3.5vw, 2.5rem); }
.sr-wp-prose h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); }
.sr-wp-prose h3 { font-size: 1.375rem; }
.sr-wp-prose h4 { font-size: 1.15rem; }
.sr-wp-prose h5 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
.sr-wp-prose h6 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in oklab, var(--foreground, #f2f6f8) 65%, transparent); }
.sr-wp-prose > :first-child { margin-top: 0; }

.sr-wp-prose p        { margin: 0 0 1.15em; }
.sr-wp-prose strong   { color: var(--foreground, #f2f6f8); font-weight: 600; }
.sr-wp-prose em       { color: color-mix(in oklab, var(--foreground, #f2f6f8) 92%, transparent); }
.sr-wp-prose small    { color: color-mix(in oklab, var(--foreground, #f2f6f8) 60%, transparent); font-size: 0.875em; }

/* --- Links --------------------------------------------------------------- */
.sr-wp-prose a {
  color: var(--primary, #1ca6d9);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--primary, #1ca6d9) 40%, transparent);
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.sr-wp-prose a:hover {
  color: color-mix(in oklab, var(--primary, #1ca6d9) 80%, #ffffff);
  text-decoration-color: currentColor;
}

/* --- Lists --------------------------------------------------------------- */
.sr-wp-prose ul,
.sr-wp-prose ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.sr-wp-prose ul { list-style: disc; }
.sr-wp-prose ol { list-style: decimal; }
.sr-wp-prose li { margin: 0.35em 0; }
.sr-wp-prose li::marker { color: var(--primary, #1ca6d9); }

/* --- Quotes -------------------------------------------------------------- */
.sr-wp-prose blockquote,
.sr-wp-prose .wp-block-quote,
.sr-wp-prose .wp-block-pullquote {
  margin: 1.75em 0;
  padding: 1.1em 1.4em;
  border-left: 3px solid var(--primary, #1ca6d9);
  background: color-mix(in oklab, var(--card, #0e1c26) 90%, transparent);
  border-radius: 0 8px 8px 0;
  color: color-mix(in oklab, var(--foreground, #f2f6f8) 92%, transparent);
  font-style: italic;
}
.sr-wp-prose blockquote cite,
.sr-wp-prose .wp-block-quote cite {
  display: block;
  margin-top: 0.6em;
  font-style: normal;
  font-size: 0.875em;
  color: color-mix(in oklab, var(--foreground, #f2f6f8) 60%, transparent);
}

/* --- Code ---------------------------------------------------------------- */
.sr-wp-prose code,
.sr-wp-prose kbd,
.sr-wp-prose samp {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  background: var(--muted, #19262f);
  color: var(--foreground, #f2f6f8);
  border: 1px solid var(--border, #27353e);
}
.sr-wp-prose pre,
.sr-wp-prose .wp-block-code,
.sr-wp-prose .wp-block-preformatted {
  margin: 1.5em 0;
  padding: 1.1em 1.25em;
  background: var(--card, #0e1c26);
  border: 1px solid var(--border, #27353e);
  border-radius: 10px;
  overflow-x: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.9rem;
  line-height: 1.6;
}
.sr-wp-prose pre code { padding: 0; background: transparent; border: 0; }

/* --- Images / figures / captions ---------------------------------------- */
.sr-wp-prose img,
.sr-wp-prose .wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border, #27353e);
}
.sr-wp-prose figure,
.sr-wp-prose .wp-block-image { margin: 1.75em 0; }
.sr-wp-prose figcaption,
.sr-wp-prose .wp-element-caption {
  margin-top: 0.6em;
  font-size: 0.875em;
  color: color-mix(in oklab, var(--foreground, #f2f6f8) 60%, transparent);
  text-align: center;
}

/* --- Buttons (Gutenberg wp-block-button) -------------------------------- */
.sr-wp-prose .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5em 0;
}
.sr-wp-prose .wp-block-button__link,
.sr-wp-prose button,
.sr-wp-prose input[type="submit"],
.sr-wp-prose input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: #07131c;
  background: var(--accent, #60c648);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.sr-wp-prose .wp-block-button__link:hover,
.sr-wp-prose button:hover,
.sr-wp-prose input[type="submit"]:hover {
  background: color-mix(in oklab, var(--accent, #60c648) 88%, #ffffff);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -12px color-mix(in oklab, var(--accent, #60c648) 60%, transparent);
}
.sr-wp-prose .is-style-outline .wp-block-button__link,
.sr-wp-prose .wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--foreground, #f2f6f8);
  border-color: var(--border, #27353e);
}
.sr-wp-prose .is-style-outline .wp-block-button__link:hover {
  border-color: var(--primary, #1ca6d9);
  color: var(--primary, #1ca6d9);
  background: transparent;
  box-shadow: none;
}

/* --- Forms (Contact Form 7 / WPForms / native) -------------------------- */
.sr-wp-prose input[type="text"],
.sr-wp-prose input[type="email"],
.sr-wp-prose input[type="url"],
.sr-wp-prose input[type="tel"],
.sr-wp-prose input[type="number"],
.sr-wp-prose input[type="search"],
.sr-wp-prose input[type="password"],
.sr-wp-prose select,
.sr-wp-prose textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--card, #0e1c26);
  border: 1px solid var(--border, #27353e);
  border-radius: 8px;
  color: var(--foreground, #f2f6f8);
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sr-wp-prose textarea { min-height: 140px; resize: vertical; }
.sr-wp-prose input:focus,
.sr-wp-prose select:focus,
.sr-wp-prose textarea:focus {
  outline: none;
  border-color: var(--primary, #1ca6d9);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary, #1ca6d9) 30%, transparent);
}
.sr-wp-prose label { display: block; margin: 0.6em 0 0.35em; font-weight: 500; color: color-mix(in oklab, var(--foreground, #f2f6f8) 85%, transparent); }
.sr-wp-prose ::placeholder { color: color-mix(in oklab, var(--foreground, #f2f6f8) 40%, transparent); }

/* --- Tables ------------------------------------------------------------- */
.sr-wp-prose table,
.sr-wp-prose .wp-block-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.75em 0;
  border: 1px solid var(--border, #27353e);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.9375rem;
}
.sr-wp-prose th,
.sr-wp-prose td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border, #27353e);
}
.sr-wp-prose tr:last-child td { border-bottom: 0; }
.sr-wp-prose thead th {
  background: var(--muted, #19262f);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  color: var(--foreground, #f2f6f8);
  letter-spacing: 0.01em;
}
.sr-wp-prose tbody tr:hover td { background: color-mix(in oklab, var(--card, #0e1c26) 70%, transparent); }

/* --- Separators / HR ---------------------------------------------------- */
.sr-wp-prose hr,
.sr-wp-prose .wp-block-separator {
  border: 0;
  height: 1px;
  background: var(--border, #27353e);
  margin: 2.5em 0;
}
.sr-wp-prose .wp-block-separator.is-style-wide { background: var(--border, #27353e); }
.sr-wp-prose .wp-block-separator.is-style-dots { background: transparent; text-align: center; }
.sr-wp-prose .wp-block-separator.is-style-dots::before {
  content: "···"; color: var(--border, #27353e); letter-spacing: 0.5em; font-size: 1.5em;
}

/* --- Columns / groups / media-text -------------------------------------- */
.sr-wp-prose .wp-block-columns { gap: 1.5rem; margin: 1.75em 0; }
.sr-wp-prose .wp-block-column > :first-child { margin-top: 0; }
.sr-wp-prose .wp-block-group,
.sr-wp-prose .wp-block-cover {
  border-radius: 12px;
}
.sr-wp-prose .wp-block-cover .wp-block-cover__inner-container { color: #f2f6f8; }

/* --- Embeds ------------------------------------------------------------- */
.sr-wp-prose .wp-block-embed iframe,
.sr-wp-prose iframe { max-width: 100%; border-radius: 12px; border: 1px solid var(--border, #27353e); }

/* --- Alignments --------------------------------------------------------- */
.sr-wp-prose .alignleft   { float: left;  margin: 0.25em 1.25em 1em 0; }
.sr-wp-prose .alignright  { float: right; margin: 0.25em 0 1em 1.25em; }
.sr-wp-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.sr-wp-prose .alignwide   { max-width: 1100px; margin-left: auto; margin-right: auto; }
.sr-wp-prose .alignfull   { max-width: none; }

/* --- Comments (basic dark styling) -------------------------------------- */
.sr-wp-content .comments-area { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border, #27353e); }
.sr-wp-content .comment-list { list-style: none; padding: 0; }
.sr-wp-content .comment-body { padding: 1rem 0; border-bottom: 1px solid var(--border, #27353e); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 640px) {
  .sr-wp-content { padding-top: 40px; padding-bottom: 80px; }
  .sr-wp-prose { font-size: 1rem; line-height: 1.7; }
  .sr-wp-prose table { display: block; overflow-x: auto; }
}