/* ============================================================
   Houston Robotics — Site Styles
   Dark industrial/tech aesthetic with Houston orange accent
   ============================================================ */

:root {
    --hr-dark:      #0d1117;
    --hr-dark2:     #161b22;
    --hr-dark3:     #21262d;
    --hr-border:    #30363d;
    --hr-orange:    #e8671a;
    --hr-orange-lt: #f07c35;
    --hr-blue:      #1f6feb;
    --hr-text:      #e6edf3;
    --hr-muted:     #8b949e;
    --hr-white:     #ffffff;
}

/* Base */
html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: var(--hr-dark);
    color: var(--hr-text);
    margin: 0;
}

a { color: var(--hr-orange); text-decoration: none; }
a:hover { color: var(--hr-orange-lt); }

/* ── Navbar ── */
.hr-navbar {
    background-color: rgba(13, 17, 23, 0.97);
    border-bottom: 1px solid var(--hr-border);
    padding: 0.75rem 0;
    backdrop-filter: blur(8px);
}

.hr-logo-icon {
    font-size: 1.4rem;
    color: var(--hr-orange);
}

.hr-logo-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    color: var(--hr-white);
    letter-spacing: -0.01em;
}

.hr-navbar .nav-link {
    color: var(--hr-muted);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.hr-navbar .nav-link:hover,
.hr-navbar .nav-link.active {
    color: var(--hr-white);
    background-color: var(--hr-dark3);
}

.btn-hr-accent {
    background-color: var(--hr-orange);
    color: white;
    border: none;
    font-weight: 600;
    border-radius: 6px;
    padding: 0.4rem 0.9rem;
    transition: background 0.15s;
}
.btn-hr-accent:hover { background-color: var(--hr-orange-lt); color: white; }

/* ── Hero ── */
.hr-hero {
    background: linear-gradient(135deg, #0d1117 0%, #0d1f3c 60%, #1a0a00 100%);
    border-bottom: 1px solid var(--hr-border);
    padding: 5rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.hr-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 70% 50%, rgba(232,103,26,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.hr-hero-eyebrow {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hr-orange);
}

.hr-hero h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--hr-white);
}

.hr-hero .lead {
    color: var(--hr-muted);
    font-size: 1.1rem;
    max-width: 540px;
}

/* ── Section titles ── */
.hr-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hr-white);
    margin-bottom: 0.25rem;
}

.hr-divider {
    width: 40px;
    height: 3px;
    background: var(--hr-orange);
    border: none;
    margin: 0.5rem 0 1.5rem;
    border-radius: 2px;
}

/* ── Cards ── */
.hr-card {
    background-color: var(--hr-dark2);
    border: 1px solid var(--hr-border);
    border-radius: 10px;
    transition: border-color 0.2s, transform 0.2s;
    height: 100%;
}

.hr-card:hover {
    border-color: var(--hr-orange);
    transform: translateY(-2px);
}

.hr-card .card-body { padding: 1.4rem; }

/* ── Category badges ── */
.badge-energy      { background-color: #1a3a1a; color: #4ade80; }
.badge-medical     { background-color: #1a1a3a; color: #818cf8; }
.badge-industrial  { background-color: #3a2a0a; color: #fbbf24; }
.badge-manufacturing { background-color: #3a2a0a; color: #fbbf24; }
.badge-education   { background-color: #0a2a3a; color: #38bdf8; }
.badge-general     { background-color: #2a2a2a; color: #94a3b8; }

.hr-badge {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3em 0.65em;
    border-radius: 4px;
}

/* ── Article cards ── */
.article-card { cursor: pointer; }
.article-card .article-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: var(--hr-white);
    font-size: 1.05rem;
    line-height: 1.35;
    margin-bottom: 0.5rem;
}
.article-card:hover .article-title { color: var(--hr-orange); }
.article-card .article-summary { color: var(--hr-muted); font-size: 0.9rem; line-height: 1.55; }
.article-card .article-meta { font-size: 0.78rem; color: var(--hr-muted); }

/* ── Industry focus cards ── */
.focus-card {
    background: linear-gradient(135deg, var(--hr-dark2), var(--hr-dark3));
    border: 1px solid var(--hr-border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: border-color 0.2s, transform 0.2s;
}
.focus-card:hover { border-color: var(--hr-orange); transform: translateY(-3px); }
.focus-card .focus-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.focus-card h5 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: var(--hr-white);
    margin-bottom: 0.5rem;
}
.focus-card p { color: var(--hr-muted); font-size: 0.9rem; margin: 0; }

/* ── Newsletter section ── */
.hr-newsletter {
    background: linear-gradient(135deg, var(--hr-dark2), #0d1f3c);
    border: 1px solid var(--hr-border);
    border-radius: 12px;
    padding: 3rem 2rem;
}

/* ── Directory ── */
.company-card .company-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: var(--hr-white);
    font-size: 1.05rem;
}
.company-card:hover .company-name { color: var(--hr-orange); }
.company-card .company-desc { color: var(--hr-muted); font-size: 0.88rem; line-height: 1.55; }
.company-card .company-meta a { color: var(--hr-muted); font-size: 0.82rem; }
.company-card .company-meta a:hover { color: var(--hr-orange); }

/* Filter pills */
.filter-pill {
    background-color: var(--hr-dark3);
    border: 1px solid var(--hr-border);
    color: var(--hr-muted);
    border-radius: 20px;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    display: inline-block;
}
.filter-pill:hover, .filter-pill.active {
    background-color: var(--hr-orange);
    border-color: var(--hr-orange);
    color: white;
}

/* ── Coming soon pages ── */
.hr-coming-soon {
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.coming-soon-badge {
    display: inline-block;
    background: rgba(232,103,26,0.15);
    border: 1px solid rgba(232,103,26,0.4);
    color: var(--hr-orange);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.4em 0.9em;
    border-radius: 20px;
    margin-bottom: 1.5rem;
}

/* ── Article detail ── */
.article-body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #cdd9e5;
    max-width: 720px;
}
.article-body h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--hr-white);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--hr-border);
}
.article-body p { margin-bottom: 1.25rem; }
.article-body a { color: var(--hr-orange); }

/* ── Admin ── */
.admin-sidebar {
    background-color: var(--hr-dark2);
    border-right: 1px solid var(--hr-border);
    min-height: 100vh;
    padding: 1.5rem 1rem;
}
.admin-sidebar .nav-link {
    color: var(--hr-muted);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 2px;
}
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
    background-color: var(--hr-dark3);
    color: var(--hr-white);
}
.admin-sidebar .nav-link i { margin-right: 0.5rem; width: 16px; }

.admin-content { padding: 2rem; }

.hr-table { border-color: var(--hr-border); }
.hr-table th {
    background-color: var(--hr-dark3);
    color: var(--hr-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-color: var(--hr-border);
}
.hr-table td {
    background-color: var(--hr-dark2);
    color: var(--hr-text);
    border-color: var(--hr-border);
    vertical-align: middle;
    font-size: 0.9rem;
}
.hr-table tr:hover td { background-color: var(--hr-dark3); }

/* Form controls dark theme */
.form-control, .form-select {
    background-color: var(--hr-dark3);
    border-color: var(--hr-border);
    color: var(--hr-text);
}
.form-control:focus, .form-select:focus {
    background-color: var(--hr-dark3);
    border-color: var(--hr-orange);
    color: var(--hr-text);
    box-shadow: 0 0 0 3px rgba(232,103,26,0.25);
}
.form-control::placeholder { color: var(--hr-muted); }
.form-label { color: var(--hr-muted); font-size: 0.88rem; font-weight: 500; }

/* ── Footer ── */
.hr-footer {
    background-color: var(--hr-dark2);
    border-top: 1px solid var(--hr-border);
}
.footer-link { color: var(--hr-muted); font-size: 0.88rem; }
.footer-link:hover { color: var(--hr-orange); }

/* Stat card */
.stat-card {
    background-color: var(--hr-dark3);
    border: 1px solid var(--hr-border);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
}
.stat-card .stat-number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--hr-orange);
}
.stat-card .stat-label { color: var(--hr-muted); font-size: 0.85rem; }

/* Alert overrides */
.alert-success { background-color: #0d2818; border-color: #1a5c34; color: #4ade80; }
.alert-danger   { background-color: #2a0d0d; border-color: #5c1a1a; color: #f87171; }
.alert-info     { background-color: #0d1f3a; border-color: #1a3a6c; color: #60a5fa; }

/* Responsive */
@media (max-width: 768px) {
    .hr-hero { padding: 3rem 0 2.5rem; }
    .admin-sidebar { min-height: auto; }
}