/*
 * 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.
 */

:root {
  /* Structural tokens — brand colors/fonts live in styles/themes/
   * Breakpoints (mobile-first min-width, new/modified CSS): 576px, 768px, 992px, 1200px — see AGENTS.md */

  /* layout */
  --utility-bar-height: 0rem;
  --section-content-max-width: 100rem;
  --section-inline-padding: 1rem;
  --nav-content-max-width: 79.25rem;
  --nav-inline-padding: 0;

  /* body sizes */
  --body-font-size: 1rem;
  --body-line-height: 1.5;

  /* heading sizes */
  --heading-font-size-xxl: 2rem;
  --heading-font-size-xl: 1.5556rem;
  --heading-font-size-l: 1.3333rem;
  --heading-font-size-m: 1.1111rem;
  --heading-font-size-s: 1.25rem;
  --heading-font-size-xs: 1rem;
  --heading-line-height-xxl: 2.3333rem;
  --heading-line-height-xl: 2.5rem;
  --heading-line-height-l: 2.1111rem;
  --heading-line-height-m: 1.7778rem;
  --heading-line-height-s: 1.2rem;
  --heading-line-height-xs: 1.2rem;

  /* nav */
  --nav-height: 4rem;
  --nav-sections-background-color: var(--background-color);
  --nav-link-hover-border: transparent;
  --nav-cta-color: var(--link-color);
  --nav-cta-hover-color: var(--link-hover-color);
  --nav-cta-secondary-hover-color: var(--light-color);

  /* nav hamburger transition */
  --nav-hamburger-transition-duration: 0.2s;
  --nav-hamburger-transition-easing: ease;

  /* nav sections transition */
  --nav-sections-transition-duration: 0.5s;
  --nav-sections-transition-easing: ease;
  --nav-sections-transition-max-height: calc(100vh - var(--nav-height));

  /* Content card */
  --content-card-padding: 1rem;
  --content-card-image-aspect-ratio: 750 / 318; /* reserves the image box before load; matches blog image renditions */
  --content-card-heading-color: var(--text-color);
  --content-card-link-color: var(--link-color);
  --content-card-radius: 0.125rem;
  --content-card-shadow: 0 0 1.875rem 0 rgb(141 151 158 / 20%);
  --content-card-hover-scale: 1.03;
  --content-card-hover-duration: 420ms;
  --content-card-hover-easing: cubic-bezier(0.17, 0.84, 0.44, 1);
  --content-card-title-size: 1.25rem;
  --content-card-title-line-height: 1.75rem;
  --content-card-title-size-large: 1.5rem;
  --content-card-title-line-height-large: 2rem;
  --content-card-title-margin-bottom: 1.5rem;
  --content-card-link-size: 0.875rem;
  --content-card-link-line-height: 0.875rem;
  --content-card-link-size-large: 0.9375rem;
  --content-card-link-line-height-large: 0.9375rem;
  --content-card-link-gap: 0.438rem;
  --content-card-link-padding-bottom: 0.188rem;
  --content-card-link-icon-size: 0.875rem;
  --content-card-link-icon-offset: -0.125rem;
  --content-card-link-hover-border-width: 0.125rem;

  /* Content card list layout (shared by Featured Articles and All Articles) */
  --content-card-max-width: 25rem; /* single-column cap below 768px */
  --content-card-gap-column: 1.5rem;
  --content-card-gap-row: 2rem;
  --content-card-heading-gap: 1.5rem; /* heading → first card, collapsed with the heading's own margin-bottom */

  /* Feature articles */
  --featured-articles-card-border-width: 0.4375rem;
  --featured-articles-section-padding-top: 1.5rem;
  --featured-articles-section-padding-bottom: 2.5rem;

  /* Pagination blog */
  --pagination-gap: 0.5rem;
  --pagination-margin-top: 0.5rem;
  --pagination-button-size: 2.75rem;
  --pagination-button-padding-inline: 0.75rem;
  --pagination-button-radius: 0.25rem;
  --pagination-button-disabled-opacity: 0.4;
  --pagination-focus-offset: 0.125rem;

  /* Pagination colors default to --link-color / --background-color in the block CSS
   * (resolved per element so body.{theme} overrides apply). Themes may set
   * --pagination-button-color, --pagination-button-background-color,
   * --pagination-button-hover-background-color, --pagination-button-current-color,
   * --pagination-button-current-background-color,
   * and --pagination-focus-color. */
}

@media (width >=768px) {
  :root {
    /* heading sizes */
    --heading-font-size-xxl: 2.5rem;
    --heading-font-size-xl: 2rem;
    --heading-font-size-l: 1.5rem;
    --heading-line-height-xxl: 4rem;
    --heading-line-height-xl: 3.2222rem;
    --heading-line-height-l: 2.3889rem;

    /* content card list: roomier rows once cards sit in 2-3 columns */
    --content-card-gap-row: 3rem;

    /* roomier gap above the pagination controls */
    --pagination-margin-top: 2.5rem;
  }
}

@media (width >=992px) {
  :root {
    /* heading sizes */
    --heading-font-size-xxl: 3rem;
    --heading-font-size-xl: 2.2222rem;
    --heading-font-size-l: 1.7778rem;
    --heading-font-size-m: 1.3333rem;
    --heading-line-height-xxl: 4.7778rem;
    --heading-line-height-xl: 3.5556rem;
    --heading-line-height-l: 2.8333rem;
    --heading-line-height-m: 2.1111rem;

    /* Featured Articles band: taller top padding on desktop */
    --featured-articles-section-padding-top: 3.5rem;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
}

body.appear {
  display: block;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.4445rem;
  font-family: var(--heading-font-family);
  font-weight: 500;
  scroll-margin-top: calc(var(--nav-height) + var(--utility-bar-height));
}

h1 {
  font-size: var(--heading-font-size-xxl);
  line-height: var(--heading-line-height-xxl);
}

h2 {
  font-size: var(--heading-font-size-xl);
  line-height: var(--heading-line-height-xl);
}

h3 {
  font-size: var(--heading-font-size-l);
  line-height: var(--heading-line-height-l);
}

h4 {
  font-size: var(--heading-font-size-m);
  line-height: var(--heading-line-height-m);
}

h5 {
  font-size: var(--heading-font-size-s);
  line-height: var(--heading-line-height-s);
}

h6 {
  font-size: var(--heading-font-size-xs);
  line-height: var(--heading-line-height-xs);
}

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

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* buttons */
.button-links {
  & a {
    display: inline-block;
    text-decoration: none;
  }

  & button {
    border: 0;
    cursor: pointer;
  }

  & a,
  & button {
    background-color: var(--button-background-color);
    border-radius: 0.25rem;
    color: var(--button-text-color);
    padding: 0.2778rem 0.8889rem;
    text-align: center;
  }

  & a.button[aria-disabled="true"],
  & button.button:disabled {
    cursor: not-allowed;
    pointer-events: none;
  }
}

/* utilities */

/* Screen-reader-only text: hidden visually, kept in the accessibility tree by a 1px box. */
.visually-hidden {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

main {
  padding-top: calc(var(--utility-bar-height) + var(--nav-height));

  & img {
    max-width: 100%;
    width: auto;
    height: auto;
  }

  & .icon {
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;
  
    & img {
      height: 100%;
      width: 100%;
    }
  }

  & > .section {
    padding: 2.5rem 0;

    &:first-of-type {
      padding-top: 0;
    }

    /* utility section metadata */
    &.align-center {
      text-align: center;
  
      & > .default-content-wrapper img {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    }
  
    &.align-left {
      text-align: left;
  
      & > .default-content-wrapper img {
        display: block;
        margin-left: 0;
        margin-right: auto;
      }
    }
  
    &.align-right {
      text-align: right;
  
      & > .default-content-wrapper img {
        display: block;
        margin-left: auto;
        margin-right: 0;
      }
    }

    & > div {
      box-sizing: border-box;
      max-width: var(--section-content-max-width);
      margin: auto;
      padding: 0 var(--section-inline-padding);
    }
  }
}