/* ==========================================================================
   R2 Állatpatika – közös arculati alapok (tokenek + alapelemek)
   Ezt a fájlt használja az arculati lap és később a főoldal terve is.
   ========================================================================== */

/* Betűk – helyben tárolva (nem kell Google-kapcsolat, GDPR-barát) */
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/urbanist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/urbanist-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Shantell Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/shantell-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Shantell Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/shantell-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Fő színek – a logóból mérve */
  --r2-sarga: #FACB01;
  --r2-sarga-sotet: #E5B800;   /* hover / lenyomott állapot */
  --r2-fekete: #242424;
  --r2-barna: #6F4628;

  /* Kísérő színek – a logó kutya–cica figurájából */
  --r2-barack: #FFDAC5;
  --r2-vaj: #FFDF96;
  --r2-terrakotta: #E18F6D;

  /* Élénk kiegészítő – az üzlet műfüve, kis mennyiségben */
  --r2-mufu: #4F7A2E;

  /* Semlegesek */
  --r2-krem: #FFF8E6;
  --r2-feher: #FFFFFF;
  --r2-szurke: #6B645A;        /* másodlagos szöveg krém / fehér háttéren */
  --r2-vonal: rgba(36, 36, 36, .14);

  /* Betűk */
  --font-fo: "Urbanist", "Century Gothic", "Avenir Next", "Segoe UI", sans-serif;
  --font-kezi: "Shantell Sans", "Comic Sans MS", cursive;

  /* Formák */
  --r-kapszula: 1rem;          /* a logó kapszulája: nagy sugarú lekerekített téglalap */
  --r-kapszula-kicsi: .5rem;   /* címkék, apró elemek */
  --r-kartya: 28px;
  --r-kicsi: 14px;

  /* Térközök (8-as rács) */
  --t-1: .5rem;
  --t-2: 1rem;
  --t-3: 1.5rem;
  --t-4: 2rem;
  --t-6: 3rem;
  --t-8: 4rem;
  --t-12: 6rem;

  --arnyek: 0 18px 40px -18px rgba(36, 36, 36, .35);
  --gyors: 180ms cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-fo);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--r2-fekete);
  background: var(--r2-krem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

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

.t-display {
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}
.t-h2 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
.t-h3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0;
}
.t-lead {
  font-size: clamp(1.1875rem, 2vw, 1.375rem);
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
}
.t-cimke {                      /* a logó „ÁLLATPATIKA” feliratának rokona */
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.3;
}
.t-kezi {
  font-family: var(--font-kezi);
  font-weight: 600;
  line-height: 1.25;
}
.t-apro { font-size: .875rem; color: var(--r2-szurke); }

/* ---------- Gombok: mindig kapszula ---------- */

.gomb {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: 3.25rem;
  padding: .75rem 1.75rem;
  border: 2px solid var(--r2-fekete);
  border-radius: var(--r-kapszula);
  background: var(--r2-fekete);
  color: var(--r2-feher);
  font: inherit;
  font-weight: 800;
  font-size: .9375rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--gyors), background var(--gyors), color var(--gyors), box-shadow var(--gyors);
}
.gomb:hover { transform: translateY(-2px); box-shadow: 0 10px 0 -4px rgba(36, 36, 36, .18); }
.gomb:active { transform: translateY(0); box-shadow: none; }
.gomb:focus-visible { outline: 3px solid var(--r2-barna); outline-offset: 3px; }
.gomb svg { width: 1.125rem; height: 1.125rem; flex: none; }

.gomb--sarga { background: var(--r2-sarga); color: var(--r2-fekete); border-color: var(--r2-sarga); }
.gomb--sarga:hover { background: var(--r2-sarga-sotet); border-color: var(--r2-sarga-sotet); }
.gomb--korvonal { background: transparent; color: var(--r2-fekete); }
.gomb--korvonal:hover { background: var(--r2-fekete); color: var(--r2-feher); }
.gomb--kicsi { min-height: 2.5rem; padding: .375rem 1.125rem; font-size: .8125rem; border-radius: .75rem; }

/* ---------- Címkék ---------- */

.cimke {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .875rem;
  border-radius: var(--r-kapszula-kicsi);
  background: var(--r2-fekete);
  color: var(--r2-feher);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cimke--sarga { background: var(--r2-sarga); color: var(--r2-fekete); }
.cimke--barna { background: var(--r2-barna); color: var(--r2-feher); }
.cimke--vaj { background: var(--r2-vaj); color: var(--r2-fekete); }
.cimke--barack { background: var(--r2-barack); color: var(--r2-fekete); }
.cimke--terrakotta { background: var(--r2-terrakotta); color: var(--r2-fekete); }
.cimke--mufu { background: var(--r2-mufu); color: var(--r2-feher); }
.cimke--nyitva::before {
  content: "";
  width: .5rem; height: .5rem; border-radius: 50%;
  background: #7CC04B;
  box-shadow: 0 0 0 3px rgba(124, 192, 75, .3);
}
.cimke--zarva::before { background: var(--r2-terrakotta); box-shadow: 0 0 0 3px rgba(225, 143, 109, .3); }

/* ---------- Kapszula-portré: a logó formája fotóval ---------- */

.kapszula {
  --w: 168px;
  container-type: inline-size;
  width: var(--w);
  margin: 0;
  padding: calc(var(--w) * .07);
  border-radius: calc(var(--w) * .27);   /* a logó arányai */
  background: var(--r2-fekete);
  flex: none;
}
.kapszula__ablak {
  position: relative;
  height: calc(var(--w) * 1.34);
  border: 2px solid var(--r2-feher);
  border-radius: calc(var(--w) * .17);
  overflow: hidden;
  background: var(--r2-barna);
}
.kapszula__ablak::after {        /* a logó barna kerete */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 calc(var(--w) * .03) var(--r2-barna);
  pointer-events: none;
}
.kapszula__ablak img { width: 100%; height: 100%; object-fit: cover; }
.kapszula__nev {
  display: grid;
  place-items: center;
  height: calc(var(--w) * .56);
  padding-bottom: calc(var(--w) * .1);
  color: var(--r2-feher);
  font-weight: 800;
  font-size: 15cqw;
  letter-spacing: -.01em;
  line-height: 1;
  text-align: center;
}
.kapszula__nev--hosszu { font-size: 10.5cqw; }

.kapszula__ablak--ures {         /* amíg nincs fotó */
  display: grid;
  place-items: center;
  padding: 12%;
  background: var(--r2-vaj);
  color: var(--r2-barna);
  font-family: var(--font-kezi);
  font-weight: 600;
  font-size: 11cqw;
  line-height: 1.15;
  text-align: center;
}

/* Csapattag: kapszula + mellette függőlegesen a szerep, ahogy a logón a felirat */
.csapat {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  padding: .5rem .25rem 1.5rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.csapattag {
  display: flex;
  flex-direction: row-reverse;
  gap: .5rem;
  align-items: stretch;
  scroll-snap-align: start;
  flex: none;
}
.csapattag__szerep {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.2;
  padding-top: 2.5rem;
}

/* ---------- Kártya ---------- */

.kartya {
  background: var(--r2-feher);
  border-radius: var(--r-kartya);
  overflow: hidden;
}

/* ---------- Fekvő fejléclogó ---------- */

.fejlec-logo { display: inline-flex; align-items: center; gap: .875rem; text-decoration: none; color: inherit; }
.fejlec-logo img { height: 64px; width: auto; }
.fejlec-logo span { font-weight: 800; letter-spacing: .22em; font-size: 1.0625rem; text-transform: uppercase; line-height: 1; }

/* ---------- Kézírásos jegyzet fotóra ---------- */

.jegyzet {
  position: absolute;
  max-width: 15rem;
  padding: .625rem 1.125rem;
  border-radius: 1.25rem 1.25rem 1.25rem .25rem;
  background: var(--r2-sarga);
  color: var(--r2-fekete);
  font-family: var(--font-kezi);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.25;
  transform: rotate(-3deg);
  box-shadow: var(--arnyek);
}
.jegyzet--feher { background: var(--r2-feher); }
.jegyzet--jobb { border-radius: 1.25rem 1.25rem .25rem 1.25rem; transform: rotate(2.5deg); }

/* ---------- Kerek matrica ---------- */

.matrica { aspect-ratio: 1; filter: drop-shadow(0 10px 14px rgba(36, 36, 36, .25)); }
.matrica__forgo { transform-origin: 50% 50%; animation: forog 24s linear infinite; }
@keyframes forog { to { transform: rotate(360deg); } }

/* ---------- Értékkártyák („Miért R2?”) ---------- */

.ertekek { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ertek { border-radius: var(--r-kartya); padding: 1.75rem; display: grid; gap: .875rem; align-content: start; min-height: 250px; }
.ertek svg { width: 3.5rem; height: 3.5rem; margin-bottom: auto; }
.ertek p { margin: 0; font-size: 1rem; line-height: 1.45; }
.ertek:nth-child(1) { background: var(--r2-sarga); }
.ertek:nth-child(2) { background: var(--r2-barack); }
.ertek:nth-child(3) { background: var(--r2-fekete); color: var(--r2-feher); }
.ertek:nth-child(4) { background: var(--r2-vaj); }

/* ---------- Blogkártya ---------- */

.blogkartya { display: grid; align-content: start; background: var(--r2-feher); border-radius: var(--r-kartya); overflow: hidden; color: inherit; text-decoration: none; transition: transform var(--gyors), box-shadow var(--gyors); }
.blogkartya__kep { overflow: hidden; }
.blogkartya img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform 500ms cubic-bezier(.2, .7, .2, 1); }
.blogkartya__szoveg { padding: 1.375rem 1.5rem 1.625rem; display: grid; gap: .625rem; justify-items: start; }
a.blogkartya:hover { transform: translateY(-4px); box-shadow: var(--arnyek); }
a.blogkartya:hover img { transform: scale(1.04); }
a.blogkartya:focus-visible { outline: 3px solid var(--r2-barna); outline-offset: 3px; }

/* ---------- Eseménykártya ---------- */

.esemeny { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; background: var(--r2-fekete); color: var(--r2-feher); border-radius: var(--r-kartya); padding: 1.25rem 1.5rem 1.25rem 1.25rem; }
.esemeny__nap { width: 5rem; padding: .875rem 0; border-radius: 1.25rem; background: var(--r2-sarga); color: var(--r2-fekete); text-align: center; line-height: 1; display: grid; gap: .25rem; }
.esemeny__nap b { font-size: 2rem; font-weight: 800; }
.esemeny__nap span { font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.esemeny--sarga { background: var(--r2-sarga); color: var(--r2-fekete); }
.esemeny--sarga .esemeny__nap { background: var(--r2-fekete); color: var(--r2-sarga); }

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

.urlap { display: grid; gap: 1rem; }
.mezo { display: grid; gap: .375rem; }
.mezo label { font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mezo input, .mezo textarea { font: inherit; padding: .875rem 1.25rem; border: 2px solid var(--r2-fekete); border-radius: var(--r-kapszula); background: var(--r2-feher); color: var(--r2-fekete); width: 100%; resize: vertical; }
.mezo input::placeholder, .mezo textarea::placeholder { color: #8A8378; }
.mezo input:focus, .mezo textarea:focus { outline: 3px solid var(--r2-sarga); outline-offset: 2px; }
.pipa { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; font-size: .9375rem; line-height: 1.45; cursor: pointer; }
.pipa input { appearance: none; width: 1.625rem; height: 1.625rem; margin: 0; border: 2px solid var(--r2-fekete); border-radius: .5rem; background: var(--r2-feher); display: grid; place-items: center; cursor: pointer; }
.pipa input::after { content: ""; width: .5rem; height: .875rem; border: solid var(--r2-fekete); border-width: 0 3px 3px 0; transform: translateY(-1px) rotate(45deg) scale(0); transition: transform var(--gyors); }
.pipa input:checked { background: var(--r2-sarga); }
.pipa input:checked::after { transform: translateY(-1px) rotate(45deg) scale(1); }
.pipa input:focus-visible { outline: 3px solid var(--r2-barna); outline-offset: 2px; }

/* ---------- Kapszulaminta ---------- */

.minta-kapszula {
  background-color: var(--r2-fekete);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23FACB01' stroke-width='3' opacity='.55'%3E%3Crect x='12' y='8' width='22' height='50' rx='11' transform='rotate(24 23 33)'/%3E%3Crect x='76' y='62' width='22' height='50' rx='11' transform='rotate(-32 87 87)'/%3E%3C/g%3E%3Cg fill='%23FACB01' opacity='.55'%3E%3Ccircle cx='86' cy='24' r='5'/%3E%3Ccircle cx='28' cy='92' r='5'/%3E%3C/g%3E%3C/svg%3E");
}
.minta-kapszula--sarga {
  background-color: var(--r2-sarga);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23242424' stroke-width='3' opacity='.8'%3E%3Crect x='12' y='8' width='22' height='50' rx='11' transform='rotate(24 23 33)'/%3E%3Crect x='76' y='62' width='22' height='50' rx='11' transform='rotate(-32 87 87)'/%3E%3C/g%3E%3Cg fill='%236F4628'%3E%3Ccircle cx='86' cy='24' r='5'/%3E%3Ccircle cx='28' cy='92' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Karbantartás oldal ---------- */

.karbantartas {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--t-4);
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 4vw, 3rem) clamp(5rem, 9vw, 6.5rem);
  background: var(--r2-sarga);
  overflow: hidden;
}
.karbantartas .fejlec-logo img { height: 56px; }
.karbantartas__fej { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.karbantartas__suti { padding: .5rem 0; border: 0; background: none; color: inherit; font: inherit; font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.karbantartas__suti:focus-visible { outline: 3px solid var(--r2-barna); outline-offset: 3px; }
.karbantartas__racs { width: min(100%, 72rem); margin-inline: auto; display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 900px) { .karbantartas__racs { grid-template-columns: 1.2fr .8fr; } }
.karbantartas__szoveg { display: grid; gap: 1.5rem; justify-items: start; }
.karbantartas__szoveg > * { animation: karb-felbuk .8s cubic-bezier(.2, .8, .2, 1) both; }
.karbantartas__szoveg > :nth-child(2) { animation-delay: .08s; }
.karbantartas__szoveg > :nth-child(3) { animation-delay: .16s; }
.karbantartas__szoveg > :nth-child(n+4) { animation-delay: .24s; }
.karbantartas__szoveg .t-lead { max-width: 34rem; }
.karbantartas__szoveg .sor { display: flex; flex-wrap: wrap; gap: .75rem; }

/* „munkaterület” szalag: fekete–sárga csíkos kapszula, ami folyamatosan halad */
.karbantartas__csik { display: grid; gap: .5rem; width: min(100%, 24rem); }
.karbantartas__csik span {
  height: 1.125rem;
  border: 2px solid var(--r2-fekete);
  border-radius: var(--r-kapszula);
  background-color: var(--r2-sarga);
  background-image: linear-gradient(-45deg, var(--r2-fekete) 25%, transparent 25%, transparent 50%, var(--r2-fekete) 50%, var(--r2-fekete) 75%, transparent 75%);
  background-size: 28px 28px;
  animation: karb-csik 1.1s linear infinite;
}

.karbantartas__info { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; font-size: .9375rem; font-weight: 700; }
.karbantartas__info > :not(.cimke) { display: inline-flex; align-items: center; gap: .5rem; }
.karbantartas__info a { color: inherit; text-decoration: none; }
.karbantartas__info a:hover { text-decoration: underline; text-underline-offset: 3px; }
.karbantartas__info svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* A logó mosolygó matricája: forog a felirat, billeg a matrica, pislog a szem */
.karbantartas__kep { position: relative; justify-self: center; width: min(78vw, 22rem); animation: karb-felbuk 1s .15s cubic-bezier(.2, .8, .2, 1) both; }
.karbantartas__kep .matrica { width: 100%; animation: karb-billeg 6s ease-in-out infinite; }
.karbantartas__kep .jegyzet { left: -1rem; bottom: .5rem; }
.matrica__szem { transform-box: fill-box; transform-origin: center; animation: karb-pislog 4.5s infinite; }

/* Lebegő kapszulák – patika, de vidáman */
.karbantartas__kapszulak { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.karbantartas__kapszulak i {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 1.375rem; height: 3.5rem;
  border: 3px solid var(--r2-fekete);
  border-radius: 999px;
  background: linear-gradient(var(--r2-feher) 50%, var(--r2-terrakotta) 50%);
  rotate: var(--r, 20deg);
  animation: karb-lebeg var(--d, 7s) ease-in-out var(--k, 0s) infinite;
}
@media (max-width: 1199px) { .karbantartas__kapszulak i:nth-child(-n+3) { display: none; } }

/* Babér mancsnyomai sétálnak végig az oldal alján */
.karbantartas__mancsok { position: absolute; left: 0; right: 0; bottom: 1rem; height: 3rem; z-index: -1; pointer-events: none; color: var(--r2-fekete); }
.karbantartas__mancsok svg {
  position: absolute;
  left: calc(var(--i) * 9% + 2%); bottom: 0;
  width: 1.625rem; height: 1.625rem;
  rotate: 90deg;
  opacity: 0;
  animation: karb-mancs 6s linear calc(var(--i) * .45s) infinite;
}
.karbantartas__mancsok svg:nth-child(odd) { bottom: 1.25rem; }

@keyframes karb-felbuk { from { opacity: 0; transform: translateY(18px); } }
@keyframes karb-csik { to { background-position: 28px 0; } }
@keyframes karb-billeg { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-8px); } }
@keyframes karb-pislog { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes karb-lebeg { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px) rotate(16deg); } }
@keyframes karb-mancs { 0% { opacity: 0; } 6%, 45% { opacity: .8; } 60%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .matrica__forgo { animation: none; }
  .gomb, .blogkartya, .blogkartya img { transition: none; }
  .karbantartas *, .karbantartas *::before { animation: none !important; }
  .karbantartas__mancsok svg { opacity: .3; }
}