/*
Theme Name: Direct Online Theme
Theme URI: https://direct-online.nl
Author: Direct-online
Author URI: https://direct-online.nl
Description: Lightweight, fully editable WordPress block theme for fast, professional client websites. Built on native WordPress: Site Editor, Global Styles, reusable block patterns and ten custom blocks. No page builder required.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: direct-online-theme
Tags: block-patterns, block-styles, full-site-editing, one-column, custom-colors, custom-logo, editor-style, translation-ready
*/

/*
 * Almost all styling lives in theme.json (design tokens + global styles).
 * This file only covers what theme.json cannot express yet.
 */

/* --- Group block style: Card ------------------------------------------- */

.is-style-card,
.is-style-card-highlight {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--preset--shadow--card);
	padding: var(--wp--preset--spacing--50);
	height: 100%;
}

.is-style-card-highlight {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--raised);
}

/* --- FAQ: Details block ------------------------------------------------- */

.wp-block-details {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	list-style-position: outside;
}

.wp-block-details[open] summary {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* --- Buttons: smooth hover ---------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* --- Accessible focus style --------------------------------------------- */

a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* --- Logo cloud: calm, uniform logos ------------------------------------ */

.do-logo-cloud img {
	filter: grayscale(1);
	opacity: 0.65;
	transition: opacity 0.15s ease, filter 0.15s ease;
}

.do-logo-cloud img:hover {
	filter: none;
	opacity: 1;
}

/* --- Small helpers ------------------------------------------------------- */

/* Eyebrow label above headings (used by patterns, editable as a paragraph). */
.do-eyebrow {
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* =========================================================================
   Custom blocks (blocks/)
   ========================================================================= */

/* --- Icoon --------------------------------------------------------------- */

.do-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	color: var(--wp--preset--color--primary);
}

.do-icon--boxed {
	background-color: var(--wp--preset--color--primary-tint);
	border-radius: var(--wp--custom--radius--medium);
	padding: 0.75rem;
}

.do-icon.has-background {
	border-radius: var(--wp--custom--radius--medium);
	padding: 0.75rem;
}

/* --- Statistiek ----------------------------------------------------------- */

.do-stat {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.do-stat__value {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--primary);
}

.do-stat__label {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--small);
}

.do-stat.has-text-color .do-stat__value,
.do-stat.has-text-color .do-stat__label {
	color: inherit;
}

/* --- Review-sterren -------------------------------------------------------- */

.do-rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	color: #e8940a;
}

.do-rating__stars {
	display: inline-flex;
	gap: 2px;
	line-height: 0;
}

.do-rating__half {
	position: relative;
	display: inline-flex;
	line-height: 0;
}

.do-rating__half-fill {
	position: absolute;
	inset: 0;
	width: 50%;
	overflow: hidden;
	display: inline-flex;
	line-height: 0;
}

.do-rating__label {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* --- Teamlid --------------------------------------------------------------- */

.do-team {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--preset--shadow--card);
	padding: var(--wp--preset--spacing--50);
}

.do-team__photo {
	width: 96px;
	height: 96px;
	border-radius: 9999px;
	object-fit: cover;
}

.do-team__name {
	margin: 0.85rem 0 0;
	font-size: var(--wp--preset--font-size--large);
}

.do-team__role {
	margin: 0.15rem 0 0;
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--small);
}

.do-team__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 0.85rem;
	font-size: var(--wp--preset--font-size--small);
}

/* --- Openingstijden --------------------------------------------------------- */

.do-hours__table {
	width: 100%;
	border-collapse: collapse;
}

.do-hours__table th,
.do-hours__table td {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
	font-weight: 400;
}

.do-hours__table td {
	text-align: right;
}

.do-hours__table tr.is-today th,
.do-hours__table tr.is-today td {
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.do-hours__today {
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-left: 0.35rem;
}

.do-hours__note {
	margin-top: 0.75rem;
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* --- WhatsApp- en Bel-knop ---------------------------------------------------- */

.wp-element-button.do-wa-button,
.wp-element-button.do-call-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
}

/* WhatsApp-green with sufficient contrast against white text. */
.wp-element-button.do-wa-button:not(.has-background) {
	background-color: #128c7e;
}

.wp-element-button.do-wa-button:not(.has-background):hover,
.wp-element-button.do-wa-button:not(.has-background):focus {
	background-color: #0c6b60;
}

/* --- Google Maps -------------------------------------------------------------- */

.do-map {
	margin: 0;
}

.do-map iframe {
	display: block;
	width: 100%;
	border: 0;
	border-radius: var(--wp--custom--radius--medium);
}

/* --- Kruimelpad ---------------------------------------------------------------- */

.do-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.do-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
}

.do-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.do-breadcrumbs li + li::before {
	content: "/";
	opacity: 0.5;
}

.do-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.do-breadcrumbs a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* --- Copyright-jaar -------------------------------------------------------------- */

.do-copyright {
	margin: 0;
}