/*
 * NewlyNamed brand styles for the Help Scout Docs site (help.newlynamed.com).
 *
 * Not loaded by this theme. It is hosted here only so Help Scout can link it
 * from Settings > Docs > Custom Code:
 *   https://newlynamed.com/cdn/shop/t/92/assets/helpscout-docs.css
 * The `t/92` segment is the published theme's id — republishing a duplicated
 * theme changes it, and the link has to be updated to match.
 *
 * Overrides Help Scout's Bootstrap-2 base sheet, so selectors here mirror its
 * markup (#mainNav, #docsSearch, .category-list, #fullArticle, #sidebar).
 */

/* ---------------------------------------------------------------- Fonts -- */

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url(https://newlynamed.com/cdn/shop/t/92/assets/font-AktivGrotesk-Regular.woff2) format('woff2'),
         url(https://newlynamed.com/cdn/shop/t/92/assets/font-AktivGrotesk-Regular.woff) format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url(https://newlynamed.com/cdn/shop/t/92/assets/font-AktivGrotesk-Italic.woff2) format('woff2'),
         url(https://newlynamed.com/cdn/shop/t/92/assets/font-AktivGrotesk-Italic.woff) format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url(https://newlynamed.com/cdn/shop/t/92/assets/font-AktivGrotesk-Bold.woff2) format('woff2'),
         url(https://newlynamed.com/cdn/shop/t/92/assets/font-AktivGrotesk-Bold.woff) format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk Extended Bold';
    src: url(https://newlynamed.com/cdn/shop/t/92/assets/font-AktivGroteskXtd_Bold.woff2) format('woff2'),
         url(https://newlynamed.com/cdn/shop/t/92/assets/font-AktivGroteskXtd_Bold.woff) format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nicholas';
    src: url(https://newlynamed.com/cdn/shop/t/92/assets/font-Nicholas.woff2) format('woff2'),
         url(https://newlynamed.com/cdn/shop/t/92/assets/font-Nicholas.woff) format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nicholas';
    src: url(https://newlynamed.com/cdn/shop/t/92/assets/font-Nicholas-Italic.woff2) format('woff2'),
         url(https://newlynamed.com/cdn/shop/t/92/assets/font-Nicholas-Italic.woff) format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Nicholas';
    src: url(https://newlynamed.com/cdn/shop/t/92/assets/font-Nicholas-SemiBold.woff2) format('woff2'),
         url(https://newlynamed.com/cdn/shop/t/92/assets/font-Nicholas-SemiBold.woff) format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------- Tokens -- */

:root {
    --heading-font: 'Nicholas', Georgia, serif;
    --subheading-font: 'Aktiv Grotesk Extended Bold', 'Aktiv Grotesk', sans-serif;
    --body-font: 'Aktiv Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --text: #2b1306;
    --text-muted: #2b1306b3;
    --page-bg: #fcfbf9;
    --surface: #fcfbf9;
    --nav-bg: #f8f2e6;
    --nav-text: #2a160d;
    --accent: #4e1f25;
    --accent-hover: #2b1306;
    --button-text: #fcfbf9;
    --border: #2b130626;
    --border-strong: #2b130640;
}

/* ----------------------------------------------------------------- Base -- */

body {
    font-family: var(--body-font);
    color: var(--text);
    background-color: var(--page-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    color: var(--text);
    font-weight: 400;
}

a {
    color: var(--accent);
}

a:hover,
a:focus {
    color: var(--accent-hover);
}

/* Brand has no rounded corners. Help Scout's base sheet radiuses nearly
   every surface, so reset broadly rather than chasing each selector. */
input,
textarea,
select,
button,
.btn,
.category-list .category,
.contentWrapper,
#searchBar .search-query,
#searchBar button,
#serp-dd,
.collection,
.articleList li {
    border-radius: 0 !important;
}

/* --------------------------------------------------------------- Header -- */

#mainNav .navbar-inner {
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    padding: 15px 20px;
}

#mainNav .brand {
    max-width: 200px;
    margin: 0;
    padding: 0;
    line-height: 0;
    text-shadow: none;
}

#mainNav .brand img {
    display: block;
    width: 200px;
    height: auto;
}

/* Help Scout floats the brand and absolutely positions the nav list, so the
   two never share a baseline. A flex row centers them against each other.
   Desktop only — below 810px the menu collapses and .nav-collapse's animated
   height would fight a flex item.

   No `gap` here: the hidden .btn-navbar sits between the two items and the gap
   lands outside them, insetting the brand from the content column. The nav
   links' own 15px padding provides the spacing. Auto margins hold the ends
   rather than justify-content, which the same phantom item skews. */
@media (min-width: 810px) {
    /* Bootstrap collapses the nav below 979px; hold it open down to 810px. */
    #mainNav .btn-navbar {
        display: none !important;
    }

    #mainNav .nav-collapse.collapse {
        height: auto !important;
        overflow: visible !important;
    }

    #mainNav .container-fluid {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    #mainNav .brand {
        float: none;
        flex: 0 0 auto;
        margin-right: auto;
    }

    #mainNav .nav-collapse {
        flex: 0 0 auto;
        width: auto;
        margin-left: auto;
    }

    #mainNav ul.nav {
        position: static;
        display: flex;
        align-items: center;
        float: none;
        width: auto;
        margin: 0;
        padding: 0;
    }

    #mainNav ul.nav > li {
        float: none;
        display: block;
    }

    #mainNav .nav > li > a {
        display: block;
    }
}

#mainNav .nav > li > a {
    position: relative;
    font-family: var(--subheading-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: none;
    text-decoration: none;
    color: var(--nav-text);
    padding: 15px;
}

#mainNav .nav > li > a:hover,
#mainNav .nav > li > a:focus {
    color: var(--nav-text);
    background: transparent;
}

#mainNav .nav > li.active > a {
    color: var(--accent);
    background: transparent;
}

/* The storefront's .navlink--toplevel underline: a 1px rule growing from the
   left. Inset by the 15px link padding so it tracks the label, not the hit
   area, and held 2px under the text box the way the theme does. */
#mainNav .nav > li > a::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: 13px;
    width: 0;
    height: 1px;
    background-color: currentColor;
    transition: width 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

@media (hover: hover) {
    #mainNav .nav > li > a:hover::after,
    #mainNav .nav > li > a:focus-visible::after {
        width: calc(100% - 30px);
    }
}

/* Six uppercase labels plus the wordmark need 874px, and at 810px only 755px
   is on offer. The label size holds at 14px — that is the step a reader would
   notice — so the wordmark drops to 150px and the links give up some side
   padding instead. That lands at 740px, leaving roughly 15px spare at the
   tightest point: a seventh nav item would not fit here. */
@media (min-width: 810px) and (max-width: 999px) {
    #mainNav .brand {
        max-width: 150px;
    }

    #mainNav .brand img {
        width: 150px;
    }

    #mainNav .nav > li > a {
        padding: 15px 8px;
    }

    #mainNav .nav > li > a::after {
        left: 8px;
    }
}

@media (min-width: 810px) and (max-width: 999px) and (hover: hover) {
    #mainNav .nav > li > a:hover::after,
    #mainNav .nav > li > a:focus-visible::after {
        width: calc(100% - 16px);
    }
}

/* Bootstrap 2 draws the active-page caret as a light triangle against a white
   bar; on the cream bar it has to be recolored or it disappears. */
#mainNav .nav > li > a .caret {
    display: none;
}

#mainNav .btn-navbar {
    background: transparent;
    border: 0;
    box-shadow: none;
    text-shadow: none;
}

#mainNav .btn-navbar .icon-bar {
    background-color: var(--nav-text);
    box-shadow: none;
}

/* ----------------------------------------------------------------- Hero -- */

#docsSearch {
    background: var(--nav-bg);
    background-image: none;
    border-bottom: 1px solid var(--border);
    padding: 6em 20px;
    margin-bottom: 0;
}

#docsSearch h1 {
    font-family: var(--heading-font);
    font-size: 56px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--text);
    text-align: center;
    margin: 0 0 0.6em;
    padding: 0;
}

#searchBar .search-query {
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 22px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border-strong);
    box-shadow: none;
    height: 48px;
    width: 100%;
    padding: 0 0.9em;
    box-sizing: border-box;
}

#searchBar .search-query:focus {
    border-color: var(--accent);
    box-shadow: none;
    outline: 0;
}

#searchBar .search-query::placeholder {
    color: var(--text-muted);
}

#searchBar button {
    font-family: var(--subheading-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: none;
    color: var(--button-text);
    background: var(--accent);
    border: 1px solid var(--accent);
    box-shadow: none;
    padding: 0 1.6em;
    height: 48px;
    position: absolute;
    top: 0;
    right: 0;
}

#searchBar button:hover,
#searchBar button:focus {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--button-text);
}

/* The hero button carries both a magnifier and a "Search" label; the icon is
   a block element, so it wraps onto its own line. The label alone is clearer,
   and it still fits at phone widths. The sidebar button keeps its icon — that
   one has no visible text. */
#docsSearch #searchBar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

#docsSearch #searchBar button .icon-search {
    display: none;
}

/* Help Scout pads the form 24px top and bottom and pins the button to the form
   box, which leaves the button floating above the input. Flex sizes both to the
   same row instead. */
#docsSearch #searchBar {
    display: flex;
    align-items: stretch;
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    padding: 0;
}

#docsSearch #searchBar .search-query {
    flex: 1 1 auto;
    width: auto;
    border-right: 0;
}

#docsSearch #searchBar button {
    position: static;
    flex: 0 0 auto;
}

/* The results dropdown is pinned below the old padded form height. */
#docsSearch #serp-dd {
    top: 48px;
}

#serp-dd {
    font-family: var(--body-font);
    border: 1px solid var(--border-strong);
    box-shadow: none;
}

/* ------------------------------------------------------------- Home grid -- */

/* Help Scout only gutters the page below its own 768px breakpoint, so between
   there and ~1120px the 1080px column ran edge to edge. Padding the container
   and widening max-width by the same 40px keeps the column exactly 1080px once
   there is room for it, and gives it a gutter before that. */
.container-fluid {
    box-sizing: border-box;
    max-width: 1120px;
    margin: 0 auto;
    padding: 50px 0 0;
    position: relative;
}

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

    /* The nav bar gutters itself through .navbar-inner. */
    #mainNav .container-fluid {
        max-width: 1080px;
        padding-left: 0;
        padding-right: 0;
    }
}

.collection-category h2 {
    font-family: var(--heading-font);
    font-size: 42px;
    font-weight: 400;
    color: var(--text);
    text-align: center;
    margin: 0;
    padding: 0 0 40px;
}

.collection-category h2 a,
.collection-category h2 a:hover {
    color: var(--text);
    text-decoration: none;
}

.category-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.category-list .category {
    background: var(--surface);
    border: 1px solid var(--border);
    box-sizing: border-box;
    text-align: center;
    width: auto;
    margin: 0;
    padding: 2em 1.2em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.category-list .category:hover {
    background: var(--nav-bg);
    border-color: var(--border-strong);
}

.category-list h3 {
    font-family: var(--heading-font);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 0.4em;
}

.category-list p {
    font-family: var(--body-font);
    font-size: 14px;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

p.article-count {
    font-family: var(--subheading-font) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent) !important;
}

.most-pop-articles {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

.most-pop-articles h2 {
    font-family: var(--heading-font);
    font-size: 34px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 1.2em;
}

.most-pop-articles .popArticles a {
    font-family: var(--body-font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--accent);
    text-decoration: none;
}

.twoCol .collection,
.threeCol .collection {
    background: var(--surface);
    border-color: var(--border);
}

/* -------------------------------------------- Category and article pages -- */

#main-content {
    background: none;
}

.contentWrapper {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: none;
}

#categoryHead h1,
#fullArticle h1 {
    font-family: var(--heading-font);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.15;
    color: var(--text);
}

#categoryHead .descrip {
    font-family: var(--body-font);
    color: var(--text-muted);
}

#sortBy {
    font-family: var(--body-font);
    font-size: 13px;
    color: var(--text);
    border: 1px solid var(--border-strong);
    box-shadow: none;
}

.articleList li a {
    font-family: var(--body-font);
    font-size: 16px;
    color: var(--accent);
    text-decoration: none;
}

.articleList li a:hover span {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Page numbers wear the storefront's .flickity-prev-next-button shell: a 40px
   square with a 1px accent border, no radius or shadow, and a fill that slides
   up from the bottom on hover. The fill sits on the li so the anchor can stack
   above it without either one creating a stacking context of its own. */
.pagination {
    text-align: center;
}

.pagination ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
}

.pagination li {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    margin: 0;
    background: var(--page-bg);
    border: 1px solid var(--accent);
}

.pagination li::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--nav-bg);
    transform: translate3d(0, 100%, 0);
    transition: transform 0.5s cubic-bezier(0.33, 0, 0, 1);
}

.pagination li:hover::after,
.pagination li:focus-within::after {
    transform: translate3d(0, 0, 0);
}

/* Help Scout gives pagination anchors `float: left` and 12px of side padding
   on a content-box, which renders each one 62px wide inside its 40px cell and
   clips the digit off-centre. The extra `ul` in the selector outranks that;
   border-box keeps the padding inside the cell either way. */
.pagination ul li a {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    float: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    font-family: var(--subheading-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
    text-decoration: none;
}

.pagination li.active {
    background: var(--accent);
}

.pagination li.active::after {
    display: none;
}

.pagination ul li.active a {
    color: var(--button-text);
}

#fullArticle {
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
}

#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
    color: var(--text);
}

#fullArticle h2 {
    font-size: 30px;
}

#fullArticle h3 {
    font-family: var(--subheading-font);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#fullArticle strong,
#fullArticle b {
    font-weight: 700;
}

#fullArticle a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
}

#fullArticle a:hover {
    color: var(--accent-hover);
}

#fullArticle blockquote {
    border-left: 3px solid var(--accent);
    background: var(--nav-bg);
    color: var(--text);
    padding: 1em 1.4em;
}

#fullArticle code,
#fullArticle pre {
    background: var(--nav-bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 0;
}

.articleFoot time.lu {
    font-family: var(--body-font);
    font-style: normal;
    font-size: 12px;
    color: var(--text-muted);
}

.related {
    border-top: 1px solid var(--border);
}

.related h3 {
    font-family: var(--subheading-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
}

.related ul li a {
    font-family: var(--body-font);
    font-size: 16px;
    color: var(--accent);
    text-decoration: none;
}

.related ul li a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* -------------------------------------------------------------- Sidebar -- */

#sidebar h3 {
    font-family: var(--subheading-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
}

#sidebar .nav-list li a {
    font-family: var(--body-font);
    font-size: 15px;
    color: var(--text-muted);
    text-decoration: none;
}

#sidebar .nav-list li a:hover,
#sidebar .nav-list li.active > a {
    color: var(--accent);
    background: transparent;
    font-weight: 700;
}

/* The sidebar search is a compact variant; its button is icon-only. */
#searchBar.sm .search-query {
    height: 44px;
    font-size: 15px;
}

#searchBar.sm button {
    height: 44px;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    padding: 0 0.9em;
}

#searchBar.sm button:hover {
    background: transparent;
    color: var(--accent);
}

/* --------------------------------------------------------------- Footer -- */

footer,
footer.center {
    font-family: var(--body-font);
    font-size: 13px;
    color: var(--text-muted);
    padding-top: 50px;
    padding-bottom: 30px;
}

footer a {
    color: var(--accent);
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ----------------------------------------------------------- Responsive -- */

@media (max-width: 979px) {
    .category-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 809px) {
    /* The bar sits outside the gutter wrapper, so it carries its own. */
    #mainNav .navbar-inner {
        padding: 10px 20px;
    }

    #mainNav ul.nav {
        margin: 0;
        padding: 10px 0 0;
    }

    /* A wrapping flex row centers the toggle against the logo and drops the
       collapsing menu onto its own full-width line, so Bootstrap's height
       animation still has a block to animate. The bar already supplies the
       gutter, so this container adds none. */
    #mainNav .container-fluid {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding-left: 0;
        padding-right: 0;
    }

    /* Bootstrap's fluid row pulls its columns back out past the gutter on
       small screens, which puts article text against the viewport edge. */
    #main-content,
    #sidebar {
        margin-left: 0;
        margin-right: 0;
    }

    #mainNav .brand {
        float: none;
        flex: 0 0 auto;
        margin-right: auto;
    }

    #mainNav .btn-navbar {
        position: static;
        flex: 0 0 auto;
        margin: 0;
        width: 38px;
        height: 40px;
    }

    #mainNav .nav-collapse {
        flex: 0 0 100%;
        width: 100%;
    }

    #mainNav .nav > li > a {
        padding: 12px 0;
    }

    #mainNav .nav > li > a::after {
        left: 0;
        bottom: 10px;
    }

    #docsSearch {
        padding: 3.5em 20px;
    }

    #docsSearch h1 {
        font-size: 34px;
    }

    #searchBar button {
        padding: 0 1.1em;
    }

    .collection-category h2 {
        font-size: 30px;
    }

    #categoryHead h1,
    #fullArticle h1 {
        font-size: 30px;
    }

    .category-list h3 {
        font-size: 20px;
    }
}

@media (max-width: 809px) and (hover: hover) {
    #mainNav .nav > li > a:hover::after {
        width: 100%;
    }
}

@media (max-width: 580px) {
    .category-list {
        grid-template-columns: 1fr;
    }
}