/* =========================================================
   Hope Integrated Clinic - Modern UI 2026 Enhancements
   File: /assets/css/modern-ui-2026.css
   ========================================================= */

:root{
  --hic-font-scale: 1;
  --hic-font-base: "Inter Tight", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --hic-font-dys: Atkinson Hyperlegible, OpenDyslexic, Lexend, Arial, system-ui, sans-serif;

  --hic-hc-bg: #000;
  --hic-hc-surface: #0a0a0a;
  --hic-hc-text: #fff;
  --hic-hc-border: rgba(255,255,255,0.22);
  --hic-hc-link: #7fe3ff;

  --hic-panel-shadow: 0 14px 40px rgba(7, 26, 46, 0.18);
}

html{ font-size: calc(16px * var(--hic-font-scale)); }
body{ font-family: var(--hic-font-base); }

body.hic-dyslexic{ font-family: var(--hic-font-dys); }

body.hic-high-contrast{
  background: var(--hic-hc-bg);
  color: var(--hic-hc-text);
}
body.hic-high-contrast a{ color: var(--hic-hc-link) !important; }

body.hic-high-contrast .site-header,
body.hic-high-contrast .utility-bar,
body.hic-high-contrast .services-banner,
body.hic-high-contrast .footer{
  background: var(--hic-hc-surface) !important;
  color: var(--hic-hc-text) !important;
  border-color: var(--hic-hc-border) !important;
}

body.hic-high-contrast .service-card,
body.hic-high-contrast .stat-card,
body.hic-high-contrast .hero-info-bar{
  background: var(--hic-hc-surface) !important;
  color: var(--hic-hc-text) !important;
  border-color: var(--hic-hc-border) !important;
}

.site-header{
  will-change: transform;
  transition: transform 180ms ease;
}
.site-header.hic-hidden{ transform: translateY(-110%); }
@media (prefers-reduced-motion: reduce){
  .site-header{ transition: none; }
}

.hic-reveal{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease-out, transform .6s ease-out;
  will-change: opacity, transform;
}
.hic-reveal.hic-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .hic-reveal{ opacity: 1; transform: none; transition: none; }
}

/* skeleton */
.services-grid[aria-busy="true"] .service-card{
  position: relative;
  overflow: hidden;
}
.services-grid[aria-busy="true"] .service-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(11,44,69,0.06) 0%,
    rgba(11,44,69,0.12) 35%,
    rgba(11,44,69,0.06) 70%
  );
  transform: translateX(-120%);
  animation: hic-shimmer 1.1s infinite linear;
}
@keyframes hic-shimmer{ 100%{ transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce){
  .services-grid[aria-busy="true"] .service-card::before{ animation: none; }
}
.services-grid[aria-busy="true"] .service-card{ filter: saturate(0.85); }
.services-grid[aria-busy="true"] .service-card *{ opacity: 0.06; }

/* a11y toolbar (kept, but clean) */
.hic-a11y{
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 90;
  width: min(360px, calc(100vw - 28px));
  display: grid;
  gap: 10px;
}

.hic-a11y__launcher{
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(11,44,69,0.14);
  background: #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-weight: 900;
}

.hic-a11y__panel{
  background: #fff;
  border: 1px solid rgba(11,44,69,0.14);
  border-radius: 16px;
  box-shadow: var(--hic-panel-shadow);
  padding: 12px;
}

.hic-a11y__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}

.hic-a11y__title{
  margin:0;
  font-weight: 950;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.hic-a11y__close{
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(11,44,69,0.14);
  background: #fff;
  cursor: pointer;
  font-weight: 900;
}

.hic-a11y__row{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}

.hic-a11y__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(11,44,69,0.14);
  background:#fff;
  cursor:pointer;
  font-weight: 900;
}

.hic-a11y__btn[aria-pressed="true"]{
  background: rgba(32,178,170,0.14);
  border-color: rgba(32,178,170,0.35);
}

.hic-a11y__note{
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(38,70,92,0.9);
}

body.hic-high-contrast .hic-a11y__panel,
body.hic-high-contrast .hic-a11y__launcher,
body.hic-high-contrast .hic-a11y__btn,
body.hic-high-contrast .hic-a11y__close{
  background: var(--hic-hc-surface);
  color: var(--hic-hc-text);
  border-color: var(--hic-hc-border);
}