/* ==========================================================================
   INTERNAL WEBSITE FILE: the look of the website (colours, sizes, layout).
   Not needed for routine content changes.

   The only part you might safely change is the colour list just below.
   Colours are written as "hex codes" (e.g. #0c2149). Keep text colours
   dark enough to read easily on light backgrounds.
   ========================================================================== */
/* ==================================================================
   SECTION: BRAND COLOURS
   What this controls: the colours used across the whole website.
   This is the only part of this file that is safe to change.
   ================================================================== */
:root {
  --navy: #0c2149;          /* Main brand colour (logo, headings, buttons) */
  --navy-dark: #071632;     /* Footer and darker areas */
  --blue: #1a56b8;          /* Accent colour for small headings and links */
  --blue-bright: #3a93d6;   /* Decorative accents only (not for text) */
  --page: #ffffff;          /* Main page background */
  --soft: #eef1f5;          /* Light grey background for alternate sections */
  --text: #1b2433;          /* Main text colour */
  --muted: #465163;         /* Softer text colour */
  --border: #d3dae4;        /* Lines and card edges */
  --focus: #f5b700;         /* Keyboard focus outline */

  --radius: 14px;
  --shadow: 0 1px 2px rgba(12, 33, 73, .06), 0 6px 20px rgba(12, 33, 73, .06);
  --max: 1160px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* END SECTION: BRAND COLOURS */

/* ==================================================================
   SECTION: BASE
   What this controls: default text size, fonts, link colours and keyboard focus outline on every page.
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--page); color: var(--text);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { color: var(--navy); line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--blue); text-underline-offset: .15em; }
a:hover { color: var(--navy); }
ul { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100; background: var(--navy); color: #fff;
  padding: .7em 1.1em; border-radius: 8px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }
.center { text-align: center; justify-content: center; }
.small { font-size: .95rem; color: var(--muted); }

/* Missing information marker: [INSERT: ...] */
mark.insert, .btn-missing {
  background: #fff1a8; color: #4d3a00; border: 1px dashed #a07c00;
  padding: .05em .35em; border-radius: 4px; font-weight: 600; font-size: .92em;
}
.btn-missing { display: inline-block; padding: .6em .9em; line-height: 1.4; }

/* END SECTION: BASE */

/* ==================================================================
   SECTION: HEADER AND MENU
   What this controls: the white bar at the top with the logo and menu, and the "Menu" button on phones.
   ================================================================== */
.site-header {
  background: #fff; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 220px; height: auto; }
.brand-text { font-weight: 800; font-size: 1.3rem; color: var(--navy); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; align-items: center; }
.site-nav a {
  display: block; padding: .55em .8em; border-radius: 8px; color: var(--navy);
  text-decoration: none; font-weight: 600;
}
.site-nav a:hover { background: var(--soft); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .45em; text-decoration-color: var(--blue-bright); }
.site-nav a.nav-cta { background: var(--navy); color: #fff; margin-left: 6px; }
.site-nav a.nav-cta:hover { background: var(--navy-dark); }
.nav-toggle {
  display: none; align-items: center; gap: 10px; background: #fff; color: var(--navy);
  border: 2px solid var(--navy); border-radius: 10px; padding: .45em .8em; font: inherit; font-weight: 700; cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 20px; height: 2px; background: currentColor; position: relative; content: "";
}
.nav-toggle-bars::before { position: absolute; top: -6px; }
.nav-toggle-bars::after { position: absolute; top: 6px; }

@media (max-width: 900px) {
  .brand img { width: 180px; }
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; padding: 10px 20px 18px; gap: 2px; }
  .site-nav a { padding: .8em .9em; }
  .site-nav a.nav-cta { margin: 8px 0 0; text-align: center; }
  .header-inner { position: static; }
  .site-header .container { position: relative; }
}

/* END SECTION: HEADER AND MENU */

/* ==================================================================
   SECTION: BUTTONS
   What this controls: the look of every button (dark, outlined and white versions).
   ================================================================== */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4em; }
.btn-stack { display: flex; flex-direction: column; gap: 10px; margin: 1em 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: .8em 1.4em; border-radius: 10px; font-weight: 700; text-decoration: none;
  border: 2px solid transparent; line-height: 1.2; min-height: 48px; text-align: center;
}
@media (prefers-reduced-motion: no-preference) { .btn, .card { transition: background-color .15s, color .15s, box-shadow .15s, transform .15s; } }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-dark); color: #fff; }
.btn-secondary { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--soft); color: var(--navy); }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--soft); color: var(--navy); }
.btn-outline-light { color: #fff; border-color: #fff; }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn-small { padding: .55em 1em; min-height: 44px; font-size: .95rem; }

/* END SECTION: BUTTONS */

/* ==================================================================
   SECTION: SECTIONS
   What this controls: spacing of page sections, the home page banner, page headings and the dark highlights strip.
   ================================================================== */
.section { padding: clamp(48px, 7vw, 88px) 0; }
.section-soft { background: var(--soft); }
.section-head { max-width: 720px; margin-bottom: 2em; }
.section-head.center, .center .section-head { margin-left: auto; margin-right: auto; }
.eyebrow, .kicker {
  color: var(--blue); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  font-size: .82rem; margin: 0 0 .7em;
}
.lead { font-size: clamp(1.1rem, 2vw, 1.25rem); color: var(--muted); max-width: 46em; }
.page-header { background: var(--soft); padding: clamp(40px, 6vw, 72px) 0; border-bottom: 1px solid var(--border); }
.page-header-media img { max-width: 320px; margin: 0 auto; }
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1.2fr 1fr; } }

/* Home banner */
.hero { background: var(--soft); padding: clamp(44px, 7vw, 96px) 0; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.35fr 1fr; } }
.hero h1 { font-size: clamp(2.5rem, 7vw, 4.6rem); line-height: 1.02; letter-spacing: -.025em; margin-bottom: .45em; }
.hero-media img { width: 100%; max-width: 420px; margin: 0 auto; }
@media (max-width: 899px) { .hero-media img { max-width: 220px; } }

.highlights { background: var(--navy); color: #fff; }
.highlight-list {
  list-style: none; margin: 0; padding: 18px 0; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 10px 36px; font-weight: 600;
}
.highlight-list li { display: flex; align-items: center; gap: .55em; }
.highlight-list li::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-bright); flex: none;
}

/* END SECTION: SECTIONS */

/* ==================================================================
   SECTION: GRIDS AND CARDS
   What this controls: the card layouts (courses, dates, features), tick lists, the trainer photo, course pages, dates, testimonials, logos, FAQs, contact boxes and the "Get in touch" band.
   ================================================================== */
.grid { display: grid; gap: 22px; }
@media (min-width: 640px) { .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow); position: relative;
  display: flex; flex-direction: column;
}
.card-title { font-size: 1.25rem; margin-bottom: .4em; }
.card-title a { color: var(--navy); text-decoration: none; }
.stretched-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.course-card { border-top: 5px solid var(--navy); }
.course-card:hover, .first-aid-teaser:hover { box-shadow: 0 10px 30px rgba(12, 33, 73, .14); }
.course-card:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.course-card .stretched-link:focus-visible { outline: none; }
.card-more { margin-top: auto; padding-top: 12px; color: var(--blue); font-weight: 700; }
.first-aid-teaser {
  text-decoration: none; color: var(--text); gap: 6px; border-top: 5px solid var(--blue-bright); background: #f8fbff;
}
.first-aid-teaser strong { color: var(--navy); font-size: 1.25rem; }
.meta, .facts { margin: 0 0 .5em; }
.meta div, .facts div { display: flex; gap: .5em; flex-wrap: wrap; padding: 4px 0; }
.meta dt, .facts dt { font-weight: 700; color: var(--navy); }
.meta dt::after { content: ":"; }
.meta dd, .facts dd { margin: 0; }
.facts div { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
.facts div:last-child { border-bottom: 0; }
.facts dt { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.panel {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow);
}
.panel h2 { font-size: 1.4rem; }
.panel-title { font-size: 1.2rem; }

.tick-list { list-style: none; padding: 0; margin: 0 0 1em; }
.tick-list li { position: relative; padding: 6px 0 6px 34px; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
@media (min-width: 760px) { .two-col { columns: 2; column-gap: 40px; } .two-col li { break-inside: avoid; } }
.qual-list { list-style: none; padding: 0; margin: 0 0 1em; }
.qual-list li { padding: 4px 0 4px 16px; border-left: 3px solid var(--blue-bright); margin-bottom: 6px; }
.plain-list { padding-left: 1.2em; }
.plain-list li { margin-bottom: .4em; }
.pill {
  display: inline-block; background: #e3ecfb; color: var(--navy); font-weight: 700;
  padding: .35em .9em; border-radius: 999px; font-size: .95rem;
}

.feature-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
.feature { font-weight: 700; color: var(--navy); font-size: 1.1rem; padding-left: 64px; min-height: 84px; justify-content: center; }
.feature::before {
  content: ""; position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 8px; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
}

/* Trainer */
.trainer { display: grid; gap: 32px; align-items: center; }
@media (min-width: 760px) { .trainer { grid-template-columns: 240px 1fr; } }
.trainer-photo { width: 240px; height: 240px; object-fit: cover; border-radius: 50%; border: 6px solid var(--soft); box-shadow: var(--shadow); }
.role { color: var(--blue); font-weight: 700; margin-top: -.3em; }

/* Course page */
.breadcrumb ol { list-style: none; padding: 0; margin: 0 0 1em; display: flex; flex-wrap: wrap; gap: .4em; font-size: .95rem; }
.breadcrumb li + li::before { content: "›"; margin-right: .4em; color: var(--muted); }
.breadcrumb [aria-current] { color: var(--muted); }
.course-layout { display: grid; gap: 40px; }
@media (min-width: 900px) { .course-layout { grid-template-columns: 1fr 340px; align-items: start; } .course-aside { position: sticky; top: 100px; } }
.course-main h2 { font-size: 1.5rem; margin-top: 1.2em; }
.course-main h2:first-child { margin-top: 0; }
.course-image { border-radius: var(--radius); margin-bottom: 1.5em; }
.back-link { margin-top: 2.5em; font-weight: 700; }

/* Dates */
.date-badge { display: inline-block; align-self: flex-start; background: var(--navy); color: #fff; font-weight: 700; padding: .3em .8em; border-radius: 8px; }
.date-card .btn-row { margin-top: auto; padding-top: 1em; }

/* Testimonials and partner logos */
.testimonial blockquote { margin: 0; font-size: 1.1rem; }
.testimonial blockquote p::before { content: "“"; } .testimonial blockquote p::after { content: "”"; }
.testimonial figcaption { margin-top: auto; padding-top: 1em; display: flex; flex-direction: column; }
.t-name { font-weight: 700; color: var(--navy); }
.t-role { color: var(--muted); font-size: .95rem; }
.partner-row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: center; }
.partner { display: flex; align-items: center; justify-content: center; width: 180px; height: 96px; padding: 12px; border-radius: 10px; background: #fff; border: 1px solid var(--border); }
.partner-logo { max-height: 70px; width: auto; object-fit: contain; }

/* FAQs */
.faq-list { max-width: 820px; }
.faq { border: 1px solid var(--border); border-radius: 12px; background: #fff; margin-bottom: 12px; }
.faq summary { cursor: pointer; padding: 18px 56px 18px 22px; position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--navy); font-weight: 700; }
.faq[open] summary::after { content: "–"; }
.faq-q { font-size: 1.1rem; margin: 0; display: inline; }
.faq-a { padding: 0 22px 8px; }

/* Contact */
.contact-grid .panel h2 + .btn-stack { margin-top: .5em; }
.copyable { user-select: all; color: var(--navy); word-break: break-all; }
.social-list { list-style: none; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; font-weight: 700; }
.empty-state { max-width: 720px; }

/* Company box and long text */
.company-box { max-width: 720px; }
.prose { max-width: 760px; }
.prose h2 { font-size: 1.4rem; margin-top: 1.6em; }
.prose h3 { margin-top: 1.3em; }

/* Call to action band */
.cta-band { background: var(--navy); color: #fff; text-align: center; padding: clamp(48px, 7vw, 80px) 0; }
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 40em; margin-left: auto; margin-right: auto; color: #dfe6f3; font-size: 1.15rem; }

/* END SECTION: GRIDS AND CARDS */

/* ==================================================================
   SECTION: FOOTER
   What this controls: the dark area at the bottom of every page.
   ================================================================== */
.site-footer { background: var(--navy-dark); color: #dfe6f3; padding-top: 56px; font-size: .97rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: #cfe3ff; text-decoration: underline; text-underline-offset: .2em; }

/* Top part: three columns on wider screens, stacked on phones */
.footer-grid { display: grid; gap: 36px; padding-bottom: 44px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; } }
.footer-logo { width: 52px; height: 52px; border-radius: 12px; background: #fff; padding: 4px; margin-bottom: 14px; }
.footer-name { font-weight: 800; color: #fff; font-size: 1.2rem; margin: 0 0 .2em; }
.footer-tagline { color: #9fb0cc; font-size: .9rem; letter-spacing: .04em; margin: 0; }
.footer-lms { margin-top: 18px; }
.footer-heading { color: #9fb0cc; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 1em; }
.footer-heading-gap { margin-top: 1.8em; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { padding: 5px 0; }
.footer-links:not(.footer-contact):not(.footer-social) { columns: 2; column-gap: 24px; }
.footer-links li { break-inside: avoid; }
.footer-contact a { word-break: break-word; }
.footer-muted { color: #9fb0cc; }

/* Bottom bar: © on the left, legal links on the right */
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 18px 0 22px; font-size: .86rem; color: #9fb0cc; }
.footer-bottom-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.footer-bottom p { margin: 0; }
.footer-legal-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.footer-legal-links li { padding: 0 14px; border-left: 1px solid rgba(255, 255, 255, .25); line-height: 1.2; }
.footer-legal-links li:first-child { padding-left: 0; border-left: 0; }
.footer-legal-links a { color: #dfe6f3; }
.footer-legal-links li:first-child a { color: #fff; font-weight: 700; }
.footer-office { margin-top: 10px !important; }
@media (max-width: 759px) {
  .footer-bottom-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-legal-links { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-legal-links li { padding: 0; border-left: 0; }
}

/* END SECTION: FOOTER */

/* ==================================================================
   SECTION: ALERTS, PREVIEW BAR, SECTION LABELS
   What this controls: the red warning box, the yellow preview bar and the orange section labels (the last two only appear on your own computer).
   ================================================================== */
.alert { margin: 20px 0; padding: 16px 20px; background: #fdecec; border: 2px solid #b42318; color: #5c1010; border-radius: 10px; }
.preview-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff7cc; color: #3d2f00;
  border-top: 2px solid #a07c00; padding: 10px 20px; font-size: .92rem; text-align: center;
}
.preview-bar p { margin: 0; }
.preview-bar a { color: #3d2f00; font-weight: 700; }
body.has-preview-bar { padding-bottom: 64px; }

.show-edit-labels [data-edit] { position: relative; outline: 2px dashed #d97706; outline-offset: -2px; }
.show-edit-labels [data-edit]::before {
  content: "✎ " attr(data-edit); position: absolute; z-index: 40; top: 6px; left: 6px; max-width: calc(100% - 12px);
  background: #d97706; color: #fff; font: 700 13px/1.3 var(--font); padding: 4px 8px; border-radius: 6px;
}
.show-edit-labels .site-header [data-edit]::before { top: auto; bottom: 2px; }
.show-edit-labels [data-edit=""] { outline: 0; }
.show-edit-labels [data-edit=""]::before { display: none; }

/* END SECTION: ALERTS, PREVIEW BAR, SECTION LABELS */

/* ==================================================================
   SECTION: CHECKER PAGE
   What this controls: the look of check.html.
   ================================================================== */
.check-summary { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.check-summary li { padding: 10px 16px; border-radius: 10px; font-weight: 600; border: 2px solid; }
.check-summary strong { font-size: 1.4rem; margin-right: .2em; }
.good { background: #e7f6ec; border-color: #1f7a3d; color: #0f4d24; }
.bad { background: #fdecec; border-color: #b42318; color: #5c1010; }
.warn { background: #fff7cc; border-color: #a07c00; color: #4d3a00; }
.info { background: #e3ecfb; border-color: var(--blue); color: var(--navy); }
.tag { display: inline-block; padding: .1em .5em; border-radius: 6px; border: 1px solid; font-size: .85rem; font-weight: 700; margin-left: .4em; }
.check-ok { color: #0f4d24; font-weight: 700; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--soft); color: var(--navy); }
.nowrap { white-space: nowrap; }

/* END SECTION: CHECKER PAGE */

/* ==================================================================
   SECTION: REDUCED MOTION AND PRINT
   What this controls: turns off movement for visitors who ask their device for less motion, and tidies pages when printed.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .preview-bar, .cta-band, .nav-toggle { display: none !important; }
  body { font-size: 12pt; }
}

/* END SECTION: REDUCED MOTION AND PRINT */