/* ==========================================================
   PNHS · theme.css  (desktop: hover dropdowns • mobile: tap)
   ========================================================== */

/* -------------------- Design Tokens -------------------- */
:root{
  /* --- Sophisticated Blue System --- */
  --bg:#f6faff;
  --bg-2:#eef6ff;
  --text:#0b1220;
  --muted:#4a5a70;

  /* Brand blues */
  --brand:#071d33;     /* deep navy */
  --brand-2:#0b3a7a;   /* royal navy */
  --brand-3:#1d4ed8;   /* royal */
  --accent:#38bdf8;    /* sky */
  --accent-2:#7dd3fc;  /* light sky */

  --border:rgba(11,18,32,.10);
  --card:rgba(255,255,255,.78);
  --card-2:rgba(255,255,255,.92);

  --radius:18px;
  --radius-sm:14px;

  --shadow:0 10px 30px rgba(7,29,51,.12);
  --shadow-soft:0 6px 18px rgba(7,29,51,.10);
  --shadow-sm:0 4px 14px rgba(7,29,51,.10);

  --ring:0 0 0 4px rgba(56,189,248,.22);

  --font:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  --maxw:1100px;
}

 /* -------------------- Base -------------------- */ -------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:var(--font);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  /* Soft blue gradient background (no images) */
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(56,189,248,.22), rgba(56,189,248,0) 55%),
    radial-gradient(900px 520px at 90% 0%, rgba(29,78,216,.18), rgba(29,78,216,0) 60%),
    radial-gradient(1000px 700px at 70% 105%, rgba(125,211,252,.18), rgba(125,211,252,0) 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:16px; top:16px; padding:8px 12px; background:#fff; border:1px solid var(--brand); z-index:1000}

/* Headings & prose */
h1,h2,h3{margin:.2rem 0 .4rem; letter-spacing:.2px}
h1{font-size:clamp(1.8rem,2vw + 1rem,2.4rem); color:var(--brand)}
h2{font-size:1.4rem}
h3{font-size:1.15rem}
.section-sub{color:var(--muted); margin-top:-.25rem; display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.60); border:1px solid rgba(56,189,248,.18); box-shadow:0 10px 24px rgba(7,29,51,.08)}
.prose p{margin:.6rem 0; color:var(--text)}
.u-underline{text-decoration:underline}

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(135deg, var(--brand-2), var(--brand-3));
  box-shadow:0 10px 26px rgba(7,29,51,.18);
  font-weight:700;
  letter-spacing:.2px;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{filter:brightness(1.03); transform:translateY(-1px); text-decoration:none}
.btn:active{transform:translateY(0)}
.btn:focus{outline:none; box-shadow:var(--ring), 0 10px 26px rgba(7,29,51,.18)}
.btn--primary{background:linear-gradient(135deg, var(--brand), var(--brand-2))}
.btn--ghost{
  background:rgba(255,255,255,.80);
  color:var(--brand);
  border:1px solid rgba(29,78,216,.18);
  box-shadow:none;
}
.btn--ghost:hover{background:#fff; border-color:rgba(29,78,216,.28)}

/* ==========================================================
   HEADER & NAV (desktop hover • mobile tap)
   ========================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.68);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid rgba(11,18,32,.10);
}
.site-header::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, rgba(56,189,248,.0), rgba(56,189,248,.9), rgba(29,78,216,.9), rgba(56,189,248,.0));
  opacity:.85;
}
.site-header .wrap{display:flex; align-items:center; gap:16px; padding:14px 16px}

.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand__logo{width:48px; height:auto}
.brand__title{display:block; font-weight:700; color:var(--brand); letter-spacing:.2px}
.brand__subtitle{color:var(--muted); font-size:.9rem}

/* Nav layout */
.nav{display:flex; align-items:center; justify-content:space-between; width:100%}
.nav__toggle{display:none; background:none; border:0; font-size:1.25rem; padding:8px; margin-left:auto}
.nav__menu{position:relative; margin-left:auto}

/* One-line primary row on desktop */
.nav__row{
  display:flex; align-items:center; gap:18px;
  list-style:none; margin:0; padding:0;
  white-space:nowrap; flex-wrap:nowrap;
}
.nav__row > li{position:relative}

/* Top-level links and dropdown triggers */
.nav__row > li > a,
.nav__link{
  padding:10px 12px; border-radius:10px; color:var(--text);
  background:transparent; border:0; cursor:pointer; text-decoration:none; font:inherit;
}
.nav__row > li > a:hover,
.nav__link:hover{background:rgba(56,189,248,.14); border:1px solid rgba(56,189,248,.18); text-decoration:none}
a[aria-current="page"]{background:rgba(29,78,216,.10); color:var(--brand); border-radius:10px; border:1px solid rgba(29,78,216,.12)}

/* ▼ caret on triggers */
.nav__link::after{content:" ▾"; font-size:.8em; margin-left:4px}

/* Dropdown panel (vertical) */
.nav__panel{
  display:none;
  position:absolute; top:100%; left:0;
  min-width:240px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(56,189,248,.20);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:10px;
  z-index:1000;
}
.nav__panel a{display:block; padding:8px 10px; border-radius:8px; color:var(--text)}
.nav__panel a:hover{background:rgba(56,189,248,.14)}

/* Invisible hover bridge to prevent flicker if you keep a shadow gap */
.nav__panel::before{
  content:""; position:absolute; left:0; right:0; top:-8px; height:8px;
}

/* Desktop: show while hovering the trigger OR the panel */
@media (min-width:961px){
  .nav__dropdown:hover > .nav__panel,
  .nav__dropdown:focus-within > .nav__panel{
    display:block;
  }
}

/* Mobile (tap-to-open) */
@media (max-width:960px){
  .nav__toggle{display:block}
  #navmenu{
    position:absolute; left:0; right:0; top:64px; background:#fff;
    border-bottom:1px solid var(--border); display:none;
  }
  #navmenu.open{display:block}
  .nav__row{flex-direction:column; align-items:stretch; gap:0; white-space:normal}
  .nav__row > li > a, .nav__link{width:100%; padding:14px 16px; text-align:left}
  .nav__panel{position:static; border:0; box-shadow:none; padding:0 0 8px 16px; min-width:auto}
  .nav__dropdown.open > .nav__panel{display:block} /* JS toggles .open on parent */
}

/* -------------------- Hero -------------------- */
.hero{
  position:relative;
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(56,189,248,.28), rgba(56,189,248,0) 60%),
    radial-gradient(820px 420px at 95% 0%, rgba(29,78,216,.22), rgba(29,78,216,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.40));
  border-bottom:1px solid rgba(11,18,32,.10);
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(600px 280px at 50% 0%, rgba(125,211,252,.22), rgba(125,211,252,0) 70%);
  pointer-events:none;
}
.hero .wrap{padding:34px 16px 34px; position:relative}
.search{margin:18px 0 8px; display:flex; gap:8px}
.search input{flex:1; border:1px solid rgba(56,189,248,.22); padding:11px 12px; border-radius:14px; font-size:1rem; background:rgba(255,255,255,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 10px 24px rgba(7,29,51,.08)}
.search input:focus{outline:none; border-color:rgba(29,78,216,.35); box-shadow:var(--ring), 0 10px 24px rgba(7,29,51,.10)}

/* -------------------- Slider (optional) -------------------- */
.slider{position:relative; border:1px solid var(--border); background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.slider__track{display:flex; transition:transform .45s ease; will-change:transform}
.slider__slide{min-width:100%; aspect-ratio:16/9; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(7,29,51,.18), rgba(29,78,216,.10), rgba(56,189,248,.10))}
.slider__slide img{width:100%; height:100%; object-fit:contain; padding:22px}
.slider__img{width:100%; height:100%; object-fit:contain; padding:22px}
.slider__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:#fff; border:1px solid var(--border); width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center; box-shadow:var(--shadow); cursor:pointer;
}
.slider__btn--prev{left:12px} .slider__btn--next{right:12px}
.slider__dots{position:absolute; left:0; right:0; bottom:10px; display:flex; gap:6px; justify-content:center}
.slider__dot{width:9px; height:9px; border-radius:999px; background:rgba(0,0,0,.15); border:0}
.slider__dot[aria-current="true"]{background:var(--brand-2)}

/* -------------------- Layout -------------------- */
main.wrap{display:grid; grid-template-columns:1fr; gap:20px; margin:24px auto}
.section-head{display:flex; gap:12px; align-items:end; justify-content:space-between; margin-top:4px}

/* -------------------- Cards & Grids -------------------- */
.card{
  background:linear-gradient(180deg, var(--card-2), var(--card));
  border:1px solid transparent;
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow-soft);
  position:relative;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:var(--radius);
  padding:1px;
  background:linear-gradient(135deg, rgba(56,189,248,.35), rgba(29,78,216,.28), rgba(7,29,51,.08));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}
.card:hover{box-shadow:var(--shadow)}
.grid{display:grid; gap:16px}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr}
@media (min-width:760px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}

.center-img{display:flex; justify-content:center}
.center-img img{width:min(40%,420px); border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow)}

/* Lists */
.list{padding-left:18px}
.list.check li{list-style:'✔️  '}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; background:#f9fbff; border-radius:var(--radius); padding:12px}

/* Timeline */
.timeline{list-style:none; padding:0; margin:0; border-left:3px solid #e8eefc}
.timeline li{position:relative; padding:10px 0 10px 20px}
.timeline li::before{content:''; position:absolute; left:-9px; top:16px; width:12px; height:12px; border-radius:50%; background:var(--brand-2)}

/* Subheader band */
.subheader{background:linear-gradient(180deg,#f6f9ff,#fff); border-bottom:1px solid #e8eefc}
.subheader .wrap{padding:30px 16px}

/* Article page */
.article{max-width:850px}
.article .meta{color:var(--muted); margin:6px 0 18px}
.article img{border-radius:12px}

/* Gallery masonry */
.gallery__grid{columns:3; column-gap:12px}
.gallery__grid img{border-radius:12px; margin:0 0 12px 0}
@media (max-width:900px){.gallery__grid{columns:1}}

/* -------------------- Org Sections -------------------- */
.org-section{margin:10px 0 22px}
.org-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.org-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:14px; box-shadow:var(--shadow); text-align:center;
}
.org-card img{width:100%; height:300px; object-fit:cover; border-radius:12px; margin-bottom:10px; background:#eef2f5}
.org-card h3{margin:.25rem 0 .15rem; color:var(--brand)}
.org-name{color:var(--muted)}
.org-depts{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.dept-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow)}
.dept-card{position:relative; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.dept-card:hover{transform:translateY(-1px); border-color:rgba(29,78,216,.22); box-shadow:var(--shadow-sm)}
.dept-card.open{border-color:rgba(29,78,216,.32)}
.dept-panel{margin-top:12px; padding-top:12px; border-top:1px dashed rgba(29,78,216,.28)}
.dept-panel__title{font-weight:700; color:var(--brand); margin-bottom:6px; font-size:.95rem}
.dept-list{margin:0; padding-left:18px}
.dept-list li{padding:2px 0; color:var(--muted)}


/* Simple org tree */
.org-tree{display:flex; justify-content:center; margin-top:8px}
.org-node{position:relative}
.org-node__card{background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 12px; box-shadow:var(--shadow); min-width:220px; text-align:center}
.org-node--top::after{content:""; position:absolute; left:50%; transform:translateX(-50%); top:calc(100% + 2px); width:2px; height:16px; background:var(--border)}
.org-branches{display:flex; gap:16px; margin-top:26px; position:relative; padding-top:14px}
.org-branches::before{content:""; position:absolute; top:0; left:8px; right:8px; height:2px; background:var(--border)}
.org-branch{position:relative; padding-top:16px}
.org-branch::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:2px; height:16px; background:var(--border)}

/* -------------------- Footer -------------------- */
.site-footer{margin-top:16px; border-top:1px solid var(--border); background:#fff}
.footer-grid{display:grid; gap:16px; padding:18px 16px}
@media (min-width:760px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.site-footer h4{margin:.2rem 0 .4rem; color:var(--brand)}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{padding:4px 0}
.footer-note, .footnote{color:var(--muted); text-align:center; padding:12px 16px; border-top:1px solid var(--border)}

/* -------------------- Utilities -------------------- */
.backtotop{text-align:center; margin:6px 0 24px}
.hidden{display:none}



/* ==========================================================
   Sophisticated refresh (lightweight, no external deps)
   ========================================================== */

/* Refined tokens */
:root{
  --maxw:1120px;
  --radius:16px;
  --shadow:0 10px 30px rgba(2,8,23,.08);
  --shadow-sm:0 6px 18px rgba(2,8,23,.06);
  --ring:0 0 0 4px rgba(29,78,216,.20);
}

/* Background + typography polish */
body{
  background:
    radial-gradient(1000px 600px at 10% -10%, rgba(56,189,248,.14), transparent 55%),
    radial-gradient(900px 500px at 95% 0%, rgba(29,78,216,.12), transparent 55%),
    var(--bg);
}
h1{font-size:clamp(1.9rem, 2.6vw, 2.5rem); letter-spacing:.2px}
h2{font-size:clamp(1.25rem, 1.6vw, 1.6rem)}
.section-sub{max-width:70ch}

/* Better focus styles */
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:12px}

/* Header: glassy + cleaner separation */
.site-header{
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(230,232,235,.9);
}
.site-header .wrap{padding:14px 16px}
.brand__logo{width:46px}
.nav__row > li > a, .nav__link{padding:10px 12px}
.nav__panel{box-shadow:var(--shadow-sm)}

/* Hero: tighter + quick links */
.hero .wrap{padding:26px 16px 20px}
.hero-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(56,189,248,.22);
  box-shadow:0 8px 20px rgba(7,29,51,.10);
  text-decoration:none; color:var(--brand);
  transition:transform .18s ease, filter .18s ease, border-color .18s ease;
}
.chip:hover{transform:translateY(-1px); filter:brightness(1.03); border-color:rgba(29,78,216,.28)}
.chip:hover{transform:translateY(-1px); text-decoration:none}
@media (prefers-reduced-motion: reduce){ .chip:hover{transform:none} }

/* Cards: more depth, clearer headings */
.card{box-shadow:var(--shadow-sm)}
.card h3{margin-top:0.1rem}

/* Index highlights carousel placement */
.index-highlights{margin:0; position:relative}
.index-highlights .slider{box-shadow:var(--shadow); border-color:rgba(56,189,248,.22)}
.index-highlights__badge{
  position:absolute; left:16px; bottom:16px;
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,.80), rgba(255,255,255,.58));
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border:1px solid rgba(56,189,248,.26);
  box-shadow:0 18px 50px rgba(7,29,51,.18);
  max-width:min(560px, calc(100% - 32px));
}
.index-highlights__logo{width:42px; height:42px; object-fit:contain; background:rgba(255,255,255,.88); border-radius:14px; border:1px solid rgba(56,189,248,.22)}
.index-highlights__meta strong{display:block; color:var(--brand); line-height:1.15}
.index-highlights__meta span{display:block; color:var(--muted); font-size:.92rem; line-height:1.25}

/* Slider: captions + softer controls */
/* Hero slider sizing: shorter (not oversized) */
.slider--hero{height:clamp(300px, 30vw, 480px)}
.slider--hero .slider__track{height:100%}
.slider--hero .slider__slide{
  height:100%;
  aspect-ratio:auto;
  background:
    radial-gradient(520px 260px at 18% 15%, rgba(56,189,248,.18), rgba(56,189,248,0) 65%),
    radial-gradient(540px 320px at 85% 20%, rgba(29,78,216,.16), rgba(29,78,216,0) 62%),
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.45));
}

@media (max-width:760px){
  .slider--hero{height:clamp(260px, 64vw, 360px)}
}

.slider__track:empty{
  min-height:220px;
  background:linear-gradient(90deg,#eaf2ff 25%, #f7fbff 37%, #eaf2ff 63%);
  background-size:400% 100%;
  animation:pnhsShimmer 1.2s infinite linear;
}
@keyframes pnhsShimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion: reduce){ .slider__track:empty{animation:none} }

.slider__slide{position:relative}
.slider__bg{
  position:absolute;
  inset:-18px; /* bleed so blur doesn't show edges */
  background-size:cover;
  background-position:center;
  filter:blur(18px);
  transform:scale(1.06);
  opacity:.35;
  pointer-events:none;
}
.slider__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(11,45,74,.28) 100%),
    linear-gradient(135deg, rgba(29,78,216,.10), rgba(56,189,248,.06));
  pointer-events:none;
}
.slider__caption{
  position:absolute;
  left:14px; right:14px; bottom:14px;
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px;
  border-radius:14px;
  color:#ffffff;
  background:linear-gradient(135deg, rgba(7,29,51,.78), rgba(11,58,122,.58));
  border:1px solid rgba(56,189,248,.20);
  box-shadow:0 14px 40px rgba(7,29,51,.28);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.slider__kicker{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; opacity:.92}
.slider__title{font-size:clamp(1.08rem, 1.8vw, 1.40rem); font-weight:900; max-width:58ch}

.slider__btn{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(230,232,235,.95);
  box-shadow:var(--shadow-sm);
  opacity:.92;
}
.slider__btn:hover{opacity:1}
@media (hover:hover){
  .slider__btn{opacity:0}
  .slider:hover .slider__btn{opacity:.95}
}
.slider__dot{background:rgba(255,255,255,.45)}
.slider__dot[aria-current="true"]{background:#fff}

/* Footer: slightly softer */
.site-footer{background:rgba(255,255,255,.92)}


/* Search UI helpers */
.tag{display:inline-flex; align-items:center; font-size:.75rem; font-weight:800; letter-spacing:.2px; padding:3px 8px; border-radius:999px; background:rgba(29,78,216,.10); color:var(--brand); border:1px solid rgba(29,78,216,.18); margin-right:8px}
.muted{color:var(--muted)}

.org-name .org-role{
  display:block;
  margin-top:2px;
  font-size:0.92em;
  font-weight:500;
  opacity:.85;
}

.proj-dev{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  padding-top:10px;
  border-top:1px dashed rgba(29,78,216,.22);
  color:var(--muted);
  font-size:.95rem;
}
.dev-label{
  display:inline-flex;
  padding:3px 8px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.2px;
  background:rgba(29,78,216,.10);
  border:1px solid rgba(29,78,216,.18);
  color:var(--brand);
}
.dev-names{
  font-weight:600;
  color:var(--text);
  opacity:.9;
}