/*
Theme Name: Zuidoost Kliniek Archive
Theme URI: https://zuidoostkliniek.nl/
Author: Zuidoost Kliniek
Description: A faithful WordPress recreation of the historic Zuidoost Kliniek website (polikliniek gynaecologie, Amsterdam), rebuilt from the 2014-2016 archive.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: zuidoostkliniek
*/

:root {
	--zo-panel: #dfe6ea;
	--zo-panel-alt: #e9eef1;
	--zo-label: #4a6b83;
	--zo-nav: #cfdde6;
	--zo-blue: #2f4d66;
	--zo-blue-link: #2f6f9f;
	--zo-green: #8cc63f;
	--zo-green-dark: #6faf2f;
	--zo-lime: #a9d465;
	--zo-grey: #b0b0b0;
	--zo-text: #333;
	--zo-border: #c6d3da;
	--zo-max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: #f4f6f7;
	color: var(--zo-text);
	font: 15px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }
a { color: var(--zo-blue-link); }
a:hover { text-decoration: none; }

.zo-wrap { max-width: var(--zo-max); margin: 0 auto; padding: 0 16px; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.zo-skip:focus {
	position: static; width: auto; height: auto; clip: auto;
	display: block; padding: 10px; background: #fff;
}

/* ---------- header ---------- */
.zo-header { background: #fff; border-bottom: 1px solid var(--zo-border); }
.zo-header-inner {
	display: flex; align-items: center; gap: 20px;
	flex-wrap: wrap; padding: 14px 16px;
	max-width: var(--zo-max); margin: 0 auto;
}
.zo-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--zo-text); }
.zo-logo img { width: 116px; height: auto; }
.zo-logo-text {
	font-weight: 700; font-size: 21px; line-height: 1.1;
	letter-spacing: .02em; color: #23384a;
}
.zo-phone {
	flex: 1 1 240px; text-align: center; margin: 0;
	font-family: Georgia, "Times New Roman", serif; font-style: italic;
	font-size: 27px; color: #23384a; white-space: nowrap;
}
.zo-phone a { color: inherit; text-decoration: none; }
.zo-header-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.zo-btn-verwijzers {
	display: inline-block; background: var(--zo-green); color: #fff;
	text-decoration: none; font-size: 13px; font-weight: 700;
	padding: 7px 22px; letter-spacing: .04em;
}
.zo-btn-verwijzers:hover { background: var(--zo-green-dark); }
.zo-search { display: flex; }
.zo-search input[type="search"] {
	border: 1px solid var(--zo-border); border-right: 0;
	padding: 5px 8px; font-size: 13px; width: 170px;
}
.zo-search button {
	border: 1px solid var(--zo-border); background: #fff;
	cursor: pointer; padding: 5px 10px; font-size: 14px;
}

/* ---------- navigation ---------- */
.zo-nav { background: var(--zo-nav); }
.zo-nav-inner { max-width: var(--zo-max); margin: 0 auto; padding: 0 16px; }
.zo-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.zo-nav li { position: relative; }
.zo-nav a {
	display: block; padding: 13px 17px; text-decoration: none;
	color: #23384a; font-size: 14px;
}
.zo-nav a:hover { background: rgba(255, 255, 255, .55); }
.zo-nav .current-menu-item > a,
.zo-nav .current_page_item > a,
.zo-nav .current-menu-ancestor > a,
.zo-nav .current_page_ancestor > a { background: #fff; font-weight: 700; }
.zo-nav ul ul {
	display: none; position: absolute; left: 0; top: 100%; z-index: 40;
	min-width: 250px; background: #fff; border: 1px solid var(--zo-border);
	flex-direction: column; box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.zo-nav li:hover > ul, .zo-nav li:focus-within > ul { display: flex; }
.zo-nav ul ul a { padding: 9px 14px; font-size: 13.5px; }
.zo-nav-toggle {
	display: none; width: 100%; background: none; border: 0;
	padding: 12px 0; font-size: 15px; font-weight: 700; color: #23384a;
	cursor: pointer; text-align: left;
}

/* ---------- layout ---------- */
.zo-main { padding: 22px 0 40px; }
.zo-cols { display: flex; gap: 18px; align-items: flex-start; }
.zo-content { flex: 1 1 auto; min-width: 0; }
.zo-sidebar { flex: 0 0 268px; }

.zo-panel {
	background: var(--zo-panel); padding: 18px 22px 22px; margin-bottom: 18px;
}
.zo-label {
	display: inline-block; background: var(--zo-label); color: #fff;
	font-size: 14px; font-weight: 700; padding: 5px 14px;
	margin: -18px 0 16px -22px;
}
.zo-breadcrumb { font-size: 12.5px; color: #6b7c88; margin: 0 0 12px; }
.zo-breadcrumb a { color: #6b7c88; }

/* ---------- typography ---------- */
.zo-entry h1 { font-size: 25px; line-height: 1.25; margin: 0 0 16px; color: #23384a; }
.zo-entry h2 { font-size: 19px; margin: 24px 0 8px; color: #23384a; }
.zo-entry h3 { font-size: 16.5px; margin: 20px 0 6px; color: #23384a; }
.zo-entry p { margin: 0 0 13px; }
.zo-entry ul, .zo-entry ol { margin: 0 0 14px; padding-left: 22px; }
.zo-entry li { margin-bottom: 5px; }
.zo-entry table { border-collapse: collapse; width: 100%; margin-bottom: 16px; }
.zo-entry th, .zo-entry td { border: 1px solid var(--zo-border); padding: 7px 9px; text-align: left; }
.zo-entry blockquote {
	margin: 0 0 14px; padding: 2px 0 2px 16px;
	border-left: 3px solid var(--zo-green); font-style: italic; color: #4a5b68;
}
.zo-table-scroll { overflow-x: auto; }

/* ---------- sidebar call-to-action buttons ---------- */
.zo-cta { display: block; text-decoration: none; margin-bottom: 9px; }
.zo-cta span {
	display: block; position: relative; color: #fff; font-size: 15px;
	font-weight: 600; padding: 15px 30px 15px 20px;
}
.zo-cta span::after {
	content: ""; position: absolute; right: -13px; top: 0;
	border: 26px solid transparent; border-left-width: 13px; border-right-width: 0;
	border-left-color: inherit;
}
.zo-cta.is-lime span { background: var(--zo-lime); border-left-color: var(--zo-lime); }
.zo-cta.is-blue span { background: var(--zo-blue); border-left-color: var(--zo-blue); }
.zo-cta.is-green span { background: var(--zo-green); border-left-color: var(--zo-green); }
.zo-cta.is-grey span { background: var(--zo-grey); border-left-color: var(--zo-grey); }
.zo-cta:hover span { filter: brightness(1.07); }

.zo-sidebar .zo-panel { padding-top: 20px; }
.zo-sidebar h2 { font-size: 15px; margin: 0 0 10px; color: #23384a; }
.zo-sidebar ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.zo-sidebar li { border-bottom: 1px solid rgba(0,0,0,.07); }
.zo-sidebar li:last-child { border-bottom: 0; }
.zo-sidebar li a { display: block; padding: 7px 0 7px 12px; position: relative; text-decoration: none; }
.zo-sidebar li a::before { content: "›"; position: absolute; left: 0; color: var(--zo-green-dark); }

/* ---------- front page ---------- */
.zo-quote { text-align: center; padding: 26px 10px; }
.zo-quote p {
	font-family: Georgia, serif; font-style: italic; font-size: 19px;
	line-height: 1.5; color: #3f5567; margin: 0; max-width: 560px;
	margin-inline: auto;
}
.zo-quote .zo-quote-mark { color: var(--zo-green); font-size: 26px; }
.zo-news-list { list-style: none; margin: 0; padding: 0; }
.zo-news-list li { padding: 6px 0 10px 12px; position: relative; }
.zo-news-list li::before { content: "›"; position: absolute; left: 0; color: var(--zo-green-dark); }
.zo-news-list a { text-decoration: none; }
.zo-news-date { display: block; font-size: 12.5px; color: #6b7c88; }
.zo-more {
	display: inline-block; background: var(--zo-label); color: #fff;
	text-decoration: none; font-size: 13px; padding: 6px 14px; margin-top: 8px;
}
.zo-more:hover { background: #3d5a73; }
.zo-service-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 20px;
}
.zo-service-grid li { padding-left: 13px; position: relative; }
.zo-service-grid li::before { content: "›"; position: absolute; left: 0; color: var(--zo-green-dark); }

/* ---------- archive photos ---------- */
.zo-hero { position: relative; margin-bottom: 18px; overflow: hidden; }
.zo-hero-img { display: block; width: 100%; height: auto; }
.zo-hero-caption {
	position: absolute; left: 0; bottom: 0; right: 0;
	padding: 14px 20px; color: #fff;
	background: linear-gradient(transparent, rgba(20, 40, 56, .78));
}
.zo-hero-caption strong { display: block; font-size: 20px; }
.zo-hero-caption span { font-size: 14px; opacity: .92; }

.zo-photo { display: block; height: auto; max-width: 100%; }
.zo-photo-wide { width: 100%; margin: 0 0 14px; }
.zo-has-photo::after { content: ""; display: block; clear: both; }
.zo-photo-right { float: right; width: 260px; margin: 0 0 12px 18px; }
.zo-photo-left { float: left; margin: 0 16px 12px 0; }
.zo-photo-portrait { width: 120px; border: 3px solid #fff; }

@media (max-width: 640px) {
	.zo-photo-right, .zo-photo-left { float: none; width: 100%; margin: 0 0 12px; }
	.zo-photo-portrait { width: 120px; }
	.zo-hero-caption { position: static; background: var(--zo-label); }
}

/* ---------- footer ---------- */
.zo-footer {
	background: #23384a; color: #cdd8e0; margin-top: 20px;
	padding: 26px 0; font-size: 13.5px;
}
.zo-footer a { color: #fff; }
.zo-footer-cols { display: flex; gap: 30px; flex-wrap: wrap; }
.zo-footer-cols > div { flex: 1 1 220px; }
.zo-footer h2 { font-size: 14px; color: #fff; margin: 0 0 8px; }
.zo-footer ul { list-style: none; margin: 0; padding: 0; }
.zo-footer li { margin-bottom: 5px; }
.zo-footer-bottom {
	border-top: 1px solid rgba(255,255,255,.15); margin-top: 20px;
	padding-top: 14px; font-size: 12.5px; color: #9fb0bd;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.zo-cols { flex-direction: column; }
	.zo-sidebar { flex: 1 1 auto; width: 100%; }
	.zo-phone { flex-basis: 100%; text-align: left; font-size: 22px; }
	.zo-header-aside { align-items: flex-start; }
}
@media (max-width: 680px) {
	.zo-nav-toggle { display: block; }
	.zo-nav ul.zo-menu { display: none; flex-direction: column; }
	.zo-nav ul.zo-menu.is-open { display: flex; }
	.zo-nav ul ul { position: static; box-shadow: none; border: 0; min-width: 0; display: flex; }
	.zo-nav ul ul a { padding-left: 32px; }
	.zo-label { margin-left: -14px; }
	.zo-panel { padding: 16px 14px 18px; }
	.zo-entry h1 { font-size: 21px; }
}