/* ==========================================================================
   Flowwkkr — long-form content styles
   Loaded by landing.php only when a page has long-form content.
   Scoped to .longform so nothing existing is affected.
   Colours reuse the existing landing.css palette.
   ========================================================================== */

.longform{
  margin-top:56px;
  padding-top:8px;
  border-top:1px solid rgba(173,229,220,.14);
}

/* --- Section headings ------------------------------------------------- */
.longform > h2{
  font-size:clamp(26px,3.4vw,36px);
  line-height:1.15;
  letter-spacing:-.6px;
  margin:34px 0 14px;
  color:#f2fbf9;
}
.longform h3{
  font-size:clamp(20px,2.4vw,26px);
  line-height:1.25;
  letter-spacing:-.3px;
  margin:40px 0 12px;
  color:#eafaf7;
  scroll-margin-top:88px; /* keeps headings clear of the sticky header */
}
.longform h3 + p{ margin-top:0; }

/* --- Body copy -------------------------------------------------------- */
.longform p{
  max-width:78ch;
  color:#b7d3cf;
  line-height:1.85;
  font-size:16.5px;
  margin:0 0 18px;
}
.longform > h2 + p{ font-size:18px; color:#c8e2de; }

/* --- AEO/GEO extractable definition block ------------------------------
   Gives answer engines a clean, quotable definition sentence.            */
.longform .definition{
  max-width:82ch;
  margin:26px 0 30px;
  padding:20px 24px;
  border-left:3px solid #35d6c0;
  border-radius:0 12px 12px 0;
  background:linear-gradient(90deg,rgba(53,214,192,.10),rgba(53,214,192,0));
  color:#dcf3f0;
  font-size:16.5px;
  line-height:1.8;
}
.longform .definition b{ color:#7ef0dd; }

/* --- Table of contents -------------------------------------------------- */
.longform .longform-toc{
  max-width:82ch;
  margin:0 0 34px;
  padding:20px 24px;
  border:1px solid rgba(173,229,220,.16);
  border-radius:16px;
  background:rgba(6,21,26,.55);
}
.longform .longform-toc > b{
  display:block;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#7ef0dd;
  margin-bottom:12px;
}
.longform .longform-toc ul{
  margin:0;
  padding-left:20px;
  columns:2;
  column-gap:32px;
}
.longform .longform-toc li{ margin:0 0 7px; break-inside:avoid; }
.longform .longform-toc a{
  color:#c8e2de;
  text-decoration:none;
  font-size:15px;
  line-height:1.5;
}
.longform .longform-toc a:hover{ color:#7ef0dd; text-decoration:underline; }

/* --- Lists -------------------------------------------------------------- */
.longform ul{
  max-width:78ch;
  margin:0 0 22px;
  padding-left:22px;
  color:#b7d3cf;
  line-height:1.8;
}
.longform li{ margin-bottom:9px; }
.longform li::marker{ color:#35d6c0; }

/* --- Tables — horizontally scrollable on small screens ------------------
   Competitors publish tables; Flowwkkr had none. This is the pattern for
   the new data tables, and it is what keeps them usable on mobile.       */
.longform .longform-scroll{
  max-width:100%;
  margin:0 0 26px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid rgba(173,229,220,.16);
  border-radius:14px;
}
.longform .longform-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:15px;
}
.longform .longform-table th,
.longform .longform-table td{
  padding:13px 16px;
  text-align:left;
  border-bottom:1px solid rgba(173,229,220,.10);
  vertical-align:top;
}
.longform .longform-table thead th{
  background:rgba(53,214,192,.10);
  color:#7ef0dd;
  font-weight:600;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.longform .longform-table tbody tr:last-child td{ border-bottom:0; }
.longform .longform-table tbody tr:nth-child(even){ background:rgba(255,255,255,.02); }
.longform .longform-table td{ color:#b7d3cf; }
.longform .longform-table td:first-child{ color:#eafaf7; font-weight:500; }

/* --- FAQ accordion -------------------------------------------------------
   <details>/<summary> = no JS, crawlable, and Google can extract Q&A.   */
.longform .longform-faq{
  max-width:82ch;
  border:1px solid rgba(173,229,220,.14);
  border-radius:12px;
  background:rgba(6,21,26,.45);
  margin-bottom:10px;
  overflow:hidden;
}
.longform .longform-faq summary{
  cursor:pointer;
  padding:15px 20px;
  font-size:16px;
  font-weight:600;
  color:#eafaf7;
  list-style:none;
  position:relative;
  padding-right:44px;
}
.longform .longform-faq summary::-webkit-details-marker{ display:none; }
.longform .longform-faq summary::after{
  content:"+";
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  color:#7ef0dd;
  font-size:20px;
  font-weight:400;
  line-height:1;
}
.longform .longform-faq[open] summary::after{ content:"\2212"; }
.longform .longform-faq[open] summary{ border-bottom:1px solid rgba(173,229,220,.12); }
.longform .longform-faq p{
  margin:0;
  padding:15px 20px 17px;
  max-width:none;
  font-size:15.5px;
  color:#a9c8c4;
}

/* --- CTA closer --------------------------------------------------------- */
.longform .longform-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  max-width:82ch;
  margin:44px 0 0;
  padding:24px 28px;
  border:1px solid rgba(53,214,192,.28);
  border-radius:18px;
  background:linear-gradient(120deg,rgba(53,214,192,.13),rgba(53,214,192,.03));
}
.longform .longform-cta h4{
  margin:0 0 4px;
  font-size:20px;
  color:#f2fbf9;
}
.longform .longform-cta p{
  margin:0;
  font-size:15px;
  color:#a9c8c4;
  max-width:52ch;
}

/* --- Plugins page footer ------------------------------------------------
   .footer-grid is a fixed 3-column grid, but this page has 4 columns after a
   Guides list was added. Scoped to .plugins-footer so the shared layout in
   landing.php is left completely untouched. Breakpoints mirror landing.css. */
.plugins-footer{ grid-template-columns:1.5fr 1fr 1fr 1fr; }
@media(max-width:1050px){ .plugins-footer{ grid-template-columns:1fr 1fr; } }
@media(max-width:780px){ .plugins-footer{ grid-template-columns:1fr; } }

/* --- Buttons ------------------------------------------------------------
   landing.css is restyled: btn-primary / btn-glass are the current pair.
   btn-teal and btn-outline still exist but are the older names. Using the
   current pair keeps the new content looking native rather than bolted on. */
.longform .btn-teal,
.longform .btn-primary{ background:linear-gradient(135deg,var(--teal),#10ab92); }
.longform .btn-outline,
.longform .btn-glass{ background:rgba(255,255,255,.03); }

/* --- .seo-cta -----------------------------------------------------------
   Not defined in the current landing.css, so the closing CTA on every
   service page is currently rendering unstyled. Fixed here because this
   stylesheet is loaded on those pages anyway. */
.seo-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px; margin-top:40px; padding:28px 32px;
  border:1px solid var(--line,rgba(173,229,220,.14)); border-radius:20px;
  background:linear-gradient(140deg,rgba(33,212,179,.10),rgba(33,212,179,.02));
}
.seo-cta h3{ margin:0 0 5px; font-size:21px; color:#f2fbf9; }
.seo-cta p{ margin:0; color:#9ebbb8; font-size:15px; }
@media(max-width:560px){
  .seo-cta{ padding:20px; display:block; }
  .seo-cta .btn-teal,.seo-cta .btn-primary,.seo-cta .btn-glass{ width:100%; margin-top:16px; }
}

/* --- Homepage guides strip ----------------------------------------------
   Rendered with the site's own module-grid / module-card classes so it
   matches the existing modules section. This block only sets the column
   count for 10 items (2 rows of 5) and the responsive steps, because
   longform.css loads after landing.css and therefore wins ties. */
.module-grid.guides-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.module-grid.guides-grid .module-card h3{ font-size:15px; line-height:1.4; }
.module-grid.guides-grid .module-card{ padding:18px 16px; }
@media(max-width:1100px){ .module-grid.guides-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:780px){ .module-grid.guides-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px){ .module-grid.guides-grid{ grid-template-columns:1fr; } }

/* --- Plugins page footer ------------------------------------------------
   .footer-grid is a fixed 3-column grid, but this page has 4 columns after a
   Guides list was added. Scoped to .plugins-footer so the shared layout in
   landing.php is left completely untouched. */
.plugins-footer{ grid-template-columns:1.5fr 1fr 1fr 1fr; }
@media(max-width:1050px){ .plugins-footer{ grid-template-columns:1fr 1fr; } }
@media(max-width:780px){ .plugins-footer{ grid-template-columns:1fr; } }

/* --- Internal linking block ("More from Flowwkkr") -----------------------
   Site-wide footer links are unchanged; this gives every long-form page
   contextual links to the rest of the cluster without bloating the nav.   */
.longform .longform-more{
  max-width:82ch;
  margin:40px 0 0;
  padding-top:22px;
  border-top:1px solid rgba(173,229,220,.14);
}
.longform .longform-more > b{
  display:block;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#7ef0dd;
  margin-bottom:14px;
}
.longform .longform-more ul{
  margin:0;
  padding:0;
  list-style:none;
  columns:2;
  column-gap:32px;
}
.longform .longform-more li{ margin:0 0 9px; break-inside:avoid; }
.longform .longform-more a{
  color:#a9c8c4;
  text-decoration:none;
  font-size:14.5px;
  line-height:1.5;
  border-bottom:1px solid transparent;
}
.longform .longform-more a:hover{
  color:#7ef0dd;
  border-bottom-color:rgba(126,240,221,.4);
}

/* --- Responsive --------------------------------------------------------- */
@media(max-width:900px){
  .longform .longform-toc ul,
  .longform .longform-more ul{ columns:1; }
  .longform{ margin-top:44px; }
}
@media(max-width:560px){
  .longform h3{ margin-top:32px; }
  .longform .longform-faq summary{ font-size:15px; padding:14px 16px; }
  .longform .longform-faq p{ padding:13px 16px 15px; font-size:15px; }
  .longform .definition{ padding:16px 18px; font-size:15.5px; }
  .longform .longform-cta{ padding:20px; }
  .longform .longform-cta .btn-teal,
  .longform .longform-cta .btn-outline{ width:100%; text-align:center; }
}

@media print{
  .longform .longform-toc{ display:none; }
  .longform .longform-faq{ border:1px solid #ccc; }
  .longform .longform-faq p{ display:block !important; }
}

@media (prefers-reduced-motion:reduce){
  .longform *{ transition:none !important; animation:none !important; }
}

/* ======================================================================
   AUTHOR / REVIEW BYLINE + SCREENSHOT  -  2026-10-02
   ----------------------------------------------------------------------
   .longform-byline and .longform-shot were introduced with the Article
   schema node and the content-page screenshot. Both are defined after the
   existing rules in this file on purpose, so they win on equal specificity
   without needing !important, matching how the sidebar fix was applied.
   ====================================================================== */
.longform-byline{
  margin:18px 0 22px;
  padding:11px 15px;
  border-left:3px solid var(--teal,#2fd9b5);
  background:rgba(47,217,181,.06);
  border-radius:0 10px 10px 0;
  font-size:13.5px;
  line-height:1.65;
  color:#c3d3da;
}
.longform-byline b{
  color:#eaf4f7;
  font-weight:700;
  letter-spacing:.01em;
}
.longform-byline time{font-variant-numeric:tabular-nums;white-space:nowrap}

.longform-shot{
  margin:24px 0 28px;
  border:1px solid rgba(140,190,200,.18);
  border-radius:14px;
  overflow:hidden;
  background:rgba(6,21,26,.6);
}
.longform-shot img{
  display:block;
  width:100%;
  height:auto;
  /* Keep the screenshot from glaring on the dark page while staying legible. */
  opacity:.94;
  transition:opacity .18s ease;
}
.longform-shot:hover img{opacity:1}
.longform-shot figcaption{
  padding:10px 14px;
  font-size:12px;
  line-height:1.55;
  color:#8fa6b0;
  border-top:1px solid rgba(140,190,200,.14);
}
@media(max-width:640px){
  .longform-shot{margin:18px 0 22px;border-radius:11px}
  .longform-shot figcaption{font-size:11.5px;padding:9px 12px}
  .longform-byline{font-size:12.5px;padding:10px 13px}
}
@media(prefers-reduced-motion:reduce){
  .longform-shot img,.longform-shot:hover img{transition:none;opacity:.94}
}