/*
Theme Name: Achterhoek Ambassadeurs
Theme URI: https://webally.nl/
Description: Child theme van Kadence voor Achterhoek Ambassadeurs (voorheen 8RHK). Huisstijl en templates; functionaliteit staat in de plugin awp-achterhoekambassadeurs.
Author: WebAlly B.V.
Author URI: https://webally.nl/
Template: kadence
Version: 1.0.0
Text Domain: awp-achterhoekambassadeurs-child
*/

/*
 * Kleuren, lettertypes en knopinstellingen staan als Kadence-standaarden in
 * inc/palette.php en inc/kadence-defaults.php. Hier alleen wat die
 * instellingen niet afdekken, zoals de vormentaal uit de huisstijl.
 */

:root {
	/* Huisstijlkleuren die niet meer in het Kadence-palet pasten. */
	--aa-kiezel: #D6CAA0;
	--aa-eikenblad: #9FA051;

	/*
	 * De vormen uit de huisstijl (--aa-vorm-zeshoek en --aa-vorm-badge) staan
	 * in inc/patronen.php: een url in een variabele blijft relatief aan het
	 * bestand, en die vormen worden ook vanuit assets/css gebruikt.
	 */
}

/* ==========================================================================
   Knoppen
   ==========================================================================
   Afgeronde uiteinden in plaats van de punten uit de mockups (wens van de
   opdrachtgever). Dezelfde ronding staat in Kadence (buttons_border_radius);
   hier voor de knoppen die Kadence niet opmaakt, zoals die van Gravity Forms.
   ========================================================================== */

.button,
.wp-block-button__link,
.wp-element-button,
.kb-button,
input[type="submit"],
button[type="submit"],
.gform_button {
	border-radius: 25px;
}

/*
 * Kadence-knoppen met de algemene stijl ("fill") krijgen van Kadence Blocks
 * eigen maten (3px hoeken, kleinere binnenruimte) in een stylesheet die later
 * laadt. Hier dezelfde maten als de andere knoppen (buttons_padding en
 * buttons_typography in inc/kadence-defaults.php).
 */
.wp-block-kadence-advancedbtn .kb-button.kb-btn-global-fill {
	padding: 14px 36px 10px;
	border-radius: 25px;
	font-size: 1.1875rem;
	line-height: 1.2;
}

/*
 * Contrast (WCAG 1.4.3): wit op Ambassadeursrood, en Ambassadeursrood op wit,
 * is 4,07:1. Dat is genoeg voor grote tekst (vanaf 19px vet), niet voor
 * gewone. Daarom zijn knoppen 19px vet, ook die van Gravity Forms en Brevo
 * (die zetten hun eigen lettergrootte). De contrastmodus (zwart-wit) is de
 * volledig passende variant.
 */
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform_page_footer .gform_button,
.aa-nieuwsbrief .sib-default-btn {
	font-size: 1.1875rem;
	line-height: 1.2;
}

/*
 * Tekstlinks in lopende tekst: vet en onderstreept, zodat ze niet alleen op
 * kleur (Ambassadeursrood) te herkennen zijn en beter opvallen. Knoppen,
 * kaarten en tegels hebben hun eigen opmaak.
 */
/*
 * Alleen links in tekst: in een alinea, cel of bijschrift, of direct in een
 * lijstitem (niet de titels van kaarten en tegels, die ook in een lijst
 * staan). Links met een eigen onderdeel (aa-*) en knoppen doen niet mee.
 */
:is(.entry-content, .project-page, .aa-detail) :is(p:not(.aa-cta__tekst), dd, td, figcaption, .gfield, li > :is(strong, em), li) > a:not([class*="button"]):not([class*="btn"]):not([class*="aa-"]),
:is(.entry-content, .project-page, .aa-detail) :is(p, dd, td, figcaption, .gfield) :is(strong, em, span) > a:not([class*="button"]):not([class*="btn"]):not([class*="aa-"]) {
	font-weight: 700;
	text-decoration: underline;
}

/* In de contrastmodus staat de streep er meteen onder, niet pas bij hover. */
.color-switch-dark :is(
	.button:not(.kb-btn-global-outline),
	.wp-block-button__link,
	.wp-element-button,
	.kb-button.kb-btn-global-fill,
	input[type="submit"],
	button[type="submit"],
	.gform_button
) {
	text-decoration: underline;
}

/* Onderstreping bij hover en focus, net als bij links in het menu. */
.button:not(.kb-btn-global-outline):hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.kb-button.kb-btn-global-fill:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.gform_button:hover,
.button:not(.kb-btn-global-outline):focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
.kb-button.kb-btn-global-fill:focus-visible,
input[type="submit"]:focus-visible,
button[type="submit"]:focus-visible,
.gform_button:focus-visible {
	text-decoration: underline;
}

/*
 * De focusrand binnen de knop: wit op Ambassadeursrood (5,2:1) blijft ook op
 * een lichte achtergrond zichtbaar. De rand volgt de ronding.
 */
.button:not(.kb-btn-global-outline):focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
.kb-button.kb-btn-global-fill:focus-visible,
input[type="submit"]:focus-visible,
button[type="submit"]:focus-visible,
.gform_button:focus-visible {
	outline: 2px solid var(--global-palette9);
	outline-offset: -4px;
}

/* ==========================================================================
   Badge
   ==========================================================================
   Zeshoek in Bos met een witte binnenrand en tekst in Freudian One, licht
   gedraaid (mockups: "Meld je idee aan", "Kom maar op!").
   Markup: <div class="aa-badge"><span>Tekst</span></div>
   ========================================================================== */

.aa-badge {
	--aa-badge-kleur: var(--global-palette11);
	position: relative;
	display: grid;
	place-items: center;
	width: 8.5rem;
	aspect-ratio: 911 / 921;
	background: var(--aa-badge-kleur) var(--aa-vorm-badge-rand) center / 100% 100% no-repeat;

	/*
	 * Een masker knipt alleen de weergave, niet de muis: zonder clip-path
	 * blijven de doorzichtige hoeken van het vak klikbaar. Deze zeshoek ligt
	 * er net buiten, dus aan de vorm zelf verandert niets.
	 */
	clip-path: polygon(56.5% -2.6%, 98.8% 29.3%, 92.3% 81.9%, 43.5% 102.6%, 1.2% 70.7%, 7.7% 18.1%);
	-webkit-mask: var(--aa-vorm-badge) center / 100% 100% no-repeat;
	mask: var(--aa-vorm-badge) center / 100% 100% no-repeat;
	color: var(--global-palette9);
	font-family: "Freudian One", "Arial Narrow", Arial, sans-serif;
	font-size: 1.75rem;
	line-height: 0.95;
	text-align: center;
	text-transform: uppercase;
}

/* Als link: geen streep, en dezelfde kleuren bij hover en focus als een knop. */
a.aa-badge {
	text-decoration: none;
}

a.aa-badge:hover {
	--aa-badge-kleur: var(--global-palette1);
}

/* Een focusrand zou de vorm wegsnijden; bij focus wordt de badge donker. */
a.aa-badge:focus-visible {
	--aa-badge-kleur: var(--global-palette3);

	outline: none;
}

/*
 * De vorm staat in de tekening al schuin; alleen de tekst draait mee. De
 * letters staan hoog in de regel, dus een zetje omlaag om ze optisch in het
 * midden van de vorm te krijgen.
 */
.aa-badge > span {
	max-width: 4.5ch;
	/* Op de span, anders kleurt de badge als link mee met de linkhoverkleur. */
	color: var(--global-palette9);
	translate: 0 0.22em;
	rotate: 7deg;
}

/* ==========================================================================
   Inhoudsvlakken
   ========================================================================== */

/*
 * Kadence zet in zijn eigen stylesheet een schaduw onder .entry (het witte
 * vlak om de inhoud). Die past niet in het ontwerp; de vlakken staan op een
 * effen achtergrond. De schaduw uit de instellingen (boxed_shadow en
 * boxed_grid_shadow) staat uit in inc/kadence-defaults.php.
 */
/* Met .site ervoor, want de stylesheet van Kadence laadt na deze. */
.site .entry {
	box-shadow: none;
}

/* ==========================================================================
   Header
   ========================================================================== */

/*
 * Drie onderdelen met gelijke ruimte ertussen: logo, menu en de iconen
 * (contrast en zoeken). Het logo en het menu staan bij Kadence samen in de
 * linkerkolom; met display: contents doen ze mee in de rij zelf, die de
 * ruimte dan gelijk verdeelt. De gap is het minimum als het krap wordt.
 */
@media (min-width: 1025px) {
	#main-header .site-main-header-inner-wrap.site-header-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2.5rem;
	}

	#main-header .site-header-main-section-left {
		display: contents;
	}

	#main-header .site-header-main-section-left > .site-header-item {
		margin-right: 0;
	}

	/*
	 * Het contrasticoon heeft 0,4rem binnenruimte in zijn knop; zonder deze
	 * correctie oogt de ruimte voor de iconen groter dan die na het logo.
	 */
	#main-header .site-header-main-section-right {
		margin-inline-start: -0.4rem;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

/*
 * Kolombreedtes zoals in de mockup (omgerekend naar de contentbreedte): het
 * logo 266px, Thematafels breed genoeg voor "Circulaire Economie &
 * Energietransitie" op één regel. Met de layoutklasse erbij, anders wint
 * Kadence's eigen verdeling (5x 1fr).
 */
@media (min-width: 1025px) {
	.site-middle-footer-inner-wrap.site-footer-row-columns-5.site-footer-row-column-layout-equal {
		grid-template-columns: 2.66fr 1.3fr 3fr 1.35fr 1.93fr;
		column-gap: 2rem;
	}
}

/* Iets kleiner dan in de hero (mockup). */
.site-footer .aa-badge {
	width: 7.6rem;
	margin-inline: auto;
}

/* Menulijsten in de footer: geen opsommingstekens, regels dicht op elkaar. */
.site-middle-footer-wrap .widget_nav_menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-middle-footer-wrap .widget_nav_menu li {
	margin-block-end: 0.1em;
}

/*
 * Kadence zet de regelhoogte (1,8) en wat binnenruimte op de link; in de
 * footer staan de regels dichter op elkaar (mockup: ~24px per regel).
 */
.site-middle-footer-wrap .widget_nav_menu li a {
	padding-block: 0;
	line-height: 1.4;
}

/* Oranje balk: "Volg ons op:" voor de knoppen, zeshoekige witte knoppen. */
.site-bottom-footer-wrap .footer-social-inner-wrap {
	align-items: center;
}

.site-bottom-footer-wrap .footer-social-inner-wrap::before {
	content: "Volg ons op:";
	margin-inline-end: 0.5em;
	color: var(--global-palette9);
	font-weight: 700;
}

.site-bottom-footer-wrap .social-button {
	-webkit-mask: var(--aa-vorm-zeshoek-liggend) center / 100% 100% no-repeat;
	mask: var(--aa-vorm-zeshoek-liggend) center / 100% 100% no-repeat;
}

/*
 * Bij toetsenbordfocus dezelfde omkering als bij hover (Avondblauw vlak, wit
 * icoon). De hover zelf komt uit de theme-instellingen; Kadence schrijft die
 * met een lange selector weg, vandaar dat deze even lang is.
 */
.site-footer .site-footer-wrap .site-footer-section .footer-social-wrap .footer-social-inner-wrap .social-button:focus-visible {
	background: var(--global-palette12);
	color: var(--global-palette9);
}

/* Focusrand binnen de zeshoek (zie Knoppen); wit, want het vlak is dan donker. */
.site-bottom-footer-wrap .social-button:focus-visible {
	outline: 2px solid var(--global-palette9);
	outline-offset: -4px;
}

/* Onderstreping bij hover, zodat een link in de footer duidelijk aanwijst. */
.site-footer a:not(.social-button):not(.brand):hover,
.site-footer a:not(.social-button):not(.brand):focus-visible {
	text-decoration: underline;
}

/* Het logo in de footer, net als in de header (shortcode van awp-kadence). */
.site-footer .logo-wrapper .logo-image {
	display: block;
	width: 266px;
	max-width: 100%;
	height: auto;
}

.site-footer .logo-wrapper .brand:focus-visible {
	outline: 3px solid var(--global-palette3);
	outline-offset: 4px;
}