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

/* ==========================================================================
   Sticky Header - Solid Opacity Background (Dynamic Theme Sync) -- 7/8/2026, wkim
   ========================================================================== */
#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 item-117 specific -- 7/12/2026, wkim */
.topbar-r .nav-item.item-117 {
    position: relative !important;
    overflow: visible !important;
}

/* ==========================================================================
   Prevent topbar from pushing down and float completely on top -- 7/11/2026, wkim
   ========================================================================== */
#t4-topbar .item-117 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 -- 7/11/2026, wkim
   ========================================================================== */
#t4-topbar .item-117 ul.dropdown-menu,
#t4-topbar .item-117 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 -- 7/11/2026, wkim
   ========================================================================== */
#t4-topbar .item-117 ul.dropdown-menu.show {
    transform: none !important;   /* Clear JavaScript transform overrides that cause shifting */
}

/* ==========================================================================
   Fix dropdown menu visibility and text contrast in Dark Theme -- 7/12/2026, wkim
   ========================================================================== */
/* Apply clear dark background and high-contrast borders when dark-active is on the body */
body.dark-active #t4-topbar .item-117 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 .item-117 ul.dropdown-menu a,
body.dark-active #t4-topbar .item-117 ul.dropdown-menu .dropdown-item,
body.dark-active #t4-topbar .item-117 ul.dropdown-menu .menu-item-title,
body.dark-active #t4-topbar .item-117 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 .item-117 ul.dropdown-menu a:hover,
body.dark-active #t4-topbar .item-117 ul.dropdown-menu .dropdown-item:hover,
body.dark-active #t4-topbar .item-117 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 -- 7/12/2026, wkim
   ========================================================================== */
/* Keep "My Account" text white even when clicked/focused/opened in dark mode */
body.dark-active #t4-topbar .item-117 a.dropdown-toggle,
body.dark-active #t4-topbar .item-117 a.dropdown-toggle.show,
body.dark-active #t4-topbar .item-117 a.dropdown-toggle:focus,
body.dark-active #t4-topbar .item-117 a.dropdown-toggle:active {
    color: #ffffff !important;
}

/* ==========================================================================
   Rearrange mobile header layout: [Off-Canvas] [Logo] [Blank Space] [Dropdown] -- 7/12/2026, wkim
   ========================================================================== */
@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 -- 7/12/2026, wkim
   ========================================================================== */
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 -- 7/14/2026, wkim
   ========================================================================== */

/* 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 -- 7/15/2026, wkim
   ========================================================================== */

/* --------------------------------------------------------------------------
   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 */
}

/* ==========================================================================
   Fix text-align issues of articles -- 7/15/2026, wkim
   ========================================================================== */

/* 1. Override JA Purity IV's page wrapper to align start (left) */
.item-page.layout-1,
.item-page.no-sidebar {
    text-align: left !important;
}

/* 2. Force the article title, meta info, and body to align left */
.item-page.layout-1 .top-article-info,
.item-page.no-sidebar .top-article-info,
.item-page.layout-1 .entry-header,
.item-page .article-content,
.item-page .article-body {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* 3. Ensure paragraphs and other blocks align left by default */
.item-page .article-body p,
.item-page .article-body div,
.item-page .article-body h1,
.item-page .article-body h2,
.item-page .article-body h3 {
    text-align: left;
}

/* 4. Preserve custom center alignment applied from the editor */
.item-page .article-body [style*="text-align: center"],
.item-page .article-body [style*="text-align:center"] {
    text-align: center !important;
}

/* 5. Preserve custom right alignment applied from the editor */
.item-page .article-body [style*="text-align: right"],
.item-page .article-body [style*="text-align:right"] {
    text-align: right !important;
}

/* ==========================================================================
   Table Layout & Typography Enhancements for Improved Readability -- 7/15/2026, wkim
   ========================================================================== */
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 */
}

/* Enable words to break nicely into new lines in narrow mobile screens */
td, th {
    word-break: break-all !important; /* Prevent text clipping inside small grid cells */
}
/* 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 -- 7/15/2026, wkim
   ========================================================================== */
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 -- 8/8/2026, wkim
   ========================================================================== */

/* 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 -- 8/8/2026, wkim
   ========================================================================== */

.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;
}

/* ==========================================================================
   Responsive Member School Directory Grid Styles -- 8/14/2026, wkim
   ========================================================================== */

/* Grid container for school cards */
.school-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 25px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Individual school card styling */
.school-card {
  border: 1px solid #e1e5eb;
  border-radius: 12px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06);
  border-top: 5px solid #4a154b; /* Accent top border */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

/* Hover effect on card */
.school-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* School title styling */
.school-card .title-ko {
  font-size: 19px;
  font-weight: bold;
  color: #111827;
  margin-bottom: 4px;
}

.school-card .title-en {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* Info field rows (base style) */
.school-card .info-row {
  font-size: 15px;
  margin-bottom: 8px;
  color: #374151;
  line-height: 1.5;
}

/* Info label styling */
.school-card .info-label {
  font-weight: 600;
  color: #4a154b;
  display: inline-block;
  width: 56px;
  margin-right: 5px;
}

/* Address field: Break by word to preserve full words */
.school-card .info-address {
  word-break: normal;
  overflow-wrap: break-word;
}

/* Email & Website fields: Break by character to prevent container overflow */
.school-card .info-link {
  word-break: break-all;
}

/* Link styling */
.school-card a {
  color: #1a0dab;
  text-decoration: none; /* Remove default underline for a cleaner look */
}

/* Link hover effect */
.school-card a:hover {
  color: #4a154b;
  text-decoration: underline; /* Add underline back on hover */
}

/* ==========================================================================
   Year Selector Extension Styles -- 8/15/2026, wkim
   ========================================================================== */

/* Outer wrapper */
.school-directory-wrapper {
  margin: 20px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Year selector dropdown container */
.year-select-container {
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.year-select-label {
  font-weight: bold;
  color: #4a154b;
  font-size: 16px;
}

.year-select-box {
  padding: 8px 16px;
  font-size: 15px;
  border: 2px solid #4a154b;
  border-radius: 6px;
  background-color: #ffffff;
  color: #333333;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

/**
 * ================================================================
 * Component: Custom CSS Overrides
 * Author: wkim
 * Date: 2026-08-16
 * Description: Overrides the default T4 framework max-width (768px)
 *              for single article pages without sidebars. This allows
 *              the grid layout to span 100% width and display 3+ columns.
 * ================================================================
 */

.item-page.no-sidebar .top-article-info,
.item-page.no-sidebar .article-content,
.item-page.layout-default.no-sidebar .top-article-info,
.item-page.layout-default.no-sidebar .article-content {
  max-width: 100% !important;
  width: 100% !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: 20px;
}

.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-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 (Recent News Module #Mod215) Complete Styles -- wkim, 9/10/2026
   Scope: Section 2 Alignment, Card Layout & Full Dynamic Theme Integration
   ========================================================================== */

/* 1. Module Container & Card Surface Base Styling */
#t4-section-2 #Mod215,
#Mod215 {
  padding: 1.5rem !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;
}

/* 2. Heading Container Spacing Adjustment */
#t4-section-2 #Mod215 .section-heading {
  margin-bottom: 24px !important;
  padding-bottom: 0px !important;
}

/* 3. Module Title Header & Inner Span Styling */
#t4-section-2 #Mod215 h3.mod-title,
#t4-section-2 #Mod215 h3.mod-title span,
#t4-section-2 #Mod215 h3,
#t4-section-2 #Mod215 h3 span {
  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: 0 !important;
  padding-bottom: 0 !important;
  word-break: keep-all !important;
  line-height: 1.4 !important;
}

/* 4. Section Content Layout & List Normalization */
#Mod215 .section-ct {
  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;
}

/* 5. Article Title Text Truncation & Link Colors (Light Theme Default) */
#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; /* Visible dark text color for Light Theme */
  text-decoration: none !important;
}

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

/* 6. Article Date Meta Formatting */
#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;
  
  /* Apply tabular numbers so every digit shares the exact same width */
  font-variant-numeric: tabular-nums !important;
  
  /* Fix layout width and align text to the right for clean vertical alignment */
  display: inline-block !important;
  min-width: 65px !important;
  text-align: right !important;
  
  /* Monospace font fallback for consistent spacing across browsers */
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace !important;
}

/* 7. Dark Theme Override Controls (Triggered by body.dark-active) */
body.dark-active #t4-section-2 #Mod215,
body.dark-active #Mod215 {
  background-color: #1f2937 !important; /* Premium dark background surface */
  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; /* Crisp white text color for Dark Theme */
}

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

body.dark-active #Mod215 ul.category-module.mod-list > li.item .item-meta .item-date {
  color: #9ca3af !important; /* Muted light gray for dates in Dark Theme */
}

/* 8. Mobile View Responsiveness Adjustments */
@media (max-width: 767.98px) {
  #t4-section-2 #Mod215,
  #Mod215 {
    padding: 1rem 0.75rem !important; /* Balanced side padding on narrow screens */
  }
}

/* ==========================================================================
   Enhance Section 2 (Recent News) Card Container Style -- wkim, 9/8/2026
   ========================================================================== */

/* Base Card Container Styling */
#t4-section-2 #Mod215 {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  padding: 1.5rem !important;                    /* Default desktop padding */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* --------------------------------------------------------------------------
   Mobile View Style Adjustment (Reduce Side Padding)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #t4-section-2 #Mod215 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 0.75rem !important;            /* Reduced left padding by half */
    padding-right: 0.75rem !important;           /* Reduced right padding by half */
  }

  /* Reset inner margins/paddings for mobile elements to prevent extra spacing */
  #t4-section-2 #Mod215 .module-inner,
  #t4-section-2 #Mod215 ul,
  #t4-section-2 #Mod215 .latestnews {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

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

/* Dark Theme Compatibility */
.color-dark-active #t4-section-2 #Mod215,
[data-theme="dark"] #t4-section-2 #Mod215 {
  background-color: #1f2937 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !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 */
}