/* css code*/
.footer-content {
background-color: #ba0c2f;
/* Cherry color */
padding: 20px;
color: #fff;
font-family: Gotham;
}
.footer-header h2 {
text-align: left;
font-size: 24px;
margin-bottom: 20px;
font-weight: bold;
font-family: Vitesse;
}
.footer-columns {
display: flex;
justify-content: space-between;
}
.footer-column {
flex: 1;
margin: 0 10px;
}
.footer-column h3 {
font-size: 18px;
margin-bottom: 10px;
font-family: Vitesse;
border-bottom: 1px solid #ffffff;
/* White underline */
padding-bottom: 5px;
/* Space between text and underline */
}
.footer-column p, .footer-column ul {
font-size: 14px;
font-family: Gotham;
}
.footer-column ul {
list-style: none;
padding: 0;
}
.footer-column ul li {
margin-bottom: 5px;
}
.footer-column ul li a {
color: #fff;
text-decoration: none;
}
.footer-column ul li a:hover {
text-decoration: underline;
}
.social-media-icons {
display: flex;
gap: 10px;
}
.social-media-icons a img {
width: 24px;
height: 24px;
}
/* Social Media Icons Hover Effect */
.footer-social-icons a:hover {
background-color: #ba0c2f;
/* Match this with the footer background color */
}
.footer-social-icons a:hover img {
filter: brightness(0) invert(1);
/* Inverts the color of the icon to ensure visibility */
}
.about-us {
text-align: center;
}
header {
background-color: #333;
color: white;
padding: 20px;
}
.team {
padding: 20px;
}

/* TEAM — improved look */
.team-container{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.team-member{
cursor:pointer;
background:#fff;
padding:16px;
border-radius:14px;
border:1px solid #e6e6e6;
border-left:6px solid #ba0c2f;
width:260px;
transition:transform .2s ease, box-shadow .2s ease;
text-align:center;
}

.team-member:hover{
transform:translateY(-3px);
box-shadow:0 12px 22px rgba(0,0,0,.12);
}

/* ✅ square image */
.team-member img{
width:120px;
height:120px;
border-radius:12px; /* square-ish */
object-fit:cover;
border:3px solid #ba0c2f;
background:#f2f2f2;
display:block;
margin:0 auto 12px;
}

/* Details panel shown under clicked card */
#team-details{
margin:12px 0 0;
padding:16px;
background:#f7f7f7;
border:1px solid #e6e6e6;
border-left:6px solid #ba0c2f;
border-radius:14px;
text-align:left;
width:260px; /* matches card width */
}

#team-details h2{ margin:0 0 6px; }
#team-details h3{ margin:0 0 10px; color:#63666a; }

.hidden{ display:none; }




















/* Search & Filter Controls */
.controls {
margin: 20px;
}
#searchBox, #categoryFilter {
padding: 10px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
/* Inventory Section */
.inventory {
padding: 20px;
}
/* Responsive Grid Layout */
.inventory-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
padding: 10px;
justify-content: center;
}
/* Category Header */
.category-header {
background-color: #ba0c2f;
color: white;
width: 100%;
padding: 10px;
font-weight: bold;
text-align: center;
border-radius: 5px;
grid-column: span 3;
}
/* Flip Card Structure */
.inventory-item {
width: 220px;
height: 150px;
perspective: 1000px;
margin: auto;
}
.inventory-item-inner {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.inventory-item.flipped .inventory-item-inner {
transform: rotateY(180deg);
}
/* Front Side */
.inventory-item-front, .inventory-item-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
border-radius: 8px;
padding: 10px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}
/* Front Side Styling */
.inventory-item-front {
background-color: #a7a8aa;
color: white;
}
/* Back Side Styling */
.inventory-item-back {
background-color: #ddd;
color: black;
transform: rotateY(180deg);
}
/* Mobile Optimization */
@media (max-width: 768px) {
.inventory-container {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.inventory-item {
max-width: 180px;
}
}
/* Safety */
/* UNM Primary Colors */
.unm-cherry {
background-color: #ba0c2f;
color: white;
}
.unm-silver {
background-color: #a7a8aa;
color: black;
}
.unm-lobogray {
background-color: #63666a;
color: white;
}
/* Stucco Background */
.stucco {
background-image: url(//webcore.unm.edu/v2/images/stucco.png);
background-size: cover;
background-position: center;
}
/* General Page Styling */
body {
margin: 0;
padding: 0;
text-align: center;
}
/* Header */
header {
padding: 20px;
text-align: center;
}
/* Safety Sections */
.safety-section {
padding: 20px;
margin: 20px;
border-radius: 8px;
text-align: center;
}
/* Alert Box */
.alert-box {
max-width: 50%;
margin: 20px auto;
padding: 15px;
background-color: #a7a8aa;
color: black;
font-weight: bold;
border-radius: 5px;
}
/* Call-to-Action Button */
.cta-button {
display: inline-block;
padding: 10px 20px;
margin: 10px;
background-color: #ba0c2f;
color: white;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.cta-button:hover {
background-color: #a7a8aa;
color: black;
}
/* Footer */
footer {
padding: 10px;
text-align: center;
}
/* Mobile Optimization */
@media (max-width: 768px) {
.alert-box {
max-width: 80%;
}
}
/* FAQ */
.stucco {
background-image: url(//webcore.unm.edu/v2/images/stucco.png);
background-repeat: repeat;
}
.faq-wrapper {
max-width: 850px;
margin: 2rem auto;
}
.faq-title {
color: white;
padding: 1rem 2rem;
border-radius: 8px 8px 0 0;
text-align: center;
background-color: #ba0c2f;
}
.faq-title h2 {
margin: 0;
}
.faq-section {
background-color: rgba(255, 255, 255, 0.95);
padding: 2rem;
border-radius: 0 0 8px 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.faq-item {
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 6px;
background-color: #fff;
overflow: hidden;
}
.faq-question {
width: 100%;
background-color: #f9f9f9;
border: none;
padding: 1rem;
font-size: 1rem;
font-weight: bold;
text-align: left;
color: #333;
cursor: pointer;
}
.faq-question:hover {
background-color: #f0eaea;
}
.faq-answer {
display: none;
padding: 1rem;
font-size: 0.95rem;
color: #555;
background-color: #fff;
border-top: 1px solid #ddd;
}
/* ——— UNM NanoFab Cleanroom Map Styles ——— */

.cr-wrap {
font-family: Gotham, Arial, sans-serif;
color: #222;
}

.cr-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin: 1rem 0;
padding: .75rem 1rem;
background: #f7f7f7;
border: 1px solid #e7e7e7;
border-radius: 12px;
}

.cr-controls {
display: flex;
gap: .5rem;
align-items: center;
flex-wrap: wrap;
}

.cr-label {
font-size: .85rem;
color: #63666a;
margin-left: .25rem;
}

#crSearch,
#crCategory {
padding: .55rem .7rem;
border: 1px solid #dcdcdc;
border-radius: 8px;
min-width: 220px;
}

.cr-zoom {
display: flex;
gap: .5rem;
}

.cr-btn {
border: 1px solid #ba0c2f;
background: #ba0c2f;
color: #fff;
border-radius: 8px;
padding: .5rem .75rem;
cursor: pointer;
font-weight: 600;
}
.cr-btn:hover {
filter: brightness(.95);
}

.cr-body {
display: grid;
grid-template-columns: 300px 1fr;
gap: 1rem;
min-height: 560px;
}
@media (max-width: 980px) {
.cr-body { grid-template-columns: 1fr; }
}

.cr-legend {
border: 1px solid #e7e7e7;
border-radius: 12px;
padding: 1rem;
background: #fff;
height: fit-content;
}
.cr-legend-title {
margin: .25rem 0 1rem 0;
font-family: Vitesse, Georgia, serif;
}
.cr-legend-groups details{
border:1px solid #e4e4e4;
border-radius:10px;
margin-bottom:.6rem;
background:#fafafa;
transition:all .2s ease;
}

.cr-legend-groups details[open]{
background:#ffffff;
box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.cr-legend-groups summary {
cursor: pointer;
padding: .55rem .8rem;
background: #fafafa;
border-radius: 10px;
font-weight: 700;
}
.cr-legend-list {
list-style: none;
margin: 0;
padding: .25rem .6rem .6rem .9rem;
}
.cr-legend-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: .5rem;
border-bottom: 1px dashed #eee;
padding: .45rem 0;
}
.cr-legend-item:last-child {
border-bottom: none;
}
.cr-link {
color: #ba0c2f;
font-weight: 600;
cursor: pointer;
}
.cr-link:hover { text-decoration: underline; }
.cr-badge {
font-size: .65rem;
background: #a7a8aa;
color: #fff;
border-radius: 999px;
padding: .1rem .5rem;
}

.cr-stage {
position: relative;
border: 1px solid #e7e7e7;
border-radius: 12px;
background: #fff;
overflow: hidden;
}

/* Base canvas uses the PNG as a background */
.cr-canvas {
position: relative;
transform-origin: 0 0;
cursor: grab;
background: url('/cleanroom/cleanroom-map.png') center / contain no-repeat;
width: 100%;
aspect-ratio: 780 / 1350;
min-height: 680px;
}
.cr-canvas.dragging { cursor: grabbing; }

/* Make sure ONLY our hotspots layer is visible inside the canvas */
#crCanvas { position: relative; }
#crCanvas > *:not(#crHotspots) {
display: none !important;
}


/* ——— Inventory: turn cards into list rows ——— */
/* scope everything so it won't leak into other pages */
.nf-inventory .sr-only{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden
}
/* Header */
.nf-inventory .inv-header{
background:#63666a;
color:#fff;
padding:20px;
text-align:center
}
.nf-inventory .inv-controls{
margin:16px;
text-align:center
}
.nf-inventory #searchBox, .nf-inventory #categoryFilter{
padding:10px;
margin:4px;
border:1px solid #ccc;
border-radius:6px;
min-width:220px
}
/* Category */
.nf-inventory .category-header{
background:#ba0c2f;
color:#fff;
font-weight:700;
padding:10px 14px;
border-radius:6px;
margin:18px auto 8px;
max-width:1000px 
}
/* List */
.nf-inventory .inv-list{
list-style:none;
margin:0 auto;
max-width:1000px;
padding:0 10px 0 0
}
.nf-inventory .inv-item{
display:flex;
align-items:center;
gap:12px;
padding:12px 14px;
border:1px solid #e6e6e6;
border-left:6px solid #ba0c2f;
border-radius:8px;
margin:8px 0;
background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.06);
cursor:pointer 
}
.nf-inventory .inv-item:hover{
background:#fafafa
}
.nf-inventory .inv-name{
font-weight:700;
flex:1 1 auto;
text-align:left
}
.nf-inventory .inv-meta{
display:flex;
gap:6px;
flex:0 0 auto
}
.nf-inventory .inv-badge{
display:inline-block;
padding:2px 8px;
border-radius:999px;
font-size:12px;
background:#a7a8aa;
color:#fff
}
.nf-inventory .inv-badge--pm{
background:#a8aa19
}
.nf-inventory .inv-badge--std{
background:#63666a
}
/* Details line (collapsible) */
.nf-inventory .inv-details{
display:none;
width:100%;
margin-top:6px;
color:#333;
border-top:1px dashed #e0e0e0;
padding-top:8px;
font-size:14px 
}
.nf-inventory .inv-item.open .inv-details{
display:block
}
/* Responsive */
@media (max-width:700px){
.nf-inventory .inv-item{
flex-direction:column;
align-items:flex-start
}
.nf-inventory .inv-meta{
align-self:flex-start
}
}
/* Hotspot (dot) styles — replace old .cr-hotspot rules with this */
.cr-hotspot{
position:absolute;
/* configurable vars */
--dot-size: 14px;
--dot-fill: rgba(186,12,47,.92);
--dot-stroke: rgba(186,12,47,.18);
--dot-stroke-width: 3px;
width: var(--dot-size);
height: var(--dot-size);
transform: translate(-50%,-50%);
border-radius: 50%;
background: var(--dot-fill);
box-shadow: 0 0 0 var(--dot-stroke-width) var(--dot-stroke);
cursor: pointer;
transition: transform .15s ease;
border: none;
padding: 0;
}
.cr-hotspot:hover{
transform: translate(-50%,-50%) scale(1.15);
}
.cr-hotspot.pulse::after{
content:"";
position:absolute;
inset: calc(-1 * var(--dot-size) * 0.6);
border-radius:50%;
border:2px solid #ba0c2f;
animation: cr-pulse 1.2s ease-out 2;
}
@keyframes cr-pulse{
0%{
opacity:.7;
transform: scale(.7) 
}
100%{
opacity:0;
transform: scale(1.7) 
}
}
/* Optional: make all dots smaller by adding .small-dots to .cr-stage */
.cr-stage.small-dots .cr-hotspot{
--dot-size: 12px;
}
/* Optional: hollow/transparent markers (ring only) */
.cr-hotspot--hollow{
--dot-fill: transparent;
--dot-stroke: #ba0c2f;
--dot-stroke-width: 2px;
outline: 2px solid #ba0c2f;
outline-offset: -2px;
}

/* Hide any accidental leftover dot sets from older templates */
.cr-wrap .map-dot,
.cr-wrap .cleanroom-dot,
.cr-wrap .equipment-dot {
display: none !important;
}

/* Also remove any old <img> maps placed inside #crCanvas */
#crCanvas img {
display: none !important;
}

/* ——— Cleanroom Map: show ONLY the raster map + dots ——— */
#crCanvas { position: relative; }

/* Hide any extra layers that Cascade/template injected inside the canvas */
#crCanvas > *:not(#crHotspots) { 
display: none !important;
}

/* Make sure the map image is the visible base */
.cr-canvas{
background: url('/cleanroom/cleanroom-map.png') center / contain no-repeat !important;
}






/* ===============================
HOMEPAGE BANNER + BACKGROUND
=============================== */

#home {
width: 100%;
}

/* Top banner image */
#home #hero {
background-image: url('/images/buddy.jpg');
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
height: 500px;
overflow: hidden;
}
/* Background image for rest of homepage */
#home #main {
background-image: url('/images/homebg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 100vh;
}

/* Let the background show through */
#home #upper,
#home #lower {
background-color: transparent;
}












/*become a user
*/

/* ===== UNM BRAND COLORS ===== */

.nanofab-onboard{
max-width:900px;
margin:auto;
padding:24px;
border:4px solid #BA0C2F;
border-radius:14px;
background:white;
box-shadow:0 8px 0 rgba(0,0,0,.2);
}

.nanofab-onboard h2{
color:#BA0C2F;
margin-top:0;
}

/* progress */
.nano-progress{
height:18px;
border:3px solid black;
border-radius:20px;
overflow:hidden;
position:relative;
margin-bottom:15px;
}

.nano-bar{
height:100%;
width:0%;
background:#BA0C2F;
transition:.3s;
}

.nano-progress-text{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
font-weight:bold;
}

/* dots */
.nano-dots{
display:flex;
gap:8px;
margin-bottom:15px;
}

.nano-dot{
width:32px;
height:32px;
border-radius:50%;
border:3px solid black;
background:white;
cursor:pointer;
font-weight:bold;
}

.nano-dot.active{
background:#BA0C2F;
color:white;
}

/* card */
.nano-card{
display:grid;
grid-template-columns:150px 1fr;
gap:15px;
border:3px solid black;
border-radius:14px;
padding:15px;
}

.nano-mascot{
width:90px;
height:90px;
background:#A7A8AA;
border-radius:50%;
border:3px solid black;
margin:auto;
}

.nano-step-number{
width:60px;
height:60px;
background:#BA0C2F;
color:white;
border:3px solid black;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
font-weight:bold;
margin:auto;
border-radius:10px;
}

.nano-checklist{
list-style:none;
padding:0;
}

.nano-checklist li{
display:flex;
gap:10px;
border:2px solid #ccc;
padding:10px;
margin-bottom:8px;
border-radius:10px;
cursor:pointer;
}

.nano-box{
width:20px;
height:20px;
border:3px solid black;
}

.nano-box.done{
background:#BA0C2F;
}

.nano-buttons button{
padding:10px 14px;
border:3px solid black;
background:#BA0C2F;
color:white;
font-weight:bold;
border-radius:8px;
cursor:pointer;
margin-right:8px;
}



/* ===============================
SERVICE CENTER EQUIPMENT GALLERY
=============================== */

.nf-tools{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:22px;
margin-top:20px;
font-family:Gotham,Arial,sans-serif;
}

.nf-tool{
text-decoration:none;
background:#fff;
border-radius:12px;
overflow:hidden;
border:1px solid #e6e6e6;
box-shadow:0 2px 6px rgba(0,0,0,.08);
transition:.25s ease;
text-align:center;
color:#222;
}

.nf-tool img{
width:100%;
height:190px;
object-fit:cover;
display:block;
}

.nf-tool span{
display:block;
padding:12px;
font-weight:700;
color:#ba0c2f;
}

.nf-tool:hover{
transform:translateY(-6px);
box-shadow:0 10px 20px rgba(0,0,0,.18);
}