/*
Theme Name: Betty Spinner's Circle
Theme URI: https://tjliebgott.com
Author: TJ Liebgott
Author URI: https://tjliebgott.com
Description: A custom child theme for Betty Spinners Circle
Template: Betty Blog
Version: 1.048
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: betty-blog
*/

/* =========================================
   SECTION 1: TOKENS, TYPE, GLOBAL COLOR,
              NAV TEXT, FOOTER, OVERRIDES
   ========================================= */

/* TOKENS */
:root {

    /* Widths */
    --container-max: 1280px;
    --container-pad: 16px;
    --container-post: 955px;

    /* Fonts and weights */
    --font-inter: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-dm: "DM Serif Text", Georgia, "Times New Roman", serif;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    /* Colors */


    --bg-screen: #121212;
    --bg-fill-primary-default: #191919;
    --bg-default: rgba(0, 0, 0, 0.97);

    --surface-primary: #191919;

    --text-onDark-primary: #ffffff;
    --text-onDark-secondary: #a0a0a0;
    --text-onDark-disabled: #6e6e6e;

    --text-onAccent-primary: #000000;
    --text-onAccent-secondary: rgba(10, 10, 10, 0.77);
    --text-hover: rgba(253, 253, 253, 0.8);

    --border-secondary: #2a2a2a;
    --border-primary-default: #121212;

    --accent: #ffc700;
    --accent-disabled: rgba(255, 199, 0, 0.36);
    --bg-fill-secondary-hover: rgba(0, 0, 0, 0.36);

    --gradient-richness-overlay: linear-gradient(rgba(0, 0, 0, 0.06),
            rgba(0, 0, 0, 0.06));

    --text-gradient-gold: linear-gradient(92.43deg,
            #f6dc8f 8%,
            #ffc700 88.31%,
            #ffe27b 104.38%);

    --text-onDark-accent: var(--text-gradient-gold);
    --link: var(--text-gradient-gold);
    --accent-hover: var(--text-gradient-gold);

    --gradients-global-Gold-A:
        var(--gradient-richness-overlay),
        linear-gradient(127deg, #ffea9b 5.3%, #ffc400 80.94%, #ffe168 94.7%);

    --bg-fill-accent-default:
        var(--gradient-richness-overlay),
        linear-gradient(127deg, #ffea9b 5.3%, #ffc400 80.94%, #ffe168 94.7%);

    --bg-fill-accent-hover:
        var(--gradient-richness-overlay),
        linear-gradient(134deg, #ffc700 13.02%, #ffe27b 77.97%);
    --border-accent:
        var(--gradient-richness-overlay),
        linear-gradient(127deg, #ffea9b 5.3%, #ffc400 80.94%, #ffe168 94.7%),
        linear-gradient(127deg,
            color(display-p3 1.000 0.922 0.647) 5.3%,
            color(display-p3 1.000 0.780 0.000) 80.94%,
            color(display-p3 1.000 0.886 0.482) 94.7%);

    --bg-fill-status-attention:
        var(--gradient-richness-overlay),
        linear-gradient(45deg, #ed0000 0%, #ffc400 100%),
        linear-gradient(45deg,
            color(display-p3 0.851 0.102 0.047) 0%,
            color(display-p3 1.000 0.780 0.000) 100%);

    --gradient-global-citrus:
        var(--gradient-richness-overlay),
        linear-gradient(90deg, #ffc400 0%, #ffe168 50%, #00edb3 100%),
        linear-gradient(90deg,
            color(display-p3 1.000 0.780 0.000) 0%,
            color(display-p3 1.000 0.886 0.482) 50%,
            color(display-p3 0.114 0.914 0.714) 100%);



    /* Icons */

    --svg-chevron-right: url("img/chevron_right.svg");
    --svg-search: url("img/search.svg");
    --svg-search-mobile: url("img/search-mobile.svg");
    --svg-menu: url("img/menu.svg");
    --svg-arrow-forward: url("img/arrow_forward.svg");
    /* Icon sizes */
    --svg-icon-md: 20px;

    /* Spacing */
    --space-0: 0px;
    --space-100: 4px;
    --space-200: 8px;
    --space-300: 12px;
    --space-400: 16px;
    --space-500: 20px;
    --space-600: 24px;
    --space-800: 32px;
    --space-1000: 40px;
    --space-1200: 48px;
    --space-1400: 56px;
    --space-1600: 64px;
    --space-1800: 72px;
    --space-2000: 80px;

    /* BORDER WIDTH TOKENS */
    --border-width-025: 0.25px;
    --border-width-050: 0.5px;
    --border-width-075: 0.75px;
    --border-width-100: 1px;
    --border-width-150: 1.5px;
    --border-width-200: 2px;
    --border-width-300: 3px;
    --border-width-400: 4px;

    /* Radius */
    --border-radius-0: 0px;
    --border-radius-025: 1px;
    --border-radius-050: 2px;
    --border-radius-100: 4px;
    --border-radius-200: 8px;
    --border-radius-300: 12px;
    --border-radius-400: 16px;
    --border-radius-600: 24px;
    --border-radius-1200: 48px;
    --border-radius-full: 9999px;

    --border-radius-button: var(--border-radius-200);
    --border-radius-card: var(--border-radius-400);

    --contrast: var(--text-onDark-primary);
    --contrast-2: var(--text-onDark-secondary);
    --contrast-3: var(--text-onDark-disabled);
    --base-3: var(--surface-primary);

    /* TYPE SCALE TOKENS mobile first */
    --body-sm-font-size: 0.875rem;
    --body-sm-line-height: 1rem;
    --body-md-font-size: 1rem;
    --body-md-line-height: 1.25;
    --body-lg-font-size: 1.25rem;
    --body-lg-line-height: 1.5rem;

    --heading-2xl-font-size: 2rem;
    --heading-2xl-line-height: 2rem;
    --heading-xl-font-size: 3rem;
    --heading-xl-line-height: 1.25;
    --heading-lg-font-size: 2.5rem;
    --heading-lg-line-height: 3rem;
    --heading-md-font-size: 2rem;
    --heading-md-line-height: 1.25;
    --heading-sm-font-size: 1.5rem;
    --heading-sm-line-height: 1.15;
    --heading-xs-font-size: 1rem;
    --heading-xs-line-height: 1.25;

    /* TYPE MIXINS (font shorthand) */
    --body-sm: normal normal var(--fw-regular) normal var(--body-sm-font-size)/var(--body-sm-line-height) var(--font-inter);
    --body-md: normal normal var(--fw-regular) normal var(--body-md-font-size)/var(--body-md-line-height) var(--font-inter);
    --body-lg: normal normal var(--fw-regular) normal var(--body-lg-font-size)/var(--body-lg-line-height) var(--font-inter);

    --body-sm-semibold: normal normal var(--fw-semibold) normal var(--body-sm-font-size)/var(--body-sm-line-height) var(--font-inter);
    --body-md-semibold: normal normal var(--fw-semibold) normal var(--body-md-font-size)/var(--body-md-line-height) var(--font-inter);
    --body-lg-semibold: normal normal var(--fw-semibold) normal var(--body-lg-font-size)/var(--body-lg-line-height) var(--font-inter);

    --heading-2xl: normal normal 400 normal var(--heading-2xl-font-size)/var(--heading-2xl-line-height) var(--font-dm);
    --heading-xl: normal normal 400 normal var(--heading-xl-font-size)/var(--heading-xl-line-height) var(--font-dm);
    --heading-lg: normal normal 400 normal var(--heading-lg-font-size)/var(--heading-lg-line-height) var(--font-dm);
    --heading-md: normal normal 400 normal var(--heading-md-font-size)/var(--heading-md-line-height) var(--font-dm);
    --heading-sm: normal normal 400 normal var(--heading-sm-font-size)/var(--heading-sm-line-height) var(--font-dm);
    --heading-xs: normal normal 400 normal var(--heading-xs-font-size)/var(--heading-xs-line-height) var(--font-dm);

    /* SPECIAL TYPE MIXINS */
    --overline: normal normal 500 normal 0.875rem/1.15 var(--font-inter);
    --overline-letter-spacing: 0.1875rem;
    --overline-text-transform: uppercase;
    --callout: normal normal 400 normal 0.875rem/1.15 var(--font-inter);
    --caption: normal normal 400 normal 0.75rem/1.3 var(--font-inter);
    --caption-semibold: normal normal 600 normal 0.75rem/1.3 var(--font-inter);
    --nav-label: normal normal 500 normal 0.875rem/1rem var(--font-inter);
    --badge: normal normal 500 normal 0.625rem/1.2 var(--font-inter);

    /* Buttons and form utilities */
    --button-lg: normal normal 500 normal 1rem/1 var(--font-inter);
    --button-sm: normal normal 500 normal 0.875rem/1.15 var(--font-inter);
    --jackpot-lg: normal normal 400 normal 1rem/1 var(--font-inter);
    --jackpot-sm: normal normal 400 normal 0.75rem/1 var(--font-inter);
    --input-label: normal normal 500 normal 0.75rem/1 var(--font-inter);
    --input-text: normal normal 400 normal 1rem/1.25 var(--font-inter);
    --input-filled: normal normal 600 normal 1rem/1.25 var(--font-inter);
    --icon-betty-arrow: url("../betty-blog/img/arrow.png");
    --icon-betty--black: url("../betty-blog/img/arrow-black.png");

    /* Link utilities (used only when opt-in via class) */
    --link-sm: normal normal var(--fw-medium) normal var(--body-sm-font-size)/var(--body-sm-line-height) var(--font-inter);
    --link-md: normal normal var(--fw-medium) normal var(--body-md-font-size)/var(--body-md-line-height) var(--font-inter);
    --link-lg: normal normal var(--fw-medium) normal var(--body-lg-font-size)/var(--body-lg-line-height) var(--font-inter);

    /* Pill */
    --pill-radius: var(--border-radius-full);
    --pill-padding-y: var(--space-100);
    --pill-padding-x: var(--space-200);
    --pill-border-width: var(--border-width-025);
    --pill-border-style: solid;
    --pill-border-source: var(--border-accent);
    --pill-font: var(--input-label);
    /* Gap */
    --betty-gap: var(--space-800);
}


/* Desktop overrides */
@media (min-width: 768px) {
    :root {
        --body-sm-font-size: .875rem;
        --body-sm-line-height: 1.3;
        --body-md-font-size: 1rem;
        --body-md-line-height: 1.3;
        --body-lg-font-size: 1.25rem;
        --body-lg-line-height: 1.3;

        --heading-2xl-font-size: 3rem;
        --heading-2xl-line-height: 1.25;
        --heading-xl-font-size: 2.5rem;
        --heading-xl-line-height: 1.25;
        --heading-lg-font-size: 2rem;
        --heading-lg-line-height: 1.25;
        --heading-md-font-size: 1.375rem;
        --heading-md-line-height: 1.25;
        --heading-sm-font-size: 1.25rem;
        --heading-sm-line-height: 1.25;
        --heading-xs-font-size: 1.15rem;
        --heading-xs-line-height: 1.15;
    }
}

/* Container padding switch (keeps 768px in "mobile") */
@media (min-width: 769px) {
    :root {
        --container-pad: 40px;
    }
}

/* BASE */
html {
    font-size: 100%;
}

body {
    font: var(--body-md);
    color: var(--text-onDark-primary);
    background-color: var(--bg-screen);
}

/* Default links: inherit body size (no explicit link size unless opted-in) */
a {
    font: inherit;
    line-height: inherit;
    text-decoration: none;
}

.site,
.site-content {
    background-color: var(--bg-screen);
    color: var(--text-onDark-primary);
}

.site-header {
    background-color: var(--bg-screen);
    color: var(--text-onDark-primary);
}

.top-bar {
    background-color: var(--bg-screen);
}

/* HEADINGS */
.heading-2xl,
h1 {
    font: var(--heading-2xl);
    letter-spacing: -0.03125rem;
}

.heading-xl,
h2 {
    font: var(--heading-xl);
    letter-spacing: -0.03125rem;
}

.heading-lg,
h3 {
    font: var(--heading-lg);
    letter-spacing: -0.03125rem;
}

.heading-md,
h4 {
    font: var(--heading-md);
    letter-spacing: -0.0125rem;
}

.heading-sm,
h5 {
    font: var(--heading-sm);
    letter-spacing: -0.0125rem;
}

.heading-xs,
h6 {
    font: var(--heading-xs);
    letter-spacing: 0;
}

/* BODY UTILITIES (base) */
.body-sm {
    font: var(--body-sm);
}

.body-md {
    font: var(--body-md);
}

.body-lg {
    font: var(--body-lg);
}

.body-sm-semibold {
    font: var(--body-sm-semibold);
}

.body-md-semibold {
    font: var(--body-md-semibold);
}

.body-lg-semibold {
    font: var(--body-lg-semibold);
}

/* BODY UTILITIES cascade helpers (no 'a' here) */
.body-sm :where(p, ul, ol, li, blockquote, figcaption, dd, dt, label, summary, small, code, pre, span) {
    font: inherit;
    line-height: inherit;
}

.body-md :where(p, ul, ol, li, blockquote, figcaption, dd, dt, label, summary, small, code, pre, span) {
    font: inherit;
    line-height: inherit;
}

.body-lg :where(p, ul, ol, li, blockquote, figcaption, dd, dt, label, summary, small, code, pre, span) {
    font: inherit;
    line-height: inherit;
}

/* Optional attribute-form wrappers */
[data-body="sm"] :where(p, ul, ol, li, blockquote, figcaption, dd, dt, label, summary, small, code, pre, span),
[data-body="sm"] {
    font: var(--body-sm);
    line-height: var(--body-sm-line-height);
}

[data-body="md"] :where(p, ul, ol, li, blockquote, figcaption, dd, dt, label, summary, small, code, pre, span),
[data-body="md"] {
    font: var(--body-md);
    line-height: var(--body-md-line-height);
}

[data-body="lg"] :where(p, ul, ol, li, blockquote, figcaption, dd, dt, label, summary, small, code, pre, span),
[data-body="lg"] {
    font: var(--body-lg);
    line-height: var(--body-lg-line-height);
}

/* HEADINGS WRAPPERS (utility) */
.heading-2xl :is(h1, h2, h3, h4, h5, h6),
[data-heading="2xl"] :is(h1, h2, h3, h4, h5, h6) {
    font: var(--heading-2xl);
    letter-spacing: -0.03125rem;
}

.heading-xl :is(h1, h2, h3, h4, h5, h6),
[data-heading="xl"] :is(h1, h2, h3, h4, h5, h6) {
    font: var(--heading-xl);
    letter-spacing: -0.03125rem;
}

.heading-lg :is(h1, h2, h3, h4, h5, h6),
[data-heading="lg"] :is(h1, h2, h3, h4, h5, h6) {
    font: var(--heading-lg);
    letter-spacing: -0.03125rem;
}

.heading-md :is(h1, h2, h3, h4, h5, h6),
[data-heading="md"] :is(h1, h2, h3, h4, h5, h6) {
    font: var(--heading-md);
    letter-spacing: -0.0125rem;
}

.heading-sm :is(h1, h2, h3, h4, h5, h6),
[data-heading="sm"] :is(h1, h2, h3, h4, h5, h6) {
    font: var(--heading-sm);
    letter-spacing: -0.0125rem;
}

.heading-xs :is(h1, h2, h3, h4, h5, h6),
[data-heading="xs"] :is(h1, h2, h3, h4, h5, h6) {
    font: var(--heading-xs);
    letter-spacing: 0;
}


.betty-gradient-heading {
    margin: 0 0 var(--space-800);
    text-decoration: none;
}

.betty-gradient-heading a,
.betty-gradient-heading {
    background: var(--text-onDark-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.betty-gradient-heading a:hover {
    background: var(--text-onDark-primary);
    -webkit-background-clip: text;
    background-clip: text;
}

.betty-gradient-heading:hover .title-chevron,
.betty-gradient-heading a:hover .title-chevron {
    background-color: var(--text-onDark-primary);
}


.title-chevron {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-left: 0.25em;
    vertical-align: middle;
    transform: translateY(-0.05em);
    opacity: 0.95;

    background-color: var(--accent);

    -webkit-mask-image: var(--svg-chevron-right);
    mask-image: var(--svg-chevron-right);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.title-link-arrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 0.35em;
    text-decoration: none;
}

.news-title-text {
    min-width: 0;
}

.title-arrow {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    opacity: 0.95;
    margin-left: 0.25em;
    margin-bottom: 0.15em;
    vertical-align: middle;

    background-color: currentColor;
    -webkit-mask-image: var(--svg-arrow-forward);
    mask-image: var(--svg-arrow-forward);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Keep last word + arrow stuck together on desktop */
.title-arrow-group {
    white-space: nowrap;
}

/* Mobile: clamp + pseudo arrow after ellipsis */
@media (max-width: 768px) {

    .title-link-arrow {
        display: block;
    }

    /* Clamp the main title text */
    .title-clamp {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;

        position: relative;

        /* reserve space for the ::after arrow */
        padding-right: 1.4em;
    }

    /* Pseudo arrow pinned to end of the clamp */
    .title-clamp::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0.15em;

        width: 0.9em;
        height: 0.9em;
        opacity: 0.95;

        background-color: currentColor;
        -webkit-mask-image: var(--svg-arrow-forward);
        mask-image: var(--svg-arrow-forward);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .title-arrow {
        display: none;
    }
}



/* NAVIGATION (allowed to size its own links) */
.main-navigation a,
.main-navigation a:visited,
.menu a,
.menu-item a {
    font: var(--body-sm);
}

/* SPECIAL TYPE */
.overline {
    font: var(--overline);
    text-transform: var(--overline-text-transform);
    letter-spacing: var(--overline-letter-spacing);
}

.callout {
    font: var(--callout);
    letter-spacing: 0.1875rem;
}

.caption {
    font: var(--caption);
}

.caption-semibold {
    font: var(--caption-semibold);
}

.nav-label {
    font: var(--nav-label);
}

.badge {
    font: var(--badge);
}

.betty-arrow {
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius-200);
    background-color: var(--bg-fill-secondary-hover);
    background-image: var(--icon-betty-arrow);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    cursor: pointer;
}

.betty-arrow-left {
    transform: translateY(-50%) rotate(180deg) !important;
    margin-left: -35px !important;
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius-200);
    background-color: var(--bg-fill-secondary-hover);
    background-image: var(--icon-betty-arrow);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    cursor: pointer;
}

.betty-arrow-black {
    height: 20px;
    width: 20px;
    z-index: 10;
    background-image: var(--icon-betty--black);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.text-gradient-gold-a {
    background: var(--gradients-global-Gold-A);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.text-gradient-citrus {
    background: var(--gradient-global-citrus);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.text-gradient-ondark-accent {
    background: var(--text-onDark-accent);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.betty-pill {
     display: inline-flex !important;
     flex-wrap: wrap;
    width: fit-content;
    align-content: center;
    border-radius: var(--border-radius-full);
    padding: var(--space-100) var(--space-300);
    border: var(--border-width-100) solid var(--accent);
    font: var(--input-label);
    background: transparent;
    color: var(--accent) !important;
    min-height: 26px;
    
}

.betty-btn {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-600) var(--space-800);
    min-height: var(--space-1400);
    border-radius: var(--border-radius-200);
    background: var(--bg-fill-accent-default);
    color: var(--text-onAccent-primary);
    font: var(--button-lg);
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.08em;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}

.betty-btn:hover {
 background: var(--bg-fill-accent-hover);
    color: initial;
}
.betty-btn:active,
.betty-btn:focus {
    color: var(--text-onAccent-primary);
}
/* LINK SIZE UTILITIES opt-in only */
a.link-lg,
.link-size-lg a {
    font: var(--link-lg);
}

a.link-md,
.link-size-md a {
    font: var(--link-md);
}

a.link-sm,
.link-size-sm a {
    font: var(--link-sm);
}

/* BLOCK COLOR ALIASES */
.has-bg-screen-background-color {
    background-color: var(--bg-screen) !important;
}

.has-surface-primary-background-color {
    background-color: var(--surface-primary) !important;
}

.has-text-onDark-primary-color {
    color: var(--text-onDark-primary) !important;
}

.has-text-onDark-secondary-color {
    color: var(--text-onDark-secondary) !important;
}

.has-text-hover-color {
    color: var(--text-hover) !important;
}

.has-text-onDark-disabled-color {
    color: var(--text-onDark-disabled) !important;
}

.has-border-secondary-border-color {
    border-color: var(--border-secondary) !important;
}

.has-text-onDark-accent-color,
.has-link-color {
    background-image: var(--link) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.has-accent-hover-color {
    background-image: var(--accent-hover) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

@media (max-width: 768px) {
    .heading-title {
        font: var(--heading-md);
    }
}

/* RESPONSIVE heading tweak for blog/archive/search */
@media (min-width: 768px) {

    .blog .entry-title,
    .archive .entry-title,
    .search .entry-title,
    .entry-title a {
        font: var(--heading-xl);
        letter-spacing: -0.03125rem;
    }
}

/* ============================
   GLOBAL CONTAINER GUTTERS
   ============================ */
.header-inner,
.betty-home-featured__inner,
.hero-feature__inner,
.games-container,
.game-reviews_inner,
.news-container,
.home-lifestyle__inner,
.betty-promo-banner__inner,
.betty-related,
.homepage-square-banner,
.betty-instagram-block {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    box-sizing: border-box;
}

/* ============================
   BETTY HEADER LAYOUT - DESKTOP
   ============================ */

.custom-header {
    background: var(--bg-screen);
}

.header-top-wrap {
    width: 100%;
}

.header-inner {
    padding-bottom: var(--space-400);
}

/* ROW 1: logos + CTAs */
.header-top-wrap .header-top {
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--space-400);
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-600);
}

/* ROW 2: title */
.header-titlebar {
    text-align: center;
    margin: var(--space-800) 0 var(--space-600);
}

.spinners-title {
    background: var(--gradients-global-Gold-A);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-500);
    position: relative;
}

.igaming-wrap {
    position: relative;
    padding-left: var(--space-500);
}

.igaming-wrap::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--border-width-100);
    height: 28px;
    background-color: var(--border-secondary);
}

.betty-logo {
    height: 28px;
}

.igaming-logo {
    height: 24px;
}

.header-cta {
    display: flex;
    align-items: center;
    gap: var(--space-300);
}

.btn-login {
    padding: var(--space-200) var(--space-500);
    background: var(--surface-primary);
    border: var(--border-width-100) solid;
    border-radius: var(--border-radius-button);
    border-image-source: var(--border-accent);
    border-image-slice: 1;
    text-decoration: none;
    font: var(--button-sm);
}

.btn-join {
    padding: 0 var(--space-300);
    min-width: 192px;
    height: 40px;
    place-content: center;
    text-align-last: center;
    font: var(--button-sm);
    color: var(--text-onAccent-primary);
    text-decoration: none;
    background: var(--bg-fill-accent-default);
    border-radius: var(--border-radius-button);
}

.btn-join:hover {
    background: var(--bg-fill-accent-hover);
    color: initial;
}

.btn-join:active,
.btn-join:focus {
    color: var(--text-onAccent-primary);
}

/* ROW 3: nav + search */
.header-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-400);
}

/* Nav list */
.header-nav {
    flex: 0 1 auto;
}

.header-nav .nav-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-500);
    margin: 0;
    padding: 0;
}

.main-navigation .main-nav ul li a {
    line-height: 20px;
    padding: var(--space-200) var(--space-300);
}

/* Search pill with icon and text inside */
.header-search {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    background: var(--bg-default);
    border-radius: var(--border-radius-full);
    padding: var(--space-200) calc(var(--space-400) - var(--space-100));
    max-width: 158px;
    border: none;
}

.header-search .search-icon {
    color: var(--text-onDark-primary);
    margin-right: var(--space-200);
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-right: 4px;

}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select,
.search-input {
    background: transparent;
    border: none;
    color: var(--text-onDark-primary);
    padding: 0;
    font: var(--body-sm);
    flex: 1;
}

.search-input::placeholder {
    color: var(--text-onDark-primary);
    opacity: 0.7;
}

.search-input:focus {
    outline: none;
}

.search-input {
    background: transparent;
    border: none;
    color: var(--text-onDark-primary);
    padding: var(--space-100) var(--space-200);
    font: var(--body-sm);
    flex: 1;
}

.search-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-onDark-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.custom-header .main-navigation {
    background: transparent;
}

.custom-header .inside-navigation {
    padding: 0;
}

/* GP menu links */
.custom-header .main-navigation a {
    color: var(--text-onDark-primary) !important;
    text-decoration: none;
    padding: var(--space-200) calc(var(--space-400) - var(--space-100));
    border-radius: var(--border-radius-1200);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font: var(--nav-label);
    border: var(--border-width-100) solid transparent;
    border-image-source: var(--border-accent);
    border-image-slice: 1;
    box-sizing: border-box;
}


/* Active + hover */
.custom-header .main-navigation .current-menu-item>a,
.custom-header .main-navigation a:hover {
    border-color: var(--accent);
    border-image-source: var(--border-accent);
    border-image-slice: 1;
}

.custom-header .main-navigation .current-menu-item>a {
    color: var(--text-onDark-primary);
}

/* GP mobile toggle button colour */
.custom-header .menu-toggle {
    color: var(--text-onDark-primary);
}

/* Optional: keep things centred like your header-bottom */
.custom-header .main-navigation .inside-navigation {
    justify-content: center;
}

/* Mobile/Hamburger controls (hidden on desktop) */
.custom-header .menu-toggle,
.custom-header .header-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius-button);
    background: var(--surface-primary);
    color: var(--text-onDark-primary);
    border: var(--border-width-100) solid transparent;
    border-image-source: var(--border-accent);
    border-image-slice: 1;
    cursor: pointer;
    padding: 0;
}



/* ============================
   SEARCH MODAL
   ============================ */
input[type="search"]:focus {
    background-color: unset;
}

.header-search-modal {
    display: none;
}

.header-search-modal.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.header-search-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--bg-fill-secondary-hover);
}

.header-search-modal__panel {
    position: relative;
    width: min(720px, calc(100% - (var(--container-pad) * 2)));
    margin: var(--space-800) auto 0;
    padding: var(--space-400);
    border-radius: var(--border-radius-card);
    background: var(--bg-fill-primary-default);
    border: var(--border-width-100) solid transparent;
    border-image-source: var(--border-accent);
    border-image-slice: 1;
    box-sizing: border-box;
}

.header-search-modal__form {
    display: flex;
    align-items: center;
    gap: var(--space-300);
}

.header-search-modal__icon {
    color: var(--text-onDark-primary);
}

.header-search-modal__input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-onDark-primary);
    font: var(--body-md);
    outline: none;
    padding: var(--space-200) 0;
}

/* Keep original button styling */
.header-search-modal__close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-200);
    border-radius: var(--border-radius-button);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Solid gold X */
.header-search-modal__close-x {
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
    color: var(--accent);
}


/* ============================
   DESKTOP ONLY STYLES
   ============================ */
@media (min-width: 769px) {
    .custom-header .header-search-toggle {
        display: none;
    }

    .custom-header .menu-toggle {
        display: none !important;
    }

    .header-mobile-controls {
        display: none;
    }

    /* ----------------------------------
       DESKTOP LAYOUT FIX (ONLY CHANGE)
       Title left, nav+search right, same row
       ---------------------------------- */

    .header-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "top top"
            "title bottom";
        align-items: center;
        column-gap: var(--space-600);
    }

    .header-top {
        grid-area: top;
    }

    .header-titlebar {
        grid-area: title;
        text-align: left;
        margin: var(--space-800) 0 var(--space-600);
        max-width: 230px;
    }

    .header-bottom {
        grid-area: bottom;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: nowrap;
    }

    /* This was centring the nav even on desktop, so override it only on desktop */
    .custom-header .main-navigation .inside-navigation {
        justify-content: flex-end;
    }
}

/* ============================
   MOBILE STYLES
   ============================ */
@media (max-width: 768px) {
    .header-inner {
        padding-top: var(--space-400);
        padding-bottom: var(--space-400);
    }

    .header-top {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-300);
    }

    .header-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-300);
        min-width: 0;
        flex: 1 1 auto;
    }

    .igaming-wrap {
        padding-left: var(--space-300);
        flex: 0 0 auto;
    }

    .betty-logo {
        height: 32px;
        width: auto;
        display: block;
    }

    .igaming-logo {
        height: 24px;
        width: auto;
        display: block;
    }

    .spinners-logo {
        vertical-align: middle;
    }

    .header-cta {
        width: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
        padding-bottom: 0;
        flex: 0 0 auto;
    }

    .header-cta .btn-join {
        width: auto;
        white-space: nowrap;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-join {
        min-width: auto;
        padding: var(--space-200) var(--space-400);
    }

    .header-titlebar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-400);
        margin: var(--space-600) 0 !important;
        text-align: left;
    }

    .header-titlebar h1 {
        margin: 0;
        line-height: 1;
        flex: 1;
    }

    .header-mobile-controls {
        display: inline-flex;
        align-items: center;
        gap: var(--space-300);
        flex: 0 0 auto;
    }

    .header-mobile-controls .header-search-toggle,
    .header-mobile-controls .header-menu-toggle,
    .header-mobile-controls button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--border-radius-button);
        background: var(--surface-primary);
        cursor: pointer;
        padding: 0;
        border: var(--border-width-100) solid transparent;
        background:
            linear-gradient(var(--surface-primary), var(--surface-primary)) padding-box,
            var(--border-accent) border-box;
    }

    .header-bottom {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }

    .header-search {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .header-search .search-input {
        min-width: 0;
        /* key for flex overflow */
        width: 100%;
    }

    .header-nav .nav-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: var(--space-300);
        padding: var(--space-100) 0;
    }

    .header-nav .nav-list::-webkit-scrollbar {
        display: none;
    }

    .header-nav .nav-list>li {
        flex: 0 0 auto;
    }

    .header-search {
        display: none !important;
    }

    .custom-header .menu-toggle {
        display: none !important;
    }

    .custom-header .inside-navigation {
        display: flex;
        align-items: center;
        gap: var(--space-300);
    }

    .custom-header .navigation-branding {
        margin-left: auto;
    }

    .custom-header .main-navigation {
        position: relative;
        z-index: 9999;
        background: transparent;
    }

    .custom-header .inside-navigation-grid-container,
    .custom-header .inside-navigation {
        position: relative;
    }

    .custom-header .main-navigation .main-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 9999;
        background: var(--bg-screen);
        margin-top: var(--space-300);
    }

    .custom-header .main-navigation .main-nav ul {
        margin: 0;
        padding: 0;
    }

}

@media (min-width: 844px) and (max-width: 1049px) {

    .header-inner {
        grid-template-columns: minmax(120px, 1fr) auto;
    }

    .header-titlebar {
        min-width: 0;
    }

    .spinners-logo {
        margin-top: 8px;
        max-width: 120px;
        width: 100%;
        height: auto;
        display: block;
    }
}

/* ============================
   Global Site Fixes
   ============================ */
.separate-containers .site-main {
    margin: var(--space-0);
}

.news-img-wrap {
    aspect-ratio: 1200 / 534;
    width: 100%;
    overflow: hidden;
    border-radius: var(--border-radius-400);
}

/* ============================
   HOME FEATURED (1 big + 3 side)
   ============================ */

.betty-home-featured {
    padding-top: var(--space-400);
}

.betty-home-featured__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--betty-gap);

    /* NEW: keep both columns equal height */
    align-items: stretch;
}

.betty-featured-card--big {
    padding: var(--space-600);
}

.betty-home-featured__side {
    display: grid;
    gap: var(--betty-gap);

    /* NEW: ensure sidebar column stretches */
    align-self: stretch;
}

.betty-home-featured__main {
    /* NEW: ensure main column stretches */
    align-self: stretch;
}

.betty-home-featured__main .betty-featured-card {
    padding: var(--space-400);
}

.betty-featured-card {
    background: var(--bg-fill-primary-default);
    border-radius: var(--border-radius-400);
    overflow: hidden;
}

.betty-featured-card__link {
    display: grid;
    grid-template-columns: 1fr;
    text-decoration: none;
    color: inherit;
}

.betty-featured-card__media {
    width: 100%;
}

.betty-featured-card__img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* Big card */
.betty-featured-card--big .betty-featured-card__img {
    aspect-ratio: 21 / 9;
    border-radius: var(--space-400);
}

.betty-featured-card__body {
    padding-top: var(--space-600);
}

.betty-featured-card__title {

    margin: var(--space-300) 0;
}

a.betty-featured-card:hover .betty-featured-card__title {
    color: var(--accent);
    text-decoration: underline;
}

.betty-featured-card:not(.betty-featured-card--h1):hover .betty-featured-card__title {
    color: var(--accent);
    text-decoration: underline;
}


.betty-featured-card__meta {
    display: flex;
    gap: 10px;
    align-items: center;
}

.betty-featured-card__dot {
    opacity: 0.7;
}

.betty-featured-card__excerpt {
    margin: 12px 0 0;
}

.betty-featured-card__excerpt p {
    margin-bottom: 0px;
}

/* NEW: Make the big card fill the full left column height */
.betty-home-featured__main .betty-featured-card--big {
    height: 100%;
}

.betty-home-featured__main .betty-featured-card--big .betty-featured-card__link {
    height: 100%;

    /* media grows to fill extra height, body stays at bottom */
    grid-template-rows: 1fr auto;
}

.betty-home-featured__main .betty-featured-card--big .betty-featured-card__media {
    height: 100%;
}

.betty-home-featured__main .betty-featured-card--big .betty-featured-card__img {
    height: 100%;
}

/* Sidebar cards */
.betty-featured-card--side {
    padding: var(--space-400);
    box-sizing: border-box;
}

.betty-featured-card--side .betty-featured-card__link {
        width: 100%;
    grid-template-columns: clamp(180px, 22vw, 234px) 1fr;
    gap: var(--space-600);
    align-items: center;
    height: 100%;
}

.betty-featured-card--side .betty-featured-card__media {
    width: 100%;
    height: auto;
}

.betty-featured-card--side .betty-featured-card__img {
    aspect-ratio: 21 / 9;
    width: 100%;
    height: auto;
    border-radius: var(--space-400);
}

.betty-featured-card--side .betty-featured-card__body {
    padding: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .betty-home-featured__inner {
        grid-template-columns: 1fr;
    }

    .betty-featured-card--side .betty-featured-card__link {
        grid-template-columns: 110px 1fr;
    }

    /* NEW: don't force equal-height behaviour once it becomes 1 column */
    .betty-home-featured__main .betty-featured-card--big,
    .betty-home-featured__main .betty-featured-card--big .betty-featured-card__link,
    .betty-home-featured__main .betty-featured-card--big .betty-featured-card__media,
    .betty-home-featured__main .betty-featured-card--big .betty-featured-card__img {
        height: auto;
    }

    .betty-home-featured__main .betty-featured-card--big .betty-featured-card__link {
        grid-template-rows: initial;
    }
}

@media (max-width: 678px) {

    /* Slider track */
    .betty-home-featured__inner {
        display: flex;
        gap: var(--space-600);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--space-400);
        padding-left: var(--space-400);
        padding-right: var(--space-400);
    }

    /* Flatten wrappers so cards are slides */
    .betty-home-featured__main,
    .betty-home-featured__side {
        display: contents;
    }

    /* Each card = slide, match Games width */
    .betty-featured-card {
        flex: 0 0 auto;
        width: min(300px, 85vw);
        scroll-snap-align: start;
    }

    .betty-featured-card__title {
        font: var(--heading-sm);
    }

    .betty-featured-card__excerpt p {
        display: none;
    }

    /* Remove special outer padding differences */
    .betty-featured-card--big {
        padding: 0;
    }

    .betty-featured-card--side {
        padding: var(--space-400);
    }

    /* Side cards: single-column layout, do NOT stretch vertically */
    .betty-featured-card--side .betty-featured-card__link {
        gap: 0;
        grid-template-columns: 1fr;
        height: auto;
        align-items: start;
    }

    /* Make the side cards use the same padding rhythm as the big card */
    .betty-featured-card--side .betty-featured-card__body {
        padding: var(--space-600) 0;
    }

    /* Side image behave like the featured image */
    .betty-featured-card--side .betty-featured-card__img {
        border-radius: var(--space-200);
    }

    /* Consistent media frame */
    .betty-featured-card--side .betty-featured-card__img,
    .betty-featured-card--big .betty-featured-card__img {
        aspect-ratio: 21 / 9;
        object-fit: cover;
    }

    /* Do not force equal-height stretching inside slider (big card) */
    .betty-home-featured__main .betty-featured-card--big,
    .betty-home-featured__main .betty-featured-card--big .betty-featured-card__link,
    .betty-home-featured__main .betty-featured-card--big .betty-featured-card__media,
    .betty-home-featured__main .betty-featured-card--big .betty-featured-card__img {
        height: auto;
    }

    .betty-home-featured__main .betty-featured-card--big .betty-featured-card__link {
        grid-template-rows: initial;
    }

    /* Prevent any media wrapper weirdness from creating extra height */
    .betty-featured-card__media {
        align-self: start;
    }

    .betty-featured-card__media picture,
    .betty-featured-card__media video,
    .betty-featured-card__media img {
        display: block;
    }

    /* Hide scrollbars */
    .betty-home-featured__inner::-webkit-scrollbar {
        display: none;
    }

    .betty-home-featured__inner {
        scrollbar-width: none;
    }
}


/* ============================
   HERO FEATURED POST
   ============================ */
.hero-feature {
    background: var(--bg-screen);
}

.hero-feature__inner {
    margin: 0 auto;
}

/* Big image on top */
.hero-feature__media {
    margin: 0 auto;
    max-width: var(--container-post);
    aspect-ratio: 1200 / 534;
    border-radius: var(--border-radius-400);
}

.hero-feature__image-link {
    display: block;
}

.hero-feature__img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border-radius: var(--border-radius-600);
}

/* Text block UNDER the image */
.hero-feature__content {
    max-width: 980px;
    margin: var(--space-800) auto 0;
}

.hero-feature__kicker {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: var(--space-100) var(--space-300);
    font: var(--body-sm-semibold);
    text-transform: var(--overline-text-transform);
    background: var(--text-onDark-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Meta row below the pill */
.hero-feature__meta {
    font: var(--body-sm);
    padding-top: var(--space-200);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-200);
    color: var(--text-onDark-secondary);
}

.hero-feature__dot {
    opacity: 0.6;
}

/* Title */
.hero-feature__title {
    padding: var(--space-400) 0;
    margin-bottom: var(--space-0);
}

.hero-feature__title a:hover {
    text-decoration: underline;
    color: var(--accent);
}

/* kill global gradient for this title */
.hero-feature__title,
.hero-feature__title a {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--text-onDark-primary);
    text-decoration: none;
    font: var(--heading-xl);
}

/* First paragraph */
.hero-feature__excerpt p {
    margin: 0;
    font: var(--body-lg);
    color: var(--text-onDark-primary);
}

/* Read more text link with arrow */
.hero-feature__read-more {
    display: block;
    align-items: center;
    justify-content: center;
    padding-top: var(--space-400);
    font: var(--button-lg);
    font-weight: 500;
    background: var(--text-onDark-accent);
    -webkit-background-clip: text;
    background-clip: text;
    text-decoration: none;
    text-align: center;
}

.hero-feature__read-more span {
    margin-left: var(--space-100);
}

.hero-feature__read-more .svg-icon {
    vertical-align: middle;
}

.hero-feature__read-more:hover {
    text-decoration: underline;
}


/* Mobile tweaks */
@media (max-width: 768px) {
    .hero-feature {
        margin-top: var(--space-300);
        padding: var(--space-0);
    }

    .hero-feature__content {
        margin-top: var(--space-600);
    }

    .hero-feature__title,
    .hero-feature__title a {
        font: var(--heading-md);
    }

    .hero-feature__excerpt p {
        font: var(--body-sm);
    }

    .hero-feature__read-more {
        margin-top: var(--space-400);
    }

    .hero-feature__read-more .title-arrow {
        display: inline-flex;
    }
}

/* ============================
   Games Section
   ============================ */
.games-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--betty-gap);
}

/* HARD override carousel sizing */
.games-grid .news-card {
    width: 100%;
    max-width: 100%;
    flex: initial;
    flex-shrink: initial;
}

/* Games: mobile becomes swipe rail */
@media (max-width: 768px) {
    .games-track-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--container-pad);
        padding-bottom: var(--space-300);
    }

    .games-track-wrapper::-webkit-scrollbar {
        display: none;
    }

    .games-track-wrapper {
        scrollbar-width: none;
    }

    .games-grid {
        display: flex;
        width: max-content;
        gap: var(--space-600);
    }

    .games-grid .news-card {
        max-width: 300px;
    }

    .games-card {
        flex: 0 0 300px;
        width: 300px;
        max-width: 300px;
        scroll-snap-align: start;
    }

    .games-card,
    .games-card .news-img-wrap,
    .games-card .news-img-wrap img {
        width: 300px;
        max-width: 300px;
    }

    .games-card .news-img-wrap img {
        display: block;
        object-fit: cover;
    }
}

/* ============================
   GAME REVIEWS SECTION
   ============================ */
.game-reviews {
    margin-top: var(--space-2000);
}

.game-reviews_inner {
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0;
}

/*
.game-reviews_heading {
    margin: 0 0 var(--space-800);
    background: var(--text-onDark-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
*/
/* GRID */
.game-reviews_grid {
    display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--betty-gap);
}

.game-reviews_grid>* {
    grid-column: span 1;
    grid-row: span 1;
}

/* Tall cards: first 2 posts */
.game-card--tall {
    grid-row: span 2;
}

.game-card--tall .game-card__secondary {
    margin: auto;
}

.game-card--tall .game-card__image-wrap {
    margin-bottom: var(--space-600);
}

.game-card--tall .game-card__body {
    gap: 4px;
}

/* Wide cards: next 3 posts */
.game-card--wide {
    grid-column: span 2;
}

/* Tiles */
.game-tile--spinners,
.game-tile--seeall {
    grid-column: span 1;
}

/* ============================
   CARD VISUALS
   ============================ */
.game-card {
    --card-angle: 180deg;
}

.game-card--wide {
    --card-angle: 90deg;
}

.game-card {
    position: relative;

    background: linear-gradient(var(--card-angle, 180deg),
            var(--card-accent, #490024) 0%,
            color-mix(in srgb, var(--card-accent, #490024) 35%, #191919) 35%,
            #191919 100%);
    border-radius: var(--border-radius-card);
    padding: var(--space-600);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    color: var(--text-onDark-primary);
}


.game-card__image-link {
    display: block;
}

.game-card__image-wrap {
    margin-bottom: var(--space-400);
    display: flex;
    justify-content: center;
    align-items: center;
}

.game-card__image-wrap img,
.game-card__image {
    display: block;
    width: 100%;
    max-width: 228px;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-400);
}

.game-card__body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.game-card__kicker {
    margin-bottom: var(--space-300);
}

/* kill gradient for titles */
.game-card__title,
.game-card__title a {
    margin: 0 0 var(--space-300);
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: var(--text-onDark-primary);
    text-decoration: none;
    font: var(--heading-sm);
}

.game-card__title a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.game-card__meta {
    font: var(--body-sm);
    color: var(--text-onDark-secondary);
}

/* Secondary image */
.game-card--wide .game-card__secondary {
    padding-top: var(--space-300);
    grid-column: 2;
    grid-row: 1 / span 3;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    align-self: center;
}

.game-card__secondary {
    margin-top: var(--space-400);
}

.game-card__secondary img {
    width: 78px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--border-radius-300);
    margin-top: var(--space-300);
}

.betty-arrow-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: var(--space-300);
    background: var(--svg-arrow-forward) center / contain no-repeat;
    vertical-align: middle;
}

/* ============================
   SPINNERS CIRCLE / SEE ALL
   ============================ */
.game-tile {
    border-radius: var(--border-radius-card);
    background: var(--surface-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-400);
    box-sizing: border-box;
}

.game-tile--spinners-title {
    font-family: var(--font-dm);
    font-size: 2rem;
    line-height: 1.2;
    background: var(--text-onDark-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.game-tile--seeall a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-100);
    font: var(--body-sm-semibold);
    text-decoration: none;
    color: var(--accent);
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
}

.game-tile--seeall a:hover {
    text-decoration: underline;
}

/* ============================
   GAME REVIEWS - WIDE CARD LAYOUT
   ============================ */
.game-card--wide {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.game-card--wide .game-card__image-link {
    flex: 0 0 auto;
    margin-right: var(--space-400);
    align-self: center;
}

.game-card--wide .game-card__image-wrap {
    margin-bottom: 0;
}

.game-card--wide .game-card__body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    align-items: flex-start;
}

.game-card--wide .game-card__kicker,
.game-card--wide .game-card__title,
.game-card--wide .game-card__meta {
    grid-column: 1;
}

.game-card--wide .game-card__meta {}

.game-card--wide .game-card__secondary {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 0;
}

.game-card--wide .game-card__secondary img {
    width: 78px;
    height: 90px;
    object-fit: cover;
}

/* Header row: title + arrow */
.game-reviews_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-400);
    padding: 0 0 var(--space-800);
}

.game-reviews_heading {
    margin: 0;
}

.game-reviews_more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* MOBILE */
@media (max-width: 768px) {
    .game-reviews {
        margin: var(--space-1000) 0 0 0;
    }

    .game-reviews_header {
        padding: 0 0 var(--space-600);
    }

    .game-reviews_grid {
        display: flex;
        gap: var(--space-600);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--container-pad);
        padding: 0 var(--container-pad) var(--space-400);
        margin: 0 calc(-1 * var(--container-pad));
    }

    .game-reviews_grid>* {
        flex: 0 0 78%;
        max-width: 320px;
        scroll-snap-align: start;
    }

    .game-card--tall,
    .game-card--wide,
    .game-tile--spinners,
    .game-tile--seeall {
        grid-column: auto;
        grid-row: auto;
    }

    .game-card {
        --card-angle: 180deg;
    }

    .game-card--wide {

        flex-direction: column;
        align-items: stretch;
    }

    .game-card--wide .game-card__image-link {
        margin-right: 0;
    }

    .game-card--wide .game-card__image-wrap {
        margin-bottom: var(--space-600);
    }

    .game-card--wide .game-card__body {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .game-card--wide .game-card__secondary {
        margin-top: var(--space-400);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .game-tile {
        min-height: 220px;
    }
}

/* Fix: see all tile is the <a> itself */
.game-tile--seeall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-300);
    font: var(--body-sm-semibold);
    text-decoration: none;
    color: var(--accent);
}

.game-tile--seeall:hover {
    text-decoration: underline;
}

/* ============================
   Wide Banner
   ============================ */
.wide-banner {
    background: var(--bg-fill-status-attention);
    border-radius: var(--border-radius-400);

    /* keep total width <= 1200 AND enforce 40px gutters */
    width: min(1200px, calc(100% - (var(--space-1000) * 2)));
    margin: var(--space-2000) auto 0;

    /* include padding inside the width */
    box-sizing: border-box;

    padding: var(--space-1000) var(--space-1400);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    color: var(--text-onAccent-primary);
}

.wide-banner__inner {
    /*   max-width: 640px; */
}

.wide-banner__pill {
    /*
    min-height: var(--space-600);
    text-transform: capitalize;
    background: var(--bg-fill-status-attention);
    width: fit-content;
    padding: var(--space-200);
    border-radius: var(--border-radius-full);
    border: var(--border-width-025) solid transparent;
    font: var(--input-label);
    margin-bottom: var(--space-400);
    */
}

.wide-banner__title {
    margin: 0 0 var(--space-300);
    color: var(--text-onAccent-primary);
    font-weight: 900 !important;
}

.wide-banner__blurb {
    margin: 0 0 var(--space-600);
}

.wide-banner__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-600) var(--space-800);
    border-radius: var(--border-radius-200);
    background: var(--bg-fill-primary-default);
    font: var(--button-lg);
    text-decoration: none;
}

.wide-banner__button:hover {
    opacity: 0.9;
}

/* Wide Banner Mobile */
@media (max-width: 768px) {
    .wide-banner {
        /* enforce 16px gutters on mobile */
        width: calc(100% - (var(--space-400) * 2));
        margin-top: var(--space-1000);
        padding: var(--space-400);
    }

    .wide-banner__title {
        font: var(--heading-md);
    }

    .wide-banner__blurb {
        font: var(--body-sm);
    }

    .wide-banner__button {
        padding: var(--space-300) var(--space-600);
        font: var(--button-sm);
    }
}


/* Wide Banner Mobile */
@media (max-width: 768px) {
    .wide-banner {
        margin: var(--space-1000) auto 0;
        padding: var(--space-400);
    }

    .wide-banner__title {
        font: var(--heading-md);
    }

    .wide-banner__blurb {
        font: var(--body-sm);
    }

    .wide-banner__button {
        padding: var(--space-300) var(--space-600);
        font: var(--button-sm);
    }
}

/* ============================
   News Section
   ============================ */
.news-section {
    width: 100%;
    margin-top: var(--space-2000);
}

.news-container {
    margin: 0 auto;
    position: relative;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-rail {
    position: relative;
    overflow: visible;

}
.news-rail-fade,
.news-track-wrapper::before,
.news-track-wrapper::after {
    pointer-events: none;
}

.news-arrow {
    position: absolute;
    top: calc(50% - 20px);
transform: translateY(-50%);
    z-index: 10;
}


.news-arrow--next {
    right: -50px; 
}

.news-arrow--prev {
    left: -50px; 
    transform: translateY(-50%) rotate(180deg);
}

.news-track-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.news-track {
    display: flex;
    gap: var(--betty-gap);
    transition: transform 0.35s ease;
    will-change: transform;
}

.news-card {
    flex: 0 0 calc((100% - (var(--betty-gap) * 2)) / 3);
    max-width: calc((100% - (var(--betty-gap) * 2)) / 3);
    border-radius: var(--border-radius-400);
    overflow: hidden;
}

.news-card a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.news-img-wrap img,
.news-img-wrap video,
.news-img-wrap .news-card__media {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}

.news-info {
    padding: var(--space-600) 0;
}

.news-title {
    padding-top: var(--space-300);
    margin-bottom: var(--space-0);
    color: var(--text-onDark-primary);
}

.news-title:hover {
    color: var(--accent);
    text-decoration: underline;
}

.news-blurb {
    color: var(--text-onDark-primary);
    margin: var(--space-0);
    padding-top: var(--space-300);
}

.news-meta {
    margin-top: var(--space-300);
    color: var(--text-onDark-secondary);
}

@media (max-width: 768px) {
    .news-section {
        margin-top: var(--space-1000);
        margin-bottom: var(--space-0);
    }

    .news-header {
        padding-bottom: var(--space-600);
    }

    .news-track-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--container-pad);
        padding-bottom: var(--space-300);
    }

    .news-track-wrapper::-webkit-scrollbar {
        display: none;
    }

    .news-track-wrapper {
        scrollbar-width: none;
    }

    .news-track {
        width: max-content;
        transition: none;
        gap: var(--space-600);
        padding-right: var(--container-pad);
        padding-left: var(--container-pad);
    }

    .news-title {
        font: var(--heading-sm);
        margin: var(--space-300) 0;
        padding: var(--space-0);
    }

    .news-card {
        flex: 0 0 300px;
        width: 300px;
        max-width: 300px;
        scroll-snap-align: start;
    }

    .news-arrow {
        display: none;
    }
}



/* ============================
   Homepage Lifestyle Section
   ============================ */
.home-lifestyle {
    margin-top: var(--space-2000);
    padding: var(--space-800) 0;
    background: var(--gradient-global-citrus);
}

.home-lifestyle__inner {
    margin: 0 auto;
}

/* Header */
.home-lifestyle__heading {
    color: var(--text-onAccent-primary);
}

.home-lifestyle__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    font-weight: 600;
    border-bottom: solid var(--border-width-100) var(--text-onAccent-primary);
}

.home-lifestyle__eyebrow {
    margin: 0;
}

.home-lifestyle__period {
    color: var(--text-onAccent-primary);
    text-transform: none;
}

/* Grid */
.home-lifestyle__feature-media-wrap {
    width: 100%;
    max-width: 708px;
    min-width: 0;
    border-radius: var(--border-radius-400);
    overflow: hidden;
}

.home-lifestyle__grid {
    display: grid;
    grid-template-columns: minmax(0, min(708px, 55%)) minmax(340px, 1fr);
    gap: var(--space-600);
    align-items: start;
}


/* Feature card */
.home-lifestyle__feature {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
}

/* Main feature image wrapper */
.home-lifestyle__feature-media {
    width: 100%;
    aspect-ratio: 708 / 315;
    border-radius: inherit;
    overflow: hidden;
}

.home-lifestyle__feature-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-lifestyle__feature-body {
    padding-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--text-onDark-primary);
    max-width: 700px;
    min-width: 0;
}

.home-lifestyle__pill {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: var(--border-radius-full);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--accent);
    background: #000;
}

.home-lifestyle__feature-title {
    margin: 0;
}

.home-lifestyle__feature-title a {
    color: var(--text-onAccent-primary);
    text-decoration: none;
}

.home-lifestyle__feature-title a:hover {
    text-decoration: underline;
}

.home-lifestyle__feature-blurb {
    margin: 0;
    max-width: 32rem;
    color: var(--text-onAccent-primary);
}

/* Shared meta style */
.home-lifestyle__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-onAccent-primary);
}

.home-lifestyle__meta-item {
    white-space: nowrap;
}

.home-lifestyle__meta-separator {
    opacity: 0.5;
}

/* Sidebar list */
.home-lifestyle__sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.home-lifestyle__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    align-items: center;
    border-bottom: solid var(--border-width-100) var(--text-onAccent-primary);
}

.home-lifestyle__sidebar .home-lifestyle__item:last-of-type {
    border-bottom: 0;
}

.home-lifestyle__item-main {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.home-lifestyle__item-number {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 900;
    letter-spacing: 0.07px;
    color: var(--text-onAccent-secondary);
}

.home-lifestyle__item-copy {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.home-lifestyle__item-title {
    color: var(--text-onAccent-primary);
}

.home-lifestyle__item-title a {
    color: var(--text-onAccent-primary);
    text-decoration: none;
}

.home-lifestyle__item-title a:hover {
    text-decoration: underline;
}

.home-lifestyle__item .home-lifestyle__meta {
    color: var(--text-onAccent-primary);
}

/* Thumbnail on the right */
.home-lifestyle__item-thumb {
    position: relative;
    width: 100%;
    max-width: 180px;
    aspect-ratio: 180 / 80;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-lifestyle__item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--border-radius-400);
}

/* Footer button */
.home-lifestyle__footer {
    margin-top: 1.75rem;
    display: flex;
    justify-content: flex-end;
}

.home-lifestyle__more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.8rem;
    border-radius: var(--border-radius-200);
    border: var(--border-width-025) var(--border-primary-default) solid;
    text-decoration: none;
    color: var(--text-onAccent-primary);
    font: var(--button-sm);
}

.home-lifestyle__more-button:hover {
    color: var(--text-onAccent-primary);
    background: var(--accent);
}

/* Lifestyle – Mobile */
@media (max-width: 768px) {
    .home-lifestyle {
        margin-top: var(--space-100);
        padding: var(--space-1000) 0;
    }

    .home-lifestyle__header {
        padding-bottom: var(--space-300);
    }

    .home-lifestyle__heading {
        margin-bottom: var(--space-0);
    }

    .home-lifestyle__grid {
        grid-template-columns: 1fr;
        gap: var(--space-600);
    }

    .home-lifestyle__feature-media-wrap {
        width: 100%;
        border-radius: var(--border-radius-400);
        overflow: hidden;
        margin-top: 30px;
    }

    .home-lifestyle__feature-media {
        height: 153px;
        aspect-ratio: auto;
    }

    .home-lifestyle__feature-image {
        object-fit: cover;
    }

    .home-lifestyle__feature-body {
        padding-top: var(--space-400);
    }

    .home-lifestyle__feature-body {
        gap: var(--space-300);
    }

    .home-lifestyle__feature-blurb {
        font: var(--body-sm);
    }

    .home-lifestyle__item-main {
        display: block;
    }

    .home-lifestyle__item {
        grid-template-columns: minmax(0, 1fr) 144px;
        align-items: center;
        padding: var(--space-400) 0;
    }

    .home-lifestyle__item-title {
        font: var(--heading-xs);
        padding: var(--space-200) 0;
        margin-bottom: var(--space-0);
    }

    .home-lifestyle__item-thumb {
        width: 144px;
        height: 64px;
        max-width: none;
        aspect-ratio: auto;
        overflow: hidden;
        border-radius: var(--border-radius-400);
        justify-self: end;
    }

    .home-lifestyle__item-image {
        width: 144px;
        height: 64px;
        object-fit: cover;
        border-radius: var(--border-radius-400);
    }

    .home-lifestyle__more-button {
        align-self: flex-start;
        margin-top: 0.75rem;
        width: -webkit-fill-available;
    }
}

/* ============================
   Homepage Top 10 Played Slots
   ============================ */
.betty-top-slots {
    width: 100%;
    background: var(--bg-screen);
}

.betty-top-slots__inner {
    max-width: 1200px;
    margin: var(--space-2000) auto;
    background: var(--bg-fill-primary-default);
    border-radius: var(--border-radius-300);
    padding: var(--space-800) var(--space-500) var(--space-800) var(--container-pad);
    box-sizing: border-box;
}

.betty-top-slots__pad {}

.betty-top-slots__title {
    margin: 0 0 var(--space-400);
    text-align: center;
}

/* Rail / container */
.betty-top-slots__rail {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* Right-side fade hint */
.betty-top-slots__rail::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 120px;
    height: 100%;
    pointer-events: none;
    z-index: 6;
    background: linear-gradient(90deg, rgba(18, 18, 18, 0) 0%, var(--bg-fill-primary-default) 70%);
}

/* Scroll track */
.betty-top-slots__list {
    display: flex;
    gap: var(--space-400);
    list-style: none;
    margin: 0;
    padding: 0 72px var(--space-200) var(--space-600);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.betty-top-slots__list::-webkit-scrollbar {
    height: 0;
}

/* Lock width so only 5 show */
.betty-top-slots__item {
    flex: 0 0 227px;
    scroll-snap-align: start;
}

/* Item layout */
.betty-top-slots__itemLink {
    position: relative;
    display: grid;
    grid-template-columns: 70px 148px;
    column-gap: var(--space-300);
    align-items: end;
    text-decoration: none;
}

/* Number behind image */
.betty-top-slots__num {
    position: relative;
    z-index: 0;
    width: 70px;
    height: 110px;
    font-family: var(--font-inter);
    font-weight: 800;
    font-size: 140px;
    line-height: 110px;
    letter-spacing: -0.25px;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.25);
    text-stroke: 1px rgba(255, 255, 255, 0.25);
    text-align: right;
    pointer-events: none;
}

/* Image overlaps number */
.betty-top-slots__imgWrap {
    position: relative;
    z-index: 1;
    width: 148px;
    height: 188px;
    border-radius: var(--border-radius-300);
    overflow: hidden;
    margin-left: -18px;
}

.betty-top-slots__img {
    display: block;
    width: 148px;
    height: 188px;
    object-fit: cover;
}

.betty-top-slots__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-right: -15px;
}

.betty-top-slots__arrow span {
    display: none;
}

.betty-top-slots__arrow--next {
    right: var(--space-400);
}

.betty-top-slots__arrow--prev {
    left: var(--space-400);
}


.betty-top-slots__item:last-child .betty-top-slots__imgWrap {
    margin-left: 25px;
}

/* Mobile */
@media (max-width: 768px) {
    .betty-top-slots__inner {
        margin: var(--space-200) auto;
    }

    .betty-top-slots__title {
        padding: 0;
        margin: 0 0 var(--space-600);
    }

    .betty-top-slots__imgWrap {
        margin-left: -30px;
    }

    .betty-top-slots__rail {
        max-width: 100%;
    }

    .betty-top-slots__rail::after {
        display: none;
    }

    .betty-top-slots__arrow--prev {
        display: none;
    }

    .betty-top-slots__arrow--next {
        display: none;
    }
}

/* ============================
   Homepage Square Banner
   ============================ */

.homepage-square-banner {
    margin: 0 auto;
}

/* 50 / 50 container */
.homepage-square-banner__inner {
    position: relative;
    margin: 120px 0;
    overflow: hidden;
    gap: var(--betty-gap);
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-screen);
    color: var(--text-onDark-primary);
}

/* LEFT – TEXT PANEL */
.homepage-square-banner__left {
    position: relative;
    padding: var(--space-2400) var(--space-2000);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.homepage-square-banner__content {
    max-width: 616px;
    width: 100%;
}

.homepage-square-banner__pill {
    margin-bottom: var(--space-800);
}

.homepage-square-banner__title {
    margin-bottom: var(--space-600);
}

.homepage-square-banner__blurb {
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: 0.07px;
    margin-bottom: var(--space-1600);
}

/* RIGHT – IMAGE PANEL */
.homepage-square-banner__right {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-400);

}

/* subtle dark overlay on image */
.homepage-square-banner__right::before {
    content: "";
    position: absolute;
    inset: 0;
    /*  background: linear-gradient(135deg,
            rgba(0, 0, 0, .45),
            rgba(0, 0, 0, .25));*/
    z-index: 1;
    pointer-events: none;
}

.homepage-square-banner__promo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.homepage-square-banner__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-800);
    height: var(--space-1400);
    border-radius: var(--border-radius-200);
    background: var(--bg-fill-accent-default);
    color: var(--text-onAccent-primary);
    font: var(--button-lg);
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.08em;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}

.homepage-square-banner__button:hover {
    background: var(--bg-fill-accent-hover);
    color: initial;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}

/* MOBILE STACK */
@media (max-width: 768px) {
    .homepage-square-banner__inner {
        grid-template-columns: 1fr;
        margin: 0px;
        gap: 0;
    }

    .homepage-square-banner__left {
        padding: var(--space-1600) var(--space-1000);
    }

    .homepage-square-banner__right {
        grid-row: 1;
        padding-top: 64px;
        height: 100%;
    }

    .homepage-square-banner__title {
        font: var(--heading-lg);
        margin-bottom: var(--space-600);
    }

    .homepage-square-banner__blurb {
        font: var(--body-md);
        margin-bottom: var(--space-600);
    }

    .homepage-square-banner__button {
        height: var(--space-1000);
        padding: 0 var(--space-600);
        font: var(--button-sm);
    }

    .homepage-square-banner__left {
        grid-row: 2;
        padding-bottom: var(--space-600);
    }

}

/* =========================
   Category Blog Template
   ========================= */

.cat-content {
    margin-bottom: var(--space-1200);
}

.cat-content .news-section {
    margin-top: var(--space-1000);
}

.hero-feature__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--border-radius-400);

    aspect-ratio: 23 / 10;
}

.hero-feature__media :is(img, video, .hero-feature__media-el) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hero-feature__media .betty-media-frame,
.hero-feature__media .wp-video,
.hero-feature__media .mejs-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-feature__media .mejs-container video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

@media (max-width: 768px) {
    .cat-content {
        margin-bottom: var(--space-400);
    }

    body.category .games-track-wrapper,
    body.post-type-archive-videos .games-track-wrapper {
        overflow: visible;
        padding-bottom: 0;
        margin-bottom: var(--space-1200);
    }

    body.category .games-grid,
    body.post-type-archive-videos .games-grid {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
        gap: var(--space-400);
    }

    body.category .games-card,
    body.category .games-grid .news-card,
    body.category .games-card .news-img-wrap,
    body.category .games-card .news-img-wrap img,
    body.post-type-archive-videos .games-card,
    body.post-type-archive-videos .games-grid .news-card,
    body.post-type-archive-videos .games-card .news-img-wrap,
    body.post-type-archive-videos .games-card .news-img-wrap img {
        width: 100%;
        max-width: 100%;
        flex: none;
    }

    body.category .games-card .news-img-wrap img,
    body.post-type-archive-videos .games-card .news-img-wrap img {
        object-fit: cover;
    }
}

.betty-pagination {
    margin-top: var(--space-900);
    display: flex;
    justify-content: center;
}

.betty-pagination .navigation {
    width: 100%;
}

.betty-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-200);
    justify-content: center;
    align-items: center;
}

/* Base button look */
.betty-pagination a,
.betty-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 26px;
    transition: transform 120ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* Hover */
.betty-pagination a:hover {
    background: var(--bg-elevated, rgba(255, 255, 255, 0.06));
    transform: translateY(-1px);
}

/* Current page */
.betty-pagination .current {}

.betty-pagination .prev,
.betty-pagination .next {
    padding: 0 var(--space-500);
}

/* Dots */
.betty-pagination .dots {
    border-color: transparent;
    background: transparent;
    opacity: 0.7;
    min-width: auto;
    padding: 0 var(--space-200);
}

/* Remove default focus weirdness */
.betty-pagination a:focus-visible {
    outline: 2px solid var(--focus-ring, #fff);
    outline-offset: 3px;
}

/* Mobile tightening */
@media (max-width: 480px) {

    .betty-pagination a,
    .betty-pagination span {
        min-width: 40px;
        height: 40px;
        padding: 0 var(--space-250);
    }

    .betty-pagination .prev,
    .betty-pagination .next {
        padding: 0 var(--space-350);
    }
}

/* =========================
   Betty Single Post Layout
   ========================= */
.betty-post {
    color: var(--text-onDark-primary);
    padding: var(--space-800) var(--container-pad) 0;
    box-sizing: border-box;
}

/* Keep header constrained to post width */
.betty-post-header {
    width: 100%;
    max-width: var(--container-post);
    margin: 0 auto;
}

.betty-post-body {
    width: 100%;
    margin-top: var(--space-800);
}

/* Breakout utility: escape a max-width parent */
.breakout {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* =========================
   CORE LAYOUT GRID
   Left column: hero + header + body (continuous)
   Right column: sidebar (spans rows)
   Sidebar is last in DOM, but placed right via grid-areas
   ========================= */
.betty-post-body__inner {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);

    display: grid;
    grid-template-columns: minmax(0, var(--container-post)) 380px;
    gap: var(--betty-gap);
    align-items: start;

    grid-template-areas:
        "hero    sidebar"
        "header  sidebar"
        "content sidebar";
}

/* Place items into grid areas */
.betty-post-top__hero {
    grid-area: hero;
    min-width: 0;
}

.betty-post-header {
    grid-area: header;
}

.betty-post-body__content {
    grid-area: content;

    max-width: var(--container-post);
    min-width: 0;

    /* Controls the space between hero row and the first paragraph */
    margin-top: var(--space-700);
}

.betty-post-sidebar {
    grid-area: sidebar;

    width: 380px;
    min-width: 380px;
    justify-self: end;
    align-self: start;
}

.betty-post-sidebar .widget-title {
    text-align: left;
    margin-bottom: 0px;
}

/* Keep readable line-length inside the left column */
.betty-content {
    max-width: 768px;
    margin-left: 0;
    margin-right: 0;
}

/* Sticky sidebar on desktop */
@media (min-width: 901px) {
    .betty-post-sidebar {
        position: sticky;
        top: var(--space-800);
    }
}

/* =========================
   SIDEBAR: Latest widget cards
   ========================= */
.betty-post-sidebar .betty-latest-sidebar {
    display: grid;
    gap: var(--space-700);
}

.betty-post-sidebar .betty-featured-card--side{
    padding: 0px;
}
.betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side:not(:last-child) {
    border-bottom: var(--accent) 1px solid;
}

.betty-post-sidebar .betty-latest-sidebar .betty-featured-card {
    border-radius: 0;
}

.betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__link {
    padding: var(--space-400) 0;
    display: grid;
    grid-template-columns: 160px 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-500);
    row-gap: var(--space-200);
    background: var(--bg-screen);
}

.betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__media {
    display: contents;
}

.betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__media .betty-featured-card__img,
.betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__media img,
.betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__media video,
.betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__media .betty-related-thumb__media {
    grid-column: 1;
    grid-row: 1;
    display: block;
}

.betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__media .betty-pill {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: end;
}

.betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__body {
    display: contents;
}

.betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    line-height: 1.35;
}

.betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__meta {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    padding-top: 3px;
    display: inline-flex;
    gap: var(--space-200);
    align-items: center;
    justify-self: start;
    align-self: end;
}

.betty-post-sidebar .betty-latest-sidebar .betty-related-card-meta {
    padding-top: 3px;
}

@media (max-width: 678px) {
    .betty-post-sidebar .betty-featured-card__kicker{
       padding-top: var(--space-600);
    }
    .betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side:not(:last-child){
        border-bottom:0;
    }
    .betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__link {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 0;
        column-gap: 0;
    }

    .betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__media {
        display: block;
    }

    .betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__body {
        display: block;
        padding: var(--space-600) 0 0 !important;
    }

    .betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__title,
    .betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__meta {
        grid-column: auto;
        grid-row: auto;
    }
}

.betty-post-blurb {
}

.betty-post-blurb p {
    margin: var(--space-400) 0;
}

.betty-hero {
    border-radius: var(--border-radius-400);
    overflow: hidden;
    position: relative;
    aspect-ratio: 23 / 10;
}

.betty-hero img,
.betty-hero video,
.betty-hero .betty-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.betty-pill-row {
    display: flex;
    margin-top: var(--space-800);
}

.betty-title {
    margin: var(--space-400) auto 0;
}

.betty-meta {
    margin: var(--space-600) 0;
    display: flex;
    gap: var(--space-200);
    flex-wrap: wrap;
    color: var(--text-onDark-secondary);
}

.betty-dot {
    opacity: 0.5;
}

.betty-follow {
    margin-top: var(--space-600);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-300);
}

.betty-follow-label {
    margin: 0;
    font: var(--caption);
    color: var(--text-onDark-secondary);
    white-space: nowrap;
}

.betty-follow-icons {
    display: flex;
    align-items: center;
    gap: var(--space-200);
}

.betty-follow-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--border-radius-full);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: var(--border-width-025) solid color-mix(in srgb, var(--text-onDark-primary) 14%, transparent);
    background: color-mix(in srgb, var(--text-onDark-primary) 6%, transparent);

    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.betty-follow-icon img {
    width: 16px;
    height: 16px;
    display: block;
}

.betty-follow-icon:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Content typography */
.betty-content p {
    margin: 0 0 var(--space-600);
}

.betty-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: var(--space-100);
}

.betty-content h2,
.betty-content h3 {
    background: var(--text-onDark-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.betty-content ul,
.betty-content ol {
    margin: 0 0 var(--space-300) var(--space-500);
    padding: 0;
}

.betty-content li {
    margin: 0 0 var(--space-200);
}

table {
    border-collapse: collapse;
}

table th,
table td {
    border: var(--border-width-050) solid var(--accent);
}

/* Related */
.betty-related {
    max-width: var(--container-max);
    margin: var(--space-800) auto;
}

.betty-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-300);
    margin-bottom: var(--space-300);
}

.betty-related-title {
    margin-top: 44px;
}

.betty-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--betty-gap);
}

.betty-related-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.betty-related-thumb {
    position: relative;
    border-radius: var(--border-radius-400);
    overflow: hidden;
    background: color-mix(in srgb, var(--text-onDark-primary) 6%, transparent);
    aspect-ratio: 16 / 9;
}

.betty-related-thumb img,
.betty-related-thumb video,
.betty-related-thumb__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.betty-related-pill {
    margin-top: var(--space-400);
}

.betty-related-card-title {
    margin: var(--space-300) 0;
}

.betty-related-card-title:hover {
    text-decoration: underline;
    color: var(--accent);
}

.betty-related-card-meta {
    display: flex;
    gap: var(--space-200);
    align-items: center;
    color: color-mix(in srgb, var(--text-onDark-primary) 60%, transparent);
}

/* Normalize emoji size in blog content */
.betty-content span,
.betty-content p,
.betty-content li {
    font-variant-emoji: text;
}

.betty-content img.emoji,
.betty-content .wp-smiley {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 900px) {

    .breakout {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .betty-post-body__inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "hero"
            "header"
            "content"
            "sidebar";
    }

    .betty-post-sidebar {
        width: auto;
        min-width: 0;
        justify-self: stretch;
        position: static;
        margin-top: var(--space-700);
    }

    .betty-post-sidebar .widget-title {
        text-align: left;
        margin-bottom: 0;
    }

    .betty-post-body__content {
        margin-top: var(--space-700);
    }

    .betty-related-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .betty-title {
        font: var(--heading-md);
    }

    .betty-content p {
        font: var(--body-sm);
    }

    .betty-content h2,
    .betty-content h3 {
        font: var(--heading-sm);
    }

    .betty-related {
        display: none;
    }

    .betty-content ul,
    .betty-content ol {
        font: var(--body-sm);
    }

    .betty-content table,
    .betty-content th,
    .betty-content td {
        font: var(--body-sm);
    }

    .betty-post-sidebar .widget-title {
        font: var(--heading-md);
    }
}

/* Mobile: turn Latest sidebar cards into a swipe rail */
@media (max-width: 678px) {

    /* Scope to the post sidebar so it doesn't leak elsewhere */
    .betty-post-sidebar .betty-latest-sidebar {
        display: flex;
        gap: var(--space-600);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--space-400);
        padding-left: var(--space-400);
        padding-right: var(--space-400);

        margin-left: calc(var(--container-pad) * -1);
        margin-right: calc(var(--container-pad) * -1);
    }

    .betty-post-sidebar .betty-latest-sidebar .betty-featured-card {
        flex: 0 0 auto;
        width: min(300px, 85vw);
        scroll-snap-align: start;
        border: 0;
        background: transparent;
        padding: 0;
    }

    .betty-post-sidebar .betty-featured-card--side:not(:last-child) {
        border-bottom: 0;
    }

    .betty-post-sidebar .betty-latest-sidebar .betty-featured-card:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .betty-post-sidebar .betty-featured-card {
        background: transparent;
        border: 0;
        padding: 0;
    }

    .betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__link {
        grid-template-columns: 1fr;
        gap: 0;
        height: auto;
        align-items: start;
    }

    .betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__body {
        padding: var(--space-600) 0 0;
    }

    .betty-post-sidebar .betty-latest-sidebar .betty-featured-card--side .betty-featured-card__img {
        border-radius: var(--space-200);
        aspect-ratio: 21 / 9;
        object-fit: cover;
    }

    .betty-post-sidebar .betty-latest-sidebar::-webkit-scrollbar {
        display: none;
    }

    .betty-post-sidebar .betty-latest-sidebar {
        scrollbar-width: none;
    }
}


/* ============================
   Single Post Lists Category
   ============================ */
.betty-list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-400);
    margin: var(--space-600) 0;
}

.betty-list-media {
    flex: 0 0 157px;
    max-width: 157px;
}

.betty-list-img {
    display: block;
    width: 100%;
    max-width: 157px;
    height: auto;
}

.betty-list-text {
    flex: 1 1 auto;
    min-width: 0;
    margin: auto;
}

.betty-play-now-btn {
    color: black !important;
    text-decoration: none !important;
    width: 100% !important;
    margin-top: 5px;
    padding: 0px !important;
    justify-content: center;
}

.betty-play-now-btn .title-arrow {
    margin-bottom: 0px;
}

.reviews-btn {
    display: flex !important;
    max-width: 250px;
    margin: var(--space-400) auto;
}

@media (max-width: 768px) {
    .betty-list-media {
        flex: 0 0 auto;
        max-width: 118px;
    }

    .betty-play-now-btn .title-arrow {
        display: inline-flex;
    }
}

/* Header is now inside the grid, between hero and body */
.betty-post-header--inflow {
    grid-column: 1;
    grid-row: 2;
    max-width: var(--container-post);
    margin: var(--space-700) 0 0;
}

/* Body becomes row 3 (under header) */
.betty-post-body__content {
    grid-column: 1;
    grid-row: 3;
    margin-top: var(--space-700);
}


/* ============================
   Single Post Lists Category
   ============================ */
.betty-list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-400);
    margin: var(--space-600) 0;
}

.betty-list-media {
    flex: 0 0 157px;
    max-width: 157px;
}

.betty-list-img {
    display: block;
    width: 100%;
    max-width: 157px;
    height: auto;
}

.betty-list-text {
    flex: 1 1 auto;
    min-width: 0;
    margin: auto;
}

.betty-play-now-btn {
    color: black !important;
    text-decoration: none !important;
    width: 100% !important;
    margin-top: 5px;
    padding: 0px !important;
    justify-content: center;
}

.betty-play-now-btn .title-arrow {
    margin-bottom: 0px;
}

.reviews-btn {
    display: flex !important;
    max-width: 250px;
    margin: var(--space-400) auto;
}

@media (max-width: 768px) {
    .betty-list-media {
        flex: 0 0 auto;
        max-width: 118px;
    }

    .betty-play-now-btn .title-arrow {
        display: inline-flex;
    }
}

/* ============================
   PROMO BANNER
   ============================ */
.betty-promo-banner {
    width: 100%;
}

.betty-promo-banner__inner {
    margin: 0 auto;
}

/* DESKTOP */
.betty-promo-banner__card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-200);
    padding: var(--space-800);
    border-radius: var(--border-radius-400);
    background: #222222;
    overflow: hidden;
}

.betty-promo-banner__media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.betty-promo-banner__img {
    display: block;
    max-width: 250px;
    height: auto;
}

.betty-promo-banner__panel {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.betty-promo-banner__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-400);
    min-width: 0;
    max-width: 370px;
}

.betty-promo-banner__title,
.betty-promo-banner__subtitle {
    margin: 0;
}

.betty-promo-banner__subtitle {
    color: var(--text-onDark-primary);
}

.betty-promo-banner__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-100);

    width: fit-content;
    height: var(--space-1000);
    padding: var(--space-600);
    border-radius: var(--border-radius-300);

    text-decoration: none;
    background: var(--bg-fill-accent-default);
    color: var(--text-onAccent-primary);

    transition: transform 140ms ease, filter 140ms ease;
}

.betty-promo-banner__button:hover {
    background: var(--bg-fill-accent-hover);
    color: initial;
}


/* MOBILE ONLY */
@media (max-width: 786px) {
    .betty-promo-banner {
        margin-top: var(--space-500);
    }

    .betty-promo-banner__card {
        flex-direction: column;
        text-align: center;
        gap: 0;
        padding: 0;

        background: transparent;
        border: 0;
        box-shadow: none;
        overflow: visible;
    }

    .betty-promo-banner__media {
        position: relative;
        z-index: 2;
    }

    .betty-promo-banner__img {
        width: min(360px, 90%);
    }

    .betty-promo-banner__panel {
        width: 100%;
        padding: var(--space-600);
        padding-top: var(--space-800);

        border-radius: var(--border-radius-400);
        background: color-mix(in srgb, var(--text-onDark-primary) 6%, transparent);
        border: var(--border-width-025) solid color-mix(in srgb, var(--text-onDark-primary) 10%, transparent);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
        overflow: hidden;

        justify-content: center;
    }

    .betty-promo-banner__content {
        max-width: 370px;
        margin: 0 auto;
    }

    .betty-promo-banner__button {
        width: 100%;
        justify-content: center;
        font: var(--button-sm);
    }
}

/* =========================
   Betty footer base styles
   ========================= */
.betty-footer {
    margin-top: 48px;
    background-color: var(--bg-fill-primary-default);
    color: var(--text-onDark-primary);
    padding: var(--space-2000) var(--container-pad) var(--space-600);
    font-size: 14px;
    line-height: 1.6;
    box-sizing: border-box;
}

.betty-footer__inner {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Top area: three main columns */
.betty-footer__top {
    display: flex;
    gap: var(--space-1000);
    align-items: flex-start;
}

/* Brand column */
.betty-footer__brand {}

.betty-footer__logo {
    display: block;
    width: 123px;
    height: auto;
    margin-bottom: var(--space-200);
}

.betty-footer__tagline {
    /* background: var(--text-onDark-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;*/

}

/* Menus columns */
.betty-footer__menus {
    flex: 1;
    display: flex;
}

.betty-footer__menu {
    padding-right: 16px;
}

.betty-footer__heading {
    font-size: 13px;
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-200);
}

.betty-footer__menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.betty-footer__menu-list li {
    margin-bottom: var(--space-1000);
}

.betty-footer__menu-list a {
    color: var(--text-onDark-primary);
    text-decoration: none;
    font: var(--body-md-semibold);
}

.betty-footer__menu-list a:hover,
.betty-footer__menu-list a:focus {
    text-decoration: underline;
}

.betty-footer__legal {
    max-width: 420px;
}

.betty-footer__legal-text a {
    text-decoration: underline;
    color: inherit;
}

/* Live chat button */
.betty-footer__live-chat {
    display: inline-block;
    margin-top: var(--space-400);
    padding: var(--space-200) var(--space-400);
    border-radius: var(--border-radius-full);
    background-color: var(--accent);
    color: var(--text-onAccent-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

/* RG logos */
.betty-footer__rg-logos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-600);
    margin-top: var(--space-600);
}

.betty-footer__rg-logos img {
    height: 32px;
    width: auto;
}

/* Social links */
.betty-footer__social-list {
    display: flex;
    gap: var(--space-600);
    padding: 0;
    margin: 0;
    list-style: none;
}

.betty-footer__social-list a {
    color: var(--text-onDark-primary);
    text-decoration: none;
}

.betty-footer__follow {
    display: flex;
    gap: var(--space-600);
    padding-bottom: var(--space-1000);
}

.betty-footer__follow-icon {
    height: 24px;
    width: auto;
}

/* Bottom strip (cards) */
.betty-footer__bottom {
    display: block;
    align-items: center;
}

.betty-footer__cards {
    display: flex;
    align-items: center;
    gap: var(--space-800);
}

.betty-footer__cards img {
    height: 40px;
    width: auto;
}

/* Mobile footer re-ordering */
@media (max-width: 768px) {
    .betty-footer__legal-text {
        font: var(--body-sm);
    }

    .betty-footer__inner {
        display: flex;
        flex-direction: column;
    }

    .betty-footer__top {
        display: contents;
    }

    .betty-footer__brand {
        order: 1;
    }

    .betty-footer__menus {
        order: 2;
    }

    .betty-footer__bottom {
        order: 3;
    }

    .betty-footer__legal {
        order: 4;
    }

    .betty-footer__brand {
        flex: unset;
        padding-bottom: var(--space-1000);
    }

    .betty-footer__menus {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .betty-footer__menu {
        min-width: 0;
    }

    .betty-footer__menu-list li {
        margin-bottom: var(--space-600);
    }

    .betty-footer__menu--support {
        padding-bottom: var(--space-1000);
    }

    .betty-footer__follow {
        padding-bottom: var(--space-1000);
        flex-wrap: wrap;
    }

    .betty-footer__cards {
        flex-wrap: wrap;
        gap: var(--space-600);
        padding-bottom: var(--space-1000);
    }

    .betty-footer__cards img {
        height: 30px;
    }

    .betty-footer {
        margin-top: 16px;
        padding: var(--space-800) var(--container-pad) 100px;
    }
}

/* =========================
     SVG ICONS
     ========================= */

.svg-icon {
    display: inline-block;
    width: var(--svg-icon-md);
    height: var(--svg-icon-md);

    background-color: currentColor;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.svg-icon.chevron-right {
    mask-image: var(--svg-chevron-right);
    -webkit-mask-image: var(--svg-chevron-right);
}

.svg-icon.search {
    mask-image: var(--svg-search);
    -webkit-mask-image: var(--svg-search);
}

.svg-icon.search-mobile {
    mask-image: var(--svg-search-mobile);
    -webkit-mask-image: var(--svg-search-mobile);
    background: var(--accent);

}

.svg-icon.menu {
    mask-image: var(--svg-menu);
    -webkit-mask-image: var(--svg-menu);
    background: var(--accent);
}

.svg-icon.arrow-forward {
    mask-image: var(--svg-arrow-forward);
    -webkit-mask-image: var(--svg-arrow-forward);
}

.svg-icon.is-md {
    width: var(--svg-icon-md);
    height: var(--svg-icon-md);
}



/* ============================
   Search Results Section
   ============================ */
.betty-search__inner {
    margin: 0 auto;
    max-width: 768px;
    width: 100%;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

.betty-search {
    width: 100%;
    margin-top: var(--space-2000);
}

.betty-search__inner {
    margin: 0 auto;
    max-width: var(--container-max);
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

.betty-search-empty__formWrap {
    display: none;
}

/* Header */
.betty-search__header {
    margin-bottom: var(--space-800);
}

.betty-search__title {
    margin: 0 0 var(--space-300);
}

.betty-search__subtitle {
    margin: 0;
    color: var(--text-onDark-secondary);
}

/* ============================
   Search Form
   ============================ */

.betty-search__formWrap {
    max-width: 520px;
    margin-top: var(--space-600);
}

/* Layout: input + icon on one row */
.betty-search__formWrap .search-form {
    display: flex;
    align-items: center;
    gap: var(--space-300);
}

/* Input wrapper */
.betty-search__formWrap .search-form label {
    flex: 1 1 auto;
    margin: 0;
    display: block;
}

/* Search input */
.betty-search__formWrap input[type="search"] {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-400);
    border-radius: var(--border-radius-full);
    border: var(--border-width-025) solid color-mix(in srgb, var(--text-onDark-primary) 14%, transparent);
    background: color-mix(in srgb, var(--text-onDark-primary) 6%, transparent);
    color: var(--text-onDark-primary);
    font: var(--body-sm);
}

.betty-search__formWrap input[type="search"]::placeholder {
    color: var(--text-onDark-secondary);
}

.betty-search__formWrap input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
}

/* ============================
   Submit Button (SVG icon only)
   ============================ */

.betty-search__formWrap .search-submit {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--border-radius-200);
    background-color: transparent;
    cursor: pointer;

    /* SVG icon */
    background-image: var(--svg-search-mobile);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}

/* Kill any default WP / GP icons */
.betty-search__formWrap .search-submit::before,
.betty-search__formWrap .search-submit::after {
    content: none !important;
    display: none !important;
}

.betty-search__formWrap .search-submit span,
.betty-search__formWrap .search-submit svg {
    display: none !important;
}

/* ============================
   Results Grid
   ============================ */
.betty-search-card__body {
    max-width: 768px;
}

.betty-search-card__body {
    max-width: 768px;
    color: var(--text-onDark-primary);
}

.betty-search-card__meta {
    color: var(--text-onDark-secondary)
}

.betty-search-card__pill {
    margin: 16px 0;
}

/* ============================
   Mobile
   ============================ */

@media (max-width: 768px) {
    .betty-search__title {
        font: var(--heading-sm);
    }

    .betty-search {
        margin-top: var(--space-1000);
    }

    .betty-search__grid {
        grid-template-columns: 1fr;
        gap: var(--space-400);
    }
}




/* ============================
   404
   ============================ */

.betty-404 {
    width: 100%;
    background: var(--bg-screen);
    padding: var(--space-1200) var(--space-800) var(--space-2000);
    box-sizing: border-box;
}

.betty-404-panel {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.betty-404-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-800);
    height: var(--space-1000);
    padding: 0px var(--space-400);
}

.betty-404-title {
    margin: 0 0 var(--space-800);
}

.betty-404-desc {
    margin: 0 auto var(--space-800);
    color: var(--text-onDark-secondary);
    max-width: 508px;
}

.betty-404-actions {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
}

.betty-404-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding-right: var(--space-500);
    padding-left: var(--space-400);
    border-radius: var(--border-radius-200);
    text-decoration: none;
    border: var(--border-width-025) solid transparent;
    transition:
        transform 120ms ease,
        background-color 120ms ease,
        border-color 120ms ease,
        color 120ms ease;
}

.betty-404-btn:hover {
    transform: translateY(-1px);
}

.betty-404-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--c-gold, #f5c542) 70%, transparent);
    outline-offset: 3px;
}

.betty-404-btn-icon {
    display: inline-flex;
}

.betty-404-btn-ghost {
    color: var(--c-gold, #f5c542);
    background: transparent;
    border-color: var(--border-accent);
}

.betty-404-btn-ghost:hover {
    background: color-mix(in srgb, var(--c-gold, #f5c542) 10%, transparent);
}

.betty-404-btn-gold {
    color: color-mix(in srgb, #000 92%, transparent);
    background: var(--c-gold, #f5c542);
    border-color: color-mix(in srgb, var(--c-gold, #f5c542) 85%, #000 15%);
}

.betty-404-btn-gold:hover {
    background: color-mix(in srgb, var(--c-gold, #f5c542) 92%, #fff 8%);
}

/* ============================
   404 – Mobile
   ============================ */

@media (max-width: 768px) {
    .betty-404 {
        padding: var(--space-1000) var(--space-700) var(--space-1600);
    }

    .betty-404-panel {
        padding: var(--container-pad);
    }

    .betty-404-desc {
        margin-left: 0;
        margin-right: 0;
    }

    .betty-404-actions {}
}

/* ============================
Video featured images
   ============================ */

.betty-featured-media {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.betty-featured-media.is-card {
    height: 200px;
}

.betty-featured-media__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================
   Guides Single Layout
   ========================= */

.betty-guide-header {
    padding: var(--space-1400) 0;
   /* background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent) 25%, var(--bg-screen)) 0%,
        color-mix(in srgb, var(--accent) 22%, var(--bg-screen)) 18%,
        color-mix(in srgb, var(--accent) 12%, var(--bg-screen)) 38%,
        var(--bg-screen) 70%
    );*/
     /* background: color-mix(in srgb, var(--accent) 22%, var(--bg-screen)); */

}

.betty-guide-header__inner {
    max-width: var(--container-max);
    padding: var(--container-pad);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--betty-gap);
        align-items: center;
}

.betty-guide-title {
    color: var(--text-onDark-primary);
    margin: 0 0 var(--space-500);
}

/* Meta (your markup uses .betty-guide-meta) */
.betty-guide-header .betty-guide-meta {
    margin: 0 0 var(--space-300) 0;
}

.betty-guide-blurb {
    margin-top: var(--space-1400); 
}

.betty-guide-header__buttons {
    margin-top: var(--space-1000);
}

.betty-guide-header__right {
    min-width: 0;
}

.betty-guide-header__media {
    border-radius: var(--border-radius-400);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}

/* Safer image sizing */
.betty-guide-header__media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* TOC block */
.betty-guide-toc-wrap {
    padding: var(--space-800) var(--container-pad);
}

.betty-guide-toc-wrap__inner {
    max-width: var(--container-post);
    margin: 0 auto;
    width: 100%;
}

.betty-guide-toc {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--border-radius-400);
    padding: var(--space-800);
    margin: var(--container-pad);
    background: var(--bg-fill-primary-default);
}

.betty-guide-toc__title {
    margin-bottom: var(--space-500);
    color: var(--text-onDark-primary);
}

.betty-guide-toc__list {
    list-style: disc;
    list-style-position: inside;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-300);
}

.betty-guide-toc__item a {
    color: var(--text-onDark-primary);
    text-decoration: none;
}

.betty-guide-toc__item a:hover {
    text-decoration: underline;
}

.betty-guide-toc__item--h3 {
    padding-left: var(--space-600);
    opacity: 0.9;
}

/* Body */
.betty-guide-body {
  padding: var(--space-900) 0 var(--space-1400);
}

.betty-guide-body__inner {
   max-width: var(--container-post);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  box-sizing: border-box;
}

.betty-guide-body .betty-content {
  width: 100%;
}

/* End CTA */
.betty-guide-cta {
    margin-top: var(--space-1000);
    display: flex;
    align-items: center;
    padding: 0;
}

.betty-guide-cta__button{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.betty-guide-cta__button .title-arrow{
    flex: 0 0 auto;   /* prevents shrink */
}
/* Responsive */
@media (max-width: 768px) {
    .betty-guide-header {
        padding: var(--space-600) 0 0 0;
    }

    .betty-guide-header__inner {
        grid-template-columns: 1fr;
        gap: var(--space-800);
        align-items: start;
    }
    .betty-guide-title {
    margin: 0;
}
.betty-guide-header .betty-guide-meta {
    margin: 0 0 var(--space-500) 0;
}
.betty-guide-toc__title{
    font: var(--heading-sm);
}
    /* Put image first on mobile */
    .betty-guide-header__right {
        order: -1;
    }

    .betty-guide-header__buttons {
        margin-bottom: 0;
        text-align: center;
    }

    .betty-guide-toc {
        padding: var(--space-400);
    }
    
}

.betty-btn .title-arrow,
.betty-guide-header__button .title-arrow,
.betty-guide-cta__button .title-arrow,
.betty-play-now-btn .title-arrow,
.betty-promo-banner__button .title-arrow {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.betty-button-wrap{
    margin-bottom: var(--space-600);
}
.betty-button-wrap > a {
	color: var(--text-onDark-accent);
	text-decoration: none;
}


/* Instagram Homepage */
.betty-instagram-block {
	display: block;
	width: 100%;
	margin: 64px auto;
}

.betty-instagram-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 24px;
}

.betty-instagram-header__text h2,
.betty-instagram-header__text p {
	margin: 0;
}

.betty-instagram-header__text h2 {
    font: var(--heading-lg);
}

.betty-instagram-header__text p {
	margin-top: 4px;
}

.betty-instagram-follow-btn,
.betty-instagram-follow-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 7px 14px;
	border: 1px solid #ffc700;
	border-radius: 4px;
	background: #ffc700;
	color: #000 !important;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	box-sizing: border-box;
	transition: background-color .1s ease-in, border-color .1s ease-in, color .1s ease-in;
}

.betty-instagram-follow-btn:hover,
.betty-instagram-follow-btn:focus,
.betty-instagram-follow-btn:active {
	background: rgb(251, 194, 0);
	border-color: rgb(251, 194, 0);
	color: #000 !important;
	text-decoration: none !important;
}

.betty-instagram-follow-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.betty-instagram-follow-btn__icon svg {
	display: block;
}

@media (max-width: 767px) {
	.betty-instagram-header {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.betty-instagram-header__text {
		width: 100%;
		text-align: center;
	}

	.betty-instagram-follow-btn {
		margin-top: 8px;
	}
}