/* ---------------------------------------------------------------------------
   site.css -- the "custom CSS" the original WordPress site carried inline in
   every page's <head> (the "Adjustments by PJ Brunet 2019" block and the
   layout fixes that followed it), plus the small amount of glue this replica
   needs: the vanilla mobile menu, the search panel behaviour, the contact
   form styling and the admin editor's own palette.
   --------------------------------------------------------------------------- */

/* --- Original site's inline custom CSS (verbatim, comments trimmed) ------- */

.container_16 {
	width: 96%;
}

#colophon .widget_nav_menu h3, #colophon .widget_custom_html h3 {
	margin: .75em 0;
}

aside#custom_html-3.widget_text.widget.widget_custom_html div.textwidget.custom-html-widget,
aside#custom_html-3.widget_text.widget.widget_custom_html div.textwidget.custom-html-widget * {
	white-space: nowrap;
	color: #FFFFd0;
	font-size: 15px !important;
	line-height: 28px;
	font-family: inherit;
}
aside#custom_html-3.widget_text.widget.widget_custom_html div.textwidget.custom-html-widget {
	padding: 0 0 2em .5em;
}

#tertiary { padding-bottom: 1.75em; }

@media (max-width: 944px) {
	#site-title img {
		width: 150px;
		padding: 0 0 0 5px;
	}
	.main-navigation { padding: 1px 0 0 0 !important; }
}

@media (min-width: 945px) {
	#site-title img {
		width: 185px;
		padding-top: 0;
	}
}

/* The old theme added .stickyTitle to the logo to shrink it while the header
   was stuck. The replica keeps the logo at full size, so the class is never
   applied; the rule is kept out of the way (site.js only toggles body.stuck). */

#secondary aside.widget { padding-right: 4%; }

.short-description div {
	font-size: 15px;
	padding: 0 .5em .5em 0;
	line-height: 23px;
	margin-bottom: .8em;
}

h3.entry-header { padding-bottom: 5px; }

ul.menu { font-size: 15px; }

.announce-body {
	background: url('../img/announce-body.jpg') left top no-repeat !important;
}

/* The right margin of the theme was busted, so the original sized #primary by
   script: main width - the sidebar's box - 1px, and only while the main column
   was wider than 768px. Same arithmetic in one media query. */
#primary, #secondary { float: left; }
#secondary {
	padding-left: 19px;
	margin-right: 0;
}
@media (min-width: 769px) {
	#primary { width: calc(100% - 23% - 19px - 1% - 1px); }
	#secondary { width: 23%; }
}

@media (min-width: 450px) {
	.third-home-widget-area .widget-causes-body .cause-item {
		width: 47% !important;
		padding-right: 1%;
	}
	div.widget-causes-body:nth-child(4) > article:nth-child(1) {
		clear: left;
	}
}

.cause-item figure a img {
	box-shadow: 2px 2px 3px 1px #DDD;
}

.readmore_but {
	padding: 6px 12px;
	text-decoration: none;
	text-transform: uppercase;
	border: 1px solid #663300 !important;
	color: #663300;
	border-radius: 3px;
	box-shadow: 2px 2px 5px 1px #DDD;
}
.readmore_but:hover {
	color: #fff !important;
	animation-name: fadeIn;
	animation-duration: .5s;
	background: #663300 !important;
	border: 1px solid #663300 !important;
}

figure img {
	border-radius: 5px;
	width: 100%;
	height: auto;
	display: block;
}

div.grid_16.third-home-widget-area aside.widget.WPlookpages div.widget-title { display: none; }

div.inview {
	background-image: url(../img/black-linen.png);
	background-position: unset !important;
}

#colophon {
	background: #663300;
	z-index: -1;
	padding-top: 25px;
	background: #663300 url("../img/parchment3.jpg");
}

div.inview {
	z-index: -1;
	background: #663300 url("../img/parchment3.jpg") !important;
}

.cause-item h3.entry-header, .short-description div:first-child { padding-left: .25em; }

#footer-widget-area { box-shadow: 0 -3px 7px #bbb; z-index: +1; }

div.long-description > ul > li {
	color: #663300;
	font-size: 15px;
}

@media (min-width: 650px) {
	.flexlist {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.flexlist li {
		white-space: nowrap;
		width: 45%;
	}
}

/* --- Glue for the replica ------------------------------------------------- */

/* The toolbar and the copyright strip are the black bars the original printed
   (the old theme set them from an inline style block). */
#toolbar, .site-info { background: #000000; }

/* Body copy is responsive text: the old site ran Flowtype.js on <body> with
   minimum 460, maximum 1024, fontRatio 35 and maxFont 18. That is exactly
   width/35px, clamped to [460/35px, 1024/35px] and then to maxFont, which in
   CSS is one clamp() on 2.8571vw (= 1/35 of the viewport). */
body {
	font-size: clamp(13.1429px, 2.8571vw, 18px);
}

/* The homepage cards are floated; give the wrapper the height they need so
   the announcement banner below them does not slide underneath. */
.third-home-widget-area aside.widget:after {
	content: "";
	display: block;
	clear: both;
}

/* The logo and the menu sit in one floated row, as in the original header. The
   empty .mob-nav div the theme left in the header is kept (65px) so the
   header's height is unchanged on wide screens. */
.mob-nav { display: none; }
@media (min-width: 945px) {
	/* Empty in the original too: it only cleared the floated logo and menu. */
	.mob-nav { display: block; height: 0; overflow: hidden; }
	.mob-nav-toggle, .mean-nav { display: none; }
}

/* The original pinned the header from jQuery (position:fixed when scrolled,
   which re-flowed the page). Sticky on the <header> does the same thing
   without the jump: it is the header that leaves the flow, not its content. */
#branding {
	position: sticky;
	top: 0;
	z-index: 99;
}
#sticky_navigation {
	position: static;
	padding: 18px 0;
	height: 95px;
	box-sizing: border-box;
}
#sticky_navigation .container_16 { position: relative; min-height: 50px; }
#sticky_navigation hgroup { margin: 0; }
#sticky_navigation .main-navigation { float: right; padding: 12px 0 0 0; margin: 0; }
#sticky_navigation .menu-main-menu-container { float: right; }
#site-description { display: none; }
#site-title { margin: 0; line-height: 0; }
#site-title img { display: block; }

/* The masthead while stuck (scrolled past the toolbar). It pins to the top and
   nothing resizes: the logo and the menu keep their exact size, so there is no
   movement at all -- the header simply stays where it is. (The old theme shrank
   the logo and tightened the padding from jQuery on every scroll step, which
   re-flowed the page ~35px: that was the "shake".) */
#site-title img,
#sticky_navigation .main-navigation {
	transform-origin: left top;
	transition: opacity .2s ease;
}

/* The theme's search icon is an <a href="#"> wrapping an <i>, exactly as it was;
   site.js only makes it behave like a button (it opens a panel, not a page). */
#toolbar .tb-list .search a.search-toggle {
	display: inline-block;
	border: 0;
	margin: 0;
	color: #fff;
	background: none;
	cursor: pointer;
	padding: 10px 0 0 0;
	width: 40px;
	height: 30px;
	font-size: 16px;
	line-height: normal;
	text-align: center;
	transition: all 1s ease;
}

#toolbar .tb-list .search:hover a.search-toggle,
#toolbar .tb-list .search a.search-toggle:focus { background: #e53b51; }

/* Open/closed state of the search panel. The theme reveals it on :hover; on a
   touch screen there is no hover, so the button toggles a class as well. */
#toolbar .tb-list .search.open .search-items {
	visibility: visible;
	opacity: 1;
	filter: alpha(opacity=100);
	transition: all .3s ease;
}

/* Focus ring: the theme removed outlines, which is bad for keyboard users. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 2px solid #663300;
	outline-offset: 2px;
}

/* Page-title band: the title and the breadcrumb sit on the parchment image,
   exactly as on the original pages. */
.item.teaser-page-list {
	background: #663300;
	background: #663300 url("../img/parchment3.jpg");
}

/* The homepage slideshow is one fixed image (the theme's FlexSlider had the
   same single slide), so the caption simply sits over it. Base sizes and the
   responsive caption positions come from flexslider.css; only the caption's
   own type scale is re-declared here, exactly as the original page's inline
   <style> did after the stylesheets. */
#teaser { position: relative; }
/* The theme kept the FlexSlider's fixed 300px min-height while it "loaded",
   which is what makes the band taller than the image on phones. */
#teaser .flexslider { margin: 0; background: #fff; position: relative; zoom: 1; }
#teaser .flexslider .slides img { width: 100%; display: block; }
/* <small> inside the headline simply inherits (browser default 83% size and
   the <strong>'s colour), exactly as on the original page. */
@media (min-width: 600px)  { .flex-content h2 { font-size: 23px; } }
@media (min-width: 800px)  { .flex-content h2 { font-size: 26px; } }
@media (min-width: 1000px) { .flex-content h2 { font-size: 32px; } }
@media (min-width: 1200px) { .flex-content h2 { font-size: 40px; } }
@media (min-width: 1400px) { .flex-content h2 { font-size: 50px; } }
/* The original overrode the theme's caption offset for phones. */
@media (max-width: 768px) { .flex-caption { top: 60px; } }
@media (max-width: 640px) { .flex-caption { top: 40px; } }
@media (max-width: 480px) { .flex-caption { top: 20px; } }

/* --- Vanilla mobile menu ------------------------------------------------- */

/* The theme used meanMenu (jQuery) and drew a full-width black bar across the
   header for it. That bar is a lot of black for a closed menu, and on the old
   site it actually lay over the banner headline. Here the closed state is just
   a black square button in the top-right corner of the header; the panel it
   opens is the larger menu. */
@media (max-width: 944px) {
	/* The hamburger sits on the logo's own row, top-right, so the closed header
	   is no taller than the logo (95px, exactly like the desktop header). The
	   header keeps that height when it pins to the top while scrolling, so
	   nothing below it can move (see the transform-only "stuck" rules above).
	   The panel is positioned against the header, not against this button row. */
	#sticky_navigation { height: 95px; }

	.mob-nav {
		display: block;
		position: static;
		height: 0;
	}

	.mob-nav-toggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 3px;
		background: #000000;
		cursor: pointer;
		z-index: 1000;
	}
	.mob-nav-bars,
	.mob-nav-bars::before,
	.mob-nav-bars::after {
		display: block;
		position: absolute;
		left: 11px;
		width: 18px;
		height: 2px;
		background: #fff;
		transition: transform .25s ease, opacity .25s ease, top .25s ease;
	}
	.mob-nav-bars { top: 19px; }
	.mob-nav-bars::before { content: ""; top: -5px; left: 0; }
	.mob-nav-bars::after  { content: ""; top: 5px;  left: 0; }
	.mob-nav.open .mob-nav-bars { background: transparent; }
	.mob-nav.open .mob-nav-bars::before { top: 0; transform: rotate(45deg); }
	.mob-nav.open .mob-nav-bars::after  { top: 0; transform: rotate(-45deg); }

	/* The panel: full width, opens downward over the page (absolute, so it
	   cannot push the content around). #mobile-menu is the wrapper the panel
	   slides open inside; the <ul> carries .mean-nav too but must stay
	   static, or it would position itself against the page instead. */
	#mobile-menu.mean-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 999;
		max-height: 0;
		overflow: hidden;
		transition: max-height .35s ease;
		background: #000000;
		box-shadow: 0 6px 12px rgba(0, 0, 0, .35);
	}
	.mob-nav.open #mobile-menu.mean-nav { max-height: 620px; overflow: auto; }
	#mobile-menu .mean-nav { position: static; max-height: none; overflow: visible; background: none; box-shadow: none; }
	.mean-nav ul { margin: 0; padding: 0; list-style: none; }
	.mean-nav li { background: none; padding: 0; margin: 0; }
	.mean-nav a {
		display: block;
		padding: .9em 5%;
		color: #fff;
		text-decoration: none;
		text-transform: uppercase;
		border-bottom: 1px solid rgba(255, 255, 255, .5);
		font-family: 'Archivo Narrow', sans-serif;
		font-size: 16px;
	}
	.mean-nav a:hover { background: rgba(255, 255, 255, .1); }
	.mean-nav a.sub-link {
		width: 80%;
		padding: .9em 10%;
		opacity: .75;
		border-bottom-color: rgba(255, 255, 255, .25);
		text-transform: none;
	}
	.mean-nav a.current-menu-item { background: #cb9661; }

	#sticky_navigation hgroup { float: none; width: 100%; text-align: center; }
	#sticky_navigation .main-navigation { display: none; }
}

/* The theme's .screen-reader-text is clipped to 1px, but it keeps its natural
   width, so on a phone the offscreen "Menu"/"Search" labels widened the
   document by 6px (a tiny horizontal scroll, same as the old site). Clip it
   properly instead: same hiding technique, no layout width. */
.screen-reader-text {
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	white-space: nowrap;
}

/* --- Contact form (replaces Contact Form 7) ------------------------------ */

/* The theme sized every form input from its size="40" attribute, which is wider
   than a phone. Cap them at the column width (the old site scrolled sideways
   here). */
.contact-form .srv-input { max-width: 100%; box-sizing: border-box; }
.contact-form label { display: block; }

.contact-form form.srv-form {
	margin: 10px 20px 80px 10px;
}
form.srv-form .srv-input,
form.srv-form textarea {
	box-sizing: content-box;
	background-color: white;
	color: black;
	border-radius: 5px;
	padding: 7px;
	font-size: 16px;
	font-weight: bold;
	border: 2px solid gray;
}
/* The theme sized the text fields with the markup's size="40"; the message box
   takes the width the theme gave textareas. */
form.srv-form textarea { width: 98%; }
form.srv-form textarea { min-height: 200px; }
/* The original button is the theme's default submit: grey with a 2px border
   and the same 15px/1.4 text as the inputs. */
form.srv-form input.srv-submit {
	box-sizing: content-box;
	font-family: 'Arimo', sans-serif;
	font-size: 16px;
	font-weight: bold;
	padding: 7px;
	border: 2px solid gray;
	border-radius: 5px;
	background: white;
	color: black;
	cursor: pointer;
}
form.srv-form input.srv-submit:hover { background: #f3f3f3; }
form.srv-form input.srv-submit[disabled] { opacity: .6; cursor: default; }
.srv-notice {
	border: 2px solid #46b450;
	border-radius: 5px;
	padding: .5em 1em;
	margin: 0 0 1.2em 0;
	font-size: 15px;
	background: #f4fbf4;
}
.srv-notice.srv-err { border-color: #dc3232; background: #fdf4f4; }

/* --- Search results ------------------------------------------------------ */

.search-results li {
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: .8em;
	color: #3b3b3d;
}
.search-results mark { background: #f6e7a8; color: #3b3b3d; }

/* --- Admin editor -------------------------------------------------------- */

.admin-page {
	margin: 0;
	background: #f5f5dd;
	color: #3b3b3d;
	font-family: 'Arimo', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.admin-page > .admin-footer { margin-top: auto; }
.admin-page a { color: #663300; }
.admin-page a:hover { color: #000; }

.admin-masthead {
	background: #000000 url("../img/black-linen.png");
	color: #ffffd0;
}
.admin-masthead-i {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5em 1.5em;
	max-width: 1184px;
	margin: 0 auto;
	padding: 1em 2%;
}
.admin-masthead h1 {
	margin: 0;
	font-family: 'Archivo Narrow', sans-serif;
	font-size: 22px;
	font-weight: normal;
	color: #fff;
}
.admin-site-title { color: #e0ddb1; }
.admin-nav { display: flex; gap: 1.2em; align-items: baseline; }
.admin-nav a { color: #ffffd0; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 208, .4); }
.admin-nav a:hover { color: #fff; border-bottom-color: #fff; }
.admin-who { color: #a2a2ad; font-size: 13px; }

.admin-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .25em;
	max-width: 1184px;
	margin: 0 auto;
	padding: 1.2em 2% 0;
}
.admin-tabs a {
	display: block;
	padding: .55em 1.1em;
	text-decoration: none;
	border: 1px solid #dedec5;
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
	background: #efefd8;
	color: #3b3b3d;
	font-family: 'Archivo Narrow', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
}
.admin-tabs a:hover { background: #cb9661; color: #fff; }
.admin-tabs a.active { background: #663300; border-color: #663300; color: #fff; }

.admin-main {
	max-width: 1184px;
	margin: 0 auto;
	padding: 0 2% 3em;
	width: 100%;
	box-sizing: border-box;
}
.admin-card {
	background: #fff;
	border: 3px solid #dedec5;
	border-radius: 0 5px 5px 5px;
	padding: 1.5em 2% 1.8em;
}
.admin-card h2 {
	margin: 0 0 .2em;
	font-family: 'Archivo Narrow', sans-serif;
	font-size: 26px;
	color: #010101;
}
.admin-subtitle { margin: 0 0 1.5em; color: #6d6d63; font-size: 13px; }
.admin-subtitle code { background: #efefd8; padding: .1em .4em; border-radius: 3px; }

.admin-field { margin-bottom: 1.3em; }
.admin-field label {
	display: block;
	margin-bottom: .3em;
	font-family: 'Archivo Narrow', sans-serif;
	font-size: 17px;
	color: #3b3b3d;
}
.admin-key {
	margin-left: .6em;
	font-family: monospace;
	font-size: 11px;
	color: #a2a2ad;
}
.admin-field input[type=text],
.admin-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: .6em;
	border: 2px solid #d5d5ba;
	border-radius: 5px;
	background: #fdfdf5;
	color: #000;
	font-family: 'Arimo', sans-serif;
	font-size: 14px;
	line-height: 1.5;
}
.admin-field textarea { min-height: 7em; resize: vertical; font-family: monospace; font-size: 13px; }
.admin-field input[type=text]:focus,
.admin-field textarea:focus { border-color: #663300; background: #fff; outline: 0; }

.admin-actions { display: flex; align-items: center; gap: 1em; }
.admin-save {
	padding: .6em 1.8em;
	border: 2px solid #663300;
	border-radius: 5px;
	background: #663300;
	color: #fff;
	font-family: 'Archivo Narrow', sans-serif;
	font-size: 17px;
	text-transform: uppercase;
	cursor: pointer;
}
.admin-save:hover { background: #844200; }
.admin-saved { color: #2eb44b; font-weight: bold; }

.admin-main-login { padding-top: 2.5em; }
.admin-card-login { max-width: 460px; margin: 0 auto; padding: 2em 2.5em; }
.admin-form label { display: block; margin-bottom: .4em; font-family: 'Archivo Narrow', sans-serif; font-size: 17px; }
.admin-form input[type=password] {
	width: 100%;
	box-sizing: border-box;
	padding: .6em;
	border: 2px solid #d5d5ba;
	border-radius: 5px;
	font-size: 15px;
	margin-bottom: 1em;
}
.admin-form input[type=submit] {
	padding: .6em 1.8em;
	border: 2px solid #663300;
	border-radius: 5px;
	background: #663300;
	color: #fff;
	font-family: 'Archivo Narrow', sans-serif;
	font-size: 17px;
	text-transform: uppercase;
	cursor: pointer;
}
.admin-form input[type=submit]:hover { background: #844200; }
.admin-form .error {
	margin: 1em 0 0;
	padding: .5em .8em;
	border: 2px solid #dc3232;
	border-radius: 5px;
	color: #a02020;
	background: #fdf4f4;
	font-size: 14px;
}

.admin-footer {
	background: #663300 url("../img/parchment3.jpg");
	color: #ffffd0;
}
.admin-footer p {
	max-width: 1184px;
	margin: 0 auto;
	padding: 1.2em 2%;
	font-size: 13px;
}

/* --- Small-screen fixes ------------------------------------------------- */

@media (max-width: 768px) {
	#toolbar { min-height: 40px; }
	/* The sidebar menu is redundant on phones: hide it (as the original did)
	   and let the article use the full width. */
	#nav_menu-5 { display: none; }
	#primary { width: calc(100% - 1px); }

	.admin-tabs { padding-top: .8em; }
	.admin-tabs a { font-size: 14px; padding: .45em .8em; }
}