/*
Theme Name: Petite Étoile
Theme URI: https://example.com/petite-etoile
Author: Your Name
Author URI: https://example.com
Description: Elegant WordPress theme for a young ballet dancer — Home, Achievements, Blog, Contact form, Social feed, and Photo Gallery.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: petite-etoile
Tags: blog, custom-colors, custom-logo, custom-menu, featured-images, responsive-layout, portfolio, gallery
*/

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; color: #1A1A1A; background:#fff; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'; line-height:1.6; }
img { max-width: 100%; height: auto; }
a { color: #8b5cf6; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: min(1120px, 92vw); margin: 0 auto; }
.grid { display: grid; gap: 1.25rem; }
.btn { display:inline-block; border-radius: 999px; padding: .75rem 1.25rem; background:#8b5cf6; color:#fff; font-weight:600; transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 6px 20px rgba(139,92,246,.35); }
.btn:hover{ transform: translateY(-1px); text-decoration:none; }
.btn-outline{ background:transparent; color:#8b5cf6; border:2px solid #8b5cf6; }
.chip { display:inline-block; padding:.25rem .6rem; border:1px solid #eaeaea; border-radius:999px; font-size:.8rem; color:#444; }

/* Header + Logo sizing fix */
.site-header { position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(10px); background:rgba(255,255,255,.8); border-bottom:1px solid #f2f2f2; }
.site-nav { display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; }
.logo { display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.2px; }
.logo img, .custom-logo { max-height:64px; height:auto; width:auto; border-radius:50%; }
.menu { display:flex; gap:1rem; }
.menu a { font-weight:600; padding:.5rem .75rem; border-radius:10px; }
.menu a.active, .menu a:hover { background:#f6f5ff; }

/* Hero */
.hero { padding: 5rem 0 3rem; display:grid; gap:2rem; align-items:center; grid-template-columns: 1.1fr .9fr; }
@media (max-width: 900px){ .hero{ grid-template-columns:1fr; padding:3.5rem 0 2rem; } }
.hero h1 { font-size: clamp(2rem, 3vw + 1.2rem, 3.5rem); line-height:1.1; margin:.25rem 0 1rem; }
.hero p.lead { font-size: clamp(1rem, 1vw + .8rem, 1.25rem); color:#444; }
.hero-card { background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%); border:1px solid #eee; border-radius:24px; overflow:hidden; box-shadow: 0 20px 60px rgba(139,92,246,.25); }
.hero-card img { display:block; width:100%; height:auto; }

.section { padding: 3rem 0; }
.section h2 { font-size: clamp(1.5rem, .8vw + 1.2rem, 2rem); margin:0 0 1rem; }
.section .sub { color:#666; margin-top:-.4rem; }

.card { background:#fff; border:1px solid #eee; border-radius:16px; padding:1.25rem; box-shadow: 0 10px 30px rgba(0,0,0,.05); }
.card:hover{ box-shadow: 0 16px 40px rgba(0,0,0,.07); }
.card h3 { margin:.25rem 0 .5rem; font-size:1.15rem; }

/* Achievements */
.achievements-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
@media (max-width: 900px){ .achievements-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 600px){ .achievements-grid{ grid-template-columns:1fr; } }
.achievement { padding:1rem; border:1px solid #eee; border-radius:14px; background:#fff; }
.achievement .meta{ color:#666; font-size:.9rem; }

/* Blog */
.post-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width: 900px){ .post-list{ grid-template-columns:1fr 1fr; } }
@media (max-width: 600px){ .post-list{ grid-template-columns:1fr; } }
.post-card .thumb{ border-radius:12px; overflow:hidden; }
.post-card time{ display:block; color:#666; font-size:.85rem; margin:.25rem 0 .5rem; }

/* Social feed */
.social-feed{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width: 900px){ .social-feed{ grid-template-columns:1fr 1fr; } }
@media (max-width: 600px){ .social-feed{ grid-template-columns:1fr; } }
.social-card{ border:1px solid #eee; border-radius:14px; padding:0; overflow:hidden; background:#fff; }
.social-card .embed{ aspect-ratio: 1 / 1; display:block; }
.social-card .caption{ padding:.9rem 1rem; font-size:.95rem; color:#444; }

/* Forms */
.form { display:grid; gap:1rem; }
.form input, .form textarea, .form select { width:100%; padding:.8rem 1rem; border:1px solid #e7e7e7; border-radius:12px; font: inherit; }
.form input:focus, .form textarea:focus, .form select:focus { outline:none; border-color:#8b5cf6; box-shadow: 0 0 0 4px rgba(139,92,246,.12); }

/* Footer */
.site-footer{ padding:2rem 0 3rem; background:#0f0b1f; color:#ddd; margin-top:3rem; }
.site-footer a{ color:#cabdff; }

/* Utils */
.m-0{margin:0} .mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.center{ text-align:center }
.flex{ display:flex; gap:1rem; align-items:center; }
.flex-col{ flex-direction:column; }
.justify-between{ justify-content:space-between }

/* Gallery grid */
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }
@media (max-width: 1024px){ .gallery-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width: 720px){ .gallery-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width: 480px){ .gallery-grid{ grid-template-columns:1fr;} }
.gallery-item { position:relative; overflow:hidden; border-radius:12px; border:1px solid #eee; background:#fff; }
.gallery-item img { display:block; width:100%; height:auto; transition: transform .3s ease; }
.gallery-item:hover img { transform: scale(1.03); }