/*
 * Kitchen3N colors.
 *
 * To change the look of the site, edit the color values in this first block
 * only. Colors can be hex codes (#c0392b), or names (tomato, olive, ...).
 * If you change --accent, also change highlightColor in hugo.toml to match.
 */
:root {
	--accent: #8b5e3c;          /* warm brown: hover, menu highlight, header underline */
	--page-bg: #e6ddd2;         /* taupe-beige background behind the page */
	--content-bg: #fbf8f3;      /* cream main page area */
	--header-bg: #f3ece2;       /* light beige top header */
	--title-color: #4a3728;     /* dark brown "Kitchen3N" site title */
	--subtitle-color: #7a6b5a;  /* taupe tagline under the title */
	--text-color: #3e3229;      /* dark brown body text */
	--heading-color: #4a3728;   /* post titles and headings */
	--link-color: #6f4e37;      /* coffee-brown links */
	--muted-color: #7a6b5a;     /* taupe dates, categories, captions */
	--menu-bg: #6b5b4e;         /* taupe-brown menu bar, buttons, tag boxes */
	--menu-text: #fbf8f3;       /* cream text on the menu bar and buttons */
	--footer-bg: transparent;   /* bottom of the page */
	--footer-text: #6b5b4e;
}

/* ---- Below here maps the colors onto the theme. No need to edit. ---- */

body { background: var(--page-bg); color: var(--text-color); }
.wrapper { background: var(--content-bg); }
.header { background: var(--header-bg); }
.logo__title { color: var(--title-color); }
.logo__tagline { color: var(--subtitle-color); }
h1, h2, h3, h4, h5, h6, .post__title, .list__title { color: var(--heading-color); }
a, .list__title a { color: var(--link-color); }
a:hover, .list__title a:hover { color: var(--accent); }
.meta, .meta a, figcaption { color: var(--muted-color); }
.meta a:hover { color: var(--accent); }
.divider { background: var(--accent); }
.menu__list, .menu__btn, .btn, .tags__link, .widget-taglist__link.btn, .widget-search__submit {
	background: var(--menu-bg);
	color: var(--menu-text);
}
.menu__link, .menu__link:hover { color: var(--menu-text); }
.menu__item:hover, .menu__item--active, .btn:hover, .tags__item:hover, .widget-search__submit:hover {
	background: var(--accent);
}
.widget__title { border-bottom-color: var(--accent); }
.footer { background: var(--footer-bg); color: var(--footer-text); }
.footer a, .footer__copyright { color: var(--footer-text); }

/* ---- WordPress post images ---- */

/* Old posts use WordPress image classes and fixed sizes; make every photo
   fit the column and sit on its own line, like on the old blog. */
.post__content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1em auto;
}
.post__content .alignleft, .post__content .alignright, .post__content .aligncenter {
	float: none;
}
.list__thumbnail img { width: 100%; height: auto; }

/* ---- Search page ---- */

.search-page__form { display: flex; gap: 8px; }
.search-page__form .widget-search__field { flex: 1; }
.search-page__form .widget-search__submit[type=submit] { display: block; border: 0; background: var(--menu-bg); color: var(--menu-text); padding: 0 16px; cursor: pointer; }
#search-results mark { background: var(--header-bg); color: inherit; font-weight: bold; }
.widget-search__form { background: var(--header-bg); }
.search-page__form .widget-search__submit[type=submit]:hover { background: var(--accent); }