/*
Theme Name: Cabo Verde Music Agency
Theme URI: https://caboverdemusicagency.com
Description: Huisstijl van Cabo Verde Music Agency, als childthema op Twenty Twenty-Five.
Author: FlexiBelle
Template: twentytwentyfive
Version: 1.0
Text Domain: cvma
*/

/* ---- Hulpklassen. Zet deze namen op een blok via Geavanceerd, extra CSS-klasse ---- */

/* Het kleine oranje opschrift boven een kop */
.eyebrow{
	font-family: Inter, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber);
	line-height: 1.4;
}

/* Het korte rode streepje onder een kop. Altijd links, nooit gecentreerd.
   WordPress centreert streepjes zelf met een zware regel, dus die overschrijven we hier hard. */
.wp-block-separator.rule,
.wp-block-separator.rule:not(.is-style-wide):not(.is-style-dots){
	width: 64px !important;
	max-width: 64px !important;
	height: 4px;
	background: var(--wp--preset--color--ember);
	border: 0;
	opacity: 1;
	margin-top: 18px !important;
	margin-bottom: 18px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}
.wp-block-separator.rule-kort,
.wp-block-separator.rule-kort:not(.is-style-wide):not(.is-style-dots){
	width: 40px !important;
	max-width: 40px !important;
	height: 3px;
}

/* Dunne scheidingslijn boven een sectie */
.sectie{ border-top: 1px solid var(--wp--preset--color--lijn); }

/* Donker kader, voor het blok Do you belong here */
.paneel{
	border: 1px solid #3A2A1E;
	background: var(--wp--preset--color--paneel);
}

/* Lichte sectie, voor Why this music */
.licht{ color: var(--wp--preset--color--umber); }
.licht h1, .licht h2, .licht h3{ color: var(--wp--preset--color--nocturne); }
.licht .eyebrow{ color: var(--wp--preset--color--ember); }

/* Bronvermelding onder een tekst */
.bron{ font-size: 14px; font-style: italic; color: #7A5A3A; line-height: 1.6; }

/* Tekstlink in kleinkapitaal, zoals Get in touch -> */
.pijllink a{
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* ---- Menu in de header en de footer ---- */
.menu p{ margin:0; font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.menu p a{ color: var(--wp--preset--color--shell); }
.menu p a:hover{ color: var(--wp--preset--color--amber); }
.menu-knop a{ border:1px solid var(--wp--preset--color--ember); padding:10px 20px; display:inline-block; }
.menu-knop a:hover{ background: var(--wp--preset--color--ember); color: var(--wp--preset--color--shell); }

/* ---- Mobiel. WordPress stapelt kolommen zelf onder 782 px; hier zetten we de rest recht. ---- */
@media (max-width: 781px){

	/* menu in de header compacter, zodat het niet over drie regels valt */
	.menu{ gap: 10px 14px !important; }
	.menu p{ font-size: 11.5px; letter-spacing: .1em; }
	.menu-knop a{ padding: 7px 12px; }

	/* de schelp boven de kop in de hero, net als in het ontwerp */
	.hero .wp-block-columns > .wp-block-column:last-child{ order: -1; }
	.hero .wp-block-columns > .wp-block-column:last-child img{ max-width: 260px; }

	/* het donkere kader krapper */
	.paneel{ padding: 28px 22px !important; }

	/* streepje iets korter */
	.wp-block-separator.rule{ width: 52px !important; max-width: 52px !important; height: 3px; }

	/* de schelp bij Services klein en netjes binnen de marge */
	.schelp-services{ float: none !important; margin: 0 0 0 auto !important; }
	.schelp-services img{ width: 100px !important; }

	/* de schelp in de hero klein genoeg dat de kop meteen in beeld staat */
	.hero .wp-block-columns > .wp-block-column:last-child img{ max-width: 150px !important; margin-inline: auto; }
	.hero .wp-block-columns{ gap: 8px; }
	.hero .wp-block-columns > .wp-block-column:last-child{ margin-bottom: 4px; }

	/* kolommen die stapelen hoeven niet de volle sectie-afstand ertussen */
	.wp-block-columns.is-layout-flex{ gap: 26px; }
	.paneel .wp-block-columns.is-layout-flex{ gap: 14px; }
}

@media (max-width: 560px){
	/* de naam naast het logo past anders niet naast het menu */
	.header-naam{ font-size: 11px !important; letter-spacing: .14em !important; }
}

/* ---- Horizontaal scrollen voorkomen ----
   Oorzaak: afbeeldingen met een vaste breedte zijn op een telefoon breder dan het scherm.
   Daardoor wordt de hele pagina breder dan het scherm en schuift alles naar links. */
html, body{ overflow-x: clip; max-width: 100%; }
img, svg, video{ max-width: 100%; height: auto; }
.wp-block-image img,
.wp-block-image.is-resized img{ max-width: 100% !important; height: auto !important; }

/* ---- Contactformulier (Fluent Forms) in de huisstijl ---- */
.fluentform .ff-el-group{ margin-bottom: 22px; }

.fluentform .ff-el-input--label label{
	font-family: Inter, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber);
	margin-bottom: 8px;
}
.fluentform .ff-el-is-required.asterisk-right label:after{ color: var(--wp--preset--color--ember); }

.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform textarea,
.fluentform .ff-el-form-control{
	background: #150F0C;
	border: 1px solid #2E241C;
	border-radius: 0;
	color: var(--wp--preset--color--shell);
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	padding: 0 16px;
	height: 52px;
	box-shadow: none;
}
.fluentform textarea,
.fluentform textarea.ff-el-form-control{
	height: auto;
	min-height: 150px;
	padding: 14px 16px;
	resize: vertical;
}
.fluentform .ff-el-form-control::placeholder{ color: #6E5A42; }
.fluentform .ff-el-form-control:focus{
	border-color: var(--wp--preset--color--ember);
	outline: none;
	box-shadow: none;
}

.fluentform .ff-btn-submit,
.fluentform .ff_submit_btn_wrapper button{
	background: var(--wp--preset--color--ember) !important;
	color: var(--wp--preset--color--shell) !important;
	border: 0;
	border-radius: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: 18px 44px;
	cursor: pointer;
}
.fluentform .ff-btn-submit:hover{
	background: var(--wp--preset--color--amber) !important;
	color: var(--wp--preset--color--nocturne) !important;
}

/* meldingen na verzenden */
.fluentform .ff-el-is-error .text-danger,
.fluentform .error{ color: var(--wp--preset--color--ember); font-size: 14px; }
.ff-message-success{
	border: 1px solid #3A2A1E;
	background: var(--wp--preset--color--paneel);
	color: var(--wp--preset--color--zand);
	padding: 22px;
}

/* ---- WhatsApp-icoon ----
   Hangt aan elke link naar wa.me, dus ook aan knoppen die later worden toegevoegd. */
a[href*="wa.me"]{
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
a[href*="wa.me"]::before{
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: url(assets/images/whatsapp.png) center / contain no-repeat;
}