/* =========================================================
   Petőcz Pincészet – mobil olvashatóság + WCAG AA javítások
   2026-10-19 · gyerektémában, a szülő téma frissítése nem viszi el

   Amit felülír (szülő téma: jardiwinery/css/responsive.css + theme.css):
     ≤479px   html,body 11px   .container padding 5px
     480-767  html,body 12px
     gombok   10–11px
     kontraszt 2,62–3,65:1 (WCAG AA = 4,5:1)

   Az !important itt szándékos: a téma színsémás szabályai
   (.scheme_original ...) és a „body .content .vc_row ..." láncok
   nagyobb fajsúlyúak, mint bármely ésszerű gyerektéma-szelektor.
   ========================================================= */

/* ---------- 1. MOBIL: alapméret és oldalmargó ---------- */
@media (max-width: 767px) {

	html, body { font-size: 13px !important; }

	body .container,
	body .container-fluid {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* A téma em-ben méretez, így a gyökér emelése felnagyítaná a
	   címsorokat is – ezért fix pixelen tartjuk a mai méretüket. */
	html body h1, html body .page_title { font-size: 42px !important; line-height: 1.15; }
	html body h2                        { font-size: 36px !important; line-height: 1.2; }
	html body h3                        { font-size: 29px !important; line-height: 1.25; }
	html body h4                        { font-size: 22px !important; line-height: 1.3; }
	html body h5                        { font-size: 19px !important; line-height: 1.35; }
	html body h6,
	html body .sc_services_item_title   { font-size: 18px !important; line-height: 1.35; }

	/* Törzsszöveg: 11–14px → 16px */
	html body p,
	html body li,
	html body dd,
	html body td,
	html body span.sc_highlight,
	html body span.sc_highlight a,
	html body .wpb_text_column p,
	html body .sc_services_item_description,
	html body .sc_services_item_description p,
	html body .post_content,
	html body .post_content p,
	html body .widget_area ul li,
	html body .sc_list li,
	html body .woocommerce-product-details__short-description p {
		font-size: 18px !important;
		line-height: 1.65;
	}

	/* A téma shortcode-jai NEM <p>-be teszik a szöveget, hanem divbe
	   (sc_section_descr) – a főoldali bemutatkozó szöveg is ilyen. */
	html body .sc_section_descr,
	html body .sc_item_descr,
	html body .wpb_text_column,
	html body .wpb_text_column .wpb_wrapper {
		font-size: 18px !important;
		line-height: 1.65;
	}

	/* Kis, dekoratív „szemöldök" feliratok (sc_section_subtitle) */
	html body h6.sc_section_subtitle { font-size: 14px !important; letter-spacing: 1px; }

	/* A h3-szabály a webshop terméknevét 29px-re fújná – visszafogva */
	html body h3.woocommerce-loop-product__title { font-size: 18px !important; }

	/* A téma shortcode-jai inline `max-width`-tel szűkítik a szöveges
	   blokkokat (pl. a borkóstolós szakasz 150px-re) – telefonon ez
	   2-3 szavas sorokat ad, ezért feloldjuk. */
	html body .sc_section_block {
		width: auto !important;
		max-width: 100% !important;
		float: none !important;
	}

	/* Gombok: 10–11px volt, és 44px alatti kattintófelület.
	   Az ikon-gombokat (sc_button_style_icon) kihagyjuk: nincs szövegük,
	   a szöveges belső margó négyzetesen felfújná őket. */
	html body .sc_button:not(.sc_button_style_icon),
	html body a.sc_button:not(.sc_button_style_icon),
	html body .JardiButton span,
	html body button,
	html body input[type="submit"],
	html body input.sc_button_size_large[type="submit"],
	html body .woocommerce a.button,
	html body .woocommerce button.button {
		font-size: 15px !important;
		line-height: 1.3;
		/* inline elemre a min-height nem hat – ezért inline-block */
		display: inline-block;
		min-height: 44px;
		padding: 13px 20px;
		box-sizing: border-box;
	}

	/* Mobil menü: olvasható és tapintható sorok */
	html body .header_mobile .menu_main_nav > li > a,
	html body .header_mobile .menu_main_nav .sub-menu > li > a {
		font-size: 16px !important;
		min-height: 44px;
	}

	/* Hosszú magyar szavak ne lógjanak ki a dobozból */
	html body h1, html body h2, html body h3,
	html body h4, html body h5, html body h6,
	html body p { overflow-wrap: break-word; }
}

/* ---------- 2. KONTRASZT (WCAG 1.4.3 AA) – minden méreten ---------- */

/* Fehér szöveg az arany #b2936d-en 2,88:1 volt.
   A szöveget nem feketítjük (az a márkaképet bontaná), hanem az
   aranyat mélyítjük addig, amíg a fehér eléri a 4,5:1-et: #87704f. */
html body .header_mobile .panel_top,
html body .sc_button.sc_button_style_filled,
html body a.sc_button.sc_button_style_filled {
	background-color: #87704f !important;
}

/* Arany linkszöveg világos háttéren: 2,62:1 → #826b50 */
html body .sc_services_item_title a,
html body h6.sc_services_item_title a {
	color: #826b50 !important;
}

/* Szürke törzsszöveg világos háttéren: 3,65:1 → #67696b */
html body .sc_services_item_description,
html body .sc_services_item_description p {
	color: #67696b !important;
}