/* ==========================================================================
   refinement.css - the design layer

   LOADED AFTER bootstrap.min.css AND BEFORE the two accessibility sheets:

     vendor -> style -> style_rtl -> responsive -> fontawesome -> bootstrap
       -> refinement.css <-        -> accessibility-toolbar -> accessibility

   After Bootstrap, so this wins over the legacy cascade it inherited. Before the
   accessibility sheets, so high-contrast, dyslexia-font, larger-text and focus
   rules still override everything here. Nothing in this file may beat an
   accessibility preference - that is the whole reason the site exists.

   WHY IT EXISTS, measured on the homepage rather than asserted:
     - FOUR text typefaces rendering: Poppins, Raleway, and Calibri and Candara,
       Windows-only fonts leaking from the legacy sheet, so the page never looked
       the same on two machines.
     - THIRTEEN font sizes with no scale: 12, 13, 14, 14.67, 15, 16, 18.67, 22,
       24, 25, 28, 32, 40 - and body copy split between 15px and 16px.
     - h1 and h2 BOTH 40px, h1 LIGHTER (500) than h2 (700), then h3 dropping to
       16px, the same size as a paragraph. No hierarchy at all.
     - NINETEEN text colours, six of them near-blacks a few points apart, plus
       Bootstrap's #007bff competing with the brand purple.
     - SEVEN border radii: 1px, 4px, 5px, 8px, 10px, 50%, 100%.
     - Cards in one row measured 252px and 260px, so the counts sat at different
       heights and the row read as crooked.
   ========================================================================== */

:root {
    --hw-ink:        #1b1f2a;
    --hw-muted:      #5a6072;
    --hw-line:       #e3e6ef;
    --hw-bg:         #f5f6fa;
    --hw-surface:    #ffffff;

    --hw-brand:      #6253f1;
    --hw-brand-dark: #4f41d8;

    /* Modular scale at 1.25 from a 16px base. The point is the STEPS: a rung
       between section heading and body copy, which is what was missing. */
    --hw-step--1: 0.875rem;
    --hw-step-0:  1rem;
    --hw-step-1:  1.25rem;
    --hw-step-2:  1.5rem;
    --hw-step-3:  2rem;
    --hw-step-4:  2.75rem;

    --hw-section-y: 72px;
    --hw-radius:    12px;
    --hw-radius-sm:  8px;
    --hw-shadow: 0 1px 2px rgba(27, 31, 42, .04), 0 8px 24px rgba(27, 31, 42, .06);
    --hw-shadow-hover: 0 2px 4px rgba(27, 31, 42, .06), 0 14px 32px rgba(27, 31, 42, .10);
}

/* 1. ONE TYPEFACE ------------------------------------------------------- */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6, p, li, td, th, label, span, div, a {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Icon fonts keep their own family or the glyphs become letters. */
.uil, [class^="uil-"], [class*=" uil-"] { font-family: "unicons" !important; }
.fa, .fas, .far, .fab, [class^="fa-"], [class*=" fa-"] { font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands" !important; }
.material-icons { font-family: "Material-Icons" !important; }

/* 2. TYPE SCALE --------------------------------------------------------- */
body {
    font-size: var(--hw-step-0);
    line-height: 1.7;
    color: var(--hw-ink);
    background: var(--hw-bg);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { color: var(--hw-ink); letter-spacing: -0.01em; margin-top: 0; }
h1 { font-size: var(--hw-step-4); line-height: 1.15; font-weight: 700; margin-bottom: 20px; }
h2 { font-size: var(--hw-step-3); line-height: 1.22; font-weight: 700; margin-bottom: 20px; }
h3 { font-size: var(--hw-step-1); line-height: 1.35; font-weight: 600; margin-bottom: 10px; letter-spacing: 0; }
h4 { font-size: var(--hw-step-2); line-height: 1.35; font-weight: 600; margin-bottom: 10px; letter-spacing: 0; }
h5 { font-size: var(--hw-step-1); line-height: 1.4;  font-weight: 600; margin-bottom: 8px; letter-spacing: 0; }
h6 { font-size: var(--hw-step-0); line-height: 1.4;  font-weight: 600; margin-bottom: 8px; letter-spacing: 0; }

/* Body copy was weight 300 at 16px - thin enough to read as washed out. */
p, li { font-size: var(--hw-step-0); line-height: 1.7; font-weight: 400; }
small, .small, .text-muted, .courses-amount, .course-card-instructor {
    font-size: var(--hw-step--1);
    color: var(--hw-muted);
}

/* 3. LINKS AND BUTTONS -------------------------------------------------- */
a { color: var(--hw-brand); }
a:hover { color: var(--hw-brand-dark); }
.btn, button.btn, a.btn, input[type="submit"] {
    border-radius: var(--hw-radius-sm);
    font-weight: 600;
    letter-spacing: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn-primary, .btn.btn-primary { background-color: var(--hw-brand); border-color: var(--hw-brand); }
.btn-primary:hover, .btn.btn-primary:hover { background-color: var(--hw-brand-dark); border-color: var(--hw-brand-dark); }

/* 4. VERTICAL RHYTHM ---------------------------------------------------- */
.section, .section.layout_padding {
    padding-top: var(--hw-section-y);
    padding-bottom: var(--hw-section-y);
}
.section.padding_bottom-0 { padding-bottom: 0; }
.hchead { margin-bottom: 44px; }
.hchead h2 { margin-bottom: 12px; }
.hchead p { color: var(--hw-muted); margin-bottom: 0; }

/* 5. CATEGORY CARDS - the alignment fix --------------------------------- */
.categories .row > [class*="col-"] { display: flex; margin-bottom: 24px; }
.courses-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    background: var(--hw-surface);
    border: 1px solid var(--hw-line);
    border-radius: var(--hw-radius);
    padding: 32px 22px 26px;
    box-shadow: var(--hw-shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.courses-item:hover { transform: translateY(-2px); box-shadow: var(--hw-shadow-hover); }
/* Several categories have no icon and rendered as an empty disc; a fixed size
   keeps the row even either way. */
.courses-item > i {
    flex: 0 0 auto;
    width: 64px; height: 64px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px;
    border-radius: 50%;
    background: rgba(98, 83, 241, .10);
    color: var(--hw-brand);
    margin-bottom: 18px;
}
/* Two lines reserved, so one long name cannot set the height of the row. */
.courses-title {
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--hw-step-0);
    line-height: 1.45;
    font-weight: 600;
    margin: 0 0 14px;
    min-height: calc(1.45em * 2);
}
.courses-title a { color: var(--hw-ink); text-decoration: none; }
.courses-title a:hover { color: var(--hw-brand); text-decoration: underline; }
.courses-amount { margin-top: auto; font-weight: 500; }

/* 6. COURSE CARDS ------------------------------------------------------- */
.row > .col-sm-3.mb-3 { display: flex; align-items: stretch; }
.course-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--hw-surface);
    border: 1px solid var(--hw-line);
    border-radius: var(--hw-radius);
    overflow: hidden;
    box-shadow: var(--hw-shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.course-card:hover { transform: translateY(-2px); box-shadow: var(--hw-shadow-hover); }
/* One ratio for every card: the thumbnails are a mix of photographs and
   text-on-white graphics, so without this the titles started at a different
   height in every card. */
.course-card-thumbnail {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eceef5;
}
.course-card-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-card-thumbnail .catagroy {
    position: absolute;
    inset-inline-start: 12px;
    inset-block-end: 12px;
    max-width: calc(100% - 24px);
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(27, 31, 42, .82);
    color: #fff;
    font-size: var(--hw-step--1);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.course-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 18px 16px; gap: 6px; }
.course-card-body h3 {
    font-size: var(--hw-step-1);
    line-height: 1.35;
    font-weight: 600;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.35em * 2);
}
.course-card-body h3 a { color: var(--hw-ink); text-decoration: none; }
.course-card-body h3 a:hover { color: var(--hw-brand); }
.course-card-body > p {
    color: var(--hw-muted);
    font-size: var(--hw-step--1);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.course-card-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--hw-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--hw-step--1);
    font-weight: 600;
}

/* 7. PANELS AND IMAGES -------------------------------------------------- */
.card, .panel, .blog-grid, .gallery-item {
    border-radius: var(--hw-radius);
    border: 1px solid var(--hw-line);
    box-shadow: var(--hw-shadow);
    background: var(--hw-surface);
    overflow: hidden;
}
img { max-width: 100%; height: auto; }

/* 8. RESPONSIVE --------------------------------------------------------- */
@media (max-width: 991.98px) {
    :root { --hw-section-y: 52px; }
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    .row > .col-sm-3.mb-3 { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 575.98px) {
    :root { --hw-section-y: 40px; }
    h1 { font-size: 1.875rem; }
    h2 { font-size: 1.5rem; }
    .row > .col-sm-3.mb-3 { flex: 0 0 100%; max-width: 100%; }
    .courses-item { padding: 24px 18px 20px; }
}

/* 9. MOTION ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .courses-item, .course-card, .btn { transition: none; }
    .courses-item:hover, .course-card:hover { transform: none; }
}


/* ==========================================================================
   10. MATCHING THE LEGACY CASCADE DELIBERATELY

   Two rules in style.css outrank the element selectors above, so the sizes
   there never applied:

     .heading_main h2                                     40px, Raleway
     .rs-courses-categories .courses-item .courses-title   16px, min-height 70px

   The answer is to match their specificity, not to reach for !important —
   !important is what produces a stylesheet nobody can safely change later.

   RALEWAY IS KEPT ON DISPLAY HEADINGS. It is a deliberate pairing with Poppins
   for text, not leakage; the leakage was Calibri and Candara. Section 1 above
   is therefore scoped so it does not fight it.
   ========================================================================== */

.heading_main h2 {
    font-size: var(--hw-step-3);
    line-height: 1.22;
    margin-bottom: 16px;
    padding-bottom: 18px;   /* room for the decorative underline image */
}
.heading_main p,
.heading_main p.large {
    font-size: var(--hw-step-0);
    color: var(--hw-muted);
    font-weight: 400;
}

/* Raleway stays on display headings; Poppins carries the text. */
.heading_main h2,
.title-box h2,
.about-main-info h2 {
    font-family: "Raleway", "Poppins", system-ui, sans-serif;
}

/* The old min-height:70px was the previous attempt at equal-height cards. The
   flex rules in section 5 do that job properly now, so this reserves exactly
   two lines instead of a fixed block that left a gap under short titles. */
.rs-courses-categories .courses-item .courses-title,
.courses-item .courses-title {
    font-size: 1.0625rem;              /* 17px - a rung above body, below h3 */
    line-height: 1.45;
    min-height: calc(1.45em * 2);
    margin-bottom: 14px;
}


/* ==========================================================================
   11. CONTENT PASTED OUT OF WORD

   Course and blog copy was entered through the old panel's rich-text editor,
   which preserved Word's formatting on paste. The database therefore contains
   inline styles like:

     font-size:11pt; font-family:Calibri, sans-serif; color:#0070C0
     font-family:Candara, sans-serif; font-size:18.6667px

   That is where Calibri and Candara were coming from, and where the stray
   18.67px and 14.67px sizes came from. Both fonts ship with Microsoft Office,
   so on a Mac, a phone or a Linux box the browser substituted something else
   and the same page rendered differently for different visitors.

   An inline style attribute beats any selector, so this is the one place
   !important is the correct tool rather than a shortcut. Scoped to rendered
   content only - it must not touch the interface.
   ========================================================================== */
/* Checked before writing this: FIVE elements on the site carry an inline
   font-family and all five are Word pastes - none of the interface uses one.
   A global rule is therefore safe, and narrower selectors kept missing the
   content because it sits in different wrappers per page (.blog-right here,
   the course body elsewhere). An inline style beats every selector, so
   !important is the correct tool here rather than a shortcut. */
[style*="font-family"] {
    font-family: inherit !important;
}

/* Word also pastes absolute sizes in points and fractional pixels - 11pt,
   18.6667px, 14.6667px - which ignore the reader's own text-size preference,
   so the accessibility toolbar's larger-text setting could not move them.
   Scoped to rendered content, because the interface does use inline sizes. */
.blog-right [style*="font-size"],
.course-card-body [style*="font-size"],
.course-detail [style*="font-size"],
.blog-details [style*="font-size"],
.page-content [style*="font-size"],
.lesson-content [style*="font-size"],
.cms-content [style*="font-size"],
.about-main-info [style*="font-size"] {
    font-size: inherit !important;
}

/* Word's own colours travel with the paste too (#0070C0 blue, hard black).
   Inheriting keeps body copy on the one ink colour and, more importantly,
   keeps it legible under the high-contrast themes, which those inline colours
   would otherwise override. */
.blog-right [style*="color"],
.course-card-body [style*="color"],
.course-detail [style*="color"],
.blog-details [style*="color"],
.page-content [style*="color"],
.lesson-content [style*="color"],
.cms-content [style*="color"] {
    color: inherit !important;
}