/*
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;
}

form {
    max-width: 900px;
    margin: 50px auto;
    background-color: #fdfdfd;
    padding: 40px 50px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

form h2,
form h3 {
    font-family: 'Georgia', serif;
    color: #333;
    margin-top: 20px;
    margin-bottom: 10px;
}

form h2 {
    color: #8e031f;
}

label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-top: 20px;
    color: #333;
}

input[type="text"],
input[type="date"],
select,
textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    margin-top: 6px;
    margin-bottom: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    transition: border 0.2s ease-in-out;
}

/* Explicit fix for single inputs outside of flex-row */
form>input[type="text"],
form>textarea,
form>select {
    max-width: 100%;
}

/* Make all child elements inside form use full width unless flex controlled */
form>*:not(.flex-row):not(.radio-group):not(button):not(hr):not(h2):not(h3) {
    width: 100%;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #7d9de7;
}

.flex-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.flex-row input,
.flex-row select {
    flex: 1 1 0;
    min-width: 200px;
}

.radio-group {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 8px;
}

.radio-group input[type="radio"] {
    margin-right: 6px;
}

.conditional-question {
    margin-top: 20px;
    padding: 16px;
    background-color: #f7f9ff;
    border-left: 4px solid #a0a5d0;
    border-radius: 4px;
}

.conditional-field {
    margin-top: 10px;
    display: none;
}

.dropbox {
    border: 2px dashed #bbb;
    background-color: #fafafa;
    color: #777;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-bottom: 20px;
    border-radius: 6px;
}

/* Adjust signature/date spacing */
.signature-date {
    display: flex;
    flex-direction: row;
    gap: 40px;
    margin-top: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.signature-date>div {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
}

form button[type="submit"] {
    display: block;
    margin: 30px auto 0 auto;
    background: #a80425;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}

form button[type="submit"]:hover {
    background: #8e031f;
}

@media (max-width: 768px) {
    .hero-s .hero-s-text {
        padding: 0 10px;
    }

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