/*  ==========================================================================
    Cubbit restyling for the Inros theme
    Loaded after screen.min.css: overrides only, the original theme is untouched.
    Values taken from cubbit.io (Titillium Web 600 headings, Source Sans 3 body,
    near-black surfaces, 8px radius, blue gradient CTAs).

    1. Tokens
    2. Base typography
    3. Header & buttons
    4. Cards & home
    5. Article
    6. Code blocks
    7. Newsletter banner
    8. Footer
    ========================================================================== */


/*  1. Tokens
    ========================================================================== */
:root,
[data-theme=dark] {
    --font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
    --font-heading: "Titillium Web", "Source Sans 3", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

    --cb-blue: #0065FF;
    --cb-blue-light: #3384FF;
    --cb-blue-lighter: #7FB2FF;
    --cb-navy: #132441;
    --cb-mid-blue: #143B7A;
    --cb-gradient: linear-gradient(74deg, #0048B5, #48BCFF);

    --cb-bg: #040404;
    --cb-surface: #121314;
    --cb-surface-code: #0B0D10;
    --cb-text: #DEE4EA;
    --cb-text-strong: #F7F8FA;
    --cb-text-muted: #B3B9BF;
    --cb-text-subtle: #9099A1;
    --cb-border: #23292E;
    --cb-border-strong: #596773;

    /* remap the theme variables so every untouched component follows along */
    --c-theme: var(--cb-blue);
    --c-body-bg: var(--cb-bg);
    --c-text-main: var(--cb-text);
    --c-text-light: var(--cb-text-muted);
    --c-border: var(--cb-border);
    --c-gray-light: #1E2226;
    --c-gray-lighter: var(--cb-surface);
}


/*  2. Base typography
    ========================================================================== */
body {
    font-family: var(--font-family);
    color: var(--cb-text);
    background-color: var(--cb-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    color: var(--cb-text-strong);
}

/* text is never #0065FF on black (4.2:1, below AA): links and hovers use the lighter blue (5.7:1) */
a,
a:hover,
.nav-wrap li.has-dropdown:hover > a,
.nav-wrap a.nav-icon:hover,
.nav-wrap button:hover,
.share-links a:hover,
.share-links a:focus,
.kg-bookmark-container:hover .kg-bookmark-title,
.visibility {
    color: var(--cb-blue-light);
}

/* "Most recent posts", "Featured Posts", "You might also like" */
.section-title {
    font-size: 1.5rem;
    font-weight: 600;
}

/* tags as brand labels: uppercase, small, blue */
body .tag-wrap a {
    padding: 0;
    border: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cb-blue-light);
}
body .tag-wrap a::before {
    background: transparent;
}
body .tag-wrap a:hover {
    color: var(--cb-text-strong);
}


/*  3. Header & buttons
    ========================================================================== */
body .site-header,
body .site-header.small {
    background-color: var(--cb-bg);
    border-bottom: 1px solid var(--cb-border);
}

.nav-wrap a:not(.btn) {
    font-size: 1rem;
    font-weight: 400;
    color: var(--cb-text-muted);
}
.nav-wrap a:not(.btn):hover,
.nav-wrap a:not(.btn):focus,
.nav-wrap a.nav-current {
    color: var(--cb-text-strong);
}

.btn {
    height: 48px;
    line-height: 48px;
    padding: 0 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    background: var(--cb-gradient);
}
.btn-sm {
    height: 40px;
    line-height: 40px;
    padding: 0 1rem;
    border-radius: 8px;
}
.btn-lg {
    height: 52px;
    line-height: 52px;
    border-radius: 8px;
    font-size: 1.0625rem;
}
.btn:hover,
.btn:focus {
    opacity: 0.88;
}

body input[type=email],
body input[type=text],
body input[type=url],
body textarea {
    border: 1px solid var(--cb-border-strong);
    border-radius: 8px;
}


/*  4. Cards & home
    ========================================================================== */
.intro-title {
    font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.intro-description {
    font-size: 1.25rem;
    color: var(--cb-text-muted);
}

/* long titles: smaller, semibold, never more than 3 lines in a grid */
.post-card .post-title {
    font-size: 1.375rem;
    line-height: 1.3;
    font-weight: 600;
}
.post-card .post-title a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--cb-text-strong);
}
.post-card .post-title a:hover {
    color: var(--cb-blue-lighter);
    text-decoration: none;
}
.featured-post-layout-one .post-card:not(.post-small) .post-title {
    font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
    line-height: 1.25;
}
.featured-post-layout-one .post-card.post-small .post-title {
    font-size: 1.125rem;
    line-height: 1.35;
}
.post-card .post-excerpt {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cb-text-muted);
}

/* meta: author in body colour, date and reading time as service text */
.post-card .meta-info .author-names a {
    font-weight: 600;
    color: var(--cb-text);
}
.post-card .date-time {
    color: var(--cb-text-subtle);
}


/*  5. Article
    ========================================================================== */
/* title, excerpt and meta share the reading column of the text below */
.single-post .post-header {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.single-post .post-title,
.single-post .page-title {
    font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin-top: 1rem;
    margin-bottom: 1.25rem;
}
.single-post .custom-excerpt {
    max-width: none;
    margin-bottom: 2rem;
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--cb-text-muted);
}
/* cover as wide as the reading column, so the text starts right below it */
.single-post .featured-image-wrap {
    max-width: 720px;
    margin: 2.5rem auto 0;
    border-radius: 12px;
}
.single-post .featured-image-caption {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.single-post .featured-image-caption {
    font-size: 0.875rem;
    color: var(--cb-text-subtle);
}

.post-content {
    max-width: 720px;
    margin-top: 3rem;
    font-size: 1.1875rem;
    line-height: 1.7;
    color: var(--cb-text);
}
.post-content p,
.post-content li {
    line-height: 1.7;
}
body .post-content > * {
    margin-bottom: 1.5rem;
}
body .post-content > h2,
body .post-content > h3,
body .post-content > h4,
body .post-content > h5,
body .post-content > h6 {
    margin-bottom: 0.75rem;
}
.post-content strong,
.post-content b {
    font-weight: 600;
    color: var(--cb-text-strong);
}

.post-content > h2 {
    margin-top: 3.5rem;
    font-size: 1.875rem;
}
.post-content > h3 {
    margin-top: 2.75rem;
    font-size: 1.5rem;
}
.post-content > h4 {
    margin-top: 2.25rem;
    font-size: 1.25rem;
}
.post-content > h5,
.post-content > h6 {
    margin-top: 2rem;
    font-size: 1.0625rem;
}
.post-content h2 + *,
.post-content h3 + *,
.post-content h4 + * {
    margin-top: 0;
}

/* Medium-style links: same colour as the surrounding text, marked only by the underline */
body .post-content a:not(.btn):not(.kg-btn):not(.kg-bookmark-container):not(.kg-file-card-container):not(.toc-link) {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}
body .post-content a:not(.btn):not(.kg-btn):not(.kg-bookmark-container):not(.kg-file-card-container):not(.toc-link):hover {
    color: inherit;
    text-decoration-thickness: 2px;
}

/* File card (downloads): dark surface like the bookmark card, readable text, no link underline */
body .post-content .kg-file-card-container {
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    border-radius: 12px;
    color: var(--cb-text);
    font-family: var(--font-family);
    text-decoration: none;
    transition: border-color 0.2s ease;
}
body .post-content .kg-file-card-container:hover {
    border-color: var(--cb-blue-light);
}
.post-content .kg-file-card-title {
    color: var(--cb-text-strong);
    font-weight: 600;
}
.post-content .kg-file-card-caption,
.post-content .kg-file-card-filesize {
    color: var(--cb-text-muted);
    opacity: 1;
}
.post-content .kg-file-card-filename {
    color: var(--cb-text);
}
.post-content .kg-file-card-icon,
.post-content .kg-file-card-icon svg {
    color: var(--cb-blue-light);
}
.post-content .kg-file-card-icon::before {
    background: var(--cb-blue-light);
    opacity: 0.12;
}

.post-content ul,
.post-content ol {
    padding-left: 1.5rem;
}
.post-content li {
    margin-bottom: 0.5rem;
}
.post-content li::marker {
    color: var(--cb-text-subtle);
}

.post-content blockquote:not(.kg-blockquote-alt) {
    margin-left: 0;
    padding: 0.25rem 0 0.25rem 1.5rem;
    border-left: 3px solid var(--cb-blue);
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--cb-text-strong);
}

.post-content figure {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}
.post-content figcaption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--cb-text-subtle);
    text-align: center;
}

.post-content hr {
    margin: 3rem 0;
    border: 0;
    border-top: 1px solid var(--cb-border);
}

@media (max-width: 767px) {
    .post-content {
        font-size: 1.0625rem;
    }
    .post-content > h2 {
        font-size: 1.5rem;
    }
    .post-content > h3 {
        font-size: 1.25rem;
    }
    .single-post .custom-excerpt {
        font-size: 1.125rem;
    }
}


/*  6. Code blocks
    Ghost outputs <pre><code class="language-xxx"> for the code card and for
    fenced blocks in the Markdown card. cubbit-code.js adds the header.
    ========================================================================== */
.post-content pre {
    margin: 2rem 0;
    padding: 1.25rem;
    overflow: auto;
    background: var(--cb-surface-code);
    border: 1px solid var(--cb-border);
    border-radius: 12px;
    font-size: 0.9375rem;
    line-height: 1.65;
}

.post-content pre code,
.post-content code[class*=language-],
.post-content pre[class*=language-] {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--cb-text);
    background: none;
    text-shadow: none;
}

/* inline `code` */
.post-content :not(pre) > code {
    padding: 0.125em 0.4em;
    font-family: var(--font-mono);
    font-size: 0.875em;
    color: var(--cb-blue-lighter);
    background: rgba(51, 132, 255, 0.1);
    border: 1px solid rgba(51, 132, 255, 0.2);
    border-radius: 4px;
}

.post-content .code-block {
    margin: 2rem 0;
    overflow: hidden;
    background: var(--cb-surface-code);
    border: 1px solid var(--cb-border);
    border-radius: 12px;
}
.post-content .kg-code-card .code-block {
    margin: 0;
}
.post-content .code-block pre {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem 0.5rem 1.25rem;
    background: var(--cb-surface);
    border-bottom: 1px solid var(--cb-border);
}
.code-block-lang {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cb-text-subtle);
}
.code-block-copy {
    padding: 0.25rem 0.75rem;
    font-family: var(--font-family);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cb-text);
    background: transparent;
    border: 1px solid var(--cb-border-strong);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.code-block-copy:hover,
.code-block-copy:focus-visible {
    border-color: var(--cb-blue-light);
    outline: 0;
}
.code-block-copy.is-copied {
    color: #96EA8C;
    border-color: #96EA8C;
}

/* Prism tokens — dark palette built on the Cubbit blues */
.post-content .token.comment,
.post-content .token.prolog,
.post-content .token.doctype,
.post-content .token.cdata {
    color: #8B95A1;
    font-style: italic;
}
.post-content .token.punctuation,
.post-content .token.operator {
    color: #9099A1;
}
.post-content .token.keyword,
.post-content .token.atrule,
.post-content .token.important,
.post-content .token.selector {
    color: #48BCFF;
}
.post-content .token.string,
.post-content .token.char,
.post-content .token.attr-value,
.post-content .token.inserted,
.post-content .token.url {
    color: #96EA8C;
}
.post-content .token.function,
.post-content .token.class-name,
.post-content .token.builtin {
    color: #FFD27A;
}
.post-content .token.number,
.post-content .token.boolean,
.post-content .token.constant,
.post-content .token.symbol {
    color: #F19E39;
}
.post-content .token.property,
.post-content .token.tag,
.post-content .token.attr-name,
.post-content .token.key {
    color: var(--cb-blue-lighter);
}
.post-content .token.variable,
.post-content .token.regex {
    color: #E0B3FF;
}
.post-content .token.deleted {
    color: #FF9B84;
}

@media (max-width: 767px) {
    .post-content pre,
    .post-content pre code,
    .post-content code[class*=language-] {
        font-size: 0.8125rem;
    }
}


/*  7. Newsletter banner
    ========================================================================== */
body .email-subs-wrap,
body .email-subs-wrap .text-wrap {
    text-align: left;
}
body .email-subs-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 1.5rem 4rem;
    align-items: center;
    margin-top: 5rem;
    padding: 3rem;
    border: 1px solid rgba(51, 132, 255, 0.3);
    border-radius: 16px;
    background:
        radial-gradient(120% 160% at 0% 0%, var(--cb-mid-blue) 0%, var(--cb-navy) 45%, #0A1426 100%);
}
.email-subs-wrap .text-wrap,
.email-subs-wrap .form-wrap {
    margin: 0;
}
.email-subs-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cb-blue-lighter);
}
.email-subs-wrap .email-subs-section-title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.625rem, 1.3rem + 0.9vw, 2rem);
    line-height: 1.2;
}
.email-subs-wrap .email-subs-section-description {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--cb-text-muted);
}
/* HubSpot form 47ea2dba (same as the cubbit.io footer), rendered as raw HTML:
   email + button on one row, the privacy consent from HubSpot underneath */
.cubbit-hs-form {
    min-height: 48px;
}
.cubbit-hs-form .hs-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    margin: 0;
}
.cubbit-hs-form .hs-form fieldset {
    display: contents;
}
.cubbit-hs-form .hs_email {
    grid-column: 1;
    grid-row: 1;
}
.cubbit-hs-form .hs_submit {
    grid-column: 2;
    grid-row: 1;
}
/* the consent rich text is the only unclassed wrapper HubSpot adds */
.cubbit-hs-form .hs-form > div:not([class]),
.cubbit-hs-form .legal-consent-container {
    grid-column: 1 / -1;
    grid-row: 2;
}
.cubbit-hs-form .hs-form-field > label,
.cubbit-hs-form .hs_error_rollup {
    display: none;
}
.cubbit-hs-form .input {
    margin: 0;
}
.cubbit-hs-form .hs-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    height: 48px;
    padding: 0 16px;
    font: inherit;
    font-size: 1rem;
    color: var(--cb-text);
    background: var(--cb-bg);
    border: 1px solid var(--cb-border-strong);
    border-radius: 8px;
    outline: 0;
    box-shadow: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cubbit-hs-form .hs-input::placeholder {
    color: var(--cb-text-subtle);
    opacity: 1;
}
.cubbit-hs-form .hs-input:focus {
    border-color: var(--cb-blue-light);
    box-shadow: 0 0 0 3px rgba(0, 101, 255, 0.3);
}
.cubbit-hs-form .hs-input.invalid.error {
    border-color: #FF9B84;
}
.cubbit-hs-form .actions {
    margin: 0;
    padding: 0;
}
.cubbit-hs-form .hs-button {
    height: 48px;
    padding: 0 28px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-white);
    background: var(--cb-gradient);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.cubbit-hs-form .hs-button:hover,
.cubbit-hs-form .hs-button:focus {
    opacity: 0.88;
}
.cubbit-hs-form .hs-error-msgs {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}
.cubbit-hs-form .hs-error-msg,
.cubbit-hs-form .hs-error-msgs label {
    font-size: 0.8125rem;
    color: #FF9B84;
}
/* HubSpot writes inline sizes, fonts and colours into the consent text: bring it back to the blog scale */
.cubbit-hs-form .hs-richtext,
.cubbit-hs-form .hs-richtext p,
.cubbit-hs-form .hs-richtext span {
    margin: 0;
    font-family: var(--font-family) !important;
    font-size: 0.8125rem !important;
    line-height: 1.5;
    color: var(--cb-text-subtle) !important;
}
.cubbit-hs-form .hs-richtext a,
.cubbit-hs-form .hs-richtext a span {
    color: var(--cb-text-muted) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cubbit-hs-form .hs-richtext a:hover,
.cubbit-hs-form .hs-richtext a:hover span {
    color: var(--cb-text-strong) !important;
}
.cubbit-hs-form .submitted-message {
    font-size: 1.0625rem;
    color: var(--cb-text);
}

@media (max-width: 575px) {
    .cubbit-hs-form .hs-form {
        grid-template-columns: minmax(0, 1fr);
    }
    .cubbit-hs-form .hs_submit {
        grid-column: 1;
        grid-row: 2;
    }
    .cubbit-hs-form .hs-form > div:not([class]),
    .cubbit-hs-form .legal-consent-container {
        grid-row: 3;
    }
    .cubbit-hs-form .hs-button {
        width: 100%;
    }
}

@media (max-width: 991px) {
    body .email-subs-wrap {
        grid-template-columns: minmax(0, 1fr);
        padding: 2.5rem 2rem;
    }
}
@media (max-width: 575px) {
    body .email-subs-wrap {
        padding: 2rem 1.25rem;
        text-align: left;
    }
}


/*  8. Footer
    ========================================================================== */
body .site-footer {
    margin-top: 6rem;
    padding-top: 4rem;
    padding-bottom: 2rem;
    background-color: var(--cb-surface);
    border-top: 1px solid var(--cb-border);
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 3rem 4rem;
}
.site-footer .widget-about {
    max-width: none;
    margin: 0;
}
.site-footer .footer-logo-wrap {
    margin-bottom: 1rem;
}
.site-footer .site-description {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--cb-text-muted);
}

.site-footer .social-links-wrap {
    margin-top: 1.5rem;
}
.site-footer .social-links a {
    margin-right: 1rem;
    color: var(--cb-text-subtle);
}
.site-footer .social-links a svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.site-footer .social-links a:hover {
    color: var(--cb-text-strong);
}

.site-footer .secondary-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2rem;
}
.site-footer .secondary-nav .nav-col {
    flex: 0 1 180px;
    min-width: 140px;
    padding: 0;
}
.site-footer .secondary-nav .title {
    margin: 0 0 1rem;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 400;
    color: var(--cb-text);
}
.site-footer .secondary-nav .nav-link {
    margin-bottom: 0.625rem;
}
.site-footer .secondary-nav a {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--cb-text-subtle);
}
.site-footer .secondary-nav a:hover {
    color: var(--cb-text-strong);
}

.site-footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cb-border);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--cb-text-subtle);
    text-align: left;
}
.site-footer .footer-bottom > * {
    margin: 0;
}
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}
.site-footer .footer-legal a {
    color: var(--cb-text-subtle);
}
.site-footer .footer-legal a:hover {
    color: var(--cb-text-strong);
}

@media (max-width: 991px) {
    .footer-top {
        grid-template-columns: minmax(0, 1fr);
    }
    .site-footer .secondary-nav {
        justify-content: flex-start;
    }
}
@media (max-width: 575px) {
    .site-footer .secondary-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .site-footer .secondary-nav .nav-col {
        min-width: 0;
    }
}