/*
Theme Name: Gérard Foucher
Description: Recreates the look of the site's former Canvas 5.1.1 setup (Canvas itself was infected and is discontinued). Sidebar IDs, menu locations and page template names match Canvas, so existing widgets, menus and pages keep working.
Version: 1.0.0
Requires PHP: 8.1
Text Domain: gerardfoucher
License: GPL-2.0-or-later
*/

@font-face {
	font-family: "Lobster";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/lobster-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Lobster";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/lobster-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--text: #1c2a47;
	--muted: #555;
	--link: #3b5998;
	--plum: #571557;
	--lavender: #f2e9f2;
	--lavender-hover: #f2dcf2;
	--lavender-current: #f2c2f2;
	--pink-line: #d422d4;
	--rule: #e6e6e6;
	--box: #b5b5b5;
	--font: Verdana, Geneva, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: #fff url("../../uploads/2012/12/theatre_masques4.jpg") repeat top left;
	border-top: 1px solid #4f134f;
	font: normal 12px/1.5em var(--font);
	color: var(--muted);
}
a:link, a:visited { color: var(--link); text-decoration: none; }
a:hover { color: var(--link); text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-family: var(--font); font-weight: bold; line-height: 1.2em; color: #222; }
h1 { font-size: 22px; } h2 { font-size: 20px; } h3 { font-size: 18px; }
h4 { font-size: 16px; } h5 { font-size: 14px; } h6 { font-size: 12px; }
p { margin: 0 0 1.2em; }
img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--pink-line); margin: 2em 0; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap;
}
.skip-link:focus { position: fixed !important; top: 5px; left: 5px; z-index: 1000; width: auto; height: auto; clip-path: none; padding: 8px 12px; background: #fff; }
.col-full { max-width: 1000px; margin: 0 auto; }

/* ---------- Top bar ---------- */
#top { background: var(--lavender); }
#top .col-full { display: flex; justify-content: flex-end; padding: 0 30px; }
#top ul.nav { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
#top ul.nav li { position: relative; }
#top ul.nav li a { display: block; padding: .5em 1em; font: normal 14px/1.6em var(--font); color: var(--text); }
#top ul.nav li a:hover, #top ul.nav li.current-menu-item > a { background: var(--lavender-hover); color: #1f1f1f; text-decoration: none; }

/* ---------- Page box ---------- */
#wrapper {
	max-width: 1062px;
	margin: 20px auto;
	padding: 10px 30px 20px;
	background: #fff;
	border: 1px solid #dbdbdb;
	border-radius: 5px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}

/* ---------- Header: photo collage, then the logo ---------- */
#header {
	margin-top: 5px;
	padding: 260px 0 10px;
	background: #fff url("../../uploads/2012/12/1_2Header.jpg") no-repeat top center;
	border: 1px solid #260a26;
}
#logo { padding-left: 10px; }
#logo img { display: block; max-width: 100%; height: auto; }

/* ---------- Main menu ---------- */
#navigation {
	position: relative;
	z-index: 10;
	margin-bottom: 3em;
	background: var(--lavender);
	border: 1px solid var(--box);
}
#navigation ul { margin: 0; padding: 0; list-style: none; }
#main-nav { display: flex; flex-wrap: wrap; }
#main-nav li { position: relative; }
#main-nav a {
	display: block;
	padding: 1em 1em;
	font: normal 15px/1em "Lobster", arial, sans-serif;
	color: #665666;
}
#main-nav > li:hover > a, #main-nav > li:focus-within > a, #main-nav a:hover { background: var(--lavender-hover); color: var(--plum); text-decoration: none; }
#main-nav > li.current-menu-item > a,
#main-nav > li.current_page_item > a,
#main-nav > li.current-menu-ancestor > a,
#main-nav > li.current_page_parent > a { background: var(--lavender-current); color: var(--plum); }
#main-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--lavender-hover);
	border: 1px solid #dbdbdb;
}
#main-nav li:hover > .sub-menu, #main-nav li:focus-within > .sub-menu { display: block; }
#main-nav .sub-menu .sub-menu { top: 0; left: 100%; }
#main-nav .sub-menu a { padding: .7em 1em; font-size: 14px; color: var(--plum); }
#main-nav .sub-menu a:hover { background: var(--lavender-current); }

/* ---------- Content and sidebar ---------- */
#main-sidebar-container { display: flex; justify-content: space-between; gap: 5%; padding-bottom: 40px; }
#main { flex: 0 1 70%; min-width: 0; }
#sidebar { flex: 0 0 25%; min-width: 0; }

.post, .page { margin: 0 0 40px; }
.title, .title a:link, .title a:visited { font: normal 22px/1.1em var(--font); color: var(--text); margin: 0 0 .5em; }
.single .post > .title { padding-bottom: .4em; border-bottom: 1px solid var(--rule); }
.post-meta { margin: 0 0 1.8em; font: normal 14px/1.5em var(--font); color: var(--text); }
.post-meta a:link, .post-meta a:visited { font-weight: bold; color: #888; }
.post-meta a:hover { color: red; text-decoration: underline; }
.post-meta abbr { border: 0; text-decoration: none; }

.entry, .entry p { font: normal 14px/1.5em var(--font); color: var(--text); }
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 { margin: 0 0 .5em; line-height: 1.5em; }
.entry h1 { border-bottom: 1px solid var(--pink-line); }
.entry ul, .entry ol { margin: 0 0 1.2em 1.5em; padding: 0; }
.entry blockquote { position: relative; margin: 0 0 1.2em; padding: 10px 20px 10px 50px; color: #444; }
.entry blockquote::before { content: "\201C"; position: absolute; top: .1em; left: 0; font: 7em/1 Georgia, serif; color: #999; }
.entry blockquote p { font-style: italic; }
.entry img, img.thumbnail { height: auto; padding: 3px; border: 1px solid var(--pink-line); background: rgba(255, 255, 255, .7); }
.entry img.emoji, .entry img.wp-smiley { padding: 0; border: 0; background: none; }
.entry .alignleft, img.alignleft { float: left; margin: 0 1.2em 1em 0; }
.entry .alignright, img.alignright { float: right; margin: 0 0 1em 1.2em; }
.entry .aligncenter, img.aligncenter { display: block; margin: 0 auto 1em; }
.entry .wp-caption { max-width: 100%; padding: 4px; border: 1px solid var(--pink-line); text-align: center; }
.entry .wp-caption-text { margin: .4em 0 0; font-size: 11px; }
.entry iframe, .entry video, .entry embed { max-width: 100%; }
.entry::after, .post::after { content: ""; display: table; clear: both; }

.post-more { clear: both; padding: .2em 0; font: normal 12px/1.5em var(--font); color: var(--text); }
.post-more .sep { padding: 0 .5em; }

.archive_header { margin: 0 0 30px; padding: 0 0 10px; border-bottom: 1px solid var(--rule); }
.archive_header h1 { margin: 0; font: bold 18px/1em var(--font); color: #222; }

.post-entries { display: flex; justify-content: space-between; gap: 1em; margin: 0 0 30px; font: 300 11px/1.4 var(--font); }
.post-entries a:link, .post-entries a:visited { color: #888; }
.post-entries .nav-prev a::before { content: "\2039\00a0"; }
.post-entries .nav-next a::after { content: "\00a0\203A"; }

.nav-entries { display: flex; justify-content: space-between; clear: both; margin: 0 0 30px; font: 300 13px/1em var(--font); }
.nav-entries a:link, .nav-entries a:visited { display: inline-block; padding: 5px 10px; color: #666; border: 1px solid #d9d9d9; border-radius: 3px; background: linear-gradient(#fff, #f5f5f5); }

/* ---------- Sidebar widgets ---------- */
.widget {
	margin: 0 0 30px;
	padding: 15px;
	font: normal 10px/1.5em var(--font);
	color: var(--text);
	background: #fff;
	border: 1px solid var(--box);
	border-radius: 2px;
	overflow-wrap: anywhere;
}
.widget h3 { margin: 0 0 .8em; padding: 0 0 .8em; font: normal 12px/1.2em var(--font); color: var(--text); }
.widget p, .widget .textwidget { font: normal 10px/1.5em var(--font); color: var(--text); margin: 0; }
.widget ul { margin: 0; padding: 0 0 0 1.2em; }
.widget ul li a { line-height: 22px; }
.widget_woo_twitter h3 { display: flex; align-items: center; gap: 6px; }
.widget_woo_twitter .back { padding: 12px 20px; background: #f2f2f2; border-radius: 6px; }
.widget_woo_twitter .back p { padding-top: 10px; border-top: 1px solid #ddd; }
.widget audio { width: 100%; margin-top: 6px; }

.searchform { position: relative; margin-top: 5px; border: 1px solid; border-color: #ccc #efefef #efefef #ccc; border-radius: 3px; }
.searchform input.s { width: 100%; padding: 8px 34px 8px 8px; margin: 0; border: 0; background: none; font: 12px var(--font); color: #777; }
.searchform input.s:focus { outline: 2px solid var(--lavender-current); }
.searchform button { position: absolute; top: 0; right: 0; height: 100%; width: 32px; padding: 0; border: 0; background: none; cursor: pointer; color: #333; }
.searchform button svg { width: 16px; height: 16px; vertical-align: middle; }

/* ---------- Comments ---------- */
#comments { position: relative; margin: 40px 0 0; padding: 40px 0 0; border-top: 1px solid var(--pink-line); }
#comments h3, #respond h3 { font: normal 16px/1.3 var(--font); color: #333; margin-bottom: 20px; }
#comments ol.commentlist, #comments ol.children { margin: 0; padding: 0; list-style: none; }
#comments li.comment { margin-top: 10px; }
#comments .comment-body { padding: 20px; }
#comments li.comment.even > .comment-body, #comments li.comment.thread-even > .comment-body { background: rgba(0, 0, 0, .02); border-bottom: 1px solid var(--pink-line); }
#comments ol.children { margin: 10px 10px 0 25px; }
#comments ol.children li { border-top: 1px solid var(--pink-line); }
#comments .comment-author .avatar { float: left; margin: 0 15px 10px 0; border-radius: 100px; }
#comments .comment-author .fn { font-weight: bold; font-size: 15px; font-style: normal; }
#comments .comment-author .says { display: none; }
#comments .comment-metadata { font-size: 11px; }
#comments .comment-metadata a { color: #888; }
#comments .comment-content { clear: both; font: normal 13px/1.5 var(--font); color: var(--text); }
#comments .reply a, #respond input[type="submit"], .contact-form button {
	display: inline-block; padding: 6px 14px; border: 0; border-radius: 3px;
	background: #3d0b3d; color: #fff; font: 12px var(--font); cursor: pointer;
}
#comments .reply a:hover, #respond input[type="submit"]:hover, .contact-form button:hover { background: #852285; text-decoration: none; }
#respond { margin: 40px 0 0; }
#respond label { display: block; font-size: 11px; color: #777; }
#respond input[type="text"], #respond input[type="email"], #respond input[type="url"], #respond textarea { width: 100%; max-width: 100%; padding: 6px; border: 1px solid #ccc; font: 13px var(--font); }

/* ---------- Contact form ---------- */
.contact-form ol { margin: 0; padding: 0; list-style: none; }
.contact-form li { margin: 0 0 15px; }
.contact-form label { display: block; margin-bottom: 4px; font-size: 12px; color: #555; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; padding: 6px; border: 1px solid #ccc; font: 13px var(--font); }
.contact-form .hp { position: absolute; left: -9999px; }
.contact-notice { margin: 0 0 20px; padding: 10px 14px; border: 1px solid; border-radius: 3px; font-size: 13px; }
.contact-notice.ok { background: #eef8ee; border-color: #7bbf7b; color: #245c24; }
.contact-notice.error { background: #fbeeee; border-color: #d08080; color: #7a1f1f; }

/* ---------- Footer ---------- */
#footer-widgets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 10px 0; border-top: 1px solid var(--pink-line); }
#footer-widgets .block { padding-top: 20px; min-width: 0; }
#footer-widgets .widget { border: 0; padding: 0; background: none; }
#footer { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0 0; font: 300 10px/1em var(--font); color: #999; }
#footer p { margin: 0; font: 300 10px/1em var(--font); color: #999; }

/* ---------- Small screens ---------- */
@media (max-width: 1100px) {
	#wrapper { margin: 10px; padding: 10px 15px 20px; }
	#header { padding-top: 26%; background-size: 100% auto; }
	#top .col-full { padding: 0 15px; }
}
@media (max-width: 768px) {
	#main-sidebar-container { flex-direction: column; }
	#main, #sidebar { flex-basis: auto; }
	#footer-widgets { grid-template-columns: 1fr 1fr; }
	#main-nav a { padding: .8em .7em; }
	#main-nav .sub-menu { position: static; display: block; min-width: 0; border: 0; background: none; padding-left: 1em; }
}