/*
Theme Name: Bathique Club
Theme URI: https://blog.bathiqueclub.com
Author: Bathique Club
Author URI: https://bathiqueclub.com
Description: A minimal-luxury block theme for the Bathique Club editorial blog. Built for a handmade, cold-pressed soap brand — warm ivory canvas, crafted Fraunces display type, clean Inter body, and conversion blocks for newsletter capture and shop CTAs. Matches the brand's clean-beauty, vegan, plastic-free ethos.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bathique
Tags: blog, one-column, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, threaded-comments, translation-ready
*/

/* =========================================================================
   Bathique Club — supplemental styles
   theme.json handles the design system (color, type, spacing). This file
   adds the polish: editorial reading touches, hover motion, and the
   conversion blocks (newsletter + shop CTA + pillar cards).
   ========================================================================= */

:root {
	--bathique-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* --- Links: refined underline on hover, clean in nav ------------------- */
.wp-block-post-content a,
.entry-content a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color 0.2s var(--bathique-ease);
}

/* --- Buttons: subtle lift -------------------------------------------- */
.wp-block-button__link {
	transition: background-color 0.25s var(--bathique-ease),
		color 0.25s var(--bathique-ease), transform 0.25s var(--bathique-ease);
}
.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* Outline button variant (used in header / footer "Shop") */
.wp-block-button.is-style-bathique-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-bathique-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}

/* --- Navigation -------------------------------------------------------- */
.wp-block-navigation {
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.wp-block-navigation a {
	text-decoration: none;
}
.wp-block-navigation .wp-block-navigation-item__content {
	transition: opacity 0.2s var(--bathique-ease);
}
.wp-block-navigation .wp-block-navigation-item:hover {
	opacity: 0.6;
}

/* --- Site header: hairline divider ------------------------------------ */
.bathique-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* --- Reading experience: drop cap on lead paragraph ------------------- */
.wp-block-post-content > p.has-drop-cap:first-of-type:first-letter {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 4.6em;
	line-height: 0.7;
	font-weight: 400;
	margin: 0.05em 0.1em 0 0;
	color: var(--wp--preset--color--primary);
}

/* Eyebrow label (category/section kicker) */
.bathique-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

/* --- Post cards (query loop) ------------------------------------------ */
.bathique-card {
	transition: transform 0.3s var(--bathique-ease);
}
.bathique-card:hover {
	transform: translateY(-4px);
}
.bathique-card .wp-block-post-featured-image img {
	transition: transform 0.6s var(--bathique-ease);
}
.bathique-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}
.bathique-card .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 4px;
}

/* --- Pillar cards ------------------------------------------------------ */
.bathique-pillar {
	transition: border-color 0.25s var(--bathique-ease),
		box-shadow 0.25s var(--bathique-ease);
}
.bathique-pillar:hover {
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: 0 12px 32px rgba(35, 33, 28, 0.08);
}

/* --- Newsletter / shop CTA panels ------------------------------------- */
.bathique-panel {
	border-radius: 6px;
}

/* Klaviyo / form input baseline so the embed inherits the brand */
.bathique-panel input[type="email"],
.bathique-panel input[type="text"] {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	width: 100%;
}
.bathique-panel input[type="email"]:focus,
.bathique-panel input[type="text"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}

/* --- Featured image rounding on single posts -------------------------- */
.wp-block-post-featured-image img {
	border-radius: 4px;
}

/* --- Footer ------------------------------------------------------------ */
.bathique-footer {
	border-top: 1px solid var(--wp--preset--color--border);
}
.bathique-footer a {
	text-decoration: none;
}
.bathique-footer a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* --- Generous reading measure for post body --------------------------- */
.wp-block-post-content {
	font-size: 1.125rem;
	line-height: 1.75;
}
.wp-block-post-content h2 {
	margin-top: 2.2em;
}
.wp-block-post-content h3 {
	margin-top: 1.6em;
}

/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		scroll-behavior: auto !important;
	}
	.bathique-card:hover,
	.bathique-card:hover .wp-block-post-featured-image img,
	.wp-block-button__link:hover {
		transform: none;
	}
}