/* CalcSolarPH article experience layer: semantic, crawlable, mobile-first components. */
.article-reading-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#059669,#14b8a6);z-index:2147483001;transition:width .12s linear}
.article-toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1.25rem 0 1.5rem;padding:.75rem 1rem;border:1px solid #d1fae5;background:#f0fdf4;border-radius:1rem;color:#475569;font-size:.75rem}
.article-toolbar button,.article-toolbar a{border:0;background:#fff;color:#047857;border-radius:.65rem;padding:.5rem .75rem;font-weight:700;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.08)}
.article-toolbar button:hover,.article-toolbar a:hover{background:#ecfdf5}
.article-toc{margin:0 0 2rem;padding:1rem 1.15rem;border:1px solid #e2e8f0;background:#f8fafc;border-radius:1.25rem}
.article-toc summary{cursor:pointer;font-weight:800;color:#0f172a}
.article-toc ol{margin:.75rem 0 0 1.25rem;display:grid;gap:.35rem}
.article-toc a{color:#047857;text-decoration:none}
.article-toc a:hover{text-decoration:underline}
.article-callout{padding:1rem 1.1rem;border-left:4px solid #10b981;background:#ecfdf5;border-radius:.75rem;color:#334155}
.solar-data-card{margin:2rem 0;padding:1.25rem;border:1px solid #dbeafe;background:linear-gradient(145deg,#f8fbff,#f0fdf4);border-radius:1.25rem;overflow:hidden}
.solar-data-card h3{margin:0;color:#0f172a;font-size:1rem;font-weight:800}
.solar-data-card p{margin:.4rem 0 1rem;color:#64748b;font-size:.8rem}
.solar-chart{display:grid;grid-template-columns:repeat(var(--chart-count),minmax(2.5rem,1fr));gap:.65rem;align-items:end;height:12rem;padding:1rem .25rem .25rem;border-bottom:1px solid #cbd5e1}
.solar-bar-wrap{height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:.4rem}
.solar-bar{display:block;flex:0 0 auto;width:min(3rem,80%);height:calc(var(--bar-height) * 1%);min-height:2px;background:linear-gradient(180deg,#10b981,#0f766e);border-radius:.55rem .55rem .2rem .2rem;transition:height .35s ease,filter .2s ease}
.solar-bar-wrap:hover .solar-bar,.solar-bar-wrap:focus-within .solar-bar{filter:brightness(1.12)}
.solar-bar-value{font-size:.68rem;color:#0f766e;font-weight:800}
.solar-bar-label{font-size:.65rem;color:#475569;text-align:center;line-height:1.15}
.solar-data-table{width:100%;margin-top:1rem;border-collapse:collapse;font-size:.75rem}
.solar-data-table th,.solar-data-table td{padding:.55rem .6rem;border-bottom:1px solid #dbeafe;text-align:left}
.solar-data-table th{color:#0f172a;background:rgba(255,255,255,.7)}
.solar-range{width:100%;accent-color:#059669}
.solar-scenario-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.solar-scenario label{display:grid;gap:.35rem;font-size:.75rem;font-weight:700;color:#334155}
.solar-result{margin-top:1rem;padding:.8rem 1rem;background:#fff;border-radius:.8rem;color:#065f46;font-weight:800}
@media (max-width:640px){.article-toolbar{align-items:stretch}.article-toolbar button,.article-toolbar a{flex:1;text-align:center}.solar-data-card{padding:1rem}.solar-chart{gap:.3rem;height:10rem}.solar-bar-label{font-size:.58rem}.solar-scenario-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.solar-bar,.article-reading-progress{transition:none}}

/* ------------------------------------------------------------------
   Interactive illustrative materials: mobile-friendly layer
   ------------------------------------------------------------------ */
.table-interaction-hint{display:none;margin-top:1rem;font-size:.68rem;font-weight:700;color:#64748b;text-align:center}
.table-cell-highlight{display:none;position:absolute;align-items:center;justify-content:center;padding:0 .4rem;background:rgba(5,150,105,.12);border:2px solid #059669;border-radius:.5rem;font-size:.75rem;font-weight:700;color:#065f46;pointer-events:none;z-index:2;text-align:center;line-height:1.3;overflow:hidden;word-break:break-word;backdrop-filter:blur(2px)}
.solar-data-table{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.solar-data-table td,.solar-data-table th{max-width:18rem}
/* Chart entrance animation when scrolled into view */
.solar-chart{height:0;opacity:0;transition:height .4s ease,opacity .4s ease}
.solar-chart-visible{height:12rem;opacity:1}
.solar-bar-wrap{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.solar-chart-visible .solar-bar-wrap{opacity:1;transform:none}
.solar-chart-visible .solar-bar-wrap:nth-child(2){transition-delay:.08s}
.solar-chart-visible .solar-bar-wrap:nth-child(3){transition-delay:.16s}
.solar-chart-visible .solar-bar-wrap:nth-child(4){transition-delay:.24s}
.solar-chart-visible .solar-bar-wrap:nth-child(5){transition-delay:.32s}
.solar-chart-visible .solar-bar-wrap:nth-child(6){transition-delay:.4s}
.solar-bar-wrap:focus-within .solar-bar-value,.solar-bar-wrap:active .solar-bar-value{color:#047857}
/* Lightbox for content illustrations */
.article-lightbox{position:fixed;inset:0;z-index:2147483002;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(15,23,42,.88);opacity:0;pointer-events:none;transition:opacity .25s ease;padding:1rem}
.article-lightbox-open{opacity:1;pointer-events:auto}
.article-lightbox img{max-width:100%;max-height:calc(100dvh - 5rem);border-radius:1rem;box-shadow:0 20px 50px rgba(0,0,0,.5);object-fit:contain;transform:scale(.96);transition:transform .25s ease}
.article-lightbox-open img{transform:scale(1)}
.article-lightbox-caption{margin-top:.75rem;color:#f1f5f9;font-size:.8rem;text-align:center;max-width:48rem;line-height:1.4}
.article-lightbox-close{position:absolute;top:.75rem;right:.75rem;width:2.75rem;height:2.75rem;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid #cbd5e1;background:#fff;color:#0f172a;font-size:1.3rem;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.3);cursor:pointer}
@media (max-width:640px){
  .table-interaction-hint{display:block}
  .solar-chart-visible{height:10rem}
  .solar-data-card{margin:1.5rem 0}
}
@media (prefers-reduced-motion:reduce){.solar-bar,.article-reading-progress,.solar-chart,.solar-bar-wrap,.article-lightbox img,.article-lightbox{transition:none}}

/* ============================================================
   Professional Article Enhancements (Aug 2026)
   FAQ Accordion, Typography, Interactive Elements
   ============================================================ */

/* --- FAQ Accordion --- */
.faq-accordion { margin: 1.5rem 0; border: 1px solid #e2e8f0; border-radius: 1rem; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.faq-item { border-bottom: 1px solid #f1f5f9; }
.faq-item:last-child { border-bottom: none; }
.faq-question { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; background: transparent; border: none; cursor: pointer; text-align: left; font-size: 0.95rem; font-weight: 700; color: #1e293b; line-height: 1.4; transition: background 0.2s ease, color 0.2s ease; }
.faq-question:hover { background: #f8fafc; color: #047857; }
.faq-question .faq-icon { flex-shrink: 0; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #ecfdf5; color: #059669; font-size: 0.7rem; transition: transform 0.3s ease, background 0.2s ease; }
.faq-item.active .faq-icon { transform: rotate(45deg); background: #059669; color: #fff; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; }
.faq-item.active .faq-answer { max-height: 500px; padding: 0 1.25rem 1.25rem; }
.faq-answer p { color: #475569; font-size: 0.9rem; line-height: 1.7; margin: 0; }
.faq-answer p + p { margin-top: 0.5rem; }

/* --- Enhanced Heading Styles --- */
[data-article-content] h2 { position: relative; padding-left: 1rem; border-left: 4px solid #10b981; margin-top: 2.5rem; margin-bottom: 1rem; }
[data-article-content] h2:first-child { margin-top: 1rem; }
[data-article-content] h3 { color: #334155; }

/* --- Improved Paragraph Styling --- */
[data-article-content] p { line-height: 1.8; color: #374151; font-size: 0.95rem; }
[data-article-content] p + p { margin-top: 1rem; }

/* --- Enhanced Table Styling --- */
[data-article-content] table { border-radius: 0.75rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
[data-article-content] table thead th { background: linear-gradient(135deg, #065f46, #047857); color: #fff; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.85rem 1rem; }
[data-article-content] table tbody td { padding: 0.75rem 1rem; border-bottom: 1px solid #f1f5f9; }
[data-article-content] table tbody tr:hover { background: #f0fdf4; }
[data-article-content] table tbody tr:last-child td { border-bottom: none; }

/* --- Enhanced Callout/Note Boxes --- */
.article-callout { padding: 1.25rem 1.5rem; border-radius: 0.75rem; margin: 1.5rem 0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.article-callout-info { background: #eff6ff; border-left: 4px solid #3b82f6; }
.article-callout-warning { background: #fffbeb; border-left: 4px solid #f59e0b; }
.article-callout-success { background: #ecfdf5; border-left: 4px solid #10b981; }
.article-callout-tip { background: #faf5ff; border-left: 4px solid #8b5cf6; }

/* --- Image Enhancement --- */
[data-article-content] img { border-radius: 0.75rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s ease; }
[data-article-content] img:hover { transform: scale(1.01); }
[data-article-content] figure { margin: 1.5rem 0; }
[data-article-content] figcaption { font-size: 0.8rem; color: #64748b; text-align: center; margin-top: 0.5rem; font-style: italic; }

/* --- Reading Progress Bar (already exists, enhanced) --- */
.article-reading-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, #10b981, #059669); z-index: 9999; transition: width 0.1s ease; }

/* --- Smooth scroll for TOC links --- */
[data-article-toc] a { scroll-margin-top: 4rem; }

/* --- Mobile responsive --- */
@media (max-width: 640px) {
  .faq-question { padding: 0.85rem 1rem; font-size: 0.9rem; }
  .faq-item.active .faq-answer { padding: 0 1rem 1rem; }
  [data-article-content] h2 { font-size: 1.15rem; }
  [data-article-content] p { font-size: 0.9rem; }
  [data-article-content] table { font-size: 0.8rem; }
}

/* FAQ items hidden by JS accordion (prevent layout shift) */
.faq-accordion ~ h3[style*="display: none"],
.faq-accordion ~ p[style*="display: none"] {
  display: none !important;
}

/* Noscript fallback - show FAQ as regular content if JS disabled */
noscript .faq-accordion { display: none; }

/* ============================================================
   Back to Top Button
   ============================================================ */
.article-back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  background: #059669;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

.article-back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.article-back-to-top:hover {
  background: #047857;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

.article-back-to-top:active {
  transform: translateY(0);
}