/* Obuasi Senior High Technical School - Custom Styles */
/* Black and Yellow Color Scheme */

/* Primary Colors */
:root {
  --primary-black: #000000;
  --primary-yellow: #FFD700;
  --secondary-yellow: #FFC107;
  --accent-white: #FFCE1B;
  --text-light: #F5F5F5;
  --text-dark: #333333;
}

/* Base Theme Colors */
.bg-black { background-color: var(--primary-black) !important; }
.bg-yellow { background-color: var(--primary-yellow) !important; }
.text-yellow { color: var(--primary-yellow) !important; }
.text-black { color: var(--primary-black) !important; }

/* Theme-specific classes */
.bg-theme-colored {
  background-color: var(--primary-black) !important;
}

.text-theme-color-2 {
  color: var(--primary-yellow) !important;
}

.border-theme-color-2 {
  border-color: var(--primary-yellow) !important;
}

/* Button Styles */
.btn-black {
  background-color: var(--primary-black) !important;
  border-color: var(--primary-black) !important;
  color: var(--primary-yellow) !important;
}

.btn-yellow {
  background-color: var(--primary-yellow) !important;
  border-color: var(--primary-yellow) !important;
  color: var(--primary-black) !important;
}

.btn-circled.btn-yellow {
  border-radius: 50px;
}

.btn-lg {
  padding: 12px 25px;
  font-size: 16px;
}

/* Header Styles */
.header-top {
  background-color: var(--primary-black);
  color: var(--accent-white);
}

.menuzord {
  background-color: var(--accent-white);
}

.menuzord-menu > li > a {
  color: var(--text-dark);
}

.menuzord-menu > li > a:hover {
  color: var(--primary-yellow);
}

/* Footer Styles */
.footer {
  background-color: var(--primary-black);
  color: var(--accent-white);
}

.footer a {
  color: var(--primary-yellow);
}

/* Section Styles */
.section-title {
  color: var(--primary-black);
}

.section-title .text-yellow {
  color: var(--primary-yellow) !important;
}

/* Card Styles */
.card {
  border: 1px solid var(--primary-yellow);
}

.card-header {
  background-color: var(--primary-black);
  color: var(--primary-yellow);
}

/* Navigation Pills */
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: var(--primary-yellow);
  color: var(--primary-black);
}

/* Form Styles */
.form-control:focus {
  border-color: var(--primary-yellow);
  box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25);
}

/* Alert Styles */
.alert-success {
  background-color: var(--primary-yellow);
  border-color: var(--secondary-yellow);
  color: var(--primary-black);
}

/* Progress Bars */
.progress-bar {
  background-color: var(--primary-yellow);
}

/* Dropdown Styles */
.dropdown-menu {
  border: 1px solid var(--primary-yellow);
}

.dropdown-menu > li > a:hover {
  background-color: var(--primary-yellow);
  color: var(--primary-black);
}

/* Badge Styles */
.badge-primary {
  background-color: var(--primary-black);
  color: var(--primary-yellow);
}

/* Panel Styles */
.panel-primary {
  border-color: var(--primary-yellow);
}

.panel-primary > .panel-heading {
  background-color: var(--primary-black);
  border-color: var(--primary-yellow);
  color: var(--primary-yellow);
}

/* Table Styles */
.table > thead > tr > th {
  background-color: var(--primary-black);
  color: var(--primary-yellow);
  border-color: var(--primary-yellow);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 215, 0, 0.1);
}

/* Tab Styles */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background-color: var(--primary-yellow);
  color: var(--primary-black);
}

/* Custom Utilities */
.bg-black-gradient {
  background: linear-gradient(135deg, var(--primary-black) 0%, #1a1a1a 100%);
}

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.box-shadow-yellow {
  box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .btn-lg {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* Animation classes */
.fade-in-yellow {
  animation: fadeInYellow 1s ease-in-out;
}

@keyframes fadeInYellow {
  0% { opacity: 0; background-color: var(--primary-yellow); }
  100% { opacity: 1; background-color: transparent; }
}

/* Custom spacing for school-specific elements */
.school-header {
  background: var(--primary-black);
  color: var(--primary-yellow);
  padding: 20px 0;
}

.school-logo {
  max-height: 60px;
  width: auto;
}

.contact-info {
  color: var(--accent-white);
  font-size: 14px;
}

.contact-info i {
  color: var(--primary-yellow);
  margin-right: 8px;
}

/* Teacher Images - Uniform Sizing */
#teachers .team-thumb img {
  height: 360px;
  object-fit: cover;
  width: 100%;
  display: block;
}

#teachers .team-members {
  min-height: 550px;
  display: flex;
  flex-direction: column;
}

#teachers .team-thumb {
  overflow: hidden;
  height: 360px;
}

/* Gallery Images - Uniform Sizing */
#gallery .gallery-item .thumb img {
  height: 300px;
  object-fit: cover;
#gallery .gallery-item .thumb img {
  height: 300px;
  object-fit: cover;
  width: 100%;
  display: block;
}

#gallery .gallery-item {
  overflow: hidden;
}

#gallery .gallery-item .thumb {
  height: 300px;
  position: relative;
}

/* Robotics Gallery Uniform Image Sizing */
#gallery .gallery-item img {
  height: 300px;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* Our Programs Section - Uniform Image Sizing */
.project .thumb {
  height: 280px;
  overflow: hidden;
  position: relative;
}

.project .thumb img {
  height: 280px;
  object-fit: cover;
  width: 100%;
  display: block;
}