/**
 * AI Summarizer — custom front-end styles.
 *
 * Loaded from the theme (NOT from inside the plugin). The plugin's own
 * assets/css/ai-summarizer.css must be dequeued for this to take full
 * effect — see the functions.php snippet you were given alongside this
 * file.
 *
 * Targets the plugin's existing markup/classes directly — no extra
 * wrapper element is added. Structure, top to bottom:
 *
 *   .aisum            the block root (per-instance CSS vars live here,
 *                      set inline by the plugin: --aisum-accent, --aisum-radius)
 *   .aisum__heading    the "Ask AI about this" label
 *   .aisum__buttons    the row of buttons — this is styled as the box
 *   .aisum__btn        each link/button (service links + copy button)
 *   .aisum__icon       the icon inside a button
 *   .aisum__copy       the "Copy prompt" button (already has .aisum__btn too)
 */

/* ---------- Root ----------
   Colors fall back to the theme's own tokens, but still respect the
   accent color set in the plugin's admin settings (--aisum-accent) if
   you ever want to change it per-instance without touching this file. */
.aisum {
    --aisum-accent: var(--Primary-Blue, #3B44FF);
    --aisum-accent-light: var(--Light-Blue, #5F6DFF);
    margin-block: 1.5rem;
    font-size: inherit;
    line-height: 1.6;
    color: var(--Primary-Text, #ffffff);
}

/* ---------- Heading / label ---------- */
.aisum__heading {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--Primary-Text, #ffffff);
    line-height: 1.3;
}

/* ---------- Button row = the box ----------
   This is the "boxed" background. Remove the background/border/padding
   here if you ever want the buttons floating with no box. */
.aisum__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    background: var(--Card-Surface, #0B0E29);
    border: 1px solid var(--Subtle-Border, #FFFFFF1A);
    border-radius: 12px;
    padding: 20px;
}

/* ---------- Buttons ----------
   Same look for every button regardless of the plugin's style/layout
   settings (outline, filled, minimal, stretch, inline) — all render as
   one consistent ghost button. */
.aisum__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 8px;
    border: 1px solid var(--Subtle-Border, #FFFFFF1A);
    background: rgba(255, 255, 255, .04);
    color: var(--Primary-Text, #ffffff);
    font-family: var(--font-body, inherit);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
}

.aisum__btn:hover,
.aisum__btn:focus-visible {
    border-color: var(--aisum-accent-light);
    background: rgba(59, 68, 255, .14);
    color: var(--Primary-Text, #ffffff);
    text-decoration: none;
}

.aisum__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(59, 68, 255, .14);
}

/* ---------- Icons ---------- */
.aisum__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--Secondary-Text, #BBBBBB);
}

.aisum__btn:hover .aisum__icon,
.aisum__btn:focus-visible .aisum__icon {
    color: var(--aisum-accent-light);
}

.aisum__icon svg {
    display: block;
    width: 17px;
    height: 17px;
}

/* ---------- Copy-prompt button state ---------- */
.aisum__copy.is-copied {
    border-color: var(--aisum-accent-light);
    color: var(--aisum-accent-light);
}

/* ---------- Small screens ---------- */
@media (max-width: 480px) {
    .aisum__btn {
        flex: 1 1 calc(50% - 8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .aisum__btn {
        transition: none;
    }
}

/**
 * AI Summarizer — custom front-end styles.
 *
 * Loaded from the theme (NOT from inside the plugin). The plugin's own
 * assets/css/ai-summarizer.css must be dequeued for this to take full
 * effect — see the functions.php snippet you were given alongside this
 * file.
 *
 * Targets the plugin's existing markup/classes directly — no extra
 * wrapper element is added. Structure, top to bottom:
 *
 *   .aisum            the block root (per-instance CSS vars live here,
 *                      set inline by the plugin: --aisum-accent, --aisum-radius)
 *   .aisum__heading    the "Ask AI about this" label
 *   .aisum__buttons    the row of buttons — this is styled as the box
 *   .aisum__btn        each link/button (service links + copy button)
 *   .aisum__icon       the icon inside a button
 *   .aisum__copy       the "Copy prompt" button (already has .aisum__btn too)
 */

/* ---------- Root ----------
   Colors fall back to the theme's own tokens, but still respect the
   accent color set in the plugin's admin settings (--aisum-accent) if
   you ever want to change it per-instance without touching this file. */
.aisum {
    --aisum-accent: var(--Primary-Blue, #3B44FF);
    --aisum-accent-light: var(--Light-Blue, #5F6DFF);
    margin-block: 1.5rem;
    font-size: inherit;
    line-height: 1.6;
    color: var(--Primary-Text, #ffffff);
}

/* ---------- Heading / label ---------- */
.aisum__heading {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--Primary-Text, #ffffff);
    line-height: 1.3;
}

/* ---------- Button row = the box ----------
   This is the "boxed" background. Remove the background/border/padding
   here if you ever want the buttons floating with no box. */
.aisum__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    background: var(--Card-Surface, #0B0E29);
    border: 1px solid var(--Subtle-Border, #FFFFFF1A);
    border-radius: 12px;
    padding: 20px;
}

/* ---------- Buttons ----------
   Same look for every button regardless of the plugin's style/layout
   settings (outline, filled, minimal, stretch, inline) — all render as
   one consistent ghost button. */
.aisum__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 8px;
    border: 1px solid var(--Subtle-Border, #FFFFFF1A);
    background: rgba(255, 255, 255, .04);
    color: var(--Primary-Text, #ffffff);
    font-family: var(--font-body, inherit);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
}

.aisum__btn:hover,
.aisum__btn:focus-visible {
    border-color: var(--aisum-accent-light);
    background: rgba(59, 68, 255, .14);
    color: var(--Primary-Text, #ffffff);
    text-decoration: none;
}

.aisum__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(59, 68, 255, .14);
}

/* ---------- Icons ---------- */
.aisum__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--Secondary-Text, #BBBBBB);
}

.aisum__btn:hover .aisum__icon,
.aisum__btn:focus-visible .aisum__icon {
    color: var(--aisum-accent-light);
}

.aisum__icon svg {
    display: block;
    width: 17px;
    height: 17px;
}

/* ---------- Copy-prompt button state ---------- */
.aisum__copy.is-copied {
    border-color: var(--aisum-accent-light);
    color: var(--aisum-accent-light);
}

/* ---------- Small screens ---------- */
@media (max-width: 480px) {
    .aisum__btn {
        flex: 1 1 calc(50% - 8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .aisum__btn {
        transition: none;
    }
}