/*
Theme Name: Ana Maaki - أنا معك
Theme URI: https://anamaaki.example
Author: Ana Maaki Collective
Author URI: https://anamaaki.example
Description: A warm, modern, privacy-first WordPress theme designed for women in Lebanon. Supports self-confidence, relationships, intimate wellness and holistic wellbeing with cultural sensitivity, trust, and discretion. Full Customizer support, Quick Escape, crisis dashboard, and integration with Ana Maaki plugins.
Version: 1.0.2
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ana-maaki
Tags: women, wellness, privacy, lebanon, accessibility, customizer, soft, minimal, RTL-ready
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
*/

/* CSS Variables from Customizer - fallback */
:root {
  --am-primary: #8B5E76;
  --am-secondary: #D4A5A5;
  --am-accent: #F2D7D9;
  --am-bg: #FFF9F7;
  --am-text: #3D2C2E;
  --am-soft: #FAEDEA;
  --am-escape: #C85C5C;
  --am-font-heading: 'Cormorant Garamond', serif;
  --am-font-body: 'Inter', sans-serif;
  --am-radius: 20px;
  --am-shadow: 0 10px 40px rgba(139,94,118,0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--am-bg);
  color: var(--am-text);
  font-family: var(--am-font-body);
  line-height: 1.7;
  margin:0;
  -webkit-font-smoothing: antialiased;
}
body.privacy-stealth { filter: blur(0px); }
body.privacy-stealth.blur-active #primary { filter: blur(12px); }
h1,h2,h3,h4 { font-family: var(--am-font-heading); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
a { color: var(--am-primary); text-decoration: none; }
a:hover { color: #6D485B; }
img { max-width: 100%; height: auto; border-radius: var(--am-radius); }

/* Quick Escape Button */
#am-quick-escape {
  position: fixed; top: 16px; right: 16px; z-index: 999999;
  background: var(--am-escape); color: white;
  border: none; padding: 10px 18px; border-radius: 100px;
  font-weight: 700; font-size: 13px; letter-spacing: 0.05em;
  cursor: pointer; box-shadow: 0 4px 20px rgba(200,92,92,0.4);
  display: flex; align-items: center; gap: 8px;
  transition: all 0.2s ease;
}
#am-quick-escape:hover { transform: scale(1.05); background: #B04E4E; }
#am-quick-escape svg { width: 16px; height: 16px; }

/* Incognito Toggle */
#am-privacy-bar {
  position: fixed; bottom: 20px; left: 20px; z-index: 999998;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(12px);
  border: 1px solid rgba(139,94,118,0.15); padding: 8px 14px;
  border-radius: 100px; display: flex; align-items: center; gap: 10px;
  font-size: 12px; box-shadow: var(--am-shadow);
}
#am-privacy-bar button {
  background: var(--am-soft); border: 1px solid var(--am-secondary);
  border-radius: 100px; padding: 4px 10px; font-size: 11px; cursor: pointer;
}

/* Header */
.site-header {
  background: rgba(255,249,247,0.85); backdrop-filter: blur(18px);
  position: sticky; top: 0; z-index: 1000;
  border-bottom: 1px solid rgba(139,94,118,0.08);
}
.header-inner { max-width: 1280px; margin:0 auto; padding: 18px 24px; display:flex; justify-content:space-between; align-items:center; }
.logo-wrap { display:flex; align-items:center; gap:12px; }
.logo-wrap svg { width: 42px; height: 42px; }
.logo-text { font-family: var(--am-font-heading); font-size: 22px; font-weight: 700; }
.logo-tagline { font-size: 11px; opacity: 0.7; letter-spacing: 0.1em; text-transform: uppercase; }
.main-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:28px; }
.main-nav a { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; }
.mobile-toggle { display:none; }

/* Hero */
.hero {
  padding: 80px 24px 60px; max-width: 1280px; margin:0 auto;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
}
.hero-badge {
  background: var(--am-accent); color: var(--am-primary);
  display:inline-block; padding:6px 14px; border-radius:100px;
  font-size:12px; font-weight:600; letter-spacing:0.08em; margin-bottom:16px;
}
.hero h1 { font-size: clamp(36px, 5vw, 58px); margin:0 0 18px; }
.hero p { font-size: 18px; opacity:0.8; max-width: 540px; margin-bottom:28px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:100px; font-weight:600; font-size:15px; cursor:pointer; border:none; transition: all 0.2s; }
.btn-primary { background: var(--am-primary); color:white; box-shadow: 0 8px 24px rgba(139,94,118,0.25); }
.btn-primary:hover { background:#6D485B; transform:translateY(-1px); color:white; }
.btn-ghost { background: white; color: var(--am-primary); border:1px solid rgba(139,94,118,0.15); }
.hero-visual { position:relative; }
.hero-visual img { width:100%; border-radius:32px; box-shadow: var(--am-shadow); }
.hero-card { position:absolute; bottom:-20px; left:-20px; background:white; padding:18px 20px; border-radius:18px; box-shadow:var(--am-shadow); max-width:260px; font-size:13px; }

/* Focus Areas */
.focus-grid { max-width:1280px; margin:60px auto; padding:0 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.focus-card { background:white; border-radius:24px; padding:28px; border:1px solid rgba(139,94,118,0.06); transition:all 0.3s; position:relative; overflow:hidden; }
.focus-card:hover { transform:translateY(-4px); box-shadow:var(--am-shadow); }
.focus-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:22px; }
.focus-card h3 { font-size:18px; margin:0 0 8px; }
.focus-card p { font-size:13.5px; opacity:0.75; margin:0; line-height:1.6; }

/* How it works */
.how-it-works { background:white; margin:80px 0; padding:80px 24px; }
.how-inner { max-width:1080px; margin:0 auto; text-align:center; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:50px; text-align:left; }
.step-num { width:36px; height:36px; background:var(--am-soft); border-radius:100px; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--am-primary); margin-bottom:16px; }

/* Crisis Banner */
.crisis-banner { background:#3D2C2E; color:#FFF9F7; padding:16px; text-align:center; font-size:13px; }
.crisis-banner a { color:var(--am-accent); text-decoration:underline; }

/* Footer */
.site-footer { background:#2E2325; color:#EAD9D6; padding:60px 24px 30px; margin-top:60px; }
.footer-inner { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:40px; }
.footer-inner h4 { color:white; font-size:14px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:16px; }
.footer-inner p, .footer-inner li { font-size:13.5px; opacity:0.8; line-height:1.7; }
.footer-inner ul { list-style:none; padding:0; margin:0; }
.footer-bottom { max-width:1280px; margin:40px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,0.08); font-size:11.5px; opacity:0.6; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

/* Disclaimer */
.disclaimer-box { background:#FFF3F0; border-left:4px solid var(--am-secondary); padding:16px 18px; border-radius:12px; font-size:12.5px; margin:20px 0; }

/* Dashboard */
.dashboard-wrap { max-width:1200px; margin:40px auto; padding:0 24px; display:grid; grid-template-columns:240px 1fr; gap:30px; }
.dash-sidebar { background:white; border-radius:20px; padding:20px; height:fit-content; position:sticky; top:90px; box-shadow:var(--am-shadow); }
.dash-content { background:white; border-radius:24px; padding:28px; box-shadow:var(--am-shadow); min-height:500px; }
.dash-nav a { display:block; padding:10px 14px; border-radius:12px; font-size:14px; margin-bottom:4px; }
.dash-nav a.active, .dash-nav a:hover { background:var(--am-soft); color:var(--am-primary); }

/* Forms */
.am-input, .am-textarea, .am-select { width:100%; padding:12px 16px; border:1px solid rgba(139,94,118,0.15); border-radius:12px; background:#FFFEFE; font-size:14px; font-family:var(--am-font-body); }
.am-input:focus, .am-textarea:focus, .am-select:focus { outline:none; border-color:var(--am-primary); box-shadow:0 0 0 3px rgba(139,94,118,0.1); }

/* Responsive */
@media(max-width: 980px){
  .hero { grid-template-columns:1fr; }
  .focus-grid { grid-template-columns:1fr 1fr; }
  .steps { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .dashboard-wrap { grid-template-columns:1fr; }
}
@media(max-width: 600px){
  .focus-grid { grid-template-columns:1fr; }
  .header-inner { flex-wrap:wrap; }
  .main-nav { width:100%; margin-top:12px; }
  .main-nav ul { gap:16px; flex-wrap:wrap; }
  .mobile-toggle { display:block; }
}