/*
 * GymHubDubai — Custom Styles
 * "Brutalist Oasis" Design Direction
 * ===================================================
 * Mobile-first. Tailwind handles 95% of styling.
 * These are the accent pieces and responsive fixes.
 */

/* ── Typography Fine-Tuning ─────────────────────────────── */
.font-teko {
    letter-spacing: 0.04em;
}

h1.font-teko,
h2.font-teko {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ── Selection Color (Bronze) ───────────────────────────── */
::selection {
    background: rgba(205, 127, 50, 0.3);
    color: #F5F5F0;
}

::-moz-selection {
    background: rgba(205, 127, 50, 0.3);
    color: #F5F5F0;
}

/* ── Scrollbar Styling (Dark theme) ─────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0A0A0A;
}

::-webkit-scrollbar-thumb {
    background: #2A2A2A;
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: #CD7F32;
}

/* ── Scrollbar hide utility ─────────────────────────────── */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ── Links ──────────────────────────────────────────────── */
a {
    text-decoration: none;
}

/* ── Image Loading Placeholder ──────────────────────────── */
img {
    background: #1A1A1A;
}

/* ── Prose overrides for WYSIWYG content ────────────────── */
.prose p {
    color: #8A8A8A;
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

.prose h2 {
    color: #F5F5F0;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.prose strong {
    color: #F5F5F0;
    font-weight: 600;
}

.prose a {
    color: #CD7F32;
    border-bottom: 1px solid rgba(205, 127, 50, 0.3);
    transition: border-color 0.2s;
}

.prose a:hover {
    border-bottom-color: #CD7F32;
}

.prose ul, .prose ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}

.prose li {
    color: #8A8A8A;
    margin-bottom: 0.5rem;
}

/* ── Hover transition for gym cards ─────────────────────── */
.gym-card {
    transition: transform 0.3s ease;
}

@media (hover: hover) {
    .gym-card:hover {
        transform: translateY(-2px);
    }
}

/* ── Bronze line accent (decorative) ────────────────────── */
.bronze-line {
    width: 1px;
    height: 80px;
    background: linear-gradient(to bottom, #CD7F32, transparent);
}

.bronze-line-h {
    height: 1px;
    width: 80px;
    background: linear-gradient(to right, #CD7F32, transparent);
}

/* ── Lightbox animation ─────────────────────────────────── */
.lightbox {
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Admin form overrides (TinyMCE dark mode) ───────────── */
.tox .tox-toolbar__primary {
    background: #1A1A1A !important;
}

.tox .tox-edit-area__iframe {
    background: #0A0A0A !important;
}

/* ── Mobile: prevent 100vh issues with address bar ──────── */
@supports (height: 100svh) {
    .min-h-screen { min-height: 100svh; }
}

/* ── Mobile: safe area insets for notched phones ────────── */
@supports (padding: env(safe-area-inset-bottom)) {
    footer {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }
}

/* ── Mobile: tighter Teko spacing ───────────────────────── */
@media (max-width: 640px) {
    .font-teko {
        letter-spacing: 0.02em;
    }
}

/* ── Tap highlight removal for cleaner mobile UX ────────── */
* {
    -webkit-tap-highlight-color: transparent;
}