/* Global styles */
@font-face {
    font-family: 'The Seasons Bold';
    src: URL('/fonts/theseasons-bd.ttf') format('truetype');
}

@font-face {
    font-family: 'The Seasons Light';
    src: URL('/fonts/theseasons-lt.ttf') format('truetype');
}

@font-face {
    font-family: 'The Seasons Regular';
    src: URL('/fonts/theseasons-reg.ttf') format('truetype');
}

@font-face {
    font-family: 'Garamond Premier Pro Semibold';
    src: URL('/fonts/Garamond Premier Pro Semibold.otf') format('opentype');
}

@font-face {
    font-family: 'Garamond Premier Pro Display';
    src: URL('/fonts/Garamond Premier Pro Display.otf') format('opentype');
}

@font-face {
    font-family: 'Garamond Premier Pro Light Display';
    src: URL('/fonts/Garamond Premier Pro Light Display.otf') format('opentype');
}

@font-face {
    font-family: 'Garamond Premier Pro Italic Display';
    src: URL('/fonts/Garamond Premier Pro Italic Display.otf') format('opentype');
}

@font-face {
    font-family: 'Garamond Premier Pro Light Italic Display';
    src: URL('/fonts/Garamond Premier Pro Light Italic Display.otf') format('opentype');
}


/* Hero Image Layouts */
.hero-image-container {
    margin-bottom: 2rem;
    overflow: hidden;
    max-height: 70vh;
}

.hero-image-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* Top layout specific styles */
.top-layout-content {
    max-width: 100%;
    width: 100%;
}

.top-layout-description {
    /* Wider description column for top layout */
    max-width: 100%;
}

/* Numbered Style Classes */
.style-01 {
    /* Reserved for future use */
}

.style-02 {
    font-family: 'The Seasons Light', sans-serif;
    font-size: 110pt;
    line-height: 0.9;
    letter-spacing: 1px;
    color: #454545;
}

.style-03 {
    /* Reserved for future use */
}

.style-04 {
    /* Reserved for future use */
}

.style-05 {
    font-family: 'Garamond Premier Pro Display', serif;
    font-size: 16pt;
    line-height: 1.2;
    color: #454545;
    letter-spacing: 1px;
}

.style-06 {
    font-family: 'Garamond Premier Pro Display Semibold', serif;
    font-size: 12pt;
    text-transform: uppercase;
    line-height: 1.2;
    color: #454545;
    letter-spacing: 1px;
}

.style-07 {
    /* Reserved for future use */
}

.style-08 {
    /* Reserved for future use */
}

.style-09 {
    /* Reserved for future use */
}

.style-10 {
    font-family: 'The Seasons Light', sans-serif;
    font-size: 12pt;
    line-height: 1.2;
    color: #454545;
    letter-spacing: 1px;
    margin-left: auto;
    margin-right: auto;
}

.style-11 {
    font-family: 'Segoe UI Bold', sans-serif;
    font-size: 11pt;
    color: rgb(45, 45, 45);
    text-transform: uppercase;
    letter-spacing: 5px;
}

.style-12 {
    font-family: 'Garamond Premier Pro Light Display', serif;
    font-size: 20pt;
    line-height: 1.1;
    letter-spacing: 1px;
    color: rgb(45, 45, 45);
}

.style-13 {
    font-family: 'Garamond Premier Pro Light Italic Display', serif;
    font-style: italic;
    font-size: 24pt;
    line-height: 1.2;
    letter-spacing: 1px;
    color: rgb(45, 45, 45);
}

.style-14 {
    font-family: 'Garamond Premier Pro Light Display', serif;
    font-size: 12pt;
    line-height: 2;
    letter-spacing: 1px;
    color: rgb(45, 45, 45);
}

.style-15 {
    font-family: 'Garamond Premier Pro Semibold', serif;
    font-size: 12pt;
    font-weight: 600;
    color: rgb(45, 45, 45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.style-16 {
    font-family: 'Segoe UI Light', sans-serif;
    font-size: 11pt;
    line-height: 1.5;
    color: rgb(45, 45, 45);
}

.style-17 {
    font-family: 'Segoe UI', sans-serif;
    font-weight: bold;
    font-size: 10pt;
    color: rgb(45, 45, 45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.process-title.text-center {
    margin-left: auto;
    margin-right: auto;
}

.process-title span {
    font-style: italic;
}

.brief-survey-title.text-center {
    margin-left: auto;
    margin-right: auto;
}

.design-style-title.text-center {
    margin-left: auto;
    margin-right: auto;
}

/* Centered text content */
.centered-text-content {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Plant List Section Styles */
.plant-list-container {
    background-color: #ffffff;
    padding: 3rem 0;
    margin-bottom: 3rem;
}

.plant-list-images img {
    margin-bottom: 0.5rem;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1/1;
}

/* Plant image container and caption styling */
.plant-image-container {
    margin-bottom: 1.5rem;
    text-align: center;
}

.plant-caption {
    font-family: 'Segoe UI', san-sserif;
    font-style: italic;
    font-size: 11pt;
    margin-top: 0.5rem;
    color: #454545;
    text-align: center;
}

/* Add specific styling for bold text in plant list */
.plant-list-container .style-16 strong,
.plant-list-container .style-16 b {
    font-family: 'Segoe UI', sans-serif;
    font-weight: 600;
    color: rgb(45, 45, 45);
}

/* Process Section - Meadow Background with Darkening Effect */
.meadow-background-container {
    background-image: url('/img/about/Meadow Flowers.jpg');
    background-size: cover;
    background-position: center;
    padding: 60px 0;
    position: relative;
    width: 100%;
}

.meadow-background-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Darkening overlay */
    backdrop-filter: blur(2px); /* Slight blur effect */
    z-index: 0;
}

.meadow-background-container .container {
    position: relative;
    z-index: 1;
}

.meadow-background-container .style-10 {
    color: white;
}

.meadow-background-container .style-14 {
    color: white;
}

/* Project Details Table */
.project-details-grid {
    display: block;
}

.project-detail-item {
    /* position: relative; */
    padding: 0.5rem 0;
    border-top: 1px solid rgba(45, 45, 45, 0.15);
    border-bottom: 1px solid rgba(45, 45, 45, 0.15);
}

.project-detail-item:last-child {
    border-bottom: none;
}

/* Homepage layout */
.home-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-header {
    background-color: #fff;
}

.site-header, .site-footer {
    padding: 10px 0; /* Reduced padding */
    position: relative;
    z-index: 10;
}

 .home-center-section {
    flex: 1;
    background-image: url('/img/home-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 60px 0;
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-center-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: -1;
}

.home-center-section .big-project-name {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.home-center-section .big-project-name a {
    color: #ffffff !important;
}

.home-center-section .big-project-name a:hover {
    color: orange !important;
}

.home {
    background-color: transparent !important;
}


.home .container-fluid,
.home .row,
.home footer {
    position: relative;
    z-index: 2;
}

.home .big-project-name {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.home .big-project-name a {
    color: #ffffff !important;
}

.home .heading-title,
.home footer,
.home .fa {
    color: #ffffff !important;
}

.home-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

body {
    background-color: rgb(243, 241, 236);
    font-size: 14px;
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    line-height: 30px;
}


/* margin top */

.mt-xl {
    margin-top: 15px; /* Reduced from 40px */
}

/* link */

a {
    color: #151515 !important;
    text-decoration: underline;
    background-color: transparent;

}

a:active,
a:hover {
    color: #151515;
    outline-width: 0;
}

a:hover,
a:focus {
    text-decoration: underline;
}
/* horizontal rule */


hr {
    border-top: 1px solid #151515;
    opacity: 100%;
}

.content .markdown hr {
    margin-left: 1.52rem;
    margin-right: 1.52rem;
}

/* Partial: Header */
a.no-underline {
    text-decoration: none;
}

.header a:hover {
    text-decoration: underline;
}

.header h1 {
    font-size: 28px;
    font-family: "The Seasons Bold";
    letter-spacing: 10px;
    text-decoration: none !important;
}

.heading-title {
    font-size: 20px !important;
    color: rgb(34, 34, 34) !important;
}


.nav {
    font-family: "Noto Sans Light", sans-serif;
    font-weight: 100;
    letter-spacing: 1.5px;
    font-size: 14px
}

.big-project-name {
    font-family: "The Seasons Light";
    text-transform: uppercase;
    font-size: 3.25rem;
    letter-spacing: 5px;
    text-decoration: none;
}

.big-project-name a {
    color: rgb(34, 34, 34) !important;
}

.big-project-name sup {
    font-size: 15px;
    letter-spacing: 0px;
    vertical-align: super;
}

@media screen and (min-width: 769px)  {
    .big-project-name sup {
        top: -1.1rem;
    }
}

.big-project-name a:hover {
    color: rgb(82,79,72) !important;
    text-decoration: none;
}

@media screen and (max-width: 768px) {
    .big-project-name {
        font-size: 3rem;
    }
}

.mobile-break {
    height: 1.2rem;
}

@media screen and (min-width: 600px)  {
    .mobile-break { display: none; }
}

/* Partial: Content */
.project-type {
    font-size: 14px;
    font-family: "Noto Sans Light", sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    font-style: normal;
    letter-spacing: 0.4rem;
}

.project-title {
    font-family: "The Seasons Bold";
    font-size: 16px
}

.project-description h3 {
    font-family: "The Seasons Bold";
    font-size: 16px
}


.project-description {
    text-align: justify;
}

.projects-table th {
    font-family: "The Seasons Bold";
    font-size: 16px
}

/* About */
#a-little-bit {
    font-size: 45px;
    font-family: "The Seasons Light";
}

@media screen and (max-width: 768px) {
    #a-little-bit {
        margin-top: 1rem;
    }
}

a.aylett-studio {
    text-decoration: none !important;
}


#about-me {
    margin-top: 12rem !important;
    font-size: 75px;
    z-index: 99000;
    position: relative;
    overflow: visible;
    width: 25rem;
    font-family: "The Seasons Bold";
}

#ashleigh-picture {
    width: 100%;
    /* max-height: 100%; */
}

.straight-font {
    font-size: 14px;
    font-family: "Noto Sans Light", sans-serif;
    font-weight: 100;
    letter-spacing: 3px;
    text-transform: uppercase;
}

#design-philosophy {
    font-size: 20px
}


.content .meta {
    font-weight: 400;
    font-size: 1rem;
    color: #738491;
    margin-bottom: 10px;
}

.content .meta a {
    text-decoration: none;
}

.content .middot:before {
    margin: 0 3px;
    content: "·";
}

.content .caption {
    text-align: center;
    margin-top: 10px;
    color: #586069;
    font-size: 0.9rem;
}

.content .markdown {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.75rem;
}

.content .markdown li {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.content twitterwidget {
    margin: auto;
}

.content .meta,
.content .markdown h1,
.content .markdown h2,
.content .markdown h3,
.content .markdown h4,
.content .markdown h5,
.content .markdown h6,
.content .markdown p,
.content .markdown ul,
.content .markdown ol,
.content .markdown dl,
.content .markdown blockquote,
div.alert,
form,
.gist-file {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

/* blog post typography */

.content .blog-post-title {
    font-size: 1rem;
    line-height: 2.625rem;
}

.content .blog-post-content {
    font-size: 1rem;
    line-height: 2rem;
}

/* centered, boxed blog post images */

.content .figure img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}


.content .markdown code {
    /* enclosed by single backtick (`) */
    color: #333;
    padding: .2em .4em;
    margin: 0;
    font-size: 1rem;
    background-color: rgba(27, 31, 35, .05);
    border-radius: 6px;
}

.content .markdown pre {
    /* Hugo specific: consider using the 'highlight' shortcode */
    display: block;
    margin-top: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    line-height: 20px;
    white-space: pre;
    word-break: break-all;
    word-wrap: break-word;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.content .markdown pre code,
.content .markdown pre output {
    /* enclosed by 4 backticks (````) */
    padding: 0;
    font-size: 0.75rem;
    line-height: 20px;
    background-color: #fff;
    border-radius: 0;
}

.content .markdown blockquote {
    padding: 0.5rem 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: #7a7a7a;
    border-left: 0.25rem solid #e5e5e5;
}

.content .markdown blockquote p:last-child {
    margin-bottom: 0;
}

.content .markdown figure {
    background: #fff;
}

.content .post-item {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    margin-bottom: 1rem;
}

.content .meta-title a {
    text-decoration: none;
}

.content .meta-title a:hover {
    text-decoration: underline;
}

.content .meta-date {
    font-size: 1rem;
    color: #738491;
    margin-bottom: 2rem;
}

.content .navigation .icon {
    width: 16px;
    height: 16px;
}

/* Partial: Utterances Comments */

.comments {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 100%;
}

/* Header navigation */
.header-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-end;
}

.header-nav .nav-link {
    font-family: "The Seasons Light";
    font-size: 12pt;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.75px;
    color: #454545 !important;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.header-nav .nav-link:hover {
    color: rgb(82, 79, 72) !important;
    text-decoration: none;
}

/* Fix for Instagram icon */
.header-nav .instagram-icon i {
    font-size: 14pt;
    color: #454545 !important;
    display: inline-block;
}

.header-nav .instagram-icon:hover i {
    color: rgb(82, 79, 72) !important;
}

.featured-projects-heading {
    font-family: 'Garamond Premier Pro Semibold', serif;
    font-size: 14pt;
    color: #454545;
    text-align: center;
    margin-bottom: 15px;
    letter-spacing: 0.75px;
}

.home-center-section .featured-projects-heading {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 768px) {
    .header-nav {
        gap: 10px;
        justify-content: flex-end;
    }
    
    .header-nav .nav-link {
        font-size: 10pt;
    }
    
    .header-nav .instagram-icon i {
        font-size: 12pt;
    }
    
    /* Hide all nav links except Instagram on very small screens */
    @media screen and (max-width: 576px) {
        .header-nav .nav-link:not(:last-child) {
            display: none;
        }
    }
}

/* Logo styling */
.logo-image {
    max-width: 100%;
    height: auto;
    display: block;
    max-height: 120px; /* Control the height of the logo */
}