/* H2O Recruitment - Frontend styles */

/* Container respects Elementor width; center content */
.h2o-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Jobs grid */
.h2o-jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(338px, 1fr));
  gap: 1.25rem;
}

.h2o-job-card {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: transform .18s ease, box-shadow .18s ease;
  max-width: 380px;
}
.h2o-job-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Make the entire card clickable while preserving semantics */
.h2o-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.h2o-card-actions { position: relative; z-index: 2; margin-top: 20px; }
.h2o-card-header { display: block; margin-bottom: 0; }
.h2o-card-badge { margin-top: 10px; margin-bottom: 12px; }
.h2o-card-title { margin: 0 0 10px 0; font-weight: 600; font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem); line-height: 1.35; }
.h2o-card-excerpt { margin: 12px 0 0 0; }
.h2o-excerpt-label { color: #327e8b; font-weight: 600; }

.h2o-badge {
  display: inline-block;
  background: #d4af6a;
  color: #fff;
  border: 1px solid #d4af6a;
  border-radius: 3px;
  padding: .15rem .5rem;
  font-size: .85rem;
  line-height: 1.2;
}

.h2o-card-meta,
.h2o-detail-meta {
  display: grid;
  gap: 4px;
  color: #4b5563;
  margin: 0;
  font-size: 16px;
}
.h2o-meta { display: flex; gap: .35rem; align-items: baseline; }
.h2o-meta-label { color: #327e8b; font-weight: 600; }

.h2o-button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .75rem;
  background: #327e8b;
  color: #fff;
  border-radius: 3px;
  text-decoration: none;
  font-weight: 500;
  font-size: clamp(.95rem, .85rem + .3vw, 1rem);
}
.h2o-button:hover { background: #2a6b77; }
.h2o-button::after {
  content: '→';
  font-size: 1.1em;
}

/* Detail view */
.h2o-job-detail { background: transparent; }
.h2o-back { display: inline-block; margin-bottom: .75rem; text-decoration: none; color: #111827; }
.h2o-detail-header { margin-bottom: .75rem; }
.h2o-detail-title { margin: .25rem 0; font-weight: 700; font-size: clamp(1.75rem, 1rem + 2.5vw, 2.75rem); line-height: 1.25; }
.h2o-detail-content { margin-top: .75rem; }
.h2o-detail-actions { margin-top: 1rem; }

/* Typography follows site clamp patterns; inherits fonts from theme/Elementor */
.h2o-job-card p, .h2o-job-card li, .h2o-job-detail p, .h2o-job-detail li {
  font-size: 16px;
  line-height: 1.6;
}

@media (min-width: 1240px) {
  .h2o-container { max-width: 1240px; }
}

/* Modal */
.h2o-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.h2o-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}
.h2o-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}
.h2o-modal-dialog {
  position: relative;
  max-width: 640px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  padding: 1rem 1.25rem 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  z-index: 1;
}
.h2o-modal-close { position: absolute; right: .5rem; top: .25rem; border: 0; background: transparent; font-size: 1.5rem; cursor: pointer; }
.h2o-modal-title { margin: .25rem 1.5rem .75rem .25rem; font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem); }
.h2o-field { margin-bottom: .6rem; }
.h2o-field input[type="text"],
.h2o-field input[type="email"],
.h2o-field input[type="file"] { display: block; width: 100%; padding: .5rem .6rem; border: 1px solid #e5e7eb; border-radius: 8px; }
.h2o-form-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.h2o-button-secondary { background: #6b7280; }
.h2o-button-secondary:hover { background: #525865; }
.h2o-form-message { margin-top: .5rem; font-weight: 500; }