/* guide.css – stilar för guide.aspx
   Encoding: UTF-8 utan BOM
*/

/* -------------------------------------------------------
   Grundläggande variabler (mörkt tema som standard,
   matchar default.css)
------------------------------------------------------- */
:root
{
    --bg-page: #0e0f14;
    --bg-card: #1a1c25;
    --bg-card-2: #1f2130;
    --border-color: #2e3045;
    --text-main: #d4d8e8;
    --text-dim: #8b91aa;
    --text-muted: #5a5f75;
    --gold-light: #f0c040;
    --gold-dim: #7a6020;
    --gold-tint: rgba(240,192,64,.08);
    --accent-green: #30855c;
    --accent-red: #e05560;
    --accent-yellow: #e0b040;
    --accent-blue: #5b8de0;
    --radius: 8px;
}

@media (prefers-color-scheme: light)
{
    :root
    {
        --bg-page: #f4f5f9;
        --bg-card: #ffffff;
        --bg-card-2: #f0f1f6;
        --border-color: #d0d4e0;
        --text-main: #1a1c25;
        --text-dim: #5a5f75;
        --text-muted: #8b91aa;
        --gold-light: #b07000;
        --gold-dim: #d09030;
        --gold-tint: rgba(176,112,0,.07);
    }
}

/* -------------------------------------------------------
   Bas
------------------------------------------------------- */
*, *::before, *::after
{
    box-sizing: border-box;
}

body
{
    margin: 0;
    padding: 0;
    background: var(--bg-page);
    color: var(--text-main);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

a
{
    color: var(--gold-light);
    text-decoration: none;
}

    a:hover
    {
        text-decoration: underline;
    }

/* -------------------------------------------------------
   Sida: wrapper
------------------------------------------------------- */
.guide-page
{
    min-height: 100vh;
}

/* -------------------------------------------------------
   Header
------------------------------------------------------- */
.guide-header
{
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.guide-header-inner
{
    max-width: 860px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.guide-logo-link
{
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gold-light);
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
}

    .guide-logo-link i
    {
        font-size: 20px;
    }

.guide-logo-text
{
    letter-spacing: .02em;
}

.guide-title
{
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-dim);
    border-left: 1px solid var(--border-color);
    padding-left: 20px;
}

/* -------------------------------------------------------
   TOC
------------------------------------------------------- */
.guide-toc
{
    background: var(--bg-card-2);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 57px;
    z-index: 99;
}

.guide-toc-inner
{
    max-width: 860px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.guide-toc-label
{
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-right: 8px;
}

.guide-toc-link
{
    font-size: 13px;
    color: var(--text-dim);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid transparent;
    transition: color .15s, border-color .15s;
}

    .guide-toc-link:hover,
    .guide-toc-link.is-active
    {
        color: var(--gold-light);
        border-color: var(--gold-dim);
        text-decoration: none;
    }

/* -------------------------------------------------------
   Huvud­innehåll
------------------------------------------------------- */
.guide-main
{
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 24px 60px;
    flex: 1;
}

/* -------------------------------------------------------
   Sektioner
------------------------------------------------------- */
.guide-section
{
    margin-bottom: 64px;
}

.guide-section-title
{
    font-size: 22px;
    font-weight: 700;
    color: var(--gold-light);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.guide-section-nr
{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gold-tint);
    border: 1px solid var(--gold-dim);
    color: var(--gold-light);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.guide-intro
{
    color: var(--text-dim);
    margin-bottom: 15px;
}

.guide-fokus
{
    margin-bottom: 28px;
}

.guide-fokus > div
{
    font-size: 1.2rem;
}

/*.guide-webbsidor tr > td:nth-child(2)
{
    word-break: break-all;
    word-break: break-word;
}*/

.guide-h3
{
    font-size: 17px;
    font-weight: 600;
    color: var(--text-main);
    margin: 32px 0 12px;
}

.guide-h4
{
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dim);
    margin: 24px 0 10px;
}

/* -------------------------------------------------------
   Kort / tabeller
------------------------------------------------------- */

.intro-card
{
    overflow: hidden;
    margin-bottom: 16px;
    font-size: 1.2rem;
}

.intro-level
{
    display: flex;
    flex-direction: column;
}

.intro-level-hl
{
    font-size: 1.3rem;
    font-weight: bold;
}

.guide-card
{
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
}

.guide-table
{
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .guide-table thead tr
    {
        background: var(--bg-card-2);
        border-bottom: 1px solid var(--border-color);
    }

    .guide-table th
    {
        padding: 10px 14px;
        text-align: left;
        font-weight: 600;
        color: var(--text-dim);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .guide-table td
    {
        padding: 10px 14px;
        border-bottom: 1px solid var(--border-color);
        vertical-align: top;
        line-height: 1.5;
    }

    .guide-table tr:last-child td
    {
        border-bottom: none;
    }

    .guide-table tr:hover td
    {
        background: var(--bg-card-2);
    }

.guide-ui-element
{
    display: inline-block;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
}

/* -------------------------------------------------------
   Häst-mockup (pedagogisk illustration)
------------------------------------------------------- */
.guide-horse-mockup
{
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin: 16px 0 24px;
    font-size: 13px;
    max-width: 420px;
}

.guide-hm-row1
{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.guide-hm-cb
{
    font-size: 1.3rem;
    color: #777;
}

.guide-hm-nr
{
    font-weight: 700;
    color: var(--text-bright);
    min-width: 1.9rem;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #5a7bde;
}

.guide-hm-namn
{
    flex: 1;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.guide-hm-plac
{
    font-size: 0.9rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.guide-hm-plac-1
{
    background: #b8860b;
    color: #fff;
}

.guide-hm-plac-2
{
    background: #808080;
    color: #fff;
}

.guide-hm-plac-3
{
    background: #8b4513;
    color: #fff;
}

.guide-hm-row2
{
    display: flex;
    align-items: start;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 1.0rem;
    justify-content: space-between;
}

.guide-hm-kusk
{
    color: var(--text-dim);
}

.guide-hm-spik
{
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
}

.guide-hm-spik-hog
{
    background: rgba(76,175,128,.25);
    color: #4caf80;
    border: 1px solid #4caf80;
}

.guide-hm-spik-mid
{
    background: rgba(224,176,64,.20);
    color: #e0b040;
    border: 1px solid #e0b040;
}

.guide-hm-spik-lag
{
    background: rgba(224,85,96,.20);
    color: #e05560;
    border: 1px solid #e05560;
}

.guide-hm-stats-head
{
    display: flex;
    gap: 8px;
    font-size: 14px;
    color: var(--text-muted);
    /*text-transform: uppercase;*/
    letter-spacing: .04em;
    margin-bottom: 4px;
    justify-content: space-between;
}

/*.guide-hm-stats-head span { flex: 1; }*/

.guide-hm-stats
{
    display: flex;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    justify-content: space-between;
}

.guide-hm-lbl
{
    font-size: 0.8rem;
}

/*.guide-hm-stats > span { flex: 1; }*/

.guide-hm-streck
{
    color: var(--accent-blue);
}

.guide-hm-odds
{
    color: var(--text-main);
}

.guide-hm-oddspct
{
    font-size: 16px;
    color: var(--text-muted);
    font-weight: 400;
}

.guide-hm-tf
{
    color: var(--text-main);
}

.guide-hm-tf-high
{
    color: var(--accent-green);
}

.guide-hm-tf-mid
{
    color: var(--accent-yellow);
}

.guide-hm-tf-low
{
    color: var(--accent-red);
}

.guide-hm-index
{
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 15px;
}

.guide-hm-idx
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.guide-hm-idx-lbl
{
    font-size: 13px;
    color: var(--text-muted);
}

.guide-hm-idx-val
{
    font-size: 14px;
    font-weight: 600;
}

.guide-hm-idx-high
{
    color: var(--accent-green);
}

.guide-hm-idx-mid
{
    color: var(--accent-yellow);
}

.guide-hm-idx-low
{
    color: var(--accent-red);
}

.guide-hm-sep
{
    color: var(--text-muted);
    font-size: 11px;
}

.guide-hm-trends
{
    font-size: 14px;
}

.guide-hm-trends-title
{
    font-size: 16px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}

.guide-hm-trends-table
{
    width: 100%;
    border-collapse: collapse;
}

    .guide-hm-trends-table th,
    .guide-hm-trends-table td
    {
        padding: 3px 6px;
        text-align: center;
        font-size: 14px;
    }

    .guide-hm-trends-table th
    {
        color: var(--text-muted);
        font-weight: 400;
    }

.guide-hm-tl
{
    text-align: left !important;
    color: var(--text-dim);
}

.guide-hm-tv
{
}

.guide-hm-tu
{
    color: var(--accent-green);
}

.guide-hm-td
{
    color: var(--accent-red);
}

/* -------------------------------------------------------
   Inline färgindikationer i löptext
------------------------------------------------------- */
.guide-tf-high
{
    color: var(--accent-green);
    font-weight: 600;
}

.guide-tf-mid
{
    color: var(--accent-yellow);
    font-weight: 600;
}

.guide-tf-low
{
    color: var(--accent-red);
    font-weight: 600;
}

.guide-idx-high
{
    color: var(--accent-green);
    font-weight: 600;
}

.guide-idx-mid
{
    color: var(--accent-yellow);
    font-weight: 600;
}

.guide-idx-low
{
    color: var(--accent-red);
    font-weight: 600;
}

.guide-spik-hog
{
    color: var(--accent-green);
    font-weight: 600;
}

.guide-spik-mid
{
    color: var(--accent-yellow);
    font-weight: 600;
}

.guide-spik-lag
{
    color: var(--accent-red);
    font-weight: 600;
}

.guide-plac-1
{
    color: #b8860b;
    font-weight: 700;
}

.guide-plac-2
{
    color: #808080;
    font-weight: 700;
}

.guide-plac-3
{
    color: #8b4513;
    font-weight: 700;
}

/* -------------------------------------------------------
   Platshållare (del 2 & 3 ej klara ännu)
------------------------------------------------------- */
.guide-section-placeholder .guide-section-title
{
    color: var(--text-muted);
}

.guide-section-placeholder .guide-section-nr
{
    border-color: var(--text-muted);
    color: var(--text-muted);
}

.guide-placeholder-text
{
    color: var(--text-muted);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
}

/* -------------------------------------------------------
   Footer
------------------------------------------------------- */
.guide-footer
{
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding: 18px 24px;
    text-align: center;
}

.guide-back-link
{
    color: var(--text-dim);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .guide-back-link:hover
    {
        color: var(--gold-light);
    }

/* -------------------------------------------------------
   Responsivt
------------------------------------------------------- */
@media (max-width: 600px)
{
    .guide-header-inner,
    .guide-toc-inner,
    .guide-main
    {
        padding-left: 16px;
        padding-right: 16px;
    }

    .guide-title
    {
        display: none;
    }

    .guide-horse-mockup
    {
        max-width: 100%;
    }

    .guide-table th:first-child,
    .guide-table td:first-child
    {
        width: 40%;
    }
}


/* -------------------------------------------------------
   FAQ – accordion (sektion 4)
------------------------------------------------------- */
.guide-faq-accordion
{
    margin-top: .75rem;
}

.guide-faq-h3-extra
{
    margin-top: 2rem;
}

.guide-faq-item
{
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius) !important;
    margin-bottom: .5rem;
    overflow: hidden;
}

.guide-faq-btn
{
    background: var(--bg-card);
    color: var(--text-main);
    font-weight: 600;
    font-size: .95rem;
    box-shadow: none;
    border: none;
    padding: .85rem 1.1rem;
}

    .guide-faq-btn:not(.collapsed)
    {
        background: var(--bg-card-2);
        color: var(--gold-light);
        box-shadow: none;
    }

    .guide-faq-btn:focus
    {
        box-shadow: 0 0 0 2px var(--accent-blue);
        outline: none;
    }

    .guide-faq-btn::after
    {
        filter: invert(70%) sepia(10%) saturate(300%) hue-rotate(190deg);
    }

    .guide-faq-btn:not(.collapsed)::after
    {
        filter: invert(75%) sepia(60%) saturate(500%) hue-rotate(5deg);
    }

.guide-faq-body
{
    background: var(--bg-card-2);
    color: var(--text-main);
    font-size: .9rem;
    line-height: 1.65;
    padding: .85rem 1.1rem 1rem;
    border-top: 1px solid var(--border-color);
}

    .guide-faq-body a
    {
        color: var(--accent-blue);
    }

        .guide-faq-body a:hover
        {
            color: var(--gold-light);
        }
/* -- Legal footer-text i guide -- */
.guide-footer-legal
{
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-dim);
}

    .guide-footer-legal a
    {
        color: var(--text-dim);
        text-decoration: underline;
    }

        .guide-footer-legal a:hover
        {
            color: var(--gold-light);
        }

/* -- Inline kod (cookie-namn etc.) -- */
code
{
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    background: var(--bg-card-2);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 1px 5px;
    color: var(--text-main);
}

/* -- Cookie consent-widget -- */
.tt-consent-widget
{
    background: var(--bg-card-2);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--gold-dim);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin: 0 0 28px;
}

.tt-consent-text
{
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dim);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

    .tt-consent-text i
    {
        margin-top: 3px;
        flex-shrink: 0;
    }

    .tt-consent-text.tt-consent-ok
    {
        font-size: 16px;
        color: var(--accent-green);
        margin-bottom: 0;
    }

    .tt-consent-text.tt-consent-warn
    {
        font-size: 16px;
        margin-bottom: 0;
    }

    .tt-consent-text a
    {
        color: inherit;
        text-decoration: underline;
    }

.tt-consent-sep
{
    margin: 0 6px;
    opacity: .5;
}

.tt-consent-btns
{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/*Det här är sista raden*/