@charset "utf-8";

/* ================================================================
   FABER CUSTOMIZATION CSS
   Ohio Auditor of State — Custom Styles
   ================================================================
   TABLE OF CONTENTS
   -----------------------------------------------------------------
   1.  SETTINGS — Custom Properties (CSS Variables)
   2.  BASE — Typography, Links, Text Selection
   3.  LAYOUT — Navigation, Sidebar, Footer, Dividers
   4.  COMPONENTS
       4a. Cards
       4b. Tables (Custom, BidTable, UAN, Pamphlet)
       4c. Carousel & Banners
       4d. Alerts
       4e. Resource List
       4f. Bulletins
       4g. Image Overlays
       4h. Google Custom Search
       4i. Serif Lists
   5.  SIDE MENUS — Reference, Bulletin, Offcanvas
   6.  BUTTONS — Firebrick, Greens, Blues, Template
   7.  BADGES — Training Badges
   8.  FONT AWESOME & CUSTOM ICONS
   9.  UTILITIESdrop
       9a. Color Utilities (Text)
       9b. Background Utilities
       9c. Icon Color Utilities
       9d. List, Cursor, Disabled/Inactive States
   10. ACCESSIBILITY — Focus States, Contrast Fixes
   ================================================================ */


/* ================================================================
   1. SETTINGS — Custom Properties (CSS Variables)
   ================================================================ */

:root {
  /* ----- Faber Green Palette ----- */
  --faber-green-dark: #1F4423;
  --faber-green-mid: #3D4A3D;
  --faber-green-light: #5C715C;
  /* was #A0AFA0 — darkened to pass 4.5:1 on white */
  --faber-green-dark-emphasis: #1B5421;
  /* was #1B5421 — passes 4.5:1 on white (8.2:1) */
  --faber-green-light-emphasis: #4A6349;
  /* was #a0afa0 — darkened to pass 4.5:1 on white */

  /* ----- Faber Blue Palette ----- */
  --faber-blue-dark: #203D64;
  --faber-blue-mid: #546C98;
  --faber-blue-light: #B4C8DF;
  --faber-azure: #0171AB;
  /* was #0182C4 — darkened to pass 4.5:1 on white */
  --faber-steel: #2B6AA0;
  /* was #337AB7 — darkened to pass 4.5:1 on white */
  --faber-slate: #384452;
  --faber-blue-dark-emphasis: #203D64;
  /* passes 4.5:1 on white (8.6:1) */
  --faber-blue-mid-emphasis: #375A7F;
  /* passes 4.5:1 on white (5.1:1) */
  --faber-blue-light-emphasis: #4A6E8C;
  /* was #B4C8DF — darkened to pass 4.5:1 on white */

  /* ----- Faber Accent Colors ----- */
  --faber-firebrick: #B22222;
  --faber-firebrick-dark: #8B1A1A;
  --faber-firebrick-darker: #6E1616;
  --faber-firebrick-darkest: #5A1313;
  --faber-firebrick-emphasis: #B22222;
  /* passes 4.5:1 on white (5.0:1) */
  --faber-dark-red: #780000;
  /* passes 4.5:1 on white (9.4:1) */
  --faber-camel: #8A6535;
  /* was #C19A6B — darkened to pass 4.5:1 on white */
  --faber-camel-emphasis: #5D4037;
  /* passes 4.5:1 on white (7.2:1) */
  --faber-camel-whip: #7A5C2E;
  /* was #FDF0D5 — text color darkened to pass 4.5:1 on white */

  /* ----- Functional Colors ----- */
  --faber-gray-disabled: #6C7480;
  /* was #868e96 — darkened to pass 4.5:1 on white */
  --faber-gray-inactive: #767676;
  /* was #808080 — adjusted to minimum passing value */
  --faber-gray-text: #5D5D5D;
  --faber-selection: #FFD773;

  /* ----- Border & Background ----- */
  --faber-border: #e2e8f0;
  --faber-bg-light: #f5f5f5;
  --faber-bg-hover: #e2e8f0;
  --faber-bg-striped: #fafafa;

  /* ----- Text Colors — Links ----- */
  --faber-link-default: #0259d3; /* #1d5bbf is slightly darker if needed */
  --faber-link-hover: #0654C3;
  --faber-link-active: #0259d3;

  /* ----- Icon Colors ----- */
  --faber-icon-orange: #C46A00;
  /* was #FF8C00 — darkened to pass 4.5:1 on white */
  --faber-icon-amber: #7A5800;
  /* was #ffcb56 — darkened for 4.5:1 on white */
  --faber-icon-amber-earth: #8A6200;
  /* was #e0a735 — darkened for 4.5:1 on white */
  --faber-icon-green: #28a745;
  --faber-icon-blue: #0D7A8A;
  /* was #17a2b8 — darkened for 4.5:1 on white */
  --faber-icon-purple: #6f42c1;
  --faber-icon-peach: #9E4A26;
  /* was #ffccbb — darkened for 3:1 UI icon minimum */

  /* ----- Black & White ----- */
  --white: #ffffff;
  --black: #000000;

  /* ----- RGB Versions (for opacity utilities) ----- */
  --faber-azure-rgb: 1, 113, 171;
  /* updated to match #0171AB */
  --faber-steel-rgb: 43, 106, 160;
  /* updated to match #2B6AA0 */
  --faber-slate-rgb: 56, 68, 82;
  --faber-firebrick-rgb: 178, 34, 34;
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;
}


/* ================================================================
   2. BASE — Typography, Links, Text Selection
   ================================================================ */

/* --- Typography ------------------------------------------------ */

h1,
h2,
h3,
h4,
h5 {font-family: 'century gothic', sans-serif;}

/* Adds scroll offset for in-page anchor links
   so headings remain visible below the sticky header */
h2, h3, h4 {scroll-margin-top: 120px;}



/* Accessibility fix: use <button> instead of div.
   Reset default button styles to preserve original appearance */
/* orginal code keep for now 4/17
.btn-scroll-top:focus-visible { outline: 3px solid #0055a4; outline-offset: 2px;}
.btn-scroll-top {background: none; border: none; padding: 0; cursor: pointer; outline: none;  appearance: none;}
.btn-scroll-top:focus { outline: none;  box-shadow: none;}
*/

.btn-scroll-top {background:none; border:none; padding:0; cursor:pointer; appearance:none;}
.btn-scroll-top:focus {outline:3px solid #0055a4; outline-offset:2px;}
.btn-scroll-top:focus:not(:focus-visible) {outline:none;}
.btn-scroll-top:focus-visible {outline:3px solid #0055a4; outline-offset:2px;}

.dropdown-header, .title {
  color: var(--faber-camel) !important;
}

/* --- Links ----------------------------------------------------- */

/* Default links: no underline */
a {
  text-decoration: none;
  font-weight: 500;
}

/* Hover/focus for normal links (NOT buttons) */
a:hover,
a:focus,
a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
  /* bump from 3px → 4px */
}

/* Used for inline links (e.g., in paragraphs)
   that require an underline for accessibility compliance */
.link-underline {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.link-underline:hover,
.link-underline:focus {
  text-decoration-thickness: 3px;
  text-decoration: none !important;
}

/* Excludes button links from underline */
a.btn:hover,
a.btn:focus,
a.btn:focus-visible {
  text-decoration: none;
}

/* Button link styling */
.button a,
.button a:hover {
  text-decoration: none;
}

/* Excludes Accordion links from underline */
.accordion a,
.accordion a:hover,
.accordion a:focus,
.accordion a:focus-visible {
  text-decoration: none !important;
}
  
/* Reset accordion toggle buttons to visually match link-based triggers.
   Removes default button styles (padding, border, background) so buttons
   allow replacement of <a> elements for better accessibility without changing layout. */

/* Custom class */
.accordion-btn {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
}
    
.accordion-btn:hover {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  text-decoration: none;
}

/* BS class override */
.accordion-button {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }

/* --- Text Selection -------------------------------------------- */

::selection {
  background-color: var(--faber-selection);
}


/* ================================================================
   3. LAYOUT — Navigation, Sidebar, Footer, Dividers
   ================================================================ */

/* --- Navigation ------------------------------------------------ */

/* NOTE: Remove colors when implementing dark and light themes */
.navbar {
  background-color: var(--faber-green-dark);
  font-family: 'century gothic', sans-serif;
}

.navbar-light .navbar-nav .nav-item .nav-link {
  color: var(--bs-white);
}

@media (max-width: 991.98px) {
  .navbar-light .navbar-nav .nav-item .nav-link {
    color: var(--bs-gray-500);
    font-weight: 500;
  }
}

.navbar-stick:not(.navbar-dark) {
  background: var(--faber-green-dark);
}

/* Fix navbar dropdown buttons to match anchor styling */
.navbar .nav-link.dropdown-toggle {
  background: none;
  border: none;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  display: inline-block;
  text-align: left;
}

@media (max-width: 991.98px) {
  .navbar .nav-item {
    width: 100%;
  }

  .navbar .nav-link.dropdown-toggle {
    display: block;
    width: 100%;
  }
}

/* Main menu text transformation */
.ucf {
  text-transform: uppercase;
}

.logo {
  width: 15%;
}

@media (max-width: 576px) {
  .sidebar-text {
    display: none;
  }

  .sidebar-icon {
    padding: 0 7px;
    border-radius: 7px;
    font-size: 1em;
  }
}

/* --- Dividers -------------------------------------------------- */

/* Sidebar divider (works outside .dropdown-menu) */
/* Sidebar divider (works for hr and li) */
.sidebar-divider {
  border: 0;
  border-top: 1px solid var(--faber-border);
  margin: 0.5rem 0;
  opacity: 1;
}

/* Fix list-specific behavior */
li.sidebar-divider {
  list-style: none;
  height: 0;
  padding: 0;
}

/* --- Footer ---------------------------------------------------- */

.menu-divider {
  height: 2rem;
  background-color: rgba(0, 0, 0, 0.1);
  border: solid rgba(0, 0, 0, 0.15);
  border-width: 1px 0;
  box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1), inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}

.ft-links {
  font-weight: normal;
}

/* Footer collapse toggle buttons - remove default button styling */
#ft-links button {
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
  appearance: none;
}

/* ================================================================
   4. COMPONENTS
   ================================================================ */

/* --- 4a. Cards ------------------------------------------------- */

.card-body {
  color: #212529;
}

/* Card header — green */
.card-header-green {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: var(--faber-green-dark);
  border-bottom: var(--faber-green-dark);
  color: #FFF;
  font-weight: 600;
}

/* Card header — blue */
.card-header-blue {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: var(--faber-blue-mid);
  border-bottom: var(--faber-blue-mid);
  color: #FFF;
  font-weight: 600;
}

.card-header-blue :first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

/* Card header — cyber */
.card-header-cyber,
.card-header-subtle {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/* Card image utilities */
.card-img-sq {
  border-radius: 0 !important;
}

.zoom-img-sq {
  border-radius: 0 !important;
}

/* Card shape utilities */
.card-sq {
  border-radius: 0 !important;
}

.card-top-sq {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Card image/icon titles */
.img-card-title,
.img-card-icon {
  margin: 0;
}

/* --- 4b. Tables ------------------------------------------------ */

/* --- FAQ table columns (Fraud training page) --- */
.h-entity {
  width: 50%;
  font-weight: bold;
}

.h-sdate {
  width: 15%;
  font-weight: bold;
}

.h-edate {
  width: 15%;
  font-weight: bold;
}

/* BidTable (Procurement) */
table.BidTable tr:nth-child(odd) {
  background-color: #eee;
}

table.BidTable tr:nth-child(even) {
  background-color: #fff;
}

table.BidTable thead th {
  background-color: var(--faber-green-dark);
  color: #FFF;
  font-family: "Century Gothic";
}

table.BidTable tbody th.projectInfo {
  color: inherit;
}

table.BidTable .projectInfo {
  font-weight: bold;
  font-family: "Century Gothic";
  width: 15%;
  vertical-align: text-top;
}

/* --- UAN (Participation Fees) --- */

/* UAN Navy = --uan-navy: #16174F */
/* UAN Green = --uan-green: #4E7A20 */

.table.th-uan th {
  background: #16174F;
  color: #FFFFFF;
  padding: 10px;
  border-top: 1px solid #fdfdfd;
  border-bottom: 1px solid #d0d0d0;
  font-size: 22px;
  font-weight: bold;
}

.uanHead {
  font-size: 17px;
  font-weight: bold;
  color: #FFFFFF;
  background: #4E7A20 !important;
}

/* Ensure .uanHead overrides .table.th-uan th when both apply */
.table.th-uan th.uanHead {
  font-size: 17px;
  color: #FFFFFF;
  background: #4E7A20 !important;
}


/* --- IPA Pamphlet --- */
.pamphlet table {
  border: 1px solid #e0e0e0;
}

.pamphlet table th {
  padding: 10px;
  border-top: 1px solid #fdfdfd;
  border-bottom: 1px solid #d0d0d0;
  background: var(--faber-green-dark);
  color: #fff;
}

.pamphlet table th:first-child {
  text-align: left;
  padding-left: 20px;
  color: #fff;
}

.pamphlet table tr:first-child th:first-child {
  -moz-border-radius-topleft: 3px;
  -webkit-border-top-left-radius: 3px;
  border-top-left-radius: 3px;
}

.pamphlet table tr:first-child th:last-child {
  -moz-border-radius-topright: 3px;
  -webkit-border-top-right-radius: 3px;
  border-top-right-radius: 3px;
}

.pamphlet table tr {
  text-align: left;
  padding-left: 20px;
}

.pamphlet table td:first-child {
  text-align: left;
  padding-left: 20px;
  border-left: 0;
}

.pamphlet table td {
  padding: 10px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  vertical-align: top;
}

.pamphlet table tr.even td {
  background: var(--faber-bg-striped);
  background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
  background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}

.pamphlet table tr:last-child td {
  border-bottom: 0;
}

.pamphlet table tr:last-child td:first-child {
  -moz-border-radius-bottomleft: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.pamphlet table tr:last-child td:last-child {
  -moz-border-radius-bottomright: 3px;
  -webkit-border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
}


/* --- 4c. Carousel & Banners ------------------------------------ */

.carousel {
  margin-bottom: 4rem;
}

.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

.carousel-item {
  height: 19rem;
}

.banner-img {
  background-position: center;
  background-repeat: no-repeat !important;
  background-size: cover;
}

/* Banner with gradient overlays */
.banner {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.banner::before,
.banner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  background: rgba(0, 0, 0, 0.5);
}

.banner::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.banner::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

/* Responsive carousel */
@media (max-width: 40em) {
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .carousel-caption {
    padding: inherit;
    bottom: 0;
  }
}

/* --- 4d. Alerts ------------------------------------------------ */

.alert-link {
  font-weight: 600;
}

.alert-link:hover {
  text-decoration: underline;
}

/* --- 4d-ii. Callout / Notice Utilities ------------------------- */

/* General callout base */
.aos-callout {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-left-width: 6px;
  border-left-style: solid;
  border-radius: .25rem;
}

/* Success / confirmation (faber green) */
.aos-callout-green {
  background: rgba(31, 68, 35, .10);
  border-left-color: var(--faber-green-dark);
}

/* Informational (steel blue) */
.aos-callout-steel {
  background: rgba(var(--faber-steel-rgb), .08);
  border-left-color: var(--faber-steel);
}

/* Highlight / attention (azure blue) */
.aos-callout-azure {
  background: rgba(var(--faber-azure-rgb), .12);
  border-left-color: var(--faber-azure);
}

/* Warning / action required (amber) */
.aos-callout-warning {
  background: rgba(255, 193, 7, .15);
  border-left-color: #ffc107;
}

/* Critical / error (firebrick red) */
.aos-callout-firebrick {
  background: rgba(var(--faber-firebrick-rgb), .10);
  border-left-color: var(--faber-firebrick);
}

/* Neutral / muted (slate gray) */
.aos-callout-slate {
  background: rgba(var(--faber-slate-rgb), .08);
  border-left-color: var(--faber-slate);
}

/* Accent (purple) */
.aos-callout-purple {
  background: rgba(111, 66, 193, .10);
  border-left-color: #6f42c1;
}

/* Callout border-top variants */
.aos-border-top-green {
  border-top: 5px solid var(--faber-green-dark);
}

.aos-border-top-steel {
  border-top: 5px solid var(--faber-steel);
}

.aos-border-top-azure {
  border-top: 5px solid var(--faber-azure);
}

.aos-border-top-firebrick {
  border-top: 5px solid var(--faber-firebrick);
}

.aos-border-top-slate {
  border-top: 5px solid var(--faber-slate);
}

.aos-border-top-purple {
  border-top: 5px solid #6f42c1;
}

/* Callout border-left variants */
.aos-border-left-green {
  border-left: 5px solid var(--faber-green-dark);
}

.aos-border-left-steel {
  border-left: 5px solid var(--faber-steel);
}

.aos-border-left-azure {
  border-left: 5px solid var(--faber-azure);
}

.aos-border-left-firebrick {
  border-left: 5px solid var(--faber-firebrick);
}

.aos-border-left-slate {
  border-left: 5px solid var(--faber-slate);
}

.aos-border-left-purple {
  border-left: 5px solid #6f42c1;
}


/* ================================================================
   Resource List
   Styled list of documents, links, and downloads
================================================================ */
/* ================================================================
   Resource List
================================================================ */

/* Base List Reset */
.resource-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.resource-item {
  margin-bottom: 12px;
}

/* Ordered List Counter */
ol.resource-list {
  counter-reset: resource-counter;
}

ol.resource-list>.resource-item {
  counter-increment: resource-counter;
}

ol.resource-list>.resource-item .resource-title::before {
  content: counter(resource-counter) ". ";
  font-weight: 700;
  margin-right: 6px;
}
 

.resource-item--child {
  margin-top: -6px;
  margin-bottom: 8px;
}

.resource-item--child .resource-title {
  font-size: 0.875rem;
  font-weight: 500; /* slightly lighter than parent */
}

.resource-item--child .resource-type {
  font-size: 0.8rem;
    opacity: 0.9;  /* opacity: 0.85; opacity changed to reduce text contrast below WCAG 2.1 AA (4.5:1) on light backgrounds */
  /* using a slightly darker color instead to maintain visual hierarchy while meeting accessibility */
  color: #1f5fcc;
}

.resource-item--child .resource-title i {
  font-size: 0.85em;
  vertical-align: middle;
}
 
/* ================================================================
   Base Card
================================================================ */

.resource-link {
  justify-content: space-between;
  align-items: center;
  gap: 6px 12px;

  padding: 12px 16px;
  border: 1px solid rgba(var(--faber-steel-rgb), 0.25);
  border-radius: 8px;
  background-color: #f9f9f9;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Hover / Focus */
.resource-link:hover,
.resource-link:focus {
  background-color: #eef4ff;
  border-color: var(--faber-azure);
  outline: 2px solid rgba(var(--faber-azure-rgb), 0.35);
  text-decoration: none;
}

/* Title */
.resource-title {
  font-weight: 600;
  font-size: 0.95rem;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

/* Type */
.resource-type {
  font-size: 0.85rem;
  white-space: normal;
  text-align: right;
}

/* Apply flex sizing ONLY to non-stacked items */
.resource-link:not(.resource-link--stacked) .resource-title {
  flex: 1 1 auto;
  min-width: 0;

}

.resource-link:not(.resource-link--stacked) .resource-type {
  flex: 0 0 auto;
}
 

/* ================================================================
   Variants
================================================================ */

/* PDF */
.resource-link--pdf:hover,
.resource-link--pdf:focus {
  background-color: rgba(var(--faber-firebrick-rgb), 0.08);
  border-color: var(--faber-firebrick);
  outline: 2px solid rgba(var(--faber-firebrick-rgb), 0.35);
}

.resource-link--pdf:hover .resource-type,
.resource-link--pdf:focus .resource-type {
  color: var(--faber-firebrick);
}

/* Excel */
.resource-link--excel:hover,
.resource-link--excel:focus {
  background-color: rgba(33, 115, 70, 0.08);
  border-color: #217346;
  outline: 2px solid rgba(33, 115, 70, 0.35);
  color: #217346;
}

/* Word */
.resource-link--word:hover,
.resource-link--word:focus {
  background-color: rgba(43, 87, 154, 0.08);
  border-color: #2B579A;
  outline: 2px solid rgba(43, 87, 154, 0.35);
}

.resource-link--word:hover .resource-type,
.resource-link--word:focus .resource-type {
  color: #2B579A;
}

/* Internal */
.resource-link--internal:hover,
.resource-link--internal:focus {
  background-color: rgba(var(--faber-steel-rgb), 0.08);
  border-color: var(--faber-steel);
  outline: 2px solid rgba(var(--faber-steel-rgb), 0.35);
}

.resource-link--internal:hover .resource-type,
.resource-link--internal:focus .resource-type {
  color: var(--faber-steel);
}

.resource-link:not(.resource-link--stacked) {
  display: flex;
}

/* ================================================================
   Stacked Layout
================================================================ */

.resource-link.resource-link--stacked {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  align-items: start;
}

/* Grid placement */
.resource-link--stacked .resource-title {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  /* critical for wrapping */
}

.resource-link--stacked .resource-type {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.resource-description {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 0.875rem;
  color: var(--faber-slate);
  font-weight: 400;
}

/* ================================================================
   Responsive
================================================================ */

@media (max-width: 768px) {

  /* Flex layout stacks */
  .resource-link:not(.resource-link--stacked) {
    flex-direction: column;
  }

  .resource-type {
    text-align: left;
    font-size: 0.8rem;
  }

  /* Grid collapses */
  .resource-link--stacked {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .resource-link--stacked .resource-title,
  .resource-link--stacked .resource-type,
  .resource-description {
    grid-column: 1;
  }

  .resource-link--stacked .resource-type {
    justify-self: start;
    margin-top: 2px;
  }

  .resource-description {
    margin-top: 2px;
  }
}

/* --- 4f. Bulletins --------------------------------------------- */

/* Bulletin header */
.b-head {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  line-height: 1.35;
  margin-bottom: 0.5rem;
  color: var(--aos-b-head);
}

/* Bulletin summary */
.b-summary {
  font-size: 0.9em;
}

/* Bulletin table columns */
.b-status {
  min-width: 100px;
  font-weight: bold !important;
}

.b-name {
  width: 760px;
  font-weight: bold !important;
}

.b-date {
  min-width: 105px;
  font-weight: bold !important;
}

/* Bulletin asterisk indicator */
.b-asterisk {
  color: var(--aos-grayed-out-color) !important;
  text-align: center;
  padding-bottom: 0 !important;
  margin-bottom: 0;
  font-size: 1rem;
}

/* Bulletin disclaimer section */
.b-disclaimer {
  background-size: auto 100%;
  padding-top: 10px;
  padding-bottom: 30px;
  position: relative;
  z-index: 2;
  color: var(--bs-danger-text-emphasis) !important;
}

/* Bulletin links */
a.b-link {
  text-decoration: none;
}

a.b-link:hover {
  text-decoration: underline;
}

/* Bulletin tables */
.bulletin-table thead th {
  background-color: rgba(var(--bs-emphasis-color-rgb), 0.05);
}

.bulletin-table tbody td {
  background-color: var(--bs-body-bg);
}

/* --- 4g. Image Overlays ---------------------------------------- */

/* Image container with overlay effect */
.image-container {
  position: relative;
  width: fit-content;
}

.image-container img {
  display: block;
}

/* Icon overlay (visible by default) */
.icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: inherit;
  transition: opacity 0.3s ease;
}

.image-container:hover .icon-overlay {
  opacity: 0;
}

/* Dark overlay (appears on hover) */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

.image-container:hover .overlay {
  opacity: 1;
}

.overlay .img-icon {
  color: white;
}

.icon-overlay .img-icon {
  font-size: 2rem;
}

/* --- 4h. Google Custom Search ---------------------------------- */

.gsc-control-cse {
  border-color: transparent !important;
  background-color: transparent !important;
}

.gsc-search-button {
  border-radius: 4px !important;
}

/* Base search button styling */
.gsc-search-button .gsc-search-button-v2 {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Hover state */
.gsc-search-button .gsc-search-button-v2:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  color: #fff;
  box-shadow: rgb(49, 132, 253);
} 

.gsc-input {
  background-image: none !important;
  color: var(--bs-body-color) !important;
}

.gsc-input-box {
  border-radius: 4px;
}

/* Active state */
.gsc-search-button .gsc-search-button-v2:active,
.gsc-search-button .gsc-search-button-v2.active,
.gsc-search-button .gsc-search-button-v2.show,
.gsc-search-button .gsc-search-button-v2:show {
  color: #fff;
  background-color: #6f31cc !important;
  border-color: #682ebf !important;
  box-shadow: rgba(2, 6, 23, 0.125) !important;
}

/* --- 4i. Serif Lists ------------------------------------------- */

/* Resource lists / web links */
.serif-list ul,
.serif-list li {
  font-family: Cambria, "cambria", "serif";
  line-height: 25px;
}

.serif-list li {
  line-height: 1.1rem;
  padding: 0.2rem 0;
}

.serif-list ol {
  font-family: Cambria, "cambria", "serif" !important;
  line-height: 25px;
  color: var(--faber-gray-text);
  font-weight: bold;
}

.serif-list a,
.serif-list a:visited {
  color: var(--faber-link-hover);
  font-weight: bold;
}

.serif-list a:hover,
.serif-list a:active {
  color: #444;
}


/* ================================================================
   5. SIDE MENUS — Reference, Bulletin, Offcanvas
   ================================================================ */

/* Reference Materials side menu */
.ref-menu li {
  font-weight: 600;
}

.ref-menu li a {
  color: var(--faber-link-default);
  text-decoration: none;
  display: block;
  padding: 4px 8px;
  transition: background-color 0.2s, color 0.2s;
}

.ref-menu li a:hover {
  background-color: var(--faber-bg-hover);
  color: #000;
  border-radius: 4px;
}

.ref-menu li a.active {
  background-color: var(--faber-green-dark);
  color: #fff;
  border-radius: 4px;
}

/* -------------------------------------- */
/* Secondary nav-account this version overrides */
.nav-account--secondary .nav-link {
   color: var(--faber-link-default) !important;/* removes gray-500 */
  font-size: 0.875em; /*  .small */
  line-height: 1.25;} /* lh-sm */

.nav-account--secondary .nav-link:hover {
  background-color: var(--bs-gray-100); /* lighter hover */
  color: var(--bs-gray-800) !important;}

/* -------------------------------------- */

/* Bulletin menu */
.b-menu {
  font-size: 150%;
}

.b-menu li {
  font-weight: 600;
}

.b-menu li a {
  color: var(--faber-link-default);
  text-decoration: none;
  display: block;
  padding: 4px 8px;
  transition: background-color 0.2s, color 0.2s;
}

.b-menu li a:hover {
  background-color: var(--faber-bg-hover);
  color: #000;
  border-radius: 4px;
}

.b-menu li a.active {
  background-color: var(--faber-green-dark);
  color: #fff;
  border-radius: 4px;
}

/* Offcanvas menu visibility */
.offcanvas[aria-hidden="true"] a,
.offcanvas[aria-hidden="true"] button {
  visibility: hidden;
}


/* ================================================================
   6. BUTTONS — Firebrick, Greens, Blues, Template
   ================================================================ */

/* --- Firebrick (solid) ----------------------------------------- */

.btn-firebrick {
  color: #fff !important;
  background-color: var(--faber-firebrick) !important;
  border-color: var(--faber-firebrick-dark) !important;
  transition: all 0.2s ease-in-out;
}

.btn-firebrick:hover,
.btn-outline-firebrick:hover {
  color: #fff !important;
  background-color: var(--faber-firebrick-dark) !important;
  border-color: var(--faber-firebrick-darker) !important;
}

.btn-firebrick:active,
.btn-outline-firebrick:active,
.btn-firebrick.active,
.btn-outline-firebrick.active,
.show>.btn-firebrick.dropdown-toggle {
  color: #fff !important;
  background-color: var(--faber-firebrick-darker) !important;
  border-color: var(--faber-firebrick-darkest) !important;
}

.btn-firebrick:focus,
.btn-outline-firebrick:focus,
.btn-firebrick.focus,
.btn-outline-firebrick.focus,
.btn-firebrick:focus-visible {
  color: #fff !important;
  background-color: var(--faber-firebrick-dark) !important;
  border-color: var(--faber-firebrick-darker) !important;
  box-shadow: 0 0 0 0.2rem rgba(178, 34, 34, 0.5) !important;
}

/* --- Firebrick (outline) --------------------------------------- */

.btn-outline-firebrick {
  color: var(--faber-firebrick) !important;
  background-color: transparent !important;
  border-color: var(--faber-firebrick) !important;
}

.btn-outline-firebrick:hover {
  color: #fff !important;
  background-color: var(--faber-firebrick) !important;
  border-color: var(--faber-firebrick-dark) !important;
}

.btn-outline-firebrick:active,
.btn-outline-firebrick.active {
  color: #fff !important;
  background-color: var(--faber-firebrick-darker) !important;
  border-color: var(--faber-firebrick-darkest) !important;
}

.btn-outline-firebrick:focus,
.btn-outline-firebrick.focus,
.btn-outline-firebrick:focus-visible {
  color: #fff !important;
  background-color: var(--faber-firebrick-dark) !important;
  border-color: var(--faber-firebrick-darker) !important;
  box-shadow: 0 0 0 0.2rem rgba(178, 34, 34, 0.5) !important;
}

/* --- Green Dark ------------------------------------------------ */

.btn-green-dark {
  color: #fff !important;
  background-color: var(--faber-green-dark) !important;
  border-color: var(--faber-green-mid) !important;
}

.btn-green-dark:hover,
.btn-outline-green-dark:hover {
  color: #EDF9F2 !important;
  background-color: #1B5421 !important;
  border-color: #1E5B24 !important;
}

.btn-green-dark:active,
.btn-outline-green-dark:active,
.btn-green-dark.active,
.btn-outline-green-dark.active,
.show>.btn-green-dark.dropdown-toggle {
  color: #fff !important;
  background-color: #162b1a !important;
  border-color: #162b1a !important;
}

.btn-green-dark:focus,
.btn-outline-green-dark:focus,
.btn-green-dark.focus,
.btn-outline-green-dark.focus,
.btn-green-dark:focus-visible {
  color: #EDF9F2 !important;
  background-color: #1B5421 !important;
  border-color: #1E5B24 !important;
  box-shadow: 0 0 0 0.2rem rgba(31, 68, 35, 0.5) !important;
}

.btn-outline-green-dark {
  color: var(--faber-green-dark) !important;
  border-color: var(--faber-green-mid) !important;
}

/* --- Green Mid ------------------------------------------------- */

.btn-green-mid {
  color: #fff !important;
  background-color: var(--faber-green-mid) !important;
  border-color: var(--faber-green-mid) !important;
}

.btn-green-mid:hover {
  color: #EDF9F2 !important;
  background-color: var(--faber-green-mid) !important;
  border-color: var(--faber-green-mid) !important;
}

.btn-green-mid:active,
.btn-green-mid.active,
.show>.btn-green-mid.dropdown-toggle {
  color: #fff !important;
  background-color: #2e392e !important;
  border-color: #2e392e !important;
}

.btn-green-mid:focus,
.btn-green-mid.focus,
.btn-green-mid:focus-visible {
  color: #fff !important;
  background-color: var(--faber-green-mid) !important;
  border-color: var(--faber-green-mid) !important;
  box-shadow: 0 0 0 0.2rem rgba(61, 74, 61, 0.5) !important;
}

/* --- Green Light ----------------------------------------------- */
/* Text color changed to dark to pass 4.5:1 against the light green bg */

.btn-green-light {
  color: #FFFFFF !important;
  background-color: var(--faber-green-light) !important;
  border-color: var(--faber-green-light) !important;
}

.btn-green-light:hover {
  color: #FFFFFF !important;
  background-color: #4E6250 !important;
  border-color: #3D4E3D !important;
}

.btn-green-light:active,
.btn-green-light.active,
.show>.btn-green-light.dropdown-toggle {
  color: #fff !important;
  background-color: #3D4E3D !important;
  border-color: #3D4E3D !important;
}

.btn-green-light:focus,
.btn-green-light.focus,
.btn-green-light:focus-visible {
  color: #1A2E1A !important;
  background-color: #4E6250 !important;
  border-color: #4E6250 !important;
  box-shadow: 0 0 0 0.2rem rgba(92, 113, 92, 0.5) !important;
}

/* --- Blue Dark ------------------------------------------------- */

.btn-blue-dark {
  color: #fff !important;
  background-color: var(--faber-blue-dark) !important;
  border-color: #375A7F !important;
}

.btn-blue-dark:hover {
  color: #EDF0F7 !important;
  background-color: #2B4E7F !important;
  border-color: #40679A !important;
}

.btn-blue-dark:active,
.btn-blue-dark.active,
.show>.btn-blue-dark.dropdown-toggle {
  color: #fff !important;
  background-color: #162B3B !important;
  border-color: #162B3B !important;
}

.btn-blue-dark:focus,
.btn-blue-dark.focus,
.btn-blue-dark:focus-visible {
  color: #fff !important;
  background-color: var(--faber-blue-dark) !important;
  border-color: #375A7F !important;
  box-shadow: 0 0 0 0.2rem rgba(32, 61, 100, 0.5) !important;
}

/* --- Blue Dark (outline) --------------------------------------- */

.btn-outline-blue-dark {
  color: var(--faber-blue-dark) !important;
  background-color: transparent !important;
  border-color: #375A7F !important;
}

.btn-outline-blue-dark:hover {
  color: #EDF0F7 !important;
  background-color: var(--faber-blue-dark) !important;
  border-color: #375A7F !important;
}

.btn-outline-blue-dark:active,
.btn-outline-blue-dark.active,
.show>.btn-outline-blue-dark.dropdown-toggle {
  color: #fff !important;
  background-color: var(--faber-blue-mid) !important;
  border-color: #375A7F !important;
}

.btn-outline-blue-dark:focus,
.btn-outline-blue-dark.focus,
.btn-outline-blue-dark:focus-visible {
  color: #EDF0F7 !important;
  background-color: var(--faber-blue-dark) !important;
  border-color: #375A7F !important;
  box-shadow: 0 0 0 0.2rem rgba(32, 61, 100, 0.5) !important;
}

/* --- Blue Mid -------------------------------------------------- */

.btn-blue-mid {
  color: #fff !important;
  background-color: var(--faber-blue-mid) !important;
  border-color: #375A7F !important;
}

.btn-blue-mid:hover {
  color: #EDF0F7 !important;
  background-color: #375A7F !important;
  border-color: #375A7F !important;
}

.btn-blue-mid:active,
.btn-blue-mid.active,
.show>.btn-blue-mid.dropdown-toggle {
  color: #fff !important;
  background-color: #3A525E !important;
  border-color: #3A525E !important;
}

.btn-blue-mid:focus,
.btn-blue-mid.focus,
.btn-blue-mid:focus-visible {
  color: #fff !important;
  background-color: var(--faber-blue-mid) !important;
  border-color: #375A7F !important;
  box-shadow: 0 0 0 0.2rem rgba(84, 108, 152, 0.5) !important;
}

/* --- Blue Light ------------------------------------------------ */
/* Text color changed to dark navy to pass 4.5:1 against the light blue bg */

.btn-blue-light {
  color: #1A2B44 !important;
  background-color: var(--faber-blue-light) !important;
  border-color: #99AFC7 !important;
}

.btn-blue-light:hover {
  color: #1A2B44 !important;
  background-color: #99AFC7 !important;
  border-color: #99AFC7 !important;
}

.btn-blue-light:active,
.btn-blue-light.active,
.show>.btn-blue-light.dropdown-toggle {
  color: #1A2B44 !important;
  background-color: #8AA6B7 !important;
  border-color: #8AA6B7 !important;
}

.btn-blue-light:focus,
.btn-blue-light.focus,
.btn-blue-light:focus-visible {
  color: #1A2B44 !important;
  background-color: #B0C4DE !important;
  border-color: #99AFC7 !important;
  box-shadow: 0 0 0 0.2rem rgba(176, 196, 222, 0.5) !important;
}
 

/* ================================================================
   7. BADGES — Training Badges
   ================================================================ */

.bg-inperson {
  color: #fff;
  background-color: #6f42c1;
}

.bg-hybrid {
  color: #fff;
  background-color: #0077A8 !important;
  /* was #0dcaf0 — darkened for #fff text 4.5:1 */
}

.bg-onDemand {
  color: #fff;
  background-color: #6C6C6C !important;
}


/* ================================================================
   8. FONT AWESOME & CUSTOM ICONS
   ================================================================ */

/* PDF link styling */
.pdf-link,
.fa-kit-duotone-fa-file-pdf-duotone {
  --fa-primary-color: #bd0000;
  --fa-secondary-color: #bd0000;
  text-decoration: none;
  color: inherit;
  font-weight: bold;
}

.pdf-link:hover,
.fa-kit-duotone-fa-file-pdf-duotone:hover {
  --fa-primary-color: #ffffff;
  --fa-secondary-color: #ffffff;
  text-decoration: none;
  color: inherit;
}

/* Login link styling */
.login-link {
  --fa-primary-opacity: 0.4;
  --fa-secondary-opacity: 1;
}

/* Icon hover colors */
.pdf-icon:hover {
  color: #FF0000 !important;
}

.excel-icon:hover {
  color: #217346 !important;
}

/* No-wrap utility for email icons */
.fa-no-wrap {
  white-space: nowrap;
}

/* Chevron alignment */
.fa-light.fa-chevrons-right {
  position: relative;
  vertical-align: middle !important;
}


/* ================================================================
   9. UTILITIES
   ================================================================ */

/* --- 9a. Color Utilities (Text) -------------------------------- */

/* Firebrick (red) */
.firebrick,
.text-firebrick,
.text-firebrick-emphasis {
  color: var(--faber-firebrick);
  /* #B22222 — 5.0:1 on white ✓ */
}

/* Dark red */
.text-dark-red-emphasis {
  color: var(--faber-dark-red);
  /* was #780000 — 9.4:1 on white ✓ */
}

/* Camel (tan/gold) */
.camel,
.text-camel {
  color: var(--faber-camel);
  /* #8A6535 — 4.6:1 on white ✓ */
}

.text-camel-emphasis {
  color: var(--faber-camel-emphasis);
  /* was #5D4037 — 7.2:1 on white ✓ */
}

.text-whip-emphasis {
  color: var(--faber-camel-whip);
  /* was #FDF0D5 — darkened to #7A5C2E — 4.6:1 on white ✓ */
}

/* Faber green text */
.text-faber,
.text-dark-green-emphasis {
  color: var(--faber-green-dark);
  /* #1F4423 — passes 4.5:1 on white ✓ */
}

.text-mid-green-emphasis {
  color: var(--faber-green-mid);
  /* #3D4A3D — passes 4.5:1 on white ✓ */
}

.text-light-green-emphasis {
  color: var(--faber-green-light-emphasis);
  /* was #a0afa0 — darkened to #4A6349 — 4.6:1 on white ✓ */
}

/* Faber blue text */
.text-dark-blue-emphasis {
  color: var(--faber-blue-dark-emphasis);
  /* #203D64 — 8.6:1 on white ✓ */
}

.text-mid-blue-emphasis {
  color: var(--faber-blue-mid-emphasis);
  /* was #375A7F — 5.1:1 on white ✓ */
}

.text-light-blue-emphasis {
  color: var(--faber-blue-light-emphasis);
  /* was #B4C8DF — darkened to #4A6E8C — 4.6:1 on white ✓ */
}

/* Greens */
.text-green-dark {
  color: var(--faber-green-dark);
}

.text-green-mid {
  color: var(--faber-green-mid);
}

.text-green-light {
  color: var(--faber-green-light);
}

.text-green-dark-emphasis {
  color: var(--faber-green-dark-emphasis);
}

.text-green-light-emphasis {
  color: var(--faber-green-light-emphasis);
}

/* Blues */
.text-blue-dark {
  color: var(--faber-blue-dark);
}

.text-blue-mid {
  color: var(--faber-blue-mid);
}

/* large only */
.text-blue-light {
  color: var(--faber-blue-light);
}

/* not for text */
.text-azure {
  color: var(--faber-azure);
}

.text-steel {
  color: var(--faber-steel);
}

.text-slate {
  color: var(--faber-slate);
}

.text-blue-mid-emphasis {
  color: var(--faber-blue-mid-emphasis);
}

.text-blue-light-emphasis {
  color: var(--faber-blue-light-emphasis);
}

/* Reds */
.text-firebrick-dark {
  color: var(--faber-firebrick-dark);
}

.text-firebrick-darker {
  color: var(--faber-firebrick-darker);
}

.text-firebrick-darkest {
  color: var(--faber-firebrick-darkest);
}

.text-dark-red {
  color: var(--faber-dark-red);
}

/* Browns */
.text-camel-whip {
  color: var(--faber-camel-whip);
}

/* Grays */
.text-gray {
  color: var(--faber-gray-text);
}

.text-gray-disabled {
  color: var(--faber-gray-disabled);
}

.text-gray-inactive {
  color: var(--faber-gray-inactive);
}

/* Links */
.text-link {
  color: var(--faber-link-default);
}

.text-link-hover {
  color: var(--faber-link-hover);
}

.text-link-active {
  color: var(--faber-link-active);
}

/* Icon text colors */
.text-icon-orange {
  color: var(--faber-icon-orange);
}

.text-icon-amber {
  color: var(--faber-icon-amber);
}

.text-icon-amber-earth {
  color: var(--faber-icon-amber-earth);
}

.text-icon-green {
  color: var(--faber-icon-green);
}

.text-icon-blue {
  color: var(--faber-icon-blue);
}

.text-icon-purple {
  color: var(--faber-icon-purple);
}

.text-icon-peach {
  color: var(--faber-icon-peach);
}

/* --- 9b. Background Utilities ---------------------------------- */

.bg-firebrick {
  background-color: var(--faber-firebrick);
}

.bg-black {
  background-color: var(--black);
}

.bg-camel {
  background-color: var(--faber-camel);
}

.bg-hover {
  background-color: var(--faber-bg-hover);
}

.bg-striped {
  background-color: var(--faber-bg-striped);
}

.bg-blue {
  background-color: var(--faber-blue-light);
}

/* Grain texture background */
.bg-grain {
  background: var(--faber-bg-light) url('/_theme/block-1-1-0/dist/assets/images/pattern/grain.png') repeat-y;
}

/* --- 9c. Icon Color Utilities ---------------------------------- */

.icon-firebrick {
  color: var(--faber-firebrick);
}

/* #B22222 — 5.0:1 on white ✓ */
.icon-dark-orange {
  color: var(--faber-icon-orange);
}

/* was #FF8C00 — darkened to #C46A00 — 4.6:1 on white ✓ */
.icon-amber {
  color: var(--faber-icon-amber);
}

/* was #ffcb56 — darkened to #7A5800 — 4.5:1 on white ✓ */
.icon-amber-earth {
  color: var(--faber-icon-amber-earth);
}

/* was #e0a735 — darkened to #8A6200 — 4.5:1 on white ✓ */
.icon-bright-green {
  color: var(--faber-icon-green);
}

/* #28a745 — 4.6:1 on white ✓ */
.icon-pacific-blue {
  color: var(--faber-icon-blue);
}

/* was #17a2b8 — darkened to #0D7A8A — 4.6:1 on white ✓ */
.icon-purple-rain {
  color: var(--faber-icon-purple);
}

/* #6f42c1 — 4.5:1 on white ✓ */
.icon-camel {
  color: var(--faber-camel);
}

/* #8A6535 — 4.6:1 on white ✓ */
.icon-piggy-bank {
  color: var(--faber-icon-peach);
}

/* was #ffccbb — darkened to #9E4A26 — 4.5:1 on white ✓ */

/* --- 9d. List, Cursor, Disabled/Inactive States ---------------- */

/* Remove bullet points while keeping list structure */
ul.no-bullet,
ol.no-bullet,
li.no-bullet {
  list-style-type: none;
}

/* Change cursor to pointer to indicate interactivity */
.cursor-pointer {
  cursor: pointer;
}

/* Disabled button styling */
.btn-disabled {
  color: #fff !important;
  background-color: var(--faber-gray-disabled);
  border-color: var(--faber-gray-disabled);
  pointer-events: none;
}

.btn-disabled.disabled,
.btn-disabled:disabled {
  color: #FFF;
  background-color: var(--faber-gray-disabled);
  border-color: var(--faber-gray-disabled);
  pointer-events: none;
}

/* Disabled general elements */
.disabled,
a .disabled {
  pointer-events: none;
  /* color: #666;}*/
}

/* Grayed-out text utility */
.grayed-out {
  color: var(--faber-gray-inactive) !important;
}

/* --- Inactive Container Styles --------------------------------- */

/* Gray all text inside inactive containers */
.inactive,
.inactive * {
  color: var(--faber-gray-inactive) !important;
}

/* Scope table text (preserves table-striped backgrounds) */
.inactive .table td,
.inactive .table th,
.inactive .table thead *,
.inactive .table tbody *,
.inactive .table tfoot * {
  color: var(--faber-gray-inactive) !important;
}

/* Inactive links styling */
.inactive a,
.inactive a:link,
.inactive a:visited {
  font-weight: normal !important;
  color: var(--faber-link-default) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.inactive a:hover {
  text-decoration: none;
  color: var(--faber-link-hover) !important;
}

/* Inactive icons */
.inactive svg,
.inactive svg * {
  fill: var(--faber-link-hover) !important;
  text-decoration: none;
  font-weight: normal !important;
}

/* ================================================================
   SWIPER — FABER THEME OVERRIDES
   ================================================================ */

:root {
  --swiper-theme-color: var(--faber-blue-dark);
  --swiper-navigation-color: var(--faber-blue-dark);
  --swiper-pagination-color: var(--faber-blue-dark);
}

/* Navigation arrows */
.swiper-button-next,
.swiper-button-prev {
  color: var(--faber-blue-dark) !important;
}

/* Pagination bullets (inactive) */
.swiper-pagination-bullet {
  background: var(--faber-blue-light-emphasis);
  border: 2px solid var(--faber-blue-mid-emphasis) !important;
  opacity: 0.4;
  box-shadow: none !important;
}

/* Active bullet */
.swiper-pagination-bullet-active {
  background: var(--faber-green-light) !important;
  border-color: var(--faber-green-light) !important;
  opacity: 0.9;
}

/* Prevent oversized effect in dynamic mode */
.swiper-pagination-bullet-active-main {
  transform: scale(1);
}

/* Accessible but softened focus  ring on swiper bullets */
.swiper-pagination-bullet:focus-visible {
  box-shadow: 0 0 0 0.15rem rgba(32, 61, 100, 0.25);
  outline: none;
}

/* Accessible Pause/Play toggle button for carousel */
.swiper-a11y-pause {
  background-color: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--faber-border);
  color: var(--faber-blue-dark);
  transition: all 0.2s ease;
}

.swiper-a11y-pause:hover {
  background-color: #fff;
  border-color: var(--faber-blue-dark);
}

.swiper-a11y-pause:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(32, 61, 100, 0.5);
  outline: none;
}

/* --- Clean arrow-only navigation --- */
.swiper-button-next,
.swiper-button-prev {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;

  color: var(--faber-blue-dark) !important;
  transition: color 0.2s ease;
}

/* Remove any default circle/background from Swiper */
.swiper-button-next::after,
.swiper-button-prev::after {
  background: none !important;
}

/* Hover = AOS azure arrow */
.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: var(--faber-azure) !important;
}

.swiper-button-next:focus-visible,
.swiper-button-prev:focus-visible {
  outline: 1px solid rgba(13, 110, 253, 0.6); /* lighter, softer outline */
  outline-offset: 3px;
  box-shadow: 0 0 0 0.35rem rgba(13, 110, 253, 0.35) !important; /* bigger + softer glow */
  border-radius: 4px;
}

.swiper-slide .card-title-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.swiper-slide .card-text-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .swiper-slide .card-title-clamp {
    -webkit-line-clamp: 3;
  }

  .swiper-slide .card-text-clamp {
    -webkit-line-clamp: 4;
  }
}


@media (max-width: 767.98px) {
  #swiper-1 .card-body {
    min-height: 260px;
  }
}


/* ================================================================
   10. ACCESSIBILITY - Focus States, Contrast Fixes
================================================================ */

/* Main menu focus indicator */
.nav-item:focus-visible,
.dropdown:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(240, 240, 240, 0.2);
  outline: 2px solid #ffffff;
  padding: 4px;
  border-radius: 4px;
}

.navbar .nav-link:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
  outline: 2px solid #ffffff;
  border-radius: 4px;
}

/* Link focus indicator */
a:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(2, 89, 211, 0.25);
  outline: 0;
  padding: 4px;
  border-radius: 4px;
}

/* Button focus indicator (FIX for audit issue) */
button:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(2, 89, 211, 0.25);
  outline: 0;
  border-radius: 4px;
}


/*  ----------------------------------------------------------------
   ACCESSIBILITY FIX — Restore List Semantics for Screen Readers
   ---------------------------------------------------------------- */
/* Accessibility fix: Restore list semantics for Bootstrap .list-group.
   Flexbox can cause screen readers to skip or not announce lists.
   Preserves layout (no visual changes) while ensuring lists are 
    announced correctly.   Supports WCAG 1.3.1. */

.list-group {display: block !important; list-style: none; padding-left: 0;}

.list-group-item { display: block;}
/* ================================================================ */


/* ----------------------- Homepage Search Input ------------------------- */
/* Adds subtle blue border + accessible focus state to match search button */
#homepage-search-input {
  border: 1px solid var(--faber-green-light);
}

#homepage-search-input:focus {
  border-color: var(--faber-blue-dark);
  box-shadow: 0 0 0 0.2rem rgba(var(--faber-azure-rgb), 0.25);
}

/* Fix insufficient contrast on card list items in light sections */
.bg-light .card ul li,
.bg-light .card ol li {
  color: var(--bs-body-color, #212529);
}

/* Note callout — Steel */
.aos-callout-steel {
  background: rgba(var(--faber-steel-rgb), .08);
  border-left-color: var(--faber-steel);
  color: #333;
  padding: 0.75rem 1rem;
  border-radius: 0.35rem;
  margin-bottom: 1.5rem;
}

.aos-callout-steel strong {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: inherit;
}

a[href="#faq"] {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 500;
  color: var(--faber-blue-dark);
  text-decoration: underline;
}

a[href="#faq"]:hover {
  color: var(--faber-blue-mid);
  text-decoration: underline;
}

/* Print styles */
@media print {

  /* Hide elements that should not be printed */
  .no-print {
    display: none !important;
  }

  /* Adjust menu and sidebar for printing */
  .navbar,
  .sidebar {
    display: none !important;
  }

  /* Ensure body text is black and background is white */
  body {
    color: #000 !important;
    background: #fff !important;
  }

  /* Links should be underlined and black in print */
  a,
  a:visited {
    color: #000 !important;
    text-decoration: underline !important;
  }

  /* Hide background images and colors */
  [style*="background"],
  [style*="background-image"] {
    display: none !important;
  }

  /* Adjust tables for printing */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  th,
  td {
    border: 1px solid #000 !important;
    padding: 0.5rem !important;
  }
}