/*
Theme Name: Chico & Gomez Klantenservice
Description: Blokthema voor de klantenservice van Chico & Gomez (chicoandgomez.com). Alles is aan te passen in de editor: pagina's, kop en voettekst (Weergave → Editor), kleuren (Stijlen) en lettertypen (Weergave → Lettertype-keuze).
Author: Team Enablement
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: chicoandgomez
*/

:root{
	--cg-rood:var(--wp--preset--color--rood);
	--cg-groen:var(--wp--preset--color--groen);
	--cg-lijn:var(--wp--preset--color--lijn);
	--cg-memo:#fdefc8;
	--cg-tape:rgba(232,214,160,.85);
	--cg-streep:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14'%3E%3Cpath d='M3 9c40-5 80-6 120-4s77 3 114-2' fill='none' stroke='%232b8a3e' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M18 11c50-3 110-3 200-4' fill='none' stroke='%232b8a3e' stroke-width='2' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
}
body{background:var(--wp--preset--color--wit)}
img{max-width:100%;height:auto}

/* ---------- Kop ---------- */
.cg-header{padding-top:.8rem;padding-bottom:.8rem;border-bottom:1px solid var(--cg-lijn);background:var(--wp--preset--color--wit)}
.cg-header-rij{gap:1.5rem}
.cg-header-rechts{gap:1.8rem!important}
.cg-header .cg-logo{margin:0;flex-shrink:0}
.cg-header .cg-logo img{height:66px!important;width:auto!important;display:block}
.cg-header .wp-block-navigation a{text-decoration:none;color:var(--wp--preset--color--inkt)}
.cg-header .wp-block-navigation a:hover{color:var(--cg-rood)}
.cg-header-knop{margin:0!important}
@media (max-width:1100px){.cg-header-rechts{gap:1rem!important}.cg-header .wp-block-navigation{font-size:.9rem}}
@media (max-width:781px){.cg-header .cg-logo img{height:48px!important}.cg-header .cg-header-knop{display:none!important}}

/* ---------- Knoppen ---------- */
.wp-block-button__link{display:inline-flex;align-items:center;gap:.55em;text-decoration:none}
.wp-block-button.is-style-outline .wp-block-button__link{background:var(--wp--preset--color--wit);color:var(--wp--preset--color--inkt);border:1.5px solid var(--wp--preset--color--inkt);padding:.72rem 1.2rem}
.wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--wp--preset--color--zacht);color:var(--wp--preset--color--inkt)}
.cg-knop-whatsapp .wp-block-button__link::before,.cg-knop-mail .wp-block-button__link::before,.cg-knop-route .wp-block-button__link::before{content:"";width:1.2em;height:1.2em;flex-shrink:0;background:currentColor;-webkit-mask:var(--cg-icoon) center/contain no-repeat;mask:var(--cg-icoon) center/contain no-repeat}
.cg-knop-whatsapp{--cg-icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.4a.5.5 0 0 0 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .1-1.3c0-.1-.2-.2-.5-.3z'/%3E%3C/svg%3E")}
.cg-knop-mail{--cg-icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6l8.5 7 8.5-7'/%3E%3C/svg%3E")}
.cg-knop-route{--cg-icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")}
.cg-sectie .cg-knop-whatsapp .wp-block-button__link,.cg-hero .cg-knop-whatsapp .wp-block-button__link{background:var(--cg-groen)}
.cg-sectie .cg-knop-whatsapp .wp-block-button__link:hover,.cg-hero .cg-knop-whatsapp .wp-block-button__link:hover{background:var(--wp--preset--color--groen-donker)}
.cg-knoppen-onder{flex-direction:column;align-items:flex-start!important;gap:.7rem!important}

/* ---------- Teksten ---------- */
.cg-accent{font-family:var(--wp--preset--font-family--accent);font-weight:var(--cg-accent-dikte,400);text-transform:var(--cg-accent-hoofd,uppercase);color:var(--cg-rood);font-size:clamp(2.3rem,4.6vw,3.8rem);line-height:1;margin-top:.1em!important;transform:rotate(-1.5deg);transform-origin:left}
.cg-hand{font-family:var(--wp--preset--font-family--hand);font-weight:var(--cg-hand-dikte,400);font-size:1.08rem;line-height:1.5}
.cg-hart{color:var(--cg-rood)}
.cg-hand-hart{position:relative;padding-left:2.1rem;max-width:30rem;margin-top:1.6rem!important}
.cg-hand-hart::before{content:"♡";position:absolute;left:0;top:-.25rem;color:var(--cg-rood);font-size:1.8rem;font-family:Georgia,serif;transform:rotate(-12deg)}
.cg-hand a{color:var(--cg-groen);font-weight:700}
.cg-talen{font-size:.92rem;color:var(--wp--preset--color--grijs)}
h1.wp-block-heading{line-height:.95}
.cg-onderstreept::after{content:"";display:block;width:min(240px,60%);height:14px;margin:.45rem 0 0;background:var(--cg-streep) center/100% 100% no-repeat}
.cg-onderstreept.has-text-align-center::after{margin-inline:auto}

/* ---------- Tekeningen ---------- */
.cg-tekening{margin:0}
.cg-tekening img{display:block;width:100%;height:auto}

/* ---------- Hero ---------- */
.cg-hero{padding-top:clamp(1.5rem,4vw,3rem);padding-bottom:0;overflow:hidden;background:linear-gradient(to bottom,var(--wp--preset--color--wit) 0,var(--wp--preset--color--wit) 86%,#f3e6d4 86%,#efe0ca 100%)}
.cg-hero-kolommen{gap:clamp(1rem,3vw,2.5rem)!important}
.cg-hero-kolommen > .wp-block-column:nth-child(2){padding-bottom:3rem}
.cg-hero-links img{max-width:300px;margin-left:auto}
.cg-hero-rechts img{max-width:480px;margin-left:auto}
@media (max-width:781px){
	.cg-hero{background:var(--wp--preset--color--wit)}
	.cg-hero-kolommen > .wp-block-column:nth-child(2){order:-1;padding-bottom:1rem}
	.cg-hero-links{display:none}
	.cg-hero-rechts img{margin-inline:auto;max-width:360px}
}

/* ---------- Secties ---------- */
.cg-sectie{padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)}
.cg-sectie > .wp-block-heading{margin-bottom:var(--wp--preset--spacing--50)}
.cg-scheiding{max-width:1240px;margin-inline:auto!important;padding-inline:clamp(1rem,4vw,2.5rem)}
.cg-scheiding p{display:flex;align-items:center;gap:1rem;margin:0;font-size:1.7rem;line-height:1}
.cg-scheiding p::before,.cg-scheiding p::after{content:"";flex:1;border-top:2px dashed #cfcac0}

/* Kaarten */
.cg-kaarten.wp-block-group{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.cg-kaarten > *{margin:0!important}
.cg-kaart{position:relative;background:var(--wp--preset--color--wit);border:1px solid var(--cg-lijn);border-radius:8px;box-shadow:0 3px 10px rgba(29,29,27,.06);padding:1.4rem 1rem 1.3rem;text-align:center;display:flex;flex-direction:column;gap:.4rem}
.cg-kaart > *{margin:0!important}
.cg-kaart h3{font-size:1.12rem;margin-top:.5rem!important}
.cg-kaart p{font-size:.9rem;color:var(--wp--preset--color--grijs);line-height:1.45}
.cg-kaart-beeld img{height:92px!important;width:auto!important;margin-inline:auto;display:block}
.cg-kaarten > .cg-kaart:first-child::before{content:"";position:absolute;top:-12px;left:18px;width:84px;height:24px;background:var(--cg-tape);transform:rotate(-6deg)}
.cg-kaart-links{text-align:left}
@media (max-width:1000px){.cg-kaarten.wp-block-group{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.cg-kaarten.wp-block-group{grid-template-columns:repeat(2,minmax(0,1fr))}.cg-kaarten > :last-child{grid-column:1/-1}}

/* Memo's */
.cg-memo{position:relative;background:var(--cg-memo);padding:1.3rem 1.2rem 1.1rem;box-shadow:0 8px 18px rgba(29,29,27,.1);transform:rotate(2deg)}
.cg-memo::before{content:"";position:absolute;top:-11px;left:50%;width:84px;height:22px;margin-left:-42px;background:var(--cg-tape);transform:rotate(-4deg)}
.cg-memo > *{margin:0 0 .5rem!important}
.cg-memo > :last-child{margin-bottom:0!important}
.cg-memo .cg-hand{font-size:1.12rem;line-height:1.45}
.cg-memo-groot{transform:rotate(-2deg);padding:1.6rem 1.5rem 1.4rem}
.cg-memo-breed{max-width:520px;margin-top:var(--wp--preset--spacing--50)!important}
.cg-hand-kop{font-family:var(--wp--preset--font-family--hand)!important;font-weight:700;font-size:1.5rem;text-transform:uppercase;letter-spacing:0;transform:rotate(-3deg);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.cg-klok{float:right;margin:-.4rem -.3rem .2rem .6rem!important}
.cg-klok img{width:48px!important;height:auto!important}
.cg-gluurder{position:relative;z-index:2;margin-bottom:-2.2rem!important}
.cg-gluurder img{max-width:150px;margin-left:auto;margin-right:.5rem}
@media (max-width:781px){.cg-gluurder img{margin-inline:auto}.cg-memo{max-width:340px;margin-inline:auto!important}}

/* Merken */
.cg-merken.wp-block-group{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.6rem 1.8rem}
.cg-merken > *{margin:0!important}
.cg-merk img{height:58px!important;width:auto!important;max-width:190px;object-fit:contain;display:block;transition:transform .15s}
.cg-merk a:hover img{transform:translateY(-3px)}
@media (max-width:640px){.cg-merk img{height:48px!important;max-width:150px}}

/* Polaroid */
.cg-polaroid{background:#fff;padding:.7rem .7rem 0;box-shadow:0 10px 22px rgba(29,29,27,.15);transform:rotate(3deg);max-width:320px;margin-inline:auto!important}
.cg-polaroid img{display:block;width:100%}
.cg-polaroid figcaption{font-family:var(--wp--preset--font-family--hand);font-size:1.15rem;text-align:center;color:var(--wp--preset--color--inkt);margin:.45rem 0 .6rem}

/* Contactrij */
.cg-winkel img{max-width:280px;margin-inline:auto}

/* ---------- Voettekst ---------- */
.cg-footer{border-top:2px dashed #cfcac0;padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--40);margin-top:var(--wp--preset--spacing--50)}
.cg-footer-rij{gap:2rem!important}
.cg-stempel img{max-width:180px;transform:rotate(-7deg);margin-inline:auto;display:block}
.cg-footer-midden{text-align:center;border-inline:1px solid var(--cg-lijn);padding-inline:1rem}
.cg-footer-logo img{height:58px!important;width:auto!important;margin-inline:auto;display:block}
.cg-footer-midden .cg-hand{margin-top:.3rem!important}
.cg-vakmanschap{text-align:center;font-size:1.2rem}
.cg-vlaghart{width:30px;height:auto;vertical-align:middle;margin-left:.3rem;display:inline-block}
.cg-copyright{text-align:center;color:var(--wp--preset--color--grijs);margin-top:var(--wp--preset--spacing--40)!important}
.cg-copyright a{color:inherit}
@media (max-width:781px){.cg-footer-midden{border-inline:0;border-block:1px solid var(--cg-lijn);padding:1.2rem 0}}

/* Editor: stippellijn om groepen die op de site geen rand hebben is niet nodig. */
.cg-header-knop .wp-block-button__link{white-space:nowrap}