/* Coca-Cola SZIN – sajtóakkreditáció
   Betűtípus: Bricolage Grotesque (SIL Open Font License).

   Alapértelmezésben a Google Fonts CDN-ről töltődik (a HTML fejlécében lévő <link>).
   SELF-HOSTING: töltsd le a woff2 fájlt a fonts/ mappába, vedd ki a <link> sorokat
   az index.php, embed.php és admin/_layout.php fejlécéből, majd töröld a
   kommentjelet az alábbi blokkról. Így egyetlen kérés sem megy a Google felé. */

/*
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}
*/

:root {
  --indigo:      #23188D;
  --indigo-deep: #1A1169;
  --navy:        #1B1464;
  --lime:        #B5F075;
  --coral:       #EF7350;
  --white:       #FFFFFF;
  --ink:         #14103F;
  --grey:        #6E6B90;
  --line:        #DCDAF2;
  --ok:          #1E8E4A;
  --warn:        #B8860B;
  --err:         #C0392B;

  --radius:      10px;
  --radius-pill: 999px;
  --shadow-hard: 0 4px 0 var(--navy);
  --font: "Bricolage Grotesque", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--indigo);
  font-variation-settings: "wdth" 100, "opsz" 14;
}

/* ---------- Tipográfia ---------- */

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  color: var(--navy);
}
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); text-transform: uppercase; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }
a  { color: var(--indigo); }

.eyebrow {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: .4rem;
}

/* ---------- Fejléc + hullám ---------- */

.site-header {
  background: var(--indigo);
  padding: 22px 24px 26px;
}
.site-header .inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.site-header img { height: 74px; width: auto; display: block; }
.site-header nav a {
  color: var(--white); text-decoration: none; font-weight: 700;
  text-transform: uppercase; font-size: .95rem; letter-spacing: .02em;
  margin-left: 22px;
}
.site-header nav a:hover { color: var(--lime); }

.wave {
  display: block; width: 100%; height: 26px;
  background: var(--indigo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0h120v10c-10 0-10 10-20 10s-10-10-20-10-10 10-20 10-10-10-20-10-10 10-20 10S10 10 0 10z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom / 120px 26px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0h120v10c-10 0-10 10-20 10s-10-10-20-10-10 10-20 10-10-10-20-10-10 10-20 10S10 10 0 10z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom / 120px 26px;
}

/* ---------- Elrendezés ---------- */

.hero { max-width: 900px; margin: 0 auto; padding: 54px 24px 6px; text-align: center; color: var(--white); }
.hero h1 { color: var(--white); }
.hero-logo { display: block; margin: 0 auto 26px; height: 120px; width: auto; }
@media (max-width: 640px) { .hero-logo { height: 84px; margin-bottom: 18px; } }

/* Szerkesztőből érkező szöveg */
/* Szótörés kikapcsolva: se automatikus elválasztás, se karakter szintű törés.
   A szavak mindig egyben maradnak. Kivétel a link, mert egy hosszú URL
   különben kitolná a layoutot. */
.rich { overflow-wrap: normal; word-break: normal; hyphens: none; -webkit-hyphens: none; }
.rich a { overflow-wrap: anywhere; }
.rich > *:first-child { margin-top: 0; }
.rich > *:last-child  { margin-bottom: 0; }
.rich p  { margin: 0 0 .85em; }
.rich ul, .rich ol { margin: 0 0 .85em; padding-left: 1.4em; }
.rich li { margin-bottom: .3em; }
.rich h2, .rich h3 { margin: 1.2em 0 .4em; }
.rich a { color: inherit; text-decoration: underline; }
.rich .ql-align-center, .rich [style*="center"]  { text-align: center; }
.rich .ql-align-right,  .rich [style*="right"]   { text-align: right; }
.rich .ql-align-justify, .rich [style*="justify"] { text-align: justify; }
.rich .ql-align-left { text-align: left; }
.hero .rich a { color: var(--lime); }
/* A bevezető szöveg a fehér kártyában, az űrlap fölött – ugyanolyan széles,
   mint a kitöltendő mezők, és ugyanúgy néz ki, mint a szerkesztőben. */
.intro { margin-bottom: 30px; padding-bottom: 26px; border-bottom: 3px solid var(--lime); }
.card .rich a { color: var(--indigo); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 32px 24px 72px; }
.wrap.narrow { max-width: 820px; }

.card {
  background: var(--white);
  border-radius: 22px;
  padding: 34px;
  margin-bottom: 26px;
}
.card.coral { background: var(--coral); }
.card.coral h2, .card.coral p { color: var(--navy); }

.page-plain { background: #F3F2FB; }
.page-plain .wrap { color: var(--ink); }

/* ---------- Űrlap ---------- */

.form label,
.field { display: block; margin-bottom: 18px; font-weight: 700; color: var(--navy); font-size: .95rem; }
.field .hint { display: block; font-weight: 400; color: var(--grey); font-size: .85rem; margin-top: 3px; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=url], select, textarea {
  display: block; width: 100%; margin-top: 6px;
  padding: 12px 14px;
  font-family: inherit; font-size: 1rem; font-weight: 500; color: var(--ink);
  background: var(--white);
  border: 2px solid var(--indigo);
  border-radius: var(--radius);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--lime); outline-offset: 1px; border-color: var(--navy);
}
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2323188D' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }

.req { color: var(--coral); }

fieldset { border: 0; padding: 0; margin: 0 0 34px; }
legend { padding: 0; margin-bottom: 4px; }
.section-title {
  font-size: 1.25rem; font-weight: 800; color: var(--navy);
  text-transform: uppercase; letter-spacing: -0.01em;
  padding-bottom: 10px; margin-bottom: 20px;
  border-bottom: 3px solid var(--lime);
}
.section-title span { color: var(--coral); margin-right: 10px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }

.check {
  display: flex; gap: 10px; align-items: flex-start;
  font-weight: 500; font-size: .92rem; color: var(--navy); margin: 8px 0 22px;
}
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--indigo); flex: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Gombok ---------- */

.btn {
  display: inline-block; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
  color: var(--navy); background: var(--lime);
  border: 2px solid var(--navy); border-radius: var(--radius-pill);
  padding: 13px 30px;
  box-shadow: var(--shadow-hard);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--navy); }
.btn:active { transform: translateY(4px); box-shadow: none; }
.btn.small { font-size: .8rem; padding: 8px 16px; box-shadow: 0 3px 0 var(--navy); }
.btn.ghost { background: var(--white); }
.btn.coral { background: var(--coral); color: var(--white); }
.btn.danger { background: #F5B7B1; }
.btn.grey   { background: #E7E6F3; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Üzenetek ---------- */

.alert { border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; font-weight: 600; border: 2px solid; }
.alert-ok   { background: #E6F6EC; border-color: var(--ok);   color: #14602F; }
.alert-err  { background: #FDECEA; border-color: var(--err);  color: #8B2A1F; }
.alert-warn { background: #FFF6DC; border-color: var(--warn); color: #6A5000; }
.alert ul { margin: 6px 0 0; padding-left: 20px; }

.thanks { text-align: center; }
.thanks .big { font-size: 3rem; line-height: 1; margin-bottom: 12px; }
.thanks p { white-space: pre-line; }

/* ---------- Admin ---------- */

.admin { background: #F3F2FB; }
.admin-bar { background: var(--navy); color: var(--white); padding: 12px 24px; }
.admin-bar .inner { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.admin-bar .brand { font-weight: 800; text-transform: uppercase; margin-right: 12px; letter-spacing: .02em; }
.admin-bar a { color: var(--white); text-decoration: none; font-weight: 600; font-size: .92rem; }
.admin-bar a:hover, .admin-bar a.active { color: var(--lime); }
.admin-bar .spacer { margin-left: auto; }
.admin-bar .who { font-size: .85rem; opacity: .8; }

.admin .wrap { max-width: 1400px; padding-top: 26px; }
.admin h1 { font-size: 1.9rem; }
.panel { background: var(--white); border-radius: var(--radius); padding: 24px; margin-bottom: 22px; border: 1px solid var(--line); }

table.data { width: 100%; border-collapse: collapse; background: var(--white); font-size: .9rem; }
table.data th, table.data td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { background: var(--navy); color: var(--white); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
table.data tr:hover td { background: #FAFAFF; }
.table-scroll { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); }

.badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: .74rem; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.badge.pending      { background: #EDECF8; color: var(--navy); }
.badge.approved_all { background: var(--lime); color: #17420A; }
.badge.approved_one { background: #DFF3C3; color: #2E5416; }
.badge.rejected     { background: #F8D7D2; color: #8B2A1F; }
.badge.dup          { background: #FFE9A8; color: #6A5000; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 18px; }
.toolbar-right { display: flex; gap: 10px; margin-left: auto; flex-wrap: nowrap; }
@media (max-width: 900px) { .toolbar-right { margin-left: 0; flex-wrap: wrap; } }
.toolbar label { margin: 0; font-size: .82rem; }
.toolbar input, .toolbar select { margin-top: 4px; padding: 8px 12px; }

.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.actions form { display: inline; }

.muted { color: var(--grey); font-size: .85rem; }
.ph-list { columns: 2; font-size: .82rem; color: var(--grey); }
.ph-list code { color: var(--indigo); font-weight: 700; }
.danger-zone { border: 2px dashed var(--err); border-radius: var(--radius); padding: 20px; background: #FFF7F6; }
.danger-zone h2 { color: var(--err); }

/* ---------- Beágyazott nézet ---------- */

.embed { background: transparent; }
.embed .wrap { padding: 0; max-width: 100%; }
.embed .card { margin: 0; padding: 0; background: transparent; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}