/* =========================================================
   TEMASHIKA TRAVEL & TOURS
   Global Styles
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {

    /* Brand colours */
    --color-primary: #173f35;
    --color-primary-dark: #0d2c25;
    --color-primary-light: #285c4e;

    --color-accent: #c66b45;
    --color-accent-dark: #a95534;
    --color-accent-light: #db8a63;

    --color-gold: #c9a45c;
    --color-gold-light: #e2c98d;

    /* Neutrals */
    --color-white: #ffffff;
    --color-cream: #f5f1e8;
    --color-sand: #e8dfd0;

    --color-text: #20312c;
    --color-text-light: #66736e;

    --color-border: #dcd6ca;

    /* Typography */
    --font-display:
        "DM Serif Display",
        Georgia,
        serif;

    --font-body:
        "Manrope",
        Arial,
        sans-serif;

    /* Layout */
    --container-width: 1280px;

    --header-height: 82px;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm:
        0 4px 20px rgba(
            15,
            38,
            32,
            0.07
        );

    --shadow-md:
        0 15px 45px rgba(
            15,
            38,
            32,
            0.12
        );

    --shadow-lg:
        0 25px 70px rgba(
            15,
            38,
            32,
            0.18
        );

    /* Transitions */
    --transition:
        300ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* =========================================================
   2. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;

    font-size: 16px;
}


body {
    margin: 0;

    min-height: 100vh;

    color: var(--color-text);

    background:
        var(--color-white);

    font-family:
        var(--font-body);

    font-size: 1rem;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;
}


body.menu-open {
    overflow: hidden;
}


img {
    display: block;

    max-width: 100%;
}


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


button {
    cursor: pointer;
}


a {
    color: inherit;

    text-decoration: none;
}


ul,
ol {
    margin: 0;

    padding: 0;

    list-style: none;
}


h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0;

    color:
        var(--color-primary);

    font-family:
        var(--font-display);

    font-weight: 400;

    letter-spacing:
        -0.025em;

    line-height: 1.05;
}


p {
    margin-bottom: 0;
}


/* =========================================================
   3. ACCESSIBILITY
   ========================================================= */

:focus-visible {
    outline:
        3px solid
        var(--color-gold);

    outline-offset: 4px;
}


::selection {
    color:
        var(--color-white);

    background:
        var(--color-primary);
}


/* =========================================================
   4. CONTAINER
   ========================================================= */

.container {
    width:
        min(
            calc(100% - 3rem),
            var(--container-width)
        );

    margin-inline: auto;
}


/* =========================================================
   5. SECTIONS
   ========================================================= */

.section {
    padding-block:
        clamp(
            5rem,
            9vw,
            9rem
        );
}


.section-label {
    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    margin-bottom: 1.2rem;

    color:
        var(--color-accent);

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    line-height: 1.3;

    text-transform: uppercase;
}


.section-label::before {
    content: "";

    width: 25px;

    height: 2px;

    background:
        currentColor;
}


.section-heading h2,
.intro__heading h2 {
    font-size:
        clamp(
            3rem,
            6vw,
            5.8rem
        );
}


/* =========================================================
   6. BUTTONS
   ========================================================= */

.btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.7rem;

    min-height: 50px;

    padding:
        0.8rem
        1.35rem;

    border:
        1px solid
        transparent;

    border-radius:
        var(--radius-pill);

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.05em;

    line-height: 1;

    text-transform: uppercase;

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


.btn i {
    font-size: 0.7rem;

    transition:
        transform var(--transition);
}


.btn:hover i {
    transform:
        translateX(3px);
}


.btn:hover {
    transform:
        translateY(-2px);
}


.btn-accent {
    color:
        var(--color-white);

    background:
        var(--color-accent);

    box-shadow:
        0 8px 24px
        rgba(
            198,
            107,
            69,
            0.2
        );
}


.btn-accent:hover {
    color:
        var(--color-white);

    background:
        var(--color-accent-dark);

    box-shadow:
        0 12px 30px
        rgba(
            198,
            107,
            69,
            0.28
        );
}


/* =========================================================
   7. TEXT LINKS
   ========================================================= */

.text-link {
    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    color:
        var(--color-primary);

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.text-link i {
    color:
        var(--color-accent);

    transition:
        transform var(--transition);
}


.text-link:hover i {
    transform:
        translateX(5px);
}


/* =========================================================
   8. HEADER
   ========================================================= */

.site-header {
    position: fixed;

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

    z-index: 1000;

    height:
        var(--header-height);

    color:
        var(--color-white);

    background:
        transparent;

    transition:
        background var(--transition),
        box-shadow var(--transition),
        backdrop-filter var(--transition);
}


.site-header.is-scrolled {
    color:
        var(--color-primary);

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

    box-shadow:
        0 4px 30px
        rgba(
            15,
            38,
            32,
            0.08
        );

    backdrop-filter:
        blur(14px);
}


.navbar {
    height:
        var(--header-height);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo {
    display: inline-flex;

    flex-direction: column;

    flex-shrink: 0;

    line-height: 1;
}


.logo__name {
    color: currentColor;

    font-family:
        var(--font-display);

    font-size: 1.65rem;

    letter-spacing:
        -0.035em;
}


.logo__subtitle {
    margin-top: 0.28rem;

    color:
        var(--color-gold-light);

    font-size: 0.48rem;

    font-weight: 800;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.site-header.is-scrolled
.logo__subtitle {
    color:
        var(--color-accent);
}


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

.nav-menu {
    display: flex;

    align-items: center;

    gap:
        clamp(
            1.25rem,
            2.8vw,
            2.75rem
        );
}


.nav-link {
    position: relative;

    padding-block: 0.5rem;

    color: currentColor;

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    opacity: 0.8;

    transition:
        opacity var(--transition);
}


.nav-link::after {
    content: "";

    position: absolute;

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

    width: 0;

    height: 2px;

    margin-inline: auto;

    background:
        var(--color-accent);

    transition:
        width var(--transition);
}


.nav-link:hover,
.nav-link.active {
    opacity: 1;
}


.nav-link.active::after {
    width: 100%;
}


.nav-actions {
    display: flex;

    align-items: center;
}


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

.menu-toggle {
    display: none;

    width: 44px;

    height: 44px;

    padding: 0;

    border: 0;

    background: transparent;
}


.menu-toggle span {
    display: block;

    width: 23px;

    height: 2px;

    margin:
        5px auto;

    background:
        currentColor;

    transition:
        transform var(--transition),
        opacity var(--transition);
}


.menu-toggle.is-active
span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}


.menu-toggle.is-active
span:nth-child(2) {
    opacity: 0;
}


.menu-toggle.is-active
span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   9. FOOTER
   ========================================================= */

.site-footer {
    color:
        rgba(
            255,
            255,
            255,
            0.68
        );

    background:
        var(--color-primary-dark);
}


.site-footer__grid {
    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1.4fr;

    gap:
        clamp(
            2rem,
            5vw,
            5rem
        );

    padding-block:
        5rem;
}


.site-footer__brand {
    max-width: 360px;
}


.site-footer .logo__name {
    color:
        var(--color-white);
}


.site-footer__brand p {
    margin-top: 1.4rem;

    font-size: 0.78rem;

    line-height: 1.8;
}


.site-footer__column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.site-footer__column h3 {
    margin-bottom: 1.2rem;

    color:
        var(--color-white);

    font-family:
        var(--font-body);

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.site-footer__column a,
.site-footer__column p {
    margin-bottom: 0.65rem;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size: 0.72rem;

    line-height: 1.6;

    transition:
        color var(--transition);
}


.site-footer__column a:hover {
    color:
        var(--color-gold-light);
}


.site-footer__column i {
    width: 18px;

    color:
        var(--color-gold);
}


.site-footer__bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding-block:
        1.25rem;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    font-size: 0.6rem;

    letter-spacing: 0.02em;
}


.site-footer__bottom strong {
    color:
        var(--color-gold-light);

    font-weight: 700;
}


/* =========================================================
   10. SCROLL REVEAL
   ========================================================= */

.reveal {
    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity 800ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        transform 800ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   11. IMAGE LOADING
   ========================================================= */

img[loading="lazy"] {
    opacity: 0;

    transition:
        opacity 600ms ease;
}


img[loading="lazy"].is-loaded {
    opacity: 1;
}


/*
 * Prevent images from staying invisible if
 * JavaScript is disabled.
 */

.no-js img[loading="lazy"] {
    opacity: 1;
}


/* =========================================================
   12. RESPONSIVE HEADER
   ========================================================= */

@media (max-width: 900px) {

    .nav-actions {
        display: none;
    }


    .menu-toggle {
        display: block;
    }


    .nav-menu {
        position: fixed;

        top:
            var(--header-height);

        right: 0;
        left: 0;

        height:
            calc(
                100svh -
                var(--header-height)
            );

        display: flex;

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 0;

        padding:
            1.5rem;

        color:
            var(--color-primary);

        background:
            var(--color-white);

        box-shadow:
            var(--shadow-md);

        transform:
            translateX(100%);

        visibility: hidden;

        opacity: 0;

        overflow-y: auto;

        transition:
            transform var(--transition),
            opacity var(--transition),
            visibility var(--transition);
    }


    .nav-menu.is-open {
        transform:
            translateX(0);

        visibility: visible;

        opacity: 1;
    }


    .nav-menu li {
        width: 100%;

        border-bottom:
            1px solid
            var(--color-border);
    }


    .nav-link {
        display: block;

        padding:
            1.25rem 0;

        font-size: 0.75rem;

        opacity: 1;
    }


    .nav-link::after {
        display: none;
    }

}


/* =========================================================
   13. RESPONSIVE FOOTER
   ========================================================= */

@media (max-width: 900px) {

    .site-footer__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 600px) {

    .container {
        width:
            min(
                calc(100% - 2rem),
                var(--container-width)
            );
    }


    .section {
        padding-block:
            4.5rem;
    }


    .section-heading h2,
    .intro__heading h2 {
        font-size:
            clamp(
                2.8rem,
                14vw,
                4.2rem
            );
    }


    .site-footer__grid {
        grid-template-columns:
            1fr;

        padding-block:
            4rem;
    }


    .site-footer__bottom {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 0.5rem;

        padding-block:
            1.2rem;
    }

}


/* =========================================================
   14. REDUCED MOTION
   ========================================================= */

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

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }


    .reveal {
        opacity: 1;

        transform: none;
    }

}