/* Sharada Vidyanikethana — design v3 (open, full-width, no boxes)
   Global layer loaded after style.css. Home-only parts live in home.css. */
:root{
  --green:#1c5a3f;--green2:#0f3b2a;--orange:#e0572d;--orange2:#c4461d;
  --sun:#f6b81c;--cream:#fdf7ea;--paper:#fffdf7;--sky:#e1f0f2;--blush:#fbe6da;--leaf:#e6f0d9;
  --ink:#1d2b24;--muted:#5f6f66;--line:#e3d7bd;--bg:#fffdf7;--alt:#fbf2de;
  --serif:"Fraunces",Georgia,serif;--sans:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--hand:"Caveat","Segoe Print",cursive;
  --side:clamp(20px,6vw,96px);--max:1240px;
}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.15}
h2{color:var(--green2)}
a{color:var(--green)}
.wrap{max-width:calc(var(--max) + 2*var(--side));padding-inline:var(--side)}

/* ---- header: plain full-width bar ---- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,253,247,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);box-shadow:none;border-radius:0;margin:0}
.site-header .wrap.bar{max-width:none;padding:6px var(--side);min-height:98px;gap:16px}
.brand{background:none;padding:0;margin:0;border-radius:0;box-shadow:none;align-self:center;flex:none}
.brand img{height:80px;width:auto}
nav{gap:2px}
nav>a,.dd>a{padding:10px 14px;border-radius:0;font-weight:700;font-size:15px;color:var(--ink);position:relative}
nav>a:hover,.dd>a:hover{background:none;color:var(--orange)}
nav>a.active,.dd>a.on{background:none;color:var(--green2)}
nav>a.active:after,.dd>a.on:after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:3px;background:var(--sun);display:block}
.dd .sub{top:100%;left:0;border-radius:0;border:1px solid var(--line);border-top:3px solid var(--sun);padding:6px;box-shadow:0 18px 30px rgba(40,40,20,.12)}
.dd:hover .sub,.dd:focus-within .sub{display:block}
.sub a:hover{background:var(--leaf);color:var(--green2)}
.hcta{gap:10px}
.call{white-space:nowrap;width:auto;height:auto;border-radius:0;display:flex;align-items:center;gap:8px;padding:8px 10px;color:var(--green2);font-weight:800;font-size:15px;text-decoration:none}
.call svg{color:var(--orange)}
.pill{background:var(--green);color:#fff!important;border-radius:0;padding:13px 26px;font-weight:800;letter-spacing:.01em;box-shadow:none;transition:background .2s}
.pill:hover{background:var(--green2);transform:none;box-shadow:none}
.pill.sun{background:var(--sun);color:var(--green2)!important}
.pill.sun:hover{background:#ffc83a}
@media (max-width:1180px){
  .call span{display:none}
  .burger{display:block;cursor:pointer;padding:14px;margin-left:auto}
  .burger span,.burger span:before,.burger span:after{display:block;width:24px;height:2px;background:var(--ink);position:relative;content:""}
  .burger span:before{top:-7px;position:absolute}.burger span:after{top:7px;position:absolute}
  .site-header nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--paper);padding:8px var(--side) 18px;border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(40,40,20,.12)}
  .nt:checked~nav{display:flex}
  .hcta .call{display:none}.hcta{margin-left:0}.bar{position:relative}
  nav>a,.dd>a{padding:13px 2px;border-bottom:1px solid var(--line)}
  nav>a.active:after,.dd>a.on:after{display:none}
  .dd .sub{position:static;box-shadow:none;border:0;display:block;padding:0 0 4px 14px;min-width:0;background:none}
  .dd:after{display:none}
}
@media (max-width:520px){.brand img{height:58px}.hcta .pill{padding:10px 14px;font-size:13px}.site-header .wrap.bar{min-height:76px}}

/* ---- open sections (no cards, no rounded boxes) ---- */
.sec{padding:clamp(52px,7vw,104px) 0}
.sec.alt{background:var(--alt)}
.page-hero,.ab-hero,.mg-hero,.ac-hero{border-radius:0;margin:0}
.stats,.ab-stats,.ab-cta,.mg-quote,.ac-band,.cta{border-radius:0;margin:0}
.ab-qb{max-width:none}
.page-hero{padding:clamp(54px,7vw,96px) 0 clamp(46px,6vw,80px)}
.kicker{color:var(--orange);letter-spacing:.14em}
.card,.ab-gc>div,.ac-g3 article{border-radius:0;box-shadow:none;border:0;border-top:2px solid var(--green);background:transparent;padding:22px 0 8px}
.card:hover{transform:none;box-shadow:none}
.enq{border-radius:0;box-shadow:none;background:var(--paper);padding:26px}
.ab-cta{background:var(--orange)}
.cic{background:none;border-radius:0;width:auto;height:auto;color:var(--orange);margin-bottom:8px}
.gal img,.rimg img,.glance-in img,.ab-i2 img,.ab-ac img,.mg-p2 img,.mg-team img,.blob img,.events img,.figure img{border-radius:0;box-shadow:none}
.tw{border-radius:0}

/* ---- footer ---- */
.site-footer{background:var(--green2);border-left:0;border-radius:0;margin:0;padding:clamp(40px,5vw,70px) 0 0;color:#d6e4da;position:relative;overflow:hidden}
.site-footer .cols{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(22px,3vw,44px);position:relative;max-width:calc(var(--max) + 2*var(--side));margin:0 auto;padding-inline:var(--side)}
.site-footer h3{font-family:var(--serif);font-size:19px;margin:0 0 12px;color:#fff}
.site-footer .flogo{display:inline-block;background:#fff;padding:12px 18px;margin-bottom:14px}
.site-footer .flogo img{height:72px;width:auto}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{color:var(--sun)}
.site-footer .soc{display:flex;gap:10px;margin-top:14px}
.site-footer .soc a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.35)}
.site-footer .soc a:hover{background:var(--sun);border-color:var(--sun);color:var(--green2)}
.site-footer .copy{border-top:1px solid rgba(255,255,255,.14);color:#9fbaa9;margin-top:34px;padding:18px var(--side);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:860px){.site-footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.site-footer .cols{grid-template-columns:1fr}}

/* floating helpers */
.notice{background:var(--green);left:16px;bottom:16px;border-radius:0}
.wa{right:16px;border-radius:0}
.modal{background:rgba(15,40,28,.72)}
.mbox{border-radius:0;padding:0;overflow:hidden;text-align:left}
.mbox img{border-radius:0;margin:0;width:100%}
.mbox .mtxt{padding:22px 26px 26px}
.mbox .mtxt .hand{font-family:var(--hand);font-size:26px;color:var(--orange);margin:0 0 4px;line-height:1}
.mbox .mtxt h3{margin:0 0 8px;font-size:26px;color:var(--green2)}
.mbox .mtxt p{margin:0 0 16px;color:var(--muted)}
#px{position:absolute;right:12px;top:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,253,247,.92);font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
.drawer{border-radius:0}
@media (max-width:460px){.site-header .wrap.bar{padding-inline:14px;gap:8px}.brand img{height:50px}.burger{padding:10px}.hcta .pill{padding:9px 12px;font-size:12.5px;white-space:nowrap}}

/* header: fit eight menu items on laptop widths */
@media (min-width:1181px) and (max-width:1500px){
  nav>a,.dd>a{padding:10px 9px;font-size:14.5px}
  nav>a.active:after,.dd>a.on:after{left:9px;right:9px}
  .call{padding:8px 4px;font-size:14px;gap:6px}
  .site-header .wrap.bar{gap:8px}
}

/* facilities page: hostel life */
.hl{background:var(--alt);padding:clamp(48px,6vw,84px) 0}
.hl__h{max-width:40em;margin:0 auto clamp(28px,4vw,44px);text-align:center}
.hl__h h2{font-size:clamp(30px,3.6vw,46px);line-height:1.15;margin:0 0 14px}
.hl__h p{margin:0 auto;font-size:clamp(16px,1.25vw,17.5px);line-height:1.65;color:#42524a;max-width:36em}
.hl__g{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
.hl__g>div{background:#fff;border:1px solid #b9d6c4;border-radius:16px;padding:24px 22px;box-shadow:0 10px 30px rgba(28,90,63,.08);transition:transform .3s ease,box-shadow .3s ease}
.hl__g>div:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(28,90,63,.16)}
.hl__g b{display:block;font-family:var(--serif);font-size:20px;color:var(--green2);margin-bottom:6px}
.hl__g span{display:block;font-size:15.5px;line-height:1.55;color:#42524a}
@media (max-width:900px){.hl__g{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.hl__g{grid-template-columns:1fr}}

/* phone number beside the icon where there is room; icon only on narrower laptops */
@media (min-width:1181px) and (max-width:1340px){.call span{display:none}}

/* about: figures */
.ab-nums{background:var(--green2);color:#fff;padding:clamp(40px,5vw,64px) 0}
.ab-nums dl{margin:0;display:grid;grid-template-columns:repeat(4,1fr)}
.ab-nums dl>div{padding:6px clamp(16px,2.4vw,36px);border-left:1px solid rgba(255,255,255,.22)}
.ab-nums dl>div:first-child{border-left:0;padding-left:0}
.ab-nums dt{font-weight:800;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#cfe3d6;margin-bottom:4px}
.ab-nums dd{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(40px,5vw,68px);line-height:1.05;color:var(--sun)}

@media (max-width:900px){.ab-nums dl{grid-template-columns:1fr 1fr;row-gap:22px}.ab-nums dl>div:nth-child(3){border-left:0;padding-left:0}}

/* section heading used on older inner pages, same scale as the home page */
.h-lg{font-size:clamp(30px,3.6vw,46px);line-height:1.15;letter-spacing:-.015em;margin:0 0 14px}
.kicker{font-weight:800;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}

/* keyboard focus, phone tap targets and form text size (16px stops iOS zooming in on focus) */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.skip:focus{outline-offset:0}
@media (max-width:900px){
  input,select,textarea,.adm input,.adm select,.adm textarea{font-size:16px!important}
  .crumb a{display:inline-block;padding:10px 0}
  .whole__g a,.news__all,.ne__l,.ne h3 a,.ad-contact a,.fac__more a,.nc a,.more a:not(.pill),.cl-docs__g a{display:inline-block;padding:9px 0}
  .ne h3 a{display:inline}
  .ne h3{line-height:1.3}
  .play,.tn{min-height:40px}
  .site-footer a{display:inline-block;padding:5px 0}
}

/* 404 page */
.nf{padding:clamp(72px,10vw,150px) 0}
.nf p{max-width:34em;font-size:clamp(16px,1.3vw,18px);line-height:1.65;color:#42524a}
.nf__l{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px}
.nf__a{font-weight:800;color:var(--orange2);text-decoration:none;padding:9px 0}

/* floating buttons become small round icons on phones so they stop covering the text */
@media (max-width:600px){
  .notice{font-size:0;gap:0;padding:0;width:48px;height:48px;justify-content:center;border-radius:50%;left:12px;bottom:12px}
  .notice svg{width:22px;height:22px}
  .wa{right:12px;bottom:12px;width:48px;height:48px;padding:0;justify-content:center;border-radius:50%}
  .site-footer .copy{padding-bottom:76px}
}

/* very small phones (320px) */
@media (max-width:420px){
  .chips{grid-template-columns:repeat(2,1fr)}
  .cl-jump{grid-template-columns:1fr}
}
@media (max-width:420px){.ab-nums dd{font-size:clamp(30px,10vw,40px)}.ab-nums dl>div{padding-inline:12px}.ab-nums dt{letter-spacing:.1em}}

/* "Latest from Sharada" popup: five newest stories, auto-advancing */
.pop{position:fixed;inset:0;z-index:400;background:rgba(7,20,16,.72);display:flex;align-items:center;justify-content:center;padding:18px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pop[hidden]{display:none}
.pop__box{position:relative;width:min(560px,100%);background:#fff;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4);animation:popin .45s ease}
@keyframes popin{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.pop__h{padding:15px 56px 13px 22px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange2);border-bottom:1px solid var(--line)}
.pop__x{position:absolute;top:6px;right:8px;width:42px;height:42px;border:0;background:none;font-size:30px;line-height:1;color:var(--ink);cursor:pointer;z-index:3}
.pop__v{position:relative;aspect-ratio:4/3.6}
.pop__s{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s;color:#fff;text-decoration:none}
.pop__s.on{opacity:1;visibility:visible}
.pop__s img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.pop__s:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,40,25,.94) 0,rgba(9,40,25,.6) 38%,rgba(9,40,25,0) 68%)}
.pop__t{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px;display:block}
.pop__t small{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sun)}
.pop__t b{display:block;margin:7px 0 10px;font-family:var(--serif);font-size:clamp(19px,2.4vw,24px);font-weight:600;line-height:1.25}
.pop__t em{font-style:normal;font-size:14px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.6)}
.pop__f{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.pop__a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:18px;cursor:pointer;color:var(--ink)}
.pop__a:hover{background:var(--green2);color:#fff}
.pop__d{display:flex;gap:10px}
.pop__d button{position:relative;width:9px;height:9px;border-radius:5px;border:0;padding:0;background:#cfd3d0;cursor:pointer;transition:width .3s,background .3s}
.pop__d button:after{content:"";position:absolute;inset:-14px -4px}
.pop__d button.on{width:26px;background:var(--orange)}
.pop__p{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--sun)}
@media (max-width:560px){.pop{padding:12px;align-items:flex-end}.pop__v{aspect-ratio:1/1.05}.pop__t{padding:18px}}
@media (prefers-reduced-motion:reduce){.pop__box{animation:none}.pop__s{transition:none}}

/* welcome block on phones: full-width photo, then a plain full-width text panel (no overlap card) */
@media (max-width:900px){
  .welcome{padding:0 0 40px}
  .welcome .welcome__g{display:flex;flex-direction:column}
  .welcome .welcome__img{order:-1}
  .welcome>.wrap{padding-inline:0}
  .welcome .welcome__img{width:100%;margin:0}
  .welcome .welcome__img img{aspect-ratio:4/3;width:100%}
  .welcome .welcome__txt{margin:0;border:0;box-shadow:none;background:#fff;padding:30px var(--side,20px) 34px;border-top:4px solid var(--sun)}
  .welcome .welcome__txt .eyebrow{font-size:12.5px;letter-spacing:.14em}
  .welcome .welcome__txt .statement{font-size:clamp(30px,8.2vw,38px);line-height:1.15;margin:8px 0 16px}
  .welcome .welcome__txt p.lead{font-size:16.5px;line-height:1.7}
  .welcome .more .pill{display:block;width:100%;text-align:center;padding:15px 22px}
  .mg2.welcome .welcome__img,.ab-story.welcome .welcome__img{padding-inline:0}
}
