/*
Theme Name: Lubbock Plumbing
Theme URI: https://lubbocktxplumbing.com
Author: Horn Plumbing & Maintenance
Author URI: https://lubbocktxplumbing.com
Description: Custom theme for Lubbock TX Plumbing based on Horn Plumbing design
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: lubbock-plumbing
*/

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* Import Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Styles */
@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply bg-surface text-on-surface font-body;
    }

    h1, h2, h3, h4, h5, h6 {
        @apply font-headline;
    }
}

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.glass-nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Custom Colors - matching the design */
:root {
    --color-primary: #300058;
    --color-primary-container: #4b107f;
    --color-tertiary: #37004c;
    --color-tertiary-container: #580077;
    --color-surface: #f8f9fa;
    --color-surface-container-low: #f3f4f5;
    --color-surface-container: #edeeef;
    --color-surface-container-high: #e7e8e9;
    --color-surface-container-highest: #e1e3e4;
    --color-on-surface: #191c1d;
    --color-on-surface-variant: #4b4451;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #ba84f1;
    --color-on-tertiary-container: #cd7cea;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;
    --color-outline-variant: #cec3d3;
}

/* Utility Classes */
.text-primary { color: var(--color-primary); }
.text-on-surface { color: var(--color-on-surface); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }
.text-on-primary { color: var(--color-on-primary); }
.text-on-primary-container { color: var(--color-on-primary-container); }
.text-on-tertiary-container { color: var(--color-on-tertiary-container); }
.text-on-error-container { color: var(--color-on-error-container); }

.bg-primary { background-color: var(--color-primary); }
.bg-primary-container { background-color: var(--color-primary-container); }
.bg-surface { background-color: var(--color-surface); }
.bg-surface-container-low { background-color: var(--color-surface-container-low); }
.bg-surface-container { background-color: var(--color-surface-container); }
.bg-surface-container-high { background-color: var(--color-surface-container-high); }
.bg-surface-container-highest { background-color: var(--color-surface-container-highest); }
.bg-surface-container-lowest { background-color: #ffffff; }
.bg-tertiary-container { background-color: var(--color-tertiary-container); }
.bg-tertiary-fixed { background-color: #f9d8ff; }
.bg-error-container { background-color: var(--color-error-container); }

.bg-gradient-from-primary { background-image: linear-gradient(to left, rgba(48, 0, 88, 0.2), transparent); }

.font-headline { font-family: 'Manrope', sans-serif; }
.font-body { font-family: 'Inter', sans-serif; }
.font-label { font-family: 'Inter', sans-serif; }

.border-outline-variant { border-color: var(--color-outline-variant); }

.shadow-custom { box-shadow: 0 20px 40px rgba(25,28,29,0.04); }
.shadow-custom-lg { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

/* Glass effect */
.glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Button styles */
.btn-primary {
    @apply bg-primary text-white px-6 py-2.5 rounded-lg font-bold uppercase tracking-tight text-sm transition-all duration-300 ease-in-out;
}

.btn-primary:hover {
    @apply bg-primary-container;
}

.btn-outline {
    @apply border border-white/20 text-white px-8 py-4 rounded-md font-bold uppercase tracking-wider transition-colors;
}

.btn-outline:hover {
    @apply bg-white/10;
}

/* Card styles */
.card {
    @apply bg-surface-container-low p-10 rounded-xl relative overflow-hidden transition-all duration-500;
}

.card:hover {
    @apply bg-surface-container-high;
}

/* Input styles */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select {
    @apply appearance-none bg-white border border-gray-300 rounded-lg px-4 py-3 w-full text-sm;
    border-color: var(--color-outline-variant);
}

input:focus,
textarea:focus,
select:focus {
    @apply outline-none ring-2 ring-primary;
    border-color: var(--color-primary);
}

/* Navigation */
.nav-link {
    @apply text-slate-600 hover:text-purple-900 transition-all font-bold uppercase tracking-tight text-sm;
}

.nav-link.active {
    @apply text-purple-900 border-b-2 border-purple-900 pb-1;
}

/* Ghost border input for forms */
.ghost-border-input {
    border: none;
    border-bottom: 1px solid rgba(125, 116, 130, 0.15);
    border-radius: 0;
}

.ghost-border-input:focus {
    border-bottom: 2px solid var(--color-primary);
    outline: none;
    box-shadow: none;
}

/* FAQ Accordion */
.faq-item {
    @apply bg-surface-container-low rounded-xl overflow-hidden transition-all duration-300;
}

.faq-item .faq-toggle {
    @apply p-8 flex justify-between items-center cursor-pointer hover:bg-surface-container-high transition-colors;
}

.faq-item .faq-answer {
    @apply px-8 pb-8 text-on-surface-variant leading-relaxed;
}

.faq-item .rotate-180 {
    transform: rotate(180deg);
}

/* Service type radio buttons */
.service-radio:checked + div {
    @apply text-primary;
}

.service-radio:checked ~ div {
    @apply border-primary;
}