@charset "utf-8";
/* CSS Document */

:root{
  --bluegrey:#5a8296;              /* your base */
  --bluegrey-soft: rgba(90,130,150,.25); /* faint */
  --brand-dark: #003b5c;
  --brand-bright: #00b5e2;
  --light-grey:#f4f4f4;
  --white-transparent:rgba(255,255,255,0.9);
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.05);
  --shadow-hover:0 10px 30px rgba(0,0,0,.10);
  --icon-light:#8eaab9;
  --border-light:#dcdcdc; /* NEW light grey border tone */
  --brand-gold:#a89968;                 /* Wake Tech gold */
  /* Light tint helpers */
  --tint-blue-bg: rgba(0,181,226,.12);  /* light of bright blue */
  --tint-blue-br: rgba(0,181,226,.28);
  --tint-gold-bg: rgba(168,153,104,.12);/* light of gold */
  --tint-gold-br: rgba(168,153,104,.30);
  --tint-navy-bg: rgba(0,59,92,.10);    /* light of dark blue */
  --tint-navy-br: rgba(0,59,92,.28);
  --text-dark:#0f2530;                  /* readable on light tints */
  --icon-dim:#5e7481;                   /* slightly darker than --icon-light */	 
  --wt-vibrant:#006ba6;
  --wt-dark:#003b5c;
  --wt-muted:#30607b;
  --wt-bright:#00b5e2;   /* added */
  --wt-gold:#a89968;     /* added */
  --wt-white:#ffffff;    /* added */
  --card-max:1100px;     /* added */
  --yes:#1e9e4a;
  --no:#d64545;
  --atq-sub-radius: 14px;
  --atq-sub-shadow: 0 3px 14px rgba(0,0,0,.08);
  --wt-space-1: 8px;
  --wt-space-2: 16px;
  --wt-space-3: 24px;
  --wt-space-4: 32px;
  --wt-space-5: 40px;
  --wt-space-6: 48px;
  --wtr-dark: var(--brand-dark, #003b5c);
  --wtr-bright: var(--brand-bright, #00b5e2);
  --wtr-bluegrey: var(--bluegrey, #5a8296);
  --wtr-yellow: #FFD300;
  --wtr-yellow-hover: #e6bf00;
  --wtr-divider: rgba(0,59,92,.14);
  --wtr-shadow: 0 6px 14px rgba(0,0,0,.08);
  --wtr-shadow-hover: 0 10px 18px rgba(0,0,0,.12);
}


/* =========================================================
   Wake Tech Libraries — Header
   ========================================================= */

/* -------------------------
   Header wrapper
------------------------- */
header.wt-header{
  background-color: var(--brand-dark, #003b5c) !important;
  padding: 1rem 0 !important;
}

/* -------------------------
   Full-bleed header + bar (desktop)
------------------------- */
@media (min-width: 768px){
  header.wt-header,
  .wt-header-bar{
    width: 100%;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

/* -------------------------
   Header bar
------------------------- */
.wt-header-bar{
  height: 1.5rem;
  background-color: #00b5e2 !important;
}

/* -------------------------
   Logo
------------------------- */
.wt-header-logo{
  display: block;
  height: 12rem;     /* desktop size */
  width: auto;
  max-width: none;
}

/* -------------------------
   Mobile behavior
------------------------- */
@media (max-width: 767.98px){
  /* stop full-bleed on mobile */
  header.wt-header,
  .wt-header-bar{
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  /* center logo */
  header.wt-header .container{
    display: flex;
    justify-content: center;
  }

  .wt-header-logo{
    width: min(320px, 88vw);
    height: auto;
    max-width: 88vw;
  }
}

/* -------------------------
   Safety net for overflow
------------------------- */
html, body{
  width: 100%;
  overflow-x: hidden;
}


/* Main Footer */

.custom-footer {
  background-color: #003b5c; /* Dark Blue (primary brand color) */
  height: 100px; /* Adjust as needed */
  position: relative;
  width: 100%;
}

.footer-bar {
  background-color: #00b5e2; /* Bright Blue (accent) */
  height: 20px; /* Adjust thickness of the bar */
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}


/* Campus Landing Page */
/* ===============================
   Campus Landing Page – Header
   =============================== */

.s-lib-box {
    color: black;
}

/* Main Title Styling */
#marquee .section-title {
    color: #003b5c;
    padding: 1% 2% 0 2%;   /* top | right | bottom | left */
    font-weight: 700;
    font-style: normal;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: normal;
    line-break: auto;
    margin-bottom: 5px;
    line-height: 1;         
    
    /* NEW — stacks title + subtitle so spacing is controllable */
    display: flex;
    flex-direction: column;
    gap: 0.1em;            /* <— controls space between title + subtitle */
}

/* Subtitle Styling */
#marquee .section-title .section-subtitle {
    display: block;
    margin: 0;             /* remove extra spacing */
    font-size: 0.45em;
    font-weight: 600;
    color: #5a8296;
    text-transform: none;
    position: relative;
}




/* Heading size controls inside #marquee */
#marquee h1 { font-size: 5em; }
#marquee h2 { font-size: 4em; }
#marquee h3 { font-size: 3em; }
#marquee h4 { font-size: 2.5em; }
#marquee h5 { font-size: 2em; }
#marquee h6 { font-size: 1.5em; }

/* General heading font and color */
#marquee h1,
#marquee h2,
#marquee h3,
#marquee h4,
#marquee h5,
#marquee h6 {
    font-family: "Nunito Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    color: #003b5c;
}

/* ============================
   Library Hours Widget
   ============================ */

#lib-hero-hours {
    /* Typography from Version 1 */
    font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #006ba6; /* Vibrant Blue */

    /* Layout */
    display: none; /* will be shown by JS */
    text-align: left;
    padding: 5px 18px;
    margin-left: 10px;
    margin-top: 3.55rem !important;
    display: inline-block;

    /* Pill background from Version 2 */
    border: 2px solid rgba(0,181,226,0.4);
 


    /* Left accent border (NAVY) */
    border-left: 5px solid #003b5c;

    /* Smooth transitions */
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#lib-hero-hours:hover,
#lib-hero-hours:focus {
    background: rgba(0,181,226,0.18);
    border-color: #a89968; /* Wake Tech Gold */
    transform: translateY(-2px);
}

/* Gold-colored Hours Text */
#lib-today-hours {
    color: #a89968; /* Wake Tech Gold */
    font-weight: 700;
}

/* Clock Icon */
.libraryClockIcon {
    font-size: 22px;
    color: #006ba6; /* Vibrant Blue */
    margin-right: 6px;
}

/* See All Hours Link */
.lib-hero-all-hours a {
    text-decoration: none;
    color: #00b5e2; /* Bright Blue Accent */
    font-weight: 600;
    transition: color 0.2s ease;
}

.lib-hero-all-hours a:hover {
    text-decoration: underline;
    color: #025f92; /* Medium Blue */
}

/* ============================
   Responsive Styling (Mobile)
   ============================ */
@media (max-width: 768px) {
    .section-title {
        font-size: 24px;
        text-align: center;
    }

    #lib-hero-hours {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        padding: 8px 18px; /* slightly larger for better touch targets */
        display: block;
    }
}

/* =========================================
   Library Hours: stack rows on mobile
   - Location on first line
   - Hours/link on second line
========================================= */
@media (max-width: 576px){

  /* force the row itself to stop being a horizontal layout */
  #lib-hero-hours-all .lib-hours-all-list .lib-hours-row{
    display: block !important;
  }

  /* force each piece onto its own line */
  #lib-hero-hours-all .lib-hours-location{
    display: block !important;
    width: 100% !important;
    margin: 0 0 .35rem 0;
  }

  #lib-hero-hours-all .lib-hours-time{
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }

  /* optional: make the "See All Hours →" link behave nicely on line 2 */
  #lib-hero-hours-all .lib-hours-time .lib-hours-all-link{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
  }
}

@media (max-width: 768px){ /* same rules */ }
  /* force the row itself to stop being a horizontal layout */
  #lib-hero-hours-all .lib-hours-all-list .lib-hours-row{
    display: block !important;
  }

  /* force each piece onto its own line */
  #lib-hero-hours-all .lib-hours-location{
    display: block !important;
    width: 100% !important;
    margin: 0 0 .35rem 0;
  }

  #lib-hero-hours-all .lib-hours-time{
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }

  /* optional: make the "See All Hours →" link behave nicely on line 2 */
  #lib-hero-hours-all .lib-hours-time .lib-hours-all-link{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
  }
}

/* ======================================================
Horizontal Line
==========================================================*/

/* Solid, faint 1px line */
.hr-soft {
  border: 0;
  height: 1px;
  background-color: var(--bluegrey-soft);
  margin: 1.25rem 0;               /* adjust spacing as needed */
}

/* Faded edges (nice for full-width sections) */
.hr-fade {
  border: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(90,130,150,0),
    rgba(90,130,150,.25),
    rgba(90,130,150,0)
  );
  margin: 1.5rem 0;
}

/* Solid, thick horizontal rule */
.hr-thicc{
  border: 0;
  height: 3px;
  background-color: var(--bluegrey-soft);
  margin: 1.25rem 0;
}


/* Librarian Card */
    .card {
      margin-bottom: 20px;
    }

    .card-body {
      padding: 20px;
    }


/*================================
     Events
============================= */

/* Hide LibCal's auto-generated "Upcoming Events" header */
.s-lc-ea-h3 {
  display: none !important;
}

/* Base list (any LibCal UPC widget inside an item card) */
.wt-event-item [id^="api_upc_cid"] ul {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 1.15rem !important;
  line-height: 1.8 !important;
  color: #5a8296 !important;
}

/* Each item row */
.wt-event-item [id^="api_upc_cid"] li {
  padding: 1rem 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(90,130,150,0.25) !important;
  list-style-type: none !important;
  background-image: none !important;
}

.wt-event-item [id^="api_upc_cid"] li:last-child {
  border-bottom: none !important;
}

/* Item title (clickable link) */
.wt-event-item [id^="api_upc_cid"] li a {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: #003b5c !important;      /* navy */
  line-height: 1.6 !important;
  display: inline-block !important;
  margin-top: 0.25rem !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.wt-event-item [id^="api_upc_cid"] li a:hover {
  color: #00b5e2 !important;      /* bright blue hover */
  text-decoration: underline !important;
}

/* Date line (LibCal span above title) */
.wt-event-item [id^="api_upc_cid"] li span {
  display: block !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: #5a8296 !important;
  margin-bottom: 0.35rem !important;
}

/* =============================================
   Item-specific spacing
   ============================================= */
#api_upc_cid19397_iid735 li {
  padding: 1rem 0 !important;
  border-bottom: 1px solid rgba(90,130,150,0.25) !important;
}

#api_upc_cid19397_iid735 ul {
  font-size: 1.15rem !important;
  line-height: 1.8 !important;
}

/* Remove bullets from LibCal item list */
#api_upc_cid19397_iid735 ul {
  list-style-type: none !important;
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

#api_upc_cid19397_iid735 li {
  list-style-type: none !important;
  background-image: none !important;
}

/* =================================
  Campus Hero
================================= */

.wt-campus-hero {
  width: 100%;
  height: 320px;           /* desktop default */
  overflow: hidden;
}

.wt-campus-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* this is the crop */
  object-position: center; /* change if needed */
}

@media (max-width: 992px) {
  .wt-campus-hero {
    height: 260px;
  }
}

@media (max-width: 576px) {
  .wt-campus-hero {
    height: 200px;
  }
}


/* ===========================
   Campus Boxes (3x2 responsive)
   =========================== */

 /* Shared box grid structure */
.boxes-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:2rem;
  width:100%;
  max-width:none;
  margin:0;
}

.box{
  border-radius:var(--radius);
  padding:4.5rem 2.5rem 4rem;
  box-shadow:var(--shadow);
  border:2px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-align:center;
}

.box:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
  border-color:var(--brand-bright);
}

.box-icon{
  font-size:2.8rem;
  color:var(--icon-light);
  margin-bottom:0.75rem;
}

.box h3{
  font-size:1.8rem;
  font-weight:700;
  color:var(--brand-dark);
  margin:0 0 1.25rem 0;
}

.box p{
  margin:0 0 1rem 0;
  line-height:1.7;
  color:var(--icon-light);
}

.box a{
  display:inline-block;
  font-weight:600;
  text-decoration:none;
  margin-top:0.25rem;
  color:var(--brand-dark);
}

.box a:hover{
  color:var(--brand-bright);
  border-color:var(--brand-bright);
}


  /* Row sizing */
  .box--r1{ grid-column:span 2; }
  .box--r2{ grid-column:span 3; }
  .box--r3{ grid-column:span 6; }

  /* Responsive */
  @media (max-width:1024px){
    .boxes-grid{ grid-template-columns:repeat(2,1fr); }
    .box--r1, .box--r2, .box--r3{ grid-column:span 1; }
  }

  @media (max-width:600px){
    .boxes-grid{ grid-template-columns:1fr; }
  }

  .visually-hidden{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0);
    white-space:nowrap; border:0;
  }

  /* Safety override: ensure full width even if nested in .container */
  .campus-boxes.container, 
  .campus-boxes .container { 
    max-width:none; 
    padding-left:0; 
    padding-right:0; 
  } 

.box-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.box-link:focus-visible {
  outline: 3px solid #00b5e2; /* Wake Tech blue */
  outline-offset: 4px;
}


/* ===========================
   Variant 1: Campus Boxes (Grey)
   =========================== */
.campus-boxes{
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--white-transparent);
  padding:2rem 0;
}

.campus-boxes .box{
  background:var(--light-grey);
  border-color:transparent;
}

/* ===========================
   Variant 2: Research Boxes (White Transparent)
   =========================== */
.research-boxes{
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--white-transparent);
  padding:2rem 0;
}

.research-boxes .box{
  background:var(--white-transparent);
  border-color:var(--border-light); /* subtle grey border for definition */
}

/* Make entire research boxes clickable */
.research-boxes .box {
  cursor: pointer;
}

/* ===========================
   Variant 3: Multicolor Boxes (Light Tints)
   =========================== */

/* Container */
.multicolor-boxes{
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--white-transparent);
  padding:2rem 0;
}

/* Base box look for this variant */
.multicolor-boxes .box{
  /* no background here so the tint classes can win */
  border: 2px solid #5a8296 !important;
	box-shadow:var(--shadow); 
}

/* Shared headings/links tuned for contrast on light tints */
.multicolor-boxes .box h3{
  color:var(--text-dark);
}
.multicolor-boxes .box p{
  color:#2c3e47;
}
.multicolor-boxes .box .box-icon{
  color:var(--icon-dim);
}

/* Hover behavior */
.multicolor-boxes .box:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
}

.multicolor-boxes .box {
  cursor: pointer;
}




/* ---- Per-color modifiers ---- */

/* Light Blue */
.box--blue{
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.75)),
    var(--tint-blue-bg);
  border-color:var(--tint-blue-br);
}
.box--blue:hover{
  border-color:var(--brand-bright);          /* #00b5e2 */
}
.box--blue .wt-link,
.box--blue a{ color:var(--brand-bright); }
.box--blue a:hover{ color:var(--brand-dark); }

/* Light Gold */
.box--gold{
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.78)),
    var(--tint-gold-bg);
  border-color:var(--tint-gold-br);
}
.box--gold:hover{
  border-color:var(--brand-gold);
}
.box--gold .wt-link,
.box--gold a{ color:var(--brand-gold); }
.box--gold a:hover{ color:var(--brand-dark); }

/* Light Navy */
.box--navy{
  background:
    linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.80)),
    var(--tint-navy-bg);
  border-color:var(--tint-navy-br);
}
.box--navy:hover{
  border-color:var(--brand-dark);            /* #003b5c */
}
.box--navy .wt-link,
.box--navy a{ color:var(--brand-dark); }
.box--navy a:hover{ color:var(--brand-bright); }


/* Positioning fix for ::after */
.multicolor-boxes .box{ position:relative; }



/* =======================================
   Full-Width Quick Links Bar
   ======================================= */

.wt-quick-links {
  margin: 1.75rem auto 2.25rem;
  width: 100%;
}

.wt-quick-links-row {
  display: flex;
  flex-wrap: nowrap;         /* keep all 5 in a single row */
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

/* Bigger, full-width, evenly spaced */
.wt-quick-link {
  flex: 1 1 auto;            /* grow equally */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: 0.9rem 0.75rem;    /* ↑ bigger height */
  border-radius: 12px;
  background: rgba(255,255,255,0.95);

  text-decoration: none;
  text-align: center;

  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 1.5rem;          /* ↑ bigger text */
  font-weight: 700;
  color: #5a8296;

  border: 1px solid transparent;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);

  transition: all 0.18s ease-in-out;
}

/* Icon inline */
.wt-quick-link i {
  font-size: 1.1rem;
  color: #5a8296 !important;
}

/* Hover */
.wt-quick-link:hover {
  transform: translateY(-3px);
  border-color: #a89968;
  color: #003b5c;
}

.wt-quick-link:hover i {
  color: #003b5c !important;
}

/* Color tints */
.ql--blue {
  background: rgba(0,59,92,0.06);
  border-color: rgba(0,59,92,0.10);
}

.ql--gold {
  background: rgba(168,153,104,0.10);
  border-color: rgba(168,153,104,0.25);
}

.ql--navy {
  background: rgba(0,59,92,0.10);
  border-color: rgba(0,59,92,0.25);
}

.ql--teal {
  background: rgba(0,181,226,0.12);
  border-color: rgba(0,181,226,0.28);
}

.ql--neutral {
  background: rgba(90,130,150,0.10);
  border-color: rgba(90,130,150,0.28);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .wt-quick-links-row {
    flex-wrap: wrap;
  }
  .wt-quick-link {
    flex: 1 1 calc(50% - 0.75rem);
  }
}

@media (max-width: 480px) {
  .wt-quick-link {
    flex: 1 1 100%;
  }
}



/* Campus Card Heading */
.campus-card-heading {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  color: #003b5c;
  text-align: center;
  text-transform: uppercase;
  margin: 2rem auto 1rem auto;
  letter-spacing: 0.5px;
  position: relative;
}

/* Campus Card */

.campus-slider {
  --dark: var(--wt-dark, #003b5c);
  --bright: var(--wt-bright, #00b5e2);
  --gold: var(--wt-gold, #a89968);
  --muted: var(--wt-muted, #30607b);
  --bluegrey: #5a8296;
  --bluegrey-soft: rgba(90,130,150,.25);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  position: relative;
  max-width: 1200px;
  margin: 2rem auto;
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--bluegrey-soft);
  border-radius: 0;
  box-shadow: none;
}

.campus-slider .cs-viewport {
  overflow: hidden;
}

.campus-slider .cs-track {
  display: flex;
  transition: transform 0.6s ease;
}

.campus-slider .cs-slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 1.2fr;
  gap: 2rem;
  padding: 2.25rem 2rem;
  align-items: stretch;
}

@media (max-width: 900px) {
  .campus-slider .cs-slide {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }
}

/* ============================
   COPY COLUMN
============================ */

.cs-copy {
  background: transparent;
  border-right: 1px solid var(--bluegrey-soft);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 900px) {
  .cs-copy {
    border-right: none;
    border-bottom: 1px solid var(--bluegrey-soft);
  }
}

.cs-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bright);
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}

.cs-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  color: var(--dark);
  font-weight: 800;
  margin: 0.2rem 0 0.75rem;
}

.cs-text {
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.cs-btn {
  align-self: flex-start;
  background: var(--dark);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 0.75rem 1.1rem;
  border-radius: 0;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.cs-btn:hover {
  background: var(--bright);
  border-color: var(--gold);
}

/* ============================
   MEDIA COLUMN
============================ */

/* NEW: define a fixed crop box */
.cs-media {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;   /* Desktop crop */
  overflow: hidden;       /* Enables cropping */
}

/* UPDATED: image now auto-crops */
.cs-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* Auto-crop instead of stretch */
  object-position: center;
  display: block;
  border: none;
  border-left: 1px solid var(--bluegrey-soft);
  border-radius: 0;
}

@media (max-width: 900px) {
  .cs-media {
    aspect-ratio: 4 / 3;  /* Taller crop on mobile */
  }

  .cs-media img {
    border-left: none;
    border-top: 1px solid var(--bluegrey-soft);
  }
}

/* ============================
   Additional Details -- date and time
============================ */

.cs-details {
  margin-top: 0.75rem;
}

.cs-meta {
  margin: 0.25rem 0;
  font-size: 0.95rem;
}


/* ============================
   CONTROLS
============================ */

.cs-arrow {
  position: absolute;
  top: 85%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 0;
  border: 1px solid var(--bluegrey-soft);
  background: #fff;
  color: var(--dark);
  display: grid;
  place-items: center;
  box-shadow: none;
  z-index: 5;
}

.cs-prev { left: 12px; }
.cs-next { right: 12px; }

.cs-arrow:hover {
  background: var(--bright);
  color: #fff;
  border-color: var(--gold);
}

.cs-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
}

.cs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bluegrey-soft);
  border: none;
}

.cs-dot[aria-selected="true"] {
  background: var(--bright);
}


/* Accordian */
.accordion-wrapper {
  font-family: "Arizona", sans-serif;
  font-size: 20px;
  color: #333;
  line-height: 1.5;
  text-align: left; /* Justify left */
}

.accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align content to the left */
  text-decoration: none;
  color: #003b5c;
  font-weight: bold;
  cursor: pointer;
  padding: 10px 0;
}

.accordion-toggle:hover {
  text-decoration: none; /* Remove underline on hover */
}

.accordion-content a {
  text-decoration: none; /* Remove underline from links */
  color: #003b5c;
}

.accordion-content a:hover {
  text-decoration: underline; /* Optional: underline on hover */
}

.accordion-toggle .arrow {
  transition: transform 0.3s ease;
  margin-right: 10px;
}

/* Rotate arrow when expanded */
.accordion-toggle[aria-expanded="true"] .arrow {
  transform: rotate(90deg);
}


/* Ask the Question – Consolidated */

/* Container */
.atq-simple{
  border-top:10px solid var(--wt-vibrant);
  border-bottom:10px solid var(--wt-vibrant);
  padding:4rem 2rem;
  max-width:1100px;
  margin:3rem auto;
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--wt-dark);
  font-size:1.5rem;
  line-height:1.8;
}

.atq-callout{
  font-size:1.7rem;
  line-height:1.9;
  margin-bottom:4rem;
  color:var(--wt-muted);
}

/* Steps (mobile 1col → 3col ≥700px) */
.atq-steps{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  margin-bottom:4rem;
  align-items:stretch;
}
@media (min-width:700px){
  .atq-steps{ grid-template-columns:repeat(3,1fr); }
}

.atq-step{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  border:2px solid #d9e4eb;
  border-radius:16px;
  background:#fff;
  padding:2rem;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
  text-align:left;
}
.atq-step h4{
  font-size:2rem;
  font-weight:800;
  margin:0 0 1.5rem;
  color:var(--wt-dark);
  min-height:3.5rem;
  display:flex;
  align-items:center;
}
.atq-step p{
  font-size:1.5rem;
  line-height:1.9;
  color:var(--wt-muted);
  margin:0;
  flex-grow:1;
}

/* Legend */
.atq-legend{ display:flex; gap:3rem; flex-wrap:wrap; font-size:1.6rem; font-weight:700; }
.chip{ display:inline-flex; align-items:center; gap:12px; }
.dot{ width:22px; height:22px; border-radius:50%; display:inline-block; }
.dot.yes{ background:var(--yes); }
.dot.no{ background:var(--no); }

/* Current Question */
.atq-current{
  border-bottom:10px solid var(--wt-vibrant);
  padding:clamp(2rem,4vw,3.5rem) clamp(1rem,3vw,2rem);
  margin:3rem auto;
  max-width:var(--card-max);
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--wt-dark);
  background:var(--wt-white);
}

/* Header */
.atq-q-head{ display:grid; gap:.9rem; margin-bottom:clamp(1.5rem,3vw,2rem); }
.atq-q-badge{
  display:inline-block;
  font-size:.95rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--wt-bright);
  border:1px solid color-mix(in oklab, var(--wt-bright) 30%, #fff);
  background:color-mix(in oklab, var(--wt-bright) 8%, #fff);
  border-radius:999px;
  padding:.4rem .7rem;
}
.atq-q-title{
  margin:0;
  font-weight:800;
  font-size:clamp(1.9rem,3.6vw,2.6rem);
  line-height:1.15;
  letter-spacing:.01em;
  color:var(--wt-dark);
}
.atq-q-dates{ display:flex; flex-wrap:wrap; gap:.6rem .8rem; }
.atq-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700;
  font-size:clamp(1rem,1.8vw,1.1rem);
  padding:.45rem .75rem;
  border-radius:999px;
  border:1px solid #d9e4eb;
  background:#fff;
  color:var(--wt-dark);
}
.atq-chip-date{
  border-color:color-mix(in oklab, var(--wt-gold) 40%, #e7e2d8);
  background:color-mix(in oklab, var(--wt-gold) 10%, #fff);
}
.atq-chip-loc{
  border-color:color-mix(in oklab, var(--wt-bright) 30%, #e0f3f9);
  background:color-mix(in oklab, var(--wt-bright) 8%, #fff);
  color:var(--wt-dark);
}

/* Image + caption */
.atq-q-figure{ margin:0; text-align:center; }
.atq-q-figure img{
  border:2px solid #d9e4eb;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.atq-caption{
  margin-top:.8rem;
  font-size:clamp(1rem,1.6vw,1.1rem);
  color:var(--wt-muted);
}
.atq-caption::before{
  content:"";
  display:inline-block;
  width:.75rem; height:.75rem; border-radius:999px;
  background:var(--wt-bright);
  margin-right:.5rem;
  vertical-align:middle;
}

.atq-q-poll{ margin-top:1.5rem; }

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* Past Questions / Archive */
.atq-previous{
  width:100%;
  margin-left:-1rem;
  margin-right:-1rem;
}
@media (min-width:992px){
  .atq-previous{
    width:calc(100% + 3rem);
    margin-left:-1.5rem;
    margin-right:-1.5rem;
  }
}
.atq-previous h3{
  margin:0 0 1rem;
  font-size:clamp(1.4rem,2.4vw,1.8rem);
  font-weight:800;
  letter-spacing:.01em;
}

.atq-prev-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
@media(min-width:760px){
  .atq-prev-grid{ grid-template-columns:repeat(2,1fr); }
}

.atq-prev-card{
  border:1px solid #d9e4eb;
  border-radius:14px;
  background:#fff;
  padding:1rem 1rem 1.1rem;
  box-shadow:0 4px 10px rgba(0,0,0,.04);
}
.atq-prev-title{
  margin:.25rem 0 .5rem;
  font-size:1.15rem;
  font-weight:800;
  line-height:1.25;
}
.atq-prev-meta{
  display:flex; flex-wrap:wrap; gap:.4rem .6rem;
  margin-bottom:.8rem;
}
.atq-prev-meta .atq-chip{
  font-size:.95rem;
  padding:.35rem .65rem;
}

/* Result bar */
.atq-result{ display:flex; flex-direction:column; gap:.45rem; }
.atq-bar{
  position:relative;
  height:12px;
  width:100%;
  border-radius:999px;
  background:#eef4f8;
  overflow:hidden;
}
.atq-bar .yes-seg,
.atq-bar .no-seg{
  position:absolute; top:0; bottom:0;
}
.atq-bar .yes-seg{ left:0; background:var(--yes); }
.atq-bar .no-seg{ right:0; background:var(--no); }
.atq-tally{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.98rem; font-weight:700;
}
.atq-tally .chip{ gap:.5rem; }
.atq-tally .count{ opacity:.85; font-weight:600; }

.atq-prev-thumb{ display:flex; align-items:flex-start; gap:1rem; }
.atq-prev-thumb img{
  width:100px; height:auto;
  border-radius:10px;
  border:1px solid #d9e4eb;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.atq-prev-thumb-content{ flex:1; }

/* Headers */
.atq-header-banner{
  background:var(--wt-dark);
  color:#fff;
  text-align:center;
  padding:clamp(2.5rem,6vw,4rem) 1.5rem;
  border-bottom:10px solid var(--wt-vibrant);
  border-radius:16px;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  margin-bottom:3rem;
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.atq-header-banner .atq-header-badge{
  display:inline-block;
  font-size:.95rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  color:#fff;
  background:var(--wt-vibrant);
  border-radius:999px;
  padding:.4rem .8rem;
  margin-bottom:1rem;
}
.atq-header-banner h1{
  font-size:clamp(2rem,4.5vw,2.8rem);
  font-weight:800;
  letter-spacing:.02em;
  margin:0 0 .5rem;
  color:#fff;
}
.atq-header-banner p{
  font-size:clamp(1.1rem,2vw,1.3rem);
  font-weight:500;
  color:#e2ebf1;
  margin:0;
}

/* Transparent variant */
.atq-header-transparent{
  background:transparent;
  color:var(--wt-dark);
  box-shadow:none;
  border-bottom:none;
  text-align:center;
  padding:2rem 1rem 1rem;
}
.atq-header-transparent h1{
  font-size:clamp(2.8rem,6vw,4rem);
  font-weight:900;
  color:var(--wt-dark);
  margin-bottom:.5rem;
}
.atq-header-transparent p{
  font-size:clamp(1.2rem,2vw,1.4rem);
  color:var(--wt-muted);
  max-width:700px;
  margin:0 auto;
}

/* Header with background icon */
.atq-header-bg{
  background-blend-mode:multiply;
  padding:clamp(2.5rem,6vw,4rem);
  color:var(--wt-dark);
  position:relative;
  overflow:hidden;
}
.atq-header-shadow{
  background-color:rgba(255,255,255,.9);
  box-shadow:0 6px 24px rgba(0,0,0,.15);
  border-radius:16px;
  padding:clamp(2rem,4vw,3rem);
  max-width:1100px;
  margin:0 auto;
  position:relative;
  z-index:2;
}
.atq-header-content{
  max-width:800px; /* merged */
  margin:0 auto;   /* merged */
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  text-align:left;
}
.atq-header-text h1{
  font-size:clamp(3.8rem,8vw,5.6rem);
  font-weight:900;
  text-transform:uppercase;
  margin:.2em 0;
  line-height:1.05;
  color:var(--wt-dark);
}
.atq-header-text p{
  font-size:clamp(1.25rem,1.8vw,1.45rem);
  color:var(--wt-muted);
  max-width:650px;
  margin-top:.5rem;
}
.atq-header-badge--light{
  display:inline-block;
  font-size:1rem;
  text-transform:uppercase;
  background:#e9f0f3;
  color:var(--wt-dark);
  border-radius:999px;
  padding:.3rem .8rem;
  font-weight:600;
}


/* ===============================
   Compact Subheader (Previous Answers)
   =============================== */

/* Container */
.atq-subheader{
  background: transparent;                     /* stays light/transparent */
  padding: clamp(1.25rem, 3.5vw, 1.75rem) 1rem;
  margin: 2rem 0 1.5rem;
  position: relative;
}

/* Inner frame with soft lift (optional) */
.atq-subheader-inner{
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(255,255,255,.9);            /* improves legibility on busy pages */
  border-radius: var(--atq-sub-radius);
  box-shadow: var(--atq-sub-shadow);
  border: 1px solid #e9eef2;                   /* hairline edge */
  padding: clamp(1rem, 3vw, 1.25rem) clamp(1rem, 3.5vw, 1.5rem);
}

/* Text block */
.atq-subheader-text{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Title + optional underline accent */
.atq-subheader-text h2{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);     /* smaller than h1 */
  line-height: 1.15;
  color: var(--wt-dark);
  margin: 0;
  position: relative;
  padding-bottom: .3rem;
}

.atq-subheader-text h2::after{
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: var(--wt-vibrant);               /* Wake Tech bright accent */
  margin-top: .4rem;
}

/* Supporting line */
.atq-subheader-text p{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  color: var(--wt-muted);
  margin: 0 0 0 .25rem;
  flex: 1 1 auto;
  min-width: 240px;
}

/* Optional compact variant if you need it even tighter */
.atq-subheader--condensed .atq-subheader-inner{
  padding: .8rem 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.atq-subheader--condensed .atq-subheader-text h2{
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}
.atq-subheader--condensed .atq-subheader-text h2::after{
  width: 56px; height: 3px;
}

/* Dark (blue) variant for the subheader, scaled smaller than the main hero */
.atq-subheader--dark .atq-subheader-inner{
  background: var(--wt-dark);
  color: #fff;
  border: none;                         /* remove the light hairline */
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.atq-subheader--dark .atq-subheader-text h2{
  color: #fff;
}

.atq-subheader--dark .atq-subheader-text h2::after{
  background: var(--wt-vibrant);        /* keep the Wake Tech accent */
}

.atq-subheader--dark .atq-subheader-text p{
  color: #e2ebf1;                       /* lighter supporting text on blue */
}

/* Fade-in */
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(15px); }
  to{ opacity:1; transform:translateY(0); }
}
.atq-header-text > *{ animation:fadeInUp .6s ease both; }

/* Subtle watermark */
.atq-header-bg::after{
  content:"";
  position:absolute;
  bottom:0; right:0;
  width:240px; height:240px;
  background:url("https://d2jv02qf7xgjwx.cloudfront.net/accounts/431140/images/answer_question_icon.png") no-repeat bottom right / contain;
  opacity:.12;
  pointer-events:none;
}

/* Grid layout + action card */
.grid-2{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  margin:2.5rem auto;
  max-width:900px;
  text-align:center;
}
@media (min-width:700px){
  .grid-2{ grid-template-columns:repeat(2,1fr); }
}
.card-action{
  display:block;
  background:var(--wt-dark);
  color:#fff;
  text-decoration:none;
  border-radius:16px;
  padding:2.5rem 1.5rem;
  transition:all .3s ease;
  font-family:"Montserrat",sans-serif;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  border:4px solid transparent;
}
.card-action:hover{
  background:var(--wt-bright);
  transform:translateY(-5px);
  color:#fff;
  border-color:var(--wt-gold);
}
.card-action h3{ font-size:1.8rem; margin-bottom:.5rem; font-weight:700; }
.card-action p{ font-size:1.2rem; line-height:1.6; color:#e8f4fa; margin:0; }


/* ==========================================
   Ask the Question – Enhanced Card Layout (2 per row)
   ========================================== */

.atq-prev-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  justify-items: center;
  align-items: start;
  padding: 1.5rem 0;
}

@media (max-width: 760px) {
  .atq-prev-grid {
    grid-template-columns: 1fr;
  }
}

.atq-prev-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: 1px solid #e0e6eb;
  transition: all 0.3s ease;
  max-width: 480px;
  width: 100%;
}

.atq-prev-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.atq-prev-thumb {
  position: relative;
  width: 100%;
}

.atq-prev-thumb img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.atq-prev-thumb-content {
  padding: 1.25rem 1.5rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.atq-prev-meta {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.atq-prev-title {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--wt-dark);
  margin: 0 0 1rem 0;
  text-transform: uppercase;
}

.atq-result {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.atq-bar {
  height: 12px;
  border-radius: 999px;
  background: #eef4f8;
  overflow: hidden;
  position: relative;
}

.atq-bar .yes-seg,
.atq-bar .no-seg {
  position: absolute;
  top: 0;
  bottom: 0;
}

.atq-bar .yes-seg { left: 0; background: var(--yes); }
.atq-bar .no-seg  { right: 0; background: var(--no); }

.atq-tally {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--wt-dark);
}

.chip { display: inline-flex; align-items: center; gap: 0.5rem; }
.dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.dot.yes { background: var(--yes); }
.dot.no { background: var(--no); }
.count { opacity: 0.85; font-weight: 600; }

/* ============================
   Wake Tech Flat Subheader
   ============================ */

.wt-subheader {
  background: transparent;
  margin: 2.5rem 0 2rem;
  padding: 0;
}

.wt-subheader-text h2 {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  color: #003b5c; /* Wake Tech dark blue */
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wt-subheader-text p {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  color: #5a8296; /* blue-grey accent text */
  margin: 0.25rem 0 0;
}

/* Flex container that stays inside the page bounds */
.container-flex {
  max-width: 1140px;      /* adjust if your theme is narrower/wider */
  margin: 0 auto;
  padding: 0 1rem;
}

/* Two-column flex row with equal-height cards */
.wt-two-col {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;           /* space between boxes */
  align-items: stretch;   /* make heights match */
}

/* Each box takes half the row on desktop, full width on mobile */
.wt-two-col .wt-box {
  flex: 1 1 calc(50% - 0.625rem);  /* half width minus half the gap */
  min-width: 300px;                 /* prevents crunching on mid widths */
  display: flex;                    /* equal-height internals */
  flex-direction: column;
  box-sizing: border-box;
}

/* Stack to 1-per-row on smaller screens */
@media (max-width: 768px) {
  .wt-two-col .wt-box {
    flex-basis: 100%;
  }
}

/* --- Box + icon styling (from earlier) --- */
.wt-box {
  background: #fff;
  border: 2px solid rgba(0,59,92,.15);
  border-left: 6px solid #00b5e2;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  padding: 2rem 1.75rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	margin-bottom: 1rem;
}
.wt-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  border-left-color: #a89968;
}
.wt-box h4 {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 1.65rem; font-weight: 800; color: #003b5c;
  margin: 0 0 .75rem 0; text-transform: uppercase; letter-spacing: .5px;
  display: flex; align-items: center; gap: .6rem;
}
.wt-box p {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 1.25rem; line-height: 1.7; color: #5a8296; margin: 0;
}
.wt-box a { color: #00b5e2; text-decoration: none; }
.wt-box a:hover { color: #003b5c; text-decoration: underline; }
.wt-icon { color: #00b5e2; font-size: 1.4rem; }
.wt-icon-sm { color: #00b5e2; font-size: 1.1rem; margin-right: .4rem; }
.wt-box:hover .wt-icon, .wt-box:hover .wt-icon-sm { color: #a89968; }

/* 3-column flex row for staff directory */
.wt-three-col {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: stretch;  /* equal heights */
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Each box takes 1/3 width on desktop, adjusts on tablet/mobile */
.wt-three-col .wt-box {
  flex: 1 1 calc(33.333% - 0.833rem);
  min-width: 280px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Two per row on medium screens */
@media (max-width: 992px) {
  .wt-three-col .wt-box {
    flex: 1 1 calc(50% - 0.625rem);
  }
}

/* One per row on small screens */
@media (max-width: 640px) {
  .wt-three-col .wt-box {
    flex: 1 1 100%;
  }
}



/* ============================
   Wake Tech Services / Initiatives – Simple List
   ============================ */

.wt-services-list {
  margin: 2.5rem auto;
  max-width: 1140px;
  padding: 0 1rem;
}

.wt-service-item {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.wt-service-item:last-child {
  border-bottom: none;
}

/* Header */
.wt-service-item h3 {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: #003b5c;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Header */
.wt-service-item h1 {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 3.4rem;
  color: #003b5c;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Description */
.wt-service-item p {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #5a8296;
  margin: 0 0 0.75rem;
}

/* Link */
.wt-service-link {
  font-weight: 700;
  color: #00b5e2;
  text-decoration: none;
  transition: color 0.2s ease;
}

.wt-service-link:hover {
  color: #003b5c;
  text-decoration: underline;
}

.wt-service--topline {
  border-top: 1px solid rgba(90,130,150,0.25);
  padding-top: 1rem; /* optional for breathing room */
}

/* Turn this row into a CSS grid instead of Bootstrap floats */
.wt-services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* two per row */
  gap: 2rem 3rem;                                    /* row / column spacing */
}

/* Neutralize Bootstrap float behavior inside this grid */
.wt-services-grid > [class*="col-"] {
  float: none;
  width: auto;
}

/* Make cards fill their grid cell nicely */
.wt-service-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}


/* ============================
   Wake Tech – Themed Lists (UL / OL)
   ============================ */


/* ============================
   H2 Heading Style
   ============================ */
.wt-service-item h2 {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: #003b5c;
  margin: 1rem 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================
   List Styling — Option C
   Minimal, Soft, Accessible
   ============================ */

/* Unordered lists */
.wt-service-item ul {
  list-style: none;
  padding-left: 0;
  margin: 1.25rem 0;
}

.wt-service-item ul li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 1rem;
  font-size: 1.15rem;
  line-height: 1.7;
  color: #003b5c;
}

/* Soft teal bullet */
.wt-service-item ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65rem;
  width: 0.6rem;
  height: 0.6rem;
  background: #00b5e2;
  border-radius: 50%;
}

/* Ordered lists (simple decimal) */
.wt-service-item ol {
  list-style: decimal;
  padding-left: 1.75rem;
  margin: 1.25rem 0;
}

.wt-service-item ol li {
  margin-bottom: 1rem;
  font-size: 1.15rem;
  line-height: 1.7;
  color: #003b5c;
}


/* Responsive: single column on smaller screens */
@media (max-width: 768px) {
  .wt-services-grid {
    grid-template-columns: 1fr;
  }
}

/* Grid for Course Support section */
.course-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));  /* 6 tracks like boxes-grid */
  column-gap: 3rem;
  row-gap: 2rem;
}

/* Half-width items (2 per row on desktop) */
.cs--half {
  grid-column: span 3;
}

/* Optional: full-width variant if you ever need it */
.cs--full {
  grid-column: span 6;
}

/* Make cards fill the grid cell nicely */
.course-grid .wt-service-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Responsive: 2 columns on medium screens */
@media (max-width: 1024px) {
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cs--half,
  .cs--full {
    grid-column: span 1;
  }
}

/* Responsive: 1 column on small screens */
@media (max-width: 600px) {
  .course-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================
   Wake Tech Anchor Nav (Left-aligned Pills)
   ============================ */

.wt-anchor-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.75rem 1rem;          /* keep pill spacing */
  margin: 1.5rem 0 2rem;      /* tighten only outside spacing */
  padding: 0 1rem;
  max-width: 1140px;
}


.wt-pill {
  display: inline-block;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00b5e2;
  border: 2px solid rgba(0,181,226,0.4);
  background: rgba(0,181,226,0.1);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.wt-pill:hover,
.wt-pill:focus {
  color: #003b5c;
  background: rgba(0,181,226,0.18);
  border-color: #a89968;  /* gold accent */
  transform: translateY(-2px);
  outline: none;
}

/* Optional sticky behavior */
@media (min-width: 768px) {
  .wt-anchor-nav.wt-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #ffffff;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(90,130,150,0.15);
  }
}

/* Smaller "Back to Menu" pill */
.wt-pill--small {
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.4rem 1rem;
  border-width: 1px;
}

/* Right-aligned back-to-menu container */
.wt-backtotop {
  text-align: right;
  margin: 1.5rem auto 2rem;
  max-width: 1140px;
  padding: 0 1rem;
}

html { scroll-behavior: smooth; }

/* Primary / emphasis pill */
.wt-pill--primary {
  background-color: #003b5c;   /* Wake Tech dark blue */
  border-color: #003b5c;
  color: #ffffff;
}

.wt-pill--primary:hover,
.wt-pill--primary:focus {
  background-color: #002c46;
  border-color: #a89968;
  color: #ffffff;
}

/* ==========================================================
   Compact Previous / Next Pager
   Square Corners + WT Blue / Gold Tints
   ========================================================== */

#s-lg-page-prevnext.pager {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.5rem;

    margin: 1.5rem 0 2rem;
    padding: 0;
    list-style: none;

}


/* Remove default floats */
#s-lg-page-prevnext .previous,
#s-lg-page-prevnext .next {
    float: none !important;
    flex: 1 1 auto;
}

/* Base link style — compact + square */
#s-lg-page-prevnext .page-link {
    display: block;
    width: 100%;

    padding: 0.55rem 0.75rem;      /* ↓ smaller height */
    border-radius: 0;              /* ← square corners */
    text-align: center;
    text-decoration: none;

    font-family: "Montserrat", system-ui, sans-serif !important;
    font-weight: 600;
    font-size: 4.5rem;            /* ↓ smaller text */

    color: #003b5c;                /* WT navy */
    border: 1px solid transparent;

    transition: all 0.18s ease-in-out;
}

/* ---------- Color Assignments ---------- */

/* Previous = BLUE TINT */
#s-lg-page-prevnext .previous .page-link {
    background: rgba(0,181,226,0.12);
    border-color: rgba(0,181,226,0.28);
    color: #003b5c;
}

/* Next = GOLD TINT */
#s-lg-page-prevnext .next .page-link {

    background: rgba(168,153,104,0.12);
    border-color: rgba(168,153,104,0.28);
    color: #5a4f33; /* readable dark gold/navy blend */
}

/* ---------- Hover Styles (WT Gold border) ---------- */
#s-lg-page-prevnext .page-link:hover {
    border-color: #a89968;
    background: #ffffff;
    color: #003b5c !important;
}

/* Make “Previous:” / “Next:” labels gold */
#s-lg-page-prevnext strong {
    color: #a89968 !important;
    font-weight: 700;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
    #s-lg-page-prevnext.pager {
        flex-direction: column;
    }
}


/* ==========================================================
   Tall + Narrow Previous / Next Pager
   Square Corners + WT Blue / Gold Tints
   ========================================================== */

/* Hide the "Previous:" and "Next:" labels in pager */
#s-lg-page-prevnext strong {
    display: none !important;
}

#s-lg-page-prevnext.pager {
    display: flex;
    justify-content: center;          /* center in row */
    align-items: stretch;
    gap: 4.25rem;                      /* WHITE SPACE between boxes */

    margin: 2rem 0 2.5rem;
    padding: 0;
    list-style: none;
}

/* Remove default floats */
#s-lg-page-prevnext .previous,
#s-lg-page-prevnext .next {
    float: none !important;

    /* ↓↓↓ Make boxes narrower */
    flex: 0 0 auto;
    width: 43rem;                      /* <<< Adjust this number */
    max-width: 43rem;
}

/* Tall + narrow box styling */
#s-lg-page-prevnext .page-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    padding: 1.5rem 0.75rem;             /* <<< Bigger height */
    border-radius: 0;                  /* square corners */
    text-align: center;
    text-decoration: none;

    font-family: "Montserrat", system-ui, sans-serif !important;
    font-weight: 600;
    font-size: 1.1rem;

    color: #003b5c;
    border: 1px solid transparent;
    transition: all 0.18s ease-in-out;
}

/* Previous = BLUE TINT */
#s-lg-page-prevnext .previous .page-link {
    background: rgba(0,181,226,0.12);
    border-color: rgba(0,181,226,0.28);
}

/* Next = GOLD TINT */
#s-lg-page-prevnext .next .page-link {
    background: rgba(168,153,104,0.12);
    border-color: rgba(168,153,104,0.28);
    color: #5a4f33;
}

/* Hover */
#s-lg-page-prevnext .page-link:hover {
    border-color: #a89968;
    background: #ffffff;
    color: #003b5c !important;
}



/* Mobile stacking */
@media (max-width: 768px) {
    #s-lg-page-prevnext.pager {
        flex-direction: column;
        align-items: center;
    }

    #s-lg-page-prevnext .previous,
    #s-lg-page-prevnext .next {
        width: 90%;
        max-width: none;
    }
}

/* Links inside the wt-boxes */
.wt-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-weight: 700;
  color: #00b5e2;
  text-decoration: none;
  transition: color 0.2s ease;
}

.wt-link:hover {
  color: #003b5c;
  text-decoration: underline;
}

/* Larger icons in this section */
.wt-box .wt-icon {
  color: #00b5e2;
  margin-right: 0.6rem;
  font-size: 1.4rem;
  vertical-align: middle;
}

.wt-box:hover .wt-icon {
  color: #a89968; /* gold hover accent */
}


/* Remove LibGuides default Back-to-Top button */
#s-lib-scroll-top {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================
   Embeded Video
   ========================================================== */
	
	
.wt-video-wrapper {
    width: 100%;
    max-width: 100%;
    border: 2px solid #5a8296 !important;
    padding: 0;
    margin: 0 auto;
  }

  .wt-video-wrapper iframe {
    width: 100% !important;
    height: 315px; /* or switch to responsive below */
    display: block;
  }	

/* ==========================================================
   Video Grid (2 per row + titles) — SCOPED
   ========================================================== */

.wt-video-gallery{
  margin: 2rem 0;
}

/* 2-up grid on desktop, 1-up on mobile */
.wt-video-gallery .wt-video-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}

/* Card wrapper */
.wt-video-gallery .wt-video-card{
  font-family: "Montserrat", Arial, sans-serif;
}

/* Responsive embed with border like your current wrapper */
.wt-video-gallery .wt-video-embed{
  width: 100%;
  border: 2px solid #5a8296;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  position: relative;
  aspect-ratio: 16 / 9;
}

/* Absolute iframe to fill the aspect-ratio box */
.wt-video-gallery .wt-video-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Title under video */
.wt-video-gallery .wt-video-title{
  margin: .65rem 0 0 0;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--brand-dark, #003b5c);
}

/* Mobile: 1 per row */
@media (max-width: 800px){
  .wt-video-gallery .wt-video-grid{
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}


/* =========================================================
   Campus Libraries Card Grid (Appointments)
   ========================================================= */

/* Grid container for campus cards */
.campus-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

/* Base “pattern” style (shared behavior) */
.pattern-north,
.pattern-south,
.pattern-rtp,
.pattern-east,
.pattern-west,
.pattern-psec,
.pattern-phsl {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-top: 8px solid #00b5e2;
  color: #ffffff;
  padding: 4rem;
  min-height: 30rem;
}

/* Background images per campus */
.pattern-north {
  background-image: url('https://d2jv02qf7xgjwx.cloudfront.net/accounts/431140/images/first_floor.jpg');
}
.pattern-south {
  background-image: url('https://d2jv02qf7xgjwx.cloudfront.net/accounts/431140/images/south_campus_2.jpg');
}
.pattern-rtp {
  background-image: url('https://d2jv02qf7xgjwx.cloudfront.net/accounts/431140/images/rtp_campus.png');
}
.pattern-east {
  background-image: url('https://d2jv02qf7xgjwx.cloudfront.net/accounts/431140/images/east_campus.png');
}
.pattern-west {
  background-image: url('https://d2jv02qf7xgjwx.cloudfront.net/accounts/431140/images/west_campus_2.png');
}

.pattern-psec {
  background-image: url('https://d2jv02qf7xgjwx.cloudfront.net/accounts/431140/images/psec.jpg');
}

.pattern-phsl {
  background-image: url('https://d2jv02qf7xgjwx.cloudfront.net/accounts/431140/images/phsl_campus.jpg');
}

/* Dark overlay on top of the background image */
.pattern-north::before,
.pattern-south::before,
.pattern-rtp::before,
.pattern-east::before,
.pattern-west::before,
.pattern-phsl::before, 
.pattern-psec::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(61, 57, 53, 0.8);
  z-index: 1;
}

/* Content wrapper sits above overlay */
.makerspace-card {
  font-family: 'Montserrat', sans-serif;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Header typography inside each card */
.media-title h1,
.media-title h6 {
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
  line-height: 1.2;
  margin: 0;
}

.media-title h1 {
  font-size: 4.5rem;
}

.media-title h6 {
  font-size: 1.75rem;
  margin-top: -0.55rem;
  margin-bottom: 2rem;
}

/* Button group wrapper */
.button_media-group {
  margin-top: 6rem;
  margin-bottom: 4rem;
}

/* Base button style */
.button-base {
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  display: inline-block;
  margin: 5px;
  border: 0.25rem solid #ffffff;
  width: 100%;
  max-width: 200px;
  text-align: center;
  box-sizing: border-box;
}

/* Button color variants used in the HTML */
.reserve-button_media {
  background-color: #00b5e2;
  color: #ffffff;
}
.reserve-button_media:hover {
  background-color: #006ba6;
}

.reserve-equipment-button_media {
  background-color: #a89968;
  color: #ffffff;
}
.reserve-equipment-button_media:hover {
  background-color: #8b7e55;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .pattern-north,
  .pattern-south,
  .pattern-rtp,
  .pattern-east,
  .pattern-west {
    padding: 2rem;
  }
}

@media (max-width: 600px) {
  .button-base {
    width: 90%;
    max-width: 300px;
  }
}

.wt-label-dark {
  background-color: #003b5c; /* Wake Tech dark blue */
  color: #ffffff;
  padding: 0.75rem 0.15rem;
  border-radius: 4px;
  font-weight: 700;
  margin-right: 0.25rem;
  display: inline-block;
  line-height: 1.4;
}

/* =========================================
   Vertical Campus Appointment List
========================================= */

.wt-campus-list {
  max-width: 900px;
  margin: 0 auto;
}

/* Each row */
.wt-campus-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(0, 59, 92, 0.15);
}

/* Campus name (only if you're actually using an h3 somewhere) */
.wt-campus-row h3 {
  margin: 0;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--brand-dark);
}

/* Last row divider cleanup */
.wt-campus-row:last-child {
  border-bottom: none;
}

/* =========================================================
   FIX: Mobile gap between campus name and buttons
   ========================================================= */

@media (max-width: 650px){

  .wt-campus-row{
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
    padding: 0.75rem 0 !important;
  }

  /* Campus name is a link in your HTML */
  .wt-campus-name{
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
  }

  /* If a heading is used anywhere */
  .wt-campus-row h3{
    margin: 0 !important;
  }

  /* Campus name (link styled like a heading) */
.wt-campus-name{
  margin: 0;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--brand-dark);
  text-decoration: none;
  display: block;          /* ensures clean stacking on mobile */
}

.wt-campus-name:hover{
  text-decoration: underline;
}

  .wt-campus-actions{
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* Kill any mystery margins on the buttons */
  .wt-campus-actions .button-base,
  .wt-campus-actions .reserve-button_media{
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
  }

  .wt-campus-actions .button-base:last-child{
    margin-bottom: 0 !important;
  }
}

@media (max-width: 520px){
  .wt-campus-actions .button-base{
    width: 100% !important;
    text-align: center !important;
  }
}

@media (max-width: 650px){

  /* Stack name + actions vertically (this is the missing piece) */
  .wt-campus-row{
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
  }

  /* Your HTML uses <a class="wt-campus-name"> (not an h3) */
  .wt-campus-name{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
    display: block !important;
    width: 100% !important;
  }

  .wt-campus-actions{
    width: 100% !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  .wt-campus-actions .button-base{
    margin: 0 0 0.5rem 0 !important;
  }

  .wt-campus-actions .button-base:last-child{
    margin-bottom: 0 !important;
  }
}

/* =========================================
   WT Equipment Accordion (compact but readable)
   Larger fonts + larger overall spacing
   ========================================= */

.wt-equip-accordion{
  max-width: 1140px;
  margin: 1.75rem auto;
  padding: 0 1rem;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ---------- Item shell ---------- */

.wt-equip-item{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1rem;
  background: #ffffff;
}

/* ---------- Summary (collapsed row) ---------- */

.wt-equip-summary{
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.1rem; /* OPTIONAL spacing applied */
  background: #f6f8fa;
}

.wt-equip-summary::-webkit-details-marker{
  display: none;
}

/* ---------- Left image ---------- */

.wt-equip-left{
  display: flex;
  align-items: center;
}

.wt-equip-thumb{
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #ffffff;
}

/* ---------- Title block ---------- */

.wt-equip-title{
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}

.wt-equip-name{
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.25;
  color: #003b5c;
}

.wt-equip-meta{
  font-size: 1.05rem;
  line-height: 1.3;
  color: rgba(0,0,0,.75);
}

/* ---------- Chevron ---------- */

.wt-equip-chevron{
  width: 11px;
  height: 11px;
  border-right: 3px solid #00b5e2;
  border-bottom: 3px solid #00b5e2;
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-left: .25rem;
}

.wt-equip-item[open] .wt-equip-chevron{
  transform: rotate(-135deg);
}

/* ---------- Expanded panel ---------- */

.wt-equip-panel{
  padding: 1rem 1.1rem 1.2rem; /* OPTIONAL spacing applied */
  font-size: 1.05rem;
  line-height: 1.6;
  background: #ffffff;
}

/* ---------- Subheadings ---------- */

.wt-equip-h4{
  margin: .4rem 0 .5rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: #003b5c;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------- Lists ---------- */

.wt-equip-steps,
.wt-equip-bullets{
  margin: .25rem 0 1rem 1.25rem;
  padding: 0;
}

.wt-equip-steps li,
.wt-equip-bullets li{
  margin: .35rem 0;
}

/* ---------- Callout boxes ---------- */

.wt-equip-callouts{
  display: grid;
  gap: .6rem;
  margin: .5rem 0 1rem;
}

.wt-equip-callout{
  border-left: 6px solid #a89968;
  background: #fbfaf6;
  padding: .75rem .85rem;
  font-size: 1.05rem;
}

/* ---------- Video / action links ---------- */

.wt-equip-video{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .4rem;
}

.wt-equip-link{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .9rem;
  border-radius: 999px;
  background: #003b5c;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none !important;
}

.wt-equip-link:hover{
  background: #00b5e2;
  color: #003b5c !important;
}

/* ---------- Accessibility ---------- */

.wt-equip-summary:focus-visible{
  outline: 3px solid #00b5e2;
  outline-offset: 3px;
}

/* =========================================
   Status banner – Unavailable (red, square)
   ========================================= */

.wt-status{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.4;
  padding: 1rem 1.1rem;
  margin: 0.75rem 0 1rem;
  border-radius: 0;        /* square corners */
}

/* Unavailable state */
.wt-status--unavailable{
  background: #b00020;     /* accessible red */
  color: #ffffff;
}

/* Emphasis on lead text */
.wt-status strong{
  font-weight: 800;
  margin-right: 0.25rem;
}

/* ============================
   Equipment flags (chips)
   ============================ */
.wt-equip-flags{
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
 margin-left:1rem;
}

.wt-flag{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: .78rem;
  line-height: 1;
  padding: .35rem .55rem;
  border-radius: 999px;
  letter-spacing: .02em;
  text-transform: uppercase;
  border: 1px solid rgba(0, 59, 92, .18);
  color: #003b5c;
  background: rgba(0, 181, 226, .10);
}

.wt-flag--software{
  background: rgba(168, 153, 104, .18); /* gold tint */
  border-color: rgba(168, 153, 104, .45);
}


/* -----------------------------
   Component wrapper + layout
------------------------------ */
.wtr-wrap{
  margin: 2.5rem 0;
  max-width: 100%;
  overflow-x: clip; /* prevents horizontal scroll / layout pushing */
  font-family: "Montserrat","Nunito Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  /* ✅ NEW: enable container queries so layout responds to the box width */
  container-type: inline-size;
  container-name: wtr;
}

.wtr-list{ display: block; }

.wtr-row{
  display: grid;

  /* KEY FIX: remove the 620px minimum that can force overflow */
  grid-template-columns: minmax(260px, 1fr) minmax(0, 760px);

  align-items: center;
  column-gap: 1.75rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--wtr-divider, rgba(0,59,92,.14));
}

/* KEY FIX: grid items must be allowed to shrink */
.wtr-name,
.wtr-actions{
  min-width: 0;
}

.wtr-name{
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--wtr-dark, #003b5c);
  text-decoration: none;
  margin: 0;
}

.wtr-name:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -----------------------------
   Actions layout + slot locking
------------------------------ */
.wtr-actions{
  width: 100%;
  display: flex;
  flex-wrap: wrap;  /* ✅ critical for wrapping */
  gap: .9rem;

  /* keep 3 “slots” so the system stays consistent */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* (harmless; grid-only) */
}

/* Slot locking (default) */
.wtr-actions .wtr-slot-1{ grid-column: 1; order: 1; }
.wtr-actions .wtr-slot-2{ grid-column: 2; order: 2; }
.wtr-actions .wtr-slot-3{ grid-column: 3; order: 3; }

/* ✅ iOS-safe KEY FIX:
   Add class "wtr-actions--2" to rows that only have 2 buttons.
   (With flex, this isn’t required, but it’s fine to keep.) */
.wtr-actions--2 .wtr-slot-2{
  grid-column: 2 / -1; /* (harmless; grid-only) */
}

/* -----------------------------
   Button base + size modifiers
------------------------------ */
.wtr-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* ✅ NEW: prevents skinny right-column buttons */
  flex: 1 1 240px;     /* grow/shrink with a sane minimum */
  min-width: 240px;

  width: 100%;
  padding: .8rem 1rem;

  border-radius: 0;
  border: 2px solid transparent;

  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.05;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;

  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background-color .12s ease;
  box-shadow: var(--wtr-shadow, 0 6px 14px rgba(0,0,0,.08));
}

.wtr-btn:focus{
  outline: 3px solid rgba(0,181,226,.35);
  outline-offset: 2px;
	color:#fff;
}

.wtr-btn:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
  box-shadow: var(--wtr-shadow-hover, 0 10px 18px rgba(0,0,0,.12));
	color:#fff;
}

/* Larger CTA */
.wtr-btn--large{
  font-size: 1.15rem;          /* cleaned: was 1.5rem */
  padding: 1.05rem 1.6rem;
}

/* Width helpers (fixed: narrow was incorrectly 60%) */
.wtr-btn--narrow{ width: 40%; }
.wtr-btn--wide{ width: 60%; }

/* -----------------------------
   Color variants (component-native)
   (keep these if you still use wtr-btn--blue etc.)
------------------------------ */
.wtr-btn--blue{
  background: var(--wtr-bright, #00b5e2);
  color: var(--wtr-dark, #003b5c);
}

.wtr-btn--dark{
  background: var(--wtr-dark, #003b5c);
  color: #fff;
}

.wtr-btn--bluegray{
  background: var(--wtr-bluegrey, #5a8296);
  color: #fff;
}

/* -----------------------------
   Utility button variants (.btn-*)
   Cleaned: fixed incorrect hover on .btn-bluegrey
------------------------------ */
.btn-yellow{
  background-color: var(--wtr-yellow, #FFD300);
  color: var(--wt-dark, #003b5c);
  border-color: var(--wtr-yellow, #FFD300);
}
.btn-yellow:hover{
  background-color: var(--wtr-yellow-hover, #e6bf00);
  border-color: var(--wtr-yellow-hover, #e6bf00);
}

.btn-bluegrey{
  background-color: var(--wtr-bluegrey, #5a8296);
  color: #fff;
  border-color: var(--wtr-bluegrey, #5a8296);
}
.btn-bluegrey:hover{
  background-color: #4e7284;
  border-color: #4e7284;
}

/* -----------------------------
   Icon spacing (shared)
------------------------------ */
.wtr-btn-icon{
  display: inline-flex;
  align-items: center;
  margin-right: .65rem;
}
.wtr-btn-icon svg{
  width: 1.3em;
  height: 1.3em;
}

/* =========================================================
   ✅ NEW: Container Query (the real fix for your screenshot)
   When the *component’s box* is narrow, stack name + buttons
   regardless of viewport width.
========================================================= */
@container wtr (max-width: 760px){
  .wtr-row{
    grid-template-columns: 1fr; /* name on top, buttons below */
    row-gap: .9rem;
    align-items: start;
  }

  /* In narrow boxes, let buttons go full-width */
  .wtr-btn{
    flex-basis: 30%;
    min-width: 0;
    white-space: normal;
  }
}

/* -----------------------------
   Responsive behavior (viewport-based)
   (kept; still helpful in true mobile viewports)
------------------------------ */
@media (max-width: 1100px){
  .wtr-actions{
    grid-template-columns: repeat(2, minmax(180px, 1fr)); /* (grid-only; harmless) */
  }

  .wtr-actions .wtr-slot-3{
    grid-column: 1 / -1; /* (grid-only; harmless) */
  }

  .wtr-actions--2 .wtr-slot-2{
    grid-column: auto; /* (grid-only; harmless) */
  }
}

@media (max-width: 768px){
  .wtr-row{
    grid-template-columns: 1fr;
    row-gap: .9rem;
    align-items: start;
    padding: 1.25rem 0;
  }

  .wtr-actions{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* (grid-only; harmless) */
  }

  .wtr-actions .wtr-slot-1,
  .wtr-actions .wtr-slot-2,
  .wtr-actions .wtr-slot-3{
    grid-column: auto; /* (grid-only; harmless) */
  }
}

@media (max-width: 576px){
  .wtr-actions{ grid-template-columns: 1fr; } /* (grid-only; harmless) */
  .wtr-btn{ white-space: normal; }
}

/* =========================================
   Search Box with Tabs
   ========================================= */

/* Wrapper */
.wt-search-strip{
  width: 100%;
  margin: 2.5rem 0;
  padding: 3rem 2rem;
}

/* Bigger uppercase header */
.wt-search-title--xxl{
  font-family: "Montserrat", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--brand-dark);
  margin: 0;

  font-size: clamp(2.0rem, 1.5rem + 1.6vw, 2.8rem);

  /* POLISH: slightly more comfortable header leading */
  line-height: 1.15;

  /* RECOMMENDED: more whitespace before the form (8px rhythm) */
  margin-bottom: var(--wt-space-6); /* 48px (was ~3rem) */
}

/* Search form */
.wt-search-form--icon{
  position: relative;
  width: 100%;

  /* RECOMMENDED: explicit spacing between input and the alt link */
  margin-bottom: var(--wt-space-3); /* 24px */
}

/* Very tall, square, strong-stroke input */
.wt-search-input--xxl{
  width: 100%;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 1.55rem;
  padding: 1.45rem 6.25rem 1.45rem 1.0rem;
  border: none;
  border-bottom: 0.25rem solid var(--brand-dark);
  background: transparent;
  color: var(--text-dark);
  caret-color: var(--brand-dark);
  outline: none;
  transition: border-color .18s ease, color .18s ease;
}

/* Large placeholder */
.wt-search-input--xxl::placeholder{
  font-size: 2.6rem;
  color: #eaeaea;
}

.wt-search-input--xxl:focus{
  color: var(--brand-dark);
  border-bottom-color: var(--brand-bright);
  background-color: transparent; /* remove if you want tint */
}

.wt-search-input--xxl:focus::placeholder{
  color: var(--brand-bright);
  opacity: 0.8;
}

/* Plain icon button inside (no background, no border) */
.wt-search-iconbtn--plain{
  position: absolute;
  top: 50%;
  right: 1.25rem;                 /* more breathing room from right edge */
  transform: translateY(-50%);
  border: 0;
  background: transparent;        /* no background color */
  padding: .25rem;                /* small click padding */
  cursor: pointer;
  display: grid;
  place-items: center;
}

.wt-search-iconbtn--plain:focus{
  outline: none;
}

.wt-search-icon--stroke svg{
  width: 2.6rem;          /* BIGGER icon */
  height: 2.6rem;
  stroke: var(--brand-dark);
  stroke-width: 2.6;      /* slightly heavier stroke */
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .18s ease, transform .18s ease;
}

.wt-search-iconbtn--plain:hover .wt-search-icon--stroke svg,
.wt-search-iconbtn--plain:focus .wt-search-icon--stroke svg{
  stroke: var(--brand-bright);
  transform: scale(1.05);
}

/* Link under search bar */
.wt-search-alt-link{
  /* RECOMMENDED: reset top margin; make spacing controlled & consistent */
  margin-top: 0;

  /* RECOMMENDED: add whitespace before tabs / hamburger */
  margin-bottom: var(--wt-space-5); /* 40px */

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 1.5rem;
  opacity: .85;
  text-align: right;
}

.wt-search-alt-link a{
  color: var(--bluegrey, #5a8296);
  text-decoration: underline;
  text-underline-offset: 1rem;
  transition: color .18s ease;
}

.wt-search-alt-link a:hover,
.wt-search-alt-link a:focus{
  color: var(--brand-bright);
  outline: none;
}


/* (Optional) faint tint behind the tabs zone */
.wt-tabs-zone{
  /* If you wrap hamburger+tabs in a div.wt-tabs-zone, this will apply.
     If you DON'T want extra HTML, ignore this block. */
  background: rgba(0, 59, 92, 0.03);
  border-radius: 16px;
  padding: var(--wt-space-3);
}

/* =========================================
   Tab row
========================================= */

.wt-search-tabs{
  /* RECOMMENDED: more whitespace above tabs */
  margin-top: var(--wt-space-5); /* 40px (was 2rem / 32px) */

  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
}

/* tab button */
.wt-search-tab{
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  padding: 1rem 1.75rem;
  border-bottom: 2px solid var(--brand-dark);
  background: #fff;
  color: var(--brand-dark);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

/* hover */
.wt-search-tab:hover{
  border-color: var(--brand-bright);
  transform: translateY(-1px);
}

/* active tab: dark bg + white text */
.wt-search-tab.wt-is-active{
  background: var(--brand-dark);
  color: #fff;
  border-color: var(--brand-dark);
}

/* keyboard focus */
.wt-search-tab:focus{
  outline: 3px solid rgba(0,181,226,.35);
  outline-offset: 3px;
}

/* =========================
   Mobile hamburger tabs
========================= */

.wt-tabs-mobilebar{
  display: none; /* desktop default */

  /* RECOMMENDED: slightly more space above hamburger */
  margin-top: var(--wt-space-5); /* 40px */
}

.wt-tabs-hamburger{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;                 /* space between icon + label */

  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 800;
  font-size: 1.2rem;

  padding: 1rem 1.25rem;
  background: #fff;
  color: var(--brand-dark);
  border: 2px solid var(--brand-dark);
  cursor: pointer;
}

/* LEFT-JUSTIFIED LABEL + POLISH */
.wt-tabs-hamburger-label{
  flex: 1;                   /* take remaining horizontal space */
  text-align: left;          /* left-align text */
  margin-left: .75rem;       /* nice visual breathing room from icon */
}

.wt-tabs-hamburger:focus{
  outline: 3px solid rgba(0,181,226,.35);
  outline-offset: 3px;
}

/* simple hamburger icon */
.wt-hamburger-icon{
  width: 1.75rem;
  height: 1.25rem;
  position: relative;
  flex: 0 0 auto;            /* prevent shrinking */
}

.wt-hamburger-icon::before,
.wt-hamburger-icon::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-dark);
  border-radius: 2px;
  transition: transform .18s ease, top .18s ease, bottom .18s ease;
}

.wt-hamburger-icon::before{ top: 0; }
.wt-hamburger-icon::after{ bottom: 0; }

/* middle line */
.wt-hamburger-icon{
  background:
    linear-gradient(var(--brand-dark), var(--brand-dark))
    center / 100% 3px no-repeat;
}

/* open state: turn into an X */
.wt-tabs-hamburger[aria-expanded="true"] .wt-hamburger-icon{
  background: none;
}
.wt-tabs-hamburger[aria-expanded="true"] .wt-hamburger-icon::before{
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.wt-tabs-hamburger[aria-expanded="true"] .wt-hamburger-icon::after{
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* =========================================
   Mobile tweaks
========================================= */

@media (max-width: 640px){
  /* Header */
  .wt-search-title--xxl{
    font-size: clamp(1.7rem, 1.2rem + 2vw, 2.2rem);

    /* MOBILE spacing tuning (still 8px rhythm) */
    margin-bottom: var(--wt-space-5); /* 40px */
  }

  /* Search input */
  .wt-search-input--xxl{
    font-size: 1.25rem;
    padding: 1.25rem 5.5rem 1.25rem 1.1rem;
    border-width: 4px;
  }

  .wt-search-input--xxl::placeholder{
    font-size: 1.25rem;
  }

  .wt-search-iconbtn--plain{
    right: 1.0rem;
  }

  .wt-search-icon--stroke svg{
    width: 1.75rem;
    height: 1.75rem;
  }

  /* Alt link: smaller + tighter underline */
  .wt-search-alt-link{
    font-size: 1.05rem;
    margin-bottom: var(--wt-space-4); /* 32px */
    padding-bottom: var(--wt-space-2); /* 16px */
  }

  .wt-search-alt-link a{
    text-underline-offset: .5rem;
  }

  /* Show hamburger */
  .wt-tabs-mobilebar{
    display: block;
    margin-top: var(--wt-space-4); /* 32px */
  }

  /* Hide desktop tab row unless opened */
  .wt-search-tabs{
    display: none;              /* closed by default */
    margin-top: var(--wt-space-2); /* 16px */
    flex-direction: column;
    gap: .5rem;
    padding: .75rem;
    border: 2px solid var(--brand-dark);
    background: #fff;
  }

  /* open state */
  .wt-search-tabs.wt-tabs-open{
    display: flex;
  }

  /* tabs in dropdown */
  .wt-search-tab{
    width: 100%;
    text-align: left;
    border: 2px solid var(--brand-dark);
    border-radius: .5rem;
    padding: .9rem 1rem;
  }

  /* keep your active styling obvious */
  .wt-search-tab.wt-is-active{
    background: var(--brand-dark);
    color: #fff;
    border-color: var(--brand-dark);
  }
}


/* =========================================
  New Books Carousel
========================================= */

.wt-fsc{
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  margin: 2.5rem 0;
}

.wt-fsc--split .wt-fsc__split{
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr; /* narrower left, wider right */
  gap: 2rem;
  align-items: start;
}

/* Left block */
.wt-fsc__left .wt-fsc__title{
  font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem);
  line-height: 1.05;
  margin: 0 0 .75rem 0;
  color: var(--brand-dark);
  font-weight: 800;
}

.wt-fsc__left .wt-fsc__sub{
  font-size: 1rem;
  margin-bottom: 1.25rem;
  color: #2b2b2b;
  opacity: .85;
}

/* CTA */
.wt-fsc__cta{
  display: inline-block;
  width: fit-content;
  background: var(--brand-dark);
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .85rem 1.25rem;
  border: 2px solid var(--brand-dark);
  box-shadow: var(--shadow);
}

.wt-fsc__cta:hover{
  background: #fff;
  color: var(--brand-dark) !important;
}

/* Mobile stack */
@media (max-width: 900px){
  .wt-fsc--split .wt-fsc__split{
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* =========================================
   Carousel Core (CPL-style)
========================================= */

.wt-fsc__carousel{
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: .5rem;
}

/* Remove background panel entirely */
.wt-fsc__viewport{
  overflow: hidden;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Track */
.wt-fsc__track{
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 180px;
  gap: 1rem;
  margin: 0;
  padding: 0;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wt-fsc__track::-webkit-scrollbar{
  display: none;
}

.wt-fsc__item{
  scroll-snap-align: start;
}

/* =========================================
   Book Card
========================================= */

.wt-fsc__card{
  display: grid;
  grid-template-rows: 240px auto; /* reverted height */
  text-decoration: none;
  color: inherit;
}

/* Cover */
.wt-fsc__cover{
  background: #fff;
  border: 1px solid rgba(90,130,150,.25);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transition: transform .15s ease;
}

.wt-fsc__cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Subtle CPL-style hover lift */
.wt-fsc__card:hover .wt-fsc__cover{
  transform: translateY(-2px);
}

/* Text */
.wt-fsc__meta{
  padding-top: .4rem;   /* tighter */
  min-height: 3.1rem;
}

.wt-fsc__booktitle{
  font-weight: 800;
  font-size: .95rem;
  color: var(--brand-dark);
  line-height: 1.15;
}

.wt-fsc__author{
  font-size: .85rem;
  color: rgba(0,0,0,.7);
  margin-top: .12rem;
}

/* =========================================
   View All Tile
========================================= */

.wt-fsc__item--viewall .wt-fsc__viewall{
  height: 240px; /* match cover height */
  display: grid;
  place-items: center;
  text-decoration: none;
  border: 2px dashed rgba(168,153,104,.55);
  background: rgba(168,153,104,.08);
  color: var(--brand-dark);
  font-weight: 900;
  letter-spacing: .2px;
}

.wt-fsc__item--viewall .wt-fsc__viewall:hover{
  background: rgba(0,181,226,.08);
  border-color: rgba(0,181,226,.35);
  box-shadow: var(--shadow-hover);
}

/* =========================================
   Arrows
========================================= */

.wt-fsc__arrow{
  width: 42px;
  height: 42px;
  border: 1px solid var(--bluegrey-soft);
  background: #fff;
  color: var(--brand-dark);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

.wt-fsc__arrow:disabled{
  opacity: .35;
  cursor: not-allowed;
}

/* =========================================
   Dots
========================================= */

.wt-fsc__dots{
  display: none;
 
}

.wt-fsc__dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(0,59,92,.35);
  background: transparent;
  cursor: pointer;
}

.wt-fsc__dot.is-active{
  border-color: var(--brand-bright);
  background: rgba(0,181,226,.25);
}

/* Hide dots on mobile (CPL-style) */
@media (max-width: 600px){
  .wt-fsc__dots{
    display: none;
  }
}

/* =========================================
   Responsive adjustments
========================================= */

@media (max-width: 900px){
  .wt-fsc__carousel{
    grid-template-columns: 36px 1fr 36px;
  }

  .wt-fsc__track{
    grid-auto-columns: 150px;
  }

  .wt-fsc__card{
    grid-template-rows: 210px auto;
  }

  .wt-fsc__item--viewall .wt-fsc__viewall{
    height: 210px;
  }
}


/* =========================================================
   Campus Row + Directory (LibGuides)
   - Shared by the vertical campus list AND the info-box directory
   - UPDATED: fixes “one word per line” campus names in narrow boxes
========================================================= */

/* --- Remove any shaded row backgrounds everywhere --- */
.wt-campus-row{
  background: transparent !important;

  /* UPDATED: use flex-wrap instead of grid to prevent name from being squeezed */
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: space-between;
  gap: .5rem .75rem;

  /* row spacing + divider */
  padding: .75rem .25rem;
  border-bottom: 1px solid rgba(0,59,92,.14);
}

.wt-campus-row:last-child{
  border-bottom: none;
}

/* --- Campus name (linked) --- */
.wt-campus-name{
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--brand-dark);
  text-decoration: none;

  /* UPDATED: prevent extreme word-by-word wrapping */
  flex: 1 1 18rem;
  min-width: 14rem;
  margin: 0;
}

.wt-campus-name:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- If you use <h3> in the appointment list, keep it consistent --- */
.wt-campus-list .wt-campus-row h3{
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--brand-dark);

  /* UPDATED: same anti-squeeze behavior as linked names */
  flex: 1 1 18rem;
  min-width: 14rem;
}

/* --- Two-button action group --- */
.wt-campus-actions{
  display: flex;
  flex-direction: row;
  gap: .5rem;
  flex-wrap: wrap;      /* buttons can drop to next line */
  align-items: center;
  justify-content: flex-end;
}

/* Keep button labels on one line, but allow buttons themselves to wrap */
.wt-campus-actions .button-base{
  white-space: nowrap;
}

/* Button size refinement for this list only */
.wt-campus-list .button-base{
  font-size: 0.95rem;
  padding: 0.55rem 1rem;
}

/* --- Dark blue button variant --- */
.button-base.wt-dark{
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

.button-base.wt-dark:hover{
  background-color: #002a43;
  border-color: #002a43;
  color: #fff;
}

/* --- Responsive behavior ---
   When things get tight, put buttons on their own line */
@media (max-width: 650px){
  .wt-campus-actions{
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

/* Extra small screens: full-width buttons for tap targets */
@media (max-width: 520px){
  .wt-campus-actions .button-base{
    width: 100%;
    text-align: center;
  }
}


/* =========================================================
   Info Box Wrapper (optional but recommended)
   - Only used by the "Library Contact Information" block
========================================================= */

.wt-info-box{
  background: #fff;
  border: 1px solid rgba(0,59,92,.18);
  border-radius: 18px;
  padding: 1.25rem 1.25rem 1rem;
}

.wt-info-header h3{
  margin: 0 0 .35rem;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  color: var(--brand-dark);
  letter-spacing: .2px;
}

.wt-info-phone{
  margin: 0 0 .75rem;
  font-size: 1.05rem;
}

.wt-link-external{
  display: inline-block;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wt-divider{
  margin: 1rem 0 1rem;
  border: 0;
  height: 1px;
  background: rgba(0,59,92,.18);
}

.wt-section-title{
  margin: 0 0 .75rem;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  color: var(--brand-dark);
  font-size: 1.05rem;
}

.wt-campus-directory{
  list-style: none;
  padding: 0;
  margin: 0;
}


/* =========================================================
   System-wide Library Hours Widget (All Locations)
   Matches individual campus library widgets
   ========================================================= */

/* Container */
#lib-hero-hours-all{
  font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #006ba6; /* Vibrant Blue */

  display: block;
  width: 100%;

  padding: 16px 20px 18px;
  margin-top: 3.5rem;

  background: #fff;

  border: 2px solid rgba(0,181,226,0.4);
  border-left: 6px solid #003b5c; /* Navy accent */

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

/* =========================================================
   Header
   ========================================================= */

#lib-hero-hours-all .lib-hours-header{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}

#lib-hero-hours-all .libraryClockIcon{
  font-size: 22px;
  color: #006ba6;
}

#lib-hero-hours-all .lib-hours-title{
  font-size: 20px;
  font-weight: 700;
}

/* =========================================================
   List
   ========================================================= */

#lib-hero-hours-all .lib-hours-all-list{
  list-style: none;
  padding: 0;
  margin: .75rem 0 0;
  font-size: 16px;
}

/* =========================================================
   Rows (shared for all li)
   ========================================================= */

#lib-hero-hours-all .lib-hours-row{
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 10px 14px;
  margin-bottom: 6px;

  border-radius: 6px;
  cursor: default;

  transition:
    background-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

/* Hover + keyboard focus */
#lib-hero-hours-all .lib-hours-row:hover,
#lib-hero-hours-all .lib-hours-row:focus{
  background: rgba(0,181,226,0.16);
  box-shadow: inset 0 0 0 2px rgba(0,181,226,0.35);
  transform: translateY(-1px);
  outline: none;
}

/* =========================================================
   Row content
   ========================================================= */

#lib-hero-hours-all .lib-hours-location{
  color: #006ba6;
  font-weight: 700;
}

#lib-hero-hours-all .lib-hours-time{
  color: #a89968; /* Wake Tech Gold */
  font-weight: 700;
  white-space: nowrap;
}

/* Closed state */
#lib-hero-hours-all .lib-hours-row.is-closed .lib-hours-time{
  color: #003b5c;
  font-weight: 800;
}

/* =========================================================
   FIRST ROW: All Wake Tech Libraries
   ========================================================= */

#lib-hero-hours-all .lib-hours-row-all .lib-hours-time{
  color: inherit; /* allow link color */
}

/* Link styled like a "time" value */
#lib-hero-hours-all .lib-hours-all-link{
  display: inline-flex;
  align-items: center;
  gap: .35rem;

  font-weight: 700;
  text-decoration: none;

  color: #00b5e2; /* Bright Blue */
  white-space: nowrap;

  transition: color .18s ease;
}

/* Link color deepens on row interaction */
#lib-hero-hours-all .lib-hours-row:hover .lib-hours-all-link,
#lib-hero-hours-all .lib-hours-row:focus .lib-hours-all-link{
  color: #003b5c;
}

/* Focus ring on the link itself */
#lib-hero-hours-all .lib-hours-all-link:focus{
  outline: 2px solid rgba(0,181,226,0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 768px){
  #lib-hero-hours-all{
    padding: 18px 16px 20px;
  }

  #lib-hero-hours-all .lib-hours-row{
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
  }

  #lib-hero-hours-all .lib-hours-time{
    white-space: normal;
  }
}

/* =========================================================
   add to button appointment area
   ========================================================= */

/* Icon inside buttons */
.btn-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.5rem;
  vertical-align: -0.15em;
}

.btn-icon svg{
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Contact the Library button */
.contact-button_media {
  background-color: #003b5c; /* Wake Tech dark blue */
  color: #ffffff;
}

.contact-button_media:hover {
  background-color: #002a42;
}

.button_media-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* =========================================================
   Campus Directory Grid (scoped)
   - Multiple campuses per row
========================================================= */

.wt-campus-directory{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.75rem;
  margin: 1.5rem 0 2rem;
}

/* campus tile wrapper */
.wt-campus-tile{
  border: 1px solid rgba(0, 59, 92, 0.15);
  border-radius: 14px;
  background: #fff;
  padding: 1.25rem;
}

/* campus title */
.wt-campus-title{
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 800;
  color: #003b5c;
  font-size: 1.25rem;
  margin: 0 0 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* staff area inside campus tile */
.wt-campus-staff{
  display: grid;
  gap: 1rem;
}

/* for campuses with multiple staff: allow 2-up inside the tile on wider screens */
@media (min-width: 1100px){
  .wt-campus-staff-multi{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================
   Faculty Feedback (Anonymous)
   ============================ */

.wt-testimonials{
  margin: 3rem auto;
  max-width: 1140px;
  padding: 0 1rem;
}

.wt-testimonials .container-flex{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

/* Individual feedback card */
.wt-testimonial{
  background: #ffffff;
  border-left: 6px solid #00b5e2; /* Wake Tech bright */
  padding: 2rem;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* Quote text */
.wt-testimonial blockquote{
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #003b5c; /* Wake Tech dark */
  position: relative;
}

/* Subtle quotation mark accent */
.wt-testimonial blockquote::before{
  content: "“";
  font-size: 3rem;
  line-height: 1;
  color: rgba(0, 181, 226, 0.35);
  position: absolute;
  top: -1rem;
  left: -0.75rem;
}

/* Mobile refinement */
@media (max-width: 768px){
  .wt-testimonial{
    padding: 1.75rem;
  }
}

/* ===== Responsive Full-Container iFrame ===== */
.iframe-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 150%; /* tweak based on aspect ratio needed */
  overflow: hidden;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* =========================
   Mobile hamburger tabs
========================= */

.wt-tabs-mobilebar{
  display: none; /* desktop default */
  margin-top: 2rem;
}

.wt-tabs-hamburger{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;                 /* space between icon + label */

  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 800;
  font-size: 1.2rem;

  padding: 1rem 1.25rem;
  background: #fff;
  color: var(--brand-dark);
  border: 2px solid var(--brand-dark);
  cursor: pointer;
}

/* LEFT-JUSTIFIED LABEL + POLISH */
.wt-tabs-hamburger-label{
  flex: 1;                   /* take remaining horizontal space */
  text-align: left;          /* left-align text */
  margin-left: .75rem;       /* nice visual breathing room from icon */
}

.wt-tabs-hamburger:focus{
  outline: 3px solid rgba(0,181,226,.35);
  outline-offset: 3px;
}

/* simple hamburger icon */
.wt-hamburger-icon{
  width: 1.75rem;
  height: 1.25rem;
  position: relative;
  flex: 0 0 auto;            /* prevent shrinking */
}

.wt-hamburger-icon::before,
.wt-hamburger-icon::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-dark);
  border-radius: 2px;
  transition: transform .18s ease, top .18s ease, bottom .18s ease;
}

.wt-hamburger-icon::before{ top: 0; }
.wt-hamburger-icon::after{ bottom: 0; }

/* middle line */
.wt-hamburger-icon{
  background:
    linear-gradient(var(--brand-dark), var(--brand-dark))
    center / 100% 3px no-repeat;
}

/* open state: turn into an X */
.wt-tabs-hamburger[aria-expanded="true"] .wt-hamburger-icon{
  background: none;
}
.wt-tabs-hamburger[aria-expanded="true"] .wt-hamburger-icon::before{
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.wt-tabs-hamburger[aria-expanded="true"] .wt-hamburger-icon::after{
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* MOBILE BEHAVIOR */
@media (max-width: 640px){
  .wt-tabs-mobilebar{
    display: block;
  }

  /* turn your tablist into a dropdown panel */
  .wt-search-tabs{
    display: none;              /* closed by default */
    margin-top: .75rem;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem;
    border: 2px solid var(--brand-dark);
    background: #fff;
  }

  /* open state */
  .wt-search-tabs.wt-tabs-open{
    display: flex;
  }

  /* tabs in dropdown */
  .wt-search-tab{
    width: 100%;
    text-align: left;
    border: 2px solid var(--brand-dark);
    border-radius: .5rem;
    padding: .9rem 1rem;
  }

  /* keep your active styling obvious */
  .wt-search-tab.wt-is-active{
    background: var(--brand-dark);
    color: #fff;
    border-color: var(--brand-dark);
  }
}

/* Custom Blockquote Style */
.custom-blockquote {
  background: #f5f5f5;              /* light background */
  border-left: 6px solid #005a9c;   /* accent left border */
  padding: 1rem 1.25rem;            /* spacing */
  margin: 1.5rem 0;                 /* vertical spacing */
  font-style: italic;               /* emphasize quote */
  color: #3a3a3a;
  position: relative;
  quotes: "“" "”";
}

.custom-blockquote::before {
  content: open-quote;              /* decorative big opening quote */
  font-size: 3rem;
  color: #c2c2c2;
  position: absolute;
  left: 0.5rem;
  top: -0.5rem;
}

.custom-blockquote p {
  margin: 0;                        /* reset paragraph margin */
  padding-left: 1rem;               /* spacing after border */
  display: inline-block;
}

/* =====================================
   Book Excerpt / Textbook Callout
===================================== */

.wt-book-excerpt {
  background: #fafafa;
  border-left: 6px solid var(--brand-dark, #003b5c);
  padding: 1.75rem 2rem;
  margin: 2.5rem auto;
  max-width: 900px;
  font-family: Georgia, "Times New Roman", serif;
  color: #2a2a2a;
  line-height: 1.7;
  position: relative;
}

.wt-book-excerpt::before {
  content: "Excerpt";
  position: absolute;
  top: -0.85rem;
  left: 1.25rem;
  background: #fff;
  padding: 0 0.5rem;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-dark, #003b5c);
  font-weight: 700;
}

.wt-book-excerpt h3 {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
  color: var(--brand-dark, #003b5c);
}

.wt-book-excerpt p {
  margin: 0;
}

/* Guide intro callout --- beginners guide blockquote */
.wt-guide-intro{
  background-color: var(--wt-dark);
  color: #ffffff;
  padding: 1rem 1.25rem;
  margin: 1rem 0 2rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-left: 6px solid var(--brand-bright);

}

.wt-guide-intro strong{
  color: #ffffff;
  font-weight: 800;
}


/* =========================================================
   LibGuides Side Navigation → Wake Tech block style
========================================================= */

/* Reset container */
.s-lg-tabs-side #s-lg-guide-tabs ul.split-button-nav{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Remove spacing on li */
.s-lg-tabs-side #s-lg-guide-tabs ul.split-button-nav > li{
  margin: 0 !important;
  padding: 0 !important;
}

/* Base link styling (all tabs) */
.s-lg-tabs-side #s-lg-guide-tabs ul.split-button-nav > li > a{
  /* Undo any global .nav flex rules */
  display: block !important;
  width: 90% !important;

  /* Brand */
  background: var(--wtcc-color-navy, #003B5C) !important;
  color: #fff !important;

  /* Layout */
  padding: 18px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-decoration: none !important;

  /* Typography */
  font-family: var(--wt-font-sans, "Montserrat","Nunito Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif) !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  font-size: 1.25rem !important;
  letter-spacing: .03em !important;
  line-height: 1.2 !important;

  /* Wrapping */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;

  /* Softer divider */
  border-bottom: 1px solid rgba(168,153,104,0.75) !important;
}

/* Remove divider from last item */
.s-lg-tabs-side #s-lg-guide-tabs ul.split-button-nav > li:last-child > a{
  border-bottom: 0 !important;
}

/* Hover / focus */
.s-lg-tabs-side #s-lg-guide-tabs ul.split-button-nav > li > a:hover,
.s-lg-tabs-side #s-lg-guide-tabs ul.split-button-nav > li > a:focus{
  background: var(--wtcc-color-navy-hover, #004B74) !important;
  color: #fff !important;
  outline: none !important;
}

/* =========================================================
   Active tab (white + arrow)
========================================================= */
.s-lg-tabs-side #s-lg-guide-tabs ul.split-button-nav > li.active > a,
.s-lg-tabs-side #s-lg-guide-tabs ul.split-button-nav > li > a.active{
  background: #fff !important;
  color: var(--wtcc-color-navy, #003B5C) !important;

  /* Active layout: allow arrow + text */
  display: flex !important;
  align-items: center !important;

  /* Typography tweaks for active */
  font-weight: 900 !important;
  font-size: 1.25rem !important;

  /* No divider on active (matches your intent) */
  border-bottom: 0 !important;
}

/* Arrow indicator (adjust to "»»" if you prefer) */
.s-lg-tabs-side #s-lg-guide-tabs ul.split-button-nav > li.active > a::before,
.s-lg-tabs-side #s-lg-guide-tabs ul.split-button-nav > li > a.active::before{
  content: ">>" !important;
  color: var(--wtcc-color-gold, #F2A900) !important;
  font-weight: 300 !important;
  margin-right: .5rem !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
}

/* =========================================
   Hover → Bright Brand Blue + >> indicator
========================================= */

.s-lg-tabs-side #s-lg-guide-tabs ul.split-button-nav > li:not(.active) > a:not(#s-lg-admin-tab-anchor):hover,
.s-lg-tabs-side #s-lg-guide-tabs ul.split-button-nav > li:not(.active) > a:not(#s-lg-admin-tab-anchor):focus{
  background: var(--brand-bright, #00b5e2) !important;
  color: #ffffff !important;
  position: relative !important;
}

/* Add >> arrow on hover (non-active, non-admin only) */
.s-lg-tabs-side #s-lg-guide-tabs ul.split-button-nav > li:not(.active) > a:not(#s-lg-admin-tab-anchor):hover::before,
.s-lg-tabs-side #s-lg-guide-tabs ul.split-button-nav > li:not(.active) > a:not(#s-lg-admin-tab-anchor):focus::before{
  content: ">>" !important;
  margin-right: .5rem !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;

}

.s-lg-tabs-side{
  margin-top: 3.5rem;
}