/*
Theme Name: Talking Lessons Theme
Theme URI: https://example.com/talking-lessons
Author: Diaa + ChatGPT
Description: A lightweight WordPress theme for interactive speaking English lessons using the browser Web Speech API. Includes one global stylesheet for all lessons.
Version: 1.3.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: talking-lessons
*/

:root{
  --tl-bg:#f7f3ea;
  --tl-paper:#ffffff;
  --tl-ink:#1f2933;
  --tl-muted:#667085;
  --tl-primary:#1f6feb;
  --tl-primary-dark:#174ea6;
  --tl-accent:#f4b400;
  --tl-soft:#eef5ff;
  --tl-border:#e4e7ec;
  --tl-success:#12b76a;
  --tl-radius:18px;
  --tl-shadow:0 10px 30px rgba(16,24,40,.08);
  --tl-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:linear-gradient(180deg,var(--tl-bg),#fff);
  color:var(--tl-ink);
  font-family:var(--tl-font);
  line-height:1.7;
}
a{color:var(--tl-primary);text-decoration:none}
a:hover{text-decoration:underline}

.tl-site-header{
  background:var(--tl-paper);
  border-bottom:1px solid var(--tl-border);
  position:sticky;
  top:0;
  z-index:10;
}
.tl-container{
  width:min(1120px, calc(100% - 32px));
  margin-inline:auto;
}
.tl-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:72px;
  gap:16px;
}
.tl-brand{
  font-weight:900;
  font-size:22px;
  color:var(--tl-ink);
}
.tl-nav{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  font-weight:700;
}

.tl-main{padding:34px 0 60px}
.tl-hero{
  background:linear-gradient(135deg,#fff,var(--tl-soft));
  border:1px solid var(--tl-border);
  border-radius:28px;
  box-shadow:var(--tl-shadow);
  padding:34px;
  margin-bottom:28px;
}
.tl-hero h1{
  margin:0 0 10px;
  font-size:clamp(30px,5vw,54px);
  line-height:1.1;
}
.tl-hero p{margin:0;color:var(--tl-muted);font-size:18px}

.lesson-page{
  background:var(--tl-paper);
  border:1px solid var(--tl-border);
  border-radius:28px;
  box-shadow:var(--tl-shadow);
  padding:clamp(18px,3vw,34px);
  margin-bottom:28px;
}
.lesson-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:3px solid var(--tl-soft);
  padding-bottom:16px;
  margin-bottom:22px;
}
.lesson-title h1,.lesson-title h2{
  margin:0;
  font-size:clamp(26px,4vw,42px);
}
.lesson-badge{
  background:var(--tl-soft);
  color:var(--tl-primary-dark);
  border:1px solid #d4e7ff;
  padding:8px 14px;
  border-radius:999px;
  font-weight:800;
  white-space:nowrap;
}

.section-card{
  border:1px solid var(--tl-border);
  border-radius:var(--tl-radius);
  padding:20px;
  margin:20px 0;
  background:#fff;
}
.section-card h2,.section-card h3{
  margin-top:0;
  color:var(--tl-primary-dark);
}

.vocab-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin:18px 0;
}
.word-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  border:1px solid var(--tl-border);
  border-radius:16px;
  transition:.2s ease;
}
.word-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(31,111,235,.08);
}
.word-text{display:flex;flex-direction:column;gap:2px}
.english{
  font-size:20px;
  font-weight:900;
  color:var(--tl-ink);
  direction:ltr;
}
.arabic{
  font-size:16px;
  color:var(--tl-muted);
  direction:rtl;
  text-align:right;
}

.sentence-list{
  display:grid;
  gap:12px;
  margin:18px 0;
}
.sentence-card{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:14px;
  padding:16px;
  border:1px solid var(--tl-border);
  border-radius:16px;
  background:#fff;
}
.sentence-card .english{font-size:19px}
.sentence-card .arabic{margin-top:4px}

.phonics-box{
  background:#fffbeb;
  border:1px solid #fde68a;
  border-radius:18px;
  padding:18px;
  margin:18px 0;
}
.sound-title{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#fff7cc;
  border:1px solid #fde68a;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  color:#92400e;
}

.speak-btn,.listen-all-btn{
  border:0;
  cursor:pointer;
  background:var(--tl-primary);
  color:white;
  font-weight:900;
  border-radius:999px;
  padding:10px 14px;
  min-width:46px;
  transition:.2s ease;
  box-shadow:0 6px 14px rgba(31,111,235,.2);
}
.speak-btn:hover,.listen-all-btn:hover{background:var(--tl-primary-dark);transform:scale(1.04)}
.speak-btn:active,.listen-all-btn:active{transform:scale(.98)}
.listen-all-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:8px 0 16px;
}

.lesson-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--tl-border);
  border-radius:16px;
  background:#fff;
  margin:18px 0;
}
.lesson-table th,.lesson-table td{
  padding:14px;
  border-bottom:1px solid var(--tl-border);
  text-align:left;
  vertical-align:middle;
}
.lesson-table th{
  background:var(--tl-soft);
  color:var(--tl-primary-dark);
  font-weight:900;
}
.lesson-table tr:last-child td{border-bottom:0}
.lesson-table td:nth-child(2), .lesson-table th:nth-child(2){
  direction:rtl;
  text-align:right;
}

.rtl{direction:rtl;text-align:right}
.ltr{direction:ltr;text-align:left}

.tl-footer{
  border-top:1px solid var(--tl-border);
  background:#fff;
  padding:24px 0;
  color:var(--tl-muted);
  text-align:center;
}

@media (max-width:700px){
  .tl-header-inner{align-items:flex-start;flex-direction:column;padding:14px 0}
  .lesson-title{align-items:flex-start;flex-direction:column}
  .sentence-card{grid-template-columns:1fr}
  .speak-btn{width:100%}
  .lesson-table{font-size:14px}
  .lesson-table th,.lesson-table td{padding:10px}
}


/* Header/Menu update v1.3 */
.tl-site-header,
.tl-site-header *{
  box-sizing:border-box;
}

.tl-site-header{
  width:100%;
  background:#ffffff;
  border-bottom:1px solid var(--tl-border, #e4e7ec);
  position:sticky;
  top:0;
  z-index:999;
}

.tl-header-inner{
  display:block !important;
  width:min(1120px, calc(100% - 32px));
  margin-inline:auto;
  min-height:0 !important;
  padding:0 !important;
}

.tl-title-section{
  width:100%;
  padding:14px 0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.tl-brand{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  color:var(--tl-ink, #1f2933);
  font-size:24px;
  font-weight:900;
  line-height:1.25;
  min-height:34px;
  text-decoration:none;
}

.tl-brand:hover{
  text-decoration:none;
}

.tl-menu-section{
  width:100%;
  border-top:1px solid var(--tl-border, #e4e7ec);
  padding:9px 0;
  background:#fff;
}

.tl-menu-bar{
  display:none;
}

.tl-menu-toggle{
  display:none;
  border:1px solid var(--tl-border, #e4e7ec);
  background:var(--tl-soft, #eef5ff);
  color:var(--tl-primary-dark, #174ea6);
  border-radius:12px;
  padding:9px 13px;
  font-weight:900;
  cursor:pointer;
}

.tl-menu-wrap{
  display:block !important;
  width:100%;
}

.tl-nav{
  width:100%;
  display:block !important;
}

.tl-nav ul,
.tl-nav .menu{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

.tl-nav > ul,
.tl-nav > .menu{
  width:100%;
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

.tl-nav li{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  position:relative;
}

.tl-nav li::marker{
  content:"" !important;
}

.tl-nav a{
  display:block;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--tl-border, #e4e7ec);
  background:#ffffff;
  color:var(--tl-ink, #1f2933) !important;
  font-size:15px;
  font-weight:800;
  line-height:1.25;
  white-space:nowrap;
  text-decoration:none !important;
}

.tl-nav a:hover,
.tl-nav li:hover > a{
  background:var(--tl-soft, #eef5ff);
  color:var(--tl-primary-dark, #174ea6) !important;
}

/* Desktop dropdown submenus */
@media (min-width:701px){
  .tl-nav .sub-menu,
  .tl-nav .children{
    display:none !important;
    position:absolute;
    top:100%;
    left:0;
    min-width:210px;
    background:#fff;
    border:1px solid var(--tl-border, #e4e7ec);
    border-radius:14px;
    box-shadow:0 12px 28px rgba(16,24,40,.14);
    padding:8px !important;
    z-index:1000;
  }

  .tl-nav li:hover > .sub-menu,
  .tl-nav li:hover > .children,
  .tl-nav li:focus-within > .sub-menu,
  .tl-nav li:focus-within > .children{
    display:block !important;
  }

  .tl-nav .sub-menu li,
  .tl-nav .children li{
    width:100%;
  }

  .tl-nav .sub-menu a,
  .tl-nav .children a{
    width:100%;
    border-radius:10px;
    border:0;
    background:#fff;
    text-align:left;
  }

  .tl-menu-wrap{
    max-height:none !important;
    overflow:visible !important;
  }
}

/* Mobile: menu collapses only here */
@media (max-width:700px){
  .tl-header-inner{
    width:min(100% - 24px, 1120px);
  }

  .tl-title-section{
    padding:10px 0;
    justify-content:center;
  }

  .tl-brand{
    font-size:18px;
    text-align:center;
  }

  .tl-menu-section{
    padding:8px 0;
  }

  .tl-menu-bar{
    display:flex;
    justify-content:center;
    width:100%;
  }

  .tl-menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .tl-menu-wrap{
    display:none !important;
    padding-top:8px;
    max-height:58vh;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  body.tl-menu-open .tl-menu-wrap{
    display:block !important;
  }

  .tl-nav > ul,
  .tl-nav > .menu{
    display:grid !important;
    grid-template-columns:1fr;
    gap:7px;
    width:100%;
  }

  .tl-nav a{
    width:100%;
    border-radius:12px;
    text-align:center;
    padding:11px 12px;
    white-space:normal;
  }

  .tl-nav .sub-menu,
  .tl-nav .children{
    display:grid !important;
    grid-template-columns:1fr;
    gap:6px;
    position:static !important;
    box-shadow:none !important;
    border:0 !important;
    padding:6px 0 0 14px !important;
    margin:0 !important;
    background:transparent !important;
  }

  .tl-nav .sub-menu a,
  .tl-nav .children a{
    font-size:14px;
    background:#f8fafc;
  }

  .tl-main{
    padding-top:18px !important;
  }
}