/* =============================================================
   Easy PM — Site-wide theme layer
   Loaded by header.php on EVERY public page, after newm.css.
   Re-themes the shared header/footer and every inner page (login,
   register, contact, tutors, videos, cart, checkout, course details,
   password reset) to the homepage system in home-premium.css:
   teal-black surfaces, cool paper, logo gold accent, Manrope.

   Inner pages still carry their own inline <style> blocks in the old
   navy/electric-blue palette; those blocks come AFTER this file, so
   every rule here is written with a `body[class]` prefix (the body
   always carries .ltr/.rtl) to out-rank them without touching the
   page files.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
    --hx-ink:    #06171f;
    --hx-ink-2:  #0a2029;
    --hx-ink-3:  #0f2b36;
    --hx-ink-4:  #153845;
    --hx-paper:   #f1f6f7;
    --hx-paper-2: #e4edef;
    --hx-text:    #e9f1f3;
    --hx-muted:   #8fa7b0;
    --hx-p-ink:   #0c1f28;
    --hx-p-muted: #4e666f;
    --hx-line:    rgba(255,255,255,.10);
    --hx-line-2:  rgba(255,255,255,.18);
    --hx-p-line:  rgba(12,31,40,.13);
    --hx-gold:      #d3a13a;
    --hx-gold-hi:   #e8bd5c;
    --hx-gold-soft: #f2d694;
    --hx-gold-glow: rgba(211,161,58,.32);
    --hx-teal:   #246a80;
    --hx-teal-2: #37859b;
    --hx-r: 18px;
    --hx-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Re-point the legacy newm.css tokens at the new palette. */
    --epmp-navy:   var(--hx-ink);
    --epmp-navy-2: var(--hx-ink-2);
    --epmp-navy-3: var(--hx-ink-3);
    --epmp-cyan:   var(--hx-gold);
    --epmp-blue:   var(--hx-gold-hi);
    --epmp-teal:   var(--hx-gold-soft);
    --epmp-soft:   var(--hx-paper);
    --epmp-soft-2: var(--hx-paper-2);
    --epmp-text:   var(--hx-p-ink);
    --epmp-muted:  var(--hx-p-muted);
    --epmp-border: var(--hx-p-line);
    --epmp-radius: var(--hx-r);
    --epmp-shadow:      0 20px 55px rgba(6, 23, 31, .14);
    --epmp-shadow-soft: 0 12px 32px rgba(6, 23, 31, .08);
}

/* Page-local tokens declared on :root inside the inline styles. */
body.ltr, body.rtl {
    --login-primary: var(--hx-gold);      --login-primary-dark: var(--hx-gold-hi);
    --login-primary-soft: #fbf3df;        --login-dark: var(--hx-ink);
    --login-text: var(--hx-p-ink);        --login-border: var(--hx-p-line);
    --register-primary: var(--hx-gold);   --register-primary-dark: var(--hx-gold-hi);
    --register-dark: var(--hx-ink);       --register-text: var(--hx-p-ink);
    --register-border: var(--hx-p-line);
    --reset-primary: var(--hx-gold);      --reset-primary-dark: var(--hx-gold-hi);
    --reset-dark: var(--hx-ink);          --reset-text: var(--hx-p-ink);
    --reset-border: var(--hx-p-line);
    --tutor-dark: var(--hx-ink);          --tutor-blue: var(--hx-teal);
    --video-navy: var(--hx-ink);          --video-navy-2: var(--hx-ink-2);
    --video-blue: var(--hx-gold-hi);      --video-cyan: var(--hx-gold);
    --video-teal: var(--hx-gold-soft);
    --course-navy: var(--hx-ink);         --course-navy-2: var(--hx-ink-2);
    --course-blue: var(--hx-gold-hi);     --course-cyan: var(--hx-gold);
    --course-teal: var(--hx-gold-soft);
}

/* ---------- 2. Base ---------- */
body.ltr, body.rtl {
    font-family: var(--hx-sans);
    background: var(--hx-paper);
    color: var(--hx-p-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.rtl, html[dir="rtl"] body {
    font-family: "IBM Plex Sans Arabic", "Manrope", Tahoma, Arial, sans-serif;
}

body[class] ::selection { background: var(--hx-gold); color: var(--hx-ink); }

/* Legacy pages set weights of 900–950; Manrope tops out at 800. */
body[class] h1, body[class] h2, body[class] h3, body[class] h4,
body[class] .epmp-title, body[class] .epmp-logo strong {
    font-weight: 800;
    letter-spacing: -.035em;
}

/* ---------- 3. Header ---------- */
body[class] .epmp-header {
    background: rgba(6, 23, 31, .90);
    border-bottom: 1px solid var(--hx-line);
}

body[class] .epmp-logo span { color: var(--hx-gold); font-weight: 700; }

body[class] .epmp-nav a { font-weight: 700; letter-spacing: .01em; }

body[class] .epmp-nav a.active::after,
body[class] .epmp-nav a:hover::after { background: var(--hx-gold); }

body[class] .language-switcher {
    background: rgba(255, 255, 255, .06);
    border-color: var(--hx-line-2);
}

body[class] .language-switcher a.active,
body[class] .language-switcher a:hover {
    color: var(--hx-ink);
    background: var(--hx-gold);
}

body[class] .epmp-cart-icon:hover {
    background: var(--hx-gold);
    color: var(--hx-ink);
    box-shadow: 0 12px 28px var(--hx-gold-glow);
}

body[class] .epmp-cart-count { border-color: var(--hx-ink); background: var(--hx-gold); color: var(--hx-ink); }

/* ---------- 4. Buttons ---------- */
body[class] .epmp-btn { border-radius: 999px; font-weight: 700; letter-spacing: .01em; }

body[class] .epmp-btn-primary,
body[class] .epmp-login-submit,
body[class] .epmp-register-submit,
body[class] .epmp-reset-submit,
body[class] .checkout-btn,
body[class] .empty-cart a,
body[class] .promo-input-row button,
body[class] .place-order-btn,
body[class] #sendMessageButton,
body[class] .videos-btn,
body[class] .premium-main-btn,
body[class] .tutor-btn-primary,
body[class] .btn.btn-primary {
    color: var(--hx-ink) !important;
    background: linear-gradient(135deg, var(--hx-gold-hi), var(--hx-gold)) !important;
    border: 0 !important;
    box-shadow: 0 14px 30px var(--hx-gold-glow) !important;
}

body[class] .epmp-btn-primary:hover,
body[class] .epmp-login-submit:hover,
body[class] .epmp-register-submit:hover,
body[class] .epmp-reset-submit:hover,
body[class] .checkout-btn:hover,
body[class] .empty-cart a:hover,
body[class] .promo-input-row button:hover,
body[class] .place-order-btn:hover,
body[class] #sendMessageButton:hover,
body[class] .videos-btn:hover,
body[class] .premium-main-btn:hover,
body[class] .tutor-btn-primary:hover,
body[class] .btn.btn-primary:hover {
    color: var(--hx-ink) !important;
    background: linear-gradient(135deg, var(--hx-gold-soft), var(--hx-gold-hi)) !important;
    box-shadow: 0 18px 38px var(--hx-gold-glow) !important;
}

body[class] .epmp-btn-dark {
    background: var(--hx-ink-3);
    border-color: var(--hx-line-2);
}

body[class] .epmp-btn-dark:hover { background: var(--hx-ink-4); }

/* Logo tiles at the top of the login / register / reset cards */
body[class] .epmp-login-logo,
body[class] .epmp-register-logo,
body[class] .epmp-reset-logo {
    color: var(--hx-ink);
    background: linear-gradient(135deg, var(--hx-gold-hi), var(--hx-gold));
    box-shadow: 0 18px 36px var(--hx-gold-glow);
}

/* Secondary / text links on light surfaces */
body[class] .epmp-login-forgot,
body[class] .epmp-login-register a,
body[class] .epmp-register-login a,
body[class] .epmp-reset-back a,
body[class] .epmp-login-alert a,
body[class] .continue-link,
body[class] .back-cart-link,
body[class] .epmp-login-security-note i,
body[class] .epmp-register-note i,
body[class] .epmp-reset-note i {
    color: var(--hx-teal) !important;
}

body[class] .tag-list span,
body[class] .tutor-btn-secondary {
    color: var(--hx-teal);
    background: rgba(36, 106, 128, .10);
}

body[class] .tutor-btn-secondary:hover { background: rgba(36, 106, 128, .18); color: var(--hx-teal); }

body[class] .epmp-login-security-note,
body[class] .epmp-register-note,
body[class] .epmp-reset-note { border-color: var(--hx-p-line); }

/* ---------- 5. Light page canvases ---------- */
body[class] .epmp-page,
body[class] .premium-videos-page,
body[class] .premium-course-page,
body[class] .premium-contact-page,
body[class] .cart-page,
body[class] .checkout-page,
body[class] .tutors-page {
    background:
        radial-gradient(circle at top left, rgba(211, 161, 58, .10), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, var(--hx-paper) 45%, #ffffff 100%);
}

/* Headline colour on light surfaces (was navy #061329) */
body[class] .cart-header h1, body[class] .checkout-header h1,
body[class] .cart-summary h2, body[class] .checkout-summary h2,
body[class] .checkout-card-head h2, body[class] .empty-cart h2,
body[class] .summary-total, body[class] .cart-item-price strong,
body[class] .epmp-partners-title, body[class] .tutor-hover .stat-box strong {
    color: var(--hx-p-ink);
}

/* ---------- 6. Dark panels & heroes ---------- */
body[class] .epmp-hero,
body[class] .premium-videos-hero,
body[class] .premium-course-hero,
body[class] .premium-contact-hero,
body[class] .epmp-stats-premium-wide,
body[class] .epmp-footer {
    background:
        radial-gradient(circle at 14% 18%, rgba(211, 161, 58, .16), transparent 30%),
        radial-gradient(circle at 88% 40%, rgba(36, 106, 128, .28), transparent 34%),
        linear-gradient(135deg, var(--hx-ink) 0%, var(--hx-ink-2) 55%, #04111a 100%);
}

body[class] .epmp-hero::before,
body[class] .premium-videos-hero::before,
body[class] .premium-course-hero::before,
body[class] .premium-contact-hero::before {
    background-image: radial-gradient(rgba(211, 161, 58, .28) 1px, transparent 1px);
}

body[class] .epmp-hero::after { border-color: rgba(211, 161, 58, .12); box-shadow: 0 0 0 35px rgba(211, 161, 58, .03), 0 0 0 70px rgba(211, 161, 58, .02); }
body[class] .premium-videos-hero::after,
body[class] .premium-contact-hero::after { background: rgba(211, 161, 58, .10); }

body[class] .contact-info-card,
body[class] .epmp-dark-panel,
body[class] .epmp-stats-panel,
body[class] .cart-item-image,
body[class] .epmp-course-image,
body[class] .premium-video-frame,
body[class] .premium-video-frame video {
    background:
        radial-gradient(circle at bottom right, rgba(211, 161, 58, .18), transparent 36%),
        linear-gradient(135deg, var(--hx-ink-2), var(--hx-ink-4));
}

body[class] .contact-info-card::after { background: rgba(211, 161, 58, .12); }

/* Login / register / reset: full-bleed photo with the homepage's teal scrim */
body[class] .epmp-login-page,
body[class] .epmp-register-page,
body[class] .epmp-reset-page {
    background:
        radial-gradient(circle at top left, rgba(211, 161, 58, .18), transparent 34%),
        linear-gradient(135deg, rgba(6, 23, 31, .94), rgba(10, 32, 41, .90)),
        url("../images/hero-photo.jpg") center / cover no-repeat;
}

body[class] .epmp-login-page::after,
body[class] .epmp-register-page::after { background: rgba(211, 161, 58, .08); }

/* ---------- 7. Badges, labels, accent words ---------- */
body[class] .epmp-label,
body[class] .epmp-hero-badge,
body[class] .videos-badge,
body[class] .premium-badge,
body[class] .contact-badge,
body[class] .tutors-badge,
body[class] .cart-header span,
body[class] .checkout-header span,
body[class] .epmp-login-badge,
body[class] .epmp-register-badge,
body[class] .epmp-reset-badge,
body[class] .epmp-dark-panel .epmp-label {
    color: var(--hx-gold) !important;
    background: rgba(211, 161, 58, .10) !important;
    border: 1px solid rgba(211, 161, 58, .34) !important;
    font-weight: 700;
    letter-spacing: .14em;
}

body[class] .epmp-label { background: none !important; border: 0 !important; }

body[class] .epmp-login-badge i,
body[class] .epmp-register-badge i,
body[class] .epmp-reset-badge i,
body[class] .epmp-title span,
body[class] .epmp-login-title span,
body[class] .epmp-register-title span,
body[class] .epmp-reset-title span,
body[class] .epmp-login-mini-head span,
body[class] .premium-policy a,
body[class] .contact-info-item a:hover {
    color: var(--hx-gold) !important;
}

body[class] .epmp-login-bar span { background: linear-gradient(90deg, var(--hx-gold-hi), var(--hx-gold)); }

/* Icon chips */
body[class] .epmp-register-benefit i,
body[class] .epmp-reset-step-icon,
body[class] .contact-info-icon,
body[class] .epmp-stat-icon,
body[class] .epmp-benefit-icon,
body[class] .epmp-stats-premium-wide .epmp-stat-icon {
    color: var(--hx-gold) !important;
    background: rgba(211, 161, 58, .13) !important;
    border-color: rgba(211, 161, 58, .22) !important;
    box-shadow: none !important;
}

body[class] .epmp-mini-icon,
body[class] .epmp-skill-icon,
body[class] .premium-icon {
    color: var(--hx-teal);
    background: rgba(36, 106, 128, .10);
}

body[class] .premium-price-box { background: rgba(211, 161, 58, .12); border-color: rgba(211, 161, 58, .22); }
body[class] .contact-small-note { background: rgba(211, 161, 58, .10); border-color: rgba(211, 161, 58, .22); }
body[class] .epmp-next { background: rgba(211, 161, 58, .09); border-color: rgba(211, 161, 58, .18); }
body[class] .epmp-next a { border-color: rgba(211, 161, 58, .45); }
body[class] .epmp-shield { background: rgba(211, 161, 58, .18); }
body[class] .epmp-avatar,
body[class] .epmp-photo-card,
body[class] .tutor-image-wrap { background: linear-gradient(135deg, var(--hx-paper-2), #ffffff); }

/* ---------- 8. Forms ---------- */
body[class] .epmp-login-input,
body[class] .epmp-register-input,
body[class] .epmp-reset-input { background: var(--hx-paper); }

body[class] .epmp-login-input:focus,
body[class] .epmp-register-input:focus,
body[class] .epmp-reset-input:focus,
body[class] .promo-input-row input:focus,
body[class] .points-input-row input:focus,
body[class] .checkout-field input:focus,
body[class] .checkout-field textarea:focus,
body[class] .tutors-search input:focus,
body[class] .contact-form .form-control:focus {
    border-color: rgba(211, 161, 58, .8) !important;
    box-shadow: 0 0 0 4px rgba(211, 161, 58, .16) !important;
    outline: none;
}

/* ---------- 9. Cards ---------- */
body[class] .video-card:hover,
body[class] .epmp-course-card:hover,
body[class] .epmp-partner-item:hover { border-color: rgba(211, 161, 58, .40); }

body[class] .premium-card-header,
body[class] .videos-note,
body[class] .cart-summary,
body[class] .checkout-summary,
body[class] .contact-form-card {
    background: radial-gradient(circle at top right, rgba(211, 161, 58, .10), transparent 32%), #ffffff;
}

body[class] .epmp-partners { background: linear-gradient(180deg, var(--hx-paper) 0%, #ffffff 100%); }
body[class] .epmp-partners::before { background: rgba(211, 161, 58, .10); }

/* ---------- 10. Footer ---------- */
body[class] .epmp-footer { border-top: 1px solid var(--hx-line); }
body[class] .epmp-footer::before { background: rgba(211, 161, 58, .08); }
body[class] .epmp-footer a { color: var(--hx-gold-soft); }

/* =============================================================
   11. Navigation bar
   -------------------------------------------------------------
   The bar carried four things that read as unfinished:

   1. The active marker was detached from its label. .epmp-nav a
      is 27px/24px tall in newm.css and the ::after pinned to
      bottom:0 of THAT box, so the gold bar sat on the header's
      bottom edge - roughly 24px under the word it was meant to
      point at, looking like a stray rule rather than an
      indicator.
   2. gap:2px and 6px of side padding put ~14px between labels, so
      six links read as one dense block of text.
   3. The cart was a square 16px-radius tile among pill-shaped
      controls - three different geometries in one bar. (It has
      also moved out of <nav> in header.php; it is an action.)
   4. Nothing responded to the pointer except a colour change.

   Everything below is scoped with body[class] for the same reason
   as the rest of this file: the inner pages ship their own
   inline styles afterwards.
   ============================================================= */

/* ---------- Bar ---------- */
body[class] .epmp-header {
    transition: background .28s ease, box-shadow .28s ease, border-color .28s ease;
}

body[class] .epmp-header-inner {
    gap: 20px;
    transition: min-height .28s ease;
}

/* Sticky headers float over the content with nothing to separate them once the
   page moves. Condensing and lifting the bar is what tells the eye it is a
   layer above, not part of the page. */
body[class] .epmp-header.is-stuck {
    background: rgba(6, 23, 31, .97);
    border-bottom-color: rgba(211, 161, 58, .22);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .34);
}

body[class] .epmp-header.is-stuck .epmp-header-inner { min-height: 64px; }

/* ---------- Links ---------- */
body[class] .epmp-nav { gap: 4px; }

body[class] .epmp-nav a {
    /* Vertical padding drops from 27/24 to 10, so the link box wraps the label
       instead of the whole bar - which is what lets the marker below sit
       against the text. The bar keeps its height from .epmp-header-inner. */
    padding: 10px 15px;
    border-radius: 999px;
    font-size: .845rem;
    color: rgba(233, 241, 243, .74);
    transition: color .2s ease, background-color .2s ease;
}

body[class] .epmp-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

body[class] .epmp-nav a.active {
    color: var(--hx-gold-soft);
    background: rgba(211, 161, 58, .11);
}

/* One marker, on the current page only. Hover already has the pill, and doing
   both at once made every pointer move look like a page change. */
body[class] .epmp-nav a:hover::after { content: none; }

body[class] .epmp-nav a.active::after {
    content: "";
    left: 50%;
    right: auto;
    bottom: -7px;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--hx-gold-hi), var(--hx-gold));
    box-shadow: 0 0 10px var(--hx-gold-glow);
}

/* ---------- Actions ---------- */
body[class] .epmp-header-actions { gap: 10px; }

/* Separates "about this visit" (cart, language) from "get into the account"
   (log in, register) without a heavier container around either. */
body[class] .epmp-header-rule {
    width: 1px;
    height: 24px;
    flex: 0 0 auto;
    background: var(--hx-line-2);
}

/* Round, so the cart joins the pill family the rest of the bar belongs to. */
body[class] .epmp-cart-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--hx-line-2);
    transition: transform .2s cubic-bezier(.2, .8, .3, 1), background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

body[class] .epmp-cart-icon:hover { transform: translateY(-2px); }
body[class] .epmp-cart-svg { width: 20px; height: 20px; }

body[class] .language-switcher { border-radius: 999px; }

body[class] .epmp-header-actions .epmp-btn { padding: 10px 18px; font-size: .85rem; }

/* The primary button already carries a gold glow from section 4; lifting it
   slightly on hover is the only thing missing. */
body[class] .epmp-header-actions .epmp-btn-primary {
    transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease, background .2s ease;
}

body[class] .epmp-header-actions .epmp-btn-primary:hover { transform: translateY(-2px); }

body[class] .epmp-mobile-toggle {
    border-radius: 50%;
    border: 1px solid var(--hx-line-2);
    transition: background-color .2s ease;
}

body[class] .epmp-mobile-toggle:hover { background: rgba(255, 255, 255, .14); }

/* ---------- Collapsed menu ---------- */
/*
    Below 1280px the bar becomes a stacked menu. The pill padding above would
    leave each row floating inside an oversized hit area, so the rows go back
    to full-width blocks - and the marker, which has no meaning in a vertical
    list, is dropped.
*/
@media (max-width: 1279px) {
    body[class] .epmp-nav {
        /*
            The open menu never reached full width.

            newm.css gives the nav "order:3; width:100%" here so it wraps onto
            its own line under the logo, but the base rule also sets "flex:1" -
            which is "flex:1 1 0%", and for a flex item flex-basis beats width.
            The menu was therefore laid out as a 0-basis column sharing the
            logo's line, leaving the links in a narrow stack beside it with the
            bar's whole right half empty. Setting the basis is what width:100%
            was trying to say.
        */
        flex: 0 0 100%;

        /*
            And in Arabic it was not even a column.

            newm.css turns the nav into a column here with a bare ".epmp-nav"
            (0,1,0), but it also carries 'html[dir="rtl"] .epmp-nav {
            flex-direction: row-reverse }' (0,2,0) for the desktop bar. The RTL
            rule wins at every width, so the Arabic menu opened as a wrapping
            row of links that ran past the right edge and gave the page a
            horizontal scrollbar. Restating the direction here, above both,
            settles it for either language.
        */
        flex-direction: column;
        align-items: stretch;

        gap: 2px;
        padding: 8px 0 4px;
        border-top: 1px solid var(--hx-line);
        margin-top: 6px;
    }

    body[class] .epmp-nav a {
        padding: 12px 14px;
        border-radius: 12px;
        font-size: .92rem;
    }

    body[class] .epmp-nav a.active::after { content: none; }

    body[class] .epmp-header-rule { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body[class] .epmp-header,
    body[class] .epmp-header-inner,
    body[class] .epmp-cart-icon,
    body[class] .epmp-nav a,
    body[class] .epmp-header-actions .epmp-btn-primary { transition: none; }

    body[class] .epmp-cart-icon:hover,
    body[class] .epmp-header-actions .epmp-btn-primary:hover { transform: none; }
}