/* DLUX Academy — design tokens (global: desktop + mobile)
   Source: docs/02_Fisiere_Tehnice/homepage-design-tokens.css */

:root {
  --dlux-white: #FFFFFF;
  --dlux-blush: #FDEDE8;
  --dlux-cream: #FAF7F2;
  --dlux-beige: #E2D5B7;
  --dlux-rose: #D8B7B0;
  --dlux-rose-deep: #B8928A;
  --dlux-brown: #221410;

  --dlux-font: "Roboto Serif", Georgia, serif;
  --dlux-page-gutter: clamp(20px, 6.15vw, 24px);
  --dlux-section-space: clamp(48px, 14vw, 64px);
  --dlux-gap-xs: 8px;
  --dlux-gap-sm: 12px;
  --dlux-gap-md: 16px;
  --dlux-gap-lg: 24px;
  --dlux-radius-sm: 14px;
  --dlux-radius-card: 24px;
  --dlux-radius-pill: 999px;
  --dlux-control-height: 56px;
  --dlux-border: 1px solid var(--dlux-beige);
  --dlux-shadow-soft: 0 10px 28px rgba(34, 20, 16, 0.10);

  --dlux-fs-eyebrow: 12px;
  --dlux-fs-body: 16px;
  --dlux-fs-small: 13px;
  --dlux-fs-button: 16px;
  --dlux-fs-h1: clamp(30px, 8.2vw, 34px);
  --dlux-fs-h2: clamp(28px, 7.7vw, 32px);
  --dlux-lh-body: 1.55;

  /* Legacy aliases used by existing header/block CSS */
  --cream: var(--dlux-white);
  --beige: var(--dlux-beige);
  --beige2: #EDE3CE;
  --rose: var(--dlux-rose);
  --deep: var(--dlux-rose-deep);
  --blush: var(--dlux-blush);
  --dark: var(--dlux-brown);
  --mid: #7A5A52;
  --lite: var(--dlux-cream);
  --serif: var(--dlux-font);
  --sans: var(--dlux-font);

  --student-work-card-width: clamp(280px, 76vw, 300px);
  --student-work-card-aspect-ratio: 2 / 3;
  --student-work-next-card-peek: 56px;
  --student-work-caption-min-height: 18%;
}

body {
  color: var(--dlux-brown);
  font-family: var(--dlux-font);
  font-size: var(--dlux-fs-body);
  line-height: var(--dlux-lh-body);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 16;
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea,
.entry-content,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.dlux-global-header-wrapper,
.dlux-global-header-wrapper *,
.dlux-footer,
.dlux-footer *,
[class*="dlux-"],
[id^="dlux-"] {
  font-family: var(--dlux-font) !important;
}

/* Keep pure icon glyphs readable when using system symbol fonts */
.dlux-f-socials a,
.dlux-wa-icon,
.dlux-header-actions svg,
.nav-toggle svg {
  font-family: inherit !important;
}

/* —— Homepage section titles: identical scale (spec 2.1) —— */
body.home .entry-content h1,
body.page-id-30 .entry-content h1,
body.home .dlux-hero-text h1,
body.page-id-30 .dlux-hero-text h1,
body.home .dlux-stats-section h1,
body.page-id-30 .dlux-stats-section h1 {
  font-family: var(--dlux-font) !important;
  font-size: var(--dlux-fs-h1) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: 0.01em;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 36;
}

/* Academy intro: eyebrow sits tight above H1 (mockup ~6–8px, not Kadence 1.5em) */
body.home .dlux-hero-text .academy-eyebrow,
body.page-id-30 .dlux-hero-text .academy-eyebrow,
body.home .academy-stats-wrap .academy-eyebrow,
body.page-id-30 .academy-stats-wrap .academy-eyebrow {
  display: block;
  font-family: var(--dlux-font) !important;
  font-size: var(--dlux-fs-eyebrow) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dlux-rose-deep);
  margin: 0 0 6px !important;
  line-height: 1.3;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 12;
}

body.home .dlux-hero-text h1,
body.page-id-30 .dlux-hero-text h1,
body.home .single-content .dlux-hero-text h1,
body.page-id-30 .single-content .dlux-hero-text h1 {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

/* Section H2 only — same size everywhere (exclude hero slider captions) */
body.home .dlux-courses-h2,
body.home .discover-h2,
body.home .dlux-fb-title,
body.home .dlux-why-header h2,
body.home .dlux-rev-heading,
body.home .dlux-cta-title1,
body.home .dlux-cta-title2,
body.home .dlux-blog-title,
body.home .dlux-insta-title,
body.home .dlux-section-title,
body.home .dlux-newsletter h2,
body.home .dlux-final-cta-v2 h2,
body.home .dlux-student-works .dlux-section-title,
body.page-id-30 .dlux-courses-h2,
body.page-id-30 .discover-h2,
body.page-id-30 .dlux-fb-title,
body.page-id-30 .dlux-why-header h2,
body.page-id-30 .dlux-rev-heading,
body.page-id-30 .dlux-cta-title1,
body.page-id-30 .dlux-cta-title2,
body.page-id-30 .dlux-blog-title,
body.page-id-30 .dlux-insta-title,
body.page-id-30 .dlux-section-title,
body.page-id-30 .dlux-newsletter h2,
body.page-id-30 .dlux-final-cta-v2 h2 {
  font-family: var(--dlux-font) !important;
  font-size: var(--dlux-fs-h2) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: 0.01em;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 32;
}

/* Card / nested titles */
body.home .entry-content .dlux-sw-label,
body.home .entry-content h3,
body.page-id-30 .entry-content h3 {
  font-family: var(--dlux-font) !important;
}

/* Hero slider captions: Roboto Serif, keep display scale */
body.home .custom-hero-slider .ch-content h2,
body.page-id-30 .custom-hero-slider .ch-content h2 {
  font-family: var(--dlux-font) !important;
  font-weight: 700 !important;
}

/* Homepage: remove Kadence gray side gutters (body #F7FAFC + container padding) */
body.home,
body.page-template-default.page-id-30,
body.page-id-30 {
  background: var(--dlux-white) !important;
}

body.home .content-container.site-container,
body.page-id-30 .content-container.site-container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.home .content-area,
body.page-id-30 .content-area {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.home .entry-content-wrap,
body.page-id-30 .entry-content-wrap {
  padding: 0 !important;
}

body.home .entry.content-bg,
body.page-id-30 .entry.content-bg {
  box-shadow: none !important;
  background: var(--dlux-white) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.home .site-main,
body.page-id-30 .site-main {
  margin-top: 0 !important;
}

/* Legacy style.css used -6em pull-ups for the old Kadence header.
   With the fixed custom header + spacer, those create a visible gap. */
body.home .custom-hero-slider,
body.page-id-30 .custom-hero-slider {
  top: 0 !important;
}

body.home .entry-hero,
body.page-id-30 .entry-hero,
body.home .entry-header,
body.page-id-30 .entry-header {
  display: none !important;
}

/* Avoid 100vw scrollbar slivers once container is full-bleed */
body.home .entry-content,
body.page-id-30 .entry-content {
  overflow-x: clip;
}

body.home .entry-content .alignfull,
body.page-id-30 .entry-content .alignfull,
body.home .entry-content .alignwide,
body.page-id-30 .entry-content .alignwide,
body.home .custom-hero-slider.alignfull,
body.page-id-30 .custom-hero-slider.alignfull {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  transform: none !important;
}

body.home [id$="-wrapper"],
body.page-id-30 [id$="-wrapper"] {
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}

.dlux-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dlux-control-height);
  padding: 0 28px;
  border: none;
  border-radius: var(--dlux-radius-pill);
  font: 600 var(--dlux-fs-button) / 1 var(--dlux-font);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}

.dlux-pill-rose {
  background: var(--dlux-rose);
  color: var(--dlux-white);
}

.dlux-pill-dark {
  background: var(--dlux-brown);
  color: var(--dlux-white);
}

.dlux-pill:focus-visible,
.dlux-global-header-wrapper a:focus-visible,
.dlux-global-header-wrapper button:focus-visible {
  outline: 2px solid var(--dlux-rose-deep);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}