/* ============================================================
   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;
}

: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;

  /* Nav breakpoint used consistently everywhere below, with a buffer
     above the old 992px cliff to avoid Windows DPI-scaling rounding
     landing exactly on the boundary. */
  --vo-nav-breakpoint: 1280px;
}

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;
  border: none !important;
  position: relative !important;
  z-index: 1000;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
}
header.container-header > .grid-child.container-below-top { display: none !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;
  background: var(--vo-travertine) !important;
  color: var(--vo-ink) !important;
}
header.container-header .container-topbar .mod-languages { display: flex !important; align-items: center !important; }
header.container-header .container-topbar ul { display: flex !important; flex-direction: row !important; gap: 0.4rem !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
header.container-header .container-topbar ul li { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; }
header.container-header .container-topbar ul li a { display: flex !important; align-items: center !important; padding: 0 0.2rem !important; border-bottom: 2px solid transparent !important; opacity: 0.7 !important; transition: opacity 0.2s !important; }
header.container-header .container-topbar ul li a:hover { opacity: 1 !important; }
header.container-header .container-topbar ul li.active a,
header.container-header .container-topbar ul li a[aria-current] { opacity: 1 !important; border-bottom: 2px solid var(--vo-gold) !important; padding-bottom: 0 !important; }
header.container-header .container-topbar ul li img { height: 14px !important; width: auto !important; display: block !important; }
header.container-header .container-topbar p { display: none !important; }

/* -- LOGO ROW --------------------------------------------- */
header.container-header > .grid-child:not(.container-below-top):not(.container-nav):not(.container-topbar) {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; max-width: 100% !important; margin: 0 !important;
  height: 200px !important; padding: 16px 2rem 8px !important;
  background: var(--vo-travertine) !important; border: none !important;
  position: static !important; transform: none !important;
}
body.vo-mercury-active header.container-header > .grid-child:not(.container-below-top):not(.container-nav):not(.container-topbar) { background-color: var(--vo-gold-pale) !important; }
header.container-header .navbar-brand,
header.container-header .navbar-brand a { display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 auto !important; padding: 0 !important; height: auto !important; max-height: none !important; }
header.container-header .navbar-brand img,
header.container-header .navbar-brand > img,
header.container-header .navbar-brand a img { height: 175px !important; width: auto !important; max-width: none !important; max-height: none !important; display: block !important; margin: 0 auto !important; }
header.container-header .site-description { display: none !important; }

/* -- NAV ROW ---------------------------------------------- */
header.container-header > .grid-child.container-nav {
  display: flex !important; flex-direction: row !important; align-items: stretch !important;
  justify-content: space-between !important; width: 100% !important; max-width: 100% !important;
  height: 52px !important; margin: 0 !important; padding: 0 !important;
  background: var(--vo-travertine) !important; border: none !important;
  position: relative !important; z-index: 200 !important;
}
body.vo-mercury-active header.container-header > .grid-child.container-nav { background-color: var(--vo-gold-pale) !important; }

header.container-header .mod-menu > li::after { display: none !important; }
header.container-header .mod-menu {
  display: flex !important; flex-direction: row !important; align-items: stretch !important;
  flex-wrap: nowrap !important; /* CRITICAL: without this, too many top-level items
    (ABOUT / HISTORY / NEWS & EVENTS / RESEARCH / EDUCATION / FAITH & SCIENCE) wrap to
    a second line once the effective viewport is narrow enough - which happens on
    Windows far more often than Mac because Windows display scaling (commonly 125%)
    shrinks the effective CSS pixel width of the viewport, while macOS Retina scaling
    does not. Because the nav row has a fixed height, a wrapped second line has
    nowhere to go and paints directly over the hero banner below it. nowrap forces
    this to fail safely (shrink/scroll) instead of silently overlapping content. */
  list-style: none !important; margin: 0 !important; padding: 0 !important; width: auto !important;
}
header.container-header > .grid-child.container-nav { flex-wrap: nowrap !important; overflow: visible; }
header.container-header .container-nav .mod-menu:first-of-type { justify-content: flex-start !important; }
header.container-header .container-nav .mod-menu:last-of-type { margin-left: auto !important; justify-content: flex-end !important; }
header.container-header .mod-menu > li {
  display: flex !important; align-items: center !important;
  padding: 0 !important; margin: 0 !important; position: relative !important;
}

header.container-header .mod-menu > li > a {
  display: flex !important; align-items: center !important; height: 52px !important;
  padding: 0 1.4rem !important; color: var(--vo-ink) !important; background: transparent !important;
  font-size: 0.82rem !important; letter-spacing: 0.15em !important; text-transform: uppercase !important;
  font-family: "EB Garamond", serif !important; white-space: nowrap !important;
  text-decoration: none !important; border-bottom: 2px solid transparent !important;
  transition: color 0.2s, border-color 0.2s !important;
}
header.container-header .mod-menu > li > a:hover,
header.container-header .mod-menu > li.active > a { color: var(--vo-gold) !important; border-bottom-color: var(--vo-gold) !important; }

/* -- DROPDOWN ARROW on parent items ----------------------- */
header.container-header .mod-menu .mm-toggler,
header.container-header .mod-menu .mm-toggler-link,
header.container-header .mod-menu button.mm-collapsed { display: none !important; }

header.container-header .mod-menu > li.parent > a,
header.container-header .mod-menu > li.deeper > a {
  cursor: default !important;
}
header.container-header .mod-menu > li.parent > a::after,
header.container-header .mod-menu > li.deeper > a::after {
  display: none !important;
}

/* -- SUBMENU PANEL (desktop) ------------------------------
   Single consolidated rule set. Previously this was split into
   two separate blocks — one for plain <ul>, one specifically for
   <ul class="mm-collapse"> inside its own @media query — and they
   disagreed on how the closed/open state was implemented (display:none
   vs opacity/visibility). Any element caught in between (e.g. at a
   viewport width sitting right on the old breakpoint due to Windows
   DPI scaling reducing effective CSS px) could render unstyled and
   in normal document flow instead of as a positioned, boxed panel.
   Using one rule for all submenu variants removes that gap entirely. */
@media (min-width: 1280px) {
  header.container-header .mod-menu > li.parent > ul,
  header.container-header .mod-menu > li.deeper > ul {
    display: block !important;
    position: absolute !important;
    top: 52px !important;
    left: 0 !important;
    min-width: 220px !important;
    margin: 0 !important;
    padding: 0.4rem 0 !important;
    background: var(--vo-travertine) !important;
    border: 1px solid var(--vo-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.10) !important;
    list-style: none !important;
    z-index: 9999 !important;
    flex-direction: column !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease, visibility 0.15s ease !important;
  }
  header.container-header .mod-menu > li.parent:hover > ul,
  header.container-header .mod-menu > li.deeper:hover > ul,
  header.container-header .mod-menu > li.parent:focus-within > ul,
  header.container-header .mod-menu > li.deeper:focus-within > ul {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Below the breakpoint, submenus are always hidden until the mobile
   block further down switches them to the stacked, static layout.
   This prevents any "unstyled but visible" flash at intermediate
   widths before the mobile media query kicks in. */
@media (max-width: 1279px) {
  header.container-header .mod-menu > li.parent > ul,
  header.container-header .mod-menu > li.deeper > ul {
    display: none !important;
  }
}

header.container-header .mod-menu > li.parent > ul > li,
header.container-header .mod-menu > li.deeper > ul > li {
  display: block !important; margin: 0 !important; padding: 0 !important;
}
header.container-header .mod-menu > li.parent > ul > li > a,
header.container-header .mod-menu > li.deeper > ul > li > a {
  display: block !important; height: auto !important; padding: 0.6rem 1.4rem !important;
  color: var(--vo-ink) !important; font-size: 0.82rem !important; letter-spacing: 0.1em !important;
  text-transform: uppercase !important; font-family: "EB Garamond", serif !important;
  text-decoration: none !important; border-bottom: none !important; white-space: nowrap !important;
}
header.container-header .mod-menu > li.parent > ul > li > a:hover,
header.container-header .mod-menu > li.deeper > ul > li > a:hover {
  background: var(--vo-gold-pale) !important; color: var(--vo-gold) !important;
}

/* -- RIGHT MENU: colored buttons -------------------------- */
header.container-header .container-nav .mod-menu:last-of-type > li { align-items: stretch !important; }
header.container-header .container-nav .mod-menu:last-of-type > li > a { border-bottom: none !important; color: #111111 !important; padding: 0 1.6rem !important; height: 52px !important; }
header.container-header .container-nav .mod-menu:last-of-type > li > a:hover { border-bottom: none !important; color: #111111 !important; filter: brightness(0.93) !important; }
header.container-header .container-nav .mod-menu:last-of-type > li:nth-child(1) > a { background-color: #FFF3CC !important; }
header.container-header .container-nav .mod-menu:last-of-type > li:nth-child(2) > a { background-color: #FFE799 !important; }
header.container-header .container-nav .mod-menu:last-of-type > li:nth-child(3) > a { background-color: #FFDB66 !important; }

/* -- HERO BANNER MODULE (site homepage banner) -- */
.container-banner { margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
.container-banner .moduletable, .container-banner .mod-custom { margin: 0 !important; padding: 0 !important; }
.container-banner img { width: 100% !important; height: 68vh !important; min-height: 420px !important; max-height: 700px !important; object-fit: cover !important; display: block !important; }
.container-banner .banner-overlay { height: 68vh !important; min-height: 420px !important; max-height: 700px !important; background-attachment: fixed !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; display: flex !important; align-items: flex-end !important; }
.container-banner .banner-overlay .overlay { width: 100%; padding: 3rem 5%; background: linear-gradient(to top, rgba(17,17,17,0.72) 0%, rgba(17,17,17,0.15) 55%, transparent 100%); display: flex; flex-direction: column; align-items: flex-start; }
.container-banner .banner-overlay .overlay h1 { color: #fff !important; text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 3.2rem); text-shadow: 0 2px 16px rgba(0,0,0,0.5); max-width: 700px; }
@media (max-width: 991px) { .container-banner .banner-overlay { background-attachment: scroll !important; height: 55vh !important; } }
@media (prefers-reduced-motion: reduce) { .container-banner .banner-overlay { background-attachment: scroll !important; } }

/* -- CONTENT ------------------------------------------------ */
.site-grid, .container-component, .container-top-a, .container-top-b, .container-bottom-a, .container-bottom-b { background-color: var(--vo-travertine) !important; }
.container-component { padding: 3rem 0 !important; }

/* -- NEWS GRID ------------------------------------------------ */
ul.mod-articles-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; grid-auto-rows: 420px !important; gap: 3px !important; max-width: 1600px !important; width: calc(100% - 2rem) !important; margin: 3rem auto !important; padding: 0 !important; list-style: none !important; background: transparent !important; }
ul.mod-articles-grid > li { position: relative !important; overflow: hidden !important; background: var(--vo-ink) !important; height: 420px !important; margin: 0 !important; padding: 0 !important; display: block !important; }
ul.mod-articles-grid > li > article { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; display: block !important; }
ul.mod-articles-grid > li > article > div { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; display: block !important; }
ul.mod-articles-grid > li dl { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; display: block !important; }
ul.mod-articles-grid > li figure { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; display: block !important; }
ul.mod-articles-grid > li figure img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center center !important; display: block !important; filter: brightness(0.72) !important; transition: transform 0.5s ease, filter 0.4s ease !important; }
ul.mod-articles-grid > li:hover figure img { transform: scale(1.06) !important; filter: brightness(0.45) !important; }
ul.mod-articles-grid > li h4.mod-articles-title { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; margin: 0 !important; padding: 3rem 1.1rem 1rem !important; background: linear-gradient(transparent, rgba(17,17,17,0.92)) !important; color: #fff !important; font-size: 0.92rem !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; line-height: 1.35 !important; z-index: 5 !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; }
ul.mod-articles-grid > li h4.mod-articles-title a { color: #fff !important; text-decoration: none !important; }
ul.mod-articles-grid > li:hover h4.mod-articles-title a { color: var(--vo-gold-1) !important; }
ul.mod-articles-grid > li .mod-articles-item-info, ul.mod-articles-grid > li time, ul.mod-articles-grid > li .mod-articles-readmore, ul.mod-articles-grid > li dd, ul.mod-articles-grid > li dt { display: none !important; }
@media (max-width: 1024px) { ul.mod-articles-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 360px !important; } ul.mod-articles-grid > li { height: 360px !important; } }
@media (max-width: 540px) { ul.mod-articles-grid { grid-template-columns: 1fr !important; grid-auto-rows: 300px !important; } ul.mod-articles-grid > li { height: 300px !important; } }

/* -- BUTTONS ------------------------------------------------ */
.btn-primary { background-color: var(--vo-gold) !important; border-color: var(--vo-gold) !important; color: #111 !important; border-radius: 0 !important; font-size: 0.85rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; padding: 0.6rem 1.8rem !important; }
.btn-primary:hover { background-color: var(--vo-gold-light) !important; border-color: var(--vo-gold-light) !important; color: #111 !important; }

/* -- BREADCRUMBS ------------------------------------------ */
.breadcrumb { background: transparent !important; font-size: 0.85rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 0.8rem 0 !important; }
.breadcrumb-item a { color: var(--vo-muted) !important; }
.breadcrumb-item a:hover { color: var(--vo-gold) !important; }
.breadcrumb-item.active { color: var(--vo-gold) !important; }
.breadcrumb-item + .breadcrumb-item::before { content: "–" !important; color: var(--vo-border) !important; }

/* -- PAGINATION ------------------------------------------- */
.page-link { background: transparent !important; border: 1px solid var(--vo-border) !important; color: var(--vo-ink) !important; border-radius: 0 !important; }
.page-link:hover { background: var(--vo-gold-pale) !important; color: var(--vo-gold) !important; }
.page-item.active .page-link { background: var(--vo-gold) !important; border-color: var(--vo-gold) !important; color: #111 !important; }

/* -- FOOTER ----------------------------------------------- */
.footer { background: var(--vo-ink) !important; background-image: none !important; color: rgba(255,255,255,0.7) !important; border-top: 2px solid var(--vo-gold) !important; margin-top: 0 !important; }
.footer .grid-child { padding: 3rem 2rem 2rem !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: flex-start !important; gap: 2rem !important; }
.footer a:not(.btn), .footer .btn-link { color: rgba(255,255,255,0.6) !important; font-size: 0.9rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; }
.footer a:not(.btn):hover { color: var(--vo-gold) !important; }
.footer .mod-footer { font-size: 0.8rem !important; color: rgba(255,255,255,0.35) !important; text-align: center !important; border-top: 1px solid rgba(255,255,255,0.1) !important; padding-top: 1.5rem !important; width: 100% !important; }

/* -- FORMS ------------------------------------------------ */
.form-control { background: var(--vo-travertine) !important; border: 1px solid var(--vo-border) !important; border-radius: 0 !important; color: var(--vo-ink) !important; }
.form-control:focus { border-color: var(--vo-gold) !important; box-shadow: 0 0 0 3px rgba(201,168,76,0.15) !important; }

/* -- MOBILE / STACKED NAV ------------------------------------
   Breakpoint now matches the desktop submenu breakpoint (1280px)
   so there is no gap between the two states. */
@media (max-width: 1279px) {
  header.container-header > .grid-child:not(.container-below-top):not(.container-nav):not(.container-topbar) { height: 100px !important; padding: 8px 1rem !important; }
  header.container-header .navbar-brand img, header.container-header .navbar-brand a img { height: 80px !important; }
  header.container-header > .grid-child.container-nav { height: auto !important; flex-direction: column !important; }
  header.container-header .mod-menu { flex-direction: column !important; width: 100% !important; }
  header.container-header .container-nav .mod-menu:last-of-type { margin-left: 0 !important; }
  header.container-header .container-nav .mod-menu:last-of-type > li > a { width: 100% !important; padding: 0.75rem 1.2rem !important; height: auto !important; }
  header.container-header .mod-menu > li > a { height: auto !important; padding: 0.75rem 1.2rem !important; }
  header.container-header .container-topbar { padding: 0.3rem 1rem !important; }

  /* Stacked submenu: intentionally unstyled/inline, shown via the
     toggler button rather than hover. This ONLY applies below the
     breakpoint now, and the breakpoint is identical to the one used
     in the desktop submenu block above — no intermediate width can
     fall through the cracks between the two rule sets anymore. */
  header.container-header .mod-menu > li.parent.mm-active > ul,
  header.container-header .mod-menu > li.deeper.mm-active > ul {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    border: none !important;
    padding-left: 1rem !important;
  }
  header.container-header .mod-menu .mm-toggler,
  header.container-header .mod-menu .mm-toggler-link,
  header.container-header .mod-menu button.mm-collapsed { display: inline-flex !important; }
}
@media (max-width: 575px) { .footer .grid-child { flex-direction: column !important; padding: 2rem 1rem !important; } }