/* =========================================================
   TripeRecipes.com — theme stylesheet
   Redesign pass 1: site chrome (header / menu / content / footer)
   ========================================================= */

:root{
	--color-bg:        #FAF6EE;
	--color-surface:   #FFFFFF;
	--color-surface-alt:#F4EADA;
	--color-primary:   #A34321;
	--color-primary-dark:#7C331A;
	--color-accent:    #C08A2E;
	--color-text:      #2C2117;
	--color-text-muted:#71614F;
	--color-border:    #E8DAC2;
	--color-link:      #A34321;

	--font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-body:    'Source Sans 3', 'Segoe UI', Helvetica, Arial, sans-serif;

	--radius:   10px;
	--radius-sm:6px;
	--shadow:   0 2px 14px rgba(44,33,23,0.08);
	--shadow-sm:0 1px 4px rgba(44,33,23,0.10);
}

*, *::before, *::after{ box-sizing:border-box; }

html{ background:var(--color-bg); }

BODY,body
{
	width:100%;
	max-width:1120px;
	margin:0 auto;
	text-align:left;
	background:var(--color-bg);
	color:var(--color-text);
	font-family:var(--font-body);
	font-size:16px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}

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

h1,h2,h3,h4{
	font-family:var(--font-heading);
	color:var(--color-primary-dark);
	line-height:1.25;
	margin:0 0 .5em 0;
}

input, select, button
{
	font-family:var(--font-body);
	margin-top:2px;
	margin-bottom:2px;
	padding: 8px 10px;
	border:1px solid var(--color-border);
	border-radius:var(--radius-sm);
	background:var(--color-surface);
	color:var(--color-text);
}

input[type="submit"], input[type="SUBMIT"], .searchbutton
{
	background:var(--color-primary);
	border-color:var(--color-primary);
	color:#fff;
	font-weight:600;
	cursor:pointer;
	transition:background .15s ease;
}
input[type="submit"]:hover, input[type="SUBMIT"]:hover, .searchbutton:hover
{
	background:var(--color-primary-dark);
}

.errorbox
{
	width:100%;
	text-align:center;
	background:var(--color-surface-alt);
	color:var(--color-primary-dark);
	font-weight:600;
	padding:12px 10px;
	margin:14px 0;
	border-radius:var(--radius-sm);
	border:1px solid var(--color-border);
}

/* ---------- Header / banner ---------- */

.hdrcont, .site-header
{
	width:100%;
	text-align:center;
	background:linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	padding:22px 16px;
	margin-bottom:18px;
	border-radius:0 0 var(--radius) var(--radius);
	box-shadow:var(--shadow);
}

.hdr, .site-header__inner
{
	font-size:1.5em;
	color:#fff;
}

.hdr hr, #toplines{ display:none; }

.site-logo{ display:inline-block; }
.site-logo img{
	max-height:96px;
	width:auto;
	border-radius:var(--radius-sm);
	background:#fff;
	padding:4px;
}

.site-tagline{
	margin:10px 0 0 0;
	font-family:var(--font-heading);
	font-size:1.05em;
	font-weight:600;
	letter-spacing:.02em;
	color:#FBEFDD;
}

/* ---------- Layout ---------- */

.wrapper
{
	display:flex;
	align-items:flex-start;
	gap:22px;
	width:100%;
	padding:0 4px;
}

.menu
{
	margin-top:0;
	width:300px;
	flex:0 0 300px;
	text-align:left;
	padding:20px;
	background:var(--color-surface);
	border:1px solid var(--color-border);
	border-radius:var(--radius);
	box-shadow:var(--shadow-sm);
}

.menu span
{
	display:inline-block;
	margin:3px 4px 3px 0;
}

.menu-heading{
	font-family:var(--font-heading);
	font-weight:700;
	color:var(--color-primary-dark);
	margin:16px 0 6px 0;
	font-size:1.05em;
}

.cat-list{ margin-bottom:6px; }
.cat-list span a,
.menu span a
{
	display:inline-block;
	background:var(--color-surface-alt);
	color:var(--color-primary-dark);
	padding:4px 10px;
	border-radius:999px;
	font-size:.85em;
	border:1px solid var(--color-border);
}
.cat-list span a:hover,
.menu span a:hover
{
	background:var(--color-primary);
	color:#fff;
	text-decoration:none;
}

.content
{
	width:auto;
	flex:1 1 auto;
	min-width:0;
	text-align:left;
	font-size:.98em;
	padding:25px;
	background:var(--color-surface);
	border:1px solid var(--color-border);
	border-radius:var(--radius);
	box-shadow:var(--shadow-sm);
}

.content p{
	width:auto;
	max-width:none;
	text-align:left;
}

.content table{ margin-top:0; }

#bottomHR{ display:none; }

/* ---------- Search box ---------- */

.search{ margin-bottom:4px; }
.search #searchform{ display:flex; gap:6px; }
.searchbox{ flex:1 1 auto; min-width:0; }

/* ---------- Login box ---------- */

.login-area{ margin-top:4px; }

.loginbox{
	margin-top:10px;
	padding-top:14px;
	border-top:1px solid var(--color-border);
	font-size:.92em;
	color:var(--color-text-muted);
}
.loginbox input[type="TEXT"],
.loginbox input[type="PASSWORD"],
.loginbox input[type="text"],
.loginbox input[type="password"]{ width:100%; }

/* ---------- Site credit / copyright box ---------- */

.site-credit{
	margin-top:18px;
	padding-top:16px;
	border-top:1px dashed var(--color-border);
	text-align:center;
}
.site-credit__copy{
	font-size:.85em;
	color:var(--color-text-muted);
	margin-bottom:10px;
}
.site-credit__badge img{ max-width:160px; height:auto; }

/* ---------- Homepage intro + highlight cards ---------- */

.intro p{ text-align:left; }

.highlights{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
	margin:20px 0;
}

.highlight-card{
	background:var(--color-surface-alt);
	border:1px solid var(--color-border);
	border-radius:var(--radius);
	padding:16px;
}

.highlight-card__label{
	display:block;
	font-family:var(--font-heading);
	font-weight:700;
	background:var(--color-primary-dark);
	color:#fff;
	padding:8px 12px;
	margin:-16px -16px 12px -16px;
	border-radius:var(--radius) var(--radius) 0 0;
}

.randrecbox, .randtipbox{ text-align:left; }
.randrectitle, .randtiptitle{ font-weight:700; margin-bottom:6px; color:var(--color-primary-dark); }
.randrecbody, .randtipbody{ color:var(--color-text); }

/* ---------- Ad grid ---------- */

.ad-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
	gap:14px;
	margin-top:20px;
}

.ad-slot{
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--color-surface-alt);
	border:1px solid var(--color-border);
	border-radius:var(--radius-sm);
	padding:10px;
	min-height:250px;
}

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

/* ---------- Recipe table (shared, lightly touched) ---------- */

.recipewrap{
	text-align:center;
	width:100%;
}

.recipetbl{
	border:1px solid var(--color-border);
	border-radius:var(--radius);
	margin:auto;
	width:100%;
	padding:14px;
	background:var(--color-surface);
}

.recimage{
	min-width:0px;
	max-width:350px !important;
	max-height:500px !important;
	border-radius:var(--radius-sm);
}

/* ---------- Footer ---------- */

.footer{
	clear:both;
	height:60px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--color-text-muted);
	font-size:.8em;
}

/* ---------- Category <ul> variant (SHOW_CAT_UL) ---------- */

ul.cats{ list-style:none; margin:0; padding:0; }
ul.cats li{ margin-bottom:4px; }

/* ---------- Responsive ---------- */

@media (max-width: 820px){
	body{ padding:0 12px; }
	.wrapper{ flex-direction:column; }
	.menu{ width:100%; flex:1 1 auto; }
	.highlights{ grid-template-columns:1fr; }
}