/*
Theme Name: ATH-X CRT
Theme URI: https://ath-x.net
Description: CRT green-terminal (dark) / SUN OpenBoot (light) child theme for ATH-X Services. Reproduces the crt-openboot look as a WordPress-native block child theme of Twenty Twenty-Four.
Author: ATH-X Services LLC
Template: twentytwentyfour
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ath-x-crt
*/

/* ============================================================
   ATH-X CRT theme
   Dark (default): green CRT terminal, Courier, scanlines
   Light: SUN OpenBoot — black on white, Times New Roman
   Toggle controlled by html.dark / html.light (see theme-toggle.js)
   ============================================================ */

/* ========== VARIABLES ========== */
:root, html.dark {
  --bg: #000000;
  --fg: #88ff88;
  --fg-dim: #22aa22;
  --fg-bright: #66ff66;
  --accent: #00cc00;
  --link: #00ff88;
  --link-hover: #aaffaa;
  --border: #1a5c1a;
  --code-bg: #001100;
  --table-stripe: #001a00;
  --sidebar-bg: #000800;
  --font-mono: "Courier New", "Lucida Console", "DejaVu Sans Mono", monospace;
  --font-serif: "Times New Roman", Times, serif;
}

html.light {
  --bg: #ffffff;
  --fg: #000000;
  --fg-dim: #333333;
  --fg-bright: #000000;
  --accent: #000000;
  --link: #0000ee;
  --link-hover: #551a8b;
  --border: #000000;
  --code-bg: #f5f5f5;
  --table-stripe: #f0f0f0;
  --sidebar-bg: #f8f8f8;
}

/* ========== BASE ========== */
html { color-scheme: dark; }
html.light { color-scheme: light; }

/* Force the top-level containers to follow our variables so the parent theme's
   global styles (theme.json) cannot pin a background in either mode. */
html.dark body,
html.dark .wp-site-blocks,
html.light body,
html.light .wp-site-blocks {
  background-color: var(--bg) !important;
  color: var(--fg) !important;
}

/* ========== CONTENT WIDTH ==========
   Twenty Twenty-Four defaults to a narrow ~620px column. Widen the content so
   it fills the page like the original crt-openboot layout (wide, small padding). */
:root {
  --wp--style--global--content-size: 1100px;
  --wp--style--global--wide-size: 1400px;
}

/* Make the constrained-layout wrappers wider and add modest side padding. */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.wp-block-post-content.is-layout-constrained > *,
.entry-content.is-layout-constrained > * {
  max-width: 1100px;
}

/* Let the overall content region breathe with small side padding instead of
   huge empty margins. */
.wp-site-blocks,
.wp-block-group.has-global-padding {
  padding-left: clamp(1rem, 3vw, 2rem) !important;
  padding-right: clamp(1rem, 3vw, 2rem) !important;
}

/* Wide/full blocks should actually go wide. */
.alignwide { max-width: 1400px; }
.alignfull { max-width: none; }

body.wp-site-blocks,
body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1.5;

  /* CRT scanlines (dark only) */
  background-image:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.22) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.025), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.025));
  background-size: 100% 3px, 3px 100%;
  transition: background-color 0.25s ease, color 0.25s ease;
}

html.light body {
  background-image: none;
  font-family: var(--font-serif);
}

/* ========== HEADINGS ========== */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  color: var(--fg-bright);
  font-family: var(--font-mono);
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0, 255, 0, 0.4);
  margin-top: 1.3em;
  margin-bottom: 0.45em;
}

html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6,
html.light .wp-block-heading {
  color: var(--fg);
  font-family: var(--font-serif);
  text-shadow: none;
}

h1 { font-size: 1.75em; border-bottom: 2px solid var(--border); padding-bottom: 0.25rem; }
h2 { font-size: 1.4em;  border-bottom: 1px solid var(--border); padding-bottom: 0.15rem; }
h3 { font-size: 1.22em; }
h4, h5, h6 { font-size: 1.08em; color: var(--fg); }

/* ========== CODE ========== */
code, kbd, pre,
.wp-block-code,
.wp-block-preformatted {
  background: var(--code-bg);
  color: var(--fg-bright);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  border-radius: 0;
}
html.light code,
html.light kbd,
html.light pre,
html.light .wp-block-code,
html.light .wp-block-preformatted {
  color: var(--fg);
}
pre, .wp-block-code {
  padding: 0.7rem 1rem;
  overflow-x: auto;
  margin: 0.9rem 0;
  font-size: 0.95em;
}

/* ========== TABLES ========== */
table, .wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}
th, td {
  border: 1px solid var(--border);
  padding: 0.4rem 0.65rem;
  text-align: left;
}
th {
  background: var(--code-bg);
  color: var(--fg-bright);
  font-weight: bold;
}
tr:nth-child(even) td { background: var(--table-stripe); }

/* ========== HEADER / FOOTER TEMPLATE PARTS ========== */
/* Twenty Twenty-Four's header is a Group/template-part that can paint its own
   (often light) background. Force it to the CRT background so there is no white bar. */
header.wp-block-template-part,
footer.wp-block-template-part,
.wp-block-template-part,
.wp-site-blocks > header,
.wp-site-blocks > footer {
  background-color: var(--bg) !important;
  color: var(--fg);
}

/* Groups used inside the header (the actual bar) */
header.wp-block-template-part .wp-block-group,
.wp-site-blocks > header .wp-block-group {
  background-color: var(--bg) !important;
}

/* Footer: match CRT, with a top border to separate it from content */
footer.wp-block-template-part,
.wp-site-blocks > footer {
  border-top: 2px solid var(--border);
  color: var(--fg-dim);
  font-size: 0.9em;
}
footer.wp-block-template-part .wp-block-group,
.wp-site-blocks > footer .wp-block-group {
  background-color: var(--bg) !important;
}
footer.wp-block-template-part a,
.wp-site-blocks > footer a {
  color: var(--link);
}
footer.wp-block-template-part a:hover,
.wp-site-blocks > footer a:hover {
  color: var(--link-hover);
}
html.light footer.wp-block-template-part,
html.light .wp-site-blocks > footer {
  color: var(--fg-dim);
  border-top-color: var(--border);
}

/* Site title should read as CRT bright green (dark) / black (light) */
.wp-block-site-title a {
  color: var(--fg-bright);
  text-shadow: 0 0 4px rgba(0, 255, 0, 0.4);
}
html.light .wp-block-site-title a {
  color: var(--fg);
  text-shadow: none;
}

/* ========== LINKS (reinforce over theme.json/parent) ========== */
a, .wp-block-post-content a, .entry-content a,
.wp-block-navigation a, .wp-block-navigation__container a {
  color: var(--link);
  text-decoration: none;
}
a:hover, a:focus,
.wp-block-navigation a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}
html.light a,
html.light .wp-block-navigation a {
  color: var(--link);
}

/* ========== LOGO ========== */
.wp-block-site-logo img,
#page-logo {
  image-rendering: pixelated;
  max-height: 60px;
  width: auto;
}

/* ========== BUTTONS (core + EDD) ========== */
/* Core block buttons */
.wp-block-button__link,
.wp-element-button,
button,
input[type="submit"],
input[type="button"],
/* Easy Digital Downloads buttons */
.edd-submit,
.edd-submit.button,
#edd-purchase-button,
.edd_purchase_submit_wrapper .edd-add-to-cart,
.edd-add-to-cart,
.edd_go_to_checkout {
  background: var(--code-bg) !important;
  color: var(--fg-bright) !important;
  border: 2px solid var(--fg-bright) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0, 255, 0, 0.4);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.edd-submit:hover,
#edd-purchase-button:hover,
.edd-add-to-cart:hover,
.edd_go_to_checkout:hover {
  background: var(--fg-bright) !important;
  color: var(--bg) !important;
  box-shadow: 0 0 16px rgba(0, 255, 0, 0.7);
  transform: translateY(-1px);
  text-shadow: none;
}

/* Light / OpenBoot mode buttons: black on white, boxy, no glow */
html.light .wp-block-button__link,
html.light .wp-element-button,
html.light button,
html.light input[type="submit"],
html.light input[type="button"],
html.light .edd-submit,
html.light #edd-purchase-button,
html.light .edd-add-to-cart,
html.light .edd_go_to_checkout {
  background: var(--code-bg) !important;
  color: var(--fg) !important;
  border: 2px solid #000 !important;
  text-shadow: none;
  box-shadow: none;
}
html.light .wp-block-button__link:hover,
html.light .wp-element-button:hover,
html.light button:hover,
html.light .edd-submit:hover,
html.light #edd-purchase-button:hover,
html.light .edd-add-to-cart:hover,
html.light .edd_go_to_checkout:hover {
  background: #000 !important;
  color: #fff !important;
  box-shadow: none;
}

/* ========== EDD STRUCTURE (prices, cart, downloads) ========== */
.edd_price,
.edd-price,
.edd_download_purchase_form .edd_price_options {
  color: var(--fg-bright);
  font-family: var(--font-mono);
}

.edd_download_purchase_form,
.edd-cart,
.edd_cart_amount,
#edd_checkout_cart,
.edd_downloads_list .edd_download {
  border: 1px solid var(--border);
  background: var(--sidebar-bg);
}
html.light .edd_download_purchase_form,
html.light .edd-cart,
html.light #edd_checkout_cart,
html.light .edd_downloads_list .edd_download {
  background: var(--sidebar-bg);
  border-color: var(--border);
}

/* Checkout form fields */
#edd_checkout_form_wrap input[type="text"],
#edd_checkout_form_wrap input[type="email"],
#edd_checkout_form_wrap input[type="password"],
#edd_checkout_form_wrap select,
#edd_checkout_form_wrap textarea {
  background: var(--code-bg);
  color: var(--fg);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  border-radius: 0;
}

/* EDD notices / messages */
.edd_errors,
.edd-alert {
  border: 1px solid var(--border);
  background: var(--code-bg);
  color: var(--fg-bright);
  border-radius: 0;
}

/* ========== ASCIIDOCTOR-IMPORTED CONTENT (a2wp) ========== */
/* Content imported via the a2wp helper carries Asciidoctor wrapper classes
   rather than core block classes. Map them onto the CRT look. */
.entry-content .paragraph,
.wp-block-post-content .paragraph { margin: 0 0 1rem; }

.entry-content .listingblock pre,
.entry-content .literalblock pre,
.wp-block-post-content .listingblock pre,
.wp-block-post-content .literalblock pre {
  background: var(--code-bg);
  color: var(--fg-bright);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  border-radius: 0;
  padding: 0.7rem 1rem;
  overflow-x: auto;
}
html.light .entry-content .listingblock pre,
html.light .wp-block-post-content .listingblock pre { color: var(--fg); }

.entry-content .admonitionblock,
.wp-block-post-content .admonitionblock {
  border: 1px solid var(--border);
  background: var(--sidebar-bg);
  padding: 0.6rem 0.9rem;
  margin: 1rem 0;
}
.entry-content .admonitionblock td.icon,
.wp-block-post-content .admonitionblock td.icon { color: var(--fg-bright); font-weight: bold; }

.entry-content .sect1 > h2,
.entry-content .sect2 > h3,
.wp-block-post-content .sect1 > h2 { /* inherit heading styles already defined */ }

.entry-content .ulist ul,
.entry-content .olist ol { margin: 0.5rem 0 1rem 1.4rem; }

/* ========== THEME TOGGLE BUTTON ========== */
#theme-toggle {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--fg-bright);
  background: var(--code-bg);
  color: var(--fg-bright);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.55);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
#theme-toggle:hover {
  transform: scale(1.1);
  background: var(--border);
  box-shadow: 0 0 16px rgba(0, 255, 0, 0.7);
}
html.light #theme-toggle {
  border-color: #000;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
}

/* ========== RESPONSIVE / MOBILE ==========
   The site is responsive (same HTML to all devices; layout adapts to the
   viewport width via these rules). WordPress already outputs the
   <meta name="viewport"> tag, so these media queries do the fine-tuning. */

/* Tablets and small laptops */
@media (max-width: 1024px) {
  body { font-size: 18px; }
}

/* Phones */
@media (max-width: 600px) {
  body {
    font-size: 16px;
    line-height: 1.45;
  }

  /* Tighter side padding so content isn't crammed. */
  .wp-site-blocks,
  .wp-block-group.has-global-padding {
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
  }

  /* Headings scale down so long titles don't overflow. */
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.25em; }
  h3 { font-size: 1.1em; }

  /* Code blocks: smaller text, scroll horizontally instead of breaking layout. */
  pre, .wp-block-code, .listingblock pre {
    font-size: 0.8em;
    padding: 0.6rem 0.7rem;
  }

  /* Tables: allow horizontal scroll on narrow screens. */
  .wp-block-table,
  .entry-content table,
  .wp-block-post-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep the theme-toggle button a touch smaller and out of the way. */
  #theme-toggle {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    top: 8px;
    left: 8px;
  }

  /* Reduce the CRT heading glow slightly on small screens for legibility. */
  h1, h2, h3, h4, h5, h6 { text-shadow: 0 0 2px rgba(0, 255, 0, 0.35); }
}

/* Respect users who ask for reduced motion: drop transitions. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}