/* Hőkamera Bérlés — brand layer over Astra.
   Source of truth: D:\work\brand\hokamera-berles\tokens.css (v1.0).
   Never introduce a value that is not in that file.

   Loaded after the Astra theme stylesheet, so these override without
   !important wherever specificity allows. The handful of !important rules
   below exist only where Astra emits inline styles from the Customizer.

   ⚠ The Customizer's own colour settings are changed separately (they live
   in the database, not here). This file covers what the Customizer cannot
   express: the promise strip, the thermal edge, and the review form. */

:root {
  --hb-blue-050: #E8F0FF;
  --hb-blue-500: #2171FF;
  --hb-blue-600: #1657D6;
  --hb-blue-700: #0F3FA0;
  --hb-navy-800: #243673;
  --hb-navy-950: #16224A;
  --hb-green-500: #22D375;
  --hb-green-600: #16B963;
  --hb-green-700: #0A7A43;

  --hb-ink: #0A0A0A;
  --hb-slate-700: #3C4560;
  --hb-slate-500: #5A6478;
  --hb-slate-400: #8A93A8;
  --hb-slate-200: #D9DDE8;
  --hb-slate-100: #EDEFF5;
  --hb-surface: #F3F4F6;
  --hb-base: #FBFCFF;
  --hb-white: #FFFFFF;

  --hb-error: #C92A1E;
  --hb-gradient-signature: linear-gradient(135deg, #2171FF, #22D375);

  --hb-font: Montserrat, "Segoe UI", Tahoma, Verdana, sans-serif;
  --hb-radius-input: 4px;
  --hb-radius-button: 8px;
  --hb-radius-card: 16px;
  --hb-radius-pill: 999px;
  --hb-focus-ring: 0 0 0 3px rgba(33, 113, 255, .4);
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   The site's buttons were green (`--ast-global-color-1`). Green does
   exactly one job in this brand — availability and the deposit-free
   promise — so a green "Submit" spends the one signal the brand has.
   Primary is blue 600, which carries white text at 4.5:1; blue 500 is
   4.34:1 and is reserved for large text and non-text fills. */

.wp-block-button__link,
.ast-button,
.ast-custom-button,
button.menu-toggle,
input[type="submit"],
.wpcf7-submit {
  background-color: var(--hb-blue-600);
  color: var(--hb-white);
  border-radius: var(--hb-radius-button);
  font-family: var(--hb-font);
  font-weight: 700;
  min-height: 50px;
}

.wp-block-button__link:hover,
.ast-button:hover,
.ast-custom-button:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover {
  background-color: var(--hb-blue-700);
  color: var(--hb-white);
}

.wp-block-button__link:focus-visible,
.ast-button:focus-visible,
input[type="submit"]:focus-visible,
.wpcf7-submit:focus-visible {
  outline: 0;
  box-shadow: var(--hb-focus-ring);
}

/* The one green element per page: the deposit-free / availability signal.
   Ink text on green, never white — white on #22D375 is unreadable. */
.hb-btn--signal {
  background-color: var(--hb-green-500);
  color: var(--hb-ink);
}
.hb-btn--signal:hover { background-color: var(--hb-green-600); }

/* ── Promise strip — required on every page ──────────────────────────── */

.hb-promise {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 18px 32px;
  background: var(--hb-navy-950);
  color: var(--hb-white);
  font: 600 14.5px/1.4 var(--hb-font);
}
.hb-promise__item { display: flex; align-items: center; gap: 9px; }
.hb-promise__item::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hb-green-500);
  flex: 0 0 auto;
}

/* ── Thermal edge — every brand image carries it ─────────────────────── */

.hb-media { position: relative; overflow: hidden; border-radius: var(--hb-radius-card); }
.hb-media::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--hb-gradient-signature);
}

/* ── Badges ──────────────────────────────────────────────────────────── */

.hb-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: var(--hb-radius-pill);
  font: 700 12.5px/1 var(--hb-font);
}
.hb-badge--promise { background: var(--hb-green-500); color: var(--hb-ink); }
.hb-badge--availability { background: var(--hb-blue-050); color: var(--hb-blue-700); }
.hb-badge--product { background: var(--hb-navy-950); color: var(--hb-white); }
.hb-badge--location {
  background: var(--hb-surface);
  color: var(--hb-slate-700);
  border: 1px solid var(--hb-slate-200);
}

/* ── Review form (/velemeny) ─────────────────────────────────────────── */

.hb-review { max-width: 720px; margin: 0 auto; }

.hb-stars { display: flex; gap: 8px; justify-content: center; margin: 0 0 24px; }
.hb-stars__item {
  font-size: 34px;
  line-height: 1;
  color: var(--hb-slate-200);
  text-decoration: none;
}
.hb-stars__item--on { color: #FFC24D; }   /* thermal amber — a rating IS a scale */

.hb-review textarea {
  width: 100%;
  min-height: 150px;
  padding: 12px;
  border: 1px solid var(--hb-slate-200);
  border-radius: var(--hb-radius-input);
  font: 400 16px/1.6 var(--hb-font);
  color: var(--hb-ink);
}
.hb-review textarea:focus-visible {
  outline: 0;
  border-color: var(--hb-blue-600);
  box-shadow: var(--hb-focus-ring);
}

/* Tap targets stay at 44px on mobile, and buttons go full width. */
@media (max-width: 767px) {
  .wp-block-button__link,
  .ast-button,
  input[type="submit"],
  .wpcf7-submit { width: 100%; min-height: 48px; }
  .hb-promise { gap: 14px; padding: 14px 16px; font-size: 13.5px; }
}