/**
 * File: /shared/css/global.css
 * Purpose: Shared document defaults, browser normalization, and generic utilities.
 *
 * This file contains global styles that apply broadly across the Signs Platform.
 * Component-specific styling belongs in dedicated shared CSS modules.
 * Brand-specific values belong in the active brand's tokens.css 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 styling
 */


/* ==========================================
   BOX SIZING
   ========================================== */

/*
 * Use predictable sizing across the platform.
 *
 * Width and height include padding and borders rather than allowing
 * them to increase the rendered dimensions of an element.
 */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }
 
 
 /* ==========================================
    DOCUMENT
    ========================================== */
 
 html {
     min-height: 100%;
     overflow-y: scroll;
 }
 
 body {
     min-height: 100%;
     margin: 0;
 
     display: flex;
     flex-direction: column;
 
     background-image: var(--brand-page-background, none);
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     background-attachment: fixed;
 }
 
 
 /* ==========================================
    GENERIC VISIBILITY UTILITIES
    ========================================== */
 
 .hidden {
     display: none !important;
 }
 
 
 /* ==========================================
    GENERIC TEXT UTILITIES
    ========================================== */
 
 .indent-text {
     padding-left: 20px;
 
     color: var(--color-text-muted);
     font-size: 0.95rem;
 }
 
 
 /* ==========================================
    GENERIC POSITIONING UTILITIES
    ========================================== */
 
 .position-relative {
     position: relative;
 }
 
 
 /* ==========================================
    RESPONSIVE VISIBILITY UTILITIES
    ========================================== */
 
 /*
  * Hidden on desktop by default.
  *
  * On mobile this element becomes a horizontal divider.
  * This preserves the behavior of the existing implementation.
  */
 .hide-on-desktop {
     display: none;
 }
 
 @media (max-width: 768px) {
     .hide-on-desktop {
         display: block;
 
         width: 100%;
         height: 1px;
         margin: 20px 0;
 
         background-color: var(--color-border-dark);
     }
 
     .hide-on-mobile {
         display: none !important;
     }
 }