/*
Theme Name: Taking Care of Hair
Theme URI: https://takingcareofhair.com/
Author: Taking Care of Hair
Description: Maatwerk blokthema voor kapsalon Taking Care of Hair in Lisse. Warm en rustig, met service menu, boekingspagina (SARA Salonsoft), reviews en WooCommerce-webshop.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.5.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taking-care-of-hair
Tags: block-theme, full-site-editing, e-commerce
*/

/* ---------- Basis ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
img { height: auto; }

/* Rustige focusstijl, goed zichtbaar */
a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* ---------- Kleine labels boven koppen ---------- */
.tcoh-eyebrow {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 13px !important;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 0 !important;
}

/* ---------- Header ---------- */
.tcoh-topbar a { text-decoration: none; }
.tcoh-topbar .wp-block-social-links { gap: 4px; }
.tcoh-header .wp-block-site-title a { text-decoration: none; }
.tcoh-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 2px solid transparent;
}
.tcoh-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.tcoh-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--wp--preset--color--accent);
}
.tcoh-nav-row { width: 100%; }
.tcoh-nav-row .wp-block-navigation__container { row-gap: 4px; }
.tcoh-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 12px;
	padding: 8px 0;
	text-transform: none;
	letter-spacing: 0;
}

/* ---------- Kaarten ---------- */
.tcoh-card { border-radius: 16px; overflow: hidden; }
.tcoh-card .wp-block-image img { border-radius: 16px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.tcoh-arch img { border-radius: 240px 240px 16px 16px; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.tcoh-rounded img { border-radius: 16px; object-fit: cover; width: 100%; }
.tcoh-square img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: 12px; }

/* Placeholder-vlakken voor foto's die nog gekozen moeten worden */
.tcoh-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 16px;
}

/* ---------- Service menu ---------- */
.tcoh-price-row {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 16px;
	padding-bottom: 16px;
}
.tcoh-price-row p { margin: 0; }
.tcoh-price-row .tcoh-price-name { flex: 1 1 auto; min-width: 0; }
.tcoh-price-row .tcoh-price { font-weight: 600; white-space: nowrap; }
.tcoh-price-row .tcoh-price-col { flex: 0 0 84px; text-align: right; }
.tcoh-price-head { border-top: 0; padding-top: 0; padding-bottom: 8px; }
.tcoh-price-head .tcoh-eyebrow { font-size: 11px !important; letter-spacing: 2px; }
.tcoh-duration {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* ---------- Reviews ---------- */
.tcoh-stars { color: var(--wp--preset--color--gold); letter-spacing: 2px; }
.tcoh-review blockquote,
.tcoh-review .wp-block-quote { border: 0; padding: 0; margin: 0; }

/* ---------- Boekingsframe (SARA Salonsoft) ---------- */
.tcoh-booking-frame {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 24px;
	padding: 12px;
}
.tcoh-booking-frame iframe {
	display: block;
	width: 100%;
	min-height: 900px;
	border: 0;
	border-radius: 16px;
	background: #FBF8F4;
}
.tcoh-steps .tcoh-step-number {
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
}

.tcoh-reviews-frame iframe { min-height: 620px; }
.tcoh-reviews-frame-full iframe { min-height: 1100px; }
.tcoh-giftcard-frame iframe { min-height: 900px; }

/* ---------- Kaart (Google Maps) ---------- */
.tcoh-map iframe {
	display: block;
	width: 100%;
	min-height: 320px;
	border: 0;
	border-radius: 16px;
}

/* ---------- Openingstijden ---------- */
.tcoh-hours { margin: 0; }
.tcoh-hours td { padding: 5px 24px 5px 0; border: 0; }
.tcoh-hours table { border: 0; }
.tcoh-hours .is-closed { color: var(--wp--preset--color--muted); }

/* ---------- Zwevende WhatsApp-knop ---------- */
.tcoh-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 50;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(43, 33, 28, 0.3);
	transition: transform 0.15s ease;
}
.tcoh-whatsapp:hover { transform: scale(1.06); color: var(--wp--preset--color--base); }

/* ---------- WooCommerce: in lijn met de huisstijl ---------- */
.woocommerce-store-notice,
.wc-block-components-notice-banner { border-radius: 12px; }
.wc-block-grid__product-image img,
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img { border-radius: 16px; }
.wc-block-components-product-price,
.wp-block-woocommerce-product-price { color: var(--wp--preset--color--accent); font-weight: 600; }
.wc-block-mini-cart__button { padding: 8px; }

/* ---------- Mobiel ---------- */
@media (max-width: 781px) {
	.tcoh-hide-mobile { display: none !important; }
	.tcoh-hero-title { font-size: 40px !important; }
	.tcoh-booking-frame iframe { min-height: 1100px; }
	.tcoh-price-row { flex-wrap: wrap; }
}