* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #f05454;
  --secondary-color: #6b6b6b;
  --third-color: #fff;
  --fourth-color: #eee;
  --five-color: #ccc;
  --six-color: #0d0c22;
  --white-light-color: #f3f2f2;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
}


@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400,600|Tulpen+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Modern+Antiqua&display=swap');

@font-face {
  font-family: font5;
  src: url(../font/NotoMono/NotoMono-Regular.ttf);

}

/* Tipografie fluida cu clamp() */
:root {
  --step-0: clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
  --step-3: clamp(1.875rem, 1.4rem + 3vw, 3rem);
}

body {
  font-family: 'Inter', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  color: #121212;
  background: #fafafa;
}

/* ---------------------------------CONTENT------------------------------------- */

/* ========== elemente comune pe pagini ========== */
.imagini {
  display: flex;
  width: 40vw;
  height: auto;
  border-radius: 10px;
  justify-content: center;
  margin: 1em auto;
  box-shadow: 2px 2px 10px 2px slategrey;
}

.titlu {
  color: #434443dc;
}

.text p,
.faq__content p {
  color: #434443f0;
}

.stema_prezentare {
  width: 10vw;
  height: auto;
  display: flex;
  flex: 1;
  float: left;
  margin: 1em auto;
}

.container-principal {
  /* margin: 2rem; */
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1rem, 2vw, 2rem);
}

/* ========== informatii colapsate ========== */
.informatii_collapsed {
  margin: 1em auto;
}

.faq__content {
  /* margin: 1rem 1rem 1rem 10rem; */
  font-size: 1.1vw;
  padding: 2px;
}

summary {
  font-size: 1.2rem;
  font-weight: 600;
  background: rgba(212, 41, 44, 0.5);
  background-image: linear-gradient(to right, rgba(0, 155, 212, 1), rgba(0, 155, 212, 0.5));
  color: #fff;
  padding: 1rem;
  outline: none;
  border-radius: 0.25rem;
  text-align: left;
  cursor: pointer;
  position: relative;
  width: 90%;
  margin: 0.5em auto;
}


details[open] summary~* {
  animation: sweep .5s ease-in-out;
  width: 90%;
  margin: 1em auto;
}

@keyframes sweep {
  0% {
    opacity: 0;
    margin-top: -10px
  }

  100% {
    opacity: 1;
    margin-top: 0px
  }
}

details>summary::after {
  position: absolute;
  content: "+";
  right: 20px;
  bottom: 20px;
}

details[open]>summary::after {
  position: absolute;
  content: "-";
  right: 20px;
  bottom: 20px;
}

details>summary::-webkit-details-marker {
  display: none;
}

/* The Modal PDF(background) */
.modalPDF {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Content/Box */
.modalPDF-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  height: 80%;
}

/* The Close Button */
.closePDF {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closePDF:hover,
.closePDF:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.revista-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2em;
  align-items: start;
  margin: 2em 3em;
  max-width: 1000px;
  padding: 1em;
}

.revista-container>h3 {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 1.1em;
  margin: 0 0 1.5em;
}


.revista-container img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.revista-container button {
  margin-top: 1em;
  padding: 0.5em 1.2em;
  background: #005a9c;
  color: whitesmoke;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.revista-container button:hover {
  background: #003f73;
}

.revista-text {
  margin: 1em 3em;
  font-size: 1em;
  line-height: 1.3;
}

.publicatii-text {
  margin: 3em;
  font-size: 1em;
  line-height: 1.3;
}

.revista-text h3 {
  margin-top: 0;
}

@media (max-width: 768px) {
  .revista-container {
    grid-template-columns: 1fr;
  }
}

/* ========== descriere card ========== */

.descriere_card {
  width: 65%;
  background-color: lavender;
  box-shadow: 2px 3px 5px 2px slategrey;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-radius: 10px;
  margin: 1em auto;
  flex-direction: column;
  padding: 1em;
}

.scrollable {
  will-change: transform;

}

button {
  text-align: center;
  margin: 25px auto;
  color: whitesmoke;
  border: 1px solid black;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
  display: block;
}

/* ========== centralizator-achizitii.php - flip-box ========== */

/* flip-box */
/* The flip box container - set the width and height to whatever you want. 
We have added the border property to demonstrate that the flip itself goes out of the box on hover 
(remove perspective if you don't want the 3D effect */
/* Parent container */

.flip-box-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

/* Individual flip box */
.flip-box {
  background-color: transparent;
  width: 30%;
  height: 200px;
  perspective: 1000px;
  display: inline-block;
  margin: 10px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.8s;
  transform-style: preserve-3d;
  overflow: hidden;
}

/* Flip box inner container */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease-in-out;
  transform-style: preserve-3d;
}

/* Hover effect */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Front and back styles */
.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;

}

.flip-box-front {
  background-color: rgba(30, 143, 255, 0.663);
  color: #ffffffe7;
  border: 1px solid #f1f1f1;
}

.flip-box-back {
  background-color: #80c7efaf;
  color: whitesmoke;
  transform: rotateY(180deg);
  border: 1px solid #f1f1f1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
}

.flip-box-back ul {
  list-style: none;
  padding: 15px;
  margin: 0;
  width: 100%;
}

.flip-box-back li {
  width: 100%;
  margin: 5px 0;
}

.flip-box-back a:hover {
  text-decoration: underline;
}

/* ========== lista-demnitari.php - demnitari ========== */
.demnitar {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 12em;
}

.lista_demnitari {
  display: flex;
  gap: 2em;
  margin: 5em auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.imagine_demnitari {
  flex: 1;
  border-radius: 30%;
  height: 26.5vh;
  width: 100%;
}

.info_demnitari {
  font-family: Arial, Helvetica, sans-serif;
  text-align: justify;
  width: 100%;
  margin: auto;
  font-size: 1em;
}

/* ========== componenta-consiliul-local.php - consilieri ========== */
.tabel-colorat {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  margin: 1.3rem auto;
  width: 60%;
}

.tabel-colorat .albastru-th {
  background-color: #009BD4;
  color: whitesmoke;
}

.tabel-colorat .albastru-tr {
  background-color: #EFF2F4;
}

.tabel-colorat td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

/* ========== organigrama.php - organigrama ========== */
.imagine {
  display: flex;
  align-items: center;
  width: 60vw;
  text-align: center;
  margin: auto;
  border-radius: 10px;
  max-width: 100%;
  height: auto;
  box-shadow: 2px 2px 5px 1px darkslateblue;
}

/* ========== asistenta-sociala.php - iframe ========== */

.doua_coloane {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  width: 45%;
  padding: 1em;
}

.card_asistenta {
  border: 1px solid;
  background-color: aliceblue;
  width: 90%;
  text-align: justify;
  margin: 1em auto;
  border-radius: 10px;
  box-shadow: 4px 2px 6px 1px slategray;
}

/* ========== stare-civila.php - buline activitati ========== */

.blue-dot {
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background-color: #0000FF;
  display: inline-block;
  text-align: center;
  margin-right: 1%;
}

.red-dot {
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background-color: rgb(209, 15, 15);
  display: inline-block;
  text-align: center;
  margin-right: 1%;
}

.green-dot {
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background-color: rgb(9, 160, 9);
  display: inline-block;
  text-align: center;
  margin-right: 1%;
}


/* ========== institutii subordonate ========== */
.links-inst-sub {
  width: 90%;
  display: flex;
  justify-content: space-evenly;
  margin: auto;
  flex-wrap: wrap;
}

.inst-sub-item {
  border: 1px solid whitesmoke;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  background-color: #61a4db;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11.5px;
  text-align: center;
  padding: 1rem;
  color: whitesmoke;
}



/* lista documente */
.lista-documente {
  font-size: 1rem;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  margin: 20px auto;
  text-align: center;
  list-style: none;
  padding: 0;
}

.lista-documente li {
  margin-bottom: 10px;
}

.lista-documente a {
  text-decoration: none;
  color: #007BFF;
  transition: color 0.3s ease;
}

.lista-documente a:hover {
  color: #0056b3;
}

/* ==== drepturi salariale ==== */
.page-intro{
  max-width: 70ch;
  margin: .5rem auto 1.25rem;
  text-align: center;
  color: #384047;
  opacity: .9;
}

.docs-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .9rem;
  margin: 0 auto 2rem;
  max-width: 1100px;
  padding: .25rem;
}

.doc-card{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;

  padding: .85rem 1rem;
  border-radius: 14px;
  text-decoration: none;

  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 6px 20px rgba(0,0,0,.04);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  color: #222;
}

.doc-card:hover,
.doc-card:focus-visible{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 3px 10px rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.08);
  outline: none;
}

.doc-icon{
  width: 28px; height: 36px; flex: 0 0 auto;
  background:
    conic-gradient(from 0turn, #c81e1e, #ef4444) border-box;
  -webkit-mask:
    radial-gradient(circle at 75% 25%, transparent 9px, #000 10px) top right / 60% 50% no-repeat,
    linear-gradient(#000 0 0) padding-box;
  mask:
    radial-gradient(circle at 75% 25%, transparent 9px, #000 10px) top right / 60% 50% no-repeat,
    linear-gradient(#000 0 0) padding-box;
  border-radius: 4px;
  position: relative;
}
.doc-icon::after{
  content: "PDF";
  position: absolute; inset: auto 0 4px 0;
  text-align: center;
  font: 700 10px/1.1 system-ui, sans-serif;
  color: #fff;
}

.doc-title{
  font: 600 0.98rem/1.25 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.doc-meta{
  font: 600 0.75rem/1 system-ui, sans-serif;
  color: #475569;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  padding: .25rem .5rem;
  border-radius: 999px;
}

@media (max-width: 560px){
  .docs-grid{
    grid-template-columns: 1fr;
    gap: .7rem;
  }
  .doc-card{
    grid-template-columns: auto 1fr;
  }
  .doc-meta{
    grid-column: 1 / -1;
    justify-self: start;
    margin-left: 2.4rem; 
    margin-top: .25rem;
  }
}


/* ============== Prezentare ============== */
.grid_prezentare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  gap: 2em;
}

.foto_prezentare {
  width: 25vw;
  height: auto;
  box-shadow: 1px 1px 1px 1px slategrey;
  border-radius: 5px;
  object-fit: cover;
}

.grid_prezentare p {
  text-align: justify;
  padding: 1em;
  font-size: 0.8rem;
}

/* ==== programe ==== */
.programe_strategii {
  border: 1px solid slateblue;
  border-radius: 10px;
  text-align: center;
  width: 70%;
  margin: 1em auto;
  padding: 1em;
  background: rgba(255, 166, 0, 0.45);
}

.programe_strategii:hover {
  transform: scale(1.1);
}

/* ==== rapoarte ==== */
.rapoarte {
  border: 1px solid slategrey;
  width: 40vw;
  height: 50vh;
  background-image: repeating-linear-gradient(to bottom, rgba(41, 40, 40, 0.14) 0 3px, transparent 1px 31px);
}

.rapoarte ul {
  line-height: 2.3;
  margin: 2.2em auto;
}

.declaratii-pdf {
  font-size: 16px;
  margin: 20px;
  text-align: justify;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 0.5rem;
  column-gap: 2.5rem;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* ==== proiecte finantare ===== */
:root { --accent: #429dd4; --ink:#1f2937; }

.finantari-simplu{
  max-width: 1100px;
  margin: 1.5rem auto 2rem;
  padding: 0 .75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
  gap: 1rem;
}

.fin-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 8px 24px rgba(0,0,0,.05);
}

.fin-card h2{
  margin: 0 0 .6rem;
  font: 700 1.05rem/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
}

.fin-links{
  list-style: none;
  padding: 0; margin: 0;
  display: grid; gap: .4rem;
}

.fin-links a{
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--accent);
  font-weight: 600;
  padding: .45rem .55rem;
  border-radius: 10px;
  transition: background-color .12s ease;
}

.fin-links a::before{
  content:"";
  width: 1rem; height: 1.2rem;
  background: conic-gradient(from 0turn, #c81e1e, #ef4444);
  border-radius: 3px;
  -webkit-mask:
    radial-gradient(circle at 80% 15%, transparent 6px, #000 6px) top right / 70% 55% no-repeat,
    linear-gradient(#000 0 0) padding-box;
          mask:
    radial-gradient(circle at 80% 15%, transparent 6px, #000 6px) top right / 70% 55% no-repeat,
    linear-gradient(#000 0 0) padding-box;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
}

.fin-links a:hover,
.fin-links a:focus-visible{
  background: rgba(66,157,212,.10);
  outline: none;
}

/* mobil */
@media (max-width: 560px){
  .finantari-simplu{ grid-template-columns: 1fr; gap: .85rem; }
  .fin-card h2{ font-size: 1rem; }
  .fin-links a{ padding: .4rem .5rem; }
}
/* =====proiect de finantare===== */
:root{
  --ink:#1f2937;
  --muted:#475569;
  --card:#ffffff;
  --line:rgba(37, 37, 37, 0.08);
  --accent:#2563eb;        
  --accent-soft:#eaf1ff;
}

.proiect-energie{
  max-width: 1000px;
  margin: 1.5rem auto 2.5rem;
  padding: 0 1rem;
}

.proiect-cover{
  margin: 0 0 1rem; border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.proiect-cover img{ display:block; width:100%; height:auto; }

.proiect-titlu{
  margin: .25rem 0 .5rem;
  font: 800 1.6rem/1.25 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  text-align: center;
}

.proiect-meta{
  display:flex; flex-wrap:wrap; gap:.5rem .6rem; justify-content:center;
  margin: 0 0 1.1rem;
}
.badge{
  background: var(--accent-soft);
  color: #0f2f8c;
  border: 1px solid #dbe7ff;
  border-radius: 999px;
  padding: .25rem .6rem;
  font: 700 .78rem/1 system-ui, sans-serif;
}

.proiect-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 1.1rem 1.2rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 10px 32px rgba(0,0,0,.05);
}

.proiect-card h3{
  margin: 1rem 0 .35rem;
  font: 800 1.05rem/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
}
.proiect-card p{ margin: .35rem 0; color: var(--ink); line-height: 1.55; }
.proiect-card ul{ margin:.25rem 0 .5rem 1rem; }
.proiect-card li{ margin:.15rem 0; line-height:1.5; }

.proiect-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
  margin: .25rem 0 1rem;
}
@media (max-width: 640px){
  .proiect-grid{ grid-template-columns: 1fr; }
}

.proiect-dl{
  display:grid; gap:.35rem;
}
.proiect-dl div{
  display:grid; grid-template-columns: 8.5rem 1fr; align-items:baseline;
}
.proiect-dl dt{
  color: var(--muted); font-weight: 600;
}
.proiect-dl dd{
  margin:0; color: var(--ink);
}

.proiect-contact{
  font-style: normal; line-height:1.55;
}
.proiect-contact a{ color: var(--accent); text-decoration: none; }
.proiect-contact a:hover{ text-decoration: underline; }

.proiect-cta{
  margin-top: .5rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .8rem;
}
.proiect-cta h4{
  margin:0; font: 800 1rem/1.2 system-ui, sans-serif; color: var(--ink);
}
.btn{
  display:inline-block;
  background: var(--accent);
  color: #fff; text-decoration:none;
  border-radius: 999px;
  padding: .5rem .9rem;
  font: 700 .9rem/1 system-ui, sans-serif;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .25);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 24px rgba(37, 99, 235, .32); }

@media (max-width: 420px){
  .proiect-titlu{ font-size: 1.35rem; }
}