/* layout.css - containers, header, footer, grid */

/* CONTAINER & LAYOUT */

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-mid) 50%, var(--color-gradient-end) 100%);
    color: var(--color-white);
    padding: 0;
    text-align: center;
    box-shadow: var(--box-shadow-lg);
    position: relative;
    overflow: hidden;
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556 15.858 12.14 28 0zm0 3.658l10.457 10.457-1.414 1.414L32 6.487l-9.043 9.042-1.414-1.414L32 3.658z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.3;
}

.header-top {
    background: rgba(0, 0, 0, 0.1);
    padding: var(--spacing-md) 0;
    position: relative;
    z-index: 2;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: var(--spacing-md) var(--spacing-md);
}

.logo h1 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.5px;
}

.subtitle {
    font-size: var(--font-size-xl);
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.tagline {
    font-size: var(--font-size-base);
    opacity: 0.9;
    font-weight: 300;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.header h1 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.header p {
    font-size: var(--font-size-lg);
    opacity: 0.95;
    font-weight: 300;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.main-content {
    flex: 1;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-md) var(--spacing-xl) var(--spacing-md);
    display: flex;
    justify-content: center;
}

.main-content-wide {
    max-width: none;
    padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
}

.footer {
    background: linear-gradient(135deg, var(--color-dark) 0%, #111827 100%);
    color: var(--color-white);
    padding: var(--spacing-md);
    text-align: center;
    font-size: var(--font-size-sm);
}