/**
 * EDDM 6.25" x 9" Template Styles
 * 
 * Dimensions:
 *   - Final trim size: 6.25" x 9"
 *   - With bleed (0.125" each side): 6.5" x 9.25"
 *   - Safe zone (0.125" inset from trim): 6" x 8.75"
 *   - Mailing panel (back only): 4" x 6" (bottom-left)
 * 
 * The document is sized WITH bleed so the printer has trim area.
 * Use Chrome: Print → Margins: None → Background Graphics: On
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */

:root {
    /* Bleed amount on each side */
    --bleed: 0.125in;
    
    /* Final printed size (after trim) */
    --page-width: 6.25in;
    --page-height: 9in;
    
    /* Document size (with bleed) */
    --doc-width: 6.5in;
    --doc-height: 9.25in;
    
    /* Safe zone inset from trim */
    --safe-inset: 0.125in;
    
    /* Safe zone dimensions */
    --safe-width: 6in;
    --safe-height: 8.75in;
    
    /* USPS Mailing panel (required on back) */
    --mailing-width: 4in;
    --mailing-height: 6in;
    
    /* ATW Brand Colors */
    --atw-blue: #2563eb;
    --atw-red: #dc2626;
    --atw-purple: #7c3aed;
    
    /* ATW Light Mode Colors */
    --atw-bg-primary: #f8fafc;
    --atw-bg-secondary: #f1f5f9;
    --atw-bg-card: #ffffff;
    --atw-text-primary: #0f172a;
    --atw-text-secondary: #475569;
    --atw-text-muted: #64748b;
    --atw-border: #e2e8f0;
    
    /* Semantic aliases */
    --brand-primary: #2563eb;
    --brand-secondary: #dc2626;
    --brand-accent: #7c3aed;
}

/* ============================================
   Page Size Declaration
   ============================================ */

@page {
    size: 6.5in 9.25in;
    margin: 0;
}

/* ============================================
   Print Page Container
   ============================================ */

.print-page {
    width: var(--doc-width);
    height: var(--doc-height);
    position: relative;
    overflow: hidden;
    margin: 0 auto; /* Center on screen for preview */
    background: white;
}

/* Screen preview styling */
@media screen {
    body {
        background: #e0e0e0;
        padding: 20px;
    }
    
    .print-page {
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }
}

/* ============================================
   Content Zones
   ============================================ */

/* Bleed area - full document, content here gets trimmed */
.bleed-area {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--doc-width);
    height: var(--doc-height);
}

/* Trim area - final piece size */
.trim-area {
    position: absolute;
    top: var(--bleed);
    left: var(--bleed);
    width: var(--page-width);
    height: var(--page-height);
}

/* Safe zone - keep important content inside */
.safe-zone {
    position: absolute;
    top: calc(var(--bleed) + var(--safe-inset));
    left: calc(var(--bleed) + var(--safe-inset));
    width: var(--safe-width);
    height: var(--safe-height);
}

/* ============================================
   Mailing Panel (Back Only)
   ============================================ */

/* 
 * USPS EDDM Mailing Panel Requirements:
 * - Size: 4" wide x 6" tall (minimum)
 * - Position: Bottom portion of mail piece
 * - Must contain: Indicia, address block area, barcodes
 * - Keep this area WHITE and CLEAR of design elements
 */

.mailing-panel {
    position: absolute;
    bottom: var(--bleed);
    left: var(--bleed);
    width: var(--mailing-width);
    height: var(--mailing-height);
    background: white;
    z-index: 100;
}

/* Content area on back - excludes mailing panel */
.safe-zone.back-content {
    /* Clip content to not overlap mailing panel */
    /* The mailing panel is bottom-left, so we adjust the safe zone */
}

/* ============================================
   Debug Overlay Positioning
   ============================================ */

.debug-overlay.bleed-guide {
    top: 0;
    left: 0;
    width: var(--doc-width);
    height: var(--doc-height);
}

.debug-overlay.trim-guide {
    top: var(--bleed);
    left: var(--bleed);
    width: var(--page-width);
    height: var(--page-height);
}

.debug-overlay.safe-guide {
    top: calc(var(--bleed) + var(--safe-inset));
    left: calc(var(--bleed) + var(--safe-inset));
    width: var(--safe-width);
    height: var(--safe-height);
}

.debug-overlay.mailing-guide {
    bottom: var(--bleed);
    left: var(--bleed);
    width: var(--mailing-width);
    height: var(--mailing-height);
}

/* ============================================
   Template Content Classes
   ============================================ */

/* Hero section - full bleed background */
.hero-bleed {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5in;
    background-size: cover;
    background-position: center;
}

/* Headline styling */
.headline {
    font-size: 36pt;
    font-weight: bold;
    line-height: 1.1;
    color: var(--brand-primary);
}

.subheadline {
    font-size: 18pt;
    font-weight: 300;
    color: #333;
}

/* Offer badge */
.offer-badge {
    display: inline-block;
    background: var(--brand-secondary);
    color: white;
    padding: 8pt 16pt;
    font-size: 14pt;
    font-weight: bold;
    text-transform: uppercase;
}

/* Call to action */
.cta-block {
    background: var(--brand-primary);
    color: white;
    padding: 12pt 20pt;
    text-align: center;
}

.cta-phone {
    font-size: 28pt;
    font-weight: bold;
    letter-spacing: 1pt;
}

.cta-website {
    font-size: 14pt;
    margin-top: 4pt;
}

/* QR Code area */
.qr-code {
    width: 1in;
    height: 1in;
    background: white;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-code img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Logo */
.logo {
    max-width: 2in;
    max-height: 0.75in;
    object-fit: contain;
}

/* ============================================
   Layout Helpers
   ============================================ */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-sm { gap: 8pt; }
.gap-md { gap: 16pt; }
.gap-lg { gap: 24pt; }

/* Absolute positioning helpers */
.abs-top { position: absolute; top: 0; }
.abs-bottom { position: absolute; bottom: 0; }
.abs-left { position: absolute; left: 0; }
.abs-right { position: absolute; right: 0; }

/* Spacing */
.mt-sm { margin-top: 8pt; }
.mt-md { margin-top: 16pt; }
.mt-lg { margin-top: 24pt; }
.mb-sm { margin-bottom: 8pt; }
.mb-md { margin-bottom: 16pt; }
.mb-lg { margin-bottom: 24pt; }
.p-sm { padding: 8pt; }
.p-md { padding: 16pt; }
.p-lg { padding: 24pt; }