/*
Theme Name: Ysport OceanWP Child
Theme URI: https://ysport.co.za
Description: Custom homepage redesign for Ysport, built as a child theme of OceanWP so WooCommerce, cart, checkout and every other page keep working exactly as before. Only the homepage look changes.
Author: Ysport
Template: oceanwp
Version: 1.0.0
Text Domain: ysport-child
*/

/* Brand palette tokens live on :root (not just .ys-home) so the site-wide
   footer rules near the bottom of this file can use them too. Everything
   else below is scoped to .ys-home or ys- prefixed classes so it can't
   touch the shop, product, cart or checkout pages. */
:root{
  /* Brand palette: royal blue (from your logo), black, white, and grey as
     the connective neutral in between — no unrelated accent colour. Where
     a highlight needs to pop on a dark section, --sky (a lighter tint of
     the same royal blue) does that job instead of introducing a new hue. */
  --ink:#0B0E1A;
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#EEF0F4;
  --cobalt:#2540E8;
  --cobalt-deep:#16279C;
  --sky:#7C93FF;
  --slate:#5B6478;
  --line:#D9DCE6;
  --pitch-ink:#0B0E1A;
  --pitch-surface:#141A2E;
  --on-pitch:#FFFFFF;
  --shadow: 0 1px 2px rgba(11,14,26,.06), 0 8px 24px -12px rgba(11,14,26,.18);
}

.ys-home{
  background:var(--paper);
  color:var(--ink);
  font-family:'Barlow', Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.ys-home *{ box-sizing:border-box; }
.ys-home h1, .ys-home h2, .ys-home h3, .ys-home h4{
  font-family:'Anton','Barlow Semi Condensed',Arial,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:0;
  line-height:1;
}
.ys-home p{ margin:0; }
.ys-home a{ color:inherit; }

.ys-eyebrow{
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cobalt);
  display:block;
}
.ys-eyebrow.on-pitch{ color:var(--sky); }

.ys-wrap{ max-width:1180px; margin:0 auto; padding-inline:clamp(20px,4vw,48px); }

/* Hide a stray OceanWP page-title bar on the front page, if the install shows one */
body.home .page-header,
body.home .ocean-page-header-wrap,
body.home .breadcrumbs{ display:none; }

/* ---------- buttons ---------- */
.ys-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:700;
  font-size:.92rem; letter-spacing:.03em; text-transform:uppercase;
  padding:15px 26px; border-radius:2px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:transform .15s ease, background .15s ease;
}
@media (prefers-reduced-motion: reduce){ .ys-btn{ transition:none; } }
.ys-btn:hover{ transform:translateY(-2px); }
.ys-btn-primary{ background:var(--cobalt); color:#fff; }
.ys-btn-primary:hover{ background:var(--cobalt-deep); color:#fff; }
.ys-btn-ghost{ background:transparent; color:var(--on-pitch); border-color:rgba(255,255,255,.35); }
.ys-btn-ghost:hover{ border-color:var(--on-pitch); color:var(--on-pitch); }
.ys-btn-outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.ys-btn-outline:hover{ border-color:var(--cobalt); color:var(--cobalt); }
.ys-btn-white{ background:#fff; color:var(--cobalt-deep); }
.ys-btn-white:hover{ background:var(--surface-2); color:var(--cobalt-deep); }

/* ---------- hero ---------- */
.ys-hero{
  background:linear-gradient(180deg, var(--pitch-ink) 0%, var(--pitch-surface) 100%);
  color:var(--on-pitch);
  position:relative; overflow:hidden;
}
.ys-hero .ys-wrap{ padding-block:clamp(48px,7vw,88px); }
.ys-hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,5vw,60px);
  align-items:center;
}
.ys-hero-grid.ys-hero-grid--text-only{ display:block; max-width:820px; }
@media (max-width:860px){ .ys-hero-grid{ grid-template-columns:1fr; } }
.ys-hero h1{ font-size:clamp(2.6rem,5.4vw,4.2rem); margin-top:14px; }
.ys-hero h1 em{ font-style:normal; color:var(--sky); }
.ys-hero .ys-sub{ margin-top:20px; max-width:46ch; font-size:1.08rem; line-height:1.55; color:#C7CDDE; }
.ys-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
.ys-hero-stats{ display:flex; gap:clamp(18px,3vw,34px); margin-top:44px; flex-wrap:wrap; }
.ys-hero-stats div{ border-left:2px solid rgba(255,255,255,.25); padding-left:14px; }
.ys-hero-stats b{ display:block; font-family:'Anton',sans-serif; font-size:1.5rem; color:var(--sky); font-variant-numeric:tabular-nums; }
.ys-hero-stats span{ font-size:.78rem; color:#AEB6CC; letter-spacing:.03em; }

.ys-hero-art{ position:relative; display:flex; align-items:center; justify-content:center; min-height:280px; }
.ys-hero-art img{
  position:relative; z-index:1; width:100%; max-width:420px; height:auto;
  max-height:520px; object-fit:contain; display:block; margin:0 auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));
}
.ys-hero-art-halo{
  position:absolute; inset:8% 12%; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(37,64,232,.35), transparent 70%);
}
@media (max-width:860px){ .ys-hero-art{ min-height:220px; } .ys-hero-art img{ max-width:280px; max-height:340px; } }

.ys-sash-divider{
  height:34px;
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
  background:linear-gradient(90deg,var(--cobalt),var(--cobalt-deep));
}

/* ---------- section heads ---------- */
.ys-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
.ys-section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin-top:6px; }

/* ---------- categories ---------- */
.ys-categories{ padding-block:clamp(40px,6vw,64px); }
.ys-cat-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media (max-width:920px){ .ys-cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .ys-cat-grid{ grid-template-columns:repeat(2,1fr); } }
.ys-cat-card{
  background:var(--surface); border:1px solid var(--line);
  padding:22px 16px; text-align:left; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:26px; justify-content:space-between;
  min-height:150px; transition:border-color .15s ease, transform .15s ease;
}
.ys-cat-card:hover{ border-color:var(--cobalt); transform:translateY(-3px); }
.ys-cat-card svg{ width:30px;height:30px; color:var(--cobalt); }
.ys-cat-card .ys-name{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-size:.94rem; text-transform:uppercase; letter-spacing:.02em; }
.ys-cat-card .ys-count{ font-size:.78rem; color:var(--slate); }

/* ---------- tracksuit range banner ---------- */
.ys-featured{ background:var(--surface-2); padding-block:clamp(48px,6vw,72px); }
.ys-cat-banner{
  display:flex; align-items:flex-end;
  min-height:340px;
  background:linear-gradient(100deg, var(--pitch-ink), var(--pitch-surface));
  background-size:cover; background-position:center;
  padding:clamp(24px,4vw,44px); text-decoration:none; color:var(--on-pitch);
  transition:transform .15s ease;
}
.ys-cat-banner:hover{ transform:translateY(-4px); }
.ys-cat-banner-text{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; max-width:440px; }
.ys-cat-banner-text h3{ font-size:clamp(1.9rem,3.6vw,2.7rem); }
.ys-featured-note{ margin-top:24px; text-align:center; font-size:.85rem; color:var(--slate); }

/* ---------- process ---------- */
.ys-process{ padding-block:clamp(48px,6vw,72px); }
.ys-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
@media (max-width:920px){ .ys-steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .ys-steps{ grid-template-columns:1fr; } }
.ys-step{ background:var(--surface); padding:26px 20px; display:flex; flex-direction:column; gap:14px; }
.ys-step .ys-num{ font-family:'Anton',sans-serif; font-size:1.8rem; color:var(--surface-2); -webkit-text-stroke:1.5px var(--cobalt); }
.ys-step h4{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-size:.98rem; text-transform:uppercase; letter-spacing:.02em; }
.ys-step p{ font-size:.86rem; color:var(--slate); line-height:1.5; }

/* ---------- gallery / trust ---------- */
.ys-gallery{ background:var(--pitch-ink); color:var(--on-pitch); padding-block:clamp(48px,6vw,72px); }
.ys-gallery .ys-section-head h2{ color:var(--on-pitch); }
.ys-gallery .ys-section-head p{ color:#AEB6CC; max-width:52ch; margin-top:10px; }
.ys-ig-fallback{ color:#AEB6CC; font-size:.95rem; }
.ys-ig-fallback a{ color:var(--sky); text-decoration:underline; }
.ys-ig-embed{ margin-top:10px; }
.ys-trust-strip{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.ys-trust-badge{ display:flex; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.2); padding:10px 16px; font-family:'Barlow Semi Condensed',sans-serif; font-weight:600; font-size:.82rem; }
.ys-trust-badge b{ color:var(--sky); }

/* ---------- CTA band ---------- */
.ys-cta-band{ background:linear-gradient(100deg,var(--cobalt-deep),var(--cobalt)); color:#fff; padding-block:44px; }
.ys-cta-band .ys-wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; max-width:1180px; }
.ys-cta-band h3{ font-size:clamp(1.5rem,2.6vw,2rem); }
.ys-cta-band p{ color:#DCE2F5; margin-top:6px; }

.ys-empty-note{ color:var(--slate); font-size:.9rem; }

/* ==========================================================================
   SITE-WIDE FOOTER — this is the one exception to "homepage only" in this
   file. OceanWP's footer is shared by every page, and it currently ships
   with body text a dark grey (#4A4A4A) on a near-black background (#222),
   which is very low contrast, plus 3 of its 4 widget columns are empty.
   These rules only fix the COLOURS to match the brand palette above; they
   can't add the missing widget content — see the reply for where to add
   real content in wp-admin so those columns aren't blank.
   ========================================================================== */
#footer-widgets{ background:var(--pitch-ink) !important; }
#footer-widgets,
#footer-widgets p,
#footer-widgets li,
#footer-widgets a{ color:#C7CDDE; }
#footer-widgets a:hover{ color:var(--sky); }
#footer-widgets .widget-title{
  color:#fff; font-family:'Barlow Semi Condensed',sans-serif; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; font-size:.8rem;
}
#footer-bottom{ background:#05070E !important; }
#footer-bottom,
#footer-bottom a{ color:#AEB6CC; }
#footer-bottom a:hover{ color:var(--sky); }