/*
 * Custom styles for Hello Child Theme
 * Uses BEM-like naming: c-* (components), u-* (utilities)
 *
 * CONTENTS:
 * 1. Custom Properties
 * 2. Header
 * 3. Hero
 * 4. Buttons
 * 5. Utilities
 */

/* === 1. CUSTOM PROPERTIES === */
:root {
  /* Transition speeds */
  --transition-fast: 0.2s ease;
  --transition-default: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Brand colors with fallbacks to Elementor global colors */
  --axl-color-primary: var(--e-global-color-primary, #0b60ad);
  --axl-color-secondary: var(--e-global-color-secondary, #6ec3f6);
  --axl-color-text: var(--e-global-color-text, #2a2a2a);
  --axl-color-accent: var(--e-global-color-accent, #1699f5);
  --axl-color-light-cyan: #73e8ff;
  --axl-color-bold-red: var(--e-global-color-6e5160, #e53935);
  --axl-color-accent-red: #f15a48;
  --axl-color-coral-red: #ff4d4d;
  --axl-color-light-red: var(--e-global-color-27b4597, #fbc6c4);

  /* Common gradients */
  --primary-gradient: linear-gradient(
    135deg,
    var(--axl-color-primary) 0%,
    var(--axl-color-secondary) 25%,
    var(--axl-color-secondary) 25%,
    var(--axl-color-primary) 80%,
    var(--axl-color-primary) 80%,
    var(--axl-color-secondary) 100%
  );

  --red-gradient: linear-gradient(
    135deg,
    var(--axl-color-bold-red) 0%,
    var(--axl-color-light-red) 25%,
    var(--axl-color-light-red) 25%,
    var(--axl-color-bold-red) 80%,
    var(--axl-color-bold-red) 80%,
    var(--axl-color-light-red) 100%
  );

  --footer-gradient: linear-gradient(135deg, var(--axl-color-secondary) 0%, var(--axl-color-secondary) 35%, var(--axl-color-primary) 65%, var(--axl-color-primary) 100%);
}

/* === 2. HEADER === */
/* Frosted glass effect header with sticky positioning */
.c-header__frosted-bg {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 1000;
  position: sticky;
  top: 0;
  transition: transform var(--transition-default), padding var(--transition-fast) !important;
  transform: translateY(0);
}

/* Compact header style when scrolled */
.c-header__scrolled {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.c-header__scrolled .elementor-widget-theme-site-logo img {
  max-width: 65% !important;
  transition: max-width var(--transition-default);
}

.c-header__scrolled .elementor-nav-menu .elementor-item {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  transition: padding var(--transition-fast);
}

/* Hidden header state (for scroll-down behavior) */
.c-header__hidden {
  transform: translateY(-120px) !important;
}

/* === 3. HERO === */
/* Diagonal gradient background for hero sections */
.c-hero--linear-bg::before {
  background: var(--primary-gradient);
  z-index: -1;
}

/* === 4. BUTTONS === */
/* Primary CTA button with animated gradient */
.c-btn--cta a {
  background: var(--primary-gradient);
  background-size: 200% 100%;
  background-position: right center;
  border: 1px solid var(--axl-color-primary);
  cursor: pointer;
  transition: background-position var(--transition-default), transform var(--transition-fast);
}

.c-btn--cta a:hover {
  background-position: left center;
  transform: scale(1.025);
}

/* Button width variations */
.c-btn--min-w-100 a {
  min-width: 100%;
}

.c-btn--primary a {
  min-width: 250px;
}

/* Red variant button with gradient */
.c-btn--red a {
  background: var(--red-gradient);
  background-size: 200% 100%;
  background-position: right center;
  border: 1px solid var(--axl-color-bold-red);
  cursor: pointer;
  transition: background-position var(--transition-default), transform var(--transition-fast);
}

.c-btn--red a:hover {
  background-position: left center;
  transform: scale(1.025);
}

/* Footer icon button with animated underline */
.c-footer--icon-btn a {
  background: none !important;
  padding: 0.25rem !important;
  position: relative;
  transition: color var(--transition-default);
}

.c-footer--icon-btn a .elementor-button-content-wrapper {
  gap: 10px;
}

.c-footer--icon-btn a svg {
  transition: transform var(--transition-fast);
}

.c-footer--icon-btn a:hover svg {
  transform: translateY(-2px);
}

.c-footer--icon-btn a::before {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--footer-gradient);
  transition: transform var(--transition-default);
  transform: scaleX(0);
  transform-origin: left center;
}

.c-footer--icon-btn a:hover::before {
  transform: scaleX(1);
}

/* === 5. UTILITIES === */
/* Margin utilities */
.u-m--0 {
  margin: 0;
}
.u-mt--1 {
  margin-top: 0.5rem;
}
.u-mb--1 {
  margin-bottom: 0.5rem;
}
.u-ml--1 {
  margin-left: 0.5rem;
}
.u-mr--1 {
  margin-right: 0.5rem;
}

/* Padding utilities */
.u-p--0 {
  padding: 0;
}
.u-p--1 {
  padding: 0.5rem;
}
.u-p--2 {
  padding: 1rem;
}

/* Width utilities */
.u-w--100 {
  width: 100%;
}
.u-w--75 {
  width: 75%;
}
.u-w--50 {
  width: 50%;
}
.u-w--25 {
  width: 25%;
}

/* Display utilities */
.u-d--flex {
  display: flex;
}
.u-d--block {
  display: block;
}
.u-d--none {
  display: none;
}