/*
Theme Name: SYK Rides Child
Theme URI: https://sykrideswindowtint.com
Description: Child theme for OceanWP, customized for SYK Rides Window Tint and Auto Detail. Dark automotive brand with red glow, chrome, and gold accents.
Author: PixelGR
Author URI: https://pixelgr.com
Template: oceanwp
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: syk-rides-child
*/

/* ============================================================
   1. BRAND TOKENS
   ============================================================ */
:root{
  --syk-ink:#08080a;
  --syk-ink2:#121214;
  --syk-panel:#1a1a1d;
  --syk-red:#e10d0d;
  --syk-red-deep:#9a0606;
  --syk-red-bright:#ff2a2a;
  --syk-gold:#e8a93c;
  --syk-white:#ffffff;
  --syk-muted:#bcbcc2;
  --syk-line:rgba(255,255,255,.08);
  --syk-f-disp:'Anton',Impact,sans-serif;
  --syk-f-head:'Oswald','Arial Narrow',sans-serif;
  --syk-f-body:'Barlow',system-ui,sans-serif;
}

/* ============================================================
   2. BASE TYPOGRAPHY
   ============================================================ */
body{ font-family:var(--syk-f-body); }
h1,h2,h3,h4,h5,h6{ font-family:var(--syk-f-head); font-weight:600; letter-spacing:.01em; }
a{ color:var(--syk-red); transition:color .2s ease; }
a:hover{ color:var(--syk-red-bright); }

/* ============================================================
   3. DISPLAY AND TEXT EFFECTS
   ============================================================ */
.syk-display{ font-family:var(--syk-f-disp); text-transform:uppercase; line-height:.95; }

.syk-chrome{
  background:linear-gradient(180deg,#fff 0%,#f1f1f1 40%,#8f8f8f 53%,#dadada 66%,#fff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.5));
}
.syk-red-text{ color:var(--syk-red-bright); text-shadow:0 0 22px rgba(225,13,13,.45); }
.syk-gold-text{ color:var(--syk-gold); }

.syk-kicker{
  font-family:var(--syk-f-head); font-weight:500; text-transform:uppercase;
  letter-spacing:.3em; font-size:.82rem; color:#e9e9ee;
}
.syk-kicker .dot{ color:var(--syk-red); }

/* brush-style underline accent under a heading */
.syk-underline{ position:relative; display:inline-block; padding-bottom:.5rem; }
.syk-underline::after{
  content:""; position:absolute; left:0; bottom:0; height:4px; width:64px;
  background:linear-gradient(90deg,var(--syk-red),var(--syk-gold)); border-radius:2px;
}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.syk-btn{
  font-family:var(--syk-f-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; font-size:.95rem; text-decoration:none;
  padding:.95rem 1.7rem; border-radius:7px; display:inline-flex; align-items:center;
  gap:.6rem; transition:.22s ease; cursor:pointer; border:0;
}
.syk-btn-primary{
  color:#fff;
  background:linear-gradient(180deg,var(--syk-red-bright),var(--syk-red-deep));
  box-shadow:0 0 0 1px rgba(255,90,90,.4),0 10px 26px rgba(225,13,13,.45),0 0 46px rgba(225,13,13,.28);
}
.syk-btn-primary:hover{
  color:#fff; transform:translateY(-2px); filter:brightness(1.07);
  box-shadow:0 0 0 1px rgba(255,120,120,.55),0 14px 32px rgba(225,13,13,.55),0 0 60px rgba(225,13,13,.4);
}
.syk-btn-ghost{
  color:#fff; background:rgba(18,18,20,.45);
  border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(4px);
}
.syk-btn-ghost:hover{ color:#fff; border-color:var(--syk-red-bright); box-shadow:0 0 22px rgba(225,13,13,.35); }

/* ============================================================
   5. GLOW CARD AND ICON BADGE (signature component)
   ============================================================ */
.syk-card{
  background:var(--syk-panel); border:1px solid rgba(255,42,42,.45);
  border-radius:14px; padding:1.6rem 1.5rem;
  box-shadow:0 0 0 1px rgba(255,42,42,.12) inset, 0 0 22px rgba(225,13,13,.28), 0 14px 30px rgba(0,0,0,.45);
  transition:.25s ease;
}
.syk-card:hover{ transform:translateY(-4px); box-shadow:0 0 0 1px rgba(255,42,42,.2) inset, 0 0 34px rgba(225,13,13,.45), 0 18px 38px rgba(0,0,0,.5); }
.syk-card h3{ color:#fff; text-transform:uppercase; margin:.2rem 0 .6rem; }
.syk-card p{ color:var(--syk-muted); }

.syk-icon-badge{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(225,13,13,.08); border:1.5px solid var(--syk-red);
  box-shadow:0 0 18px rgba(225,13,13,.4), inset 0 0 12px rgba(225,13,13,.15);
  color:var(--syk-red-bright); font-size:1.6rem; margin-bottom:1rem;
}

/* ============================================================
   6. SECTION HELPERS
   ============================================================ */
.syk-section{ padding:clamp(3rem,7vw,6rem) 0; }
.syk-section-dark{ background:var(--syk-ink); color:#fff; }
.syk-section-panel{ background:var(--syk-ink2); color:#fff; }

/* red to gold accent rule, the ribbon motif */
.syk-divider{ height:5px; width:100%; border:0;
  background:linear-gradient(90deg,var(--syk-red-deep),var(--syk-red) 45%,var(--syk-gold)); }

/* anchor offset so sub-nav jump links are not hidden under a sticky header */
.syk-anchor{ scroll-margin-top:110px; }