/* =========================================================
   H&W Equipment Services — Custom Styles
   ========================================================= */

:root {
    --hw-yellow:       #f5c400;
    --hw-yellow-dark:  #c9a000;
    --hw-yellow-light: #f7d340;
    --hw-dark:         #1a1a1a;
    --hw-radius:       .625rem;
    --hw-shadow:       0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.07);
    --hw-shadow-hover: 0 4px 12px rgba(0,0,0,.10), 0 8px 28px rgba(0,0,0,.09);
}

/* ---------------------------------------------------------
   Base / Typography
   --------------------------------------------------------- */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: .9375rem;
    color: #212529;
    -webkit-font-smoothing: antialiased;
}
main { flex: 1; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.015em; }

/* ---------------------------------------------------------
   Navbar
   --------------------------------------------------------- */
.navbar { border-bottom: 1px solid rgba(255,255,255,.07); }
.navbar-brand img { filter: brightness(0) invert(1); height: 40px; width: auto; }
.navbar-brand span { color: var(--hw-yellow); }

.navbar-nav .nav-link {
    padding: .45rem .7rem;
    border-radius: .4rem;
    transition: background .15s, color .15s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--hw-yellow) !important;
    background: rgba(255,255,255,.06);
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn {
    font-weight: 500;
    border-radius: .5rem;
    transition: background .2s, box-shadow .2s, transform .15s, color .15s;
}

.btn-hw {
    background: linear-gradient(135deg, var(--hw-yellow) 0%, var(--hw-yellow-dark) 100%);
    border: none;
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(245,196,0,.30);
}
.btn-hw:hover, .btn-hw:focus {
    background: linear-gradient(135deg, #ffd000 0%, var(--hw-yellow) 100%);
    color: #1a1a1a;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(245,196,0,.40);
}
.btn-hw:active { transform: translateY(0); box-shadow: none; }

.btn-outline-hw {
    border-color: var(--hw-yellow);
    color: #1a1a1a;
    font-weight: 600;
}
.btn-outline-hw:hover {
    background-color: var(--hw-yellow);
    border-color: var(--hw-yellow);
    color: #1a1a1a;
}

/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */
.card {
    border: 1px solid rgba(0,0,0,.07);
    border-radius: var(--hw-radius);
    box-shadow: var(--hw-shadow);
    transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--hw-shadow-hover); }

.card-header {
    border-radius: calc(var(--hw-radius) - 1px) calc(var(--hw-radius) - 1px) 0 0 !important;
}
.card-header.hw-header {
    background: linear-gradient(135deg, var(--hw-yellow) 0%, var(--hw-yellow-dark) 100%);
    color: #1a1a1a;
    font-weight: 600;
    font-size: .8125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: none;
}

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
.form-control, .form-select {
    border-color: #dee2e6;
    border-radius: .5rem;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--hw-yellow);
    box-shadow: 0 0 0 .2rem rgba(245,196,0,.20);
}
.form-label { font-weight: 600; font-size: .875rem; margin-bottom: .375rem; }

.form-section-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hw-yellow-dark);
    margin-bottom: .75rem;
}

/* ---------------------------------------------------------
   Tables
   --------------------------------------------------------- */
.table { font-size: .875rem; }
.table > thead > tr > th {
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    border-bottom-width: 1px;
}
.table-hover > tbody > tr:hover > * { background-color: rgba(245,196,0,.06); }

/* ---------------------------------------------------------
   Badges
   --------------------------------------------------------- */
.badge {
    font-size: .75em;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .35em .65em;
    border-radius: .375em;
}

/* ---------------------------------------------------------
   Alerts — left border accent
   --------------------------------------------------------- */
.alert {
    border-radius: var(--hw-radius);
    border-left-width: 4px;
}
.alert-info    { border-left-color: #0dcaf0; }
.alert-success { border-left-color: #198754; }
.alert-warning { border-left-color: var(--hw-yellow); }
.alert-danger  { border-left-color: #dc3545; }

/* ---------------------------------------------------------
   List groups
   --------------------------------------------------------- */
.list-group-item { border-color: rgba(0,0,0,.07); transition: background .15s; }
.list-group-item-action:hover { background-color: rgba(245,196,0,.06); }

/* ---------------------------------------------------------
   Hero section
   --------------------------------------------------------- */
.hero {
    background: linear-gradient(135deg, #111 0%, #1e1e1e 50%, #231f00 100%);
    color: #fff;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 72% 48%, rgba(245,196,0,.13) 0%, transparent 58%);
    pointer-events: none;
}
.hero h1 { font-size: 2.8rem; font-weight: 700; letter-spacing: -.02em; position: relative; }
.hero .accent { color: var(--hw-yellow); }
.hero p { font-size: 1.1rem; color: #bbb; position: relative; }

/* ---------------------------------------------------------
   Section headings
   --------------------------------------------------------- */
.section-title {
    font-weight: 700;
    position: relative;
    padding-bottom: .5rem;
    margin-bottom: 1.5rem;
}
.section-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 3rem; height: 3px;
    background: var(--hw-yellow);
    border-radius: 2px;
}

/* ---------------------------------------------------------
   Message thread
   --------------------------------------------------------- */
.message-bubble {
    border-radius: .75rem;
    padding: .65rem 1rem;
    max-width: 80%;
}
.message-mine   { background: var(--hw-yellow); color: #1a1a1a; margin-left: auto; }
.message-theirs { background: #f1f3f5; color: #212529; }
.message-meta   { font-size: .75rem; opacity: .65; margin-top: .2rem; }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
footer {
    background: var(--hw-dark);
    color: #aaa;
    padding: 2rem 0;
    margin-top: auto;
}
footer a { color: var(--hw-yellow); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ---------------------------------------------------------
   Page entrance animation (main content only, not navbar/footer)
   --------------------------------------------------------- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
main > .container { animation: fadeUp .25s ease both; }

/* ---------------------------------------------------------
   Gallery
   --------------------------------------------------------- */
.gallery-card { overflow: hidden; cursor: pointer; }
.gallery-card img { transition: transform .3s ease; }
.gallery-card:hover img { transform: scale(1.05); }

/* ---------------------------------------------------------
   Hero — animated particles
   --------------------------------------------------------- */
.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.particle {
    position: absolute;
    border-radius: 50%;
    background: var(--hw-yellow);
    opacity: .07;
    animation: particle-drift 12s infinite ease-in-out alternate;
}
.particle:nth-child(1) { width: 320px; height: 320px; top: -80px;  right: -60px;  animation-delay: 0s; }
.particle:nth-child(2) { width: 180px; height: 180px; bottom: -40px; right: 20%; animation-delay: 3s; }
.particle:nth-child(3) { width: 120px; height: 120px; top: 30%;   left: 5%;    animation-delay: 6s; }

@keyframes particle-drift {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(-24px) scale(1.06); }
}

/* ---------------------------------------------------------
   Hero — floating icon stack
   --------------------------------------------------------- */
.hero-icon-stack {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    opacity: .07;
    pointer-events: none;
}
.hero-icon {
    font-size: 4.5rem;
    color: var(--hw-yellow);
    animation: icon-float 6s ease-in-out infinite alternate;
}
.hero-icon-2 { animation-delay: 2s; }
.hero-icon-3 { animation-delay: 4s; }

@keyframes icon-float {
    from { transform: translateY(0); }
    to   { transform: translateY(-14px); }
}