/* styles.css */
@font-face {
  font-family: "Exo";
  src: url("../assets/fonts/Exo-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;   /* full weight range */
  font-style: normal;
}

@font-face {
  font-family: "Exo";
  src: url("../assets/fonts/Exo-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
}

:root {
  --blue: #0077C1;
  --black-text: #212122;
  --snow-white: #FFFAFA;
  --red: #EB2A41;
  --card-color: #f1bb4e;

  /* Header */
  --logo-font: 'Exo',  ;
  --header-font: 'Exo', regular;
  --logo-font-size: 3.5rem;
  --header-font-size: 1.5rem;
  --header-external-margin: 3%;

  /* Homepage */
  --motto-font: 'Exo', regular;
  --motto-font-size: 2rem;

  /* Services */
  --services-title-font: 'Exo', regular;
  --services-content-font: 'Exo', light;
  --services-title-font-size: 3rem;
  --services-content-font-size: 1.8rem;

  /* Homepage and Services */
  --section-title-font: 'Exo', regular;
  --section-content-font: 'Exo', light;
  --section-title-font-size: 2.5rem;
  --section-content-font-size: 1.8rem;

  /* Jobs */
  --jobs-title-font: 'Exo', regular;
  --jobs-content-font: 'Exo', light;
  --job-separator-font: 'Exo', regular;
  --jobs-title-font-size: 3rem;
  --jobs-content-font-size: 1.8rem;
  --job-separator-font-size: 2.5rem;

  /* Job Opening */
  --job-opening-title-font: 'Exo', regular;
  --job-opening-content-font: 'Exo', light;
  --job-opening-title-font-size: 2.5rem;
  --job-opening-content-font-size: 1.5rem;

  /* Buttons */
  --button-font: 'Exo', regular;
  --button-font-size: 1.5rem;
  --button-background-color: var(--snow-white);
  --button-text-color: var(--black-text);
  --button-border-color: var(--red);

  /* Footer */
  --footer-font: 'Exo', regular;
  --footer-font-size: 1.5rem;



}

/* homepage */

body {
  margin: 0px;
  background-color: var(--snow-white);
}

.panel-motto {
  position: relative;
  width: 100%;
  height: 30rem;
  border-bottom: 0.3rem solid var(--black-text);
  border-top: 0.3rem solid var(--black-text);
}

.motto-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(60%);
}

.motto {
  position: absolute;
  top: 45%;
  left: 5%;
  right: 60%;
  transform: translateY(-50%);
  color: var(--snow-white);
  font-family: var(--motto-font);
  font-size: var(--motto-font-size);
  z-index: 1;
}

.motto p {
  color: var(--snow-white);
  font: var(--motto-font);
  font-size: var(--motto-font-size);
  margin: 0;
  padding: 0;
}

.motto h1 {
  color: var(--snow-white);
  font: var(--motto-font);
  font-size: var(--motto-font-size);
  margin: 0;
  padding: 2rem 0 0 0;
}



/* header.component.css */

/* TODO: change fled display inside header to percentages
    (prob have to do for footer too)*/
/* 
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vw var(--header-external-margin);
  margin: 0px;
  background-color: var(--blue);
  color: var(--snow-white);
} */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vw var(--header-external-margin);
  margin: 0px;
  color: var(--snow-white);
  background: linear-gradient(130deg, var(--snow-white) 10%, var(--blue) 55%);
}

.black-bar {
      width: 100%;
      height: 3px;        /* change thickness as needed */
      background: #000;
    }
 
/* TODO: fix once decided on logo */
.logo span {
  display: none;
}

.logo {
  text-decoration: none;
  display: flex;
  color: var(--snow-white);
  align-items: center;
  font-family: var(--logo-font);
  font-size: var(--logo-font-size);
}

.logo img {
  height: 4rem;
  margin-right: 0.6rem;
/*   background: var(--snow-white);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
}

/* .logo img {
  height: 4rem;
  margin-right: 0.6rem;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.9) 50%,
    rgba(240,240,240,0.8) 100%);
  border-radius: 30%;
  padding: 10px;
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.1),
    inset 0 1px 3px rgba(255,255,255,0.8);
} */

nav ul {
  list-style: none;
  display: flex;
  margin-right: var(--header-external-margin);
}

nav li {
  margin-left: 5vw;
}

nav a {
  text-decoration: none;
  color: var(--snow-white);
  font-family: var(--header-font);
  font-size: var(--header-font-size);
}


/* footer style */

/* footer.component.css */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vw var(--header-external-margin);
  margin: 2rem 0 0 0;
  background-color: var(--blue);
  color: var(--snow-white);
  font-family: var(--footer-font);
  font-size: var(--footer-font-size);
}

.left-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.location-link {
  display: inline-block;
  position: relative;
  margin: 1vw 0;
}

.map-location-img {
  width: 10vw;
  max-width: 200px; /* Prevent the image from getting too large */
  border-radius: 8px; /* Optional: rounded corners for a smoother look */
  float: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
  margin-right: 1vw; /* Add margin to the right to ensure it doesn't touch adjacent elements */
}

.map-location-img:hover {
  transform: scale(1.1); /* Slight zoom effect on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow on hover */
}

.location-description {
  font-size: 1rem;
  margin-top: 1em;
  color: var(--snow-white);
}

@media (max-width: 600px) {
  .map-location-img {
    width: 25vw; /* Adjust image size on small screens */
  }
}
.text-lines p {
  margin: 0;
}

.right-section {
  display: flex;
  flex-direction: column;
}

.right-section a {
  color: var(--snow-white);
  text-decoration: none;
}
.right-section p {
  margin: 5px 0;
}
.right-section img {
  width: 10vw;
  max-width: 230px; /* Prevent the image from getting too large */
  border-radius: 6px; /* Optional: rounded corners for a smoother look */ 
  float: left;
  margin-right: 1vw; /* Add margin to the right to ensure it doesn't touch adjacent elements */
}

.popup-link {
  cursor: pointer;
  color: var(--card-color);
  text-decoration: underline;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-content {
  background: var(--blue);
  color: var(--snow-white);
  padding: 2rem;
  border-radius: 8px;
  max-width: 80%;
  width: 90%;
  max-height: 90%;
  font-family: var(--footer-font);
  font-size: var(--footer-font-size);
  overflow-y: auto;
}


.popup-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}

.popup-abstract {
  margin-bottom: 2rem;
  font-style: italic;
}

.popup-columns {
  display: flex;
  gap: 2rem;
}

.popup-left, .popup-right {
  flex: 1;
}

.popup-actions {
  display: flex;
  justify-content: center; /* centers child horizontally */
  margin-top: 1.5rem;
}


.popup-close {
  font-family: var(--button-font);
  font-size: var(--button-font-size);
  color: var(--show-white);
  border: 0.3rem solid var(--button-border-color);
  transition: all .5s ease;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  background-color : var(--blue);
  padding: 0.4rem;
  margin: 0 5% 0 0;
  outline: none;
  border-radius: 0.7rem;
}


.popup-close:hover {
  background-color: var(--button-border-color);
  color: var(--button-background-color);
}

/* home both */
.section {
  display: flex;
  padding: 1rem 5%;
}

/* home right */

.rigth-left {
  flex: 6;
  display: flex;
  justify-content: left;
  align-items: flex-start;
}

.rigth-content {
  text-align: left;
  padding: 20px;
}

.rigth-title {
  width: fit-content;
  margin-right: 1em;
  font-family: var(--section-title-font);
  font-size: var(--section-title-font-size);
  color: var(--blue);
  border-bottom: 0.5rem solid var(--blue);
}

.rigth-title a {
  text-decoration: none;
  color: inherit;
}

.rigth-title a:hover {
  text-decoration: underline; /* only show underline on hover */
}


.rigth-content-text {
  text-align: justify;
  margin-top: 1rem;
  font-family: var(--section-content-font);
  font-size: var(--section-content-font-size);
}

.rigth-right {
  flex: 4;
  padding-left: 5%;
}

.rigth-right img {
  width: 100%;
  height: auto;
}

/* home left */

.left-left {
  flex: 4;
  padding-right: 5%;
}

.left-left img {
  width: 100%;
  height: auto;
}

.left-right {
  flex: 6;
  display: flex;
  justify-content: left;
  align-items: flex-start;
}

.left-content {
  text-align: left;
  padding: 20px;
}

.left-title {
  width: fit-content;
  margin-right: 1em;
  font-family: var(--section-title-font);
  font-size: var(--section-title-font-size);
  color: var(--blue);
  border-bottom: 0.5rem solid var(--blue);
}


.left-title a {
  text-decoration: none;
  color: inherit;
}

.left-title a:hover {
  text-decoration: underline; /* only show underline on hover */
}


.left-content-text {
  text-align: justify;
  margin-top: 1rem;
  font-family: var(--section-content-font);
  font-size: var(--section-content-font-size);
}


/* servizi - contattaci */ 
.h-line {
  border-bottom: 0.3rem solid var(--blue);
  margin: 1rem 10%;
  padding-top: 2.5rem;
}

.contact-us {
  color: var(--blue);
  text-align: center;
}

.contact-us-title {
  display: inline-block;
  font-family: var(--services-title-font);
  font-size: var(--services-title-font-size);
  border-bottom: 0.5rem solid var(--blue);
  margin: 0;
  padding: 2.5rem 0 0 0;
}

.contact-us-content {
  font-family: var(--services-content-font);
  font-size: var(--services-content-font-size);
  color: var(--black-text);
  padding: 1rem 25% 3rem;
  margin: 0;
}

  /* numbers and email button */

.contact-methods {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 3rem;
}

.numbers {
  flex: 3;
  padding: 0 5%;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 3fr;
  font-family: var(--services-content-font);
  font-size: var(--services-content-font-size);
  color: var(--blue);
}

.prefix {
  text-align: left;
  padding: 0;
  margin: 0;
}

.number {
  text-align: left;
  padding: 0;
  margin: 0;
}

.contact-button {
  flex: 1;
  font-family: var(--button-font);
  font-size: var(--button-font-size);
  color: var(--button-text-color);
  border: 0.3rem solid var(--button-border-color);
  transition: all .5s ease;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  background-color : var(--button-background-color);
  padding: 0.4rem;
  margin: 0;
  outline: none;
  border-radius: 0.7rem;
}

.contact-button:hover {
  background-color: var(--button-border-color);
  color: var(--button-background-color);
}

.empty {
  flex: 3;
  padding: 0 5%;
  margin: 0;
}


/* jobs */
.job-img-panel {
  position: relative;
  width: 100%;
  height: 35rem;
}

.job-header-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(60%);
}

.preamble {
  color: var(--blue);
  text-align: center;
}

.preamble-title {
  display: inline-block;
  font-family: var(--jobs-title-font);
  font-size: var(--jobs-title-font-size);
  border-bottom: 0.5rem solid var(--blue);
  margin: 0;
  padding: 2.5rem 0 0 0;
}

.preamble-message {
  font-family: var(--jobs-content-font);
  font-size: var(--jobs-content-font-size);
  color: var(--black-text);
  padding: 1rem 25% 3rem;
  margin: 0;
}

.separator {
  background-color: var(--blue);
  font-family: var(--job-separator-font);
  font-size: var(--job-separator-font-size);
  color: var(--snow-white);
  padding: 1rem 2%;
  margin-bottom: 1rem;
}


/* voluntary candidature */

.spontaneous-candidature {
  color: var(--blue);
  text-align: center;
}

.candidature-title {
  display: inline-block;
  font-family: var(--services-title-font);
  font-size: var(--services-title-font-size);
  border-bottom: 0.5rem solid var(--blue);
  margin: 0;
  padding: 2.5rem 0 0 0;
}

.candidature-content {
  font-family: var(--services-content-font);
  font-size: var(--services-content-font-size);
  color: var(--black-text);
  padding: 1rem 25% 3rem;
  margin: 0;
}

/* email button */

.contact-methods {
  justify-content: space-between;
  align-items: center;
  padding-bottom: 3rem;
}

.contact-button {
  font-family: var(--button-font);
  font-size: var(--button-font-size);
  color: var(--button-text-color);
  border: 0.3rem solid var(--button-border-color);
  transition: all .5s ease;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  background-color : var(--button-background-color);
  padding: 0.4rem;
  margin: 0;
  outline: none;
  border-radius: 0.7rem;
}

.contact-button:hover {
  background-color: var(--button-border-color);
  color: var(--button-background-color);
}