/* ─────────────────────────────────────────────────────────────
   Epitech Africa — visual overrides
   Loaded after wp-inline-styles.css and theme style.css.
   Goals:
     0) Restore missing WP preset tokens (palette, fonts, spacing)
     1) Kill border-radius everywhere (sharp, editorial look)
     2) Add pronounced frosted-glass blur on glassy panels
     3) Support the new `hero_custom` section block
     4) Remove gap between header and content
   ───────────────────────────────────────────────────────────── */

/* Remove gap between header and main content.
   The previous `*:first-child` selector didn't work because Astro injects
   hydration <link> nodes as the first children of .entry-content, so the
   first visual block (hero, section) still inherited WP's default
   block-spacing margin-top. Target the first visible block element by
   tag so <link>/<style>/<script> are skipped. */
.wp-site-blocks > main,
.wp-site-blocks > main > .entry-content,
.wp-site-blocks > main > .entry-content > div:first-of-type,
.wp-site-blocks > main > .entry-content > section:first-of-type,
.wp-site-blocks > main > .entry-content > header:first-of-type,
.wp-site-blocks > main > .entry-content > article:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 0) Missing WordPress preset tokens.
 *
 * The vendored wp-inline-styles.css snapshot does not include the
 * `global-styles-inline-css` block that WP normally emits, so tokens
 * like --wp--preset--color--primary were empty on :root. That made
 * every .has-*-background-color / .has-*-color class resolve to
 * transparent — hero had no background, text lost its palette, fonts
 * fell back to sans-serif, spacing collapsed. Defining them here
 * restores the whole Epitech palette without touching the snapshot.
 *
 * Values mirror the Epitech brandbook (see memory/brandbook_epitech.md).
 */
:root {
  /* Palette */
  --wp--preset--color--primary: #013AFB;
  --wp--preset--color--secondary: #0A1033;
  --wp--preset--color--tertiary: #F2F4F8;
  --wp--preset--color--tech: #2DFFA8;
  --wp--preset--color--together: #FF3377;
  --wp--preset--color--tomorrow: #FF5F3A;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--black: #000000;
  --wp--preset--color--background: #ffffff;
  --wp--preset--color--foreground: #0A1033;

  /* Font families */
  --wp--preset--font-family--primary: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --wp--preset--font-family--secondary: 'Anton', Impact, sans-serif;
  --wp--preset--font-family--body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --wp--preset--font-family--heading: 'Anton', Impact, sans-serif;
  --secondary: 'Anton', Impact, sans-serif;

  /* Font sizes (fluid) */
  --wp--preset--font-size--xs: 0.75rem;
  --wp--preset--font-size--s: 0.875rem;
  --wp--preset--font-size--m: 1rem;
  --wp--preset--font-size--l: 1.25rem;
  --wp--preset--font-size--xl: 1.75rem;
  --wp--preset--font-size--xxl: clamp(2rem, 4vw, 3rem);
  --wp--preset--font-size--heading-xxs: 0.875rem;
  --wp--preset--font-size--heading-xs: 1rem;
  --wp--preset--font-size--heading-s: 1.25rem;
  --wp--preset--font-size--heading-m: 1.75rem;
  --wp--preset--font-size--heading-l: 2.5rem;
  --wp--preset--font-size--heading-xl: clamp(3rem, 6vw, 4.5rem);
  --wp--preset--font-size--body-s: 0.875rem;
  --wp--preset--font-size--body-m: 1rem;
  --wp--preset--font-size--body-l: 1.125rem;
  --wp--preset--font-size--body-xl: 1.25rem;

  /* Spacing scale */
  --wp--preset--spacing--xs: 0.5rem;
  --wp--preset--spacing--s: 1rem;
  --wp--preset--spacing--m: 1.5rem;
  --wp--preset--spacing--l: 2.5rem;
  --wp--preset--spacing--xl: 4rem;
  --wp--preset--spacing--xxl: 6rem;
}

/* Background / text utility classes that reference the tokens.
 * WP normally emits these; our snapshot is missing the ones that map
 * `.has-primary-background-color` → `var(--wp--preset--color--primary)`. */
.has-primary-background-color { background-color: var(--wp--preset--color--primary) !important; }
.has-secondary-background-color { background-color: var(--wp--preset--color--secondary) !important; }
.has-tertiary-background-color { background-color: var(--wp--preset--color--tertiary) !important; }
.has-tech-background-color { background-color: var(--wp--preset--color--tech) !important; }
.has-together-background-color { background-color: var(--wp--preset--color--together) !important; }
.has-tomorrow-background-color { background-color: var(--wp--preset--color--tomorrow) !important; }
.has-white-background-color { background-color: var(--wp--preset--color--white) !important; }

.has-terciary-background-color { background-color: var(--wp--preset--color--tertiary) !important; }
.has-terciary-color { color: var(--wp--preset--color--tertiary) !important; }

.has-primary-color { color: var(--wp--preset--color--primary) !important; }
.has-secondary-color { color: var(--wp--preset--color--secondary) !important; }
.has-tech-color { color: var(--wp--preset--color--tech) !important; }
.has-together-color { color: var(--wp--preset--color--together) !important; }
.has-tomorrow-color { color: var(--wp--preset--color--tomorrow) !important; }
.has-white-color { color: var(--wp--preset--color--white) !important; }


/* 1) No border radius, anywhere inside the portal shell */
.wp-site-blocks *,
.wp-site-blocks *::before,
.wp-site-blocks *::after,
.edms-landing-header *,
.edms-landing-footer * {
  border-radius: 0 !important;
}

/* 2) Stronger frosted blur on glassy surfaces */
.wp-site-blocks .hero-v2 .wp-block-group.has-global-padding,
.wp-site-blocks .hero-home_card,
.wp-site-blocks .hero-custom_card,
.wp-site-blocks .is-glass,
.wp-site-blocks .wp-block-group.is-style-hero-v2 > .wp-block-group {
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* Keep CTA buttons square (override wp pill default) */
.wp-site-blocks .wp-block-button__link,
.wp-site-blocks .wp-element-button {
  border-radius: 0 !important;
}

/* ─── 3) hero_custom block ─────────────────────────────────── */
.hero-custom {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 12vw, 160px) clamp(24px, 5vw, 96px) clamp(64px, 10vw, 128px);
  color: #fff;
  isolation: isolate;
}
.hero-custom__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-custom__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--edms-color-primary, #013AFB);
  /* opacity is set inline via style prop on the element */
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}
.hero-custom__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero-custom__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-custom__tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  text-transform: none;
}
.hero-custom__title {
  font-family: 'Anton', Impact, sans-serif;
  font-size: clamp(2.5rem, 6.5vw, 5.25rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
  max-width: 12ch;
}
.hero-custom__title::after {
  content: '_';
  color: var(--edms-color-accent, #2DFFA8);
  margin-left: 0.05em;
}
.hero-custom__desc {
  max-width: 640px;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  margin: 0;
  opacity: 0.96;
}
.hero-custom__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}
.hero-custom__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 2px solid var(--edms-color-accent, #2DFFA8);
  transition: transform 0.2s ease, background 0.2s ease;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.95rem;
}
.hero-custom__cta--primary {
  background: var(--edms-color-accent, #2DFFA8);
  color: #0a1033;
}
.hero-custom__cta--secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.hero-custom__cta:hover {
  transform: translateY(-2px);
}
/* ─── Scroll reveal for portal sections ───────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .wp-site-blocks .wp-block-group.is-style-section {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
  }
  .wp-site-blocks .wp-block-group.is-style-section.is-visible {
    opacity: 1;
    transform: none;
  }
  /* Stagger KPI cards & salary rows inside a visible section */
  .wp-site-blocks .is-visible .salary-chart__row,
  .wp-site-blocks .is-visible .edms-countup {
    animation: edms-rise 0.7s both;
  }
  .wp-site-blocks .is-visible .salary-chart__row:nth-child(2)  { animation-delay: .05s; }
  .wp-site-blocks .is-visible .salary-chart__row:nth-child(3)  { animation-delay: .10s; }
  .wp-site-blocks .is-visible .salary-chart__row:nth-child(4)  { animation-delay: .15s; }
  .wp-site-blocks .is-visible .salary-chart__row:nth-child(5)  { animation-delay: .20s; }
  .wp-site-blocks .is-visible .salary-chart__row:nth-child(6)  { animation-delay: .25s; }
  .wp-site-blocks .is-visible .salary-chart__row:nth-child(7)  { animation-delay: .30s; }
}
@keyframes edms-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hero-custom__cta:focus-visible {
  outline: 2px solid var(--edms-color-accent, #2DFFA8);
  outline-offset: 3px;
}

/* ─── Hero (Home) typography force ─────────────────────────────────────
 * wp-inline-styles.css has a blanket rule:
 *   p, li, span, a:not(.wp-block-heading), ... { font-family: ... body font }
 * which has higher specificity than the .hero-home_punchline font-family
 * set on the parent div — so every span child of the punchline falls back
 * to the body font. The live portal shell used to patch this with an
 * inline <style> block, but that override never reached the admin
 * preview. Putting the rules here (loaded via editorCssUrls) applies them
 * everywhere the portal blocks render. */
.hero-home_punchline,
.hero-home_punchline > span {
  font-family: 'Anton', sans-serif !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}
.hero-home_signature .tech,
.hero-home_signature .together,
.hero-home_signature .tomorrow,
.hero-home_signature_inner > span {
  font-family: 'Anton', sans-serif !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}

/* ── TableBlock — fee schedules + comparison grids ────────────────────
   The WP theme's default table styles look generic. Pin an Epitech-brand
   header (primary blue), a highlighted tfoot total row, and comfortable
   line rhythm so fee tables read at a glance. */
.edms-table {
  margin: 0 !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.edms-table > table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  table-layout: fixed;
}
.edms-table thead th {
  background: var(--wp--preset--color--primary, #013AFB);
  color: #fff !important;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 14px 18px;
  text-align: center;
  border: none !important;
}
.edms-table thead th.edms-table__col-label {
  text-align: left;
}
.edms-table tbody td {
  padding: 14px 18px;
  border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  text-align: center;
  font-size: 0.95rem;
  color: #0f172a;
}
.edms-table tbody td.edms-table__row-label {
  text-align: left;
  font-weight: 700;
}
.edms-table tfoot td {
  padding: 16px 18px;
  background: rgba(1, 58, 251, 0.04);
  border-top: 2px solid var(--wp--preset--color--primary, #013AFB) !important;
  font-weight: 800;
  font-size: 1rem;
  text-align: center;
  color: var(--wp--preset--color--primary, #013AFB);
}
.edms-table tfoot td.edms-table__row-label {
  text-align: left;
}
.edms-table__caption {
  display: block;
  margin-top: 12px;
  font-size: 0.85rem;
  color: rgba(15, 23, 42, 0.6);
  font-style: italic;
  text-align: center;
}

/* ── Formations section: IBM Plex Sans on large headings per feedback ── */
.wp-block-group.is-style-section h2.has-text-align-center {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
}

/* ── Stats section: numbers in Anton bold ────────────────────────────── */
.edms-countup {
  font-family: 'Anton', Impact, sans-serif !important;
  font-weight: 400 !important;
}

/* Cards-2 heading highlight: theme CSS ships with a hardcoded 153×64 px
   rectangle behind the first heading, which crops longer labels like
   "Organisations internationales" or "Écoles et universités". Let it
   hug the actual text box instead of a fixed size. */
.wp-block-group.is-style-cards-2 > .wp-block-group > .wp-block-heading:first-of-type {
  display: inline-block;
  width: auto;
}
.wp-block-group.is-style-cards-2 > .wp-block-group > .wp-block-heading:first-of-type::before {
  width: 100% !important;
  height: 100% !important;
}

/* ── Responsive table: comfortable on mobile ─────────────────────────── */
@media (max-width: 640px) {
  .edms-table thead th,
  .edms-table tbody td,
  .edms-table tfoot td {
    padding: 10px 10px;
    font-size: 0.82rem;
  }
}

/* ── Admission photos: prefer WebP, ensure consistent aspect ─────── */
.wp-block-group.is-style-section img,
.entry-content .wp-block-image img {
  image-rendering: auto;
  object-fit: cover;
}