/* Piliscsabai Iskolaalapító Egyesület – közös stíluslap
   A design a palanta.hu arculatát követi (színek, betűk, térközök). */

/* ---------- Betűtípusok (helyben tárolva) ---------- */
@font-face { font-family: "Lemonada"; font-weight: 400; font-display: swap; src: url("../fonts/lemonada-v30-latin-ext-regular.woff2") format("woff2"); }
@font-face { font-family: "Lemonada"; font-weight: 500; font-display: swap; src: url("../fonts/lemonada-v30-latin-ext-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("../fonts/poppins-v24-latin_latin-ext-regular.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/poppins-v24-latin_latin-ext-600.woff2") format("woff2"); }

/* ---------- Változók ---------- */
:root {
  --barack: #fef7ee;
  --barack-d-1: #e4ddd5;
  --kek: #0a174c;
  --kek-l-1: #252962;
  --narancs: #dd6b1a;
  --narancs-d-1: #c15400;
  --narancs-l-1: #fa8333;
  --narancs-l-2: #ff9b4b;
  --gomb: #ff9343;
  --shadow-narancs: 0 18px 17px -14px #ff9747;

  --text-s: clamp(0.84rem, calc(-0.07vw + 0.91rem), 0.89rem);
  --text-m: clamp(1rem, calc(0.2vw + 0.95rem), 1.13rem);
  --text-l: clamp(1.13rem, calc(0.59vw + 0.99rem), 1.5rem);
  --text-2xl: clamp(1.42rem, calc(1.95vw + 0.96rem), 2.66rem);

  --space-2xs: clamp(0.51rem, calc(0.17vw + 0.47rem), 0.62rem);
  --space-xs: clamp(0.64rem, calc(0.37vw + 0.55rem), 0.88rem);
  --space-s: clamp(0.8rem, calc(0.69vw + 0.64rem), 1.24rem);
  --space-m: clamp(1rem, calc(1.18vw + 0.72rem), 1.75rem);
  --space-l: clamp(1.25rem, calc(1.92vw + 0.79rem), 2.47rem);
  --space-xl: clamp(1.56rem, calc(3.04vw + 0.84rem), 3.5rem);
  --space-2xl: clamp(1.95rem, calc(4.7vw + 0.84rem), 4.95rem);

  --radius-m: clamp(0.63rem, calc(-0.2vw + 0.8rem), 0.75rem);
  --radius-xl: clamp(1.63rem, calc(-0.59vw + 2.14rem), 2rem);

  --container: 1100px;
}

/* ---------- Alapok ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background-color: var(--barack); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--barack);
  color: var(--kek);
  font-family: "Lemonada", system-ui, sans-serif;
  font-size: var(--text-m);
  font-weight: 400;
  line-height: 1.7;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--narancs);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 var(--space-s);
}
h1, .h2 { font-size: var(--text-2xl); font-weight: 600; }
h2 { font-size: var(--text-l); font-weight: 600; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.4em; }
li { margin-bottom: 0.35em; }
a { color: var(--narancs); }
a:hover { color: var(--narancs-d-1); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--narancs-l-1); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-2xs); }
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: #fff; padding: .5rem 1rem; }

/* ---------- Fejléc ---------- */
.site-header { padding: var(--space-xs) 0; position: relative; z-index: 10; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); }
.logo { display: flex; align-items: center; gap: var(--space-xs); text-decoration: none; color: var(--kek); }
.logo img { width: 50px; height: 50px; }
.logo span { font-family: "Poppins", sans-serif; font-size: var(--text-s); font-weight: 600; line-height: 1.25; max-width: 14ch; }

.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
.main-nav li { margin: 0; }
.main-nav a { color: var(--kek); text-decoration: none; font-size: 14px; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--narancs); }

.button {
  display: inline-block;
  color: #fff;
  background-color: var(--gomb);
  border-radius: 20px;
  padding: 7px var(--space-xs);
  font-size: var(--text-s);
  text-decoration: none;
  box-shadow: var(--shadow-narancs);
  transition: background-color .2s ease;
  white-space: nowrap;
}
.button:hover { background-color: var(--narancs); color: #fff; }

.nav-toggle {
  display: none;
  background: none; border: 0; padding: 8px; cursor: pointer; color: var(--kek);
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; transition: transform .2s, opacity .2s; }

@media (max-width: 767px) {
  .nav-toggle { display: block; order: 3; }
  .header-cta { order: 2; margin-left: auto; }
  .main-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--barack);
    box-shadow: 0 12px 20px -12px rgba(0,0,0,.15);
    display: none;
    margin: 0;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; padding: var(--space-s) var(--space-m); }
  .main-nav a { display: block; padding: .5rem 0; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 16px; color: #ff9747; }
  .main-nav a[aria-current="page"] { color: var(--kek); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .logo span { display: none; }
}

/* ---------- Tartalom ---------- */
main { flex: 1; padding: var(--space-m) 0 var(--space-2xl); }
.card {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50px;
  padding: var(--space-xl);
}
.content { display: flex; flex-direction: column; gap: 3rem; }
.content section { scroll-margin-top: var(--space-l); }

.highlight-box {
  background-color: var(--barack);
  border-radius: var(--radius-xl);
  padding: var(--space-m);
}
.highlight-box .lead {
  font-family: "Poppins", sans-serif;
  color: var(--narancs);
  font-size: var(--text-m);
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: var(--space-s);
}
.tax-number {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: var(--text-l);
  letter-spacing: .04em;
  color: var(--kek);
}
.center { text-align: center; }

.contacts { list-style: none; padding: 0; }
.contacts li { margin-bottom: .5em; }

@media (max-width: 600px) {
  .card { border-radius: 30px; padding: var(--space-l) 20px; }
}

/* ---------- Lábléc ---------- */
.site-footer { margin-top: auto; }
.wave { display: block; width: 100%; height: 60px; margin-bottom: -2px; }
.wave path { fill: var(--narancs-l-2); }
.footer-main {
  background-image: linear-gradient(var(--narancs-l-2), var(--narancs-d-1));
  color: var(--barack);
  padding: var(--space-m) 0;
  font-size: 13px;
}
.footer-main .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m); }
.footer-logo { width: 100px; height: 100px; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin: 0 0 .4em; }
.footer-main a { color: var(--barack); text-decoration: none; }
.footer-main a:hover { text-decoration: underline; color: #fff; }
.copyright { text-align: center; width: 100%; margin: 0; }