/* ---
HOLBROCK ESTATES - RUXTON AVENUE
Design System Implementation by a Senior UI/UX Developer
--- */

/* 1. Color System & Global Variables */
:root {
    --color-primary: #A0151F;     /* Deep Garnet Red */
    --color-secondary: #D9822B;   /* Warm Amber Copper */
    --color-accent: #6BA67A;      /* Sage Calm Green */
    --color-ivory: #FAFAF5;       /* Soft Ivory White */
    --color-charcoal: #2E2E2E;    /* Charcoal Gray */
    --color-dust: #E8D2C2;        /* Dusty Rose Beige */
    --focus: #FFB84D;             /* Focus ring */
    --muted: #555555;             /* Slate Gray */
    --glass: rgba(255, 255, 255, 0.6);
    --radius: 12px;
    --shadow-soft: 0 8px 24px rgba(46,46,46,0.08);

    --font-primary: 'Playfair Display', serif;
    --font-secondary: 'Inter', sans-serif;
    --font-accent: 'Cormorant Garamond', serif;
}

/* 2. Base & Typography */
body {
    font-family: var(--font-secondary);
    background-color: var(--color-ivory);
    color: var(--color-charcoal);
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: var(--font-primary);
    font-weight: 500;
    line-height: 1.15;
    color: var(--color-primary);
}
h1 { font-size: clamp(28px, 5vw, 52px); }
h2 { font-size: clamp(28px, 4vw, 34px); }
h3 { font-size: clamp(20px, 3vw, 24px); }

.lead { font-size: 1.1rem; color: var(--muted); }
.quote { font-family: var(--font-accent); font-style: italic; font-size: 18px; }

/* 3. Global Layout & Spacing */
.section-padding { padding: 48px 0; }
@media (min-width: 992px) { .section-padding { padding: 80px 0; } }

/* 4. Component System: Buttons */
.btn { border-radius: 10px; padding: 14px 22px; font-size: 16px; font-weight: 500; transition: all 0.2s ease-in-out; }
.btn-primary { background-color: var(--color-secondary); border-color: var(--color-secondary); color: white; }
.btn-primary:hover { transform: translateY(-2px) scale(1.01); box-shadow: var(--shadow-soft); background-color: var(--color-accent); }
.btn-primary:focus-visible { outline: 3px solid var(--focus); }

.btn-secondary { border: 2px solid var(--color-primary); color: var(--color-primary); background-color: transparent; }
.btn-secondary:hover { background-color: var(--color-primary); color: white; transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn-secondary:focus-visible { outline: 3px solid var(--focus); }

/* 5. Header / Navigation */
.navbar { height: 72px; transition: all 0.3s ease; }
.navbar.scrolled { background: var(--glass); backdrop-filter: blur(10px); box-shadow: var(--shadow-soft); }
.navbar-brand { font-family: var(--font-primary); font-weight: 500; }

/* 6. Section Specific Styles */
/* HERO */
#hero {
    position: relative;
    background-image: linear-gradient(90deg, rgba(250,250,250,1) 0%, rgba(250,250,250,0.9) 40%, rgba(250,250,250,0) 100%);
    min-height: 85vh !important; /* Ensure the hero section takes full viewport height */
}

#hero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.trust-badge { display: inline-flex; align-items: center; background: white; padding: 8px 12px; border-radius: 50px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); font-size: 14px; }

/* Updated trust-badge icon colors to use --color-primary */
.trust-badge i {
    color: var(--color-primary) !important;
}

/* STORY */
.story-gallery img { border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.story-gallery .img-large { aspect-ratio: 3/2; object-fit: cover; }
.story-gallery .img-small { aspect-ratio: 4/3; object-fit: cover; }

/* VISION & MISSION */
.vision-card { background-color: var(--color-dust); border-radius: var(--radius); padding: 24px; }
.mission-card { background-color: white; border-left: 4px solid var(--color-primary); border-radius: var(--radius); padding: 24px; }

  #mission-vision img {
    width: 100%; /* Ensure images take up the full width of their container */
    max-width: 300px; /* Set a maximum width to standardize image size */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Add rounded corners */
    display: block; /* Ensure proper alignment */
    margin: 0 auto 20px auto; /* Center the images and add margin below */
  }

  #mission-vision h3, #mission-vision p {
    text-align: center; /* Center align the text */
  }

  #mission-vision h3 {
    font-size: 2rem !important; /* Increase the font size of the headings */
  }

  #mission-vision p {
    font-size: 1.125rem; /* Increase the font size of the paragraphs */
  }

/* DAY IN THE LIFE */
.timeline-item { position: relative; padding-left: 40px; }
.timeline-item::before { content: ''; position: absolute; left: 10px; top: 10px; bottom: -10px; width: 2px; background-color: #ddd; }
.timeline-item:last-child::before { display: none; }
.timeline-icon { position: absolute; left: 0; top: 0; width: 22px; height: 22px; background: var(--color-secondary); border-radius: 50%; border: 4px solid var(--color-ivory); }

/* SERVICES */
.service-card { background: white; border-radius: var(--radius); padding: 28px; height: 100%; box-shadow: var(--shadow-soft); transition: all 0.3s ease; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(46,46,46,0.12); }
.service-card .icon { font-size: 2rem; color: var(--color-primary); }

/* SERVICES SECTION */
#services .service-card .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px; /* Set the size of the square */
    height: 60px; /* Set the size of the square */
    border-radius: 10px; /* Add rounded corners */
    background-color: var(--color-primary); /* Set background color */
    color: var(--color-ivory); /* Set icon color */
    font-size: 24px; /* Adjust icon size */
    margin-bottom: 15px; /* Add spacing below the icon */
}

/* DIFFERENCE SECTION - MODERN CARDS */
.difference-card {
    background: white;
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow-soft);
    text-align: center;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.difference-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(46,46,46,0.15);
}

.difference-card .card-icon {
    width: 70px;
    height: 70px;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    color: var(--color-ivory);
}

.difference-card h4 {
    color: var(--color-primary);
    margin-bottom: 25px;
    font-size: 1.4rem;
}

.comparison-item {
    text-align: left;
}

.comparison-item .us,
.comparison-item .them {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    padding: 12px;
    border-radius: 8px;
}

.comparison-item .us {
    background-color: rgba(107, 166, 122, 0.1);
    border-left: 4px solid var(--color-accent);
}

.comparison-item .them {
    background-color: rgba(160, 21, 31, 0.1);
    border-left: 4px solid var(--color-primary);
}

.comparison-item .us i {
    color: var(--color-accent);
    font-size: 18px;
    margin-right: 10px;
    margin-top: 2px;
    flex-shrink: 0;
}

.comparison-item .them i {
    color: var(--color-primary);
    font-size: 18px;
    margin-right: 10px;
    margin-top: 2px;
    flex-shrink: 0;
}

.comparison-item span {
    font-size: 14px;
    line-height: 1.4;
}

/* DIFFERENCE (COMPARISON TABLE) */
.comparison-table { display: table; }
.comparison-accordion { display: none; }
@media (max-width: 768px) {
    .comparison-table { display: none; }
    .comparison-accordion { display: block; }
}
.table .highlight-col { background-color: rgba(217, 130, 43, 0.05); }

/* FOUNDER */
.founder-img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; border: 4px solid var(--color-accent); }

/* TESTIMONIALS */
.testimonial-carousel .carousel-item { padding: 0 5rem; }
.testimonial-carousel .carousel-control-prev, .testimonial-carousel .carousel-control-next { color: var(--color-secondary); width: 5%; }
.testimonial-card { background: white; box-shadow: var(--shadow-soft); padding: 2rem; border-radius: var(--radius); }
.testimonial-card img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }

/* GALLERY */
.gallery-item { cursor: pointer; border-radius: var(--radius); overflow: hidden; }
.gallery-item img { transition: transform 0.3s ease; }
.gallery-item:hover img { transform: scale(1.05); }

/* CTAs */
.cta-card { background: white; border-radius: var(--radius); padding: 2rem; text-align: center; box-shadow: var(--shadow-soft); transition: all 0.3s ease; }
.cta-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(46,46,46,0.12); }
.cta-card .icon { font-size: 2.5rem; color: var(--color-secondary); }

/* FOOTER */
footer { 
    background-color: var(--color-ivory); /* Set footer background to ivory */
    color: var(--muted); /* Set default text color to muted */
    padding: 20px 0; /* Add padding for spacing */
}
footer a {
    color: var(--color-charcoal); /* Set link color to charcoal */
    text-decoration: none; /* Remove underline */
}
footer a:hover {
    text-decoration: underline; /* Optional: Add underline on hover */
}
footer .label {
    color: var(--color-primary); /* Set label color to primary */
    font-weight: bold; /* Make labels stand out */
}

/* Footer section headings */
footer h5,
footer h6,
footer .footer-heading {
    color: var(--color-primary); /* Set heading color to primary */
    font-weight: bold; /* Make headings stand out */
}

/* Footer copyright text */
footer .copyright,
footer small,
footer .text-muted {
    color: var(--muted); /* Set copyright text to muted color */
}

/* Accessibility & Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
*:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 2px; }

/* CAREGIVER QUOTE */
#caregiver-quote {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/media/village-landscape.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#caregiver-quote .quote {
    font-size: 2.5rem !important; /* Increased font size */
    font-weight: bold;
    color: var(--color-ivory); /* Adjusted text color for better contrast */
}

#caregiver-quote p strong {
    color: var(--color-secondary);
}

/* DIFFERENCE SECTION */
#difference {
    background-color: var(--color-charcoal); /* Set the background color to charcoal */
    color: var(--color-ivory); /* Default text color to ivory */
}

#difference .lead {
    color: var(--color-ivory); /* Set the lead text color to ivory */
}

#difference h2 {
    color: var(--color-secondary); /* Set the heading color to secondary */
}

.comparison-text {
    color: var(--color-charcoal); /* Set font color to charcoal */
}

.highlight {
    font-weight: bold;
    font-size: 1.2em; /* Slightly increase font size */
    color: var(--color-primary); /* Use primary color for emphasis */
}

/* Ensure consistent icon styling for the contact section */
#contact .contact-info i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px; /* Set the size of the square */
    height: 60px; /* Set the size of the square */
    border-radius: 10px; /* Add rounded corners */
    background-color: var(--color-primary); /* Set background color */
    color: var(--color-ivory); /* Set icon color */
    font-size: 24px; /* Adjust icon size */
    margin-right: 15px; /* Add spacing to the right of the icon */
    vertical-align: middle;
}

/* Contact section background */
.contact-bg {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/media/boston-architecture.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

.contact-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/media/boston-architecture.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: grayscale(100%);
    z-index: -1;
}

.contact-bg h2,
.contact-bg .lead,
.contact-bg p {
    color: var(--color-ivory);
}

.contact-bg h2 {
    color: var(--color-secondary);
}

/* Keep icons and buttons with their original colors */
.contact-bg .contact-info i {
    background-color: var(--color-primary) !important;
    color: var(--color-ivory) !important;
}

.contact-bg .btn-primary {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

/* Ensure contact information links in the CTA have no decoration and white color */
.contact-bg .contact-info a {
    color: var(--color-ivory); /* Set link color to white */
    text-decoration: none; /* Remove underline */
}

.contact-bg .contact-info a:hover {
    text-decoration: underline; /* Optional: Add underline on hover for clarity */
}