/* Endo en Zo Academy website, version 1 ("dark mesh").
   Built from the Design & Brand Book: Reflex Blue #0000FF, Black 3 #1D1D1B, Cool Grey 1 #ECEAEC,
   ink-2 #4A4A48, rule #D9D6D9. Headlines Inter Tight 700/800, copy Poppins 400-700.
   Most layout lives in inline styles carried over from the design canvas; this file holds the fonts,
   the shared tokens, the responsive rules and the classes used by the legal pages. */

@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/inter-tight-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/inter-tight-800.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/poppins-700.woff2') format('woff2'); }

:root {
  --ez-blue: #0000FF;
  --ez-black: #1D1D1B;
  --ez-grey: #ECEAEC;
  --ez-ink-2: #4A4A48;
  --ez-rule: #D9D6D9;
  /* The mesh from the brand book covers: black, lit by a blue glow from the lower right.
     The glow is sized by the screen width and pinned to the bottom-right corner, never by the height of
     the text, so it looks the same in Dutch and English. */
  --ez-mesh: radial-gradient(ellipse 70% clamp(780px, 64vw, 960px) at 90% calc(100% - max(5vw, 70px)), #3D40FF 0%, #3437F2 16%, #2A2BD7 30%, #1B1C9D 48%, #0D0D54 66%, rgba(5, 5, 20, 0) 84%), #050403;
  color-scheme: light;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #FFFFFF; color: var(--ez-black); font-family: Poppins, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--ez-blue); }
a:hover { color: #0000B8; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Keyboard focus: blue on light backgrounds, white on the dark bands. */
:focus-visible { outline: 3px solid var(--ez-blue); outline-offset: 3px; }
.ez-dark :focus-visible { outline-color: #FFFFFF; }
.ez-dark .ez-light :focus-visible { outline-color: var(--ez-blue); }
#content:focus { outline: none; }

.ez-skip { position: absolute; left: 16px; top: -64px; z-index: 10; padding: 12px 18px; border-radius: 999px; background: #FFFFFF; color: var(--ez-blue); font-weight: 600; text-decoration: none; }
.ez-skip:focus { top: 16px; }

/* Hero: same block, headline, buttons and glow in Dutch and English. The minimum heights fit the
   longer language at every width (measured 320-1920px); the two buttons share one fixed size. */
.ez-hero { display: flex; flex-direction: column; min-height: clamp(655px, 42.75vw + 161px, 800px); }
.ez-hero-inner { flex: 1 0 auto; display: flex; flex-direction: column; width: calc(100% - 2 * clamp(20px, 5vw, 80px)); }
.ez-hero-content { flex: 1 0 auto; display: flex; flex-direction: column; }
.ez-hero-row { flex: 1 0 auto; align-content: space-between; }
.ez-hero-ctas a { width: 196px; box-sizing: border-box; border: 1.5px solid transparent; }
@media (max-width: 960px) { .ez-hero { min-height: 650px; } }
@media (max-width: 480px) {
  .ez-hero { min-height: calc(976px - 69vw); }
  .ez-hero-ctas { width: 100%; flex-wrap: nowrap !important; }
  .ez-hero-ctas a { width: auto; flex: 1 1 0; min-width: 0; padding: 6px 10px !important; text-align: center; line-height: 1.15; }
}
/* Below 350px the longer label wraps to two lines: one fixed height keeps both languages equal. */
@media (max-width: 349px) { .ez-hero-ctas a { height: 56px; } }

/* Navigation: full links on wide screens; below 961px the menu button takes over and the bar keeps
   only the other language. Phones get a slightly smaller logo so the bar fits at 360px. */
@media (max-width: 960px) {
  .ez-nav-links, .ez-nav-cta, .ez-lang-extra { display: none !important; }
  .ez-nav-menu { display: inline-flex !important; }
}
@media (min-width: 961px) { .ez-mobile-menu { display: none !important; } }
@media (max-width: 480px) {
  .ez-logo { height: 28px !important; }
  .ez-footer-contact { grid-column: 1 / -1; } /* room for the email address on one line */
}
.ez-nav-menu .ez-icon-open, .ez-nav-menu .ez-icon-close { display: inline-flex; }
.ez-nav-menu .ez-icon-close { display: none; }
.ez-nav-menu[aria-expanded="true"] .ez-icon-open { display: none; }
.ez-nav-menu[aria-expanded="true"] .ez-icon-close { display: inline-flex; }

/* Sign-up form: the honeypot field stays out of sight; people never fill it, bots usually do. */
.ez-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.ez-signup button[disabled] { opacity: 0.6; cursor: progress; }

/* Facts still to be confirmed are shown in square brackets on a grey chip. */
.ez-tbc { padding: 1px 6px; border-radius: 4px; background: var(--ez-grey); color: var(--ez-black); }

/* Legal pages (terms, privacy, complaints, cookies). */
.ez-band { background: var(--ez-black); color: #FFFFFF; }
.ez-wrap { max-width: 1280px; margin: 0 auto; padding-left: clamp(20px, 5vw, 80px); padding-right: clamp(20px, 5vw, 80px); box-sizing: border-box; }
.ez-band > .ez-wrap { padding-top: 24px; padding-bottom: 24px; }
.ez-page-head { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 64px); }
.ez-crumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; font-size: 14px; line-height: 1.4; color: var(--ez-ink-2); }
.ez-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ez-ink-2); }
.ez-crumbs [aria-current] { color: var(--ez-black); }
.ez-legal-h1 { margin: clamp(24px, 3vw, 40px) 0 0; font-family: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; font-weight: 800; font-size: clamp(40px, 5.4vw, 80px); line-height: 0.98; letter-spacing: -0.045em; color: var(--ez-black); text-wrap: balance; }
.ez-legal-lead { margin: clamp(24px, 3vw, 32px) 0 0; max-width: 40em; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; color: var(--ez-black); }
.ez-legal-meta { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--ez-ink-2); }
.ez-lang-note { margin: 24px 0 0; max-width: 40em; padding: 14px 18px; border-left: 4px solid var(--ez-blue); background: var(--ez-grey); font-size: 15px; line-height: 1.55; color: var(--ez-black); }
.ez-legal-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px clamp(40px, 6vw, 112px); padding-bottom: clamp(88px, 10vw, 140px); }
.ez-legal-nav { flex: 1 1 220px; max-width: 280px; min-width: 0; padding-top: 24px; border-top: 1px solid var(--ez-black); }
.ez-legal-nav p { margin: 0 0 8px; font-weight: 700; font-size: 15px; line-height: 1.4; color: var(--ez-black); }
.ez-legal-nav ul { list-style: none; margin: 0; padding: 0; }
.ez-legal-nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; color: var(--ez-ink-2); text-decoration: none; }
.ez-legal-nav a:hover { color: var(--ez-blue); }
.ez-legal-nav a[aria-current] { font-weight: 600; color: var(--ez-blue); }
.ez-legal-nav a[aria-current]::before { content: ""; width: 4px; height: 20px; background: var(--ez-blue); }
/* The text comes from Markdown: 14px between paragraphs and lists, 48px before each new heading. */
.ez-legal-article { flex: 3 1 560px; min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid var(--ez-rule); }
.ez-legal-article > h2:not(:first-child) { margin-top: 34px; }
.ez-legal-article h2 { margin: 0; font-family: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.025em; color: var(--ez-black); }
.ez-legal-article p, .ez-legal-article li { font-size: 17px; line-height: 1.7; color: var(--ez-ink-2); }
.ez-legal-article p { margin: 0; }
.ez-legal-article ul, .ez-legal-article ol { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 6px; }
.ez-legal-article li > ul { margin-top: 6px; }
.ez-legal-article strong { color: var(--ez-black); font-weight: 600; }
.ez-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ez-legal-article table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.55; color: var(--ez-ink-2); }
.ez-legal-article th { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ez-black); text-align: left; vertical-align: bottom; font-weight: 600; color: var(--ez-black); }
.ez-legal-article td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--ez-rule); vertical-align: top; }

/* Not-found page */
.ez-404 { padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(88px, 10vw, 140px); }
.ez-404 p { max-width: 36em; font-size: 18px; line-height: 1.6; color: var(--ez-ink-2); }
