/*
 * 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('reset.css');

:root {
  /* Colors */
  --primary-color: #670038;
  --primary-light: #c299af;
  --primary-accent: #ece3e5;
  --secondary-color: #72595e;
  --secondary-light: #aa979c;
  --secondary-accent: #c7bdbf;
  --secondary-medium-grey: #e3dedf;
  --secondary-light-grey: #f7f5f5;
  --tertiary-color: #f5f1f2;
  --luxury-grey: #a7a9b4;
  --luxury-dark-grey: #63666f;
  --primary-color-lighten: rgba(98 98 121 / 12.5%);
  --primary-color-svg-filter: invert(18%) sepia(17%) saturate(1944%) hue-rotate(264deg) brightness(93%) contrast(95%);
  --color-tertiary: #eae3d4;
  --body-color: #3a3a3a;
  --platinum: #e7e7e7;
  --light-grey: #f6f6f6;
  --grey: #aaa;
  --dark-grey: #797676;
  --black: #000;
  --white: #fff;
  --grey-blue: #36758d;
  --success: #28a745;
  --error: #d3636a;
  --error-highlight: #f9e1e2;
  --input-placeholder: #7f7a7a;


  /* Blog Colors (only?) */
  --seller-advice: rgb(240 240 224);
  --home-improvement: rgb(252 245 217);
  --finance: rgb(247 232 229);
  --lifestyle: rgb(229 249 247);
  --general: rgb(229 222 227);
  --buyer-advice: rgb(228 232 234);
  --grey-blog-category: #aaa;

  /* Needed? */
  --secondary-grey: #EFEFEF;
  --transparent: #FFFFFFE6;

  /* Fonts */
  --font-family-primary: 'Manrope', 'Manrope Fallback', 'Arial', sans-serif;
  --font-family-secondary: 'Marcellus', 'Marcellus Fallback', 'Times New Roman', serif;
  --font-family-luxury: 'Montserrat', 'Montserrat Fallback', 'Arial', sans-serif;
  --font-family-fontawesome: 'FontAwesome';
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Headings */
  --heading-font-size-xxxxl: 76px;
  --heading-font-size-xxxl: 57px;
  --heading-font-size-xxl: 43px;
  --heading-font-size-xl: 32px;
  --heading-font-size-l: 24px;
  --heading-font-size-m: 18px;
  --heading-font-size-s: 16px;
  --heading-font-size-xs: 12px;
  --heading-font-size-xxs: 10px;

  /* Body */
  --body-font-size-xxxl: 40px;
  --body-font-size-xxl: 36px;
  --body-font-size-xl: 24px;
  --body-font-size-l: 20px;
  --body-font-size-m: 18px;
  --body-font-size-s: 16px;
  --body-font-size-xs: 14px;
  --body-font-size-xxs: 12px;

  /* Line heights */
  --line-height-xs : 1.15em;
  --line-height-s  : 1.25em;
  --line-height-m   : 1.5em;
  --line-height-l   : 2em;
  --line-height-xl   : 2.5em;
  --line-height-xxl: 2.9em;

  /* Common spacing values */
  --letter-spacing-xxxs : 0.015em;
  --letter-spacing-xxs : 0.03em;
  --letter-spacing-xs : 0.04em;
  --letter-spacing-s  : 0.06em;
  --letter-spacing-reg: 0.07em;
  --letter-spacing-m  : 0.09em;
  --letter-spacing-l  : 0.13em;
  --letter-spacing-xl : 0.17em;
  --letter-spacing-xxl: 0.2em;

  /* Common dimensions */
  --full-page-width: 100vw;
  --wide-page-width: 1500px;
  --normal-page-width: 1350px;

  /* nav height */
  --nav-height: 65px;
  --section-padding: 15px;
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-family-primary);
  font-weight: 400;
  font-size: var(--body-font-size-m);
  text-align: left;
}

body {
  max-width: var(--full-page-width);
  background-color: var(--white);
  display: none;
}

body.no-scroll {
  overflow-y: hidden;
}

body.appear {
  display: block;
}

h2 {
  font-family: var(--font-family-secondary);
  font-size: var(--heading-font-size-l);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-m);
}

h3 {
  font-family: var(--font-family-primary);
  font-size: var(--heading-font-size-m);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-m);
}

h4 {
  font-family: var(--font-family-primary);
  font-size: var(--heading-font-size-xs);
  font-weight: var(--font-weight-semibold);
}

h5 {
  font-family: var(--font-family-primary);
  font-size: var(--heading-font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-xs);
  line-height: var(--line-height-m);
}

p, span, input {
  font-family: var(--font-family-primary);
  font-size: var(--body-font-size-m);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-reg);
  line-height: var(--line-height-m);
  color: var(--body-color);
}

p {
  margin-bottom: 1.5em;
}

b, strong {
  font-weight: var(--font-weight-bold);
}

i {
  font-style: italic;
}

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

a:active, a:hover {
  color: inherit;
  text-decoration: none;
}

main .section {
  max-width: var(--normal-page-width);
  margin: 0 auto 3.5em;
  padding-left: var(--section-padding);
  padding-right: var(--section-padding);
}

main .section.no-margin {
  margin: 0 auto;
}

main .section.wide {
  max-width: var(--wide-page-width);
}

/* TODO: Do we need this? */
main .section.formatted-text * {
  letter-spacing: normal;
  line-height: var(--line-height-m);
  color: var(--body-color);
}

main .section.formatted-text h3 {
  letter-spacing: 0.5px;
  font-weight: var(--font-weight-bold);
}

main .section.page-width-two-thirds {
  max-width: 100%;
}

main .section.numeric-list ol {
  display: block;
  list-style-type: decimal;
  padding-left: 0;
  margin-left: 1em;
  margin-top: 0;
  margin-bottom: 1rem;
}

main .section.numeric-list li {
  padding-left: 1em;
  margin-bottom: 1.5em;
}

main .section.disc-list ul {
  display: block;
  list-style-type: disc;
  padding-left: 0;
  margin-left: 1em;
  margin-top: 0;
  margin-bottom: 1rem;
}

main .section.disc-list li {
  padding-left: 1em;
  margin-bottom: 1.5em;
}

/* End to do check */

main .section.full-width {
  max-width: var(--full-page-width);
}

main .section.full-width > div {
  max-width: var(--normal-page-width);
  margin: 0 auto;
}

main .section.full-bleed {
  padding: 0;
  max-width: var(--full-page-width);
}

main .section.full-bleed div {
  max-width: var(--full-page-width);
}

main .section.full-bleed picture img {
  width: 100%;
  height: auto;
}

main .section.grey-background {
  background: var(--light-grey);
}

main .section.tertiary-background {
  background: var(--tertiary-color);
}

main .section.white-background {
  background: var(--white);
}

main .section.top-border {
  border-top: 1px solid var(--body-color);
}

main .section.tertiary-background.top-border {
  border-top: 1px solid var(--secondary-accent);
}

main .section.padding {
  padding-top: 3em;
  padding-bottom: 3em;
}

main .section.two-columns {
  display: flex;
  justify-content: space-around;
  flex-flow: column wrap;
}

main .section.two-columns > div {
  flex: 0 1 40%;
}

main .section.form-header h1 {
  font-size: var(--heading-font-size-m);
  font-family: var(--font-family-proxima);
  font-weight: 700;
  line-height: 130%;
  margin-bottom: 15px;
}

main .section.form-header p {
  font-size: var(--heading-font-size-s);
  margin: 0 auto 60px;
  max-width: 420px;
}

/* Center rules for a section, but don't apply it to blocks! */
/* stylelint-disable-next-line no-descending-specificity */
main div[data-align="center"] h1,
main div[data-align="center"] h2,
main div[data-align="center"] h3,
main div[data-align="center"] h4,
main div[data-align="center"] h5,
main div[data-align="center"] h6,
main div[data-align="center"] p,
main .section.center .default-content-wrapper h1,
main .section.center .default-content-wrapper h2,
main .section.center .default-content-wrapper h3,
main .section.center .default-content-wrapper h4,
main .section.center .default-content-wrapper h5,
main .section.center .default-content-wrapper h6,
main .section.center .default-content-wrapper p {
  text-align: center;
}

/* stylelint-disable-next-line no-descending-specificity */
content-wrapper h2 {
  margin-bottom: .5em;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section .default-content-wrapper h4 {
  margin-bottom: 1.25em;
}

main .section .default-content-wrapper picture {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
}

main .section .default-content-wrapper picture img {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  object-fit: cover;
  object-position: center;
}

/* common styles */
@keyframes spinner-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-spinner {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(0 0 0 / 35%);
  align-items: center;
  justify-content: center;
}

.loading-spinner span {
  display: block;
  border: 8px solid var(--grey);
  border-top: 8px solid var(--primary-color);
  border-radius: 50%;
  animation: spinner-spin 2s linear infinite;
}

.button-container a, .button-container button.cancel {
  display: inline-block;
  font-family: var(--font-family-primary);
  font-size: var(--heading-font-size-s);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-m);
  line-height: 1;
  padding: 10px 24px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.button-container a:hover {
  background-color: var(--primary-color);
  color: var(--primary-light);
}

.button-container a:focus {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  outline: var(--primary-color) solid 2px;
  outline-offset: 3px;
}

main .section.button-primary-color .button-container a {
  background-color: var(--primary-color);
  color: var(--white);
}

main .section.button-primary-color .button-container a:hover {
  background-color: var(--white);
  border: 1px solid var(--grey);
  color: var(--black);
  box-shadow: none;
}

main .section.banner {
  margin-bottom: 0;
}

main .section.banner .default-content-wrapper {
  max-width: var(--wide-page-width);
  margin: 0 auto;
  padding: 16px;
  position: relative;
}

.text-up {
  text-transform: uppercase;
}

.btn:not(:disabled, .disabled) {
  cursor: pointer;
}

.modal {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.modal .modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--dark-grey);
  opacity: .75;
}

.modal .modal-content {
  padding: 2em 3em;
  border: 1px solid var(--grey);
  background-color: var(--white);
  z-index: 101;
}

/* stylelint-disable-next-line no-descending-specificity */
.modal .modal-content p {
  font-size: var(--body-font-size-l);
  text-align: center;
}

/* stylelint-disable-next-line no-descending-specificity */
.modal .modal-content a {
  display: inline-block;
  margin-top: 1em;
  padding: .5em 1em;
  font-size: var(--body-font-size-m);
  color: var(--white);
  background-color: var(--primary-color);
}

form button[type="submit"], .button-container button {
  display: inline-block;
  padding: 13px 16px;
  margin: 16px 0;
  height: 50px;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  line-height: var(--line-height-m);
  color: var(--white);
  background-color: var(--primary-color);
  border: 1px solid var(--grey);
}

form button[type="submit"]:hover {
  background-color: var(--white);
  color: var(--body-color);
}

@media screen and (max-width: 599px) {
  .section.hide-on-mobile,
  .section .block.hide-on-mobile {
    display: none;
  }
}

@media screen and (min-width: 600px) {
  h2 {
    font-size: var(--heading-font-size-xxl);
    line-height: var(--line-height-s);
  }

  main .section.narrow > div {
    max-width: 75%;
    margin: 0 auto;
  }

  main .section.page-width-two-thirds {
    max-width: 67%;
  }

  main .section.banner .default-content-wrapper .button-container {
    position: absolute;
    top: 16px;
    right: 16px;
  }
}

@media screen and (min-width: 900px) {
  main .section.two-columns {
    flex-direction: row;
  }
}

@media screen and (min-width: 1200px) {
  :root {
    --nav-height: 140px;
  }
}

@font-face {
  font-family: 'Manrope Fallback';
  font-style: normal;
  font-weight: 200;
  src: local('Arial');
  ascent-override: 106.45%;
  descent-override: 29.96%;
  line-gap-override: 0.00%;
  size-adjust: 100.14%;
}

@font-face {
  font-family: 'Manrope Fallback';
  font-style: normal;
  font-weight: 300;
  src: local('Arial');
  ascent-override: 104.55%;
  descent-override: 29.42%;
  line-gap-override: 0.00%;
  size-adjust: 101.96%;
}

@font-face {
  font-family: 'Manrope Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Arial');
  ascent-override: 102.74%;
  descent-override: 28.91%;
  line-gap-override: 0.00%;
  size-adjust: 103.76%;
}

@font-face {
  font-family: 'Manrope Fallback';
  font-style: normal;
  font-weight: 500;
  src: local('Arial');
  ascent-override: 100.97%;
  descent-override: 28.41%;
  line-gap-override: 0.00%;
  size-adjust: 105.58%;
}

@font-face {
  font-family: 'Manrope Fallback';
  font-style: normal;
  font-weight: 600;
  src: local('Arial');
  ascent-override: 99.26%;
  descent-override: 27.93%;
  line-gap-override: 0.00%;
  size-adjust: 107.40%;
}

@font-face {
  font-family: 'Manrope Fallback';
  font-style: normal;
  font-weight: 700;
  src: local('Arial');
  ascent-override: 97.62%;
  descent-override: 27.47%;
  line-gap-override: 0.00%;
  size-adjust: 109.20%;
}

@font-face {
  font-family: 'Manrope Fallback';
  font-style: normal;
  font-weight: 800;
  src: local('Arial');
  ascent-override: 96.02%;
  descent-override: 27.02%;
  line-gap-override: 0.00%;
  size-adjust: 111.02%;
}

@font-face {
  font-family: 'Marcellus Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Arial');
  ascent-override: 95.27%;
  descent-override: 27.36%;
  line-gap-override: 0.00%;
  size-adjust: 102.25%;
}

@font-face {
  font-family: 'Montserrat Fallback';
  font-style: normal;
  font-weight: 200;
  src: local('Arial');
  ascent-override: 87.08%;
  descent-override: 22.58%;
  line-gap-override: 0.00%;
  size-adjust: 111.17%;
}

@font-face {
  font-family: 'Montserrat Fallback';
  font-style: normal;
  font-weight: 300;
  src: local('Arial');
  ascent-override: 86.13%;
  descent-override: 22.33%;
  line-gap-override: 0.00%;
  size-adjust: 112.39%;
}

@font-face {
  font-family: 'Montserrat Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Arial');
  ascent-override: 84.97%;
  descent-override: 22.03%;
  line-gap-override: 0.00%;
  size-adjust: 113.92%;
}

@font-face {
  font-family: 'Montserrat Fallback';
  font-style: normal;
  font-weight: 500;
  src: local('Arial');
  ascent-override: 83.59%;
  descent-override: 21.67%;
  line-gap-override: 0.00%;
  size-adjust: 115.80%;
}

@font-face {
  font-family: 'Montserrat Fallback';
  font-style: normal;
  font-weight: 700;
  src: local('Arial');
  ascent-override: 80.59%;
  descent-override: 20.90%;
  line-gap-override: 0.00%;
  size-adjust: 120.11%;
}