/*
Theme Name: Alexandra Leite
Theme URI: https://alexandraleite.com.br
Author: Carlos Henrique
Author URI: https://github.com/CarlosHenriRojas
Description: Tema WordPress para o site da Psicóloga Alexandra Leite. Design editorial minimalista com foco em elegância e sofisticação.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alexandra-leite
Tags: custom-background, custom-logo, one-column, blog, portfolio
*/

/* ============================================
   CUSTOM STYLES (além do Tailwind)
   ============================================ */

:root {
    --sage-muted: #94a18e;
    --sage-light: #f4f5f2;
    --cream: #faf9f6;
    --charcoal: #2c2c2c;
    --charcoal-light: #4a4a4a;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--cream);
    color: var(--charcoal);
}

.font-serif {
    font-family: 'Cormorant Garamond', serif;
}

.editorial-shadow {
    box-shadow: 20px 20px 0px 0px rgba(148, 161, 142, 0.1);
}

.asymmetric-up {
    transform: translateY(-4rem);
}

.letter-spacing-widest {
    letter-spacing: 0.2em;
}

.bg-sage-light {
    background-color: var(--sage-light);
}

.bg-charcoal-light {
    background-color: var(--charcoal-light);
}

.text-charcoal-light {
    color: var(--charcoal-light);
}

/* ============================================
   RESPONSIVE MENU STYLES
   ============================================ */

/* Hamburger menu animation */
#mobile-menu-btn.menu-open .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

#mobile-menu-btn.menu-open .hamburger-line:nth-child(2) {
    opacity: 0;
}

#mobile-menu-btn.menu-open .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Custom xs breakpoint for very small screens */
@media (min-width: 480px) {
    .xs\:inline {
        display: inline;
    }
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Ensure proper spacing on mobile */
@media (max-width: 640px) {
    .editorial-shadow {
        box-shadow: 10px 10px 0px 0px rgba(148, 161, 142, 0.1);
    }
}