@charset "utf-8";
/* CSS Document — PPH REK Classic Remaster */

body {
	margin-top: 10px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	background-color: #FFFFFF;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ramka {
	width: 760px;
	padding: 0;
}

.menu-boczne {
	width: 179px;
	padding: 0px;
	float: left;
	background-color: #FFFFFF;
}

/* menu-boczne.jpg is now 3x (537x645) but is applied via the HTML background
   attribute on the <td>, which would otherwise tile it at natural size. */
.side-menu-table td[background] {
	background-size: 179px 215px;
	background-repeat: no-repeat;
}

/* Hover used to swap in m01a/m02a/m03a.jpg. Measured against the base images
   that swap is a flat lift of about +4.8 RGB on ~115 luminance, so a filter
   reproduces it and saves three image requests. */
.side-menu-btn img {
	transition: filter 0.12s ease;
}

.side-menu-btn:hover img {
	filter: brightness(1.042);
}

/* Desktop top-nav buttons. Same treatment as the side menu: the a-variant
   image swaps were a flat lift of roughly +2.2 / +1.6 / +1.5 RGB, so a filter
   reproduces them and drops three more requests. */
.top-nav-link img {
	transition: filter 0.12s ease;
}

.top-nav-link:hover img {
	filter: brightness(1.02);
}

/* Contact form. The mobile breakpoint already styled these; on desktop they
   were raw browser defaults sitting on the parchment, which looked out of
   place next to everything else. Same palette, fixed widths rather than 100%
   so the desktop column keeps its proportions. */
form input[type="text"],
form textarea,
form select {
	font-family: Arial, 'Arial CE', Tahoma, Verdana, Helvetica, sans-serif;
	font-size: 13px;
	color: #502727;
	background: #fffdf7;
	border: 1px solid #9c8c74;
	border-radius: 4px;
	padding: 5px 7px;
	margin: 3px 0 8px 0;
	box-sizing: border-box;
	max-width: 100%;
}

form input[type="text"],
form select {
	width: 360px;
}

form textarea {
	width: 420px;
}

form input[type="text"]:focus,
form textarea:focus,
form select:focus {
	outline: none;
	border-color: #6f5a3c;
	box-shadow: 0 0 0 2px rgba(140, 115, 62, 0.18);
}

form input[type="submit"],
form input[type="reset"] {
	font-family: Arial, 'Arial CE', Tahoma, Verdana, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #3f2d1c;
	background: linear-gradient(#f3e7c8, #dcc9a0);
	border: 1px solid #9c8c74;
	border-radius: 4px;
	padding: 6px 18px;
	margin: 4px 10px 4px 0;
	cursor: pointer;
}

form input[type="submit"]:hover,
form input[type="reset"]:hover {
	background: linear-gradient(#f8efd8, #e4d3ad);
}

.srodek {
	width: 581px;
	padding: 0px;
	float: right;
}

.top {
	position: relative;
	width: 760px;
	height: 160px;
	padding: 0px;
}

.clock-bracket-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 226px;
	height: 160px;
	z-index: 10;
	pointer-events: none;
}

.mobile-nav {
	display: none;
}

a.top_tekst {
	text-align: center;
	color: #FFFFFF;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	font-size: 11px;
	position: static;
	text-decoration: none;
}

a:hover {
	text-align: center;
	color: #FFFFCC;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	font-size: 11px;
	position: static;
	text-decoration: underline;
}

a.top_tekst2 {
	text-align: left;
	color: #663300;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: normal;
	font-size: 11px;
	position: static;
	text-decoration: none;
}

a.top_tekst3 {
	text-align: left;
	color: #663300;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	position: static;
	text-decoration: none;
}

a:hover.top_tekst2 {
	text-align: left;
	color: #000000;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: normal;
	font-size: 11px;
	position: static;
	text-decoration: underline;
}

a:hover.top_tekst3 {
	text-align: left;
	color: #000000;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	position: static;
	text-decoration: underline;
}

a.link_mail {
	text-align: center;
	color: #F4EDCF;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: normal;
	font-size: 9px;
	position: static;
	text-decoration: none;
}

a:hover.link_mail {
	text-align: center;
	color: #FFFFFF;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: normal;
	font-size: 9px;
	position: static;
	text-decoration: underline;
}

td.tekst_data {
	text-align: left;
	color: #F4EDCF;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	text-decoration: none;
	text-indent: 10px;
}

td.tekst {
	text-align: left;
	color: #F4EDCF;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	font-size: 11px;
	position: static;
	text-decoration: none;
}	

td.tekst_black {
	text-align: left;
	color: #663300;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: normal;
	font-size: 11px;
	line-height: 1.55;
	text-decoration: none;
}

/* Remaster: Full-Color Interactive Gallery Thumbnails */
.gallery_thumb {
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	cursor: pointer;
	border-radius: 2px;
	display: block;
}

.gallery_thumb:hover {
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

/* Remaster: landing page.
   The page used to open with "AKTUALNOŚCI:" above a single undated 2005 item,
   which read as a shop that had closed. The content is now a standing
   showcase: a lead paragraph about the current offer, then the Opole clock as
   a permanent flagship rather than as news. The enclosing cell is
   align="center" from 2005, so the prose has to opt back out of it. */
.lead-intro,
.showcase-body {
	text-align: justify;
	margin: 0 0 14px 0;
}

.lead-intro {
	padding-bottom: 13px;
	border-bottom: 1px solid rgba(80, 60, 30, 0.18);
}

.showcase-head {
	text-align: center;
	margin: 0 0 12px 0;
	line-height: 1.75;
}

/* The Radio ZET clip is the one genuinely dated thing left on the page. Saying
   so turns it from neglect into provenance, so it gets its own boxed note
   instead of hiding as a "DODATKOWE INFORMACJE" link. */
.archival-note {
	margin: 4px 0 20px 0;
	padding: 10px 12px 12px 12px;
	background: rgba(255, 253, 247, 0.55);
	border: 1px solid #cdbf9e;
	border-radius: 4px;
}

/* preload="none" in the markup: the file still lives on wp.pl's server, so
   nothing is fetched from there until the visitor actually presses play. */
.archival-player {
	display: block;
	width: 100%;
	max-width: 320px;
	height: 32px;
	margin: 9px 0 0 0;
}

/* ==========================================================================
   Remaster: Responsive Mobile Styles (active ONLY on screens <= 768px)
   Leaves desktop pixel-perfect and unmodified!
   ========================================================================== */
@media (max-width: 768px) {
	body {
		margin: 0;
		padding: 0;
		background-color: #d8d0c0;
	}

	.ramka {
		width: 100% !important;
		max-width: 520px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		background-color: #f6f0dc;
		box-shadow: 0 0 18px rgba(0, 0, 0, 0.25);
	}

	/* 1. Top Scenic Banner (Unbroken 160px height, seamless clock + bracket + Ratusz) */
	.top {
		order: 1;
		width: 100% !important;
		height: 160px !important;
		overflow: hidden;
		position: relative;
	}

	.clock-bracket-overlay {
		left: -16px !important;
	}

	.top-outer-table {
		width: 100% !important;
		height: 160px !important;
		table-layout: fixed;
		border-collapse: collapse;
	}

	.top-col-left {
		width: 44px !important;
		height: 160px !important;
		background-position: right top !important;
		background-repeat: no-repeat;
	}

	.top-col-clock {
		width: 116px !important;
		height: 160px !important;
	}

	.top-col-mid {
		width: auto !important;
		height: 160px !important;
		vertical-align: top;
	}

	.top-col-right {
		display: none !important;
	}

	.top-mid-table,
	.top-sky-table,
	.top-bars-table,
	.top-nav-row-table {
		width: 100% !important;
		border-collapse: collapse;
	}

	.top-sky-table {
		table-layout: fixed;
		height: 97px !important;
	}

	.top-sky-bracket {
		width: 50px !important;
		height: 97px !important;
		background-repeat: no-repeat;
	}

	.top-sky-ratusz {
		width: auto !important;
		height: 97px !important;
		background-image: url(../img/top-srodek-mob.jpg) !important;
		background-position: left top !important;
		background-size: 100% 97px !important;
		background-repeat: no-repeat !important;
	}

	.top-sky-edge {
		width: 8px !important;
		height: 97px !important;
	}

	.top-nav-btn,
	.top-nav-spacer {
		display: none !important;
	}

	.top-stone-ledge {
		width: 100% !important;
		height: 38px !important;
		background-image: url(../img/top02-dol-001-mob.jpg) !important;
		background-position: left top !important;
		background-size: 100% 38px !important;
		background-repeat: no-repeat !important;
	}

	.top-date-bar {
		width: 100% !important;
		height: 25px !important;
		background-repeat: repeat-x !important;
	}

	.top-date-bar table {
		width: 100% !important;
	}

	.top-date-bar td.tekst_data {
		width: auto !important;
		font-size: 10.5px !important;
		text-indent: 8px !important;
		white-space: nowrap;
	}

	/* 2. Mobile 2x3 Wooden Plaque Navigation Bar on Stone Wall */
	.mobile-nav {
		order: 2;
		display: block;
		width: 100%;
		background: url(../img/top02-dol-001.jpg) repeat;
		border-top: 2px solid #3a3228;
		border-bottom: 2px solid #2d261e;
		padding: 9px 10px;
		box-sizing: border-box;
		box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.28);
	}

	.mobile-nav-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 7px 8px;
		max-width: 390px;
		margin: 0 auto;
		align-items: center;
		justify-items: center;
	}

	/* The plaques are authored at 120x34. Pinning both axes meant the content
	   box became 114x30 and object-fit:fill squashed them 0.950 x 0.882 --
	   non-uniform, which is what distorted the labels on phones. Letting the
	   height follow from the width keeps the 120:34 ratio, so the only scaling
	   is a uniform ~0.95; the 3x source keeps it sharp. The column is 118px
	   here ((370 - 2 gaps) / 3), so the width cap has to stay 118 or the third
	   column overflows the grid. */
	.mobile-wood-btn {
		display: block;
		width: 100%;
		max-width: 118px;
		height: auto;
		text-decoration: none;
	}

	.mobile-wood-btn img {
		width: 100%;
		height: auto;
		display: block;
		border: 0;
	}

	.mobile-wood-btn-side {
		border: 2px solid #2b2927;
		border-radius: 6px;
		overflow: hidden;
		box-sizing: border-box;
		box-shadow: inset 0 0 0 1px #9a968e, 0 1px 3px rgba(0, 0, 0, 0.45);
	}

	/* 3. Main Parchment Content Area */
	.srodek {
		order: 3;
		width: 100% !important;
		float: none !important;
	}

	.srodek > table {
		width: 100% !important;
		border-collapse: collapse;
	}

	.srodek > table > tbody > tr:first-child,
	.srodek > table > tbody > tr[height="20"] {
		display: none !important;
	}

	.srodek > table > tbody > tr > td:not([width="559"]) {
		display: none !important;
	}

	.srodek > table > tbody > tr > td[width="559"] {
		width: 100% !important;
		display: block;
		padding: 16px 16px 20px 16px !important;
		box-sizing: border-box;
	}

	.srodek table {
		width: 100% !important;
		max-width: 100% !important;
	}

	.srodek td {
		height: auto !important;
	}

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

	td.tekst_black {
		font-size: 13.5px !important;
		line-height: 1.62 !important;
	}

	.desktop-indent {
		display: none !important;
	}

	.main-info-table,
	.main-info-table td,
	.kontakt-table,
	.kontakt-table td {
		width: 100% !important;
		height: auto !important;
	}

	/* Gallery 2-column paired grid on mobile */
	.gallery-table {
		width: 100% !important;
		margin: 6px 0 10px 0;
	}

	.gallery-table > tbody > tr {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 14px;
		justify-items: center;
		align-items: start;
	}

	.gallery-spacer,
	.gallery-row-gap {
		display: none !important;
	}

	.gallery-cell {
		width: 100% !important;
		max-width: 156px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.gallery-cell .gallery_thumb {
		width: 142px !important;
		height: 142px !important;
		object-fit: cover;
		border-radius: 3px;
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
	}

	.gallery-cell img[height="150"] {
		width: 142px !important;
		height: 202px !important;
		object-fit: cover;
	}

	/* Contact Form Responsive Inputs */
	form input[type="text"],
	form textarea,
	form select {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		font-size: 14px !important;
		padding: 8px 10px !important;
		margin: 4px 0 10px 0;
		border: 1px solid #9c8c74;
		border-radius: 4px;
		background: #fffdf7;
	}

	form input[type="submit"],
	form input[type="reset"] {
		padding: 9px 22px !important;
		font-size: 14px !important;
		font-weight: bold;
		margin: 6px 8px 6px 0;
		cursor: pointer;
	}

	/* 4. Bottom Contact Card Footer on Mobile */
	.menu-boczne {
		order: 4;
		width: 100% !important;
		float: none !important;
		background: url(../img/top02-dol-001.jpg) repeat;
		border-top: 2px solid #3a3228;
		padding: 16px 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.side-menu-table {
		display: none !important;
	}

	/* kontakt.jpg is 179x170. Forcing 162px with overflow:hidden sliced the
	   bottom 8px off the plaque, cutting its rounded border. */
	.side-kontakt-table {
		width: 179px !important;
		max-width: 179px !important;
		height: 170px !important;
		max-height: 170px !important;
		margin: 0 auto;
		display: block;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
		border-radius: 7px;
		overflow: hidden !important;
	}

	.side-kontakt-table > tbody > tr > td {
		height: 170px !important;
		background-position: left top !important;
		background-repeat: no-repeat !important;
	}
}

/* DCF diagram inlined on the Zegary page (img/schemat.svg, recovered from
   schemat.swf). max-width keeps its fixed 400px stage from adding to the
   horizontal overflow on phones. */
.schemat-figure {
	text-align: center;
	margin: 6px 0 12px 0;
}

/* Centred with auto margins rather than relying on the parent's text-align:
   as an inline-block the stage stayed flush left, and auto margins on a block
   do not depend on inherited alignment. */
.schemat-figure > svg {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 6px auto 4px auto;
	border: 1px solid #cdbf9e;
	border-radius: 4px;
}