/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Template: generatepress
Author: Tom Usborne
Author URI: https://tomusborne.com
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the new block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS and is translated into over 25 languages by our amazing community of users. A few of our many features include microdata integration, 9 widget areas, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover) and navigation color presets. Learn more and check out our powerful premium version at https://generatepress.com
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 3.0.3.1620471214
Updated: 2021-05-08 10:53:34

*/
/* ============================================
   16. ARTICLE TEMPLATE COMPONENTS
   Quick Answer / Accessory tiles, comparison
   recap table, FAQ accordion, last-updated badge
   ============================================ */

/* ---- Quick Answer box ---------------------------------------------
   Same single-row layout as .pt-review-box (image left, content right,
   price+button pushed right via margin-left:auto on the footer) --
   just the dark/amber palette instead of white/blue. Badge is its OWN
   separate paragraph, placed right before this Group block (a bare
   inline element as a top-level child of a Group gets silently dropped
   by Gutenberg). The Group block wraps ONLY the AAWP block. Add
   "pl-quick-answer-box" as an Additional CSS Class on that Group block. */
.pt-quick-answer-box {
  margin: 28px 0;
}

.pt-quick-answer-box .aawp-product--widget-vertical {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  border: 1px solid var(--pl-steel-line, #2B3648);
  border-radius: 14px;
  padding: 16px;
  background: var(--pl-panel, #161C26);
  box-shadow: 0 8px 24px rgba(16, 20, 27, 0.35);
  position: relative;
  overflow: hidden;
}

.pt-quick-answer-box .aawp-product--widget-vertical::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--pl-amber, #FBBA41);
}

.pt-quick-answer-box .aawp-product__image-link {
  flex-shrink: 0;
  width: 130px;
  display: block;
}

.pt-quick-answer-box .aawp-product__image {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.pt-quick-answer-box .aawp-product__content {
  flex: 1 1 auto;
  min-width: 0;
}

.pt-quick-answer-box .aawp-product__title,
.pt-quick-answer-box .aawp-product__title:visited,
.pt-quick-answer-box .aawp-product__title:hover {
  color: var(--pl-offwhite, #EDF1F5) !important;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}

.pt-quick-answer-box .aawp-product__meta:empty {
  display: none;
}

.pt-quick-answer-box .aawp-product__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  margin-left: auto;
}

.pt-quick-answer-box .aawp-product__pricing {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 16px;
  color: var(--pl-amber, #FBBA41);
  white-space: nowrap;
}

/* Higher-specificity override: chains 3 classes on the button itself
   (pl-quick-answer-box ancestor + aawp-button + aawp-button--yellow) to
   beat AAWP's own same-weight 3-class rule regardless of stylesheet load
   order -- the earlier 2-class version lost this fight every time. */
.pt-quick-answer-box .aawp-button.aawp-button--yellow,
.pt-quick-answer-box .aawp-button.aawp-button--yellow * {
  color: var(--pl-navy, #10141B) !important;
  fill: var(--pl-navy, #10141B) !important;
}

.pt-quick-answer-box .aawp-button--buy {
  background: var(--pl-amber, #FBBA41) !important;
  border-color: var(--pl-amber, #FBBA41) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .pt-quick-answer-box .aawp-product--widget-vertical {
    flex-wrap: wrap;
  }
  .pt-quick-answer-box .aawp-product__footer {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
}

/* ---- Standalone badge, "why" text, and spec chips ------------------
   Sit as separate elements immediately before/after the tile above. */
.pt-badge-standalone {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pl-navy, #10141B);
  background: var(--pl-amber, #FBBA41);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.pt-tile__why {
  color: var(--pl-navy, #10141B);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  margin: 10px 0;
}

.pt-tile__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.pt-tile__specs li {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--pl-navy, #10141B);
  background: #F5F7FA;
  border: 1px solid #E2E7ED;
  border-radius: 6px;
  padding: 5px 10px;
}

/* ---- Recommended Accessory: same pattern when the item IS on Amazon.
   Use "pl-accessory-box" as the Additional CSS Class on the Group
   block wrapping that AAWP block. (When the accessory isn't on Amazon
   at all -- like Framework -- use .pt-tile-manual instead, further down.) */
.pt-accessory-box {
  margin: 20px 0;
}

.pt-accessory-box .aawp-product--widget-vertical {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--pl-steel-line, #2B3648);
  border-radius: 14px;
  padding: 16px;
  background: #ffffff;
}

.pt-accessory-box .aawp-product__image-link { width: 100px; flex-shrink: 0; }
.pt-accessory-box .aawp-product__image { width: 100%; border-radius: 6px; }

.pt-accessory-box .aawp-product__title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--pl-navy, #10141B);
}

.pt-accessory-box .aawp-product__pricing {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: var(--pl-aawp-blue, #256aaf);
}

.pt-accessory-box .aawp-button.aawp-button--yellow,
.pt-accessory-box .aawp-button.aawp-button--yellow * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.pt-accessory-box .aawp-button--buy {
  background: var(--pl-aawp-blue, #256aaf) !important;
  border-color: var(--pl-aawp-blue, #256aaf) !important;
  border-radius: 8px !important;
}

/* ---- Comparison recap table (plain HTML table, NOT the AAWP one) ---- */
.pt-recap-table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--pl-steel-line, #2B3648);
}

.pt-recap-table th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--pl-navy, #10141B);
  color: var(--pl-offwhite, #EDF1F5);
  text-align: left;
  padding: 14px 18px;
}

.pt-recap-table td {
  padding: 14px 18px;
  color: var(--pl-navy, #10141B);
  background: #ffffff;
  border-top: 1px solid var(--pl-steel-line, #2B3648);
}

.pt-recap-table tr:nth-child(even) td {
  background: #F5F7FA;
}

.pt-recap-table td:first-child {
  font-weight: 600;
  border-left: 3px solid var(--pl-amber, #FBBA41);
}

/* ---- FAQ accordion (pure CSS, no JS needed -- native <details>/<summary>) ---- */
.pt-faq {
  margin: 28px 0;
  border-top: 1px solid var(--pl-steel-line, #2B3648);
}

.pt-faq details {
  border-bottom: 1px solid var(--pl-steel-line, #2B3648);
  padding: 18px 0;
}

.pt-faq summary {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--pl-navy, #10141B);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pt-faq summary::-webkit-details-marker { display: none; }

.pt-faq summary::after {
  content: "+";
  font-family: 'IBM Plex Mono', monospace;
  font-size: 20px;
  color: var(--pl-amber, #FBBA41);
  margin-left: 16px;
  transition: transform 0.2s ease;
}

.pt-faq details[open] summary::after {
  transform: rotate(45deg);
}

.pt-faq details p {
  margin-top: 12px;
  color: rgba(16, 20, 27, 0.75);
  font-size: 15px;
  line-height: 1.7;
}

/* ---- Last updated badge ---- */
.pt-updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--pl-navy, #10141B);
  background: #F5F7FA;
  border: 1px solid var(--pl-steel-line, #2B3648);
  border-radius: 20px;
  padding: 6px 14px;
  margin-bottom: 20px;
}

.pt-updated::before {
  content: "●";
  color: var(--pl-amber, #FBBA41);
  font-size: 10px;
}

/* ---- Review card superlative ribbon ---- */
.pt-review-badge {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pl-navy, #10141B);
  background: var(--pl-amber, #FBBA41);
  padding: 4px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
}

/* ---- Review spec chip row (replaces inline **bold** spec line) ---- */
.pt-spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 14px 16px;
  margin: 16px 0;
  background: #F5F7FA;
  border: 1px solid #E2E7ED;
  border-radius: 10px;
}

.pt-spec-row li {
  font-size: 13px;
  color: var(--pl-navy, #10141B);
}

.pt-spec-row li strong {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(16, 20, 27, 0.55);
  display: block;
  margin-bottom: 2px;
}

/* ---- Pros/Cons two-column grid ---- */
.pt-proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
}

.pt-proscons > div {
  border-radius: 10px;
  padding: 16px 18px;
}

.pt-pros { background: #F0F7F1; border: 1px solid #CFE8D3; }
.pt-cons { background: #FBF1EF; border: 1px solid #F0D2CC; }

.pt-proscons h4 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 10px 0;
}

.pt-pros h4 { color: #2E7D3A; }
.pt-cons h4 { color: #B54A3A; }

.pt-proscons ul { margin: 0; padding-left: 18px; }
.pt-proscons li { font-size: 14px; line-height: 1.6; margin-bottom: 6px; }

@media (max-width: 640px) {
  .pt-proscons { grid-template-columns: 1fr; }
}

/* ---- AAWP comparison table --------------------------------------
   Add "pl-comparison-table" as an Additional CSS Class on the Group
   block wrapping the AAWP block (template:"table" set in the AAWP
   block's own settings). CONFIRMED via DevTools: renders
   <table class="aawp-table"><tr class="aawp-product">
   <td class="aawp-table__td-thumb">...<td class="aawp-table__td-title">
   ...<td class="aawp-table__td-price">...<td class="aawp-table__td-links">
   and header cells as <th class="aawp-table__th-thumb"> etc. */
.pt-comparison-table { margin: 32px 0; }

.pt-comparison-table .aawp-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--pl-steel-line, #2B3648);
  font-family: 'Inter', sans-serif;
}

.pt-comparison-table .aawp-product {
  border-top: 1px solid #E2E7ED;
}

.pt-comparison-table .aawp-product:nth-child(even) {
  background: #F5F7FA;
}

.pt-comparison-table .aawp-table__td-thumb,
.pt-comparison-table .aawp-table__td-title,
.pt-comparison-table .aawp-table__td-price,
.pt-comparison-table .aawp-table__td-links {
  padding: 14px;
  color: var(--pl-navy, #10141B);
  text-align: center;
  vertical-align: middle;
}

.pt-comparison-table .aawp-table__td-title {
  text-align: left;
  font-weight: 600;
}

.pt-comparison-table .aawp-table__td-price {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--pl-amber, #FBBA41);
  background: var(--pl-navy, #10141B);
}

.pt-comparison-table .aawp-table__th-thumb,
.pt-comparison-table .aawp-table__th-title,
.pt-comparison-table .aawp-table__th-pricing,
.pt-comparison-table .aawp-table__th-links {
  background: var(--pl-steel-line, #2B3648) !important;
  color: var(--pl-offwhite, #EDF1F5) !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 14px 18px;
  text-align: left;
  border: none;
}

/* ---- Recommended Accessories table -- LIGHT variant of the comparison
   table above, same exact AAWP table structure, just a light header
   instead of dark so the two tables read as visually distinct at a
   glance. Use "look":"box" with fixed ASINs and "template":"table" in
   the AAWP block's own settings (not the dynamic "bestseller"/keyword
   lookup) -- ASINs are supplied per-article. Add "pl-accessories-table"
   as an Additional CSS Class on the Group block wrapping that AAWP block. */
.pt-accessories-table { margin: 32px 0; }

.pt-accessories-table .aawp-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #E2E7ED;
  font-family: 'Inter', sans-serif;
}

.pt-accessories-table .aawp-product {
  border-top: 1px solid #E2E7ED;
}

.pt-accessories-table .aawp-product:nth-child(even) {
  background: #F5F7FA;
}

.pt-accessories-table .aawp-table__td-thumb,
.pt-accessories-table .aawp-table__td-title,
.pt-accessories-table .aawp-table__td-price,
.pt-accessories-table .aawp-table__td-links {
  padding: 14px;
  color: var(--pl-navy, #10141B);
  text-align: center;
  vertical-align: middle;
}

.pt-accessories-table .aawp-table__td-title {
  text-align: left;
  font-weight: 600;
}

.pt-accessories-table .aawp-table__td-price {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: var(--pl-aawp-blue, #256aaf);
  background: #F5F7FA;
}

.pt-accessories-table .aawp-table__th-thumb,
.pt-accessories-table .aawp-table__th-title,
.pt-accessories-table .aawp-table__th-pricing,
.pt-accessories-table .aawp-table__th-links {
  background: #EDF1F5 !important;
  color: var(--pl-navy, #10141B) !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 14px 18px;
  text-align: left;
  border: none;
}

/* ---- Manual tile for products NOT sold on Amazon (e.g. Framework) --
   Fully custom HTML, no AAWP block involved at all -- safe to paste
   as one Custom HTML block exactly as written, no nesting concerns.

   Styled to match .pt-review-box (white horizontal card) so it doesn't
   stand out as a different design language -- only the badge and the
   button color (neutral slate instead of Amazon blue/amber) mark it
   as "not a normal Amazon buy box." */
.pt-tile-manual {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  border: 1px solid var(--pl-steel-line, #2B3648);
  border-radius: 14px;
  padding: 16px;
  padding-top: 36px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(16, 20, 27, 0.10);
  position: relative;
  margin: 18px 0;
}

.pt-tile-manual__badge {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pl-slate, #4A5568);
  background: #F5F7FA;
  border: 1px solid #E2E7ED;
  padding: 3px 9px;
  border-radius: 4px;
  position: absolute;
  top: 12px;
  left: 16px;
}

.pt-tile-manual__media {
  flex-shrink: 0;
  width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5F7FA;
  border-radius: 6px;
  overflow: hidden;
}

.pt-tile-manual__media img { width: 100%; height: auto; display: block; }

.pt-tile-manual > div:last-child {
  flex: 1 1 auto;
  min-width: 0;
}

.pt-tile-manual__title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--pl-navy, #10141B);
  margin: 0 0 4px 0;
}

.pt-tile-manual__why {
  color: rgba(16, 20, 27, 0.65);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 10px 0;
}

.pt-tile-manual__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pt-tile-manual__price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 600;
  color: var(--pl-slate, #4A5568);
  white-space: nowrap;
}

.pt-tile-manual__meta a {
  display: inline-block;
  background: var(--pl-slate, #4A5568);
  color: #ffffff !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none !important;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .pt-tile-manual { flex-wrap: wrap; }
}

/* ---- Single product box (used inside each review) -----------------
   Add "pl-review-box" as an Additional CSS Class on the Group block
   wrapping the AAWP block. CONFIRMED via DevTools: AAWP's single-ASIN
   "Product Box" (vertical widget) renders:
   .aawp .aawp-widget > .aawp-product.aawp-product--widget-vertical
     > .aawp-product__image-link > .aawp-product__image
     > .aawp-product__content > .aawp-product__title, .aawp-product__meta
     > .aawp-product__footer > .aawp-product__pricing, a.aawp-button--buy
   This re-lays it out horizontally (image left, details right) and full
   width, matching the rest of the review card instead of AAWP's default
   narrow vertical card. Uses --pl-aawp-blue per your own design rule that
   Amazon/AAWP widgets get the blue accent, not the amber editorial one. */
.pt-review-box { margin: 18px 0; }

.pt-review-box .aawp-product--widget-vertical {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  border: 1px solid var(--pl-steel-line, #2B3648);
  border-radius: 14px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(16, 20, 27, 0.10);
}

.pt-review-box .aawp-product__image-link {
  flex-shrink: 0;
  width: 130px;
  display: block;
}

.pt-review-box .aawp-product__image {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.pt-review-box .aawp-product__content {
  flex: 1 1 auto;
  min-width: 0;
}

.pt-review-box .aawp-product__title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--pl-navy, #10141B);
  text-decoration: none;
}

.pt-review-box .aawp-product__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  margin-left: auto;
}

.pt-review-box .aawp-product__pricing {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 16px;
  color: var(--pl-aawp-blue, #256aaf);
  white-space: nowrap;
}

/* Higher-specificity override: chains 3 classes on the button itself
   (pl-review-box ancestor + aawp-button + aawp-button--yellow) to
   beat AAWP's own same-weight 3-class rule regardless of stylesheet
   load order -- the earlier 2-class version lost this fight every time. */
.pt-review-box .aawp-button.aawp-button--yellow,
.pt-review-box .aawp-button.aawp-button--yellow * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.pt-review-box .aawp-button--buy {
  background: var(--pl-aawp-blue, #256aaf) !important;
  border-color: var(--pl-aawp-blue, #256aaf) !important;
  border-radius: 8px !important;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .pt-review-box .aawp-product--widget-vertical {
    flex-wrap: wrap;
  }
  .pt-review-box .aawp-product__footer {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
}

/* ---- Spacing tightening -------------------------------------------
   Several small sources of extra vertical gap were stacking up around
   the tiles and tables: AAWP's own wrapper divs carry their own
   margin/padding we never zeroed, the badge sits in a plain paragraph
   with the theme's default block spacing, and AAWP's own disclaimer
   line has its own top margin. Tightened here in one place rather than
   scattered across the individual component rules above. */
p:has(> .pt-badge-standalone) {
  margin-bottom: 4px !important;
}

.pt-quick-answer-box,
.pt-review-box,
.pt-accessory-box {
  margin: 8px 0 !important;
  padding: 0 !important;
}

.pt-quick-answer-box .aawp,
.pt-quick-answer-box .aawp-widget,
.pt-review-box .aawp,
.pt-review-box .aawp-widget,
.pt-accessory-box .aawp,
.pt-accessory-box .aawp-widget {
  margin: 0 !important;
  padding: 0 !important;
}

/* Gutenberg auto-inserts a "wp-block-group__inner-container" div inside
   every Group block -- the manual (non-AAWP) Framework tile has no such
   wrapper at all since it's not a Group block, which is the likely
   reason it never had this spacing problem in the first place.
   Covers all FIVE Group-wrapped components, not just the three tiles --
   comparison-table and accessories-table were missed the first time. */
.pt-quick-answer-box .wp-block-group__inner-container,
.pt-review-box .wp-block-group__inner-container,
.pt-accessory-box .wp-block-group__inner-container,
.pt-comparison-table .wp-block-group__inner-container,
.pt-accessories-table .wp-block-group__inner-container {
  margin: 0 !important;
  padding: 0 !important;
}

.pt-quick-answer-box .aawp-disclaimer,
.pt-review-box .aawp-disclaimer,
.pt-accessory-box .aawp-disclaimer,
.pt-comparison-table .aawp-disclaimer,
.pt-accessories-table .aawp-disclaimer {
  margin: 6px 0 0 !important;
}

.pt-comparison-table,
.pt-accessories-table {
  margin: 12px 0 20px !important;
}

/* ---- Tight-heading utility -----------------------------------------
   For a specific H2/H3 that immediately follows a table or tile
   component, where the theme's own default heading top-margin doesn't
   collapse with the component's bottom margin (they stack instead of
   overlapping). Apply directly in the article HTML: <h2 class="pl-tight-heading">.
   Deliberately NOT a global heading override -- only touches headings
   you explicitly tag this way. */
.pt-tight-heading {
  margin-top: 16px !important;
}

/* ============================================
   17. COMMENT FORM STYLING
   Targets WordPress CORE comment form markup
   (#commentform, .comment-form-comment, #submit,
   .logged-in-as etc.) -- these are default WP
   classes/IDs, stable across themes, confirmed
   directly from your own DevTools screenshot,
   not guessed at like the third-party AAWP output.
   ============================================ */
#comments,
#respond {
  margin-top: 32px;
  padding: 24px;
  background: #F5F7FA;
  border: 1px solid #E2E7ED;
  border-radius: 14px;
}

#comments h2,
#comments h3,
#respond h3 {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--pl-navy, #10141B);
  margin: 0 0 16px 0;
}

.logged-in-as {
  font-size: 14px;
  color: rgba(16, 20, 27, 0.7);
  margin-bottom: 16px;
}

.logged-in-as a {
  color: var(--pl-aawp-blue, #256aaf);
}

.comment-form label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(16, 20, 27, 0.6);
  display: block;
  margin-bottom: 6px;
}

.comment-form p {
  margin: 0 0 16px 0;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--pl-navy, #10141B);
  background: #ffffff;
  border: 1px solid #E2E7ED;
  border-radius: 8px;
  padding: 10px 14px;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--pl-amber, #FBBA41);
}

.form-submit input#submit {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--pl-navy, #10141B);
  background: var(--pl-amber, #FBBA41);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.form-submit input#submit:hover {
  opacity: 0.9;
}