/* ============================================================
   GPS LIFE — Docs Shortcodes CSS v1.0 (Phase 1 — callouts)
   Файл: machic-child/css/docs-shortcodes.css

   Scoped під #gps-docs (high specificity vs Machic / LiteSpeed CCSS).
   Phase 1: [info], [warning], [tip]
   Phase 2+: додамо [step], [tldr], [definition], [quote], [compare],
             [video], [download], [faq], [product]
   ============================================================ */


/* ============================================================
   1. CALLOUTS — [info] / [warning] / [tip]
   ============================================================ */

#gps-docs .docs-callout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 24px 0;
    padding: 18px 22px;
    border-radius: 12px;
    border: 1px solid var(--docs-callout-border, rgba(70, 103, 255, .15));
    background: var(--docs-callout-bg, rgba(70, 103, 255, .04));
    color: var(--text, #1d1d1f);
    font-size: 15px;
    line-height: 1.6;
    /* Level 2 depth: layered shadow (close grounding + far float) + inset top highlight.
       Inset white-line імітує підсвітку зверху (Apple/Linear/Stripe pattern). */
    box-shadow:
        0 1px 2px var(--docs-callout-shadow, rgba(70, 103, 255, .08)),
        0 4px 16px var(--docs-callout-shadow, rgba(70, 103, 255, .08)),
        inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* Icon у tinted circle 32×32 — accent-color bg @ 15% opacity, icon usescurrentColor */
#gps-docs .docs-callout__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--docs-callout-icon-bg, rgba(70, 103, 255, .15));
    color: var(--docs-callout-accent, #4667ff);
    /* Vertical alignment: icon center align з title baseline */
    margin-top: -1px;
}

#gps-docs .docs-callout__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

#gps-docs .docs-callout__body {
    flex: 1 1 auto;
    min-width: 0;
    /* Vertically center body content relative до 32px icon — лише коли немає title */
    padding-top: 4px;
}

#gps-docs .docs-callout__title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: -.1px;
    color: var(--text, #1d1d1f);
    margin: 0 0 4px;
    padding-top: 0;
}

/* Якщо є title — body padding-top нуль (title сам тримає позицію) */
#gps-docs .docs-callout__body:has(.docs-callout__title) {
    padding-top: 0;
}

#gps-docs .docs-callout__content {
    font-size: 15px;
    line-height: 1.6;
}

#gps-docs .docs-callout__content > *:first-child {
    margin-top: 0;
}

#gps-docs .docs-callout__content > *:last-child {
    margin-bottom: 0;
}

#gps-docs .docs-callout__content p {
    margin: 0 0 10px;
}

#gps-docs .docs-callout__content ul,
#gps-docs .docs-callout__content ol {
    margin: 8px 0 8px 20px;
    padding: 0;
}

#gps-docs .docs-callout__content li {
    margin: 0 0 4px;
}

#gps-docs .docs-callout__content a {
    color: var(--docs-callout-accent, #4667ff);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#gps-docs .docs-callout__content a:hover {
    text-decoration: none;
}

#gps-docs .docs-callout__content code {
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.92em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

#gps-docs .docs-callout__content strong {
    font-weight: 600;
    color: #111;
}


/* ---- 1.1 [info] — синій бренд (#4667ff) ---- */

#gps-docs .docs-callout--info {
    --docs-callout-accent: #4667ff;
    --docs-callout-bg: rgba(70, 103, 255, .04);
    --docs-callout-border: rgba(70, 103, 255, .15);
    --docs-callout-icon-bg: rgba(70, 103, 255, .12);
    --docs-callout-shadow: rgba(70, 103, 255, .08);
}


/* ---- 1.2 [warning] — оранжевий (#ff9f0a / #d97706 для accent) ---- */

#gps-docs .docs-callout--warning {
    --docs-callout-accent: #c2570f;
    --docs-callout-bg: rgba(255, 159, 10, .05);
    --docs-callout-border: rgba(255, 159, 10, .22);
    --docs-callout-icon-bg: rgba(255, 159, 10, .15);
    --docs-callout-shadow: rgba(255, 159, 10, .1);
}


/* ---- 1.3 [tip] — зелений (#30d158 / #10a957 для accent) ---- */

#gps-docs .docs-callout--tip {
    --docs-callout-accent: #0a7e3f;
    --docs-callout-bg: rgba(48, 209, 88, .05);
    --docs-callout-border: rgba(48, 209, 88, .2);
    --docs-callout-icon-bg: rgba(48, 209, 88, .15);
    --docs-callout-shadow: rgba(48, 209, 88, .09);
}


/* ============================================================
   2. MOBILE (≤ 1023px) — проектний breakpoint
   ============================================================ */

@media (max-width: 1023px) {
    #gps-docs .docs-callout {
        margin: 20px 0;
        padding: 16px 18px;
        gap: 12px;
        font-size: 14px;
        line-height: 1.55;
        border-radius: 10px;
    }

    #gps-docs .docs-callout__icon {
        width: 28px;
        height: 28px;
    }

    #gps-docs .docs-callout__icon svg {
        width: 16px;
        height: 16px;
    }

    #gps-docs .docs-callout__title {
        font-size: 15px;
    }

    #gps-docs .docs-callout__content {
        font-size: 14px;
    }

    #gps-docs .docs-callout__body {
        padding-top: 3px;
    }
}