/*
==========================================================

Hexterika Cyberlab

base.css

Version:
3.0

Purpose:
Global reusable styles shared across the entire website.

Responsibilities:
- CSS Reset
- Typography
- Global Layout
- Reusable Components
- Navigation
- Footer
- Shared HTML Elements
- Accessibility Foundation
- Responsive Foundation

Design Philosophy:
This file contains ONLY reusable global styles.

Page-specific styling belongs in:
- index.css
- hc-services.css
- future page CSS files

Coding Standard:
- Components are documented.
- Sections are numbered.
- Layout and theme are separated.
- Every reusable component has a single home.

==========================================================
*/


/* ======================================================
   1. CSS Reset
====================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ======================================================
   2. Base Typography
====================================================== */

html {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #000000;
    color: #f2f2f2;
}

h1 {
    font-size: 3rem;
    font-weight: 700;
}

h2 {
    font-size: 2.25rem;
    font-weight: 600;
}

h3 {
    font-size: 1.75rem;
    font-weight: 600;
}

h4 {
    font-size: 1.5rem;
    font-weight: 600;
}

h5 {
    font-size: 1.25rem;
    font-weight: 600;
}

h6 {
    font-size: 1rem;
    font-weight: 600;
}

p {
    font-size: 1rem;
    font-weight: 400;

    margin-bottom: 1rem;
}


/* ======================================================
   3. Global Layout
====================================================== */

body {
    display: grid;

    grid-template-columns: repeat(12, 1fr);

    gap: 1rem;

    min-height: 100vh;
}


/*
==========================================================

Component:
hc-container

Purpose:
Canonical content container used throughout
Hexterika Cyberlab.

Responsibilities:
- Standard page width
- Horizontal alignment
- Shared content positioning

Used by:
- Header
- Main
- Footer
- Future page sections

Depends on:
- Body grid

==========================================================
*/

.hc-container {
    grid-column: 2 / 12;

    width: 100%;
}


/* ======================================================
   4. Header
====================================================== */

/*
==========================================================

Component:
Header

Purpose:
Top-level page header.

Responsibilities:
- Position the navigation component.
- Align with the global layout container.

Used by:
- index.html
- hc-services.html
- Future pages

==========================================================
*/

header {
    display: grid;

    grid-row: 1;

    align-items: center;

    padding-block: 1rem;

    background-color: #0b0f1a;
    color: #f2f2f2;

    border-bottom: 1px solid #26345d;
}


/* ======================================================
   5. Navigation
====================================================== */

/*
==========================================================

Component:
hc-nav

Purpose:
Primary navigation used across the entire website.

Responsibilities:
- Display the brand.
- Display primary navigation links.
- Keep navigation aligned with the global container.

Used by:
- index.html
- hc-services.html
- Future pages

Depends on:
- hc-container

==========================================================
*/

.hc-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.hc-nav-brand {
    justify-self: start;
    color: #8f7cff;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.hc-nav-brand:hover {
    color: #a78bfa;
    opacity: 1;
    text-decoration: none;
}

.hc-nav-list {
    display: flex;
    justify-self: center;
    align-items: center;
    gap: 2rem;
    list-style: none;
}

.hc-nav-item {
    margin: 0;
    padding: 0;
}

.hc-nav-link {
    color: inherit;

    font-size: 1rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        color 0.3s ease,
        opacity 0.3s ease;
}

.hc-nav-link:hover {
    color: #20f5b3;
    opacity: 1;

    text-decoration: none;
}


/* ======================================================
   6. Main Content
====================================================== */

/*
==========================================================

Component:
Main

Purpose:
Primary page content container.

Responsibilities:
- Hold page sections.
- Align with global layout.

==========================================================
*/

main {
    display: grid;

    grid-row: 2;

    text-align: center;
}

main ul {
    list-style: none;

    margin: 0;
    padding: 0;
}

main a {
    color: inherit;
    text-decoration: underline;
}


/* ======================================================
   7. Footer
====================================================== */

/*
==========================================================

Component:
Footer

Purpose:
Global footer shared across the website.

Responsibilities:
- Business communication
- Professional presence
- Social links
- Primary call-to-action
- Copyright

Used by:
- index.html
- hc-services.html
- Future pages

Depends on:
- hc-container

==========================================================
*/

footer {
    display: grid;

    grid-row: 3;

    background-color: #0b0f1a;
    color: #f2f2f2;

    border-top: 1px solid #26345d;

    margin-top: 5rem;
    padding: 4rem 0 2rem;
}


/*
==========================================================

Component:
hc-footer

Purpose:
Footer layout component.

==========================================================
*/

.hc-footer {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}

.hc-footer-brand {
    margin-bottom: 3rem;
    color: #8f7cff;
    text-align: center;
}

.hc-footer-grid {
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 3rem;

    margin-bottom: 3rem;
}

.hc-footer-section {
    display: flex;
    flex-direction: column;
}

.hc-footer-heading {
    margin-bottom: 1rem;

    font-size: 1.35rem;
}

.hc-footer-list {
    list-style: none;
}

.hc-footer-item + .hc-footer-item {
    margin-top: 0.5rem;
}

.hc-footer-link {
    color: inherit;

    opacity: 0.85;

    text-decoration: none;

    transition:
        color 0.3s ease,
        opacity 0.3s ease;
}

.hc-footer-link:hover {
    color: #20f5b3;

    opacity: 1;

    text-decoration: none;
}

.hc-footer-copyright {
    opacity: 0.7;

    text-align: center;
}

/* ======================================================
   8. Global Links
====================================================== */

/*
==========================================================

Shared hyperlink styling.

Component-specific links should override these styles
only when necessary.

==========================================================
*/

a {
    color: #4da3ff;

    text-decoration: none;

    transition:
        color 0.3s ease,
        opacity 0.3s ease;
}

a:hover {
    color: #20f5b3;
}

a:focus-visible {
    outline: 2px solid #20f5b3;
    outline-offset: 3px;
}


/* ======================================================
   9. Buttons
====================================================== */

/*
==========================================================

Shared button foundation.

Specialized buttons should build upon these defaults.

==========================================================
*/

button {
    font: inherit;

    cursor: pointer;

    border: none;

    padding: 0.5rem 1rem;
}


/* ======================================================
   10. Images
====================================================== */

/*
==========================================================

Shared image defaults.

Page-specific image sizing belongs in page CSS.

==========================================================
*/

img {
    display: block;

    max-width: 100%;
    height: auto;
}


/* ======================================================
   11. Forms
====================================================== */

input,
textarea,
select,
button {
    font: inherit;
}


/* ======================================================
   12. Utility Classes
====================================================== */

/*
==========================================================

Reusable utilities.

Only utilities that can be shared by multiple pages
belong here.

==========================================================
*/

.hc-hidden {
    display: none;
}

.hc-text-center {
    text-align: center;
}


/* ======================================================
   13. Accessibility Foundation
====================================================== */

/*
==========================================================

Accessibility helpers.

==========================================================
*/

:focus-visible {
    outline: 2px solid #20f5b3;
    outline-offset: 3px;
}

::selection {
    background-color: #20f5b3;
    color: #000000;
}


/* ======================================================
   14. Responsive Foundation
====================================================== */

/*
==========================================================

Responsive foundation.

Only global responsive rules belong here.

Component-specific responsive rules stay with the
component.

==========================================================
*/

@media (max-width: 768px) {
    .hc-nav {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 1rem;
    }

    .hc-nav-brand,
    .hc-nav-list {
        justify-self: center;
    }

    .hc-nav-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .hc-footer-grid {
        grid-template-columns: 1fr;
        padding-inline: 1rem;
    }
}