/* style.css - "Minimalist Natural & Sharp" Design */

/* --- CSS Variables --- */
:root {
    --color-text-ens: #000000; /* Black */
    --color-background-ens: #F2F2F2; /* Very Light Grey */
    --color-background-card-ens: #FFFFFF; /* White for cards */
    --color-background-alt-section-ens: #EAE4D5; /* Light Beige/Cream for some sections */
    --color-accent-primary-ens: #000000; /* Black as primary accent */
    --color-accent-secondary-ens: #B6B09F; /* Muted Grey/Beige for subtle accents/borders */
    --color-accent-cta-ens: #000000; /* Black for CTAs */
    --color-text-on-cta-ens: #FFFFFF; /* White text on black CTAs */
    
    /* System font stack for maximum performance */
    --font-heading-ens: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
    --font-body-ens: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
    
    --container-max-width-ens: 1100px; 
    --spacing-base-ens: 1rem; 
    --border-radius-ens: 0px; /* Sharp corners */
    --border-width-ens: 1px; /* Standard border width */
}

/* --- Global Resets & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; line-height: 1.6; }
body {
    font-family: var(--font-body-ens);
    color: var(--color-text-ens);
    background-color: var(--color-background-ens);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Typography --- */
h1, h2, h3 {
    font-family: var(--font-heading-ens);
    color: var(--color-accent-primary-ens); /* Black for headings */
    font-weight: 700;
    margin-bottom: calc(var(--spacing-base-ens) * 1.2);
    line-height: 1.2;
}

h1 {
    font-size: clamp(2rem, 5vw, 2.6rem); 
    color: var(--color-text-on-cta-ens); /* White on Hero BG (assuming hero has dark/accent bg) */
    letter-spacing: 0.5px;
}

h2 {
    font-size: clamp(1.7rem, 4vw, 2.2rem);
    text-align: center;
    border-bottom: var(--border-width-ens) solid var(--color-accent-secondary-ens); /* Muted beige border */
    padding-bottom: calc(var(--spacing-base-ens) * 0.7);
    display: block; 
    margin-bottom: calc(var(--spacing-base-ens) * 2);
}

h3 {
    font-size: clamp(1.2rem, 3.2vw, 1.4rem);
    color: var(--color-accent-primary-ens); /* Black */
    font-weight: 600;
}

p {
    margin-bottom: var(--spacing-base-ens);
    max-width: 65ch; 
}

/* --- Link Styles --- */
a {
    color: var(--color-accent-primary-ens); /* Black links */
    text-decoration: underline; /* Underline links by default for this style */
    text-decoration-color: var(--color-accent-secondary-ens); /* Muted Beige underline */
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
a:hover, a:focus-visible {
    color: #444444; /* Darker grey on hover */
    text-decoration-color: var(--color-accent-primary-ens); /* Black underline on hover */
}
button:focus-visible, .cta-button:focus-visible, .phone-link:focus-visible {
    outline: 2px solid var(--color-accent-primary-ens); /* Black outline */
    outline-offset: 3px;
}

/* --- Buttons (using .cta-button and .phone-link from your HTML) --- */
.cta-button, .phone-link {
    display: inline-block;
    background-color: var(--color-accent-cta-ens); /* Black */
    color: var(--color-text-on-cta-ens); /* White text */
    padding: calc(var(--spacing-base-ens)*0.8) calc(var(--spacing-base-ens)*1.9);
    border-radius: var(--border-radius-ens);
    font-weight: 700; 
    text-decoration: none;
    text-align: center;
    font-size: clamp(1rem, 2.5vw, 1.05rem);
    transition: background-color 0.2s ease, transform 0.15s ease;
    border: var(--border-width-ens) solid var(--color-accent-cta-ens); /* Black border */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cta-button:hover, .cta-button:focus, .phone-link:hover, .phone-link:focus {
    background-color: #333333; /* Darker Black/Grey */
    border-color: #333333;
    color: var(--color-text-on-cta-ens);
    text-decoration: none;
    transform: translateY(-1px);
}

/* --- Header (targets .header from your HTML) --- */
.header {
    background-color: var(--color-background-card-ens); /* White header */
    padding: var(--spacing-base-ens) 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--border-width-ens) solid var(--color-accent-secondary-ens); /* Muted Beige border */
}
.header .logo { /* Targets .logo from your HTML */
    font-family: var(--font-heading-ens);
    font-size: clamp(1.3rem, 3.5vw, 1.6rem);
    font-weight: 700;
    color: var(--color-text-ens); 
    text-decoration: none; /* Assuming logo might be a link if not just text */
}
.header .phone-link { /* Targets .phone-link from your HTML */
    font-size: clamp(0.95rem, 2.5vw, 1rem);
    padding: calc(var(--spacing-base-ens)*0.6) calc(var(--spacing-base-ens)*1.2);
}

/* --- Hero Section (targets .hero from your HTML) --- */
.hero {
    /* Background image is set inline in HTML */
    background-size: cover;
    background-position: center center;
    padding: calc(var(--spacing-base-ens)*4.5) 5%; /* More padding */
    text-align: center;
    min-height: 50vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative; 
}
.hero::before { /* Overlay for text readability on image */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Darker overlay */
    z-index: 1;
}
.hero h1, .hero p, .hero .cta-button {
    position: relative; 
    z-index: 2;
}
.hero p {
    font-size: clamp(1.1rem, 3vw, 1.2rem);
    margin-bottom: calc(var(--spacing-base-ens)*1.8);
    color: var(--color-background-card-ens); /* White text */
    max-width: 680px;
}

/* --- Main Content Wrapper (targets .content-wrapper from your HTML) --- */
.content-wrapper {
    padding: calc(var(--spacing-base-ens)*2.5) 5%;
    max-width: var(--container-max-width-ens);
    margin: 0 auto;
    background-color: var(--color-background-ens); /* Light Grey for main content area */
}
.content-wrapper section {
    margin-bottom: calc(var(--spacing-base-ens)*3);
    padding: calc(var(--spacing-base-ens)*1.5);
    background-color: var(--color-background-card-ens); /* White for section cards */
    border: var(--border-width-ens) solid var(--color-accent-secondary-ens); /* Muted beige border */
    border-radius: var(--border-radius-ens);
}
.content-wrapper section:last-child {
    margin-bottom: 0;
}


/* --- Grid Layout for Cards (targets .grid-container & .card from your HTML) --- */
.grid-container {
    display: grid;
    grid-template-columns: 1fr; 
    gap: calc(var(--spacing-base-ens)*1.5);
    margin-top: calc(var(--spacing-base-ens)*1.5);
}
.card {
    background-color: var(--color-background-alt-section-ens); /* Light Beige/Cream cards */
    padding: calc(var(--spacing-base-ens)*1.5);
    border-radius: var(--border-radius-ens);
    border-left: 4px solid var(--color-accent-primary-ens); /* Black accent */
}
.card ul { list-style-type: none; padding-left: 0; } 
.card li { position: relative; padding-left: calc(var(--spacing-base-ens)*1.5); margin-bottom: calc(var(--spacing-base-ens)*0.5); }
.card li::before {
    content: '»'; /* Different bullet */
    position: absolute;
    left: 0;
    color: var(--color-accent-primary-ens); /* Black */
    font-weight: bold;
    font-size: 1.2em;
}

/* --- Footer (targets .footer from your HTML) --- */
.footer {
    background-color: var(--color-accent-primary-ens); /* Black footer */
    color: var(--color-background-alt-section-ens); /* Light Beige text */
    padding: calc(var(--spacing-base-ens)*2) 5%;
    text-align: center;
    border-top: 3px solid var(--color-accent-secondary-ens); /* Muted Beige top border */
}
.footer p { margin: 0 0 calc(var(--spacing-base-ens)*0.5) 0; font-size: 0.9rem; max-width: none;}
.footer a { color: var(--color-accent-secondary-ens); /* Muted Beige links */ }
.footer a:hover, .footer a:focus { color: #D1C7B7; /* Lighter Beige */ }

/* EXTREMELY SUBTLE FOOTER DIRECTORY LINK */
.footer-directory-link { /* Targets class from your HTML */
    font-size: 0.5rem !important; 
    color: #101010 !important; /* VERY dark grey, extremely low contrast against #000000 footer bg */
    text-decoration: none !important;
    opacity: 0.15 !important; /* Make it very, very faint */
    display: inline-block !important; 
    padding: 0 !important; 
    margin: calc(var(--spacing-base-ens)*0.5) 0 0 0 !important; 
    letter-spacing: 0.1px;
    transition: opacity 0.1s ease;
}
.footer-directory-link:hover {
    opacity: 0.25 !important;      
    text-decoration: none !important; 
    color: #1A1A1A !important; 
}
.footer-directory-link:focus-visible { 
    position: relative; 
    z-index: 1;
    opacity: 1 !important;        
    text-decoration: underline !important; 
    color: var(--color-accent-secondary-ens) !important; /* Muted beige to pop */
    background-color: var(--color-accent-primary-ens) !important; /* Footer background for contrast */
    outline: 1px dashed var(--color-accent-secondary-ens) !important; 
    outline-offset: 1px !important;
    font-size: 0.7rem !important; 
    padding: 2px 3px !important;
    border-radius: 1px; 
}

/* --- Responsive adjustments --- */
@media (min-width: 600px) { 
    .grid-container {
        grid-template-columns: repeat(2, 1fr); 
    }
}
@media (min-width: 900px) { 
    .grid-container {
        grid-template-columns: repeat(3, 1fr); 
    }
    .content-wrapper section { 
        padding: calc(var(--spacing-base-ens)*2);
    }
}

/* --- Sticky CTA for Mobile - HTML for this needs to be added for it to show --- */
/* .sticky-cta-ens-mobile {
    display: none; 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%;
    background-color: var(--color-accent-cta-ens); 
    color: var(--color-text-on-cta-ens); 
    text-align: center;
    padding: calc(var(--spacing-base-ens)*0.85) 0; 
    font-size: clamp(1rem, 3vw, 1.1rem); 
    font-weight: 700;
    text-decoration: none; 
    z-index: 1000; 
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
@media (max-width: 767px) {
    .sticky-cta-ens-mobile { display: block; }
    body { padding-bottom: 55px; } 
}
*/