/*
Theme Name: LoveBangla
Theme URI: https://lovebangla.com/
Author: LoveBangla
Author URI: https://lovebangla.com/
Description: A fast, Bengali-first theme for love SMS, caption, status, shayari and kobita sites. Every quote is a copy-ready card, Core Web Vitals are built in, and structured data (Article, Breadcrumb, FAQ, ItemList, WebSite search) ships with the theme — no SEO plugin required.
Version: 1.1.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lovebangla
Tags: blog, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* =========================================================
   1. Tokens
   ========================================================= */
:root{
  --paper:#faf4f6;
  --surface:#ffffff;
  --surface-2:#f4ebee;
  --ink:#241633;
  --ink-soft:#5d4f6d;
  --alta:#b42b4f;
  --alta-deep:#8d1f3d;
  --marigold:#e6a23c;
  --river:#2e6e6b;
  --line:rgba(36,22,51,.12);
  --line-strong:rgba(36,22,51,.24);
  --shadow:0 1px 0 rgba(36,22,51,.06), 0 10px 30px -22px rgba(36,22,51,.55);

  --sans:"Hind Siliguri","Noto Sans Bengali",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Tiro Bangla","Noto Serif Bengali",Georgia,"Times New Roman",serif;

  --step--1:clamp(.82rem,.8rem + .1vw,.88rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.08rem);
  --step-1:clamp(1.2rem,1.12rem + .4vw,1.4rem);
  --step-2:clamp(1.45rem,1.3rem + .7vw,1.85rem);
  --step-3:clamp(1.75rem,1.45rem + 1.4vw,2.6rem);
  --step-4:clamp(2.1rem,1.6rem + 2.4vw,3.4rem);

  --wrap:74rem;
  --read:38rem;
  --gap:clamp(1rem,.7rem + 1.4vw,1.9rem);
  --radius:14px;
}
html[data-theme="dark"]{
  --paper:#17101f;
  --surface:#201829;
  --surface-2:#2a2034;
  --ink:#f1e7ee;
  --ink-soft:#b6a7c2;
  --alta:#ff7d9d;
  --alta-deep:#ff9ab3;
  --marigold:#f0bb66;
  --river:#7fd0c9;
  --line:rgba(241,231,238,.14);
  --line-strong:rgba(241,231,238,.28);
  --shadow:0 10px 30px -22px #000;
}

/* =========================================================
   2. Base
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--step-0);line-height:1.75;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--alta-deep);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--alta)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.28;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-2)}
h3{font-size:var(--step-1)}
p,ul,ol{margin:0 0 1.1em}
:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;z-index:99}
.skip-link:focus{left:.5rem;top:.5rem}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.wrap{width:min(100% - 2rem,var(--wrap));margin-inline:auto}
.stack>*+*{margin-top:var(--gap)}

/* =========================================================
   3. Header
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:1rem;min-height:4rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-family:var(--serif);font-size:var(--step-1);font-weight:600}
.brand .mark{flex:0 0 auto;width:34px;height:34px}
.brand small{display:block;font-family:var(--sans);font-size:.68rem;line-height:1;color:var(--ink-soft);font-weight:400;margin-top:.25rem}
.nav{margin-inline-start:auto}
.nav ul{display:flex;gap:.2rem;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:.45rem .7rem;border-radius:99px;text-decoration:none;color:var(--ink);font-size:var(--step--1);font-weight:500}
.nav a:hover,.nav .current-menu-item>a{background:var(--surface-2);color:var(--alta-deep)}
.nav li{position:relative}
.nav .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:12rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:.35rem;flex-direction:column}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{display:flex}
.header-tools{display:flex;gap:.35rem;align-items:center}
.icon-btn{
  display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer
}
.icon-btn:hover{border-color:var(--line-strong)}
.nav-toggle{display:none}
@media (max-width:860px){
  .nav-toggle{display:inline-grid}
  .nav{position:fixed;inset:4rem 0 auto 0;background:var(--surface);border-bottom:1px solid var(--line);padding:.6rem 1rem 1.1rem;display:none}
  .nav.is-open{display:block}
  .nav ul{flex-direction:column}
  .nav .sub-menu{display:flex;position:static;border:0;box-shadow:none;padding-inline-start:.9rem}
}

/* =========================================================
   4. Hero — the "line of the day"
   ========================================================= */
.hero{position:relative;overflow:hidden;padding:clamp(2.2rem,1rem + 5vw,4.5rem) 0 clamp(1.6rem,1rem + 3vw,3rem)}
.hero::after{
  content:"";position:absolute;right:-6%;top:-18%;width:min(42vw,420px);aspect-ratio:1;
  background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--marigold) 35%,transparent),transparent 62%);
  pointer-events:none
}
.alpona{position:absolute;left:-40px;bottom:-30px;width:210px;opacity:.16;color:var(--alta);pointer-events:none}
.hero-inner{position:relative;max-width:46rem}
.hero h1{margin-bottom:.35em}
.hero-sub{color:var(--ink-soft);max-width:34rem;margin-bottom:1.6rem}
.hero-card{
  background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--alta);
  border-radius:var(--radius);padding:clamp(1.1rem,.8rem + 1.4vw,1.9rem);box-shadow:var(--shadow)
}
.hero-quote{font-family:var(--serif);font-size:var(--step-2);line-height:1.6;margin:0 0 1rem;white-space:pre-line}
.hero-meta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;color:var(--ink-soft);font-size:var(--step--1)}
.reveal{opacity:0;transform:translateY(10px);animation:rise .6s .12s ease-out forwards}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* =========================================================
   5. Chips / categories
   ========================================================= */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:1.4rem 0 0}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .85rem;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:var(--step--1);font-weight:500
}
.chip:hover{border-color:var(--alta);color:var(--alta-deep)}
.chip b{font-weight:600;color:var(--ink-soft);font-size:.78em}

/* =========================================================
   6. Layout + cards
   ========================================================= */
.site-main{padding:clamp(1.5rem,1rem + 2vw,3rem) 0 3rem}
.layout{display:grid;gap:clamp(1.5rem,1rem + 2vw,3rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.layout.has-sidebar{grid-template-columns:minmax(0,1fr) 20rem}}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line);padding-bottom:.6rem}
.section-head h2{margin:0}
.section-head a{font-size:var(--step--1);text-decoration:none;font-weight:600}

.card-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));list-style:none;padding:0;margin:0}
.post-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column
}
.post-card:hover{border-color:var(--line-strong)}
.post-card .thumb{aspect-ratio:16/10;object-fit:cover;width:100%;background:var(--surface-2)}
.post-card .body{padding:1rem 1.05rem 1.15rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.post-card h3{font-size:var(--step-1);margin:0}
.post-card h3 a{color:var(--ink);text-decoration:none}
.post-card h3 a:hover{color:var(--alta-deep)}
.post-card p{margin:0;color:var(--ink-soft);font-size:var(--step--1)}
.meta{display:flex;flex-wrap:wrap;gap:.75rem;color:var(--ink-soft);font-size:var(--step--1);margin-top:auto}
.meta .cat{color:var(--alta-deep);font-weight:600;text-decoration:none}

/* =========================================================
   7. Copy card — the core object
   ========================================================= */
.love-card{
  position:relative;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--alta);
  border-radius:var(--radius);padding:1.15rem 1.2rem 1rem;margin:0 0 1rem;box-shadow:var(--shadow)
}
.love-card .text{font-family:var(--serif);font-size:var(--step-1);line-height:1.75;white-space:pre-line;margin:0}
.love-card cite{display:block;margin-top:.6rem;color:var(--ink-soft);font-style:normal;font-size:var(--step--1)}
.love-actions{display:flex;gap:.45rem;margin-top:.9rem;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-size:var(--step--1);font-weight:600;text-decoration:none
}
.btn:hover{border-color:var(--alta);color:var(--alta-deep)}
.btn-primary{background:var(--alta);border-color:var(--alta);color:#fff}
.btn-primary:hover{background:var(--alta-deep);border-color:var(--alta-deep);color:#fff}
.btn.is-done{background:var(--river);border-color:var(--river);color:#fff}
.btn svg{width:1em;height:1em}
.toast{
  position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%) translateY(1.5rem);
  background:var(--ink);color:var(--paper);padding:.6rem 1.1rem;border-radius:99px;font-size:var(--step--1);
  opacity:0;pointer-events:none;transition:.22s ease;z-index:80
}
.toast.is-visible{opacity:1;transform:translateX(-50%)}

/* =========================================================
   8. Single post
   ========================================================= */
.entry-header{margin-bottom:1.4rem}
.entry-header .meta{margin-top:.8rem}
.entry-thumb{border-radius:var(--radius);margin-bottom:1.5rem;width:100%;object-fit:cover}
.entry-content{max-width:var(--read)}
.entry-content.is-wide{max-width:46rem}
.entry-content h2{margin-top:1.9em;scroll-margin-top:5.5rem}
.entry-content h3{margin-top:1.5em;scroll-margin-top:5.5rem}
.entry-content ul,.entry-content ol{padding-inline-start:1.3rem}
.entry-content li{margin-bottom:.4em}
.entry-content blockquote{margin:0 0 1rem;padding:0;border:0}
.entry-content img{border-radius:var(--radius)}
.entry-content table{width:100%;border-collapse:collapse;font-size:var(--step--1)}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:.55rem .7rem;text-align:start}
.entry-content code{background:var(--surface-2);padding:.15em .4em;border-radius:5px;font-size:.9em}

.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.15rem;margin-bottom:1.6rem}
.toc>strong{font-family:var(--serif);font-size:var(--step-1);display:block;margin-bottom:.45rem}
.toc ol{margin:0;padding-inline-start:1.2rem}
.toc li{margin-bottom:.25rem}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--alta-deep);text-decoration:underline}

.breadcrumbs{font-size:var(--step--1);color:var(--ink-soft);margin-bottom:1rem}
.breadcrumbs a{color:var(--ink-soft);text-decoration:none}
.breadcrumbs a:hover{color:var(--alta-deep);text-decoration:underline}
.breadcrumbs span[aria-hidden]{margin:0 .4rem;opacity:.6}

.share-bar{display:flex;gap:.45rem;flex-wrap:wrap;margin:2rem 0;padding-top:1.2rem;border-top:1px solid var(--line)}
.author-box{display:flex;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;margin:2rem 0}
.author-box img{border-radius:99px;width:56px;height:56px}
.author-box h3{margin:0 0 .25rem;font-size:var(--step-1)}
.author-box p{margin:0;color:var(--ink-soft);font-size:var(--step--1)}

.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-bottom:.6rem;padding:.2rem .2rem}
.faq-item summary{cursor:pointer;padding:.85rem 1rem;font-weight:600;font-family:var(--serif);font-size:var(--step-1)}
.faq-item summary::marker{color:var(--alta)}
.faq-item .faq-a{padding:0 1rem 1rem;color:var(--ink-soft)}

.post-nav{display:grid;gap:.8rem;grid-template-columns:1fr 1fr;margin:2rem 0}
@media (max-width:640px){.post-nav{grid-template-columns:1fr}}
.post-nav a{display:block;padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-decoration:none;color:var(--ink)}
.post-nav span{display:block;font-size:var(--step--1);color:var(--ink-soft);margin-bottom:.2rem}

.progress{position:fixed;top:0;left:0;height:3px;background:var(--alta);width:0;z-index:60}

/* =========================================================
   9. Sidebar, footer, pagination, comments
   ========================================================= */
.sidebar .widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;margin-bottom:1rem}
.sidebar .widget-title{font-family:var(--serif);font-size:var(--step-1);margin:0 0 .7rem}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li{padding:.35rem 0;border-bottom:1px dashed var(--line)}
.sidebar li:last-child{border:0}
.sidebar a{color:var(--ink);text-decoration:none}
.sidebar a:hover{color:var(--alta-deep)}
@media (min-width:1024px){.sidebar{position:sticky;top:5rem;align-self:start}}

.search-form{display:flex;gap:.4rem}
.search-form input[type=search]{
  flex:1;min-width:0;padding:.6rem .85rem;border-radius:99px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;font-size:var(--step--1)
}

.pagination{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:2rem}
.pagination .page-numbers{
  display:inline-grid;place-items:center;min-width:2.4rem;height:2.4rem;padding:0 .6rem;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink);font-size:var(--step--1)
}
.pagination .current{background:var(--alta);border-color:var(--alta);color:#fff}

.site-footer{background:var(--surface);border-top:1px solid var(--line);padding:2.4rem 0 1.4rem;margin-top:3rem}
.footer-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.footer-grid .widget-title{font-family:var(--serif);font-size:var(--step-1);margin:0 0 .6rem}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{padding:.22rem 0}
.footer-grid a{color:var(--ink-soft);text-decoration:none}
.footer-grid a:hover{color:var(--alta-deep)}
.site-bottom{margin-top:1.8rem;padding-top:1rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;color:var(--ink-soft);font-size:var(--step--1)}
.site-bottom ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}

.comment-list{list-style:none;padding:0;margin:0 0 1.5rem}
.comment-list li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;margin-bottom:.7rem}
.comment-list .children{list-style:none;padding-inline-start:1rem;margin-top:.7rem}
.comment-form input,.comment-form textarea{
  width:100%;padding:.65rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit
}
.comment-form label{display:block;font-size:var(--step--1);margin-bottom:.25rem;color:var(--ink-soft)}
.comment-form p{margin-bottom:.8rem}
.comment-form .submit{border:0;background:var(--alta);color:#fff;padding:.65rem 1.4rem;border-radius:99px;font-weight:600;cursor:pointer;width:auto}

.notice{background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius);padding:1.5rem;text-align:center;color:var(--ink-soft)}
.error-404{text-align:center;padding:3rem 0}
.error-404 .big{font-family:var(--serif);font-size:clamp(4rem,12vw,8rem);color:var(--alta);line-height:1;margin:0}

/* WordPress core classes */
.alignwide{width:min(100%,52rem);margin-inline:auto}
.alignfull{width:100vw;margin-inline:calc(50% - 50vw);max-width:none}
.alignleft{float:left;margin:.3rem 1.2rem 1rem 0}
.alignright{float:right;margin:.3rem 0 1rem 1.2rem}
.aligncenter{margin-inline:auto}
.wp-caption-text,figcaption{font-size:var(--step--1);color:var(--ink-soft);text-align:center;margin-top:.4rem}
.sticky .post-card{border-color:var(--marigold)}
.bypostauthor{border-color:var(--alta)!important}
@media print{.site-header,.site-footer,.share-bar,.love-actions,.sidebar,.progress{display:none!important}}