/* ==========================================================================
   MOBILE
   The whole phone-and-tablet design pass, in one file so it can be read, and
   reverted, as one thing. It is loaded last and is almost entirely inside
   media queries: nothing here changes the desktop site.

   Two kinds of rule live here. The first is the navigation, which below 1240px
   did not exist at all - .nav-links and .nav-util are display:none there, so a
   phone had a logo, a search icon and a cart and no route to any page. The
   second is proportion: grids that stayed at a desktop column count, a logo
   wall and a facts table that ran off the side of the screen, and sections
   long enough to be measured in screens rather than pixels.
   ========================================================================== */

/* Said to a screen reader, drawn for nobody. */
.scr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --------------------------------------------------------------------------
   1. THE MENU BUTTON
   Desktop has the bar, so the button only exists where the bar does not.
   -------------------------------------------------------------------------- */
.nav-burger{display:none}

@media(max-width:1239.98px){
  .nav-burger{display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;margin-right:-6px;padding:0;
    background:none;border:0;border-radius:10px;color:var(--navy-900);cursor:pointer;
    transition:background .14s ease-out}
  .nav-burger:hover{background:var(--brand-50)}
  .nav-burger:focus-visible{outline:2px solid var(--accent-800);outline-offset:2px}
  .nav-burger-bars{display:block;width:20px}
  .nav-burger-bars span{display:block;height:2px;border-radius:2px;background:currentColor}
  .nav-burger-bars span + span{margin-top:5px}
  /* The middle bar is shorter, so the button reads as a menu rather than as
     three rules of equal weight. */
  .nav-burger-bars span:nth-child(2){width:14px}
}

/* --------------------------------------------------------------------------
   2. THE SHEET
   -------------------------------------------------------------------------- */
.navm[hidden]{display:none}
/* Above the accessibility plugin's button, which sits at 9999 and otherwise
   floats on top of the open sheet. */
.navm{position:fixed;inset:0;z-index:10000}

.navm-scrim{position:absolute;inset:0;background:rgba(10,16,40,.5);
  opacity:0;transition:opacity .22s ease-out}
.navm.is-open .navm-scrim{opacity:1}

.navm-sheet{position:absolute;top:0;right:0;bottom:0;width:min(86vw,390px);
  display:flex;flex-direction:column;background:var(--white);
  box-shadow:-18px 0 50px rgba(10,16,40,.26);
  transform:translateX(100%);transition:transform .24s cubic-bezier(.3,.8,.4,1)}
.navm.is-open .navm-sheet{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){
  .navm-scrim,.navm-sheet{transition:none}
}

.navm-head{display:flex;align-items:center;justify-content:space-between;
  flex:none;height:60px;padding:0 10px 0 20px;border-bottom:1px solid var(--slate-200)}
.navm-title{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate-500)}
.navm-x{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  padding:0;background:none;border:0;border-radius:10px;color:var(--navy-800);cursor:pointer}
.navm-x svg{width:19px;height:19px}
.navm-x:hover{background:var(--brand-50)}
.navm-x:focus-visible{outline:2px solid var(--accent-800);outline-offset:-2px}

/* The scrolling middle. -webkit-overflow-scrolling is for the older iOS
   WebViews that still ship inside app browsers. */
.navm-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:8px 0 20px}

/* ---- a top-level row ---- */
.navm-link,.navm-sec > summary{display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:52px;padding:12px 20px;
  font-family:'Inter Tight',sans-serif;font-weight:600;font-size:1.02rem;line-height:1.3;
  letter-spacing:-.012em;color:var(--navy-900);cursor:pointer}
.navm-link{border-bottom:1px solid var(--slate-100,#EEF1F6)}
.navm-link svg{width:17px;height:17px;color:var(--brand-600);flex:none}
.navm-link.is-lead{color:var(--brand-700)}
.navm-link:hover,.navm-sec > summary:hover{background:var(--brand-50)}

.navm-sec{border-bottom:1px solid var(--slate-100,#EEF1F6)}
.navm-sec > summary{list-style:none}
.navm-sec > summary::-webkit-details-marker{display:none}
.navm-sec > summary:focus-visible{outline:2px solid var(--accent-800);outline-offset:-2px}
.navm-car{width:18px;height:18px;flex:none;color:var(--slate-500);transition:transform .18s ease-out}
.navm-sec[open] > summary .navm-car{transform:rotate(180deg)}
.navm-sec[open] > summary{color:var(--brand-700)}
@media(prefers-reduced-motion:reduce){ .navm-car{transition:none} }

/* ---- what is inside one ---- */
.navm-sec-body{padding:2px 20px 16px;background:var(--paper-50)}
.navm-col + .navm-col,.navm-util{margin-top:16px}
.navm-col-h{display:block;margin-bottom:4px;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--slate-500)}
.navm-sec-body a{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  min-height:42px;padding:8px 0;
  font-size:.95rem;font-weight:500;line-height:1.35;color:var(--navy-800)}
.navm-sec-body a:hover{color:var(--accent-800)}
.navm-sec-body a:focus-visible{outline:2px solid var(--accent-800);outline-offset:2px;border-radius:4px}
.navm-all{color:var(--accent-800)!important;font-weight:600}
.navm-all svg{width:15px;height:15px}
.navm-util{padding-top:14px;border-top:1px solid var(--slate-200)}
.navm-util a{font-size:.9rem;color:var(--slate-600)}

/* ---- the account block ---- */
.navm-acct{margin-top:14px;padding:16px 20px 0;border-top:1px solid var(--slate-200)}
.navm-who{display:block;margin-bottom:6px;font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.06em;color:var(--slate-500);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navm-acct a{display:flex;align-items:center;min-height:42px;
  font-size:.95rem;font-weight:500;color:var(--navy-800)}
.navm-acct a:hover{color:var(--accent-800)}

/* ---- the foot ---- */
.navm-foot{flex:none;padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--slate-200);background:var(--white)}
.navm-foot .btn{width:100%;justify-content:center}

/* The sheet is a phone and tablet thing; a desktop that reaches 1240px has the
   bar back, so the sheet closes itself out of the way. */
@media(min-width:1240px){ .navm{display:none} }

/* Nothing behind the sheet scrolls while it is open. */
body.navm-lock{overflow:hidden}

/* --------------------------------------------------------------------------
   3. THE LOGO WALL
   The homepage was 473px wide inside a 390px screen, and this was the whole of
   it. Three columns leave a ~111px cell, but each mark carries its measured
   height as an inline style and its width follows from that - a wide wordmark
   is 140px and simply hung out of its cell. The transform:scale(.72) that was
   meant to deal with it only redraws: a scaled element still occupies its full
   width in layout, so the grid went on being too wide for the screen.
   Two columns, and a real max-width so a mark that still will not fit shrinks
   rather than pushing the page sideways.
   -------------------------------------------------------------------------- */
@media(max-width:520px){
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:2px}
  .trust-grid li{padding:10px 8px;min-height:72px}
  .trust-grid img{max-width:100%;transform:none}
}
/* Between the phone and the 560px four-column step, three columns do fit - but
   only once the marks are stopped from overflowing them. */
@media(min-width:521px) and (max-width:559.98px){
  .trust-grid img{max-width:100%}
}

/* --------------------------------------------------------------------------
   4. THE FACTS TABLE ON /about/
   Two columns, the second holding sentences: at 390px the value column started
   at x=165 and ran to 541px, so every answer on the page was cut off by the
   edge of the screen. Rows become blocks, label above value.
   -------------------------------------------------------------------------- */
@media(max-width:640px){
  /* The wrap scrolls sideways and the table is held open at 520px, so the page
     was not broken so much as asking a reader to drag every answer into view
     one at a time. Neither is needed once the rows stack. */
  .kf-wrap{overflow-x:visible}
  .kf{min-width:0}
  .kf,.kf tbody,.kf tr,.kf th,.kf td{display:block;width:auto}
  .kf tr{padding:13px 16px;border-bottom:1px solid var(--slate-200)}
  .kf tr:last-child{border-bottom:0}
  .kf th,.kf td{padding:0;border:0;width:auto;white-space:normal}
  .kf th{margin-bottom:5px}
}

/* --------------------------------------------------------------------------
   5. THE FOOTER
   The lockup put a 38px mark beside type in a 120px column, so the name broke
   over three lines and the tagline under it read as a second, smaller logo.
   And two link columns at 390px gave "CAIIP - AI Practitioner" 150px to live
   in. One column, and the lockup on its own line.
   -------------------------------------------------------------------------- */
@media(max-width:600px){
  /* shop.css carries its own copy of the footer rules and one of them is
     !important, so on the catalogue and every course page the two columns
     survived and the second ran 35px off the screen. Matched here. */
  .f-grid{grid-template-columns:1fr!important;gap:30px}
  .f-logo{flex-direction:row;align-items:center;gap:12px}
  .f-brand .name{font-size:1.15rem;white-space:nowrap}
  .f-brand p{max-width:46ch;margin-top:14px}
  /* The accreditation line is one unbroken run of names and ran off the side.
     It is allowed to wrap now, and sits on its own row. */
  .f-accred{display:block;margin-top:10px;line-height:1.7;white-space:normal}
  .f-legal{gap:8px 14px}
}

/* --------------------------------------------------------------------------
   6. THE FOUR-STEP TRACKER
   Four columns inside 390px is 85px a step, so "Complete the course" wrapped
   to two lines while "Enrol" sat on one and the rules under them stopped
   lining up. Two by two gives every label one line.
   -------------------------------------------------------------------------- */
@media(max-width:620px){
  /* The rail goes entirely.
     It is a row of tabs for moving a window over the step panels, and on a
     phone there is no window to move: the arrows are hidden and .strack stacks
     every panel vertically, so the tabs select nothing. Laying them out two by
     two fixed how they looked and left four buttons that do not do anything
     above four panels that already say STEP 1, STEP 2 and so on.
     It is aria-hidden in the markup, so nothing is lost to a screen reader
     either. */
  .srail{display:none}
}

/* --------------------------------------------------------------------------
   7. THE HERO
   Below the programme card sat roughly 300px of nothing: the decorative mesh
   is an SVG in the flow, and at desktop it fills the column beside the copy
   while at phone width it is a tall empty box under it. It is decoration, so
   it comes out of the flow and the hero closes up.
   -------------------------------------------------------------------------- */
@media(max-width:860px){
  /* 84px above and 96px below, set for a hero that is two columns side by side
     on a desktop. Stacked on a phone that is a near-empty screen under the
     programme card before the next section starts. */
  .hero .wrap{padding-top:34px;padding-bottom:40px}
  .hero-grid{gap:28px}
}
/* Two buttons of different widths, stacked, read as ragged - so on a phone they
   take the full row each. On a tablet there is room for both on one line, and
   a 700px-wide button is its own kind of wrong. */
@media(max-width:600px){
  .hero-cta{display:grid;gap:10px}
  .hero-cta .btn{width:100%;justify-content:center}
}

/* --------------------------------------------------------------------------
   8. THE ANNOUNCEMENT BAR
   It broke into three stacked rows - flag, headline, button - and took about a
   fifth of the first screen before the logo. One row: the headline, and the
   whole row is the link, with a chevron standing in for the button.
   -------------------------------------------------------------------------- */
@media(max-width:700px){
  .anno-row{padding-top:9px;padding-bottom:9px}
  .anno-link{flex-direction:row;align-items:center;gap:8px;padding-right:26px}
  .anno-flag{display:none}
  .anno-lead{font-size:.82rem;line-height:1.3}
  /* The pill becomes a chevron: the words are already in the headline, and at
     this width they were the single widest thing in the bar. */
  /* The label is a bare text node inside .anno-cta, not an element, so it is
     zeroed rather than hidden; the arrow gets its size back explicitly. */
  .anno-cta{padding:0;background:none;flex:none;font-size:0;letter-spacing:0}
  .anno-cta svg{width:17px;height:17px;color:var(--accent-500)}
  .anno-x{top:50%;right:-4px;transform:translateY(-50%)}
}

/* 9. THE ACCESSIBILITY TOOLBAR - see section 16, which is where the rule that
   actually outranks the plugin ended up. */

/* --------------------------------------------------------------------------
   10. THE CART PAGE
   WooCommerce's own block table, which at 390px gave the product name 132px
   beside three columns of numbers. Its rows become blocks.
   -------------------------------------------------------------------------- */
@media(max-width:600px){
  .wc-block-cart-items__row{grid-template-columns:72px minmax(0,1fr)!important}
  .wp-block-woocommerce-cart-line-items-block{display:block;width:100%}
  .wc-block-cart-item__total{text-align:left}
}

/* --------------------------------------------------------------------------
   11. ROOM TO BREATHE
   The shared section padding is 128px top and bottom, set for a desktop page.
   On a phone that is a third of a screen of nothing between every two blocks,
   which is most of why these pages are measured in screens.
   -------------------------------------------------------------------------- */
@media(max-width:700px){
  .sec{padding-top:52px;padding-bottom:52px}
  .phead{padding-top:38px;padding-bottom:30px}
  .wrap{padding-left:18px;padding-right:18px}
}

/* Nothing, anywhere, scrolls the page sideways. */
@media(max-width:900px){
  html,body{overflow-x:hidden}
}

/* --------------------------------------------------------------------------
   12. THE REVIEWS BAND
   A 4,273px track animating itself behind a clipped window: on a desktop that
   is a marquee, on a phone it is a lot of motion to show one card's width at a
   time, and no way to go back to one that has passed. Swiped instead, with the
   next card showing at the edge so it is clear there is one.
   -------------------------------------------------------------------------- */
/* The hint is for the swiped band only, so it is off by default and the media
   query below turns it on. Declared first: the other way round, the flat rule
   came after the query and switched it off again at every width. */
.rswipe{display:none}

@media(max-width:860px){
  .rmarq{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    scroll-padding-left:18px;padding-bottom:10px;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin}
  /* The fades sold the illusion of an endless track. Swiping has a start and
     an end, and a fade over the first card just dims it. */
  .rmarq::before,.rmarq::after{display:none}
  .rtrack{animation:none;width:auto;padding:0 18px;gap:12px}
  /* Sized in vw, not %. The track is width:max-content, so a percentage has no
     definite width to resolve against and the browser fell back to something
     enormous - the band came out 45,000px wide with one card showing and the
     rest of it off past the edge. */
  .rcard{flex:0 0 80vw;width:80vw;scroll-snap-align:start}
  /* The marquee renders every review twice so the loop has something to run
     into. Swiped, the second copy is just the same reviews again. */
  .rmarq .rcard[aria-hidden="true"]{display:none}
  .rmarq::-webkit-scrollbar{height:4px}
  .rmarq::-webkit-scrollbar-thumb{background:var(--slate-300);border-radius:4px}
  .rmarq::-webkit-scrollbar-track{background:transparent}

  .rswipe{display:flex;align-items:center;justify-content:center;gap:6px;
    margin-top:12px;font-size:10px;font-weight:500;letter-spacing:.12em;
    text-transform:uppercase;color:var(--slate-500)}
  .rswipe svg{width:13px;height:13px}
}

/* --------------------------------------------------------------------------
   13. THE CATALOGUE CARD
   Thirty-four cards at about 600px each. The roles line, the time and the
   three Included ticks fold behind their own summary; the code, the title,
   what it is for, the price and both buttons stay where they are.
   -------------------------------------------------------------------------- */
/* Everywhere but a phone the disclosure is not one: no summary, body open. */
.card-more > summary{display:none}

@media(max-width:700px){
  .card-more{border-top:1px solid var(--slate-200);margin-top:14px}
  .card-more > summary{display:flex;align-items:center;justify-content:space-between;
    gap:10px;min-height:44px;padding:10px 0;list-style:none;cursor:pointer;
    font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
    letter-spacing:.11em;text-transform:uppercase;color:var(--slate-600)}
  .card-more > summary::-webkit-details-marker{display:none}
  .card-more > summary svg{width:16px;height:16px;color:var(--slate-500);
    transition:transform .18s ease-out}
  .card-more[open] > summary svg{transform:rotate(180deg)}
  .card-more > summary:focus-visible{outline:2px solid var(--accent-800);outline-offset:2px}
  .card-more-body{padding-bottom:6px}
  .card-more-body > :first-child{margin-top:4px}
}
@media(prefers-reduced-motion:reduce){ .card-more > summary svg{transition:none} }

/* --------------------------------------------------------------------------
   14. THE FOLDED LISTS
   The pathway's four step panels and the knowledge centre's cards, which
   stacked to about 1,500px and 1,400px. The first two of each stay; the rest
   wait behind a button that says how many there are.
   -------------------------------------------------------------------------- */
.is-folded{display:none}
.mfold{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin-top:18px;padding:13px 18px;
  background:var(--white);border:1px solid var(--slate-300);border-radius:var(--r-pill,999px);
  font-family:'Inter Tight',sans-serif;font-weight:600;font-size:.92rem;
  color:var(--navy-900);cursor:pointer;transition:border-color .15s ease-out}
.mfold:hover{border-color:var(--navy-800)}
.mfold:focus-visible{outline:2px solid var(--accent-800);outline-offset:2px}
.mfold svg{width:16px;height:16px;color:var(--brand-600)}

/* --------------------------------------------------------------------------
   15. THE KNOWLEDGE CENTRE CARD
   A 240px still above four lines of text makes a 450px card. The picture is
   the least of what it carries.
   -------------------------------------------------------------------------- */
@media(max-width:700px){
  .kc-thumb{aspect-ratio:16/9;height:auto;min-height:0}
  .kc-head{padding-bottom:4px}
}

/* --------------------------------------------------------------------------
   16. CORRECTIONS
   Three selectors that were written against the wrong names and did nothing.
   -------------------------------------------------------------------------- */
@media(max-width:600px){
  /* A grid whose column is auto-sized is as wide as its widest child, so
     width:100% on the buttons was 100% of 249px. The track gets the row. */
  .hero-cta{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  /* The row still wrapped: the headline and the arrow are two flex children
     and the headline would not shrink. */
  .anno-link{flex-wrap:nowrap;min-width:0}
  .anno-lead{min-width:0}
}
@media(max-width:900px){
  /* The plugin's own class is pojo-a11y-toolbar-left, not .pojo-a11y-toolbar -
     and its own `top` carries !important too, so the html body prefix is there
     to outrank it. Without that the box kept its top and took the new bottom
     as well, which stretched it to 710px down the side of the page.
     Bottom left: where a reader looks for this control, and the one corner the
     chat button has not already taken. */
  html body [class*="pojo-a11y-toolbar-"]{top:auto!important;bottom:16px!important}
  html body [class*="pojo-a11y-toolbar-"] .pojo-a11y-toolbar-toggle a{border-radius:0 8px 8px 0}
}