/*
Theme Name: Blossom Spa
Theme URI: https://kaytechit.com
Author: Kaytech IT
Description: Luxury spa and nail salon custom WordPress theme.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: spa-nail
*/

/* ============================================
   CSS Variables
   ============================================ */
:root {
    --brand-primary: #B1481E;
    --brand-primary-dark: #8A3415;
    --brand-primary-light: #D4713E;
    --brand-beige: #F5E6D3;
    --brand-cream: #FDF5ED;
    --brand-text: #2e2e2e;
    --brand-text-light: #5a5a5a;
    --brand-white: #ffffff;
}

/* ============================================
   Buttons — Clean Rounded Style
   ============================================ */
.btn {
    border-radius: 30px;
    padding: 0 35px;
    letter-spacing: 1px;
    border: 1.5px solid transparent;
}

.btn:before {
    display: none;
}

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

.btn.c3:hover {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    color: var(--brand-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(177, 72, 30, 0.3);
}

.btn.white {
    color: var(--brand-white);
    border-color: var(--brand-white);
    background: transparent;
}

.btn.white:hover {
    background: var(--brand-white);
    color: var(--brand-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.25);
}

.btn.white:before,
.btn.c3:before {
    display: none;
}

/* ============================================
   "Click to Enter" — Centered + Mobile Fix
   ============================================ */
#landing_animator {
    color: var(--brand-white);
    border: 1.5px solid var(--brand-white);
    border-radius: 30px;
    padding: 0 35px;
    left: 50%;
    transform: translate(-50%, 0);
    white-space: nowrap;
    min-width: auto;
    width: auto;
}

@media only screen and (max-width: 767px) {
    #landing_animator {
        font-size: 10px;
        padding: 0 20px;
        height: 38px;
        line-height: 38px;
    }
}

#landing_animator:hover {
    background: var(--brand-white);
    color: var(--brand-primary);
}

#landing_animator:before {
    display: none;
}

/* ============================================
   Treatment "Book Now" Buttons
   ============================================ */
.treatments .treatments_grid .treatment .btn {
    background: var(--brand-primary);
    color: var(--brand-white);
    border-color: var(--brand-primary);
    border-radius: 30px;
    font-size: 11px;
}

.treatments .treatments_grid .treatment .btn:hover {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(177, 72, 30, 0.3);
}

.treatments .treatments_grid .treatment .btn:before {
    display: none;
}

/* ============================================
   Warm Background Tones
   ============================================ */
.gift_card {
    background: var(--brand-primary);
}

.story_top:before,
.who_we_are:before,
.treatments_intro:before,
.gift_card_content:before {
    background: var(--brand-beige);
    opacity: 0.5;
}

.contact_row .form_section .form_grid .form_row input,
.contact_row .form_section .form_grid .form_row textarea {
    background: var(--brand-cream);
}

.site-footer {
    background: #1a1a1a;
}

.treatment-links {
    background: var(--brand-primary);
}

/* ============================================
   Text Contrast
   ============================================ */
#landing .content .tagline {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.gift_card p {
    color: var(--brand-white);
}

.gift_card p strong {
    color: var(--brand-cream);
}

.treatment-links .content a:hover {
    color: var(--brand-cream);
}

/* ============================================
   Footer
   ============================================ */
.site-footer .locations a {
    color: var(--brand-primary-light);
}

.site-footer .locations a.active {
    color: var(--brand-primary);
}

.site-footer .locations a:hover {
    color: var(--brand-white);
}

.site-footer .addresses .address p,
.site-footer .addresses .address p a {
    color: var(--brand-primary-light);
}

.site-footer .footer-menu a:hover {
    color: var(--brand-primary);
}

.site-footer .copyrights p {
    color: var(--brand-primary);
}

.site-footer .terms p,
.site-footer .terms p a {
    color: var(--brand-primary-light);
}

/* ============================================
   Custom Logo Support
   ============================================ */
.custom-logo-link {
    display: flex;
    align-items: center;
    height: 100%;
}

.custom-logo-link img.custom-logo {
    max-height: 100px;
    width: auto;
    height: auto;
}

/* Header logo */
.site-header .header-logo .custom-logo-link img.custom-logo {
    max-height: 120px;
}

/* Footer logo */
.site-footer .footer-logo .custom-logo-link img.custom-logo {
    max-height: 100px;
}

/* Landing hero logo */
#landing .content .custom-logo-wrap img.custom-logo {
    max-height: 100px;
    width: auto;
}

@media only screen and (max-width: 767px) {
    .site-header .header-logo .custom-logo-link img.custom-logo {
        max-height: 40px;
    }
    .site-footer .footer-logo .custom-logo-link img.custom-logo {
        max-height: 30px;
    }
    #landing .content .custom-logo-wrap img.custom-logo {
        max-height: 50px;
    }
}

/* Hide SVG logos + line divider when custom logo is uploaded */
.has-custom-logo .header-logo .line,
.has-custom-logo .header-logo .spa-logo,
.has-custom-logo .header-logo .nail-logo,
.has-custom-logo .footer-logo .line,
.has-custom-logo .footer-logo .spa-logo,
.has-custom-logo .footer-logo .nail-logo {
    display: none;
}

/* Gallery corners */
.gallery_row .gallery_grid a {
    border-radius: 6px;
    overflow: hidden;
}

/* ============================================
   Footer — Uniform across all pages
   ============================================ */

/* page_content base — reset the original top:70vh from theme.css */
.page_content {
    background: #fff;
    position: relative;
    z-index: 5;
    top: 0 !important;  /* Override theme.css top:70vh default */
}

/* Footer dark background everywhere */
.site-footer {
    position: relative;
    z-index: 5;
    background: #1a1a1a;
    float: left;
    width: 100%;
}

/* 
 * Pages WITH a fixed banner (About, Services):
 * The page_banner is position:fixed at 70vh height.
 * We use margin-top (not top) to push page_content down.
 * margin-top DOES affect document flow, so the footer 
 * will correctly sit below the content.
 */
.page_content.has-banner {
    margin-top: 70vh;
}

@media only screen and (max-width: 767px) {
    .page_content.has-banner {
        margin-top: 50vh;
    }
}

/* ============================================
   Header — Dark mode on pages without banner
   ============================================ */

/* MENU text → dark */
.tpl-no-banner .site-header .header-right .menu_btn span {
    color: var(--brand-text) !important;
}

/* Hamburger lines → dark */
.tpl-no-banner .site-header .header-right .menu_btn svg line {
    stroke: var(--brand-text) !important;
}

/* Email + Instagram icon SVGs → dark */
.tpl-no-banner .site-header .header-right .links a svg path,
.tpl-no-banner .site-header .header-right .links a svg rect {
    fill: var(--brand-text) !important;
}

/* Logo SVGs → dark */
.tpl-no-banner .site-header .header-logo svg path,
.tpl-no-banner .site-header .header-logo svg rect {
    fill: var(--brand-text) !important;
}

/* Header backdrop → light frosted glass */
.tpl-no-banner .site-header:before {
    background: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
}

/* Also handle scrolled state on no-banner pages */
.tpl-no-banner .site-header.scrolled:before {
    opacity: 1;
}

/* page_title needs top padding on no-banner pages so fixed header doesn't overlap */
.tpl-no-banner .page_title {
    padding-top: 160px;
}

@media only screen and (max-width: 767px) {
    .tpl-no-banner .page_title {
        padding-top: 120px;
    }
}

/* ============================================
   Mobile button fixes
   ============================================ */
@media only screen and (max-width: 767px) {
    .btn {
        font-size: 11px;
        padding: 0 22px;
        height: 40px;
        line-height: 40px;
    }

    .btn.spa,
    .btn.nail {
        font-size: 10px;
        padding: 0 18px;
        height: 36px;
        line-height: 36px;
        margin-bottom: 8px;
    }

    .treatment-links .content a {
        font-size: 14px;
    }
}

/* Selection */
::selection {
    background: var(--brand-primary);
    color: var(--brand-white);
}

::-moz-selection {
    background: var(--brand-primary);
    color: var(--brand-white);
}