/* === Initial setup === */

/* Reminder: General styles looks like:

selector {
    display styles (e.g. display, flex/grid properties, justify, align)

    positioning styles (e.g. position, top, z-index, etc.)

    sizing (e.g. width, height)

    other styling (e.g. margin, padding, overflow)

    decorative (e.g. background, filter, box-shadow)

    animation (e.g. transition)
}

*/

/* == General == */

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: 9.35vh;
}

body {
    margin: 0;
}

/* == Color variables == */

* {
    --color-primary: rgba(113, 54, 0, 1);
    --color-secondary: rgba(230, 168, 23, 1);
    --color-muted: rgba(234, 212, 163, 1);
}

/* == Fonts == */

/* - Font variables - */
* {
    --font-body: "Crimson Text", serif;
    --font-heading: "EB Garamond", serif;
    --font-accent: "Cormorant Garamond", serif;
}

/* - Headings - */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-optical-sizing: auto;
    font-style: normal;

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

a,
p,
input,
label,
ul,
aside,
select,
textarea,
button {
    font-family: var(--font-body);

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

/* - Body - */
body {
    font-family: var(--font-body);
}

/* === Components === */

/* - Frosted glass pane - */
.fg-pane {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.72),
        rgba(255, 255, 255, 0.67)
    );
    filter: saturate(160%);
    backdrop-filter: blur(1.25rem);
    box-shadow: 0px 2px 3px 1px rgba(241, 241, 241, 0.31);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* - Data pane - */
.data-pane {
    display: flex;
    flex-direction: column;

    position: relative;
    z-index: 2;

    width: 67%;
    margin: 0 auto;
    padding: 2rem 0;

    border-radius: 1rem;

    transform: translateY(-50%); /* Move up by 50% of own height */

    text-align: center;
    font-size: 1.15rem;
}

.data-pane b {
    font-size: 1.65rem;
    margin: -0.1rem 0;
}

/* - Link pane - */
.link-pane {
    display: inline-block;

    width: fit-content;
    height: fit-content;

    position: relative;

    padding: 2rem 2.5rem 1rem 1.5rem;

    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.25),
        rgba(255, 255, 255, 0.13)
    );
    color: var(--color-primary);
    border-radius: 1rem;
    box-shadow:
        0 0 10px 0 rgba(230, 168, 23, 0.3),
        inset 0 0 7px 0 rgba(230, 168, 23, 0.4);
    filter: none;
    backdrop-filter: none;

    text-decoration: none;
    font-size: 0.9rem;
}

.link-pane:hover {
    box-shadow:
        0 0 10px 0 rgba(230, 168, 23, 0.3),
        inset 0 0 0.78rem 0 rgba(230, 168, 23, 0.4);
}

.link-pane .ext-link-icon {
    position: absolute;
    top: 0.77rem;
    right: 0.77rem;

    width: 0.9rem;
    height: 0.9rem;
}

/* === Header === */

/* == Navigation bar == */

.site-header,
.site-header * {
    --header-height: 9.35vh;
}

.site-header {
    position: fixed;
    top: 0;
    z-index: 10;
    overflow: hidden;

    width: 100%;
    height: var(--header-height);

    margin: 0;
    padding: 0 3%;

    transition: height 0.24s ease-in;
}

.site-header nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;

    height: var(--header-height);
    max-height: var(--header-height); /* Is this necessary? */
}

/* - Logo */
.site-header nav .logo img {
    height: 100%;
}

/* - Navigation links - */
.site-header nav .nav-links {
    display: none;
    /* changed to display: flex when hamburger menu clicked */
    flex-direction: column;
    gap: 0;
    overflow: hidden;

    position: absolute;
    top: var(--header-height);
    left: 0;

    width: 100%;

    margin: 20% 0 0 0;
    padding: 0;

    transition: max-height 0.3s ease;

    list-style: none;
}

.site-header nav .nav-links li {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.site-header nav .nav-links li a {
    position: relative;
    overflow: hidden;

    margin: 1.5rem 5%;

    color: var(--color-primary);

    text-decoration: none;
    font-size: 1.72rem;
}

/* - Hamburger menu - */
.menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: 37px;
    height: 30px;
}

.menu-icon span {
    display: block;

    height: 6px;

    background: var(--color-primary);
    border-radius: 2px;

    transition: 0.3s ease-in-out;
    transform-origin: center;
}

/* Animate to X when checked */
#menu-toggle:checked + label .menu-icon span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8.7px);
}
#menu-toggle:checked + label .menu-icon span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}
#menu-toggle:checked + label .menu-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8.7px);
}

/* - Hamburger menu logic - */
.hamburger-checkbox {
    display: none;
}

.hamburger-label {
    position: absolute;
    left: calc(97% - 37px);
    top: calc(3.67vh - 7.5px);

    display: flex;
    margin: auto 0;
}

.site-header:has(#menu-toggle:checked) {
    height: 100vh;
}

.site-header:has(#menu-toggle:checked) nav .nav-links {
    display: flex;
}

/* === Main page === */

/* == Landing section == */

.landing {
    display: flex;
    justify-content: center;
    align-content: center;
    overflow: hidden;

    position: relative;
    z-index: 0;

    height: 100vh;

    background: url("assets/images/landing.jpg") center center / cover no-repeat;
}

/* - Opacity mask - */
.landing::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.25);

    content: "";
}

/* - Landing company name and slogan - */
.landing-text {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;

    z-index: 2;
}

.landing-text * {
    color: var(--color-secondary);
    font-family: var(--font-accent);
}

.landing-text h1 {
    margin: 0;

    font-size: 4rem;
}

.landing-text p {
    margin: -1.25rem 0 0 6.5rem;

    font-size: 1.55rem;
}

/* == Body sections == */

/* - Body sections: general styles - */
.body-section {
    position: relative;
    z-index: 0;

    width: 90%;
    margin: 0 auto;
    padding: 0.5rem 0.5rem 3rem;
    overflow: hidden;

    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 0 3px 1px rgba(225, 225, 225, 0.5);

    backdrop-filter: blur(1.25rem);
}

/* Background pattern */
.body-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 30rem 30rem;
    background-repeat: repeat;
    background-position: center;
    opacity: 0.24;
    filter: blur(7px);
    z-index: -1;
}

.body-section h2 {
    text-align: center;

    text-decoration: underline;
    text-decoration-color: var(--color-secondary);
    text-underline-offset: 0.3rem;
    text-decoration-thickness: 0.13rem;
}

.body-section h3 {
    font-family: var(--font-accent);
}

.body-section p {
    font-size: 0.9rem;
}

/* Section divider */
.section-divider {
    width: 75%;
    height: 1.3rem;

    margin: 2rem auto;

    border: none;
    background-repeat: round;
    background-position: left;
    background-size: auto 100%;
}

.section-divider:nth-of-type(1) {
    background-image: url("assets/images/divider-1.svg");
}

.section-divider:nth-of-type(2) {
    background-image: url("assets/images/divider-2.svg");
}

.section-divider:nth-of-type(3) {
    background-image: url("assets/images/divider-3.svg");
}

/* - About us - */
.about-intro::before {
    background-image: url("assets/images/pattern-1.png");
}

.about-intro .link-pane {
    margin: 1rem 0 0 30%;
}

/* - Services - */
.services-intro::before {
    background-image: url("assets/images/pattern-2.png");
    filter: blur(3px);
}

.services-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    padding: 0;

    list-style: none;
}

.services-cards li {
    padding: 1rem 0.5rem;

    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    box-shadow: 0 0 3px 1px rgba(225, 225, 225, 0.5);
}

.services-cards li h3 {
    font-size: 1.1rem;
}

.services-cards li img {
    width: 100%;
    border-radius: 0.5rem;
}

.services-intro .link-pane {
    margin: 1rem 0 0 13%;
}

/* - Partners - */
.partners-intro::before {
    background-image: url("assets/images/pattern-3.png");
    opacity: 0.12;
}

.partners-intro .link-pane {
    margin: 2rem 0 0 40%;
}

/* - Contact - */
.contact-intro::before {
    background-image: url("assets/images/pattern-4.png");
    opacity: 0.12;
    filter: blur(2px);
}

.contact-intro form {
    display: flex;
    flex-direction: column;

    padding: 0 0.5rem;

    background: rgba(255, 255, 255, 0.88);
    border-radius: 0.75rem;
    box-shadow: 0 0 3px 1px rgba(225, 225, 225, 0.5);
}

.contact-intro form h3 {
    text-align: center;
    text-decoration: underline;
    text-decoration-color: var(--color-secondary);
    text-underline-offset: 0.3rem;
    text-decoration-thickness: 0.13rem;
}

.contact-intro form label {
    font-size: 0.9rem;
}

.contact-intro form label:nth-of-type(n + 2) {
    margin: 0.68rem 0 0;
}

.contact-intro form input,
.contact-intro form select,
.contact-intro form textarea {
    margin: 0.13rem 0;
    padding: 0.44rem;

    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 0.44rem;
}

.contact-intro form input::placeholder,
.contact-intro form textarea::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

.contact-intro form textarea {
    min-height: 6rem;

    resize: vertical;
}

.contact-intro form button {
    width: 100%;

    margin: 1rem auto 0.85rem;
    padding: 0.6rem 0;

    color: var(--color-secondary);
    border: 2px solid var(--color-primary);
    border-radius: 0.44rem;
    background: rgba(113, 54, 0, 0.96);

    font-family: "Cormorant Garamond", serif;
    font-optical-sizing: auto;
    font-size: 1.15rem;
    font-weight: 700;
}

/* === Footer === */

.site-footer {
    margin: 2.67rem 0 0 0;
    padding: 0.1rem 15% 0.2rem;

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

.site-footer * {
    color: var(--color-secondary);
}

/* == Footer top == */

.site-footer .logo {
    display: block;

    max-width: 14rem;

    margin: 3rem 0 2rem 0;
}

.site-footer h2 {
    font-family: var(--font-accent);

    text-decoration: underline;
    text-underline-offset: 0.44rem;
    text-decoration-thickness: 0.13rem;
}

/* == Navigation links and Contact Info == */

.site-footer .nav-links,
.site-footer .contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.67rem;
    padding-left: 1rem;
}

.site-footer .services-links {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;

    margin: 0.44rem 0 0;
    padding-left: 1rem;
}

.site-footer li {
    list-style: none;
}

.site-footer li a {
    text-underline-offset: 0.1rem;
    text-decoration-thickness: 0.09rem;
}

.site-footer li a:hover {
    color: rgba(230, 168, 23, 0.78);
}

.site-footer .footer-contact a {
    text-decoration: none;
}

.site-footer li a span {
    text-decoration: none;
}

/* == Copyright statement == */

.site-footer .copyright {
    margin: 5rem 0 0.2rem 0;

    font-size: 0.9rem;
}

.contact-email {
    text-decoration: none;
}

.contact-email:hover {
    color: rgba(113, 54, 0, 0.78);
}

@media screen and (min-width: 768px) {
    html {
        font-size: 17px;
    }

    .body-section {
        padding: 1rem 2rem 3rem;
    }

    .body-section h2 {
        text-align: left;
    }

    .section-divider {
        height: 1.18rem;
    }

    .about-intro .link-pane {
        margin: 1rem 0 0 60%;
    }

    .services-intro .link-pane {
        padding-top: 3rem;
        width: 100%;
        margin: 2rem 0 0 0;
    }

    .partners-intro .link-pane {
        margin: 2rem 0 0 60%;
    }

    .services-grid {
        column-count: 2;
        column-gap: 1.6rem;
    }

    .services-cards li {
        padding: 1rem 1.1rem;
    }

    .contact-intro form {
        padding: 1rem 2rem;
    }

    .site-footer .footer-content {
        display: flex;
        gap: 18%;
    }
}

@media screen and (min-width: 1280px) {
    html {
        font-size: 18px;
    }

    .hamburger-label {
        display: none;
    }

    .site-header nav .nav-links {
        display: flex;
        flex-direction: row;
        gap: 2rem;
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        margin: 0;
    }

    .site-header nav .nav-links li a {
        font-size: 1.4rem;
        overflow: visible;

        text-decoration: underline;
        text-decoration-color: var(--color-secondary);
        text-underline-offset: 0.25rem;
        text-decoration-thickness: 0.1rem;
    }

    .site-header nav .nav-links li a:hover {
        text-shadow: 0 0 31px rgba(230, 168, 23, 0.24);
        text-decoration-thickness: 0.15rem;
    }

    .body-section {
        display: grid;
        grid-template-areas:
            "item1 . ."
            ". item2 item3";

        width: 67%;
        padding: 0.5rem 5% 3rem;
    }

    .body-section > :nth-child(1) {
        grid-area: item1;
        justify-self: end;
    }

    .body-section > :nth-child(2) {
        grid-area: item2;
    }

    .body-section > :nth-child(3) {
        grid-area: item3;
    }

    .about-intro > :nth-child(2) {
        padding-right: 1rem;
    }

    .link-pane {
        width: 100%;
    }

    .about-intro .link-pane {
        margin: auto 0 0 1rem;
    }

    .services-intro .link-pane {
        margin: 13% 0 0;
    }

    .partners-intro .link-pane {
        margin: auto 0 0 1rem;
    }

    .contact-intro form button {
        cursor: pointer;
    }

    .contact-intro form button:hover {
        background: rgba(113, 54, 0, 0.92);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    }

    .services-grid {
        column-gap: 2.5rem;
    }

    .services-cards li {
        padding: 1rem 1.3rem;
    }

    .section-divider {
        width: 50%;
    }

    .contact-intro form {
        padding: 1rem 14%;
    }
}