/*
 * =================================================================================
 *
 * Cyber Infrastructure (CIS) :: Tech-Talk Blog :: Refactored Global Stylesheet
 *
 * Version: 7.8 (Production Candidate)
 * Author: CIS-World-Class-Coder (AI Assistant)
 * Date: September 24, 2025
 *
 * Purpose: This file restores accidentally removed styles and incorporates the
 * final round of feedback on all components.
 *
 * =================================================================================
 */

/* 1.0 - BRAND & CONFIGURATION */
:root {
  --color-primary: #121f2c;
  --color-accent: #AF110E;
  --color-secondary: #FFD700;
  --color-text-body: #3b4143;
  --color-text-white: #ffffff;
  --color-border-subtle: #e5e6e7;
  --color-background-subtle: #eaeaea;
  --border-radius-base: 4px;
  --transition-base: all 0.2s ease-in-out;
  --base-font-size: 18px; /* Updated from 17px */
  --line-height-base: 1.7;
}

/* 2.0 - GLOBAL STYLES & RESETS */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html { font-family: Arial, Helvetica, sans-serif; font-size: var(--base-font-size); }
body {
  background: #fff;
  color: var(--color-text-body);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: var(--line-height-base);
  padding-top: 75px;
}
a { text-decoration: none; color: var(--color-primary); }
a:hover { color: var(--color-accent); text-decoration: underline; }
p { margin-bottom: 1em; }

/* =================================================
   TYPOGRAPHY HIERARCHY
   ================================================= */

/* Main Article Title */
h1, .eb-entry-title {
  font-size: 2.5rem;   /* ~45px - Strong and clear */
  line-height: 1.2;
  margin-bottom: 0.5em;
}

/* Main Section Headings */
h2 {
  font-size: 1.8rem;   /* ~32px */
  line-height: 1.3;
  letter-spacing: 0.5px;
}

/* Sub-section Headings */
h3 {
  font-size: 1.4rem;   /* ~25px */
}

/* Minor Headings */
h4, h5, h6 {
  font-size: 1.1rem;   /* ~20px */
}

/* All headings share these properties for consistency */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary);
  font-weight: 700; /* Bold and authoritative */
}

/* Ensure the generic content styles for margins are specific */
.cBlg-content h2 { margin: 2em 0 1em 0; }
.cBlg-content h3 { margin: 1.5em 0 0.75em 0; }

/* Keep body paragraph size consistent with the new base */
.cBlg-content p {
  font-size: 1rem; /* ~18px */
  margin-bottom: 1.25em;
}

/* 3.0 - LAYOUT & GRID SYSTEM */
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
.row { margin-right: -15px; margin-left: -15px; }
.container:after, .row:after { content: ""; display: table; clear: both; }
.col-xs-12 { float: left; width: 100%; }

/* Main Content Wrapper */
.cBlg-content {
  display: block;
  max-width: 1024px;
  margin: 0 auto;
  padding: 30px 15px;
  background: #fff;
  box-shadow: 0 7px 10px rgb(0 0 0 / 0.2);
  margin-top: -7px;
}
.banner-btn.m30 {
  background: #000;
  padding: 6px 20px;
  color: #fff;
  margin-top: 25px !important;
  display: inline-block;
  border-radius: 5px;
}

/* 4.0 - CORE COMPONENTS */

/* =================================================
   1. Header Refinement
   ================================================= */

/* Main header bar */
.cBlg-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--color-text-white);
  /*border-bottom: 1px solid var(--color-border-subtle);*/
  padding:0;
}

/* Flex container for alignment */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1024px;
  padding: 15px 15px;
  /*box-shadow: 0 3px 6px rgb(0 0 0 / 0.2);*/
  box-shadow: 0 -8px 7px rgba(0, 0, 0, 0.2);
}
.cBlg-header{
  height: 69px;
}
.sticky .header-container{
  box-shadow: 0 3px 6px rgb(0 0 0 / 0.2);

}
.sticky.cBlg-header {
  height: 81px;
}

.cBlg-heading2 {
  padding-top: 50px;
}
.header-left, .header-right {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px; /* Space between Menu and Signup Button */
  margin-left: auto; /* This pushes the group to the far right */
}

.header-logo img {
  height: 32px; /* Control logo size */
  width: auto;
  display: block;
}

/* Style for the "Menu" link */
.header-nav-link {
  color: var(--color-text-body);
  font-weight: 600;
  text-decoration: none;
  padding: 8px 0;
  position: relative;
}

/* Underline animation for trust and polish */
.header-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width 0.3s ease;
}

.header-nav-link:hover::after {
  width: 100%;
}

/* Primary CTA Button in Header */
.header-cta {
  background-color: var(--color-accent);
  color: var(--color-text-white) !important;
  padding: 10px 20px;
  border-radius: var(--border-radius-base);
  font-weight: bold;
  text-decoration: none;
  transition: var(--transition-base);
}

.header-cta:hover {
  background-color: var(--color-primary);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.header-nav-link:hover {
  text-decoration: none !important;
  border: none !important;
}
.header-nav-link::after {
  display: none;
}

/* Root-canary public UI parity: keep the compact blog header familiar to the
   marketing-site navigation without making the canary host authoritative.
   All destinations remain the public www origin; root.developers.dev is only an
   isolated delivery origin and must never leak into navigational URLs. */
.header-nav {
  display: flex;
  align-items: center;
}
.header-nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
}
.header-nav-link:focus-visible,
.header-cta:focus-visible,
.cBlg-footer a:focus-visible,
.cBlg-content a:focus-visible {
  outline: 3px solid #af110e;
  outline-offset: 3px;
  text-decoration: none;
}
.cBlg-header::after {
  content: 'Product · Solutions · Resources';
  display: block;
  max-width: 1024px;
  margin: -8px auto 0;
  padding: 0 15px 8px;
  color: #3b4143;
  font-size: 12px;
  letter-spacing: .02em;
  pointer-events: none;
}
.cBlg-header {
  height: 86px;
  border-bottom: 1px solid var(--color-border-subtle);
}
body { padding-top: 92px; }
.sticky.cBlg-header { height: 86px; }

/* 5.0 - ARTICLE & BLOG-SPECIFIC STYLES */

/* =================================================
   CTA Component - WCAG Corrected
   ================================================= */
.ctaSec {
  display: flex;
  align-items: stretch;
  /*max-width: 900px;*/
  margin: 2.5em auto;
  background-color: #1a1a1a;
  border-radius: 10px;
  color: #f1f1f1; /* Default text is high-contrast off-white */
  overflow: hidden;
  border-left: 8px solid var(--color-accent);
}

.ctaLeft, .ctaRight {
  padding: 24px 30px;
}

.ctaLeft {
  width: 60%;
  border-right: 1px solid #444;
}

.ctaRight {
  width: 40%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* =================================================
   CTA - Typographic Hierarchy (High Specificity)
   ================================================= */

/* Targets an H2 in either the left or right column of the CTA */
.ctaSec .ctaLeft h2,
.ctaSec .ctaRight h2 {
  font-size: 1.6rem;   /* ~29px */
  font-weight: 700;
  color: var(--color-text-white) !important; /* Force override */
  margin-bottom: 15px;
  line-height: 1.3;
  margin-top: 25px;
}

/* Targets an H3 in either the left or right column of the CTA */
.ctaSec .ctaLeft h3,
.ctaSec .ctaRight h3 {
  font-size: 1.2rem;   /* ~22px */
  font-weight: 600;
  color: var(--color-text-white) !important; /* Force override */
  margin-bottom: 15px;
  line-height: 1.3;
  margin-top: 0;
}

/* User-preferred button style */
.ctaRight a {
  display: inline-block;
  background-color: #af110e;
  color: #fff;
  padding: 12px 40px;
  border-radius: var(--border-radius-base);
  font-weight: bold;
  border: 1px solid #f47c7c;
  transition: var(--transition-base);
  text-decoration: none;
  margin-top: 10px;
}

.ctaRight a:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-primary);
  text-decoration: none;
}

/* RESTORED: Prev/Next Post Links */
.pn-sec {
  border-top: 1px solid var(--color-border-subtle);
  padding: 50px 15px 15px;
  margin: 10px 0;
}
.pn-sec ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}
.pn-sec ul a {
  border: 1px solid var(--color-border-subtle);
  padding: 10px 20px;
  border-radius: 4px;
  color: var(--color-text-body);
  font-weight: 600;
  transition: all 0.2s ease;
  background: #fff;
}
.cl-nxt-pre {
  /* This removes the unwanted left padding */
  padding-left: 0 !important;
  
  /* This hides the bullet points */
  list-style: none;
  
  /* These ensure the buttons are on opposite ends */
  display: flex;
  justify-content: space-between;
}

.cl-nxt-pre > li {
  list-style-type: none;
}

/* RESTORED: Author Section Polish */
.cBlg-authorMainInfo {
  background: #fff;
  padding: 25px;
  margin: 10px 0 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}
.cBlg-authorMainInfo .eb-entry-author-bio {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  text-align: left;
}
.cBlg-authorMainInfo .cBlg-ati-left img { border-radius: 50%; }

/* Generic Content Styles */
.cBlg-content h2 { margin: 2em 0 1em 0; }
.cBlg-content h3 { margin: 1.5em 0 0.75em 0; }
.cBlg-content ul, .cBlg-content ol { padding-left: 40px; margin-bottom: 1.5em; }
.cBlg-content ul { list-style: disc outside; }
.cBlg-content ol { list-style: decimal outside; }
.cBlg-content li { margin-bottom: 0.8em; }
.cBlg-content img { max-width: 100%; height: auto; }

/* FIX: Key Takeaways Styling */
.key-takeaways {
  background-color: var(--color-background-subtle);
  border-left: 5px solid var(--color-accent);
  padding: 25px;
  margin: 2em 0;
  border-radius: var(--border-radius-base);
}
.key-takeaways ul { list-style-type: none; padding-left: 0; }

/* =================================================
   Collapsible Table of Contents
   ================================================= */

.table-of-contents {
  border: 1px solid var(--color-border-subtle);
  border-left: 3px solid var(--color-accent);
  margin: 2em 0;
  border-radius: var(--border-radius-base);
  /* Smooth transition for the container when it opens/closes */
  transition: all 0.3s ease-in-out;
}

.toc-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  padding: 20px 30px;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--color-text-body);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}
/* Change background on hover to indicate it's clickable */
.toc-toggle:hover {
  background-color: var(--color-background-subtle);
}

.toc-toggle:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.toc-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-text-body);
  transition: transform 0.3s ease-in-out;
}

.toc-list-container {
  /* This is the collapsible part */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  padding: 0 30px; /* Horizontal padding for the list */
}
.toc-list-container ul {
  padding: 0; /* Reset default padding */
  list-style-type: none;
}
.toc-list-container li {
  margin-bottom: 0.9em;
}
.toc-list-container a {
  font-weight: 500;
  color: var(--color-link-text);
  text-decoration: none;
}
.toc-list-container a:hover {
  text-decoration: underline;
  color: var(--color-accent);
}


/* --- OPEN STATE --- */

.table-of-contents.is-open {
  background-color: var(--color-background-subtle);
}
.table-of-contents.is-open .toc-arrow {
  transform: rotate(180deg); /* Flips the arrow */
}
.table-of-contents.is-open .toc-list-container {
  max-height: 1000px; /* A large value to allow it to expand fully */
  transition: max-height 0.5s ease-in;
  padding-top: 0;
  padding-bottom: 20px;
}

/* FIX: Table Polish */
.cBlg-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.5em 0;
}
.cBlg-content th, .cBlg-content td {
  padding: 1em;
  border: 1px solid var(--color-border-subtle);
  text-align: left;
}
.cBlg-content thead th {
  background-color: var(--color-primary);
  color: var(--color-text-white);
}
.cBlg-content tbody tr:nth-child(even) { background-color: var(--color-background-subtle); }
.cBlg-content tbody tr:hover {
  background-color: var(--color-secondary);
  color: var(--color-primary);
}

/* 6.0 - FOOTER */

/* FIX: Footer Final */
.cBlg-footer {
  background: var(--color-primary);
  color: #dedede;
  font-size: 0.8rem;
  padding: 60px 15px;
  /*margin: 20px;*/
}
.cBlg-footer.container.row {
  max-width: 1024px;
  margin: 0 auto;
  padding: 20px 15px;
}
.cBlg-footer .pull-left, .cBlg-footer .pull-right { float: none !important; width: 100%; text-align: center; }
.cBlg-footer .copyright { margin-bottom: 30px; line-height: 1.8; }
.cBlg-footer .footer_menus {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin: 30px 0;
  text-align: left;
}
.cBlg-footer .footer_menus nav {
  width: 15%;
 
}
.cBlg-footer .cBlg-footer-links { list-style: none !important; padding: 0; }
.cBlg-footer .cBlg-footer-links li { list-style: none !important; }
.cBlg-footer .cBlg-footer-links a { color: var(--color-text-white); }
.cBlg-footer .cBlg-footer-links li:first-child { color: var(--color-secondary); font-weight: bold; }
.cBlg-footer .social-icon {
  display: flex;
  justify-content: center;
  gap: 15px;
  list-style: none !important;
  padding: 0;
  margin-top: 30px;
}
.cBlg-footer .social-icon a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #444;
  color: var(--color-text-white);
  transition: var(--transition-base);
}

/* 7.0 - RESPONSIVE & UTILITY STYLES */
.hide-sidebar .cBlg-sidebar { display: none; }
.hide-sidebar .col-sm-9 { width: 100%; }

@media (min-width: 768px) {
  .container { width: 750px; }
  .col-sm-3, .col-sm-9 { float: left; padding-left: 15px; padding-right: 15px; }
  .col-sm-3 { width: 25%; }
  .col-sm-9 { width: 75%; }
  aside.col-sm-3 { position: -webkit-sticky; position: sticky; top: 100px; }
}
@media (min-width: 992px) {
  .container { width: 960px; }
}
@media (min-width: 1200px) {
  .container { width: 1024px; }
}
@media (max-width: 767px) {
  body { padding-top: 86px; }
  .ctaSec { display: block; }
  .ctaLeft, .ctaRight { width: 100%; text-align: center; }
  .ctaLeft { border-left: 0; border-right: 0; border-top: 8px solid var(--color-accent); }

  .header-cta {

  padding: 5px 6px;

  font-size: 14px;
}
.header-logo img {
  max-width: 100px;
  height: auto;
}
.cBlg-header { height: 78px; }
.sticky.cBlg-header { height: 78px; }
.cBlg-header::after {
  margin-top: -6px;
  padding-bottom: 5px;
  font-size: 10px;
}
h1, .eb-entry-title {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 0.5em;
}
.cBlg-content blockquote {
 
  padding: 15px 15px !important;

}
.cBlg-content th, .cBlg-content td {
  padding: 6px;
  border: 1px solid var(--color-border-subtle);
  text-align: left;
}
.cBlg-content table{
  font-size: 14px;
}
body {

  font-size: .9rem;
 
}
.cBlg-content p {
  font-size: .9rem;

}
h2 {
  font-size: 1.1rem;

}
h3 {
  font-size: 1rem;
}
.cBlg-footer .footer_menus nav {
  width: 45%;
}
.cBlg-footer .footer_menus {

  justify-content: left;
}
.cBlg-authorMainInfo .eb-entry-author-bio {

  gap: 15px;

}
.cBlg-authorMainInfo {

  padding: 15px;

}
.row {
  margin-right: 0;
  margin-left: 0;
}
.container {
  padding-right: 0;
  padding-left: 0;
 
}
.header-container {
  
  padding: 10px 15px;
}
.ctaSec .ctaLeft h3, .ctaSec .ctaRight h3 {
 font-size:.9rem;
  margin-top: 0;
}
.ctaSec .ctaLeft h2, .ctaSec .ctaRight h2{
  margin-top: 0;
  font-size: 1rem;
}
.ctaLeft p {
  margin-bottom: 0;
}
.ctaLeft, .ctaRight {
  padding: 24px 15px;
}

.toc-toggle {

  padding: 5px 10px 15px;

}
.table-of-contents {
 
  margin: 1em 0;
 
}
.hero-image-figure img {

  max-height: 300px;
}
.cBlg-heading2 {
  padding-top: 30px;
}
}

/* =================================================
   Hero / Featured Image Style
   ================================================= */

.eb-entry-article .img-align {
  margin: 3em auto; /* Adds generous vertical spacing */
}

.eb-entry-article .img-align img {
  display: block;
  border-radius: 8px; /* Softens the corners */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Adds depth */
  /*width: 100%;*/
  max-width: 100%;
  height: auto;
  margin: 2.5em auto;
}

.hero-image-figure {
  margin: 3em auto;
}

.hero-image-figure img {
  display: block;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  /*width: 100%;*/
  max-width: 100%;
  height: auto;
  margin: 2.5em auto;
}

.hero-image-figure figcaption {
  font-size: 0.9em;
  color: #111;
  text-align: center;
  margin-top: 1em;
  font-style: italic;
}

/* =================================================
   Blockquote Style
   ================================================= */

.cBlg-content blockquote {
  background-color: var(--color-background-subtle);
  border-left: 5px solid var(--color-accent);
  margin: 2em 0;
  padding: 24px 30px;
  border-radius: var(--border-radius-base);
}

/* Remove default margins from paragraphs inside the quote */
.cBlg-content blockquote p {
  margin-bottom: 0;
}

/* Style for the attribution/cite line after a blockquote */
.cBlg-content blockquote + p {
  margin-top: -1.5em; /* Pulls the attribution closer to the quote */
  margin-bottom: 2em;
  padding-right: 1em;
  text-align: right;
  font-weight: 600;
  font-style: italic;
  font-size: 0.95em;
}

.cBlg-content blockquote + p::before {
  content: "— "; /* Adds an em dash before the author */
}

.eb-entry-related .eb-related-title {
  /* Reset the large margins from the default h3 style */
  margin: 0;
  /* Use a smaller font size suitable for a link list */
  font-size: 1.1rem; /* ~20px */
  font-weight: 600;
}

.eb-blog-growth-path {
  clear: both;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 24px;
  margin: 32px 0;
  padding: 24px;
  border: 1px solid var(--color-border-subtle);
  border-left: 5px solid var(--color-accent);
  border-radius: var(--border-radius-base);
  background: #fff;
}

.eb-growth-eyebrow {
  margin: 0 0 8px;
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.eb-blog-growth-path h2,
.eb-blog-growth-path h3 {
  margin: 0 0 12px;
  line-height: 1.25;
}

.eb-blog-growth-path p {
  margin-bottom: 16px;
}

.eb-growth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.eb-growth-cta,
.eb-growth-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 16px;
  border-radius: var(--border-radius-base);
  font-weight: 700;
  line-height: 1.2;
}

.eb-growth-cta {
  background: var(--color-accent);
  color: #fff;
}

.eb-growth-cta:hover {
  color: #fff;
}

.eb-growth-secondary {
  border: 1px solid var(--color-border-subtle);
  color: var(--color-primary);
}

.eb-growth-related {
  border-left: 1px solid var(--color-border-subtle);
  padding-left: 24px;
}

.eb-growth-related ul {
  margin: 0;
  padding-left: 20px;
}

.eb-growth-related li {
  margin-bottom: 10px;
}

.eb-entry-brief {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin: 0 0 30px;
  padding: 26px 28px;
  border: 1px solid #d8e5ee;
  border-radius: 8px;
  /* A solid, audited surface keeps all white-on-dark brief copy above WCAG AA. */
  background: #183247;
  color: #fff;
  box-shadow: 0 18px 46px rgba(18, 31, 44, .13);
}

.eb-entry-brief__eyebrow,
.eb-entry-recommendation__eyebrow,
.eb-entry-review__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: #af110e;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.eb-entry-brief__eyebrow {
  color: #ffd700;
}

.eb-entry-brief h2 {
  margin: 8px 0 10px;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.3;
}

.eb-entry-brief p,
.eb-entry-brief li {
  color: rgba(255, 255, 255, .9);
  font-size: 0.92rem;
  line-height: 1.7;
}

.eb-entry-brief ul {
  display: grid;
  gap: 7px;
  margin: 14px 0 0;
  padding-left: 18px;
}

.eb-entry-brief__actions,
.eb-entry-recommendation__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 190px;
}

.eb-entry-brief__actions a,
.eb-entry-recommendation__actions a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 4px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.eb-entry-brief__actions a:first-child,
.eb-entry-recommendation__actions a:first-child {
  background: #fff;
  color: #121f2c;
}

.eb-entry-brief__actions a:last-child,
.eb-entry-recommendation__actions a:last-child {
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff;
}

/* The legacy green CTA uses a dark surface; its current-renderer H3 stays AA-safe. */
#eb article .ctaSec.green .ctaRight h3[style] {
  color: #f7fafc !important;
}

.eb-entry-recommendation,
.eb-entry-review {
  margin: 34px 0 28px;
  padding: 26px;
  border: 1px solid #e5e6e7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(18, 31, 44, .08);
}

.eb-entry-recommendation {
  border-left: 5px solid #af110e;
}

.eb-entry-recommendation h2,
.eb-entry-review h2 {
  margin: 0 0 12px;
  color: #121f2c;
  font-size: 1.35rem;
  line-height: 1.3;
}

.eb-entry-recommendation p,
.eb-entry-review p {
  color: #26394a;
  font-size: 0.96rem;
  line-height: 1.75;
}

.eb-entry-recommendation__actions {
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 16px;
}

.eb-entry-recommendation__actions a:first-child {
  background: #af110e;
  color: #fff;
}

.eb-entry-recommendation__actions a:last-child {
  border-color: #d8e5ee;
  color: #121f2c;
}

.eb-entry-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .65fr);
  gap: 22px;
  background: #f7fafc;
}

.eb-entry-review__meta {
  display: grid;
  gap: 10px;
}

.eb-entry-review__meta-item {
  padding: 12px;
  border: 1px solid #e5e6e7;
  border-radius: 4px;
  background: #fff;
}

.eb-entry-review__meta-label,
.eb-entry-review__meta-value {
  display: block;
}

.eb-entry-review__meta-label {
  color: #667085;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.eb-entry-review__meta-value {
  color: #121f2c;
  font-size: 0.9rem;
  font-weight: 700;
}

.eb-entry-review__note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid #e5e6e7;
}

.cBlg-content p a, .cBlg-content li a, .blogger-profile a {
  color: #af110e; text-decoration: underline;
}
.cBlg-authrTopInfo.cBlg-heading2 {
  padding-top: 0;
}
@media (max-width: 767px) {
.eb-entry-brief,
.eb-entry-review {
  grid-template-columns: 1fr;
}
.eb-entry-brief__actions,
.eb-entry-recommendation__actions {
  flex-direction: column;
}
.eb-blog-growth-path {
  grid-template-columns: 1fr;
  padding: 20px;
}
.eb-growth-related {
  border-left: 0;
  border-top: 1px solid var(--color-border-subtle);
  padding-left: 0;
  padding-top: 18px;
}
.cBlg-content blockquote h3.c2 {
  color: #005578 !important;
}
}

/* Developers.dev Knowledge Center 2026 — approved product-design alignment. */
:root {
  --ekc-ink: #101828;
  --ekc-body: #344054;
  --ekc-muted: #667085;
  --ekc-blue: #0866d5;
  --ekc-blue-dark: #064faa;
  --ekc-blue-soft: #eaf3ff;
  --ekc-soft: #f6f9fd;
  --ekc-border: #dce5f0;
  --ekc-shadow: 0 18px 48px rgba(16,40,72,.10);
}
html {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  scroll-behavior: smooth;
}
body {
  padding-top: 76px;
  background: var(--ekc-soft);
  color: var(--ekc-body);
  font-family: inherit;
  font-size: 17px;
  line-height: 1.75;
}
h1, h2, h3, h4, h5, h6, .eb-entry-title {
  color: var(--ekc-ink);
  font-family: Lexend, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.025em !important;
}
a { color: var(--ekc-blue); }
.cBlg-header, .sticky.cBlg-header {
  height: 76px;
  border-bottom: 1px solid var(--ekc-border);
  background: rgba(255,255,255,.96);
  box-shadow: 0 6px 24px rgba(16,40,72,.05);
  backdrop-filter: blur(14px);
}
.header-container {
  width: min(1170px, calc(100% - 40px));
  max-width: 1170px;
  height: 76px;
  margin: 0 auto;
  padding: 0;
  box-shadow: none;
}
.sticky .header-container { box-shadow: none; }
.cBlg-header::after { display: none; content: none; }
.header-logo img { width: 118px; height: 29px; }
.header-right { gap: 10px; }
.header-nav { gap: 8px; }
.header-nav-link {
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--ekc-ink);
  font-size: .94rem;
  font-weight: 600;
}
.header-nav-link:hover {
  border: 0 !important;
  background: var(--ekc-blue-soft);
  color: var(--ekc-blue-dark);
}
.header-nav-link:last-child {
  margin-left: 8px;
  padding-inline: 18px;
  border: 1px solid var(--ekc-blue);
  color: var(--ekc-blue);
}
.header-cta {
  min-height: 46px;
  padding: 10px 20px;
  border: 1px solid var(--ekc-blue);
  border-radius: 10px;
  background: var(--ekc-blue);
  color: #fff !important;
  font-size: .94rem;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(8,102,213,.18);
}
.header-cta:hover { background: var(--ekc-blue-dark); color: #fff; }
.header-nav-link:focus-visible, .header-cta:focus-visible,
.cBlg-footer a:focus-visible, .cBlg-content a:focus-visible,
.toc-toggle:focus-visible {
  outline: 3px solid #ffbf47 !important;
  outline-offset: 3px;
}

.cBlg-content {
  width: min(960px, calc(100% - 40px));
  max-width: 960px;
  margin: 34px auto 72px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ekc-border);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--ekc-shadow);
}
.cBlg-ctntBlock.container { width: 100%; max-width: none; margin: 0; padding: 0; }
#eb, .hide-sidebar .col-sm-9 { float: none; width: 100%; padding: 0; }
.cBlg-blgBxTextSecIn { padding: clamp(28px, 6vw, 72px); }
.cBlg-heading2 { padding-top: 0; }
h1, .eb-entry-title {
  max-width: 850px;
  margin: 0 0 28px;
  font-size: clamp(2.25rem, 5.2vw, 4.25rem);
  font-weight: 700;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
}
.cBlg-content p { color: var(--ekc-body); font-size: 1rem; line-height: 1.8; }
.cBlg-content h2 {
  margin: 2.2em 0 .75em;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  line-height: 1.25;
}
.cBlg-content h3 {
  margin: 1.8em 0 .65em;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.3;
}
.cBlg-content li { color: var(--ekc-body); line-height: 1.7; }
.cBlg-content p a, .cBlg-content li a, .blogger-profile a {
  color: var(--ekc-blue);
  text-decoration-color: rgba(8,102,213,.45);
  text-underline-offset: 3px;
}

.eb-entry-brief {
  margin: 0 0 36px;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid #cfe2f8;
  border-radius: 18px;
  background: #edf6ff;
  color: var(--ekc-body);
  box-shadow: none;
}
.eb-entry-brief__eyebrow { color: var(--ekc-blue-dark); letter-spacing: .1em; }
.eb-entry-brief h2 { color: var(--ekc-ink); font-size: clamp(1.45rem,2.5vw,1.9rem); }
.eb-entry-brief p, .eb-entry-brief li { color: var(--ekc-body); }
.eb-entry-brief__actions a:first-child,
.eb-entry-recommendation__actions a:first-child {
  border: 1px solid var(--ekc-blue);
  background: var(--ekc-blue);
  color: #fff;
}
.eb-entry-brief__actions a:last-child,
.eb-entry-recommendation__actions a:last-child {
  border: 1px solid var(--ekc-blue);
  background: #fff;
  color: var(--ekc-blue);
}
.eb-entry-brief__actions a, .eb-entry-recommendation__actions a,
.eb-growth-cta, .eb-growth-secondary { min-height: 46px; border-radius: 10px; }
.hero-image-figure {
  margin: 0 auto 38px;
  overflow: hidden;
  border: 1px solid var(--ekc-border);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(8,102,213,.12), rgba(8,102,213,.03)), #eef5fc;
}
.hero-image-figure img {
  width: 100%;
  max-height: 520px;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
}
.hero-image-figure figcaption {
  margin: 0;
  padding: 12px 18px;
  border-top: 1px solid var(--ekc-border);
  background: #fff;
  color: var(--ekc-muted);
  font-size: .82rem;
  font-style: normal;
}
.table-of-contents {
  margin: 26px 0 38px;
  border: 1px solid var(--ekc-border);
  border-left: 0;
  border-radius: 14px;
  background: #fff;
}
.toc-toggle { min-height: 52px; padding: 14px 18px; color: var(--ekc-ink); }
.toc-toggle:hover, .table-of-contents.is-open { background: var(--ekc-blue-soft); }
.toc-arrow { border-top-color: var(--ekc-blue); }
.toc-list-container a { color: var(--ekc-blue); }
.key-takeaways, .cBlg-content blockquote {
  padding: clamp(22px,4vw,34px);
  border: 1px solid #cfe2f8;
  border-left: 5px solid var(--ekc-blue);
  border-radius: 14px;
  background: #f3f8fe;
}
.ctaSec {
  border: 0;
  border-radius: 18px;
  background: #0d1b2f;
  box-shadow: 0 16px 36px rgba(13,27,47,.16);
}
.cBlg-content .ctaSec p,
.cBlg-content .ctaSec li {
  color: #f1f5f9;
}
.ctaRight a { border-color: #5aa7ff; border-radius: 10px; background: var(--ekc-blue); }
.ctaRight a:hover { border-color: #fff; background: #fff; color: var(--ekc-blue-dark); }
.eb-entry-recommendation, .eb-entry-review, .eb-blog-growth-path {
  border: 1px solid var(--ekc-border);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(16,40,72,.07);
}
.eb-entry-recommendation, .eb-blog-growth-path { border-left: 5px solid var(--ekc-blue); }
.eb-entry-recommendation__eyebrow, .eb-entry-review__eyebrow,
.eb-growth-eyebrow { color: var(--ekc-blue); }
.eb-entry-review { background: var(--ekc-soft); }
.eb-entry-review__meta-item { border-color: var(--ekc-border); border-radius: 10px; }
.cBlg-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ekc-border);
  border-radius: 14px;
}
.cBlg-content th, .cBlg-content td { border-color: var(--ekc-border); }
.cBlg-content thead th { background: #0d1b2f; color: #fff; }
.cBlg-content tbody tr:nth-child(even) { background: var(--ekc-soft); }
.cBlg-content tbody tr:hover { background: var(--ekc-blue-soft); color: var(--ekc-ink); }
.pn-sec { margin: 0; padding: 0 clamp(28px,6vw,72px) 52px; border-top: 0; }
.pn-sec ul a {
  min-height: 44px;
  border-color: var(--ekc-border);
  border-radius: 10px;
  color: var(--ekc-blue);
}
.cBlg-authorMainInfo {
  border: 1px solid var(--ekc-border);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(16,40,72,.07);
}

.cBlg-footer.container.row {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 62px max(24px, calc((100vw - 1170px) / 2)) 38px !important;
  background: #0d1b2f;
  color: #d6e1ee;
  font-size: .9rem;
  text-transform: none;
}
.cBlg-footer .pull-left, .cBlg-footer .pull-right {
  float: none !important;
  width: 100%;
  text-align: left;
}
.cBlg-footer .copyright { margin-bottom: 34px; color: #b8c7d9; }
.cBlg-footer .footer_menus {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 28px;
  margin: 0;
  text-align: left;
}
.cBlg-footer .footer_menus nav { width: auto; }
.cBlg-footer .cBlg-footer-links { display: grid; gap: 8px; margin: 0; padding: 0; }
.cBlg-footer .cBlg-footer-links li { display: block; margin: 0; }
.cBlg-footer .cBlg-footer-links li:first-child { margin-bottom: 6px; color: #fff; }
.cBlg-footer .cBlg-footer-links a { color: #c7d4e3; }
.cBlg-footer .social-icon { justify-content: flex-start; }

@media (max-width: 900px) {
  body { padding-top: 116px; }
  .cBlg-header, .sticky.cBlg-header { height: 116px; }
  .header-container {
    flex-wrap: wrap;
    width: min(100% - 28px,1170px);
    height: 116px;
    padding: 10px 0;
  }
  .header-right { flex: 1 1 auto; justify-content: flex-end; }
  .header-nav { order: 3; width: 100%; justify-content: center; }
  .header-nav-link { min-height: 38px; padding: 7px 10px; font-size: .84rem; }
  .header-nav-link:last-child { margin-left: 0; }
  .cBlg-footer .footer_menus { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  body { padding-top: 126px; font-size: 16px; }
  .cBlg-header, .sticky.cBlg-header { height: 126px; }
  .header-container { height: 126px; }
  .header-logo img { width: 104px; height: auto; }
  .header-right { gap: 6px; }
  .header-nav { justify-content: space-between; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .header-nav::-webkit-scrollbar { display: none; }
  .header-nav-link { flex: 0 0 auto; padding-inline: 7px; font-size: .76rem; }
  .header-nav-link:last-child { padding-inline: 10px; }
  .header-cta { min-height: 40px; padding: 7px 11px; font-size: .8rem; }
  .cBlg-content { width: calc(100% - 20px); margin: 14px auto 48px; border-radius: 18px; }
  .cBlg-blgBxTextSecIn { padding: 30px 20px; }
  h1, .eb-entry-title { font-size: clamp(2rem,10vw,3rem); line-height: 1.12 !important; }
  .eb-entry-brief, .eb-entry-review, .eb-blog-growth-path { grid-template-columns: 1fr; padding: 22px 18px; }
  .eb-entry-brief__actions, .eb-entry-recommendation__actions { min-width: 0; }
  .hero-image-figure img { min-height: 220px; object-fit: cover; }
  .ctaSec { display: block; }
  .ctaLeft, .ctaRight { width: 100%; padding: 24px 18px; }
  .ctaLeft { border: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .pn-sec { padding: 0 20px 38px; }
  .cBlg-footer.container.row { padding-inline: 22px !important; }
  .cBlg-footer .footer_menus { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}