/* Programme content, rendered by [milpark_programme_sections],
   [milpark_programme_intro], [milpark_programme_school],
   [milpark_programme_accreditations] and [milpark_programme_award].
   Presentation only: details/summary carries the open state, so there is no
   JavaScript for any of this. Colours are the kit's brand values, the same set
   nav.css and faqs.css use. */
.mk-sections,.mk-intro,.mk-school,.mk-accreditations{--mk-sec-ink:#1C3687;--mk-sec-navy:#1A134A;--mk-sec-rule:#E0E3F4;
  --mk-sec-tint:#F4F6FC;--mk-sec-body:#394154;--mk-sec-muted:#5A6B85;
  --mk-sec-teal:#07B3A3;
  /* The resting folder tab. Deeper than --mk-sec-tint on purpose: at the tint
     the unselected tab differed from the white selected one by 23 across the
     three channels, which is not a difference anybody sees. */
  --mk-tab-rest:#E3E9F5;
  /* HEADINGS TAKE THE KIT'S HEADING FACE, body text stays Inter. The kit sets
     primary and secondary typography to Metropolis and text to Inter, so a
     component that hardcoded Inter throughout put every heading it rendered in
     the body face. Checked in a browser on 14 Sept 2026: our headings computed
     Inter while every Elementor heading on the same page computed Metropolis.
     The var falls back to Inter for any context the kit has not loaded into. */
  --mk-heading-font:var(--e-global-typography-primary-font-family,Inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}

.mk-sections{display:flex;flex-direction:column;gap:clamp(36px,4vw,56px)}

/* nav.css sets scroll-margin-top through :where(), which carries ZERO
   specificity, so any component rule would beat it. Re-declared here for the
   same reason faqs.css re-declares it. */
.mk-section{scroll-margin-top:96px}

.mk-sections-group{display:flex;flex-direction:column;gap:20px;margin:0}

/* Group heading, only the structure group has one. */
/* NO RULE ABOVE A GROUP HEADING. It used to carry a 2px top border and the
   padding to sit under it, which put a divider above Programme Structure and
   another above Available learning modes that nobody could move or remove
   without editing this file. Dividers are the page builder's job now, so the
   heading is just a heading and .mk-sections' own gap does the spacing. */
.mk-sections-heading{margin:0 0 4px;font-family:var(--mk-heading-font);
  font-size:clamp(22px,2.1vw,30px);font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--mk-sec-navy)}

/* A label inside a title, "Learning Mode:" before the delivery mode. Same
   size, lighter weight, so the mode itself is what reads as the heading. */
.mk-section-label{font-weight:500;color:var(--mk-sec-muted)}

/* Section titles */
.mk-section-title{margin:0 0 12px;font-size:clamp(19px,1.7vw,24px);font-weight:700;line-height:1.3;font-family:var(--mk-heading-font);
  letter-spacing:-.005em;color:var(--mk-sec-navy)}

/* Body prose. The repeater bodies carry only p, ul, li, strong, a, br and em,
   so every one of those is styled here and nothing else needs to be. */
.mk-section-body,.mk-intro-body{max-width:72ch;font-size:16px;line-height:1.65;color:var(--mk-sec-body)}
.mk-section-body p,.mk-intro-body p{margin:0 0 14px}
.mk-section-body ul,.mk-intro-body ul{margin:0 0 14px;padding-left:22px}
.mk-section-body li,.mk-intro-body li{margin:0 0 8px;padding-left:2px}
.mk-section-body li::marker,.mk-intro-body li::marker{color:var(--mk-sec-ink)}
.mk-section-body strong,.mk-intro-body strong{font-weight:600;color:var(--mk-sec-navy)}
.mk-section-body a,.mk-intro-body a{color:var(--mk-sec-ink);font-weight:600;text-decoration:underline;
  text-decoration-thickness:1.5px;text-underline-offset:3px}
.mk-section-body a:hover,.mk-intro-body a:hover{color:var(--mk-sec-navy)}
.mk-section-body a:focus-visible,.mk-intro-body a:focus-visible{outline:2px solid var(--mk-sec-ink);outline-offset:2px;border-radius:2px}
.mk-section-body > :last-child,.mk-intro-body > :last-child{margin-bottom:0}

/* Collapsible sections, the module and stream lists. Same behaviour as the FAQ
   accordion so the two read as one system, with more room per row. */
.mk-sections-group--structure{gap:0}
.mk-sections-group--structure .mk-sections-heading{margin-bottom:14px}
.mk-section--collapsible{border-bottom:1px solid var(--mk-sec-rule)}
.mk-sections-group--structure .mk-section--collapsible:first-of-type{border-top:1px solid var(--mk-sec-rule)}

/* MATCHED TO THE FAQ ACCORDION, declaration for declaration. It is the same
   interaction, and the two sat on the same site reading as different
   components: this one had a tinted disc around its chevron, more padding and
   a heavier hover. faqs.css is the reference. Change one, change both. The
   rule and body colours are already the same values in both token blocks. */
.mk-section-q{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 2px;cursor:pointer;list-style:none}
.mk-section-q::-webkit-details-marker{display:none}
.mk-section-q .mk-section-title{margin:0;font-size:17px;font-weight:600;line-height:1.4;color:var(--mk-sec-ink)}
.mk-section-q:hover .mk-section-title{text-decoration:underline;text-underline-offset:3px}
.mk-section-q:focus-visible{outline:2px solid var(--mk-sec-ink);outline-offset:2px;border-radius:4px}

.mk-section-chev{flex:none;color:var(--mk-sec-ink);transition:transform .18s ease}
.mk-section-item[open] .mk-section-chev{transform:rotate(180deg)}
.mk-section-item .mk-section-body{padding:0 2px 22px}

/* Admission requirements and the catch all sit in a soft panel, so they read
   as a block of their own the way the live site's white section does. Tint,
   no border. The team took the border off in Additional CSS, but that rule
   named one anchor, #minimum-admission-requirements, so it reached 55
   programmes and missed every admission section with another title. v1.52.0
   took the border out here instead, so every panel matches. */
.mk-sections-group--admission .mk-section,.mk-sections-group--details .mk-section{
  padding:clamp(22px,2.4vw,34px);border-radius:16px;background:var(--mk-sec-tint)}
.mk-sections-group--admission .mk-section-body,.mk-sections-group--details .mk-section-body{max-width:none}

/* Delivery modes sit side by side, the way the live site cards them. Intrinsic
   sizing rather than a fixed half width, so a programme with one delivery mode
   fills the row instead of hugging the left. Cards stretch to equal height.
   The card itself matches the programme facts container on the single page
   exactly: one 2px teal border, 20px radius, 20px padding, no fill. One border
   only; the earlier top accent bar read as a double border beside it. Override
   --mk-card-border from Elementor custom CSS if the facts card changes colour. */
.mk-sections-group--delivery{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.mk-sections-group--delivery .mk-section{display:flex;flex-direction:column;padding:20px;
  border:2px solid var(--mk-card-border,var(--mk-sec-teal));border-radius:20px;background:transparent}
.mk-sections-group--delivery .mk-section-title{font-size:clamp(18px,1.5vw,21px)}
.mk-sections-group--delivery .mk-section-body{max-width:none;font-size:15px}

/* [milpark_programme_intro]: the lead. First paragraph carries the weight. */
.mk-intro-title{margin:0 0 14px;font-size:clamp(22px,2.1vw,30px);font-weight:700;line-height:1.2;color:var(--mk-sec-navy);font-family:var(--mk-heading-font)}
.mk-intro-body > p:first-child{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--mk-sec-navy)}

/* [milpark_programme_school]: a lockup in the school's own colour. The colour
   arrives on the element as --mk-school from term meta and falls back to blue. */
.mk-school{display:inline-flex;align-items:center;gap:12px;color:var(--mk-school,var(--mk-sec-ink));
  font-size:15px;font-weight:700;letter-spacing:.01em;text-decoration:none}
.mk-school-logo{display:block;height:var(--mk-school-logo-h,128px);width:auto;max-width:220px;object-fit:contain;
  color:var(--mk-school-logo,var(--mk-sec-navy))}
/* Inline SVG: the wordmark paths arrive as currentColor, so this is the dark
   version on a light background and the white one wherever color is set to
   white. The mark keeps its own brand fill. */
svg.mk-school-logo{overflow:visible}
.mk-school-name{display:inline-block;padding:6px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--mk-school,var(--mk-sec-ink)) 10%,#fff);color:inherit}
a.mk-school:hover .mk-school-name{text-decoration:underline;text-underline-offset:3px}
a.mk-school:focus-visible{outline:2px solid var(--mk-school,var(--mk-sec-ink));outline-offset:3px;border-radius:999px}

@media (max-width:640px){
  .mk-sections{gap:32px}
  .mk-section-q{padding:16px 2px}
  .mk-sections-group--delivery .mk-section{padding:20px 20px 22px}
}

@media (prefers-reduced-motion:reduce){
  .mk-sections .mk-section-chev,.mk-sections .mk-section-q{transition:none}
}

/* chrome="none": the page builder owns background, padding and columns. Every
   decorative rule above is undone here and nothing else changes, so the same
   markup reads the same whichever mode a container is in. */
.mk-sections--plain{gap:24px}
.mk-sections--plain .mk-sections-group--admission .mk-section,
.mk-sections--plain .mk-sections-group--details .mk-section,
.mk-sections--plain .mk-sections-group--delivery .mk-section{padding:0;border:0;border-radius:0;background:transparent}
.mk-sections--plain .mk-sections-group--delivery{display:flex;flex-direction:column;gap:24px}
.mk-sections--plain .mk-sections-group--delivery .mk-section-body{max-width:72ch;font-size:16px}

/* ==========================================================================
   A COLLAPSIBLE GROUP IS A LIST, NEVER A CARD GRID.

   This block is LAST and doubles up the group class on purpose. The delivery
   group carries a card grid above: display:grid, a 2px teal border per section
   and 20px padding. Those selectors are `.mk-sections-group--delivery
   .mk-section`, which is two classes, exactly what a single
   `.mk-sections-group--accordion .mk-section--collapsible` is, so at equal
   specificity the one later in the file wins. v1.24.0 put this block ABOVE the
   card rules and the accordion came out as bordered cards two to a row. There
   is a screenshot of that mistake in the 14 Sept thread.

   Doubling the class makes it three, and placing it after the plain overrides
   and the 640px media block means source order cannot bite either.
   ========================================================================== */
.mk-sections-group--accordion.mk-sections-group--delivery,
.mk-sections-group--accordion{display:flex;flex-direction:column;gap:0;grid-template-columns:none}

.mk-sections-group--accordion.mk-sections-group--delivery .mk-section,
.mk-sections-group--accordion .mk-section--collapsible{
  display:block;padding:0;border:0;border-radius:0;background:transparent;
  border-bottom:1px solid var(--mk-sec-rule)}

.mk-sections-group--accordion .mk-section--collapsible:first-of-type{
  border-top:1px solid var(--mk-sec-rule)}

/* Row title and body size like the structure rows, not like the card. */
.mk-sections-group--accordion.mk-sections-group--delivery .mk-section-title,
.mk-sections-group--accordion .mk-section-q .mk-section-title{font-size:17px}
.mk-sections-group--accordion.mk-sections-group--delivery .mk-section-body{max-width:72ch;font-size:16px}

@media (max-width:640px){
  .mk-sections-group--accordion.mk-sections-group--delivery .mk-section{padding:0}
}

/* Delivery mode tabs. Server markup is every panel visible with the tablist
   hidden; sections.js adds is-ready, reveals the list and shows one panel. So
   without JavaScript the modes simply stack, which is what they did before. */
/* FILE FOLDER TABS. The border moved off the .mk-tabs wrapper and onto the
   PANEL, and the tab row is pulled down 2px over the panel's top edge so the
   two share it. The selected tab then paints its own bottom border in the
   panel's background colour, which erases the line under it and lets the tab
   bleed into the content the way a folder tab does. The unselected tabs keep
   the border colour along their bottom, so the panel's top line reads as
   continuous across them.

   z-index is what makes the erase work: the list has to paint AFTER the panel
   or the panel's border covers the tab's white bottom instead. */
.mk-sections-group--tabs{display:block}
.mk-sections-group--tabs .mk-tabs{border:0;border-radius:0;padding:0}
.mk-sections-group--tabs .mk-section{position:relative;z-index:0;
  padding:clamp(20px,2.2vw,28px);border:2px solid var(--mk-card-border,var(--mk-sec-teal));
  border-radius:0 16px 16px 16px;background:#fff}
.mk-sections-group--tabs .mk-section + .mk-section{margin-top:20px}
.mk-tabs-head{display:none}
.mk-tabs.is-ready .mk-tabs-head{display:flex;flex-direction:column;gap:10px;margin:0}
.mk-tabs.is-ready .mk-section + .mk-section{margin-top:0}
.mk-tabs.is-ready [hidden]{display:none}
/* Once the tab names the mode, the panel heading repeats it; keep it for the
   outline and assistive tech, drop it from view. */
.mk-tabs.is-ready .mk-section-title{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}
.mk-tabs-label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mk-sec-muted)}
/* NEVER WRAPS. The programme template puts this in a column around 260px
   wide, where two mode names do not fit on one line. Wrapping put the selected
   tab on the first row and the panel under the second, 45px away from the tab
   it is supposed to be joined to, and the folder fell apart. The strip scrolls
   instead, the same answer the slider rail uses, with the bar hidden in all
   three engines. With two or three modes it rarely has to. */
.mk-tabs-list{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:4px;position:relative;z-index:1;
  margin-bottom:-2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.mk-tabs-list::-webkit-scrollbar{display:none}
/* margin-top on the resting tab, not the selected one, so the selected tab
   stands 3px proud of its neighbours the way the front folder in a drawer
   does. align-items:flex-end on the list keeps every tab sitting on the same
   bottom edge while they differ in height. */
.mk-tab{flex:0 0 auto;white-space:nowrap;margin:3px 0 0;padding:11px 18px;border:2px solid var(--mk-card-border,var(--mk-sec-teal));
  border-radius:12px 12px 0 0;background:var(--mk-tab-rest);
  font:inherit;font-size:14px;font-weight:600;line-height:1;color:var(--mk-sec-muted);cursor:pointer;
  transition:background-color .15s ease,color .15s ease}
/* hello reset.css paints [type="button"]:hover and :focus pink at equal
   specificity; scoped under .mk-tabs so ours wins outright. */
.mk-tabs .mk-tab:hover,.mk-tabs .mk-tab:focus{background:#fff;color:var(--mk-sec-ink)}
/* The selected tab IS the front of the folder: panel background, panel border,
   and its own bottom edge painted out so it runs into the content below. */
.mk-tabs .mk-tab[aria-selected="true"],
.mk-tabs .mk-tab--static{margin-top:0;padding-bottom:13px;background:#fff;border-bottom-color:#fff;
  color:var(--mk-sec-ink);font-weight:700}
.mk-tab:focus-visible{outline:2px solid var(--mk-sec-ink);outline-offset:2px}
/* ONE MODE. Same box, same caption, same pill row as the tabbed version, so a
   programme with a single delivery mode does not read as a different
   component. No JavaScript is involved, so unlike .mk-tabs-head above this one
   is visible from the server rather than waiting on .is-ready. The panel keeps
   its heading for screen readers and hides it visually, exactly as the tabbed
   version does once the script runs. */
.mk-tabs--single .mk-tabs-head{display:flex;flex-direction:column;gap:10px;margin:0}
.mk-tabs--single .mk-section-title{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}
/* Filled, matching the selected tab, because it IS the mode in use. Not a
   button and not focusable: one pill cannot change anything. */
.mk-tab--static{background:var(--mk-sec-ink);border-color:var(--mk-sec-ink);color:#fff;cursor:default}

.mk-sections--plain .mk-sections-group--tabs .mk-tabs{border:0;border-radius:0;padding:0}
.mk-sections--plain .mk-sections-group--tabs .mk-section{border:0;border-radius:0;padding:0;background:transparent}
.mk-sections--plain .mk-tabs-list{margin-bottom:0}
.mk-sections--plain .mk-tab{border-radius:999px;border-bottom-color:var(--mk-card-border,var(--mk-sec-teal))}
@media (prefers-reduced-motion:reduce){.mk-tab{transition:none}}

/* Partner logos under the intro. The artwork is the grey 500x200 set the
   school carousels use, so every logo gets the same box and none outshouts
   the rest. A programme with no accreditations prints nothing, and
   elementor.css hides the empty widget so the column gap does not double. */
.mk-accreditations{display:flex;flex-direction:column;gap:12px;margin:0}
.mk-accreditations-label{margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mk-sec-muted)}
.mk-accreditations-list{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0;padding:0;list-style:none}
.mk-accreditation{margin:0;padding:0}
.mk-accreditation a{display:block;border-radius:6px}
.mk-accreditation a:focus-visible{outline:2px solid var(--mk-sec-ink);outline-offset:3px}
.mk-accreditation-logo{display:block;width:150px;max-width:100%;height:auto;aspect-ratio:5/2;object-fit:contain}
.mk-accreditation-name{display:inline-block;padding:8px 14px;border:1px solid var(--mk-sec-rule);border-radius:999px;font-size:14px;font-weight:600;color:var(--mk-sec-ink)}
@media (max-width:480px){.mk-accreditation-logo{width:120px}}

/* [milpark_programme_award], the CHE award statement straight under the
   intro. Body text like the intro above it; the bold is in the markup. */
.mk-programme-award{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:#394154}

/* The major or specialisation under the qualification name in the page
   heading and the key facts eyebrow (milpark_programme_heading_title()). The
   CHE: it must not read as part of the qualification name, so it sits on a
   line of its own, smaller, italic, in the heading's colour. The floor keeps
   it readable under the 14px eyebrow. */
.mk-title-sub{display:block;margin-top:.3em;font-size:max(.55em,14px);font-weight:400;font-style:italic;line-height:1.25;letter-spacing:0;text-transform:none}