/* ESA Motion - article body, video embed and reaction widget. */

.esa-lede{
  font-size:1.13rem;
  line-height:1.6;
  color:#4a5764;
}

.esa-article-body{
  font-size:1.02rem;
  line-height:1.72;
  color:#1d262f;
}
.esa-article-body h2{
  margin:2.1rem 0 .7rem;
  font-size:1.42rem;
  letter-spacing:-.02em;
  line-height:1.25;
}
.esa-article-body h3{
  margin:1.6rem 0 .5rem;
  font-size:1.12rem;
  letter-spacing:-.01em;
}
.esa-article-body p{margin:0 0 1.05rem;}
.esa-article-body ul,.esa-article-body ol{margin:0 0 1.15rem;padding-left:1.35rem;}
.esa-article-body li{margin-bottom:.42rem;}
.esa-article-body strong{font-weight:680;}
.esa-article-body a{color:#0a7ea4;}

.esa-article-body .esa-callout{
  margin:1.5rem 0;
  padding:1rem 1.15rem;
  border-left:3px solid #08a6d8;
  background:#f2f8fb;
  border-radius:0 10px 10px 0;
  font-size:1rem;
}
.esa-article-body .esa-callout p:last-child{margin-bottom:0;}
.esa-article-body .esa-callout strong{display:block;margin-bottom:.3rem;}

/*
 * Tables must scroll, not stretch the page.
 *
 * A four-column table of prose cannot fit a 360px screen. Without this it
 * pushes the document wider than the viewport, which a mobile audit reports as
 * a viewport problem -- and once the page scrolls sideways, every tap target is
 * measured against the wrong width, which is likely why tap targets and font
 * size were flagged alongside it.
 *
 * display:block makes the table its own scroll container; the row groups keep
 * their table layout inside it.
 */
.esa-article-body table{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-collapse:collapse;
  margin:1.4rem 0;
  font-size:1rem;
}
.esa-article-body table thead,
.esa-article-body table tbody{
  display:table;
  width:100%;
  min-width:520px;
}
.esa-article-body th,.esa-article-body td{
  padding:.6rem .7rem;
  border-bottom:1px solid #e3e9ee;
  text-align:left;
  vertical-align:top;
}
.esa-article-body th{
  font-weight:680;
  background:#f6f9fb;
  border-bottom:2px solid #dbe3ea;
}

/* Video embed ------------------------------------------------------------ */
.esa-video-embed{margin:2rem 0 1rem;}
.esa-video-embed h2{margin:0 0 .7rem;font-size:1.24rem;}
.esa-video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  background:#0b1118;
  border:1px solid #dbe3ea;
}
.esa-video-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}

/* Reactions -------------------------------------------------------------- */
.esa-reactions{
  margin:2.2rem 0 1.4rem;
  padding:1.15rem 1.25rem;
  border:1px solid #e1e8ee;
  border-radius:14px;
  background:#fbfcfd;
}
.esa-reactions-q{
  margin:0 0 .7rem;
  font-weight:680;
  font-size:.98rem;
  color:#28323c;
}
.esa-reactions-buttons{display:flex;gap:.65rem;flex-wrap:wrap;}
.esa-react-btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.7rem 1.05rem;
  min-height:48px;
  border:1px solid #d5dde5;
  border-radius:999px;
  background:#fff;
  font:inherit;
  font-size:.92rem;
  font-weight:620;
  color:#2a343f;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,transform .12s ease;
}
.esa-react-btn:hover{border-color:#9fb2c2;background:#f3f7fa;}
.esa-react-btn:active{transform:translateY(1px);}
.esa-react-btn.is-active{
  border-color:#08a6d8;
  background:#e8f6fb;
  color:#06627f;
}
.esa-react-icon{font-size:0.875rem;line-height:1;}
.esa-react-count{
  min-width:1.4em;
  padding-left:.15rem;
  font-variant-numeric:tabular-nums;
  color:#5d6b78;
}
.esa-react-btn.is-active .esa-react-count{color:#06627f;}
.esa-reactions-status{
  margin:.65rem 0 0;
  min-height:1.1em;
  font-size:.87rem;
  color:#5d6b78;
}

@media (max-width:560px){
  .esa-article-body{font-size:1rem;}
  .esa-article-body h2{font-size:1.28rem;}
  .esa-reactions{padding:1rem;}
}

/* ==========================================================================
   Section index card grid (Tutorials, Blog)
   Vertical cards: image on top, text below. The whole card is one link.
   ========================================================================== */

.esa-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:20px;
  margin:0 0 26px;
}

.esa-card-link{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e0e7ed;
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:0 10px 30px rgba(18,31,43,.045);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.esa-card-link:hover,
.esa-card-link:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(18,31,43,.12);
  border-color:#9ad3e8;
}
.esa-card-link:focus-visible{
  outline:2px solid #08a6d8;
  outline-offset:3px;
}

.esa-card-thumb{
  width:100%;
  aspect-ratio:16/9;
  background:#eef3f7;
  overflow:hidden;
  flex:0 0 auto;
}
.esa-card-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
.esa-card-link:hover .esa-card-thumb img{transform:scale(1.04);}

.esa-card-body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:16px 17px 18px;
}
.esa-card-meta{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:8px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#5f6f7c;
}
.esa-card-tag{
  padding:3px 7px;
  border-radius:999px;
  background:#e8f6fb;
  color:#06627f;
  letter-spacing:.04em;
}
.esa-card-body h2{
  margin:0 0 8px;
  font-size:17px;
  line-height:1.32;
  letter-spacing:-.015em;
  font-weight:720;
  color:#111b24;
}
.esa-card-body p{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.6;
  color:#5a6773;
}
.esa-card-cta{
  margin-top:auto;
  font-size:14px;
  font-weight:800;
  color:#0a7ea4;
}
.esa-card-link:hover .esa-card-cta{text-decoration:underline;}

/* Section heading above a grid */
.esa-grid-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin:22px 0 16px;
}
.esa-grid-head h2{
  margin:0;
  font-size:19px;
  letter-spacing:-.02em;
}
.esa-grid-head .esa-meta{margin:0;font-size:13px;color:#64727f;}

@media (max-width:900px){
  .esa-card-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;}
}
@media (max-width:560px){
  .esa-card-grid{grid-template-columns:1fr;gap:14px;}
  .esa-card-body h2{font-size:16.5px;}
}

/* ==========================================================================
   Taller advertising rail
   Overrides content.css (loaded first). A 600px unit accepts the larger
   vertical formats (160x600, 300x600) instead of being capped near 420px.
   ========================================================================== */
.esa-blog-ad-rail .esa-sidebar-ad,
.esa-blog-ad-rail .esa-sidebar-ad.tall{
  min-height:640px;
}
.esa-blog-ad-rail .esa-sidebar-ad.tall .adsbygoogle{
  display:block;
  width:100%;
  min-height:600px;
}
.esa-blog-ad-rail .esa-sidebar-ad.tall .esa-sidebar-ad-placeholder{
  min-height:600px;
}
/* Keep the rail usable on short viewports: scroll it rather than clipping. */
@media (min-width:901px){
  .esa-blog-ad-rail{
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    scrollbar-width:thin;
  }
}
/* Own the vertical rhythm of the rail here rather than relying on content.css. */
.esa-blog-ad-rail{row-gap:24px;}
@media (max-width:900px){
  .esa-blog-ad-rail .esa-sidebar-ad,
  .esa-blog-ad-rail .esa-sidebar-ad.tall{min-height:280px;}
  .esa-blog-ad-rail .esa-sidebar-ad.tall .adsbygoogle,
  .esa-blog-ad-rail .esa-sidebar-ad.tall .esa-sidebar-ad-placeholder{min-height:250px;}
}

/* ==========================================================================
   Back link
   ========================================================================== */
.esa-back-link{
  display:inline-flex;align-items:center;gap:6px;
  margin:0 0 16px;padding:11px 16px 11px 13px;min-height:48px;
  border:1px solid #dbe3ea;border-radius:999px;background:#fff;
  font-size:14px;font-weight:700;color:#33414e;text-decoration:none;
  transition:border-color .15s ease,background .15s ease,transform .12s ease;
}
.esa-back-link:hover{border-color:#9fb2c2;background:#f3f7fa;transform:translateX(-2px);}
.esa-back-link svg{width:16px;height:16px;fill:currentColor;flex:0 0 auto;}
.esa-blog-main-column > .esa-back-link:last-child{margin:22px 0 0;}

/* ==========================================================================
   Share row
   ========================================================================== */
.esa-share{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin:0 0 22px;padding:11px 0;
  border-top:1px solid #e6ecf1;border-bottom:1px solid #e6ecf1;
}
.esa-share-bottom{margin:26px 0 0;}
.esa-share-label{
  font-size:12px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:#6b7885;
}
.esa-share-icons{display:flex;gap:10px;flex-wrap:wrap;}
.esa-share-btn{
  display:inline-grid;place-items:center;
  width:48px;height:48px;padding:0;
  border:1px solid #dde4ea;border-radius:50%;background:#fff;
  cursor:pointer;color:#41505d;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .12s ease;
}
.esa-share-btn svg{width:16px;height:16px;fill:currentColor;}
.esa-share-btn:hover{background:#0b1118;border-color:#0b1118;color:#fff;transform:translateY(-2px);}
.esa-share-btn:focus-visible{outline:2px solid #08a6d8;outline-offset:2px;}
.esa-share-copied{font-size:14px;color:#0a7ea4;font-weight:700;}

/* ==========================================================================
   Comments
   ========================================================================== */
.esa-comments{
  margin:2.4rem 0 1rem;padding:1.4rem 1.5rem;
  border:1px solid #e1e8ee;border-radius:16px;background:#fbfcfd;
}
.esa-comments-title{margin:0 0 1.1rem;font-size:1.22rem;letter-spacing:-.02em;}
.esa-comments-count{color:#7a8893;font-weight:600;font-size:.9em;}
.esa-comments-loading,.esa-comments-empty{color:#6d7a86;font-size:.94rem;margin:0 0 1.2rem;}

.esa-comment{
  padding:.95rem 0;border-bottom:1px solid #e8eef3;
}
.esa-comment:last-of-type{border-bottom:0;}
.esa-comment-head{
  display:flex;align-items:baseline;gap:10px;margin-bottom:.35rem;flex-wrap:wrap;
}
.esa-comment-author{font-weight:720;font-size:.95rem;color:#1b2630;}
.esa-comment-head time{font-size:0.875rem;color:#8a959f;}
.esa-comment-body{font-size:1rem;line-height:1.62;color:#2c3742;}

.esa-comment-form{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid #e3eaf0;}
.esa-comment-form h3{margin:0 0 .9rem;font-size:1rem;letter-spacing:-.01em;}
.esa-field-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
.esa-field{display:block;margin-bottom:.8rem;}
.esa-field > span{
  display:block;margin-bottom:.3rem;
  font-size:0.875rem;font-weight:700;color:#4c5964;
}
.esa-field > span em{font-style:normal;font-weight:500;color:#8a959f;}
.esa-field input,.esa-field textarea{
  min-height:48px;
  width:100%;padding:.55rem .7rem;
  border:1px solid #d5dde5;border-radius:9px;background:#fff;
  font:inherit;font-size:1rem;color:#1b2630;
}
.esa-field input:focus,.esa-field textarea:focus{
  outline:none;border-color:#08a6d8;box-shadow:0 0 0 3px rgba(8,166,216,.13);
}
.esa-field textarea{resize:vertical;min-height:110px;}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.esa-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.esa-captcha{display:flex;align-items:flex-end;gap:.5rem;}
.esa-captcha-field{flex:0 1 260px;margin-bottom:.8rem;}
.esa-captcha-refresh{
  margin-bottom:.8rem;width:48px;height:48px;
  border:1px solid #d5dde5;border-radius:9px;background:#fff;
  font-size:1rem;line-height:1;color:#4c5964;cursor:pointer;
}
.esa-captcha-refresh:hover{background:#f1f6f9;border-color:#9fb2c2;}

.esa-comment-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:.3rem;}
.esa-comment-submit{
  min-height:48px;
  padding:.7rem 1.2rem;border:0;border-radius:10px;
  background:#0b1118;color:#fff;font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;
  transition:background .15s ease;
}
.esa-comment-submit:hover:not(:disabled){background:#1d2a36;}
.esa-comment-submit:disabled{opacity:.55;cursor:default;}
.esa-comment-status{font-size:.87rem;}
.esa-comment-status.is-ok{color:#0a7a52;}
.esa-comment-status.is-error{color:#b3261e;}
.esa-comment-note{margin:.7rem 0 0;font-size:.8rem;color:#8a959f;}

@media (max-width:560px){
  .esa-field-row{grid-template-columns:1fr;gap:0;}
  .esa-comments{padding:1.1rem;}
  .esa-share-btn{width:48px;height:48px;}
}

/* ==========================================================================
   Rail picks -- one random tutorial + one random article beneath the ad
   ========================================================================== */
.esa-rail-picks{
  /* Explicit top margin as well as the rail's grid gap: the rail's gap comes
     from content.css, so if that rule ever changes the panel still cannot end
     up flush against the ad box. Margins do not collapse inside a grid, so the
     two simply add together. */
  margin-top:8px;
  background:#fff;
  border:1px solid #e1e8ee;
  border-radius:18px;
  padding:15px 15px 6px;
}
.esa-rail-picks-title{
  margin:0 0 12px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#6b7885;
}
.esa-rail-pick{
  display:block;
  margin:0 0 14px;
  padding:0 0 14px;
  border-bottom:1px solid #eef2f6;
  text-decoration:none;
  color:inherit;
}
.esa-rail-pick:last-child{border-bottom:0;}
.esa-rail-pick-thumb{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border-radius:11px;
  overflow:hidden;
  background:#eef3f7;
  margin-bottom:9px;
}
.esa-rail-pick-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;
}
.esa-rail-pick:hover .esa-rail-pick-thumb img{transform:scale(1.05);}
.esa-rail-pick-body{display:block;}
.esa-rail-pick-label{
  display:block;
  margin-bottom:4px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#0a7ea4;
}
.esa-rail-pick-label em{
  font-style:normal;
  color:#8a959f;
  font-weight:700;
}
.esa-rail-pick-label em::before{content:"\00b7 ";}
.esa-rail-pick-heading{
  display:block;
  font-size:14px;
  font-weight:700;
  line-height:1.38;
  letter-spacing:-.012em;
  color:#18222c;
}
.esa-rail-pick:hover .esa-rail-pick-heading{color:#0a7ea4;}

@media (max-width:900px){
  .esa-rail-picks{padding:14px 14px 4px;}
  .esa-rail-pick-heading{font-size:14.5px;}
}

/* Index-page share row sits under the hero, not between rules. */
.esa-share-index{
  border-top:0;
  border-bottom:1px solid #e6ecf1;
  margin:0 0 20px;
  padding:0 0 14px;
}

/* Direct-link icon in a share row (certificates). Distinguished from the
   platform icons so it does not read as another social network. */
.esa-share-btn.esa-share-open{
  border-color:#a9d8e9;
  color:#0a7ea4;
  background:#eef8fc;
}
.esa-share-btn.esa-share-open:hover{
  background:#0a7ea4;
  border-color:#0a7ea4;
  color:#fff;
}

/* Download icon in a certificate share row. Same treatment as the link icon:
   cyan rather than dark, so neither reads as another social network. */
.esa-share-btn.esa-share-download{
  border-color:#a9d8e9;
  color:#0a7ea4;
  background:#eef8fc;
}
.esa-share-btn.esa-share-download:hover{
  background:#0a7ea4;
  border-color:#0a7ea4;
  color:#fff;
}


/* ==========================================================================
   Tap targets
   A mobile audit flagged targets under 44px and neighbours closer than 8px.
   These rules put a floor under every interactive element that is not already
   a large block link, without changing how anything looks on desktop.
   ========================================================================== */
.esa-back-link,
.esa-share-btn,
.esa-react-btn,
.esa-captcha-refresh,
.esa-comment-submit,
.cert-btn,
.esa-btn-primary,
.esa-btn-secondary{
  min-height:48px;
}
.esa-comment-submit,
.cert-btn,
.esa-btn-primary,
.esa-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.esa-verify-actions,
.cert-hero-actions,
.esa-related-links{
  gap:12px;
}
/* Text links that sit in their own row need height of their own. */
.esa-related-links a{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:0 2px;
}


/* ==========================================================================
   Nothing may exceed the viewport width
   Horizontal overflow is reported as a viewport failure and skews every other
   mobile measurement taken on the page.
   ========================================================================== */
img, svg, video, iframe, canvas{
  max-width:100%;
}
pre, code{
  overflow-x:auto;
  max-width:100%;
}
.esa-article-body{
  overflow-wrap:anywhere;
}
.esa-article-body a{
  overflow-wrap:anywhere;
}