/*
 Theme Name:   Touched by an Angel
 Description:  Eigen thema van de praktijk van Henriette van Bekkum, gebouwd op GeneratePress. Huisstijl, header en SEO-aanvullingen staan hier, zodat updates van GeneratePress ze niet overschrijven.
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  touched-angel
*/

:root {
	--ta-plum: #5c1a4f;
	--ta-plum-dark: #35102f;
	--ta-accent: #8f2467;
	--ta-tint: #f6ecf3;
	--ta-bg: #fbf7f9;
	--ta-card: #fff;
	--ta-line: #eee2ea;
	--ta-text: #33272f;
	--ta-muted: #6d5c67;
	--ta-radius: 14px;
	--ta-shadow: 0 1px 2px rgba(53, 16, 47, .05), 0 8px 24px rgba(53, 16, 47, .06);
	--ta-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--ta-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Basis */
body {
	background: var(--ta-bg);
	color: var(--ta-text);
	font-family: var(--ta-sans);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
}

a,
a:visited {
	color: var(--ta-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .16em;
}

a:hover,
a:focus {
	color: var(--ta-plum-dark);
}

:focus-visible {
	outline: 2px solid var(--ta-accent);
	outline-offset: 2px;
}

h1,
h2,
h3 {
	color: var(--ta-plum);
	font-family: var(--ta-serif);
	font-weight: 700;
	line-height: 1.25;
}

h1,
.entry-title {
	font-size: clamp(1.8rem, 1.45rem + 1.5vw, 2.5rem);
	margin-bottom: .6em;
}

.entry-content h2 {
	font-size: clamp(1.35rem, 1.2rem + .6vw, 1.65rem);
	margin: 1.7em 0 .5em;
}

.entry-content h2:first-child {
	margin-top: 0;
}

/* Header met de dahlia */
.site-header {
	background: var(--ta-plum-dark) url("/wp-content/uploads/2024/03/colorful-dahlia-flower-2023-11-27-04-50-15-utc-1536x1024.jpg") center 45% / cover no-repeat;
	color: #fff;
	position: relative;
}

.site-header::before {
	background: linear-gradient(180deg, rgba(40, 10, 35, .62), rgba(40, 10, 35, .74));
	content: "";
	inset: 0;
	position: absolute;
}

.inside-header {
	justify-content: center;
	padding: clamp(52px, 8vw, 112px) 24px;
	position: relative;
	text-align: center;
}

.site-branding {
	max-width: 960px;
}

.main-title {
	font-family: var(--ta-serif);
	font-size: clamp(1.3rem, .55rem + 3.6vw, 3.4rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
}

.main-title a,
.main-title a:hover,
.main-title a:visited {
	color: #fff;
	text-decoration: none;
}

.site-description {
	color: rgba(255, 255, 255, .92);
	font-size: clamp(.74rem, .68rem + .3vw, .92rem);
	letter-spacing: .07em;
	line-height: 1.6;
	margin: 1em auto 0;
	max-width: 46em;
	text-wrap: balance;
}

/* Pagina-opbouw */
#page {
	margin-top: clamp(16px, 3vw, 36px);
	margin-bottom: clamp(16px, 3vw, 36px);
}

.site-content,
.one-container .site-content {
	background: transparent;
	padding: 0;
}

body.separate-containers .site-main {
	margin: 0;
}

body.separate-containers .inside-left-sidebar {
	margin: 0;
}

@media (min-width: 769px) {
	body.left-sidebar.separate-containers .site-main {
		margin-left: 24px;
	}
}

.inside-article,
.one-container .inside-article {
	background: var(--ta-card);
	border-radius: var(--ta-radius);
	box-shadow: var(--ta-shadow);
	padding: clamp(24px, 4vw, 52px);
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

.entry-content::after {
	clear: both;
	content: "";
	display: table;
}

.entry-content img {
	border-radius: 10px;
	height: auto;
}

.ta-portrait {
	border-radius: var(--ta-radius);
	box-shadow: var(--ta-shadow);
	float: right;
	margin: .3em 0 1.4em 2em;
	max-width: 42%;
	width: 280px;
}

.ta-vragen {
	background: var(--ta-tint);
	border-radius: 10px;
	color: var(--ta-plum);
	font-family: var(--ta-serif);
	font-size: 1.12em;
	list-style: none;
	margin: 0 0 1.6em;
	padding: 1.1em 1.4em;
}

.ta-vragen li {
	margin: .25em 0;
}

.ta-lead {
	color: var(--ta-plum);
	font-family: var(--ta-serif);
	font-size: 1.22em;
	line-height: 1.45;
	margin-bottom: 1.2em;
}

/* Zijbalk */
.is-left-sidebar .inside-left-sidebar {
	padding: 0;
}

.widget-area .widget,
.sidebar .widget {
	background: var(--ta-card);
	border-radius: var(--ta-radius);
	box-shadow: var(--ta-shadow);
	font-size: 1rem;
	margin-bottom: 20px;
	padding: 22px 18px;
}

.widget-title {
	color: var(--ta-plum);
	font-family: var(--ta-serif);
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: .6em;
	padding: 0 .55rem;
}

.widget_nav_menu ul {
	list-style: none;
	margin: 0;
}

.widget_nav_menu ul li {
	margin: 0;
	padding: 0;
}

.widget_nav_menu ul li a,
.widget_nav_menu ul li a:visited {
	border-radius: 8px;
	color: var(--ta-text);
	display: block;
	line-height: 1.35;
	padding: .55em .55rem;
	text-decoration: none;
}

.widget_nav_menu ul li a:hover,
.widget_nav_menu ul li a:focus {
	background: var(--ta-tint);
	color: var(--ta-plum);
}

.widget_nav_menu ul li.current-menu-item > a {
	background: var(--ta-plum);
	color: #fff;
}

/* Afspraakkaart */
.ta-afspraak {
	background: var(--ta-plum);
	border-radius: var(--ta-radius);
	box-shadow: var(--ta-shadow);
	color: #fff;
	margin-bottom: 20px;
	padding: 22px;
}

.ta-afspraak p {
	font-size: .95rem;
	line-height: 1.5;
	margin: 0 0 1em;
}

.ta-afspraak .ta-afspraak-titel {
	color: #fff;
	font-family: var(--ta-serif);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 .3em;
}

.ta-knop,
.ta-knop:visited {
	border: 1.5px solid #fff;
	border-radius: 999px;
	color: #fff;
	display: block;
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.3;
	margin-top: 10px;
	padding: .65em 1em;
	text-align: center;
	text-decoration: none;
}

.ta-knop-vol,
.ta-knop-vol:visited {
	background: #fff;
	color: var(--ta-plum);
}

.ta-knop:hover,
.ta-knop:focus {
	background: var(--ta-tint);
	border-color: var(--ta-tint);
	color: var(--ta-plum-dark);
}

/* Footer */
.site-info {
	background: var(--ta-plum-dark);
	color: rgba(255, 255, 255, .86);
	font-size: .92rem;
	line-height: 1.6;
	padding: 24px 16px;
	text-align: center;
}

.site-info a,
.site-info a:visited,
.site-info a:hover {
	color: #fff;
}

.inside-site-info,
.copyright-bar {
	justify-content: center;
	width: 100%;
}

/* Marge langs de schermrand zodra het scherm smaller is dan de container. */
@media (max-width: 1180px) {
	#page {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Menu voor mobiel; op een groot scherm staat het menu in de zijbalk. */
@media (min-width: 769px) {
	.main-navigation {
		display: none;
	}
}

@media (max-width: 768px) {
	body {
		font-size: 17px;
	}

	.site-header {
		background-image: url("/wp-content/uploads/2024/03/colorful-dahlia-flower-2023-11-27-04-50-15-utc-768x512.jpg");
	}

	.main-navigation,
	.main-navigation ul ul {
		background: var(--ta-plum);
	}

	.main-navigation {
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.main-navigation .main-nav ul li a,
	.main-navigation .main-nav ul li a:visited,
	.main-navigation .menu-toggle,
	.main-navigation .menu-toggle:hover,
	.main-navigation .menu-toggle:focus {
		background: transparent;
		color: #fff;
		font-size: 1rem;
		line-height: 3;
		text-decoration: none;
	}

	.main-navigation .main-nav ul li.current-menu-item > a {
		background: var(--ta-plum-dark);
	}

	#page {
		padding-left: 12px;
		padding-right: 12px;
	}

	.is-left-sidebar .widget_nav_menu {
		display: none;
	}

	.ta-portrait {
		display: block;
		float: none;
		margin: 0 auto 1.4em;
		max-width: 70%;
		width: 240px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}