/* ============================================================
   LAYOUT.CSS — site-wide page layout (loaded LAST on every page)

   1. ONE centred content column (--content-max) on every page.
   2. Left + right STICKY AD RAILS in the gutters beside that
      column (160px wide = the standard "wide skyscraper").
   3. Prose is JUSTIFIED; headings are centred.

   Ad rails
   --------
   Markup:  <aside class="ad-rail ad-rail-left|right"> … .ad-slot … </aside>
   They are position:fixed in the side gutters, so they stay in view
   while scrolling and never take space from the content column.
   They only appear when the window is wide enough for
   [rail + gap + column + gap + rail] (see the media query), so they
   can never overlap text. Below that width they're hidden and the
   column simply uses the full width.
   To put a real ad in a rail: replace the .ad-placeholder inside
   .ad-slot with your ad code (160x600 is the intended size).
============================================================ */
:root{
  --content-max:1000px;
  --rail-w:160px;
  --rail-gap:12px;
  --rail-top:calc(var(--header-h, 68px) + 16px);
}

/* ---------- 1. centred column: cap every wide container ---------- */
.hc,
.services-section,
.features-inner,
.footer-inner,
.footer-bottom,
.template-gallery,
.info-inner{
  max-width:var(--content-max);
  margin-left:auto;
  margin-right:auto;
}
.hc{padding-left:24px;padding-right:24px;}
.hc p{max-width:none;}                 /* paragraphs fill the column so justification lines up */
.hero{justify-content:center;}

/* ---------- 2. sticky ad rails ---------- */
.ad-rail{display:none;}
@media (min-width:1380px){
  .ad-rail{
    display:block;
    position:fixed;
    top:var(--rail-top);
    width:var(--rail-w);
    z-index:40;                         /* above page content, below header (z 100+) and modals */
    height:var(--rail-avail, auto);
    overflow:hidden;                    /* never spill over the footer */
  }
  .ad-rail-left { left:  calc(50% - var(--content-max)/2 - var(--rail-gap) - var(--rail-w)); }
  .ad-rail-right{ right: calc(50% - var(--content-max)/2 - var(--rail-gap) - var(--rail-w)); }
  .ad-rail .ad-label{display:block;text-align:center;margin-bottom:4px;}
  .ad-rail .ad-slot{width:var(--rail-w);}
  .ad-rail .ad-placeholder.vertical{width:var(--rail-w);height:min(600px, calc(var(--rail-avail, 100vh) - 24px));min-height:226px;}
  /* wide app screens (builder form) bring their own in-grid rails */
  body.rails-off .ad-rail{display:none;}
}

/* ---------- in-grid rails on the wide app pages (builder / ATS checker / reviewer) ---------- */
.builder-layout,
.builder-layout.two-col{grid-template-columns:var(--rail-w) minmax(0,1fr) var(--rail-w);}
.ad-sidebar.ad-sidebar-right{position:sticky;top:calc(var(--header-h, 68px) + 80px);width:var(--rail-w);}
.ad-sidebar.ad-sidebar-right .ad-placeholder.vertical{width:var(--rail-w);height:320px;font-size:10.5px;}
@media (max-width:1180px){
  .builder-layout,
  .builder-layout.two-col{grid-template-columns:minmax(0,1fr);}
  .ad-sidebar,.ad-sidebar.ad-sidebar-right{display:none;}
}

/* ---------- 3. justified prose, centred headings ---------- */
.hc, .info-inner{ text-align:center; }          /* centres headings, eyebrows, CTAs */
.hc p, .hc li, .hc details p, .hc .lead,
.info-inner p, .info-inner li,
.info-section p, .info-section li{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  overflow-wrap:break-word;
}
.hc ul, .hc ol, .info-inner ul, .info-inner ol{ text-align:left; }   /* keep markers aligned; items justify */
.hc h1, .hc h2, .hc h3, .hc h4,
.info-inner h1, .info-inner h2, .info-inner h3{
  text-align:center;
  justify-content:center;                        /* info-inner headings are flex rows with an icon */
}
html{ hyphenate-character:"-"; }

/* UI pieces keep their own alignment — only long-form prose is justified */
.hc .steps *, .hc .tpl *, .hc .flow *, .hc .anat *, .hc .mist *, .hc .ba *, .hc .bars *, .hc .cmp *,
.hc-toc, .hc-cta, .hc-cta *,
.contact-grid, .contact-grid *,
.footer-inner, .footer-inner *,
.nav-dropdown-menu, .cookie-banner, .cookie-banner *,
button, summary, label, th, td, kbd, code{ text-align:revert-layer; hyphens:manual; }
.hc .steps, .hc .tpl, .hc .flow, .hc .anat, .hc .mist, .hc .ba, .hc .bars, .hc .cmp{ text-align:left; }
.hc-toc{ justify-content:center; }
.hc .flow{ text-align:center; }

/* ---------- small screens: nothing may force sideways scrolling ---------- */
@media (max-width:560px){
  .steps{grid-template-columns:minmax(0,1fr) !important;}   /* some pages set 3 columns inline */
  .steps > *, .hc section > *{min-width:0;}
  .hc, .info-inner{overflow-wrap:anywhere;}
}

/* ---------- article extras: byline, takeaways, sources ---------- */
.hc .byline{max-width:var(--content-max);margin:0 auto 20px;padding:14px 18px;border-left:4px solid #2563eb;background:#f1f5f9;border-radius:8px;}
.hc .byline p{margin:0;font-size:14px;line-height:1.6;color:#334155;text-align:justify;}
.hc .takeaways ul,.hc .srcs{text-align:left;padding-left:22px;}
.hc .takeaways li,.hc .srcs li{margin-bottom:6px;}

/* ============================================================
   >>> ADS TEMPORARILY OFF <<<
   Hides every ad slot on the site (side rails, in-grid sidebars,
   wide banners). Markup is untouched. TO TURN ADS BACK ON:
   delete this whole block (down to the "ADS OFF END" line).
============================================================ */
.ad-rail,
.ad-sidebar,
.ad-below-builder,
.ad-banner-sticky,
.ad-slot,
.ad-placeholder,
.ad-label{ display:none !important; }
/* app pages: collapse the ad columns so the form uses the full width */
.builder-layout,
.builder-layout.two-col{ grid-template-columns:minmax(0,1fr) !important; }
/* ===== ADS OFF END ===== */