/*
Theme Name: WhatsApp Chat Theme
Theme URI: https://example.com/whatsapp-theme
Author: Your Name
Author URI: https://example.com
Description: A professional WhatsApp-style WordPress theme with chat interface, auto-messaging, call simulation, and ad integration. Perfect for creating engaging WhatsApp-like experiences.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: whatsapp-theme
Tags: whatsapp, chat, messaging, mobile, responsive, ads

This theme replicates WhatsApp's UI/UX for WordPress websites.
*/

/* =============================================
   CSS RESET & BASE STYLES
   ============================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* WhatsApp Colors */
    --wa-green: #25D366;
    --wa-green-dark: #128C7E;
    --wa-green-light: #DCF8C6;
    --wa-teal: #075E54;
    --wa-blue: #34B7F1;
    --wa-gray-bg: #ECE5DD;
    --wa-gray-light: #F0F0F0;
    --wa-gray-medium: #D1D7DB;
    --wa-gray-dark: #8696A0;
    --wa-white: #FFFFFF;
    --wa-black: #111111;
    --wa-chat-bg: #E5DDD5;

    /* Typography */
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-round: 50%;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
}

body {
    font-family: var(--font-primary);
    background-color: var(--wa-gray-bg);
    color: var(--wa-black);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Hide default WP Footer on everything */
footer,
.site-footer,
#colophon,
.wp-block-group,
.widget-area,
#secondary,
.sidebar,
#sidebar,
.wp-block-archives,
.wp-block-categories {
    display: none !important;
}

/* Ensure body occupies full height without scrollbars from external junk */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
    /* Lock scroll unless inside specific containers */
}

/* Allow scrolling only in chat lists or messages */
.wa-chat-list,
.wa-chat-messages {
    overflow-y: auto !important;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

/* =============================================
   UTILITY CLASSES
   ============================================= */

.container {
    max-width: 100%;
    margin: 0 auto;
}

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

/* =============================================
   RESPONSIVE BREAKPOINTS
   ============================================= */

/* Mobile First - Base styles are for mobile */

/* Tablet: 768px and up */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }
}

/* Large Desktop: 1200px and up */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}