/*
Theme Name: iFago (Blocksy Child)
Theme URI: https://ifago.nl
Template: blocksy
Author: iFago
Author URI: https://ifago.nl
Description: Child-theme van Blocksy met het volledige iFago redesign. Bevat per-pagina design-templates (Homepage, Portfolio, Contact, Blog, Login en de dienst-pagina's Website / Webshop / Branding / Hosting). Normale pagina's en posts blijven door Blocksy aangestuurd; pagina's met een iFago-sjabloon krijgen de complete iFago-vormgeving (navy + #2596BE, Monument Extended display-font).
Version: 2.9.26
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: ifago-blocksy
*/

/* ============================================================
   iFago BRAND TOKENS
   Deze regels gelden voor NORMALE Blocksy-pagina's en posts.
   De iFago design-templates laden hun eigen assets/styles.css
   en hebben deze sectie niet nodig.
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');
@import url('https://fonts.cdnfonts.com/css/monument-extended');

:root {
  /* Brand */
  --ifago-navy-900: #0A1F4D;
  --ifago-navy-800: #0D2B6B;
  --ifago-navy-700: #133478;
  --ifago-blue:     #2596BE;
  --ifago-blue-600: #1F7FA3;
  --ifago-blue-400: #5BACD4;
  --ifago-blue-200: #B4D9EC;
  --ifago-teal:     #14B8A6;
  --ifago-peri:     #7C8CFF;
  --ifago-emerald:  #34D399;
  --ifago-indigo:   #6366F1;
  --ifago-cyan:     #06B6D4;
  --ifago-violet:   #A78BFA;
  --ifago-gold:     #FBC02D;
  --ifago-lime:     #C8F43E;
  --ifago-off:      #E8EEF7;
  --ifago-muted:    #B8C5D9;
  --ifago-dim:      #8A98B5;

  /* Gradient utilities */
  --ifago-blue-gradient:      linear-gradient(135deg, #5BACD4 0%, #2596BE 45%, #1B5F83 100%);
  --ifago-blue-gradient-cool: linear-gradient(120deg, #7C8CFF 0%, #2596BE 50%, #14B8A6 100%);

  /* Override Blocksy color tokens (Blocksy gebruikt --theme-* vars) */
  --theme-palette-color-1: #2596BE;                /* primair */
  --theme-palette-color-2: #1F7FA3;                /* hover */
  --theme-palette-color-3: #0A1F4D;                /* heading */
  --theme-palette-color-4: #46587A;                /* body text */
  --theme-palette-color-5: #E8EEF7;                /* light bg */
  --theme-palette-color-6: #0D2B6B;                /* dark bg */
  --theme-palette-color-7: #FFFFFF;                /* card bg */
  --theme-palette-color-8: rgba(43,142,194,.15);   /* accent soft */

  /* Override Blocksy fonts */
  --theme-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --theme-heading-font-family: 'Monument Extended', 'Inter', sans-serif;
}

/* ------------------------------------------------------------
   Base typografie op gewone Blocksy-pagina's
------------------------------------------------------------ */
body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11','ss01';
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  font-family: 'Monument Extended', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 5.4vw, 64px); line-height: 1.12; }
h2 { font-size: clamp(26px, 3.4vw, 44px); }
h3 { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; font-family: 'Inter', sans-serif; font-weight: 600; }

/* ------------------------------------------------------------
   Knoppen — Blocksy .ct-button + Gutenberg .wp-block-button
------------------------------------------------------------ */
.ct-button,
.wp-block-button__link,
.button,
input[type="submit"] {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 14px 22px !important;
  letter-spacing: -0.005em !important;
  transition: all 220ms cubic-bezier(.22,1,.36,1) !important;
}
.ct-button[data-color="default"],
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--ifago-blue-gradient) !important;
  background-size: 180% 180% !important;
  background-position: 0% 50% !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(43,142,194,.35), inset 0 1px 0 rgba(255,255,255,.18) !important;
  border: none !important;
}
.ct-button[data-color="default"]:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-position: 100% 50% !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 36px rgba(43,142,194,.5) !important;
}
.is-style-outline .wp-block-button__link,
.ct-button[data-color="ghost"] {
  background: transparent !important;
  color: var(--ifago-blue) !important;
  border: 1px solid currentColor !important;
}

/* ------------------------------------------------------------
   Links, kaarten, formulieren
------------------------------------------------------------ */
a { transition: color 180ms ease; }

.entry-card,
.ct-card,
.ct-post-card {
  border-radius: 18px !important;
  border: 1px solid rgba(14,26,51,.08) !important;
  box-shadow: 0 8px 20px rgba(14,26,51,.05), 0 2px 4px rgba(14,26,51,.03) !important;
  transition: all 280ms cubic-bezier(.22,1,.36,1) !important;
}
.entry-card:hover,
.ct-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 56px rgba(14,26,51,.1), 0 0 0 1px rgba(43,142,194,.3) !important;
}

.ff-el-input--input,
.ff-el-form-control,
.wp-block-search__input,
input[type="text"], input[type="email"], input[type="tel"], textarea {
  border-radius: 10px !important;
  border: 1px solid rgba(14,26,51,.15) !important;
  padding: 12px 16px !important;
  font-family: 'Inter', sans-serif !important;
  transition: all 180ms ease !important;
}
.ff-el-input--input:focus,
.ff-el-form-control:focus,
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  border-color: var(--ifago-blue) !important;
  box-shadow: 0 0 0 4px rgba(43,142,194,.12) !important;
  outline: none !important;
}

/* ------------------------------------------------------------
   Utility classes (bruikbaar in de Blocksy editor)
------------------------------------------------------------ */
.ifago-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ifago-blue);
}
.ifago-eyebrow::before {
  content: ""; width: 28px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--ifago-blue-400), var(--ifago-blue));
  border-radius: 2px;
}
.ifago-pill {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: rgba(43,142,194,.1);
  border: 1px solid rgba(43,142,194,.3);
  color: var(--ifago-blue);
}
.ifago-stat {
  font-family: 'Monument Extended', 'Inter', sans-serif;
  font-weight: 700; font-size: clamp(34px, 5vw, 64px);
  color: var(--ifago-blue); letter-spacing: -0.04em; line-height: 1;
}
.ifago-gradient-text {
  background: var(--ifago-blue-gradient);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: ifagoGradShift 8s ease-in-out infinite;
}
@keyframes ifagoGradShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.ifago-login-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(43,142,194,.12);
  border: 1px solid rgba(43,142,194,.3);
  color: var(--ifago-blue);
  font-size: 12px; font-weight: 600; text-decoration: none;
  transition: all 180ms ease;
}
.ifago-login-pill:hover {
  background: rgba(43,142,194,.22);
  color: var(--ifago-navy-900);
}
.ifago-dark, .dark-section {
  background: var(--ifago-navy-900) !important;
  color: #fff !important;
}
.ifago-dark h1, .ifago-dark h2, .ifago-dark h3,
.dark-section h1, .dark-section h2, .dark-section h3 { color: #fff !important; }
.ifago-section-light {
  background: linear-gradient(180deg, #F4F7FA 0%, #E8EFF6 100%);
  padding: clamp(56px, 7vw, 96px) 0;
}
.ifago-section-dark {
  background: var(--ifago-navy-900); color: #fff;
  padding: clamp(56px, 7vw, 96px) 0;
}