/*
Theme Name: Angela Lux Mobile
Version: 2.0.0
Description: Mobile-first responsive salon theme with gallery + blog support.
Author: Angela Lux Salon
Text Domain: angela-lux-mobile
*/

body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#ebe4da;color:#1b1b1b;}
.container{width:95%;max-width:1100px;margin:0 auto;}
.site-header{background:#111;color:#fff;padding:15px 0;}
.site-header a{color:#fff;text-decoration:none;font-weight:700;}
.menu-toggle{background:#fff;color:#111;border:none;padding:8px 12px;border-radius:20px;}
.site-nav{display:none;}
.site-nav.open{display:block;}
.site-nav ul{list-style:none;padding:0;margin:10px 0;}
.site-nav a{display:block;padding:8px 0;color:#fff;text-decoration:none;}
.btn{display:inline-block;background:#fff;color:#111;padding:10px 16px;border-radius:20px;font-weight:700;text-decoration:none;}
.site-main{background:#f8f8f6;padding:20px;border-radius:20px 20px 0 0;margin-top:10px;}
.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.gallery-grid img{width:100%;height:auto;border-radius:12px;}
@media(min-width:768px){
.site-nav{display:block !important;}
.site-nav ul{display:flex;gap:20px;}
.menu-toggle{display:none;}
.gallery-grid{grid-template-columns:repeat(4,1fr);}
}


/* Embedded booking */
.alx-embed{ border-radius:14px; border:1px solid #ddd4c9; background:#fff; }
.alx-embed__iframe{ width:100%; height: 78vh; min-height: 720px; border:0; display:block; }
@media (min-width:768px){ .alx-embed__iframe{ height: 80vh; min-height: 780px; } }


/* Nav reliability on mobile */
.site-nav{background:#111;}
.site-nav a{touch-action:manipulation;}
.site-nav ul{padding:0 0 10px;}
.site-nav li{display:block;}
.site-header, .site-nav{position:relative;}
.site-nav{z-index:20;}

/* Nav click fix */
.site-header{ position:sticky; top:0; z-index:9999; }
.site-nav{ position:relative; z-index:9999; }
.site-nav.open{ background:#111; }
.site-nav a{ -webkit-tap-highlight-color: transparent; }

/* Map */
.alx-map{ border-radius:14px; overflow:hidden; border:1px solid #ddd4c9; background:#fff; }
.alx-map iframe{ width:100%; height:360px; border:0; display:block; }
@media(min-width:768px){ .alx-map iframe{ height:420px; } }