/* =====================================================
   ZILLOW HELP CENTER — GLOBAL CSS
   Index / Table of Contents
=====================================================
  
  0. Accessibility Features
  
  1. Base & Tokens
     - Global color tokens
     - Body font family


  2. Jump Links (mobile)
     - Smooth scroll, anchor offsets
     - .jump-cta pill

  3. Footer
     - Utilities (typography, links)
     - Layout & polish

  4. Article Body
     - Normalization, headings, spacing
     - Lists, inline, media, tables, code

  5. Article Hero
     - Title, summary, meta row
     - Category pill, read-time pill

  6. Article Layout (Main + Rail) - Commented out for now. We are using a single column layout.
     - .article-grid (article pages)
     - Rail card styling

  7. Category Layout (Main + Rail)
     - .cat-grid + .has-rail
     - Desktop gap (8.25rem), sticky rail

  8. Cards: Persona
     - Card layout, title, arrow ring

  9. Cards: Article List Row
     - Title + summary + arrow ring (.icon-ring)

  10. Cards: Get in Touch
      - Figma-aligned grid card

  11. Featured/Popular Articles
      - Scoped component: .hc-articles

  12. Search Results (utility)
      - Hide unused filters

  13. Circle Arrows

  14. Additional Support Card
===================================================== */

/* ===================================================
   GLOBAL ACCESSIBILITY UTILITIES - Screen readers etc
====================================================== */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-500, #2563eb);
  outline-offset: 3px;
  border-radius: 6px;
}


/* ================================
   GLOBAL CSS
   Order:
   1) Tokens (colors, font families, type scale)
   2) Base
   3) Inheritance helpers (Text/Rich Text/HTML)
   4) Neutralize SLDS heading utilities
   5) Concrete sizes for headings/paragraphs (common wrappers)
   6) Optional: scoped class for HTML blocks
================================ */

/* 1) TOKENS ------------------------------------------------- */
:root{
  /* Colors */
  --brand-500:#2563eb;
  /* Primary action color - uses Experience Builder theme (edit in Theme Editor: ButtonColor / PrimaryAccentColor) */
  --text-action-hero-default: var(--dxp-s-button-color, var(--dxp-g-brand, #0041D9));
  --text-action-hero-hover: #003399; /* Darker shade for hover states */
  --card-border:#CDCDD3;
  --card-bg:#fff;
  --text-neutral:#111116;
  --card-body:#535364; /* summaries */

   /* Font families */
    --font-family-default: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* body */
    --font-family-heading: 'PP Object Sans','Object Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; /* headers */
  

  /* Figma-aligned heading scale */
  /* H1 = Heading-LG (44/48/800) */
  --h1-size:2.75rem;   /* 44px */
  --h1-line:1.09;      /* 48/44 */
  --h1-tracking:0.0075rem;

  /* H2 = Heading-M (32/40/700) */
  --h2-size:2rem;      /* 32px */
  --h2-line:1.25;      /* 40/32 */

  /* H3 = Heading-SM (24/32/800) */
  --h3-size:1.5rem;    /* 24px */
  --h3-line:1.333;     /* 32/24 */
  --h3-tracking:0.0075rem;

  /* H4 = same size as H3, lighter (24/32/600) */
  --h4-size:1.5rem;    /* 24px */
  --h4-line:1.333;     /* 32/24 */
  --h4-tracking:0.0075rem;

  /* H5 = Heading-XS (20/24/800) */
  --h5-size:1.25rem;   /* 20px */
  --h5-line:1.2;       /* 24/20 */
  --h5-tracking:0.0075rem;


  /* Body tokens from Figma */
  --font-size-body-lg: 1.125rem;     /* 18px */
  --line-height-body-lg: 1.5rem;     /* 24px / 133% */
  --letter-spacing-body-lg: 0.0075rem;

  --font-size-body: 1rem;            /* 16px */
  --line-height-body: 1.5rem;        /* 24px / 150% */
  --letter-spacing-body: 0.0075rem;

}

/* 2) BASE --------------------------------------------------- */
body{
  font-family:var(--font-family-default);
  color:var(--text-neutral);
}

/* 3) INHERITANCE HELPERS ----------------------------------- */
/* Make all headings use the heading family everywhere */
:where(.comm-content,.siteforceContentArea,body) :is(h1,h2,h3,h4,h5,h6){
  font-family:var(--font-family-heading) !important;
}
/* Ensure normal copy uses default family */
:where(.comm-content,.siteforceContentArea,body) :is(p,li,span){
  font-family:var(--font-family-default) !important;
}
/* Lightning primitives inherit properly */
lightning-formatted-rich-text,
lightning-formatted-text{ font-family:inherit !important; }

/* 4) NEUTRALIZE SLDS HEADING UTILITIES ---------------------*/
.slds-text-heading_large,
.slds-text-heading_medium,
.slds-text-heading_small{
  font-size:inherit !important;
  line-height:inherit !important;
}

/* 5) HEADINGS & PARAGRAPHS --------------------------------- */
/* Element OR utility class works; keeps things HTML-editor friendly */

/* H1 — apply ONLY in Builder/Rich Text wrappers not LWC */
:where(
  .forceCommunityHtmlBlock,
  .forceCommunityRichText,
  .slds-rich-text-editor__output,
  .comm-content,
  .siteforceContentArea
) :is(h1,.h1,.heading-lg){
  font-family:var(--font-family-heading) !important;
  font-size:var(--h1-size) !important;
  line-height:var(--h1-line) !important;
  font-weight:800 !important;
  letter-spacing:var(--h1-tracking);
  color:var(--text-neutral);
}


/* Utility: opt-in hero size without hitting plain <h1> tags */
.h1, .heading-lg{
  font-family:var(--font-family-heading);
  font-size:var(--h1-size);
  line-height:var(--h1-line);
  font-weight:800;
  letter-spacing:var(--h1-tracking);
  color:var(--text-neutral);
}



/* H2 — Heading-M */
:is(h2,.h2,.heading-m){
  font-family:var(--font-family-heading) !important;
  font-size:var(--h2-size) !important;
  line-height:var(--h2-line) !important;
  font-weight:700 !important;
  color:var(--text-neutral);
}

/* H3 — Heading-SM */
:is(h3,.h3,.heading-sm){
  font-family:var(--font-family-heading) !important;
  font-size:var(--h3-size) !important;
  line-height:var(--h3-line) !important;
  font-weight:800 !important;
  letter-spacing:var(--h3-tracking);
  color:var(--text-neutral);
}

/* H4 — same size as H3, lighter */
:is(h4,.h4){
  font-family:var(--font-family-heading) !important;
  font-size:var(--h4-size) !important;
  line-height:var(--h4-line) !important;
  font-weight:600 !important;
  letter-spacing:var(--h4-tracking);
  color:var(--text-neutral);
}

/* H5 — Heading-XS */
:is(h5,.h5,.heading-xs){
  font-family:var(--font-family-heading) !important;
  font-size:var(--h5-size) !important;
  line-height:var(--h5-line) !important;
  font-weight:800 !important;
  letter-spacing:var(--h5-tracking);
  color:var(--text-neutral);
}

/* H6 — fallback (kept from your original) */
:is(h6,.h6){
  font-family:var(--font-family-heading) !important;
  font-size:1rem !important;   /* 16px */
  line-height:1.4 !important;
  font-weight:700 !important;
  color:var(--text-neutral);
}

/* Paragraph utilities — Figma-aligned */
.p1 { /* body-lg (18/24) */
  font-family: var(--font-family-default);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-body-lg);
  color: var(--gray600, #535364);
}

.p2 { /* body (16/24) */
  font-family: var(--font-family-default);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-body);
  color: var(--gray600, #535364);
}

/* Optional: bold variant used for “paragraph headers” in Figma */
.p1--bold, .body-lg-bold {
  font-family: var(--font-family-default);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-body-lg);
  color: var(--gray-950-text, #111116);
}

/* Links inside text blocks inherit sizing */
.p1 a,.p2 a{ font:inherit; }

/* 5b) CONCRETE SIZES FOR COMMON WRAPPERS ------------------- */
/* Belt & suspenders so Rich Text/HTML blocks always match tokens */


.forceCommunityHtmlBlock h1,
.forceCommunityRichText h1,
.slds-rich-text-editor__output h1,
.comm-content h1,
.siteforceContentArea h1{
  font-size:var(--h1-size) !important;
  line-height:var(--h1-line) !important;
  letter-spacing:var(--h1-tracking);
  font-weight:800;
}
.forceCommunityHtmlBlock h2,
.forceCommunityRichText h2,
.slds-rich-text-editor__output h2,
.comm-content h2,
.siteforceContentArea h2{
  font-size:var(--h2-size) !important;
  line-height:var(--h2-line) !important;
  font-weight:700;
}
.forceCommunityHtmlBlock h3,
.forceCommunityRichText h3,
.slds-rich-text-editor__output h3,
.comm-content h3,
.siteforceContentArea h3{
  font-size:var(--h3-size) !important;
  line-height:var(--h3-line) !important;
  font-weight:800;
  letter-spacing:var(--h3-tracking);
}
.forceCommunityHtmlBlock h4,
.forceCommunityRichText h4,
.slds-rich-text-editor__output h4,
.comm-content h4,
.siteforceContentArea h4{
  font-size:var(--h4-size) !important;
  line-height:var(--h4-line) !important;
  font-weight:600;
  letter-spacing:var(--h4-tracking);
}
.forceCommunityHtmlBlock h5,
.forceCommunityRichText h5,
.slds-rich-text-editor__output h5,
.comm-content h5,
.siteforceContentArea h5{
  font-size:var(--h5-size) !important;
  line-height:var(--h5-line) !important;
  font-weight:800;
  letter-spacing:var(--h5-tracking);
}

.forceCommunityHtmlBlock p,
.forceCommunityRichText p,
.slds-rich-text-editor__output p,
.comm-content p,
.siteforceContentArea p{
  font-size: var(--font-size-body) !important;
  line-height: var(--line-height-body) !important;
  color: var(--card-body);
}




/* 6) OPTIONAL: SCOPED CLASS FOR HTML COMPONENTS ------------ */
/* Add "zg-rt" in Builder → Advanced → CSS Class on the HTML component */
.zg-rt{ font-family:var(--font-family-default) !important; }
.zg-rt :is(h1,h2,h3,h4,h5,h6){ font-family:var(--font-family-heading) !important; }


/* =====================================================
   Jump Link (mobile) css
===================================================== */

/* Smooth scroll for in-page anchors (no JS) */
html { scroll-behavior: smooth; }

/* Offset anchors so headings aren’t hidden under sticky headers */
.anchor-target {
  /* adjust 72px if your header is taller/shorter */
  scroll-margin-top: calc(var(--sticky-header, 72px) + 12px);
}


/* Jump CTA (secondary pill) */
.jump-cta { margin: 16px 0 8px; }
.jump-cta__link{
  display: block;
  width: 100%;
  min-height: 44px;                 /* comfortable tap target */
  padding: 12px 16px;
  border-radius: 9999px;
  text-align: center;
  text-decoration: none;

  border: 2px solid var(--brand-500, #2563eb);
  color: var(--brand-500, #2563eb);
  background: #fff;
  font: 700 1rem/1.25 var(--font-family-default, Inter, system-ui, sans-serif);
  letter-spacing: .0075rem;
}

.jump-cta__link:hover{
  background: rgba(37, 99, 235, 0.06);         /* subtle hover */
}

.jump-cta__link:focus-visible{
  outline: 3px solid var(--brand-500, #2563eb);
  outline-offset: 3px;
  border-color: #003bbd;
}

.jump-cta__chev{
  margin-left: .375rem;
  font-weight: 800;
  line-height: 1;
}



/* ======================================
   VARIABLES (layout caps & gutters)
====================================== */
:root{
  --container-max: 1168px;                         /* total desktop content width */
  --gutter: clamp(16px, 4vw, 32px);                /* page side padding */
  --col-gap: clamp(24px, 4vw, 48px);               /* gap between main + rail */

  --hero-max: 686px;   /* Figma: title+summary width */
  --body-max: 535px;   /* Figma: reading width */

  --rail-min: 320px;   /* min width for the right rail */
}





/* ================================
   FOOTER — isolation + sane defaults
   (safe to paste after your current footer CSS)
================================ */

.page-footer{
  /* enforce footer families locally */
  --font-family-default: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-heading: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* local fineprint tokens */
  --fineprint-size: 0.75rem; /* 12px */
  --fineprint-line: 1rem;    /* 16px */
  --fineprint-color: #6b7280;

  /* base text for footer */
  font-family: var(--font-family-default);
  font-size: var(--fineprint-size);
  line-height: var(--fineprint-line);
  color: var(--fineprint-color);

  /* layout - RESTORED */
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* RESTORED: Footer child element layout */
.page-footer .fine-print {
  max-width: 860px; /* Increased to prevent "provinces" from wrapping */
  margin: 0 auto;
  text-align: center;
}

.page-footer .fineprint-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 760px;
  width: 100%;
  margin-block: 0;
}

.page-footer .fineprint-block + .fine-print { margin-top: 6px; }
.page-footer .fine-print + .app-badges { margin-top: 10px; }
.app-badges + .footer-social { margin-top: 12px; }

/* App badges row */
.page-footer .app-badges {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .page-footer .app-badges { gap: 10px; }
}
.page-footer .app-badges a + a { margin-left: 12px; }

/* Social row */
.page-footer .footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.page-footer .footer-social .slds-m-right_x-small,
.page-footer .footer-social .slds-m-horizontal_small { margin: 0 !important; }
.page-footer .footer-social .social-img { height: 20px; width: auto; vertical-align: middle; }
.page-footer .footer-social > a:first-of-type img { display: block; transform: translateY(-2px); }
.page-footer .footer-social span { font-style: italic; }

/* Images */
.app-badge-img { display: block; height: 40px; width: auto; }
@media (max-width: 480px) { .app-badge-img { height: 36px; } }
.social-img { display: inline-block; height: 20px; width: auto; vertical-align: middle; }

/* Mobile wrap polish */
@media (max-width: 768px) {
  .page-footer { padding: 16px; gap: 16px; }
  .page-footer .fine-print,
  .page-footer .fineprint-block,
  .page-footer .fineprint-links { max-width: 100%; }
  .page-footer .fine-print,
  .page-footer .fineprint-links { overflow-wrap: anywhere; hyphens: auto; }
}

/* 1) Neutralize SLDS text utilities inside footer */
.page-footer [class^="slds-text-"],
.page-footer [class*=" slds-text-"]{
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  text-transform: none !important;
  letter-spacing: inherit !important;
}

/* 2) Keep footer headings tiny (if any appear) */
.page-footer :is(h1,h2,h3,h4,h5,h6){
  font-family: var(--font-family-default) !important;
  font-size: 0.875rem !important;  /* 14px */
  line-height: 1.4 !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: inherit !important;
}

/* 3) Normal copy elements */
.page-footer :is(p,li,small,span,strong,em){
  font-family: var(--font-family-default) !important;
  font-size: var(--fineprint-size) !important;
  line-height: var(--fineprint-line) !important;
}

/* 4) Links in footer */
.page-footer a{
  font: inherit !important;
  color: var(--text-action-hero-default, #0041D9) !important;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
}

/* Ensure fine-print links are blue (more specific selector) */
.page-footer .fine-print a,
.page-footer .fineprint-link,
.page-footer a.fineprint-link,
.page-footer .u-link,
.page-footer a.u-link{
  color: var(--text-action-hero-default, #0041D9) !important;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 3px;
}

/* Visited links in footer - purple */
.page-footer a:visited,
.page-footer .fine-print a:visited,
.page-footer .fineprint-link:visited,
.page-footer a.fineprint-link:visited,
.page-footer .u-link:visited,
.page-footer a.u-link:visited{
  color: rgb(96, 0, 182) !important;
}

.page-footer a.u-link-cta{
  font-weight: 700;
  letter-spacing: 0.0075rem;
  color: var(--text-action-hero-default, #0041D9) !important;
}

/* 5) Layout polish (kept minimal) */
.page-footer .fineprint-block,
.page-footer .fineprint-links{
  max-width: 860px; /* Increased to prevent text wrapping issues */
  width: 100%;
}
.page-footer .fineprint-links{
  list-style: none; padding: 0; margin: 0;
}
.page-footer .fineprint-links .sep{ color: var(--fineprint-color); user-select: none; }

/* kill SLDS list spacing so gap/margins control it */
.page-footer .fineprint-links.slds-list_vertical li + li{ margin-top: 0 !important; }
.page-footer .fineprint-links li.slds-m-vertical_xx-small{ margin-top: 0 !important; margin-bottom: 0 !important; }



/* ======================================
   ARTICLE BASE / BODY
====================================== */
.zg-article {
  max-width: var(--body-max);   /* was --container-max */
  margin-inline: auto;
  color: var(--gray600,#535364);
  font-family: var(--font-family-default, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

/* Body container */
.zg-article__body{
  margin: 0;
  padding: 0;                 /* gutters come from the grid wrapper */
}

/* Normalize pasted inline styles */
.zg-article [style*="font-size"],
.zg-article [style*="line-height"] { font-size: inherit !important; line-height: inherit !important; }
.zg-article [style*="font-family"]{ font-family: inherit !important; }
.zg-article [style*="color"]{ color: inherit !important; }
.zg-article font { all: unset; }
.zg-article span[style=""]{ all: unset; }
.zg-article p:empty,
.zg-article :is(p,div):has(> br:only-child){ display:none; }
.zg-article br+br{ display:none; }

/* Flow & spacing */
.zg-article > * { margin-top: 0; margin-bottom: 16px; }
.zg-article :is(ul,ol){ padding-left: 1.25rem; margin: 0 0 16px 1rem; }
.zg-article li+li{ margin-top: 4px; }






/* Inline & code */
.zg-article a{ color:var(--zg-link,#0b67ff); text-decoration: underline; text-underline-offset: 2px; }
.zg-article strong{ font-weight:700; }
.zg-article em{ font-style: italic; }
.zg-article code, .zg-article pre{
  font-family: var(--font-family-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size:.95em;
  background: var(--zg-bg-quote,#f6f7f9);
  border:1px solid var(--zg-border,#e0e3e8);
  border-radius:6px;
}
.zg-article code{ padding:2px 6px; }
.zg-article pre{ padding:12px; overflow:auto; white-space:pre; -webkit-overflow-scrolling:touch; }

/* Media */
.zg-article img{
  display:block; max-width:100%; height:auto;
  margin:16px auto 24px; border-radius:8px; border:1px solid var(--zg-border,#e0e3e8);
}
.zg-article figure{ margin:16px 0; }
.zg-article figcaption{
  color: var(--color-text-subtle,#6b7280);
  font-size:14px; line-height:20px; text-align:center; margin-top:4px;
}

/* Tables */
.zg-article table{
  display:block; width:100%; overflow-x:auto;
  border-collapse:collapse; margin:16px 0;
  font-size:14px; line-height:20px; -webkit-overflow-scrolling:touch;
}
.zg-article th, .zg-article td{
  border:1px solid var(--zg-border,#e0e3e8);
  padding:8px 12px; vertical-align:top;
}
.zg-article th{ text-align:left; font-weight:600; background:var(--zg-bg-quote,#f6f7f9); }

/* Embeds */
.zg-article iframe,
.zg-article video{
  display:block; width:100%;
  aspect-ratio:16 / 9;
  height:auto;
  border:0; border-radius:8px;
  margin:16px 0 24px;
}

/* "Strong-only" paragraph → mini subhead */
.zg-article p > strong:only-child{
  display:block; margin:24px 0 8px; color:var(--gray-950-text,#111116);
  font:700 var(--font-size-body-lg,18px)/var(--line-height-body-lg,24px)
       var(--font-family-default, Inter, system-ui, sans-serif);
  letter-spacing:var(--letter-spacing-body-lg,.12px);
}
.zg-article p > strong:first-child:not(:only-child){
  font-weight:700; font-size:16px; line-height:24px;
}



/* Article body headings = Inter (not Object Sans) */
.zg-article :is(h1,h2,h3,h4,h5,h6){
  font-family: var(--font-family-default) !important; /* Inter */
  color: var(--text-neutral, #111116);
}




/* ======================================
   HERO (Title + Summary + Meta Row)
====================================== */
.article-hero {
  display: flex; flex-direction: column; align-items: flex-start;
  color: var(--text-neutral, #111116);
  margin: 0 0 24px 0; padding: 0;               /* aligned left inside grid */
  max-width: var(--hero-max);
}

.meta-row {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.5rem;                         /* pills → title */
}




/* =====================================================
   ARTICLE TITLE — use same font tokens as global <h1>
===================================================== */
.article-title {
  font-family: var(--font-family-heading);
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  font-weight: 800;
  letter-spacing: var(--h1-tracking);
  color: var(--gray-950-text, #111116);  /* Figma neutral heading color */

  /* layout/flow tweaks */
  margin-block: 0 1.5rem; /* top and bottom margin */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual !important;  /* No automatic hyphenation - force override */
  align-self: stretch;
}

/* Responsive scaling (optional) */
@media (max-width: 640px) {
  .article-title {
    font-size: clamp(2rem, 6vw, 2.5rem);
    line-height: 1.2;
  }
}

/* =====================================================
  ARTICLE SUMMARY 
===================================================== */
.article-summary {
  margin: 0;
  margin-block-end: 1.5rem;           /* adds 1.5rem spacing after */
  max-width: min(70ch, var(--hero-max));
  color: var(--gray700, #393945);
  font-family: Inter, system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.875rem;              /* 150% */
  overflow-wrap: anywhere;
  hyphens: auto;
}


/* Category pill */
.meta-row .hc-pill{
  display:inline-flex; justify-content:center; align-items:center;
  padding:0 12px; border-radius:9999px;
  background: var(--bg-express-trust-hero, #0041D9) !important;
  color: var(--text-onHero-action-neutral-default, #FFF) !important;
  font: 700 var(--font-size-body-sm, .875rem)/var(--line-height-body-sm, 1.5rem)
        var(--font-family-default, Inter, system-ui, sans-serif);
  letter-spacing: var(--letter-spacing-body-sm, .0075rem);
  white-space: nowrap;
}

/* Readtime pill */
.readtime{
  display:flex; align-items:center; white-space:nowrap;
  gap: var(--T3-Tag-md-gap-label-toIcon, 0.25rem);
  padding: var(--T3-Tag-md-padding-vert, 0.125rem) var(--T3-Tag-md-padding-horz, 0.5rem);
  border-radius: var(--T3-Tag-md-radius, 62.4375rem);
  background: var(--bg-softest, #EEEEF0);
  color: var(--bg-impact-soft-fixed, #2A2A33);
  font: 700 var(--font-size-body-sm, .875rem)/var(--line-height-body-sm, 1.5rem)
        var(--font-family-default, Inter, system-ui, sans-serif);
  letter-spacing: var(--letter-spacing-body-sm, .0075rem);
}
.readtime__icon{ width:.875rem; height:.875rem; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
.readtime__icon svg{ width:100%; height:100%; fill: var(--bg-impact-soft-fixed, #2A2A33); }
.readtime__icon .icon-clock-filled{ color: var(--bg-impact-soft-fixed, #2A2A33); width:100%; height:100%; }



/* ==========================================================================================
   LAYOUT: TWO-COLUMN GRID + RAIL — DISABLED (single-column now)
   Keeping for reference; remove later if not needed.
==========================================================================================

.article-grid.has-rail{
  display: grid;
  grid-template-columns: minmax(0, var(--hero-max)) minmax(var(--rail-min), 1fr);
  gap: var(--col-gap);
  padding-inline: var(--gutter);
  margin: 0 auto;
  max-width: var(--container-max);
  align-items: start;
}

.zg-article__body{
  max-width: var(--body-max);
}

.article-rail{
  min-width: var(--rail-min);
  width: min(384px, 100%);
  align-self: start;
}
@media (min-width:1025px){
  .article-rail{ position: sticky; top: 96px; }
}

.hc-rail-card{
  margin: 0;
  background: #fff;
  border: 1px solid var(--card-border,#CDCDD3);
  border-radius: 16px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 2px rgba(17,17,22,0.04);
}
.hc-rail-card .card-figure{ display:block; width:100%; height:auto; border-radius:12px; }
.hc-rail-card .card-title{
  margin: 4px 0 0; color: var(--text-neutral,#111116);
  font-family: var(--font-family-heading,"PP Object Sans","Object Sans",system-ui,sans-serif);
  font-weight: 800; font-size: 1.25rem; line-height: 1.75rem;
}
.hc-rail-card .card-summary{
  margin: 0; color: var(--gray600,#535364);
  font: 400 1rem/1.5rem var(--font-family-default,Inter,system-ui,sans-serif);
}
.hc-rail-card .btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--text-action-hero-default,#0041D9);
  color: var(--text-action-hero-default,#0041D9);
  background: transparent; text-decoration: none;
  font: 700 .9375rem/1.25rem var(--font-family-default,Inter,system-ui,sans-serif);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hc-rail-card .btn-outline:hover{
  background: rgba(0,65,217,.06);
  border-color: var(--text-action-hero-default,#0041D9);
}

*/



/* ======================================
   ARTICLE GRID BASE (restored - needed for article pages)
   Updated: 12-column grid with 128px left margin per Figma (desktop only)
====================================== */
.article-grid {
  max-width: var(--container-max);
  margin: 0 auto; /* Center the container */
  padding-inline: var(--gutter);
}

/* Desktop (1024px+): 128px left margin for article content */
@media (min-width: 1024px) {
  .article-grid {
    /* 12-column grid with fixed first column for left margin */
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: 0;
  }
  
  .article-grid .article-main {
    grid-column: 2; /* Start after the 128px margin column */
  }
}

/* Tablet (768px-1023px): Centered with smaller side margins */
@media (min-width: 768px) and (max-width: 1023px) {
  .article-grid {
    display: block; /* No grid on tablet */
  }
  
  .article-grid .article-main {
    max-width: 90%; /* Slightly narrower than full width */
    margin: 0 auto; /* Center it */
  }
}

/* Mobile (<768px): full width with standard gutters */
@media (max-width: 767px) {
  .article-grid {
    display: block; /* No grid on mobile */
  }
  
  .article-grid .article-main {
    width: 100%;
  }
}



/* ======================================
   RESPONSIVE (stack cleanly on mobile)
====================================== */

/* Disabled with single-column:
@media (max-width: 768px){
  .article-grid.has-rail{
    grid-template-columns: 1fr !important;
    max-width: none;
  }
  

  .article-hero,
  .article-summary,
  .zg-article__body{
    max-width: 100% !important;
    padding-inline: var(--gutter);
  }

  .article-rail{
    order: 2;
    position: static !important;
    width: 100% !important; min-width: 0 !important;
    margin-top: 24px;
  }
}
*/

/* Comment out for now. We are using a single column layout.
/* ===== Mobile rail hardening =====
@media (max-width: 768px){
  /* force single column + no horizontal scroll 
  .article-grid,
  .article-grid.has-rail{
    display: block !important;
    padding-inline: var(--gutter);
    overflow-x: hidden;
  }

  /* rail becomes a full-width block below body
  .article-rail{
    position: static !important;
    order: 2;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 24px;
    overflow: visible;
  }

  /* rail card & media must fit the viewport
  .hc-rail-card{
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    margin: 0;
  }

  .hc-rail-card .card-figure-wrap{
    display:block;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    border-radius: 12px;
  }

  .hc-rail-card .card-figure{
    display:block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;          /* ensure no fixed height crops 
    object-fit: cover;                 /* keeps it pretty if CMS sends odd dims
  }

  /* make sure hero/body don't add extra width 
  .article-hero,
  .article-summary,
  .zg-article__body{
    max-width: 100% !important;
    margin: 0;
    padding-inline: 0;                 /* grid already added gutters
  }
}
*/


/* ===== Sticky behavior & scrolling ===== */

@media (min-width: 1025px) {
  /* Single-column alignment */
  .article-grid:not(.has-rail) .hc-toc {
    max-width: var(--body-max-single, min(88ch, 1040px));
    margin-inline: auto;
    position: sticky;
    top: 96px;
  }

  /* Rail variant disabled:
  .article-grid.has-rail .hc-toc {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow: auto;
    overscroll-behavior: contain;
    margin: 0;
  }
  */
}

/* Mobile full-width block */
@media (max-width: 768px) {
  .hc-toc a {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-box-orient: unset;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* Prevent headings from hiding under sticky header */
.zg-article__body :is(h2, h3, h4) {
  scroll-margin-top: 96px;
}

/* Kill SLDS truncation so links can wrap */
.hc-toc .slds-truncate,
.hc-toc a,
.hc-toc a * {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Clamp to two lines on desktop; full wrap on mobile */
.hc-toc a {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2;            /* allow 2 lines */
  line-clamp: 2;
  line-height: 1.5rem;
  max-width: 100%;
  word-break: break-word;
}

@media (max-width: 768px){
  .hc-toc a{
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-box-orient: unset;
  }
}





/* ======================================
   PERSONA CARDS (ACTIVE VERSION - grid solution with full card styling)
====================================== */

/* Base card styling */
a.card.persona {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  height: 100%;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--card-border, #CDCDD3);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: var(--text-neutral, #111116);
  text-decoration: none;
  transition: box-shadow 0.2s ease;
  box-sizing: border-box;
}

/* Hover & focus states */
a.card.persona:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
a.card.persona:any-link {
  color: var(--text-neutral, #111116) !important;
}
a.card.persona:focus-visible {
  outline: 2px solid var(--brand-500, #2563eb);
  outline-offset: 3px;
}
a.card.persona { -webkit-tap-highlight-color: transparent; }

/* Illustration */
.card.persona .card-figure {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 16px;
  flex: 0 0 auto;
}

/* Title + arrow row */
.card.persona .title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin-top: auto;
  margin-bottom: 0;
}

.card.persona .title-row h3 {
  flex: 1 0 0;
  margin: 0;
  font-family: "PP Object Sans", "Object Sans", system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.5rem;
  letter-spacing: 0.0015rem;
  color: var(--foreground-granite-off-black, #111116);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Arrow circle */
.card.persona .arrow-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--brand-500, #2563eb);
  background: #fff;
  color: var(--brand-500, #2563eb);
  box-sizing: border-box;
  text-decoration: none !important;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

/* Grid container (list) */
.persona-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(320px, 1fr));
  gap: 24px;
  align-items: stretch;
  list-style: none;
  padding: 0;
  margin: 0;
}

.persona-cards > li {
  height: 100%;
}

/* Responsive */
@media (max-width: 1024px) {
  .persona-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  a.card.persona {
    padding: 16px;
  }
  .card.persona .card-figure {
    width: 104px;
    height: 104px;
    margin-bottom: 12px;
  }
  .card.persona .arrow-circle {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 640px) {
  .persona-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  a.card.persona {
    padding: 14px;
    border-radius: 10px;
  }
  .card.persona .card-figure {
    width: 88px;
    height: 88px;
    margin-bottom: 10px;
  }
  .card.persona .title-row h3 {
    font-size: 18px;
    line-height: 22px;
  }
}






/* =====================================================
   Card Type — Article List Row (Network Data Category)
   Markup:
   <a class="row article-list" href="...">
     <div class="link-title">
       <h3 class="title">Title</h3>
       <span class="icon-ring">
         <!-- EITHER -->
         <!-- <img src="..." alt=""> -->
         <!-- OR -->
         <!-- <i class="icon icon-arrow-right-outline" aria-hidden="true"></i> -->
       </span>
     </div>
     <p class="summary">¦</p>
     <div class="divider" aria-hidden="true"></div>
   </a>
===================================================== */

/* Row container */
a.row.article-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px 8px 16px 0; /* Added 8px right padding for arrow hover expansion */
  color:inherit;
  text-decoration:none;
}

/* Title + icon (arrow) row */
.row.article-list .link-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.625rem; /* 10px */
  align-self:stretch;
}

/* Title */
.row.article-list .title{
  margin:0;
  font-family:var(--font-family-heading,"PP Object Sans","Object Sans",system-ui,sans-serif);
  font-weight:800;
  font-size:24px;
  line-height:32px;
  letter-spacing:.12px;
  color:var(--text-neutral,#111116);
}

/* Summary (2-line clamp) */
.row.article-list .summary{
  margin:0;
  width:30rem;                /* 480px cap on wide screens */
  max-width:100%;
  height:3.25rem;             /* ~2 lines of 1.5rem */
  font:400 1rem/1.5rem var(--font-family-default,Inter,system-ui,sans-serif);
  letter-spacing:.0075rem;
  color:var(--gray700,#393945);
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Divider */
.row.article-list .divider{
  height:.0625rem; /* 1px */
  align-self:stretch;
  background:var(--T3-Divider-muted-bg,#CDCDD3);
  margin-bottom: 1rem; /* 16px spacing after divider */
}

/* =====================================================
   Subcategory Link (Compact Version)
===================================================== */
.subcategory-link{
  display:flex;
  flex-direction:column;
  gap:8px; /* Tighter gap than article-list */
  padding:8px 8px 8px 0; /* Less padding than article-list */
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}

.subcategory-link .link-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.625rem;
  align-self:stretch;
}

.subcategory-link .title{
  margin:0;
  font-family:var(--font-family-heading,"PP Object Sans","Object Sans",system-ui,sans-serif);
  font-weight:800;
  font-size:20px; /* Slightly smaller than article-list */
  line-height:28px;
  letter-spacing:.1px;
  color:var(--text-neutral,#111116);
}

.subcategory-link .summary{
  margin:0;
  width:30rem;
  max-width:100%;
  height:1.5rem; /* Single line instead of 2 */
  font:400 0.875rem/1.5rem var(--font-family-default,Inter,system-ui,sans-serif);
  letter-spacing:.0075rem;
  color:var(--gray700,#393945);
  display:-webkit-box;
  -webkit-line-clamp:1; /* Single line */
  line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.subcategory-link .divider{
  height:.0625rem;
  align-self:stretch;
  background:var(--T3-Divider-muted-bg,#CDCDD3);
}

/* Icon ring styling for subcategories */
.subcategory-link .link-title > .icon-ring{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  border:2px solid var(--brand-500,#2563eb);
  background:#fff;
  color:var(--brand-500,#2563eb);
  box-sizing:border-box;
  flex-shrink:0;
  transition:transform 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
  will-change:transform;
  pointer-events:none;
}

.subcategory-link .link-title > .icon-ring::before{
  content:"\2192"; /* → */
  font:800 16px/1 var(--font-family-heading,"PP Object Sans","Object Sans",system-ui,sans-serif);
  color:currentColor;
  text-decoration:none !important;
  pointer-events:none;
}

.subcategory-link .link-title > .icon-ring > *{
  display:none !important;
}

/* Hover states - works with banner hover since banner is the link */
dxp_content_layout-banner:hover .subcategory-link .link-title > .icon-ring,
.subcategory-link:hover .link-title > .icon-ring{
  border-color:#003bbd;
  color:#003bbd;
  transform:scale(1.15);
}

dxp_content_layout-banner:active .subcategory-link .link-title > .icon-ring,
.subcategory-link:active .link-title > .icon-ring{
  transform:scale(1.08);
}

/* Mobile responsive */
@media (max-width:768px){
  .subcategory-link .link-title{
    display:grid;
    grid-template-columns:1fr auto;
    column-gap:.625rem;
  }
  .subcategory-link .title{
    min-width:0;
    overflow-wrap:anywhere;
  }
  .subcategory-link .summary{
    width:100%;
  }
}

/* Force remove padding from subcategories HTML component wrapper */
/* Target the specific HTML editor component ID and its parent containers */
[data-component-id="htmlEditor-14696220-1439-4b2f-978d-7501a6ff948f"],
[data-component-id="14696220-1439-4b2f-978d-7501a6ff948f"],
#htmlEditor-14696220-1439-4b2f-978d-7501a6ff948f,
.lwc-2ge5gsvahr1-host[data-component-id*="14696220"] {
  padding: 0 !important;
}

/* Also target the wrapper containers */
.lwc-2p21igapoi4 .lwc-4k1qbp7c1st-host,
.webruntime-component-container:has([data-component-id="14696220-1439-4b2f-978d-7501a6ff948f"]) {
  padding: 0 !important;
}

/* Remove padding from any parent of subcategory links */
:has(> .subcategory-link),
:has(> #subcategoriesList) {
  padding: 0 !important;
}







/* =====================================================
   Network Data Category Layout (Main + Rail)
===================================================== */

/* Page vars */
:root{
  --cat-container: 1168px;
  --cat-gutter: clamp(16px, 4vw, 32px);
  --cat-gap: clamp(24px, 4vw, 48px);
  --cat-rail-min: 320px;        /* rail min width */
  --cat-rail-max: 384px;        /* rail max width */
  --cat-rail-gap: 8.25rem;      /* Figma desktop gap between columns */
}






/* Base: single column so page still works if rail is empty */
.cat-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--cat-gap);
  padding-inline:var(--cat-gutter);
  margin:0 auto;
  max-width:calc(var(--cat-container) + 2 * var(--cat-gutter));
  align-items:start;
}

/* Desktop/tablet: two columns when wrapper has 'has-rail' */
.cat-grid.has-rail{
  grid-template-columns:
    minmax(0, 1fr)                                     /* main */
    minmax(var(--cat-rail-min), var(--cat-rail-max));  /* rail */
  column-gap:var(--cat-rail-gap) !important; /* 8.25rem */
  gap:var(--cat-rail-gap) !important;
}

/* Experience Builder Columns component interferes with gap - use margin instead */
@media (min-width:1025px){
  .cat-grid.has-rail > community_builder-columns > *:first-child,
  .cat-grid.has-rail > dxp_base-columns > *:first-child {
    margin-right: var(--cat-rail-gap) !important; /* Space between columns */
  }
}

/* Ensure children can shrink/wrap */
.cat-grid > *{ min-width:0; }

/* Optional sticky rail on wide screens */
@media (min-width:1025px){
  .cat-grid.has-rail > :last-child{ position:sticky; top:96px; }
}

/* Tablet/Mobile: stack rail under main */
@media (max-width:1024px){
  .cat-grid{
    grid-template-columns:1fr !important;
    column-gap:0;
    max-width:none;
  }
  .cat-grid > :last-child{
    position:static !important;
    margin-top:24px;
    min-width:0;
  }
}





/* -----------------------------------------------------
Rail Card — Need More Help (stacked layout)
Markup:

<div class="card need-help hc-rail-card"> <div class="card-figure-wrap"> <img class="card-figure" src="…" alt=""> </div> <h3 class="card-title">Need more help?</h3> <p class="card-summary">Our support team is here to help.</p> <a class="btn-outline" href="/contact-us">Submit a request</a> </div> -----------------------------------------------------

.hc-rail-card.need-help{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:16px;

padding:32px 24px;
border-radius:12px;
border:1px solid var(--card-border,#CDCDD3);
background:#fff;
box-shadow:0 1px 2px rgba(0,0,0,.04);
box-sizing:border-box;

width:100%;
margin-left:0;
margin-right:0;
align-self:stretch;
}

/* figure 
.hc-rail-card.need-help .card-figure-wrap{
width:140px;
height:140px;
padding:8px;
margin-bottom:12px;
}
.hc-rail-card.need-help .card-figure{
display:block;
width:100%;
height:100%;
object-fit:contain;
border-radius:0;
}

/* heading 
.hc-rail-card.need-help .card-title{
margin:0;
color:var(--text-neutral,#111116);
font:800 24px/32px "PP Object Sans","Object Sans",system-ui,sans-serif;
}

/* copy 
.hc-rail-card.need-help .card-summary{
margin:0;
color:var(--text-neutral,#111116);
font:400 18px/24px Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* button 
.hc-rail-card.need-help .btn-outline{
display:inline-flex;
align-items:center;
justify-content:center;
height:44px;
padding:0 20px;

border-radius:10px;
border:2px solid var(--brand-500,#2563eb);
color:var(--brand-500,#2563eb);
background:#fff;

text-decoration:none;
font-weight:700;
cursor:pointer;
}
.hc-rail-card.need-help .btn-outline:hover{
background:rgba(37,99,235,.06);
}
.hc-rail-card.need-help .btn-outline:focus-visible{
outline:2px solid var(--brand-500,#2563eb);
outline-offset:2px;
}

/* optional alignment helper (kept from header version) 
.hc-rail-card.need-help.left{
align-items:flex-start;
text-align:left;
}

/* desktop rail width cap 
@media (min-width:1024px){
.hc-rail-card.need-help{ max-width:300px; }
}

/* --- Need-help card: responsive figure sizing / prevent cropping --- 

/* Let the wrapper size to content; don't force a fixed box 
.hc-rail-card.need-help .card-figure-wrap{
  width: auto;
  height: auto;
  padding: 0;           /* optional: remove extra white ring; add back if you prefer 
  margin-bottom: 12px;
}

/* Size the image itself; keep aspect ratio; neutralize template overrides
.hc-rail-card.need-help .card-figure{
  display: block;
  width: clamp(96px, 28vw, 140px);  /* 96–140px responsive 
  max-width: 140px;                 /* hard cap 
  height: auto !important;          /* avoid theme rules that set height 
  object-fit: contain;              /* safe if any width/height constraints appear 
  border-radius: 0;
  align-self: flex-start;           /* keep it left-aligned in the column 
}

/* If you prefer a small white buffer around the image, add just a light pad here
   instead of fixing the wrapper size 

.hc-rail-card.need-help .card-figure { padding: 8px; background: #fff; border-radius: 8px; }


/* Optional: slight scale tweaks by breakpoint (if you want more control) 
@media (min-width: 1024px){
  .hc-rail-card.need-help .card-figure{ width: 140px; }
}
@media (max-width: 640px){
  .hc-rail-card.need-help .card-figure{ width: 112px; }
}
*/

/* =====================================================
   Rail Card — Subcategories
   Usage: <div class="hc-rail-card subcategories">...</div>
   Works with Banner or Container components
===================================================== */
.hc-rail-card.subcategories,
dxp_content_layout-banner.hc-rail-card.subcategories{
  display:flex !important;
  flex-direction:column;
  gap:0; /* no gap - items have their own padding */
  
  padding:0 !important;
  border-radius:12px !important;
  border:1px solid var(--card-border,#CDCDD3) !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04) !important;
  overflow:hidden; /* for border-radius on children */
  
  width:100%;
  margin:0;
  box-sizing:border-box;
}

/* Align subcategories card with article content (offset for divider height + margin) */
@media (min-width:1025px){
  .cat-grid.has-rail .hc-rail-card.subcategories {
    margin-top: 1.0625rem !important; /* Aligns with article content after divider (1px) + margin (1rem) */
  }
}

/* Remove any default Banner borders/styling */
dxp_content_layout-banner.hc-rail-card.subcategories > *{
  border:none !important;
  padding:0 !important;
}

/* Remove List component border inside rail card */
.hc-rail-card.subcategories community_builder-list,
.hc-rail-card.subcategories dxp_data_provider-self-service-list,
.hc-rail-card.subcategories dxp_data_provider-self-service-list-data-provider {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Heading inside the card */
.hc-rail-card.subcategories .card-heading{
  margin:0;
  padding:20px 24px 16px;
  color:var(--text-neutral,#111116);
  font:800 20px/28px var(--font-family-heading,"PP Object Sans","Object Sans",system-ui,sans-serif);
}

/* Container for the list of subcategory links */
.hc-rail-card.subcategories .subcategories-list{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  margin:0;
}

/* Individual subcategory items - override the compact styling for rail */
.hc-rail-card.subcategories .subcategory-link{
  padding:16px 24px;
  border-bottom:1px solid var(--grey-200,#e5e7eb);
  gap:8px;
  cursor:pointer;
  transition:background-color 0.15s ease;
}

.hc-rail-card.subcategories .subcategory-link:last-child{
  border-bottom:none;
}

.hc-rail-card.subcategories .subcategory-link:hover{
  background-color:var(--grey-50,#f9fafb);
}

/* Title in rail should be slightly smaller */
.hc-rail-card.subcategories .subcategory-link .title{
  font-size:16px;
  line-height:24px;
  font-weight:700;
}

/* Summary in rail - single line with ellipsis */
.hc-rail-card.subcategories .subcategory-link .summary{
  font-size:14px;
  line-height:20px;
  color:var(--text-muted,#6b7280);
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Icon positioning in rail */
.hc-rail-card.subcategories .subcategory-link .icon-ring{
  width:24px;
  height:24px;
}

.hc-rail-card.subcategories .subcategory-link .icon-ring::before{
  font-size:14px;
}

/* ================================
   Card — Get in touch (Figma-aligned)
   Usage: <a class="card get-in-touch" href="…"> … </a>
   Optional: add .image-right to put the image on the right on desktop
=================================== */

a.card.get-in-touch{
  display: grid;
  grid-template-columns: minmax(380px,1fr) minmax(0,600px);
  gap: 24px;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--card-border,#CDCDD3);
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .2s ease;
  max-width: 1168px;
  margin-inline: auto;
  min-height: 382px;
  overflow: hidden; /* guards against oversized assets */
}

a.card.get-in-touch:hover{
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
a.card.get-in-touch:focus-visible{
  outline: 2px solid var(--brand-500,#2563eb);
  outline-offset: 3px;
}

/* Image */
.card.get-in-touch .card-figure{
  width: 100%;
  height: auto;
  max-height: 382px;
  object-fit: contain;
  object-position: left center;
  display: block;
  border-radius: 0;
}

/* Content block */
.card.get-in-touch .content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 56px 16px;
  max-width: 600px;
  flex: 1 0 0;
}

/* Title + summary */
.card.get-in-touch .card-title{
  margin: 0;
  align-self: stretch;
  font-family: var(--font-family-heading,"PP Object Sans"), system-ui, sans-serif;
  font-size: 24px; line-height: 32px; font-weight: 800; letter-spacing: .12px;
  color: var(--foreground-granite-off-black, var(--bg-impact,#111116));
}
.card.get-in-touch .card-summary{
  margin: 0;
  font-family: var(--font-family-default,Inter), system-ui, sans-serif;
  font-size: 18px; line-height: 24px; font-weight: 400; letter-spacing: .12px;
  color: var(--foreground-granite-off-black, var(--bg-impact,#111116));
  max-width: 400px;
}

/* CTA button */
.card.get-in-touch .btn{
  display: inline-block;
  margin-top: 8px;
  padding: .75rem 1.5rem;
  border-radius: 8px;
  font-weight: 700; font-size: 16px; line-height: 24px;
  background: var(--text-action-hero-default, #0041D9);
  color: #fff; text-decoration: none; text-align: center;
  transition: background .2s ease;
  width: auto; min-width: 160px;
}
.card.get-in-touch .btn:hover{ background: var(--text-action-hero-hover, #003399); }
.card.get-in-touch .btn:focus-visible{
  outline: 2px solid var(--text-action-hero-default, #0041D9);
  outline-offset: 3px;
}

/* Phones */
@media (max-width: 599px){
  a.card.get-in-touch{
    grid-template-columns: 1fr;
    width: 100%;
    margin: 16px auto;
    padding: 16px;
    min-height: unset;
    box-sizing: border-box;
  }
  .card.get-in-touch .card-figure{
    max-height: none;
    margin: 0 auto;
    object-position: center; /* looks nicer when stacked */
  }
  .card.get-in-touch .content{ padding: 16px; max-width: 100%; }
  .card.get-in-touch .card-summary{ max-width: 100%; }
  .card.get-in-touch .btn{ width: 100%; min-width: 0; }
}

/* Tablets */
@media (min-width: 600px) and (max-width: 1023px){
  a.card.get-in-touch{ margin: 24px auto; padding: 24px; gap: 24px; }
  .card.get-in-touch .content{ padding: 40px 16px; }
}

/* Desktops */
@media (min-width: 1024px){
  a.card.get-in-touch{ width: min(100%,1168px); margin: 40px auto; }
  .card.get-in-touch .content{ padding: 56px 16px; }
}

/* Optional modifier: image on the right on desktop */
@media (min-width: 1024px){
  a.card.get-in-touch.image-right{
    grid-template-columns: minmax(0,600px) minmax(380px,1fr);
  }
  a.card.get-in-touch.image-right .card-figure{ order: 2; object-position: right center; }
  a.card.get-in-touch.image-right .content{ order: 1; }
}

/* ==============================================
   COMPONENT — Featured/Popular Article Cards
   Wrapper: <div class="hc-articles"> … </div>
   Grid:    <div class="hc-articles__grid"> … </div>
   Card:    <a class="article-card" href="…"> … </a>
   Notes:
   - Local brand blue kept (#1e66ff) but scoped to this component only.
   - Avoids collision with the page layout `.article-grid`.
============================================== */

/* Local token override (different blue for just this component) */
.hc-articles { --article-blue: #1e66ff; }

/* ---------- Card ---------- */
.hc-articles a.article-card{
  --brand-500: var(--article-blue);

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  border-radius:12px !important;
  background:#fff !important;
  color:inherit;
  text-decoration:none;
  border:1px solid var(--card-border,#CDCDD3);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  transition:box-shadow .2s ease, transform .2s ease;
  height:100% !important;
  min-height:260px;            /* consistent track fill */
  outline:none;
  overflow:hidden !important;  /* Force clip to border-radius */
}
@media (hover:hover){
  .hc-articles a.article-card:hover{
    box-shadow:0 10px 24px rgba(0,0,0,.12);
    transform:translateY(-1px);
  }
}
.hc-articles a.article-card:focus-visible{
  outline:3px solid var(--brand-500);
  outline-offset:3px;
}

/* ---------- Graphic row (icon + tag) ---------- */
.hc-articles .article-card__graphic:empty{ padding:0; margin:0; display:none; }
.hc-articles .article-card__graphic{
  display:flex; align-items:center; gap:8px;
  padding:16px 16px 8px 16px; width:100%;
  border-radius:12px 12px 0 0;
}
.hc-articles .article-card__icon{
  width:32px; height:32px; flex:0 0 32px;
  display:grid; place-items:center; aspect-ratio:1/1;
  color:var(--brand-500);
}
.hc-articles .article-card__tag{
  display:flex; align-items:center; gap:8px; min-height:24px;
}
.hc-articles .article-card__tag .pill-img{
  display:block; height:24px; width:auto; border-radius:999px;
}

/* ---------- Content ---------- */
.hc-articles .article-card__content{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:16px; width:100%; flex:1 1 auto;
  border-radius:12px; /* Match parent card border-radius */
}
.hc-articles .article-card__title{
  margin:0; color:var(--text-neutral,#111116);
  font-family:var(--font-family-heading);
  font-size:20px; line-height:24px; font-weight:800; letter-spacing:.024px;
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:3;
  line-clamp:3;
  max-height:calc(24px * 3);
  /* Better word wrapping - no awkward hyphenation */
  overflow-wrap:break-word;
  /* Space above title for future category pills/read time */
  padding-top:24px;
  word-break:normal;
  hyphens:manual;
}
.hc-articles .article-card__summary{
  margin:0; color:var(--text-neutral,#111116);
  font-family:var(--font-family-default);
  font-size:16px; line-height:24px; font-weight:400; letter-spacing:.12px; opacity:.95;
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:5;
  line-clamp:5;
  max-height:calc(24px * 5);
  /* Better word wrapping - no awkward hyphenation */
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:manual;
}

/* CTA sticks to bottom */
.hc-articles .article-card__cta{
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  gap:0; align-self:stretch; padding:8px 0 0; margin-top:auto;
  font-family:var(--font-family-default); font-weight:700; color:var(--brand-500);
}
.hc-articles .u-link{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- Grid ---------- */
.hc-articles__grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:24px; 
  align-items:stretch;
}

/* Force grid items AND all children to full height */
.hc-articles__grid > *,
.hc-articles__grid > * > *,
.hc-articles__grid > * > * > * {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Tablet - ensure cards don't get too squeezed */
@media (max-width:1024px) and (min-width:641px){
  .hc-articles__grid{
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:20px;
  }
  .hc-articles a.article-card{
    border-radius:12px !important;
    overflow:hidden !important;
  }
}

/* Small tablet - 2 columns max */
@media (max-width:900px) and (min-width:641px){
  .hc-articles__grid{
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
  }
  .hc-articles a.article-card{
    border-radius:12px !important;
    overflow:hidden !important;
  }
}

/* ---------- Mobile tweaks (horizontal scroll) ---------- */
@media (max-width:640px){
  .hc-articles__grid{
    grid-auto-flow: column;
    grid-auto-columns: minmax(86%, 1fr);
    overflow-x: auto;
    gap: 16px; padding: 4px 8px 4px 16px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    /* Adjusted mask to not interfere with 12px border-radius */
    mask-image: linear-gradient(90deg, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  }
  .hc-articles__grid > *{ scroll-snap-align: start; }
  .hc-articles a.article-card{ border-radius:12px; }
  .hc-articles .article-card__title{ -webkit-line-clamp:2; line-clamp:2; }
  .hc-articles .article-card__summary{ -webkit-line-clamp:3; line-clamp:3; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hc-articles a.article-card{ transition: none; }
}

/* ---------- "Show More" placement/styles (Experience Builder CMS) ---------- */
/* Position Show More button next to Browse all Topics button */
.hc-articles__grid + .forceCommunityCMSLoadMore,
.hc-articles__grid ~ .forceCommunityCMSLoadMore,
.hc-articles__grid + [data-cms-loadmore],
.hc-articles__grid ~ [data-cms-loadmore],
.hc-articles__grid + .comm-cms-load-more,
.hc-articles__grid ~ .comm-cms-load-more{
  position:relative;
  margin:24px auto 0;
  width:auto;
  display:inline-block;
  text-align:center;
}

.forceCommunityCMSLoadMore .slds-button,
[data-cms-loadmore] .slds-button,
.comm-cms-load-more .slds-button{
  border-radius:12px;
  padding:12px 24px;
  background:transparent;
  border:2px solid rgba(255,255,255,.6);
  color:#fff;
  font-weight:600;
  margin:0 8px;
}



/* ================================
   SEARCH RESULTS
   ================================ */

/* Hide filters */
lightning-combobox:has(button[aria-label="Language"]),
lightning-combobox:has(button[aria-label="Publication Status"]),
lightning-combobox:has(button[aria-label="Validation Status"]),
lightning-combobox:has(button[aria-label="Article Record Type: Name"]),
search_filters-filter-input:has(button[aria-label="Language"]),
search_filters-combobox:has(button[aria-label="Language"]),
search_filters-combobox:has(button[aria-label="Publication Status"]),
search_filters-combobox:has(button[aria-label="Validation Status"]),
search_filters-combobox:has(button[aria-label="Article Record Type: Name"]){
  display:none !important;
}

/* Hide "Summary : " label in search results */
dt.text-field-label {
  display: none !important;
}

/* Adjust spacing for the summary value since label is hidden */
dd.text-field-value {
  margin-left: 0 !important;
  margin-top: 0 !important;
}

/* Hide "Knowledge" object type filter in search results left nav */
/* Target the specific navigation section and item */
.object-navigation-container .slds-nav-vertical__section,
.object-navigation-container lightning-vertical-navigation-section,
search_results-objects-navigation,
lightning-vertical-navigation-item:has(a[href*="javascript"]) {
  display: none !important;
}

/* Also hide by aria-label if it exists */
[aria-label="Sub page"],
nav[aria-label="Sub page"] {
  display: none !important;
}

/* Remove outer borders from search containers only (keep article borders) */
.search-results-container,
.search-filters-container,
[class*="search-results-container"],
[class*="scoped-results-container"],
.scoped-results-container,
div.scoped-results-container,
.slds-card__body,
section.slds-card,
div.slds-card:not(article),
[class*="search-results"] > .slds-card,
[class*="lwc-"] > .slds-card:not(article) {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Ensure filters section is scrollable */
.search-filters-container,
section.slds-p-top_medium,
.slds-p-top_medium,
[class*="scoped-results-container"],
[class*="navigation__filters"] {
  max-height: none !important;
  overflow: visible !important;
  overflow-y: auto !important;
}

/* Keep borders on individual article result cards */
article.slds-card {
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  background: white !important;
}

/* Ensure container divs don't duplicate borders */
.result-card-container,
[class*="result-card-container"] {
  border: none !important;
  background: transparent !important;
}

/* Apply 6px border radius to search and filter elements */
/* Search input */
.search-input,
input[type="search"],
.slds-input[type="search"],
[class*="search"] input {
  border-radius: 6px !important;
}

/* Search buttons */
.search-button,
button[type="submit"],
.slds-button,
[class*="search"] button {
  border-radius: 6px !important;
}

/* Dropdown/combobox elements */
.slds-combobox,
.slds-dropdown,
select,
.slds-select {
  border-radius: 6px !important;
}

/* Filter dropdowns */
lightning-combobox,
search_filters-combobox {
  border-radius: 6px !important;
}

/* Remove divider line between search sections */
.search-results hr,
.search-filters hr,
[class*="search"] hr,
.slds-card hr,
article.slds-card hr,
.slds-card__body hr,
[class*="scoped-results"] hr,
.navigation__separator,
div.navigation__separator {
  display: none !important;
}

/* Remove top border from filter section */
.search-filters-section,
[class*="filters-section"],
.slds-card__body {
  border-top: none !important;
}

/* Allow filter labels to wrap instead of truncate */
.search-filters-container .slds-form-element__label,
article.slds-card .slds-form-element__label {
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* Note: Hiding/renaming "Knowledge" tab requires custom LWC - CSS cannot penetrate Shadow DOM */

/* Fix distorted arrow circles in article-list-by-category LWC */
c-article-list-by-category .button-icon,
.article-list-by-category .button-icon,
.view-more-button .button-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
}

/* Keep arrow button layout horizontal */
c-article-list-by-category .view-more-button,
.article-list-by-category .view-more-button,
button.view-more-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

/* Allow title to wrap instead of squishing button */
c-article-list-by-category .article-list-header,
.article-list-by-category .article-list-header,
.article-list-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

c-article-list-by-category .article-list-title,
.article-list-by-category .article-list-title,
h1.article-list-title {
  flex: 1 1 auto !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

/* Ensure button stays on the right and doesn't shrink */
c-article-list-by-category .view-more-button,
.article-list-by-category .view-more-button {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* Fix dark background on mobile for article-list-by-category LWC */
c-article-list-by-category .article-list-container,
.article-list-by-category .article-list-container,
.article-list-container.card,
.article-list-container.card--neutral {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Fix dark background on individual article items */
c-article-list-by-category .article-item,
.article-list-by-category .article-item,
.article-item.card,
.article-item.card--neutral,
.article-item.card--interactive {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Ensure article list items have proper text color (but leave title blue) */
c-article-list-by-category .article-list,
.article-list-by-category .article-list,
.article-list-container .article-list {
  color: #111116 !important;
}

c-article-list-by-category .article-list-item,
.article-list-by-category .article-list-item,
.article-list-container .article-list-item,
.article-list-container .article-list-item a {
  color: #111116 !important;
}

/* Ensure article title text is dark, not white */
c-article-list-by-category .article-title,
.article-list-by-category .article-title,
.article-item .article-title {
  color: #111116 !important;
}

/* Change search page headings to match h3 styling */
/* Target all headings within the search results component */
.ai-search-heading h1,
.ai-search-heading h2,
.ai-search-heading h3,
.ai-search-heading h4 {
  font-family: var(--font-family-heading) !important;
  font-size: var(--h3-size) !important;
  line-height: var(--h3-line) !important;
  font-weight: 800 !important;
  letter-spacing: var(--h3-tracking) !important;
  vertical-align: baseline !important;
  font-variant-position: normal !important;
  font-feature-settings: normal !important;
}

/* Also target by common Salesforce search result classes */
.qna-viewer__header h2,
.qna-viewer__title,
[class*="qna-viewer"] h2,
.slds-card__header h2,
[class*="search"] h1,
[class*="search"] h2,
.slds-page-header__title,
.slds-text-heading_medium,
[class*="filter"] h2,
.search-facets h2 {
  font-family: var(--font-family-heading) !important;
  font-size: var(--h3-size) !important;
  line-height: var(--h3-line) !important;
  font-weight: 800 !important;
  letter-spacing: var(--h3-tracking) !important;
}

/* ================================
   AI SEARCH - NO RESULTS MESSAGE
   ================================ */

/* Hide the default "Rephrase your question and try again" message */
.ai-search-heading p:contains("Rephrase"),
.qna-viewer p:contains("Rephrase"),
[class*="qna"] p:contains("Rephrase") {
  display: none !important;
}

/* Alternative approach: Replace all text in the QNA message area */
.ai-search-heading p,
.qna-viewer__help-message,
[class*="qna-viewer"] p {
  /* Only target paragraphs that contain the default message text */
}

/* Specific override: Add ::before to inject custom text into empty container */
.ai-search-heading:has(p:not(:empty)) p::before,
.qna-viewer__help-message::before {
  content: "" !important;
}

/* Target the specific paragraph with default text and replace it */
.ai-search-heading p {
  color: #111116 !important;
  font-family: var(--font-family-text) !important;
  font-size: 16px !important;
  line-height: 24px !important;
}

/* ================================
   HEADER NAVIGATION MENUS
   Site Links 1 & Site Links 2
   ================================ */

/* Navigation menu containers */
[class*="navigationMenus"],
[class*="nav-menu"],
.navigation-menu,
.site-navigation,
.header-nav {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 0 16px !important;
}

/* Navigation menu list/items wrapper */
[class*="navigationMenus"] ul,
[class*="navigationMenus"] ol,
[class*="nav-menu"] ul,
.navigation-menu ul,
.site-navigation ul,
.header-nav ul {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Navigation menu links */
[class*="navigationMenus"] a,
[class*="nav-menu"] a,
.navigation-menu a,
.site-navigation a,
.header-nav a {
  font-family: 'PP Object Sans', 'Object Sans', 'Inter', system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12px !important;
  color: #111116 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

/* Navigation menu link hover state */
[class*="navigationMenus"] a:hover,
[class*="nav-menu"] a:hover,
.navigation-menu a:hover,
.site-navigation a:hover,
.header-nav a:hover {
  text-decoration: underline !important;
  color: #111116 !important;
}

/* Avatar styling (for right nav) */
[class*="avatar"],
.user-avatar,
.profile-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background-color: #eeeef0 !important;
  border: 1px solid #7e7f8e !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/*
 =====================================================
   Arrow Rings (single source of truth, scoped)
   Applies ONLY to:
     - Persona card arrow: .card.persona .arrow-circle
     - Network category row arrow: .row.article-list .link-title > .icon-ring
   Notes:
     - No global :root overrides
     - No generic a:hover rules
     - Hides any inner <i>, <img>, or <svg> to prevent double arrows
===================================================== */

/* Persona card arrow */
.card.persona .arrow-circle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;                 /* desktop size */
  height:40px;
  border-radius:50%;
  border:2px solid var(--brand-500,#2563eb);
  background:#fff;
  color:var(--brand-500,#2563eb);
  box-sizing:border-box;
  text-decoration:none !important;
  transition:transform .2s ease, border-color .2s ease, color .2s ease;
  position:relative;
}

/* NO underline on ANY state - NUCLEAR OPTION */
.card.persona .arrow-circle,
.card.persona .arrow-circle:link,
.card.persona .arrow-circle:visited,
.card.persona .arrow-circle:hover,
.card.persona .arrow-circle:active,
.card.persona .arrow-circle:focus,
a.card.persona .arrow-circle,
a.card.persona:link .arrow-circle,
a.card.persona:visited .arrow-circle,
a.card.persona:hover .arrow-circle,
a.card.persona:active .arrow-circle,
a.card.persona:focus .arrow-circle {
  text-decoration: none !important;
}

/* Kill any pseudo-element underlines too */
.card.persona .arrow-circle::after,
.card.persona .arrow-circle::before {
  text-decoration: none !important;
}

/* Also kill underline on the parent card link when hovering near arrow */
a.card.persona:has(.arrow-circle) {
  text-decoration: none !important;
}

/* FINAL NUCLEAR OPTION - explicit text-decoration-line */
.card.persona .arrow-circle,
a.card.persona .arrow-circle,
a.card.persona:hover .arrow-circle,
a.card.persona:active .arrow-circle,
a.card.persona:focus .arrow-circle {
  text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
}

/* draw exactly one arrow; hide any embedded glyph */
.card.persona .arrow-circle > .icon,
.card.persona .arrow-circle > img,
.card.persona .arrow-circle > svg{ display:none !important; }

.card.persona .arrow-circle::before{
  content:"\2192"; /* → */
  font:800 18px/1 var(--font-family-heading,"PP Object Sans","Object Sans",system-ui,sans-serif);
  color:currentColor;
  text-decoration:none !important;
}

/* hover focus - MORE NOTICEABLE PULSE */
a.card.persona:hover .arrow-circle{
  border-color:#003bbd;
  color:#003bbd;
  transform:scale(1.15);
}
a.card.persona:active .arrow-circle{
  transform:scale(1.08);
}
a.card.persona:focus-visible .arrow-circle{ outline:2px solid var(--brand-500,#2563eb); outline-offset:2px; }

/* Persona arrow — responsive size */
@media (max-width:1024px){
  .card.persona .arrow-circle{ width:36px; height:36px; }
  .card.persona .arrow-circle::before{ font-size:16px; }
}

/* Network category list row arrow */
.row.article-list .link-title > .icon-ring{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;                 /* spec is smaller in list rows */
  height:32px;
  border-radius:50%;
  border:2px solid var(--brand-500,#2563eb);
  background:#fff;
  color:var(--brand-500,#2563eb);
  box-sizing:border-box;
  flex:0 0 auto;
  margin-right:4px;           /* breathing room so hover scale doesn't clip */
  text-decoration:none !important;
  transition:transform .2s ease, border-color .2s ease, color .2s ease;
  position:relative;
}

/* NO underline on ANY state - NUCLEAR OPTION */
.row.article-list .link-title > .icon-ring,
.row.article-list .link-title > .icon-ring:link,
.row.article-list .link-title > .icon-ring:visited,
.row.article-list .link-title > .icon-ring:hover,
.row.article-list .link-title > .icon-ring:active,
.row.article-list .link-title > .icon-ring:focus,
a.row.article-list .link-title > .icon-ring,
a.row.article-list:link .link-title > .icon-ring,
a.row.article-list:visited .link-title > .icon-ring,
a.row.article-list:hover .link-title > .icon-ring,
a.row.article-list:active .link-title > .icon-ring,
a.row.article-list:focus .link-title > .icon-ring {
  text-decoration: none !important;
}

/* Kill any pseudo-element underlines too */
.row.article-list .link-title > .icon-ring::after,
.row.article-list .link-title > .icon-ring::before {
  text-decoration: none !important;
}

/* Also kill underline on parent row link */
a.row.article-list:has(.icon-ring) {
  text-decoration: none !important;
}

/* FINAL NUCLEAR OPTION - explicit text-decoration-line */
.row.article-list .link-title > .icon-ring,
a.row.article-list .link-title > .icon-ring,
a.row.article-list:hover .link-title > .icon-ring,
a.row.article-list:active .link-title > .icon-ring,
a.row.article-list:focus .link-title > .icon-ring {
  text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
}

/* draw exactly one arrow; hide any embedded glyph */
.row.article-list .link-title > .icon-ring > .icon,
.row.article-list .link-title > .icon-ring > img,
.row.article-list .link-title > .icon-ring > svg{ display:none !important; }

.row.article-list .link-title > .icon-ring::before{
  content:"\2192"; /* → */
  font:800 16px/1 var(--font-family-heading,"PP Object Sans","Object Sans",system-ui,sans-serif);
  color:currentColor;
  text-decoration:none !important;
}

/* hover focus - MORE NOTICEABLE PULSE */
a.row.article-list:hover .link-title > .icon-ring{
  border-color:#003bbd;
  color:#003bbd;
  transform:scale(1.15);
}
a.row.article-list:active .link-title > .icon-ring{
  transform:scale(1.08);
}
a.row.article-list:focus-visible .link-title > .icon-ring{ outline:2px solid var(--brand-500,#2563eb); outline-offset:2px; }


/*
 =====================================================
   Additional Product Support card
===================================================== */

.hc-support-card{
  margin: 0 0 24px 0;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--card-border, #CDCDD3);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(17,17,22,0.04);
}

.hc-support-card .card-title{
  margin: 0 0 8px 0;
  color: var(--text-neutral, #111116);
  font-family: var(--font-family-heading, "PP Object Sans","Object Sans",system-ui,sans-serif);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.75rem;  /* 20/28 */
}

/* List + dividers */
.hc-support-card .support-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.hc-support-card .support-list li{
  border-top: 1px solid var(--zg-border, #e0e3e8);
}
.hc-support-card .support-list li:first-child{
  border-top: 0;
}
.hc-support-card .support-list a{
  display: block;
  padding: 14px 0;
  text-decoration: none;
  color: var(--zg-link, #0b67ff);
  font: 600 1rem/1.5rem var(--font-family-default, Inter, system-ui, sans-serif);
  word-break: break-word; /* long labels won’t overflow */
}
.hc-support-card .support-list a:hover{
  text-decoration: underline;
}

/* If this sits in the rail, keep it tidy */
.article-grid.has-rail .hc-support-card{
  margin: 0; /* rail controls spacing */
}

/* Dark-mode safety if other LWCs toggle it */
:host, .hc-support-card{
  background: var(--card-bg, #fff);
  border-color: var(--card-border, #CDCDD3);
}

/* ============================
   ARTICLE-ONLY POLISH PACK
   (safe to paste at the end)
============================ */

/* 1) Single-column wrapper: consistent gutters on all breakpoints */
.article-grid:not(.has-rail) .article-main {
  padding-inline: 0; /* Remove padding - parent .article-grid already has it */
}

/* 2) Title rhythm + better wrapping on narrow screens */
.article-title {
  overflow-wrap: anywhere;        /* prevent overflow on long words/URLs */
  hyphens: auto;
}

/* 3) Summary legibility (cap width and lighten a touch) 
.article-summary {
  max-width: min(70ch, var(--hero-max));
}*/

/* 4) Body typography rhythm (space above H2/H3/H4 and tighten after) */
.zg-article :is(h2,h3,h4){
  margin-top: 28px;
  margin-bottom: 10px;
}
.zg-article p + :is(h2,h3,h4){ margin-top: 32px; }  /* extra air after a paragraph → heading */

/* 5) Lists: clearer breathing room + larger tap targets */
.zg-article :is(ul,ol){ margin: 0 0 18px 1.1rem; }
.zg-article li{ padding-left: 4px; }
.zg-article li + li{ margin-top: 6px; }

/* 6) Blockquotes: add a clean style (not previously defined) */
.zg-article blockquote{
  margin: 20px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--brand-500, #2563eb);
  background: var(--zg-bg-quote, #f6f7f9);
  color: var(--text-neutral, #111116);
  border-radius: 6px;
}

/* 7) Links in body: subtle hover that respects underline pref */
.zg-article a:hover{
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* 8) Media: nudge spacing so images don’t collide with headings */
.zg-article img{ margin: 18px auto 24px; }
.zg-article figure{ margin: 18px 0 22px; }

/* 9) Tables: softer corners + sticky shadow hint for overflow */
.zg-article table{ border-radius: 8px; }
.zg-article table::after{
  content: "";
  pointer-events: none;
  display: block;
  height: 0;                      /* purely decorative mask */
  box-shadow: inset -20px 0 20px -20px rgba(0,0,0,.08);
}

/* 10) ToC: equal left edge with body and clearer clickable area */
.hc-toc{
  padding-inline: 0;
  margin: 0 0 16px 0;
}
.hc-toc a{
  padding: 4px 0;                 /* bigger tap target without looking button-y */
}

/* 11) Anchor targets: match sticky header height on mobile too */
.zg-article__body :is(h2,h3,h4){
  scroll-margin-top: clamp(72px, 10vw, 96px);
}

/* =====================================================
   ARTICLE WIDTHS — hero vs. body (single-column)
   Keep title/summary wider; body narrower; aligned left
===================================================== */

/* Already defined in earlier :root declaration:
   --hero-max: 686px;  title+summary width
   --body-max: 535px;  reading width */

/* Desktop/tablet: constrain widths but keep shared left edge */
@media (min-width: 768px){
  /* Main wrapper - no max-width constraint since grid handles positioning */
  .article-grid:not(.has-rail) .article-main{
    max-width: none; /* Let grid control the width */
    margin-inline: 0;
    padding-inline: 0; /* Remove padding - parent .article-grid already has it */
  }

  /* Title + summary column (wider) */
  .article-grid:not(.has-rail) .article-hero{
    max-width: var(--hero-max);
    margin-inline: 0;
  }

  /* Body column (narrower) */
  .article-grid:not(.has-rail) .zg-article__body,
  .article-grid:not(.has-rail) .zg-article{
    max-width: var(--body-max);
    margin-inline: 0;
  }

  /* Optional: make the on-page ToC align with the body width too */
  .article-grid:not(.has-rail) .hc-toc{
    max-width: var(--body-max);
    margin-inline: 0;
  }
}

/* Phones: full width with gutters (already handled by .article-grid padding) */
@media (max-width: 767px){
  .article-grid:not(.has-rail) .article-main{ padding-inline: 0; } /* Parent already has padding */
  .article-grid:not(.has-rail) .article-hero,
  .article-grid:not(.has-rail) .article-summary,
  .article-grid:not(.has-rail) .zg-article__body,
  .article-grid:not(.has-rail) .zg-article,
  .article-grid:not(.has-rail) .hc-toc{
    max-width: 100%;
  }
}

/* Put near the end to override earlier vars */
:root{
  /* was 686 / 535 — big delta made the right edge feel jagged */
  --hero-max: 640px;   /* title + summary */
  --body-max: 592px;   /* reading width (only ~48px narrower) */
}

/* ensure ToC matches body width */
.article-grid:not(.has-rail) .hc-toc{
  max-width: var(--body-max);
}
/* =====================================================
   ARTICLE HEADINGS → map to p1 / p1--bold (Inter 18/24)
   Put this at the very end of the file.
===================================================== */

/* Base for all headings in the article body = p1 */
.zg-article :is(h1,h2,h3,h4,h5,h6){
  font-family: var(--font-family-default) !important;          /* Inter */
  font-size: var(--font-size-body-lg) !important;              /* 18px */
  line-height: var(--line-height-body-lg) !important;          /* 24px */
  letter-spacing: var(--letter-spacing-body-lg) !important;
  font-weight: 400 !important;                                  /* p1 */
  color: var(--gray-950-text, #111116);
  margin-top: 28px;
  margin-bottom: 10px;
}

/* Top-level headers = p1--bold */
.zg-article :is(h1, h2){
  font-weight: 700 !important;                                  /* p1--bold */
}

/* Prevent nested <strong> from re-bumping weight/size */
.zg-article :is(h1,h2,h3,h4,h5,h6) strong{
  font: inherit !important;
}

/* =====================================================
   ARTICLE LISTS — bullets, numbers, nesting, spacing
   Scope: .zg-article only
===================================================== */

/* Base spacing + hanging indent */
.zg-article :is(ul,ol){
  margin: 0 0 18px;                 /* space under list */
  padding-left: 1.25rem;            /* indent for marker */
  list-style-position: outside;     /* keep a clean rag */
}

/* Item spacing */
.zg-article li{
  margin: 0;
  padding-left: .25rem;             /* tiny text offset from marker */
}
.zg-article li + li{ margin-top: 6px; }  /* comfy vertical rhythm */

/* Typography for list text (matches p1) */
.zg-article :is(ul,ol) li{
  font-family: var(--font-family-default);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--gray600,#535364);
}

/* Marker styling */
.zg-article :is(ul,ol) li::marker{
  color: var(--gray700, #393945);
  font-size: .95em;
  font-weight: 600;                  /* slightly stronger bullets/numbers */
  font-variant-numeric: tabular-nums;/* align 1–10+ nicely in OL */
}

/* Nesting styles */
.zg-article ul ul{ list-style-type: circle; }
.zg-article ul ul ul{ list-style-type: square; }
.zg-article ol ol{ list-style-type: lower-alpha; }
.zg-article ol ol ol{ list-style-type: lower-roman; }

/* Lists that the CMS wraps with <p> inside <li> */
.zg-article li > p{ margin: 0; }
.zg-article li > p + p{ margin-top: 8px; }       /* multi-paragraph list items */

/* Links inside lists (keep size + underline) */
.zg-article :is(ul,ol) a{
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Extra air before a heading that follows a list */
.zg-article :is(ul,ol) + :is(h2,h3,h4){ margin-top: 24px; }

/* Ordered lists with very long numbers (rare, but safe) */
.zg-article ol{ counter-reset: item; }

/* ARTICLE LIST MARKERS — force back on inside .zg-article */
.zg-article ul{
  list-style-type: disc !important;
  list-style-position: outside;
  padding-left: 1.25rem;   /* indent for marker */
  margin: 0 0 18px;
}
.zg-article ol{
  list-style-type: decimal !important;
  list-style-position: outside;
  padding-left: 1.25rem;
  margin: 0 0 18px;
}
/* belt & suspenders in case SLDS changed display */
.zg-article li{ display: list-item !important; }

/* common SLDS list utilities override bullets — neutralize them here */
.zg-article :is(ul,ol).slds-list_dotted,
.zg-article :is(ul,ol).slds-list_ordered,
.zg-article :is(ul,ol).slds-list_horizontal,
.zg-article :is(ul,ol)[class*="slds-list_"]{
  list-style: revert !important;           /* bring markers back */
  padding-left: 1.25rem !important;
}

/* optional: nicer marker look + nested styles */
.zg-article :is(ul,ol) li::marker{
  color: var(--gray700,#393945);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.zg-article ul ul{ list-style-type: circle !important; }
.zg-article ul ul ul{ list-style-type: square !important; }
.zg-article ol ol{ list-style-type: lower-alpha !important; }
.zg-article ol ol ol{ list-style-type: lower-roman !important; }


/* ================================
   DATA CATEGORY PATH / BREADCRUMB
   (Figma Design: node-id=236:33852)
   ================================ */

/* Container */
.dataCategoryPath,
.slds-breadcrumb,
c-category-breadcrumb,
[data-category-breadcrumb],
lightning-breadcrumbs,
dxp_service-network-data-category-breadcrumb {
  display: flex !important;
  align-items: center;
  gap: 4px;
  padding: 24px 64px;
  background: #ffffff;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 16px !important;
  letter-spacing: 0.12px;
}

/* Target the inner slot/div container */
lightning-breadcrumbs > slot,
lightning-breadcrumbs .slds-breadcrumb,
lightning-breadcrumbs .slds-list_horizontal {
  gap: 4px !important;
}

/* All links and text items */
.dataCategoryPath a,
.dataCategoryPath span,
.slds-breadcrumb a,
.slds-breadcrumb span,
c-category-breadcrumb a,
c-category-breadcrumb span,
[data-category-breadcrumb] a,
[data-category-breadcrumb] span,
lightning-breadcrumb a,
lightning-breadcrumb span {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 16px !important;
  letter-spacing: 0.12px;
  font-weight: 400;
  white-space: nowrap;
}

/* Links (not current page) */
.dataCategoryPath a,
.slds-breadcrumb a,
c-category-breadcrumb a,
[data-category-breadcrumb] a,
lightning-breadcrumb a {
  color: #0041d9 !important;
  text-decoration: none !important;
  cursor: pointer;
}

.dataCategoryPath a:hover,
.slds-breadcrumb a:hover,
c-category-breadcrumb a:hover,
[data-category-breadcrumb] a:hover,
lightning-breadcrumb a:hover {
  text-decoration: underline !important;
}

/* Separators (/) */
.dataCategoryPath .separator,
.dataCategoryPath span[aria-hidden="true"],
c-category-breadcrumb .separator,
[data-category-breadcrumb] .separator {
  color: #adadb6 !important;
  font-weight: 400;
}

/* HIDE original Salesforce > separator - IT'S IN ::before PSEUDO-ELEMENT! */
lightning-breadcrumb::before,
.slds-breadcrumb__item::before {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Also hide span separators just in case */
.slds-breadcrumb__item > span[aria-hidden="true"],
.slds-breadcrumb__item-separator,
.slds-breadcrumb__item > .slds-assistive-text + *,
.slds-breadcrumb span:not([class]),
.slds-breadcrumb__list > li > span:not(:first-child):not(:last-child),
.slds-breadcrumb__item span:empty,
.slds-breadcrumb__item > span:only-child:not(a):not(.current),
lightning-breadcrumb > span[aria-hidden="true"],
lightning-breadcrumb::part(separator),
lightning-breadcrumb .slds-breadcrumb__item > span {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Also hide any text node that's just ">" */
.slds-breadcrumb__item > *:not(a):not(:last-child):not(:first-child),
lightning-breadcrumb > *:not(a):not(:last-child):not(:first-child) {
  font-size: 0 !important;
  color: transparent !important;
}

/* Add / separator ONLY between items (not after last) */
.slds-breadcrumb__item:not(:last-child)::after,
lightning-breadcrumb:not(:last-child)::after,
lightning-breadcrumb:not(:last-of-type)::after {
  content: "/" !important;
  color: #adadb6 !important;
  padding: 0 2px !important;
  margin: 0 !important;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}

/* Make absolutely sure last item has NO separator */
.slds-breadcrumb__item:last-child::after,
.slds-breadcrumb__item:last-of-type::after,
lightning-breadcrumb:last-child::after,
lightning-breadcrumb:last-of-type::after {
  content: none !important;
  display: none !important;
}

/* Current page (last item, bold) */
.dataCategoryPath .current,
.dataCategoryPath span:last-child:not([aria-hidden="true"]),
.slds-breadcrumb__item:last-child span,
c-category-breadcrumb .current,
[data-category-breadcrumb] .current,
lightning-breadcrumb:last-child span,
lightning-breadcrumb:last-of-type span {
  color: #111116 !important;
  font-weight: 700 !important;
}

/* ================================
   HIDE "All" AND "Help" FROM BREADCRUMB
   ================================ */

/* Hide the "Help" breadcrumb by href pattern */
lightning-breadcrumb:has(a[href="/categories/="]),
lightning-breadcrumb:has(a[href*="/categories/="]),
.slds-breadcrumb__item:has(a[href="/categories/="]),
.slds-breadcrumb__item:has(a[href*="/categories/="]) {
  display: none !important;
}

/* Hide "Help" link directly */
lightning-breadcrumb a[href="/categories/="],
lightning-breadcrumb a[href*="/categories/="],
.slds-breadcrumb__item a[href="/categories/="],
.slds-breadcrumb__item a[href*="/categories/="] {
  display: none !important;
}

/* Hide parent lightning-breadcrumb if it contains Help link */
lightning-breadcrumb:has(a[part="breadcrumb"][href*="/categories/="]) {
  display: none !important;
}

/* Hide "All" breadcrumb items */
lightning-breadcrumb:has(a[href*="/All"]),
.slds-breadcrumb__item:has(a[href*="/All"]) {
  display: none !important;
}

/* Also hide by checking text content with attribute selectors */
lightning-breadcrumb a[href$="/Help"],
lightning-breadcrumb a[href$="/All"],
.slds-breadcrumb__item a[href$="/Help"],
.slds-breadcrumb__item a[href$="/All"] {
  display: none !important;
}

/* Custom breadcrumbs using customBreadcrumbs LWC component */
/* No need to hide native breadcrumbs - just don't add them to the page */

/* ================================
   HIDE "All" AND "Help" FROM SEARCH FILTER DROPDOWNS
   ================================ */
/* ENTIRE SECTION COMMENTED OUT - Not worth the effort, causing issues with forms */
/* Original intent: Hide "All" option from search filter dropdowns */
/*
lightning-base-combobox-item[data-value="All"],
lightning-base-combobox-item[data-value*="All"],
lightning-combobox lightning-base-combobox-item[data-value="All"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

.slds-listbox__option[data-value="All"],
.slds-listbox__option[data-value*="All"],
.slds-listbox__option[title="All"] {
  display: none !important;
  visibility: hidden !important;
}

search_filters-combobox lightning-base-combobox-item[data-value="All"],
search_filters-combobox .slds-listbox__option[data-value="All"],
search_filters-filter-input lightning-base-combobox-item[data-value="All"],
search_filters-filter-input .slds-listbox__option[data-value="All"] {
  display: none !important;
}

[role="option"][data-value="All"],
[role="option"][data-value*="All"],
lightning-base-combobox-item[role="option"][data-value="All"] {
  display: none !important;
}

.slds-listbox__item:has([data-value="All"]),
.slds-dropdown__item:has([data-value="All"]) {
  display: none !important;
}

[role="option"][aria-label="All"],
lightning-base-combobox-item[aria-label="All"] {
  display: none !important;
}

lightning-combobox .slds-listbox__option:first-child[data-value="All"],
.slds-combobox .slds-listbox__option:first-child[data-value="All"] {
  display: none !important;
}

lightning-base-combobox-item[data-value="All"]:not([data-value="All-"]) {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
}

body > .slds-dropdown .slds-listbox__option[data-value="All"],
body > .slds-listbox .slds-listbox__option[data-value="All"],
.slds-dropdown_fluid .slds-listbox__option[data-value="All"] {
  display: none !important;
}

.slds-dropdown[role="listbox"] .slds-listbox__option:first-child,
[role="listbox"] .slds-listbox__option:first-child[data-value="All"] {
  display: none !important;
}

search_filters-combobox + .slds-dropdown .slds-listbox__option:first-child,
.slds-combobox_container .slds-dropdown .slds-listbox__option:first-child {
  display: none !important;
}

.slds-dropdown--bottom .slds-listbox__option[data-value="All"],
.slds-dropdown--top .slds-listbox__option[data-value="All"] {
  display: none !important;
}
*/

/* Remove default SLDS list styling */
.slds-breadcrumb,
.slds-breadcrumb__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.slds-breadcrumb__item {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}

/* Tablet and mobile responsive */
@media (max-width: 768px) {
  .dataCategoryPath,
  .slds-breadcrumb,
  c-category-breadcrumb,
  [data-category-breadcrumb],
  lightning-breadcrumbs,
  dxp_service-network-data-category-breadcrumb {
    padding: 16px !important;
    padding-top: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 16px !important;
    flex-wrap: wrap;
  }
  
  /* Aggressively remove all padding/margin from breadcrumb wrapper containers */
  community_layout-section[data-component-id*="section-4623"],
  community_layout-section .comm-section-container {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  community_layout-column.col-size_12-of-12,
  .col-size_12-of-12.col-large_size_12-of-12 {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  [class*="column-content"] {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  community_builder-customizable-header,
  .community_builder-customizable-header,
  .component-wrapper-spacer {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  dxp_service-network-data-category-breadcrumb,
  [data-component-id*="networkDataCategoryBreadcrumb"] {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: auto !important;
  }
  
  /* Remove fixed heights from breadcrumb component */
  dxp_service-network-data-category-breadcrumb[style],
  community_builder-customizable-header[style] {
    height: auto !important;
    min-height: 0 !important;
  }
  
  /* Ensure breadcrumb links can wrap naturally */
  .slds-breadcrumb__item,
  lightning-breadcrumb {
    max-width: 100%;
  }
  
  /* Increase logo size on mobile to match Figma specs */
  .site-logo,
  .branding-logo,
  [class*="branding"] img,
  [class*="logo"] img,
  header img[src*="logo"],
  a[href="/"] img,
  .siteHeader img,
  [class*="header"] [class*="logo"] img {
    width: 113px !important;
    height: 20px !important;
    min-width: 113px !important;
    max-width: 113px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }
  
  /* Center logo link */
  .site-logo-link,
  .branding-logo-link,
  [class*="branding"] a,
  [class*="logo"] a,
  header a[href="/"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    width: auto !important;
  }
  
  /* Add padding to search results list on mobile */
  lst-template-list,
  .lst-template-list,
  [class*="template-list"] {
    padding: 0 16px !important;
  }
  
  /* Ensure individual cards don't add extra margin */
  lst-primary-display-card,
  .lst-primary-display-card {
    margin: 0 !important;
  }
}

/* ================================
   EXTERNAL SUPPORT NAVIGATION (Above Footer)
   Style the External_Support_All navigation menu
   Light background, multi-row layout
   ================================ */

/* Target the External Support navigation menu container */
.external-support-nav,
[data-menu-name="External_Support_All"],
nav[aria-label*="External Support"] {
  background-color: #ffffff !important;
  background: #ffffff !important;
  padding: 24px 32px !important;
  margin: 0 !important;
  border: none !important;
  border-top: 1px solid #e5e5e5 !important;
  box-shadow: none !important;
}

/* Navigation list container - multi-row centered layout */
.external-support-nav ul,
.external-support-nav .comm-navigation__list,
[data-menu-name="External_Support_All"] ul,
nav[aria-label*="External Support"] ul,
[data-menu-name="External_Support_All"] .comm-navigation__list,
nav[aria-label*="External Support"] .comm-navigation__list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px 24px !important; /* 12px vertical, 24px horizontal */
  list-style: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 1200px !important;
}

/* Individual navigation items */
.external-support-nav li,
[data-menu-name="External_Support_All"] li,
nav[aria-label*="External Support"] li {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
}

/* Navigation links */
.external-support-nav a,
[data-menu-name="External_Support_All"] a,
nav[aria-label*="External Support"] a {
  color: #333333 !important;
  font-family: var(--font-family-default, Inter, system-ui, sans-serif) !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
  padding: 4px 8px !important;
  transition: color 0.2s ease !important;
}

/* Link hover state */
.external-support-nav a:hover,
[data-menu-name="External_Support_All"] a:hover,
nav[aria-label*="External Support"] a:hover {
  color: #0041d9 !important;
  text-decoration: underline !important;
}

/* "More" overflow menu button/text */
.external-support-nav button,
.external-support-nav .slds-dropdown-trigger,
[data-menu-name="External_Support_All"] button,
[data-menu-name="External_Support_All"] .slds-dropdown-trigger,
nav[aria-label*="External Support"] button,
nav[aria-label*="External Support"] .slds-dropdown-trigger {
  color: #333333 !important;
  font-family: var(--font-family-default, Inter, system-ui, sans-serif) !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 400 !important;
  background: transparent !important;
  border: none !important;
  padding: 4px 8px !important;
  text-decoration: none !important;
}

.external-support-nav button:hover,
[data-menu-name="External_Support_All"] button:hover,
nav[aria-label*="External Support"] button:hover {
  color: #0041d9 !important;
  text-decoration: underline !important;
  background: transparent !important;
}

/* Link focus state */
.external-support-nav a:focus-visible,
[data-menu-name="External_Support_All"] a:focus-visible,
nav[aria-label*="External Support"] a:focus-visible {
  outline: 2px solid #0041d9 !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* Remove any default styling from community navigation components */
.external-support-nav .comm-navigation__item,
[data-menu-name="External_Support_All"] .comm-navigation__item,
nav[aria-label*="External Support"] .comm-navigation__item {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .external-support-nav,
  [data-menu-name="External_Support_All"],
  nav[aria-label*="External Support"] {
    padding: 20px 16px !important;
  }
  
  .external-support-nav ul,
  [data-menu-name="External_Support_All"] ul,
  nav[aria-label*="External Support"] ul {
    gap: 10px 16px !important;
    justify-content: center !important;
  }
  
  .external-support-nav a,
  [data-menu-name="External_Support_All"] a,
  nav[aria-label*="External Support"] a {
    font-size: 12px !important;
    padding: 4px 6px !important;
  }
}

/* ================================
   FORCE LIGHT MODE ON LWC
   Override dark mode rendering in articleListByCategory LWC
   ================================ */

@media (prefers-color-scheme: dark) {
  /* Force light mode backgrounds */
  c-article-list-by-category .article-list-container,
  .article-list-by-category .article-list-container {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
  
  c-article-list-by-category .article-item,
  .article-list-by-category .article-item,
  .article-item.card,
  .article-item.card--neutral,
  .article-item.card--interactive {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
  
  /* Force light mode borders */
  c-article-list-by-category .article-list-container,
  .article-list-by-category .article-list-container {
    border-color: #e5e7eb !important;
  }
  
  c-article-list-by-category .article-list-divider,
  .article-list-by-category .article-list-divider {
    background-color: #e5e7eb !important;
  }
  
  c-article-list-by-category .article-list-item,
  .article-list-by-category .article-list-item {
    border-bottom-color: #e5e7eb !important;
  }
  
  /* Force light mode text colors */
  c-article-list-by-category .article-list,
  .article-list-by-category .article-list,
  .article-list-container .article-list {
    color: #111116 !important;
  }
  
  c-article-list-by-category .article-list-item,
  .article-list-by-category .article-list-item,
  .article-list-container .article-list-item,
  .article-list-container .article-list-item a {
    color: #111116 !important;
  }
  
  c-article-list-by-category .article-title,
  .article-list-by-category .article-title,
  .article-item .article-title {
    color: #111116 !important;
  }
  
  /* Force light mode button styles */
  c-article-list-by-category .view-more-button,
  .article-list-by-category .view-more-button {
    background-color: #ffffff !important;
    border-color: #0041D9 !important;
    color: #0041D9 !important;
  }
}

/* =====================================================
   SUBCATEGORIES LIST SPACING & CLICKABLE ARROWS
   Network Data Category Detail Page
===================================================== */

/* Hide "Subcategories" heading when list is empty - handled by JavaScript in helpcenterCssLoader.js */
/* CSS cannot penetrate Shadow DOM boundaries, so JavaScript solution is used instead */

/* Remove padding from Banner component that wraps subcategories HTML editor */
dxp_content_layout-banner:has(+ dxp_service-subcategoriesList),
dxp_content_layout-banner:has([data-component-id*="subcategoriesList"]),
.network_data_category_detail dxp_content_layout-banner {
  padding: 0 !important;
  margin: 0 !important;
}

/* Target the banner's content region specifically */
dxp_content_layout-banner [slot="contentRegion"],
dxp_content_layout-banner [slot="content"] {
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove spacing from any wrapper divs in the banner */
dxp_content_layout-banner > div,
dxp_content_layout-banner .slds-banner__content {
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove padding from HTML Editor component */
community_builder-htmlEditor,
[data-component-id*="htmlEditor"] {
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* Remove padding from the HTML editor's content wrapper */
community_builder-htmlEditor > div,
community_builder-htmlEditor > *,
community_builder-htmlEditor [data-html-content],
community_builder-htmlEditor div {
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove padding from any divs inside the HTML editor */
.network_data_category_detail community_builder-htmlEditor * {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Reduce spacing between subcategory items */
dxp_service-subcategoriesList .slds-list__item,
dxp_service-subcategoriesList li,
[data-component-id*="subcategoriesList"] .slds-list__item,
[data-component-id*="subcategoriesList"] li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove all padding from subcategories list container */
dxp_service-subcategoriesList,
[data-component-id*="subcategoriesList"] {
  padding: 0 !important;
  margin: 0 !important;
}

/* Target the list container itself */
dxp_service-subcategoriesList dxp_content_layout-list,
[data-component-id*="subcategoriesList"] dxp_content_layout-list {
  gap: 0 !important;
}

/* Reduce margin on banner components within subcategories */
dxp_service-subcategoriesList dxp_content_layout-banner,
[data-component-id*="subcategoriesList"] dxp_content_layout-banner {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

/* Let subcategories use the same styling as article lists */
dxp_service-subcategoriesList .row.article-list,
[data-component-id*="subcategoriesList"] .row.article-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 16px 0 !important; /* Remove right padding */
  margin: 0 !important;
}

/* Ensure dividers are visible and styled consistently */
dxp_service-subcategoriesList .row.article-list .divider,
[data-component-id*="subcategoriesList"] .row.article-list .divider {
  height: 0.0625rem !important; /* 1px */
  align-self: stretch !important;
  background: var(--T3-Divider-muted-bg, #CDCDD3) !important;
  margin: 0 !important;
  display: block !important;
}

/* Ensure title styling matches article list */
dxp_service-subcategoriesList .row.article-list .title,
[data-component-id*="subcategoriesList"] .row.article-list .title {
  margin: 0 !important;
  font-family: var(--font-family-heading, "PP Object Sans", "Object Sans", system-ui, sans-serif) !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  line-height: 32px !important;
  letter-spacing: 0.12px !important;
  color: var(--text-neutral, #111116) !important;
}

/* Ensure summary styling matches article list */
dxp_service-subcategoriesList .row.article-list .summary,
[data-component-id*="subcategoriesList"] .row.article-list .summary {
  margin: 0 !important;
  width: 30rem !important;
  max-width: 100% !important;
  font: 400 1rem/1.5rem var(--font-family-default, Inter, system-ui, sans-serif) !important;
  letter-spacing: 0.0075rem !important;
  color: var(--gray700, #393945) !important;
}

/* Ensure link-title row matches article list */
dxp_service-subcategoriesList .row.article-list .link-title,
[data-component-id*="subcategoriesList"] .row.article-list .link-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.625rem !important;
  align-self: stretch !important;
}

/* Target any wrapper divs that might add spacing */
dxp_service-subcategoriesList .slds-list > *,
[data-component-id*="subcategoriesList"] .slds-list > * {
  margin-block: 0 !important;
}

/* Reduce spacing in the content region of banners */
dxp_service-subcategoriesList dxp_content_layout-banner [slot="contentRegion"],
[data-component-id*="subcategoriesList"] dxp_content_layout-banner [slot="contentRegion"] {
  padding: 0 !important;
  margin: 0 !important;
}

/* Make the entire banner area clickable and ensure pointer events work */
dxp_service-subcategoriesList dxp_content_layout-banner a,
[data-component-id*="subcategoriesList"] dxp_content_layout-banner a {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Ensure the arrow icon-ring inherits clickability from parent banner link */
dxp_service-subcategoriesList .icon-ring,
[data-component-id*="subcategoriesList"] .icon-ring,
dxp_service-subcategoriesList .arrow-circle,
[data-component-id*="subcategoriesList"] .arrow-circle {
  pointer-events: none !important; /* Let clicks pass through to parent link */
  cursor: pointer !important;
}

/* Make sure the row.article-list within banner doesn't interfere with clicks */
dxp_service-subcategoriesList a.row.article-list,
[data-component-id*="subcategoriesList"] a.row.article-list {
  pointer-events: none !important; /* This anchor has no href, let banner handle it */
}

/* But allow the banner's clickable overlay to work */
dxp_service-subcategoriesList dxp_content_layout-banner[is-banner-link] a[data-banner-link],
dxp_service-subcategoriesList dxp_content_layout-banner a[href],
[data-component-id*="subcategoriesList"] dxp_content_layout-banner[is-banner-link] a[data-banner-link],
[data-component-id*="subcategoriesList"] dxp_content_layout-banner a[href] {
  pointer-events: auto !important;
}