/* =============================================================================
   Fitness Coach Pro — 02: Base Reset & Typography
   =============================================================================
   - No wildcard (*) font assignment (that breaks icon fonts)
   - Targeted selectors only
   - Material Symbols font is explicitly restored after body font
   ============================================================================= */

/* ─── Font Assignments — targeted, not wildcard ──────────────────────────── */
body,
p,
li,
input,
textarea,
select,
button,
label,
td,
th,
blockquote,
figcaption,
.nav-menu-link,
.mobile-menu-link,
.topbar-promo,
.fcp-shop-breadcrumbs,
.fcp-shop-breadcrumbs a,
.woocommerce-loop-product__title,
.woocommerce-loop-category__title,
.woocommerce-pagination,
.page-numbers,
.amount,
.price {
    font-family: var(--font-ui);
}

a {
    font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--gold);
    margin-top: 0;
}

/* ─── Material Symbols — isolated, explicit, justified !important ────────── */
/*
   WHY !important: The body font assignment above (and any third-party CSS)
   may set font-family on all descendants. Icon fonts MUST override that.
   This is the only justified use of !important in this codebase.
*/
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp,
[class*='material-symbols'] {
    font-family: var(--font-icons) !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 24px;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap !important;
    direction: ltr !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    color: var(--gold);
    flex-shrink: 0;
}

/* ─── Base Box Model ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Links ──────────────────────────────────────────────────────────────── */
a {
    color: var(--gold);
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: var(--gold-dark);
}

/* ─── Images ─────────────────────────────────────────────────────────────── */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ─── Custom Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: var(--surface-raised);
}

::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: var(--r-pill);
}

/* ─── Hide scrollbar utility ─────────────────────────────────────────────── */
.fcp-hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.fcp-hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ─── Language Text Visibility System ────────────────────────────────────── */
/*
   .lang-en shown by default (LTR site).
   .lang-ar hidden by default.
   When JS adds .rtl-layout to body → swap: lang-ar shows, lang-en hides.
   This replaces ALL inline style="display:none" in PHP templates.
*/
.lang-text.lang-en { display: inline; }
.lang-text.lang-ar { display: none;   }

.rtl-layout .lang-text.lang-en { display: none;   }
.rtl-layout .lang-text.lang-ar { display: inline; }

/* Block-level language spans (used in <p> or block contexts) */
.lang-text.lang-en.is-block { display: block; }
.lang-text.lang-ar.is-block { display: none;  }

.rtl-layout .lang-text.lang-en.is-block { display: none;  }
.rtl-layout .lang-text.lang-ar.is-block { display: block; }


/* ─── Material Symbols — Filled variant ──────────────────────────────────── */
/*
   Use class="material-symbols-outlined icon-filled" instead of
   style="font-variation-settings:'FILL' 1"
*/
.icon-filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

/* Half-filled (for toggle/active states) */
.icon-half-filled {
    font-variation-settings: 'FILL' 0.5, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
}


/* ─── Offline Modal Utilities ─────────────────────────────────────────────── */
.offline-modal-desc {
    margin-bottom: 20px;
    color: var(--text-muted);
}

.offline-retry-btn-full {
    width: 100%;
}


/* ─── Icon Size Utilities ─────────────────────────────────────────────────── */
/* Replaces inline style="font-size:Xpx" on Material Symbol icons */
.icon-sm  { font-size: 15px !important; }
.icon-md  { font-size: 24px !important; }
.icon-lg  { font-size: 48px !important; }
.icon-xl  { font-size: 72px !important; }


/* ─── JS-Toggled Visibility ───────────────────────────────────────────────── */
/*
   Used by theme.js and page scripts via:
       element.classList.add('is-hidden')   / .remove('is-hidden')
       element.classList.add('is-visible')  / .remove('is-visible')
   Replaces all inline style="display:none" on JS-controlled elements.
*/
.is-hidden          { display: none    !important; }
.is-visible         { display: block   !important; }
.is-flex-visible    { display: flex    !important; }
.is-inline-visible  { display: inline  !important; }

/* Initial state for JS-controlled panels/screens (rendered hidden, shown by JS) */
.js-hidden-init { display: none; }