/* Prevent color flashing on load */
body {
	background:#009cb2 none no-repeat fixed center center;
}

/* Make text black */
html,body,body.page,.wf-container>* {
	color:black;
}

/* Page Title Bar styling */
.page-title.gradient-bg {
  background: #009cb2;
  background: -webkit-linear-gradient(103deg, #009cb2, #7f7ab0, #f7941d);
  background: linear-gradient(103deg, #009cb2, #7f7ab0, #f7941d);
}

.page-title h1, .page-title h1 *, .page-title h1 a:hover, #page .page-title .entry-title {
	color: white;
}

.page-title .breadcrumbs, .page-title .breadcrumbs a, .page-title .breadcrumbs li:before, .page-title .breadcrumbs li:before {
	color: white;
}

.header-bar {
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Search Result Titles */
.accent-gradient .description-under-image .post .entry-title a:hover, .accent-gradient .post .blog-content .entry-title a:hover, .accent-gradient .project-list-content .entry-title a:hover {
  background: -webkit-linear-gradient(90deg, #827aab 0%, #f15929 75%);
	background: linear-gradient(90deg, #827aab 0%, #f15929 75%);
  color: transparent;
	-webkit-background-clip: text;
  background-clip: text;
	transition-duration: 0.5s;
}

@media only screen and (min-width: 570px) {
  #perspectiveDiv {
    width: 400px;
		margin: 20px;
  }
}

#innerPersDiv {
	display: none;
	transition: transform 2s;
	transform-style: preserve-3d;
	transition-timing-function: cubic-bezier(0.59, -0.38, 0.39, 0.38);
}

/* Reduce z-indexes of footer + scroll button */
#bottom-bar {
	z-index: 8;
}

.scroll-top.on {
	z-index: 8;
}

/* Bellows Custom CSS */

/* Base Bellows background to white */
.bellows.bellows-skin-blue-material {
    background-color: white; /* Always white background for the menu itself */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Lighter, more subtle shadow */
    border: 1px solid #eee; /* Added a subtle border to distinguish from white background */
    border-radius: 10px; /* Rounded corners for the entire bellows menu container */
    overflow: hidden; /* Crucial for clipping content to the rounded corners */
}

/* Submenu item text color and base border */
.bellows.bellows-skin-blue-material .bellows-nav .bellows-submenu .bellows-target,
.bellows.bellows-skin-blue-material .bellows-nav .bellows-submenu .bellows-custom-content,
.bellows.bellows-skin-blue-material .bellows-nav .bellows-submenu .bellows-widget .textwidget {
    color: black;
    border-bottom: 1px solid #eee; /* Light separator */
    transition: none; /* No transition for instantaneous effects */
    background-color: transparent; /* Ensure submenu items are transparent by default */
}

/* White background for Tier 0 targets by default */
.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-0 > .bellows-target {
    background-color: white;
}

/* Ensure top-most item's target aligns with the main container's top rounding */
.bellows.bellows-skin-blue-material .bellows-nav > .bellows-item:first-child > .bellows-target {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* --- */

/* Hover Effects (No Background Color Change, Instantaneous) */

/* Level 0 Item Hover Effect (No height change) */
.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-0 > .bellows-target:hover {
    background-color: transparent; /* No background change on hover for level 0 */
    color: #3c84b8; /* Text color changes to blue from your palette on hover */
    /* Instantaneous underline effect using inset box-shadow to avoid height change */
    box-shadow: inset 0 -3px 0 0 #3c84b8; /* Blue line, 3px thick at the bottom */
}

/* Submenu Item Hover Effect (Now uses inset box-shadow for left "border" to preserve indentation) */
.bellows.bellows-skin-blue-material .bellows-nav .bellows-submenu .bellows-target:hover {
    background-color: transparent; /* No background change on hover for submenu items */
    color: #3c84b8; /* Text color changes to blue on hover */
    /* Cool border effect: Left border appears using inset box-shadow to preserve indentation */
    box-shadow: inset 3px 0 0 0 #3c84b8; /* Blue line, 3px thick on the left */
}

/* --- */

/* Currently Selected Item (Distinct Underline Colors per Tier) */

/* Current Menu Item / Ancestor at Level 0 (Now with 3px underline, like other tiers, and corrected orange color) */
.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-0.bellows-current-menu-item > .bellows-target,
.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-0.bellows-current-menu-ancestor > .bellows-target,
.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-0.bellows-active > .bellows-target {
    background-color: white; /* Ensure white background for active Tier 0 */
    color: black; /* Text color remains black for selected Tier 0 */
    /* Permanent Underline Effect: Orange line at the bottom */
    box-shadow: inset 0 -3px 0 0 #f7941d; /* Orange line, 3px thick */
    border-left: none; /* Ensure no left border from previous rules */
    border-radius: var(--bellows-item-padding-v); /* Maintain border-radius */
    padding-bottom: var(--bellows-item-padding-v); /* Ensure consistent padding */
}

/* Current Menu Item / Ancestor at Level 1 */
.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-1.bellows-current-menu-item > .bellows-target,
.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-1.bellows-current-menu-ancestor > .bellows-target {
    background-color: transparent; /* No background color */
    color: black; /* Text color remains black */
    font-weight: normal; /* Remove bold font weight */
    border-bottom: 1px solid #eee; /* Keep the subtle bottom border */
    border-radius: 0; /* Remove border-radius */
    box-shadow: inset 0 -3px 0 0 #00aeaf; /* Teal underline, 3px thick */
    border-left: none; /* Ensure no left border */
}

/* Current Menu Item / Ancestor at Level 2 */
.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-2.bellows-current-menu-item > .bellows-target,
.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-2.bellows-current-menu-ancestor > .bellows-target {
    background-color: transparent; /* No background color */
    color: black; /* Text color remains black */
    font-weight: normal; /* Remove bold font weight */
    border-bottom: 1px solid #eee; /* Keep the subtle bottom border */
    border-radius: 0; /* Remove border-radius */
    box-shadow: inset 0 -3px 0 0 #8c77b1; /* New purple-blue underline, 3px thick */
    border-left: none; /* Ensure no left border */
}

/* Current Menu Item / Ancestor at Level 3 and beyond */
.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-3.bellows-current-menu-item > .bellows-target,
.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-3.bellows-current-menu-ancestor > .bellows-target,
.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-4.bellows-current-menu-item > .bellows-target,
.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-4.bellows-current-menu-ancestor > .bellows-target,
.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-5.bellows-current-menu-item > .bellows-target,
.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-5.bellows-current-menu-ancestor > .bellows-target {
    background-color: transparent; /* No background color */
    color: black; /* Text color remains black */
    font-weight: normal; /* Remove bold font weight */
    border-bottom: 1px solid #eee; /* Keep the subtle bottom border */
    border-radius: 0; /* Remove border-radius */
    box-shadow: inset 0 -3px 0 0 #ef492d; /* Red-orange underline, 3px thick */
    border-left: none; /* Ensure no left border */
}

/* --- */

/* General Styling */

/* Rounded corners for the subtoggle icon */
.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-0 > .bellows-target .bellows-subtoggle {
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2); /* Slightly transparent white for subtoggle */
}

/* Custom CSS properties for padding and toggle width */
.bellows {
    --bellows-item-padding-v: 8px;
    --bellows-item-padding-h: 8px;
    --bellows-sub-item-padding-v: 8px;
    --bellows-sub-item-padding-h: 8px;
    --bellows-toggle-width: 40px;
}

/* Visual Distinction for Submenus (Tiers 1, 2, etc.) */
.bellows.bellows-skin-blue-material .bellows-nav .bellows-submenu {
    background-color: #fcfcfc; /* Very subtle light background for the entire submenu block */
    border-top: 1px solid #f0f0f0; /* Subtle top border to separate from parent item */
    padding-top: 5px; /* Add a little space at the top of the submenu block */
    padding-bottom: 5px; /* Add a little space at the bottom of the submenu block */
    margin-top: 5px; /* Add a little space above the submenu block */
    margin-bottom: 5px; /* Add a little space below the submenu block */
    border-bottom-left-radius: 10px; /* Rounded bottom corners for submenus */
    border-bottom-right-radius: 10px; /* Rounded bottom corners for submenus */
    overflow: hidden; /* Clip any overflow from rounded corners within the submenu */
}

/* Ensure the very last visible element of the menu gets rounded bottom corners */
/* This covers cases where the last top-level item is closed */
.bellows.bellows-skin-blue-material .bellows-nav > .bellows-item:last-child > .bellows-target {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* This covers cases where the last top-level item's submenu is open and is the bottom */
.bellows.bellows-skin-blue-material .bellows-nav > .bellows-item:last-child > .bellows-submenu {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Further ensure inner containers conform to rounding if necessary */
.bellows.bellows-skin-blue-material .bellows-nav > .bellows-item:last-child > .bellows-submenu > .bellows-inner {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}