/*
Theme Name: Twenty Twelve Child - Monsen Design
Description: Monsen Design brand styling on Twenty Twelve. Replaces the frozen Make 1.8.11 / Make Plus 1.8.2 stack (vendor defunct). Content layouts live in page content as core blocks; this theme only carries branding.
Template: twentytwelve
Version: 1.3.25
*/

/* ---- Brand palette (carried over from the Make theme customizer) ----
   page background   #d7d7d7    body text        #4b4b51
   accent teal       #a9dad6    detail brown     #473f3f
   slate bar/footer  #6b6c7d    footer text      #d9dbdd
   Links darkened from the old #92c1f0/#4d8fd1 for WCAG AA contrast. */

body {
	background-color: #d7d7d7;
	color: #4b4b51;
	/* Twenty Twelve defaults to 14px body text; the old theme ran 16px.
	   NB: the parent sets the root font-size to 87.5% (1rem = 14px), so
	   16px is 16/14 rem — not the 1.6rem of the usual 10px-root idiom. */
	font-size: 16px;
	font-size: 1.142857143rem;
	line-height: 1.6;
}

body .site {
	box-sizing: border-box;
	max-width: 1144px; /* the old boxed layout's width; Twenty Twelve's 960 feels cramped under the 700px hero */
	margin: 0 auto;
	padding: 0 48px;
}

/* Headings: Cinzel (body stays on Twenty Twelve's own Open Sans) */
h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title {
	font-family: Cinzel, Georgia, "Times New Roman", serif;
	font-weight: 400;
	color: #4b4b51;
}

.entry-content h2,
.entry-content h3 {
	font-size: 24px;
	margin-bottom: 12px;
}

/* Small letterspaced-caps label (echoes the header tagline) for short
   detail groups like the Contact page's "Hours" — hugs the line below
   it, keeps its distance from the block above */
.entry-content .detail-label {
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 28px 0 4px;
}

.entry-content .detail-label + p {
	margin-top: 0;
}

/* Single posts show their title (pages hide theirs); the old theme set it
   large and bold */
.single .entry-title {
	font-size: 46px;
	font-weight: 700;
}

@media (max-width: 599px) {
	.single .entry-title {
		font-size: 32px;
	}
}

/* The .entry-content/.comment-content variants match Twenty Twelve's own
   higher-specificity "a:visited washes out to gray" rules, which would
   otherwise beat a bare selector here */
a,
a:visited,
.entry-content a,
.entry-content a:visited,
.comment-content a,
.comment-content a:visited {
	color: #2d6fb8;
	text-decoration: none;
}

a:hover,
a:focus,
.entry-content a:hover,
.entry-content a:focus,
.comment-content a:hover,
.comment-content a:focus {
	color: #4d8fd1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The nav keeps its quieter color-shift hover; no underline there */
.main-navigation li a:hover,
.main-navigation li a:focus {
	text-decoration: none;
}

/* The old theme's images are square-cornered and flat */
.entry-content img,
.wp-block-image img {
	border-radius: 0;
	box-shadow: none;
}

/* ---- Slate social bar (full-bleed, above the boxed page) ---- */

.header-bar {
	background: rgba(107, 108, 125, 0.7);
	box-sizing: border-box;
	max-width: 1144px; /* boxed, aligned with .site, like the old theme */
	margin: 0 auto;
	padding: 18px 0;
}

.header-bar .social-icons {
	box-sizing: border-box;
	list-style: none;
	margin: 0 auto;
	padding: 0 48px;
	text-align: right;
}

.header-bar .social-icons li {
	display: inline-block;
	margin-left: 22px;
}

.header-bar .social-icons a {
	color: #ffffff;
	display: inline-block;
	line-height: 0;
}

.header-bar .social-icons a:hover svg,
.header-bar .social-icons a:focus svg {
	fill: #a9dad6;
}

.header-bar .social-icons svg {
	width: 20px;
	height: 20px;
	fill: #ffffff;
	transition: fill 0.15s ease;
}

/* ---- Header: centered logo, tagline, hairline nav ---- */

.site-header {
	padding: 36px 0 0;
	text-align: center;
}

.site-header .site-logo {
	display: block;
	padding: 12px 0 4px;
}

.site-header .site-logo img {
	max-height: 120px;
	max-width: 100%; /* the wordmark's wide aspect ratio otherwise overflows narrow screens */
	width: auto;
	height: auto; /* the img's height attribute otherwise pins the height and squishes the logo when max-width clamps */
}

.site-header .site-description {
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #171717;
	margin: 8px 0 20px;
}

.main-navigation {
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	max-width: 960px; /* the old nav rules stop short of the box edges */
	margin: 0 auto;
	padding: 10px 0;
	text-align: center;
}

.main-navigation ul.nav-menu {
	/* No unconditional "display" here: Twenty Twelve hides this by default
	   and only shows it (a) toggled-on below 600px or (b) forced open
	   above 600px. An unconditional override here previously fought (a)
	   and left the mobile menu permanently expanded next to its own toggle. */
	text-align: center;
	border: 0; /* Twenty Twelve draws its own double border; ours replaces it */
}

/* Mobile menu toggle: a full-width bar with a hamburger, like the old
   theme's — but in the site's slate rather than black, matching the
   social bar and footer. The parent controls when it displays; this
   only reskins it. */
.main-navigation .menu-toggle {
	background: #6b6c7d;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #ffffff;
	width: 100%;
	padding: 12px 16px;
	font-size: 16px;
	text-shadow: none;
}

.main-navigation .menu-toggle::before {
	content: "\2630"; /* ☰ */
	margin-right: 10px;
}

.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus,
.main-navigation .menu-toggle:active,
.main-navigation .menu-toggle.toggled-on {
	background: #5a5b6a;
	color: #ffffff;
}

.main-navigation li {
	margin: 0 18px;
}

.main-navigation li a {
	font-size: 14px;
	text-transform: none;
	color: #6b6b6b;
	line-height: 1.4;
}

.main-navigation li a:hover,
.main-navigation li a:focus {
	color: #473f3f;
}

.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_item > a {
	color: #473f3f;
	font-weight: 700;
}

/* ---- Page titles: the old design lets content speak; keep the h1 for
        screen readers only ---- */

.page .entry-header .entry-title {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute;
}

/* ---- Interior pages: 960px content column, centered like the old
        theme (and matching the nav rules' width). The front page is
        excluded so the hero keeps its full-bleed. ---- */

/* body.page, not bare .page: the article element also carries the
   "page" class, and it never has "home", so an unscoped :not(.home)
   would re-match on the front page and shrink the hero. */
body.page:not(.home) .entry-content,
body.single .entry-content,
body.single .entry-header {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

/* ---- Front page hero: full image at its natural aspect (the old
        banner's "aspect" mode — no vertical crop), bleeding to the box
        edges ---- */

.home .entry-content > .wp-block-image {
	margin: 0 -48px;
}

.home .entry-content > .wp-block-image img {
	width: 100%;
	height: auto;
}

/* ---- Column divider (About page): hairline between side-by-side
        columns, gone once the block stacks them (core stacks columns
        below 782px). The border sits on the image column, which is kept
        from stretching, so the line runs exactly the image's height; both
        columns' first children lose their top margins so image, line, and
        text all start level. ---- */

/* All column layouts: columns start level — no stray top margin on the
   first element of any column (headings otherwise sit lower than images
   in the neighboring column) */
.entry-content .wp-block-column > :first-child {
	margin-top: 0;
}

@media (min-width: 782px) {
	.wp-block-columns.has-column-divider > .wp-block-column:first-child {
		border-right: 1px solid #e5e5e5;
		padding-right: 32px;
		align-self: flex-start;
	}
}

/* ---- Buttons ---- */

button,
input[type="button"],
input[type="submit"],
.wp-block-button__link {
	background: #a9d8d7;
	color: #473f3f;
}

/* ---- Post listings (Query Loop pages) ---- */

.entry-content ul.wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Media-object rows, thumbnail on the right like the old post lists.
   Posts without a featured image just use the full row width. */
.wp-block-post-template > li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 4px 32px;
	align-items: start;
	margin-bottom: 40px;
}

.wp-block-post-template > li > * {
	grid-column: 1;
}

/* Top-align each row: the title otherwise carries a default top margin
   that drops it below the thumbnail's top edge */
.wp-block-post-template .wp-block-post-title {
	margin-top: 0;
}

.wp-block-post-template .wp-block-post-featured-image {
	grid-column: 2;
	grid-row: 1 / span 4;
	margin: 0;
}

/* The size cap also steers srcset away from the multi-megabyte originals */
.wp-block-post-template .wp-block-post-featured-image img {
	max-height: 240px;
	width: 100%;
	object-fit: cover;
}

@media (max-width: 599px) {
	.wp-block-post-template > li {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-post-template .wp-block-post-featured-image {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ---- Contact form (contact-form-generator plugin) ----
        Strip the plugin's animations and restyle its Arial-and-gray look
        to the theme. Overrides only — the plugin itself stays stock.
        The wrapper's own class stack (.cfg_form_1.cfg_icon_1.…_wrapper)
        gives every rule three classes of specificity, which outranks the
        plugin's one-to-two-class selectors without any !important. ---- */

.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper,
.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper * {
	transition: none;
	animation: none;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper,
.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper:hover {
	background: #ffffff;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}

/* The form's sections indent 15px by default; keep them flush with the
   page's text column (the inputs' own 8px inner padding stays) */
.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper .contactformgenerator_header,
.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper .contactformgenerator_body,
.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper .contactformgenerator_footer {
	padding-left: 0;
	padding-right: 0;
}

.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper .contactformgenerator_title {
	font-family: Cinzel, Georgia, "Times New Roman", serif;
	font-size: 24px;
	font-weight: 400;
	color: #4b4b51;
	border-bottom: 0; /* the plugin draws a dotted rule here */
}

.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper .contactformgenerator_pre_text {
	font-size: 15px;
	color: #4b4b51;
}

.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper label {
	color: #4b4b51;
	font-size: 14px;
}

.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper .contactformgenerator_input_element,
.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper input:not([type="submit"]):not(.contactformgenerator_send):not(.contactformgenerator_send_new),
.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper textarea,
.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper select {
	background: #ffffff;
	border-color: #d7d7d7;
	border-radius: 0;
	box-shadow: none;
	color: #4b4b51;
	font-size: 15px;
}

.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper .contactformgenerator_input_element:focus-within {
	border-color: #a9dad6;
}

/* The send button is the one place !important is unavoidable: the
   plugin's own template.css forces the button's background/hover
   gradients with !important (e.g. ".contactformgenerator_send:hover
   { background: … !important }"), so only an !important can restyle it. */
.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper .contactformgenerator_send,
.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper .contactformgenerator_send_new {
	background: #a9d8d7 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #473f3f !important;
	font-size: 15px !important;
	padding: 10px 28px !important;
}

.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper .contactformgenerator_send:hover,
.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper .contactformgenerator_send:focus,
.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper .contactformgenerator_send_new:hover,
.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper .contactformgenerator_send_new:focus {
	background: #96cdcc !important;
	color: #473f3f !important;
}

/* ---- Footer: widget columns + credit strip, all on slate ---- */

footer[role="contentinfo"] {
	background: #6b6c7d;
	color: #d9dbdd;
	clear: both; /* .site-content floats */
	width: calc(100% + 96px); /* span the box through its 48px paddings */
	max-width: none;
	margin: 48px -48px 0;
	border-top: 0;
	padding: 0;
}

/* Pages print an empty entry-meta footer and a thick article rule; drop both */
.page footer.entry-meta {
	display: none;
}

.page article {
	border-bottom: 0;
}

/* The old site hid all post meta ("posted in ... by ...") and the prev/next
   post links on single posts; match that, and drop the now-orphaned
   double-rule article border along with them. */
.single .entry-meta,
.single .nav-single {
	display: none;
}

/* Old testimonial posts are classic-editor content: floated (alignleft)
   image rows followed by caption paragraphs. Keep captions at the left
   margin instead of wrapping beside the float. */
.single .entry-content p {
	clear: left;
}

.single article {
	border-bottom: 0;
}

/* Front page: hero runs straight into the footer, old-site style */
.home article {
	margin-bottom: 0;
}

.home footer[role="contentinfo"] {
	margin-top: 0;
}

.footer-widgets {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	padding: 32px 48px 24px;
}

.footer-widgets .widget {
	flex: 1 1 240px;
	margin-bottom: 0;
}

/* First column ("Everyday livability...") is a title with no body text,
   so it reads better centered against its taller neighbor than pinned
   to the top-left like the others. */
.footer-widgets .widget:first-child {
	align-self: center;
	text-align: center;
}

.footer-widgets .widget-title {
	font-family: Cinzel, Georgia, "Times New Roman", serif;
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	color: #d9dbdd;
	margin-bottom: 8px;
}

.footer-widgets .widget,
.footer-widgets .widget p,
.footer-widgets .widget li {
	font-size: 13px;
	color: #d9dbdd;
}

footer[role="contentinfo"] .site-info {
	border-top: 1px solid rgba(242, 227, 222, 0.35);
	position: relative;
	padding: 18px 48px;
	font-size: 13px;
	text-align: center;
}

footer[role="contentinfo"] a {
	color: #ffffff;
}

footer[role="contentinfo"] a:hover,
footer[role="contentinfo"] a:focus {
	color: #eaecee;
}

/* Small muted icons, bottom-right of the credit strip, like the old site */
.site-info .social-links {
	list-style: none;
	position: absolute;
	right: 48px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	padding: 0;
}

.site-info .social-links li {
	display: inline-block;
	margin-left: 12px;
}

.site-info .social-links a {
	display: inline-block;
	line-height: 0;
}

.site-info .social-links svg {
	width: 13px;
	height: 13px;
	fill: #d9dbdd;
	transition: fill 0.15s ease;
}

.site-info .social-links a:hover svg,
.site-info .social-links a:focus svg {
	fill: #ffffff;
}

/* ---- Small screens ---- */

@media (max-width: 599px) {
	body .site {
		padding: 0 24px;
	}

	.header-bar .social-icons {
		padding: 0 24px;
		text-align: center;
	}

	.home .entry-content > .wp-block-image {
		margin-left: -24px;
		margin-right: -24px;
	}

	footer[role="contentinfo"] {
		width: calc(100% + 48px);
		margin-left: -24px;
		margin-right: -24px;
	}

	.footer-widgets {
		padding: 24px 24px 16px;
	}

	footer[role="contentinfo"] .site-info {
		padding: 16px 24px 20px;
	}

	/* The icons' fixed "right: 48px" targets the wide desktop box; on a
	   narrow screen that lands them on top of the centered credit text.
	   Drop back into normal flow, centered on their own line instead. */
	.site-info .social-links {
		position: static;
		transform: none;
		margin: 8px 0 0;
		text-align: center;
	}
}