/*
Theme Name: NiX LaAS
Theme URI: https://nix-laas.com
Author: NiX LaAS Team
Author URI: https://nix-laas.com
Description: Custom Gutenberg Blocks theme for NiX LaAS landing page and case study pages.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 7.0
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: nix-laas
Tags: block-editor, custom-background, custom-logo, full-width-template, translation-ready
*/

/* =========================================================
   GLOBAL RESET & BASE
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #191C1D;
  background-color: #F8F9FA;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

/* =========================================================
   WORDPRESS CORE
   ========================================================= */
.wp-block-post-content {
  padding: 0;
  max-width: 100%;
}

.entry-content {
  padding: 0;
  max-width: 100%;
}

/* Remove default WP margins from blocks on front page */
.site-content > .wp-block {
  margin-top: 0;
  margin-bottom: 0;
}

/* =========================================================
   CONTAINER UTILITY
   ========================================================= */
.nix-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* =========================================================
   TYPOGRAPHY UTILITIES
   ========================================================= */
.nix-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #003F87;
}

.nix-section-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  color: var(--nix-heading, #003f87);
  line-height: 1.2;
}

.nix-section-desc {
  font-size: 16px;
  color: #424752;
  line-height: 1.7;
}

/* =========================================================
   CARD BASE
   ========================================================= */
.nix-card {
  background: #fff;
  border-radius: 24px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nix-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 63, 135, 0.12);
}

/* =========================================================
   BUTTON UTILITIES
   ========================================================= */
.nix-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  border: none;
  text-decoration: none;
}

.nix-btn-primary {
  background: #003F87;
  color: #fff;
}

.nix-btn-primary:hover {
  background: #0056B3;
  transform: translateY(-1px);
}

.nix-btn-outline {
  background: transparent;
  color: #003F87;
  border: 2px solid #003F87;
}

.nix-btn-outline:hover {
  background: #003F87;
  color: #fff;
}

.nix-btn-white {
  background: #fff;
  color: #003F87;
}

.nix-btn-white:hover {
  background: #F0F4FF;
}

/* =========================================================
   REVEAL ANIMATION (via IntersectionObserver)
   ========================================================= */
.nix-scroll-ready .nix-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.nix-scroll-ready .nix-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.nix-scroll-ready .nix-reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.nix-scroll-ready .nix-reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.nix-scroll-ready .nix-reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.nix-scroll-ready .nix-reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays */
.nix-reveal-delay-1 {
  transition-delay: 0.1s;
}

.nix-reveal-delay-2 {
  transition-delay: 0.2s;
}

.nix-reveal-delay-3 {
  transition-delay: 0.3s;
}

.nix-reveal-delay-4 {
  transition-delay: 0.4s;
}

/* Automatic reveal for theme and Case Study blocks. */
.nix-scroll-ready .nix-scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 0.65s cubic-bezier(.22, 1, .36, 1) var(--nix-reveal-delay, 0ms),
    transform 0.65s cubic-bezier(.22, 1, .36, 1) var(--nix-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.nix-scroll-ready .nix-scroll-reveal.nix-reveal-left {
  transform: translate3d(-28px, 0, 0);
}

.nix-scroll-ready .nix-scroll-reveal.nix-reveal-right {
  transform: translate3d(28px, 0, 0);
}

.nix-scroll-ready .nix-scroll-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .nix-reveal,
  .nix-reveal-left,
  .nix-reveal-right,
  .nix-scroll-ready .nix-scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}