:root {
  --color-bg: #fdfdf1;
  --color-section: #cdc0a0;
  --color-text: #22332f;
  --color-heading: #000000;
  --color-accent: #ff4b3a;
  --color-accent-hover: #e33d2e;
  --color-tan: #d98443;
  --color-dark: #22332f;
}

.chewy-regular {
    font-family: "Chewy", serif;
    font-weight: 400;
    font-style: normal;
  }

.oswald-1 {
  font-family: "Oswald", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
  
body {
    max-width: 100vw;
    max-height: 100vh;
    background-color: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    transition: opacity 1s ease-in-out;
}

body.loaded {
    opacity: 1;
}

.nav-logo {
    display: flex;
    align-items: center;  /* Align with text links */
    margin: 0 2.5vw;  /* Add spacing similar to the other nav links */
    height: 50px;  /* Adjust to match the height of the text links */
    width: auto;
    border-radius: 50px;
}


.background-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-dark);
    background-repeat: no-repeat;
    background-position: center 20%;
    background-size: cover;
    overflow: hidden;

}

/* Dark overlay */
.background-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 0;
    pointer-events: none;
}

/* Ensure text and CTA sit above overlay */
.background-container > * {
    position: relative;
    z-index: 1;
}

h1 {
    color: var(--color-bg);
    font-family: 'Times New Roman', Times, serif;
    font-weight: 300;
    font-size: 3.5rem;
}

.heading-1 {
    
    display:block;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-right: 5vw;
    margin-top: 40vh;
    font-size: 3.5rem;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid white;
    width: fit-content;
    /*animation: 
    typing 3.5s steps(40, end),
    blink-caret 1s step-end infinite;
    transition: text-align 0.5s ease-in-out, margin 0.5s ease-in-out;*/
}
/* Center text on mobile after animation */
@media (max-width: 768px) {
    .heading-1.centered, .heading-2.centered, .heading-3.centered {
        text-align: center;
        margin-right: 0;
        display: block;
        width: 100%; /* Ensure it centers properly */
    }
}

/* The typing effect 
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }*/
  
  /* The typewriter cursor effect */
 /* @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: rgb(255, 255, 255); }
  } */

.heading-2, .heading-3 {
    color: var(--color-heading);
    font-family: 'Times New Roman', Times, serif;
    font-weight: 300;
    display: block;
    margin: 0 auto;
    text-align: center;
    font-size: 3.5rem;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid white;
    width: fit-content;
    animation: 
    typing 3.5s steps(40, end),
    blink-caret 1s step-end infinite;
    transition: text-align 0.5s ease-in-out, margin 0.5s ease-in-out;
    margin-bottom: 2rem;
}
/* The typing effect
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
  
  /* The typewriter cursor effect 
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: rgb(255, 255, 255); }
  } */

.heading-5 {
    display: block;
    color: var(--color-heading);
    margin-bottom: 1rem;
   
}

.heading-store {
    display: flex;
    justify-content: center;
    color: var(--color-heading)
}

.heading-4 a {
    color: var(--color-heading);
    font-family: 'Oswald';
    font-weight: 400;
    text-shadow: 2px 2px 5px #333;
    text-decoration: none;
    display: block;
}

.heading-4 a:hover {
    color: var(--color-accent-hover);
    font-family: 'Oswald';
    font-weight: 400;
    text-shadow: 2px 2px 5px #333;
}


.favicon {
    width: 48px;
    height: 48px;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Navbar styling */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-section);
    padding: 1rem 2rem;
    position: relative;
}

/* Hamburger icon */
img#hamburger{
    display: none;
    font-size: 2rem;
    color: var(--color-text);
    cursor: pointer;
    position: absolute;
    top: 2vh;
    right: 5vw;
    transform: translateY(-50%);
}

/* Navigation links */
#nav-list {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.nav-link li {
    position: relative;
}

.nav-link a {
    font-family: 'Oswald';
    color: var(--color-bg);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 200;
}

.cta-container {
    display: flex;
    justify-content: center;
    margin-right: 9vw;
    margin-top: 2vh;
}

/*@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}*/

.cta-link {
    text-decoration: none;
    padding: 0.75vw 1.5vw;
    background-color: var(--color-accent);
    margin: 0 2.5vw;
    /*animation: pulse 1.5s infinite;
    transition: transform 0.3s ease-in-out;*/
    border-radius: 5px;  
    color: var(--color-dark);
    font-size: 1.5rem; 
    border: 1px solid rgba(220, 229, 247, 0.599);
}


.hero-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Ensure the list is centered and structured */
ul.arlo-list {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    justify-content: center;
    align-items: center;
    padding-inline-start: 0;
    gap: 14px;
    margin-top: 2rem
}
/* Styling for individual link blocks */
li.arlo-link {
    display: block;
    margin: 2vh 0;
    transition: transform 0.3s ease-in-out;
}

/* Smooth hover effect */
li.arlo-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12); /* Slight scaling effect for engagement */
}

.store-description {
    max-width: 750px;
    margin: 0 auto 35px auto;
    text-align: center;
}
.etsy-widget .diary-widget iframe {
    width: 100%;
    border: none;
    border-radius: 12px;
}
.etsy-widget .diary-widget {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 20px;
}

.treat-fund-note {
  font-size: 0.9rem;
  opacity: 0.85;
  margin: 10px auto 25px auto;
  text-align: center;
}

.arlo-picks-label {
  font-style: italic;
  opacity: 0.85;
  margin: 30px 0 10px 25px;
}

/* Base link styling */
.arlo-link a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--color-dark);
    font-size: 1.5rem;

    padding: 1rem 1.5rem;

    background-color: #ffffff;
    border: 2px solid var(--color-accent);
    border-radius: 12px;

    text-align: center;

    box-shadow: 0 4px 10px rgba(0,0,0,0.08);

    transition: all 0.25s ease;
    max-width: 520px;
    width: 100%;
}
/* Hover Effect */
.arlo-link a:hover {
    background-color: #fff6f6;
    border-color: var(--color-accent-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

/* Gallery Image Hover Zoom */
.gallery-item img {
    transition: transform 0.3s ease-in-out;
    touch-action: manipulation;
}
.gallery-item img:hover {
    transform: scale(1.05);
}
.gallery-item img.active {
    transform: scale(1.05);
}


.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-img {
    display: block;
    margin-top: 5vh;
}

.hero-par {
    margin: 2.5vh 15vw;
}
.hero-p {
    display: block;
    text-align: center;
    font-family: 'Oswald', serif;
    font-weight: 200;
    font-size: 1.5rem;
}

.link-img {
    display: inline;
    height: 60px;
    width: auto;
}

.social-footer {
    text-align: left; /* Align to the left like the nav bar */
    font-size: 2rem;
    font-family: "Oswald", sans-serif;
    font-weight: 200;
    /* Adjust for alignment */
    background-color: var(--color-dark);
    color: var(--color-bg);
}

.social-list {
    display: flex;
    justify-content: flex-start;  /* Align icons to the left */
    align-items: center;
    list-style: none;
    gap: 1rem; /* Space between icons */
    padding-left: 20px; /* Align with the heading */
    margin: -3vh 0 0 0;
    padding-bottom: 2.5vh;
    background-color: var(--color-dark);
}

.social-link {
    margin: 0;
}

.social-link a {
    display: inline-block;
    transition: box-shadow 0.3s ease-in-out;
}

.social-link a:hover {
    box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.5);
}

@media (hover: none) {
    .social-link a:active {
        box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.5);
        transition: box-shadow 0.3s ease-in-out;
    }
}

.header-3 {
    display: flex;
    margin-top: 5vh;
    justify-content: center;
}

.video-flex {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
    flex-direction: row;
    margin-top: 5vh;
    padding-bottom: 5vh;
}


iframe {
    border:none;
    overflow:hidden
}

.mobile-menu-button {
    display: none;
    position: absolute;
    top: 2vh;
    left: 93vw;
}
p.story-text {
    display: block;
    font-family: 'Oswald', 'inter', Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    font-weight: 200;
    color: var(--color-text);
    width: 75vw;
    margin: 0 10vw 0 10vw;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

p.story-text.visible {
    opacity: 1;
    transform: translateY(0);
}

div.story-image-div {
    display: flex;
    flex-direction: row;
    gap: 2.5vw;
    justify-content: center;
    height: 100%;
    width: 100%;
    margin: 2.5vh 0;

}
figure.story-figure {
    display: block;
    margin: 2.5vh 0;
}
figcaption {
    color: var(--color-text);
    text-shadow: 1px 1px 0.5px #b7b3b3;
    font-family: 'Oswald', sans-serif;
    font-weight: 200;
    font-size: 1.2em;
}
img.story-image {
    border: 4px solid #404c6a;
    height: 40vh;
    width: auto;
}

p.diary-text {
    display: block;
    font-family: 'Oswald', 'inter', Arial, Helvetica, sans-serif;
    font-size: 1.75em;
    font-weight: 200;
    color: var(--color-text);
    text-shadow: 0.5px 0.5px 1.5em #cecdec;
    width: 75vw;
    margin: 0 10vw 0 10vw;
    text-align: center;
}
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* space between items */
    padding: 10px;
    justify-content: center;
    /* center the items */
  }
  
  .gallery-item {
    flex: 1 1 calc(25% - 20px);
    /* responsive item size */
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #ddd;
  }
  
  .gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    cursor: pointer;
  }
  .site-credit {
    margin-top: 16px;
    font-size: 0.8rem;
    opacity: 0.85;
    text-align: center;
    margin-bottom: 10px;
}

.site-credit a {
    color: var(--color-accent);
    text-decoration: none;
}

.site-credit a:hover {
    text-decoration: underline;
}
  
  @media (max-width: 1200px) {
    .gallery-item {
      flex: 1 1 calc(33.33% - 20px);
      /* 3 columns */
    }
  }
  
  @media (max-width: 900px) {
    .gallery-item {
      flex: 1 1 calc(50% - 20px);
      /* 2 columns */
    }
  }
  
  @media (max-width: 600px) {
    .gallery-item {
      flex: 1 1 calc(100% - 20px);
      /* 1 column */
    }
  }
  
  /* Modal Styles */
  .modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    /* Black background with opacity */

   
    justify-content: center;
    align-items: center;
  }
  
  .modal-content {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 700px;
  }
  
  .close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: var(--color-text);
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
  }
  
  .close:hover,
  .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }
/* Disable typewriter animation on the homepage H1 */
body.home h1,
body.home .hero h1,
body.home .typewriter,
body.home .typing {
  animation: none !important;
  border-right: none !important; /* removes the cursor if it’s faked via border */
  width: auto !important;        /* undo width tricks used for typing effect */
  white-space: normal !important;
  overflow: visible !important;
}