/* Global styles */
/* Import fonts from: https://fonts.google.com/ */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* For large screens: https://min-max-calculator.9elements.com/?24,30_4,1440,2200 */
/* For smaller screens: https://min-max-calculator.9elements.com/?18,24,400,770 */

:root {
    --font-family-1: 'Open Sans', Geneva, Verdana, sans-serif; /* Body text font */
    --font-family-2: 'Merriweather', Geneva, Verdana, sans-serif; /* Headings font */

    --font-size-1: clamp(1.875rem, 0.593rem + 2.675vw, 3rem); /* 48px to 30px */
    --font-size-2: clamp(1.5rem, 0.36rem + 2.377vw, 2.5rem); /* 40px to 24px */
    --font-size-3: clamp(1.125rem, 0.698rem + 0.892vw, 1.5rem); /* 24px to 18px */
    --font-size-4: clamp(1rem, 0.394rem + 1.264vw, 1.5rem); /* 24px to 16px */
    --font-size-5: clamp(1.25rem, 0.018rem + 1.37vw, 1.9rem); /* 24px to 14px */
    --font-size-6: clamp(1.25rem, 0.018rem + 1.37vw, 1.9rem); /* 20px */
    --font-size-7: clamp(1rem, 0.053rem + 1.05vw, 1.5rem); /* 16px */ 

    --section-padding: 1rem;
    --content-maxWidth: clamp(65.25rem, 1.69rem + 72.64vw, 122rem);

    --color-base-1: #FFFFFF;
    --color-base-2: #F4F4F4;
    --color-base-3: #CCCCCC;
    --color-base-4: #9B9B9B;
    --color-contrast-1: #111111;
    --color-contrast-2: #172530;
    --color-accent-1: #b58a38;
    --color-accent-1-lt: #ffc83b;
    --color-accent-2: #3877A2;
    --color-fail: #c0593f;
    --color-fail-lt: #ff957a;
    --color-success: #269726;

    interpolate-size: allow-keywords;
}

body {
    background-color: var(--color-base-1);
    color: var(--color-contrast-1);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    /* overflow-x: hidden; */
}
#content {
    flex: 1;
}
body, p, .p {
    font-family: var(--font-family-1);
    font-weight: 400;
    font-size: var(--font-size-6);
}
h1, .h1, h2, .h2, h3, .h3 {
    line-height: 1.2;
}
h1, .h1 {
    font-family: var(--font-family-2);
}
h1, .h1 {
    font-weight: 700;
    font-size: var(--font-size-1);
}
h2, .h2 {
    font-weight: 600;
    font-size: var(--font-size-2);
}
h3, .h3 {
    line-height: 1.3;
    font-size: clamp(1.5rem, 0.93rem + 1.189vw, 2rem);
}
.main-heading {
    text-align: center;
    margin-bottom: clamp(0.75rem, -1.244rem + 4.16vw, 2.5rem);
}
.section-heading {
    font-weight: 600;
    font-size: var(--font-size-7);
    padding: 0.75rem clamp(0.75rem, 0.625rem + 0.5vw, 1rem);
    border-bottom: 1px solid #00000014;
}
.section-content {
    padding: 1rem;
}
.text-content-wrapper {
    --_paragraph-font-size: clamp(0.875rem, 0.202rem + 0.75vw, 1.23rem);
    --_paragraph-spacing: 0.5rem;
    color: var(--color-text);
}

section,
.section {
    background-color: var(--color-base-1);
}
.section-wrapper.accent {
    position: relative;
    --_background-color: var(--color-contrast);
    --_pattern-color: var(--color-contrast2);
    --_pattern-size: 0.8em;
    background: repeating-linear-gradient(135deg, var(--_pattern-color) 0, var(--_pattern-color) 10%, transparent 0, transparent 50%);
    background-size: var(--_pattern-size) var(--_pattern-size);
    background-color: var(--_background-color);
    color: var(--color-base-1);
}
section.full-width,
.section.full-width {
    padding: 0;
}

.container.wide {
    max-width: clamp(65.25rem, 1.69rem + 72.64vw, 122rem);
}

.container.full-width {
    max-width: 100%;
}

ul, ol {
    gap: 0.125rem;
    padding-left: clamp(1.25rem, -0.171rem + 1.58vw, 2rem);
}

a.link,
article a[href] {
    --_link-color: var(--color-accent2);
    --_underline-tickness: 0.05em;
    color: var(--_link-color);
    background-image: linear-gradient(var(--_link-color), var(--_link-color));
    background-size: 0% var(--_underline-tickness);
    background-position-y: 100%;
    background-position-x: 100%;
    background-repeat: no-repeat;
    transition: background-size 0.2s ease-in-out;
    cursor: pointer;
}
a.link:hover,
article a[href]:hover {
    background-size: 100% var(--_underline-tickness);
    background-position-x: 0%;
}

.button-group {
    gap: clamp(0.5rem, 0.026rem + 0.53vw, 0.75rem);
}
.btn {
    font-weight: 600;
    font-size: clamp(1rem, 0.053rem + 1.05vw, 1.5rem);
    font-family: var(--font-family-1);
    padding: clamp(0.5rem, 0.026rem + 0.53vw, 0.75rem) clamp(0.75rem, 0.276rem + 0.53vw, 1rem);
    border-radius: 100px;
    background-color: var(--color-base-1);
    color: var(--color-contrast-1);
    border: 1px solid #0000001f;
}
.btn.pad-lg {
    padding: 0.6rem 1.125rem;
}
.btn.with-icon {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-inline: clamp(1.15rem, 0.487rem + 0.74vw, 1.5rem);
    --_icon-width: clamp(1rem, 0.053rem + 1.05vw, 1.5rem);
}
.btn.basic {
    background-color: var(--color-accent-1-lt);
    color: var(--color-contrast-1);
    border: none;
    text-wrap: auto;
}
.btn.basic.contrast {
    background-color: var(--color-contrast-1);
    color: var(--color-base-1);
}
.btn.basic.contrast:hover {
    background-color: var(--color-base-4);
}
.btn.round {
    border-radius: 0.5rem;
}
.btn.outline {
    position: relative;
    background-color: transparent;
    color: var(--color-contrast-1);
    border: 1px solid #0000004d;
}
.btn.outline.contrast {
    position: relative;
    background-color: rgba(29, 28, 26, 0.32);
    color: var(--color-accent-1-lt);
    border: 1px solid color-mix(in srgb, var(--color-accent-1-lt), transparent 68%);
}
.btn.outline::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid;
    border-radius: inherit;
    border-color: inherit;
}
.btn:hover {
    /* background-color: var(--color-accent3);
    border-color: var(--color-accent3);
    color: var(--color-base);
    transform: scale(105%); */
    /* filter: drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.2)); */
    transform: translatey(-2px);
}
.btn[disabled] {
    cursor: not-allowed;
    background-color: var(--color-base-4) !important;
    color: var(--color-base);
}

.card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background-image: linear-gradient(180deg, #F4F2EF 0%, #EDE3D0 100%);
    border-radius: 8px;
}

input, textarea {
    font-family: var(--font-family-3);
    font-size: var(--font-size-7);
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus, select:focus {
    outline: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}
textarea {
    resize: none;
}

.form {
    border-style: solid;
    border-color: #0000004d;
    border-width: 2px;
    border-radius: 8px;
    width: fit-content;
    justify-self: center;
    padding: clamp(0.625rem, -0.1563rem + 2.5vw, 1.25rem);
    margin: 50px 0;
}

.label {
    font-size: var(--font-size-3);
    text-align: start;
}

.form-text-field-container {
    border-radius: 8px;
    border: 1px solid #0000001F;
    background-color: var(--color-base-1);
    padding: 0.5rem 0.75rem;
}

.form-text-field-container label {
    color: #1d1c1aa3;
    font-size: clamp(0.875rem, 0.202rem + 0.75vw, 1.23rem);
}

.form-text-field {
    font-size: var(--font-size-7);
    width: 100%;
    font-weight: 600;
}
input.form-text-field::placeholder {
    color: #1d1c1aa3;
}

.centered-align-content {
    text-align: center;
    align-items: center;
}

/* Media queries */
@media only screen and (max-width: 768px) { /* mobile */ 
    :root {
        --font-size-5: clamp(1rem, 0.73rem + 1.08vw, 1.25rem); /* 20px to 16px */
        --font-size-6: clamp(0.875rem, 0.792rem + 0.33vw, 1.25rem); /* 20px to 14px */
        --font-size-7: clamp(0.9rem, 0.792rem + 0.43vw, 1rem);
    }

    .btn {
        font-size: clamp(0.875rem, 0.74rem + 0.54vw, 1rem);
    }

    .responsive-hide {
        display: none;
    }

    .responsive-full-width { /* For Sections That need to go full width on smaller screens */
        padding-inline: 0;
        margin-inline: 0;
    }

    .responsive-align-left {
        text-align: left;
    }

    .centered-align-content {
        align-items: flex-start;
    }

}

@media only screen and (min-width: 769px) { /* desktop only */

}