/*
Theme Name: OceanWP Child - Alchemy Cafe
Theme URI: https://alchemymurphys.com
Description: Child theme for OceanWP, styled to mirror honeysalt.com's minimal, photography-forward look for Alchemy Cafe.
Author: Alchemy Cafe
Template: oceanwp
Version: 1.0
*/

/* ==========================================================================
   Alchemy Cafe design tokens (derived from honeysalt.com)
   ========================================================================== */
:root {
	--ac-accent: #c2ca7e;      /* olive-sage CTA color */
	--ac-text: #1a1a1a;
	--ac-bg: #ffffff;
	--ac-bg-tint: #f3efe4;     /* warm cream section tint */
	--ac-heading-font: 'Playfair Display', Georgia, serif;
	--ac-body-font: 'Montserrat', -apple-system, sans-serif;
	--ac-script-font: 'Alex Brush', cursive;
}

body,
button,
input,
select,
textarea {
	font-family: var(--ac-body-font);
	color: var(--ac-text);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
#logo a {
	font-family: var(--ac-heading-font);
	font-weight: 400;
}

a {
	color: var(--ac-text);
}

/* ==========================================================================
   Buttons — uppercase, tracked, olive fill, thin dark border, 4px radius
   (OceanWP core button classes: .button, .btn, .submit-button)
   ========================================================================== */
.button,
button,
input[type="submit"],
.wp-block-button__link,
#site-header .header-button a,
.woocommerce a.button,
.woocommerce button.button {
	background-color: var(--ac-accent);
	color: var(--ac-text);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	border: 1px solid var(--ac-text);
	border-radius: 4px;
	padding: 10px 14px;
	font-family: var(--ac-body-font);
	font-weight: 500;
	transition: opacity 0.2s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	opacity: 0.85;
	background-color: var(--ac-accent);
	color: var(--ac-text);
}

/* ==========================================================================
   Header — OceanWP core header/nav structure
   #header wraps #site-header-inner; nav links live in #site-navigation-wrap
   ========================================================================== */
#header,
#site-header-inner,
#top-bar {
	background-color: var(--ac-bg);
}

#site-navigation-wrap a,
.main-nav > ul > li > a,
#mobile-menu a {
	color: var(--ac-text);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
	font-family: var(--ac-body-font);
}

#logo img {
	max-height: 60px;
}

/* ==========================================================================
   Homepage tile grid — full-bleed photo tiles, no shadow, no radius
   Use by wrapping images in <div class="ac-tile-grid"><div class="ac-tile">
   ========================================================================== */
.ac-tile-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}

.ac-tile-grid .ac-tile {
	position: relative;
	overflow: hidden;
}

.ac-tile-grid .ac-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ac-tile-grid .ac-tile .ac-tile-caption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 600;
	background: rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   Blog / archive cards — flatten OceanWP's default shadowed cards to match
   HoneySalt's minimal, borderless look
   ========================================================================== */
#content .blog-entry,
.oceanwp-blog-entry {
	box-shadow: none;
	border: none;
	border-radius: 0;
}

/* ==========================================================================
   Footer — OceanWP core footer structure (#footer wraps #footer-widgets
   and #footer-bottom)
   ========================================================================== */
#footer,
#footer-widgets,
#footer-bottom {
	background-color: var(--ac-bg-tint);
	color: var(--ac-text);
	font-family: var(--ac-body-font);
}

#footer a,
#footer-widgets a,
#footer-bottom a {
	color: var(--ac-text);
}


@media (max-width: 768px) {
	.ac-tile-grid {
		grid-template-columns: 1fr;
	}

	#logo img {
		max-height: 44px;
	}

	#site-navigation-wrap a,
	.main-nav > ul > li > a {
		font-size: 13px;
	}
}