/*
 * Office of Fiscal Analysis — Main Stylesheet
 * Connecticut General Assembly
 * Version 2.0 — Bootstrap 5 Responsive / WCAG 2.1 AA
 *
 * Contents:
 *  1.  CSS Custom Properties (variables)
 *  2.  Reset & Base
 *  3.  Accessibility & Focus
 *  4.  Links
 *  5.  Site Wrapper
 *  6.  Header
 *  7.  Navigation Bar (Bootstrap 5)
 *  8.  Breadcrumbs / Sub-page Navbar
 *  9.  Homepage Hero (search banner)
 * 10.  Homepage Navigation Boxes (6-box grid)
 * 11.  Home Content Boxes (Featured / What's New / Misc)
 * 12.  Content Boxes (box, boxBig, boxMedium, boxSmall, boxFull, homeleftbox, homerightbox)
 * 13.  Footer
 * 14.  Tables & DataTables overrides
 * 15.  Expandable Sections
 * 16.  News Ticker
 * 17.  Utility Classes
 * 18.  Title / Outlined Box System (used on sub-pages)
 * 19.  Responsive Breakpoints
 */

/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */
:root {
  /* Nav Bar Toggle */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://w3.org' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

  /* Typography */
  --ofa-font-serif:  "Book Antiqua", Georgia, Century, serif;
  --ofa-font-sans:   Arial, Helvetica, sans-serif;

  /* Brand – Greens */
  --ofa-green-dark:         #2A7032;
  --ofa-green-dark-hover:   #6BAA39;
  --ofa-green-medium:       #6B9567;
  --ofa-green-medium-hover: #BBDCBD;
  --ofa-green-light:        #89c28d;
  --ofa-green-sage:         #A7B2A4;
  --ofa-green-footer:       #A6BAA9;

  /* Brand – Blues */
  --ofa-blue-slate:         #4F72B9;
  --ofa-blue-slate-hover:   #9EB1D6;
  --ofa-blue-light:         #93a8d2;
  --ofa-blue-dark:          #2A4660;
  --ofa-blue-dark-hover:    #8998A8;
  --ofa-blue-link:          #386199;

  /* Brand – Reds / Rusts */
  --ofa-rust:               #c98482;
  --ofa-rust-hover:         #CF908E;
  --ofa-rust-dark:          #AA3838;
  --ofa-rust-featured:      #830300;

  /* Brand – Purple */
  --ofa-purple:             #663399;
  --ofa-purple-hover:       #AB56B1;
  --ofa-purple-light:       #b38cd9;

  /* Accent */
  --ofa-gold:               #F0BF00;

  /* Nav item colors */
  --ofa-nav-1-bg:           #2A7032;
  --ofa-nav-1-hover:        #6BAA39;
  --ofa-nav-2-bg:           #6B9567;
  --ofa-nav-2-hover:        #BBDCBD;
  --ofa-nav-3-bg:           #4F72B9;
  --ofa-nav-3-hover:        #9EB1D6;
  --ofa-nav-4-bg:           #2A4660;
  --ofa-nav-4-hover:        #8998A8;
  --ofa-nav-5-bg:           #cc2900;
  --ofa-nav-5-hover:        #CF908E;
  --ofa-nav-6-bg:           #663399;
  --ofa-nav-6-hover:        #AB56B1;

  /* Neutrals */
  --ofa-white:              #ffffff;
  --ofa-black:              #000000;
  --ofa-gray-light:         #f8f7f3;
  --ofa-gray-input:         #d9d9d9;
  --ofa-gray-border:        #999999;
  --ofa-gray-text:          #30302e;
  --ofa-gray-stripe:        #F4F5E7;

  /* Layout */
  --ofa-site-max-width:     995px;
  --ofa-header-height:      120px;
  --ofa-box-radius:         10px;
}

/* ==========================================================================
   2. Reset & Base
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--ofa-font-serif);
  font-size: 100%;
  line-height: 1.4;
  background-image: url(/basin/img/backgrounds/LargeBlurCapitol_2.png);
  background-repeat: repeat;
  margin: 0;
  padding: 0;
  color: var(--ofa-black);
}

ul, ol, dl {
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   3. Accessibility & Focus (WCAG 2.4.7 – visible focus indicator)
   ========================================================================== */
#main-content-home {
  margin: 0 10px;
}

/* Skip to main content link — visible only on keyboard focus */
.skip-nav {
  position: absolute;
  top: -50px;
  left: 0;
  z-index: 9999;
  background: var(--ofa-blue-dark);
  color: var(--ofa-white);
  padding: 8px 16px;
  font-size: 14px;
  font-family: var(--ofa-font-sans);
  text-decoration: none;
  border-radius: 0 0 4px 0;
  transition: top 0.15s ease;
}
.skip-nav:focus {
  top: 0;
  color: var(--ofa-white);
  text-decoration: underline;
}

/* Provide a visible focus ring for keyboard navigation */
:focus-visible {
  outline: 3px solid var(--ofa-blue-slate);
  outline-offset: 2px;
}

/* ==========================================================================
   4. Links
   ========================================================================== */
a:link    { color: var(--ofa-black); text-decoration: none; }
a:visited { color: var(--ofa-black); text-decoration: none; }
a:hover   { color: var(--ofa-rust-dark); text-decoration: underline; }
a:active  { text-decoration: underline; }
a:focus   { text-decoration: underline; }

a img { border: none; }

.budget-books-list li, .fill-in-list li { padding-bottom: 0; }
.fill-in-list li { 
  list-style-type: disc;
  display: revert;
  padding: 0;
  margin: 0 20px;
}

/* ==========================================================================
   5. Site Wrapper  (replaces old fixed-width .container)
   ========================================================================== */
.ofa-site-wrapper {
  max-width: var(--ofa-site-max-width);
  width: 100%;
  background: var(--ofa-white);
  margin: 0 auto;
  clear: both;
}

/* Prevent Bootstrap's own .container from adding horizontal padding inside our wrapper */
.ofa-site-wrapper > .container,
.ofa-site-wrapper > .container-fluid {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

/* ==========================================================================
   6. Header
   ========================================================================== */
.ofa-header {
  position: relative;
  min-height: var(--ofa-header-height);
  padding: 5px 0 4px;
  overflow: hidden;
}

.ofa-header-logo {
  display: block;
  max-width: 100%;
  height: auto;
}

.ofa-header-contact {
  position: absolute;
  right: 20px;
  bottom: 10%;
  line-height: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.ofa-header-contact img {
  vertical-align: middle;
  margin-bottom: 4px;
}

@media (max-width: 767.98px) {
  .ofa-header-contact {
    position: static;
    text-align: right;
    padding: 4px 8px;
    flex-direction: row;
  }
}



/* ==========================================================================
   7. Navigation Bar  (Bootstrap 5 – replaces STM JavaScript menu)
   ========================================================================== */
.ofa-nav.navbar {
  padding: 0;
  border-radius: 0;
}

/* Toggler button shown on small screens */
.ofa-nav .navbar-toggler {
  width: 100%;
  border-radius: 0;
  background-color: var(--ofa-blue-dark);
  border: none;
  color: var(--ofa-white);
  font-family: var(--ofa-font-serif);
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  padding: 10px 15px;
}

.ofa-nav .navbar-toggler-icon {
  filter: invert(1);
}

/* Nav list */
.ofa-nav .navbar-nav {
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
}

.ofa-nav .nav-item {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: stretch;
  min-height: 55px;
}

.ofa-nav .nav-link {
  font-family: var(--ofa-font-serif);
  font-size: 10pt;
  font-weight: bold;
  color: var(--ofa-white) !important;
  padding: 8px 4px;
  width: 100%;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.ofa-nav .nav-link:focus-visible {
  outline: 3px solid var(--ofa-white);
  outline-offset: -3px;
}

/* Individual nav item background colors — match original stmenu.js */
.ofa-nav-item-1                                { background-color: var(--ofa-nav-1-bg); }
.ofa-nav-item-1 .nav-link:hover,
.ofa-nav-item-1 .nav-link:focus                { background-color: var(--ofa-nav-1-hover); }

.ofa-nav-item-2                                { background-color: var(--ofa-nav-2-bg); }
.ofa-nav-item-2 .nav-link:hover,
.ofa-nav-item-2 .nav-link:focus                { background-color: var(--ofa-nav-2-hover); color: var(--ofa-black) !important; }

.ofa-nav-item-3                                { background-color: var(--ofa-nav-3-bg); }
.ofa-nav-item-3 .nav-link:hover,
.ofa-nav-item-3 .nav-link:focus                { background-color: var(--ofa-nav-3-hover); }

.ofa-nav-item-4                                { background-color: var(--ofa-nav-4-bg); }
.ofa-nav-item-4 .nav-link:hover,
.ofa-nav-item-4 .nav-link:focus                { background-color: var(--ofa-nav-4-hover); }

.ofa-nav-item-5                                { background-color: var(--ofa-nav-5-bg); }
.ofa-nav-item-5 .nav-link:hover,
.ofa-nav-item-5 .nav-link:focus                { background-color: var(--ofa-nav-5-hover); }

.ofa-nav-item-6                                { background-color: var(--ofa-nav-6-bg); }
.ofa-nav-item-6 .nav-link:hover,
.ofa-nav-item-6 .nav-link:focus                { background-color: var(--ofa-nav-6-hover); }

/* ==========================================================================
   8. Breadcrumbs / Sub-page Navbar Section
   ========================================================================== */

/* Breadcrumbs (legacy class alias) */
.breadcrumbs {
  padding: 0 17px;
  color: var(--ofa-white);
  font-size: 12px;
  font-family: var(--ofa-font-serif);
}
.breadcrumb { margin-bottom: 0; }
.breadcrumb-item a, .breadcrumb-item.active, .breadcrumb-item+.breadcrumb-item::before { color: var(--ofa-white); }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumbs a:visited { color: var(--ofa-white); }

/* ==========================================================================
   9. Homepage Hero (search banner)
   ========================================================================== */
.ofa-hero {
  background-image: url(../img/capitol-south.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.ofa-hero-inner {
  padding: 20px;
  text-align: center;
}

.ofa-hero-inner input[type="search"] {
  text-align: center;
  font-size: 18px;
  height: 40px;
  border-radius: 10px;
  background-color: var(--ofa-gray-input);
  border: none;
  padding: 0 12px;
  width: min(400px, 60vw);
  vertical-align: middle;
}

.ofa-hero-inner input[type="submit"] {
  background-color: var(--ofa-gold);
  height: 40px;
  color: #666;
  font-style: italic;
  border-radius: 5px;
  font-size: 15px;
  border: none;
  padding: 0 14px;
  cursor: pointer;
  margin-left: 4px;
  vertical-align: middle;
}

.ofa-hero-inner input[type="submit"]:hover {
  background-color: #d4a900;
}

/* ==========================================================================
   10. Homepage Navigation Boxes  (6-box 3×2 grid)
   ========================================================================== */
.ofa-nav-boxes {
  width: 100%;
  padding: 10px 0px;
}

/* Each column wrapper */
.ofa-nav-boxes .ofa-nav-col {
  padding: 0;
}

/* The colored box — now an <a> for full keyboard/screen-reader access */
.ofa-nav-box {
  display: block;
  width: 100%;
  min-height: 200px;
  padding: 15px 10px 10px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: var(--ofa-white);
  font-family: var(--ofa-font-serif);
  font-size: 20px;
}

.ofa-nav-box:link { color: var(--ofa-white); }
.ofa-nav-box:visited { color: var(--ofa-white); }
.ofa-nav-box:hover   { color: var(--ofa-white); text-decoration: underline; }
.ofa-nav-box:focus-visible {
  outline: 3px solid var(--ofa-white);
  outline-offset: -4px;
}

.ofa-nav-box strong {
  margin-bottom: 2rem;
  display: block;
}

.ofa-nav-box em {
  display: block;
  font-size: 14px;
  margin-top: 10px;
  font-style: italic;
}

/* Box color variants */
.ofa-box-green-dark   { background-color: var(--ofa-green-dark); }
.ofa-box-green-light  { background-color: var(--ofa-green-light);  color: var(--ofa-black); }
.ofa-box-blue-light   { background-color: var(--ofa-blue-light); }
.ofa-box-blue-dark    { background-color: var(--ofa-blue-dark); }
.ofa-box-rust         { background-color: var(--ofa-rust); }
.ofa-box-purple-light { background-color: var(--ofa-purple-light); }

/* ==========================================================================
   11. Home Content Boxes  (Featured Reports / What's New / Misc)
   ========================================================================== */
.home-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  padding: 0;
}

.ofa-home-box {
  font-family: var(--ofa-font-serif);
  font-size: 16px;
  color: var(--ofa-black);
  margin-bottom: 10px;
}

.ofa-home-box h2 {
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
  border-bottom: 6px solid var(--ofa-purple-light);
  padding: 5px 20px 6px;
}

.ofa-home-box-whatsnew {
  grid-row: 1 / span 2;
  grid-column: 2;
}

/* Variant header colors */
.ofa-home-box-featured h2 { background-color: var(--ofa-rust-dark);  border-color: var(--ofa-rust);      color: var(--ofa-white); }
.ofa-home-box-featured h2 a { color: var(--ofa-white); }
.ofa-home-box-whatsnew h2 { background-color: #E0BAB8;               border-color: var(--ofa-rust-dark); color: var(--ofa-black); }
.ofa-home-box-whatsnew h2 a { color: var(--ofa-black); }
.ofa-home-box-misc     h2 { background-color: var(--ofa-green-sage);  border-color: var(--ofa-black);     color: var(--ofa-black); }
.ofa-home-box-misc     h2 a { color: var(--ofa-black); }

.ofa-home-box ul {
  padding: 0 10px 0 4px;
  overflow: hidden;
  line-height: 25px;
  margin-top: 12px;
  margin-left: 15px;
}

.ofa-home-box ul li {
  line-height: 18px;
  margin-bottom: 6px;
  margin-right: 10px;
  margin-left: 14px;
}

@media (max-width: 768px) {
  .home-boxes {
    grid-template-columns: 1fr;
  }
  .ofa-home-box-whatsnew {
    grid-row: unset;
    grid-column: 1;
  }
}

/* ==========================================================================
   12. Content Boxes  (sub-page box system)
   ========================================================================== */

.box img    { float: left; }

.box a:link    { display: block; }
.box a:hover   { color: var(--ofa-rust-dark); display: block; text-decoration: underline; }
.box a:visited { display: block; }

.box a.headline {
  color: var(--ofa-blue-link);
  display: block;
  font-size: 1.3em;
  font-weight: bold;
  padding-top: 6px;
}

/* Shared h1 style inside boxes */
.boxFull h1, .boxBig h1, .boxSmall h1,
.homeleftbox h1, .homerightbox h1 {
  border-bottom: 6px solid #CEB28B;
  margin: 0;
  padding: 2px 20px 6px;
  font-weight: bold;
  font-size: 1.5em;
  color: var(--ofa-gray-text);
}

.boxMedium h1 {
  border-bottom: 6px solid #F00;
  margin: 0;
  padding: 2px 20px 6px;
  font-weight: bold;
  font-size: 1.5em;
  color: var(--ofa-gray-text);
}

.boxSmall h1 {
  font-size: 1.3em;
  padding: 2px 10px 6px;
}

.boxFull {
  width: 965px;
  min-height: 260px;
  padding: 10px 0 6px 10px;
  border: 1px solid var(--ofa-gray-border);
  border-radius: var(--ofa-box-radius);
}

.boxSmall {
  width: 222px;
  padding: 10px 0;
  border: 1px solid var(--ofa-gray-border);
  border-radius: var(--ofa-box-radius);
}

/* Box list & paragraph spacing */
.boxFull p, .boxBig p, .boxMedium p,
.homeleftbox p, .homerightbox p {
  margin-top: 5px;
  margin-right: 20px;
  line-height: 1.2em;
  color: var(--ofa-black);
}

.boxFull ul, .boxBig ul, .boxMedium ul, .boxSmall ul,
.homeleftbox ul, .homerightbox ul {
  padding: 0 10px 0 4px;
  overflow: hidden;
  line-height: 25px;
}

.boxFull ul li, .boxBig ul li, .boxMedium ul li, .boxSmall ul li,
.homeleftbox ul li, .homerightbox ul li {
  line-height: 18px;
  margin-bottom: 6px;
  margin-right: 10px;
  margin-left: 14px;
}

.fedbox {
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
}
/* homeleftbox / homerightbox */
.homeleftbox {
  color: var(--ofa-black);
  font-size: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: var(--ofa-font-serif);
  float: left;
  margin: 0 8px 10px 8px;
  width: 480px;
}

.homerightbox {
  color: var(--ofa-black);
  font-size: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: var(--ofa-font-serif);
  float: right;
  margin: 0 15px 10px 0;
  width: 480px;
}

.budget-title { 
  margin: 1rem 0;
  font-weight: bold;
  font-size: 1.2rem;
}
.budget-development,
.budget-development ul
 {
  list-style-type: none;
  padding: 0 0 0 2rem;
  font-size: 1.1rem;
  font-weight: bold;
}
.budget-development li {
  margin: 1rem 0;
}
.budget-development li a {
  text-decoration: underline;
}
.budgetlinks-footer a {
  color: #2A7032;
  font-size: 1.2rem;
  font-weight: bold;
}

/* ==========================================================================
   13. Footer
   ========================================================================== */
.ofa-footer {
  background-color: var(--ofa-green-footer);
  text-align: center;
  width: 100%;
  font-size: 14px;
  float: left;
  clear: both;
  padding: 15px 10px 10px;
  color: var(--ofa-black);
}

.ofa-footer p {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  color: var(--ofa-black);
  line-height: 1.6;
}

.ofa-footer a {
  color: var(--ofa-rust-featured);
  font-size: 18px;
  text-decoration: none;
}

.ofa-footer a:hover {
  text-decoration: underline;
  color: var(--ofa-rust-featured);
}

.ofa-footer-logos {
  margin-top: 10px;
}

.ofa-footer-logos a {
  display: inline-block;
  margin: 0 8px 5px;
}

.ofa-footer-logos img {
  vertical-align: middle;
  padding-bottom: 5px;
}

/* Legacy class aliases kept for sub-page compatibility */
.footnav {
  background-color: var(--ofa-green-footer);
  text-align: center;
  width: 100%;
  font-size: 14px;
  float: left;
  clear: both;
  padding: 15px 10px 10px;
  color: var(--ofa-black);
}

.footnav a:hover { text-decoration: underline; }

/* ==========================================================================
   14. Tables & DataTables
   ========================================================================== */
.tabledata {
  font-family: var(--ofa-font-serif);
  font-size: 14px;
  background-color: var(--ofa-white);
  color: var(--ofa-black);
}

.sEven {
  background-color: var(--ofa-gray-stripe);
  border-right: thin solid #BBB;
  color: var(--ofa-black);
}

.sOdd {
  background-color: transparent;
  border-right: thin solid #BBB;
  border-bottom: thin solid #BBB;
  border-top: thin solid #BBB;
}

.tdborder { border: thin solid #AAA; }

/* ==========================================================================
   15. Expandable Sections  (.msg_head / .msg_body toggle)
   ========================================================================== */
.expand          { color: #333; text-decoration: none; font-size: 14px; }
.expand a        { color: #333; text-decoration: none; }
.expand a:hover  { color: #730E02; text-decoration: underline; }
.expand a:visited{ color: #333; text-decoration: none; }
.expand ul li    { font-size: 12px; }

/* ==========================================================================
   16. News Ticker
   ========================================================================== */
.newsTicker {
  width: 100%;
  max-width: 860px;
  height: 35px;
  margin: 30px auto;
  background: url(../../img/control-recent-news.jpg) no-repeat;
  font-family: var(--ofa-font-sans);
  color: #003399;
  background-color: var(--ofa-white);
  display: block;
  overflow: hidden;
}

.newsTicker a.tickerButton {
  padding-top: 40px;
  width: 150px;
  float: left;
  overflow: hidden;
}

.newsTicker ul { margin: 0; list-style: none; }

.newsTicker ul li {
  list-style: none;
  float: left;
  width: 665px;
  height: 30px;
  line-height: 37px;
  font-family: var(--ofa-font-sans);
  color: #003399;
  padding-left: 20px;
  overflow: hidden;
}

.newsTicker ul li a {
  color: #003399;
  font-size: 14px;
  font-family: var(--ofa-font-sans);
  text-decoration: none;
}

.newsTicker a:hover { text-decoration: underline; }

/* ==========================================================================
   17. Utility Classes
   ========================================================================== */
.clear       { clear: both; }
.fltrt       { float: right; margin-left: 8px; }
.fltlft      { float: left;  margin-right: 8px; }
.clearfloat  { clear: both; height: 0; font-size: 1px; line-height: 0; }

/* Content area (legacy compatibility) */
.content {
  padding: 10px 0;
  background: var(--ofa-white);
  width: 100%;
}

/* Banner */
.navbar {
  width: 100%;
  padding: 5px 0 0;
  margin-bottom: 22px;
  font-family: var(--ofa-font-serif);
  font-size: 20px;
  color: var(--ofa-white);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.homebanner               { color: var(--ofa-white); background-color: var(--ofa-green-dark); text-align: center; }
.homebanner a             { color: var(--ofa-white); text-decoration: none; }
.homebanner a:hover       { color: #C6D4C8; text-decoration: none; }

/* Three-column nav link style (kept for backward compat with sub-pages) */
.three a:link    { display: block; }
.three a:hover   { color: var(--ofa-white); display: block; text-decoration: underline; }
.three a:visited { color: var(--ofa-white); display: block; }

/* Plain box */
.boxPlain {
  color: var(--ofa-black);
  overflow: visible;
  float: left;
  border: 1px solid #E4E5E6;
  border-bottom-color: #C2C3C4;
  border-top-color: #C2C3C4;
  background-color: var(--ofa-gray-light);
  padding: 10px 6px;
}

/* Border decorations */
.roundBorder  { border: 3px solid var(--ofa-gray-border); padding: 8px;  border-radius: 55px; }
.shadowBorder { border: 5px solid #FF9933; padding: 10px; border-radius: 25px; box-shadow: 5px 5px 10px var(--ofa-gray-border); }
.newBorder    { border: 3px solid var(--ofa-gray-border); padding: 6px;  width: 400px; background-color: #D1DBD2; border-radius: 15px; }

/* Highlighted box */
.highlighted  { background-color: #FFFFEC; border: 1px solid #e8e7c5; padding: .5em; }

/* ==========================================================================
   18. Title / Outlined Box System (sub-pages)
   ========================================================================== */
.titleBox {
  padding: 0;
  margin-bottom: 10px;
  border: 1px solid #E4E5E6;
  border-bottom-color: #C2C3C4;
  border-top-color: #C2C3C4;
  background-color: var(--ofa-gray-light);
  float: left;
  width: 100%;
}

.titleBox ul li, .titleBox ol li {
  margin: 0 0 .5em 0;
  list-style: none;
  line-height: 1.2em;
}

.titleBox h3, .titleBox h4 {
  font-size: .9em;
  font-weight: bold;
  line-height: 1.2em;
}

/* titleBox inside col-b column */
#col-b .titleBox {
  background-image: none;
  background-color: var(--ofa-white);
  border: none;
  padding-bottom: 10px;
}

#col-b .titleBox p, #col-b .titleBox ul li {
  font-family: var(--ofa-font-sans);
  padding: 0 0 10px !important;
  margin: 0 !important;
  line-height: 1.2em !important;
}

/* Boxed content block */
.boxed {
  margin: .5em;
  margin-bottom: 18px;
  border: 1px solid #E4E5E6;
  border-bottom-color: #C2C3C4;
  border-top-color: #C2C3C4;
  border-top-width: 3px;
  background-color: #F9F9F9;
}

.boxed p { margin-top: 0; margin-bottom: .5em; }

#content .boxed { margin: 0 0 1em; padding: .5em; }

/* Sub-boxes */
.titleBox .boxed, #content .titleBox .boxed,
.boxed .boxed,   #content .boxed .boxed {
  margin-bottom: 1em;
  border: 1px solid #E4E5E6;
  border-bottom-color: #C2C3C4;
  border-top-color: #C2C3C4;
  background-color: #F9F9F9;
}

/* Outline */
.outline {
  padding: .5em;
  border: 1px solid #CCCCCC;
  display: inline-block;
}
.outline h2, .outline h3 { margin-top: 0; }

/* Captioned images */
.captioned, .captionBox {
  margin-bottom: 1em;
  border: 1px solid #CCCCCC;
  font-size: .9em;
  padding: .5em;
  background-color: var(--ofa-white);
}
.captionBox ul              { list-style: none; }
.captionBox h3              { margin: .2em 0; font-size: 1em; font-weight: bold; }
.captioned                  { border: none; padding: 0; background: none; }
.captioned img, .captionBox img { display: block; margin-bottom: 0; }
.captioned p, .captionBox p { color: #555; margin: .3em 0 0; line-height: 1.2em; text-align: left; }

/* Thumbnail images with text */
p.thumb              { font-size: .9em; line-height: 1.2em; margin-bottom: 1em; }
p.thumb img          { float: left; margin: .3em .5em 0 0; border: 1px solid var(--ofa-blue-dark); }
p.thumb img.noBorder { border: none; }

/* ==========================================================================
   19. Sub-page Navbar Section Backgrounds
   ========================================================================== */
.ofa-navbar-explore  { background-color: #2a7032; background-image: url(../img/bg/explore.png);      background-repeat: no-repeat; }
.ofa-navbar-archives { background-color: #a8b3a5; background-image: url(../img/bg/archives3.png);    background-repeat: no-repeat; }
.ofa-navbar-about    { background-color: #663399; background-image: url(../img/bg/ofa_about.png);    background-repeat: no-repeat; }
.ofa-navbar-budget   { background-color: #663399; background-image: url(../img/bg/budgetexplore.png);background-repeat: no-repeat; }
.ofa-navbar-docs     { background-color: #cc2900; background-image: url(../img/bg/docsrpts.png);     background-repeat: no-repeat; }
.ofa-navbar-finance  { background-color: #2a4660; background-image: url(../img/bg/locate.png);       background-repeat: no-repeat; }
.ofa-navbar-retrieve { background-color: #4f72b9; background-image: url(../img/bg/retrieve.png);     background-repeat: no-repeat; }
.ofa-navbar-research { background-color: #be664e; background-image: url(../img/bg/research.png);     background-repeat: no-repeat; }
.ofa-navbar-whatsnew { background-color: #aa3838; background-image: url(../img/bg/whatsnew.png);     background-repeat: no-repeat; }

@media (max-width: 767.98px) {
  .ofa-navbar-explore, .ofa-navbar-archives, .ofa-navbar-about, 
  .ofa-navbar-budget, .ofa-navbar-docs, .ofa-navbar-finance, 
  .ofa-navbar-retrieve, .ofa-navbar-research, .ofa-navbar-whatsnew { background-image: none; }
}

.ofa-navbar-inner {
  margin: 0px 10px 0 17px;
}

.ofa-navbar-inner h1 {
  font-size: 2rem;
  font-weight: bold;
}

/* ==========================================================================
   20. Sub-page Content Wrappers
   ========================================================================== */

.ofa-content-page {
  background-color: var(--ofa-white);
  float: left;
}

.ofa-box-body {
  text-align: left;
  margin-top: 12px;
  float: left;
}
.ofa-box-body-450 { width: 450px; }
.ofa-box-body-460 { width: 460px; }
.ofa-box-body-480 { width: 480px; }
.ofa-box-body-900 { width: 900px; }
.ofa-box-body-940 { width: 940px; }
.ofa-box-body-965 { width: 965px; }
.ofa-box-body-full { width: 100%; max-width: 965px; }

/* Budget development page h4 indentation hierarchy */
.ofa-h4-l1 { margin-left: 275px; }
.ofa-h4-l2 { margin-left: 290px; }
.ofa-h4-l3 { margin-left: 315px; }

/* Section heading on annual summary / budget status pages */
.ofa-section-h3 { margin: 20px 50px 10px 0px; }

/* Custom link color used on budget/annual-summary sub-pages */
.ofalink { color: var(--ofa-green-dark) !important; }
.ofalink:hover { color: var(--ofa-green-dark-hover) !important; text-decoration: underline; }

.budgetinfohead h3 {
  font-size: 1.2rem;
  font-weight: bold;
}

.budgetinfohead h4, .budgetinfohead h4 a { 
  font-size: 1.1rem;
  font-weight: bold;
  color: blue;
}

.budgetinfobody h4 {
  margin-bottom: .75rem;
  font-size: 1.3rem;
  font-weight: bold;
}

.budgetinfobody ul {
  list-style-type: none;
  padding: 0 0 .75rem 2rem;
}
.budgetinfobody ul li {
  padding: .25rem 0;
}

/* ==========================================================================
   21. Sub-page Box Heading Color Variants
   ========================================================================== */

/* Color variant classes — only the border-bottom-color changes */
.ofa-heading--blue        { border-bottom-color: #4F72B9 !important; border-color: #4F72B9 !important; }
.ofa-heading--blue-dark   { border-bottom-color: var(--ofa-blue-dark) !important; border-color: var(--ofa-blue-dark) !important; }
.ofa-heading--purple      { border-bottom-color: var(--ofa-purple-hover) !important; border-color: var(--ofa-purple-hover) !important; }
.ofa-heading--purple-dark { border-bottom-color: var(--ofa-purple) !important; border-color: var(--ofa-purple) !important; }
.ofa-heading--green       { border-bottom-color: var(--ofa-green-dark) !important; border-color: var(--ofa-green-dark) !important; }
.ofa-heading--sage        { border-bottom-color: #9CA18C !important; border-color: #9CA18C !important; }
.ofa-heading--rust        { border-bottom-color: var(--ofa-rust-dark) !important; border-color: var(--ofa-rust-dark) !important; }
.ofa-heading--gold        { border-bottom-color: var(--ofa-gold) !important; border-color: var(--ofa-gold) !important; }
.ofa-heading--default     { border-bottom-color: #CEB28B !important; border-color: #CEB28B !important; }

/* ==========================================================================
   20. Responsive Breakpoints
   ========================================================================== */

/* Tablet: 2-column box layout */
@media (max-width: 991.98px) {
  .boxFull   { width: 100%; }
  .boxBig    { width: calc(50% - 16px); }
  .boxMedium { width: calc(50% - 16px); }
  .boxSmall  { width: calc(50% - 16px); }
  .homeleftbox, .homerightbox {
    width: 100%;
    float: none;
    margin: 0 0 10px;
  }
}

/* Mobile: single-column */
@media (max-width: 767.98px) {
  .ofa-hero        { min-height: 200px; }
  .ofa-nav-box     { min-height: auto; }

  .boxBig    { width: 100%; margin: 0 0 10px; }
  .boxMedium { width: 100%; margin: 0 0 10px; }
  .boxSmall  { width: 100%; margin: 0 0 10px; }
  .box       { float: none; margin: 0 0 10px; }

  /* Stacked Bootstrap navbar on mobile */
  .ofa-nav .navbar-nav {
    flex-direction: column;
    flex-wrap: wrap;
  }
  .ofa-nav .nav-item {
    flex: none;
    width: 100%;
  }
  .ofa-nav .nav-link {
    padding: 10px 15px;
    justify-content: flex-start;
  }
}