/* Shared meta role icon — used in post-type templates (single-casinos,
   single-slots) alongside the post-author link to replace the old
   24px profile avatar. Kept at block-tag scope so the narrower rules
   inside individual blocks (e.g. the hero-header's own .meta-role-icon)
   still win on those blocks. */
.meta-role-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.meta-role-icon img {
    display: block;
    width: 16px;
    height: 16px;
}

/* Override WordPress core flow layout margin removal for custom blocks */
body {
    background-color: var(--wp--preset--color--white);
}
main {
    background-color: var(--wp--preset--color--grey-light);
    padding-bottom: 1.5rem;
    border-radius: 2.625rem 2.625rem 0 0;
    box-shadow: 0 14px 29px 0 rgba(0, 0, 0, 0.03) inset;
}
html {
    overflow-x: hidden;
}

#main-top-header-navigation {
    max-width: var(--wp--style--global--content-size);
}
.wp-site-blocks {
    overflow-x: hidden;
    max-width: 100%;
}

p.wp-block-post-excerpt__excerpt {
    margin-top: inherit;
    margin-bottom: inherit;
}

.default-radius {
    border-radius: 12px;
}
.wp-block-embed iframe {
    border-radius: 0.75rem;
}
.wp-block-image img {
    border-radius: 0.75rem;
}
.wp-block-image iframe {
    border-radius: 0.75rem;
}
.wp-block-image figcaption {
    font-weight: 400;
    color: var(--wp--preset--color--text-light);
}
/* Global header background pattern */
.header-bg-pattern {
    position: relative;
    padding-top: 0.75rem;
    background-image: url(assets/images/svg/vector1.svg), url(assets/images/svg/vector2.svg);
    background-position: left center, right center;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, auto;
    background-color: var(--wp--preset--color--white);
}

:where(h1, h2, h3, h4, h5, h6) img {
    max-width: 100%;
    height: auto;
}

:where(.simple-header-1, .simple-header-2) {
    :where(h1, h2).wp-block-heading:not(.is-style-no-bottom-border) {
        text-decoration: none;
        padding-bottom: initial;
    }
}

:where(.simple-header-1, .simple-header-2) {
    :where(h1, h2).wp-block-heading:not(.is-style-no-bottom-border) {
        padding-bottom: initial;

        span::after {
            border-bottom: none;
            content: none;
            display: none;
        }
    }
}

.has-primary-light-background-color a {
    color: var(--wp--preset--color--link-dark);
}

a:not([href]) {
    cursor: default;
    text-decoration: none;
    outline: none;
    border: none;
}

a:has(img) {
    text-decoration: none;
}

a:where(:not(.wp-element-button)) {
    word-wrap: break-word;
}

.has-text-align-center {
    text-align: center;
}

.has-link-color:not(.wp-block-button__link) {
    --wp--preset--color--link: initial;
}

/* None gutenberg images */
figure:not([class^="wp-block"]) {

    /* max-width: 100% !important; */
    img {
        max-width: 100%;
        height: auto;
    }
}

:where(.single, .single-guide, .single-casinos, .single-slots) .wp-block-post-content img {
    vertical-align: bottom;
    box-sizing: border-box;
    height: auto;
    max-width: 100%;
}

/* Image scaling on mobile - used by core-image extension maxWidthMobile attribute */
@container (max-width: 48rem) {
    .scaling,
    .scaling img {
        max-width: 30vw !important;
        margin-bottom: 0.5rem !important;
    }
}

@media (max-width: 48rem) {
    .scaling,
    .scaling img {
        max-width: 30vw !important;
        margin-bottom: 0.5rem !important;
    }
}

.wp-block-post-featured-image {
    a {
        aspect-ratio: inherit;
    }

    img {
        aspect-ratio: inherit;
    }
}

/* Single post featured image - no cropping */
.single-post .wp-block-post-featured-image img {
    object-fit: contain;
    border-radius: 1.5rem;
}

/* Global broken image fallback - shows alt text on broken images */
img {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--x-small);
    color: var(--wp--preset--color--text-muted);
    text-align: center;
}

img[src=""],
img:not([src]) {
    visibility: hidden;
}

p:empty {
    display: none;
}
.site-footer__logo img {
    width: clamp(10.625rem, 2.5vw + 10rem, 11.875rem);
    height: auto;
}

.site-footer__social-link svg,
.site-footer__social-link img {
    width: 2.285rem;
    height: 2.285rem;
    flex-shrink: 0;
}

.site-footer__social-link:hover {
    transform: scale(1.1);
}
.site-footer__nav-title a:hover,
.site-footer__nav-list a:hover,
.site-footer__nav-list .current-menu-item a {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
}
.site-footer__badge-img {
    width: auto;
    height: clamp(1.3125rem, 0.5vw + 1.125rem, 1.5rem);
}
.yoast-breadcrumbs, .breadcrumbs {
    /* Allow the trail to wrap to a second line on narrow viewports so the
       current-page crumb (and any long parent crumb) can sit on its own
       line instead of being ellipsed off the right edge. Desktop stays
       single-line via the @media block below. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp--preset--spacing--5);
    min-width: 0;
    max-width: 100%;
    font-size: clamp(var(--wp--preset--font-size--x-small), 2vw, var(--wp--preset--font-size--small));

    /* Apply inline-flex + centring to every span, not just the direct-child
       wrapper. Yoast emits nested spans (home-item > anchor, separator,
       slots-item > anchor) and they each need to be flex items centred on
       the same line so the home icon's line box doesn't grow taller than
       the text-only neighbours. */
    a, span { display: inline-flex; align-items: center; min-width: 0; }
    a { color: var(--wp--preset--color--link); text-decoration: none; gap: 0.375rem; white-space: nowrap; flex-shrink: 0; }
    a:hover { color: var(--wp--preset--color--primary); }
    svg { flex-shrink: 0; vertical-align: middle; }
    .home-icon { display: none; }
    .breadcrumb-sep { flex-shrink: 0; }
    .breadcrumb_last {
        display: inline-block;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        color: var(--wp--preset--color--primary);
        text-decoration: underline;
    }

}

/* Yoast wraps every crumb + separator inside a single outer <span>,
   which means the .yoast-breadcrumbs / .breadcrumbs flex container has
   only ONE flex child — its gap + flex-wrap never reach the individual
   crumbs. Mirror them onto that inner wrapper so on narrow viewports
   the trail wraps cleanly and "Home / News" don't overlap the
   current-page crumb (P2 sheet feedback row 10). De-nested from the
   parent block above because CSS Nesting + leading-`>` combinator
   parsing isn't reliable across our supported browsers. */
.yoast-breadcrumbs > span,
.breadcrumbs > span {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem var(--wp--preset--spacing--5);
    min-width: 0;
    max-width: 100%;
}
@media screen and (min-width: 768px) {
    .yoast-breadcrumbs, .breadcrumbs {
        flex-wrap: nowrap;

        .breadcrumb_last {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

@media print {
    .yoast-breadcrumbs { font-size: var(--wp--preset--font-size--x-small); }
}

/* Contact Form 7 */
.wpcf7-form :where(input, textarea) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 1rem;
    padding: 0.5rem;
    border: 0.0625rem solid var(--wp--preset--color--border);
    border-radius: 0.75rem;
    background-color: var(--wp--preset--color--white);
    box-shadow: inset 0 0.0625rem 0.125rem rgba(62, 62, 62, .1);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--wp--preset--color--text-body);
    transition: box-shadow .5s, border-color .25s ease-in-out;
    appearance: none;
}

/* Blockquote - Quote icon only (layout handled by theme.json) */
.wp-block-quote {
    margin-left: 0;
}
.wp-block-quote .quote-icon {
    flex-shrink: 0;
    width: clamp(1.375rem, 1vw + 1.125rem, 1.6875rem);
    height: clamp(1rem, 0.75vw + 0.8125rem, 1.25rem);
    order: -1;
    align-self: center;
    margin: 0;
}
/* Step positioning for arrows */
.fs-flow-step {
    position: relative;
}

/* Number circle styling */
.fs-flow-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    margin: 0;
    background-color: var(--wp--preset--color--primary);
    border: 0.125rem solid var(--wp--preset--color--primary-dark);
    border-radius: 50%;
    color: var(--wp--preset--color--white);
    font-size: 1.625rem;
    font-weight: 500;
    line-height: 1;
}

/* Arrow positioning (utilities handle: absolute, top-0, m-0, pointer-events-none, hidden, md:block, z-10) */
.fs-flow-arrow {
    right: -0.75rem;
    transform: translateX(50%);
}

.fs-flow-steps {
    display: flex;
    flex-direction: column;
}

@container (min-width: 48rem) {
    .fs-flow-steps {
        display: grid;
    }
}

/* Info box icon row — when the title wraps onto multiple lines on
   mobile, anchor the icon to the top so it lines up with the first
   line of the heading instead of floating in the middle. The pattern
   uses `.flex.items-center` on the icon+heading wrapper, so this rule
   targets the immediate child of every fs-info-box that contains a
   figure (the icon). */
.fs-info-box > .wp-block-group:has(> figure.wp-block-image) {
    align-items: flex-start;
}

/* Numbered list counter */
.fs-numbered-list {
    counter-reset: step-counter;
}

.fs-numbered-item {
    counter-increment: step-counter;
}

/* Auto-generated number circle - mobile first */
.fs-numbered-title {
    display: flex;
    /* Anchor the number circle to the first line of the heading so it
       stays aligned when the title wraps onto two lines on mobile —
       align-items:center previously pulled the circle down to the
       middle of a multi-line title, leaving it visually misaligned. */
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 0.625rem;
}

.fs-numbered-title::before {
    content: counter(step-counter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    min-width: 1.875rem;
    background: var(--wp--preset--color--primary);
    border: 0.125rem solid var(--wp--preset--color--primary-dark);
    border-radius: 50%;
    color: var(--wp--preset--color--white);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

@container (min-width: 48rem) {
    .fs-numbered-title::before {
        width: 2.625rem;
        height: 2.625rem;
        min-width: 2.625rem;
        margin-right: 0.75rem;
        font-size: 1.625rem;
    }
}
.wp-block-yoast-faq-block {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wp-block-yoast-faq-block li {
    list-style: none;
}

.wp-block-yoast-faq-block details {
    background: var(--wp--preset--color--white);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: var(--wp--preset--shadow--sm);
}

/* Summary (Question) */
.wp-block-yoast-faq-block summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--10);
    padding: var(--wp--preset--spacing--20);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 500;
    line-height: 1.4;
    color: var(--wp--preset--color--text-heading);
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Remove default marker */
.wp-block-yoast-faq-block summary::-webkit-details-marker {
    display: none;
}

.wp-block-yoast-faq-block summary::marker {
    display: none;
    content: '';
}

/* Arrow Icon - using theme asset */
.wp-block-yoast-faq-block summary::after {
    content: url('assets/images/svg/arrow-down.svg') !important;
    flex-shrink: 0;
    margin-left: auto;
    flex: none !important;
    transition: transform 0.3s ease;
    will-change: transform;
}

/* Open state - rotate arrow */
.wp-block-yoast-faq-block details[open] summary::after {
    transform: rotate(180deg);
}

/* Answer Container - Grid animation for smooth expand */
.wp-block-yoast-faq-block details > div {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.wp-block-yoast-faq-block details[open] > div {
    grid-template-rows: 1fr;
}
/* Answer Content */
.wp-block-yoast-faq-block details > div > * {
    overflow: hidden;
}
.wp-block-yoast-faq-block details > div p,
.wp-block-yoast-faq-block details > div ul,
.wp-block-yoast-faq-block details > div ol {
    margin: 0;
    padding: 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
    font-size: var(--wp--preset--font-size--normal);
    font-weight: 400;
    line-height: 1.6;
    color: var(--wp--preset--color--text-light);
}

.wp-block-yoast-faq-block details > div ul,
.wp-block-yoast-faq-block details > div ol {
    padding-left: var(--wp--preset--spacing--40);
    padding-bottom: var(--wp--preset--spacing--20);
}

/* Border between question and answer when open */
.wp-block-yoast-faq-block details[open] summary {
    border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.08);
}

/* Focus & Accessibility */
.wp-block-yoast-faq-block summary:focus {
    outline: 0.125rem solid var(--wp--preset--color--primary);
    outline-offset: 0.125rem;
}

.wp-block-yoast-faq-block summary:focus:not(:focus-visible) {
    outline: none;
}

.wp-block-yoast-faq-block summary:focus-visible {
    outline: 0.125rem solid var(--wp--preset--color--primary);
    outline-offset: 0.125rem;
}

/* Hover State */
@media (hover: hover) {
    .wp-block-yoast-faq-block summary:hover {
        background-color: rgba(12, 27, 57, 0.02);
    }
}

/* Mobile-first: base styles, then scale up */
.wp-block-yoast-faq-block {
    gap: 0.75rem;
}

.wp-block-yoast-faq-block summary {
    padding: 1rem;
    font-size: 1rem;
    gap: 0.75rem;
}

.wp-block-yoast-faq-block details > div p,
.wp-block-yoast-faq-block details > div ul,
.wp-block-yoast-faq-block details > div ol {
    padding: 0 1rem 1rem;
    font-size: 0.9375rem;
}

.wp-block-yoast-faq-block details > div ul,
.wp-block-yoast-faq-block details > div ol {
    padding-left: 2rem;
}

@container (min-width: 48rem) {
    .wp-block-yoast-faq-block {
        gap: 1rem;
    }

    .wp-block-yoast-faq-block summary {
        padding: var(--wp--preset--spacing--20);
        font-size: var(--wp--preset--font-size--medium);
        gap: var(--wp--preset--spacing--10);
    }

    .wp-block-yoast-faq-block details > div p,
    .wp-block-yoast-faq-block details > div ul,
    .wp-block-yoast-faq-block details > div ol {
        padding: 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
        font-size: var(--wp--preset--font-size--normal);
    }

    .wp-block-yoast-faq-block details > div ul,
    .wp-block-yoast-faq-block details > div ol {
        padding-left: var(--wp--preset--spacing--40);
    }
}

/* Reduced Motion (Accessibility) */
@media (prefers-reduced-motion: reduce) {
    .wp-block-yoast-faq-block summary::after,
    .wp-block-yoast-faq-block details > div {
        transition: none;
    }
}

/* Dark Background Context */
.has-background:not(.has-white-background-color):not(.has-grey-light-background-color) .wp-block-yoast-faq-block details {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Grid layout for equal-height cards - mobile first */
.mini-casino-bonus-offers > .wp-block-columns {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--20);
    align-items: stretch;
}

.mini-casino-bonus-offers .wp-block-column {
    display: flex;
    flex-direction: column;
}

.mini-bonus-card__title {
    font-size: 1.625rem;
}

.mini-bonus-card > * {
    margin-block-start: 0;
}

@container (min-width: 36rem) {
    .mini-casino-bonus-offers > .wp-block-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (min-width: 60rem) {
    .mini-casino-bonus-offers > .wp-block-columns {
        grid-template-columns: repeat(4, 1fr);
    }
}
.case-study-spotlight {
    padding: 2rem;
}

/* Decorative wavy background element */
.case-study-spotlight::before {
    content: '';
    position: absolute;
    width: 33.25rem;
    height: 100%;
    top: auto;
    bottom: 0;
    right: 0;
    background: url('assets/images/svg/vector-line.svg') no-repeat right bottom;
    background-size: cover;
    pointer-events: none;
    z-index: 0;
}

.case-study-spotlight > * {
    position: relative;
    z-index: 1;
}

@container (min-width: 48rem) {
    .case-study-spotlight::before {
        top: 0;
        bottom: auto;
        background-position: right center;
    }
}
.expert-tips-box {
    padding: 2rem;
}

.expert-tips-box::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12.5rem;
    height: 12.3125rem;
    background-image: none;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

#ai-collective-intelligent-answers {
    margin: 0;
}

@container (min-width: 48rem) {
    .expert-tips-box::after {
        width: 24.9375rem;
        height: 24.625rem;
        opacity: 1;
    }
}
.news-citation__logo img {
    max-height: clamp(2rem, 1vw + 1.75rem, 2.5rem);
    width: auto;
    opacity: 0.7;
    filter: grayscale(100%);
    transition: opacity 0.2s ease, filter 0.2s ease;
}
.news-citation__logo:hover img {
    opacity: 1;
    filter: grayscale(0%);
}
*:focus {
    outline: none;
}

/* Single slots — unset WP flow-layout margin on details card inside grid */
.single-slots .is-layout-flow > * {
    margin-block-start: 0;
}
.show-sticky-cta {
    margin-block-start: 0 !important;
    padding: 0 !important;
}

/* Offset anchor scroll to account for sticky header */
:where(h1, h2, h3, h4, h5, h6)[id] {
    scroll-margin-top: 5rem;
}

/* Safari fix — single-guide "Latest Guides" cards were growing on scroll
   in iOS/macOS Safari because `min-height: 100%` was inline-styled on
   each post-template grid item, and Safari recalculates these as the
   sticky header retracts. Pin the cards to a content-driven minimum so
   the grid stops reflowing on scroll. Scoped to Latest Guides via the
   adjacent #h-latest-guides anchor to avoid touching other queries. */
#h-latest-guides ~ .wp-block-query .wp-block-post-template > * {
    min-height: 0 !important;
}

/* Cookie Notice plugin — replace its default orange button background with
   the theme's primary red so the "Ok" / "Privacy policy" buttons match the
   rest of the site on every breakpoint (the plugin's settings still write
   the orange via inline style, hence !important). */
#cookie-notice .cn-button.cn-set-cookie,
#cookie-notice .cn-button.cn-more-info {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--white) !important;
}
#cookie-notice .cn-button.cn-set-cookie:hover,
#cookie-notice .cn-button.cn-more-info:hover {
    background-color: var(--wp--preset--color--accent-red-2, var(--wp--preset--color--primary)) !important;
}

/* Sticky footer on short templates — a search with one result (or none) or
   a 404 left the footer floating mid-screen with bare page below it. Grow
   <main> so the footer sits on the bottom of the viewport. The 4rem is the
   body offset for the fixed header (shared-styles/header.css).
   Scoped to search + 404 on purpose: as a global rule the flex column
   shrank the takeover-capped quick-links bar on reviews (auto margins size a
   flex item to its content, 1220px -> 596px) and un-collapsed margins pushed
   the footer 16-24px, measured 2026-09-15. Both templates are just
   header / main / footer, so nothing else here moves. */
body:is(.search, .error404) .wp-site-blocks {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 4rem - var(--wp-admin--admin-bar--height, 0px));
    min-height: calc(100svh - 4rem - var(--wp-admin--admin-bar--height, 0px));
}
body:is(.search, .error404) .wp-site-blocks > main {
    flex-grow: 1;
}