/* ============================================================
   VATICAN OBSERVATORY - user.css
   ============================================================ */

@font-face {
  font-family: 'EB Garamond';
  src: url('/files/Fonts/eb-garamond-v32-latin-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('/files/Fonts/eb-garamond-v32-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

*, :before, :after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color:#e5e7eb
}

:root {
  --cassiopeia-font-family-body: "EB Garamond", serif;
  --cassiopeia-font-family-headings: "EB Garamond", serif;
  --cassiopeia-font-weight-headings: 400;
  --cassiopeia-font-weight-normal: 400;
  --vo-gold-1:     #FFE799;
  --vo-gold-2:     #FFDB66;
  --vo-gold-3:     #FFCF33;
  --vo-gold:       #C9A84C;
  --vo-gold-light: #DFC070;
  --vo-gold-pale:  #F0E4B8;
  --vo-travertine: #FAF8F4;
  --vo-ink:        #111111;
  --vo-muted:      #888888;
  --vo-border:     #E0DDD8;
  --cassiopeia-color-primary: #111111;
  --cassiopeia-color-hover:   #C9A84C;
  --link-color:               #C9A84C;
  --link-hover-color:         #DFC070;
  --body-bg:                  #FAF8F4;
  --body-color:               #111111;
}

html, body { background-color: var(--vo-travertine) !important; color: var(--vo-ink); }
body { font-family: "EB Garamond", serif; font-size: 1.1rem; line-height: 1.7; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: "EB Garamond", serif; font-weight: 400;
  letter-spacing: 0.05em; color: var(--vo-ink); text-transform: uppercase;
}
a { color: var(--vo-gold); text-decoration: none; }
a:hover { color: var(--vo-gold-light); text-decoration: none; }



/* -- HEADER ----------------------------------------------- */
header.container-header {
  background: var(--vo-travertine) !important;
  background-image: none !important;
  /* box-shadow: none !important; */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #ddd;
  /* position: relative !important; */
  position: sticky;
  z-index: 1000;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* -- TOPBAR ----------------------------------------------- */
header.container-header .container-topbar {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0.4rem 2rem !important;
  border: 1px solid #ddd;
  background: #FFd700 !important; /* slightly deeper than --vo-travertine (#FAF8F4) */
  color: var(--vo-ink) !important;
}



header.container-header .container-topbar {
 
}

.container-header .site-description {
  color: #22262a; /* was #fff */
}

.container-header .navbar-brand,
.container-header .navbar-brand a {
  color: #22262a; /* was #fff */
}

.container-header .navbar-brand:hover,
.container-header .navbar-brand:focus {
  color: #000; /* was #f0f0f0 */
}

.container-header .mod-menu {
  color: #22262a; /* was #fff */
}

.container-header .navbar-toggler {
  color: #22262a;
  border: 1px solid #22262a; /* was white border/text */
}

.container-header .mod-finder,
.container-header .mod-finder a:not(.jmodedit) {
  color: #22262a; /* was #fff */
}

.container-header .mod-finder a:not(.jmodedit):hover,
.container-header .mod-finder a:not(.jmodedit):focus {
  color: #000; /* was #e6e6e6 */
}


@media (width <= 991.98px) {
  .container-header .mod-menu .mod-menu__sub a,
  .container-header .mod-menu .mod-menu__sub span {
    color: #22262a; /* was #fff */
  }
}

.container-header .mod-menu > li.active:after,
.container-header .mod-menu > li:hover:after {
  background: #22262a; /* was #fff */
}

.container-header .metismenu > li > a:hover:after,
.container-header .metismenu > li > button:hover:before,
.container-header .metismenu > li.active > a:after,
.container-header .metismenu > li.active > button:before {
  background: #22262a; /* was #fff */
}


/* Uniform titles */

.items-row .item {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.items-row .item .page-header h2,
.items-row .item .item-title {
  min-height: 3.2rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

}



}

.items-row .item .item-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.items-row .item .readmore {
  margin-top: auto !important;
}




.footer {
  background-color: #1a1a2e;
  background-image: none;
}



/* Two-column footer grid */
.footer .grid-child {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2.5rem 1rem;
}

/* Text column styling */
.footer .mod-footer-text p {
  margin: 0 0 .5rem;
  line-height: 1.5;
}

/* Image column styling */
.footer .mod-footer-image {
  display: flex;
  justify-content: center; /* change to flex-start or flex-end to align image differently */
}

.footer .mod-footer-image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* centers the image itself if flex isn't fully controlling it */
}


.footer .mod-footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer .mod-footer-links li {
  margin-bottom: .5rem;
}


/* Stack columns on smaller screens */
@media (max-width: 991.98px) {
  .footer .grid-child {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }

  .footer .mod-footer-image {
    justify-content: center;
  }
}
/* =========================================================
   FOOTER - MOBILE FIX
   ========================================================= */

@media (max-width: 991.98px) {

    .footer .grid-child {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        text-align: center !important;
    }

    .footer .moduletable,
    .footer .mod-custom {
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .footer img {
        display: block !important;
        max-width: 180px !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

}
/* ============================================================
   VATICAN OBSERVATORY - RESPONSIVE STANDARD
   SOLO MOBILE
   ============================================================ */


/* ---------- IMMAGINI ---------- */

.vo-img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* ---------- TESTO ---------- */

.vo-content {
    font-family: 'Trebuchet MS', Arial, sans-serif;
}


/* ---------- MOBILE ---------- */

@media (max-width: 768px) {

    .vo-row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 25px !important;
        box-sizing: border-box !important;
    }

    .vo-col,
    .vo-col-50,
    .vo-col-60,
    .vo-col-40 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        box-sizing: border-box !important;
    }

    .vo-section {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .vo-img {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .vo-content {
        font-size: 18px !important;
        line-height: 1.55 !important;
    }

    .vo-button {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

}


/* ---------- SMARTPHONE PICCOLI ---------- */

@media (max-width: 480px) {

    .vo-content {
        font-size: 17px !important;
    }

    .vo-row {
        gap: 20px !important;
    }

}
/* ==================================/* ============================================================
   VATICAN OBSERVATORY - PEOPLE / FACULTY STANDARD
   ============================================================ */


/* ---------- DESKTOP ---------- */

.vo-person {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    gap: 0;
    align-items: flex-start;

    margin-bottom: 55px;
    padding-bottom: 55px;

    border-bottom: 1px solid #d4d8df;

    box-sizing: border-box;
    font-family: 'Trebuchet MS', Arial, sans-serif;
}


/* ---------- PHOTO ---------- */

.vo-person-photo {
    width: 360px;
    flex: 0 0 360px;

    padding-right: 45px;

    box-sizing: border-box;
}

.vo-person-photo img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;
}


/* ---------- TEXT ---------- */

.vo-person-text {
    flex: 1 1 auto;
    min-width: 0;

    padding-left: 45px;

    border-left: 1px solid #d4d8df;

    color: #4d4f5c;

    font-family: 'Trebuchet MS', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;

    box-sizing: border-box;
}


/* ---------- NAME ---------- */

.vo-person-name {
    margin: 0 0 7px 0;

    color: #111111;

    font-family: 'Trebuchet MS', Arial, sans-serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
}


/* ---------- ROLE ---------- */

.vo-person-role {
    margin: 0 0 7px 0;

    color: #5dade2;

    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: 1px;
}


/* ---------- INSTITUTION ---------- */

.vo-person-institution {
    position: relative;

    margin: 0 0 30px 0;
    padding-bottom: 22px;

    color: #666666;

    font-size: 17px;
    line-height: 1.4;
}


/* piccolo divisore azzurro */

.vo-person-institution::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 55px;
    height: 3px;

    background-color: #5dade2;
}


/* ---------- BIOGRAPHY ---------- */

.vo-person-text p {
    margin: 0;

    color: #4d4f5c;

    font-family: 'Trebuchet MS', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media screen and (max-width: 768px) {

    .vo-person {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-bottom: 45px !important;
        padding-bottom: 45px !important;

        border-bottom: 1px solid #d4d8df !important;
    }


    .vo-person-photo {
        display: block !important;

        width: 100% !important;
        max-width: 400px !important;

        padding-right: 0 !important;

        margin: 0 auto 28px auto !important;
    }


    .vo-person-photo img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 auto !important;
    }


    .vo-person-text {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        padding-left: 0 !important;

        border-left: 0 !important;
    }


    .vo-person-name {
        font-size: 27px !important;
    }


    .vo-person-role {
        font-size: 14px !important;
    }


    .vo-person-institution {
        font-size: 16px !important;
        margin-bottom: 25px !important;
        padding-bottom: 20px !important;
    }


    .vo-person-text p {
        font-size: 17px !important;
        line-height: 1.6 !important;
    }

/* ============================================================
   VO PERSON - MOBILE FIX
   Mantiene intatto il layout desktop elegante
   ============================================================ */

@media screen and (max-width: 768px) {

    .vo-person {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;

        margin-bottom: 40px !important;
        padding-bottom: 40px !important;

        box-sizing: border-box !important;
    }


    /* FOTO */

    .vo-person .vo-person-photo {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        flex: none !important;

        padding: 0 !important;
        margin: 0 0 28px 0 !important;

        box-sizing: border-box !important;
    }


    .vo-person .vo-person-photo img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;
    }


    /* TESTO */

    .vo-person .vo-person-text {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        flex: none !important;
        min-width: 0 !important;

        padding: 0 !important;

        /* elimina la linea verticale del desktop */
        border-left: 0 !important;

        box-sizing: border-box !important;
    }


    /* NOME */

    .vo-person .vo-person-text > div:first-child {
        font-size: 27px !important;
        line-height: 1.2 !important;
    }


    /* BIOGRAFIA */

    .vo-person .vo-person-text p {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 17px !important;
        line-height: 1.6 !important;

        margin: 0 !important;
    }

}


/* ---------- SMARTPHONE PICCOLI ---------- */

@media screen and (max-width: 480px) {

    .vo-person {
        margin-bottom: 35px !important;
        padding-bottom: 35px !important;
    }

    .vo-person .vo-person-photo {
        margin-bottom: 25px !important;
    }

    .vo-person .vo-person-text > div:first-child {
        font-size: 25px !important;
    }

    .vo-person .vo-person-text p {
        font-size: 17px !important;
    }

}
}

  
}
}