/* --------- Fonts & colors --------- */

@font-face {
    font-family: 'SK Modernist';
    src: url('fonts/sk-modernist-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'SK Modernist';
    src: url('fonts/sk-modernist-bold.woff2') format('woff2');
    font-weight: bold;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('./fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
}

:root {
    --Base-black: #000;
    --Brand-Midnight-blue: #071630; /* font for titles */
    --Base-white: #FFFFFF; /* font for buttons */
    --Background-white: #FCFCF7; /* global background */
    --Blue-700: #175CD3; /* header buttons on click */
    --Blue-600: #1570EF; /* button */
    --Blue-500: #2E90FA; /* button hover */
    --Blue-300: #84CAFF; /* input active */
    --Blue-200: #B2DDFF; /* archive calendar card */
    --Blue-50: #EFF8FF; /* input disabled */
    --Grey-900: #141414; /* footer background */
    --Grey-800: #292929; /* input active */
    --Grey-700: #424242; /* main font color */
    --Grey-600: #525252; /* main font color */
    --Grey-500: #737373; /* main font color */
    --Grey-400: #A3A3A3; /* footer font */
    --Grey-300: #D6D6D6; /* input border */
    --Grey-200: #E5E5E5; /* delimiter border */
    --Grey-100: #F5F5F5; /* archive calendar card */
    --Grey-50: #FAFAFA; /* input disabled */
    --Mint-50: #E8FEF6; /* some backgrounds */
}

body {
    font-family: 'SK Modernist', system-ui, sans-serif;
    font-size: 16px;
    color: var(--Grey-600);
    background-color: #FCFCF7;
}

.display-XS, .display-SM, .display-MD, .display-LG, .display-2XL {
    font-family: Playfair Display, serif;
    color: var(--Brand-Midnight-blue);
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
}

.display-XS {
    font-size: 24px;
    letter-spacing: normal;
    line-height: 125%;
}

.display-SM {
    font-size: 30px;
    letter-spacing: normal;
}

.display-MD {
    font-size: 36px;
    letter-spacing: normal;
}

.display-LG {
    font-size: 48px;
    letter-spacing: 0.48px;
}

.display-2XL {
    font-size: 88px;
    letter-spacing: 0.88px;
}

.text-XS-regular, .text-SM-regular, .text-MD-regular, .text-LG-regular, .text-XL-regular {
    font-family: SK Modernist, sans serif;
    font-style: normal;
    font-weight: 400;
}

.text-XS-regular {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.48px;
}

.text-SM-regular {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.42px;
}

.text-MD-regular {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
}

.text-LG-regular {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.18px;
}

.text-XL-regular {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.2px;
}

/* Use this text-block class on the container that displays text that comes from users */
.text-block {
    display: block;
}

.text-block * {
    display: inline-block;
}

.selectDisable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/* Tablet & mobile */
@media only screen and (max-width: 768px) {
    /* --- SM to XS --- */
    .display-SM.responsive-SM-XS {
        /* display-XS */
        font-size: 24px;
        letter-spacing: normal;
        line-height: 125%;
    }
    /* --- LG to SM --- */
    .display-LG.responsive-LG-SM {
        /* display-SM */
        font-size: 30px;
        letter-spacing: normal;
    }
    /* --- LG to MD --- */
    .display-LG.responsive-LG-MD {
        /* display-MD */
        font-size: 36px;
        letter-spacing: normal;
    }
    /* --- XL to LG --- */
    .display-2XL.responsive-XL-LG {
        /* display-LG */
        font-size: 48px;
        letter-spacing: 0.48px;
    }
    .text-XL-regular.responsive-XL-LG {
        /* text-LG-regular */
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 0.18px;
    }
    /* LG to MD */
    .text-LG-regular.responsive-LG-MD {
        /* text-MD-regular */
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.32px;
    }
}

.bold {
    font-weight: bold;
}

/* --------- Layout --------- */

html, body, header, article, footer, div, span, svg, form, input, label, a {
    display: flex;
}

html,
body {
    overflow: auto;
    height: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    flex: 1;
}

/* Tablet & mobile */
@media only screen and (max-width: 768px) {
    body {
        color: var(--Grey-500);
    }
}

.wrapper {
    flex-direction: column;
    flex: 1;
}

header {
    flex-direction: column;
}

.header-top-bar {
    padding: 4px 60px;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(6px);
}

/* Small desktop */
@media only screen and (max-width: 1024px) {
    .header-top-bar {
        padding: 4px 18px;
    }
}

/* Tablet & mobile */
@media only screen and (max-width: 768px) {
    .header-top-bar {
        padding: 8px 24px;
    }
}

.header-smartbrief-logo {
    background-image: url('./svg/header-smartbrief-logo.svg');
    width: 174px;
    height: 24px;
}

.header-menu-spread {
    align-items: center;
    gap: 24px;
    padding: 8px 0;
}

/* Tablet & mobile */
@media only screen and (max-width: 768px) {
    .header-menu-spread {
        display: none;
    }
}

.header-menu-spread > * {
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--Grey-600);
    border-radius: 4px;
}

/* header shrink improvements */
@media only screen and (max-width: 1107px) {
    .header-menu-spread {
        gap: 12px;
    }
    .header-menu-spread > * {
        padding: 8px 8px;
    }
}

@media only screen and (max-width: 910px) {
    .header-menu-spread {
        gap: 6px;
    }
    .header-menu-spread > * {
        padding: 8px 4px;
    }
}

.header-menu-spread > *:hover, .header-menu-dropdown > *:hover {
    border: 1px solid rgba(41, 41, 41, 0.04);
    background: rgba(41, 41, 41, 0.04);
}

.header-menu-spread > *:active {
    border-bottom: 2px solid var(--Blue-700);
}

.header-menu-collapsed {
    display: none;
    background-image: url('./svg/header-menu.svg');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    padding: 12px;
    width: 20px;
    height: 20px;
}

/* Tablet & mobile */
@media only screen and (max-width: 768px) {
    .header-menu-collapsed {
        display: flex;
    }
}

.header-menu-close {
    background-image: url('./svg/header-menu-close.svg');
}

.header-menu-dropdown {
    display: none;
    width: 342px;
    padding: 24px 0;
    flex-direction: column;
    align-items: center;
    align-self: center;
    justify-content: flex-start;
    gap: 24px;
}

@media only screen and (max-width: 378px) {
    .header-menu-dropdown {
        width: 240px;
    }
}

.header-menu-dropdown-item {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    justify-content: flex-start;
    align-items: flex-start;
    align-self: stretch;
    color: var(--Grey-500);
}

.header-menu-dropdown-item > .advertise-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
}

.chevron {
    background-image: url('./svg/chevron-down.svg');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
    align-self: center;
}

.advertise-dropdown-wrapper-active {
    flex-direction: column;
}

.advertise-dropdown-wrapper-active > .advertise-dropdown-toggle > .chevron {
    background-image: url('./svg/chevron-up.svg');
}

.advertise-dropdown {
    display: none;
    position: absolute;
    padding: 16px 0;
    margin-top: 16px;
    margin-left: -16px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 8px;
    box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
}

.advertise-dropdown > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.advertise-dropdown > div > a {
    display: flex;
    padding: 8px 16px;
    border-radius: 4px;
    align-items: flex-start;
    align-self: stretch;
    color: var(--Grey-600);
}

.advertise-dropdown > div > a:hover {
    background: rgba(41, 41, 41, 0.04);
}

/* Tablet & mobile */
@media only screen and (max-width: 768px) {
    .advertise-dropdown {
        position: static;
        margin-left: 0;
        box-shadow: none;
        width: 100%;
    }

    .advertise-dropdown > div > a {
        color: var(--Grey-500);
    }
}

article {
    padding: 120px 60px;
    justify-content: center;
    align-items: flex-start;
    gap: 48px;
    align-self: stretch;
    flex: 1;
}

/* Small desktop */
@media only screen and (max-width: 1024px) {
    article {
        padding: 120px 24px;
    }
}

/* Tablet & mobile */
@media only screen and (max-width: 768px) {
    article {
        padding: 196px 24px 96px 24px;
        flex-direction: column;
        align-items: center;
    }
}

footer {
    flex-direction: column;
}

.footer-top {
    padding: 96px 60px;
    justify-content: center;
    align-items: flex-start;
    gap: 48px;
    align-self: stretch;
    background-color: var(--Grey-800);
    color: var(--Grey-400);
}

.footer-top-container {
    max-width: 1320px;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    flex: 1 0 0;
}

/* Tablet & mobile */
@media only screen and (max-width: 768px) {
    .footer-top {
        padding: 48px 24px;
    }

    .footer-top-container {
        flex-direction: column;
        gap: 32px;
        align-self: stretch;
    }
}

.footer-logos-social {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    flex: 1 0 0;
}

.footer-smartbrief-logos {
    width: 173px;
    height: 24px;
    justify-content: space-between;
    align-items: center;
}

.footer-smartbrief-logo {
    background-image: url('./svg/footer-smartbrief-logo.svg');
    background-size: 23.123px 24px;
    background-repeat: no-repeat;
    background-position: center;
    width: 23.123px;
    height: 24px;
    flex-shrink: 0;
}

.footer-smart-logo {
    background-image: url('./svg/footer-smart-logo.svg');
    background-size: 77.335px 20.89px;
    background-repeat: no-repeat;
    background-position: center;
    width: 77.335px;
    height: 20.89px;
    flex-shrink: 0;
}

.footer-brief-logo {
    background-image: url('./svg/footer-brief-logo.svg');
    background-size: 60.904px 21.127px;
    background-repeat: no-repeat;
    background-position: center;
    width: 60.904px;
    height: 21.127px;
    flex-shrink: 0;
}

.footer-social-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.footer-social-logos {
    align-items: center;
    gap: 24px;
}

.footer-facebook-logo {
    background-image: url('./svg/footer-facebook-logo.svg');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
}

.footer-facebook-logo:hover {
    filter: brightness(0) saturate(100%) invert(35%) sepia(41%) saturate(3943%) hue-rotate(202deg) brightness(96%) contrast(94%);
}

.footer-x-logo {
    background-image: url('./svg/footer-x-logo.svg');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
}

.footer-x-logo:hover {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(15%) hue-rotate(203deg) brightness(103%) contrast(104%);
}

.footer-linkedin-logo {
    background-image: url('./svg/footer-linkedin-logo.svg');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
}

.footer-linkedin-logo:hover {
    filter: brightness(0) saturate(100%) invert(35%) sepia(41%) saturate(3943%) hue-rotate(202deg) brightness(96%) contrast(94%);
}

.footer-youtube-logo {
    background-image: url('./svg/footer-youtube-logo.svg');
    background-size: 24px 16.88px;
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 16.88px;
    padding: 3.558px 0 3.562px 0;
    justify-content: center;
    align-items: center;
}

.footer-youtube-logo:hover {
    filter: brightness(0) saturate(100%) invert(19%) sepia(83%) saturate(7113%) hue-rotate(3deg) brightness(110%) contrast(127%);
}

.link-row {
    align-items: flex-start;
    gap: 48px;
    flex: 1 0 0;
}

/* Tablet & mobile */
@media only screen and (max-width: 768px) {
    .link-row {
        gap: 16px;
        align-self: stretch;
    }
}

.footer-link-column {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
}

.footer-link-column-header {
    align-self: stretch;
    color: var(--Grey-500);
}

.footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}

.footer-links > a {
    color: var(--Grey-400);
}

.footer-links > a:hover {
    color: var(--Base-white);
    text-decoration-line: underline;
}

.footer-bottom {
    padding: 32px 60px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    background: var(--Grey-900);
}

.copyright-notice {
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 24px;
    align-self: stretch;
    flex-wrap: wrap;
    color: var(--Grey-300);
}

/* Tablet & mobile */
@media only screen and (max-width: 768px) {
    .footer-bottom {
        padding: 32px 32px 64px 32px;
        align-items: flex-start;
    }

    .copyright-notice {
        flex-direction: column;
        align-items: flex-start;
    }
}

.copyright-notice > a {
    color: var(--Grey-400);
}

/* --------- links and buttons --------- */

a {
    text-decoration: none;
}

article a { /* default link color */
    color: var(--Blue-600);
}

article .display-XS a, /* links within titles blocks */
article .display-SM a,
article .display-MD a,
article .display-LG a,
article .display-2XL a {
    color: var(--Brand-Midnight-blue);
}

article a:hover { /* links while hovered */
    color: var(--Blue-700);
}

.btn {
    color: var(--Base-white);
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px;
    align-self: flex-start;
    background: var(--Blue-600);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    border: 1px solid var(--Blue-600);
}

.btn-blank {
    color: var(--Grey-600);
    background: var(--Base-white);
    border: 1px solid var(--Base-white);
}

.btn-MD {
    padding: 10px 18px;
}

.btn-XL {
    padding: 16px 32px;
}

/* Tablet & mobile */
@media only screen and (max-width: 768px) {
    .btn {
        align-self: stretch;
    }
    /* XL to MD */
    .btn-XL {
        padding: 10px 18px;
    }
}

.btn:hover {
    background-color: var(--Blue-500);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

.btn-blank:hover {
    background: var(--Base-white);
    border: 1px solid var(--Base-white);
    color: var(--Grey-700);
}

.btn:active {
    background: var(--Blue-600);
    box-shadow: 0 0 0 4px #E0EDFF;
}

.btn-blank:active {
    background: var(--Base-white);
}

.btn:disabled {
    background: var(--Blue-50);
    border: 1px solid var(--Blue-50);
    color: var(--Blue-300);
}

.btn:disabled > .chevron-right {
    filter: invert(28%) sepia(9%) saturate(2089%) hue-rotate(174deg) brightness(100%) contrast(108%);
}

.lets-talk {
    background-image: url('./svg/lets-talk.svg');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
}

.chevron-right {
    background-image: url('./svg/chevron-right.svg');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
}

.chevron-right-double {
    background-image: url('./svg/chevron-right-double.svg');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
}

.send {
    background-image: url('./svg/send.svg');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
}

.save {
    background-image: url('./svg/save.svg');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px;
}

/* ------- checkbox -------- */

.checkbox-label-secondary-text {
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 2px;
}

.checkbox-label {
    gap: 8px;
    align-items: center;
    position: relative;
}

.input-checkbox {
    opacity: 0;
    margin: unset;
    width: 16px;
    height: 16px;
}

[type="checkbox"] + .checkbox {
    background-image: url('./svg/checkbox/checkbox.svg');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    position: absolute;
}

[type="checkbox"]:hover + .checkbox {
    background-image: url('./svg/checkbox/checkbox-hover.svg');
}

[type="checkbox"]:active + .checkbox {
    box-shadow: 0 0 0 4px #E0EDFF;
}

[type="checkbox"]:checked + .checkbox {
    background-image: url('./svg/checkbox/checkbox-checked.svg');
}

[type="checkbox"]:checked:hover + .checkbox {
    background-image: url('./svg/checkbox/checkbox-checked-hover.svg');
}

[type="checkbox"]:checked:active + .checkbox {
    box-shadow: 0 0 0 4px #E0EDFF;
}

.primary-label {
    color: var(--Grey-700);
}

.secondary-text-container {
    align-self: stretch;
    gap: 24px;
}

.secondary-text {
    display: block;
    color: var(--Grey-500);
}

.secondary-text > a {
    display: inline;
}

/* --------- input --------- */

.input-field  {
    padding: 10px 14px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Grey-300);
    outline: none;
    background: var(--Base-white);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    color: var(--Grey-800);
}

.input-field:placeholder-shown {
    color: var(--Grey-500)
}

.input-field:hover {
    border: 1px solid var(--Grey-400);
}

.input-field:focus {
    border: 1px solid var(--Blue-300);
    box-shadow: 0 0 0 4px #E0EDFF;
}

.input-field:disabled {
    border: 1px solid var(--Grey-300);
    background: var(--Grey-50);
}

select.input-field {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    background: url('./svg/chevron-down.svg') no-repeat 97% white;
    padding-right: 30px;
    text-overflow: ellipsis;
}

select.input-field > option {
    color: var(--Grey-800);
}

select.input-field:invalid {
    color: var(--Grey-500)
}

.copy-icon {
    background-image: url('./svg/copy.svg');
    background-size: 30px 22px;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    width: 30px;
    height: 22px;
}

@media only screen and (max-width: 768px) {
    #signup-form  {
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        gap: 32px;
    }
}