/* ============================================================
   RegNet Quick Links — Sidebar Panel Styles
   Path (SharePoint): /regnet/SiteAssets/dev/css/regnet-quick-links.css

   Self-contained, SharePoint-safe. IAEA brand palette
   (Visual Identity Guide, July 2024). No !important, no JS.
   ============================================================ */

/* ===== SCOPING / RESET ===== */
.regnet-ql-root, .regnet-ql-root * { box-sizing: border-box; }

/* ===== DESIGN TOKENS (IAEA brand palette) ===== */
.regnet-ql-root {
  --clr-primary:      #0069B4;   /* IAEA Blue */
  --clr-primary-dk:   #043460;   /* Secondary Dark Blue */
  --clr-primary-md:   #084783;   /* Secondary Medium Blue */
  --clr-surface:      #FFFFFF;
  --clr-surface-alt:  #EEF1F7;   /* Blue Grey */
  --clr-text:         #333233;   /* Dark Grey */
  --clr-muted:        #878787;   /* Medium Grey */
  --clr-border:       #D5DAE3;

  --ff:               'Roboto', Arial, sans-serif;
  --fs-title:         1rem;
  --fs-link:          0.8125rem;

  --sp-xs: .25rem; --sp-sm: .5rem; --sp-md: .75rem;
  --sp-lg: 1rem;   --sp-xl: 1.25rem;

  --radius-sm: 6px;
  --radius-md: 10px;

  --chip: 26px;
  --icon: 16px;

  --shadow:     0 1px 3px rgba(16, 38, 68, .08);
  --focus-ring: 2px solid var(--clr-primary);

  /* Icon glyphs — RegNet SiteAssets/icons (bluish PNGs, shown as-authored) */
  --icon-link: url("/regnet/SiteAssets/dev/icons/cright-512.png");
  --icon-doc:  url("/regnet/SiteAssets/dev/icons/1-document-512.png");
  --icon-mail: url("/regnet/SiteAssets/dev/icons/email-1-512.png");

  font-family: var(--ff);
  color: var(--clr-text);
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== PANEL ===== */
.regnet-ql {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-top: 3px solid var(--clr-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: var(--sp-md);
}

/* ===== SECTION TITLES ===== */
.regnet-ql__title {
  font-family: var(--ff);
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--clr-primary-dk);
  letter-spacing: -.01em;
  margin: 0 0 var(--sp-sm);
  padding-bottom: var(--sp-xs);
  position: relative;
}
.regnet-ql__title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 34px; height: 3px;
  background: var(--clr-primary);
  border-radius: 2px;
}
.regnet-ql__title--sub { margin-top: var(--sp-lg); }

/* ===== LINK LIST ===== */
.regnet-ql__list { list-style: none; margin: 0; padding: 0; }
.regnet-ql__item { margin: 0; }

.regnet-ql__link {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: .3125rem var(--sp-sm);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--clr-text);
  font-size: var(--fs-link);
  line-height: 1.35;
  transition: background .18s ease, color .18s ease;
}
.regnet-ql__link:hover,
.regnet-ql__contact-link:hover {
  background: var(--clr-surface-alt);
  color: var(--clr-primary-dk);
  text-decoration: none;
}
.regnet-ql__link:focus-visible,
.regnet-ql__contact-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.regnet-ql__label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* ===== ICON GLYPHS (bluish PNG, shown as-authored in every state) ===== */
.regnet-ql__icon {
  flex: 0 0 auto;
  width: var(--chip); height: var(--chip);
  display: inline-flex; align-items: center; justify-content: center;
}
.regnet-ql__icon::before {
  content: "";
  width: var(--icon); height: var(--icon);
  background: var(--_icon) center / contain no-repeat;
}
.regnet-ql__icon--link { --_icon: var(--icon-link); }
.regnet-ql__icon--doc  { --_icon: var(--icon-doc); }
.regnet-ql__icon--mail { --_icon: var(--icon-mail); }

/* ===== TRAILING ARROW (CSS glyph, appears on hover/focus) ===== */
.regnet-ql__arrow {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  margin-left: var(--sp-xs);
  border-top: 2px solid var(--clr-muted);
  border-right: 2px solid var(--clr-muted);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease;
}
.regnet-ql__link:hover .regnet-ql__arrow,
.regnet-ql__link:focus-visible .regnet-ql__arrow {
  opacity: 1;
  border-color: var(--clr-primary);
  transform: rotate(45deg) translateX(2px);
}

/* ===== CONTACT ===== */
.regnet-ql__contact {
  margin-top: var(--sp-lg);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--clr-border);
}
.regnet-ql__contact-link {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  padding: .3125rem var(--sp-sm);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--clr-primary-md);
  font-size: var(--fs-link);
  font-weight: 500;
  transition: background .18s ease, color .18s ease;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .regnet-ql-root .regnet-ql__link,
  .regnet-ql-root .regnet-ql__arrow,
  .regnet-ql-root .regnet-ql__contact-link { transition: none; }
}