/* fonts.css */
/* Webfonts — the four families the live site actually loads (audited 2026-08-25).
   Google Fonts CSS is imported rather than self-hosted; drop in local @font-face
   binaries later without touching any other file. */
:root{
  /* Roboto — the workhorse: body copy, nav, buttons, forms. 16px/600 is the single most common pairing on the site. */
  --font-body:"Roboto",-apple-system,"Helvetica Neue",Arial,sans-serif;
  /* Cardo — serif for headings and long-form editorial text (18px body-serif, 36px titles). */
  --font-display:"Cardo",Georgia,"Times New Roman",serif;
  /* Kalam — the handwriting voice; matches the signature logo. Short accent lines only. */
  --font-script:"Kalam","Segoe Script",cursive;
  /* Montserrat — heavy display headings (24px/800). Used sparingly, for section titles. */
  --font-accent:"Montserrat","Roboto",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;
}
/* colors.css */
:root{
  /* Base — warm paper & ink. The palette is deliberately near-monochrome; photographs carry the colour. */
  --paper:#FAF7F2;
  --paper-2:#F3EDE5;
  --paper-3:#EAE2D7;
  --ink-1:#16130F;
  --ink-2:#3A342D;
  --ink-3:#6E655B;
  --ink-4:#A79C8F;
  --line-1:#DED5C8;
  --line-2:#C9BEAE;
  --white:#FFFFFF;
  --black:#000000;

  /* Accents — muted, earthy, taken from the natural-light imagery */
  --clay-100:#F1E5DA;
  --clay-300:#D8BCA4;
  --clay-500:#A9825F;
  --clay-700:#7C5C3F;
  --sage-100:#E7EAE3;
  --sage-300:#B9C2B0;
  --sage-500:#8A9384;
  --rose-100:#F3E3E0;
  --rose-500:#B07C74;

  /* CTA blue — the brand's action colour, taken from the live site */
  --cta-100:#E7EBF3;
  --cta-300:#9EACC9;
  --cta-500:#455B8F;
  --cta-600:#384973;
  --cta-700:#2B3958;

  /* Semantic aliases — always prefer these in components */
  --surface-page:var(--paper);
  --surface-card:var(--white);
  --surface-muted:var(--paper-2);
  --surface-inverse:var(--ink-1);
  --surface-accent:var(--clay-100);

  --text-heading:var(--ink-1);
  --text-body:var(--ink-2);
  --text-muted:var(--ink-3);
  --text-faint:var(--ink-4);
  --text-inverse:var(--paper);
  --text-accent:var(--clay-700);
  --text-link:var(--ink-1);
  --text-link-hover:var(--cta-500);

  --border-hairline:var(--line-1);
  --border-strong:var(--line-2);
  --border-ink:var(--ink-1);

  --action-fg:var(--ink-1);
  --action-bg:transparent;
  --action-border:var(--ink-1);
  --action-fg-inverse:var(--paper);
  --action-bg-inverse:var(--cta-500);
  --action-bg-inverse-hover:var(--cta-600);

  --focus-ring:var(--cta-500);
  --status-success:var(--sage-500);
  --status-warning:#C08A3E;
  --status-error:var(--rose-500);

  --overlay-scrim:rgba(22,19,15,.55);
  --overlay-veil:rgba(250,247,242,.82);
}
/* typography.css */
:root{
  /* Sizes observed on the live site: 36 / 25 / 24 / 18 / 16 px, with 45px and 80px leadings. */
  --text-display-1:clamp(40px,6vw,64px);
  --text-display-2:clamp(30px,4.5vw,44px);
  --text-title-1:36px;   /* Cardo 36/45 */
  --text-title-2:25px;   /* Roboto 25/25.6 */
  --text-title-3:24px;   /* Montserrat 24/28.8 · weight 800 */
  --text-body-lg:18px;   /* Cardo or Kalam 18/25.6 */
  --text-body:16px;      /* Roboto 16/25.6 · weight 600 */
  --text-body-sm:14px;
  --text-caption:12px;
  --text-eyebrow:11px;

  --leading-tight:1.1;
  --leading-title:1.25;   /* 45 / 36 */
  --leading-body:1.6;     /* 25.6 / 16 — the site's dominant line-height */
  --leading-serif:1.42;   /* 25.6 / 18 */
  --leading-loose:1.9;
  --leading-script:1.45;  /* 26.1 / 18 */
  --leading-flush:1;      /* 16 / 16 — tight UI rows */

  --weight-light:300;     /* Kalam */
  --weight-regular:400;   /* Cardo */
  --weight-medium:500;
  --weight-semibold:600;  /* Roboto default on this site */
  --weight-bold:700;      /* Cardo bold */
  --weight-black:800;     /* Montserrat headings */

  --tracking-tight:-0.01em;
  --tracking-normal:0;
  --tracking-wide:0.08em;
  --tracking-eyebrow:0.18em;
  --tracking-nav:0.1em;

  --measure-prose:64ch;
  --measure-narrow:46ch;
}
/* spacing.css */
:root{
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px; --space-11:192px;

  --gutter-page:clamp(20px,6vw,72px); /* @kind spacing */
  --section-y:clamp(64px,10vw,128px); /* @kind spacing */
  --stack-tight:var(--space-2);
  --stack-body:var(--space-4);
  --stack-block:var(--space-6);
  --grid-gap:var(--space-3);
  --content-max:1180px;
  --content-narrow:720px;

  --radius-none:0;
  --radius-sm:2px;
  --radius-pill:999px;
}
/* elevation.css */
:root{
  /* Shadows are rare and always soft, warm and low-contrast — never a UI drop shadow. */
  --shadow-none:none;
  --shadow-photo:0 18px 48px -24px rgba(22,19,15,.28);
  --shadow-card:0 1px 2px rgba(22,19,15,.04),0 12px 32px -20px rgba(22,19,15,.18);
  --shadow-raised:0 24px 64px -28px rgba(22,19,15,.34);
  --ring-focus:0 0 0 1px var(--paper),0 0 0 3px color-mix(in oklab,var(--cta-500) 55%,transparent);
  --border-thin:1px solid var(--border-hairline);
  --border-ink-thin:1px solid var(--border-ink);
}
/* motion.css */
:root{
  --dur-fast:140ms; /* @kind other */
  --dur-base:260ms; /* @kind other */
  --dur-slow:520ms; /* @kind other */
  --dur-reveal:900ms; /* @kind other */
  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-out-soft:cubic-bezier(.16,.84,.44,1); /* @kind other */
  --ease-in-out-soft:cubic-bezier(.5,0,.5,1); /* @kind other */
  /* No bounce, no spring, no scale-up. Motion is fade + a few px of drift. */
  --drift-y:12px;
}
/* base.css */
html{-webkit-font-smoothing:antialiased;text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-body);font-weight:var(--weight-semibold);line-height:var(--leading-body)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);font-weight:var(--weight-regular);line-height:var(--leading-title);margin:0}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--border-strong);transition:color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
a:hover{color:var(--text-link-hover);border-color:var(--clay-500)}
img{display:block;max-width:100%}
*,*::before,*::after{box-sizing:border-box}
::selection{background:var(--cta-100);color:var(--ink-1)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:1ms!important}}
/* ---- Landing page ---- */
body{margin:0;background:var(--surface-page)}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
img.slot{display:block;width:100%;height:100%;object-fit:cover}

/* Button (DS: Button primary) */
.btn{font-family:var(--font-body);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;border-radius:var(--radius-none);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);text-decoration:none;line-height:1;font-size:var(--text-body-sm);background:var(--cta-500);color:var(--action-fg-inverse);border:1px solid var(--cta-500);transition:background-color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);text-align:center}
.btn:hover{background:var(--cta-600);border-color:var(--cta-600);color:var(--action-fg-inverse)}
.btn-md{padding:15px 30px}
.btn-lg{padding:19px 42px}
.btn-full{width:100%}

.ornament{border:0;border-top:1px solid var(--border-strong);margin:0}

.badge{font-family:var(--font-body);font-size:var(--text-eyebrow);letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:6px 12px;border-radius:var(--radius-none);display:inline-block;line-height:1}
.badge-neutral{color:var(--text-muted);border:1px solid var(--border-hairline);background:transparent}
.badge-accent{color:var(--clay-700);border:1px solid var(--clay-300);background:var(--clay-100)}

/* SectionHeading */
.sh{display:flex;flex-direction:column;gap:var(--space-4);text-align:left;align-items:flex-start}
.eyebrow{font-family:var(--font-body);font-size:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-faint);font-weight:var(--weight-regular);display:block}
.sh-title{font-family:var(--font-display);font-size:var(--text-title-1);font-weight:var(--weight-regular);line-height:var(--leading-title);color:var(--text-heading);margin:0}
.sh-lede{font-family:var(--font-body);font-size:var(--text-body-lg);line-height:var(--leading-body);color:var(--text-body);max-width:var(--measure-prose);margin:0;font-weight:var(--weight-semibold)}

/* Testimonial */
.testimonial{margin:0;display:flex;flex-direction:column;gap:var(--space-5);text-align:left;align-items:flex-start;max-width:var(--measure-narrow)}
.testimonial p{font-family:var(--font-display);font-size:var(--text-title-3);font-style:italic;font-weight:var(--weight-regular);line-height:var(--leading-title);color:var(--text-heading);margin:0}
.testimonial footer{font-family:var(--font-body);font-size:var(--text-caption);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-faint)}

/* FaqItem */
.faq{border-top:1px solid var(--border-hairline)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-5) 0;font-family:var(--font-display);font-size:var(--text-title-3);color:var(--text-heading)}
.faq summary::-webkit-details-marker{display:none}
.faq-icon{font-family:var(--font-body);font-size:var(--text-body-lg);color:var(--text-faint);transition:transform var(--dur-base) var(--ease-standard)}
.faq[open] .faq-icon{transform:rotate(45deg)}
.faq-body{padding-bottom:var(--space-6);max-width:var(--measure-prose);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-body);font-weight:var(--weight-regular)}

/* Mobile */
@media (max-width:720px){
  :root{--text-title-1:30px;--text-title-3:21px}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .btn-lg{padding:17px 24px;width:100%}
}
@media (max-width:420px){
  .gallery{grid-template-columns:1fr!important}
  .gallery .span2{grid-column:auto!important}
  [style*="minmax(340px"],[style*="minmax(320px"],[style*="minmax(300px"]{grid-template-columns:1fr!important}
}

/* ---- Karácsonyi landing: ismétlődő elemek ---- */
.sec{padding:var(--section-y) var(--gutter-page)}
.wrap{max-width:var(--content-max);margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-7)}
.wrap-narrow{max-width:var(--content-narrow);margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-5)}
.txt{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-body);margin:0;text-wrap:pretty}
.txt strong{font-weight:var(--weight-semibold);color:var(--text-heading)}
.serif{font-family:var(--font-display);font-size:var(--text-body-lg);line-height:var(--leading-serif);color:var(--text-heading);margin:0;text-wrap:pretty}
.card{background:var(--surface-card);border:1px solid var(--border-hairline);padding:var(--space-6)}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-5)}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));column-gap:var(--space-7);row-gap:var(--space-6)}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:baseline}
.steps .num{font-family:var(--font-display);font-size:var(--text-body-sm);font-style:italic;color:var(--text-faint)}
.steps strong{font-family:var(--font-accent);font-weight:var(--weight-black);font-size:var(--text-body);color:var(--text-heading);display:block;margin-bottom:var(--space-2)}

.pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-5)}
.pkg{background:var(--surface-card);border:1px solid var(--border-hairline);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
.pkg-featured{background:var(--surface-accent);border-color:var(--clay-300)}
.pkg-head{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.pkg-price{font-family:var(--font-display);font-size:var(--text-title-1);color:var(--text-heading);line-height:1}
.pkg-meta{font-family:var(--font-body);font-size:var(--text-body-sm);color:var(--text-muted)}
.pkg hr{border:0;border-top:1px solid var(--border-strong);width:100%;margin:0}
.incl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.incl li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text-body)}
.incl li::before{content:"—";color:var(--text-faint)}
.incl strong{font-weight:var(--weight-semibold);color:var(--text-heading)}
.pkg-for{font-family:var(--font-display);font-style:italic;font-size:var(--text-body);line-height:var(--leading-serif);color:var(--text-muted);margin:0}
.pkg .cta{margin-top:auto}

.slots{display:flex;flex-direction:column}
.slot-row{display:grid;grid-template-columns:1fr auto;gap:var(--space-4);align-items:center;border-top:1px solid var(--border-hairline);padding:var(--space-5) 0}
.slot-row:last-child{border-bottom:1px solid var(--border-hairline)}
.slot-date{display:block;font-family:var(--font-display);font-size:var(--text-title-3);color:var(--text-heading)}
.slot-place{display:block;margin-top:var(--space-1);font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--text-body-sm);color:var(--text-muted)}
.slot-state{font-family:var(--font-body);font-size:var(--text-caption);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-faint)}

.list-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.list-lines li{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-body);border-top:1px solid var(--border-hairline);padding-top:var(--space-4)}
.list-lines strong{font-weight:var(--weight-semibold);color:var(--text-heading)}

@media (max-width:720px){
  .hero-photo{bottom:38%!important;-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)}
  .hero-img{object-position:70% 20%!important}
  .slot-row{grid-template-columns:1fr;gap:var(--space-2)}
}
@media (max-width:420px){
  .steps,.pkgs,.grid-cards{grid-template-columns:1fr}
}

/* Záró sáv: mottó kézírásos betűvel */
.alairas{font-family:var(--font-script);font-weight:var(--weight-light);font-size:28px;line-height:var(--leading-script);color:var(--clay-300);margin:calc(var(--space-3) * -1) 0 0}