/*
Theme Name: Jinnie Astra Child
Theme URI: https://jinnie.gr
Template: astra
Author: Jinnie
Author URI: https://jinnie.gr
Description: CSS-only reskin of Astra — Jinnie's navy/gold/cream palette, rounded corners and Playfair Display + Inter typography, with zero template/hook changes so shop/product functionality stays exactly as-is.
Version: 1.0.4
Requires at least: 6.3
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jinnie-astra-child

IMPORTANT: "Template: astra" above must match the parent theme's folder
name exactly (usually "astra" — confirm in wp-content/themes/ if Astra was
renamed on the server).

NOTE ON SELECTORS: the header/footer rules below were rewritten against the
actual rendered HTML of jinnie.gr (fetched and inspected directly), so
`.site-header`, `.main-header-menu`, `.menu-link`, `.site-footer`,
`#astra-footer-menu`, `.ast-footer-copyright` etc. are confirmed real
classes, not guesses. Everything else (buttons, WooCommerce product grid)
targets stable WooCommerce core classes, unaffected by Astra version.
Some rules use !important deliberately, since this stylesheet's whole job
is to win against Astra's Customizer-generated inline CSS regardless of
load order.
*/

:root {
	--jinnie-navy: #12203F;
	--jinnie-navy-light: #1E3358;
	--jinnie-gold: #C6A15B;
	--jinnie-gold-light: #E7D5A6;
	--jinnie-cream: #FAF6EE;
	--jinnie-white: #FFFFFF;
	--jinnie-ink: #1B1F2A;
	--jinnie-gray: #6E6A61;
	--jinnie-border: #E7E1D4;

	--jinnie-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
	--jinnie-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--jinnie-radius: 14px;
	--jinnie-radius-sm: 8px;
	--jinnie-shadow: 0 6px 24px rgba(18, 32, 63, 0.08);

	/*
	 * NOTE: deliberately NOT remapping Astra's --ast-global-color-0..8 here.
	 * Checked the live site's compiled CSS — those variables are reused by
	 * things well outside the header/footer (e.g. .wp-block-heading and
	 * .has-ast-global-color-3-background-color both key off color-3), so
	 * blindly repointing them risks breaking text contrast in places we
	 * haven't looked at. Direct selectors below are safer and just as
	 * effective for the elements we actually need to restyle.
	 */
}

/* ==========================================================================
   Typography
   ========================================================================== */
body,
button,
input,
select,
textarea {
	font-family: var(--jinnie-font-body) !important;
	color: var(--jinnie-ink);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.ast-woo-shop-archive-title,
.woocommerce-loop-product__title,
.product_title,
.site-title {
	font-family: var(--jinnie-font-heading) !important;
	font-weight: 700 !important;
	color: var(--jinnie-navy) !important;
}

/* Astra sets `a{font-family:'Unna',serif}` directly on every link — a
   direct rule on the element always beats inheritance from body, regardless
   of specificity, so this needs its own !important override (the same
   reason headings above need one, but links aren't covered by the
   body/button/input list, so they were silently falling through to Unna
   everywhere: header nav, footer nav, breadcrumbs, copyright link, etc). */
a {
	font-family: var(--jinnie-font-body) !important;
	color: var(--jinnie-navy);
}
a:hover,
a:focus {
	color: var(--jinnie-gold);
}

/* ==========================================================================
   Page background + containers
   ========================================================================== */
body {
	background-color: var(--jinnie-cream);
}

/* ==========================================================================
   Buttons — generic HTML, Gutenberg blocks, Astra, WooCommerce, Elementor.
   Same treatment as the Jinnie mockup: pill shape, navy fill, gold on hover.
   ========================================================================== */
button,
input[type="submit"],
input[type="button"],
.ast-button,
.button,
.wp-block-button__link,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	font-family: var(--jinnie-font-body) !important;
	font-weight: 600 !important;
	background-color: var(--jinnie-navy) !important;
	border-color: var(--jinnie-navy) !important;
	color: var(--jinnie-white) !important;
	border-radius: 999px !important;
	padding: 0.8em 1.8em !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.ast-button:hover,
.button:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--jinnie-gold) !important;
	border-color: var(--jinnie-gold) !important;
	color: var(--jinnie-navy) !important;
}

/* ==========================================================================
   Forms — rounded inputs, gold focus ring
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	border-radius: var(--jinnie-radius-sm) !important;
	border: 1px solid var(--jinnie-border) !important;
}
:focus-visible {
	outline: 2px solid var(--jinnie-gold);
	outline-offset: 2px;
}

/* ==========================================================================
   Rounded corners — scoped to content/product imagery, not logos/icons
   ========================================================================== */
.entry-content img,
.wp-block-image img,
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img,
.woocommerce div.product div.images .flex-control-thumbs img {
	border-radius: var(--jinnie-radius-sm) !important;
}

/* ==========================================================================
   WooCommerce — product grid / cards
   ========================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--jinnie-white);
	border: 1px solid var(--jinnie-border);
	border-radius: var(--jinnie-radius) !important;
	padding: 16px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.woocommerce ul.products li.product:hover {
	box-shadow: var(--jinnie-shadow);
	transform: translateY(-2px);
}
.woocommerce ul.products li.product .price {
	color: var(--jinnie-navy) !important;
	font-weight: 600;
}
.woocommerce ul.products li.product .price del {
	color: var(--jinnie-gray);
	opacity: 0.7;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}
.woocommerce .star-rating,
.woocommerce ul.products li.product .star-rating {
	color: var(--jinnie-gold);
}
.woocommerce .star-rating span::before,
.woocommerce span.onsale {
	color: var(--jinnie-gold) !important;
}
.woocommerce span.onsale {
	background-color: var(--jinnie-gold) !important;
	color: var(--jinnie-navy) !important;
	border-radius: 999px !important;
	font-weight: 700;
}

/* ==========================================================================
   Single product
   ========================================================================== */
.single-product .summary .price {
	color: var(--jinnie-navy) !important;
	font-size: 1.4rem;
}

/* ==========================================================================
   Cart / Checkout / My Account tables
   ========================================================================== */
.woocommerce table.shop_table {
	border-radius: var(--jinnie-radius-sm);
	overflow: hidden;
	border: 1px solid var(--jinnie-border);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-bottom: 1px solid var(--jinnie-border);
}
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
	border-left: 3px solid var(--jinnie-gold) !important;
	background: var(--jinnie-cream) !important;
	border-radius: var(--jinnie-radius-sm);
}

/* ==========================================================================
   Header / navigation — confirmed classes from the live site's Header
   Builder markup (.ast-primary-header-bar is the actual visible bar;
   .main-header-bar itself renders transparent by default in this install).
   ========================================================================== */
.site-header,
.ast-primary-header-bar,
#ast-mobile-header .ast-primary-header-bar {
	background-color: var(--jinnie-white) !important;
	border-bottom-color: var(--jinnie-border) !important;
}

.main-header-menu .menu-link,
.main-header-menu .menu-item > a,
#astra-footer-menu .menu-item > a {
	font-weight: 500 !important;
	color: var(--jinnie-ink) !important;
}
.main-header-menu .menu-item:hover > a,
.main-header-menu .menu-item.current-menu-item > a {
	color: var(--jinnie-navy) !important;
	border-bottom: 2px solid var(--jinnie-gold);
}

/* Mobile hamburger + account/cart icons: they use fill="currentColor", so
   setting `color` on the button/link recolors the icon. */
.ast-mobile-menu-trigger-minimal,
.menu-toggle,
.ast-header-account-link,
.cart-container,
.ast-addon-cart-wrap,
.ast-woo-header-cart-info-wrap {
	color: var(--jinnie-navy) !important;
}

/* ==========================================================================
   Footer — .site-footer renders with a dark background and near-white
   text by default in this Astra install (--ast-global-color-2). Switching
   the background to cream *must* come with a matching dark text color,
   or the footer text goes invisible — that mismatch is what was breaking
   the footer before this update.
   ========================================================================== */
.site-footer {
	background-color: var(--jinnie-cream) !important;
	border-top: 1px solid var(--jinnie-border);
}

/* The actual dark paint wasn't coming from .site-footer at all — Astra's
   Footer Builder sets background-color independently on EACH of its three
   row wraps, via a compound selector like
   `.site-primary-footer-wrap[data-section="section-primary-footer-builder"]`.
   Those child divs sit on top of .site-footer and fully cover it, so fixing
   the parent alone had no visible effect. Confirmed via DevTools Computed
   panel: .site-primary-footer-wrap computed to rgb(20,26,15) (--ast-global-
   color-7) even after .site-footer itself correctly computed to cream. */
.site-above-footer-wrap,
.site-primary-footer-wrap,
.site-below-footer-wrap {
	background-color: var(--jinnie-cream) !important;
	background-image: none !important;
	border-top-color: var(--jinnie-border) !important;
}

.site-footer-focus-item,
.ast-footer-copyright.site-footer-focus-item {
	color: var(--jinnie-gray) !important;
}
#astra-footer-menu .menu-item:hover > a,
#astra-footer-menu .menu-item.current-menu-item > a {
	color: var(--jinnie-gold) !important;
}
.ast-footer-copyright a {
	color: var(--jinnie-navy) !important;
}

/* Footer social icons currently render in each network's own brand color
   via an inline `--color` custom property — unifying them to the palette
   (navy, gold on hover). An external !important rule still wins over a
   non-important inline style, so this is safe to override. */
.ast-builder-social-element {
	--color: var(--jinnie-navy) !important;
}
.ast-builder-social-element:hover {
	--color: var(--jinnie-gold) !important;
}

/* ==========================================================================
   Motion preference
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}

/* ==========================================================================
   Add further overrides below this line once you've checked the real
   markup in your browser's dev tools.
   ========================================================================== */