/* ShopApni: site-wide layout and typography (on top of foundation.css). */

:root {
	--sa-ink: #1F2A1A;
	--sa-muted: #5D6656;
	--sa-line: #E6E9DF;
	--sa-green: #80BB01;
	--sa-green-dark: #4F7A12;
	--sa-cream: #FAF7F0;
}

body {
	background: #fff;
	color: var(--sa-ink);
	font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
a { color: var(--sa-green-dark); }
a:hover, a:focus { color: var(--sa-ink); }

/* Templates that print straight into .site-content (a flex row) must
   take the whole row, or they shrink to their content and sit on the left
   (ShopApni Core's About/Contact wrapper, the Login page's .sa-auth-page, etc.). */
.site-content > .main-container,
.sa-full-width .site-content > * {
	flex: 1 1 100%;
	width: 100%;
	min-width: 0;
}

/* homepage.css contains copied snippets that pad <body> left and right, which put a
   white gutter beside the page and footer (the old theme reset this the same way). */
body {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Full-width pages (home, A2 Milk, Farmacy, About, Contact, Login) */
.sa-full-width .site-content,
.sa-full-width .inside-article {
	padding: 0 !important;
}
.sa-full-width .site-main { margin: 0 !important; }
.sa-full-width .entry-content { margin-top: 0 !important; }
.sa-full-width .site.grid-container { max-width: 100%; }

/* Regular pages: comfortable spacing in the 1200px container */
@media (max-width: 768px) {
	.one-container .site-content { padding: 22px 16px; }
}

/* The footer sits in a .site-footer wrapper; keep it plain */
.site-footer { background: none; padding: 0; }
.site-footer .sa-footer { margin: 0; }

/* WordPress core blocks inside pages */
.entry-content > *:first-child { margin-top: 0; }

/* Carried over from Appearance › Customize › Additional CSS (that box is saved per theme). */
/* Floating buttons, bottom-right: WhatsApp (Click to Chat plugin) sits lowest, just above
   the bottom app bar; Chatbase goes above it so its "Query? Ask me!" bubble cannot cover WhatsApp.
   !important beats the inline position the Click to Chat plugin writes. */
#ht-ctc-chat { bottom: 90px !important; right: 15px !important; }
#chatbase-bubble-button { bottom: 160px !important; }
#chatbase-message-bubbles { bottom: 210px !important; }
.sa-top-bar { display: none !important; }
.sa-footer { clear: both; }

/* Single blog posts: categories/tags row and previous/next links */
.single-post .site-main > article footer.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin-top: 2em;
	padding-top: 16px;
	border-top: 1px solid var(--sa-line);
	font-size: .92rem;
}
.single-post .sa-meta-label { color: var(--sa-muted); }
.single-post .post-navigation { margin-top: 24px; }
.single-post .post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}
.single-post .post-navigation .nav-links > div { max-width: 48%; }
.single-post .post-navigation .nav-next { margin-left: auto; text-align: right; }
.single-post .post-navigation a { display: block; text-decoration: none; }
.single-post .post-navigation .sa-nav-dir {
	display: block;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--sa-muted);
}
.single-post .post-navigation .sa-nav-title { font-weight: 600; color: #1A2E05; }
.single-post .featured-image { margin-bottom: 2em; line-height: 0; }
.single-post .featured-image img { border-radius: 14px; }