/*
Theme Name: DHB Training and Consulting v3
Theme URI: https://dhbtraining.com
Author: DHB Training and Consulting
Author URI: https://dhbtraining.com
Description: Bilingual (English / Arabic) theme for DHB Training and Consulting — NEBOSH and IOSH accredited health & safety qualifications. One-page homepage plus full WooCommerce support: shop, product, cart and checkout pages are styled to match the brand, so card payment is clearly visible at checkout. Includes the enquiry form, WhatsApp booking, editable course catalogue, legal page links and full RTL support.
Version: 3.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dhb-training
Tags: one-page, business, education, e-commerce, rtl-language-support, custom-logo
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --ink:#0B1B33;          /* primary navy */
  --ink-deep:#06101F;     /* near-black navy */
  --blue:#4A90E2;         /* DHB brand blue */
  --blue-strong:#1E5FC4;  /* accessible blue for text/links on white */
  --blue-soft:#EAF2FD;
  --amber:#F2A900;        /* hazard accent — used only on the hazard rule */
  --paper:#F4F6F9;
  --white:#FFFFFF;
  --line:#DCE3EC;
  --muted:#5A6B82;

  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --wrap:1180px;
  --r:14px;
  --r-sm:9px;
  --shadow:0 1px 2px rgba(11,27,51,.06),0 12px 32px -12px rgba(11,27,51,.18);
  --shadow-lg:0 24px 60px -20px rgba(11,27,51,.34);
  --t:.32s cubic-bezier(.22,.68,.3,1);
}

/* Arabic mode swaps the Latin faces for the Plex Arabic companion */
html[dir="rtl"]{
  --display:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --body:'IBM Plex Sans Arabic',system-ui,sans-serif;
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.06;letter-spacing:-.028em;margin:0}
h1{font-size:clamp(2.4rem,5.6vw,4.3rem)}
h2{font-size:clamp(1.9rem,3.7vw,2.9rem)}
h3{font-size:1.22rem;letter-spacing:-.015em;line-height:1.25}
p{margin:0 0 1rem}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{letter-spacing:0;line-height:1.3}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.section{padding:clamp(4rem,8vw,7rem) 0}
.section--paper{background:var(--paper)}
.section--ink{background:var(--ink);color:#E8EEF7}
.section--ink h2{color:#fff}

:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}

.eyebrow{
  font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--blue-strong);
  display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--amber);flex:none}
.section--ink .eyebrow{color:#8FBDF5}
html[dir="rtl"] .eyebrow{letter-spacing:0;font-family:var(--body)}

.lede{font-size:1.1rem;color:var(--muted);max-width:56ch}
.section--ink .lede{color:#A9BDD6}

/* Numbers, phone numbers and Latin course codes must keep their own
   left-to-right order even when the page flips to Arabic. Without this,
   "+971 50 239 0818" renders as "0818 239 50 971+". */
.num,
a[href^="tel:"],
a[href^="mailto:"],
.stat b,
.price,
.course-meta,
.utility a{
  unicode-bidi:isolate;
}
html[dir="rtl"] .num,
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] .stat b,
html[dir="rtl"] .price,
html[dir="rtl"] .utility a{
  direction:ltr;
  text-align:right;
}
html[dir="rtl"] .contact-line a[href^="tel:"],
html[dir="rtl"] .contact-line a[href^="mailto:"]{
  text-align:start;
}

/* SIGNATURE: hazard rule — borrowed from the hazard tape on a real site */
.hazard{
  height:9px;width:100%;
  background:repeating-linear-gradient(-45deg,
    var(--amber) 0 14px,var(--ink-deep) 14px 28px);
}
.hazard--thin{height:5px}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.6rem;border-radius:var(--r-sm);border:2px solid transparent;
  font-family:var(--display);font-weight:700;font-size:.94rem;letter-spacing:.01em;
  cursor:pointer;transition:transform var(--t),background var(--t),border-color var(--t),color var(--t);
  text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--blue-strong);color:#fff}
.btn--primary:hover{background:#174EA6}
.btn--ghost{border-color:currentColor;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--light{background:#fff;color:var(--ink)}
.btn--outline-light{border-color:rgba(255,255,255,.45);color:#fff}
.btn--outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--wa{background:#25D366;color:#08331A}
.btn--wa:hover{background:#1FBA59}
.btn--wa .wa-ico{flex:0 0 auto}
.btn--login{
  background:transparent;border-color:rgba(255,255,255,.34);color:#fff;
  padding:.68rem 1.05rem;font-size:.85rem;
}
.btn--login:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
.btn--login svg{flex:0 0 auto}
/* Platform link lives in the header button on desktop, in the menu on phones. */
.nav-lms{display:none}
.btn--block{width:100%}

/* ============================================================
   4. HEADER
   ============================================================ */
.utility{
  background:var(--ink-deep);color:#B7C7DC;
  font-size:.82rem;padding:.5rem 0;
}
.utility .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:center;justify-content:space-between}
.utility a{display:inline-flex;align-items:center;gap:.4rem;transition:color var(--t)}
.utility a:hover{color:#fff}
.utility .u-group{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center}
.utility .flag{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:#6E85A3}

.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(11,27,51,.92);backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.09);
  transition:background var(--t);
}
.nav{display:flex;align-items:center;gap:1.3rem;height:74px}
.brand{display:flex;align-items:center;gap:.7rem;color:#fff;flex:none}
.brand-chip{
  width:42px;height:42px;flex:none;background:#fff;border-radius:10px;
  display:grid;place-items:center;padding:5px;overflow:hidden;
}
.brand-chip img{width:100%;height:100%;object-fit:contain}
.brand-name{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;line-height:1.1}
.brand-name small{
  display:block;font-family:var(--mono);font-weight:500;font-size:.6rem;
  letter-spacing:.17em;color:#93AFD0;margin-top:.18rem;
}
html[dir="rtl"] .brand-name small{letter-spacing:0;font-family:var(--body)}

.nav-links{display:flex;gap:.35rem;margin-inline-start:auto;align-items:center}
.nav-links a{
  color:#D5E1F0;padding:.55rem .85rem;border-radius:8px;font-size:.95rem;font-weight:500;
  transition:background var(--t),color var(--t);
}
.nav-links a:hover{background:rgba(255,255,255,.11);color:#fff}
.nav-actions{display:flex;align-items:center;gap:.6rem;flex:none}

.lang-toggle{
  background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff;
  padding:.5rem .85rem;border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:600;
  transition:background var(--t),border-color var(--t);
}
.lang-toggle:hover{background:rgba(255,255,255,.15);border-color:#fff}

.burger{
  display:none;background:transparent;border:1.5px solid rgba(255,255,255,.4);
  color:#fff;width:44px;height:42px;border-radius:8px;cursor:pointer;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:19px;height:2px;background:#fff;position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:19px;height:2px;background:#fff;
}
.burger span::before{top:-6px}
.burger span::after{top:6px}

/* ============================================================
   5. HERO
   ============================================================ */
.hero{
  background:
    radial-gradient(1100px 520px at 78% -8%,rgba(74,144,226,.34),transparent 62%),
    linear-gradient(168deg,var(--ink) 0%,var(--ink-deep) 100%);
  color:#fff;padding:clamp(3.6rem,8vw,6.4rem) 0 0;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(720px 420px at 22% 32%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(720px 420px at 22% 32%,#000,transparent 78%);
}
.hero .wrap{position:relative;z-index:2}
.hero-badges{
  display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;
  font-family:var(--mono);font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;
  color:#9CC0EC;margin-bottom:1.6rem;
}
html[dir="rtl"] .hero-badges{font-family:var(--body);letter-spacing:0;text-transform:none;font-size:.85rem}
.hero-badges .dot{width:5px;height:5px;border-radius:50%;background:var(--amber)}
.hero h1{max-width:17ch;margin-bottom:1.4rem}
.hero h1 em{font-style:normal;color:#7FB4F2}
.hero .lede{color:#B9CDE6;font-size:1.15rem;max-width:52ch;margin-bottom:2.1rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:3.4rem}

.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.14);border-radius:var(--r) var(--r) 0 0;overflow:hidden;
}
.stat{background:rgba(6,16,31,.72);padding:1.5rem 1.3rem;backdrop-filter:blur(6px)}
.stat b{
  display:block;font-family:var(--display);font-size:2.1rem;font-weight:800;
  color:#fff;line-height:1;letter-spacing:-.03em;
}
.stat span{
  display:block;margin-top:.45rem;font-size:.79rem;color:#94AECB;
  font-family:var(--mono);letter-spacing:.06em;
}
html[dir="rtl"] .stat span{font-family:var(--body);letter-spacing:0;font-size:.9rem}

/* ============================================================
   6. COURSE CARDS
   ============================================================ */
.head-row{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:end;justify-content:space-between;margin-bottom:2.6rem}
.grid-courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.4rem}

.course{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.course:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#BFD3EC}

/* Course header panel replaces the old empty photo placeholder */
.course-top{
  padding:1.3rem 1.4rem;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--ink) 0%,var(--ink-deep) 100%);
  display:flex;flex-direction:column;gap:1rem;min-height:150px;
}

/* Icon chip — sits above the tags, watermark stays behind both. */
.course-icon-chip{
  width:56px;height:56px;flex:none;border-radius:13px;
  display:grid;place-items:center;position:relative;z-index:2;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:#fff;transition:background var(--t),border-color var(--t),transform var(--t);
}
.course-icon{width:30px;height:30px;display:block}
.course:hover .course-icon-chip{
  background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.38);transform:translateY(-2px);
}
.course--flag .course-icon-chip{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32)}

/* Optional real photo, used when 'image' is set in inc/config.php. */
.course-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.42;
}
.course-top:has(.course-photo){justify-content:flex-end}
.course-top:has(.course-photo)::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,16,31,.25) 0%,rgba(6,16,31,.88) 100%);
}
.course-top::after{
  content:attr(data-body);
  position:absolute;inset-inline-end:-6px;bottom:-22px;
  font-family:var(--display);font-weight:800;font-size:4.4rem;
  color:rgba(255,255,255,.075);letter-spacing:-.05em;pointer-events:none;z-index:1;
}
.course--flag .course-top{background:linear-gradient(140deg,#1E5FC4 0%,#0B1B33 100%)}
.course-tags{display:flex;flex-wrap:wrap;gap:.4rem;position:relative;z-index:2}
.tag{
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:.28rem .55rem;border-radius:5px;
  background:rgba(255,255,255,.16);color:#DCE9FA;
}
.tag--amber{background:var(--amber);color:#3A2600}
.tag--ar{background:rgba(255,255,255,.16);letter-spacing:0;font-family:var(--body)}
html[dir="rtl"] .tag{font-family:var(--body);letter-spacing:0;text-transform:none}

.course-body{padding:1.4rem;display:flex;flex-direction:column;flex:1;gap:.85rem}
.course-body h3{min-height:2.5em}
.course-body p{color:var(--muted);font-size:.94rem;margin:0}
.course-meta{
  display:flex;flex-wrap:wrap;gap:.45rem 1.1rem;font-family:var(--mono);
  font-size:.78rem;color:var(--muted);padding-top:.2rem;
}
html[dir="rtl"] .course-meta{font-family:var(--body);font-size:.88rem}
.course-foot{
  margin-top:auto;padding-top:1.05rem;border-top:1px solid var(--line);
  display:flex;align-items:end;justify-content:space-between;gap:1rem;
}
.price{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;line-height:1}
.price small{display:block;font-family:var(--mono);font-size:.68rem;font-weight:500;color:var(--muted);letter-spacing:.06em;margin-bottom:.3rem}
html[dir="rtl"] .price small{font-family:var(--body);letter-spacing:0;font-size:.78rem}
.course-foot .btn{padding:.66rem 1.1rem;font-size:.86rem}

.price-note{
  margin-top:1.8rem;font-size:.86rem;color:var(--muted);
  border-inline-start:3px solid var(--amber);padding-inline-start:.9rem;
}

/* ============================================================
   7. WHY US
   ============================================================ */
.why-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.reasons{display:grid;gap:1px;background:rgba(255,255,255,.14);border-radius:var(--r);overflow:hidden}
.reason{background:var(--ink);padding:1.5rem 1.6rem;display:flex;gap:1.2rem;align-items:start}
.reason .n{
  font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--amber);
  padding-top:.28rem;flex:none;letter-spacing:.05em;
}
.reason h3{color:#fff;margin-bottom:.4rem}
.reason p{color:#A9BDD6;font-size:.94rem;margin:0}

/* ============================================================
   8. DELIVERY
   ============================================================ */
.grid-delivery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem}
.mode{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;
  display:flex;flex-direction:column;gap:.7rem;
  transition:transform var(--t),box-shadow var(--t);
}
.mode:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.mode-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.mode-tag{
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue-strong);border:1.5px solid var(--blue-strong);padding:.24rem .55rem;border-radius:99px;flex:none;
}
html[dir="rtl"] .mode-tag{font-family:var(--body);letter-spacing:0;text-transform:none}
.mode p{color:var(--muted);font-size:.94rem;margin:0}

/* ============================================================
   9. CONTACT
   ============================================================ */
.contact{background:linear-gradient(160deg,var(--blue) 0%,#2E6FD6 55%,#1E5FC4 100%);color:#fff;position:relative;overflow:hidden}
.contact::before{
  content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background:repeating-linear-gradient(-45deg,#fff 0 2px,transparent 2px 15px);
}
.contact .wrap{position:relative;z-index:2}
.contact-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.contact h2{color:#fff;margin-bottom:1.1rem}
.contact .lede{color:rgba(255,255,255,.93);margin-bottom:1.8rem}
.contact-lines{display:grid;gap:.8rem;margin-top:1.8rem}
.contact-line{display:flex;align-items:center;gap:.75rem;font-size:.98rem}
.contact-line .k{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.72);min-width:74px;flex:none;
}
html[dir="rtl"] .contact-line .k{font-family:var(--body);letter-spacing:0;text-transform:none;font-size:.85rem}
.contact-line a{font-weight:600;border-bottom:1px solid rgba(255,255,255,.4);transition:border-color var(--t)}
.contact-line a:hover{border-color:#fff}

.form-card{
  background:var(--ink-deep);border-radius:var(--r);padding:clamp(1.6rem,3.4vw,2.3rem);
  box-shadow:var(--shadow-lg);
}
.form-card h3{color:#fff;font-size:1.5rem;margin-bottom:.45rem}
.form-card .form-sub{color:#93AECD;font-size:.9rem;margin-bottom:1.5rem}
.field{margin-bottom:.85rem}
.field label{
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:#8FA9C7;margin-bottom:.4rem;
}
html[dir="rtl"] .field label{font-family:var(--body);letter-spacing:0;text-transform:none;font-size:.85rem}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem 1rem;border-radius:var(--r-sm);
  border:1.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  color:#fff;font-size:.97rem;transition:border-color var(--t),background var(--t);
}
.field input::placeholder,.field textarea::placeholder{color:#7C93B0}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);background:rgba(255,255,255,.1);
}
.field select option{background:var(--ink-deep);color:#fff}
.field textarea{resize:vertical;min-height:92px}
.hp{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap!important;border:0!important;
}
.form-card .btn{margin-top:.5rem}
.or-call{margin-top:1.2rem;text-align:center;font-size:.9rem;color:#93AECD}
.or-call a{color:#8FBDF5;font-weight:600}
.form-alert{
  padding:.95rem 1.1rem;border-radius:var(--r-sm);margin-bottom:1.2rem;font-size:.93rem;
  border-inline-start:4px solid;
}
.form-alert--ok{background:rgba(37,211,102,.13);border-color:#25D366;color:#BDF3D3}
.form-alert--err{background:rgba(242,169,0,.13);border-color:var(--amber);color:#FBE0A8}

/* ============================================================
   10. FOOTER
   ============================================================ */
.site-footer{background:var(--ink-deep);color:#8FA9C7;padding:3.2rem 0 2rem;font-size:.92rem}
.foot-top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:start;margin-bottom:2.4rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem}
.foot-nav a{transition:color var(--t)}
.foot-nav a:hover{color:#fff}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.6rem;margin-bottom:2.4rem}
.foot-cols h4{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:#617C9D;margin-bottom:.7rem;font-weight:600;
}
html[dir="rtl"] .foot-cols h4{font-family:var(--body);letter-spacing:0;text-transform:none;font-size:.85rem}
.foot-cols a{display:block;padding:.18rem 0;transition:color var(--t)}
.foot-cols a:hover{color:#fff}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.85rem;color:#617C9D;
}

/* ============================================================
   11. FLOATING WHATSAPP
   ============================================================ */
.wa-float{
  position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:80;
  width:56px;height:56px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.42);
  transition:transform var(--t);
}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:29px;height:29px;fill:#fff}

/* ============================================================
   12. MOTION
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.68,.3,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   13. RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .why-layout,.contact-layout{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .burger{display:inline-flex}
  .nav-links{
    display:none;position:absolute;top:74px;inset-inline:0;
    flex-direction:column;gap:0;padding:.6rem;
    background:var(--ink-deep);border-bottom:1px solid rgba(255,255,255,.12);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:.85rem 1rem;border-radius:8px}
  /* The header CTA does not fit beside the logo, language toggle and
     menu button — the hero and the floating WhatsApp button cover it. */
  .nav-actions > .btn{display:none}
  .nav-lms{display:block;color:#8FC2F5}
  .site-header{position:sticky}
  .nav{position:relative}
  .utility .wrap{justify-content:center;text-align:center}
}
@media (max-width:640px){
  body{font-size:16px}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:1.15rem 1rem}
  .stat b{font-size:1.7rem}
  .hero-cta .btn{width:100%}
  .course-foot{flex-direction:column;align-items:stretch}
  .course-foot .btn{width:100%}
  .brand-name small{display:none}
}

/* ============================================================
   14. PRINT
   ============================================================ */
@media print{
  .site-header,.utility,.wa-float,.hero-cta,.form-card{display:none}
  body{color:#000;font-size:12pt}
  .section{padding:1rem 0}
}

/* ============================================================
   15. INNER PAGES  (Terms, Privacy, Refunds, blog, 404)
   ------------------------------------------------------------
   The v2 theme had no page.php, so WordPress fell back to the
   one-page template for EVERY url — including the WooCommerce
   checkout. These rules give inner pages their own shell.
   ============================================================ */
.page-hero{
  background:linear-gradient(168deg,var(--ink) 0%,var(--ink-deep) 100%);
  color:#fff;padding:clamp(2.8rem,6vw,4.6rem) 0 clamp(2.2rem,5vw,3.4rem);
}
.page-hero h1{font-size:clamp(1.9rem,4vw,3rem);max-width:22ch}
.page-hero .lede{color:#B9CDE6;margin:1rem 0 0}
.crumbs{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:#8FBDF5;margin-bottom:1rem;display:flex;gap:.5rem;flex-wrap:wrap;
}
html[dir="rtl"] .crumbs{font-family:var(--body);letter-spacing:0;text-transform:none;font-size:.85rem}
.crumbs a:hover{color:#fff}

.page-body{padding:clamp(2.6rem,6vw,4.4rem) 0}
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:2.4rem 0 .9rem}
.prose h3{margin:1.8rem 0 .6rem}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p,.prose li{color:#31435C}
.prose ul,.prose ol{padding-inline-start:1.3rem;margin:0 0 1.1rem}
.prose li{margin-bottom:.45rem}
.prose a{color:var(--blue-strong);text-decoration:underline;text-underline-offset:3px}
.prose table{width:100%;border-collapse:collapse;margin:1.2rem 0}
.prose th,.prose td{border:1px solid var(--line);padding:.7rem .9rem;text-align:start}
.prose th{background:var(--blue-soft);font-family:var(--display);font-weight:700}
.prose blockquote{
  margin:1.4rem 0;padding:.2rem 0 .2rem 1.1rem;
  border-inline-start:3px solid var(--amber);color:var(--muted);
}
.prose img{border-radius:var(--r);margin:1.2rem 0}

.notice-empty{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:2.4rem;text-align:center;
}
.notice-empty h2{margin-bottom:.6rem}
.notice-empty p{color:var(--muted);margin-bottom:1.4rem}

.post-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem;margin-bottom:1.1rem;
}
.post-card h2{font-size:1.3rem;margin-bottom:.4rem}
.post-card time{font-family:var(--mono);font-size:.78rem;color:var(--muted)}

/* ============================================================
   16. PAYMENT + TRUST STRIP
   ------------------------------------------------------------
   Named in text rather than brand artwork — accurate, fast, and
   no third-party logo licensing to worry about.
   ============================================================ */
.pay-strip{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-top:.7rem}
.pay-chip{
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.07em;
  padding:.34rem .6rem;border-radius:6px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#D6E4F6;
  white-space:nowrap;
}
html[dir="rtl"] .pay-chip{font-family:var(--body);letter-spacing:0}
.pay-chip--tabby{border-color:rgba(62,224,130,.5);color:#8FF0BA}
.pay-strip--light .pay-chip{
  border-color:var(--line);background:var(--white);color:var(--ink);
}
.secure-line{
  display:flex;align-items:center;gap:.5rem;margin-top:.9rem;
  font-size:.86rem;color:var(--muted);
}
.secure-line svg{width:16px;height:16px;flex:none;stroke:var(--blue-strong)}

/* ============================================================
   17. WOOCOMMERCE
   ------------------------------------------------------------
   Shop, single product, cart and checkout. The checkout payment
   box is deliberately loud: the card option must be the first
   thing a visitor (or a payment provider reviewing the site)
   sees on that page.
   ============================================================ */
.woocommerce-page .page-body,.woocommerce .page-body{padding-top:clamp(2rem,4vw,3rem)}

/* --- notices --- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{
  background:var(--blue-soft);border:1px solid #C9DDF7;border-inline-start:4px solid var(--blue-strong);
  border-radius:var(--r-sm);padding:.95rem 1.15rem;margin:0 0 1.4rem;list-style:none;
  display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between;
}
.woocommerce-error{background:#FDF1E2;border-color:#F3D6A4;border-inline-start-color:var(--amber)}
.woocommerce-message{background:#E7F8EE;border-color:#B6E7CB;border-inline-start-color:#16A34A}
.woocommerce-message a,.woocommerce-info a{font-weight:700;color:var(--blue-strong)}

/* --- product grid --- */
.woocommerce ul.products{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:1.3rem;list-style:none;margin:0;padding:0;
}
.woocommerce ul.products li.product{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.4rem;display:flex;flex-direction:column;gap:.6rem;text-align:start;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.woocommerce ul.products li.product:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#BFD3EC}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--display);font-weight:800;font-size:1.08rem;line-height:1.3;
  letter-spacing:-.015em;padding:0;margin:0;
}
.woocommerce ul.products li.product .price{
  font-family:var(--display);font-weight:800;font-size:1.25rem;color:var(--ink);margin:0;
}
.woocommerce ul.products li.product img{border-radius:var(--r-sm);margin-bottom:.4rem}
.woocommerce ul.products li.product .onsale{
  background:var(--amber);color:#3A2600;font-family:var(--mono);font-size:.68rem;
  padding:.2rem .5rem;border-radius:5px;
}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{margin-bottom:1.2rem}

/* --- single product --- */
.woocommerce div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.6rem,4vw,3rem);align-items:start}
.woocommerce div.product .woocommerce-product-gallery{margin:0}
.woocommerce div.product .woocommerce-product-gallery img{border-radius:var(--r)}
.woocommerce div.product .product_title{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:.8rem}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-family:var(--display);font-weight:800;font-size:2rem;color:var(--ink);
  letter-spacing:-.03em;margin:0 0 1rem;
}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted);margin-bottom:1.4rem}
.woocommerce div.product form.cart{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-bottom:1.4rem}
.woocommerce div.product .product_meta{font-family:var(--mono);font-size:.78rem;color:var(--muted);padding-top:1rem;border-top:1px solid var(--line)}
html[dir="rtl"] .woocommerce div.product .product_meta{font-family:var(--body)}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:2.4rem 0 1.2rem;
  border-bottom:1px solid var(--line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{margin:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;padding:.7rem 1.1rem;font-family:var(--display);font-weight:700;font-size:.92rem;color:var(--muted);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink);box-shadow:inset 0 -3px 0 var(--blue-strong)}
.woocommerce div.product .woocommerce-tabs .panel{max-width:74ch}
.woocommerce .related.products,.woocommerce .up-sells{grid-column:1/-1;margin-top:2.6rem}
.woocommerce .related.products>h2,.woocommerce .up-sells>h2{margin-bottom:1.4rem}

/* --- quantity --- */
.woocommerce .quantity .qty{
  width:78px;padding:.72rem .6rem;text-align:center;
  border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;
}

/* --- WooCommerce buttons inherit the DHB button --- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt,
.woocommerce input.button.alt,.woocommerce #place_order{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--blue-strong);color:#fff;border:2px solid transparent;
  padding:.9rem 1.5rem;border-radius:var(--r-sm);cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:.94rem;line-height:1.2;
  transition:transform var(--t),background var(--t);
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce #place_order:hover{
  background:#174EA6;color:#fff;transform:translateY(-2px);
}
.woocommerce a.button.wc-backward{background:transparent;color:var(--ink);border-color:currentColor}
.woocommerce a.button.wc-backward:hover{background:var(--ink);color:#fff}
.woocommerce #place_order{width:100%;padding:1.15rem 1.5rem;font-size:1.05rem}

/* --- cart --- */
.woocommerce table.shop_table{
  width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:1.6rem;
}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{
  padding:.95rem 1rem;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle;
}
.woocommerce table.shop_table th{
  background:var(--paper);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;
}
html[dir="rtl"] .woocommerce table.shop_table th{font-family:var(--body);letter-spacing:0;text-transform:none;font-size:.85rem}
.woocommerce table.shop_table img{width:56px;height:auto;border-radius:6px}
.woocommerce .cart-collaterals{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:2rem;align-items:start}
.woocommerce .cart_totals h2,.woocommerce-checkout h3{font-size:1.25rem;margin-bottom:.9rem}
.woocommerce .coupon{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.woocommerce .coupon .input-text{
  flex:1 1 180px;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-sm);
}

/* --- checkout --- */
.woocommerce-checkout .col2-set{display:grid;grid-template-columns:1fr;gap:1.4rem}
.woocommerce form .form-row{display:flex;flex-direction:column;margin-bottom:.95rem}
.woocommerce form .form-row label{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.4rem;
}
html[dir="rtl"] .woocommerce form .form-row label{font-family:var(--body);letter-spacing:0;text-transform:none;font-size:.85rem}
.woocommerce form .form-row .required{color:var(--amber);text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:#fff;font-size:1rem;height:auto;transition:border-color var(--t),box-shadow var(--t);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  outline:none;border-color:var(--blue-strong);box-shadow:0 0 0 3px rgba(30,95,196,.14);
}
.woocommerce form.checkout_coupon,.woocommerce form.login,.woocommerce form.register{
  border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;margin-bottom:1.6rem;background:#fff;
}

/* Order review + payment box — the part payment reviewers look at. */
#order_review_heading{margin-top:2.2rem}
.woocommerce-checkout #payment{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem;box-shadow:var(--shadow);
}
.woocommerce-checkout #payment::before{
  content:"";display:block;height:5px;margin:-1.5rem -1.5rem 1.3rem;
  border-radius:var(--r) var(--r) 0 0;
  background:repeating-linear-gradient(-45deg,var(--amber) 0 14px,var(--ink-deep) 14px 28px);
}
.woocommerce-checkout #payment ul.payment_methods{
  list-style:none;margin:0 0 1.2rem;padding:0;border-bottom:1px solid var(--line);
}
.woocommerce-checkout #payment ul.payment_methods li{
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:1rem 1.1rem;margin-bottom:.7rem;transition:border-color var(--t),background var(--t);
}
.woocommerce-checkout #payment ul.payment_methods li:hover{border-color:#BFD3EC;background:var(--blue-soft)}
.woocommerce-checkout #payment ul.payment_methods li label{
  font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink);
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]{
  width:18px;height:18px;accent-color:var(--blue-strong);margin-inline-end:.5rem;
}
.woocommerce-checkout #payment ul.payment_methods li img{max-height:26px;width:auto;display:inline-block;vertical-align:middle}
.woocommerce-checkout #payment div.payment_box{
  background:var(--paper);border-radius:var(--r-sm);padding:1rem 1.1rem;margin-top:.8rem;
  font-size:.92rem;color:var(--muted);
}
.woocommerce-checkout #payment .place-order{padding-top:.4rem}
.woocommerce-privacy-policy-text{font-size:.86rem;color:var(--muted)}
.woocommerce-terms-and-conditions-wrapper{margin-bottom:1rem;font-size:.9rem}

/* Order confirmation */
.woocommerce .woocommerce-order{max-width:74ch}
.woocommerce ul.order_details{
  list-style:none;padding:1.2rem;margin:0 0 1.6rem;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;
  background:var(--paper);border-radius:var(--r);border:1px solid var(--line);
}
.woocommerce ul.order_details li{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.woocommerce ul.order_details li strong{
  display:block;margin-top:.3rem;font-family:var(--display);font-size:1rem;
  letter-spacing:0;text-transform:none;color:var(--ink);
}
html[dir="rtl"] .woocommerce ul.order_details li{font-family:var(--body);letter-spacing:0;text-transform:none;font-size:.85rem}

/* My account */
.woocommerce-account .woocommerce{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1fr);gap:2rem;align-items:start}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);font-weight:600}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--blue-soft);color:var(--blue-strong)}

/* Woo's own overlay/spinner tidy-up */
.woocommerce .blockUI.blockOverlay{background:#fff!important;opacity:.6!important}

@media (max-width:900px){
  .woocommerce div.product,
  .woocommerce .cart-collaterals,
  .woocommerce-account .woocommerce{grid-template-columns:1fr}
}
@media (max-width:640px){
  .woocommerce table.shop_table thead{display:none}
  .woocommerce table.shop_table tr{display:block;border-bottom:1px solid var(--line);padding:.6rem 0}
  .woocommerce table.shop_table td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.45rem 1rem}
  .woocommerce table.shop_table td::before{content:attr(data-title);font-weight:700;color:var(--muted)}
}

/* ============================================================
   18. WOOCOMMERCE BLOCK CART & CHECKOUT
   ------------------------------------------------------------
   WooCommerce 8+ installs the block-based cart and checkout by
   default. Those render through page.php, so they need their
   own brand pass — especially the payment panel.
   ============================================================ */
.wp-block-woocommerce-checkout,.wp-block-woocommerce-cart{max-width:none}
.wc-block-components-title,.wc-block-components-checkout-step__title{
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;color:var(--ink);
}
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container{
  border-radius:var(--r-sm)!important;border-color:var(--line)!important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus{border-color:var(--blue-strong)!important}
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background:var(--blue-strong)!important;color:#fff!important;
  border-radius:var(--r-sm)!important;font-family:var(--display)!important;
  font-weight:700!important;padding:1rem 1.5rem!important;
}
.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover{background:#174EA6!important}
.wc-block-checkout__payment-method{
  border:1px solid var(--line);border-radius:var(--r);padding:1.2rem;background:#fff;
}
.wc-block-components-radio-control__option{
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:.9rem 1rem;margin-bottom:.6rem;
}
.wc-block-components-radio-control__option:hover{border-color:#BFD3EC;background:var(--blue-soft)}
.wc-block-components-radio-control__label{font-family:var(--display);font-weight:700;color:var(--ink)}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--display);font-weight:800;color:var(--ink);
}
.wc-block-components-order-summary{border-radius:var(--r)}
.woocommerce ul.products,
.woocommerce-page ul.products{width:100%;float:none;clear:both}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last{
  width:auto!important;float:none!important;margin:0!important;
  clear:none!important;min-width:0;overflow-wrap:anywhere;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  overflow-wrap:break-word;hyphens:auto;
}
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.added_to_cart{
  align-self:start;width:auto;white-space:nowrap;margin-top:.4rem;
}
.woocommerce .related.products,
.woocommerce .up-sells.upsells,
.woocommerce div.product .woocommerce-tabs{
  grid-column:1/-1!important;width:100%;min-width:0;
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product .woocommerce-product-gallery{
  width:auto!important;float:none!important;margin:0!important;min-width:0;
}
.woocommerce div.product .product_title{overflow-wrap:break-word}