/*
    Theme Name: PTH Theme
*/
@font-face {
    font-family: 'Cormorant';
    src: url("assets/fonts/Cormorant-VariableFont.woff2") format('woff2-variations');
}
@font-face {
    font-family: 'Judson-Italic';
    src: url("assets/fonts/Judson-Italic.woff2") format('woff2');
}
@font-face {
    font-family: 'Lancelot';
    src: url("assets/fonts/Lancelot-Regular.woff2") format('woff2');
}
@font-face {
    font-family: 'Merriweather';
    src: url("assets/fonts/Merriweather-VariableFont.woff2") format('woff2-variations');
}
@font-face {
    font-family: 'Poppins-Regular';
    src: url("assets/fonts/Poppins-Regular.woff2") format('woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'Poppins-SemiBold';
    src: url("assets/fonts/Poppins-SemiBold.woff2") format('woff2');
    font-weight: 600;
}
@font-face {
    font-family: 'Poppins-Bold';
    src: url("assets/fonts/Poppins-Bold.woff2") format('woff2');
    font-weight: 700;
}
@font-face {
    font-family: 'Roboto';
    src: url("assets/fonts/Roboto-VariableFont.woff2") format('woff2-variations');
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    /* COLORS */
    --color-brand: #bfc4ca; /* #b5b9c0 */
    --color-brand-light: #faf7f7;
    --color-text-light: #f6f3f3;
    --color-text-medium: #966a74;
    --color-text-dark: #2F404FF2;
    --color-accent: #793b49;
    --color-accent-dark: #4f1d27;

    /* TYPOGRAPHY */
    --font-family-title: 'Lancelot', serif;
    --font-family-subtitle: 'Judson-Italic', serif;
    --font-family-base: 'Poppins', sans-serif;
    --font-family-base-alt: 'Roboto', sans-serif;
    --font-family-heading: 'Poppins-Bold', sans-serif;
    --font-family-heading-serif: 'Cormorant', serif;
    --font-family-subheading: 'Poppins-SemiBold', sans-serif;

    --font-size-1: clamp(1rem, 4vw, 1.25rem);
    --font-size-2: clamp(1.15rem, 4vw, 1.35rem);
    --font-size-3: 1.25rem;
    --font-size-4: clamp(1.25rem, 5vw, 1.5rem);
    --font-size-5: clamp(1.25rem, 6vw, 1.85rem);
    --font-size-6: clamp(1.5rem, 5vw, 2.5rem);
    --font-size-7: clamp(1.5rem, 8vw, 3.5rem);
    --font-size-8: 1.8rem;
    --font-size-9: clamp(3rem, 6vw + 3rem, 8rem);

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}
html {
    scroll-behavior: smooth;
}
body {
    display: flex;
    flex-direction: column;
    background-color: var(--color-brand-light);
}
img {
    max-width: 100%;
}


/* ==========================
            NAVBAR
========================== */
header {
    position: fixed;
    width: 100%;
    font-family: var(--font-family-base), sans-serif;
    caret-color: transparent;
    transition: all 0.3s ease;
    z-index: 1;
    padding-left: calc(100vw - 100%);
}
header.scrolled {
    background: rgba(77, 77, 93, 0.4);
    backdrop-filter: blur(5px);
    .breakline {
        width: 100%;
    }
}
.nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(5vw, 5rem);
    padding: 1rem;
}
.nav__list {
    display: flex;
    align-items: center;
    gap: min(5vw, 5rem);
    list-style-type: none;
}
.nav__link {
    font-size: var(--font-size-3);
    color: var(--color-text-light);
    text-decoration: none;
    transition: all 0.3s ease;
}
.nav__link:hover {
    color: var(--color-text-dark);
}
.hamburger {
    display: none;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
}
.hamburger--open .bar:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
}
.hamburger--open .bar:nth-child(2) {
    opacity: 0;
}
.hamburger--open .bar:nth-child(3) {
    transform: rotate(-45deg) translateY(-9px);
}
.bar {
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background-color: var(--color-text-light);
    caret-color: transparent;
    transition: all 0.3s ease-in-out;
}
.breakline {
    height: 1px;
    width: min(90%, 60rem);
    margin-inline: auto;
    border: none;
    background-color: var(--color-text-light);
    opacity: 0.5;
    transition: all 0.3s ease;
}


/* ==========================
            HERO
========================== */
.hero-container {
    padding-top: 5rem;
    height: 100vh;
    background: linear-gradient(135deg, rgba(100, 98, 121, 0.2), rgba(91, 90, 103, 0.1)), url('assets/images/TEEMULAITINEN-09195.jpg') center/cover no-repeat;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.hero {
    color: var(--color-text-light);
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-inline: 4vw;
}
.hero h1 {
    font-family: var(--font-family-title), sans-serif;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-9);
    caret-color: transparent;
}
.hero h2 {
    max-width: min(40rem, 75vw);
    font-family: var(--font-family-subtitle), sans-serif;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-6);
    margin-bottom: 6rem;
}
.btn-cta {
    background-color: var(--color-accent);
    color: var(--color-text-light);
    padding: .5rem 2.5rem;
    font-family: var(--font-family-base-alt), sans-serif;
    font-size: 1.5rem;
    border: none;
    cursor: pointer;
}
.btn-cta:hover {
    background-color: var(--color-accent-dark);
}


/* ==========================
            INTRO
========================== */
.intro {
    width: min(90%, 80rem);
    margin: 10vh auto;
    color: var(--color-text-dark);
}
.intro h2 {
    font-family: var(--font-family-heading), sans-serif;
    font-size: var(--font-size-7);
    text-align: center;
    margin-bottom: 0.5rem;
}
.intro-content {
    padding: 2vw;
    font-family: var(--font-family-base), sans-serif;
}
.intro-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    margin-bottom: 3rem;
}
.intro-section:nth-of-type(3) {
    margin-bottom: 0;
}
.intro-image {
    width: 8rem;
}
.intro-section p {
    font-size: var(--font-size-2);
    font-family: var(--font-family-base), sans-serif;
}


/* ==========================
            SERVICES
========================== */
.services {
    width: 100%;
    margin: 5vh auto;
    padding: min(10dvw, calc(6rem + 1vw)) 0;
    color: var(--color-text-light);
    background-color: var(--color-brand);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem 6rem;
}
.service-col {
    display: flex;
    flex-basis: 25rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
}
.service-col img {
    max-width: 5rem;
}
.service-col h3 {
    font-family: var(--font-family-heading), sans-serif;
    font-size: var(--font-size-5);
}
.service-col p {
    max-width: 80%;
    font-family: var(--font-family-base), sans-serif;
    font-size: var(--font-size-1);
}


/* ==========================
            ABOUT
========================== */
.about {
    width: min(90%, 80rem);
    margin: 7vw auto;
    color: var(--color-text-dark);
}
.about-container {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 2rem;
}
.about img {
    max-width: min(90%, 25rem);
    object-fit: cover;
}
.about-text {
    font-family: var(--font-family-base), sans-serif;
    font-size: var(--font-size-1);
}
.about-text p {
    margin-bottom: 1.25rem;
}


/* ==========================
            CONTACT
========================== */
.contact {
    width: 100%;
    background-color: var(--color-brand);
    padding: 2rem 0;
}
.contact h2 {
    font-family: var(--font-family-title), sans-serif;
    font-size: var(--font-size-7);
    font-weight: 200;
    color: var(--color-text-light);
    text-align: center;
    margin-bottom: 0.5rem;
}
.contact-content {
    width: 95%;
    display: flex;
    justify-content: center;
    gap: 0 10rem;
    margin: 3rem auto;
}
#wpcf7-f90-o1 {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: min(90%, 40rem);
}
.wpcf7-form {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
}
.contact-aside {
    font-family: var(--font-family-base), sans-serif;
    font-size: var(--font-size-1);
    color: var(--color-text-light);
    width: min(80%, 15rem);
}
.contact-aside h3 {
    font-family: var(--font-family-subheading), sans-serif;
}
fieldset {
    width: 100%;
    border: none;
}
.form-input {
    position: relative;
    display: flex;
    justify-content: center;
}
input, textarea {
    width: 100%;
    height: 2rem;
    background-color: inherit;
    border: none;
    border-bottom: 1px solid white;
    margin-bottom: 3rem;
    caret-color: var(--color-text-light);
    color: var(--color-text-light);
    font-size: var(--font-size-1);
}
textarea {
    resize: none;
    overflow: hidden;
}
input:focus, textarea:focus {
    outline: none;
}
label {
    font-family: var(--font-family-title), sans-serif;
    font-size: var(--font-size-3);
    color: var(--color-text-light);
    position: absolute;
    left: 0;
    top: 0;
    cursor: text;
    transition: all 0.2s ease-in;
}
.wpcf7-form label:has(+ .wpcf7-form-control-wrap input:focus),
.wpcf7-form label:has(+ .wpcf7-form-control-wrap input:not(:placeholder-shown)),
.wpcf7-form label:has(+ .wpcf7-form-control-wrap textarea:focus),
.wpcf7-form label:has(+ .wpcf7-form-control-wrap textarea:not(:placeholder-shown)){
    top: -20px;
    font-size: 1.1rem;
}
.wpcf7-submit {
    width: auto;
    font-family: var(--font-family-base-alt), sans-serif;
    font-size: var(--font-size-3);
    background-color: var(--color-text-light);
    color: var(--color-text-medium);
    cursor: pointer;
    padding: 1.5rem 3.5rem;
    line-height: 0.2rem;
}
.wpcf7-submit:hover {
    background-color: var(--color-text-medium);
    color: var(--color-text-light);
}
.wpcf7-form-control-wrap {
    display: contents;
    width: 100% !important;
}


/* ==========================
         RESERVATION
========================== */
main .reserve {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.reserve__info {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.reserve__pricing {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-brand);
    padding-top: 8rem;
}
.reserve__pricing h2 {
    color: var(--color-text-light);
    font-family: var(--font-family-heading-serif), sans-serif;
    font-size: clamp(1.5rem, 8vw, 3.5rem);
    font-weight: var(--font-weight-bold);
}
.pricing__details {
    display: flex;
    justify-content: space-around;
    padding-bottom: 3rem;
}
.details__col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    font-family: Merriweather, sans-serif;
    font-size: var(--font-size-2);
    color: var(--color-text-light);
    width: min(100%, 40rem);
    padding: 3rem 2rem;
}
.pricing__line {
    display: flex;
    justify-content: space-between;
}
.pricing__line:nth-of-type(2) {
    margin-bottom: 2rem;
}
.reserve__contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-text-dark);
    padding: 3rem 0;
}
.reserve__contact h2 {
    font-family: var(--font-family-heading-serif), sans-serif;
    font-size: clamp(1.5rem, 8vw, 3.5rem);
    font-weight: var(--font-weight-bold);
    margin-bottom: 2rem;
}
.reserve__contact ul {
    font-family: Merriweather, sans-serif;
    font-size: var(--font-size-2);
    list-style: none;
    max-width: min(60rem, 90%);
}
.reserve__contact li {
    margin: 1rem;
}
.calendar__wrapper {
    height: 70dvh;
    display: flex;
    justify-content: center;
}


.footer {
    background-color: var(--color-brand);
    width: 100%;
    height: 4rem;
}


@media screen and (max-width: 720px) {
    .nav {
        justify-content: space-around;
        gap: 50%;
    }
    .nav__list {
        position: fixed;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        padding-top: 8rem;
        gap: 1rem;
        background-color: rgba(23, 20, 20, 0.8);
        transition: all 0.3s ease-in-out;
    }
    .nav__list--open {
        left: 0;
    }
    .nav__item {
        padding: 0.35rem 1rem;
    }
    .hamburger {
        display: flex;
        z-index: 999;
    }
}

@media screen and (max-width: 1200px) {
    .intro-section {
        flex-direction: column-reverse;
    }
    .intro-section:nth-of-type(2) {
        flex-direction: column;
    }
    .intro-section:nth-of-type(3) .intro-image {
        display: none;
    }
    .about-container {
        flex-direction: column;
        align-items: center;
    }
    .contact-content {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }
    .contact-aside {
        width: min(90%, 40rem);
    }


    .pricing__details {
        flex-direction: column;
        align-items: center;
    }
}