/* ============================================================
   front.css — extracted from Front blade views
   Sources: layout.blade.php, about.blade.php, teacher-apply.blade.php
   ============================================================ */

/* ── layout.blade.php ── */
.hero-title { position: relative; }
.hero-title::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 1px;
  background-color: #f59e0b;
  margin-top: -20px;
}
.info-title { position: relative; }
.info-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 150px;
  height: 1px;
  background-color: #2b7bd1;
  margin-top: -20px;
}

/* Desktop dropdowns */
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  padding-top: 8px; /* bridges the gap so mouse doesn't leave hover zone */
}
.nav-dropdown-menu.right-align { left: auto; right: 0; }

@media (min-width: 1024px) {
  .nav-dropdown:hover .nav-dropdown-menu { display: block; }
}

/* Mobile menu slide */
#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

/* Mobile sub-accordion */
.mob-sub { display: none; }
.mob-sub.open { display: block; }


/* ── about.blade.php ── */
.stat-card {
    text-align: center;
    padding: 32px 20px;
}
.stat-card strong {
    display: block;
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    margin-bottom: 6px;
}
.stat-card span {
    font-size: 0.85rem;
    color: rgba(255,255,255,.75);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

.value-card {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px 24px;
    transition: box-shadow .2s, border-color .2s, transform .2s;
}
.value-card:hover {
    box-shadow: 0 8px 32px rgba(15,118,110,.12);
    border-color: #99f6e4;
    transform: translateY(-3px);
}
.value-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}

.step-line {
    position: absolute;
    top: 26px; left: calc(50% + 26px);
    width: calc(100% - 52px);
    height: 2px;
    background: linear-gradient(90deg, #0d9488, #e5e7eb);
}
@media(max-width: 768px) { .step-line { display: none; } }

.team-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
    transition: box-shadow .2s, transform .2s;
}
.team-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.12); transform: translateY(-4px); }

@keyframes fadeUp {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}
.fade-up { animation: fadeUp .6s ease both; }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }


/* ── teacher-apply.blade.php ── */
.apply-hero { background: linear-gradient(135deg, #0f4c3a 0%, #1a7a5e 50%, #2f8378 100%); color: #fff; padding: 32px 24px; text-align: center; }
.apply-hero h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; }
.apply-hero p  { font-size: 0.9rem; color: rgba(255,255,255,.85); max-width: 500px; margin: 0 auto; }

.apply-form-wrap { max-width: 820px; margin: 0 auto; padding: 28px 24px 48px; }

.form-section { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 28px 32px; margin-bottom: 24px; }
.form-section-title {
    font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: #0f4c3a; margin-bottom: 20px; padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb; display: flex; align-items: center; gap: 8px;
}
.form-section-title i { color: #2f8378; font-size: 15px; }

.field-grid { display: grid; gap: 16px; }
.field-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.field-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media(max-width:640px) { .field-grid.cols-2, .field-grid.cols-3 { grid-template-columns: 1fr; } }

.field label {
    display: block; font-size: 13px; font-weight: 700; color: #374151; margin-bottom: 6px;
}
.field label span.req { color: #ef4444; margin-left: 2px; }
.field input, .field select, .field textarea {
    width: 100%; padding: 11px 14px; border: 1.5px solid #d1d5db; border-radius: 10px;
    font-size: 13.5px; color: #1f2937; background: #f9fafb;
    transition: border-color .2s, box-shadow .2s; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: #2f8378; background: #fff;
    box-shadow: 0 0 0 3px rgba(47,131,120,.12);
}
.field .error-msg { font-size: 12px; color: #ef4444; margin-top: 4px; }

.lang-checkboxes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.lang-chip { display: flex; align-items: center; gap: 6px; background: #f3f4f6; border: 1.5px solid #e5e7eb; border-radius: 20px; padding: 6px 14px; cursor: pointer; transition: all .15s; font-size: 13px; font-weight: 600; color: #374151; user-select: none; }
.lang-chip input { display: none; }
.lang-chip:has(input:checked) { background: rgba(47,131,120,.1); border-color: #2f8378; color: #0f4c3a; }

.submit-btn {
    width: 100%; padding: 16px; background: linear-gradient(135deg, #0f4c3a, #2f8378);
    color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 800;
    cursor: pointer; transition: opacity .2s, transform .15s; letter-spacing: .02em;
}
.submit-btn:hover { opacity: .92; transform: translateY(-1px); }

.why-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 18px; }
.why-card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 12px; text-align: center; }
.why-card i { font-size: 18px; color: #fbbf24; margin-bottom: 6px; display: block; }
.why-card h4 { font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.why-card p { font-size: 11px; color: rgba(255,255,255,.75); margin: 0; }