/*
 * Section Styles
 *
 * Page layout, section containers, and theme variants.
 * Sections are the main structural containers for page content.
 *
 * Section themes override button tokens so buttons automatically
 * adapt to their background context.
 */

/* ============================================
   BASE SECTION
   ============================================ */
main > .section {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  padding: var(--space-2xl) 0;
  overflow-x: clip; /* Prevent animation transforms from causing horizontal scroll */
}

main > .section > div {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  box-sizing: border-box;
}

main > .section:first-of-type {
  padding-block: 0;
}

main > .section:nth-of-type(2) {
  padding-top: 0;
}


/* Section intro - centered by default per Figma */
main > .section > .default-content-wrapper {
  text-align: center;
}

/* Remove top margin from first element in intro */
main > .section > .default-content-wrapper > :first-child {
  margin-top: 0;
}

/* Remove bottom margin from last element - wrapper handles spacing */
main > .section > .default-content-wrapper > :last-child {
  margin-bottom: 0;
}

/* Compact variant - tighter gap between section children */
main > .section.compact {
  gap: var(--space-m);
}

/* Images in default wrapper should have vertical breathing room */
main > .section > .default-content-wrapper > p > picture > img {
  padding-block: var(--space-l);
}

@media (width >= 900px) {
  main > .section {
    gap: var(--space-2xl);
    padding: var(--space-4xl) 0;
  }

  main > .section > div {
    padding: 0 var(--container-padding);
  }

  main > .section.large-paragraph > .default-content-wrapper:first-child > p {
    font-size: 24px;
  }
}

/* ============================================
   SECTION METADATA VARIANTS
   Applied via section-metadata block in AEM
   ============================================ */

/* Light/Highlight background */
main .section.light,
main .section.highlight,
main .section.theme-light {
  background-color: var(--light-color);
}

/* Centered content - titles, text centered */
main .section.centered {
  text-align: center;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.centered h1,
/* stylelint-disable-next-line no-descending-specificity */
main .section.centered h2,
main .section.centered h3,
main .section.centered p:not(.button-container) {
  margin-left: auto;
  margin-right: auto;
}

main .section.full-width > .logos-wrapper {
  max-width: unset; 
  padding: unset;
}

main > .section.large-paragraph > .default-content-wrapper:first-child > p {
  font-size: 20px;
  line-height: normal;
  color: var(--digicert-neutral-700);
}

@media (width >= 900px) {
  main > .section.large-paragraph > .default-content-wrapper:first-child > p:not(.button-container) {
    font-size: 24px;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}


/* ============================================
   SECTION THEMES
   Synced with Figma backgrounds
   ============================================ */

/* Primary blue theme */
main .section.theme-primary {
  background-color: var(--digicert-blue);
  color: var(--digicert-white);

  /* Override button tokens for this theme */
  --btn-primary-bg: var(--btn-primary-bg-light);
  --btn-primary-fg: var(--btn-primary-fg-light);
  --btn-primary-bg-hover: var(--digicert-neutral-100);
  --btn-text-fg: var(--digicert-white);
  --link-color: var(--digicert-white);
}

/* Secondary dark blue theme */
main .section.theme-secondary {
  background-color: var(--digicert-dark-blue);
  color: var(--digicert-white);

  /* Override button tokens for this theme */
  --btn-primary-bg: var(--digicert-teal);
  --btn-primary-fg: var(--digicert-dark-blue);
  --btn-text-fg: var(--digicert-teal);
  --link-color: var(--digicert-teal);
}

/* Gradient theme (CTA banners) */
main .section.theme-gradient {
  background: var(--gradient-primary);
  color: var(--digicert-white);

  /* Override button tokens for this theme */
  --btn-primary-bg: var(--btn-primary-bg-light);
  --btn-primary-fg: var(--btn-primary-fg-light);
  --btn-primary-bg-hover: var(--digicert-neutral-100);
  --btn-text-fg: var(--digicert-white);
  --link-color: var(--digicert-white);
}

/* Dark theme */
main .section.theme-dark {
  background-color: var(--digicert-ink);
  color: var(--digicert-white);

  /* Override button tokens for this theme */
  --btn-primary-bg: var(--digicert-white);
  --btn-primary-fg: var(--digicert-ink);
  --btn-text-fg: var(--digicert-white);
  --link-color: var(--digicert-teal);
}

/* ============================================
   SECTION BACKGROUND IMAGE
   Applied via section-metadata 'image' field
   ============================================ */
main .section.bg-image {
  position: relative;
  background-image: var(--background-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================================
   TABBED SECTIONS
   Section-level tabs for grouping blocks
   Grid stacking prevents layout shift when switching tabs
   ============================================ */
main .section.tabs-container .tabs {
  display: grid;
  grid-template-rows: auto 1fr;

  .tabs-list {
    grid-row: 1;
    display: flex;
    justify-content: center;
    gap: var(--space-s);
    max-width: 100%;
    font-size: var(--body-font-size-s);
    overflow-x: auto;
    margin-bottom: var(--space-l);
    padding-bottom: 0;
  }

  @media (width >= 600px) {
    .tabs-list {
      gap: var(--space-4xl);
      font-size: var(--body-font-size-m);
    }
  }

  @media (width >= 900px) {
    .tabs-list {
      gap: var(--space-5xl);
      font-size: var(--body-font-size-l);
    }
  }

  .tabs-list button {
    flex: 0 0 max-content;
    margin: 0;
    border: none;
    border-radius: 0;
    padding: var(--space-s) var(--space-m) var(--space-xs) var(--space-m);
    background-color: transparent;
    color: var(--digicert-neutral-500);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    text-align: center;
    text-overflow: unset;
    overflow: unset;
    white-space: nowrap;
    transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
    border-bottom: var(--btn-border-width) solid transparent;
    cursor: pointer;
  }

  .tabs-list button:hover {
    color: var(--digicert-neutral-700);
  }

  .tabs-list button p {
    margin: 0;
  }

  .tabs-list button[aria-selected='true'] {
    cursor: default;
    color: var(--digicert-blue);
    border-bottom: var(--btn-border-width) solid var(--digicert-blue);
    font-weight: var(--font-weight-semibold);
  }

  /* Stack all panels in same grid cell - tallest defines height */
  .tabs-panel {
    grid-row: 2;
    grid-column: 1;
    overflow: hidden;
    transition: opacity var(--duration-fast) ease;

    h2:first-of-type {
      margin-top: 0;
      color: var(--digicert-blue);
    }
  }

  /* Hidden panels stay in layout flow but invisible */
  .tabs-panel[aria-hidden='true'] {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}