/* RESETS */

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
li,
figure,
figcaption,
blockquote,
dl,
dd {
    margin: 0;
}

* {
    box-sizing: border-box;
}

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


/* Fluid Type */
/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1500,20,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
    --step--2: clamp(0.69rem, calc(0.67rem + 0.14vw), 0.80rem);
    --step--1: clamp(0.83rem, calc(0.79rem + 0.23vw), 1.00rem);
    --step-0: clamp(1.00rem, calc(0.93rem + 0.34vw), 1.25rem);
    --step-1: clamp(1.20rem, calc(1.10rem + 0.49vw), 1.56rem);
    --step-2: clamp(1.44rem, calc(1.30rem + 0.70vw), 1.95rem);
    --step-3: clamp(1.73rem, calc(1.53rem + 0.97vw), 2.44rem);
    --step-4: clamp(2.07rem, calc(1.81rem + 1.33vw), 3.05rem);
    --step-5: clamp(2.49rem, calc(2.13rem + 1.80vw), 3.82rem);
    --step-6: clamp(2.99rem, calc(2.50rem + 2.42vw), 4.77rem);
}

/* SPACE PALETTE */
/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1500,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8|12|18|26,s-l|xl-3xl|l-3xl&g=s,l,xl,12 */

:root {
    --space-3xs: clamp(0.25rem, calc(0.23rem + 0.08vw), 0.31rem);
    --space-2xs: clamp(0.50rem, calc(0.47rem + 0.17vw), 0.63rem);
    --space-xs: clamp(0.75rem, calc(0.70rem + 0.25vw), 0.94rem);
    --space-s: clamp(1.00rem, calc(0.93rem + 0.34vw), 1.25rem);
    --space-m: clamp(1.50rem, calc(1.40rem + 0.51vw), 1.88rem);
    --space-l: clamp(2.00rem, calc(1.86rem + 0.68vw), 2.50rem);
    --space-xl: clamp(3.00rem, calc(2.80rem + 1.02vw), 3.75rem);
    --space-2xl: clamp(4.00rem, calc(3.73rem + 1.36vw), 5.00rem);
    --space-3xl: clamp(6.00rem, calc(5.59rem + 2.03vw), 7.50rem);
    --space-4xl: clamp(8.00rem, calc(7.46rem + 2.71vw), 10.00rem);
    --space-5xl: clamp(12.00rem, calc(11.19rem + 4.07vw), 15.00rem);
    --space-6xl: clamp(18.00rem, calc(16.78rem + 6.10vw), 22.50rem);
    --space-7xl: clamp(26.00rem, calc(24.24rem + 8.81vw), 32.50rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.25rem, calc(0.15rem + 0.51vw), 0.63rem);
    --space-2xs-xs: clamp(0.50rem, calc(0.38rem + 0.59vw), 0.94rem);
    --space-xs-s: clamp(0.75rem, calc(0.61rem + 0.68vw), 1.25rem);
    --space-s-m: clamp(1.00rem, calc(0.76rem + 1.19vw), 1.88rem);
    --space-m-l: clamp(1.50rem, calc(1.23rem + 1.36vw), 2.50rem);
    --space-l-xl: clamp(2.00rem, calc(1.53rem + 2.37vw), 3.75rem);
    --space-xl-2xl: clamp(3.00rem, calc(2.46rem + 2.71vw), 5.00rem);
    --space-2xl-3xl: clamp(4.00rem, calc(3.05rem + 4.75vw), 7.50rem);
    --space-3xl-4xl: clamp(6.00rem, calc(4.92rem + 5.42vw), 10.00rem);
    --space-4xl-5xl: clamp(8.00rem, calc(6.10rem + 9.49vw), 15.00rem);
    --space-5xl-6xl: clamp(12.00rem, calc(9.15rem + 14.24vw), 22.50rem);
    --space-6xl-7xl: clamp(18.00rem, calc(14.07rem + 19.66vw), 32.50rem);

    /* Custom pairs */
    --space-s-l: clamp(1.00rem, calc(0.59rem + 2.03vw), 2.50rem);
    --space-xl-3xl: clamp(3.00rem, calc(1.78rem + 6.10vw), 7.50rem);
    --space-l-3xl: clamp(2.00rem, calc(0.51rem + 7.46vw), 7.50rem);
}

/* Colours */
:root {
    --color-bg-off-white: rgba(244, 238, 233, 1);
    --color-bg-off-white-20: rgba(244, 238, 233, 0.2);
    --color-bg-peach: #e8dcd1;
    --color-bg-pale-pearl: rgba(255, 242, 222, 1);
    --color-bg-calico: rgba(232, 192, 155, 1);
    --color-bg-near-white: rgba(255, 255, 249, 1);
    --color-grey-blue: rgba(114, 130, 159, 1);
    --color-black-olive: rgba(59, 60, 54, 1);
    --color-med-light-grey: rgba(170, 170, 170, 1);
    --color-warm-grey: rgba(190, 173, 173, 1);
    --color-name-me-1: #967C64;
    /* related to calico - reduced LIGHTNESS */
    --color-name-me-2: #62625e;
    /* related to black olive - a lighter tint */
}

/* Colours as HEX */
/*
:root {
--color-bg-off-white: #F4EEE9;
--color-bg-peach: #E8DCD1;
--color-bg-pale-pearl: #FFF2DE;
--color-bg-calico: #E8C09B;
--color-bg-near-white: #FFFFF9;
--color-grey-blue: #72829F;
--color-black-olive: #3B3C36;
--color-med-light-grey: #AAAAAA;
--color-warm-grey: #BEADAD;
}
*/

/* Rest of CSS */

* {
    line-height: calc(1em + 0.5rem);
}
/* max widths */
.max-width-70ch {
    max-width: 70ch;
    margin: auto;
}

.max-width-140ch,
nav,
.footer-row {
    max-width: 140ch;
    margin: auto;
    max-width: 1500px;
    
}
body {
    font-family: 'Lora', sans-serif;
    color: var(--color-name-me-2);
    background-color: var(--color-bg-near-white);
    margin: 0;
    padding: 0;
   /* padding-block: var(--step-0); */
    font-size: var(--step-0);
    /* line-height: 1.5; */

}

/* typography */

p,
h1,
h2,
h3,
h4,
h5 {
    font-family: 'Lora', serif;
    max-width: 70ch;
    margin: auto;
}

p {
    font-size: var(--step-0);
}

h1 {
    font-weight: 400;
    font-size: var(--step-4);
    line-height: 1.1;
}

h2 {
    font-weight: 600;
    font-size: var(--step-3);
    line-height: 1.2;

}

h3 {
    font-weight: 500;
    font-size: var(--step-2);
}

h4 {
    font-weight: 600;
    font-size: var(--step-1);
}

li {
    list-style: circle;
}




/* Nav CSS */

/*
nav,
footer,
.nav-links a,
.footer-links a {
    color: var(--color-black-olive);
}
*/
.logo a {
    text-decoration: none;
    color: var(--color-name-me-2);
}

.logo a:hover {
    color: var(--color-grey-blue);
}

.logo img {
    max-height: var(--space-l);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-m) calc(var(--space-m)*2) var(--space-m); /* THIS CODE 16-07-23 */
    box-shadow: 0px 4px -1px 0px rgba(0, 0, 0, 0.16);
    background-color: var(--color-bg-near-white);
    margin-top: calc(var(--step-0) * -1);
    /* to counteract the body block padding */
}

.tagline {
    color: var(--color-grey-blue);
}

nav>.tagline {
    width: 50%;
    /* adjust as needed */
    text-align: center;
}

.tagline h2 {
    font-size: var(--step-1);
    font-weight: 500;
}

.tagline .emphasize {
    font-weight: 500;
    font-style: italic;
}

/* NAV LINKS */

/*
.nav-links a,
.footer-links a {
    text-decoration: none;
    padding: var(--space-s);
}

.nav-links a.active {
    text-decoration: underline;
}

.nav-links a:hover {
    color: var(--color-med-light-grey);
} */

nav>.logo h1 {
    font-size: var(--step-3);
}

/* NAV MEDIA QUERY */

@media (max-width: 500px) {

    nav {
        /* Stack items vertically */
        flex-direction: column;
        margin: ;
        padding: 0;
    }

    .logo,
    .tagline {
        /* Full width within nav */
        width: 100%;
        text-align: center;
    }

    nav>.logo h1 {
        /* Adjust font size within nav */
        font-size: var(--step-3);
    }

    .tagline {
        margin: var(--space-s);
    }
}

/* LANDING PAGE CSS */

section {
    padding: var(--space-xs-l);
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#privacy-policy {
    background-color: var(--color-bg-off-white);
    padding: var(--space-2xl) var(--space-s);
}

#privacy-policy h1 {
    font-weight: 600;
    font-size: var(--step-3);
    line-height: 1.2;
}

#privacy-policy h2 {
    font-weight: 600;
    font-size: var(--step-2);
    line-height: 1.2;
}

/* Section 1 CSS */

#landing {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Vertically align to the top <---- AUSTIN APPLY THIS TO THE TEXT, but NOT to the image*/
    padding: var(--space-l);
    background-image: url(/img/bg-landing.png);
    background-size: cover;
    background-position: center;
   min-height: 600px;
    /* AUSTIN CHECK WHAT THIS SPACE IS - what is provided in the parent */
}

.landing-content {
    text-align: left;
}

.landing-content h1 {
    font-size: var(--step-4);
}

.landing-content h2 {
    color: #72829f;
    margin-top: 0;
}

/* AUSTIN - Check which img / image tag is effecting this - ask Chat GPT which should be kept or removed */

#landing img,
.team-member img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: cover;
    border-radius: 1%;
}

#landing img {
    max-height: 85%;
    max-height: 70%;
    border-radius: 5%;
    border-end-end-radius: 25%;
    border-end-start-radius: 25%;
 /*   outline-offset: 1vh;
    outline-style: double;
    outline-width: var(--space-xs);
    outline-color: #beadad; */

}

#landing div {
    max-height: 90%;
    margin: var(--space-s-l);
}

/* Section 2 BLURB CSS */

#blurb {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url(/img/bg-blurb.png);
    background-size: cover;
    background-position: left;
    text-align: center;
    min-height: 80vh;
}

.blurb-content {
    padding: var(--space-l) var(--space-s-3xl) var(--space-l);
}

#blurb h2 {
    font-size: var(--step-2);
    max-width: 35ch;
    margin: auto;
    color: var(--color-name-me-1);
}

#blurb h3 {
    font-size: var(--step-1);
    color: var(--color-name-me-1);
}

#blurb p {
    font-size: var(--step-0);
    color: var(--color-name-me-1);
}

#about {
    padding: var(--space-m); /* 16-07-23 */
    background-color: #fffff9;
    min-height: 600px;
    max-height: 70vh;
}

.about-content {
    text-align: center;
    margin: auto;
}


.about-columns {
    display: flex;
    justify-content: space-between;
    padding: var(--space-l);
}

.about-columns div {
    width: 100%;
    text-align: left;
    padding: var(--space-s-l);
}

.about-card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: 100%;
    border-radius: 5px;
    padding: var(--space-l);
    margin: var(--space-xs);
    background-color: var(--color-bg-off-white);
}

#about h2 {
    color: var(--color-grey-blue);
}

.about-card h3 {
    text-align: center;
}

.about-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

/* TEAM CSS */

#team {
    background-color: var(--color-bg-off-white);
    display: flex;
    justify-content: center;
    padding: 50px 0;
    flex-wrap: wrap;
    height: max-content;
    /*background-image: url(/img/bg-team.png); */
    background-size: cover;
    background-position: left;
    align-items: flex-start;
}

.team-member {
    width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: var(--space-s);
    margin: var(--space-l);
    background-color: var(--color-bg-peach);
    position: relative;
    text-align: center;
    margin: 2.5% 0%;
    /* FIX THIS - NO PERCENTAGE VALUES IN SPACING! */
    border-radius: 1%;

    height: 100%;
}

.portrait-container {
    width: var(--space-l);
}

.team-member img {
    /*width: 70%;
    min-height: 70%;*/
    max-height: 70vh;
    margin-top: var(--space-m);
    object-fit: cover;
    object-position: 50% 40%;
    aspect-ratio: 1;
    border-radius: 7%;
}

.team-member h3 {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-3xs);
}

.bio {
    display: none;
    border-radius: 8px;
    background-color: var(--color-bg-off-white-20);
    padding: var(--space-xs) var(--space-m);
    margin: var(--space-xs);
}

.bio p {
    text-align: left;
    max-width: 50ch;
    margin: auto;
    padding: var(--space-xs);
}

@media (min-width: 600px) {
    .team-member {
        width: 30%;
    }
}

/* Responsive CSS code */

* {
    box-sizing: border-box;
}


.about-columns,
#team,
#landing {
    display: flex;
    flex-direction: column;
}

@media (min-width: 800px) {

    .about-columns,
    #team,
    #landing {
        flex-direction: row;
    }

    .landing-image {
        display: flex;
        flex-direction: row;
        justify-content: center;
        min-width: 100px;
        max-width: 500px;

    }

    #landing img {
        
        object-fit: cover;
        object-position: top;
    }

    .blurb-wrapper {
        margin: auto var(--space-2xl) auto var(--space-2xl);
    }

}

/* Width + sizes AFTER Breakpoint IE smaller screens*/

.team-member,
.about-columns,
#landing div {
    width: 95%;
    margin: var(--space-xs);
}

/* Width + sizes AFTER break point DOWN */

@media (min-width: 800px) {

    .team-member,
    .about-columns div {
        width: 45%;
    }
}


/* NEW FOOTER - MOVE THIS UP IF IT WORKS OKAY! */

footer,
nav {
    flex-wrap: wrap;
    padding-top: var(--space-m);
}


footer {
    background-color: var(--color-bg-off-white);
    justify-content: center;
}

footer a {
    color: var(--color-grey-blue);
    text-decoration: none;
}

footer h3 {
    font-weight: 600;
}

footer a:hover,
footer a:focus {
    text-decoration: underline;
}

/* CELL 1 */

.footer-cell-logo {
    text-align: center;
}

footer .logo h1 {
    font-size: var(--step-2);
}

footer .logo {
    padding: 0;
}

/* CELL 2, 3, 4 */

.footer-cell-contact h3,
.footer-cell-get-in-touch h3,
.footer-cell-acknowledgement h3 {
    font-size: var(--step-0);
}

.footer-cell-contact p,
.footer-cell-get-in-touch p,
.footer-cell-acknowledgement p {
    font-size: var(--step--1);
}

.footer-cell-contact {
    text-align: center;
}

.footer-cell-get-in-touch {
    display: flex;
    justify-content: center;
    /* HOW DO I STOP THIS STRETCHING - CHECK CHAT GPT */
}

/* CELL 4 */

.footer-cell-acknowledgement h3,
.footer-cell-acknowledgement p {
    margin: auto;
    max-width: 70ch;
    text-align: center;
}

/* CELL 5, 6 */

.footer-cell-copyright p,
.footer-cell-policy p {
    font-size: var(--step--1);
}

.footer-cell-policy {
    display: flex;
    justify-content: space-between;

}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: var(--space-s);
    margin-right: var(--space-s);

}

.footer-cell {
    flex: 1 1 100%;
    box-sizing: border-box;
    padding: var(--space-s);
    /*border: 1px solid #bebaba; */
}

@media (min-width: 500px) {

    .footer-cell-contact,
    .footer-cell-get-in-touch,
    .footer-cell-copyright,
    .footer-cell-policy {
        flex: 1 1 calc(50% - 2*var(--space-s));
    }

    .footer-cell-logo,
    .footer-cell-acknowledgement {
        flex: 1 1 100%;
    }

}

@media (min-width: 800px) {
    .footer-cell {
        flex: 1 1 calc(33.33% - 2*var(--space-s));
    }

    /* overriding the above to make acknowledgement straddle the footer */

    .footer-cell-acknowledgement {
        flex: 1 1 100%;
    }

    .footer-row {
        margin: auto;
    }

    
}


/* CONTACT FORM RD 2 */

#contact-form-popup {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.7);
}

.lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1001;
}

#contact-form {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1002;
    background: var(--color-bg-peach);
    padding: var(--space-l);
    border-radius: 5px;
    width: 90%;
    max-width: 600px;

}

#contact-form h3 {
    font-size: var(--step-1);
    margin-bottom: var(--step--1);
    max-width: 33ch;
}

#contact-form label,
input,
textarea {
    display: block;
    padding: 5px;
    border: none;
    font-size: var(--step-0);
    border-radius: 5px;
}

label {
    font-size: var(--step-0);
}

#contact-form label {
    margin-bottom: var(--space-s);
}

input,
textarea {
    color: #81817e;
    font-family: 'Roboto', sans-serif;
    background-color: var(--color-bg-near-white);

}

.email-label input {
    width: 70%;
}

#contact-form textarea {
    width: 80%;
    height: var(--space-4xl);
}

#confirmation-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1003;
    background: var(--color-bg-peach);
    padding: var(--space-l);
    border-radius: 5px;
    width: 90%;
    max-width: 600px;
    text-align: center;
    padding: var(--space-m);
}


#confirmation-message {
    text-align: center;
}

#confirmation-message h3 {
    margin: var(--space-s) auto var(--space-s) auto;
    
}

/* BUTTONS */

.button_peach {
    background-color: var(--color-bg-peach);
    color: var(--color-grey-blue);
    border: 2px solid var(--color-bg-calico);
    border-radius: 15px;
    padding: var(--space-2xs);
    margin: var(--space-xs);
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 1s ease, color 1s ease, border 1s ease;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    font-family: 'lora', serif;
    font-size: var(--step-0);
}

.button_peach:hover {
    background-color: var(--color-grey-blue);
    color: var(--color-bg-off-white);
    border-color: var(--color-grey-blue);
}

.button_peach:active {
    background-color: var(--color-bg-pale-pearl);
    border-color: var(--color-grey-blue);
}

.to-top {
    position: fixed;
    bottom: var(--space-l);
    /* Position button from bottom */
    right: var(--space-l);
    /* Position button from right */
}

@media (min-width: 1900px) {
    .to-top { 
        bottom: 4%;
        right: 10%;

    }
}
.to-top, #exit-button {
    background-color: var(--color-bg-peach);
    color: var(--color-grey-blue);
    padding: var(--space-xs);
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.5s ease, color 1s ease;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}

#exit-button {
    position: absolute;
    right: var(--space-3xs);
    /* You may adjust this to position the button */
    top: var(--space-2xs);
    /* You may adjust this to footerposition the button */
}

#exit-button:focus,
#exit-button:hover,
.to-top:hover,
.to-top:focus {
    background-color: var(--color-grey-blue);
    color: var(--color-bg-peach);
}





/* Utilities */

.flow>*+* {
    margin-top: var(--flow-space, 1em);
}

/* DO I WANT TO USE THIS? */

.consistent-spacing {
    padding-left: var(--space-l);
    padding-right: var(--space-l);
    margin: auto;
    max-width: calc(100% - 2 * var(--space-l));
}


/* Update to responsive code for consistent spacing */

@media (min-width: 800px) {
    .consistent-spacing {
        max-width: calc(50% - 2 * var(--space-l));
    }
}

.footer-cell-get-in-touch {
    display: none;
}