/* St. Xavier's Technical Institute — Navbar · OIL PAINT style
   Brand palette: burgundy #8B1E2D · red #C62828 · orange #F57C00 · gold #F4B942
   Look: bristle-streaked paint on canvas, impasto ridges, palette-knife strokes, gilt-framed menus. */
:root {
  --burgundy:#8B1E2D; --burgundy-dk:#5f1220; --red:#C62828; --orange:#F57C00; --gold:#F4B942;
  --charcoal:#292929; --soft:#FAFAFA; --grey:#F1F3F5;
  --ease:.25s cubic-bezier(.4,0,.2,1);
  --fd:'Alegreya',Georgia,serif; --fb:'Alegreya Sans','Segoe UI',Arial,sans-serif;

  /* horizontal bristle streaks (generated noise, stretched along x) */
  --bristle-lt:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .93  0 0 0 0 .85  0 0 0 1.6 -.72'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --bristle-dk:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.01 .7' numOctaves='3' seed='19'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 0  0 0 0 0 .02  0 0 0 1.8 -.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --weave:repeating-linear-gradient(0deg,rgba(41,41,41,.03) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(41,41,41,.03) 0 1px,transparent 1px 3px);
  --dab:34% 66% 40% 60% / 60% 38% 62% 40%;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
ul{list-style:none} a{text-decoration:none;color:inherit}
body{font-family:var(--fb);background:var(--soft);color:var(--charcoal)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ───────── Header: light canvas ───────── */
.nh{position:relative;z-index:9200;background:var(--bristle-lt),var(--weave),var(--soft)}
.nh::before{ /* burgundy stripe with ragged lower edge */
  content:'';display:block;height:12px;
  background:var(--bristle-dk),var(--burgundy);
  clip-path:polygon(0 0,100% 0,100% 55%,95% 80%,88% 52%,80% 85%,71% 55%,63% 90%,54% 58%,46% 82%,37% 52%,28% 88%,19% 56%,10% 84%,4% 58%,0 76%);
}
.nh-inner{max-width:1400px;margin:0 auto;padding:10px 28px 14px;display:flex;align-items:center;justify-content:center;gap:28px}
.nh-logo{display:block;flex-shrink:0}
.nh-logo img{display:block;height:108px;width:auto;mix-blend-mode:multiply} /* white of logo sinks into canvas */
.nh-accr{position:relative;display:flex;align-items:center;gap:28px;padding-left:34px}
.nh-accr::before{ /* painted vertical divider */
  content:'';position:absolute;left:0;top:50%;width:5px;height:90px;transform:translateY(-50%) rotate(2deg);
  background:var(--bristle-dk),linear-gradient(180deg,var(--burgundy),var(--orange) 55%,var(--gold));
  clip-path:polygon(30% 0,100% 6%,70% 30%,100% 55%,60% 80%,80% 100%,0 94%,40% 66%,0 42%,50% 20%)}
.nh-accr img{height:84px;width:auto;max-width:150px;object-fit:contain;mix-blend-mode:multiply}

/* Hamburger: a dab of paint */
.nb{
  display:none;margin-left:auto;flex-shrink:0;width:50px;height:50px;border:0;cursor:pointer;
  border-radius:var(--dab);flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:radial-gradient(ellipse 60% 45% at 30% 20%,rgba(255,255,255,.3),transparent 70%),var(--bristle-dk),linear-gradient(160deg,#a62a3a,var(--burgundy) 55%,var(--burgundy-dk));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 5px rgba(0,0,0,.35),0 4px 10px rgba(95,18,32,.4);
}
.nb span{display:block;height:3px;border-radius:3px;background:var(--gold);box-shadow:0 1px 1px rgba(0,0,0,.4)}
.nb span:nth-child(1){width:22px}.nb span:nth-child(2){width:17px;margin-right:5px}.nb span:nth-child(3){width:21px}

/* ───────── Sticky nav: burgundy oil on canvas ───────── */
.nn{
  position:sticky;top:0;z-index:9000;padding:4px 20px;
  background:var(--burgundy);
  border-bottom:3px solid var(--gold);box-shadow:0 6px 16px rgba(41,41,41,.15);
}
.nn-inner{max-width:1400px;margin:0 auto;display:flex;justify-content:center}
.nm{display:flex;align-items:center;gap:2px}
.ni{position:relative;display:flex}
.nl{
  position:relative;isolation:isolate;display:flex;align-items:center;gap:6px;padding:14px 16px;
  color:#fff;font:700 1.14rem var(--fb);letter-spacing:.02em;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.55);transition:color var(--ease),text-shadow var(--ease);
}
.nl::before{content:'';position:absolute;inset:5px 1px;z-index:-1;opacity:0;transform:scaleX(.65) rotate(-.8deg);transform-origin:left center;
  background:var(--gold);
  clip-path:polygon(3% 20%,12% 5%,36% 14%,62% 3%,90% 11%,99% 30%,96% 62%,100% 86%,76% 97%,48% 90%,22% 99%,3% 87%,0 56%);
  transition:opacity var(--ease),transform .35s cubic-bezier(.3,1.3,.5,1)}

/* Highlight: hover, open (clicked), current page, or keyboard focus only */
.nl:hover,.ni.open>.nl,.ni.active>.nl,.ni:has(:focus-visible)>.nl{color:var(--charcoal);text-shadow:0 1px 0 rgba(255,255,255,.45)}
.nl:hover::before,.ni.open>.nl::before,.ni.active>.nl::before,.ni:has(:focus-visible)>.nl::before{opacity:1;transform:none}
/* no sticky focus look after a mouse click */
.nl:focus:not(:focus-visible){outline:none}

.ni-home>.nl{color:var(--burgundy);text-shadow:none;padding:12px 18px}
.ni-home>.nl::before{opacity:1;transform:none;background:#fff}
.chv{width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.8;transition:transform var(--ease)}
.ni:hover>.nl .chv,.ni.open>.nl .chv,.ni:has(:focus-visible)>.nl .chv{transform:rotate(225deg) translateY(-2px)}

/* ───────── Dropdowns: paper in a gilt frame ───────── */
.nd{
  position:absolute;top:calc(100% + 14px);left:50%;min-width:230px;padding:6px 0 12px;
  background:#fff;
  border:1px solid rgba(139,30,45,.25);border-top:0;border-radius:0 0 4px 4px;
  box-shadow:0 0 0 3px var(--gold),0 0 0 4px rgba(139,30,45,.5),0 20px 40px rgba(41,41,41,.28);
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(10px);
  transition:opacity var(--ease),transform var(--ease),visibility var(--ease);z-index:9100;
}
.nd::before{content:'';position:absolute;left:-4px;right:-4px;top:-18px;height:18px} /* hover bridge */
.ni:hover>.nd,.ni.open>.nd,.ni:has(:focus-visible)>.nd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nd.mega{left:0;transform:translateY(10px);display:grid;grid-template-columns:repeat(3,auto);padding:0}
.ni:hover>.nd.mega,.ni.open>.nd.mega,.ni:has(:focus-visible)>.nd.mega{transform:translateY(0)}
.nd.right{left:auto;right:0;transform:translateY(10px)}
.ni:hover>.nd.right,.ni.open>.nd.right,.ni:has(:focus-visible)>.nd.right{transform:translateY(0)}
.ndc{padding:10px 0 14px;border-right:1px dashed rgba(139,30,45,.25)}
.ndc:last-child{border-right:0}
.ndh{
  margin:6px 18px 3px;padding:6px 0 7px;font:800 1.12rem var(--fd);color:var(--burgundy);
  background:linear-gradient(90deg,var(--orange),var(--gold) 55%,transparent) bottom/100% 3px no-repeat;
}
.ndi{
  display:block;padding:10px 18px;font:700 1.06rem var(--fb);color:#1f1f1f;white-space:nowrap;
  transition:background var(--ease),color var(--ease),padding-left var(--ease);
}
.ndi:hover{color:var(--burgundy);padding-left:26px;background:linear-gradient(90deg,rgba(244,185,66,.5),rgba(244,185,66,.06));box-shadow:inset 4px 0 0 var(--orange)}

/* ───────── Mobile drawer (right → left) ───────── */
.nov{position:fixed;inset:0;z-index:9500;background:rgba(41,41,41,.6);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.nov.show{opacity:1;visibility:visible;transition-delay:0s}
.ndr{
  position:fixed;top:0;right:0;z-index:9600;width:min(340px,88vw);height:100%;height:100dvh;display:flex;flex-direction:column;
  background:var(--burgundy);
  border-left:5px solid var(--gold);box-shadow:-14px 0 40px rgba(0,0,0,.4),inset 3px 0 0 rgba(255,255,255,.18);
  transform:translateX(100%);visibility:hidden;
  transition:transform .42s cubic-bezier(.4,0,.2,1),visibility 0s .42s;
}
.ndr.is-open{transform:translateX(0);visibility:visible;transition-delay:0s}
.ndr-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;flex-shrink:0;background:#fff;position:relative}
.ndr-top::after{content:'';position:absolute;left:0;right:0;top:100%;height:8px;background:var(--bristle-dk),linear-gradient(90deg,var(--orange),var(--gold));clip-path:polygon(0 0,100% 0,100% 40%,92% 80%,82% 45%,70% 85%,58% 50%,44% 82%,30% 48%,16% 80%,6% 46%,0 70%)}
.ndr-top img{height:46px;width:auto;max-width:calc(100% - 56px);display:block;mix-blend-mode:multiply}
.ndr-close{width:42px;height:42px;border:0;cursor:pointer;color:var(--gold);font-size:1.05rem;border-radius:var(--dab);
  background:radial-gradient(ellipse 60% 45% at 30% 20%,rgba(255,255,255,.3),transparent 70%),var(--bristle-dk),linear-gradient(160deg,#a62a3a,var(--burgundy-dk));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 8px rgba(95,18,32,.4)}
.ndr-scroll{flex:1;overflow-y:auto;padding:14px 0 12px;overscroll-behavior:contain}
.ndr-home{display:flex;align-items:center;gap:10px;margin:8px 16px 8px;padding:12px 20px;color:var(--burgundy);font:800 1.2rem var(--fb);
  border-radius:18px 26px 16px 28px / 26px 16px 28px 18px;background:var(--bristle-lt),linear-gradient(100deg,#f2ede4,#fff 50%,#efe8dc);box-shadow:inset 0 -3px 5px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.3)}
.ndr-item{border-bottom:1px solid rgba(244,185,66,.22)}
.ndr-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 22px;background:none;border:0;cursor:pointer;color:#fbeee0;font:700 1.2rem var(--fb);text-align:left;text-shadow:0 1px 2px rgba(0,0,0,.55);transition:background var(--ease)}
.ndr-btn:hover{background:linear-gradient(90deg,rgba(244,185,66,.22),transparent)}
.ndr-item.open>.ndr-btn{color:var(--gold);background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.1));box-shadow:inset 4px 0 0 var(--gold)}
.ndr-chv{width:8px;height:8px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform var(--ease)}
.ndr-item.open>.ndr-btn .ndr-chv{transform:rotate(225deg)}
.ndr-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease;background:rgba(40,6,14,.35);box-shadow:inset 0 3px 6px rgba(0,0,0,.25)}
.ndr-sub>div{overflow:hidden}
.ndr-item.open>.ndr-sub{grid-template-rows:1fr}
.ndr-grp{padding:12px 22px 4px 28px;font:800 1.08rem var(--fd);color:var(--gold)}
.ndr-link{display:block;padding:10px 22px 10px 28px;color:#fff;font:600 1.06rem var(--fb);transition:background var(--ease),padding-left var(--ease)}
.ndr-link:hover{background:linear-gradient(90deg,rgba(244,185,66,.25),transparent);padding-left:34px}

/* ───────── Responsive ───────── */
@media (max-width:1180px){.nl{padding:13px 9px;font-size:1.02rem}}
@media (max-width:1100px){.nh-accr{display:none}}
@media (max-width:1250px){.nh-inner{gap:20px}.nh-accr{padding-left:24px;gap:18px}.nh-accr img{height:70px}.nh-logo img{height:92px}}
@media (max-width:1024px){
  .nn{display:none}.nb{display:flex}
  .nh{position:sticky;top:0;box-shadow:0 4px 14px rgba(41,41,41,.15)}
  .nh-inner{padding:8px 16px 12px;justify-content:space-between;gap:12px}
  .nh-logo{flex:1 1 auto;min-width:0}
  .nh-logo img{height:auto;width:100%;max-width:420px}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important}}