/*
Theme Name: Vertex Coaching
Theme URI: https://vertexcoaching.example
Author: Vertex Coaching
Author URI: https://vertexcoaching.example
Description: A premium, dark-athletic WordPress theme for high-end fitness coaching & sports supplement/apparel e-commerce. Built for WooCommerce, Elementor, and WPML/Polylang (Arabic RTL / French LTR) readiness.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
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: vertex
Tags: fitness, coaching, e-commerce, dark, custom-colors, custom-menu, translation-ready, woocommerce

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* ============================================
   This stylesheet is enqueued on EVERY template.
   It contains the design tokens, resets, and the
   header/footer chrome shared site-wide.
   Page-specific styles live in /assets/css/*.css
   and are enqueued conditionally — see inc/enqueue.php
   ============================================ */

/* ============================================
   VERTEX COACHING — Design Tokens
   ============================================ */
:root{
  --bg-void:#0B0D0E;
  --bg-surface:#15181B;
  --bg-surface-2:#1D2124;
  --accent-flame:#FF4B1F;
  --accent-flame-dim:#B8340F;
  --accent-ember:#FFB627;
  --text-primary:#F5F3EF;
  --text-secondary:#A7ADB3;
  --text-tertiary:#6E7378;
  --border-hairline:rgba(245,243,239,0.08);
  --border-hairline-strong:rgba(245,243,239,0.16);

  --font-display:'Bebas Neue', 'Tajawal', sans-serif;
  --font-body:'Inter', 'Tajawal', sans-serif;
  --font-mono:'Space Mono', 'Tajawal', monospace;

  --radius-sm:2px;
  --radius-md:4px;
  --container:1240px;
  --edge:clamp(20px, 5vw, 64px);
}

html[dir="rtl"] :root, html[dir="rtl"]{
  --font-display:'Tajawal', sans-serif;
  --font-body:'Tajawal', sans-serif;
  --font-mono:'Tajawal', monospace;
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-void);
  color:var(--text-primary);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
ul{list-style:none;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

:focus-visible{outline:2px solid var(--accent-ember); outline-offset:3px;}

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--edge);
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent-flame);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
html[dir="rtl"] .eyebrow{ letter-spacing:normal; }
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--accent-flame);
}

.section-title{
  font-family:var(--font-display);
  font-size:clamp(32px, 4.4vw, 56px);
  line-height:1.02;
  letter-spacing:0.01em;
  text-transform:uppercase;
  color:var(--text-primary);
}
html[dir="rtl"] .section-title{ text-transform:none; letter-spacing:normal; font-weight:800; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:15px 30px;
  border-radius:var(--radius-sm);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
  border:1px solid transparent;
}
html[dir="rtl"] .btn{ letter-spacing:normal; text-transform:none; font-family:var(--font-body); font-weight:700; }
.btn-primary{
  background:var(--accent-flame);
  color:#0B0D0E;
  font-weight:700;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(255,75,31,0.55); }
.btn-ghost{
  background:transparent;
  border-color:var(--border-hairline-strong);
  color:var(--text-primary);
}
.btn-ghost:hover{ border-color:var(--accent-ember); color:var(--accent-ember); }

/* Signature element: the Pulse Line — reads as an EKG trace and a track lane */
.pulse-divider{
  width:100%;
  height:34px;
  overflow:hidden;
  opacity:0.9;
}
.pulse-divider svg{ width:200%; height:100%; animation:pulse-scroll 14s linear infinite; }
html[dir="rtl"] .pulse-divider svg{ animation-direction:reverse; }
@keyframes pulse-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================
/* ============================================
   HEADER
   ============================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,13,14,0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-hairline);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:18px;
  gap:16px;
  position:relative;
}
.logo{
  font-family:var(--font-display);
  font-size:24px;
  letter-spacing:0.06em;
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-shrink:0;
}
html[dir="rtl"] .logo{ letter-spacing:normal; font-weight:800; }
.logo .logo-mark{ color:var(--accent-flame); }

.main-nav{ display:flex; align-items:center; gap:36px; }
.main-nav ul{ display:flex; gap:32px; }
.main-nav a{
  font-size:14px; font-weight:500; color:var(--text-secondary);
  position:relative; padding-block:4px;
  transition:color .16s ease;
}
.main-nav a:hover{ color:var(--text-primary); }
.main-nav a::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0;
  width:0; height:1px; background:var(--accent-flame);
  transition:width .2s ease;
}
.main-nav a:hover::after{ width:100%; }
.main-nav-cta{ display:none; } /* Shown only inside the mobile dropdown — see media query below. */

.header-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.lang-toggle{
  display:flex; border:1px solid var(--border-hairline-strong); border-radius:var(--radius-sm); overflow:hidden;
  font-family:var(--font-mono); font-size:12px; flex-shrink:0;
}
.lang-toggle button{
  background:transparent; border:none; color:var(--text-tertiary);
  padding:8px 12px; transition:background .16s ease, color .16s ease;
}
.lang-toggle button.active{ background:var(--accent-flame); color:#0B0D0E; font-weight:700; }
.lang-toggle button:not(.active):hover{ color:var(--text-primary); }

/* Polylang's pll_the_languages() prints <li><a><img class="pll-flag" ...></a></li>
   rather than <button> — these rules give that real markup the right look. */
.lang-toggle{ align-items:center; }
.lang-toggle li{ list-style:none; display:flex; }
.lang-toggle li a{
  display:flex; align-items:center; padding:6px 10px;
  transition:background .16s ease, opacity .16s ease;
}
.lang-toggle li a img.pll-flag{
  width:20px; height:14px; object-fit:cover; border-radius:2px; display:block;
  opacity:0.55; transition:opacity .16s ease;
}
.lang-toggle li a:hover img.pll-flag{ opacity:0.85; }
.lang-toggle li.lang-item-current a img.pll-flag,
.lang-toggle li a.pll-current-lang img.pll-flag{ opacity:1; }
.lang-toggle li.lang-item-current a{ background:rgba(255,75,31,0.12); border-radius:var(--radius-sm); }

.nav-toggle{ display:none; background:none; border:none; color:var(--text-primary); font-size:22px; flex-shrink:0; padding:4px 6px; }

@media (max-width: 900px){
  /* Top row on mobile: logo — language flags — hamburger only.
     The booking button moves into the dropdown below so it never
     crowds the flags out of view or forces horizontal overflow. */
  .header-cta-desktop{ display:none; }
  .nav-toggle{ display:block; }

  .main-nav{ display:block; }
  .main-nav ul{ display:none; }
  .main-nav-cta{ display:none; }

  .main-nav.is-open{
    display:flex; flex-direction:column; gap:4px;
    position:absolute; top:100%; inset-inline:0;
    background:var(--bg-surface);
    border-top:1px solid var(--border-hairline);
    padding:16px var(--edge) 20px;
    z-index:99;
  }
  .main-nav.is-open ul{ display:flex; flex-direction:column; gap:2px; }
  .main-nav.is-open ul li a{ display:block; padding:12px 4px; font-size:15px; }
  .main-nav.is-open .main-nav-cta{ display:flex; justify-content:center; margin-top:12px; }
}

@media (max-width: 420px){
  .lang-toggle li a{ padding:6px 7px; }
}

/* ============================================
/* ============================================
   FOOTER
   ============================================ */
.site-footer{ background:#0A0B0C; border-top:1px solid var(--border-hairline); padding-top:80px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px; padding-bottom:60px; }
.footer-brand .logo{ margin-bottom:18px; }
.footer-brand p{ color:var(--text-tertiary); font-size:14px; max-width:280px; margin-bottom:24px; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{
  width:36px; height:36px; border:1px solid var(--border-hairline-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--text-secondary);
  transition:border-color .16s ease, color .16s ease;
}
.footer-social a:hover{ border-color:var(--accent-flame); color:var(--accent-flame); }
.footer-col h4{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-tertiary); margin-bottom:20px; }
html[dir="rtl"] .footer-col h4{ letter-spacing:normal; text-transform:none; }
.footer-col ul{ display:flex; flex-direction:column; gap:13px; }
.footer-col a{ color:var(--text-secondary); font-size:14.5px; transition:color .16s ease; }
.footer-col a:hover{ color:var(--text-primary); }
.newsletter-form{ display:flex; gap:0; border:1px solid var(--border-hailine-strong); border:1px solid var(--border-hairline-strong); border-radius:var(--radius-sm); overflow:hidden; margin-top:6px; }
.newsletter-form input{
  flex:1; background:transparent; border:none; color:var(--text-primary);
  padding:13px 14px; font-size:14px; font-family:var(--font-body);
}
.newsletter-form input:focus{ outline:none; }
.newsletter-form button{
  background:var(--accent-flame); border:none; color:#0B0D0E; font-weight:700;
  padding:0 18px; font-size:13px;
}
.footer-bottom{
  border-top:1px solid var(--border-hairline);
  padding-block:24px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:13px; color:var(--text-tertiary);
}
.footer-bottom-links{ display:flex; gap:22px; }

@media (max-width: 900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns:1fr; }
}