/* ============================================================
   UCL Training — Shared Design System (base.css)
   Ye file har page pe header.php ke through load hoti hai.
   Aage se naye page ka CSS yahan likho, page ke andar inline nahi —
   tabhi browser cache kaam karega aur mobile fast chalega.
   ============================================================ */

:root{
  /* Brand */
  --brand-blue:#0a4ea3;   --brand-blue-dk:#073a7c;  --brand-blue-lt:#e9f1fb;
  --brand-cyan:#00a5df;   --brand-navy:#001a55;
  --brand-orange:#f37021; --brand-orange-dk:#d45a10;
  --brand-green:#18a558;  --brand-red:#d93a3a;      --brand-yellow:#f5b400;

  /* Neutrals */
  --ink:#1b2434; --ink-2:#3a4759; --ink-3:#6b7688;
  --line:#dfe5ee; --line-2:#eef2f8;
  --bg:#f5f7fb;  --surface:#fff;  --surface-2:#fbfcfe;

  /* Type */
  --font-display:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Hind',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Radii */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px;

  /* Shadows */
  --sh-1:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.04);
  --sh-2:0 4px 10px rgba(15,23,42,.06),0 2px 4px rgba(15,23,42,.04);
  --sh-3:0 12px 28px rgba(15,23,42,.09),0 4px 10px rgba(15,23,42,.05);
  --sh-focus:0 0 0 4px rgba(10,78,163,.18);

  --container:1180px;

  /* Standard breakpoints (reference):
     1024px = tablet | 768px = mobile | 420px = small phone */
}

*{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;             /* mobile horizontal scroll fix */
}

img,svg,video{max-width:100%;height:auto}

h1,h2,h3,h4,h5{font-family:var(--font-display);line-height:1.25;color:var(--brand-navy)}

/* Accessibility ---------------------------------------------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:99999;
  background:#fff;color:var(--brand-blue);padding:10px 16px;border-radius:0 0 8px 0;
  font-weight:600;
}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--brand-cyan);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Utility --------------------------------------------------------- */
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.u-hide{display:none!important}
.u-center{text-align:center}
.u-mt{margin-top:16px}.u-mb{margin-bottom:16px}

/* Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:12px 22px;border:none;border-radius:var(--r-md);
  font-family:var(--font-display);font-size:15px;font-weight:600;
  cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .18s,background .18s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand-blue);color:#fff;box-shadow:var(--sh-2)}
.btn-primary:hover{background:var(--brand-blue-dk)}
.btn-accent{background:var(--brand-orange);color:#fff}
.btn-accent:hover{background:var(--brand-orange-dk)}
.btn-ghost{background:#fff;color:var(--brand-blue);border:1px solid var(--line)}
.btn[disabled],.btn.is-loading{opacity:.65;pointer-events:none}
.btn-block{width:100%}

/* Cards ----------------------------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:22px;
}

/* Forms — mobile friendly ------------------------------------------ */
.input,input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{
  width:100%;min-height:48px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-md);
  font-family:var(--font-body);font-size:16px;   /* 16px = iOS auto-zoom nahi hoga */
  background:#fff;color:var(--ink);transition:border-color .16s,box-shadow .16s;
}
.input:focus,input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand-blue);box-shadow:var(--sh-focus);
}
label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}

/* Alerts ---------------------------------------------------------- */
.alert{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:var(--r-md);font-size:14px;margin-bottom:16px;
  border:1px solid transparent;
}
.alert-error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alert-ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.alert-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.alert-warn{background:#fffbeb;border-color:#fde68a;color:#92400e}

/* Badges ---------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600}
.badge-green{background:#dcfce7;color:#166534}
.badge-blue{background:#dbeafe;color:#1e40af}
.badge-orange{background:#ffedd5;color:#9a3412}
.badge-red{background:#fee2e2;color:#991b1b}
.badge-grey{background:#f1f5f9;color:#475569}

/* Progress bar ---------------------------------------------------- */
.pbar{height:8px;background:var(--line-2);border-radius:999px;overflow:hidden}
.pbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-cyan));border-radius:999px;transition:width .4s}

/* Tables — mobile scroll ------------------------------------------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-md)}
.table-wrap table{width:100%;border-collapse:collapse;min-width:560px}

/* Mobile sticky action bar ---------------------------------------- */
.mobile-cta{display:none}
@media (max-width:768px){
  .mobile-cta{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900;
    gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97);border-top:1px solid var(--line);
    box-shadow:0 -4px 16px rgba(15,23,42,.08);
  }
  .mobile-cta .btn{flex:1}
  body.has-mobile-cta{padding-bottom:78px}
}

/* Print (certificate) --------------------------------------------- */
@media print{
  .main-header,.footer,.mobile-cta,.no-print,.skip-link{display:none!important}
  body{padding:0!important;background:#fff}
}