/*
 * AIC Article Styles — aligned to the live albertaindoorcomfort.com palette
 * -----------------------------------------------------------------------------
 * Rewritten 2026-04-22 to match the live site's active brand:
 *   Red #e8232a (headings, accents, emphasis)
 *   Navy blue #063896 (nav, CTA panels, links)
 *   Orange/Gold #F80 / #FF8800 (CTA buttons, highlights)
 *   Link navy #283268 (inline links — matches blockquote convention)
 *   Link hover red #e92f25
 *   Body text #323232 on white
 *   Poppins typography (already loaded theme-wide at weights 300-700)
 *
 * This replaces the earlier Alberta Hearth (Aspen Forest / Birchwood Cream)
 * palette which was the aspirational brand direction but hadn't reached the
 * live site yet. Matching what's actually there prevents visual clash with
 * the surrounding navigation, header, and footer.
 *
 * Pattern: semantic HTML with id/class hooks (unchanged from previous version).
 *   <blockquote>        → native element (theme-wide style)
 *   <section id="tldr"> → one per article, unique id
 *   <aside id="key-facts">
 *   <aside class="objection">     → repeating
 *   <details class="faq-item">    → repeating; native <details>/<summary>
 *   <section id="cta-mid">        → one per article
 *   <footer id="cta-closing">     → one per article
 *
 * All rules scoped under .aic-article — no leakage to pages without the wrapper.
 */

/* Poppins is already loaded theme-wide via custom.css @import. No extra font request. */

/* -----------------------------------------------------------------------------
 * Palette + type tokens (scoped)
 * -------------------------------------------------------------------------- */
.aic-article {
  --aic-red:          #e8232a;
  --aic-red-hover:    #e92f25;
  --aic-red-light:    rgba(232, 35, 42, 0.08);
  --aic-red-accent:   #ea1303;

  --aic-navy:         #063896;
  --aic-navy-dark:    #283268;
  --aic-navy-light:   rgba(6, 56, 150, 0.08);

  --aic-gold:         #FF8800;
  --aic-gold-hover:   #e67a00;

  --aic-text:         #323232;
  --aic-text-muted:   #4A4A4A;
  --aic-text-light:   #6b6b6b;

  --aic-bg:           #FFFFFF;
  --aic-bg-subtle:    #f5f5f5;
  --aic-border:       #e5e5e5;

  /* Inline link color — "Disney blue" per Xander. Brighter than the navy
     headers so links stand out without competing with H1/H2 hierarchy. */
  --aic-link:         #1E90FF;
  --aic-link-hover:   var(--aic-red-hover);

  --aic-font:         "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --aic-font-mono:    "Roboto Mono", "SF Mono", Menlo, monospace;

  --aic-radius:       6px;
  --aic-radius-btn:   4px;
  --aic-shadow:       0 2px 12px rgba(0, 0, 0, 0.08);

  /* Full-width container — Xander pads content via Thrive on the page side. */
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: var(--aic-text);
  font-family: var(--aic-font);
  font-size: 17px;
  line-height: 1.65;
  background: var(--aic-bg);
}

/* -----------------------------------------------------------------------------
 * Typography — all Poppins, matching site convention
 * -------------------------------------------------------------------------- */
.aic-article h1 {
  font-family: var(--aic-font);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.5vw + 0.8rem, 2.75rem);
  line-height: 1.2;
  color: var(--aic-navy);
  margin: 2rem 0 1.25rem;
  letter-spacing: -0.01em;
}

.aic-article h2 {
  font-family: var(--aic-font);
  font-weight: 700;
  font-size: clamp(1.45rem, 1.8vw + 0.7rem, 1.9rem);
  line-height: 1.25;
  color: var(--aic-red);
  margin: 2.5rem 0 1rem;
}

.aic-article h3 {
  font-family: var(--aic-font);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--aic-navy);
  margin: 1.75rem 0 0.6rem;
}

.aic-article h4 {
  font-family: var(--aic-font);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--aic-text);
  margin: 1.5rem 0 0.5rem;
}

.aic-article p { margin: 0 0 1.15rem; }

.aic-article a {
  color: var(--aic-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.aic-article a:hover { color: var(--aic-link-hover); }

.aic-article strong { font-weight: 600; color: var(--aic-text); }

.aic-article ul,
.aic-article ol { margin: 0 0 1.15rem; padding-left: 1.5rem; }

.aic-article li { margin-bottom: 0.4rem; }

.aic-article hr {
  border: 0;
  height: 1px;
  background: var(--aic-border);
  margin: 2.5rem 0;
}

/* -----------------------------------------------------------------------------
 * <blockquote> — article-scoped, quieter version of the theme's red-frame quote
 * (site-wide blockquote keeps its SuperMom badge. Inside .aic-article it's a
 *  clean pull-quote with just a left red bar — less visual competition mid-read.)
 * -------------------------------------------------------------------------- */
.aic-article blockquote {
  position: static !important;
  width: auto !important;
  padding: 0.5rem 0 0.5rem 1.5rem !important;
  margin: 1.75rem 0 !important;
  border-left: 4px solid var(--aic-red) !important;
  border-bottom: 0 !important;
  background: transparent !important;
  color: var(--aic-text) !important;
  font-size: 1.15rem !important;
  font-family: var(--aic-font);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
}

.aic-article blockquote::before,
.aic-article blockquote::after { content: none !important; display: none !important; }

.aic-article blockquote cite {
  display: block;
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--aic-text-muted);
  margin-top: 0.4rem;
}

/* -----------------------------------------------------------------------------
 * #tldr — TL;DR summary (one per article)
 * -------------------------------------------------------------------------- */
.aic-article #tldr {
  background: var(--aic-red-light);
  border-left: 4px solid var(--aic-red);
  border-radius: var(--aic-radius);
  padding: 1.1rem 1.4rem;
  margin: 1.25rem 0 1.75rem;
  font-size: 1rem;
}

.aic-article #tldr::before {
  content: "TL;DR";
  display: block;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aic-red);
  margin-bottom: 0.4rem;
}

.aic-article #tldr p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
 * #key-facts — Stats callout card (one per article)
 * -------------------------------------------------------------------------- */
.aic-article #key-facts {
  background: var(--aic-navy-light);
  border: 1px solid rgba(6, 56, 150, 0.15);
  border-radius: var(--aic-radius);
  padding: 1.4rem 1.6rem;
  margin: 1.75rem 0;
  box-shadow: var(--aic-shadow);
}

.aic-article #key-facts h3 {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--aic-navy);
  margin: 0 0 0.6rem;
  letter-spacing: 0;
}

.aic-article #key-facts ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.aic-article #key-facts li {
  padding: 0.35rem 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(6, 56, 150, 0.08);
  font-size: 0.95rem;
  line-height: 1.5;
}

.aic-article #key-facts li:last-child { border-bottom: 0; }

/* -----------------------------------------------------------------------------
 * .objection — "Common Question" card (repeating)
 * -------------------------------------------------------------------------- */
.aic-article .objection {
  border: 1px solid var(--aic-border);
  border-left: 3px solid var(--aic-navy);
  border-radius: var(--aic-radius);
  padding: 1.1rem 1.4rem;
  margin: 1.25rem 0;
  background: var(--aic-bg);
}

.aic-article .objection::before {
  content: "Common Question";
  display: block;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aic-red);
  margin-bottom: 0.35rem;
}

.aic-article .objection h4 {
  font-size: 1.05rem;
  color: var(--aic-navy);
  margin: 0 0 0.4rem;
}

.aic-article .objection p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
 * .faq-item — Snippet-eligible FAQ (repeating; native <details>/<summary>)
 * -------------------------------------------------------------------------- */
.aic-article .faq-item {
  border-bottom: 1px solid var(--aic-border);
  padding: 0.9rem 0;
}

.aic-article .faq-item:first-of-type { border-top: 1px solid var(--aic-border); }

.aic-article .faq-item summary {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--aic-navy);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2rem;
  user-select: none;
}

.aic-article .faq-item summary::-webkit-details-marker { display: none; }

.aic-article .faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -0.15rem;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--aic-red);
  transition: transform 0.15s ease;
  line-height: 1;
}

.aic-article .faq-item[open] summary::after {
  content: "\2212"; /* minus sign */
}

.aic-article .faq-item > div { margin-top: 0.6rem; color: var(--aic-text); }
.aic-article .faq-item > div p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
 * #cta-mid — Mid-article CTA (one per article, roughly 2/3 through)
 * -------------------------------------------------------------------------- */
.aic-article #cta-mid {
  background: var(--aic-navy);
  color: #fff;
  border-radius: var(--aic-radius);
  padding: 1.75rem 1.6rem;
  margin: 2.25rem 0;
  text-align: center;
  box-shadow: var(--aic-shadow);
}

/* Defensive reset — theme-wide text-shadow + stroke bleed through onto the
   white-on-navy CTA heading and create a striped/outlined look. Kill all
   inherited decorations inside the CTA panel. */
.aic-article #cta-mid,
.aic-article #cta-mid * {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.aic-article #cta-mid h3 {
  font-weight: 700;
  font-size: 1.45rem;
  color: #fff;
  margin: 0 0 0.4rem;
}

.aic-article #cta-mid p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1.25rem;
}

.aic-article #cta-mid a[href^="/"],
.aic-article #cta-mid a[href^="http"] {
  display: inline-block;
  background: var(--aic-gold);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--aic-radius-btn);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.aic-article #cta-mid a[href^="/"]:hover,
.aic-article #cta-mid a[href^="http"]:hover {
  background: var(--aic-gold-hover);
  color: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}

.aic-article #cta-mid a[href^="tel:"] {
  display: block;
  background: transparent;
  font-family: var(--aic-font-mono);
  font-size: 0.95rem;
  color: #fff;
  margin-top: 0.9rem;
  text-decoration: none;
  padding: 0;
}

.aic-article #cta-mid a[href^="tel:"]:hover { color: var(--aic-gold); }

.aic-article #cta-mid a[href^="tel:"] span {
  opacity: 0.7;
  margin-right: 0.35rem;
}
/* Inline ::after as a non-breaking-space guarantee — some themes strip
   margin on inline spans inside anchors; the NBSP character survives anything. */
.aic-article #cta-mid a[href^="tel:"] span::after {
  content: "\00A0";
}

/* -----------------------------------------------------------------------------
 * #cta-closing — Closing CTA (one per article, final element)
 * -------------------------------------------------------------------------- */
.aic-article #cta-closing {
  border-top: 2px solid var(--aic-red);
  padding-top: 1.75rem;
  margin-top: 2.5rem;
  text-align: center;
}

.aic-article #cta-closing .tagline {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--aic-navy);
  margin-bottom: 0.4rem;
}

.aic-article #cta-closing .meta {
  font-size: 0.85rem;
  color: var(--aic-text-muted);
  margin-bottom: 1.25rem;
}

.aic-article #cta-closing a[href^="/"],
.aic-article #cta-closing a[href^="http"] {
  display: inline-block;
  background: var(--aic-red);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--aic-radius-btn);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.aic-article #cta-closing a[href^="/"]:hover,
.aic-article #cta-closing a[href^="http"]:hover {
  background: #c41a20;
  color: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}

.aic-article #cta-closing a[href^="tel:"] {
  display: block;
  font-family: var(--aic-font-mono);
  font-size: 0.95rem;
  color: var(--aic-navy);
  margin-top: 0.8rem;
  text-decoration: none;
}

.aic-article #cta-closing a[href^="tel:"]:hover { color: var(--aic-red-hover); }

.aic-article #cta-closing a[href^="tel:"] span {
  opacity: 0.65;
  margin-right: 0.35rem;
}
.aic-article #cta-closing a[href^="tel:"] span::after {
  content: "\00A0";
}

/* -----------------------------------------------------------------------------
 * Inline phone links in body text
 * -------------------------------------------------------------------------- */
.aic-article p a[href^="tel:"],
.aic-article li a[href^="tel:"] {
  font-family: var(--aic-font-mono);
  font-weight: 500;
  color: var(--aic-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.aic-article p a[href^="tel:"]:hover,
.aic-article li a[href^="tel:"]:hover { color: var(--aic-red-hover); }

/* -----------------------------------------------------------------------------
 * Tables (markdown-generated)
 * -------------------------------------------------------------------------- */
.aic-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.aic-article th,
.aic-article td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--aic-border);
}

.aic-article thead th {
  background: var(--aic-navy);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.aic-article tbody tr:hover { background: var(--aic-bg-subtle); }

/* -----------------------------------------------------------------------------
 * Hero image + meta
 * -------------------------------------------------------------------------- */
.aic-article figure.hero,
.aic-article .article-hero {
  margin: 0 0 1.75rem;
  border-radius: var(--aic-radius);
  overflow: hidden;
}

.aic-article figure.hero img,
.aic-article .article-hero img {
  display: block;
  width: 100%;
  height: auto;
}

.aic-article .article-meta {
  font-size: 0.85rem;
  color: var(--aic-text-muted);
  margin: 0 0 1.75rem;
}

/* -----------------------------------------------------------------------------
 * Responsive
 * -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .aic-article { font-size: 16px; padding: 0 1.15rem; }
  .aic-article #key-facts,
  .aic-article #cta-mid { padding: 1.1rem; }
  .aic-article #cta-mid h3 { font-size: 1.2rem; }
  .aic-article .objection { padding: 0.9rem 1rem; }
  .aic-article .faq-item summary { font-size: 1rem; padding-right: 1.8rem; }
  .aic-article h1 { font-size: 1.9rem; }
  .aic-article h2 { font-size: 1.4rem; }
}

/* -----------------------------------------------------------------------------
 * Focus visibility on CTA buttons (WCAG 2.1 AA)
 * -------------------------------------------------------------------------- */
.aic-article #cta-mid a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.aic-article #cta-closing a:focus-visible {
  outline: 2px solid var(--aic-navy);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
 * Print
 * -------------------------------------------------------------------------- */
@media print {
  .aic-article { background: white; color: #000; }
  .aic-article #cta-mid,
  .aic-article #cta-closing a[href^="/"] {
    background: none !important;
    color: #000 !important;
    border: 1px solid #000;
  }
  .aic-article .faq-item[open] summary::after,
  .aic-article .faq-item summary::after { content: ""; }
  .aic-article .faq-item > div { display: block !important; }
}