/*
Theme Name: Angel's Beauty Shop
Theme URI: https://angelsbeauty.shop
Author: Angel's Beauty Shop
Author URI: https://angelsbeauty.shop
Description: Luxurious one-page landing theme for Angel's Beauty Shop Aruba. Dark cosmic aesthetic with metallic gold accents. Based on the v4 landing design.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: angels-beauty-shop
Tags: one-page, custom-background, custom-logo, full-width-template
*/

/* Theme base — complements Tailwind loaded via functions.php */
:root {
  --abs-bg: #0a0a0a;
  --abs-gold: #d4af37;
  --abs-gold-light: #f5d76e;
  --abs-cream: #f0e6d2;
  --abs-muted: #d4c8a8;
}

body.abs-theme {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: #000;
  color: var(--abs-cream);
  margin: 0;
  overflow-x: hidden;
}

.abs-luxury {
  font-family: 'Cinzel', serif;
  letter-spacing: -0.04em;
}

.abs-heading {
  font-family: 'Playfair Display', serif;
}

.abs-hero {
  background: linear-gradient(rgba(10, 10, 10, 0.65), rgba(10, 10, 10, 0.85)),
    url('https://picsum.photos/id/1015/2000/1200') center/cover no-repeat fixed;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.abs-hero-logo {
  max-height: 380px;
  width: auto;
  display: block;
  margin: 0 auto;
  background: transparent !important;
  animation: abs-logo-float 28s ease-in-out infinite;
}

@keyframes abs-logo-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.abs-footer-bg {
  background: linear-gradient(rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0.95)),
    url('https://picsum.photos/id/1016/2000/800') center/cover no-repeat;
}

.abs-nav-logo {
  height: 4rem;
  width: auto;
}

.abs-footer-logo {
  height: 5rem;
  width: auto;
  margin: 0 auto 2rem;
  opacity: 0.8;
  display: block;
}

/* WordPress admin bar offset */
.admin-bar .abs-nav {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .abs-nav {
    top: 46px;
  }
}

.abs-nav a:focus-visible,
.abs-btn:focus-visible {
  outline: 2px solid var(--abs-gold);
  outline-offset: 2px;
}