/* Styles specific to the index.html page */


.hero {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    background-image: url('/assets/angels-landing-hero.jpg'); /* Replace with your hero image */
    background-size: cover; /* Make image width match the screen width */
    
}

/* Add a dark overlay so text is always readable */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    background-color: rgba(0, 0, 0, 0.1);
}

.hero-content {
    position: relative; /* Ensures it sits on top of the overlay */
    max-width: 1000px;
    padding: 20px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    
}

.hero-content h1 {
    color: white;
    margin-top: 8px;
}

.hero-content .p1 {
    color: white;
    opacity: 0.9;
    font-weight: bold;
    margin-bottom: 50px;
}

.byline {
    color: #fff;
    font-style: italic;
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-align: center;
}


.permit-section {
    text-align: center;
    color: #555;
    font-size: 16px;
    font-style: italic;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.guide-bckg {
    background-color: var(--primary-color-alt);    
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Creates four equal columns */
    gap: 25px;
    
    margin-top: 20px;
}

/* This makes the entire card a single, clickable link */
a.guide-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content horizontally */
    text-align: center;
    padding: 25px;
    background-color: var(--card-color);
    border-radius: 16px;
    text-decoration: none; /* Removes the default underline from the link */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

a.guide-card:hover {
    transform: translateY(-5px); /* Lifts the card on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.guide-card img {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
}

.guide-card h3 {
    margin-bottom: 10px;
    font-size: 22px;
    color: var(--header-color);
}

.guide-card p {
    font-size: 16px;
    line-height: 1.4;
    color: var(--body-text-color);
}


/* 1. This creates the arrow element. It's invisible and slightly moved down by default. */
a.guide-card::after {
    content: '→'; /* This is the arrow character */
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 25px;
    opacity: 0; /* Make it invisible */
    transform: translateY(10px); /* Move it down 10px */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Animate the changes */
}

/* 2. When you hover over the card, this makes the arrow visible and moves it back into place. */
a.guide-card:hover::after {
    opacity: 1; /* Make it visible */
    transform: translateY(0); /* Move it back to its original position */
}

.shirt-img {
    max-width: min(80vw, 400px);
    object-fit: cover;
    border-radius: 15px;
}

/*
  Styles the right-side container for the shirt promotion.
*/
.shirt-text {
  display: flex;          /* Enables flexbox for easy alignment */
  flex-direction: column; /* Stacks the title, text, and button vertically */
  justify-content: center;/* Vertically centers the content within the container */
  align-items: flex-start;/* Aligns all items to the left */
}

/*
  Adds space above the "Shop Now" button within the .shirt-text container.
*/
.shirt-text a {
  margin-top: 20px; /* Adjust this value as needed */
    margin-left: -4px;
}



@media (max-width: 992px) {
    .guide-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 576px) {
    .guide-grid {
        grid-template-columns: 1fr;
    }
}