/*
Theme Name: GriotsWell v23
Theme URI: https://griotswell.com
Author: Ifeanyi Chukwudebe
Description: GriotsWell storytelling platform - aged parchment design with antique gold accents
Version: 23.2
*/

/* === 1. VARIABLES === */
:root {
    --bg-cream: #F3EDE3;
    --bg-white: #FBF7F0;
    --bg-warm-gray: #EAE2D4;
    --text-dark: #1A1A2E;
    --text-body: #3D3D3D;
    --text-muted: #6B6B6B;
    --text-light: #999999;
    --accent-gold: #96750A;
    --accent-gold-light: #B8943A;
    --accent-gold-bg: rgba(150,117,10,0.10);
    --accent-gold-border: rgba(150,117,10,0.30);
    --accent-green: #2D8659;
    --border-color: #C4B9A8;
    --border-subtle: #D6CCBC;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-card: 0 2px 6px rgba(0,0,0,0.06);
    --bg-light-blue: #EAE2D4;
    --bg-dark-blue: #DDD5C5;
    --border-gold: rgba(150,117,10,0.30);
}

/* === 2. GLOBAL === */
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg-cream); color:var(--text-body); font-family:var(--font-sans); font-size:17px; line-height:1.7; }
.container { max-width:1100px; margin:0 auto; padding:0 1.5rem; }
h1,h2,h3,h4 { font-family:var(--font-serif); font-weight:700; color:var(--text-dark); line-height:1.25; }
p { color:var(--text-body); }
a { color:var(--accent-gold); text-decoration:none; transition:all 0.2s ease; }
a:hover { color:var(--accent-gold-light); }

.btn-base { display:inline-block; padding:0.75rem 1.8rem; border-radius:6px; text-decoration:none; font-weight:600; font-size:0.95rem; border:none; cursor:pointer; text-align:center; transition:all 0.2s ease; }
.btn-primary { background:var(--accent-gold); color:#fff; }
.btn-primary:hover { background:var(--accent-gold-light); color:#fff; box-shadow:var(--shadow-md); }
.btn-outline { background:transparent; color:var(--accent-gold); border:2px solid var(--accent-gold); }
.btn-outline:hover { background:var(--accent-gold-bg); }
.text-center { text-align:center; }

/* === 3. HEADER === */
.site-header { padding:1rem 0; border-bottom:1px solid var(--border-color); background:var(--bg-white); position:sticky; top:0; z-index:1000; }
.site-header .container { display:flex; justify-content:space-between; align-items:center; }
.logo { font-family:var(--font-serif); font-size:1.8rem; color:var(--accent-gold); font-weight:700; letter-spacing:-0.02em; }
.logo:hover { opacity:0.9; }

.main-nav .griotswell-main-menu { display:flex; list-style:none; margin:0; padding:0; align-items:center; gap:0.25rem; }
.main-nav .griotswell-main-menu li { position:relative; margin-left:0; }
.main-nav .griotswell-main-menu > li > a { color:var(--text-body); font-weight:500; font-size:0.95rem; padding:0.5rem 1rem; border-radius:6px; display:block; transition:all 0.2s ease; }
.main-nav .griotswell-main-menu > li > a:hover { color:var(--accent-gold); background:var(--accent-gold-bg); }

.main-nav .griotswell-main-menu .sub-menu { display:none; position:absolute; top:100%; left:0; background:var(--bg-white); border:1px solid var(--border-color); border-radius:8px; box-shadow:var(--shadow-lg); min-width:220px; padding:0.5rem 0; z-index:100; list-style:none; }
.main-nav .griotswell-main-menu li:hover > .sub-menu { display:block; }
.main-nav .griotswell-main-menu .sub-menu li a { color:var(--text-body); padding:0.6rem 1.2rem; display:block; font-size:0.9rem; }
.main-nav .griotswell-main-menu .sub-menu li a:hover { background:var(--accent-gold-bg); color:var(--accent-gold); }

.mobile-toggle { display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--text-dark); padding:0.5rem; }

/* === 4. FOOTER === */
.site-footer { background:var(--bg-white); border-top:1px solid var(--border-color); padding:3rem 0 2rem; margin-top:4rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
.footer-brand .footer-logo { font-family:var(--font-serif); font-size:1.5rem; color:var(--accent-gold); font-weight:700; display:block; margin-bottom:0.75rem; }
.footer-brand .footer-tagline { color:var(--text-muted); font-size:0.9rem; line-height:1.6; max-width:280px; }
.footer-column h4 { font-family:var(--font-sans); font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dark); margin-bottom:1rem; }
.footer-column ul { list-style:none; padding:0; margin:0; }
.footer-column li { margin-bottom:0.5rem; }
.footer-column a { color:var(--text-muted); font-size:0.9rem; }
.footer-column a:hover { color:var(--accent-gold); }
.footer-bottom { border-top:1px solid var(--border-color); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; font-size:0.85rem; color:var(--text-light); }
.footer-bottom a { color:var(--text-muted); font-size:0.85rem; }
.footer-legal { display:flex; gap:1.5rem; }

/* === 5. HOMEPAGE === */
.gw-hero { padding:5rem 0 3rem; text-align:center; max-width:750px; margin:0 auto; }
.gw-hero h1 { font-size:clamp(2.2rem,4.5vw,3.2rem); color:var(--text-dark); margin-bottom:1rem; line-height:1.15; }
.gw-hero .hero-sub { font-size:1.1rem; color:var(--text-muted); margin-bottom:2rem; max-width:600px; margin-left:auto; margin-right:auto; line-height:1.7; }
.gw-hero .hero-cta { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.gw-hero .btn-primary, .gw-hero .btn-outline { padding:0.9rem 2rem; font-size:1rem; }

.gw-insight { padding:3rem 1.5rem 4rem; max-width:1000px; margin:0 auto; }
.gw-insight .insight-header { text-align:center; margin-bottom:2.5rem; }
.gw-insight .insight-header h2 { font-size:1.8rem; margin-bottom:0.5rem; }
.gw-insight .insight-header p { color:var(--text-muted); }
.insight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.insight-card { background:var(--bg-white); border:1px solid var(--border-color); border-radius:10px; padding:2rem; box-shadow:var(--shadow-card); transition:all 0.2s ease; }
.insight-card:hover { box-shadow:var(--shadow-md); border-color:var(--accent-gold-border); }
.insight-card .arch-label { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent-gold); margin-bottom:0.75rem; }
.insight-card h3 { font-size:1.25rem; margin-bottom:0.5rem; }
.insight-card .arch-desc { color:var(--text-muted); font-size:0.9rem; line-height:1.6; margin-bottom:0.75rem; }
.insight-card .arch-examples { font-size:0.82rem; color:var(--text-light); }
.insight-card .arch-examples strong { color:var(--text-muted); }
.insight-bottom { text-align:center; margin-top:2rem; color:var(--text-muted); font-size:0.95rem; }
.insight-bottom a { font-weight:600; }

.gw-products { padding:3rem 1.5rem 4rem; max-width:1000px; margin:0 auto; }
.gw-products .products-header { text-align:center; margin-bottom:2.5rem; }
.gw-products .products-header h2 { font-size:1.8rem; margin-bottom:0.5rem; }
.gw-products .products-header p { color:var(--text-muted); }
.products-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.product-card { background:var(--bg-white); border:1px solid var(--border-color); border-radius:10px; padding:2.5rem; display:flex; flex-direction:column; box-shadow:var(--shadow-card); transition:all 0.2s ease; }
.product-card:hover { box-shadow:var(--shadow-md); border-color:var(--accent-gold-border); }
.product-card .product-label { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent-gold); margin-bottom:0.5rem; }
.product-card h3 { font-size:1.5rem; color:var(--text-dark); margin-top:0; margin-bottom:0.75rem; }
.product-card .product-pitch { color:var(--text-body); font-size:0.95rem; line-height:1.65; margin-bottom:1.25rem; flex-grow:1; }
.product-card .product-stats { display:flex; gap:1.5rem; margin-bottom:1.25rem; padding-bottom:1.25rem; border-bottom:1px solid var(--border-subtle); }
.product-card .stat { text-align:center; }
.product-card .stat-num { display:block; font-family:var(--font-serif); font-size:1.5rem; font-weight:700; color:var(--accent-gold); }
.product-card .stat-text { font-size:0.78rem; color:var(--text-light); }
.product-card .product-free { font-size:0.85rem; color:var(--accent-green); font-weight:600; margin-bottom:0.5rem; }
.product-card .product-price { font-size:0.9rem; color:var(--text-muted); margin-bottom:1.25rem; }
.product-card .product-price strong { font-family:var(--font-serif); font-size:1.3rem; color:var(--text-dark); }
.product-card .btn-primary, .product-card .btn-outline { width:100%; text-align:center; }

.product-output-note { text-align:center; margin:2rem auto 0; padding:1.25rem 1.5rem; background:var(--accent-gold-bg); border:1px solid var(--accent-gold-border); border-radius:8px; max-width:700px; }
.product-output-note p { color:var(--text-body); font-size:0.9rem; margin:0; }
.product-output-note strong { color:var(--text-dark); }

.gw-library { padding:3rem 1.5rem 4rem; background:var(--bg-warm-gray); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.gw-library .library-header { text-align:center; margin-bottom:2.5rem; }
.gw-library .library-header h2 { font-size:1.8rem; margin-bottom:0.5rem; }
.gw-library .library-header p { color:var(--text-muted); }
.library-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; max-width:1000px; margin:0 auto; }
.library-card { background:var(--bg-white); border:1px solid var(--border-color); border-radius:8px; padding:1.5rem; text-align:center; box-shadow:var(--shadow-card); transition:all 0.2s ease; text-decoration:none; display:block; }
.library-card:hover { box-shadow:var(--shadow-md); border-color:var(--accent-gold-border); }
.library-card .lib-icon { font-size:1.8rem; margin-bottom:0.5rem; display:block; }
.library-card h4 { font-family:var(--font-sans); font-size:0.9rem; font-weight:600; color:var(--text-dark); margin-bottom:0.3rem; }
.library-card p { font-size:0.8rem; color:var(--text-muted); margin:0; }

/* === 6. PAGE TEMPLATES === */
.page-header-section { padding:4rem 0 2rem; text-align:center; }
.page-title { font-size:2.5rem; color:var(--text-dark); }
.wizard-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:2rem; }
.wizard-card { background:var(--bg-white); padding:2.5rem; border:1px solid var(--border-color); border-radius:12px; display:flex; flex-direction:column; box-shadow:var(--shadow-card); transition:all 0.2s ease; }
.wizard-card:hover { box-shadow:var(--shadow-md); border-color:var(--accent-gold-border); }
.wizard-app-section { padding:4rem 0; background:var(--bg-cream); border-top:1px solid var(--border-color); }
.signup-wall { text-align:center; background:var(--bg-white); padding:4rem; border-radius:8px; max-width:600px; margin:0 auto; border:1px solid var(--border-color); box-shadow:var(--shadow-card); }
#interactive-wizard-app .step-guidance { background:var(--bg-warm-gray); border-left:3px solid var(--accent-gold); padding:1.5rem; border-radius:8px; }

/* === 7. PRICING === */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:2rem; align-items:stretch; }
.tier-card { background:var(--bg-white); border:1px solid var(--border-color); border-radius:12px; padding:2.5rem; display:flex; flex-direction:column; position:relative; box-shadow:var(--shadow-card); transition:all 0.2s ease; }
.tier-card:hover { box-shadow:var(--shadow-md); }
.tier-card .pitch { flex-grow:1; }
.tier-card.premium { border:2px solid var(--accent-gold); }
.tier-badge { position:absolute; top:-15px; left:50%; transform:translateX(-50%); background:var(--accent-gold); color:#fff; padding:0.5rem 1.5rem; border-radius:20px; font-weight:bold; font-size:0.9rem; }
.tier-badge-inline { background:var(--accent-gold); color:#fff; padding:0.5rem 1.5rem; border-radius:20px; font-weight:bold; font-size:0.9rem; display:inline-block; }
.tier-card .features-list ul { list-style:none; padding:0; color:var(--text-muted); }
.tier-card .features-list li { margin-bottom:0.8rem; }
.tier-card .features-list .premium-feature { color:var(--accent-green); font-weight:bold; }
.tier-card .features-list .disabled-feature { opacity:0.5; text-decoration:line-through; }

/* === 8. AI STYLES === */
.ai-upsell-section .feature-card { background:var(--bg-warm-gray); padding:2rem; border-radius:8px; border-left:3px solid var(--accent-gold); text-align:left; }
.ai-upsell-section .feature-card h3 { color:var(--accent-gold); margin-top:0; }
.btn-ai-upsell { background:transparent !important; border:1px dashed var(--accent-green) !important; color:var(--accent-green) !important; opacity:0.8; }
.btn-ai-upsell:hover { opacity:1; background:rgba(45,134,89,0.05) !important; }

/* === 9. ADMIN === */
.premium-user-badge { background:var(--accent-gold); color:#fff; padding:3px 8px; border-radius:10px; font-size:0.8em; font-weight:bold; text-transform:uppercase; display:inline-block; }

/* === 10. CULTURAL SECTIONS === */
.cultural-section { background:var(--bg-cream); }
.cultural-header { text-align:center; margin-bottom:3rem; }
.cultural-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
.cultural-card { background:var(--bg-white); border:1px solid var(--border-color); border-radius:8px; padding:1.5rem; box-shadow:var(--shadow-card); transition:all 0.2s ease; }
.cultural-card:hover { box-shadow:var(--shadow-md); border-color:var(--accent-gold-border); }
.wizard-meta { color:var(--text-muted); font-size:0.9rem; margin-top:0.5rem; }

/* === 11. EDUCATION PAGES === */
.edu-page { padding:2rem 0 4rem; }
.edu-page .container { max-width:900px; }
.edu-page h1 { font-size:2.2rem; margin-bottom:0.5rem; }
.edu-page h2 { font-size:1.6rem; color:var(--accent-gold); margin:2.5rem 0 1rem; border-bottom:1px solid var(--border-color); padding-bottom:0.5rem; }
.edu-page h3 { font-size:1.2rem; margin:1.5rem 0 0.5rem; }
.page-intro { font-size:1.1rem; color:var(--text-muted); max-width:700px; margin-bottom:2rem; }
.edu-breadcrumb { font-size:0.85rem; color:var(--text-muted); margin-bottom:1.5rem; }
.edu-breadcrumb a { color:var(--accent-gold); }
.edu-breadcrumb span { margin:0 0.3rem; }
.edu-nav { display:flex; justify-content:space-between; align-items:center; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--border-color); }
.edu-nav a { color:var(--accent-gold); font-weight:600; font-size:0.95rem; }
.edu-callout { background:var(--bg-white); border:1px solid var(--border-color); border-radius:8px; padding:1.5rem; margin:1.5rem 0; box-shadow:var(--shadow-card); }
.edu-callout.gold-border { border-left:3px solid var(--accent-gold); }
.edu-callout.green-border { border-left:3px solid var(--accent-green); }
.edu-callout h3 { margin-top:0; color:var(--accent-gold); }
.arch-family-card { background:var(--bg-white); border:1px solid var(--border-color); border-radius:10px; padding:1.5rem 2rem; margin:1.5rem 0; box-shadow:var(--shadow-card); }
.arch-family-card .family-icon { font-size:2rem; margin-bottom:0.5rem; }
.arch-family-card h3 { color:var(--accent-gold); margin-top:0; font-size:1.3rem; }
.arch-family-card .family-tagline { color:var(--text-muted); font-style:italic; margin-bottom:1rem; }
.arch-family-card .family-detail { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.5rem; margin:1rem 0; font-size:0.9rem; }
.arch-family-card .family-detail dt { color:var(--accent-gold); font-weight:600; }
.arch-family-card .family-detail dd { margin:0; color:var(--text-muted); }
.arch-family-card .structures-in-family { margin-top:1rem; }
.arch-family-card .structure-tag { display:inline-block; background:var(--bg-warm-gray); border:1px solid var(--border-color); padding:0.2rem 0.6rem; border-radius:4px; font-size:0.8rem; margin:0.2rem; color:var(--text-body); }
.arch-family-card .structure-tag .region-label { color:var(--text-muted); font-size:0.75rem; }
.region-block { background:var(--bg-white); border:1px solid var(--border-color); border-radius:10px; padding:2rem; margin:1.5rem 0; box-shadow:var(--shadow-card); }
.region-block .region-header { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.region-block .region-icon { font-size:2.5rem; }
.region-block .region-name { font-size:1.4rem; color:var(--accent-gold); font-family:var(--font-serif); }
.region-block .region-stats { font-size:0.85rem; color:var(--text-muted); }
.region-block .region-desc { color:var(--text-muted); margin-bottom:1rem; font-size:0.95rem; }
.region-structures-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; }
.structure-mini-card { background:var(--bg-warm-gray); border:1px solid var(--border-color); border-radius:6px; padding:1rem; }
.structure-mini-card h4 { font-size:1rem; margin:0 0 0.3rem; color:var(--text-dark); font-family:var(--font-sans); }
.structure-mini-card .arch-type-label { font-size:0.8rem; color:var(--accent-gold); font-weight:600; }
.structure-mini-card .region-detail { font-size:0.8rem; color:var(--text-muted); }
.structure-mini-card p { font-size:0.85rem; margin:0.5rem 0 0; }
.comparison-grid { width:100%; border-collapse:collapse; margin:1.5rem 0; }
.comparison-grid th { background:var(--bg-warm-gray); color:var(--accent-gold); padding:0.8rem 1rem; text-align:left; border-bottom:2px solid var(--accent-gold); font-family:var(--font-serif); }
.comparison-grid td { padding:0.7rem 1rem; border-bottom:1px solid var(--border-color); color:var(--text-body); font-size:0.9rem; }
.comparison-grid tr:hover td { background:var(--accent-gold-bg); }
.decision-item { background:var(--bg-white); border:1px solid var(--border-color); border-radius:8px; padding:1.2rem 1.5rem; margin:0.75rem 0; display:flex; align-items:flex-start; gap:1rem; box-shadow:var(--shadow-card); }
.decision-item .decision-q { color:var(--text-dark); font-weight:600; flex:1; }
.decision-item .decision-arrow { color:var(--accent-gold); font-size:1.2rem; flex-shrink:0; }
.decision-item .decision-answer { color:var(--accent-gold); font-weight:700; flex-shrink:0; min-width:120px; text-align:right; }
.product-card h3 { color:var(--accent-gold); font-size:1.5rem; margin-top:0; }
.product-features { list-style:none; padding:0; margin:1rem 0; }
.product-features li { padding:0.3rem 0; color:var(--text-body); font-size:0.95rem; }
.product-features li::before { content:'✓ '; color:var(--accent-green); font-weight:700; }
.product-free-label { background:rgba(45,134,89,0.08); border:1px solid var(--accent-green); color:var(--accent-green); padding:0.4rem 1rem; border-radius:6px; font-size:0.85rem; font-weight:600; text-align:center; margin:1rem 0; }
.tree-diagram { background:var(--bg-white); border:1px solid var(--border-color); border-radius:10px; padding:2rem; margin:2rem 0; box-shadow:var(--shadow-card); }
.tree-diagram h3 { text-align:center; color:var(--accent-gold); margin-top:0; }
.tree-columns { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:1.5rem; }
.tree-column { text-align:center; }
.tree-column h4 { color:var(--text-dark); margin-bottom:1rem; }
.tree-column .tree-emoji { font-size:3rem; margin-bottom:0.5rem; }
.tree-branches { font-size:0.85rem; color:var(--text-muted); line-height:1.8; }
.scenario-card { background:var(--bg-white); border:1px solid var(--border-color); border-radius:8px; padding:1.2rem 1.5rem; margin:0.75rem 0; box-shadow:var(--shadow-card); }
.scenario-card .scenario-label { color:var(--accent-gold); font-weight:600; font-size:0.85rem; text-transform:uppercase; margin-bottom:0.3rem; }
.scenario-card .scenario-desc { color:var(--text-dark); font-size:0.95rem; margin-bottom:0.3rem; }
.scenario-card .scenario-rec { color:var(--text-muted); font-size:0.9rem; }

/* === 12. UTILITIES === */
.section-header { max-width:1200px; margin:0 auto 50px; text-align:center; }
.section-badge { display:inline-block; background:var(--accent-gold-bg); color:var(--accent-gold); padding:6px 16px; border-radius:20px; font-size:0.85rem; font-weight:600; margin-bottom:0.75rem; }
.section-title { font-size:2rem; color:var(--text-dark); margin-bottom:0.5rem; }
.section-subtitle { font-size:1rem; color:var(--text-muted); max-width:600px; margin:0 auto; text-align:center; }
.section-cta { text-align:center; margin-top:40px; }
.homepage-container { width:100%; overflow-x:hidden; }

/* === 13. RESPONSIVE === */
@media (max-width:900px) {
    .footer-grid { grid-template-columns:1fr 1fr; }
    .footer-brand { grid-column:1 / -1; }
}
@media (max-width:768px) {
    .site-header .container { flex-wrap:wrap; }
    .mobile-toggle { display:block; }
    .main-nav { display:none; width:100%; margin-top:1rem; }
    .main-nav.active { display:block; }
    .main-nav .griotswell-main-menu { flex-direction:column; gap:0; }
    .main-nav .griotswell-main-menu > li > a { padding:0.75rem 1rem; }
    .main-nav .griotswell-main-menu .sub-menu { position:static; box-shadow:none; border:none; padding-left:1rem; background:var(--bg-warm-gray); }
    .gw-hero { padding:3rem 1.5rem 2rem; }
    .gw-hero h1 { font-size:1.8rem; }
    .insight-grid { grid-template-columns:1fr; }
    .products-grid { grid-template-columns:1fr; }
    .library-grid { grid-template-columns:repeat(2,1fr); }
    .footer-grid { grid-template-columns:1fr; }
    .footer-bottom { flex-direction:column; gap:0.5rem; text-align:center; }
    .footer-legal { justify-content:center; }
    .edu-page h1 { font-size:1.7rem; }
    .edu-page h2 { font-size:1.3rem; }
    .arch-family-card .family-detail { grid-template-columns:1fr; }
    .tree-columns { grid-template-columns:1fr; }
    .region-structures-grid { grid-template-columns:1fr; }
    .decision-item { flex-direction:column; gap:0.5rem; }
    .decision-item .decision-answer { text-align:left; }
    .edu-nav { flex-direction:column; gap:1rem; text-align:center; }
    .nextsteps-grid { grid-template-columns:1fr; }
}