/* ==================================================
   Notehouse x Help Scout Docs — Custom Stylesheet (v7)
   ================================================== */

:root {
    --nh-coral: #FC8B61;
    /* accent */
    --nh-navy: #274083;

    /* Page background (outside content) */
    --nh-page-bg: #ffffff;

    --nh-text: #111827;
    --nh-muted: #6B7280;
    --nh-border: rgba(39, 64, 131, 0.16);

    --nh-radius: 12px;
    --nh-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);

    /* Replace Cabin with Open Sans */
    --nh-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --nh-serif: "Lora", Georgia, "Times New Roman", serif;
}

/* ---- Global background everywhere (outside content) ---- */
html,
body {
    font-family: var(--nh-sans);
    color: var(--nh-text);
    background: var(--nh-page-bg) !important;
}

/* Page wrapper border */
.contentWrapper {
    border: 1px solid #f0f4fb !important;
}

/* Neutralize theme wrappers that paint white behind the content */
#main,
#main-content,
#content,
.content,
.wrapper,
.container,
.container-fluid,
.page,
#page {
    background: transparent !important;
}

a {
    color: var(--nh-navy);
    text-decoration-color: rgba(39, 64, 131, 0.35);
    text-underline-offset: 3px;
}

a:hover {
    text-decoration-thickness: 2px;
}

/* Headings */
h1,
h2,
h3 {
    font-family: var(--nh-serif);
    letter-spacing: -0.01em;
    color: var(--nh-text);
}

h1 {
    font-weight: 800;
}

h2,
h3 {
    font-weight: 700;
}

/* Sidebar headings should be sans-serif */
.sidebar h3,
#sidebar h3,
aside h3 {
    font-family: var(--nh-sans) !important;
    letter-spacing: 0 !important;
}

/* Base reading size */
p,
li {
    line-height: 1.7;
    color: rgba(17, 24, 39, 0.86);
}

/* ---- Top header: white + smaller logo ---- */
header,
.siteHeader,
#siteHeader,
.navbar {
    background: #fff !important;
    border-bottom: 1px solid rgba(39, 64, 131, 0.10);
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.04);
}

/* Logo sizing (broad theme fallbacks) */
header .logo img,
header a.logo img,
.siteHeader .logo img,
.siteHeader a.logo img,
#siteHeader .logo img,
#siteHeader a.logo img,
.site-logo img,
.brand img,
.navbar-brand img {
    width: 190px !important;
    max-width: 190px !important;
    height: auto !important;
}

/* Increase top bar link font sizes */
header a,
.siteHeader a,
#siteHeader a,
.navbar a {
    color: rgba(17, 24, 39, 0.78);
    font-weight: 600;
    font-size: 16px !important;
}

/* “Contact” a touch larger */
header a[href*="contact"],
.siteHeader a[href*="contact"],
#siteHeader a[href*="contact"],
.navbar a[href*="contact"] {
    font-size: 18px !important;
    font-weight: 800;
}

header a:hover,
.siteHeader a:hover,
#siteHeader a:hover,
.navbar a:hover {
    color: var(--nh-navy);
}

/* ---- “Support Center” hero/search section: dark blue ---- */
#docsSearch {
    background: var(--nh-navy) !important;
    border-bottom: 0;
    padding: 56px 16px 40px;
    color: #fff;
}

/* Only set text elements to white (avoid breaking button text) */
#docsSearch h1,
#docsSearch h2,
#docsSearch p {
    color: #fff;
}

#docsSearch h1 {
    font-family: var(--nh-serif);
    font-weight: 800;
    font-size: clamp(34px, 3vw, 50px);
    line-height: 1.05;
    margin-bottom: 14px;
}

/* ---- Homepage search bar: input + button side-by-side ---- */
#docsSearch #searchBar {
    margin-top: 18px;
}

/* ============================
   Mobile fix: homepage search
   ============================ */
@media (max-width: 520px) {

    /* Make the search row fit the viewport */
    #docsSearch #searchBar,
    #docsSearch #searchBar form,
    #docsSearch #searchBar .search,
    #docsSearch #searchBar .searchBox,
    #docsSearch #searchBar .input-append,
    #docsSearch #searchBar .input-group {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: stretch !important;
    }

    /* Allow flex children to actually shrink */
    #docsSearch #searchBar .search-query,
    #docsSearch #searchBar input[type="search"],
    #docsSearch #searchBar input[type="text"] {
        min-width: 0 !important;
        /* key */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Reduce button width so the pair fits */
    #docsSearch #searchBar button,
    #docsSearch #searchBar input[type="submit"] {
        min-width: 56px !important;
        /* key */
        padding: 0 14px !important;
        box-sizing: border-box !important;
    }
}

/* Make wrapper behave like a single flex row */
#docsSearch #searchBar,
#docsSearch #searchBar form,
#docsSearch #searchBar .search,
#docsSearch #searchBar .searchBox,
#docsSearch #searchBar .input-append,
#docsSearch #searchBar .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Input */
#docsSearch #searchBar .search-query,
#docsSearch #searchBar input[type="search"],
#docsSearch #searchBar input[type="text"] {
    flex: 1 1 auto !important;
    min-width: 320px;
    height: 52px;
    border-radius: 14px 0 0 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-right: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    padding: 0 16px;
    font-family: var(--nh-sans);
    color: rgba(17, 24, 39, 0.82);
}

/* Remove focus styling on the homepage search input */
#docsSearch #searchBar .search-query:focus,
#docsSearch #searchBar input[type="search"]:focus,
#docsSearch #searchBar input[type="text"]:focus {
    outline: none !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
}

#docsSearch #searchBar .search-query::placeholder,
#docsSearch #searchBar input::placeholder {
    color: rgba(17, 24, 39, 0.45);
}

/* Search button (right next to input) — coral with white text */
#docsSearch #searchBar button,
#docsSearch #searchBar input[type="submit"] {
    flex: 0 0 auto !important;
    height: 52px !important;
    padding: 0 18px !important;
    min-width: 130px;
    border-radius: 0 14px 14px 0 !important;

    background: var(--nh-coral) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    color: #ffffff !important;
    font-weight: 700 !important;

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
    opacity: 1 !important;
    white-space: nowrap !important;

    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    filter: none !important;

    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#docsSearch #searchBar button:hover,
#docsSearch #searchBar input[type="submit"]:hover {
    filter: brightness(0.97) !important;
    transform: none !important;
}

/* ---- Sidebar search (article page): remove background + remove ALL shadows ---- */
.sidebar #searchBar,
#sidebar #searchBar,
aside #searchBar,
.sidebar .search,
#sidebar .search,
aside .search {
    background: transparent !important;
    box-shadow: none !important;
}

.sidebar #searchBar .search-query,
#sidebar #searchBar .search-query,
aside #searchBar .search-query,
.sidebar #searchBar input[type="search"],
#sidebar #searchBar input[type="search"],
aside #searchBar input[type="search"],
.sidebar #searchBar input[type="text"],
#sidebar #searchBar input[type="text"],
aside #searchBar input[type="text"] {
    border-radius: var(--nh-radius) !important;
    border: 1px solid rgba(39, 64, 131, 0.16) !important;
    background: rgba(255, 255, 255, 0.90) !important;
    box-shadow: none !important;
}

/* Magnifier icon button */
.sidebar #searchBar button,
#sidebar #searchBar button,
aside #searchBar button,
.sidebar #searchBar input[type="submit"],
#sidebar #searchBar input[type="submit"],
aside #searchBar input[type="submit"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(17, 24, 39, 0.55) !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

.sidebar #searchBar button:hover,
#sidebar #searchBar button:hover,
aside #searchBar button:hover {
    background: transparent !important;
    color: rgba(17, 24, 39, 0.75) !important;
}

/* ---- Article container: white background for the main content box ---- */
.article,
.articleContent,
.article .articleContent,
.content .article,
#content .article {
    background: #fff !important;
}

.article {
    border: 1px solid rgba(39, 64, 131, 0.10) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 55px rgba(17, 24, 39, 0.08) !important;
}

/* ---- Category / collection cards: neutral hover (no orange) ---- */
.category-list .category,
.twoCol .collection,
.threeCol .collection,
.collection {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(39, 64, 131, 0.12);
    border-radius: 18px;
    box-shadow: var(--nh-shadow);
    transition: box-shadow 140ms ease, border-color 140ms ease;
}

.category-list .category:hover,
.twoCol .collection:hover,
.threeCol .collection:hover,
.collection:hover {
    border-color: rgba(39, 64, 131, 0.14);
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.08);
    transform: none !important;
}

/* Category titles */
.category-list .category h2,
.collection h2,
.collection h3 {
    font-family: var(--nh-serif);
}

/* ---- Article page: increase help text font sizes ---- */
.article,
.content,
#content {
    font-size: 18px;
}

.article p,
.article li,
.content p,
.content li,
#content p,
#content li {
    font-size: 18px;
}

/* Article title */
.article h1 {
    font-size: clamp(34px, 3vw, 46px);
    line-height: 1.1;
}

.article h2 {
    font-size: 28px;
}

.article h3 {
    font-size: 22px;
}

/* ---- Fix “View in Help Scout” button ---- */
.article a.btn[href*="helpscout"],
.article a.btn[href*="secure"],
.article a.btn[href*="helpscout.net"],
.article a.btn[href*="helpscout.com"],
.article a.button[href*="helpscout"],
.article a.button[href*="secure"] {
    background: var(--nh-coral) !important;
    color: #fff !important;
    border: 1px solid rgba(252, 139, 97, 0.35) !important;
    border-radius: var(--nh-radius) !important;
    box-shadow: none !important;
    padding: 10px 16px !important;
    height: auto !important;
    min-width: 0 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

.article a.btn[href*="helpscout"]:hover,
.article a.btn[href*="secure"]:hover,
.article a.button[href*="helpscout"]:hover,
.article a.button[href*="secure"]:hover {
    filter: brightness(0.97);
    transform: none !important;
}

/* ============================
   Mobile: tighten category cards spacing
   ============================ */
@media (max-width: 520px) {

    /* Reduce spacing caused by the wrapper items (often <li> or grid cells) */
    .category-list>li,
    .category-list .category,
    .twoCol .collection,
    .threeCol .collection,
    .collection {
        margin-bottom: 12px !important;
    }

    /* If cards have extra internal padding on mobile */
    .category-list .category,
    .twoCol .collection,
    .threeCol .collection,
    .collection {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    /* Remove extra top/bottom spacing the layout sometimes adds */
    .category-list {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    /* Avoid double-spacing on the last card */
    .category-list>li:last-child,
    .category-list .category:last-child,
    .collection:last-child {
        margin-bottom: 0 !important;
    }
}

/* ============================
   Mobile: homepage search button sizing + icon centering
   ============================ */
@media (max-width: 520px) {

    /* Force the button to be a fixed square */
    #docsSearch #searchBar button,
    #docsSearch #searchBar input[type="submit"] {
        width: 64px !important;
        min-width: 64px !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        line-height: 0 !important;
        font-size: 0 !important;
        /* prevents text metrics from shifting centering */
    }

    /* Center common icon implementations inside the button */
    #docsSearch #searchBar button svg,
    #docsSearch #searchBar button i,
    #docsSearch #searchBar button .icon,
    #docsSearch #searchBar button img,
    #docsSearch #searchBar input[type="submit"] svg,
    #docsSearch #searchBar input[type="submit"] i,
    #docsSearch #searchBar input[type="submit"] .icon,
    #docsSearch #searchBar input[type="submit"] img {
        margin: 0 !important;
        display: block !important;
    }

    /* If the magnifier is injected via a pseudo-element */
    #docsSearch #searchBar button::before,
    #docsSearch #searchBar button::after {
        position: absolute;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Ensure the button can position pseudo-elements */
    #docsSearch #searchBar button {
        position: relative !important;
    }
}

/* =========================================
   Search button: icon vs text by breakpoint
   ========================================= */

/* Always make the icon white */
#docsSearch #searchBar button[type="submit"]>i.icon-search {
    color: #ffffff !important;
}

/* ---------- MOBILE ---------- */
@media (max-width: 520px) {

    /* Icon-only button */
    #docsSearch #searchBar button[type="submit"] {
        width: 64px !important;
        min-width: 64px !important;
        height: 52px !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: relative !important;
    }

    /* Hide text on mobile */
    #docsSearch #searchBar button[type="submit"]>span {
        display: none !important;
    }

    /* Center the icon perfectly */
    #docsSearch #searchBar button[type="submit"]>i.icon-search {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;

        margin: 0 !important;
        line-height: 1 !important;
        display: block !important;
    }
}

/* ---------- DESKTOP ---------- */
@media (min-width: 521px) {

    /* Hide icon on desktop */
    #docsSearch #searchBar button[type="submit"]>i.icon-search {
        display: none !important;
    }

    /* Show text normally */
    #docsSearch #searchBar button[type="submit"]>span {
        display: inline !important;
    }
}

/* ============================
   Mobile: hamburger vertical centering (force)
   ============================ */
@media (max-width: 520px) {

    /* Make header a positioning context */
    header,
    .siteHeader,
    #siteHeader,
    .navbar {
        position: relative !important;
    }

    /* Force the toggle button itself to center vertically */
    .navbar-toggle,
    button.navbar-toggle,
    .menu-toggle,
    button.menu-toggle,
    .navToggle,
    button.navToggle,
    .mobile-nav-toggle,
    button.mobile-nav-toggle,
    a.navToggle,
    a.menu-toggle {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        right: 12px !important;

        /* keep tap area consistent */
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: transparent !important;
    }

    /* In case the icon inside is what’s misaligned */
    .navbar-toggle>*,
    .menu-toggle>*,
    .navToggle>*,
    .mobile-nav-toggle>* {
        margin: 0 !important;
        line-height: 1 !important;
        display: block !important;
    }
}

/* Code blocks */
pre,
code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

pre {
    border-radius: 12px;
    border: 1px solid rgba(39, 64, 131, 0.14);
    background: rgba(255, 255, 255, 0.72);
    padding: 14px 16px;
    overflow: auto;
}

/* Optional: hide “Last updated” timestamp */
.articleFoot time.lu {
    display: none;
}

/* ---- Footer: hidden ---- */
footer,
.siteFooter {
    display: none !important;
}