:root {
  --accent-dark: #8b0000;               /* culoare principală (buton/link) – darkred */
  --accent-dark-hover: #6a0000;         /* culoare la hover pentru butoane/linkuri */
  --btn-shadow: rgba(0,0,0,0.18);       /* umbră generică pentru butoane */
  --header-grad-left: #4a4a4a;          /* capăt stânga gradient header */
  --header-grad-right: #cfcfcf;         /* capăt dreapta gradient header */
  --nav-grad-left: #0d47a1;             /* capăt stânga gradient navbar */
  --nav-grad-right: #64b5f6;            /* capăt dreapta gradient navbar */
  --max-width: 1550px;                  /* lățimea maximă a containerelor centrale (.wrap, main) */
  --container-pad: 16px;                /* padding reutilizabil pentru containere */
}
.pacifico-regular {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}

/* ----- RESET / BASE ----- */
* {
  box-sizing: border-box;               /* include padding + border în calculele de dimensiune */
}

html,
body {
  height: 100%;                         /* înălțime completă – util pentru layout-uri full-height */
}

body {
  margin: 0;                            /* elimină marginile implicite ale body-ului */
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; /* font stack */
  background: #f4f5f7;                  /* culoarea de fundal a paginii */
  color: #222;                          /* culoarea textului principal */
  -webkit-font-smoothing: antialiased;  /* netezire font pe WebKit (macOS/iOS) */
  -moz-osx-font-smoothing: grayscale;   /* netezire font pe Firefox/macOS */
}

a {
  color: inherit;                        /* link-urile moștenesc culoarea textului curent */
}

/* ----- HEADER ----- */
header.site-header {
  
  width: 100%;                           /* întins pe toată lățimea ecranului */
  background: linear-gradient(to right, var(--header-grad-left), var(--header-grad-right)); /* gradient fundal */
  padding: 22px 0;                       /* spațiu vertical în interiorul header-ului */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);/* umbră subtilă sub header */
  z-index: 1000;                         /* deasupra altor elemente (inclusiv nav) */
  transition: background 0.3s ease, box-shadow 0.3s ease; /* animație la schimbarea fundalului/umbrei */
}

.wrap {
  max-width: var(--max-width);           /* limitează lățimea maximă */
  margin: 0 auto;                        /* centrează orizontal containerul */
  padding: 0 20px;                       /* spațiu lateral în interior */
}

.header-inner {
  display: flex;                         /* layout pe axă orizontală */
  align-items: center;                   /* aliniază vertical elementele la centru */
  justify-content: space-between;        /* lasă spațiu între capete (brand vs. dreapta) */
  gap: 152px;                            /* spațiu între elementele interne (logo – titlu – logo) */
}

.brand {
  display: flex;                         /* grup pentru logo + (opțional) text */
  align-items: center;                   /* centrarea verticală */
  gap: 152px;                            /* distanța între logo-uri (în cazul tău, 2 logo-uri) */
}

.brand img.logo {
  height: 94px;                          /* înălțimea logo-ului */
  width: 94px;                           /* lățimea logo-ului */
  object-fit: contain;                   /* păstrează proporțiile imaginii în cadrul de 94x94 */
}

/* Titlu centrat între 2 logo-uri */
.site-title {
  text-align: center;                    /* aliniază titlul la centru */
  flex: 1;                               /* ocupă spațiul disponibil între logo-uri */
}

.site-title h1 {
  margin: 0;                             /* elimină marginile implicite ale <h1> */
  font-family: 'Pacifico', cursive;
  font-size: clamp(3.5em, 8vw, 4.5em); /* Folosim clamp() pentru a redimensiona fontul fluid */
  letter-spacing: 3px;                   /* spațiere între litere */
  background: linear-gradient(90deg, red 31%, yellow 35%, yellow 64%, blue 68%); /* gradient tricolor în text */
  -webkit-background-clip: text;         /* aplică gradientul doar pe forma textului (WebKit) */
  -webkit-text-fill-color: transparent;  /* face textul transparent pt. a vedea gradientul */
  line-height: 1;                        /* înălțimea liniei strânsă pe text */
}

.header-right {
  display: flex;                         /* container pentru elementele din dreapta header-ului */
  align-items: center;                   /* aliniere verticală la centru */
  gap: 8px;                              /* spațiu între elemente */
}

.lang-switch {
  background: transparent;               /* fără fundal, doar contur */
  border: 1px solid rgba(255,255,255,0.25); /* contur subtil alb-translucid */
  color: white;                          /* text alb */
  padding: 6px 10px;                     /* spațiu interior */
  border-radius: 6px;                    /* colțuri rotunjite */
}

/*-----------------*/
.name-bar {
	position: sticky;
	top: max(0px, env(safe-area-inset-top));
	z-index: 998;
	height: var(--bar-h);
	display: grid;
	align-items: center;
	background: color-mix(in srgb, #ffffff 85%, transparent);
	backdrop-filter: blur(.6px);
	border-bottom: 1px solid #00000014;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
	transition: opacity .2s ease, transform .2s ease;
    margin-top: 1px;  /* urcă bara cu 20px */
}

.name-bar__inner {
	width: 100%;
	display: grid;
	place-items: center;
	padding: 0 clamp(12px, 3vw, 24px)
}

.name-bar__text {
	font-family: "Pacifico", "Amoresa", serif;
	font-size: clamp(2.3rem, 4vw, 2.9rem);
	font-weight: bold;
	line-height: 1.01;
	letter-spacing: .02em;
	margin-top: 10px;
	margin-bottom: 10px;
	color: var(--name-color);
	text-shadow: var(--name-shadow);
	-webkit-text-stroke: 1px var(--name-stroke)
}

body.at-top .name-bar {
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none
}
/*-----------------------------*/
/* Elimină pozitionarea absolută / fixă */
header.site-header,
nav.top-nav {
  position: static; /* Le lași să se așeze în fluxul normal al documentului */
  top: initial;
  left: initial;
  z-index: initial;
}
/* ----- NAV ----- */
nav.top-nav {
  margin-top: 0px; /* Adaugă spațiu între header și nav */
  width: 100%;                           /* întins pe toată lățimea */
  background: linear-gradient(to right, var(--nav-grad-left), var(--nav-grad-right)); /* gradient navbar */
  padding: 10px 0;                       /* spațiu vertical interior */
  border-bottom: 2px solid rgba(0,0,0,0.1); /* linie discretă sub navbar */
  z-index: 999;                          /* sub header (care are 1000), deasupra conținutului */
  transition: background 0.3s ease, box-shadow 0.3s ease; /* animații de stare (ex. .scrolled) */
}

/* Container interior */
.nav-inner {
  display: flex;                         /* elementele navbar pe o linie */
  align-items: center;                   /* aliniere verticală */
  justify-content: space-between;        /* distribuie spațiu între grupuri (linkuri / search / limbă) */
  width: 100%;                           /* ocupă întreaga lățime a barei */
  gap: 12px;                             /* spațiu între grupuri */
  padding: 0 20px;                       /* spațiu lateral interior pentru aliniere frumoasă */
}

/* Linkurile la stânga */
.nav-links {
  flex: 1;                               /* ocupă o treime (în combinație cu celelalte flex:1) */
  display: flex;                         /* link-uri pe o linie */
  gap: 12px;                             /* spațiu între linkuri */
  align-items: center;                   /* centrare verticală */
  flex-wrap: wrap;                       /* permite trecerea pe rândul următor la lățimi mici */
  justify-content: flex-start;           /* aliniere la stânga */
}

.nav-links a {
  display: inline-block;                 /* fiecare link ca “buton” */
  background: var(--accent-dark);        /* culoarea butonului */
  color: yellow;                          /* text alb pe buton */
  padding: 10px 16px;                    /* spațiu interior al butonului */
  border-radius: 8px;                    /* colțuri rotunjite */
  text-decoration: none;                 /* fără subliniere */
  font-family: 'Pacifico', serif;  /* font pentru butoane */
  font-size: 16px;                       /* mărimea textului din butoane */
  box-shadow: 0 6px 12px var(--btn-shadow); /* umbră “ridică” butonul */
  transition: transform .12s ease, background-color .2s ease; /* animație la hover/active */
}

.nav-links a:hover {
  background: var(--accent-dark-hover);  /* culoare mai închisă la hover */
  transform: scale(1.04);                /* mic efect de “creștere” la hover */
}

/* Search box în mijloc */
.search-box {
  flex: 1;                               /* ocupă o treime din lățime (centrul) */
  display: flex;                         /* input + buton pe o linie */
  justify-content: center;               /* centrat pe orizontală */
  align-items: center;                   /* aliniere verticală */
  gap: 8px;                              /* spațiu între input și buton */
}

.search-box input {
  padding: 8px 12px;                     /* spațiu interior al câmpului de căutare */
  border-radius: 8px;                    /* colțuri rotunjite */
  border: 0;                             /* fără contur clasic */
  outline: 0;                            /* fără contur focus implicit */
  min-width: 150px;                      /* lățime minimă pentru vizibilitate */
}

.search-box button {
  background: var(--accent-dark);        /* culoarea butonului de căutare */
  color: #fff;                           /* text alb */
  border: 0;                             /* fără border */
  padding: 8px 12px;                     /* spațiu interior */
  border-radius: 8px;                    /* colțuri rotunjite */
  cursor: pointer;                       /* cursor mână la hover */
  box-shadow: 0 6px 12px var(--btn-shadow); /* umbră buton */
  transition: transform .12s ease;       /* animație mică la apăsare */
}

.search-box button:active {
  transform: scale(0.96);                /* “apăsare” vizuală la click */
}

/* Selector limbă în dreapta */
.language-selector {
  flex: 1;                               /* ocupă o treime din lățime (dreapta) */
  display: flex;                         /* pentru aliniere ușoară a <select> */
  justify-content: flex-end;             /* împinge selectorul spre marginea dreaptă */
}

.language-selector select {
  padding: 8px 12px;                     /* spațiu interior pentru ușurință la click */
  border-radius: 8px;                    /* colțuri rotunjite */
  border: 1px solid #ccc;                /* contur discret */
  font-size: 14px;                       /* mărimea textului */
}

/* ----- MAIN ----- */
main {
  max-width: var(--max-width);           /* limitează lățimea conținutului central */
  margin: 180px auto 22px auto;          /* OFFSET sus pentru header+nav fixe; centrează pe orizontală */
  padding: 0 20px;                       /* spațiu lateral interior */
  display: grid;                         /* layout în două coloane (conținut + sidebar) */
  grid-template-columns: 1fr 360px;      /* prima coloană fluidă, a doua fixă (sidebar 360px) */
  gap: 20px;                             /* spațiu între coloane */
}

/* Left: content area */
.content {
  background: #fff;                      /* fundal alb pentru articole */
  padding: 18px;                         /* spațiu interior */
  border-radius: 10px;                   /* colțuri rotunjite */
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);/* umbră discretă */
}

.hero {
  min-height: 240px;                     /* înălțime minimă pentru zona “hero” */
  border-radius: 8px;                    /* colțuri rotunjite */
  background: linear-gradient(180deg,#eef2f7,#ffffff); /* gradient vertical subtil */
  display: flex;                         /* centrează conținutul orizontal/vertical */
  align-items: center;                   /* centrare verticală */
  justify-content: center;               /* centrare orizontală */
  text-align: center;                    /* text centrat */
  padding: 12px;                         /* spațiu interior */
}

/* placeholder pentru content ce vei înlocui */
.placeholder {
  border: 2px dashed #ddd;               /* chenar punctat pentru secțiuni provizorii */
  padding: 28px;                         /* spațiu interior mare */
  color: #666;                           /* culoare text neutră */
  border-radius: 8px;                    /* colțuri rotunjite */
}

/* Right: sidebar cu linkuri rapide & noutăți */
aside.sidebar {
  display: flex;                         /* container vertical */
  flex-direction: column;                /* elementele unele sub altele */
  gap: 12px;                             /* spațiu între cardurile din sidebar */
}

.quick-links {
  background: #fff;                      /* fundal card linkuri rapide */
  padding: 12px;                         /* spațiu interior */
  border-radius: 10px;                   /* colțuri rotunjite */
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);/* umbră discretă */
  display: flex;                         /* linkurile pe coloană */
  flex-direction: column;                /* vertical */
  gap: 8px;                              /* distanță între linkuri */
}

.quick-links a {
  display: inline-block;                 /* link ca “buton” */
  padding: 10px;                         /* spațiu interior */
  border-radius: 8px;                    /* colțuri rotunjite */
  text-decoration: none;                 /* fără subliniere */
  color: #fff;                           /* text alb */
  background: linear-gradient(90deg,#ff6f00,#ffd54f); /* gradient portocaliu-galben */
  text-align: center;                    /* text aliniat central */
  box-shadow: 0 6px 12px rgba(0,0,0,0.12); /* umbră pentru relief */
}

/* Noutăți - carousel simplu */
.news {
  background: #fff;                      /* card pentru noutăți */
  padding: 12px;                         /* spațiu interior */
  border-radius: 10px;                   /* colțuri rotunjite */
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);/* umbră discretă */
}

.news .item {
  display: none;                         /* ascuns implicit (va fi activat pe rând) */
  padding: 10px;                         /* spațiu interior */
}

.news .item.active {
  display: block;                        /* afișează itemul curent */
}

/* ----- FOOTER ----- */
footer.site-footer {
  margin-top: 24px;                      /* spațiu deasupra footer-ului */
  background: #fff;                      /* fundal alb */
  padding: 16px 0;                       /* spațiu interior vertical */
  box-shadow: 0 -2px 6px rgba(0,0,0,0.03);/* umbră fină deasupra footer-ului */
}

.footer-links {
  display: flex;                         /* listă orizontală de linkuri */
  gap: 12px;                             /* spațiu între linkuri */
  flex-wrap: wrap;                       /* permite împachetarea pe mai multe rânduri */
  justify-content: center;               /* centrează linkurile în footer */
}

.footer-links a {
  color: #333;                           /* culoare text link */
  text-decoration: none;                 /* fără subliniere */
  padding: 6px 10px;                     /* spațiu interior */
  border-radius: 6px;                    /* colțuri rotunjite */
}

/* MOBILE MENU BUTTON */
.mobile-toggle {
  display: none;                         /* ascuns pe desktop (se arată în media query) */
  background: transparent;               /* fără fundal */
  border: 1px solid rgba(255,255,255,0.2); /* contur translucid */
  padding: 8px;                          /* spațiu interior */
  border-radius: 8px;                    /* colțuri rotunjite */
  color: #fff;                           /* culoarea textului/iconiței */
}

/* ----- RESPONSIVE ----- */
@media (max-width: 980px) {
  main {
    grid-template-columns: 1fr;          /* pe mobile, doar o coloană (sidebar sub content) */
  }
  .site-title h1 {
    font-size: 34px;                     /* titlu mai mic pe ecrane înguste */
	order: 1;
  }
  .header-inner {
    flex-direction: column;              /* logo + titlu pe coloană */
    gap: 8px;                            /* spațiu mic între ele */
  }
  .header-right {
    order: 3;                            /* mută dreapta header-ului mai jos */
  }
  .mobile-toggle {
    display: inline-block;               /* afișează butonul de meniu pe mobil */
  }
  .nav-inner {
    flex-direction: column;              /* elementele din nav pe coloană */
    gap: 10px;                           /* spațiu între grupuri */
  }
   .brand {
    order: 2;                            
  }
  .nav-links {
    order: 2;                            /* linkurile sub buton */
	display: none;
  }
  .nav-links.open {
    display: flex; /* Afișează-l când are clasa 'open' */
  }
  .search-box {
    order: 3;                            /* căutarea sub linkuri */
    width: 100%;                         /* ocupă toată lățimea pe mobil */
  }
}
@media (max-width: 768px) {
    .header-inner {
        flex-direction: column; /* Pe ecrane mici, elementele se așează pe verticală */
    }
    .site-title {
        order: -1; /* Mută titlul în partea de sus pe mobil */
    }
    .logo {
        width: 100px; /* Logo-uri mai mici pe mobil */
    }
    .header-right {
    order: 3;                            /* mută dreapta header-ului mai jos */
  }
}

/* ----- SCROLL EFFECT ----- */
.scrolled header.site-header {
  background: rgba(74, 74, 74, 0.9);     /* header devine translucid la scroll */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* umbră mai pronunțată */
}

.scrolled nav.top-nav {
  background: rgba(13, 71, 161, 0.9);    /* navbar devine translucid la scroll */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* umbră mai pronunțată */
}
/* ----------- Continuare ---------*/
.panel {
	display: grid;
	grid-template-rows: auto 2fr;
	border-radius: 16px;
	overflow: hidden;
	background: color-mix(in srgb, #ffffff 50%, transparent);
	border: 1px solid #ffffff88;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
	max-block-size: calc(100dvh - var(--bar-h) - 2rem);
	min-block-size: min(70dvh, 800px)
}

.panel__header h2 {
	font-family: "Pacifico", "Amoresa", "Pacifico", serif;
	text-align: center;
	margin: 0;
	font-size: clamp(1.6rem, 3.2vw, 2.4rem)
	
}

.panel__scroller {
	overflow: auto;
	padding: clamp(12px, 2.2vw, 18px);
	overscroll-behavior: contain;
	scrollbar-gutter: stable
}

.stories {
	display: grid;
	gap: 1rem;
	margin: 1rem 0 2rem;
}

.split {
	width: min(1450px, 92vw);
	margin: 0 auto 5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(12px, 2.5vw, 24px)
}

.story {
	padding: 1rem 1.2rem;
	background: #ffffffcc;
	border: 1px solid #ffffff88;
	border-radius: 12px;
}

.gallery {
	display: flex;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;         /* Lasă spațiul dintre imagini */
    flex-wrap: nowrap;  /* Aceasta este cheia. Previne ca imaginile să treacă pe rândul următor */
    overflow-x: auto;  /* Activează derularea orizontală */
    padding: 12px;  /* Adaugă puțin spațiu pentru a vedea marginile imaginilor */
}

.gallery img {
	position: relative;
	height: 180px;   /* Păstrează proporțiile imaginii */
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
	transition: transform .2s ease, box-shadow .2s ease;
	cursor: zoom-in;
    width: 200px; /*Setează o lățime fixă pentru fiecare imagine. Poți ajusta această valoare după preferință */
    flex-shrink: 0;   /* Important: împiedică imaginile să se micșoreze atunci când spațiul este limitat */
}

.gallery img:hover {
	transform: scale(1.03);
	box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
}

.gallery img::after {
	content: attr(data-caption);
	position: absolute;
	bottom: 6px;
	left: 6px;
	right: 6px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 0.85rem;
	padding: 4px 6px;
	border-radius: 6px;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.gallery img:hover::after {
	opacity: 1;
}

.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .82);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.lightbox.open {
	display: flex;
}

.lightbox__content {
	position: relative;
	max-width: 92vw;
	max-height: 86vh;
	display: grid;
	grid-template-rows: 1fr auto auto;
	gap: .6rem;
	text-align: center;
}

.lightbox__img {
	max-width: 92vw;
	max-height: 80vh;
	width: auto;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
	transition: transform 0.3s ease;
}

.lightbox__caption {
	color: #f3f3f3;
	text-align: center;
	font: 500 .95rem/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	opacity: .95;
	margin-top: 0.5rem;
}

.lightbox__img:hover {
	transform: scale(1.05);
	transition: transform 0.3s ease;
}

.lightbox__indicator {
	color: #ccc;
	font-size: 0.85rem;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
	position: absolute;
	background: #ffffff22;
	color: #fff;
	border: 1px solid #ffffff44;
	backdrop-filter: blur(4px);
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.lightbox__close {
	top: 12px;
	right: 12px;
}

.lightbox__prev {
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
}

.lightbox__next {
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
	background: #ffffff33;
}

/*----------------------- continuare2-------------------*/

/*-------------------------*/

/* Stiluri pentru butoanele din sidebar, preluate de la meniul de navigare */
.sidebar-links {
	display: flex;
	flex-direction: column;
	gap: 15px;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	width: 50%;
}

.sidebar-links li a {
	display: block;
	background: var(--accent-dark);
	color: yellow;
	padding: 10px 16px;
	border-radius: 8px;
	text-decoration: none;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
	font-weight: 700;
	box-shadow: 0 6px 12px var(--btn-shadow);
	transition: transform .12s ease, background-color .2s ease;
	text-align: center;
}

.sidebar-links li a:hover {
	background: var(--accent-dark-hover);
	transform: scale(1.04);
}

.submenu-sidebar {
	display: none;
	list-style: none;
	padding: 8px 0;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin-top: 8px;
}

.submenu-sidebar li a {
	background: var(--accent-dark);
	color: yellow;
	padding: 10px 16px;
	border-radius: 8px;
	display: block;
	text-align: left;
	box-shadow: none;
	transition: color 0.2s ease;
}

.submenu-sidebar li a:hover {
	color: var(--accent-dark);
	background-color: #f7f7f7;
	transform: none;
}

.has-submenu-sidebar:hover>.submenu-sidebar {
    display: flex; /* Afiseaza submeniul si foloseste flexbox pentru a aranja butoanele pe orizontala */
    flex-wrap: wrap;
    align-items: center; /* Alinierea verticala a butoanelor cu parintele */
    position: absolute; /* Scoate submeniul din fluxul normal si il pozitioneaza relativ la parinte */
    left: 100%; /* Pozitioneaza-l la 100% din stanga parintelui, adica imediat in dreapta lui */
    top: 0; /* Pozitioneaza-l la aceeasi inaltime cu parintele */
    padding-left: 10px; /* Adauga un mic spatiu intre butonul parintelui si submeniu */
}
/* Stil pentru elementul parinte (li) care contine atat linkul cat si submeniul */
.has-submenu-sidebar {
    position: relative; /* Setam pozitia parintelui ca referinta pentru submeniu */
    display: block;
}