/* =====================================================================
   Aureus Commercial — custom CSS layer
   Faithful reproduction of the custom classes from the React src/index.css,
   plus lightweight CSS replacements for the framer-motion entrance fades.
   Brand colours are read from CSS custom properties (see header.php) so the
   Appearance → Customize colour pickers recolour the entire site live.
   ===================================================================== */

/* ---- Base (mirrors @layer base in index.css) ---- */
html {
  scroll-behavior: smooth;
  background-color: var(--color-offwhite, #FAFAFB);
  color: var(--color-ink, #1E2433);
  font-family: var(--font-sans, "Hanken Grotesk", system-ui, -apple-system, sans-serif);
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
}

/* ---- Premium typography helpers (.font-display / .font-marcellus) ---- */
.font-display,
.font-marcellus {
  font-family: var(--font-serif, "Marcellus", Georgia, serif);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ---- Immersive UI theme helper classes ---- */
.gold-accent { color: var(--color-gold, #CDA349); }
.gold-bg     { background-color: var(--color-gold, #CDA349); }
.gold-border { border-color: var(--color-gold, #CDA349); }
.navy-deep   { background-color: var(--color-navy-dark, #0C1322); }

/* ---- Faint gold radial glow ---- */
.gold-glow { position: relative; }
.gold-glow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(205, 163, 73, 0.12) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* ---- Nav link hover underline effect ---- */
.nav-link:hover .underline-gold { width: 100%; }
.underline-gold {
  width: 0;
  height: 1px;
  background-color: var(--color-gold, #CDA349);
  transition: width 0.3s ease;
}

/* ---- Service row styling overrides ---- */
.service-row {
  border-bottom: 1px solid rgba(221, 224, 229, 0.1);
  transition: all 0.3s ease;
}
.service-row:hover { background: rgba(205, 163, 73, 0.05); }
.service-row:hover .arrow-circle {
  background-color: var(--color-gold, #CDA349);
  color: var(--color-navy, #111A2E);
  transform: rotate(-45deg);
}

/* ---- Accessible focus styles ---- */
:focus-visible {
  outline: 2px solid var(--color-gold, #CDA349);
  outline-offset: 4px;
}

/* =====================================================================
   Motion replacements (replicating motion/react entrance feel)
   ===================================================================== */

/* Hero / on-load entrance fades */
@keyframes aureusFadeDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aureusFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aureusFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.a-fade-down { animation: aureusFadeDown 0.6s ease both; }
.a-fade-up   { animation: aureusFadeUp 0.8s ease both; }
.a-fade-in   { animation: aureusFadeIn 0.6s ease both; }

/* Stagger delays used by the hero copy + page transition */
.a-delay-1 { animation-delay: 0.10s; }
.a-delay-2 { animation-delay: 0.25s; }
.a-delay-3 { animation-delay: 0.40s; }

/* Page-level entrance (mirrors App.tsx AnimatePresence fade) */
#aureus-main { animation: aureusFadeUp 0.6s ease both; }

/* Scroll-reveal (replaces whileInView staggered list reveal) */
.a-reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.a-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile menu panel fade (the original referenced animate-fadeIn) */
.animate-fadeIn { animation: aureusFadeIn 0.3s ease both; }

/* =====================================================================
   Misc fidelity helpers
   ===================================================================== */

/* The original markup uses scale-102 (non-standard Tailwind step) */
.scale-102 { --tw-scale-x: 1.02; --tw-scale-y: 1.02; transform: scale(1.02); }
.hover\:scale-100:hover { --tw-scale-x: 1; --tw-scale-y: 1; transform: scale(1); }

/* Selection styling (mirrors App.tsx selection classes) */
::selection {
  background-color: rgba(205, 163, 73, 0.30);
  color: var(--color-navy, #111A2E);
}

/* =====================================================================
   wp_nav_menu fallback styling (only used if an admin assigns a custom menu;
   the default theme markup already matches the React design exactly)
   ===================================================================== */
.aureus-primary-menu { list-style: none; margin: 0; padding: 0; }
.aureus-primary-menu li { margin: 0; }
.aureus-primary-menu a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-silver, #C9CDD6);
  transition: color 0.2s ease;
}
.aureus-primary-menu a:hover { color: #fff; }
.aureus-primary-menu .current-menu-item > a,
.aureus-primary-menu .current_page_item > a { color: var(--color-gold, #CDA349); font-weight: 600; }
.aureus-primary-menu a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1.5px;
  background: var(--color-gold, #CDA349);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.aureus-primary-menu a:hover::after,
.aureus-primary-menu .current-menu-item > a::after,
.aureus-primary-menu .current_page_item > a::after { transform: scaleX(1); }

/* Keep the fixed header below the WordPress admin bar when logged in */
.admin-bar #aureus-header { top: 32px; }
.admin-bar #mobile-nav-panel { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar #aureus-header { top: 46px; }
  .admin-bar #mobile-nav-panel { top: 46px; }
}

/* Mobile drawer menu when a custom menu is assigned (Appearance → Menus) */
.aureus-mobile-menu { list-style: none; margin: 0; padding: 0; }
.aureus-mobile-menu li { margin: 0; }
.aureus-mobile-menu a {
  display: block;
  width: 100%;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-silver, #C9CDD6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.aureus-mobile-menu a:hover { color: #fff; }
.aureus-mobile-menu .current-menu-item > a,
.aureus-mobile-menu .current_page_item > a { color: var(--color-gold, #CDA349); padding-left: 0.5rem; }

.aureus-footer-menu { list-style: none; margin: 0; padding: 0; }
.aureus-footer-menu a {
  color: var(--color-silver, #C9CDD6);
  font-size: 0.75rem;
  transition: color 0.2s ease;
}
.aureus-footer-menu a:hover { color: var(--color-gold, #CDA349); }

/* =====================================================================
   Reduced-motion overrides (mirrors index.css)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  .a-reveal { opacity: 1 !important; transform: none !important; }
}