/*
Theme Name: The woman in Black
Text Domain: twib
Version: 1.1.114
Tested up to: 6.3.1
Requires at least: 4.7
Requires PHP: 7.4
Description: Custom theme for The woman in black
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-patterns, block-styles, wide-blocks, accessibility-ready
Author: Algaweb di Valle Gabriele
Author URI: https://www.algaweb.it
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   General
   ========================================================================== */
:root {
    --var-twib-black: #0a0a0a;
    --var-twib-ash-gray: #2e2e2e;
    --var-twib-sand: #7a705f;
    --var-twib-primary: #151515;
    --var-color-text: #f4f1ed;
}

::selection {
    color: var(--var-twib-primary);
    background: #FFFFFF;
}

/* Solo per WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--var-twib-black);
    border-left: 1px solid #4b2e2e;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(145deg, var(--var-twib-sand), #3b1f1f);
    border-radius: 6px;
    border: 2px solid var(--var-twib-black);
    box-shadow: inset 0 0 4px #000;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--var-twib-sand) var(--var-twib-black);
}

body {
    font-family: "STIX Two Text", serif;
    color: var(--var-color-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Cinzel", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--var-color-text);
}

a {
    color: var(--var-color-text);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: #b5b5b5;
}

.font-logo {
    font-family: "STIX Two Text", serif;
}

.twib-color-sand {
    color: var(--var-twib-sand);
}

.twib-top-bot-border {
    border-top: 1px solid #202020;
    border-bottom: 1px solid #202020;
}

.twib-img {
    padding: 5px;
}

.twib-img-frame {
    box-shadow: rgba(0, 0, 0, 0.8) 0px 14px 28px, rgba(0, 0, 0, 0.8) 0px 10px 10px;
    position: absolute;
    top: 0;
    left: 0;
}

.twib-section {
    padding: 4rem 0;
    background-color: var(--var-twib-black);
}

.lined-title::before {
    content: '';
    flex: 1;
    height: 2px;
    margin-right: 1.5rem;
    margin-top: 15px;
    background: var(--var-twib-sand);
}

.lined-title::after {
    content: '';
    flex: 1;
    height: 2px;
    margin-left: 1.5rem;
    margin-top: 15px;
    background: var(--var-twib-sand);
}

.twib-ash-bg {
    background-color: var(--var-twib-ash-gray);
}

.twib-fragment-block {
    border: 2px solid var(--var-twib-sand);
}

.twib-fragment-block div {
    border: 2px solid var(--var-twib-sand);
    background-color: var(--var-twib-sand);
    color: var(--var-twib-black);
}

a .twib-card-image-container {
    color: #FFFFFF;
}

a .twib-bg-image-container {
    color: #FFFFFF;
    border: 1px solid #2f2f2f;
}

.twib-bg-image-container img {
    transition: 0.2s ease-in-out;
}

.twib-bg-image-container:hover img:nth-child(1) {
    transform: scale(1.2);
}

.twib-section-intro {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

.twib-images-border {
    border: 4px solid #7a705f;
    padding: 6px;
    background-color: #000;
    box-shadow:
        0 0 10px #7a705f,
        0 0 20px rgba(122, 112, 95, 0.5),
        inset 0 0 8px #000;
    transition: box-shadow 0.3s ease-in-out;
}

.twib-images-border:hover {
  box-shadow:
    0 0 14px #7a705f,
    0 0 28px rgba(122, 112, 95, 0.6),
    inset 0 0 10px #000;
}

/* ==========================================================================
   Button
   ========================================================================== */
.twib-btn {
    padding: 20px 52px;
    border: 3px solid var(--var-color-text);
    color: var(--var-color-text);
    text-decoration: none;
    letter-spacing: 3px;
    background-color: transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.twib-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 0 15px var(--var-color-text);
}

.twib-btn-default {
    font-size: 28px;
    color: var(--var-twib-sand);
    background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
    border: 3px solid var(--var-twib-sand);
    padding: 14px 32px;
    cursor: pointer;
    position: relative;
    letter-spacing: 3px;
    text-decoration: none;
    text-shadow: 1px 1px 2px black;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.15);
}

.twib-btn-default::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.twib-btn-default:hover {
    transform: scale(1.03);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.main-header-nav {
    position: absolute;
    width: 100%;
    z-index: 31;
}

#twib-navbar {
    background-color: var(--var-twib-black);
    border-bottom: 3px solid var(--var-twib-sand);
}


#twibNavbar li a {
    color: #FFF;
    text-transform: uppercase;
    font-size: 18px;
    text-decoration: none;
    margin: 0 25px;
}

.twib-bg-section {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.menu-item {
    padding: 20px 0;
    border-bottom: 1px solid var(--var-twib-ash-gray);
}

.gothic-toggler {
    border: none;
    background: transparent;
    padding: 0.5rem;
    outline: none;
}

.gothic-toggler:focus {
    box-shadow: none;
    outline: none;
}

.gothic-icon svg {
    fill: var(--var-twib-sand);
}

.home-mob-link a {
    font-size: 32px !important;
}

/* Selettore lingua gotico */
.lang-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.lang-toggle {
    background-color: transparent;
    color: #FFF;
    border: none;
    letter-spacing: 1px;
    font-size: 18px;
}

.lang-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--var-twib-black);
    border: 1px solid var(--var-twib-sand);
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
    min-width: 120px;
}

.lang-menu li a {
    display: block;
    padding: 8px 12px;
    color: var(--var-twib-sand);
    text-decoration: none;
}

.lang-menu li a:hover {
    background-color: #2a2a2a;
    color: #fff;
    text-shadow: 0 0 5px var(--var-twib-sand);
}

/* Bandiere */
.lang-flags {
    width: 100%;
    padding: 15px 0;
    text-align: center;
}

.lang-flag {
    width: 27px;
    height: auto;
    border: 1px solid var(--var-twib-sand);
    border-radius: 3px;
    box-shadow: 0 0 5px #bfa77f;
    margin: 0 10px;
    transition: transform 0.2s ease;
}

.lang-flag:hover {
    transform: scale(1.1);
}

/* Hover attivo su desktop */
.lang-dropdown:hover .lang-menu {
    display: block;
}

/* Tap attivo su mobile */
.lang-toggle:focus + .lang-menu {
    display: block;
}

@media (min-width: 992px) {
    #twib-navbar {
        background-color: transparent;
        border-bottom: 0;
    }

    .menu-item {
        padding: 5px 0;
        border-bottom: none;
    }

    #twib-navbar.fixed-top {
        background-color: #0a0a0ab2;
        border-bottom: 1px solid var(--var-twib-sand);
        border-top: 1px solid var(--var-twib-sand);
        margin-top: 10px !important;
    }

    .lang-dropdown {
        width: auto;
    }
}

/* ==========================================================================
   Homepage
   ========================================================================== */

.bg-home-video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}

.flip-card {
    cursor: pointer;
    touch-action: manipulation; /* migliora la risposta su mobile */
}

/* ==========================================================================
   Card
   ========================================================================== */
.twib-card-outer-container a:hover {
    color: var(--var-color-text);
}

.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    display: grid;
    transition: transform 0.8s ease;
    transform-style: preserve-3d;
    position: relative;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}


.flip-card.active .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-face {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    grid-area: 1 / 1 / 2 / 2;
}

.flip-card-front {
    z-index: 2;
}

.flip-card-back {
    transform: rotateY(180deg);
}

.flip-card-face.flip-card-back .position-absolute {
    font-size: clamp(0.8rem, 2vw, 1.5rem);
}


/* ==========================================================================
   Tale single page
   ========================================================================== */
.twib-hero {
    position: relative;
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.glass-title {
    background: rgba(0, 0, 0, 0.71);
    backdrop-filter: blur(8px);
    padding: 2rem 4rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
    text-align: center;
    z-index: 2;
}

.glass-title h1 {
    color: var(--var-twib-sand);
    text-shadow: 0 0 10px rgba(224, 216, 176, 0.3), 0 0 20px rgba(224, 216, 176, 0.1);
    margin: 0;
}

.twib-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* ==========================================================================
   Archive Tales
   ========================================================================== */
/* Sfondo dinamico */
#bg-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

#bg-current,
#bg-next {
    position: absolute;
    inset: -10px;
    background-size: cover;
    background-position: center;
    filter: brightness(0.4) blur(6px);
    transition: opacity 0.7s ease;
}

#bg-current {
    opacity: 1;
    z-index: 1;
}

#bg-next {
    opacity: 0;
    z-index: 2;
}

.dragon-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 0.8;
    overflow: hidden;
}

.dragon-frame .dragon-frame-video-container .position-absolute {
    font-size: clamp(0.8rem, 1.2vw, 1.2rem);
}

.post-cover {
    position: absolute;
    inset: 17% 13%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.dragon-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}

.dragon-frame-video-container {
    opacity: 0;
    transition: opacity 0.7s ease;
}

.tombstone.active .dragon-frame-video-container {
    opacity: 1;
}

.dragon-frame-video-container h2 {
    max-width: 182px;
    color: var(--var-twib-sand);
}

.dragon-frame-video-container p {
    max-width: 182px;
}

.dragon-frame:hover .dragon-frame-video-container {
    opacity: 1;
}

.dragon-frame {
    touch-action: pan-y; /* consente lo scroll verticale */
}

.page-numbers.current {
    color: var(--var-twib-sand);
}
/* ==========================================================================
   Two that Remains page
   ========================================================================== */
.whispers-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.whisper {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 2s ease;
}

.whisper.active {
    opacity: 1;
}

.latest-tales-section .twib-bg-image-container {
    position: relative;
}

.latest-tales-section .twib-bg-image-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 0.5 = 50% opacità, regola qui */
    z-index: 1;
}

.latest-tales-section .twib-bg-image-container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    aspect-ratio: 9/16;
}

.latest-tales-section .twib-bg-image-container .position-absolute {
    z-index: 2;
    color: white;
}

.twib-fs-min {
    font-size: 0.75rem !important;
}

@media (min-width: 512px) {
.twib-fs-min {
    font-size: 1.25rem !important
}
}

/* ==========================================================================
   Image comparison
   ========================================================================== */
.compare {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 5/7;
}

.image-comparison {
    position: absolute;
    inset: 0;
    max-width: 100%;
    z-index: 10;
    object-fit: cover;
    height: 100%;
    width: 50%;
}

.image-1 {
    right: auto;
    object-position: left;
}

.image-2 {
    left: auto;
    object-position: right;
    border-left: 2px solid var(--var-twib-sand);
    transition: border 250ms ease-in-out;
}

.slider {
    position: absolute;
    z-index: 20;
    inset: 0 -10px;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
}

.slider::-webkit-slider-thumb,
.slider::-moz-range-thumb {
    appearance: none;
    background: transparent;
    border: none;
}

.compare:has(.slider:active) .image-2 {
    border-left: 2px solid var(--var-twib-sand);
}
.compare:has(.slider:active) .thumb {
    background: #fff;
}

.thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 30;
    background: var(--var-twib-black) !important;
    border: 2px solid var(--var-twib-sand) !important;
    font-size: 2rem;
    width: 2rem;
    transform: translate(-50%, -50%) rotate(45deg);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 250ms ease-in-out;
}

.box-shadow {
    --opacity: 0.07;
    box-shadow: 0 1px 1px rgba(0, 0, 0, var(--opacity)),
    0 2px 2px rgba(0, 0, 0, var(--opacity)),
    0 4px 4px rgba(0, 0, 0, var(--opacity)),
    0 8px 8px rgba(0, 0, 0, var(--opacity)),
    0 16px 16px rgba(0, 0, 0, var(--opacity));
}

@media (min-width: 992px) {
    .compare {
        aspect-ratio: 16/9;
    }
}

/* ==========================================================================
   Section overlay wrapper
   ========================================================================== */
.twib-bg-wrapper {
    position: relative;
    overflow: hidden;
}

.twib-overlay-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.twib-wrapper-content {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   The World
   ========================================================================== */
.coord-overlay {
    margin-top: 10px;
    background: #f0f0f0;
    padding: 10px;
    border: 1px dashed #999;
    font-size: 14px;
    text-align: center;
}

.map-pan-wrapper {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    cursor: grab;
    position: relative;
}

.map-inner {
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
    transition: transform 0.05s linear;
}

.map-inner img {
    display: block;
    max-width: none; /* importante per pan senza ridimensionamento */
}

.map-point {
    width: 53px;
    height: 53px;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    z-index: 10;
}

.map-section-overlay {
    background-size: cover;
    background-position: center;
    filter: brightness(0.2) blur(2px);
    background-attachment: fixed;
}

.map-marker {
    width: 100%;
    height: auto;
    transition: transform 0.2s ease, filter 0.2s ease;
    cursor: pointer;
    animation: pulseGlow 2s ease-in-out forwards infinite;
}

.map-marker:hover {
    transform: scale(1.1);
}

@keyframes pulseGlow {
    0% {
        filter: drop-shadow(0 0 0px rgba(255,255,255,0));
    }
    50% {
        filter: drop-shadow(0 0 10px rgb(255, 255, 255));
    }
    100% {
        filter: drop-shadow(0 0 0px rgba(255,255,255,0));
    }
}

#placeSidebar {
    z-index: 9999;
    width: 100vw;
    background-color: var(--var-twib-black);
}

.offcanvas.offcanvas-end {
    border-left: 4px solid var(--var-twib-sand);
}

@media (min-width: 992px) {
    #placeSidebar {
        width: 800px;
    }
}

/* ==========================================================================
   Serath Eilun page
   ========================================================================== */
.book-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.book-glow {
    transition: transform 0.4s ease;
    z-index: 2;
}

.book-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130%;
    height: 130%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.65) 0%, transparent 58%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.book-container:hover::before,
.book-container:active::before {
    opacity: 1;
}

.book-container:hover .book-glow,
.book-container:active .book-glow {
    transform: scale(1.03);
}

.twib-serath-eilun-archive-post-title {
    background: rgba(0, 0, 0, 0.71);
    backdrop-filter: blur(8px);
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
    text-align: center;
    color: var(--var-twib-sand);
    text-shadow: 0 0 10px rgba(224, 216, 176, 0.3), 0 0 20px rgba(224, 216, 176, 0.1);
}

.pergamena-style {
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    border-radius: 12px;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.7);
    color: #2c2417 !important;
    padding: 80px 40px;
    position: relative;
    font-family: "MedievalSharp", cursive;
    max-height: 90vh;
    overflow-y: auto;
}


.pergamena-style h5 {
    font-family: "MedievalSharp", cursive;
    color: #2c2417 !important;
}

.modal-body {
    font-weight: 400;
    line-height: 1.8;
    text-align: justify;
    padding: 20px 0;
}

.modal-body p {
    text-indent: 2em;
}

.animate__animated.animate__fadeInDown {
    animation-duration: 1.2s;
}

.twib-img-mix-blend-darken {
    mix-blend-mode: darken;
}

@media (min-width: 992px) {
    .pergamena-style {
        padding: 80px;
    }
}

@media (min-width: 1400px) {
    .twib-serath-eilun-archive-post-title {
        padding: 1rem 2rem;
    }
}

/* Gutenberg cols force layout */
#pergamenaModal .modal-body .wp-block-columns {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 2em;
    margin-bottom: 1.5em;
}

#pergamenaModal .modal-body .wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 0;
    word-break: break-word;
}

@media (max-width: 782px) {
    #pergamenaModal .modal-body .wp-block-columns {
        flex-wrap: wrap !important;
    }
    #pergamenaModal .modal-body .wp-block-column {
        flex-basis: 100%;
    }
}

/* ==========================================================================
   Loader
   ========================================================================== */
.twib-loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    border-top: 4px solid var(--var-twib-sand);
    border-right: 4px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
.twib-loader::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border-left: 4px solid var(--var-twib-ash-gray);
    border-bottom: 4px solid transparent;
    animation: rotation 0.5s linear infinite reverse;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}