/* ==========================================================================
   JamesFranklin.au
   Main Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */

:root {
    --bs-body-font-family: 'Inter', sans-serif;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 52, 58, 64;

    --accent: #0d6efd;
    --background: #f4f7f6;
    --border: #dee2e6;
    --timeline: #e9ecef;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
    background: var(--background);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    background: #fff;
    padding: 3rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.hero img {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
    border: none;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.section-title {
    margin-bottom: 1.5rem;
    font-weight: 700;
    color: var(--bs-dark);
}

.job-title {
    margin-bottom: 0;
    font-weight: 500;
}

.job-duration {
    font-size: .9rem;
    color: #6c757d;
}

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */

.timeline {
    position: relative;
    padding-left: 1.5rem;
    border-left: 2px solid var(--timeline);
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
}

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

.timeline-item::before {
    content: "";
    position: absolute;
    top: .3rem;
    left: -2.3rem;

    width: 14px;
    height: 14px;

    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--accent);
}

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

.list-group-item {
    border: none;
    padding-left: 0;
}

.list-group-item i {
    width: 20px;
    margin-right: .75rem;
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

a {
    transition: color .2s ease;
}

a:hover {
    text-decoration: none;
}