/*
Theme Name: Silent Overseer (Astra Child)
Theme URI: https://silentoverseer.com
Description: Custom child theme of Astra for Silent Overseer -- accountability, focus, and self-discipline tools and downloads. Dark "Overseer" persona theme: hooded figure, glowing purple eyes.
Author: Silent Overseer
Template: astra
Version: 2.1.0
Text Domain: silentoverseer-astra-child
*/

/* ---------------------------------------------------------------
   Design tokens -- v2.0.0 (2026-08-27): full dark/purple "Overseer"
   reskin, replacing the v1 light/green "accountability" palette.
   Same token names kept everywhere on purpose so every rule below
   that referenced var(--so-*) picks up the new look for free.
   --------------------------------------------------------------- */
:root {
  --so-ink: #ece7fb;
  --so-ink-soft: #a79cc9;
  --so-bg: #0a0712;
  --so-surface: #150f22;
  --so-accent: #b06bff;      /* glowing purple -- the Overseer's eyes */
  --so-accent-dark: #8b3ffb;
  --so-accent-soft: rgba(176,107,255,.14);
  --so-warn: #e0b04a;        /* kept for disclosure notices */
  --so-border: rgba(176,107,255,.22);
  --so-radius: 10px;
  --so-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(139,63,251,.16);
  --so-glow: 0 0 18px rgba(176,107,255,.55);
  color-scheme: dark;
}

body {
  background: var(--so-bg);
  color: var(--so-ink);
}

/* ---------------------------------------------------------------
   Typography -- readability first, this is a reading-heavy site
   --------------------------------------------------------------- */
.ast-single-post .entry-content,
.single-post .entry-content {
  font-size: 1.09rem;
  line-height: 1.75;
  color: var(--so-ink);
}

.ast-single-post .entry-content p {
  margin-bottom: 1.4em;
}

.entry-title,
h1, h2, h3 {
  color: var(--so-ink);
  letter-spacing: -0.01em;
}

.ast-single-post .entry-content h2 {
  margin-top: 2.2em;
  padding-bottom: .3em;
  border-bottom: 2px solid var(--so-accent-soft);
}

.ast-single-post .entry-content h3 {
  margin-top: 1.6em;
  color: var(--so-accent);
}

.ast-single-post .entry-content a {
  color: var(--so-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.ast-single-post .entry-content a:hover {
  color: var(--so-ink);
}

/* ---------------------------------------------------------------
   Header / nav -- dark, quiet, purple glow on hover only
   --------------------------------------------------------------- */
.ast-primary-header,
.site-header {
  background: var(--so-surface);
  border-bottom: 1px solid var(--so-border);
}

.site-title,
.ast-site-title-inner {
  display: none;
}

.so-header-top {
  background: var(--so-bg);
  text-align: center;
  padding-top: 14px;
}

.so-header-logo {
  padding-bottom: 6px;
}

.so-header-banner {
  width: 100%;
  height: 130px;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

@media (max-width: 600px) {
  .so-header-banner { height: 90px; background-size: contain; }
}

.main-header-bar-navigation .main-navigation ul li > a {
  color: var(--so-ink-soft);
  font-weight: 600;
}

.main-header-bar-navigation .main-navigation ul li > a:hover {
  color: var(--so-accent);
  text-shadow: 0 0 12px rgba(176,107,255,.5);
}

.main-header-bar,
.ast-above-header,
.ast-below-header {
  background: var(--so-surface);
}

/* Astra's own default page/post/footer widget backgrounds are light by
   default -- force the dark surface everywhere so nothing "un-skins"
   itself back to white inside a dark page. */
.site-content,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
footer.site-footer,
.ast-small-footer {
  background: var(--so-bg);
  color: var(--so-ink);
}

/* Astra's own rule (.ast-article-single:not(.ast-related-post)) has
   higher specificity than the override above (3 classes vs 2), so it
   was winning and rendering post/download titles on a white background.
   Match its exact specificity + !important so this always wins. */
.ast-separate-container .ast-article-single:not(.ast-related-post),
.ast-separate-container .ast-article-post {
  background-color: var(--so-bg) !important;
  color: var(--so-ink) !important;
}

.ast-small-footer,
.ast-small-footer a {
  border-color: var(--so-border);
  color: var(--so-ink-soft);
}

.ast-small-footer a:hover { color: var(--so-accent); }

/* ---------------------------------------------------------------
   Buttons -- one consistent primary action style site-wide
   --------------------------------------------------------------- */
.ast-button,
button,
.wp-block-button__link,
input[type="submit"] {
  background: linear-gradient(180deg, var(--so-accent), var(--so-accent-dark));
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  transition: box-shadow .15s ease, transform .1s ease;
}

.ast-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
  box-shadow: var(--so-glow);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------
   Cards -- used by article/review archive grids
   --------------------------------------------------------------- */
.ast-blog-single-element.ast-blog-featured-section,
article.ast-article-post {
  background: var(--so-surface);
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius);
  box-shadow: var(--so-shadow);
  overflow: hidden;
}

article.ast-article-post .ast-article-inner {
  padding: 1.4rem;
}

article.ast-article-post .entry-title a { color: var(--so-ink); }
article.ast-article-post .entry-title a:hover { color: var(--so-accent); }

/* ---------------------------------------------------------------
   Silent Overseer Toolkit plugin components
   (kept here so the child theme is the single source of front-end
   styling -- the plugin only outputs structure/markup)
   --------------------------------------------------------------- */
.so-disclosure-notice {
  background: rgba(224,176,74,.08);
  border: 1px solid rgba(224,176,74,.3);
  border-left: 4px solid var(--so-warn);
  border-radius: 6px;
  padding: .9rem 1.1rem;
  margin: 1.4rem 0;
  font-size: .95rem;
  color: #e9d7ab;
}

.so-cta-box {
  background: var(--so-accent-soft);
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius);
  padding: 1.5rem 1.6rem;
  margin: 2rem 0;
}

.so-cta-box h4 {
  margin-top: 0;
  color: var(--so-accent);
}

.so-cta-box .ast-button,
.so-cta-box .wp-block-button__link {
  display: inline-block;
  margin-top: .6rem;
}

.so-rating {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--so-surface);
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius);
  padding: 1rem 1.2rem;
  margin: 1.6rem 0;
}

.so-rating .so-rating-score {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--so-accent);
  line-height: 1;
}

.so-rating .so-rating-stars {
  color: var(--so-accent);
  letter-spacing: 1px;
}

.so-rating .so-rating-label {
  font-size: .82rem;
  color: var(--so-ink-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.so-reading-time {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  color: var(--so-ink-soft);
  margin-bottom: .8rem;
}

.so-toc {
  background: var(--so-surface);
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius);
  padding: 1.1rem 1.3rem;
  margin: 1.6rem 0 2rem;
}

.so-toc-title {
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--so-ink-soft);
  margin-bottom: .5rem;
}

.so-toc ol {
  margin: 0;
  padding-left: 1.2rem;
}

.so-toc a {
  color: var(--so-ink);
  text-decoration: none;
}

.so-toc a:hover {
  color: var(--so-accent);
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Overseer persona -- hooded figure, glowing purple eyes
   Used on the homepage hero (front-page.php) and small header mark.
   --------------------------------------------------------------- */
.so-overseer-mark {
  display: inline-block;
  border-radius: 50%;
  filter: drop-shadow(0 0 8px rgba(176,107,255,.28));
}

.so-hero {
  padding: 5.5rem 1.5rem 4rem;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(139,63,251,.22), transparent 70%),
    var(--so-bg);
}

.so-hero-framed {
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  padding-top: 8.5rem;
}

.so-hero-figure {
  width: 168px;
  height: 168px;
  margin: 0 auto 1.6rem;
}

.so-hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.so-hero .kicker {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--so-accent);
  margin-bottom: 1rem;
}

.so-hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  margin: 2.5rem 0 1rem;
}

.so-hero h1 em {
  font-style: normal;
  color: var(--so-accent);
}

.so-hero p.lead {
  max-width: 620px;
  margin: 0 auto 2rem;
  color: var(--so-ink-soft);
  font-size: 1.1rem;
  line-height: 1.7;
}

.so-badge-soon {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .3rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--so-accent);
  color: var(--so-accent);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.so-ad-slot {
  display: flex;
  justify-content: center;
  margin: 2rem auto 0;
}

.so-bmc-footer {
  text-align: center;
  padding: 1.5rem 1rem 0;
}

.so-bmc-footer img {
  height: 42px;
  width: auto;
  border-radius: 6px;
}

.so-hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.so-hero-actions .ast-button.secondary {
  background: transparent;
  border: 1px solid var(--so-border);
}

.so-hero-actions .ast-button.secondary:hover {
  border-color: var(--so-accent);
}

.so-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
}

.so-section h2 {
  text-align: center;
  margin-bottom: .5rem;
}

.so-section p.section-lead {
  text-align: center;
  color: var(--so-ink-soft);
  max-width: 560px;
  margin: 0 auto 2.4rem;
}

.so-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}

.so-card {
  background: var(--so-surface);
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius);
  padding: 1.8rem;
  box-shadow: var(--so-shadow);
}

.so-card h3 {
  margin: 0 0 .6rem;
  color: var(--so-ink);
}

.so-card p {
  color: var(--so-ink-soft);
  margin: 0 0 1.1rem;
  line-height: 1.6;
}

.so-card .so-price {
  display: inline-block;
  font-weight: 700;
  color: var(--so-accent);
  margin-bottom: 1rem;
}

.so-article-list {
  display: grid;
  gap: 1rem;
}

.so-article-list a {
  display: block;
  background: var(--so-surface);
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius);
  padding: 1.1rem 1.3rem;
  color: var(--so-ink);
  text-decoration: none;
  transition: border-color .15s ease;
}

.so-article-list a:hover {
  border-color: var(--so-accent);
  color: var(--so-accent);
}

/* ---------------------------------------------------------------
   Mobile
   --------------------------------------------------------------- */
@media (max-width: 780px) {
  .so-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .ast-single-post .entry-content { font-size: 1.02rem; }
  .so-cta-box { padding: 1.2rem; }
  .so-hero { padding: 3.5rem 1.2rem 2.5rem; }
}


/* ---------------------------------------------------------------
   Easy Digital Downloads -- dark theme coverage. EDD's own default
   templates render inside the normal post content area, which our
   dark rules only targeted for .single-post; downloads need the same
   treatment plus styling for EDD's own purchase/cart markup.
   --------------------------------------------------------------- */
.single-download .entry-content,
.post-type-archive-download .entry-content {
  background: var(--so-surface);
  color: var(--so-ink);
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius);
  padding: 2rem;
  font-size: 1.05rem;
  line-height: 1.75;
}

.single-download .entry-title { color: var(--so-ink); }

.edd_download_purchase_form .edd_price,
.edd_download_purchase_form { color: var(--so-ink); }

.edd-submit,
a.edd-submit,
.edd-add-to-cart {
  background: linear-gradient(180deg, var(--so-accent), var(--so-accent-dark)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

.edd-submit:hover, a.edd-submit:hover, .edd-add-to-cart:hover {
  box-shadow: var(--so-glow);
}

#edd_checkout_cart, .edd_cart, table.edd-table {
  background: var(--so-surface);
  color: var(--so-ink);
  border-color: var(--so-border) !important;
}

table.edd-table th, table.edd-table td {
  border-color: var(--so-border) !important;
  color: var(--so-ink) !important;
}

#edd_checkout_form_wrap label,
.edd-do-validate label,
.edd-input {
  color: var(--so-ink);
}

.edd-input, select.edd-select, textarea.edd-input {
  background: var(--so-bg) !important;
  border: 1px solid var(--so-border) !important;
  color: var(--so-ink) !important;
}

/* ---------------------------------------------------------------
   Procrastination Cost Calculator (SO-DEC-0002 / SO-EXP-002)
   --------------------------------------------------------------- */
.so-tool-page {
  max-width: 720px;
}

.so-tool-page h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin: .8rem 0 1rem;
  text-align: center;
}

.so-tool-page .kicker {
  display: block;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--so-accent);
}

.so-tool-lead {
  text-align: center;
  color: var(--so-ink-soft);
  max-width: 560px;
  margin: 0 auto 2.2rem;
  line-height: 1.7;
}

.so-calc-card {
  padding: 2rem;
}

.so-calc-row {
  margin-bottom: 1.2rem;
}

.so-calc-row label {
  display: block;
  font-weight: 600;
  margin-bottom: .4rem;
  color: var(--so-ink);
}

.so-calc-row input {
  width: 100%;
  background: var(--so-bg);
  border: 1px solid var(--so-border);
  border-radius: 8px;
  color: var(--so-ink);
  padding: .7rem .9rem;
  font-size: 1.05rem;
}

.so-calc-row input:focus {
  outline: none;
  border-color: var(--so-accent);
  box-shadow: 0 0 0 3px var(--so-accent-soft);
}

.so-calc-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.6rem 0 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--so-border);
}

.so-calc-result {
  background: var(--so-bg);
  border: 1px solid var(--so-border);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  text-align: center;
}

.so-calc-result-label {
  display: block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--so-ink-soft);
  margin-bottom: .3rem;
}

.so-calc-result-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--so-accent);
}

.so-calc-result-value--big {
  font-size: 1.9rem;
}

.so-calc-note {
  font-size: .85rem;
  color: var(--so-ink-soft);
  margin: 1.2rem 0 0;
  line-height: 1.6;
}

.so-tool-followup {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 500px) {
  .so-calc-results { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------
   Footer -- demoted plugin credibility mention (SO-DEC-0002)
   --------------------------------------------------------------- */
.so-footer-plugins {
  text-align: center;
  padding: 1.4rem 1.2rem;
  font-size: .88rem;
  color: var(--so-ink-soft);
  border-top: 1px solid var(--so-border);
  background: var(--so-surface);
}

.so-footer-plugins a {
  color: var(--so-accent);
  text-decoration: none;
}

.so-footer-plugins a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Silent Overseer App page -- icon feature grid (SO-RUN-0015)
   --------------------------------------------------------------- */
.so-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0 2.5rem;
}

.so-feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.2rem;
  border: 1px solid var(--so-border);
  border-radius: 10px;
  background: var(--so-surface);
}

.so-feature img {
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px var(--so-accent-soft));
}

.so-feature strong {
  display: block;
  margin-bottom: .4rem;
  color: var(--so-accent);
}

.so-feature p {
  margin: 0;
  font-size: .92rem;
  color: var(--so-ink-soft);
}