/*
Theme Name: ITCILO Compendium
Description: Classic theme reproducing the look of the original Plone site compendium.itcilo.org (blue header, language bar, left navigation). Works with the "ITCILO Compendium of Court Decisions" plugin and Polylang.
Author: ITCILO
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: compendium
*/

:root {
	--c-navy: #001689;
	--c-blue: #3e49a4;
	--c-blue-light: #7584be;
	--c-crumb: #a3add7;
	--c-link: #4c81f1;
	--c-link-hover: #001689;
	--c-text: #333;
	--c-heading: #001689;
	--sidebar-w: 256px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	color: var(--c-text);
	background: #fff url(assets/background_lines.png) repeat-x 0 130px;
}
a { color: var(--c-link); text-decoration: none; }
a:hover, a:focus { color: var(--c-link-hover); text-decoration: underline; }
img { max-width: 100%; height: auto; }
p { margin: 0 0 1em; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 6px; left: 6px; z-index: 1000; width: auto; height: auto; clip: auto; background: #fff; color: var(--c-navy); padding: 8px 12px; }

/* ---------------------------------------------------------------- header */
.site-header { background: var(--c-navy); color: #fff; position: relative; }
.site-header .inner { display: flex; align-items: center; min-height: 85px; padding: 0 20px; gap: 24px; }
.site-logo { flex: 0 0 auto; display: block; line-height: 0; }
.site-logo img { width: 310px; height: auto; }
.site-header .course {
	margin-left: auto; margin-right: auto;
	border-left: 1px solid rgba(255,255,255,.7);
	padding-left: 14px; color: #fff; font-size: 15px;
}
.site-header .course:hover { text-decoration: underline; color: #fff; }
.site-header .login {
	position: absolute; top: 0; right: 8px;
	background: var(--c-blue); color: #fff; font-size: 13px;
	padding: 1px 10px 2px; border-radius: 0 0 4px 4px;
}
.menu-toggle { display: none; margin-left: auto; background: transparent; border: 1px solid rgba(255,255,255,.6); color: #fff; border-radius: 3px; padding: 6px 10px; font: inherit; cursor: pointer; }

.subbar { background: var(--c-blue); min-height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 6px; }
.breadcrumbs { color: var(--c-crumb); font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.breadcrumbs a { color: #fff; }
.breadcrumbs .sep { margin: 0 4px; opacity: .6; }
.lang-switch { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.lang-switch a, .lang-switch span { display: block; background: rgba(255,255,255,.12); color: #fff; font-size: 13px; padding: 4px 6px; min-width: 24px; text-align: center; }
.lang-switch .current-lang a, .lang-switch a:hover { background: rgba(255,255,255,.3); text-decoration: none; }
.lang-switch .no-translation a { opacity: .6; }

/* ---------------------------------------------------------------- layout */
.site-body { display: flex; align-items: flex-start; padding-top: 5px; }
.site-sidebar { flex: 0 0 var(--sidebar-w); width: var(--sidebar-w); }
.site-main { flex: 1 1 auto; min-width: 0; padding: 20px 28px 40px; }

.side-nav { background: var(--c-navy); padding: 18px 13px 10px; }
.side-nav ul { list-style: none; margin: 0; padding: 0; }
.side-nav li { border-bottom: 1px solid var(--c-blue); }
.side-nav a { display: block; color: #fff; padding: 8px 2px; font-size: 14.5px; }
.side-nav a:hover, .side-nav .current-menu-item > a, .side-nav .current_page_item > a { font-weight: 700; text-decoration: none; }
.side-see-also { background: #fff; border: 10px solid var(--c-blue-light); padding: 12px 3px; }
.side-see-also h2 { display: none; }
.side-see-also a { font-weight: 700; font-size: 15px; }

/* ---------------------------------------------------------------- content */
.entry-title { color: var(--c-heading); font-weight: 400; font-size: 30px; line-height: 1.2; margin: 6px 0 12px; }
.single-decision .entry-title { font-size: 19.5px; margin-bottom: 10px; }
.entry-description { font-weight: 700; color: #555; }
.entry-content h2 { color: var(--c-heading); font-weight: 400; }
.entry-content table { border-collapse: collapse; }
.entry-actions { border-top: 1px solid var(--c-blue-light); margin-top: 1.5em; padding: 8px 16px; text-align: right; }
.entry-actions button { background: none; border: 0; color: var(--c-link); font: inherit; cursor: pointer; }

/* Contact Form 7 */
.wpcf7 label { display: block; font-weight: 700; margin-bottom: .2em; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 textarea { width: 100%; max-width: 520px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 3px; font: inherit; }
.wpcf7 input[type=submit] { background: var(--c-blue); color: #fff; border: 0; border-radius: 3px; padding: 8px 18px; font: inherit; cursor: pointer; }

/* ---------------------------------------------------------------- footer */
.site-footer .band { background: var(--c-blue-light); min-height: 35px; }
.site-footer .bottom { background: var(--c-blue); padding: 14px 12px; }
.site-footer .bottom a { color: #fff; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 860px) {
	body { background-position: 0 175px; }
	.site-header .inner { flex-wrap: wrap; padding: 10px 16px; min-height: 70px; }
	.site-logo img { width: 230px; }
	.site-header .course { order: 3; flex-basis: 100%; margin: 4px 0 0; border: 0; padding: 0; font-size: 13px; opacity: .9; }
	.menu-toggle { display: block; }
	.site-body { flex-direction: column; }
	.site-sidebar { width: 100%; flex-basis: auto; display: none; }
	.site-sidebar.open { display: block; }
	.site-main { padding: 16px; }
	.entry-title { font-size: 24px; }
	.compendium-filter select, .compendium-filter input[type=text] { min-width: 0; width: 100%; }
}

@media print {
	.site-header .course, .site-header .login, .subbar, .site-sidebar, .site-footer, .entry-actions, .menu-toggle { display: none !important; }
	body { background: none; }
	.site-main { padding: 0; }
}