/*
CMAA Recruit editorial/blog system - shared styles for all four article
templates (Complete Guide, How-To, Comparison, Playbook) and both layouts
(Wide Article, Article + Sidebar). Loaded only on singular posts that have
an article_type term set - never affects the rest of the site.
*/

/* ===== Break out of Astra's narrow reading container, use the site's
   normal wide container instead. This targets Astra's REAL #primary /
   .ast-container (the site-wide ones), which is different from our own
   .cmaa-article-container wrapper below. ===== */
.cmaa-article-page.ast-narrow-container #primary,
.cmaa-article-page.ast-narrow-container .ast-container{
  max-width:1240px;
}

/* ===== Layout shell =====
   Deliberately named .cmaa-article-container, NOT .ast-container: Astra
   applies display:flex globally to any element with the .ast-container
   class (it's the class Astra's own #primary/#secondary split uses), so
   reusing that name here previously caused this template's <header> and
   .cmaa-article-grid to be silently pulled into Astra's flex row as two
   side-by-side items - trapping the article body inside the same narrow
   column as the TOC. This wrapper only ever needs Astra's max-width
   centering behavior, not its flex behavior, so it gets its own class. */
.cmaa-article-shell{padding:36px 0 64px;}
.cmaa-article-container{max-width:1240px;margin:0 auto;padding:0 24px;box-sizing:border-box;}

/* ===== Article hero: heading info (left) + TOC (right) on desktop,
   stacked (heading info, then TOC) on mobile. ===== */
.cmaa-article-hero{
  display:grid;grid-template-columns:1.3fr 0.9fr;gap:40px;align-items:start;
  margin-bottom:40px;
}
@media (max-width:920px){
  .cmaa-article-hero{grid-template-columns:1fr;gap:24px;}
}

/* ===== Content zone: article body (left) + sidebar (right) - sidebar
   layout only. Wide layout leaves this a plain block, so .cmaa-article-body
   centers on its own directly below. ===== */
.cmaa-article-layout-sidebar .cmaa-article-content-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start;
}
@media (max-width:920px){
  .cmaa-article-layout-sidebar .cmaa-article-content-grid{grid-template-columns:1fr;}
}

/* ===== Article body: the ONE place body width is controlled. Every
   component below (paragraphs, headings, callouts, checklists, CTAs,
   etc.) just fills 100% of this - no more scattered per-component
   max-width rules that assumed a wide, unconstrained parent. ===== */
.cmaa-article-body{max-width:820px;margin:0 auto;}
.cmaa-article-layout-sidebar .cmaa-article-body{max-width:none;margin:0;}
.cmaa-article-page .entry-content > .alignwide,
.cmaa-article-page .entry-content > .alignfull{max-width:100%;}

/* ===== Article header ===== */
.cmaa-article-type{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  color:var(--ast-global-color-0);background:rgba(221,24,59,0.10);
  padding:7px 13px;border-radius:20px;margin-bottom:18px;text-transform:uppercase;letter-spacing:0.04em;
}
.cmaa-article-header h1{font-size:clamp(28px,4vw,42px);line-height:1.18;color:var(--ast-global-color-2);margin-bottom:16px;}
.cmaa-article-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--ast-global-color-8);margin-bottom:24px;}
.cmaa-article-meta span::before{content:"";}
.cmaa-article-featured{max-width:100%;margin-bottom:8px;}
.cmaa-article-featured img{width:100%;height:auto;border-radius:16px;display:block;}

/* ===== Table of contents ===== */
.cmaa-toc{
  background:var(--ast-global-color-6);border-radius:16px;
  padding:22px 26px;
}
.cmaa-toc-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--ast-global-color-8);margin-bottom:12px;}
.cmaa-toc ol{margin:0;padding:0 0 0 20px;}
.cmaa-toc li{font-size:14px;margin-bottom:8px;}
.cmaa-toc a{color:var(--ast-global-color-2);text-decoration:none;font-weight:600;}
.cmaa-toc a:hover{color:var(--ast-global-color-0);}
.cmaa-toc a.cmaa-toc-active{color:var(--ast-global-color-0);}

/* ===== Body typography ===== */
.cmaa-article-page .entry-content h2{font-size:clamp(22px,3vw,28px);color:var(--ast-global-color-2);margin:44px 0 16px;scroll-margin-top:100px;}
.cmaa-article-page .entry-content h3{font-size:19px;color:var(--ast-global-color-2);margin:32px 0 12px;}
.cmaa-article-page .entry-content p,
.cmaa-article-page .entry-content ul,
.cmaa-article-page .entry-content ol{font-size:16px;line-height:1.75;color:var(--ast-global-color-3);}
.cmaa-article-page .entry-content a{text-decoration:underline;color:var(--ast-global-color-0);}

/* ===== Callout / Quick Answer / Final Takeaway boxes ===== */
.cmaa-callout{
  border-radius:14px;padding:22px 26px;margin:28px 0;border-left:4px solid var(--ast-global-color-7);
  background:var(--ast-global-color-6);
}
.cmaa-callout-label{
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;
  color:var(--ast-global-color-8);margin:0 0 8px !important;
}
.cmaa-callout p{margin:0;}
.cmaa-callout-quick-answer{border-left-color:var(--ast-global-color-0);background:rgba(221,24,59,0.06);}
.cmaa-callout-quick-answer .cmaa-callout-label{color:var(--ast-global-color-0);}
.cmaa-callout-final{border-left-color:var(--ast-global-color-2);background:var(--ast-global-color-6);}
.cmaa-callout-info{border-left-color:var(--ast-global-color-7);}

/* ===== Checklist (reuses .cmaa-check-list from the main stylesheet) ===== */
.cmaa-article-page .entry-content .cmaa-check-list{margin:24px 0;padding-left:0;}
.cmaa-article-page .entry-content .cmaa-check-list li{font-size:16px;color:var(--ast-global-color-3);}

/* ===== Numbered steps ===== */
.cmaa-step{margin:28px 0;}
.cmaa-step-heading{display:flex;align-items:center;gap:12px;margin-bottom:10px !important;}
.cmaa-step-num{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:32px;height:32px;border-radius:50%;background:var(--ast-global-color-0);color:#fff;
  font-size:14px;font-weight:800;
}

/* ===== Image / figure block ===== */
.cmaa-article-page .entry-content .cmaa-figure{margin:28px 0;}
.cmaa-article-page .entry-content .cmaa-figure img{border-radius:14px;border:1px solid var(--ast-global-color-7);}
.cmaa-article-page .entry-content .cmaa-figure figcaption{font-size:13px;color:var(--ast-global-color-8);text-align:center;margin-top:10px;}

/* ===== Workflow / diagram block =====
   Redesigned: a single-row, equal-width, equal-height flex sequence that
   fits inside the article body width, with slim fixed-width arrow
   connectors (not separate wide items) so box sizing stays consistent
   regardless of label length. Stacks vertically with rotated arrows on
   narrow viewports. */
.cmaa-workflow{
  display:flex;flex-wrap:nowrap;align-items:stretch;gap:4px;
  margin:28px 0;max-width:100%;
}
.cmaa-workflow-step{
  flex:1 1 0;min-width:0;background:#fff;border:1px solid var(--ast-global-color-7);border-radius:10px;
  padding:10px 6px;display:flex;align-items:center;justify-content:center;text-align:center;
  margin:0 !important;
}
.cmaa-workflow-step p{margin:0;font-weight:700;color:var(--ast-global-color-2);font-size:11.5px;line-height:1.3;}
.cmaa-workflow-arrow{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  color:var(--ast-global-color-7);font-size:14px;margin:0;width:14px;
}
@media (min-width:681px){
  .cmaa-workflow{padding:0 !important;}
  .cmaa-workflow-arrow{width:16px;}
}
@media (max-width:680px){
  .cmaa-workflow{flex-direction:column;gap:6px;}
  .cmaa-workflow-step{padding:12px 16px;}
  .cmaa-workflow-step p{font-size:13.5px;}
  .cmaa-workflow-arrow{transform:rotate(90deg);width:auto;padding:2px 0;}
}

/* ===== Comparison / data table - horizontal scroll INSIDE its own
   container only, never the page, per the responsive requirement. ===== */
.cmaa-table-wrap{margin:32px 0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cmaa-table-wrap table{width:100%;border-collapse:collapse;min-width:520px;}
.cmaa-table-wrap th,
.cmaa-table-wrap td{padding:12px 16px;border:1px solid var(--ast-global-color-7);font-size:14px;text-align:left;}
.cmaa-table-wrap th{background:var(--ast-global-color-6);color:var(--ast-global-color-2);font-weight:700;}

/* ===== CTA block (in-content, insertable multiple times) ===== */
.cmaa-cta-block{max-width:100%;margin:36px 0;border-radius:20px;padding:36px;text-align:center;}
.cmaa-cta-block-solid{background:var(--ast-global-color-2);}
/* Specificity note: these are deliberately written as
   ".entry-content .cmaa-cta-block-solid h2" (not just ".cmaa-cta-block-solid
   h2") so they outrank the generic ".cmaa-article-page .entry-content h2"
   and "...a" rules above - those matched on plain element selectors and
   were otherwise winning the color/underline war against this block. */
.cmaa-article-page .entry-content .cmaa-cta-block-solid h2{color:#fff;font-size:clamp(20px,3vw,26px);margin:0 0 10px;}
.cmaa-article-page .entry-content .cmaa-cta-block-solid p{color:rgba(255,255,255,0.75);margin:0 0 20px;font-size:15px;}
.cmaa-cta-block-outline{background:#fff;border:1.5px solid var(--ast-global-color-7);}
.cmaa-article-page .entry-content .cmaa-cta-block-outline h2{color:var(--ast-global-color-2);font-size:clamp(20px,3vw,26px);margin:0 0 10px;}
.cmaa-article-page .entry-content .cmaa-cta-block-outline p{color:var(--ast-global-color-8);margin:0 0 20px;font-size:15px;}
.cmaa-cta-block-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.cmaa-article-page .entry-content .cmaa-cta-block-actions a{text-decoration:none;}
.cmaa-article-page .entry-content .cmaa-cta-block-solid .cmaa-btn-primary{color:#fff;}
.cmaa-article-page .entry-content .cmaa-cta-block-outline .cmaa-btn-primary{color:#fff;}

/* ===== FAQ (Rank Math's native FAQ block) - light visual alignment only,
   no schema/markup duplication. ===== */
.cmaa-article-page .entry-content .rank-math-faq-block{margin:32px 0;}
.cmaa-article-page .entry-content .rank-math-block h3{color:var(--ast-global-color-2);}

/* ===== Related articles ===== */
.cmaa-related{max-width:1240px;margin:56px auto 0;padding-top:40px;border-top:1px solid var(--ast-global-color-7);}
.cmaa-related h2{font-size:22px;color:var(--ast-global-color-2);margin-bottom:20px;text-align:center;}
.cmaa-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:820px){.cmaa-related-grid{grid-template-columns:1fr;}}
.cmaa-related-card{
  display:block;background:#fff;border:1px solid var(--ast-global-color-7);border-radius:14px;
  padding:20px;text-decoration:none;
}
.cmaa-related-card .type{font-size:11px;font-weight:700;color:var(--ast-global-color-0);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:8px;}
.cmaa-related-card h3{font-size:15.5px;color:var(--ast-global-color-2);margin:0;line-height:1.4;}

/* ===== About / author box ===== */
.cmaa-author-box{
  margin:40px 0 0;display:flex;gap:16px;align-items:flex-start;
  background:var(--ast-global-color-6);border-radius:16px;padding:24px 26px;
}
.cmaa-author-box img{width:44px;height:44px;border-radius:50%;flex-shrink:0;}
.cmaa-author-box h3{font-size:14.5px;color:var(--ast-global-color-2);margin:0 0 6px;}
.cmaa-author-box p{font-size:13.5px;color:var(--ast-global-color-8);margin:0;line-height:1.6;}

/* ===== Sidebar (Layout B) ===== */
.cmaa-article-sidebar{display:flex;flex-direction:column;gap:24px;}
.cmaa-sidebar-widget{background:#fff;border:1px solid var(--ast-global-color-7);border-radius:16px;padding:22px;}
.cmaa-sidebar-widget h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--ast-global-color-8);margin:0 0 14px;}
.cmaa-sidebar-search form.search-form{display:flex;flex-direction:column;gap:10px;}
.cmaa-sidebar-search input[type="search"]{
  width:100%;padding:11px 14px;border:1px solid var(--ast-global-color-7);border-radius:10px;font-size:14px;
  box-sizing:border-box;
}
/* Astra's own icon-only submit button is built for its header search
   widget's compact toggle - unused and unstyled here, so it's hidden;
   the plain text submit input is kept and styled as a normal button. */
.cmaa-sidebar-search .ast-search-submit{display:none;}
.cmaa-sidebar-search input[type="submit"].search-submit{
  width:100%;background:var(--ast-global-color-0);color:#fff;border:none;
  padding:11px 18px;border-radius:100px;font-size:14px;font-weight:700;
  font-family:inherit;cursor:pointer;transition:background .15s ease;
}
.cmaa-sidebar-search input[type="submit"].search-submit:hover{background:var(--ast-global-color-1);}
.cmaa-sidebar-widget ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.cmaa-sidebar-widget ul a{font-size:13.5px;color:var(--ast-global-color-2);text-decoration:none;}
.cmaa-sidebar-widget ul a:hover{color:var(--ast-global-color-0);}
.cmaa-sidebar-cta{background:var(--ast-global-color-2);border-radius:16px;padding:24px;text-align:center;}
.cmaa-sidebar-cta h4{color:rgba(255,255,255,0.7);}
.cmaa-sidebar-cta p{color:#fff;font-size:14px;margin:0 0 16px;}
.cmaa-sidebar-cta .cmaa-btn{width:100%;text-align:center;}

@media (max-width:920px){
  .cmaa-article-sidebar{margin-top:40px;}
}

/* ===== Breadcrumb (Rank Math) - small, muted, single line above the
   hero. Rank Math owns the markup/schema; this only styles it. ===== */
.cmaa-article-breadcrumbs{
  margin:0 0 14px;
}
.cmaa-article-breadcrumbs .rank-math-breadcrumb{
  font-size:12.5px;
  color:var(--ast-global-color-3, #6b7280);
  line-height:1.4;
}
.cmaa-article-breadcrumbs .rank-math-breadcrumb p{margin:0;}
.cmaa-article-breadcrumbs .rank-math-breadcrumb a{
  color:var(--ast-global-color-3, #6b7280);
  text-decoration:none;
}
.cmaa-article-breadcrumbs .rank-math-breadcrumb a:hover{text-decoration:underline;}
.cmaa-article-breadcrumbs .rank-math-breadcrumb .separator{margin:0 6px;}
.cmaa-article-breadcrumbs .rank-math-breadcrumb .last{color:var(--ast-global-color-2);}