/*
Theme Name:   LJE Sports (Astra Child)
Theme URI:    https://ljestores.com/
Author:       LJE Sports
Author URI:   https://ljestores.com/
Description:  LJE Sports child theme based on Astra. Includes sports-focused branding, custom colors, typography, WooCommerce, and custom page templates.
Template:     astra
Version:      1.0.0
Requires at least: 5.0
Tested up to: 6.8
Requires PHP: 7.2
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  astra-child
Tags:         child-theme, sports, astra, woocommerce, custom-colors
*/

/* =====================================================
   LJE SPORTS — ASTRA CHILD THEME STYLES & RESETS
   ===================================================== */

/* ── Google Fonts Import ──────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Design Tokens ────────────────────────────────── */
:root {
    --lje-primary: #ec852c;     /* LJE Orange */
    --lje-secondary: #000000;   /* Black */
    --lje-font-heading: 'Oswald', sans-serif;
    --lje-font-body: 'Inter', sans-serif;
}

/* ── Reset Astra Parent Overrides ─────────────────── */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

a, a:hover, a:focus, a:active {
    text-decoration: none !important;
}

ul {
    padding: 0;
    margin: 0;
}

/* ── Global Font Family Applications ──────────────── */

/* 1. Body & Default Text -> Inter */
html,
body,
p,
span,
a,
li,
div,
label,
input,
select,
textarea,
button,
.font-body {
    font-family: 'Inter', sans-serif !important;
}

/* 2. Headings -> Oswald */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
.athletic-font,
.font-heading,
.entry-title {
    font-family: 'Oswald', sans-serif !important;
}

/* ── Smooth Scrolling ────────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* =====================================================
   LJE SPORTS — BUBBLE 3D FLIP CARD EFFECT
   ===================================================== */
.perspective-1000 {
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

.transform-style-3d {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.backface-hidden {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.rotate-y-180 {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

/* Hover trigger for desktop */
.bubble-card:hover .transform-style-3d,
.bubble-card:hover > .relative {
    transform: rotateY(180deg);
}

/* Flipped trigger (toggled via JS on click/touch) */
.bubble-card.flipped .transform-style-3d,
.bubble-card.flipped > .relative {
    transform: rotateY(180deg);
}