/* ==========================================================================
   HEADER & BRANDING STYLES - UNTAD KESMAS THEME
   Path: assets/css/header.css
   ========================================================================== */

/* 1. Topbar (Ungu Tua, Kontak, & Sosmed) */
.bg-dark-purple,
.topbar-wrapper {
  background-color: var(--untad-dark-topbar, #1e0938) !important;
  color: #ffffff;
  font-size: 0.8rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(255, 193, 7, 0.15);
}

.topbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar-section a.hover-warning,
.topbar-right a {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

.topbar-section a.hover-warning:hover,
.topbar-right a:hover {
  color: #ffc107 !important; /* Warna Warning / Kuning */
}

/* 2. Header Branding Section */
.branding-section,
.branding-wrapper {
  background: #ffffff;
  padding: 0.75rem 0;
}

.branding-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logos Wrapper & Responsive Multi-Logo */
.header-logos-wrapper img,
.header-logos-wrapper .custom-logo,
.header-logos-wrapper a img,
.brand-logo {
  max-height: 58px !important;
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: inline-block !important;
}

/* Branding Typography & Colors */
.text-purple-branding {
  color: var(--untad-purple-branding, #2e1065) !important;
}

.text-purple-sub {
  color: var(--untad-purple-sub, #065f46) !important; /* Hijau/Teal Khas FKM */
}

.fw-black {
  font-weight: 900 !important;
}

.brand-titles .sub-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.5px;
  display: block;
}

.brand-titles .main-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--untad-purple-branding, #2e1065);
  line-height: 1.15;
  letter-spacing: -0.3px;
}

.brand-titles .faculty-title {
  font-size: 0.70rem;
  font-weight: 700;
  color: #065f46;
  display: block;
}

.brand-titles .univ-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--untad-purple-branding, #2e1065);
  display: block;
}

/* 3. Actions: Quick Search Bar & SIGA-8 Button */
.branding-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.search-form-header {
  position: relative;
  display: flex;
  align-items: center;
}

.search-form-header .search-field {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  border-radius: 50rem;
  font-size: 0.825rem;
  width: 200px;
  outline: none;
  transition: all 0.2s ease;
}

.search-form-header .search-field:focus {
  background: #ffffff;
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.search-form-header .search-submit {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
}

/* Button SIAKAD / SIGA-8 */
.btn-siga-purple,
.btn-siakad {
  background-color: var(--untad-btn-siga, #3b0764) !important;
  color: #ffffff !important;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  box-shadow: 0 4px 10px rgba(59, 7, 100, 0.2);
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}

.btn-siga-purple:hover,
.btn-siakad:hover {
  background-color: #2e1065 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 15px rgba(59, 7, 100, 0.35);
  transform: translateY(-1px);
}