/*
Theme Name: ALGRA Webdesign
Theme URI: https://www.algrawebdesign.nl/
Description: Child theme van Hello Elementor voor CNCtoday, gebouwd door ALGRA Webdesign.
Author: ALGRA Webdesign
Author URI: https://www.algrawebdesign.nl/
Template: hello-elementor
Version: 1.0.0
Text Domain: algra-webdesign
*/

/* ==========================================================
   CNCtoday – aanvullingen op de Elementor-huisstijl
   Kleuren en lettertypes staan in Elementor > Site-instellingen.
   Hier staan alleen kleine hulpklassen die je in Elementor
   via Geavanceerd > CSS-klassen kunt gebruiken.
   ========================================================== */

:root{
  --cnc-geel: var(--e-global-color-secondary, #F0E850);
  --cnc-oranje: var(--e-global-color-accent, #EC6707);
  --cnc-grijs: var(--e-global-color-primary, #383837);
  --cnc-donker: #2B2B2A;
}

body{ -webkit-font-smoothing: antialiased; }

/* Lichte variant van Archivo binnen een kop: <span class="cnc-light">Van plaat.</span> */
.cnc-light{ font-weight: 200 !important; }
.cnc-block{ display: block; }

/* Knopvarianten (CSS-klasse op de knop-widget) */
.cnc-btn-line .elementor-button{
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.45) !important;
}
.cnc-btn-line .elementor-button:hover{ border-color: var(--cnc-geel) !important; color: var(--cnc-geel) !important; }
.cnc-btn-dark .elementor-button{ background: var(--cnc-grijs) !important; color: #fff !important; }
.cnc-btn-dark .elementor-button:hover{ background: var(--cnc-donker) !important; color: var(--cnc-geel) !important; }
.cnc-btn-small .elementor-button{ padding: 12px 20px !important; }
.elementor-button .elementor-button-icon svg{ width: 1em; }

/* Tekstlink met oranje onderstreping */
.cnc-more a, a.cnc-more{
  display: inline-block; padding-bottom: 6px; border-bottom: 2px solid var(--cnc-oranje);
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: inherit; transition: color .2s;
}
.cnc-more a:hover, a.cnc-more:hover{ color: var(--cnc-oranje); }

/* Kaarten met gele rand bij hover */
.cnc-card{ border: 2px solid transparent; transition: border-color .2s, transform .2s; }
.cnc-card:hover{ border-color: var(--cnc-geel); }

/* Labels */
.cnc-tag .elementor-heading-title{
  display: inline-block; padding: 6px 10px; line-height: 1.2;
}

/* Lijst met bolletjes in tekst */
.elementor-widget-text-editor ul{ margin: 0; padding-left: 1.1em; }
.elementor-widget-text-editor li{ margin: .2em 0; }

/* Formulieren */
.elementor-form .elementor-field-group .elementor-field:focus{
  outline: none; box-shadow: 0 0 0 3px rgba(240,232,80,.9);
}
.elementor-form .e-form__indicators__indicator__number{ font-family: "Archivo", sans-serif; }

/* Toegankelijkheid */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .elementor-invisible{ visibility: visible !important; }
}
/* Doorlopende band (HTML-widget op de homepage) */
.cnc-band{ overflow: hidden; color: #2B2B2A; }
.cnc-band__track{ display: flex; width: max-content; animation: cnc-band 45s linear infinite; }
.cnc-band__set{ display: flex; flex-shrink: 0; }
.cnc-band__set span{ font-family: "Archivo", sans-serif; font-weight: 800; font-size: 20px; line-height: 1; text-transform: uppercase; padding: 24px 22px; white-space: nowrap; }
.cnc-band:hover .cnc-band__track{ animation-play-state: paused; }
@keyframes cnc-band{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .cnc-band__track{ animation: none; } }

/* Labels naast nummers */
.cnc-tag{ flex-shrink: 0; }
.cnc-tag .elementor-heading-title{ white-space: nowrap; }

/* Links in tekst */
.elementor-widget-text-editor a:not(.cnc-more){ color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.elementor-widget-text-editor a:not(.cnc-more):hover{ color: var(--cnc-oranje); }
.elementor-widget-heading .elementor-heading-title a:hover{ color: var(--cnc-oranje); }
.cnc-footer .elementor-widget-text-editor a{ text-decoration: none; }
.cnc-footer a:hover{ color: var(--cnc-geel) !important; }
a.cnc-card, a.e-con.cnc-card{ color: inherit; text-decoration: none; }

/* Plaatsaanduidingen voor foto/video */
.elementor-widget-image img[src*="foto-volgt"], .elementor-widget-image img[src*="video-volgt"]{ width: 100%; height: auto; }

/* FAQ: tabbladen */
.cnc-tabs .e-n-tabs-heading{ border-bottom: 1px solid #DAD9D3; column-gap: 28px; }
.cnc-tabs .e-n-tab-title{ padding: 14px 0 !important; border: 0 !important; border-bottom: 3px solid transparent !important; margin-bottom: -1px; background: transparent !important; }
.cnc-tabs .e-n-tab-title[aria-selected="true"]{ border-bottom-color: var(--cnc-oranje) !important; }

/* FAQ: vragen */
.cnc-faq .elementor-accordion-item{ border: 0 !important; border-bottom: 1px solid #DAD9D3 !important; }
.cnc-faq .elementor-tab-title, .cnc-faq .elementor-tab-content{ border: 0 !important; }
.cnc-faq .elementor-accordion-icon{ font-size: 18px; }
/* Nummer + label naast elkaar niet laten krimpen */
.e-con:has(> .cnc-tag) > .elementor-widget{ flex-shrink: 0; }

/* Stappen van het offerteformulier op mobiel */
@media (max-width: 767px){
  .elementor-form .e-form__indicators{ gap: 6px; }
  .elementor-form .e-form__indicators__indicator{ flex: 1 1 0; min-width: 0; }
  .elementor-form .e-form__indicators__indicator__label{ font-size: 11px !important; letter-spacing: .5px !important; overflow-wrap: anywhere; }
  .elementor-form .e-form__indicators__indicator__separator{ display: none; }
}