/* ==========================================================================
   AccountantsGilde — custom CSS bij de WPBakery/Betheme shortcodes
   Plak dit blok in: Betheme > Options > Custom CSS (of child theme style.css)
   ========================================================================== */

:root{
	--ag-navy: #01426A;
	--ag-navy-hover: #5387B1;
	--ag-lime: #ABC230;
	--ag-lime-hover: #C5E139;
	--ag-bg-light: #F4F5F7;
	--ag-text: #164C73;
	--ag-light: #FFFFFF;
}

#Footer .footer_copy .copyright {
    width: stretch;
}

#Top_bar.is-sticky {
    height: 70px !important;
    opacity: 1 !important; 
    background-color: 555 !important;
}
#Top_bar.is-sticky #logo img.logo-sticky {
    max-height: 55px !important;
    width: auto;
}

.inline {
    display: inline !important;
    margin-right: 15px;
}

@media (max-width: 540px) {
    .inline {
        display: block !important;   
    }
}

.vc_btn3.vc_btn3-size-md {
    font-size: 16px !important;
}
.vc_btn3.vc_btn3-shape-rounded {
    border-radius: 2px !important;
}

.ag-hero-img {
  --hoogte: 70px;
  clip-path: polygon(
        0 100%,
        100% 100%,
        100% 0,
        55% 0,
        calc(55% - var(--hoogte)) var(--hoogte),
        0 var(--hoogte)
    );
}

@media (max-width: 960px) {
    .ag-hero-img {
        --hoogte: 50px;
        clip-path: polygon(
            0 100%,
            100% 100%,
            100% 0,
            75% 0,
            calc(75% - var(--hoogte)) var(--hoogte),
            0 var(--hoogte)
        );
        margin-top:30px;
    }
}


.section-padding {
    padding: 60px 0px;
}

/* Volle knoppen */
.ag-btn-navy .vc_general{ 
    background-color: var(--ag-navy) !important; 
    color: var(--ag-light) !important;
    transition: background-color .2s ease !important;
}
.ag-btn-navy .vc_general:hover {
    background-color: var(--ag-navy-hover) !important; 
}
.ag-btn-lime .vc_general{ 
    background-color: var(--ag-lime) !important; 
    border-color: var(--ag-lime) !important; 
    color: var(--ag-navy) !important; 
    transition: background-color .2s ease !important; 
}
.ag-btn-lime .vc_general:hover{ 
    background-color: var(--ag-lime-hover) !important; 
    border-color: var(--ag-lime-hover) !important; 
}

/* Outline-knop (bv. "Bekijk alle klantverhalen") — vult zich bij hover, net als in het Figma-prototype */
.ag-btn-outline .vc_general{
	background: transparent !important;
	border: 2px solid var(--ag-navy) !important;
	color: var(--ag-navy) !important;
	transition: background-color .2s ease, color .2s ease !important;
}
.ag-btn-outline .vc_general:hover{
	background: var(--ag-navy) !important;
	color: #fff !important;
}

/* Platte tekstlink i.p.v. Betheme's grijze "link"-knopstijl
   (bv. "Maak kennis met ons team", "Bekijk onze diensten", "Groei & Ontwikkeling").
   Bij hover verandert de tekst NIET van kleur — in plaats daarvan groeit er
   een onderrand vanaf links naar de volle breedte van de knop (kleur
   --ag-navy-hover), zoals in het Figma-prototype. */

.vc_btn3.vc_btn3-size-md.vc_btn3-icon-right:not(.vc_btn3-o-empty) .vc_btn3-icon {
    right: 0px;
}
.ag-link-plain .vc_general{
	position: relative !important;
	display: inline-block !important;
	background: none !important;
	border: none !important;
	padding: 0px 15px 0px 0px !important;
	padding-bottom: 4px !important;
	color: var(--ag-navy) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	box-shadow: none !important;
}
.ag-link-plain .vc_general::after{
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	bottom: 0 !important;
	width: 0 !important;
	height: 2px !important;
	background-color: var(--ag-navy-hover) !important;
	transition: width .2s ease !important;
}
.ag-link-plain .vc_general:hover{
	background: none !important;
	color: var(--ag-navy) !important;
	text-decoration: none !important;
}
.ag-link-plain .vc_general:hover::after{
	width: 100% !important;
}

/* Zelfde, maar witte tekst (op een donkere achtergrond, bv. de vacature-CTA-kolom).
   De onderrand gebruikt hier --ag-lime-hover, zodat hij zichtbaar blijft op navy. */
.ag-link-plain-white .vc_general{
	position: relative !important;
	display: inline-block !important;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
	padding-bottom: 4px !important;
	color: #fff !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	box-shadow: none !important;
}
.ag-link-plain-white .vc_general::after{
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	bottom: 0 !important;
	width: 0 !important;
	height: 2px !important;
	background-color: var(--ag-lime-hover) !important;
	transition: width .2s ease !important;
}
.ag-link-plain-white .vc_general:hover{
	background: none !important;
	color: #fff !important;
	text-decoration: none !important;
}
.ag-link-plain-white .vc_general:hover::after{
	width: 100% !important;
}

/* Quote (testimonial) */
.ag-quote-text p{
	font-size: 24px !important;
	line-height: 1.4 !important;
	color: var(--ag-navy) !important;
	font-style: italic !important;
}
.ag-quote-author p{ color: var(--ag-text) !important; }

/* Kleinere quote-variant, voor kaarten in een grid (bv. klantverhalen-overzicht) */
.ag-quote-text-sm p{
	font-size: 17px !important;
	line-height: 1.4 !important;
	color: var(--ag-navy) !important;
	font-style: italic !important;
}

/* Hero-afbeelding: vult de kolom, schuine hoek linksboven zoals in het Figma-ontwerp */
.ag-hero-img img{
	width: 100% !important;
	height: 100% !important;
	min-height: 420px !important;
	object-fit: cover !important;
	clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 0 18%) !important;
}
@media (max-width: 767px){
	.ag-hero-img img{ min-height: 260px !important; clip-path: none !important; }
}

/* Trustbar */
.ag-trustbar-label p{
	font-size: 13px !important;
	color: var(--ag-text) !important;
	line-height: 1.3 !important;
}

.ag-trustbar-logos .wpb_wrapper {
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    padding-top: 13px;
}

/* ---------------------------------------------------------------------
   Team diamant-fotorooster
   --------------------------------------------------------------------- */
.ag-team-grid{
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
	padding: 40px 0 !important;
}
.ag-diamond{
	width: 140px !important;
	height: 140px !important;
	overflow: hidden !important;
	transform: rotate(45deg) !important;
	background: var(--ag-lime) !important;
}
.ag-diamond--navy{ background: var(--ag-navy) !important; }
.ag-diamond--lg{ width: 200px !important; height: 200px !important; }
.ag-diamond--sm{ width: 80px !important; height: 80px !important; }
.ag-diamond img{
	width: 141% !important;
	height: 141% !important;
	max-width: 141% !important;
	object-fit: cover !important;
	transform: rotate(-45deg) translate(-15%, -15%) !important;
}

@media (max-width: 767px){
	.ag-diamond{ width: 90px !important; height: 90px !important; }
	.ag-diamond--lg{ width: 120px !important; height: 120px !important; }
	.ag-diamond--sm{ width: 50px !important; height: 50px !important; }
}

/* Losse diamant-foto (bv. op de dienst-detailpagina's) */
.ag-diamond-single img{
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important;
	object-fit: cover !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
}

/* ---------------------------------------------------------------------
   Hover-effecten, overgenomen uit het interactieve Figma-prototype
   (https://www.figma.com/proto/.../Accountantsgilde):
   - lichtgrijze kaarten krijgen een lichtblauwe tint
   - de donkere vacature-CTA-kolom licht op (zelfde gedrag als de knoppen)
   Voeg deze class-namen toe aan het `css`-attribuut van de kolommen die dit
   gedrag moeten krijgen (staat al zo in de meegeleverde shortcode-bestanden).
   --------------------------------------------------------------------- */
.vc_custom_rel1, .vc_custom_rel2, .vc_custom_rel3, .vc_custom_rel4,
.vc_custom_job1, .vc_custom_job2,
.vc_custom_wbjob1, .vc_custom_wbjob2, .vc_custom_wbjob3, .vc_custom_wbjob4, .vc_custom_wbjob5, .vc_custom_wbjob6,
.vc_custom_kvquote1, .vc_custom_kvquote2, .vc_custom_kvquote3{
	transition: background-color .2s ease !important;
}
.vc_custom_rel1:hover, .vc_custom_rel2:hover, .vc_custom_rel3:hover, .vc_custom_rel4:hover,
.vc_custom_job1:hover, .vc_custom_job2:hover,
.vc_custom_wbjob1:hover, .vc_custom_wbjob2:hover, .vc_custom_wbjob3:hover, .vc_custom_wbjob4:hover, .vc_custom_wbjob5:hover, .vc_custom_wbjob6:hover,
.vc_custom_kvquote1:hover, .vc_custom_kvquote2:hover, .vc_custom_kvquote3:hover{
	background-color: rgba(83, 135, 177, 0.12) !important; /* --ag-navy-hover als lichte tint */
}

.vc_custom_job3{ transition: background-color .2s ease !important; }
.vc_custom_job3:hover{ background-color: var(--ag-navy-hover) !important; }