/* ZotPortal Styles */
 .acct-info-box.widget > div {
     border-image: linear-gradient(#265698, #0099cc, #00b0ca) 30;
     border-width: 4px;
     border-style: solid;
     padding: 1rem;
}
/* ============================================================
   SEARCH FILTERING UTILITIES (added — required by JS)
   ============================================================ */
/* Single hiding mechanism used by the search for list items,
   portlets, and empty layout wrappers. Replaces inline display styles. */
 .zp-hidden {
     display: none !important;
}
/* Screen-reader-only live region for result announcements */
 .zp-sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
}
/* Full-width wrapper row for the no-results panel.
   Must stay OUTSIDE .zotportal-widget — widgets force text-align: left. */
 .zotportal-no-results-row {
     width: 100%;
}
/* Search Container Enhancements */
 .zotportal-search-container {
     background: linear-gradient(45deg, var(--color-dark-blue) 0%, var(--color-uci-blue) 40%, var(--color-teal-blue) 80%);
     padding: 1.5rem 0;
     border-radius: var(--border-radius);
     box-shadow: none;
     position: relative;
}
 .zotportal-search-wrapper {
     max-width: 800px;
     margin: 0 auto;
     padding: 0 1rem;
}
 .zotportal-search-box {
     position: relative;
     margin-bottom: 1rem;
}
 .zotportal-search-input-wrapper {
     position: relative;
     display: flex;
     align-items: center;
     background: var(--color-gray-100);
     border-radius: var(--border-radius);
     box-shadow: var(--shadow-light);
     overflow: hidden;
     transition: all var(--transition-duration) ease;
}
 .zotportal-search-input-wrapper:focus-within {
     box-shadow: var(--shadow-dark);
     transform: translateY(-1px);
}
 .zotportal-search-input {
     flex: 1;
     padding: 1rem 3rem 1rem 1rem;
     border: none;
     font-size: var(--font-size-base);
     background: transparent;
     color: var(--font-color-dark);
     outline: none;
}
 .zotportal-search-input::placeholder {
     color: var(--color-gray-600);
     font-style: italic;
}
 .zotportal-search-clear {
     position: absolute;
     right: 3rem;
     background: none;
     border: none;
     color: var(--color-gray-600);
     cursor: pointer;
     padding: 0.5rem;
     border-radius: 50%;
     transition: all var(--transition-duration) ease;
     opacity: 0;
     visibility: hidden;
     z-index: 100;
}
 .zotportal-search-clear.visible {
     opacity: 1;
     visibility: visible;
}
 .zotportal-search-clear:hover {
     background: var(--color-gray-200);
     color: var(--color-uci-blue);
}
 .zotportal-search-icon {
     position: absolute;
     right: 1rem;
     color: var(--color-uci-blue);
     font-size: 1.2rem;
}
 .zotportal-search-suggestions {
     border-radius: var(--border-radius);
     padding: 0.75rem;
     background:var(--color-gray-100);
     backdrop-filter: blur(10px);
}
 .zotportal-suggestions-content {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 0.75rem;
}
 .zotportal-suggestions-label {
     color: var(--color-dark-blue);
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 0.5rem;
}
 .zotportal-suggestion-tag {
     background: var(--color-gray-300);
     color: var(--font-color-dark);
     border: none;
     padding: 0.5rem 1rem;
     border-radius: 20px;
     font-size: var(--font-size-sm);
     font-weight: 500;
     cursor: pointer;
     transition: all var(--transition-duration) ease;
     display: flex;
     align-items: center;
     gap: 0.5rem;
}
 .zotportal-suggestion-tag:hover {
     background: var(--color-dark-blue);
     color: var(--font-color-light);
     transform: translateY(-1px);
     box-shadow: var(--shadow-light);
}
/* Widget Styling - Focus on wysiwyg__content and wysiwyg__heading */
 .zotportal-widget .wysiwyg {
     background: #ffffff;
     border-radius: var(--border-radius);
     box-shadow: var(--shadow-light);
     overflow: hidden;
     transition: all var(--transition-duration) ease;
     border: var(--layout-border);
     margin-bottom: 1.5rem;
}
/* Enhanced widget headers */
 .zotportal-widget .wysiwyg__heading, .zotportal-widget .widget__heading {
     background: var(--color-uci-blue);
     color: var(--font-color-light);
     padding: 1.25rem 1.5rem;
     margin: 0;
     font-family: var(--headings-font-family);
     font-weight: var(--headings-font-weight);
     font-size: var(--font-size-h4);
     border-bottom: 3px solid var(--color-uci-gold);
}
/* Heading text wrapper (added by JS) — keeps the +/- button clear of
   highlight operations. Reserves room so long titles don't run under it. */
 .zotportal-widget .zp-heading-text {
     display: inline-block;
     padding-right: 2rem;
}
 .zotportal-widget .wysiwyg__content {
     padding: 1rem;
}
/* Enhanced list styling - Remove bullets and minimal animations */
 .zotportal-widget ul {
     margin: 0;
     padding-left: 0rem;
     list-style: none;
}
 .zotportal-widget li {
     margin-bottom: 0.75rem;
     line-height: 1.5;
     font-size: var(--font-size-sm);
}
/* Accordion Header Styling - Enhanced from existing strong styles */
 .zotportal-widget strong {
     font-weight: 600;
     color: var(--color-uci-blue);
     transition: all var(--transition-duration) ease;
}
 .zotportal-widget strong:hover {
     color: var(--color-dark-blue);
     background: var(--color-gray-200);
     border-radius: var(--border-radius);
}
/* *** UPDATED: Accordion functionality styles - Chevron on RIGHT side *** */
 .accordion-header {
     cursor: pointer;
     user-select: none;
     display: flex !important;
     align-items: center;
     justify-content: space-between;
    /* Push chevron to the right */
     padding: 0.1rem 0;
     color: var(--color-uci-blue);
}
/* *** UPDATED: Chevron Icon Styling - Now on the RIGHT side *** */
 .accordion-chevron {
     margin-left: 0.5rem;
    /* Changed from margin-right */
     color: var(--color-uci-blue);
     font-size: 0.8rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 1rem;
     height: 1rem;
     flex-shrink: 0;
    /* Prevent chevron from shrinking */
}
 .accordion-chevron i {
     transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Accordion Content Styling - ENHANCED WITH SMOOTH ANIMATIONS */
/* CHANGED: added a finite max-height. Without it the transition ran
   between `none` and 0, which cannot animate — sections snapped open
   and shut. Raise this value if any accordion grows taller than it. */
 .accordion-content {
     overflow: hidden;
     max-height: 3000px;
     transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease-out 0.1s, padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     opacity: 1;
     padding-top: 0.75rem;
     padding-bottom: 0rem;
}
 .accordion-content.collapsed {
     max-height: 0 !important;
     opacity: 0;
     padding-top: 0;
     padding-bottom: 0;
     transition: max-height 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 0.2s ease-out, padding 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
/* *** UPDATED: Top Level Links Styling - Icon on right side *** */
 .zotportal-widget .top-level-link {
     margin-bottom: 0.75rem !important;
     line-height: 1.5;
     border-bottom: 1px solid var(--color-gray-300);
     padding-bottom: 0.5rem;
}
 .zotportal-widget .top-level-link:hover {
     border-radius: var(--border-radius);
     margin-left: -0.25rem;
     margin-right: -0.25rem;
     padding-left: 0.25rem;
     padding-right: 0.25rem;
     transition: all var(--transition-duration) ease;
}
 .zotportal-widget .top-level-link:hover a {
     color: var(--color-dark-blue);
}
/* *** Link Help Text Styling *** */
 .zotportal-widget em {
     font-size: var(--font-size-xs);
     font-style: italic;
     display: block;
     margin-top: 0.25rem;
     line-height: 1.3;
     color: var(--color-gray-600);
}
/* Specific spacing for em tags in accordion/nested links - matches top-level gap */
 .zotportal-widget .accordion-content em {
     margin-top: 0.5rem;
     margin-bottom: 0.75rem;
}
/* *** Link styling *** */
 .zotportal-widget a {
     border-bottom: none !important;
}
/* *** NEW: Links inside em tags get underlined instead of icons *** */
 .zotportal-widget em a {
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 2px;
}
 .zotportal-widget em a:hover {
     text-decoration-thickness: 2px;
}
 .fa-rss {
     color:var(--color-uci-gold);
     font-size: 0.75rem;
}
/* *** UPDATED: Hover states for better interactivity *** */
 .zotportal-widget a:hover {
     color: var(--color-dark-blue);
}
/* Prevent text justification issues */
 .zotportal-widget, .zotportal-widget * {
     text-align: left !important;
}
/* Search Results Highlighting - Enhanced */
 .zotportal-search-highlight {
     background: var(--color-uci-gold);
     color: var(--color-dark-blue);
     border-radius: 2px;
     display: inline;
     white-space: nowrap;
     box-decoration-break: clone;
     -webkit-box-decoration-break: clone;
}
/* ADDED: help text is now highlighted too, and those matches are long
   enough that nowrap would push them outside the portlet card. */
 .zotportal-widget em .zotportal-search-highlight {
     white-space: normal;
}
/* No Results Message - Enhanced */
 .zotportal-no-results {
     text-align: center;
     padding: 2rem;
     color: var(--color-gray-600);
     font-style: italic;
     background: var(--color-gray-200);
     border-radius: var(--border-radius);
     margin: 1rem 0;
     border: 1px solid var(--color-gray-300);
     box-shadow: var(--shadow-light);
     font-family: inherit;
     animation: fadeIn 0.3s ease-out;
}
 .zotportal-no-results h3 {
     margin: 0 0 0.5rem 0;
     color: var(--color-gray-700);
     font-size: var(--font-size-h5);
     font-weight: 600;
}
 .zotportal-no-results p {
     margin: 0;
     font-size: var(--font-size-sm);
     color: var(--color-gray-600);
}
 .zotportal-no-results i {
     font-size: 2rem;
     color: var(--color-light-blue);
     margin-bottom: 1rem;
     display: block;
}
/* Responsive Design */
 @media (max-width: 768px) {
    /* NOTE: .zotportal-container is a Bootstrap flex row, not a grid, so the
       old grid-template-columns rule here never applied. Mobile stacking
       already comes from the col-lg-* classes. Rule removed. */
     .zotportal-search-wrapper {
         padding: 0 1rem;
    }
     .zotportal-suggestions-content {
         flex-direction: column;
         align-items: flex-start;
    }
     .zotportal-widget .wysiwyg__heading, .zotportal-widget .widget__heading {
         font-size: var(--font-size-h5);
         padding: 1rem 1.25rem;
    }
     .zotportal-widget .wysiwyg__content {
         padding: 1.25rem;
    }
    /* *** UPDATED: Mobile accordion adjustments - chevron on right *** */
     .accordion-header {
         padding: 0.75rem 0;
         font-size: 0.9rem;
    }
     .accordion-chevron {
         margin-left: 0.25rem;
        /* Changed from margin-right */
         font-size: 0.7rem;
    }
     .zotportal-widget a {
         padding: 0.75rem 0;
         font-size: 0.9rem;
    }
     .zotportal-no-results {
         padding: 1.5rem 1rem;
         margin: 0.5rem 0;
    }
     .zotportal-no-results h3 {
         font-size: var(--font-size-base);
    }
     .zotportal-no-results i {
         font-size: 1.5rem;
    }
}
/* Animation for smooth loading */
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
 .zotportal-widget .wysiwyg {
     animation: fadeIn 0.4s ease-out;
}
/* Expand All Button Styles */
 .expand-all-button {
     position: absolute;
     top: 50%;
     right: 1.5rem;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.3);
     color: var(--font-color-light);
     width: 1.5rem;
     height: 1.5rem;
     border-radius: var(--border-radius);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.875rem;
     font-weight: bold;
     transition: all var(--transition-duration) ease;
     backdrop-filter: blur(10px);
     z-index: 10;
}
 .expand-all-button:hover {
     background: rgba(255, 255, 255, 0.3);
     border-color: rgba(255, 255, 255, 0.5);
     transform: translateY(-50%) scale(1.1);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
 .expand-all-button:active {
     transform: translateY(-50%) scale(0.95);
}
/* ADDED: visible focus ring for keyboard users on the dark blue header */
 .expand-all-button:focus-visible {
     outline: 2px solid var(--color-uci-gold);
     outline-offset: 2px;
}
/* Responsive adjustments for expand button */
 @media (max-width: 768px) {
     .expand-all-button {
         right: 1rem;
         width: 28px;
         height: 28px;
         font-size: 0.75rem;
    }
}
/* Print styles */
 @media print {
     .zotportal-search-container, .zotportal-search-suggestions {
         display: none;
    }
    /* ADDED: print the full portlet contents even if a filter is active,
       and never print the no-results panel. */
     .zp-hidden {
         display: revert !important;
    }
     .zotportal-no-results-row {
         display: none !important;
    }
     .zotportal-widget .wysiwyg {
         box-shadow: none;
         border: var(--layout-border);
         break-inside: avoid;
    }
     .zotportal-widget a::before {
         display: none;
    }
    /* Print accordion styles */
     .accordion-content.collapsed {
         max-height: none !important;
         opacity: 1;
    }
     .accordion-chevron {
         display: none;
    }
     .expand-all-button {
         display: none;
    }
     .zotportal-search-highlight {
         background-color: transparent;
         font-weight: bold;
         text-decoration: underline;
    }
}
/* Enhanced styling for better visual hierarchy */
 .zotportal-widget ul ul {
     margin-left: 0.5rem;
}
 .zotportal-widget > .wysiwyg > .wysiwyg__content > ul > li {
     border-bottom: 1px solid var(--color-gray-300);
     padding-bottom: 0.5rem;
}
 .zotportal-widget > .wysiwyg > .wysiwyg__content > ul > li:last-child {
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
}
/* ADDED: during a search the last VISIBLE item is not :last-child, which
   left a dangling divider under the final result. JS marks it instead. */
 .zotportal-widget > .wysiwyg > .wysiwyg__content > ul > li.zp-last-visible {
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
}
/* Improved spacing for nested content */
 .zotportal-widget ul ul li {
     font-size: var(--font-size-sm);
}
/* Minimal hover effects for better interactivity */
 .zotportal-widget li:hover {
     border-radius: var(--border-radius);
     margin-left: -0.25rem;
     margin-right: -0.25rem;
     padding-left: 0.25rem;
     padding-right: 0.25rem;
     transition: all var(--transition-duration) ease;
}
/* High Contrast Mode Support */
 @media (prefers-contrast: high) {
     .zotportal-search-highlight {
         background-color: #000;
         color: #fff;
         border: 1px solid #fff;
    }
     .accordion-header {
         border: 1px solid currentColor;
         padding: 0.5rem;
    }
     .zotportal-widget a {
         border: 1px solid currentColor;
         padding: 0.5rem;
    }
}
/* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
     .accordion-chevron i, .accordion-content, .zotportal-no-results {
         transition: none;
         animation: none;
    }
    /* ADDED: the portlet card fade-in was still running under this query */
     .zotportal-widget .wysiwyg {
         animation: none;
    }
}
/* Accordion header label wrapper (added by JS).
   Keeps the header to exactly two flex items — label + chevron — so
   highlight spans inside the label never become flex items themselves. */
 .zotportal-widget .zp-accordion-label {
     flex: 1 1 auto;
     min-width: 0;
}
/* Long highlighted matches in a header must be allowed to wrap */
 .zotportal-widget .zp-accordion-label .zotportal-search-highlight {
     white-space: normal;
}
/* An emptied column keeps its grid share on desktop so the surviving
   portlets do not stretch. Only its contents are hidden. */
 .zp-column-empty > .contentRow {
     display: none !important;
}
/* Below the lg breakpoint columns stack full-width, so an empty one
   would leave a vertical gap — hide it outright there. */
 @media (max-width: 991.98px) {
     .zp-column-empty {
         display: none !important;
    }
}