/* ==== Reset & Base ==== */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { font-family: 'Inter', sans-serif; line-height: 1.6; color:#222; }
body { background:#fafafa; }

/* ==== Layout ==== */
.container { max-width: 1200px; margin:0 auto; padding:0 1.5rem; }
section { margin-bottom: 4rem; }

/* ==== Typography ==== */
h1, h2 { font-weight:700; }
h1 { font-size:2.8rem; margin-bottom:.5rem; }
h2 { font-size:1.8rem; margin-bottom:1rem; color:#004b87; }
p, li { font-size:1rem; }
a { color:#004b87; text-decoration:none; }
a:hover { text-decoration:underline; }
a.phone-number	{
	cursor: default;
	pointer-events: none;
}

/* ==== Hero ==== */
.hero {
    /*background: linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)), url('assets/in.png') center/cover no-repeat; /* Placeholder - replace with actual hero image */
    background: grey;
    color:#fff;
    text-align:center;
    padding:6rem 1rem;
}
.hero .cta {
    display:inline-block;
    margin-top:1.5rem;
    background:#ff6b35;
    color:#fff;
    padding:.75rem 1.5rem;
    border-radius:4px;
    font-weight:600;
    font-size:1.1rem;
}
.hero .cta:hover { background:#e55a2b; }

/* ==== Intro ==== */
.intro { background:#fff; padding:2rem; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.05); }

/* ==== Map ==== */
.map-section .sub { font-size:.9rem; color:#555; margin-bottom:1rem; }
.location-list {
    list-style:none;
    display:grid;
    gap:1rem;
    grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
    margin:2rem 0;
    font-size:.95rem;
}
.location-list li {
    background:#fff;
    padding:1rem;
    border-radius:6px;
    box-shadow:0 1px 4px rgba(0,0,0,.07);
}
.location-list strong { color:#004b87; }

.map-wrapper { 
    margin:2rem 0; 
    text-align:center; 
    max-width:572px;  /* Cap at natural width */
    width:100%;       /* Ensure responsiveness */
    margin-left:auto;
    margin-right:auto;
    border:1px solid #ddd;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
    position:relative; /* Ensure map areas are clickable */
}

/* ==== Lists ==== */
.features, .ideal-list {
    list-style:none;
    display:grid; gap:.75rem;
    grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
}
.features li, .ideal-list li {
    background:#fff; padding:1rem;
    border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,.07);
}

/* ==== CTA Section ==== */
.cta-section {
    background:#004b87; color:#fff; padding:3rem 2rem;
    border-radius:8px; text-align:center;
}
.cta-section h2 { color:#fff; }
.cta-section .phone { font-size:1.8rem; font-weight:700; color:#ff6b35; }
.cta-section .email { color:#ff6b35; }
.cta-section .btn {
    display:inline-block; margin-top:1rem;
    background:#ff6b35; color:#fff; padding:.75rem 1.5rem;
    border-radius:4px; font-weight:600;
}
.cta-section .btn:hover { background:#e55a2b; }

/* ==== Footer ==== */
footer { background:#222; color:#ccc; padding:1.5rem 0; text-align:center; font-size:.9rem; }

/* ==== Responsive ==== */
@media (max-width: 640px) {
    h1 { font-size:2.2rem; }
    .hero { padding:4rem 1rem; }
    .features, .ideal-list { grid-template-columns:1fr; }
    .map-wrapper { max-width:100%; } /* Allow full width on small screens */
}

/* Sub-page Header */
.sub-header {
    background:#004b87; color:#fff; padding:2rem 0; text-align:center;
}
.sub-header .back {
    position:absolute; left:1.5rem; top:1.5rem; color:#ff6b35; font-weight:600;
}
.sub-header h1 { font-size:2.2rem; margin:1rem 0 .5rem; }
.sub-header .address { font-size:1.1rem; opacity:0.9; }

/* Location Page */
.location-page section { margin-bottom:3rem; }
.main-photo {
    width:100%; height:auto; border-radius:8px; margin-bottom:1rem;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
}

/* Floor Plan Grid */
.floorplans .grid {
    display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
}
.floorplans img {
    width:100%; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.1);
    transition:transform .2s;
}
.floorplans img:hover { transform:scale(1.02); }
.note { font-size:.9rem; color:#666; margin-top:.5rem; }


@media (max-width: 640px) {
    .sub-header .back { position:static; display:block; margin-bottom:1rem; }
}

@media (max-width: 768px) {
	a.phone-number { 
		cursor: pointer;
	 	pointer-events: auto; 
		text-decoration: underline;
	}
}