/* enterai.hu. Decisions in docs/style.md: white and black only, the brush stroke is the one emphasis,
   one idea per screen, no boxes or cards, three motions and nothing else. */

/* ---- Tokens ------------------------------------------------------------------------------------------------- */

:root {
  --paper: #ffffff;
  --ink: #000000;
  --ink-quiet: rgb(0 0 0 / 0.62);        /* secondary text: the same black, lighter, not a second colour */
  --rule: rgb(0 0 0 / 0.14);             /* hairlines between rows */

  --font-head: "Saira Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;

  /* type scale: body 17 to 18 px, headings fluid */
  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --step-3: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);
  --step-4: clamp(3rem, 2rem + 4.5vw, 6rem);

  /* spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 10rem;

  --gutter: clamp(1rem, 4vw, 3rem);
  --measure: 60ch;
  --column: 46rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --brush: url("assets/brush.svg");
  --brush-button: url("assets/brush-button.svg");
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #000000;
    --ink: #ffffff;
    --ink-quiet: rgb(255 255 255 / 0.66);
    --rule: rgb(255 255 255 / 0.2);
  }
}

/* ---- Base --------------------------------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--space-4);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.selectable { user-select: all; -webkit-user-select: all; color: var(--ink); }

.link-button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.link-button:hover { text-decoration-thickness: 2px; }

/* ---- The brush stroke: underline, divider, button ---------------------------------------------------------- */
/* The stroke under the logo's letters (assets/brush.svg), used as a mask so it takes the text colour. */

.brush-under {
  position: relative;
  white-space: nowrap;
}
.brush-under::after {
  content: "";
  position: absolute;
  left: -0.1em; right: -0.14em;
  bottom: -0.3em;
  height: 0.38em;
  background: currentColor;
  -webkit-mask: var(--brush) center / 100% 100% no-repeat;
  mask: var(--brush) center / 100% 100% no-repeat;
}
h3 .brush-under::after { bottom: -0.16em; height: 0.24em; }

.brush-line {
  height: 14px;
  width: min(100%, 22rem);
  background: currentColor;
  -webkit-mask: var(--brush) center / 100% 100% no-repeat;
  mask: var(--brush) center / 100% 100% no-repeat;
}

/* The button uses assets/brush-button.svg: the stroke's thick first part, solid, its end tapered. Its solid body
   (ragged left edge and tapered tip left out) runs from 0.10 to 0.85 of its width, and the body's middle sits at
   0.47 of its height. The button's own box is that body: even padding round the label, the stroke stretched so
   its body spans the box exactly (left -0.10/0.75, right -0.15/0.75 of the box width), the ragged edge and the
   tip reaching out beyond it. Saira's cap middle sits on the line box's middle, so the label is centred too. */
.button {
  display: inline-block;
  position: relative;
  min-width: 4.6em;
  padding: 0.5em 0.9em;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--step-1);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--paper);
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
}
.button::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.47 * 2.6em);
  left: calc(-100% * 0.10 / 0.75);
  right: calc(-100% * 0.15 / 0.75);
  height: 2.6em;
  z-index: -1;
  background: var(--ink);
  -webkit-mask: var(--brush-button) center / 100% 100% no-repeat;
  mask: var(--brush-button) center / 100% 100% no-repeat;
}
.button:hover { text-decoration: underline; text-decoration-thickness: 2px; }
/* The focus ring goes round the whole stroke, ragged edge and tip included, not just the button's box. */
.button:focus-visible { outline: none; }
.button:focus-visible::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.47 * 2.6em - 6px);
  height: calc(2.6em + 12px);
  left: calc(-100% * 0.10 / 0.75 - 8px);
  right: calc(-100% * 0.15 / 0.75 - 8px);
  border: 2px solid var(--ink);
}
.button[disabled] { opacity: 0.5; cursor: progress; }
.button-small { font-size: var(--step-0); }
.section-cta .button,
.contact-form .button { margin-bottom: 0.4em; }   /* room for the stroke, which runs below the button's box */

/* ---- Top bar ------------------------------------------------------------------------------------------------ */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--gutter);
}
.topbar-mark { display: block; line-height: 0; }
.topbar-mark img { width: 48px; height: auto; }
.topnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.topnav a {
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
}
.topnav a:hover,
.topnav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.nav-toggle {
  display: none;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--step-1);
  color: var(--ink);
  background: none;
  border: 0;
  padding: var(--space-1) 0;
  cursor: pointer;
}

@media (max-width: 52rem) {
  .js .nav-toggle { display: block; }
  .js .topnav { display: none; width: 100%; }
  .js .topnav.is-open { display: block; }
  .topnav ul { flex-direction: column; padding: var(--space-3) 0 var(--space-4); gap: var(--space-3); }
  .topnav a { font-size: var(--step-1); }
}

@media (prefers-color-scheme: dark) {
  .topbar-mark img, .page-head img { filter: invert(1); }   /* an <img> SVG cannot take currentColor */
}

/* ---- Hero --------------------------------------------------------------------------------------------------- */

.hero {
  min-height: calc(100vh - 5rem);
  min-height: calc(100svh - 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-5), 6vh, var(--space-7));
  padding: var(--space-5) var(--gutter) var(--space-7);
  text-align: center;
}

.logo {
  display: block;
  width: clamp(150px, 18vw, 230px);
  height: auto;
  color: var(--ink);
}

/* "MEG" on the left; the three lines on the right run from the top of the M to the foot of the G.
   Both boxes are trimmed to cap height and baseline with the fonts' own metrics (hhea, units per em 1000):
   Saira Condensed ascent 1.135, descent 0.439, cap 0.688; Nunito ascent 1.011, descent 0.353, cap 0.705.
   Three Nunito lines at line-height 1.2 measure 2 x 1.2 + 0.705 = 3.105 em from cap top to last baseline,
   so their size is 0.688 / 3.105 of MEG's. */
.meg {
  --S: clamp(6.5rem, 3rem + 9vw, 11rem);
  display: grid;
  grid-template-columns: auto auto;
  align-items: start;
  column-gap: calc(var(--S) * 0.09);
  text-align: left;
}
.meg-root {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--S);
  line-height: 1;
  letter-spacing: 0.01em;
  margin: calc(var(--S) * -0.160) 0 calc(var(--S) * -0.152);
}
.meg-list {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--S) * 0.2216);
  line-height: 1.2;
  margin: -0.224em 0 -0.271em;
}

.tagline {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.4;
  max-width: var(--measure);
}

/* Phones keep the same lockup (each line reads MEG + word), only smaller. The whole lockup is 2.675 x S wide
   (MEG 1.658, gap 0.09, "tanítjuk." 0.927, measured), so S at 0.34 of the space between the gutters fills about
   91 % of it; capped at the desktop minimum, so it meets the desktop size at the breakpoint. */
@media (max-width: 40rem) {
  .meg { --S: min(6.5rem, (100vw - 2 * var(--gutter)) * 0.34); }
}

/* ---- Sections ----------------------------------------------------------------------------------------------- */

.section,
.page-intro {
  max-width: calc(var(--column) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(5rem, 14vh, var(--space-8)) var(--gutter);
}
.page-intro { padding-top: clamp(3rem, 10vh, var(--space-7)); }
.section h2 { font-size: var(--step-3); margin-bottom: var(--space-5); }
.page-intro h1 { font-size: var(--step-4); margin-bottom: var(--space-5); }
.section p,
.page-intro p { margin: 0 0 var(--space-4); max-width: var(--measure); }
.lead { font-size: var(--step-1); line-height: 1.5; }
.one-line { font-size: var(--step-1); font-weight: 800; line-height: 1.4; }
.note { color: var(--ink-quiet); }

.brush-list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}
.brush-list li {
  position: relative;
  padding-left: 2.1em;
  margin-bottom: var(--space-3);
  max-width: var(--measure);
}
.brush-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 1.3em;
  height: 0.32em;
  background: currentColor;
  -webkit-mask: var(--brush) left center / 100% 100% no-repeat;
  mask: var(--brush) left center / 100% 100% no-repeat;
}

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0 0 var(--space-5);
  padding: 0;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  align-items: center;            /* the number's middle sits on the middle of the whole text block */
  margin-bottom: var(--space-4);
  max-width: calc(var(--measure) + 3.4rem);
}
.steps li::before {
  content: counter(step);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--step-2);
  line-height: 1;
}

.three-item + .three-item { margin-top: var(--space-6); }
.three-item h3,
.work h3 { font-size: var(--step-2); margin-bottom: var(--space-4); }
.work { margin-bottom: var(--space-6); }

/* the four packages: rows divided by hairlines, the whole row is the link */
.packages {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}
.package {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rule);
}
.package:last-child { border-bottom: 1px solid var(--rule); }
.package h3 { font-size: var(--step-2); }
.package h3 a { text-decoration: none; }
.package h3 a::after { content: ""; position: absolute; inset: 0; }
.package h3::after { content: "\2192"; display: inline-block; margin-left: 0.3em; font-weight: 600; }
.package:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; }
.package-price {
  margin: 0 !important;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--step-2);
  white-space: nowrap;
}
.package-desc { grid-column: 1 / -1; margin: var(--space-3) 0 0 !important; }
.package-notes p { margin-bottom: var(--space-4); }

@media (max-width: 40rem) {
  .package { grid-template-columns: 1fr; }
  .package-price { margin-top: var(--space-2) !important; }
}

.price-line {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--step-2);
  line-height: 1.2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4em;
}
.price-name { font-weight: 600; }

/* an amount and its "+ ÁFA": one line; the VAT note in the body font, smaller and lighter */
.amount { white-space: nowrap; }
.vat {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8em;
  letter-spacing: 0;
  color: var(--ink-quiet);
}
.price-line .vat,
.package-price .vat { font-size: 0.5em; }
h1 .vat { font-size: 0.28em; }
.section-cta { text-align: left; }
.section-cta .button { margin-top: var(--space-3); }

/* ---- Contact form ------------------------------------------------------------------------------------------- */

.contact-form { max-width: 36rem; }
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-weight: 700; margin-bottom: var(--space-1); }
.field input[type="text"],
.field input[type="email"],
.field textarea {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  padding: 0.45em 0;
}
.field textarea { resize: vertical; min-height: 7.5em; }
.field input:focus-visible,
.field textarea:focus-visible { outline: none; border-bottom-width: 4px; padding-bottom: calc(0.45em - 2px); }
.field-check { display: flex; gap: var(--space-3); align-items: flex-start; }
.field-check input { width: 1.25em; height: 1.25em; margin: 0.2em 0 0; flex: none; accent-color: var(--ink); }
.field-check label { font-weight: 400; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status,
.form-result { font-size: var(--step-1); font-weight: 800; max-width: 36rem; }
.form-status:empty { display: none; }
/* without JavaScript, kapcsolat.php sends the browser back to #urlap-kesz or #urlap-hiba */
.form-result { display: none; }
.form-result:target { display: block; }
.contact:has(#urlap-kesz:target) .contact-form { display: none; }
/* both lines take focus only so screen readers read them out; they are not controls, so no ring */
.form-status:focus-visible,
.form-result:focus-visible { outline: none; }

/* ---- Footer ------------------------------------------------------------------------------------------------- */

.site-footer {
  padding: var(--space-7) var(--gutter) var(--space-6);
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  text-align: center;
  font-size: var(--step--1);
  color: var(--ink-quiet);
}
.site-footer p { margin: 0; max-width: 40rem; }
.site-footer .brush-line { color: var(--ink); margin-bottom: var(--space-4); }
.footer-about { color: var(--ink); }
.company { color: var(--ink-quiet); margin-top: var(--space-6) !important; }
.company span { white-space: nowrap; }
.with-portrait .portrait {
  float: right;
  width: min(40%, 320px);
  height: auto;
  margin: 0 0 var(--space-4) var(--space-5);
  filter: grayscale(1);
}
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); }

/* ---- Cookie bar --------------------------------------------------------------------------------------------- */

.cookie-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-3) var(--gutter);
  background: var(--paper);
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; max-width: 40rem; }
.cookie-actions { display: flex; gap: 2.4em; }   /* room for the strokes' tips and ragged edges between the two */

/* ---- Text pages (impresszum, adatkezelés) ------------------------------------------------------------------- */

.page {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) var(--space-7);
}
.page h1 { font-size: var(--step-3); margin-bottom: var(--space-5); }
.prose h2 { font-size: var(--step-2); margin: var(--space-6) 0 var(--space-4); }
.prose p { margin: 0 0 var(--space-4); }
.muted { color: var(--ink-quiet); font-size: var(--step--1); }
.facts { margin: 0 0 var(--space-4); }
.facts div { padding: var(--space-3) 0; border-top: 1px solid var(--rule); }
.facts div:last-child { border-bottom: 1px solid var(--rule); }
.facts dt { font-weight: 800; }
.facts dd { margin: 0; }
@media (min-width: 40rem) {
  .facts div { display: grid; grid-template-columns: 12rem 1fr; gap: var(--space-4); }
}

/* ---- Motion: only under .motion, which the head script sets when reduced motion is not asked for ------------ */

/* 1. The logo draws itself once: the mask strokes are drawn in writing order, then the wordmark is swept in.
   The whole hero is in place within about 2 seconds: MEG by 1.3 s, the last word by 1.7 s, the tagline by 1.8 s. */
.motion .logo-mark { mask: url(#logo-reveal-mark); }
.motion .logo-word { mask: url(#logo-reveal-word); }
.motion .logo.is-drawn .logo-mark,
.motion .logo.is-drawn .logo-word { mask: none; }
.motion .logo .reveal {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.001;
  animation: draw 0.35s var(--ease-out) forwards;
}
.motion .logo .reveal:nth-child(1) { animation-delay: 0.05s; animation-duration: 0.4s; }
.motion .logo .reveal:nth-child(2) { animation-delay: 0.2s; }
.motion .logo .reveal:nth-child(3) { animation-delay: 0.32s; }
.motion .logo .reveal:nth-child(4) { animation-delay: 0.45s; animation-duration: 0.4s; }
.motion .logo .reveal:nth-child(5) { animation-delay: 0.6s; }
.motion .logo .reveal:nth-child(6) { animation-delay: 0.7s; }
.motion .logo .reveal.reveal-word { animation-delay: 0.75s; animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* the hero's words: "MEG" comes in and stays, the three lines follow one after another */
.motion .meg-root,
.motion .meg-list > span,
.motion .tagline {
  opacity: 0;
  transform: translateY(0.35em);
  animation: rise 0.5s var(--ease-out) forwards;
}
.motion .meg-root { transform: translateY(0.08em); }
.motion .tagline { transform: translateY(12px); }
.motion .meg-root { animation-delay: 0.8s; }
.motion .meg-list > span:nth-child(1) { animation-delay: 0.95s; }
.motion .meg-list > span:nth-child(2) { animation-delay: 1.07s; }
.motion .meg-list > span:nth-child(3) { animation-delay: 1.19s; }
.motion .tagline { animation-delay: 1.3s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* the hero's underline draws after the tagline, on a timer: the hero is always in view on load */
.motion .hero .brush-under::after {
  clip-path: inset(0 100% 0 0);
  animation: wipe 0.5s cubic-bezier(0.45, 0, 0.2, 1) 1.6s forwards;
}
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }

/* 2. Sections fade and rise in on scroll. main.js adds .reveal-ready, then .is-in per element as it comes into view;
   the transition sits on .is-in only, so hiding at start is instant and only the way in is animated. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
.reveal-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

/* 3. Brush underlines and lines (outside the hero) draw across when they come into view. A clipped element never
   counts as in view, so main.js watches an underline's own span (the clip is on ::after) and a line's parent. */
.reveal-ready main > :not(.hero) .brush-under::after,
.reveal-ready .brush-line { clip-path: inset(0 100% 0 0); }
.reveal-ready main > :not(.hero) .brush-under.is-in::after,
.reveal-ready .is-in > .brush-line {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.8s cubic-bezier(0.45, 0, 0.2, 1) 0.4s;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}