/*
Theme Name: MyFin
Theme URI: https://my-fin.be/
Author: MyFin
Description: Blokthema voor MyFin. Alle teksten, afbeeldingen, menu's en kleuren pas je aan via het WordPress-dashboard (Weergave › Editor en de gewone pagina-editor).
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.19.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myfin
*/

/* Kleine verfijningen die theme.json niet kan uitdrukken. */
.myfin-tegel {
	transition: transform .2s ease, box-shadow .2s ease;
}
.myfin-tegel:hover,
.myfin-tegel:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px -18px rgba(1, 81, 114, .45);
}
.myfin-tegel a { text-decoration: none; }
.myfin-tegel a::after { content: ""; position: absolute; inset: 0; }
.myfin-tegel { position: relative; }

.myfin-icoon img { height: 88px; width: auto; }

.myfin-topbalk .wp-block-button__link { white-space: nowrap; }

.myfin-kantoor p { margin-block: .15em; }

:where(a, button, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--wp--preset--color--rood);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.myfin-tegel { transition: none; }
	.myfin-tegel:hover { transform: none; }
}

/* Ons topteam */
.myfin-teamlid > * { padding-inline: var(--wp--preset--spacing--40); }
.myfin-teamlid > .wp-block-image { padding-inline: 0; margin: 0; width: 100%; }
.myfin-teamlid .wp-block-image img { width: 100%; height: auto; display: block; }
.myfin-teamlid h3 { margin-bottom: .25rem; }
.myfin-teamlid p { margin-block: 0; overflow-wrap: anywhere; }
.myfin-teamlid .myfin-functie { margin-bottom: .6rem; }
.myfin-teamlid .myfin-tel a,
.myfin-teamlid .myfin-mail a { color: var(--wp--preset--color--navy); text-decoration: none; }
.myfin-teamlid .myfin-tel a:hover,
.myfin-teamlid .myfin-mail a:hover { color: var(--wp--preset--color--blauw); text-decoration: underline; }
.myfin-tel, .myfin-mail { display: flex; gap: .55em; align-items: baseline; }
.myfin-tel::before, .myfin-mail::before {
	content: ""; flex: none; width: 1em; height: 1em; transform: translateY(.15em);
	background: var(--wp--preset--color--blauw);
	-webkit-mask: var(--icoon) center / contain no-repeat; mask: var(--icoon) center / contain no-repeat;
}
.myfin-tel { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); }
.myfin-mail { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1 2.4V17h16V7.4l-8 5.3zM5.4 7 12 11.4 18.6 7z'/%3E%3C/svg%3E"); }

/* Openingsuren */
.myfin-uren .wp-block-table { margin: 0; overflow-x: auto; }
.myfin-uren table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.myfin-uren th, .myfin-uren td { border: 0; border-bottom: 1px solid #d5e0e6; padding: .55em .6em .45em 0; text-align: left; white-space: nowrap; }
.myfin-uren thead th { color: var(--wp--preset--color--navy); font-weight: 700; border-bottom: 2px solid var(--wp--preset--color--navy); }
.myfin-uren tbody td:first-child { font-weight: 600; color: var(--wp--preset--color--navy); }
.myfin-uren tbody tr:last-child td { border-bottom: 0; }
.myfin-uren em { font-style: normal; color: #5b6f7a; }
.myfin-uren h2 { margin-bottom: 0; }
@media (max-width: 480px) { .myfin-uren th, .myfin-uren td { white-space: normal; } }
.myfin-uren a[href^="tel"] { white-space: nowrap; }

/* Telefoon- en mail-icoontjes overal bruikbaar, ook buiten de teamkaartjes */
.myfin-tel a[href], .myfin-mail a[href] { white-space: nowrap; }

/* Contactpagina en Contact Form 7 */
.myfin-contactkantoor h2 { margin: 0; }
.myfin-contactkantoor p { margin: 0; }
.myfin-formulier .wpcf7 form > p { margin: 0 0 1rem; }
.myfin-formulier .wpcf7 br { display: none; }
.myfin-formulier .wpcf7-form-control-wrap { display: block; margin-bottom: .9rem; }
.myfin-formulier input[type="text"],
.myfin-formulier input[type="email"],
.myfin-formulier input[type="tel"],
.myfin-formulier select,
.myfin-formulier textarea {
	width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem;
	color: var(--wp--preset--color--tekst); background: var(--wp--preset--color--wit);
	border: 1px solid #c9d6dd; border-radius: 10px; padding: .8em 1em .7em;
}
.myfin-formulier textarea { height: 9rem; min-height: 6rem; resize: vertical; }
.myfin-formulier input:focus, .myfin-formulier select:focus, .myfin-formulier textarea:focus {
	outline: 3px solid var(--wp--preset--color--lichtblauw); outline-offset: 0; border-color: var(--wp--preset--color--blauw);
}
.myfin-formulier .wpcf7-radio { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.myfin-formulier .wpcf7-list-item { margin: 0; }
.myfin-formulier .wpcf7-list-item label { display: inline-flex; gap: .45em; align-items: center; cursor: pointer; }
.myfin-formulier input[type="radio"] { accent-color: var(--wp--preset--color--navy); width: 1.1em; height: 1.1em; }
.myfin-formulier input[type="submit"] {
	font: inherit; font-weight: 600; cursor: pointer; border: 0; border-radius: 999px;
	padding: .8em 2em .7em; color: var(--wp--preset--color--wit); background: var(--wp--preset--color--rood);
}
.myfin-formulier input[type="submit"]:hover { background: var(--wp--preset--color--navy); }
.myfin-formulier .wpcf7-not-valid-tip { font-size: .85rem; color: #c62f37; margin-top: .3rem; }
.myfin-formulier .wpcf7-response-output { margin: 1rem 0 0 !important; border-radius: 10px; padding: .8em 1em !important; }


/* Lange tekstpagina's (privacy, cookies) */
.myfin-tekstpagina h2 { font-size: var(--wp--preset--font-size--groot); margin-top: 2.2em; }
.myfin-tekstpagina ul { padding-left: 1.2em; }
.myfin-tekstpagina li { margin-bottom: .4em; }

/* Dienstpagina's (Ondernemers, Particulieren) */
.myfin-dienst h2 { margin: 0; }
.myfin-dienst p { margin: 0; }
.myfin-dienst ul { margin: .25rem 0 0; padding-left: 1.1em; }
.myfin-dienst li { margin-bottom: .35em; }
.myfin-dienst li::marker { color: var(--wp--preset--color--blauw); }