/**
 * GCC Typography Studio — Apply CSS  v1.6.0
 * --------------------------------------------------------------------------
 * Wires --gcct-* custom properties to card selectors.
 *
 * NGUYÊN TẮC:
 *  • font-family fallback dùng giá trị TRỰC TIẾP (không qua --wc-font-* var).
 *    Lý do: --wc-font-* defined trong [data-wedding-template] scope làm ô nhiễm
 *    fallback chain — khi --gcct-*-font chưa set, fallback resolve sang
 *    --wc-font-* thay vì nhường cho wedding-tokens.css baseline.
 *    Empirical: commenting out --wc-font-* in tokens → typography applies correctly.
 *  • wedding-tokens.css đặt font-family TRỰC TIẾP trên element rules (baseline
 *    khi module bị tắt). File này OVERRIDE baseline đó qua --gcct-*-font.
 *  • Load SAU wedding-tokens.css → thắng cascade tại cùng specificity (0,3,0).
 *  • Không dùng !important → không phá cascade của template CSS.
 *  • Hỗ trợ cả wedding card (.gcc-preview-wedding-card) và general card (.gcc-preview-card).
 * --------------------------------------------------------------------------
 */

/* ============================================================================
   TÊN ĐÔI UYÊN ƯƠNG (Wedding)
   Selectors: .couple-names, .groom-name, .bride-name, .ampersand
   ============================================================================ */
.gcc-preview-wedding-card[data-wedding-template] .couple-names,
.gcc-preview-wedding-card[data-wedding-template] .wedding-couple-names,
.gcc-wedding-card[data-wedding-template] .couple-names,
.gcc-wedding-card[data-wedding-template] .wedding-couple-names {
    font-family: var(--gcct-couple-font, 'Cinzel', 'Cormorant Garamond', Georgia, serif);
    font-size:   var(--gcct-couple-size, 1.5em);
    line-height: var(--gcct-couple-lh, 1.2);
}

.gcc-preview-wedding-card[data-wedding-template] .groom-name,
.gcc-preview-wedding-card[data-wedding-template] .bride-name,
.gcc-wedding-card[data-wedding-template] .groom-name,
.gcc-wedding-card[data-wedding-template] .bride-name {
    font-size:      var(--gcct-couple-size);
    font-weight:    var(--gcct-couple-weight);
    letter-spacing: var(--gcct-couple-spacing);
    text-align:     var(--gcct-couple-align);
    color:          var(--gcct-couple-color);
    font-style:     var(--gcct-couple-style, normal);
    line-height:    var(--gcct-couple-lh, 1.2);
}

/* Ampersand dùng font của couple, giữ màu accent của token */
.gcc-preview-wedding-card[data-wedding-template] .ampersand,
.gcc-wedding-card[data-wedding-template] .ampersand {
    font-family: var(--gcct-couple-font, 'Cinzel', 'Cormorant Garamond', Georgia, serif);
    font-size:   var(--gcct-couple-size);
    font-style:  var(--gcct-couple-style, normal);
    line-height: var(--gcct-couple-lh, 1.2);
}

/* ============================================================================
   TIÊU ĐỀ KÍNH MỜI (Wedding)
   Selector: .invitation-title
   ============================================================================ */
.gcc-preview-wedding-card[data-wedding-template] .invitation-title,
.gcc-wedding-card[data-wedding-template] .invitation-title {
    font-family:    var(--gcct-title-font, 'Cinzel', Georgia, serif);
    font-size:      var(--gcct-title-size, 0.85em);
    font-weight:    var(--gcct-title-weight);
    letter-spacing: var(--gcct-title-spacing, 0.15em);
    text-align:     var(--gcct-title-align);
    color:          var(--gcct-title-color);
    font-style:     var(--gcct-title-style, normal);
    line-height:    var(--gcct-title-lh, 1.3);
}

/* ============================================================================
   NỘI DUNG LỜI MỜI (Wedding)
   Selectors: .invitation-message, .wedding-message
   ============================================================================ */
.gcc-preview-wedding-card[data-wedding-template] .invitation-message,
.gcc-preview-wedding-card[data-wedding-template] .wedding-message,
.gcc-wedding-card[data-wedding-template] .invitation-message,
.gcc-wedding-card[data-wedding-template] .wedding-message {
    font-family:    var(--gcct-body-font, 'Cormorant Garamond', Georgia, serif);
    font-size:      var(--gcct-body-size);
    font-weight:    var(--gcct-body-weight);
    letter-spacing: var(--gcct-body-spacing);
    text-align:     var(--gcct-body-align);
    color:          var(--gcct-body-color);
    font-style:     var(--gcct-body-style, normal);
    line-height:    var(--gcct-body-lh, 1.65);
}

/* Tên cha mẹ hai họ — dùng font body */
.gcc-preview-wedding-card[data-wedding-template] .groom-parents,
.gcc-preview-wedding-card[data-wedding-template] .bride-parents,
.gcc-wedding-card[data-wedding-template] .groom-parents,
.gcc-wedding-card[data-wedding-template] .bride-parents {
    font-family: var(--gcct-body-font, 'Cormorant Garamond', Georgia, serif);
    font-size:   var(--gcct-body-size);
    color:       var(--gcct-body-color);
    line-height: var(--gcct-body-lh, 1.65);
}

/* ============================================================================
   CHI TIẾT SỰ KIỆN — NHÃN (Wedding)
   Selector: .detail-label
   ============================================================================ */
.gcc-preview-wedding-card[data-wedding-template] .detail-label,
.gcc-wedding-card[data-wedding-template] .detail-label {
    font-family: var(--gcct-detail_label-font, 'Cormorant Garamond', Georgia, serif);
    font-size:   var(--gcct-detail_label-size);
    font-weight: var(--gcct-detail_label-weight);
    color:       var(--gcct-detail_label-color);
    font-style:  var(--gcct-detail_label-style, normal);
    line-height: var(--gcct-detail_label-lh, 1.5);
}

/* ============================================================================
   CHI TIẾT SỰ KIỆN — GIÁ TRỊ (Wedding)
   Selector: .detail-value
   ============================================================================ */
.gcc-preview-wedding-card[data-wedding-template] .detail-value,
.gcc-wedding-card[data-wedding-template] .detail-value {
    font-family: var(--gcct-detail_value-font, 'Cormorant Garamond', Georgia, serif);
    font-size:   var(--gcct-detail_value-size);
    font-weight: var(--gcct-detail_value-weight);
    color:       var(--gcct-detail_value-color);
    font-style:  var(--gcct-detail_value-style, normal);
    line-height: var(--gcct-detail_value-lh, 1.5);
}

/* ============================================================================
   CHÂN TRANG (Wedding)
   Selectors: .footer-message, .wedding-map-button
   ============================================================================ */
.gcc-preview-wedding-card[data-wedding-template] .footer-message,
.gcc-wedding-card[data-wedding-template] .footer-message {
    font-family:    var(--gcct-footer-font, 'Cormorant Garamond', Georgia, serif);
    font-size:      var(--gcct-footer-size);
    font-weight:    var(--gcct-footer-weight);
    letter-spacing: var(--gcct-footer-spacing);
    text-align:     var(--gcct-footer-align);
    color:          var(--gcct-footer-color);
    font-style:     var(--gcct-footer-style, normal);
    line-height:    var(--gcct-footer-lh, 1.4);
}

/* Map button follows footer typography — font only, colour stays white-on-accent */
.gcc-preview-wedding-card[data-wedding-template] .wedding-map-button,
.gcc-wedding-card[data-wedding-template] .wedding-map-button {
    font-family: var(--gcct-footer-font, 'Cormorant Garamond', Georgia, serif);
    font-size:   var(--gcct-footer-size, 13px);
    font-weight: var(--gcct-footer-weight);
    font-style:  var(--gcct-footer-style, normal);
}

/* ============================================================================
   GENERAL CARD — Tiêu đề (#prevTitle)
   ============================================================================ */
.gcc-preview-card #prevTitle,
.gcc-preview-card .gcc-preview-title,
.gcc-preview-card[class*="gcc-tpl-"] .gcc-preview-title,
.gcc-preview-card[data-template] .gcc-preview-title {
    font-family:    var(--gcct-title-font, 'Be Vietnam Pro', sans-serif);
    font-size:      var(--gcct-title-size);
    font-weight:    var(--gcct-title-weight);
    letter-spacing: var(--gcct-title-spacing);
    text-align:     var(--gcct-title-align);
    color:          var(--gcct-title-color);
    font-style:     var(--gcct-title-style, normal);
    line-height:    var(--gcct-title-lh, 1.3);
}

/* ============================================================================
   GENERAL CARD — Nội dung / Caption (#prevCaption)
   ============================================================================ */
.gcc-preview-card #prevCaption,
.gcc-preview-card .gcc-preview-caption,
.gcc-preview-card[class*="gcc-tpl-"] .gcc-preview-caption,
.gcc-preview-card[data-template] .gcc-preview-caption {
    font-family:    var(--gcct-body-font, 'Be Vietnam Pro', sans-serif);
    font-size:      var(--gcct-body-size);
    font-weight:    var(--gcct-body-weight);
    letter-spacing: var(--gcct-body-spacing);
    text-align:     var(--gcct-body-align);
    color:          var(--gcct-body-color);
    font-style:     var(--gcct-body-style, normal);
    line-height:    var(--gcct-body-lh, 1.65);
}

/* ============================================================================
   GENERAL CARD — Người gửi (#prevFrom)
   ============================================================================ */
.gcc-preview-card #prevFrom,
.gcc-preview-card .gcc-preview-from,
.gcc-preview-card[class*="gcc-tpl-"] .gcc-preview-from,
.gcc-preview-card[data-template] .gcc-preview-from {
    font-family:    var(--gcct-footer-font, 'Be Vietnam Pro', sans-serif);
    font-size:      var(--gcct-footer-size);
    font-weight:    var(--gcct-footer-weight);
    letter-spacing: var(--gcct-footer-spacing);
    text-align:     var(--gcct-footer-align);
    color:          var(--gcct-footer-color);
    font-style:     var(--gcct-footer-style, normal);
    line-height:    var(--gcct-footer-lh, 1.4);
}

/* ============================================================================
   TEMPLATE OVERRIDE LAYER — Đảm bảo --gcct-* vars thắng !important của template
   --------------------------------------------------------------------------
   Template CSS (gcc-tpl-*) dùng !important cho color / font-size / text-fill.
   Layer này dùng :where() để KHÔNG tăng specificity (safe), nhưng đặt
   @layer order để typography luôn thắng khi var có giá trị thực (non-empty).

   Cách hoạt động: template !important thắng declarations bình thường,
   nhưng KHÔNG thắng được inline style. JS (applyVarsToCard) đã set vars
   lên card.style → vars luôn có giá trị → var() resolve đúng.

   Vấn đề chỉ xảy ra khi template dùng !important trên PROPERTY trực tiếp
   (vd: color: #fcee21 !important) thay vì var(). Fix thực sự là ở template.
   ============================================================================ */