/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

 @import url('./tokens.css');
 @import url('./brand.css');
 @import url('./grid.css');
 @import url('./button.css');
 @import url('./spacing.css');
 @import url('./typography.css');

 * {
  box-sizing: border-box;
 }
 
 :root {
   --nav-height: 64px;
   
   /* Fallback until header.js measures `main` (nav + news strip + margins). */
   --overview-main-top-offset: calc(var(--nav-height, 64px) + var(--size-40, 40px));
   --light-color: var(--background-color-alt);
 }
 
 body {
   display: none;
   margin: 0;
   background-color: var(--background-color);
   color: var(--text-color);
   font-family: var(--font-family-primary);
   font-size: var(--body-font-size-m);
   line-height: 1.6;
 }
 
 body.appear {
   display: block;
 }
 
 header .header,
 footer .footer {
   visibility: hidden;
 }
 
 header .header[data-block-status="loaded"],
 footer .footer[data-block-status="loaded"] {
   visibility: visible;
 }
 
 /* Reset margin and padding for all headings, UL, li and blockquote tags */
 p,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 dl,
 ol,
 ul,
 pre,
 blockquote {
   margin: 0;
   padding: 0;
 }
 
 main {
   overflow: hidden;
 }
 
 input,
 textarea,
 select,
 button {
   font: inherit;
 }
 
 /* links */
 a:any-link {
   color: var(--link-color);
   text-decoration: none;
   overflow-wrap: break-word;
 }
 
 a:hover {
   color: var(--link-hover-color);
   text-decoration: underline;
 }

 .section.inverted a:hover {
  color: var(--typography-inverse);
 }
 
 main img {
   max-width: 100%;
   width: auto;
   height: auto;
 }
 
 .icon {
   display: inline-block;
   height: 24px;
   width: 24px;
 }
 
 .icon img {
   height: 100%;
   width: 100%;
 }
 
 /* sections */
 
 /*
  * Section spacing utility (responsive)
  * Apply to a Franklin section: add class `section-spacing` to the section.
  *
  * Mobile Small + Mobile Large: margin 16px, padding 32px
  * Tablet + Desktop Small:      margin 24px, padding 32px
  * Desktop Large:               margin 24px, padding 56px
  * Desktop XL:                  margin 56px, padding 56px
  */
 main > .section {
   margin: var(--responsive-spacing-between-section) auto;
   padding: var(--responsive-spacing-vertical) var(--responsive-spacing-horizontal);
   max-width: calc(100% - 2 * var(--responsive-spacing-horizontal, 20px));
   display: flex;
   flex-direction: column;
   gap: var(--spacing-700);

  @media (width >= 1440px) {
    max-width: calc(100% - 2 * var(--spacing-600, 20px));
  }
  
   /* Desktop XL: 1920px+ */
   @media (width >= 1920px) {
    max-width: var(--main-max-width);
  }
 }

 /* Mobile first: sections without background have no left/right padding */
main > .section:not([class*="bg-"]) {
  padding-inline: 0;
}

/* From 1024px: sections without background get same horizontal padding as sections with background */
@media (width >= 1025px) {
  main > .section:not([class*="bg-"]) {
    padding-inline: var(--responsive-spacing-horizontal);
  }
}
 
 main > .section.reset-margin-left-right {
   margin-left: var(--spacing-0);
   margin-right: var(--spacing-0);
 }
 
 main > .section.reset-padding-left-right {
   padding-left: var(--spacing-0);
   padding-right: var(--spacing-0);
 }

 main > .section.reset-padding-top-bottom {
   padding-top: var(--spacing-0);
   padding-bottom: var(--spacing-0);
 }
 
 /* Sections background colors */
 main .section.bg-grey {
   background-color: var(--surface-page-neutral);
   border-radius: var(--radius-sm);
 }
 
 main .section.bg-light-grey {
   background-color: var(--surface-light-grey);
   border-radius: var(--radius-sm);
 }
 
 main .section.bg-dark {
   background-color: var(--surface-dark);
   border-radius: var(--radius-sm);
 }
 
 main .section.bg-accent {
   background-color: var(--surface-page-accent-1);
   border-radius: var(--radius-sm);
 }
 
 main .section.bg-light {
   background-color: var(--surface-light);
   border-radius: var(--radius-sm);
 }
 
 main .section.bg-quiet-light {
   background-color: var(--surface-section-backgrounds-quiet-light, var(--color-brand-100));
   border-radius: var(--radius-sm);
 }
 
 /* Inverted sections */
 main .section.inverted {
   color: var(--typography-inverse);
 }
 
 /* Eyebrow — shared by section-title, hero, accordion, banner, cards, embed-form, etc.
    Use --type-eyebrow-* from tokens.css; blocks should only override color, display, or spacing. */
 .eye-brow-text {
   font-family: var(--type-eyebrow-font-family);
   font-size: var(--type-eyebrow-size);
   font-weight: var(--type-eyebrow-weight);
   line-height: var(--type-eyebrow-line-height);
   letter-spacing: var(--type-eyebrow-letter-spacing);
   text-transform: var(--type-eyebrow-text-transform);
   color: var(--color-brand-300);
 }

 .section.bg-dark .eye-brow-text {
  color: var(--color-brand-400);
 }

 main .section.tag-container {
  padding: var(--spacing-600);
  max-width: calc(100% - 2 * var(--responsive-spacing-horizontal) - var(--spacing-900));
  @media (width >= 1920px) {
    max-width: calc(var(--main-max-width) - 2 * var(--responsive-spacing-horizontal));
  }
 }
 
 /* Tags — labels with asymmetric rounded corners (top-left + bottom-right) */
 .tag {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-200);
   padding: var(--spacing-300) var(--spacing-400);
   border-radius: var(--radius-8) 0 var(--radius-8) 0;
   border: var(--border-width-100) solid transparent;
   font-family: var(--font-family-accent);
   font-size: 0.75rem;
   font-style: normal;
   font-weight: 400;
   line-height: var(--line-height-104p);
   letter-spacing: var(--letter-spacing-tight);
 }
 
 .tag .icon {
   min-width: 0.75rem;
   width: 0.75rem;
   height: 0.75rem;
 }
 
 /* Outline: transparent background with border */
 .tag-outline {
   background-color: transparent;
   color: var(--tag-text-outline);
   border-color: var(--tag-border-outline);
 }
 
 /* Fill: solid background */
 .tag-fill {
   background-color: var(--color-brand-200);
   color: var(--color-white);
 }
 
 /* Glass: translucent, designed for dark backgrounds */
 .tag-glass {
   background-color: var(--tag-bg-glass);
   color: var(--tag-text-glass);
   border-color: var(--tag-border-glass);
   backdrop-filter: blur(var(--size-12));
 }
 
 /* Glass and dark variants have white text — invert icon to match */
 .tag-fill .icon img,
 .tag-glass .icon img,
 .tag-dark .icon img {
   filter: brightness(0) invert(1);
 }
 
 /* Dark: solid dark background */
 .tag-dark {
   background-color: var(--color-black);
   color: var(--typography-tertiary);
   border-color: var(--color-black);
 }
 
 /* tag as a block element styling */
 .tag.block > div,
 .tag.block > div > div {
   display: contents;
 }
 
 .default-content-wrapper h1,
 .default-content-wrapper h2,
 .default-content-wrapper h3,
 .default-content-wrapper h4,
 .default-content-wrapper h5,
 .default-content-wrapper h6 {
   margin-bottom: var(--spacing-600);
 }
 
 main :is(.default-content-wrapper) :is(ul, ol) {
   padding-inline-start: var(--spacing-500);
 }
 
 main :is(.default-content-wrapper) ul {
   list-style: disc;
 }
 
 main :is(.default-content-wrapper) ul ul {
   list-style: circle;
 }
 
 main :is(.default-content-wrapper) ul ul ul {
   list-style: square;
 }
 
main :is(.default-content-wrapper) li + li {
  margin-top: var(--spacing-100);
}

main :is(.default-content-wrapper) li > :is(ul, ol) {
  margin-top: var(--spacing-100);
}

 /* Optional hook for custom bullet icon style. */
 main :is(.default-content-wrapper) ul.list-style-custom {
   list-style: none;
   padding-inline-start: 0;
 }
 
 main :is(.default-content-wrapper) ul.list-style-custom > li {
   position: relative;
   padding-inline-start: var(--spacing-500);
 }
 
 main :is(.default-content-wrapper) ul.list-style-custom > li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0.6em;
   width: var(--size-8);
   height: var(--size-8);
   transform: translateY(-50%);
   border-radius: 50%;
  background-color: currentcolor;
 }
 
 main :is(.default-content-wrapper) ol {
   list-style-position: outside;
 }
 
 main :is(.default-content-wrapper) ol li::marker {
   font-variant-numeric: tabular-nums;
 }

/* Vertical spacing between authored richtext elements. */
main :is(.default-content-wrapper) :is(ul, ol) + p,
main :is(.default-content-wrapper) p + p,
main :is(.default-content-wrapper) p + :is(ul, ol),
main :is(.default-content-wrapper) :is(h1, h2, h3, h4, h5, h6) + p {
  margin-top: var(--spacing-400);
}

/* Strong-only lines in richtext should use Body 200 styles. */
main :is(.default-content-wrapper) :is(p, li) > strong:only-child {
  display: inline-block;
  font-size: var(--type-body-200-size);
  line-height: var(--line-height-22);
  font-weight: var(--font-weight-bold);
}

main :is(.default-content-wrapper) :is(p, li):has(strong:only-child) {
  margin-top: var(--spacing-600);
}

.tag.block p {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--spacing-200);
  margin: 0;
}