/*
Theme Name:  Hitechstuff Blog
Theme URI:   https://www.thehitechstuff.com/blog/
Author:      Hitechstuff
Author URI:  https://www.thehitechstuff.com/
Description: Blog theme for Hitechstuff. Loads all CSS and JS from the main site (thehitechstuff.com) so the blog looks identical to the main site design.
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: hitechstuff-blog
*/

/* All visual styles are loaded from https://www.thehitechstuff.com/css/style.css
   Blog-specific overrides only below. */

/* ── BLOG-SPECIFIC STYLES ─────────────────────────────── */

/* Filter bar padding fix for /blog/ subfolder */
.blog-filter-bar {
  background: var(--black2);
  padding: 22px 80px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Pagination */
.blog-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 56px;
  flex-wrap: wrap;
}
.blog-pagination .page-numbers {
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold);
  padding: 8px 18px;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-decoration: none;
  transition: all 0.2s;
  background: transparent;
  font-family: var(--font);
}
.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
  font-weight: bold;
}
.blog-pagination .page-numbers.dots {
  border: none;
  color: var(--gray);
}

/* WordPress .alignwide / .alignfull for block editor */
.art-body .alignwide  { margin-left: -80px; margin-right: -80px }
.art-body .alignfull  { margin-left: -80px; margin-right: -80px; width: calc(100% + 160px); max-width: none }
.art-body img.alignleft  { float: left; margin: 0 24px 16px 0 }
.art-body img.alignright { float: right; margin: 0 0 16px 24px }
.art-body img.aligncenter { display: block; margin: 0 auto }
.art-body .wp-caption { max-width: 100% }
.art-body .wp-caption-text { font-size: 13px; color: var(--gray); text-align: center; margin-top: 8px }

/* Gutenberg block styles passthrough */
.art-body p        { font-size: 16px; line-height: 1.9; color: rgba(250,250,248,0.8); margin-bottom: 24px }
.art-body h2       { font-size: clamp(20px,2.5vw,28px); font-weight: bold; color: var(--white); margin: 44px 0 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(201,168,76,0.15) }
.art-body h3       { font-size: clamp(18px,2vw,22px); font-weight: bold; color: var(--gold-light); margin: 32px 0 12px }
.art-body ul, .art-body ol { padding-left: 28px; margin-bottom: 24px }
.art-body li       { font-size: 16px; line-height: 1.8; color: rgba(250,250,248,0.75); margin-bottom: 6px }
.art-body blockquote { border-left: 3px solid var(--gold); padding-left: 24px; margin: 32px 0; font-style: italic; font-size: 18px; color: var(--white) }
.art-body figure   { margin: 36px 0 }
.art-body figure img { width: 100%; display: block; border: 1px solid rgba(201,168,76,0.12) }
.art-body figcaption { font-size: 13px; color: var(--gray); text-align: center; margin-top: 8px }
.art-body a        { color: var(--gold-light); border-bottom: 1px solid rgba(201,168,76,0.3); transition: color 0.2s }
.art-body a:hover  { color: var(--gold-bright) }
.art-body pre, .art-body code { background: var(--black2); color: var(--gold-pale); padding: 2px 6px; font-size: 14px; border-radius: 3px }
.art-body pre      { padding: 20px 24px; overflow-x: auto; margin-bottom: 24px }
.art-body hr       { border: none; border-top: 1px solid var(--border); margin: 40px 0 }

/* Responsive */
@media(max-width: 768px) {
  .blog-filter-bar { padding: 16px 20px }
}
@media(max-width: 600px) {
  .blog-filter-bar { padding: 14px 16px }
  .art-body .alignwide, .art-body .alignfull { margin-left: 0; margin-right: 0; width: 100% }
}