/*
 Theme Name:   IntrovertLogic
 Template:     astra
 Version:      1.0.0
 Description:  B&W child theme for introvertlogic.com — accent from cover image
 Author:       Thyne
 Author URI:   https://introvertlogic.com
*/

/* =============================================
   FONTS — Bebas Neue (headings) + Sarabun (Thai body)
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Sarabun:wght@300;400;600;700&display=swap');

/* =============================================
   GLOBAL COLOR OVERRIDE — B&W Base
   Override Astra's palette system entirely
   ============================================= */
:root {
  /* Astra palette hijack */
  --ast-global-color-0: var(--post-accent, #ffffff);  /* accent → from cover */
  --ast-global-color-1: #e0e0e0;  /* body text on dark */
  --ast-global-color-2: #ffffff;  /* headings on dark */
  --ast-global-color-3: #888888;  /* meta/muted */
  --ast-global-color-4: #1a1a1a;  /* surface */
  --ast-global-color-5: #0d0d0d;  /* background */
  --ast-global-color-6: #111111;  /* alt bg */
  --ast-global-color-7: #e0e0e0;  /* light text */
  --ast-global-color-8: #ffffff;  /* pure white */

  /* Custom tokens */
  --post-accent: #ffffff;         /* fallback — overridden per-post by PHP */
  --bg-dark: #0d0d0d;
  --bg-card: #ffffff;
  --text-on-dark: #e0e0e0;
  --text-on-light: #0d0d0d;
  --meta-color: #888888;
}

/* =============================================
   BASE — Dark background, white cards
   ============================================= */
body,
.ast-separate-container,
.ast-plain-container {
  background-color: var(--bg-dark) !important;
  color: var(--text-on-dark);
  font-family: 'Sarabun', sans-serif;
  font-size: 17px;
  line-height: 1.8;
}

/* =============================================
   TYPOGRAPHY
   ============================================= */
h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-blog-single-element .entry-title {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0.03em;
  line-height: 1.15;
}

/* Single post title — big */
.single .entry-title {
  font-size: clamp(40px, 7vw, 72px);
  margin-bottom: 0.3em;
}

/* Meta text */
.entry-meta,
.entry-meta *,
.posted-on,
.cat-links,
.byline {
  font-family: 'Sarabun', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--meta-color);
}

/* =============================================
   CONTENT AREA — White card on dark bg
   ============================================= */
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .comment-respond,
.ast-separate-container .ast-comment-list li {
  background-color: var(--bg-card);
  color: var(--text-on-light);
  border-radius: 0 !important;  /* เหลี่ยมทุกอย่าง */
}

/* Text inside cards */
.entry-content,
.entry-content p,
.entry-content li {
  color: var(--text-on-light);
  font-family: 'Sarabun', sans-serif;
  font-size: 17px;
  line-height: 1.8;
}

/* Headings inside cards */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  color: var(--text-on-light);
}

/* Content width */
.entry-content {
  max-width: 720px;
  margin: 0 auto;
}

/* =============================================
   LINKS — accent color from cover
   ============================================= */
.entry-content a {
  color: var(--post-accent, #000000);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.entry-content a:hover {
  text-decoration-thickness: 2px;
}

/* =============================================
   BLOCKQUOTE
   ============================================= */
.entry-content blockquote {
  border-left: 3px solid var(--post-accent, #000000);
  margin-left: 0;
  padding-left: 1.5em;
  font-style: italic;
  color: #555555;
  font-size: 1.1em;
  border-radius: 0 !important;
}

/* =============================================
   BUTTONS — เหลี่ยม, B&W
   ============================================= */
.ast-button,
.wp-block-button__link,
button,
input[type="submit"] {
  border-radius: 0 !important;
  background: #ffffff;
  color: #0d0d0d;
  border: 1px solid #ffffff;
  padding: 10px 24px;
  font-family: 'Sarabun', sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ast-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

/* =============================================
   HEADER — minimal, dark
   ============================================= */
#masthead,
.site-header,
.ast-primary-header {
  background-color: var(--bg-dark) !important;
  border-bottom: 1px solid #222222;
  box-shadow: none;
}

.site-title a,
.ast-site-identity .site-title a {
  color: #ffffff !important;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.main-header-menu a,
.ast-header-sections-navigation a {
  color: #e0e0e0 !important;
  font-family: 'Sarabun', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.main-header-menu a:hover,
.ast-header-sections-navigation a:hover {
  color: #ffffff !important;
}

/* =============================================
   BLOG ARCHIVE — cards on dark bg
   ============================================= */
.ast-separate-container .ast-article-post {
  border-radius: 0 !important;
  margin-bottom: 2rem;
}

.blog .ast-article-post .entry-title a,
.archive .ast-article-post .entry-title a {
  color: var(--text-on-light);
}
.blog .ast-article-post .entry-title a:hover,
.archive .ast-article-post .entry-title a:hover {
  color: var(--post-accent, #555555);
  text-decoration: none;
}

/* Featured image — full width, no rounded */
.post-thumb img,
.ast-blog-featured-section img,
.attachment-large,
.wp-post-image {
  border-radius: 0 !important;
  width: 100%;
  height: auto;
}

/* =============================================
   FOOTER — black
   ============================================= */
.site-footer,
#colophon,
.ast-footer-overlay {
  background-color: #000000 !important;
  color: #888888;
  border-top: 1px solid #222222;
}
.site-footer a { color: #aaaaaa; }
.site-footer a:hover { color: #ffffff; }

/* =============================================
   ACCENT ELEMENTS — var(--post-accent)
   ============================================= */
.single .entry-title {
  border-bottom: 3px solid var(--post-accent, #ffffff);
  padding-bottom: 0.2em;
}

hr {
  border-color: var(--post-accent, #333333);
}

/* Category/tag badges */
.cat-links a,
.tags-links a {
  color: var(--post-accent, #ffffff) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--post-accent, #ffffff);
}

/* =============================================
   NO BORDER-RADIUS — global override
   ============================================= */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* =============================================
   SIDEBAR — remove if not needed
   ============================================= */
.ast-separate-container #secondary {
  background: transparent;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .single .entry-title {
    font-size: clamp(32px, 8vw, 48px);
  }
  body {
    font-size: 16px;
  }
}