/* ================================================================
   SEO category page — TOC sidebar + Compare Quotes widget + layout
   Loaded only when Model.CurrentCategory.NewSEOVersion == true.

   Body content (sections, prose, tables, callouts, etc.) is styled
   entirely by marketing's pasted <style> block, which is auto-wrapped
   in @scope (.seo-html-container) at render time. This file
   deliberately does NOT style body content so marketing can iterate
   on shades/colours per template without us competing for cascade.

   Platform colours (--bgcolor-theme, --textcolorcontrast-theme) are
   defined globally in Site.css per portal (IS/MS/HH).
   ================================================================ */

/* ================================================================
   LAYOUT — two-column with sticky TOC sidebar
   ================================================================ */
.seo-guide__layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  /* Matches article's editorial layout width so the TOC sidebar
     aligns with the navbar logo on wide screens. */
  max-width: 1250px;
  margin: 0 auto;
}
.seo-guide__content {
  flex: 1;
  min-width: 0; /* allow wide content (e.g. tables) to shrink the column */
  padding-right: 24px; /* consistent right gutter at all viewport widths */
}

/* ================================================================
   TOC COLUMN — sticky sidebar, hidden below 820px
   ================================================================ */
.seo-guide .seo-toc-col {
  width: 280px;
  min-width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 15px;
  align-self: flex-start;
  /* Symmetric padding matches article's .article-toc-column */
  padding: 44px 16px 80px 16px;
}

/* TOC card — borderless to match .article-toc */
.seo-guide .seo-toc {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 20px;
}

.seo-guide .seo-toc__title {
  font-weight: bold;
  font-size: 16px;
  color: #434343;
  padding: 12px 14px 10px;
  line-height: 1.35em;
  text-align: left;
}

.seo-guide .seo-toc__scroll {
  max-height: 340px;
  overflow-y: auto;
  padding: 10px 14px 10px 0;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}
.seo-guide .seo-toc__scroll::-webkit-scrollbar { width: 4px; }
.seo-guide .seo-toc__scroll::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 2px;
}

/* Vertical rule list
   list-style: none !important beats global rules that re-enable
   ::marker bullets inside .description__content */
.seo-guide .seo-toc__list {
  list-style: none !important;
  margin: 0 0 0 14px !important;
  padding: 0 0 0 26px !important;
  border-left: 2px solid #e0e0e0;
}
.seo-guide .seo-toc__item {
  margin-bottom: 12px;
  position: relative;
}
.seo-guide .seo-toc__item:last-child { margin-bottom: 0; }

/* TOC link — flex so bullet + text align correctly */
.seo-guide .seo-toc__link {
  color: #555 !important;
  font-size: 14px;
  line-height: 1.35em;
  text-decoration: none !important;
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  transition: color 0.2s;
}
.seo-guide .seo-toc__link:hover,
.seo-guide .seo-toc__link.active {
  color: var(--bgcolor-theme) !important;
}

/* Bullet dot — sits on the border-left line */
.seo-guide .seo-toc__bullet {
  width: 7px;
  height: 7px;
  min-width: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #ccc;
  margin-top: 4px;
  margin-left: -30px;
  transition: background-color 0.2s;
}
.seo-guide .seo-toc__link:hover .seo-toc__bullet,
.seo-guide .seo-toc__link.active .seo-toc__bullet {
  background-color: var(--bgcolor-theme);
}

/* ================================================================
   COMPARE QUOTES WIDGET — under the TOC, in the same sticky column
   ================================================================ */
.seo-guide .seo-toc-gq {
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  padding: 16px 14px;
  margin-top: 13px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  height: auto;
}
.seo-guide .seo-toc-gq > * { margin: 0 !important; }

.seo-guide .seo-toc-gq__title {
  font-weight: bold;
  font-size: 14px;
  line-height: 1.35em;
  color: #434343;
  text-align: center;
}

/* Delivery location dropdown — matches article's .toc-delivery-btn:
   centered text, bold 14px, padding 11px 16px (variable height). */
.seo-guide .seo-toc-dd { position: relative; width: 100%; }
.seo-guide .seo-toc-dd__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 16px;
  border: 1px solid #ccc;
  border-radius: 20px;
  background-color: #fff;
  font-size: 14px;
  font-weight: bold;
  color: #434343;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  white-space: nowrap;
}
.seo-guide .seo-toc-dd__btn:hover { background-color: #f9f9f9; }
.seo-guide .seo-toc-dd__icon { flex-shrink: 0; display: block; height: 16px; width: auto; vertical-align: middle; }
.seo-guide .seo-toc-dd__label {
  color: #434343;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Caret sits in the flex flow next to the label so centering looks
   symmetrical, matching article's .toc-delivery-caret. */
.seo-guide .seo-toc-dd__caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid #434343;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  flex-shrink: 0;
  pointer-events: none;
}

/* !important ensures global .description__content ul rules
   cannot override display:none on the dropdown list */
.seo-guide .seo-toc-dd__list {
  display: none !important;
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  list-style: none !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1050;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.seo-guide .seo-toc-dd--open .seo-toc-dd__list { display: block !important; }
.seo-guide .seo-toc-dd__item { padding: 8px 14px; font-size: 13px; color: #444; cursor: pointer; list-style: none !important; }
.seo-guide .seo-toc-dd__item:hover { background-color: #f5f5f5; color: var(--bgcolor-theme); }

/* Get Quotes button — uses platform colour */
.seo-guide .seo-toc-gq__btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background-color: var(--bgcolor-theme);
  color: var(--textcolorcontrast-theme);
  border-radius: 20px;
  padding: 11px 0;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
.seo-guide .seo-toc-gq__btn:hover { opacity: 0.88; color: var(--textcolorcontrast-theme); text-decoration: none; }

/* Buyers row */
.seo-guide .seo-toc-gq__buyers { display: flex; align-items: center; gap: 10px; }
.seo-guide .seo-toc-gq__avatars { display: flex; flex-shrink: 0; }
.seo-guide .seo-toc-gq__avatars img { height: 32px; width: auto; display: block; }
.seo-guide .seo-toc-gq__buyers-text { font-style: italic; font-size: 12px; color: #666; line-height: 1.3em; }

/* ================================================================
   FINDER BANNER — sticky bottom Get-Quotes prompt
   Mirrors article-page #finder-banner. Slides up after 600px scroll,
   closeable; Get Quotes triggers the same .rfq-box__getquote flow as
   the sidebar widget. Uses platform colour via --bgcolor-theme.
   ================================================================ */
body.use-finder-banner .floating-bottom { display: none !important; }

#finder-banner {
  background-color: var(--bgcolor-theme);
  border: 2px solid #434343;
  border-radius: 1rem;
  bottom: 8px;
  box-sizing: border-box;
  left: 50%;
  max-width: 600px;
  width: calc(100vw - 32px);
  opacity: 0;
  padding: 4px 10px 4px 24px;
  font-size: 13px;
  position: fixed;
  transform: translateX(-50%) translateY(calc(100% + 2rem));
  transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
  visibility: hidden;
  z-index: 1005;
}
#finder-banner.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
  height: 66.2px;
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}
@media (min-width: 601px) {
  /* Enlarge the whole CTA popup ~15% on desktop — it reads too small on
     larger screens. Below 601px the banner keeps its original size. */
  #finder-banner {
    bottom: 16px;
    min-width: 518px;
    width: auto;
    padding: 5px 12px 5px 28px;
    font-size: 15px;
  }
  #finder-banner.is-visible {
    height: 76px;
  }
  .finder-banner__inner { gap: 5px; }
  .finder-banner__text { font-size: 16px; }
  .finder-banner__btn {
    font-size: 14px;
    padding: 9px 14px;
    margin-left: 12px;
  }
  .finder-banner__close {
    font-size: 29px;
    padding: 6px 12px;
    line-height: 29px;
  }
}

.finder-banner__inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  width: 100%;
  height: 100%;
}
.finder-banner__text {
  flex: 1;
  font-size: 16px;
  font-weight: bold;
  color: #434343;
  line-height: 1.3;
  min-width: 0;
}
/* MS portal — white text reads better on its teal banner background.
   IS (yellow) and HH (red) keep the dark #434343. */
.body-ms .finder-banner__text { color: #fff; }
.finder-banner__btn {
  display: inline-block;
  background-color: #434343;
  color: #fff;
  border-radius: 20px;
  font-weight: bold;
  font-size: 14px;
  padding: 8px 12px;
  margin-left: 10px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  flex-shrink: 0;
}
.finder-banner__btn:hover,
.finder-banner__btn:focus {
  text-decoration: none;
  color: #fff;
  background-color: #5a5a5a;
}
.finder-banner__close {
  background: none;
  border: none;
  font-size: 25.4px;
  cursor: pointer;
  color: #434343;
  padding: 5.2px 10.4px;
  line-height: 25.4px;
  flex-shrink: 0;
}

@media screen and (max-width: 419px) {
  .finder-banner__text { font-size: 16px; }
  .finder-banner__btn { font-size: 14px; padding: 6px 12px; }
  .finder-banner__close { font-size: 14px; padding: 2px 6px; }
}

/* ================================================================
   MARKETING CONTENT OVERRIDES
   Narrow overrides that neutralise external CSS interfering with
   marketing's pasted body styling. We don't add new body styling
   here — only suppress unwanted bleed-in from global stylesheets
   and from marketing's own defaults that the content team has
   asked us to strip.
   ================================================================ */

/* Marketing .page-wrap wrapper — strip horizontal padding so the content
   column aligns with the hero section at all viewport widths. Standalone
   templates add 20px side padding which makes the right edge stop short
   on desktop and misaligns with the intro text on mobile.
   max-width: none prevents a nested max-width from re-centring the column
   inside the already-constrained seo-guide__content flex child. */
.seo-html-container .page-wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

/* Remove all max-width caps from marketing content so every element fills
   the full seo-guide__content column. Standalone templates set 820px on
   many individual elements; this single rule covers all of them without
   needing to enumerate class names. */
.seo-html-container * {
  max-width: none !important;
}

/* List markers — global .description__content rules (articles3.css /
   category-rfq-cro.min.css) re-enable disc/circle markers, which
   show alongside marketing's custom :before bullet, producing two
   markers per item. Suppress the default marker; marketing's
   :before is the only marker rendered. */
.seo-html-container ul,
.seo-html-container ol {
  list-style: none !important;
}
.seo-html-container li::marker {
  content: "" !important;
}

/* ================================================================
   RESPONSIVE — layout only (body styles are marketing's responsibility)
   ================================================================ */
@media (max-width: 820px) {
  /* Hide sidebar; stack layout vertically */
  .seo-guide .seo-toc-col { display: none; }
  .seo-guide__layout { flex-direction: column; gap: 0; }
  /* Constant 16px gutter from 820px down to 340px — width and padding
     do not change further below this; only height grows as content wraps. */
  .seo-guide__content { padding-left: 16px; padding-right: 16px; }

  /* Setup tiles — the grid collapses to a single column at this width
     (when the TOC sidebar drops away), so centre the icon and text in
     each card to read as a balanced standalone block. */
  .seo-html-container .usecase-tile {
    text-align: center !important;
    align-items: center !important;
  }
}

/* Numbered list — tighten indent on mobile so large step numbers don't
   push list text uncomfortably close to the right edge on narrow screens. */
@media (max-width: 680px) {
  .seo-html-container .numbered-list li {
    padding-left: 28px !important;
  }
  .seo-html-container .numbered-list li::before {
    font-size: 16px !important;
  }

  /* Data tables — marketing colgroups set uneven per-column widths that
     leave the content-heavy column cramped on narrow screens. Force a
     fixed layout and reset the per-column widths so all columns share the
     available width equally. !important beats the inline <col style> and
     cell width attributes from the pasted HTML. */
  .seo-html-container .data-table {
    table-layout: fixed !important;
  }
  .seo-html-container .data-table col,
  .seo-html-container .data-table th,
  .seo-html-container .data-table td {
    width: auto !important;
    white-space: normal !important;
  }
}

/* ================================================================
   SELL-TO-X SUPPLIER BANNER — SEO pages only
   Add breathing room above the banner (the section below it already
   carries its own 4em top spacing) and let the coloured band span the
   full viewport instead of the default centred 1200px card. The 100vw
   full-bleed mirrors hr.line-cro's technique so the colour reaches both
   edges regardless of the parent container's width.
   ================================================================ */
/* "Click Get Quotes" step in the How-to list is clickable (opens the RFQ
   modal via JS) — show it as an actionable link. */
.js-how-getquotes { cursor: pointer; }

/* Drop the grey footer background + top padding on SEO pages. Both are set
   by an inline <style> in _FooterContentsV2.cshtml (.footer-parent-container
   { background-color: var(--grey-bg); padding-top: 40px }) which renders in
   the body, so !important is needed to beat it from this head-loaded sheet. */
.footer-parent-container {
  background-color: transparent !important;
  padding-top: 0 !important;
}

/* Tighten the white content container on SEO pages — zero the bottom
   padding and drop the bottom margin inherited from category-rfq-cro.css
   (.single-white-container: padding 15px 35px 30px 35px !important;
   margin-bottom: 30px). */
.single-white-container {
  padding: 15px 35px 0 35px !important;
  margin-bottom: 0;
}

.sell-to-x-banner {
  margin-top: 5em;
  max-width: none;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
/* At <=768px the banner image (.left) is hidden (Site.css), so less top
   space is needed — drop the top margin to 4em. */
@media (max-width: 768px) {
  .sell-to-x-banner { margin-top: 4em; }
}