/**
 * AxisTech Theme — Custom Styles
 * All visual styling for the block theme. Loaded via functions.php.
 */

/* ═══════ GLOBAL ═══════ */
html { scroll-behavior: smooth !important; scroll-padding-top: 100px !important; }
body { -webkit-font-smoothing: antialiased; background-color: #1a1d23 !important; }

/* Headings — match original design token sizes */
h1.wp-block-heading, h1 { font-size: clamp(2.75rem, 5.5vw, 4.25rem) !important; }
h2.wp-block-heading, h2 { font-size: clamp(2rem, 3.5vw, 2.75rem) !important; }
h3.wp-block-heading, h3 { font-size: clamp(1.5rem, 2.5vw, 1.75rem) !important; }
h4.wp-block-heading, h4 { font-size: clamp(1.125rem, 2vw, 1.375rem) !important; }

/* ═══════ SCROLL REVEAL ANIMATIONS ═══════ */
.reveal {
  opacity: 0 !important; transform: translateY(20px) !important;
  transition: opacity 0.6s ease, transform 0.6s ease !important;
}
.reveal.visible { opacity: 1 !important; transform: translateY(0) !important; }
.reveal-delay-1 { transition-delay: 0.08s !important; }
.reveal-delay-2 { transition-delay: 0.16s !important; }
.reveal-delay-3 { transition-delay: 0.24s !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-canvas { display: none !important; }
}

/* ═══════ SITE LOGO ═══════ */
.wp-block-site-logo img,
.wp-block-site-logo .custom-logo-link img,
.header-logo img {
  height: 90px !important; width: auto !important; max-height: none !important;
}
@media (max-width: 768px) {
  .wp-block-site-logo img { height: 60px !important; }
}

/* ═══════ HEADER ═══════ */
.axistech-header {
  backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important; min-height: 100px !important;
  position: sticky !important; top: 0 !important; z-index: 100 !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
}
.axistech-header > .wp-block-group { display: flex; align-items: center; gap: 16px; }

/* Navigation */
.wp-block-navigation { font-family: var(--wp--preset--font-family--jetbrains-mono, monospace) !important; }
.wp-block-navigation__container {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  gap: 1.5rem !important; list-style: none !important; padding: 0 !important; margin: 0 !important;
}
.wp-block-navigation__container .menu-item {
  margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.wp-block-navigation .wp-block-navigation-item__label,
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .menu-item a {
  font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.06em !important;
  text-transform: uppercase !important; color: var(--wp--preset--color--muted, #8a95a5) !important;
  text-decoration: none !important; white-space: nowrap !important;
}
.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .menu-item a:hover { color: var(--wp--preset--color--light, #e8ecf0) !important; }

/* Navigation fallback when no menu exists */
.wp-block-navigation:empty::after {
  content: "Create a menu in Site Editor → Navigation";
  display: block; padding: 20px; color: var(--wp--preset--color--muted, #8a95a5);
  font-family: var(--wp--preset--font-family--jetbrains-mono, monospace); font-size: 11px;
  border: 1px dashed rgba(255,255,255,0.15); border-radius: 4px; text-align: center;
}

/* ═══════ HERO ═══════ */
.hero-cover { position: relative !important; overflow: hidden !important; min-height: 80vh !important; }
.hero-canvas { position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 1 !important; opacity: 0.50 !important; display: block !important; }

/* ═══════ PROOF STRIP ═══════ */
.proof-strip {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
  flex-wrap: wrap !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.proof-item {
  text-align: center !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}
.proof-item:last-child { border-right: none !important; }
.proof-bar {
  height: 2px !important; background: var(--wp--preset--color--accent, #34B4A3) !important;
  margin-bottom: 0.75rem !important;
}
.proof-label {
  font-family: var(--wp--preset--font-family--jetbrains-mono, monospace) !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.06em !important;
  text-transform: uppercase !important; color: var(--wp--preset--color--light, #e8ecf0) !important;
  margin: 0 0 6px 0 !important;
}
.proof-desc {
  font-size: 0.75rem !important; color: var(--wp--preset--color--muted, #8a95a5) !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .proof-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .proof-item:nth-child(2n) { border-right: none !important; }
  .proof-item:nth-child(1), .proof-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
}
@media (max-width: 430px) {
  .proof-strip { grid-template-columns: 1fr !important; }
  .proof-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
}

/* ═══════ CAPABILITIES — 4-column card grid ═══════ */
.cap-grid {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0 !important;
}
.cap-card {
  background: #242930 !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 40px 32px !important; transition: all 0.3s ease !important;
}
.cap-card:nth-child(4n) { border-right: none !important; }
.cap-card:hover {
  background: #2c3238 !important; transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.30), 0 0 30px rgba(52,180,163,0.06) !important;
}
.cap-card-icon {
  width: 48px !important; height: 48px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: rgba(52,180,163,0.08) !important; border-radius: 6px !important;
  margin-bottom: 22px !important; color: #34B4A3 !important; transition: all 0.3s !important;
}
.cap-card:hover .cap-card-icon {
  background: rgba(52,180,163,0.20) !important; box-shadow: 0 0 16px rgba(52,180,163,0.3) !important;
}
.cap-card-icon svg { width: 24px !important; height: 24px !important; }
.cap-card .card-question {
  font-size: 0.875rem !important; color: #8a95a5 !important;
  margin-bottom: 4px !important; font-style: italic !important;
}
.cap-card h4 { margin-bottom: 8px !important; font-weight: 600 !important; }
.cap-card p {
  color: #8a95a5 !important; font-size: 0.875rem !important; line-height: 1.65 !important;
}

@media (max-width: 1024px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cap-card:nth-child(2n) { border-right: none !important; }
  .cap-card:nth-child(4n) { border-right: 1px solid rgba(255,255,255,0.06) !important; }
}
@media (max-width: 600px) {
  .cap-grid { grid-template-columns: 1fr !important; }
  .cap-card { border-right: none !important; }
}

/* Capability card content */
.wp-block-column.has-background h4 { font-weight: 600 !important; margin-bottom: 0.5rem !important; }
.wp-block-column.has-background p { font-size: 0.875rem !important; line-height: 1.65 !important; }

/* ═══════ BACKGROUND PATTERNS ═══════ */
.section-alt, .wp-block-group.has-background[style*="#1c2027"] {
  position: relative !important; overflow: hidden !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) !important;
  background-size: 32px 32px !important; background-position: -1px -1px !important;
}

/* ═══════ SECTION LABELS & NUMBERS ═══════ */
.section-edge,
.section-approach,
.section-alt {
  position: relative !important; overflow: hidden !important;
}
.section-number {
  font-family: var(--wp--preset--font-family--jetbrains-mono, monospace) !important;
  font-size: clamp(48px, 12vw, 140px) !important; font-weight: 700 !important; line-height: 1 !important;
  color: rgba(255,255,255,0.05) !important; letter-spacing: -0.06em !important;
  position: absolute !important; top: 20px !important; right: 1.5rem !important;
  pointer-events: none !important; user-select: none !important; z-index: 0 !important;
}
.section-label {
  font-family: var(--wp--preset--font-family--jetbrains-mono, monospace) !important;
  font-size: 11px !important; font-weight: 600 !important;
  color: var(--wp--preset--color--accent, #34B4A3) !important; text-transform: uppercase !important;
  letter-spacing: 0.1em !important; margin-bottom: 0.75rem !important;
}

/* ═══════ OUR EDGE — 2x2 grid ═══════ */
.edge-grid {
  display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.5rem !important;
}
.edge-card {
  background: #23272e !important; border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important; padding: 40px !important;
  transition: all 0.3s ease !important; position: relative !important; overflow: hidden !important;
}
.edge-card::before {
  content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, #34B4A3, transparent) !important;
  opacity: 0 !important; transition: opacity 0.3s ease !important;
}
.edge-card:hover {
  border-color: rgba(52,180,163,0.35) !important; transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.30), 0 0 30px rgba(52,180,163,0.06) !important;
}
.edge-card:hover::before { opacity: 1 !important; }
.edge-card-number {
  font-family: var(--wp--preset--font-family--jetbrains-mono, monospace) !important;
  font-size: 11px !important; color: var(--wp--preset--color--accent, #34B4A3) !important;
  font-weight: 600 !important; margin-bottom: 14px !important; letter-spacing: 0.06em !important;
}
.edge-card h4 { margin-bottom: 8px !important; font-weight: 600 !important; }
.edge-card p {
  color: var(--wp--preset--color--muted, #8a95a5) !important;
  font-size: 0.875rem !important; line-height: 1.65 !important;
}
.edge-card .card-question {
  font-size: 0.875rem !important; color: var(--wp--preset--color--muted, #8a95a5) !important;
  margin-bottom: 4px !important; font-style: italic !important;
}

@media (max-width: 768px) {
  .edge-grid { grid-template-columns: 1fr !important; }
}

/* ═══════ APPROACH — 4-step timeline ═══════ */
.approach-grid {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important; position: relative !important;
}
.approach-line {
  position: absolute !important; top: 56px !important; left: 20px !important; right: 20px !important;
  height: 1px !important;
  background: linear-gradient(90deg, #34B4A3, #34B4A3, #34B4A3) !important;
  opacity: 0.3 !important; z-index: 0 !important; box-shadow: 0 0 8px rgba(52,180,163,0.3) !important;
}
.approach-card {
  background: #23272e !important; border-right: 1px solid rgba(255,255,255,0.06) !important;
  padding: 52px 28px 36px !important; position: relative !important; z-index: 1 !important;
  transition: all 0.3s ease !important;
}
.approach-card:last-child { border-right: none !important; }
.approach-card:hover {
  background: #2c3238 !important; transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.30) !important;
}
.approach-dot {
  width: 16px !important; height: 16px !important; border-radius: 50% !important;
  background: var(--wp--preset--color--accent, #34B4A3) !important;
  margin: 0 auto 20px !important; position: relative !important; z-index: 2 !important;
  box-shadow: 0 0 14px rgba(52,180,163,0.4) !important;
}
.approach-step {
  font-family: var(--wp--preset--font-family--jetbrains-mono, monospace) !important;
  font-size: 12px !important; color: var(--wp--preset--color--accent, #34B4A3) !important;
  font-weight: 600 !important; margin-bottom: 12px !important; letter-spacing: 0.06em !important;
  text-align: center !important;
}
.approach-card h4 { margin-bottom: 8px !important; text-align: center !important; font-weight: 600 !important; }
.approach-card p {
  color: var(--wp--preset--color--muted, #8a95a5) !important;
  font-size: 0.875rem !important; line-height: 1.65 !important;
}

@media (max-width: 768px) {
  .approach-grid { grid-template-columns: 1fr !important; }
  .approach-line { display: none !important; }
  .approach-card { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
}

/* ═══════ SELECTED WORK — 3-column grid ═══════ */
.work-grid {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
}
.work-card {
  background: #23272e !important; border-right: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 44px 32px !important; transition: all 0.3s ease !important;
}
.work-card:nth-child(3n) { border-right: none !important; }
.work-card:hover {
  background: #2c3238 !important; transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.30) !important;
}
.work-card-tag {
  display: inline-block !important;
  font-family: var(--wp--preset--font-family--jetbrains-mono, monospace) !important;
  font-size: 10px !important; color: var(--wp--preset--color--accent, #34B4A3) !important;
  font-weight: 600 !important; margin-bottom: 14px !important;
  background: rgba(52,180,163,0.08) !important; padding: 4px 12px !important;
  border-radius: 4px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important;
  border: 1px solid rgba(52,180,163,0.20) !important;
}
.work-card h4 { margin-bottom: 8px !important; font-weight: 600 !important; }
.work-card p {
  color: var(--wp--preset--color--muted, #8a95a5) !important;
  font-size: 0.875rem !important; line-height: 1.65 !important;
}

@media (max-width: 900px) {
  .work-grid { grid-template-columns: 1fr !important; }
  .work-card { border-right: none !important; }
}

/* ═══════ CTA SECTION ═══════ */
.cta-section { text-align: center !important; border-top: 1px solid rgba(255,255,255,0.06) !important; }
.cta-section .wp-block-buttons { justify-content: center !important; }

/* ═══════ CONTACT FORM ═══════ */
.contact-form-grid {
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.25rem !important;
}
.contact-form-grid .full-width { grid-column: 1 / -1 !important; }
.contact-field label {
  display: block !important; font-size: 0.75rem !important; font-weight: 600 !important;
  color: #8a95a5 !important; margin-bottom: 6px !important; text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
.contact-field input,
.contact-field textarea {
  width: 100% !important; padding: 12px 16px !important;
  background: #1c2027 !important; border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 8px !important; color: #e8ecf0 !important; font-size: 0.9375rem !important;
  font-family: inherit !important; transition: border-color 0.2s !important;
  box-sizing: border-box !important;
}
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none !important; border-color: #34B4A3 !important;
  box-shadow: 0 0 0 3px rgba(52,180,163,0.15) !important;
}
.contact-submit-btn {
  margin-top: 1.5rem !important; padding: 14px 36px !important;
  background: #34B4A3 !important; color: #0d1820 !important;
  border: none !important; border-radius: 8px !important;
  font-size: 0.95rem !important; font-weight: 600 !important;
  cursor: pointer !important; transition: all 0.25s ease !important;
  box-shadow: 0 0 30px rgba(52,180,163,0.20) !important;
}
.contact-submit-btn:hover {
  box-shadow: 0 0 40px rgba(52,180,163,0.35) !important; transform: translateY(-1px) !important;
}
@media (max-width: 600px) {
  .contact-form-grid { grid-template-columns: 1fr !important; }
}

/* ═══════ BUTTON OVERRIDES ═══════ */
.wp-block-button__link {
  transition: all 0.25s ease !important;
  opacity: 1 !important;
}

/* Primary: teal bg, dark text, glow */
.wp-block-button__link.has-background {
  background-color: #34B4A3 !important;
  color: #0d1820 !important;
  border: none !important;
  box-shadow: 0 0 30px rgba(52,180,163,0.20) !important;
}
.wp-block-button__link.has-background:hover {
  box-shadow: 0 0 40px rgba(52,180,163,0.35) !important;
  transform: translateY(-1px) !important;
  background-color: #40c4b3 !important;
}

/* Secondary: transparent bg, light text, visible border */
.wp-block-button__link.has-border-color {
  background: transparent !important;
  color: #e8ecf0 !important;
  border-style: solid !important;
  border-color: #5a6475 !important;
  border-width: 1.5px !important;
  box-shadow: none !important;
}
.wp-block-button__link.has-border-color:hover {
  border-color: #34B4A3 !important;
  color: #ffffff !important;
  background: rgba(52,180,163,0.08) !important;
  box-shadow: 0 0 20px rgba(52,180,163,0.10) !important;
}

/* ═══════ FOOTER ═══════ */
.site-footer { color: var(--wp--preset--color--light, #e8ecf0) !important; }
.site-footer a { color: var(--wp--preset--color--muted, #8a95a5) !important; text-decoration: none !important; transition: color 0.15s !important; }
.site-footer a:hover { color: var(--wp--preset--color--accent, #34B4A3) !important; }
.site-footer h4 { font-weight: 600 !important; font-size: 0.875rem !important; margin-bottom: 1rem !important; }

.footer-divider { background: rgba(255,255,255,0.08) !important; margin-top: 2rem !important; margin-bottom: 1rem !important; }
.footer-bottom { display: flex !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 1rem !important; font-size: 0.75rem !important; color: var(--wp--preset--color--muted, #8a95a5) !important; }

/* ═══════ WECHAT QR ═══════ */
.wechat-block { text-align: center !important; }
.wechat-block .wechat-qr {
  width: 120px !important; height: 120px !important; margin: 0 auto 1rem !important;
  background: #fff !important; border-radius: 8px !important; padding: 10px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* ═══════ LANGUAGE SWITCHER ═══════ */
.lang-switcher { display: flex !important; align-items: center !important; gap: 4px !important; font-size: 11px !important; font-weight: 600 !important; font-family: var(--wp--preset--font-family--jetbrains-mono, monospace) !important; }
.lang-switcher a { color: var(--wp--preset--color--muted, #8a95a5) !important; text-decoration: none !important; padding: 4px 8px !important; border-radius: 4px !important; }
.lang-switcher a:hover { color: var(--wp--preset--color--light, #e8ecf0) !important; }
.lang-switcher .current-lang, .lang-switcher .lang-item-current a { color: var(--wp--preset--color--accent, #34B4A3) !important; background: rgba(52,180,163,0.10) !important; }

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 768px) {
  .axistech-header { min-height: 72px !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; }
  .hero-cover { min-height: 60vh !important; }
}
@media (max-width: 430px) {
  .axistech-header .wp-block-button { display: none !important; }
}

/* ═══════ EDITOR: hide raw shortcode text in Site Editor ═══════ */
.editor-styles-wrapper .lang-switcher:empty::before,
.editor-styles-wrapper .wp-block-shortcode:empty::before {
  content: "Language Switcher (renders on front-end)";
  display: block; padding: 8px; font-size: 11px; color: #8a95a5;
  border: 1px dashed rgba(255,255,255,0.15); border-radius: 4px;
}