/*
Theme Name: Thoughts Dark
Theme URI: https://graysonkirk.com/
Description: Dark editorial child theme for Astra. Warm paper-on-slate palette, serif reading face, AAA body contrast.
Author: David Singer
Template: astra
Version: 0.1.9
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thoughts-dark
*/

/* ============================================================
   1. TOKENS
   Verified WCAG ratios (bg #0F1318):
     text  #ECE9E1 = 15.36:1   heading #F5F1E8 = 16.54:1
     muted #B8C0C9 = 10.14:1   brand   #F2B749 = 10.34:1
   ============================================================ */

:root {
  /* surfaces: elevation by lightness, never pure black */
  --tw-bg:          #0F1318;
  --tw-bg-raised:   #161C23;
  --tw-bg-overlay:  #1F2833;
  --tw-border:      #2E3B48;
  --tw-border-soft: #222C36;

  /* ink */
  --tw-text:        #ECE9E1;
  --tw-text-high:   #F5F1E8;
  --tw-text-muted:  #B8C0C9;

  /* accents */
  --tw-brand:       #F2B749;
  --tw-brand-hover: #FFD894;
  --tw-sage:        #9ED9B5;
  --tw-brand-ink:   #161C23;

  /* type */
  --tw-font-serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --tw-font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tw-font-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --tw-fs-meta:  0.875rem;   /* 14px */
  --tw-fs-small: 0.9375rem;  /* 15px */
  --tw-fs-base:  1.125rem;   /* 18px */
  --tw-fs-lead:  1.3125rem;  /* 21px */
  --tw-fs-h4:    1.406rem;
  --tw-fs-h3:    1.758rem;
  --tw-fs-h2:    2.197rem;
  --tw-fs-h1:    2.75rem;

  --tw-lh-body: 1.75;
  --tw-lh-tight: 1.25;
  --tw-measure: 70ch;
  --tw-radius: 10px;
  --tw-radius-sm: 6px;
}

/* ---- Astra 4.x palette remap (0 accent, 1 link, 2 heading, 3 body, 4 bg, 5 site bg) ---- */
body {
  --ast-global-color-0: var(--tw-brand);
  --ast-global-color-1: var(--tw-brand-hover);
  --ast-global-color-2: var(--tw-text-high);
  --ast-global-color-3: var(--tw-text);
  --ast-global-color-4: var(--tw-bg);
  --ast-global-color-5: var(--tw-bg);
  --ast-global-color-6: var(--tw-bg-raised);
  --ast-global-color-7: var(--tw-border);
  --ast-global-color-8: var(--tw-bg-overlay);
  --ast-body-font-family: var(--tw-font-serif);
  --ast-heading-font-family: var(--tw-font-sans);
  --ast-code-block-background: var(--tw-bg-overlay);
  --ast-comment-inputs-background: var(--tw-bg-overlay);
}

/* ============================================================
   2. BASE
   ============================================================ */

html { background: var(--tw-bg); }

body,
.ast-separate-container,
.ast-plain-container {
  background-color: var(--tw-bg);
  color: var(--tw-text);
  font-family: var(--tw-font-serif);
  font-size: var(--tw-fs-base);
  line-height: var(--tw-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title, .widget-title {
  font-family: var(--tw-font-sans);
  color: var(--tw-text-high);
  line-height: var(--tw-lh-tight);
  letter-spacing: -0.011em;
  font-weight: 600;
}

h1, .entry-title { font-size: var(--tw-fs-h1); }
h2 { font-size: var(--tw-fs-h2); }
h3 { font-size: var(--tw-fs-h3); }
h4 { font-size: var(--tw-fs-h4); }
h5, h6 { font-size: var(--tw-fs-base); letter-spacing: 0.01em; }

p, li, dd, dt { color: var(--tw-text); }

strong, b { color: var(--tw-text-high); font-weight: 600; }

small, .entry-meta, .ast-blog-single-element.ast-taxonomy-container {
  font-family: var(--tw-font-sans);
  font-size: var(--tw-fs-meta);
}

hr { border: 0; border-top: 1px solid var(--tw-border-soft); }

::selection { background: rgba(242,183,73,0.28); color: var(--tw-text-high); }

/* links */
a { color: var(--tw-brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus { color: var(--tw-brand-hover); }
a:focus-visible {
  outline: 2px solid var(--tw-brand-hover);
  outline-offset: 2px;
  border-radius: 3px;
}

/* entry content links underlined, nav links not */
.entry-content a:not(.button):not(.wp-block-button__link) { text-decoration: underline; }

/* ============================================================
   3. HEADER / NAV
   ============================================================ */

.site-header,
.ast-primary-header-bar,
.main-header-menu,
.ast-above-header-bar,
.ast-below-header-bar {
  background-color: var(--tw-bg-raised) !important;
  border-bottom: 1px solid var(--tw-border-soft);
}

.site-title a, .site-title a:visited {
  font-family: var(--tw-font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tw-text-high);
}
.site-title a:hover { color: var(--tw-brand); }

.site-description {
  font-family: var(--tw-font-sans);
  font-size: var(--tw-fs-meta);
  color: var(--tw-text-muted);
}

.main-header-menu .menu-link,
.ast-header-navigation .menu-link,
.ast-builder-menu .menu-item > .menu-link {
  font-family: var(--tw-font-sans);
  font-size: var(--tw-fs-small);
  font-weight: 500;
  color: var(--tw-text-muted);
  background: transparent;
}
.main-header-menu .menu-item > .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link,
.ast-header-navigation .menu-link:hover {
  color: var(--tw-text-high);
  background: var(--tw-bg-overlay);
}

.ast-mobile-header-wrap .ast-mobile-header-content,
.ast-mobile-popup-content,
.ast-mobile-popup-inner {
  background-color: var(--tw-bg-raised);
  border-color: var(--tw-border);
}
.ast-mobile-menu-trigger, .ast-button-wrap .mobile-menu-toggle-icon span,
.main-header-menu-toggle, .ast-mobile-menu-trigger-minimal span {
  color: var(--tw-text-high);
}
.ast-mobile-popup-drawer .ast-mobile-popup-inner { box-shadow: none; }

/* ============================================================
   4. BLOG LIST / CARDS
   ============================================================ */

.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
  background-color: transparent;
  border: 0;
  border-radius: var(--tw-radius);
}

.ast-article-post .ast-article-inner,
.ast-article-post .post-thumb {
  background-color: var(--tw-bg-raised);
  border: 1px solid var(--tw-border-soft);
  border-radius: var(--tw-radius);
}

.ast-separate-container .ast-article-post { overflow: hidden; }

.ast-article-post .entry-title,
.ast-article-post .entry-title a {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tw-text-high);
  text-decoration: none;
}
.ast-article-post .entry-title a:hover { color: var(--tw-brand); }

.ast-article-post .entry-meta,
.ast-article-post .entry-meta *,
.ast-blog-single-element .posted-by a,
.ast-blog-single-element .ast-taxonomy-container a {
  color: var(--tw-text-muted);
  font-size: var(--tw-fs-meta);
}
.ast-blog-single-element .ast-taxonomy-container a {
  background: var(--tw-bg-overlay);
  border: 1px solid var(--tw-border-soft);
  border-radius: 999px;
  padding: 2px 10px;
  text-decoration: none;
  color: var(--tw-sage);
}

.ast-article-post .entry-content,
.ast-article-post .entry-summary,
.ast-article-post .entry-content p {
  color: var(--tw-text-muted);
  font-size: var(--tw-fs-base);
}

/* thumb wrappers are empty when a post has no featured image — don't paint them */
.ast-article-post .post-thumb { border: 0; background: transparent; }
.ast-article-post .post-thumb:not(:has(img)) { display: none; }
.ast-article-post .post-thumb img { border-radius: var(--tw-radius) var(--tw-radius) 0 0; display: block; }

/* one comfortable reading column for the post list */
.blog .ast-article-post,
.archive .ast-article-post,
.search-results .ast-article-post { max-width: 820px; margin-left: auto; margin-right: auto; }
.ast-article-inner { padding: 34px 36px; }
.ast-article-post .entry-header { margin-bottom: 8px; }
.ast-article-post .entry-content { margin-top: 10px; }

a.read-more, .ast-article-post a.more-link {
  font-family: var(--tw-font-sans);
  font-weight: 600;
  font-size: var(--tw-fs-small);
  color: var(--tw-brand);
  text-decoration: none;
  border-bottom: 2px solid var(--tw-brand);
  padding-bottom: 2px;
}
a.read-more:hover { color: var(--tw-brand-hover); border-color: var(--tw-brand-hover); }

/* blog meta separators */
.ast-blog-single-element:after, .entry-meta .cat-links:after { opacity: 0.4; }
.ast-blog-single-element.ast-taxonomy-container:after { content: none; }

/* ============================================================
   5. SINGLE POST
   ============================================================ */

.single-post .site-content .ast-container { max-width: 1240px; }

/* Astra's "separate container" paints a big panel around a single post.
   On an essay page that reads as an empty frame, so drop the surface and
   let the page background carry it. */
.single-post .ast-article-single,
.single-post .ast-separate-container .ast-article-single {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

/* byline reads better as small-caps meta than "By grayson /" */
.single-post .entry-meta .posted-by,
.single-post .entry-meta .posted-by a { color: var(--tw-text-muted); }
.single-post .entry-meta .author-name { font-weight: 600; color: var(--tw-text-muted); }

.single-post .entry-header {
  max-width: var(--tw-measure);
  margin: 56px auto 8px auto;
  text-align: left;
}
.single-post .entry-title {
  font-size: clamp(2rem, 4vw, var(--tw-fs-h1));
  text-wrap: balance;
  margin-bottom: 0.4em;
}
.single-post .entry-meta {
  max-width: var(--tw-measure);
  margin: 0 auto 32px auto;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--tw-border-soft);
  color: var(--tw-text-muted);
}
.single-post .entry-meta a { color: var(--tw-text-muted); }
.single-post .entry-meta a:hover { color: var(--tw-brand); }

.single-post .entry-content,
.single-post .entry-content p,
.single-post .entry-content li,
.single-post .entry-content blockquote p {
  font-size: var(--tw-fs-base);
  line-height: var(--tw-lh-body);
}
.single-post .entry-content {
  max-width: var(--tw-measure);
  margin-left: auto;
  margin-right: auto;
}
.single-post .entry-content > p:first-of-type {
  font-size: var(--tw-fs-lead);
  line-height: 1.6;
  color: var(--tw-text-high);
}
.single-post .entry-content p { margin-bottom: 1.5em; }

.entry-content h2 { margin-top: 2.2em; margin-bottom: 0.6em; }
.entry-content h3 { margin-top: 1.9em; margin-bottom: 0.5em; }

/* blockquote */
.entry-content blockquote,
.entry-content blockquote.wp-block-quote,
blockquote.wp-block-quote {
  margin: 2em 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--tw-brand) !important;
  background: transparent;
  font-size: var(--tw-fs-lead);
  line-height: 1.6;
  color: var(--tw-text-high);
  font-style: italic;
}
.entry-content blockquote cite,
blockquote.wp-block-quote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--tw-font-sans);
  font-style: normal;
  font-size: var(--tw-fs-meta);
  color: var(--tw-text-muted);
}

/* inline code + code blocks */
code, kbd, samp {
  font-family: var(--tw-font-mono);
  font-size: 0.9em;
  background: var(--tw-bg-overlay);
  border: 1px solid var(--tw-border-soft);
  border-radius: var(--tw-radius-sm);
  padding: 0.12em 0.4em;
  color: var(--tw-sage);
}
pre, pre.wp-block-code, .wp-block-code code {
  background: var(--tw-bg-overlay) !important;
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
  padding: 20px 22px;
  font-family: var(--tw-font-mono);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--tw-text);
  overflow-x: auto;
}
pre code { background: none; border: 0; padding: 0; color: inherit; }

/* tables */
.entry-content table { border-collapse: collapse; width: 100%; font-size: var(--tw-fs-small); }
.entry-content th, .entry-content td {
  border: 1px solid var(--tw-border);
  padding: 10px 14px;
  text-align: left;
}
.entry-content th { background: var(--tw-bg-overlay); color: var(--tw-text-high); font-family: var(--tw-font-sans); }
.entry-content tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }

/* images + captions */
.entry-content figcaption, .wp-caption-text {
  font-family: var(--tw-font-sans);
  font-size: var(--tw-fs-meta);
  color: var(--tw-text-muted);
  margin-top: 8px;
}
.entry-content img { border-radius: var(--tw-radius-sm); }

/* post pagination / tags */
.ast-single-post-footer, .post-navigation {
  border-top: 1px solid var(--tw-border-soft);
  margin-top: 48px;
  padding-top: 24px;
}
.post-navigation a {
  font-family: var(--tw-font-sans);
  font-size: var(--tw-fs-small);
  color: var(--tw-text-muted);
}
.post-navigation a:hover { color: var(--tw-brand); }

/* ============================================================
   6. FORMS / BUTTONS
   ============================================================ */

input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
input[type="tel"], textarea, select,
.comment-form input, .comment-form textarea, .search-field {
  background-color: var(--tw-bg-overlay);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-sm);
  color: var(--tw-text);
  font-family: var(--tw-font-sans);
  font-size: var(--tw-fs-small);
  padding: 12px 14px;
}
input::placeholder, textarea::placeholder { color: #8A94A0; }
input:focus, textarea:focus, select:focus {
  border-color: var(--tw-brand);
  outline: 1px solid var(--tw-brand);
  outline-offset: 0;
  box-shadow: 0 0 0 3px rgba(242,183,73,0.15);
}

button, .button, .ast-button, input[type="submit"],
.wp-block-button__link, .wp-element-button {
  background-color: var(--tw-brand);
  border: 1px solid var(--tw-brand);
  border-radius: var(--tw-radius-sm);
  color: var(--tw-brand-ink);
  font-family: var(--tw-font-sans);
  font-weight: 600;
  font-size: var(--tw-fs-small);
  padding: 12px 20px;
  text-decoration: none;
}
button:hover, .button:hover, .ast-button:hover, input[type="submit"]:hover,
.wp-block-button__link:hover {
  background-color: var(--tw-brand-hover);
  border-color: var(--tw-brand-hover);
  color: var(--tw-brand-ink);
}
.ast-button.ast-outline-button, .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--tw-brand);
  border-color: var(--tw-brand);
}

/* search widget — Astra's default paints these white regardless of palette */
.ast-search-menu-icon .search-form,
.search-form,
#searchform { background: var(--tw-bg-overlay); border: 1px solid var(--tw-border); }

.search-form input[type="search"],
input.search-field,
.ast-search-box .search-field,
#searchform input[type="text"],
#searchform input[type="search"],
.wp-block-search__input {
  background-color: var(--tw-bg-overlay) !important;
  border: 1px solid var(--tw-border) !important;
  color: var(--tw-text) !important;
}
.search-form input[type="search"]::placeholder,
input.search-field::placeholder { color: #8A94A0 !important; }

/* Astra's sticky search puts an absolutely-positioned submit inside the label,
   and its "Search" text overflows the field. Keep the input full-width, park a
   magnifier button inside it, and drop the stray text label. */
.search-form { display: block; }
.search-form label { position: relative; display: block; }
.search-form .search-field {
  width: 100%;
  padding-right: 48px !important;
  border-radius: var(--tw-radius-sm) !important;
}

.search-submit, button.search-submit, .ast-search-icon .search-submit {
  position: absolute !important;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 46px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8C0C9' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  border: 0 !important;
  border-left: 1px solid var(--tw-border) !important;
  border-radius: 0 var(--tw-radius-sm) var(--tw-radius-sm) 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
}
.search-submit:hover {
  background-color: var(--tw-bg-raised) !important;
  border-left-color: var(--tw-brand) !important;
}
.search-submit span, .search-submit span[hidden] { display: none !important; }
/* Astra ships its own icon inside the button; we draw ours as a background, so
   hide every child to avoid a double magnifier. */
.search-submit > * { display: none !important; }
.search-form .search-submit svg, .ast-search-icon svg { display: none; }

/* ============================================================
   7. PAGINATION
   ============================================================ */

.ast-pagination .page-numbers {
  font-family: var(--tw-font-sans);
  background: var(--tw-bg-raised);
  border: 1px solid var(--tw-border);
  color: var(--tw-text-muted);
  border-radius: 8px;
  padding: 10px 16px;
  text-decoration: none;
}
.ast-pagination .page-numbers.current,
.ast-pagination .page-numbers:hover {
  background: var(--tw-brand);
  border-color: var(--tw-brand);
  color: var(--tw-brand-ink);
}

/* ============================================================
   8. COMMENTS / WIDGETS / FOOTER
   ============================================================ */

#comments, .comments-area {
  max-width: var(--tw-measure);
  margin-left: auto;
  margin-right: auto;
}
.comments-title, .comment-reply-title { font-family: var(--tw-font-sans); color: var(--tw-text-high); }
.comment-body, .comment-content { color: var(--tw-text); }
.ast-comment-list .children { border-left: 1px solid var(--tw-border-soft); }

.widget-title { font-size: var(--tw-fs-h4); }
.widget, .sidebar-main { color: var(--tw-text); }
.widget a { color: var(--tw-text-muted); }
.widget a:hover { color: var(--tw-brand); }

.site-footer, .ast-small-footer, .ast-footer-copyright,
.site-below-footer-wrap, .ast-below-footer-inner-wrap {
  background-color: var(--tw-bg-raised) !important;
  border-top: 1px solid var(--tw-border-soft);
  color: var(--tw-text-muted);
}
.site-footer a, .ast-footer-copyright a { color: var(--tw-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--tw-brand); }

/* 404 */
.error-404 .page-title { font-size: var(--tw-fs-h2); }

/* ============================================================
   9. OPT-IN LIGHT MODE
   Dark is the default everywhere. Light applies only when body carries
   .tw-light, so the site never depends on the visitor's OS preference.
   ============================================================ */

body.tw-light {
  --tw-bg:          #FBF9F4;
  --tw-bg-raised:   #FFFFFF;
  --tw-bg-overlay:  #F1EEE6;
  --tw-border:      #D8D2C6;
  --tw-border-soft: #E6E1D7;
  --tw-text:        #1A1F26;
  --tw-text-high:   #0F1318;
  --tw-text-muted:  #4E5763;
  --tw-brand:       #9A6B00;
  --tw-brand-hover: #7A5400;
  --tw-sage:        #2F6B45;
  --tw-brand-ink:   #FFFFFF;
}

body.tw-light input::placeholder,
body.tw-light textarea::placeholder { color: #6B7480; }

/* ============================================================
   10. RESPONSIVE
   ============================================================ */

@media (max-width: 921px) {
  :root { --tw-measure: 100%; }
  body { font-size: 1.0625rem; } /* 17px floor on mobile */
  .single-post .entry-header { margin-top: 32px; }
  .single-post .entry-content > p:first-of-type { font-size: 1.1875rem; }
}

@media (max-width: 544px) {
  :root { --tw-fs-h1: 2rem; }
  .ast-article-post .entry-title { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}