/**
 * AfriÉlan Studio — Design Tokens
 *
 * Single source of truth for color + type + shape, taken directly from
 * afrielean-customer-portal-design-system.md. Loaded on every page,
 * after Astra's own stylesheet AND after style.css, so these values win
 * without needing !important anywhere.
 *
 * If the palette or type ever changes, change it HERE FIRST — everything
 * else (homepage, shop, checkout, account, address book, forms) reads
 * from these variables.
 */

/* ---------------------------------------------------------------------
   1. Brand tokens (source of truth — from the design system doc)
--------------------------------------------------------------------- */
:root {
	/* Color */
	--brand-ink: #22201d;
	--brand-ink-soft: #6b6459;
	--brand-paper: #faf8f5;
	--brand-surface: #ffffff;
	--brand-line: #e8e3db;
	--brand-accent: #a9724f;
	--brand-accent-dark: #8e5f41; /* hover/active shade, not in the doc's table but needed for :hover states */
	--brand-accent-ink: #ffffff;
	--brand-dark-bg: #1f1b16;
	--brand-dark-fg: #d9d2c7;
	--brand-dark-fg-muted: #8f8776;
	--brand-success-bg: #eef2e5;
	--brand-success-fg: #4b6146;
	--brand-danger-bg: #f5e9e6;
	--brand-danger-fg: #96412f;

	/* Type */
	--brand-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--brand-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Shape */
	--brand-radius: 3px;
}

/* ---------------------------------------------------------------------
   2. Bridge into the vars the rest of this child theme already uses,
   so every existing component (checkout delivery/payment sections,
   address book, map picker) repaints automatically with zero markup
   changes.
--------------------------------------------------------------------- */
:root {
	/* Astra's own Global Color Palette vars — used by homepage.css and
	   by Astra's native header/nav/buttons across the whole site. */
	--ast-global-color-0: var(--brand-accent);   /* primary / buttons */
	--ast-global-color-1: var(--brand-accent-dark); /* hover / secondary */
	--ast-global-color-3: var(--brand-ink);      /* headings + body text */
	--ast-global-color-5: var(--brand-paper);    /* light section backgrounds */

	/* This child theme's own "--ae-*" tokens (checkout delivery/payment
	   sections, address book, map picker all read these). */
	--ae-ink: var(--brand-ink);
	--ae-muted: var(--brand-ink-soft);
	--ae-border: var(--brand-line);
	--ae-surface: var(--brand-surface);
	--ae-surface-soft: var(--brand-paper);
	--ae-accent: var(--brand-accent);
	--ae-accent-dark: var(--brand-accent-dark);
	--ae-danger: var(--brand-danger-fg);
	--ae-radius: var(--brand-radius);
	--ae-shadow: 0 1px 2px rgba(34, 32, 29, 0.04), 0 4px 14px rgba(34, 32, 29, 0.06);
}

/* ---------------------------------------------------------------------
   3. Fonts
--------------------------------------------------------------------- */
/* Google Fonts import lives in PHP (theme-setup.php) via wp_enqueue_style
   so it's a proper <link>, not an @import (@import blocks the render). */

/* ---------------------------------------------------------------------
   4. Base type + color, site-wide
--------------------------------------------------------------------- */
body {
	font-family: var(--brand-font-body);
	background: var(--brand-paper);
	color: var(--brand-ink);
	font-size: 15px;
	line-height: 1.5;
}

h1, h2, h3, h4,
.product-title, .section-heading, .ael-hero h1,
.ael-row-head h2, .entry-title, .page-title,
.woocommerce-products-header__title {
	font-family: var(--brand-font-display);
	font-weight: 500;
	color: var(--brand-ink);
}

a { color: var(--brand-accent); }
a:hover { color: var(--brand-accent-dark); }

hr, .ast-separate-container .ast-article-single, .site-footer {
	border-color: var(--brand-line);
}

/* ---------------------------------------------------------------------
   5. Buttons — the one shared "primary" and "secondary" look, applied
   to every button-like element already in the theme/Astra/WooCommerce
   so Add to Cart, Checkout, Place Order, Update Address etc. all match.
--------------------------------------------------------------------- */
.btn-primary,
.ael-btn:not(.ael-btn-disabled),
.afrielan-btn-primary,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-Button, .woocommerce-Button.button,
#place_order,
.wp-block-button__link,
button[type="submit"], input[type="submit"] {
	display: inline-block;
	background: var(--brand-accent);
	color: var(--brand-accent-ink) !important;
	border: none;
	padding: 12px 24px;
	border-radius: var(--brand-radius);
	font-family: var(--brand-font-body);
	font-weight: 500;
	font-size: 14px;
	cursor: pointer;
	transition: opacity .15s ease, background-color .15s ease;
}
.btn-primary:hover,
.ael-btn:not(.ael-btn-disabled):hover,
.afrielan-btn-primary:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
#place_order:hover,
button[type="submit"]:hover, input[type="submit"]:hover {
	background: var(--brand-accent-dark);
	opacity: 1;
	color: var(--brand-accent-ink) !important;
}

.btn-secondary,
.ael-btn-disabled {
	display: inline-block;
	background: transparent;
	color: var(--brand-ink-soft);
	border: 1px solid var(--brand-line);
	padding: 11px 22px;
	border-radius: var(--brand-radius);
	font-family: var(--brand-font-body);
	font-size: 14px;
}

/* ---------------------------------------------------------------------
   6. Badges
--------------------------------------------------------------------- */
.badge, .ael-badge {
	display: inline-block;
	border-radius: 20px;
	padding: 3px 12px;
	font-size: 11.5px;
	letter-spacing: .02em;
	font-family: var(--brand-font-body);
}
.badge-success { background: var(--brand-success-bg); color: var(--brand-success-fg); }

/* ---------------------------------------------------------------------
   7. Form fields, site-wide (checkout, my account, address book, login,
   register all inherit this without individual overrides)
--------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"], input[type="url"],
select, textarea,
.select2-container--default .select2-selection--single {
	padding: 9px 10px;
	border: 1px solid var(--brand-line) !important;
	border-radius: var(--brand-radius) !important;
	font-family: var(--brand-font-body);
	font-size: 14px;
	color: var(--brand-ink);
	background: var(--brand-surface);
	box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--brand-accent) !important;
}
label { font-family: var(--brand-font-body); color: var(--brand-ink); }

/* ---------------------------------------------------------------------
   8. Dark sections — footer, mobile nav drawer
--------------------------------------------------------------------- */
.site-footer, footer.site-footer, #footer.site-footer {
	background: var(--brand-dark-bg);
	color: var(--brand-dark-fg);
}
.site-footer a { color: var(--brand-dark-fg); }
.site-footer .muted { color: var(--brand-dark-fg-muted); }

/* ---------------------------------------------------------------------
   9a. Primary nav menu items (Home / Shop / etc.)
   BUG FIX: an earlier version filled hover/active with a background
   color, which stretched to the full header height (Astra lays the
   menu row out as a flex row with align-items:stretch, so any
   background on the anchor fills that whole stretched box, not just
   the text) - that's the oversized solid block. Per correction: this
   should be text color only, no background/box, on both hover and the
   current/active page.
--------------------------------------------------------------------- */
.main-header-menu .menu-item > a {
	transition: color .15s ease;
}
.main-header-menu .menu-item > a:hover,
.main-header-menu .menu-item.focus > a {
	color: var(--brand-accent) !important;
}
.main-header-menu .menu-item.current-menu-item > a,
.main-header-menu .menu-item.current-menu-parent > a {
	color: var(--brand-accent) !important;
	font-weight: 600;
}

/* Mobile / off-canvas drawer — Astra re-uses .main-header-menu inside
   the drawer too, but the drawer's own stylesheet sets a taller
   line-height + vertical padding on each row (this is what read as
   "Home and Cart are too tall"). Reset it back down to the same size
   as the desktop menu item, scoped to the drawer so desktop is
   untouched. */
.ast-mobile-popup-drawer .main-header-menu .menu-item > a,
.ast-mobile-popup-drawer .main-header-menu .menu-item {
	min-height: 0 !important;
	line-height: 1.4 !important;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	background: none !important; /* strip any inherited fill from the current-menu-item rule above */
}
/* The WooCommerce cart icon element in the drawer is a flex row with
   its own icon+count wrapper - give it the same compact vertical
   rhythm as the menu items next to it instead of its default height,
   and make sure it never gets a solid fill either. */
.ast-mobile-popup-drawer .ast-cart-menu-wrap,
.ast-mobile-popup-drawer .ast-site-header-cart {
	min-height: 0 !important;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	background: none !important;
}

/* ---------------------------------------------------------------------
   9b. Off-canvas (mobile) primary menu — reduced item set. See the PHP
   side of this fix (ael_tag_home_menu_item) in inc/nav-account.php.
   Desktop is untouched: every rule below is scoped under
   .ast-mobile-popup-drawer, which only wraps the mobile drawer.
     - Logged out: Home, Cart, Login, Register only.
     - Logged in:  Home, Cart, Address Book, Account Details, Orders.
--------------------------------------------------------------------- */
/* Hide every ordinary page link in the drawer by default... */
.ast-mobile-popup-drawer .main-header-menu > .menu-item {
	display: none;
}
/* ...except Home, and the account block (Login/Register, or the
   logged-in account links below), which always stays visible. */
.ast-mobile-popup-drawer .main-header-menu > .menu-item.ael-menu-home,
.ast-mobile-popup-drawer .main-header-menu > .menu-item.ael-nav-account {
	display: block;
}
/* The logged-in account block is normally a click-to-open dropdown
   (see .ael-account-dropdown below) - inside the drawer it should
   just read as a flat list of links instead, so drop the toggle
   button and force the menu open with no positioning/shadow. */
.ast-mobile-popup-drawer .ael-account-dropdown-toggle {
	display: none;
}
.ast-mobile-popup-drawer .ael-account-dropdown-menu {
	display: block !important;
	position: static;
	min-width: 0;
	box-shadow: none;
	border: none;
	padding: 0;
}
/* Per the spec this drawer should show ONLY Address Book / Account
   Details / Orders - Logout is intentionally left out here (still
   reachable from the desktop account dropdown). */
.ast-mobile-popup-drawer .ael-dropdown-divider,
.ast-mobile-popup-drawer .ael-logout-link {
	display: none;
}

/* ---------------------------------------------------------------------
   9. Account menu — logged-out (Login / Register) and logged-in
   (name + dropdown) states in the primary nav. See inc/nav-account.php.
--------------------------------------------------------------------- */
.ael-nav-account {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: 12px;
}
.ael-nav-auth-links {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--brand-font-body);
	font-size: 14px;
	white-space: nowrap;
}
/* Login / Register — was oversized with no radius/hover; now a proper
   button pair (Login = outline, Register = filled), matched heights. */
.ael-nav-auth-links a {
	color: var(--brand-ink);
	text-decoration: none;
	padding: 7px 14px;
	border-radius: var(--brand-radius);
	border: 1px solid transparent;
	font-size: 13.5px;
	line-height: 1.4;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ael-nav-auth-links a.ael-nav-login {
	border-color: var(--brand-line);
}
.ael-nav-auth-links a.ael-nav-login:hover {
	border-color: var(--brand-accent);
	color: var(--brand-accent);
}
.ael-nav-auth-links a.ael-nav-register {
	background: var(--brand-accent);
	color: var(--brand-accent-ink);
}
.ael-nav-auth-links a.ael-nav-register:hover { background: var(--brand-accent-dark); color: var(--brand-accent-ink); }

.ael-account-dropdown {
	position: relative;
	font-family: var(--brand-font-body);
}
/* Toggle — sized to hug its content (avatar + name), not a fixed
   oversized button. */
.ael-account-dropdown-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 1px solid var(--brand-line);
	border-radius: var(--brand-radius);
	padding: 5px 10px 5px 6px;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--brand-ink);
	cursor: pointer;
	font-family: var(--brand-font-body);
}
.ael-account-dropdown-toggle:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.ael-account-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.ael-account-name {
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ael-account-dropdown-toggle .ael-caret {
	font-size: 10px;
	transition: transform .15s ease;
}
.ael-account-dropdown.is-open .ael-caret { transform: rotate(180deg); }

/* Dropdown list — was oversized (9px padding read as too tall); now
   5px so each row height fits the text, not a fixed min-height. */
.ael-account-dropdown-menu {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	min-width: 190px;
	background: var(--brand-surface);
	border: 1px solid var(--brand-line);
	border-radius: var(--brand-radius);
	box-shadow: 0 6px 24px rgba(34, 32, 29, 0.12);
	z-index: 200;
	padding: 5px;
}
.ael-account-dropdown.is-open .ael-account-dropdown-menu { display: block; }
.ael-account-dropdown-menu a {
	display: block;
	padding: 5px 10px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--brand-ink);
	text-decoration: none;
	border-radius: var(--brand-radius);
}
.ael-account-dropdown-menu a:hover { background: var(--brand-paper); color: var(--brand-accent); }
.ael-account-dropdown-menu .ael-dropdown-divider {
	height: 1px;
	background: var(--brand-line);
	margin: 5px 2px;
}
.ael-account-dropdown-menu a.ael-logout-link { color: var(--brand-danger-fg); }

/* ---------------------------------------------------------------------
   10a. Shared standalone-page header (title + short intro line) — used
   above the content on Checkout, Cart, Orders, Address Book, Order
   View, and Account Details. Lives here (loaded on every page) rather
   than in account.css/cart.css, which are only conditionally enqueued,
   so the exact same title can be reused on Checkout too without
   duplicating the rule in three different files.
   WIDTH: bumped to 1400px (design change #3, "standalone pages wider" —
   was 1200px, and 1100px before that in two separate copies of this
   rule) to match the checkout grid's own max-width, and so none of
   these pages reads as narrower than the others - 20px side padding
   keeps a consistent gutter down to small screens.
--------------------------------------------------------------------- */
.afrielan-account-page-header {
	max-width: 1400px;
	margin: 40px auto 0;
	padding: 0 20px;
	box-sizing: border-box;
}
.afrielan-account-page-header h1 {
	font-size: 1.9rem;
	margin: 0 0 6px;
}
.afrielan-account-page-header p {
	color: var(--brand-ink-soft);
	font-size: 14.5px;
	margin: 0;
}

/* ---------------------------------------------------------------------
   10. Standalone full-page templates (login/register/orders/account
   details/address book/order view) - see each page-*.php's own header
   comment for why they're standalone Pages instead of WooCommerce
   endpoints.
   BUG FIX: these pages render as `get_header(); <main>...</main>
   get_footer();` with no Astra `#primary`/`#secondary` wrapper (that
   markup normally comes from Astra's own page.php, which these bypass).
   Astra's `.ast-container` that get_header()/get_footer() open/close
   around them is a flex row (built to hold #primary next to a possible
   sidebar). A lone child with no explicit width shrinks to fit its own
   content in a flex row and sits at the start (left) of that row - so
   the max-width+margin:auto centering already defined per-page for each
   of these (further down in this file, and inline for Address Book) had
   no room to do anything: the box was already exactly as wide as its
   content. Forcing the immediate child to width:100% first fills the
   flex row, and THEN the inner max-width/margin:auto can actually center
   within it. (This matches the same width:100% already used on
   #ael-home in homepage.css for the same reason.)
--------------------------------------------------------------------- */
.afrielan-login-page,
.afrielan-register-page,
.afrielan-orders-page,
.afrielan-account-details-page,
.afrielan-address-book-page,
.afrielan-order-view-page,
.afrielan-request-refund-page,
.afrielan-cart-page,
.afrielan-checkout-page {
	width: 100%;
}

@media (max-width: 768px) {
	.ael-nav-account { margin: 12px 0 0; }
	.ael-account-dropdown-menu { position: static; box-shadow: none; border: none; padding-left: 8px; }
}

/* ---------------------------------------------------------------------
   11. Reusable empty-state block (design item #4 / bug #1 — "no
   results / empty" containers, e.g. no orders yet, cart is empty,
   nothing matched a filter). Lives HERE (loaded on every page, see
   child_enqueue_styles() in inc/theme-setup.php) rather than in
   account.css/cart.css so the exact same markup + class names can be
   reused anywhere on the site — currently: Orders list (see
   orders-list.php) and the Cart (see cart-empty.php). Homepage is
   next.
--------------------------------------------------------------------- */
.afrielan-empty-state {
	text-align: center;
	background: var(--brand-paper);
	border: 1px solid var(--brand-line);
	border-radius: var(--brand-radius);
	padding: 3.5em 2em;
}
.afrielan-empty-state__icon { font-size: 34px; margin-bottom: 12px; opacity: .7; }
.afrielan-empty-state__title {
	font-family: var(--brand-font-display);
	color: var(--brand-ink);
	margin: 0 0 6px;
}
.afrielan-empty-state__text {
	color: var(--brand-ink-soft);
	font-family: var(--brand-font-body);
	margin: 0 0 20px;
}
.afrielan-empty-state__action {
	display: inline-block;
	background: var(--brand-accent);
	color: var(--brand-accent-ink);
	border-radius: var(--brand-radius);
	padding: 11px 24px;
	text-decoration: none;
	font-family: var(--brand-font-body);
	font-size: 14px;
}
.afrielan-empty-state__action:hover { background: var(--brand-accent-dark); }

/* ---------------------------------------------------------------------
   12. WooCommerce notifications (design item #6, "modify the
   WooCommerce notifications to look professional"). Loaded site-wide
   so it reaches every page that can print one of these - cart
   ("X added to your cart"), checkout/login/register/account-details
   validation errors, address book save confirmations, etc. - not just
   the pages that already had their own scoped card styling.
   Targets WooCommerce's REAL notice classes as WC core actually prints
   them: success = "woocommerce-message", errors = "woocommerce-error"
   (a <ul> of <li> messages), info = "woocommerce-info". Before this,
   these fell back to WooCommerce's own default green/red styling,
   which clashed with the rest of the redesigned site.
--------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	display: block;
	background: var(--brand-surface);
	border: 1px solid var(--brand-line);
	border-left: 4px solid var(--brand-accent);
	border-radius: var(--brand-radius);
	box-shadow: var(--ae-shadow);
	padding: 1em 1.3em;
	margin: 0 0 1.5em;
	font-family: var(--brand-font-body);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--brand-ink);
	list-style: none; /* .woocommerce-error is a <ul> - default browser bullets don't fit the card look */
}
/* BUG FIX ("icon overlapping the text — roduct 1 has been added..."):
   Astra's own WooCommerce CSS draws a checkmark via a ::before
   pseudo-element, absolutely positioned assuming Astra's wider
   default left padding is still there. Our narrower 1.3em padding
   above (to match this theme's other cards) left that icon with
   nowhere to sit but on top of the first word. Rather than guess
   Astra's exact icon offset and try to out-position it, we drop the
   icon entirely - same plain "left-accent-border + text" look the
   Checkout "Thank you" notice already uses (see checkout-layout.css),
   so this is consistent with an existing pattern, not a new one. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
	content: none !important;
}
/* Success ("Address updated successfully", "Product added to your
   cart") - greenish tint, using the same success tokens already
   defined for .badge-success. */
.woocommerce-message {
	background: var(--brand-success-bg);
	border-left-color: var(--brand-success-fg);
}
/* Errors ("Please enter your current password...", failed validation)
   - reuses the same danger tokens already defined for form error
   states elsewhere. Each <li> keeps normal block spacing when there's
   more than one error in the list. */
.woocommerce-error {
	background: var(--brand-danger-bg);
	border-left-color: var(--brand-danger-fg);
	color: var(--brand-danger-fg);
}
.woocommerce-error li { margin: 0; }
.woocommerce-error li + li { margin-top: .4em; }
/* Info (e.g. "You have not selected a delivery address") - neutral,
   same paper/line tokens used for cards elsewhere on the site rather
   than WooCommerce's default blue. */
.woocommerce-info {
	background: var(--brand-paper);
	border-left-color: var(--brand-ink-soft);
}
/* The "View cart" / "Return to shop" links WooCommerce prints inside
   .woocommerce-message already inherit the shared button look from
   section 5 above (.woocommerce a.button etc.) - just tighten the gap
   between the message text and the button so it doesn't run flush
   against it. */
.woocommerce-message a.button,
.woocommerce-message .wc-forward {
	margin-left: 1em;
}
@media (max-width: 480px) {
	.woocommerce-message { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; }
	.woocommerce-message a.button,
	.woocommerce-message .wc-forward { margin-left: 0; }
}