/*
Theme Name: NLI Salon Suites
Theme URI: https://nlisalonsuites.com
Description: A luxury one-page custom WordPress theme for NLI Salon Suites - Scottsdale with charcoal, white, and gold color scheme. Features ACF Flexible Content for drag-and-drop section management.
Version: 1.0.0
Author: NLI Salon Suites
Author URI: https://nlisalonsuites.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nli-salon-suites
Tags: one-page, luxury, business, custom-colors, flexible-header, custom-menu, featured-images
*/

/* ==========================================================================
CSS Variables - Luxury Color Scheme
========================================================================== */
:root {
    /* Colors */
    --color-background: hsl(0, 0%, 12%);
    --color-foreground: hsl(0, 0%, 98%);
    --color-primary: hsl(43, 74%, 58%); /* Gold */
    --color-card: hsl(0, 0%, 14%);
    --color-border: hsl(0, 0%, 20%);
    --color-muted: hsl(0, 0%, 60%);

    /* Typography */
    --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;
    --spacing-4xl: 8rem;

    /* Effects */
    --elevate-1: rgba(255, 255, 255, 0.04);
    --elevate-2: rgba(255, 255, 255, 0.09);

    /* Border radius */
    --radius: 0.5rem;
    --radius-lg: 0.75rem;
}

/* ==========================================================================
Reset & Base Styles
========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-background);
    color: var(--color-foreground);
    line-height: 1.6;
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-foreground);
}

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

/* ==========================================================================
Typography Scale
========================================================================== */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }
.text-7xl { font-size: 4.5rem; }
.text-8xl { font-size: 6rem; }

/* ==========================================================================
Utility Classes
========================================================================== */
.font-serif { font-family: var(--font-serif); }
.font-sans { font-family: var(--font-sans); }
.text-primary { color: var(--color-primary); }
.text-muted { color: var(--color-muted); }
.text-center { text-align: center; }
.italic { font-style: italic; }

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section {
    padding: 6rem 1.5rem;
}

.section-alt {
    background-color: var(--color-card);
}

/* ==========================================================================
Elevation & Interaction Effects
========================================================================== */
.hover-elevate {
    position: relative;
    transition: transform 0.2s ease;
}

.hover-elevate::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: transparent;
    pointer-events: none;
    transition: background-color 0.2s ease;
    z-index: 1;
}

.hover-elevate:hover::after {
    background-color: var(--elevate-1);
}

.hover-elevate:active::after {
    background-color: var(--elevate-2);
}

/* ==========================================================================
Buttons
========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

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

.btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

.btn:hover::after {
    background-color: var(--elevate-1);
}

.btn:active::after {
    background-color: var(--elevate-2);
}

/* ==========================================================================
Grid System
========================================================================== */
.grid {
    display: grid;
    gap: var(--spacing-md);
}

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
    grid-template-columns: 1fr;
}
}

@media (min-width: 769px) and (max-width: 1024px) {
    .grid-cols-3,
    .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
}
}

/* ==========================================================================
Cards
========================================================================== */
.card {
    padding: var(--spacing-lg);
    border-radius: var(--radius);
    background-color: transparent;
    transition: all 0.3s ease;
}

.card-icon {
    width: 3rem;
    height: 3rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

/* ==========================================================================
Navigation
========================================================================== */
.site-navigation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.3s ease;
    padding: 1rem 0;
}

.site-navigation.scrolled {
    background-color: rgba(31, 31, 31, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
}

.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo img {
    height: 48px;
    width: auto;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 0.5rem;
    margin: 0;
}

.nav-menu a {
    display: block;
    padding: 0.5rem 1rem;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-radius: var(--radius);
    transition: all 0.2s ease;
    position: relative;
}

.nav-menu a:hover {
    background-color: var(--elevate-1);
}

/* ==========================================================================
Hero Section
========================================================================== */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
    to bottom,
    rgba(31, 31, 31, 0.2),
    rgba(31, 31, 31, 0.15),
    rgba(31, 31, 31, 0.2)
    );
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 80rem;
    margin: 0 auto;
    padding: 8rem 1.5rem;
    text-align: center;
}

.hero-title {
    font-size: clamp(2.5rem, 8vw, 6rem);
    margin-bottom: 1.5rem;
}

.hero-tagline {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: 2rem;
    font-style: italic;
}

.hero-intro {
    font-size: clamp(1rem, 2vw, 1.25rem);
    max-width: 64rem;
    margin: 0 auto 3rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

/* ==========================================================================
Form Styles
========================================================================== */
.contact-form {
    max-width: 500px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--color-foreground);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-foreground);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: rgba(255, 255, 255, 0.08);
}

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

/* ==========================================================================
Modal/Dialog Styles
========================================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-content {
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    max-width: 500px;
    width: 100%;
    padding: 2rem;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--color-foreground);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
}

/* ==========================================================================
Responsive Design
========================================================================== */
@media (min-width: 768px) {
    .site-logo img {height: 60px;}

.section {padding: 8rem 1.5rem;}
}

@media (min-width: 1024px) {
    .site-logo img {height: 50px;}
}

@media (max-width: 767px) {
    .nav-menu {
    display: none; /* Simple approach - can be enhanced with mobile menu */
}
}

/* ==========================================================================
WordPress Specific Classes
========================================================================== */
.alignleft {
    float: left;
    margin-right: var(--spacing-md);
}

.alignright {
    float: right;
    margin-left: var(--spacing-md);
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* ---------- Mobile Toggle (hamburger) ---------- */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.mobile-menu-toggle span {
    width: 28px;
    height: 3px;
    background: #000;
    display: block;
    transition: 0.3s;
}

/* ---------- Mobile Menu Drawer ---------- */
.mobile-menu {
    display: none; 
    position: absolute;
    top: 0;
    transition: 0.4s ease;
    z-index: 9999;
}

.mobile-menu.open {
    right: 0;
}

.mobile-nav-menu {
    list-style: none;
    padding: 0;
}

.mobile-nav-menu li {
    margin-bottom: 20px;
}

.mobile-nav-menu a {
    color: #000;
    font-size: 18px;
    text-decoration: none;
}

/* ---------- Responsive ---------- */

/*new css*/
body{line-height: 1.1;}
h1, h2, h3, h4, h5, h6{
    font-weight: normal;
    line-height: 1.1;
}
p{margin-bottom: 15px;line-height: 1.4;}
#main-content .btn-primary{color:#fff;padding-top: 1.5rem;padding-bottom: 1.5rem;}
.hero-content .hero-tagline {
    font-family: var(--font-serif);
    max-width: 900px;
    margin: 0 auto 40px auto;
    line-height: 1.2;
}
.section h2.text-primary{
    font-size: 60px;
}
#utilities .grid-cols-3, #lease-flexibility .grid-cols-3{

}
#utilities .grid-cols-3, #lease-flexibility .grid-cols-3{

}
#final-cta h2{
    font-size: 60px;
}
#final-cta h2 .font-serif{
    max-width: 1000px;
    margin: 0 auto;
}
.modal-content{

}
#contact-modal-container{

}
#contact-modal-container .nli-modal-content{
    background: #292929;
    max-width: 400px;
    padding-bottom:5px;
}
#contact-modal-container .nli-modal-content .wpcf7-response-output{
    text-align: center;
    margin: 0 0 15px 0;
    padding: 8px 15px;
    font-size: 15px;
}
#contact-modal-container .nli-modal-content h2{
    margin-bottom: 10px;
}
#contact-modal-container .nli-modal-content p{
    color:hsl(0 0% 60% / 1);
    font-size: 14px;
}
#contact-modal-container .nli-modal-content p label{color:#fff;}
#contact-modal-container .nli-modal-content .nli-close-btn{
    color:#fff;
}
#contact-modal-container .nli-modal-content input, #contact-modal-container .nli-modal-content textarea, #contact-modal-container .nli-modal-content select{
    background: none;
    border: 1px solid hsl(0 0% 28% / 1);
    color: #fff;
    font-size: 15px;
    padding: 8px 10px;
    box-sizing: BORDER-BOX;
    width: 100%;
    border-radius: 5px;
    margin-top: 3px;   
    margin-bottom: 3px; 
}
#contact-modal-container .nli-modal-content select option{
    color:#000;
}
#contact-modal-container .nli-modal-content textarea{height:80px;}
#contact-modal-container .nli-modal-content .wpcf7-submit{
    background: hsl(43 74% 58% / 1);
    margin-top: 0;
    font-size: 18px;
}
body .fancybox__content{
    padding: 0;
    background: #000;
}
.section .youtubelight{
    position: relative;
}
.section .youtubelight br{display: none;}
.section .icon-play{
    background: url(images/icon-play.png) no-repeat center center transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-size: 80px auto;
    width: 100%;
    height: 100%;
    cursor: pointer;

}
@media(max-width: 991px) {
    .nav-menu {display: none; /* Hide desktop menu */}
.mobile-menu.open{
    width: 100%;
    top: 100%;
    height: auto;
    padding: 15px 15px 0 15px;
    background: #666;  
    display: block; 
}
.mobile-nav-menu a{
    color: #fff;
}
.mobile-menu-toggle {display: flex;margin-left: auto;}
.section h2.text-primary {
    font-size: 35px;
}
#final-cta h2 {
    font-size: 35px;
}
.mobile-menu-toggle span{background: hsl(43, 74%, 58%);}
#main-content .btn-primary{padding: 10px 15px;}
.hero-section{min-height: 85vh;}
}
@media(max-width: 640px){
    .fancybox__content video{
    width: 100%;
    width: 340px;
    height: 600px;
}
}
@media(max-width: 480px){
    #final-cta h2 {font-size: 30px;} 
#main-content .btn-primary {
    padding: 10px 0;
    width: 220px;
}   
.hero-content{padding: 100px 25px 80px 25px;}
.section {padding: 60px 0;}
.section h2.text-primary {font-size: 30px;}
.section .container .card{padding:10px;}
.section .container .card p{margin-bottom: 0px;}
#contact-modal-container .nli-modal-content{
    max-width: 95%;
}

}