/*
 * Unity CSS Helper - Backward Compatibility Layer
 * ================================================
 * This file maps deprecated/removed class names from main-old.css (v1.x)
 * to their equivalents in main.css (v2.0). Include this file AFTER main.css
 * to restore support for old HTML that hasn't been updated yet.
 *
 * Usage: <link rel="stylesheet" href="css/main.css">
 *        <link rel="stylesheet" href="css/helper.css">
 *
 * Once you've updated your HTML to use the new class names, you can
 * remove this file.
 */


/* ==========================================================================
   1. RENAMED CLASSES
   ========================================================================== */

/* .date--sm -> .date-sm (double-dash to single-dash) */
.featured-news .date--sm {
  font-size: 0.875rem;
  font-weight: 600;
}

/* .card__image -> .card-img (BEM to Bootstrap convention) */
.featured-news .card__image img {
  display: block;
  width: 100%;
}

@media (min-width: 64rem) {
  .featured-news .primary .card__image {
    flex: 1 1 auto;
    margin-bottom: 0;
    margin-top: -2rem;
    max-width: 50%;
    width: 100%;
  }
  .featured-news .primary .card__image img {
    height: calc(100% + 2rem);
    object-fit: cover;
  }
}

@media (min-width: 86.25rem) {
  .featured-news .primary .card__image {
    max-width: 55%;
    width: 100%;
  }
}

/* .without_card__image (removed, no direct replacement - preserving old styles) */
@media (min-width: 64rem) {
  .featured-news .primary .without_card__image {
    max-width: 33%;
    width: 100%;
  }
}

/* .ncar-logo -> .logo-ncar / .logo-ucar */
.ncar-logo {
  border-left: 0.078125rem solid;
  width: 7rem;
}

.ncar-logo .small-ncar-logo {
  font-weight: 600;
  line-height: 1em;
}

@media (min-width: 36rem) {
  .ncar-logo h1,
  .ncar-logo .h1 {
    max-width: none;
  }
  .ncar-logo h1.small-ncar-logo,
  .ncar-logo .small-ncar-logo.h1 {
    font-size: 0.875rem;
    line-height: 1rem;
  }
}

@media (min-width: 64rem) {
  .ncar-logo {
    border-left: 0.125rem solid;
    width: 9rem;
  }
  .ncar-logo h1,
  .ncar-logo .h1 {
    line-height: 3.5rem;
  }
  .ncar-logo h1.small-ncar-logo,
  .ncar-logo .small-ncar-logo.h1 {
    font-size: 1.25rem;
    line-height: 1.2rem;
  }
}

.ncar .ncar-logo {
  border-left-color: #0057c2;
}

.ucar .ncar-logo {
  border-left-color: #00818f;
}


/* ==========================================================================
   2. REMOVED CLASSES - Preserved with original styling
   ========================================================================== */

/* .small-site-name (removed entirely) */
.site-name h1.small-site-name,
.site-name .small-site-name.h1 {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1em;
}

@media (min-width: 36rem) {
  .site-name h1 .small-site-name,
  .site-name .h1 .small-site-name {
    line-height: 1rem;
  }
}

@media (min-width: 64rem) {
  .site-name h1.small-site-name,
  .site-name .small-site-name.h1 {
    font-size: 1.25rem;
    line-height: 1.2rem;
  }
}

/* .small-ncar-logo (removed along with ncar-logo rename) */
.small-ncar-logo {
  font-weight: 600;
  line-height: 1em;
}

/* .text-gray-dark (removed) */
.text-gray-dark,
.ucar .card .badge,
.ncar .card .badge {
  color: #53565a;
}

/* .bg-gray-dark (removed) */
.bg-gray-dark {
  background-color: #53565a;
}

/* .bg-org-dark (removed - using new org-base colors as closest equivalent) */
.ncar .bg-org-dark {
  background-color: #0057c2;
}

.ncar .bg-org-dark a:not([class]) {
  color: #fff;
  text-decoration: underline;
}

.ncar .bg-org-dark a:not([class]):hover {
  font-weight: 600;
}

.ucar .bg-org-dark {
  background-color: #00818f;
}

.ucar .bg-org-dark a:not([class]) {
  color: #fff;
  text-decoration: underline;
}

.ucar .bg-org-dark a:not([class]):hover {
  font-weight: 600;
}

/* .yellow-orange-border (replaced by .border-top-orange) */
.yellow-orange-border {
  border-top: 0.375rem solid #faa119;
}


/* ==========================================================================
   3. REMOVED SECONDARY COLORS - Mapped to closest new equivalents
   ========================================================================== */

/*
 * Old secondary colors that were removed:
 *   yellow-orange (#ffb931) -> closest new: orange (#faa119)
 *   green (#2ca58d) -> no direct equivalent in new palette
 *   navy (#004080) -> closest new: blue (#00357a)
 *   light-blue (#93c5e2) -> closest new: org-light variants
 *   sky-blue (#c3d7ee) -> closest new: org-light-66 variants
 *   sky-blue-dark (#7ea7ca) -> closest new: org-base-33 variants
 */

/* yellow-orange utilities */
.text-yellow-orange {
  color: #faa119;
}

.bg-yellow-orange {
  background-color: #faa119;
}

/* green utilities */
.text-green {
  color: #2ca58d;
}

.bg-green {
  background-color: #2ca58d;
}

/* navy utilities */
.text-navy {
  color: #00357a;
}

.bg-navy {
  background-color: #00357a;
}

/* light-blue utilities */
.text-light-blue {
  color: #93c5e2;
}

.bg-light-blue {
  background-color: #93c5e2;
}

/* sky-blue utilities */
.text-sky-blue {
  color: #c3d7ee;
}

.bg-sky-blue {
  background-color: #c3d7ee;
}

/* sky-blue-dark utilities */
.text-sky-blue-dark {
  color: #7ea7ca;
}

.bg-sky-blue-dark {
  background-color: #7ea7ca;
}


/* ==========================================================================
   4. BEHAVIORAL CHANGES - Restoring old behavior where needed
   ========================================================================== */

/*
 * .btn-outline-light used to behave as a white-outlined button.
 * In v2.0, that behavior moved to .btn-outline-white.
 * If your HTML used .btn-outline-light for white outlines on dark
 * backgrounds, the old a.btn-outline-light styling is preserved here.
 */
.ncar a.btn-outline-light,
.ucar a.btn-outline-light {
  color: #fff;
}

.ncar a.btn-outline-light:hover,
.ucar a.btn-outline-light:hover {
  color: #fff;
}


/* ==========================================================================
   5. MISSING UTILITY CLASSES - Auto-apply when not present in HTML
   ========================================================================== */

/*
 * Pages updated to the new template use "main-content clearfix p-2".
 * Older pages still use "main-content clearfix" without p-2.
 * This rule adds the same padding as .p-2 when it's missing.
 */
.main-content.clearfix:not(.p-2) {
  padding: 1.125rem !important;
}