/* z-index variables */
:root {
  --negative-z-index: -1;
  --no-z-index: 0;
  --z-index-base: 1;
  --z-index-hero-overlay: 2;
  --z-index-article-header: 3;
  --z-index-hero-icon: 4;
  --z-index-page-dropdown: 9;
  --z-index-header: 10;
  --z-index-header-overlay: 10;
  --z-index-header-logo: 11;
  --z-index-header-navigation: 11;
  --z-index-footer: 8;
  --z-index-header-dropdown: 12;
  --z-index-overlay: 20;
  --z-index-dialog: 30;
}

/* View transition enabled */
@view-transition {
  navigation: auto;
}

body * {
  box-sizing: border-box;
}

body {
  display: none;
  margin: 0;
  font: var(--Body-Base);
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100vw;
  background: var(--Background-Neutral-Subtle-Fixed, #f9f9f7);

  &.appear {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }

  &.hide-scrollbar {
    overflow-y: hidden;
  }
}

main {
  margin: 0 auto;

  /* clip only X: keep horizontal containment without clipping absolute
     dropdowns/calendars that extend past main into the footer area */
  overflow-x: clip;
  flex: 1 0 auto;
  width: 100%;
}

.section {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.section.section-hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

.section:not(:has(.hero, .mini-hero, .hero-blog, .livestory, .livestory-form)) {
  padding-inline: var(--Layout-Section-Margin-Horizontal-Padding, 4rem);
  padding-block: var(--Layout-Section-Vertical-Padding, 4rem);
}

.section.fragment-container {
  padding: 0;

  .fragment-wrapper {
    padding: 0;

    > .fragment {
      padding-inline: var(--Layout-Section-Margin-Horizontal-Padding, 4rem);
      padding-block: var(--Layout-Section-Vertical-Padding, 4rem);
    }
  }
}

@media (width >= 1200px) {
  .editorial {
    &
      .section:not(
        :has(.hero, .mini-hero, .hero-blog, .livestory, .livestory-form)
      ) {
      padding-block: calc(var(--Space-1000-80, 5rem) / 2);

      &:last-of-type {
        padding-bottom: var(--Space-1000-80, 5rem);
      }
    }
  }
}

.js-focus-visible {
  .section.accordion-container {
    display: flex;
    flex-direction: column;
    gap: var(--Article-Faq-Widget-Gap-Accordion, 1rem);
  }
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status='loaded'],
footer .footer[data-block-status='loaded'] {
  visibility: visible;
}

button {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
}

p,
input,
ul,
ol,
dl,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

main .section.text-block-container.number-block-container.bg-dark-gray {
  background-color: var(--Unipol-Grayscale-50);
}

main .section.text-block-container.number-block-container.bg-white {
  background-color: var(--Unipol-Moon-Yellow-50);
}

/* Exclude .btn, .navigation-pill, .link-btn: may render as <a> and have their own focus/hover colors */
a:not(
  .btn,
  .navigation-pill,
  .link-btn,
  .navigation-tab-unica,
  .link-tile-icon-button,
  .category-tab,
  .ai-results-widget-source-card
) {
  color: var(--Link-Button-Link-Default-Text, #001c35);
  font: var(--Single-Line-Body-Link);
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;

  &:hover {
    color: var(--Link-Button-Link-Hover-Text);
  }

  /* Suppress default focus ring on mouse focus; ring only via :focus-visible */
  &:focus {
    outline: none;
  }

  /* Focused state — keyboard/a11y focus only */
  &:focus-visible {
    outline: var(--Link-Button-Link-Focused-Border-Focus, 2px) solid
      var(--Link-Button-Link-Focused-Border);
    border-radius: var(--Radius-9999);
    color: var(--Link-Button-Link-Focused-Text);
  }

  /* Pressed state */
  &:active {
    color: var(--Link-Button-Link-Pressed-Text);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* WCAG 2.4.1 — first focusable control; must stay outside `header .header`
   visibility:hidden so it remains in the tab order from page entry. */
.skip-link {
  position: absolute;
  inset-inline-start: var(--Space-350-16, 1rem);
  inset-block-start: var(--Space-350-16, 1rem);
  z-index: calc(var(--z-index-dialog) + 1);
  padding: var(--Space-300-12, 0.75rem) var(--Space-350-16, 1rem);
  background: var(--Background-Neutral-Subtle-Fixed, #f9f9f7);
  color: var(--Link-Button-Link-Default-Text, #001c35);
  font: var(--Single-Line-Body-Link, inherit);
  text-decoration: underline;
  border-radius: var(--Radius-100-4, 0.25rem);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.skip-link:focus,
.skip-link:focus-visible {
  clip-path: none;
  width: auto;
  height: auto;
  overflow: visible;
  outline: var(--Link-Button-Link-Focused-Border-Focus, 2px) solid
    var(--Border-Key-Brand-Mild-Focused, #006dcc);
  outline-offset: var(--Space-100-4, 0.25rem);
}

/* Reveal: critical hide only — keyframes/animation in animations.css (lazy) */
html:not(.adobe-ue-preview, .adobe-ue-edit) {
  .reveal-in,
  .reveal-in-up {
    opacity: 0;
  }

  .reveal-in-up {
    transform: translateY(80px);
  }
}

html:has(.adobe-ue-preview, .adobe-ue-edit) {
  & body {
    min-height: unset;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-in,
  .reveal-in-up {
    opacity: 1 !important;
    transform: none !important;
  }
}