/* ====================================
   Custom CSS for Coaching Website
   ==================================== */

/* ====================================
   Font Family Definitions
   ==================================== */
body {
  font-family: 'Noto Sans JP', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
}

/* ====================================
   Color Variables
   ==================================== */
:root {
  --color-primary: #FF8B7B;
  --color-secondary: #E67E5F;
  --color-accent: #7A9B76;
  --color-light: #F5F0E8;
  --color-dark: #2D3436;
  --color-white: #FAFAF8;
  --color-gray: #E8E6E3;
}

/* ====================================
   Smooth Scrolling
   ==================================== */
html {
  scroll-behavior: smooth;
}

/* ====================================
   Navigation Scroll Behavior
   ==================================== */

/* Initial state: Transparent header */
#header {
  background: transparent;
  transition: all 0.3s ease;
}

/* Navigation links initial state */
#header nav a {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

/* Logo initial state */
#header nav div a {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Mobile menu button initial state */
#header #mobile-menu-button {
  color: #ffffff;
}

#header #mobile-menu-button svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Scrolled state: Blur background */
#header.scrolled {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Navigation links scrolled state */
#header.scrolled nav a {
  color: #2D3436;
  text-shadow: none;
}

/* Logo scrolled state */
#header.scrolled nav div a {
  color: #2D3436;
  text-shadow: none;
}

/* Mobile menu button scrolled state */
#header.scrolled #mobile-menu-button {
  color: #2D3436;
}

#header.scrolled #mobile-menu-button svg {
  filter: none;
}

/* CTA button should maintain its color */
#header nav a.bg-primary,
#header.scrolled nav a.bg-primary {
  color: #ffffff;
  text-shadow: none;
}

/* ====================================
   Mobile Menu
   ==================================== */
#mobile-menu {
  transition: all 0.3s ease;
}

#mobile-menu.active {
  display: block;
}

/* ====================================
   Hover Effects & Transitions
   ==================================== */

/* Button hover effects */
button,
a.inline-block {
  transition: all 0.3s ease;
}

/* Link hover effects */
a {
  transition: color 0.3s ease;
}

/* Card hover effects */
.shadow-lg {
  transition: all 0.3s ease;
}

.shadow-lg:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ====================================
   Form Styles
   ==================================== */

/* Input focus styles */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  ring: 2px;
  ring-color: var(--color-primary);
}

/* Error state */
input.error,
textarea.error {
  border-color: #EF4444;
}

/* Success state */
input.success,
textarea.success {
  border-color: #10B981;
}

/* Checkbox styling */
input[type="checkbox"]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ====================================
   Custom Scrollbar (Webkit browsers)
   ==================================== */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-light);
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary);
}

/* ====================================
   Gradient Text Effect
   ==================================== */
.gradient-text {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ====================================
   Animation Overrides
   ==================================== */

/* Ensure animations respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ====================================
   Utility Classes
   ==================================== */

/* Text shadow for hero text */
.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Backdrop blur support */
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .backdrop-blur {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* ====================================
   Print Styles
   ==================================== */
@media print {
  #header,
  #mobile-menu,
  footer {
    display: none;
  }

  body {
    background: white;
    color: black;
  }

  section {
    page-break-inside: avoid;
  }
}

/* ====================================
   Responsive Adjustments
   ==================================== */

/* Mobile optimizations */
@media (max-width: 768px) {
  /* Increase tap target sizes */
  button,
  a {
    min-height: 44px;
    min-width: 44px;
  }

  /* Adjust spacing for mobile */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet-specific styles if needed */
}

/* Desktop enhancements */
@media (min-width: 1024px) {
  /* Smooth hover effects for desktop only */
  button:hover,
  a:hover {
    transition: all 0.2s ease;
  }
}