/*
 * 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 {
    /* colors */

    /* aqua */
    --color-aqua-100: #e2f7fe;
    --color-aqua-200: #c1f0fe;
    --color-aqua-300: #58d4fc;
    --color-aqua-500: #00b8ea; /* default */
    --color-aqua-700: #1987b2;
    --color-aqua-800: #126382; /* primary button */
    --color-aqua-900: #0b3e50;

    /* midnight */
    --color-midnight-100: #e6e9ea;
    --color-midnight-200: #cdd3d5;
    --color-midnight-300: #9ba7ab;
    --color-midnight-500: #6a7c81;
    --color-midnight-700: #385057;
    --color-midnight-800: #1f3a42;
    --color-midnight-900: #06242d; /* default */

    /* white */
    --color-white-100: #fff; /* default */
    --color-white-200: #dfdfdf;
    --color-white-300: #c0c0c0;
    --color-white-500: #848484;
    --color-white-700: #4a4a4a;
    --color-white-800: #313131;
    --color-white-900: #1f1f1f;

    /* stone */
    --color-stone-100: #f4efea; /* default */
    --color-stone-200: #e1d4c6;
    --color-stone-300: #cab39b;
    --color-stone-500: #ab855e;
    --color-stone-700: #6e543a;
    --color-stone-800: #4d3b28;
    --color-stone-900: #2f2419;

    /* olympia */
    --color-olympia-100: #e8edf9;
    --color-olympia-200: #9db4e3;
    --color-olympia-300: #4c72cb;
    --color-olympia-500: #2e61bc; /* default */
    --color-olympia-700: #28438b;
    --color-olympia-800: #152140;
    --color-olympia-900: #0e1321;

    /* crystal */
    --color-crystal-100: #eef4f8;
    --color-crystal-200: #c1dbe7; /* default */
    --color-crystal-300: #9cc5d9;
    --color-crystal-500: #4e98bb;
    --color-crystal-700: #2c5c72;
    --color-crystal-800: #1e3e4d;
    --color-crystal-900: #def8f0;

    /* oregano */
    --color-oregano-100: #def8f0;
    --color-oregano-200: #82e2c5;
    --color-oregano-300: #24b387;
    --color-oregano-500: #1c8464; /* default */
    --color-oregano-700: #165d47;
    --color-oregano-800: #0f3026;
    --color-oregano-900: #091814;

    /* cypress */
    --color-cypress-100: #daf1db;
    --color-cypress-200: #b6e4b8; /* default */
    --color-cypress-300: #8fd693;
    --color-cypress-500: #45ba4b;
    --color-cypress-700: #37953c;
    --color-cypress-800: #1c4a1e;
    --color-cypress-900: #0e250f;

    /* sunset */
    --color-sunset-100: #fff6e5;
    --color-sunset-200: #ffeccc;
    --color-sunset-300: #ffc766;
    --color-sunset-500: #ffa300; /* default */
    --color-sunset-700: #cc8100;
    --color-sunset-800: #664100;
    --color-sunset-900: #332000;

    /* lemon */
    --color-lemon-100: #fffad1;
    --color-lemon-200: #fff6a8; /* default */
    --color-lemon-300: #fff175;
    --color-lemon-500: #ffec3d;
    --color-lemon-700: #d1bc00;
    --color-lemon-800: #6b6000;
    --color-lemon-900: #332e00;

    /* tomato */
    --color-tomato-100: #ffdddb;
    --color-tomato-200: #ffbbb8;
    --color-tomato-300: #ff7770;
    --color-tomato-500: #ff544b; /* default */
    --color-tomato-700: #ff160a;
    --color-tomato-800: #850700;
    --color-tomato-900: #420300;

    /* blossom */
    --color-blossom-100: #ffe5ec;
    --color-blossom-200: #ffc7d6;
    --color-blossom-300: #ffadc3;
    --color-blossom-500: #ff789b; /* default */
    --color-blossom-700: #ff2e66;
    --color-blossom-800: #940027;
    --color-blossom-900: #4d0014;

    /* seashell */
    --color-seashell-100: #ffe5f0;
    --color-seashell-200: #ffc7dd; /* default */
    --color-seashell-300: #ffe5f0;
    --color-seashell-500: #ff8fbc;
    --color-seashell-700: #e6005c;
    --color-seashell-800: #70002d;
    --color-seashell-900: #380016;

    /* gradients */

    /* shallow */
    --gradient-shallow-olympia: linear-gradient(#f4efea, #f4efea, #2e61bc);
    --gradient-shallow-crystal: linear-gradient(#f4efea, #f4efea, #c1dbe7);
    --gradient-shallow-oregano: linear-gradient(#f4efea, #f4efea, #1c8464);
    --gradient-shallow-cypress: linear-gradient(#f4efea, #f4efea, #b6e4b8);
    --gradient-shallow-sunset: linear-gradient(#f4efea, #f4efea, #ffa300);
    --gradient-shallow-lemon: linear-gradient(#f4efea, #f4efea, #fff6a8);
    --gradient-shallow-tomato: linear-gradient(#f4efea, #f4efea, #ff544b);
    --gradient-shallow-blossom: linear-gradient(#f4efea, #f4efea, #ff789b);
    --gradient-shallow-seashell: linear-gradient(#f4efea, #f4efea, #ffc7dd);

    /* deep */
    --gradient-deep-olympia: linear-gradient(#f4efea, #2e61bc);
    --gradient-deep-crystal: linear-gradient(#f4efea, #c1dbe7);
    --gradient-deep-oregano: linear-gradient(#f4efea, #1c8464);
    --gradient-deep-cypress: linear-gradient(#f4efea, #b6e4b8);
    --gradient-deep-sunset: linear-gradient(#f4efea, #ffa300);
    --gradient-deep-lemon: linear-gradient(#f4efea, #fff6a8);
    --gradient-deep-tomato: linear-gradient(#f4efea, #ff544b);
    --gradient-deep-blossom: linear-gradient(#f4efea, #ff789b);
    --gradient-deep-seashell: linear-gradient(#f4efea, #ffc7dd);

    /* tonal */
    --gradient-tonal-santorini: linear-gradient(#c1dbe7, #2e61bc);
    --gradient-tonal-crete: linear-gradient(#b6e4b8, #1c8464);
    --gradient-tonal-rhodes: linear-gradient(#fff6a8, #ffa300);
    --gradient-tonal-mykonos: linear-gradient(#ffc7dd, #ff789b);

    /* exclusive */
    --gradient-exclusive-poseidon: linear-gradient(#b6e4b8, #2e61bc);
    --gradient-exclusive-gaia: linear-gradient(#fff6a8, #1c8464);
    --gradient-exclusive-helios: linear-gradient(#c1dbe7, #ffa300);
    --gradient-exclusive-aphodite: linear-gradient(#ff544b, #ffc7dd);
    --gradient-exclusive-shadow: linear-gradient(
        0deg,
        #06242d -36.08%,
        rgba(6 36 45 / 0%) 100%
    );

    /* Semantic colors */
    --color-surface-primary: var(--color-white-100);
    --color-surface-secondary: var(--color-stone-100);
    --color-surface-tertiary: var(--color-aqua-100);
    --color-surface-inverted: var(--color-midnight-900);
    --color-surface-disabled: var(--color-white-200);
    --color-surface-subtitle: var(--color-midnight-500);
    --color-surface-highlight: var(--color-sunset-500);
    --color-surface-brand: var(--color-aqua-500);
    --color-surface-cypress: var(--color-cypress-200);
    --color-surface-lemon: var(--color-lemon-200);
    --color-surface-blossom: var(--color-blossom-500);
    --color-surface-success: var(--color-cypress-500);
    --color-text-inverted: var(--color-white-100);
    --color-text-brand: var(--color-aqua-500);
    --color-text-headline: var(--color-midnight-900);
    --color-text-headline-blue: var(--color-olympia-500);
    --color-text-subtitle: #5e6f73; /* Add shade darker value then --color-midnight-500 is */
    --color-body: var(--color-midnight-900);
    --color-button-tertiary-default: var(--color-midnight-900);
    --color-button-tertiary-hover: var(--color-midnight-900);
    --color-button-tertiary-active: var(--color-midnight-900);
    --color-button-tertiary-disabled: var(--color-midnight-900);
    --color-border-brand: var(--color-aqua-500);
    --color-border-secondary: var(--color-midnight-500);

    /* spacing */
    --spacing-0: 0px;
    --spacing-2: 2px;
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-56: 56px;
    --spacing-64: 64px;
    --spacing-72: 72px;
    --spacing-80: 80px;
    --spacing-88: 88px;
    --spacing-96: 96px;
    --spacing-120: 120px;

    /* fonts */
    --body-font-family: norms, norms-fallback, sans-serif;
    --font-family: var(--body-font-family);

    /* heading sizes */
    --font-size-8xl: 86px;
    --font-size-7xl: 74px;
    --font-size-6xl: 60px;
    --font-size-5xl: 48px;
    --font-size-4xl: 40px;
    --font-size-3xl: 32px;
    --font-size-2xl: 28px;
    --font-size-xl: 24px;
    --font-size-lg: 20px;
    --font-size-md: 18px;
    --font-size-sm: 16px;
    --font-size-xs: 14px;

    /* line heights */
    --line-height-7xl: 84px;
    --line-height-6xl: 74px;
    --line-height-5xl: 60px;
    --line-height-4xl: 52px;
    --line-height-3xl: 44px;
    --line-height-2xl: 36px;
    --line-height-xl: 32px;
    --line-height-lg: 28px;
    --line-height-md: 24px;
    --line-height-sm: 20px;
    --line-height-xs: 16px;

    /* radius */
    --radius-0: 0;
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* radius exclusive */
    --radius-exclusive-shadow: 0 0 var(--radius-md, 10px) var(--radius-md, 10px);

    /* nav height */
    --nav-height: calc(
        42px /* cta button height */ + 2 * var(--spacing-16)
            /* vertical padding */
    );

    /* container width */
    --container-max-width: calc(1440px - 2 * var(--spacing-64));
    --container-padding: var(--spacing-24);

    /* max text width */
    --text-max-width: 864px;

    /* focal points */
    --left-position: 0% 50%;
    --left-top-position: 20% 20%;
    --top-position: 50% 0%;
    --right-top-position: 80% 20%;
    --right-position: 100% 50%;
    --right-bottom-position: 80% 80%;
    --bottom-position: 50% 100%;
    --left-bottom-position: 20% 80%;
    --center-position: 50% 50%;
}

@media (width >= 768px) {
    :root {
        --nav-height: calc(
            45px /* logo height */ + 2 * var(--spacing-16)
                /* vertical padding */
        );
        --container-padding: var(--spacing-32);
    }
}

@media (width >= 1024px) {
    :root {
        --container-padding: var(--spacing-64);
    }
}

/* fallback fonts */
@font-face {
    font-family: norms-fallback;
    size-adjust: 99.529%;
    src: local("Arial");
}

html {
    scroll-behavior: smooth;
}

body {
    display: none;
    margin: 0;
    background-color: var(--background-color);
    color: var(--color-body);
    font-family: var(--body-font-family);
    font-size: var(--body-font-size-m);
    line-height: 1.6;
    overflow-x: hidden;
}

body.appear {
    display: block;
}

body.no-scroll {
    overflow: hidden;
}

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

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 {
    scroll-margin: 40px;
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
}

dl,
ol,
ul,
pre,
blockquote {
    margin-top: 0.8em;
    margin-bottom: 0.25em;
}

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

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

main > div {
    margin: 40px 16px;
}

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

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

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

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

.icon {
    display: inline-block;
    height: 24px;
    width: 24px;
}

.icon img {
    height: 100%;
    width: 100%;
}

/* sections */
main > .section {
    margin: 0;
    overflow-x: hidden;
    clear: both;
}

main > .section > div,
.container {
    padding: 0 var(--container-padding);
    max-width: var(--container-max-width);
    margin-right: auto;
    margin-left: auto;
}

main > .section:first-of-type {
    margin-top: 0;
}

/* section metadata */
main .section.bg-gradient-tonal-santorini,
.bg-santorini {
    background: var(--gradient-tonal-santorini);
}

main .section.bg-gradient-tonal-crete,
.bg-crete {
    background: var(--gradient-tonal-crete);
}

main .section.bg-gradient-tonal-rhodes,
.bg-rhodes {
    background: var(--gradient-tonal-rhodes);
}

main .section.bg-gradient-tonal-mykonos,
.bg-mykonos {
    background: var(--gradient-tonal-mykonos);
}

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

main .section.bg-stone {
    background: var(--color-stone-100);
}

main .section.bg-crystal {
    background: var(--color-crystal-200);
}

main .section.bg-midnight {
    background: var(--color-midnight-900);
}

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

main .section.bg-cypress {
    background: var(--color-surface-cypress);
}

main .section.bg-blossom {
    background: var(--color-surface-blossom);
}

main .section.bg-lemon {
    background: var(--color-surface-lemon);
}

main .section.txt-left {
    text-align: left;
}

main .section.txt-center .default-content-wrapper,
main .section.txt-center .reviews-wrapper {
    text-align: center;
}

main .section.txt-center .default-content-wrapper ul {
    display: flex;
    flex-direction: column;
    align-items: center;
}

main .section.txt-right {
    text-align: right;
}

main .section.bg-crystal .default-content-wrapper :is(h2, h3, h4, h5, h6) {
    color: var(--color-text-headline-blue);
}

/* spacing sections */
/* stylelint-disable no-descending-specificity */
main .section {
    --section-spacing-sm: var(--spacing-16);
    --section-spacing-md: var(--spacing-32);
    --section-spacing-lg: var(--spacing-64);
    --section-spacing-xl: var(--spacing-96);
}

@media (width >= 1024px) {
    main .section {
        --section-spacing-sm: var(--spacing-24);
        --section-spacing-md: var(--spacing-32);
        --section-spacing-lg: var(--spacing-64);
        --section-spacing-xl: var(--spacing-120);
    }
}

main .section[data-spacing-top="none"] {
    padding-top: 0;
}

main .section[data-spacing-top="sm"] {
    padding-top: var(--section-spacing-sm);
}

main .section[data-spacing-top="md"] {
    padding-top: var(--section-spacing-md);
}

main .section[data-spacing-top="lg"],
main .section:not([data-spacing-top]) /* default */ {
    padding-top: var(--section-spacing-lg);
}

main .section[data-spacing-top="xl"] {
    padding-top: var(--section-spacing-xl);
}

main .section[data-spacing-between="none"] > div + div {
    margin-top: 0;
}

main .section[data-spacing-between="sm"] > div + div {
    margin-top: var(--section-spacing-sm);
}

main .section[data-spacing-between="md"] > div + div ,
main .section:not([data-spacing-between]) > div + div /* default */ {
    margin-top: var(--section-spacing-md);
}

main .section[data-spacing-between="lg"] > div + div {
    margin-top: var(--section-spacing-lg);
}

main .section[data-spacing-between="xl"] > div + div {
    margin-top: var(--section-spacing-xl);
}

main .section[data-spacing-bottom="none"] {
    padding-bottom: 0;
}

main .section[data-spacing-bottom="sm"] {
    padding-bottom: var(--section-spacing-sm);
}

main .section[data-spacing-bottom="md"] {
    padding-bottom: var(--section-spacing-md);
}

main .section[data-spacing-bottom="lg"],
main .section:not([data-spacing-bottom]) /* default */ {
    padding-bottom: var(--section-spacing-lg);
}

main .section[data-spacing-bottom="xl"] {
    padding-bottom: var(--section-spacing-xl);
}
/* stylelint-enable no-descending-specificity */

/* column layout section */
main > .column-layout-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24); /* might change with spacing system */
    padding: 0 var(--container-padding);
    max-width: var(--container-max-width);
    margin: 0 auto;
}

main > .column-layout-section > * {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important; /* margin affected from section spacing system */
}

main > .column-layout-section > :first-child {
    padding: 0 !important;
}

/* column layout section - reverse */
main > .column-layout-section[data-columns-layout="reverse"] {
    gap: 0;
}

main > .column-layout-section[data-columns-layout="reverse"] > :first-child {
    order: 10;
    margin-top: var(--spacing-24) !important;
}

@media (width >= 1024px) {
    main > .column-layout-section {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-gap: 0 var(--spacing-32);
        place-items: start stretch;
        align-items: stretch;
    }

    main > .column-layout-section > * {
        width: 100%;
        grid-column: 5 / -1;
    }

    main > .column-layout-section > :first-child {
        width: 100%;
        grid-column: 1 / span 4;
        grid-row: 1 / span 10;
    }

    main > .section.column-layout-section > :nth-child(2) {
        margin-top: 0;
    }

    /* column layout section - reverse */
    main > .column-layout-section[data-columns-layout="reverse"] {
        grid-gap: 0 var(--spacing-32);
    }

    main > .column-layout-section[data-columns-layout="reverse"] > * {
        grid-column: 1 / 9;
    }

    main
        > .column-layout-section[data-columns-layout="reverse"]
        > :first-child {
        grid-column: 9 / span 4;
        margin-top: 0 !important;
    }
}

/* column layout section - END */

.rich-text :first-child {
    margin-top: 0;
}

.rich-text :last-child {
    margin-bottom: 0;
}

.dialog {
    --dialog-padding: var(--spacing-24);

    background-color: var(--color-surface-secondary);
    padding: var(--dialog-padding);
    border: none;
    border-radius: var(--radius-md);
    max-width: min(
        calc(750px + 2 * var(--dialog-padding)),
        calc(100dvw - 2 * var(--spacing-16))
    );
    box-sizing: border-box;
}

.dialog--white,
.dialog--white .close-button {
    background-color: var(--color-surface-primary);
}

.dialog::backdrop {
    background-color: var(--color-surface-inverted);
    opacity: 0.9;
}

.dialog .close-button {
    position: absolute;
    cursor: pointer;
    right: var(--dialog-padding);
    top: var(--dialog-padding);
    width: 24px;
    height: 24px;
    border: none;
    background-repeat: no-repeat;
    background-position: center;
}

@media (width >= 768px) {
    .dialog {
        --dialog-padding: var(--spacing-32);
    }
}

@media (width >= 1024px) {
    .dialog {
        --dialog-padding: var(--spacing-64);
    }
}

/* Error page - unauthorized */
main.error-unauthorized {
    min-height: calc(100vh - var(--nav-height));
}

/* stylelint-disable */
main.error-unauthorized,
.error-unauthorized .default-content-wrapper > div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-unauthorized .default-content-wrapper > div {
    flex-direction: column;
    gap: var(--spacing-24);
    text-align: center;
}
/* stylelint-enable */

.error-unauthorized .default-content-wrapper .button,
.error-unauthorized .default-content-wrapper p {
    margin: 0;
}

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

/* Media focal points */
.focal-point--center img,
.focal-point--center video {
    object-position: var(--center-position);
}

.focal-point--left img,
.focal-point--left video {
    object-position: var(--left-position);
}

.focal-point--left-top img,
.focal-point--left-top video {
    object-position: var(--left-top-position);
}

.focal-point--top img,
.focal-point--top video {
    object-position: var(--top-position);
}

.focal-point--right-top img,
.focal-point--right-top video {
    object-position: var(--right-top-position);
}

.focal-point--right img,
.focal-point--right video {
    object-position: var(--right-position);
}

.focal-point--right-bottom img,
.focal-point--right-bottom video {
    object-position: var(--right-bottom-position);
}

.focal-point--bottom img,
.focal-point--bottom video {
    object-position: var(--bottom-position);
}

.focal-point--left-bottom img,
.focal-point--left-bottom video {
    object-position: var(--left-bottom-position);
}