/* Faculty-facing Instructional Support shell — layered over shared styles.css.
   Purpose: richer FTCC visual rhythm without turning the site into a card catalog. */

:root {
  --hub-blue: #003B5C;
  --hub-blue-2: #005A8B;
  --hub-blue-light: #D9EAF2;
  --hub-navy: #1F2A44;
  --hub-paper: #FFFFFF;
  --hub-mist: #F3F4F6;
  --hub-ink: #1F2937;
  --hub-muted: #6B7280;
  --hub-line: rgba(31, 42, 68, .16);
  --hub-shadow: 0 14px 34px rgba(31, 42, 68, .10);
  --hub-radius: 18px;
}

body.hub-shell,
body.topic-shell {
  background: #f7f9fb;
  color: var(--hub-ink);
}

.hub-shell .site-header,
.topic-shell .site-header {
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--hub-line);
  box-shadow: 0 2px 14px rgba(31,42,68,.05);
}

.hub-shell .brand,
.topic-shell .brand {
  border-left: 5px solid var(--hub-blue-2);
  padding-left: .85rem;
  color: var(--hub-blue);
  font-size: 1.08rem;
}

.hub-shell .header-inner,
.topic-shell .header-inner { max-width: 78rem; }

.hub-shell .primary-nav,
.topic-shell .primary-nav { gap: 1.15rem; }
.hub-shell .primary-nav a,
.topic-shell .primary-nav a { color: var(--hub-ink); font-weight: 700; }
.hub-shell .primary-nav a:hover,
.hub-shell .primary-nav a[aria-current="page"],
.topic-shell .primary-nav a:hover,
.topic-shell .primary-nav a[aria-current="page"] { color: var(--hub-blue); border-bottom-color: var(--hub-blue-2); }

.utility-nav {
  display: flex;
  gap: .6rem;
  margin-left: .35rem;
  padding-left: 1rem;
  border-left: 1px solid var(--hub-line);
}
.utility-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: .45rem .75rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}
.utility-nav .quick { color: var(--hub-blue); background: var(--hub-blue-light); }
.utility-nav .help { color: #fff; background: var(--hub-blue); }
.utility-nav a:hover { filter: brightness(.96); }

.hub-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 78% 22%, rgba(217,234,242,.22), transparent 28%),
    linear-gradient(125deg, var(--hub-navy) 0%, var(--hub-blue) 54%, var(--hub-blue-2) 100%);
  border-bottom: 8px solid var(--hub-blue-light);
}
.hub-hero::after {
  content: "";
  position: absolute;
  right: -8rem;
  bottom: -12rem;
  width: 29rem;
  height: 29rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(255,255,255,.035), 0 0 0 8rem rgba(255,255,255,.025);
}
.hub-hero .wrap { position: relative; z-index: 1; max-width: 78rem; padding-top: 5.6rem; padding-bottom: 5.2rem; }
.hub-hero .eyebrow {
  margin: 0 0 .8rem;
  color: var(--hub-blue-light);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.hub-hero h1 { color: #fff; font-size: clamp(2.8rem, 4.4vw, 4.8rem); max-width: 12ch; line-height: 1.02; margin-bottom: 1rem; }
.hub-hero .lede { color: rgba(255,255,255,.94); font-size: clamp(1.1rem, 1.3vw, 1.28rem); max-width: 48rem; }
.hero-utility {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.7rem;
}
.hero-utility a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .65rem .95rem;
  border-radius: 9px;
  text-decoration: none;
  font-weight: 800;
}
.hero-utility .solid { background: #fff; color: var(--hub-blue); }
.hero-utility .outline { border: 1px solid rgba(255,255,255,.65); color: #fff; }

.practice-section {
  background: linear-gradient(180deg,#eef5f8 0%,#f7f9fb 100%);
  padding: 4.2rem 0 4.8rem;
}
.practice-section .wrap,
.resource-band .wrap,
.support-band .wrap,
.area-main .wrap { max-width: 78rem; }
.section-intro { max-width: 47rem; margin-bottom: 2rem; }
.section-kicker,
.hub-eyebrow {
  margin: 0 0 .45rem;
  color: var(--hub-blue-2);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.section-intro h2 { color: var(--hub-blue); font-size: clamp(1.8rem,2.7vw,2.7rem); }
.section-intro p { color: var(--hub-muted); font-size: 1.05rem; }

.practice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.35rem;
}
.practice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 29rem;
  padding: 1.7rem 1.6rem 1.55rem;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-top: 8px solid var(--hub-blue-2);
  border-radius: var(--hub-radius);
  box-shadow: var(--hub-shadow);
  overflow: hidden;
}
.practice-card:nth-child(2) { border-top-color: var(--hub-blue); }
.practice-card:nth-child(3) { border-top-color: var(--hub-navy); }
.practice-card::after {
  content: "";
  position: absolute;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  right: -4rem;
  top: -4rem;
  background: var(--hub-blue-light);
  opacity: .55;
}
.practice-card .number {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--hub-blue-light);
  color: var(--hub-blue);
  font-size: .82rem;
  font-weight: 900;
  margin-bottom: 1rem;
}
.practice-card h2 { color: var(--hub-blue); font-size: 1.65rem; margin-bottom: .55rem; }
.practice-card .purpose { font-size: 1.03rem; margin-bottom: 1rem; }
.practice-card ul { margin: 0 0 1.4rem; padding-left: 1.1rem; color: var(--hub-ink); }
.practice-card li { margin-bottom: .45rem; }
.practice-card .area-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 800;
  color: var(--hub-blue);
  text-decoration: none;
}
.practice-card .area-link::after { content: "→"; }
.practice-card:hover { transform: translateY(-3px); transition: transform .16s ease, box-shadow .16s ease; box-shadow: 0 18px 42px rgba(31,42,68,.14); }

.resource-band { padding: 3.8rem 0; background: #fff; }
.resource-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 3rem; align-items: start; }
.resource-layout h2 { color: var(--hub-blue); font-size: clamp(1.7rem,2.3vw,2.35rem); }
.resource-layout > div > p { color: var(--hub-muted); }
.resource-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hub-line); }
.resource-list li { margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--hub-line); }
.resource-list a { font-weight: 800; color: var(--hub-blue); font-size: 1.03rem; }
.resource-list span { display: block; color: var(--hub-muted); margin-top: .15rem; font-size: .93rem; }

.support-band {
  padding: 3.2rem 0;
  color: #fff;
  background: var(--hub-navy);
  border-top: 7px solid var(--hub-blue-2);
}
.support-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: center; }
.support-band h2 { color: #fff; font-size: 2rem; }
.support-band p { color: rgba(255,255,255,.86); }
.support-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; }
.support-actions a { padding: .72rem 1rem; border-radius: 9px; text-decoration: none; font-weight: 800; }
.support-actions .light { background:#fff; color:var(--hub-blue); }
.support-actions .ghost { color:#fff; border:1px solid rgba(255,255,255,.55); }

.hub-shell .site-footer,
.topic-shell .site-footer { background: #121a2b; border-top: 0; }
.hub-shell .footer-title,
.topic-shell .footer-title { color: #fff; }

/* Practice-area landing pages */
.area-hero {
  color: #fff;
  background:
    radial-gradient(circle at 86% 20%, rgba(217,234,242,.17), transparent 24%),
    linear-gradient(120deg,var(--hub-blue) 0%,var(--hub-blue-2) 100%);
  border-bottom: 7px solid var(--hub-blue-light);
}
.area-hero .wrap { max-width: 78rem; padding-top: 3.7rem; padding-bottom: 3.3rem; }
.area-hero .eyebrow,
.area-hero .hub-eyebrow { color: var(--hub-blue-light); }
.area-hero h1 { color:#fff; font-size:clamp(2.4rem,4vw,4rem); }
.area-hero .lede,
.area-hero > .wrap > p:not(.eyebrow):not(.hub-eyebrow) { color:rgba(255,255,255,.94); max-width:48rem; font-size:1.15rem; }

.jump-nav,
.jumpbar {
  position: sticky;
  top: 68px;
  z-index: 25;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--hub-line);
  box-shadow: 0 4px 14px rgba(31,42,68,.05);
}
.jump-nav .wrap,
.jumpbar .wrap { max-width: 78rem; display:flex; gap:.35rem; overflow-x:auto; padding-top:.7rem; padding-bottom:.7rem; }
.jump-nav strong,
.jumpbar strong { white-space:nowrap; color:var(--hub-blue); padding:.45rem .3rem; font-size:.9rem; }
.jump-nav a,
.jumpbar a { white-space:nowrap; text-decoration:none; padding:.45rem .65rem; border-radius:999px; color:var(--hub-ink); font-size:.88rem; font-weight:700; }
.jump-nav a:hover,
.jumpbar a:hover { background:var(--hub-blue-light); color:var(--hub-blue); }

.area-main { background:#f7f9fb; }
.area-section,
.resource-section { padding: 3.8rem 0; scroll-margin-top: 132px; }
.area-section:nth-of-type(even),
.resource-section.tinted { background:#eef5f8; border-top:1px solid var(--hub-line); border-bottom:1px solid var(--hub-line); }
.area-heading { display:grid; grid-template-columns:.72fr 1.28fr; gap:2.5rem; align-items:start; }
.area-heading h2 { color:var(--hub-blue); font-size:clamp(1.65rem,2.5vw,2.35rem); }
.area-heading .need { color:var(--hub-muted); font-size:1.03rem; }
.resource-stack { display:grid; gap:.85rem; }
.resource-item {
  background:#fff;
  border:1px solid var(--hub-line);
  border-left:6px solid var(--hub-blue-2);
  border-radius:12px;
  padding:1rem 1.1rem;
}
.area-section:nth-of-type(even) .resource-item { background:#f8fafc; }
.resource-item h3 { margin:0 0 .25rem; color:var(--hub-blue); font-size:1.1rem; }
.resource-item p { margin:0; font-size:.94rem; color:var(--hub-ink); }
.resource-item a { font-weight:800; }

.area-callout {
  margin-top:1.2rem;
  padding:1rem 1.1rem;
  background:var(--hub-blue-light);
  border-left:6px solid var(--hub-blue);
  border-radius:10px;
}

/* Topic pages use the same visual vocabulary as the main shell. */
.hub-header {
  position: relative;
  z-index: 40;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--hub-line);
  box-shadow: 0 2px 14px rgba(31,42,68,.05);
}
.hub-header-inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: .85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hub-brand {
  margin-right: auto;
  border-left: 5px solid var(--hub-blue-2);
  padding-left: .85rem;
  color: var(--hub-blue);
  font-weight: 800;
  text-decoration: none;
}
.hub-nav { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.hub-nav a { color:var(--hub-ink); font-weight:700; text-decoration:none; padding:.35rem .1rem; }
.hub-nav a:hover { color:var(--hub-blue); }
.hub-nav .utility { padding:.45rem .7rem; border-radius:999px; background:var(--hub-blue-light); color:var(--hub-blue); }
.hub-nav .utility:last-child { background:var(--hub-blue); color:#fff; }

.resource-section > .wrap { max-width: 78rem; }
.resource-section .section-intro { max-width: 55rem; }
.resource-section .section-intro h2 { margin-top:.2rem; }
.resource-list > article {
  padding: 1.15rem 1.2rem;
  background:#fff;
  border-left:6px solid var(--hub-blue-2);
  border-bottom:1px solid var(--hub-line);
}
.resource-list > article:first-child { border-top:1px solid var(--hub-line); border-radius:12px 12px 0 0; }
.resource-list > article:last-child { border-radius:0 0 12px 12px; }
.resource-list > article h3 { color:var(--hub-blue); margin-bottom:.3rem; }
.resource-list > article p { margin-bottom:0; }

.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.feature-card {
  background:#fff;
  border:1px solid var(--hub-line);
  border-top:5px solid var(--hub-blue-2);
  border-radius:14px;
  padding:1.2rem;
  box-shadow:0 8px 20px rgba(31,42,68,.06);
}
.feature-card h3 { color:var(--hub-blue); margin-bottom:.35rem; }
.feature-card p { margin-bottom:0; }
.resource-section .support-band {
  margin-top:2rem;
  border-radius:16px;
  padding:1.6rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
}
.light-action { display:inline-flex; flex:0 0 auto; background:#fff; color:var(--hub-blue); padding:.7rem .9rem; border-radius:9px; text-decoration:none; font-weight:800; }
.hub-footer { background:#121a2b; color:#fff; }
.hub-footer .wrap { max-width:78rem; padding-top:2rem; padding-bottom:2rem; }
.hub-footer p { color:#d9e1ee; }
.hub-footer a { color:#fff; }

@media (max-width: 1000px) {
  .practice-grid { grid-template-columns:1fr; }
  .practice-card { min-height:0; }
  .resource-layout,.support-grid,.area-heading { grid-template-columns:1fr; }
  .support-actions { justify-content:flex-start; }
  .utility-nav { width:100%; margin:0; padding:.6rem 0 0; border-left:0; border-top:1px solid var(--hub-line); }
  .feature-grid { grid-template-columns:1fr; }
  .hub-header-inner { align-items:flex-start; flex-direction:column; }
  .hub-brand { margin-right:0; }
  .hub-nav { width:100%; }
}

@media (max-width: 780px) {
  .hub-hero .wrap { padding-top:3.8rem; padding-bottom:3.7rem; }
  .hub-hero h1 { max-width:none; }
  .jump-nav,.jumpbar { top:63px; }
  .jump-nav strong,.jumpbar strong { display:none; }
  .resource-section .support-band { align-items:flex-start; flex-direction:column; }
  .hub-nav { gap:.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .practice-card:hover { transform:none; }
}