/* ============================================================
   Noesis Learning Centre — Supplementary Styles
   (Primary theming is in noesis-style.scss)
   ============================================================ */

/* Container for responsive iframe */
.responsive-embed {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 aspect ratio */
}

/* Responsive iframe */
.responsive-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.whitewash-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

.center-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   Button Overrides (Navy/Gold)
   ============================================================ */

.btn-primary {
  background-color: #002347 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.6rem 1.2rem !important;
  font-weight: 600 !important;
  color: white !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.3s !important;
}

.btn-primary:hover {
  background-color: #003366 !important;
  box-shadow: 0 4px 15px rgba(0, 35, 71, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   Carousel Overrides (Responsive & Uncropped)
   ============================================================ */

.carousel-custom-inner {
  background-color: #001f3f;
  border-radius: 8px;
  overflow: hidden;
}

.carousel-custom-img {
  max-height: 450px;
  width: auto;
  margin: 0 auto;
  object-fit: contain;
}

/* ============================================================
   Window Widget (kept for compatibility)
   ============================================================ */

.window {
  border: #d3d3d3 1px solid;
  position: fixed;
  right: -355;
  top: 0;
  background: white;
  z-index: 900;
  overflow: hidden;
}

.window-bar {
  padding: 1%;
  position: relative;
}

.window-bar:active,
.window-bar:focus {
  cursor: default;
}

.window-bar i {
  cursor: pointer;
  right: 1%;
  top: 50%;
  margin-top: -0.5em;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.window-bar font {
  font-family: "Inter", sans-serif;
  font-size: 12pt;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.window-resize {
  position: absolute;
  opacity: 0;
  background: red;
}

.window-resize.left {
  width: 1%;
  height: 100%;
  left: 0px;
  top: 0px;
  cursor: w-resize;
}

.window-resize.right {
  width: 1%;
  height: 100%;
  right: 0px;
  top: 0px;
  cursor: e-resize;
}

.window-resize.down {
  width: 100%;
  height: 1%;
  left: 0px;
  bottom: 0px;
  cursor: s-resize;
}

/* ============================================================
   Language Toggle Button
   ============================================================ */

.lang-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(197, 160, 89, 0.55);
  border-radius: 50px;
  padding: 0.22rem 0.7rem;
  cursor: default;
  user-select: none;
  transition: border-color 0.3s ease, background 0.3s ease;
  white-space: nowrap;
}

.lang-toggle-btn:hover {
  border-color: #c5a059;
  background: rgba(197, 160, 89, 0.15);
}

.lang-opt {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  border-radius: 40px;
  transition: color 0.25s ease, background 0.25s ease;
  line-height: 1;
}

.lang-opt:hover {
  color: #c5a059;
}

.lang-opt.lang-active {
  color: #001a33;
  background: #c5a059;
}

.lang-divider {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.75rem;
  pointer-events: none;
  padding: 0 0.1rem;
}