:root 
{
    --ScaleLerp: 1;
    --HeroScale: 1;
    --BackgroundScale: 1;
    
    --SectionWidthMax: 2600px;
    --SectionWidthMin: 720px;


    /*--- Colors ------------------------*/
    --ColorArakionGoldLight: #efe6da; /*#efe6da;*/
    
    --ColorArakionBlue: #2A7CAC;
    --ColorArakionBlueTransparent: rgba(38, 77, 102, 0.2);
    --ColorArakionBlueDark: #264D66;
    --ColorArakionGold: #F7CE66; /*#F7CE66;*/
    --ColorArakionRed: #B83E43FF;

    --ColorAtlusBlueDark: #061a29;
    
    --ColorStatBrawn: #FA4F56;
    --ColorStatSkll: #AAFF5A;
    --ColorStatWill: #3BC3FF;

    --ColorArakionBrown: #5C4430;
    --ColorArakionSoil:	#3E2D1C;
    --ColorArakionSoilDark: #281d10;
    --ColorArakionStone: #7D7A75;
    --ColorArakionMoss:	#556B2F;
    
    --ColorWoadBlue: #3e5970;
    --ColorWoadBlueDark: #224254;
    
    --FontHeader: 'Luckiest Guy', serif;
    --FontBody: 'Rajdhani', serif;
}


/*--- FONTS -------------------------------*/
/*-----------------------------------------*/
.TextSingleLine 
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.FontBody
{
    font-family:  var(--FontBody), serif;
}
.FontHeader
{
    font-family: var(--FontHeader), serif;
    text-transform: lowercase;
}

.FontBodyComposite
{
    color: var(--ColorArakionGold);
    font-family: var(--FontBody), serif;
    /*font-weight: bold;*/
    font-size: 1.4rem;
    line-height: 1.0;
}


.FontHeaderScale
{
    font-size: 3rem;
}

.FontHeaderShadow 
{   
    /*text-shadow:*/
            /*0 0 3px rgba(0, 0, 0, 0.3);*/
            /*0 0 6px rgba(0, 0, 0, 0.4),*/
            /*0 0 10px rgba(0, 0, 0, 0.5);*/
}

.FontHeaderScale
{
    font-size: calc(3rem * var(--HeroScale));
}

.FontHeaderComposite 
{
    font-family: var(--FontHeader), serif;
    text-transform: lowercase;
    color: var(--ColorArakionGoldLight);
    text-shadow:
            0 0 3px rgba(0, 0, 0, 0.3);
    font-size: calc(3rem * var(--HeroScale));
    letter-spacing: .15rem;
}

.FontBodyShadow
{
    text-shadow:
            0 0 1.5px rgba(0, 0, 0, 0.3),
            0 0 3px rgba(0, 0, 0, 0.4);

}

/*--- Colors ------------------------*/
/*-----------------------------------------*/

.ColorFontHeader { color: var(--ColorArakionGoldLight); }
.ColorFont { color: #efe6da; }

.ColorArakionBlue { color: #2A7CAC; }
.ColorArakionBlueBackground { background: #2A7CAC; }

.ColorArakionBlueDark { color: #264D66; }
.ColorArakionBlueDarkBackground { background: #264D66; }

.ColorArakionGold { color: #F7CE66; }
.ColorArakionGoldBackground { background: #F7CE66; }

.ColorArakionRed { color: #B83E43FF; }
.ColorArakionRedBackground { background: #B83E43FF; }

.ColorStatBrawn { color: #FA4F56FF; }
.ColorStatSkill { color: #AAFF5AFF; }
.ColorStatWill { color: #3BC3FFFF; }

/*--- End Section ----------------------*/


/*--- BASE STYLES -------------------*/
/*-----------------------------------------*/
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body
{
    height: 100%;
    font-family: var(--FontHeader), serif;
    scroll-behavior: smooth;
    background-color: rgb(2, 21, 28);
    overflow-x: hidden;
}

body::before,
body::after
{
    /*
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: 15vw;
    background: white;
    z-index: 2; /* ← Changed from 0 to 2 */
    /*pointer-events: none; /* Prevents accidental blocking */
}

body::before 
{
    left: 0; 
}

body::after 
{
    right: 0; 
}

/*--- End Section ----------------------*/


/*--- HEADER ---------------------------*/
/*--------------------------------------*/

header
{
    width: 100%;
    max-width: var(--SectionWidthMax);
    min-width: var(--SectionWidthMin);


    left: 49.6%;    /* TODO: This needs adjusted. It should be 50% I'm just guesstimating to fix a minor visual issue. */
    transform: translateX(-50%);                /* Center the header itself */
    
    z-index: 10;
    
    color: var(--ColorArakionGoldLight);
    /*background-color: rgba(19, 38, 51, 0.9);*/
    /*-webkit-backdrop-filter: blur(4px);         !* for Safari support *!*/
    /*backdrop-filter: blur(4px);*/
}

header nav a
{
    text-decoration: none;
    margin: 0.5rem;
    font-size: 1.2rem;
}

.HeaderBar
{
    height: 70px;
    width: 90%;
    position: fixed;

    /*background-image: url('Images/VinesTiling.webp'); !* adjust path *!*/
    background-repeat: repeat-x; /* tile in both directions */
    background-size: auto 128px;     /* default size (natural image size) */

    /*background-color: rgba(19, 38, 51, 0.8); !* semi-transparent overlay color *!*/
    background-color: rgba(12, 72, 175, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 9px;
    background-blend-mode: multiply;
    opacity: 1;

    -webkit-backdrop-filter: blur(10px);         /* for Safari support */
    
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;   
    
    /*
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
     */
}

.Logo
{
    height: 38px;
    filter: saturate(0.6);
}
.Logo:hover
{
    filter: saturate(1);
}

.HeaderLeft
{
    padding-left: 2rem;
    display: flex;
    align-items: center;
}

.HeaderCenter
{
    display: flex;
    justify-content: center;
}

.Hamburger 
{
    color: var(--ColorArakionGoldLight);
    display: none;
    font-size: 2rem;
    cursor: pointer;
    user-select: none;
    padding: 0.5rem 1rem;
}

.Hamburger:hover
{
    color: var(--ColorArakionGold);
}

.HeaderNav 
{
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
}

/* Responsive toggle */
@media (max-width: 768px) 
{
    .Hamburger 
    {
        display: block;
    }
    
    .HeaderBar
    {
        height: 50px;
    }

    .HeaderNav 
    {
        display: none;
        flex-direction: column;
        background: var(--ColorArakionBlue);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 1rem;
        z-index: 20;
    }

    .HeaderNav.show 
    {
        display: flex;
    }

    /*.SectionMarkerButton */
    /*{*/
    /*    opacity: 0; !* Fade out *!*/
    /*    transition: opacity 0.3s ease;*/
    /*    pointer-events: none;*/
    /*}*/
}

/*@media (min-width: 769px) */
/*{*/
/*    .SectionMarkerButton */
/*    {*/
/*        opacity: 1; !* Ensure visible with fade-in *!*/
/*        pointer-events: auto;*/
/*        transition: opacity 0.3s ease;*/
/*    }*/
/*}*/

.HeaderNav a
{
    color: var(--ColorArakionGoldLight);
    text-decoration: none;
    text-align: center;
}

.HeaderNav a:hover 
{
    color: var(--ColorArakionGold); /* your theme highlight */
}

.HeaderRight
{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    padding-right: 2rem;
}

.HeaderRight a
{
    color: var(--ColorArakionGoldLight);
    text-decoration: none;
    text-align: center;
}

.HeaderRight a:hover
{
    color: var(--ColorArakionGold); /* your theme highlight */
}

.Support 
{
    border-right: 1px solid #555;
    padding-right: 1rem;
}



/*--- End Section ----------------------*/

/*--- FOOTER ---------------------------*/
/*--------------------------------------*/
.FooterBar 
{

    width: 100%;
    max-width: var(--SectionWidthMax);
    min-width: var(--SectionWidthMin);


    left: 50%;    /* TODO: This needs adjusted. It should be 50% I'm just guesstimating to fix a minor visual issue. */
    transform: translateX(-50%);                /* Center the header itself */

    z-index: 10;

    /*background-image: url('Images/VinesTiling.webp'); !* adjust path *!*/
    /*background-repeat: repeat-x; !* tile in both directions *!*/
    /*background-size: auto 128px;     !* default size (natural image size) *!*/

    /*background-color: rgba(19, 38, 51, 0.8); !* semi-transparent overlay color *!*/
    background-color: var(--ColorAtlusBlueDark);
    /*background-blend-mode: multiply;*/
    opacity: 1;
    
    font-family: var(--FontBody), serif;
    color: var(--ColorArakionGoldLight);
    text-align: center;
    padding: 2rem 1rem;
    font-size: 0.9rem;
    position: relative;
    flex-shrink: 0;
}

.FooterSocials 
{
    margin-top: -0.75rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    border: none;
    outline: none;
    box-shadow: none;
}


.FooterSocialsLeft
{
    justify-content: left;
}

.FooterSocials img 
{
    width: 46px;
    height: 46px;
    padding: 4px;
    filter: grayscale(0.65);
    transition: filter 0.3s ease;
}

.FooterSocials img:hover 
{
    filter: grayscale(0);
}

.FooterRating img 
{
    width: 64px;
    margin-bottom: 2rem;
}

.FooterLegal 
{
    margin-bottom: 2rem;
}

.FooterLogo img 
{
    width: 150px;
}


/*--- Scale ------------------------*/
/*-----------------------------------------*/



/*--- End Section ----------------------*/


/*--- HERO SECTION ------------------------*/
/*-----------------------------------------*/

.HeroImageBreak{ background-image: url('Images/AtlusPageBreak.webp'); }
.HeroImageHeader{ background-image: url('Images/AtlusCardsHeaderBanner.webp'); }
.HeroImageStepIn{ background-image: url('Images/BannerTavern.webp'); }
.HeroImageSpace{ background-image: url('Images/BannerSpace-scaled.webp'); }
.HeroImageHolodeck{ background-image: url('Images/HeaderHolodeck.webp'); }
.HeroImageHanger{ background-image: url('Images/BannerHanger.webp'); }
.HeroImageBigBreak{ background-image: url('Images/WebsitePageBreakLarge-scaled.webp'); }

.ImageLogoArakion
{
    background-image: url('Images/LogoArakion.png');
}

.HeroScaleBox
{
    width: clamp(50%, 80vw, 100%);
    transition: width 0.3s ease;
}

.HeroFaux,
.Hero
{
    width: 100%;
    max-width: var(--SectionWidthMax);
    min-width: var(--SectionWidthMin);
    margin: 0 auto;
    /*height: 100vh;*/

    position: relative;
    top: 0;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;

}

.HeroImage
{
    background-size: calc(3240px * var(--BackgroundScale));
}

.Hero::before
{
    content: '';
    opacity:  0.5;
}

.Hero::after
{
    content: '';
    opacity:  1;
}

.HeroGrayscale
{
    filter: grayscale(1);
    transition: filter 1s ease-in-out;
}

.HeroGrayscale.active
{
    filter: grayscale(0);
}

.HeroWrapper
{
    width: 100%;
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.HeroShadow
{
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.4), 20px 0 40px rgba(0, 0, 0, 0.3), -20px 0 40px rgba(0, 0, 0, 0.3);
}

.HeroInner
{
    width: 70vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-size: cover;
    background-position: center;

    z-index: 1;
}

.HeroContentBox
{
    z-index: 2;
    text-align: center;
    padding: 1rem;
    max-width: 1000px;
    margin: 0 auto;

}

.HeroContentBox h1
{
    font-size: calc(3rem * var(--HeroScale));
    /*font-weight: bold;*/
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.HeroContentBox p
{
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

/*--- SPLIT  -----------*/
.HeroSplit 
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; /* ensures vertical centering for wrapped items */
    text-align: center;  /* centers text content on small screens */
    max-width: 1400px;
    margin: 0 auto;
    gap: 2rem;
    padding: 2rem;
}


.HeroVideo 
{
    flex: 1 1 50%;
    min-width: 320px;
    display: flex;
    justify-content: center;
}

.HeroVideo iframe 
{
    width: calc(560px * var(--HeroScale));
    aspect-ratio: 16 / 9;
    height: auto;
    max-width: 100%;
    border: none;
    display: block;
    margin: 0 auto;
}

.SectionRedBottom
{
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Centers the text horizontally */
    margin: 0; /* Removes default margin */
    overflow-wrap: break-word;
}
.SectionRedTextBottom
{
    font-family: var(--FontBody), serif;
    color: var(--ColorArakionGoldLight);
    width: 20vw;
    bottom: 7rem; /* Offset from the bottom */
}

.SectionRedButtonBottom
{
    bottom: 4rem; /* Offset from the bottom */
}

.HeroButtons
{
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.FeatureContainer 
{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 2rem auto 0 auto;
    padding: 0 1rem;
    width: 100%;
    align-items: center;    
}

.FeatureCard 
{
    width: 300px;
    text-align: center;
}

.FeatureCard img
{
    width: 100%;
}

.FeatureCard h3
{
    display: -webkit-box;
    -webkit-line-clamp: 1; /* limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden; 
}

.FeatureCard p
{
    font-size: clamp(0.8rem, calc(1rem + 1vw), 1.3rem);
    display: -webkit-box;
    -webkit-line-clamp: 4; /* limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/*--- Button ------------------------*/
/*-----------------------------------------*/

.CtaButton
{
    color: var(--ColorArakionGold);
    background: var(--ColorWoadBlue);
    border: 2px solid var(--ColorArakionGold);
    padding-left: 1.1rem;
    padding-right: 0.0rem;
    font-size: 1.2rem;
    font-weight: bold;
    font-family: 'Rajdhani', sans-serif;
    border-radius: 999px; /* capsule shape */
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 1.0rem;
    height: 48px; /* Set fixed height for perfect alignment */
    text-decoration: none;
}

.CtaText
{
    transition: color 0.3s ease;
    line-height: 1;
}


.CtaPlus
{
    color: var(--ColorWoadBlue);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    background: var(--ColorArakionGold);
    font-size: 2.5rem;
    font-weight: bold;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
    border-radius: 999px; /* capsule shape */
    flex-shrink: 0;
}

.CtaButton:hover
{
    background: var(--ColorArakionGold);
    border-color: var(--ColorArakionGold);
}

.CtaButton:hover .CtaText
{
    color: var(--ColorWoadBlue);
}

.CtaButton:hover .CtaPlus
{
    transform: rotate(90deg);
}

/*--- End ---------------------------------*/



.ScrollIndicator
{
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 3;
}

/*--- End Section ----------------------*/

/*--- Section Marker ----------------------*/
/*-----------------------------------------*/

.SectionMarker
{
    position: absolute;
    /*left: clamp(1rem, 4vw, 4rem);*/
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: 'Rajdhani', sans-serif;
    z-index: 2;
}

.SectionMarker .Number
{
    color: var(--ColorArakionGold);
    font-size: 2.5rem;
    font-weight: 500;
}

.SectionMarker .Line
{
    background-color: var(--ColorArakionMoss);
    width: 40px;
    height: 3px;
    margin: 0rem 0;
}

.SectionMarkerLabel
{
    color: var(--ColorArakionGoldLight);
    font-family: var(--FontBody), serif;
    font-size: 1.75rem;
    transform: rotate(90deg);
    transform-origin: bottom left;
    margin-left: 0.25rem;
    margin-top: -1rem;
}

.PadForSectionMarker
{
    padding-left: 10rem;
}

/*--- End Section ----------------------*/


/*--- Fill Bar ----------------------*/
/*-----------------------------------------*/

.ScrollProgressBar 
{
    position: fixed;
    top: 0;
    width: 8px;
    height: 100vh;
    background-color: var(--ColorArakionSoil);
    z-index: 9;
    /* left is now dynamically set via JS */
}

.ScrollProgressFill 
{
    width: 100%;
    height: 0%;
    background-color: var(--ColorArakionGold); /* fill color */
    transition: height 0.3s ease-out;
}

/*--- End Section ----------------------*/


.SectionMarkerButton 
{
    /*position: fixed;*/
    /*bottom: 4rem;*/
    /*right: 5rem;*/
    /*z-index: 10; !* Ensure it stays on top *!*/

    position: relative;
    bottom: -11rem;
    right: 5.6rem;
    z-index: 10; /* Ensure it stays on top */
}

.ButtonSection
{
    /*border: none;*/
    /*outline: none;*/
    /*color: var(--ColorArakionBlue);*/
    /*background: var(--ColorArakionBlueTransparent);*/
    /*padding-left: 2.0rem;*/
    /*padding-right: 0.0rem;*/
    /*font-size: 1rem;*/
    /*font-weight: bold;*/
    /*font-family: var(--FontReadable), serif;*/
    /*cursor: pointer;*/
    /*display: inline-flex;*/
    /*align-items: center;*/
    /*gap: 1.0rem;*/
    /*height: 48px; !* Set fixed height for perfect alignment *!*/
    /*width: 250px;*/
    
    /*opacity: 0;*/
    /*transform: translateY(50px);*/
    /*transition: opacity 0.5s ease, transform 0.5s ease;*/

    border: none;
    outline: none;
    background: rgba(1, 1, 1, 0);
    opacity: 0;
}

.ButtonSection.IsVisible
{
    opacity: 1;
    transform: translateY(0);
}

.ButtonSection:hover
{
    /*background: var(--ColorArakionGold);*/
    /*border-color: var(--ColorArakionGold);*/
}

.ButtonSectionArrow 
{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0);
    /*background: var(--ColorArakionBlue);*/
    font-size: 2rem;
    font-weight: bold;
    transition: background 0.3s ease, color 0.3s ease;
    border-radius: 2px;
    flex-shrink: 0;
    margin-left: auto;
    /* Cube stays static */
}

.ArrowIcon 
{
    transform: rotate(90deg);
    transition: transform 0.3s ease;
    display: inline-block; /* Needed for transform to work on span */
    color: var(--ColorArakionGoldLight);
}

.ButtonSection:hover .ArrowIcon 
{
    transform: rotate(90deg) translateX(5px);
}

/*--- Effects -----------------------------*/
/*-----------------------------------------*/

.EffectHidden
{
    opacity: 0;
}

.FadeEffect 
{
    transition: opacity 1.0s ease;
    opacity: 1;
}

.FadeEffect.fade-out 
{
    opacity: 0;
}

.FadeEffect.fade-in 
{
    opacity: 1;
}

/*--- Utilities -----------------------------*/
/*-----------------------------------------*/
.ScrollAnchor 
{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    pointer-events: none;
}

.ForceHidden
{
    visibility: hidden;
}

/*--- Timeline -----------------------------*/
/*-----------------------------------------*/
#timeline-nav li:hover {
    text-decoration: underline;
}

/*--- Socials -----------------------------*/
/*-----------------------------------------*/
.FooterSocials a 
{
    color: var(--ColorArakionGold);
    transition: color 0.3s ease;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.FooterSocials a:hover 
{
    color: var(--ColorArakionRed);
}


/**/


/*------------------------------------------------*/
/*--- Text ---------------------------------------*/

.text-gold {  color: #ffd097; }
.TextColorGold {  color: #ffd097; }
.TextScaleMedium {  font-size: 1.1rem; }
.TextScaleLarge {  font-size: 1.25rem; }
.AtlusTextScaleHeader { font-size: 2.75rem; }
.TextSetFontLucky { font-family: 'Luckiest Guy', sans-serif !important; }
.TextShadowed { text-shadow: 1px 1px 3px rgba(0,0,0,0.6); }

/*--- End --------------------------------------*/



/*------------------------------------------------*/
/*--- Header -------------------------------------*/

.cp-header
{
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;

    max-width: 2400px; /* or 3200px if you want it that wide */
    width: 100%;

    background-color: rgba(12, 72, 175, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 9px;
    font-family: 'Luckiest Guy', sans-serif !important;
    font-size: 20px;
}


/*--- End --------------------------------------*/


.SectionBackgroundFixed {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 4rem 0;
}

.FixedBackgroundPanel {
    width: 3400px;        /* fixed width panel */
    max-width: 100%;      /* scale down on mobile */
    margin: 0 auto;       /* center on page */
    position: relative;   /* for stacking */
    background-image: url('https://atluscards.com/wp-content/uploads/2025/07/HeaderBanner-scaled.webp');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 1200px auto;  /* keep image always 1200px wide */
}



.cp-masthead,
.cp-masthead__wrapper,
.cp-masthead__effects {
    display: none !important;
}

.ImageHero {
    background-image: url('https://atluscards.com/wp-content/uploads/2025/07/HeaderBanner-scaled.webp');
}

.AtlusBackgroundImage
{
    width: 2600px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    background-size: 2600px;
    background-repeat: no-repeat;
    background-position: center top;

    text-align: center;

    display: flex;
    justify-content: center;
    gap: 20px; /* spacing between columns */
    flex-wrap: wrap;
}

.ColumnCentered {
    width: 300px;
    margin: 0 auto;
}

.AtlusBackgroundImageFlexed
{
    width: 100%;
    max-width: 2600px;
    margin: 0 auto;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    text-align: center;
    color: white;
    padding: 40px 0;
}

.AtlusContentWrapper
{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1200px;   /* or whatever fits your design */
    width: 100%;
    padding: 40px 0;
    gap: 20px;           /* space between chart blocks */
    box-sizing: border-box;
}

.BackgroundFixedWidth {
    position: relative; /* Allows positioning of pseudo-element */
    overflow: hidden; /* Important to contain the pseudo-element if it extends beyond */
}

.BackgroundFixedWidth::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3400px; /* Your desired fixed width for the background */
    height: 100%;
    background-color: #f0f0f0;
    z-index: -1; /* Puts the background behind the content */
}

/* Optional: Add some padding to your inner block if needed */
.BackgroundFixedWidth > .wp-block
{
    padding: 20px; /* Adjust padding as needed for your content inside the group */
}

.PaddingInline20
{
    padding-inline: 15px;
}

.BackgroundBox
{
    background-color: #f0f0f0; /* Light gray, totally customizable */
    width: 3400px;              /* Fixed width */
    margin-left: auto;
    margin-right: auto;
    padding: 20px;


    text-align: center;        /* Centers inline content like text and buttons */
    display: flex;             /* For deeper control over layout */
    flex-direction: column;    /* Keep everything stacked vertically */
    align-items: center;       /* Centers block elements horizontally */

}

.NoPadding {
    padding: 0 !important;
}

.NoSpacing {
    padding: 0 !important;
    margin: 0 !important;
}

.PaddingNegative
{
    padding: -20px;
}


.MarginNone {
    margin: 0 !important;
}

.SetPositionAbsolute
{
    position: absolute;
}

.SetZIndex0
{
    z-index: 0;
}
.SetZIndex1
{
    z-index: 1;
}




.site-footer {
    background: #1a0e07;
    color: #fff;
    padding: 2rem;
    font-family: sans-serif;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-nav a,
.footer-links a,
.language-selector a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}

.footer-lang-social {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.social-icons a {
    margin-right: 0.5rem;
    font-size: 1.2rem;
    color: #fff;
}

.footer-bottom {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.branding img {
    display: block;
    margin-bottom: 0.5rem;
}

.esrb {
    max-width: 200px;
}

.esrb img {
    display: block;
    margin-bottom: 0.5rem;
}

.esrb ul {
    list-style: none;
    padding: 0;
    font-size: 0.85rem;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem; /* Optional side padding for smaller screens */
}

.BlockPadding
{
    padding-block-start: 27px !important;
}