/* /courses/ pages — category.php (filter by category), body.php (filter by
   accrediting body), and ByBody.php (browse one accrediting body's
   qualifications, split into Beginner/Intermediate/Advanced tabs — the
   "by accrediting body" mirror of /category/<name>). Self-contained design
   tokens matching the rest of the site's "fresh palette" (see Category.css/
   About.css/FAQ.css for the same tokens under their own page-scoped names).
   Tab switching and the checkbox filters are both built with plain
   elements + vanilla JS visibility toggling (see each page's own inline
   script) — no jQuery, no .load()/AJAX page fragments for the tabs (all of
   ByBody's data is on the page after one request); the filter pages still
   use one small AJAX request per filter change, since that's genuinely
   interactive, but render the full unfiltered list server-side on first
   load so a plain page view never needs a network round trip. */
:root{
    --courses-navy: #0B1F3A;
    --courses-navy-2: #14315C;
    --courses-navy-3: #1E4079;
    --courses-coral: #D6363C;
    --courses-coral-dark: #C22A30;
    --courses-amber: #FFB020;
    --courses-teal: #0B7A6D;
    --courses-bg: #F5F7FB;
    --courses-ink: #1A2333;
    --courses-muted: #5B6478;
    --courses-border: #E3E7F0;
    --courses-heading-font: 'Zilla Slab', Georgia, serif;
    --courses-body-font: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.courses-main{background:var(--courses-bg);font-family:var(--courses-body-font);color:var(--courses-ink);}

/* Breadcrumb */
.courses-crumb{background:#fff;border-bottom:1px solid var(--courses-border);padding:12px 20px;}
.courses-crumb-wrap{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:8px;font-size:0.85rem;color:var(--courses-muted);flex-wrap:wrap;}
.courses-crumb-wrap a{color:var(--courses-navy-3);text-decoration:none;}
.courses-crumb-wrap a:hover{text-decoration:underline;}

/* Hero */
.courses-hero{background:linear-gradient(100deg, var(--courses-navy) 0%, var(--courses-navy-2) 55%, var(--courses-navy-3) 100%);color:#fff;padding:48px 20px;text-align:center;}
.courses-hero-eyebrow{display:inline-block;font-size:0.8rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--courses-amber);margin-bottom:10px;}
.courses-hero h1{font-family:var(--courses-heading-font);font-size:clamp(1.8rem, 4vw, 2.5rem);font-weight:700;margin:0 0 12px;}
.courses-hero p{max-width:680px;margin:0 auto;color:#D7DEEC;font-size:1.02rem;line-height:1.6;}
.courses-hero-actions{margin-top:18px;}
.courses-hero-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.12);color:#fff;font-weight:700;font-size:0.88rem;padding:10px 20px;border-radius:999px;text-decoration:none;border:1px solid rgba(255,255,255,0.3);transition:background-color 0.2s ease;}
.courses-hero-btn:hover{background:rgba(255,255,255,0.22);}

/* Layout */
.courses-wrap{max-width:1120px;margin:0 auto;padding:36px 20px 56px;}

/* Level tabs (ByBody.php) */
.courses-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;}
.courses-tab{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--courses-navy-3);font-weight:700;font-size:0.92rem;padding:11px 20px;border-radius:999px;border:1px solid var(--courses-border);cursor:pointer;transition:background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;}
.courses-tab:hover{border-color:var(--courses-navy-3);}
.courses-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--courses-bg);color:var(--courses-navy-3);font-size:0.78rem;font-weight:700;}
.courses-tab[aria-selected="true"]{background:var(--courses-navy);color:#fff;border-color:var(--courses-navy);}
.courses-tab[aria-selected="true"] .courses-tab-count{background:var(--courses-coral);color:#fff;}

/* Accreditor info panel (ByBody.php) */
.courses-info{background:#fff;border:1px solid var(--courses-border);border-radius:14px;padding:20px 24px;margin-bottom:24px;}
.courses-info p{margin:0 0 12px;color:var(--courses-ink);font-size:0.95rem;line-height:1.65;}
.courses-info p:last-child{margin-bottom:0;}
.courses-info-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;}
.courses-info-note{color:var(--courses-muted);font-size:0.88rem;}
.courses-info-visit{display:inline-flex;align-items:center;gap:8px;background:var(--courses-navy);color:#fff;font-weight:700;font-size:0.85rem;padding:10px 18px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:background-color 0.2s ease;}
.courses-info-visit:hover{background:var(--courses-navy-3);}

/* Course card grid (shared by ByBody.php + the two filter pages' results) */
.courses-panel{display:none;}
.courses-panel.is-active{display:block;}
.courses-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:20px;}

.courses-card{background:#fff;border:1px solid var(--courses-border);border-radius:14px;box-shadow:0 6px 18px rgba(11,31,58,0.06);overflow:hidden;display:flex;flex-direction:column;}
.courses-card-head{background:var(--courses-navy);color:#fff;padding:16px 20px;}
.courses-card-head h3{font-family:var(--courses-heading-font);font-size:1.05rem;font-weight:700;margin:0 0 4px;line-height:1.35;}
.courses-card-meta{color:var(--courses-amber);font-size:0.8rem;font-weight:600;letter-spacing:0.02em;}

.courses-card-body{padding:16px 20px;flex:1;}
.courses-card-label{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--courses-muted);margin:0 0 6px;}
.courses-card-desc{color:var(--courses-ink);font-size:0.92rem;line-height:1.6;}
.courses-card-desc p{margin:0 0 10px;}
.courses-card-desc p:last-child{margin-bottom:0;}
.courses-card-other{margin-top:12px;padding-top:12px;border-top:1px solid var(--courses-border);color:var(--courses-muted);font-size:0.85rem;line-height:1.55;}

.courses-card-actions{display:flex;gap:10px;padding:14px 20px;border-top:1px solid var(--courses-border);}
.courses-card-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:0.85rem;padding:10px 14px;border-radius:999px;text-decoration:none;text-align:center;transition:background-color 0.2s ease, transform 0.2s ease;}
.courses-card-btn-info{background:var(--courses-bg);color:var(--courses-navy-3);border:1px solid var(--courses-border);}
.courses-card-btn-info:hover{background:#EDF0F8;}
.courses-card-btn-dates{background:var(--courses-coral);color:#fff;}
.courses-card-btn-dates:hover{background:var(--courses-coral-dark);transform:translateY(-1px);}

.courses-empty,.courses-empty-page{background:#fff;border:1px solid var(--courses-border);border-radius:14px;padding:36px;text-align:center;color:var(--courses-muted);}
.courses-empty-page{max-width:640px;margin:36px auto;}
.courses-empty-page h1{font-family:var(--courses-heading-font);color:var(--courses-navy);font-size:1.5rem;margin:0 0 10px;}
.courses-empty-page a{color:var(--courses-navy-3);font-weight:700;}

/* Filter pages (category.php / body.php): sidebar checkbox list + results grid */
.courses-filter-layout{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start;}
.courses-filter-panel{background:#fff;border:1px solid var(--courses-border);border-radius:14px;padding:20px;position:sticky;top:20px;}
.courses-filter-panel h2{font-family:var(--courses-heading-font);font-size:1.05rem;color:var(--courses-navy);margin:0 0 4px;}
.courses-filter-hint{color:var(--courses-muted);font-size:0.82rem;margin:0 0 14px;}
.courses-filter-list{display:flex;flex-direction:column;gap:2px;max-height:60vh;overflow-y:auto;}
.courses-filter-item{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:8px;cursor:pointer;font-size:0.9rem;color:var(--courses-ink);transition:background-color 0.15s ease;}
.courses-filter-item:hover{background:var(--courses-bg);}
.courses-filter-item input[type="checkbox"]{width:17px;height:17px;accent-color:var(--courses-coral);flex-shrink:0;cursor:pointer;}
.courses-filter-clear{margin-top:12px;width:100%;background:var(--courses-bg);color:var(--courses-navy-3);font-weight:700;font-size:0.82rem;padding:9px 14px;border-radius:999px;border:1px solid var(--courses-border);cursor:pointer;transition:background-color 0.2s ease;}
.courses-filter-clear:hover{background:#EDF0F8;}

.courses-results-count{color:var(--courses-muted);font-size:0.88rem;margin:0 0 16px;}
.courses-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:60px 20px;color:var(--courses-muted);font-size:0.9rem;}
.courses-loading-spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--courses-border);border-top-color:var(--courses-coral);animation:courses-spin 0.7s linear infinite;}
@keyframes courses-spin{to{transform:rotate(360deg);}}

@media (max-width: 860px){
    .courses-filter-layout{grid-template-columns:1fr;}
    .courses-filter-panel{position:static;}
    .courses-filter-list{max-height:none;}
}

@media (max-width: 560px){
    .courses-tabs{gap:8px;}
    .courses-tab{padding:9px 16px;font-size:0.86rem;}
    .courses-card-actions{flex-direction:column;}
    .courses-info-row{flex-direction:column;align-items:flex-start;}
}