/* ==========================================
   HARUSOFT TECHNOLOGIES DESIGN SYSTEM
   ========================================== */

:root {
    /* Brand Colors */
    --hs-navy: #002b49;
    --hs-navy-dark: #001e34;
    --hs-navy-subtle: rgba(0, 43, 73, 0.05);

    --hs-red: #842C28;
    --hs-red-hover: #2C2748;
    --hs-red-subtle: rgba(218, 41, 28, 0.08);

    /* Neutral Colors */
    --hs-bg: #f8fafc;
    --hs-border-color: rgba(0, 43, 73, 0.1);
    --hs-text-dark: #1c2a38;
    --hs-text-muted: #4a4e69;
}

/* ==========================================
   1. BASE & TYPOGRAPHY
   ========================================== */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--hs-text-dark);
    background-color: var(--hs-bg);
}

.navbar-brand {
    font-size: 30px;
    font-weight: bold;
}

.hero {
    padding: 100px 0;
}

.brand-top-accent {
    height: 4px;
    background: linear-gradient(90deg, var(--hs-red) 0%, var(--hs-navy) 100%);
}

/* ==========================================
   2. BRAND UTILITY CLASSES
   ========================================== */

.text-hs-navy { color: var(--hs-navy) !important; }
.text-hs-red { color: var(--hs-red) !important; }

.bg-hs-navy { background-color: var(--hs-navy) !important; }
.bg-hs-navy-dark { background-color: var(--hs-navy-dark) !important; }
.bg-hs-red { background-color: var(--hs-red) !important; }
.bg-hs-light { background-color: var(--hs-bg) !important; }

.fs-7 { font-size: 0.8125rem !important; }
.fs-8 { font-size: 0.75rem !important; }
.extra-small { font-size: 0.75rem; }
.tracking-wide { letter-spacing: 0.05em; }

.alert-success {
    font-size: 18px;
    font-weight: 600;
}

/* ==========================================
   3. BUTTONS
   ========================================== */

.btn-hs-red {
    background-color: var(--hs-red);
    border: 1px solid var(--hs-red);
    color: #ffffff;
    font-weight: 600;
    transition: all 0.25s ease-in-out;
}

.btn-hs-red:hover {
    background-color: var(--hs-red-hover);
    border-color: var(--hs-red-hover);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(218, 41, 28, 0.25);
}

.btn-outline-hs-navy {
    color: var(--hs-navy);
    border: 1px solid var(--hs-navy);
    font-weight: 600;
    transition: all 0.25s ease;
}

.btn-outline-hs-navy:hover {
    background-color: var(--hs-navy);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 43, 73, 0.2);
}

.btn-primary {
    background-color: var(--hs-red);
    border: none;
}

.btn-primary:hover {
    background-color: var(--hs-red-hover);
}

.btn-warning {
    background-color: #ff6b00;
    border: none;
}

/* ==========================================
   4. CARDS & CONTAINERS
   ========================================== */

.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.card i {
    color: var(--hs-navy);
}

.card img,
.card-img-top {
    height: 230px;
    object-fit: cover;
}

.tech-card {
    background: #ffffff;
    border: 1px solid var(--hs-border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    transition: all 0.2s ease;
}

.tech-card:hover {
    border-color: var(--hs-red);
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 43, 73, 0.06);
}

.service-card {
    background: #ffffff;
    border: 1px solid var(--hs-border-color);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(218, 41, 28, 0.2);
    box-shadow: 0 16px 32px rgba(0, 43, 73, 0.08) !important;
}

.service-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background-color: var(--hs-red-subtle);
    color: var(--hs-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.portfolio-card {
    transition: all 0.3s ease;
}

.portfolio-card:hover {
    transform: translateY(-10px);
}

.contact-card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.contact-card h3 {
    font-weight: bold;
    margin-bottom: 20px;
}

.login-card {
    border: none;
    border-top: 4px solid var(--hs-red);
    border-radius: 12px;
}

.hover-highlight:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* ==========================================
   5. BADGES & FORMS
   ========================================== */

.badge {
    font-size: 13px;
    padding: 8px 12px;
}

.hs-badge {
    background-color: var(--hs-red-subtle);
    color: var(--hs-red);
    font-weight: 600;
    font-size: 0.825rem;
    padding: 0.4rem 1rem;
    border-radius: 50rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

form label {
    font-weight: 600;
    margin-bottom: 6px;
}

textarea {
    resize: vertical;
}

.input-group-text {
    border-right: none;
}

.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(218, 41, 28, 0.15);
    border-color: var(--hs-red);
}

/* ==========================================
   6. BLOG & CONTENT
   ========================================== */

.blog-content {
    line-height: 1.8;
    font-size: 17px;
}

.blog-content img {
    max-width: 100%;
    height: auto;
}

/* ==========================================
   7. WIDGETS & FOOTER
   ========================================== */

.whatsapp {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    background: #25D366;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transition: all 0.2s ease;
}

.whatsapp:hover {
    color: #ffffff;
    transform: scale(1.08);
}

footer a,
.footer-link {
    color: #A0A5C0;
    text-decoration: none;
    transition: color 0.2s ease;
}

footer a:hover,
.footer-link:hover {
    color: var(--hs-red);
}

/* Reduce font sizes inside sidebar-sm wrapper */
.sidebar-sm h4 {
    font-size: 0.95rem !important; /* Widget Headings */
}

.sidebar-sm .form-control,
.sidebar-sm .btn {
    font-size: 0.85rem; /* Search Input & Button */
    padding: 0.35rem 0.65rem;
}

.sidebar-sm .list-group-item {
    font-size: 0.825rem; /* Category items */
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.sidebar-sm .badge {
    font-size: 0.725rem; /* Category counts */
}

.sidebar-sm p, 
.sidebar-sm h6 {
    font-size: 0.85rem !important; /* Recent post titles */
}

.sidebar-sm .text-muted {
    font-size: 0.75rem !important; /* Dates */
}

/* Card Typography Sizing */
.article-grid-sm .card-title {
    font-size: 0.95rem !important; /* Title font size */
    line-height: 1.35;
}

.article-grid-sm .card-text {
    font-size: 0.8125rem !important; /* Excerpt font size (~13px) */
    line-height: 1.5;
}

.article-grid-sm .badge {
    font-size: 0.725rem !important; /* Category pill size */
}

.article-grid-sm .text-muted {
    font-size: 0.75rem !important; /* Date stamp size */
}

.article-grid-sm .btn-sm {
    font-size: 0.8rem !important; /* Button text size */
    padding: 0.25rem 0.65rem;
}

/* Custom Dark Navy Header */
.bg-hs-navy {
    background-color: #0d1b2a !important; /* Deep Dark Navy */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Custom Red Accent Color */
.text-hs-red {
    color: #e63946 !important;
}

/* Subtle link hover styling on dark background */
.hover-text-white:hover {
    color: #ffffff !important;
}

/* Dark Theme Dropdown Customization */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: #1b263b;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.industry-card {
    min-width: 120px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.industry-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08) !important;
}