/*
	OGNISKO — Bistro & Grill
	Custom theme layer — loaded after main.css, never edits it directly.
	Palette: #1E1B18 (węgiel/tło) / #F2EDE6 (jasny kontrast) / #D9622B (żar/akcent) / #8C5A3C (brąz/akcent drugorzędny)
	Fonts: Fjalla One (nagłówki/CTA) + Source Sans 3 (tekst)
*/

/* Fonts */

	body, input, select, textarea {
		font-family: 'Source Sans 3', 'Karla', Helvetica, sans-serif;
	}

	h1, h2, h3, h4, h5, h6,
	input[type="submit"], input[type="reset"], input[type="button"], button, .button,
	label {
		font-family: 'Fjalla One', 'Bebas Neue', Helvetica, sans-serif;
		letter-spacing: 0.06em;
	}

	h1 {
		font-family: 'Fjalla One', 'Bebas Neue', Helvetica, sans-serif;
		letter-spacing: 0.08em;
	}

/* Base palette */

	body {
		background-color: #1E1B18;
	}

	body,
	input, select, textarea,
	h1, h2, h3, h4, h5, h6,
	a,
	strong, b {
		color: #F2EDE6;
	}

	a {
		border-bottom-color: rgba(242, 237, 230, 0.4);
	}

	a:hover {
		color: #D9622B;
	}

	blockquote {
		border-left-color: #D9622B;
		color: rgba(242, 237, 230, 0.85);
	}

	hr {
		border-bottom-color: rgba(242, 237, 230, 0.15);
	}

	code {
		background: rgba(242, 237, 230, 0.08);
	}

/* Lists */

	ul.alt > li {
		border-top-color: rgba(242, 237, 230, 0.15);
	}

	.box {
		border-color: rgba(242, 237, 230, 0.15);
	}

/* Buttons */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		box-shadow: inset 0 0 0 2px rgba(242, 237, 230, 0.35);
		color: #F2EDE6 !important;
	}

	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover,
	button:hover,
	.button:hover {
		box-shadow: inset 0 0 0 2px #D9622B;
		color: #D9622B !important;
	}

	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active,
	button:active,
	.button:active {
		background-color: rgba(217, 98, 43, 0.2);
		box-shadow: inset 0 0 0 2px #D9622B;
		color: #D9622B !important;
	}

	.button.primary {
		background-color: #D9622B;
		color: #1E1B18 !important;
	}

	.button.primary:hover {
		background-color: #e8793f;
		color: #1E1B18 !important;
	}

	.button.primary:active {
		background-color: #b74f20;
		color: #1E1B18 !important;
	}

/* Left panel: solid, fully-saturated accent fill behind every section's
   header column (spans the full page height via #wrapper's ::before),
   matching the strong left/right contrast of the original template. */

	#wrapper:before {
		background-color: #D9622B;
		background-image: none;
		opacity: 1;
	}

	/* Header text sits on the orange panel — dark text reads far better
	   there than the site's usual cream (contrast ratio too low on orange). */
	#wrapper > section > header,
	#wrapper > section > header h1,
	#wrapper > section > header h2 {
		color: #1E1B18;
	}

	#wrapper > section > header h1 + p {
		color: rgba(30, 27, 24, 0.7);
	}

	/* Secondary kicker + note under a section heading — same idiom as the
	   hero's h1+p caption, just smaller, so Block 1 / Block 2 fill the left
	   panel the way the original template's headers do. */
	#wrapper > section > header h2 + .header-kicker {
		margin: -3.5rem 0 0.5rem 0;
		font-family: 'Fjalla One', 'Bebas Neue', Helvetica, sans-serif;
		font-size: 0.8rem;
		font-weight: 400;
		letter-spacing: 0.175em;
		line-height: 1.75;
		text-transform: uppercase;
		color: #1E1B18;
	}

	#wrapper > section > header .header-note {
		margin: 0;
		font-size: 0.85rem;
		line-height: 1.8;
		color: rgba(30, 27, 24, 0.75);
	}

	/* Connector line/dot between header and content columns */
	#wrapper > section > header:before,
	#wrapper > section > header h1:before,
	#wrapper > section > header h2:before,
	#wrapper > section > header h1:after,
	#wrapper > section > header h2:after,
	#wrapper > section:last-of-type > header:after {
		background: #1E1B18;
	}

	#wrapper .copyright {
		color: rgba(242, 237, 230, 0.5);
	}

/* Arrow / icons */

	a.arrow:before {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 512 512'%3E%3Cpath d='M442.53,346.28L293.65,495.16c-0.33,0.33-0.7,0.62-1.05,0.94c-9.16,9.77-22.15,15.9-36.6,15.9 c-14.44,0-27.43-6.13-36.59-15.88c-0.35-0.33-0.72-0.62-1.06-0.96L69.47,346.28c-19.62-19.62-19.62-51.44,0-71.05 c19.62-19.62,51.43-19.62,71.06,0l65.23,65.23V50.24C205.76,22.5,228.25,0,256,0s50.24,22.5,50.24,50.24v290.21l65.23-65.23 c19.62-19.62,51.43-19.62,71.05,0C462.15,294.84,462.15,326.66,442.53,346.28z' fill='%231E1B18' /%3E%3C/svg%3E");
	}

	ul.icons li .icon:hover {
		background-color: rgba(242, 237, 230, 0.1);
	}

/* Quote author line */

	.quote-author {
		display: block;
		margin-top: 0.75rem;
		font-family: 'Fjalla One', 'Bebas Neue', Helvetica, sans-serif;
		font-style: normal;
		font-size: 0.8rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: #D9622B;
	}

/* Content images: never stretch */

	.image.main img {
		width: 100%;
		height: auto;
		object-fit: cover;
		display: block;
	}

/* Gallery captions */

	.gallery a {
		overflow: hidden;
	}

	.gallery a .caption {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0.6rem 1rem;
		background: linear-gradient(to top, rgba(30, 27, 24, 0.9), rgba(30, 27, 24, 0));
		color: #F2EDE6;
		font-size: 0.75rem;
		letter-spacing: 0.03em;
		line-height: 1.4;
		pointer-events: none;
	}

/* Skrócone menu */

	ul.menu-list > li {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
	}

	.menu-item-name {
		flex: 1;
	}

	.menu-item-price {
		font-family: 'Fjalla One', 'Bebas Neue', Helvetica, sans-serif;
		letter-spacing: 0.04em;
		color: #D9622B;
		white-space: nowrap;
	}

	.qr-block {
		margin-top: 2.5rem;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1.25rem;
	}

	.qr-block img {
		width: 6.5rem;
		height: 6.5rem;
		object-fit: contain;
		border-radius: 0.325rem;
		background: #F2EDE6;
		padding: 0.4rem;
	}

	.qr-text {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1rem;
	}

	.qr-text p {
		margin: 0;
		color: rgba(242, 237, 230, 0.75);
		font-size: 0.9rem;
	}

/* Copyright: two lines, same size/color */

	#wrapper .copyright {
		display: flex;
		flex-direction: column;
		gap: 0.35rem;
	}

	#wrapper .copyright .line {
		display: block;
	}

/* Image fade-in on load */

	img {
		opacity: 0;
		transition: opacity 0.6s ease;
	}

	img.loaded {
		opacity: 1;
	}

	.modal img {
		opacity: 1;
		transition: none;
	}

/* Mobile: #wrapper:before (the desktop left panel) is hidden by main.css
   below 1152px, so each section's header needs its own orange background
   instead — text is already dark from the unconditional rule above. */

	@media screen and (max-width: 1152px) {

		#wrapper > section > header {
			background-color: #D9622B;
			background-image: none;
		}

	}

/* Wide screens: keep content from collapsing into a narrow column against
   the flat background on very large viewports (>1800px) */

	@media screen and (min-width: 1800px) {

		#wrapper {
			width: 1800px;
			max-width: 100%;
			margin: 0 auto;
		}

		#wrapper:before {
			width: 900px;
		}

		#wrapper section {
			grid-template-columns: 900px 900px;
		}

		#wrapper .copyright {
			left: 900px;
			width: 900px;
		}

		#wrapper > section > header:before {
			left: calc(900px - 5rem);
		}

		#wrapper > section > .content > section {
			left: calc(-900px - 5rem);
		}

		#wrapper > section.intro > header:before {
			margin-left: calc(900px - 10rem);
		}

		#wrapper > section:last-of-type > header:after {
			left: calc(900px - 5rem - 0.25rem + 1px);
		}

		/* Gallery thumbnails use vw-based heights that grow unbounded on very
		   wide viewports — cap them so rows stay a sane size. */
		.gallery a img {
			height: 22rem;
		}

		.gallery a.landscape img,
		.gallery a.portrait img {
			height: 28rem;
		}

	}