/*
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.40
*/

/* ---- 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;
	/* icons only — kill the list's line-box strut so the bar is an exact
	   56px (2×18 padding + 20px icon) and the icons center in it */
	line-height: 0;
}

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

.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: sits top-left in the slate header bar, opposite
   the Instagram icon. The bar is at the very top of the document, so the
   button can be absolutely positioned into it without markup changes;
   the parent theme hides the toggle entirely at 600px and up. */
.main-navigation .menu-toggle {
	position: absolute;
	top: 11px; /* (56px bar − 34px button) / 2 */
	left: 12px; /* + 12px button padding = 24px glyph inset, matching the Instagram icon's inset on the right */
	z-index: 20;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #ffffff;
	padding: 9px 12px;
	font-size: 15px;
	line-height: 0;
	text-shadow: none;
}

/* Hamburger drawn with gradients rather than the ☰ glyph, whose size and
   baseline vary by platform font */
.main-navigation .menu-toggle::before {
	content: "";
	display: inline-block;
	width: 20px; /* matches the Instagram icon's size across the bar */
	height: 16px;
	background:
		linear-gradient(#ffffff, #ffffff) 0 0 / 100% 2px no-repeat,
		linear-gradient(#ffffff, #ffffff) 0 7px / 100% 2px no-repeat,
		linear-gradient(#ffffff, #ffffff) 0 14px / 100% 2px no-repeat;
}

.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus,
.main-navigation .menu-toggle:active,
.main-navigation .menu-toggle.toggled-on {
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
}

/* Logged-in admin bar (46px at the widths where the toggle exists) shifts
   the page down but not document-anchored positioning — offset to match,
   or the bar covers the button. Visitors are unaffected. */
body.admin-bar .main-navigation .menu-toggle {
	top: 57px; /* 46px admin bar + 11px */
}

.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.
   Flex with min-width bases instead of breakpoints: the text group takes
   all spare space (999 grow) beside the image when both bases fit, and
   the image wraps below the text when they don't. Posts without a
   featured image just use the full row width. Each row's text (title +
   excerpt) is wrapped in a group block in the page markup so it acts as
   one flex item. */
.wp-block-post-template > li {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	align-items: flex-start;
	margin-bottom: 40px;
}

.wp-block-post-template > li > .wp-block-group {
	flex: 999 1 320px;
	min-width: 0;
}

/* 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 {
	flex: 1 1 380px;
	max-width: 420px;
	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: 300px;
	width: 100%;
	object-fit: cover;
}

/* ---- 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;
}

/* The plugin absolutely positions the required-field asterisk against an
   inline wrapper. Once a label wraps to two lines that containing block
   spans both, so the star pins to the last line's right edge at the first
   line's height — landing on top of the label text. Let it flow inline
   after the text instead; it can't collide at any width. */
.cfg_form_1.cfg_icon_1.contactformgenerator_wrapper .contactformgenerator_field_required {
	position: static;
	display: inline;
	margin-left: 3px;
}

.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;
	}

	/* The nav strip has no visible content while collapsed (the toggle
	   lives up in the header bar), so drop its hairlines and padding */
	.main-navigation {
		border: 0;
		padding: 0;
	}

	/* Opened menu: a popover anchored under the toggle. Like the toggle,
	   it positions against the document, which works because the header
	   bar is the first thing in <body> (the logged-in admin bar shifts it
	   ~46px, but visitors never see that). The elevation shadow is the one
	   place the flat aesthetic yields — a floating panel has to read as
	   floating. */
	.main-navigation ul.nav-menu {
		position: absolute;
		top: 60px; /* just under the 56px header bar */
		left: 16px;
		right: auto;
		min-width: 220px;
		z-index: 19;
		background: #ffffff;
		border: 1px solid #e5e5e5;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		margin: 0;
		padding: 4px 0;
		text-align: left;
	}

	.main-navigation ul.nav-menu li {
		display: block;
		margin: 0;
	}

	.main-navigation ul.nav-menu li a {
		display: block;
		padding: 12px 20px;
		font-size: 16px;
	}

	/* Popover follows the admin-bar offset, same as the toggle */
	body.admin-bar .main-navigation ul.nav-menu {
		top: 106px; /* 60px + 46px admin bar */
	}

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

	.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;
	}
}