/*
Theme Name: Online Tijara
Theme URI: https://on-tijara.com
Description: Child theme of Twenty Twenty-Five for Online Tijara — a futuristic Arabic RTL "Commerce Cosmos": cinematic dark luxury, hybrid light-WebGL depth, glassmorphism, orange/gold glow. Native Gutenberg blocks + FSE (no page builder). WooCommerce + Tutor LMS safe.
Author: Online Tijara
Template: twentytwentyfive
Version: 3.0.0
Text Domain: online-tijara
Requires at least: 6.7
Tested up to: 7.0
License: GNU General Public License v2 or later
*/

/* ===== Global base (applies site-wide) =====
   Section + page styles live in assets/css/*.css (scoped per page).
   Color tokens + fonts are defined in theme.json. */

/* Force the dark base on html+body: the block theme's global styles set a
   white body, which the cosmos backdrop masks on desktop but can show through
   in mobile gaps / overscroll. !important beats the later global-styles rule. */
html { scroll-behavior: smooth; background-color: #070709 !important; }
body { overflow-x: hidden; background-color: #070709 !important; }
::selection { background: #ff6b1a; color: #160a02; }

/* Western digits in numeric UI even though the document is RTL Arabic. */
.ot-num { font-family: 'Sora', ui-monospace, sans-serif; font-variant-numeric: lining-nums tabular-nums; }

/* =====================================================================
   FIXED GLASS NAV (every page). Mobile menu = CSS-only checkbox (no JS).
   ===================================================================== */
.ot-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  display: flex; justify-content: space-between; align-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(6%, env(safe-area-inset-right)) 14px max(6%, env(safe-area-inset-left));
  background: rgba(7,7,9,.55);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease, padding .4s ease;
}
.ot-nav.ot-scrolled {
  background: rgba(7,7,9,.82); padding: max(10px, env(safe-area-inset-top)) max(6%, env(safe-area-inset-right)) 10px max(6%, env(safe-area-inset-left));
  border-bottom-color: rgba(255,210,122,.18);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}

/* Logo: molten coin (sphere) + market-cap mark */
.ot-logo-wrap { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.ot-logo-mini { position: relative; width: 46px; height: 52px; }
.ot-logo-mini-ball {
  position: absolute; bottom: 0; left: 0; width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff7ec, #ffd27a 22%, #ff8a3d 52%, #ff6b1a 74%, #8a3505);
  box-shadow: inset -4px -4px 8px rgba(0,0,0,.45), inset 3px 3px 6px rgba(255,255,255,.35), 0 6px 20px rgba(255,107,26,.6);
}
.ot-logo-mini-ball::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 13px; height: 13px; border-radius: 50%; background: #1a0a01; }
.ot-logo-mini-cap { position: absolute; top: 0; left: -2px; width: 38px; height: 18px; transform: rotate(-8deg); }
.ot-logo-mini-cap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(145deg,#2a2a36,#000); clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%); }
.ot-logo-mini-cap::after { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 18px; height: 8px; background: #000; border-radius: 2px 2px 6px 6px; }
.ot-logo-text-mini { font-family: 'Cairo', sans-serif; font-weight: 900; font-size: 1.3rem; line-height: 1; letter-spacing: -.01em; }
.ot-logo-text-mini .ot-on { background: linear-gradient(135deg,#ff6b1a,#ffd27a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ot-logo-text-mini .ot-t { color: #f6f5f3; }

.ot-nav-links { display: flex; gap: 28px; align-items: center; }
.ot-nav-links a { color: #d8d8e4; text-decoration: none; font-size: .92rem; font-weight: 500; transition: color .3s; position: relative; padding-block: 8px; }
.ot-nav-links a:not(.ot-btn-nav):not(.ot-cart-link)::after { content: ''; position: absolute; bottom: -5px; right: 0; width: 0; height: 2px; background: linear-gradient(90deg,#ff6b1a,#ffd27a); transition: width .3s; }
.ot-nav-links a:not(.ot-btn-nav):hover { color: #ffd27a; }
.ot-nav-links a:not(.ot-btn-nav):not(.ot-cart-link):hover::after { width: 100%; }
.ot-btn-nav {
  background: linear-gradient(135deg,#ff6b1a,#ff8a3d 60%,#ffd27a); color: #160a02 !important;
  padding: 10px 22px; border-radius: 50px; font-weight: 800; font-size: .9rem;
  box-shadow: 0 8px 24px rgba(255,107,26,.5); transition: transform .3s, box-shadow .3s;
}
.ot-btn-nav:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 30px rgba(255,107,26,.6); }
.ot-cart-link { font-size: 1.2rem; line-height: 1; padding: 10px 8px; display: inline-flex; align-items: center; }

/* CSS-only mobile menu toggle (works with no JS, site-wide).
   The checkbox is the real, keyboard-focusable control; the burger label
   is the visual affordance. Kept out of the tab order on desktop (menu is
   always open there). */
.ot-nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 901px) { .ot-nav-toggle { display: none; } }
.ot-burger { display: none; font-size: 1.5rem; color: #ffd27a; background: none; border: none; cursor: pointer; line-height: 1; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
/* Visible focus on the burger when its checkbox is keyboard-focused. */
.ot-nav-toggle:focus-visible + .ot-burger { outline: 3px solid #ffd27a; outline-offset: 3px; border-radius: 8px; }

/* =====================================================================
   FOOTER (every page)
   ===================================================================== */
.ot-footer {
  padding: 64px 6% 44px; border-top: 1px solid rgba(255,255,255,.06);
  text-align: center; color: #b4b4c2; position: relative;
  background: linear-gradient(180deg, transparent, rgba(255,107,26,.04));
}
.ot-footer .ot-ft-logo { margin-bottom: 18px; display: inline-flex; align-items: center; gap: 12px; }
.ot-ft-links { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin: 6px 0 4px; }
.ot-ft-links a { color: #c9c9d4; text-decoration: none; font-size: .92rem; transition: color .3s; }
.ot-ft-links a:hover { color: #ffd27a; }
.ot-footer .ot-ft-text { font-size: .9rem; margin-top: 14px; line-height: 1.9; }

/* Reserve space for the fixed nav on every page EXCEPT the landing page,
   whose hero is designed to sit under the translucent nav. */
body:not(.ot-front) { padding-top: 84px; }

@media (max-width: 900px) {
  .ot-nav-links {
    display: none; position: absolute; top: 100%; right: 0; left: 0;
    background: rgba(7,7,9,.98); padding: 24px; gap: 18px; flex-direction: column;
    border-bottom: 1px solid rgba(255,210,122,.15);
  }
  .ot-nav-toggle:checked ~ .ot-nav-links { display: flex; }
  .ot-burger { display: block; }
}

/* =====================================================================
   ACCESSIBILITY — skip link, visible focus, anchor offset (site-wide)
   ===================================================================== */
.ot-skip-link {
  position: absolute; top: -200%; inset-inline-start: 50%; transform: translateX(50%);
  z-index: 9999; background: #ff6b1a; color: #160a02; font-weight: 800;
  padding: 12px 24px; border-radius: 0 0 10px 10px; text-decoration: none;
}
.ot-skip-link:focus { top: 0; }

/* A clearly visible focus indicator for keyboard users on the dark theme. */
:focus-visible { outline: 3px solid #ffd27a; outline-offset: 4px; border-radius: 6px; }
/* The skip-link target is a programmatic focus host, not an interactive
   control — don't wrap the whole page in a focus ring when it receives it. */
main[tabindex="-1"]:focus, main[tabindex="-1"]:focus-visible { outline: none; }
/* On molten/light backgrounds, a white ring reads better. */
.ot-btn-primary:focus-visible, .ot-btn-pricing:focus-visible, .ot-btn-nav:focus-visible,
.ot-check-3d:focus-visible { outline-color: #fff; outline-offset: 3px; }

/* Keep focused / fragment-targeted elements from hiding under the fixed nav. */
:is(section, h1, h2, h3, [id]):target { scroll-margin-top: 100px; }
.ot-section, [id] { scroll-margin-top: 96px; }

/* Respect reduced motion site-wide. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}