/* ===== SWET Fitness - Theme Styles (matched to swetfitness.my 2026 redesign) ===== */

/* Custom nav font copied from the live site (swetfitness.my / fitlap theme) */
@font-face {
    font-family: "Kenyan Coffee Rg";
    src: url("https://swetfitness.my/wp-content/themes/fitlap/assets/fonts/new/KenyanCoffeeRg-Regular.woff2") format("woff2"),
         url("https://swetfitness.my/wp-content/themes/fitlap/assets/fonts/new/KenyanCoffeeRg-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --red:   #12A89D;   /* PRIMARY brand accent (buttons, icons, CTAs, underline) */
    --teal:  #F35151;   /* Challenges section accent (titles + CTA buttons) */
    --blue:  #6EC1E4;   /* benefit / feature headings */
    --green: #61CE70;   /* inner-page Elementor green buttons */
    --black: #000000;   /* dark sections / header / footer */
    --gray:  #777777;   /* body text */
    --muted: #AEAEAE;   /* muted text */
    --light: #F8F8F8;   /* light section background */
    --line:  #EDEDED;   /* hairline borders */
}

* { -webkit-font-smoothing: antialiased; }

/* Body copy = Roboto 400 / 16px / 1.6 / #777 (matches swetfitness.my live paragraphs) */
body {
    font-family: 'Roboto', sans-serif;
    color: var(--gray);
    font-weight: 400;
    line-height: 1.6;
}

/* All headings = Roboto 600, uppercase, line-height 1.0, no extra tracking (live values).
   Scoped under `body` so it outranks Tailwind CDN's runtime preflight reset. */
body h1, body h2, body h3, body h4, body h5,
.font-display {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: normal;
    line-height: 1;
    color: #000;
}

/* Large display headings (hero + section titles) — same Roboto 600 / lh 1.0 */
.display {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: normal;
    color: #000;
}

/* Latest-articles titles use the Kenyan Coffee condensed face (live: 30px / 400 / capitalize) */
.article-title {
    font-family: "Kenyan Coffee Rg", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: normal;
    line-height: 1.2;
    color: #000;
}

.section-label {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: uppercase;
    font-size: 1.5rem;
}

/* Kenyan Coffee condensed display face for the breadcrumb hero + overlay class cards (live: uppercase / 400) */
.hero-title,
.class-card-title {
    font-family: "Kenyan Coffee Rg", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: normal;
    line-height: 1.1;
}

/* Fitlap-style class card: full-bleed image with a black title/description box anchored to the bottom */
.class-card {
    position: relative;
    overflow: hidden;
    background: #000;
}
.class-card img {
    transition: transform .7s ease;
}
.class-card:hover img {
    transform: scale(1.06);
}
.class-card .class-card-box {
    transition: padding .3s ease, background .3s ease;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: .875rem;
    padding: .9rem 2rem;
    transition: all .25s ease;
    cursor: pointer;
    border: 2px solid transparent;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: #000; color: #fff; }
.btn-outline { background: transparent; color: #000; border-color: #000; }
.btn-outline:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn-light { background: #fff; color: #000; }
.btn-light:hover { background: var(--light); }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: #000; color: #fff; }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: #4eb85d; color: #fff; }
.btn-dark { background: #000; color: #fff; }
.btn-dark:hover { background: var(--red); color: #fff; }

/* Header nav + CTA font stack */
header nav a,

.nav-link {
    font-family: "Barlow", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    /* font-family: "Kenyan Coffee Rg", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; */
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: "Barlow", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    padding: .7rem 1.4rem;
    background: var(--red);
    color: white;
    transition: all .25s ease;
    margin: 1.25rem;
}
.nav-cta:hover { background: #000; color: #fff; }

/* Hero giant text */
.hero-text {
    font-size: clamp(2.5rem, 8vw, 6.5rem);
    line-height: .98;
    font-weight: 700;
}

/* Number watermark (color is set inline per use) */
.watermark {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    line-height: 1;
}

/* Nav underline */
.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: -4px;
    width: 0; height: 3px;
    background: var(--red);
    transition: width .25s ease;
}
.nav-link:hover::after { width: 100%; }

/* Active tab (set by js/include.js via body[data-page]) */
.nav-link.active { color: var(--red); }
.nav-link.active::after { width: 100%; }

/* Dropdown menu items — animated primary-color dash on hover + active page */
.dropdown-link {
    display: flex;
    align-items: center;
    color: #000;
    transition: color .2s ease;
}
.dropdown-link::before {
    content: '';
    width: 0; height: 2px;
    margin-right: 0;
    background: var(--red);
    transition: width .25s ease, margin-right .25s ease;
}
.dropdown-link:hover,
.dropdown-link.active { color: var(--red); }
.dropdown-link:hover::before,
.dropdown-link.active::before {
    width: 16px;
    margin-right: 10px;
}

/* Cards hover */
.hover-rise { transition: transform .3s ease, box-shadow .3s ease; }
.hover-rise:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,.12); }

/* Image wrapper (hover zoom removed) */
.img-zoom { overflow: hidden; }

/* Breadcrumb hero */
.breadcrumb-hero {
    background-size: cover;
    background-position: center;
    position: relative;
}
.breadcrumb-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,.55);
}

[x-cloak] { display: none !important; }

/* Play button */
.play-btn {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    display: flex; align-items: center; justify-content: center;
    transition: all .3s ease;
}
.play-btn:hover { background: #fff; transform: scale(1.1); }

/* Square play button — solid primary bg, sits in the image corner */
.play-btn-square {
    width: 72px; height: 72px;
    background: var(--red);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
    z-index: 2;
    transition: background .3s ease;
}
.group:hover .play-btn-square { background: #000; }

.divider-line { height: 2px; background: var(--line); }

/* Inline loading bar — a red segment sweeps left→right on a faint track and loops */
.loader-bar {
    position: relative;
    overflow: hidden;
    background: transparent;
}
.loader-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4rem;
    height: 100%;
    background: var(--red);
    animation: loader-bar-sweep 1.8s linear infinite;
}
@keyframes loader-bar-sweep {
    from { left: 0;    transform: translateX(-100%); }
    to   { left: 100%; transform: translateX(0); }
}

/* Slowly rotating decorative logo */
.spin-slow { animation: spin-slow 12s linear infinite; }
@keyframes spin-slow {
    to { transform: rotate(360deg); }
}