/*
Theme Name: Actipharma
Theme URI: https://www.actipharma.be
Description: Child theme of Twenty Twenty-Five for Apotheek Actipharma, styled after the revamp mock-up (colours, fonts, cards).
Author: Actipharma
Template: twentytwentyfive
Version: 1.0.11
Requires at least: 6.9
Requires PHP: 8.1
Text Domain: actipharma
*/

/* ---------- Header ---------- */
.acti-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(246, 241, 231, 0.95);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(44, 36, 25, 0.08);
}
.admin-bar .acti-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .acti-header { top: 46px; } }
.acti-header .wp-block-site-tagline {
	color: var(--wp--preset--color--muted);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0;
}
.acti-header .wp-block-navigation a:hover { color: var(--wp--preset--color--primary); }
.acti-header .acti-header-phone { margin: 0; font-size: 0.95rem; font-weight: 500; }
.acti-header .acti-header-phone a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.acti-header .acti-header-phone a:hover { color: var(--wp--preset--color--primary); }
.acti-header .acti-logo { margin: 0; flex-shrink: 0; }
.acti-header .acti-logo img { display: block; }

/* Body text is weight 300, so "bolder" only reaches 400 and bold looked like normal text; 600 is self-hosted. */
strong, b { font-weight: 600; }

/* Anchor links (e.g. #contactformulier) land below the sticky header instead of under it. */
[id] { scroll-margin-top: 110px; }

/* ---------- Small helpers used in page content ---------- */
.acti-eyebrow {
	color: var(--wp--preset--color--muted);
	font-size: 0.8rem !important;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.acti-lead { font-size: 1.2rem; line-height: 1.6; color: rgba(44, 36, 25, 0.85); }
.acti-section { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.acti-card {
	background: #fffdf8;
	border: 1px solid rgba(44, 36, 25, 0.07);
	border-radius: 18px;
	padding: 28px 30px;
	box-shadow: 0 6px 18px rgba(44, 36, 25, 0.06), 0 2px 6px rgba(44, 36, 25, 0.04);
	height: 100%;
}
.acti-card > :first-child { margin-top: 0; }
.acti-card > .wp-block-heading:not(:first-child) { margin-top: 1.75rem; }
/* The card next to the form keeps its own height instead of stretching to the form's. */
.wp-block-column:has(.wpcf7) + .wp-block-column .acti-card { height: auto; }
.acti-card--green {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 0;
}
.acti-card--green h2, .acti-card--green h3 { color: var(--wp--preset--color--base); }
.acti-card--green a:not(.wp-element-button) { color: var(--wp--preset--color--accent); }

/* Opening hours as a clean list instead of a bordered table */
.acti-hours table { border-collapse: collapse; width: 100%; }
.acti-hours td {
	border: 0;
	border-bottom: 1px solid rgba(44, 36, 25, 0.1);
	padding: 0.7rem 0;
}
.acti-hours td:last-child { text-align: right; font-weight: 500; }
.acti-hours tr:last-child td { border-bottom: 0; }

/* Services checklist in two columns with gold ticks */
.acti-checklist { list-style: none; padding-left: 0; columns: 2 280px; column-gap: 2.5rem; }
.acti-checklist li { break-inside: avoid; padding: 0.35rem 0 0.35rem 1.8rem; position: relative; }
.acti-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.85rem;
	width: 0.7rem;
	height: 0.4rem;
	border-left: 2px solid var(--wp--preset--color--accent);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	transform: rotate(-45deg);
}

/* Vaccination banner list */
.acti-card--green ul { padding-left: 1.2rem; }

/* Map */
.acti-map iframe { display: block; width: 100%; min-height: 360px; border: 0; border-radius: 18px; }

/* ---------- Contact Form 7 ---------- */
.wpcf7 form { display: grid; gap: 1rem; }
.wpcf7 form > p { margin: 0; }
.wpcf7 label { display: block; font-weight: 500; font-size: 0.95rem; }
.wpcf7 label br { display: none; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	display: block;
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.8rem 1rem;
	font: inherit;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
	background: #fffdf8;
	border: 1px solid rgba(44, 36, 25, 0.18);
	border-radius: 10px;
	box-sizing: border-box;
}
.wpcf7 textarea { min-height: 150px; resize: vertical; }
.wpcf7 input:focus, .wpcf7 textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: transparent;
}
.wpcf7 .wpcf7-acceptance { font-size: 0.92rem; font-weight: 400; }
.wpcf7 .wpcf7-list-item { margin: 0; }
.wpcf7 input[type="checkbox"] { accent-color: var(--wp--preset--color--primary); margin-right: 0.5rem; }
.wpcf7 input[type="submit"] {
	justify-self: start;
	padding: 0.85rem 2rem;
	font: inherit;
	font-weight: 500;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--contrast); }
.wpcf7 .wpcf7-spinner { margin-left: 0.75rem; }
.wpcf7 form .wpcf7-response-output { margin: 0; border-radius: 10px; padding: 0.8rem 1rem; }

/* ---------- Footer ---------- */
.acti-footer { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); }
.acti-footer h2, .acti-footer h3, .acti-footer .wp-block-site-title a { color: var(--wp--preset--color--base); }
.acti-footer a { color: var(--wp--preset--color--accent); }
.acti-footer p { margin: 0.2rem 0; }
.acti-footer .acti-logo { margin: 0; flex-shrink: 0; }
/* Sand round backdrop (same colour as the "Waarvoor kunt u bij ons terecht?" section) so the petals stand out on the green footer. */
.acti-footer .acti-logo img {
	display: block;
	box-sizing: border-box;
	width: 44px !important;
	height: 44px !important;
	padding: 4px;
	background: var(--wp--preset--color--surface);
	border-radius: 50%;
}
.acti-footer .acti-footer-bottom { border-top: 1px solid rgba(246, 241, 231, 0.18); font-size: 0.85rem; opacity: 0.8; }
/* ---------- Mobile ---------- */
@media (max-width: 781px) {
	.acti-card { padding: 22px 20px; }
	.acti-checklist { columns: 1; }
}