/* ==========================================================================
   SEO hub pages: /health-and-safety-courses (.hsc-page),
   /health-and-safety-training (.hst-page), /ireland-safety-training
   (.ist-page). The three pages keep their own markup and their inline
   token sheets; this file, loaded after them, moves the tokens and the key
   surfaces into the approved design language: Inter and Plus Jakarta Sans,
   the sky and lavender page gradient, white glass cards, royal blue
   accents, one navy plate per page for the call to action. The copy is
   untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
.hsc-page,
.hst-page,
.ist-page {
    --hub-ink: #0b1220;
    --hub-ink-2: #253247;
    --hub-ink-3: #3f4d66;
    --hub-blue: #2563eb;
    --hub-blue-deep: #1d4ed8;
    --hub-blue-50: #eff6ff;
    --hub-line: rgba(30, 58, 138, 0.1);
    --hub-line-strong: rgba(30, 58, 138, 0.18);
    --hub-glass: rgba(255, 255, 255, 0.78);
    --hub-glass-strong: rgba(255, 255, 255, 0.92);
    --hub-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 28px 60px -34px rgba(30, 58, 138, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    --hub-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.05), 0 34px 70px -34px rgba(30, 58, 138, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    --hub-radius: 26px;
    --hub-radius-sm: 18px;
    --hub-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --hub-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --hub-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --hub-cta: linear-gradient(135deg, #0b1f3f 0%, #1e3a5f 45%, #2563eb 100%);
    --hub-btn: linear-gradient(135deg, #1e3a5f 0%, #2563eb 55%, #1d4ed8 100%);

    font-family: var(--hub-font-body);
    color: var(--hub-ink);
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(1100px 620px at 8% -8%, rgba(191, 219, 254, 0.55) 0%, rgba(191, 219, 254, 0) 60%),
        radial-gradient(900px 560px at 96% 4%, rgba(221, 214, 254, 0.5) 0%, rgba(221, 214, 254, 0) 60%),
        radial-gradient(760px 460px at 50% 100%, rgba(167, 243, 208, 0.28) 0%, rgba(167, 243, 208, 0) 65%),
        linear-gradient(180deg, #f5f8ff 0%, #eef3fb 100%);
}

.hsc-page {
    --hsc-ink: var(--hub-ink);
    --hsc-ink-soft: var(--hub-ink-2);
    --hsc-muted: var(--hub-ink-3);
    --hsc-line: var(--hub-line);
    --hsc-teal: var(--hub-blue);
    --hsc-teal-700: var(--hub-blue-deep);
    --hsc-teal-50: var(--hub-blue-50);
    --hsc-sky: #f5f8ff;
    --hsc-cream: transparent;
    --hsc-radius: var(--hub-radius);
    --hsc-radius-sm: var(--hub-radius-sm);
    --hsc-shadow: var(--hub-shadow);
    --hsc-shadow-lg: var(--hub-shadow-hover);
}

.hst-page {
    --hst-ink: var(--hub-ink);
    --hst-body: var(--hub-ink-2);
    --hst-soft: var(--hub-ink-3);
    --hst-line: var(--hub-line);
    --hst-teal: var(--hub-blue);
    --hst-teal-d: var(--hub-blue-deep);
    --hst-mint: var(--hub-blue-50);
    --hst-cream: transparent;
    --hst-radius: var(--hub-radius);
    --hst-r-sm: var(--hub-radius-sm);
    --hst-sh: var(--hub-shadow);
    --hst-sh2: var(--hub-shadow-hover);
}

.ist-page {
    --ist-ink: var(--hub-ink);
    --ist-body: var(--hub-ink-2);
    --ist-soft: var(--hub-ink-3);
    --ist-line: var(--hub-line);
    --ist-brand: var(--hub-blue);
    --ist-brand-d: var(--hub-blue-deep);
    --ist-ice: var(--hub-blue-50);
    --ist-paper: transparent;
    --ist-card: var(--hub-glass-strong);
    --ist-r: var(--hub-radius-sm);
    --ist-r-lg: var(--hub-radius);
    --ist-sh: var(--hub-shadow);
    --ist-sh2: var(--hub-shadow-hover);
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.hsc-page h1, .hsc-page h2, .hsc-page h3, .hsc-page h4,
.hst-page h1, .hst-page h2, .hst-page h3, .hst-page h4,
.ist-page h1, .ist-page h2, .ist-page h3, .ist-page h4,
.hsc-page .hsc-price, .hst-page .hst-price, .ist-page .ist-list__price, .ist-page .ist-kpi__num,
.hsc-page .hsc-stat strong {
    font-family: var(--hub-font-display);
    letter-spacing: -0.02em;
    color: var(--hub-ink);
}

.hsc-page a,
.hst-page a,
.ist-page a {
    color: var(--hub-blue-deep);
    font-weight: 650;
}

.hsc-page a:hover,
.hst-page a:hover,
.ist-page a:hover {
    color: var(--hub-blue);
}

.hsc-hero h1,
.hst-hero h1,
.ist-hero h1 {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.06;
}

/* Eyebrows as the shared chip */
.hsc-eyebrow,
.hst-kicker,
.ist-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 24px;
    padding: 9px 16px 9px 14px;
    border-radius: 999px;
    background: var(--hub-glass-strong);
    border: 1px solid var(--hub-line);
    box-shadow: 0 10px 24px -18px rgba(30, 58, 138, 0.5);
    font-family: var(--hub-font-body);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hub-ink-2);
    line-height: 1;
}

.hsc-eyebrow::before,
.hst-kicker::before,
.ist-kicker::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hub-blue) 0%, var(--hub-blue-deep) 100%);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

/* --------------------------------------------------------------------------
   Heroes: the page gradient shows through, the image sits in a glass frame
   -------------------------------------------------------------------------- */
.hsc-hero,
.hst-hero,
.ist-hero {
    background: none;
}

.hsc-hero__lead,
.hst-hero__lead,
.ist-hero__lead {
    font-family: var(--hub-font-body);
    font-weight: 500;
    color: var(--hub-ink-2);
}

.hsc-visual,
.hst-visual,
.ist-frame {
    border-radius: var(--hub-radius);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: var(--hub-shadow);
    background: var(--hub-glass);
    overflow: hidden;
}

.hsc-stat,
.hst-mini,
.ist-kpi__cell {
    background: var(--hub-glass);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--hub-radius-sm);
    box-shadow: var(--hub-shadow), 0 0 0 1px var(--hub-line);
}

/* --------------------------------------------------------------------------
   Buttons: the primary is the navy to blue gradient, the secondary the
   glass outline
   -------------------------------------------------------------------------- */
.hsc-btn,
.hst-btn,
.ist-btn {
    font-family: var(--hub-font-display);
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 14px;
    transition: transform 0.25s var(--hub-ease), box-shadow 0.25s var(--hub-ease), background-color 0.25s var(--hub-ease), border-color 0.25s var(--hub-ease);
}

.hsc-btn--solid,
.hst-btn--fill,
.ist-btn--pri {
    background: var(--hub-btn);
    color: #ffffff !important;
    border: 0;
    box-shadow: 0 14px 28px -14px rgba(37, 99, 235, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.hsc-btn--solid:hover,
.hst-btn--fill:hover,
.ist-btn--pri:hover {
    transform: translateY(-2px);
    background: var(--hub-btn);
    color: #ffffff !important;
    box-shadow: 0 18px 34px -14px rgba(37, 99, 235, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hsc-btn--line,
.hst-btn--glass,
.ist-btn--sec {
    background: var(--hub-glass-strong);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--hub-blue-deep) !important;
    border: 1px solid rgba(37, 99, 235, 0.28);
    box-shadow: 0 10px 24px -18px rgba(30, 58, 138, 0.5);
}

.hsc-btn--line:hover,
.hst-btn--glass:hover,
.ist-btn--sec:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.55);
    background: #ffffff;
    color: var(--hub-blue-deep) !important;
}

/* --------------------------------------------------------------------------
   Jump navigation: glass pills on a glass bar that melts into the page
   -------------------------------------------------------------------------- */
.hsc-jumpwrap,
.hst-mnav,
.ist-bar {
    background: rgba(245, 248, 255, 0.82);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(30, 58, 138, 0.08);
    box-shadow: none;
}

.hsc-jump a,
.hst-mnav a,
.ist-bar a {
    background: var(--hub-glass-strong);
    border: 1px solid var(--hub-line);
    color: var(--hub-ink-2) !important;
    font-family: var(--hub-font-body);
    font-weight: 700;
    box-shadow: 0 10px 24px -18px rgba(30, 58, 138, 0.5);
}

.hsc-jump a:hover,
.hst-mnav a:hover,
.ist-bar a:hover {
    color: var(--hub-blue-deep) !important;
    border-color: rgba(37, 99, 235, 0.4);
    background: #ffffff;
}

/* --------------------------------------------------------------------------
   Cards, tiles, panels: white glass, soft border, one shadow
   -------------------------------------------------------------------------- */
.hsc-tile,
.hsc-panel,
.hsc-glass,
.hsc-quote__card,
.hsc-tablewrap,
.hst-course,
.hst-panel,
.hst-split__card,
.hst-tl-item,
.ist-cell,
.ist-strip__item,
.ist-voice__card,
.ist-callout,
.ist-list {
    background: var(--hub-glass);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: var(--hub-shadow), 0 0 0 1px var(--hub-line);
}

.hsc-tile:hover,
.hst-course:hover,
.ist-cell:hover,
.ist-strip__item:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: var(--hub-shadow-hover), 0 0 0 1px rgba(37, 99, 235, 0.22);
}

.hsc-tile,
.hst-course {
    border-radius: 24px;
}

.hsc-tile__media,
.hst-course__media {
    background: linear-gradient(145deg, #dbeafe 0%, #ede9fe 50%, #f5f8ff 100%);
}

.hsc-pill,
.hst-tag,
.ist-badge,
.hst-flag {
    background: linear-gradient(135deg, var(--hub-blue) 0%, var(--hub-blue-deep) 100%);
    color: #ffffff;
    font-family: var(--hub-font-body);
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 8px 18px -10px rgba(37, 99, 235, 0.8);
}

.hsc-pill,
.hst-tag,
.ist-badge {
    display: inline-flex;
    align-items: center;
    width: auto;
    align-self: flex-start;
    border-radius: 999px;
    font-size: 12px;
    padding: 6px 11px;
}

.hst-flag--food {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 8px 18px -10px rgba(5, 150, 105, 0.8);
}

.hsc-cathead {
    border-bottom-color: var(--hub-line-strong);
}

.hsc-table th {
    background: linear-gradient(180deg, #f5f8ff 0%, #e8eefb 100%);
    font-family: var(--hub-font-body);
}

.hsc-band,
.ist-callout {
    background: linear-gradient(120deg, rgba(219, 234, 254, 0.7) 0%, rgba(255, 255, 255, 0.9) 55%, rgba(237, 233, 254, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: var(--hub-shadow), 0 0 0 1px var(--hub-line);
}

.hsc-quote__card::before,
.ist-voice__card::before {
    color: rgba(37, 99, 235, 0.22);
}

/* FAQ accordions */
.hsc-faq details,
.hst-faq details,
.ist-faq details {
    background: var(--hub-glass);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--hub-radius-sm);
    box-shadow: var(--hub-shadow), 0 0 0 1px var(--hub-line);
    margin-bottom: 12px;
}

.hsc-faq summary,
.hst-faq summary,
.ist-faq summary {
    font-family: var(--hub-font-display);
    color: var(--hub-ink);
}

.hsc-faq summary::after,
.hst-faq summary::after,
.ist-faq summary::after {
    color: var(--hub-blue);
}

/* --------------------------------------------------------------------------
   The one dark plate per page: the closing call to action
   -------------------------------------------------------------------------- */
.hsc-cta,
.hst-cta,
.ist-cta {
    position: relative;
    overflow: hidden;
    background: var(--hub-cta);
    border-radius: var(--hub-radius);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 40px 80px -40px rgba(30, 58, 138, 0.7);
}

.hsc-cta::before,
.hst-cta::before,
.ist-cta::before {
    content: '';
    position: absolute;
    inset: -40% -20% auto;
    height: 120%;
    background: radial-gradient(closest-side, rgba(96, 165, 250, 0.35), rgba(96, 165, 250, 0));
    pointer-events: none;
}

.hsc-cta > *,
.hst-cta > *,
.ist-cta > * {
    position: relative;
    z-index: 1;
}

.hsc-cta h2,
.hst-cta h2,
.ist-cta h2 {
    color: #ffffff !important;
}

.hsc-cta .hsc-btn,
.hst-cta .hst-btn,
.ist-cta .ist-btn {
    text-decoration: none !important;
}

.hsc-cta .hsc-btn--solid,
.hst-cta .hst-btn--fill,
.ist-cta .ist-btn--pri {
    background: #ffffff;
    color: var(--hub-blue-deep) !important;
    box-shadow: 0 14px 28px -14px rgba(2, 6, 23, 0.6);
}

.hsc-cta .hsc-btn--solid:hover,
.hst-cta .hst-btn--fill:hover,
.ist-cta .ist-btn--pri:hover {
    background: var(--hub-blue-50);
    color: var(--hub-blue-deep) !important;
}

.hsc-cta .hsc-btn--line,
.hst-cta .hst-btn--glass,
.ist-cta .ist-btn--sec {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff !important;
}

.hsc-cta .hsc-btn--line:hover,
.hst-cta .hst-btn--glass:hover,
.ist-cta .ist-btn--sec:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hsc-btn, .hst-btn, .ist-btn,
    .hsc-tile, .hst-course, .ist-cell, .ist-strip__item {
        transition: none;
    }

    .hsc-btn:hover, .hst-btn:hover, .ist-btn:hover,
    .hsc-tile:hover, .hst-course:hover, .ist-cell:hover, .ist-strip__item:hover {
        transform: none;
    }
}