/*
Theme Name:   Achterhoekai
Theme URI:    https://achterhoek.ai
Description:  Child theme van Twenty Twenty-Five voor achterhoek.ai
Author:       Carlien Laarman
Author URI:   https://achterhoek.ai
Template:     twentytwentyfive
Version:      1.0.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  achterhoekai
*/

/* ==============================================
   ACHTERHOEK.AI — Custom CSS
   Beheerd via: Aangepaste CSS & JS plugin
   ============================================== */

/* --- CSS Custom Properties --- */
:root {
    --ah-gradient:   linear-gradient(90deg, #BBC3FF, #DEE0FF, #FFB2BE);
    --ah-zwart:      #111111;
    --ah-wit:        #FFFFFF;
    --ah-lavendel:   #BBC3FF;
    --ah-roze:       #FFB2BE;
    --ah-licht:      #F7F7FF;
    --ah-font:       'Plus Jakarta Sans', sans-serif;
}

/* --- Achtergrond --- */
body { background: #111; }

/* --- Typografie --- */
body, body *, input, textarea, select, button {
    font-family: var(--ah-font) !important;
}

/* Gradient op H1 t/m H3 — display:block zodat text-align:center werkt */
h1, h2, h3,
.wp-block-heading,
.wp-block-post-title,
.entry-title {
    font-family: var(--ah-font) !important;
    color: var(--ah-wit);
    background: var(--ah-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

/* H4–H6: wit, geen gradient */
h4, h5, h6 {
    font-family: var(--ah-font) !important;
    color: var(--ah-wit);
    -webkit-text-fill-color: var(--ah-wit);
}

/* Gradient-overschrijving voorkomen bij geneste elementen */
.wp-block-heading *, h1 *, h2 *, h3 * {
    -webkit-text-fill-color: inherit;
}

/* --- Links --- */
a { color: var(--ah-lavendel); text-decoration-color: var(--ah-lavendel); transition: color 0.2s; }
a:hover { color: var(--ah-roze); text-decoration-color: var(--ah-roze); }

/* --- Knoppen --- */
.wp-block-button__link,
.wp-element-button {
    font-family: var(--ah-font) !important;
    font-weight: 600;
    border-radius: 6px !important;
    transition: opacity 0.2s;
}
.gradient-knop .wp-block-button__link {
    background: var(--ah-gradient) !important;
    color: var(--ah-zwart) !important;
    -webkit-text-fill-color: var(--ah-zwart) !important;
}

/* --- Brevo formulier styling --- */
.sib-form, .sib-form-block {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.sib-email-area input[type="email"], .sib-FIRSTNAME-area input[type="text"] {
    width: 100%;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(168,85,247,0.3) !important;
    border-radius: 0.75rem !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.9rem !important;
    color: #fff !important;
    font-family: var(--ah-font) !important;
    box-sizing: border-box !important;
}
.sib-email-area input[type="email"]::placeholder { color: rgba(255,255,255,0.4) !important; }
.sib-email-area input[type="email"]:focus {
    outline: 2px solid #a855f7 !important;
    outline-offset: -2px !important;
    background: rgba(255,255,255,0.12) !important;
}
input.sib-default-btn,
input[type="submit"].sib-default-btn {
    width: 100%;
    margin-top: 0.75rem !important;
    padding: 0.875rem 1.5rem !important;
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    font-family: var(--ah-font) !important;
    transition: opacity 0.2s !important;
    border: none !important;
    border-radius: 0.75rem !important;
}
input.sib-default-btn:hover,
input[type="submit"].sib-default-btn:hover { opacity: 0.85 !important; }
.sib-form-message-panel { border-radius: 0.75rem !important; margin-top: 0.75rem !important; }

/* --- Hero --- */
.ah-hero { min-height: 700px !important; }

/* --- Footer --- */
.ah-footer {
    padding: 5rem 0 2rem;
    background: #0a0f13;
    border-top: 1px solid rgba(69,70,83,0.15);
}
.ah-footer * { box-sizing: border-box; }
.ah-footer-container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.ah-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: 3rem;
    margin-bottom: 4rem;
}
.ah-footer-logo {
    font-family: var(--ah-font);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ah-lavendel);
    margin: 0 0 1rem;
    letter-spacing: -0.03em;
    display: block;
}
.ah-footer-tagline { font-size: 0.875rem; color: #8e919e; line-height: 1.6; margin: 0 0 1.5rem; }
.ah-footer-social { display: flex; gap: 0.75rem; list-style: none; padding: 0; margin: 0; }
.ah-footer-social li a {
    width: 2.5rem; height: 2.5rem;
    border-radius: 9999px;
    background: #353a3e;
    display: flex; align-items: center; justify-content: center;
    color: var(--ah-lavendel);
    text-decoration: none;
    transition: all 0.2s;
    font-size: 0.9rem;
}
.ah-footer-social li a:hover { background: var(--ah-lavendel); color: #111; }
.ah-footer-heading { font-size: 0.75rem; font-weight: 700; color: var(--ah-lavendel); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 1.25rem; }
.ah-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.ah-footer-links a { font-size: 0.875rem; color: #8e919e; text-decoration: none; transition: color 0.2s; }
.ah-footer-links a:hover { color: var(--ah-lavendel); }
.ah-footer-newsletter-title { font-size: 1rem; font-weight: 700; color: var(--ah-wit); margin: 0 0 0.375rem; }
.ah-footer-newsletter-sub { font-size: 0.8rem; color: #8e919e; margin: 0 0 1rem; }
.ah-footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
    font-size: 0.8rem; color: #6b7280;
}
.ah-footer-bottom a { color: #6b7280; text-decoration: none; }
.ah-footer-bottom a:hover { color: var(--ah-lavendel); }
@media (max-width: 768px) {
    .ah-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .ah-footer-bottom { flex-direction: column; text-align: center; }
}

/* ==============================================
   PROGRAMMA TIJDLIJN
   ============================================== */
.ah-tl-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 2rem !important;
    margin-bottom: 2.5rem !important;
}
.ah-tl-time {
    width: 140px !important;
    min-width: 140px !important;
    flex-shrink: 0 !important;
    text-align: right !important;
    padding-top: 1.1rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}
.ah-tl-card {
    flex: 1 !important;
    background-color: #1A1A2E !important;
    border-radius: 12px !important;
    padding: 1.25rem 1.5rem !important;
}
.ah-tl-card h4,
.ah-tl-card .wp-block-heading {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #FFFFFF !important;
    color: #FFFFFF !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.4rem !important;
    display: block !important;
}
.ah-tl-card p { color: #9CA3AF !important; font-size: 0.9rem !important; line-height: 1.6 !important; margin: 0 !important; }
.ah-tl-item:nth-child(even) { flex-direction: row-reverse !important; }
.ah-tl-item:nth-child(even) .ah-tl-time { text-align: left !important; }
.ah-timeline {
    position: relative !important;
}

@media (max-width: 640px) {
    .ah-tl-item,
    .ah-tl-item:nth-child(even) {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .ah-tl-time {
        width: auto !important;
        min-width: unset !important;
        text-align: left !important;
        padding-top: 0 !important;
    }
}

/* ==============================================
   COMMUNITY ROADMAP
   ============================================== */
.cm-step {
    display: flex !important;
    gap: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    align-items: flex-start !important;
}
.cm-step-dot {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
    -webkit-text-fill-color: #fff !important;
}
.cm-step-dot.done { background: #6c63ff !important; color: #fff !important; }
.cm-step-dot.next { background: rgba(108,99,255,0.2) !important; border: 2px solid #6c63ff !important; color: #6c63ff !important; -webkit-text-fill-color: #BBC3FF !important; }
.cm-step-dot.future { background: transparent !important; border: 2px solid rgba(108,99,255,0.2) !important; color: #6c63ff !important; -webkit-text-fill-color: #BBC3FF !important; }
.cm-step-body h4,
.cm-step-body .wp-block-heading {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #FFFFFF !important;
    color: #FFFFFF !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
    display: block !important;
}
.cm-step-body p { color: #8e9baa !important; font-size: 0.95rem !important; margin: 0 !important; }

/* ============================================================
   ACHTERHOEK.AI — TICKETPAGINA CSS
   Pagina: /tickets/ | Versie 1.0 — juni 2026
   ============================================================ */

:root {
  --aai-blauw:       #0a1628;
  --aai-blauw-mid:   #102040;
  --aai-accent:      #00c8ff;
  --aai-accent-warm: #7effcc;
  --aai-wit:         #ffffff;
  --aai-grijs-mid:   #8fa3b8;
  --aai-card-bg:     rgba(255,255,255,0.04);
  --aai-card-border: rgba(0,200,255,0.18);
  --aai-radius:      12px;
  --aai-radius-lg:   20px;
  --aai-shadow:      0 8px 40px rgba(0,0,0,0.35);
  --aai-transition:  0.22s ease;
}

/* --- Hero --- */
.aai-hero {
  position: relative;
  overflow: hidden;
}
.aai-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(0,200,255,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(126,255,204,0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.aai-hero > * { position: relative; z-index: 2; }

/* --- Countdown badge --- */
.aai-countdown-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: rgba(0,200,255,0.12);
  border: 1px solid #00c8ff;
  border-radius: 999px;
  padding: 6px 18px !important;
  font-size: 0.85rem !important;
  font-weight: 600;
  color: #00c8ff !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.5rem !important;
}

/* --- Urgentiebalk --- */
.aai-urgentie-balk {
  border-left: 4px solid #00c8ff !important;
}

/* --- Ticket kaarten --- */
.aai-ticket-kaart {
  position: relative;
  transition: transform var(--aai-transition), box-shadow var(--aai-transition);
  overflow: hidden;
}
.aai-ticket-kaart::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00c8ff, #7effcc);
  border-radius: var(--aai-radius-lg) var(--aai-radius-lg) 0 0;
  opacity: 0;
  transition: opacity var(--aai-transition);
}
.aai-ticket-kaart:hover { transform: translateY(-4px); box-shadow: var(--aai-shadow); }
.aai-ticket-kaart:hover::after { opacity: 1; }
.aai-ticket-kaart--featured::after { opacity: 1; }
.aai-ticket-kaart--featured {
  box-shadow: 0 0 0 1px rgba(0,200,255,0.3), var(--aai-shadow);
}

/* --- Badge aanbevolen --- */
.aai-badge-aanbevolen {
  display: inline-block !important;
  margin: 0 0 1rem !important;
}

/* --- Prijs --- */
.aai-prijs-groot { line-height: 1.2; }
.aai-prijs-oud { margin-bottom: 0.2rem !important; }

/* --- Feature list --- */
.aai-feature-list {
  list-style: none !important;
  padding-left: 0 !important;
}
.aai-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.92rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.aai-feature-list li:last-child { border-bottom: none; }
.aai-feature-list li::before {
  content: "✓";
  color: #7effcc;
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 1px;
  flex-shrink: 0;
}

/* --- CTA knoppen --- */
.aai-btn-hero .wp-block-button__link,
.aai-btn-primary .wp-block-button__link {
  transition: transform var(--aai-transition), box-shadow var(--aai-transition), filter var(--aai-transition) !important;
  box-shadow: 0 4px 20px rgba(0,200,255,0.4) !important;
}
.aai-btn-hero .wp-block-button__link:hover,
.aai-btn-primary .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,200,255,0.55) !important;
  filter: brightness(1.08);
}

header {background:#111;}

/* --- USP items --- */
.aai-usp-item {
  transition: border-color var(--aai-transition), transform var(--aai-transition);
}
.aai-usp-item:hover {
  border-color: #BBC3FF !important;
  transform: translateY(-3px);
}

/* --- Sprekerkaarten --- */
.aai-spreker-kaart {
  transition: transform var(--aai-transition);
}
.aai-spreker-kaart:hover { transform: translateY(-4px); }

/* --- Pulserende animatie op CTA --- */
@keyframes aai-pulse-ring {
  0%   { box-shadow: 0 4px 20px rgba(0,200,255,0.4), 0 0 0 0 rgba(0,200,255,0.6); }
  70%  { box-shadow: 0 4px 20px rgba(0,200,255,0.4), 0 0 0 14px rgba(0,200,255,0); }
  100% { box-shadow: 0 4px 20px rgba(0,200,255,0.4), 0 0 0 0 rgba(0,200,255,0); }
}
.aai-btn-primary--puls .wp-block-button__link {
  animation: aai-pulse-ring 2.2s infinite;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .aai-ticket-kolommen { flex-direction: column !important; }
  .aai-usp-kolommen { flex-direction: column !important; }
}

/* --- EINDE TICKETPAGINA CSS --- */


/* ============================================================
   SPREKERKAARTEN — fixes & verbeteringen
   ah-speaker patroon | juni 2026
   ============================================================ */

/* Spreker wrapper: position relative voor overlay */
.ah-speaker-content {
  position: relative !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  min-height: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

/* Donkere gradient overlay over de foto */
.ah-speaker-content::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0.78) 100%
  ) !important;
  z-index: 0 !important;
  border-radius: inherit !important;
}

/* Alle content boven de overlay */
.ah-speaker-content > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Rol-label (KEYNOTE SPREKER / VERDIEPING etc.) */
.ah-speaker-role {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #00c8ff !important;
  margin-bottom: 0.3rem !important;
  margin-top: 0 !important;
}

/* Sprekernaam: weg met transparante gradient-tekst, gewoon wit + scherp */
.ah-speaker-name {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.4rem !important;
  margin-top: 0 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5) !important;
}

/* Bio-tekst */
.ah-speaker-bio {
  font-size: 0.88rem !important;
  color: rgba(255, 255, 255, 0.82) !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
}

/* Spreker sectie wrapper */
.ah-section {
  margin-top: 1.5rem !important;
}

/* Sectie-titel h2 */
.ah-h2 {
  color: #ffffff !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
}

/* Subtekst onder de sectie-titel */
.ah-section > .wp-block-paragraph:first-of-type {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 0.95rem !important;
  margin-bottom: 1.5rem !important;
}

/* De kolommen-wrapper van sprekers */
.ah-section .wp-block-columns {
  gap: 1.25rem !important;
}

/* Hover-effect op kaart */
.ah-speaker-content {
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
.ah-speaker-content:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

/* USP-titels: weg met de text-annotation border-stijl */
.aai-usp-item h3.is-style-text-annotation,
.aai-usp-item .wp-block-heading.is-style-text-annotation {
  border: none !important;
  outline: none !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* Dubbele "Uitgelichte sprekers" h2 op ticketpagina verbergen
   (de eerste is van mijn sectie, de tweede van het ah-pattern) */
.aai-ticket-kolommen ~ h2.wp-block-heading + .ah-section .ah-h2 {
  display: none !important;
}

/* ============================================================
   EINDE SPREKERKAARTEN FIXES
   ============================================================ */


/* ============================================================
   VASTE HEADER / STICKY NAVIGATIE
   Juni 2026
   ============================================================ */

/* Header fixed aan de bovenkant */
header.wp-block-template-part {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}

/* Compenseer de header-hoogte zodat pagina-inhoud niet eronder verdwijnt */
.wp-site-blocks {
  padding-top: 72px !important;
}

/* Correctie voor de WP admin-balk (die zit er ook boven) */
.admin-bar header.wp-block-template-part {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  .admin-bar header.wp-block-template-part {
    top: 46px !important;
  }
	.cmplz-cookiebanner{max-width:90%; margin:0 auto; font-size:0.85rem;}
	
	.wp-container-content-06f487a6 {flex-basis:30px;}
	main {margin-top:0px !important;}
}

/* ============================================================
   EINDE VASTE HEADER
   ============================================================ */


/* Cart-icoon verbergen uit navigatie */
.wc-block-mini-cart, .wc-block-customer-account__link { display: none !important; }

.mollie-components .mollie-component-label {color:#fff;}
.wc-blocks-components-select .wc-blocks-components-select__label, .wc-block-components-form .wc-block-components-text-input.is-active label {color:black; font-weight:bold;}

#locatie iframe {
  max-width: 100%;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  border: 0;
}

.wc-block-components-quantity-selector {font-size:1.2rem;}
.wc-block-cart-item__remove-link {display:none;}
#billing label, #contact label {color:black;}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #000000 !important;
  caret-color: #000000 !important;
  transition: background-color 5000s ease-in-out 0s;
}