/* =========================================================
   TUDÁSTÁR – shared layout override-ok (scoped)
   Cél: YOOtheme tipó/színek maradjanak, csak layout fixek.
   Érintett legacy template-ek: plants.php, pests.php, months.php, month.php, newgarden.php
   ========================================================= */

/* alap wrap padding: 20px (a month oldalak felülírják 16px-re) */
body.page-template-plants,
body.page-template-pests,
body.page-template-months-php,
body.page-template-month-php,
body.page-template-month,
body.page-template-newgarden-php,
body.page-id-58 {
  --kk-wrap-pad: 20px;
  --kk-wrap-max: 1100px;
  --kk-fullwidth-left: calc(50% - 50vw);
  --kk-fullwidth-right: calc(50% - 50vw);
  --kk-hairline-pad: 10px;
}

/* =========================================================
   TABBED LAYOUT – legacy komponens vissza (shared)
   Forrás: legacy-style-b.css
   ========================================================= */

.tabbed-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
  padding-top: 80px;
  text-align: center;
  word-spacing: 0;
}

.tabbed-layout .tabbed-layout-tab {
  display: inline-block;
}

.tabbed-layout .tabbed-layout-tab a {
  display: block;
  height: 50px;
  line-height: 50px;
  min-width: 180px;
  margin: 0 20px;
  padding: 0 20px;

  background: #ccc;
  color: #fff;

  letter-spacing: 1px;
  text-transform: uppercase;
}

.tabbed-layout .tabbed-layout-tab a:hover {
  background: #71bb55;
  color: #fff;
}

.tabbed-layout .tabbed-layout-tab a span {
  color: #fff;
  font-weight: 700;
  letter-spacing: 1px;
}

/* aktív tab */
.tabbed-layout .tabbed-layout-tab.tabbed-layout-tab__active a {
  background: #fff;
  color: #71bb55;
}

.tabbed-layout .tabbed-layout-tab.tabbed-layout-tab__active a span {
  color: #71bb55;
}

/* reszponzív finomhangolás (legacy-ből) */
@media screen and (max-width: 1250px) {
  .tabbed-layout .tabbed-layout-tab a {
    margin: 0 12px;
    min-width: auto;
  }
}

@media screen and (max-width: 750px) {
  .tabbed-layout .tabbed-layout-tab {
    height: 50px;
    margin-right: 5px;
    vertical-align: bottom;
    width: 28%;
  }

  .tabbed-layout .tabbed-layout-tab a {
    display: table-cell;
    font-size: 11px;
    height: 50px;
    line-height: 16px;
    padding: 0 10px;
    vertical-align: middle;
    width: 230px;
  }

  .tabbed-layout .tabbed-layout-tab a span {
    display: block;
  }
}

/* 1) YOO wrapper kill: a legacy oldalaknál ne legyen extra padding */
body.page-template-plants #tm-main.uk-section,
body.page-template-pests #tm-main.uk-section,
body.page-template-months-php #tm-main.uk-section,
body.page-template-month-php #tm-main.uk-section,
body.page-template-month #tm-main.uk-section,
body.page-template-newgarden-php #tm-main.uk-section,
body.page-id-58 #tm-main.uk-section {
  padding-top: 0;
  padding-bottom: 0;
}

body.page-template-plants #tm-main > .uk-container,
body.page-template-pests #tm-main > .uk-container,
body.page-template-months-php #tm-main > .uk-container,
body.page-template-month-php #tm-main > .uk-container,
body.page-template-month #tm-main > .uk-container,
body.page-template-newgarden-php #tm-main > .uk-container,
body.page-id-58 #tm-main > .uk-container {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* (opcionális, hagytad newgardenben is): belső uk-container-ek kinullázása */
body.page-template-newgarden-php #tm-main .uk-container,
body.page-id-58 #tm-main .uk-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* 2) Full-width legacy szekciók (gray/white/green + newgarden infographics blokkok) */
body.page-template-plants section.gray,
body.page-template-plants section.white,
body.page-template-plants section.green,
body.page-template-pests section.gray,
body.page-template-pests section.white,
body.page-template-pests section.green,
body.page-template-months-php section.gray,
body.page-template-months-php section.white,
body.page-template-months-php section.green,
body.page-template-month-php section.gray,
body.page-template-month-php section.white,
body.page-template-month-php section.green,
body.page-template-month section.gray,
body.page-template-month section.white,
body.page-template-month section.green,
body.page-template-newgarden-php section.gray,
body.page-template-newgarden-php section.green,
body.page-template-newgarden-php section.infographics,
body.page-template-newgarden-php section.infographics-visual,
body.page-id-58 section.gray,
body.page-id-58 section.green,
body.page-id-58 section.infographics,
body.page-id-58 section.infographics-visual {
  width: 100vw;
  margin-left: var(--kk-fullwidth-left);
  margin-right: var(--kk-fullwidth-right);
}

/* 3) Wrap belső szélesség egységesítése */
body.page-template-plants .wrap,
body.page-template-pests .wrap,
body.page-template-months-php .wrap,
body.page-template-month-php .wrap,
body.page-template-month .wrap,
body.page-template-newgarden-php .wrap,
body.page-id-58 .wrap {
  max-width: var(--kk-wrap-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--kk-wrap-pad);
  padding-right: var(--kk-wrap-pad);
}

/* 4) Ne legyen extra margin a legelső blokknál */
body.page-template-plants #tm-main > .uk-container > :first-child,
body.page-template-pests #tm-main > .uk-container > :first-child,
body.page-template-months-php #tm-main > .uk-container > :first-child,
body.page-template-month-php #tm-main > .uk-container > :first-child,
body.page-template-month #tm-main > .uk-container > :first-child,
body.page-template-newgarden-php #tm-main > .uk-container > :first-child,
body.page-id-58 #tm-main > .uk-container > :first-child {
  margin-top: 0;
}

/* 5) Hero (gray bottom) és tabbed-layout közti hajszálrés kezelése */
body.page-template-plants section.gray.bottom,
body.page-template-pests section.gray.bottom,
body.page-template-months-php section.gray.bottom,
body.page-template-month-php section.gray.bottom,
body.page-template-month section.gray.bottom {
  padding-bottom: var(--kk-hairline-pad);
}

/* TUDÁSTÁR: tabbed-layout ne tolja le túl mélyre a tabokat */
body.page-template-plants .tabbed-layout,
body.page-template-pests .tabbed-layout,
body.page-template-months-php .tabbed-layout,
body.page-template-month-php .tabbed-layout,
body.page-template-month .tabbed-layout {
  padding-top: 24px;     /* 80px -> 24px (ízlés szerint 16–32) */
}

/* KÖZÖS “hero” háttér (szürke + SVG alnyomat) – Tudástár */
body.page-template-plants section.gray.bottom,
body.page-template-pests section.gray.bottom,
body.page-template-months-php section.gray.bottom,
body.page-template-month-php section.gray.bottom,
body.page-template-month section.gray.bottom,
body.page-template-plants .tabbed-layout,
body.page-template-pests .tabbed-layout,
body.page-template-months-php .tabbed-layout,
body.page-template-month-php .tabbed-layout,
body.page-template-month .tabbed-layout,
body.page-id-58 section.gray.bottom,
body.page-id-58 section.gray.bottom .tabbed-layout {
  background-color: #f8f7f4; /* “címlapos” szürkéhez igazítsd, ha mást használsz */
  background-image: url("/wp-content/uploads/hero-watermark.svg");
  background-repeat: no-repeat;
  background-position: 50% 35%; /* finomhang: közép/feljebb/lejjebb */
  background-size: 1600px auto; /* finomhang: 900–1800px tipikusan */
}