/*
Theme Name: JMP Cleaning
Theme URI: https://jmpcleaning.com
Author: JMP Cleaning
Author URI: https://jmpcleaning.com
Description: Custom conversion-focused theme for JMP Cleaning — Honest Carpet Care in San Diego. Features a dark industrial design with hydro-precision branding.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jmp-cleaning
*/

:root {
    --surface: #162545;
    --surface-dim: #111d38;
    --surface-bright: #3a4c7a;
    --surface-container-lowest: #0f1a33;
    --surface-container-low: #1e2f57;
    --surface-container: #243663;
    --surface-container-high: #2d3f6b;
    --surface-container-highest: #3a4d7d;
    --on-surface: #f0f4ff;
    --on-surface-variant: #d1d6e8;
    --outline: #8c90a1;
    --outline-variant: #424656;
    --primary: #b3c5ff;
    --on-primary: #002b75;
    --primary-container: #0066ff;
    --on-primary-container: #f8f7ff;
    --tertiary: #00dbe7;
    --on-tertiary: #00363a;
    --error: #ffb4ab;
}

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

body {
    background-color: var(--surface);
    color: var(--on-surface);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Google-style filled review stars */
.jmp-star {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    color: #FBBC04 !important;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.hydro-gradient {
    background: linear-gradient(135deg, #162545 0%, #243663 100%);
}

#bubble-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

main, nav, header, footer {
    position: relative;
    z-index: 10;
}

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

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