/* ============================================================
   ArtLux – nav.css
   Luxury Unified Header / Navigation / Footer
   ============================================================ */

   :root {
    --al-ink: #0f0d0b;
    --al-ink-soft: #171310;
    --al-cream: #f7f0e6;
    --al-cream-soft: #efe2d1;
    --al-gold: #c8a45d;
    --al-gold-light: #e2c982;
    --al-gold-dark: #9f7b35;
    --al-muted-light: rgba(247, 240, 230, 0.72);
    --al-muted-dark: #5f5a52;
    --al-border-light: rgba(247, 240, 230, 0.14);
    --al-border-gold: rgba(200, 164, 93, 0.24);
    --al-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
    --al-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  
  /* ============================================================
     HEADER
     ============================================================ */
  
  .al-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    width: 100%;
    transition:
      background 0.35s var(--al-ease),
      border-color 0.35s var(--al-ease),
      box-shadow 0.35s var(--al-ease),
      backdrop-filter 0.35s var(--al-ease);
  }
  
  .al-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(15, 13, 11, 0.82),
      rgba(15, 13, 11, 0.38),
      rgba(15, 13, 11, 0)
    );
    pointer-events: none;
    transition: opacity 0.35s var(--al-ease);
  }
  
  .al-header.scrolled {
    background: rgba(15, 13, 11, 0.84);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--al-border-gold);
    box-shadow: var(--al-shadow);
  }
  
  .al-header.scrolled::before {
    opacity: 0;
  }
  
  .al-header__main {
    position: relative;
    max-width: 1320px;
    height: 82px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  /* ============================================================
     LOGO
     ============================================================ */
  
  .al-logo {
    position: relative;
    color: var(--al-cream);
    text-decoration: none;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.75rem, 2vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1;
    flex-shrink: 0;
  }
  
  .al-logo em {
    color: var(--al-gold);
    font-style: normal;
  }
  
  .al-logo::after {
    content: "Decorative Art";
    display: block;
    margin-top: 5px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(247, 240, 230, 0.58);
  }
  
  /* Light header version used on homepage / thanks page */
  .al-header--light:not(.scrolled)::before {
    background: linear-gradient(
      to bottom,
      rgba(247, 240, 230, 0.9),
      rgba(247, 240, 230, 0.38),
      rgba(247, 240, 230, 0)
    );
  }
  
  .al-header--light:not(.scrolled) .al-logo {
    color: var(--al-ink);
  }
  
  .al-header--light:not(.scrolled) .al-logo::after {
    color: rgba(15, 13, 11, 0.48);
  }
  
  /* ============================================================
     DESKTOP NAVIGATION
     ============================================================ */
  
  .al-nav {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .al-nav__link {
    position: relative;
    padding: 11px 15px;
    color: rgba(247, 240, 230, 0.78);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    border-radius: 999px;
    white-space: nowrap;
    transition:
      color 0.25s var(--al-ease),
      background 0.25s var(--al-ease),
      transform 0.25s var(--al-ease);
      transition: ease-in-out 0.5s;
      
  }
  
  .al-nav__link:hover {
    color: var(--al-cream);
    background: rgba(255, 255, 255, 0.07);
    transition: ease-in-out 0.5s;
  }
  
  .al-nav__link.active {
    color: var(--al-gold-light);
  }
  
  .al-nav__link.active::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 5px;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--al-gold),
      transparent
    );
  }
  
  .al-header--light:not(.scrolled) .al-nav__link {
    color: rgba(15, 13, 11, 0.68);
  }
  
  .al-header--light:not(.scrolled) .al-nav__link:hover {
    color: var(--al-ink);
    background: rgba(15, 13, 11, 0.06);
  }
  
  .al-header--light:not(.scrolled) .al-nav__link.active {
    color: var(--al-gold-dark);
  }
  
  /* CTA */
  .al-nav__cta {
    margin-left: 8px;
    padding: 12px 20px;
    color: var(--al-ink) !important;
    background: linear-gradient(135deg, var(--al-gold-light), var(--al-gold));
    box-shadow: 0 10px 28px rgba(200, 164, 93, 0.28);
    transition: ease-in-out cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .al-nav__cta:hover {
    color: var(--al-ink) !important;
    background: linear-gradient(135deg, #efd98f, #c8a45d);
    transform: translateY(-1px);
  }
  
  .al-nav__cta::after {
    display: none;
  }
  
  /* ============================================================
     BURGER
     ============================================================ */
  
  .al-burger {
    display: none;
    width: 46px;
    height: 46px;
    border: 1px solid var(--al-border-gold);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--al-cream);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    position: relative;
    z-index: 1002;
  }
  
  .al-header--light:not(.scrolled) .al-burger {
    color: var(--al-ink);
    background: rgba(15, 13, 11, 0.05);
  }
  
  .al-burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    transition:
      transform 0.3s var(--al-ease),
      opacity 0.3s var(--al-ease);
  }
  
  .al-burger.open {
    color: var(--al-cream) !important;
  }
  
  .al-burger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  
  .al-burger.open span:nth-child(2) {
    opacity: 0;
  }
  
  .al-burger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  
  /* ============================================================
     MOBILE NAVIGATION
     ============================================================ */
  
  .al-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: clamp(1.6rem, 4vw, 2.6rem);
    padding: 6rem 1.5rem 3rem;
    background:
      radial-gradient(circle at 25% 20%, rgba(200, 164, 93, 0.16), transparent 34%),
      linear-gradient(145deg, rgba(23, 19, 16, 0.99), rgba(15, 13, 11, 0.98));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s var(--al-ease);
    overflow-y: auto;
  }
  
  .al-mobile-nav.visible {
    opacity: 1;
    pointer-events: auto;
  }
  
  .al-mobile-nav__link {
    color: rgba(247, 240, 230, 0.46);
    text-decoration: none;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2rem, 7vw, 4rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.05em;
    transition:
      color 0.25s var(--al-ease),
      transform 0.25s var(--al-ease);
  }
  
  .al-mobile-nav__link:hover,
  .al-mobile-nav__link.active {
    color: var(--al-cream);
    transform: translateY(-2px);
  }
  
  .al-mobile-nav__cta {
    margin-top: 0.5rem;
    padding: 0.95rem 2.4rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--al-gold-light), var(--al-gold));
    color: var(--al-ink) !important;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.8rem !important;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  
  /* ============================================================
     LEGACY HEADER SUPPORT
     For pages still using .artlux-header / .artlux-nav-main
     ============================================================ */
  
  .artlux-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    height: 82px;
    padding: 0 clamp(1.25rem, 4vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 13, 11, 0.84);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--al-border-gold);
  }
  
  .site-logo,
  .artlux-header-logo {
    color: var(--al-cream);
    text-decoration: none;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.75rem, 2vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1;
  }
  
  .site-logo span,
  .artlux-header-logo span {
    color: var(--al-gold);
  }
  
  .artlux-nav,
  .artlux-nav-main {
    display: flex;
    align-items: center;
    gap: 1.3rem;
  }
  
  .artlux-nav ul,
  .nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.3rem;
    margin: 0;
    padding: 0;
  }
  
  .artlux-nav a,
  .artlux-nav-main-button {
    color: rgba(247, 240, 230, 0.78);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
  
  .artlux-nav a:hover,
  .artlux-nav-main-button:hover {
    color: var(--al-gold-light);
  }
  
  .burger {
    display: none;
  }
  
  /* ============================================================
     FOOTER
     ============================================================ */
  
  .artlux-footer {
    background:
      radial-gradient(circle at 20% 0%, rgba(200, 164, 93, 0.12), transparent 28%),
      #0d0c0a;
    color: var(--al-cream);
    padding: 5rem clamp(1.5rem, 5vw, 4rem) 0;
  }
  
  .footer-container {
    max-width: 1320px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.5fr;
    gap: 2rem 4rem;
    padding-bottom: 3rem;
  }
  
  .footer-logo {
    display: inline-block;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.85rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    text-decoration: none;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1;
  }
  
  .footer-logo span {
    color: var(--al-gold);
    font-style: italic;
  }
  
  .footer-about p {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.92rem;
    line-height: 1.75;
    max-width: 260px;
  }
  
  .footer-section h3 {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.36);
    margin-bottom: 1.5rem;
  }
  
  .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-links li {
    margin-bottom: 0.72rem;
  }
  
  .footer-links a,
  .footer-contact a {
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.92rem;
    text-decoration: none;
    transition: color 0.24s var(--al-ease);
  }
  
  .footer-links a:hover,
  .footer-contact a:hover {
    color: var(--al-gold-light);
  }
  
  .footer-contact {
    font-style: normal;
  }
  
  .footer-contact p {
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.92rem;
    margin-bottom: 0.65rem;
  }
  
  /* Social Links */
  .social-links {
    display: flex;
    gap: 0.7rem;
    margin-top: 1.4rem;
  }
  
  .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    position: relative;
    overflow: hidden;
    transition: transform 0.25s var(--al-ease);
  }
  
  .social-links a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.25s var(--al-ease);
  }
  
  .social-links a[aria-label="Instagram"]::before {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  }
  
  .social-links a[aria-label="Facebook"]::before {
    background: #1877f2;
  }
  
  .social-links a:hover {
    transform: translateY(-3px);
  }
  
  .social-links a:hover::before {
    opacity: 1;
  }
  
  .social-links svg {
    width: 18px;
    height: 18px;
    fill: rgba(255, 255, 255, 0.68);
    position: relative;
    z-index: 1;
    transition: fill 0.25s var(--al-ease);
  }
  
  .social-links a:hover svg {
    fill: #fff;
  }
  
  .copyright {
    max-width: 1320px;
    margin-inline: auto;
    padding: 1.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    text-align: center;
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.83rem;
  }
  
  /* ============================================================
     FLOATING ACTIONS
     ============================================================ */
  
  .wa-btn {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 900;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25d366;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
    transition:
      transform 0.25s var(--al-ease),
      box-shadow 0.25s var(--al-ease);
  }
  
  .wa-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.28);
  }
  
  .wa-btn svg {
    width: 28px;
    height: 28px;
    fill: #fff;
  }
  
  .back-top {
    position: fixed;
    right: 22px;
    bottom: 88px;
    z-index: 900;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--al-border-gold);
    background: rgba(15, 13, 11, 0.82);
    color: var(--al-cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition:
      opacity 0.25s var(--al-ease),
      transform 0.25s var(--al-ease);
  }
  
  .back-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  
  .back-top svg {
    width: 22px;
    height: 22px;
  }
  
  /* ============================================================
     RESPONSIVE
     ============================================================ */
  
  @media (max-width: 960px) {
    .footer-container {
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem;
    }
  }
  
  @media (max-width: 900px) {
    .al-header__main {
      height: 74px;
    }
  
    .al-nav {
      display: none;
    }
  
    .al-burger {
      display: flex;
    }
  
    .al-logo::after {
      font-size: 0.52rem;
    }
  
    .artlux-nav,
    .artlux-nav-main {
      display: none;
    }
  
    .burger {
      display: flex;
    }
  }
  
  @media (max-width: 520px) {
    .al-header__main {
      padding: 0 16px;
    }
  
    .al-logo {
      font-size: 1.65rem;
    }
  
    .al-logo::after {
      display: none;
    }
  
    .footer-container {
      grid-template-columns: 1fr;
    }
  
    .artlux-footer {
      padding-top: 4rem;
    }
  }