/*
Copyright © Wild Rose Devs. & Alberta Lynx 2025. All rights reserved.

This software and its source code are proprietary and confidential.
Unauthorized copying, distribution, modification, or use in whole or in part
is strictly prohibited and may result in civil and/or criminal penalties.

No license or rights are granted by implication or otherwise under any
intellectual property rights.

For licensing inquiries, contact: https://wildrosedevs.ca
*/

.hero-s {
    position: relative;
    height: 40vh;
    background: url('../images/dog-popt.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-s::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 0, 0, 0.4);
    z-index: 1;
}

.hero-s .hero-s-text {
    position: relative;
    z-index: 2;
    color: #fff;
}

.hero-s .hero-s-text h2 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    margin: 0;
}

/* Emergency Banner Styling */
.phone-banner {
    position: absolute;
    top: 20px;
    right: 30px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid #e04a4a;
    padding: 5px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-family: Georgia, serif;
    font-size: 1.2rem;
    z-index: 3;
}

.phone-banner .plus-sign {
    color: #e04a4a;
    font-size: 2rem;
    font-weight: bold;
}

.phone-banner a {
    color: #337ab7;
    text-decoration: none;
}

.phone-banner a:hover {
    text-decoration: underline;
}

/* --- MAP SECTION --- */
.map-section {
    margin: 40px auto;
    max-width: 1000px;
    padding: 0;
    text-align: center;
}

.map-section h3 {
    font-size: 1.8rem;
    color: #b03a2e;
    font-weight: 600;
    margin-bottom: 20px;
}

.map-section iframe {
    width: 100%;
    height: 350px;
    border: 2px solid #ccc;
    border-radius: 8px;
}

/* --- DIRECTIONS --- */
.directions {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
}

.directions strong {
    font-size: 1.2rem;
    color: #000;
    display: block;
    margin-top: 1.5rem;
}

.contact-section {
    border: 1px solid #ccc;
    padding: 40px;
    margin: 40px auto;
    max-width: 950px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    text-align: left;
}

.contact-section h2 {
    color: #b03a2e;
    font-size: 2rem;
    margin-bottom: 5px;
    text-align: left;
}

.contact-section p {
    font-size: 1rem;
    margin-bottom: 30px;
    color: #333;
    text-align: left;
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 30px;
    max-width: 900px;
}

.contact-form input,
.contact-form textarea {
    padding: 14px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}

.contact-form textarea {
    grid-column: 1 / -1;
    min-height: 120px;
    resize: vertical;
}

.contact-form button {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 12px 30px;
    font-size: 1rem;
    border: 1px solid #b03a2e;
    background: white;
    color: #b03a2e;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.contact-form button:hover {
    background: #b03a2e;
    color: white;
}

.emergency-banner {
    background: #f8d7da;
    color: #c0392b;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    margin: 40px auto 20px;
    font-size: 1.1rem;
}

.emergency-banner a {
    color: #007bff;
    text-decoration: none;
}

@media (max-width: 768px) {
    .contact-form {
        grid-template-columns: 1fr;
    }

    .contact-section {
        padding: 20px;
    }

    .contact-form button {
        justify-self: center;
    }

    .hero-s .hero-s-text {
        padding: 0 10px;
    }

    .hero-s .hero-s-text h2 {
        font-size: clamp(2rem, 6vw, 2.5rem);
    }
}