/* ============================================================
   DSU Intranet — Concept 3 "Bold Futures" skin
   Load this AFTER styles.css. It keeps the existing intranet
   layout untouched and only restyles the BRANDING:
     · typography  — heavy Inter everywhere (no Playfair serif)
     · color        — teal-navy #163A4B, DSU red + blue (gold dropped)
     · components   — rounder cards, bolder pill buttons, Concept-3 hero
   ============================================================ */

/* ---- 1. Brand tokens ------------------------------------- */
:root{
  --dsu-navy:#163A4B;        /* Concept 3 teal-navy (was #002F6C) */
  --dsu-navy-dark:#11303d;
  --dsu-navy-deep:#0f2b38;
  --dsu-blue:#009DDC;
  --dsu-blue-light:#7fdcff;
  --dsu-red:#EE3124;
  --dsu-red-dark:#c4231a;
  --dsu-gold:#009DDC;        /* Concept 3 has no gold — remap accent to DSU blue */

  --dsu-cream:#f4f7fa;
  --bg:#f4f7fa;
  --surface:#ffffff;
  --surface-warm:#f5f8fb;
  --text:#16181d;
  --text-muted:#474c55;
  --text-soft:#737983;
  --border:#eceef2;
  --border-soft:#f2f4f7;
  --hover:#eaf6fc;

  --shadow-sm:0 1px 3px rgba(15,43,56,.06);
  --shadow:0 4px 14px rgba(15,43,56,.08),0 2px 6px rgba(15,43,56,.04);
  --shadow-lg:0 12px 40px rgba(15,43,56,.12),0 4px 12px rgba(15,43,56,.06);
  --shadow-xl:0 24px 60px rgba(15,43,56,.18);

  --radius:14px;             /* slightly rounder, Concept-3 feel */
  --radius-lg:20px;
}

/* ---- 2. Typography — Inter heavy, no serif --------------- */
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.display-1,.display-2,.display-3,
.section-head h2,
.audience-card .photo .audience-badge,
.news-card h3,
.mosaic .feature h3,
.split .text h3,
.colorband h2,
.colorband .stat strong,
.article-hero h1,
.article-body h2,
.files-section h2,
footer.footer strong{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif !important;
  letter-spacing:-.02em;
}
.display-1{font-weight:900;letter-spacing:-.03em;line-height:.98}
.display-2{font-weight:900}
.display-3{font-weight:800}
.section-head h2{font-weight:900;letter-spacing:-.025em}
.news-card h3,
.mosaic .feature h3,
.split .text h3,
.colorband h2,
.article-hero h1,
.article-body h2,
.files-section h2{font-weight:800}
.audience-card .photo .audience-badge{font-weight:900}
.colorband .stat strong{font-weight:900;color:var(--dsu-blue-light);letter-spacing:-.03em}

/* eyebrows keep their dark-bg pop, now in DSU blue (via --dsu-gold remap) */
.eyebrow{letter-spacing:2px}

/* ---- 3. Buttons — bolder Concept-3 pills ----------------- */
.btn-primary{font-weight:800;box-shadow:0 10px 24px rgba(238,49,36,.30)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(238,49,36,.42)}
/* keep button label white even when it's a link inside article body */
.btn-primary,.article-body a.btn-primary,
.btn-primary:hover,.article-body a.btn-primary:hover,
.btn-primary:visited,.article-body a.btn-primary:visited{color:#fff !important}
.btn-primary svg,.article-body a.btn-primary svg{color:#fff;stroke:#fff}
.btn-ghost{font-weight:800}
.top-link{font-weight:700}
.top-link.cta{background:var(--dsu-red);box-shadow:0 8px 20px rgba(238,49,36,.28)}
.top-link.cta:hover{background:var(--dsu-red-dark)}

/* animated red underline on top-nav (Concept 3 signature) */
.topbar nav.main-menu a{position:relative}
.topbar nav.main-menu a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--dsu-red);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.topbar nav.main-menu a:hover{background:transparent;color:var(--dsu-navy)}
.topbar nav.main-menu a:hover::after{transform:scaleX(1)}

/* ---- 4. Hero — Concept 3 navy→red wash + blue glow ------- */
.hero-magazine::before{
  background-image:
    radial-gradient(1000px 520px at 85% -12%,rgba(0,157,220,.38),transparent 60%),
    linear-gradient(118deg,rgba(15,43,56,.93) 34%,rgba(196,35,26,.46) 100%),
    url('img/p15.jpg');
  background-size:cover,cover,cover;
  background-position:center,center,78% 28%;
}
.hero-magazine h1 .accent{
  background:linear-gradient(120deg,var(--dsu-blue),#7fdcff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* breadcrumb sits on the dark hero — make it legible (white) */
.hero-magazine .breadcrumb,
.hero-magazine .breadcrumb a,
.hero-magazine .breadcrumb span{color:#fff}
.hero-magazine .breadcrumb a{opacity:.85}
.hero-magazine .breadcrumb a:hover{opacity:1;color:var(--dsu-blue-light)}
.hero-magazine .breadcrumb-sep{color:rgba(255,255,255,.6)}
/* responsive 16:9 YouTube embeds inside article body */
.article-body .video{position:relative;width:100%;padding-top:56.25%;margin:18px 0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.article-body .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* click-to-play facade (works on file:// and HTTP; plays inline once served) */
.article-body .video[data-yt]{background-size:cover;background-position:center;cursor:pointer;background-color:#000}
.article-body .video[data-yt]::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,43,56,.05),rgba(15,43,56,.45))}
.article-body .video[data-yt] .video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:84px;height:60px;border-radius:14px;background:var(--dsu-red);box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .15s,background .15s;z-index:2}
.article-body .video[data-yt] .video-play::after{content:"";position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent #fff}
.article-body .video[data-yt]:hover .video-play{transform:translate(-50%,-50%) scale(1.06);background:var(--dsu-red-dark)}
.article-body .video[data-yt]:focus-visible{outline:3px solid var(--dsu-blue);outline-offset:3px}
/* faculty & staff directory */
.dir-search-wrap{margin:28px 0 8px}
.dir-search{width:100%;max-width:520px;padding:13px 18px;border:1px solid var(--border);border-radius:999px;font-size:15px;font-family:var(--sans,inherit);outline:none;background:#fff;transition:border-color .15s,box-shadow .15s}
.dir-search:focus{border-color:var(--dsu-blue);box-shadow:0 0 0 3px rgba(0,157,220,.18)}
.dir-empty{margin-top:18px;color:var(--text-muted);font-weight:600}
.dir-dept .directory-card .name{font-size:16px}
.dir-dept .directory-card .contact a{font-weight:600}
.dir-jump{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.dir-jump a{font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:999px;border:1px solid var(--border);color:var(--dsu-navy);background:#fff;transition:.15s}
.dir-jump a:hover{background:var(--dsu-navy);color:#fff;border-color:var(--dsu-navy)}

/* ---- 5. Misc branding cleanups (drop old navy/gold) ------ */
.colorband{background:linear-gradient(120deg,var(--dsu-navy-deep) 0%,var(--dsu-navy) 45%,#1d4d63 100%)}
.article-hero .photo-band::after{background:linear-gradient(135deg,rgba(15,43,56,.70),rgba(15,43,56,.40) 60%,rgba(0,157,220,.35))}
.article-body h2{border-bottom-color:var(--dsu-red)}            /* red accent bar, Concept-3 energy */
.split .visual .badge{color:#fff}                               /* badge bg now blue → white text */
.files-section h2{display:flex}

/* card hover lift to match Concept-3 program cards */
.news-card:hover,.audience-card:hover,.mosaic-tile:hover,.directory-card:hover{box-shadow:var(--shadow-lg)}

/* topbar profile / sign-in avatar */
.topbar-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--dsu-navy),var(--dsu-blue));color:#fff;flex-shrink:0;
  box-shadow:0 2px 8px rgba(15,43,56,.25);transition:transform .15s,box-shadow .15s;text-decoration:none}
.topbar-avatar:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,43,56,.32)}
.topbar-avatar svg{display:block}