/*
 * 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;
}

/* Left-aligned content - overrides the centered default-content-wrapper */
main .section.align-left > .default-content-wrapper {
  text-align: left;
}

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);
}

/* Headings on dark/gradient sections need to inherit, not use the default near-black */
main .section.theme-dark :is(h1, h2, h3, h4, h5, h6),
main .section.theme-gradient :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

/* ============================================
   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;
  }
}

/* --------------------------------------------------------------------------
   BETA: form tabbing (`Style: tabbed-blocks, form-tabbing-beta`)

   Each form is tabbed together with the heading and copy that introduce it, so a
   tab panel now contains default content — which a tab panel never did before.
   Two consequences to correct:

   1. `main > .section > .default-content-wrapper` centres section intro text.
      Inside a panel the wrapper is no longer a direct child of the section, so
      that rule stops applying and the content goes left-aligned. That is what we
      want above a form, so this is a note, not a fix.
   2. The wrapper's own bottom margin plus the panel's spacing double up between
      the copy and the form. Collapse it.
   -------------------------------------------------------------------------- */
main .section.tabs-container.form-tabbing-beta .tabs .tabs-panel {
  .default-content-wrapper {
    /* Centred to match the form beneath it. Section intro copy is centred by
       `main > .section > .default-content-wrapper`, but inside a panel the wrapper is no
       longer a direct child of the section, so that rule stops applying — this restores it
       for the tabbed case only. */
    text-align: center;

    /* The wrapper's own bottom margin plus the panel's spacing double up against the form;
       drop the margin and set the gap explicitly. --space-l is 24px. */
    margin-bottom: 0;
    padding-bottom: var(--space-l);
  }
}

/* --------------------------------------------------------------------------
   TAB SKIN: vertical (Section Metadata `Style: tabbed-blocks, tab-style-vertical`)

   Tab strip in a left column, active block on the right. Desktop only — below
   900px this whole block is inert and the mobile rendering is the horizontal
   strip defined above, which is the intended responsive behavior, not a gap.

   SPECIFICITY IS LOAD-BEARING. Every selector below carries the full
   `main .section.tabs-container.tab-style-vertical` prefix on purpose:

     base root            main .section.tabs-container .tabs        (0,3,1)
     base nested child    …&.tabs-list / .tabs-panel                (0,4,1)
     base selected tab    …&.tabs-list button[aria-selected]        (0,5,2)
     vertical root        + .tab-style-vertical                     (0,4,1) ✓ beats base root
     vertical child       nested                                    (0,5,1) ✓ beats base child

   Media queries do NOT raise priority, so a shorter selector like
   `.tabs-container.tab-style-vertical .tabs .tabs-panel` (0,4,0) would LOSE to
   the base rules and the panels would silently stay in row 2 / column 1,
   squashed underneath the strip. Do not shorten these.

   The tablist rules additionally qualify on [role='tablist'] to reach (0,6,1).
   That is not decoration: blocks/card-ecommerce/card-ecommerce.css scopes
   `main .section.tabs-container:has(.card-ecommerce) .tabs .tabs-list` — also
   (0,5,1) — and block CSS loads AFTER this file, so an equal-specificity rule
   there would win on source order and re-apply `gap: 0` to a vertical strip.
   -------------------------------------------------------------------------- */
@media (width >= 900px) {
  main .section.tabs-container.tab-style-vertical .tabs {
    grid-template-columns: minmax(12rem, 20%) 1fr;
    grid-template-rows: 1fr;
    gap: var(--space-2xl);

    .tabs-list[role='tablist'] {
      grid-row: 1;
      grid-column: 1;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;

      /* The horizontal strip scrolls sideways when it overflows; a column does not. */
      overflow-x: visible;

      /* Base sets --space-5xl (80px) at this breakpoint — right between horizontal
         tabs, absurd between stacked ones. */
      gap: var(--space-xs);

      /* Base separates the strip from the panel below it; here they sit side by side. */
      margin-bottom: 0;

      /* Font size is deliberately NOT overridden: the base >=900px rule already sets
         --body-font-size-l (24px), which is the intended desktop tab text size. Unlike the
         heading tokens, that one stays 24px at every breakpoint. */
    }

    .tabs-list[role='tablist'] button {
      /* Desktop tab text is 24px. It has to be set HERE, on the button: buttons.css gives
         every `button` an explicit `font-size: var(--btn-font-size)`, and a direct
         declaration always beats inheritance — so the base rule's font-size on `.tabs-list`
         never reaches the label. (That makes the base declaration a no-op for the
         horizontal skin too; left alone here rather than restyling shipped pages.) */
      font-size: var(--body-font-size-l);

      /* Long labels wrap in a fixed-width rail instead of overflowing it. */
      white-space: normal;
      text-align: left;
      padding: var(--space-s) var(--space-m);

      /* Active indicator moves from the bottom edge to the leading edge. */
      border-bottom: none;
      border-inline-start: var(--btn-border-width) solid var(--border-color);
    }

    .tabs-list[role='tablist'] button[aria-selected='true'] {
      border-bottom: none;
      border-inline-start: var(--btn-border-width) solid var(--digicert-blue);
    }

    /* Panels move to the right column. They still share ONE grid cell so the
       tallest defines the height and switching tabs causes no layout shift. */
    .tabs-panel {
      grid-row: 1;
      grid-column: 2;
    }
  }
}