@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

/* ===========================================
   MGIC UNDERWRITING GUIDE
   CSS for Sitecore Razor views.
   Class names use "guide-" prefix with BEM.

   FIGMA DESIGN TOKENS (updated per client feedback):
   --text-default-heading:      #153B5A (navy — also default body copy)
   --text-link:                 #153B5A (navy, underlined)
   --text-link-hover:           #9E3ABB (magenta)
   --surface-default-secondary: #EDF7FC
   --surface-page-secondary:    #F5F7F6
   --border:                    #ADADAD
   Font: Roboto, 400/700
   =========================================== */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #153B5A;
  background: #fff;
}

a { color: #153B5A; text-decoration: underline; }
a:hover { color: #9E3ABB; }


/* ===========================================
   HERO BANNER
   =========================================== */
.guide-hero {
  background: #153B5A;
  color: #fff;
  position: relative;
  overflow: hidden;
  height: 250px;
  display: flex;
  align-items: center;
}

.guide-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.guide-hero__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.guide-hero__title {
  font-family: 'Roboto Slab', serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: 0;
  color: #153B5A;
  background: #fff;
  display: inline-block;
  padding: 16px 24px;
  position: relative;
  z-index: 1;
}


/* ===========================================
   BREADCRUMB
   =========================================== */
nav.guide-breadcrumb,
nav.pdf-breadcrumb {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: 0;
  color: #000;
}
nav.guide-breadcrumb a,
nav.pdf-breadcrumb a {
  color: #000 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
nav.guide-breadcrumb a:hover,
nav.pdf-breadcrumb a:hover {
  text-decoration: underline !important;
}
nav.guide-breadcrumb span,
nav.pdf-breadcrumb span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0 4px;
  vertical-align: text-bottom;
  font-size: 0;
}
nav.guide-breadcrumb span::before,
nav.pdf-breadcrumb span::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid #000;
  border-right: 1.5px solid #000;
  transform: rotate(45deg);
  margin-right: 1px;
}


/* ===========================================
   GUIDE HEADER (card style)
   =========================================== */
.guide-header {
  background: #F5F7F6;
}

.guide-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: stretch;
  gap: 24px;
}

.guide-header__main {
  flex: 1;
}

h2.guide-header__title,
.guide-header__title {
  font-family: 'Roboto Slab', serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  color: #153B5A;
  margin: 0 !important;
}

.guide-header__date {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #153B5A;
  font-weight: 400;
  font-style: normal;
  line-height: 28px;
  margin: 0 0 4px 0 !important;
}

.guide-header__description {
  font-size: 16px;
  color: #153B5A;
  margin: 0 0 20px 0 !important;
  line-height: 1.5;
}

.guide-header__download {
  display: inline-block;
  background: #153B5A;
  color: #fff;
  padding: 10px 24px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.guide-header__download:hover {
  background: #1d4d72;
  color: #fff;
  text-decoration: none;
}
.guide-header__download--loading {
  background: #8A9DAD;
  color: #fff;
  pointer-events: none;
  cursor: default;
  opacity: 0.85;
}

.guide-header__questions {
  font-size: 14px;
  width: 300px;
  flex-shrink: 0;
  color: #153B5A;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
  align-self: center;
}


/* ===========================================
   SEARCH BAR (sticky)
   =========================================== */
.guide-search {
  border-bottom: 1px solid #ddd;
  padding: 20px 0 22px 0;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
}

.guide-search__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.guide-search__left {
  flex-shrink: 0;
}

.guide-search__label {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  color: #153B5A;
}

.guide-search__date {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 28px;
  color: #153B5A;
  font-weight: 400;
  font-style: normal;
}

.guide-search__right {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.guide-search__search-label {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #000;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
  height: 50px;
  padding-top: 2px;
}

.guide-search__input {
  border: none;
  border-radius: 0;
  padding: 8px 40px 8px 16px;
  font-size: 14px;
  font-family: inherit;
  width: 500px;
  height: 50px;
  background: var(--Surface-page-secondary, #F5F7F6);
  outline: none;
}

.guide-search__btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #153B5A;
  padding: 4px;
  display: flex;
  align-items: center;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.guide-search__btn:hover {
  color: #9E3ABB;
}

/* Search clear (X) button */
.guide-search__clear {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #153B5A;
  padding: 4px 8px;
  line-height: 1;
  display: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.guide-search__clear:hover {
  color: #9E3ABB;
}
.guide-search__clear--visible {
  display: flex;
  align-items: center;
}


/* ===========================================
   SEARCH RESULTS PANEL (full-width, replaces sidebar + content)
   =========================================== */
.guide-search-results {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  display: none;
}
.guide-search-results--visible {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Header row */
.guide-search-results__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.guide-search-results__title {
  font-size: 22px;
  font-weight: 400;
  color: #153B5A;
}

.guide-search-results__count {
  font-size: 14px;
  color: #153B5A;
  margin-top: 4px;
}

.guide-search-results__back {
  font-size: 14px;
  color: #153B5A;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.guide-search-results__back:hover {
  color: #9E3ABB;
}

/* Section group */
.guide-search-results__group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.guide-search-results__group-heading {
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #002D47;
  margin-bottom: 8px;
  padding: 12px 0 4px;
  border-bottom: 1px solid #ADADAD;
}

.guide-search-results__group-heading span {
  font-family: 'Roboto Slab', serif;
  font-weight: 400;
}

/* Individual result */
.guide-search-results__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 302px;
  max-width: 740px;
  padding: 12px 16px;
  text-decoration: none;
  cursor: pointer;
}
.guide-search-results__item:hover {
  background: #EDF7FC;
  text-decoration: none;
}

.guide-search-results__item-title {
    font-size: 16px;
    font-weight: 600;
    color: #002D47;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.guide-search-results__item-text {
    font-size: 16px;
    font-weight: 400;
    color: #153B5A;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Empty state */
.guide-search-results__empty {
  font-size: 16px;
  color: #666;
  font-style: italic;
  padding: 24px 0;
}

/* Search term highlight — bold in body text */
.guide-search-results__highlight {
  font-weight: 700;
  background: none;
  padding: 0;
  border-radius: 0;
}

/* Search term highlight — black weight in titles */
.guide-search-results__item-title .guide-search-results__highlight {
  font-weight: 900;
}

/* Pagination */
.guide-search-results__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 0;
  border-top: 1px solid #ADADAD;
  margin-top: 16px;
}
.guide-search-results__page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #ADADAD;
  border-radius: 4px;
  background: #fff;
  color: #153B5A;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.guide-search-results__page-btn:hover {
  background: #EDF7FC;
  text-decoration: none;
}
.guide-search-results__page-btn--active {
  background: #153B5A;
  color: #fff;
  border-color: #153B5A;
}
.guide-search-results__page-btn--disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}


/* ===========================================
   TWO-COLUMN LAYOUT
   =========================================== */
.guide-layout__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}


/* ===========================================
   LEFT SIDEBAR — "Browse the Guide"
   =========================================== */
.guide-sidebar {
  width: 340px;
  flex-shrink: 0;
  position: sticky;
  top: 100px;
  background: #EDF7FC;
  padding: 20px;
  border-radius: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 120px);
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */
}

/* Hide scrollbar — Chrome, Safari, Opera */
.guide-sidebar::-webkit-scrollbar {
  display: none;
}

h3.guide-sidebar__heading,
.guide-sidebar__heading {
    font-family: 'Roboto Slab', serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #153B5A !important;
    line-height: 24px !important;
    margin: 0 0 8px 0 !important;
}

/* Summary links (Summary of Changes, Table of Contents) */
.guide-sidebar__summary-links {
  margin: 0 0 0px 0;
}

.guide-sidebar__summary-link {
  display: block;
  padding: 8px 100px;
  margin-left: -100px;
  margin-right: -100px;
  width: calc(100% + 200px);
  font-size: 14px !important;
  color: #153B5A;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  transition: none;
}
.guide-sidebar__summary-link:hover {
  text-decoration: none;
  color: #153B5A;
  background: #B9E0F2;
}

.guide-sidebar__summary-link--active {
  font-weight: 700;
  background: #B9E0F2;
}

/* Sidebar nav tree */
.guide-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.guide-sidebar__item {
  border-bottom: 1px solid rgba(21, 59, 90, 0.1);
}
.guide-sidebar__item:last-child { border-bottom: none; }

.guide-sidebar__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 100px;
  margin-left: -100px;
  margin-right: -100px;
  width: calc(100% + 200px);
  font-size: 14px !important;
  color: #153B5A;
  cursor: pointer;
  line-height: 1.35;
  text-decoration: none;
  word-spacing: 0.15em;
  background: transparent;
  transition: none;
}
.guide-sidebar__link:hover {
  color: #153B5A;
  text-decoration: none;
  background: #B9E0F2;
}
.guide-sidebar__link--active {
  color: #153B5A;
  font-weight: inherit;
  background: #B9E0F2 !important;
}

.guide-sidebar__link--section {
  font-weight: 700;
  color: #153B5A;
  padding: 8px 100px;
}

.guide-sidebar__toggle {
  font-size: 9px;
  color: #306A85;
  margin-left: 6px;
  flex-shrink: 0;
  transition: transform 0.2s;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.guide-sidebar__toggle--open {
  transform: rotate(90deg);
}

.guide-sidebar__children {
  list-style: none;
  padding-left: 0;
  display: none;
}
.guide-sidebar__children--open {
  display: block;
}

/* Second level and deeper get indentation */
.guide-sidebar__children .guide-sidebar__children {
  padding-left: 16px;
}


/* ===========================================
   MAIN CONTENT AREA
   =========================================== */
.guide-content {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  transition: opacity 0.2s ease, transform 0.25s ease;
  opacity: 1;
  transform: translateY(0);
}

/* Fade-in glide for content swap */
.guide-content--hidden {
  opacity: 0;
  transform: translateY(8px);
}
.guide-content--visible {
  opacity: 1;
  transform: translateY(0);
}


/* ===========================================
   SUMMARY OF CHANGES (Change Log)
   =========================================== */
.guide-changelog {
  margin-bottom: 40px;
}

.guide-changelog__heading {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0;
  color: #153B5A;
  padding-bottom: 12px;
  border-bottom: 2px solid #153B5A;
  margin-bottom: 0;
}

.guide-changelog__intro {
    font-size: 16px;
    color: #153B5A;
    line-height: 1.65;
    margin-bottom: 16px;
    padding-top: 12px;
    border-top: 2px solid #153B5A;
}

.guide-changelog__list {
  border-bottom: 1px solid #ADADAD;
}

.guide-changelog__row {
  display: flex;
  gap: 24px;
  padding: 12px 0;
  border-top: 1px solid #ADADAD;
  font-size: 14px;
  line-height: 1.5;
}

.guide-changelog__section {
  flex: 0 0 250px;
  font-weight: 700;
  color: #153B5A;
}
.guide-changelog__section a {
  color: #153B5A;
}

.guide-changelog__description {
  flex: 1;
  color: #153B5A;
}


/* ===========================================
   TABLE OF CONTENTS
   =========================================== */
.guide-toc {
  margin-bottom: 40px;
}

.guide-toc__heading {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0;
  color: #153B5A;
  padding-bottom: 12px;
  border-bottom: 2px solid #153B5A;
  margin-bottom: 0;
}

.guide-toc__section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
  color: #153B5A;
  padding: 12px 0;
  min-height: 48px;
  border-top: 1px solid #ADADAD;
  cursor: pointer;
  transition: none;
}
.guide-toc__section-heading:hover {
  background: #EDF7FC;
  border-top-color: #EDF7FC;
  box-shadow: 0 1px 0 #EDF7FC;
  position: relative;
  z-index: 1;
}

.guide-toc__section-expand {
  color: #306A85;
  font-size: 0;
  flex-shrink: 0;
  transition: transform 0.2s;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.guide-toc__section-expand::after {
  content: '\25B6';
  font-size: 9px;
  color: #306A85;
}
.guide-toc__section-expand--open {
  transform: rotate(90deg);
}

.guide-toc__row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  min-height: 40px;
  border-top: 1px solid #ADADAD;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: inherit;
  gap: 49px;
  transition: none;
}
.guide-toc__row--hidden {
  display: none !important;
}
.guide-toc__row--child {
  padding-left: 24px;
}
.guide-toc__row:hover {
  background: #EDF7FC;
  text-decoration: none;
  color: #153B5A;
  border-top-color: #EDF7FC;
  box-shadow: 0 1px 0 #EDF7FC;
  position: relative;
  z-index: 1;
}

.guide-toc__number {
  color: #153B5A;
  min-width: 56px;
  font-weight: 700;
  transition: none;
}

.guide-toc__title {
  flex: 1;
  color: #153B5A;
  font-weight: 700;
  transition: none;
}
.guide-toc__row:hover .guide-toc__title {
  color: #153B5A;
}

.guide-toc__expand {
  color: #306A85;
  font-size: 0;
  margin-left: 8px;
  flex-shrink: 0;
  transition: transform 0.2s;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.guide-toc__expand::after {
  content: '\25B6';
  font-size: 9px;
  color: #306A85;
}
.guide-toc__expand--open {
  transform: rotate(90deg);
}


/* ===========================================
   CONTENT SECTIONS
   =========================================== */
.guide-sections__section {
  margin-bottom: 40px;
}

.guide-sections__section-heading {
  font-size: 22px;
  font-weight: 700;
  color: #153B5A;
  padding-bottom: 8px;
  border-bottom: 2px solid #153B5A;
  margin-bottom: 24px;
}

.guide-sections__block {
  margin-bottom: 24px;
}

/* Subsection indentation */
.guide-sections__block:has(> .guide-sections__block-subtitle) > .guide-sections__text {
    padding-left: 20px;
}

.guide-sections__block:has(> .guide-sections__block-sub-subtitle) > .guide-sections__text {
    padding-left: 40px;
}

.guide-sections__block-title {
  font-size: 20px;
  font-weight: 700;
  color: #153B5A;
  margin-bottom: 8px;
}

.guide-sections__block-title--alt-color {
  color: #9E3ABB !important;
}

.guide-sections__block-subtitle {
  font-size: 18px;
  font-weight: 700;
  color: #153B5A;
  margin-bottom: 6px;
}

.guide-sections__block-subtitle--alt-color {
  color: #9E3ABB !important;
}

.guide-sections__block-sub-subtitle {
  font-size: 15px;
  font-weight: 700;
  color: #153B5A;
  margin-bottom: 6px;
}

.guide-sections__block-sub-subtitle--alt-color {
  color: #9E3ABB !important;
}

.guide-sections__date {
  font-size: 14px;
  color: #153B5A;
  font-style: italic;
  margin-bottom: 12px;
}

/* Web-only text size — @media screen so it doesn't affect PDF (wkhtmltopdf renders as print) */
@media screen {
  div.guide-sections__text,
  .guide-content .guide-sections__text {
    font-size: 16px;
  }
}

.guide-sections__text {
  line-height: 1.65;
  color: #153B5A;
  margin-bottom: 12px;
  overflow-x: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* "Next Section" link */
.guide-sections__next {
  display: block;
  margin-top: 32px;
  padding: 16px 0;
  border-top: 1px solid #ADADAD;
  font-size: 16px;
  font-weight: 700;
  color: #153B5A;
  cursor: pointer;
}
.guide-sections__next:hover { color: #520F81; }


/* ===========================================
   RTE (Rich Text Editor) CONTENT
   Styles for HTML coming from Sitecore RTE:
   tables, images, links, lists, etc.
   =========================================== */
.guide-sections__text table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.4;
  border: 1px solid #8A9DAD;
}

.guide-sections__text table td,
.guide-sections__text table th {
  border-right: 1px solid #8A9DAD;
  border-bottom: 1px solid #8A9DAD;
  padding: 8px;
  text-align: left;
  vertical-align: top;
  color: #153B5A;
  min-height: 56px;
}

.guide-sections__text table strong,
.guide-sections__text table b {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

/* Remove right border on last cell in each row */
.guide-sections__text table td:last-child,
.guide-sections__text table th:last-child {
  border-right: none;
}

.guide-sections__text table th {
    background: #EEEBEE;
    font-weight: 700;
    text-align: center;
}

.guide-sections__text table thead + tbody tr:first-child td,
.guide-sections__text table thead + tbody tr:first-child th {
  border-top: none;
}

/* Data rows — no alternating background by default (Figma shows white) */
.guide-sections__text table tbody tr {
  background: #fff;
}

/* Preserve RTE inline background colors (e.g. divider rows) */
.guide-sections__text table tbody tr[style*="background"] {
  background: inherit !important;
}

/* Tablet / narrow desktop — tighten tables so they fit without scrolling */
@media (min-width: 769px) and (max-width: 1200px) {
    .guide-sections__text table {
        font-size: 15px;
    }

        .guide-sections__text table td,
        .guide-sections__text table th {
            padding: 10px 12px;
            min-height: 0;
        }
}

/* Inverse table variant (applied via class on the table if needed) */
.guide-sections__text table.guide-table--inverse th {
  background: #002A42;
}
.guide-sections__text table.guide-table--inverse td {
  background: #083B5C;
  color: #fff;
  border-color: rgba(138, 157, 173, 0.4);
}

.guide-sections__text img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 16px 0;
  border-radius: 4px;
}

.guide-sections__text a {
  color: #153B5A;
  text-decoration: underline;
}
.guide-sections__text a:hover {
  color: #F20581;
}

.guide-content .guide-sections__text ul,
.guide-content .guide-sections__text ol {
  margin: 12px 0;
  padding-left: 24px;
}

.guide-sections__text li {
  margin-bottom: 4px;
  line-height: 1.65;
}

/* Web-only list styles — @media screen so they don't affect PDF */
@media screen {
  .guide-content .guide-sections__text ul {
    list-style: disc;
  }

  .guide-content .guide-sections__text ol {
    list-style: decimal;
  }

  .guide-content .guide-sections__text li {
    list-style: initial;
    display: list-item;
  }

  .guide-content .guide-sections__text ul ul {
    list-style: circle;
  }

  .guide-content .guide-sections__text ul ul ul {
    list-style: square;
  }
}

.guide-sections__text p {
  margin-bottom: 12px;
}
.guide-sections__text p:last-child {
  margin-bottom: 0;
}

/* Mobile drawer — hidden on desktop */
.guide-mobile-drawer-trigger {
  display: none;
}
.guide-mobile-drawer-panel {
  display: none;
}


/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 768px) {

  /* --- Header card --- */
  .guide-header__inner {
    flex-direction: column;
    gap: 16px;
  }

  .guide-header__questions {
    min-width: 0;
    width: 100%;
  }

  /* --- Search bar: hide left label, full-width input --- */
  .guide-search__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0 15px;
  }

  .guide-search__left {
    display: block;
  }

  .guide-search__search-label {
    display: none !important;
  }

  .guide-search__right {
    width: 100%;
  }

  .guide-search__input {
    width: 100%;
    flex: 1;
  }

  /* --- Layout --- */
  .guide-layout__inner {
    flex-direction: column;
    padding: 15px;
    overflow: visible;
  }

  /* --- Hide sidebar on mobile, use drawer instead --- */
  .guide-sidebar {
    display: none !important;
  }

  /* --- Mobile Browse Drawer trigger bar --- */
  .guide-mobile-drawer-trigger {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 21px 20px;
    background: #EDF7FC;
    border-top: 1px solid #ADADAD;
    cursor: pointer;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
  }

  .guide-mobile-drawer-trigger__label {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #153B5A;
  }

  .guide-mobile-drawer-trigger__icon {
    width: 10px;
    height: 6px;
    display: inline-block;
    border: none;
    background: none;
  }

  .guide-mobile-drawer-trigger__icon svg {
    display: block;
  }

  /* --- Mobile Browse Drawer panel (bottom sheet) --- */
  .guide-mobile-drawer-panel {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #EDF7FC;
    max-height: 75vh;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    flex-direction: column;
  }

  .guide-mobile-drawer-panel--open {
    display: flex;
  }

  .guide-mobile-drawer-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    flex-shrink: 0;
    background: #EDF7FC;
    border-bottom: 1px solid #ADADAD;
  }

  .guide-mobile-drawer-panel__title {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #153B5A;
  }

  .guide-mobile-drawer-panel__close {
    background: none;
    border: none;
    font-size: 22px;
    color: #153B5A;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
  }

  .guide-mobile-drawer-panel__content {
    padding: 0 20px 24px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #EDF7FC;
  }

  /* --- Drawer sidebar items — match Figma spacing --- */
  .guide-mobile-drawer-panel .guide-sidebar__summary-links {
    display: none;
  }

  .guide-mobile-drawer-panel .guide-sidebar__heading {
    display: none;
  }

  .guide-mobile-drawer-panel .guide-sidebar__list {
    padding: 0;
    margin: 0;
  }

  .guide-mobile-drawer-panel .guide-sidebar__item {
    border-bottom: none;
  }

  .guide-mobile-drawer-panel .guide-sidebar__link {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8px 10px 8px 0;
    margin: 0;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    color: #153B5A;
    gap: 10px;
    background: transparent;
    border-bottom: 1px solid #ADADAD;
  }

  .guide-mobile-drawer-panel .guide-sidebar__link--section {
    font-weight: 700;
    padding: 10px 10px 10px 0;
    font-size: 15px;
  }

  .guide-mobile-drawer-panel .guide-sidebar__link--active {
    background: #B9E0F2 !important;
    margin: 0 !important;
    padding: 8px 10px 8px 0 !important;
    width: 100% !important;
  }

  .guide-mobile-drawer-panel .guide-sidebar__children {
    padding-left: 16px;
  }

  .guide-mobile-drawer-panel .guide-sidebar__children .guide-sidebar__link {
    padding-left: 0;
  }

  .guide-mobile-drawer-panel .guide-sidebar__children .guide-sidebar__children .guide-sidebar__link {
    padding-left: 0;
  }

  .guide-mobile-drawer-panel .guide-sidebar__children .guide-sidebar__children {
    padding-left: 16px;
  }

  .guide-mobile-drawer-panel .guide-sidebar__toggle {
    font-size: 9px;
    color: #306A85;
  }

  /* --- Summary of Changes: 50% left column on mobile --- */
  .guide-changelog__row {
    flex-direction: row;
    gap: 16px;
  }

  .guide-changelog__section {
    flex: 0 0 50%;
  }

  /* --- Content: prevent cutoff --- */
  .guide-content {
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
    padding-bottom: 60px;
  }

  .guide-sections__section-heading {
    font-size: 18px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .guide-sections__block-title {
    font-size: 16px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .guide-sections__text {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .guide-sections__text table {
    min-width: 600px;
  }

  /* --- Search results --- */
  .guide-search-results {
    padding: 15px;
  }

  .guide-search-results__header {
    flex-direction: column;
    gap: 12px;
  }

  .guide-search-results__item {
    max-width: 100%;
    min-width: 0;
  }
}


/* ===========================================
   TABLET (768px — 992px)
   Search bar adjustments
   =========================================== */
@media (min-width: 769px) and (max-width: 992px) {
  .guide-search__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0 15px;
  }

  .guide-search__left {
    flex-shrink: 0;
    display: block;
  }

  .guide-search__search-label {
    display: none;
  }

  .guide-search__right {
    width: 100%;
  }

  .guide-search__input {
    width: 100%;
    flex: 1;
    min-width: 0;
  }
}

/* Base — mobile first */
.guide-header-flex {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-self: center;
    vertical-align: top;
    max-width: 1200px;
    padding: 0 15px;
}

@media (min-width: 768px) {
    .guide-header-flex {
        flex-direction: row;
        gap: 40px;
        padding: 0 24px;
    }

        .guide-header-flex > div:first-child {
            flex: 2;
        }

        .guide-header-flex > div:last-child {
            flex: 1;
        }
}

/* ===========================================
   RTE COLOR CLASSES
   CSP-safe replacements for inline color styles.
   Content editors apply these via the RTE class picker
   instead of inline style="color:…" attributes.
   =========================================== */

/* --- Standalone colors --- */
.text-magenta         { color: #F20F81 !important; }
.text-purple          { color: #9E3ABB !important; }
.text-teal            { color: #2F9FB7 !important; }
.text-brown           { color: #9B450A !important; }

/* --- Color + style combinations --- */
.text-magenta-underline {
  color: #F20F81 !important;
  text-decoration: underline !important;
}

.text-purple-bold {
  color: #9E3ABB !important;
  font-weight: bold !important;
}

.text-teal-bold {
  color: #2F9FB7 !important;
  font-weight: bold !important;
}

.text-brown-italic {
  color: #9B450A !important;
  font-style: italic !important;
}

/* --- Table background --- */
.gray-bg-color {
  background-color: #f2f2f2 !important;
}


/* ===========================================
   RTE UTILITY CLASSES
   CSP-safe replacements for inline style attributes.
   Content editors apply these via the RTE class picker
   instead of inline style="..." attributes.
   =========================================== */

/* Text alignment */
.rte-text-center { text-align: center !important; }

/* Table row backgrounds */
.rte-bg-gray { background-color: #f2f2f2 !important; }

/* Text decoration */
.rte-underline { text-decoration: underline !important; }

/* Whitespace */
.rte-pre { white-space: pre !important; }

/* Alternate color (purple) for inline spans */
.rte-purple { color: #9E3ABB !important; }

/* Column widths */
.rte-w-25 { width: 25% !important; }
.rte-w-75 { width: 75% !important; }

/* Vertical alignment combos for table headers */
.rte-th-center-bottom {
  text-align: center !important;
  vertical-align: bottom !important;
}

.rte-th-center-bottom-bordered {
  text-align: center !important;
  vertical-align: bottom !important;
  border-left: 1px solid #8A9DAD !important;
}

.rte-td-center-bordered {
  text-align: center !important;
  vertical-align: middle !important;
  border-left: 1px solid #8A9DAD !important;
}

/* Table row height options */
.rte-row-compact td,
.rte-row-compact th {
    padding: 4pt 12pt !important;
}

.rte-row-tight td,
.rte-row-tight th {
    padding: 2pt 12pt !important;
}

.rte-row-spacer td,
.rte-row-spacer th {
    padding: 1pt 12pt !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Keep table section-header rows with the row below them */
.rte-row-keep-next {
    page-break-after: avoid !important;
}


/* ===========================================
   JS VISIBILITY TOGGLE CLASSES
   CSP-safe replacements for el.style.display
   =========================================== */
.guide--hidden { display: none !important; }
.guide--body-no-scroll { overflow: hidden !important; }
.guide-sidebar--drawer-reset {
  display: block !important;
  width: 100%;
  position: static;
  max-height: none;
  background: transparent;
  padding: 0;
  overflow: visible;
}