/* Help center (JB-2817): cards, breadcrumb, sidebar, chapter index, article. */

.hc-page {
  color: #222;
}

/* Help home hero: navy band carrying the search box. */
.hc-hero {
  background: #1b2a4a;
  padding: 56px 0 60px;
}

.hc-hero-block {
  text-align: center;
}

.hc-hero h1 {
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  margin: 0 0 22px;
}

.hc-hero-search {
  position: relative;
}

.hc-hero-search input {
  width: 100%;
  padding: 14px 46px 14px 18px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #fff;
  color: #33475b;
  font-size: 16px;
}

.hc-hero-search input:focus {
  outline: none;
  border-color: #0091ae;
}

.hc-hero-search .icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #7c98b6;
  pointer-events: none;
}

/* Index header — hub values: #484849, 30px/700 title, 16px intro. */
.hc-index-header {
  margin-bottom: 20px;
}

.hc-index-title {
  font-size: 30px;
  font-weight: 700;
  color: #484849;
  line-height: 1.2;
  margin: 0 0 8px;
}

.hc-index-header p {
  color: #484849;
  margin: 0;
  font-size: 16px;
}

/* Search in the left column, hub-style */
.hc-sidebar-search {
  position: relative;
  margin-bottom: 18px;
}

.hc-sidebar-search input {
  width: 100%;
  padding: 10px 38px 10px 14px;
  border: 1px solid #cbd6e2;
  border-radius: 4px;
  background: #f5f8fa;
  color: #33475b;
  font-size: 16px;
}

.hc-sidebar-search input:focus {
  outline: none;
  border-color: #0091ae;
  background: #fff;
}

.hc-sidebar-search .icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #7c98b6;
  pointer-events: none;
}

/* Autocomplete menu (jQuery UI). Black rows, no icons, and nothing that
   fades or slides: the site's global transitions were animating the rows in
   as they were inserted. */
.ui-autocomplete {
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #cbd6e2;
  border-radius: 6px;
  background: #fff;
  padding: 6px 0;
  box-shadow: 0 6px 20px rgba(27, 42, 74, 0.12);
  z-index: 1000;
}

.ui-autocomplete,
.ui-autocomplete *,
.ui-autocomplete li,
.ui-autocomplete li a,
.ui-autocomplete li span {
  transition: none !important;
  animation: none !important;
}

.ui-autocomplete li a,
.ui-autocomplete li span,
.hc-suggest {
  display: block;
  padding: 11px 18px;
  color: #222;
  font-size: 16px;
  text-decoration: none;
}

.ui-autocomplete li a:hover,
.ui-autocomplete li.ui-state-focus a,
.ui-autocomplete li a.ui-state-focus {
  background: #f5f8fa;
  color: #222;
  text-decoration: none;
}

.ui-autocomplete li span.hc-suggest-empty {
  color: #767676;
}

/* Breadcrumb — HubSpot palette: teal links, muted current crumb. */
.hc-breadcrumb {
  margin-bottom: 20px;
}

.hc-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.hc-breadcrumb li {
  display: flex;
  align-items: center;
}

.hc-breadcrumb li + li:before {
  content: '\203A';
  padding: 0 10px;
  color: #99acc2;
}

.hc-breadcrumb a {
  color: #0091ae;
  font-weight: 500;
  text-decoration: none;
}

.hc-breadcrumb a:hover {
  color: #007a8c;
  text-decoration: underline;
}

.hc-breadcrumb span[aria-current] {
  color: #99acc2;
}

/* Section cards (help home): no frame — the photograph is the card. */
.hc-card {
  display: block;
  height: 100%;
  color: #222;
  background: none;
  border: 0;
  padding: 0;
}

.hc-card:hover,
.hc-card:focus {
  color: #222;
  text-decoration: none;
}

.hc-card-media {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #f5f8fa;
  box-shadow: 0 2px 10px rgba(27, 42, 74, 0.08);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.hc-card-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 0.45s ease;
}

.hc-card:hover .hc-card-media {
  box-shadow: 0 14px 30px rgba(27, 42, 74, 0.18);
  transform: translateY(-3px);
}

.hc-card:hover .hc-card-media img {
  transform: scale(1.06);
}

.hc-card-body {
  padding: 14px 2px 0;
}

.hc-card h2 {
  font-size: 22px;
  font-weight: 700;
  color: #484849;
  margin: 0;
}

.hc-card:hover h2 {
  color: #0091ae;
}

/* Cards with no photograph yet keep a readable placeholder block. */
.hc-card-nophoto .hc-card-media {
  aspect-ratio: 1 / 1;
  border: 1px solid #eaf0f6;
}

/* Sidebar — hub-style: bordered rows, chevrons, light-teal active section. */
.hc-sidebar {
  margin-bottom: 24px;
}

.hc-nav,
.hc-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hc-nav-section + .hc-nav-section {
  border-top: 1px solid #eaf0f6;
}

.hc-nav-section > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 6px;
  color: #33475b;
  font-weight: 600;
  font-size: 16px;
}

.hc-nav-section > a:hover {
  background: #f5f8fa;
  text-decoration: none;
  color: #33475b;
}

.hc-nav-section.is-active > a {
  background: #eaf0f6;
  color: #33475b;
  font-weight: 600;
}

.hc-nav-chevron {
  color: #7c98b6;
  font-size: 0.75rem;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.hc-nav-section.is-active .hc-nav-chevron {
  transform: rotate(180deg);
}

.hc-nav-children {
  margin: 2px 0 10px;
  padding-left: 14px;
}

.hc-nav-children a {
  display: block;
  padding: 6px 10px;
  color: #484849;
  font-size: 16px;
  border-radius: 6px;
}

.hc-nav-children a:hover {
  background: #f5f8fa;
  color: #484849;
  text-decoration: underline;
}

.hc-nav-chapter > a {
  color: #484849;
  font-weight: 600;
}

/* Articles sit one character in from their chapter, so the two levels read
   apart in a list that is otherwise flat. */
.hc-nav-chapter ul {
  padding-left: 1ch;
}

.hc-nav-children a.is-current {
  color: #0091ae;
  font-weight: 600;
}

/* Green "Updated" pill next to a section name, toggled per section in admin. */
.hc-nav-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #00bda5;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Banner on a machine-translated article. */
.hc-machine-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 26px;
  padding: 16px 20px;
  border: 1px solid #dfe3eb;
  border-radius: 10px;
  background: #fff;
}

.hc-machine-text p {
  margin: 0 0 2px;
  color: #484849;
  font-size: 15px;
}

.hc-machine-text a {
  color: #484849;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hc-machine-text a:hover {
  color: #0091ae;
}

.hc-machine-icon {
  color: #516f90;
  flex-shrink: 0;
}

/* The section index gets a heading above the cards, like the hub. */
.hc-cards-title {
  font-size: 30px;
  font-weight: 700;
  color: #484849;
  margin: 0 0 24px;
}

.hc-sidebar-mobile {
  display: none;
}

/* Content column — hub-style: slate headings, plain teal article links. */
.hc-section-title {
  font-size: 32px;
  font-weight: 700;
  color: #484849;
  margin-bottom: 26px;
}

.hc-section-intro {
  font-size: 17px;
  line-height: 1.6;
  color: #516f90;
  max-width: 720px;
  margin: -14px 0 30px;
}

.hc-chapter {
  margin-bottom: 34px;
  /* Room for the sticky header when arriving via #anchor links. */
  scroll-margin-top: 90px;
}

.hc-chapter h2 {
  font-size: 26px;
  font-weight: 600;
  color: #484849;
  margin-bottom: 14px;
}

.hc-article-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hc-article-list li {
  padding-bottom: 16px;
}

.hc-article-list a {
  display: inline-block;
  color: #0091ae;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.hc-article-list a:hover {
  color: #007a8c;
  text-decoration: underline;
}

/* Article */
.hc-article h1 {
  font-size: 32px;
  font-weight: 700;
  color: #484849;
  margin-bottom: 6px;
}

.hc-article-updated {
  color: #767676;
  font-size: 0.85rem;
  margin-bottom: 22px;
}

.hc-article-body {
  font-size: 1rem;
  line-height: 1.65;
}

.hc-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 10px 0;
}

.hc-article-body h2,
.hc-article-body h3 {
  font-weight: 700;
  margin: 24px 0 10px;
}

.hc-article-body h2 {
  font-size: 1.25rem;
}

.hc-article-body h3 {
  font-size: 1.1rem;
}

.hc-article-body a {
  color: #222;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hc-article-body a:hover {
  color: #ff7a59;
}

.hc-article-body ul,
.hc-article-body ol {
  padding-left: 22px;
  margin-bottom: 14px;
}

.hc-article-body iframe {
  max-width: 100%;
}

.hc-related {
  margin-top: 36px;
}

.hc-related h2 {
  font-size: 26px;
  font-weight: 600;
  color: #484849;
  margin-bottom: 14px;
}

/* Contact CTA: a real block at the end of the page, not a thin strip. */
.hc-contact-cta {
  margin-top: 56px;
  padding: 44px 48px;
  min-height: 180px;
  border: 0;
  border-radius: 16px;
  background: #f5f8fa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.hc-contact-text {
  max-width: 620px;
}

.hc-contact-cta h2 {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 700;
  color: #484849;
}

.hc-contact-cta p {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  color: #516f90;
}

.hc-contact-btn {
  display: inline-block;
  padding: 15px 34px;
  border-radius: 8px;
  background: #ff7a59;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  transition: background 0.2s ease;
}

.hc-contact-btn:hover {
  background: #d84a26;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 767px) {
  .hc-sidebar-desktop {
    display: none;
  }

  .hc-sidebar-mobile {
    display: block;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px 14px;
  }

  .hc-sidebar-mobile summary {
    font-weight: 600;
    cursor: pointer;
  }

  .hc-sidebar-inner {
    padding-top: 10px;
  }

  .hc-section-title {
    font-size: 1.35rem;
  }

  .hc-article h1 {
    font-size: 1.4rem;
  }
}