/* ==================== Universal Font Styles - Override Bootstrap ==================== */
:root,
body {
    /* Redefine Bootstrap's sans-serif font variable to prioritize Noto Sans Thai */
    --bs-font-sans-serif: "Noto Sans Thai", system-ui, -apple-system, sans-serif;

}

/* ==================== General Body and Base Styles ==================== */
body {
    background-color: #ffffff;
    /* Light grey, like Twitter background */
    font-size: 1rem;
    /* 16px base */
    line-height: 1.6;
    /* Good readability */
    color: var(--bs-body-color);
    /* Ensures text color matches theme */

}

/* ==================== Navbar Styles ==================== */
.navbar {
    border-bottom: 1px solid #e1e8ed;
    background-color: #ffffff !important;
}

.navbar-brand {
    font-weight: bold;
    color: #1da1f2 !important;
}

.nav-link {
    color: #657786 !important;
}

.nav-link:hover {
    color: #1a92da !important;
}

/* ==================== General Card Styles ==================== */
.card.twitter-card {
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.card-title a {
    color: #1da1f2;
    text-decoration: none;
}

.card-title a:hover {
    text-decoration: underline;
}

/* ==================== Button Styles ==================== */
.btn-primary {
    background-color: #1da1f2;
    border-color: #1da1f2;
}

.btn-primary:hover {
    background-color: #1a92da;
    border-color: #1a92da;
}

.btn-outline-primary {
    color: #1da1f2;
    border-color: #1da1f2;
}

.btn-outline-primary:hover {
    background-color: #1da1f2;
    color: #fff;
}

.btn-success {
    background-color: #17bf63;
    border-color: #17bf63;
}

.btn-danger {
    background-color: #e0245e;
    border-color: #e0245e;
}

.btn-warning {
    background-color: #ffad1f;
    border-color: #ffad1f;
    color: #fff;
}

.badge {
    font-size: 0.75em;
    padding: 0.3em 0.6em;
}

/* ==================== Footer and Social Icons ==================== */
footer {
    border-top: 1px solid #e1e8ed;
    color: #657786;
}

/* ==================== Specific Page Element Styles ==================== */
.job-description-text {
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-bottom: 1em;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #4a4a4a;
}

.fade-in-text {
    opacity: 0;
    animation: fadeIn 2s ease-in forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* ==================== Headings and Paragraphs ==================== */
h1 {
    font-size: var(--bs-display-4-font-size);
    font-weight: 700;
    line-height: 1.2;
}

h2 {
    font-size: var(--bs-font-size-1);
    font-weight: 600;
}

h3 {
    font-size: var(--bs-font-size-3);
    font-weight: 500;
}

h4 {
    font-size: var(--bs-font-size-4);
    font-weight: 500;
}

h5 {
    font-size: var(--bs-font-size-5);
    font-weight: 400;
}

h6 {
    font-size: var(--bs-font-size-6);
    font-weight: 400;
}

p,
li {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* ==================== Media Queries for Responsiveness ==================== */
@media (max-width: 768px) {
    h1 {
        font-size: var(--bs-display-5-font-size);
    }

    .job-description-text {
        font-size: 1rem;
    }
}


@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.beeping-status {
    animation: pulse 2s infinite;
}