/*
Theme Name: GMX
Theme URI: https://daisyone.app/
Author: GMX / MeshXE
Description: Universal GMX block theme — app/tablet-first (NOT website-first). Fortress palette + multigenerational typography. Per-surface form-factor profile (daisyone = tablet default). Web-mode is opt-in expansion. Implements STD_universal_theme_app_tablet_first.md.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gmx
Tags: block-theme, full-site-editing, e-commerce
*/

/*
 * Block theme: nearly all styling lives in theme.json.
 * This file carries only what theme.json cannot express:
 *  - the web-mode container-width release (body.gmx-webmode)
 *  - a couple of app-frame ergonomics (app-bar stick, slim footer)
 * Tokens are referenced via the WP-generated --wp--preset--* custom properties
 * so there is a single source of truth (theme.json).
 */

/* ---- App container default (tablet) ---- *
 * theme.json contentSize=820px already constrains group/post-content.
 * Web-mode releases the constraint up to wideSize for opted-in features. */
body.gmx-webmode .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--style--global--wide-size);
}
body.gmx-webmode .wp-block-post-content,
body.gmx-webmode .entry-content {
	max-width: var(--wp--style--global--wide-size);
}

/* ---- App bar (sticky top, heraldic banner stripe cue) ---- */
.gmx-app-bar {
	position: sticky;
	top: 0;
	z-index: 50;
	border-top: 6px solid var(--wp--preset--color--fortress-deep);
}

/* =====================================================================
 * Status-strip band + identity/device control + dropdown.
 * Ported from the jny.app shell (navy chrome + honey accent #D4A84B).
 * Local chrome tokens so this is self-contained (no jny CSS dependency).
 * ===================================================================== */
.gmx-app-bar {
	--gmx-chrome-bg: var(--wp--preset--color--fortress-deep, #1e3a5f);
	--gmx-chrome-text: #f3f4f6;
	--gmx-chrome-dim: #aab6cc;
	--gmx-honey: #D4A84B;
	--gmx-chrome-border: rgba(255, 255, 255, .12);
}

/* The thin dark band */
.gmx-status-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 14px;
	background: var(--gmx-chrome-bg);
	color: var(--gmx-chrome-text);
	font-family: var(--wp--preset--font-family--ui, system-ui, sans-serif);
	font-size: 13px;
	letter-spacing: .02em;
	border-bottom: 2px solid var(--gmx-honey);
}

/* Brand / wordmark */
.gmx-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--gmx-chrome-text);
	text-decoration: none;
	font-weight: 700;
	min-width: 0;
}
.gmx-brand:hover { color: #fff; }
.gmx-brand-mark { color: var(--gmx-honey); font-size: 16px; line-height: 1; }
.gmx-brand-word {
	font-size: 15px;
	letter-spacing: .01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Identity / device control button */
.gmx-id-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid var(--gmx-chrome-border);
	border-radius: 999px;
	color: var(--gmx-chrome-text);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 5px 12px;
	cursor: pointer;
	max-width: 55%;
}
.gmx-id-btn:hover { background: rgba(255, 255, 255, .14); }
.gmx-id-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--gmx-honey);
	flex: 0 0 auto;
}
.gmx-id-dot[data-silenced="1"] { background: var(--gmx-chrome-dim); }
.gmx-id-name {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.gmx-id-caret { opacity: .6; font-size: 11px; }

/* Secondary nav row (curated wp_navigation) — keep light */
.gmx-nav-row {
	padding: 4px 14px;
	background: var(--wp--preset--color--base, #fff);
	border-bottom: 1px solid var(--wp--preset--color--stone-pale, #e5e7eb);
}
.gmx-nav-row .wp-block-navigation { font-size: 14px; }

/* The dropdown panel */
.gmx-identity-menu {
	position: fixed;
	top: 52px;
	right: 10px;
	left: auto;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--stone-pale, #e5e7eb);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(30, 58, 95, .22);
	z-index: 120;
	min-width: 260px;
	max-width: min(92vw, 360px);
	padding: 8px;
	color: var(--wp--preset--color--stone-dark, #374151);
	font-family: var(--wp--preset--font-family--ui, system-ui, sans-serif);
	font-size: 14px;
}
.gmx-im-header {
	padding: 10px 10px 12px;
	border-bottom: 1px solid var(--wp--preset--color--stone-pale, #e5e7eb);
	margin-bottom: 6px;
}
.gmx-im-name { font-weight: 700; font-size: 15px; color: var(--wp--preset--color--fortress-deep, #1e3a5f); }
.gmx-im-device { font-size: 12px; opacity: .7; margin-top: 2px; }
.gmx-im-device b { color: var(--wp--preset--color--fortress-mid, #2a4a7c); }
.gmx-im-section-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .1em;
	opacity: .5;
	padding: 8px 10px 4px;
}
.gmx-im-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: inherit;
	cursor: pointer;
	font: inherit;
	text-align: left;
}
.gmx-im-item:hover { background: var(--wp--preset--color--mortar, #f3f4f6); }
.gmx-im-item span:first-child { font-size: 16px; line-height: 1; }
.gmx-im-signout { color: #c0392b; }
.gmx-im-signout:hover { background: rgba(192, 57, 43, .08); }
.gmx-im-muted { opacity: .6; font-size: 11px; }
.gmx-im-pad { padding: 4px 12px 8px; }
.gmx-im-pad-top { margin-top: 16px; }
.gmx-im-device-list { padding: 4px 0; }
.gmx-im-device-row { padding: 6px 12px; border-radius: 6px; font-size: 13px; }
.gmx-im-device-row.is-this { background: rgba(59, 109, 179, .12); }

/* Device settings overlay */
.gmx-device-settings {
	position: fixed; inset: 0;
	background: rgba(30, 58, 95, .5);
	display: flex; align-items: center; justify-content: center;
	z-index: 200; padding: 20px;
}
.gmx-ds-card {
	width: 100%; max-width: 420px;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--stone-pale, #e5e7eb);
	border-radius: 14px; padding: 20px;
	color: var(--wp--preset--color--stone-dark, #374151);
	font-family: var(--wp--preset--font-family--ui, system-ui, sans-serif);
}
.gmx-ds-card h2 { margin: 0 0 6px; font-size: 18px; color: var(--wp--preset--color--fortress-deep, #1e3a5f); }
.gmx-ds-section { margin: 20px 0 6px; font-size: 13px; opacity: .7; text-transform: uppercase; letter-spacing: .08em; }
.gmx-ds-label { display: block; margin: 12px 0 6px; font-size: 12px; opacity: .7; }
.gmx-ds-card input[type="text"] {
	width: 100%; padding: 10px 12px;
	background: var(--wp--preset--color--mortar, #f3f4f6);
	border: 1px solid var(--wp--preset--color--stone-pale, #e5e7eb);
	border-radius: 8px; color: inherit; font-size: 14px; font-family: inherit; outline: none;
	box-sizing: border-box;
}
.gmx-ds-card input[type="text"]:focus { border-color: var(--gmx-honey, #D4A84B); }
.gmx-ds-row { display: flex; gap: 8px; margin-top: 10px; }
.gmx-ds-row-wrap { flex-wrap: wrap; }
.gmx-ds-row-right { justify-content: flex-end; margin-top: 16px; }
.gmx-ds-btn {
	padding: 8px 14px;
	background: var(--wp--preset--color--fortress-deep, #1e3a5f);
	color: #fff; border: 0; border-radius: 8px; cursor: pointer;
	font-size: 13px; font-family: inherit;
}
.gmx-ds-btn:hover { background: var(--wp--preset--color--fortress-mid, #2a4a7c); }
.gmx-ds-btn-ghost {
	background: transparent;
	color: var(--wp--preset--color--stone-dark, #374151);
	border: 1px solid var(--wp--preset--color--stone-pale, #e5e7eb);
}
.gmx-ds-btn-ghost:hover { background: var(--wp--preset--color--mortar, #f3f4f6); }

/* Footer link colour on the dark band */
.gmx-footer .gmx-foot-links a { color: var(--gmx-honey, #D4A84B); text-decoration: none; }
.gmx-footer .gmx-foot-links a:hover { text-decoration: underline; }

/* Web-mode: let the band content breathe to wideSize */
body.gmx-webmode .gmx-status-strip,
body.gmx-webmode .gmx-nav-row { padding-left: max(14px, calc((100vw - var(--wp--style--global--wide-size, 1200px)) / 2)); padding-right: max(14px, calc((100vw - var(--wp--style--global--wide-size, 1200px)) / 2)); }

/* ---- Cards: subtle carved/embossed feel via shape, not type ---- */
.gmx-card {
	border: 1px solid var(--wp--preset--color--stone-pale);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	transition: box-shadow .15s ease, transform .15s ease;
}
.gmx-card:hover {
	box-shadow: 0 4px 14px rgba(30, 58, 95, .10);
}

/* ---- Slim footer (NO widget sprawl) ---- */
.gmx-footer {
	border-top: 1px solid var(--wp--preset--color--stone-light);
}

/* ---- WooCommerce / GeoDirectory token alignment (light-touch) ---- *
 * Style their own templates via our tokens; do not rebuild them. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button {
	background-color: var(--wp--preset--color--fortress-deep);
	color: var(--wp--preset--color--base);
	border-radius: 8px;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background-color: var(--wp--preset--color--fortress-mid);
}
.woocommerce ul.products li.product,
.geodir-post-img,
.geodir_category_list_view li {
	border-radius: 10px;
}

/* ---- FIX menurow 2026-06-06: keep nav on ONE row across, scroll on narrow ---- */
.gmx-nav-row .wp-block-navigation,
.gmx-nav-row .wp-block-navigation__container {
	flex-wrap: nowrap !important;
}
.gmx-nav-row .wp-block-navigation__container > li {
	flex-shrink: 0;
}
.gmx-nav-row {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}
.gmx-nav-row::-webkit-scrollbar { height: 0; }