/* ---------------------------------
   GLOBAL STYLES & COLORS
   ---------------------------------
   - Background: Deep Charcoal (#1a1a1a)
   - Primary Text: Off-white (#f5f5f5)
   - Accent/Gold: Metallic Gold (#d4af37)
   - Fonts: 'Cormorant Garamond' (Serif), 'Helvetica Neue' (Sans-serif)
*/

body {
    margin: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #1a1a1a;
    color: #f5f5f5;
    line-height: 1.6;
}

.navbar-container,
.hero-container,
.value-container,
.footer-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

h1, h2, h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
}

/* ---------------------------------
   1. NAVIGATION BAR
   --------------------------------- */
.navbar {
    border-bottom: 1px solid #444;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #f5f5f5;
    text-decoration: none;
    letter-spacing: 1px;
}

.navbar-menu .nav-link {
    margin: 0 15px;
    color: #f5f5f5;
    text-decoration: none;
    font-size: 1rem;
}
.navbar-menu .nav-link:hover {
    color: #d4af37;
}

.nav-cta {
    background-color: #d4af37;
    color: #1a1a1a;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}
.nav-cta:hover {
    background-color: #f5f5f5;
}

/* ---------------------------------
   2. HERO SECTION
   --------------------------------- */
.hero-section {
    padding: 60px 0;
}

.hero-container {
    display: flex;
    align-items: center;
    gap: 40px;
}

.hero-visual {
    flex: 1; /* Takes up 50% */
}

.hero-content {
    flex: 1; /* Takes up 50% */
    text-align: center;
}

/* This is the placeholder for your video */
.video-placeholder {
    width: 100%;
    height: 400px;
    background-color: #333;
    border: 2px dashed #d4af37;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
    font-style: italic;
    border-radius: 10px;
}

.hero-headline {
    font-size: 2.8rem;
    color: #f5f5f5;
    margin-bottom: 10px;
}

.hero-subheadline {
    font-size: 2rem;
    color: #d4af37;
    margin-bottom: 20px;
}

.hero-text {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.hero-cta-button {
    background-color: #d4af37;
    color: #1a1a1a;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s;
}
.hero-cta-button:hover {
    background-color: #f5f5f5;
}

/* ---------------------------------
   3. VALUE SECTION
   --------------------------------- */
.value-section {
    background-color: #2a2a2a; /* Slightly lighter background */
    padding: 60px 0;
    text-align: center;
}

.value-container {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.value-column {
    flex: 1;
}

.value-icon {
    font-size: 3rem;
    color: #d4af37;
}

.value-title {
    font-size: 1.8rem;
    color: #f5f5f5;
    margin-bottom: 10px;
}

.value-text {
    font-size: 1rem;
    color: #ccc;
}

/* ---------------------------------
   4. FOOTER
   --------------------------------- */
.footer {
    background-color: #111;
    color: #888;
    padding: 40px 0;
    text-align: center;
    font-size: 0.9rem;
}

.footer-links-main a,
.footer-links-legal a {
    color: #ccc;
    text-decoration: none;
    margin: 0 10px;
}

.footer-links-main a:hover,
.footer-links-legal a:hover {
    color: #d4af37;
}

.footer-links-main {
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.footer-links-legal {
    margin-bottom: 20px;
}

.footer-copyright {
    margin: 0;
}
/* ---------------------------------
   5. "ABOUT US" PAGE STYLES
   --------------------------------- */

/* Generic Page Header for 'About', 'Contact', etc. */
.page-header {
    background-color: #2a2a2a;
    padding: 30px 0;
    text-align: center;
}
.page-header-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
.page-header h1 {
    font-size: 2.5rem;
    color: #d4af37;
    margin: 0;
}

/* Mission Section */
.mission-section {
    padding: 60px 0;
}
.mission-container {
    width: 90%;
    max-width: 900px; /* Narrower for reading */
    margin: 0 auto;
    text-align: center;
}
.mission-title {
    font-size: 2.2rem;
    color: #d4af37;
    margin-bottom: 30px;
}
.mission-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    color: #f5f5f5;
    line-height: 1.7;
    border-left: 4px solid #d4af37;
    padding-left: 25px;
    margin: 0;
    text-align: left;
    font-style: italic;
}
.mission-quote strong {
    color: #d4af37;
    font-style: normal;
}

/* Leadership Section */
.leadership-section {
    background-color: #2a2a2a;
    padding: 60px 0;
}
.leadership-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
.section-title {
    font-size: 2.2rem;
    color: #d4af37;
    text-align: center;
    margin-bottom: 40px;
}
.leadership-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column by default */
    gap: 40px;
}

/* On larger screens, switch to 2 columns */
@media (min-width: 900px) {
    .leadership-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.bio-card {
    background-color: #1a1a1a;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* This is the placeholder for your headshots */
.bio-image-placeholder {
    width: 100%;
    height: 300px;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #d4af37;
    font-family: 'Cormorant Garamond', serif;
}
/* When you have images, use this class instead */
.bio-image {
    width: 100%;
    height: auto;
}

.bio-content {
    padding: 30px;
}
.bio-name {
    font-size: 2rem;
    color: #f5f5f5;
    margin: 0 0 5px 0;
}
.bio-title {
    font-size: 1.2rem;
    color: #d4af37;
    margin: 0 0 20px 0;
    font-family: 'Helvetica Neue', Arial, sans-serif; /* Use sans-serif for the title */
    font-weight: 600;
}
.bio-text {
    font-size: 1rem;
    color: #ccc;
    line-height: 1.7;
}
/* ---------------------------------
   6. "HOW IT WORKS" PAGE STYLES
   --------------------------------- */
.steps-section {
    padding: 60px 0;
}

.steps-container {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 30px;
}

/* On larger screens, switch to 2 columns */
@media (min-width: 768px) {
    .steps-container {
        grid-template-columns: 1fr 1fr;
    }
}

.step-card {
    background-color: #2a2a2a;
    border-radius: 10px;
    padding: 30px;
    display: flex;
    gap: 20px;
}

.step-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3rem;
    font-weight: 600;
    color: #d4af37;
    flex-shrink: 0;
}

.step-content {
    flex-grow: 1;
}

.step-title {
    font-size: 1.8rem;
    color: #f5f5f5;
    margin: 0 0 10px 0;
}

.step-text {
    font-size: 1rem;
    color: #ccc;
    line-height: 1.7;
    font-style: italic;
    margin: 0;
}
/* ---------------------------------
   7. "MEET OUR DOGS" PAGE STYLES
   --------------------------------- */
.intro-section {
    padding: 40px 0 0 0;
}
.intro-container {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.intro-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    color: #f5f5f5;
    line-height: 1.7;
    font-style: italic;
}
.intro-text strong {
    color: #d4af37;
    font-style: normal;
}

.registry-section {
    padding: 60px 0;
}
.registry-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
.registry-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 column by default */
    gap: 30px;
}

/* On larger screens, switch to 2 columns */
@media (min-width: 900px) {
    .registry-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.dog-card {
    background-color: #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dog-image-placeholder {
    width: 100%;
    height: 300px;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #d4af37;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
}
.dog-image {
    width: 100%;
    height: auto;
}

.dog-content {
    padding: 30px;
}
.dog-name {
    font-size: 1.6rem;
    color: #f5f5f5;
    margin: 0 0 5px 0;
    text-transform: uppercase;
}
.dog-status {
    font-size: 1rem;
    color: #d4af37;
    margin: 0 0 20px 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
}
.dog-bio {
    font-size: 1rem;
    color: #ccc;
    line-height: 1.7;
    font-style: italic;
}
.dog-bio strong {
    color: #f5f5f5;
    font-style: normal;
    font-weight: 600;
}
/* ---------------------------------
   8. "CONTACT US" PAGE STYLES
   --------------------------------- */
.contact-section {
    padding: 60px 0;
}
.contact-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
.contact-intro {
    max-width: 900px;
    margin: 0 auto 40px auto;
    text-align: center;
    font-size: 1.1rem;
    color: #ccc;
    line-height: 1.7;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr; /* 1 column by default */
    gap: 40px;
}

/* On larger screens, switch to 2 columns */
@media (min-width: 900px) {
    .contact-layout {
        grid-template-columns: 2fr 1fr; /* Form is 2/3, Details are 1/3 */
    }
}

/* Form Styles */
.contact-form-container {
    background-color: #2a2a2a;
    padding: 30px;
    border-radius: 10px;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #f5f5f5;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #555;
    background-color: #333;
    color: #f5f5f5;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box; /* Important for 100% width */
}

/* Overrides the global CTA button to be 100% width */
#contact-form .hero-cta-button {
    width: 100%;
    border: none;
    cursor: pointer;
}

/* Details Sidebar Styles */
.details-card {
    background-color: #2a2a2a;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.details-title {
    font-size: 1.5rem;
    color: #d4af37;
    margin: 0 0 10px 0;
}
.details-text {
    font-size: 1rem;
    color: #ccc;
    line-height: 1.7;
    margin: 0;
}
.details-text a {
    color: #ccc;
    text-decoration: none;
}
.details-text a:hover {
    color: #d4af37;
}
/* ---------------------------------
   9. "LEGAL / CONTENT" PAGE STYLES
   (For Terms, Privacy, Why, etc.)
   --------------------------------- */
.content-page-section {
    padding: 60px 0;
}

.content-container {
    width: 90%;
    max-width: 900px; /* Narrower width for easier reading */
    margin: 0 auto;
    background-color: #2a2a2a;
    border-radius: 10px;
    padding: 40px;
}

.content-container h2 {
    font-size: 2rem;
    color: #d4af37;
    margin-top: 0;
    margin-bottom: 20px;
}

.content-container h3 {
    font-size: 1.6rem;
    color: #f5f5f5;
    margin-top: 30px;
    margin-bottom: 15px;
}

.content-container p,
.content-container li {
    font-size: 1.1rem;
    color: #ccc;
    line-height: 1.8;
}

.content-container strong {
    color: #f5f5f5;
    font-weight: 600;
}

.content-container ul {
    padding-left: 20px;
}
/* ---------------------------------
   10. "QUIZ" PAGE STYLES
   --------------------------------- */
.quiz-section {
    padding: 60px 0;
}

.quiz-container {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
}

.quiz-intro {
    text-align: center;
    margin-bottom: 40px;
}

.quiz-intro .section-title {
    margin-bottom: 10px;
}

.quiz-intro p {
    font-size: 1.1rem;
    color: #ccc;
    line-height: 1.7;
}

.quiz-question-card {
    background-color: #2a2a2a;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 20px;
}

.quiz-question {
    font-size: 1.8rem;
    color: #f5f5f5;
    margin: 0 0 10px 0;
}

.quiz-question-desc {
    font-size: 1.1rem;
    color: #ccc;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

.quiz-options label {
    display: inline-block;
    margin-right: 20px;
    font-size: 1.2rem;
    color: #f5f5f5;
    cursor: pointer;
}

.quiz-options input[type="radio"] {
    margin-right: 8px;
    /* Custom styling for radio buttons can be complex; this is a simple default */
}

.quiz-submit-container {
    text-align: center;
    margin-top: 40px;
}

/* Overrides the global CTA button to be larger */
#quiz-form .hero-cta-button {
    font-size: 1.3rem;
    padding: 18px 40px;
    border: none;
    cursor: pointer;
}
/* ---------------------------------
   11. "VERIFY" PAGE STYLES
   --------------------------------- */
.verify-section {
    padding: 60px 0;
}
.verify-container {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
}
.verify-intro {
    text-align: center;
    margin-bottom: 40px;
}
.verify-intro .section-title {
    margin-bottom: 10px;
}
.verify-intro p {
    font-size: 1.1rem;
    color: #ccc;
    line-height: 1.7;
}

/* Verification Search Form */
.verify-form {
    display: flex;
    gap: 10px;
    margin-bottom: 40px;
}
.verify-form input[type="text"] {
    flex-grow: 1; /* Takes up all available space */
    padding: 15px;
    border: 1px solid #555;
    background-color: #333;
    color: #f5f5f5;
    border-radius: 5px;
    font-size: 1.1rem;
}
.verify-form .hero-cta-button {
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 15px 25px;
}

/* Verification Results */
.results-container {
    margin-top: 40px;
    border-top: 1px solid #444;
    padding-top: 40px;
}
.results-title {
    font-size: 2rem;
    color: #d4af37;
    text-align: center;
    margin-bottom: 30px;
}
/* Re-using the .dog-card style from "Meet Our Dogs" */
.dog-result {
    max-width: 800px;
    margin: 0 auto 20px auto;
}
.dog-result .dog-bio {
    font-style: normal; /* Override italic style */
}
.dog-result .dog-bio strong {
    color: #f5f5f5;
    font-weight: 600;
}
/* ---------------------------------
   12. "ACCOUNT FORM" STYLES
   (For Signup, Login, etc.)
   --------------------------------- */
.account-form-section {
    padding: 60px 0;
}

.account-form-container {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    background-color: #2a2a2a;
    border-radius: 10px;
    padding: 40px;
}

.account-form-intro {
    font-size: 1.1rem;
    color: #ccc;
    line-height: 1.7;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 30px auto;
}

.account-form-container .section-title {
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
}

/* Form <fieldset> styles */
#signup-form fieldset {
    border: 1px solid #555;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
#signup-form legend {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: #d4af37;
    padding: 0 10px;
    margin-left: 10px;
}

/* Re-using .form-group from contact.css */
.form-group-split {
    display: flex;
    flex-direction: column; /* Stack on mobile */
    gap: 20px;
}
@media (min-width: 768px) {
    .form-group-split {
        flex-direction: row; /* Side-by-side on desktop */
    }
    .form-group-split .form-group {
        flex: 1; /* Each takes equal space */
    }
}

.account-submit-container {
    text-align: center;
    margin-top: 30px;
}

#signup-form .hero-cta-button {
    width: 100%;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 16px 30px;
}

@media (min-width: 768px) {
    #signup-form .hero-cta-button {
        width: auto; /* Auto-width on desktop */
    }
}
/* ---------------------------------
   13. "ACCOUNT LOGIN" PAGE STYLES
   (Mostly re-uses existing styles)
   --------------------------------- */

.account-link-container {
    text-align: center;
    margin-top: 30px;
}

.account-link-container p {
    font-size: 1rem;
    color: #ccc;
}

.account-link-container a {
    color: #d4af37;
    font-weight: 600;
    text-decoration: none;
}

.account-link-container a:hover {
    text-decoration: underline;
}
/* ---------------------------------
   14. MOBILE RESPONSIVE STYLES
   (Applies to all screens 900px or less)
   --------------------------------- */
@media (max-width: 900px) {

    /* --- General Column Stacking --- */
    .hero-container,
    .leadership-grid,
    .steps-container,
    .registry-grid,
    .contact-layout,
    .form-group-split,
    .value-container {
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr; /* Override all grid settings */
    }

    /* --- Navigation Bar --- */
    .navbar-container {
        flex-direction: column;
        align-items: flex-start;
    }
    .navbar-logo {
        margin-bottom: 15px; /* Add space below logo */
    }
    .navbar-menu {
        display: flex;
        flex-direction: column; /* Stack the nav links */
        width: 100%;
    }
    .nav-link {
        padding: 10px 0;
        border-top: 1px solid #444; /* Add dividers */
        width: 100%;
        text-align: center;
        margin: 0;
    }
    .nav-cta {
        margin-top: 15px;
        width: 100%;
        text-align: center;
        box-sizing: border-box; /* Make 100% width work with padding */
    }

    /* --- Forms --- */
    .account-form-container {
        padding: 20px; /* Reduce padding on mobile */
    }
    .verify-form {
        flex-direction: column; /* Stack search button under input */
    }

    /* --- Page-specific tweaks --- */
    .hero-content {
        text-align: center;
    }
    .hero-headline {
        font-size: 2.2rem; /* Slightly smaller text */
    }
    .page-header h1 {
        font-size: 2.0rem; /* Slightly smaller text */
    }
    .section-title, .mission-title {
        font-size: 1.8rem; /* Slightly smaller text */
    }
    .content-container {
        padding: 20px; /* Reduce padding on mobile */
    }
    .mission-quote {
        font-size: 1.2rem;
    }
}