/* =============================================================================
   UAMH design system — single source of truth for the redesign
   Phase 1 (global shell). Presentation only; no PHP/URL/param contracts touched.
   Palette aligned to the University of Toronto brand guide.
   ========================================================================== */

/* ---- Self-hosted Inter (subset: latin) --------------------------------- */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter/inter-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter/inter-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter/inter-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/inter/inter-latin-700-normal.woff2') format('woff2');
}

/* Geogrotesque Medium — used for the "UAMH" wordmark in the header. */
@font-face{
  font-family:'Geograph';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/geograph/geogrotesque-medium.woff2') format('woff2'),
      url('../fonts/geograph/geogrotesque-medium.woff') format('woff');
}

/* ---- Design tokens ----------------------------------------------------- */
:root{
  /* Primary — U of T Blue (Pantone 655) */
  --uoft-blue:#1E3765;
  --uoft-blue-80:#4A5D80;
  --uoft-blue-hover:#2B477A;

  /* Secondary accents (use sparingly) */
  --teal:#007FA3;          /* Pantone 633 — links, primary buttons (AA on white) */
  --teal-hover:#00647F;
  --teal-light:#6FC7EA;    /* Pantone 2985 — focus, highlight */
  --green:#00A189;         /* Pantone 3285 — success */
  --warm-red:#DC4633;      /* Warm Red — errors/destructive */
  --warm-red-hover:#B8391F;

  /* Neutrals */
  --ink:#1A2331;           /* body text — ~12:1 on white */
  --gray-600:#55606E;      /* secondary text */
  --gray-300:#D0D1C9;      /* Cool Gray 2 — borders, rules */
  --surface:#F5F6F7;       /* card / zebra background */
  --white:#FFFFFF;

  /* Typography */
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* Spacing scale (4px base) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  /* Layout */
  --container:1120px;
  --radius:8px;
  --radius-lg:12px;
}

/* ---- Reset / base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  text-align:left;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;}

a{color:var(--teal);text-decoration:underline;text-underline-offset:2px;}
a:hover{color:var(--teal-hover);}
a:visited{color:var(--teal);}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-sans);
  color:var(--uoft-blue);
  line-height:1.2;
  font-weight:600;
  margin:0 0 var(--space-4);
}
h1{font-size:2rem;}
h2{font-size:1.5rem;}
h3{font-size:1.25rem;}
h4{font-size:1.0625rem;}
p{margin:0 0 var(--space-4);}
em,i{font-style:italic;}
strong,b{font-weight:600;}

/* ---- Accessibility helpers -------------------------------------------- */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--space-3);top:-48px;z-index:200;
  background:var(--uoft-blue);color:#fff;padding:10px 16px;border-radius:var(--radius);
  text-decoration:none;transition:top .15s;
}
.skip-link:focus{top:var(--space-3);color:#fff;}
:focus-visible{outline:3px solid var(--teal-light);outline-offset:2px;}

/* ---- Layout container -------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--space-5);
}

/* =============================================================================
   SITE HEADER + TOP NAVIGATION
   ========================================================================== */
.site-header{
  background:var(--uoft-blue);
  color:#fff;
  border-bottom:4px solid var(--teal);
}
.site-header .container{
  display:flex;align-items:center;gap:var(--space-4);
  min-height:64px;
}
/* Co-branding lockup: crest | white divider | UAMH wordmark image.
   All three images share the crest height and BOTTOM-align. */
.site-brand{
  display:flex;align-items:flex-end;gap:16px;
  color:#fff;text-decoration:none;
  margin-right:auto;padding:var(--space-2) 0;
}
/* Crest and wordmark are now separate links (crest → utoronto.ca, wordmark → home).
   Each wraps one image and acts as a non-shrinking, bottom-aligned flex item. */
.site-brand > a{ display:block;line-height:0;flex:none;text-decoration:none; }
.site-brand .brand-logo{
  height:46px;width:auto;flex:none;display:block;
}
/* white vertical divider image (vertical_bar.png), same height as the crest +
   wordmark so it bottom-aligns; flex gap (16px) gives equal space either side.
   Width pinned so it renders as a thin hairline (proportional scaling of the
   1px source would be sub-pixel/invisible). */
.site-brand .brand-divider{
  flex:none;height:46px;width:1px;display:block;
}
/* On high-DPI screens 1px CSS = 2 device px; drop to a single device pixel */
@media (min-resolution:2dppx){
  .site-brand .brand-divider{ width:.5px; }
}
/* UAMH wordmark (uamh_centre.png; uamh_only.png swapped in <=560px via <picture>) */
.site-brand .brand-wordmark{ flex:none;display:block;line-height:0; }
.site-brand .brand-wordmark img{ height:46px;width:auto;display:block; }
@media (max-width:560px){
  .site-brand{ gap:12px; }
}
/* The compact mobile wordmark is wider than the old "UAMH"-only mark; shrink the
   whole lockup a touch on narrow phones so the hamburger stays on the same row. */
@media (max-width:430px){
  .site-brand{ gap:9px; }
  .site-brand .brand-logo,
  .site-brand .brand-divider,
  .site-brand .brand-wordmark img{ height:40px; }
  /* tighten the brand↔toggle gap so the toggle stays on the header row */
  .site-header .container{ column-gap:8px; }
}

/* nav */
.site-nav{display:flex;}
.nav-list{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:2px;}
.nav-item{position:relative;display:flex;}
.nav-link,.nav-top{
  color:#dfe6f2;text-decoration:none;font-size:.9375rem;font-weight:500;
  font-family:inherit;background:none;border:0;cursor:pointer;
  padding:20px 14px;display:inline-flex;align-items:center;gap:6px;line-height:1;
}
.nav-link:hover,.nav-top:hover{background:var(--uoft-blue-hover);color:#fff;}
.nav-link:visited{color:#dfe6f2;}
.nav-link[aria-current="page"],.nav-item.is-active > .nav-top{
  color:#fff;box-shadow:inset 0 -3px 0 var(--teal-light);
}
.nav-top .caret{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;transition:transform .15s;
}
.nav-item.is-open .nav-top .caret{transform:rotate(180deg);}

/* submenu */
.submenu{
  list-style:none;margin:0;padding:6px 0;position:absolute;top:100%;left:0;z-index:120;
  min-width:230px;background:#fff;border:1px solid var(--gray-300);
  border-radius:0 0 var(--radius) var(--radius);box-shadow:0 8px 24px rgba(30,55,101,.15);
  display:none;
}
.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu,
.nav-item.is-open > .submenu{display:block;}
.submenu a{
  display:flex;align-items:center;gap:6px;justify-content:space-between;
  padding:9px 16px;color:var(--ink);text-decoration:none;font-size:.9375rem;
}
.submenu a:hover,.submenu a:focus{background:var(--surface);color:var(--teal-hover);}
.submenu a[aria-current="page"]{color:var(--teal-hover);font-weight:500;box-shadow:inset 3px 0 0 var(--teal-light);}
.submenu a .ext{font-size:.75rem;color:var(--gray-600);}

/* mobile toggle */
.nav-toggle{
  display:none;background:none;border:1px solid rgba(255,255,255,.35);
  color:#fff;font-size:1.25rem;line-height:1;cursor:pointer;
  padding:8px 10px;border-radius:var(--radius);
}
.nav-toggle:focus-visible{outline:3px solid var(--teal-light);}

/* Switch to the hamburger before the horizontal nav crowds the full wordmark.
   Above this the full lockup + inline nav fit with comfortable margin; below it
   the nav collapses to a button so the full wordmark keeps its room. */
@media (max-width:1060px){
  .nav-toggle{display:block;}
  .site-header .container{flex-wrap:wrap;min-height:56px;}
  .site-nav{flex-basis:100%;display:none;}
  .site-nav.is-open{display:block;}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;padding-bottom:var(--space-2);}
  .nav-item{flex-direction:column;}
  .nav-link,.nav-top{padding:13px 8px;border-top:1px solid var(--uoft-blue-hover);width:100%;justify-content:space-between;}
  .nav-top{justify-content:space-between;}
  .nav-link[aria-current="page"],.nav-item.is-active > .nav-top{box-shadow:inset 3px 0 0 var(--teal-light);}
  /* submenu becomes an in-flow accordion on mobile */
  .submenu{
    position:static;display:none;min-width:0;border:0;border-radius:0;box-shadow:none;
    background:var(--uoft-blue-hover);padding:0;
  }
  .nav-item.is-open > .submenu{display:block;}
  .nav-item:hover > .submenu,.nav-item:focus-within > .submenu{display:none;}
  .nav-item.is-open > .submenu{display:block;}
  .submenu a{color:#dfe6f2;padding-left:24px;border-top:1px solid rgba(255,255,255,.08);}
  .submenu a:hover,.submenu a:focus{background:rgba(255,255,255,.06);color:#fff;}
}

/* =============================================================================
   MAIN + FOOTER
   ========================================================================== */
.site-main{padding:var(--space-6) 0 var(--space-7);min-height:50vh;}
.page-title{margin-top:0;}

.utility-bar{
  background:var(--surface);border-bottom:1px solid var(--gray-300);
  font-size:.8125rem;
}
.utility-bar .container{display:flex;justify-content:flex-end;gap:var(--space-4);padding-top:6px;padding-bottom:6px;}
.utility-bar a{color:var(--gray-600);text-decoration:none;}
.utility-bar a:hover{color:var(--teal);text-decoration:underline;}

.site-footer{
  background:var(--uoft-blue);color:#c5d0e2;margin-top:var(--space-7);
  padding:var(--space-5) 0;font-size:.875rem;
}
.site-footer .container{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;align-items:center;}
.site-footer .footer-years{margin-right:.6em;}
.site-footer a{color:#fff;}
.site-footer nav{display:flex;gap:var(--space-4);flex-wrap:wrap;}

/* =============================================================================
   COMPONENTS
   ========================================================================== */

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:inherit;font-size:.9375rem;font-weight:500;line-height:1;
  padding:10px 18px;border-radius:var(--radius);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .15s,color .15s;
}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--teal);color:#fff;}
.btn-primary:hover,.btn-primary:visited{background:var(--teal-hover);color:#fff;}
.btn-secondary{background:#fff;color:var(--teal);border-color:var(--teal);}
.btn-secondary:hover,.btn-secondary:visited{background:#eef7fa;color:var(--teal-hover);}
.btn-ghost{background:transparent;color:var(--uoft-blue);}
.btn-ghost:hover,.btn-ghost:visited{background:var(--surface);color:var(--uoft-blue);}
.btn-danger{background:var(--warm-red);color:#fff;}
.btn-danger:hover,.btn-danger:visited{background:var(--warm-red-hover);color:#fff;}

/* Forms */
.field{margin-bottom:var(--space-4);}
.field > label{display:block;font-size:.8125rem;font-weight:500;color:var(--uoft-blue);margin-bottom:5px;}
.input,input[type=text],input[type=email],input[type=search],input[type=tel],select,textarea{
  width:100%;box-sizing:border-box;font-family:inherit;font-size:.9375rem;
  color:var(--ink);padding:9px 11px;border:1px solid var(--gray-300);
  border-radius:var(--radius);background:#fff;
}
.input:focus,input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,127,163,.18);
}

/* Card */
.card{
  background:#fff;border:1px solid var(--gray-300);border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-5);
}
/* Tinted card: 25% of the teal accent (#007FA3) over the page. */
.card-tint{ background:rgba(0,127,163,.25); border-color:rgba(0,127,163,.4); }
.card-tint a{ color:var(--teal-hover); }

/* Definition table (details view) */
.detail-list{
  display:grid;grid-template-columns:200px 1fr;
  border:1px solid var(--gray-300);border-radius:var(--radius-lg);overflow:hidden;
  font-size:.9375rem;margin:0;
}
.detail-list dt{
  background:var(--surface);color:var(--uoft-blue);font-weight:600;
  padding:10px 14px;border-bottom:1px solid var(--gray-300);
}
.detail-list dd{margin:0;padding:10px 14px;color:var(--ink);border-bottom:1px solid var(--gray-300);}
.detail-list dt:last-of-type,.detail-list dd:last-of-type{border-bottom:none;}
@media (max-width:640px){
  .detail-list{grid-template-columns:1fr;}
  .detail-list dt{border-bottom:none;padding-bottom:0;background:#fff;}
  .detail-list dd{padding-top:2px;}
}

/* Alerts */
.alert{
  border-radius:var(--radius);padding:11px 14px;font-size:.9375rem;
  border:1px solid;margin-bottom:var(--space-4);
}
.alert-success{background:#e6f6f1;border-color:#9fddc9;color:#0b6a4f;}
.alert-error{background:#fcecea;border-color:#f2c0b6;color:#a5301b;}
.alert-info{background:#e7f3f7;border-color:#b4dbe8;color:#0b5a72;}

/* Sequence / FASTA blocks */
.seq{
  font-family:var(--font-mono);font-size:.8125rem;white-space:pre-wrap;
  word-break:break-all;border:none;background:var(--surface);
  padding:var(--space-3);border-radius:var(--radius);
}

/* In-section pill navigation (e.g. About Us sub-sections) */
.section-nav{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 var(--space-5); }
.section-nav a{
  display:inline-block; padding:6px 14px; border-radius:20px;
  border:1px solid var(--gray-300); background:#fff;
  color:var(--teal); text-decoration:none; font-size:.875rem; font-weight:500;
}
.section-nav a:hover{ background:#eef7fa; border-color:var(--teal); }
.section-nav a[aria-current="page"]{ background:var(--uoft-blue); color:#fff; border-color:var(--uoft-blue); }

/* Breadcrumb */
.breadcrumb{
  font-size:.8125rem;color:var(--gray-600);margin:0 0 var(--space-4);
}
.breadcrumb a{color:var(--gray-600);text-decoration:none;}
.breadcrumb a:hover{color:var(--teal);text-decoration:underline;}
.breadcrumb .sep{margin:0 6px;color:var(--gray-300);}

/* Article layout (static content pages) */
.article{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:var(--space-6);
  align-items:start;
}
.article-body{min-width:0;}
.article-body h2{margin-top:var(--space-6);}
.article-body h3{margin-top:var(--space-5);margin-bottom:var(--space-2);}
.article-body ul,.article-body ol{padding-left:var(--space-5);margin:0 0 var(--space-4);}
.article-body li{margin-bottom:var(--space-2);}
.article-aside{
  border-left:1px solid var(--gray-300);
  padding-left:var(--space-5);
  font-size:.875rem;color:var(--gray-600);
}
.article-aside figure{margin:0 0 var(--space-5);}
.article-aside img{
  width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--gray-300);
  display:block;margin-bottom:var(--space-2);float:none;
}
.article-aside figcaption{font-size:.8125rem;line-height:1.5;}
/* Home-page genome list: keep each "UAMH ####" link from breaking mid-number */
.side-genome a{white-space:nowrap;}
/* single-column when the page has no aside */
.article.no-aside{grid-template-columns:minmax(0,1fr);}
@media (max-width:820px){
  .article{grid-template-columns:minmax(0,1fr);}
  .article-aside{
    border-left:none;border-top:1px solid var(--gray-300);
    padding-left:0;padding-top:var(--space-5);
  }
  /* Image-figure asides (e.g. About Us) go 2-up on mobile; text-list asides
     (e.g. the home page sidebar) stay a single stacked column. */
  .article-aside:has(figure){
    display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4);
  }
  .article-aside figure{margin-bottom:0;}
}

/* Content images inside body text */
.article-body img{max-width:100%;height:auto;border-radius:var(--radius);}
.fig-right{
  float:right;max-width:210px;height:auto;
  margin:4px 0 var(--space-3) var(--space-4);
  border-radius:var(--radius);border:1px solid var(--gray-300);
}
.fig-left{
  float:left;max-width:210px;height:auto;
  margin:4px var(--space-4) var(--space-3) 0;
  border-radius:var(--radius);border:1px solid var(--gray-300);
}
@media (max-width:560px){
  .fig-right,.fig-left{float:none;display:block;max-width:100%;margin:0 0 var(--space-3);}
}
.article-body figure{margin:var(--space-5) 0;}
.article-body figcaption{font-size:.875rem;color:var(--gray-600);margin-top:var(--space-2);}
.photo-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:flex-end;}
.photo-row img{max-width:200px;height:auto;border-radius:var(--radius);border:1px solid var(--gray-300);}

/* Keep floated content images contained within their section: section
   headings and horizontal rules clear any preceding float so an image can't
   bleed past its topic into the next one. */
.article-body h2,
.article-body h3{clear:both;}
.article-body hr{
  clear:both; height:0; border:0; border-top:1px solid var(--gray-300);
  margin:var(--space-6) 0;
}
/* Rounded corners on floated content images (inline styles don't set this). */
.article-body img[style*="float"]{ border-radius:var(--radius); }

/* Extracted Research subpages (legacy-figs): the original markup mixes floated
   and non-floated inline images with ad-hoc widths/heights. Normalize them so
   non-floated groups form a tidy, uniform, bottom-aligned row, and floated
   images share a consistent max width. */
.legacy-figs img{ vertical-align:bottom; }
.legacy-figs img:not([style*="float"]){
  height:150px !important; width:auto !important; max-width:100%;
  margin:0 10px 14px 0; border-radius:var(--radius);
}
.legacy-figs img[style*="float"]{ max-width:220px; height:auto; }
/* Location maps: larger than the 150px legacy-fig default */
.legacy-figs img.map-fig{ height:250px !important; }

/* Definition rows for simple contact / info blocks */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4);}

/* Genome-sequenced strains table */
.genome-table{
  width:100%; max-width:640px; border-collapse:collapse; font-size:.9375rem;
  border:1px solid var(--gray-300); border-radius:var(--radius-lg); overflow:hidden;
  margin:8px 0 24px;
}
.genome-table th{
  text-align:left; background:var(--uoft-blue); color:#fff; font-weight:600; padding:10px 14px;
}
.genome-table td{ padding:9px 14px; border-top:1px solid var(--gray-300); }
.genome-table tbody tr:nth-child(even){ background:var(--surface); }
.genome-table a{ color:var(--teal); white-space:nowrap; }

/* Service card grid (Other Services) */
.service-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--space-4);margin-top:var(--space-5);
}
.service-card{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--gray-300);border-radius:var(--radius-lg);overflow:hidden;
}
.service-card > img{width:100%;height:150px;object-fit:cover;display:block;border:0;border-radius:0;}
.service-card .service-body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);flex:1;}
.service-card h3{margin:0;font-size:1.125rem;}
.service-card p{margin:0;font-size:.9375rem;color:var(--ink);}
.service-card .more{margin-top:auto;font-weight:500;padding-top:var(--space-2);}

/* Contact card */
.contact-card address{font-style:normal;line-height:1.7;}
.contact-card .contact-line{display:flex;gap:var(--space-2);}
.contact-card .contact-line span:first-child{color:var(--uoft-blue);font-weight:600;min-width:52px;}

/* Utilities */
.clear{clear:both;}
.text-muted{color:var(--gray-600);}
.mt-0{margin-top:0;}