/* Typography fixes (19 Oct, owner approved after the typography audit). Loaded by includes/footer.php on every page, after the other stylesheets.
   The ":not(#_x)" parts only raise specificity above the older per-page rules; they match every element. */

/* 1. Form fields are 16px on phones. Below 16px, iOS Safari zooms the whole page when a field is tapped. Desktop sizes are unchanged. */
@media(max-width:768px){
  input:not(#_x):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=hidden]),
  select:not(#_x),
  textarea:not(#_x){font-size:16px}
  /* a few hand-written forms (e.g. /bank/railway) set font-size in a style attribute, which only !important can override */
  input[style*="font-size"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=hidden]),
  select[style*="font-size"],
  textarea[style*="font-size"]{font-size:16px!important}
}

/* 2. Headings that inherited the body line-height (1.65) are too loose: results-strip titles, the FAQ sidebar title and the
   privacy-policy section headings. Normal heading line-height on the rest of the site is 1.1-1.2. */
.faq-sidebar-title,
.tkc-title,
.tk-results__title,
.tks-title{line-height:1.2}
h2.h3{line-height:1.3}

/* 2b. Card and notice copy that was 12.5px is 13.5px (secondary text should be about 14px; these were the smallest body-copy classes). */
.elig-desc,.tl-desc,.notice-text,.fac-bio,.tkc-quote,.tks-quote,.salary-perk,
#cc-app .cc-benefit-desc{font-size:13.5px}

/* 3. Small labels, tags and table headers that were 9.5-11.5px are 12px (nothing a student has to read should be smaller).
   Only classes whose every use was under 12px are listed, so no larger text is shrunk. */
.nbd-city,.tl-month,.syl-card-meta,.ftc-kind,.ftc-free,
.npd-header,.nbd-header,.npdf-header,.eqc-note,
.tkc-percentile,.hero-exam-tag,.prog-meta-label,.pc-stat-label,
.branch-chip,.branch-city-tag,.dc-status-pill,.dc-stat-label,
.topcol-tag,.cutoff-chip,.trend-bar-label{font-size:12px}

/* 4. The city tag on the branch cards (home, city and exam pages) is positioned in the top-right corner; on narrow phones (found at 320px, 20 Oct)
   it sat on top of the centred branch name ("VADODARA" over "Akota Branch"). On phones it now flows above the name instead. */
@media(max-width:480px){
  .branch-card .branch-city-tag{position:static;display:inline-block;align-self:center;margin:0 0 10px}
}

/* 6. Touch targets (20 Oct, owner approved the accessibility pass): breadcrumb links, hero exam tags, cutoff year buttons and plain phone / email
   links were 16-30px tall. The invisible ::after grows the tappable area to about 44px without changing how anything looks or lines up. */
.bc-bar a,.hero-exam-tag,.cutoff-year,
main a[href^="tel:"]:not(.btn):not([style*="position"]),
main a[href^="mailto:"]:not(.btn):not([style*="position"]){position:relative}
.bc-bar a::after,.hero-exam-tag::after,.cutoff-year::after,
main a[href^="tel:"]:not(.btn):not([style*="position"])::after,
main a[href^="mailto:"]:not(.btn):not([style*="position"])::after{content:"";position:absolute;inset:-9px -4px}

/* 7. Visible keyboard focus on every interactive element (the site had focus styles in some stylesheets only). */
a:focus-visible,button:focus-visible,summary:focus-visible,[role="button"]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible{
  outline:2px solid var(--ember2,#f5b84a)!important;outline-offset:2px}

/* 8. Respect "reduce motion" (device setting): no animated movement, content is simply shown. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,[class*="reveal"]{opacity:1!important;transform:none!important}
}

/* 9. Contrast: the blue (#3b82f6) used for text on the dark pricing cards was 4.49:1, just under the 4.5:1 minimum; slightly lighter blue. */
[style*="color:#3b82f6"]{color:#60a5fa!important}

/* 10. The small result cards in the MCA / bank / BBA hero cut names and details with "..." ("Priya Shar...", "Surat . BCA . ..."), most visibly at
   tablet width where the card is narrow. They now wrap onto a second line instead of being cut. */
.hsc-result-name,.hsc-result-detail{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.hsc-result-row>div:not(.hsc-result-icon){overflow:visible}

/* 11. The pill above the hero heading on the city pages ("CAT & IPMAT COACHING IN SURAT (VESU & ADAJAN)") is one unbreakable line and ran past
   the right edge of 360-390px phones. On phones it may wrap onto a second line and never exceeds the screen. */
@media(max-width:480px){
  .hero-kicker{white-space:normal!important;max-width:100%;box-sizing:border-box;line-height:1.35}
}

/* 12. Bank section audit (26 Oct): small uppercase labels written with inline 10-11.5px ("SBI PO", "Student Benefits", "Posts Covered On This Page") and the
   exam-card labels set at 10.5px by the bank hub page are 12px. Check-mark icon glyphs (no uppercase) are left as they are. */
[style*="font-size:10px"][style*="text-transform:uppercase"],
[style*="font-size:11px"][style*="text-transform:uppercase"],
#programs .prog-meta-label,#programs .prog-prep strong,
.prog-posts-label,.eqc-title,.exam-tab-meta,.results-bar-label{font-size:12px!important}
p[style*="font-size:11px"]{font-size:12px!important}

/* 13. Contrast: the dark purple (#7c3aed) used for small labels on the dark cards (e.g. "RRB OFFICER SCALE I") was about 2.9:1; the lighter violet already used elsewhere on the site. */
[style*="color:#7c3aed"]{color:#a78bfa!important}

/* 5. On 320px phones the header "Call Us" button ran 4px past the screen edge (it looked cut off). Slightly tighter button padding there. */
@media(max-width:340px){
  .nav-actions .btn{padding-left:10px;padding-right:10px}
  .nav-actions{gap:6px}
}