/* ==========================================================================
   EDU LINKED — COMPONENTS.CSS
   Reusable UI elements · cards · buttons · forms · icons
   ========================================================================== */


/* -------------------------------------------------------
   BUTTONS
   ------------------------------------------------------- */

.edulinked-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: 1px solid transparent;

    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--weight-semibold);

    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
}

/* Primary button */
.edulinked-btn-primary {
    background: var(--edulinked-primary);
    color: #fff;
}

.edulinked-btn-primary:hover {
    background: var(--edulinked-primary-text);
}

/* Secondary */
.edulinked-btn-secondary {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

.edulinked-btn-secondary:hover {
    border-color: var(--color-border-strong);
}

/* Ghost button */
.edulinked-btn-ghost {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.edulinked-btn-ghost:hover {
    border-color: var(--color-border-strong);
}

/* High contrast mode support */  /*  */
@media (prefers-contrast: high) {
    .edulinked-btn-primary {
        background: #000 !important;
        border: 2px solid #fff !important;
        color: #fff !important;
    }

    .edulinked-btn-secondary {
        background: transparent !important;
        border: 2px solid #000 !important;
        color: #000 !important;
    }
}


/* -------------------------------------------------------
   FORM CONTROLS  (Unified)
   ------------------------------------------------------- */

.edulinked-form-control {
    width: 100%;
    padding: 0.75rem 1rem;

    background: var(--color-surface);
    border-radius: 10px;
    border: 1px solid var(--color-border);

    color: var(--color-text);
    font-size: var(--font-size-base);

    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.edulinked-form-control:focus {
    border-color: var(--edulinked-primary-text);
    outline: none;
    box-shadow: 0 0 0 3px rgba(44,90,160,0.2);
}

/* High contrast mode */          /*  */
@media (prefers-contrast: high) {
    .edulinked-form-control:focus {
        border-color: #000 !important;
        box-shadow: 0 0 0 3px rgba(0,0,0,0.3) !important;
    }
}


/* -------------------------------------------------------
   CARDS — BASE
   ------------------------------------------------------- */

.edulinked-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;

    padding: var(--spacing-md);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.edulinked-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* High contrast card mode */     /*  */
@media (prefers-contrast: high) {
    .edulinked-card {
        border: 2px solid #000 !important;
    }
}


/* -------------------------------------------------------
   DETAIL CARDS / VISUAL CARDS
   from theme(1).css impact/detail blocks
   ------------------------------------------------------- */

.detail-card,
.impact-card,
.kpi-card,
.sdg-card {
    background: var(--color-surface);
    border-radius: 16px;
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    transition: all 0.25s ease;
}

/* Detail visual area */      /*  */
.detail-card .detail-visual {
    height: 140px;
    width: 100%;
    border-radius: 12px;
    background: var(--color-bg-alt);
}

.detail-card .detail-icon {
    width: 60px;
    height: 60px;
    font-size: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: var(--color-surface-alt);
    color: var(--color-text);
}

/* Impact visuals */          /*  */
.impact-card .impact-visual {
    height: 140px;
    border-radius: 12px;
    background: var(--color-bg-alt);
}

.impact-card .impact-icon {
    width: 60px;
    height: 60px;
    font-size: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* KPI visuals */            /*  */
.kpi-card .kpi-visual {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: var(--color-bg-alt);
}

.kpi-card .kpi-icon {
    width: 55px;
    height: 55px;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
}

/* SDG visuals */            /*  */
.sdg-card .sdg-header {
    height: 150px;
    border-radius: 12px;
    background: var(--color-bg-alt);
}

.sdg-card .sdg-number {
    width: 65px;
    height: 65px;
    font-size: 1.5rem;

    border-radius: 50%;
    background: var(--color-surface-alt);

    display: flex;
    align-items: center;
    justify-content: center;
}

/* High contrast for icons */ /*  */
@media (prefers-contrast: high) {
    .detail-icon,
    .impact-icon,
    .kpi-icon,
    .sdg-number {
        background: #000 !important;
        color: #fff !important;
        border: 2px solid #fff !important;
    }
}


/* -------------------------------------------------------
   TAGS / BADGES
   ------------------------------------------------------- */

.tag,
.badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;

    border-radius: 6px;
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.tag-primary {
    background: var(--edulinked-primary);
    color: #fff;
}

.tag-accent {
    background: var(--edulinked-accent);
    color: #fff;
}


/* -------------------------------------------------------
   SIDEBAR COMPONENTS
   ------------------------------------------------------- */

.sidebar-block {
    padding: var(--spacing-md);
    background: var(--color-surface);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.sidebar-item {
    margin-bottom: var(--spacing-sm);
}

.sidebar-item:last-child {
    margin-bottom: 0;
}


/* -------------------------------------------------------
   ICON BLOCKS
   ------------------------------------------------------- */

.icon-circle {
    width: 50px;
    height: 50px;

    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--color-surface-alt);
    color: var(--color-text);
    font-size: 1.4rem;
}

.icon-xl {
    width: 70px;
    height: 70px;
    font-size: 2rem;
}

/* -------------------------------------------------------
   ANIMATION UTILITIES (component-level)
   ------------------------------------------------------- */

.edulinked-fade-in { animation: edulinkedFadeIn 0.3s ease-in-out; }
.edulinked-slide-up { animation: edulinkedSlideUp 0.3s ease-out; }
.edulinked-scale-in { animation: edulinkedScaleIn 0.2s ease-out; }

/* Keyframes extracted */        /*  */
@keyframes edulinkedFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes edulinkedSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes edulinkedScaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}