/*
Theme Name: PneumaPsyche Lived
Theme URI: https://lived.pneumapsyche.com
Author: PneumaPsyche
Author URI: https://pneumapsyche.com
Description: A highly customizable, accessibility-focused theme for mental health advocacy and lived experience communities. Built with full compatibility for Elementor, BuddyPress, Better Messages, and Wordfence. Extensive Customizer options with rainbow accent effects.
Version: 1.36.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pneumapsyche-lived
Tags: accessibility-ready, blog, buddypress, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, one-column, theme-options, threaded-comments, translation-ready, two-columns

PneumaPsyche Lived - Mental Health Advocacy Theme
An enterprise against stigma and hate.
*/

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   All customizable via WordPress Customizer
   ========================================================================== */

:root {
    /* Rainbow Colors (for accent effects) */
    --pp-rainbow-red: #E74856;
    --pp-rainbow-orange: #F97E46;
    --pp-rainbow-yellow: #FFD942;
    --pp-rainbow-green: #7FD957;
    --pp-rainbow-cyan: #4FC3F7;
    --pp-rainbow-blue: #5B8DEE;
    --pp-rainbow-gradient: linear-gradient(90deg, var(--pp-rainbow-red), var(--pp-rainbow-orange), var(--pp-rainbow-yellow), var(--pp-rainbow-green), var(--pp-rainbow-cyan), var(--pp-rainbow-blue));
    
    /* Primary Color Palette - Purple/Violet to match brand icons */
    --pp-primary: var(--customizer-primary, #7B5EA7);
    --pp-primary-light: var(--customizer-primary-light, #9B7BC7);
    --pp-primary-dark: var(--customizer-primary-dark, #5B3E87);
    
    /* Secondary Color Palette */
    --pp-secondary: var(--customizer-secondary, #6A4C93);
    --pp-secondary-light: var(--customizer-secondary-light, #8A6CB3);
    --pp-secondary-dark: var(--customizer-secondary-dark, #4A2C73);
    
    /* Accent Colors */
    --pp-accent: var(--customizer-accent, #B39DDB);
    --pp-accent-hover: var(--customizer-accent-hover, #9575CD);
    
    /* Semantic Colors */
    --pp-success: var(--customizer-success, #4a8a6a);
    --pp-warning: var(--customizer-warning, #c9a035);
    --pp-danger: var(--customizer-danger, #c45c5c);
    --pp-info: var(--customizer-info, #5c8ac4);
    
    /* Crisis Support Color (always visible) */
    --pp-crisis: var(--customizer-crisis, #b83232);
    --pp-crisis-hover: var(--customizer-crisis-hover, #8a2424);
    
    /* Neutral Palette */
    --pp-white: #ffffff;
    --pp-off-white: var(--customizer-off-white, #faf9f7);
    --pp-gray-100: var(--customizer-gray-100, #f5f4f2);
    --pp-gray-200: var(--customizer-gray-200, #e8e6e3);
    --pp-gray-300: var(--customizer-gray-300, #d4d1cc);
    --pp-gray-400: var(--customizer-gray-400, #a8a4a0);
    --pp-gray-500: var(--customizer-gray-500, #7a7672);
    --pp-gray-600: var(--customizer-gray-600, #5c5854);
    --pp-gray-700: var(--customizer-gray-700, #3d3a36);
    --pp-gray-800: var(--customizer-gray-800, #2a2826);
    --pp-gray-900: var(--customizer-gray-900, #1a1918);
    --pp-black: #0a0a0a;
    
    /* Background Colors */
    --pp-bg-body: var(--customizer-bg-body, var(--pp-off-white));
    --pp-bg-surface: var(--customizer-bg-surface, var(--pp-white));
    --pp-bg-elevated: var(--customizer-bg-elevated, var(--pp-white));
    --pp-bg-muted: var(--customizer-bg-muted, var(--pp-gray-100));
    
    /* Text Colors */
    --pp-text-primary: var(--customizer-text-primary, var(--pp-gray-900));
    --pp-text-secondary: var(--customizer-text-secondary, var(--pp-gray-600));
    --pp-text-muted: var(--customizer-text-muted, var(--pp-gray-500));
    --pp-text-inverse: var(--customizer-text-inverse, var(--pp-white));
    
    /* Typography */
    --pp-font-primary: var(--customizer-font-primary, 'Source Serif 4', 'Georgia', serif);
    --pp-font-secondary: var(--customizer-font-secondary, 'Inter', 'Helvetica Neue', sans-serif);
    --pp-font-accent: var(--customizer-font-accent, 'Caveat', cursive);
    --pp-font-mono: var(--customizer-font-mono, 'JetBrains Mono', 'Consolas', monospace);
    
    /* Font Sizes (fluid typography) */
    --pp-text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
    --pp-text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
    --pp-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --pp-text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
    --pp-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --pp-text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
    --pp-text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.5rem);
    --pp-text-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3.5rem);
    --pp-text-5xl: clamp(3rem, 2.5rem + 2.5vw, 4.5rem);
    
    /* Font Weights */
    --pp-font-light: 300;
    --pp-font-normal: 400;
    --pp-font-medium: 500;
    --pp-font-semibold: 600;
    --pp-font-bold: 700;
    
    /* Line Heights */
    --pp-leading-tight: 1.25;
    --pp-leading-snug: 1.375;
    --pp-leading-normal: 1.5;
    --pp-leading-relaxed: 1.625;
    --pp-leading-loose: 1.8;
    
    /* Letter Spacing */
    --pp-tracking-tight: -0.025em;
    --pp-tracking-normal: 0;
    --pp-tracking-wide: 0.025em;
    --pp-tracking-wider: 0.05em;
    
    /* Spacing Scale */
    --pp-space-1: 0.25rem;
    --pp-space-2: 0.5rem;
    --pp-space-3: 0.75rem;
    --pp-space-4: 1rem;
    --pp-space-5: 1.25rem;
    --pp-space-6: 1.5rem;
    --pp-space-8: 2rem;
    --pp-space-10: 2.5rem;
    --pp-space-12: 3rem;
    --pp-space-16: 4rem;
    --pp-space-20: 5rem;
    --pp-space-24: 6rem;
    --pp-space-32: 8rem;
    
    /* Container Widths */
    --pp-container-sm: 640px;
    --pp-container-md: 768px;
    --pp-container-lg: 1024px;
    --pp-container-xl: 1280px;
    --pp-container-2xl: 1536px;
    --pp-container-content: var(--customizer-content-width, 720px);
    --pp-container-wide: var(--customizer-wide-width, 1200px);
    
    /* Border Radius */
    --pp-radius-sm: var(--customizer-radius-sm, 0.25rem);
    --pp-radius-md: var(--customizer-radius-md, 0.5rem);
    --pp-radius-lg: var(--customizer-radius-lg, 0.75rem);
    --pp-radius-xl: var(--customizer-radius-xl, 1rem);
    --pp-radius-2xl: var(--customizer-radius-2xl, 1.5rem);
    --pp-radius-full: 9999px;
    
    /* Shadows */
    --pp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --pp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --pp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --pp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --pp-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    --pp-shadow-glow: 0 0 20px rgba(45, 106, 122, 0.15);
    
    /* Transitions */
    --pp-transition-fast: 150ms ease;
    --pp-transition-normal: 250ms ease;
    --pp-transition-slow: 400ms ease;
    --pp-transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Z-Index Scale */
    --pp-z-dropdown: 100;
    --pp-z-sticky: 200;
    --pp-z-fixed: 300;
    --pp-z-modal-backdrop: 400;
    --pp-z-modal: 500;
    --pp-z-popover: 600;
    --pp-z-tooltip: 700;
    --pp-z-crisis-banner: 1000;
    
    /* Header */
    --pp-header-height: var(--customizer-header-height, 80px);
    --pp-header-padding: var(--customizer-header-padding, 0px);
    --pp-header-bg: var(--customizer-header-bg, var(--pp-white));
    --pp-logo-height: var(--customizer-logo-height, 60px);
    --pp-nav-font-size: var(--customizer-nav-font-size, 14px);
    
    /* Rainbow Effects */
    --pp-rainbow-height: var(--customizer-rainbow-height, 3px);
    --pp-rainbow-gradient: linear-gradient(
        90deg,
        #ff6b6b 0%,
        #feca57 17%,
        #48dbfb 34%,
        #1dd1a1 51%,
        #5f27cd 68%,
        #ff6b6b 85%,
        #feca57 100%
    );
    
    /* Crisis Banner */
    --pp-crisis-banner-height: var(--customizer-crisis-banner-height, auto);
    --pp-crisis-banner-padding: var(--customizer-crisis-banner-padding, 0.75rem);
    
    /* Footer */
    --pp-footer-bg: var(--customizer-footer-bg, var(--pp-gray-900));
    --pp-footer-text: var(--customizer-footer-text, var(--pp-gray-300));
}

/* Dark Mode Variables */
[data-theme="dark"],
.dark-mode {
    --pp-bg-body: var(--pp-gray-900);
    --pp-bg-surface: var(--pp-gray-800);
    --pp-bg-elevated: var(--pp-gray-700);
    --pp-bg-muted: var(--pp-gray-800);
    --pp-text-primary: var(--pp-gray-100);
    --pp-text-secondary: var(--pp-gray-400);
    --pp-text-muted: var(--pp-gray-500);
    --pp-header-bg: var(--pp-gray-900);
    --pp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --pp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --pp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   EXPLICIT TEXT CONTRAST FIXES
   Ensures readable text in all scenarios
   ========================================================================== */

/* Light mode explicit text colors */
body,
.site-main,
.entry-content,
#buddypress,
.buddypress-wrap {
    color: #1a1918;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.bp-page-title,
.widget-title,
#buddypress h1,
#buddypress h2,
#buddypress h3,
#buddypress .item-title,
.user-nicename {
    color: #1a1918;
}

p, .entry-content p,
.item-meta,
.activity-header,
#buddypress .activity-meta {
    color: #5c5854;
}

a {
    color: #7B5EA7;
}

a:hover {
    color: #5B3E87;
}

/* Dark mode explicit text colors */
[data-theme="dark"] body,
[data-theme="dark"] .site-main,
[data-theme="dark"] .entry-content,
[data-theme="dark"] #buddypress,
[data-theme="dark"] .buddypress-wrap {
    color: #f5f4f2;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .entry-title,
[data-theme="dark"] .page-title,
[data-theme="dark"] .bp-page-title,
[data-theme="dark"] .widget-title,
[data-theme="dark"] #buddypress h1,
[data-theme="dark"] #buddypress h2,
[data-theme="dark"] #buddypress h3,
[data-theme="dark"] #buddypress .item-title,
[data-theme="dark"] .user-nicename {
    color: #f5f4f2;
}

[data-theme="dark"] p,
[data-theme="dark"] .entry-content p,
[data-theme="dark"] .item-meta,
[data-theme="dark"] .activity-header,
[data-theme="dark"] #buddypress .activity-meta {
    color: #a8a4a0;
}

[data-theme="dark"] a {
    color: #B39DDB;
}

[data-theme="dark"] a:hover {
    color: #D1C4E9;
}

/* BuddyPress specific text contrast */
#buddypress .bp-navs a,
#buddypress .item-list-tabs a {
    color: #5c5854;
}

#buddypress .bp-navs a:hover,
#buddypress .item-list-tabs a:hover {
    color: #7B5EA7;
}

#buddypress .bp-navs li.current a,
#buddypress .bp-navs li.selected a {
    color: #ffffff;
}

[data-theme="dark"] #buddypress .bp-navs a,
[data-theme="dark"] #buddypress .item-list-tabs a {
    color: #a8a4a0;
}

[data-theme="dark"] #buddypress .bp-navs a:hover,
[data-theme="dark"] #buddypress .item-list-tabs a:hover {
    color: #B39DDB;
}

/* ==========================================================================
   Base Styles & Reset
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--pp-font-secondary);
    font-size: var(--pp-text-base);
    font-weight: var(--pp-font-normal);
    line-height: var(--pp-leading-relaxed);
    color: var(--pp-text-primary);
    background-color: var(--pp-bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--pp-font-primary);
    font-weight: var(--pp-font-semibold);
    line-height: var(--pp-leading-tight);
    color: var(--pp-text-primary);
    margin-top: 0;
    margin-bottom: var(--pp-space-4);
}

h1, .h1 {
    font-size: var(--pp-text-4xl);
    letter-spacing: var(--pp-tracking-tight);
}

h2, .h2 {
    font-size: var(--pp-text-3xl);
    letter-spacing: var(--pp-tracking-tight);
}

h3, .h3 {
    font-size: var(--pp-text-2xl);
}

h4, .h4 {
    font-size: var(--pp-text-xl);
}

h5, .h5 {
    font-size: var(--pp-text-lg);
}

h6, .h6 {
    font-size: var(--pp-text-base);
    font-weight: var(--pp-font-bold);
}

p {
    margin-top: 0;
    margin-bottom: var(--pp-space-4);
}

.lead {
    font-size: var(--pp-text-xl);
    line-height: var(--pp-leading-relaxed);
    color: var(--pp-text-secondary);
}

.display-1 {
    font-size: var(--pp-text-5xl);
    font-weight: var(--pp-font-bold);
    letter-spacing: var(--pp-tracking-tight);
}

.handwritten {
    font-family: var(--pp-font-accent);
    font-size: 1.25em;
}

a {
    color: var(--pp-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--pp-transition-fast), text-decoration-color var(--pp-transition-fast);
}

a:hover,
a:focus {
    color: var(--pp-primary-dark);
    text-decoration-color: var(--pp-primary-dark);
}

a:focus-visible {
    outline: 2px solid var(--pp-primary);
    outline-offset: 2px;
    border-radius: var(--pp-radius-sm);
}

/* ==========================================================================
   Layout Components
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--pp-container-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pp-space-4);
    padding-right: var(--pp-space-4);
}

@media (min-width: 768px) {
    .container {
        padding-left: var(--pp-space-8);
        padding-right: var(--pp-space-8);
    }
}

.container--narrow {
    max-width: var(--pp-container-content);
}

.container--wide {
    max-width: var(--pp-container-2xl);
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--pp-z-sticky);
    background-color: var(--pp-header-bg);
    box-shadow: var(--pp-shadow-sm);
    transition: box-shadow var(--pp-transition-normal), background-color var(--pp-transition-normal);
}

.site-header.scrolled {
    box-shadow: var(--pp-shadow-md);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--pp-header-height);
    padding-top: var(--pp-header-padding);
    padding-bottom: var(--pp-header-padding);
    gap: var(--pp-space-6);
}

.site-branding {
    display: flex;
    align-items: center;
    gap: var(--pp-space-3);
}

.site-logo {
    max-height: var(--pp-logo-height);
    width: auto;
}

.site-logo img {
    max-height: var(--pp-logo-height);
    width: auto;
    display: block;
}

.site-title {
    font-family: var(--pp-font-primary);
    font-size: var(--pp-text-xl);
    font-weight: var(--pp-font-bold);
    margin: 0;
    color: var(--pp-text-primary);
}

.site-title a {
    color: inherit;
    text-decoration: none;
}

.main-navigation {
    display: none;
}

@media (min-width: 1024px) {
    .main-navigation {
        display: flex;
        align-items: center;
    }
}

/* Top-level menu - horizontal layout */
.main-navigation > ul,
.main-navigation .primary-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
}

/* All menu items need position relative */
.main-navigation li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Menu links */
.main-navigation a {
    display: block;
    padding: 8px 16px;
    font-family: var(--pp-font-secondary);
    font-size: var(--pp-nav-font-size, 14px);
    font-weight: var(--pp-font-medium);
    color: var(--pp-text-secondary);
    text-decoration: none;
    border-radius: var(--pp-radius-md);
    transition: color 0.3s ease;
    position: relative;
}

/* Hover state */
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_item > a,
.main-navigation li.current-menu-ancestor > a {
    color: var(--pp-primary);
}

/* Rainbow underline effect - v1 style (only on top-level items) */
.main-navigation > ul > li > a::after,
.main-navigation .primary-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--pp-rainbow-gradient);
    transition: width 0.3s ease;
    border-radius: 2px;
}

/* Show rainbow on hover and current page */
.main-navigation > ul > li > a:hover::after,
.main-navigation > ul > li > a:focus::after,
.main-navigation > ul > li.current-menu-item > a::after,
.main-navigation > ul > li.current_page_item > a::after,
.main-navigation > ul > li.current-menu-ancestor > a::after,
.main-navigation .primary-menu > li > a:hover::after,
.main-navigation .primary-menu > li > a:focus::after,
.main-navigation .primary-menu > li.current-menu-item > a::after,
.main-navigation .primary-menu > li.current_page_item > a::after,
.main-navigation .primary-menu > li.current-menu-ancestor > a::after {
    width: 100%;
}

/* Rainbow left border on submenu items when hovered */
.main-navigation .sub-menu a {
    position: relative;
}

.main-navigation .sub-menu a::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 0;
    background: var(--pp-rainbow-gradient);
    transition: height 0.3s ease;
}

.main-navigation .sub-menu a:hover::after,
.main-navigation .sub-menu li.current-menu-item > a::after {
    height: 100%;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--pp-radius-md);
    transition: background-color var(--pp-transition-fast);
}

.menu-toggle:hover,
.menu-toggle:focus {
    background-color: var(--pp-bg-muted);
}

@media (min-width: 1024px) {
    .menu-toggle {
        display: none;
    }
}

.hamburger {
    width: 24px;
    height: 2px;
    background-color: #3d3a36;
    position: relative;
    transition: background-color var(--pp-transition-fast);
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #3d3a36;
    transition: transform var(--pp-transition-normal);
}

/* Dark mode hamburger */
[data-theme="dark"] .hamburger,
[data-theme="dark"] .hamburger::before,
[data-theme="dark"] .hamburger::after {
    background-color: #e8e6e3;
}

.hamburger::before {
    top: -7px;
}

.hamburger::after {
    top: 7px;
}

.menu-toggle[aria-expanded="true"] .hamburger {
    background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .hamburger::before {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .hamburger::after {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Crisis Support Banner
   ========================================================================== */

.crisis-banner {
    position: relative;
    z-index: var(--pp-z-crisis-banner);
    background: linear-gradient(135deg, var(--pp-crisis) 0%, var(--pp-crisis-hover) 100%);
    color: var(--pp-white);
    padding: var(--pp-crisis-banner-padding) var(--pp-space-4);
    text-align: center;
    min-height: var(--pp-crisis-banner-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Optional rainbow border on crisis banner */
.crisis-banner.has-rainbow-border::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--pp-rainbow-height);
    background: var(--pp-rainbow-gradient);
    background-size: 200% 100%;
    animation: rainbow-shift 3s linear infinite;
}

.crisis-banner__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pp-space-4);
    flex-wrap: wrap;
}

.crisis-banner__text {
    font-size: var(--pp-text-sm);
    font-weight: var(--pp-font-medium);
}

.crisis-banner__link {
    display: inline-flex;
    align-items: center;
    gap: var(--pp-space-2);
    padding: var(--pp-space-2) var(--pp-space-4);
    background-color: var(--pp-white);
    color: var(--pp-crisis);
    font-weight: var(--pp-font-bold);
    text-decoration: none;
    border-radius: var(--pp-radius-full);
    transition: transform var(--pp-transition-fast), box-shadow var(--pp-transition-fast);
}

.crisis-banner__link:hover,
.crisis-banner__link:focus {
    color: var(--pp-crisis-hover);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn,
button,
input[type="submit"],
input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pp-space-2);
    padding: var(--pp-space-3) var(--pp-space-6);
    font-family: var(--pp-font-secondary);
    font-size: var(--pp-text-base);
    font-weight: var(--pp-font-semibold);
    line-height: 1;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--pp-radius-lg);
    cursor: pointer;
    transition: all var(--pp-transition-fast);
}

.btn--primary {
    background-color: var(--pp-primary);
    color: var(--pp-white);
    border-color: var(--pp-primary);
}

.btn--primary:hover,
.btn--primary:focus {
    background-color: var(--pp-primary-dark);
    border-color: var(--pp-primary-dark);
    color: var(--pp-white);
    transform: translateY(-2px);
    box-shadow: var(--pp-shadow-lg);
}

.btn--secondary {
    background-color: transparent;
    color: var(--pp-primary);
    border-color: var(--pp-primary);
}

.btn--secondary:hover,
.btn--secondary:focus {
    background-color: var(--pp-primary);
    color: var(--pp-white);
}

.btn--accent {
    background-color: var(--pp-accent);
    color: var(--pp-gray-900);
    border-color: var(--pp-accent);
}

.btn--accent:hover,
.btn--accent:focus {
    background-color: var(--pp-accent-hover);
    border-color: var(--pp-accent-hover);
}

.btn--crisis {
    background-color: var(--pp-crisis);
    color: var(--pp-white);
    border-color: var(--pp-crisis);
}

.btn--crisis:hover,
.btn--crisis:focus {
    background-color: var(--pp-crisis-hover);
    border-color: var(--pp-crisis-hover);
}

.btn--large {
    padding: var(--pp-space-4) var(--pp-space-8);
    font-size: var(--pp-text-lg);
}

.btn--small {
    padding: var(--pp-space-2) var(--pp-space-4);
    font-size: var(--pp-text-sm);
}

.btn--full {
    width: 100%;
}

/* CTA Button - Gradient style like v1 */
.btn--cta,
.cta-button {
    padding: 0.75rem 1.75rem;
    background: linear-gradient(135deg, #7B5EA7, #5B8DEE);
    color: white;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(107, 95, 217, 0.3);
    text-decoration: none;
    display: inline-block;
}

.btn--cta:hover,
.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(107, 95, 217, 0.4);
    color: white;
}

/* Rainbow gradient border button */
.btn--rainbow {
    position: relative;
    background: var(--pp-bg-surface);
    color: var(--pp-primary);
    border: none;
    padding: 0.875rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn--rainbow::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 3px;
    background: linear-gradient(90deg, #E74856, #F97E46, #FFD942, #7FD957, #4FC3F7, #5B8DEE);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.btn--rainbow:hover {
    background: linear-gradient(90deg, #E74856, #F97E46, #FFD942, #7FD957, #4FC3F7, #5B8DEE);
    color: white;
    transform: translateY(-2px);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    background-color: var(--pp-bg-surface);
    border-radius: var(--pp-radius-xl);
    box-shadow: var(--pp-shadow-md);
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
    border: 2px solid var(--pp-gray-200);
}

/* Rainbow top border on cards */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #E74856, #F97E46, #FFD942, #7FD957, #4FC3F7, #5B8DEE);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    border-radius: 4px 4px 0 0;
    z-index: 1;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--pp-shadow-xl);
    border-color: var(--pp-primary);
}

.card:hover::before {
    transform: scaleX(1);
}

/* Ensure cards have position relative and overflow visible for rainbow */
.card,
.post-card,
.feature-card,
article.card {
    position: relative;
    overflow: hidden;
}

.card__image {
    width: 100%;
    height: auto;
    display: block;
}

.card__content {
    padding: var(--pp-space-6);
}

.card__icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--pp-space-4);
    padding: var(--pp-space-3);
    background: linear-gradient(135deg, var(--pp-primary-light), var(--pp-primary));
    border-radius: var(--pp-radius-lg);
    color: var(--pp-white);
}

.card__title {
    font-size: var(--pp-text-xl);
    margin-bottom: var(--pp-space-3);
}

.card__text {
    color: var(--pp-text-secondary);
    margin-bottom: var(--pp-space-4);
}

/* Feature Cards Grid */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--pp-space-8);
    margin: var(--pp-space-12) 0;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
    position: relative;
    padding: var(--pp-space-24) 0;
    text-align: center;
    background: linear-gradient(135deg, var(--pp-bg-muted) 0%, var(--pp-bg-surface) 100%);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232d6a7a' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: var(--pp-container-md);
    margin: 0 auto;
}

.hero__title {
    font-size: var(--pp-text-5xl);
    margin-bottom: var(--pp-space-6);
}

.hero__subtitle {
    font-size: var(--pp-text-xl);
    color: var(--pp-text-secondary);
    margin-bottom: var(--pp-space-8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero__actions {
    display: flex;
    gap: var(--pp-space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   Stats Section
   ========================================================================== */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--pp-space-8);
    padding: var(--pp-space-12) 0;
    text-align: center;
}

.stat {
    padding: var(--pp-space-6);
}

.stat__value {
    font-family: var(--pp-font-primary);
    font-size: var(--pp-text-4xl);
    font-weight: var(--pp-font-bold);
    color: var(--pp-primary);
    line-height: 1;
    margin-bottom: var(--pp-space-2);
}

.stat__label {
    font-size: var(--pp-text-sm);
    color: var(--pp-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--pp-tracking-wider);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-group {
    margin-bottom: var(--pp-space-6);
}

.form-label {
    display: block;
    font-size: var(--pp-text-sm);
    font-weight: var(--pp-font-medium);
    color: var(--pp-text-primary);
    margin-bottom: var(--pp-space-2);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: var(--pp-space-3) var(--pp-space-4);
    font-family: var(--pp-font-secondary);
    font-size: var(--pp-text-base);
    color: var(--pp-text-primary);
    background-color: var(--pp-bg-surface);
    border: 2px solid var(--pp-gray-300);
    border-radius: var(--pp-radius-lg);
    transition: border-color var(--pp-transition-fast), box-shadow var(--pp-transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--pp-primary);
    box-shadow: 0 0 0 3px rgba(45, 106, 122, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--pp-text-muted);
}

.form-textarea {
    min-height: 150px;
    resize: vertical;
}

.form-help {
    font-size: var(--pp-text-sm);
    color: var(--pp-text-muted);
    margin-top: var(--pp-space-2);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background-color: var(--pp-footer-bg);
    color: var(--pp-footer-text);
    padding: var(--pp-space-16) 0 var(--pp-space-8);
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--pp-space-12);
    margin-bottom: var(--pp-space-12);
}

.footer-widget__title {
    font-size: var(--pp-text-lg);
    font-weight: var(--pp-font-semibold);
    color: var(--pp-white);
    margin-bottom: var(--pp-space-6);
}

.footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget li {
    margin-bottom: var(--pp-space-3);
}

.footer-widget a {
    color: var(--pp-footer-text);
    text-decoration: none;
    transition: color var(--pp-transition-fast);
}

.footer-widget a:hover,
.footer-widget a:focus {
    color: var(--pp-white);
}

.footer-bottom {
    padding-top: var(--pp-space-8);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--pp-space-4);
}

.footer-copyright {
    font-size: var(--pp-text-sm);
}

/* ==========================================================================
   BuddyPress Integration
   ========================================================================== */

#buddypress {
    font-family: var(--pp-font-secondary);
}

#buddypress .activity-list,
#buddypress .members-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#buddypress .activity-list li,
#buddypress .members-list li {
    background-color: var(--pp-bg-surface);
    border-radius: var(--pp-radius-lg);
    padding: var(--pp-space-6);
    margin-bottom: var(--pp-space-4);
    box-shadow: var(--pp-shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Rainbow top border on BuddyPress items */
#buddypress .activity-list li::before,
#buddypress .members-list li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #E74856, #F97E46, #FFD942, #7FD957, #4FC3F7, #5B8DEE);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

#buddypress .activity-list li:hover,
#buddypress .members-list li:hover {
    transform: translateY(-4px);
    box-shadow: var(--pp-shadow-lg);
}

#buddypress .activity-list li:hover::before,
#buddypress .members-list li:hover::before {
    transform: scaleX(1);
}

#buddypress .item-avatar img {
    border-radius: var(--pp-radius-full);
}

#buddypress .item-title {
    font-family: var(--pp-font-primary);
    font-size: var(--pp-text-lg);
    font-weight: var(--pp-font-semibold);
}

#buddypress .item-title a {
    color: var(--pp-text-primary);
    text-decoration: none;
    position: relative;
    display: inline-block;
}

#buddypress .item-title a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #E74856, #F97E46, #FFD942, #7FD957, #4FC3F7, #5B8DEE);
    transition: width 0.3s ease;
}

#buddypress .item-title a:hover {
    color: var(--pp-primary);
}

#buddypress .item-title a:hover::after {
    width: 100%;
}

#buddypress .activity-header,
#buddypress .activity-meta {
    font-size: var(--pp-text-sm);
    color: var(--pp-text-secondary);
}

#buddypress button,
#buddypress input[type="submit"],
#buddypress a.button {
    background-color: var(--pp-primary);
    color: var(--pp-white);
    border: none;
    padding: var(--pp-space-2) var(--pp-space-4);
    border-radius: var(--pp-radius-md);
    font-weight: var(--pp-font-medium);
    cursor: pointer;
    transition: background-color var(--pp-transition-fast);
}

#buddypress button:hover,
#buddypress input[type="submit"]:hover,
#buddypress a.button:hover {
    background-color: var(--pp-primary-dark);
}

/* ==========================================================================
   Elementor Overrides
   ========================================================================== */

.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: var(--pp-container-wide);
}

.elementor-widget-heading .elementor-heading-title {
    font-family: var(--pp-font-primary);
    color: var(--pp-text-primary);
}

.elementor-widget-text-editor {
    font-family: var(--pp-font-secondary);
    color: var(--pp-text-secondary);
    line-height: var(--pp-leading-relaxed);
}

.elementor-button {
    font-family: var(--pp-font-secondary) !important;
    font-weight: var(--pp-font-semibold) !important;
    border-radius: var(--pp-radius-lg) !important;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus {
    background-color: var(--pp-bg-surface);
    clip: auto;
    color: var(--pp-text-primary);
    display: block;
    font-size: var(--pp-text-sm);
    font-weight: var(--pp-font-bold);
    height: auto;
    left: 5px;
    line-height: normal;
    padding: var(--pp-space-4);
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: var(--pp-space-4);
    z-index: var(--pp-z-tooltip);
    padding: var(--pp-space-3) var(--pp-space-6);
    background-color: var(--pp-primary);
    color: var(--pp-white);
    text-decoration: none;
    font-weight: var(--pp-font-semibold);
    border-radius: var(--pp-radius-md);
    transition: top var(--pp-transition-fast);
}

.skip-link:focus {
    top: var(--pp-space-4);
}

/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--pp-primary);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --pp-primary: #1a5566;
        --pp-text-secondary: var(--pp-gray-700);
    }
    
    .btn,
    button {
        border-width: 3px;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .crisis-banner,
    .site-header,
    .site-footer,
    .menu-toggle,
    .btn,
    button {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
    }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--pp-primary); }
.text-secondary { color: var(--pp-text-secondary); }
.text-muted { color: var(--pp-text-muted); }
.text-accent { color: var(--pp-accent); }

.bg-primary { background-color: var(--pp-primary); color: var(--pp-white); }
.bg-surface { background-color: var(--pp-bg-surface); }
.bg-muted { background-color: var(--pp-bg-muted); }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--pp-space-4); }
.mt-8 { margin-top: var(--pp-space-8); }
.mt-12 { margin-top: var(--pp-space-12); }

.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--pp-space-4); }
.mb-8 { margin-bottom: var(--pp-space-8); }
.mb-12 { margin-bottom: var(--pp-space-12); }

.py-8 { padding-top: var(--pp-space-8); padding-bottom: var(--pp-space-8); }
.py-12 { padding-top: var(--pp-space-12); padding-bottom: var(--pp-space-12); }
.py-16 { padding-top: var(--pp-space-16); padding-bottom: var(--pp-space-16); }
.py-24 { padding-top: var(--pp-space-24); padding-bottom: var(--pp-space-24); }

.rounded { border-radius: var(--pp-radius-md); }
.rounded-lg { border-radius: var(--pp-radius-lg); }
.rounded-xl { border-radius: var(--pp-radius-xl); }
.rounded-full { border-radius: var(--pp-radius-full); }

.shadow { box-shadow: var(--pp-shadow-md); }
.shadow-lg { box-shadow: var(--pp-shadow-lg); }
.shadow-xl { box-shadow: var(--pp-shadow-xl); }

.hidden { display: none; }
.sr-only { @extend .screen-reader-text; }

/* Animation utility classes */
.animate-fade-in {
    animation: fadeIn 0.5s ease forwards;
}

.animate-slide-up {
    animation: slideUp 0.5s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}