/* ============================================================
    Art Description Override Styles
    Stored as a static resource to be loaded via head markup.
   ============================================================ */

/* ============================================================
   Design Tokens: Palette, Typography & Scale
   ============================================================ */
:root {
    /* Palette */
    --color-text: #282828;
    --color-text-muted: rgba(40, 40, 40, 0.65);
    --color-bg: #fff;
    --color-bg-light: #f8f8f8;
    --color-border: #e7e7e7;
    --color-primary: #0090ff;
    --color-secondary: #ff6602;
    --color-accent: #4fbdf4;
    --color-success: #3caf65;
    --color-info: #40ade4;
    --color-warning: #f2b08e;
    --color-error: #f26322;

    /* Typography Families */
    --font-heading: "GT Walsheim", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    --font-code: "Courier New", monospace;
    --font-icon: "Font Awesome 6 Pro", articons;

    /* Scale */
    --fs-base: 1.3125rem; /* 21 px */
    --fs-h1: clamp(2.5rem, 5vw, 2.5rem); /* fija a 40px en desktop */
    --fs-h2: clamp(2.125rem, 4vw, 2.125rem); /* fija a 34px */
    --fs-h3: clamp(1.625rem, 3vw, 1.625rem); /* fija a 26px */
    --fs-p: var(--fs-base); /* 21 px */
    --fs-table-p: clamp(0.875rem, 2vw, 1rem); /* 14–16px */

    /* Header Height */
    --header-h: 110px;
}

/* ============================================================
    Universal Reset within the .art-description container
   ============================================================ */
.art-description,
.art-description * {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
    Base container styles
   ============================================================ */
.art-description {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* ============================================================
   SFDC-5856
    - scroll-margin-top property to create a top offset
    ensuring the content is visible below the header when navigated to
   ============================================================ */
.art-description [id] {
    scroll-margin-top: var(--header-h);
}

/* ============================================================
    Text Elements
   ============================================================ */
.art-description em {
    font-style: italic;
}

.art-description h1 {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--color-text);
}

.art-description h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    line-height: 1.3;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: var(--color-text);
}

.art-description h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: var(--color-text);
}

.art-description p {
    font-size: var(--fs-p);
    line-height: 1.6;
    margin: 0 0 1.75rem;
    color: var(--color-text);
}

/* Preformatted blocks */
.art-description pre {
    background-color: #f5f5f5;
    font-family: var(--font-code);
    font-size: var(--fs-p);
    line-height: 1.6;
    padding: 1rem;
    margin-bottom: 1.5rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    border-radius: 4px;
    overflow-x: auto;
}

/* Inline code elements */
.art-description code,
.art-description pre {
    font-size: 14px !important;
    background: #f6f6f6 !important;
    border: 1px solid #e7e7e8 !important;
    border-radius: 3px !important;
    color: #3f4548 !important;
    display: inline-block !important;
    font-family:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    padding: 0 0.25em !important;
    text-transform: none !important;
}

.art-description pre {
    display: block !important;
    margin: 1.4285714286em 0 !important;
    padding: 0.5em 1em !important;
    white-space: pre !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-x: auto !important;
}

.art-description pre code {
    border: none !important;
    line-height: 1.8 !important;
    padding: 0 !important;
    display: block !important;
}

/* Paragraphs inside tables */
.art-description table p {
    font-size: var(--fs-table-p);
    line-height: 1.4;
    margin-bottom: 0.5em;
    color: var(--color-text);
}

/* Strong and Bold Text */
.art-description strong,
.art-description b {
    font-weight: var(--lwc-fontWeightBold, 700) !important;
}

/* ============================================================
    Anchor Styles (with iOS text-decoration fix)
   ============================================================ */
.art-description a {
    color: var(--color-text) !important;
    font-weight: 400 !important;
    background-color: transparent !important;
    cursor: pointer !important;
    text-underline-offset: 4px !important;

    /* force underline on all browsers, including iOS */
    text-decoration-line: underline !important;
    text-decoration-thickness: 2px !important;
    text-decoration-color: var(--color-text) !important;
    text-decoration-style: solid !important;

    -webkit-text-decoration-line: underline !important;
    -webkit-text-decoration-color: var(--color-text) !important;
    -webkit-text-decoration-style: solid !important;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;

    transition:
        background 0.1s linear,
        border 0.1s linear,
        border-bottom 0.1s linear,
        color 0.1s linear,
        font-weight 0.1s linear,
        opacity 0.1s linear,
        text-decoration 0.1s linear,
        transform 0.1s linear !important;
}

.art-description a:hover {
    color: var(--color-primary) !important;
    text-decoration-color: var(--color-primary) !important;
    text-decoration-style: dashed !important;
}

/* ============================================================
    Lists
   ============================================================ */
.art-description ul {
    list-style-type: disc !important;
    list-style-position: outside !important;
    margin: 1.42857em 0 !important;
    padding: 0 0 0 2.5rem !important;
}

.art-description ol {
    list-style-type: decimal !important;
    list-style-position: outside !important;
    margin: 1.42857em 0 !important;
    padding: 0 0 0 2.5rem !important;
}

.art-description ul li,
.art-description ol li {
    margin-bottom: 0.8em !important;
    position: relative !important;
    font-size: var(--fs-p) !important;
    line-height: 1.6 !important;
}

/* Remove any custom pseudo-bullet rules */
.art-description ul li:before {
    content: none !important;
}

/* ============================================================
    Tables
   ============================================================ */
.art-description table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    text-align: center;
    vertical-align: middle;
}

.art-description table,
.art-description td {
    border: none;
}

.art-description td {
    padding: 0.5em;
}

.art-description tr {
    border-bottom: 1px solid var(--color-border);
}

.art-description table + h2,
.art-description table + p {
    margin-top: 28px;
}

.art-description h2 + p {
    font-size: var(--fs-p);
    line-height: 1.6;
    margin-bottom: 28px;
}

.art-description table ul,
.art-description table ol {
    list-style-position: outside !important;
    padding-left: 1.75rem !important;
    margin: 0.75em 0 !important;
}

.art-description table li {
    font-size: var(--fs-table-p) !important;
    line-height: 1.4 !important;
    margin-bottom: 0.5em !important;
}

.art-description table li::marker {
    font-size: 1em;
}

.art-description table li > ul,
.art-description table li > ol {
    margin: 0.4em 0 0.4em 1.25em !important;
}

/* ============================================================
    Responsive: Medium Screens (601px–1024px)
   ============================================================ */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    .art-description p {
        font-size: 19px;
        line-height: 32px;
        margin-bottom: 24px;
    }
    .art-description h1 {
        font-size: 2.2em;
        margin-bottom: 0.5rem;
    }
    .art-description h2 {
        font-size: 30px;
        margin-bottom: 20px;
    }
    .art-description ul {
        padding-left: 35px;
        margin: 1.2em 0;
        border-spacing: 0 8px;
    }
    .art-description ul li:before {
        font-size: 1.4rem;
        padding-right: 7px;
        line-height: 1.2;
    }
    .art-description table + h2,
    .art-description table + p {
        margin-top: 24px;
    }
    .art-description h2 + p {
        font-size: 21px;
        margin-bottom: 24px;
    }
    .art-description ol li {
        font-size: 17px;
        margin-bottom: 0.75em;
    }
    .art-description table ul,
    .art-description table ol {
        padding-left: 1.5rem !important;
        margin: 0.7em 0 !important;
    }
    .art-description table li {
        line-height: 1.45 !important;
    }
}

/* ============================================================
    Responsive: Small Screens (≤600px)
   ============================================================ */
@media screen and (max-width: 600px) {
    .art-description p {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 24px;
    }
    .art-description h1 {
        font-size: 2em;
        margin-bottom: 0.5rem;
    }
    .art-description h2 {
        font-size: 28px;
        margin-bottom: 20px;
    }
    .art-description h3 {
        font-size: var(--fs-h3);
        line-height: 1.4;
        margin-bottom: 1.25rem;
    }
    /* Reduce font-size and tighten line-height for inline code and blocks */
    .art-description code,
    .art-description pre {
        font-size: 12px !important;
        line-height: 1.4 !important;
        padding: 0 0.2em !important;
    }

    /* Pre blocks get slightly less horizontal padding */
    .art-description pre {
        padding: 0.5em 0.8em !important;
        word-wrap: break-word !important;
        white-space: pre-wrap !important;
    }

    /* Inside <pre>, ensure code remains legible but compact */
    .art-description pre code {
        line-height: 1.6 !important;
        padding: 0 !important;
        display: block !important;
    }
    /* Ensure links stay underlined on iOS */
    .art-description a {
        text-decoration-line: underline !important;
        -webkit-text-decoration-line: underline !important;
        text-decoration-thickness: 2px;
    }
    .art-description ul {
        padding-left: 30px;
        margin: 1em 0;
        border-spacing: 0 6px;
    }
    .art-description ul li:before {
        font-size: 1.3rem;
        padding-right: 6px;
        line-height: 1.2;
    }
    .art-description table + h2,
    .art-description table + p {
        margin-top: 24px;
    }
    .art-description h2 + p {
        font-size: 16px;
        margin-bottom: 24px;
    }
    .art-description table,
    .art-description table td,
    .art-description table th,
    .art-description table p {
        font-size: 14px;
        line-height: 1.4;
    }
    /* Header & Section Background */
    .header__border-bottom {
        padding-bottom: 1.75rem;
        border-bottom: 1px solid var(--color-border);
    }
    .section__resources {
        background: var(--color-bg-light);
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    /* Training Section */
    .training-section {
        text-align: center;
        margin: 1rem auto;
        padding: 2em;
        border-bottom: 1px solid var(--color-border);
    }
    .training-section h2 {
        font-size: 2.2857142857em;
        font-weight: 600;
        line-height: 1.125;
        margin-bottom: 23px;
    }
    .training-section h3 {
        font-size: 1.5em;
        font-weight: 400;
        margin-bottom: 1em;
    }
    /* Utility Classes */
    .nowrap {
        white-space: nowrap;
        white-space-collapse: collapse;
        text-wrap-mode: nowrap;
    }
    .size--small {
        font-size: 18px !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5em !important;
    }
    /* Buttons */
    [class*="btn--"] {
        transition:
            background 0.2s ease-in-out,
            border 0.2s ease-in-out,
            color 0.2s ease-in-out,
            font-weight 0.2s ease-in-out,
            opacity 0.2s ease-in-out,
            transform 0.2s ease-in-out,
            height 0.2s ease-in-out,
            padding 0.2s ease-in-out;
        font-size: 18px;
        line-height: 44px;
        appearance: none;
        border: 1px solid transparent;
        border-radius: 1.75em;
        display: inline-block;
        height: 46px;
        overflow: hidden;
        padding: 0 40px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
    }
    .btn--primary {
        background: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: #fff !important;
        font-weight: 500;
    }
    .btn--primary:hover {
        background: var(--color-accent) !important;
        border-color: var(--color-accent) !important;
        color: var(--color-text) !important;
        text-decoration: none !important;
        transform: scale(1.05);
    }
    .btn--secondary {
        background: #fff !important;
        border-color: var(--color-border) !important;
        color: var(--color-text) !important;
        font-weight: 400;
    }
    .btn--secondary:hover {
        background: #fff !important;
        border-color: var(--color-text) !important;
        color: var(--color-text) !important;
        transform: scale(1.05);
    }
    /* Try Section */
    .trial-section {
        text-align: center;
        margin: 1rem auto;
        padding: 2em;
        border-bottom: 1px solid var(--color-border);
    }
    .trial-section h2 {
        font-size: 2.2857142857em;
        font-weight: 600;
        line-height: 1.125;
        margin-bottom: 23px;
    }
    .trial-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .trial-list li {
        display: inline-block;
        margin: 0 0.5em;
    }
    /* Footer Section */
    .footer-column {
        text-align: left;
    }
    .footer-column-title {
        font-weight: bold;
        font-size: 1.1em;
        padding-left: 10px;
    }
    .footer-body {
        padding-top: 8px;
    }
    .footer-text {
        color: var(--color-text);
        font-size: 0.85em;
        padding: 0.3em 1em;
    }
    .footer-links-body {
        padding-top: 8px;
    }
    .footer-link-img {
        padding-right: 10px;
    }
    .art-description ol li {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 0.7em;
    }
    .art-description table ul,
    .art-description table ol {
        padding-left: 1.25rem !important;
        margin: 0.6em 0 !important;
    }
    .art-description table li {
        line-height: 1.4 !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .art-description table td p,
    .art-description table td li {
        margin-bottom: 0.5em !important;
    }
}