/*
Theme Name:   Remote X
Theme URI:    https://remote-expeditions.com
Description:  RemoteX Travel theme
Author:       Tristan Quevilly
Author URI:   https://remote-expeditions.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.0
Version: 1.2
Tags: Travel
Text Domain: remotex
*/


/* 

? THEME FOUNDATION : OVERRIDE WORDPRESS' DEFAUT BEHAVIOR

*/

html {
    color-scheme: light dark;
    scroll-behavior: smooth;
    /*  overflow-x:hidden */
    /*  WARNING: I added this to prevent an issue with the arrow button that overflows when centered. conequently it was adding an overflow to the mobile menu that was set to 100% width, but it was inheriting the 100% width from the body where the arrow button was overlapping outside of the bounds... Check if it does not cause further issues, it can be tricky in some cases. 
    BEWARE OVERFLOW HIDDEN BREAKS ALL STICK BEHAVIOUR IN THE SITE */
}

*,
*::before,
*::after {
    box-sizing: border-box
}

:root {
    --site-max-width: 1440px;
    --narrow-width: 1000px;
}

.site-max-width {
    width: var(--site-max-width);
}

body {
    font-family: var(--body-font);
    font-size: var(--text-m);
    color: var(--text-body);
    min-height: 100dvh;
    /*  place-items: center;  REMOVED BECAUSE IN ARC ITEMS ARE PLACED AT THE CENTER... REALLY WEIRD */
    background-color: var(--bg-body);
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden;
    margin: 0;
}

@media (min-width:992px) {
    .site-wrapper {
        padding-left: var(--space-s);
        padding-right: var(--space-s);
        margin-inline: auto;
    }

    .section-max-width {
        width: calc(var(--site-max-width) - var(--space-s) * 2);
    }

}

@media (max-width:991px) {
    .site-wrapper {
        padding-left: var(--space-xs);
        padding-right: var(--space-xs);
    }

    .section-max-width {
        width: calc(var(--site-max-width) - var(--space-xs) * 2);
    }

}


figure {
    margin: 0
}


img:not(.acf-map img, .spike-box img, .avatar img, .reveal-card img, .image-overlay-card img, .screen-height img, .hero-card img, .card-media img),
video {
    font-style: italic;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-radius: var(--radius-s);
}


/* 
*
? CONTENT GRID
*
*/

.content-grid {
    /* THIS CAN BE EDITED ON EACH PROJECT */
    --padding-inline: 1rem;
    --content-max-width: 800px;
    --breakout-max-width: 1140px;
    /* DON'T EDIT THE PART BELOW EDIT JUST THE PART ON TOP */
    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
    display: grid;
    grid-template-columns: [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width)) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid> :not(.content-narrow, .content-full-width),
.content-full-width> :not(.content-narrow, .content-full-width) {
    grid-column: breakout;
}

.content-grid>.content-narrow {
    grid-column: content;
}

.content-grid>.content-full-width {
    grid-column: full-width;
    display: grid;
    grid-template-columns: inherit;
}

/*
ORIGINAL // DEACTIVATED BECAUSE IT CAUSE ISSUE WHEN I WANT A FULL WIDTH BANNER WITH 2 COLUMNS => THE IMAGE WAS GETTING 100% WIDTH INSTEAD OF FITTING IN IT'S COLUMN THE NEW CODES ARE JUST BELOW WHERE I TARGET MORE SPECIFICALY THE HERO BANNER
img.content-full-width,
.content-grid>.content-full-width figure,
.content-grid>.content-full-width figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    grid-column: full-width;
    } */



img.content-full-width,
.content-grid>.hero-banner.content-full-width figure,
.content-grid>.hero-banner.content-full-width figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    grid-column: full-width;
}

/* Ensure video background spans full grid width when block is full width */
.wp-block-remote-x-blocks-video-background-hero.content-full-width .video-background-hero__media-wrapper {
    grid-column: full-width;
}


/* ADD-ON : To avoid adding 'vertical-margin' to each section, here is a fix */

.content-grid {
    row-gap: var(--space-xl);
}



/*
* 
* 
* TYPOGRAPHY
* 
* 
**/


/* make the higlight of the site */

::selection {
    background: var(--primary);
    color: var(--dark);
}

.content-area b,
.content-area strong {
    color: var(--text-title);
}



/***********************************

? MAIN COMPONENTS

*************************************/



/**
*
* HAMBURGER MENU
*
*/



.burgerBox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 3rem;
    height: 3rem;
    margin: 0 0rem 0rem 0rem;
}

.burger {
    position: relative;
    width: 2rem;
    height: 0.275rem;
    transition: all 0.35s;
}

.burger>* {
    position: absolute;
    width: 2rem;
    height: 0.275rem;
    background-color: var(--light);
    transition: all 0.35s;
}

.burger-top {
    transform: translateY(-250%);
}

.burger-bottom {
    transform: translateY(250%);
}

.option-3 .burgerBox:hover .burger {
    transform: rotate(180deg);
    transition: all 0.7s;
}

.option-3 .burgerBox:hover .burger-top {
    transform: rotate(45deg);
    transition: all 0.875s;
}

.option-3 .burgerBox:hover .burger-middle {
    transform: scaleX(0);
    transition: all 0.4375s;
}

.option-3 .burgerBox:hover .burger-bottom {
    transform: rotate(315deg);
    transition: all 0.6125s;
}


.burger.open .burger-top {
    transform: rotate(45deg) translateY(0);
    transition: all 0.875s;
}

.burger.open .burger-middle {
    transform: scaleX(0);
    transition: all 0.4375s;
}

.burger.open .burger-bottom {
    transform: rotate(-45deg) translateY(0);
    transition: all 0.6125s;
}

.burgerBox:hover .burger {
    transform: rotate(180deg);
    transition: all 0.7s;
}


/* 
! I have added the following snippet to fix the hamburger menu that was not closing correctly when I was closing the menu
 */

/* When the checkbox is checked, apply the transformation */
#check:checked+label .burger .burger-top {
    transform: rotate(45deg) translateY(0);
    transition: all 0.875s;
}

#check:checked+label .burger .burger-middle {
    transform: scaleX(0);
    transition: all 0.4375s;
}

#check:checked+label .burger .burger-bottom {
    transform: rotate(-45deg) translateY(0);
    transition: all 0.6125s;
}

/* Reset transformations when not checked */
#check:not(:checked)+label .burger .burger-top {
    transform: translateY(-250%);
    transition: all 0.875s;
}

#check:not(:checked)+label .burger .burger-middle {
    transform: scaleX(1);
    transition: all 0.4375s;
}

#check:not(:checked)+label .burger .burger-bottom {
    transform: translateY(250%);
    transition: all 0.6125s;
}


/*

? HERO HEADER

*/

.hero-header {
    max-height: 600px;
    overflow: hidden;
}

.hero-header img {
    width: 100%;
    /* This makes the image responsive */
    height: 100%;
    /* This might stretch the image; if it's an issue, we can adjust it */
    object-fit: cover;
    /* This helps maintain aspect ratio */
}


/* 

? CARD TRICK WITH BACKGROUND IMAGE

=> HOW TO USE ? 
    - ** Add a gradient overlay ** : simply add the ".overlay-gradient-dark" to the "figure" TAG. The class ".overlay-gradient-dark" is located in "utilities" section
    - ** Control the height of the banner ** : simply add the "aspect-5-2" utility to the "hero-banner" class. 

*/


.hero-banner {
    display: grid;
    grid-template-areas: "stack";
    position: relative;
    /* Position content relative to the parent // Property added in order to make the gradient overlay work */
    max-width: 1440px;
    width: 100%;
}

.hero-banner.center {
    place-items: center;
}

.hero-banner>* {
    grid-area: stack;
    position: relative;
    /* Position content relative to the parent // Property added in order to make the gradient overlay work */
    z-index: 2;
}

.hero-banner figure {
    position: relative;
    /* Position content relative to the parent // Property added in order to make the gradient overlay work */
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /* Ensure there's no padding affecting the overlay */
    overflow: hidden;
    /* Ensure the overlay doesn't overflow the figure */
}


.hero-banner.content-full-width .overlay-gradient-ltr {
    grid-column: full-width;
    z-index: 2;
}



/* 

? Hero Card with Background Image

*/


/*

* HOW TO USE 
You can use modifiers at the top level such as 
- backdrop-blur and even txeak the blur with .blur-m, .blur-l, .blur-xl
- backdrop-dark to control the overlay darkness over the image on Hover. Leave empty and no overlay.

* Gradient overlay for the text:
- .overlay-gradient-btt or ltr to control the direction of the gradient (Note : I think this is not useful anymore. Instead just use .bg-gradient-dark-btt)
- .height-60 , 50, etc... to modify the height of the wrapper 
- .opacity-80, 70, etc... to control the opacity of the gradient

* Gradient background behind the text:
- .bg-gradient-dark-btt added to the block .stack-content

* To add a zoom effect to the image: 
- Add scale-s, scale-m, scale-l to the image in gutenber (<figure>) to control the zoom level of the image. Leave empty and no zoom. 

Then for the the text you can use:
- .translate-y-75 at the text block level or other value to control the slide up of the text. Leave empty and all the text will be visible.




/******************************************

? LINKS

******************************************/


/*

? Default Links

*/

a {
    text-decoration: underline;
    text-decoration-color: var(--primary);
    transition: all .2s ease-in;
    color: var(--text-title);
}

a:hover {
    text-decoration-color: var(--text-title);
}

a.active {
    text-decoration-color: var(--primary);
    /* the active classe can be added dynamically for menus using this php function : <?php echo ($_SERVER['REQUEST_URI'] == '/' ? 'active' : ''); ?> => replace "/" but the link */
}



/*

? Main Links

*/
/*
.site-main li a, // deactivated => it polluts my sidebars because too specific. But check if it breaks elements...
.site-main p a,
*/
#main-content p a,
#main-content li a,
.underline-magical a,
.list-chevron a {
    text-decoration: underline;
    text-decoration-color: var(--primary);
    transition: all .2s ease-in;
    color: var(--text-title);
    font-weight: 900;
    vertical-align: top;
}

/* .site-main li a, // deactivated => it polluts my sidebars because too specific. But check if it breaks elements...
.site-main p a,
*/
#main-content p a,
#main-content li a,
.underline-magical a,
.list-chevron a {
    background-image: linear-gradient(120deg, var(--primary) 0%, var(--primary));
    background-repeat: no-repeat;
    background-size: 100% 0.2em;
    background-position: 0 88%;
    transition: background-size 0.25s ease-in;

}

/*.site-main li a:hover, // deactivated => it polluts my sidebars because too specific. But check if it breaks elements...
.site-main p a:hover, */
#main-content p a:hover,
#main-content li a:hover,
article a:hover,
.underline-magical a:hover,
.list-chevron a:hover {
    background-size: 100% 88%;
}


.no-ul a {
    /* Created this exception because sometimes I don't want to have style for some links like breadcrumbs IN the content */
    background-image: none !important;
    background-size: 0 !important;
    background-position: 0 0 !important;
    transition: none !important;
    text-decoration: none !important;
    font-weight: unset !important
}



/*

? Fancy Link

*/

.fancy-link,
.single-post figcaption a {
    text-decoration: none;
    color: var(--primary);
    position: relative;
}

.fancy-link.dark {
    color: var(--dark);
}

.fancy-link::after,
.single-post figcaption a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 250ms ease-in;
}

.fancy-link:hover::after,
.single-post figcaption a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

a.tag:hover {
    background-color: var(--primary);
    color: var(--dark);
}


/******************************************

? COMPONENTS

******************************************/


/*

? Page Title Bar for Blog

*/


/* @media (min-width: 1025px) { */
@media (min-width: 225px) {


    .page-title-bar,
    .heading-right-bar {
        position: relative;
        background-color: var(--bg-surface);
        width: max-content;
        padding-right: 16px;
        z-index: 4;
    }

    .heading-left-bar {
        position: relative;
        background-color: var(--bg-body);
        width: max-content;
        padding-left: 16px;
        z-index: 4;
    }

    .page-title-bar:after,
    .heading-right-bar:after {
        content: '';
        position: absolute;
        background-color: var(--bg-surface);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .heading-left-bar:after {
        content: '';
        position: absolute;
        background-color: var(--bg-body);
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        z-index: -1;
    }

    .page-title-bar:before,
    .heading-right-bar:before {
        content: '';
        position: absolute;
        width: 300vw;
        height: 4px;
        background: var(--primary);
        left: 0px;
        bottom: .5em;
        z-index: -1;
    }

    .heading-left-bar:before {
        content: '';
        position: absolute;
        width: 300vw;
        height: 4px;
        background: var(--primary);
        right: 0px;
        bottom: .5em;
        z-index: -1;
    }

    .page-hero-container p {
        max-width: 650px;
        word-wrap: break-word;
    }
}

.page-hero-container {
    overflow: hidden;
    max-width: var(--site-max-width);
    min-height: 220px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .page-hero-container {
        min-height: unset;
        /* or you can set it to 0 if you want */
    }
}


/*                                                                                                                                                                                                       /**

? CARDS
 cards displayed on the tour page listing

*/

/* I DEACTIVATED THE NESTED CSS BECAUSE PERFMATTERS DOES NOT RECOGNIZE THE NESTED CSS AND REMOVED IT WHEN USING "REMOVE UNUSED CSS" FUNCTION */

.card {
    gap: var(--space-xs);
}

.card h2 {
    font-size: var(--text-xl);
    color: var(--text-title);
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.card h3 {
    font-size: var(--text-l);
    color: var(--text-title);
    margin-bottom: 1rem;
    margin-top: 1rem;
}


.card h4 {
    font-size: var(--text-m);
    color: var(--text-title-d-1);
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.card p {
    font-size: var(--text-s);
    margin-bottom: 1rem;
    margin-top: 0;
}

.card ul {
    margin-left: 0px;
    padding-left: 0px;
    list-style-type: none;
    line-height: 1.7;
    margin-bottom: 5rem;
}

.card li span {
    font-size: var(--text-s);
    color: var(--text-title);
    display: flex;
    /* The following declaration allows to align the icons with the text aligned vertically on the same line. */
    align-items: center;
    gap: 10px;
}


/*

? TOUR CARD MODIFIERS

*/

.tour-card {
    position: relative;
    /* other styles like width, margin, etc. */
    height: 100%;
    /* Makes all cards the same height */
    min-height: 450px;
    overflow: hidden;
    max-width: 400px;
    min-width: 285px;
}

.tour-card .tour-price {
    position: absolute;
    bottom: 10px;
    /* Adjust the distance from the bottom */
    right: 10px;
    /* Adjust the distance from the right */
    /* Additional styling for the price */
    font-size: 1.2em;
    color: #333;
}

.ribbon-wrap {
    width: 150px;
    height: 150px;
    position: absolute;
    top: -10px;
    left: -10px;
    pointer-events: none;
}

.ribbon {
    width: 230px;
    /* font-size: 0.918rem; */
    text-align: center;
    color: var(--dark);
    padding: 8px 0;
    background: var(--primary);
    position: absolute;
    transform: rotate(-45deg);
    right: -17px;
    top: 29%;
}

.hover:hover {
    background: var(--bg-surface-l-1);
    transition: all .3s ease-in-out;
}


/*

? IMAGE OVERLAY CARD

*/

.image-overlay-card>* {
    grid-area: stack;
}

.image-overlay-card {
    grid-template-areas: "stack";
    display: grid;
    background: var(--dark);
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-s);
}

.image-overlay-card img {
    position: relative;
    vertical-align: top;
    transition: opacity 0.6s ease-in-out, transform 0.8s ease-in-out;
    /* Added transform transition */
    height: 100%;
    width: 100%;
    object-fit: cover;
    backface-visibility: hidden;
    /* Prevent flickering */
}

.image-overlay-card:hover img {
    opacity: 0.7;
    transform: scale(1.005);
    /* Scale up effect on hover */
}

.image-overlay-card .image-overlay-card__details {
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: var(--space-m);
    color: var(--text-body);
    width: 100%;
}

.image-overlay-card .image-overlay-card__details h3 {
    font-size: var(--text-xl);
    font-weight: 900;
    transition: transform 0.6s ease-in-out;
    margin-bottom: 0px;
}

.image-overlay-card:hover .image-overlay-card__details h3 {
    transform: translateY(-30px);
}

.image-overlay-card .image-overlay-card__details p {
    contain-intrinsic-block-size: auto 100px;
    margin: 0px 30px 0 0px;
    font-size: var(--text-s);
    opacity: 0;
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.image-overlay-card:hover .image-overlay-card__details p {
    opacity: 1;
    transform: translateY(-25px);
}


.stack {
    display: grid;
    grid-template-areas: "stack";
    position: relative;
    overflow: hidden;
}

.stack>* {
    grid-area: stack !important;
    /* I added !important because the content-grid layout framework was messing with the stack cards and the elements inside it, especially the gradient overlay and content where the width:100% was not working...*/
    z-index: 2;
}


.stack img {
    position: relative;
    /* Position content relative to the parent // Property added in order to make the gradient overlay work */
    width: 100%;
    height: 100% !important;
    margin: 0;
    padding: 0;
    /* Ensure there's no padding affecting the overlay */
    overflow: hidden;
    /* Ensure the overlay doesn't overflow the figure */
    object-fit: cover;
}

.stack figure {
    margin: 0;
}

.stack .stack-content {
    position: absolute;
    z-index: 4;
}

.stack .stack-content>* {
    position: relative;
    /* This is needed to make the z-index work */
    z-index: 5;
    /* the Z-index here is important to make sure that the text is always on top of a bg-gradient-dark-btt */
}



.stack.overlay-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Adjust the opacity as needed */
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 3;
    /* Ensure it's above the image but below the text */
    will-change: opacity;
}

.stack.overlay-dark:hover::before {
    opacity: .8;
}


.stack-hidden-text {
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0;
    transition: max-height 1s ease, opacity 1s ease-in-out;
}

.stack:hover .stack-hidden-text {
    max-height: 220px;
    /* Set this closer to the actual content height */
    transition: max-height 1s ease, opacity 1s ease;
    opacity: 1;
}

/* Focus effect for mobile
This intend to make sure that the text is also hidden on mobile and revealed on a Tap */
.stack:focus .stack-hidden-text,
.stack:focus-within .stack-hidden-text {
    max-height: 120px;
    opacity: 1;
}

/* Ensure .stack can receive focus */
.stack {
    outline: none;
    /* Remove default focus outline */
}

.overlay-gradient-ltr {
    content: '';
    position: absolute;
    background: linear-gradient(to right, #000000cc, #fff0);
    height: 100%;
    width: 50%;
    /* you can use modifiers in the editor such as width-40 */
    left: 0;
    z-index: 3;
}

.overlay-gradient-btt {
    content: '';
    position: absolute;
    background: linear-gradient(to top, #000000cc, #fff0);
    width: 100%;
    height: 50%;
    /* you can use modifiers in the editor such as height-40 */
    bottom: 0;
    z-index: 3;
}


/* Modifiers */

.stack-content:hover {
    transform: translateY(0%);
}

.stack:hover>.stack-content {
    transform: translateY(0%);
}


.stack:hover figure.scale-xs {
    transform: scale(1.01)
}

.stack:hover figure.scale-s {
    transform: scale(1.02)
}

.stack:hover figure.scale-m {
    transform: scale(1.03)
}




/*

? BUTTON SUPER POWER

*/

.button-super-power,
.nav-links li a.button-super-power {
    cursor: pointer;
    display: inline-flex;
    padding: 10px 20px;
    border: 1px solid var(--primary);
    background-color: var(--primary);
    color: var(--dark);
    line-height: 1em;
    border-radius: var(--radius-xs);
    text-decoration: none
}

.glow-effect {
    --glow-line-color: #fff;
    --glow-line-thickness: 2px;
    --glow-line-length: 20px;
    --glow-blur-color: #fff;
    --glow-blur-size: 5px;
    --glow-offset: 0px;
    --animation-speed: 1200ms;
    /* do not change, used for calculations */
    --container-offset: 100px;
    position: relative;
}

.glow-container {
    pointer-events: none;
    position: absolute;
    inset: calc(var(--container-offset) / -2);
    width: calc(100% + var(--container-offset));
    height: calc(100% + var(--container-offset));
    opacity: 0;
    /* outline: 3px solid blue; */
}

.glow-blur,
.glow-line {
    width: calc(100% - var(--container-offset) + var(--glow-offset));
    height: calc(100% - var(--container-offset) + var(--glow-offset));
    x: calc((var(--container-offset) / 2) + calc(var(--glow-offset) / -2));
    y: calc((var(--container-offset) / 2) + calc(var(--glow-offset) / -2));
    /* rx: 1.25rem; */
    fill: transparent;
    stroke: black;
    stroke-width: 5px;
    stroke-dasharray: var(--glow-line-length) calc(50px - var(--glow-line-length));
}

.glow-effect:is(:hover,
    :focus) :is(.glow-line,
    .glow-blur) {
    stroke-dashoffset: -80px;
    transition: stroke-dashoffset var(--animation-speed) ease-in;
}

.glow-line {
    stroke: var(--glow-line-color);
    stroke-width: var(--glow-line-thickness);
}

.glow-blur {
    filter: blur(var(--glow-blur-size));
    stroke: var(--glow-blur-color);
    stroke-width: var(--glow-blur-size);
}

.glow-effect:is(:hover,
    :focus) .glow-container {
    -webkit-animation: glow-visibility ease-in-out var(--animation-speed);
    animation: glow-visibility ease-in-out var(--animation-speed);
}

@-webkit-keyframes glow-visibility {

    0%,
    100% {
        opacity: 0;
    }

    25%,
    75% {
        opacity: 1;
    }
}

@keyframes glow-visibility {

    0%,
    100% {
        opacity: 0;
    }

    25%,
    75% {
        opacity: 1;
    }
}

.glow-effect[data-glow-animation=false] {
    --glow-line-length: 50px;
}

.glow-effect[data-glow-offset=true] {
    --glow-offset: 10px;
}

.glow-effect[data-glow-animation=grow]:is(:hover,
    :focus) .glow-container {
    scale: 1.3;
    transition: scale var(--animation-speed) linear;
}


/*

? Arrow Button V1 ->

*/

.arrow-button-wrapper a:hover {
    color: var(--text-alt)
}

.arrow-button-wrapper .arrow-button-text-link:hover .arrow-button-icon {
    transform: translate3d(8px, 0, 0)
}

.arrow-button-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    clear: both;
}

.arrow-button-wrapper .arrow-button-text-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    text-align: center;
    padding: 0;
    border-radius: 4px;
    color: var(--primary);
    text-decoration: none;
}

.arrow-button-wrapper a .arrow-button-icon svg {
    width: 1em;
    height: 1em;
}

.arrow-button-wrapper .arrow-button-text-link .arrow-button-icon {
    padding-left: .5em;
    transition: all .2s ease-in;
}


/** Flipping Arrow Button */

a.flipping-arrow-button {
    text-decoration: none;
}

a.flipping-arrow-button:hover {
    color: white;
}

.flipping-arrow-button {
    display: flex;
}

.flipping-arrow-button-text {
    margin-right: .6em;
    color: var(--primary);
    transition: all 150ms linear;
}

.flipping-arrow-button-icon {
    width: .9em;
    margin-top: .18em;
    transition: all 200ms ease-in-out;
}

.flipping-arrow-button-icon svg {
    width: 100%;
}

.flipping-arrow-button-icon svg path {
    fill: var(--primary);
}

.flipping-arrow-button:hover .flipping-arrow-button-text,
.flipping-arrow-button:focus .flipping-arrow-button-text {
    margin-left: .5em;
}

.flipping-arrow-button:hover .flipping-arrow-button-icon,
.flipping-arrow-button:focus .flipping-arrow-button-icon {
    transform: rotate(360deg);
    animation: arrow-active 300ms ease-in-out alternate infinite;
}

@keyframes arrow-active {
    from {
        margin-left: 0;
    }

    to {
        margin-left: .25em;
    }
}


/*

? ACCORDION

*/

/*
OJOOOOOO ! I've change the css recently due to a change to my FAQ injected on the templates. This might break my other FAQ block that I have created.. So pau attention !
*/

.accordion-questions-container {
    margin: 0 auto;
}

.accordion-question {
    border-bottom: 1px solid var(--border-primary);
    /* This can stay */
}

/* NEW: Style for the H3 containing the button */
.accordion-question-title {
    /* margin: 0; */
    /* Or use your .margin-vertical-0 utility class in the HTML */
    /* font-size: inherit; */
    /* Optional: if you want it to match button text size more closely than default H3 */
    /* font-weight: inherit; */
    /* Optional */
    /* line-height: inherit; */
    /* Optional */
}

/* Ensure your .margin-vertical-0 class is defined:
.margin-vertical-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
*/


.accordion-question button {
    width: 100%;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Padding might need adjustment if H3 has any, or ensure H3 has no padding */
    padding: 20px 15px;
    /* This might be better on the H3 now, or button only uses part of it */
    /* If button padding is kept, ensure H3 has no padding or it'll double up */
    border: none;
    outline: none;
    font-size: var(--text-m);
    color: var(--text-body);
    font-weight: 700;
    cursor: pointer;
}

/* This style for the span inside button can remain */
.accordion-question button span {
    text-align: left;
}

/* NEW: Styles for the answer panel div */
.accordion-answer-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.6s ease;
    /* Margin for the panel itself can be 0, padding will handle spacing for content */
    margin: 0;
}

/* Styles for paragraphs INSIDE the answer panel */
.accordion-answer-panel p {
    font-size: var(--text-s);
    line-height: 1.5;
    /* Remove individual p margins if panel handles spacing, or keep if you want space between paragraphs */
    margin: 0 0 1em 0;
    /* Example: space below paragraphs */
    padding: 0;
    /* Paragraphs themselves usually don't need padding if panel has it */
}

.accordion-answer-panel p:last-child {
    margin-bottom: 0;
    /* No margin for the last paragraph in the panel */
}


.d-arrow {
    transition: transform 0.5s ease-in;
    fill: var(--text-body);
}


/*add this class when click*/
/* Apply .show to the panel itself */
.accordion-answer-panel.show {
    max-height: 500px;
    /* Adjust as needed, ensure it's enough for longest answer */
    opacity: 1;
    /* Padding now applied to the panel when it's shown */
    padding: 0px 15px 30px 15px;
}

.accordion-question button .d-arrow.rotate {
    transform: rotate(180deg);
}

/*
? TOGGLE
*/

.toggle-content {
    font-size: var(--text-s);
    max-height: 0;
    opacity: 0;
    line-height: 1.5;
    overflow: hidden;
    transition: all 0.6s ease;
    padding: 0 15px;
    margin: 0;
}

.toggle-content.show {
    max-height: 500px;
    /* Adjust as needed based on content */
    opacity: 1;
    padding: 15px;
}

.d-arrow {
    transition: transform 0.5s ease-in;
    fill: var(--text-body);
}

.d-arrow.rotate {
    transform: rotate(180deg);
}

/* Optional: Styles for the new 'toggle' class */
.toggle {
    /* border-bottom: 1px solid var(--border-primary); */
}

.toggle button {
    width: 100%;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px;
    border: none;
    outline: none;
    font-size: var(--text-m);
    color: var(--text-body);
    font-weight: 700;
    cursor: pointer;
}

.toggle-content .facetwp-facet {
    margin-bottom: 0px
}




/*******************************************

? SINGLE LAYOUTS

*********************************************/


/*

? BLOG SINGLE POST

*/


/* Add top margin to blog post H2-H6 */

.single-post.right-sidebar> :first-child :is(h2,
    h3,
    h4,
    h5,
    h6) {
    margin-top: 1.5em;
    margin-bottom: .5em;
}


.single-post.right-sidebar> :first-child :is(p) {
    margin-top: 1em;
    margin-bottom: 1em;
}

/* 
   ==========================================================================
   PROFESSIONAL SVG BULLET SYSTEM (RESPONSIVE & UNIFIED)
   ========================================================================== 
*/

/* 1. BASE LIST LAYOUT */
main li:not(.card li, .no-bullet, .ffc_inline_form li, .checkbox-list li) {
    list-style: none;
    line-height: 1.6em;
    position: relative;
    padding-left: 0.3em;
    /* Scalable padding */
}

/* Standard indentation using 'em' to scale with text size */
main ul:not(.card ul, #itinerary ul, aside ul, .checkbox-list ul, .no-bullet ul) {
    padding-left: 0;
    margin-left: 2em;
}

/* 2. GLOBAL DEFAULT BULLET (SCALABLE & CENTERED)
   Targets all list items in 'main' including .list-check
*/
main li:not(.no-bullet, .card li, .ffc_inline_form li, .checkbox-list li)::before {
    content: '';
    position: absolute;
    left: -1.6em;
    /* Scales distance from text */
    top: 0.25em;
    /* Mathematical center for 1.6em line-height */
    width: 1.1em;
    /* Scales icon with font size */
    height: 1.1em;
    background-color: var(--primary);

    /* Corrected xmlns to 'http://www.w3.org/2000/svg' */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;

    /* Kill legacy border styles */
    border: none !important;
    transform: none !important;
}

/* 3. LEGACY CLASS MODERNIZATION */
.list-chevron li::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* 4. THEMED CUSTOM LISTS (Travel/Itinerary specific) */

main ul.list-svg-included li::before {
    background-color: var(--success);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E");
}

main ul.list-svg-excluded li::before {
    background-color: var(--error);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
}


/* Highlights (Chevron Circle) */
main ul.list-svg-chevron-right-circle li::before {
    background-color: var(--primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M507-480 384-357l56 57 180-180-180-180-56 57 123 123ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M507-480 384-357l56 57 180-180-180-180-56 57 123 123ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
}

/* Summary Check (Check Box) */
main ul.list-svg-check-circle li::before {
    background-color:var(--primary); /* Variable for your chart summary color */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
}

/* 5. SUB-BULLET DESIGN (SCALABLE CIRCLES) */
main li li:not(.no-bullet)::before {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-color: var(--primary);
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    top: 0.6em;
    /* (1.6 - 0.45) / 2 */
    left: -1.2em;
}

/* 6. HARD RESETS */
main .ffc_inline_form li::before,
main .checkbox-list li::before,
main .card li::before,
main .no-bullet li::before {
    content: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    display: none !important;
}


/* 
    * IMAGES
    * The 2 next declaration are for images in the blog post and add a margin-bottom if the image has a caption, and also another condition if the image has no caption
    */

.single-post figure,
.single-post .post-thumbnail img {
    display: block;
    /* Ensures that figure is a block-level element */
    text-align: center;
    /* Centers inline elements like images */
    margin-left: auto;
    /* Along with margin-right, this centers the figure itself if it has max-width */
    margin-right: auto;
}

.single-post figcaption {
    font-size: var(--text-s);
    font-style: italic;
    color: var(--text-subtle);
    margin-top: var(--space-2xs);
}

.single-post figure.wp-block-image img {
    display: inline;
    /* Ensures that img behaves as an inline element */
    margin: 0 auto;
    /* This will not have an effect on inline elements but is often included for completeness */
}

.content-area.single-post figure.wp-block-image img:last-child {
    margin-bottom: var(--margin-s);
    /* Adds margin if there's no caption */
}


/****************************************

? PLUGIN TWEAKS

*****************************************/


/* 

? Fluent Form Conversational Form 

*/


.frm-fluent-form {
    background-color: transparent !important;
}

.ff_conv_section_wrapper .ffc_question .ffc_q_header span .f-text {
    color: var(--text-alt) !important;
    font-weight: 900 !important;
}

.ff_conv_section_wrapper .vff-animat .o-btn-action,
.ff_conv_section_wrapper .vff-animat a .f-enter-desc,
.ff_conv_section_wrapper .vff-footer .f-nav {
    background-color: var(--primary) !important;
}

.fluentform .ff-el-form-control,
.fluentform {
    background-color: transparent !important;
    border-color: var(--primary);
    border-top-width: 0px !important;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
    border-bottom-width: 2px !important;
    border-radius: 0px !important;
    border-color: var(--primary) !important;
    width: 100%;
    line-height: 2.4rem;
}

.ff-btn-submit {
    background-color: var(--primary);
    color: var(--dark);
    border-radius: var(--radius-xs) !important;
}

.ff-btn-submit:hover {
    background-color: var(--light) !important;
}

/*
.ff-el-input--label {
    display: none;
}
    */

table.ff_repeater_table .repeat_btn {
    fill: var(--primary)
}

.repeat_btn .ff-el-repeat-buttons-list svg {
    width: 30px;
    height: 30px;
}

.ff-el-section-break hr {
    display: none;
    /* background-color: var(--border-primary-l-1); */
}

.ff-el-form-top .ff-el-section-break:not(:first-of-type) {
    margin: var(--margin-xl) 0px;
}


/* ADDED THIS FOR DARK MODE COMPATIBILITY */

.ff_conv_input.q-inner .fh2 .ffc_q_header .f-text span {
    color: var(--text-title);
}

.ff_conv_input.q-inner .fh2 .f-answer .f-radios-wrap .f-radios.f-single .f-label-wrap span {
    color: var(--text-title);
}

.ff_conv_input.q-inner .ffc_question .fh2 .f-answer .f-radios-wrap ul li,
.ff_conv_input.q-inner .ffc_question .fh2 .f-answer {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-primary);
}

.ff_conv_input.q-inner .ffc_question .fh2 .f-answer span textarea::placeholder,
.ff_conv_input.q-inner .ffc_question .fh2 .f-answer input::placeholder {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-primary);
    color: var(--text-subtle) !important;
    font-size: var(--text-m)
}

.ff_conv_input.q-inner .fh2 .ffc_q_header .ffc-counter .ffc-counter-div .counter-value span,
.ff_conv_input.q-inner .fh2 .ffc_q_header .ffc-counter .ffc-counter-div .counter-icon-container .counter-icon-span svg {
    fill: var(--primary) !important;
    color: var(--primary);

}

.ff_conv_input.q-inner .fh2 .f-sub .f-help {
    color: var(--text-subtle);
}

.ff-form-has-steps .ff-el-input--label {
    color: var(--text-title)
}


/*

? FLUENT FORM NORMAL FORM

*/

.ff-default .ff-btn-secondary:not(.ff_btn_no_style) {
    background-color: var(--primary);
    color: var(--dark);
    padding: var(--space-xs) var(--space-m);
    border-radius: var(--radius-xs);
    border: none;
}

.ff-default .ff-btn-secondary:not(.ff_btn_no_style):focus,
.ff-default .ff-btn-secondary:not(.ff_btn_no_style):hover {
    background-color: var(--light);
    color: var(--dark);
}

.fluentform .ff-el-input--label {
    margin: var(--space-xl) 0;
}

.ff-default .ff-el-input--label label {
    font-size: var(--text-xl);
    line-height: 1.4;
    font-weight: 900;
}

.fluentform .ff-el-progress-bar {
    background-color: var(--primary);
    color: var(--dark);
}

.site-wrapper .ff-el-group.ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style) {
    background-color: var(--primary);
    color: var(--dark);
}

.ff-el-group.ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style):hover {
    background-color: var(--light);
    opacity: 1;
    color: var(--dark);
}

.ff-default .ff-el-form-control {
    color: var(--text-body) !important;
}

.ff-message-success {
    border: none !important;
    color: var(--text-body) !important;
}

.site-main .fluentform .frm-fluent-form:not(.ff-form-has-steps) .ff-el-input--label,
.site-main .fluentform .ff-el-group.ff-el-form-top .ff-el-input--label {
    display: none;
}

.site-main .fluentform .ff_upload_btn.ff-btn {
    background: var(--bg-surface-l-2);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xs);
}

.site-main .ff-default .ff-el-form-control {
    line-height: 2;
}

.site-main h3.ff-el-section-title {
    margin-bottom: var(--space-m);
}



/* 

? Recaptcha

*/

.grecaptcha-badge {
    visibility: hidden;
}


/*

? TRANSLATEPRESS

*/

.site-wrapper .trp-language-switcher>div,
.site-wrapper .trp-language-switcher a,
.site-wrapper .trp-language-switcher>div>a {
    background-color: var(--bg-surface);
    color: var(--text-body);
    text-decoration: none;
    z-index: 999;
}

.site-wrapper .trp-language-switcher>div {
    box-sizing: border-box;
    border: 1.5px solid var(--border-primary);
    border-radius: var(--radius-s);
    background-color: var(--bg-surface);
    cursor: pointer;
}

.trp-ls-shortcode-language a:hover {
    background-color: var(--bg-surface-l-1);
}


/*

? ACF MAPS

*/

.acf-map {
    width: 100%;
    height: 600px;
    border: var(--bg-surface) solid 1px;
    margin: 0px;
    text-align: left;
}


/* fixes potential theme css conflict */

.acf-map img {
    max-width: 100%;
    min-width: inherit !important;
}

.trip-planning .acf-map .gm-style-iw {
    max-width: 500px !important;
}


/*

? Facet WP

*/

.fs-option-label {
    color: var(--text-body)
}

.facetwp-display-value {
    font-size: var(--text-s);
}


.facetwp-type-hierarchy .facetwp-link,
.facetwp-depth {
    margin-bottom: var(--space-3xs);
}

.facetwp-type-hierarchy .facetwp-link.checked {
    color: var(--text-title);
}

.facet-link {
    transition: hover all .4s ease;
}

.facetwp-link:hover,
.facetwp-link.checked:hover {
    color: var(--primary);
}


.facetwp-load-more {
    margin-top: var(--space-m);
    padding: var(--space-xs) var(--space-s);
    color: var(--dark);
    background: var(--primary);
    border: none;
    border-radius: var(--radius-xs);
    transition: all 0.25s ease-in-out;
}



.facetwp-load-more:hover {
    background: var(--light);
    transform: translateY(-0.1rem);
}


/*

? CORE FRAMEWORK

*/

.coreframework-panel .coreframework-class {
    text-align: left;
    background: rgba(0, 0, 0, .35);
}


/*

? WP-Esignature

*/

.document-sign-page .sign-form input {
    background: #eaeaea;
    color: var(--dark);
}


.document-sign-page .audit-wrapper .header,
.document-sign-page .audit-wrapper .main,
.esig-template-page .audit-wrapper .header,
.esig-template-page .audit-wrapper .main {
    display: none;
}

.document-sign-page #audit-trail-wrapper .footer,
.esig-template-page #audit-trail-wrapper .footer {
    margin-top: 0;
}

.document-sign-page tbody tr {
    border-top: 1px solid #00000014;
}

.document-sign-page tbody td {
    border-right: 1px solid #00000014;
}



/*******************************


? TO ORGANIZE

*********************************/


/*
.single-post p:last-child:last-of-type {
    margin-bottom: 0px;
}

.single-post p:nth-last-child(2) {
    margin-bottom: 0px;
}
*/


/*

? Masonry Grid https://codepen.io/kevinpowell/pen/yLaYxab

*/


.grid-masonry {
    --columns: 3;
    /* max-width: 60rem; */
    margin: 0 auto;
    display: column;
    columns: var(--columns);
    gap: var(--space-m);
}

.grid-masonry>* {
    break-inside: avoid;
    margin-bottom: var(--space-m);
}

@supports (grid-template-rows: masonry) {
    .grid-masonry {
        display: grid;
        grid-template-columns: repeat(var(--columns), 1fr);
        grid-template-rows: masonry;
        grid-auto-flow: dense;
        /* align-tracks: stretch; */
    }


    .grid-masonry>* {
        margin-bottom: 0em;
    }
}

.masonry-featured {
    grid-column: span 2;
}



@media (max-width: 768px) {

    .grid-masonry {
        --columns: 2;
    }
}


@media (max-width: 480px) {

    .grid-masonry {
        --columns: 1;
    }
}

/**
* VARIANT 2 COLUMNS
*/

.grid-masonry-2-col {
    --columns: 2;
    margin: 0 auto;
    display: column;
    columns: var(--columns);
    gap: var(--space-m);
}

.grid-masonry-2-col>* {
    break-inside: avoid;
    margin-bottom: var(--space-m);
}

@supports (grid-template-rows: masonry) {
    .grid-masonry-2-col {
        display: grid;
        grid-template-columns: repeat(var(--columns), 1fr);
        grid-template-rows: masonry;
        grid-auto-flow: dense;
    }

    .grid-masonry-2-col>* {
        margin-bottom: 0em;
    }
}

.grid-masonry-2-col .masonry-featured {
    grid-column: span 2;
}


/**
* VARIANT 3 COLUMNS
*/

.grid-masonry-3-col {
    --columns: 3;
    margin: 0 auto;
    display: column;
    columns: var(--columns);
    gap: var(--space-m);
}

.grid-masonry-3-col>* {
    break-inside: avoid;
    margin-bottom: var(--space-m);
}

@supports (grid-template-rows: masonry) {
    .grid-masonry-3-col {
        display: grid;
        grid-template-columns: repeat(var(--columns), 1fr);
        grid-template-rows: masonry;
        grid-auto-flow: dense;
    }

    .grid-masonry-3-col>* {
        margin-bottom: 0em;
    }
}

.grid-masonry-2-col .masonry-featured {
    grid-column: span 3;
}




.thumbnail-placeholder {
    /*   CLASS TO RECREATE. ASK CHAT GPT */
}

.quotation {
    position: relative;
    isolation: isolate;
}


.quotation::before {
    content: open-quote;
    font-family: serif;
    font-weight: 900;
    font-size: 25rem;
    color: var(--bg-surface-l-3);
    position: absolute;
    z-index: -1;
    top: 0rem;
    left: 1rem;
}

.quotation::after {
    content: no-close-quote;
}



/* Existing transform classes */

.translate-x-5 img {
    transform: translate(-5%, 0);
}

.translate-x-10 img {
    transform: translate(-10%, 0);
}

.translate-x-15 img {
    transform: translate(-15%, 0);
}

.translate-x-20 img {
    transform: translate(-20%, 0);
}

.translate-x-25 img {
    transform: translate(-25%, 0);
}

.translate-x-30 img {
    transform: translate(-30%, 0);
}

.reveal-card.translate-y-30:hover .reveal-card-content,
.reveal-card.translate-y-30:focus-within .reveal-card-content {
    transform: translateY(30%);
}

.reveal-card.translate-y-35:hover .reveal-card-content,
.reveal-card.translate-y-35:focus-within .reveal-card-content {
    transform: translateY(35%);
}


/* Adjust transform for mobile */
@media (max-width: 768px) {

    .translate-x-5 img,
    .translate-x-10 img,
    .translate-x-15 img,
    .translate-x-20 img,
    .translate-x-25 img,
    .translate-x-30 img {
        transform: translate(0%, 0);
        /* Reset transform on mobile */
        z-index: 0;
    }

    /* Ensure content is positioned at the bottom */
    .reveal-card-content {
        position: absolute;
        bottom: 25px;
        max-width: 100%;
        /* Ensure content width does not exceed card width */
        width: 100%;
        /* Ensure content takes full width of the card */
    }

    .reveal-card img {
        width: inherit;
    }

}

/* Mobile (No Hover) Overrides */
/* I Have added this snippet with ChatGPT because when I was clicking on the button, it was sliding back down and not pointing to the page it was supposed to go to 
So now it is working fine. */

@media (hover: none) {

    /* Stop scaling the card on tap/focus */
    .reveal-card {
        transform: none !important;
        transition: none !important;
    }

    /* Ensure the content doesn't slide */
    .reveal-card-content {
        transform: translateY(0) !important;
        transition: none !important;
        opacity: 1 !important;
    }

    /* Make sure all children are visible (title, excerpt, button) */
    .reveal-card-content>* {
        opacity: 1 !important;
        transition: none !important;
    }
}


/*

? MY CHECKLIST BLOCK

*/



/*

? Checkbox List (small ACF block that I created)

*/
/* 
? Checkbox List
*/

.checkbox-list {
    list-style-type: none;
    padding: 0;
    margin: 0 0 1.5em 1em;
}

.checkbox-list ul {
    padding-left: 0;
}

/* 
   FIX: Moved display:flex from 'li' to the new '.checkbox-item-wrapper' 
   This keeps the checkbox and text side-by-side.
*/
.checkbox-item-wrapper {
    display: flex;
    align-items: flex-start;
    /* Aligns checkbox to top of multi-line text */
    line-height: 1.7em;
    width: 100%;
}

.checkbox-list li {
    margin-bottom: 5px;
    /* We removed display:flex from here because the wrapper handles it now */
}

/* 
   FIX: Ensure the text container takes up remaining space 
   and handles paragraph margins correctly.
*/
.checkbox-text {
    flex: 1;
    /* Takes remaining width */
}

.checkbox-text p {
    margin: 0;
    /* Removes default paragraph margin that breaks alignment */
    display: inline-block;
    /* Helps bold text sit naturally */
}


/* --- YOUR ORIGINAL STYLING & ANIMATIONS BELOW --- */

.input-check {
    position: relative;
    display: inline-block;
    /* Added flex-shrink to stop box from squishing on small screens */
    flex-shrink: 0;
    top: 5px;
    /* Keeps your original alignment */
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    margin-right: 15px;
    transition: .5s;
    cursor: pointer;
}

.input-check::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 1px;
    width: 15px;
    height: 9px;
    border-bottom: 4px solid var(--bg-surface);
    border-left: 4px solid var(--bg-surface);
    transform: scale(0) rotate(-45deg);
    transition: .5s;
}

.input-check:hover {
    border-color: var(--primary);
}

.checkbox-item-wrapper input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

/* Your Animation Logic */
.checkbox-item-wrapper input[type="checkbox"]:checked+.input-check {
    background: var(--primary);
    border-color: var(--primary);
    animation: animate .7s ease;
}

.checkbox-item-wrapper input[type="checkbox"]:checked+.input-check::before {
    transform: scale(1) rotate(-45deg);
}

@keyframes animate {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.3, .7);
    }

    55% {
        transform: scale(1);
    }

    70% {
        transform: scale(1.2, .8);
    }

    80% {
        transform: scale(1);
    }

    90% {
        transform: scale(1.1, .9);
    }

    100% {
        transform: scale(1);
    }
}



/*

? SEARCH MODAL

*/

.search-button {
    cursor: pointer;
}


.popup-outer .search-input input {
    display: block;
    /* Ensures the search input is visible */
    z-index: 100000;
}

.popup-outer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    /* width: 100vw; */
    /* Remove or comment out */
    width: 100%;
    /* Use 100% width */
    height: 100%;
    /* Use 100% height or 100vh if needed */
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    justify-content: center;
    align-items: flex-start;
    /* box-sizing: border-box; */
    /* Often inherited, but good to ensure */
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    /* Optional: Reset margin/padding just in case */
    margin: 0;
    padding: 0;
}

.popup-outer.show {
    display: flex;
    /* Show the popup */
    opacity: 1;
    /* Fully visible */
}

.popup-box {
    width: 90%;
    max-width: 600px;
    position: relative;
    margin-top: 25%;
    /* Position the box 25% from the top of the screen */
    transform: translateY(-50px);
    /* Slightly raised from its starting position */
    opacity: 0;
    /* Initially hidden */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.popup-outer.show .popup-box {
    transform: translateY(0);
    /* Move to actual position when visible */
    opacity: 1;
    /* Make it fully visible */
}

.search-input.active .autocom-box {
    display: block;
}

.wrapper {
    max-width: 450px;
    margin: 150px auto;
}

.wrapper .search-input {
    background: var(--bg-surface-l-1);
    width: 100%;
    border-radius: 5px;
    position: relative;
    box-shadow: 0px 1px 5px 3px rgba(0, 0, 0, 0.12);
}

.search-input input {
    height: 55px;
    width: 100%;
    outline: none;
    border: 1px solid var(--bg-surface-l-1);
    border-radius: 5px;
    padding: 0 60px 0 20px;
    font-size: 18px;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    background: var(--bg-surface);
    color: var(--text-title);
}

.search-input.active input {
    border-radius: 5px 5px 0 0;
}

.search-input .autocom-box {
    padding: 0;
    opacity: 0;
    pointer-events: none;
    max-height: 280px;
    overflow-y: auto;
}

.search-input.active .autocom-box {
    padding: 10px 8px;
    opacity: 1;
    pointer-events: auto;
}

.autocom-box li {
    list-style: none;
    padding: var(--space-xs) var(--space-s);
    display: none;
    width: 100%;
    cursor: default;
    border-radius: var(--radius-s);
    line-height: 1.7;
}

.autocom-box li:hover,
.autocom-box li:focus {
    background: var(--bg-surface-l-2);
    /* Example background color, adjust as needed */
    outline: none;
    /* Removes the default focus outline */
}

/* Ensure that keyboard navigation uses the same styles as hover */
.autocom-box li:focus {
    outline: none;
    /* Removes the default focus outline */
    /* Apply additional styles if necessary, similar to :hover */
}

.search-input li {
    display: flex;
    /* Establishes a flex container */
    justify-content: space-between;
    /* Aligns children (text and badge) with space between */
    align-items: center;
    /* Centers items vertically */
    width: 100%;
    /* Ensures the li elements take full width */
}

.search-input.active .autocom-box li {
    display: block;
}

.autocom-box li:hover {
    background: var(--bg-surface-l-2);
}

.search-input .icon {
    position: absolute;
    right: 15px;
    top: 17px;
    cursor: pointer;
}





/*

? ANCHOR HOVER

*/


.anchor-hover {
    position: relative;
}

.anchor-hover>.wp-block-remote-x-blocks-container {
    padding: 1rem;
    position: relative;
}

.anchor-hover::after {
    border-radius: 1rem;
    content: "";
    position: absolute;
    background: var(--bg-surface);
    pointer-events: none;
    z-index: -2;
    inset:
        calc(var(--top) * 1px) calc(100% - (var(--right) * 1px)) calc(100% - (var(--bottom) * 1px)) calc(var(--left) * 1px);
    transition: inset 0.2s;
}

.anchor-hover[data-enhanced]:hover {
    --active: 1;
}

.anchor-hover[data-enhanced]::after {
    opacity: var(--active, 0);
    transition: opacity 0.2s, inset 0.2s 0.2s;
}

.anchor-hover[data-enhanced]:hover::after {
    transition: opacity 0.2s 0.2s, inset 0.2s;
}

@supports(anchor-name: --anchor) {
    .anchor-hover>.wp-block-remote-x-blocks-container:nth-of-type(1) {
        anchor-name: --develop;
    }

    .anchor-hover>.wp-block-remote-x-blocks-container:nth-of-type(2) {
        anchor-name: --preview;
    }

    .anchor-hover>.wp-block-remote-x-blocks-container:nth-of-type(3) {
        anchor-name: --ship;
    }

    .anchor-hover>.wp-block-remote-x-blocks-container:nth-of-type(4) {
        anchor-name: --profit;
    }

    :root {
        --anchor: --develop;
    }

    :root:has(.anchor-hover > .wp-block-remote-x-blocks-container:nth-of-type(1):hover) {
        --anchor: --develop;
    }

    :root:has(.anchor-hover > .wp-block-remote-x-blocks-container:nth-of-type(2):hover) {
        --anchor: --preview;
    }

    :root:has(.anchor-hover > .wp-block-remote-x-blocks-container:nth-of-type(3):hover) {
        --anchor: --ship;
    }

    :root:has(.anchor-hover > .wp-block-remote-x-blocks-container:nth-of-type(4):hover) {
        --anchor: --profit;
    }

    .anchor-hover::after {
        position-anchor: var(--anchor);
        inset:
            anchor(top) anchor(right) anchor(bottom) anchor(left);
    }

    .anchor-hover:has(.wp-block-remote-x-blocks-container:hover) {
        --active: 1;
    }

    .anchor-hover::after {
        opacity: var(--active, 0);
        transition: opacity 0.2s, inset 0.2s 0.2s;
    }

    .anchor-hover:hover::after {
        transition: opacity 0.2s 0.2s, inset 0.2s;
    }

    .anchor-hover .wp-block-remote-x-blocks-container::after {
        content: unset;
        display: none;
    }
}

.anchor-hover:not([data-enhanced]) .wp-block-remote-x-blocks-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: hsl(0 0% 10%);
    border-radius: 1rem;
    opacity: var(--container-active, 0);
    transition: opacity 0.2s;
}

.anchor-hover .wp-block-remote-x-blocks-container {
    /*  color: inherit; */
    /* Remove custom text color */
    /* padding: 1rem; */
    /*  display: grid; */
    /*  gap: 0.5rem; */
    /*   position: relative;*/
}

.anchor-hover .wp-block-remote-x-blocks-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg-surface);
    z-index: -1;
    opacity: var(--container-active, 0);
    transition: opacity 0.2s;
}

.anchor-hover .wp-block-remote-x-blocks-container:hover {
    --container-active: 1;
}

.anchor-hover .wp-block-heading {

    /*  margin: 0; */
    /*  font-weight: inherit; */
    /* Remove custom font weight */
}

.anchor-hover p {
    /*  margin: 0; */
    /*  background: none; */
    /* Remove custom background */
    /*  color: inherit; */
    /* Remove custom text color */
    /*  background-clip: unset; */
    /* Remove background clip */
    /* font-weight: inherit; */
    /* Remove custom font weight */
}

.anchor-hover svg {
    /* width: 44px; */
    fill: currentColor;
    /* Ensure the SVG color is based on the current color */
}

.anchor-hover svg {
    transition: fill 0.2s;
}

.anchor-hover .wp-block-remote-x-blocks-container svg {
    transition: color 0.2s;
}

.anchor-hover .wp-block-remote-x-blocks-container:hover svg {
    color: var(--primary);
    /* Change color on hover */
}

.anchor-hover .wp-block-remote-x-blocks-container .wp-block-remote-x-blocks-svg-container {
    transition: background 0.2s;
}

.anchor-hover .wp-block-remote-x-blocks-container:hover .wp-block-remote-x-blocks-svg-container {
    background: var(--bg-surface-l-2);
    /* Change color on hover */
}




/* style.css */
.tabs {
    display: flex;
    flex-direction: column;
}

.tab-titles {
    display: flex;
    flex-direction: column;
    width: 20%;
}

.tab-title {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px;
}

.tab-title.active {
    background-color: #6d50e2;
    color: #fff;
}

.tab-title .svg-icon {
    margin-right: 10px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}






/*

? LIKE ICONS

*/

.like-button svg {
    margin-bottom: -5px;

}


/* Navbar Heart Icon */
#like-icon {
    color: var(--primary);
    font-size: 24px;
}

/* Post Card Heart Icon */
.favorite-icon {
    color: var(--bg-body);
    font-size: 18px;
    cursor: pointer;
    display: flex;

}

/* Add smooth transition for bookmark background and check */
.favorite-icon svg #bookmark-background,
.favorite-icon svg #bookmark-check {
    transition: fill 0.3s ease-in-out, stroke 0.3s ease-in-out;
}


.state-bookmarked svg #bookmark-background {
    fill: var(--primary);
    stroke: var(--primary);
}

.state-completed svg #bookmark-background {
    fill: var(--primary);
    stroke: var(--primary);
}

.state-completed svg #bookmark-check {
    stroke: var(--dark);
}



/* DEACTIVATED FOR NOW BECAUSE IT BREAKS MY BLOG LAYOUT
  .entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
*/

.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.toast.error {
    background-color: #e74c3c;
}

.toast.show {
    opacity: 1;
}

.icon.medium.like-icon.pointer {
    cursor: pointer;
    display: inline-block;
}


/* Post Card Heart Icon */
.favorite-icon {
    color: var(--bg-body);
    font-size: 18px;
    cursor: pointer;
    margin-left: 10px;
}

.favorite-icon.active {
    color: var(--primary);
}

.favorite-icon.active svg path {
    stroke: var(--primary);
    fill: var(--primary);
}

.favorite-icon svg path:hover {
    fill: var(--primary);
    stroke: var(--primary);
}

/* Heart icon in the header */

.favorites-header-icon {
    position: relative;
    display: block;
}

.favorites-header-icon svg {
    width: 16px;
    height: 20px;
    fill: var(--primary);
    /* or any color you prefer */
    cursor: pointer;

}

#favorites-link {
    display: none;
}

.callout::before {}

.callout_warning {
    background: var(--bg-surface);
    padding: var(--space-m);
    border-radius: var(--radius-xs);
    border-left: solid 5px var(--primary);
    margin: var(--space-m) 0;
}

.callout_warning::before {
    content: "";
    position: relative;
    transform: translateY(-21%);
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    padding-left: 35px;
    font-weight: bold;
    color: var(--primary);
    content: "Warning";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect fill="none"/><path d="M142.41,40.22l87.46,151.87C236,202.79,228.08,216,215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22C119.89,29.26,136.11,29.26,142.41,40.22Z" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="128" y1="144" x2="128" y2="104" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="128" cy="180" r="12" fill="gold"/></svg>');
}

.callout_pro_tip {
    background: var(--bg-surface);
    padding: var(--space-m);
    border-radius: var(--radius-xs);
    border-left: solid 5px var(--primary);
    margin: var(--space-m) 0;
}

.callout_pro_tip::before {
    content: "";
    position: relative;
    transform: translateY(-21%);
    width: 136px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    padding-left: 35px;
    font-weight: bold;
    color: var(--primary);
    content: "Pro Tip";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect fill="none"/><path d="M32,104H80a0,0,0,0,1,0,0V208a0,0,0,0,1,0,0H32a8,8,0,0,1-8-8V112A8,8,0,0,1,32,104Z" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M80,104l40-80a32,32,0,0,1,32,32V80h64a16,16,0,0,1,15.87,18l-12,96A16,16,0,0,1,204,208H80" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
}

.callout_hint {
    background: var(--bg-surface);
    padding: var(--space-m);
    border-radius: var(--radius-xs);
    border-left: solid 5px pink;
    margin: var(--space-m) 0;
}

.callout_hint::before {
    content: "";
    position: relative;
    transform: translateY(-21%);
    width: 100px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    padding-left: 35px;
    font-weight: bold;
    color: pink;
    content: "Hint";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect fill="none"/><path d="M136,192c20-3.37,36.61-20,40-40" fill="none" stroke="pink" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M112,96l26.27-72C159.86,41.92,208,88.15,208,144a80,80,0,0,1-160,0c0-30.57,14.42-58.26,31-80Z" fill="none" stroke="pink" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
}

.callout_danger {
    background: var(--bg-surface);
    padding: var(--space-m);
    border-radius: var(--radius-xs);
    border-left: solid 5px red;
    margin: var(--space-m) 0;
}

.callout_danger::before {
    content: "";
    position: relative;
    transform: translateY(-21%);
    width: 140px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    padding-left: 35px;
    font-weight: bold;
    color: red;
    content: "Danger";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect fill="none"/><polygon points="160 16 144 96 208 120 96 240 112 160 48 136 160 16" fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
}

.callout_info {
    background: var(--bg-surface);
    padding: var(--space-m);
    border-radius: var(--radius-xs);
    border-left: solid 5px var(--primary);
    margin: var(--space-m) 0;
}

.callout_info::before {
    content: "";
    position: relative;
    transform: translateY(-21%);
    width: 120px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    padding-left: 35px;
    font-weight: bold;
    color: var(--primary);
    content: "Info";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect fill="none"/><circle cx="128" cy="128" r="96" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M120,120a8,8,0,0,1,8,8v40a8,8,0,0,0,8,8" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle fill="gold" cx="124" cy="84" r="12"/></svg>');
}

.callout_disclaimer {
    background: var(--bg-surface);
    padding: var(--space-m);
    border-radius: var(--radius-xs);
    border-left: solid 5px var(--primary);
    margin: var(--space-m) 0;
}

.callout_disclaimer::before {
    content: "";
    position: relative;
    transform: translateY(-21%);
    width: 120px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    padding-left: 35px;
    font-weight: bold;
    color: var(--primary);
    content: "Disclaimer";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect fill="none"/><circle cx="128" cy="128" r="96" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M120,120a8,8,0,0,1,8,8v40a8,8,0,0,0,8,8" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle fill="gold" cx="124" cy="84" r="12"/></svg>');
}

.callout_note {
    background: var(--bg-surface);
    padding: var(--space-m);
    border-radius: var(--radius-xs);
    border-left: solid 5px var(--primary);
    margin: var(--space-m) 0;
}

.callout_note::before {
    content: "";
    position: relative;
    transform: translateY(-21%);
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    padding-left: 35px;
    font-weight: bold;
    color: var(--primary);
    content: "Note";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect fill="none"/><path d="M92.69,216H48a8,8,0,0,1-8-8V163.31a8,8,0,0,1,2.34-5.65L165.66,34.34a8,8,0,0,1,11.31,0L221.66,79a8,8,0,0,1,0,11.31L98.34,213.66A8,8,0,0,1,92.69,216Z" fill="none" stroke="blue" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="136" y1="64" x2="192" y2="120" fill="none" stroke="blue" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
}

.callout_question {
    background: var(--bg-surface);
    padding: var(--space-m);
    border-radius: var(--radius-xs);
    border-left: solid 5px purple;
    margin: var(--space-m) 0;
}

.callout_question::before {
    content: "";
    position: relative;
    transform: translateY(-21%);
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    padding-left: 35px;
    font-weight: bold;
    color: plum;
    content: "Question";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect fill="none"/><circle cx="128" cy="180" r="12"/><path d="M128,144v-8c17.67,0,32-12.54,32-28s-14.33-28-32-28S96,92.54,96,108v4" fill="none" stroke="plum" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="128" cy="128" r="96" fill="none" stroke="plum" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
}

.callout_summary {
    background: var(--bg-surface);
    padding: var(--space-m);
    border-radius: var(--radius-xs);
    border-left: solid 5px var(--primary);
    margin: var(--space-m) 0;
}

.callout_summary::before {
    content: "";
    position: relative;
    transform: translateY(-21%);
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    padding-left: 35px;
    font-weight: bold;
    color: var(--primary);
    content: "Summary";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect fill="none"/><line x1="24" y1="56" x2="40" y2="56" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="120" y1="56" x2="136" y2="56" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="24" y1="136" x2="48" y2="136" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="112" y1="136" x2="136" y2="136" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168" y1="104" x2="232" y2="104" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168" y1="136" x2="232" y2="136" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="80" y1="168" x2="232" y2="168" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="80" y1="200" x2="232" y2="200" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="40 136 40 56 80 120 120 56 120 136" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
}

.callout_essentials {
    background: var(--bg-surface);
    padding: var(--space-m);
    border-radius: var(--radius-xs);
    border-left: solid 5px var(--primary);
    margin: var(--space-m) 0;
}

.callout_essentials::before {
    content: "";
    position: relative;
    transform: translateY(-21%);
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    padding-left: 35px;
    font-weight: bold;
    color: var(--primary);
    content: "Summary";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect fill="none"/><line x1="24" y1="56" x2="40" y2="56" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="120" y1="56" x2="136" y2="56" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="24" y1="136" x2="48" y2="136" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="112" y1="136" x2="136" y2="136" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168" y1="104" x2="232" y2="104" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168" y1="136" x2="232" y2="136" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="80" y1="168" x2="232" y2="168" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="80" y1="200" x2="232" y2="200" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="40 136 40 56 80 120 120 56 120 136" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
}


.callout_bug {
    background: var(--bg-surface);
    padding: var(--space-m);
    border-radius: var(--radius-xs);
    border-left: solid 5px red;
    margin: var(--space-m) 0;
}

.callout_bug::before {
    content: "";
    position: relative;
    transform: translateY(-21%);
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    padding-left: 35px;
    font-weight: bold;
    color: red;
    content: "Bug";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect fill="none"/><circle cx="156" cy="92" r="12"/><circle cx="100" cy="92" r="12"/><line x1="128" y1="128" x2="128" y2="224" fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M208,144a80,80,0,0,1-160,0V112a80,80,0,0,1,160,0Z" fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="232" y1="184" x2="203.18" y2="171.41" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="232" y1="72" x2="203.18" y2="84.59" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="24" y1="72" x2="52.82" y2="84.59" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="24" y1="184" x2="52.82" y2="171.41" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="16" y1="128" x2="240" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
}

.callout_quote {
    background: var(--bg-surface);
    padding: var(--space-m);
    border-radius: var(--radius-xs);
    margin: var(--space-m) 0;
    border-color: var(--bg-surface-l-1);
}

.callout_quote::before {
    content: "";
    position: relative;
    transform: translateY(-21%);
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    padding-left: 35px;
    font-weight: bold;
    color: var(--bg-surface-l-1);
    content: "Quote";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect fill="none"/><path d="M108,144H40a8,8,0,0,1-8-8V72a8,8,0,0,1,8-8h60a8,8,0,0,1,8,8v88a40,40,0,0,1-40,40" fill="none" stroke="var(--bg-surface-l-1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M224,144H156a8,8,0,0,1-8-8V72a8,8,0,0,1,8-8h60a8,8,0,0,1,8,8v88a40,40,0,0,1-40,40" fill="none" stroke="var(--bg-surface-l-1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
}

.callout_example {
    background: var(--bg-surface);
    padding: var(--space-m);
    border-radius: var(--radius-xs);
    border-left: solid 5px var(--primary);
    margin: var(--space-m) 0;
}

.callout_example::before {
    content: "";
    position: relative;
    transform: translateY(-21%);
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    padding-left: 35px;
    font-weight: bold;
    content: "Example";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect fill="none"/><line x1="128" y1="128" x2="216" y2="128" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="128" y1="64" x2="216" y2="64" fill="none" stroke="gold" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="128" y1="192" x2="216" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="40 64 56 80 88 48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="40 128 56 144 88 112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="40 192 56 208 88 176" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
}


.callout_packing {
    background: var(--bg-surface);
    padding: var(--space-m);
    border-radius: var(--radius-xs);
    border-left: solid 5px var(--primary);
    margin: var(--space-m) 0;
}

.callout_packing::before {
    content: "";
    position: relative;
    transform: translateY(-21%);
    width: 120px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    padding-left: 35px;
    font-weight: bold;
    color: var(--primary);
    content: "What to Pack ?";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="gold"><path d="M440-756q11-2 20-3t20-1q11 0 20 1t20 3v-4q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760v4ZM280-80q-33 0-56.5-23.5T200-160v-320q0-85 44.5-152T360-732v-28q0-50 34.5-85t85.5-35q51 0 85.5 35t34.5 85v28q63 29 105 85.5T758-518q-18-2-40-2t-40 3q-14-69-69-116t-129-47q-83 0-141.5 58.5T280-480v320h172q6 20 16.5 41.5T490-80H280Zm40-320h170q14-21 37.5-43t48.5-37H320v80Zm400-40q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440Zm0 320q11 0 18.5-7.5T746-146q0-11-7.5-18.5T720-172q-11 0-18.5 7.5T694-146q0 11 7.5 18.5T720-120Zm-18-76h36v-10q0-11 6-19.5t14-16.5q14-12 22-23t8-31q0-29-19-46.5T720-360q-23 0-41.5 13.5T652-310l32 14q3-12 12.5-21t23.5-9q15 0 23.5 7.5T752-296q0 11-6 18.5T732-262q-6 6-12.5 12T708-236q-3 6-4.5 12t-1.5 14v14ZM490-400Z"/></svg>');
}

main ul.callout_tips li,
main ul.callout_info li,
main ul.callout_warning li,
main ul.callout_packing li,
main ul.callout_example li,
main ul.callout_quote li,
main ul.callout_essentials li {
    margin-left: 28px;
}


.new::after {
    content: 'New';
    font-size: var(--text-s);
    background-color: var(--primary);
    color: var(--dark);
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-xs);
    padding-block: 0.2em;
    margin-left: 10px;
}

.wp-block-quote {
    background: var(--bg-surface);
    padding: var(--space-m);
    border-radius: var(--radius-m);
    border-left: solid 5px var(--primary);
}

.coming-soon::after {
    content: 'Coming soon';
    font-size: var(--text-s);
    background-color: var(--bg-surface-l-1);
    color: var(--light);
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-xs);
    padding-block: 0.2em;
    margin-left: 10px;
}



/* Any additional styles specific to your design */


/*

? TABLE OF CONTENT

*/

#table-of-content ul {
    list-style: none;
    padding: 0;
}

#table-of-content li {
    margin-bottom: 10px;
}

#table-of-content li a {
    display: block;
    text-decoration: none;
    color: var(--text-body);
    padding: var(--space-xs);
    border-radius: var(--radius-s);
    font-weight: inherit;
    background-image: unset
}

#table-of-content .nav-active a {
    color: var(--dark);
    background-color: var(--primary);
}

#table-of-content a:hover {
    color: var(--text-body);
    background-color: var(--bg-surface-l-1);
}

#table-of-content .nav-active a:hover {
    color: var(--text-body);
}

/* Adding the no-bullet class */
.no-bullet {
    list-style: none;
}



/*

? FIX YOUTUBE IFRAME

*/


/*figure.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe => This if for youtuve but I made it broader to include also google maps */
iframe {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    border-radius: var(--radius-m);
    border: 1px solid var(--border-primary);
}


/*

? NEW SUPER MEGA MENU SIMPLE AND RESPONSIVE SIMPLE NAVBAR !!!!

*/

:root {
    --desktop-navbar-content-max-width: 100%;
}

.desktop-navbar-content-max-width {
    max-width: calc(var(--desktop-navbar-content-max-width) - var(--space-s) * 2);
}

/* Initial navbar state */
.desktop-navbar {
    position: fixed;
    height: 80px;
    /* Ensure the navbar is fixed */
    transform: translateY(0);
}

.desktop-navbar ul li.dropdown-simple-menu {
    display: inline-block;
    margin: 0 5px;
    position: relative;
    /* Added for dropdown positioning */
}

.mega-box {
    top: 85px;
    position: absolute;
    transition: all 0.3s ease-in-out;

}

li:hover .mega-box {
    transition: all 0.3s ease;
    top: 70px;
    opacity: 1;
    visibility: visible;
}

/* 
    
    ? Hover Effects on submenus 
    
    */

.desktop-navbar li:hover .desktop-submenu {
    top: 10px;
    top: 100%;
    /* Position below the parent item */
}

.desktop-navbar ul li:hover .desktop-submenu {
    display: block;
    /* Show submenu on hover */
    transition: all 0.3s ease;
}

.desktop-navbar a.active {
    color: var(--primary);
}

.desktop-navbar .desktop-submenu {
    display: none;
    /* Hide submenu by default */
    position: absolute;
    top: 100%;
    /* Position below the parent item */
    left: 0;
    background: var(--bg-surface);
    /* Set background color for submenu */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 200px;
    /* Adjust width as needed */
    flex-direction: column;
    /* Ensure vertical list */
}

.desktop-navbar .desktop-submenu li {
    display: block;
    /* Ensure list items are displayed as block elements */
    margin: 0;
}

.desktop-navbar .desktop-submenu li a {
    color: var(--text-title);
    padding: 10px 20px;
    display: block;
    white-space: nowrap;
}

.desktop-navbar .desktop-submenu li a:hover {
    background: var(--bg-surface-l-1);
}

.checkbtn {
    font-size: 30px;
    color: var(--text-title);
    cursor: pointer;
    display: none;
    position: absolute;
    right: 20px;
    /* Adjust as needed /
    top: 25px; / Adjust as needed */
}

#check {
    display: none;
}

@media (max-width: 992px) {
    .checkbtn {
        display: block;
    }

    ul.menu {
        position: fixed;
        width: 100%;
        height: calc(100vh - 80px);
        background: var(--bg-surface);
        top: 62px;
        left: -100%;
        text-align: center;
        transition: all 0.5s;
        display: flex;
        flex-direction: column;
        justify-content: initial;
        padding-top: 100px;
        z-index: 1000;
    }

    nav ul li {
        display: block;
    }

    nav ul li a {
        font-size: var(--text-xl);
    }

    .desktop-navbar nav a:hover {
        background: var(--bg-surface-l-1);
        color: var(--text-title);
    }

    nav ul li:hover .desktop-submenu {
        display: none;
        /* Show submenu on hover */
    }

    #check:checked~ul.menu {
        left: 0;
        padding-left: var(--space-s);
        padding-right: var(--space-s);
        line-height: 40px;
    }

    .mega-box {
        display: none
    }

    .search-button .search-text {
        display: block;
    }

    .search-button {
        display: flex;
        align-items: middle;
        margin-bottom: var(--space-s);
    }
}

/*

    ? STICKY NAVBAR

    */

/* Custom sticky state when scrolling up */
.scroll-up-sticky {
    transform: translateY(0);
    opacity: 1;
    background-color: var(--bg-body);
    /* Ensure background color remains */
}

/* Hide navbar on downscroll */
.main-navbar.hide {
    transform: translateY(-100%);
    opacity: 1;
    background-color: var(--bg-body);
    /* Ensure background color remains */
}

.content-area {
    margin-top: 80px
}

/* SAFE NO-SCROLL IMPLEMENTATION */
/* ADDED TO FUX THE ADMIN BAR WHEN LOGGED IN */

body.no-scroll {
    overflow: hidden;
}

html.no-scroll-html {
    overflow: hidden;
}

/* 

    ? NEW CHEVRON FOR ACCORDION

    */

.accordion-chevron {
    content: '';
    position: relative;
    border-bottom: 2px solid var(--primary);
    border-left: 2px solid var(--primary);
    display: block;
    width: 10px;
    height: 10px;
    transition: transform 0.3s ease-in-out;
}

.chevron-open {
    transform: rotate(-135deg);
}

.chevron-closed {
    transform: rotate(-45deg);
}

/*

    ? background-gradient Dark

    */


.bg-gradient-dark-btt::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: var(--radius-s);
    background: linear-gradient(to top, #000000, #fff0);
    opacity: 0.7;
}




/*

? UTILITIES

*/

/* the main no-ul class is in core framework */

.no-ul a {
    text-decoration: none;
}


/* DOWN */

.translate-y-75 {
    transform: translateY(75%);
}

.translate-y-70 {
    transform: translateY(70%);
}

.translate-y-65 {
    transform: translateY(65%);
}

.translate-y-60 {
    transform: translateY(60%);
}

.translate-y-55 {
    transform: translateY(55%);
}

.translate-y-50 {
    transform: translateY(50%);
}

.translate-y-45 {
    transform: translateY(45%);
}

.translate-y-40 {
    transform: translateY(40%);
}

/* UP */

.translate-y--10 {
    transform: translateY(-10%);
}

.translate-y--15 {
    transform: translateY(-15%);
}

.translate-y--20 {
    transform: translateY(-20%);
}

.translate-y--25 {
    transform: translateY(-25%);
}

.translate-y--30 {
    transform: translateY(-30%);
}

.translate-y--35 {
    transform: translateY(-35%);
}

.translate-y--40 {
    transform: translateY(-40%);
}

.translate-y--45 {
    transform: translateY(-45%);
}



@media (max-width: 992px) {

    .translate-y-75--on-l {
        transform: translateY(75%);
    }

    .translate-y-70--on-l {
        transform: translateY(70%);
    }

    .translate-y-65--on-l {
        transform: translateY(65%);
    }

    .translate-y-60--on-l {
        transform: translateY(60%);
    }

    .translate-y-55--on-l {
        transform: translateY(55%);
    }

    .translate-y-50--on-l {
        transform: translateY(50%);
    }

    .translate-y-45--on-l {
        transform: translateY(45%);
    }

    .translate-y-40--on-l {
        transform: translateY(40%);
    }

    .translate-y-0--on-l {
        transform: translateY(0%);
    }
}

@media (max-width: 768px) {


    .translate-y-75--on-m {
        transform: translateY(75%);
    }

    .translate-y-70--on-m {
        transform: translateY(70%);
    }

    .translate-y-65--on-m {
        transform: translateY(65%);
    }

    .translate-y-60--on-m {
        transform: translateY(60%);
    }

    .translate-y-55--on-m {
        transform: translateY(55%);
    }

    .translate-y-50--on-m {
        transform: translateY(50%);
    }

    .translate-y-45--on-m {
        transform: translateY(45%);
    }

    .translate-y-40--on-m {
        transform: translateY(40%);
    }

    .translate-y-0--on-m {
        transform: translateY(0%);
    }
}

@media (max-width: 480px) {


    .translate-y-75--on-s {
        transform: translateY(75%);
    }

    .translate-y-70--on-s {
        transform: translateY(70%);
    }

    .translate-y-65--on-s {
        transform: translateY(65%);
    }

    .translate-y-60--on-s {
        transform: translateY(60%);
    }

    .translate-y-55--on-s {
        transform: translateY(55%);
    }

    .translate-y-50--on-s {
        transform: translateY(50%);
    }

    .translate-y-45--on-s {
        transform: translateY(45%);
    }

    .translate-y-40--on-s {
        transform: translateY(40%);
    }

    .translate-y-0--on-m {
        transform: translateY(0%);
    }
}


/*

? SCALE

*/

.scale-xs:hover {
    transform: scale(1.01)
}

.scale-s:hover {
    transform: scale(1.02)
}

.scale-m:hover {
    transform: scale(1.03)
}


/*

? BACKDROP DARK

*/


/* Blur utility classes */
.backdrop-dark {
    position: relative;
}

.backdrop-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    /* Default blur amount */
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 3;
}

.backdrop-dark:hover::before {
    opacity: 0.2;
}


/* Blur intensity modifiers */
.backrop-dark-10::before {
    opacity: 0.1;
}

.backrop-dark-30::before {
    opacity: 0.3;
}

.backrop-dark-40::before {
    opacity: 0.4;
}

.backrop-dark-50::before {
    opacity: 0.5;
}



/*

? BACKDROP BLUR

*/


/* Blur utility classes */
.backdrop-blur {
    position: relative;
}

.backdrop-blur::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(5px);
    /* Default blur amount */
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 3;
}

.backdrop-blur:hover::before {
    opacity: 1;
}

/* Blur intensity modifiers */
.blur-s::before {
    backdrop-filter: blur(2px);
}

.blur-m::before {
    backdrop-filter: blur(5px);
}

.blur-l::before {
    backdrop-filter: blur(10px);
}

.blur-xl::before {
    backdrop-filter: blur(20px);
}

.scroll-up-sticky.bg-glassmorphism,
.bg-glassmorphism {
    backdrop-filter: blur(8px);
    background-color: var(--bg-glassmorphism);
    border: 1px solid var(--border-primary);
}




/*

 ? NETFLIX CAROUSEL

 */

.snap {
    gap: var(--space-m);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 30%;
    /* this defines the size of the cells and it shows that there is more to scroll on the side . The original value was 40% but I changed it to 80% to make it look better.*/
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-padding: var(--space-m);
    /* this allow to leave a natural `padding` on the edges so the the grid is not stuck on the edge. */
}

.snap>* {
    scroll-snap-align: start;
    /* This makes a kind of auto-snap to the next one, supper cool for touch device */
}





.carousel-container {
    position: relative;
    /* Ensure the container is positioned for the arrow */
    /* overflow-x: auto; */
    scroll-behavior: smooth;
    /* Optional: for smooth scrolling */
    padding-bottom: 20px;
    /* To make room for the arrow */
}

/* Add a pseudo-element for the arrow */
.carousel-container::after {
    content: '→';
    /* Unicode arrow character */
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--text-body);
    /* Color of the arrow */
    pointer-events: none;
    /* Ensure the arrow doesn't interfere with scrolling */
    transition: opacity 0.3s;
    opacity: 1;
    /* Initially visible */
    background: var(--bg-surface);
    border: solid 1px var(--border-primary);
    padding: var(--space-s) var(--space-2xs);
    border-radius: var(--radius-s);
}

/* Hide the arrow when at the end of the scroll */
.carousel-container::-webkit-scrollbar-thumb:active+.carousel-container::after {
    opacity: 0;
}

/* Optionally, add animations or hover effects */
.carousel-container:hover::after {
    color: var(--primary);
    /* Change color on hover */
    background-color: var(--bg-surface-l-1);
}

/* Styling the scroll bar */

/* For WebKit browsers (Chrome, Safari, and newer versions of Edge) */
.carousel-container::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.carousel-container::-webkit-scrollbar-thumb {
    background-color: #888;
    /* Color of the scroll thumb */
    border-radius: 10px;
}

.carousel-container::-webkit-scrollbar-thumb:hover {
    background-color: #555;
    /* Color of the scroll thumb on hover */
}

.carousel-container::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    /* Color of the scroll track */
}



/*

? UTILITY TWEAK

*/



/* Aspect Ratios */

.aspect-1 img {
    aspect-ratio: 1;
}

.aspect-2-3 img {
    aspect-ratio: 2 / 3;
}

.aspect-4-3 img {
    aspect-ratio: 4 / 3;
}

.aspect-3-4 img {
    aspect-ratio: 3 / 4;

}

.aspect-3-5 img {
    aspect-ratio: 3 / 5;
}

.aspect-3-2 img {
    aspect-ratio: 3 / 2;
}

.aspect-4-5 img {
    aspect-ratio: 4 / 5;
}

.aspect-9-16 img {
    aspect-ratio: 9 / 16;
}

.aspect-16-9 img {
    aspect-ratio: 16 / 9;
}

.aspect-5-2 img {
    aspect-ratio: 5 / 2;
}

.aspect-auto img {
    aspect-ratio: auto;
}

/* Image Fit */
.fit-contain img {
    object-fit: contain;
}

.fit-cover img {
    object-fit: cover;
}

.fit-fill img {
    object-fit: fill;
}

/* Overlay Dark */

.overlay-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Adjust the opacity as needed */
    opacity: 1;
    transition: opacity 0.6s ease;
    z-index: 1;
    /* Ensure it's above the image but below the text */
    will-change: opacity;
}



.shadow-none img {
    box-shadow: none;
}

.grid-column-full-width {
    grid-column: full-width;
}



.reverse-columns-2--on-s {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "col1 col2";
    /* Default desktop order */
}

.reverse-columns-2--on-s>*:nth-child(1) {
    grid-area: col1;
}

.reverse-columns-2--on-s>*:nth-child(2) {
    grid-area: col2;
}

@media (max-width: 768px) {
    .reverse-columns-2--on-s {
        grid-template-columns: 1fr;
        grid-template-areas: "col2" "col1";
        /* Reverse order on mobile */
    }
}



.margin-negative-xl {
    margin: calc(0px - var(--space-xl));
}




/*

? DARK MODE

*/

/* Hide the light mode icon by default */
#theme-switch svg:last-child {
    display: none;
}

/* When in light mode, hide the dark mode icon and show the light mode icon */
.cf-theme-light #theme-switch svg:first-child {
    display: none;
}

.cf-theme-light #theme-switch svg:last-child {
    display: block;
}



/* Hide the light theme logo by default (Dark Mode is default) */
.logo-light {
    display: none;
}

/* When in light mode, hide the dark theme logo and show the light theme logo */
.cf-theme-light .logo-dark {
    display: none;
}

.cf-theme-light .logo-light {
    display: inline;
    /* or block, depending on your layout */
}

/* Optional: Smooth transition for logo switching */

.logo-dark,
.logo-light {
    transition: opacity 0.3s ease-in-out;
}

.cf-theme-light .logo-dark,
.cf-theme-light .logo-light {
    transition: opacity 0.3s ease-in-out;
}


/* STATUS TOGGLE BUCKET LIST */
.bucket-status-toggle.status-todo {
    color: var(--light);
    background-color: var(--bg-surface);
}


.bucket-status-toggle.status-todo:hover {
    background-color: var(--success);
}

.bucket-status-toggle.status-completed {
    color: var(--light);
    background-color: var(--success);
}

.bucket-status-toggle.status-completed:hover {
    background-color: var(--error);
}






/* =========================================
   Responsive hiking-itinerary / data tables
   ========================================= */

/* 2. Base table reset + fixed layout for equal-width columns */
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    /* Good for desktop where space is ample */
    margin: var(--space-l) 0;
    background: var(--bg-surface);
}

/* 3. Head cells */
thead th {
    background: var(--bg-surface-l-3);
    color: var(--text-title);
    font-weight: 600;
    padding: 0.75rem 1rem;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 2;
}

/* 4. Body cells */
td {
    padding: 0.75rem 1rem;
    color: var(--text-body);
    border: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: top;
    word-wrap: break-word;
    /* This is fine for desktop, will be overridden by nowrap on mobile */
    font-size: var(--text-xs);
    /* Default font size, might be overridden by mobile styles */
}

/* 6. Hover feedback */
tbody tr:hover {
    background: var(--bg-surface-l-2);
}

/* 7. Mobile: Responsive Table Handling */
@media (max-width: 768px) {
    /* Adjust breakpoint as needed, 600px might be too small for some tables */

    table {
        display: block;
        /* Change table to a block element to enable overflow */
        overflow-x: auto;
        /* Allow horizontal scrolling */
        width: auto;
        /* Let the table content determine its width */
        min-width: 100%;
        /* Ensure it takes at least full parent width, but can grow */
        -webkit-overflow-scrolling: touch;
        /* Optional: for smoother scrolling on iOS */
        table-layout: auto;
        /* Override fixed layout for mobile to let content breathe */
    }

    /*
       Note on sticky headers with this approach:
       When `table` is `display: block` and scrolls, `position: sticky` on `thead th`
       will make the headers stick to the top of the *scrolling table block*,
       not necessarily the viewport, which is usually the desired behavior.
       If the table is short and doesn't vertically scroll itself, the sticky
       headers might not appear "stuck" if the page scrolls.
    */
    thead {
        /* You might not need to change thead display, but if you see issues with
           how headers align or flow with the rest of the table, you might experiment.
           Often, `display: table-header-group` (default) still works fine. */
    }

    th,
    td {
        font-size: var(--text-xs);
        /* Your existing mobile font size */
        white-space: nowrap;
        /* CRITICAL: Prevent content from wrapping within cells.
                                    This forces columns to their natural width and makes scrolling necessary. */
        /* word-wrap: normal; */
        /* Ensure break-word doesn't interfere if set directly on td/th */

        /* Optionally, reduce padding slightly on mobile if columns are very tight */
        /* padding: 0.6rem 0.8rem; */
    }

    /* If you want to give a visual cue that the table is scrollable,
       you could add a pseudo-element or a border to the table itself,
       but this often isn't necessary as users are accustomed to swiping. */
}




/* In your map.css or main stylesheet */
.leaflet-plane-icon {
    font-size: 24px;
    /* Adjust size of the Unicode plane */
    color: #333333;
    /* Color of the Unicode plane */
    /* background-color: transparent !important; /* Ensure no marker background if not desired */
    /* border: none !important; */
    /* text-shadow: 0 0 2px white; /* Optional: for better visibility */
}

/* Example: if you wanted flight type specific icon colors via CSS */
.flight-icon-flight {
    /* Matches className: 'leaflet-plane-icon flight-icon-' + transfer.type */
    /* color: #CC0000; */
}

/**
*
FOR THE READMORE BUTTON 
**/


.full-description {
    display: none;
    /* Hide full description initially */
}






/* 1. Prevent the Admin Bar from jumping down when the mobile menu is open */
html.no-scroll-html #wpadminbar {
    top: 0 !important;
    margin-top: 0 !important;
}

/* 2. Ensure the standard WordPress top margin is maintained on the HTML tag */
@media screen and (max-width: 782px) {
    html.no-scroll-html {
        margin-top: 0px !important;
        /* Standard WP mobile admin bar height */
    }
}

@media screen and (min-width: 783px) {
    html.no-scroll-html {
        margin-top: 0px !important;
        /* Standard WP desktop admin bar height */
    }
}

/* 3. If your body has a margin-top being applied by a script or other CSS, reset it */
body.no-scroll.admin-bar {
    margin-top: 0 !important;
}

/**
* PROFESSIONAL NETFLIX CAROUSEL
**/

/* 1. The Carousel Container */
.carousel-horizontal {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: var(--space-m) 0; /* Gives room for the hover scale-up */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    
    /* The "More Content" Fade: Fades the right 10% of the container */
    mask-image: linear-gradient(to right, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%);
}

.carousel-horizontal::-webkit-scrollbar {
    display: none;
}

/* 2. The Individual Cards (Children) */
.carousel-horizontal > * {
    flex-shrink: 0 !important;
    scroll-snap-align: start;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease !important;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

/* 3. High-End Hover Effects */
.carousel-horizontal > *:hover {
    transform: scale(1.08) !important; /* Gentle lift */
    z-index: 10; /* Ensures the hovered card stays on top of neighbors */
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

/* Darken the image slightly on hover to make the gold title pop more */
.carousel-horizontal > *:hover img {
    filter: brightness(1.1) contrast(1.1);
}

/* Animate the title inside the card */
.carousel-horizontal > *:hover .pre-heading-font {
    transform: translateY(-5px);
    transition: transform 0.4s ease;
    text-shadow: 0 4px 15px rgba(250, 206, 72, 0.4); /* Subtle gold glow */
}

/* Ensure the gradient overlay looks deep and rich */
.overlay-gradient-btt {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 100%) !important;
    pointer-events: none;
}