/* ==========================================================================
   ALI design system for alaska.edu/arcticleadership  (October 2026)
   Loaded only on ALI pages, through each page's headcode:
   <link rel="stylesheet" href="/arcticleadership/files/ali.css">
   Palette and type from the ALI badge: Polar Night, Deep Sky, Aurora Violet,
   Twilight, Aurora Teal, Glacier, Snowfield, Dusk Gray; Marcellus + Montserrat.
   The UA global header (logo, Quick Links, UAF/UAA/UAS) is left as UA designed it.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root{
  --ali-night:#1A0F2E; --ali-sky:#2A1747; --ali-violet:#7B3FD1; --ali-twilight:#A97BF0;
  --ali-teal:#3FE3DC; --ali-glacier:#4FA8D6; --ali-snow:#ECEDE7; --ali-dusk:#4A4060;
  --ali-line:#D6D4CC; --ali-mist:#C9C4D6; --ali-paper:#FFFFFF;
  --ali-display:"Marcellus", Georgia, "Times New Roman", serif;
  --ali-text:"Montserrat", "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Base ---------- */
body{font-family:var(--ali-text);color:var(--ali-night)}
main#content{background:var(--ali-snow);padding-bottom:2.5rem}
main#content .page-content{color:var(--ali-night);font-size:1rem;line-height:1.65}
main#content h1,main#content h2,main#content h3,main#content .h1,main#content .h2,main#content .h3{
  font-family:var(--ali-display);font-weight:400;color:var(--ali-night);letter-spacing:0;line-height:1.15}
main#content h4,main#content h5,main#content h6{font-family:var(--ali-text);font-weight:600;color:var(--ali-night)}
main#content h2{font-size:1.9rem;margin-top:2rem}
main#content h3{font-size:1.45rem}
h1.page-title{font-size:2.5rem;border-bottom:1px solid var(--ali-line)!important;padding-bottom:.6rem}
main#content a{color:var(--ali-violet);text-underline-offset:2px}
main#content a:hover,main#content a:focus{color:var(--ali-night)}
main#content a:focus-visible{outline:3px solid var(--ali-violet);outline-offset:2px}
main#content hr{border:0;border-top:1px solid var(--ali-line);margin:2rem 0}
main#content strong,main#content b{font-weight:600}
.breadcrumb,.breadcrumb-item,.breadcrumb-item.active{color:var(--ali-dusk);font-size:.9rem}
.breadcrumb a{color:var(--ali-violet)}

/* ---------- Section band ("Arctic Leadership") ---------- */
#main-slider{display:none}
#navbar-header .site-header{
  position:relative;overflow:hidden;background-color:var(--ali-night);
  border-top:4px solid var(--ali-teal);padding:3.6rem 0 2.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='190' viewBox='0 0 170 190'%3E%3Cg fill='%233FE3DC'%3E%3Crect x='0' y='-10' width='14' height='120' rx='7' opacity='.85'/%3E%3Crect x='32' y='20' width='14' height='80' rx='7' opacity='.5'/%3E%3Crect x='64' y='-10' width='14' height='150' rx='7' opacity='.9'/%3E%3Crect x='96' y='10' width='14' height='95' rx='7' fill='%234FA8D6' opacity='.6'/%3E%3Crect x='128' y='-10' width='14' height='130' rx='7' opacity='.4'/%3E%3C/g%3E%3Ccircle cx='158' cy='170' r='2.5' fill='%23ECEDE7' opacity='.7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8% top -4px;background-size:auto 100%}
#navbar-header .site-header div.row,#navbar-header .site-header div.col{justify-content:flex-start!important}
#navbar-header .site-header .h1,#navbar-header .site-header h1{margin:0;font-family:var(--ali-display);font-weight:400;font-size:2.7rem;line-height:1.05;letter-spacing:0}
#navbar-header .site-header .h1 a{color:var(--ali-snow)!important;text-decoration:none}
#navbar-header .site-header .align-self-center::after{
  content:"Developing leaders for a rapidly changing Arctic";display:block;margin-top:.55rem;
  font-family:var(--ali-text);font-size:1rem;color:var(--ali-mist)}

/* ---------- Section menu ---------- */
.menuPrimary{background:var(--ali-sky)!important;border-top:1px solid #3A2C57!important}
.menuPrimary .navbar-nav .nav-link{font-family:var(--ali-text);font-weight:500;font-size:.92rem;color:rgba(236,237,231,.82)!important;border-bottom:4px solid transparent!important}
.menuPrimary .navbar-nav .nav-link:hover,.menuPrimary .navbar-nav .nav-link:focus{color:var(--ali-snow)!important;border-bottom-color:var(--ali-teal)!important}
.menuPrimary .navbar-nav .active>.nav-link,.menuPrimary .navbar-nav .nav-link.active{color:var(--ali-snow)!important;border-bottom-color:var(--ali-teal)!important}
.menuPrimary .dropdown-menu{border-radius:10px;border:1px solid var(--ali-line);padding:.4rem}
.menuPrimary .dropdown-item{font-family:var(--ali-text);font-size:.9rem;color:var(--ali-night);border-radius:6px}
.menuPrimary .dropdown-item:hover,.menuPrimary .dropdown-item:focus{background:var(--ali-snow);color:var(--ali-violet)}

/* ---------- Accordions and cards from UA components ---------- */
.accordion-container .card{border:1px solid var(--ali-line);border-radius:12px;overflow:hidden}
.accordion-container .card-header{background-color:var(--ali-sky)!important}
.accordion-container .card-header a,.accordion-container .card-header button{font-family:var(--ali-text);color:var(--ali-snow)!important}
.accordion-container .card-header a:hover,.accordion-container .card-header button:hover{color:var(--ali-teal)!important}
main#content .bg-darkgray{background-color:var(--ali-sky)!important;color:var(--ali-snow)!important}
main#content .bg-darkgray :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.card-title,.rotate-icon,p,span){color:var(--ali-snow)!important}
main#content .bg-lightgray{background-color:var(--ali-paper)!important;color:var(--ali-night)!important;border-top:1px solid var(--ali-line)}
main#content .ou-component-image-card-accordion .card{border-radius:12px;overflow:hidden;border:1px solid var(--ali-line)}
main#content .ou-component-image-card-accordion .card-header a{font-family:var(--ali-display)}

/* ---------- Tables ---------- */
main#content table.table{background:var(--ali-paper);border:1px solid var(--ali-line);border-radius:12px;overflow:hidden;border-collapse:separate;border-spacing:0}
main#content table.table thead th{background:var(--ali-night);color:var(--ali-snow);font-weight:600;border:0}
main#content table.table td{border-top:1px solid var(--ali-line);font-variant-numeric:tabular-nums}

/* ---------- ALI content components ---------- */
.ali-eyebrow{display:block;font-family:var(--ali-text);font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ali-violet);margin-bottom:.4rem}
.ali-lede{font-size:1.15rem;line-height:1.6;max-width:62ch}
.ali-deadlines{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:1.25rem 0 1.5rem}
.ali-card{background:var(--ali-paper);border:1px solid var(--ali-line);border-radius:14px;padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.35rem;min-width:0}
.ali-card .ali-date{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ali-violet)}
.ali-card .ali-title{font-family:var(--ali-display);font-size:1.3rem;line-height:1.2;color:var(--ali-night)}
.ali-card p{margin:0;font-size:.92rem;color:var(--ali-dusk)}
.ali-card--night{background:var(--ali-night);border-color:var(--ali-night)}
.ali-card--night .ali-date{color:var(--ali-teal)}
.ali-card--night .ali-title{color:var(--ali-snow)}
.ali-card--night p{color:var(--ali-mist)}
main#content .ali-card--night a{color:var(--ali-teal)}
.ali-panel{background:var(--ali-paper);border:1px solid var(--ali-line);border-radius:16px;padding:1.5rem 1.6rem;margin:1.5rem 0}
.ali-panel > h2:first-child,.ali-panel > h3:first-child{margin-top:0}
.ali-panel ul{padding-left:1.2rem;margin-bottom:1rem}
.ali-panel ul li{margin-bottom:.35rem}
.ali-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.92rem;color:var(--ali-dusk);border-top:1px solid var(--ali-line);padding-top:.8rem;margin-top:.5rem}
.ali-meta strong{color:var(--ali-night)}
.ali-callout{background:var(--ali-night);color:var(--ali-snow);border-radius:16px;padding:1.5rem 1.6rem;margin:1.5rem 0}
main#content .ali-callout h2,main#content .ali-callout h3{color:var(--ali-snow);margin-top:0}
main#content .ali-callout a{color:var(--ali-teal)}
.ali-callout p{color:var(--ali-mist)}
.ali-btn,main#content a.ali-btn{display:inline-block;background:var(--ali-teal);color:var(--ali-night)!important;font-weight:600;font-size:.92rem;border-radius:999px;padding:.6rem 1.15rem;text-decoration:none}
.ali-btn:hover,main#content a.ali-btn:hover{background:var(--ali-snow);color:var(--ali-night)!important}

/* ---------- Footer (UA logo and legal text unchanged) ---------- */
footer.swFooter{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 92' preserveAspectRatio='none'%3E%3Cpath d='M0 92 L330 92 L470 30 L520 52 L600 0 L680 46 L730 26 L870 92 L1200 92 Z' fill='%231A0F2E'/%3E%3C/svg%3E") no-repeat center top/100% 92px!important;background-color:var(--ali-snow)!important}
.footerContainer{background:var(--ali-night)!important}
footer div.container-fluid a:hover,footer div.container-fluid a:active,footer a:hover{color:var(--ali-teal)!important}

/* ---------- Small screens ---------- */
@media (max-width:767px){
  #navbar-header .site-header{padding:1.5rem 0 1.4rem;background-size:auto 55%;background-position:right 3% top -4px}
  #navbar-header .site-header .align-self-center{padding-right:4.5rem}
  #navbar-header .site-header .h1,#navbar-header .site-header h1{font-size:2rem}
  #navbar-header .site-header .align-self-center::after{font-size:.9rem}
  h1.page-title{font-size:2rem}
  main#content img{max-width:100%;height:auto}
  main#content figure{max-width:100%!important;width:auto!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Refinements ---------- */
main#content .ali-eyebrow + h2,main#content .ali-eyebrow + h3{margin-top:0}
main#content .ali-card,main#content .ali-panel,main#content .ali-callout{border-radius:14px!important}

/* ---------- Homepage blocks ---------- */
main#content .ali-card .ali-more{font-weight:600;margin-top:auto;padding-top:.4rem;font-size:.92rem}
.ali-strip{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline;background:var(--ali-paper);border:1px solid var(--ali-line);border-radius:14px!important;padding:1rem 1.25rem;margin:1.75rem 0}
.ali-strip .ali-eyebrow{width:100%;margin:0}
.ali-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin:1rem 0 1.5rem}
.ali-tiers > div{border-top:3px solid var(--ali-night);padding-top:.8rem;min-width:0}
main#content .ali-tiers h3{margin:.2rem 0 .4rem;font-size:1.3rem}
.ali-tiers p{font-size:.95rem;margin-bottom:.4rem}
.ali-credit{font-size:.9rem;color:var(--ali-dusk);border-top:1px solid var(--ali-line);padding-top:1rem;margin-top:2rem}
/* LinkedIn follow strip + people links */
.ali-follow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.25rem;background:var(--ali-paper);border:1px solid var(--ali-line);border-left:4px solid var(--ali-violet);border-radius:0 14px 14px 0!important;padding:1rem 1.25rem;margin:2.5rem 0 1rem}
.ali-follow p{margin:0;font-size:.95rem;color:var(--ali-night)}
.ali-follow a.ali-btn{margin:0}
.ali-li{font-size:.85rem;font-weight:600;white-space:nowrap}
[id].ali-person{scroll-margin-top:6rem}