/* FONTS ************************* */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playwrite+ES:wght@100..400&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');


/* VARIABLES for LIGHT & DARK MODE ************************* */
:root {
  --sidebar-link-color-light: #3c3c3c; 
  --header-light: #000000; 
  --card-border-light: #f7f7f7;
  --main-content-bg-light: #f2f2f2;
  --btn-blue-light: #00B2E5;

  --sidebar-link-color-dark: #f4f4f4;
  --header-dark: #6ea8fe;
  --card-border-dark: #494949;   
  --main-content-bg-dark: none;  
  --btn-blue-dark: #7CC261;
}


html[data-bs-theme="light"] {
  --sidebar-link-color: var(--sidebar-link-color-light);
  --header: var(--header-light);  
  --card-border: var(--card-border-light);
  --main-content-bg: var(--main-content-bg-light);
  --btn-blue: var(--btn-blue-light);
}

html[data-bs-theme="dark"] {
  --sidebar-link-color: var(--sidebar-link-color-dark);
  --header: var(--header-dark);    
  --card-border: var(--card-border-dark);
  --main-content-bg: var(--main-content-bg-dark); 
  --btn-blue: var(--btn-blue-dark);  
}
/* END ************************* */




body {
  font-family: Inter, Nunito, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-main { flex: 1; }

.page-bg { background-color: #ffffff; }
[data-bs-theme="dark"] .page-bg { background-color: #2a2a2a; }

/*

.brandname{
  font-family: "Kiwi Maru", serif; 
  font-size: 1em; color: rgb(255, 255, 255);
}
.brandbg { padding: 0px; margin: 0px;}  
*/
.brandbg {
  padding: 1px 10px;  background-color: #5cc76a; border-radius: 1rem;
  margin: 0em;
}
.brandname{
  font-family: "Kiwi Maru", serif; font-weight: 500;
  font-size: 1em; color: #ffffff;
}





/* SIDEBAR */
#sidebar { 
  min-height: 100vh; 
  border-right: 1px solid #dee2e6; font-size: 0.9rem;}

#sidebar .nav-link { color: var(--sidebar-link-color) !important; text-align: center;}

#sidebar .nav-link:hover, #sidebar .nav-link.active {
  color: black !important;
}

/* Hover effect for sidebar items */
#sidebar li.nav:hover {
  background-color: #c9c9c9; 
  cursor: pointer;
}
/* Make link inherit color so it doesn't turn Bootstrap blue */
#sidebar li.nav:hover .nav-link {
  color: black !important;
}









h1, h4 { color: var(--header) !important; font-family: "Open Sans";}




/* ACCORDION (light+dark) */

.accordion-button { 
  background-color: #7CC261; 
  color: black;  
}

.accordion-button:not(.collapsed) {
  background-color: #00B2E5;
  color: black;
  box-shadow: none;          /* removes blue glow */
}

[data-bs-theme="dark"] .accordion-button::after {
  filter: brightness(0);
}


.lead em {
  color:  #379113; font-weight: 500;
}

/* UNITS */



.card { background-color: var(--main-content-bg);}
.card-body { border: 0px var(--card-border) solid !important; }



#unit-heading { font-family: "Open Sans", serif; font-weight: 500;}
.breadcrumb-item { font-size: 0.9em;}

.targetLang     { font-family: sans-serif; font-size: 1.1em ; font-weight: 400; }
.translation { font-family: sans-serif; font-size: 1em; color:#869ab6; }
.vocab  { font-family: sans-serif; font-size: 1em; color: #408326;}   
.example { color: mediumvioletred;}


.btn-blue { background-color: var(--btn-blue); color: black; }
.btn-blue:hover { background-color: #006c8a; color: white;}

.btn-green { background-color: #2D66B6; color: rgb(255, 255, 255);}
.btn-green:hover { background-color: #379113; color: black;}


/* HP Course CATALOG */ 
      /* Level badge panel — replaces the webp image */
      .level-badge-panel {
        height: 300px;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        padding: 0 1.5rem 1.25rem 0;
        overflow: hidden;
      }

      .level-badge-panel .level-label {
        font-family: "Open Sans", sans-serif;
        font-size: 12rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.92);
        line-height: 1;
        letter-spacing: -2px;
        user-select: none;
      }






footer { background-color: #212529; }
footer .nav-link,
footer p { color: rgba(255, 255, 255, 0.65); }
footer .nav-link:hover { color: #fff; }


/* TEST CARDS (welcome + gevaluation index) */
.test-card {
  display: block;
  border-radius: 1.25rem;
  padding: 1.5rem 1.5rem 1.75rem;
  text-decoration: none;
  color: #1a1a1a;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.test-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  color: #1a1a1a;
}
.test-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.test-card-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
}
.test-card-arrow {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  background: rgba(255,255,255,0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.test-card-meta {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  line-height: 1.7;
  opacity: 0.72;
}

/* 404 page */
.feature-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.hero-img { border-radius: 0.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }





/* RESPONSIVE */

@media (min-width: 1300px) {
  .dialogue-wrapper {
    width: 100%; 
  }
}

@media (max-width: 767.98px) {
  .mobile-gutter {
    margin-left: 1em;
  }
}

/* On large screens, cap sidebar at 150px and let main fill the rest */
@media (min-width: 992px) {
  #sidebar {
    width: 150px !important;
    max-width: 150px !important;
    flex: 0 0 150px !important;   /* critical for flexbox-based Bootstrap grid */
  }

  #mainContent {
    width: calc(100% - 150px) !important;
    max-width: calc(100% - 150px) !important;
    flex: 0 0 calc(100% - 150px) !important;
  }
}