/*
Theme Name: VG Classic Child Theme
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Herman
Author URI: https://www.kadencewp.com/
Description: Aangepast child theme voor VG Classic Frames & Parts webshop
Version: 1.0.0.1773695826
Updated: 2026-03-16 21:17:06

*/

/*
  VG Classic Child Theme - Stylesheet
  
  Gebaseerd op vg-custom.css (Shopify versie, feb 2026)
  Vertaald naar Kadence/WooCommerce
  
  Inhoud:
  - CSS variabelen
  - Custom fonts (Qwigley, Gunplay, Quicksand)
  - Globale stijlen
  - Sticky header
  - Hoofdnavigatie
  - Footer
  - Homepage
  - Collectiepagina's
  - Productpagina's
  - Gerelateerde producten
  - Utility classes
  
  LET OP: Fonts moeten geüpload worden via FTP of Hostinger
  bestandsbeheer naar /wp-content/themes/vg-kadence-child/fonts/
  
  Laatste wijziging: maart 2026
*/

/* ============================================
   CSS Variabelen
   ============================================ */
:root {
  --gunplay-color: #FF722F;
  --qwigley-color: #FFFFFF;
  --quicksand-color: #FFFFFF;
  --bg-dark: #1E1E1E;
  --bg-card: #242833;
  --bg-light: #FFFFFF;
  --text-light: #FFFFFF;
  --text-dark: #1E1E1E;
  --accent: #FF722F;
  --accent-hover: #CC5A24;
}

/* ============================================
   Custom fonts: Qwigley, Gunplay, Quicksand
   Bestanden staan in /fonts/ map van child theme
   ============================================ */
@font-face {
  font-family: 'Gunplay';
  src: url('fonts/gunplayrg-webfont.woff2') format('woff2'),
       url('fonts/gunplayrg-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Qwigley';
  src: url('fonts/qwigley-regular-webfont.woff2') format('woff2'),
       url('fonts/qwigley-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Quicksand via Google Fonts - geladen via functions.php */

/* ============================================
   Globale stijlen
   ============================================ */
body {
  background-color: var(--bg-dark);
  color: var(--text-light);
  font-family: 'Quicksand', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-content {
  flex: 1 0 auto;
}

/* Bullet lijsten */
ul, ol {
  list-style-position: outside;
  padding-left: 1.5em;
  margin-left: 0;
}

.entry-content ul,
.entry-content ol,
.woocommerce-product-details__short-description ul,
.woocommerce-product-details__short-description ol {
  list-style-position: outside;
  padding-left: 1.5em;
  margin-left: 0;
}

/* ============================================
   Header - altijd zwart, sticky
   ============================================ */
.site-header,
.kadence-sticky-header {
  background-color: var(--bg-dark) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* Header iconen scherper */
.site-header svg {
  stroke-width: 1.5 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ============================================
   Hoofdnavigatie - Gunplay, oranje
   ============================================ */
.main-navigation a,
.nav-primary a,
.kadence-navigation a {
  font-family: 'Gunplay', sans-serif !important;
  font-size: 18px;
  color: var(--accent) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased !important;
}

/* Hover */
.main-navigation a:hover,
.nav-primary a:hover,
.kadence-navigation a:hover {
  color: var(--accent-hover) !important;
  text-decoration: underline;
  opacity: 1 !important;
}

/* Actieve pagina */
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-parent > a,
.nav-primary .current-menu-item > a,
.kadence-navigation .current-menu-item > a,
.kadence-navigation .current-menu-ancestor > a {
  color: var(--text-light) !important;
}

/* Actieve pagina hover blijft wit */
.main-navigation .current-menu-item > a:hover,
.kadence-navigation .current-menu-item > a:hover {
  color: var(--text-light) !important;
  text-decoration: underline;
}

/* Dropdown menu */
.main-navigation .sub-menu,
.kadence-navigation .sub-menu {
  background-color: var(--bg-dark) !important;
}

.main-navigation .sub-menu a,
.kadence-navigation .sub-menu a {
  color: var(--accent) !important;
}

.main-navigation .sub-menu .current-menu-item > a,
.kadence-navigation .sub-menu .current-menu-item > a {
  color: var(--text-light) !important;
}

/* ============================================
   Cart icoon
   ============================================ */
.cart-icon svg,
.header-cart svg {
  stroke-width: 1.5 !important;
}

/* Cart teller */
.cart-count-bubble,
.header-cart-total {
  font-size: 14px !important;
  font-weight: 700 !important;
  background: transparent !important;
  color: var(--text-light) !important;
  border: none !important;
  box-shadow: none !important;
}

/* ============================================
   Footer - altijd zwart
   ============================================ */
.site-footer {
  background-color: var(--bg-dark) !important;
  flex-shrink: 0;
  padding-top: 0.5rem !important;
  padding-bottom: 0.25rem !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Verberg "WordPress thema door Kadence WP" */
.site-info a[href*="kadencewp.com"],
.site-info a[href*="wordpress.org"] {
  display: none !important;
}

/* Copyright tekst */
.site-info {
  color: var(--text-light) !important;
}

/* Footer kolomtitels */
.site-footer .widget-title,
.site-footer .widgettitle {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Footer links standaard wit */
.site-footer a,
.site-footer .widget a {
  font-family: 'Quicksand', sans-serif !important;
  color: var(--text-light) !important;
  font-weight: 600 !important;
}

/* Footer links hover */
.site-footer a:hover,
.site-footer .widget a:hover {
  text-decoration: underline !important;
  color: var(--text-light) !important;
}

/* Footer actieve link oranje */
.site-footer .current-menu-item a,
.site-footer .current_page_item a {
  color: var(--accent) !important;
}

/* Footer spacing */
.widget {
  margin-bottom: 0.5rem !important;
}

/* ============================================
   Homepage content - donker
   ============================================ */
.home .site-main,
.home .content-area {
  background-color: var(--bg-dark);
  color: var(--text-light);
}

/* Blog/post kaarten */
.entry-card,
article.post,
.post {
  background-color: var(--bg-card);
  color: var(--text-light);
}

/* Headings op donkere achtergrond */
.home h1,
.home h2,
.home h3 {
  font-family: 'Gunplay', sans-serif;
  color: var(--accent);
}

/* ============================================
   Collectie overzicht - donkere kaarten
   Eyecatchers op homepage
   ============================================ */
.woocommerce-product-category,
.product-category {
  background-color: var(--bg-card) !important;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.woocommerce-product-category:hover,
.product-category:hover {
  transform: translateY(-2px);
}

/* Collectie afbeeldingen */
.product-category img {
  object-fit: contain !important;
  padding: 1.5rem !important;
}

/* Collectie titel overlay onderaan */
.woocommerce-loop-category__title,
.product-category .woocommerce-loop-category__title {
  font-family: 'Quicksand', sans-serif !important;
  color: var(--text-light) !important;
  background-color: rgba(36, 40, 51, 0.8) !important;
  padding: 0.75rem 1rem !important;
  text-align: center !important;
  width: 100% !important;
}

/* ============================================
   Collectiepagina's en productpagina's - wit
   Header en footer blijven altijd zwart
   ============================================ */
.woocommerce .site-main,
.woocommerce-page .site-main,
.single-product .site-main,
.tax-product_cat .site-main {
  background-color: var(--bg-light) !important;
  color: var(--text-dark) !important;
}

/* Producttitels en prijzen op witte achtergrond */
.woocommerce .site-main h1,
.woocommerce .site-main h2,
.woocommerce .site-main h3,
.woocommerce-page .site-main h1,
.single-product .site-main h1,
.single-product .site-main h2 {
  color: var(--text-dark) !important;
}

/* Productkaarten */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background-color: var(--bg-light);
}

/* Prijs */
.woocommerce .price,
.woocommerce-page .price {
  color: var(--text-dark) !important;
}

/* ============================================
   Productpagina - lightbox en afbeeldingen
   ============================================ */
.woocommerce-product-gallery {
  background-color: var(--bg-light);
}

.woocommerce-product-gallery img {
  object-fit: contain;
}

/* ============================================
   Add to cart knop - oranje
   ============================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button {
  background-color: var(--accent) !important;
  color: var(--text-light) !important;
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  border: none !important;
  transition: background-color 0.2s ease !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover {
  background-color: var(--accent-hover) !important;
  color: var(--text-light) !important;
}

/* ============================================
   Gerelateerde producten - scrollbare grid
   ============================================ */
.related-repair-parts {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.related-repair-parts__heading {
  font-family: 'Gunplay', sans-serif;
  font-size: 2.4rem;
  color: var(--accent);
  margin: 0 0 2rem 0;
}

.related-repair-parts__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(50% - 1rem);
  gap: 2rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.related-repair-parts__item {
  scroll-snap-align: start;
}

.related-repair-parts__link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.related-repair-parts__link:hover {
  transform: translateY(-4px);
}

.related-repair-parts__image-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  background-color: var(--bg-light);
  border-radius: 4px;
  margin-bottom: 1rem;
}

.related-repair-parts__image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Scrollbar */
.related-repair-parts__grid::-webkit-scrollbar {
  height: 8px;
}

.related-repair-parts__grid::-webkit-scrollbar-track {
  background: transparent;
}

.related-repair-parts__grid::-webkit-scrollbar-thumb {
  background: rgba(255, 114, 47, 0.4);
  border-radius: 4px;
}

.related-repair-parts__grid::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 114, 47, 0.7);
}

/* Tablet: 3 kolommen */
@media screen and (min-width: 750px) {
  .related-repair-parts__grid {
    grid-auto-columns: calc(33.333% - 1.4rem);
  }
}

/* Desktop: 4 kolommen */
@media screen and (min-width: 990px) {
  .related-repair-parts__grid {
    grid-auto-columns: calc(25% - 1.5rem);
  }
}

/* ============================================
   Responsive grids
   ============================================ */
.two-col-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
}

.three-col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
}

.four-col-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem;
}

@media screen and (max-width: 749px) {
  .two-col-grid,
  .three-col-grid,
  .four-col-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* ============================================
   Donkere content pagina template
   ============================================ */
.vg-dark-content {
  background-color: var(--bg-card);
  padding: 20px 0 60px 0;
}

.vg-dark-content .page-title {
  font-family: 'Gunplay', sans-serif;
  font-size: 36px;
  text-align: center;
  color: var(--accent);
  margin-bottom: 40px;
  margin-top: 0;
}

.vg-dark-content h2 {
  font-size: 27px;
  color: var(--text-light);
}

.vg-dark-content h3 {
  font-size: 21.6px;
  color: var(--text-light);
}

.vg-dark-content p {
  font-size: 18px;
  color: var(--text-light);
}

/* ============================================
   Account verwijdering sectie
   ============================================ */
.account-deletion-section {
  margin-top: 40px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.account-deletion-button {
  background-color: #d32f2f;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.account-deletion-button:hover {
  background-color: #b71c1c;
}