/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Sharon Aston
 * Template: blocksy
 * Text Domain: blocksy
 */

 /* ===== Luckerella – Blocksy palette + gradients ===== */
:root,  .editor-styles-wrapper {
  /* Blocksy Global Color Palette (1–8)  */
  /* 1–2: donker(der) voor tekst/heading; 3: neutraal; 4–6: accenten; 7: zacht; 8: achtergrond */
  --theme-palette-color-1: #394841; /* Deep Forest — tekst/heading/anchors */
  --theme-palette-color-2: #78977B; /* Cambridge Blue — secundair donker */
  --theme-palette-color-3: #C9D3C8; /* Ash Gray — neutraal/border/soft surfaces */
  --theme-palette-color-4: #A4D4CC; /* Seafoam — primary/CTA highlight */
  --theme-palette-color-5: #96729A; /* Pomp and Power — koel paars accent */
  --theme-palette-color-6: #C48C85; /* Vintage Rose — warm accent */
  --theme-palette-color-7: #FFDDE2; /* Mimi Pink — zachte vlakken/hover */
  --theme-palette-color-8: #F6F5F2; /* Ivory Mist — page background/whitespace */

  /* Aliassen (sommige onderdelen/leuke plugins refereren hier nog aan) */
  --paletteColor1: var(--theme-palette-color-1);
  --paletteColor2: var(--theme-palette-color-2);
  --paletteColor3: var(--theme-palette-color-3);
  --paletteColor4: var(--theme-palette-color-4);
  --paletteColor5: var(--theme-palette-color-5);
  --paletteColor6: var(--theme-palette-color-6);
  --paletteColor7: var(--theme-palette-color-7);
  --paletteColor8: var(--theme-palette-color-8);

  /* Semantische namen (makkelijk in je eigen CSS) */
  --c-text:   var(--theme-palette-color-1);
  --c-head:   var(--theme-palette-color-1);
  --c-dark2:  var(--theme-palette-color-2);
  --c-neu:    var(--theme-palette-color-3);
  --c-prim:   var(--theme-palette-color-4);
  --c-violet: var(--theme-palette-color-5);
  --c-rose:   var(--theme-palette-color-6);
  --c-blush:  var(--theme-palette-color-7);
  --c-bg:     var(--theme-palette-color-8);

  /* ===== Subtiele gloss-gradients (per kleur) ===== */
  --g-forest-gloss:  linear-gradient(180deg,
                        color-mix(in srgb, #394841 92%, #fff) 0%,
                        #394841 55%,
                        color-mix(in srgb, #394841 84%, #000) 100%);
  --g-cambridge-gloss: linear-gradient(180deg,
                        color-mix(in srgb, #78977B 92%, #fff) 0%,
                        #78977B 60%,
                        color-mix(in srgb, #78977B 82%, #000) 100%);
  --g-ash-gloss:     linear-gradient(180deg,
                        color-mix(in srgb, #C9D3C8 95%, #fff) 0%,
                        #C9D3C8 70%,
                        color-mix(in srgb, #C9D3C8 82%, #000) 100%);
  --g-seafoam-gloss: linear-gradient(180deg,
                        color-mix(in srgb, #A4D4CC 92%, #fff) 0%,
                        #A4D4CC 55%,
                        color-mix(in srgb, #A4D4CC 80%, #000) 100%);
  --g-violet-gloss:  linear-gradient(180deg,
                        color-mix(in srgb, #96729A 92%, #fff) 0%,
                        #96729A 55%,
                        color-mix(in srgb, #96729A 80%, #000) 100%);
  --g-rose-gloss:    linear-gradient(180deg,
                        color-mix(in srgb, #C48C85 92%, #fff) 0%,
                        #C48C85 55%,
                        color-mix(in srgb, #C48C85 80%, #000) 100%);
  --g-blush-gloss:   linear-gradient(180deg,
                        color-mix(in srgb, #FFDDE2 94%, #fff) 0%,
                        #FFDDE2 65%,
                        color-mix(in srgb, #FFDDE2 78%, #000) 100%);
  --g-ivory-gloss:   linear-gradient(180deg,
                        color-mix(in srgb, #F6F5F2 95%, #fff) 0%,
                        #F6F5F2 75%,
                        color-mix(in srgb, #F6F5F2 80%, #000) 100%);

  /* ===== Mix & match gradients (secties/hero/CTA) ===== */
  --g-mystic-bloom:   linear-gradient(135deg, #96729A 0%, #FFDDE2 100%);
  --g-forest-whisper: linear-gradient(120deg, #78977B 0%, #C9D3C8 100%);
  --g-celestial-dew:  linear-gradient(90deg,  #A4D4CC 0%, #F6F5F2 100%);
  --g-blush-mist:     linear-gradient(180deg, #FFDDE2 0%, #F6F5F2 100%);
  --g-rose-ivory:     linear-gradient(180deg, #C48C85 0%, #F6F5F2 100%);
  --g-violet-sea:     linear-gradient(90deg,  #96729A 0%, #A4D4CC 100%);
  --g-forest-rose:    linear-gradient(135deg, #394841 0%, #C48C85 100%);
  --g-mint-ash:       linear-gradient(180deg, #A4D4CC 0%, #C9D3C8 100%);
}

/* ===== Basistoepassing ===== */
body { background: var(--c-bg); color: var(--c-text); }
h1, h2, h3, h4, h5, h6 { color: var(--c-head); }
a { color: var(--c-prim); }
a:hover, a:focus { color: var(--c-head); }
hr, .wp-block-separator { border-color: var(--c-neu); }

/* Containers/kaarten */
.ct-container, .card, .widget, .wp-block-group,
.ugb-card, .stk-block-card, .ugb-container, .stk-block-container {
  background: var(--c-bg);
  border: 1px solid var(--c-neu);
  border-radius: 14px;
}

/* Buttons (gloss) – Gutenberg, Blocksy, Woo */
.wp-element-button, .wp-block-button__link,
button, input[type="submit"], .button,
.woocommerce a.button, .woocommerce button.button, 
.ugb-button a, .stk-button__link, .ugb-button.ugb-button--design-ghost a {
  background: var(--g-seafoam-gloss);
  color: #0F1413;
  border: 1px solid color-mix(in srgb, var(--c-prim) 70%, #0000);
  border-radius: 999px;
  padding: .7rem 1.2rem;
  transition: transform .06s ease-in, filter .12s;
}
.wp-element-button:hover, .wp-block-button__link:hover,
button:hover, input[type="submit"]:hover, .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.ugb-button a:hover, .stk-button__link:hover {
  background: var(--g-cambridge-gloss);
  color: #fff;
  filter: brightness(0.98);
  transform: translateY(-1px);
}

/* Gradient utilities (secties) */
.bg-mystic-bloom   { background: var(--g-mystic-bloom); }
.bg-forest-whisper { background: var(--g-forest-whisper); }
.bg-celestial-dew  { background: var(--g-celestial-dew); }
.bg-blush-mist     { background: var(--g-blush-mist); }
.bg-rose-ivory     { background: var(--g-rose-ivory); }
.bg-violet-sea     { background: var(--g-violet-sea); }
.bg-forest-rose    { background: var(--g-forest-rose); }
.bg-mint-ash       { background: var(--g-mint-ash); }

/* Individuele gloss utilities (badges, chips, cards) */
.bg-forest-gloss   { background: var(--g-forest-gloss); color: #fff; }
.bg-cambridge-gloss{ background: var(--g-cambridge-gloss); color: #fff; }
.bg-ash-gloss      { background: var(--g-ash-gloss); color: #1F2725; }
.bg-seafoam-gloss  { background: var(--g-seafoam-gloss); color: #0F1413; }
.bg-violet-gloss   { background: var(--g-violet-gloss); color: #fff; }
.bg-rose-gloss     { background: var(--g-rose-gloss); color: #2B1A18; }
.bg-blush-gloss    { background: var(--g-blush-gloss); color: #3B3838; }
.bg-ivory-gloss    { background: var(--g-ivory-gloss); color: #2A2E2D; }

/* Formulieren */
input, select, textarea {
  background: #fff; color: var(--c-text);
  border: 1px solid var(--c-neu); border-radius: 10px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--c-prim);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-prim) 28%, transparent);
}

.btn-teal {
    background: hsla(186, 66%, 40%, 1) !important;
    background: linear-gradient(90deg, hsla(186, 66%, 40%, 1) 0%, hsla(188, 78%, 69%, 1) 100%) !important;
    background: -moz-linear-gradient(90deg, hsla(186, 66%, 40%, 1) 0%, hsla(188, 78%, 69%, 1) 100%) !important;
    background: -webkit-linear-gradient(90deg, hsla(186, 66%, 40%, 1) 0%, hsla(188, 78%, 69%, 1) 100%) !important;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#239EAB", endColorstr="#74DEEE", GradientType=1 ) !important;
  }