/* ==========================================================================
   Maharah Urban-Tech Bootcamp — Programme Report 2026 (EN / AR)
   Static build for WordPress. Every rule is scoped under .uti-report so it
   cannot leak into the surrounding theme, and nothing here styles bare
   element selectors globally.
   ========================================================================== */

@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2')}

@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2')}

.uti-report{
  --uti-navy:#19233C; --uti-navy-deep:#243654; --uti-blue:#4169B1;
  --uti-amber:#F6A218; --uti-cyan:#3CC0DE;
  --uti-cream:#FAF4ED; --uti-ink:#010A17; --uti-green:#4FB785;
  --uti-blue-soft:#5893CA; --uti-yellow:#FCEE2F; --uti-body:#2A3450;
  --uti-shell:#E7ECF2;
  display:block; width:100%; margin:0 auto; padding:32px 16px;
  background:var(--uti-shell);
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  color:var(--uti-body); line-height:1.5; text-align:start;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.uti-report *,.uti-report *::before,.uti-report *::after{box-sizing:border-box}

/* Neutralise the two theme rules that most often break an embedded layout:
   a global img{max-width:100%} and inherited list/paragraph spacing. */
.uti-report img{max-width:none !important;height:auto;border:0 !important;box-shadow:none !important;display:block}
.uti-report p,.uti-report div,.uti-report span,.uti-report h1,.uti-report h2,
.uti-report h3,.uti-report h4,.uti-report h5,.uti-report h6,.uti-report ul,
.uti-report ol,.uti-report li,.uti-report table,.uti-report figure,
.uti-report figcaption{margin:0;padding:0;border:0;background:none}
.uti-report li{list-style:none}
.uti-report a{text-decoration:none;color:inherit}

/* Arabic pages use the Arabic type family throughout; set once on the
   language section rather than per element. */
.uti-lang[data-lang="ar"]{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif}

/* ── Language toggle ──────────────────────────────────────────────────────── */
.uti-toolbar{
  width:100%; max-width:1600px; margin:0 auto 24px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.uti-toolbar__title{font-weight:700;font-size:15px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--uti-navy)}
.uti-toolbar[data-lang="ar"] .uti-toolbar__title{font-family:'IBM Plex Sans Arabic';
  letter-spacing:0;text-transform:none}
.uti-toolbar__meta{font-size:13px;color:rgba(25,35,60,.55);margin-top:4px}
.uti-toolbar__right{display:flex;align-items:center;gap:14px}

.uti-langswitch{display:flex;border-radius:10px;overflow:hidden;
  box-shadow:0 4px 16px rgba(25,35,60,.18)}
.uti-langswitch button{font-family:'IBM Plex Sans';font-weight:700;font-size:12px;
  letter-spacing:.1em;padding:11px 18px;border:0;cursor:pointer;
  background:#d0d8e8;color:var(--uti-navy);transition:background .15s,color .15s}
.uti-langswitch button[lang="ar"]{font-family:'IBM Plex Sans Arabic';letter-spacing:0}
.uti-langswitch button.is-active{background:var(--uti-navy);color:var(--uti-cream)}

.uti-report a.uti-print{font-family:inherit;font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--uti-cream) !important;background:var(--uti-navy);
  border:0;border-radius:8px;padding:13px 22px;cursor:pointer;
  display:inline-block;text-decoration:none}
.uti-report a.uti-print:visited,
.uti-report a.uti-print:hover,
.uti-report a.uti-print:focus,
.uti-report a.uti-print:active{color:var(--uti-cream) !important;text-decoration:none}
.uti-report a.uti-print[lang="ar"]{font-family:'IBM Plex Sans Arabic';letter-spacing:0;text-transform:none}
.uti-report a.uti-print:hover{background:var(--uti-navy-deep)}

/* ── Page shell ───────────────────────────────────────────────────────────
   Each page is authored at a fixed 1600 × 900 and scaled to the available
   width by script.js, which writes --uti-scale onto the .uti-page element. */
.uti-page{
  position:relative; width:100%; max-width:1600px; margin:0 auto 28px;
  aspect-ratio:1600 / 900; overflow:hidden;
  box-shadow:0 24px 60px rgba(25,35,60,.20);
}
.uti-lang > .uti-page:last-child{margin-bottom:0}
.uti-canvas{
  position:absolute; top:0; left:0; width:1600px; height:900px;
  transform-origin:top left; transform:scale(var(--uti-scale,1));
}

/* Only the active language's pages take part in layout/printing. */
.uti-lang{display:none}
.uti-lang.is-active{display:block}

@media (max-width:640px){
  .uti-report{padding:16px 8px}
  .uti-page{margin-bottom:16px;box-shadow:0 12px 30px rgba(25,35,60,.18)}
}

/* ── Print / Save as PDF: drop the scaling, one page per sheet ─────────── */
@media print{
  @page{size:1600px 900px;margin:0}
  /* The one intentional bare-element rule in this file. It is print-only and
     exists because the browser default body margin (8px) pushes the last page
     past the final sheet and produces a trailing blank page. */
  html,body{margin:0;padding:0}
  .uti-report{background:#fff;padding:0}
  .uti-toolbar{display:none}
  .uti-lang:not(.is-active){display:none !important}
  .uti-page{width:1600px;max-width:none;height:900px;aspect-ratio:auto;
    margin:0;box-shadow:none;break-inside:avoid}
  /* Break after every page except the last, so no trailing blank sheet. */
  .uti-lang > .uti-page:not(:last-child){break-after:page;page-break-after:always}
  .uti-canvas{transform:none !important}
}