/* =============================================
   Holy Week Word Find — Plugin Styles v1.3
   ============================================= */

/* Divi-proof: everything inside the wrapper
   must never exceed its container width        */
.hwwf-wrapper {
    font-family: Georgia, 'Times New Roman', serif;
    width: 100%;
    margin: 0 auto 2rem;
    background: #faf8f4;
    border: 1px solid #d0c9b8;
    border-radius: 8px;
    /* Critical: contain all children */
    overflow: hidden;
    box-sizing: border-box;
}

/* Force box-sizing on everything inside — Divi
   sometimes resets this on nested elements      */
.hwwf-wrapper *,
.hwwf-wrapper *::before,
.hwwf-wrapper *::after {
    box-sizing: border-box;
}

/* --- Landscape nudge (portrait phones only) --- */
.hwwf-rotate-nudge {
    display: none;
    background: #c8a951;
    color: #3a2800;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    padding: 8px 12px;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.hwwf-rotate-icon {
    font-size: 18px;
    display: inline-block;
    animation: hwwf-tilt 2.2s ease-in-out infinite;
}
@keyframes hwwf-tilt {
    0%, 100% { transform: rotate(0deg); }
    40%, 60% { transform: rotate(90deg); }
}
@media (max-width: 600px) and (orientation: portrait) {
    .hwwf-rotate-nudge { display: flex; }
}

/* --- Header --- */
.hwwf-header {
    background: #1a3a6b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    gap: 12px;
    width: 100%;
}
.hwwf-titles { text-align: center; flex: 1; min-width: 0; }
.hwwf-title {
    font-size: 22px !important; font-weight: bold !important;
    color: #fff !important; margin: 0 0 4px !important;
    padding: 0 !important; border: none !important; line-height: 1.2 !important;
}
.hwwf-subtitle { font-size: 13px; color: #b8cce0; margin: 0; font-style: italic; }
.hwwf-cross { display: inline-block; width: 20px; height: 24px; position: relative; flex-shrink: 0; }
.hwwf-cross::before, .hwwf-cross::after { content: ''; display: block; background: #c8a951; position: absolute; border-radius: 1px; }
.hwwf-cross::before { width: 5px; height: 24px; left: 7px; top: 0; }
.hwwf-cross::after  { width: 20px; height: 5px; left: 0; top: 6px; }

/* --- Controls --- */
.hwwf-controls-top {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; padding: 10px 16px 6px;
    background: #eee9de; border-bottom: 1px solid #d0c9b8; width: 100%;
}
.hwwf-score { font-size: 14px; font-weight: bold; color: #1a3a6b; }
.hwwf-btn-group { display: flex; flex-wrap: wrap; gap: 6px; }
.hwwf-btn {
    font-family: Georgia, serif; font-size: 12px; padding: 5px 12px;
    background: #fff; color: #1a3a6b; border: 1px solid #1a3a6b;
    border-radius: 4px; cursor: pointer;
    transition: background 0.15s, color 0.15s; white-space: nowrap;
}
.hwwf-btn:hover { background: #1a3a6b; color: #fff; }
.hwwf-btn-print { border-color: #c8a951; color: #7a6020; }
.hwwf-btn-print:hover { background: #c8a951; color: #fff; }

/* --- Message --- */
.hwwf-msg { min-height: 24px; font-size: 13px; font-style: italic; color: #5a5a7a; text-align: center; padding: 6px 16px 2px; }

/* --- Grid wrap ---
   No overflow, no scroll. JS writes the table
   width in px to exactly match this container.  */
.hwwf-grid-wrap,
.hwwf-ak-grid-wrap {
    width: 100%;
    overflow: hidden;
    padding: 8px 0 12px;
    text-align: center;
}

/* Table: JS sets explicit px width. CSS ensures
   it can never blow past its container.          */
.hwwf-grid,
.hwwf-ak-grid {
    border-collapse: collapse;
    margin: 0 auto;
    background: #fff;
    border: 2px solid #1a3a6b;
    /* Prevent table from auto-expanding */
    table-layout: fixed;
    max-width: 100%;
}

/* Cells: JS writes px width, height, font-size  */
.hwwf-grid td,
.hwwf-ak-grid td {
    text-align: center;
    vertical-align: middle;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: #1a1a2e;
    border: 1px solid #d0dce8;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.08s;
    overflow: hidden;
    padding: 0;
    /* Prevent Divi from adding min-width */
    min-width: 0 !important;
}

.hwwf-grid td:hover                    { background: #eef4fb; }
.hwwf-grid td.hwwf-selected            { background: #b5d4f4; color: #042c53; }
.hwwf-grid td.hwwf-found               { background: #c0f0d8; color: #0a4a28; }
.hwwf-grid td.hwwf-found.hwwf-selected { background: #5dcaa5; }
.hwwf-ak-grid td.hwwf-ak-highlight     { background: #fde8a0; color: #5a3a00; }
.hwwf-ak-grid td                       { cursor: default; }

/* --- Word List --- */
.hwwf-wordlist-label {
    text-align: center; font-size: 13px; font-weight: bold; color: #1a3a6b;
    letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 0 2px;
    border-top: 2px solid #c8a951; border-bottom: 1px solid #d0c9b8; background: #eee9de;
}
.hwwf-wordlist { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 10px 16px; justify-content: center; }
.hwwf-word-chip {
    font-size: 12px; font-weight: bold; letter-spacing: 0.05em; color: #2a2a4a;
    padding: 3px 10px; background: #fff; border: 1px solid #b0b8cc; border-radius: 3px; transition: all 0.2s;
}
.hwwf-word-chip.hwwf-found-word { background: #d4f5e5; color: #0a4a28; border-color: #5dcaa5; text-decoration: line-through; }

/* --- Answer Key --- */
.hwwf-answer-key { border-top: 2px solid #c8a951; padding: 10px 0 14px; background: #fdfbf5; }
.hwwf-ak-title { text-align: center; font-size: 14px; font-weight: bold; color: #1a3a6b; margin-bottom: 8px; letter-spacing: 0.06em; text-transform: uppercase; }

/* --- Scripture --- */
.hwwf-scripture { font-size: 12px; font-style: italic; color: #7a6a50; text-align: center; padding: 8px 16px 12px; border-top: 1px solid #d0c9b8; background: #eee9de; }

/* --- Print --- */
@media print {
    .hwwf-btn-group, .hwwf-msg, .hwwf-answer-key, .hwwf-rotate-nudge { display: none !important; }
    .hwwf-wrapper { border: none; }
    .hwwf-grid td.hwwf-found, .hwwf-grid td.hwwf-selected { background: #fff !important; color: #000 !important; }
}

/* --- Small screens --- */
@media (max-width: 480px) {
    .hwwf-crosses { display: none; }
    .hwwf-title   { font-size: 17px !important; }
    .hwwf-btn     { font-size: 11px; padding: 4px 8px; }
}