/*
Theme Name: Jungal Safari
Theme URI: https://jungalsafari.com
Author: Jungal Safari Team
Author URI: https://jungalsafari.com
Description: Ultra-premium immersive wildlife & safari experience. Explore 500+ wildlife species with stunning photography, interactive habitat maps, daily quizzes, and expertly crafted content designed to maximize engagement and discovery.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jungal-safari
Tags: wildlife, safari, animals, nature, magazine, blog, two-columns, custom-menu, custom-logo, featured-images, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready
*/

/* ============================================================
   GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Lora:ital,wght@0,400;0,700;1,400;1,700&family=Oswald:wght@400;500;600;700&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */
:root {
    /* ── Color Palette ── */
    --jungle-dark:      #0d2818;
    --jungle-green:     #1a4d2e;
    --jungle-mid:       #2d6a4f;
    --gold:             #d4af37;
    --gold-dark:        #b8962e;
    --gold-light:       #e8c94a;
    --cream:            #f5f0e8;
    --cream-dark:       #e8e0d0;
    --earth:            #8b4513;
    --earth-light:      #a0522d;
    --deep-black:       #070f0c;
    --white:            #ffffff;
    --off-white:        #fafaf7;
    --gray-100:         #f4f4f2;
    --gray-200:         #e8e8e4;
    --gray-300:         #d0d0c8;
    --gray-400:         #a0a098;
    --gray-500:         #6b6b64;
    --gray-600:         #4a4a44;
    --gray-700:         #2e2e2a;
    --gray-800:         #1a1a18;
    --danger:           #c0392b;
    --warning:          #e67e22;
    --success:          #27ae60;
    --info:             #2980b9;

    /* ── Conservation Status Colors ── */
    --status-ex:        #1a1a1a;
    --status-ew:        #4a0080;
    --status-cr:        #cc0000;
    --status-en:        #e85d04;
    --status-vu:        #f4a225;
    --status-nt:        #2196f3;
    --status-lc:        #4caf50;

    /* ── Typography ── */
    --font-heading:     'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:        'Lora', Georgia, 'Times New Roman', serif;
    --font-label:       'Oswald', 'Arial Narrow', Arial, sans-serif;
    --font-ui:          system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Type Scale (Major Third: 1.25) ── */
    --text-xs:          0.64rem;     /* 10.24px */
    --text-sm:          0.8rem;      /* 12.8px  */
    --text-base:        1rem;        /* 16px    */
    --text-md:          1.25rem;     /* 20px    */
    --text-lg:          1.563rem;    /* 25px    */
    --text-xl:          1.953rem;    /* 31.25px */
    --text-2xl:         2.441rem;    /* 39px    */
    --text-3xl:         3.052rem;    /* 48.8px  */
    --text-4xl:         3.815rem;    /* 61px    */
    --text-5xl:         4.768rem;    /* 76.3px  */
    --text-hero:        clamp(2.5rem, 8vw, 5rem);

    /* ── Spacing Scale (4px base) ── */
    --space-1:          4px;
    --space-2:          8px;
    --space-3:          12px;
    --space-4:          16px;
    --space-5:          20px;
    --space-6:          24px;
    --space-8:          32px;
    --space-10:         40px;
    --space-12:         48px;
    --space-14:         56px;
    --space-16:         64px;
    --space-20:         80px;
    --space-24:         96px;
    --space-32:         128px;
    --space-40:         160px;
    --space-48:         192px;

    /* ── Border Radius ── */
    --radius-sm:        4px;
    --radius-md:        8px;
    --radius-lg:        12px;
    --radius-xl:        16px;
    --radius-2xl:       24px;
    --radius-full:      9999px;

    /* ── Shadows ── */
    --shadow-sm:        0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-md:        0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg:        0 10px 25px rgba(0,0,0,0.12), 0 6px 10px rgba(0,0,0,0.08);
    --shadow-xl:        0 20px 60px rgba(0,0,0,0.20), 0 10px 20px rgba(0,0,0,0.12);
    --shadow-2xl:       0 40px 80px rgba(0,0,0,0.30);
    --shadow-gold:      0 4px 20px rgba(212, 175, 55, 0.35);
    --shadow-jungle:    0 8px 32px rgba(13, 40, 24, 0.40);
    --shadow-inset:     inset 0 2px 8px rgba(0,0,0,0.15);

    /* ── Transitions ── */
    --transition-fast:      150ms ease;
    --transition-base:      250ms ease;
    --transition-slow:      400ms ease;
    --transition-slower:    600ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce:    500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-Index Scale ── */
    --z-behind:         -1;
    --z-base:           0;
    --z-raised:         10;
    --z-dropdown:       100;
    --z-sticky:         200;
    --z-fixed:          300;
    --z-modal-bg:       400;
    --z-modal:          500;
    --z-toast:          600;
    --z-preloader:      9999;

    /* ── Layout ── */
    --container-sm:     640px;
    --container-md:     768px;
    --container-lg:     1024px;
    --container-xl:     1280px;
    --container-2xl:    1400px;
    --container-wide:   1600px;
    --sidebar-width:    320px;
    --nav-height:       80px;
    --notif-height:     44px;

    /* ── Gradients ── */
    --gradient-jungle:      linear-gradient(135deg, #0d2818 0%, #1a4d2e 50%, #2d6a4f 100%);
    --gradient-jungle-dark: linear-gradient(180deg, rgba(7,15,12,0.95) 0%, rgba(13,40,24,0.85) 100%);
    --gradient-gold:        linear-gradient(135deg, #d4af37 0%, #b8962e 100%);
    --gradient-gold-shine:  linear-gradient(90deg, #b8962e 0%, #d4af37 40%, #f0c842 50%, #d4af37 60%, #b8962e 100%);
    --gradient-overlay:     linear-gradient(to top, rgba(7,15,12,0.95) 0%, rgba(7,15,12,0.4) 60%, transparent 100%);
    --gradient-card:        linear-gradient(180deg, transparent 0%, rgba(7,15,12,0.92) 100%);
}

/* ============================================================
   CSS RESET & NORMALIZATION
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--gray-700);
    background-color: var(--off-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.menu-open,
body.preloader-active {
    overflow: hidden;
}

/* ── Typography Resets ── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--jungle-dark);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--jungle-mid);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol { list-style: none; }

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

table {
    width: 100%;
    border-collapse: collapse;
}

/* ── Layout Utilities ── */
.container {
    width: 100%;
    max-width: var(--container-2xl);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

@media (min-width: 768px) {
    .container { padding-inline: var(--space-8); }
}

@media (min-width: 1024px) {
    .container { padding-inline: var(--space-12); }
}

.container--narrow { max-width: var(--container-lg); }
.container--wide   { max-width: var(--container-wide); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Global Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-label);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    transition: all var(--transition-base);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.btn--gold {
    background: var(--gradient-gold);
    color: var(--jungle-dark);
    border-color: var(--gold);
    box-shadow: var(--shadow-gold);
}

.btn--gold:hover {
    background: var(--gradient-gold-shine);
    background-size: 200% auto;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(212,175,55,0.5);
    color: var(--jungle-dark);
}

.btn--outline-gold {
    background: transparent;
    color: var(--gold);
    border-color: var(--gold);
}

.btn--outline-gold:hover {
    background: var(--gold);
    color: var(--jungle-dark);
    transform: translateY(-2px);
}

.btn--jungle {
    background: var(--jungle-green);
    color: var(--cream);
    border-color: var(--jungle-green);
}

.btn--jungle:hover {
    background: var(--jungle-mid);
    border-color: var(--jungle-mid);
    transform: translateY(-2px);
    color: var(--cream);
}

.btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

.btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
}

/* ── Section Titles ── */
.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, var(--text-3xl));
    color: var(--jungle-dark);
    margin-bottom: var(--space-2);
    position: relative;
}

.section-title--light { color: var(--cream); }

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--gradient-gold);
    margin-top: var(--space-3);
    border-radius: var(--radius-full);
}

.section-title--centered::after {
    margin-inline: auto;
}

.section-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--gray-500);
    max-width: 60ch;
}

.section-subtitle--light { color: rgba(245,240,232,0.75); }

/* ── Conservation Badges ── */
.badge-conservation {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px 10px;
    font-family: var(--font-label);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    color: var(--white);
}

.badge-conservation--ex  { background: var(--status-ex); }
.badge-conservation--ew  { background: var(--status-ew); }
.badge-conservation--cr  { background: var(--status-cr); }
.badge-conservation--en  { background: var(--status-en); }
.badge-conservation--vu  { background: var(--status-vu); color: var(--jungle-dark); }
.badge-conservation--nt  { background: var(--status-nt); }
.badge-conservation--lc  { background: var(--status-lc); }

/* ── Ad Wrapper Global Styles ── */
.ad-wrapper {
    text-align: center;
    overflow: hidden;
}

.ad-wrapper__label {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-bottom: var(--space-2);
}

.ad-wrapper--billboard {
    background: var(--gray-100);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.ad-wrapper--inline {
    margin: var(--space-8) auto;
    max-width: 336px;
}

.ad-wrapper--sidebar {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-4));
}

/* ── Preloader ── */
#preloader {
    position: fixed;
    inset: 0;
    background: var(--jungle-dark);
    z-index: var(--z-preloader);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader__logo {
    width: 120px;
    animation: preloaderPulse 1.5s ease-in-out infinite;
}

.preloader__text {
    font-family: var(--font-label);
    font-size: var(--text-sm);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
}

.preloader__bar {
    width: 200px;
    height: 2px;
    background: rgba(212,175,55,0.2);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.preloader__progress {
    height: 100%;
    background: var(--gradient-gold);
    border-radius: var(--radius-full);
    animation: preloaderLoad 2s ease forwards;
}

@keyframes preloaderPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.97); }
}

@keyframes preloaderLoad {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* ── Global Animations ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes shimmer {
    from { background-position: -200% center; }
    to   { background-position: 200% center; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-12px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.05); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.animate-fade-up   { animation: fadeUp 0.6s ease forwards; }
.animate-fade-in   { animation: fadeIn 0.5s ease forwards; }
.animate-float     { animation: float 4s ease-in-out infinite; }
.animate-pulse     { animation: pulse 2s ease-in-out infinite; }

/* ── Skeleton Loading ── */
.skeleton {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 400% auto;
    animation: shimmer 1.5s linear infinite;
    border-radius: var(--radius-md);
}

/* ── Reading Progress Bar ── */
#reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--gradient-gold);
    z-index: var(--z-preloader);
    transition: width 0.1s linear;
    box-shadow: 0 0 10px rgba(212,175,55,0.6);
}

/* ── Responsive Images ── */
.aspect-ratio-16-9 {
    aspect-ratio: 16/9;
    object-fit: cover;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.aspect-ratio-3-2 {
    aspect-ratio: 3/2;
    object-fit: cover;
}

/* ── WP Core Classes ── */
.alignleft  { float: left;  margin-right: var(--space-6); margin-bottom: var(--space-4); }
.alignright { float: right; margin-left:  var(--space-6); margin-bottom: var(--space-4); }
.aligncenter { display: block; margin-inline: auto; margin-bottom: var(--space-4); }
.alignwide  { margin-inline: calc(-1 * var(--space-8)); }
.alignfull  { margin-inline: calc(-1 * var(--container-2xl)); max-width: 100vw; }

.wp-caption { max-width: 100%; }
.wp-caption-text {
    font-size: var(--text-sm);
    color: var(--gray-500);
    font-style: italic;
    margin-top: var(--space-2);
    text-align: center;
}

.sticky { /* WP sticky post */ }
.gallery { display: grid; gap: var(--space-3); }

/* ── Accessibility ── */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    background: var(--gold);
    color: var(--jungle-dark);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-label);
    font-weight: 600;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    z-index: var(--z-preloader);
    transition: top var(--transition-fast);
}

.skip-link:focus { top: 0; }

/* ── Responsive Utilities ── */
@media (max-width: 479px) {
    .hide-mobile { display: none !important; }
}
@media (min-width: 480px) and (max-width: 767px) {
    .hide-mobile-only { display: none !important; }
}
@media (max-width: 767px) {
    .hide-tablet-down { display: none !important; }
}
@media (min-width: 768px) {
    .hide-tablet-up { display: none !important; }
}
@media (min-width: 1024px) {
    .hide-desktop { display: none !important; }
}
@media (max-width: 1023px) {
    .hide-desktop-down { display: none !important; }
}