/*
Theme Name: Aesderma
Theme URI: https://aesdermamedspa.com/
Author: Aesderma Med Spa
Author URI: https://aesdermamedspa.com/
Description: Custom WordPress theme for Aesderma Med Spa — a luxury medical spa in West Hollywood.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aesderma
*/

/* ==========================================================
   AESDERMA MED SPA — Custom CSS
   ========================================================== */

/* ---- Reset & Base ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Gilda Display', serif;
    margin: 0;
    overflow-x: hidden;
}

/* ---- Hero background image: face flush-left ---- */
.hero-bg-img {
    /*width: 100%;*/
    max-width: unset;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .hero-bg-img {
        width: 100%;
        max-width: 100%;
        height: 100%;
    }
}

/* ---- Service Section: Z-Index Layering ---- */
/*
  Decorative frame lines sit BEHIND the image.
  Image is z-2, text is z-3, deco is z-1.
*/
.deco-frame {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.service-image {
    position: relative;
    z-index: 2;
}

.service-text {
    position: relative;
    z-index: 3;
}

/* ---- Decorative Frame Positioning ----
   Figma measurements:
   Desktop — Image at x:134, Deco at x:0  → deco is 134px left of image
             Image top:1161, Deco top:1238 → deco is 77px BELOW image top
             Deco size: 900x604
   Mobile  — Image at x:20, Deco at x:-46 → deco is ~66px left of image
             Deco 37px below image top
             Deco size: 446x300
   -------------------------------------------------------- */

/* Mobile-first: decorative frame (default/mobile) */
.deco-frame-left,
.deco-frame-right {
    width: 100%;
}

/* Left-image sections: deco extends left toward page edge */
.deco-frame-left {
    height: 80%;
    left: -20px;
    top: 50%;
    transform: translateY(-50%) !important;
}


/* Right-image sections: deco extends right, mirrored */

.deco-frame-right {
    height: 80%;
    left: auto;
    right: -20px;
    top: 50%;
    transform: translateY(-50%) !important;
}

.anim-from-right img.w-\[83\%\] {
    margin-left: auto;
}

/* Desktop: larger deco frames matching Figma 1920px layout */
@media (min-width: 1024px) {
    .deco-frame-left {
        width: 560px;
        left: -134px;
    }

    .deco-frame-right {
        width: 560px;
        right: -134px;
    }
}

@media (min-width: 1280px) {
    .deco-frame-left {
        width: 720px;
    }

    .deco-frame-right {
        width: 720px;
    }
}

@media (min-width: 1536px) {
    .deco-frame-left {

        width: 900px;
    }

    .deco-frame-right {
        width: 900px;
    }
}

/* Contact section decorative frame (smaller, behind clinic image) */
.deco-frame-contact {
    width: 100%;
    height: auto;
    right: 0;
    bottom: -40px;
    left: auto;
}

@media (min-width: 1024px) {
    .deco-frame-contact {
        width: 130%;
        right: -60px;
        bottom: -60px;
        left: auto;
    }
}

/* ---- Decorative Line Draw Animation ---- */
.deco-frame svg line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.deco-frame.is-visible svg line {
    stroke-dashoffset: 0;
}

/* ---- Scroll Animation Base States ---- */
.anim {
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.anim-from-left {
    transform: translateX(-60px);
}

.anim-from-right {
    transform: translateX(60px);
}

.anim-from-bottom {
    transform: translateY(50px);
}

.anim-scale {
    transform: scale(0.95);
}

.anim.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Stagger delays for sequenced entrance */
.anim-delay-1 {
    transition-delay: 0.15s;
}

.anim-delay-2 {
    transition-delay: 0.35s;
}

.anim-delay-3 {
    transition-delay: 0.55s;
}

.anim-delay-4 {
    transition-delay: 0.70s;
}

/* ---- Hamburger → X Transition ---- */
.hamburger span {
    display: block;
    width: 28px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: all 0.35s cubic-bezier(0.77, 0.2, 0.05, 1);
}

.hamburger.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ---- Navigation Overlay ---- */
.nav-overlay {
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

.nav-overlay.is-open {
    transform: translateX(0);
}

/* Sequential link fade-in */
.nav-overlay a {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.nav-overlay.is-open a:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.20s;
}

.nav-overlay.is-open a:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.28s;
}

.nav-overlay.is-open a:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.36s;
}

.nav-overlay.is-open a:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.44s;
}

.nav-overlay.is-open a:nth-child(5) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.52s;
}

.nav-overlay.is-open a:nth-child(6) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.60s;
}

.nav-overlay.is-open a:nth-child(7) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.68s;
}

.nav-overlay.is-open a:nth-child(8) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.76s;
}

/* ---- Glassmorphism Card ---- */
.glass-card {
    border-radius: 20px;
    border: 0.5px solid rgba(58, 58, 60, 0.20);
    background: rgba(26, 26, 26, 0.50);
}

/* ---- Form Inputs ---- */
.form-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid #C7C8CA;
    outline: none;
    width: 100%;
    padding: 8px 0;
    font-family: 'Gilda Display', serif;
    font-size: 18px;
    transition: border-color 0.3s;
}

.form-input:focus {
    border-bottom-color: #AF9952;
}

.form-input::placeholder {
    color: inherit;

}

.form-input-light {
    color: white;
    border-bottom: 1px solid #FFF;
}

.form-input-light::placeholder {
    color: white;
}

.form-input-dark {
    color: black;
}

.form-input-dark::placeholder {
    opacity: 0.8;
}

@media (min-width: 1024px) {
    .form-input {
        font-size: 22px;
    }
}

/* ---- Service CTA Buttons ---- */
.service-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(58, 58, 60, 1);
    border-image: linear-gradient(to right, #3A3A3C, #D9D9D9, #3A3A3C) 1;
    padding: 0 40px;
    height: 60px;
    font-family: 'Gilda Display', serif;
    font-size: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.35s ease;
    cursor: pointer;
    background: transparent;
}

.service-btn:hover {
    border-image: linear-gradient(to right, #AF9952, #D9D9D9, #AF9952) 1;
    border-color: #AF9952;
    color: #AF9952;
}

.service-btn-white {
    color: white;
}

.service-btn-black {
    color: black;
}

@media (min-width: 1024px) {
    .service-btn {
        font-size: 24px;
    }
}

/* ---- Footer Vertical Separator ---- */
.footer-sep {
    width: 1px;
    background: linear-gradient(
            180deg,
            rgba(58, 58, 60, 0.2) 0%,
            #D9D9D9 50%,
            rgba(58, 58, 60, 0.2) 100%
    );
}

/* ---- Gold Gradient Separator Lines ---- */
.sep-gold {
    height: 1px;
    background: linear-gradient(
            90deg,
            rgba(58, 58, 60, 0.2) 0%,
            #D9D9D9 50%,
            rgba(58, 58, 60, 0.2) 100%
    );
    position: relative;
}

.sep-gold.left {
    left: -250px;
}
@media (min-width: 1024px) {
    .sep-gold.left {
        position: absolute;
        left: -216px;
    }
}
/* ---- Background Gradients ---- */
.bg-gradient-warm {
    background: linear-gradient(181deg, #f8f7f6 0.5%, #c7bfbc 99.3%);
}

.bg-gradient-warm-footer {
    background: linear-gradient(1deg, #f8f7f6 1.1%, #c7bfbc 99.2%);
}