/* =======================================
   CUSTOM.CSS — Hoermann Equine
   Replicates the look of the previous site (hoermannequine.com,
   Bootstrap 2 template). Loads after template.css and grid.css.
   ======================================= */


/* ---------------------------------------
   BASE TYPOGRAPHY
--------------------------------------- */

body { font-size: 16px; font-weight: 400; line-height: 20px; }

h1, h2, h3, h4, h5, h6 {
	margin: 10px 0;
	font-family: var(--headings-font-family);
	font-weight: 400;
	color: var(--black);
}

h1, h2 { font-size: 26px; line-height: 30px; }
h3     { font-size: 18px; line-height: 22px; }
h4     { font-size: 14px; line-height: 18px; }
h5     { font-size: 13px; line-height: 17px; }
h6     { font-size: 12px; line-height: 16px; }

p { margin-bottom: 10px !important; }

strong { font-weight: 700; }

a { color: var(--gray); font-weight: inherit; }
a:hover,
a:focus { color: #2f2f2f; text-decoration: underline; }

#maincontent ul,
#maincontent ol,
#maincontent .com-content-article ul,
#maincontent .com-content-article ol { margin: 10px 25px; padding: 0; }

#maincontent li { font-size: 16px; line-height: 22px; padding-bottom: 5px; }

.page-header {
	margin: 2px 0 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--light-gray);
}

/* Buttons (read more, etc.) */
#maincontent .btn,
#maincontent .readmore .btn {
	display: inline-block;
	padding: 4px 12px;
	border: 0;
	border-radius: 0;
	background: var(--black);
	color: var(--white);
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	text-decoration: none;
	text-transform: none;
}

#maincontent .btn:hover,
#maincontent .btn:focus { color: var(--mid-gray); }


/* ---------------------------------------
   LAYOUT — container widths match the old Bootstrap 2 grid
   (940px desktop, 724px tablet) plus Bootstrap 5's 12px gutters
--------------------------------------- */

@media (max-width: 767px) {
	.container { max-width: 100%; }
}

@media (min-width: 768px) {
	.container { max-width: 748px; }
}

@media (min-width: 980px) {
	.container { max-width: 964px; }
}


/* ---------------------------------------
   HEADER — logo left, office phone + email right
--------------------------------------- */

header .logo { padding: 0; }

header .logo img { width: 475px; max-width: 100%; height: auto; }

@media (min-width: 993px) {
	header .logo { grid-column: span 5; justify-self: start; }

	header .address {
		grid-column: 6 / 13;
		align-self: end;
		padding: 0;
		text-align: right;
	}
}

header .address h2 { font-size: 22px; line-height: 26px; }

header .address a { color: inherit; text-decoration: none; }

@media (max-width: 992px) {
	header .address { text-align: center; }
}


/* ---------------------------------------
   NAVIGATION — #555 bar, white bold links, #222 hover/current
--------------------------------------- */

#mainNav ul.mod-menu > li > a { padding: 10px; }


/* ---------------------------------------
   HERO — slideshow (Home) / map (Contact)
--------------------------------------- */

.mapEmbed iframe {
	display: block;
	width: 100%;
	height: 300px;
	border: 0;
	filter: grayscale(1);
}


/* ---------------------------------------
   MAIN CONTENT
--------------------------------------- */

.contentGrid { padding: 10px 1em 1em; }

/* Article image (team biography) — floats right at 350px */
.com-content-article .item-image.float-end {
	max-width: 350px;
	margin: 0 0 10px 10px;
}

.com-content-article .item-image img { width: 100%; height: auto; }

@media (max-width: 767px) {
	.com-content-article .item-image.float-end { float: none !important; max-width: 100%; margin: 0 0 10px; }
}

/* Contact */
.areasTitle { margin: 30px 0 0; font-size: 18px; color: var(--body-text-color); }

.grayPanel {
	margin: 20px 0 15px;
	padding: 15px;
	background: var(--light-gray);
}

/* FAQ — native <details> accordion */
.faqList { margin: 10px 0 18px; }

.faqItem { margin-bottom: 2px; border: 1px solid #e5e5e5; border-radius: 4px; }

.faqItem summary {
	display: block;
	padding: 8px 15px;
	font-family: var(--headings-font-family);
	color: var(--gray);
	cursor: pointer;
	list-style: none;
}

.faqItem summary::-webkit-details-marker { display: none; }

.faqItem summary:hover,
.faqItem summary:focus-visible { color: #2f2f2f; text-decoration: underline; }

.faqItem[open] summary { background: #f8f8f8; color: var(--black); text-decoration: none; }

.faqBody { padding: 9px 15px; border-top: 1px solid #e5e5e5; }


/* ---------------------------------------
   SERVICES BLOG — grey boxes, black top border
   (menu item page class: page-services)
--------------------------------------- */

.page-services #maincontent .blog-items { column-gap: 20px; }

.page-services #maincontent .blog-item {
	position: relative;
	min-height: 250px;
	margin: 10px 20px 10px 10px;
	padding: 10px 10px 3.5em;
	border: 0;
	border-top: 10px solid var(--black);
	background: var(--light-gray);
}

.page-services #maincontent .blog-item .item-content { padding: 0; }

.page-services #maincontent .blog-item .page-header { border-bottom: 1px solid var(--gray); }

.page-services div#maincontent div.item-content div.page-header h2 { font-size: 26px; }

.page-services #maincontent .blog-item .readmore {
	position: absolute;
	bottom: 0;
	right: -5px;
	margin: 0 !important;
}

@media (max-width: 991px) {
	.page-services #maincontent .blog-item { min-height: 0; }
}

@media (max-width: 767px) {
	.page-services #maincontent .blog-items { grid-template-columns: 1fr; }
	.page-services #maincontent .blog-item { margin: 10px 0; }
}


/* ---------------------------------------
   TEAM BLOG — simple photo cards
   (menu item page class: page-team)
--------------------------------------- */

.page-team #maincontent .blog-item {
	border: 0;
	background: var(--light-gray);
	text-align: center;
}

.page-team #maincontent .blog-item .item-image { float: none; margin: 0; }

.page-team #maincontent .blog-item .item-image img { display: block; width: 100%; height: auto; }

.page-team #maincontent .blog-item .page-header { border: 0; margin: 0; padding: 0; }

.page-team div#maincontent div.item-content div.page-header h2 { font-size: 20px; line-height: 26px; }

.page-team #maincontent .blog-item .page-header h2 a { color: var(--black); }

.page-team #maincontent .blog-item p { font-size: 14px; }

.page-team #maincontent .blog-item .readmore { margin-top: 20px; }


/* ---------------------------------------
   FOOTER — white text on the black page background
--------------------------------------- */

footer { padding: .5em 0; text-align: center; }

#footer-copyright a { color: var(--white); font-weight: 600; }