/* ==========================================================================
   Techlist — WordPress bridge stylesheet
   Loaded after assets/css/style.css (your design, byte-for-byte unchanged).
   Almost everything WordPress needs — contact form, prose/page-hero,
   pagination, cards — already exists in style.css because your design
   file already styled contact.html/about.html/category.html etc. The
   ONLY genuinely new UI is the comment list + comment form, since no
   comments section existed in the supplied HTML pages. Built entirely
   from your existing design tokens (--border, --radius, --bg-soft,
   --brand, --text-muted) so it matches rather than looking bolted on.
   ========================================================================== */

.comments-section {
  max-width: 780px;
  margin: 48px auto 0;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.comments-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 24px;
}

.comment-list,
.comment-list .children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list .children {
  margin-left: 44px;
  margin-top: 20px;
}

.comment-list > li + li,
.comment-list .children > li + li {
  margin-top: 20px;
}

.comment-body {
  display: flex;
  gap: 14px;
  padding: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  transition: border-color var(--t-fast);
}

.comment-body .avatar {
  border-radius: 50%;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.comment-main {
  flex: 1;
  min-width: 0;
}

.comment-meta-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2px;
}

.comment-author {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text);
}

.comment-author .says {
  display: none;
}

.comment-metadata {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: block;
}

.comment-metadata a {
  color: inherit;
}
.comment-metadata a:hover {
  color: var(--brand-dark);
}

.comment-content p {
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0 0 8px;
  color: var(--text-body);
}

.comment-content p:last-child {
  margin-bottom: 0;
}

.reply {
  margin-top: 10px;
}
.reply a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-dark);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}

.reply a:hover {
  background: var(--bg-muted);
  border-color: var(--brand);
}
.reply a::before {
  content: "";
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 17 4 12 9 7'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 17 4 12 9 7'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.comment-form {
  margin-top: 32px;
}

.comment-reply-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 16px;
}
.comment-reply-title small {
  font-size: 13px;
  font-weight: 500;
  margin-left: 8px;
}
.comment-reply-title small a {
  color: var(--brand-dark);
}

.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 14.5px;
  background: var(--bg);
  color: var(--text);
  margin-bottom: 14px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.comment-form-comment textarea:focus,
.comment-form-author input:focus,
.comment-form-email input:focus,
.comment-form button:focus-visible,
.reply a:focus-visible,
.comments-pagination a:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.comment-form-comment textarea {
  resize: vertical;
  min-height: 120px;
}

.comment-form .form-submit {
  margin: 0;
}
.comment-form button[type="submit"] {
  padding: 11px 24px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 14px;
  transition: background-color var(--t-fast);
}
.comment-form button[type="submit"]:hover {
  background: var(--brand-dark);
}

.comment-notes,
.comment-form p.logged-in-as {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.comment-form p.logged-in-as a {
  color: var(--brand-dark);
}

.comments-closed {
  color: var(--text-muted);
  font-size: 14.5px;
}

.comment-awaiting-moderation {
  font-size: 13px;
  font-style: italic;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.comments-pagination {
  display: flex;
  justify-content: space-between;
  margin: 24px 0;
  font-size: 14px;
}

.comments-pagination a {
  color: var(--brand-dark);
  font-weight: 700;
  text-decoration: none;
}

/* Contact page honeypot field — invisible to people, still in the DOM for bots. */
.contact-form input[name="website"] {
  display: none;
}

/* Load-more button loading state (button text is swapped by wp-bridge.js). */
.btn-load-more:disabled {
  opacity: 0.7;
  cursor: default;
}

/* ==========================================================================
   Astra core CSS conflict resets
   ==========================================================================
   Confirmed by diffing this theme's class names against Astra's compiled
   assets/css/minified/style.min.css. These four class names are used by
   BOTH our design and Astra's own core UI, so Astra's rules apply to our
   elements too unless neutralized. Each override below uses a selector
   ONE level more specific than Astra's original (prefixed with `body`),
   which — unlike !important — wins deterministically regardless of
   stylesheet load order, so this holds even if a future Astra update
   changes its own enqueue timing.

     Astra rule                                  | Our element affected
     ---------------------------------------------|---------------------------
     body{background-color:#fff}                  | <body> — broke dark mode
     .site-header{position:relative}               | <header class="site-header">
     .site-footer{color:#fff}                       | <footer class="site-footer">
     .site-footer a{color:var(--ast-border-color)} | footer links
     .site-footer ul{margin:0;list-style-type:none} | footer <ul> columns
     .widget{text-align:center|left;margin-bottom:1em} | sidebar <section class="widget">

   (inc/enqueue.php also fixes the underlying cause by forcing our CSS to
   load after Astra's — these rules are the defensive backstop.)
   ========================================================================== */
html body {
  background: var(--bg) !important;
  color: var(--text-body) !important;
  padding-top: var(--header-h) !important;
  /* !important is a deliberate, narrowly-scoped exception here, not a
     habit — this specific rule has now been overridden twice in a row
     by something on the live site that a plain higher-specificity
     selector (html body, 0-0-0-2) still lost to, most likely either an
     inline style="" attribute WordPress/Astra/a plugin is writing
     directly onto <body>, or a very-late-printed dynamic stylesheet.
     Both cards (var(--surface)) and the header/footer/widget hardening
     just above this block DO switch correctly, confirming the
     [data-theme="dark"] variable values themselves are correct — this
     is isolated to whatever targets <body> specifically. !important is
     the only thing that reliably wins against an unknown stylesheet
     rule regardless of its specificity or load order; it will NOT win
     against an inline style="" attribute, which would need a PHP-level
     fix instead — tell me if this still doesn't work and I'll go
     looking for that instead of guessing at CSS again. */
}

/* CONFIRMED root cause of the above (found by inspecting Astra's own
   source): Astra adds one of these three classes to <body> itself via
   the body_class filter, depending on the site's Appearance > Customize
   > Layout > Container Layout setting (Plain / Separate / page-builder-
   friendly full width). Astra then colors it via its own Global Color
   Palette system (--ast-global-color-4), completely independent of our
   --bg variable, printed as dynamically-generated CSS that's very
   likely also !important and loads after ours. Same fix as above,
   applied directly to the exact classes/selector Astra uses, so this
   wins on specificity (0-0-2-0, one class higher than Astra's bare
   0-0-1-0) as well as importance — belt and braces. Scoped to dark
   mode only; Astra's own light-mode container background is untouched. */
[data-theme="dark"] .ast-plain-container,
[data-theme="dark"] .ast-separate-container,
[data-theme="dark"] .ast-page-builder-template {
  background-color: var(--bg) !important;
  background-image: none !important;
}
body .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
body .site-footer,
body .site-footer a {
  color: inherit;
}
body .site-footer a:hover {
  color: var(--brand-bright);
}
body .widget {
  text-align: left;
  margin-bottom: 0;
}

/* ==========================================================================
   WordPress core block-content dark-mode overrides
   ==========================================================================
   Anything typed directly into the_content() via the block editor (quotes,
   code, tables, galleries, buttons, etc.) is styled by WordPress core's own
   block-library stylesheet, which ships fixed colors completely independent
   of this theme's --bg/--text/--border variables — those elements do NOT
   automatically follow dark mode just because the rest of the page does.
   This re-points the handful that matter at our existing variables instead
   of introducing new hardcoded colors, scoped to dark mode only so light
   mode is untouched (core's defaults are fine there).
   ========================================================================== */
[data-theme="dark"] .post-content pre,
[data-theme="dark"] .post-content code,
[data-theme="dark"] .prose pre,
[data-theme="dark"] .prose code,
[data-theme="dark"] .wp-block-code,
[data-theme="dark"] .wp-block-preformatted {
  background: var(--bg-muted);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .post-content code,
[data-theme="dark"] .prose code {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
[data-theme="dark"] .post-content table,
[data-theme="dark"] .prose table,
[data-theme="dark"] .wp-block-table table {
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .post-content th,
[data-theme="dark"] .post-content td,
[data-theme="dark"] .prose th,
[data-theme="dark"] .prose td,
[data-theme="dark"] .wp-block-table th,
[data-theme="dark"] .wp-block-table td {
  border-color: var(--border);
}
[data-theme="dark"] .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: var(--bg-soft);
}
[data-theme="dark"] .wp-block-quote,
[data-theme="dark"] .wp-block-pullquote,
[data-theme="dark"] .post-content blockquote,
[data-theme="dark"] .prose blockquote {
  color: var(--text);
  border-color: var(--brand);
}
[data-theme="dark"] .wp-block-quote cite,
[data-theme="dark"] .wp-block-pullquote cite {
  color: var(--text-muted);
}
[data-theme="dark"] .wp-block-image figcaption,
[data-theme="dark"] .wp-block-gallery figcaption,
[data-theme="dark"] .wp-block-embed figcaption,
[data-theme="dark"] .gallery-caption,
[data-theme="dark"] .post-content figcaption,
[data-theme="dark"] .prose figcaption {
  color: var(--text-muted);
}
[data-theme="dark"] .wp-block-separator,
[data-theme="dark"] .post-content hr,
[data-theme="dark"] .prose hr {
  border-color: var(--border);
  background-color: var(--border);
}
[data-theme="dark"] .wp-block-file {
  background: var(--bg-soft);
  border-color: var(--border);
}
[data-theme="dark"] .wp-block-file a {
  color: var(--brand-bright);
}
/* Buttons inserted via the block editor's own "Buttons" block, when left
   at their default (unstyled) appearance rather than given an explicit
   color by the author — deliberately does NOT touch .has-background /
   .has-text-color, since that's a color the author chose on purpose. */
[data-theme="dark"] .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background) {
  background: var(--brand);
  color: #fff;
}
[data-theme="dark"] .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
  color: var(--text);
  border-color: currentColor;
}

/* Header nav vertical centering — hardened in case any Astra header rule
   (or a future update) reintroduces a conflicting align-items value on a
   shared ancestor. Matches the .nav rule already in style.css. */
body .site-header .nav {
  align-items: center;
}
body .site-header .nav-menu {
  align-items: center;
}

/* Custom logo (Appearance > Customize > Site Identity) — sizes/centers
   the uploaded image logo the same way the design's text wordmark was
   centered. Falls back to nothing extra when no logo is set (techlist_logo()
   then prints the original text <a class="logo">, already styled in style.css). */
.custom-logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.custom-logo-link img.custom-logo {
  max-height: 40px;
  width: auto;
  display: block;
}
.search-overlay__head .custom-logo-link img.custom-logo,
.mobile-menu__head .custom-logo-link img.custom-logo {
  max-height: 32px;
}
.footer-brand .custom-logo-link img.custom-logo {
  max-height: 34px;
  filter: none;
}
[data-theme="dark"] .footer-brand .custom-logo-link img.custom-logo {
  /* Only meaningful when NO dedicated dark-mode logo is set — in that
     case the single logo is shown as-is in dark mode too, and if it's
     a dark-on-transparent PNG this keeps it legible against the dark
     footer. The rule right after this one cancels it out specifically
     for a proper Dark Mode Logo (below), which shouldn't need it. */
  background: #fff;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
[data-theme="dark"] .footer-brand .site-logo-dark .custom-logo-link img.custom-logo {
  background: none;
  padding: 0;
  border-radius: 0;
}

/* Light/dark logo swap (Customize > Techlist Settings > Logo). Both
   logos are always in the page; only one is ever visible, chosen by
   the [data-theme] attribute already set synchronously before first
   paint (see the inline script in header.php) — so there's no flash
   between them on load. */
.site-logo-swap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.site-logo-light,
.site-logo-dark {
  display: inline-flex;
  align-items: center;
}
.site-logo-dark {
  display: none;
}
[data-theme="dark"] .site-logo-light {
  display: none;
}
[data-theme="dark"] .site-logo-dark {
  display: inline-flex;
}

/* Login/Sign Up page — error banner. Built from the design's existing
   tokens (--radius-sm, error-red already used elsewhere for validation
   states) since the original login.html mockup had no error state to
   copy from. */
.auth-error {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: #dc2626;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

/* Homepage H1 (Appearance > Customize > Techlist Settings > Homepage
   SEO). Sits between the hero and "More Stories": clearly a heading
   (not a muted label) but deliberately a step below the "More
   Stories" <h2> (clamp(22px, 2.4vw, 30px), weight 700) in visual
   weight, so it reads as the page's SEO heading rather than
   competing with the hero story for attention. Real, visible,
   on-screen text (not visually hidden) per Google's guidance that
   H1s hidden from users can be treated as unhelpful. */
.homepage-h1 {
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  text-align: center;
  max-width: 760px;
  margin: 48px auto 0;
  padding: 0 20px 32px;
}
@media (max-width: 640px) {
  .homepage-h1 {
    font-size: 19px;
    margin-top: 36px;
    padding-bottom: 24px;
  }
}