/* ============================================================
   ORE Academy — Admissions Page Stylesheet
   Companion to style.css (global). Admissions-specific only.
   ============================================================ */

/* =====================
   HERO
   ===================== */
.admissions-hero-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 80vh;
}

.hero-image-wrapper {
    position: relative;
    overflow: hidden;
    display: none;
}

.hero-main-img {
    height: 100%;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.img-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(20, 22, 60, 0.75);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 10px 20px;
}

.hero-text-wrapper {
    background: #40439c;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 65px;
    height: 100%;
    width: 100%;
    max-width: 1000px;
    z-index: -1;
}

.hero-text-wrapper .gold-tag {
    display: inline-block;
    background: #c58b43;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    padding: 5px 14px;
    margin-bottom: 24px;
    align-self: flex-start;
}

.outline-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 2px #fff;
    margin-bottom: 24px;
    text-align: left;
}

.outline-title .solid-blue {
    display: block;
    color: #fff;
    -webkit-text-stroke: 0px transparent;
}

.hero-text-wrapper > p {
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.75);
    max-width: 420px;
    margin-bottom: 36px;
}

.hero-scroll-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: bounce 1.8s infinite;
}

.hero-scroll-indicator i {
    animation: bounce 1.8s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(5px); }
}

/* =====================
   CURRICULUM BRIEFING
   ===================== */
.curriculum-briefing {
    background: #f5f6ff;
    padding: 90px 0;
}

.briefing-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
    padding: 0 25px;
}

.briefing-header h2 {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 900;
    color: #40439c;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.briefing-intro {
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
}

.briefing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}

.brief-item {
    background: #fff;
    padding: 40px 30px;
    border-top: 4px solid transparent;
    transition: border-top-color 0.3s;
}

.brief-item:hover {
    border-top-color: #c58b43;
}

.brief-cat {
    display: block;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #c58b43;
    margin-bottom: 12px;
    font-family: 'Courier New', monospace;
}

.brief-item h3 {
    font-size: 1rem;
    font-weight: 900;
    color: #40439c;
    text-align: left;
    margin-bottom: 10px;
    line-height: 1.3;
}

.brief-item p {
    font-size: 0.88rem;
    line-height: 1.7;
    color: #555;
}

/* =====================
   ADMISSIONS FORM
   ===================== */
#admissions-portal {
    background: #f9f9ff;
    padding: 80px 0;
}

.split-admission-hero {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 25px;
    align-items: start;
}

/* Sidebar */
.admission-sidebar {
    position: sticky;
    top: 120px;
    margin-bottom: 20px;
}

.sticky-box {
    background: #40439c;
    padding: 38px 30px;
    color: #fff;
    margin-left: -40px;
    margin-bottom: -20px;
}

.sticky-box .gold-tag {
    display: inline-block;
    background: #c58b43;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    padding: 5px 14px;
    margin-bottom: 20px;
}

.sticky-box h1 {
    font-size: 1.9rem;
    font-weight: 900;
    color: #fff;
    text-align: left;
    line-height: 1.15;
    margin-bottom: 14px;
}

.sticky-box h1 span {
    color: #c58b43;
}

.sticky-box > p {
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 24px;
}

.quick-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s;
}

.quick-links a:hover {
    opacity: 0.75;
}

/* Step Cards */
.admission-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.step-card {
    background: #fff;
    padding: 38px 36px;
    border-left: 5px solid #c58b43;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.step-num {
    display: block;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 3px;
    color: #c58b43 !important;
    font-family: 'Courier New', monospace;
    background: none !important;
    border: none !important;
    padding-bottom: 15px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.5;
    box-shadow: none !important;
    margin-bottom: 10px !important;
}

.step-card h3 {
    font-size: 1.15rem;
    font-weight: 900;
    color: #40439c;
    text-align: left;
    margin: 0;
}

.step-card > p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

.small-info {
    font-size: 0.8rem;
    color: #888;
    margin: 0;
}

/* Form inputs */
.industrial-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    background: #fafafa;
    font-size: 0.93rem;
    color: #333;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
}

.industrial-input:focus {
    border-color: #40439c;
    box-shadow: 0 0 0 3px rgba(64, 67, 156, 0.08);
    background: #fff;
}

.industrial-input.is-valid {
    border-color: #28a745;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.07);
}

.industrial-input.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.07);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #333;
}

.error-msg {
    font-size: 0.73rem;
    color: #dc3545;
    display: none;
}

/* File drop zone */
.upload-drop-container {
    border: 2px dashed #ddd;
    background: #fafafa;
    padding: 34px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.upload-drop-container:hover,
.upload-drop-container.drag-over,
.upload-drop-container.drag-active {
    border-color: #40439c;
    background: #f0f1ff;
}

.upload-drop-container.is-valid {
    border-color: #28a745;
    background: #f0fff4;
}

.upload-drop-container.is-invalid {
    border-color: #dc3545;
    background: #fff5f5;
}

.drop-zone-content i {
    font-size: 1.8rem;
    color: #40439c;
    margin-bottom: 10px;
    display: block;
}

.drop-zone-content p {
    font-size: 0.88rem;
    color: #666;
    margin: 0;
}

.browse-link {
    color: #c58b43;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.file-preview-list {
    margin-top: 12px;
    text-align: left;
}

.file-item,
.file-preview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f0f1ff;
    border: 1px solid rgba(64, 67, 156, 0.15);
    margin-bottom: 5px;
    font-size: 0.82rem;
    color: #40439c;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-name-text {
    font-weight: 600;
}

.remove-file-btn {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    font-size: 0.82rem;
    padding: 2px 6px;
    transition: opacity 0.2s;
}

.remove-file-btn:hover {
    opacity: 0.7;
}

/* POPIA box */
.popia-box {
    background: #fdfdfd;
    padding: 16px;
    border: 1px solid #ddd;
    margin-top: 20px;
    margin-bottom: 20px;
}

.popia-box label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.popia-box input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: #40439c;
    width: 16px;
    height: 16px;
}

.popia-box span {
    font-size: 0.84rem;
    line-height: 1.5;
    color: #444;
}

.popia-box.is-invalid {
    border-color: #dc3545;
    background: #fff5f5;
}

/* Font Awesome sets display:inline-block directly on .fa-solid, which
   loads after this stylesheet and has the same specificity as the
   browser's built-in [hidden]{display:none} rule — so it wins and the
   spinner stays visible (and spinning) even while marked hidden.
   Force it back off explicitly whenever the hidden attribute is set. */
#btn-spinner[hidden] {
    display: none !important;
}

/* Submit area */
.submit-area {
    display: flex;
    flex-direction: column;
}

.full-width {
    width: 100%;
    text-align: center;
}

.disclaimer {
    font-size: 0.76rem;
    color: #aaa;
    text-align: center;
    margin-top: 10px;
}

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

@media (max-width: 960px) {
    .admissions-hero-v2 {
        grid-template-columns: 1fr;
        min-height: auto;
        margin-bottom: -95px;
    }

    .hero-main-img {
        min-height: 320px;
    }

    .hero-text-wrapper {
        padding: 60px 40px;
        width: 100%;
        max-width: 100%;
    }

    .briefing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .split-admission-hero {
        grid-template-columns: 1fr;
        gap: 0px;
        padding: 0 8px; /* near edge-to-edge, was eating too much width */
    }

    .admission-sidebar {
        position: sticky;
        top: 120px;
        margin-bottom: 0px;
    }

    /* The negative margins on .sticky-box are a desktop-only trick to
       bleed the box past the sidebar's own padding. On a single-column
       mobile layout there's no sidebar padding to offset, so the
       negative margins just pull the box sideways into neighboring
       content — reset them here. */
    .sticky-box {
        margin-left: 0;
        margin-bottom: 0;

        /* On mobile, the sticky box items stack vertically, so we need to add some extra padding to the bottom of the box to avoid the last item being too close to the edge. */
        display: grid;
        grid-template-areas: "overlay";
    }
}

@media (max-width: 600px) {
    .hero-text-wrapper {
        padding: 50px 22px;
        width: 100%;
        max-width: 100%;
    }

    .outline-title {
        font-size: 2.2rem;
    }

    .curriculum-briefing {
        padding: 60px 0;
    }

    .briefing-grid {
        grid-template-columns: 1fr;
    }

    .brief-item {
        padding: 26px 20px;
    }

    #admissions-portal {
        padding: 50px 0;
    }

    .split-admission-hero {
        padding: 0; /* fully edge-to-edge */
    }

    .step-card {
        padding: 20px 14px;
        width: 100%;
        border-left: none;
        border-top: 5px solid #c58b43; /* accent moved to top since there's no side gutter to show a left border against */
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .sticky-box {
        padding: 8px 0px;
    }
}