/*
 * OGA Mini App v109001 · ogace-header-v109001.css  (v109001.2)
 * Custom 3-layer sticky header — PC / iPad / Mobile responsive
 * Depends on: style.css design tokens (:root vars)
 * Enqueued by: inc/ogace-header-v109001.php
 *
 * Breakpoints:
 *   ≥ 1024px  — PC / Desktop
 *   768–1023px — iPad / Tablet
 *   < 768px   — Mobile
 *   < 480px   — Small mobile (search collapses to toggle)
 */

/* ══════════════════════════════════════════════════════════════
   WRAPPER
   ══════════════════════════════════════════════════════════════ */
.oga-header-wrap {
	position: sticky;
	top: 0;
	z-index: 200;
	width: 100%;
	background: var(--o-bg0);
	border-bottom: 1px solid var(--o-line2);
	isolation: isolate;
}

/* ══════════════════════════════════════════════════════════════
   LAYER 1 · TOP BAR
   ══════════════════════════════════════════════════════════════ */
.oga-topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 24px;
	border-bottom: 1px solid var(--o-line1);
	max-width: 1440px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

/* ── Hamburger (mobile only, hidden on PC/iPad) ── */
.oga-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 36px;
	height: 36px;
	background: var(--o-bg2);
	border: 1px solid var(--o-line2);
	border-radius: 6px;
	cursor: pointer;
	padding: 8px;
	flex-shrink: 0;
}
.oga-hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--o-fg1);
	border-radius: 2px;
	transition: opacity 0.2s;
}

/* ── Logo ── */
.oga-logo-block {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	text-decoration: none;
}

.oga-logo-mark {
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--o-gold) 0%, var(--o-rose) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--o-mono);
	font-weight: 700;
	font-size: 13px;
	color: #000;
	letter-spacing: -0.04em;
	flex-shrink: 0;
}

.oga-logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.oga-logo-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--o-fg0);
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.oga-logo-sub {
	font-family: var(--o-mono);
	font-size: 9px;
	color: var(--o-fg3);
	letter-spacing: 0.04em;
	margin-top: 2px;
}

/* ── Search bar ── */
.oga-search-bar {
	flex: 1;
	min-width: 0;
	max-width: 560px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--o-bg2);
	border: 1px solid var(--o-line2);
	border-radius: 7px;
	padding: 7px 13px;
	transition: border-color 0.15s;
}
.oga-search-bar:focus-within {
	border-color: rgba(201,162,39,0.45);
	box-shadow: 0 0 0 3px rgba(201,162,39,0.08);
}
.oga-search-icon {
	font-size: 14px;
	color: var(--o-fg3);
	flex-shrink: 0;
}
.oga-search-bar input[type="search"] {
	background: transparent;
	border: none;
	outline: none;
	color: var(--o-fg0);
	font-size: 13px;
	font-family: var(--o-sans);
	flex: 1;
	min-width: 0;
	-webkit-appearance: none;
}
.oga-search-bar input[type="search"]::placeholder { color: var(--o-fg3); }

/* ── Top-bar actions ── */
.oga-topbar-actions {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
	margin-left: auto;
}

/* Mobile search toggle — hidden on PC/iPad */
.oga-search-toggle { display: none; }

.oga-icon-btn {
	width: 36px;
	height: 36px;
	border-radius: 7px;
	background: var(--o-bg2);
	border: 1px solid var(--o-line2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 16px;
	position: relative;
	text-decoration: none;
	color: inherit;
	transition: background 0.15s, border-color 0.15s;
}
.oga-icon-btn:hover {
	background: var(--o-bg3, #252535);
	border-color: rgba(255,255,255,0.2);
}

/* Cart badge */
.oga-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	background: var(--o-gold);
	color: #000;
	font-family: var(--o-mono);
	font-size: 8px;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--o-bg0);
}

/* Connect CTA */
.oga-connect-btn {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border-radius: 7px;
	background: var(--o-gold);
	color: #000;
	font-size: 12px;
	font-weight: 700;
	border: none;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	letter-spacing: 0.02em;
	transition: opacity 0.15s;
}
.oga-connect-btn:hover { opacity: 0.86; color: #000; }

/* ══════════════════════════════════════════════════════════════
   LAYER 2 · PILLAR CHIPS
   ══════════════════════════════════════════════════════════════ */
.oga-pillars-strip {
	display: flex;
	gap: 5px;
	overflow-x: auto;
	padding: 8px 24px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	border-bottom: 1px solid var(--o-line1);
	max-width: 1440px;
	margin: 0 auto;
	box-sizing: border-box;
}
.oga-pillars-strip::-webkit-scrollbar { display: none; }

.oga-pillar-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 13px;
	border-radius: 6px;
	background: var(--o-bg1);
	border: 1px solid var(--o-line2);
	font-size: 12px;
	color: var(--o-fg1);
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.oga-pillar-chip:hover {
	background: var(--o-bg2);
	border-color: rgba(255,255,255,0.2);
	color: var(--o-fg0);
}
.oga-pillar-chip.active {
	border-color: var(--o-gold);
	color: var(--o-gold);
	background: rgba(201,162,39,0.1);
}

.oga-pillar-d {
	font-family: var(--o-mono);
	font-size: 9px;
	color: var(--o-fg3);
}
.oga-pillar-d.new {
	color: var(--o-rose);
	font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════
   LAYER 3 · NETWORKS STRIP
   ══════════════════════════════════════════════════════════════ */
.oga-networks-strip {
	display: flex;
	gap: 5px;
	overflow-x: auto;
	padding: 7px 24px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	max-width: 1440px;
	margin: 0 auto;
	box-sizing: border-box;
}
.oga-networks-strip::-webkit-scrollbar { display: none; }

.oga-network-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 5px;
	font-size: 11px;
	white-space: nowrap;
	cursor: pointer;
	font-family: var(--o-mono);
	letter-spacing: 0.03em;
	border: 1px solid transparent;
	text-decoration: none;
	transition: opacity 0.15s, transform 0.1s;
}
.oga-network-tag:hover { opacity: 0.8; transform: translateY(-1px); }

/* G-layer colours */
.oga-network-tag--g0 { background:rgba(94,195,192,0.12);  color:var(--g0,#5EC3C0); border-color:rgba(94,195,192,0.28); }
.oga-network-tag--g1 { background:rgba(201,162,39,0.12);  color:var(--g1,#C9A227); border-color:rgba(201,162,39,0.28); }
.oga-network-tag--g2 { background:rgba(168,85,247,0.12);  color:var(--g2,#A855F7); border-color:rgba(168,85,247,0.28); }
.oga-network-tag--g3 { background:rgba(127,84,179,0.12);  color:var(--g3,#7F54B3); border-color:rgba(127,84,179,0.28); }
.oga-network-tag--g4 { background:rgba(118,185,0,0.12);   color:var(--g4,#76B900); border-color:rgba(118,185,0,0.28); }
.oga-network-tag--g5 { background:rgba(66,133,244,0.12);  color:var(--g5,#4285F4); border-color:rgba(66,133,244,0.28); }
.oga-network-tag--g6 { background:rgba(212,83,126,0.12);  color:var(--g6,#D4537E); border-color:rgba(212,83,126,0.28); }
.oga-network-tag--g7 { background:rgba(255,138,101,0.12); color:var(--g7,#FF8A65); border-color:rgba(255,138,101,0.28); }

/* ══════════════════════════════════════════════════════════════
   MOBILE DRAWER
   ══════════════════════════════════════════════════════════════ */
.oga-mobile-drawer {
	position: fixed;
	top: 0;
	left: 0;
	width: 300px;
	max-width: 85vw;
	height: 100vh;
	background: var(--o-bg1);
	border-right: 1px solid var(--o-line2);
	z-index: 500;
	transform: translateX(-100%);
	transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--o-line2) transparent;
}
.oga-mobile-drawer.is-open { transform: translateX(0); }

.oga-drawer-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.55);
	z-index: 490;
	opacity: 0;
	transition: opacity 0.28s;
}
.oga-drawer-overlay.is-open { display: block; opacity: 1; }

.oga-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid var(--o-line2);
}
.oga-drawer-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--o-gold);
}
.oga-drawer-close {
	background: none;
	border: none;
	color: var(--o-fg2);
	font-size: 18px;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 4px;
	transition: color 0.15s;
}
.oga-drawer-close:hover { color: var(--o-fg0); }

.oga-drawer-nav { padding: 10px 0 40px; }
.oga-drawer-section-label {
	font-family: var(--o-mono);
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--o-fg3);
	padding: 14px 18px 6px;
}
.oga-drawer-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 18px;
	font-size: 13px;
	color: var(--o-fg1);
	text-decoration: none;
	transition: background 0.12s;
}
.oga-drawer-item:hover {
	background: var(--o-bg2);
	color: var(--o-fg0);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE · iPad  768px – 1023px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
	.oga-topbar,
	.oga-pillars-strip,
	.oga-networks-strip {
		padding-left: 18px;
		padding-right: 18px;
	}

	.oga-logo-name { font-size: 13px; }
	.oga-search-bar { max-width: 380px; }
	.oga-connect-btn { padding: 6px 13px; font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE · Mobile  < 768px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
	/* Show hamburger, hide full search */
	.oga-hamburger { display: flex; }
	.oga-search-bar { display: none; }
	.oga-search-toggle { display: inline-flex; }

	/* Expanded search state (toggled by JS) */
	.oga-search-bar.is-expanded {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin: 0;
		max-width: 100%;
		border-radius: 0;
		border-top: none;
		border-left: none;
		border-right: none;
		padding: 10px 16px;
		background: var(--o-bg1);
		z-index: 50;
	}

	.oga-topbar {
		padding: 8px 14px;
		gap: 8px;
		position: relative;
	}

	/* Collapse logo sub on small screens */
	.oga-logo-sub { display: none; }
	.oga-logo-name { font-size: 13px; }
	.oga-logo-mark { width: 32px; height: 32px; font-size: 12px; }

	/* Show pillars strip — scrollable */
	.oga-pillars-strip { padding: 6px 12px; gap: 4px; }
	.oga-pillar-chip { padding: 5px 10px; font-size: 11px; gap: 4px; }

	/* Networks strip — scrollable */
	.oga-networks-strip { padding: 5px 12px; gap: 4px; }
	.oga-network-tag { padding: 3px 8px; font-size: 10px; }

	/* Hide "Connect" text, keep icon treatment */
	.oga-connect-btn { padding: 6px 10px; font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE · Small mobile  < 480px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 479px) {
	.oga-logo-name  { font-size: 12px; }
	.oga-topbar     { gap: 7px; padding: 8px 12px; }
	.oga-connect-btn { display: none; }   /* save space — user can use drawer */

	/* Pillar chip: icon only on very small screens */
	.oga-pillar-label { display: none; }
	.oga-pillar-chip  { padding: 6px 8px; gap: 0; }
}

/* ══════════════════════════════════════════════════════════════
   FEED SECTION LABEL OVERRIDE
   ── Targets the ogace section label rendered in front-page
   ══════════════════════════════════════════════════════════════ */
.oga-section-label:first-child {
	/* label is output by PHP; text change handled via filter */
}

/* ══════════════════════════════════════════════════════════════
   WP ADMIN BAR OFFSET
   ══════════════════════════════════════════════════════════════ */
.admin-bar .oga-header-wrap { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .oga-header-wrap { top: 46px; }
}