/*
Theme Name: Eduware Learning Theme
Theme URI: https://eduware.co.za/
Author: African Nomad Software
Description: Student-first training theme for Eduware, the official African Nomad Software learning website. Designed to integrate with Nomad Learning front-end portals.
Version: 0.1.2
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: eduware-learning
*/

:root {
  --edu-navy: #0a2540;
  --edu-blue-900: #0b3a6e;
  --edu-blue-800: #0e4f91;
  --edu-blue-700: #1267b5;
  --edu-blue-600: #1c78d0;
  --edu-blue-500: #3191e8;
  --edu-blue-200: #b9dcfb;
  --edu-blue-100: #e8f4ff;
  --edu-blue-050: #f5faff;
  --edu-ink: #162334;
  --edu-muted: #607083;
  --edu-line: #d8e5f2;
  --edu-white: #ffffff;
  --edu-success: #0c7a53;
  --edu-danger: #b42318;
  --edu-radius: 22px;
  --edu-shadow: 0 22px 55px rgba(21, 78, 132, .12);
  --edu-font: Inter, Aptos, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--edu-ink); background: var(--edu-white); font-family: var(--edu-font); font-size: 16px; line-height: 1.65; }
a { color: var(--edu-blue-700); text-decoration: none; }
a:hover { color: var(--edu-blue-900); }
img { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
button, .edu-button { cursor: pointer; }
.edu-wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.edu-skip { position: absolute; left: -9999px; top: 8px; background: var(--edu-white); color: var(--edu-navy); padding: 10px 14px; border-radius: 8px; z-index: 9999; }
.edu-skip:focus { left: 12px; }

.edu-site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(216,229,242,.85); }
.edu-header-row { min-height: 70px; display: flex; align-items: center; gap: 28px; }
.edu-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--edu-navy); font-weight: 850; letter-spacing: -.02em; font-size: 1.25rem; white-space: nowrap; }
.edu-brand-mark { width: 39px; height: 39px; border-radius: 13px; background: linear-gradient(145deg, var(--edu-blue-900), var(--edu-blue-500)); box-shadow: 0 9px 22px rgba(18,103,181,.24); position: relative; }
.edu-brand-mark::before, .edu-brand-mark::after { content:""; position:absolute; background:#fff; border-radius: 8px; }
.edu-brand-mark::before { width: 18px; height: 5px; left: 10px; top: 11px; transform: rotate(-12deg); }
.edu-brand-mark::after { width: 14px; height: 5px; left: 12px; top: 22px; transform: rotate(12deg); opacity:.82; }
.edu-brand img.custom-logo { max-height: 46px; width: auto; }
.edu-nav { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.edu-nav a { color: #33485f; font-weight: 720; font-size: .95rem; padding: 10px 13px; border-radius: 10px; }
.edu-nav a:hover, .edu-nav .current-menu-item > a { background: var(--edu-blue-050); color: var(--edu-blue-800); }
.edu-header-action { margin-left: 8px; display:inline-flex; align-items:center; gap:8px; }
.edu-menu-toggle { display: none; margin-left: auto; border: 1px solid var(--edu-line); background: var(--edu-white); border-radius: 11px; padding: 9px 12px; color: var(--edu-navy); font-weight: 750; }

.edu-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 45px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent; background: var(--edu-blue-700); color: #fff !important; font-weight: 800; box-shadow: 0 8px 20px rgba(18,103,181,.18); transition: .18s ease; }
.edu-button:hover { transform: translateY(-1px); background: var(--edu-blue-800); box-shadow: 0 12px 26px rgba(18,103,181,.24); }
.edu-button--light { background: var(--edu-white); color: var(--edu-blue-800) !important; border-color: var(--edu-blue-200); box-shadow: none; }
.edu-button--ghost { background: transparent; color: var(--edu-blue-800) !important; border-color: var(--edu-blue-200); box-shadow: none; }
.edu-button--small { min-height: 38px; padding-inline: 14px; font-size: .9rem; }
.edu-button--logout { background:#fff; color:var(--edu-danger) !important; border-color:#efc7c3; box-shadow:none; }
.edu-button--logout:hover { background:#fff5f4; color:#8f1b13 !important; border-color:#e5aaa4; }
.edu-logged-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }

.edu-hero { overflow: hidden; position: relative; background: radial-gradient(circle at 85% 20%, rgba(79,166,239,.30), transparent 27%), radial-gradient(circle at 5% 100%, rgba(29,104,184,.23), transparent 27%), linear-gradient(135deg, #071e36 0%, #0c3c6d 48%, #1269b5 100%); color: #fff; }
.edu-hero::after { content:""; position:absolute; inset:0; opacity:.20; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to right, black, transparent 80%); pointer-events:none; }
.edu-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(380px,.78fr); gap:54px; align-items:center; padding:52px 0 64px; }
.edu-eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:.82rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; color:#bfe2ff; margin-bottom:16px; }
.edu-eyebrow::before { content:""; width:25px; height:2px; background:#77c3ff; border-radius:4px; }
.edu-hero h1 { margin:0; font-size:clamp(2.55rem, 5.3vw, 4.75rem); line-height:1.02; letter-spacing:-.05em; max-width:850px; }
.edu-hero-lead { max-width:720px; margin:24px 0 0; font-size:clamp(1.05rem, 1.8vw, 1.28rem); color:#dceefe; }
.edu-hero-points { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0; padding:0; list-style:none; }
.edu-hero-points li { padding:8px 12px; border-radius:99px; color:#eaf7ff; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); font-weight:700; font-size:.9rem; }

.edu-access-card { background:rgba(255,255,255,.98); color:var(--edu-ink); border-radius:28px; box-shadow:0 30px 80px rgba(0,13,28,.28); overflow:hidden; border:1px solid rgba(255,255,255,.46); }
.edu-access-tabs { display:grid; grid-template-columns:1fr 1fr; background:#edf6ff; border-bottom:1px solid var(--edu-line); }
.edu-access-tab { appearance:none; border:0; background:transparent; padding:16px 12px; font-weight:850; color:#567087; cursor:pointer; }
.edu-access-tab[aria-selected="true"] { color:var(--edu-blue-800); background:#fff; box-shadow:inset 0 -3px 0 var(--edu-blue-600); }
.edu-access-pane { padding:26px; }
.edu-access-pane[hidden] { display:none; }
.edu-access-pane h2 { margin:0 0 6px; font-size:1.35rem; letter-spacing:-.02em; }
.edu-access-pane > p { margin:0 0 18px; color:var(--edu-muted); font-size:.94rem; }
.edu-form { display:grid; gap:14px; }
.edu-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.edu-field { display:grid; gap:6px; color:#33485f; font-size:.9rem; font-weight:750; }
.edu-field input, .edu-field textarea { width:100%; border:1px solid #c8d9e8; border-radius:12px; padding:11px 12px; background:#fbfdff; color:var(--edu-ink); outline:none; transition:.15s; }
.edu-field input:focus, .edu-field textarea:focus { border-color:var(--edu-blue-500); box-shadow:0 0 0 4px rgba(49,145,232,.12); background:#fff; }
.edu-check { display:flex; align-items:center; gap:8px; color:var(--edu-muted); font-size:.9rem; }
.edu-auth-help { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:14px; font-size:.88rem; }
.edu-alert { margin:0 0 18px; padding:11px 13px; border-radius:11px; font-size:.9rem; font-weight:700; }
.edu-alert--error { background:#fff1f0; color:var(--edu-danger); border:1px solid #ffd4d0; }
.edu-alert--success { background:#edfdf6; color:var(--edu-success); border:1px solid #bcebd9; }
.edu-logged-card { padding:30px; }
.edu-logged-avatar { width:54px; height:54px; border-radius:16px; overflow:hidden; margin-bottom:16px; }
.edu-logged-card h2 { margin:0; font-size:1.5rem; }
.edu-logged-card p { color:var(--edu-muted); }

.edu-section { padding:78px 0; }
.edu-section--soft { background:linear-gradient(180deg,#f7fbff 0%,#eef7ff 100%); border-block:1px solid #e2eef8; }
.edu-section-head { display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:30px; }
.edu-section-head h2 { margin:0; font-size:clamp(1.8rem, 3vw, 2.7rem); line-height:1.1; letter-spacing:-.04em; color:var(--edu-navy); }
.edu-section-head p { margin:9px 0 0; color:var(--edu-muted); max-width:680px; }
.edu-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.edu-feature-card { background:#fff; border:1px solid var(--edu-line); border-radius:var(--edu-radius); padding:26px; box-shadow:0 8px 30px rgba(28,75,119,.06); }
.edu-feature-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:var(--edu-blue-100); color:var(--edu-blue-800); font-weight:900; margin-bottom:18px; }
.edu-feature-card h3 { margin:0 0 8px; color:var(--edu-navy); letter-spacing:-.02em; }
.edu-feature-card p { margin:0; color:var(--edu-muted); }

.edu-course-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.edu-course-card { background:#fff; border:1px solid var(--edu-line); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 10px 32px rgba(28,75,119,.07); transition:.18s ease; }
.edu-course-card:hover { transform:translateY(-3px); box-shadow:var(--edu-shadow); }
.edu-course-image { aspect-ratio:16 / 9; background:linear-gradient(145deg,var(--edu-blue-900),var(--edu-blue-500)); position:relative; overflow:hidden; }
.edu-course-image img { width:100%; height:100%; object-fit:cover; }
.edu-course-image--placeholder::after { content:"AI LEARNING"; position:absolute; right:16px; bottom:13px; color:rgba(255,255,255,.74); font-size:.72rem; letter-spacing:.16em; font-weight:900; }
.edu-course-body { padding:20px; display:flex; flex-direction:column; flex:1; }
.edu-course-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:11px; }
.edu-pill { display:inline-flex; padding:5px 9px; border-radius:99px; background:var(--edu-blue-050); color:var(--edu-blue-800); font-size:.75rem; font-weight:850; }
.edu-course-card h3 { margin:0; font-size:1.15rem; line-height:1.3; color:var(--edu-navy); }
.edu-course-card p { color:var(--edu-muted); font-size:.92rem; margin:10px 0 16px; }
.edu-course-footer { margin-top:auto; display:flex; justify-content:space-between; gap:12px; align-items:center; padding-top:14px; border-top:1px solid #e8f0f7; }
.edu-course-price { font-weight:900; color:var(--edu-blue-900); }
.edu-empty { padding:28px; border:1px dashed #b8cfe4; border-radius:18px; background:#fff; color:var(--edu-muted); }

.edu-journey { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; counter-reset:journey; }
.edu-step { position:relative; padding:22px; background:#fff; border:1px solid var(--edu-line); border-radius:18px; }
.edu-step::before { counter-increment:journey; content:counter(journey); display:grid; place-items:center; width:35px; height:35px; border-radius:12px; background:var(--edu-blue-700); color:#fff; font-weight:900; margin-bottom:14px; }
.edu-step h3 { margin:0 0 7px; color:var(--edu-navy); font-size:1rem; }
.edu-step p { margin:0; color:var(--edu-muted); font-size:.88rem; }

.edu-page-hero { padding:42px 0 38px; background:linear-gradient(135deg,#edf7ff,#f8fcff); border-bottom:1px solid var(--edu-line); }
.edu-page-hero h1 { margin:0; font-size:clamp(2.2rem,4vw,3.6rem); line-height:1.04; letter-spacing:-.045em; color:var(--edu-navy); }
.edu-page-hero p { margin:16px 0 0; max-width:720px; color:var(--edu-muted); font-size:1.08rem; }
.edu-content { padding:64px 0; }
.edu-prose { max-width:840px; font-size:1.03rem; }
.edu-prose h2 { color:var(--edu-navy); letter-spacing:-.03em; margin-top:2em; }
.edu-prose p, .edu-prose li { color:#495d71; }
.edu-contact-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:28px; align-items:start; }
.edu-contact-card { background:var(--edu-blue-050); border:1px solid #d6e9f9; border-radius:20px; padding:26px; }
.edu-contact-card h2 { margin-top:0; color:var(--edu-navy); }
.edu-contact-list { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:14px; }
.edu-contact-list strong { display:block; color:var(--edu-navy); }
.edu-contact-list span, .edu-contact-list a { color:var(--edu-muted); }
.edu-contact-form { background:#fff; border:1px solid var(--edu-line); border-radius:22px; padding:28px; box-shadow:var(--edu-shadow); }
.edu-contact-form h2 { margin-top:0; color:var(--edu-navy); }

.edu-site-footer { background:#071c31; color:#c4d7e8; padding:50px 0 24px; }
.edu-footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:34px; }
.edu-site-footer .edu-brand { color:#fff; }
.edu-site-footer p { color:#a9bfd3; max-width:520px; }
.edu-footer-title { color:#fff; font-weight:850; margin-bottom:11px; }
.edu-footer-links { display:grid; gap:7px; }
.edu-footer-links a { color:#b8cee0; }
.edu-footer-links a:hover { color:#fff; }
.edu-footer-bottom { margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:.85rem; color:#8fa8bd; display:flex; justify-content:space-between; gap:20px; }

@media (max-width: 980px) {
  .edu-hero-grid { grid-template-columns:1fr; gap:36px; padding:46px 0 54px; }
  .edu-access-card { max-width:650px; }
  .edu-grid-3, .edu-course-grid { grid-template-columns:repeat(2,1fr); }
  .edu-journey { grid-template-columns:repeat(2,1fr); }
  .edu-contact-grid { grid-template-columns:1fr; }
  .edu-nav { display:none; position:absolute; left:20px; right:20px; top:68px; flex-direction:column; align-items:stretch; background:#fff; padding:12px; border:1px solid var(--edu-line); border-radius:16px; box-shadow:var(--edu-shadow); }
  .edu-nav.is-open { display:flex; }
  .edu-nav a { display:block; }
  .edu-menu-toggle { display:inline-flex; }
  .edu-header-action { margin-left:0; }
}
@media (max-width: 650px) {
  .edu-wrap { width:min(100% - 28px,1180px); }
  .edu-hero-grid { padding:34px 0 42px; }
  .edu-hero h1 { font-size:2.55rem; }
  .edu-grid-3, .edu-course-grid, .edu-journey, .edu-footer-grid, .edu-form-row { grid-template-columns:1fr; }
  .edu-section { padding:58px 0; }
  .edu-section-head { align-items:flex-start; flex-direction:column; }
  .edu-access-pane { padding:20px; }
  .edu-auth-help, .edu-footer-bottom { align-items:flex-start; flex-direction:column; }
  .edu-header-row { min-height:68px; }
  .edu-page-hero { padding:32px 0 28px; }
}