/*
Theme Name: Global Stay Tours
Theme URI: https://www.globalstaytours.dk/
Template: blocksy
Author: Anas Mohamed
Author URI: https://visual-message.com/
Description: A specially adjusted theme for the Global Stay Tours initiative! Happy travels!
Version: 1.0.1779735160
Updated: 2026-05-25 20:52:40

*/

/*Stor sætning i begyndelsen af en brødtekst*/
register_block_style(
    'core/paragraph',
    array(
        'name'  => 'run-in-titel',
        'label' => 'Legende Run-In Titel',
    )
);

.ngo-statement-box .highlight {
    background-color: #70cf4c !important;
    color: #ffffff !important;
    padding: 4px 10px !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
    border-radius: 4px !important;
}










/* Vi øger specifiseringen ved at kæde klasserne sammen uden mellemrum */
.wp-block-cover.film-skaerm {
    overflow: hidden !important;
    position: relative !important;
}

/* Vi fanger de præcise elementer ved at gå hele vejen igennem WordPress-hierarkiet */
.wp-block-cover.film-skaerm img.wp-block-cover__image-background,
.wp-block-cover.film-skaerm video.wp-block-cover__video-background,
.wp-block-cover.film-skaerm .wp-block-cover__background {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform;
}

/* Denne transformation tvinger nu Firefox og Edge til at adlyde på grund af den tætte klasse-kædning */
.wp-block-cover.film-skaerm:hover img.wp-block-cover__image-background,
.wp-block-cover.film-skaerm:hover video.wp-block-cover__video-background,
.wp-block-cover.film-skaerm:hover .wp-block-cover__background {
    transform: scale(1.08) !important;
}

/* Tekst-containeren fader ud */
.wp-block-cover.film-skaerm .wp-block-cover__inner-container {
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}

.wp-block-cover.film-skaerm:hover .wp-block-cover__inner-container {
    opacity: 0 !important;
    transform: scale(0.95) !important;
}


hhtml {
    cursor: url("https://visual-message.com/gst/wp-content/uploads/2026/05/up.png") 16 16, auto !important;
}





/* ==========================================================================
   THE TRUE FANCYBOX v4/v5 WIX-STYLE SPLIT HACK
   ========================================================================== */

/* 1. Tvinger selve sliden til at være en flex-kasse, så billede og tekst står side om side */
.fancybox__slide {
    display: flex !important;
    flex-direction: row !important; /* Side om side */
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
    box-sizing: border-box !important;
}

/* 2. Mediet (billede/video) fylder venstre side (65% af pladsen) */
.fancybox__content {
    flex: 2 !important;
    max-width: 65% !important;
    width: 65% !important;
    margin: 0 !important;
    border-radius: 16px 0 0 16px !important; /* Runder kun de venstre hjørner */
    background-color: #000000 !important;
}

/* 3. Tekst-beskrivelsen styles til højre (35% af pladsen) */
.fancybox__caption {
    flex: 1 !important;
    max-width: 35% !important;
    width: 35% !important;
    min-height: 100% !important; /* Tvinger den hvide boks til at matche billedets højde */
    
    background: #ffffff !important; /* Hvid Wix-baggrund */
    color: #111827 !important; /* Mørk, lækker bureau-tekst */
    padding: 30px !important;
    text-align: left !important;
    
    border-radius: 0 16px 16px 0 !important; /* Runder de højre hjørner */
    border-left: 2px solid #f3f4f6 !important; /* Fin lille skillelinje */
    box-sizing: border-box !important;
    
    display: flex !important;
    align-items: center !important; /* Centrerer teksten lodret i den hvide boks */
}

/* 4. Gør krydset og toolbar-knapperne fine og grønne */
.fancybox__toolbar, 
.fancybox__nav,
.fancybox__button {
    color: #70cf4c !important; /* Din faste grønne farve */
}

/* 5. Responsivt fix til mobiler (teksten hopper under billedet på telefonen) */
@media (max-width: 768px) {
    .fancybox__slide {
        flex-direction: column !important;
        padding: 10px !important;
    }
    .fancybox__content {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
    }
    .fancybox__caption {
        max-width: 100% !important;
        width: 100% !important;
        min-height: auto !important;
        border-radius: 0 0 16px 16px !important;
        border-left: none !important;
        border-top: 2px solid #f3f4f6 !important;
        padding: 15px !important;
    }
}


.bPlNotice.premium {
	display:none !important;
}



/* Vender rækkefølgen af kolonnerne om, men KUN på mobilskærme */
@media (max-width: 768px) {
    .vend-mobil-kolonner {
        display: flex !important;
        flex-direction: column-reverse !important; /* Tvinger højre kolonne øverst! */
    }
}






/* Gør den rigtige kasse klar til at holde titlen svævende */
.lbbContent_area,
[class*="contentArea"] {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

/* Det smukke overlay-bånd til videotitlen */
.gallery-video-title-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 15px 10px !important;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)) !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    z-index: 99 !important; /* Sørger for at den ligger øverst */
    pointer-events: none !important;
}





/* Styling af Gutenberg video-blokken */
.wp-block-video video {
    border-radius: 12px !important; /* Bløde, lækre bureau-hjørner */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; /* Flot dybde på siden */
    background-color: #000000 !important;
    outline: none !important;
}

/* Skjul de tre prikker (indstillinger) helt i Chrome/Safari, hvis de driller */
video::-webkit-media-controls-enclosure {
    overflow: hidden !important;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px) !important; /* Skubber indstillingsknappen ud af skærmen */
}


/* Styling af Gutenberg video-blokken */
.wp-block-video video {
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    background-color: #000000 !important;
    outline: none !important;
}

/* Skjul indstillingsprikkerne */
video::-webkit-media-controls-enclosure {
    overflow: hidden !important;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px) !important;
}

/* HACK: Farv alle knapper og tidslinjen til #AADE87 via CSS-filter */
video::-webkit-media-controls {
    filter: invert(93%) sepia(13%) saturate(1185%) hue-rotate(50deg) brightness(94%) contrast(90%) !important;
}



/* YouTube Play-knap overlay */
.gutenberg-video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: rgba(0, 0, 0, 0.65); /* Mørk, gennemsigtig cirkel */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    pointer-events: auto;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Selve trekanten indeni knappen */
.gutenberg-video-play-overlay svg {
    width: 35px;
    height: 35px;
    fill: #ffffff; /* Start som hvid */
    transform: translateX(3px); /* Justering så trekanten centrerer visuelt */
    transition: all 0.3s ease;
}

/* Hover-effekt: Cirklen bliver større, og trekanten bliver din NGO-grønne farve! */
.gutenberg-video-play-overlay:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.1);
    border-color: #AADE87;
    box-shadow: 0 0 20px rgba(170, 222, 135, 0.4);
}

.gutenberg-video-play-overlay:hover svg {
    fill: #AADE87; /* BAM! Flot grøn farve ved hover */
}



/* Tving Gutenberg containeren til at ramme knappen ind */
.wp-block-video {
    position: relative !important;
    display: block !important;
}

/* YouTube Play-knap overlay */
.gutenberg-video-play-overlay {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 74px;
    height: 74px;
    background: rgba(0, 0, 0, 0.65) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 999 !important; /* Lægger sig altid øverst */
    transition: all 0.3s ease !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

.gutenberg-video-play-overlay svg {
    width: 38px;
    height: 38px;
    fill: #ffffff !important;
    transform: translateX(4px);
    transition: all 0.3s ease !important;
}

/* Hover-effekt */
.gutenberg-video-play-overlay:hover {
    background: rgba(0, 0, 0, 0.85) !important;
    transform: translate(-50%, -50%) scale(1.08) !important;
    border-color: #AADE87 !important;
    box-shadow: 0 0 25px rgba(170, 222, 135, 0.5) !important;
}

.gutenberg-video-play-overlay:hover svg {
    fill: #AADE87 !important;
}