/* -----------------------------------------------------Home Page---------------------------------------------------------------*/
/* global styles */
    body {
        font-family: 'Lora', serif;
        margin: 0;
        padding: 0;
        background-image: url("images/background.jpg");
        background-size: 400%;
        background-repeat: no-repeat;
        background-position: right;
        background-attachment: fixed;
    }

    h1 {
        font-family: 'Playfair Display', serif;
        font-size: 4em;
        text-align: center;
    }

    h2 {
        font-size: 3em;
        font-family: 'Playfair Display', serif;
    }

    h3 {
        font-family: 'Playfair Display', serif;
        font-size: 2em;
    }


    /* HEADER */
    nav {
        text-align: center;
        padding: 15px;
        width: 100%;
    }

    nav a {
        color: #473721;
        text-decoration: none;
        font-size: 1.5em;
        padding: 35px;
    }

    .subtitle {
        color: #FCFAED;
        margin-top: -10px;
        margin-bottom: 20px;
        font-style: italic;
        opacity: 0.8;
    }

/* Cream content box on most pages*/
    .content {
        background-color: #FCFAED;
        max-width: 1600px;
        margin: 40px auto;
        padding: 40px;
        border-radius: 8px;
        box-shadow: 0px 0px 30px rgba(0,0,0,0.8);
    }

/* hero image section */
    #hero {
        text-align: center;
        margin-bottom: 40px;
        position: relative;
    }

    #hero img {
        width: 100%;
        max-width: 1400px;
        height: auto;
        display: block;
        margin: 0 auto;
        border-radius: 8px;
    }

    .hero-text {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: black;
        font-size: 2.5em;
        width: 80%;
        font-family: 'Playfair Display', serif;
        padding: 0 20px;
    }

/* about me */
    .profile-image img {
        border-radius: 5px;
        height: 600px;
        margin-left: 100px;
    }

    #profile {
        display: flex;
        align-items: center;
        gap: 60px;
        margin-bottom: 80px;
        margin-right: 100px;
    }

    .profile-text {
        max-width: 900px;
    }

/* resume*/
    #resume {
        background-color: #473721;
        color: #FCFAED;
        padding: 120px;
        border-radius: 10px;
        margin-top: 60px;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    .resume-nav {
        background-color: #25190D;
        text-align: center;
        padding: 10px;
        width: 55%;
        border-radius: 50px;
        font-size: .6em;
        margin: 0 auto;
    }

    .resume-nav a {
        color: #FCFAED;
        display: inline-block;
        padding: 8px 20px;
    }

    #resume h1 {
        font-family: 'Playfair Display', serif;
        font-size: 4em;
        text-align: center;
    }

    #resume h2 {
        font-size: 3em;
        margin-bottom: 10px;
    }

    #resume h3,
    #resume h4 {
        margin: 5px 0;
    }

    .resume-columns {
        display: flex;
        gap: 40px;
        margin-top: 40px;
    }

    .resume-columns div {
        flex: 1; /* I am not sure I remember talking about flex in CS310, however I learned about it in Web Design 1 with Lisa Truax. 
        I use this tag a lot throughout my webpage styling. */
    }

/* -----------------------------------------------------Photography page---------------------------------------------------------------*/

    .photo-content {
        background-color: #3c2b1b;
        max-width: 1100px;
        margin: 0 auto 60px;
        padding: 50px;
        border-radius: 12px;
    }

    .photo-row {
        display: flex;
        gap: 40px;
        margin-bottom: 70px;
        color: #FCFAED;
        align-items: flex-start;
    }

    .photo-row img {
        width: 500px;
        height: 500px;
        object-fit: cover;
        border-radius: 10px;
        display: block;
    }

    .text-block {
        max-width: 700px;
    }

    .text-block h2 {
        font-family: 'Playfair Display', serif;
        font-size: 2em;
        margin-bottom: 10px;
    }

    .text-block p {
        line-height: 1.7;
        font-size: 1.1em;
    }


/* -----------------------------------------------------Writing Page---------------------------------------------------------------*/

    .writing-samples {
        display: flex;
        flex-direction: column;
        gap: 40px;
        max-width: 1000px;
        margin: 0 auto;
        padding: 50px 20px;
    }

    .sample-box {
        background-color: #FCFAED;
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .sample-title {
        margin-bottom: 15px;
        font-size: 24px;
        color: #25190D;
    }

    .sample-intro {
        margin-bottom: 15px;
        color: #3c2b1b;
        line-height: 1.6;
    }

    .sample-full summary {
        margin-top: 10px;
        padding: 10px 18px;
        background-color: #9E5407;
        color: #FCFAED;
        border-radius: 8px;
        font-size: 16px;
        display: inline-block;
    }

    .sample-full summary:hover {
        background-color: #7f4306;
    }

    .sample-full p {
        margin-top: 10px;
        color: #3c2b1b;
        line-height: 1.6;
    }

    .button-link {
        display: inline-block;
        background-color: #9E5407;
        color: #FCFAED;
        padding: 10px 18px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 16px;
        margin-top: 10px;
    }

    .button-link:hover {
        background-color: #7f4306;
    }

    /* I used Chat GPT to help me solve a problem in which my button would show up in between my writing, 
    rather than move to the bottom along with the sample once extended. The order tags specifically helped me solve this issue */
    .rest-of-writing-combined {
        display: flex;
        flex-direction: column;
    }

    .speech-details summary {
        order: 2;
        width: fit-content;
        display: inline-block;
    }

    .speech-details .full-text {
        order: 1;
        margin-bottom: 15px;
    }

/* -----------------------------------------------------Contact page---------------------------------------------------------------*/

    .contact-wrapper {
      max-width: 1400px;
      margin: 60px auto;
      display: flex;
      gap: 20px;
      padding: 20px;
    }



    /* LEFT COLUMN */

    .contact-info {
      background-color: #473721;
      color: #FCFAED;
      flex: 1;
      padding: 40px;
      border-radius: 10px;
      font-size: 1.2em;
      box-shadow: 0px 0px 30px rgba(0,0,0,0.8);
    }

    .contact-info h2 {
      font-family: 'Playfair Display', serif;
      font-size: 2em;
      margin-bottom: 20px;
    }

    .contact-info p {
      margin: 18px 0;
      display: flex;
      align-items: center;
      padding-top:50px;
      gap: 10px;
    }

    .contact-info a {
      color: #FCFAED;
      text-decoration: none;
    }

    .contact-info a:hover {
      text-decoration: underline;
    }

    .contact-info i {
      font-size: 1.3em;
    }



    /* RIGHT COLUMN */

    .contact-form {
      background-color: #FCFAED;
      flex: 1.5;
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0px 0px 30px rgba(0,0,0,0.8);
    }

    .contact-form h2 {
      font-family: 'Playfair Display', serif;
      font-size: 2em;
      margin-bottom: 20px;
    }

    .contact-form label {
      display: block;
      margin-top: 20px;
      margin-bottom: 5px;
      font-weight: 500;
      color: #3c2b1b;
    }

    .contact-form input,
    .contact-form textarea {
      width: 100%;
      padding: 12px;
      border-radius: 6px;
      border: 1px solid #c9b89a;
      background-color: #fff;
      font-size: 1em;
      font-family: 'Lora', serif;
    }

    .contact-btn {
      margin-top: 25px;
      background-color: #9E5407;
      color: #FCFAED;
      border: none;
      padding: 12px 20px;
      font-size: 1.1em;
      border-radius: 8px;
      cursor: pointer;
      font-family: 'Lora', serif;
    }

    .contact-btn:hover {
      background-color: #7f4306;
    }



/* -----------------------------------------------------design/fine artPage---------------------------------------------------------------
Throughout this section there are tags that I used Chat GPT to learn about because I was struggling very much to figure out how to get my photos
to open up nicely when clicked on. These consist of "transition" "pointer-events" etc.*/

    .design-wrapper {
        background-color: #FCFAED;
        padding: 20px 0;
    }

    /* Intro and design sections */
    .design-section,
    .design-intro {
        background-color: #3c2b1b;
        padding: 40px;
        border-radius: 12px;
        max-width: 1300px;
        margin: 40px auto;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

    .design-intro h2 {
      color: #FCFAED;
      font-size: 2.4rem;
      margin-bottom: 15px;
    }

    .design-intro p {
      color: #FCFAED;
      font-size: 1.1rem;
      line-height: 1.6;
    }

    .design-section h3 {
      color: #FCFAED;
      font-size: 1.8rem;
      margin-bottom: 20px;
    }

    .design-gallery {
      background: #3c2b1b;
      padding: 60px 30px;
      max-width: 1300px;
      margin: 0 auto 80px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 35px;
      border-radius: 8px;
    }


    /* Thumbnails*/

    .thumb {
      position: relative;
      aspect-ratio: 1 / 1;
      display: block;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    }

    .brandbook-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      text-align: center;
      border-radius: 12px;
      background-color: #3c2b1b;
      color: #FCFAED;
      text-decoration: none;
      font-size: 1.3rem;
      font-weight: 600;
      transition: transform .2s ease, background .3s ease; 
      box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    }

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



    /* Hover overlay text */
    .thumb .overlay {
      position: absolute;
      inset: 0;
      background: rgba(252, 250, 237, 0.5);
      color: #3c2b1b;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 1rem;
      opacity: 0;
      padding: 20px;
      transition: opacity 0.3s ease;
    }

    .thumb:hover .overlay {
      opacity: 1;
    }

    .brandbook-btn {
      background-color: #3c2b1b;
      color: #FCFAED;
      text-decoration: none;
      font-size: 1.3rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .2s ease, background .3s ease;
    }

    .brandbook-btn:hover {
      background-color: #5a4630;
      transform: translateY(-4px);
    }

    /*full popup images*/
    .lightbox {
      opacity: 0;
      pointer-events: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.85);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40px;
      transition: opacity 0.2s ease;
      z-index: 9999;
    }

    .lightbox img {
      max-width: 90%;
      max-height: 90%;
      border-radius: 10px;
    }

    .lightbox:target {
        opacity: 1;
        pointer-events: auto;
        scroll-margin-top: 0;
    }

    .lightbox .close {
      position: absolute;
      inset: 0;
    }


/* Had an issue with scrolling when clicking out of image pop ups. I asked ChatGPT to assist in fixing the code and this was the solution it offered.*/
html {
    scroll-behavior: auto !important;
}


/* footer */
    footer {
        margin-top: 80px;
    }

    .footer-top-bar {
        background-color: #9E5407;
        width: 140px;
        border-radius: 10px 10px 0 0;
        padding: 10px;
        margin-left: 40px;
    }

    .top-button {
        color: white;
        text-decoration: none;
        font-size: 1em;
    }

    .footer-main {
        background-color: #25190D;
        color: #FCFAED;
        padding: 50px;
        display: flex;
        justify-content: space-between;
        gap: 50px;
    }

    .footer-column h4 {
        margin-bottom: 10px;
        font-family: 'Playfair Display', serif;
        font-size: 1.3em;
    }

    .footer-column p {
        line-height: 1.6;
        margin: 0;
    }

    .footer-column a {
        text-decoration: none;
        color: #FCFAED;
    }

    .footer-bottom {
        background-color: #25190D;
        border-top: 1px solid #C89F68;
        text-align: center;
        padding: 15px 0;
        color: #FCFAED;
        font-size: 0.9em;
    }

    .footer-column i {
      margin-right: 8px;
    }