/* 
   app.css — Knowledge Hub — Durham College
 */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@600;700;800&display=swap');

   :root {
	 --dc-dark:        #0B8261;
	 --dc-green:       #45A046;
	 --dc-light-green: #E8F5E9;
	 --dc-accent:      #F57F17;
	 --dc-accent-bg:   #FFF8E1;
	 --dc-purple:      #5E35B1;
	 --dc-purple-bg:   #EDE7F6;
	 --dc-red:         #E53935;
	 --bg-page:        #F0F4F3;
	 --bg-white:       #FFFFFF;
	 --border:         #DDE4E1;
	 --text-dark:      #1A2E28;
	 --text-mid:       #4A6461;
	 --text-light:     #8AA09C;
	 --shadow-sm:      0 2px 8px rgba(11,130,97,0.08);
	 --shadow-md:      0 6px 24px rgba(11,130,97,0.14);
	 --shadow-lg:      0 12px 40px rgba(11,130,97,0.18);
	 --radius:         10px;
	 --radius-sm:      6px;
	 --radius-pill:    20px;
   }
   
   *, *:before, *:after { box-sizing: border-box; }
   
   body {
	 margin: 0;
	 padding: 0;
	 font-family: 'Inter', Arial, sans-serif;
	 background-color: var(--bg-page);
	 color: var(--text-dark);
	 font-size: 16px;
	 line-height: 1.6;
	 -webkit-font-smoothing: antialiased;
   }
   
   /* 
	  HEADER
	   */
   .header_background {
	 background: linear-gradient(135deg, #0B8261 0%, #0D9970 60%, #45A046 100%);
	 border-bottom: 4px solid rgba(255,255,255,0.18);
	 box-shadow: 0 4px 20px rgba(0,0,0,0.18);
	 position: relative;
	 overflow: hidden;
   }
   .header_background::before {
	 content: '';
	 position: absolute;
	 top: -40px; right: -40px;
	 width: 220px; height: 220px;
	 border-radius: 50%;
	 background: rgba(255,255,255,0.05);
	 pointer-events: none;
   }
   .header_background::after {
	 content: '';
	 position: absolute;
	 bottom: -60px; left: 30%;
	 width: 300px; height: 300px;
	 border-radius: 50%;
	 background: rgba(255,255,255,0.04);
	 pointer-events: none;
   }
   
   .header__logo {
	 display: flex;
	 align-items: center;
	 padding: 1.1rem 0;
	 gap: 0.9rem;
   }
   /* DC badge - replaces emoji with clean initials mark */
   /* .header__logo::before {
	 content: 'DC';
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 width: 2.6rem;
	 height: 2.6rem;
	 background: rgba(255,255,255,0.18);
	 border: 2px solid rgba(255,255,255,0.5);
	 border-radius: 8px;
	 color: #FFFFFF;
	 font-family: 'Poppins', sans-serif;
	 font-size: 0.82rem;
	 font-weight: 900;
	 letter-spacing: 0.06em;
	 flex-shrink: 0;
	 backdrop-filter: blur(4px);
   } */
   .header__logo-text {
	 color: rgba(255,255,255,0.82);
	 font-size: 0.68rem;
	 font-weight: 600;
	 letter-spacing: 0.12em;
	 line-height: 1.25;
	 text-transform: uppercase;
	 cursor: pointer;
   }
   .header__logo-text strong {
	 color: #FFFFFF;
	 font-family: 'Poppins', sans-serif;
	 font-weight: 800;
	 font-size: 1.35rem;
	 display: block;
	 letter-spacing: -0.02em;
	 text-transform: none;
	 line-height: 1.2;
	 text-shadow: 0 1px 6px rgba(0,0,0,0.2);
   }
   
   /* 
	  SEARCH
	   */
   .search-container {
	 position: relative;
	 padding: 1.1rem 0;
   }
   .search-container input {
	 width: 100%;
	 height: 2.65rem;
	 padding: 0 1.1rem 0 2.8rem;
	 border: 2px solid rgba(255,255,255,0.3);
	 border-radius: var(--radius-sm);
	 background-color: rgba(255,255,255,0.15);
	 color: #FFFFFF;
	 font-size: 0.9rem;
	 font-family: 'Inter', sans-serif;
	 outline: none;
	 transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
	 backdrop-filter: blur(4px);
   }
   .search-container::before {
	 content: '🔍';
	 position: absolute;
	 left: 0.85rem;
	 top: 50%;
	 transform: translateY(-50%);
	 font-size: 0.82rem;
	 pointer-events: none;
	 opacity: 0.7;
   }
   .search-container input::placeholder { color: rgba(255,255,255,0.65); }
   .search-container input:focus {
	 border-color: rgba(255,255,255,0.9);
	 background-color: rgba(255,255,255,0.22);
	 box-shadow: 0 0 0 3px rgba(255,255,255,0.18);
   }
   .search-results {
	 position: absolute;
	 top: 4rem;
	 left: 0;
	 width: 100%;
	 background-color: var(--bg-white);
	 border: 1.5px solid var(--border);
	 border-radius: var(--radius);
	 box-shadow: var(--shadow-lg);
	 z-index: 1000;
	 list-style: none;
	 margin: 0;
	 padding: 0.35rem 0;
	 display: none;
	 max-height: 320px;
	 overflow-y: auto;
   }
   .search-results li {
	 padding: 0.72rem 1.1rem;
	 cursor: pointer;
	 border-bottom: 1px solid #F0F4F3;
	 color: var(--text-dark);
	 font-size: 0.87rem;
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 transition: background 0.12s;
	 gap: 0.5rem;
   }
   .search-results li:hover { background-color: var(--dc-light-green); color: var(--dc-dark); }
   .search-results li:last-child { border-bottom: none; }
   .search-results li small {
	 background-color: var(--dc-light-green);
	 color: var(--dc-dark);
	 font-size: 0.67rem;
	 padding: 0.15rem 0.55rem;
	 border-radius: var(--radius-pill);
	 font-weight: 700;
	 white-space: nowrap;
	 flex-shrink: 0;
   }
   
   /* 
	  FILTERS BAR
	   */
   .filters_background {
	 background-color: var(--bg-white);
	 border-bottom: 2px solid var(--border);
	 padding: 0.9rem 0;
	 box-shadow: var(--shadow-sm);
	 position: sticky;
	 top: 0;
	 z-index: 100;
   }
   .filter-label {
	 font-size: 0.68rem;
	 color: var(--text-light);
	 text-transform: uppercase;
	 letter-spacing: 0.08em;
	 font-weight: 700;
	 display: block;
	 margin-bottom: 0.3rem;
   }
   .filters_background select {
	 width: 100%;
	 height: 2.4rem;
	 padding: 0 2.2rem 0 0.85rem;
	 border: 1.5px solid var(--border);
	 border-radius: var(--radius-sm);
	 font-size: 0.85rem;
	 font-family: 'Inter', sans-serif;
	 color: var(--text-dark);
	 background-color: var(--bg-white);
	 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230B8261' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	 background-repeat: no-repeat;
	 background-position: right 0.75rem center;
	 -webkit-appearance: none;
	 appearance: none;
	 cursor: pointer;
	 outline: none;
	 transition: border-color 0.15s, box-shadow 0.15s;
   }
   .filters_background select:hover { border-color: var(--dc-dark); }
   .filters_background select:focus {
	 border-color: var(--dc-green);
	 box-shadow: 0 0 0 3px rgba(69,160,70,0.18);
   }
   
   .filter-reset {
	 width: 100%;
	 height: 2.4rem;
	 background-color: transparent;
	 color: var(--dc-dark);
	 border: 2px solid var(--dc-green);
	 border-radius: var(--radius-sm);
	 font-size: 0.84rem;
	 font-family: 'Inter', sans-serif;
	 font-weight: 700;
	 cursor: pointer;
	 margin-top: 1.45rem;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 text-decoration: none;
	 letter-spacing: 0.03em;
	 transition: background-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
   }
   .filter-reset:hover {
	 background-color: var(--dc-green);
	 color: #FFFFFF;
	 box-shadow: 0 3px 10px rgba(69,160,70,0.3);
	 transform: translateY(-1px);
   }
   
   /* 
	  UTILITIES
	   */
   .hideAll  { display: none; }
   .pointer  { cursor: pointer; }
   .box      { height: 5.0rem; cursor: pointer; }
   .box2     { }
   
   /* 
	  MAIN CONTENT AREA
	   */
   .main-content {
	 padding: 2.25rem 0 4.5rem 0;
	 min-height: 65vh;
   }
   
   .section-title {
	 font-family: 'Poppins', sans-serif;
	 font-size: 1.3rem;
	 font-weight: 700;
	 color: var(--dc-dark);
	 margin-bottom: 0;
	 padding-bottom: 0.45rem;
	 border-bottom: 3px solid var(--dc-green);
	 display: block;
   }
   /* : gap between underline and cards - clear but not too large */
   .result-count {
	 font-size: 0.8rem;
	 color: var(--text-light);
	 margin-bottom: 1.4rem;
	 margin-top: 0.85rem;
	 font-weight: 500;
   }
   
   /* 
	  TOPIC CARDS — CSS Grid, equal-width columns
	   */
   .topics-container {
	 display: grid;
	 grid-template-columns: repeat(4, 1fr);
	 gap: 1.3rem;
	 width: 100%;
	 padding: 0;
	 margin: 0;
	 align-items: stretch;
   }
   
   /* keep .topic-card-wrap for JS but remove old spacing */
   .topic-card-wrap {
	 width: 100%;
	 padding: 0;
	 margin: 0;
	 box-sizing: border-box;
   }
   
   @media screen and (max-width: 63.9375em) {
	 .topics-container { grid-template-columns: repeat(2, 1fr); }
   }
   @media screen and (max-width: 39.9375em) {
	 .topics-container { grid-template-columns: 1fr; }
   }
   
   .topic-card {
	 background-color: var(--bg-white);
	 border: 1.5px solid var(--border);
	 border-top: 4px solid var(--dc-green);
	 border-radius: var(--radius);
	 padding: 1.35rem 1.3rem 1.15rem;
	 cursor: pointer;
	 height: 100%;
	 display: flex;
	 flex-direction: column;
	 transition: transform 0.18s cubic-bezier(.22,.68,0,1.2),
				 box-shadow 0.18s ease,
				 border-top-color 0.18s;
	 word-wrap: break-word;
	 overflow-wrap: break-word;
	 box-sizing: border-box;
	 box-shadow: var(--shadow-sm);
	 position: relative;
	 overflow: hidden;
   }
   .topic-card::before {
	 content: '';
	 position: absolute;
	 inset: 0;
	 background: linear-gradient(135deg, rgba(69,160,70,0.04) 0%, transparent 60%);
	 opacity: 0;
	 transition: opacity 0.2s;
	 pointer-events: none;
	 border-radius: var(--radius);
   }
   .topic-card:hover::before { opacity: 1; }
   .topic-card:hover {
	 transform: translateY(-5px);
	 box-shadow: var(--shadow-md);
	 border-top-color: var(--dc-dark);
	 border-color: rgba(11,130,97,0.22);
   }
   
   .topic-card__title {
	 font-family: 'Poppins', sans-serif;
	 font-size: 1rem;
	 font-weight: 700;
	 color: var(--dc-dark);
	 margin-bottom: 0.45rem;
	 line-height: 1.35;
	 overflow-wrap: break-word;
   }
   .topic-card__desc {
	 font-size: 0.83rem;
	 color: var(--text-mid);
	 line-height: 1.55;
	 margin-bottom: 0.9rem;
	 flex-grow: 1;
   }
   .topic-card__badges {
	 display: flex;
	 gap: 0.4rem;
	 flex-wrap: wrap;
	 margin-bottom: 0.5rem;
   }
   
   /* 
	  BADGES
	   */
   .badge-week {
	 display: inline-flex;
	 align-items: center;
	 background-color: var(--dc-light-green);
	 color: var(--dc-dark);
	 font-size: 0.67rem;
	 font-weight: 700;
	 padding: 0.18rem 0.6rem;
	 border-radius: var(--radius-pill);
	 white-space: nowrap;
	 letter-spacing: 0.02em;
	 border: 1px solid rgba(11,130,97,0.15);
   }
   .badge-course {
	 display: inline-flex;
	 align-items: center;
	 background-color: var(--dc-accent-bg);
	 color: var(--dc-accent);
	 font-size: 0.67rem;
	 font-weight: 700;
	 padding: 0.18rem 0.6rem;
	 border-radius: var(--radius-pill);
	 white-space: nowrap;
	 letter-spacing: 0.02em;
	 border: 1px solid rgba(245,127,23,0.2);
   }
   .topic-card__keywords {
	 display: flex;
	 gap: 0.3rem;
	 flex-wrap: wrap;
	 margin-top: 0.3rem;
	 padding-top: 0.3rem;
	 border-top: 1px solid #EEF2F1;
   }
   .badge-keyword {
	 display: inline-flex;
	 align-items: center;
	 background-color: var(--dc-purple-bg);
	 color: var(--dc-purple);
	 font-size: 0.65rem;
	 font-weight: 700;
	 padding: 0.15rem 0.5rem;
	 border-radius: var(--radius-pill);
	 white-space: nowrap;
	 border: 1px solid rgba(94,53,177,0.15);
   }
   
   /* 
	  BACK BUTTON
	   */
   .back-btn {
	 display: inline-flex;
	 align-items: center;
	 gap: 0.4rem;
	 color: var(--dc-dark);
	 font-size: 0.88rem;
	 font-weight: 600;
	 cursor: pointer;
	 margin-bottom: 1rem;
	 padding: 0.4rem 0.9rem 0.4rem 0.65rem;
	 border-radius: var(--radius-sm);
	 border: 1.5px solid var(--border);
	 background: var(--bg-white);
	 box-shadow: var(--shadow-sm);
	 transition: color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.12s;
   }
   .back-btn:hover {
	 color: var(--dc-green);
	 background: var(--dc-light-green);
	 border-color: var(--dc-green);
	 transform: translateX(-2px);
	 box-shadow: none;
   }
   
   /* 
	  PDF LIST
	   */
   .pdf-item {
	 background-color: var(--bg-white);
	 border: 1.5px solid var(--border);
	 border-left: 4px solid var(--dc-green);
	 border-radius: var(--radius);
	 padding: 0.9rem 1.3rem;
	 display: flex;
	 align-items: center;
	 gap: 1rem;
	 margin-bottom: 0.75rem;
	 box-shadow: var(--shadow-sm);
	 transition: background 0.15s, border-left-color 0.15s, box-shadow 0.15s, transform 0.12s;
	 cursor: default;
   }
   .pdf-item:hover {
	 background-color: var(--dc-light-green);
	 border-left-color: var(--dc-dark);
	 box-shadow: var(--shadow-md);
   }
   .pdf-item__icon { font-size: 1.9rem; color: var(--dc-red); flex-shrink: 0; }
   .pdf-item__info { flex: 1; min-width: 0; cursor: pointer; }
   .pdf-item__title { font-size: 0.95rem; font-weight: 700; color: var(--text-dark); }
   .pdf-item__date { font-size: 0.76rem; color: var(--text-light); margin-top: 0.15rem; }
   /* Download button - : saves one click, right on list item */
   .pdf-item__download {
	 background: linear-gradient(135deg, var(--dc-green) 0%, var(--dc-dark) 100%);
	 color: #FFFFFF;
	 border: none;
	 border-radius: var(--radius-sm);
	 padding: 0.5rem 1.1rem 0.5rem 0.9rem;
	 font-size: 0.78rem;
	 font-family: 'Inter', sans-serif;
	 font-weight: 700;
	 cursor: pointer;
	 text-decoration: none;
	 display: inline-flex;
	 align-items: center;
	 gap: 0.45rem;
	 flex-shrink: 0;
	 box-shadow: 0 3px 10px rgba(11,130,97,0.3);
	 transition: box-shadow 0.18s, transform 0.15s, background 0.18s;
	 white-space: nowrap;
	 letter-spacing: 0.01em;
	 position: relative;
	 overflow: hidden;
   }
   /* Shimmer effect on hover */
   .pdf-item__download::before {
	 content: '';
	 position: absolute;
	 inset: 0;
	 background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
	 transform: translateX(-100%);
	 transition: transform 0.4s ease;
   }
   .pdf-item__download:hover::before {
	 transform: translateX(100%);
   }
   .pdf-item__download:hover {
	 background: linear-gradient(135deg, var(--dc-dark) 0%, #074f3b 100%);
	 box-shadow: 0 5px 16px rgba(11,130,97,0.4);
	 transform: translateY(-2px);
	 color: #FFFFFF;
   }
   .pdf-item__download:active {
	 transform: translateY(0);
	 box-shadow: 0 2px 6px rgba(11,130,97,0.25);
   }
   
   /* 
	  PDF VIEWER
	   */
   .viewer-toolbar {
	 background-color: var(--bg-white);
	 border: 1.5px solid var(--border);
	 border-bottom: none;
	 border-radius: var(--radius) var(--radius) 0 0;
	 padding: 0.8rem 1.3rem;
	 display: flex;
	 align-items: center;
	 gap: 1rem;
	 box-shadow: var(--shadow-sm);
   }
   .btn-download {
	 background: linear-gradient(135deg, var(--dc-green) 0%, var(--dc-dark) 100%);
	 color: #FFFFFF;
	 border: none;
	 border-radius: var(--radius-sm);
	 padding: 0.45rem 1.2rem;
	 font-size: 0.82rem;
	 font-family: 'Inter', sans-serif;
	 font-weight: 700;
	 cursor: pointer;
	 text-decoration: none;
	 display: inline-flex;
	 align-items: center;
	 gap: 0.35rem;
	 box-shadow: 0 2px 8px rgba(69,160,70,0.35);
	 letter-spacing: 0.02em;
	 transition: opacity 0.15s, box-shadow 0.15s, transform 0.1s;
   }
   .btn-download:hover {
	 opacity: 0.92;
	 box-shadow: 0 4px 14px rgba(69,160,70,0.45);
	 transform: translateY(-1px);
	 color: #FFFFFF;
   }
   .pdf-viewer-frame {
	width: 100%;
	height: 88vh;
	border: 1.5px solid var(--border);
	border-radius: 0 0 var(--radius) var(--radius);
	background-color: var(--bg-white);
	display: block;
}
   
   /* 
	  NO RESULTS
	   */
   .no-results {
	 text-align: center;
	 padding: 4rem 2rem;
	 color: var(--text-light);
	 font-size: 0.95rem;
	 line-height: 1.8;
	 width: 100%;
   }
   .no-pdfs-box {
	 background-color: var(--bg-white);
	 border: 1.5px solid var(--border);
	 border-left: 4px solid #CCCCCC;
	 border-radius: var(--radius);
	 padding: 2rem;
	 text-align: center;
	 color: var(--text-light);
   }
   .no-pdfs-box strong {
	 display: block;
	 font-size: 1rem;
	 color: var(--text-mid);
	 margin-bottom: 0.4rem;
   }
   
   /* 
	  FOOTER
	   */
   .footer_background {
	 background: linear-gradient(135deg, #0B8261 0%, #0D9970 100%);
	 border-top: 4px solid var(--dc-green);
	 padding: 1.5rem 0;
	 margin-top: 3rem;
	 box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
   }
   .footer_background p {
	 color: rgba(255,255,255,0.8);
	 font-size: 0.82rem;
	 margin: 0;
	 text-align: center;
	 font-family: 'Inter', sans-serif;
	 letter-spacing: 0.02em;
   }
   .footer_background a { color: #FFFFFF; text-decoration: none; font-weight: 600; }
   .footer_background a:hover { text-decoration: underline; }
   

.header_background {
  position: relative;
  z-index: 2000; 
}

.search-container {
  position: relative;
  z-index: 3000; 
}

.search-results {
  z-index: 4000;
}

.filters_background {
  z-index: 500; 
}

.header_background {
  overflow: visible; 
}

.header__logo-img {
	height: 42px;   /* control size */
	width: auto;
	display: block;
  }