/* ==========================================================
   Aplify – Job Description Page
   Tokens defined in aplify-tokens.css (scoped to :root)
   ========================================================== */

.aplify-job-description {
  margin: 0 auto;
  font-family: var(--font-family);
  color: var(--fg);
}

/* ==========================================================
   LOADING / ERROR STATES
   ========================================================== */

.aplify-jd-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 220px;
  padding: 60px 20px;
  text-align: center;
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--muted);
  gap: 16px;
}

.aplify-jd-loading::before {
  content: "";
  width: 28px;
  height: 28px;
  border: 3px solid var(--panel-border);
  border-top: 3px solid var(--highlight);
  border-radius: 50%;
  animation: aplify-spin 1s linear infinite;
  flex-shrink: 0;
}

@keyframes aplify-spin {
  to { transform: rotate(360deg); }
}

.aplify-jd-error {
  background: color-mix(in srgb, var(--highlight) 12%, white);
  color: var(--fg);
  padding: 20px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
}

/* ==========================================================
   TITLE
   ========================================================== */

.aplify-jd-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
  line-height: 1.25;
  color: var(--hero-text-color, #fff);
  font-weight: var(--display-weight, 550);
  font-family: var(--font-family);
}

/* ==========================================================
   META SECTION
   ========================================================== */

.aplify-jd-meta {
  background: var(--input-bg);
  padding: 28px;
  border-radius: 20px;
  margin-bottom: 40px;
  border: var(--panel-border-w) solid var(--panel-border);
  box-shadow: var(--panel-shadow);
}

.aplify-jd-company {
  font-size: var(--text-md, 16px);
  margin-top: 0;
  margin-bottom: 18px;
  color: var(--muted);
  font-weight: var(--label-weight);
  font-family: var(--font-family);
}

/* ==========================================================
   DETAILS GRID
   ========================================================== */

.aplify-jd-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}

.aplify-jd-detail {
  font-size: var(--text-md, 16px);
  color: var(--fg);
  font-family: var(--font-family);
}

.aplify-jd-detail strong {
  font-weight: var(--weight-strong, 600);
  color: var(--highlight);
}

/* ==========================================================
   JOB BODY
   ========================================================== */

.aplify-jd-body {
  font-family: var(--font-family);
  font-size: var(--text-md, 16px);
  line-height: 1.7;
  color: var(--fg);
}

.aplify-jd-body h1,
.aplify-jd-body h2,
.aplify-jd-body h3,
.aplify-jd-body h4 {
  margin-top: 1.5em;
  margin-bottom: 0.6em;
  color: var(--primary);
  font-weight: var(--display-weight, 550);
}

.aplify-jd-body h3 {
  font-size: var(--text-2xl, 24px);
  line-height: 1.3;
  font-weight: var(--display-weight, 550);
  color: var(--highlight);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.aplify-jd-body h2 {
  font-size: var(--text-2xl, 24px)!important;
  color: var(--primary);
}


.aplify-jd-body p {
  margin-block-start: 0.5em !important;
}

.aplify-jd-body ul,
.aplify-jd-body ol {
  padding-left: 20px!important;
  margin-bottom: 1.2em;
}

.aplify-jd-body li {
  margin-bottom: 0.5em;
}

/* ATS Typography Normaliser */
.aplify-jd-body,
.aplify-jd-body * {
  font-family: var(--font-family) !important;
  font-size: var(--text-md, 16px)!important;
  line-height: 1.7 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* ==========================================================
   APPLY SECTION
   ========================================================== */

.aplify-jd-apply {
    padding-top: 40px;
}

.aplify-jd-apply-btn,
a.aplify-jd-apply-btn,
button.aplify-jd-apply-btn  {
  display: flex;
  width: 100%;
  justify-content: center;
  background: var(--highlight);
  color: var(--button-text-color);
  padding: 18px 34px;
  border: none;
  border-radius: var(--btn-radius);
  font-size: var(--text-md, 16px);
  font-weight: var(--button-weight);
  font-family: var(--font-family);
  text-decoration: none;
  box-shadow: var(--button-shadow);
  transition: background .2s, box-shadow .2s, transform .05s;
  box-sizing: border-box;
}

.aplify-jd-apply-btn:hover {
  background: var(--primary);
  color: var(--button-text-color);
  box-shadow: var(--button-shadow-hover);
  text-decoration: none;
}

.aplify-jd-apply-btn:active {
  transform: translateY(1px);
}

/* ==========================================================
   VIDEO EMBEDS
   ========================================================== */

iframe[src*="youtube.com"],
iframe[src*="youtu.be"] {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  display: block;
  border: none;
  margin-bottom: 2rem;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 768px) {
  .aplify-job-description {
    padding: 0;
  }

  .aplify-jd-title {
    font-size: var(--text-2xl, 24px);
  }
	
	.aplify-jd-body h2 {
    font-size: var(--text-xl, 20px)!important;
}
	
	.aplify-jd-body, .aplify-jd-body * {
    font-size: var(--text-base, 14px)!important;
    line-height: 1.6 !important;
}

  .aplify-jd-details-grid {
    grid-template-columns: 1fr;
	  gap: 5px 5px;
  }

  .aplify-jd-meta {
    padding: 20px;
	  margin-bottom: 20px;
  }
	
	.aplify-jd-detail {
    font-size: var(--text-base, 14px);
}

  .aplify-jd-apply-btn {
    display: block;
    width: 100%;
    text-align: center;
  }
	.aplify-jd-apply-btn, a.aplify-jd-apply-btn, button.aplify-jd-apply-btn {
    padding: 26px 34px;
    border-radius: 0;
    position: fixed;
    bottom: 0;
    left: 0;
		z-index: 9999;
		font-size: var(--text-lg, 18px);
}
}