/**
 * emora.gr, component styles.
 * Split from style.css (which holds only the required theme header, fonts,
 * and design tokens) so neither file becomes unmanageable.
 */

/* ---------------------------------------------------------------------------
   Blocksy palette.

   Blocksy drives its whole component set, body background, headings, body
   text, borders, links, buttons, from eight palette variables, shipping a
   blue-on-white default. Remapping those eight is what makes the theme adopt
   this design system, rather than chasing each of its components with a
   separate !important rule.

   bin/seed-pages.php also writes these as the colorPalette theme_mod, so the
   Customizer shows the real colours. That alone is not enough on the front
   end: Blocksy prints its generated palette CSS *after* this stylesheet, so
   a plain :root block here loses on cascade order. html:root outranks it on
   specificity instead, which does not depend on load order.
   --------------------------------------------------------------------------- */

html:root {
	--theme-palette-color-1: #c1552c;   /* ember, links, accents */
	--theme-palette-color-2: #9c4322;   /* ember dark, hover */
	--theme-palette-color-3: #2b211a;   /* char, headings */
	--theme-palette-color-4: #43342a;   /* body text */
	--theme-palette-color-5: #ddd0be;   /* borders */
	--theme-palette-color-6: #fbf8f3;   /* linen, light surfaces */
	--theme-palette-color-7: #f3ede3;   /* bone, site background */
	--theme-palette-color-8: #fbf8f3;   /* linen, cards */

	--theme-text-color: #43342a;
	--theme-headings-color: #2b211a;
	--theme-link-initial-color: #c1552c;
	--theme-link-hover-color: #9c4322;
	--theme-border-color: #ddd0be;
}

/* ---------------------------------------------------------------------------
   Header, SPEC.md §8 asks for a centred logo. Rendered by the child theme's
   own header.php (Blocksy's builder header is not output at all), so these
   are plain component styles rather than overrides fighting a grid we do not
   control.

   Two rows: utility note / brand / actions, then the nav strip. The nav sits
   on its own centred row so the wordmark is the only thing on the optical
   centre line of the first row.
   --------------------------------------------------------------------------- */

.emora-header {
	background: var(--emora-bone);
	border-bottom: 1px solid rgba(43, 33, 26, 0.1);
}

/* Visible only once focused, so keyboard users get the same skip link the
   parent theme's header provided. */
.emora-header__skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10;
	padding: 0.75rem 1.25rem;
	background: var(--emora-char);
	color: var(--emora-bone);
	text-decoration: none;
}

.emora-header__skip:focus {
	left: var(--emora-space-sm);
}

.emora-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--emora-space-sm);
	max-width: var(--emora-max-width);
	margin: 0 auto;
	padding: clamp(1rem, 2.5vw, 1.6rem) var(--emora-space-sm) clamp(0.75rem, 2vw, 1.1rem);
}

.emora-header__side {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	min-width: 0;
}

.emora-header__side--end {
	justify-content: flex-end;
}

.emora-header__note {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--emora-walnut);
	white-space: nowrap;
}

/* Brand, typographic, not a logo: SPEC.md §10 keeps a drawn mark out of
   this phase. The rules either side of the tagline are what an engraved
   plaque does, and they also stop the two lines reading as a plain stack. */

.emora-header__logo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	text-decoration: none;
	color: inherit;
}

.emora-header__wordmark {
	font-family: var(--emora-font-display);
	font-weight: 700;
	font-size: clamp(1.65rem, 4vw, 2.35rem);
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--emora-char);
}

.emora-header__tagline {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.6rem;
	letter-spacing: 0.32em;
	text-indent: 0.32em;   /* re-centres text that letter-spacing pushed left */
	text-transform: uppercase;
	color: var(--emora-walnut-light);
}

.emora-header__tagline::before,
.emora-header__tagline::after {
	content: '';
	width: clamp(0.9rem, 3vw, 1.75rem);
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}

/* Icon actions, search / account / cart */

.emora-header__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--emora-char);
	cursor: pointer;
	transition: color 0.18s ease, background-color 0.18s ease;
}

.emora-header__icon:hover,
.emora-header__icon:focus-visible {
	color: var(--emora-ember);
	background: rgba(193, 85, 44, 0.08);
}

.emora-header__icon svg {
	width: 1.3rem;
	height: 1.3rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.emora-header__cart-count {
	position: absolute;
	top: 0.3rem;
	right: 0.25rem;
	min-width: 1.05rem;
	height: 1.05rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background: var(--emora-ember);
	color: var(--emora-linen);
	font-family: var(--emora-font-body);
	font-size: 0.65rem;
	font-weight: 600;
	line-height: 1.05rem;
	text-align: center;
}

/* An empty cart shows no badge at all, rather than a "0" the visitor has to
   read before ignoring. */
.emora-header__cart-count:empty {
	display: none;
}

/* Search, revealed in place under the bar */

.emora-header__search {
	border-top: 1px solid rgba(43, 33, 26, 0.08);
	background: var(--emora-linen);
}

.emora-search {
	display: flex;
	gap: var(--emora-space-xs);
	max-width: var(--emora-max-width);
	margin: 0 auto;
	padding: var(--emora-space-sm);
}

.emora-search__field {
	flex: 1;
	min-width: 0;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--emora-walnut-light);
	border-radius: var(--emora-radius);
	background: var(--emora-linen);
	font-family: var(--emora-font-body);
	font-size: 0.95rem;
	color: var(--emora-char);
}

.emora-search__field:focus {
	outline: 2px solid var(--emora-ember);
	outline-offset: 1px;
}

/* Nav strip */

.emora-header__nav {
	display: flex;
	justify-content: center;
	padding: 0 var(--emora-space-sm) clamp(0.75rem, 1.8vw, 1.1rem);
}

.emora-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.emora-nav a {
	position: relative;
	display: inline-block;
	padding: 0.35rem 0;
	font-family: var(--emora-font-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--emora-char);
	transition: color 0.18s ease;
}

/* The underline grows from the centre on hover, a drawn line, closer to a
   burn mark than a border switching on. */
.emora-nav a::after {
	content: '';
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0;
	height: 1px;
	background: var(--emora-ember);
	transition: left 0.22s ease, right 0.22s ease;
}

.emora-nav a:hover,
.emora-nav .current-menu-item > a {
	color: var(--emora-ember);
}

.emora-nav a:hover::after,
.emora-nav a:focus-visible::after,
.emora-nav .current-menu-item > a::after {
	left: 0;
	right: 0;
}

/* Mobile drawer */

.emora-header__burger,
.emora-header__drawer {
	display: none;
}

.emora-drawer__nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.emora-drawer__nav a,
.emora-drawer__account {
	display: block;
	padding: 0.85rem 0;
	border-bottom: 1px solid rgba(43, 33, 26, 0.08);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--emora-char);
}

.emora-drawer__nav .current-menu-item > a {
	color: var(--emora-ember);
}

.emora-drawer__note {
	margin: var(--emora-space-sm) 0 0;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--emora-walnut);
}

@media (max-width: 860px) {
	.emora-header__bar {
		padding-top: 0.75rem;
	}

	/* The nav strip becomes the drawer; the note moves into it, since the
	   first row now only has room for burger / wordmark / cart. */
	.emora-header__nav,
	.emora-header__note,
	.emora-header__icon--account {
		display: none;
	}

	.emora-header__burger {
		display: inline-flex;
	}

	.emora-header__drawer {
		display: none;   /* toggled by [hidden] on the element itself */
		padding: 0 var(--emora-space-sm) var(--emora-space-md);
		border-top: 1px solid rgba(43, 33, 26, 0.08);
	}

	.emora-header__drawer:not([hidden]) {
		display: block;
	}
}

/* ---------------------------------------------------------------------------
   Buttons, two tiers, because a page where every button is the accent
   colour has no primary action. The cart proved it: "Χρήση κουπονιού" and
   "Ολοκλήρωση Παραγγελίας" carried identical weight, so the eye had to read
   both to find the one that matters.

   Primary is ink, not ember: on a warm cream page the near-black is the
   highest-contrast thing available, so it wins the page without the accent
   having to shout. Ember arrives on hover, the mark lighting up under the
   laser, which is also what keeps the colour meaningful once it is no
   longer sprayed across every control.

   Secondary is outlined. Coupon, update cart, continue shopping: real
   actions, but never the one the shop wants next.

   The rule is surface-dependent, not absolute: on the homepage's dark bands
   (home.css) ink would disappear, so the primary there stays ember. Light
   surface → ink; dark surface → ember.
   --------------------------------------------------------------------------- */

/* Primary, add to cart, proceed to checkout, place order. */
.button.alt,
.checkout-button,
.single_add_to_cart_button,
.wp-block-button__link,
#place_order {
	font-family: var(--emora-font-body) !important;
	font-weight: 600 !important;
	background-color: var(--emora-char) !important;
	border: 1px solid var(--emora-char) !important;
	color: var(--emora-bone) !important;
	border-radius: 999px !important;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.button.alt:hover,
.checkout-button:hover,
.single_add_to_cart_button:hover,
.wp-block-button__link:hover,
#place_order:hover {
	background-color: var(--emora-ember) !important;
	border-color: var(--emora-ember) !important;
	color: var(--emora-linen) !important;
}

/* Secondary, everything else that happens to be a button. The exclusions are
   the primary tier: .button and .single_add_to_cart_button score identically,
   so without them source order alone decided which tier won. */
.button:not(.alt):not(.single_add_to_cart_button):not(.checkout-button),
button:not(.emora-carousel__nav):not(.ct-toggle-close):not(.emora-header__icon):not(.alt):not(.single_add_to_cart_button),
input[type="submit"] {
	font-family: var(--emora-font-body) !important;
	font-weight: 600 !important;
	background-color: transparent !important;
	border: 1px solid var(--emora-walnut-light) !important;
	color: var(--emora-char) !important;
	border-radius: 999px !important;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.button:not(.alt):not(.single_add_to_cart_button):not(.checkout-button):hover,
button:not(.emora-carousel__nav):not(.ct-toggle-close):not(.emora-header__icon):not(.alt):not(.single_add_to_cart_button):hover,
input[type="submit"]:hover {
	background-color: rgba(43, 33, 26, 0.05) !important;
	border-color: var(--emora-char) !important;
	color: var(--emora-char) !important;
}

/* ---------------------------------------------------------------------------
   Collection card, shared by the homepage carousel and the Η Συλλογή μας
   index. Real sample photos land in Step 10; until then the plate stands in
   as the product in miniature rather than as an obvious placeholder box.
   --------------------------------------------------------------------------- */

.emora-card {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease;
}

.emora-card:hover,
.emora-card:focus-visible {
	transform: translateY(-4px);
}

/* A wood face with the collection's initial cut into it: inset highlight and
   shadow suggest depth, so the letter reads as engraved rather than printed
   flat on the surface, which is the product itself, in miniature. */
.emora-card__plate {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	border-radius: 3px;
	overflow: hidden;
	background:
		repeating-linear-gradient(
			92deg,
			rgba(43, 33, 26, 0.05) 0px,
			rgba(43, 33, 26, 0.05) 1px,
			transparent 1px,
			transparent 9px
		),
		linear-gradient(160deg, #9a7455 0%, #7a5942 55%, #6b4a34 100%);
	box-shadow: inset 0 0 0 1px rgba(43, 33, 26, 0.16);
}

.emora-card__initial {
	font-family: var(--emora-font-display);
	font-size: clamp(3.25rem, 7vw, 4.5rem);
	line-height: 1;
	color: rgba(43, 33, 26, 0.42);
	text-shadow:
		0 1px 0 rgba(255, 245, 230, 0.24),
		0 -1px 1px rgba(23, 16, 11, 0.5);
}

.emora-card__index {
	position: absolute;
	top: 0.75rem;
	left: 0.85rem;
	font-family: var(--emora-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: rgba(251, 248, 243, 0.55);
}

.emora-card__body {
	display: block;
	padding: 1rem 0.15rem 0;
}

.emora-card__name {
	display: block;
	font-family: var(--emora-font-display);
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--emora-char);
	margin-bottom: 0.3rem;
}

.emora-card__subtitle {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--emora-walnut);
}

/* ---------------------------------------------------------------------------
   Generic content pages (Η Ιστορία μας, legal pages, FAQ, Η Συλλογή μας)
   --------------------------------------------------------------------------- */

.emora-page-content {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--emora-space-lg) var(--emora-space-sm) var(--emora-space-xl);
}

.emora-page-header {
	margin-bottom: var(--emora-space-lg);
}

.emora-page-header h1 {
	margin: 0;
}

.emora-story-lead {
	font-family: var(--emora-font-display);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--emora-walnut);
}

.emora-story-signature {
	font-style: italic;
	color: var(--emora-walnut);
	margin-top: var(--emora-space-md);
}

.emora-legal-notice {
	padding: var(--emora-space-xs) var(--emora-space-sm);
	background: var(--emora-linen);
	border-left: 3px solid var(--emora-brass);
	border-radius: 4px;
}

.emora-content-pending {
	padding: var(--emora-space-md);
	background: var(--emora-linen);
	border: 1px dashed var(--emora-walnut-light);
	border-radius: var(--emora-radius);
	text-align: center;
	color: var(--emora-walnut);
}

/* Η Συλλογή μας, collection index */

.emora-index {
	max-width: var(--emora-max-width);
	margin: 0 auto;
	padding: var(--emora-space-lg) var(--emora-space-sm) var(--emora-space-xl);
}

.emora-index__header {
	margin-bottom: var(--emora-space-lg);
}

.emora-index__header h1 {
	margin: 0;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

.emora-index__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* ---------------------------------------------------------------------------
   Shop loop, every product intentionally belongs to all 7 collections, so
   Blocksy's per-card category tag list would show all 7 tags on every card.
   --------------------------------------------------------------------------- */

.products .meta-categories {
	display: none;
}

/* Product titles sit in char, not the link ember, so the price is the only
   accent on a card and the eye has somewhere to land. */
.products .woocommerce-loop-product__title,
.products .woocommerce-loop-product__title a,
.products li.product a:not(.button) .woocommerce-loop-product__title,
.product_title {
	font-family: var(--emora-font-display) !important;
	color: var(--emora-char) !important;
}

/* The cart's line-item title is a link, so it inherited the ember link
   colour and pulled the eye away from the totals and the checkout button.
   It is a label first, the visitor already knows what they added. */
.woocommerce-cart-form .product-name a {
	color: var(--emora-char) !important;
	text-decoration: none;
}

.woocommerce-cart-form .product-name a:hover {
	color: var(--emora-ember) !important;
}

/* Product images arrive in Step 10; WooCommerce's stock placeholder stands
   in until then and reads fine against the bone background. */
.woocommerce-product-gallery__image img {
	border-radius: var(--emora-radius);
}

.price,
.woocommerce-Price-amount {
	color: var(--emora-char) !important;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Product configurator (emora-core renders the markup; styling lives here)
   --------------------------------------------------------------------------- */

.emora-config {
	margin: var(--emora-space-md) 0;
}

.emora-step {
	margin-bottom: var(--emora-space-md);
	padding-bottom: var(--emora-space-sm);
	border-bottom: 1px solid rgba(43, 33, 26, 0.1);
}

.emora-step:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.emora-step__title {
	font-family: var(--emora-font-display);
	font-size: 1.0625rem;
	color: var(--emora-char);
	margin: 0 0 0.75rem;
}

.emora-step__required {
	font-family: var(--emora-font-body);
	font-weight: 400;
	color: var(--emora-walnut);
	font-size: 0.8125rem;
}

.emora-step__help {
	margin: 0.6rem 0 0;
	font-size: 0.875rem;
	color: var(--emora-walnut);
}

.emora-step__label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.9375rem;
	color: var(--emora-char);
}

.emora-field--file {
	display: block;
	width: 100%;
}

.emora-field--text {
	display: block;
	width: 100%;
	border-color: var(--emora-walnut-light);
}

/* Background choice */

.emora-option {
	display: flex;
	gap: var(--emora-space-xs);
	align-items: flex-start;
	padding: var(--emora-space-sm);
	margin-bottom: var(--emora-space-xs);
	border: 1px solid rgba(43, 33, 26, 0.15);
	border-radius: var(--emora-radius);
	cursor: pointer;
	background: var(--emora-linen);
}

.emora-option:last-child {
	margin-bottom: 0;
}

.emora-option:has(input:checked) {
	border-color: var(--emora-ember);
	background: color-mix(in srgb, var(--emora-ember) 6%, var(--emora-linen));
}

.emora-option input[type="radio"] {
	margin-top: 0.25rem;
	flex: 0 0 auto;
	accent-color: var(--emora-ember);
}

.emora-option__body {
	display: block;
}

.emora-option__label {
	display: block;
	font-weight: 600;
	color: var(--emora-char);
	margin-bottom: 0.25rem;
}

.emora-option__note {
	font-weight: 400;
	color: var(--emora-walnut);
}

.emora-option__price {
	font-weight: 600;
	color: var(--emora-ember);
	white-space: nowrap;
}

.emora-option__desc {
	display: block;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--emora-walnut);
}

/* ---------------------------------------------------------------------------
   Checkout, social media consent and delivery notice
   --------------------------------------------------------------------------- */

.emora-consent {
	margin: var(--emora-space-sm) 0;
	padding: var(--emora-space-sm) var(--emora-space-md);
	border: 1px solid rgba(43, 33, 26, 0.15);
	border-radius: var(--emora-radius);
	background: var(--emora-linen);
}

.emora-consent__title {
	font-family: var(--emora-font-display);
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
	color: var(--emora-char);
}

.emora-consent__text {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--emora-walnut);
}

.emora-consent__label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	cursor: pointer;
	font-size: 0.9375rem;
	color: var(--emora-char);
}

.emora-consent__label input[type="checkbox"] {
	margin-top: 0.2rem;
	flex: 0 0 auto;
	accent-color: var(--emora-ember);
}

.emora-delivery-notice {
	margin: var(--emora-space-sm) 0;
	padding: var(--emora-space-xs) var(--emora-space-sm);
	border-left: 3px solid var(--emora-brass);
	background: var(--emora-linen);
}

.emora-delivery-notice p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--emora-walnut);
}

/* ---------------------------------------------------------------------------
   Site footer, replaces Blocksy's single-line credit row. Rendered by the
   child theme's footer.php. Business details and social links are pending
   (docs/OPEN-QUESTIONS.md #2) and are marked in place, not invented.
   --------------------------------------------------------------------------- */

.emora-footer {
	background: var(--emora-char);
	color: var(--emora-bone);
	padding: clamp(2.75rem, 6vw, 4.5rem) var(--emora-space-sm) 0;
}

.emora-footer__inner {
	max-width: var(--emora-max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

.emora-footer__logo {
	display: block;
	font-family: var(--emora-font-display);
	font-size: 1.5rem;
	color: var(--emora-linen);
	letter-spacing: 0.02em;
	margin-bottom: 0.85rem;
}

.emora-footer__mission {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.65;
	color: rgba(243, 237, 227, 0.7);
	max-width: 34ch;
}

.emora-footer__heading {
	font-family: var(--emora-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--emora-brass);
	margin: 0 0 1rem;
}

.emora-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.emora-footer__list a {
	color: rgba(243, 237, 227, 0.8) !important;
	text-decoration: none;
	font-size: 0.875rem;
	transition: color 0.15s ease;
}

.emora-footer__list a:hover,
.emora-footer__list a:focus-visible {
	color: var(--emora-ember) !important;
}

/* Marked distinctly so a missing detail is never mistaken for real content. */
.emora-footer__pending {
	font-size: 0.8125rem;
	font-style: italic;
	color: rgba(243, 237, 227, 0.42);
}

.emora-footer__delivery {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	color: var(--emora-brass);
}

.emora-footer__bar {
	max-width: var(--emora-max-width);
	margin: 0 auto;
	padding: 1.25rem 0 1.5rem;
	border-top: 1px solid rgba(243, 237, 227, 0.12);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--emora-space-sm);
	flex-wrap: wrap;
}

.emora-footer__copy,
.emora-footer__pay {
	margin: 0;
	font-size: 0.8125rem;
	color: rgba(243, 237, 227, 0.55);
}

@media (max-width: 900px) {
	.emora-footer__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.emora-footer__inner {
		grid-template-columns: 1fr;
	}

	.emora-footer__bar {
		flex-direction: column;
		align-items: flex-start;
	}
}