/*
Theme Name: Monkey Business
Theme URI: https://monkeybusiness.co
Author: Monkey Business
Author URI: https://monkeybusiness.co
Description: A premium coworking space and cafe theme featuring a jungle treehouse design. Perfect for coworking spaces, cafes, and hospitality businesses. Fully customizable through the WordPress Customizer.
Version: 1.0.7
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: monkey-business
Tags: one-page, custom-logo, custom-menu, featured-images, theme-options, translation-ready

Monkey Business WordPress Theme
Copyright (C) 2024 Monkey Business
*/

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Core Jungle Palette */
    --mb-background: hsl(45 30% 96%);
    --mb-foreground: hsl(150 30% 10%);

    --mb-card: hsl(45 25% 98%);
    --mb-card-foreground: hsl(150 30% 10%);

    /* Deep Forest Green - Primary */
    --mb-primary: hsl(140 45% 18%);
    --mb-primary-foreground: hsl(45 30% 96%);

    /* Golden Yellow - Accent */
    --mb-accent: hsl(42 85% 45%);
    --mb-accent-foreground: hsl(150 30% 10%);

    /* Warm Cream - Secondary */
    --mb-secondary: hsl(45 25% 92%);
    --mb-secondary-foreground: hsl(150 30% 15%);

    --mb-muted: hsl(45 20% 90%);
    --mb-muted-foreground: hsl(150 15% 40%);

    --mb-border: hsl(140 20% 85%);
    --mb-ring: hsl(42 85% 45%);

    /* Custom Jungle Tokens */
    --mb-jungle-dark: hsl(140 50% 12%);
    --mb-jungle-mid: hsl(140 45% 25%);
    --mb-jungle-light: hsl(140 35% 35%);
    --mb-canopy: hsl(100 40% 40%);
    --mb-golden: hsl(42 85% 50%);
    --mb-golden-dark: hsl(38 80% 40%);
    --mb-tropical-blue: hsl(200 60% 50%);
    --mb-cream: hsl(45 40% 95%);
    --mb-wood: hsl(30 40% 30%);
    --mb-wood-light: hsl(30 30% 85%);

    /* Shadows */
    --mb-shadow-soft: 0 4px 20px -2px hsla(140, 30%, 20%, 0.15);
    --mb-shadow-golden: 0 8px 30px -4px hsla(42, 85%, 50%, 0.3);
    --mb-shadow-elevated: 0 20px 40px -10px hsla(140, 30%, 10%, 0.25);

    /* Border Radius */
    --mb-radius: 0.75rem;
    --mb-radius-lg: 1rem;
    --mb-radius-xl: 1.5rem;

    /* Transitions */
    --mb-transition-fast: 150ms ease;
    --mb-transition: 300ms ease;
    --mb-transition-slow: 500ms ease;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--mb-foreground);
    background-color: var(--mb-background);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Bebas Neue', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 0.5em;
    letter-spacing: 0.02em;
}

p {
    margin: 0 0 1em;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--mb-transition);
}

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

button {
    font-family: inherit;
    cursor: pointer;
}

/* ==========================================================================
   Container
   ========================================================================== */

.mb-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .mb-container {
        padding: 0 2rem;
    }
}

/* ==========================================================================
   Typography
   ========================================================================== */

.mb-section-label {
    color: var(--mb-golden);
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 25px;
}

.mb-section-title {
    font-size: 2.5rem;
    color: var(--mb-primary);
    margin-bottom: 1rem;
}

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

.mb-section-description {
    font-size: 1.125rem;
    color: #111111;
    max-width: 42rem;
    margin: 0 auto;
    margin-bottom: 10px;
}

.mb-section-description--light {
    color: hsla(45, 40%, 95%, 0.8);
}

@media (min-width: 768px) {
    .mb-section-title {
        font-size: 3.75rem;
    }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.mb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: var(--mb-radius);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border: none;
    transition: all var(--mb-transition);
    text-decoration: none;
    cursor: pointer;
}

.mb-btn:focus-visible {
    outline: 2px solid var(--mb-ring);
    outline-offset: 2px;
}

.mb-btn--golden {
    background: linear-gradient(135deg, var(--mb-golden) 0%, var(--mb-golden-dark) 100%);
    color: var(--mb-jungle-dark);
    font-weight: 700;
    box-shadow: var(--mb-shadow-soft);
}

.mb-btn--golden:hover {
    box-shadow: var(--mb-shadow-golden);
    transform: scale(1.05);
}

.mb-btn--jungle {
    background-color: var(--mb-jungle-dark);
    color: var(--mb-cream);
    box-shadow: var(--mb-shadow-soft);
}

.mb-btn--jungle:hover {
    background-color: var(--mb-jungle-mid);
    box-shadow: var(--mb-shadow-elevated);
}

.mb-btn--outline {
    background: transparent;
    border: 2px solid var(--mb-cream);
    color: var(--mb-cream);
}

.mb-btn--outline:hover {
    background-color: var(--mb-cream);
    color: var(--mb-jungle-dark);
}

.mb-btn--outline-primary {
    border: 2px solid var(--mb-primary);
    background: transparent;
    color: var(--mb-primary);
}

.mb-btn--outline-primary:hover {
    background-color: var(--mb-primary);
    color: var(--mb-primary-foreground);
}

.mb-btn--ghost {
    background: transparent;
    color: var(--mb-golden);
    padding: 0.75rem 1rem;
}

.mb-btn--ghost:hover {
    color: var(--mb-golden-dark);
    background-color: hsla(42, 85%, 50%, 0.1);
}

.mb-btn--sm {
    height: 2.25rem;
    padding: 0 1rem;
    font-size: 0.875rem;
}

.mb-btn--lg {
    height: 3.5rem;
    padding: 0 2.5rem;
    font-size: 1.125rem;
    border-radius: var(--mb-radius-lg);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.mb-card {
    background-color: var(--mb-card);
    border-radius: var(--mb-radius-xl);
    padding: 1.5rem;
    box-shadow: var(--mb-shadow-soft);
    transition: all var(--mb-transition);
}

.mb-card:hover {
    box-shadow: var(--mb-shadow-elevated);
}

/* ==========================================================================
   Gradients and Overlays
   ========================================================================== */

.mb-gradient-golden {
    background: linear-gradient(135deg, var(--mb-golden) 0%, var(--mb-golden-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mb-bg-jungle-gradient {
    background: linear-gradient(135deg, var(--mb-jungle-dark) 0%, var(--mb-jungle-mid) 100%);
}

.mb-bg-canopy-overlay {
    background: linear-gradient(180deg, hsla(140, 45%, 18%, 0.9) 0%, hsla(140, 45%, 18%, 0.7) 100%);
}

.mb-shadow-golden {
    box-shadow: var(--mb-shadow-golden);
}

.mb-shadow-elevated {
    box-shadow: var(--mb-shadow-elevated);
}

/* ==========================================================================
   Leaf Pattern Background
   ========================================================================== */

   .mb-leaf-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 7 C21 14 17 26 22 36 C25 43 29 49 30 53 C31 49 35 43 38 36 C43 26 39 14 30 7 Z' fill='%2322543d' fill-opacity='0.05'/%3E%3Cpath d='M30 11 C29 22 29 33 30 50' fill='none' stroke='%2322543d' stroke-opacity='0.06' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  }

  .mb-leaf-pattern {
    background-size: 72px 72px;
    background-position: 0 0;
  }

/* ==========================================================================
   Animations
   ========================================================================== */

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

@keyframes mb-sway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

@keyframes mb-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mb-bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.mb-animate-float {
    animation: mb-float 6s ease-in-out infinite;
}

.mb-animate-float-delayed {
    animation: mb-float 6s ease-in-out 2s infinite;
}

.mb-animate-sway {
    animation: mb-sway 8s ease-in-out infinite;
}

.mb-animate-fade-in-up {
    animation: mb-fade-in-up 0.6s ease-out forwards;
}

.mb-animate-bounce {
    animation: mb-bounce 1s infinite;
}

.mb-animation-delay-200 { animation-delay: 200ms; }
.mb-animation-delay-400 { animation-delay: 400ms; }
.mb-animation-delay-600 { animation-delay: 600ms; }
.mb-animation-delay-800 { animation-delay: 800ms; }
.mb-animation-delay-1000 { animation-delay: 1000ms; }

/* ==========================================================================
   Utilities
   ========================================================================== */

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

.mb-text-center {
    text-align: center;
}

.mb-flex {
    display: flex;
}

.mb-flex-col {
    flex-direction: column;
}

.mb-items-center {
    align-items: center;
}

.mb-justify-center {
    justify-content: center;
}

.mb-justify-between {
    justify-content: space-between;
}

.mb-gap-2 { gap: 0.5rem; }
.mb-gap-4 { gap: 1rem; }
.mb-gap-6 { gap: 1.5rem; }
.mb-gap-8 { gap: 2rem; }

.mb-hidden { display: none; }

@media (min-width: 768px) {
    .mb-md-flex { display: flex; }
    .mb-md-hidden { display: none; }
    .mb-md-block { display: block; }
}

/* ==========================================================================
   Grid System
   ========================================================================== */

.mb-grid {
    display: grid;
    gap: 1rem;
}

.mb-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.mb-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mb-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mb-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 768px) {
    .mb-md-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mb-md-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mb-md-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .mb-lg-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mb-lg-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mb-lg-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .mb-xl-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}