/* === Base page === */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f0f8ff;
  padding: 0;
  margin: 0;
}

/* Hero */
.hhb-hero {
  background: linear-gradient(90deg, #17a2b8 0%, #1fc8db 100%);
  color: #fff;
  padding: 36px 18px;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(23,162,184,0.10);
  text-align: center;
  margin-bottom: 32px;
  margin-top: 0 !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.hhb-hero ul {
  font-size: 1.25rem;
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
  padding-left: 2em;
  list-style-type: '✔ ';
}

/* Footer */
.footer-section,
.container-fluid.bg-secondary .row > div {
  text-align: left !important;
}

/* === Simple tabs === */
.hhb-tabs-simple {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin: 0 auto 1rem;
}
.hhb-tabs-simple .tab-btn {
  border-radius: 999px;
  font-weight: 700;
  color: #333;
  background: #f7f7f7;
  border: 1px solid #ddd;
  padding: .5rem .9rem;
  cursor: pointer;
}
.hhb-tabs-simple .tab-btn.active {
  color: #fff;
  background: #ff7f00;
  border-color: #d76600;
}
.count-panel { display: none; }
.count-panel.show { display: block; }

/* === Number tiles (grid) === */
.containernum {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1020px;
  margin: 20px auto;
}
.box {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-width: 60px;
  min-height: 60px;
  max-width: 140px;
  max-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  border-radius: 10px;
  cursor: pointer;
  font-size: 2.2rem;
  font-weight: bold;
  border: 2px solid #17a2b8;
  box-shadow: 0 2px 8px rgba(23,162,184,0.10);
}
.box:active { transform: scale(0.97); background: #e0f7fa; }

.row1 { background:#ffcccb; }
.row2 { background:#add8e6; }
.row3 { background:#90ee90; }
.row4 { background:#f8c471; }

.geez { font-size: 1.5em; font-family: 'Noto Sans Ethiopic', 'Abyssinica SIL', sans-serif; }
.arabic { font-size: 1em; display:flex; align-items:center; opacity:.85; }

/* === Milestones === */
.containernum.milestones {
  grid-template-columns: repeat(3, minmax(140px,1fr));
  max-width: 920px;
  gap: 16px;
}
.containernum.milestones .box {
  aspect-ratio: auto;
  min-height: 120px;
  flex-direction: column;
}
.containernum.milestones .geez {
  font-size: clamp(1.4rem, 5.5vw, 2rem);
  line-height: 1.1;
}
.containernum.milestones .arabic {
  font-size: clamp(0.95rem, 3.2vw, 1.2rem);
  line-height: 1.2;
  word-break: break-word;
}

/* === Activities wrapper === */
:root {
  --accent:#ff7f00; --accent-dark:#d76600;
  --bg:#fff8f0; --ok:#1b8a3e; --no:#b00020;
}
.activities {
  margin:2rem auto;
  max-width:980px;
  background:var(--bg);
  border:1px solid #f2dfc7;
  border-radius:14px;
  padding:1.25rem;
}
.activities h2 {
  font-family:"Noto Sans Ethiopic","Abyssinica SIL",system-ui,sans-serif;
  color:var(--accent-dark);
  margin:.25rem 0 1rem;
}
.grid{ display:grid; gap:.75rem; }
.grid.cols-4{ grid-template-columns:repeat(4,minmax(120px,1fr)); }
.panel{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }

/* Buttons etc */
.btn { background:var(--accent); color:#fff; border:none; padding:.55rem .9rem; border-radius:10px; font-weight:600; cursor:pointer; }
.btn.secondary { background:#f3f3f3; border:1px solid #ddd; color:#333; }
.btn.small { padding:.4rem .7rem; font-weight:700; }
.btn.outline{ background:#fff; color:#333; border:1px solid #ddd; }
.btn:focus{ outline:3px solid #ffd3a3; }
.score{ font-weight:700; color:var(--accent-dark); }

/* Cards for practices */
.card{ border-radius:12px; border:2px solid #eee; background:#fafafa; padding:.6rem; text-align:center; user-select:none; font-size:1.35rem; }
.card.geez{ font-family:"Noto Sans Ethiopic","Abyssinica SIL",sans-serif; font-weight:600; cursor:pointer; }
.card.drag{ background:#fff; border:2px solid var(--accent); cursor:grab; touch-action:none; }
.card.correct{ background:#e9f7ee; border-color:var(--ok); color:#0f5f29; }
.card.wrong{ background:#fdecea; border-color:#b00020; color:#7a0013; }
.card.square{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }

/* Tile inner */
.tile-wrap{ display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.tile-geez{ font-size:1.95rem; line-height:1.2; }   /* ~+30% */
.tile-arabic{ font-size:1.15rem; color:#444; opacity:.95; }

/* Practice tabs */
.practice-tabs { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:.75rem; }
.practice-tabs .pr-tab { background:#f7f7f7; padding:.4rem .8rem; border:1px solid #ddd; cursor:pointer; border-radius:999px; font-weight:700; color:#333; }
.practice-tabs .pr-tab.active { background:var(--accent); color:white; border-color:var(--accent-dark); }
.practice-pane { display:none; }
.practice-pane.show { display:block; }

/* Controls bar */
.ctrl-bar { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:.5rem 0 1rem; }

/* Practice 1 — compact */
.grid.grid-compact { grid-template-columns: repeat(4, minmax(88px, 1fr)); gap: .6rem; }
.p1-tile, .p1-drag {
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  min-height: 70px !important;
  padding: 4px !important;
}
.p1-tile .tile-geez { font-size: 2.4rem !important; line-height: 1 !important; }
.p1-drag { font-size: 2rem !important; line-height: 1 !important; }

/* Practice 2 — sequence slots */
.sequence-box.card { display:flex; flex-direction:column; align-items:center; }
.sequence { display:flex; gap:.45rem; justify-content:center; flex-wrap:wrap; }
.seq-item { min-width:2.4rem; display:inline-flex; align-items:center; justify-content:center; font-size:1.4rem; }
.drop-slot {
  min-width:2.4rem; min-height:2.4rem;
  border:2px dashed #ccc; border-radius:8px; padding:.2rem .45rem;
  display:inline-flex; align-items:center; justify-content:center; background:#fff; font-size:1.4rem;
}
.drop-slot.filled { border-style:solid; }

/* Report modal + badges */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  display: none; align-items: center; justify-content: center; z-index: 1050;
}
.modal-overlay.show { display: flex; }
.modal-card {
  background: #fff; border-radius: 20px; width: 320px; height: 320px;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding: 1rem 1.25rem; box-shadow: 0 8px 40px rgba(0,0,0,.20);
  text-align:center;
}
.modal-card h3 { margin: 0 0 .5rem; color: var(--accent-dark); }
.modal-summary { font-size: 1rem; margin: .5rem 0; }
.modal-actions { display: flex; gap: .5rem; justify-content: center; margin-top: .75rem; }

.badge{
  display: inline-block;
  margin-left: .5rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  vertical-align: middle;
}
.badge.gold{   background: linear-gradient(135deg, #d4af37, #b8860b); }
.badge.silver{ background: linear-gradient(135deg, #c0c0c0, #8c8c8c); }
.badge.bronze{ background: linear-gradient(135deg, #cd7f32, #8b5a2b); }

.review-wrong {
  border-color: var(--no) !important;
  box-shadow: 0 0 0 3px rgba(176,0,32,.15) inset;
}
.review-correct{
  border-color: var(--ok) !important;
  background: #e9f7ee !important;
  color: #0f5f29 !important;
  box-shadow: 0 0 0 3px rgba(27,138,62,.12) inset;
}
.correct-note { margin-top:.5rem; font-size:.9rem; color:#0f5f29; }

/* ============================================================
   NUMBER BUILD (P4) — IMPROVEMENTS
   - Larger selectors (Tens/Units/Base/Multiplier)
   - Clear instructions block
   - Twin equal boxes: Ge'ez (left) & Arabic (right)
   ============================================================ */

/* Instructions block */
.p4-instructions {
  background: #fff7ea;
  border: 1px dashed var(--accent);
  color: #333;
  border-radius: 12px;
  padding: .65rem .85rem;
  margin-bottom: .75rem;
  font-size: 1.05rem;
}

/* Top row */
.p4-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:.75rem;
}
.p4-top-left {
  display:flex;
  gap:.75rem 1rem;
  flex-wrap:wrap;
  align-items:center;
}
.p4-top-left label {
  font-size:1.15rem;
  font-weight:800;
  color:#222;
}

/* BIG SELECTORS */
.p4-select {
  padding:.7rem 1rem !important;
  min-width:150px !important;
  border-radius:12px !important;
  border:3px solid var(--accent) !important;
  background:#fff !important;
  font-size:1.4rem !important;   /* Increased font */
  font-weight:800 !important;
  text-align:center !important;
  color:#222 !important;
  cursor:pointer !important;
  box-shadow:0 2px 8px rgba(23,162,184,0.10);
}

/* Two box row — equal columns */
.p4-row {
  display:flex;
  gap:1.25rem;
  justify-content:center;
  align-items:stretch;
  flex-wrap:wrap;
}

/* Column wrapper + captions */
.p4-col {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
}
.p4-cap {
  font-size:.95rem;
  font-weight:700;
  color:#555;
}

/* Twin boxes (shared) */
.p4-box {
  width:170px;
  height:170px;
  border:4px solid var(--accent);
  border-radius:16px;
  background:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow:0 2px 12px rgba(23,162,184,0.10);
}

/* Ge'ez glyph */
.p4-geezbox {
  font-size:3.25rem;
  font-family:"Noto Sans Ethiopic","Abyssinica SIL",sans-serif;
}

/* Arabic input inside the right box */
.p4-arabicbox {
  display:flex;
  align-items:center;
  justify-content:center;
}
.p4-arabicbox input {
  width:85%;
  font-size:2rem;           /* Bigger */
  font-weight:800;
  padding:.55rem .6rem;
  border:2px solid #888;
  border-radius:12px;
  text-align:center;
  outline:none;
}

/* Feedback */
.p4-feedback {
  font-size:1.05rem;
  color:#444;
  margin-top:.4rem;
  max-width:360px;
  text-align:left;
}

/* Responsive */
@media(max-width:992px){
  .containernum { grid-template-columns: repeat(4, 1fr); }
}
@media(max-width:768px){
  .p4-select { min-width:130px !important; font-size:1.25rem !important; }
  .p4-box { width:150px; height:150px; }
  .p4-geezbox { font-size:2.6rem; }
  .p4-arabicbox input { font-size:1.7rem; }
}
@media(max-width:720px){
  .containernum { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-4{ grid-template-columns:repeat(2, 1fr); }
  .card{ padding:.8rem; font-size:1.45rem; }
}
@media(max-width:600px){
  .containernum { grid-template-columns: repeat(2, 1fr); }
  .containernum.milestones { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
}
@media(max-width:460px){
  .p4-box { width:135px; height:135px; }
  .p4-geezbox { font-size:2.2rem; }
  .p4-arabicbox input { font-size:1.5rem; }
}
@media(max-width:420px){
  .containernum.milestones { grid-template-columns: 1fr; }
}


/* === Drag & Match: answered state === */
.p1-tile.answered {
  background: #f2f2f2 !important;      /* light grey */
  border-color: #cfcfcf !important;     /* softer border */
  color: #333 !important;               /* readable text */
  box-shadow: none !important;
}
.p1-tile.answered .tile-geez { color: #333; }
.p1-tile.answered .tile-arabic { color: #555; opacity: .9; }


/* Green box for showing correct answers on review */
.correct-box {
  display: inline-block;
  margin-top: .45rem;
  padding: .35rem .6rem;
  border-radius: 10px;
  border: 3px solid var(--ok);          /* green border */
  background: #e9f7ee;                   /* light green bg */
  color: #0f5f29;
  font-weight: 800;
}

/* For sequences (Practice 2) - make slot itself go green when revealing correct */
.drop-slot.review-correct {
  border-color: var(--ok) !important;
  background: #e9f7ee !important;
  color: #0f5f29 !important;
  box-shadow: 0 0 0 3px rgba(27,138,62,.12) inset;
}


/* Green box for showing correct answers on review */
.correct-box {
  display: inline-block;
  margin-top: .45rem;
  padding: .35rem .6rem;
  border-radius: 10px;
  border: 3px solid var(--ok);     /* green border */
  background: #e9f7ee;             /* light green background */
  color: #0f5f29;                  /* dark green text */
  font-weight: 800;
  font-size: .95rem;
}

/* For sequences (Practice 2) – make slot itself go green when revealing correct */
.drop-slot.review-correct {
  border-color: var(--ok) !important;
  background: #e9f7ee !important;
  color: #0f5f29 !important;
  box-shadow: 0 0 0 3px rgba(27,138,62,.12) inset;
}



/* Allow tiles to expand vertically for correct-box */
.p1-tile,
.sequence-box.card,
.card.geez {
  height: auto !important;
  min-height: 70px !important;   /* keep base size */
  padding-bottom: 1.2rem !important; /* add space below */
}

/* Let the tile-wrap stack cleanly and leave room */
.p1-tile .tile-wrap {
  margin-bottom: .5rem !important;
}

/* Fix overflow cutting off the review boxes */
.p1-tile,
.sequence-box.card,
.card.geez {
  overflow: visible !important;
}


.correct-box {
  display: block;
  margin-top: .45rem;
  padding: .40rem .6rem;
  border-radius: 10px;
  border: 3px solid var(--ok);
  background: #e9f7ee;
  color: #0f5f29;
  font-weight: 800;
  font-size: .95rem;
  width: 100%;
  text-align: center;
}


/* ============================================================
   FIX: Allow Drag & Match tiles to expand vertically
   ============================================================ */

/* Let each P1 tile grow when a correct-box is added */
.p1-tile {
  height: auto !important;
  min-height: 90px !important;
  padding-bottom: 1.2rem !important;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Increase spacing between tile content and correct-box */
.p1-tile .tile-wrap {
  margin-bottom: .6rem !important;
}

/* Add vertical room between rows */
#p1-geez-10,
#p1-geez-100,
#p1-geez-1m {
  row-gap: 2.2rem !important;
}

#p1-geez-10 .p1-tile,
#p1-geez-100 .p1-tile,
#p1-geez-1m .p1-tile {
  margin-bottom: 1.2rem !important;
}

/* Correct-box styling */
.correct-box {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: .35rem;
  padding: .35rem .6rem;
  border-radius: 10px;
  border: 3px solid var(--ok);
  background: #e9f7ee;
  color: #0f5f29;
  font-weight: 800;
  font-size: .95rem;
  box-sizing: border-box;
}

/* Review-correct slot (Practice 2) */
.drop-slot.review-correct {
  border-color: var(--ok) !important;
  background: #e9f7ee !important;
  color: #0f5f29 !important;
  box-shadow: 0 0 0 3px rgba(27,138,62,.12) inset;
}