/*
Theme Name: CUHK GRC
Description: Custom theme for CUHK Gender Research Centre
Author: Creasant Digital
Version: 1.0
Text Domain: cuhk-grc
Tags: custom, conference, academic
*/

/* Base Typography */
body {
    color: #3d3d3d;
    font-family: 'Myriad Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 36px; /* 150% */
}

main {
    position: relative;
}

main .wpcf7 {
    max-width: 1200px;
    margin: auto;
}

main::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 280px;
    left: 0;
    width: 547px;
    aspect-ratio: 547 / 614;
    background-image: url('./assets/images/bg-pattern.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

main::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 250px;
    right: 0;
    width: 206px;
    aspect-ratio: 206 / 79;
    background-image: url('./assets/images/bg-pattern-2.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #750e6d;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1em;
}

h1 {
    font-size: 42px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

h2 {
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 46px; /* 143.75% */
    margin-bottom: 30px;
}

ul,
ol {
    padding-left: 1em;
}

p + p {
    margin-top: 1em;
}

a {
    color: inherit;
}

button,
input[type='submit'] {
    appearance: none;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

input[type='text'],
input[type='email'],
input[type='url'],
input[type='tel'],
input[type='number'],
input[type='search'],
input[type='password'],
textarea {
    border: none;
    width: 100%;
    background-color: #efefef;
    padding: 15px 20px;
    font-family: 'Myriad Pro';
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 32px; /* 177.778% */
    letter-spacing: 0.02em;
}

input[type='text']::placeholder,
input[type='email']::placeholder,
input[type='url']::placeholder,
input[type='tel']::placeholder,
input[type='number']::placeholder,
input[type='search']::placeholder,
input[type='password']::placeholder,
textarea::placeholder {
    color: #a7a7a7;
}

input[type='submit'] {
    display: inline-flex;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: 1.5px solid #e7b000;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

input[type='submit']:hover {
    background-color: #e7b000;
    color: #ffffff;
}

/* Gutenberg Button Block */
.wp-block-button__link {
    display: inline-flex;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: 1.5px solid #e7b000;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
    color: #3d3d3d;
}

.wp-block-button__link:hover {
    background-color: #e7b000;
    color: #ffffff;
}

/* Custom Button Link (TinyMCE Format) */
.button-link {
    display: inline-flex;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: 1.5px solid #e7b000;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
    color: #3d3d3d;
}

.button-link:hover {
    background-color: #e7b000;
    color: #ffffff;
}

.container {
    margin: 0 auto 100px;
    padding: 0 56px;
    max-width: 1812px;
}

@media (max-width: 1280px) {
    body {
        font-size: 22px;
    }

    main::before {
        top: 150px;
        width: 142px;
        aspect-ratio: 142 / 698;
        background-image: url('./assets/images/bg-pattern-tablet.png');
    }

    main::after {
        top: 90px;
        width: 86px;
        aspect-ratio: 86 / 33;
    }

    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 28px;
        margin-bottom: 25px;
    }

    input[type='text'],
    input[type='email'],
    input[type='url'],
    input[type='tel'],
    input[type='number'],
    input[type='search'],
    input[type='password'],
    textarea {
        padding: 15px 18px;
    }

    .container {
        margin: 0 auto 50px;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 24px;
    }

    main::before {
        top: 150px;
        width: 128px;
        aspect-ratio: 110 / 128;
        background-image: url('./assets/images/bg-pattern-mobile.png');
    }

    main::after {
        top: 120px;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        margin-bottom: 20px;
    }

    .container {
        padding: 0 18px;
    }

    input[type='text'],
    input[type='email'],
    input[type='url'],
    input[type='tel'],
    input[type='number'],
    input[type='search'],
    input[type='password'],
    textarea {
        padding: 10px 20px;
    }

    input[type='submit'] {
        font-size: 18px;
    }
}

/* Contact Form 7 Customizations */
.wpcf7-spinner {
    display: none !important;
}