/*
Theme Name:        Alpha Pro Custom Theme
Theme URI:         https://www.shaytehcoslutions.com
Description:       A custom child theme for Hello Elementor – Alpha Pro WooCommerce store.
Author:            Shay Tech Solutions
Author URI:        https://www.shaytehcoslutions.com
Template:          hello-elementor
Version:           1.0.0
Text Domain:       alpha-pro-custom-theme
License:           GNU General Public License v3 or later
License URI:       https://www.gnu.org/licenses/gpl-3.0.html
Tags:              elementor, hello-elementor, child-theme
*/

/*
 * This is the core / site-chrome stylesheet: design tokens, global reset,
 * header (announcement bar, navbar, categories nav), main content wrapper and
 * the responsive layout. Feature areas live in their own files, enqueued by
 * functions.php after this one so they inherit the tokens below:
 *   - assets/css/shop.css     → product loop cards + products carousel
 *   - assets/css/account.css  → My Account login / register + dashboard
 */

/* =========================================================
   Design Tokens
   ========================================================= */
:root {
	--color-dark: #101010;
	--color-gold: #dab05c;
	--color-light: #e8f0f3;
	--color-gold-hover: #c99b44;

	--font-primary: "Segoe UI", Arial, sans-serif;

	--nav-height: 72px;
	--announcement-height: 40px;

	/* Products carousel */
	--carousel-arrow-size: 1.5rem;
	--carousel-arrow-wrapper: 2.5rem;
	--carousel-gap: 0.5rem;
	--carousel-per-view: 4;
}

/* =========================================================
   Global Reset Helpers
   ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--font-primary);
	direction: rtl;
	margin: 0;
}

/* =========================================================
   Announcement Bar
   ========================================================= */
.announcement-bar {
	background-color: var(--color-gold);
	color: var(--color-dark);
	height: var(--announcement-height);
	display: flex;
	align-items: center;
	justify-content: center;
}

.announcement-bar__inner {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.announcement-bar__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.announcement-bar__currency {
	font-family: "Heebo", var(--font-primary);
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1;
	vertical-align: -0.05em;
}

/* =========================================================
   Main Navbar
   ========================================================= */
.main-nav {
	background-color: var(--color-dark);
	display: flex;
	flex-direction: column;
}

.main-nav__container {
	width: 100%;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 24px;
	max-width: 1400px;
	height: 100px;
}

@media (max-width: 1500px) {
	.main-nav__container {
		max-width: 1000px;
	}
}

/* ── Logo ── */
.main-nav__logo a,
.main-nav__site-name {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.main-nav__logo img {
	max-height: 85px;
	width: auto;
}

.main-nav__site-name {
	color: var(--color-light);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

/* ── Search ── */
.main-nav__search {
	width: 100%;
}

.search-form {
	display: flex;
	align-items: center;
	background-color: #1d1d1f;
	border-radius: 12px;
	border: 1px solid #666;
	overflow: hidden;
	height: 44px;
}

.search-form__submit {
	border-radius: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-gold);
	border: none;
	cursor: pointer;
	padding: 0 14px;
	height: 100%;
	transition: background-color 0.2s ease;
}

.search-form__submit:hover,
.search-form__submit:focus-visible {
	background-color: var(--color-gold-hover);
	outline: none;
}

.search-form__submit svg {
	width: 18px;
	height: 18px;
	color: var(--color-dark);
}

.search-form__input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 0 14px;
	font-size: 0.9375rem;
	color: var(--color-light);
	height: 100%;
	direction: rtl;
	border-radius: 0;
}

.search-form__input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.search-form__input:focus {
	outline: none;
}

/* ── Actions (Account + Cart) ── */
.main-nav__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}

.nav-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	text-decoration: none;
	color: var(--color-light) !important;
	background: transparent;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.02em;
	transition: color 0.2s ease;
	border: 1px solid #666;
	border-radius: 6px;
	padding: 2px 4px;
	min-width: 72px;
}

.nav-action:hover,
.nav-action:focus-visible {
	color: var(--color-gold);
	outline: none;
}

.nav-action__icon {
	width: 22px;
	height: 22px;
}

.nav-action__icon-wrap {
	position: relative;
	display: flex;
}

.nav-action__cart-count {
	position: absolute;
	top: -6px;
	left: 28px;
	background-color: var(--color-gold);
	color: var(--color-dark);
	font-size: 0.65rem;
	font-weight: 700;
	min-width: 17px;
	height: 17px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Mobile-only nav actions (hamburger + search-toggle) are hidden on desktop. */
.nav-action--mobile-only {
	display: none;
}

/* Icon morph: hamburger/search swap to X when their panel is open. */
.nav-action__icon--close {
	display: none;
}

.main-nav.is-categories-open .nav-action--menu .nav-action__icon--menu,
.main-nav.is-search-open .nav-action--search-toggle .nav-action__icon--search {
	display: none;
}

.main-nav.is-categories-open .nav-action--menu .nav-action__icon--close,
.main-nav.is-search-open .nav-action--search-toggle .nav-action__icon--close {
	display: inline-block;
}

/* =========================================================
   Categories Nav (WooCommerce, inside .main-nav)
   ========================================================= */
.main-nav__categories {
	background-color: var(--color-dark);
}

.main-nav__categories-list {
	list-style: none;
	margin: 0 auto;
	padding: 0 24px;
	max-width: 1400px;
	display: flex;
	gap: 0;
	flex-wrap: wrap;
	justify-content: center;
}

@media (max-width: 1500px) {
	.main-nav__categories-list {
		max-width: 1000px;
	}
}

.main-nav__category-item {
	position: relative;
}

.main-nav__category-row {
	display: flex;
	align-items: stretch;
}

.main-nav__category-link {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 12px 18px;
	color: var(--color-light) !important;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	transition:
		color 0.2s ease,
		background-color 0.2s ease;
}

.main-nav__category-toggle {
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--color-light);
	padding: 0 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		color 0.2s ease,
		background-color 0.2s ease;
}

/* Highlight link/toggle when hovering the row, focusing either control,
   hovering anywhere on the item (including its dropdown), or while open. */
.main-nav__category-link:hover,
.main-nav__category-link:focus-visible,
.main-nav__category-item:hover .main-nav__category-link,
.main-nav__category-item.is-open .main-nav__category-link,
.main-nav__category-toggle:hover,
.main-nav__category-toggle:focus-visible,
.main-nav__category-item:hover .main-nav__category-toggle,
.main-nav__category-item.is-open .main-nav__category-toggle {
	color: var(--color-gold);
	background-color: rgba(218, 176, 92, 0.08);
	outline: none;
}

.main-nav__category-caret {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}

.main-nav__category-item--has-children:hover .main-nav__category-caret,
.main-nav__category-item--has-children.is-open .main-nav__category-caret {
	transform: rotate(180deg);
}

/* Dropdown */
.main-nav__subcategories {
	display: none;
	position: absolute;
	top: 100%;
	inset-inline-end: 0;
	background-color: var(--color-dark);
	border: 1px solid #2a2a2a;
	border-top: 2px solid var(--color-gold);
	list-style: none;
	margin: 0;
	padding: 6px 0;
	min-width: 220px;
	z-index: 9999;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.main-nav__category-item--has-children:hover > .main-nav__subcategories,
.main-nav__category-item--has-children:focus-within > .main-nav__subcategories,
.main-nav__category-item--has-children.is-open > .main-nav__subcategories {
	display: block;
}

/* Hide the click-opened dropdown while another category is being hovered,
   so only one submenu is visible at a time. Restored on mouseleave. */
.main-nav__category-item--has-children.is-open.is-suppressed
	> .main-nav__subcategories {
	display: none;
}

.main-nav__category-item--has-children.is-open.is-suppressed
	.main-nav__category-caret {
	transform: none;
}

/* User explicitly collapsed via the caret button — beats :hover and
   :focus-within so the dropdown stays closed until the mouse leaves
   the item (then a fresh hover can re-open it). */
.main-nav__category-item--has-children.is-force-closed
	> .main-nav__subcategories {
	display: none;
}

.main-nav__category-item--has-children.is-force-closed
	.main-nav__category-caret {
	transform: none;
}

/* Caret stays gold at all states (closed, hovered, and open). */
/* .main-nav__category-caret {
	color: var(--color-gold);
} */

.main-nav__subcategory-link {
	display: block;
	padding: 9px 18px;
	color: var(--color-light) !important;
	text-decoration: none;
	font-size: 0.85rem;
	transition:
		color 0.15s ease,
		background-color 0.15s ease;
}

.main-nav__subcategory-link:hover,
.main-nav__subcategory-link:focus-visible {
	color: var(--color-gold);
	background-color: rgba(218, 176, 92, 0.08);
	outline: none;
}

/* =========================================================
   Site Footer
   Four-column grid: brand → service → why-buy → quick-links.
   Inherits dir="rtl" from <html>, so DOM order 1→4 maps visually
   right→left. Cards share .site-footer__card; quick-link anchors
   get a CSS-border chevron at their end (left in RTL).
   ========================================================= */
.site-footer {
	background-color: var(--color-dark);
	color: var(--color-light);
	margin-top: 80px;
	border-top: 1px solid rgba(218, 176, 92, 0.2);
	padding: 1rem;
}

.site-footer__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 56px 24px 40px;
	display: grid;
	grid-template-columns: 1fr 1.25fr 1.25fr 1fr;
	gap: 40px;
	align-items: start;
}

@media (max-width: 1500px) {
	.site-footer__inner {
		gap: 28px;
	}
}

/* ── Column headings ── */
.site-footer__heading {
	margin: 0 0 22px;
	padding-bottom: 10px;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--color-gold);
	letter-spacing: 0.03em;
	text-align: start;
	position: relative;
}

.site-footer__heading::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translateX(-50%);
	width: 48px;
	height: 2px;
	background-color: var(--color-gold);
	border-radius: 2px;
}

/* ── Brand column ── */
.site-footer__col--brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
}

.site-footer__logo a,
.site-footer__site-name {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.site-footer__logo img {
	max-height: 140px;
	width: auto;
}

.site-footer__site-name {
	color: var(--color-light);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.site-footer__tagline {
	margin: 0;
	color: rgba(232, 240, 243, 0.7);
	font-size: 0.9rem;
	line-height: 1.5;
	max-width: 22ch;
}

/* ── Card lists (service + why-buy) ── */
.site-footer__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer__cards li {
	margin: 0;
}

.site-footer__card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background-color: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease;
}

a.site-footer__card:hover,
a.site-footer__card:focus-visible {
	background-color: rgba(218, 176, 92, 0.08);
	border-color: rgba(218, 176, 92, 0.4);
	outline: none;
	transform: translateY(-2px);
}

.site-footer__card-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: rgba(218, 176, 92, 0.12);
	color: var(--color-gold);
}

.site-footer__card-icon svg {
	width: 22px;
	height: 22px;
}

.site-footer__card-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.site-footer__card-title {
	color: var(--color-light);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
}

.site-footer__card-sub {
	color: rgba(232, 240, 243, 0.6);
	font-size: 0.8rem;
	line-height: 1.4;
}

/* ── Quick links column ── */
.site-footer__col--links .site-footer__heading {
	text-align: start;
}

.site-footer__col--links .site-footer__heading::after {
	right: 0;
	transform: translateX(-50%);
}

.site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.site-footer__menu li,
.site-footer__menu-item {
	margin: 0;
}

.site-footer__menu a,
.site-footer__menu-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	color: var(--color-light);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	transition: color 0.2s ease;
}

/* CSS-border chevron sitting at the end of each row (left in RTL).
   Uses borders so it's immune to bidi-mirroring of unicode glyphs. */
.site-footer__menu a::after,
.site-footer__menu-link::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-inline-start: auto;
	border-top: 1.5px solid var(--color-gold);
	border-left: 1.5px solid var(--color-gold);
	transform: rotate(-45deg);
	opacity: 0.7;
	transition:
		transform 0.2s ease,
		opacity 0.2s ease;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible,
.site-footer__menu-link:hover,
.site-footer__menu-link:focus-visible {
	color: var(--color-gold);
	outline: none;
}

.site-footer__menu a:hover::after,
.site-footer__menu a:focus-visible::after,
.site-footer__menu-link:hover::after,
.site-footer__menu-link:focus-visible::after {
	opacity: 1;
	transform: rotate(-45deg) translate(2px, -2px);
}

/* ── Bottom strip (copyright) ── */
.site-footer__bottom {
	border-top: 1px solid rgba(218, 176, 92, 0.18);
	padding: 16px 24px;
	text-align: center;
}

.site-footer__copyright {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.6;
	color: rgba(232, 240, 243, 0.65);
	letter-spacing: 0.02em;
}

.site-footer__copyright-sep {
	margin: 0 6px;
	color: rgba(218, 176, 92, 0.45);
}

.site-footer__credit {
	color: var(--color-gold);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.site-footer__credit:hover,
.site-footer__credit:focus-visible {
	color: var(--color-gold-hover);
	outline: none;
}

/* ── Tablet: 2-column grid; brand spans full row ── */
@media (max-width: 1023px) {
	.site-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 36px 28px;
	}

	.site-footer__col--links .site-footer__heading {
		text-align: start;
	}

	.site-footer__col--links .site-footer__heading::after {
		right: 0;
	}
	/* Brand sits last in DOM order (so RTL desktop puts it on the left); on
	   mobile we want it greeting visitors first, so lift it above the rest. */
	.site-footer__col--brand {
		order: -1;
	}
}

/* ── Mobile: single column; brand jumps to the top ── */
@media (max-width: 767px) {
	.site-footer {
		margin-top: 48px;
	}

	.site-footer__inner {
		grid-template-columns: 1fr;
		padding: 36px 16px 24px;
		gap: 28px;
	}

	/* Brand sits last in DOM order (so RTL desktop puts it on the left); on
	   mobile we want it greeting visitors first, so lift it above the rest. */
	.site-footer__col--brand {
		order: -1;
	}

	.site-footer__logo img {
		max-height: 96px;
	}

	.site-footer__heading {
		margin-bottom: 16px;
		font-size: 1rem;
	}

	.site-footer__card {
		padding: 12px 14px;
		gap: 12px;
	}

	.site-footer__card-icon {
		width: 40px;
		height: 40px;
	}

	.site-footer__card-icon svg {
		width: 20px;
		height: 20px;
	}

	.site-footer__bottom {
		padding: 12px 16px;
	}

	.site-footer__copyright {
		font-size: 0.7rem;
	}
}

/* =========================================================
   Main Content
   Standard padding on <main> for non-Elementor pages. Elementor
   adds `elementor-page-*` to <body> on its own pages, and those
   control their own layout — excluding them here prevents a
   double-padding effect on Elementor-designed templates.
   ========================================================= */
body:not([class*="elementor-page-"]) main {
	padding: 40px;
}

@media (max-width: 767px) {
	body:not([class*="elementor-page-"]) main {
		padding: 20px;
	}
}

/* =========================================================
   Sticky header offset for page content
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	padding-block-end: 0 !important;
	padding-block-start: 0 !important;
	max-width: 100% !important;
}

/* =========================================================
   Plugin Overrides
   Reset opinionated rules from elementor/frontend.min.css that
   conflict with our layout. Hello Elementor's stylesheets are
   disabled at the PHP level (see functions.php), so we no longer
   need to fight theme.css. Elementor still loads its own CSS.
   ========================================================= */

/* Elementor – frontend.min.css (.e-con container) inside the header only.
   Elementor's frontend.min.css and per-post CSS files load AFTER our child
   stylesheet, so we can't win by source order alone — class-doubling
   `.e-con.e-con` bumps specificity to (0,2,0) so we beat Elementor's
   (0,1,0). Scoped to .site-header so Elementor-designed pages keep
   whatever inline padding their containers were authored with. */
.site-header .e-con.e-con {
	padding-inline-start: 0;
	padding-inline-end: 0;
}

/* =========================================================
   Checkout — Sign in with Google
   Wraps Google Site Kit's button (rendered by
   alpha_pro_render_checkout_google_signin() in functions.php) at the top
   of the checkout returning-customer login form. Scoped to the wrapper
   class so it only applies where the button is output (checkout).
   ========================================================= */
.alpha-checkout-google {
	margin: 0 0 8px;
}

.alpha-checkout-google__divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 4px;
	color: #888;
	font-size: 0.85rem;
	white-space: nowrap;
}

.alpha-checkout-google__divider::before,
.alpha-checkout-google__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #ececec;
}

/* =========================================================
   Mobile Layout (≤767px)
   Stack header into 3 rows: logo, icons, optional panel
   (search input OR categories nav, mutually exclusive).
   ========================================================= */
@media (max-width: 767px) {
	/* Reveal hamburger + search-toggle. */
	.nav-action--mobile-only {
		display: flex;
	}

	/* Icon-only nav actions on small screens. */
	.nav-action__label {
		display: none;
	}

	.nav-action {
		min-width: 0;
		padding: 8px 10px;
	}

	/* Cart count badge follows the smaller icon. */
	.nav-action__cart-count {
		left: auto;
		inset-inline-start: 16px;
	}

	/* Reorder icons so RTL flow renders right → left:
	   Hamburger, Search, Profile, Cart. */
	.nav-action--menu {
		order: 1;
	}
	.nav-action--search-toggle {
		order: 2;
	}
	.nav-action--account {
		order: 3;
	}
	.nav-action--cart {
		order: 4;
	}

	/* Stack container as column: logo, actions, search panel. */
	.main-nav__container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 12px 16px;
		height: auto;
	}

	.main-nav__logo {
		order: 1;
	}
	.main-nav__actions {
		order: 2;
		width: 100%;
		justify-content: space-around;
		gap: 8px;
	}
	.main-nav__search {
		order: 3;
		width: 100%;
		display: none;
	}

	.main-nav.is-search-open .main-nav__search {
		display: block;
	}

	.main-nav__logo img {
		max-height: 56px;
	}

	/* Categories nav: hidden until hamburger is toggled. */
	.main-nav__categories {
		display: none;
	}

	.main-nav.is-categories-open .main-nav__categories {
		display: block;
	}

	/* Vertical accordion layout. */
	.main-nav__categories-list {
		flex-direction: column;
		gap: 0;
		padding: 0;
		max-width: 100%;
	}

	.main-nav__category-item {
		width: 100%;
		border-bottom: 1px solid #2a2a2a;
	}

	.main-nav__category-link {
		padding: 14px 18px;
	}

	/* Inline subcategories on mobile (no absolute dropdown). */
	.main-nav__subcategories {
		position: static;
		width: 100%;
		min-width: 0;
		border: none;
		box-shadow: none;
		background-color: transparent;
		padding: 0;
		padding-inline-start: 16px;
	}

	.main-nav__subcategory-link {
		padding: 10px 18px;
	}
}