/*
|--------------------------------------------------------------------------
| Ligtas Sunog – Global Styles
| File: public/css/app.css
| Bootstrap handles most styling. This file contains custom overrides.
|--------------------------------------------------------------------------
*/

/* ─────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────── */

:root {
    --fire: #dc3535;
    --fire-dark: #b91c1c;
    --fire-glow: rgba(220, 53, 53, 0.18);

    --dark: #0d1117;
    --dark-2: #161b22;
    --gray-soft: #8b949e;

    --nav-height: 68px;
}

/* ─────────────────────────────────────────
   BASE
───────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;

    /* prevents anchor links from hiding under fixed navbar */
    scroll-padding-top: calc(var(--nav-height) + 1rem);
}

body {
    font-size: 1rem;
    color: #1a1a1a;
    background: #fff;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "DM Sans", sans-serif;
}

/* ─────────────────────────────────────────
   NAVBAR
───────────────────────────────────────── */

.nav-link.active {
    color: var(--bs-primary) !important;
    font-weight: 600;
}

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */

/* extra spacing for hero section */

.py-lg-6 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

/* video enlargement effect */

.video-scale {
    transform: scale(1.2);
    transform-origin: center;
}

/* ─────────────────────────────────────────
   SECTIONS
───────────────────────────────────────── */

.section {
    padding: 5rem 0;
}

@media (max-width: 767px) {
    .section {
        padding: 3rem 0;
    }

    /* smaller scale on mobile so it doesn't overflow */

    .video-scale {
        transform: scale(0.8);
    }
}

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */

.btn-fire {
    background: var(--fire);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.2s;
}

.btn-fire:hover {
    background: var(--fire-dark);
    color: #fff;
    box-shadow: 0 6px 20px var(--fire-glow);
    transform: translateY(-1px);
}

.btn-fire:active {
    transform: translateY(0);
}

/* ─────────────────────────────────────────
   LINKS
───────────────────────────────────────── */

a {
    color: var(--fire);
}

a:hover {
    color: var(--fire-dark);
}

/* ─────────────────────────────────────────
   CARDS
───────────────────────────────────────── */

.card {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1) !important;
}

/* ─────────────────────────────────────────
   FEATURE ICON
───────────────────────────────────────── */

.feature-icon {
    width: 3.5rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ─────────────────────────────────────────
   IMAGE HOVER EFFECT
───────────────────────────────────────── */

.image-container {
    cursor: pointer;
    overflow: hidden;
    position: relative; /* required for overlay positioning */
}

.image-container img {
    display: block; /* prevents small spacing bugs */
    width: 100%;
    transition: transform 0.3s ease;
}

.image-container:hover img {
    transform: scale(1.05);
}

.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: 0.3s ease;
    border-radius: 12px;
}

.image-container:hover .overlay {
    opacity: 1;
}