/* =======================
   HFCC Racing – custom.css
   Joomla 5 / Helix Ultimate / Bootstrap 5
   ======================= */

/* ==== Basis tweaks ==== */
.sp-menu-heading { color:#FFF; }
#sp-main-body { padding:0; }

#sp-header .logo {
height: 60px !important;
}

.bg-success {
  background-color: #31653E !important;
  transition: background-color 0.3s ease;
}

.bg-success:hover {
  background-color: #ECD127 !important;
}

/* Header-afbeelding */
.sp-module.hfcc_header_image img,
.hfcc_header_image .mod-custom img,
.hfcc_header_image img {
  margin-top:20px;
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
  box-shadow:0 2px 12px rgba(0,0,0,.15);
}

/* WhatsApp floating button */
.whatsapp-float{
  position:fixed; width:60px; height:60px; bottom:20px; right:20px;
  background:#25d366; color:#fff; border-radius:50%;
  text-align:center; font-size:32px; box-shadow:0 2px 8px rgba(0,0,0,.3);
  z-index:1000; transition:background .3s;
}
.whatsapp-float:hover{ background:#20b954; color:#fff; }
.whatsapp-float i{ line-height:60px; }

/* Onderste content (algemeen Helix blok) */
.sp-module-content-bottom.clearfix { padding-left:25px; padding-right:25px; }

/* Artikel titels */
.article-details .article-header h1,
.article-details .article-header h2 { margin-top:10px; }

/* =======================
   Evenementenlijst
   ======================= */
.event-list .event-card,
.event-list .list-group-item{
  border:1px solid var(--bs-border-color);
  border-radius:.8rem;
  background:var(--bs-body-bg);
  box-shadow:0 .1rem .3rem rgba(0,0,0,.05);
  padding:1rem 1.25rem;
  transition:transform .08s ease, box-shadow .2s ease;
}
.event-list .list-group-item + .list-group-item{ margin-top:.75rem; border-top-width:1px; }
.event-list .event-card:hover,
.event-list .list-group-item:hover{
  transform:translateY(-1px);
  box-shadow:0 .4rem 1rem rgba(0,0,0,.08);
}
.event-list .date-badge{
  min-width:72px; max-width:84px; line-height:1.1; border-radius:.75rem;
  border:1px solid rgba(0,0,0,.08);
  background:linear-gradient(180deg,var(--bs-primary-bg-subtle),var(--bs-primary));
  color:#fff; text-align:center; padding:.5rem .5rem;
}
.event-list .date-badge .day{ font-weight:700; font-size:.95rem; letter-spacing:.4px; }
.event-list .date-badge .month{ display:block; font-size:.85rem; opacity:.95; }
.event-list .date-badge:empty{ display:none; }
.event-list .cta-wrap{ gap:.5rem; }
.event-list .btn-cta{ padding:.375rem .75rem; border-radius:.6rem; }
.event-list .read-more{ font-size:.85rem; opacity:.9; display:inline-block; }
.event-actions .btn{ width:100%; }
@media (min-width:768px){ .event-actions .btn{ width:auto; min-width:120px; } }
@media (min-width:1024px){ .event-actions .btn{ max-width:200px; } }
@media (max-width:575.98px){
  .event-list .event-card,
  .event-list .list-group-item{ padding:1rem; }
  .event-list .date-badge{ width:100%; max-width:100%; border-radius:.6rem; background:var(--bs-primary); }
}

/* Helpers */
.yellow-text{ color:#f98000 !important; }
.callout-accent{ background:linear-gradient(180deg,#fff,#f8f9fa); }
.callout-accent .bar{ width:8px; height:100%; background:#ffc107; border-radius:.5rem; }

/* =======================
   Social bar (footer-balk)
   ======================= */
.footer-social-links .container{
  justify-content:flex-start !important;
  align-items:center !important;
  gap:1rem !important;
}
.footer-social-links a,
.footer-social-links span{
  padding-left:.5rem !important;
  display:inline-flex;
  align-items:center;
  text-align:left !important;
}

/* Icon-kleuren */
.facebook-icon{ color:#1877F2; } /* Facebook blauw */
.instagram-icon{
  background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* =======================
   Footer (positie #sp-footer2)
   ======================= */
#sp-footer2 .sp-module{ text-align:left; }
#sp-footer2 .sp-module .sp-module-content{ padding-left:0 !important; padding-right:0 !important; }
#sp-footer2 .sp-module .sp-module-title{ margin:0 0 .6rem 0 !important; line-height:1.2; }

/* ---- Extra informatie / Rijtijden (module class suffix: footer-extra) ---- */
/* Light box UIT: geen rand, geen achtergrond, geen schaduw */
.sp-module.footer-extra .sp-module-content{ padding:0 !important; }
.sp-module.footer-extra .sp-module-title{ margin-bottom:.5rem !important; }
.footer-extra .card{
  margin:0 !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.footer-extra .card-body{
  padding:0 !important; /* inhoud zonder extra box-padding */
}
.footer-extra .list-unstyled>li{ padding:.35rem 0; }
.footer-extra .border-bottom{
  border-bottom-width:1px !important;
  border-color:rgba(255,255,255,.09) !important;
  margin:0;
}


/* =======================
   Specials 
   =======================*/

.sp-module.res_jeugdles{
margin-left: -50px;
}

/* =======================
   MOBIEL: alles exact op één linker-rail uitlijnen
   ======================= */
@media (max-width:767.98px){

  /* Zelfde zij-padding voor socials én alle modules in footerpositie */
  .footer-social-links .container,
  #sp-footer2 .sp-module .sp-module-content{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  /* Titels/inhoud van footer-modules altijd links */
  #sp-footer2,
  #sp-footer2 .sp-module,
  #sp-footer2 .sp-module .sp-module-title{
    text-align:left !important;
  }

  /* Rijtijden: omdat de card transparant is, alleen de LI-inhoud netjes laten lopen */
  .sp-module.footer-extra{ padding-left:.5rem; padding-right:.5rem; }

  /* Floating WhatsApp niet over content laten hangen */
  .whatsapp-float{ bottom:76px; right:16px; }
}

#sp-header .logo {
    height: 51px !important;
}

div#sp-footer2 {
    background-color: #373737;
    margin-top: 40px;
    padding: 1rem;
}