/* Shared portfolio identity: load after the case styles and runtime.css.
   Shared by portfolio copies only; do not import into the React homepage.
   Exact font-face declarations copied from the home's public/index.html.
   Only typography and the replacement header logo are changed here. */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/cinzel-400-normal.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/cinzel-500-normal.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/cinzel-600-normal.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/cinzel-700-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/inter-300-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600-normal.woff2') format('woff2');}

:root {
  --body-font: 'Inter', sans-serif;
  --heading-font: 'Cinzel', serif;
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Cinzel', serif;
  --font-size-base: 16px;
  --font-weight-body: 400;
  --font-weight-heading: 400;
}

/* Elementor family variables can otherwise retain Lexend Deca.
   Keep its existing size/weight variables and all layout/color tokens. */
body.elementor-kit-7 {
  --e-global-typography-primary-font-family: 'Cinzel';
  --e-global-typography-secondary-font-family: 'Inter';
  --e-global-typography-text-font-family: 'Inter';
  --e-global-typography-accent-font-family: 'Inter';
}

body {
  font-family: var(--body-font) !important;
  font-size: 16px;
  font-weight: 400;
}

/* Semantic headings beat per-case Elementor Lexend rules.
   Existing heading sizes, line heights, transforms and emphasis stay in place. */
body :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.primary-nav) {
  font-family: var(--heading-font) !important;
  letter-spacing: 0.05em !important;
}

/* DSN calls paragraph widgets heading-title too; they are body copy.
   Do not assign Cinzel to every .dsn-heading-title descendant. */
body p,
body .elementor-widget-text-editor {
  font-family: var(--body-font) !important;
}

/* The full-screen menu keeps BlackDSN's size/line-height/gaps/overlay.
   Its actual text and the Menu/Close label use the home heading family. */
#site_menu_header .main-navigation .primary-nav,
#site_menu_header .main-navigation .primary-nav a,
#site_menu_header .main-navigation .menu-cover-title,
#site_menu_header #navbar_toggle .toggle-text {
  font-family: var(--heading-font) !important;
}

/* Existing copied menu spans retain an entrance style after the menu opens.
   Reveal only their text, preserving the original menu's geometry/spacing. */
.olimpo-menu-open #dsn-primary-list .overflow {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Applies only after the old wordmark has been replaced with the home image.
   HTML must also set width=420 height=334 and clear old logo srcset/data-src.
   !important defeats the old 147x46 inline dimensions without stretching it. */
#site_menu_header .main-logo .main-brand img.custom-logo[src*='/images/opt/olimpo-logo.webp'] {
  display: block !important;
  height: 64px !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
  aspect-ratio: 420 / 334;
  object-fit: contain;
}
@media (max-width: 767px) {
  #site_menu_header .main-logo .main-brand img.custom-logo[src*='/images/opt/olimpo-logo.webp'] {
    height: 56px !important;
  }
}

/* Deliberately no wildcard font-family rule or ::before/::after override.
   Font Awesome / Elementor / photo-gallery icon faces remain untouched. */

/* Keep the page still while the original full-screen menu is open. */
body.olimpo-menu-open { overflow: hidden !important; }
#site_menu_header .main-navigation { overscroll-behavior: contain; }
#dsn-primary-list a:focus-visible, #navbar_toggle:focus-visible,
#site_menu_header .main-brand:focus-visible {
  outline: 2px solid #D4AF37; outline-offset: 8px;
}

/* The UNICEF document viewer has no BlackDSN theme stylesheet.
   Give its shared header the same menu shell, leaving the PDF untouched. */
.olimpo-unicef-viewer #site_menu_header {
  position: fixed; inset: 4px 0 auto; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  box-sizing: border-box; padding: 16px clamp(16px, 7vw, 100px);
  min-height: 96px; color: #ddd;
}
.olimpo-unicef-viewer #site_menu_header .main-logo,
.olimpo-unicef-viewer #navbar_toggle { position: relative; z-index: 3; }
.olimpo-unicef-viewer #site_menu_header .main-brand { display: block; }
.olimpo-unicef-viewer #site_menu_header .main-navigation {
  position: fixed; inset: 0; z-index: 1;
  display: flex; align-items: center; box-sizing: border-box;
  padding: 100px; background: #191919;
  visibility: hidden; opacity: 0; transform: translateY(-10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.olimpo-unicef-viewer #dsn-primary-list {
  position: relative; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  width: 100%; max-height: calc(100dvh - 200px); overflow-y: auto;
  font-size: 35px; line-height: 1.5;
}
.olimpo-unicef-viewer #dsn-primary-list a {
  color: #ddd; text-decoration: none; display: inline-block; font-weight: 400;
}
.olimpo-unicef-viewer #dsn-primary-list a:hover { color: #D4AF37; }
.olimpo-unicef-viewer .menu-cover-title {
  position: absolute; left: 100px; top: 50%; transform: translateY(-50%);
  font-size: clamp(50px, 14vw, 170px); letter-spacing: .1em;
  opacity: 0; pointer-events: none;
}
.olimpo-unicef-viewer #navbar_toggle {
  display: flex; align-items: center; gap: 10px; font-size: 15px;
}
.olimpo-unicef-viewer .toggle-icon { width: 26px; }
.olimpo-unicef-viewer .toggle-line {
  width: 26px; height: 2px; background: currentColor; margin: 4px 0;
}
.olimpo-unicef-viewer #site_menu_header .bg-load { display: none; }
.olimpo-unicef-viewer .unicef-document-toolbar {
  margin-top: 100px; flex-shrink: 0;
}
@media (max-width: 767px) {
  .olimpo-unicef-viewer #site_menu_header { padding: 12px 16px; min-height: 80px; }
  .olimpo-unicef-viewer #site_menu_header .main-navigation { padding: 96px 32px 32px; }
  .olimpo-unicef-viewer #dsn-primary-list {
    font-size: clamp(22px, 5vw, 35px); max-height: calc(100dvh - 128px);
  }
  .olimpo-unicef-viewer .menu-cover-title { left: 32px; }
  .olimpo-unicef-viewer .unicef-document-toolbar { margin-top: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .olimpo-unicef-viewer #site_menu_header .main-navigation { transition: none; }
}

/* Make the original menu links interactive while the overlay is open. */
.olimpo-menu-open #dsn-primary-list { z-index: 1 !important; }
.olimpo-menu-open #dsn-primary-list li,
.olimpo-menu-open #dsn-primary-list a,
.olimpo-menu-open #dsn-primary-list .overflow { pointer-events: auto !important; }