/* =========================================================
   Tech Mech – additions for PHP features (blog post, pagination,
   student verification). Uses the tokens defined in style.css.
   ========================================================= */

/* ---------- Pagination ---------- */
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:40px}
.pager a,.pager span{min-width:42px;height:42px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1.5px solid var(--line);color:var(--navy);font-weight:600;font-size:14px;background:#fff}
.pager a:hover{border-color:var(--green);color:var(--green-d)}
.pager .is-current{background:var(--green);border-color:var(--green);color:#fff}
.blog-filter{margin-bottom:26px;color:var(--navy)}
.blog-filter a{color:var(--green-d);font-weight:600}
.empty-note{padding:40px;text-align:center;background:var(--soft);border-radius:var(--r);color:var(--muted)}
.btn-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* ---------- Single blog post ---------- */
.pbanner--post h1{max-width:900px}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;opacity:.95}
.post-meta a{text-decoration:underline;text-underline-offset:3px}
.article-wrap{padding-top:50px}
.article{max-width:860px}
.article__hero{margin:0 0 34px;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.article__hero img{width:100%;height:auto}
.article__body{color:var(--text);font-size:16px;line-height:1.8;overflow-wrap:anywhere}
.article__body>*+*{margin-top:1.05em}
.article__body h1,.article__body h2,.article__body h3,.article__body h4,.article__body h5{color:var(--navy);line-height:1.3;margin-top:1.6em;font-weight:700}
.article__body h2{font-size:clamp(22px,2.4vw,28px)}
.article__body h3{font-size:clamp(19px,2vw,22px)}
.article__body h4{font-size:18px}
.article__body a{color:var(--green-d);text-decoration:underline;text-underline-offset:3px}
.article__body ul,.article__body ol{padding-left:1.4em}
.article__body ul{list-style:disc}
.article__body ol{list-style:decimal}
.article__body li+li{margin-top:.35em}
.article__body img{height:auto;border-radius:10px;margin:0 auto}
.article__body figure{margin:1.4em 0}
.article__body figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:8px}
.article__body blockquote{border-left:4px solid var(--green);background:var(--green-xl);padding:16px 20px;border-radius:0 8px 8px 0;color:var(--navy)}
.article__body table{width:100%;border-collapse:collapse;display:block;overflow-x:auto;font-size:14px}
.article__body th,.article__body td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.article__body th{background:var(--soft);color:var(--navy)}
.article__body iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:10px}
.article__tags{margin-top:34px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--navy);font-weight:600}
.chip{display:inline-block;background:var(--green-l);color:var(--green-d);padding:4px 12px;border-radius:30px;font-size:13px;font-weight:600}
.article__back{margin-top:36px}

/* ---------- Student verification ---------- */
.verify__in{max-width:860px}
.verify__form{background:#fff;border:1px solid var(--line);box-shadow:var(--sh);border-radius:var(--r);padding:28px}
.verify__form label{display:block;color:var(--navy);font-weight:700;margin-bottom:10px;font-size:16px}
.verify__row{display:flex;gap:12px}
.verify__row input{flex:1;min-width:0;height:52px;border:1.5px solid var(--line);border-radius:8px;padding:0 16px;font-size:16px;letter-spacing:.5px;text-transform:uppercase;color:var(--navy)}
.verify__row input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(43,162,76,.15)}
.verify__row .btn{height:52px}
.verify__hint{margin-top:10px;font-size:13px;color:var(--muted)}
.verify__multi{margin-top:26px;padding:14px 18px;border-radius:8px;background:#fff7e6;color:#7a4b00;border:1px solid #ffe0a3}
.vresult{margin-top:26px;border-radius:var(--r);border:1px solid var(--line);background:#fff;padding:26px;box-shadow:var(--sh);border-top:5px solid var(--muted)}
.vresult--valid{border-top-color:var(--green)}
.vresult--expired{border-top-color:#d98a00}
.vresult--revoked{border-top-color:#c62828}
.vresult--none,.vresult--warn{border-top-color:var(--navy)}
.vresult h2{color:var(--navy);font-size:clamp(18px,2.2vw,22px);line-height:1.35;margin-top:8px}
.vresult p{margin-top:8px}
.vresult a{color:var(--green-d);font-weight:600}
.vbadge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:30px;font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.vbadge--valid{background:var(--green-l);color:var(--green-d)}
.vbadge--expired{background:#fff3dc;color:#9a5d00}
.vbadge--revoked{background:#fdecec;color:#b71c1c}
.vbadge--none{background:var(--soft);color:var(--navy)}
.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px;margin-top:20px}
.vgrid div{border-bottom:1px dashed var(--line);padding-bottom:10px}
.vgrid dt{font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:600}
.vgrid dd{color:var(--navy);font-weight:600;font-size:15px;overflow-wrap:anywhere}
.vnote{color:#b71c1c;font-weight:600}
.verify__info{margin-top:34px;padding:24px;border-radius:var(--r);background:var(--soft)}
.verify__info h3{color:var(--navy);margin-bottom:10px}
.verify__info a{color:var(--green-d);font-weight:600}
.verify__info .checks li{align-items:flex-start}
.verify__info .checks li svg{margin-top:3px}
@media (max-width:560px){
  .verify__form{padding:20px}
  .verify__row{flex-direction:column}
  .verify__row input{flex:none;width:100%}
  .verify__row .btn{width:100%}
  .vgrid{grid-template-columns:1fr}
  .vresult{padding:20px}
}

/* =========================================================
   Enquiry forms (Contact Us page + "Enquire Now" pop-up)
   ========================================================= */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.cform2{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:28px;align-items:stretch}
.cpanel{position:relative;overflow:hidden;border-radius:20px;padding:36px 32px;color:#dbe6f6;
  background:radial-gradient(120% 90% at 100% 0%,rgba(43,162,76,.35) 0,transparent 55%),linear-gradient(160deg,var(--navy) 0%,var(--navy-d) 100%);box-shadow:var(--sh-h)}
.cpanel::after{content:"";position:absolute;right:-70px;bottom:-70px;width:220px;height:220px;border-radius:50%;border:28px solid rgba(255,255,255,.05)}
.cpanel .eyebrow{color:#7fd99a}
.cpanel h3{color:#fff;font-size:clamp(22px,2.3vw,28px);line-height:1.25;margin-bottom:10px}
.cpanel>p{font-size:14.5px;opacity:.9}
.cpanel__list{margin:26px 0;display:grid;gap:18px;position:relative;z-index:1}
.cpanel__list li{display:flex;gap:14px;align-items:flex-start}
.cpanel__list li>span{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;color:#7fd99a;font-size:19px}
.cpanel__list small{display:block;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:#9fb3d1}
.cpanel__list a,.cpanel__list p{color:#fff;font-weight:600;font-size:15px;line-height:1.5}
.cpanel__list p{font-weight:500;font-size:14px}
.cpanel__list a:hover{color:#7fd99a}
.cpanel__btns{display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:1}
.cpanel__wa{background:#fff;color:var(--navy)}
.cpanel__wa svg{color:#25d366}
.cpanel__wa:hover{background:#25d366;color:#fff}
.cpanel__wa:hover svg{color:#fff}
.cpanel__note{display:flex;gap:8px;align-items:center;margin-top:22px;font-size:12.5px;color:#9fb3d1;position:relative;z-index:1}
.cpanel__note svg{color:#7fd99a;font-size:16px}

.iform{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;align-content:start;background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--sh)}
.iform__head{grid-column:1/-1}
.iform__head h3{color:var(--navy);font-size:clamp(22px,2.3vw,26px);margin-bottom:4px}
.iform__head p{font-size:14px;color:var(--muted)}
.iform .req{color:#d93025}
.ifield{min-width:0;border:0;margin:0;padding:0;position:relative}
.ifield--full{grid-column:1/-1}
.ifield>label,.ifield>legend{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:7px;padding:0}
.ifield>label small,.ifield>legend small{font-weight:400;color:var(--muted)}
.ictrl{position:relative}
.ictrl>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:17px;color:#9aa8bb;pointer-events:none;transition:color .25s}
.ictrl--area>svg{top:15px;transform:none}
.iform .ictrl input,.iform .ictrl select,.iform .ictrl textarea{width:100%;min-height:50px;padding:12px 14px 12px 44px;border:1.5px solid var(--line);border-radius:12px;background:#fbfcfe;color:var(--navy);font-size:15px;outline:none;transition:border-color .25s,box-shadow .25s,background .25s;box-shadow:none}
.iform .ictrl textarea{resize:vertical;min-height:120px;line-height:1.6}
.iform .ictrl--select select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230b2a5b' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.iform .ictrl input::placeholder,.iform .ictrl textarea::placeholder{color:#a3afc0}
.iform .ictrl input:hover,.iform .ictrl select:hover,.iform .ictrl textarea:hover{border-color:#cfd8e3}
.iform .ictrl input:focus,.iform .ictrl select:focus,.iform .ictrl textarea:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 4px rgba(43,162,76,.14)}
.ictrl:focus-within>svg{color:var(--green)}
.ifield.is-invalid .ictrl input,.ifield.is-invalid .ictrl textarea,.ifield.is-invalid .ictrl select{border-color:#d93025;background:#fff8f7}
.ifield.is-invalid .ictrl>svg{color:#d93025}
.ierr{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12.5px;color:#c5221f;font-weight:500}
.ierr::before{content:"!";display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#d93025;color:#fff;font-size:10px;font-weight:700;flex-shrink:0}
.icount{position:absolute;right:4px;top:0;font-size:11.5px;color:var(--muted)}

.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;width:1px;height:1px}
.pill span{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1.5px solid var(--line);border-radius:40px;background:#fbfcfe;color:var(--navy);font-size:13.5px;font-weight:500;transition:all .2s;user-select:none}
.pill span svg{font-size:15px;color:#9aa8bb;transition:color .2s}
.pill:hover span{border-color:#b7c3d3}
.pill input:checked+span{background:var(--green-l);border-color:var(--green);color:var(--green-d);font-weight:600;box-shadow:0 4px 12px rgba(43,162,76,.15)}
.pill input:checked+span svg{color:var(--green-d)}
.pill input:focus-visible+span{outline:3px solid rgba(43,162,76,.35);outline-offset:2px}
.pills--sm .pill span{padding:7px 13px;font-size:13px}

.icheck{display:flex!important;gap:10px;align-items:flex-start;font-weight:500!important;color:var(--text)!important;font-size:13.5px!important;cursor:pointer;margin:0!important}
.icheck input{appearance:none;-webkit-appearance:none;flex-shrink:0;width:20px;height:20px;margin-top:1px;border:1.5px solid #c3cedb;border-radius:6px;background:#fff;display:grid;place-items:center;cursor:pointer;transition:.2s}
.icheck input::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) scale(0);margin-top:-2px;transition:transform .15s}
.icheck input:checked{background:var(--green);border-color:var(--green)}
.icheck input:checked::after{transform:rotate(-45deg) scale(1)}
.icheck input:focus-visible{outline:3px solid rgba(43,162,76,.35);outline-offset:2px}
.ifield.is-invalid .icheck input{border-color:#d93025}

.iform__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:4px}
.iform__submit{position:relative;min-height:52px;padding:0 30px;font-size:15px}
.iform__submit:disabled{opacity:.85;cursor:wait;transform:none}
.iform__submit .spin{display:none;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:ispin .7s linear infinite}
.iform.is-sending .iform__submit .spin{display:inline-block}
.iform.is-sending .iform__submit>svg{display:none}
@keyframes ispin{to{transform:rotate(360deg)}}
.iform__alt{font-size:13.5px;color:var(--muted)}
.iform__alt a{color:var(--green-d);font-weight:600}
.iform__status:empty{display:none}
.iform__status{font-size:13.5px;font-weight:500;padding:11px 14px;border-radius:10px}
.iform__status.is-err,.iform__alert.is-err{background:#fdecea;color:#a1251b;border:1px solid #f6c7c2}
.iform__alert{grid-column:1/-1;padding:12px 16px;border-radius:10px;font-size:14px;font-weight:500}
.iform__alert.is-ok{background:var(--green-l);color:var(--green-d);border:1px solid #bfe5c9}

.iform__done{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;border-radius:inherit;background:#fff;animation:ifade .35s ease}
.iform__done[hidden]{display:none}
.iform__done h3{color:var(--navy);font-size:24px;margin:18px 0 8px}
.iform__done p{max-width:420px;margin-bottom:22px;color:var(--text)}
.iform__tick{width:76px;height:76px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:40px;box-shadow:0 0 0 10px var(--green-l);animation:ipop .45s cubic-bezier(.2,1.4,.4,1)}
.iform.is-done>*:not(.iform__done){visibility:hidden}
@keyframes ifade{from{opacity:0}to{opacity:1}}
@keyframes ipop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.map--wide{margin-top:28px;border-radius:20px;overflow:hidden;box-shadow:var(--sh);height:360px}
.map--wide iframe{width:100%;height:100%;border:0;display:block}

/* pop-up version */
.modal__box--form{max-width:600px;max-height:calc(100vh - 40px);overflow-y:auto;padding:30px 30px 26px;border-radius:20px;overscroll-behavior:contain}
.enq__head{display:flex;align-items:center;gap:14px;margin-bottom:6px;padding-right:40px}
.enq__head .eyebrow{margin-bottom:0}
.enq__head h3{margin:0;line-height:1.15}
.enq__icon{flex-shrink:0;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px;color:#fff;background:linear-gradient(135deg,var(--green),var(--green-d));box-shadow:0 8px 20px rgba(43,162,76,.35)}
.modal__box>.enq__lead{font-size:14px;color:var(--muted);margin:0 0 18px}
.iform--modal{padding:0;border:0;box-shadow:none;border-radius:16px;gap:14px 14px}
.modal .iform--modal{display:grid}
.enq__alt{text-align:center;font-size:13px;color:var(--muted)}
.enq__alt a{color:var(--green-d);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.enq__alt svg{color:#25d366}

@media (max-width:1024px){.cform2{grid-template-columns:1fr}}
@media (max-width:640px){
  .iform{grid-template-columns:1fr;padding:24px 18px;gap:14px}
  .cpanel{padding:28px 22px}
  .iform__submit{width:100%}
  .iform__foot{justify-content:center}
  .modal__box--form{padding:24px 18px 20px}
  .pills .pill{flex:1 1 auto}
  .pills .pill span{width:100%;justify-content:center}
  .map--wide{height:280px}
}