/* =========================================================
   PATMOS INN
   SHARED SITE CSS
========================================================= */


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family: Arial, sans-serif;
    background: #fff;
    color: #1a1a1a;
    overflow-x: hidden;
}


/* =========================================================
   PAGE TRANSITIONS
========================================================= */

::view-transition-old(root) {
    animation: pageOut .55s ease both;
}

::view-transition-new(root) {
    animation: pageIn .55s ease both;
}

@keyframes pageOut {

    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-35px);
    }

}

@keyframes pageIn {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   NAVIGATION
========================================================= */

/*
    Desktop navigation starts in the upper-left.

    On mobile the navigation becomes fixed and the
    hamburger controls the menu.
*/

nav {

    position: fixed;

    top: 30px;
    left: 40px;

    z-index: 3000;

    transition:
        top .35s ease,
        left .35s ease,
        right .35s ease,
        padding .35s ease,
        background .35s ease,
        box-shadow .35s ease,
        backdrop-filter .35s ease,
        -webkit-backdrop-filter .35s ease;

}


/* =========================================================
   DEFAULT NAVIGATION
   OTHER PAGES = BLACK MENU
========================================================= */

.nav-links a {

    position: relative;

    color: #1a1a1a;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    transition:
        color .35s ease;

}


/* =========================================================
   INDEX PAGE
   MENU OVER HERO = WHITE
========================================================= */

body.home-page nav:not(.scrolled) .nav-links a {

    color: #fff;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, .25);

}


/* =========================================================
   INDEX PAGE
   SCROLLED = WHITE BACKGROUND + BLACK TEXT
========================================================= */

body.home-page nav.scrolled {

    top: 0;
    left: 0;
    right: 0;

    padding: 18px 40px;

    background:
        rgba(255, 255, 255, .96);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .10);

}


body.home-page nav.scrolled .nav-links a {

    color: #1a1a1a;

    text-shadow: none;

}


/* =========================================================
   OTHER PAGES
   SCROLLED NAV
========================================================= */

body:not(.home-page) nav.scrolled {

    top: 0;
    left: 0;
    right: 0;

    padding: 18px 40px;

    background:
        rgba(255, 255, 255, .96);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .10);

}


/* =========================================================
   NAV LINKS
========================================================= */

.nav-links {

    display: flex;

    gap: 28px;

    list-style: none;

}


.nav-links a {

    position: relative;

    color: #1a1a1a;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    white-space: nowrap;

    transition:
        color .35s ease;

}


/* =========================================================
   ACTIVE / HOVER LINE
========================================================= */

.nav-links a::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -10px;

    width: 0;
    height: 3px;

    background: currentColor;

    border-radius: 999px;

    transform:
        translateX(-50%);

    transition:
        width .35s ease;

}


.nav-links a:hover::after,
.nav-links a.active::after {

    width: 100%;

}


/* =========================================================
   HAMBURGER
========================================================= */

/*
    IMPORTANT:

    The hamburger is fixed to the viewport rather than
    positioned relative to the navbar.

    Therefore scrolling cannot move it.
*/

.hamburger {

    display: none;

    position: fixed;

    top: 16px;
    left: 16px;

    width: 34px;
    height: 34px;

    padding: 0;
    margin: 0;

    cursor: pointer;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 4px;

    z-index: 5000;

    border:
        1px solid
        rgba(0, 0, 0, .08);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .92);

    box-shadow:
        0 4px 16px
        rgba(0, 0, 0, .10);

    appearance: none;
    -webkit-appearance: none;

    transition:
        background .3s ease,
        box-shadow .3s ease,
        transform .3s ease;

}


.hamburger:hover {

    background:
        rgba(255, 255, 255, 1);

    box-shadow:
        0 6px 20px
        rgba(0, 0, 0, .14);

}


/* =========================================================
   HAMBURGER LINES
========================================================= */

.hamburger span {

    display: block;

    width: 15px;
    height: 1.5px;

    flex-shrink: 0;

    background: #1a1a1a;

    border-radius: 999px;

    transform-origin: center;

    transition:
        background .3s ease,
        transform .35s ease,
        opacity .25s ease;

}


/* =========================================================
   INDEX PAGE
   HAMBURGER OVER HERO = WHITE
========================================================= */

body.home-page .hamburger span {

    background: #fff;

    box-shadow:
        0 1px 5px
        rgba(0, 0, 0, .25);

}


/* =========================================================
   INDEX PAGE
   HAMBURGER AFTER SCROLL = BLACK
========================================================= */

body.home-page nav.scrolled ~ .hamburger span,
body.home-page .hamburger.scrolled span {

    background: #1a1a1a;

    box-shadow: none;

}


/*
    This selector handles the case where the hamburger
    sits independently from the nav.
*/

body.home-page.scrolled-page .hamburger span {

    background: #1a1a1a;

    box-shadow: none;

}


/* =========================================================
   HAMBURGER ACTIVE
========================================================= */

.hamburger.active span:nth-child(1) {

    transform:
        translateY(5.5px)
        rotate(45deg);

}


.hamburger.active span:nth-child(2) {

    opacity: 0;

}


.hamburger.active span:nth-child(3) {

    transform:
        translateY(-5.5px)
        rotate(-45deg);

}


/* =========================================================
   PAGE
========================================================= */

.page {

    min-height: 100vh;

    padding-top: 120px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


/* =========================================================
   PAGE TITLE
========================================================= */

.page-title {

    text-align: center;

    padding:
        30px 20px 20px;

    font-weight: 300;

    font-size: 18px;

    letter-spacing: 8px;

    text-transform: uppercase;

}


.page-title::after {

    content: "";

    display: block;

    width: 50px;
    height: 1px;

    background:
        rgba(0, 0, 0, .2);

    margin:
        16px auto 0;

}


/* =========================================================
   CONTENT
========================================================= */

.section {

    width: 100%;

    max-width: 1200px;

    margin: auto;

    padding:
        40px 40px 100px;

}


/* =========================================================
   HERO
========================================================= */

.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:
        120px 30px 80px;

    position: relative;

    overflow: hidden;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, .30),
            rgba(0, 0, 0, .30)
        ),
        url("../images/tarasse_table_with_hat.JPG");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {

    max-width: 900px;

    position: relative;

    z-index: 2;

    color: #fff;

}


.hero-eyebrow {

    font-size: 13px;

    letter-spacing: 5px;

    text-transform: uppercase;

    margin-bottom: 25px;

    opacity: .9;

}


.hero h1 {

    font-size:
        clamp(40px, 7vw, 90px);

    font-weight: 300;

    letter-spacing: 8px;

    text-transform: uppercase;

    line-height: 1.05;

    text-shadow:
        0 4px 25px
        rgba(0, 0, 0, .25);

}


.hero-subtitle {

    margin-top: 30px;

    font-size: 16px;

    line-height: 1.9;

    opacity: .9;

    text-shadow:
        0 2px 15px
        rgba(0, 0, 0, .3);

}


.hero-button {

    display: inline-block;

    margin-top: 35px;

    padding:
        15px 28px;

    background: #fff;

    color: #1a1a1a;

    text-decoration: none;

    border-radius: 10px;

    text-transform: uppercase;

    font-size: 12px;

    letter-spacing: 2px;

    transition:
        .3s ease;

}


.hero-button:hover {

    background: #1a1a1a;

    color: #fff;

    transform:
        translateY(-2px);

}


/* =========================================================
   TWO COLUMN
========================================================= */

.two-column {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 40px;

    align-items: center;

}


/* =========================================================
   CARD
========================================================= */

.card {

    background: #fff;

    border:
        1px solid
        rgba(0, 0, 0, .08);

    border-radius: 18px;

    padding: 30px;

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, .06);

}


.card h3 {

    margin-bottom: 15px;

    font-weight: 400;

    letter-spacing: 2px;

}


/* =========================================================
   REVIEWS
========================================================= */

.reviews {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );

    gap: 30px;

    margin-top: 30px;

}


.review-card {

    background: #fff;

    border:
        1px solid
        rgba(0, 0, 0, .08);

    border-radius: 18px;

    padding: 30px;

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, .06);

    line-height: 1.8;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    min-height: 260px;

    transition:
        .35s ease;

}


.review-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, .10);

}


.review-card h4 {

    margin-bottom: 10px;

    font-weight: 500;

    font-size: 16px;

}


.review-card p {

    font-size: 15px;

}


.review-rating {

    margin-top: 15px;

    color: #f5a623;

    letter-spacing: 2px;

}


/* =========================================================
   CONTACT
========================================================= */

.contact-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 40px;

}


form {

    display: flex;

    flex-direction: column;

    gap: 14px;

}


input,
textarea {

    width: 100%;

    padding: 12px;

    border:
        1px solid
        rgba(0, 0, 0, .15);

    border-radius: 10px;

    font-family: inherit;

    font-size: 14px;

    outline: none;

}


input:focus,
textarea:focus {

    border-color: #1a1a1a;

}


textarea {

    resize: vertical;

}


button {

    padding: 14px;

    border: none;

    background: #1a1a1a;

    color: #fff;

    border-radius: 10px;

    cursor: pointer;

    text-transform: uppercase;

    letter-spacing: 2px;

    transition:
        .3s ease;

}


button:hover {

    background: #333;

    transform:
        translateY(-2px);

}


.info {

    line-height: 1.9;

    font-size: 14px;

}


.info hr {

    margin: 20px 0;

    border: 0;

    border-top:
        1px solid
        rgba(0, 0, 0, .1);

}


/* =========================================================
   FOOTER
========================================================= */

.lux-footer {

    padding:
        80px 20px;

    border-top:
        1px solid
        rgba(0, 0, 0, .08);

    margin-top: 60px;

}


.footer-inner {

    max-width: 1600px;

    margin: auto;

    text-align: center;

    display: flex;

    flex-direction: column;

    gap: 25px;

}


.footer-brand {

    font-size: 14px;

    letter-spacing: 3px;

}


.footer-links {

    display: flex;

    justify-content: center;

    gap: 25px;

    flex-wrap: wrap;

}


.footer-links a {

    color: #1a1a1a;

    text-decoration: none;

    font-size: 13px;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.footer-meta {

    font-size: 12px;

    opacity: .6;

    line-height: 1.8;

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 992px) {


    /* =====================================================
       MOBILE NAVBAR

       IMPORTANT:
       Keep the navbar at exactly 64px high.

       The hamburger occupies the same 64px zone.
       When the navbar becomes opaque, nothing moves.
    ====================================================== */

    nav {

        position: fixed;

        top: 0;
        left: 0;
        right: 0;

        width: 100%;

        height: 64px;

        padding: 0;

        z-index: 3000;

        background:
            transparent;

        transition:
            background .35s ease,
            box-shadow .35s ease,
            backdrop-filter .35s ease,
            -webkit-backdrop-filter .35s ease;

    }


    /*
        When scrolling, ONLY the appearance changes.

        Height remains 64px.
    */

    nav.scrolled {

        top: 0;
        left: 0;
        right: 0;

        height: 64px;

        padding: 0;

        background:
            rgba(255, 255, 255, .96);

        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);

        box-shadow:
            0 8px 25px
            rgba(0, 0, 0, .08);

    }


    /* =====================================================
       HAMBURGER

       Fixed independently from nav.
    ====================================================== */

    .hamburger {

        display: flex;

        position: fixed;

        top: 15px;
        left: 15px;

        width: 34px;
        height: 34px;

        z-index: 5000;

    }


    /* =====================================================
       HAMBURGER ON HOME HERO
    ====================================================== */

    body.home-page .hamburger span {

        background: #fff;

        box-shadow:
            0 1px 5px
            rgba(0, 0, 0, .25);

    }


    /*
        Once the home navigation is scrolled,
        the hamburger becomes black.

        navigation.js can add .scrolled to nav;
        the CSS below uses the nav state indirectly
        where possible.
    */

    body.home-page nav.scrolled + .hamburger span {

        background: #1a1a1a;

        box-shadow: none;

    }


    /* =====================================================
       OTHER PAGES HAMBURGER
    ====================================================== */

    body:not(.home-page) .hamburger span {

        background: #1a1a1a;

        box-shadow: none;

    }


    /* =====================================================
       MOBILE MENU PANEL
    ====================================================== */

    .nav-links {

        position: fixed;

        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        height: 100vh;
        height: 100svh;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        gap: 30px;

        padding:
            80px 25px 40px;

        margin: 0;

        background:
            rgba(255, 255, 255, .97);

        backdrop-filter:
            blur(24px) saturate(180%);

        -webkit-backdrop-filter:
            blur(24px) saturate(180%);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(-10px);

        transition:
            opacity .35s ease,
            visibility .35s ease,
            transform .45s ease;

        overflow-y: auto;

        z-index: 4000;

    }


    /* =====================================================
       OPEN MOBILE MENU
    ====================================================== */

    .nav-links.active {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0);

    }


    /* =====================================================
       MOBILE LINKS
    ====================================================== */

    .nav-links a {

        color: #1a1a1a !important;

        font-size: 1.25rem;

        font-weight: 700;

        letter-spacing: 4px;

        text-shadow: none !important;

        padding:
            5px 10px;

    }


    .nav-links a::after {

        bottom: -5px;

        height: 2px;

    }


    .nav-links a:hover::after,
    .nav-links a.active::after {

        width: 55px;

    }


    /* =====================================================
       MOBILE PAGE
    ====================================================== */

    .page {

        min-height: 100svh;

        padding-top: 84px;

    }


    /* =====================================================
       TWO COLUMN
    ====================================================== */

    .two-column,
    .contact-grid {

        grid-template-columns: 1fr;

    }


    /* =====================================================
       SECTION
    ====================================================== */

    .section {

        padding:
            30px 20px 80px;

    }


    /* =====================================================
       PAGE TITLE
    ====================================================== */

    .page-title {

        font-size: 16px;

        letter-spacing: 6px;

    }


    /* =====================================================
       REVIEWS
    ====================================================== */

    .reviews {

        grid-template-columns: 1fr;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 600px) {


    /* =====================================================
       NAVBAR
    ====================================================== */

    nav,
    nav.scrolled {

        height: 64px;

    }


    /* =====================================================
       HAMBURGER
    ====================================================== */

    .hamburger {

        top: 15px;
        left: 15px;

        width: 34px;
        height: 34px;

    }


    .hamburger span {

        width: 15px;

        height: 1.5px;

    }


    /* =====================================================
       MOBILE MENU
    ====================================================== */

    .nav-links {

        gap: 25px;

        padding:
            75px 20px 35px;

    }


    .nav-links a {

        font-size: 1.05rem;

        letter-spacing: 3.5px;

    }


    /* =====================================================
       HERO
    ====================================================== */

    .hero {

        padding:
            100px 20px 60px;

    }


    .hero h1 {

        letter-spacing: 5px;

    }


    .hero-eyebrow {

        font-size: 11px;

        letter-spacing: 4px;

    }


    .hero-subtitle {

        font-size: 14px;

    }


    /* =====================================================
       SECTION
    ====================================================== */

    .section {

        padding:
            25px 18px 70px;

    }


    /* =====================================================
       CARD
    ====================================================== */

    .card {

        padding: 24px;

        border-radius: 15px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {


    nav,
    nav.scrolled {

        height: 60px;

    }


    .hamburger {

        top: 13px;
        left: 13px;

        width: 32px;
        height: 32px;

    }


    .hamburger span {

        width: 14px;

    }


    .nav-links {

        padding-top: 70px;

        gap: 20px;

    }


    .nav-links a {

        font-size: .95rem;

        letter-spacing: 3px;

    }


    .page-title {

        font-size: 15px;

        letter-spacing: 5px;

    }

}


/* =========================================================
   HERO PAGE NAVIGATION
   WHITE MENU
========================================================= */

.hero-page .nav-links a {

    color: #fff;

    font-weight: 700;

}


.hero-page .nav-links a::after {

    background: #fff;

}


.hero-page .hamburger span {

    background: #fff;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }


    ::view-transition-old(root),
    ::view-transition-new(root) {

        animation: none;

    }


    * {

        transition: none !important;

    }

}


/* =================================================
   PATMOS INN — AVAILABILITY CALENDAR
================================================= */

.availability-calendar {
    width: 100%;
    max-width: 100%;
}


/* Calendar navigation */

.calendar-header {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    width: 100%;
    margin-bottom: 18px;
}


.calendar-header button {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 28px;
    line-height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}


.calendar-header button:hover {
    background: rgba(0, 0, 0, 0.05);
}


#calendar-month {
    text-align: center;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* Weekday names */

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
    margin-bottom: 5px;
}


.calendar-weekdays div {
    text-align: center;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 8px 0;
    opacity: 0.55;
}


/* Calendar days */

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
}


.calendar-day {
    position: relative;
    min-width: 0;
    aspect-ratio: 1 / 1;
    margin: 3px;
    border-radius: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;

    box-sizing: border-box;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


/* Empty cells */

.calendar-day.empty {
    background: transparent;
}


/* Available */

.calendar-day.available {
    background: rgba(76, 126, 91, 0.12);
    color: inherit;
}


.calendar-day.available:hover {
    background: rgba(76, 126, 91, 0.22);
    transform: scale(1.03);
}


/* Booked */

.calendar-day.booked {
    background: rgba(170, 75, 75, 0.16);
    color: inherit;
}


.calendar-day.booked::after {
    content: "";
    position: absolute;

    left: 20%;
    right: 20%;
    bottom: 18%;

    height: 2px;

    background: #a94f4f;

    border-radius: 2px;
}


.calendar-day.booked:hover {
    background: rgba(170, 75, 75, 0.25);
    transform: scale(1.03);
}


/* Day number */

.day-number {
    position: relative;
    z-index: 2;
}


/* Legend */

.calendar-legend {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;

    margin-top: 20px;

    font-size: 12px;
}


.calendar-legend span {
    display: flex;
    align-items: center;
    gap: 7px;
}


.calendar-legend i {
    display: inline-block;

    width: 10px;
    height: 10px;

    border-radius: 50%;
}


.available-dot {
    background: #4c7e5b;
}


.booked-dot {
    background: #a94f4f;
}


/* Error */

.calendar-error {
    grid-column: 1 / -1;

    text-align: center;

    padding: 40px 10px;

    font-size: 13px;

    opacity: 0.6;
}


/* Mobile */

@media (max-width: 600px) {

    .calendar-header {
        grid-template-columns: 40px 1fr 40px;
    }


    .calendar-header button {
        width: 36px;
        height: 36px;
        font-size: 24px;
    }


    #calendar-month {
        font-size: 14px;
        letter-spacing: 1.5px;
    }


    .calendar-weekdays div {
        font-size: 8px;
        letter-spacing: 0.5px;
    }


    .calendar-day {
        margin: 2px;
        border-radius: 6px;
        font-size: 12px;
    }


    .calendar-legend {
        gap: 15px;
        font-size: 11px;
    }

}