/* ===== CV Pro — globális betűméret növelés ===== */

html {
  font-size: 19px;
}

body {
  font-size: 1rem;
  line-height: 1.75;
}

/* Bekezdések */
p {
  font-size: 1.05rem;
}

/* Nav linkek */
.navbar-nav .nav-item > a {
  font-size: 1.25rem !important;
  font-weight: 400 !important;
}

/* Hero szekció */
.ud-hero-title {
  font-size: 3.2rem !important;
  line-height: 1.2 !important;
  /* Hosszú magyar szavak (pl. "professzionális") ne lógjanak ki.
     hyphens: auto NEM kell — Safari (iOS) tényleg elválasztaná kötőjellel,
     Chrome/Android nem, így eltérően nézne ki a két böngészőben. */
  overflow-wrap: break-word;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.ud-hero-desc {
  font-size: 1.2rem !important;
}

/* Szekció fejlécek */
.ud-section-title h2 {
  font-size: 2.4rem !important;
  /* A sablon text-transform: capitalize-t használ (angol címstílus), ami magyarul
     helytelen: "Válassza Ki A Megfelelő Csomagot". Marad a HTML-ben írt forma. */
  text-transform: none !important;
}

.ud-section-title p {
  font-size: 1.1rem !important;
}

/* Feature kártyák */
.ud-feature-title {
  font-size: 1.2rem !important;
}

.ud-feature-desc {
  font-size: 1.05rem !important;
}

/* Pricing */
.ud-single-pricing h3 {
  font-size: 1.15rem !important;
}

.ud-single-pricing h4 {
  font-size: 2.2rem !important;
}

.ud-single-pricing li {
  font-size: 1.05rem !important;
}

/* About / Rólunk */
.ud-about-content h2 {
  font-size: 2.2rem !important;
}

.ud-about-content p {
  font-size: 1.1rem !important;
}

/* FAQ */
.ud-faq-btn {
  font-size: 1.05rem !important;
}

.ud-faq-body {
  font-size: 1.05rem !important;
}

/* Footer */
.ud-widget-desc {
  font-size: 1rem !important;
}

.ud-widget-links li a {
  font-size: 1rem !important;
}

/* Gombok */
.ud-main-btn {
  font-size: 1.05rem !important;
}


/* ===== CV Pro — fejléc felülírások ===== */

/* Fehér fejléc, ragadós — görgetéskor fent marad */
.ud-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 999;
}

/* Hero szekció ne csússzon a fejléc alá, kép alja levágva.
   Asztali nézetben nagyobb térköz a fejléc és a cím között (mobilon kisebb, lent). */
.ud-hero {
  padding-top: 160px;
  overflow: hidden;
}

/* A kép-tartó nem vágja le a pöttyöket */
.ud-hero-image {
  max-height: 460px;
  overflow: visible;
}

/* A levágás csak a CV képre vonatkozik */
.cv-image-wrap {
  max-height: 400px;
  overflow: hidden;
  max-width: 600px;
  margin: 0 auto;
}

.cv-image-wrap img {
  width: 100%;
  display: block;
}

/* Pöttyös díszítőelemek — kisebb méret, CV képhez közel */
.ud-hero-image .shape.shape-1 {
  width: 80px !important;
  height: auto !important;
  left: 60px !important;
  bottom: 20px !important;
}

.ud-hero-image .shape.shape-2 {
  width: 80px !important;
  height: auto !important;
  right: 60px !important;
  top: 10px !important;
}

/* Nav linkek sötétre — fehér háttéren láthatók legyenek */
.navbar-nav .nav-item > a {
  color: #1a1a2e;
}

.navbar-nav .nav-item > a:hover,
.navbar-nav .nav-item > a.active {
  color: #3C4EE0;
  opacity: 1;
}

/* ===== Fejléc CTA gombok (csak asztali nézet — .navbar-btn d-none d-sm-inline-block) =====
   "Ingyenes audit" és "CV generálás" alaphelyzetben egymás ellentettjei,
   egér rámozgatáskor megcserélődik a kinézetük. !important: a sticky (görgetett)
   állapot magasabb specificitású szabályait is felülírja, hogy konzisztens maradjon. */

/* Ingyenes audit — alap: fehér/áttetsző háttér, kék betű + kék keret */
.navbar-btn .ud-main-btn.ud-login-btn {
  background: transparent !important;
  color: #3C4EE0 !important;
  border: 1px solid #3C4EE0 !important;
}
/* Ingyenes audit — hover: kék háttér, fehér betű */
.navbar-btn .ud-main-btn.ud-login-btn:hover {
  background: #3C4EE0 !important;
  color: #fff !important;
  border-color: #3C4EE0 !important;
}

/* CV generálás (korábbi "Megrendelem") — alap: kék háttér, fehér betű + kék keret */
.navbar-btn .ud-main-btn.ud-white-btn {
  background: #3C4EE0 !important;
  color: #fff !important;
  border: 1px solid #3C4EE0 !important;
}
/* CV generálás — hover: fehér háttér, kék betű (= az Ingyenes audit alapállapota) */
.navbar-btn .ud-main-btn.ud-white-btn:hover {
  background: #fff !important;
  color: #3C4EE0 !important;
  border-color: #3C4EE0 !important;
}

/* Sticky fejléc is fehér maradjon */
.sticky {
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

/* Hamburger ikon sötét (mobilon) */
.navbar-toggler .toggler-icon {
  background-color: #1a1a2e;
}

/* Submenu linkek */
.ud-submenu-link {
  color: #1a1a2e !important;
}

/* Footer logo — ne nyúljon el */
.ud-widget .ud-footer-logo {
  max-width: 140px;
}

.ud-widget .ud-footer-logo img {
  width: auto !important;
  height: 55px;
  object-fit: contain;
}

/* Pricing — pipa ikonos bullet pontok */
.ud-single-pricing .ud-pricing-body ul {
  text-align: left;
}

.ud-single-pricing .ud-pricing-body li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ud-single-pricing .ud-pricing-body li i {
  color: #3056D3;
  font-size: 18px;
  flex-shrink: 0;
}

.ud-single-pricing.active .ud-pricing-body li i {
  color: #ffffff;
}

/* Pricing — egységes #3056D3 szín */
.ud-single-pricing.active {
  background: #3056D3 !important;
}

.ud-single-pricing.first-item::after {
  background: #3056D3 !important;
}

.ud-single-pricing.last-item::after {
  background: #3056D3 !important;
}

/* Rólunk szekció — flowchart kép középre */
.ud-about-wrapper {
  align-items: center !important;
}

.ud-about-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.ud-about-image img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

/* Feature kártyák — gombok egyvonalba igazítva */
.ud-single-feature {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ud-feature-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Szolgáltatás-kártyák gombjai — ugyanaz a kinézet, mint a fejléc "Ingyenes audit"
   gombja: fehér háttér + kék betű/keret, hoverkor kék háttér + fehér betű.
   Asztali ÉS mobil nézetre is érvényes (a kártyák mindkettőn látszanak). */
.ud-single-feature .ud-feature-link {
  display: inline-block;
  align-self: flex-start;   /* a flex-oszlopban balra, tartalom-szélességű gomb */
  margin-top: auto;         /* a kártya aljára igazítva marad */
  padding: 10px 22px;
  border: 1px solid #3C4EE0;
  border-radius: 5px;
  background: transparent;
  color: #3C4EE0;
  font-weight: 500;
  transition: all 0.2s ease;
}

.ud-single-feature .ud-feature-link:hover {
  background: #3C4EE0;
  color: #fff;
}


/* ===== CV Pro — reszponzív címsorok (mobil / tablet) ===== */
/* A fenti !important szabályok kiütik a sablon saját töréspontjait,
   ezért itt mi adunk vissza reszponzív méreteket — szintén !important-tal,
   és mivel ezek a fájl végén állnak, ezek nyernek a kisebb képernyőkön. */

/* Tablet és kisebb */
@media (max-width: 991px) {
  .ud-hero-title {
    font-size: 2.4rem !important;
  }
  .ud-section-title h2 {
    font-size: 2rem !important;
  }
  .ud-about-content h2 {
    font-size: 1.9rem !important;
  }
}

/* Mobil */
@media (max-width: 767px) {
  .ud-hero-title {
    font-size: 1.7rem !important;
    line-height: 1.25 !important;
  }
  .ud-hero-desc {
    font-size: 1.05rem !important;
  }
  .ud-section-title h2 {
    font-size: 1.6rem !important;
  }
  .ud-about-content h2 {
    font-size: 1.6rem !important;
  }
  .ud-single-pricing h4 {
    font-size: 1.9rem !important;
  }
}

/* Kis mobil (pl. 360px és kisebb) */
@media (max-width: 360px) {
  .ud-hero-title {
    font-size: 1.5rem !important;
  }
}


/* ===== CV Pro — vízszintes csúszás megszüntetése ===== */
/* Globális védőháló: semmilyen elem ne lógjon ki oldalra → nincs vízszintes görgetés */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Hero gombok: a sablonban flex, de flex-wrap nélkül → mobilon kilógtak.
   Engedjük tördelni, mobilon pedig egymás alá rakjuk őket. */
.ud-hero-buttons {
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .ud-hero-buttons {
    flex-direction: column;
    width: 100%;
  }
  .ud-hero-buttons li {
    width: 100%;
    max-width: 320px;
  }
  .ud-hero-buttons .ud-main-btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}

/* ===== Hero finomítások ===== */

/* „Többet szeretnék tudni" gomb: fehér keret, hogy látszódjon a gomb határa */
.ud-hero-buttons .ud-link-btn {
  border: 1px solid #fff;
}

/* Mobil: kisebb (de látható) térköz a fejléc és a cím között — asztalin nagyobb,
   valamint nagyobb térköz a „Kipróbálom most" és a „Többet szeretnék tudni" gomb között */
@media (max-width: 767px) {
  .ud-hero {
    padding-top: 125px;
  }
  .ud-hero-buttons {
    gap: 14px;
  }
}

/* Mobil: a feature-kártyák ne nyúljanak egyenlő magasságra (az csak az asztali
   sorhoz kell). A nyújtás miatt a gomb FÖLÖTT felduzzadt a térköz, ALATTA meg alig
   maradt hely a következő kártya ábrájáig. Így a gomb fölötti és alatti térköz
   kiegyenlítődik (mind a négy gombra). */
@media (max-width: 767px) {
  .ud-single-feature {
    height: auto;
    margin-bottom: 48px;
  }
  .ud-single-feature .ud-feature-link {
    margin-top: 0;
  }
}

/* Mobil: a „Hogyan működik?" infografika legyen nagyobb és olvashatóbb.
   Kisebb szekció-oldalpadding + a kép bal paddingjának megszüntetése → a kép
   a teljes elérhető szélességet kapja. (Koppintásra teljes méretben megnyílik.) */
@media (max-width: 767px) {
  .ud-about .container {
    padding-left: 12px;
    padding-right: 12px;
  }
  /* Kisebb kártyapadding mobilon, hogy a képnek több hely jusson */
  .ud-about-wrapper {
    padding: 22px 14px !important;
  }
  /* A kép-oszlop edge-to-edge kihúzva: visszanyeri a kártyapaddinget,
     így a fekvő workflow-kép nagyobb és olvashatóbb */
  .about-img-col {
    flex-basis: auto !important;
    width: calc(100% + 28px) !important;
    max-width: none !important;
    margin-left: -14px !important;
    margin-right: -14px !important;
  }
  .about-img-col .ud-about-image-link,
  .about-img-col img {
    width: 100% !important;
  }
  /* Mobilon a Rólunk-bekezdések balra zárva (sorkizárás + elválasztás nélkül,
     hogy iOS Safariban se jelenjenek meg kötőjeles szóelválasztások) */
  .ud-about-content p {
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}

/* Mobil: a logó középre a fejlécben, a hamburger menü jobbra (abszolút pozícióval) */
@media (max-width: 767px) {
  .ud-header .navbar {
    justify-content: center;
  }
  .ud-header .navbar-brand {
    margin-right: 0;
  }
  .ud-header .navbar-toggler {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}