/* ===================================================================
   CAMPUS MAP PAGE STYLES
   /infotech/_css/campus-map.css
   Loaded by the Campus Map page via a link tag in the PCF headcode.

   SCOPING RULES
   1. Every class is prefixed uh-. This folder is shared.
   2. No bare element selectors.
   3. Framework classes are never restyled.
   4. No font-family declarations. The UH templates load brand faces.
   5. Cougar Red and neutrals only.

   CLASSES (all degrade to plain HTML if stripped)
     .uh-route         numbered route steps with dashed connector
     .uh-steps         numbered steps with large red numerals
     .uh-eyebrow       red uppercase label
     .uh-feature       feature card (+ .uh-feature--new for the newest)
     .uh-feature-icon  decorative icon slot, i tag needs aria-hidden
     .uh-badge         one-word New flag inside a heading
   =================================================================== */

/* --- Tokens -------------------------------------------------------- */
:root{
  --uh-map-red:#C8102E;
  --uh-map-ink:#100C0D;
  --uh-map-slate:#54585A;
  --uh-map-line:#DCD9D6;
  --uh-map-node:2rem;
}

/* --- Spotlight section ---------------------------------------------
   Faint measured grid echoing map gridlines. background-image only,
   so it composites over whatever the section theme sets.
   ------------------------------------------------------------------ */
#walking-directions{
  background-image:
    linear-gradient(rgba(16,12,13,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,12,13,.04) 1px, transparent 1px);
  background-size:44px 44px;
}

/* --- Route steps (spotlight) ---------------------------------------
   Markup:
     <ol class="uh-route">
       <li><strong>Step title.</strong> Step description.</li>
     </ol>
   Numbers, circles and the connecting line are generated. Editors only
   add or remove list items. The final step renders filled, as arrival.
   ------------------------------------------------------------------ */
.uh-route{
  list-style:none;
  counter-reset:uh-route;
  margin:1.75rem 0 2.5rem;
  padding:0;
}
.uh-route > li{
  counter-increment:uh-route;
  position:relative;
  padding:0 0 1.75rem 3.25rem;
}
.uh-route > li:last-child{padding-bottom:0}

.uh-route > li::after{
  content:"";
  position:absolute;
  left:calc(var(--uh-map-node) / 2 - 1px);
  top:calc(var(--uh-map-node) + .45rem);
  bottom:.2rem;
  width:2px;
  background-image:linear-gradient(var(--uh-map-red) 55%, transparent 0);
  background-size:2px 12px;
}
.uh-route > li:last-child::after{display:none}

.uh-route > li::before{
  content:counter(uh-route);
  position:absolute;
  left:0;
  top:0;
  width:var(--uh-map-node);
  height:var(--uh-map-node);
  border-radius:50%;
  background:#fff;
  border:2px solid var(--uh-map-red);
  color:var(--uh-map-red);
  font-weight:700;
  font-size:.95rem;
  line-height:calc(var(--uh-map-node) - 4px);
  text-align:center;
}
.uh-route > li:last-child::before{
  background:var(--uh-map-red);
  color:#fff;
  box-shadow:0 0 0 4px rgba(200,16,46,.15);
}
.uh-route > li strong{
  display:block;
  margin-bottom:.15rem;
  font-size:1.05rem;
}
#walking-directions h2::after {
  content: "";
  display: inline-block;
  width: 1.6em;
  height: 0.9em;
  margin-left: 0.5rem;
  vertical-align: baseline;
  background-image: url("/infotech/_images/betalogo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media (max-width:575px){
  .uh-route{--uh-map-node:1.75rem}
  .uh-route > li{padding-left:2.75rem}
}

/* --- Steps list (how-to section) -----------------------------------
   Markup: <ol class="uh-steps"><li><strong>Label.</strong> Text</li></ol>
   Big red two-digit numerals; degrades to a plain numbered list.
   ------------------------------------------------------------------ */
.uh-steps{
  list-style:none;
  counter-reset:uh-st;
  margin:0;
  padding:0;
}
.uh-steps > li{
  counter-increment:uh-st;
  position:relative;
  padding:0 0 1.7rem 3.1rem;
}
.uh-steps > li:last-child{padding-bottom:0}
.uh-steps > li::before{
  content:counter(uh-st, decimal-leading-zero);
  position:absolute;
  left:0;
  top:.05rem;
  font-weight:800;
  font-size:1.35rem;
  line-height:1.2;
  color:var(--uh-map-red);
  letter-spacing:.02em;
}

/* --- Eyebrow label --------------------------------------------------
   Markup: <p class="uh-eyebrow">New to the campus map</p>
   Top of a content column, never mid-paragraph. Three or four words.
   It is a label, so no terminal punctuation.
   ------------------------------------------------------------------ */
.uh-eyebrow{
  display:block;
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--uh-map-red);
  margin:0 0 .5rem;
}

/* --- Feature cards --------------------------------------------------
   Markup:
     <div class="uh-feature">
       <p class="uh-feature-icon"><i class="bi bi-search" aria-hidden="true"></i></p>
       <h3>Title</h3>
       <p>One or two sentences.</p>
     </div>
   Newest feature only: class="uh-feature uh-feature--new" plus
   <span class="uh-badge">New</span> inside the h3. One card at a time;
   when the next feature ships, move both to the new card.
   ------------------------------------------------------------------ */
.uh-feature{
  height:100%;
  padding:1.5rem 1.35rem 1.6rem;
  background:#fff;
  border:1px solid var(--uh-map-line);
  border-top:3px solid var(--uh-map-line);
  transition:border-top-color .15s ease, box-shadow .15s ease;
}
.uh-feature:hover{
  border-top-color:var(--uh-map-red);
  box-shadow:0 3px 14px rgba(16,12,13,.07);
}
.uh-feature h3{
  margin:0 0 .4rem;
  font-size:1.15rem;
}
.uh-feature p:last-child{
  margin:0;
  font-size:.95rem;
  color:var(--uh-map-slate);
}
.uh-feature--new{border-top-color:var(--uh-map-red)}

.uh-feature-icon{
  display:block;
  font-size:1.75rem;
  line-height:1;
  color:var(--uh-map-red);
  margin:0 0 .75rem;
}

#questions {
  background-color: #f5f5f5;
}

/* --- Badge ----------------------------------------------------------
   Markup: <span class="uh-badge">New</span>  (one word, inside a heading)
   ------------------------------------------------------------------ */
.uh-badge{
  display:inline-block;
  vertical-align:.15em;
  margin-left:.5rem;
  padding:.2rem .5rem;
  background:var(--uh-map-red);
  color:#fff;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  line-height:1;
}

.uh-beta {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  height: 1em !important;
}

/* --- Section heading spacing ---------------------------------------
   Air between a section heading and its tile grid. Spacing only,
   scoped to section ids so nothing leaks to other pages.
   ------------------------------------------------------------------ */
#map-features h2{margin-bottom:1.75rem}
#how-to-use h2{margin-bottom:1.75rem}
#getting-around h2{margin-bottom:1.75rem}

/* --- Motion and print ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .uh-feature{transition:none}
}
@media print{
  #walking-directions{background-image:none}
  .uh-route > li::after{display:none}
  .uh-route > li::before{background:transparent;color:#000;border-color:#000;box-shadow:none}
  .uh-steps > li::before{color:#000}
  .uh-eyebrow{color:#000}
  .uh-feature{border-color:#000;box-shadow:none}
  .uh-feature-icon{display:none}
  .uh-badge{background:transparent;color:#000;outline:1px solid #000}
}