/* ===== hindimeanings word template — everything scoped to .hm-outer so the theme won't clash ===== */
.hm-outer{
  --hm-orange:#ff8a3d; --hm-orange-l:#fff3e9; --hm-orange-d:#d9611a;
  --hm-green:#3fb984;  --hm-green-l:#ecf9f2;  --hm-green-d:#1f8a5b;
  --hm-violet:#8b5cf6; --hm-violet-l:#f3eeff; --hm-violet-d:#6d3fd6;
  --hm-text:#000; --hm-muted:#222; --hm-line:#e7e7ee;
  container-type:inline-size;
  font-family:Poppins,Arial,sans-serif;color:#000;font-weight:600;-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.6
}
.hm-outer *,.hm-outer *:before,.hm-outer *:after{box-sizing:border-box}
.hm-wrap{max-width:1150px;margin:0 auto;display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px}
.hm-main{min-width:0}
.hm-hi{font-family:"Noto Sans Devanagari",Poppins,sans-serif}
.hm-wrap b,.hm-wrap strong,.hm-tbl td,.hm-infl b{font-weight:800}
.hm-mlist li,.hm-tbl td,.hm-def>li,.hm-faq p,.hm-quick,.hm-syn,.hm-ex,.hm-infl small{color:#000}
.hm-mlist li,.hm-tbl td.hm-hi{font-weight:700}

/* Sidebar */
.hm-side{position:sticky;top:16px;align-self:start;background:#fff;border:1px solid var(--hm-line);border-radius:14px;padding:12px}
.hm-side h4{margin:4px 8px 10px;font-size:13px;color:var(--hm-muted);text-transform:uppercase;letter-spacing:.06em}
.hm-side a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none!important;color:var(--hm-text)!important;font-size:14px;font-weight:600;border-left:4px solid transparent;margin-bottom:4px;transition:.15s;box-shadow:none!important}
.hm-side a:hover,.hm-side a.on{background:var(--c-l);border-left-color:var(--c)}
.hm-side a span{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}

/* Section cards */
.hm-sec{background:#fff;border:1px solid var(--hm-line);border-top:5px solid var(--c);border-radius:14px;padding:20px 22px;margin:0 0 22px;scroll-margin-top:16px}
.hm-outer .hm-h2{font-family:Poppins,Arial,sans-serif;letter-spacing:0;text-transform:none;display:inline-block;margin:0 0 14px;padding:8px 26px 8px 16px;font-size:21px;line-height:1.3;font-weight:800;color:#fff!important;background:var(--c);clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);border-radius:6px 0 0 6px;border:0}
.hm-outer .hm-h2:before,.hm-outer .hm-h2:after{display:none}
.hm-outer .c-or{--c:var(--hm-orange);--c-l:var(--hm-orange-l);--c-d:var(--hm-orange-d)}
.hm-outer .c-gr{--c:var(--hm-green);--c-l:var(--hm-green-l);--c-d:var(--hm-green-d)}
.hm-outer .c-vi{--c:var(--hm-violet);--c-l:var(--hm-violet-l);--c-d:var(--hm-violet-d)}

/* Speaker button */
.hm-outer .hm-spk{border:0;padding:0;margin:0;background:var(--c-l,#f1f1f1);color:var(--c-d,#333);width:32px;height:32px;min-height:0;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none;transition:.15s;box-shadow:none}
.hm-outer .hm-spk:hover{background:var(--c,#999);color:#fff}
.hm-outer .hm-spk svg{width:17px;height:17px}
.hm-outer .hm-spk.play{animation:hmPulse .8s infinite}
@keyframes hmPulse{50%{transform:scale(1.12)}}

/* Header */
.hm-head{background:linear-gradient(135deg,var(--hm-orange-l),#fff 55%,var(--hm-green-l))}
.hm-title{margin:0 0 6px;font-size:32px;line-height:1.2;color:#000;font-weight:800}
.hm-title b{color:var(--hm-orange-d)}
.hm-meta{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;color:var(--hm-muted);margin:10px 0 14px}
.hm-meta strong{color:var(--hm-text)}
.hm-stars{color:var(--hm-orange)} .hm-dots{color:var(--hm-violet)}
.hm-accents{display:flex;flex-wrap:wrap;gap:10px}
.hm-outer .hm-acc{display:flex;align-items:center;gap:8px;margin:0;padding:6px 12px 6px 6px;border-radius:30px;border:1px solid var(--hm-line);background:#fff;cursor:pointer;font:600 13px Poppins,sans-serif;color:var(--hm-text);box-shadow:none;text-transform:none;letter-spacing:0}
.hm-outer .hm-acc:hover{border-color:var(--hm-orange);background:#fff;color:var(--hm-text)}
.hm-outer .hm-acc .hm-spk{width:28px;height:28px}
.hm-quick{margin-top:16px;padding:12px 16px;border-radius:12px;background:#fff;border:1px dashed var(--hm-orange);font-size:16px}

/* Long article body (~800 words) */
.hm-outer .hm-article p{font-size:17px;line-height:1.8;margin:0 0 14px;color:#000;font-weight:500}
.hm-outer .hm-article .hm-lead{font-size:18px;line-height:1.8;font-weight:600;margin:0 0 16px}
.hm-outer .hm-h3{font-family:Poppins,Arial,sans-serif;font-size:20px;font-weight:800;color:var(--hm-violet-d);margin:24px 0 10px;line-height:1.35}
/* Drop cap on the first paragraph */
.hm-outer .hm-article .hm-drop:first-letter{float:left;font-family:Poppins,Arial,sans-serif;font-weight:800;font-size:3.4em;line-height:.78;margin:6px 12px 0 0;color:var(--hm-violet-d)}
/* Line-by-line lists (examples, tips, synonyms, daily life) */
.hm-outer .hm-article .hm-points{list-style:none;margin:0 0 18px;padding:0}
.hm-outer .hm-article .hm-points li{position:relative;margin:0;padding:10px 0 10px 28px;border-bottom:1px solid var(--hm-line);font-size:17px;line-height:1.75;font-weight:500}
.hm-outer .hm-article .hm-points li:last-child{border-bottom:0}
.hm-outer .hm-article .hm-points li:before{content:"";position:absolute;left:4px;top:18px;width:9px;height:9px;border-radius:50%;background:var(--hm-violet)}

/* Meanings */
.hm-pos{display:inline-block;margin:6px 0 10px;padding:3px 12px;border-radius:20px;background:var(--c-l);color:var(--c-d);font-weight:700;font-size:13px;font-style:italic}
.hm-outer .hm-mlist{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.hm-outer .hm-mlist li{display:flex;align-items:center;gap:10px;margin:0;padding:8px 10px;border:1px solid var(--hm-line);border-radius:10px;font-size:17px}
.hm-outer .hm-mlist li:before{display:none}
.hm-mlist li:hover{background:var(--c-l)}
.hm-g{font-size:11px;color:var(--hm-muted);font-family:Poppins,sans-serif;margin-left:auto}

/* Inflections */
.hm-infl{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.hm-infl div{padding:10px 12px;border-radius:10px;background:var(--c-l)}
.hm-infl b{display:block;color:var(--c-d)} .hm-infl small{color:var(--hm-muted);font-size:13px}

/* Definitions */
.hm-outer .hm-def{list-style:none;counter-reset:d;padding:0;margin:0 0 10px}
.hm-outer .hm-def>li{counter-increment:d;position:relative;margin:0;padding:12px 12px 12px 46px;border-bottom:1px solid var(--hm-line)}
.hm-outer .hm-def>li:before{content:counter(d);position:absolute;left:8px;top:12px;width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.hm-def .hm-hi{display:block;color:var(--c-d);margin-top:3px}
.hm-syn{font-size:13px;margin-top:6px}.hm-syn b{color:var(--hm-violet-d)}
.hm-ex{margin-top:6px;padding:6px 10px;border-left:3px solid var(--hm-green);background:var(--hm-green-l);border-radius:0 8px 8px 0;font-style:italic;font-size:14px}
.hm-ex .hm-hi{font-style:normal;color:var(--hm-green-d)}

/* Chips */
.hm-chips{display:flex;flex-wrap:wrap;gap:8px}
.hm-outer .hm-chip{padding:6px 12px;border-radius:20px;background:var(--c-l);color:var(--c-d)!important;font-size:14px;text-decoration:none!important;border:1px solid transparent;box-shadow:none}
.hm-outer a.hm-chip:hover{border-color:var(--c)}
.hm-outer a.hm-chip{text-decoration:underline dotted!important;text-underline-offset:3px}
.hm-ant{margin:14px 0 6px;font-weight:700;color:var(--hm-orange-d)}

/* More matches table */
.hm-outer .hm-tbl{width:100%;border-collapse:collapse;font-size:15px;margin:0;border:0}
.hm-outer .hm-tbl th{background:var(--c);color:#fff;text-align:left;padding:9px 12px;border:0}
.hm-outer .hm-tbl td{padding:8px 12px;border:0;border-bottom:1px solid var(--hm-line)}
.hm-outer .hm-tbl tr:nth-child(even) td{background:var(--c-l)}
.hm-outer .hm-tbl td:last-child{width:48px}

/* Also see */
.hm-also{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.hm-outer .hm-also a{padding:12px 14px;border-radius:12px;background:var(--c-l);color:var(--c-d)!important;font-weight:600;text-decoration:none!important;box-shadow:none}
.hm-also a:after{content:" →"}

/* Word finder */
.hm-outer h2,.hm-outer h3,.hm-outer h4{font-family:Poppins,Arial,sans-serif}
.hm-outer .hm-wf h3{font-size:15px;margin:6px 0 8px;color:var(--c-d)}
.hm-wf .hm-chips{margin-bottom:12px}

/* FAQ */
.hm-faq details{border:1px solid var(--hm-line);border-radius:10px;padding:10px 14px;margin-bottom:8px}
.hm-faq summary{cursor:pointer;font-weight:700;color:var(--c-d)}
.hm-outer .hm-faq p{margin:8px 0 0;font-size:15px;line-height:1.6}


/* Other-language sections */
.hm-langbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-size:14px}
.hm-langbar span{color:var(--hm-muted)}
.hm-outer .hm-langbar a{padding:5px 12px;border-radius:20px;background:#fff;border:1px solid var(--hm-line);color:var(--hm-text)!important;text-decoration:none!important;font-weight:700;box-shadow:none}
.hm-outer .hm-langbar a:hover{border-color:var(--hm-violet);background:var(--hm-violet-l)}
.hm-lang{font-family:"Noto Sans Telugu","Noto Sans Tamil","Noto Nastaliq Urdu","Noto Sans Devanagari","Noto Sans Gujarati","Noto Sans Bengali","Noto Sans Kannada","Noto Sans Malayalam","Noto Sans Gurmukhi",Poppins,sans-serif;font-style:normal}
.hm-outer .hm-mlist.hm-lang li{font-size:18px}
.hm-roman{margin:0 0 10px;font-size:14px;color:var(--hm-muted)}
.hm-langsec .hm-ex .hm-lang{color:var(--c-d);font-weight:700}
.hm-langsec .hm-ex .hm-spk{width:26px;height:26px;vertical-align:middle;margin-left:4px}
.hm-langsec .hm-ex .hm-spk svg{width:14px;height:14px}

/* Narrow content area or phone: sidebar becomes a scrolling chip bar */
@container (max-width:760px){
  .hm-wrap{grid-template-columns:minmax(0,1fr);gap:12px}
  .hm-side{position:sticky;top:0;z-index:5;display:flex;overflow-x:auto;gap:6px;padding:8px;border-radius:0 0 12px 12px;scrollbar-width:none}
  .hm-side::-webkit-scrollbar{display:none}
  .hm-side h4{display:none}
  .hm-side a{white-space:nowrap;margin:0;border:0;border-bottom:3px solid transparent;padding:6px 10px}
  .hm-side a.on{border-bottom-color:var(--c)}
  .hm-title{font-size:24px}
  .hm-sec{padding:16px}
}
