/* =========================================================
   HOTBOT — MEDIUM × CLAUDE EDITORIAL BODY
   ========================================================= */

/* ---------------------------------------------------------
   1. COLOR SYSTEM
   --------------------------------------------------------- */

:root {
    --hotbot-crail: #C15F3C;
    --hotbot-crail-hover: #A94F31;

    --hotbot-cloudy: #B1ADA1;

    --hotbot-pampas: #F4F3EE;
    --hotbot-white: #FFFFFF;

    --hotbot-text: #242424;
    --hotbot-text-secondary: #6B6862;
    --hotbot-text-muted: #8B8880;

    --hotbot-border: rgba(36, 36, 36, 0.10);
    --hotbot-border-light: rgba(36, 36, 36, 0.07);

    --hotbot-shadow:
        0 1px 2px rgba(36, 36, 36, 0.04),
        0 8px 30px rgba(36, 36, 36, 0.05);

    --hotbot-content-width: 740px;
    --hotbot-wide-width: 1100px;
}


/* ---------------------------------------------------------
   2. GLOBAL BODY
   --------------------------------------------------------- */

html {
    background: var(--hotbot-pampas);
}

body {
    margin: 0;

    background:
        var(--hotbot-pampas);

    color: var(--hotbot-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 17px;
    line-height: 1.65;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    padding-top: 84px;
}


/* ---------------------------------------------------------
   3. MAIN PAGE WRAPPER
   --------------------------------------------------------- */

#content,
#main,
.main,
.content,
.page-content {
    color: var(--hotbot-text);
}


/* ---------------------------------------------------------
   4. MEDIUM-STYLE READING WIDTH
   --------------------------------------------------------- */

article,
.post,
.page,
.content-body,
.post-content,
.article-content,
.entry-content {
    max-width: var(--hotbot-content-width);
    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------
   5. HEADINGS
   --------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--hotbot-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-weight: 700;

    letter-spacing: -0.025em;

    text-rendering: optimizeLegibility;
}


/* H1 */

h1 {
    margin-top: 0;
    margin-bottom: 28px;

    font-size: clamp(36px, 5vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.035em;
}


/* H2 */

h2 {
    margin-top: 48px;
    margin-bottom: 18px;

    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.15;
}


/* H3 */

h3 {
    margin-top: 38px;
    margin-bottom: 14px;

    font-size: 25px;
    line-height: 1.25;
}


/* H4 */

h4 {
    margin-top: 30px;
    margin-bottom: 12px;

    font-size: 21px;
    line-height: 1.3;
}


/* ---------------------------------------------------------
   6. PARAGRAPHS
   --------------------------------------------------------- */

p {
    margin-top: 0;
    margin-bottom: 1.5em;

    color: var(--hotbot-text);

    font-size: 18px;
    line-height: 1.72;
}


/* First paragraph after title */

h1 + p,
.entry-title + p,
.post-title + p {
    font-size: 20px;
    line-height: 1.65;
}


/* ---------------------------------------------------------
   7. LINKS — CLAUDE CRAIL
   --------------------------------------------------------- */

a {
    color: var(--hotbot-crail);

    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}


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


/* ---------------------------------------------------------
   8. ARTICLE LINKS
   --------------------------------------------------------- */

article a,
.post-content a,
.content-body a,
.entry-content a {
    color: var(--hotbot-crail);
}


article a:hover,
.post-content a:hover,
.content-body a:hover,
.entry-content a:hover {
    color: var(--hotbot-crail-hover);
}


/* ---------------------------------------------------------
   9. BLOCKQUOTES
   --------------------------------------------------------- */

blockquote {
    margin: 34px 0;
    padding: 4px 0 4px 24px;

    border-left: 3px solid var(--hotbot-crail);

    color: var(--hotbot-text-secondary);

    font-size: 21px;
    line-height: 1.55;

    font-style: italic;
}


blockquote p {
    margin-bottom: 0;

    color: inherit;

    font-size: inherit;
    line-height: inherit;
}


/* ---------------------------------------------------------
   10. LISTS
   --------------------------------------------------------- */

article ul,
article ol,
.post-content ul,
.post-content ol,
.content-body ul,
.content-body ol,
.entry-content ul,
.entry-content ol {
    margin-top: 0;
    margin-bottom: 1.6em;

    padding-left: 1.45em;
}


article li,
.post-content li,
.content-body li,
.entry-content li {
    margin-bottom: 0.55em;

    font-size: 18px;
    line-height: 1.65;
}


/* ---------------------------------------------------------
   11. HR
   --------------------------------------------------------- */

hr {
    height: 1px;

    margin: 48px auto;

    border: 0;

    background: var(--hotbot-cloudy);

    opacity: 0.35;
}


/* ---------------------------------------------------------
   12. IMAGES
   --------------------------------------------------------- */

article img,
.post-content img,
.content-body img,
.entry-content img {
    display: block;

    max-width: 100%;
    height: auto;

    margin-left: auto;
    margin-right: auto;
}


/* Featured / article images */

article .featured-image,
article .post-image,
.post-content .featured-image {
    width: 100%;

    margin-top: 32px;
    margin-bottom: 42px;

    border-radius: 4px;
}


/* ---------------------------------------------------------
   13. FIGURES
   --------------------------------------------------------- */

figure {
    margin: 42px 0;
}


figcaption {
    margin-top: 10px;

    color: var(--hotbot-text-muted);

    font-size: 14px;
    line-height: 1.45;

    text-align: center;
}


/* ---------------------------------------------------------
   14. CODE
   --------------------------------------------------------- */

code {
    padding: 2px 5px;

    border-radius: 4px;

    background: rgba(193, 95, 60, 0.08);

    color: var(--hotbot-crail);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: 0.88em;
}


pre {
    overflow-x: auto;

    margin: 32px 0;
    padding: 22px 24px;

    border-radius: 8px;

    background: #242424;

    color: #F4F3EE;

    line-height: 1.55;

    box-shadow: var(--hotbot-shadow);
}


pre code {
    padding: 0;

    background: transparent;

    color: inherit;
}


/* ---------------------------------------------------------
   15. TABLES
   --------------------------------------------------------- */

table {
    width: 100%;

    margin: 32px 0;

    border-collapse: collapse;

    background: var(--hotbot-white);
}


th,
td {
    padding: 12px 14px;

    border-bottom: 1px solid var(--hotbot-border);

    text-align: left;
}


th {
    color: var(--hotbot-text);

    font-weight: 700;
}


td {
    color: var(--hotbot-text-secondary);
}


/* ---------------------------------------------------------
   16. SELECTION
   --------------------------------------------------------- */

::selection {
    background: rgba(193, 95, 60, 0.22);

    color: var(--hotbot-text);
}


/* ---------------------------------------------------------
   17. CONTENT CARDS
   --------------------------------------------------------- */

.card,
.post-card,
.content-card {
    background: var(--hotbot-white);

    border: 1px solid var(--hotbot-border-light);

    border-radius: 10px;

    box-shadow: var(--hotbot-shadow);
}


/* ---------------------------------------------------------
   18. META / SECONDARY INFORMATION
   --------------------------------------------------------- */

.meta,
.post-meta,
.entry-meta,
.timestamp,
.date,
.author,
.byline {
    color: var(--hotbot-text-muted);

    font-size: 14px;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   19. AUTHOR
   --------------------------------------------------------- */

.author-avatar,
.avatar,
.u-photo {
    border-radius: 50%;

    object-fit: cover;
}


/* ---------------------------------------------------------
   20. BUTTONS
   --------------------------------------------------------- */

button,
.btn,
input[type="submit"],
input[type="button"] {
    border-radius: 999px;

    font-weight: 500;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}


/* Primary Claude-style button */

.btn-primary,
button.btn-primary {
    background: var(--hotbot-crail);

    border-color: var(--hotbot-crail);

    color: #fff;
}


.btn-primary:hover,
button.btn-primary:hover {
    background: var(--hotbot-crail-hover);

    border-color: var(--hotbot-crail-hover);

    color: #fff;
}


/* ---------------------------------------------------------
   21. FORM ELEMENTS
   --------------------------------------------------------- */

input,
textarea,
select {
    border: 1px solid var(--hotbot-border);

    border-radius: 8px;

    background: var(--hotbot-white);

    color: var(--hotbot-text);

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


input:focus,
textarea:focus,
select:focus {
    outline: none;

    border-color: var(--hotbot-crail);

    box-shadow:
        0 0 0 3px rgba(193, 95, 60, 0.12);
}


/* ---------------------------------------------------------
   22. SEARCH / INPUT
   --------------------------------------------------------- */

input::placeholder,
textarea::placeholder {
    color: var(--hotbot-text-muted);
}


/* ---------------------------------------------------------
   23. RESPONSIVE — TABLET
   --------------------------------------------------------- */

@media (max-width: 991px) {

    article,
    .post,
    .page,
    .content-body,
    .post-content,
    .article-content,
    .entry-content {
        max-width: 700px;
    }

    p {
        font-size: 17px;
        line-height: 1.7;
    }

    h1 {
        font-size: 42px;
    }
}


/* ---------------------------------------------------------
   24. RESPONSIVE — MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    body {
        padding-top: 68px;

        font-size: 16px;
    }


    article,
    .post,
    .page,
    .content-body,
    .post-content,
    .article-content,
    .entry-content {
        width: auto;

        max-width: none;

        margin-left: 18px;
        margin-right: 18px;
    }


    h1 {
        margin-bottom: 22px;

        font-size: 36px;
        line-height: 1.08;

        letter-spacing: -0.03em;
    }


    h2 {
        margin-top: 40px;

        font-size: 29px;
    }


    h3 {
        margin-top: 32px;

        font-size: 23px;
    }


    p {
        margin-bottom: 1.45em;

        font-size: 17px;
        line-height: 1.7;
    }


    h1 + p,
    .entry-title + p,
    .post-title + p {
        font-size: 18px;
    }


    blockquote {
        margin: 28px 0;

        padding-left: 18px;

        font-size: 19px;
    }


    article li,
    .post-content li,
    .content-body li,
    .entry-content li {
        font-size: 17px;
    }


    figure {
        margin-left: -18px;
        margin-right: -18px;
    }


    figcaption {
        padding-left: 18px;
        padding-right: 18px;
    }
}


/* ---------------------------------------------------------
   25. VERY SMALL PHONES
   --------------------------------------------------------- */

@media (max-width: 380px) {

    article,
    .post,
    .page,
    .content-body,
    .post-content,
    .article-content,
    .entry-content {
        margin-left: 15px;
        margin-right: 15px;
    }


    h1 {
        font-size: 32px;
    }


    p {
        font-size: 16.5px;
    }
}


/* ---------------------------------------------------------
   26. ACCESSIBILITY
   --------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--hotbot-crail);

    outline-offset: 3px;
}


/* ---------------------------------------------------------
   27. REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition: none !important;

        animation: none !important;
    }
}


/* ---------------------------------------------------------
   28. KEEP BACKGROUND CLAUDE / PAMPA
   --------------------------------------------------------- */

.container,
.container-fluid {
    background: transparent;
}


/* Avoid Bootstrap overriding the editorial background */

body,
html {
    background-color: var(--hotbot-pampas) !important;
}