@charset "UTF-8";
/* ==========================================================================
   Gyepmesteri Telep Dombóvár — az „Ebrendészeti Telep” plugin arculati rétege
   --------------------------------------------------------------------------
   A plugin 1.4.0-tól saját, px-alapú alapstílust hoz magával, ami önmagában is
   rendben néz ki. Ez az állomány NEM ismétli meg azt: csak annyit tesz hozzá,
   amit egy plugin nem tudhat — a webhely márkaszíneit és betűit, illetve az
   OceanWP / Elementor felülírásaival szembeni korrekciókat.

   Betöltés: inc/gyepmester-ui.php, priority 20 — vagyis a plugin soron belüli
   stílusa UTÁN, így azonos specifikusság mellett ez érvényesül.

   Tartalom
     1. A plugin változóinak márkára hangolása
     2. Tipográfia
     3. Téma-ütközések feloldása (OceanWP űrlapelemek)
     4. Finomhangolás: kártya, KPI, szűrősor
     5. Egyedi állatoldal a téma keretében
     6. Mozgáscsökkentés
   ========================================================================== */

/* ==========================================================================
   1. A PLUGIN VÁLTOZÓINAK MÁRKÁRA HANGOLÁSA

   A plugin a saját változóit a .telep-stats és a .telep-wrap elemekre teszi
   (a KPI-blokk ugyanis a .telep-wrap konténeren KÍVÜL kerül kiírásra, ezért
   mindkettőre kell). Itt ezeket kötjük rá a webhely tokenjeire, így a plugin
   és a téma egyetlen színrendszert használ.
   ========================================================================== */

.telep-stats,
.telep-wrap {
  --card-bg:     var(--gm-surface, #fff);
  --card-b:      var(--gm-line, #e3e9ee);
  --muted:       var(--gm-muted, #5b6b76);
  --ink:         var(--gm-ink, #1b2a33);
  --badge:       var(--gm-brand-050, #eef6fb);
  --accent:      var(--gm-brand, #05557c);
  --accent-2:    var(--gm-brand-050, #eef6fb);
  --accent-soft: var(--gm-brand-ring, rgba(5, 85, 124, .28));
  --cta:         var(--gm-accent, #b3452a);
  --cta-2:       var(--gm-accent-600, #9a3820);
  --tap:         var(--gm-tap, 44px);
}

/* ==========================================================================
   2. TIPOGRÁFIA
   A téma törzsbetűje (ABeeZee) csak 400-as vágatban létezik, ezért a
   hangsúlyos elemek Robotót / Roboto Slabot kapnak — mindkettő már be van
   töltve az oldalon, új webfont-kérés nem keletkezik.
   ========================================================================== */

.telep-card__title,
.telep-stat .val,
.telep-single__h {
  font-family: var(--gm-font-display, Georgia, serif);
  letter-spacing: -.01em;
}

.telep-badge,
.telep-status-pill,
.telep-btn,
.telep-field__label,
.telep-meta strong,
.telep-siblings .lab,
.telep-datasheet th {
  font-family: var(--gm-font-ui, sans-serif);
}

/* ==========================================================================
   3. TÉMA-ÜTKÖZÉSEK FELOLDÁSA

   Az OceanWP saját szabályokkal stílusozza a tartalomban lévő űrlapelemeket
   (mérve: a szűrősor <select> elemeinek függőleges belső margóját 0-ra vitte).
   A plugin szabályai `.telep-filters select` szinten állnak, ezért itt eggyel
   magasabb súllyal érvényesítjük újra a lényeget.
   ========================================================================== */

body .telep-filters input,
body .telep-filters select {
  min-height: var(--gm-tap, 44px);
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.3;
  border: 1px solid var(--gm-field-border, #7f8e99);
  border-radius: var(--gm-r-md, 12px);
  background-color: var(--gm-surface, #fff);
  color: var(--gm-ink, #1b2a33);
  box-shadow: none;
}
body .telep-filters input:focus,
body .telep-filters select:focus {
  border-color: var(--gm-brand, #05557c);
  box-shadow: 0 0 0 3px var(--gm-brand-ring, rgba(5, 85, 124, .28));
  outline: none;
}

/* A téma a tartalmi gombokat türkizre színezte; a plugin gombjai maradjanak
   a saját szerepük szerinti színen. */
body .telep-wrap .telep-btn,
body .telep-wrap .telep-btn:hover {
  font-family: var(--gm-font-ui, sans-serif);
  font-size: 15px;
  text-decoration: none;
  /* Az OceanWP a beküldő gombokat csupa nagybetűssé teszi; magyar, ékezetes
     feliratoknál ez nehezebben olvasható, és a kártyák gombjaival sem egyezne. */
  text-transform: none;
  letter-spacing: .01em;
}
body .telep-wrap .telep-actions > a.telep-btn:not(.telep-btn--ghost) {
  background-color: var(--gm-accent, #b3452a);
  border-color: var(--gm-accent, #b3452a);
  color: #fff;
}
body .telep-wrap .telep-actions > a.telep-btn:not(.telep-btn--ghost):hover {
  background-color: var(--gm-accent-600, #9a3820);
  border-color: var(--gm-accent-600, #9a3820);
}
body .telep-wrap .telep-btn--ghost {
  background-color: transparent;
  color: var(--gm-brand, #05557c);
  /* A korábbi #cdd7de keret fehér alapon kb. 1,4:1 — a WCAG 1.4.11 3:1-et kér
     a vezérlő azonosításához szükséges vizuális információra. */
  border-color: #8aa7b8;
}
body .telep-wrap .telep-btn--ghost:hover {
  background-color: var(--gm-brand-050, #eef6fb);
  color: var(--gm-brand, #05557c);
}

/* A lista a .entry-content konténerben ül, ezért a tartalmi hivatkozásokra írt
   szabály (kék + aláhúzás) a kártyacímekre és a tesó-miniatűrökre is ráhúzódott.
   A komponens saját hivatkozásai örökölt színt kapnak. */
body .telep-wrap .telep-card__title a,
body .telep-wrap .telep-sibling {
  color: inherit;
  text-decoration: none;
}
body .telep-wrap .telep-card__title a:hover {
  color: var(--gm-brand, #05557c);
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* Az OceanWP a `button[type="submit"]` szelektorral színezi a beküldő gombokat
   (a demóból örökölt türkizre), ami erősebb a .telep-btn osztálynál — a szűrősor
   gombja emiatt kilógott a márkából. */
body .telep-wrap button.telep-btn,
body .telep-filters .telep-btn {
  background-color: var(--gm-brand, #05557c);
  border-color: var(--gm-brand, #05557c);
  color: #fff;
}
body .telep-wrap button.telep-btn:hover,
body .telep-filters .telep-btn:hover {
  background-color: var(--gm-brand-600, #04486a);
  border-color: var(--gm-brand-600, #04486a);
  color: #fff;
}

/* ==========================================================================
   4. FINOMHANGOLÁS
   ========================================================================== */

/* Kártyák: a téma árnyékrendszeréhez igazított mélység. */
body .telep-card { box-shadow: var(--gm-sh-1); }
body .telep-card:hover {
  box-shadow: var(--gm-sh-3);
  border-color: var(--gm-brand-100, #d3e7f2);
}

/* A KPI-szám legyen a blokk vizuális horgonya. */
body .telep-stat .val { font-weight: 700; }
body .telep-stat { box-shadow: var(--gm-sh-1); }

/* Szűrősor: a téma konténerében legyen egy leheletnyivel levegősebb. */
body .telep-filters {
  padding: 16px 18px;
  gap: 12px 14px;
  box-shadow: var(--gm-sh-1);
}

/* A találati rács a tartalomszélességhez igazodjon. */
body .telep-grid { gap: 24px; }

/* ==========================================================================
   5. EGYEDI ÁLLATOLDAL A TÉMA KERETÉBEN

   A /allat/... nézeten az OceanWP jobb oldalsávot jelenít meg, amelyben a
   demóimportból ott maradt „Recent Posts” lorem ipsum lista ül. Az adatlap
   kapja a teljes szélességet.

   FIGYELEM: ez csak ELREJTI a widgeteket — a forráskódban benne maradnak.
   A widgeteket a Megjelenés → Widgetek alatt TÖRÖLNI kell. Ha ott már rendes,
   ide illő tartalom van, ez a blokk törölhető.
   ========================================================================== */

.single-shelter_animal #content-wrap { display: block; }
.single-shelter_animal #primary,
.single-shelter_animal .content-area { width: 100%; float: none; max-width: none; }
.single-shelter_animal #right-sidebar,
.single-shelter_animal #left-sidebar { display: none; }

/* Az Ocean Social Sharing doboz címe a demóból örökölt „Get fit with us”.
   A szöveg a plugin beállításából jön, CSS-ből nem írható át — az adatlapon
   viszont már van saját megosztás gomb, ezért itt elrejtjük a duplikátumot.
   A végleges javítás: írd át a címet az Ocean Social Sharing beállításainál. */
.single-shelter_animal .entry-share { display: none; }

.single-shelter_animal .entry-content { font-size: 16.5px; }

/* Az adatlap NEM ártáblázat: a gm-ui általános táblázat-szabályai (nagybetűs
   fejléc, jobbra zárt 2-3. oszlop az árakhoz) itt rossz eredményt adnának,
   ezért erre a táblára visszavonjuk őket. */
body .entry-content table.telep-datasheet th,
body .telep-wrap table.telep-datasheet th {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gm-ink-2, #35454f);
  background: var(--gm-surface-2, #f6f8fa);
  white-space: normal;
}
body .entry-content table.telep-datasheet :is(td, th),
body .telep-wrap table.telep-datasheet :is(td, th) {
  text-align: left;
  white-space: normal;
  font-variant-numeric: normal;
}

/* Az egyedi oldalon a cselekvés ne nyúljon a fél soron át. */
body .telep-single .telep-actions { margin-top: auto; flex-wrap: wrap; }
body .telep-single .telep-actions > a.telep-btn:not(.telep-btn--ghost) { flex: 0 0 auto; }
.single-shelter_animal .telep-single__h {
  font-size: clamp(20px, 1.1rem + .7vw, 25px);
  font-weight: 700;
  color: var(--gm-ink, #1b2a33);
}

/* ==========================================================================
   6. MOZGÁSCSÖKKENTÉS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .telep-card,
  .telep-btn,
  .telep-fav__ico,
  .telep-sibling img,
  .telep-media > a > img {
    transition: none !important;
  }
  .telep-card:hover,
  .telep-btn:hover,
  .telep-card:hover .telep-media > a > img {
    transform: none !important;
  }
}