/*
Theme Name: WebBloomm Higany
Theme URI: https://webbloomm.com
Author: WebBloomm, Ondrik Martin Bendegúz e.v.
Description: A WebBloomm saját, egyedi témája. Grafit alap, folyékony króm kiemelés. Oldalépítő nélkül, gyorsra hangolva.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: webbloomm
*/

/* ---------------------------------------------------------
   WebBloomm — "Higany" design system
   Egyetlen vizuális világ: grafit alap, folyékony króm kiemelés.
   Szándékosan egytémás: a króm átmenet világos alapon elveszik.
   --------------------------------------------------------- */

:root{
  /* a dizájn útmutató négy alapszíne */
  --higany:#E6E6E6;      /* fő szín — higany / chrome */
  --grey:#6B6B6B;        /* másodlagos — címkék, ikonok */
  --light:#F5F5F5;       /* világos felületek */

  --void:#0F0F10;        /* háttér */
  --void-2:#131315;
  --panel:#17171A;
  --panel-2:#1E1E21;
  --line:#26262A;
  --line-2:#36363B;
  --ink:#F5F5F5;
  --ink-2:#B4B4B8;       /* törzsszöveg — a #6B6B6B ehhez túl sötét lenne */
  --muted:#6B6B6B;
  --ice:#E6E6E6;
  --ice-dim:#8E8E93;
  --chrome:linear-gradient(135deg,#FFFFFF 0%,#D6D6D6 14%,#8A8A8A 30%,#F4F4F4 46%,#A8A8A8 62%,#FDFDFD 76%,#8E8E8E 90%,#E2E2E2 100%);
  --chrome-type:linear-gradient(102deg,#FFFFFF 0%,#DCDCDC 20%,#FCFCFC 38%,#C2C2C2 56%,#F8F8F8 74%,#D2D2D2 90%,#FFFFFF 100%);
  --chrome-soft:linear-gradient(135deg,#EDEDED 0%,#A8A8A8 40%,#F5F5F5 70%,#949499 100%);
  --hair:linear-gradient(90deg,transparent 0%,#3A3A3F 22%,#6B6B6B 50%,#3A3A3F 78%,transparent 100%);
  --radius:18px;
  --maxw:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none !important; transition:none !important} }

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ambient mercury glow, painted once behind everything */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(230,230,230,.085), transparent 62%),
    radial-gradient(700px 460px at 8% 6%, rgba(255,255,255,.045), transparent 60%);
}
.page{position:relative; z-index:1}

h1,h2,h3,h4{
  margin:0;
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-weight:500;
  letter-spacing:-.012em;
  line-height:1.1;
  text-wrap:balance;
}
p{margin:0}
a{color:var(--ice); text-decoration:none}
a{text-underline-offset:3px}
a:hover{color:#FFFFFF; text-decoration:underline}
:focus-visible{outline:2px solid var(--ice); outline-offset:3px; border-radius:4px}

.shell{max-width:var(--maxw); margin:0 auto; padding-inline:22px}
.sec{padding-block:clamp(64px,9vw,110px)}
.sec + .sec{padding-top:0}

.chrome-text{
  color:var(--ink);
  background-image:var(--chrome-type);
  background-size:100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){ .chrome-text{-webkit-text-fill-color:currentColor} }

.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:20px;
}
.rule{height:1px; background-image:var(--hair); border:0; margin:0}

/* ---------- header ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(8,9,11,.78);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex; align-items:center; gap:16px; height:74px}
.brand{display:flex; align-items:center; gap:11px; flex:none}
.brand .mark{width:36px; height:36px; display:block; flex:none}
.brand .wordmark{height:34px; width:auto; display:block}
@media (max-width:420px){ .brand .wordmark{height:27px} .brand .mark{width:30px; height:30px} }
.footer .brand .mark{width:44px; height:44px}
.footer .brand .wordmark{height:42px}
.brandline{margin-top:13px; color:var(--muted); font-size:11px; font-weight:500; letter-spacing:.24em; text-transform:uppercase}
.nav{display:flex; gap:4px; margin-left:auto; align-items:center}
.nav a{
  color:var(--ink-2); font-size:14.5px; font-weight:500; padding:7px 12px; border-radius:99px;
}
.nav a:hover{color:var(--ink); background:var(--panel)}
.nav a.current{color:var(--ink); background:var(--panel-2)}
.nav a.btn{color:#0A0C10}
.nav a.btn:hover{color:#0A0C10; background-image:var(--chrome-soft)}
.nav .cta{margin-left:6px}
.navtoggle{
  display:none; margin-left:auto; background:var(--panel); border:1px solid var(--line-2);
  color:var(--ink); border-radius:10px; width:40px; height:36px; cursor:pointer; font-size:17px; line-height:1;
}
@media (max-width:840px){
  .nav{
    display:none; position:absolute; top:74px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px; padding:12px 16px 18px;
    background:rgba(8,9,11,.97); border-bottom:1px solid var(--line);
  }
  .nav.open{display:flex}
  .nav a{padding:11px 12px; font-size:16px}
  .nav .cta{margin:8px 0 0; text-align:center}
  .navtoggle{display:block}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:"Inter",sans-serif; font-weight:700; font-size:14.5px;
  padding:11px 22px; border-radius:99px; border:0; cursor:pointer;
  background-image:var(--chrome-soft); color:#0A0C10; letter-spacing:-.01em;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 8px 24px rgba(154,164,178,.14);
}
.btn:hover{color:#0A0C10; filter:brightness(1.07)}
.btn.ghost{
  background:transparent; background-image:none; color:var(--ink);
  border:1px solid var(--line-2); box-shadow:none;
}
.btn.ghost:hover{border-color:#4A515E; color:var(--ink); background:var(--panel)}
.btn.sm{padding:8px 16px; font-size:13.5px}
.btns{display:flex; gap:11px; flex-wrap:wrap; margin-top:30px}

/* ---------- hero ---------- */
.hero{padding-block:clamp(56px,11vw,116px) clamp(40px,6vw,68px)}
.hero h1{font-size:clamp(38px,7.6vw,74px)}
.hero .lede{
  margin-top:26px; font-size:clamp(17px,2.2vw,20px); color:var(--ink-2);
  font-weight:300; max-width:54ch; line-height:1.52;
}
.heroline{margin-top:46px}

/* ---------- generic section head ---------- */
.sechead{max-width:62ch}
.sechead h2{font-size:clamp(27px,4.6vw,42px); letter-spacing:-.012em}
.sechead p{margin-top:16px; color:var(--ink-2); font-weight:300; font-size:17px}

/* ---------- cards ---------- */
.cards{display:grid; gap:14px; margin-top:38px}
@media (min-width:700px){ .cards.c2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:820px){ .cards.c3{grid-template-columns:repeat(3,1fr)} }

.card{
  background:linear-gradient(180deg,var(--panel) 0%,var(--void-2) 100%);
  border:1px solid var(--line);
  border-top-color:var(--line-2);
  border-radius:var(--radius);
  padding:26px 24px;
}
.card h3{font-size:20px; letter-spacing:-.008em}
.card p{margin-top:11px; color:var(--ink-2); font-weight:300; font-size:15.5px}
.card .idx{
  font-family:"Inter",sans-serif; font-size:12px; font-weight:600; letter-spacing:.1em;
  color:var(--muted); margin-bottom:14px; display:block;
}

ul.list{margin:15px 0 0; padding:0; list-style:none; display:grid; gap:9px}
ul.list li{
  display:grid; grid-template-columns:auto 1fr; gap:11px;
  color:var(--ink-2); font-weight:300; font-size:15px; line-height:1.5;
}
ul.list li::before{
  content:""; width:5px; height:5px; border-radius:99px; margin-top:9px;
  background-image:var(--chrome-soft);
}
ul.list.off li{color:var(--muted)}
ul.list.off li::before{background:none; background-color:#39404B}

/* ---------- feature band ---------- */
.band{
  border:1px solid var(--line); border-top-color:var(--line-2);
  border-radius:26px; padding:clamp(28px,5vw,54px);
  background:
    radial-gradient(600px 300px at 82% 0%, rgba(230,230,230,.10), transparent 64%),
    linear-gradient(180deg,var(--panel) 0%,var(--void-2) 100%);
}
.band h2{font-size:clamp(26px,4.4vw,40px)}
.band p{margin-top:18px; color:var(--ink-2); font-weight:300; max-width:56ch; font-size:16.5px}

/* ---------- steps ---------- */
.steps{display:grid; gap:0; margin-top:36px; border-top:1px solid var(--line)}
.step{display:grid; grid-template-columns:auto 1fr; gap:18px; padding:22px 0; border-bottom:1px solid var(--line)}
.step .n{
  font-family:"Inter",sans-serif; font-weight:600; font-size:13px; letter-spacing:.08em;
  color:var(--muted); padding-top:4px; min-width:26px;
}
.step h3{font-size:18px}
.step p{margin-top:7px; color:var(--ink-2); font-weight:300; font-size:15.5px; max-width:58ch}

/* ---------- logos / references ---------- */
.logos{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:32px;
}
.logos span{
  font-family:"Inter",sans-serif; font-size:14px; font-weight:500; letter-spacing:-.01em;
  color:var(--ink-2); border:1px solid var(--line-2); border-radius:99px; padding:7px 16px;
  background:var(--panel);
}
.logos span.soon{color:var(--muted); border-style:dashed}

.refs{display:grid; gap:14px; margin-top:38px}
@media(min-width:760px){ .refs{grid-template-columns:1fr 1fr} }
.ref{
  border:1px solid var(--line); border-top-color:var(--line-2); border-radius:var(--radius);
  padding:26px 24px; background:linear-gradient(180deg,var(--panel) 0%,var(--void-2) 100%);
}
.ref .tag{
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:13px;
}
.ref h3{font-size:20px}
.ref .dom{margin-top:6px; font-size:13.5px; color:var(--ice-dim); font-family:"Sora",sans-serif}
.ref p{margin-top:13px; color:var(--ink-2); font-weight:300; font-size:15.5px}
.ref ul.list{margin-top:14px}

/* ---------- price table ---------- */
.pricewrap{overflow-x:auto; margin-top:34px; border:1px solid var(--line); border-radius:var(--radius)}
table.price{border-collapse:collapse; width:100%; font-size:15px; min-width:520px}
table.price th, table.price td{text-align:left; padding:15px 20px; border-top:1px solid var(--line)}
table.price thead th{
  border-top:0; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-family:"Inter",sans-serif;
}
table.price td{color:var(--ink-2); font-weight:300}
table.price td:first-child{color:var(--ink); font-weight:600; letter-spacing:-.005em; white-space:nowrap}
table.price td.num{font-variant-numeric:tabular-nums; white-space:nowrap}
.pricenote{margin-top:16px; color:var(--muted); font-size:14px; font-weight:300; max-width:64ch}

/* ---------- contact / form ---------- */
.split{display:grid; gap:26px; margin-top:38px}
@media(min-width:860px){ .split{grid-template-columns:1.15fr .85fr; gap:36px} }

.form{display:grid; gap:14px}
.field{display:grid; gap:7px}
.field label{font-size:13px; font-weight:600; color:var(--ink-2); letter-spacing:.01em}
.field input, .field textarea{
  font-family:inherit; font-size:15.5px; color:var(--ink);
  background:var(--void-2); border:1px solid var(--line-2); border-radius:12px;
  padding:12px 14px; width:100%;
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus, .field textarea:focus{border-color:var(--ice-dim); outline:none; box-shadow:0 0 0 3px rgba(230,230,230,.14)}
.consent{display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start; font-size:14px; color:var(--ink-2); font-weight:300}
.consent input{margin-top:4px; width:16px; height:16px; accent-color:#9AA4B2}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.contactcard{
  border:1px solid var(--line); border-top-color:var(--line-2); border-radius:var(--radius);
  padding:24px; background:linear-gradient(180deg,var(--panel) 0%,var(--void-2) 100%); height:fit-content;
}
.contactcard dl{margin:0; display:grid; gap:15px}
.contactcard dt{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.contactcard dd{margin:4px 0 0; font-size:16px; color:var(--ink)}

.booking{
  margin-top:30px; border:1px solid var(--line-2); border-radius:var(--radius);
  background:var(--void-2); padding:0; overflow:hidden; min-height:520px;
}
.booking iframe{width:100%; min-height:640px; border:0; display:block}
.booking .empty{padding:40px 26px; text-align:center}
.booking .empty p{color:var(--ink-2); font-weight:300; max-width:46ch; margin:10px auto 0}

.notice{
  margin-top:18px; border-left:2px solid var(--ice-dim); background:rgba(230,230,230,.06);
  border-radius:0 12px 12px 0; padding:13px 16px; color:var(--ink-2); font-size:14.5px; font-weight:300;
}
.notice strong{color:var(--ink); font-weight:600}

/* ---------- prose (legal pages) ---------- */
.prose{max-width:68ch; margin-top:30px}
.prose h2{font-size:23px; margin-top:34px}
.prose h3{font-size:18px; margin-top:26px}
.prose p, .prose li{color:var(--ink-2); font-weight:300; font-size:16px}
.prose p{margin-top:14px}
.prose ul{margin-top:14px; padding-left:20px}
.prose li{margin-top:7px}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line); margin-top:clamp(60px,9vw,110px); padding-block:44px 54px}
.footer-in{display:grid; gap:30px}
@media(min-width:760px){ .footer-in{grid-template-columns:1.3fr 1fr 1fr} }
.footer h4{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-family:"Manrope",sans-serif}
.footer ul{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:9px}
.footer ul a{color:var(--ink-2); font-size:15px; font-weight:300}
.footer ul a:hover{color:var(--ink)}
.footer .about p{margin-top:14px; color:var(--ink-2); font-weight:300; font-size:15px; max-width:38ch}
.legalbar{margin-top:38px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:13.5px; font-weight:300; display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between}

/* ---------- cookie banner ---------- */
.cookiebar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:60;
  background:rgba(17,19,24,.97); border:1px solid var(--line-2); border-radius:16px;
  padding:18px 20px; display:none; gap:16px; align-items:center; flex-wrap:wrap;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.cookiebar.show{display:flex}
.cookiebar p{color:var(--ink-2); font-size:14.5px; font-weight:300; flex:1 1 260px; margin:0}
.cookiebar .acts{display:flex; gap:9px; flex:0 0 auto}
@media(min-width:700px){ .cookiebar{left:auto; right:22px; bottom:22px; max-width:560px} }


/* ---------- a szövegterv új elemei ---------- */
.hero .tagline{
  margin-top:18px; font-family:"Playfair Display",Georgia,serif; font-style:italic;
  font-size:clamp(18px,2.4vw,22px); color:var(--higany); letter-spacing:.005em;
}
.hero .tagline + .lede{margin-top:18px}

.subhead{
  margin-top:44px; font-size:21px; font-weight:600; letter-spacing:-.01em;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.subhead + .cards{margin-top:22px}
.afternote{
  margin-top:18px; color:var(--ink-2); font-weight:300; font-size:16px; max-width:64ch;
}
.sechead + .afternote{margin-top:20px}

.minilabel{
  display:block; margin-top:20px; font-size:10.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--higany);
}
.minilabel.off{color:var(--muted)}
.card h3 + .minilabel{margin-top:16px}

/* kétoszlopos űrlapsor */
.row2{display:grid; gap:14px}
@media(min-width:560px){ .row2{grid-template-columns:1fr 1fr} }
.field select{
  font-family:inherit; font-size:15.5px; color:var(--ink);
  background:var(--void-2); border:1px solid var(--line-2); border-radius:12px;
  padding:12px 14px; width:100%; appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.field select:focus{border-color:var(--ice-dim); outline:none; box-shadow:0 0 0 3px rgba(230,230,230,.14)}

.cardhead{font-size:17px; font-weight:600; margin-bottom:16px}
.contactcard dd br{line-height:1.9}

/* GYIK */
.faq{margin-top:34px; border-top:1px solid var(--line)}
.qa{padding:24px 0; border-bottom:1px solid var(--line)}
.qa h3{font-size:19px; letter-spacing:-.008em}
.qa p{margin-top:9px; color:var(--ink-2); font-weight:300; font-size:15.5px; max-width:66ch}

/* még kitöltetlen adat */
.empty{color:var(--muted); font-style:italic; font-weight:400}
table.price td.list s{color:var(--muted); text-decoration-thickness:1px}
table.price td.list{color:var(--muted)}