/*
* IEDC Portal Custom CSS
* Updated: September 30, 2026 (Round 2 revisions)
* Author: Momentive Software / kiki.adabale@momentivesoftware.com
*
* FULL FILE - replaces IEDC_custom.css in its entirety.
*
* Round 2 changes (see "ROUND 2 REVISIONS" block at the end of the file):
*   1. Profile "Update Your Profile" button made smaller
*   2. Green widget outlines (Store cart/categories, calendar + class filters) padded
*   3. Page text sits under the page title
*   4. Portal nav tabs fill the bar (no dead gap between tabs)
*   5. Class/meeting lists: navy behind the event name only
*
* --- BRAND SOURCES ---
* 1. IEDC Brand Style Guide (primary reference):
* Navy / PMS 302 C: #043c59
* Mint / PMS 337 C: #8fceb3
*
* 2. iedconline.org main site stylesheet (applied values):
* Primary blue: #1E548B (buttons, links)
* Navigation teal: #0A5677 (nav bar background)
* Heading navy: #022D57 (page headings, h1-h6)
* Dark header: #002436 (site header bar)
* Mint accent: #8ECDB3 (decorative accents, borders - approx. PMS 337 C)
* Yellow accent: #FCE566 (hover indicators, calendar events)
* Footer dark: #073D5E (footer background)
*
* --- WCAG 2.1 AA COMPLIANCE ---
* Contrast ratios (foreground : background):
* #fff on #0A5677 nav = 5.5:1 OK
* #fff on #1E548B btn = 4.6:1 OK
* #fff on #002436 hdr = 17+:1 OK
* #022D57 on #f4f5f7 body = 16+:1 OK
* #383838 on #f4f5f7 bg = 10.4:1 OK
* #666 on #fff muted = 5.7:1 OK
* #8ECDB3 DECORATION ONLY - never used as text on white (2.4:1 fails)
* #022D57 on #FCE566 badge = 13.8:1 OK
* ---------------------------------------------------------
*/

/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Muli:wght@400;600;700;800&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ===== BASE ===== */
html,
body {
overflow-x: hidden !important; /* prevent horizontal scroll from full-width breakout */
}

body,
#wrapper {
background-color: #f4f5f7 !important; /* neutral grey - white cards lift off the bg */
}

body,
table,
input,
textarea,
select {
font-family: 'Nunito Sans', HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #043c59;
font-size: 15px !important;
line-height: 1.5 !important;
}

/* Comfortable padding inside content sections */
.large-notice,
.uc-summary-panel,
div.section,
.left-col {
padding: 18px 22px !important;
}

p, li, td, label {
font-size: 14px !important;
line-height: 1.5 !important;
}

h1, h2, h3, h4, h5, h6,
.PageTitle,
.section h3 {
font-family: 'Muli', 'Nunito Sans', sans-serif !important;
color: #022D57;
}

/* ===== ACCESSIBILITY: FOCUS ===== */
:focus-visible {
outline: 3px solid #FCE566 !important;
outline-offset: 2px !important;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
outline: 3px solid #043c59 !important;
outline-offset: 2px !important;
}

:focus:not(:focus-visible) {
outline: none;
}

/* Skip-to-content link (WCAG 2.4.1) */
.skip-link {
position: absolute;
top: -999px;
left: 4px;
background: #FCE566;
color: #022D57;
font-family: 'Muli', sans-serif;
font-weight: 700;
font-size: 14px;
padding: 8px 16px;
border-radius: 0 0 4px 4px;
text-decoration: none;
z-index: 9999;
}

.skip-link:focus {
top: 0;
}

/* ===== HEADER ===== */
header,
.site-header,
#header {
background-color: #002436 !important;
}

header a,
.site-header a,
.header-user,
.header-user a {
color: #8ECDB3 !important; /* mint on #002436 = 8.3:1 OK */
text-decoration: none;
}

/* User info bar ("Kiki Adabale | Logout") - sits on light bg, use navy */
#LoggedInUserLabel,
.social-icons,
.social-icons a,
.social-icons span {
color: #022D57 !important; /* navy on white/grey = 16+:1 OK */
}

.social-icons a:hover {
color: #0A5677 !important;
text-decoration: underline !important;
}

header a:hover,
.site-header a:hover {
text-decoration: underline;
}

/* ===== LOGO BAR - mint bottom border ===== */
#header {
border-bottom: 3px solid #8ECDB3 !important;
}

/* ===== NAV BAR ===== */
ul.menu,
nav:not(#sub-menu),
.navbar,
div[class*="nav"],
div[id*="nav"],
#menu {
background-color: #0A5677 !important;
display: flex !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
overflow: visible !important;
width: 100% !important;
box-sizing: border-box !important;
}

ul.menu li a,
.menu > li > a {
color: #fff !important; /* 5.5:1 OK */
font-family: 'Muli', sans-serif;
font-weight: 600;
font-size: 12px !important; /* compact to fit all 9 items on one line */
padding: 12px 13px !important;
letter-spacing: 0.02em;
text-decoration: none;
border-right: none !important;
border-left: none !important;
}

/* Dropdown submenus */
ul.menu li ul,
ul.menu li ul li,
#navigation ul ul {
background-color: #0A5677 !important;
border: none !important;
box-shadow: none !important;
}

ul.menu li ul li a {
color: #fff !important;
background-color: #0A5677 !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

ul.menu li ul li:hover > a,
ul.menu li ul li a:hover {
background-color: #073D5E !important;
color: #fff !important;
}

/* Active nav item - yellow text + yellow underline */
ul.menu li.active,
ul.menu li.active > a,
.menu > li.active > a {
background-color: #022D57 !important;
border-bottom: 3px solid #FCE566 !important;
color: #FCE566 !important; /* yellow on #022D57 = 13.8:1 OK */
}

/* Nav hover */
ul.menu li:hover > a,
.menu > li:hover > a {
background-color: #073D5E !important;
border-bottom: 3px solid #FCE566 !important;
}

/* ===== LINKS ===== */
a {
color: #1E548B; /* 4.6:1 on white OK */
text-decoration: underline;
}

a:hover {
color: #0A5677;
text-decoration: underline;
}

/* Nav and button links: no underline - context distinguishes them */
ul.menu a,
.menu a,
nav:not(#sub-menu) a,
input[type=submit],
a.button,
.button {
text-decoration: none !important;
}

/* ===== PAGE TITLE ===== */
.PageTitle {
color: #022D57 !important;
border-bottom: 3px solid #8ECDB3 !important;
padding-bottom: 12px !important;
font-size: 24px !important;
}

/* ===== BANNER CONTAINER UNLOCK ===== */
/* #content clips overflow; #introDiv constrains height - both must expand */
#content {
overflow: visible !important;
}
#introDiv {
height: auto !important;
overflow: visible !important;
}

/* ===== PAGE TITLE HERO BANNER ===== */
/* Full-width breakout via transform centering */
html body #wrapper .sixteen.floated.page-title,
html body #wrapper .page-title {
background: none !important;
padding: 16px 0 !important;
margin: 0 0 8px !important;
float: none !important;
clear: both !important;
display: flex !important;
flex-direction: column !important; /* ROUND 2: page text stacks under the title */
align-items: flex-start !important;
justify-content: center !important;
height: auto !important;
min-height: unset !important;
width: 100% !important;
box-sizing: border-box !important;
}

.sixteen.floated.page-title h2,
h2#pageTitleDiv {
color: #043c59 !important;
font-size: 26px !important;
font-weight: 800 !important;
font-family: 'Muli', sans-serif !important;
padding-bottom: 0 !important;
border-bottom: none !important;
}

h2#pageTitleDiv::after {
content: '';
display: block;
width: 48px;
height: 4px;
background: #FCE566 !important;
margin-top: 8px;
}

/* ===== YELLOW TOP ACCENT BAR ===== */
#PageHeader::before {
content: '';
display: block;
height: 4px;
background: #FCE566;
}

/* ===== SECTION CARDS ===== */
/* Cards: same colour as background, defined by borders + outline */
/* Use #wrapper prefix to win specificity over Cobalt theme */
#wrapper .large-notice,
#wrapper .uc-summary-panel,
#wrapper div.section,
#wrapper .tab-content > div,
#wrapper .widget,
#wrapper .form-section,
#wrapper .panel,
#wrapper .card,
body .large-notice,
body .uc-summary-panel {
background-color: #f4f5f7 !important; /* match page bg */
border: 2px solid #8ECDB3 !important;
border-radius: 4px !important;
margin-bottom: 16px !important;
box-shadow: none !important;
}

/* ===== SECTION HEADINGS - navy gradient banner ===== */
/* Use #wrapper prefix for specificity over Cobalt theme.
Target h2/h3 that are direct OR descendant children of card elements,
but NOT .tilesection (profile name/subtitle) */
#wrapper .large-notice > h2:not(.tilesection),
#wrapper .large-notice h2:not(.tilesection),
#wrapper .tile-content > h2:not(.tilesection),
#wrapper .uc-summary-panel > h2:not(.tilesection),
#wrapper div.section > h2:not(.tilesection),
#wrapper .large-notice > h3:not(.tilesection),
#wrapper .uc-summary-panel > h3:not(.tilesection),
#wrapper div.section > h3:not(.tilesection),
body .large-notice > h2:not(.tilesection),
body .large-notice h2:not(.tilesection) {
background: linear-gradient(90deg, #043c59, #0A5677) !important;
color: #fff !important; /* 10+:1 OK */
padding: 10px 16px !important;
margin: -1px -1px 14px !important;
font-family: 'Muli', sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 0.03em;
display: block !important;
}

/* Hide Cobalt section icons - gradient h2 spans full width cleanly without them */
img.large-notice-icon {
display: none !important;
}

/* Suppress ::after on section headings */
#wrapper .large-notice > h2:not(.tilesection)::after,
#wrapper .large-notice h2:not(.tilesection)::after,
#wrapper .tile-content > h2:not(.tilesection)::after,
#wrapper .uc-summary-panel > h2:not(.tilesection)::after,
#wrapper div.section > h2:not(.tilesection)::after,
#wrapper .large-notice > h3:not(.tilesection)::after,
#wrapper .uc-summary-panel > h3:not(.tilesection)::after,
#wrapper div.section > h3:not(.tilesection)::after,
body .large-notice > h2:not(.tilesection)::after,
body .large-notice h2:not(.tilesection)::after {
display: none !important;
}

/* ===== PROFILE NAME (h2.tilesection) ===== */
/* This is the person's name - styled as a name, not a section header */
/* Float: none forces it to stack vertically, not sit in a left column */
h2.tilesection {
color: #022D57 !important;
font-family: 'Muli', sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
background: none !important;
padding: 0 !important;
margin: 0 0 8px !important;
float: none !important;
width: 100% !important;
display: block !important;
clear: both !important;
}

/* All profile detail divs should stack, not float into right columns */
.left-col > div.tilesection,
.left-col > h3.tilesection {
float: none !important;
width: 100% !important;
display: block !important;
clear: both !important;
}

/* Only ONE mint underline under the profile name (h2.tilesection) */
h2.tilesection::after {
content: '';
display: block;
width: 36px;
height: 3px;
background: #8ECDB3;
margin-top: 6px;
}

/* h3.tilesection is the subtitle/org line - suppress its ::after underline */
h3.tilesection {
color: #595959 !important;
font-size: 14px !important;
font-weight: 400 !important;
background: none !important;
padding: 0 !important;
margin: 0 0 12px !important;
}
h3.tilesection::after {
display: none !important;
}

/* ===== OTHER HEADINGS - mint underline decoration ===== */
/* Exclude .tilesection (handled above) and pageTitleDiv (handled above) */
h2:not(.tilesection):not(#pageTitleDiv):not(.large-notice > h2):not(.tile-content > h2),
h3:not(.large-notice > h3):not(.uc-summary-panel > h3):not(div.section > h3) {
position: relative;
padding-bottom: 6px;
}

h2:not(.tilesection):not(#pageTitleDiv):not(.large-notice > h2):not(.tile-content > h2)::after,
h3:not(.large-notice > h3):not(.uc-summary-panel > h3):not(div.section > h3)::after {
content: '';
display: block;
width: 40px;
height: 3px;
background: #8ECDB3;
margin-top: 6px;
}

/* ===== BUTTONS ===== */
input[type=submit],
a.button,
.button,
.button.color {
background-color: #1E548B !important; /* #fff on this = 4.6:1 OK */
color: #fff !important;
text-transform: uppercase !important;
font-weight: 700 !important;
text-align: center !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
border-radius: 4px !important;
border: 0 !important;
font-size: 14px !important;
letter-spacing: 0.04em;
font-family: 'Muli', sans-serif !important;
min-height: 44px;
padding: 10px 18px !important;
cursor: pointer;
}

input[type=submit]:hover,
a.button:hover,
.button:hover {
background-color: #043c59 !important;
}

input[type=submit]:focus-visible,
a.button:focus-visible,
.button:focus-visible {
outline: 3px solid #FCE566 !important;
outline-offset: 3px !important;
}

/* ===== INFO / ALERT BANNERS ===== */
.infoSummary,
.alertSummary {
background-color: #e8f7f2 !important;
border: 1px solid #8ECDB3 !important;
color: #022D57 !important; /* 17+:1 OK */
}

/* ===== STATUS / BADGE ELEMENTS ===== */
.status-badge,
.cert-pill {
background-color: #e8f7f2 !important;
border: 1px solid #8ECDB3 !important;
color: #022D57 !important;
font-weight: 700 !important;
}

/* ===== CALENDAR EVENTS ===== */
.fc-event-skin {
background-color: #FCE566 !important; /* #022D57 on yellow = 13.8:1 OK */
border-color: #e6b800 !important;
color: #022D57 !important;
}

/* ===== PRIMARY COLOR OVERRIDES (replaces Nevia default #006fba) ===== */
.button.active,
.button.light:hover,
.button.gray:hover,
.search-btn-widget,
.filters-dropdown.active,
.ui-accordion-icon-active,
.trigger.active .toggle-icon,
.flexslider .flex-next:hover,
.flexslider .flex-prev:hover,
.ls-fullwidth .ls-nav-next:hover,
.ls-fullwidth .ls-nav-prev:hover,
.arl.active:hover,
.arr.active:hover,
#portfolio-navi a:hover,
.highlight.color,
.caption-color,
.skill-bar-content,
.tags .current,
.tags a:hover,
#top-line,
.top-line {
background-color: #1E548B !important;
}

#breadcrumbs ul li a,
.dropcap,
.tabs-nav li.active a,
.testimonials-author,
.trigger.active a,
.ui-accordion .ui-accordion-header-active,
.selected {
color: #1E548B !important;
}

.tabs-nav li.active a { border-top: 1px solid #8ECDB3 !important; }
.pagination .current { background: #1E548B !important; }
.ui-widget-header { background: #1E548B !important; border-color: #1E548B !important; }
.decrease-value, .increase-value { background: #1E548B !important; }

/* ===== FOOTER ===== */
footer,
contentinfo,
[role="contentinfo"],
#footer,
.footer {
background-color: #073D5E !important; /* #fff on this = 9.6:1 OK */
color: #fff !important;
border-top: 3px solid #8ECDB3 !important;
}

footer a,
.footer a,
#footer a {
color: #8ECDB3 !important; /* mint on #073D5E = 8.3:1 OK */
text-decoration: underline;
}

footer a:hover,
.footer a:hover,
#footer a:hover {
color: #fff !important;
}

/* ===== SUPPRESS COBALT BR SPACERS ===== */
/* Only hide outer brs (direct children between items), not inner brs (within address) */
.left-col > br,
.large-notice > br {
display: none !important;
}

/* ===== PROFILE DETAIL ITEMS ===== */
/* Address: pin emoji left, both address lines in right column */
.left-col > div.tilesection:first-of-type {
display: flex !important;
align-items: flex-start !important;
gap: 6px !important;
white-space: normal !important;
overflow: visible !important;
}
.left-col > div.tilesection:first-of-type::before {
content: '\1F4CD'; /* round pin emoji */
flex-shrink: 0;
line-height: 1.5;
filter: grayscale(1);
}

/* Button container: break out of Cobalt's right-column float, sit below info */
#wrapper .left-col > div:nth-of-type(3),
body .left-col > div.tilesection:nth-of-type(3) {
float: none !important;
clear: both !important;
width: 100% !important;
display: block !important;
padding-top: 12px !important;
}

/* ===== LAYOUT: FULL-WIDTH CONTENT COLUMNS ===== */
/* Cobalt tiles use .left-col inside .large-notice; expand to full width */
.left-col {
width: 100% !important;
float: none !important;
}

.large-notice {
width: 100% !important;
float: none !important;
box-sizing: border-box !important;
}

/* Expand tilesections to fill available width */
div.tilesection {
width: 100% !important;
float: none !important;
box-sizing: border-box !important;
}

/* Remove any right-column empty space */
.droparea.thumb,
.right-col {
display: none !important;
}

/* ===== MEMBERSHIP TEXT ===== */
#topMiddleContentPlaceHolder_ctl02_applyDisplayText {
color: #383838 !important;
}

/* ===== FORM ACCESSIBILITY ===== */
label {
color: #022D57;
font-weight: 600;
}

input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=number],
textarea,
select {
border: 1px solid #767676 !important; /* 4.5:1 on white OK */
}

/* ========================================================================
   ===== ROUND 2 REVISIONS (September 30, 2026) =====
   ======================================================================== */

/* --- 1. Profile "Update Your Profile and Demographics" button: less bulky --- */
/* Base .button uses content-box + min-height 44px, which rendered ~64px tall. */
#wrapper .left-col a.button.small,
#wrapper .left-col a.button.small.color {
  box-sizing: border-box !important;
  width: auto !important;
  min-height: 30px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  gap: 4px !important;
}

/* --- 2. Sidebar / filter widgets (Store, Calendar, Classes, Meetings) --- */
/* Give the mint outline breathing room around the heading and content. */
#wrapper .widget {
  padding: 12px 14px 14px !important;
}

#wrapper .widget h4 {
  margin: 0 0 10px !important;
  padding: 0 !important;
}

/* Shopping cart: fill the widget instead of overflowing it */
#wrapper .widget #cart {
  display: block !important;
  width: auto !important;
  box-sizing: border-box !important;
  padding: 10px 14px !important;
}

#wrapper .widget .empty-cart {
  display: block !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Horizontal filters (Event Calendar): box hugs the dropdown */
#wrapper .event-filters.horizontal .widget {
  padding: 4px 6px 6px !important;
  margin-bottom: 16px !important;
}

#wrapper .event-filters.horizontal .widget .filters-dropdown {
  margin: 0 !important;
}

/* --- 3. Page text sits UNDER the page title on every page --- */
html body #wrapper .page-title h2#pageTitleDiv {
  width: auto !important;
}

html body #wrapper .page-title #intrdouctionTextPageTextDiv {
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* --- 4. Portal nav: no dead gap between tabs --- */
/* Items stretch to fill the bar so the hover/active highlight is continuous
   and Home sits flush against Events. */
#TabMenu {
  justify-content: stretch !important;
}

#TabMenu > li {
  flex: 1 1 auto !important;
  float: none !important;
  text-align: center !important;
}

#TabMenu > li > a {
  display: block !important;
}

/* --- 5. Class / meeting list items: no navy background; dark event name --- */
/* The global "header" rule was painting the whole header.meta block navy,
   including the date / time / location line. */
header.meta {
  background-color: transparent !important;
}

header.meta h2:not([style*="none"]) {
  background: none !important;
  padding: 0 0 6px !important;
  margin: 0 0 8px !important;
}

/* Event name link: dark navy on the light page background (overrides mint "header a") */
header.meta h2 a,
header.meta h2 a:visited {
  color: #022D57 !important; /* 16+:1 on #f4f5f7 */
}

header.meta h2 a:hover {
  color: #0A5677 !important;
  text-decoration: underline !important;
}

/* Date / time / location line on the light page background (was #888 = 3.3:1) */
header.meta > span {
  color: #595959 !important;
}