/*
 * iGaming Reviews front-end styles.
 * Kept small. Theme.json handles colors, spacing, and typography.
 * This file only adds patterns and components that block CSS cannot
 * easily express on its own.
 */

/* ---------- Hero (front page + review hero) ----------
   We use !important here because theme.json's top-level
   styles.color.text emits .has-text-color { color: ... !important }
   which would otherwise win over our inline styles.
*/
.igr-hero,
.igr-hero p,
.igr-hero h1,
.igr-hero h2,
.igr-hero h3,
.igr-hero .has-text-color {
    color: #ffffff !important;
}

/* The CTA box at the bottom of a review uses the same primary background. */
.igr-cta-box,
.igr-cta-box p,
.igr-cta-box .has-text-color {
    color: #ffffff !important;
}

/* But the bonus headline inside the CTA box is gold, not white. */
.igr-cta-box h2,
.igr-cta-box .has-accent-color {
    color: var(--wp--preset--color--accent) !important;
}

/* ---------- Skip link, accessibility ---------- */
.skip-link {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--background);
    padding: 0.5rem 1rem;
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 1000;
    border-radius: 0 0 0.25rem 0;
}
.skip-link:focus { top: 0; }

/* ---------- Rating panel ---------- */
.igr-rating {
    align-items: baseline;
}
.igr-rating-score {
    line-height: 1;
}

/* ---------- Quick facts ---------- */
.igr-quick-facts .igr-fact {
    margin: 0 0 0.5rem;
}
.igr-quick-facts strong {
    color: var(--wp--preset--color--primary);
}

/* ---------- Pros and Cons ---------- */
.igr-pros ul,
.igr-cons ul {
    padding-left: 1.25rem;
    margin: 0;
}
.igr-pros li::marker { color: var(--wp--preset--color--positive); }
.igr-cons li::marker { color: var(--wp--preset--color--negative); }

/* ---------- Affiliate CTA ---------- */
.igr-cta-box .wp-block-button__link {
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--primary);
    font-weight: 700;
    font-size: var(--wp--preset--font-size--lg);
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    text-decoration: none;
}
.igr-cta-box .wp-block-button__link:hover {
    background: var(--wp--preset--color--background);
    color: var(--wp--preset--color--primary);
}

/* ---------- Top picks comparison ---------- */
.igr-pick-row {
    column-gap: 1.25rem;
}
.igr-pick-row .wp-block-post-featured-image {
    flex-shrink: 0;
}
.igr-pick-rating {
    margin-left: auto;
    text-align: right;
    align-self: center;
}

/* ---------- Card hover ---------- */
.wp-block-query .wp-block-group {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.wp-block-query .wp-block-group:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 30, 61, 0.06);
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
    .igr-pick-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .igr-pick-rating {
        margin-left: 0;
        text-align: left;
    }
    .igr-cta-box {
        padding-left: var(--wp--preset--spacing--30);
        padding-right: var(--wp--preset--spacing--30);
    }
}