/* =========================================
   GOVSITES UNIFIED CUSTOM.CSS
   =========================================
   Shared stylesheet for GovSites municipal
   Joomla sites (Helix Ultimate + SP Page
   Builder Pro + DJ-MegaMenu).

   SITE: Perth Amboy Free Public Library
   HOMEPAGE STYLE: 5 (Icon Circles + Text Blocks)
   SEARCH BUTTON SHAPE: Flush Left
   PRIMARY COLOR: #324051
   DARKER HOVER: #2a3644

   TABLE OF CONTENTS
   0. Site Color Variables
   1. Menu Styling
   2. SP Page Builder Add-on Styling
      A. Emergency Notices
      B. Homepage Heading
      C. Featured Events Slider
      D. Homepage Quicklinks — Style 5
      E. Quicklink Image Overlays
      F. News & Featured Articles
      G. Department & Board Page Styling
   3. DPCalendar
      A. Calendar Feed Module
      B. Full Calendar Page
      C. Event Series Column
   4. Legal Transparency Compliance
   5. Accessibility (WCAG 2.1)
      A. Focus Visibility
      B. Breadcrumbs & Smart Search
      C. SP Pagebuilder Overrides
      D. Skip to Main Content
      E. Visually Hidden
      F. WCAG 2 Contrast Fix (Select2)
   6. Layout & Global Elements
      A. Buttons
      B. Links
      C. Logo & Search
      D. Misc Global Fixes
      E. Scroll-Up Button
   7. DOCman Overrides
   8. Accessible Tables (Responsive Cards)
   9. Responsive / Media Queries
========================================= */

/* Google Font Import — not used on this site
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
*/


/* ========================================
   0. SITE COLOR VARIABLES
   ========================================
   Update these for each site. Every rule
   below references these variables, so
   changing them here recolors the entire
   stylesheet in one place. See inline
   comments for what each variable targets.
   ======================================== */
:root {
    --primary-color: #324051;     /* nav, buttons, article borders, quicklink inversions, search btn, Select2 chips, scroll-up, dept-board contacts */
    --primary-hover: #2a3644;     /* button hover/focus, scroll-up hover, Style 5 icon hover — should always be darker than primary */
    --secondary-color: #ffffff;   /* quicklink base/hover inversions (Styles 3, 4A, 4B) — set to #ffffff for white, or a brand accent like #f4f3e9 */
    --link-color: #005ea2;        /* global <a> color, breadcrumb links */
    --link-hover: #003366;        /* breadcrumb link hover */
    --dark-bg-link: #FFD500;      /* link hover on dark backgrounds — emergency bar, dept heading, contact blocks */
    --table-header: var(--primary-color); /* responsive card-style table header stripe (Section 8) */
}


/* ========================================
   1. MENU STYLING
   ======================================== */

/* Menu Font / Size */
.main-menu .dj-megamenu > li > a span.name {
    font-size: 1.01rem;
    font-weight: bold;
}

/* Menu item separators */
.main-menu .dj-megamenu > li {
    border-right: 1px solid #ffffff;
    padding-left: 10px;
    padding-right: 10px;
}
.main-menu .dj-megamenu > li:last-child {
    border-right: none;
}

/* Menu dropdown border — uncomment if used
.dj-megamenu > li > div {
    border: 3px solid var(--primary-color) !important;
    border-radius: 4px;
}
*/

/* Menu Styling — mobile, for main menu and department menus */

/* Border radius on the sidebar menu (all views) */
.department-menu .dj-megamenu {
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Make the button expand to fit icon + label */
.department-menu .dj-mobile-open-btn,
.main-menu .dj-mobile-open-btn {
    width: 75% !important;
    height: auto !important;
    min-height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 10px !important;
    white-space: nowrap !important;
    font-size: 16px !important;
    border-radius: 4px !important;
}

/* Label text styling */
.department-menu .dj-mobile-open-label,
.main-menu .dj-mobile-open-label {
    display: inline !important;
    white-space: nowrap !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

/* Let the icon size naturally and center it */
.department-menu .dj-mobile-open-icon,
.main-menu .dj-mobile-open-icon {
    flex-shrink: 0 !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}

/* Scale the Font Awesome hamburger icon to match the text */
.department-menu .dj-mobile-open-icon::before,
.main-menu .dj-mobile-open-icon::before {
    font-size: 20px !important;
    line-height: 1 !important;
}

/* Fix broken/inconsistent underline on hover and focus */
.department-menu .dj-megamenu a:hover,
.department-menu .dj-megamenu a:focus,
.department-menu .dj-megamenu li.active > a,
.department-menu .dj-megamenu li:hover > a,
.main-menu .dj-megamenu a:hover,
.main-menu .dj-megamenu a:focus,
.main-menu .dj-megamenu li.active > a,
.main-menu .dj-megamenu li:hover > a {
    text-decoration: underline !important;
    text-decoration-skip-ink: none !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 1.5px !important;
}

/* Remove all active styling on department menu when a child page is active */
.department-menu .dj-megamenu:has(li:not(:first-child).active) > li:first-child.active > a {
    text-decoration: none !important;
    background-color: transparent !important;
}

/* Keep hover/focus underline on department menu even when another page is active */
.department-menu .dj-megamenu:has(li:not(:first-child).active) > li:first-child.active > a:hover,
.department-menu .dj-megamenu:has(li:not(:first-child).active) > li:first-child.active > a:focus {
    text-decoration: underline !important;
    text-decoration-skip-ink: none !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 1.5px !important;
}

/* DJ-MegaMenu Z-Index — keeps admin menu above page content */
#dj-megamenu463,
#dj-megamenu484sticky,
.admin-menu {
    z-index: 1000;
}

/* Hamburger button top padding for alignment */
.main-menu button.dj-mobile-open-btn.dj-fa-5 {
    margin-top: 5px;
}

/* Hide off-canvas hamburger toggle */
#offcanvas-toggler {
    display: none !important;
}

/* Disable Helix Ultimate's off-canvas drawer entirely.
   Mobile navigation on this site is handled by DJ-MegaMenu's
   accordion mode (#dj-megamenu484mobile), not Helix's off-canvas.
   The drawer and its toggle are already hidden, but its internal
   links (search input, menu items, close button) remained in the
   keyboard tab sequence. This removes the entire subtree from
   the accessibility tree and keyboard navigation. */
.offcanvas-menu,
.offcanvas-overlay {
    display: none !important;
}


/* ========================================
   2. SP PAGE BUILDER ADD-ON STYLING
   ======================================== */

/* -- A. Emergency Notices -- */

/* Remove extra space below scroller */
.articles-emergency .bx-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.articles-emergency .bx-wrapper .bx-controls {
    display: none !important;
}

/* Disable scroller animation entirely (WCAG 2.2.2 — see also JS in footer) */
.articles-emergency .sppb-article-scroller-wrap {
    transform: translate3d(0px, 0px, 0px) !important;
    transition: none !important;
    animation: none !important;
}

/* Hide the Emergency Notices section entirely when there are no notices */
#main-content.sppb-section:has(.sppb-addon-module .alert.alert-warning) {
    display: none;
}

/* === Articles Scroller link card: keyboard-only focus indicator === */

/* Suppress the existing site focus styles for non-keyboard focus
   (mouse clicks, touch). This neutralizes the black/white box-shadow ring
   and the yellow underline that the site's a:focus rule would otherwise apply. */
.sppb-articles-scroller-link:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.sppb-articles-scroller-link:focus:not(:focus-visible) .sppb-addon-articles-scroller-title,
.sppb-articles-scroller-link:focus:not(:focus-visible) .sppb-articles-scroller-introtext {
    color: #fff !important;
    text-decoration: none !important;
}

/* Keyboard-only focus indicator */
.sppb-articles-scroller-link:focus-visible {
    outline: 3px solid #FFD500 !important;
    outline-offset: -3px !important;     /* draws inside the card so it's never clipped */
    box-shadow: none !important;          /* cancels existing inner-shadow ring */
    text-decoration: none !important;
}
.sppb-articles-scroller-link:focus-visible .sppb-addon-articles-scroller-title,
.sppb-articles-scroller-link:focus-visible .sppb-articles-scroller-introtext {
    color: #FFD500 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
}

/* -- B. Homepage Heading --
   Uncomment and adjust for sites with a styled H1 over
   the homepage hero image.

.homepage-heading h1.sppb-addon-title {
    font-family: serif;
    font-weight: medium;
    font-size: 3rem;
    color: #FFFFFF;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*/

/* -- C. Featured Events Slider -- */

.featured-events-slider span.sppb-articles-carousel-meta-date,
span.sppb-articles-carousel-meta-category {
    display: none;
}

/* Slick dots: responsive spacing */
.sppb-articles-carousel-wrap .slick-dots li {
    margin: 0 12px;
}
@media (max-width: 991px) {
    .sppb-articles-carousel-wrap .slick-dots li {
        margin: 0 8px;
    }
}
@media (max-width: 600px) {
    .sppb-articles-carousel-wrap .slick-dots li {
        margin: 0 4px;
    }
}

/* Slick dots: true-circle shape so the focus ring is concentric */
.sppb-articles-carousel-wrap .slick-dots li button {
    position: relative;
    padding: 0;
}
.sppb-articles-carousel-wrap .slick-dots li button::before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.25;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0;
    line-height: 0;
}
.sppb-articles-carousel-wrap .slick-dots li.slick-active button::before {
    opacity: 1;
}

/* Visible, concentric keyboard focus ring */
.sppb-articles-carousel-wrap .slick-dots li button:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
    border-radius: 50%;
}

/* -- D. Homepage Quicklinks --
   =============================================
   >>> HOMEPAGE STYLE 5: Icon Circles + Text Blocks
   Each quicklink column contains a linked SPPB
   icon addon (circle) with a text_block title
   beneath it. Apply class "homepage-quicklink"
   to each quicklink COLUMN in SP Page Builder.

   Icon inline styles (96x96, border-radius 21px,
   bg var(--primary-color), white icon, 36px) are
   set in SPPB. This CSS handles hover, focus,
   and transitions.
   ============================================= */

/* Column — center alignment, pointer cursor */
.homepage-quicklink {
    text-align: center;
    cursor: pointer;
}

/* Icon circle — transition for hover effects */
.homepage-quicklink .sppb-icon {
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Icon circle — hover & focus lift effect */
.homepage-quicklink:hover .sppb-icon,
.homepage-quicklink:focus-within .sppb-icon {
    background-color: var(--primary-hover) !important;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(50, 64, 81, 0.35);
}

/* Title text — base state */
.homepage-quicklink .sppb-addon-text-block .sppb-addon-title {
    text-transform: uppercase;
    font-size: 1.125rem;
    color: #000000;
    text-align: center;
    transition: color 0.3s ease;
}

/* Title text — underline on column hover/focus */
.homepage-quicklink:hover .sppb-addon-text-block .sppb-addon-title,
.homepage-quicklink:focus-within .sppb-addon-text-block .sppb-addon-title {
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    color: var(--primary-color) !important;
}

/* Icon link — keyboard focus ring */
.homepage-quicklink .sppb-addon-icon a:focus-visible .sppb-icon {
    outline: 3px solid #d98211 !important;
    outline-offset: 5px !important;
    border-radius: 21px !important;
}

/* >>> END HOMEPAGE STYLE 5 */

/* =============================================
   The following Homepage Styles are available
   in the unified template but not active on
   this site. See unified source for full CSS.
   — Style 3: Light Base / Dark Hover (rounded)
   — Style 4A: Light Base / Dark Hover (square)
   — Style 4B: Dark Base / Light Hover (rounded)
   ============================================= */


/* -- E. Quicklink Image Overlays -- */

.quicklink-image .overlay-background-style {
    background-color: rgba(0, 0, 0, 0.63) !important;
    transition: background-color 0.3s ease;
}
.quicklink-image:hover .overlay-background-style,
.quicklink-image:focus-within .overlay-background-style {
    background-color: rgba(0, 53, 94, .8) !important;
}
.quicklink-image .sppb-addon-title {
    font-size: 1.5rem !important;
}


/* -- F. News & Featured Articles -- */

/* Article Title Size */
.featured-news .sppb-addon-article h3 a,
.articles-news .sppb-addon-article h3 a {
    font-size: 1.4rem !important;
}

/* Article Layout Wrapper — negative margin pulls title up toward image */
.featured-news .sppb-addon-article-layout,
.articles-news .sppb-addon-article-layout {
    margin-bottom: -18px !important;
}

/* Outer container spacing */
.featured-news .sppb-addon-article-layout,
.articles-news {
    margin-bottom: 30px;
}

/* Meta spacing */
.featured-news .sppb-addon-article-layout,
.articles-news .sppb-article-meta {
    margin-top: -5px;
}

/* Individual Article Container */
.articles-news .sppb-addon-article,
.featured-news .sppb-addon-article {
    border-left: 6px solid var(--primary-color) !important;
    padding-left: 15px !important;
    margin-bottom: 50px !important;
    transition: border-color 0.3s ease;
}

/* Title Alignment */
.featured-news .sppb-addon-article-layout,
.articles-news .sppb-addon-article h3 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 1.2 !important;
}

/* Hover & Focus State */
.featured-news .sppb-addon-article:hover,
.featured-news .sppb-addon-article:focus-within,
.articles-news .sppb-addon-article:hover,
.articles-news .sppb-addon-article:focus-within {
    border-left-color: #0056b3 !important;
}
.featured-news .sppb-addon-article:hover h3 a,
.articles-news .sppb-addon-article:hover h3 a {
    text-decoration: underline !important;
}

/* Hide addon container when no articles are published */
.articles-news .addon-root-articles:has(p.alert.alert-warning),
.featured-news .addon-root-articles:has(p.alert.alert-warning) {
    display: none !important;
}

/* Hide alert warning — global */
p.alert.alert-warning {
    display: none !important;
}

/* Hide tags — global */
.sppb-article-meta .tags {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
}

/* Employment Masonry Layout Style Alignment — moves everything left */
.articles-news .sppb-addon-article-layout-masonry-row {
    margin-left: 0 !important;
    margin-right: 0;
}
.articles-news .sppb-addon-article-layout-masonry-row > [class*="sppb-col"] {
    padding-left: 0;
    padding-right: 0;
}


/* -- G. Department & Board Page Styling -- */

/* Department & Board Heading Section Overlay */
.dept-heading .sppb-section-bg::after,
.dept-heading.sppb-section::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.55) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}
.dept-heading .sppb-row-container,
.dept-heading > .sppb-container {
    position: relative !important;
    z-index: 10 !important;
}

/* Department & Board Heading Text — light text on dark/image backgrounds */
.page-heading .sppb-addon-title,
.page-heading h1 {
    font-size: 3rem !important;
    color: #ffffff;
    font-weight: 500;
}

/* Department & Board Heading Text — dark text on light backgrounds */
.page-heading-dark .sppb-addon-title,
.page-heading-dark h1 {
    font-size: 3rem !important;
    color: #000000;
    font-weight: 500;
}

/* Mobile Responsive Heading Sizes */
@media (max-width: 991px) {
    .page-heading .sppb-addon-title,
    .page-heading h1,
    .page-heading-dark .sppb-addon-title,
    .page-heading-dark h1 {
        font-size: 2.8rem !important;
        line-height: 1.2 !important;
    }
}
@media (max-width: 767px) {
    .page-heading .sppb-addon-title,
    .page-heading h1,
    .page-heading-dark .sppb-addon-title,
    .page-heading-dark h1 {
        font-size: 2.3rem !important;
        line-height: 1.2 !important;
    }
}

/* Department & Board Contacts Text Blocks
   Uncomment for sites using dark contact cards.
.dept-board-contacts.sppb-addon-text-block {
    padding: 20px !important;
    background-color: var(--primary-color) !important;
    border-radius: 14px;
}
.dept-board-contacts.sppb-addon-text-block p,
.dept-board-contacts.sppb-addon-text-block h2 {
    color: #ffffff !important;
}
.dept-board-contacts.sppb-addon-text-block a {
    color: #ffffff !important;
}
*/


/* ========================================
   3. DPCALENDAR
   ======================================== */

/* -- A. Calendar Feed Module -- */

/* Date/time inline when event is cancelled */
.calendar-feed .mod-dpcalendar-upcoming-default__date {
    padding-left: 57px;
    margin-top: -12px;
}

/* Align calendar text with icon */
.calendar-feed .mod-dpcalendar-upcoming-default__information {
    min-height: 3.7em;
    margin-top: -5px;
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: 400;
}

/* -- B. Full Calendar Page -- */

.full-calendar h1,
.full-calendar .page-header h1 {
    text-align: center !important;
}
.full-calendar .dp-calendar .dp-calendar__heading-month,
.full-calendar .dp-calendar .fc-toolbar-title {
    font-weight: bold !important;
}

/* -- C. Event Series Column -- */
/* Shrink the "Next Event in Series" column to prevent overflow */
.com-dpcalendar-event {
    grid-template-columns: 1fr 1fr minmax(0, 300px) !important;
}


/* ========================================
   4. LEGAL TRANSPARENCY COMPLIANCE
   ======================================== */

/* Lock Publishing Date Field & Calendar Button After Article is Live */
.locked-publish-date,
.locked-publish-date + .btn,
.locked-publish-date ~ .btn {
    pointer-events: none !important;
    background-color: #f5f5f5 !important;
    color: #777 !important;
    opacity: 0.8;
    cursor: not-allowed !important;
}


/* ========================================
   5. ACCESSIBILITY (WCAG 2.1)
   ======================================== */

/* -- A. Focus Visibility --
   ----------------------------------------------------------
   RULE ORDER + SPECIFICITY MATTER IN THIS SECTION.
   Helix/Bootstrap ships `.btn:focus { box-shadow: none !important }`
   and `.form-control:focus, select:focus { box-shadow/outline: none !important }`.
   Those use class-level specificity, so our restore rule below must
   (a) come AFTER them in source order AND
   (b) match at class-or-higher specificity (we use .btn, .form-control,
       .gt_selector, plus the search input's id for safety).
   Do not reorder the last "restore" block below.
   ---------------------------------------------------------- */

/* No outline/shadow on click + non-keyboard focus on listing links */
a:active,
button:active,
.sppb-articles-scroller-link:focus:not(:focus-visible),
.sppb-addon-article h3 > a:focus:not(:focus-visible),
.mod_docman a.koowa_header__title_link:focus:not(:focus-visible),
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-selection__rendered:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: #ccc !important;
}

/* Keyboard-only focus ring (two-tone for all backgrounds) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
iframe:focus-visible,
.select2-container--default.select2-container--focus:not(.select2-container--open) .select2-selection--single,
.sppb-reset-button-styles:focus-visible,
.sppb-form-control:focus-visible,
.sppb-page-link:focus-visible,
.sppb-carousel-arrow:focus-visible,
.sppb-instagram-gallery-btn:focus-visible,
.sppb-articles-ticker-left-control:focus-visible,
.sppb-articles-ticker-right-control:focus-visible,
.sppb-carousel-extended-nav-control:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px #000000, 0 0 0 6px #FFFFFF !important;
    border-radius: 4px !important;
    position: relative;   /* makes z-index actually take effect */
    z-index: 10;
}

/* Layout fix: wrapping listing-link titles render as a single rectangle
   instead of fragmenting per line so the halo wraps cleanly */
.sppb-addon-article h3 > a,
.mod_docman a.koowa_header__title_link,
ul.category-module a,
ul.latestnews a,
ul.mod-articles-category a {
    display: inline-block !important;
    padding: 4px 6px !important;
    margin: -4px -6px !important;     /* keeps visual layout identical */
    max-width: 100% !important;
    border-radius: 4px !important;
    position: relative;
}

/* Layout fix: image-wrapping anchors get a tidy box around the image
   (without this, halo draws around the text-baseline strip, not the image) */
a:has(> img),
a:has(> picture) {
    display: inline-block !important;
    line-height: 0 !important;        /* removes descender gap below image */
    font-size: 0 !important;
    border-radius: 4px !important;
}

/* Emergency Notices scroller: inner divs override link color, so recolor
   the visible title and intro text on keyboard focus too */
.sppb-articles-scroller-link:focus-visible .sppb-addon-articles-scroller-title,
.sppb-articles-scroller-link:focus-visible .sppb-articles-scroller-introtext {
    color: #FFD500 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
}

/* Defensive: prevent overflow:hidden ancestors from clipping the halo */
.sp-page-builder .sppb-row-container,
.sp-page-builder .sppb-row,
.sp-page-builder .sppb-column,
.sp-page-builder .sppb-column-addons,
.mod_docman,
.mod_docman ul,
.mod_docman li {
    overflow: visible !important;
}

/* Buttons: use outline (not halo) so it can't be clipped by parents */
.btn:focus-visible,
button.btn:focus-visible,
.sppb-btn:focus-visible,
button.sppb-btn:focus-visible,
a.sppb-btn:focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
    border-radius: 4px;
}

/* Helix focus shadow override (Bootstrap blue ring suppression).
   NOTE: The restore block below must stay AFTER this rule AND must
   match at equal-or-higher specificity to win. */
.form-control:focus,
select:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Restore two-tone halo on controls Helix strips: Bootstrap buttons,
   site search input, and GTranslate selector (.gt_selector — not
   Google's .goog-te-combo). Must stay AFTER the Helix override above;
   selectors are class/id-qualified to beat .btn:focus and select:focus. */
.btn:focus-visible,
button.btn:focus-visible,
input.form-control.js-finder-search-query:focus-visible,
input#mod-finder-searchword452:focus-visible,
select.gt_selector:focus-visible,
select.gt_selector:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px #000000, 0 0 0 6px #FFFFFF !important;
    border-radius: 4px !important;
    position: relative;
    z-index: 10;
}

/* -- B. Breadcrumbs & Smart Search -- */

/* Breadcrumbs — Link */
.mod-breadcrumbs .breadcrumb-item a,
.mod-breadcrumbs .pathway {
    color: var(--link-color) !important;
    text-decoration: underline !important;
    font-weight: 600;
}

/* Breadcrumbs — Hover */
.mod-breadcrumbs .breadcrumb-item a:hover {
    color: var(--link-hover) !important;
    text-decoration: none !important;
}

/* Breadcrumbs — Active Page */
.mod-breadcrumbs .breadcrumb-item [aria-current="page"],
.mod-breadcrumbs .breadcrumb-item.active {
    color: #212121 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Breadcrumbs — Background 
.mod-breadcrumbs {
    background-color: #ffffff;
} */

/* Breadcrumbs — Separator */
.mod-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    color: #454545 !important;
}

/* Smart Search — Placeholder Contrast */
.mod-finder input::placeholder,
.js-finder-search-query::placeholder {
    color: #454545 !important;
    font-weight: bold !important;
    opacity: 1 !important;
}

/* Smart Search — Typed Text */
.js-finder-search-query {
    color: #000000 !important;
    font-weight: 600 !important;
}

/* Smart Search — Keep Input & Button Inline */
.mod-finder__search.input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
}

/* Smart Search — Button Base */
.mod-finder .btn {
    margin-left: 5px !important;
    white-space: nowrap !important;
    background-color: var(--primary-color) !important;
    border: 2px solid #ffffff !important;
}

/* Smart Search — Button Shape: Flush Left */
.mod-finder .btn {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

/* Smart Search — Button Shape: Pill
   Uncomment for pill shape.
.mod-finder .btn {
    border-radius: 30px !important;
}
*/

/* -- C. SP Pagebuilder Overrides -- */

/* Disable SP Page Builder's native focus outline on buttons — keep custom focus ring */
.sppb-btn:focus,
.sppb-btn:focus-visible {
    box-shadow: none !important;
    border-radius: inherit !important;
}

/* -- D. Skip to Main Content -- */

.skip-link {
    position: fixed !important;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    z-index: 10001;
    margin: 0;
    padding: 12px;
    background: #000;
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    white-space: nowrap;
}
.skip-link:focus {
    transform: translateY(0) !important;
    background: #fff !important;
    color: #000 !important;
    border: 3px solid #000 !important;
    position: fixed !important;
}
.skip-link:focus ~ .body-wrapper {
    margin-top: 54px; /* matches skip link height */
}

/* -- E. Visually Hidden (Screen Reader Only) -- */

/* Visually hide elements directly (H1s, labels, etc.)
   AND hide just the title of any SPPB addon flagged with .screen-reader-only */
.visually-hidden,
.screen-reader-only:not(.sppb-addon),
.screen-reader-only.sppb-addon .sppb-addon-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Restore visibility AND default styling for the titles of nested addons
   placed inside a .screen-reader-only wrapper (e.g., text blocks inside a
   screen-reader-only accordion). The wrapper's own title remains hidden. */
.screen-reader-only.sppb-addon .sppb-addon .sppb-addon-title {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  border: 0 !important;
}

/* -- F. WCAG 2 Contrast Fix (Select2 Chips) -- */

/* Chip container: distinguishable background */
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
    background-color: var(--primary-color);
    border-color: var(--primary-hover);
    color: #ffffff;
}

/* Remove button (x): white on dark background */
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff;
    opacity: 1;
}
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #f9e79f;
}

/* "Remove all" x (top-level clear button) */
.select2-container--bootstrap .select2-selection--multiple .select2-selection__clear {
    color: #333333;
}

/* -- F. UserWay button override -- */
#accessibilityWidget {
    background: linear-gradient(145deg, #5db8f0, #3a8fd4);
    border: 3px solid #ffffff;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

#accessibilityWidget .fab.fa-accessible-icon {
    color: #ffffff;
    font-size: 1.6rem;
}

#accessibilityWidget:focus {
    outline: 3px solid #000000;
    outline-offset: 2px;
}



/* ========================================
   6. LAYOUT & GLOBAL ELEMENTS
   ======================================== */

/* -- A. Buttons -- */

/* Bold text on all SPPB buttons */
.sppb-btn {
    font-weight: 700 !important;
}

/* Primary Button Styling */
.btn-primary,
.sppb-btn-primary {
    border-color: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
    font-weight: bold;
}

/* Primary Button — Hover & Focus */
.button .btn-primary:hover,
.sppb-btn-primary:hover,
.btn-primary:focus,
.sppb-btn-primary:focus {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* -- B. Links -- */

/* Global Link Color */
a {
    color: var(--link-color);
}

/* Link Hover & Focus — light backgrounds */
a:hover,
a:focus {
    color: var(--primary-color);
    text-decoration: underline !important;
    text-decoration-color: currentColor;
    text-decoration-thickness: 4px;
    text-underline-offset: 3px;
}

/* Link Hover & Focus — dark backgrounds */
.articles-emergency a:hover,
.articles-emergency a:focus,
.dept-heading a:hover,
.dept-heading a:focus,
.dept-board-contacts a:hover,
.dept-board-contacts a:focus {
    color: var(--dark-bg-link) !important;
}

/* -- C. Logo & Search -- */

/* Logo — force to fill available area */
.logo img,
.logo-image img {
    max-width: 100%;
    max-height: none !important;
    margin-top: 12px!important;
}

#sp-logo {
  padding-left: 0;
}
#sp-logo .logo,
#sp-logo .logo a,
#sp-logo .logo-image {
  margin-left: 0!important;
  padding-left: 0!important;
}

/* Prevent keyboard focus from clipping into Logo & Social Icons in Header */
.logo a,
.sppb-icon a {
    display: inline-block;
}

/* Search area top spacing
.search-area {
    margin-top: 10px;
}
*/

/* -- D. Misc Global Fixes -- */

/* Article area minimum height — prevents menu overlapping short pages */
#sp-main-body {
    min-height: 700px;
}

/* Remove default list-style bullets from module lists */
.sp-module ul > li > a:before {
    display: none;
}

/* Hide Joomla form helper text */
.form-text {
    display: none;
}

/* Google Translate selector spacing */
select.gt_selector.notranslate {
    margin: 10px !important;
    height: auto;
}

/* Prevent Pagination select from being cut off */
.k-ui-namespace .k-pagination select {
    height: 38px !important;
}
select#docman-limit-select-0 {
    height: auto !important;
}

/* -- E. Scroll-Up Button -- */

/* 1. Base State */
.sp-scroll-up {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;

/* Alignment & Depth */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;

/* Use 'bottom' for the lift effect to avoid the Transform Offset bug */
    position: fixed !important;
    bottom: 30px !important;
    transition: background-color 0.25s ease, bottom 0.25s ease, box-shadow 0.25s ease !important;
}

/* Force Icon Visibility */
.sp-scroll-up i,
.sp-scroll-up .fas,
.sp-scroll-up span {
    color: #ffffff !important;
    line-height: 1 !important;
}

/* 2. Hover State — Uses site hover variable */
.sp-scroll-up:hover {
    background-color: var(--primary-hover) !important;
    bottom: 35px !important; /* Moves up 5px without using 'transform' */
    text-decoration: none !important;
}

/* 3. Focus State — Accessibility High-Contrast */
.sp-scroll-up:focus,
.sp-scroll-up:focus-visible {
    background-color: #000000 !important;
    bottom: 35px !important;
    outline: none !important;
    /* Two-tone ring from Section 5.A */
    box-shadow: 0 0 0 3px #000000, 0 0 0 6px #FFFFFF !important;
}

/* -- F. Wider Row Width on Desktop -- */

/* Wider container */
@media (min-width: 1200px) {
    .sppb-container { max-width: 1400px; }
    .sppb-row-container { max-width: 1400px; margin-right: auto; margin-left: auto; }
}
@media (min-width: 1400px) {
    .sppb-container { max-width: 1600px; }
    .sppb-row-container { max-width: 1400px; margin-right: auto; margin-left: auto; }
}


/* ========================================
   7. DOCMAN OVERRIDES
   ======================================== */

/* Overall layout wrapper */
.docman_list_layout--tree {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

/* Sidebar (folder tree) */
.docman_list__sidebar {
    min-width: 220px;
    max-width: 260px;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem 0.5rem;
}
.k-tree ul.jqtree-tree,
.k-tree ul.jqtree_common {
    list-style: none;
    margin: 0;
    padding: 0;
}
.k-tree .jqtree-element {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s;
}
.k-tree .jqtree-element:hover {
    background: #e8edf5;
}
.k-tree li.k-is-active > .jqtree-element {
    background: #dbeafe;
}
.k-tree .jqtree-title {
    font-size: 0.85rem;
    color: #374151;
    line-height: 1.4;
}
.k-tree li.k-is-active > .jqtree-element .jqtree-title {
    font-weight: 600;
    color: #1d4ed8;
}
.k-tree .jqtree-toggler {
    font-size: 0.65rem;
    color: #9ca3af;
    margin-right: 2px;
    text-decoration: none;
}
.k-tree .jqtree-whitespace {
    display: inline-block;
    width: 16px;
}

/* Content area (toolbar + table) */
.docman_list__content {
    flex: 1;
    min-width: 0;
}
.k-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.k-toolbar .btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
}

/* Section header */
.docman_block .koowa_header {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.4rem;
    margin-bottom: 0.75rem;
}

/* Search / filter box */
.k-filters {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.k-checkbox-dropdown-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}
.k-filters .form-control {
    border-radius: 6px;
    border: 1px solid #d1d5db;
    font-size: 0.875rem;
    padding: 0.4rem 0.65rem;
}
.k-filters .btn-primary {
    font-size: 0.82rem;
    padding: 0.35rem 0.9rem;
    border-radius: 6px;
}

/* Reset button contrast — WCAG AA */
.k-filters .k-js-search-reset.btn-link {
    color: #0056b3;
}
.k-filters .k-js-search-reset.btn-link:hover,
.k-filters .k-js-search-reset.btn-link:focus {
    color: #003d80;
    text-decoration: underline;
}

/* Document table */
.koowa_table--documents {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.koowa_table--documents thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    border-bottom: 2px solid #e5e7eb;
    padding: 0.5rem 0.75rem;
    background: none;
}
.koowa_table--documents tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.12s;
}
.koowa_table--documents tbody tr:hover {
    background: #f8faff;
}
.koowa_table--documents tbody td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
}

/* Download button — disabled state */
.k-button-download.disabled,
.k-button-download.k-is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* "Order by" label — align left */
.docman_sorting.form-search {
    text-align: left;
}
.docman_sorting.form-search .control-label {
    display: block;
    margin-bottom: 4px;
}

/* Expired badge contrast — WCAG AA */
.label-expired.badge-info,
.label-expired {
    background-color: #087990 !important;
    color: #ffffff !important;
}

/* Stack sidebar on small screens */
@media (max-width: 768px) {
    .docman_list_layout--tree {
        flex-direction: column;
    }
    .docman_list__sidebar {
        max-width: 100%;
        width: 100%;
    }
}


/* ========================================
   8. ACCESSIBLE TABLES (Responsive Cards)
   ======================================== */

@media screen and (max-width: 768px) {
    .table-responsive table {
        border: 0;
    }
    .table-responsive thead {
        display: none;
    }
    .table-responsive tr {
        display: block;
        margin-bottom: 1.5em;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        border: 1px solid #ddd;
        border-top: 3px solid var(--table-header, #333);
    }
    .table-responsive td {
        display: block;
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }
    .table-responsive td:last-child {
        border-bottom: 0;
    }
    .table-responsive td::before {
        content: attr(data-label);
        display: block;
        font-weight: bold;
        margin-bottom: 0.4em;
        background-color: var(--table-header, #333);
        color: #fff;
        padding: 4px 8px;
        border-radius: 3px;
        margin-left: -15px;
        margin-right: -15px;
        margin-top: -12px;
        padding-left: 15px;
    }
}


/* ========================================
   9. RESPONSIVE / MEDIA QUERIES
   ======================================== */

/* Tablet and below */
@media (max-width: 1024px) {
    input#mod-finder-searchword452 {
        margin-bottom: 8px;
    }
}

/* Tablet */
@media (max-width: 992px) {
    .logo-image-phone {
        height: 70px !important;
    }
}

/* Mobile */
@media (max-width: 900px) {
    .mod-finder .btn {
        margin-left: 3px !important;
        margin-bottom: 6px !important;
        padding: 4px 6px !important;
        font-size: 0.8rem !important;
    }
}