/* viggo-site.css — site-wide cobalt accents for the existing pages (Nieuws/Columns/Contact)
 * + footer, layered over the current Oxygen design so the whole site matches the n2 homepage.
 * (The homepage is styled by the scoped .viggo-n2 stylesheet and is unaffected — none of these
 *  classes appear there. Breakdance form/pagination internals can't live in oxy-selectors, so the
 *  accents are applied here as code.) */

:root { --viggo-cobalt: #1b34d4; --viggo-cobalt-deep: #15259e; --viggo-cream-light: #f3ead6;
        --viggo-ease: cubic-bezier(.33,1,.68,1); }

/* smooth, subtle hover transitions across the legacy pages (these used to snap instantly) */
.container-link-6, .container-link-6 .text-6, .container-link-5, .text-3,
.footer-link, .breakdance-form-button, .button-atom--primary,
.bde-posts-navigation-numbers a, .bde-posts-navigation-numbers .page-numbers,
.oxy-text-link a, .ct-span a, .bde-text a {
  transition: color .3s var(--viggo-ease), background-color .3s var(--viggo-ease),
              border-color .3s var(--viggo-ease), box-shadow .3s var(--viggo-ease) !important;
}

/* ── big page titles → editorial Fraunces serif, cobalt (was thin Abel, black) ── */
.text-header-construct,
.text-header-construct-special {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-style: italic;
  letter-spacing: -.02em;
  color: var(--viggo-cobalt) !important;
  text-shadow: none !important;
}

/* Columns cards are whole-card links (.container-link-6): keep body text dark,
   accent only the title + the "Lees verder" line so it doesn't go all-blue. */
.container-link-6 { color: #141019 !important; border-bottom-color: rgba(27,52,212,.4) !important; }
.container-link-6 .text-6 { color: var(--viggo-cobalt) !important; }                 /* column title */
.container-link-6:hover .text-6 { color: var(--viggo-cobalt-deep) !important; }
.text-3 { color: var(--viggo-cobalt) !important; }                                    /* "Lees verder" */

/* Nieuws read-more pill */
.container-link-5 { color: var(--viggo-cobalt) !important; }
.container-link-5:hover { color: var(--viggo-cobalt-deep) !important; }

/* ── pagination ── */
.bde-posts-navigation-numbers a,
.bde-posts-navigation-numbers .page-numbers { color: var(--viggo-cobalt); text-decoration: none; }
.bde-posts-navigation-numbers .current,
.bde-posts-navigation-numbers [aria-current],
.bde-posts-navigation-numbers .page-numbers.current {
  background: var(--viggo-cobalt); color: var(--viggo-cream-light); border-radius: 2px; padding: 0 .55em;
}

/* ── native Breakdance contact form → cobalt submit + focus ── */
.breakdance-form-button,
.button-atom--primary { background: var(--viggo-cobalt) !important; }
.breakdance-form-button:hover { background: var(--viggo-cobalt-deep) !important; }
.breakdance-form-field input:focus,
.breakdance-form-field textarea:focus {
  border-color: var(--viggo-cobalt) !important;
  box-shadow: 0 0 0 3px rgba(27,52,212,.12) !important;
}

/* ── footer: cobalt section headers + link hovers ── */
.footer-header { color: var(--viggo-cobalt-deep) !important; }
.footer-link:hover { color: var(--viggo-cobalt) !important; }

/* ── generic content links (raw <a>, e.g. text links) → cobalt instead of browser blue ── */
.oxy-text-link a, .ct-span a, .bde-text a { color: var(--viggo-cobalt); }