/* ==========================================================================
   Litguide Help Centre — Help Scout Docs custom CSS
   Matched to the litguide.ca design system.

   Tokens (same values the marketing site uses)
   ------------------------------------------------------------------
   Ink display    #0E202D      Headings
   Ink            #143A40      Strong body, links on light
   Body           #4A6360      Paragraphs
   Muted          #5F7B75      Labels, meta, placeholders
   Hairline       #EEF2F4      Row rules, dividers
   Border         #D9E5E2      Inputs, card edges
   Dark           #07333A      Primary buttons, nav ink
   Teal           #0F5A63      Hover, focus ring
   Green          #34B994      Accent, active state
   Deep green     #16704F      Icons, green text on light
   Mint tint      #EAF7F2      Soft grounds
   Cool tint      #E8F2FA      Blockquote, code ground
   Page ground    #FBFCFC      Body background

   Radii   8 / 14 / 22 / 999 only
   Type    Noto Sans 700/800 display · Roboto 400/500 body
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · Typography
   -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700;800&family=Roboto:wght@300;400;500;700&display=swap');

body,
input,
button,
select,
textarea {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.navbar .nav li a,
strong,
b {
    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    background-color: #FBFCFC;
    color: #4A6360;
}

strong {
    font-weight: 700;
    color: #143A40;
}

em {
    color: #143A40;
}


/* --------------------------------------------------------------------------
   2 · Layout
   -------------------------------------------------------------------------- */

.container-fluid {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}


/* --------------------------------------------------------------------------
   3 · Navbar
   -------------------------------------------------------------------------- */

.navbar .navbar-inner {
    background: #FFFFFF;
    border-bottom: 1px solid #EEF2F4;
    box-shadow: none;
    z-index: 999;
    position: relative;
}

.navbar .brand {
    background: url(https://litguide.ca/wp-content/uploads/2023/10/Litguide-Logo-Light-.svg) no-repeat;
    background-size: contain;
    background-position: left center;
    /* logo art is 208x60; 153x44 matches the height used across the site */
    width: 153px;
    max-width: 153px;
    height: 44px;
    padding: 0;
    margin: 18px 0;
    box-shadow: none;
}

.navbar .brand span {
    display: none;
}

.navbar .nav li a {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    color: #5F7B75;
    text-transform: none;          /* the site does not shout its nav */
    letter-spacing: 0;
    transition: color .18s ease;
}

.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
    color: #0E202D;
}

.navbar .nav .active .caret {
    display: none;
}

/* Contact button — pill, sentence case, dark ground */
#contact a {
    display: inline-block;
    background-color: #07333A;
    border: 1.5px solid #07333A;
    border-radius: 999px;
    color: #FFFFFF !important;
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    padding: 15px 30px;
    margin-left: 18px;
    transition: background-color .18s ease, border-color .18s ease;
}

#contact a:hover {
    background-color: #0F5A63;
    border-color: #0F5A63;
    color: #FFFFFF !important;
}

/* Active + hover states, matched to the marketing site.
   Inactive #5F7B75; hover wipes a 2px green rule in from the left; the current
   page takes a 7px green dot and darker ink. No pill, no static underline. */

.navbar .nav li a { position: relative; }

.navbar .nav li:not(#contact):not(#contactMobile) a::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 100%;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: #34B994;
    transition: right .28s cubic-bezier(.22,.61,.36,1);
}

.navbar .nav li:not(#contact):not(#contactMobile) a:hover::after { right: 2px; }

.navbar .nav .active a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #0E202D;
}

.navbar .nav .active a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #34B994;
    flex: none;
}

/* the current page does not also need the hover rule */
.navbar .nav .active a::after { display: none; }

#contactMobile a::after,
#contactMobile a::before { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .navbar .nav li a::after { transition: none; }
}

@media (min-width: 769px) {
    .navbar .nav {
        position: absolute;
        right: 0;
        left: auto;
        bottom: 16px;
        margin-right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 910px) {
    .navbar .nav li a { font-size: 15px; padding-left: 10px; padding-right: 10px; }
    #contact a { font-size: 14px; padding: 14px 20px; margin-left: 6px; }
}

@media (max-width: 768px) {
    .nav-collapse .nav { margin: 15px 0 30px; }
    .navbar .brand { width: 118px; max-width: 118px; height: 34px; margin: 14px 0; }
    .navbar .btn-navbar { position: absolute; top: 9px; }
    .btn-navbar .icon-bar + .icon-bar { margin-top: 5px; }
    .navbar .btn-navbar .icon-bar {
        background: #07333A !important;
        box-shadow: none !important;
        width: 25px !important;
        border-radius: 999px !important;
    }
    .navbar .nav li a { padding: 15px 0; }
}


/* --------------------------------------------------------------------------
   4 · Hero + search
   -------------------------------------------------------------------------- */

#docsSearch {
    border-bottom: 1px solid #EEF2F4;
    padding: 120px 24px 128px;
    margin-bottom: 96px;
    background-color: #FFFFFF;
    /* the site's hero wash: brand green and teal at low alpha over white */
    background-image:
        radial-gradient(56% 44% at 8% 0%, rgba(52,185,148,0.16), rgba(255,255,255,0) 70%),
        radial-gradient(48% 40% at 96% 14%, rgba(54,159,183,0.14), rgba(255,255,255,0) 70%),
        radial-gradient(64% 46% at 50% 104%, rgba(76,223,161,0.10), rgba(255,255,255,0) 72%);
    background-repeat: no-repeat;
}

#docsSearch h1 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 56px;
    line-height: 1.06;
    letter-spacing: -2.2px;
    font-weight: 800;
    color: #0E202D;
    max-width: 720px;
    margin: 0 auto;
    float: none;
    text-wrap: balance;
}

#searchBar {
    max-width: 620px;
    padding: 34px 0 0;
}

#searchBar .search-query {
    height: 68px;
    background-color: #FFFFFF;
    border: 1.5px solid #D9E5E2;
    border-radius: 999px;
    padding: 22px 30px;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    line-height: 24px;
    color: #143A40;
    box-shadow: 0 1px 2px rgba(7,51,58,.04), 0 6px 14px rgba(7,51,58,.05);
    transition: border-color .18s ease, box-shadow .18s ease;
}

#searchBar button {
    position: absolute;
    top: 43px;
    right: 10px;
    height: 48px;
    padding: 15px 30px;
    background: #07333A;
    border: 0;
    border-radius: 999px;
    color: #FFFFFF;
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    transition: background-color .18s ease;
}

#searchBar button:hover {
    background-color: #0F5A63;
}

::placeholder { color: #5F7B75 !important; }
:-ms-input-placeholder { color: #5F7B75 !important; }

/* Focus — matches the site's AODA focus treatment */
input:focus,
input[type=text]:focus,
textarea:focus,
select:focus {
    border-color: #34B994 !important;
    outline: 2px solid rgba(52,185,148,0.35);
    outline-offset: 1px;
    box-shadow: none;
}

:focus-visible {
    outline: 3px solid #0F5A63;
    outline-offset: 2px;
}

/* Search results dropdown */
#serp-dd,
#serp-dd.sb {
    border: 1.5px solid #D9E5E2;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(7,51,58,.04), 0 6px 14px rgba(7,51,58,.05), 0 22px 44px rgba(7,51,58,.07);
    font-size: 16px;
    line-height: 24px;
    color: #4A6360;
    overflow: hidden;
}

#serp-dd.sb { top: 60px; }
#serp-dd    { top: 80%; }

#serp-dd .result a {
    padding: 12px 18px;
    font-size: 16px;
    color: #4A6360;
    transition: background-color .16s ease, color .16s ease;
}

#serp-dd .result > li.active,
#serp-dd .result a:hover {
    background: #EAF7F2;
    color: #0E202D;
}

@media only screen and (max-width: 600px) {
    #docsSearch { padding: 72px 24px 76px; margin-bottom: 64px; }
    #docsSearch h1 { font-size: 38px; letter-spacing: -1.2px; line-height: 1.1; }
    #searchBar { width: 100%; }
    #searchBar button span { display: none; }
    #searchBar button { padding: 15px 20px; }
    #searchBar .search-query { padding: 22px 24px; background-image: none; }
    #searchBar button .icon-search { display: block; color: #FFFFFF; }
    .icon-search:before { position: relative; bottom: 2px; }
}


/* --------------------------------------------------------------------------
   5 · Collections and category cards
   -------------------------------------------------------------------------- */

.collection-category h2,
.collection-category h2 a {
    font-family: 'Noto Sans', sans-serif;
    font-size: 34px;
    line-height: 1.14;
    letter-spacing: -1.1px;
    color: #0E202D;
    font-weight: 800;
    text-align: center;
}

h2 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 34px;
    line-height: 1.14;
    letter-spacing: -1.1px;
    color: #0E202D;
    font-weight: 800;
}

.collection-category h2 a:hover { border-bottom: 0; }
a:focus { text-decoration: none; }

/* Section rhythm.
   Every collection gets the same break, rather than one hardcoded ID. Without
   this the card grid of one section butts straight into the heading of the
   next, which is what makes the rectangles read as stacked on top of each
   other. Spacing lives on the gap between siblings only, so the first section
   keeps the hero's own 96px and nothing doubles up. */
.collection-category { margin: 0; }

.collection-category + .collection-category {
    margin-top: 96px;
    padding-top: 88px;
    border-top: 1px solid #EEF2F4;   /* remove this line for no divider */
}

.collection-category:last-of-type { margin-bottom: 96px; }

.category-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 24px;
    margin-top: 34px;
    align-items: stretch;
}

/* Bootstrap 2's clearfix pseudo-elements become phantom grid items and shove
   the real cards out of their cells. Grid does its own clearing. */
.category-list::before,
.category-list::after { content: none; }

/* .category is an <a>; force it to behave as a full grid item.
   Bootstrap 2 leaves box-sizing at content-box, so width:100% plus 34px of
   padding and a 1.5px border makes the card ~71px wider than its track and it
   laps over its neighbour. border-box folds the padding back inside the 100%.
   These stay on a descendant selector, not a child one — Help Scout nests the
   card inside a wrapper in some collections, and a child selector silently
   misses those, which leaves the card with no width and shrinks it to its
   own text. */
.category-list .category,
.category-list .category *,
.category-list .category::before,
.category-list .category::after {
    box-sizing: border-box;
}

.category-list .category {
    display: block;
    float: none;
    vertical-align: top;
    width: 100% !important;   /* beats Help Scout's own fixed card width */
    max-width: 100%;
    height: 100%;
    min-width: 0;
    justify-self: stretch;
    margin: 0;
    text-align: left;
    background-color: #FFFFFF;
    border: 1.5px solid #E4EDEA;
    border-radius: 22px;
    box-shadow: none;
    transition: border-color .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}

/* Some collections wrap the card in a Bootstrap grid div. That wrapper becomes
   the grid item and the card ends up sized to a fraction of it, which is why a
   single-category collection renders as a narrow sliver. display:contents drops
   the wrapper out of layout so the card itself is the grid item. */
.category-list > div:not(.category),
.category-list .row-fluid,
.category-list [class*="span"]:not(.category) {
    display: contents;
}

/* A collection with one category still takes a full track. */
.category-list .category:only-child { grid-column: 1; }

.category-list .category:hover {
    background-color: #FFFFFF;
    border-color: #07333A;
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(7,51,58,0.10);
}

.category-list h3 {
    font-family: 'Noto Sans', sans-serif;
    color: #0E202D;
    font-size: 22px;
    line-height: 1.24;
    letter-spacing: -0.5px;
    font-weight: 800;
    margin-bottom: 10px;
}

.category-list .category p {
    font-size: 16px;
    line-height: 26px;
    color: #4A6360;
}

/* Article count — the site's uppercase micro-label */
.category-list .category .article-count {
    display: inline-block;
    color: #0F5A63;
    font-family: 'Noto Sans', sans-serif;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 24px;
    transition: color .18s ease;
}

.category-list .category:hover .article-count { color: #16704F; }

@media only screen and (max-width: 1100px) {
    .category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media only screen and (max-width: 700px) {
    .category-list { grid-template-columns: minmax(0, 1fr); grid-gap: 16px; }

    .collection-category + .collection-category {
        margin-top: 64px;
        padding-top: 56px;
    }

    .collection-category:last-of-type { margin-bottom: 64px; }
}




/* --------------------------------------------------------------------------
   5b · Category icons — the site's line icons in the brand icon device
   Help Scout controls this markup, so the device is built from pseudo-elements:
   ::before is the accent bar, ::after is the white bordered face carrying the
   glyph as an inline SVG.
   -------------------------------------------------------------------------- */

.category-list .category {
    position: relative;
    padding: 108px 34px 34px;      /* room for the device at the top-left */
    background-image: none;
}

.category-list .category::before,
.category-list .category::after {
    content: "";
    position: absolute;
}

.category-list .category::after {
    width: 46px;
    height: 46px;
    border-radius: 14px;
}

/* accent bar, replacing the offset square: no layered "card behind a card" read */
.category-list .category::before {
    left: 34px;
    top: 88px;
    width: 46px;
    height: 4px;
    border-radius: 8px;
    background: #34B994;
    transition: background-color .18s ease;
}

/* white face + glyph */
.category-list .category::after {
    left: 34px;
    top: 34px;
    border: 1.5px solid #1E3865;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 23px 23px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.4%203.4h11.2v17.2H6.4z%20M9.4%208.4h5.2%20M9.4%2012h5.2%20M9.4%2015.6h3.2%27%2F%3E%3C%2Fsvg%3E");   /* default */
}

#category-46::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%205h16.8v11.4H3.6z%20M8.4%2020.4h7.2%20M12%2016.4v4%27%2F%3E%3C%2Fsvg%3E"); }
#category-46::before { background: #9FC6E8; }
#category-60::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.4%203.4h11.2v17.2H6.4z%20M9.4%208.4h5.2%20M9.4%2012h5.2%20M9.4%2015.6h3.2%27%2F%3E%3C%2Fsvg%3E"); }
#category-60::before { background: #6AC7D6; }
#category-4::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%204.6h16v10.8H4z%20M12%2015.4v4.2%20M8.6%2019.6h6.8%20M7.6%208h6%20M7.6%2011.4h4%27%2F%3E%3C%2Fsvg%3E"); }
#category-4::before { background: #9FC6E8; }
#category-17::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.4%2020.4%208v12.6H3.6V8z%20M9.4%2020.6v-5.4h5.2v5.4%20M10.6%2010.4h2.8%27%2F%3E%3C%2Fsvg%3E"); }
#category-17::before { background: #FDDBBA; }
#category-36::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%2020.6V9.4l6-3.4v14.6%20M9.6%2012.4l7.2-4v12.6%20M3.6%2020.6h16.8%20M6.4%2013.6h1%20M6.4%2016.8h1%20M12.8%2013.2h1%20M12.8%2016.6h1%27%2F%3E%3C%2Fsvg%3E"); }
#category-36::before { background: #4CDFA1; }
#category-31::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.2%2019.4%206v6.2c0%204.2-3%207.2-7.4%208.6C7.6%2019.4%204.6%2016.4%204.6%2012.2V6z%20M9.2%2012.2l2.2%202.2%203.8-4%27%2F%3E%3C%2Fsvg%3E"); }
#category-31::before { background: #6AC7D6; }
#category-32::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.6a8.4%208.4%200%201%200%200%2016.8%208.4%208.4%200%200%200%200-16.8z%20M9.6%209.6a2.4%202.4%200%201%201%203.3%202.2c-.6.3-.9.8-.9%201.4v.4%20M12%2016.6h.01%27%2F%3E%3C%2Fsvg%3E"); }
#category-32::before { background: #9FC6E8; }
#category-48::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.2%2021%208.6l-9%204.4-9-4.4z%20M6.6%2010.8v4.6c0%201.7%202.4%203%205.4%203s5.4-1.3%205.4-3v-4.6%27%2F%3E%3C%2Fsvg%3E"); }
#category-48::before { background: #FDDBBA; }
#category-47::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.4%2011.2a3.1%203.1%200%201%201%200-6.2%203.1%203.1%200%200%201%200%206.2z%20M3.6%2019.6c0-3.2%202.6-5.8%205.8-5.8s5.8%202.6%205.8%205.8%20M16.6%205.4a3.1%203.1%200%200%201%200%206%20M17.4%2014.2c1.9.6%203.2%202.4%203.2%204.4%27%2F%3E%3C%2Fsvg%3E"); }
#category-47::before { background: #4CDFA1; }
#category-33::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020.2h16%20M7.2%2020.2V11%20M12%2020.2V5.4%20M16.8%2020.2v-6%27%2F%3E%3C%2Fsvg%3E"); }
#category-33::before { background: #6AC7D6; }

/* Mobile device positions. The bar sits below the icon face, same order as
   desktop — previously they were both pinned near the top-left and overlapped. */
@media only screen and (max-width: 700px) {
    .category-list .category { padding: 92px 26px 26px; }
    .category-list .category::after  { left: 26px; top: 26px; }
    .category-list .category::before { left: 26px; top: 80px; }
}


/* --------------------------------------------------------------------------
   6 · Sidebar
   -------------------------------------------------------------------------- */

#sidebar form .search-query {
    border: 1.5px solid #D9E5E2;
    background: #FFFFFF;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(7,51,58,.04);
    font-size: 16px;
    line-height: 18px;
    color: #143A40;
    padding: 0 25px;
    height: 54px;
}

#sidebar form .search-query:focus {
    border-color: #34B994;
    border-radius: 999px !important;
    box-shadow: none;
}

#sidebar .nav-list {
    background-color: #FFFFFF;
    border: 1.5px solid #E4EDEA;
    border-radius: 22px;
    box-shadow: none;
    margin-top: 22px;
    margin-bottom: 0;
    padding: 26px 28px 32px;
}

#sidebar h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    line-height: 1.26;
    letter-spacing: -0.4px;
    font-weight: 800;
    color: #0E202D;
    text-transform: none;
}

#sidebar .nav-list a {
    font-size: 16px;
    line-height: 24px;
    color: #4A6360;
    padding: 10px 0;
    transition: color .18s ease;
}

#sidebar .nav-list a:hover { color: #0E202D; }

#sidebar .nav-list .active a {
    font-family: 'Noto Sans', sans-serif;
    color: #0E202D;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

[class^=icon-] { color: #5F7B75; font-size: 18px; line-height: 22px; }
.icon-arrow:before { color: #16704F; }
#sidebar .nav-list .active a .icon-arrow,
#sidebar .nav-list .active a:hover .icon-arrow,
#sidebar .nav-list .active a:focus .icon-arrow { color: #16704F !important; }

@media (max-width: 768px) {
    #main-content { margin: 40px 0 2em; }
    #searchBar { max-width: 100%; }
    #sidebar form { position: relative; margin: 40px 0; }
    #categoryHead .sort { top: -52px; }
}


/* --------------------------------------------------------------------------
   7 · Content wrapper
   -------------------------------------------------------------------------- */

#main-content { background: none; }

.contentWrapper {
    background: #FFFFFF;
    border: 1.5px solid #E4EDEA;
    border-radius: 22px;
    box-shadow: none;
    padding: 50px 60px 66px;
}

.contentWrapper h1,
#categoryHead h1 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 42px;
    line-height: 1.08;
    letter-spacing: -1.5px;
    font-weight: 800;
    color: #0E202D;
}

.articleList li {
    font-size: 17px;
    line-height: 28px;
    color: #4A6360;
}

.contentWrapper a {
    color: #0F5A63;
    transition: color .18s ease;
}

.contentWrapper a:hover {
    color: #07333A;
    text-decoration: none;
}

.contentWrapper p.descrip {
    font-size: 17px;
    margin-top: 24px;
    color: #4A6360;
}

.icon-article-doc:before { color: #16704F; }

.articleList a span { transition: color .18s ease; }
.articleList a span:hover { color: #07333A; text-decoration: none; }

select {
    border: 1.5px solid #D9E5E2;
    border-radius: 8px;
    box-shadow: none;
    color: #4A6360;
}

#categoryHead .sort select {
    width: 160px;
    height: 36px;
    margin: 0;
    line-height: 24px;
    font-size: 13px;
}

@media (max-width: 768px) {
    #categoryHead .sort { display: none; }
    .contentWrapper { padding: 40px 26px 56px; }
}


/* --------------------------------------------------------------------------
   8 · Article
   -------------------------------------------------------------------------- */

#fullArticle { max-width: 100%; margin: auto; position: relative; }

#fullArticle h1,
#fullArticle h2,
#fullArticle h3,
#fullArticle h4,
#fullArticle h5 {
    font-family: 'Noto Sans', sans-serif;
    color: #0E202D;
}

#fullArticle .title {
    font-size: 42px;
    line-height: 1.08;
    letter-spacing: -1.5px;
    font-weight: 800;
}

#fullArticle h2 {
    font-size: 28px;
    line-height: 1.24;
    letter-spacing: -0.8px;
    font-weight: 800;
    margin-top: 40px;
}

#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
    font-size: 17px;
    line-height: 28px;
    color: #4A6360;
}

#fullArticle strong { color: #143A40; font-weight: 700; }

#fullArticle blockquote {
    font-style: normal;
    background: #EAF7F2;
    border-left: 4px solid #34B994;
    border-radius: 14px;
    padding: 30px 34px;
}

pre,
#fullArticle pre,
#fullArticle code {
    background-color: #E8F2FA;
    color: #143A40;
    border: 1px solid #D9E5E2;
    border-radius: 14px;
    font-size: 15px;
    line-height: 26px;
}

#fullArticle img {
    border: 1px solid #EEF2F4;
    border-radius: 22px;
    padding: 0;
}

/* Edit button (staff only) */
#fullArticle .admin-edit {
    display: inline-block;
    margin-bottom: 22px;
    background-image: none;
    background-color: #07333A;
    border: none;
    border-radius: 999px;
    color: #FFFFFF;
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    line-height: 18px;
    font-weight: 700;
    padding: 15px 30px;
    text-shadow: none;
    transition: background-color .18s ease;
}

#fullArticle .admin-edit:hover { background-color: #0F5A63; }

.articleFoot p,
.articleFoot time {
    font-family: 'Roboto', sans-serif;
    color: #5F7B75;
    font-size: 15px;
}

#sbContact {
    color: #0F5A63;
    border: none;
    transition: color .18s ease;
}

#sbContact:hover { color: #07333A; }

#fullArticle .printArticle { position: absolute; right: -2%; top: -1%; }
.icon-print { transition: color .18s ease; }
#fullArticle .printArticle:hover .icon-print { color: #16704F; }

@media (min-width: 200px) and (max-width: 1220px) { #fullArticle .printArticle { right: -7%; } }
@media (min-width: 200px) and (max-width: 1150px) { #fullArticle .printArticle { right: 20px !important; } }

@media (max-width: 768px) {
    #fullArticle .printArticle { right: -14px; top: -18px; }
    #fullArticle .title { font-size: 32px; letter-spacing: -1px; line-height: 1.12; }
    #fullArticle h2 { font-size: 24px; line-height: 1.26; }
    .articleFoot time.lu { float: left; }
    .contentWrapper.withRelated { min-height: 205px; padding-bottom: 80px; }
}


/* --------------------------------------------------------------------------
   8b · Article body — reading layout
   Help Scout ships almost no article styling beyond colour. This sets a real
   vertical rhythm, a readable measure, and treatments for the elements that
   actually turn up in support docs: steps, tables, callouts, screenshots.
   -------------------------------------------------------------------------- */

/* Measure. Long support paragraphs are unreadable at full card width. */
#fullArticle > p,
#fullArticle > ul,
#fullArticle > ol,
#fullArticle > blockquote {
    max-width: 68ch;
}

#fullArticle > p { margin: 0 0 20px; }

/* The opening paragraph carries a little more weight. */
#fullArticle .title + p,
#fullArticle > p:first-of-type {
    font-size: 19px;
    line-height: 31px;
    color: #4A6360;
    margin-bottom: 28px;
}

/* Heading rhythm: generous above, tight below, so headings bind to their text. */
#fullArticle h2 {
    margin: 52px 0 16px;
    padding-top: 26px;
    border-top: 1px solid #EEF2F4;
}

#fullArticle h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

#fullArticle h3 {
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -0.4px;
    font-weight: 800;
    margin: 36px 0 12px;
}

#fullArticle h4 {
    font-size: 17px;
    line-height: 1.4;
    font-weight: 700;
    color: #143A40;
    margin: 28px 0 10px;
}

/* Lists — real indentation and breathing room between steps. */
#fullArticle ul,
#fullArticle ol {
    margin: 0 0 22px;
    padding-left: 24px;
}

#fullArticle li { margin-bottom: 10px; padding-left: 4px; }
#fullArticle li:last-child { margin-bottom: 0; }
#fullArticle li > ul,
#fullArticle li > ol { margin-top: 10px; margin-bottom: 4px; }

#fullArticle ol { list-style: decimal; }
#fullArticle ul { list-style: none; padding-left: 26px; }

/* Custom bullet in brand green rather than a browser dot. */
#fullArticle ul > li { position: relative; }
#fullArticle ul > li::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #34B994;
}

#fullArticle ol > li::marker {
    color: #16704F;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
}

/* Callout. Support docs lean on these for warnings and asides. */
#fullArticle blockquote {
    margin: 28px 0;
    font-size: 17px;
    line-height: 28px;
    color: #143A40;
}

#fullArticle blockquote p:last-child { margin-bottom: 0; }

/* Inline code must not inherit the block treatment. */
#fullArticle code {
    display: inline;
    padding: 2px 7px;
    border-radius: 8px;
    font-size: 15px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
}

#fullArticle pre {
    display: block;
    padding: 22px 24px;
    margin: 0 0 24px;
    overflow-x: auto;
    white-space: pre;
    border-radius: 14px;
}

#fullArticle pre code {
    padding: 0;
    background: none;
    border: 0;
    white-space: pre;
    font-size: 15px;
}

/* Screenshots. A hairline keeps light UI shots from bleeding into the page. */
#fullArticle img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 28px 0;
    border: 1px solid #EEF2F4;
    border-radius: 14px;
}

#fullArticle figure { margin: 28px 0; }
#fullArticle figure img { margin: 0; }
#fullArticle figcaption {
    margin-top: 12px;
    font-size: 15px;
    line-height: 24px;
    color: #5F7B75;
}

/* Tables — plans, limits, field references. */
#fullArticle table {
    width: 100%;
    margin: 0 0 28px;
    border-collapse: collapse;
    border: 1px solid #EEF2F4;
    border-radius: 14px;
    overflow: hidden;
    font-size: 16px;
}

#fullArticle table th {
    background: #F7FAF9;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #5F7B75;
    text-align: left;
    padding: 14px 18px;
    border-bottom: 1px solid #EEF2F4;
}

#fullArticle table td {
    padding: 15px 18px;
    border-bottom: 1px solid #EEF2F4;
    color: #4A6360;
    vertical-align: top;
}

#fullArticle table tr:last-child td { border-bottom: 0; }

/* Links in body copy stay legible without shouting. */
#fullArticle a:not(.admin-edit):not(.printArticle) {
    color: #0F5A63;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(15,90,99,.35);
    transition: color .18s ease, text-decoration-color .18s ease;
}

#fullArticle a:not(.admin-edit):not(.printArticle):hover {
    color: #07333A;
    text-decoration-color: #07333A;
}

#fullArticle hr {
    border: 0;
    border-top: 1px solid #EEF2F4;
    margin: 40px 0;
}

/* Article footer */
.articleFoot {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid #EEF2F4;
}

/* Print — staff do print these for PD sessions. */
@media print {
    .navbar, #sidebar, .related, footer, #fullArticle .printArticle,
    #fullArticle .admin-edit, #docsSearch { display: none !important; }
    .contentWrapper { border: 0; padding: 0; }
    body { background: #FFFFFF; }
    #fullArticle a { text-decoration: none; color: #143A40; }
}

@media (max-width: 768px) {
    #fullArticle > p,
    #fullArticle > ul,
    #fullArticle > ol,
    #fullArticle > blockquote { max-width: 100%; }
    #fullArticle h2 { margin-top: 40px; }
    #fullArticle table { font-size: 15px; display: block; overflow-x: auto; }
}


/* --------------------------------------------------------------------------
   9 · Related articles
   -------------------------------------------------------------------------- */

.related {
    background: #EAF7F2;
    border: 1px solid #D7EDE4;
    border-radius: 22px;
    box-shadow: none;
    padding: 48px 40px;
    margin-top: 40px;
}

.related h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    line-height: 1.26;
    letter-spacing: -0.4px;
    font-weight: 800;
    color: #0E202D;
    text-transform: none;
}

.related ul > li,
.related ul > li a {
    font-size: 17px;
    line-height: 28px;
    color: #0F5A63;
    transition: color .18s ease;
}

.related a:hover { color: #07333A; }
.related ul > li a:hover span { text-decoration: none; }

@media (max-width: 768px) {
    .related { border-radius: 22px !important; padding: 40px 26px !important; }
    .related h3 { padding-left: 0 !important; }
    .related ul { margin-left: 22px !important; }
}


/* --------------------------------------------------------------------------
   10 · Contact modal
   -------------------------------------------------------------------------- */

#contactModal,
.abuse {
    border: 1.5px solid #D9E5E2;
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(7,51,58,.04), 0 6px 14px rgba(7,51,58,.05), 0 22px 44px rgba(7,51,58,.10);
    top: 6%;
}

.modal { width: 650px; }

.modal-body { padding: 0 50px 56px; min-height: 600px; }

#contactModal h2,
.abuse h2 {
    font-family: 'Noto Sans', sans-serif;
    padding: 46px 0 14px 50px;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    border-bottom: none;
    font-size: 32px;
    line-height: 1.14;
    letter-spacing: -1px;
    font-weight: 800;
    color: #0E202D;
}

#contactModal .control-label { width: 100%; float: left; text-align: left; }
#contactModal .controls { margin-left: 0; }
#contactModal .form-actions { padding-left: 0; }
#contactModal #md-message { width: 100%; padding-top: 10px; height: 70px; }
.form-actions:before,
.form-actions:after { display: none; }

.form-horizontal .control-label,
label {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 700;
    color: #5F7B75;
}

/* All form fields share one spec */
input[type=text],
.form-horizontal textarea,
.form-search input, .form-inline input, .form-horizontal input,
.form-search textarea, .form-inline textarea,
.form-search select, .form-inline select, .form-horizontal select,
.form-search .uneditable-input, .form-inline .uneditable-input, .form-horizontal .uneditable-input,
#contactForm #name, #contactForm #email, #contactForm #subject, #contactForm #message {
    background-color: #F7FAF9;
    border: 1.5px solid #E4EDEA;
    border-radius: 14px;
    box-shadow: none;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #143A40;
    padding: 12px 16px;
    height: 48px;
    width: 95%;
    transition: border-color .16s ease, background-color .16s ease;
}

.form-horizontal textarea,
#contactForm #message { height: auto; min-height: 120px; }

input[type=text]:focus,
textarea:focus,
#contactForm #message:focus {
    background-color: #FFFFFF;
    border-color: #34B994;
}

#contactModal input[type=file],
#contactForm input[type=file] {
    height: auto;
    padding: 14px 16px;
    border: 1.5px solid #E4EDEA;
    border-radius: 14px;
    background-color: #F7FAF9;
    width: 95%;
}

#contactModal input[type=submit].btn,
button.btn,
input[type=submit].btn {
    background-color: #07333A;
    background-image: none;
    border: none;
    border-radius: 999px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 17px;
    line-height: 18px;
    font-weight: 700;
    color: #FFFFFF;
    width: 100%;
    height: 52px;
    text-shadow: none;
    margin-top: 16px;
    transition: background-color .18s ease;
}

#contactModal input[type=submit].btn:hover,
button.btn:hover,
input[type=submit].btn:hover { background-color: #0F5A63; }

textarea:focus, input:focus, input[type=text]:focus, input[type=password]:focus,
input[type=email]:focus, input[type=url]:focus, input[type=search]:focus,
input[type=tel]:focus, .uneditable-input:focus { box-shadow: none; }

/* Close button */
.modal #closeBtn { top: 26px; right: 26px; }
.icon-close:before,
.featherlight-close-icon:before { display: none; }

#contactModal .icon-close {
    background-image: url(https://d2x2losda9vsjs.cloudfront.net/docs/assets/2019/icon--cross.svg);
    width: 22px;
    height: 22px;
    background-size: cover;
    display: inline-block;
    opacity: .65;
    transition: opacity .18s ease;
    position: relative;
    right: 50%;
}

#contactModal .icon-close:hover { opacity: 1; }

/* Validation */
#contactModal .parsley-errors-list {
    font-size: 15px;
    margin-top: 12px;
    color: #C0392B;
}

#contactModal .parsley-error:not([type=file]),
#contactForm .parsley-error:not([type=file]),
.abuse .parsley-error:not([type=file]) {
    border: 1.5px solid #C0392B;
}

@media (max-width: 768px) {
    .modal-body { min-height: 700px; padding: 0 24px 48px; }
    #contactModal h2, .abuse h2 { padding: 36px 0 12px 24px; font-size: 26px; }
}


/* --------------------------------------------------------------------------
   11 · Footer
   -------------------------------------------------------------------------- */

footer {
    padding: 34px 0;
    border-top: 1px solid #EEF2F4;
    margin-top: 88px;
}

footer span { display: none; }

footer p {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    color: #5F7B75;
    text-align: center;
}

footer p a { color: #5F7B75; transition: color .18s ease; }
footer p a:hover { color: #07333A; }


/* --------------------------------------------------------------------------
   12 · Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .category-list .category:hover { transform: none; }
}


/* --------------------------------------------------------------------------
   13 · Site parity — chrome and behaviour carried over from litguide.ca
   -------------------------------------------------------------------------- */

/* Sticky nav, as on the site */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Anchored headings clear the sticky nav */
html { scroll-behavior: smooth; }
#fullArticle h2,
#fullArticle h3,
[id] { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

::selection { background: #D7F0E6; color: #0E202D; }

/* The site's 3D press: flat at rest, pops on hover, presses flat again on click */
#contact a,
#searchBar button,
#fullArticle .admin-edit,
#contactModal input[type=submit].btn,
button.btn,
input[type=submit].btn {
    box-shadow: 0 0 0 #34B994;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1),
                box-shadow .18s cubic-bezier(.34,1.56,.64,1),
                background-color .18s ease;
    will-change: transform;
}

#contact a:hover,
#searchBar button:hover,
#fullArticle .admin-edit:hover,
#contactModal input[type=submit].btn:hover,
button.btn:hover,
input[type=submit].btn:hover {
    transform: translate(-3px, -3px);
    box-shadow: 5px 5px 0 #34B994;
}

#contact a:active,
#searchBar button:active,
#fullArticle .admin-edit:active,
#contactModal input[type=submit].btn:active,
button.btn:active,
input[type=submit].btn:active {
    transform: translate(0, 0);
    box-shadow: 0 0 0 #34B994;
}

@media (prefers-reduced-motion: reduce) {
    #contact a, #searchBar button, button.btn, input[type=submit].btn {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* Article list inside a category — currently just bullets */
.articleList { list-style: none; margin: 24px 0 0; padding: 0; }

.articleList li {
    margin: 0;
    border-bottom: 1px solid #EEF2F4;
}

.articleList li:last-child { border-bottom: 0; }

.articleList li a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 4px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 26px;
    color: #143A40;
    transition: color .18s ease, padding-left .18s ease;
}

.articleList li a:hover {
    color: #07333A;
    padding-left: 10px;
    text-decoration: none;
}

.icon-article-doc:before { color: #16704F; font-size: 17px; }

/* Category head */
#categoryHead { margin-bottom: 8px; }

#categoryHead .sort select {
    border-radius: 999px;
    height: 40px;
    padding: 0 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

.contentWrapper p.descrip {
    font-size: 18px;
    line-height: 29px;
    color: #4A6360;
    margin: 14px 0 0;
    max-width: 68ch;
}

/* Sidebar current item takes the site's dot */
#sidebar .nav-list .active > a {
    display: flex;
    align-items: center;
    gap: 9px;
}

#sidebar .nav-list .active > a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #34B994;
    flex: none;
}

/* "Still need help" block at the foot of an article */
.contactUs {
    background: #EAF7F2;
    border: 1px solid #D7EDE4;
    border-radius: 22px;
    padding: 30px 34px;
    margin-top: 34px;
    text-align: left;
}

.contactUs .help {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.4px;
    color: #0E202D;
    display: block;
    margin-bottom: 8px;
}

#sbContact, #sbContactMobile {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    color: #0F5A63;
}

.articleFoot time.lu { color: #5F7B75; font-size: 14px; }

.printArticle { color: #5F7B75; }

/* Empty search state */
#noResults {
    background: #FFFFFF;
    border: 1.5px solid #E4EDEA;
    border-radius: 22px;
    padding: 44px;
    text-align: center;
    color: #4A6360;
    font-size: 17px;
}


/* --------------------------------------------------------------------------
   14 · Accessible mode
   Mirrors the site's AODA toggle. The script sets data-a11y="on" on <html>;
   these rules are inert until it does, so the stylesheet is safe on its own.
   -------------------------------------------------------------------------- */

.lg-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
}

.lg-skip:focus {
    position: fixed;
    left: 12px;
    top: 12px;
    background: #07333A;
    color: #FFFFFF;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 22px;
    border-radius: 999px;
    outline: 3px solid #34B994;
}

.lg-a11y-btn {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #143A40;
    background: #FFFFFF;
    border: 1.5px solid #07333A;
    padding: 13px 20px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(7,51,58,.18);
}

.lg-a11y-btn[aria-pressed="true"] { background: #07333A; color: #FFFFFF; }

[data-a11y="on"] a { text-decoration: underline; text-underline-offset: 3px; }
[data-a11y="on"] :focus-visible { outline: 3px solid #0B5B45 !important; outline-offset: 3px; }
[data-a11y="on"] .article-count,
[data-a11y="on"] #fullArticle table th,
[data-a11y="on"] .collection-category .category h3::before {
    text-transform: none;
    letter-spacing: 0;
    color: #3F544F;
}
[data-a11y="on"] p,
[data-a11y="on"] li { line-height: 1.7 !important; }
[data-a11y="on"] #docsSearch { background-image: none; }
[data-a11y="on"] .navbar .nav li a { color: #143A40; }
[data-a11y="on"] *,
[data-a11y="on"] *::before,
[data-a11y="on"] *::after {
    animation: none !important;
    transition: none !important;
}
[data-a11y="on"] #contact a,
[data-a11y="on"] #searchBar button,
[data-a11y="on"] button.btn { transform: none !important; box-shadow: none !important; }

@media (max-width: 600px) {
    .lg-a11y-btn { left: 14px; bottom: 14px; font-size: 13px; padding: 10px 15px; }
}


/* --------------------------------------------------------------------------
   15 · Readability
   Measured against the live articles: no H2s anywhere, heavy nesting (one
   article has 12 lists in 331 words) and bold on roughly 1 word in 10. CSS
   can carry the structure that exists; the rest is an authoring fix.
   -------------------------------------------------------------------------- */

/* Numbered procedures become real steps. Most of these articles are
   "do this, then this", and a plain decimal marker does not carry that. */
#fullArticle ol {
    list-style: none;
    counter-reset: lg-step;
    padding-left: 0;
    margin: 0 0 26px;
}

#fullArticle ol > li {
    counter-increment: lg-step;
    position: relative;
    padding: 0 0 0 46px;
    margin-bottom: 18px;
    min-height: 32px;
}

#fullArticle ol > li::before {
    content: counter(lg-step);
    position: absolute;
    left: 0;
    top: -1px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #EAF7F2;
    border: 1.5px solid #34B994;
    color: #16704F;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 800;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
}

/* a nested list inside a step must not restart the numbering */
#fullArticle ol ol { counter-reset: none; margin-top: 12px; }

/* Nested bullets: each level gets its own marker and a shallower indent,
   so three levels deep is still legible. */
#fullArticle ul { padding-left: 24px; }
#fullArticle ul ul,
#fullArticle ol ul { margin-top: 10px; margin-bottom: 6px; padding-left: 22px; }

#fullArticle ul ul > li::before {
    background: none;
    border: 1.5px solid #34B994;
    width: 6px;
    height: 6px;
    top: 10px;
}

#fullArticle ul ul ul > li::before {
    background: #8FA6A2;
    border: 0;
    width: 5px;
    height: 5px;
}

/* Headings carry more weight now that they are the only wayfinding. */
#fullArticle h3 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: #0E202D;
}

#fullArticle h3::before {
    content: "";
    width: 20px;
    height: 3px;
    border-radius: 8px;
    background: #34B994;
    flex: none;
    position: relative;
    top: -5px;
}

/* Screenshots are the main teaching tool in these articles, so let them
   breathe and sit on a ground rather than floating in the text. */
#fullArticle img {
    width: 100%;
    margin: 30px 0;
    padding: 10px;
    background: #F7FAF9;
    border: 1px solid #E4EDEA;
    border-radius: 18px;
}

/* Auto table of contents, injected by the script when an article has
   three or more headings. Inert until then. */
.lg-toc {
    background: #F7FAF9;
    border: 1px solid #E4EDEA;
    border-radius: 18px;
    padding: 24px 28px;
    margin: 0 0 34px;
    max-width: 68ch;
}

.lg-toc-title {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #5F7B75;
    margin-bottom: 14px;
}

.lg-toc ol { margin: 0; counter-reset: lg-toc; }

.lg-toc ol > li {
    counter-increment: lg-toc;
    padding: 0;
    margin: 0 0 9px;
    min-height: 0;
}

.lg-toc ol > li:last-child { margin-bottom: 0; }
.lg-toc ol > li::before { display: none; }

.lg-toc a {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #0F5A63;
    text-decoration: none;
}

.lg-toc a:hover { color: #07333A; text-decoration: underline; text-underline-offset: 3px; }

[data-a11y="on"] .lg-toc-title { text-transform: none; letter-spacing: 0; color: #3F544F; }

@media (max-width: 768px) {
    #fullArticle ol > li { padding-left: 40px; }
    #fullArticle ol > li::before { width: 26px; height: 26px; line-height: 24px; font-size: 13px; }
    .lg-toc { padding: 20px 22px; }
}


/* --------------------------------------------------------------------------
   16 · Collection landing page
   Help Scout renders a collection as an H1 plus a flat article list, with the
   categories demoted to a sidebar nav. This hides the article list, promotes
   the categories to cards, and keeps the H1 as the page title so the heading
   is always the collection you are actually on.
   -------------------------------------------------------------------------- */

/* Title. Help Scout's H1 here reads "Most Popular Articles", which is a label
   for the article list rather than the collection name, so it goes and the
   heading is injected instead. Scoped to whichever collection the nav marks as
   current, so each page gets its own title rather than one hardcoded string. */
.contentWrapper > h1:has(+ ul.articleList),
.contentWrapper > h1 + ul.articleList { display: none !important; }

.contentWrapper:has(> h1 + ul.articleList)::before {
    content: none;
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 42px;
    line-height: 1.08;
    letter-spacing: -1.5px;
    font-weight: 800;
    color: #0E202D;
    margin: 0 0 14px;
}

body:has(.navbar .nav .active a[href*="38-teacher-guide"]) .contentWrapper:has(> h1 + ul.articleList)::before { content: "Teacher Guide"; }
body:has(.navbar .nav .active a[href*="1-school-admin-guide"]) .contentWrapper:has(> h1 + ul.articleList)::before { content: "School Admin Guide"; }
body:has(.navbar .nav .active a[href*="57-our-platform"]) .contentWrapper:has(> h1 + ul.articleList)::before { content: "Our Platform"; }

/* Safety net: on any collection the nav does not mark as current, fall back to
   Help Scout's own H1 rather than leaving the page with no heading at all. */
body:not(:has(.navbar .nav .active a[href*="/collection/"])) .contentWrapper > h1:has(+ ul.articleList) {
    display: block !important;
    font-family: 'Noto Sans', sans-serif;
    font-size: 42px;
    line-height: 1.08;
    letter-spacing: -1.5px;
    font-weight: 800;
    color: #0E202D;
    margin: 0 0 14px;
}

/* One column: content block on top, categories underneath */
.row-fluid:has(.contentWrapper > h1 + ul.articleList) { display: flex; flex-direction: column; }

.row-fluid:has(.contentWrapper > h1 + ul.articleList) > .span9,
.row-fluid:has(.contentWrapper > h1 + ul.articleList) > .span3 {
    width: 100% !important;
    max-width: none;
    float: none;
    margin: 0;
    padding: 0;
}

.contentWrapper:has(> h1 + ul.articleList) {
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 36px 0 0 !important;
}

/* Everything in this layout shares one left edge. Bootstrap's 2.127% column
   margin and Help Scout's wrapper padding both survive otherwise, which leaves
   the heading block sitting a few pixels right of the search and the cards. */
.row-fluid:has(.contentWrapper > h1 + ul.articleList) > .span9,
.row-fluid:has(.contentWrapper > h1 + ul.articleList) > .span3,
.row-fluid:has(.contentWrapper > h1 + ul.articleList) #main-content,
.row-fluid:has(.contentWrapper > h1 + ul.articleList) #sidebar,
.row-fluid:has(.contentWrapper > h1 + ul.articleList) .contentWrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Lede. Scoped to whichever collection the nav marks as current, so each
   collection gets its own line instead of one hardcoded string. If Help Scout
   ever stops setting .active, this falls back to no lede rather than the
   wrong one. */
.contentWrapper:has(> h1 + ul.articleList)::after {
    content: none;
    display: block;
    font-size: 17px;
    line-height: 1.6;
    color: #5F7B75;
    max-width: 62ch;
}

body:has(.navbar .nav .active a[href*="38-teacher-guide"]) .contentWrapper:has(> h1 + ul.articleList)::after {
    content: "Everything you need to run Litguide with your classes, from first sign-in through to results. Pick a section below.";
}

body:has(.navbar .nav .active a[href*="1-school-admin-guide"]) .contentWrapper:has(> h1 + ul.articleList)::after {
    content: "Set up your school, add teachers and classrooms, and track student progress. Pick a section below to get started.";
}

body:has(.navbar .nav .active a[href*="57-our-platform"]) .contentWrapper:has(> h1 + ul.articleList)::after {
    content: "How Litguide works and what sits behind the platform your school uses.";
}

/* Categories block */
.row-fluid:has(.contentWrapper > h1 + ul.articleList) > .span3 { margin-top: 30px !important; }

.row-fluid:has(.contentWrapper > h1 + ul.articleList) .span3 form {
    position: relative;
    max-width: 480px;
    margin: 0 0 38px !important;
}

.row-fluid:has(.contentWrapper > h1 + ul.articleList) .span3 form .search-query {
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 58px 0 25px !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%235F7B75%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%276.5%27%2F%3E%3Cpath%20d%3D%27M16%2016l4.5%204.5%27%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 22px center !important;
    background-size: 18px 18px !important;
    background-color: #FFFFFF !important;
}

/* Help Scout's own glyph sits outside the pill and is not wrapped in anything
   positionable, so the magnifier is painted on the input instead and the
   original is hidden. The submit, where one exists, becomes an invisible hit
   area over the glyph so clicking it still works. */
.row-fluid:has(.contentWrapper > h1 + ul.articleList) .span3 form [class^="icon-"],
.row-fluid:has(.contentWrapper > h1 + ul.articleList) .span3 form [class*=" icon-"] {
    display: none !important;
}

.row-fluid:has(.contentWrapper > h1 + ul.articleList) .span3 form button,
.row-fluid:has(.contentWrapper > h1 + ul.articleList) .span3 form input[type=submit] {
    position: absolute;
    right: 0;
    top: 0;
    width: 60px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    transform: none !important;
}

.row-fluid:has(.contentWrapper > h1 + ul.articleList) .span3 form button:hover,
.row-fluid:has(.contentWrapper > h1 + ul.articleList) .span3 form input[type=submit]:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.row-fluid:has(.contentWrapper > h1 + ul.articleList) .span3 h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 13px !important;
    line-height: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #5F7B75 !important;
    font-weight: 700 !important;
    margin: 0 0 20px !important;
}

.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    list-style: none;
    counter-reset: lg-cat;
    margin: 0 0 56px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li {
    position: relative;
    counter-increment: lg-cat;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* The card. Same icon device and accent bar as the homepage so the two read as
   one system; the step number and the tighter radius mark it as a level down.
   Numbering earns its place here — a collection is a route through its
   categories, in order, which the homepage grid is not. */
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li a {
    display: block !important;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: #FFFFFF !important;
    border: 1.5px solid #E4EDEA !important;
    border-radius: 18px !important;
    padding: 98px 26px 28px !important;
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    line-height: 1.26;
    letter-spacing: -0.4px;
    font-weight: 800;
    color: #0E202D !important;
    text-decoration: none;
    box-shadow: none;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, border-color .18s ease;
}

.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li a:hover {
    border-color: #07333A !important;
    box-shadow: 0 14px 32px rgba(7,51,58,.10);
    transform: translateY(-3px);
}

/* Help Scout's arrow glyph is replaced by the icon device */
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li a i { display: none; }

/* Icon face */
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 26px;
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1.5px solid #1E3865;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 23px 23px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.4%203.4h11.2v17.2H6.4z%20M9.4%208.4h5.2%20M9.4%2012h5.2%20M9.4%2015.6h3.2%27%2F%3E%3C%2Fsvg%3E");
}

/* Accent bar under the face, colour per category */
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li::after {
    content: "";
    position: absolute;
    left: 26px;
    top: 80px;
    z-index: 2;
    width: 46px;
    height: 4px;
    border-radius: 8px;
    background: #34B994;
}

/* Step number, set in the card's own accent so the corner carries the colour */
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li a::before {
    content: counter(lg-cat);
    position: absolute;
    right: 24px;
    top: 20px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 44px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -2px;
    color: #C9F2E1;
    transition: color .18s ease;
}

/* Per-category glyph, accent and numeral, matched on the category id in the
   href so they follow the category rather than its position in the list. */
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/47-"])::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.4%2011.2a3.1%203.1%200%201%201%200-6.2%203.1%203.1%200%200%201%200%206.2z%20M3.6%2019.6c0-3.2%202.6-5.8%205.8-5.8s5.8%202.6%205.8%205.8%20M16.6%205.4a3.1%203.1%200%200%201%200%206%20M17.4%2014.2c1.9.6%203.2%202.4%203.2%204.4%27%2F%3E%3C%2Fsvg%3E"); }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/47-"])::after { background: #4CDFA1; }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/47-"]) a::before { color: #C9F2E1; }

.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/46-"])::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%205h16.8v11.4H3.6z%20M8.4%2020.4h7.2%20M12%2016.4v4%27%2F%3E%3C%2Fsvg%3E"); }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/46-"])::after { background: #9FC6E8; }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/46-"]) a::before { color: #DCEBF7; }

.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/48-"])::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.2%2021%208.6l-9%204.4-9-4.4z%20M6.6%2010.8v4.6c0%201.7%202.4%203%205.4%203s5.4-1.3%205.4-3v-4.6%27%2F%3E%3C%2Fsvg%3E"); }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/48-"])::after { background: #FDDBBA; }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/48-"]) a::before { color: #FBE9D6; }

.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/17-"])::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.4%2020.4%208v12.6H3.6V8z%20M9.4%2020.6v-5.4h5.2v5.4%20M10.6%2010.4h2.8%27%2F%3E%3C%2Fsvg%3E"); }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/17-"])::after { background: #FDDBBA; }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/17-"]) a::before { color: #FBE9D6; }

.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/4-"])::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%204.6h16v10.8H4z%20M12%2015.4v4.2%20M8.6%2019.6h6.8%20M7.6%208h6%20M7.6%2011.4h4%27%2F%3E%3C%2Fsvg%3E"); }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/4-"])::after { background: #9FC6E8; }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/4-"]) a::before { color: #DCEBF7; }

.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/36-"])::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%2020.6V9.4l6-3.4v14.6%20M9.6%2012.4l7.2-4v12.6%20M3.6%2020.6h16.8%20M6.4%2013.6h1%20M6.4%2016.8h1%20M12.8%2013.2h1%20M12.8%2016.6h1%27%2F%3E%3C%2Fsvg%3E"); }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/36-"])::after { background: #4CDFA1; }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/36-"]) a::before { color: #C9F2E1; }

.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/60-"])::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.4%203.4h11.2v17.2H6.4z%20M9.4%208.4h5.2%20M9.4%2012h5.2%20M9.4%2015.6h3.2%27%2F%3E%3C%2Fsvg%3E"); }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/60-"])::after { background: #6AC7D6; }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/60-"]) a::before { color: #D5EFF4; }

/* Card blurbs, also keyed to the category id */
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li a::after {
    content: "";
    display: block;
    margin-top: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0;
    color: #4A6360;
}

.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/47-"]) a::after { content: "Set up your account, join your classes, and get students started."; }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/46-"]) a::after { content: "A tour of the tabs and the everyday teaching workflow."; }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/48-"]) a::after { content: "See how your students are doing and where to step in."; }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/17-"]) a::after { content: "Sign up, access the portal, create classrooms, add teachers."; }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/4-"]) a::after { content: "Dashboard, schools, students, rubric and submissions."; }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/36-"]) a::after { content: "Reports, results and tracking student progress."; }
.row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li:has(a[href*="/category/60-"]) a::after { content: "What Litguide does and how the platform fits together."; }

@media only screen and (max-width: 700px) {
    .contentWrapper > h1:has(+ ul.articleList) { font-size: 32px; letter-spacing: -1px; }
    .row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li a { padding: 92px 22px 24px !important; }
    .row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li::before { left: 22px; top: 22px; }
    .row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li::after { left: 22px; top: 76px; }
    .row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li a::before { font-size: 36px; right: 20px; top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li a:hover { transform: none; }
}


/* --------------------------------------------------------------------------
   17 · Responsive
   Tiers: 1024-1264 small laptop and landscape tablet · 768-1023 tablet ·
   601-767 large phone · 600 and under phone. Everything here is spacing, type
   scale and touch behaviour; nothing above this point needs to change.
   -------------------------------------------------------------------------- */

/* Gutters. The container has none of its own, so below ~1264px the content
   runs into the edge of the screen. This is the single biggest tablet fix. */
@media (max-width: 1264px) {
    .container-fluid { padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 767px) {
    .container-fluid { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 400px) {
    .container-fluid { padding-left: 16px; padding-right: 16px; }
}

/* Nothing may push the page sideways */
html, body { overflow-x: hidden; }
img, pre, table, iframe, video { max-width: 100%; }


/* ---- 1024-1264 · small laptop, landscape tablet ---------------------------- */
@media (max-width: 1264px) {
    #docsSearch { padding: 104px 24px 108px; margin-bottom: 84px; }
    #docsSearch h1 { font-size: 50px; letter-spacing: -1.9px; }
    .contentWrapper { padding: 44px 46px 56px; }
    .collection-category + .collection-category { margin-top: 84px; padding-top: 76px; }
}

/* Nav sits tight once the row narrows */
@media (min-width: 769px) and (max-width: 1024px) {
    .navbar .nav li:not(#contact):not(#contactMobile) a {
        font-size: 15px;
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* ---- 768-1023 · tablet ---------------------------------------------------- */
@media (max-width: 1023px) {
    /* Hero */
    #docsSearch { padding: 80px 24px 84px; margin-bottom: 68px; }
    #docsSearch h1 { font-size: 42px; letter-spacing: -1.5px; line-height: 1.08; max-width: 560px; }
    #searchBar { max-width: 560px; padding-top: 30px; }
    #searchBar .search-query { height: 62px; padding: 19px 26px; font-size: 16px; }
    #searchBar button { top: 41px; height: 44px; padding: 13px 24px; }

    /* Section rhythm */
    .collection-category + .collection-category { margin-top: 72px; padding-top: 64px; }
    .collection-category:last-of-type { margin-bottom: 72px; }
    .collection-category h2,
    .collection-category h2 a,
    h2 { font-size: 30px; letter-spacing: -0.9px; }

    /* Homepage cards */
    .category-list { grid-gap: 20px; margin-top: 30px; }
    .category-list .category { padding: 96px 28px 28px; }
    .category-list .category::after { left: 28px; top: 28px; }
    .category-list .category::before { left: 28px; top: 82px; }
    .category-list h3 { font-size: 21px; }
    .category-list .category p { font-size: 15px; line-height: 25px; }
    .category-list .category .article-count { margin-top: 20px; }

    /* Content and article */
    .contentWrapper { padding: 36px 32px 44px; border-radius: 18px; }
    .contentWrapper h1,
    #categoryHead h1,
    #fullArticle .title { font-size: 34px; letter-spacing: -1.1px; line-height: 1.1; }
    #fullArticle h2 { font-size: 25px; margin-top: 44px; }
    #fullArticle h3 { font-size: 20px; }
    #fullArticle > p,
    #fullArticle > ul,
    #fullArticle > ol,
    #fullArticle > blockquote { max-width: 100%; }
    #fullArticle blockquote { padding: 24px 26px; }
    #fullArticle img { margin: 24px 0; }
    .related { padding: 36px 30px; }
    footer { margin-top: 68px; }
}

/* Stack the sidebar under the content rather than squeezing both. Bootstrap
   keeps its columns side by side down to 767, which leaves an unusable
   ~180px rail on a portrait tablet. */
@media (max-width: 1023px) {
    .row-fluid > .span9,
    .row-fluid > .span3 {
        width: 100% !important;
        max-width: none;
        float: none;
        margin-left: 0 !important;
    }
    #sidebar { margin-top: 34px; }
    #sidebar form { position: relative; margin: 0 0 22px; }
    #sidebar .nav-list { margin-top: 0; }
    #main-content { margin-bottom: 2em; }
}

/* Collection landing page */
@media (max-width: 1023px) {
    .contentWrapper:has(> h1 + ul.articleList)::before,
    body:not(:has(.navbar .nav .active a[href*="/collection/"])) .contentWrapper > h1:has(+ ul.articleList) {
        font-size: 34px;
        letter-spacing: -1.1px;
    }
    .contentWrapper:has(> h1 + ul.articleList) { padding-top: 28px !important; }
    .contentWrapper:has(> h1 + ul.articleList)::after { font-size: 16px; max-width: 100%; }
    .row-fluid:has(.contentWrapper > h1 + ul.articleList) .span3 form { max-width: 100%; }
    .row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list { gap: 20px; margin-bottom: 44px !important; }
    .row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li a { padding: 92px 24px 26px !important; font-size: 19px; }
    .row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li::before { left: 24px; top: 24px; }
    .row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li::after { left: 24px; top: 78px; }
    .row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li a::before { font-size: 40px; right: 22px; top: 18px; }
    .row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li a::after { font-size: 15px; line-height: 25px; }
}


/* ---- 767 and under · phone ------------------------------------------------ */
@media (max-width: 767px) {
    #docsSearch { padding: 60px 20px 64px; margin-bottom: 52px; }
    #docsSearch h1 { font-size: 34px; letter-spacing: -1px; }
    #searchBar { padding-top: 26px; }
    #searchBar .search-query { height: 58px; padding: 17px 22px; }
    #searchBar button { top: 33px; height: 42px; }

    .collection-category + .collection-category { margin-top: 56px; padding-top: 48px; }
    .collection-category:last-of-type { margin-bottom: 56px; }
    .collection-category h2,
    .collection-category h2 a,
    h2 { font-size: 26px; letter-spacing: -0.7px; }

    .contentWrapper { padding: 28px 22px 36px; }
    .contentWrapper h1,
    #categoryHead h1,
    #fullArticle .title { font-size: 29px; letter-spacing: -0.9px; }
    #fullArticle h2 { font-size: 22px; margin-top: 36px; padding-top: 22px; }
    #fullArticle,
    #fullArticle p,
    #fullArticle li { font-size: 16px; line-height: 27px; }
    #fullArticle .title + p,
    #fullArticle > p:first-of-type { font-size: 17px; line-height: 28px; }
    #fullArticle blockquote { padding: 20px 22px; border-radius: 12px; }
    #fullArticle pre { padding: 18px 18px; font-size: 14px; }
    .related { padding: 30px 22px; }
    footer { margin-top: 52px; padding: 26px 0; }

    /* Collection landing page */
    .contentWrapper:has(> h1 + ul.articleList)::before,
    body:not(:has(.navbar .nav .active a[href*="/collection/"])) .contentWrapper > h1:has(+ ul.articleList) {
        font-size: 29px;
        letter-spacing: -0.9px;
    }
    .row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li a::before { font-size: 34px; right: 18px; top: 16px; }
}


/* ---- Forms and modal ------------------------------------------------------ */
@media (max-width: 1023px) {
    input[type=text],
    .form-horizontal textarea,
    .form-horizontal input,
    .form-horizontal select,
    #contactForm #name, #contactForm #email, #contactForm #subject, #contactForm #message,
    #contactModal input[type=file],
    #contactForm input[type=file] {
        box-sizing: border-box;
        width: 100%;
    }

    /* Bootstrap centres the modal with a fixed -320px margin, which puts it
       off-screen once the viewport is narrower than 650px. */
    .modal {
        width: auto;
        left: 20px;
        right: 20px;
        margin-left: 0 !important;
        top: 4%;
    }
    .modal-body { min-height: 0; padding: 0 26px 40px; }
    #contactModal h2, .abuse h2 { padding: 32px 0 12px 26px; font-size: 27px; }
}

/* 16px minimum on every field, or iOS zooms the page on focus */
@media (max-width: 900px) {
    input, select, textarea { font-size: 16px !important; }
}


/* ---- Touch behaviour ------------------------------------------------------ */
/* A hover lift on a touch screen sticks after the tap. These are pointer
   affordances, so they come off where there is no pointer. */
@media (hover: none) {
    .category-list .category:hover {
        transform: none;
        box-shadow: none;
        border-color: #E4EDEA;
    }
    .row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li a:hover {
        transform: none;
        box-shadow: none;
        border-color: #E4EDEA !important;
    }
    .articleList li a:hover { padding-left: 4px; }
    #contact a:hover,
    #searchBar button:hover,
    #fullArticle .admin-edit:hover,
    button.btn:hover,
    input[type=submit].btn:hover {
        transform: none;
        box-shadow: none;
    }
    .navbar .nav li:not(#contact):not(#contactMobile) a:hover::after { right: 100%; }

    /* Pressed states do the work instead */
    .category-list .category:active,
    .row-fluid:has(.contentWrapper > h1 + ul.articleList) ul.nav-list li a:active { border-color: #07333A !important; }
}

/* Comfortable tap targets. min-height is measured on the border box here, or
   it stacks on top of the padding the element already has and the nav links
   and Contact pill inflate to about 70px. */
@media (max-width: 1023px) {
    .articleList li a { box-sizing: border-box; padding: 19px 4px; min-height: 48px; }
    #sidebar .nav-list a { box-sizing: border-box; padding: 13px 0; min-height: 44px; }
    footer p a { display: inline-block; padding: 4px 0; }
}

@media (max-width: 767px) {
    .navbar .nav li a {
        box-sizing: border-box;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    #contact a { box-sizing: border-box; min-height: 44px; }
}

/* Navbar between the collapse point and full width. The desktop rules pin the
   nav to the bottom of the bar, which only lines up while every item is
   exactly the height those rules assume. Centring the block against the bar,
   and the items against each other, holds whatever the items measure. */
@media (min-width: 769px) and (max-width: 1264px) {
    .navbar .nav {
        position: absolute;
        right: 0;
        left: auto;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        float: none;
        margin: 0;
    }

    .navbar .nav > li {
        float: none;
        display: flex;
        align-items: center;
        line-height: normal;
    }

    .navbar .nav > li > a { margin: 0; }

    #contact a {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        line-height: 18px;
        padding: 0 22px;
        height: 44px;
        margin: 0 0 0 12px;
    }
}


/* ---- Landscape phone ------------------------------------------------------ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .navbar { position: static; }
    #docsSearch { padding: 44px 20px 48px; margin-bottom: 44px; }
    #docsSearch h1 { font-size: 30px; }
    .lg-a11y-btn { bottom: 10px; left: 10px; padding: 8px 13px; font-size: 12px; }
}


/* ---- Sticky nav headroom -------------------------------------------------- */
@media (max-width: 1023px) {
    #fullArticle h2,
    #fullArticle h3,
    [id] { scroll-margin-top: 84px; }
}

@media (max-width: 767px) {
    #fullArticle h2,
    #fullArticle h3,
    [id] { scroll-margin-top: 76px; }
    .lg-toc { padding: 18px 20px; }
}