/*
 Ocasta-branded overrides for Help Scout Docs CSS
 Source reference: https://www.helpscout.com/css/hs-docs-site-2024--v1.03.css
 Paste this file into Help Scout Docs > Settings > Appearance > Custom CSS.

 Notes:
 - Keep specificity low; rely on CSS variables where possible.
 - Self-contained: includes Lexend Deca and defines all variables locally.
*/

/* 1) Typography: Lexend Deca from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400;500;600;700&display=swap');

/* 2) Root token overrides mapped to Ocasta theme variables */
:root {
    /* Typography */
    --font-family--sans: "Lexend Deca", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --font-family--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Ocasta brand palette from themes/ocasta/style.css */
    --ocasta-dark: #4C4C4C;
    --ocasta-red: #FF5555;
    --ocasta-orange: #FFB048;
    --ocasta-green: #5EBC2A;
    --ocasta-blue: #1B70AC;
    --ocasta-purple: #65498A;
    --ocasta-grey-100: #fafafa;
    --ocasta-grey-300: #dcdcdc;

    /* Local fallbacks used by some utilities */
    --theme-border-radius: 30px;
    --theme-box-shadow: 0 0 40px -10px rgba(0,0,0,.1), 0 0 25px -15px rgba(0,0,0,.05);
    --logo-pattern: none;
    --gradient-bg: linear-gradient(187deg, #FF5555 0%, rgba(255, 176, 72, 0.42) 85%);

    /* Map Help Scout semantic tokens to Ocasta palette */
    --color--text-dark: var(--ocasta-dark);
    --color--text-default: var(--ocasta-dark);
    --color--text-light: rgba(76, 76, 76, 0.72);

    --color--basics-white: #ffffff;
    --color--basics-white-rgb: 255, 255, 255;

    --color--charcoal-100: var(--ocasta-grey-100);
    --color--charcoal-300: var(--ocasta-grey-300);
    --color--charcoal-500: #bfbfbf;
    --color--charcoal-600: #8a8a8a;

    /* Actions -> Ocasta red as primary */
    --color--action-default: var(--ocasta-red);
    --color--action-hovered: #e14a4a;

    /* Accent scales mapped to brand colours where appropriate */
    --color--blue-100: rgba(27, 112, 172, 0.08);
    --color--blue-300: rgba(27, 112, 172, 0.3);
    --color--green-100: rgba(94, 188, 42, 0.08);
    --color--green-300: rgba(94, 188, 42, 0.3);
    --color--red-100: rgba(255, 85, 85, 0.08);
    --color--red-300: rgba(255, 85, 85, 0.3);
    --color--yellow-100: rgba(255, 176, 72, 0.12);
    --color--yellow-300: rgba(255, 176, 72, 0.35);
    --color--purple-100: rgba(101, 73, 138, 0.12);
    --color--purple-300: rgba(101, 73, 138, 0.35);

    --color--cobalt-600: var(--ocasta-blue);
    --color--green-600: var(--ocasta-green);
    --color--yellow-600: var(--ocasta-orange);
    --color--red-600: var(--ocasta-red);

    /* Container width follows HS, keep as-is or adjust if needed */
    /* --container-width: 1080px; */
}

/* 3) Page background: bring back subtle HS decorative images on white */
body {
    background:
    #ffffff;
}

/* Optional hero/sections if present in HS selectors */
#docsSearch, .contentWrapper .hero, .contentWrapper .headline {
    background: var(--gradient-bg, linear-gradient(187deg, #FF5555 0%, rgba(255, 176, 72, 0.42) 85%));
    padding: 5em 0;
}

.category-list .category, .contentWrapper, .related {
    border-radius: 30px;
}
.articleRatings {
    border-radius: 300px
}

.related {
    margin-top: 30px;
    border-top: 1px solid #E9E5E5;
}

/* 4) Typography scale alignment */
html, body, .contentWrapper {
    font-family: var(--font-family--sans);
    color: var(--ocasta-dark);
}

#main-content {
    border-radius: 30px;
    background-image: none;
}

#searchBar input, #searchBar button {
    font-family: var(--font-family--sans);
}

#searchBar .search-query, #searchBar button {
    border-radius: 300px;
}

#searchBar button {
    background-color: var(--ocasta-blue);

}


input.search-query {
    padding-left: 24px;
}

/* hide some menu items */
#policies-and-credits, #releases {
    display: none;
}

.contentWrapper h1, .contentWrapper h2, .contentWrapper h3,
.contentWrapper h4, .contentWrapper h5, .contentWrapper h6 {
    font-family: var(--font-family--sans);
    color: var(--ocasta-dark);
}

/* Headings in sentence case are editorial — no transform enforced */
.contentWrapper h1, .contentWrapper h2, .contentWrapper h3 {
    text-transform: none;
}

/* Hierarchical heading sizing and weights for better content structure */
.contentWrapper h1,
#fullArticle h1 {
    font-size: 36px;
    line-height: 44px;
    font-weight: 700;
    margin-top: 0;
}

.contentWrapper h2,
#fullArticle h2 {
    font-size: 28px;
    line-height: 36px;
    font-weight: 600;
}

.contentWrapper h3,
#fullArticle h3 {
    font-size: 20px;
    line-height: 25px;
    font-weight: 400;
}

.contentWrapper h4,
#fullArticle h4 {
    font-size: 18px;
    line-height: 25px;
    font-weight: 400;
}

.contentWrapper h5,
#fullArticle h5 {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
}

.contentWrapper h6,
#fullArticle h6 {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

/* 5) Links and interactive states */
a { color: var(--color--action-default); }
a:hover, a:focus { color: var(--color--action-hovered); }

#fullArticle a {
    color: var(--ocasta-dark);
    border-bottom: 1px solid var(--color--text-light);
}
#fullArticle a:hover {
    color: var(--color--cobalt-600);
    border-bottom-color: var(--color--cobalt-600);
}

#fullArticle img {
    border: none;
}

/* 6) Navigation adjustments */
.navbar .brand {
    /* If we control the logo via background, keep default sizing */
    filter: none;
}

.navbar .nav {
    padding: 20px;
}

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

/* Constrain logo height so it doesn't overlap the nav */
.navbar .brand img { height: 33px; max-height: 33px; width: auto; display: block; }
@media (max-width: 768px) { .navbar .brand img { height: 24px; max-height: 24px; } }

/* Align nav links vertically with the logo and add gentle hover */
@media (min-width: 1140px) {
    .navbar .nav li a { line-height: 33px; padding: 0 12px; }
}

.navbar .nav li a {
    color: var(--color--text-light);
}
.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav li.active a {
    color: var(--color--text-dark);
    background: var(--color--charcoal-100);
    border-radius: 6px;
}

/* 7) Callouts and badges mapped to Ocasta tones */
#fullArticle .callout {
    background: var(--color--charcoal-100);
    border-left: 3px solid var(--color--charcoal-300);
}
#fullArticle .callout-blue {
    background: var(--color--blue-100);
    border-left: 3px solid var(--color--blue-300);
}
#fullArticle .callout-green {
    background: var(--color--green-100);
    border-left: 3px solid var(--color--green-300);
}
#fullArticle .callout-red {
    background: var(--color--red-100);
    border-left: 3px solid var(--color--red-300);
}
#fullArticle .callout-yellow {
    background: var(--color--yellow-100);
    border-left: 3px solid var(--color--yellow-300);
}
#fullArticle .private-note {
    background: var(--color--purple-100);
    border-left: 3px solid var(--color--purple-300);
}

#fullArticle .badge { background: var(--color--charcoal-600); color: #fff; }
#fullArticle .badge.info { background: var(--color--cobalt-600); }
#fullArticle .badge.success { background: var(--color--green-600); }
#fullArticle .badge.warning { background: var(--color--yellow-600); }
#fullArticle .badge.error { background: var(--color--red-600); }

/* 8) Keep HS default button styles; rely on link colours for brand */

/* 9) Footer text tone */
footer p { color: var(--color--text-light); }
footer p a { color: var(--color--text-dark); }

/* 10) Utilities */
/* Shadowed card utility (optional) */
.ocasta-shadow-box { box-shadow: var(--theme-box-shadow); border-radius: var(--theme-border-radius); }