/*
 * Handwriting Practice Worksheet — V4.0 (Premium 2026)
 * Precision-engineered for A4/Letter/Legal printing
 *
 * DEPENDENCIES:
 *   - worksheet-base.css (provides .sheet sizing, shadows, print base)
 *   - sheet-common.css   (provides .sheet-header, .field, .field-line)
 *
 * This file adds handwriting-specific rules:
 *   - Grid system (guide lines, text layers)
 *   - Font sizing per layout variant
 *   - Spacing modes, fade styles
 *   - Handwriting print overrides
 *
 * Class prefix: hw- (handwriting)
 */

/* =========================================
   1. GRID CONTAINER
   ========================================= */
.hw-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: space-between;
    overflow: hidden;
}

/* =========================================
   2. WRITING ROW
   ========================================= */
.hw-row {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 0;
    overflow: hidden;
}

/* ── Size variants ── */
.hw-size-large {
    height: 48mm;
}

.hw-size-medium {
    height: 32mm;
}

.hw-size-small {
    height: 24mm;
}

/* ── Spacing variants ── */
.hw-spacing-wide .hw-text-line {
    letter-spacing: 4mm;
}

/* =========================================
   3. GUIDE LINES
   ========================================= */
.hw-guides {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

.hw-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
}

/* Top line (ascender) — blue */
.hw-line-top {
    background-color: #3b82f6;
    top: 0;
}

/* Mid line (x-height) — gray dashed */
.hw-line-mid {
    border-top: 1px dashed #94a3b8;
    background: transparent;
    height: 0;
}

/* Base line (main writing line) — red */
.hw-line-base {
    background-color: #ef4444;
    height: 1.5px;
}

/* Bottom line (descender) — light gray */
.hw-line-bottom {
    background-color: #e2e8f0;
}

/* ── Guide Line Positions: LARGE (48mm) ── */
.hw-size-large .hw-line-top {
    top: 9mm;
}

.hw-size-large .hw-line-mid {
    top: 21mm;
}

.hw-size-large .hw-line-base {
    top: 33mm;
}

.hw-size-large .hw-line-bottom {
    top: 45mm;
}

/* ── Guide Line Positions: MEDIUM (32mm) ── */
.hw-size-medium .hw-line-top {
    top: 6mm;
}

.hw-size-medium .hw-line-mid {
    top: 14mm;
}

.hw-size-medium .hw-line-base {
    top: 22mm;
}

.hw-size-medium .hw-line-bottom {
    top: 30mm;
}

/* ── Guide Line Positions: SMALL (24mm) ── */
.hw-size-small .hw-line-top {
    top: 4.5mm;
}

.hw-size-small .hw-line-mid {
    top: 10.5mm;
}

.hw-size-small .hw-line-base {
    top: 16.5mm;
}

.hw-size-small .hw-line-bottom {
    top: 22.5mm;
}

/* =========================================
   4. TEXT CONTENT
   ========================================= */
.hw-text-layer {
    position: absolute;
    top: 0;
    left: 10mm;
    right: 10mm;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
}

.hw-text-line {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    font-family: 'Comic Neue', 'Comic Sans MS', cursive;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
}

/*
   Font sizing per layout size.
   Calculations for Comic Neue (approximate):
   - Cap Height ≈ 72% of Font Size
   - Ascent ≈ 78% of Font Size
   Target: Cap Height = Distance(Top Line, Base Line)
*/

/* LARGE: Top 9mm, Base 33mm → Cap Height 24mm → Font 33.5mm → Top offset 7mm */
.hw-size-large .hw-text-line {
    font-size: 33.5mm;
    top: 7mm;
}

/* MEDIUM: Top 6mm, Base 22mm → Cap Height 16mm → Font 22.2mm → Top offset 4.7mm */
.hw-size-medium .hw-text-line {
    font-size: 22.2mm;
    top: 4.7mm;
}

/* SMALL: Top 4.5mm, Base 16.5mm → Cap Height 12mm → Font 16.7mm → Top offset 3.5mm */
.hw-size-small .hw-text-line {
    font-size: 16.7mm;
    top: 3.5mm;
}

/* ── Text Items ── */
.hw-char,
.hw-word {
    position: relative;
}

/* Solid style — dark text */
.hw-style-solid {
    color: #0f172a;
}

/* Trace style — light fill with visible stroke */
.hw-style-trace {
    color: #e2e8f0;
    -webkit-text-stroke: 1.5px #94a3b8;
}

/* Empty style — invisible placeholder for spacing */
.hw-style-empty {
    opacity: 0;
}

/* =========================================
   5. PRINT STYLES
   Sheet sizing / UI hiding provided by worksheet-base.css
   ========================================= */
@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    .hw-grid {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        justify-content: space-between !important;
        height: 100% !important;
    }

    .hw-row {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        overflow: hidden !important;
    }

    /* Force guide line colors and widths */
    .hw-line-top {
        background-color: #3b82f6 !important;
        height: 0.4mm !important;
    }

    .hw-line-mid {
        border-top: none !important;
        background-color: #94a3b8 !important;
        height: 0.3mm !important;
    }

    .hw-line-base {
        background-color: #ef4444 !important;
        height: 0.6mm !important;
    }

    .hw-line-bottom {
        background-color: #cbd5e1 !important;
        height: 0.4mm !important;
    }

    /* Force line positions — LARGE */
    .hw-size-large .hw-line-top {
        top: 9mm !important;
    }

    .hw-size-large .hw-line-mid {
        top: 21mm !important;
    }

    .hw-size-large .hw-line-base {
        top: 33mm !important;
    }

    .hw-size-large .hw-line-bottom {
        top: 45mm !important;
    }

    /* Force line positions — MEDIUM */
    .hw-size-medium .hw-line-top {
        top: 6mm !important;
    }

    .hw-size-medium .hw-line-mid {
        top: 14mm !important;
    }

    .hw-size-medium .hw-line-base {
        top: 22mm !important;
    }

    .hw-size-medium .hw-line-bottom {
        top: 30mm !important;
    }

    /* Force line positions — SMALL */
    .hw-size-small .hw-line-top {
        top: 4.5mm !important;
    }

    .hw-size-small .hw-line-mid {
        top: 10.5mm !important;
    }

    .hw-size-small .hw-line-base {
        top: 16.5mm !important;
    }

    .hw-size-small .hw-line-bottom {
        top: 22.5mm !important;
    }

    /* Force text positioning */
    .hw-text-layer {
        overflow: hidden !important;
    }

    .hw-text-line {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        align-items: baseline !important;
        overflow: hidden !important;
    }

    .hw-size-large .hw-text-line {
        font-size: 33.5mm !important;
        top: 7mm !important;
    }

    .hw-size-medium .hw-text-line {
        font-size: 22.2mm !important;
        top: 4.7mm !important;
    }

    .hw-size-small .hw-text-line {
        font-size: 16.7mm !important;
        top: 3.5mm !important;
    }

    /* Force text styles */
    .hw-style-solid {
        color: #000 !important;
    }

    .hw-style-trace {
        color: #e2e8f0 !important;
        -webkit-text-stroke: 1px #94a3b8 !important;
    }

    /* Preserve wide spacing in print */
    .hw-spacing-wide .hw-text-line {
        letter-spacing: 4mm !important;
    }

    .sheet-header {
        border-bottom-color: #000 !important;
    }
}

/* =========================================
   6. RESPONSIVE — Match worksheet-base.css patterns
   ========================================= */
@media (max-width: 1024px) {
    .hw-text-layer {
        left: 4%;
        right: 4%;
    }

    .hw-text-line {
        left: 0;
        right: 0;
    }

    .hw-size-large .hw-text-line {
        font-size: clamp(8mm, 8vw, 33.5mm);
    }

    .hw-size-medium .hw-text-line {
        font-size: clamp(6mm, 6vw, 22.2mm);
    }

    .hw-size-small .hw-text-line {
        font-size: clamp(4mm, 4.5vw, 16.7mm);
    }
}

/* Tablet */
@media (max-width: 900px) and (min-width: 601px) {
    .hw-text-layer {
        left: 5%;
        right: 5%;
    }
}

/* Phone */
@media (max-width: 600px) {
    .hw-text-layer {
        left: 3%;
        right: 3%;
    }

    /* Scale row heights */
    .hw-size-large {
        height: clamp(30px, 12vw, 48mm);
    }

    .hw-size-medium {
        height: clamp(22px, 9vw, 32mm);
    }

    .hw-size-small {
        height: clamp(16px, 7vw, 24mm);
    }

    /* Scale line positions proportionally */
    .hw-size-large .hw-line-top {
        top: 18%;
    }

    .hw-size-large .hw-line-mid {
        top: 44%;
    }

    .hw-size-large .hw-line-base {
        top: 69%;
    }

    .hw-size-large .hw-line-bottom {
        top: 94%;
    }

    .hw-size-medium .hw-line-top {
        top: 19%;
    }

    .hw-size-medium .hw-line-mid {
        top: 44%;
    }

    .hw-size-medium .hw-line-base {
        top: 69%;
    }

    .hw-size-medium .hw-line-bottom {
        top: 94%;
    }

    .hw-size-small .hw-line-top {
        top: 19%;
    }

    .hw-size-small .hw-line-mid {
        top: 44%;
    }

    .hw-size-small .hw-line-base {
        top: 69%;
    }

    .hw-size-small .hw-line-bottom {
        top: 94%;
    }

    .hw-size-large .hw-text-line {
        top: 15%;
    }

    .hw-size-medium .hw-text-line {
        top: 15%;
    }

    .hw-size-small .hw-text-line {
        top: 15%;
    }
}