/* =========================================

   1. FONTS & TYPOGRAPHY (SCOPED TO OLIVERO)

   ========================================= */



@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');



@font-face {

  font-family: 'Quantify';

  src: url('https://cdn.jsdelivr.net/gh/pjay79/BarsAppAmplify@master/android/app/src/main/assets/fonts/Quantify%20Bold.ttf') format('truetype');

  font-weight: bold;

  font-style: normal;

}



/* Site-Name */

#page .site-branding__name, 

#page .site-branding__name a {

  font-family: 'Quantify', sans-serif !important;

  font-weight: bold !important; 

  letter-spacing: 0.0em !important; 

  text-transform: none !important; 

  font-size: 2.4rem !important; 

  color: #ffffff !important;

  margin-top: 25px !important; 

  margin-left: -4px !important; 

  margin-bottom: 0 !important; 

  filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.4)) !important;

}



/* Tagline */
#page .site-branding__slogan {
  display: inline-block !important;
  font-family: 'Montserrat', sans-serif !important;
  margin-left: -16px !important;
  font-size: 0.5rem !important; 
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}



/* Headings */

#page h1, #page h2, #page h3, #page h4, #page h5, #page h6 {

  font-family: 'Montserrat', sans-serif !important;

  font-weight: 500 !important;

  letter-spacing: 0.02em !important;

  text-transform: uppercase !important;

  color: #ffffff !important;

}



#page h1 { font-size: 1.8rem !important; }

#page h2 { font-size: 1.5rem !important; }

#page h3 { font-size: 1.2rem !important; }

#page h4 { font-size: 1.0rem !important; }

#page h5, #page h6 { font-size: 0.8rem !important; }



/* Body Text */

#page body, #page p, #page a, #page li {

  font-family: 'Montserrat', sans-serif !important;

  font-weight: 400 !important;

  line-height: 1.6 !important; 

  font-size: 0.95rem !important; 

  color: #ffffff !important;

}



#page .field__label {

  display: none !important;

}



/* Navigation Links */

#page .primary-nav__menu-item a,

#page .header-nav .menu__link {

  font-family: 'Montserrat', sans-serif !important;

  font-weight: 500 !important;

  text-transform: uppercase !important;

  font-size: 0.85rem !important; 

}





/* =========================================
   2. LOGO SIZING & HOVER ANIMATIONS
   ========================================= */

#page .site-branding__logo img,
#page .site-branding__logo svg {
  margin-top: -10px !important; 
  display: block !important;
  height: 5rem !important; 
  width: auto !important;    
  max-height: none !important;
  max-width: none !important;
  object-fit: contain !important; 
  filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.4)) !important;
  transition: filter 0.3s ease-in-out !important; 
}

#page .site-branding__logo:hover img,
#page .site-branding__logo:hover svg {
  filter: invert(100%) hue-rotate(180deg) saturate(250%) drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.9)) !important;
}





/* =========================================

   3. BACKGROUND IMAGE & CONTENT TRANSPARENCY

   ========================================= */



/* Fixed Background Image */

#page .field--name-field-media img {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  width: 100vw !important;

  height: 100vh !important;

  object-fit: cover !important;

  z-index: -1 !important; 

  margin: 0 !important;

  max-width: none !important;

  pointer-events: none !important; 

}



#page .field--name-field-media {

  margin: 0 !important;

  padding: 0 !important;

  position: static !important;

}



/* Strip Olivero White Boxes */

#page, #page-wrapper, #main-wrapper, #page .layout-main-wrapper,

#page main, #page .layout-content, #page .region, #page .region-content, #page .block,

#page .node, #page .node__content {

  background: transparent !important;

  background-color: transparent !important;

  box-shadow: none !important;

}



#page #site-footer, #page .site-footer {

  position: relative !important;

  z-index: 10 !important; 

  background-color: var(--color--gray-100) !important;

}





/* =========================================
   4. NAVIGATION VISIBILITY FIXES
   ========================================= */

#page .primary-nav__menu-item__dropdown {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

#page .primary-nav__menu-item a,
#page .header-nav .menu__link {
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8) !important;
}

#page .primary-nav__menu-item a:hover,
#page .header-nav .menu__link:hover {
  color: #00ffff !important;
}

/* =========================================
   5. SINGLE UNIFIED GLASS CARD
   ========================================= */

#page .region--content-above,

#page .block-page-title-block,

#page .region-content,

#page div#content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#page .node {
  background: rgba(0, 0, 0, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8) !important;
  padding: 3rem !important;
  max-width: 1200px !important;
  margin: 3rem auto !important;
}

#page .node h1.page-title,
#page .node .field--name-field-body p {
  text-shadow: none !important;
}  

/* =========================================

   6. HAMBURGER MENU BUTTON & STRIPES

   ========================================= */



/* Nuke the white background from the button container AND the button itself */

#page #header .mobile-buttons,

#page #header .mobile-nav-button,

#page #header .mobile-nav-button[aria-expanded="true"] {

  background: transparent !important;

  background-color: transparent !important;

  background-image: none !important;

  border: none !important;

  box-shadow: none !important;

}



/* Force the hamburger/X icon lines to pure white */

#page #header .mobile-nav-button__icon,

#page #header .mobile-nav-button__icon::before,

#page #header .mobile-nav-button__icon::after {

  background-color: transparent !important;

  border-color: #ffffff !important;

  border-top-color: #ffffff !important;

  box-shadow: none !important;

}





/* =========================================

   7. TIGHTEN SPACE AROUND PAGE HEADER

   ========================================= */



#page .block-page-title-block {

  margin-top: -30px !important;

  margin-bottom: -30px !important;

}





/* =========================================

   8. SHRINK FOOTER HEADER ("POWERED BY:")

   ========================================= */



#page .site-footer h2,

#page .site-footer .block__title {

  font-size: 0.8rem !important;

  margin-bottom: 0.5rem !important;

}





/* =========================================

   9. THE ULTIMATE HEADER & MENU LAYER FIX

   ========================================= */



/* Strip the white background off all outer structural header wrappers */

#page #header,

#page #header .site-header__fixable,

#page #header .site-header__initial,

#page #header #site-header__inner,

#page #header .site-header__inner__container,

#page #header .header-nav-overlay {

  background: transparent !important;

  background-color: transparent !important;

  background-image: none !important;

  box-shadow: none !important;

  border: none !important;

}



/* THE CULPRITS: Strip the white background off the internal navigation blocks */

#page #header #header-nav,

#page #header .primary-nav,

#page #header #block-olivero-main-menu,

#page #header .region-secondary-menu {

  background: transparent !important;

  background-color: transparent !important;

  background-image: none !important;

  box-shadow: none !important;

  border: none !important;

}



/* Nuke ALL pseudo-elements in the header tree that Olivero uses to paint hidden background boxes */

#page #header::before,

#page #header::after,

#page #header .site-header__fixable::before,

#page #header .site-header__fixable::after,

#page #header #site-header__inner::before,

#page #header #site-header__inner::after,

#page #header #header-nav::before,

#page #header #header-nav::after,

#page #header .primary-nav::before,

#page #header .primary-nav::after {

  background: transparent !important;

  background-color: transparent !important;

  background-image: none !important;

  display: none !important;

  content: none !important;

}



/* Apply the dark glass background solely to the active menu container */

#page #header #header-nav.is-active {

  background-color: rgba(0, 0, 0, 0.85) !important;

  top: 0 !important;

  padding-top: 6rem !important; /* Clears the logo area */

  box-shadow: 0 -200px 0 0 rgba(0, 0, 0, 0.85) !important; /* Projects shadow upwards */

}



/* Force the logo and close button to sit on top of the dark menu */

#page #header .site-branding,

#page #header .mobile-buttons {

  position: relative !important;

  z-index: 9999 !important;

}



/* =========================================

   10. KILL SOCIAL-BAR BACKGROUND

   ========================================= */

#page .social-bar,

.social-bar {

  background: transparent !important;

  background-color: transparent !important;

  box-shadow: none !important;

}



/* =========================================
   11. FULL-WIDTH 100% METALLIC FOOTER
   ========================================= */

.site-footer {
	text-decoration: none important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
}

/* Edge-to-edge span with a black base and a radial grey metallic sheen */
.site-footer::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: calc(-1 * (100vw - 100%) / 2) !important;
  right: calc(-1 * (100vw - 100%) / 2) !important;
  background-color: #000000 !important;
  background-image: radial-gradient(circle at 50% 25%, rgba(100, 100, 100, 0.5) 0%, rgba(40, 40, 40, 0.75) 45%, rgba(0, 0, 0, 1) 90%) !important;
  z-index: -1 !important;
}

/* Keep the inner content nicely padded and aligned */
.site-footer .site-footer__inner,
.site-footer__inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* Override global white text to set footer text grey */
#page .site-footer,
#page .site-footer p,
#page .site-footer span,
#page .site-footer div,
#page .site-footer small {
  color: #b0b0b0 !important;
}

/* Force footer links to white */
#page .site-footer a {
  color: #ffffff !important;
}

#page .site-footer a:hover {
  color: #00ffff !important;
}