/*
 * BootHack shortcodes — framework-neutral layout (no Bootstrap / Bulma utility dependencies).
 * Uses BootHack content tokens (--boothack-*, --bh-*) where available.
 */

/* -----------------------------------------------------------------------------
 * Callout shell ([callout])
 *
 * Namespaced `.bh-shortcode-callout` so it never collides with a framework's
 * native `.callout` component (Foundation ships one). Self-sufficient: variant
 * colours fall back through canonical --bh-* tokens, then Bootstrap --bs-*,
 * then a literal hex, so the plugin styles correctly even without the theme.
 * -------------------------------------------------------------------------- */

.bh-shortcode-callout {
    padding: 1.5rem;
    margin: 1.5rem 0;
    border: 1px solid var(--bh-callout-border, rgba(0, 0, 0, 0.08));
    border-left-width: 5px;
    border-radius: 0.25rem;
}

.bh-shortcode-callout--primary   { border-left-color: var(--bh-primary, var(--bs-primary, #0d6efd)); }
.bh-shortcode-callout--secondary { border-left-color: var(--boothack-secondary, var(--bs-secondary, #6c757d)); }
.bh-shortcode-callout--success   { border-left-color: var(--boothack-success, var(--bs-success, #198754)); }
.bh-shortcode-callout--info      { border-left-color: var(--boothack-info, var(--bs-info, #0dcaf0)); }
.bh-shortcode-callout--warning   { border-left-color: var(--boothack-warning, var(--bs-warning, #ffc107)); }
.bh-shortcode-callout--danger    { border-left-color: var(--boothack-danger, var(--bs-danger, #dc3545)); }
.bh-shortcode-callout--light     { border-left-color: var(--boothack-light, var(--bs-light, #f8f9fa)); }
.bh-shortcode-callout--dark      { border-left-color: var(--boothack-dark, var(--bs-dark, #212529)); }

/* -----------------------------------------------------------------------------
 * Blockquote ([blockquote])
 * -------------------------------------------------------------------------- */

.bh-shortcode-quote-icon {
    float: left;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 0.85;
    margin: 0 0.15em 0 0;
    color: var(--bh-quote-border-color, var(--bh-drop-cap-color, inherit));
}

.bh-shortcode-quote-icon::before {
    content: "\201C";
}

/*
 * Inner blockquote inside the figure/caption layout: stripped bare because the
 * surrounding figure.bh-shortcode-quote already supplies padding, border and
 * margin. The solo blockquote (below) is itself the quote shell.
 */
.bh-shortcode-quote .bh-shortcode-blockquote {
    margin: 0;
    padding: 0;
    border: 0;
}

/*
 * Quote shell for blockquote shortcode — padding and left rule, no variant colour.
 * Border-left COLOUR comes from the inline style (Site Editor / Customizer quote colour).
 */
figure.bh-shortcode-quote,
.bh-shortcode-quote.bh-shortcode-quote--solo {
    margin: 1.5rem 0;
    padding: 1.5rem;
    border: 1px solid var(--bh-callout-border, rgba(0, 0, 0, 0.08));
    border-left-width: 5px;
}

/* Legacy: blockquotes that still carry .bh-shortcode-callout from older renders. */
.bh-shortcode-callout.bh-shortcode-blockquote,
.bh-shortcode-quote.bh-shortcode-callout {
    margin: 1.5rem 0;
    padding: 1.5rem;
    border: 1px solid var(--bh-callout-border, rgba(0, 0, 0, 0.08));
    border-left-width: 5px;
}

/*
 * Remove framework-injected typographic quotes. Tailwind Typography adds
 * open-quote/close-quote pseudo-elements to blockquote paragraphs; the
 * shortcode already renders its own decorative mark via .bh-shortcode-quote-icon,
 * so the framework pair is a duplicate. No-op on frameworks that add no quotes.
 */
.bh-shortcode-blockquote {
    quotes: none;
}

.bh-shortcode-blockquote p:first-of-type::before,
.bh-shortcode-blockquote p:last-of-type::after,
.bh-shortcode-blockquote p::before,
.bh-shortcode-blockquote p::after {
    content: none;
}

.bh-shortcode-quote--solo::after,
.bh-shortcode-quote::after {
    content: "";
    display: table;
    clear: both;
}

.bh-shortcode-quote-caption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.45;
    opacity: 0.88;
}

/* -----------------------------------------------------------------------------
 * WordPress [caption] overrides
 * -------------------------------------------------------------------------- */

.bh-shortcode-wp-caption img {
    display: block;
    max-width: 100%;
    height: auto;
}

.bh-shortcode-wp-caption .bh-shortcode-wp-caption-text {
    margin-top: 0.35rem;
}

/* -----------------------------------------------------------------------------
 * Responsive video embed (major hosts only — see PHP allowlist)
 * -------------------------------------------------------------------------- */

.bh-shortcode-embed-responsive {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.bh-shortcode-embed-responsive iframe,
.bh-shortcode-embed-responsive object,
.bh-shortcode-embed-responsive embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* -----------------------------------------------------------------------------
 * [boothack_video] — figure + constrained shell (replaces row/col/ratio pattern)
 * -------------------------------------------------------------------------- */

.bh-shortcode-video {
    margin: 1.5rem 0;
}

.bh-shortcode-video__shell {
    width: 100%;
}

/* ~ Bootstrap col-lg-10 / centered band */
.bh-shortcode-video__shell--constrained {
    max-width: 83.333333%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991.98px) {
    .bh-shortcode-video__shell--constrained {
        max-width: 100%;
    }
}

.bh-shortcode-video__caption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.45;
}

.bh-shortcode-video__caption--left {
    text-align: left;
}

.bh-shortcode-video__caption--center {
    text-align: center;
}

.bh-shortcode-video__caption--right {
    text-align: right;
}

/* -----------------------------------------------------------------------------
 * [boothack_embed] — non-video iframe embeds (social, maps, etc.)
 * -------------------------------------------------------------------------- */

.bh-shortcode-embed {
    margin: 1.5rem 0;
}

.bh-shortcode-embed__shell {
    width: 100%;
}

.bh-shortcode-embed__shell--constrained {
    max-width: 83.333333%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991.98px) {
    .bh-shortcode-embed__shell--constrained {
        max-width: 100%;
    }
}

.bh-shortcode-embed iframe {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border: 0;
}

.bh-shortcode-embed__caption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.45;
}

.bh-shortcode-embed__caption--left {
    text-align: left;
}

.bh-shortcode-embed__caption--center {
    text-align: center;
}

.bh-shortcode-embed__caption--right {
    text-align: right;
}

/* -----------------------------------------------------------------------------
 * [image] / [figure] — responsive captioned images
 * -------------------------------------------------------------------------- */

.bh-shortcode-image,
.bh-shortcode-figure {
    display: block;
    margin: 0 0 1.25rem;
    max-width: 100%;
}

.bh-shortcode-image--layout-constrained {
    max-width: 83.333333%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991.98px) {
    .bh-shortcode-image--layout-constrained {
        max-width: 100%;
    }
}

.bh-shortcode-image--align-left {
    margin-right: auto;
}

.bh-shortcode-image--align-center {
    margin-left: auto;
    margin-right: auto;
}

.bh-shortcode-image--align-right {
    margin-left: auto;
}

.bh-shortcode-image__img,
.bh-shortcode-figure__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.bh-shortcode-image__img--rounded,
.bh-shortcode-figure__img--rounded {
    border-radius: 0.25rem;
}

/*
 * Shadow values mirror the theme's .bh-shadow / .bh-shadow-sm utilities so an
 * image matches other shadowed surfaces, while remaining self-sufficient if
 * the theme's utilities are not present.
 */
.bh-shortcode-image__img--shadow,
.bh-shortcode-figure__img--shadow {
    box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.15);
}

.bh-shortcode-image__img--shadow-sm,
.bh-shortcode-figure__img--shadow-sm {
    box-shadow: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.12);
}

/* Shadows read as muddy grey on dark surfaces; deepen them instead. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme=light]) .bh-shortcode-image__img--shadow,
    html:not([data-theme=light]) .bh-shortcode-figure__img--shadow {
        box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.5);
    }

    html:not([data-theme=light]) .bh-shortcode-image__img--shadow-sm,
    html:not([data-theme=light]) .bh-shortcode-figure__img--shadow-sm {
        box-shadow: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.45);
    }
}

html[data-theme=dark] .bh-shortcode-image__img--shadow,
html[data-theme=dark] .bh-shortcode-figure__img--shadow {
    box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.5);
}

html[data-theme=dark] .bh-shortcode-image__img--shadow-sm,
html[data-theme=dark] .bh-shortcode-figure__img--shadow-sm {
    box-shadow: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.45);
}

.bh-shortcode-image__caption,
.bh-shortcode-figure__caption {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    line-height: 1.45;
}

.bh-shortcode-image__caption--left,
.bh-shortcode-figure__caption--left {
    text-align: left;
}

.bh-shortcode-image__caption--center,
.bh-shortcode-figure__caption--center {
    text-align: center;
}

.bh-shortcode-image__caption--right,
.bh-shortcode-figure__caption--right {
    text-align: right;
}

/* -----------------------------------------------------------------------------
 * Pullquotes
 * -------------------------------------------------------------------------- */

.boothack-pullquote {
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.5;
    width: 30%;
    padding: 10px 15px;
    background-color: var(--bh-shortcode-pullquote-bg, var(--boothack-light, #f8f9fa));
    color: inherit;
    position: relative;
    box-sizing: border-box;
    border-radius: 0.25rem;
}

/*
 * Dark mode — align with BootHack dark-mode-surfaces wp-block-pullquote tokens.
 * !important beats inline border colours from the shortcode attribute defaults.
 * Matches OS dark (unless html[data-theme=light]) and html[data-theme=dark].
 */
@media (prefers-color-scheme: dark) {

    html:not([data-theme=light]) .boothack-pullquote {
        --bh-shortcode-pullquote-bg: var(--bh-dark-surface-raised, #232936);
        color: var(--bh-dark-text-muted, #b4bcc8);
        background-color: var(--bh-shortcode-pullquote-bg);
        border-left-color: var(--bh-dark-border-strong, rgba(255, 255, 255, 0.22)) !important;
        border-right-color: var(--bh-dark-border, rgba(255, 255, 255, 0.14)) !important;
        border-top-color: var(--bh-dark-border, rgba(255, 255, 255, 0.14)) !important;
        border-bottom-color: var(--bh-dark-border, rgba(255, 255, 255, 0.14)) !important;
    }
}

html[data-theme=dark] .boothack-pullquote {
    --bh-shortcode-pullquote-bg: var(--bh-dark-surface-raised, #232936);
    color: var(--bh-dark-text-muted, #b4bcc8);
    background-color: var(--bh-shortcode-pullquote-bg);
    border-left-color: var(--bh-dark-border-strong, rgba(255, 255, 255, 0.22)) !important;
    border-right-color: var(--bh-dark-border, rgba(255, 255, 255, 0.14)) !important;
    border-top-color: var(--bh-dark-border, rgba(255, 255, 255, 0.14)) !important;
    border-bottom-color: var(--bh-dark-border, rgba(255, 255, 255, 0.14)) !important;
}

.pullquote-left {
    float: left;
    margin-right: 20px;
    margin-left: -15%;
}

.pullquote-right {
    float: right;
    margin-left: 20px;
    margin-right: -15%;
}

@media (min-width: 1200px) {
    .boothack-pullquote {
        width: 30%;
    }

    .pullquote-left {
        margin-left: calc(-15% + 10px);
    }

    .pullquote-right {
        margin-right: calc(-15% + 10px);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .boothack-pullquote {
        width: 40%;
    }

    .pullquote-left {
        margin-left: calc(-10% + 10px);
    }

    .pullquote-right {
        margin-right: calc(-10% + 10px);
    }
}

@media (max-width: 767px) {
    .boothack-pullquote {
        width: 100%;
        float: none;
        margin: 0 auto;
    }

    .pullquote-left,
    .pullquote-right {
        margin: 0 0 20px;
    }
}