/* LEAF LIMS marketing site: the rules every page shares — base type and
   colours, focus and hover states, the fixed header with its mobile menu,
   the footer, and the blog page layouts. Rules for one page only stay in
   that page's own <style> block. */
body{margin:0;background:#EAF2EC;color:#131C16;font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
h1,h2,h3,span,p,a,button,div{font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0,"dlig" 0}
a{color:#245C42;text-decoration:none}
a:hover{color:#3D8C5E}
html{scroll-behavior:smooth}
/* The fixed header is 76px tall (68px on phones); anchored sections land below it. */
section{scroll-margin-top:76px}
[hidden]{display:none !important}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #245C42;outline-offset:2px}
::placeholder{color:#8A9A8E}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important}}

/* hover and focus states from the design */
.hv1:hover{color:#131C16 !important}
.fc2:focus{border-color:#245C42 !important}
.hv3:hover{background:#1C4C35 !important}
.hv4:hover{background:#245C42 !important;color:#F4F3EF !important}
.hv5:hover{background:#ffffff !important}
.hv6:hover{background:#ffffff !important;color:#245C42 !important}
.hv7:hover{background:#245C42 !important}
.hv8:hover{background:#1C4C35 !important;color:#F4F3EF !important}
.hv9:hover{border-color:rgba(36,92,66,.35) !important;background:rgba(232,237,233,.7) !important}
.hv10:hover{border-color:rgba(36,92,66,.4) !important;color:#245C42 !important}
.hv11:hover{color:#1C4C35 !important}
.hv12:hover{background:#EAF2EC !important;color:#131C16 !important}
.fc13:focus{border-color:#F4F3EF !important}
.hv14:hover{color:#F4F3EF !important}
.hv15:hover{color:#245C42 !important}
.hv16:hover{color:#ffffff !important}
.hv7:hover h3,.hv7:hover p,.hv7:hover div{color:#F4F3EF !important}
.hv7:hover > div:first-child{background:rgba(244,243,239,.15) !important}

/* Header: one 1280px column with 24px sides, the same left edge as every
   section below it. */
.menu-toggle .icon-close{display:none}
header.nav-open .menu-toggle .icon-menu{display:none}
header.nav-open .menu-toggle .icon-close{display:inline}
.menu-toggle svg{width:20px;height:20px}
header > div{max-width:1280px !important;padding:0 24px !important}

/* Big screens: the column widens and the type steps up with it (the home
   page's own rules step up its sections to match). */
@media (min-width:1600px){
  header > div,footer > div{max-width:1440px !important}
  .main-nav a{font-size:14px !important}
  header .header-demo{font-size:15px !important}
}
@media (min-width:1800px){
  header > div,footer > div{max-width:1600px !important}
  header .header-demo{font-size:16px !important}
}
@media (min-width:2400px){
  header > div,footer > div{max-width:1840px !important}
  .main-nav a{font-size:15px !important}
  header .header-demo{font-size:17px !important}
}

/* The full menu row needs about 1240px; narrower, it ran the demo button
   off the right edge (seen at 1024). The menu button takes over. */
@media (max-width:1240px){
  .menu-toggle{display:inline-flex !important}
  .main-nav{display:none !important}
  header.nav-open .main-nav{display:flex !important;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:#EAF2EC;border-bottom:1px solid rgba(19,28,22,.1);padding:8px 16px 16px;box-shadow:0 12px 30px rgba(19,28,22,.12)}
  header.nav-open .main-nav a{padding:12px 8px !important;font-size:16px !important}
}
@media (max-width:600px){
  header > div{padding:0 24px !important;height:68px !important}
  /* The demo button ran off the edge and pushed the menu button to the
     middle; the page's own demo button is a scroll away. */
  header button[data-action="open-demo"],header .header-demo{display:none !important}
  header img{height:40px !important}
  header a span span:first-child{font-size:19px !important}
  header a span span:last-child{display:none !important}
  header button{padding:9px 12px !important;font-size:13px !important}
  section{scroll-margin-top:68px}
}

/* Blog pages (the post pages and the /blog list). The header is fixed, so
   the page starts below it. */
.blog-main{padding-top:76px}
.post-article summary{list-style:none}
.post-article summary::-webkit-details-marker{display:none}
.post-article details[open] > summary > span:last-child{transform:rotate(45deg)}
.post-article summary > span:last-child{transition:transform .15s;flex-shrink:0}
/* Side by side, the contents list follows the reader down the page; once it
   sits above the article it scrolls away like any other block. */
@media (max-width:900px){
  .post-toc{position:static !important;flex:1 1 100% !important}
  .post-body{gap:40px !important}
}
@media (max-width:600px){
  .blog-main{padding-top:68px}
  /* Phones: 16px side gutters, header included, so the logo and the text
     share one left edge. */
  .blog-page header > div{padding:0 16px !important}
  .post-col,.post-body,.blog-list{padding-left:16px !important;padding-right:16px !important}
  .post-hero{padding:48px 0 40px !important}
  .post-hero h1{font-size:32px !important}
  .post-hero p{font-size:17px !important}
  .post-body{padding-top:40px !important;padding-bottom:64px !important}
  .post-article{font-size:16px !important}
  .post-article h2[style*="font-size:30px"]{font-size:24px !important;margin-top:44px !important}
  .post-article h2[style*="font-size:26px"]{font-size:22px !important;margin-top:40px !important}
  .post-article h3{font-size:19px !important}
  .post-article dl > div{grid-template-columns:1fr !important}
  .post-article blockquote{padding:20px !important;font-size:18px !important}
  .post-article th,.post-article td{padding:10px 12px !important}
  .post-cta{padding:24px !important}
  .post-article a[style*="white-space:nowrap"]{white-space:normal !important}
  .blog-list article{padding:24px !important}
  .blog-list h2{font-size:21px !important}
}