/* NT Greek Lexicon — WordPress widget styles
   All selectors are scoped under #ntgl-app to avoid colliding with theme styles. */

@font-face {
  font-family: 'SBL Greek';
  src: url('../fonts/SBL_grk.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

#ntgl-app {
  --ntgl-navy:#132A46;
  --ntgl-navy-deep:#0D1F35;
  --ntgl-gold:#C9A227;
  --ntgl-gold-light:#E7C766;
  --ntgl-cream:#F7F2E7;
  --ntgl-ink:#1B2733;
  --ntgl-ink-soft:#5B6672;
  --ntgl-card:#FFFFFF;
  --ntgl-line:#E7E1D2;
  --ntgl-purple-bg:#DDDBFC;
  --ntgl-purple-bg-soft:#E7E5FD;

  --ntgl-c-noun-bg:#BFEBDC; --ntgl-c-noun-fg:#0F6B54;
  --ntgl-c-verb-bg:#FBCFC7; --ntgl-c-verb-fg:#A22E1F;
  --ntgl-c-adj-bg:#FCDFA0;  --ntgl-c-adj-fg:#96650A;
  --ntgl-c-adv-bg:#DDCBF7;  --ntgl-c-adv-fg:#5B34A8;
  --ntgl-c-propn-bg:#C2E2FA; --ntgl-c-propn-fg:#125D93;

  all: initial;
  *, *::before, *::after { box-sizing: border-box; }
  display: block;
  max-width: 560px;
  margin: 24px auto;
  background: var(--ntgl-purple-bg);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(19,42,70,0.14);
  border: 1px solid #d4d1f2;
  font-family: 'SBL Greek', 'Inter', -apple-system, sans-serif;
}
#ntgl-app *{font-family:inherit;}

#ntgl-app .ntgl-header{
  background:var(--ntgl-purple-bg);
  padding:20px 20px 16px;
  text-align:left;
}
#ntgl-app .ntgl-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:16px;
}
#ntgl-app .ntgl-brand{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
#ntgl-app .ntgl-brand-logo{
  width:44px;height:44px;
  border-radius:11px;
  display:block;
  flex:none;
}
#ntgl-app .ntgl-brand-text{min-width:0;}
#ntgl-app .ntgl-brand-title{
  font-weight:700;
  font-size:16px;
  color:var(--ntgl-navy);
  margin:0;
  line-height:1.25;
  white-space:nowrap;
}
#ntgl-app .ntgl-brand-sub{
  font-size:11.5px;
  font-weight:500;
  color:var(--ntgl-ink-soft);
  margin:2px 0 0;
}

#ntgl-app .ntgl-search-wrap{position:relative;}
#ntgl-app .ntgl-search-bar{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--ntgl-card);
  border-radius:14px;
  padding:12px 14px;
  border:1.5px solid var(--ntgl-navy);
}
#ntgl-app .ntgl-search-bar svg{flex:none;color:var(--ntgl-ink-soft);}
#ntgl-app .ntgl-search-input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-size:15px;
  color:var(--ntgl-ink);
  min-width:0;
}
#ntgl-app .ntgl-search-input::placeholder{color:#9AA3AC;font-style:italic;}
#ntgl-app .ntgl-clear-btn{
  display:none;
  border:none;background:none;cursor:pointer;
  color:var(--ntgl-ink-soft);padding:2px;
}

#ntgl-app .ntgl-results-count{
  font-size:12.5px;
  color:var(--ntgl-ink-soft);
  margin:12px 2px 0;
}

#ntgl-app .ntgl-content{
  padding:14px 18px 22px;
  max-height:640px;
  overflow-y:auto;
}
#ntgl-app .ntgl-results-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

#ntgl-app .ntgl-word-card{
  background:var(--ntgl-card);
  border-radius:20px;
  padding:26px 22px 22px;
  border:1px solid var(--ntgl-line);
  box-shadow:0 6px 18px rgba(19,42,70,0.06);
  position:relative;
}
#ntgl-app .ntgl-wc-body{
  padding-right:80px;
}
#ntgl-app .ntgl-wc-greek{
  font-weight:600;
  font-size:26px;
  color:var(--ntgl-navy);
  line-height:1.25;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  display:block;
}
#ntgl-app .ntgl-wc-inflection{
  font-weight:600;
  font-size:inherit;
  color:var(--ntgl-navy);
}
#ntgl-app .ntgl-wc-top-right{
  position:absolute;
  top:26px;
  right:22px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
}
#ntgl-app .ntgl-freq-badge{
  font-size:13px;
  font-weight:700;
  color:var(--ntgl-navy);
  background:var(--ntgl-cream);
  border:1px solid var(--ntgl-gold);
  padding:4px 11px;
  border-radius:999px;
  white-space:nowrap;
}
#ntgl-app .ntgl-wc-phon{
  font-style:italic;
  font-size:16px;
  color:var(--ntgl-ink-soft);
  display:block;
  margin:4px 0 14px;
}
#ntgl-app .ntgl-wc-pos-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:2px;
}
#ntgl-app .ntgl-pos-badge{
  flex:none;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.03em;
  padding:6px 12px;
  border-radius:999px;
  white-space:nowrap;
}
#ntgl-app .ntgl-wc-gloss{
  font-size:15px;
  color:var(--ntgl-ink);
  line-height:1.4;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}
#ntgl-app .ntgl-speakers{display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
#ntgl-app .ntgl-speak-btn{
  display:flex;
  align-items:center;
  gap:3px;
  border:1px solid var(--ntgl-navy);
  background:var(--ntgl-navy);
  color:var(--ntgl-cream);
  border-radius:999px;
  padding:4px 8px;
  font-size:9.5px;
  font-weight:600;
  cursor:pointer;
  transition:transform .12s ease, background .15s ease;
}
#ntgl-app .ntgl-speak-btn:active{transform:scale(0.96);}
#ntgl-app .ntgl-speak-btn.playing{background:var(--ntgl-gold);border-color:var(--ntgl-gold);color:var(--ntgl-navy);}
#ntgl-app .ntgl-speak-btn svg{flex:none;width:11px;height:11px;}

#ntgl-app .ntgl-landing{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:48px 26px 30px;
}
#ntgl-app .ntgl-landing img{
  width:110px;height:110px;
  display:block;
  margin-bottom:22px;
}
#ntgl-app .ntgl-landing h2{
  font-weight:700;
  font-size:20px;
  color:var(--ntgl-navy);
  margin:0 0 10px;
}
#ntgl-app .ntgl-landing p{
  font-size:14px;
  color:var(--ntgl-ink-soft);
  line-height:1.55;
  margin:0;
  max-width:280px;
}

#ntgl-app .ntgl-empty-state{
  text-align:center;
  padding:36px 16px;
  color:var(--ntgl-ink-soft);
}
#ntgl-app .ntgl-empty-state svg{color:#8C87C9;margin-bottom:10px;}
#ntgl-app .ntgl-empty-state p{font-size:13.5px;margin:0;}

@media (max-width: 600px){
  #ntgl-app{ margin:0; border-radius:0; max-width:100%; }
}