/*
 * 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 {
  --nav-height: 63px;
  --utility-bar-height: 30px;
  --breadcrumbs-height: 34px;
  --header-height: var(--nav-height);
}

@media (width >= 1320px) {
  :root {
    --header-height: calc(var(--nav-height) + var(--utility-bar-height));
  }
}

@font-face {
  font-family: Montserrat-fallback;
  size-adjust: 100%;
  src: local('Arial');
}

body,.body-text {
  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);        /* 1rem */
  line-height: var(--body-line-height);   /* 1.5rem */
  font-weight: var(--font-weight-regular);
}

body.appear, .body-text {
  display: block;
}

body.modal-open {
  overflow: hidden;
}

header {
  height: var(--header-height);
}

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

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

@media (width >= 1320px) {
  body[data-breadcrumbs] {
    --header-height: calc(var(--nav-height) + var(--utility-bar-height) + var(--breadcrumbs-height));
  }

  body:has(header.is-condensed) {
    --header-height: var(--nav-height);
  }
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-light);
  color: var(--heading-color);
  scroll-margin: var(--heading-scroll-margin);
  margin-block-start: 0;
}

:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) strong {
  font-weight: var(--font-weight-bold);
}

h1, .h1 { 
  font-size: var(--heading-font-size-xxl);
  line-height: var(--heading-line-height-xxl);
  margin-block-end: var(--heading-bottom-spacing-xxl);
}

h2, .h2 {
  font-size: var(--heading-font-size-xl);
  line-height: var(--heading-line-height-xl);
  margin-block-end: var(--heading-bottom-spacing-xl);
}

h3, .h3 { 
  font-size: var(--heading-font-size-l);
  line-height: var(--heading-line-height-l);
  margin-block-end: var(--heading-bottom-spacing-l);
}

h4, .h4 { 
  font-size: var(--heading-font-size-m);
  line-height: var(--heading-line-height-m);
  margin-block-end: var(--heading-bottom-spacing-m);
}

h5, .h5 { 
  font-size: var(--heading-font-size-s);
  line-height: var(--heading-line-height-s);
  margin-block-end: var(--heading-bottom-spacing-s);
}

h6, .h6 { 
  font-size: var(--heading-font-size-xs);
  line-height: var(--heading-line-height-xs);
  margin-block-end: var(--heading-bottom-spacing-xs);
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-block: 0 var(--content-margin-block-end);
}

blockquote {
  margin-inline-start: 0;
  padding-inline-start: var(--space-xl);
  border-inline-start: var(--space-2xs) solid var(--accent-color);
}

code,
pre {
  font-size: var(--font-size-15);
}

pre {
  padding: var(--code-block-padding);
  border-radius: var(--code-block-radius);
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

main > div {
  margin-block: var(--main-content-margin-block);
  margin-inline: var(--main-content-margin-inline);
}

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

input,
textarea,
select,
button {
  font: inherit;
}

/* links */
a {
  &:any-link {
    color: var(--link-color);
    text-decoration: none;
    overflow-wrap: break-word;
  }

  &:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
  }
}

.btn,
button {
  --btn-bg: transparent;
  --btn-color: var(--link-accent-color);
  --btn-border-color: transparent;

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--btn-icon-gap);
  max-width: 100%;
  margin-block: var(--btn-padding-block);
  font-family: var(--body-font-family);
  font-style: normal;
  color: var(--btn-color);
  text-decoration: none;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);

  &:is(:hover, :focus-visible) {
    text-decoration: none;
  }

  &:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
  }

  &:is(.btn-primary, .btn-secondary, .btn-link, .btn-link-secondary) {
    background-color: var(--btn-bg);
    color: var(--btn-color);
    border-color: var(--btn-border-color);
  }

  /* pill-shaped buttons: primary + secondary */
  &:is(.btn-primary, .btn-secondary) {
    border: var(--btn-border-width) solid var(--btn-border-color);
    border-radius: var(--button-radius);
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-bold);
    line-height: var(--btn-line-height);
    letter-spacing: var(--btn-letter-spacing);
    text-align: center;
    text-transform: uppercase;
  }

  &.btn-primary {
    --btn-bg: var(--accent-color);
    --btn-color: var(--accent-text-color);
    --btn-border-color: var(--accent-color);

    &:is(:hover, :focus-visible) {
      --btn-bg: var(--dark-color);
      --btn-color: var(--background-color);
      --btn-border-color: var(--background-color);
    }

    &:is([aria-disabled="true"], .disabled) {
      --btn-bg: var(--light-color);
      --btn-color: var(--muted-color);
      --btn-border-color: var(--light-color);

      cursor: not-allowed;
      pointer-events: none;
    }
  }

  &.btn-secondary {
    --btn-bg: var(--dark-color);
    --btn-color: var(--background-color);
    --btn-border-color: var(--background-color);

    &:is(:hover, :focus-visible) {
      --btn-bg: var(--accent-color);
      --btn-color: var(--accent-text-color);
      --btn-border-color: var(--accent-color);
    }

    &:is([aria-disabled="true"], .disabled) {
      --btn-bg: var(--light-color);
      --btn-color: var(--muted-color);
      --btn-border-color: var(--light-color);

      cursor: not-allowed;
      pointer-events: none;
    }
  }

  /* underline links: link + link-secondary */
  &:is(.btn-link, .btn-link-secondary) {
    border-block-end: var(--btn-link-underline-width) solid var(--btn-border-color);
  }

  &.btn-link {
    --btn-color: var(--heading-color);

    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--btn-icon-gap);
    white-space: nowrap;
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;

    &:is(:hover, :focus-visible) {
      --btn-color: var(--link-accent-color);
      --btn-border-color: var(--link-accent-color);
    }

    &:is([aria-disabled="true"], .disabled) {
      --btn-color: var(--muted-color);
      --btn-border-color: transparent;

      cursor: not-allowed;
      pointer-events: none;
    }
  }

  &.btn-link-secondary {
    --btn-color: var(--heading-color);

    align-items: baseline;
    border-block-end-width: var(--btn-link-secondary-underline-width);
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-bold);
    line-height: var(--btn-link-secondary-line-height);
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;

    &:is(:hover, :focus-visible) {
      --btn-color: var(--link-accent-color);
      --btn-border-color: var(--link-accent-color);
    }

    &:is([aria-disabled="true"], .disabled) {
      --btn-color: var(--muted-color);
      --btn-border-color: transparent;

      cursor: not-allowed;
      pointer-events: none;
    }
  }
}

/*
 * Generic text/search input + checkbox styling, shared by any block that needs a search
 * box or a checkbox filter list (e.g. blocks/asset-search) -- centralized here per
 * DEVELOPMENT.md §2 ("use global authoring pattern... don't create duplicate code")
 * rather than re-declared per block. A block-scoped rule with higher selector specificity
 * (e.g. product-filter's own checkbox styling) still wins where it already exists.
 */
:is(input[type="search"], input[type="text"], input[type="email"], input[type="tel"]) {
  box-sizing: border-box;
  width: 100%;
  block-size: var(--control-height);
  border: var(--control-border-width) solid var(--border-color);
  border-radius: var(--control-radius);
  padding-block: var(--space-xs);
  padding-inline: var(--space-md);
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--font-xs);
  line-height: var(--leading-2xs);
  transition: border-color var(--transition-base);

  &::placeholder {
    color: var(--muted-color);
  }

  &:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-color: var(--link-accent-color);
  }
}

input[type="checkbox"] {
  position: relative;
  appearance: none;
  flex-shrink: 0;
  width: var(--size-16);
  height: var(--size-16);
  border: var(--control-border-width) solid var(--border-color);
  border-radius: var(--control-radius);
  background-color: var(--background-color);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);

  &:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);

    &::after {
      content: "";
      position: absolute;
      inset-inline-start: var(--size-4);
      inset-block-start: var(--size-1);
      width: var(--size-4);
      height: var(--size-8);
      border-inline-end: var(--space-px) solid var(--heading-color);
      border-block-end: var(--space-px) solid var(--heading-color);
      transform: rotate(45deg);
    }
  }

  &:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
  }
}

.icon {
  display: inline-block;
  height: var(--icon-size);
  width: var(--icon-size);

  img,
  svg {
    height: 100%;
    width: 100%;
  }
}

/*
 * smaller than the site-wide 24px .icon default -- verified live against stanleyaccess.com's
 * "Browse All Applications" (14px). Kept flat (not nested under .btn above) so it stays after
 * the .icon/.icon svg rules above in source order -- nesting it under .btn would put this
 * higher-specificity override before them, which stylelint's no-descending-specificity flags.
 */
.btn.btn-link .icon {
  width: var(--btn-link-icon-size);
  height: var(--btn-link-icon-size);
  padding-block-end: var(--space-sm);
}

.btn.btn-link-secondary .icon,
.btn.btn-link-secondary .icon svg {
  width: var(--btn-link-icon-size);
  height: var(--btn-link-icon-size);
}

@media (width >= 880px) {
  :root {
    --section-padding-inline: var(--space-xl);
  }
}

/* sections */
.section {
  --section-margin-block-start: var(--section-margin-block);
  --section-margin-block-end: var(--section-margin-block);

  main > & {
    margin-block: var(--section-margin-block-start) var(--section-margin-block-end);
    margin-inline: 0;

    &:first-of-type {
      --section-margin-block-start: 0;
    }

    &:not([data-section-status="loaded"]) {
      display: none;
    }

    > div {
      max-width: var(--container-max-width);
      margin: auto;
      padding: 0 var(--section-padding-inline);
    }
  }

  /* section metadata */
  main &:is(.light, .highlight) {
    background-color: var(--light-color);
    margin: 0;
    padding: var(--section-padding-block) 0;
  }

  &.space-section-xs { margin-bottom: var(--space-section-xs); }
  &.space-section-sm { margin-bottom: var(--space-section-sm);}
  &.space-section-md { margin-bottom: var(--space-section-md); }
  &.space-section-lg { margin-bottom: var(--space-section-lg); }
  &.space-section-xl { margin-bottom: var(--space-section-xl); }
  &.space-section-2xl { margin-bottom: var(--space-section-2xl); }
  &.space-section-3xl { margin-bottom: var(--space-section-3xl); }
  &.space-section-4xl { margin-bottom: var(--space-section-4xl); }

  &.section-padding-xs { padding-block: var(--space-section-xs); }
  &.section-padding-sm { padding-block: var(--space-section-sm); }
  &.section-padding-md { padding-block: var(--space-section-md); }
  &.section-padding-lg { padding-block: var(--space-section-lg); }
  &.section-padding-xl { padding-block: var(--space-section-xl); }
  &.section-padding-2xl { padding-block: var(--space-section-2xl); }

  &.section-full-width {
    max-width: unset;

    > div {
      max-width: unset;
      padding: 0;
    }
  }

  &.section-width-sm > div {
    max-width: var(--container-max-width-sm);
    margin-inline: auto;
  }

  &.section-width-md > div {
    max-width: var(--container-max-width-md);
    margin-inline: auto;
  }

  /*
   * Authored-picture full-bleed background, same absolute-position + negative-z-index
   * technique as blocks/hero's default variation -- no CSS background-image url(), so the
   * image stays real markup (alt text, lazy-loading, createOptimizedPicture all still apply).
   * Scoped to > .default-content-wrapper (not a bare "picture"/"img" anywhere in the section):
   * a block authored after the background picture/heading/paragraph -- e.g. a logo row -- gets
   * its own sibling wrapper from decorateSections, and a section-wide img rule would otherwise
   * blow up that block's own images to the section's full size too.
   */
  &.section-image-bg {
    --section-image-bg-content-max-width: 38.125rem;

    position: relative;
    isolation: isolate;

    .columns-wrapper {
      max-width: var(--section-image-bg-content-max-width);
      margin-inline: auto;
    }

    > .default-content-wrapper {
      picture {
        position: absolute;
        z-index: -2;
        inset: 0;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background: linear-gradient(90deg, #181819 9.21%, rgb(24 24 25 / 0%) 206.13%);
    }
  }

  &.section-flex {
    display: flex;
    flex-direction: column;
    gap: var(--section-flex-gap);

    > div {
      max-width: unset;
      margin: 0;
      padding: 0;
    }

    @media (width >= 1100px) {
      flex-direction: row;
      align-items: flex-start;

      > div {
        flex: 1;
        min-width: 0;
      }
    }
  }

  &.section-flex.flex-40-60 {
    gap:0;

    @media (width >= 1100px) {
      > div:first-child {
        flex: 1 1 42.635%;
      }

      > div:last-child {
        flex: 1 1 57.364%;
      }
    }
  }

  &.section-flex:not(.section-full-width) {
    max-width: var(--container-max-width);
    margin-block: var(--section-margin-block-start) var(--section-margin-block-end);
    margin-inline: auto;
    padding: 0 var(--section-padding-inline);
  }

  /*
   * section-full-width opts .section out of the rule above so its background can bleed to the
   * viewport edge, but that leaves a section-flex row with no inline padding at all -- capping
   * .section itself would recreate the bleed problem. Insetting via padding keeps .section (and
   * its background) at 100% width while the flex row still reads as a normal container.
   */
  &.section-flex.section-full-width {
    padding-inline: max(var(--section-padding-inline), calc((100% - var(--container-max-width)) / 2));
  }

  /*
   * Reassign the margin tokens rather than the margin properties: the rules applying them sit on
   * higher-specificity selectors (.section-flex:not(...), main >), which a plain class here could
   * not out-specify without escalating selectors or !important.
   */
  &.section-margin-none {
    --section-margin-block-start: 0;
    --section-margin-block-end: 0;
  }

  &.section-margin-top-none {
    --section-margin-block-start: 0;
  }

  &.section-margin-bottom-none {
    --section-margin-block-end: 0;
  }

  &.section-flex.flex-30-70 {
    @media (width >= 1100px) {
      > div:first-child {
        flex: 3;
      }

      > div:last-child {
        flex: 7;
      }
    }
  }

  &.section-flex.flex-gap-l {
    @media (width >= 1100px) {
      --section-flex-gap: 12rem;
    }
  }

  &.grid-sm {
    --grid-sm-max-width: 53.125rem;

    max-width: var(--grid-sm-max-width);
    margin-block: var(--section-margin-block-start) var(--section-margin-block-end);
    margin-inline: auto;
  }

  &.section-heading-center :is(h1, h2, h3, h4, h5, h6) {
    text-align: center;
  }

  &.section-title-row > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);

    h1 {
      margin-block-end: 0;
      font-size: var(--font-xl);
      line-height: var(--leading-md);
      font-weight: var(--font-weight-bold);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  button {
    transition: none;
  }
}

mark {
  padding-inline: var(--space-3xs);
  background-color: var(--accent-color);
  color: var(--accent-text-color);
  font-style: normal;
}

.eyebrow {
  font-size: var(--font-3xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--ls-075);
  color: var(--text-color);
  margin-block-end: var(--space-2xs);

  mark,
  strong {
    font-style: normal;
    font-weight: inherit;
  }
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}