/* ==========================================================================
   EXTERNAL LINKS
   ========================================================================== */
/*
 * Inline external link — used inside sentences / help & infobox text.
 * Kept lightweight (weight 500, icon matched to text size) so it reads as a
 * link within copy, not as a heading competing with the field label.
 */
.external-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--primary-readable);
    font-size: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
    font-weight: 500;
    vertical-align: baseline;
}

.external-link:hover {
    /* text-decoration: underline; */
    color: var(--primary-readable-hover);
}

.external-link .dashicons {
    font-size: 1em;
    width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s var(--ease-prism);
}

/* Mirror the .ctc-shortcut-link hover, but diagonal — the external/"open" icon
   lifts up-and-right to read as "launching out" to another page. */
.external-link:hover .dashicons {
    transform: translate(2px, -2px);
    /* transition: transform 0.2s var(--ease-prism); */
}

/*
 * Standalone doc link (field_type: block_external_link) — rendered on its own
 * line under a field. Styled as an understated "resource" chip so it is clearly
 * a documentation link, not a stray duplicate of the field label above it.
 * Secondary/muted at rest, brand-primary on hover. Covers main + PRO since all
 * block_external_link fields route through ExternalLink.js.
 */
.external-link--block {
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.35rem 0.7rem;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    width: fit-content;
    max-width: 100%;
}

/* When the doc link directly follows its field, cancel most of the field's
   20px bottom margin so the chip reads as attached to that field, not floating
   between it and the next block. */
.form-group + .external-link--block,
.form-group-row + .external-link--block {
    margin-top: -0.75rem;
}

.external-link--block:hover {
    text-decoration: none;
    color: var(--primary-readable-hover);
    border-color: var(--primary-readable);
    box-shadow: 0 2px 8px var(--primary-glow);
}

.external-link--block .dashicons {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    color: var(--primary-readable);
}

/**
 * Shortcut/Internal Links
 */
.ctc-shortcut-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--primary-readable);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-fast);
}

.ctc-shortcut-link:hover {
    color: var(--primary-readable-hover);
}

.ctc-shortcut-link .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    transition: transform 0.2s var(--ease-prism);
}

.ctc-shortcut-link:hover .dashicons {
    transform: translateX(3px);
}

/**
 * Doc link groups — multiple external links in a row
 */
.ctc-help-links-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
}

