/*
Theme Name: Avada Child - Noordskool FUTURE
Description: Noordskool futuristic redesign — glass morphism, gradient meshes, neon accents
Author: Bob
Template: Avada
Version: 3.0.0
*/

/* ==========================================================================
   1. TOKENS — futuristic brand system
   ========================================================================== */
html body {
  --ns-blue:        #0A3A8F;
  --ns-blue-mid:    #1D5FC8;
  --ns-blue-bright: #3B82F6;
  --ns-blue-dark:   #020B2E;
  --ns-green:       #0F7A33;
  --ns-green-mid:   #22C55E;
  --ns-green-bright:#4ADE80;
  --ns-cyan:        #06B6D4;
  --ns-ink:         #0F172A;
  --ns-body:        #475569;
  --ns-muted:       #94A3B8;
  --ns-line:        rgba(10,58,143,.12);
  --ns-surface:     #FFFFFF;
  --ns-tint:        #F8FAFC;

  --ns-grad-hero:   linear-gradient(135deg,#020B2E 0%,#0A3A8F 40%,#1D5FC8 70%,#0F7A33 100%);
  --ns-grad-blue:   linear-gradient(135deg,#0A3A8F 0%,#3B82F6 100%);
  --ns-grad-green:  linear-gradient(135deg,#0F7A33 0%,#4ADE80 100%);
  --ns-grad-accent: linear-gradient(90deg,#3B82F6 0%,#22C55E 100%);
  --ns-grad-text:   linear-gradient(135deg,#3B82F6 0%,#22C55E 50%,#4ADE80 100%);

  --ns-glow-blue:   0 0 32px rgba(59,130,246,.45), 0 8px 32px rgba(10,58,143,.25);
  --ns-glow-green:  0 0 32px rgba(74,222,128,.45), 0 8px 32px rgba(15,122,51,.25);
  --ns-glow-soft:   0 20px 60px rgba(10,58,143,.18);
  --ns-glass-bg:    rgba(255,255,255,.72);
  --ns-glass-bd:    rgba(255,255,255,.8);

  --ns-ease:        cubic-bezier(.2,.8,.2,1);
}

/* ==========================================================================
   2. GLOBAL RESETS — override Avada safely
   ========================================================================== */
html body.fusion-body,
html body {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  color: var(--ns-body) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased;
  background: #F1F5FF !important;
}

html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .fusion-title h1, html body .fusion-title h2, html body .fusion-title h3,
html body .entry-title, html body .post-content h1, html body .post-content h2 {
  font-family: 'Space Grotesk','Inter',sans-serif !important;
  color: var(--ns-ink) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.08 !important;
}

html body h1, html body .fusion-title h1, html body .entry-title {
  font-size: clamp(2.75rem, 6vw, 5.5rem) !important;
}
html body h2, html body .fusion-title h2 { font-size: clamp(2rem, 4vw, 3.5rem) !important; }
html body h3, html body .fusion-title h3 { font-size: clamp(1.5rem, 2.5vw, 2rem) !important; }

::selection { background: #3B82F6; color: #fff; }
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ns-tint); }
::-webkit-scrollbar-thumb { background: var(--ns-grad-blue); border-radius: 6px; }

/* ==========================================================================
   3. HEADER — glass morphism, sticky
   ========================================================================== */
html body .fusion-header-wrapper,
html body .fusion-header-wrapper .fusion-header,
html body .fusion-header {
  background: var(--ns-glass-bg) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--ns-glass-bd) !important;
  box-shadow: 0 8px 32px rgba(10,58,143,.08) !important;
  z-index: 1000 !important;
}
/* At top: header sits in normal flow below the hero bay.
   After scroll: header becomes a fixed bar that slides down from above. */
html.ns-scrolled body .fusion-header-wrapper {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  animation: nsHeaderDrop .5s cubic-bezier(.22,.61,.36,1);
}
@keyframes nsHeaderDrop {
  0%   { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}
html body .fusion-header-wrapper .fusion-header::after {
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--ns-grad-accent);
}

html body .fusion-logo img {
  max-height: 80px !important;
  width: auto !important;
  filter: drop-shadow(0 2px 8px rgba(10,58,143,.15));
  opacity: 1;
  transform: translateY(0);
  transition: opacity .45s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}
/* While at top of page, the sticky-header logo is invisible — the hero bay
   above is showing the big centred crest. On scroll, it fades in. */
html.ns-at-top body .fusion-logo img { opacity: 0 !important; transform: translateY(-14px) scale(.85); }
html.ns-scrolled body .fusion-logo img { opacity: 1 !important; transform: translateY(0) scale(1); }

/* ==========================================================================
   3b. HERO BAY — centred crest that flies into the nav on scroll
   ========================================================================== */
.ns-hero-bay {
  position: relative;
  width: 100%;
  min-height: 360px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  isolation: isolate;
  perspective: 1200px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, #E4EDFF 0%, #F0F4FF 40%, #FFFFFF 75%) ;
  border-bottom: 1px solid rgba(10,58,143,.06);
}
.ns-hero-grid {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(rgba(10,58,143,.05) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(10,58,143,.05) 1px, transparent 1px) 0 0 / 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 40%, transparent 85%);
  opacity: .7;
}
.ns-hero-glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 65% at 50% 55%, rgba(10,58,143,.18) 0%, transparent 70%),
    radial-gradient(ellipse 30% 50% at 50% 70%, rgba(47,180,87,.20) 0%, transparent 70%),
    radial-gradient(circle 180px at 50% 45%, rgba(255,255,255,.75) 0%, transparent 65%);
  animation: nsHeroPulse 7s ease-in-out infinite;
}
@keyframes nsHeroPulse {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
/* Concentric rings — softly pulsing outward from the crest */
.ns-hero-rings {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: grid; place-items: center;
}
.ns-hero-rings span {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(10,58,143,.18);
  animation: nsRing 5.5s cubic-bezier(.22,.61,.36,1) infinite;
  opacity: 0;
}
.ns-hero-rings span:nth-child(2) { animation-delay: 1.8s; border-color: rgba(47,180,87,.22); }
.ns-hero-rings span:nth-child(3) { animation-delay: 3.6s; border-color: rgba(30,95,209,.22); }
@keyframes nsRing {
  0%   { transform: scale(.55); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}
.ns-hero-stage {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px 20px;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
/* 3D wrapper holds perspective transforms driven by scroll — CSS keyframe
   animation inside adds a continuous gentle tilt on top. */
.ns-crest-3d {
  width: clamp(260px, 28vw, 340px);
  aspect-ratio: 310 / 320;
  transform-style: preserve-3d;
  transform-origin: 50% 70%;
  will-change: transform, opacity;
  transition: opacity .25s ease;
}
.ns-hero-mark {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 18px 36px rgba(10,58,143,.32))
    drop-shadow(0 6px 18px rgba(47,180,87,.22));
  animation: nsCrestFloat 6.5s ease-in-out infinite;
  transform-origin: 50% 65%;
  transform-style: preserve-3d;
  backface-visibility: visible;
}
/* Continuous 3D "hover" — gentle Y-axis rock + subtle bob */
@keyframes nsCrestFloat {
  0%   { transform: translateY(0)    rotateY(-6deg) rotateX(2deg); }
  50%  { transform: translateY(-9px) rotateY( 6deg) rotateX(-2deg); }
  100% { transform: translateY(0)    rotateY(-6deg) rotateX(2deg); }
}
.ns-hero-tag {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(11px, 1vw, 13.5px);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(10,58,143,.72);
  font-weight: 500;
  text-align: center;
}
/* When the header becomes fixed, the hero bay reserves the extra space
   so content below does not jump up. 110px ≈ header height. */
/* Bay keeps its space reserved after scroll — the crest has already flipped
   away in 3D by then so it's naturally empty. Collapsing the height would
   cause content below to jump. */
html.ns-scrolled .ns-hero-bay { pointer-events: none; }
/* Hide hero bay completely on very small screens to avoid double-hero */
@media (max-width: 640px) {
  .ns-hero-bay { min-height: 280px; }
  .ns-crest-3d { width: 62vw; }
  .ns-hero-tag { letter-spacing: .2em; font-size: 10.5px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ns-hero-glow, .ns-hero-mark, .ns-hero-rings span { animation: none !important; }
  html body .fusion-logo img { transition: none !important; }
  .ns-crest-3d { transition: none !important; }
}

/* ---- Header row layout ---- */
/* At top: hero bay shows the large centred crest, and the small header logo
   is hidden — so the menu sits centred in the header row.
   On scroll: the small logo fades in on the LEFT and the menu sits centred
   in the remaining space to its right. */
html body .fusion-header .fusion-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  max-width: 1400px !important;
  width: 100% !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}
html.ns-at-top body .fusion-logo {
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  flex: 0 0 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html.ns-scrolled body .fusion-header .fusion-row {
  /* Logo flush to the far left, menu takes remaining space on the right */
  justify-content: flex-start !important;
  padding-left: 0 !important;
  gap: 0 !important;
}
html.ns-scrolled body .fusion-logo {
  flex: 0 0 auto !important;
  max-width: 80px !important;
  width: 80px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin-left: 24px !important;
  margin-right: 56px !important;
}
html body .fusion-main-menu {
  float: none !important;
  width: auto !important;
  flex: 0 1 auto !important;
  /* block-level so the inline-flex UL can size to its content (flex parents
     would shrink the UL below the sum of its children). */
  display: block !important;
  text-align: center !important;
  margin: 0 auto !important;
  min-width: 0 !important;
}
html.ns-scrolled body .fusion-main-menu {
  flex: 1 1 auto !important;
  margin-right: 24px !important;
}
html body .fusion-main-menu > ul {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  padding: 0 !important;
  list-style: none !important;
}
/* Defeat Avada's `.fusion-main-menu > ul > li { float: left }` so items
   stay in the flex flow and the UL shrinks to content width. */
html body .fusion-main-menu > ul > li {
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
}
html body .fusion-main-menu > ul > li > a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
  color: var(--ns-ink) !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;
  border: 0 !important;
  border-radius: 999px !important;
  position: relative;
  z-index: 1;
  background: transparent !important;
  transition: color .25s var(--ns-ease), background-color .25s var(--ns-ease), transform .2s var(--ns-ease) !important;
  white-space: nowrap !important;
  text-transform: capitalize !important;
}
@media (min-width: 1200px) {
  html body .fusion-main-menu > ul > li > a { font-size: 13.5px !important; padding: 8px 10px !important; }
}
/* Gentle capitalize: lowercase source + first letter cap via CSS */
html body .fusion-main-menu > ul > li > a { text-transform: none !important; }

/* Hover pill */
html body .fusion-main-menu > ul > li > a:hover {
  color: #0A3A8F !important;
  background: rgba(10,58,143,.07) !important;
  transform: translateY(-1px);
}
/* Active / current-menu-item filled pill */
html body .fusion-main-menu > ul > li.current-menu-item > a,
html body .fusion-main-menu > ul > li.current-menu-ancestor > a,
html body .fusion-main-menu > ul > li.current_page_item > a {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #0A3A8F 0%, #1E5FD1 100%) !important;
  box-shadow: 0 8px 20px -8px rgba(10,58,143,.55), 0 2px 6px rgba(10,58,143,.25) !important;
}
html body .fusion-main-menu > ul > li.current-menu-item > a:hover,
html body .fusion-main-menu > ul > li.current-menu-ancestor > a:hover,
html body .fusion-main-menu > ul > li.current_page_item > a:hover {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #0A3A8F 0%, #1E5FD1 60%, #2fb457 140%) !important;
  transform: translateY(-1px);
}

/* Hide the old underline pseudo — menu now uses pill fill */
html body .fusion-main-menu > ul > li > a::before { display: none !important; content: none !important; }

/* Submenus must escape ancestor overflow clipping */
html body .fusion-header-wrapper,
html body .fusion-header-wrapper .fusion-header,
html body .fusion-header,
html body .fusion-main-menu,
html body .fusion-main-menu > ul,
html body .fusion-main-menu > ul > li { overflow: visible !important; }
html body .fusion-main-menu > ul > li { position: relative !important; }
html body .fusion-main-menu .sub-menu {
  z-index: 2000 !important;
}

/* Sub-menu panels — glassy dropdowns, absolute-positioned directly below
   their menu item (the flex li was otherwise vertical-centering them). */
html body .fusion-main-menu > ul > li > .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 8px !important;
  /* border-box width: needs to cover longest anchor (~306px incl. its own
     padding) plus submenu's own 16px horizontal padding. 340px safely fits
     every label including "Toets- En Eksamenrooster 2026" and
     "Inligtingstuk – Babas En Peuters". */
  min-width: 340px !important;
  max-width: 380px !important;
}
html body .fusion-main-menu .sub-menu .sub-menu {
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  margin-top: 0 !important;
  margin-left: 6px !important;
  min-width: 340px !important;
  max-width: 380px !important;
}
html body .fusion-main-menu .sub-menu {
  background: rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(10,58,143,.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 50px -10px rgba(10,58,143,.18), 0 4px 12px rgba(10,58,143,.06) !important;
  padding: 8px !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  list-style: none !important;
}
html body .fusion-main-menu .sub-menu li {
  display: block !important;
  width: 100% !important;
  position: relative !important;
}
html body .fusion-main-menu .sub-menu li a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ns-ink) !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 0 !important;
  background: transparent !important;
  transition: background-color .2s var(--ns-ease), color .2s var(--ns-ease), transform .2s var(--ns-ease) !important;
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  white-space: nowrap !important;
}
html body .fusion-main-menu .sub-menu li a:hover {
  background: linear-gradient(135deg, rgba(10,58,143,.08) 0%, rgba(47,180,87,.08) 100%) !important;
  color: #0A3A8F !important;
  transform: translateX(2px);
}
html body .fusion-main-menu .sub-menu li.current-menu-item > a {
  background: linear-gradient(135deg, #0A3A8F 0%, #1E5FD1 100%) !important;
  color: #FFFFFF !important;
}

/* Nuke the in-menu search overlay block that consumed space + pushed TUIS off */
html body .fusion-main-menu .fusion-overlay-search,
html body .fusion-main-menu .fusion-main-menu-search,
html body .fusion-main-menu .fusion-custom-menu-item.fusion-main-menu-search {
  display: none !important;
}
html body .fusion-main-menu > ul > li.menu-item-home,
html body .fusion-main-menu > ul > li.menu-item-home > a {
  display: flex !important;
  align-items: center !important;
}

/* Secondary top bar — centred contact strip */
html body .fusion-secondary-header { background: var(--ns-grad-blue) !important; padding: 10px 0 !important; }
html body .fusion-secondary-header .fusion-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
}
html body .fusion-secondary-header .fusion-alignleft,
html body .fusion-secondary-header .fusion-alignright { display: none !important; }
html body .fusion-secondary-header .fusion-row::before {
  content: '\1F4E7  kdpnoord@noordskool.co.za   \2022   \260E  011 665 1390/1   \2022   Werk en Wen \00B7 Sedert 1919';
  display: inline-block;
  width: 100%;
  text-align: center;
  color: rgba(255,255,255,.95);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 2px 12px;
}
/* Social icons disabled per school request — hide in header, footer, and anywhere else */
html body .fusion-secondary-header .fusion-social-networks-wrapper,
html body .fusion-secondary-header .fusion-alignleft,
html body #wrapper .fusion-social-networks,
html body #footer .fusion-social-links-footer,
html body #footer .fusion-social-networks-wrapper {
  display: none !important;
}
html body .fusion-main-menu > ul > li:hover > a,
html body .fusion-main-menu > ul > li.current-menu-item > a,
html body .fusion-main-menu > ul > li.current-menu-ancestor > a {
  color: var(--ns-blue-bright) !important;
}
html body .fusion-main-menu > ul > li:hover > a::before,
html body .fusion-main-menu > ul > li.current-menu-item > a::before { transform: scaleX(1); }

html body .fusion-main-menu .sub-menu {
  background: rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 64px rgba(2,11,46,.18) !important;
  padding: 10px !important;
  margin-top: 8px !important;
}
html body .fusion-main-menu .sub-menu li a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  color: var(--ns-ink) !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  transition: all .2s var(--ns-ease) !important;
}
html body .fusion-main-menu .sub-menu li a:hover {
  background: var(--ns-grad-blue) !important;
  color: #FFF !important;
  transform: translateX(3px);
}

/* ==========================================================================
   4. HERO / PAGE TITLE — cosmic gradient mesh + floating orbs
   ========================================================================== */
html body .fusion-page-title-bar {
  background: var(--ns-grad-hero) !important;
  padding: 120px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: none !important;
}
html body .fusion-page-title-bar::before {
  content:''; position:absolute; inset:-50%; z-index:0;
  background:
    radial-gradient(circle at 15% 30%, rgba(59,130,246,.45), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(74,222,128,.45), transparent 40%),
    radial-gradient(circle at 50% 110%, rgba(6,182,212,.35), transparent 50%);
  filter: blur(40px);
  animation: nsFloat 20s ease-in-out infinite alternate;
}
html body .fusion-page-title-bar::after {
  content:''; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at center, black 20%, transparent 70%);
  mask-image: radial-gradient(circle at center, black 20%, transparent 70%);
}
@keyframes nsFloat {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(3%,-2%) scale(1.05); }
  100% { transform: translate(-3%,2%) scale(.97); }
}
html body .fusion-page-title-bar .fusion-page-title-row,
html body .fusion-page-title-bar > * { position: relative; z-index: 1; }

html body .fusion-page-title-bar h1,
html body .fusion-page-title-bar .fusion-title-heading,
html body .fusion-page-title-bar .entry-title {
  color: #FFF !important;
  font-size: clamp(3rem, 7vw, 6rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  text-shadow: 0 4px 40px rgba(0,0,0,.35), 0 0 80px rgba(59,130,246,.4);
  background: linear-gradient(180deg,#FFF 0%,#C7D9FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
html body .fusion-page-title-bar .fusion-breadcrumbs,
html body .fusion-page-title-bar .fusion-breadcrumbs a,
html body .fusion-page-title-bar .fusion-page-title-secondary {
  color: rgba(255,255,255,.75) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
}

/* ==========================================================================
   5. BUTTONS — gradient fill, shimmer, lift
   ========================================================================== */
html body .fusion-button,
html body .fusion-button-default,
html body button:not(.ns-cafe-cta-close):not(.ns-cafe-total-pill-go):not(.ns-cafe-submit),
html body input[type="submit"]:not(.ns-cafe-submit),
html body .button {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 16px 36px !important;
  border-radius: 999px !important;
  border: none !important;
  background: var(--ns-grad-blue) !important;
  color: #FFF !important;
  box-shadow: var(--ns-glow-blue) !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: transform .3s var(--ns-ease), box-shadow .3s var(--ns-ease) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}
html body .fusion-button::before,
html body .button::before,
html body button::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background: var(--ns-grad-green);
  opacity:0; transition: opacity .35s var(--ns-ease);
}
html body .fusion-button::after,
html body .button::after {
  content:''; position:absolute; top:0; left:-100%;
  width:60%; height:100%;
  background: linear-gradient(120deg,transparent, rgba(255,255,255,.35), transparent);
  transition: left .6s var(--ns-ease);
  pointer-events: none;
}
html body .fusion-button:hover,
html body .button:hover,
html body button:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--ns-glow-green) !important;
  color:#FFF !important;
}
html body .fusion-button:hover::before { opacity: 1; }
html body .fusion-button:hover::after,
html body .button:hover::after { left: 130%; }

/* ==========================================================================
   6. CONTENT BOXES / CARDS — glass, gradient border, tilt
   ========================================================================== */
html body .fusion-content-boxes .content-box-column,
html body .fusion-content-box {
  background: rgba(255,255,255,.7) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border-radius: 24px !important;
  padding: 4px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 10px 40px rgba(10,58,143,.1), inset 0 1px 0 rgba(255,255,255,.9) !important;
  transition: transform .4s var(--ns-ease), box-shadow .4s var(--ns-ease) !important;
  border: 1px solid rgba(255,255,255,.8) !important;
}
html body .fusion-content-boxes .content-box-column::before {
  content:''; position:absolute; inset:0; z-index:-1; border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(59,130,246,.4), transparent 50%, rgba(74,222,128,.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s var(--ns-ease);
}
html body .fusion-content-boxes .content-box-column:hover,
html body .fusion-content-box:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 64px rgba(10,58,143,.22), 0 0 40px rgba(59,130,246,.18) !important;
}
html body .fusion-content-boxes .content-box-column:hover::before { opacity: 1; }

html body .fusion-content-boxes .content-container { padding: 28px !important; }
html body .fusion-content-boxes .heading h2,
html body .fusion-content-boxes .heading h3 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  color: var(--ns-ink) !important;
}
html body .fusion-content-boxes .heading-link:hover h2,
html body .fusion-content-boxes .heading-link:hover h3 {
  background: var(--ns-grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
html body .fusion-content-boxes .image,
html body .fusion-content-boxes .image img {
  border-radius: 20px !important;
  overflow: hidden !important;
}
html body .fusion-content-boxes .image img {
  transition: transform .7s var(--ns-ease) !important;
}
html body .fusion-content-boxes .content-box-column:hover .image img { transform: scale(1.08) !important; }

/* ==========================================================================
   7. SECTIONS
   ========================================================================== */
html body .fusion-fullwidth { padding: 100px 0 !important; position: relative; overflow: hidden; }
/* Per-row backgrounds are defined in sections 14–17 — no generic stripes here. */

html body .fusion-title h2::after,
html body .fusion-title h1::after {
  content:''; display:block;
  width: 80px; height: 4px;
  background: var(--ns-grad-accent);
  margin: 20px auto 0;
  border-radius: 2px;
  box-shadow: 0 2px 12px rgba(59,130,246,.4);
}
html body .fusion-title.title-left h2::after,
html body .fusion-title[data-align="left"] h2::after { margin-left: 0; }

/* ==========================================================================
   8. FOOTER — deep space
   ========================================================================== */
html body #footer,
html body .fusion-footer-widget-area {
  background: radial-gradient(ellipse at top, #0A3A8F 0%, #020B2E 60%) !important;
  color: rgba(255,255,255,.75) !important;
  padding: 80px 0 !important;
  border-top: none !important;
  position: relative;
  overflow: hidden;
}
html body .fusion-footer-widget-area::before {
  content:''; position: absolute; inset:0;
  background:
    radial-gradient(circle at 20% 0%, rgba(59,130,246,.25), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(74,222,128,.18), transparent 50%);
  pointer-events: none;
}
html body #footer h1, html body #footer h2, html body #footer h3, html body #footer h4,
html body .fusion-footer-widget-area h1,
html body .fusion-footer-widget-area h2,
html body .fusion-footer-widget-area h3,
html body .fusion-footer-widget-area h4 {
  color: #FFF !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  margin-bottom: 20px !important;
  position: relative;
  padding-bottom: 14px;
}
html body .fusion-footer-widget-area h3::after,
html body .fusion-footer-widget-area h4::after {
  content:''; position:absolute; left:0; bottom:0;
  width: 40px; height: 3px;
  background: var(--ns-grad-accent);
  border-radius: 2px;
}
html body #footer a,
html body .fusion-footer-widget-area a {
  color: rgba(255,255,255,.75) !important;
  transition: color .2s var(--ns-ease), padding .2s var(--ns-ease) !important;
  position: relative;
}
html body #footer a:hover,
html body .fusion-footer-widget-area a:hover {
  color: var(--ns-green-bright) !important;
  padding-left: 6px;
}
html body .fusion-footer-copyright-area {
  background: rgba(0,0,0,.3) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding: 20px 0 !important;
  color: rgba(255,255,255,.5) !important;
  font-size: 13px !important;
}

/* ==========================================================================
   9. FORMS — glass fields, neon focus
   ========================================================================== */
html body .wpcf7 input[type="text"],
html body .wpcf7 input[type="email"],
html body .wpcf7 input[type="tel"],
html body .wpcf7 textarea,
html body input[type="text"],
html body input[type="email"],
html body input[type="search"],
html body textarea,
html body select {
  border: 1.5px solid var(--ns-line) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  background: rgba(255,255,255,.7) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  transition: all .25s var(--ns-ease) !important;
}
html body .wpcf7 input:focus, html body .wpcf7 textarea:focus,
html body input:focus, html body textarea:focus {
  border-color: var(--ns-blue-bright) !important;
  background: #FFF !important;
  box-shadow: 0 0 0 4px rgba(59,130,246,.15), 0 8px 24px rgba(59,130,246,.12) !important;
  outline: none !important;
}

/* ==========================================================================
   10. IMAGES
   ========================================================================== */
html body .post-content img,
html body .fusion-imageframe img {
  border-radius: 18px !important;
  box-shadow: 0 12px 40px rgba(10,58,143,.12);
}

/* ==========================================================================
   11. LINKS
   ========================================================================== */
html body .post-content a:not(.fusion-button):not(.button):not(.ns-cafe-cta):not(.ns-cafe-cta *),
html body .fusion-text a:not(.fusion-button):not(.button):not(.ns-cafe-cta):not(.ns-cafe-cta *) {
  color: var(--ns-blue-bright) !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  background-image: var(--ns-grad-accent);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .3s var(--ns-ease), color .2s var(--ns-ease);
}
html body .post-content a:not(.fusion-button):not(.ns-cafe-cta):hover,
html body .fusion-text a:not(.fusion-button):not(.ns-cafe-cta):hover {
  background-size: 100% 2px;
  color: var(--ns-green-mid) !important;
}

/* ==========================================================================
   12. MOBILE + RESPONSIVE
   ========================================================================== */
html body .fusion-mobile-nav-holder,
html body .fusion-mobile-menu-design-flyout {
  background: rgba(255,255,255,.95) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
}
html body .fusion-mobile-menu-icons a { color: var(--ns-blue) !important; }
@media (max-width: 768px) {
  html body .fusion-fullwidth { padding: 60px 0 !important; }
  html body .fusion-page-title-bar { padding: 80px 0 !important; }
  html body .fusion-button { padding: 14px 28px !important; font-size: 14px !important; }
}

/* ==========================================================================
   13. LOGO — swap Avada default for our custom horizontal lockup
   Painted via CSS so we don't depend on Avada's (currently corrupted) theme options.
   We swap the <img> src via content: url() — leaves layout intact, max-height rule below governs size.
   ========================================================================== */
html body .fusion-logo img,
html body .fusion-logo .fusion-standard-logo,
html body .fusion-logo img.fusion-logo-default {
  content: url('/wp-content/uploads/2026/04/noordskool-crest-only.png') !important;
  max-height: 80px !important;
  height: 80px !important;
  width: auto !important;
  max-width: 80px !important;
}
/* When the sticky logo becomes visible, give it a subtle 3D tilt-in so it
   feels like the hero crest "flew" into the header. */
html.ns-scrolled body .fusion-logo img {
  animation: nsLogoArrive .65s cubic-bezier(.22,.61,.36,1) both;
  transform-origin: 50% 60%;
}
@keyframes nsLogoArrive {
  0%   { opacity: 0; transform: translateY(-20px) rotateX(-35deg) rotateY(18deg) scale(.7); }
  60%  { opacity: 1; transform: translateY(2px)   rotateX(8deg)   rotateY(-4deg) scale(1.04); }
  100% { opacity: 1; transform: translateY(0)     rotateX(0)      rotateY(0)     scale(1); }
}

/* ==========================================================================
   14. HOMEPAGE — Welkom HERO band (fusion-builder-row-1 / welcome-intro-text-wrapper)
   ========================================================================== */
html body .welcome-intro-text-wrapper {
  background: var(--ns-grad-hero) !important;
  background-color: transparent !important;
  padding: 120px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
html body .welcome-intro-text-wrapper::before {
  content:''; position:absolute; inset:-30%; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(59,130,246,.55), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(74,222,128,.45), transparent 45%),
    radial-gradient(circle at 50% 110%, rgba(6,182,212,.35), transparent 55%);
  filter: blur(50px);
  animation: nsFloat 20s ease-in-out infinite alternate;
}
html body .welcome-intro-text-wrapper::after {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
html body .welcome-intro-text-wrapper > .fusion-builder-row { position: relative; z-index: 1; }

html body .welcome-intro-text h4,
html body .welcome-intro-text .fusion-text-1 h4 {
  color: rgba(255,255,255,.75) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: .35em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  position: relative;
  padding-left: 60px;
  display: inline-block;
}
html body .welcome-intro-text h4::before {
  content:''; position:absolute; left:0; top:50%; width:40px; height:2px;
  background: var(--ns-grad-accent);
  transform: translateY(-50%);
}
html body .welcome-intro-text h2,
html body .welcome-intro-text .fusion-text-2 h2 {
  color: #FFF !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(2.75rem, 6vw, 5.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
  margin: 0 0 24px 0 !important;
  text-shadow: 0 8px 40px rgba(0,0,0,.35), 0 0 80px rgba(59,130,246,.3);
}
html body .welcome-intro-text h2 strong {
  background: linear-gradient(180deg, #FFFFFF 0%, #C7D9FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
html body .welcome-intro-text .fusion-text-2::after {
  content: '"Werk en Wen"  ·  Sedert 1919  ·  Gehalte-onderrig in Afrikaans';
  display: block;
  color: rgba(255,255,255,.78);
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .02em;
  margin-top: 8px;
  max-width: 640px;
}
html body .welcome-intro-text-button .fusion-button.button-1 {
  padding: 18px 40px !important;
  font-size: 15px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #22C55E 0%, #4ADE80 100%) !important;
  border: 2px solid rgba(255,255,255,.25) !important;
  box-shadow: 0 10px 40px rgba(74,222,128,.35), 0 0 60px rgba(74,222,128,.2) !important;
}
html body .welcome-intro-text-button .fusion-button.button-1:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 60px rgba(74,222,128,.55), 0 0 80px rgba(74,222,128,.3) !important;
}

/* ==========================================================================
   15. HOMEPAGE — Recent-posts 6-card grid (fusion-builder-row-2)
   ========================================================================== */
html body.home .fusion-builder-row-2,
html body.page-id-6 .fusion-builder-row-2,
html body.blog .fusion-builder-row-2 {
  background: linear-gradient(180deg, #F1F5FF 0%, #FFFFFF 100%) !important;
}
/* Empty-row hiding for non-home pages happens via JS in functions.php — CSS :has()
   doesn't help here because Avada injects empty .fusion-text wrappers that defeat it. */
html body .fusion-recent-posts .fusion-columns {
  gap: 28px;
}
html body .fusion-recent-posts .fusion-column.post {
  background: #FFFFFF !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 18px rgba(10,58,143,.06), 0 20px 60px rgba(10,58,143,.08) !important;
  transition: transform .4s var(--ns-ease), box-shadow .4s var(--ns-ease) !important;
  position: relative !important;
  border: 1px solid rgba(255,255,255,.9) !important;
}
html body .fusion-recent-posts .fusion-column.post::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: var(--ns-grad-accent);
  opacity: 0; transition: opacity .3s var(--ns-ease);
  z-index: 2;
}
html body .fusion-recent-posts .fusion-column.post:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 30px 80px rgba(10,58,143,.18), 0 0 40px rgba(59,130,246,.12) !important;
}
html body .fusion-recent-posts .fusion-column.post:hover::before { opacity: 1; }

html body .fusion-recent-posts .fusion-column.post .fusion-flexslider {
  border-radius: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body .fusion-recent-posts .fusion-column.post .fusion-flexslider.fusion-flexslider-loading,
html body .fusion-recent-posts .fusion-column.post .flexslider-loading {
  visibility: visible !important;
  opacity: 1 !important;
}
html body .fusion-recent-posts .fusion-column.post .fusion-flexslider .slides {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .fusion-recent-posts .fusion-column.post .fusion-flexslider .slides > li {
  display: block !important;
  list-style: none !important;
}
html body .fusion-recent-posts .fusion-column.post .fusion-flexslider img {
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform .7s var(--ns-ease) !important;
}
html body .fusion-recent-posts .fusion-column.post:hover .fusion-flexslider img {
  transform: scale(1.08) !important;
}
html body .fusion-recent-posts .recent-posts-content {
  padding: 24px 26px 26px !important;
}
html body .fusion-recent-posts .entry-title,
html body .fusion-recent-posts .entry-title a {
  display: none !important;
}
html body .fusion-recent-posts .home-blog-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  line-height: 1.15 !important;
  margin: 0 0 12px 0 !important;
  background: var(--ns-grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
html body .fusion-recent-posts .recent-posts-content p {
  color: var(--ns-body) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 0 16px 0 !important;
}
html body .fusion-recent-posts .recent-posts-content p.lees-meer-home-post-wrapper {
  margin-top: auto !important;
}
html body .lees-meer-home-post {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--ns-blue-bright) !important;
  background: none !important;
  transition: gap .2s var(--ns-ease), color .2s var(--ns-ease) !important;
}
html body .lees-meer-home-post:hover { gap: 14px; color: var(--ns-green-mid) !important; }
html body .lees-meer-home-post-img { filter: hue-rotate(200deg) saturate(2); }

/* ==========================================================================
   16. HOMEPAGE — About / mission band (fusion-builder-row-3)
   ========================================================================== */
html body.home .fusion-builder-row-3,
html body.page-id-6 .fusion-builder-row-3,
html body.blog .fusion-builder-row-3 {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  padding: 100px 0 !important;
  position: relative;
}
/* Row-3 empty-hide handled by JS — see noordskool_collapse_empty_rows(). */
html body .ns-row-empty { display: none !important; }
/* "OOR ONS" label is only relevant on the homepage About band. Scope it so
   it doesn't appear floating over unrelated row-3 sections on subpages. */
html body.home .fusion-builder-row-3::before,
html body.page-id-6 .fusion-builder-row-3::before,
html body.blog .fusion-builder-row-3::before {
  content:'OOR ONS'; position:absolute; top:40px; left:50%; transform:translateX(-50%);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .4em;
  color: var(--ns-blue-bright);
  padding: 8px 18px;
  background: rgba(59,130,246,.1);
  border-radius: 999px;
}
/* Avada's fusion-animated class starts elements at opacity:0 and relies on
   scroll-intersection JS to fade them in. Anywhere the intersection doesn't
   fire (fast loads, JS errors, long pages) content sits invisible. Force all
   animated elements to be visible — we still keep CSS transitions elsewhere. */
html body .fusion-animated,
html body [class*="fusion-animated"],
html body .aflaaibaar-column-left,
html body .aflaaibaar-column-left.fusion-animated {
  opacity: 1 !important;
  visibility: visible !important;
}
html body .aflaaibaar-column-left .fusion-text,
html body .aflaaibaar-column-left .fusion-text p,
html body .fusion-builder-row-3 .fusion-text p {
  color: var(--ns-ink) !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  max-width: 900px;
  margin: 0 auto 24px auto !important;
  text-align: center !important;
  opacity: 1 !important;
}
html body .aflaaibaar-column-left .fusion-text-3 p::first-line {
  font-weight: 600;
  color: var(--ns-blue) !important;
}
html body .aflaaibaar-column-left .fusion-full-width-sep {
  border-color: transparent !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--ns-line), transparent) !important;
  max-width: 60% !important;
  margin: 40px auto !important;
}

/* ==========================================================================
   17. HOMEPAGE — News / Nuus banner (fusion-builder-row-4)
   ========================================================================== */
html body div.fusion-fullwidth.fusion-builder-row-4,
html body div.fusion-fullwidth.fusion-builder-row-4[style],
html body div[class*="fusion-builder-row-4"]:not(.fusion-builder-row) {
  background: #0F7A33 linear-gradient(135deg, #0A5C26 0%, #1EA34A 55%, #2AB84F 100%) left top / cover no-repeat !important;
  padding: 70px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
}
html body div.fusion-fullwidth.fusion-builder-row-4::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(255,255,255,.12), transparent 50%),
    radial-gradient(ellipse at 85% 50%, rgba(10,58,143,.3), transparent 55%);
}
html body .fusion-builder-row-4 h2,
html body .fusion-builder-row-4 h2.white,
html body .fusion-builder-row-4 .fusion-text-7 h2,
html body .fusion-builder-row-4 .fusion-text h2 {
  color: #FFFFFF !important;
  background: none !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  margin: 4px 0 0 0 !important;
  text-shadow: 0 4px 24px rgba(0,0,0,.2);
}
html body .fusion-builder-row-4 h4.white,
html body .fusion-builder-row-4 .fusion-text-6 h4 {
  color: rgba(255,255,255,.85) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
html body .fusion-builder-row-4 .on-green-background-link {
  color: #FFF !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
  text-decoration-color: rgba(255,255,255,.5) !important;
  transition: text-decoration-color .2s var(--ns-ease) !important;
}
html body .fusion-builder-row-4 .on-green-background-link:hover {
  text-decoration-color: #FFF !important;
}
html body .fusion-builder-row-4 .fusion-text-5 img {
  border-radius: 50% !important;
  background: rgba(255,255,255,.2);
  padding: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15), inset 0 2px 0 rgba(255,255,255,.2) !important;
  transition: transform .3s var(--ns-ease) !important;
}
html body .fusion-builder-row-4 .fusion-text-5 img:hover { transform: rotate(-10deg) scale(1.05); }

/* Facebook follow CTA — replaces the legacy on-site Nuus list. The wrapper
   row keeps its green gradient (rule 17 above); these styles theme the
   inner content the JS injects. */
html body .fusion-builder-row-4 .ns-fb-host {
  display: flex !important;
  justify-content: center !important;
  padding: 8px 24px !important;
}
.ns-fb-cta {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  color: #FFF;
  font-family: 'Inter', sans-serif;
}
.ns-fb-cta .ns-fb-kicker {
  color: rgba(255,255,255,.85);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.ns-fb-cta .ns-fb-title {
  color: #FFFFFF;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  text-shadow: 0 4px 24px rgba(0,0,0,.2);
}
.ns-fb-cta .ns-fb-sub {
  color: rgba(255,255,255,.92);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 auto 22px;
  max-width: 560px;
}
.ns-fb-cta .ns-fb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #0A3A8F;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 10px 28px -10px rgba(0,0,0,.35), inset 0 -2px 0 rgba(10,58,143,.06);
  transition: transform .2s var(--ns-ease), box-shadow .2s var(--ns-ease);
}
.ns-fb-cta .ns-fb-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgba(0,0,0,.4), inset 0 -2px 0 rgba(10,58,143,.08);
}
.ns-fb-cta .ns-fb-icon { color: #1877F2; }

/* Sub-page section headings tagged .green (used heavily on the
   Reëls en regulasies pages) were inheriting #2fb457 on white — about
   2.2:1, well below the WCAG AA 4.5:1 minimum. Force the darker school
   green so the headings remain "the green ones" but actually read clearly. */
html body h1.green,
html body h2.green,
html body h3.green,
html body h4.green,
html body h5.green,
html body h6.green {
  color: var(--ns-green) !important; /* #0F7A33 — ~6:1 contrast on white */
}

/* ==========================================================================
   18. FOOTER COPYRIGHT — school + MR Computers credit
   ========================================================================== */
html body #footer.fusion-footer-copyright-area {
  background: linear-gradient(180deg, #061E4A 0%, #0A3A8F 100%) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding: 22px 0 !important;
}
html body .fusion-copyright-notice.ns-copyright {
  text-align: center !important;
  color: rgba(255,255,255,.85) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: .01em !important;
  width: 100% !important;
  border: 0 !important;
  padding: 0 !important;
}
.ns-copyright-inner {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 14px;
  max-width: 100%;
}
.ns-copyright-school { color: rgba(255,255,255,.92); font-weight: 500; }
.ns-copyright-sep { color: rgba(255,255,255,.35); }
.ns-copyright-credit { color: rgba(255,255,255,.75); }
.ns-copyright-credit a {
  color: #8FE3A8 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: linear-gradient(90deg, #2fb457, #8FE3A8);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity .2s var(--ns-ease);
  border-bottom: 1px dashed rgba(143,227,168,.35);
  padding-bottom: 1px;
}
.ns-copyright-credit a:hover { opacity: .8; }

/* ==========================================================================
   19. PERSONAL WARMTH — lively accents without losing professionalism
   ========================================================================== */

/* Dynamic greeting — animated pill above the main heading */
.ns-greeting {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 18px;
  animation: nsGreetingIn .9s cubic-bezier(.22,.61,.36,1) both;
}
.ns-greeting-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74,222,128,.6);
  animation: nsDot 2s ease-out infinite;
}
@keyframes nsDot {
  0%   { box-shadow: 0 0 0 0   rgba(74,222,128,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0   rgba(74,222,128,0); }
}
@keyframes nsGreetingIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stat strip wrapper + inner */
.ns-stats-wrap {
  width: 100%;
  padding: 40px 20px 10px;
  background: linear-gradient(180deg, #F6F9FC 0%, transparent 100%);
}
.ns-stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 40px;
  max-width: 1120px; margin: 0 auto;
}
.ns-stat {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 10px 14px; min-width: 130px;
  position: relative;
  transition: transform .3s var(--ns-ease);
}
.ns-stat:hover { transform: translateY(-3px); }
.ns-stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1;
  background: linear-gradient(135deg, #0A3A8F 0%, #1D5FC8 50%, #22C55E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.02em;
}
.ns-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ns-body);
  margin-top: 6px;
  text-align: center;
}
.ns-stat + .ns-stat::before {
  content: ''; position: absolute; left: -20px; top: 20%; bottom: 20%;
  width: 1px; background: linear-gradient(180deg, transparent, var(--ns-line), transparent);
}

/* Hand-drawn chalk underline under the main welcome heading */
.ns-chalk-line {
  display: block;
  width: 220px; height: 18px;
  margin: 14px auto 0;
  opacity: .9;
}

/* Warm tilt on card hover */
html body .fusion-recent-posts .fusion-column.post {
  transition: transform .35s var(--ns-ease), box-shadow .35s var(--ns-ease) !important;
}
html body .fusion-recent-posts .fusion-column.post:nth-child(odd):hover {
  transform: translateY(-6px) rotate(-.5deg) !important;
}
html body .fusion-recent-posts .fusion-column.post:nth-child(even):hover {
  transform: translateY(-6px) rotate(.5deg) !important;
}

/* LIVE pulse-dot on the news banner heading */
html body .fusion-builder-row-4 h2::before,
html body .fusion-builder-row-4 .fusion-title h2::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px; border-radius: 50%;
  background: #FFD166;
  margin-right: 12px; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(255,209,102,.8);
  animation: nsLive 1.8s ease-out infinite;
}
@keyframes nsLive {
  0%   { box-shadow: 0 0 0 0   rgba(255,209,102,.7); }
  70%  { box-shadow: 0 0 0 14px rgba(255,209,102,0); }
  100% { box-shadow: 0 0 0 0   rgba(255,209,102,0); }
}

/* Friendly hover float on logo in the hero bay */
.ns-hero-mark { cursor: default; }
.ns-hero-mark:hover { animation-play-state: paused; transform: scale(1.04) rotate(-2deg); transition: transform .5s var(--ns-ease); }

/* Soft confetti dots floating in the hero bay (pure CSS) */
.ns-hero-bay::after {
  content: '';
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    radial-gradient(circle 3px at 12% 28%,  #4ADE80 99%, transparent 100%),
    radial-gradient(circle 2px at 22% 72%,  #3B82F6 99%, transparent 100%),
    radial-gradient(circle 2.5px at 78% 22%,#FFD166 99%, transparent 100%),
    radial-gradient(circle 2px at 88% 68%,  #22C55E 99%, transparent 100%),
    radial-gradient(circle 1.5px at 35% 18%,#0A3A8F 99%, transparent 100%),
    radial-gradient(circle 2px at 65% 82%,  #1D5FC8 99%, transparent 100%);
  opacity: .6;
  animation: nsConfetti 9s ease-in-out infinite;
}
@keyframes nsConfetti {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(-6px); opacity: .8; }
}

/* Warm background tint layer for homepage to feel less sterile */
body.home #main { background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 30%, #F6F9FC 100%); }

/* Principal's signature-style thank-you below the Oor Ons block */
.ns-signoff {
  display: block;
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-size: 32px;
  color: var(--ns-blue);
  margin: 22px auto 0;
  text-align: center;
  opacity: 0;
  animation: nsFadeUp 1.2s ease-out .4s both;
}
.ns-signoff small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ns-muted);
  margin-top: 4px;
  font-weight: 500;
}
@keyframes nsFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   20. PERSONEEL / STAFF — fusion_person cards (Bestuurspan, Grondslagfase, etc.)
   Fixes the inline `background-color: var(--awb-color8)` (near-black) on
   .person-desc which rendered name+title black-on-black.
   ========================================================================== */
html body .fusion-person {
  background: #FFFFFF !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(17, 39, 70, .06), 0 10px 28px rgba(17, 39, 70, .08) !important;
  transition: transform .35s var(--ns-ease), box-shadow .35s var(--ns-ease) !important;
  margin-bottom: 28px !important;
}
html body .fusion-person:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 4px 12px rgba(17, 39, 70, .08), 0 18px 40px rgba(17, 39, 70, .14) !important;
}
html body .fusion-person .person-shortcode-image-wrapper,
html body .fusion-person .person-image-container {
  display: block !important;
  width: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
html body .fusion-person .person-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  transition: transform .5s var(--ns-ease) !important;
}
html body .fusion-person:hover .person-img { transform: scale(1.04); }

html body .fusion-person .person-desc,
html body .fusion-person .person-desc[style] {
  background: #FFFFFF !important;
  padding: 18px 20px 20px !important;
  margin-top: 0 !important;
  text-align: center !important;
  border-top: 1px solid rgba(17, 39, 70, .06) !important;
}
html body .fusion-person .person-author,
html body .fusion-person .person-author-wrapper {
  display: block !important;
  text-align: center !important;
}
html body .fusion-person .person-name {
  display: block !important;
  color: var(--ns-blue) !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: .01em !important;
  line-height: 1.25 !important;
  margin-bottom: 4px !important;
}
html body .fusion-person .person-title {
  display: block !important;
  color: var(--ns-muted) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
html body .fusion-person .person-content {
  color: var(--ns-ink) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-top: 10px !important;
}

/* Give each staff section its own page-title breathing room */
html body h2.blue.page-title {
  color: var(--ns-blue) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  text-align: center !important;
  padding-top: 4px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* The fusion-text wrapper around the page title carries its own bottom
   margin from default body styles — collapse it so the separator below
   is governed only by the rule that follows. */
html body .fusion-text:has(> h2.blue.page-title) {
  margin-bottom: 0 !important;
}

/* The decorative green separator under any page title is rendered with
   inline 30px top + 30px bottom margins from the page-builder
   shortcode. Combined with default h2/h3 margins and the next
   container's padding, that previously pushed the first sub-section
   heading down by ~120px — far too airy. Pull the separator in tight
   and collapse the surrounding clearfix divs so the page title and its
   first sub-section sit on the same visual beat. */
html body .fusion-text:has(> h2.blue.page-title) ~ .fusion-separator,
html body .fusion-text:has(> h2.blue.page-title) + .fusion-sep-clear + .fusion-separator,
html body .fusion-text:has(h2.blue.page-title) ~ .fusion-separator {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
html body .fusion-text:has(h2.blue.page-title) ~ .fusion-sep-clear,
html body .fusion-text:has(h2.blue.page-title) + .fusion-sep-clear {
  height: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
}
/* Outer .fusion-fullwidth that hosts the page title — its bottom
   padding is already 0 from the shortcode, but the next container's
   .fusion-builder-row often inherits a top margin. Zero the gap
   between the title row and the row that follows it. */
html body .fusion-fullwidth:has(> .fusion-builder-row > .fusion-builder-column h2.blue.page-title) {
  padding-top: 12px !important;
  padding-bottom: 0 !important;
}
html body .fusion-fullwidth:has(> .fusion-builder-row > .fusion-builder-column h2.blue.page-title) + .fusion-fullwidth {
  padding-top: 0 !important;
}

/* Sub-section h3.blue headings (e.g. Somersdrag, Wintersdrag, Algemeen
   on the dress-code pages) — render as a coloured banner with white
   text. Default styling left them as another line of dark-blue text
   nearly indistinguishable from the body copy; the banner gives each
   sub-section a clear visual handle. */
html body h3.blue {
  display: block !important;
  background: linear-gradient(135deg, #0A3A8F 0%, #1E5FD1 100%) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
  padding: 14px 22px !important;
  border-radius: 10px !important;
  margin: 22px 0 18px !important;
  box-shadow: 0 8px 22px -10px rgba(10,58,143,.4) !important;
}

/* Algemeen section — the entire container is tagged at runtime with
   .ns-section-dark (see functions.php). Render as a dark blue band so
   every heading, paragraph, list item below the "Algemeen" title reads
   in white against the band. The h3 banner is dialled back inside the
   band so it doesn't compete with the surrounding colour. */
html body .ns-section-dark {
  background: linear-gradient(135deg, #0A3A8F 0%, #1E5FD1 100%) !important;
  border-radius: 18px !important;
  padding: 44px 36px !important;
  margin: 30px 0 !important;
  box-shadow: 0 18px 40px -20px rgba(10,58,143,.45);
  position: relative;
}
html body .ns-section-dark,
html body .ns-section-dark p,
html body .ns-section-dark li,
html body .ns-section-dark ul,
html body .ns-section-dark ol,
html body .ns-section-dark span,
html body .ns-section-dark strong,
html body .ns-section-dark em,
html body .ns-section-dark h2,
html body .ns-section-dark h3,
html body .ns-section-dark h4,
html body .ns-section-dark h5,
html body .ns-section-dark h6 {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
html body .ns-section-dark h3.blue {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 0 10px !important;
  margin: 0 0 22px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.28) !important;
  font-size: 1.65rem !important;
}
html body .ns-section-dark h4.green {
  font-weight: 700 !important;
  margin-top: 18px !important;
}
html body .ns-section-dark a {
  color: #FFD166 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255,209,102,.55) !important;
  text-underline-offset: 3px !important;
}
html body .ns-section-dark a:hover {
  text-decoration-color: #FFD166 !important;
}
html body .ns-section-dark .fusion-builder-column {
  margin-bottom: 0 !important;
}
html body .ns-section-dark .fusion-builder-row > .fusion-builder-column + .fusion-builder-column {
  margin-top: 6px !important;
}
html body .ns-section-dark .fusion-text {
  margin-bottom: 0 !important;
}
html body .ns-section-dark .fusion-separator {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}
html body .ns-section-dark .fusion-sep-clear {
  height: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
}
html body .ns-section-dark h4.green + .fusion-sep-clear + .fusion-separator,
html body .ns-section-dark h4.green ~ .fusion-separator {
  margin-top: 2px !important;
  margin-bottom: 8px !important;
}
html body .ns-section-dark ul ul {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

/* ==========================================================================
   24. 3D DESIGN LAYER — perspective, tilt, depth and layered motion
   Applied on top of existing components so structure is unchanged.
   ========================================================================== */

/* Shared 3D tokens */
:root {
  --ns-3d-ease: cubic-bezier(.22, .9, .32, 1);
  --ns-3d-perspective: 1000px;
  --ns-3d-tilt: 6deg;
  --ns-3d-lift: 14px;
}

/* --- PERSON / STAFF CARDS: 3D tilt on hover ------------------------------- */
html body .fusion-builder-column:has(.fusion-person) {
  perspective: var(--ns-3d-perspective) !important;
}
html body .fusion-person {
  transform-style: preserve-3d !important;
  will-change: transform, box-shadow !important;
  transform: perspective(var(--ns-3d-perspective)) rotateX(0) rotateY(0) translateZ(0) !important;
  transition: transform .5s var(--ns-3d-ease),
              box-shadow .5s var(--ns-3d-ease) !important;
}
html body .fusion-person:hover {
  transform: perspective(var(--ns-3d-perspective)) rotateX(3deg) rotateY(-4deg) translateZ(14px) !important;
  box-shadow:
    0 4px 12px rgba(17,39,70,.06),
    0 18px 40px rgba(17,39,70,.14),
    0 42px 80px -12px rgba(10,58,143,.28) !important;
}
html body .fusion-person .person-desc {
  transform: translateZ(30px);
  transform-style: preserve-3d;
}
html body .fusion-person .person-name {
  transform: translateZ(10px);
}

/* --- RECENT POST CARDS: 3D perspective tilt ------------------------------- */
html body .fusion-recent-posts .fusion-columns {
  perspective: 1400px !important;
}
html body .fusion-recent-posts .fusion-column.post {
  transform-style: preserve-3d !important;
  transform: perspective(1400px) rotateX(0) rotateY(0) !important;
}
html body .fusion-recent-posts .fusion-column.post:hover {
  transform: perspective(1400px) rotateX(4deg) rotateY(-5deg) translateY(-10px) translateZ(20px) !important;
  box-shadow:
    0 10px 28px rgba(10,58,143,.10),
    0 40px 90px -10px rgba(10,58,143,.25),
    0 0 60px rgba(59,130,246,.14) !important;
}
html body .fusion-recent-posts .fusion-column.post .fusion-image-wrapper,
html body .fusion-recent-posts .fusion-column.post .fusion-flexslider {
  transform: translateZ(30px);
  transform-style: preserve-3d;
}
html body .fusion-recent-posts .fusion-column.post h2,
html body .fusion-recent-posts .fusion-column.post h3 {
  transform: translateZ(24px);
  transform-style: preserve-3d;
}

/* --- STATS COUNTERS: 3D flip-in on enter ---------------------------------- */
html body .ns-stats-wrap { perspective: 1200px !important; }
html body .ns-stat {
  transform-style: preserve-3d;
  animation: nsStatFlip .9s var(--ns-3d-ease) both;
}
html body .ns-stat:nth-child(1) { animation-delay: .05s; }
html body .ns-stat:nth-child(2) { animation-delay: .20s; }
html body .ns-stat:nth-child(3) { animation-delay: .35s; }
html body .ns-stat:nth-child(4) { animation-delay: .50s; }
@keyframes nsStatFlip {
  0%   { opacity: 0; transform: rotateX(-55deg) translateZ(-40px) translateY(20px); }
  60%  { opacity: 1; transform: rotateX(8deg)   translateZ(10px)  translateY(-4px); }
  100% { opacity: 1; transform: rotateX(0)      translateZ(0)     translateY(0); }
}
html body .ns-stat:hover {
  transform: translateY(-6px) rotateX(-4deg) translateZ(16px);
  transition: transform .35s var(--ns-3d-ease);
}

/* --- BUTTONS: 3D press with layered edges --------------------------------- */
html body .fusion-button,
html body a.button,
html body input[type="submit"],
html body .on-green-background-link {
  transform: perspective(600px) translateZ(0) !important;
  transition: transform .25s var(--ns-3d-ease),
              box-shadow .3s var(--ns-3d-ease),
              filter .3s var(--ns-3d-ease) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 -2px 0 rgba(0,0,0,.18) inset,
    0 2px 4px rgba(10,58,143,.18),
    0 8px 20px rgba(10,58,143,.15) !important;
  will-change: transform !important;
}
html body .fusion-button:hover,
html body a.button:hover,
html body input[type="submit"]:hover,
html body .on-green-background-link:hover {
  transform: perspective(600px) translateY(-3px) translateZ(8px) rotateX(-4deg) !important;
  filter: brightness(1.05);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -2px 0 rgba(0,0,0,.22) inset,
    0 8px 14px rgba(10,58,143,.22),
    0 20px 40px rgba(10,58,143,.25) !important;
}
html body .fusion-button:active,
html body a.button:active,
html body input[type="submit"]:active {
  transform: perspective(600px) translateY(0) translateZ(-2px) rotateX(2deg) !important;
  filter: brightness(.95);
  box-shadow:
    0 -1px 0 rgba(255,255,255,.15) inset,
    0 2px 0 rgba(0,0,0,.24) inset,
    0 2px 6px rgba(10,58,143,.2) !important;
}

/* --- MENU ITEMS: subtle 3D lift on hover ---------------------------------- */
html body .fusion-main-menu > ul > li > a {
  transform: translateZ(0);
  transition: transform .25s var(--ns-3d-ease),
              color .25s var(--ns-3d-ease),
              background-color .25s var(--ns-3d-ease),
              box-shadow .25s var(--ns-3d-ease) !important;
}
html body .fusion-main-menu > ul > li:hover > a {
  transform: translateY(-2px) translateZ(6px);
}

/* --- DROPDOWN SUB-MENU: 3D flip-open --------------------------------------- */
html body .fusion-main-menu > ul > li {
  perspective: 900px !important;
}
html body .fusion-main-menu .sub-menu {
  transform-origin: top center !important;
  transform: rotateX(-18deg) translateY(-6px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: transform .3s var(--ns-3d-ease),
              opacity .22s ease,
              visibility 0s .3s !important;
  backface-visibility: hidden !important;
}
html body .fusion-main-menu > ul > li:hover > .sub-menu,
html body .fusion-main-menu > ul > li:focus-within > .sub-menu,
html body .fusion-main-menu > ul > li.hover-force > .sub-menu {
  transform: rotateX(0) translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition-delay: 0s !important;
}

/* --- IMAGE FRAMES: subtle parallax tilt on hover -------------------------- */
html body .fusion-image-frame,
html body .fusion-imageframe {
  transform-style: preserve-3d;
  transition: transform .55s var(--ns-3d-ease),
              box-shadow .55s var(--ns-3d-ease) !important;
  will-change: transform;
}
html body .fusion-image-frame:hover,
html body .fusion-imageframe:hover {
  transform: perspective(1200px) rotateY(-6deg) rotateX(3deg) translateZ(12px) scale(1.02);
  box-shadow:
    0 20px 40px rgba(10,58,143,.15),
    0 40px 80px -10px rgba(10,58,143,.22) !important;
}

/* --- FOOTER COLUMNS: layered 3D depth ------------------------------------- */
html body .fusion-footer-widget-area .fusion-columns {
  perspective: 1400px !important;
}
html body .fusion-footer-widget-area .fusion-column {
  transform: translateZ(0);
  transition: transform .45s var(--ns-3d-ease) !important;
}
html body .fusion-footer-widget-area .fusion-column:hover {
  transform: translateY(-4px) translateZ(12px) rotateX(-2deg);
}
html body .fusion-footer-widget-area .fusion-column h3,
html body .fusion-footer-widget-area .fusion-column h4,
html body .fusion-footer-widget-area .widget-title {
  transform: translateZ(10px);
  transform-style: preserve-3d;
}

/* --- CONTENT BOXES: 3D depth on hover ------------------------------------- */
html body .content-box-column {
  perspective: 1200px !important;
}
html body .content-box-column .fusion-column-content {
  transform-style: preserve-3d;
  transition: transform .5s var(--ns-3d-ease),
              box-shadow .5s var(--ns-3d-ease) !important;
}
html body .content-box-column:hover .fusion-column-content {
  transform: perspective(1200px) rotateX(4deg) rotateY(-3deg) translateZ(16px);
  box-shadow:
    0 24px 60px -10px rgba(10,58,143,.22),
    0 10px 20px rgba(10,58,143,.12) !important;
}

/* --- SEPARATOR & DIVIDER: subtle 3D glow bar ------------------------------ */
html body .fusion-sep-hr hr,
html body .fusion-full-width-sep {
  transform: perspective(400px) rotateX(45deg) translateY(-2px);
  box-shadow: 0 4px 16px rgba(10,58,143,.12);
}

/* --- HERO BAY RINGS: push forward in 3D space ----------------------------- */
.ns-hero-bay { perspective-origin: 50% 55%; }
.ns-hero-rings span {
  transform-style: preserve-3d;
}

/* --- ACCESSIBILITY: strip 3D for reduced motion --------------------------- */
@media (prefers-reduced-motion: reduce) {
  html body .fusion-person,
  html body .fusion-recent-posts .fusion-column.post,
  html body .fusion-button,
  html body a.button,
  html body input[type="submit"],
  html body .fusion-main-menu > ul > li > a,
  html body .fusion-image-frame,
  html body .fusion-imageframe,
  html body .fusion-footer-widget-area .fusion-column,
  html body .content-box-column .fusion-column-content,
  html body .ns-stat {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  html body .fusion-main-menu .sub-menu {
    transform: none !important;
  }
}

/* =============================================================
   25. Die Uitsig — café pre-order page (/bestellings/)
   ============================================================= */
.ns-cafe {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  font-family: 'Inter', sans-serif;
  color: var(--ns-ink);
}
.ns-cafe-head {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}
.ns-cafe-badge {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ns-blue-bright, #0A3A8F);
  background: rgba(10,58,143,.08);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.ns-cafe-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  margin: 0 0 10px;
  background: linear-gradient(135deg, #0A3A8F 0%, #1766C4 60%, #0EBB81 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ns-cafe-sub {
  font-size: 16px;
  color: rgba(17,39,70,.7);
  margin: 0;
}

.ns-cafe-msg {
  padding: 16px 20px;
  border-radius: 14px;
  margin-bottom: 24px;
  font-size: 15px;
  line-height: 1.55;
}
.ns-cafe-msg-ok {
  background: linear-gradient(135deg, rgba(14,187,129,.12), rgba(14,187,129,.04));
  border: 1px solid rgba(14,187,129,.3);
  color: #065F46;
}
.ns-cafe-msg-err {
  background: rgba(220,38,38,.06);
  border: 1px solid rgba(220,38,38,.28);
  color: #991B1B;
}

.ns-cafe-form {
  background: #FFF;
  border: 1px solid rgba(10,58,143,.08);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 24px 60px -20px rgba(10,58,143,.18), 0 4px 12px rgba(10,58,143,.04);
}
.ns-cafe-section { margin-bottom: 36px; }
.ns-cafe-section:last-child { margin-bottom: 0; }
.ns-cafe-section h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 18px;
  color: var(--ns-ink, #112746);
  border-bottom: 2px solid rgba(10,58,143,.08);
  padding-bottom: 10px;
}

.ns-cafe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.ns-cafe-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.ns-cafe-field > span {
  font-weight: 600;
  color: rgba(17,39,70,.75);
  font-size: 12px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.ns-cafe-field input,
.ns-cafe-field textarea {
  border: 1px solid rgba(10,58,143,.2);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ns-ink);
  background: #FBFCFF;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.ns-cafe-field input:focus,
.ns-cafe-field textarea:focus {
  outline: none;
  border-color: #1766C4;
  box-shadow: 0 0 0 3px rgba(23,102,196,.15);
  background: #FFF;
}
.ns-cafe-notes { margin-top: 24px; }

/* Single current week — heading + responsive card grid. */
.ns-cafe-week-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 18px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(10,58,143,.06) 0%, rgba(14,187,129,.06) 100%);
  border: 1px solid rgba(10,58,143,.08);
  border-radius: 14px;
}
.ns-cafe-week-head h2 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.2px;
  color: var(--ns-ink, #112746);
}
.ns-cafe-week-range {
  font-size: 13px;
  color: rgba(17,39,70,.65);
  line-height: 1.45;
}
.ns-cafe-week-range-dates {
  font-weight: 600;
  color: #1766C4;
  margin-right: 6px;
}
.ns-cafe-week-range-note {
  font-style: italic;
  color: rgba(17,39,70,.55);
}

.ns-cafe-week {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 14px;
}
.ns-cafe-week .ns-cafe-day {
  flex: 0 1 calc((100% - 36px) / 3);
  min-width: 240px;
  max-width: calc((100% - 36px) / 3);
}
.ns-cafe-week-solo { /* semantic alias */ }

.ns-cafe-day {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #FFF 0%, #F8FAFC 100%);
  border: 1px solid rgba(10,58,143,.1);
  border-radius: 16px;
  padding: 0;
  min-height: 340px;
  font-size: 13.5px;
  transition: transform .25s var(--ns-3d-ease, ease), box-shadow .25s, border-color .2s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px -4px rgba(10,58,143,.08);
}
.ns-cafe-day-art-wrap {
  display: flex; align-items: center; justify-content: center;
  height: 150px;
  margin: 0;
  background: linear-gradient(135deg, rgba(23,102,196,.08) 0%, rgba(14,187,129,.08) 100%);
  border-bottom: 1px solid rgba(10,58,143,.06);
  overflow: hidden;
}
.ns-cafe-day-art {
  width: 82%;
  height: 88%;
  max-height: 140px;
}
.ns-cafe-day-photo {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  margin: 0;
}
.ns-cafe-day-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 16px 16px;
}
.ns-cafe-day:not(.is-locked):hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px -10px rgba(10,58,143,.28);
  border-color: rgba(23,102,196,.4);
}
.ns-cafe-day.is-selected {
  border-color: #0EBB81;
  box-shadow: 0 10px 28px -10px rgba(14,187,129,.45), 0 0 0 2px rgba(14,187,129,.2) inset;
}
.ns-cafe-day.is-locked {
  opacity: .6;
  background: repeating-linear-gradient(135deg, #F3F4F6, #F3F4F6 8px, #EEF1F5 8px, #EEF1F5 16px);
}
.ns-cafe-day.is-blank {
  opacity: .5;
}
.ns-cafe-day.is-filtered-out {
  display: none;
}
.ns-cafe-contact {
  margin: 8px 0 0;
  font-size: 14px;
  color: rgba(255,255,255,.95);
}
.ns-cafe-contact a {
  color: #FFF;
  font-weight: 700;
  text-decoration: underline;
}
.ns-cafe-fineprint-contact {
  margin-top: 6px;
  color: #1F4E79;
}
.ns-cafe-fineprint-contact a {
  color: inherit;
  font-weight: 700;
}
.ns-cafe-day-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: #F4F7FC;
  border: 1px solid #DDE6F2;
  border-radius: 12px;
}
.ns-cafe-day-picker-lbl {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(17,39,70,.75);
}
.ns-cafe-day-picker select {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #C9D4E5;
  border-radius: 8px;
  background: #fff;
}
.ns-cafe-day-qty-pudding {
  background: #FFF7E0;
  border-radius: 8px;
  padding: 6px 10px;
}
.ns-cafe-day-qty-pudding input[type="checkbox"] {
  width: 20px;
  height: 20px;
}
.ns-cafe-day-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.ns-cafe-day-date {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  color: rgba(17,39,70,.7);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ns-cafe-day-price {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: #0EBB81;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.2;
}
.ns-cafe-day-price-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.ns-cafe-day-price-kid {
  color: rgba(14,187,129,.78);
  font-size: 12.5px;
}
.ns-cafe-day-price-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(17,39,70,.5);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.ns-cafe-day-meal {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: var(--ns-ink, #112746);
  margin-bottom: 6px;
}
.ns-cafe-day-desc {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(17,39,70,.65);
  margin-bottom: 14px;
  flex: 1;
}
.ns-cafe-day-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: stretch;
}
.ns-cafe-day-qty {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  color: rgba(17,39,70,.7);
}
.ns-cafe-day-qty-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(10,58,143,.18);
  border-radius: 10px;
  background: #FFF;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.ns-cafe-day-qty-row:focus-within {
  border-color: #1766C4;
  box-shadow: 0 0 0 3px rgba(23,102,196,.15);
}
.ns-cafe-day-qty-row:has(input:not([value="0"])) {
  background: #F2F8FF;
  border-color: rgba(23,102,196,.45);
}
.ns-cafe-day-qty-lbl {
  font-size: 13px;
  font-weight: 600;
  color: rgba(17,39,70,.78);
  letter-spacing: .1px;
}
.ns-cafe-day-qty input {
  border: 1px solid rgba(10,58,143,.22);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  background: #FFF;
  color: var(--ns-ink);
  padding: 6px 6px;
  line-height: 1.2;
  width: 56px;
  text-align: center;
  box-sizing: border-box;
}
.ns-cafe-day-qty input:focus {
  outline: none;
  border-color: #1766C4;
  box-shadow: 0 0 0 2px rgba(23,102,196,.18);
}
.ns-cafe-locked {
  font-size: 12px;
  color: rgba(17,39,70,.5);
  font-style: italic;
  align-self: center;
  padding: 10px 0;
  width: 100%;
  text-align: center;
  border-top: 1px dashed rgba(10,58,143,.15);
}

.ns-cafe-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}
/* Once any quantity is selected the floating pill becomes the primary CTA;
   hide the static submit so we don't show two "Plaas bestelling" buttons. */
.ns-cafe-form.ns-has-selection .ns-cafe-actions { display: none; }
.ns-cafe-submit {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #FFF;
  background: linear-gradient(135deg, #0A3A8F 0%, #1766C4 60%, #0EBB81 100%);
  border: 0;
  padding: 14px 42px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(10,58,143,.4);
  transition: transform .2s var(--ns-3d-ease, ease), box-shadow .2s;
}
.ns-cafe-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(10,58,143,.5);
}
.ns-cafe-submit:active { transform: translateY(0); }

.ns-cafe-fineprint {
  font-size: 12px;
  color: rgba(17,39,70,.55);
  margin: 0;
  text-align: center;
}

/* Tablet: 2 across (3+2 collapses to 2+2+1). */
@media (max-width: 880px) {
  .ns-cafe-week .ns-cafe-day {
    flex: 0 1 calc((100% - 18px) / 2);
    max-width: calc((100% - 18px) / 2);
  }
}
/* Mobile: stack. */
@media (max-width: 520px) {
  .ns-cafe-form { padding: 20px; }
  .ns-cafe-week { gap: 14px; }
  .ns-cafe-week .ns-cafe-day {
    flex: 1 1 100%;
    max-width: 100%;
    min-height: 300px;
  }
  .ns-cafe-day-art-wrap { height: 130px; }
  .ns-cafe-week-head { padding: 14px 16px; }
  .ns-cafe-week-head h2 { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ns-cafe-day,
  .ns-cafe-submit { transition: none !important; }
  .ns-cafe-day:hover,
  .ns-cafe-submit:hover { transform: none !important; }
}

/* =============================================================
   26. Kafeteria — homepage compact callout button
   ============================================================= */
.ns-cafe-cta-wrap {
  display: flex;
  justify-content: center;
  padding: 30px 20px 8px;
  max-width: 1200px;
  margin: 0 auto;
}
/* Floating "in-your-face" placement on the homepage — pinned to the
   top-right on desktop, bottom on mobile. Entrance animation runs once. */
.ns-cafe-cta-wrap.ns-cafe-cta-float {
  position: fixed;
  top: 112px;
  right: 22px;
  left: auto;
  padding: 0;
  margin: 0;
  z-index: 60;
  max-width: min(420px, calc(100vw - 44px));
  animation: nsCtaPop .7s cubic-bezier(.2,.8,.2,1) .6s both;
}
.ns-cafe-cta-wrap.ns-cafe-cta-float .ns-cafe-cta {
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 22px 46px -10px rgba(10,58,143,.5),
    0 8px 18px rgba(10,58,143,.22),
    0 0 0 3px rgba(255,255,255,.6);
}
@keyframes nsCtaPop {
  0%   { opacity: 0; transform: translate3d(0,-14px,0) scale(.92); }
  60%  { opacity: 1; transform: translate3d(0,2px,0) scale(1.03); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
/* Subtle pulse ring to draw the eye on first load (fades after 2 pulses). */
.ns-cafe-cta-wrap.ns-cafe-cta-float::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 999px;
  border: 2px solid rgba(14,187,129,.55);
  animation: nsCtaPulse 2.4s ease-out 1.3s 2 forwards;
  pointer-events: none;
  opacity: 0;
}
@keyframes nsCtaPulse {
  0%   { opacity: .85; transform: scale(1); }
  70%  { opacity: 0; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1.22); }
}
/* Permanent glowing footer re-entry button — lives on every page
   (except /bestellings/). The floating top-right pill can be dismissed,
   but the footer button always offers a way through. */
.ns-cafe-footer-band {
  padding: 36px 20px;
  display: flex;
  justify-content: center;
  background: radial-gradient(800px 200px at 50% 0%, rgba(14,187,129,.1), transparent 70%);
}
.ns-cafe-footer-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  color: #FFF !important;
  font-family: 'Space Grotesk', sans-serif !important;
  isolation: isolate;
  border-radius: 999px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.ns-cafe-footer-cta:hover { transform: translateY(-3px); color: #FFF !important; }
.ns-cafe-footer-cta-halo {
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  background: conic-gradient(
    from 0deg,
    rgba(14,187,129,.65),
    rgba(23,102,196,.65),
    rgba(14,187,129,.65),
    rgba(110,231,183,.7),
    rgba(14,187,129,.65)
  );
  filter: blur(18px);
  opacity: .85;
  animation: nsFooterHalo 6s linear infinite;
  z-index: -1;
}
.ns-cafe-footer-cta:hover .ns-cafe-footer-cta-halo {
  opacity: 1;
  animation-duration: 3s;
  filter: blur(22px);
}
@keyframes nsFooterHalo {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ns-cafe-footer-cta-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 14px;
  background: linear-gradient(135deg, #0A3A8F 0%, #1766C4 55%, #0EBB81 100%);
  border-radius: 999px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 20px 40px -12px rgba(10,58,143,.5);
}
.ns-cafe-footer-cta-inner::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 1.1s ease;
}
.ns-cafe-footer-cta:hover .ns-cafe-footer-cta-inner::before { transform: translateX(120%); }
.ns-cafe-footer-cta-icon {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s;
}
.ns-cafe-footer-cta:hover .ns-cafe-footer-cta-icon {
  background: rgba(255,255,255,.3);
  transform: rotate(-12deg) scale(1.06);
}
.ns-cafe-footer-cta-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  gap: 2px;
  text-align: left;
}
.ns-cafe-footer-cta-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.ns-cafe-footer-cta-main {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #FFF;
  position: relative;
}
.ns-cafe-footer-cta-main::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 2px;
  background: rgba(255,255,255,.6);
  transition: right .3s cubic-bezier(.2,.7,.2,1);
}
.ns-cafe-footer-cta:hover .ns-cafe-footer-cta-main::after { right: 0; }
.ns-cafe-footer-cta-arrow {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 4px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s;
}
.ns-cafe-footer-cta:hover .ns-cafe-footer-cta-arrow {
  background: rgba(255,255,255,.28);
  transform: translateX(4px);
}
/* Gentle attention pulse when the user dismisses the top-right pill —
   nudges their eye to the footer so they know the re-entry lives here. */
.ns-cafe-footer-cta.ns-cafe-footer-cta-attention .ns-cafe-footer-cta-halo {
  animation: nsFooterHalo 2s linear infinite, nsFooterBreath 1.4s ease-out 2;
}
@keyframes nsFooterBreath {
  0%, 100% { opacity: .85; filter: blur(18px); }
  50%      { opacity: 1;   filter: blur(28px); }
}
@media (max-width: 520px) {
  .ns-cafe-footer-band { padding: 28px 14px; }
  .ns-cafe-footer-cta-inner { padding: 12px 18px 12px 12px; gap: 12px; }
  .ns-cafe-footer-cta-icon { width: 36px; height: 36px; }
  .ns-cafe-footer-cta-main { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ns-cafe-footer-cta,
  .ns-cafe-footer-cta-halo,
  .ns-cafe-footer-cta-icon,
  .ns-cafe-footer-cta-arrow,
  .ns-cafe-footer-cta-inner::before { animation: none !important; transition: none !important; }
  .ns-cafe-footer-cta:hover { transform: none !important; }
}

.ns-cafe-cta-close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: #FFF;
  color: #0A3A8F;
  box-shadow: 0 6px 14px -4px rgba(10,58,143,.35), 0 0 0 1px rgba(10,58,143,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform .2s, background .2s, color .2s, box-shadow .2s;
}
.ns-cafe-cta-close:hover {
  transform: scale(1.08);
  background: #0A3A8F;
  color: #FFF;
  box-shadow: 0 10px 20px -6px rgba(10,58,143,.5);
}
.ns-cafe-cta-close:focus-visible {
  outline: 2px solid #0EBB81;
  outline-offset: 2px;
}
.ns-cafe-cta-wrap.is-dismissing {
  animation: nsCtaDismiss .3s cubic-bezier(.4,0,.6,1) forwards;
  pointer-events: none;
}
@keyframes nsCtaDismiss {
  to { opacity: 0; transform: translate3d(0,-8px,0) scale(.94); }
}
/* Stay in the top-right on small screens too — just tighten the size so it
   doesn't cover important content. Users who don't want it can dismiss. */
@media (max-width: 520px) {
  .ns-cafe-cta-wrap.ns-cafe-cta-float {
    top: 96px;
    right: 12px;
    max-width: min(340px, calc(100vw - 24px));
  }
  .ns-cafe-cta-wrap.ns-cafe-cta-float .ns-cafe-cta-line {
    font-size: 13px;
    max-width: 48vw;
  }
}
/* Very narrow screens: drop the meal-line so the pill doesn't truncate and
   stays out of the way. Kicker + icon + arrow still communicates intent. */
@media (max-width: 420px) {
  .ns-cafe-cta-wrap.ns-cafe-cta-float { top: 88px; right: 10px; }
  .ns-cafe-cta-wrap.ns-cafe-cta-float .ns-cafe-cta { padding: 8px 6px 8px 10px; gap: 10px; }
  .ns-cafe-cta-wrap.ns-cafe-cta-float .ns-cafe-cta-line { display: none; }
  .ns-cafe-cta-wrap.ns-cafe-cta-float .ns-cafe-cta-kicker { font-size: 11.5px; letter-spacing: 1.8px; }
  .ns-cafe-cta-wrap.ns-cafe-cta-float .ns-cafe-cta-icon { width: 32px; height: 32px; }
  .ns-cafe-cta-wrap.ns-cafe-cta-float .ns-cafe-cta-arrow { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .ns-cafe-cta-wrap.ns-cafe-cta-float { animation: none !important; }
  .ns-cafe-cta-wrap.ns-cafe-cta-float::before { animation: none !important; display: none; }
  .ns-cafe-cta-wrap.is-dismissing { animation: none !important; opacity: 0; }
}
.ns-cafe-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 10px 12px 14px;
  font-family: 'Space Grotesk', sans-serif;
  text-decoration: none !important;
  color: #FFF !important;
  background: linear-gradient(135deg, #0A3A8F 0%, #1766C4 55%, #0EBB81 100%);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 14px 32px -10px rgba(10,58,143,.45),
    0 4px 10px rgba(10,58,143,.18);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s;
  overflow: hidden;
  isolation: isolate;
  max-width: 100%;
}
.ns-cafe-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 1.1s ease;
  z-index: 0;
  pointer-events: none;
}
.ns-cafe-cta:hover::before { transform: translateX(120%); }
.ns-cafe-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 22px 42px -10px rgba(10,58,143,.55),
    0 6px 14px rgba(10,58,143,.22);
}
.ns-cafe-cta-icon {
  position: relative; z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #FFF;
  flex-shrink: 0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ns-cafe-cta-text {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  text-align: left;
  min-width: 0;
}
.ns-cafe-cta-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.ns-cafe-cta-line {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #FFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
.ns-cafe-cta-arrow {
  position: relative; z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  color: #FFF;
  flex-shrink: 0;
  transition: transform .28s ease, background .28s;
}
.ns-cafe-cta:hover .ns-cafe-cta-arrow {
  transform: translateX(3px);
  background: rgba(255,255,255,.26);
}
@media (max-width: 520px) {
  .ns-cafe-cta-wrap { padding: 22px 14px 4px; }
  .ns-cafe-cta { padding: 10px 8px 10px 12px; gap: 12px; }
  .ns-cafe-cta-icon { width: 36px; height: 36px; }
  .ns-cafe-cta-line { font-size: 14px; max-width: 52vw; }
  .ns-cafe-cta-arrow { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .ns-cafe-cta,
  .ns-cafe-cta::before,
  .ns-cafe-cta-arrow { transition: none !important; }
  .ns-cafe-cta:hover { transform: none !important; }
  .ns-cafe-cta:hover::before { transform: translateX(-120%) !important; }
}

/* =============================================================
   27. Die Uitsig — order page polish (hero, steps, total pill)
   ============================================================= */
.ns-cafe-hero-bg {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  padding: 44px 28px 40px;
  margin-bottom: 28px;
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(23,102,196,.14), transparent 70%),
    radial-gradient(700px 300px at 90% 100%, rgba(14,187,129,.12), transparent 70%),
    linear-gradient(180deg, #F4F7FD 0%, #FFFFFF 100%);
  border: 1px solid rgba(10,58,143,.08);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: center;
}
.ns-cafe-hero-bg .ns-cafe-head { text-align: left; }
.ns-cafe-hero-media {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 200px;
}
.ns-cafe-hero-art {
  width: 100%;
  max-width: 520px;
  height: auto;
  filter: drop-shadow(0 24px 30px rgba(10,58,143,.18));
}
.ns-cafe-hero-photo {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 24px 40px -16px rgba(10,58,143,.35);
}
@media (max-width: 820px) {
  .ns-cafe-hero-bg { grid-template-columns: 1fr; padding: 32px 22px 28px; }
  .ns-cafe-hero-bg .ns-cafe-head { text-align: center; }
  .ns-cafe-hero-media { order: -1; }
  .ns-cafe-hero-art, .ns-cafe-hero-photo { max-width: 420px; }
}
.ns-cafe-hero-bg::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(10,58,143,.05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(10,58,143,.05) 1px, transparent 1px) 0 0 / 32px 32px;
  mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
  opacity: .55;
}
.ns-cafe-hero-bg .ns-cafe-head { margin-bottom: 0; position: relative; z-index: 1; }

.ns-cafe-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 32px;
}
.ns-cafe-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 18px 18px;
  background: #FFF;
  border: 1px solid rgba(10,58,143,.08);
  border-radius: 16px;
  box-shadow: 0 8px 24px -14px rgba(10,58,143,.2);
}
.ns-cafe-step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0A3A8F 0%, #1766C4 100%);
  color: #FFF;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 6px 14px -4px rgba(10,58,143,.4);
}
.ns-cafe-step-body { min-width: 0; }
.ns-cafe-step-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ns-ink, #112746);
  margin: 0 0 4px;
  letter-spacing: -.005em;
}
.ns-cafe-step-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(17,39,70,.68);
  margin: 0;
}
@media (max-width: 720px) {
  .ns-cafe-steps { grid-template-columns: 1fr; }
}

/* Sticky "running total" pill at bottom of the order form */
.ns-cafe-total-pill {
  position: sticky;
  bottom: 16px;
  z-index: 10;
  display: flex;
  justify-content: center;
  pointer-events: none;
  margin-top: 18px;
}
.ns-cafe-total-pill-inner {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 18px;
  background: rgba(7,27,62,.94);
  color: #FFF;
  border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 18px 40px -12px rgba(7,27,62,.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: translateY(10px);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .28s;
}
.ns-cafe-total-pill.is-visible .ns-cafe-total-pill-inner {
  transform: translateY(0);
  opacity: 1;
}
.ns-cafe-total-pill-count {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.ns-cafe-total-pill-sum {
  font-size: 18px;
  font-weight: 700;
  color: #FFF;
}
.ns-cafe-total-pill-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #071B3E;
  background: linear-gradient(135deg, #FFFFFF 0%, #C9F7E3 100%);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: transform .2s;
}
.ns-cafe-total-pill-go:hover { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .ns-cafe-total-pill-inner { transition: none !important; }
  .ns-cafe-total-pill-go { transition: none !important; }
}

/* =================================================================
 *  /kombuis — kitchen dashboard kanban
 * ================================================================= */
.ns-kitchen {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 18px 60px;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #1a2540;
}
.ns-kitchen-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(10,58,143,.12);
}
.ns-kitchen-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(10,58,143,.6);
  margin-bottom: 6px;
}
.ns-kitchen-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #0a3a8f;
}
.ns-kitchen-sub {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: rgba(17,39,70,.7);
  line-height: 1.5;
  max-width: 580px;
}
.ns-kitchen-clock {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #0a3a8f;
  background: linear-gradient(135deg, #F2F8FF 0%, #FFFFFF 100%);
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid rgba(10,58,143,.15);
  letter-spacing: .04em;
  white-space: nowrap;
}

.ns-kitchen-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: flex-start;
}
@media (max-width: 980px) {
  .ns-kitchen-board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ns-kitchen-board { grid-template-columns: 1fr; }
  .ns-kitchen-head { flex-direction: column; }
}

.ns-kitchen-col {
  background: #F4F7FB;
  border-radius: 14px;
  border: 1px solid rgba(10,58,143,.1);
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.ns-kitchen-col-received  { border-top: 4px solid #1766C4; }
.ns-kitchen-col-preparing { border-top: 4px solid #F0A030; }
.ns-kitchen-col-ready     { border-top: 4px solid #18A661; }
.ns-kitchen-col-collected { border-top: 4px solid #6B7280; opacity: .85; }

.ns-kitchen-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(10,58,143,.08);
}
.ns-kitchen-col-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #0a3a8f;
}
.ns-kitchen-col-count {
  background: #FFF;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(10,58,143,.7);
  border: 1px solid rgba(10,58,143,.12);
  min-width: 28px;
  text-align: center;
}
.ns-kitchen-col-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ns-kitchen-empty {
  margin: 0;
  padding: 22px 8px;
  text-align: center;
  font-size: 12.5px;
  color: rgba(17,39,70,.45);
  font-style: italic;
}

.ns-kitchen-card {
  background: #FFF;
  border-radius: 11px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(10,58,143,.06), 0 4px 12px rgba(10,58,143,.04);
  border: 1px solid rgba(10,58,143,.08);
}
.ns-kitchen-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ns-kitchen-ticket {
  font-family: 'Space Grotesk', 'Inter', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(10,58,143,.55);
}
.ns-kitchen-time {
  font-size: 12px;
  font-weight: 600;
  color: rgba(17,39,70,.55);
}
.ns-kitchen-name {
  font-size: 15px;
  font-weight: 700;
  color: #1a2540;
  margin-bottom: 8px;
}
.ns-kitchen-lines {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ns-kitchen-lines li {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.35;
  padding: 5px 0;
  border-top: 1px dashed rgba(10,58,143,.1);
}
.ns-kitchen-lines li:first-child { border-top: 0; }
.ns-kitchen-line-date {
  font-size: 11px;
  color: rgba(17,39,70,.55);
  font-weight: 600;
}
.ns-kitchen-line-meal {
  font-weight: 600;
  color: #1a2540;
}
.ns-kitchen-line-qty {
  font-size: 11.5px;
  color: rgba(10,58,143,.75);
  font-weight: 600;
  white-space: nowrap;
}
.ns-kitchen-notes {
  margin: 6px 0 0;
  padding: 7px 9px;
  background: #FFF8E6;
  border-left: 3px solid #F0B400;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: #6b4f00;
}
.ns-kitchen-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(10,58,143,.08);
}
.ns-kitchen-total {
  font-size: 15px;
  font-weight: 800;
  color: #0a3a8f;
}
.ns-kitchen-phone {
  font-size: 12px;
  color: rgba(17,39,70,.55);
  font-variant-numeric: tabular-nums;
}
.ns-kitchen-actions { margin-top: 10px; }
.ns-kitchen-form { margin: 0; }
.ns-kitchen-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .12s ease, background .12s ease;
}
.ns-kitchen-btn-go {
  background: linear-gradient(135deg, #1766C4, #0A3A8F);
  color: #FFF;
  box-shadow: 0 2px 6px rgba(10,58,143,.25);
}
.ns-kitchen-btn-go:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(10,58,143,.3); }
.ns-kitchen-btn-reset {
  background: #FFF;
  color: rgba(17,39,70,.7);
  border: 1px solid rgba(10,58,143,.18);
}
.ns-kitchen-btn-reset:hover { background: #F4F7FB; color: #0a3a8f; }

/* Collapsible archive panel for "Bestelling opgetel" */
.ns-kitchen-archive {
  margin-top: 18px;
  background: #F4F7FB;
  border-radius: 12px;
  border: 1px solid rgba(10,58,143,.1);
  overflow: hidden;
}
.ns-kitchen-archive-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
}
.ns-kitchen-archive-summary {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ns-kitchen-archive-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6B7280;
  display: inline-block;
}
.ns-kitchen-archive-label {
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(10,58,143,.75);
  letter-spacing: .01em;
}
.ns-kitchen-archive-count {
  background: #FFF;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(10,58,143,.7);
  border: 1px solid rgba(10,58,143,.12);
  min-width: 28px;
  text-align: center;
}
.ns-kitchen-archive-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFF;
  border: 1px solid rgba(10,58,143,.18);
  border-radius: 8px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(10,58,143,.85);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.ns-kitchen-archive-toggle:hover {
  background: #F2F8FF;
  border-color: rgba(23,102,196,.4);
}
.ns-kitchen-archive-toggle-hide { display: none; }
.ns-kitchen-archive.is-expanded .ns-kitchen-archive-toggle-show { display: none; }
.ns-kitchen-archive.is-expanded .ns-kitchen-archive-toggle-hide { display: inline; }
.ns-kitchen-archive-toggle-chev {
  transition: transform .15s ease;
  font-size: 10px;
  line-height: 1;
}
.ns-kitchen-archive.is-expanded .ns-kitchen-archive-toggle-chev {
  transform: rotate(180deg);
}
.ns-kitchen-archive-body {
  padding: 0 14px 14px;
}
.ns-kitchen-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.ns-kitchen-card-archive {
  padding: 10px 12px;
  background: #FFF;
}
.ns-kitchen-archive-meals {
  font-size: 12px;
  color: rgba(17,39,70,.6);
  line-height: 1.4;
  margin: 4px 0 8px;
}
.ns-kitchen-card-archive .ns-kitchen-card-foot {
  margin-top: 4px;
  padding-top: 6px;
}
.ns-kitchen-btn-tiny {
  width: auto;
  padding: 5px 10px;
  font-size: 11.5px;
}

/* Status pill on the wp-admin orders list. */
.ns-status {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.ns-status-received  { background: #E5EFFB; color: #0a3a8f; }
.ns-status-preparing { background: #FFF1DD; color: #8a4a00; }
.ns-status-ready     { background: #DAF5E5; color: #0e6b3e; }
.ns-status-collected { background: #ECEEF2; color: #4a5568; }

/* =================================================================
 *  Hero crest 3D upgrade — drag-to-rotate, cursor spotlight, floor
 *  reflection, fading hint.
 * ================================================================= */
.ns-crest-stage {
  position: relative;
  width: clamp(260px, 28vw, 340px);
  aspect-ratio: 310 / 320;
  cursor: grab;
  touch-action: pan-y;
  transform-style: preserve-3d;
  --ns-spot-x: 50%;
  --ns-spot-y: 35%;
}
.ns-crest-stage.is-grabbing { cursor: grabbing; }
.ns-crest-stage .ns-crest-3d {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.ns-crest-stage .ns-hero-mark {
  position: relative;
  z-index: 2;
}
/* Cursor-following highlight — sits above the crest's surface. */
.ns-crest-spot {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle 90px at var(--ns-spot-x) var(--ns-spot-y),
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.18) 35%,
    transparent 70%
  );
  mix-blend-mode: overlay;
  opacity: .9;
  transition: opacity .35s ease;
}
.ns-crest-stage:hover .ns-crest-spot { opacity: 1; }
/* Floor reflection — flipped crest squashed at low opacity, gives the
   sense the crest is hovering above a polished surface. */
.ns-crest-floor {
  position: absolute;
  left: 0; right: 0;
  bottom: -22%;
  height: 60%;
  pointer-events: none;
  transform: translateZ(-1px) rotateX(82deg) translateY(-6%) scaleY(.55);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 75%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 75%);
  filter: blur(2px) saturate(.85);
  opacity: .35;
}
.ns-crest-floor img {
  width: 100%; height: 100%;
  object-fit: contain;
  transform: scaleY(-1);
}
html.ns-scrolled .ns-crest-floor { opacity: 0; transition: opacity .25s ease; }
.ns-hero-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(10,58,143,.12);
  border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(10,58,143,.78);
  box-shadow: 0 8px 22px -10px rgba(10,58,143,.35);
  opacity: 0;
  animation: nsHintFadeIn .8s ease 1.4s forwards;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.ns-hero-hint.is-hidden {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(8px);
  animation: none;
}
.ns-hero-hint-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1766C4, #2FB457);
  box-shadow: 0 0 0 4px rgba(23,102,196,.18);
  animation: nsHintPulse 2.4s ease-in-out infinite;
}
@keyframes nsHintFadeIn { to { opacity: 1; } }
@keyframes nsHintPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(23,102,196,.18); }
  50%      { box-shadow: 0 0 0 8px rgba(23,102,196,.04); }
}
html.ns-scrolled .ns-hero-hint { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .ns-hero-hint, .ns-hero-hint-dot { animation: none !important; }
  .ns-hero-hint { opacity: 1; }
}

/* ---------- Order form: prefill note + delivery toggle ---------- */
.ns-cafe-prefill-note {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: #f0f7ff;
  border: 1px solid #cfe1f5;
  border-radius: 10px;
  font-size: 13px;
  color: #1f4e79;
}
.ns-cafe-delivery-toggle {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
}
.ns-cafe-delivery-toggle input {
  width: 18px; height: 18px;
  flex: 0 0 18px;
  accent-color: #1f4e79;
  cursor: pointer;
}
.ns-cafe-delivery-toggle:hover { border-color: #1f4e79; background: #f6faff; }
.ns-cafe-delivery-fields { margin-top: 12px; }
.ns-cafe-delivery-fields[hidden] { display: none; }
.ns-cafe-address textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d9e2ec;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
}
.ns-cafe-pay-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 22px;
  background: #1f4e79;
  color: #fff !important;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
}
.ns-cafe-pay-btn:hover { background: #163d61; }

/* ---------- Kombuis: CSV button + delivery flag on cards ---------- */
.ns-kitchen-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.ns-kitchen-csv-btn {
  display: inline-block;
  padding: 8px 14px;
  background: #1a7340;
  color: #fff !important;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.ns-kitchen-csv-btn:hover { background: #145a32; }
.ns-kitchen-card.is-delivery {
  border-left: 4px solid #f5b13b;
}
.ns-kitchen-card-flags {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.ns-kitchen-flag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.ns-kitchen-flag-delivery { background: #fff3d6; color: #8a5a14; }
.ns-kitchen-flag-paid { background: #dff5e3; color: #1a7340; }
.ns-kitchen-address {
  margin-top: 4px;
  padding: 6px 8px;
  background: #fff8e6;
  border-left: 3px solid #f5b13b;
  font-size: 12px;
  border-radius: 4px;
  white-space: pre-wrap;
}
@media (max-width: 720px) {
  .ns-kitchen-tools { flex-direction: row; align-items: center; }
}

/* ==========================================================================
   ns-mobile-fix — force-correct Avada responsive header below 800px.
   Why: on some hosting environments Avada's Critical/Dynamic CSS bakes the
   desktop breakpoint and the mobile menu icon at the same time, causing the
   desktop nav AND hamburger to render together. These rules win regardless
   of Avada theme-option state so the site is always mobile-usable.
   ========================================================================== */
@media (max-width: 800px) {
  /* Hide desktop main menu + logo-left / logo-center / logo-right horizontal nav */
  .fusion-main-menu,
  .fusion-main-menu-search,
  .fusion-main-menu-cart,
  .fusion-header .fusion-main-menu,
  .fusion-header-v1 .fusion-main-menu,
  .fusion-header-v2 .fusion-main-menu,
  .fusion-header-v3 .fusion-main-menu,
  .fusion-header-v4 .fusion-main-menu,
  .fusion-header-v5 .fusion-main-menu,
  .fusion-header-v6 .fusion-main-menu,
  .fusion-header-v7 .fusion-main-menu {
    display: none !important;
  }

  /* Force-show Avada mobile menu trigger + holder */
  .fusion-mobile-menu-icons,
  .fusion-mobile-nav-holder,
  .fusion-mobile-nav-item,
  .fusion-mobile-menu-design-modern .fusion-main-menu,
  .fusion-header .mobile-menu-design-modern,
  .mobile-menu-design-modern .fusion-main-menu {
    display: block !important;
  }

  /* Hamburger button itself */
  .fusion-mobile-menu-icons a,
  .fusion-mobile-menu-icons .fusion-icon-bars {
    display: inline-block !important;
    visibility: visible !important;
  }

  /* Collapse the secondary contact bar so phone/email/address stack */
  .fusion-secondary-header .fusion-row,
  .fusion-secondary-header .fusion-alignleft,
  .fusion-secondary-header .fusion-alignright {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
  }
  .fusion-secondary-header .fusion-contact-info-headline-wrapper,
  .fusion-secondary-header .fusion-social-links-header { margin: 4px 0 !important; }

  /* Header row spacing so logo + hamburger sit on one tidy line */
  .fusion-header .fusion-row { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; }
  .fusion-logo { margin: 0 !important; }
  .fusion-logo a img { max-height: 60px !important; width: auto !important; height: auto !important; }

  /* Cafeteria / Kombuis ordering UI — make tables + grids scroll instead of overflow */
  .ns-cafe-wrap, .ns-kombuis-wrap { padding: 12px !important; }
  .ns-cafe-wrap table, .ns-kombuis-wrap table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ns-cafe-day-grid, .ns-kombuis-day-grid { grid-template-columns: 1fr !important; }

  /* Hero image — keep it readable on small screens */
  .fusion-page-title-bar, .ns-cafe-hero { min-height: auto !important; }
  .ns-cafe-hero img, .fusion-page-title-bar img { width: 100% !important; height: auto !important; }
}

/* Extra-small phones */
@media (max-width: 480px) {
  .fusion-logo a img { max-height: 48px !important; }
  body, p { font-size: 15px !important; }
  h1 { font-size: 1.6em !important; }
  h2 { font-size: 1.35em !important; }
  .ns-cafe-day-card, .ns-kombuis-day-card { padding: 10px !important; }
}