/*
 * WordPress Look - compatibility styles.
 * Loaded after Piwigo's own CSS. Recolours Piwigo's (Modus) bars and panels in
 * the WordPress theme's palette, whichever Modus skin is selected, and undoes
 * the side effects of the WordPress theme's CSS reset.
 *
 * Palette (from the Iconic One child theme):
 *   page #e9e9e9, content #fff, menu bar #f3f3f3, accent #16a1e7,
 *   text #444, links #007dc8, footer #f2f2f2
 *
 * For your own tweaks, create local/css/wp-look-local.css in Piwigo; the plugin
 * loads it after this file, and it survives plugin updates.
 */

/* ---- Page frame -------------------------------------------------------- */

body.wplook {
	color: #444;
}
body.wplook #wplook-content {
	padding: 0 0 24px;
	line-height: 1.4;
}
body.wplook #wplook-content a {
	color: #007dc8;
}

/* ---- Piwigo's own menu bar (Albums, Explore, search, Login) ------------- */

body.wplook #menubar {
	background: #fff !important;
	color: #444 !important;
	border-bottom: 1px solid #e9e9e9;
	padding: 6px 0;
}
body.wplook #menubar DT,
body.wplook #menubar DT A,
body.wplook #menubar A {
	color: #444 !important;
	font-size: 13px;
	font-weight: 700;
	text-shadow: none;
}
body.wplook #menubar DT A:hover,
body.wplook #menubar A:hover {
	color: #16a1e7 !important;
}
body.wplook #menubar DD {
	background: #fff !important;
	color: #444 !important;
	border: 1px solid #e9e9e9;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
body.wplook #menubar DD A {
	color: #007dc8 !important;
	font-weight: 400;
}
body.wplook #menubar UL {
	list-style: none;
}
body.wplook #menubar LI {
	margin: 2px 0;
}

/* ---- Form fields: the theme's reset strips them, Modus darkens them ----- */

body.wplook #wplook-content INPUT[type="text"],
body.wplook #wplook-content INPUT[type="password"],
body.wplook #wplook-content INPUT[type="email"],
body.wplook #wplook-content INPUT[type="search"],
body.wplook #wplook-content SELECT,
body.wplook #wplook-content TEXTAREA {
	background: #fff !important;
	color: #444 !important;
	border: 1px solid #ccc !important;
	border-radius: 3px;
	padding: 4px 6px;
}
body.wplook #wplook-content INPUT[type="submit"],
body.wplook #wplook-content BUTTON {
	background: #16a1e7 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 3px;
	padding: 6px 14px;
	cursor: pointer;
}

/* The WordPress mobile menu (<select> built by the theme's selectnav.js) */
body.wplook select.selectnav {
	background: #fff !important;
	color: #444 !important;
	border: 1px solid #ccc !important;
	border-radius: 3px;
	box-shadow: none;
}

/* ---- Page titles and breadcrumbs ---------------------------------------- */

body.wplook .titrePage,
body.wplook #imageHeaderBar {
	background: #fff !important;
	color: #444 !important;
	text-shadow: none !important;
	border-bottom: 2px double #f3f3f3;
}
body.wplook .titrePage A,
body.wplook #imageHeaderBar A,
body.wplook .browsePath A {
	color: #007dc8 !important;
}
body.wplook .titrePage H2,
body.wplook #imageHeaderBar H2 {
	color: #444 !important;
}

/* Toolbar icons (slideshow, download, previous/next ...) */
body.wplook .pwg-button,
body.wplook .pwg-icon,
body.wplook #imageToolBar A,
body.wplook .categoryActions A {
	color: #555 !important;
}
body.wplook .pwg-button:hover .pwg-icon,
body.wplook #imageToolBar A:hover,
body.wplook .categoryActions A:hover {
	color: #16a1e7 !important;
}

/* ---- Photo page --------------------------------------------------------- */

/* Never wider than the screen (Piwigo sets a fixed width on the photo) */
body.wplook #theMainImage {
	max-width: 100%;
	height: auto !important;
}
body.wplook #theImage,
body.wplook #theImageAndInfos {
	max-width: 100%;
}

/* Information panel next to / under the photo */
body.wplook #imageInfos,
body.wplook #imageInfos DL,
body.wplook #infoSwitcher {
	background: #f3f3f3 !important;
	color: #444 !important;
	text-shadow: none !important;
}
body.wplook #imageInfos DT {
	font-weight: 700;
	color: #444 !important;
}
body.wplook #imageInfos A {
	color: #007dc8 !important;
}
body.wplook .navThumbs .navThumb,
body.wplook .navThumbs A,
body.wplook #imageInfos .navThumb SPAN {
	color: #444 !important;
	border-color: #ccc !important;
}

/* Comments */
body.wplook #comments,
body.wplook .commentElement,
body.wplook #commentAdd {
	background: #fafafa !important;
	color: #444 !important;
}

/* ---- Restore what the theme's CSS reset removed ------------------------- */

body.wplook #wplook-content H2,
body.wplook #wplook-content H3 {
	font-weight: 700;
}
body.wplook #wplook-content P {
	margin: 0 0 0.8em;
}
body.wplook .content_description,
body.wplook .additional_info {
	line-height: 1.6;
	padding: 0 12px;
}

/* ---- Piwigo credits below the WordPress footer -------------------------- */

body.wplook #copyright {
	background: transparent !important;
	color: #999 !important;
	border: 0 !important;
	font-size: 11px;
	padding: 8px 0 16px;
}
body.wplook #copyright A {
	color: #999 !important;
}

/* ---- Fixes found in testing --------------------------------------------- */

/* Modus makes the photo page's <body> a screen-high flex column; let the
   WordPress page frame keep its full height so the footer isn't cut off */
body.wplook {
	height: auto !important;
	min-height: 100vh;
}
body.wplook > #page {
	flex: 0 0 auto;
}

/* Light-on-dark text inside the information panel */
body.wplook #imageInfos DD,
body.wplook #imageInfos UL,
body.wplook #imageInfos LI,
body.wplook #imageInfos .thumbHover {
	color: #444 !important;
}
body.wplook #imageInfos .navThumb {
	border: 1px solid #ccc !important;
}

/* Space before the first item of Piwigo's menu bar */
body.wplook #menubar {
	padding-left: 12px;
	padding-right: 12px;
	box-sizing: border-box;
}
body.wplook select.selectnav {
	width: calc(100% - 16px) !important;
	max-width: none !important;
	margin: 0 8px;
	padding: 8px 6px;
}

/* Piwigo's login/register pages style all links and fonts; keep the
   WordPress header and footer as they are on the main site */
body.wplook #masthead A,
body.wplook #colophon A {
	text-decoration: none;
}
body.wplook #masthead,
body.wplook #masthead *,
body.wplook #colophon,
body.wplook #colophon * {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
}