/**
 * Havidíjas landing (/havi/) – scoped stílusok.
 *
 * Csak az a néhány elem, amihez nincs kész komponens. A hero, kártyák
 * (.card/.grid-3), a .faq accordion, az .form-card / .field / .form-state
 * és a gombok a meglévő rendszerből jönnek – ez a fájl nem módosít semmi
 * globálisat, csak .havi-* osztályokat ad hozzá. Feltételesen töltődik be
 * (lásd functions.php: is_page('havi')).
 *
 * @package NFB_Growth
 */

/* --- HERO: előnyök + árjelvény --- */
.havi-benefits{
  list-style:none; padding:0; margin:30px 0 4px;
  display:grid; gap:12px; max-width:720px;
}
.havi-benefits li{
  position:relative; padding-left:30px;
  color:#fff; font-size:1.05rem; line-height:1.5;
}
.havi-benefits li::before{
  content:""; position:absolute; left:0; top:9px;
  width:9px; height:9px; border-radius:50%; background:var(--amber);
}
.havi-price-badge{
  display:inline-block; margin-top:28px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  border-radius:999px; padding:10px 20px;
  color:#fff; font-size:1.05rem;
}
.havi-price-badge strong{ color:var(--amber); font-weight:800; }
/* A hero másodlagos gombja sötét háttéren világos keretű legyen. */
.havi-btn-on-dark{ border-color:rgba(255,255,255,.5); color:#fff; }
.havi-btn-on-dark:hover{ background:#fff; color:var(--petrol); }

/* --- PROBLÉMA: négy elem --- */
.havi-problems{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px;
  margin:clamp(32px,4vw,48px) 0;
}
.havi-problem{
  background:var(--cream); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:24px;
  display:flex; flex-direction:column; gap:12px;
}
.havi-problem-ico{
  width:40px; height:40px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(182,74,74,.1); color:var(--error);
}
.havi-problem-ico svg{ width:20px; height:20px; }
.havi-problem p{ margin:0; font-weight:600; color:var(--petrol); line-height:1.4; }

/* --- HOGYAN MŰKÖDIK EGYÜTT: kapcsolati ábra (hub) --- */
/* Asztalon fix képarányú doboz: a csomópontok %-ban, a vonalak SVG-ben
   ugyanabban a koordinátarendszerben → mindig illeszkednek. Mobilon a doboz
   függőleges listává alakul, az SVG-vonalak elrejtve. */
.havi-eco{
  position:relative; width:100%; max-width:820px; margin:clamp(8px,2vw,20px) auto 0;
  aspect-ratio:1000 / 720;
}
.havi-eco-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.havi-eco-lines line{ stroke:var(--amber); stroke-width:3; stroke-linecap:round; }
.havi-eco-lines line.dash{ stroke:var(--amber-dark); stroke-width:2.5; stroke-dasharray:5 8; opacity:.75; }

.havi-node{
  position:absolute; transform:translate(-50%,-50%);
  width:min(31%,208px); background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:16px 14px; text-align:center;
  box-shadow:0 10px 30px rgba(18,60,69,.08);
}
.havi-node .havi-node-ico{
  display:inline-flex; width:40px; height:40px; border-radius:11px;
  align-items:center; justify-content:center;
  background:var(--petrol-pale); color:var(--petrol);
}
.havi-node-ico svg{ width:21px; height:21px; }
.havi-node strong{ display:block; color:var(--petrol); font-size:1.02rem; margin:9px 0 4px; }
.havi-node > span:last-child{ display:block; font-size:12.5px; color:var(--ink-soft); line-height:1.4; }

.havi-node-center{ left:50%; top:50%; width:min(35%,232px); border:2px solid var(--petrol); box-shadow:0 18px 44px rgba(18,60,69,.14); }
.havi-node-center .havi-node-ico{ background:var(--petrol); color:#fff; }
.havi-node-top{ left:50%; top:16.6%; }
.havi-node-bottom{ left:50%; top:83.4%; }
.havi-node-left{ left:15%; top:50%; }
.havi-node-right{ left:85%; top:50%; }

.havi-eco-couples{ margin-top:clamp(40px,5vw,60px); }

.havi-eco-flow{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px 14px; margin-top:clamp(36px,5vw,56px);
}
.havi-eco-flow span{
  background:var(--petrol); color:#fff; font-weight:700;
  padding:10px 20px; border-radius:999px; font-size:15px;
}
.havi-eco-flow i{ color:var(--amber-dark); font-style:normal; font-weight:800; font-size:18px; }

/* --- ÁRAZÁS --- */
.havi-pricing{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,32px); align-items:start;
}
.havi-plan{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(28px,3.5vw,40px);
  box-shadow:0 8px 30px rgba(18,60,69,.05);
  display:flex; flex-direction:column;
}
.havi-plan-featured{
  border-color:var(--petrol); border-width:2px;
  box-shadow:0 20px 50px rgba(18,60,69,.12);
}
.havi-plan-badge{
  position:absolute; top:-13px; left:clamp(28px,3.5vw,40px);
  background:var(--amber); color:var(--ink);
  font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  padding:6px 14px; border-radius:999px;
}
.havi-plan-head{ border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:22px; }
.havi-plan h3{ font-size:1.5rem; margin:0 0 6px; color:var(--petrol); }
.havi-plan-sub{ margin:0 0 16px; color:var(--ink-soft); font-size:15px; line-height:1.4; }
.havi-plan-price{ margin:0; font-size:1.1rem; color:var(--ink); }
.havi-plan-price strong{ font-size:2rem; font-weight:800; color:var(--petrol); }
.havi-plan-incl{ margin:0 0 12px; font-weight:600; color:var(--petrol); font-size:15px; }
.havi-plan-list{ list-style:none; padding:0; margin:0 0 24px; flex:1; }
.havi-plan-list li{ position:relative; padding-left:28px; margin-bottom:11px; font-size:15.5px; line-height:1.5; color:var(--ink); }
.havi-plan-list li::before{
  content:""; position:absolute; left:0; top:7px; width:14px; height:14px;
  border-radius:50%; background:var(--petrol-pale);
  box-shadow:inset 0 0 0 1px var(--amber);
}
.havi-plan-list li::after{
  content:""; position:absolute; left:5px; top:11px; width:4px; height:7px;
  border-right:2px solid var(--amber-dark); border-bottom:2px solid var(--amber-dark);
  transform:rotate(40deg);
}
.havi-plan-micro{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin:0 0 20px; }
.havi-plan-cta{ width:100%; margin-top:auto; }
.havi-pricing-notes{ margin-top:clamp(28px,4vw,40px); }

/* --- MIÉRT VELÜNK: pontok sötét háttéren --- */
.havi-why{ margin-top:28px; max-width:720px; }
.havi-why li{ color:#fff; }

/* --- CSOMAGVÁLASZTÓ az űrlapban --- */
.havi-pkg-choices{ display:grid; gap:12px; margin-top:4px; }
.havi-pkg-choices .check-item{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 16px; cursor:pointer; font-weight:500;
}
.havi-pkg-choices .check-item:has(input:checked){
  border-color:var(--petrol); background:var(--petrol-pale);
}
#havi-pkg-field.invalid .havi-pkg-choices{ outline:1px solid var(--error); outline-offset:4px; border-radius:8px; }

/* ===== RESZPONZÍV ===== */
@media(max-width:900px){
  .havi-problems{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:767px){
  .havi-pricing{ grid-template-columns:1fr; } /* mobilon egymás alatt, a Local (olcsóbb) elöl */

  /* A kapcsolati ábra mobilon függőleges listává alakul: a központ felül,
     alatta a csatornák. Az SVG-vonalakat elrejtjük. */
  .havi-eco{ aspect-ratio:auto; max-width:440px; display:flex; flex-direction:column; gap:12px; }
  .havi-eco-lines{ display:none; }
  .havi-node,
  .havi-node-center,
  .havi-node-top,
  .havi-node-bottom,
  .havi-node-left,
  .havi-node-right{
    position:static; transform:none; left:auto; top:auto; width:100%;
    display:flex; align-items:center; gap:14px; text-align:left;
  }
  .havi-node-center{ order:-1; }
  .havi-node .havi-node-ico{ flex:none; }
  .havi-node strong{ margin:0 0 2px; }
  .havi-node > span:last-child{ font-size:13px; }
}
@media(max-width:560px){
  .havi-problems{ grid-template-columns:1fr; }
}