/* Kel-Leigh Couture - faithful reproduction of the original 970px Dreamweaver-era
   bridal site. Flowing layout (not absolute-positioned) so it reflows on mobile,
   but palette, fonts, logo banner, nav and awards footer match the capture. */

* { box-sizing: border-box; }

body {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 14px;
	color: #333;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
}

a { color: #000; }
a:hover { color: #666; }

#container {
	background-color: #fff;
	width: 970px;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	text-align: left;
}

/* ---- logo banner ---- */
#logo {
	width: 100%;
	background-color: #fff;
}
#logo img {
	display: block;
	width: 970px;
	max-width: 100%;
	height: auto;
}

/* ---- navigation ---- */
#navigation {
	background-color: #fff;
	width: 100%;
	border-bottom: 1px solid #eee;
}
#navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
#navigation li { list-style-type: none; }
#navigation a {
	color: #000;
	text-decoration: none;
	padding: 8px 15px;
	display: block;
	font-size: 14px;
}
#navigation a:hover,
#navigation a.active {
	background-color: #ccc;
	color: #000;
}

/* ---- address strip ---- */
#addressbar {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000;
	text-align: center;
	padding: 10px 0 4px;
}
#socialtop { text-align: center; padding-bottom: 8px; }
#socialtop img { width: 40px; height: 40px; vertical-align: middle; margin: 0 4px; }

/* ---- main content ---- */
#main {
	padding: 18px 20px 24px;
	min-height: 360px;
}
#main h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 26px;
	font-weight: bold;
	color: #000;
	text-align: center;
	margin: 6px 0 18px;
}
#main h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	color: #000;
	text-align: center;
	margin: 22px 0 10px;
}
#main p { line-height: 1.55; }
.center { text-align: center; }
.lead { font-family: "Times New Roman", Times, serif; font-size: 17px; text-align: center; }
.sig { font-family: Georgia, serif; font-style: italic; font-size: 16px; }

/* two-column prose blocks (about, couture) */
.cols2 {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	align-items: flex-start;
}
.cols2 > .col {
	flex: 1 1 340px;
	min-width: 280px;
}
.panel {
	background-color: #ebebeb;
	padding: 14px 16px;
	margin-bottom: 14px;
}
.subhead {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	color: #000;
	text-decoration: underline;
	text-align: center;
	display: block;
	margin: 8px 0;
}
.awardlist p { margin: 2px 0; font-size: 13px; text-align: center; }

/* ---- image galleries (gowns / accessories) ---- */
.designer-group { margin-bottom: 26px; }
.designer-group h2 { text-decoration: underline; }
.designer-blurb { text-align: center; max-width: 720px; margin: 0 auto 14px; font-size: 13px; }
.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
}
.gallery figure {
	margin: 0;
	text-align: center;
	background: #fff;
	border: 1px solid #e3e3e3;
	padding: 6px;
}
.gallery figure img {
	width: 100%;
	height: 230px;
	object-fit: cover;
	display: block;
}
.gallery figcaption {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #333;
	padding-top: 6px;
}

/* sidebar designer cards on gowns page */
.designer-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	margin: 10px 0 26px;
}
.designer-cards .card {
	background-color: #ebebeb;
	text-align: center;
	padding: 8px;
	font-size: 13px;
}
.designer-cards .card img { width: 120px; height: 120px; object-fit: contain; }
.designer-cards .card strong {
	font-family: Georgia, serif;
	display: block;
	margin: 4px 0;
}

/* ---- testimonials ---- */
.testgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}
.testimonial {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
	color: #333;
	font-weight: bold;
	background-color: #ccc;
	border: 1px solid #000;
	padding: 12px 14px;
}
.testimonial .stars { color: #d4a017; letter-spacing: 2px; font-size: 16px; }
.testimonial .who { font-style: italic; font-size: 14px; color: #000; }

/* ---- media page ---- */
.mediablock {
	border: 2px solid #000;
	padding: 16px;
	margin-bottom: 22px;
}
.mediablock h2 { text-align: left; margin-top: 0; }
.mediablock .shots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
	margin-top: 12px;
}
.mediablock .shots img { width: 100%; height: auto; display: block; }

/* ---- contact ---- */
.contactgrid { display: flex; flex-wrap: wrap; gap: 26px; }
.contactgrid .col { flex: 1 1 340px; min-width: 280px; }
.contactgrid iframe, .contactgrid img { max-width: 100%; }
.hours { font-family: Georgia, serif; font-weight: bold; text-align: center; font-size: 15px; }

/* ---- blog ---- */
.bloglist { list-style: none; padding: 0; margin: 0; }
.bloglist li { border-bottom: 1px solid #ddd; padding: 16px 0; }
.bloglist h2 { text-align: left; margin: 0 0 6px; }
.bloglist h2 a { text-decoration: none; }
.postmeta { font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #777; margin-bottom: 6px; }
.article-content { max-width: 760px; margin: 0 auto; }
.article-content p { line-height: 1.65; }
.article-content h2 { text-align: left; }

/* ---- awards + footer ---- */
#awards { text-align: center; padding: 16px 0 8px; }
#awards img { width: 960px; max-width: 100%; height: auto; }
#social { text-align: center; padding: 8px 0 4px; }
#social img { width: 40px; height: 40px; margin: 0 5px; }
#footer {
	background-color: #fff;
	font-family: "Goudy Old Style", Georgia, serif;
	font-size: 12px;
	text-align: center;
	color: #555;
	padding: 18px 10px 26px;
	border-top: 1px solid #eee;
}
#footer a { color: #555; }

.crumbs { font-size: 12px; color: #888; margin: 0 0 10px; }
.crumbs a { color: #888; text-decoration: none; }

@media (max-width: 640px) {
	#navigation ul { justify-content: center; }
	#main { padding: 14px 12px 20px; }
	.gallery figure img { height: 200px; }
}