/*
Theme Name: רקפת Academy Theme
Theme URI: https://example.com/rakefet-academy
Author: OpenAI
Description: תבנית RTL נקייה ומודרנית לפלטפורמת הקורסים של רקפת אהרן. מיועדת לעבוד לצד התוסף "רקפת אהרן – Course Platform".
Version: 1.0.6
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: rakefet-academy
*/

/* =========================================================
   רקפת אהרן — Brand Palette
   Inspired by the logo:
   Deep Navy / Ink Blue / Royal Steel Blue / Premium Gold
   ========================================================= */

:root {
  --ra-primary: #03132c;
  --ra-primary-2: #061b41;
  --ra-primary-3: #0c2552;

  --ra-steel: #34507e;
  --ra-steel-soft: #dfe7ee;

  --ra-accent: #e1b33d;
  --ra-accent-2: #f6d260;
  --ra-accent-dark: #c39124;

  --ra-ink: #05152d;
  --ra-muted: #5d6a7c;

  --ra-bg: #fbf7ee;
  --ra-bg-2: #f4ead8;
  --ra-line: #e8dcc0;
  --ra-card: #fffdf8;

  --ra-shadow: 0 24px 70px rgba(3, 19, 44, 0.13);
  --ra-shadow-gold: 0 18px 42px rgba(195, 145, 36, 0.25);
  --ra-radius: 28px;

  /* Frontend course plugin override */
  --rkc-primary: var(--ra-primary);
  --rkc-accent: var(--ra-accent);
  --rkc-bg: var(--ra-bg);
  --rkc-card: var(--ra-card);
  --rkc-ink: var(--ra-ink);
  --rkc-muted: var(--ra-muted);
  --rkc-line: var(--ra-line);
  --rkc-success: #16a34a;
  --rkc-shadow: var(--ra-shadow);
  --rkc-radius: var(--ra-radius);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  direction: rtl;
  max-width: 100%;
  overflow-x: clip;
}

/* Fallback for older browsers */
@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 94% 4%, rgba(225, 179, 61, 0.16) 0, transparent 34%),
    radial-gradient(circle at 0 100%, rgba(52, 80, 126, 0.13) 0, transparent 36%),
    linear-gradient(180deg, #fffdf8 0%, var(--ra-bg) 48%, #f8efe0 100%);
  color: var(--ra-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  max-width: 100%;
  overflow-x: clip;
  position: relative;
}

a {
  color: var(--ra-steel);
  transition: color 0.18s ease;
}

a:hover {
  color: var(--ra-accent-dark);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(225, 179, 61, 0.42);
  outline-offset: 3px;
}

.ra-container {
  width: min(1220px, calc(100% - 36px));
  margin: 0 auto;
  overflow-x:hidden !important;
}

/* =========================================================
   Header
   ========================================================= */

.ra-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 247, 238, 0.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(232, 220, 192, 0.85);
  box-shadow: 0 10px 30px rgba(3, 19, 44, 0.04);
  overflow-x:hidden !important;
}

.ra-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
}

.ra-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ra-ink);
  font-weight: 950;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.ra-brand:hover {
  color: var(--ra-primary);
}

/* Logo-like mark based on the icon colors */
.ra-brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 17px;
  background:
    radial-gradient(circle at 15% 18%, rgba(52, 80, 126, 0.58), transparent 34%),
    linear-gradient(145deg, var(--ra-primary) 0%, var(--ra-primary-2) 55%, var(--ra-primary-3) 100%);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: transparent;
  font-size: 0;
  box-shadow:
    0 14px 30px rgba(3, 19, 44, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.ra-brand-mark:before {
  content: "";
  width: 28px;
  height: 31px;
  position: absolute;
  z-index: 2;
  background:
    linear-gradient(135deg, var(--ra-accent-2) 0%, var(--ra-accent) 46%, var(--ra-accent-dark) 100%);
  clip-path: polygon(100% 0, 52% 0, 15% 45%, 52% 100%, 100% 100%, 61% 50%);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.22));
}

.ra-brand-mark:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 24px;
  height: 30px;
  inset-inline-start: 9px;
  top: 10px;
  background: linear-gradient(145deg, rgba(93, 125, 168, 0.95), rgba(27, 47, 78, 0.86));
  clip-path: polygon(0 0, 100% 0, 0 58%, 0 100%, 100% 100%, 0 44%);
  opacity: 0.62;
}

.ra-menu {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ra-menu a {
  position: relative;
  text-decoration: none;
  color: var(--ra-ink);
  font-weight: 850;
}

.ra-menu a:after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ra-accent-dark), var(--ra-accent-2));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.18s ease;
}

.ra-menu a:hover {
  color: var(--ra-primary);
}

.ra-menu a:hover:after {
  transform: scaleX(1);
}

.ra-header-cta {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 10px 17px;
  background: linear-gradient(135deg, var(--ra-accent-2), var(--ra-accent) 55%, var(--ra-accent-dark));
  color: var(--ra-primary) !important;
  text-decoration: none;
  font-weight: 950;
  box-shadow: var(--ra-shadow-gold);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ra-header-cta:hover {
  transform: translateY(-1px);
  color: var(--ra-primary) !important;
  box-shadow: 0 20px 50px rgba(195, 145, 36, 0.32);
}

/* =========================================================
   Layout
   ========================================================= */

.ra-main {
  min-height: 70vh;
}

.ra-page {
  padding: 34px 0;
}

/* =========================================================
   Hero
   ========================================================= */

.ra-hero {
  padding: 56px 0 28px;
}

.ra-hero-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: center;
  border-radius: 34px;
  background:
    radial-gradient(circle at 100% 0, rgba(246, 210, 96, 0.26) 0, transparent 36%),
    radial-gradient(circle at 0 100%, rgba(52, 80, 126, 0.12) 0, transparent 34%),
    linear-gradient(135deg, #fffdf8 0%, #fbf3e4 55%, #ffffff 100%);
  box-shadow: var(--ra-shadow);
  border: 1px solid rgba(225, 179, 61, 0.24);
  padding: 44px;
  position: relative;
  overflow: hidden;
}

.ra-hero-card:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  opacity: 0.42;
}

.ra-kicker {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--ra-accent-dark);
  font-weight: 950;
}

.ra-kicker:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ra-accent-2), var(--ra-accent-dark));
  box-shadow: 0 0 0 5px rgba(225, 179, 61, 0.16);
}

.ra-hero h1 {
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: 1.02;
  margin: 10px 0 14px;
  font-weight: 950;
  letter-spacing: -0.045em;
  color: var(--ra-primary);
}

.ra-hero p {
  color: var(--ra-muted);
  font-size: 1.15rem;
  max-width: 700px;
}

.ra-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.ra-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 13px 21px;
  text-decoration: none;
  font-weight: 950;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.ra-btn:hover {
  transform: translateY(-1px);
}

.ra-btn-primary {
  background: linear-gradient(135deg, var(--ra-accent-2), var(--ra-accent) 55%, var(--ra-accent-dark));
  color: var(--ra-primary) !important;
  box-shadow: var(--ra-shadow-gold);
}

.ra-btn-primary:hover {
  color: var(--ra-primary) !important;
  box-shadow: 0 20px 52px rgba(195, 145, 36, 0.34);
}

.ra-btn-light {
  background: rgba(255, 255, 255, 0.86);
  color: var(--ra-primary) !important;
  border: 1px solid var(--ra-line);
  box-shadow: 0 12px 34px rgba(3, 19, 44, 0.08);
}

.ra-btn-light:hover {
  border-color: rgba(225, 179, 61, 0.55);
  background: #fff;
}

.ra-hero-visual {
  min-height: 330px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 16%, rgba(52, 80, 126, 0.68) 0, transparent 28%),
    radial-gradient(circle at 86% 82%, rgba(225, 179, 61, 0.22) 0, transparent 32%),
    linear-gradient(145deg, var(--ra-primary) 0%, var(--ra-primary-2) 56%, var(--ra-primary-3) 100%);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 26px 70px rgba(3, 19, 44, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.ra-main-logo{
  position: absolute;
  inset: 55px 54px auto auto;
  width: 380px;
  height: 214px;
  background:
    linear-gradient(135deg, var(--ra-accent-2) 0%, var(--ra-accent) 44%, var(--ra-accent-dark) 100%);
/*   clip-path: polygon(100% 0, 52% 0, 12% 45%, 52% 100%, 100% 100%, 60% 50%); */
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.26));
  mix-blend-mode: screen;
  opacity: 0.5;
}

/* .ra-hero-visual:before {
  content: "";
  position: absolute;
  inset: 55px 54px auto auto;
  width: 205px;
  height: 214px;
  background:
    linear-gradient(135deg, var(--ra-accent-2) 0%, var(--ra-accent) 44%, var(--ra-accent-dark) 100%);
  clip-path: polygon(100% 0, 52% 0, 12% 45%, 52% 100%, 100% 100%, 60% 50%);
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.26));
} */

.ra-hero-visual:after {
  content: "לומדים • מתקדמים • יוצרים";
  position: absolute;
  inset: auto 30px 30px 30px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.12);
  color: #fffdf8;
  padding: 22px;
  font-size: 1.3rem;
  font-weight: 950;
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* =========================================================
   Content
   ========================================================= */

.ra-content-card {
  background: var(--ra-card);
  border: 1px solid var(--ra-line);
  border-radius: 28px;
  padding: 34px;
  box-shadow: var(--ra-shadow);
}

.ra-content-card h1 {
  font-size: 2.4rem;
  line-height: 1.15;
  margin-top: 0;
  color: var(--ra-primary);
}

/* =========================================================
   WooCommerce quick brand override
   ========================================================= */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.single_add_to_cart_button,
.woocommerce a.added_to_cart {
  border-radius: 999px !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--ra-accent-2), var(--ra-accent) 55%, var(--ra-accent-dark)) !important;
  color: var(--ra-primary) !important;
  font-weight: 950 !important;
  box-shadow: var(--ra-shadow-gold);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce a.added_to_cart:hover {
  transform: translateY(-1px);
  color: var(--ra-primary) !important;
  box-shadow: 0 20px 52px rgba(195, 145, 36, 0.34);
}

.woocommerce div.product .price,
.woocommerce ul.products li.product .price,
.woocommerce-Price-amount {
  color: var(--ra-accent-dark);
  font-weight: 950;
}

.woocommerce span.onsale {
  background: linear-gradient(135deg, var(--ra-accent-2), var(--ra-accent-dark)) !important;
  color: var(--ra-primary) !important;
  font-weight: 950;
}

.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--ra-accent) !important;
}

.woocommerce-message:before,
.woocommerce-info:before {
  color: var(--ra-accent-dark) !important;
}

/* =========================================================
   Course plugin frontend override
   This helps the plugin screens match the new logo palette.
   ========================================================= */

.rkc-wrap {
  color: var(--ra-ink);
}

.rkc-kicker {
  color: var(--ra-accent-dark) !important;
}

.rkc-kicker:before {
  background: linear-gradient(135deg, var(--ra-accent-2), var(--ra-accent-dark)) !important;
  box-shadow: 0 0 0 5px rgba(225, 179, 61, 0.14);
}

.rkc-dashboard-hero,
.rkc-catalog-hero,
.rkc-landing-hero,
.rkc-player-topbar,
.rkc-login-card {
  background:
    radial-gradient(circle at 100% 0, rgba(246, 210, 96, 0.26) 0, transparent 36%),
    radial-gradient(circle at 0 100%, rgba(52, 80, 126, 0.12) 0, transparent 34%),
    linear-gradient(135deg, #fffdf8 0%, #fbf3e4 55%, #ffffff 100%) !important;
  border-color: rgba(225, 179, 61, 0.24) !important;
  box-shadow: var(--ra-shadow) !important;
}

.rkc-dashboard-hero:after,
.rkc-catalog-hero:after,
.rkc-login-card:after {
  background: rgba(225, 179, 61, 0.13) !important;
}

.rkc-dashboard-hero h1,
.rkc-catalog-hero h1,
.rkc-landing-copy h1,
.rkc-player-topbar h1,
.rkc-login-copy h1,
.rkc-section-head h2,
.rkc-course-card h2 a,
.rkc-curriculum-card h2,
.rkc-files-box h3,
.rkc-lesson-heading h2 {
  color: var(--ra-primary) !important;
}

.rkc-dashboard-hero p,
.rkc-catalog-hero p,
.rkc-landing-copy p,
.rkc-login-copy p,
.rkc-course-card p,
.rkc-section-head p,
.rkc-curriculum-item em,
.rkc-lesson-title small,
.rkc-progress-label {
  color: var(--ra-muted) !important;
}

.rkc-btn-primary,
.rkc-login-form .button {
  background: linear-gradient(135deg, var(--ra-accent-2), var(--ra-accent) 55%, var(--ra-accent-dark)) !important;
  color: var(--ra-primary) !important;
  box-shadow: var(--ra-shadow-gold) !important;
}

.rkc-btn-primary:hover {
  box-shadow: 0 20px 52px rgba(195, 145, 36, 0.34) !important;
}

.rkc-btn-light {
  background: #fffdf8 !important;
  color: var(--ra-primary) !important;
  box-shadow: 0 16px 38px rgba(3, 19, 44, 0.11) !important;
}

.rkc-btn-ghost {
  background: rgba(225, 179, 61, 0.14) !important;
  color: var(--ra-primary) !important;
}

.rkc-stat,
.rkc-course-card,
.rkc-login-form,
.rkc-curriculum-card,
.rkc-files-box,
.rkc-player-sidebar,
.rkc-lesson-panel,
.rkc-empty-state {
  background: var(--ra-card) !important;
  border-color: var(--ra-line) !important;
  box-shadow: 0 18px 58px rgba(3, 19, 44, 0.09) !important;
}

.rkc-course-card:hover {
  box-shadow: 0 26px 80px rgba(3, 19, 44, 0.15) !important;
}

.rkc-stat span,
.rkc-section-head a,
.rkc-big-price,
.rkc-price ins,
.rkc-progress-label strong,
.rkc-curriculum-item a,
.rkc-file-link,
.rkc-muted-link {
  color: var(--ra-accent-dark) !important;
}

.rkc-course-thumb {
  background: #f4ead8 !important;
}

.rkc-thumb-placeholder {
  background:
    radial-gradient(circle at 20% 20%, rgba(246, 210, 96, 0.22), transparent 35%),
    linear-gradient(135deg, var(--ra-primary), var(--ra-primary-3)) !important;
}

.rkc-thumb-placeholder span {
  background: rgba(225, 179, 61, 0.18) !important;
  color: var(--ra-accent-2) !important;
  border: 1px solid rgba(246, 210, 96, 0.28);
}

.rkc-card-badges span,
.rkc-landing-meta span,
.rkc-status-pill,
.rkc-admin-pill {
  background: rgba(225, 179, 61, 0.15) !important;
  color: var(--ra-primary) !important;
}

.rkc-progress,
.rkc-mini-progress {
  background: #efe4cd !important;
}

.rkc-progress span,
.rkc-mini-progress span {
  background: linear-gradient(90deg, var(--ra-accent-dark), var(--ra-accent-2)) !important;
}

.rkc-empty-state {
  border-style: dashed !important;
}

.rkc-login-form input[type="text"],
.rkc-login-form input[type="password"] {
  border-color: var(--ra-line) !important;
  background: #fffdf8 !important;
  color: var(--ra-ink) !important;
}

.rkc-landing-media,
.rkc-video-wrap,
.rkc-video-frame {
  background:
    radial-gradient(circle at 18% 16%, rgba(52, 80, 126, 0.62) 0, transparent 30%),
    linear-gradient(145deg, var(--ra-primary), var(--ra-primary-2) 60%, var(--ra-primary-3)) !important;
}

.rkc-curriculum-item,
.rkc-lesson-item:hover,
.rkc-lesson-item.is-active {
  background: #f7eedc !important;
}

.rkc-curriculum-item span,
.rkc-lesson-index {
  background: #fff8e6 !important;
  color: var(--ra-accent-dark) !important;
}

.rkc-lesson-item {
  color: var(--ra-ink) !important;
}

.rkc-lesson-item.is-complete .rkc-lesson-index,
.rkc-btn-done {
  background: #e8fff0 !important;
  color: var(--rkc-success) !important;
}

.rkc-preview-banner,
.rkc-manager-note {
  background: #fff7df !important;
  border-color: rgba(225, 179, 61, 0.36) !important;
  color: var(--ra-primary) !important;
}

/* =========================================================
   Footer
   ========================================================= */

.ra-footer {
  margin-top: 60px;
  background:
    radial-gradient(circle at 12% 0, rgba(52, 80, 126, 0.45), transparent 32%),
    linear-gradient(135deg, var(--ra-primary), var(--ra-primary-2));
  color: #fffdf8;
  padding: 34px 0;
  border-top: 1px solid rgba(225, 179, 61, 0.18);
}

.ra-footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}

.ra-footer a {
  color: var(--ra-accent-2);
  text-decoration: none;
}

.ra-footer a:hover {
  color: #fffdf8;
}

/* =========================================================
   Accessible screen-reader text WITHOUT creating 9999px overflow
   ========================================================= */

.screen-reader-text:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
}

.screen-reader-text:focus,
.screen-reader-text:active {
  position: fixed !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 100000 !important;
  width: auto !important;
  height: auto !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  border-radius: 999px !important;
  background: #fffdf8 !important;
  color: #03132c !important;
  border: 2px solid #e1b33d !important;
  box-shadow: 0 18px 42px rgba(3, 19, 44, 0.18) !important;
  font-weight: 900 !important;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 900px) {
  .ra-hero-card {
    grid-template-columns: 1fr;
    padding: 30px;
  }

  .ra-menu {
    display: none;
  }

  .ra-footer-inner {
    display: block;
  }

  .ra-hero-visual {
    min-height: 240px;
  }

  .ra-hero-visual:before {
    width: 155px;
    height: 165px;
    inset: 38px 38px auto auto;
  }
.ra-main-logo{
  width: 240px;
  height: 120px;
}

.ra-hero-visual:after {
  inset: auto 30px 15px 30px;
  padding: 14px 22px 14px 22px;
}
}

@media (max-width: 620px) {
  .ra-container {
    width: min(100% - 24px, 1220px);
  }

  .ra-header-inner {
    gap: 12px;
  }

  .ra-brand {
    font-size: 1.08rem;
  }

  .ra-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  .ra-header-cta {
    padding: 9px 12px;
    font-size: 0.9rem;
  }

  .ra-hero {
    padding-top: 28px;
  }

  .ra-hero-card {
    border-radius: 26px;
    padding: 24px;
  }

  .ra-content-card {
    padding: 22px;
  }

  .ra-actions {
    display: grid;
  }

  .ra-btn {
    width: 100%;
  }
}