/* Google Fonts: Poppins & Inter (Enqueued in functions.php with preconnect for zero render-blocking) */

/* Box sizing rules */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Remove default list styles */
ul, ol {
  list-style: none;
}

/* Set core body defaults */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background-color: #000000;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

body {
  position: relative;
  min-height: 100vh;
  font-family: var(--font-family-primary);
  color: var(--color-text-main);
  background-color: #000000;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  overflow-x: hidden;
}

/* WordPress Admin Bar Spacing Tokens */
:root {
  --admin-bar-height: 0px;
}

body.admin-bar {
  --admin-bar-height: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --admin-bar-height: 46px;
  }
}

/* Prevent WordPress Admin Bar (#wpadminbar) from covering .site-header on Desktop & Mobile */
body.admin-bar .site-header.is-sticky {
  top: 32px;
  top: var(--admin-bar-height, 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header.is-sticky {
    top: 46px;
    top: var(--admin-bar-height, 46px);
  }
}

@media screen and (max-width: 600px) {
  #wpadminbar {
    position: fixed !important;
  }
}

/* Fallback Page Main Container (for un-converted pages) */
.fallback-page-main {
  padding: 140px 20px 80px;
  min-height: 60vh;
}

/* Make images and svgs responsive */
img, svg, picture, video, canvas {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}

/* Remove default button appearance */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Typography Utility Classes: Desktop */
.font-desktop-h1-bold {
  font: var(--font-desktop-h1-bold);
}
.font-desktop-h2-bold {
  font: var(--font-desktop-h2-bold);
}
.font-desktop-h2-semi-bold {
  font: var(--font-desktop-h2-semi-bold);
}
.font-desktop-h3-semi-bold {
  font: var(--font-desktop-h3-semi-bold);
}
.font-desktop-sh1-semi-bold {
  font: var(--font-desktop-sh1-semi-bold);
  letter-spacing: var(--letter-spacing-desktop-sh1);
  text-transform: uppercase;
}
.font-desktop-b1-bold {
  font: var(--font-desktop-b1-bold);
}
.font-desktop-b1-semi-bold {
  font: var(--font-desktop-b1-semi-bold);
}
.font-desktop-b1-regular {
  font: var(--font-desktop-b1-regular);
}
.font-desktop-b2-semi-bold {
  font: var(--font-desktop-b2-semi-bold);
}
.font-desktop-b2-regular {
  font: var(--font-desktop-b2-regular);
}
.font-desktop-link1-regular {
  font: var(--font-desktop-link1-regular);
}
.font-desktop-link2-regular {
  font: var(--font-desktop-link2-regular);
}

/* Typography Utility Classes: Mobile */
.font-mobile-h1-bold {
  font: var(--font-mobile-h1-bold);
}
.font-mobile-h2-bold {
  font: var(--font-mobile-h2-bold);
}
.font-mobile-h2-semi-bold {
  font: var(--font-mobile-h2-semi-bold);
}
.font-mobile-h3-semi-bold {
  font: var(--font-mobile-h3-semi-bold);
}
.font-mobile-sh1-semi-bold {
  font: var(--font-mobile-sh1-semi-bold);
  letter-spacing: var(--letter-spacing-mobile-sh1);
  text-transform: uppercase;
}
.font-mobile-b1-semi-bold {
  font: var(--font-mobile-b1-semi-bold);
}
.font-mobile-b1-regular {
  font: var(--font-mobile-b1-regular);
}
.font-mobile-b2-semi-bold {
  font: var(--font-mobile-b2-semi-bold);
}
.font-mobile-b2-regular {
  font: var(--font-mobile-b2-regular);
}
.font-mobile-b3-regular {
  font: var(--font-mobile-b3-regular);
}
.font-mobile-link2-regular {
  font: var(--font-mobile-link2-regular);
}

/* Utility Layouts per guideline.md */
.container {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 120px;
  padding-right: 120px;
  box-sizing: border-box;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 36px;
}

@media (max-width: 768px) {
  .container {
    max-width: 390px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .grid-12 {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 16px;
  }
}

/* ==========================================================================
   SCROLL REVEAL ANIMATIONS (Per-Element Intersection Observer with Stagger)
   Fade-in with 48px upward movement, 1000ms ease-out, 130ms stagger
   ========================================================================== */
.js-reveal-ready .reveal-item {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js-reveal-ready .reveal-item.is-revealed,
.js-reveal-ready .reveal-section.is-revealed .reveal-item {
  opacity: 1;
  transform: translateY(0);
}

/* Once reveal animation is complete, restore fast hover transition (200ms ease) */
.js-reveal-ready .reveal-item.is-revealed.reveal-complete {
  transition: transform 200ms ease,
              opacity 300ms ease,
              background-color 200ms ease,
              border-color 200ms ease,
              color 200ms ease,
              box-shadow 200ms ease;
  transition-delay: 0s;
}

/* Ensure button hover scale (1.04) and active scale (0.98) take precedence */
.js-reveal-ready .reveal-item.is-revealed.btn:hover,
.js-reveal-ready .reveal-item.is-revealed.hero-cta-btn:hover,
.js-reveal-ready .reveal-item.is-revealed.category-card-action-btn:hover,
.btn.reveal-item:hover,
.hero-cta-btn.reveal-item:hover,
.category-card-action-btn.reveal-item:hover {
  transform: scale(1.04);
  transition: transform 200ms ease;
  transition-delay: 0s;
}

.js-reveal-ready .reveal-item.is-revealed.btn:active,
.js-reveal-ready .reveal-item.is-revealed.hero-cta-btn:active,
.js-reveal-ready .reveal-item.is-revealed.category-card-action-btn:active,
.btn.reveal-item:active,
.hero-cta-btn.reveal-item:active,
.category-card-action-btn.reveal-item:active {
  transform: scale(0.98);
  transition: transform 120ms ease;
  transition-delay: 0s;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready .reveal-item,
  .reveal-item,
  .reveal-item.is-revealed,
  .reveal-section.is-revealed .reveal-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
  }
}

/* ==========================================================================
   PAGE TRANSITIONS (View Transitions API & Smooth Fallback)
   Consistent across Desktop, Tablet, and Mobile
   ========================================================================== */

/* Native Cross-Document View Transitions */
@view-transition {
  navigation: auto;
}

/* Header, Footer, and Floating WhatsApp remain static & steady */
.site-header {
  view-transition-name: site-header;
}

.site-footer {
  view-transition-name: site-footer;
}

.floating-whatsapp-btn {
  view-transition-name: wa-button;
}

.go-to-top-btn.is-floating {
  view-transition-name: go-to-top-button;
}

main {
  view-transition-name: main-content;
}

::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(site-footer),
::view-transition-new(site-footer),
::view-transition-old(wa-button),
::view-transition-new(wa-button),
::view-transition-old(go-to-top-button),
::view-transition-new(go-to-top-button) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(main-content) {
  animation: pageViewTransitionOut 250ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(main-content) {
  animation: pageViewTransitionIn 450ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pageViewTransitionOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes pageViewTransitionIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fallback Page Transitions (for local files or browsers without View Transitions) */
@keyframes pageContentEnter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.js-page-entering main {
  animation: pageContentEnter 450ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, transform;
}

main.page-is-exiting {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 250ms cubic-bezier(0.4, 0, 1, 1),
              transform 250ms cubic-bezier(0.4, 0, 1, 1);
  pointer-events: none;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(main-content),
  ::view-transition-new(main-content) {
    animation: none !important;
  }

  .js-page-entering main,
  main.page-is-exiting {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}