/* ==========================================================================
   Raw Materials Trade — a11y-fixes.v1.css
   A site.v20260709.min.css UTAN toltodik be.

   A PageSpeed Insights (2026-08-10, mobil) altal jelzett hibak javitasa:
     - "Nem megfelelo a hatter- es elotersz\00ED nek kozotti kontrasztarany."
     - "A linkeket szin alapjan lehet felismerni."
   Plusz: a h4 -> h3 atsorolas utan a vizualis megjelenes valtozatlan marad.

   Merteket a repo sajat tokenjeibol szamoltuk:
     --accent   #22d3ee  feheren  1.9:1   BUKIK  (AA min. 4.5:1)
     --blue-mid #1e88e5  feheren  3.4:1   BUKIK
     --grey-400 #94a3b8  #f8fafc-on 2.4:1 BUKIK
     --green    #16a34a  feher szoveggel 3.0:1 BUKIK (0.65rem = kis szoveg)
   ========================================================================== */

:root {
  /* Vilagos hatteren hasznalt, AA-konform megfelelok. A --blue (#1565c0)
     mar a paletta resze, igy a markaarculat nem valtozik. */
  --rmt-accent-aa:  #0f5aa8;   /* 6.4:1 feheren  — az #22d3ee helyett */
  --rmt-label-aa:   #14639e;   /* 5.6:1 feheren  — az #1e88e5 helyett */
  --rmt-muted-aa:   #4b5c70;   /* 7.4:1 #f8fafc-on — a #94a3b8 helyett */
  --rmt-green-aa:   #15702f;   /* 6.6:1 feher szoveggel — a #16a34a helyett */
}

/* --------------------------------------------------------------------------
   1. Szekcio-cimkek  (.section-label)
   Alap: var(--blue-mid) vilagos hatteren -> bukik.
   A sotet hattern levo valtozatokat (.quality-section, .catalogue-page-hero)
   NEM irjuk felul: azok vilagos szoveg sotet alapon, ott a kontraszt rendben.
   -------------------------------------------------------------------------- */
.section-label {
  color: var(--rmt-label-aa);
}

.quality-section .section-label,
.catalogue-page-hero .section-label,
.bg-navy .section-label,
.hero .section-label {
  color: #77d4e7;   /* valtozatlan: sotet alapon megfelelo */
}

/* --------------------------------------------------------------------------
   2. Vezetoi kartyak  (.leader-kicker, .leader-link)
   Mindketto var(--accent) = #22d3ee vilagos kartyan -> 1.9:1.
   -------------------------------------------------------------------------- */
.leader-kicker {
  color: var(--rmt-label-aa);
}

.leader-link {
  color: var(--rmt-accent-aa);
  /* WCAG 1.4.1: a link ne csak szinnel legyen megkulonboztetheto */
  text-decoration: underline;
  text-decoration-thickness: .07em;
  text-underline-offset: .2em;
  text-decoration-skip-ink: auto;
}

.leader-link:hover,
.leader-link:focus-visible {
  text-decoration-thickness: .12em;
}

/* --------------------------------------------------------------------------
   3. Urlap-labjegyzet  (.form-notice) — --grey-400 a --grey-50 alapon
   -------------------------------------------------------------------------- */
.form-notice {
  color: var(--rmt-muted-aa);
}

.form-notice a {
  color: var(--rmt-accent-aa);
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* --------------------------------------------------------------------------
   4. "Valid / Ervenyes / Gultig" tanusitvany-jelveny
   0.65rem-es szoveg, ezert a 4.5:1 az iranyado, nem a 3:1.
   -------------------------------------------------------------------------- */
.cert-valid-badge {
  background: var(--rmt-green-aa);
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. Folyoszovegben levo linkek alahuzasa
   Gombok, navigacio, nyelvvalto es kartya-linkek kimaradnak.
   -------------------------------------------------------------------------- */
p a,
li a,
dd a,
.legal-note a,
.disclaimer a,
.footer-legal a,
.cookie-banner a {
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-skip-ink: auto;
}

.btn, .btn:hover,
.site-nav a, .lang-switcher a,
.card-link, .arrow-link,
.footer-col a {
  text-decoration: none;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6. h4 -> h3 atsorolas utani vizualis kompenzacio
   A meglevo CSS a .step h4 es .footer-col h4 szelektorokhoz kotott.
   A cimsorok szemantikai szintje valtozott, a megjelenes nem.
   -------------------------------------------------------------------------- */
.step h3 {
  font-size: .88rem;
  margin-bottom: .35rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
  letter-spacing: -0.02em;
}

.footer-col h3 {
  color: rgba(255, 255, 255, .90);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .85rem;
  font-weight: 700;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   7. Lathato billentyuzet-fokusz
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #f2a900;
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   8. Csokkentett mozgas keresenek tiszteletben tartasa
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   9. Footer contrast hardening — PSI follow-up 2026-08-10

   Lighthouse still flagged the legal links in the global dark footer because
   .footer-legal a used rgba(255,255,255,.40) on --navy (#0d1b2a), which is
   below WCAG AA for normal text. Keep the visual hierarchy subtle, but move
   all footer copy and links comfortably above AA. Links stay underlined so
   they are not identifiable by colour alone.
   -------------------------------------------------------------------------- */
footer[role="contentinfo"],
footer:not(.legal-footer),
.site-footer {
  color: rgba(255, 255, 255, .78);
}

footer[role="contentinfo"] .footer-brand p,
footer[role="contentinfo"] .footer-bottom,
footer[role="contentinfo"] .footer-col a,
footer[role="contentinfo"] .footer-legal a,
footer[role="contentinfo"] a,
.site-footer,
.site-footer a {
  color: rgba(255, 255, 255, .82);
}

footer[role="contentinfo"] .footer-col a,
footer[role="contentinfo"] .footer-legal a,
footer[role="contentinfo"] a,
.site-footer a {
  text-decoration: underline;
  text-decoration-thickness: .07em;
  text-underline-offset: .2em;
  text-decoration-skip-ink: auto;
}

footer[role="contentinfo"] .footer-col a:hover,
footer[role="contentinfo"] .footer-col a:focus-visible,
footer[role="contentinfo"] .footer-legal a:hover,
footer[role="contentinfo"] .footer-legal a:focus-visible,
footer[role="contentinfo"] a:hover,
footer[role="contentinfo"] a:focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible {
  color: #fff;
  text-decoration-thickness: .12em;
}

/* Legal-only pages have a separate compact footer. Its original 45% white
   also remains too close to the AA threshold on the navy background. */
.legal-footer,
.legal-footer-inner,
.legal-footer-link,
.legal-footer a {
  color: rgba(255, 255, 255, .82);
}

/* The enquiry stays lightweight until the visitor chooses to open it. */
.inquiry-form-toggle {
  width: 100%;
  min-height: 56px;
  justify-content: center;
  font-size: 1rem;
}

.inquiry-form-panel[hidden] {
  display: none !important;
}