/* ==========================================================================
   Logo redesign - base styles (all viewports)
   ========================================================================== */
.logo-link {
	display: flex;
	align-items: center;
	text-decoration: none;
	gap: 12px;
}

.logo-icon {
	height: 80px;
	width: auto;
	flex-shrink: 0;
}

.logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.logo-line1,
.logo-line2 {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	text-transform: uppercase;
	color: #3b3128;
	letter-spacing: 0.08em;
	font-weight: 700;
}

.logo-line1 {
	font-size: 22px;
}

.logo-line2 {
	font-size: 22px;
	margin-top: 2px;
}

/* Hamburger button - hidden on desktop */
.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px;
}
.menu-toggle span {
	display: block;
	width: 28px;
	height: 3px !important;
	min-height: 3px;
	background: #d4c9a8;
	margin: 4px 0;
	border-radius: 2px;
	transition: 0.3s ease;
}
.menu-toggle.active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
	opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* ==========================================================================
   Tablet & below (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {

	/* Global safety */
	html { overflow-x: hidden; }
	img { max-width: 100%; height: auto; }
	#header .container { overflow: visible; }

	/* Container */
	.main { width: 100% !important; max-width: 1080px; padding: 0 15px; box-sizing: border-box; }

	/* Header */
	#header { height: auto; }
	.extra-header {
		background: linear-gradient(180deg,
			#2f2822 0%,
			#d4ceb4 2%,
			#e0dace 4%,
			#e0dace 38%,
			#3d3429 42%,
			#2e2926 48%,
			#2e2926 100%
		) !important;
	}
	#header .nav { display: none; }

	/* Logo + hamburger row */
	#header .container:nth-child(2) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
	}
	.logo { float: none; padding: 10px 0 8px; flex-shrink: 1; min-width: 0; }
	.logo-link { gap: 12px; }
	.logo-icon { height: 72px; }
	.logo-line1,
	.logo-line2 { font-size: 24px; letter-spacing: 0.07em; }
	.logo-line2 { margin-top: 2px; }

	/* Menu wrapper */
	.menu {
		float: none;
		padding: 0;
		position: relative;
		flex-shrink: 0;
	}

	/* Hamburger button */
	.menu-toggle {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		background: #3b3128;
		border: 2px solid #5c4f3f;
		border-radius: 8px;
		z-index: 1001;
		position: relative;
		box-shadow: 0 2px 8px rgba(0,0,0,0.3);
	}
	.menu-toggle:active {
		background: #2a221a;
	}

	/* Dropdown menu */
	.menu ul {
		display: none;
		position: absolute;
		top: 52px;
		right: 10px;
		background: #3b3128;
		box-shadow: 0 8px 24px rgba(0,0,0,0.3);
		border-radius: 8px;
		width: 240px;
		z-index: 1000;
		padding: 8px 0;
		margin: 0;
		list-style: none;
	}
	.menu ul.open {
		display: block;
	}

	/* Menu items */
	.menu li {
		float: none;
		background: none !important;
		border: none;
		margin: 0;
	}
	.menu li a {
		display: block;
		padding: 13px 22px;
		color: #f6f2e5 !important;
		text-decoration: none;
		font-size: 15px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		background: none !important;
		transition: background 0.15s ease;
	}
	.menu li a strong,
	.menu li a strong strong {
		background: none !important;
		padding: 0;
		display: inline;
	}
	.menu li a:hover,
	.menu li a:focus {
		background: rgba(255,255,255,0.1) !important;
	}
	.menu li.active a,
	.menu .active a {
		background: rgba(255,255,255,0.12) !important;
		color: #d4a84b !important;
	}
	.menu li.active a strong,
	.menu li.active a strong strong,
	.menu .active a strong,
	.menu .active a strong strong {
		background: none !important;
	}
	.menu li + li {
		border-top: 1px solid rgba(255,255,255,0.08);
	}

	/* Gallery - tablet: 4 across, properly sized */
	.gallery {
		padding: 15px 10px;
		margin-top: 0 !important;
		display: flex;
		justify-content: center;
		gap: 10px;
	}
	.gallery a {
		display: block;
		width: 23%;
		flex-shrink: 0;
	}
	.gallery img {
		width: 100%;
		height: auto;
		margin: 0;
		display: block;
		border-radius: 4px;
	}

	/* Columns - stack on tablet */
	#page1 .col-1, #page1 .col-2,
	#page3 .col-1, #page3 .col-2, #page3 .col-3,
	.col-1, .col-2, .col-3,
	.row .col-1, .row .col-2,
	.box .col-1, .box .col-2 { float: none; width: 100% !important; }
	.col-pad, .col-pad1, .box .col-pad { padding-right: 0 !important; }
	.divider, .divider1, .box .divider { background: none; }

	/* Footer */
	#footer { height: auto; }
	.extra-footer { background-size: cover; }

	/* Forms & Maps */
	input[type="text"], input[type="email"], textarea, select { max-width: 100%; box-sizing: border-box; }
	.map-container, .map-container div { max-width: 100%; }
	.map-container iframe { width: 100%; }
}

/* ==========================================================================
   Phone (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {

	.logo { padding: 10px 0 4px; }
	.logo-link { gap: 8px; }
	.logo-icon { height: 52px; }
	.logo-line1,
	.logo-line2 { font-size: 17px; letter-spacing: 0.05em; }
	.logo-line2 { margin-top: 1px; }
	#header .container:nth-child(2) { padding: 0 6px; }

	/* Menu - full width on phone */
	.menu ul {
		width: calc(100vw - 30px);
		right: 0;
		border-radius: 0 0 8px 8px;
	}
	.menu li a {
		padding: 15px 24px;
		font-size: 16px;
	}

	/* Gallery: 2x2 grid on phones */
	.gallery {
		flex-wrap: wrap;
		gap: 8px;
		padding: 10px;
		margin-top: 0 !important;
	}
	.gallery a {
		width: 47%;
	}
	.gallery img {
		width: 100%;
		height: auto;
		margin-right: 0;
	}

	.indent { padding: 20px 12px; }
	.imgindent, .imgindent1, .imgindent2 { float: none; display: block; margin: 0 auto 15px; }
	#footer .footer-menu ul { flex-wrap: wrap !important; gap: 10px !important; }
}

/* ==========================================================================
   Small phone (max-width: 374px)
   ========================================================================== */
@media (max-width: 374px) {
	.logo-link { gap: 6px; }
	.logo-icon { height: 44px; }
	.logo-line1,
	.logo-line2 { font-size: 15px; letter-spacing: 0.03em; }
}