/* CSS BY Camille Covey */

/* IMPORTED FONTS */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* CSS RESET */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ROOT VARIABLES */
:root {
	/*colors*/
    --midnight-blue: #1F2A44;
    --olive-green: #76885B;
    --champagne-gold: #E5C185;
    --linen: #F8F4EC;
    --dark-charcoal: #2B2B2B;
    --soft-white: #FAF9F6;

	/*fonts*/
    --font: 'Playfair Display', Arial, sans-serif;

	/*graphic styling*/
	--container: 1100px;
	--radius: 14px;
	--shadow: 0 8px 18px rgba(0,0,0,.18);
}

/* GLOBAL STYLES (mobile first/small) */
body {
	font-family: var(--font);
	color: var(--dark-charcoal);
	background: var(--soft-white);
	line-height: 1.6;
	font-size: 1.25rem;
}

.container { /*main container of website*/
	width: min(92vw, var(--container)); /*sets the container to never be wider than 92% of the viewport but it will also never exceed 1100px (per my function)*/
	margin: 0 auto;
}

/*HEADER & LOGO STYLING*/
.webpage-header {
	background: var(--midnight-blue);
	color: white;
	text-align: center;
}

.mainheader {
	padding: 2.25rem 1rem 1rem;
}

.brandLogo {
	margin-inline: auto;
	width: 170px;
	height: auto;
}

.brandTitle {
	font-size: clamp(2.2rem, 6vw, 4.5rem); /*challenging myself to use clamp functions for responsive text sizing*/
	font-weight: 800;
	letter-spacing: .5px;
	margin-top: .5rem;
}

.tagline {
	font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  	opacity: .95;
  	margin-top: .25rem;
  	margin-bottom: 1rem;
}

/*NAV STYLING*/
.nav-menu {
  	background-color: var(--champagne-gold);
}

.nav-list {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: .5rem;
	padding: .75rem 1rem;
	margin: 0 auto;
	width: min(92vw, var(--container)); /*sets the nav-list to never be wider than 92% of the viewport but it will also never exceed 1100px (per my function)*/
}

.nav-list a {
	text-decoration: none;
	font-weight: 800;
	text-align: center;
	display: block;
	padding: .4rem .5rem;
	color: #1f2a44;
}

/*GlOBAL STYLING FOR ALL SECTIONS*/

.section {
	padding-top: 1rem;
}

.section-title {
	font-size: clamp(1.8rem, 4.5vw, 2.6rem);
	color: var(--midnight-blue);
	line-height: 1.2;
	margin-top: 0;
  	margin-bottom: 1rem;
}
#about {
	padding-top: 5rem;
}
#about p, #gallery p {
	font-weight: 500;
}

/*GLOBAL STYLING FOR ALL DIVIDER LINES*/
.divider-line {
	border: none;
	height: 2px;
	background-color: var(--champagne-gold);
	width: 100%;
	margin: 2rem 0;
	height: 2px;
	opacity: .9;
}

/*OFFERING SECTION - "CARD" CONTAINER STYLING*/
.cards {
	display: grid;
	gap: 1rem;
	margin-top: .5rem;
}

.cards p, .cards ul {
	font-size: 1.25rem;
}

.card {
	background: var(--olive-green);
	color: #fff;
	border-radius: var(--radius);
	padding: 1.1rem 1.15rem;
	box-shadow: var(--shadow);
}

.card-title {
	font-size: clamp(1.35rem, 4vw, 1.85rem);
	line-height: 1.15;
}

.card-list {
	margin-top: .5rem;
	margin-bottom: .25rem;
	list-style: disc;
	padding-left: 1.2rem;
}

/*GALLERY & IMAGE STYLING*/
.gallery {
	margin-top: 1rem;
	display: grid;
	gap: 1rem;
}

.gallery-card {
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--shadow);
}

.gallery-card img {
	aspect-ratio: 4/3; /*set aspect ratio to maintain image proportions*/
	object-fit: cover; /*ensures image covers the entire area of the img element, cropping if necessary instead of stretching image*/
	width: 100%;
}

.gallery-card figcaption {
	padding: .8rem 1rem;
	font-size: 1.5rem;
	font-family: var(--font);
	font-weight: 600;
	font-style: italic;
	color: #333;
	background: #fff;
	text-align: center;
}

/*FOOTER & BUTTON STYLING*/
.button {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--olive-green);
	color: #fff;
	text-decoration: none;
	font-size: 1.5rem;
	font-weight: 800;
	padding: 1.5rem 0;
	margin-top: 1.5rem;
	border-radius: 10px;
	box-shadow: var(--shadow);
}

.webpage-footer {
	background: var(--midnight-blue);
	color: white;
	text-align: center;
	padding: 2.25rem 1rem 3rem;
}

.webpage-footer a { 
	color: var(--champagne-gold);
	font-weight: 700;
	text-decoration: none; 
}

.webpage-footer .social { 
	margin-top: 1.2rem; 
}

/* MEDIA QUERY (medium) */
@media screen and (min-width: 600px) {

	.mainheader { 
		padding: 3rem 1rem 1.25rem;
	}

	.brandLogo { 
		width: 190px;
	}

	.cards {
		grid-template-columns: 1fr 1fr;
	}

	.card--wide {
		grid-column: 1 / -1;
	}

	.gallery {
		grid-template-columns: 1fr 1fr;
	}

	.gallery-card figcaption { 
		font-size: 1.25rem;
	}
}

/* MEDIA QUERY (large) */
@media screen and (min-width: 900px) {
	.brandLogo {
		width: 200px;
	}

	.cards {
		grid-template-columns: 1fr 1fr;
	}
	.card--wide {
		grid-column: 1 / -1;
	}

	.gallery {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.gallery-card figcaption {
		font-size: 1.15rem;
	}
}

/* MEDIA QUERY (xl) */
@media screen and (min-width: 1200px) {
	.container {
		width: min(86vw, var(--container));
}

	.gallery {
		grid-template-columns: repeat(5, 1fr);
}

	.gallery-card img {
		aspect-ratio: 1 / 1;
}

	.gallery-card figcaption {
		font-size: 1rem;
}