/* ==========================================================================
   1. GLOBAL CONFIGURATION & TYPOGRAPHY STACK
   ========================================================================== */
html {
  font-size: 100% !important;
}

body {
  background-image: url("../images/firelights.gif") !important;
  background-repeat: repeat-y !important;
  background-position: center !important;
  background-color: #000000 !important;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.15rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 5rem 2rem;
}

/* ==========================================================================
   2. HEADER ARCHITECTURAL LOGO & CONNECTOR LINES
   ========================================================================== */
.gini-grid-header {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 5rem 2rem 2rem 2rem !important; 
  position: relative !important;
  box-sizing: border-box !important;
}

.gini-grid-header .gini-logo-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gini-grid-header .gini-header-circle {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 6rem !important;
  height: 6rem !important;
  margin: 0 auto !important; 
  padding: 0 !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  background: none !important;
  border: solid 2px #ffffff !important; 
  border-radius: 100% !important;
}

.gini-grid-header .gini-header-circle .gem-img {
  display: block !important;
  width: 70px !important;    
  height: 70px !important;   
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;     
  filter: brightness(0.5) sepia(1) hue-rotate(170deg) saturate(5) brightness(1.2) !important;
  transition: opacity 0.05s ease, transform 0.05s ease !important;
}

.gini-grid-header .gini-header-circle:hover .gem-img {
  opacity: 0.75 !important;
  transform: scale(1.15) !important; 
}

/* Vertical line extending downward from logo center */
.gini-grid-header .gini-header-circle::after {
  content: "" !important;
  position: absolute !important;
  top: 100% !important; 
  left: 50% !important;
  transform: translateX(-50%) !important; 
  width: 1px !important;
  height: 2.5rem !important; 
  background-color: #ffffff !important; 
  z-index: 2 !important;
}

/* Top Horizontal Base Line Under Logo */
.gini-grid-header .header-horizontal-line {
  display: block !important;
  width: 100% !important;
  max-width: 45rem !important; 
  height: 1px !important;
  margin: 2.5rem auto 3rem auto !important; 
  background-color: #ffffff !important; 
}

/* ==========================================================================
   3. CONTENT LAYOUT & TYPOGRAPHY STYLES
   ========================================================================== */
.content {
  display: block;
  width: 100%;
  max-width: 52rem; 
  margin: 0 auto;
  color: #f8f9fa;
}

#content-area {
  text-align: center;
}

#content-area h1 {
  font-size: 3rem !important;      
  font-weight: 300;               
  letter-spacing: 0.45rem;         
  text-transform: uppercase;
  margin-bottom: 2rem;
  line-height: 1.3 !important;
  color: #f8f9fa;
}

#content-area h2, 
#content-area h3 {
  font-size: 1.85rem !important;   
  font-weight: 400;
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  color: #f8f9fa;
}

/* Protected Content Elements (Skips Text Editor Frameworks) */
#content-area p, 
#content-area span:not([class*="note-"]), 
#content-area div:not(.note-editor):not(.note-toolbar):not([class*="note-"]) {
  font-size: 1.15rem !important;   
  font-weight: 300;               
  line-height: 1.95 !important;   
  letter-spacing: 0.06rem;        
  color: rgba(255, 255, 255, 0.8) !important;
}

#content-area a {
  color: #f8f9fa;
  text-decoration: underline;
  transition: opacity 0.05s ease;
}

#content-area a:hover {
  opacity: 0.8;
}

/* ==========================================================================
   4. IMAGE SLIDESHOW WINDOW MODULE
   ========================================================================== */
.slideshow-container {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 250px !important;
  max-width: 39rem !important;
  margin: 30px auto !important;
  overflow: hidden !important;
  background-color: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  transform: translateZ(0) !important;
}

.slideshow-container img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0; 
  animation: cssSlideshow8 24s infinite linear !important;
}

.slideshow-container img:nth-child(1) { animation-delay: 0s !important; opacity: 1 !important; }
.slideshow-container img:nth-child(2) { animation-delay: 5s !important; }
.slideshow-container img:nth-child(3) { animation-delay: 10s !important; }
.slideshow-container img:nth-child(4) { animation-delay: 15s !important; }

@keyframes cssSlideshow8 {
  0% { opacity: 0; }
  1.5% { opacity: 1; }
  11% { opacity: 1; }
  12.5% { opacity: 0; }
  100% { opacity: 0; }
}

/* ==========================================================================
   5. MENU BOX ARCHITECTURE & GRID LINES
   ========================================================================== */
#gini-grid-nav {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  margin-top: 4rem !important;
}

#gini-grid-nav .grid-horizontal-line {
  display: block !important;
  width: 100% !important;
  max-width: 45rem !important; 
  height: 1px !important;
  margin: 0 auto !important;
  background-color: #ffffff !important; 
}

#gini-grid-nav ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  list-style: none !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#gini-grid-nav ul li {
  display: inline-block !important;
  position: relative !important;
  margin: 0 15px !important; 
  padding-top: 2rem !important; 
}

/* Vertical grid line extending upwards to meet horizontal line */
#gini-grid-nav ul li::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 1px !important;
  height: 2rem !important; 
  background-color: #ffffff !important; 
}

#gini-grid-nav ul li a {
  display: block !important;
  padding: 0.8rem 1.5rem !important; 
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.25rem !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.02) !important; 
  border: 1px solid rgba(255, 255, 255, 0.4) !important; 
  border-radius: 4px !important; 
  transition: border-color 0.05s ease, background-color 0.05s ease, transform 0.05s ease, filter 0.05s ease !important;
}

/* Combines navigation transformations with gemstone blue overlay logic */
#gini-grid-nav ul li a:hover, 
#gini-grid-nav ul li.active a {
  opacity: 1 !important;
  border-color: #ffffff !important; 
  background-color: rgba(255, 255, 255, 0.1) !important; 
  transform: translateY(2px) !important; 
  filter: brightness(0.5) sepia(1) hue-rotate(170deg) saturate(5) brightness(1.2) !important;
}

/* ==========================================================================
   6. WONDERCMS SOCIAL ICON CLUSTER WRAPPER (BYPASS STRUCTURAL SELECTORS)
   ========================================================================== */

#gini-social-wrapper {
  display: block !important;
  width: 100% !important;
  margin-top: 3rem !important;
}

.contact-prompt {
  margin-bottom: 2rem !important;
}

/* Targets the main horizontal grid flex row wrapper */
#gini-social-wrapper .icons-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: flex-start !important; 
  width: 100% !important;
  margin: 25px 0 0 0 !important;
  padding: 0 !important;
}

/* Targets the anchor link blocks regardless of the stripped class name */
#gini-social-wrapper .icons-row a {
  display: flex !important;
  flex-direction: column !important; 
  align-items: center !important;    
  width: 100px !important;            
  margin: 0 25px !important;         
  padding: 0 !important;
  background: none !important;
  border: none !important;
  text-decoration: none !important;
}

/* Renders the CIRCLE at 85px by targeting the first child div inside the link */
#gini-social-wrapper .icons-row a > div {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;    
  width: 65px !important;            
  height: 65px !important;           
  margin-bottom: 12px !important;
  box-sizing: border-box !important;
  background-color: rgba(255, 255, 255, 0.02) !important; 
  border: 2px solid #ffffff !important;
  border-radius: 100% !important;    
  transition: border-color 0.05s ease, transform 0.05s ease, background-color 0.05s ease !important;
}

/* Forces the image inside that circle frame to 70px and turns it BLUE */
#gini-social-wrapper .icons-row a > div img {
  display: block !important;
  width: 60px !important;
  height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  opacity: 0.75 !important;
  /* Applies your original exact blue color transformation filters */
  filter: brightness(0.5) sepia(1) hue-rotate(170deg) saturate(5) brightness(1.2) !important;
  transition: opacity 0.05s ease !important;
}

/* Targets the text label span directly beneath the circle frames */
#gini-social-wrapper .icons-row a span {
  line-height: 1.2 !important;
  font-weight: 400 !important;
  letter-spacing: 0.1rem !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  transition: color 0.05s ease !important;
}


/* ==========================================================================
   BALANCED SOCIAL LABELS SIZING ADJUSTMENT (10-15% REDUCTION)
   ========================================================================== */

/* Adjusted font-size to 0.75rem for perfect balanced legibility */
html body #wrapper #header #content-area #gini-social-wrapper .social-link-item span.icon-label {
  font-size: 0.8rem !important;
  letter-spacing: 0.1rem !important; /* Restored original tracking for layout breathing room */
}
  
  /* Social link interaction updates */
  #gini-social-wrapper .social-link-item:hover .icon-circle-frame {
  border-color: rgba(255, 255, 255, 1) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  transform: scale(1.08) !important;
  }
  
  #gini-social-wrapper .social-link-item:hover .social-icon {
  opacity: 1 !important;
  }
  
  #gini-social-wrapper .social-link-item:hover .icon-label {
  color: #ffffff !important;
  }
  
  /* =======7. COMPONENT FOOTER SETTINGS============= */
  #footer {
  text-align: center;
  padding: 5rem 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem !important;
  letter-spacing: 0.07rem;color: #ffffff !important;
  filter: brightness(0.5) sepia(1) hue-rotate(170deg) saturate(5) brightness(1.2);
  }
  
 /* ======8. SUMMERNOTE HIGH-CONTRAST SELECTION PREVIEWS======= */
.note-dropdown-menu h1, .note-dropdown-menu h2, .note-dropdown-menu h3, 
.note-dropdown-menu h4, .note-dropdown-menu h5, .note-dropdown-menu h6, 
.note-dropdown-menu p, .note-dropdown-menu pre, .note-dropdown-menu blockquote, 
.note-dropdown-menu span, .note-dropdown-menu a {
  color: #222222 !important;
  background-color: transparent !important;
}

.note-dropdown-menu li a:hover *, .note-dropdown-menu li a:hover {
  color: #ffffff !important;
  background-color: #007bff !important;
}

/* --- SUPREME MODAL OVERRIDES: FORCES TEXT LABELS AND DIALOGS DARK --- */

/* Targets the core textual descriptions ("Text to display", "To what URL should this link go?") */
body .modal-dialog label,
body .note-modal label,
body .note-form-group label,
body .note-modal-title,
body .modal-title {
  color: #111111 !important; /* Sharp high-contrast dark charcoal color */
  background: #ffffff !important;
  background-color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Targets checkbox descriptor text components ("Open in new window") */
body .modal-dialog p,
body .modal-dialog span,
body .note-modal p,
body .note-modal span,
body .note-modal div {
  color: #222222 !important; 
  background: #ffffff !important;
  background-color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13px !important;
}

/* Forces deep gray outline borders onto the empty text fields so they don't blend away */
body .modal-dialog input[type="text"],
body .note-modal input[type="text"],
body .note-input {
  border: 1px solid #666666 !important; /* Visible field outlines */
  color: #111111 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
}