/**
 * Print Recipe Stylesheet (Layer 3)
 *
 * Minimal, print-friendly styles for the recipe print template.
 * Consumes CSS variables from global.css (Layer 2) and brand override (Layer 3).
 * Does NOT define its own color or font values.
 */

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base styles */
body {
    font-family: var(--font-family-base);
    font-size: 12pt;
    line-height: 1.6;
    color: var(--color-neutral-900);
    background: var(--color-white);
    padding: 0.5in;
    max-width: 8.5in;
    margin: 0 auto;
}

/* Header */
.print-header {
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 12pt;
    margin-bottom: 16pt;
}

.print-header h1 {
    font-size: 24pt;
    font-weight: 700;
    margin-bottom: 8pt;
    color: var(--color-neutral-900);
}

.print-source {
    font-size: 10pt;
    color: var(--color-neutral-500);
}

/* QR Code section (top) */
.print-qr-section {
    display: flex;
    align-items: center;
    gap: 12pt;
    padding: 10pt 0;
    margin-bottom: 12pt;
    border-bottom: 1px solid var(--color-border);
}

.print-qr-code {
    flex-shrink: 0;
}

.print-qr-code img {
    width: 50pt;
    height: 50pt;
}

.qr-fallback {
    display: none;
    width: 50pt;
    height: 50pt;
    border: 2pt dashed var(--color-neutral-200);
    align-items: center;
    justify-content: center;
    font-size: 14pt;
    color: var(--color-neutral-400);
    font-weight: bold;
}

.print-qr-info {
    flex: 1;
}

.qr-label {
    display: block;
    font-size: 8pt;
    color: var(--color-neutral-400);
    margin-bottom: 2pt;
}

.print-qr-info a {
    font-size: 9pt;
    color: #000000;
    word-break: break-all;
    text-decoration: none;
}

/* Meta info */
.print-meta {
    display: flex;
    gap: 24pt;
    padding: 12pt 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 16pt;
    font-size: 11pt;
}

.print-meta span {
    white-space: nowrap;
}

/* Section titles */
h2 {
    font-size: 14pt;
    font-weight: 700;
    margin: 20pt 0 10pt;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
}

/* Ingredient group titles */
h3 {
    font-size: 11pt;
    font-weight: 600;
    margin: 14pt 0 6pt;
    color: var(--color-neutral-700);
}

/* Ingredients list - two columns */
.print-ingredients ul {
    list-style: none;
    padding-left: 0;
    columns: 2;
    column-gap: 24pt;
}

.print-ingredients li {
    padding: 3pt 0 3pt 20pt;
    position: relative;
    font-size: 10pt;
    border-bottom: 1px dotted var(--color-neutral-200);
    break-inside: avoid;
}

/* Checkbox squares */
.print-ingredients li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5pt;
    width: 10pt;
    height: 10pt;
    border: 1.5pt solid var(--color-neutral-500);
}

/* Steps */
.print-steps ol {
    padding-left: 20pt;
    margin: 0;
}

.print-steps li {
    padding: 8pt 0;
    font-size: 11pt;
    page-break-inside: avoid;
}

/* Footer */
.print-footer {
    margin-top: 24pt;
    padding-top: 12pt;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6pt;
    padding: 12pt 32pt;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 12pt;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.3pt;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2pt 6pt color-mix(in srgb, var(--color-neutral-900) 25%, transparent);
}

.print-btn:hover {
    background: var(--color-neutral-900);
    box-shadow: 0 3pt 10pt color-mix(in srgb, var(--color-neutral-900) 35%, transparent);
}

/* Print-specific styles */
@media print {
    body {
        padding: 0;
    }

    @page {
        margin: 0.75in;
        size: A4;
    }

    .print-btn,
    .no-print {
        display: none !important;
    }

    .print-ingredients,
    .print-steps li {
        page-break-inside: avoid;
    }
}

/* Screen preview shadow */
@media screen {
    body {
        box-shadow: 0 0 20px var(--color-overlay-black-10);
    }
}