/*
Theme Name:   Atsali Cromatica Child
Theme URI:    https://atsali-steel.com/
Description:  Child theme του Avada για το microsite Cromatica (ψηφιακή εκτύπωση σε χάλυβα) της Atsali Steel.
Author:       Atsali Steel
Author URI:   https://atsali-steel.com/
Template:     Avada
Version:      1.5.0
Text Domain:  atsali-cromatica
*/

/* Keep the header logos at the intended size on the Cromatica template only. */
body.page-template-page-cromatica-php header img[alt="Atsali Steel"] {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  object-fit: contain !important;
}

body.page-template-page-cromatica-php header img[alt="Cromatica"] {
  display: block !important;
  width: auto !important;
  height: 24px !important;
  max-width: min(240px, 32vw) !important;
  max-height: 24px !important;
  object-fit: contain !important;
}

/*
 * Exact Cromatica typography from the Lovable microsite.
 * These rules are deliberately scoped to this page template so Avada's
 * typography settings cannot override them or affect the rest of the site.
 */
body.page-template-page-cromatica-php {
  --cromatica-text: oklch(0.98 0.005 240);
  --cromatica-muted-text: oklch(0.78 0.02 260);
  --cromatica-accent-text: oklch(0.72 0.22 32);
  --cromatica-navy-text: oklch(0.16 0.05 275);
  color: var(--cromatica-text) !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground,
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground p,
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground li,
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground label,
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground input,
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground textarea,
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground button,
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground a {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
}

body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground h1,
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground h2,
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground h3,
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground h4 {
  color: var(--cromatica-text) !important;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.02em !important;
}

body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-foreground {
  color: var(--cromatica-text) !important;
}

body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-muted-foreground {
  color: var(--cromatica-muted-text) !important;
}

body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-primary {
  color: var(--cromatica-accent-text) !important;
}

body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-brand-navy {
  color: var(--cromatica-navy-text) !important;
}

body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-foreground\/90 {
  color: color-mix(in oklab, var(--cromatica-text) 90%, transparent) !important;
}

body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-foreground\/80 {
  color: color-mix(in oklab, var(--cromatica-text) 80%, transparent) !important;
}

body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-cromatica-gradient {
  background-image: linear-gradient(
    92deg,
    oklch(0.75 0.19 55) 0%,
    oklch(0.68 0.24 350) 35%,
    oklch(0.55 0.22 295) 65%,
    oklch(0.78 0.15 210) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground input::placeholder,
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground textarea::placeholder {
  color: var(--cromatica-muted-text) !important;
  opacity: 1 !important;
}

/* Exact Lovable type scale. Scoped so Avada cannot alter this microsite. */
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground {
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-\[10px\] { font-size: 10px !important; line-height: 1.5 !important; }
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-\[11px\] { font-size: 11px !important; line-height: 1.5 !important; }
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-5xl { font-size: 3rem !important; line-height: 1 !important; }
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .text-7xl { font-size: 4.5rem !important; line-height: 1 !important; }
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .font-medium { font-weight: 500 !important; }
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .font-semibold { font-weight: 600 !important; }
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .font-bold { font-weight: 700 !important; }
body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .leading-\[1\.05\] { line-height: 1.05 !important; }

@media (min-width: 768px) {
  body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .md\:text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
  body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .md\:text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
  body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .md\:text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
  body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .md\:text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
  body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .md\:text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
  body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .md\:text-5xl { font-size: 3rem !important; line-height: 1 !important; }
  body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .md\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
  body.page-template-page-cromatica-php .min-h-screen.bg-background.text-foreground .md\:text-7xl { font-size: 4.5rem !important; line-height: 1 !important; }
}

@media (max-width: 767px) {
  body.page-template-page-cromatica-php header img[alt="Atsali Steel"] {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
  }

  body.page-template-page-cromatica-php header img[alt="Cromatica"] {
    height: 20px !important;
    max-width: 180px !important;
    max-height: 20px !important;
  }
}