/*
Theme Name: The Note
Theme URI: https://thenote.in/
Author: The Note
Description: Lightweight Hindi-first study notes and career guides theme. Built from the approved The Note design.
Version: 1.0.1
Requires at least: 6.2
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-note
*/

/* DESIGN TOKENS
 Background #FBF8F1 | Surface #FFFFFF | Ink #14233B | Muted #5B6677
 Accent #E9A23B | Accent-dark #B9770E | Link #1F5FBF | Border #E6E0D2 | Success #2E7D5B
 Fonts: Inter (English), Noto Sans Devanagari (Hindi), one family for all English text
 Body 17/1.7 | Hindi 18/1.8 | Scale 1.25 (13.6, 17, 21, 27, 33, 41) | Grid 8px | Card radius 12px */
:root{
 --bg:#FBF8F1;--surface:#FFFFFF;--ink:#14233B;--muted:#5B6677;
 --accent:#E9A23B;--accent-dark:#B9770E;--link:#1F5FBF;--border:#E6E0D2;--success:#2E7D5B;
 --tint:#FFF4DC;--r:12px;
 --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s8:64px;
 --f-sm:13.6px;--f-0:17px;--f-1:21px;--f-2:27px;--f-3:33px;--f-4:41px;
 --en:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --hi:"Noto Sans Devanagari","Inter",system-ui,sans-serif;
 --hand:var(--en);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:80px}

body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--f-0)/1.7 var(--en)}

a{color:var(--link);text-underline-offset:3px}

a:hover{color:var(--ink)}

:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

img,svg{max-width:100%}

h1,h2,h3,h4{line-height:1.25;margin:0 0 var(--s1);font-weight:700}

h1{font-size:var(--f-3)}
h2{font-size:var(--f-2)}
h3{font-size:var(--f-1)}
h4{font-size:var(--f-0)}

p{margin:0 0 var(--s2)}

ul,ol{padding-left:var(--s3);margin:0 0 var(--s2)}

.hi,[lang=hi]{font-family:var(--hi);font-size:18px;line-height:1.8}

.sub{display:block;color:var(--muted)}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s2)}

.hand{font:600 17px/1.4 var(--en);color:var(--accent-dark)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.toggle{position:absolute;opacity:0;pointer-events:none}


/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:48px;padding:8px 24px;border-radius:var(--r);background:var(--accent);color:var(--ink);font:600 var(--f-0)/1.3 var(--en);text-decoration:none;border:2px solid var(--accent);cursor:pointer;text-align:center}

.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}

.btn.ghost{background:transparent;border-color:var(--ink)}

.btn.ghost:hover{background:var(--ink);color:#fff}

.btn small{font:400 var(--f-sm)/1.3 var(--hi);display:block}


/* header */
.site-header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}

.hdr{display:flex;align-items:center;gap:var(--s1);min-height:64px;flex-wrap:wrap}

.brand{display:flex;align-items:center;gap:var(--s1);font-weight:700;font-size:var(--f-1);color:var(--ink);text-decoration:none;min-height:48px;margin-right:auto}

.brand svg{width:28px;height:28px;flex:none}

.brand .hi{font-size:var(--f-sm);color:var(--muted);font-weight:400;align-self:flex-end;margin-bottom:12px}

.icon-btn{width:48px;height:48px;display:grid;place-items:center;border-radius:var(--r);cursor:pointer;color:var(--ink);border:1px solid var(--border);background:var(--surface)}

.icon-btn svg{width:24px;height:24px}

.search{display:none;flex:1 1 100%;order:5;gap:var(--s1);padding-bottom:var(--s1)}

#sq:checked~.hdr .search{display:flex}

.search input,.field input,.field textarea{font:inherit;min-height:48px;width:100%;padding:8px 16px;border:1.5px solid var(--ink);border-radius:var(--r);background:#fff;color:var(--ink)}

.search input{flex:1}

.search button{min-height:48px;padding:0 16px;border-radius:var(--r);border:0;background:var(--ink);color:#fff;font:600 var(--f-0) var(--en)}

.nav{display:none;flex:1 1 100%;order:6;padding-bottom:var(--s1)}

#mn:checked~.hdr .nav{display:block}

.nav ul{list-style:none;margin:0;padding:0}

.nav a{display:flex;flex-direction:column;justify-content:center;min-height:48px;padding:4px 8px;color:var(--ink);text-decoration:none;font-weight:600;border-top:1px solid var(--border);line-height:1.35}

.nav a span{font:400 var(--f-sm)/1.3 var(--hi);color:var(--muted)}

.nav a:hover{background:var(--tint)}



.band{padding:var(--s5) 0}

.band+.band{padding-top:0}

.sec-head{margin-bottom:var(--s3)}

.sec-head p{color:var(--muted);margin:0}


/* hero */
.hero{background:var(--surface);border-bottom:1px solid var(--border);padding:var(--s5) 0 var(--s6);
 background-image:repeating-linear-gradient(transparent 0 31px,#EDE7D6 31px 32px);position:relative}

.hero::before{content:"";position:absolute;left:12px;top:0;bottom:0;border-left:2px solid #F2C4B8}

.hero .wrap{position:relative}

.hero h1{font-size:var(--f-3);background:var(--surface);display:inline;padding:0 8px;margin-left:-8px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

.hero .hi-line{font-size:var(--f-1);font-family:var(--hi);line-height:1.6;margin:var(--s2) 0 var(--s3);background:var(--surface);display:inline-block;padding:0 8px;margin-left:-8px}

.hero .search{display:flex;padding:0;margin-bottom:var(--s2);max-width:640px;background:var(--surface);border-radius:var(--r)}

.hero .cta{display:flex;flex-wrap:wrap;gap:var(--s1)}

.hero .hand{display:block;transform:rotate(-2deg);margin-top:var(--s2);background:var(--surface);width:max-content;padding:0 8px}

.pick{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s1);margin-top:var(--s4)}

.tile{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:88px;padding:var(--s1);background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);color:var(--ink);text-decoration:none;font-weight:700;line-height:1.3}

.tile .hi{font-weight:400;font-size:var(--f-sm);color:var(--muted)}

.tile:hover{border-color:var(--accent-dark);background:var(--tint)}

.chips{display:flex;flex-wrap:wrap;gap:var(--s1);list-style:none;padding:0;margin:var(--s2) 0 0}

.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 16px;border:1.5px solid var(--border);border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}

.chip .hi{font-size:var(--f-sm);font-weight:400;color:var(--muted)}

.chip:hover,.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.chip.on .hi,.chip:hover .hi{color:#ddd}


/* cards */
.grid{display:grid;gap:var(--s2);grid-template-columns:1fr;list-style:none;padding:0;margin:0}

.card{position:relative;display:flex;flex-direction:column;gap:4px;height:100%;padding:var(--s2) var(--s2) var(--s2) 40px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
 background-image:repeating-linear-gradient(transparent 0 27px,#F1EBDB 27px 28px);background-position:0 8px}

.card::before{content:"";position:absolute;left:28px;top:0;bottom:0;border-left:1.5px solid #F2C4B8}

.card .no{position:absolute;left:0;top:16px;width:28px;text-align:center;font-size:var(--f-sm);font-weight:700;color:var(--muted)}

.card h3{font-size:19px;margin:0}

.card h3 a{color:var(--ink);text-decoration:none}

.card h3 a::after{content:"";position:absolute;inset:0}

.card:hover{border-color:var(--accent-dark);box-shadow:0 2px 0 var(--accent)}

.card .hi{color:var(--muted);font-size:17px;line-height:1.6}

.card p{margin:0;font-size:15.5px;line-height:1.6;background:rgba(255,255,255,.85)}

.tag{margin-top:auto;align-self:flex-start;display:inline-block;padding:2px 12px;border-radius:999px;background:var(--tint);border:1px solid var(--accent);font-size:var(--f-sm);font-weight:600;line-height:1.6;color:var(--ink)}

.card.big{padding:var(--s3) var(--s3) var(--s3) 48px;background-image:none;border-top:4px solid var(--accent)}

.card.big::before{display:none}

.card.big .no{display:none}

.card.big{padding-left:var(--s3)}

.card.big h3{font-size:var(--f-1)}

.more{margin-top:var(--s2);font-weight:600}


/* ads */
.ad{margin:var(--s3) auto;display:grid;place-items:center;text-align:center;background:repeating-linear-gradient(45deg,#F4F0E4 0 8px,#FBF8F1 8px 16px);border:1px dashed #9AA3B2;border-radius:8px;color:var(--muted);font:600 var(--f-sm)/1.4 var(--en);letter-spacing:.04em;text-transform:uppercase}

.ad small{display:block;text-transform:none;letter-spacing:0;font-weight:400}

.ad-lead{width:320px;max-width:100%;height:100px}

.ad-rect{width:300px;max-width:100%;height:250px}


/* steps */
.steps{display:grid;gap:var(--s2);list-style:none;padding:0;margin:0;counter-reset:s}

.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s3)}

.steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);font-weight:700;margin-bottom:var(--s1)}

.steps h3{font-size:19px}
.steps p{margin:0;color:var(--muted)}


/* inner pages */
.crumbs{font-size:15px;color:var(--muted);padding:var(--s2) 0 var(--s1)}

.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 8px}

.crumbs li+li::before{content:"/";margin-right:8px;color:var(--border)}

.crumbs a{display:inline-block;min-height:44px;line-height:44px}

.page-head{padding-bottom:var(--s2)}

.page-head .hi-title{font-size:var(--f-1);color:var(--muted);margin:0 0 var(--s2);font-family:var(--hi);line-height:1.6}

.lead{font-size:19px;max-width:70ch}

.layout{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}

.side{display:grid;gap:var(--s3);align-content:start}

.box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s3)}

.box h2,.box h3{font-size:var(--f-1)}

.box ul{margin:0;padding-left:var(--s3)}

.side ol,.side ul.plain{list-style:none;padding:0;margin:0}

.side li a{display:flex;align-items:center;min-height:44px;line-height:1.35;color:var(--ink)}

.side li a:hover{color:var(--link)}

.pager{display:flex;flex-wrap:wrap;gap:var(--s1);justify-content:center;margin:var(--s4) 0 0}

.pager a{min-width:48px;min-height:48px;display:grid;place-items:center;padding:0 16px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600}

.pager a.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.empty{text-align:center;border:2px dashed var(--border);border-radius:var(--r);padding:var(--s6) var(--s2);background:var(--surface);margin-top:var(--s2)}

.empty .mark{width:56px;height:56px;margin:0 auto var(--s2);border:2px solid var(--ink);border-radius:4px 14px 4px 4px;display:grid;place-items:center;font-weight:700;font-size:var(--f-2)}

.empty p{color:var(--muted)}

.spec{font:600 var(--f-sm) var(--en);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:var(--s5) 0 var(--s1)}


/* article */
.meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:center;color:var(--muted);font-size:15px;margin:var(--s2) 0}

.lang{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden}

.lang a{display:grid;place-items:center;min-height:44px;padding:0 20px;color:var(--ink);text-decoration:none;font-weight:600}

.lang a.on{background:var(--ink);color:#fff}

.dl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);background:var(--tint);border:1.5px solid var(--accent);border-radius:var(--r);padding:var(--s2) var(--s3);margin:var(--s3) 0}

.dl>div{flex:1 1 220px}
.dl strong{display:block}
.dl span{color:var(--muted);font-size:15px}

.toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:0 var(--s2)}

.toc summary{min-height:48px;display:flex;align-items:center;font-weight:700;cursor:pointer}

.toc ol{padding:0 0 var(--s1);margin:0;list-style:none;counter-reset:t}

.toc li{counter-increment:t}

.toc a{display:flex;gap:8px;align-items:center;min-height:44px;line-height:1.35;color:var(--ink);text-decoration:none}

.toc a::before{content:counter(t) ".";color:var(--muted);min-width:20px}

.toc a:hover{color:var(--link);text-decoration:underline}

.prose{max-width:70ch}

.prose h2{margin-top:var(--s5);padding-top:var(--s1)}

.key{background:var(--tint);border:1.5px solid var(--accent);border-radius:var(--r);padding:var(--s2) var(--s3);margin:var(--s3) 0}

.key h2{margin:0 0 var(--s1)!important;padding:0!important;font-size:var(--f-1)}

.key li{margin-bottom:4px}

.formulas{background:var(--ink);color:#fff;border-radius:var(--r);padding:var(--s3);margin:var(--s3) 0}

.formulas h3{color:#fff}

.formulas code{display:block;font:600 16px/1.5 ui-monospace,Menlo,Consolas,monospace;padding:12px 0;border-top:1px solid #34476a;overflow-wrap:anywhere}

.formulas code small{display:block;font:400 var(--f-sm) var(--en);color:#C9D2E2}

.tbl{overflow-x:auto;margin:var(--s3) 0;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}

table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px;line-height:1.5}

th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:top}

th{background:var(--tint);font-weight:700}

tr:last-child td{border-bottom:0}

caption{text-align:left;padding:12px 16px;font-weight:700;caption-side:top}

figure{margin:var(--s3) 0}

.fig{display:grid;place-items:center;aspect-ratio:16/9;border:1px dashed #9AA3B2;border-radius:var(--r);background:repeating-linear-gradient(45deg,#F4F0E4 0 8px,#FBF8F1 8px 16px);font:13px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center;padding:var(--s2)}

figcaption{font-size:15px;color:var(--muted);margin-top:var(--s1)}

.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:var(--s1);padding:0 var(--s2)}

.faq summary{min-height:52px;display:flex;align-items:center;font-weight:600;cursor:pointer;line-height:1.4;padding:8px 0}

.faq details p{color:var(--ink)}

.pn{display:grid;gap:var(--s1);margin:var(--s4) 0}

.pn .btn{justify-content:flex-start;text-align:left}

.pn .next{justify-content:flex-end;text-align:right}

.report{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600}

.check{list-style:none;padding:0}

.check li{display:flex;gap:12px;align-items:flex-start;margin-bottom:var(--s1)}

.check li::before{content:"";flex:none;width:22px;height:22px;margin-top:4px;border:2px solid var(--success);border-radius:6px}

.glance dl{display:grid;grid-template-columns:1fr;gap:var(--s1);margin:0}

.glance dt{font-size:var(--f-sm);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}

.glance dd{margin:0 0 var(--s1);font-weight:600}


/* about/contact */
.narrow{max-width:680px;margin:0 auto;padding:var(--s6) var(--s2) var(--s8);text-align:center}

.narrow .body{text-align:left;margin-top:var(--s3)}

.field{display:block;text-align:left;margin-bottom:var(--s2)}

.field span{display:block;font-weight:600;margin-bottom:4px}

.field span .hi{font-weight:400;font-size:15px;color:var(--muted);margin-left:6px}

.field textarea{min-height:160px;resize:vertical}


/* footer */
.site-footer{background:var(--ink);color:#E8ECF3;margin-top:var(--s6);padding:var(--s6) 0 var(--s4)}

.site-footer a{color:#fff;display:inline-flex;align-items:center;min-height:44px}

.site-footer ul{list-style:none;padding:0;margin:0}

.site-footer h2{font-size:var(--f-sm);text-transform:uppercase;letter-spacing:.08em;color:#C9D2E2;margin-bottom:var(--s1)}

.fcols{display:grid;gap:var(--s3);grid-template-columns:1fr 1fr}

.fbrand{grid-column:1/-1}

.fbrand strong{font-size:var(--f-1)}

.fbrand p{color:#C9D2E2;margin:var(--s1) 0 0}

.legal{border-top:1px solid #34476a;margin-top:var(--s4);padding-top:var(--s2);font-size:15px;color:#C9D2E2}

.legal p{margin:0}


@media(min-width:600px){
 .grid{grid-template-columns:repeat(2,1fr)}

 .steps{grid-template-columns:repeat(3,1fr)}

 .glance dl{grid-template-columns:repeat(2,1fr)}

 .pn{grid-template-columns:1fr 1fr}

 .fcols{grid-template-columns:2fr 1fr 1fr 1fr}
.fbrand{grid-column:auto}

}

@media(min-width:960px){
 h1{font-size:var(--f-4)}
h2{font-size:var(--f-3)}

 .hero h1{font-size:var(--f-4)}

 .hero{padding:var(--s8) 0}

 .pick{max-width:640px}

 .menu-btn,.search-btn{display:none}

 .search{display:flex;flex:0 1 280px;order:0;padding:0}

 .nav{display:block;flex:1 1 100%;order:6;padding:0;border-top:1px solid var(--border)}

 .nav ul{display:flex;gap:var(--s1)}

 .nav a{border:0;padding:4px 16px;border-bottom:3px solid transparent;font-size:16px}

 .nav a:hover{background:transparent;border-bottom-color:var(--accent)}

 .hdr{flex-wrap:wrap}

 .brand{margin-right:auto}

 .grid.c3{grid-template-columns:repeat(3,1fr)}

 .grid.c2{grid-template-columns:repeat(2,1fr)}

 .layout.has-side{grid-template-columns:minmax(0,1fr) 300px;gap:var(--s5)}

 .side.sticky{position:sticky;top:140px}

 .ad-lead{width:728px;height:90px}

 .toc{margin-bottom:0}

 .layout.has-side .grid{grid-template-columns:repeat(2,1fr)}

}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}


/* ===== WordPress additions (not part of the static design) ===== */

/* skip link becomes visible on keyboard focus */
.sr:focus{position:fixed;left:8px;top:8px;width:auto;height:auto;clip:auto;overflow:visible;background:#fff;color:var(--ink);padding:12px 16px;z-index:100;border-radius:var(--r);outline:3px solid var(--ink)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* logged-in admin bar */
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}

/* mobile table of contents is hidden on desktop (sidebar shows it) */
@media(min-width:960px){.side-toc-m{display:none}}

/* live ads: no placeholder boxes, only real ad code */
.ad-wrap{margin:var(--s3) auto;text-align:center;overflow:hidden;max-width:100%}

/* career guide boxes */
.box.glance{border-color:var(--accent);background:var(--tint)}
.box.glance h3{margin-top:0}
.prose .key h3,.prose .formulas h3,.prose .box h3{margin-top:0}
.prose h3{margin-top:var(--s3)}

/* content from the block editor */
.prose img,.prose video,.prose iframe{max-width:100%;height:auto;border-radius:var(--r)}
.prose .wp-block-table{overflow-x:auto;margin:var(--s3) 0;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.prose .wp-block-table table{border:0;margin:0}
.prose .wp-block-table figcaption{padding:12px 16px;margin:0;border-top:1px solid var(--border)}
.prose .wp-block-group.faq{margin-top:var(--s4)}
.prose .wp-block-details p{margin:0 0 var(--s2)}
.alignleft{float:left;margin:0 var(--s2) var(--s1) 0}
.alignright{float:right;margin:0 0 var(--s1) var(--s2)}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:15px;color:var(--muted)}
.page-head .lead p{margin:0 0 var(--s2)}
.narrow .body .box{margin-top:var(--s3)}
.narrow .search{display:flex;padding:0;margin:var(--s2) auto 0;max-width:420px}
.pager span.dots{display:grid;place-items:center;min-width:32px}

/* one font family everywhere, including form controls */
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4,.btn,.chip,.tile,.nav a{font-family:var(--en)}
.hi,[lang=hi],.hi-title,.hi-line{font-family:var(--hi)}
.soon{margin:var(--s2) 0 0;padding:12px 16px;background:var(--tint);border:1px solid var(--accent);border-radius:var(--r);max-width:560px;font-size:16px}