/***********************************************************************
 * File: layout.css
 * Module: Design System
 * Purpose:
 * Defines the structural layout of the AI Governance application.
 * This includes page containers, navigation, headers, footers,
 * content areas and responsive page widths.
 *
 * Dependencies:
 * - style.css
 *
 * Technical Notes:
 * Layout only.
 * No buttons, forms or reusable UI components should be defined here.
 *
 * Future Enhancements:
 * - Sidebar layouts
 * - Multi-column content layouts
 * - Print layouts
 *
 * Build:
 * AI Governance Build 2 MVP/V1
 *
 * Version:
 * 2.0.0
 ***********************************************************************/


/* ===========================================================
   APPLICATION CONTAINER
   =========================================================== */

.ag-container {

    width: 100%;
    max-width: var(--ag-max-width);

    margin: 0 auto;

    padding: 0 var(--ag-space-lg);

}


/* ===========================================================
   HEADER
   =========================================================== */

.ag-header {

    background: var(--ag-surface);

    border-bottom: 1px solid var(--ag-border);

}


/* ===========================================================
   PRIMARY NAVIGATION
   =========================================================== */

.ag-navigation {

    background: var(--ag-surface);

    border-bottom: 1px solid var(--ag-border);

}


.ag-nav-container {

    max-width: var(--ag-max-width);

    margin: 0 auto;

    padding: 0.9rem 2rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 2rem;

}


.ag-nav-brand {

    font-size: 1.15rem;

    font-weight: 600;

}


.ag-nav-brand a {

    color: var(--ag-primary);

}


.ag-nav-menu {

    display: flex;

    list-style: none;

    gap: 2rem;

    margin: 0;

    padding: 0;

}


.ag-nav-menu a {

    color: var(--ag-text);

    font-weight: 500;

}


.ag-nav-menu a:hover {

    color: var(--ag-primary);

}


.ag-nav-user {

    white-space: nowrap;

}


/* ===========================================================
   PAGE HEADER
   =========================================================== */

.ag-page-header {

    padding: 2rem 0 1rem 0;

}


.ag-page-title {

    margin-bottom: 0.5rem;

}


.ag-page-introduction {

    color: var(--ag-text-light);

    max-width: 850px;

    margin: 2rem auto;

    text-align: center;

}


/* ===========================================================
   MAIN CONTENT
   =========================================================== */

.ag-main {

    padding: 2rem 0 3rem 0;

    min-height: 60vh;

}


/* ===========================================================
   CONTENT SECTIONS
   =========================================================== */

.ag-section {

    margin-bottom: 3rem;

}


/* ===========================================================
   SIMPLE GRID
   =========================================================== */

.ag-grid {

    display: grid;

    gap: 2rem;

}


.ag-grid-2 {

    display: grid;

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

    gap: 2rem;

}


.ag-grid-3 {

    display: grid;

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

    gap: 2rem;

}


.ag-grid-4 {

    display: grid;

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

    gap: 2rem;

}


/* ===========================================================
   FOOTER
   =========================================================== */

.ag-footer {

    background: var(--ag-surface);

    border-top: 1px solid var(--ag-border);

    margin-top: 3rem;

}


.ag-footer-navigation {

    max-width: var(--ag-max-width);

    margin: 0 auto;

    padding: 2rem;

    display: grid;

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

    gap: 3rem;

}


.ag-footer-column h4 {

    margin-bottom: 1rem;

    color: var(--ag-primary);

}


.ag-footer-column ul {

    list-style: none;

    margin: 0;

    padding: 0;

}


.ag-footer-column li {

    margin-bottom: 0.6rem;

}


.ag-footer-bottom {

    border-top: 1px solid var(--ag-border);

    text-align: center;

    padding: 1rem;

    color: var(--ag-text-light);

    font-size: 0.8rem;

}


/* ===========================================================
   STANDARD CONTENT WIDTHS
   =========================================================== */

.ag-content-narrow {

    max-width: 720px;

}


.ag-content-medium {

    max-width: 900px;

}


.ag-content-wide {

    max-width: 1200px;

}


/* ===========================================================
   MOBILE NAVIGATION
   =========================================================== */

@media (max-width: 800px) {

    .ag-nav-container {

        flex-wrap: wrap;

        gap: 1rem;

        padding: 1rem 1.25rem;

    }


    .ag-nav-brand {

        flex: 1 1 100%;

    }


    .ag-nav-menu {

        flex: 1 1 auto;

        flex-wrap: wrap;

        gap: 0.75rem 1.25rem;

    }


    .ag-nav-user {

        flex: 0 0 auto;

    }

}