/* Legacy UAG (Ultimate Addons for Gutenberg / Spectra) block styles.
 *
 * When UAG was removed during the 2026-09-01 migration, the plugin's per-block
 * inline CSS + its plugin CSS files stopped being served. But the HTML markup
 * (with all the uagb-* / wp-block-uagb-* classes) still lives inside every
 * post_content that was authored with UAG blocks. Without CSS, those blocks
 * render as unstyled inline anchors — the "tiny rectangle" affiliate buttons
 * Tyler noticed on 2026-09-02.
 *
 * This file recreates sensible defaults so those pages still render close to
 * how they did on the old site, without requiring UAG to be reinstalled.
 * Source of truth: the actual UAG CSS pulled from post 1576's cache file on
 * the Bitnami instance before it was retired.
 */

/* ============================================================
 * Container blocks
 * ============================================================ */

.wp-block-uagb-container {
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
}

.wp-block-uagb-container.uagb-is-root-container {
    margin-left: auto;
    margin-right: auto;
}

.wp-block-uagb-container.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
}

.wp-block-uagb-container.alignwide {
    max-width: 1200px;
}

.wp-block-uagb-container > .uagb-container-inner-blocks-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: min(100%, 1200px);
    margin: 0 auto;
}

/* ============================================================
 * Advanced heading
 * ============================================================ */

.wp-block-uagb-advanced-heading .uagb-heading-text,
.wp-block-uagb-advanced-heading .uagb-desc-text {
    margin: 0;
}

.wp-block-uagb-advanced-heading .uagb-desc-text {
    margin-bottom: 15px;
}

.wp-block-uagb-advanced-heading .uagb-highlight {
    background: var(--ast-global-color-8, #f78a0c);
    color: var(--ast-global-color-5, #ffffff);
    padding: 0 6px;
    border-radius: 3px;
}

/* ============================================================
 * Buttons  --  the important one
 *
 * Structure on the page:
 *   .wp-block-uagb-buttons.uagb-buttons__outer-wrap
 *     .uagb-buttons__wrap
 *       .wp-block-uagb-buttons-child.wp-block-button
 *         .uagb-button__wrapper
 *           a.uagb-buttons-repeater.wp-block-button__link
 *             .uagb-button__link  (text)
 *
 * Colors match BTG's Astra global palette:
 *   #004986  ast-global-color-0  brand blue
 *   #319b42  ast-global-color-1  CTA green
 *   #5b6770  ast-global-color-3  slate grey (Astra's default button bg)
 *   #FFFFFF  ast-global-color-5  white
 *
 * Default UAG button = green (#319b42). Affiliate "buy this" buttons are
 * the most common UAG button on this site (Amazon links on review pages),
 * and green matches the site's other CTA elements (homepage view-all buttons,
 * hub landing pages).
 * ============================================================ */

/* Layout container */
.wp-block-uagb-buttons,
.uagb-buttons__outer-wrap {
    display: block;
    margin: 1.25em 0;
}
.uagb-buttons__outer-wrap .uagb-buttons__wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Individual button */
.wp-block-uagb-buttons-child,
.uagb-buttons__outer-wrap .wp-block-button {
    margin: 0;
}
.uagb-buttons__outer-wrap .uagb-buttons-repeater,
.wp-block-uagb-buttons-child .uagb-buttons-repeater,
.wp-block-uagb-buttons-child .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #319b42;
    color: #ffffff !important;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
    cursor: pointer;
    max-width: 100%;
}
.uagb-buttons__outer-wrap .uagb-buttons-repeater:hover,
.wp-block-uagb-buttons-child .wp-block-button__link:hover {
    background-color: #26802f;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}
.uagb-buttons__outer-wrap .uagb-buttons-repeater:focus-visible {
    outline: 2px solid #004986;
    outline-offset: 2px;
}
/* Inner text span/div — inherit color, not link-blue */
.uagb-buttons__outer-wrap .uagb-buttons-repeater .uagb-button__link,
.wp-block-uagb-buttons-child .uagb-button__link {
    color: #ffffff !important;
    font-weight: inherit;
    display: inline;
}

/* Slightly larger on desktop */
@media (min-width: 768px) {
    .uagb-buttons__outer-wrap .uagb-buttons-repeater,
    .wp-block-uagb-buttons-child .wp-block-button__link {
        font-size: 17px;
        padding: 12px 24px;
    }
}

/* Outline style variant — inverse blue */
.wp-block-uagb-buttons-child .wp-block-button__link.is-style-outline,
.uagb-buttons__outer-wrap .uagb-buttons-repeater.is-style-outline {
    background-color: transparent;
    color: #004986 !important;
    border: 2px solid #004986;
}
.wp-block-uagb-buttons-child .wp-block-button__link.is-style-outline:hover {
    background-color: #004986;
    color: #ffffff !important;
}
.wp-block-uagb-buttons-child .wp-block-button__link.is-style-outline .uagb-button__link {
    color: inherit !important;
}

/* Icon inside a button (SVG chevron etc.) */
.uagb-buttons__outer-wrap .uagb-button__icon svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    margin-left: 8px;
}
.uagb-buttons__outer-wrap .uagb-button__icon-position-before svg {
    margin-left: 0;
    margin-right: 8px;
}

/* ============================================================
 * Star rating
 * ============================================================ */

.wp-block-uagb-star-rating {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    margin: 0.5em 0;
}
.wp-block-uagb-star-rating .uag-star-rating__title {
    margin: 0;
    font-weight: 600;
}
.wp-block-uagb-star-rating .uag-star-rating {
    display: flex;
    align-items: center;
    gap: 2px;
}
.wp-block-uagb-star-rating .uag-star {
    color: #ccd6df;
    display: inline-block;
    line-height: 1;
    position: relative;
}
/* Filled stars use the site's blue (matches Astra link-color #0170b9 which
   was the star color on the old site). CSS-only "N of 5" is a compromise:
   the OLD site rendered fractional stars via per-block ::before with a
   width percentage. Without UAG's per-block CSS we default to first-4-
   filled. Individual blocks that need exact fractional ratings will be
   fixed post-migration. */
.wp-block-uagb-star-rating .uag-star:nth-child(-n+4) {
    color: #0170b9;
}

/* ============================================================
 * FAQ (accordion / grid)
 * ============================================================ */

.wp-block-uagb-faq {
    width: 100%;
    margin: 1em 0;
}
.wp-block-uagb-faq .uagb-faq-content {
    margin-bottom: 0;
}
.wp-block-uagb-faq-child {
    border: 1px solid #eaeaea;
    border-radius: 6px;
    margin-bottom: 8px;
    background: #fff;
}
.wp-block-uagb-faq-child .uagb-faq-questions-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 18px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    color: inherit;
}
.wp-block-uagb-faq-child .uagb-question {
    width: 100%;
    margin: 0;
}
.wp-block-uagb-faq-child .uagb-faq-content {
    padding: 0 18px 14px;
}
.wp-block-uagb-faq-child .uagb-icon svg,
.wp-block-uagb-faq-child .uagb-icon-active svg {
    width: 15px;
    height: 15px;
}
/* Without the UAG JS, we can't do interactive collapse. Instead of
   hiding content behind a broken toggle, always show the answer.
   This favours "content is readable" over "matches old site UX". */
.wp-block-uagb-faq-child .uagb-icon-active {
    display: none;
}
.wp-block-uagb-faq-child .uagb-faq-content {
    display: block !important;
}

/* ============================================================
 * Marketing button (used on some legacy pages instead of buttons)
 * ============================================================ */

.wp-block-uagb-marketing-button {
    display: block;
    margin: 1em 0;
}
.wp-block-uagb-marketing-button .uagb-marketing-btn__link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: #004986;
    color: #ffffff !important;
    padding: 14px 24px;
    border-radius: 6px;
    font-weight: 600;
}
.wp-block-uagb-marketing-button .uagb-marketing-btn__link:hover {
    background-color: #319b42;
}
.wp-block-uagb-marketing-button .uagb-marketing-btn__title {
    color: #ffffff;
    font-size: 1.05rem;
    display: block;
}
.wp-block-uagb-marketing-button .uagb-marketing-btn__prefix {
    color: #ffffff;
    display: block;
    font-size: 0.9rem;
    margin-top: 0.35em;
    font-weight: 400;
    opacity: 0.9;
}

/* ============================================================
 * Info-box, image, spacer — inherit sensible defaults. Nothing to do.
 * ============================================================ */