/**
 * Enertime Custom Careers Page Stylesheet
 * Brand: Enertime Sdn Bhd
 * Design Style: Dark dramatic sport meets lifestyle
 * Fully Responsive, Gutenberg Compatible
 */

.enertime-careers-page {
  background-color: var(--enertime-black, #0D0D0D);
  color: var(--enertime-white, #FFFFFF);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  padding-bottom: 80px;
}

/* 1. HERO SECTION */
.enertime-careers-hero {
  position: relative;
  background-color: var(--enertime-black, #0D0D0D);
  padding: 140px 0 80px;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.enertime-careers-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='93' viewBox='0 0 80 93'%3E%3Cpath d='M40 0 L80 23.3 L80 70 L40 93.3 L0 70 L0 23.3 Z' fill='none' stroke='%23C0392B' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 80px 93px;
}

.enertime-careers-title {
  font-size: 3.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--enertime-white, #FFFFFF);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.enertime-careers-subtitle {
  font-size: 1.125rem;
  color: var(--enertime-text-muted, #95A5A6);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 2. BODY LAYOUT */
.enertime-careers-body {
  padding: 80px 0;
}

.enertime-careers-grid {
  display: flex;
  gap: 4rem;
  align-items: flex-start;
  margin-bottom: 5rem;
}

.enertime-careers-intro-col {
  flex: 0 0 50%;
}

.enertime-careers-values-col {
  flex: 0 0 50%;
  background: rgba(26, 26, 46, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 40px;
  backdrop-filter: blur(10px);
}

.enertime-careers-body h2 {
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--enertime-white, #FFFFFF);
  margin-bottom: 2rem;
  position: relative;
  padding-bottom: 10px;
}

.enertime-careers-body h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 2px;
  background-color: var(--enertime-red, #C0392B);
}

/* Values Styling */
.value-item {
  position: relative;
  padding-left: 56px;
  margin-bottom: 2rem;
  min-height: 40px;
  display: block !important;
}

.value-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background-color: rgba(192, 57, 43, 0.1);
  border: 1.5px solid rgba(192, 57, 43, 0.3);
  border-radius: 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  transition: all 250ms ease;
}

.value-item:hover::before {
  background-color: var(--enertime-red, #C0392B);
  border-color: var(--enertime-red, #C0392B);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(192, 57, 43, 0.3);
}

/* Specific Value Icons (URL Encoded SVGs) */
.value-energy::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23C0392B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
}
.value-energy:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
}

.value-integrity::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23C0392B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}
.value-integrity:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

.value-excellence::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23C0392B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='7'/%3E%3Cpolyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.88'/%3E%3C/svg%3E");
}
.value-excellence:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='7'/%3E%3Cpolyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.88'/%3E%3C/svg%3E");
}

.value-item .value-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--enertime-text-gold, #E6C280);
  margin: 0 0 0.25rem 0 !important;
}

.value-item .value-desc {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

/* 3. OPEN POSITIONS SECTION */
.enertime-positions-section {
  padding: 60px 0;
}

.enertime-positions-section h2 {
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 3rem;
  position: relative;
  padding-bottom: 10px;
}

.enertime-positions-section h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 2px;
  background-color: var(--enertime-red, #C0392B);
}

.enertime-positions-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Positions Card Styling */
.career-position-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 30px;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.career-position-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--enertime-red, #C0392B);
  opacity: 0;
  transition: opacity 300ms ease;
}

.career-position-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(192, 57, 43, 0.3);
  transform: translateX(5px);
  box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.3);
}

.career-position-item:hover::before {
  opacity: 1;
}

.position-meta-wrap {
  flex-grow: 1;
}

.career-position-item .position-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--enertime-white, #FFFFFF);
  margin: 0 0 0.5rem 0 !important;
}

.career-position-item .position-meta {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--enertime-text-gold, #E6C280);
  margin: 0 0 1rem 0 !important;
}

.career-position-item .position-description {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin: 0 !important;
  max-width: 800px;
}

.position-apply-btn {
  flex-shrink: 0;
}

.position-apply-btn .wp-block-button__link {
  background-color: transparent !important;
  color: var(--enertime-white, #FFFFFF) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 10px 24px !important;
  border-radius: 6px !important;
  transition: all 250ms ease !important;
}

.career-position-item:hover .position-apply-btn .wp-block-button__link {
  background-color: var(--enertime-red, #C0392B) !important;
  border-color: var(--enertime-red, #C0392B) !important;
  box-shadow: 0 4px 10px rgba(192, 57, 43, 0.3) !important;
}

/* Responsive Positions List */
@media (max-width: 768px) {
  .enertime-careers-grid {
    flex-direction: column;
    gap: 3rem;
  }
  .enertime-careers-intro-col,
  .enertime-careers-values-col {
    flex: 0 0 100%;
    width: 100%;
  }
  .career-position-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 24px;
  }
  .career-position-item:hover {
    transform: translateY(-2px);
  }
  .position-apply-btn {
    width: 100%;
  }
  .position-apply-btn .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
}

/* GeneratePress Integration Overrides for Careers Page */
body.page-id-53 #content,
body.page-id-53 #page,
body.page-id-53 .site-content,
body.page-template-page-careers-php #content,
body.page-template-page-careers-php #page,
body.page-template-page-careers-php .site-content,
body.page-template-page-careers #content,
body.page-template-page-careers #page,
body.page-template-page-careers .site-content {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: var(--enertime-black, #0D0D0D) !important;
}

body.page-id-53 #primary,
body.page-template-page-careers-php #primary,
body.page-template-page-careers #primary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-id-53 .site-header,
body.page-id-53 .main-navigation,
body.page-id-53 .footer-widgets,
body.page-id-53 #right-sidebar,
body.page-id-53 #left-sidebar,
body.page-template-page-careers-php .site-header,
body.page-template-page-careers-php .main-navigation,
body.page-template-page-careers-php .footer-widgets,
body.page-template-page-careers-php #right-sidebar,
body.page-template-page-careers-php #left-sidebar,
body.page-template-page-careers .site-header,
body.page-template-page-careers .main-navigation,
body.page-template-page-careers .footer-widgets,
body.page-template-page-careers #right-sidebar,
body.page-template-page-careers #left-sidebar {
  display: none !important;
}