/**
 * File: /shared/css/layout.css
 * Purpose: Shared page-level layout and sticky footer structure.
 *
 * Defines structural layout behavior used across the Signs Platform.
 * Brand-specific colors and imagery must not be defined in this file.
 *
 * Dependencies:
 * - /shared/css/tokens.css
 * - /brand/{brand}/css/tokens.css
 *
 * This file must not contain:
 * - Brand-specific colors or imagery
 * - Component-specific presentation
 * - Page-specific business logic styling
 */


/* ==========================================
   PRIMARY PAGE CONTENT
   ========================================== */

/*
 * The body is configured as a vertical flex container
 * in /shared/css/global.css.
 *
 * Main content expands to fill the available vertical
 * space so the footer remains at the bottom of short pages.
 */
 main,
 #home_section {
     flex: 1 0 auto;
 
     display: flex;
     flex-direction: column;
 }
 
 
 /* ==========================================
    FOOTER
    ========================================== */
 
 /*
  * The footer participates in normal document flow.
  *
  * Do not use position: fixed here. A fixed footer can overlap
  * application content and makes footer behavior dependent on
  * viewport dimensions.
  */
 footer,
 #footer {
     flex-shrink: 0;
     margin-top: auto;
 }
 
 
 /* ==========================================
    BRAND-AWARE FOOTER PRESENTATION
    ========================================== */
 
 /*
  * Footer layout is owned by the shared platform.
  * The active brand supplies only the visual value.
  */
 #footer {
     width: 100%;
     padding: 8px;
 
     display: flex;
     justify-content: space-evenly;
     align-items: center;
 
     background-color: var(
         --brand-footer,
         var(--brand-secondary, var(--color-surface))
     );
 }