/**
 * MC-KOS site chrome — header, logo, bilingual navigation, footer.
 *
 * SEPARATE FROM public.css ON PURPOSE. public.css is enqueued by the
 * shortcodes, so it only arrives on pages that render one. The frame around
 * the page has no such condition: every page has a header and a nav, and since
 * 4 Aug 2026 the header holds an <img> logo that has no size of its own. On
 * /about/ and the legal pages — which carry no shortcode — the old arrangement
 * left seven .mckos-nav-hi spans unstyled, and would have left the logo to
 * expand to whatever an SVG with no intrinsic size expands to.
 *
 * This file is loaded on every front-end view. Keep it small, and keep
 * component styling in public.css.
 *
 * @package MCKOS
 */

/* --- Bilingual navigation -------------------------------------------------
   The Hindi lives in the menu item's description field and is wrapped in
   .mckos-nav-hi by MCKOS_Public::nav_bilingual_label(). Here it becomes a
   second line under the English label.

   GeneratePress sets `line-height:60px` on nav links to give the bar its
   height. That collapses a two-line label, so the height is rebuilt from
   line-height + padding instead — deliberately landing back near 60px so the
   logo and sticky header keep their alignment.

   Scoped to `> ul > li > a` — TOP LEVEL ONLY, matching the PHP filter.

   BREAKPOINT IS 1030px, NOT GeneratePress's 768px. SEVEN items need 822px of
   nav beside the site title, and with the header's 40px padding each side that
   first fits at 1021px. An earlier version of this file hid the Hindi between
   769 and 900px to "save width" — that was wrong: the Hindi sits BELOW the
   English, and English is the wider line on all seven items, so hiding it saves
   nothing at all. The bar was still too wide, just shorter. The real fix is to
   reach the hamburger sooner, which MCKOS_Public::nav_breakpoint_mobile() does
   through GeneratePress's own filters. */
@media (min-width: 1091px) {
  .main-navigation .main-nav > ul > li > a{
    line-height:1.2;padding-top:12px;padding-bottom:12px;
    display:flex;flex-direction:column;justify-content:center}
  .mckos-nav-hi{display:block;font-size:12px;line-height:1.25;font-weight:400;
    opacity:.7;margin-top:2px;letter-spacing:.01em}
}

/* Hamburger menu — a vertical list, so there is room for both lines, and this
   is where a Hindi reader most needs them. */
@media (max-width: 1090px) {
  .main-navigation .main-nav > ul > li > a{line-height:1.25;padding-top:11px;padding-bottom:11px}
  .mckos-nav-hi{display:block;font-size:12.5px;line-height:1.3;font-weight:400;opacity:.7;margin-top:2px}
}

/* Site title — GONE, replaced by the logo on 4 Aug 2026.
   MCKOS_Public hides GeneratePress's text title outright
   (generate_site_title_output), so the .main-title rules that used to live
   here styled an element that is no longer printed. They are removed rather
   than left commented: dead CSS that carries a reason reads like a live rule.
   The reason itself is worth keeping, though, because it explains a number
   further up — the old text title measured 119px at 20px, and every
   breakpoint in this file descends from a measurement like that one. The logo
   is measured the same way, just larger. */


/* --- Header logo ----------------------------------------------------------
   Replaces the text site title (MCKOS_Public::brand_logo). The artwork is
   "0 0 261 48" — a ratio of 5.438:1, NOT the 3.6:1 the direction sheet
   quoted. That difference is the whole story of the header width, because the
   logo sits beside a nav that needs 822px and does not shrink:

       height 32px  ->  174px wide   <- chosen
       height 28px  ->  152px
       height 24px  ->  131px
       height 22px  ->  120px        <- brand minimum; same width as the old text

   22px would have kept the 1030px breakpoint untouched, and it was rejected:
   it is the floor the brand guide sets for cramped placements, not a size for
   the site's own masthead, and in a 100px-tall header it reads as an
   afterthought. 32px costs 55px of bar and moves the breakpoint to 1090 —
   which costs nothing real, because no common device sits between 1031 and
   1089.

   width:auto with an explicit height keeps the ratio the artwork's business;
   the PHP sends matching width/height attributes so the box exists before the
   file loads. Both must move together — see MCKOS_Public::LOGO_HEIGHT. */
.site-logo{display:flex;align-items:center}
.site-logo img{height:32px;width:auto;display:block}

/* Phones: the nav is a hamburger here, so the only competition for width is
   the toggle. 26px keeps the wordmark legible without crowding it. */
@media (max-width:600px){.site-logo img{height:26px}}

/* --- Footer honesty line (MCKOS_Public::footer_trust_line) ----------------
   YAHAN HAI, public.css me NAHI — aur wajah wahi hai jo is file ke banne ki
   thi. Ye line har page par chhapti hai, /about/ aur /privacy/ par bhi, jahan
   koi shortcode nahi hai aur public.css load hi nahi hoti. Wahan rakhte to wo
   theek un pages par bina CSS ke padi rehti jahan sirf yahi ek line hoti hai.

   Year is DELIBERATELY absent from the text — see
   MCKOS_Data_Notice::trust_line(). */
/* Trust line ka roop ab neeche FOOTER wale block me hai -- wo teeno cheezon
   (dono <details>, trust line, copyright) ko ek saath tay karta hai. Yahan
   alag rakhne par wo teen jagah me se ek hoti aur unme se do purani pad
   jaatin (D-72). */

/* Footer ki aakhri patti THEME ki flex row hai — `.inside-site-info` par
   flex-direction:row aur flex-wrap:NOWRAP. Desktop par 1140px me dono cheezein
   aaram se baithti hain. 375px par nahi: trust line 229px me dab kar chaar line
   ki ho jaati thi aur copyright 86px me do line ka, dono thik 259px par ek
   doosre se sat kar — beech me ek pixel ka bhi gap nahi. Box-level par ye
   'overlap' nahi tha, par 11.5px text ke saath aankh ko chadha hua hi dikhta
   hai, aur padha nahi jaata.
   Column banane par: trust line 315px/3 line, copyright 143px/1 line, patti
   124px se 141px. Page ka overflow phir bhi 0. */
@media (max-width:600px){.site-info .inside-site-info{flex-direction:column;align-items:flex-start;gap:10px}}

/* ══ FOOTER ══════════════════════════════════════════════════════════════
   Sab EK KE NEECHE EK, baayin kinaar se -- 375 par bhi aur 1280 par bhi.

   JAD YE THI: GeneratePress ka `.inside-site-info` ek EK-PANKTEE KA FLEX hai
   (`row` + `justify:center`), aur hamari teeno cheezein uske SEEDHE bachche
   hain. Isliye 1280 par wo BAGAL-BAGAL baith gayin -- naapa:

     .mckos-foot      x=123   chaudai 104
     .mckos-trustline x=254   chaudai 760
     .copyright-bar   x=1027  chaudai 143

   Teen cheezein teen jagah, teen aakaar -- ek copyright patti jisme teen
   cheezein thoos di gayi hon.

   375 PAR BHI YE TOOTA HUA THA aur humne dekha nahi: theme wahan `column`
   kar deta hai, par `.mckos-foot` sirf 104px chaudi aur x=136 par thi --
   beech me tairti hui -- jabki baaki do x=30 par baayin kinaar se.
   Ab tak har naap 375 par hui thi, aur Founder ka screenshot 1280 ka tha.

   Trust line BADE font ki NAHI thi (naapa: 13px vs summary ka 14px) -- wo
   760px CHAUDI thi. Asar sahi dikha tha, kaaran alag nikla. Ab wo sabse
   chhoti hai (12.5px): wo baareek akshar wali baat hai, sheershak nahi. */
.inside-site-info{display:block;text-align:left;max-width:760px;margin:0 auto;padding:18px 20px}

/* EK LAKEER, DO NAHI -- dono <details> ke POORE GROUP ke neeche.
   Pehle har `<details>` par apni border thi, to Quick Links ke neeche ek
   adhoori lakeer dikhti thi aur Trust ke neeche nahi. */
.mckos-foot{max-width:none;margin:0;border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14)}
.mckos-flinks{border:0}
.mckos-flinks>summary{font-size:15px;font-weight:600;min-height:46px;display:flex;
  align-items:center;justify-content:flex-start;gap:8px;text-align:left;
  list-style:none;cursor:pointer}
.mckos-flinks>summary::-webkit-details-marker{display:none}
/* `▸` desktop par lagbhag dikhta hi nahi tha. `＋`/`−` har jagah saaf hai
   aur "khulta hai" wo baat khud keh deta hai. */
.mckos-flinks>summary::before{content:"＋";display:inline-block;width:16px;
  font-size:15px;line-height:1;opacity:.75}
.mckos-flinks[open]>summary::before{content:"−"}
.mckos-flinks ul{list-style:none;margin:0 0 12px;padding:0 0 0 24px;
  display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:flex-start}
.mckos-flinks li{font-size:14px}

/* 13px, 12.5 nahi -- do niyam takra rahe the aur Founder ne faisla diya.
   Section 14 ka check kehta hai ki chaar chhoti class 13 se neeche na jaayein
   (mobile par wahi sabse chhoti thin), aur ye line hamari sabse zaroori baat
   har pannne par kehti hai. Wo HAAVI font se nahi, CHAUDAI se thi (760px) --
   aur wo ab max-width se sambhal gaya. Halka karna ho to opacity se, font se
   nahi. */
.mckos-trustline{max-width:var(--mckos-read);margin:14px 0 0;font-size:13px;
  line-height:1.55;text-align:left;opacity:.78}
.copyright-bar{text-align:left;font-size:13px;margin-top:12px;opacity:.7}


/* ══ PADHNE WALA vs DEKHNE WALA (D-90) ═══════════════════════════════════
   Naapa gaya (7 Aug 2026), 1280 par, har pannne par:

     /                    sabse lambi panktee 178 akshar
     /cutoffs/            177        /contact/       172  (10 panktee)
     /counselling/raj/    161        /college/…      158
     /about/ /how-we-verify/ 137     /disclaimer/    130

   Padhne ki seema 65-75 akshar hai. HAR pannaa dugni se zyada par tha.

   AUR YE SIRF DESKTOP PAR TOOTA THA. 375 par har text 343px me hai, yaani
   ~60 akshar -- bilkul sahi seema me. "Mobile ne humein bacha rakha tha:
   chaudai hi nahi thi ki ye dikhe." (D-88)

   NIYAM: "JIS PAR LAGAOGE WAHI BANDHEGA", ulta nahi. Sab kuch bandh kar kuch
   chhod dena khatarnak hai -- kal koi naya block banega aur wo CHUP-CHAAP
   bandh jaayega. Isliye ek class, aur wo sirf padhne wali cheezon par.

     PADHNE WALE (bandhe)  : paragraph, lede, note, citation, trust line,
                             legend, disclaimer
     DEKHNE WALE (poore)   : table, grid, card, dropdown, form field,
                             journey card, state chip

   BINA-SHORTCODE WALE PANNE ALAG HAIN. /about/, /privacy/, /disclaimer/,
   /how-we-verify/ ka content SERVER par likha Gutenberg hai (D-77) -- unke
   paragraph par hum class laga hi nahi sakte. Wahan poora `.entry-content`
   bandha jaata hai, kyunki us pannne par padhne ke alawa kuch hai hi nahi.

   Ye chrome.css me hai, public.css me nahi (D-89): ye niyam HAR pannne par
   chahiye, aur public.css sirf shortcode wale pannon par ladti hai. */
/* `ch`, `rem` NAHI -- aur ye naap se badla. Lakshya AKSHAR hai, pixel nahi:
   `42rem` = 672px har jagah, to 13px wali panktee 109 akshar ki ho jaati thi
   aur 17px wali 60 ki. `ch` font ke saath badalta hai, isliye har aakaar par
   lagbhag ek jaisi panktee banti hai.

   52, 68 nahi: `1ch` = "0" ki chaudai, jo aam chhote akshar se CHAUDI hai.
   Naapa -- 68ch asal me 94 akshar deta hai. 52ch par sabse lambi panktee
   72 akshar ki hai, aur 75 se ooper ek bhi nahi. */
:root{ --mckos-read: 52ch; }

.mckos-read{max-width:var(--mckos-read)}

/* Bina-shortcode wale panne: poora content padhne ke liye hai.
   `body` par ek class chahiye -- neeche PHP se lagti hai. */
body.mckos-textpage .entry-content>*{max-width:var(--mckos-read)}
/* ...par unme bhi jo DEKHNE wali cheez ho (table, image) wo poori rahe. */
body.mckos-textpage .entry-content>table,
body.mckos-textpage .entry-content>figure,
body.mckos-textpage .entry-content>.wp-block-table,
body.mckos-textpage .entry-content>.wp-block-image{max-width:none}

/* ══ TABLE KA ISHARA ══════════════════════════════════════════════════════
   Sawaal "screen kitni badi hai" NAHI, "IS DABBE me table samati hai ya
   nahi" hai -- isliye container query, media query nahi.

   Ishara default me CHHUPA hai aur query use DIKHATI hai. Jis browser me
   container query na chale, ye kabhi nahi dikhega -- yaani aaj jaisa hi.
   Ulta likhne par wo 1280 par bhi dikhta, jahan kuch chhupa hi nahi. */
.mckos-tablebox{container-type:inline-size}
.mckos-tablewrap>.mckos-table{min-width:560px}
.mckos-scrollhint{display:none;margin:0 0 6px;font-size:13px;line-height:1.4;color:#5c6670}
@container (max-width: 559px){
  .mckos-scrollhint{display:block}
}