/* =========================================================================
   ILoveSinhala — unified stylesheet
   One file for every lesson. Removes the per-page <style> blocks so all
   100 lessons look identical. Theme colour is set per page with one line:
       <body class="lesson" data-theme="blue">
   Themes: blue (default), pink, green, teal, gold (bonus).
   ========================================================================= */

:root{
  --bg:#f7fbff;
  --card:#ffffff;
  --accent:#1e6091;
  --accent-dark:#123b66;
  --row:#e6f0ff;
  --section-bg:#f0f7ff;
  --section-br:#cfe3ff;
  --shadow:rgba(90,140,200,.25);
  --text:#1f2933;
  --muted:#555;
  /* Sinhala script must stay large and legible on phones */
  --script-size:1.25rem;
  --main-size:1.05rem;
}

/* ---- Per-page themes: set with data-theme on <body> ------------------- */
body[data-theme="pink"]{--bg:#fff6f9;--accent:#a83258;--accent-dark:#6d1f3a;--row:#ffe3ec;--section-bg:#fff0f5;--section-br:#ffd0de;--shadow:rgba(200,90,140,.25);}
body[data-theme="green"]{--bg:#f6fff3;--accent:#2f7a3f;--accent-dark:#1c4d26;--row:#e2f5e0;--section-bg:#f0fff0;--section-br:#c8e8c4;--shadow:rgba(90,180,110,.25);}
body[data-theme="teal"]{--bg:#f0fff8;--accent:#1f7a6a;--accent-dark:#124d43;--row:#dcf5ee;--section-bg:#eafff8;--section-br:#c2ecdf;--shadow:rgba(60,180,150,.25);}
body[data-theme="gold"]{--bg:#fffaf0;--accent:#b36b00;--accent-dark:#7a4800;--row:#ffebc2;--section-bg:#fff3d9;--section-br:#ffe4a8;--shadow:rgba(210,160,60,.25);}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height:1.5;
  display:flex;
  justify-content:center;
  padding:16px;
}

.app{
  width:100%;
  max-width:480px;
  background:var(--card);
  border-radius:14px;
  padding:16px;
  box-shadow:0 8px 24px var(--shadow);
}

/* ---- Header ----------------------------------------------------------- */
.logo{text-align:center;margin-bottom:10px;}
.logo img{max-width:160px;width:60%;height:auto;}

h1{
  color:var(--accent);
  font-size:1.35rem;
  margin:.2em 0 .3em;
}
p.intro{color:var(--muted);font-size:.95rem;margin:0 0 14px;}

h2{
  color:var(--accent-dark);
  font-size:1.05rem;
  margin:0 0 10px;
}

/* ---- Sections --------------------------------------------------------- */
.section{
  background:var(--section-bg);
  border:1px solid var(--section-br);
  border-radius:12px;
  padding:12px;
  margin-bottom:14px;
}

/* ---- Word rows (2-column: Sinhala | English) -------------------------- */
.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  background:var(--row);
  border-radius:10px;
  padding:12px;
  margin-bottom:8px;
}

.si .main{font-weight:800;color:var(--accent-dark);font-size:var(--main-size);}
.si .example{font-size:.9rem;color:var(--accent);margin-top:2px;}
.si .script{font-size:var(--script-size);color:var(--accent-dark);margin-top:4px;line-height:1.35;}

.en{text-align:right;}
.en .main{font-weight:700;font-size:var(--main-size);}
.en .example{font-size:.9rem;color:#444;margin-top:2px;}

.icon{font-size:1.1rem;}

/* ---- Phrases ---------------------------------------------------------- */
.section p{margin:.3em 0;}

/* ---- Dialogue --------------------------------------------------------- */
.dialogue{
  background:var(--row);
  border:2px dashed var(--accent);
  border-radius:12px;
  padding:12px;
  line-height:1.6;
}

/* ---- Cultural note ---------------------------------------------------- */
.note{font-size:.95rem;color:var(--accent-dark);line-height:1.7;}

/* ---- Simple nav between lessons (optional footer) --------------------- */
.nav{display:flex;justify-content:space-between;gap:8px;margin-top:6px;}
.nav a{
  flex:1;text-align:center;text-decoration:none;
  background:var(--accent);color:#fff;font-weight:700;
  padding:12px;border-radius:10px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
}
.nav a.home{background:var(--accent-dark);}
.nav a[aria-disabled="true"]{opacity:.35;pointer-events:none;}

/* ---- Small phones ----------------------------------------------------- */
@media (max-width:360px){
  .row{grid-template-columns:1fr;}     /* stack SI over EN */
  .en{text-align:left;}
}
