/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Stiluri esențiale pentru alinierea tabelară a galeriilor Jetpack */

.wp-block-jetpack-tiled-gallery .tiled-gallery__row {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 8px;
    gap: 8px;
}

.wp-block-jetpack-tiled-gallery .tiled-gallery__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wp-block-jetpack-tiled-gallery .tiled-gallery__item {
    margin: 0;
    padding: 0;
    position: relative;
}

.wp-block-jetpack-tiled-gallery .tiled-gallery__item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}


/* ==========================================
   Formatare meniu de navigare
   ========================================== */
/* Stil 3D pentru pagina activă din meniu */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
    /* Culori și fundal */
    background-color: var(--wp--preset--color--primary, #2271b1);
    color: var(--wp--preset--color--base, #ffffff) !important;
    
    /* Chenar și forme */
    border: 1px solid var(--wp--preset--color--text, #000000);
    border-radius: 12px;
    padding: 0.4em 0.9em;

    /* EFECTUL 3D (Umbră plină pe colț) */
    box-shadow: 4px 4px 0px var(--wp--preset--color--text, #000000);
    
    /* Ridică ușor butonul pentru accentuarea efectului */
    transform: translateY(-2px);
    
    /* Tranziție lină pentru stări interactive */
    transition: all 0.2s ease;
}

/* Efect interactiv când treci cu mouse-ul peste pagina activă (apasă ușor butonul) */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content:hover {
    box-shadow: 2px 2px 0px var(--wp--preset--color--text, #000000);
    transform: translateY(0px);
}

.wp-block-navigation-item__content:hover { 
    color: var(--wp--preset--color--accent) !important; 
}
.wp-block-navigation-item__content:focus {
    color: var(--wp--preset--color--text) !important; 
}
.wp-block-navigation-item__content:active {
    color: var(--wp--preset--color--text) !important; 
}

/* ==========================================
   Formatare sidebar
   ========================================== */

.sidebar-heading {
    display: table;
    position: absolute;
    left: 0;
    right: 0;
    top: -25px;
    width: auto;
}

/* ==========================================
   Formatare buton de căutare
   ========================================== */
/* Containerul care ține caseta și butonul */
.is-custom-small-button .wp-block-search__inside-wrapper {
	gap: 2px; /* Spațiu între casetă și buton (opțional) */
}

/* Caseta de text - O facem să ocupe tot spațiul rămas */
.is-custom-small-button .wp-block-search__input {
	flex-grow: 1 !important;
	padding: 4px 8px; /* Ajustează padding-ul după preferințe */
	border-radius: 2rem;
}

/* Butonul de căutare - Îl facem mai mic și mai compact */
.is-custom-small-button .wp-block-search__button {
	flex-shrink: 0 !important;
	padding: 4px 8px !important; /* Padding redus pentru un buton mai mic */
	min-width: auto !important;  /* Previne extinderea butonului */
	font-size: 0.5rem !important; /* Mărimea pictogramei/textului */
	border-radius: 2rem;
    margin-left: 0.25rem;
}

/* ==========================================
   Sistem de afisare sidebar
   ========================================== */

/* Regulă strict izolată prin clasa personalizată */
@media screen and (max-width: 1200px) and (orientation: landscape) {
    
    /* Forțează containerul să țină coloanele pe același rând (ca pe desktop) */
    .custom-landscape {
        flex-wrap: nowrap !important;
        display: flex !important;
        flex-direction: row !important;
    }

    /* Targetează strict coloana principală din interiorul acestui container */
    .custom-landscape > .post-col {
        flex-basis: 75% !important;
        max-width: 75% !important;
    }

    /* Targetează strict sidebar-ul din interiorul acestui container */
    .custom-landscape > .sidebar-col {
        flex-basis: 25% !important;
        max-width: 25% !important;
        padding-left: 20px !important;
    }
    
    /* Reajustează grila de articole doar pentru această secțiune */
    .custom-landscape .wp-block-post-template.is-layout-grid.columns-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}



/* ==========================================
   Sistem Animații la initializarea paginii (sau refresh)
   ========================================== */

/* Definiția animației Fade In Down */
@keyframes InitFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Clasa principală pentru blocuri */
.init-fade-in-down {
  animation-name: InitFadeInDown;
  animation-duration: 0.8s;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
}

/* Variante de latență (Delay) pentru efect de cascadă */
.delay-1s { animation-delay: 0.2s; }
.delay-2s { animation-delay: 0.4s; }
.delay-3s { animation-delay: 0.8s; }


/* ======================================================
   Sistem Animații la Scroll (IntersectionObserver)
   ====================================================== */

/* === 1. Proprietăți generale de tranziție === */
.has-scroll-animation {
  opacity: 0;
  transition-property: opacity, transform;
  /* Mărim timpul la 1 secundă și folosim o curbă cu "lansare" mai vizibilă */
  transition-duration: 1s; 
  /* Curba cubic-bezier(0.22, 1, 0.36, 1) face mișcarea mult mai vizibilă și elegantă */
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); 
  will-change: opacity, transform;
}


/* === 2. Variabile de direcție și efecte (Starea Inițială) === */

/* Fade In Down (de sus în jos) */
.has-scroll-animation.fadeInDown {
  transform: translate3d(0, -70px, 0);
}

/* Fade In Up (de jos în sus) */
.has-scroll-animation.fadeInUp {
  transform: translate3d(0, 70px, 0);
}

/* Zoom In (mărire din centru) */
.has-scroll-animation.zoomIn {
  transform: scale(0.5);
}

/* Roll In (rotire și intrare din stânga) */
.has-scroll-animation.rollIn {
  transform: translate3d(-100%, 0, 0) rotate(-120deg);
}

/* Fade Out Left (ieșire / aliniere din dreapta spre stânga) */
.has-scroll-animation.fadeOutLeft {
  transform: translate3d(50px, 0, 0);
}

/* Fade Out Right (ieșire / aliniere din stânga spre dreapta) */
.has-scroll-animation.fadeOutRight {
  transform: translate3d(-50px, 0, 0);
}



/* Starea finală universala (când blocul ajunge la scroll) */
.has-scroll-animation.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}


/* === 3. Clase de întârziere opționale (Delay / Cascadă) === */
.has-scroll-animation.delay-1s { transition-delay: 0.2s; }
.has-scroll-animation.delay-2s { transition-delay: 0.4s; }
.has-scroll-animation.delay-3s { transition-delay: 0.6s; }

/* === 4. Accesibilitate === */
@media (prefers-reduced-motion: reduce) {
  .has-scroll-animation {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ======================================================
   Sistem Animații in mai multi pasi activ la Scroll 
   ====================================================== */
/* Definiția efectului de bounce "minge care sare" din Animate.css */
@keyframes zoomInDownBounce {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
}

/* Starea inițială pentru zoomInDown (invizibil) */
.has-scroll-animation.zoomInDown {
  opacity: 0;
  transform: none; /* Ignoră tranziția standard */
}

/* Când blocul devine vizibil la scroll, pornește saritura */
.has-scroll-animation.zoomInDown.is-visible {
  animation-name: zoomInDownBounce;
  animation-duration: 0.9s;
  animation-fill-mode: both;
}