/*
 Theme Name:   Aestetika Child
 Theme URI:    http://aestetika.bold-themes.com
 Description:  Aestetika child theme
 Author:       BoldThemes
 Author URI:   http://bold-themes.com
 Template:     aestetika
 Version:      1.0.0
 Tags:         one-column, right-sidebar, custom-menu, featured-images, sticky-post, theme-options, threaded-comments, translation-ready
 Text Domain:  aestetika-child
*/


/* Theme customization starts here
-------------------------------------------------------------- */

/* Header: ruimte rondom het logo.
   Het thema geeft de logobalk de hoogte van het logo zelf, waardoor het logo de
   boven- en onderrand raakt. De ondergrens van 60px verhindert bovendien een logo
   kleiner dan dat, dus die wordt hier verlaagd; de padding bepaalt de headerhoogte. */
body {
	--min-header-height: 42px;

	/* Hamburger kleiner. Het thema zet deze variabele twee keer op body; deze
	   CSS laadt later, dus dit wint van beide. De lijnafstand moet mee omlaag:
	   drie lijnen met 5px marge vragen 33px en passen niet in 24px. */
	--responsive-trigger-size: 24px;
	--responsive-trigger-line-spacing: 3px;
}

.bt-header-responsive-inactive .site-header .site-branding .site-branding-inner {
	padding-top: 20px;
	padding-bottom: 20px;
}

/* Responsive header (hamburger zichtbaar) volgt eigen variabelen en wordt niet
   geraakt door de regel hierboven, die alleen voor de desktopvariant geldt. */
.bt-header-responsive-active .site-header .site-branding .site-branding-inner {
	padding-top: 12px;
	padding-bottom: 12px;
}

/* De hamburgerlijnen erven currentColor. Niet toepassen zodra het menu open is:
   het icoon wordt daar een kruis op een donkere overlay. */
.bt-header-responsive-active:not(.bt-responsive-menu-visible) .site-header-responsive-trigger {
	color: var(--dark-color);
}

/* Menulinks staan op color:inherit en erven daardoor dezelfde lichte kleur als
   de hamburger deed. Niet toepassen op de sticky header: die heeft een eigen
   kleurenschema met een donkere achtergrond. */
.bt-header-responsive-inactive:not(.bt-sticky-header-active) .site-header .main-navigation nav > ul.main-navigation-menu > li > a {
	color: var(--dark-color);
}

/* Zoekwidget in de sidebar: het omkaderde veld was hoger dan nodig, waardoor de
   knop er scheef in kwam te staan. Alleen de sidebar aanpassen; de zoekwidget in
   de header heeft eigen opmaak. Verticaal centreren via 50% + translate houdt de
   knop gecentreerd, ongeacht de uiteindelijke hoogte van het veld. */
.widget-area .widget_search .search-form .search-field {
	height: 3.2em;
	padding-top: 0;
	padding-bottom: 0;
}

.widget-area .widget_search input[type="submit"] {
	top: 50%;
	transform: translateY(-50%);
	right: 0.45em;
}

/* Oude Avada-pagina's (Fusion-shortcodes, zie inc/fusion-fallback.php):
   eenvoudige, rustige opmaak in een leesbare kolom. */
.bnb-fusion-container {
	max-width: 960px;
	margin: 0 auto;
	padding: clamp(2em, 5vw, 4em) var(--content-padding, 30px);
}

.bnb-fusion-container + .bnb-fusion-container {
	padding-top: 0;
}

.bnb-fusion-row {
	display: flex;
	flex-wrap: wrap;
	gap: 2em 3em;
}

.bnb-fusion-column {
	flex: 1 1 calc(var(--bnb-col, 100%) - 3em);
	min-width: min(100%, 280px);
}

.bnb-fusion-text {
	line-height: 1.8;
}

.bnb-fusion-text > *:first-child,
.bnb-fusion-box > *:first-child {
	margin-top: 0;
}

.bnb-fusion-text h1,
.bnb-fusion-text h2,
.bnb-fusion-text h3,
.bnb-fusion-text h4,
.bnb-fusion-text h5 {
	margin: 1.6em 0 0.6em;
	line-height: 1.2;
}

.bnb-fusion-text p,
.bnb-fusion-text ul,
.bnb-fusion-text ol {
	margin: 0 0 1.2em;
}

.bnb-fusion-text ul,
.bnb-fusion-text ol {
	padding-left: 1.4em;
}

.bnb-fusion-images {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5em;
	margin: 1.5em 0;
}

.bnb-fusion-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--image-medium-rounded, 12px);
}

.bnb-fusion-boxes {
	display: grid;
	gap: 1.5em;
	margin: 1.5em 0;
}

.bnb-fusion-box {
	background: var(--light-color, #fff);
	border-radius: var(--card-hard-rounded-shape, 16px);
	padding: 1.5em 1.75em;
	line-height: 1.8;
}

.bnb-fusion-button {
	display: inline-block;
	padding: 0.9em 1.6em;
	border-radius: var(--hard-rounded, 999px);
	background: var(--accent-color, #cdad7b);
	color: var(--dark-color, #222);
	text-transform: uppercase;
	font-size: 0.85em;
	letter-spacing: 0.05em;
	text-decoration: none;
}

.bnb-fusion-separator {
	border: 0;
	border-top: 1px solid var(--primary-07-color, rgba(0,0,0,.08));
	margin: 2em 0;
}

.bnb-fusion-toggle {
	border-top: 1px solid var(--primary-07-color, rgba(0,0,0,.08));
	padding: 0.8em 0;
}

.bnb-fusion-toggle summary {
	cursor: pointer;
	font-weight: 500;
}

.bnb-fusion-testimonial {
	margin: 1.5em 0;
	padding-left: 1.5em;
	border-left: 1px solid var(--accent-color, #cdad7b);
}

/* Zwevende WhatsApp-knop (plugin Click to Chat, stijl 8) in de vorm van de
   .bnb-whatsapp-knop uit het ontwerp van Homepage v2: pil, 50px rond, de zachte
   schaduw van het thema. Kleuren, tekst en icoongrootte staan in de instellingen
   van de plugin; de plugin zet vorm en schaduw inline op de knop, vandaar
   !important. De schaduw is uitgeschreven: --woo-product-hover-shadow leunt op
   --page-primary-color-rgb, en die bestaat niet buiten de paginacontainer waar
   de plugin zijn knop neerzet. */
.ht-ctc-style-8 .s_8 {
	height: auto !important;
	line-height: 1 !important;
	padding: .9em 1.5em !important;
	border-radius: var(--hard-rounded) !important;
	box-shadow: 0 10px 10px -5px rgba(25, 25, 25, .2) !important;
	letter-spacing: 0 !important;
}

.ht-ctc-style-8 .s_8_icon {
	margin-right: .75em !important;
}

/* Menu: geen witte pil achter het item bij hover of focus. Het thema zet
   daarvoor een ::after-vlak (--hover-secondary-color, hier gelijk aan
   --light-color) op opacity 1 zodra het <li> de klasse "on" krijgt. De
   goudkleurige onderstreping is een apart ::before-element en blijft. */
.bt-header-responsive-inactive .main-navigation nav > ul.main-navigation-menu > li.on > a:after,
.bt-header-responsive-inactive .main-navigation nav > ul.main-navigation-menu > li > a:focus:after {
	opacity: 0;
}