/* Eszter -- pszichológus honlap
 *
 * The palette is not invented: the cream, the warm brown and the dark oak were sampled
 * out of the reference Padre sent (image-9), and the olive is the one colour he named in
 * words. Everything else is built from those five, so the page has one family of colours
 * rather than a collection of nice ones.
 *
 * No framework and no build step on purpose -- the site is meant to move to other hosting
 * later, and plain files move by copying.
 */

:root {
  /* Sampled: #fffdf7 ground, #99765c body brown, #573220 oak. Olive is Padre's word. */
  --cream: #fffdf7;
  --sand: #f6efe2;
  --sand-deep: #ece0cc;
  --olive: #6e7b4f;
  --olive-dark: #55603d;
  --oak: #573220;
  --brown: #99765c;
  --text: #3f2e23;
  --white: #ffffff;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(87, 50, 32, 0.08);
  --shadow-lift: 0 16px 40px rgba(87, 50, 32, 0.14);
  /* One measure for body text everywhere. Long lines are the most common reason a
     beautiful page is tiring to read. */
  --measure: 62ch;
  --page: 1180px;
}

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

html {
  scroll-behavior: smooth;
  /* Roughly the height of the two header rows, so an anchor never lands under them. */
  scroll-padding-top: 108px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--oak);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 600;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--olive-dark); }

img { max-width: 100%; height: auto; display: block; }

.wrap { width: min(100% - 40px, var(--page)); margin-inline: auto; }

/* ── Header ───────────────────────────────────────────────────────────────────
   Two rows on a wide screen, the way the reference does it: a quiet utility strip
   with the booking button, then the navigation. On a phone the nav collapses. */

/* The header stays put while the page moves under it. Both rows, deliberately: the
   booking button and the language switch are what a visitor reaches for at any point,
   and a sticky bar that keeps only half of them is the worst of both. */
.siteheader {
  position: sticky;
  top: 0;
  z-index: 50;
  /* A phone with the menu open must still be able to scroll the menu rather than lose
     the bottom of it under the fold. */
  max-height: 100dvh;
  overflow: auto;
  transition: box-shadow 0.2s ease;
}

/* Only once the page has actually moved: a shadow on an unscrolled page is decoration,
   on a scrolled one it is the edge that says the bar is floating above the content. */
.siteheader.is-scrolled { box-shadow: 0 6px 20px rgba(87, 50, 32, 0.1); }

.topstrip {
  background: var(--sand-deep);
  color: var(--oak);
  font-size: 0.86rem;
}

.topstrip__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  min-height: 44px;
}

.topstrip a { color: var(--oak); text-decoration: none; }
.topstrip a:hover { text-decoration: underline; }

.langs { display: flex; gap: 6px; margin-left: 6px; }

.lang {
  border: 1px solid transparent;
  background: transparent;
  color: var(--oak);
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
}
.lang:hover { border-color: var(--oak); }
.lang.is-on { background: var(--olive); border-color: var(--olive); color: var(--white); }

.masthead { background: var(--sand); border-bottom: 1px solid var(--sand-deep); }

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark { width: 42px; height: 42px; flex: none; }
.brand__name { font-family: Georgia, serif; font-size: 1.2rem; color: var(--oak); line-height: 1.15; }
.brand__role { display: block; font-family: inherit; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brown); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.nav a:hover { background: var(--sand); }
.nav a[aria-current="page"] { color: var(--olive-dark); font-weight: 600; }

/* The booking button is the one thing on the page that should always be findable, so
   it is the only filled element in the header. */
.btn {
  display: inline-block;
  border: 1px solid var(--olive);
  background: var(--olive);
  color: var(--white);
  font: inherit;
  font-size: 0.95rem;
  padding: 11px 22px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: var(--olive-dark); border-color: var(--olive-dark); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--olive-dark); }
.btn--ghost:hover { background: var(--sand); color: var(--olive-dark); }
.btn--sand { background: var(--sand-deep); border-color: var(--sand-deep); color: var(--oak); }
.btn--sand:hover { background: var(--brown); border-color: var(--brown); color: var(--white); }
.btn--wide { width: 100%; text-align: center; }

.navtoggle {
  margin-left: auto;
  display: none;
  border: 1px solid var(--sand-deep);
  background: transparent;
  color: var(--oak);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 1.1rem;
  cursor: pointer;
}

@media (max-width: 940px) {
  .navtoggle { display: block; }
  .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-bottom: 10px;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 12px 8px; border-radius: 10px; }
  .nav .btn { text-align: center; margin-top: 8px; }
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

section { padding: 72px 0; }
section.tight { padding: 48px 0; }
.band-sand { background: var(--sand); }
.band-deep { background: var(--sand-deep); }

.section-head { text-align: center; margin-bottom: 42px; }
/* Green headings throughout (Eszter, 2026-08-22): every section title she listed is one
   of these, so the rule is on the wrapper rather than repeated per page. */
.section-head h1, .section-head h2 { color: var(--olive-dark); }
.section-head p { margin-inline: auto; color: var(--brown); }

.lead { font-size: 1.12rem; color: var(--brown); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero { padding: 84px 0 72px; }
.hero__inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.hero__eyebrow { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--olive); margin-bottom: 14px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero__art {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--sand) 0%, var(--sand-deep) 100%);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  color: var(--brown);
  font-size: 0.9rem;
  text-align: center;
  padding: 24px;
  overflow: hidden;
}
.hero__art img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; gap: 34px; }
  /* The frame keeps its portrait shape on a phone.
     It used to turn landscape here (3/2, capped at 380px tall), which was right for the
     placeholder box this frame was built for and wrong for a photograph: measured, only
     47% of the picture's height survived the crop -- head and legs gone, the middle left.
     Bounded by width instead of height, so the shape cannot be squashed: a cap on the
     height with a fixed aspect-ratio just crops again. */
  .hero__art {
    aspect-ratio: 4 / 5;
    max-height: none;
    /* width:100% is not redundant next to max-width. Auto margins make a grid item size
       to its content, and this frame's only child is the absolutely positioned picture,
       which is out of flow -- so its content is nothing, and the frame collapsed to the
       48px of its own padding. Measured at 48x60 before this line went in. */
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }
}

/* ── Cards: the methods grid (image-2) ────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }

.card {
  background: var(--white);
  border: 1px solid var(--sand-deep);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
/* Every second card in the sand tone, like the reference: the alternation is what makes
   a grid of twelve read as a pattern instead of a wall. */
.card:nth-child(even) { background: var(--sand); }
.card h3 { color: var(--olive-dark); margin-bottom: 8px; }
.card p { font-size: 0.95rem; color: var(--brown); flex: 1; max-width: none; }
.card .btn { margin-top: 16px; align-self: flex-start; }
.card__icon { width: 40px; height: 40px; color: var(--olive); margin-bottom: 14px; }

/* ── Topics (image-7): round icon, centred text ───────────────────────────── */

/* Five topics, and at 220px minimum only four fitted on a wide screen -- which left
   the fifth alone on a second row looking like an afterthought. Narrower minimum, so
   the whole set reads as one row, and the wrapping below is unchanged. */
.topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 30px 22px; }
.topic { text-align: center; }
.topic__icon {
  width: 74px; height: 74px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--cream);
  display: grid; place-items: center;
  color: var(--olive);
  box-shadow: var(--shadow);
}
.topic__icon svg { width: 34px; height: 34px; }
.topic h3 { margin-bottom: 6px; }
.topic p { font-size: 0.93rem; color: var(--brown); margin-inline: auto; max-width: 30ch; }
/* Two of the topics are a list of situations rather than a sentence. No bullets: centred
   text with a marker beside it reads as ragged, and the lines are short enough to stand
   on their own. */
.topic__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 30ch;
  font-size: 0.93rem;
  color: var(--brown);
}
.topic__list li { margin-bottom: 4px; }

/* ── Steps (image-3): numbered cards ──────────────────────────────────────── */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.step {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  text-align: center;
  box-shadow: var(--shadow);
}
.step__num {
  width: 44px; height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--white);
  display: grid; place-items: center;
  font-family: Georgia, serif;
  font-size: 1.1rem;
}
.step p { font-size: 0.95rem; color: var(--brown); margin: 0 auto; max-width: 32ch; }

/* ── Phone mockup (image-8) ───────────────────────────────────────────────── */

.about { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: start; }

/* The biography sits beside the phone (Eszter, 2026-08-22) and the studies moved below
   both, so the reading order is: who she is, then what she studied. */
.bio p { color: var(--brown); max-width: 62ch; }
.bio p + p { margin-top: 16px; }
.cv--wide { margin-top: 56px; max-width: 820px; }
/* :last-child, not a bare `ul`: `.cv ul` further down sets margin-bottom: 28px at the
   SAME specificity and later in the file, so the plain rule here never won and the block
   kept 28px under its list. Scoped to the last list so a block with two of them still
   separates them. */
.cv--wide ul:last-child { margin-bottom: 0; }
/* The same block as a section of its own (a "Felsorolás" section from the admin). The
   56px above separates the studies from the bio they sit under; a section already brings
   72px of its own padding, and the two together read as a hole in the page. */
.cv--section { margin-top: 0; }

/* A felsorolás continues the block above it -- Tanulmányaim, then Munkáim, then Szakmai
   gyakorlat read as one run -- so it does not need the 72px a section sets aside for a
   new part of the page. 28 above and below leaves 56px between two of them: the same
   distance the studies already sit at under the bio, about two lines, which is what
   Padre asked for. The :has() rule takes the same off the bottom of whatever a list
   section follows; a browser that does not understand it leaves a bigger gap, never a
   broken one. */
section.section-list { padding-block: 28px; }

/* The alignment a section was given in the admin. It names the parts that set an
   alignment of their own -- a section head is centred by the site's design, a felsorolás
   block is not -- because inheriting would leave those two disagreeing with the rest of
   the section they belong to. */
.align-left, .align-left .section-head, .align-left .prose, .align-left .cv,
.align-center, .align-center .section-head, .align-center .prose, .align-center .cv,
.align-justify, .align-justify .section-head, .align-justify .prose, .align-justify .cv,
.align-right, .align-right .section-head, .align-right .prose, .align-right .cv { text-align: inherit; }
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-justify { text-align: justify; }
.align-right { text-align: right; }
/* A justified heading is a left heading; only the running text is worth justifying. */
.align-justify .section-head, .align-justify .cv h2 { text-align: left; }
/* "Balra húzva" means the block moves to the left, not that the words shift inside a
   column that stays in the middle of the page. The reading measure is kept -- where it
   sits is what the choice is about. Centred and justified keep the centred column. */
.align-left .prose { margin-inline: 0 auto; }
.align-right .prose { margin-inline: auto 0; }
/* Bullets beside centred or right-aligned lines read as ragged -- the topic cards drop
   them for the same reason -- so a list that is not left-aligned loses its markers and
   the indent that went with them. */
.align-center .cv ul, .align-right .cv ul { list-style: none; padding-left: 0; }
section:has(+ section.section-list) { padding-bottom: 28px; }

.phone {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 19;
  border-radius: 42px;
  background: #1b1b1d;
  padding: 12px;
  /* --frame is what the body and the notch are painted with, so one variable changes
     both and they cannot drift apart. */
  background: var(--frame, #1b1b1d);
  box-shadow: var(--shadow-lift);
  position: relative;
}
/* The notch. Drawn rather than imaged so it costs nothing and never loads late. */
.phone::before {
  content: "";
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  width: 96px; height: 18px;
  border-radius: 999px;
  background: var(--frame, #1b1b1d);
  z-index: 2;
}
.phone__screen {
  width: 100%; height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(160deg, #2b4a4a, #16232b);
  display: grid; place-items: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px;
}
/* <picture> is an inline box with no height of its own, so an <img> inside it asking for
   height:100% resolves against nothing and falls back to its natural size -- which left
   the photo floating in the middle of the phone with dark bands above and below. The
   wrapper has to be told to fill the screen before the image can. */
.phone__screen picture { display: block; width: 100%; height: 100%; }

/* The mat around the hero photo, positioned rather than padded.
   Measured, twice, because two earlier attempts looked right and were not: with the
   photo as a grid item asking for height:100%, the frame gave 24px of mat on three
   sides and 0.3px on the bottom -- the percentage height resolved one padding short.
   Insetting the picture from the frame's edges states the mat directly and cannot come
   out uneven, whatever the frame's aspect-ratio or box-sizing does.
   The frame keeps its padding as well: it is still what centres the placeholder text on
   a page that has no photo yet. */
.hero__art { position: relative; --mat: 24px; }
.hero__art picture {
  position: absolute;
  inset: var(--mat);
  display: block;
}
.hero__art img { border-radius: var(--radius); }
.phone__screen img, .phone__screen video { width: 100%; height: 100%; object-fit: cover; }
.phone--olive { --frame: var(--olive); }

.cv h2 { margin-top: 0; }
.cv h2 + ul { margin-top: -4px; }
.cv ul { margin: 0 0 28px; padding-left: 20px; }
.cv li { margin-bottom: 10px; color: var(--brown); }
/* The 10px belongs BETWEEN the entries, not under the last one, where it collapses out
   of the block and turns up as extra space under it. */
.cv li:last-child { margin-bottom: 0; }
.cv li strong { color: var(--text); font-weight: 600; }
.cv .sub { font-size: 0.95rem; color: var(--text); margin-bottom: 6px; }

@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; gap: 34px; justify-items: center; }
  .cv { justify-self: stretch; }
}

/* ── Form (image-4) ───────────────────────────────────────────────────────── */

.formcard {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow);
  max-width: 720px;
  margin-inline: auto;
}

.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font-size: 0.88rem; color: var(--brown); margin-bottom: 6px; }
.field .req { color: var(--olive); }

.field input, .field textarea, .field select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--sand);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--olive);
  background: var(--white);
}
.field textarea { min-height: 130px; resize: vertical; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.form-actions { display: flex; justify-content: flex-end; gap: 12px; align-items: center; }

.form-note { font-size: 0.85rem; color: var(--brown); margin-top: 14px; }

.formstatus { margin-top: 16px; font-size: 0.95rem; }
.formstatus.is-ok { color: var(--olive-dark); }
.formstatus.is-bad { color: #a4402a; }

/* The honeypot: a field a person never sees and a bot fills in. Hidden without
   display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Prices ───────────────────────────────────────────────────────────────── */

.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
/* One fee, so the auto-fit grid would stretch it across the whole page. Centred at a
   card's width instead. */
.prices--single { grid-template-columns: minmax(0, 340px); justify-content: center; }

.terms { max-width: 680px; margin: 34px auto 0; }
.terms p { color: var(--brown); }
.terms p + p { margin-top: 12px; }
.terms strong { color: var(--oak); }
.terms__note { font-size: 0.9rem; }
.price {
  background: var(--white);
  border: 1px solid var(--sand-deep);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
}
/* Qualified with .price on purpose: `.price p` above is more specific than a lone class,
   so the unqualified rule lost and the fee rendered at body size in brown. */
.price .price__amount { font-family: Georgia, serif; font-size: 1.9rem; color: var(--olive-dark); margin: 6px 0 4px; }
.price .price__unit { font-size: 0.85rem; color: var(--brown); }
.price p { margin-inline: auto; font-size: 0.93rem; color: var(--brown); }

/* ── Footer (image-5) ─────────────────────────────────────────────────────── */

.footer { background: var(--sand-deep); color: var(--oak); padding: 26px 0 14px; }
.footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px 40px; }
.footer h4 { font-family: Georgia, serif; font-size: 1rem; margin: 0 0 8px; color: var(--oak); }
.footer p, .footer li { font-size: 0.92rem; color: var(--oak); opacity: 0.85; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 6px; }
.footer a { color: var(--oak); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

.footer__row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.footer__row svg { width: 22px; height: 22px; flex: none; color: var(--oak); opacity: 0.75; margin-top: 2px; }

.footer__bottom {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(87, 50, 32, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
  font-size: 0.83rem;
  opacity: 0.8;
}

@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr; gap: 30px; } }

/* Anything the site does not know yet is marked rather than faked, so a placeholder
   can never be mistaken for a decision. */
.todo {
  background: rgba(110, 123, 79, 0.1);
  border-left: 3px solid var(--olive);
  padding: 2px 8px;
  border-radius: 4px;
}

/* The visitor count in the footer. Quiet on purpose: it is a sign of life on the page,
   not a claim, and on a psychologist's site a loud number would be the wrong note. */
.visitors { font-size: 0.85rem; opacity: 0.75; }
.visitors strong { font-weight: 600; }

/* A run of text in a section that came from the admin rather than from a template. The
   same measure as everywhere else on the site: long lines are the most common reason a
   beautiful page is tiring to read. */
.prose { max-width: var(--measure); margin-inline: auto; }
.prose p + p { margin-top: 16px; }