@layer bootstrap, overrides;

@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css') layer(bootstrap);

@layer overrides {

    /* ========== GLOBAL OVERRIDES ========== */
    
    * {
        box-sizing: border-box;
    }
    

    /* ========== CSS VARIABLES ========== */

    :root {
        --theme-ink: #1a1122;
        --theme-violet: #7c5e97;
        --theme-dusty-violet: #d4b0d3;
        --theme-grey: #e4e1e5;
        --theme-pink: #e34b83;
        --theme-yellow: #f6d73e;
        --theme-teal: #12868d;
        --theme-tangerine: #f16051;
        --theme-transparent: rgba(0,0,0,0);
    }


    /* ========== GLOBAL STYLING ========== */
    
    body {
        margin: auto;
    }

    nav {
        width: 90%;
        margin: auto;
    }

    h1, h2, h3, h4 {
        padding: 24px 0;
        font-family: "Poppins", sans-serif;
        color: var(--theme-ink)
    }

    .text-medium {
        font-size: 1.1rem;
        padding-bottom: 4px;
    }

    .whisper {
        color: var(--theme-violet);
        font-style: italic;
    }

    .whisper>a {
        color: var(--theme-violet);
    }

    p, a {
        padding-bottom: 4px;
        padding-top: 0;
        font-family: "Work Sans", sans-serif;
        color: var(--theme-ink);
    }

    .btn-primary {
        background-color: var(--theme-violet);
        border: var(--theme-violet);
    }

    .btn-primary:hover {
        background-color: var(--theme-ink);
    }

    .mainContainer {
        width: 90%;
        margin: auto;
        padding: 32px 0;
    }


    /* ========== HEADER & NAV ========== */

    header {
        /* background-color: var(--theme-grey); */
        padding: 8px 0;
    }

    a.navbar-brand>img {
        max-height: 76px;
    }


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

    .hero {
        margin-bottom: 64px;
    }

    .heroImg {
        max-height: 500px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Source for Object fit: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit */

    .heroImg>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .heroBlurb {
        padding-right: 20%;
    }

    @media (max-width: 992px) {

        .heroBlurb {
            padding-right: 0;
            width: 90%;
            margin: auto;
        }
        
    }


    /* ========== GALLERY ========== */

    #Gallery {
        padding: 32px 0;
        width: 90%;
        margin: auto;
    }

    .workGallery {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
    }

    .galleryCard {
        background-color: var(--theme-grey);
        border: none;
        border-radius: 0;
    }

    .imgContainer {
        overflow: hidden;
        
    }

    /* Source for transition property: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Transitions/Using */

    .imgContainer>.card-img-top {
        border-radius: 0;
        transition: transform 0.3s ease-out;
    }

    .galleryCard:hover img {
        transition: transform 0.5s ease-in;
        transform: scale(1.1);
    }

    .workGallery>a {
        text-decoration: none;
    }

    .cardTitle {
        color: var(--theme-ink);
        text-decoration: none;
    }

    @media (max-width: 992px) {

        .workGallery {
            grid-template-columns: 1fr;
        }
    }

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

    .projectHero {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-height: 400px;
        overflow: hidden;
        margin-bottom: 32px;
    }

    .projectHero>img {
        width: 100%;
        height: 100%;
    }

    @media (max-width: 992px) {
    
        .projectHero {
            margin-bottom: 0;
        }

    }


    .project {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        overflow: hidden;
        margin-bottom: 16px;
    }

    .tag {
        background-color: var(--theme-grey);
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .imgTrio {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 16px;
        margin-bottom: 16px;
    }

    .imgTrio>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .imgTall {
        grid-row: 1 / 3;
        grid-column: 2;
    }

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

    /* Source for form: https://www.w3schools.com/howto/howto_css_contact_form.asp */

    label {
        padding-top: 16px;
    }

    form>button {
        margin-top: 32px;
    }

    textarea {
        min-height: 250px;
    }


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

    footer {
        background-color: var(--theme-grey);
        margin-top: 64px;
        min-height: 200px;
        padding-top: 64px;
    }

    .socialIcon {
        max-height: 24px;
    }

}