/*
Theme Name: Avada Child
Description: Child theme for the Avada
Author: Lee Han Kyeol
Template: Avada
*/

/* =============================================================================
   Disclosure Nav Walker — append to bottom of style.css
   ============================================================================= */

/* Alias for Walker's screen-reader-text — matches existing .visuallyhidden */
.screen-reader-text {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

/* Parent row layout — keep the <li> as a normal block so Avada's
   horizontal nav layout is not disturbed. The toggle button is
   positioned absolutely so it doesn't add width to the <li>. */
li.has-submenu {
    position: relative; /* anchor for absolute sub-menu + button */
}

/* The link fills the full clickable area as normal */
li.has-submenu > a {
    display: inline-block; /* or Avada's default; don't override to flex */
}

/* Toggle button sits to the right of the link text, on top of the <li>,
   without contributing to its layout width */
li.has-submenu > .submenu-toggle {
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translateY(-50%);
}

/* Submenu toggle button — unstyled base */
.submenu-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    line-height: 1;
}

/* Visual chevron via CSS — no icon font dependency */
.submenu-toggle::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.2s ease;
}

/* Rotate chevron when open */
.submenu-toggle[aria-expanded="true"]::before {
    transform: rotate(180deg);
}

/* Focus styles — visible for keyboard users */
.submenu-toggle:focus {
    outline: 2px solid #036272;
    outline-offset: 2px;
}

/* =============================================================================
   SUBMENU VISIBILITY — single source of truth
   JS is the ONLY thing that opens/closes submenus via data-open="true".
   CSS never opens a submenu on its own. No :hover rule shows a submenu.
   ============================================================================= */

/* 1. KILL every hover/default trigger — belt-and-braces across all Avada
      selector patterns. visibility+pointer-events handle cases where Avada
      uses those properties instead of (or in addition to) display.
      The wildcard * catch-all at the end ensures no specificity escape.    */
.sub-menu,
li .sub-menu,
li:hover > .sub-menu,
li.has-submenu > .sub-menu,
li.has-submenu:hover > .sub-menu,
.fusion-main-menu li > .sub-menu,
.fusion-main-menu li:hover > .sub-menu,
.fusion-main-menu li.has-submenu > .sub-menu,
.fusion-main-menu li.has-submenu:hover > .sub-menu,
.fusion-main-menu .fusion-dropdown-menu > .sub-menu,
.fusion-main-menu .fusion-dropdown-menu:hover > .sub-menu,
nav li > .sub-menu,
nav li:hover > .sub-menu,
* li > .sub-menu,
* li:hover > .sub-menu,
* li:focus > .sub-menu,
* li:focus-within > .sub-menu {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* 2. OPEN — only when JS sets data-open="true" on the parent <li>.
      Added #wrapper for max specificity, plus height/overflow overrides
      so Avada's keyboard/hover calculations don't clip the dropdown. */
#wrapper .fusion-main-menu li.has-submenu[data-open="true"] > .sub-menu,
#wrapper li.has-submenu[data-open="true"] > .sub-menu,
.fusion-main-menu li.has-submenu[data-open="true"] > .sub-menu,
li.has-submenu[data-open="true"] > .sub-menu {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 9999 !important;
    min-width: 100% !important;
    max-width: 280px !important;
    width: max-content !important;
    height: auto !important; /* FIX: Override Avada's height:0 */
    max-height: none !important;
    overflow: visible !important; /* FIX: Prevent internal clipping */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    background: #fff !important;
}

/* FIX: Prevent parent header wrappers from clipping absolute submenus */
.fusion-header,
.fusion-header-wrapper,
.fusion-secondary-header,
.fusion-main-menu,
.fusion-main-menu ul {
    overflow: visible !important;
}

/* 3. Submenu item sizing — hover highlight matches panel width exactly.   */
.sub-menu li {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

.sub-menu li > a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── Badge styles ───────────────────────────────────────────────────────── */
.nav-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
}

.nav-badge--new     { background-color: #1a7a3c; color: #ffffff; }
.nav-badge--hot     { background-color: #c0392b; color: #ffffff; }
.nav-badge--updated { background-color: #1a5276; color: #ffffff; }

/* Ensure the field container can stack the injected error message */
.fusion-search-field {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Style for the dynamically injected error message */
.fusion-search-error-msg {
  color: #c02b0a; /* High contrast error red */
  font-size: 12px;
  margin-top: 0px;
  font-weight: 500;
  line-height: 1.4;
  /* Ensure it doesn't overlap on small screens */
  width: 100%;
  order: 3; /* Places it after the label/input */
}

/* Visual state for the input */
input[name="s"].s[aria-invalid="true"] {
  border-color: #c02b0a;
}

/* Maintain button styling while disabled */
.fusion-search-submit[disabled],
.fusion-search-submit[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none; /* Prevents clicks if JS hasn't fully loaded */
}

/* Target the active menu link based on the aria-current attribute */
.awb-menu__main-a[aria-current="page"] .menu-text {
    color: #1a5276; /* Deep blue for high contrast */
}

/* If you want to change the background of the active link instead */
.awb-menu__main-a[aria-current="page"] {
    background-color: #fdf2ee; /* Very light cream to lift it off the page */
}

/* --- 1. SHARED BASE STYLES --- */
/* Targets the UL inside any ListReflow container */
[class*="ListReflow-"] ul, 
[class*="ListReflow-"] .fusion-column-wrapper ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style-type: none !important;
    width: 100% !important;
}

/* Ensure list items don't split awkwardly in text-flow mode */
[class*="ListReflow-"] ul li {
    break-inside: avoid;
    display: block;
    margin-bottom: 15px;
}

/* --- 2. TWO COLUMN CONFIG (.ListReflow-2) --- */
/* Grid Mode */
.ListReflow-2 ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}
.ListReflow-2 ul li {
    flex: 0 1 calc(50% - 20px) !important;
}

/* Text Flow Mode (Vertical flow) */
.ListReflow-2.text-flow ul {
    display: block !important;
    column-count: 2 !important;
    column-gap: 40px !important;
}

/* --- 3. THREE COLUMN CONFIG (.ListReflow-3) --- */
/* Grid Mode */
.ListReflow-3 ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}
.ListReflow-3 ul li {
    flex: 0 1 calc(33.33% - 20px) !important;
}

/* Text Flow Mode (Vertical flow) */
.ListReflow-3.text-flow ul {
    display: block !important;
    column-count: 3 !important;
    column-gap: 30px !important;
}

/* --- 4. IMAGE & ALIGNMENT FIXES --- */
[class*="ListReflow-"] .fusion-image-element,
[class*="ListReflow-"] img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-bottom: 10px !important;
}

[class*="ListReflow-"] ul li {
    text-align: center;
    align-items: center;
}

/* --- 5. RESPONSIVE (Mobile/Tablet) --- */

/* Tablets (Max 1024px) */
@media (max-width: 1024px) {
    .ListReflow-3 ul li {
        flex: 0 1 calc(50% - 20px) !important; /* Drops 3-col to 2-col */
    }
    .ListReflow-3.text-flow ul {
        column-count: 2 !important; /* Drops 3-flow to 2-flow */
    }
}

/* Phones (Max 768px) */
@media (max-width: 768px) {
    [class*="ListReflow-"] ul {
        display: block !important; /* Kill flex for stacking */
        column-count: 1 !important; /* Kill columns for stacking */
    }
    [class*="ListReflow-"] ul li {
        flex: 0 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/*Messagebee Form*/
#message-bee-form input {
  color: black;
}

/* Optional: If you want to ensure the placeholder text also 
   looks darker or specifically black when typing */
#message-bee-form .mb-form-input {
  color: #000000;
}

/* Ensure the new hidden span behaves like the original icon */
.fusion-social-networks-wrapper a span[aria-hidden="true"] {
    display: inline-block;
    font-family: inherit; /* Keeps the icon font active */
    vertical-align: middle;
}

/* 1. Hide the theme's default CSS bullet */
#menu-footer li::before {
    content: none !important;
}

/* 2. Style your new accessible bullet */
.footer-bullet {
    display: inline-block;
    margin-right: 10px;
    color: inherit; /* Keeps it the same color as the link */
    font-weight: bold;
    text-decoration: none !important; /* Prevents underline on the > symbol */
}

/* 3. Remove default list styling just in case */
#menu-footer {
    list-style: none;
    padding-left: 0;
}

/* See more icon in header: Three horizontal lines */
/* Standard Header and Sticky/Secondary Menu Icons */
#wrapper header .fusion-secondary-header .fusion-mobile-nav-holder button > div::before,
#wrapper header .fusion-sticky-header-wrapper .fusion-secondary-main-menu nav button > div::before {
    color: #595959 !important;
}

.textFlow {
  min-width: 200px;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Newletter form contrast changes*/
/* Fallback CSS if the script styles don't apply to the placeholder */
#message-bee-form input::placeholder {
    color: #636363 !important;
    opacity: 1 !important;
}

/* Update 404 text color */
.fusion-error-page-404 .error-message, .fusion-error-page-oops .oops {
    color: #000000;
}

#search-3 > h2 {
    color: #000000;
}

/* Search Field Contrast Settings */
#catsearch #searchterm {
    color: #000000 !important;
}

/* If you use a placeholder later, this targets it as well */
#catsearch #searchterm::placeholder {
    color: #000000 !important;
    opacity: 1;
}

.fusion-search-form .fusion-search-field input[type="search"].s {
    color: #000000 !important;
    border: 1px solid #000000;
}

.fusion-search-form .fusion-search-field input[type="search"].s::placeholder {
    color: #000000 !important;
    opacity: 1;
}

#lcs_slide_out-27879 {
    position: fixed;
    top: 250px;
}

/* Catalog search */
#catsearch label {
	font: 20px/22px 'MuseoSlab500Regular',arial,helvetica,sans-serif;
}

#searchbutton {
    color: white;
    border: none;
	background-color: #CD7012;
    background: -moz-linear-gradient(
		center top,
		#f47b3d,
		#f47b3d
	);
	padding: 2px 0;
	margin: 1px 0 0 0;
	height: 32px;
	width: 40px;
	font-size: 16px;
}

#catsearch input[type=text] {
	height: 34px;
	font-size: 20px;
	line-height: 22px;
	margin: 0;
	padding: 2px;
	border: 1px solid #000000;
	width: auto !important;
}

#catsearch input[type=text]:focus {
	border: 1px solid #000000;
}

@media only screen and (max-width: 800px) {
  .header-v4 #catsearch { float: none !important; text-align: center; }
}

/* Catalog search */
.header-v4 #header{padding:25px 0px;}

.header-v4 #header .search { margin-top: 25px !important; }
.header-v4 #header .tagline { margin-top: 25px !important; }
.header-v4 #catsearch { position:relative;  float:right; }
.header-v4 #catsearch { font-family: arial, helvetica, sans-serif !important; color: #000000; font-weight: bold }
.header-v4 #catsearch { font-size: 20px !important;
line-height: 22px !important; }

.post-content h4, .project-content .project-info h4, .share-box h4, .title h4, 

/* Tab sizing and color */
body #main #tabs-1 .tab-hold .tabs li a {
font-size: 18px !important; 
}
 .fusion-tabs.fusion-tabs-1 .nav-tabs li a {
color: #333333 !important; font-weight:bold !important;
}	

/* Accordian Title  bar */

h4.toggle a {
font-size: 18px!important;
}

/* Title color bar */
.title-sep{
display: block solid;
background-color:#0799b3;
border-top:2px solid #0799b3 !important;
border-bottom:2px solid #0799b3 !important;
width:100%;
position:relative;
height:1px;
}

/* footer menu size */
.footer-area ul {
font-size: 16px
}
/* footer title size */
#wrapper .footer-area .col h3 {
font-family: arial, helvetica, sans-serif !important;
font-size: 18px !important;
font-weight: bold !important;
}
/* Tagline box spacing */
.fusion-reading-box-container {
margin-bottom: 15px !important;
}

/* Page title spacing */	
#main { padding-top: 20px !important; }

/* Page title custom logo size */
.fusion-logo img {
    width: 300px;
}

a:hover {color:#036272; }

.content-container a {
text-decoration: underline;
}

p a {
text-decoration: underline;
}

.fusion-alert-content a {
    text-decoration: underline;
    color: #2B64A1;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Don't Show the Comments Count */
.fusion-comments {
    display: none;
}

/* Don't Show the Separator for the Comment Count */
.fusion-inline-sep:nth-child(7) {
    display: none;
}

.feedzy-rss .rss_item {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-bottom: 0 !important;
}

.feedzy-style1 .rss_content_wrap {
    margin-top: 0px !important;
    margin-bottom: 0px !important;   
}

.feedzy-style1 li {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.feedzy-rss .rss_item .title {
                font-weight: normal !important;
                font-size: 18px !important;
}

.fusion-recent-posts {
    margin-bottom:0px !important;
}

.fusion-date-box {
    color: #000000 !important;
}

/* Scaling the obr iframe window */
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 100%; /* 1:1 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}