/*
Theme Name: Your Inner Butterfly
Theme URI: https://yourinnerbutterfly.com
Author: Cruvai
Author URI: https://cruvai.com
Description: A culturally rich WordPress theme celebrating Aztec heritage, Mexican traditions, scientific advances, spiritual philosophy, and physical wellness through the lens of butterfly metamorphosis. Enterprise-grade architecture with dynamic content rendering.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: your-inner-butterfly
Tags: blog, one-column, two-columns, custom-colors, custom-logo, custom-menu, featured-images, theme-options, translation-ready, accessibility-ready

Your Inner Butterfly — Where ancient wisdom meets modern transformation.
Inspired by the Aztec belief that butterflies carry the souls of warriors,
this theme weaves pre-colonization artistry with contemporary web design.
*/

/* ── CSS Custom Properties (Design Tokens) ─────────────────────── */
:root {
  /* Primary Palette — Culturally Sourced */
  --yib-terracotta:    #C2452D;
  --yib-gold:          #D4A843;
  --yib-turquoise:     #2BA7A0;
  --yib-deep-green:    #2D5E3A;
  --yib-burgundy:      #6B1D3A;
  --yib-obsidian:      #1A1A2E;
  --yib-cream:         #FDF5E6;
  --yib-warm-sand:     #E8D5B7;

  /* Functional Tokens */
  --yib-text-primary:   #333333;
  --yib-text-secondary: #666666;
  --yib-text-light:     #999999;
  --yib-bg-primary:     var(--yib-cream);
  --yib-bg-secondary:   #FFFFFF;
  --yib-border:         #E0D5C7;

  /* Typography Scale */
  --yib-font-heading:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --yib-font-body:     'Source Sans 3', 'Segoe UI', Tahoma, sans-serif;
  --yib-font-size-xs:   0.75rem;
  --yib-font-size-sm:   0.875rem;
  --yib-font-size-base: 1rem;
  --yib-font-size-lg:   1.125rem;
  --yib-font-size-xl:   1.5rem;
  --yib-font-size-2xl:  2rem;
  --yib-font-size-3xl:  2.5rem;
  --yib-font-size-4xl:  3.5rem;

  /* Spacing */
  --yib-space-xs:  0.25rem;
  --yib-space-sm:  0.5rem;
  --yib-space-md:  1rem;
  --yib-space-lg:  1.5rem;
  --yib-space-xl:  2rem;
  --yib-space-2xl: 3rem;
  --yib-space-3xl: 4rem;
  --yib-space-4xl: 6rem;

  /* Layout */
  --yib-max-width:      1200px;
  --yib-sidebar-width:  320px;
  --yib-border-radius:  4px;
  --yib-transition:     0.3s ease;
}

/* ── Reset & Base ──────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0;
  font-family: var(--yib-font-body);
  font-size: var(--yib-font-size-base);
  line-height: 1.7;
  color: var(--yib-text-primary);
  background-color: var(--yib-bg-primary);
}

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

a {
  color: var(--yib-turquoise);
  text-decoration: none;
  transition: color var(--yib-transition);
}

a:hover,
a:focus {
  color: var(--yib-terracotta);
}

/* ── Typography ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--yib-font-heading);
  color: var(--yib-obsidian);
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: var(--yib-space-md);
  font-weight: 700;
}

h1 { font-size: var(--yib-font-size-4xl); }
h2 { font-size: var(--yib-font-size-3xl); }
h3 { font-size: var(--yib-font-size-2xl); }
h4 { font-size: var(--yib-font-size-xl); }

p {
  margin-top: 0;
  margin-bottom: var(--yib-space-lg);
}

blockquote {
  margin: var(--yib-space-2xl) 0;
  padding: var(--yib-space-lg) var(--yib-space-xl);
  border-left: 4px solid var(--yib-gold);
  background: var(--yib-warm-sand);
  font-style: italic;
  font-size: var(--yib-font-size-lg);
}

blockquote cite {
  display: block;
  margin-top: var(--yib-space-sm);
  font-style: normal;
  font-size: var(--yib-font-size-sm);
  color: var(--yib-text-secondary);
}

/* ── Accessibility ─────────────────────────────────────────────── */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--yib-bg-secondary);
  border-radius: var(--yib-border-radius);
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: var(--yib-obsidian);
  display: block;
  font-size: var(--yib-font-size-sm);
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ── Layout Containers ─────────────────────────────────────────── */
.site-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-content {
  flex: 1;
  width: 100%;
  max-width: var(--yib-max-width);
  margin: 0 auto;
  padding: var(--yib-space-2xl) var(--yib-space-lg);
}

.content-area {
  width: 100%;
}

.has-sidebar .content-area {
  display: grid;
  grid-template-columns: 1fr var(--yib-sidebar-width);
  gap: var(--yib-space-3xl);
}

@media (max-width: 768px) {
  .has-sidebar .content-area {
    grid-template-columns: 1fr;
  }
}