/*
Theme Name: Mezőberény Városi Sablon
Theme URI: https://mezobereny.hu
Author: Mezőberény Város Önkormányzata
Author URI: https://mezobereny.hu
Description: Önkormányzati/városi honlap sablon, amely a mezőberény.hu weboldal vizuális megjelenését követi: sötét felső elérhetőségi sáv, szépia városkép fejléc díszes cirkalmas felirattal, három hasábos elrendezés (bal oldalt Elérhetőségek és Menü doboz, jobb oldalt Köszöntő, Keresés, Eseménynaptár, Anyakönyvi hírek stb.), krém-barna színvilág, gyorslink gombsor és kétoszlopos hírblokk. Testreszabható fejlécképpel, menükkel és widget-mezőkkel.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mezobereny
Tags: custom-header, custom-menu, three-columns, translation-ready
*/

/* -----------------------------------------------------------
   0. Alapok / változók
----------------------------------------------------------- */
:root{
  --mb-cream: #efe6d2;
  --mb-cream-light: #f8f2e4;
  --mb-cream-lighter: #fbf7ee;
  --mb-topbar: #17140f;
  --mb-topbar-text: #cfc6b4;
  --mb-gold-dark: #a9885c;
  --mb-gold-mid: #c2a878;
  --mb-gold-light: #d8c39a;
  --mb-brown-text: #3a2c18;
  --mb-brown-link: #5a3c1e;
  --mb-brown-link-hover: #8a6a34;
  --mb-border: #b79f74;
  --mb-border-light: #ddccab;
  --mb-green: #82a23f;
  --mb-green-dark: #61802b;
  --mb-sky-top: #a9d3e8;
  --mb-sky-bottom: #eef6fb;
  --mb-font-body: Georgia, 'Times New Roman', Times, serif;
  --mb-font-script: 'Great Vibes', 'Brush Script MT', cursive;
  --mb-radius: 3px;
  --mb-radius-lg: 9px;
  --mb-khaki-flat: #c3a877;
  --mb-frame-dark: #4a3418;
  --mb-maxw: 1200px;
}

*{ box-sizing: border-box; }

html{ font-size: 16px; }
html.mb-font-large{ font-size: 18px; }
html.mb-font-larger{ font-size: 20px; }
html.mb-contrast body{ background:#000; color:#fff; }
html.mb-contrast a{ color:#ffd76b !important; }
html.mb-contrast .widget-box,
html.mb-contrast .quicklink,
html.mb-contrast .site-header{ background:#000 !important; border-color:#ffd76b !important; }

body{
  margin:0;
  font-family: var(--mb-font-body);
  background: var(--mb-cream);
  color: var(--mb-brown-text);
  font-size: 1rem;
  line-height: 1.55;
}

a{ color: var(--mb-brown-link); text-decoration: underline; }
a:hover{ color: var(--mb-brown-link-hover); }

img{ max-width:100%; height:auto; }

ul{ margin:0; padding:0; list-style:none; }

.screen-reader-text{
  position:absolute !important;
  clip:rect(1px,1px,1px,1px);
  width:1px;height:1px;overflow:hidden;
}

.container{ max-width: var(--mb-maxw); margin:0 auto; padding:0 16px; }

/* -----------------------------------------------------------
   1. Felső elérhetőségi / kisegítő sáv
----------------------------------------------------------- */
#mb-topbar{
  background: var(--mb-topbar);
  color: var(--mb-topbar-text);
}
#mb-topbar .container{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  padding-top:6px;
  padding-bottom:6px;
  font-size:0.8rem;
}
#mb-topbar span.mb-topbar-label{ margin-right:2px; }
#mb-topbar button{
  background:none;
  border:1px solid #4a4536;
  color: var(--mb-topbar-text);
  cursor:pointer;
  font-family: var(--mb-font-body);
  line-height:1;
  padding:3px 7px;
  border-radius: var(--mb-radius);
}
#mb-topbar button:hover{ background:#2a2618; }
#mb-topbar button.font-a2{ font-size:1.05em; }
#mb-topbar button.font-a3{ font-size:1.2em; }
#mb-topbar button.mb-contrast-toggle{
  border-radius:50%;
  width:26px;height:26px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* -----------------------------------------------------------
   2. Fejléc / szépia városkép sáv + logó
----------------------------------------------------------- */
.site-header{
  position:relative;
  background: linear-gradient(var(--mb-sky-top), var(--mb-sky-bottom));
  border-bottom: 4px solid var(--mb-gold-dark);
}
.mb-header-visual{ position:relative; }
.site-header .header-image-wrap{
  width:100%;
  overflow:hidden;
  line-height:0;
}
.site-header .header-image-wrap img{
  width:100%;
  display:block;
  object-fit:cover;
  max-height:230px;
}
.site-header .header-image-placeholder{
  height:190px;
  background:
    linear-gradient(to top, rgba(58,44,24,.15), rgba(58,44,24,0) 60%),
    linear-gradient(var(--mb-sky-top), var(--mb-sky-bottom));
}

/* A logófelirat közvetlenül a fejlécképre van rátéve (bal alul), ahogy az
   eredeti oldalon is - nem alatta, önálló sávban. */
.site-branding{
  position:absolute;
  left:0;
  right:0;
  bottom:6px;
  padding: 0 16px;
  max-width: var(--mb-maxw);
  margin-left:auto;
  margin-right:auto;
  pointer-events:none;
}
.site-branding .site-title{
  font-family: var(--mb-font-script);
  font-size: 3.4rem;
  line-height:1;
  color:#241c10;
  text-shadow: 0 1px 2px rgba(255,255,255,.6);
  margin:0;
  display:inline-block;
  pointer-events:auto;
}
.site-branding .site-title a{ color:inherit; text-decoration:none; }
.mb-logo-flourish{
  display:block;
  width:180px;
  height:auto;
  margin:-6px 0 0 4px;
}
.mb-logo-crest{
  display:block;
  width:22px;
  height:auto;
  margin:2px 0 0 8px;
}
.site-branding .site-description{
  display:block;
  font-family: var(--mb-font-body);
  font-size:.85rem;
  font-style:italic;
  color:#3a2c18;
  margin-top:2px;
  pointer-events:auto;
}
.custom-logo-link img{ max-height:120px; width:auto; }

.mb-breadcrumb-row{
  background: var(--mb-khaki-flat);
  border-top:1px solid var(--mb-gold-dark);
  border-bottom:2px solid var(--mb-frame-dark);
  font-size:.85rem;
}
.mb-breadcrumb-row .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  padding-top:7px;
  padding-bottom:7px;
}
.mb-breadcrumb a{ text-decoration:none; color:#2c2210; }
.mb-today{ color:#2c2210; }

/* Mobil hamburger-menü (a mezőberény.hu-nak nincs gyári mobil nézete) */
.mb-mobile-nav-bar{ display:none; }
.mb-mobile-nav-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:10px 16px;
  background: linear-gradient(180deg, var(--mb-gold-light), var(--mb-gold-mid));
  border:none;
  border-top:1px solid var(--mb-border-light);
  border-bottom:1px solid var(--mb-gold-dark);
  color:#2c2210;
  font-family: var(--mb-font-body);
  font-weight:bold;
  font-size:1rem;
  cursor:pointer;
}
.mb-hamburger, .mb-hamburger::before, .mb-hamburger::after{
  content:"";
  display:block;
  width:22px;
  height:2px;
  background:#2c2210;
  border-radius:1px;
}
.mb-hamburger{ position:relative; }
.mb-hamburger::before{ position:absolute; top:-6px; }
.mb-hamburger::after{ position:absolute; top:6px; }
.mb-mobile-nav-toggle.is-active .mb-hamburger{ background:transparent; }
.mb-mobile-nav-toggle.is-active .mb-hamburger::before{ top:0; transform:rotate(45deg); }
.mb-mobile-nav-toggle.is-active .mb-hamburger::after{ top:0; transform:rotate(-45deg); }

.mb-mobile-nav{
  display:none;
  background: var(--mb-cream-lighter);
  border-bottom:3px solid var(--mb-gold-dark);
}
.mb-mobile-nav.is-open{ display:block; }
.mb-mobile-nav ul ul{ padding-left:14px; }
.mb-mobile-nav a{
  display:block;
  padding:11px 16px;
  text-decoration:none;
  color: var(--mb-brown-link);
  border-bottom:1px dotted var(--mb-border-light);
}
.mb-mobile-nav a:active,
.mb-mobile-nav a:hover{ background: var(--mb-cream); }

/* -----------------------------------------------------------
   3. Három hasábos elrendezés
----------------------------------------------------------- */
.site-columns{
  max-width: var(--mb-maxw);
  margin:18px auto;
  padding:0 16px;
  display:flex;
  align-items:flex-start;
  gap:18px;
}
.sidebar-col{
  flex: 0 0 225px;
  width:225px;
}
#primary{
  flex:1 1 auto;
  min-width:0;
}

/* -----------------------------------------------------------
   4. Widget dobozok (közös stílus mindkét oldalsávra)
----------------------------------------------------------- */
.widget-box{
  background: var(--mb-cream-lighter);
  border:1px solid var(--mb-gold-dark);
  border-radius: var(--mb-radius-lg);
  margin-bottom:16px;
  box-shadow: 0 2px 5px rgba(58,44,24,.18);
}
.widget-box .widget-title,
.widget-box h2.widget-title,
.widget-box h3{
  margin:0;
  background: var(--mb-khaki-flat);
  border-bottom:1px solid var(--mb-gold-dark);
  border-radius: var(--mb-radius-lg) var(--mb-radius-lg) 0 0;
  color:#2c2210;
  font-size:1rem;
  font-weight:normal;
  padding:8px 12px;
}
.widget-box .widget-body{ padding:10px 12px; font-size:.9rem; }
.widget-box ul li{
  padding:4px 0;
  border-bottom:1px dotted var(--mb-border-light);
}
.widget-box ul li:last-child{ border-bottom:none; }
.widget-box a{ text-decoration:underline; }

/* Bal oldal - Menü doboz mint navigáció, flyout almenükkel */
.mb-menu-box .widget-body{ padding:0; }
.mb-menu-box > .widget-body > ul > li{ position:relative; }
.mb-menu-box a{
  display:block;
  padding:8px 12px;
  text-decoration:none;
  color: var(--mb-brown-link);
  border-bottom:1px solid var(--mb-border-light);
}
.mb-menu-box li:last-child > a{ border-bottom:none; }
.mb-menu-box a:hover{ background: var(--mb-cream); color: var(--mb-brown-link-hover); }

/* Almenük: alapból rejtve, a szülő elem fölé görgetéskor (hover/focus) kicsúsznak jobbra,
   ahogy a mezőberény.hu Menü dobozában is látható. */
.mb-menu-box .sub-menu{
  display:none;
  position:absolute;
  top:0;
  left:100%;
  min-width:220px;
  background: var(--mb-cream-lighter);
  border:1px solid var(--mb-gold-dark);
  box-shadow: 2px 3px 8px rgba(58,44,24,.3);
  z-index:20;
}
.mb-menu-box .sub-menu .sub-menu{ top:0; left:100%; }
.mb-menu-box li:hover > .sub-menu,
.mb-menu-box li:focus-within > .sub-menu{ display:block; }
.mb-menu-box .sub-menu a{ padding:9px 14px; border-bottom:1px solid var(--mb-border-light); white-space:nowrap; }
.mb-menu-box .sub-menu li:last-child > a{ border-bottom:none; }

/* Opcionális kiemelés: a menüponthoz "menu-flag" CSS osztályt rendelve
   (Megjelenés » Menük » Menüpont beállításai » CSS osztályok) piros-fehér-zöld
   sávot kap, ahogy a "Választási információk" tétel az eredeti oldalon. */
.mb-menu-box li.menu-flag > a,
.mb-menu-box li.menu-item.menu-flag > a{
  background: linear-gradient(90deg, #ce2b37 0%, #ce2b37 33%, #ffffff 33%, #ffffff 66%, #2e6b3e 66%, #2e6b3e 100%);
  color:#241c10;
  font-weight:bold;
}

/* Elérhetőségek doboz */
.mb-contact-box .widget-body{ text-align:center; }
.mb-contact-box img{
  display:block;
  margin:0 auto 10px;
  border:1px solid var(--mb-border-light);
  border-radius: var(--mb-radius);
  box-shadow: 0 2px 5px rgba(58,44,24,.3);
}
.mb-contact-box address{ font-style:normal; margin:0 0 8px; }
.mb-contact-box ul{ text-align:center; }
.mb-contact-box ul li{ border-bottom:1px solid var(--mb-border-light); padding:6px 0; }
.mb-contact-box ul li:last-child{ border-bottom:none; }

/* Banner kép sáv (bal oldal, pályázati logók) */
.mb-banner-widgets img{
  display:block;
  margin-bottom:14px;
  border:1px solid var(--mb-border-light);
  border-radius: var(--mb-radius);
  box-shadow: 0 2px 5px rgba(58,44,24,.2);
}

/* -----------------------------------------------------------
   5. Gyorslink gombsor (középső tartalom teteje)
----------------------------------------------------------- */
.mb-quicklinks{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin:16px 0 24px;
}
.mb-quicklinks a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:68px;
  padding:10px 14px;
  border-radius: var(--mb-radius-lg);
  text-decoration:none;
  font-weight:bold;
  font-size:.92rem;
  color:#4a2408;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  background:
    linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, var(--mb-gold-light) 0%, var(--mb-gold-mid) 45%, var(--mb-gold-dark) 60%, #8a6d40 100%);
  border:1px solid #6b5028;
  box-shadow:
    0 3px 6px rgba(43,26,8,.35),
    inset 0 1px 0 rgba(255,255,255,.5);
  transition: filter .15s ease, transform .1s ease;
}
.mb-quicklinks a:hover{ filter:brightness(1.06); }
.mb-quicklinks a:active{ transform: translateY(1px); box-shadow: 0 1px 3px rgba(43,26,8,.35), inset 0 1px 0 rgba(255,255,255,.5); }
.mb-quicklinks a.mb-quicklink-highlight{
  color:#16280a;
  background:
    linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #b6d97e 0%, #8fb752 45%, var(--mb-green) 60%, var(--mb-green-dark) 100%);
  border-color:#4d6b23;
}
/* -----------------------------------------------------------
   6. Lapozó (oldal tetején lévő 1 2 3 4 5 számozás)
----------------------------------------------------------- */
.mb-pagination{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-bottom:18px;
}
.mb-pagination a, .mb-pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;height:26px;
  border-radius: var(--mb-radius);
  border:1px solid var(--mb-border);
  text-decoration:none;
  font-size:.85rem;
  background: var(--mb-cream-lighter);
}
.mb-pagination .current{
  background:#4a86c8;
  border-color:#3a6fa8;
  color:#fff;
}

/* -----------------------------------------------------------
   7. Hírblokkok (kétoszlopos: Kiemelt hírek / Kiemelt cikkek)
----------------------------------------------------------- */
.mb-news-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media (max-width: 700px){
  .mb-news-columns{ grid-template-columns:1fr; }
}
.mb-news-column .mb-column-title{
  background: var(--mb-khaki-flat);
  border:3px double var(--mb-frame-dark);
  border-radius: var(--mb-radius-lg);
  padding:9px 14px;
  color:#2c2210;
  font-weight:normal;
  font-size:1.1rem;
  margin-bottom:14px;
}
.mb-article{ margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid var(--mb-border-light); }
.mb-article:last-child{ border-bottom:none; }
.mb-article h3{ margin:0 0 4px; font-size:1.05rem; }
.mb-article h3 a{ text-decoration:none; }
.mb-article .mb-meta{ font-size:.78rem; color:#6b5a3c; margin-bottom:6px; }
.mb-article .mb-meta span{ margin-right:8px; }
.mb-article .mb-excerpt{ font-size:.92rem; }
.mb-readmore{ font-size:.85rem; font-weight:bold; white-space:nowrap; }

/* Tartalom doboz cím (pl. oldal/bejegyzés cím a fő hasábban) */
.mb-content-title{ font-size:1.4rem; margin:6px 0 14px; }

/* Gombszerű dobozcím a fő tartalomban (pl. "Elérhetőségek" oldal cím) */
.mb-page-title-box{
  background: var(--mb-khaki-flat);
  border:3px double var(--mb-frame-dark);
  border-radius: var(--mb-radius-lg);
  padding:9px 16px;
  color:#2c2210;
  font-weight:normal;
  font-size:1.15rem;
  margin-bottom:16px;
}

/* -----------------------------------------------------------
   8. Keresés / naptár / anyakönyv widgetek finomítása
----------------------------------------------------------- */
.widget_search form{ display:flex; flex-direction:column; gap:6px; }
.widget_search select, .widget_search input[type=search]{
  font-family: var(--mb-font-body);
  padding:5px 6px;
  border:1px solid var(--mb-border);
  border-radius: var(--mb-radius);
  background: #fff;
}
.widget_search input[type=submit]{
  align-self:flex-end;
  background: var(--mb-gold-mid);
  border:1px solid var(--mb-gold-dark);
  padding:5px 12px;
  border-radius: var(--mb-radius);
  cursor:pointer;
}

.widget_calendar table{ width:100%; border-collapse:collapse; font-size:.8rem; }
.widget_calendar caption{ font-weight:bold; padding-bottom:4px; }
.widget_calendar th, .widget_calendar td{ text-align:center; padding:3px 2px; }
.widget_calendar #today{ background: var(--mb-gold-light); border-radius:2px; }

.mb-registry-tabs{ display:flex; gap:4px; margin-bottom:8px; }
.mb-registry-tabs button{
  flex:1;
  padding:5px 4px;
  font-size:.78rem;
  border:1px solid var(--mb-border);
  background: var(--mb-cream);
  cursor:pointer;
  border-radius: var(--mb-radius);
}
.mb-registry-tabs button.active{ background: var(--mb-gold-mid); font-weight:bold; }
.mb-registry-panel{ display:none; font-size:.88rem; }
.mb-registry-panel.active{ display:block; }
.mb-registry-panel p{ margin:0 0 10px; }

.mb-greeting-widget img{ float:left; margin:0 10px 8px 0; border:1px solid var(--mb-border-light); }
.mb-greeting-widget p{ margin:0 0 8px; font-size:.9rem; }

/* -----------------------------------------------------------
   9. Lábléc
----------------------------------------------------------- */
#colophon{
  border-top:2px solid var(--mb-gold-dark);
  background: var(--mb-cream-light);
  margin-top:24px;
}
#colophon .container{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  padding:14px 16px;
  font-size:.82rem;
}
#colophon nav ul{ display:flex; gap:6px; flex-wrap:wrap; }
#colophon nav ul li:not(:last-child)::after{ content:"|"; margin-left:6px; color: var(--mb-border); }
#colophon nav a{ text-decoration:underline; }

/* -----------------------------------------------------------
   10. Egyéb tartalom elemek (single/page/archive/search/404)
----------------------------------------------------------- */
.mb-single .entry-meta{ font-size:.8rem; color:#6b5a3c; margin-bottom:10px; }
.mb-single .entry-content{ font-size:.95rem; }
.mb-404{ text-align:center; padding:40px 10px; }
.mb-404 .mb-404-code{ font-family: var(--mb-font-script); font-size:5rem; color: var(--mb-gold-dark); line-height:1; }

/* -----------------------------------------------------------
   11. Mobil nézet
   (a mezőberény.hu-nak nincs gyári mobil nézete - ez a szakasz adja
   hozzá; szándékosan a stíluslap legvégén van, hogy minden korábbi,
   azonos súlyú szabályt felülírjon a kaszkádban)
----------------------------------------------------------- */

/* ---- Tablet / mobil (≤900px): hamburger-navigáció, tartalom előre ---- */
@media (max-width: 900px){
  .mb-mobile-nav-bar{ display:block; }

  .site-columns{ flex-wrap:wrap; margin-top:0; }
  .sidebar-col{ flex:1 1 100%; width:100%; }

  /* Tartalom-előre sorrend: fő tartalom, majd Elérhetőségek/Menü doboz, majd jobb oldalsáv. */
  #primary{ order:1; width:100%; }
  .sidebar-col-left{ order:2; }
  .sidebar-col-right{ order:3; }

  /* A bal oldali "Menü" doboz a hamburger-navigációban már elérhető, ezért mobilon elrejtjük -
     így a lista nem szerepel duplán. */
  .mb-menu-box{ display:none; }

  .site-branding .site-title{ font-size:2.4rem; }
  .site-header .header-image-wrap img,
  .site-header .header-image-placeholder{ max-height:160px; height:160px; }
  .mb-logo-flourish{ width:140px; }

  .mb-quicklinks{ grid-template-columns:1fr 1fr; }
}

/* ---- Telefon (≤600px) ---- */
@media (max-width: 600px){
  #mb-topbar .container{
    flex-wrap:wrap;
    justify-content:center;
    text-align:center;
    padding-top:8px;
    padding-bottom:8px;
  }
  #mb-topbar .mb-topbar-label{ width:100%; margin:0 0 4px; }

  .site-header .header-image-wrap img,
  .site-header .header-image-placeholder{ max-height:120px; height:120px; }
  .site-branding{ padding-left:12px; padding-right:12px; }
  .site-branding .site-title{ font-size:1.9rem; }
  .site-branding .site-description{ font-size:.78rem; }
  .mb-logo-flourish{ width:110px; }
  .mb-logo-crest{ width:18px; }

  .mb-breadcrumb-row .container{ justify-content:center; text-align:center; }
  .mb-breadcrumb-row .mb-today{ width:100%; }

  .site-columns{ padding:0 10px; gap:10px; margin:10px auto; }

  .mb-quicklinks{ gap:8px; }
  .mb-news-columns{ gap:12px; }

  #colophon .container{ flex-direction:column; text-align:center; }
  #colophon nav ul{ justify-content:center; }
}

/* ---- Kis telefon (≤400px): gyorslinkek egy oszlopban ---- */
@media (max-width: 400px){
  .mb-quicklinks{ grid-template-columns:1fr; }
  .site-branding .site-title{ font-size:1.6rem; }
}