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

/* ================================
   Global Guidebook Typography
================================ */

.gb-hero,
.gb-toc-download,
.gb-two-col,
.gb-three-col,
.gb-four-col,
.gb-content-header,
.gb-callout,
.gb-intro__body,
.gb-intro__title {
    font-family: 'Red Hat Display', sans-serif;
}

/* ==============================
   Guidebook Link Styling (restore standard behavior)
================================ */

.guidebook-body a:not(.gb-toc-download a) {
    color: #1a0dab;           /* standard web link blue */
    text-decoration: underline;
}

.guidebook-body a:not(.gb-toc-download a):visited {
    color: #681da8;           /* typical visited link purple */
}

.guidebook-body a:not(.gb-toc-download a):hover {
    text-decoration: underline;
}

.guidebook-body a:not(.gb-toc-download a):active {
    color: #174ea6;
}

.gb-toc-download a,
.gb-toc-download a:visited,
.gb-toc-download a:hover,
.gb-toc-download a:active {
    color: inherit;
    text-decoration: none;
}


/* ================================
   Smooth scrolling
================================ */
.guidebook-page html,
.guidebook-page body {
  scroll-behavior: smooth;
}

.guidebook-page {
  scroll-padding-top: 15px;
}


/* ================================
   Hero
================================ */

.gb-hero {
    position: relative;
    padding: 70px 0 100px;
    overflow: hidden;
}

.gb-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.gb-hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
}

.gb-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 600px;
}

.gb-hero__title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.gb-hero__subtitle {
    font-size: 1.45rem;
    max-width: 700px;
}

/* Theme variants */

.gb-hero--light {
    /* background: #ffffff; */
    color: #111;
}

.gb-hero--dark {
    background: #1f2430;
    color: #fff;
}


/* ================================
   Heading
================================ */
.gb-section__heading {
  font-weight: 900; /* try 700–900 depending on how bold you want it */
}

.gb-section-heading__title {
  font-weight: 900; /* try 700–900 depending on how bold you want it */
}

.gb-content-img__heading {
  font-weight: 900; /* try 700–900 depending on how bold you want it */
}

.gb-two-col__heading {
  font-weight: 900; /* try 700–900 depending on how bold you want it */
}

/* ================================
   Content With Image
================================ */

.gb-content-img__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}

.gb-content-img__text,
.gb-content-img__media {
    min-width: 0;
}

@media (min-width: 900px) {
    .gb-content-img__grid--text_left_image_right,
    .gb-content-img__grid--image_left_text_right {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    }
}

.gb-content-img__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Background variants */

.gb-bg-light {
    background: #f7f8fa;
    /* padding: 80px 0; */
}

.gb-bg-dark {
    background: #1f2430;
    color: white;
    /* padding: 80px 0; */
}

.gb-bg-default {
    /* padding: 80px 0; */
}


/* ================================
   Callout Panel
================================ */

.gb-callout {
    padding: 28px;
    border-radius: 12px;
    border: 1px solid rgba(17, 17, 17, 0.10);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
}

.gb-callout__heading {
    margin: 0 0 10px;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.gb-callout__body > :first-child {
    margin-top: 0;
}

.gb-callout__body > :last-child {
    margin-bottom: 0;
}

/* Tone variants */

.gb-callout--info {
    border-left: 6px solid #2b6cb0;
}

.gb-callout--note {
    border-left: 6px solid #6b7280;
}

.gb-callout--warning {
    border-left: 6px solid #b45309;
}

.gb-callout--success {
    border-left: 6px solid #047857;
}

/* Dark section compatibility */

.gb-bg-dark .gb-callout {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}



/* Divider */
.gb-divider {
    padding: 1.5rem 0;
}

.gb-divider__line {
    width: 80%;          /* 80% of container */
    margin: 0 auto;      /* center horizontally */
    border: 0;
    height: 1px;
    background-color: #355aa5;
    opacity: 1;
}




/* ================================
   Guidebook unordered list bullets
   Applies the same blue arrow bullets across guidebook templates.
   Excludes checklist lists, which use their own image icons.
================================ */

.guidebook-body ul:not(.gb-checklist__items) {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.guidebook-body ul:not(.gb-checklist__items) li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 0.75rem;
}

.guidebook-body ul:not(.gb-checklist__items) li::before {
    content: "";
    position: absolute;
    left: 0;
    /* top: 50%; */
    top: 0.75em;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #355aa5;
}

.gb-intro__title {
    font-weight: 700;
    margin: 0 0 12px;
}

/* ================================
   TOC + Download
================================ */

.gb-toc-download {
    /* padding: 80px 0; */
}

/* Mobile-first: stack */
.gb-toc-download__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}

/* Ensure both asides fill the column */
.gb-toc-download__toc,
.gb-toc-download__card {
    width: 100%;
}

/* Desktop: 60/40 split */
@media (min-width: 900px) {
    .gb-toc-download__grid {
        grid-template-columns: 1fr 1fr; /* 50% / 50% */
        gap: 40px;
    }

    .gb-toc-download__toc {
        grid-column: 1;
    }

    .gb-toc-download__card {
        grid-column: 2;
    }
}

/* Optional basic styling to make it look like a card */
.gb-toc-download__toc-title {
    font-weight: 700;
    margin: 0 0 12px;
}

.gb-toc-download__card {
    border: 1px solid rgba(17, 17, 17, 0.10);
    border-radius: 12px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
}

.gb-toc-download__card-title {
    font-weight: 700;
    margin: 0 0 10px;
}

.gb-toc-download__form {
    margin-top: 14px;
}

/* ================================
   TOC Number Styling
================================ */

/* Remove default numbering */
.gb-toc-download__toc-list {
    margin: 0;
    list-style: none;
    counter-reset: toc-counter;
    padding-left: 0;
}

/* Each list item increments counter */
.gb-toc-download__toc-item {
    counter-increment: toc-counter;
    position: relative;
    padding-left: 42px;
    margin: 14px 0;
    font-size: 1.4rem;
    font-weight: 500;
    display: flex;              /* key */
    align-items: center;        /* vertical centering */
    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
    padding-bottom: 14px;
    /* opacity: 1; */
}

/* Remove border from last item */
.gb-toc-download__toc-item:last-child {
    border-bottom: none;
    padding-bottom: 14px;
}

/* Custom number */
.gb-toc-download__toc-item::before {
    content: counter(toc-counter);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);   /* center vertically */
    font-size: 2.2rem;
    font-weight: 700;
    color: #355aa5;
    line-height: 1;
    padding-bottom: 14px;
}

/* ================================
   TOC "View" CTA (DOM-based)
   Expected DOM inside each li:
     <a class="gb-toc-download__toc-link" ...>
       <span class="gb-toc-download__toc-link-text">Label</span>
       <span class="gb-toc-download__toc-link-cta">
         <span class="gb-toc-download__toc-link-cta-text">View</span>
         <svg class="gb-toc-download__toc-link-cta-icon" ...></svg>
       </span>
     </a>
================================ */

.gb-toc-download__toc-link {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 16px;
    text-decoration: none;
    color: inherit;
}

.gb-toc-download__toc-link:hover {
    text-decoration: none;
}

.gb-toc-download__toc-link-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Push the CTA to the far right */
.gb-toc-download__toc-link-cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.gb-toc-download__toc-link-cta-text {
    font-size: 1.4rem;
    font-weight: 500;
    color: #355aa5;
    white-space: nowrap;
}

.gb-toc-download__toc-link-cta-icon {
    width: 18px;
    height: 18px;
    color: #355aa5;
    flex: 0 0 auto;
}

/* Make the whole row feel clickable */
.gb-toc-download__toc-item:hover .gb-toc-download__toc-link-cta-text,
.gb-toc-download__toc-item:hover .gb-toc-download__toc-link-cta-icon {
    filter: brightness(0.9);
}


/* ================================
   Two Column
================================ */

.gb-two-col__grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

/* Mobile-first: stacks left above right by default */
.gb-two-col__col {
    min-width: 0;
}

/* Desktop: two columns side-by-side */
@media (min-width: 900px) {
    .gb-two-col__grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Optional variants (wider text column) */
    .gb-two-col__grid--text_left_image_right,
    .gb-two-col__grid--callout_left_content_right {
        grid-template-columns: 3fr 2fr;
    }

    .gb-two-col__grid--image_left_text_right {
        grid-template-columns: 2fr 3fr;
    }

    /* For image_left_text_right, swap the visual order */
    .gb-two-col__grid--image_left_text_right .gb-two-col__col--left {
        order: 2;
    }
    .gb-two-col__grid--image_left_text_right .gb-two-col__col--right {
        order: 1;
    }
}

/* ================================
   Three Column Block
================================ */

.gb-three-col {
  /* padding: 80px 0; */
}

.gb-three-col__grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr; /* mobile default: stacked */
}

@media (min-width: 900px) {
  .gb-three-col__grid {
    grid-template-columns: repeat(3, 1fr); /* desktop: 3 columns */
    align-items: start;
  }
}


/* ================================
   Four Column Block
================================ */

.gb-four-col {
  /* padding: 80px 0; */
}

.gb-four-col__grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr; /* mobile default: stacked */
}

/* Tablet: 2 columns (2x2) */
@media (min-width: 700px) {
  .gb-four-col__grid {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
}

/* Desktop: 4 columns */
@media (min-width: 1100px) {
  .gb-four-col__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* for class HeaderBlock */
.gb-content-header {
  margin: 1.25rem 0 0.75rem;
  font-weight: 700;
}

.gb-content-header--h2 { font-size: 1.6rem; }
.gb-content-header--h3 { font-size: 1.35rem; }
.gb-content-header--h4 { font-size: 1.15rem; }


/* =================================
   Guidebook Download Button
================================= */

.gb-toc-download__download-btn {
    display: block;
    width: fit-content;
    margin: 30px auto;          /* vertical spacing + horizontal centering */
    padding: 14px 30px;
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    background-color: #9fc2ff;
    border-radius: 999px;
    text-decoration: none;
    text-align: center;
}

/* card layout */
.gb-toc-download__card {
    text-align: left;
}

/* hover state */
.gb-toc-download__download-btn:hover {
    background-color: #8bb4ff;
    color: #111827;
    text-decoration: none;
}



/* Guidebook Index Cards */
.gb-index-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 900px) {
    .gb-index-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.gb-index-card {
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.gb-index-card__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f3f4f6;
    overflow: hidden;
}

.gb-index-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gb-index-card__body {
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.gb-index-card__meta {
    font-size: 13px;
    color: rgba(0,0,0,.70);
    display: flex;
    align-items: center;
    gap: 10px;
}

.gb-index-card__meta .gb-index-card__pill {
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: rgba(0,0,0,.78);
}

.gb-index-card__meta .gb-index-card__sep {
    width: 1px;
    height: 14px;
    background: rgba(0,0,0,.25);
    display: inline-block;
}

.gb-index-card__title {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 800;
    color: #111;
}

.gb-index-card__title a {
    color: inherit;
    text-decoration: none;
}

.gb-index-card__excerpt {
    margin: 0;
    color: rgba(0,0,0,.78);
    line-height: 1.5;
}

.gb-index-card__footer {
    margin-top: auto;
    padding-top: 6px;
}

.gb-index-card__readmore {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    color: #355aa5;
}

.gb-index-card__readmore svg {
    width: 18px;
    height: 18px;
}


/* ================================
   Checklist (icon bullets)
================================ */

.gb-checklist__items {
    list-style: none;
    padding-left: 0;
    margin: 0;
    font-weight: 800;
}

.gb-checklist__item {
    position: relative;
    padding-left: 42px;   /* space for icon */
    margin: 18px 0;
    line-height: 1.5;
}

.gb-checklist__item::before {
    content: "";
    position: absolute;
    left: 0;
    /* top: 0.25em; */
    width: 28px;
    height: 28px;

    background-image: var(--gb-checklist-bullet-url);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* ================================
   Cards Grid
================================ */

.gb-cards__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
}

@media (min-width: 700px) {
    .gb-cards__grid--cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gb-cards__grid--cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gb-cards__grid--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .gb-cards__grid--cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.gb-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05);
    overflow: hidden;
}

.gb-card__body {
    padding: 20px;
}

.gb-card__title {
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 10px;
}

.gb-card__desc {
    font-weight: 400;
    line-height: 1.6;
}