/* =========================================================
   process-improvement.css
   Continuous Process Improvement Toolkit
   NMSU Marketing and Communications / Digital Experience

   SCOPE
   -----
   This file is loaded on the CPI Toolkit page only, so the
   selectors below are intentionally plain. Do not add this
   file to a site-wide include — several rules target generic
   theme classes (.panel-default, .row) and would affect other
   pages if loaded globally.

   Selectors are prefixed with #section2 where practical to
   limit blast radius if the file is ever loaded somewhere
   unintended.
   ========================================================= */


/* ---------------------------------------------------------
   1. EQUAL-HEIGHT CARDS

   col-full-height does not equalize on its own. Bootstrap 3
   predates flexbox, so the row needs it added.

   Note: Bootstrap 3 puts clearfix ::before / ::after on .row.
   Once the row is a flex container those pseudo-elements
   become flex items and show up as stray gaps between cards.
   They are not needed here, so they are removed.
   --------------------------------------------------------- */
#section2 .row {
  display: flex;
  flex-wrap: wrap;
}
#section2 .row::before,
#section2 .row::after {
  display: none;
}
#section2 .row > [class*="col-"] {
  display: flex;
  margin-bottom: 24px;
}
#section2 .row .panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

/* The intro row is a single col-sm-12 of prose. Keep it as a
   normal block so the text is not stretched or spaced oddly. */
#section2 .row > .col-sm-12 {
  display: block;
  margin-bottom: 0;
}

/* The .container also carries a theme ::before. Leave it be —
   the container is not a flex parent, so it causes no trouble. */


/* ---------------------------------------------------------
   2. CARD TREATMENT

   The panels currently sit near-invisible on the grey section
   background. A maroon left rule gives each card a definite
   edge and carries the brand without adding noise.
   --------------------------------------------------------- */
#section2 .panel-default {
  border: 1px solid #ddd;
  border-left: 4px solid #8c0b42;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  transition: box-shadow .15s ease-in-out;
}
#section2 .panel-default:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .13);
}
#section2 .panel-body {
  padding: 22px 24px 24px;
}


/* ---------------------------------------------------------
   3. CARD HEADINGS

   The theme's default h3 is large and light — currently these
   read as page sections rather than card titles. Covers h2 as
   well, so the styling survives the heading-level fix.
   --------------------------------------------------------- */
#section2 .panel-body h2,
#section2 .panel-body h3 {
  font-size: 19px;
  font-weight: 700;
  color: #333;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ececec;
  line-height: 1.3;
}


/* ---------------------------------------------------------
   4. LINK LISTS

   Bullets are redundant when every item is a link. Block
   display gives each link a full-width hit area — WCAG 2.5.8
   asks for 24x24 minimum, which this clears comfortably.
   --------------------------------------------------------- */
#section2 .panel-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#section2 .panel-body ul li {
  border-bottom: 1px solid #f2f2f2;
}
#section2 .panel-body ul li:last-child {
  border-bottom: none;
}
#section2 .panel-body ul li a {
  display: block;
  padding: 11px 4px 11px 26px;
  position: relative;
  color: #8c0b42;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  min-height: 24px;
}
#section2 .panel-body ul li a:hover,
#section2 .panel-body ul li a:focus {
  background: #faf5f7;
  text-decoration: underline;
}

/* Download arrow. Decorative — link text carries the meaning. */
#section2 .panel-body ul li a::before {
  content: "\2193";
  position: absolute;
  left: 6px;
  top: 11px;
  font-size: 13px;
  color: #a86b85;
}

/* File type and size, if added to the markup:
     <a href="...">Process Evaluation <span class="file-meta">(XLSX, 240 KB)</span></a> */
#section2 .file-meta {
  color: #666;
  font-size: 12.5px;
  font-weight: 400;
  white-space: nowrap;
}


/* ---------------------------------------------------------
   5. FOCUS VISIBILITY

   Highest-value accessibility fix on the page. The theme's
   default outline is invisible against the maroon links.
   --------------------------------------------------------- */
#section2 a:focus,
#section2 .btn:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  background: #eef4fb;
}


/* ---------------------------------------------------------
   6. INTRO TEXT

   Measure control. Full-width paragraphs on a 1200px
   container run past comfortable reading length.
   --------------------------------------------------------- */
#section2 .col-sm-12 > p {
  font-size: 15px;
  line-height: 1.7;
}


/* ---------------------------------------------------------
   7. "GET STARTED" — interim styling

   Currently loose text above the grid rather than a card.
   If it is rebuilt as a panel, add .panel-start to it and
   this will give it entry-point weight. Harmless until then.
   --------------------------------------------------------- */
#section2 .panel-start {
  border-left-width: 6px;
  background: #fbf7f8;
}
#section2 .panel-start h2,
#section2 .panel-start h3 {
  color: #8c0b42;
}


/* ---------------------------------------------------------
   8. RESPONSIVE

   col-sm-6 stacks below 768px, which is correct. Tighten
   padding so cards do not waste space on a phone.
   --------------------------------------------------------- */
@media (max-width: 767px) {
  #section2 .panel-body {
    padding: 18px 16px 20px;
  }
  #section2 .row > [class*="col-"] {
    margin-bottom: 16px;
  }
}


/* ---------------------------------------------------------
   9. MOTION
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #section2 .panel-default {
    transition: none;
  }
}


/* ---------------------------------------------------------
   10. PRINT

   Print the destination after each link so a paper copy of
   the toolkit is still usable.
   --------------------------------------------------------- */
@media print {
  #section2 .panel-default {
    box-shadow: none;
    border: 1px solid #999;
    break-inside: avoid;
  }
  #section2 .panel-body ul li a::before {
    content: none;
  }
  #section2 .panel-body ul li a::after {
    content: " (" attr(href) ")";
    font-size: 10px;
    color: #555;
  }
}

/* ---------------------------------------------------------
   11. FIXES — override theme rules that block equal heights
   --------------------------------------------------------- */

/* dept-template.css sets .col-full-height { height: 100% },
   which prevents the flex column from stretching. Reset it. */
#section2 .row > .col-full-height {
  height: auto;
  align-items: stretch;
}

/* Below 768px, .col-sm-6 has no width, so as a flex child it
   shrinks to content instead of filling the row. Force full
   width when stacked. */
@media (max-width: 767px) {
  #section2 .row > [class*="col-"] {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Belt and braces: make sure the row stretches its children. */
#section2 .row {
  align-items: stretch;
}