/*
Theme Name: iStart Child - Officina 365
Template: istart
Description: Child theme per Officina 365 con SEO, Schema Markup e accessibilità WCAG 2.1 AA
Version: 2.0.0
Author: Officina 365
Text Domain: istart-child
*/

/* ========================================
   OFFICINA 365 - MODERN DESIGN SYSTEM
   ======================================== */

:root {
  --o365-primary: #008DE3;
  --o365-primary-dark: #0070b8;
  --o365-primary-light: #e6f3fc;
  --o365-primary-glow: rgba(0, 141, 227, 0.35);
  --o365-dark: #0f1419;
  --o365-dark-soft: #1a1f25;
  --o365-gray-50: #f9fafb;
  --o365-gray-100: #f3f4f6;
  --o365-gray-200: #e5e7eb;
  --o365-gray-300: #d1d5db;
  --o365-gray-500: #6b7280;
  --o365-gray-700: #374151;
  --o365-gray-900: #111827;
  --o365-white: #ffffff;
  --o365-radius: 16px;
  --o365-radius-sm: 10px;
  --o365-radius-xs: 6px;
  --o365-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --o365-shadow: 0 4px 24px rgba(0,0,0,0.06);
  --o365-shadow-lg: 0 12px 40px rgba(0,0,0,0.1);
  --o365-shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
  --o365-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --o365-transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}


/* =============================================
   1. TYPOGRAPHY (Inter from Google Fonts)
   ============================================= */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--o365-gray-700);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.heading {
  font-family: 'Inter', sans-serif !important;
  letter-spacing: -0.025em;
  color: var(--o365-gray-900);
}

h1 { font-weight: 800 !important; }
h2 { font-weight: 700 !important; }
h3, h4 { font-weight: 600 !important; }

p, .wpb_text_column {
  color: var(--o365-gray-500);
  font-size: 16px;
  line-height: 1.75;
}


/* =============================================
   2. SCROLL REVEAL ANIMATIONS
   ============================================= */

.o365-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.o365-reveal.o365-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =============================================
   3. HERO SECTION - Animated Gradient Overlay
   ============================================= */

.o365-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--o365-dark) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Page-specific hero backgrounds */
.page-id-4771 .o365-hero { background-image: url('/wp-content/uploads/2025/stock/hero-gommista.jpg') !important; }
.page-id-4773 .o365-hero { background-image: url('/wp-content/uploads/2025/stock/hero-meccanico.jpg') !important; }
.page-id-4775 .o365-hero { background-image: url('/wp-content/uploads/2025/stock/hero-revisioni.jpg') !important; }
.page-id-75 .o365-hero   { background-image: url('/wp-content/uploads/2025/stock/sede-foligno.jpg') !important; }

.o365-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 15, 20, 0.88) 0%,
    rgba(0, 100, 180, 0.65) 50%,
    rgba(10, 15, 20, 0.90) 100%
  );
  background-size: 200% 200%;
  animation: heroGradient 8s ease infinite;
  z-index: 1;
}

.o365-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0,141,227,0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0,141,227,0.15) 0%, transparent 50%);
  z-index: 1;
}

@keyframes heroGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.o365-hero > .vc_column-inner,
.o365-hero .vc_column-inner,
.o365-hero .wpb_wrapper {
  position: relative;
  z-index: 2;
}

.o365-hero h1,
.o365-hero .heading h1,
.o365-hero .heading h2,
.o365-hero [class*="heading"] h1,
.o365-hero [class*="heading"] h2 {
  color: #ffffff !important;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.5),
    0 4px 40px rgba(0, 141, 227, 0.3) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

.o365-hero .heading p,
.o365-hero .wpb_text_column p {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.o365-hero .btn {
  position: relative;
  z-index: 2;
}


/* =============================================
   4. GLASSMORPHISM CARDS
   ============================================= */

.card-container,
.wpb_content_element .card-container {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: var(--o365-radius) !important;
  box-shadow: var(--o365-shadow) !important;
  transition: var(--o365-transition) !important;
  overflow: hidden;
}

.card-container:hover {
  box-shadow: var(--o365-shadow-lg), 0 0 0 1px var(--o365-primary-glow) !important;
  transform: translateY(-6px);
  border-color: rgba(0, 141, 227, 0.2) !important;
}

/* Cards on gray background get white glass */
.vc_row[style*="background-color: #f8f9fa"] .card-container,
.vc_row[style*="background-color: #f3f4f6"] .card-container,
.vc_row[style*="background-color:#f8f9fa"] .card-container {
  background: rgba(255, 255, 255, 0.85) !important;
}


/* =============================================
   5. BUTTONS - Gradient + Micro-animations
   ============================================= */

.btn,
.wpb_content_element .btn,
a.btn {
  border-radius: var(--o365-radius-sm) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  padding: 14px 36px !important;
  transition: var(--o365-transition) !important;
  text-transform: none !important;
  font-size: 15px !important;
  position: relative;
  overflow: hidden;
}

/* Primary button - gradient */
.btn-style-0,
.btn.btn-style-0 {
  background: linear-gradient(135deg, var(--o365-primary) 0%, var(--o365-primary-dark) 100%) !important;
  border: none !important;
  color: var(--o365-white) !important;
  box-shadow: 0 4px 15px rgba(0,141,227,0.3) !important;
}

.btn-style-0:hover,
.btn.btn-style-0:hover {
  background: linear-gradient(135deg, var(--o365-primary-dark) 0%, var(--o365-primary) 100%) !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0,141,227,0.45) !important;
}

.btn-style-0:active,
.btn.btn-style-0:active {
  transform: translateY(0) scale(0.98);
}

/* Ghost button - fill on hover */
.btn-style-10,
.btn.btn-style-10 {
  border: 2px solid var(--o365-white) !important;
  color: var(--o365-white) !important;
  background: transparent !important;
}

.btn-style-10:hover,
.btn.btn-style-10:hover {
  background: var(--o365-white) !important;
  color: var(--o365-dark) !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(255,255,255,0.2) !important;
}

/* Ghost on white background */
.vc_row:not([style*="background-color: #1c"]):not([style*="background-color:#1c"]):not(.o365-hero) .btn-style-10 {
  border-color: var(--o365-primary) !important;
  color: var(--o365-primary) !important;
}

.vc_row:not([style*="background-color: #1c"]):not([style*="background-color:#1c"]):not(.o365-hero) .btn-style-10:hover {
  background: var(--o365-primary) !important;
  color: var(--o365-white) !important;
}


/* =============================================
   6. COUNTERS - Decorated
   ============================================= */

.counter {
  font-weight: 800 !important;
  font-family: 'Inter', sans-serif !important;
}

.card-container .counter {
  position: relative;
  display: inline-block;
}

.card-container .counter::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--o365-primary), transparent);
  border-radius: 2px;
  margin: 10px auto 0;
}

@keyframes counterPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.card-container:hover .counter {
  animation: counterPulse 0.6s ease;
}


/* =============================================
   7. IMAGES - Hover zoom + shadow
   ============================================= */

.vc_single_image,
.wpb_single_image {
  overflow: hidden;
  border-radius: var(--o365-radius);
}

.vc_single_image img,
.wpb_single_image img {
  border-radius: var(--o365-radius);
  transition: var(--o365-transition) !important;
}

.vc_single_image:hover img,
.wpb_single_image:hover img {
  transform: scale(1.04);
  box-shadow: var(--o365-shadow-lg);
}


/* =============================================
   8. WAVE SEPARATORS (dark sections)
   ============================================= */

.vc_row[style*="background-color: #1c1f23"],
.vc_row[style*="background-color:#1c1f23"],
.vc_row[style*="background-color: #0f1419"],
.vc_row[style*="background-color:#0f1419"] {
  position: relative;
  z-index: 1;
}

.vc_row[style*="background-color: #1c1f23"]::before,
.vc_row[style*="background-color:#1c1f23"]::before,
.vc_row[style*="background-color: #0f1419"]::before,
.vc_row[style*="background-color:#0f1419"]::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30'%3E%3Cpath fill='%231c1f23' d='M0,30 C360,0 720,0 1080,15 C1260,22 1380,30 1440,30 L1440,30 L0,30 Z'/%3E%3C/svg%3E") no-repeat bottom center;
  background-size: 100% 100%;
  z-index: 2;
}

.vc_row[style*="background-color: #1c1f23"]::after,
.vc_row[style*="background-color:#1c1f23"]::after,
.vc_row[style*="background-color: #0f1419"]::after,
.vc_row[style*="background-color:#0f1419"]::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30'%3E%3Cpath fill='%231c1f23' d='M0,0 L1440,0 C1440,0 1380,8 1080,15 C720,30 360,30 0,0 Z'/%3E%3C/svg%3E") no-repeat top center;
  background-size: 100% 100%;
  z-index: 2;
}


/* =============================================
   9. ICON CONTAINERS
   ============================================= */

.icon-container {
  transition: var(--o365-transition);
}

.icon-container:hover {
  transform: translateY(-6px);
}


/* =============================================
   10. LINKS IN CONTENT
   ============================================= */

.wpb_text_column a:not(.btn) {
  color: var(--o365-primary);
  text-decoration: none;
  font-weight: 500;
  background-image: linear-gradient(var(--o365-primary), var(--o365-primary));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
  padding-bottom: 1px;
}

.wpb_text_column a:not(.btn):hover {
  background-size: 100% 2px;
}


/* =============================================
   11. LISTS - Custom bullets
   ============================================= */

.wpb_text_column ul {
  list-style: none;
  padding-left: 0;
}

.wpb_text_column ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  line-height: 1.65;
}

.wpb_text_column ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--o365-primary);
  opacity: 0.7;
}


/* =============================================
   12. SECTION BACKGROUNDS - Enhanced
   ============================================= */

.vc_row[style*="background-color: #f8f9fa"],
.vc_row[style*="background-color:#f8f9fa"] {
  background-color: var(--o365-gray-50) !important;
}

/* Dark CTA sections */
.vc_row[style*="background-color: #1c1f23"],
.vc_row[style*="background-color:#1c1f23"] {
  background: linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #0f1419 100%) !important;
}

.vc_row[style*="background-color: #1c1f23"] h2,
.vc_row[style*="background-color:#1c1f23"] h2 {
  font-weight: 800 !important;
}


/* =============================================
   13. ACCENT LABELS (uppercase subtitles)
   ============================================= */

/* Style for the small uppercase labels above headings */
h5[style*="text-transform: uppercase"],
p[style*="text-transform: uppercase"],
.heading[style*="text-transform: uppercase"] {
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
}


/* =============================================
   14. SCROLLBAR (Webkit)
   ============================================= */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--o365-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--o365-gray-300);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--o365-primary);
}


/* =============================================
   15. RESPONSIVE
   ============================================= */

@media (max-width: 991px) {
  .o365-hero {
    min-height: 400px;
  }

  .o365-hero h1 {
    font-size: 32px !important;
  }
}

@media (max-width: 767px) {
  .o365-hero {
    min-height: 320px;
  }

  .o365-hero h1 {
    font-size: 26px !important;
  }

  .card-container {
    margin-bottom: 16px;
  }

  .btn {
    width: 100% !important;
    text-align: center !important;
    padding: 14px 24px !important;
  }
}


/* =============================================
   16. ACCESSIBILITY (reduced motion)
   ============================================= */

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

  .o365-hero::before {
    animation: none !important;
  }

  .card-container,
  .icon-container,
  .btn,
  .vc_single_image img {
    transition: none !important;
  }

  .card-container:hover,
  .icon-container:hover {
    transform: none;
  }

  html {
    scroll-behavior: auto !important;
  }
}