:root {
    --primary-blue: #4A90E2;
    --secondary-purple: #8A2BE2;
    --accent-gold: #FFD700;
    --dark-background-text: #2C3E50;
    --light-background-text: #ECF0F1;
    --off-white: #F7F9FA;
    --medium-grey: #7F8C8D;
    --light-grey: #BDC3C7;
    --success-green: #2ECC71;
    --warning-yellow: #F39C12;
    --error-red: #E74C3C;
}

/* General Body Styles */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--off-white);
    color: var(--dark-background-text);
}

main {
    flex: 1;
}

/* Tool Card Styles */
.tool-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    height: 100%; /* Ensure cards in the same row have the same height */
    display: flex;
    flex-direction: column;
    background-color: var(--light-background-text);
    border: 1px solid var(--light-grey);
}

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.tool-card-img-container {
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    position: relative;
    overflow: hidden;
    background-color: var(--light-grey);
}

.tool-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area without distortion */
}

.tool-card .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.tool-card .card-title {
    font-weight: bold;
    color: var(--dark-background-text);
}

.tool-card .card-text {
    flex-grow: 1;
    color: var(--medium-grey);
}

.tool-card .btn {
    margin-top: auto; /* Push button to the bottom of the card */
}

/* Tool Detail Page */
.tool-detail-img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.tool-meta-list {
    list-style: none;
    padding-left: 0;
}

.tool-meta-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--light-grey);
}
.tool-meta-list li:last-child {
    border-bottom: none;
}

.tool-meta-list strong {
    display: inline-block;
    width: 120px;
    color: var(--dark-background-text);
}


/* Header and Footer */
header, footer {
    background-color: var(--dark-background-text);
    color: var(--light-background-text);
}

header a, footer a {
    color: var(--light-background-text);
}

header a:hover, footer a:hover {
    color: var(--primary-blue);
}

/* Links */
a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: var(--secondary-purple);
    text-decoration: underline;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #fff;
}

.btn-primary:hover {
    background-color: var(--secondary-purple);
    border-color: var(--secondary-purple);
}

.btn-secondary {
    background-color: var(--medium-grey);
    border-color: var(--medium-grey);
    color: #fff;
}

.btn-secondary:hover {
    background-color: var(--dark-background-text);
    border-color: var(--dark-background-text);
}

/* Semantic Colors */
.alert-success {
    color: #fff;
    background-color: var(--success-green);
    border-color: var(--success-green);
}

.alert-warning {
    color: #fff;
    background-color: var(--warning-yellow);
    border-color: var(--warning-yellow);
}

.alert-danger {
    color: #fff;
    background-color: var(--error-red);
    border-color: var(--error-red);
}

/* Tool Detail Page Specifics */
.col-lg-8 h1, .col-lg-8 h2, .col-lg-8 h3, .col-lg-8 h4, .col-lg-8 h5, .col-lg-8 h6 {
    color: var(--dark-background-text);
}

.tool-description {
    color: var(--medium-grey);
}

/* Fix for article header color inheritance */
.col-lg-8 header {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

/* Overriding default card styles for a cleaner look on detail page */
.col-lg-4 .card {
    background-color: var(--off-white);
    border: none;
}

.col-lg-4 .card .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--light-grey);
    color: var(--dark-background-text);
    font-weight: bold;
    padding-left: 0;
}

.col-lg-4 .card .card-body {
    padding-left: 0;
    padding-right: 0;
}