/* ==========================================================================
   assets/css/style.css
   --------------------------------------------------------------------------
   SITE STYLESHEET
   --------------------------------------------------------------------------
   Bootstrap handles most layout. This file only adds the brand look and a
   few custom touches. All rules are commented so they are easy to maintain.

   COLOR PALETTE (change these variables to re-theme the whole site):
     --brand        : main accent color
     --brand-dark   : darker accent for hover states
     --ink          : main dark text / background color
   ========================================================================== */

:root {
    /* Brand colors - edit these to match your visual identity. */
    --brand: #ff5a1f;
    /* aggressive orange-red accent */
    --brand-dark: #d64500;
    --ink: #141821;
    /* near-black used in hero + navbar */
    --ink-soft: #1d2433;

    /* Spacing helper for fixed navbar (content must start below it). */
    --nav-offset: 76px;
}

/* ---------- Base ---------- */

html {
    scroll-behavior: smooth;
    /* Make the root element dark too. Browsers default <html> to white, and
       that white can peek through around the page edges (e.g. body margin,
       overscroll). Painting it dark guarantees no white strip ever appears. */
    background-color: var(--ink);
}

body {
    /* Remove the browser's default 8px margin. This margin sits OUTSIDE the
       body's background box, which is a classic cause of a white strip at the
       very top/edges of the page. */
    margin: 0;

    /* IMPORTANT: no top padding here. The fixed navbar is handled by giving
       the hero extra top padding instead, so the hero's dark background runs
       all the way up behind the navbar. This makes a white gap impossible. */

    /* Dark base background so nothing white can ever peek through. */
    background-color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #23272f;
}

/* Content sections on light backgrounds need an explicit white fill now
   that the body base color is dark. */
.section {
    background-color: #fff;
}

/* ---------- Buttons ---------- */

/* Primary brand button used across the site. */
.btn-brand {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 600;
}

.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

/* Outline brand button (on dark backgrounds). */
.btn-brand-outline {
    border: 2px solid #fff;
    color: #fff;
    font-weight: 600;
}

.btn-brand-outline:hover {
    background-color: #fff;
    color: var(--ink);
}

/* ---------- Navbar ---------- */

.navbar {
    background-color: var(--ink) !important;
}

.navbar .nav-link {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #fff !important;
}

/* Small underline on the active nav link. */
.navbar .nav-link.active {
    border-bottom: 2px solid var(--brand);
}

/* ---------- Hero (homepage top banner) ---------- */

.hero {
    background-color: var(--ink);
    color: #fff;
    /* Decorative diagonal gradient for an "aggressive" feel. */
    background-image:
        radial-gradient(circle at 80% 20%, rgba(255, 90, 31, 0.25), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(255, 90, 31, 0.12), transparent 40%);
    /* Top padding = navbar height (--nav-offset) + normal breathing room.
       The dark background fills all the way to the top of the page behind
       the fixed navbar, so there is never a gap. */
    padding: calc(var(--nav-offset) + 6rem) 0 6rem;
}

.hero h1 {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.hero .lead {
    color: rgba(255, 255, 255, 0.75);
    max-width: 34rem;
}

/* Inner pages use "hero py-5". Bootstrap's py-5 uses !important, which would
   strip our top padding and let the heading slide under the fixed navbar.
   Force the correct top padding (navbar offset + 3rem breathing room) here. */
.hero.py-5 {
    padding-top: calc(var(--nav-offset) + 3rem) !important;
    padding-bottom: 3rem !important;
}

/* Highlight a word inside the hero heading with the brand color. */
.text-brand {
    color: var(--brand) !important;
}

/* ---------- Section helpers ---------- */

/* Base section spacing. Background is set above. */
.section {
    padding: 5rem 0;
}

.section-title {
    font-weight: 800;
    letter-spacing: -0.01em;
}

.section-eyebrow {
    /* Small uppercase label above a section title. */
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--brand);
}

/* ---------- Service cards ---------- */

.service-card {
    height: 100%;
    border: 1px solid #e7e9ee;
    border-radius: 0.9rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 1rem 2.5rem rgba(20, 24, 33, 0.10);
    border-color: var(--brand);
}

.service-icon {
    /* Circular icon badge at the top of each card. */
    width: 3.25rem;
    height: 3.25rem;
    display: inline-grid;
    place-items: center;
    border-radius: 0.75rem;
    background: rgba(255, 90, 31, 0.12);
    color: var(--brand);
    font-size: 1.5rem;
}

/* ---------- Feature list (checkmarks) ---------- */

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

.feature-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.6rem;
}

.feature-list li::before {
    /* Check icon drawn with a Bootstrap Icon font glyph. */
    content: "\F26E";
    /* bi-check2 */
    font-family: "bootstrap-icons";
    color: var(--brand);
    position: absolute;
    left: 0;
    font-weight: 700;
}

/* ---------- Highlight / stats band ---------- */

.band-dark {
    background-color: var(--ink-soft);
    color: #fff;
}

/* ---------- Footer links ---------- */

.footer-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.footer-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* ---------- Contact form ---------- */

.contact-card {
    border: 1px solid #e7e9ee;
    border-radius: 0.9rem;
}

/* ---------- Back-to-top button (enabled by main.js) ---------- */

#backToTop {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1030;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: none;
    /* shown via JS on scroll */
    place-items: center;
    border: none;
    background-color: var(--brand);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 0.5rem 1.5rem rgba(20, 24, 33, 0.25);
}

#backToTop:hover {
    background-color: var(--brand-dark);
}

/* Decorative big icon panel used on the services page. */
.services-icon-panel {
    min-height: 260px;
}

.services-icon-panel .bi {
    font-size: 7rem;
    color: var(--brand);
}

/* When jumping to an anchored section (e.g. services.php#game-design), leave
   room so the fixed navbar does not cover the heading. */
[id] {
    scroll-margin-top: calc(var(--nav-offset) + 1rem);
}

/* ==========================================================================
   RESPONSIVE TUNING
   --------------------------------------------------------------------------
   Bootstrap already handles the grid (columns stack on small screens).
   These rules only adjust spacing and type sizes so the site feels right on
   phones (<=576px), tablets (~768px) and desktops (>=992px). The base sizes
   above assume a desktop; the media queries below override them for smaller
   screens.
   ========================================================================== */

/* ---------- Hero heading scale ---------- */

/* Display headings are large by default; scale them down on phones so long
   headlines never overflow or look cramped. */
.hero h1.display-3 {
    font-size: 2rem;
    line-height: 1.15;
}

.hero h1.display-5 {
    font-size: 1.75rem;
    line-height: 1.2;
}

/* Tablet: bigger headings. */
@media (min-width: 768px) {
    .hero h1.display-3 {
        font-size: 3rem;
    }

    .hero h1.display-5 {
        font-size: 2.5rem;
    }
}

/* Desktop: full display size. */
@media (min-width: 992px) {
    .hero h1.display-3 {
        font-size: 4rem;
        line-height: 1.05;
    }

    .hero h1.display-5 {
        font-size: 3rem;
    }
}

/* ---------- Spacing on phones ---------- */

@media (max-width: 575.98px) {

    /* The phone navbar is a little shorter; update the offset so the hero
       content clears it. */
    :root {
        --nav-offset: 64px;
    }

    /* Trim vertical padding so mobile users do less empty scrolling.
       The top padding STILL includes --nav-offset so content clears the
       fixed navbar and the dark background fills behind it. */
    .hero {
        padding: calc(var(--nav-offset) + 2.5rem) 0 2.5rem;
    }

    /* Inner-page heros: keep navbar clearance on top, trim bottom spacing. */
    .hero.py-5 {
        padding-top: calc(var(--nav-offset) + 2rem) !important;
        padding-bottom: 2rem !important;
    }

    .section {
        padding: 3rem 0;
    }

    /* Slightly tighter padding inside dark-band cards. */
    .band-dark .p-4 {
        padding: 1.25rem !important;
    }

    /* Center the footer columns on narrow phones for a cleaner look. */
    footer .col-lg-4,
    footer .col-lg-3,
    footer .col-lg-2,
    footer .col-6 {
        text-align: center;
    }

    /* Hero buttons become full width for easier tapping. */
    .hero .btn-lg {
        width: 100%;
    }

    /* Long email addresses / URLs must wrap instead of overflowing the
       screen on narrow phones. */
    .contact-details a,
    .footer-link {
        word-break: break-word;
    }
}

/* ---------- Services page decorative panel ---------- */

/* On stacked (tablet/mobile) layouts the big icon panel is not needed for
   visual balance, so shrink it to save vertical space. */
@media (max-width: 991.98px) {
    .services-icon-panel {
        min-height: 160px !important;
    }

    .services-icon-panel .bi {
        font-size: 4rem !important;
    }
}