/* =================================================================
   MĀORI ICONS - Authentic & Beautiful
   ================================================================= */

/* Resources Icon - Tukutuku Pattern */
.nav-icon[data-icon="resources"]::before {
  content: "";
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23ccc"/><text x="50" y="50" font-family="sans-serif" font-size="10" text-anchor="middle" dominant-baseline="middle" fill="%23000">AI Art Placeholder</text></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
  transition: all 0.3s ease;
}

/* Subjects Icon - Pāua Shell (WITH RIDGES!) */
.nav-icon[data-icon="subjects"]::before {
  content: "";
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23ccc"/><text x="50" y="50" font-family="sans-serif" font-size="10" text-anchor="middle" dominant-baseline="middle" fill="%23000">AI Art Placeholder</text></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
  transition: all 0.3s ease;
}

/* Year Levels Icon - Waka */
.nav-icon[data-icon="years"]::before {
  content: "";
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none"><path d="M5 18 L7 14 L25 14 L27 18 Q27 21 16 21 Q5 21 5 18 Z" fill="%23A0522D" stroke="%23222" stroke-width="1.2" stroke-linejoin="round" style="animation: waka-float 3s ease-in-out infinite;"/><path d="M7 14 L8 10 Q8 9 9 9 L10 14" fill="%238B4513" stroke="%23222" stroke-width="1" stroke-linejoin="round"/><path d="M25 14 L24 10 Q24 9 23 9 L22 14" fill="%238B4513" stroke="%23222" stroke-width="1" stroke-linejoin="round"/><path d="M9 9 Q9 8 10 8 L11 8" stroke="%23D2691E" stroke-width="1.2" stroke-linecap="round"/><path d="M23 9 Q23 8 22 8 L21 8" stroke="%23D2691E" stroke-width="1.2" stroke-linecap="round"/><line x1="12" y1="8" x2="12" y2="14" stroke="%23D2691E" stroke-width="1.2"/><line x1="20" y1="8" x2="20" y2="14" stroke="%23D2691E" stroke-width="1.2"/><path d="M9 16 L11 16 M14 16 L18 16 M21 16 L23 16" stroke="%23F5A623" stroke-width="1.5" opacity="0.7" style="animation: carving 2s ease-in-out infinite;"/><line x1="16" y1="14" x2="16" y2="21" stroke="%238B4513" stroke-width="0.8" opacity="0.3"/><path d="M5 21 Q9 23 16 23 Q23 23 27 21" stroke="%234A90A4" stroke-width="1.2" stroke-dasharray="1,2" opacity="0.4" style="animation: waves 2s ease-in-out infinite;"/><circle cx="9" cy="16" r="0.8" fill="%23C1440E" style="animation: detail 2s ease-in-out infinite;"/><circle cx="23" cy="16" r="0.8" fill="%23C1440E" style="animation: detail 2s ease-in-out infinite 0.5s;"/><style>@keyframes waka-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}@keyframes carving{0%,100%{opacity:0.7}50%{opacity:1}}@keyframes waves{0%,100%{stroke-dashoffset:0}50%{stroke-dashoffset:3}}@keyframes detail{0%,100%{opacity:1}50%{opacity:0.6}}</style></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
  transition: all 0.3s ease;
}

/* More Icon - PROPER KORU SPIRAL! */
.nav-icon[data-icon="more"]::before {
  content: "";
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none"><path d="M28 28 Q28 18 22 14 Q16 10 12 14 Q10 16 10 18 Q10 20 12 22 Q14 24 16 22 Q18 20 16 18 Q14 16 14 18" fill="%2370B77E" stroke="%23222" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="animation: koru-unfurl 4s ease-in-out infinite;"/><circle cx="14.5" cy="18" r="2" fill="%23F5A623" stroke="%23222" stroke-width="0.8" style="animation: heart 2s ease-in-out infinite;"/><path d="M22 14 L24 12 L25 11" stroke="%2385C48E" stroke-width="1.5" stroke-linecap="round" opacity="0.6" style="animation: leaf-1 3s ease-in-out infinite;"/><path d="M20 12 L21 10 L22 9" stroke="%239DD9A3" stroke-width="1.3" stroke-linecap="round" opacity="0.5" style="animation: leaf-2 3s ease-in-out infinite 0.5s;"/><path d="M18 11 L19 9 L20 8" stroke="%23B8E6B8" stroke-width="1.1" stroke-linecap="round" opacity="0.4" style="animation: leaf-3 3s ease-in-out infinite 1s;"/><style>@keyframes koru-unfurl{0%,100%{opacity:1}50%{opacity:0.85}}@keyframes heart{0%,100%{r:2}50%{r:2.5}}@keyframes leaf-1{0%,100%{opacity:0.6}50%{opacity:0.9}}@keyframes leaf-2{0%,100%{opacity:0.5}50%{opacity:0.8}}@keyframes leaf-3{0%,100%{opacity:0.4}50%{opacity:0.7}}</style></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
  transition: all 0.3s ease;
}

/* Login Icon - Key */
.nav-icon[data-icon="login"]::before {
  content: "";
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none"><circle cx="11" cy="16" r="5" fill="%23F5A623" stroke="%23222" stroke-width="1.2" style="animation: key-glow 2s ease-in-out infinite;"/><circle cx="11" cy="16" r="2.5" fill="white" stroke="%23222" stroke-width="0.8"/><rect x="15" y="14.5" width="12" height="3" fill="%23F5A623" stroke="%23222" stroke-width="1.2" rx="0.5"/><rect x="23" y="12.5" width="2" height="2.5" fill="%23F5A623" stroke="%23222" stroke-width="0.8"/><rect x="23" y="17.5" width="2" height="2.5" fill="%23F5A623" stroke="%23222" stroke-width="0.8"/><style>@keyframes key-glow{0%,100%{opacity:1}50%{opacity:0.85}}</style></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
  transition: all 0.3s ease;
}

/* Kete Icon - Basket */
.nav-icon[data-icon="kete"]::before {
  content: "";
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none"><path d="M11 11 L11 8 Q11 6 16 6 Q21 6 21 8 L21 11" stroke="%23A0826D" stroke-width="1.5" fill="none" stroke-linecap="round" style="animation: handle 2s ease-in-out infinite;"/><path d="M9 11 L23 11 L23 23 Q23 25 19 26 L13 26 Q9 25 9 23 Z" fill="%23D2B48C" stroke="%23222" stroke-width="1.2" stroke-linejoin="round"/><line x1="9" y1="15" x2="23" y2="15" stroke="%238B7355" stroke-width="0.8" style="animation: weave-h 2s ease-in-out infinite;"/><line x1="9" y1="19" x2="23" y2="19" stroke="%238B7355" stroke-width="0.8" style="animation: weave-h 2s ease-in-out infinite 0.3s;"/><line x1="9" y1="23" x2="23" y2="23" stroke="%238B7355" stroke-width="0.8" style="animation: weave-h 2s ease-in-out infinite 0.6s;"/><line x1="13" y1="11" x2="13" y2="26" stroke="%23A0826D" stroke-width="0.8" style="animation: weave-v 2s ease-in-out infinite;"/><line x1="16" y1="11" x2="16" y2="26" stroke="%23A0826D" stroke-width="0.8" style="animation: weave-v 2s ease-in-out infinite 0.3s;"/><line x1="19" y1="11" x2="19" y2="26" stroke="%23A0826D" stroke-width="0.8" style="animation: weave-v 2s ease-in-out infinite 0.6s;"/><style>@keyframes handle{0%,100%{transform:translateY(0)}50%{transform:translateY(-0.5px)}}@keyframes weave-h{0%,100%{opacity:1}50%{opacity:0.6}}@keyframes weave-v{0%,100%{opacity:1}50%{opacity:0.6}}</style></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
  transition: all 0.3s ease;
}

/* Hover effects */
.main-nav a:hover .nav-icon[data-icon]::before {
  filter: drop-shadow(0 4px 10px rgba(245, 166, 35, 0.8)) 
          drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
  transform: scale(1.12);
  transition: all 0.35s ease;
}

/* Entrance animation */
@keyframes icon-entrance {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.nav-icon[data-icon]::before {
  animation: icon-entrance 0.6s ease-out;
}

/* Active state */
.main-nav li.active .nav-icon[data-icon]::before {
  filter: drop-shadow(0 0 6px rgba(245, 166, 35, 0.9)) 
          drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}