/* ==========================================================================
   Syntax Highlighting for Code Block (<pre class="language-markup">) -- wkim, 9/15/2026
   Full Light/Dark Theme Switch Support (JA Purity IV / T4 Framework)
   ========================================================================== */

/* 1. Light Theme Default Styling */
pre.language-markup,
pre[class*="language-"] {
    background-color: #f6f8fa !important;
    border: 1px solid #d0d7de !important;
    border-radius: 6px !important;
    padding: 16px !important;
    margin: 1.5em 0 !important;
    overflow-x: auto !important;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #24292f !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

pre.language-markup code,
pre[class*="language-"] code {
    font-family: inherit !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    color: inherit !important;
    white-space: pre !important;
    word-break: normal !important;
    word-wrap: normal !important;
}

/* 2. Dark Theme Dynamic Override (Triggers on body.dark-active / data-theme="dark") */
body.dark-active pre.language-markup,
body.dark-active pre[class*="language-"],
.color-dark-active pre.language-markup,
.color-dark-active pre[class*="language-"],
[data-theme="dark"] pre.language-markup,
[data-theme="dark"] pre[class*="language-"] {
    background-color: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #d4d4d4 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-active pre.language-markup code,
body.dark-active pre[class*="language-"] code,
.color-dark-active pre.language-markup code,
.color-dark-active pre[class*="language-"] code,
[data-theme="dark"] pre.language-markup code,
[data-theme="dark"] pre[class*="language-"] code {
    color: #d4d4d4 !important;
}

/* ==========================================================================
   Dark Background & Light Base Text Override for High Contrast -- wkim, 7/8/2026
   ========================================================================== */

/* Set dark background and default light text color for overall readability */
pre[class*="language-"],
pre[class*="language-"] code,
pre code {
  background-color: #1d1f21 !important; /* Dark background */
  color: #c5c8c6 !important;            /* Light gray text for unhighlighted code */
  border: 1px solid #333333 !important;  /* Subtle border line */
  border-radius: 6px !important;       /* Smooth rounded corners */
}


/* ==========================================================================
   Sticky Header -- wkim, 7/8/2026
   ========================================================================== */
#t4-header { 
  position: sticky; 
  top: 0; 
  z-index: 1000; 
}

/* ==========================================================================
   Sticky Header - Solid Opacity Background (Dynamic Theme Sync) -- wkim, 7/8/2026
   ========================================================================== */
#t4-header,
.t4-header-wrap,
#t4-header .navbar {
  /* Utilizing T4's native background RGB variable at 85% opacity to block scrolling text */
  background-color: rgba(var(--t4-body-bg-rgb), 0.85) !important;
  background: rgba(var(--t4-body-bg-rgb), 0.85) !important;
}

/* Prevent topbar container from expanding or clipping the menu */
.topbar-r,
.topbar-r .t4-module,
.topbar-r .navbar,
.topbar-r .navbar-nav {
    overflow: visible !important;
    position: relative !important;
}
/* Fixed layout interference by making topbar-r .nav-item specific -- wkim, 7/12/2026 */
.topbar-r .nav-item {
    position: relative !important;
    overflow: visible !important;
}

/* ==========================================================================
   Prevent topbar from pushing down and float completely on top -- wkim, 7/11/2026
   ========================================================================== */
#t4-topbar ul.dropdown-menu {
    position: absolute !important; /* Floating context over content; prevents topbar from pushing down */
    top: 100% !important;          /* Position perfectly right below 'My Account' text */
    z-index: 999999 !important;   /* Force menu box to render on the absolute topmost layer */
}

/* ==========================================================================
   Fix narrow screen left-side clipping issue -- wkim, 7/11/2026
   ========================================================================== */
#t4-topbar ul.dropdown-menu,
#t4-topbar ul.dropdown-menu[data-bs-popper="static"] {
    left: 0px !important;          /* Align menu's left edge with 'My Account' text left edge */
    right: auto !important;        /* Release right-side constraints to let it expand inward */
}

/* ==========================================================================
   Neutralize Bootstrap dynamic script offsets -- wkim, 7/11/2026
   ========================================================================== */
#t4-topbar ul.dropdown-menu.show {
    transform: none !important;   /* Clear JavaScript transform overrides that cause shifting */
}

/* ==========================================================================
   Fix dropdown menu visibility and text contrast in Dark Theme -- wkim, 7/12/2026
   ========================================================================== */
/* Apply clear dark background and high-contrast borders when dark-active is on the body */
body.dark-active #t4-topbar ul.dropdown-menu {
    background-color: #212529 !important; /* Premium dark background */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
}

/* Force all text span, link elements inside the dropdown to turn pure crisp white */
body.dark-active #t4-topbar ul.dropdown-menu a,
body.dark-active #t4-topbar ul.dropdown-menu .dropdown-item,
body.dark-active #t4-topbar ul.dropdown-menu .menu-item-title,
body.dark-active #t4-topbar ul.dropdown-menu span {
    color: #ffffff !important;             /* Guaranteed pure white text visibility */
}

/* Ensure dynamic link hover highlights react perfectly under dark mode */
body.dark-active #t4-topbar ul.dropdown-menu a:hover,
body.dark-active #t4-topbar ul.dropdown-menu .dropdown-item:hover,
body.dark-active #t4-topbar ul.dropdown-menu a:hover .menu-item-title {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important; /* Visible item selection overlay */
}

/* ==========================================================================
   Fix "My Account" trigger button text color when opened in Dark Theme -- wkim, 7/12/2026
   ========================================================================== */
/* Keep "My Account" text white even when clicked/focused/opened in dark mode */
body.dark-active #t4-topbar a.dropdown-toggle,
body.dark-active #t4-topbar a.dropdown-toggle.show,
body.dark-active #t4-topbar a.dropdown-toggle:focus,
body.dark-active #t4-topbar a.dropdown-toggle:active {
    color: #ffffff !important;
}

/* ==========================================================================
   Rearrange mobile header layout: [Off-Canvas] [Logo] [Blank Space] [Dropdown] -- wkim, 7/12/2026
   ========================================================================== */
@media (max-width: 991px) {
    /* Set header wrapper to absolute/relative context to override framework rows */
    .t4-header .navbar {
        position: relative !important;
        display: block !important;
        min-height: 60px !important;
    }

    /* 1. Off-canvas button: Lock tightly to the far left margin */
    .t4-offcanvas-toggle {
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 10 !important;
    }

    /* 2. Logo: Position cleanly right next to the Off-canvas button */
    .navbar-brand {
        position: absolute !important;
        left: 60px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 10 !important;
    }

    /* 3. Dropdown hamburger button: Lock tightly to the far right margin */
    .navbar-toggler {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 10 !important;
    }

    /* 4. Fix dropdown clipping: Floating right-aligned layout with clean side margins */
    .t4-header .navbar-collapse {
        position: absolute !important;          /* Keeps elements scrolling together in a single natural flow */
        
        /* --- THE MASTER CALC FORMULA FOR RIGHT ALIGNMENT & 1:1 SPEED --- */
        /* Formula: Start at viewport end (100vw), push left by box width + margin (315px),  */
        /* and subtract the parent's scale factor (100%) to fully cancel the 2x speed bug.   */
        left: calc(50vw - 100% - 300px) !important; 
        right: auto !important;                 /* Safely release right constraints */
        transform: none !important;             /* Clear center translation to prevent drift */
        /* ----------------------------------------------------------------- */
        
        width: 300px !important;                /* Sets clean fixed width */
        max-width: calc(100vw - 30px) !important; /* Prevents overflow on extremely small screens */
        top: 100% !important;                   /* Anchors cleanly to the active dynamic bottom edge of the header */
        z-index: 99999 !important;
        background-color: rgba(var(--t4-body-bg-rgb), 1) !important; /* Solid backdrop sync */
        padding-left: 20px !important;          
        padding-right: 20px !important;
        border-radius: 8px !important;          /* Softens corners to look elegant with margins */
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) !important; 

	/* --- EXPAND DROP-DOWN BOX HEIGHT & ENABLE SMOOTH MOBILE SCROLLING --- */
        max-height: calc(80vh - 80px) !important; /* Expands height dynamically up to 80% of the viewport height */
        overflow-y: auto !important;              /* Allows vertical scrolling if menu items exceed the max height */
        -webkit-overflow-scrolling: touch;        /* Provides momentum scrolling on iOS devices */
    }
}

/* ==========================================================================
   Enhance visibility of contact form checkbox -- wkim, 7/12/2026
   ========================================================================== */
input[type="checkbox"] {
    -webkit-appearance: checkbox; /* Enforce browser default rendering */
    appearance: checkbox;
    width: 18px;                  /* Enlarge size */
    height: 18px;
    border: 2px solid #555555 !important; /* Darken border color */
    cursor: pointer;
}

/* ==========================================================================
   Smart Search Dynamic Inside-Lens Rectangular Style -- wkim, 7/14/2026
   ========================================================================== */

/* 1. Base Container Setup: Floating absolute layout preventing row breaks */
.t4-module .search-smart,
#t4-header .search-smart,
#t4-header .mod-finder {
    display: flex !important;
    align-items: center !important;
    position: absolute !important;
    margin: 0 !important;
    overflow: visible !important;
    width: 36px !important;
    height: 36px !important;
    right: 0px !important;           /* Keeps the master container right where it is */
    top: 60% !important;             /* Maintained baseline alignment */
    transform: translateY(-50%) !important;
    z-index: 9999 !important;
}

/* 2. Slide Input Styling: Completely flat crisp rectangle with zero idle backdrops */
#t4-header .search-smart input,
#t4-header .mod-finder input,
#t4-header input.search-query,
#t4-header .form-control {
    position: absolute !important;
    right: 0px !important;           /* Baseline start placement for the initial toggle view */
    top: 50% !important;            
    transform: translateY(-50%) !important;
    display: inline-block !important;
    width: 36px !important;          
    height: 34px !important;        
    padding: 0 !important;
    border-radius: 4px !important;  
    background-color: transparent !important; 
    border: 1px solid transparent !important; 
    color: transparent !important;
    cursor: pointer !important;
    z-index: 100 !important;         /* Captures mouse actions safely when the layout is idle */
    transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.2s ease, border-color 0.2s ease !important;
}

/* Clean browser default text remnant kill switches */
#t4-header .search-smart input::placeholder,
#t4-header .mod-finder input::placeholder {
    color: transparent !important;
}

/* 3. Slide Trigger Active Action: Shifts rightward while expanding to enclose the lens */
#t4-header .search-smart:hover input,
#t4-header .mod-finder:hover input,
#t4-header .search-smart input:focus,
#t4-header .mod-finder input:focus {
    right: -30px !important;         /* Retained precise right shift layout balance */
    width: 270px !important;         /* Increased from 240px to 270px to perfectly match the dropdown width */
    padding-left: 10px !important;
    padding-right: 42px !important;  /* Increased padding so text stops comfortably before the lens */
    background-color: #ffffff !important; 
    border: 1px solid rgba(0, 0, 0, 0.2) !important; 
    color: #000000 !important;      
    cursor: text !important;
    z-index: 100 !important;         /* Keeps input container at standard active background layer */
    box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.08) !important;
}

/* Restores readable grayscale color palette for modern placeholder texts */
#t4-header .search-smart:hover input::placeholder,
#t4-header .mod-finder:hover input::placeholder,
#t4-header .search-smart input:focus::placeholder,
#t4-header .mod-finder input:focus::placeholder {
    color: #6c757d !important;
}

/* Dark Theme dynamic surface layer modifications */
body.dark-active #t4-header .search-smart:hover input,
body.dark-active #t4-header .mod-finder:hover input,
body.dark-active #t4-header .search-smart input:focus,
body.dark-active #t4-header .mod-finder input:focus {
    background-color: #212529 !important; 
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.4) !important;
}
body.dark-active #t4-header .search-smart:hover input::placeholder,
body.dark-active #t4-header .mod-finder:hover input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 4. Magnifying Glass Icon Control: Concentric structural centering inside absolute inputs */
#t4-header .search-smart .btn-primary,
#t4-header .mod-finder .btn-primary {
    position: absolute !important;
    right: 10px !important;          /* Keeps the lens at its original fixed position */
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    z-index: 200 !important;         /* Sits higher than the white input background to stay visible */
    pointer-events: none !important; /* Click actions pass directly through vector shape seamlessly */
}

/* 5. Pure Vector Icon Rendering Asset Mapping */
#t4-header .search-smart .btn-primary span.icon-search,
#t4-header .mod-finder .btn-primary::before {
    font-family: 'Font Awesome 5 Free', 'FontAwesome' !important;
    content: "\f002" !important;   
    font-weight: 900 !important;
    color: #495057 !important;     
    font-size: 15px !important;
}

body.dark-active #t4-header .search-smart .btn-primary span.icon-search,
body.dark-active #t4-header .mod-finder .btn-primary::before {
    color: #ffffff !important;
}

#t4-header .search-smart .btn-primary,
#t4-header .mod-finder .btn-primary {
    font-size: 0 !important;       
}

/* 6. Autocomplete Dropdown List Fixes: Positions search predictions perfectly below the shifted box */
#t4-header .search-smart ul,
#t4-header .mod-finder ul,
.awesomplete > ul {
    position: absolute !important;
    left: auto !important;
    right: -30px !important;         /* Retained exact realigned right boundary anchor */
    width: 270px !important;         /* Expanded from 240px to 270px to eliminate word truncation */
    min-width: 270px !important;    
    z-index: 9999 !important;       
    top: calc(100% + 18px) !important;  
    padding-top: 5px !important;        
}

/* Ensures layout elements inside the suggestion rows display horizontally inline */
#t4-header .search-smart ul li,
#t4-header .mod-finder ul li {
    width: 100% !important;
    display: block !important;
    text-align: left !important;
    padding: 6px 12px !important;
    white-space: nowrap !important; 
}

/* 7. Responsive Mobile Layout Breakpoint Override */
@media (max-width: 991.98px) {
    /* Locks vertical alignment directly to dynamic baseline */
    .t4-module .search-smart,
    #t4-header .search-smart,
    #t4-header .mod-finder {
        right: 30px !important;     
        top: 60% !important;        /* Enforced alignment to keep inline with hamburger menu */
    }
}

/* ==========================================================================
   Global Icon Fix: Force FontAwesome for All System Icons -- wkim, 8/27/2026
   ========================================================================== */

/* Category & Single Article Edit Icons */
.icon-edit::before,
.com-content-category .icon-edit::before,
.com-content-article .icon-edit::before,
.edit-link .icon-edit::before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  content: "\f044" !important; /* FontAwesome Pencil Icon */
}

/* ==========================================================================
   JA Purity IV Menu Line-Height & Spacing Adjustments -- wkim, 7/15/2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. OFF-CANVAS MENU (Left-side Slide-out Menu)
   -------------------------------------------------------------------------- */
.t4-offcanvas .navbar-nav .nav-link,
.t4-offcanvas .navbar-nav .dropdown-item,
.t4-offcanvas .navbar-nav .menu-item-title {
    line-height: 1.5 !important;
}

.t4-offcanvas .navbar-nav > li > a {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.t4-offcanvas .navbar-nav .dropdown-menu > li > a,
.t4-offcanvas .navbar-nav .dropdown-menu .dropdown-item {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   2. DESKTOP & HAMBURGER MEGAMENU (Right-side Dropdown Box)
   -------------------------------------------------------------------------- */
/* Direct deep targeting of the exact text spans to force line-height */
#t4-megamenu-mainmenu .navbar-nav .nav-link span,
#t4-megamenu-mainmenu .navbar-nav .dropdown-item span,
#t4-megamenu-mainmenu .navbar-nav .menu-item-title,
.t4-megamenu .dropdown-menu-inner span {
    line-height: 1.5 !important;
    height: auto !important;
    display: inline-block !important;
}

/* Force the anchor tags themselves to shrink and release any height restrictions */
#t4-megamenu-mainmenu .navbar-nav .nav-link,
#t4-megamenu-mainmenu .navbar-nav .dropdown-item,
.t4-megamenu div[class*="dropdown-menu-level"] a {
    line-height: 1.5 !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Tighten vertical padding of top-level links */
#t4-megamenu-mainmenu .navbar-nav > li > a {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Tighten vertical padding of sub-level links inside the dropdown box */
#t4-megamenu-mainmenu .dropdown-menu-inner li > a,
#t4-megamenu-mainmenu .dropdown-menu-inner .dropdown-item {
    padding-top: 6px !important;    /* Match the top-level padding of 6px to unify spacing */
    padding-bottom: 6px !important; /* Match the top-level padding of 6px to unify spacing */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* NEW: Remove the extra top/bottom gaps created by the sub-menu container box */
#t4-megamenu-mainmenu div[class*="dropdown-menu-level"] {
    padding-top: 0 !important;      /* Removes extra gap above the first child item */
    padding-bottom: 0 !important;   /* Removes extra gap below the last child item */
    margin-top: 0 !important;       /* Removes any top margins */
    margin-bottom: 0 !important;    /* Removes any bottom margins */
}

/* Reduce the overall top/bottom padding of the dropdown container box */
#t4-megamenu-mainmenu .dropdown-menu-inner {
    padding-top: 0 !important;      /* Shrunk to 0 to keep the transition seamless */
    padding-bottom: 0 !important;   /* Shrunk to 0 to keep the transition seamless */
}

/* ==========================================================================
   Prevent Menu Text from Converting to Uppercase -- wkim, 10/5/2026
   ========================================================================== */
#t4-megamenu-mainmenu .navbar-nav .nav-link,
#t4-megamenu-mainmenu .navbar-nav .dropdown-item,
.t4-megamenu .navbar-nav > li > a {
    text-transform: none !important;
}

/* ==========================================================================
   Prevent Submenu Item Text Wrapping and Single Line Display -- wkim, 10/6/2026
   ========================================================================== */
.t4-megamenu .dropdown-menu {
    min-width: max-content !important;
    white-space: nowrap !important;
}

.t4-megamenu .dropdown-menu li a,
.t4-megamenu .dropdown-menu .dropdown-item,
.t4-megamenu .dropdown-menu .nav-link,
.t4-megamenu .dropdown-menu .menu-item-title,
.t4-megamenu .dropdown-menu span {
    white-space: nowrap !important;
}

/* ==========================================================================
   Fix Single Article Layout: Centered Box with Left-Aligned Text
   ========================================================================== */

/* 1. Center the article container box without sidebar (DISABLED when sidebar-closed) */
body:not(.sidebar-closed) .view-article:not(.has-sidebar) .top-article-info,
body:not(.sidebar-closed) .view-article:not(.has-sidebar) .bottom-article-info,
body:not(.sidebar-closed) .view-article:not(.has-sidebar) .bottom-article-info .article-inner,
body:not(.sidebar-closed) .view-article:not(.has-sidebar) .article-content,
body:not(.sidebar-closed) .view-article:not(.has-sidebar) .article-body,
body:not(.sidebar-closed) .no-sidebar .top-article-info,
body:not(.sidebar-closed) .no-sidebar .desc-article {
    width: 100% !important;
    max-width: 768px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* 2. FORCE LEFT-ALIGNMENT on all text elements inside the article body */
.view-article .top-article-info,
.view-article .desc-article,
.view-article .article-content,
.view-article .article-body,
.view-article .article-body p,
.view-article .article-body ul,
.view-article .article-body li,
.view-article .desc-article p,
.view-article .desc-article ul,
.view-article .desc-article li {
    text-align: left !important;
}

/* 3. Center images inside the article body */
.view-article:not(.has-sidebar) .article-body img,
.view-article:not(.has-sidebar) .desc-article img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    height: auto !important;
}

/* ==========================================================================
   Table Layout & Typography Enhancements for Improved Readability -- wkim, 7/15/2026
   ========================================================================== */
table.boxed {
    border-width: 1px;
    border-color: #888888;
    border-style: solid;
    border-spacing: 0px;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}
th.alignleft, th.aligncenter, th.alignright {
    background-color: #d1e5f0;
    vertical-align: middle;
    padding: 3px;
    border: 1px solid #888888;
    border-collapse: collapse;
}
td.alignleft, td.aligncenter, td.alignright {
    vertical-align: middle;
    padding: 3px;
    border: 1px solid #888888;
    border-collapse: collapse;
}
td.alignleft, th.alignleft {
    text-align: left;
}
td.aligncenter, th.aligncenter {
    text-align: center;
}
td.alignright, th.alignright {
    text-align: right;
}
/* --- Responsive Table & Image Proportion Controls for Mobile Devices --- */
/* Prevent wide tables from expanding beyond the mobile screen layout boundary */
table {
    table-layout: fixed !important; /* Force equal cell scaling and prevent horizontal overflows */
}

/* Ensure banner images shrink dynamically inside table cells on mobile viewports */
img {
    max-width: 100% !important;  /* Forces the image to auto-shrink to fit its parent container's width */
    height: auto !important;     /* Dynamically scale proportional height relative to the auto-shrink width */
}

/* ==========================================================================
   Division Layout & Typography Enhancements for Improved Readability -- wkim, 7/15/2026
   ========================================================================== */
div.underlined {
    border: 2px;
    border-color: transparent transparent #0080ff transparent;
    border-style: solid;
    padding-bottom: 2px;
    margin-bottom: 6px;
}
div.boxed {
    float: left;
    border: 1px solid #0080ff;
    padding: 2px;
    margin: 2px;
    text-align: center;
    vertical-align: middle;
}
div.centered {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

img.aligncenter {
    display: block;
    vertical-align: middle;
    margin: auto;
}
img.img_inline {
    display: inline-block;
    vertical-align: middle;
    width: auto !important;
    max-width: 100%;
}

/* ==========================================================================
   Responsive Display Controls for Category List Date Column -- wkim, 8/8/2026
   ========================================================================== */

/* Hide the 2nd column (Header & Data) on mobile screens (768px and below) */
/* @media (max-width: 768px) */
@media (max-width: 576px) {
  .category-list table.category th:nth-child(2),
  .category-list table.category td:nth-child(2) {
    display: none !important;
  }
}

/* ==========================================================================
   Balanced Column Widths for Wide Screens -- wkim, 8/8/2026
   ========================================================================== */

.category-list table {
  table-layout: auto !important;
  width: 100% !important;
}

/* 1. Title Column: Flexibly occupies all remaining wide space */
.category-list table th:nth-child(1),
.category-list table td:nth-child(1) {
  width: auto !important;
  word-break: keep-all !important;
}

/* 2. Modified Date Column */
.category-list table th:nth-child(2),
.category-list table td:nth-child(2) {
  width: 16% !important;
  min-width: 80px !important;
  /* white-space: nowrap !important; */
  word-break: keep-all !important;
}

/* 3. Author Column */
.category-list table th:nth-child(3),
.category-list table td:nth-child(3) {
  width: 20% !important;
  min-width: 90px !important;
  /* white-space: nowrap !important; */
  word-break: keep-all !important;
}

/* 4. Hits Column */
/**
.category-list table th:nth-child(4),
.category-list table td:nth-child(4) {
  width: 12% !important;
  min-width: 75px !important;
  white-space: nowrap !important;
  text-align: center !important;
}
**/

/* 4. Edit Article Column */
.category-list table th:nth-child(4),
.category-list table td:nth-child(4) {
  width: 12% !important;
  min-width: 90px !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* ==========================================================================
   Article Layout Optimization (ONLY for Single Article Item Pages) -- FIXED
   Fix: Keep Edit button full-width, but center read-width (780px) content box
   ========================================================================== */

/* 1. Set main article page container to full width */
.com-content-article .item-page {
  width: 100% !important;
  max-width: 100% !important;
}

/* 2. ONLY when sidebar DOES NOT exist: Center the article body block (780px) */
.no-sidebar .article-content,
.no-sidebar .article-body,
.com-content-article:not(.has-sidebar) .article-content,
.com-content-article:not(.has-sidebar) .article-body {
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* 3. Reset internal elements inside reading box to take 100% of the centered 780px box */
.com-content-article .article-content p,
.com-content-article .article-content blockquote,
.com-content-article .article-content pre,
.com-content-article .article-body p,
.com-content-article .article-body blockquote,
.com-content-article .article-body pre {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 4. Center tables inside the 780px container without breaking layout */
.article-content table,
.article-body table,
.item-page table {
  max-width: 100% !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   Partners Banner Fixed Width Grid Layout -- wkim, 8/16/2026
   ========================================================================== */

/* Outer container flex layout */
.mod-banners.bannergroup,
.bannergroup {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Set fixed horizontal box width (matching Joomla banner width) and auto margins */
.mod-banners__item,
.banneritem {
  display: flex !important;
  align-items: center !important;      /* Vertical centering */
  justify-content: center !important;  /* Horizontal centering */
  width: 240px !important;             /* Updated width to match Joomla banner setup */
  height: 80px !important;             /* Adjusted bounding box height for 200px width */
  margin: 0 !important;
}

/* Fit image inside fixed box while keeping natural aspect ratio */
.mod-banners__item img,
.banneritem img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* ==========================================================================
   Footnav Module Title Styling Option 2 -- wkim, 8/18/2026
   ========================================================================== */

.t4-footnav .t4-module .module-title span {
  color: #0d6efd !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  position: relative !important;
  padding-bottom: 8px !important;
  display: inline-block !important;
  border-bottom: 2.5px solid #0d6efd !important;
}

.t4-footnav .t4-module .module-title span::after {
  display: none !important;
}

/* ==========================================================================
   Maximize Article Width without Changing Font Size -- wkim, 8/25/2026
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Remove side margins and paddings from all outer layout wrappers */
    .t4-wrapper,
    .t4-main-body,
    .t4-section-main,
    .t4-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2. Force Bootstrap containers to occupy full screen width */
    .t4-wrapper .container,
    .t4-main-body .container,
    .t4-content .container,
    .t4-maincontainer {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 4px !important;  /* Minimum safety margin to prevent text touching screen edges */
        padding-right: 4px !important;
    }

    /* 3. Strip internal column gutters in Bootstrap grid */
    .t4-main-body .row,
    .t4-content .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .t4-main-body [class*="col-"],
    .t4-content [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 4. Remove all inner padding/margins from Article components */
    .com-content-article,
    .item-page,
    .article-content,
    article {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   Fix Footnav Left Alignment & Side Spacing (JA Purity IV) -- wkim, 8/25/2026
   ========================================================================== */

/* 1. Reset broken negative margins on Footnav rows */
#t4-footnav .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. Apply proper side padding to Footnav container and columns */
#t4-footnav .container-xxl,
#t4-footnav .container {
    padding-left: 24px !important;  /* Controls distance from left edge */
    padding-right: 24px !important;
}

/* 3. Ensure columns maintain internal padding without overflow */
#t4-footnav [class*="col-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* ==========================================================================
   Hide Add Attachment Link in Category View (JA Purity IV) -- wkim, 8/27/2026
   ========================================================================== */
.com-content-category .attachmentsContainer {
    display: none !important;
}

/* ==========================================================================
   History Timeline Component Styles -- wkim, 8/27/2026
   ========================================================================== */

/* Container Setup */
.history-container {
  max-width: 800px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333333;
  line-height: 1.6;
}

/* Year Header */
.history-year {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1e3a8a;
  border-bottom: 2px solid #1e3a8a;
  padding-bottom: 8px;
  margin-bottom: 24px;
}

/* Timeline Layout */
.timeline {
  position: relative;
  padding-left: 20px;
  border-left: 2px solid #e5e7eb;
}

.timeline-item {
  position: relative;
  margin-bottom: 24px;
  padding-left: 32px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -27px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #2563eb;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 2px #2563eb;
}

/* Date Badge & Event Titles */
.event-date {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #2563eb;
  background-color: #eff6ff;
  padding: 2px 10px;
  border-radius: 9999px;
  margin-left: -24px;
  margin-bottom: 6px;
}

.event-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
}

.event-location {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 8px;
}

/* Event Content Box */
.event-details {
  background-color: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.925rem;
}

.event-details ul {
  margin: 4px 0 0 0;
  padding-left: 18px;
}

.event-details li {
  margin-bottom: 4px;
}

/* Award Title Section (Replaces <details>) */
.event-details .award-title {
  margin-top: 10px;
  margin-bottom: 6px;
  font-weight: 600;
  color: #111827;
  border-top: 1px dashed #e5e7eb;
  padding-top: 8px;
}

/* Sub-heading Paragraph Margin Adjustments (Group Sub-headings with Lists Below) */
.event-details p {
  margin-top: 14px !important;
  margin-bottom: 4px !important;
}

.event-details p.award-title,
.event-details p:first-child {
  margin-top: 6px !important;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  .timeline {
    padding-left: 12px;
  }
  .timeline-item {
    padding-left: 12px;
  }
  .timeline-item::before {
    left: -19px;
  }
}

/* ==========================================================================
   Fix Article Bottom Layout Alignment (JA Purity IV) -- wkim, 8/27/2026
   Prerequisite: Author Info is hidden in Joomla Article Options.
   ========================================================================== */

/* Hide empty author column specifically and stretch content column to 100% */
.bottom-article-info .row > .col-md-3 {
  display: none !important;
}

.bottom-article-info .row > .col-md-9 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* ==========================================================================
   Fix Article Bottom Layout Alignment (JA Purity IV) -- wkim, 8/27/2026
   Prerequisite: Author Info is hidden in Joomla Article Options.
   ========================================================================== */

/* Base Style (Desktop & Tablet) */
.blog-featured .blog-item-content,
.blog-featured .item-inner {
  background-color: #ffffff !important;           /* Solid white background */
  border: 1px solid rgba(0, 0, 0, 0.08) !important; /* Subtle outer border */
  border-radius: 8px !important;                 /* Rounded corners */
  padding: 1.5rem !important;                    /* Inner card padding for desktop */
  margin-bottom: 1.5rem !important;              /* Spacing between cards */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; /* Soft elevation shadow */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Remove template default bottom border overrides on intro articles */
.blog-featured .item-inner {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Hover effect on larger screens */
@media (min-width: 768px) {
  .blog-featured .blog-item-content:hover,
  .blog-featured .item-inner:hover {
    transform: translateY(-2px);                  /* Lift card slightly */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important; /* Darken shadow */
  }
}

/* Mobile Responsive Optimization (Screens smaller than 768px) */
@media (max-width: 767.98px) {
  /* Normalize outer containers on mobile */
  .blog-featured .blog-item-content,
  .blog-featured .item-inner {
    padding: 1rem 0.75rem !important;            /* Balanced mobile padding (12px left/right) */
    margin-bottom: 1rem !important;               /* Reduce bottom margin */
    border-radius: 6px !important;               /* Compact border radius */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important; /* Minimal shadow for mobile */
  }

  /* Reset inner children padding for 1 & 2 leading articles to match 3 & 4 intro articles */
  .blog-featured .blog-item-content .item-content,
  .blog-featured .blog-item-content [class*="item-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ==========================================================================
   Compact Article List Layout (JA Purity IV) -- wkim, 8/27/2026
   Fix: Target actual JA Purity IV DOM structure (.item-body, .item-title, .item-meta)
   ========================================================================== */

/* Reset module list spacing */
ul.category-module.mod-list {
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  list-style: none !important;
}

/* Arrange list item in a compact single row */
ul.category-module.mod-list > li.item {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 0 !important; /* Tight vertical spacing */
  border-bottom: 1px dashed #e0e0e0 !important;
  margin-bottom: 0 !important;
}

/* Container for Title and Meta */
ul.category-module.mod-list > li.item .item-body {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

/* Title Styling */
ul.category-module.mod-list > li.item h5.item-title {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: normal !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-right: 15px !important;
}

/* Date Styling */
ul.category-module.mod-list > li.item .item-meta {
  margin: 0 !important;
  font-size: 0.85rem !important;
  white-space: nowrap !important;
}

ul.category-module.mod-list > li.item .item-meta .item-date {
  font-size: 0.85rem !important;
  color: #888 !important;
}

/* ==========================================================================
   Section 2, 5, 7, 8, 9 Module Card Layout & Full Dynamic Theme Integration
   Scope: Horizontal Layout Preservation & Height Alignment Fix
   ========================================================================== */

/* 1. Ensure Parent Row uses Flex Alignment for equal heights */
#t4-section-2 .t4-row,
#t4-section-2 .row,
#t4-section-5 .t4-row,
#t4-section-5 .row,
#t4-section-7 .t4-row,
#t4-section-8 .t4-row,
#t4-section-9 .t4-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important; /* Stretch columns to match row height */
}

/* 2. Preserve Bootstrap Grid Column Behavior & Enable Internal Flex */
#t4-section-2 .t4-col,
#t4-section-2 [class*="col-"],
#t4-section-5 .t4-col,
#t4-section-5 [class*="col-"],
#t4-section-7 .t4-col,
#t4-section-8 .t4-col,
#t4-section-9 .t4-col {
  display: flex !important;
  flex-direction: column !important;
}

/* 3. Real Module Card Box Target (.moduletable & .t4-module) */
#t4-section-2 .moduletable,
#t4-section-2 .t4-module,
#t4-section-2 .t4-mod-wrap,
#t4-section-2 #Mod215,
#Mod215,
#t4-section-5 .moduletable,
#t4-section-5 .t4-module,
#t4-section-7 .moduletable,
#t4-section-8 .moduletable,
#t4-section-9 .moduletable,
#t4-section-7 .t4-module,
#t4-section-8 .t4-module,
#t4-section-9 .t4-module {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;                     /* Fills 100% height of parent col */
  height: 100% !important;                       /* Force full height stretch */
  padding: 1.25rem !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover Effect on Desktop */
@media (min-width: 768px) {
  #t4-section-2 .moduletable:hover,
  #t4-section-2 .t4-mod-wrap:hover,
  #t4-section-2 #Mod215:hover,
  #t4-section-5 .moduletable:hover,
  #t4-section-5 .t4-module:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
  }
}

/* 4. Module Title Header Styling */
#t4-section-2 .moduletable h3,
#t4-section-2 #Mod213 h3,
#t4-section-2 #Mod215 h3,
#t4-section-2 #Mod215 h3.mod-title,
#t4-section-5 .moduletable > h3,
#t4-section-5 .t4-module h3,
#t4-section-7 h3, #t4-section-8 h3, #t4-section-9 h3 {
  font-family: 'Noto Sans KR', sans-serif !important;
  font-weight: bold !important;
  color: #1e3a8a !important;        /* Primary navy blue accent */
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  padding-bottom: 0 !important;
  word-break: keep-all !important;
  line-height: 1.4 !important;
}

/* 5. Section Content Layout & List Normalization (#Mod215 Specific) */
#t4-section-2 .section-ct,
#Mod215 .section-ct,
#t4-section-5 .moduletable > *:not(h3) {
  flex: 1 1 auto !important;                   /* Expands content to push bottom edge cleanly */
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#Mod215 ul.category-module.mod-list {
  padding-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  list-style: none !important;
}

#Mod215 ul.category-module.mod-list > li.item {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 4px 0 !important;
  border-bottom: 1px dashed #e8e8e8 !important;
  margin-bottom: 0 !important;
}

#Mod215 ul.category-module.mod-list > li.item .item-body {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

#Mod215 ul.category-module.mod-list > li.item h5.item-title {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: normal !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-right: 10px !important;
}

#Mod215 ul.category-module.mod-list > li.item h5.item-title a {
  color: #212529 !important;
  text-decoration: none !important;
}

#Mod215 ul.category-module.mod-list > li.item h5.item-title a:hover {
  color: #1e3a8a !important;
  text-decoration: underline !important;
}

#Mod215 ul.category-module.mod-list > li.item .item-meta {
  margin: 0 !important;
  font-size: 0.85rem !important;
  white-space: nowrap !important;
}

#Mod215 ul.category-module.mod-list > li.item .item-meta .item-date {
  font-size: 0.85rem !important;
  color: #888888 !important;
  font-variant-numeric: tabular-nums !important;
  display: inline-block !important;
  min-width: 65px !important;
  text-align: right !important;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace !important;
}

/* 6. Dark Theme Override Controls (Triggered by body.dark-active) */
body.dark-active #t4-section-2 .moduletable,
body.dark-active #t4-section-2 .t4-mod-wrap,
body.dark-active #t4-section-2 #Mod215,
body.dark-active #Mod215,
body.dark-active #t4-section-5 .moduletable,
body.dark-active #t4-section-5 .t4-module,
.color-dark-active #t4-section-5 .moduletable,
[data-theme="dark"] #t4-section-5 .moduletable {
  background-color: #1f2937 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-active #Mod215 ul.category-module.mod-list > li.item {
  border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-active #Mod215 ul.category-module.mod-list > li.item h5.item-title a {
  color: #ffffff !important;
}

body.dark-active #Mod215 ul.category-module.mod-list > li.item h5.item-title a:hover {
  color: #93c5fd !important;
}

body.dark-active #Mod215 ul.category-module.mod-list > li.item .item-meta .item-date {
  color: #9ca3af !important;
}

/* 7. Mobile View Responsiveness Adjustments */
@media (max-width: 767.98px) {
  #t4-section-2 .t4-row,
  #t4-section-2 .row,
  #t4-section-5 .t4-row,
  #t4-section-5 .row {
    height: auto !important;
  }

  #t4-section-2 .moduletable,
  #t4-section-2 .t4-mod-wrap,
  #t4-section-2 #Mod215,
  #Mod215,
  #t4-section-5 .moduletable,
  #t4-section-5 .t4-module {
    padding: 1rem 0.75rem !important;
    height: auto !important;
  }
}

/* ==========================================================================
   Minimal Dark Theme Fix for Section 1 Body Text -- wkim, 9/8/2026
   Description: Ensure readable text color for p tag in Dark Mode
   ========================================================================== */

.color-dark-active #t4-section-1 p,
[data-theme="dark"] #t4-section-1 p {
  color: #e5e7eb !important;
}

/* ==========================================================================
   Featured Articles Dynamic Light/Dark Theme Fix -- wkim, 9/10/2026
   ========================================================================== */

/* 1. Light Theme (Default State) - Featured Articles */
.blog-featured .blog-item-content,
.blog-featured .item-inner {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Text & Link Colors (Light Theme) */
.blog-featured .article-title a,
.blog-featured .item-title a,
.blog-featured h2 a,
.blog-featured h3 a {
  color: #212529 !important; /* Dark default text color */
  text-decoration: none !important;
}

.blog-featured .article-title a:hover,
.blog-featured .item-title a:hover {
  color: #1e3a8a !important; /* Navy point color on hover */
  text-decoration: underline !important;
}

.blog-featured .article-intro,
.blog-featured .article-body,
.blog-featured p {
  color: #4b5563 !important; /* Body text color */
}

.blog-featured .article-aside,
.blog-featured .item-meta {
  color: #6b7280 !important; /* Date and metadata text color */
}

/* 2. Dark Theme (When body.dark-active is enabled) - Featured Articles */
body.dark-active .blog-featured .blog-item-content,
body.dark-active .blog-featured .item-inner {
  background-color: #1f2937 !important; /* Dark mode card background */
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Text & Link Colors (Dark Theme) */
body.dark-active .blog-featured .article-title a,
body.dark-active .blog-featured .item-title a,
body.dark-active .blog-featured h2 a,
body.dark-active .blog-featured h3 a {
  color: #ffffff !important; /* White title text for dark mode */
}

body.dark-active .blog-featured .article-title a:hover,
body.dark-active .blog-featured .item-title a:hover {
  color: #93c5fd !important; /* Light blue point color on hover */
}

body.dark-active .blog-featured .article-intro,
body.dark-active .blog-featured .article-body,
body.dark-active .blog-featured p {
  color: #e5e7eb !important; /* Body text color for dark mode */
}

body.dark-active .blog-featured .article-aside,
body.dark-active .blog-featured .item-meta {
  color: #9ca3af !important; /* Metadata text color for dark mode */
}

/* ==========================================================================
   Fix Blockquote Styling & Indentation Override -- wkim, 10/9/2026 (Updated)
   ========================================================================== */

/* 1. Restore blockquote styling with subtle & elegant border line */
.item-page .article-content blockquote,
.item-page .article-body blockquote,
.desc-article blockquote,
blockquote {
    max-width: 100% !important;         
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important;
    padding: 0.75rem 1.25rem !important; 
    border-left: 2.5px solid #3b82f6 !important; /* Soft blue accent line (reduced width from 4px) */
    background-color: #f8fafc !important;        /* Soft neutral light background */
    color: #475569 !important;                  /* Muted slate text color */
    border-radius: 0 6px 6px 0 !important;      /* Soft rounded right corners */
    box-sizing: border-box !important;
}

/* 2. Dark theme support */
body.dark-active .item-page .article-content blockquote,
body.dark-active .item-page .article-body blockquote,
body.dark-active .desc-article blockquote,
body.dark-active blockquote {
    background-color: #1e293b !important;       /* Dark mode slate background */
    border-left-color: #60a5fa !important;       /* Vibrant soft blue accent line for dark theme */
    color: #cbd5e1 !important;                  /* High-contrast light text color for dark theme */
}

/* ==========================================================================
   Fix User Registration Form - Custom Field Dropdown Click Issue -- 9/17/2026
   ========================================================================== */

/* 1. Ensure user registration form fields receive click/tap events */
.com-users.registration-page .form-group,
.com-users .field-list,
.form-register .control-group {
    position: relative !important;
    z-index: 10 !important;
    overflow: visible !important;
}

/* 2. Unblock pointer events and fix z-index for dropdown select box */
.com-users select,
.com-users select.form-select,
.com-users .field-list select,
.com-users .choices,
.com-users .chzn-container {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    display: block !important;
    opacity: 1 !important;
}

/* 3. Force dropdown options menu to float over other form elements */
.com-users .choices__list--dropdown,
.com-users .chzn-container .chzn-drop {
    position: absolute !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    display: block !important;
}

/* ==========================================================================
   Force Native Select & Radio for User Registration AND Profile Edit Fields -- wkim, 9/17/2026
   ========================================================================== */

/* Unblock pointer events for custom field containers in both Registration and Profile Edit pages */
#member-registration .com-users-registration__fields,
#member-registration .control-group,
#member-registration fieldset.radio,
#member-registration .field-radio,
.com-users-registration fieldset.radio,
.com-users-profile .field-list,
.com-users-profile fieldset.radio,
.profile-edit fieldset.radio,
.profile-edit .field-radio {
    pointer-events: auto !important;
    opacity: 1 !important;
}

/* Ensure clickability and proper layering (z-index) for radio buttons and labels */
#member-registration input[type="radio"],
#member-registration label.btn,
#member-registration label.form-check-label,
#member-registration fieldset.radio label,
.com-users-registration fieldset.radio label,
.com-users-profile input[type="radio"],
.com-users-profile fieldset.radio label,
.com-users-profile label.form-check-label,
.profile-edit input[type="radio"],
.profile-edit fieldset.radio label,
.profile-edit label.form-check-label {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 100 !important;
}

/* Expand text input field width in Registration and Profile Edit custom fields */
#member-registration .com-users-registration__fields input[type="text"],
#member-registration .field-text input[type="text"],
.com-users-registration input[type="text"],
.com-users-profile input[type="text"],
.profile-edit input[type="text"] {
    width: 100% !important;
    max-width: 500px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   Make sidebar-l position sticky on scroll (Mod220 ~ Mod225) -- wkim, 10/9/2026
   Fix: Pure Sticky Support for Sidebars without breaking non-sidebar pages
   ========================================================================== */

/* 1. Prevent Height Collapse by stretching sidebar column */
.t4-main-body .t4-sidebar-l,
.t4-main-body div.t4-sidebar-l,
.t4-sidebar-l,
.t4-col.sidebar-l {
  align-self: stretch !important;
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
}

/* 2. Grid Ratio ONLY on Desktop AND ONLY when sidebar exists */
@media (min-width: 992px) {
  .t4-main-body .t4-row:has(.t4-sidebar-l),
  .t4-main-body .row:has(.t4-sidebar-l),
  .t4-main-body .t4-row:has(.sidebar-l),
  .t4-main-body .row:has(.sidebar-l) {
    display: flex !important;
    align-items: stretch !important;
  }

  .t4-main-body .t4-sidebar-l,
  .t4-main-body div.t4-col.sidebar-l {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
    box-sizing: border-box !important;
  }

  .t4-main-body .t4-sidebar-l + .t4-col-md,
  .t4-main-body .t4-col.sidebar-l + .t4-col-md,
  .t4-main-body .t4-sidebar-l + [class*="col-"],
  .t4-main-body .sidebar-l + [class*="col-"] {
    flex: 0 0 75% !important;
    max-width: 75% !important;
    width: 75% !important;
    box-sizing: border-box !important;
  }
}

/* 3. Sticky Module Container Style (#Mod220 ~ #Mod226) */
div#Mod220.t4-module, div#Mod221.t4-module, div#Mod222.t4-module,
div#Mod223.t4-module, div#Mod224.t4-module, div#Mod225.t4-module, div#Mod226.t4-module,
.t4-sidebar-l #Mod220, .t4-sidebar-l #Mod221, .t4-sidebar-l #Mod222,
.t4-sidebar-l #Mod223, .t4-sidebar-l #Mod224, .t4-sidebar-l #Mod225, .t4-sidebar-l #Mod226,
.t4-sidebar-l .t4-module, .t4-sidebar-l .moduletable {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 100px !important;
  z-index: 99 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 20px !important;
}

/* 3.1 Refined Module Title Style */
div#Mod220 .module-title, div#Mod221 .module-title, div#Mod222 .module-title,
div#Mod223 .module-title, div#Mod224 .module-title, div#Mod225 .module-title, div#Mod226 .module-title,
.t4-sidebar-l .module-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: #1e3a8a !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #2563eb !important;
}

div#Mod220 .module-title span, div#Mod221 .module-title span, div#Mod222 .module-title span,
div#Mod223 .module-title span, div#Mod224 .module-title span, div#Mod225 .module-title span, div#Mod226 .module-title span,
.t4-sidebar-l .module-title span {
  display: inline-block !important;
  color: inherit !important;
}

/* 4. Sidebar Menu Items Styling */
div#Mod220 .nav-item > a, div#Mod221 .nav-item > a, div#Mod222 .nav-item > a,
div#Mod223 .nav-item > a, div#Mod224 .nav-item > a, div#Mod225 .nav-item > a, div#Mod226 .nav-item > a,
.t4-sidebar-l .nav-item > a,
.t4-sidebar-l ul.nav > li > a {
  display: block !important;
  padding: 8px 12px !important;
  border-left: 4px solid transparent !important;
  border-radius: 4px !important;
  transition: all 0.2s ease-in-out !important;
  text-decoration: none !important;
  color: #4b5563 !important;
  font-weight: 400 !important;
}

/* 5. Parent Active Items Reset */
div#Mod220 .nav-item.active:not(.current) > a, div#Mod221 .nav-item.active:not(.current) > a,
div#Mod222 .nav-item.active:not(.current) > a, div#Mod223 .nav-item.active:not(.current) > a,
div#Mod224 .nav-item.active:not(.current) > a, div#Mod225 .nav-item.active:not(.current) > a, div#Mod226 .nav-item.active:not(.current) > a,
.t4-sidebar-l .nav-item.active:not(.current) > a,
.t4-sidebar-l .active:not(.current) > a {
  color: #4b5563 !important;
  font-weight: 400 !important;
  background-color: transparent !important;
  border-left-color: transparent !important;
}

/* 6. Mouse Hover Effect */
div#Mod220 .nav-item > a:hover, div#Mod221 .nav-item > a:hover, div#Mod222 .nav-item > a:hover,
div#Mod223 .nav-item > a:hover, div#Mod224 .nav-item > a:hover, div#Mod225 .nav-item > a:hover, div#Mod226 .nav-item > a:hover,
.t4-sidebar-l .nav-item > a:hover,
.t4-sidebar-l ul.nav > li > a:hover {
  color: #1d4ed8 !important;
  background-color: #f1f5f9 !important;
  border-left-color: #93c5fd !important;
}

/* 7. Current Menu Item Highlight */
div#Mod220 .nav-item.current > a, div#Mod220 .nav-item.active.current > a,
div#Mod221 .nav-item.current > a, div#Mod221 .nav-item.active.current > a,
div#Mod222 .nav-item.current > a, div#Mod222 .nav-item.active.current > a,
div#Mod223 .nav-item.current > a, div#Mod223 .nav-item.active.current > a,
div#Mod224 .nav-item.current > a, div#Mod224 .nav-item.active.current > a,
div#Mod225 .nav-item.current > a, div#Mod225 .nav-item.active.current > a,
div#Mod226 .nav-item.current > a, div#Mod226 .nav-item.active.current > a,
.t4-sidebar-l .nav-item.current > a,
.t4-sidebar-l .nav-item.active.current > a,
.t4-sidebar-l .current > a {
  color: #2563eb !important;
  font-weight: 700 !important;
  background-color: #eff6ff !important;
  border-left: 4px solid #2563eb !important;
}

/* 8. Dynamic Dark Theme Support */
body.dark-active div#Mod220.t4-module, body.dark-active div#Mod221.t4-module,
body.dark-active div#Mod222.t4-module, body.dark-active div#Mod223.t4-module,
body.dark-active div#Mod224.t4-module, body.dark-active div#Mod225.t4-module, body.dark-active div#Mod226.t4-module,
body.dark-active .t4-sidebar-l .t4-module,
[data-theme="dark"] .t4-sidebar-l .t4-module {
  background-color: #1f2937 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

body.dark-active div#Mod220 .module-title, body.dark-active div#Mod221 .module-title,
body.dark-active div#Mod222 .module-title, body.dark-active div#Mod223 .module-title,
body.dark-active div#Mod224 .module-title, body.dark-active div#Mod225 .module-title, body.dark-active div#Mod226 .module-title,
body.dark-active .t4-sidebar-l .module-title,
[data-theme="dark"] .t4-sidebar-l .module-title {
  color: #60a5fa !important;
  border-bottom-color: #3b82f6 !important;
}

body.dark-active div#Mod220 .nav-item > a, body.dark-active div#Mod221 .nav-item > a,
body.dark-active div#Mod222 .nav-item > a, body.dark-active div#Mod223 .nav-item > a,
body.dark-active div#Mod224 .nav-item > a, body.dark-active div#Mod225 .nav-item > a, body.dark-active div#Mod226 .nav-item > a,
body.dark-active .t4-sidebar-l .nav-item > a,
body.dark-active div#Mod220 .nav-item.active:not(.current) > a,
body.dark-active div#Mod221 .nav-item.active:not(.current) > a,
body.dark-active div#Mod222 .nav-item.active:not(.current) > a,
body.dark-active div#Mod223 .nav-item.active:not(.current) > a,
body.dark-active div#Mod224 .nav-item.active:not(.current) > a,
body.dark-active div#Mod225 .nav-item.active:not(.current) > a,
body.dark-active div#Mod226 .nav-item.active:not(.current) > a,
body.dark-active .t4-sidebar-l .nav-item.active:not(.current) > a {
  color: #d1d5db !important;
  font-weight: 400 !important;
  background-color: transparent !important;
  border-left-color: transparent !important;
}

body.dark-active div#Mod220 .nav-item > a:hover, body.dark-active div#Mod221 .nav-item > a:hover,
body.dark-active div#Mod222 .nav-item > a:hover, body.dark-active div#Mod223 .nav-item > a:hover,
body.dark-active div#Mod224 .nav-item > a:hover, body.dark-active div#Mod225 .nav-item > a:hover, body.dark-active div#Mod226 .nav-item > a:hover,
body.dark-active .t4-sidebar-l .nav-item > a:hover,
[data-theme="dark"] .t4-sidebar-l .nav-item > a:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-left-color: #60a5fa !important;
}

body.dark-active div#Mod220 .nav-item.current > a, body.dark-active div#Mod220 .nav-item.active.current > a,
body.dark-active div#Mod221 .nav-item.current > a, body.dark-active div#Mod221 .nav-item.active.current > a,
body.dark-active div#Mod222 .nav-item.current > a, body.dark-active div#Mod222 .nav-item.active.current > a,
body.dark-active div#Mod223 .nav-item.current > a, body.dark-active div#Mod223 .nav-item.active.current > a,
body.dark-active div#Mod224 .nav-item.current > a, body.dark-active div#Mod224 .nav-item.active.current > a,
body.dark-active div#Mod225 .nav-item.current > a, body.dark-active div#Mod225 .nav-item.active.current > a,
body.dark-active div#Mod226 .nav-item.current > a, body.dark-active div#Mod226 .nav-item.active.current > a,
body.dark-active .t4-sidebar-l .nav-item.current > a,
body.dark-active .t4-sidebar-l .nav-item.active.current > a,
[data-theme="dark"] .t4-sidebar-l .current > a {
  color: #60a5fa !important;
  font-weight: 700 !important;
  background-color: rgba(37, 99, 235, 0.2) !important;
  border-left-color: #60a5fa !important;
}

/* 9. Prevent layout clipping for sticky elements */
.t4-wrapper,
.t4-content,
.t4-content-inner,
.t4-main-body,
.t4-section-inner,
.t4-row {
  overflow: visible !important;
}

/* 10. Prevent Google Maps iframe from breaking column width calculation */
.t4-main-body iframe,
.t4-main-body img {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   Hide Left Sidebar (sidebar-l) on Mobile / Tablet Screens -- wkim, 10/10/2026
   ========================================================================== */
@media (max-width: 991.98px) {
    /* High specificity override to hide sidebar-l and stretch main content */
    html body #t4-main-body .t4-row .t4-col-sidebar-l,
    html body #t4-main-body .t4-row div[class*="sidebar-l"],
    body .t4-main-body div.t4-col.sidebar-1,
    body .t4-main-body div.t4-col.sidebar-l,
    body div.t4-col-sidebar-l {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
}

/* ==========================================================================
   Smart Table Text & Long Link/Email Wrapping -- wkim, 10/8/2026
   ========================================================================== */

/* 1. Standard text inside tables: Keep natural English words intact */
td, th,
.table td, .table th,
.eb-container table td,
.eb-container table th {
  word-break: normal !important;        
  overflow-wrap: break-word !important;	    
  white-space: normal !important;
}

/* 2. Target emails, links & long codes specifically to break safely without pushing layout */
td a, 
td .email,
td span,
.eb-container table td a {
  word-break: break-word !important;    /* Safely wraps long emails/URLs within the cell width */
}

/* 3. Mobile Table Viewport Overflow Protection */
@media (max-width: 767.98px) {
  .eb-container .table-responsive,
  .eb-container table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;         /* Enables smooth horizontal scrolling on mobile if columns exceed width */
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   Events Booking Table Cell Natural Wrapping & Width Adjustment -- wkim, 10/8/2026
   ========================================================================== */

/* 1. Release fixed table layout to allow cells to adjust naturally */
.eb-container table {
    table-layout: auto !important;
}

/* 2. Allow line breaks between words while preventing word truncation mid-character */
.eb-container table th,
.eb-container table td {
    white-space: normal !important;     /* Allows wrapping at spaces (e.g., "Registration" / "Date") */
    word-break: keep-all !important;     /* Prevents breaking individual words in the middle */
    overflow-wrap: break-word !important;/* Wraps gracefully without overflowing */
    width: auto !important;
}

/* ==========================================================================
   Fix Contentpane (Popup / Print / Standalone) Layout Padding -- wkim, 10/9/2026
   ========================================================================== */

/* Add safe margins and max-width when loaded inside contentpane view */
body.contentpane #eb-container,
body.contentpane .eb-container {
    padding: 10px 12px !important;     /* top/bottom 20px, left/right 12px padding */
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* ==========================================================================
   Remove Bullet List Style and Expand Video Module Width -- wkim, 10/16/2026
   ========================================================================== */
/* 1. Remove list bullets and inner browser padding */
.moduletable ul.mod-articles-items,
.moduletable ul.mod-articles-items > li {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* 2. Expand video container to fit the module box width */
.moduletable .mod-articles-item-content,
.moduletable .mod-articles-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Prevent inner video element margins from overflowing the card */
.moduletable p,
.moduletable iframe,
.moduletable .osyoutube {
    margin-bottom: 0 !important;
    display: block !important;
}

/* ==========================================================================
   Fix Events Booking Title Line Break & Column Widths -- wkim, 10/16/2026
   ========================================================================== */
@media (min-width: 768px) {
    /* 1. Reduce Date Box Column Width (from 25% to 15%) & Right Align Content */
    .ebm-upcoming-events .row-up-event-item > .col-md-3,
    .ebm-upcoming-events .col-md-3 {
        flex: 0 0 15% !important;
        max-width: 15% !important;
        width: 15% !important;
        padding-right: 5px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
        text-align: right !important;
    }

    /* 2. Expand Title Column Width (from 75% to 85%) & Prevent Line Wrap */
    .ebm-upcoming-events .row-up-event-item > .col-md-9,
    .ebm-upcoming-events .col-md-9 {
        flex: 0 0 85% !important;
        max-width: 85% !important;
        width: 85% !important;
        padding-left: 10px !important;
        white-space: nowrap !important;       /* Prevent text wrapping to second line */
        overflow: hidden !important;          /* Hide overflow if needed */
        text-overflow: ellipsis !important;   /* Display ellipsis (...) for long titles */
    }
}

/* ==========================================================================
   Adjust Events Booking Module Title Margin & Spacing -- wkim, 10/16/2026
   ========================================================================== */

/* Target section-heading specifically inside Events Booking Module (#Mod213) */
#Mod213 .section-heading,
.ebm-upcoming-events-improved .section-heading,
.ebm-upcoming-events .section-heading {
    margin-top: 14px !important;    /* Push title text down to align with left video title line */
    margin-bottom: 12px !important; /* Reduce large orange bottom margin (override mb-4 / mb-lg-5) */
}

/* Ensure the title text itself resets excess margins */
#Mod213 .section-heading h3,
.ebm-upcoming-events .section-heading h3 {
    margin: 0 !important;
}

/* ==========================================================================
   Fix Section 1 Video Module Layout & Full Box Expansion -- wkim, 10/16/2026
   ========================================================================== */

/* 1. Reset inner padding & margin for section 1 video container */
#t4-section-2 .t4-col.section-1 .moduletable,
#t4-section-2 .section-1 .moduletable {
    padding: 2px !important;
    margin: 0 !important;
    height: 100% !important; /* Force card height to stretch matching right column */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* 2. Force list element to strip inner padding completely */
#t4-section-2 .section-1 ul.mod-articles-items,
#t4-section-2 .section-1 ul.mod-list,
#t4-section-2 .section-1 ul.mod-articles-items > li {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* 3. Expand OSYouTube player wrapper and iframe to fill 100% width and height */
#t4-section-2 .section-1 .mod-articles-item-content,
#t4-section-2 .section-1 .mod-articles-item,
#t4-section-2 .section-1 .osyoutube,
#t4-section-2 .section-1 iframe,
#t4-section-2 .section-1 p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* 4. Match height balance between left video and right events module */
#t4-section-2 .t4-row {
    display: flex !important;
    align-items: stretch !important;
}

/* ==========================================================================
   Mobile Responsive Fixes - Expand Video Wrapper Height on Mobile -- wkim, 10/16/2026
   ========================================================================== */

@media (max-width: 767.98px) {
    #t4-section-2 .section-1 div[style*="padding-bottom"] {
        padding-bottom: 72% !important;
    }
}

/* ==========================================================================
   Align Mobile Date Box Top with Title First Line -- wkim, 10/16/2026
   ========================================================================== */
@media (max-width: 767.98px) {
    /* 1. Change alignment from center to flex-start (Top Align) */
    .ebm-upcoming-events .row-up-event-item {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important; /* Top-align so date matches 1st line of title */
    }

    /* 2. Date Box Column Width & Fine-tune Top Alignment */
    .ebm-upcoming-events .row-up-event-item > .col-md-3,
    .ebm-upcoming-events .col-md-3 {
        width: 14% !important;
        max-width: 14% !important;
        flex: 0 0 14% !important;
        padding-right: 0px !important;
        margin-right: 0px !important;
        margin-top: 2px !important; /* Micro-adjustment to snap to first line text baseline */
        display: flex !important;
        justify-content: flex-end !important;
    }

    /* 3. Event Title Column Width & Line Height Optimization */
    .ebm-upcoming-events .row-up-event-item > .col-md-9,
    .ebm-upcoming-events .col-md-9 {
        width: 86% !important;
        max-width: 86% !important;
        flex: 0 0 86% !important;
        padding-left: 6px !important;
        margin-left: 0px !important;
        line-height: 1.35 !important; /* Tighten line height for multi-line titles */
    }
}

/* ==========================================================================
   Reduce Bottom Margin & Styling for Section 2 Module Headings -- wkim, 10/16/2026
   Target: Announcements & Latest Articles Module Titles (#t4-section-2)
   ========================================================================== */

/* 1. Reduce title container bottom spacing */
#t4-section-2 .section-heading,
#t4-section-2 .section-heading.mb-4,
#t4-section-2 .section-heading.mb-lg-5 {
    margin-bottom: 14px !important; /* Adjusted bottom spacing under title */
    margin-top: 0px !important;     /* Clean top margin alignment */
}

/* 2. Completely remove borders from parent heading elements */
#t4-section-2 .section-heading h3,
#t4-section-2 .section-heading .mod-title-text {
    margin-bottom: 0px !important;
    border-bottom: none !important; /* Force clear outer border to prevent double lines */
    border: none !important;
    line-height: 1.2 !important;     /* Unify line-height */
}

/* 3. Apply single underline ONLY to the inner text span element */
#t4-section-2 .section-heading h3 span,
#t4-section-2 .section-heading .mod-title-text span {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #1e3a8a !important;            /* Premium Navy Blue */
    letter-spacing: 0.5px !important;
    padding-bottom: 4px !important;       /* Unified border-to-text gap */
    border-bottom: 2.5px solid #2563eb !important; /* Single Point Accent Line */
    display: inline-block !important;
    line-height: 1.2 !important;
}

/* 4. Dark Theme Support */
body.dark-active #t4-section-2 .section-heading h3 span,
body.dark-active #t4-section-2 .section-heading .mod-title-text span,
[data-theme="dark"] #t4-section-2 .section-heading h3 span {
    color: #60a5fa !important;
    border-bottom-color: #3b82f6 !important;
}

/* ==========================================================================
   Sidebar-l Toggle (Close & Re-open) & TinyMCE Layout Fix -- wkim, 10/27/2026
   ========================================================================== */

/* 1. Relative positioning for close button anchor */
.t4-sidebar-l .t4-module,
.sidebar-l .t4-module,
.sidebar-l .module-inner,
.sidebar-1 .t4-module {
    position: relative !important;
}

/* 2. Styling for sidebar close (X) button */
.sidebar-close-btn {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    background: transparent !important;
    border: none !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #888888 !important;
    cursor: pointer !important;
    z-index: 100 !important;
}

.sidebar-close-btn:hover {
    color: #1e3a8a !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* 3. Styling for Floating Open Button */
.sidebar-open-btn {
    display: none;
    position: fixed !important;
    top: 150px !important;
    left: 10px !important;
    z-index: 99999 !important;
    background: #1e3a8a !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

.sidebar-open-btn:hover {
    background: #2563eb !important;
}

/* 4. Sidebar Closed State Handling */
body.sidebar-closed .t4-sidebar-l,
body.sidebar-closed .sidebar-l,
body.sidebar-closed .sidebar-1,
body.sidebar-closed div[class*="sidebar-"] {
    display: none !important;
}

body.sidebar-closed .sidebar-open-btn {
    display: block !important;
}

/* 5. Flex Grid Expansion to 100% Full Width on Close */
body.sidebar-closed .t4-main-body .t4-row,
body.sidebar-closed .t4-section-inner .row,
body.sidebar-closed .t4-main-body .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.sidebar-closed .t4-main-body .t4-col-md,
body.sidebar-closed .t4-main-body div[class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 6. Force TinyMCE Container & Iframe Display Layout */
html body .js-editor-tinymce div.tox[role="application"],
html body .js-editor-tinymce .tox-tinymce,
html body div.tox-tinymce,
html body .tox-editor-container,
html body .tox-sidebar-wrap,
html body .tox-edit-area,
html body .tox-edit-area__iframe,
html body iframe[id*="jform_articletext"] {
    visibility: visible !important;
    opacity: 1 !important;
}

html body .tox-tinymce {
    min-height: 550px !important;
    height: 550px !important;
}

html body .tox-editor-container,
html body .tox-sidebar-wrap {
    display: flex !important;
    flex-direction: column !important;
    min-height: 480px !important;
    height: 480px !important;
}

html body .tox-edit-area {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 450px !important;
    height: 450px !important;
    overflow: visible !important;
}

html body .tox-edit-area__iframe,
html body iframe[id*="jform_articletext"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 450px !important;
    display: block !important;
}

/* ==========================================================================
   Partners Banners Module (#Mod122) Styling & Responsive Ordering -- wkim, 10/24/2026
   ========================================================================== */

/* 1. Apply Card Container Box Style to #Mod122 (Matching Mod220~Mod226) */
#Mod122.t4-module,
#Mod122 {
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 20px !important;
}

/* 2. Synchronize Partners module title (#Mod122) style with other sidebar modules */
#Mod122.t4-module .module-title,
#Mod122 .module-title,
.t4-sidebar-l #Mod122 .module-title,
div[class*="sidebar"] #Mod122 .module-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: #1e3a8a !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #2563eb !important;
}

#Mod122 .module-title span {
  display: inline-block !important;
  color: inherit !important;
}

/* 3. Adjust Close (X) Button Alignment inside #Mod122 */
#Mod122 .sidebar-close-btn {
  top: 18px !important;
  right: 18px !important;
}

/* Dynamic Dark Theme Support for Partners Title & Module Container */
body.dark-active #Mod122.t4-module,
[data-theme="dark"] #Mod122.t4-module {
  background-color: #1f2937 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

body.dark-active #Mod122 .module-title,
[data-theme="dark"] #Mod122 .module-title {
  color: #60a5fa !important;
  border-bottom-color: #3b82f6 !important;
}

/* 4. Responsive Display & Mobile Order Control */
@media (max-width: 991.98px) {
    /* Restore sidebar container layout for #Mod122 on mobile */
    html body #t4-main-body .t4-row div.t4-col-sidebar-l:has(#Mod122),
    html body #t4-main-body .t4-row div[class*="sidebar-l"]:has(#Mod122),
    body .t4-main-body div.t4-col-sidebar-l:has(#Mod122) {
        display: block !important;
        height: auto !important;
        min-height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;

        /* Force Partners module to render BELOW main content (Featured Articles) on mobile */
        order: 2 !important;
    }

    /* Force main content area to render ABOVE the Partners module on mobile */
    html body #t4-main-body .t4-row > div:not([class*="sidebar"]) {
        order: 1 !important;
    }

    /* Keep standard menu modules hidden on mobile viewports */
    .t4-sidebar-l #Mod220, .t4-sidebar-l #Mod221,
    .t4-sidebar-l #Mod222, .t4-sidebar-l #Mod223,
    .t4-sidebar-l #Mod224, .t4-sidebar-l #Mod225,
    .t4-sidebar-l #Mod226, .t4-sidebar-l .nav,
    .t4-sidebar-l ul.menu {
        display: none !important;
    }

    /* Ensure #Mod122 stays visible on mobile */
    #Mod122.t4-module,
    #Mod122 {
        display: block !important;
    }
}

/* 5. Desktop View Order Reset (PC Screen Alignment) */
@media (min-width: 992px) {
    body .t4-main-body div.t4-col-sidebar-l:has(#Mod122) {
        order: 0 !important; /* Restore default left position on desktop */
    }
}

/* ==========================================================================
   Smart Slider Max Width & Centering Option -- wkim, 10/24/2026
   ========================================================================== */
.n2-ss-slider {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* ==========================================================================
   Section-2 Responsive Stacking & Flex Layout Control -- wkim, 10/25/2026
   ========================================================================== */
/* 1. Laptop/Mobile/Tablet screens (991.98px and below): Switch to single column 
      before the video module gets squeezed too small */
@media (max-width: 991.98px) {
    #t4-section-2 .t4-row {
        flex-direction: column !important;
    }
    #t4-section-2 .t4-row > .t4-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* 2. Desktop screens (992px and above): Restore original flexible 1:1 layout behavior */
@media (min-width: 992px) {
    #t4-section-2 .t4-row {
        flex-direction: row !important;
    }
    #t4-section-2 .t4-row > .t4-col {
        flex: 1 1 0% !important; /* Restores default flexible auto-sizing behavior */
        max-width: 100% !important;
        width: auto !important;
    }
}

/* ==========================================================================
   Partners Banners Module (#Mod122) Styling & Responsive Ordering -- wkim, 10/25/2026
   ========================================================================== */

/* 1. Apply Card Container Box Style to #Mod122 (Standard Light Theme) */
#Mod122.t4-module,
#Mod122 {
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 20px !important;
}

/* 2. Synchronize Partners module title (#Mod122) style with other sidebar modules */
#Mod122.t4-module .module-title,
#Mod122 .module-title,
.t4-sidebar-l #Mod122 .module-title,
div[class*="sidebar"] #Mod122 .module-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: #1e3a8a !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #2563eb !important;
}

#Mod122 .module-title span {
  display: inline-block !important;
  color: inherit !important;
}

/* 3. Adjust Close (X) Button Alignment inside #Mod122 */
#Mod122 .sidebar-close-btn {
  top: 18px !important;
  right: 18px !important;
  color: #888888 !important;
}

/* 4. Banner Grid & Item Separators (Solid White Backdrop for Logo Clarity Always) */
#Mod122 .bannergroup,
#Mod122 .mod-banners {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important; /* Spacing between banner card boxes */
}

#Mod122 .banneritem,
#Mod122 .mod-banners__item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 240px !important;
  height: 80px !important;
  padding: 8px 12px !important;
  
  /* Enforce solid white background for individual logo items across all themes */
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease-in-out !important;
}

/* Hover elevation effect on banner boxes */
#Mod122 .banneritem:hover,
#Mod122 .mod-banners__item:hover {
  background-color: #ffffff !important;
  border-color: #2563eb !important;   /* Accent blue border highlight on hover */
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
}

/* 5. Dynamic Dark Theme Support: Dark outer container + Light inner logo boxes */
body.dark-active #Mod122.t4-module,
[data-theme="dark"] #Mod122.t4-module {
  background-color: #1f2937 !important; /* Dark mode card background */
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

body.dark-active #Mod122 .module-title,
[data-theme="dark"] #Mod122 .module-title {
  color: #60a5fa !important;             /* Light blue title text for dark mode */
  border-bottom-color: #3b82f6 !important;
}

body.dark-active #Mod122 .sidebar-close-btn,
[data-theme="dark"] #Mod122 .sidebar-close-btn {
  color: #9ca3af !important;
}

/* Ensure individual logo boxes keep pure white background & crisp contrast in dark mode */
body.dark-active #Mod122 .banneritem,
body.dark-active #Mod122 .mod-banners__item,
[data-theme="dark"] #Mod122 .banneritem,
[data-theme="dark"] #Mod122 .mod-banners__item {
  background-color: #ffffff !important; /* Solid white background for logos */
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.dark-active #Mod122 .banneritem:hover,
body.dark-active #Mod122 .mod-banners__item:hover,
[data-theme="dark"] #Mod122 .banneritem:hover,
[data-theme="dark"] #Mod122 .mod-banners__item:hover {
  background-color: #ffffff !important;
  border-color: #60a5fa !important;     /* Bright blue border on hover */
  box-shadow: 0 4px 14px rgba(96, 165, 250, 0.3) !important;
}

/* 6. Responsive Display & Mobile Order Control */
@media (max-width: 991.98px) {
    /* Restore sidebar container layout for #Mod122 on mobile */
    html body #t4-main-body .t4-row div.t4-col-sidebar-l:has(#Mod122),
    html body #t4-main-body .t4-row div[class*="sidebar-l"]:has(#Mod122),
    body .t4-main-body div.t4-col-sidebar-l:has(#Mod122) {
        display: block !important;
        height: auto !important;
        min-height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;

        /* Force Partners module to render BELOW main content (Featured Articles) on mobile */
        order: 2 !important;
    }

    /* Force main content area to render ABOVE the Partners module on mobile */
    html body #t4-main-body .t4-row > div:not([class*="sidebar"]) {
        order: 1 !important;
    }

    /* Keep standard menu modules hidden on mobile viewports */
    .t4-sidebar-l #Mod220, .t4-sidebar-l #Mod221,
    .t4-sidebar-l #Mod222, .t4-sidebar-l #Mod223,
    .t4-sidebar-l #Mod224, .t4-sidebar-l #Mod225,
    .t4-sidebar-l #Mod226, .t4-sidebar-l .nav,
    .t4-sidebar-l ul.menu {
        display: none !important;
    }

    /* Ensure #Mod122 stays visible on mobile */
    #Mod122.t4-module,
    #Mod122 {
        display: block !important;
    }
}

/* 7. Desktop View Order Reset (PC Screen Alignment) */
@media (min-width: 992px) {
    body .t4-main-body div.t4-col-sidebar-l:has(#Mod122) {
        order: 0 !important; /* Restore default left position on desktop */
    }
}