are position:static, so the shared ::before bridge would resolve
against .nav .wrap and span the full bar — overlapping every other mega item
and cross-triggering the wrong panel. Drop the bridge for mega and sit the
panel flush under the bar instead, so there is no gap left to bridge. */
.has-mega::before{display:none}
.sub-mega{transform:translateY(10px)}
.has-mega:hover>.sub-mega,.has-mega:focus-within>.sub-mega{transform:translateY(0)}
/* Submenu arrows: visible at rest, emphasised on hover (was hidden until hover,
which read as "missing" in the mega panels). */
.sub a .icon{opacity:.4;transform:none}
.sub a:hover .icon,.sub a:focus-visible .icon{opacity:1;transform:translateX(3px)}
/* Notch on the mega panels too. The panel spans the whole bar, so left:50%
would point at the middle of the navbar instead of the menu item that opened
it — --notch-x is set per item in site.js from the trigger's centre. */
.sub-mega::after{
display:block;
left:var(--notch-x,50%);
}
/* Menu items must fill the bar's height, otherwise there is a dead zone between
the bottom of the
and the panel: the pointer leaves the item on the way
down and the dropdown closes before it can be reached. */
.menu{align-items:stretch}
.menu>li{display:flex;align-items:center}
/* ...and the
itself must stretch within the bar, otherwise it stays
content-height (42px) centred in an 88px bar and its items cannot fill it. */
.menu{align-self:stretch}
/* ── navbar fit with nav-tools restored ───────────────────────────
Brand + 8 dropdown items + search + Apply Now no longer fit at 1240.
Tighten the menu, stop the brand shrinking into it, and hand over to the
burger a little earlier. */
.menu{gap:16px}
.menu>li>a{font-size:16px}
@media(min-width:1241px){
.nav .brand{flex:none}
.brand-txt b,.brand-txt span{white-space:nowrap}
}
/* the locality line is the widest part of the brand — drop it on mid screens */
@media(min-width:1241px) and (max-width:1560px){
.nav .brand-txt span{display:none}
}
@media(max-width:1240px){
.menu{display:none}
.burger{display:grid}
.sub,.sub-mega{display:none!important}
}
/* ── collapsible mobile drawer ────────────────────────────────────
Sub-links are collapsed by default so the drawer opens as a short list
rather than 100+ links filling the screen. */
.drawer .d-group{border-bottom:1px solid rgba(255,255,255,.1)}
.drawer .d-row{display:flex;align-items:center;gap:6px}
.drawer .d-row>a{flex:1;border-bottom:0}
.drawer .d-toggle{
flex:none;background:none;border:0;cursor:pointer;padding:10px 4px;
color:rgba(238,241,255,.6);display:grid;place-items:center;transition:color .2s;
}
.drawer .d-toggle:hover{color:var(--accent)}
.drawer .d-toggle .icon{width:18px;height:18px;stroke-width:2.2;transition:transform .3s}
.drawer .d-group.open .d-toggle{color:var(--accent)}
.drawer .d-group.open .d-toggle .icon{transform:rotate(180deg)}
.drawer .d-sub{
max-height:0;overflow:hidden;
transition:max-height .38s ease;
border-left:2px solid rgba(56,189,248,.35);
margin:0 0 0 4px;padding:0 0 0 14px;
}
.drawer .d-group.open .d-sub{max-height:1400px;padding-bottom:10px}
.drawer .d-sub a{
display:block;padding:9px 0;border-bottom:0;
font-size:14.5px;font-weight:400;color:rgba(238,241,255,.72);
}
.drawer .d-sub a:hover{color:var(--accent);padding-left:5px}
.drawer .d-sub .d-colhead{
display:block;font-family:var(--head);font-weight:600;font-size:10.5px;
letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
opacity:.75;margin:14px 0 2px;
}
.drawer .d-sub .d-colhead:first-child{margin-top:8px}
/* ── responsive utility bar ───────────────────────────────────────
Must stay exactly one 44px line at every width: the navbar is fixed at
top:44px, so if this bar wraps its content spills out underneath it. */
.topbar .wrap{
flex-wrap:nowrap;
overflow-x:auto;overflow-y:hidden;
scrollbar-width:none;-ms-overflow-style:none;
}
.topbar .wrap::-webkit-scrollbar{display:none}
.topbar ul{flex-wrap:nowrap}
.topbar a{white-space:nowrap}
@media(max-width:1100px){
.topbar{font-size:13px}
.topbar ul{gap:18px}
}
@media(max-width:940px){
.topbar ul{gap:14px}
/* shed the two links that duplicate the drawer soonest */
.topbar ul:not(.left) li:nth-child(4),
.topbar ul:not(.left) li:nth-child(5){display:none}
}
@media(max-width:820px){
/* every utility link is in the drawer; tap-to-call is not — keep contact */
.topbar ul:not(.left){display:none}
.topbar ul.left{display:flex;width:100%;justify-content:center;gap:26px}
.topbar .wrap{justify-content:center}
}
@media(max-width:480px){
.topbar{font-size:12.5px}
.topbar ul.left{gap:18px}
.topbar .icon{width:14px;height:14px}
}
@media(max-width:380px){
.topbar ul.left li:nth-child(2){display:none} /* email too long — phone only */
}
/* headline sizes at phone widths — "Veterinary & Animal" overran 390px and was
being clipped by body{overflow-x:hidden} */
@media(max-width:560px){
.hero h1{font-size:32px}
.phero h1{font-size:28px}
.sec-title{font-size:27px}
.hero p,.phero p{font-size:16px}
}
@media(max-width:400px){
.hero h1{font-size:28px}
.phero h1{font-size:25px}
.sec-title{font-size:24px}
}
/* Grid/flex children default to min-width:auto, so a column refuses to shrink
below its content's min-content width — the hero copy was forcing 419px into
a 346px viewport and overflowing. */
.hero-grid>*,.why-grid>*,.vc-grid>*,.split>*,.msg-grid>*,.fgrid>*{min-width:0}
.hero-copy,.msg-body,.prose{min-width:0}
.float{min-width:0}
.float span:not(.tick){min-width:0}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE HARDENING
═══════════════════════════════════════════════════════════════
Every rule below fixes a defect that was measured in a sized iframe at
320–1240px across all 71 pages, not a suspicion. Each block records what
overflowed and by how much, because `body{overflow-x:hidden}` hides the
symptom: the page never grows a scrollbar, it just silently clips whatever
ran off the right-hand edge.
Kept as one appended section rather than edited into the rules above so the
frozen design is still readable as it was, and so this pass can be reviewed
— or reverted — on its own. */
/* ── 1. Long words must not size the layout ──────────────────────
The single token "directoracademics@cuvas.edu.pk" has a min-content width of
297px. A grid or flex child is floored at its content's min-content width
unless told otherwise, so that one email address sized the whole sidebar
column to 354px inside a 304px container and hung 50px off the side of every
phone on /academics and /admissions.
Both halves are needed. min-width:0 alone lets the column shrink but pushes
the email out of its own card; overflow-wrap alone lets the word break but
only after the column has already been made too wide.
It must be `anywhere`, not `break-word`. The two are identical in where they
break a line — the difference is that only `anywhere` also shrinks the
element's min-content width, and min-content is precisely what was sizing
the column. `break-word` was tried here first and moved the overflow from
the sidebar into the card without removing it. */
.prose,.panel,.dept,.prog,.card,.notice,.ev,.fact,.person,.qa,.num,
.statline,.msg-body,.msg-card,.acc-a div,.crumbs,.tl-step,
footer,.drawer,.float,.cta-band{overflow-wrap:anywhere}
.side>*,.panel>*,.notices>*,.acc>*,.dgrid>*,.prog-grid>*,.newsgrid>*,
.ev-grid>*,.people>*,.facts>*,.statline>*,.qa-grid>*,.num-grid>*,
.floaters>*,.cta-band>*,.rowhead>*,.tl>*,.gal>*,.acts>*,
.why-list>*,.bullets>*,.linklist>*{min-width:0}
/* The same shape one level down: a fixed-width tick beside text in a flex row.
The tick is flex:none, so the text is the only thing that can absorb a
narrow screen, and it will not do so while it is floored at min-content. */
.why-list li,.prose ul.bullets li,.notice,.float,.ev,
.panel ul.linklist a,.dept .go,.prog .go,.card .go{overflow-wrap:anywhere}
.why-list li>*:not(.tick),.prose ul.bullets li>*:not(.tick),
.notice>*:not(.nfile),.float>*:not(.tick){min-width:0}
/* ── 2. auto-fit tracks wider than the viewport ──────────────────
repeat(auto-fit,minmax(280px,1fr)) cannot go below 280px, so on a 320px
phone — 264px of content between the gutters — the track overflowed by 16px
and every card in it was clipped. `min(N,100%)` keeps the intended card
width right up until the container is narrower than one card, then hands the
whole width over. Measured on .dgrid (15 pages) and .newsgrid (/news). */
.prog-grid{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}
.ev-grid{grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr))}
.facts{grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr))}
.dgrid{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.people{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.statline{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.newsgrid{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
/* ── 3. The closing CTA band ─────────────────────────────────────
.acts carries flex:none so the two buttons keep their own line on desktop.
flex:none is flex-shrink:0, so below ~470px the pair — 354px of buttons —
simply refused to shrink or wrap and drove the band up to 266px past the
screen edge. This was the single most widespread defect: 70 of 71 pages.
Below 560px the buttons stack full width instead, which is also the better
phone target. */
@media(max-width:560px){
.cta-band{padding:32px 22px}
.cta-band .acts{flex:1 1 100%;width:100%}
.cta-band .acts .btn{flex:1 1 auto;justify-content:center}
}
/* ── 4. Hero floaters ────────────────────────────────────────────
Two columns held all the way down to 320px. A .float needs 48px of padding
plus a 40px tick plus its longest word, so the pair stopped fitting at about
500px: at 360px the cards overflowed by 47px and "Veterinary Teaching
Hospital" spilled out of its own box. */
@media(max-width:640px){
.floaters{grid-template-columns:1fr}
}
/* ── 5. Statistics ───────────────────────────────────────────────
.num b is 52px, and "10,000+" needs ~180px of it. The two-column grid gives
135px on a 360px phone, so the number wrapped and left the "+" alone on a
line of its own. */
@media(max-width:560px){
.num b{font-size:38px}
.num span{font-size:13px}
}
@media(max-width:400px){
.num b{font-size:32px}
}
/* ── 6. Gutters ──────────────────────────────────────────────────
28px each side costs 56px of a 320px screen. Narrowing it is the one change
that gives every component below more room at once. The two decorations that
deliberately hang outside their parent are pulled flush at the same time —
they were relying on the gutter to absorb them, and would have been clipped
by the narrower one. */
@media(max-width:1100px){
.why-badge{right:0}
.msg-photo::after{right:0}
}
@media(max-width:480px){
.wrap{padding:0 20px}
.why-badge{padding:18px 22px}
.why-badge b{font-size:30px}
}
@media(max-width:380px){
.wrap{padding:0 16px}
}
/* ── 7. The brand lock-up ────────────────────────────────────────
Crest plus "CUVAS" plus "Bahawalpur, Pakistan" overran the bar by 15px at
320px and crowded the burger. The locality line is already dropped between
1241 and 1560px for the same reason; do it at the bottom end too. */
@media(max-width:400px){
.nav .brand-txt span{display:none}
.crest{height:44px;padding:7px 11px}
.crest img{height:30px !important;}
}
/* ── 8. Viewport units on phones ─────────────────────────────────
100vh is the viewport with the browser chrome retracted, so a 100vh hero is
taller than the screen while the address bar is showing. svh is the small
viewport — the one that is always visible. Browsers without it keep the
100vh above, so this is safe to state unconditionally. */
.hero{min-height:100svh}
/* ── 9. Notice / download / search rows ──────────────────────────
The row's furniture is all fixed width — a 44px file icon, a 19px arrow and
two 20px gaps — so 103px of a 288px card is spoken for before any text. The
title was down to 137px and wrapping every second word. Nothing overflowed;
it was just unreadable. */
@media(max-width:480px){
.notice{gap:13px;padding:16px 16px}
.notice .nfile{width:36px;height:36px;border-radius:10px}
.notice .nfile .icon{width:19px;height:19px}
.notice b{font-size:15.5px}
}
/* ── 10. Mosaic tile captions ────────────────────────────────────
The gallery keeps two columns down to the smallest screen, which leaves a
tile 135px wide. 22px of caption padding each side leaves 91px for a word
like "Convocation", which needs about 100. */
@media(max-width:480px){
.tile .lbl{padding:36px 14px 14px;font-size:15px;overflow-wrap:anywhere}
}
/* ── 11. Accordion headroom ──────────────────────────────────────
.acc-a opens to a fixed 520px. The longest answer on the site is 269px at
360px wide, but answers are editable from /admin and the same text takes
more lines as the screen narrows, so a phone is where this would clip first.
Raising the ceiling costs nothing: max-height only bounds the transition. */
@media(max-width:820px){
.acc-item.open .acc-a{max-height:1400px}
}
/* ── 12. Touch targets ───────────────────────────────────────────
The hero slide dots are 34x4px — accurate to the design, impossible to hit
with a thumb. Grow the hit area, not the dot. Vertically only: widening it
would push the pad past the dot's own box and into the neighbouring gap. */
.dot{position:relative}
.dot::after{content:"";position:absolute;inset:-16px 0}
/* ── 13. Developer credit ────────────────────────────────────────
A band below the footer, in the university red the Apply button uses. Its
own element rather than a row inside