/* glyphs.css */

.glyph {
  --glyph-size: 1.5rem;      /* 24px default */
  width: var(--glyph-size);
  height: var(--glyph-size);
  display: inline-block;
  vertical-align: -0.15em;  
  flex: none;               
  color: rgb(var(--cobalt));
}

/* sizes */
.glyph--sm { --glyph-size: 1rem; }   
.glyph--md { --glyph-size: 1.5rem; }  
.glyph--lg { --glyph-size: 2rem; }    
.glyph--xl { --glyph-size: 3rem; }  

/* colors — set on the svg, or on any ancestor */
.glyph--muted  { color: #6b7280; }
.glyph--brand  { color: #3b82f6; }
.glyph--danger { color: #dc2626; }

/* stroke icons (#svg-policy, #svg-waiter) get thin at small sizes.
   optional bump: */
.glyph--sm.glyph--stroke * { stroke-width: 2; }

/* example: icon in a button, color follows the button */
.btn { display: inline-flex; align-items: center; gap: .5em; color: #1f2937; }
.btn:hover { color: #3b82f6; }


.wayfind .cell {
  display: flex;             
}

.wayfind-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; 
  gap: 1rem;
  width: 100%;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  color: #002E5A;
  background: #fff;
  border: 1px solid rgb(var(--trueblue));
  transition: border-color .18s ease;
		}

.wayfind-card img {
  width: 100px;
  height: 100px;
  flex: none;                
}


.wayfind-card__label {
  font-weight: 700;
  line-height: 1.3;
  min-height: 2.6em;      
}

a.wayfind-card:hover,
a.wayfind-card:focus-visible {
  border-color: #0062A5;
border-bottom:1px solid #0062A5;
  background: #f4f8fb;
  box-shadow: 0 4px 14px rgba(0, 46, 90, .13);  
	color: #002E5A;
}

.wayfind-card:focus-visible {
  outline: 3px solid #0062A5;  
  outline-offset: 2px;
}

.wayfind-card:active {
  transform: translateY(-1px);
}

.c-highlight-card__media.l-media-aspect.l-media-aspect--3-2 {
  background-size: 50%;
  background-repeat: no-repeat;
}

/* smaller icons on narrow screens */
@media screen and (max-width: 39.99em) {
  .wayfind-card { padding: 1.25rem .75rem; gap: .75rem; }
  .wayfind-card img { width: 72px; height: 72px; }
}