/* ── IGcr Theme — App Shell Layout ──────────────────────────────────────────
 *
 * Instagram.com-inspired layout: fixed sidebar (desktop) + mobile chrome.
 * All custom properties use --igcr-theme-* namespace to avoid plugin conflicts.
 * ────────────────────────────────────────────────────────────────────────── */

:root {
	/* Layout */
	--igcr-theme-sidebar-w: 245px;
	--igcr-theme-sidebar-collapsed-w: 73px;
	--igcr-theme-mobile-header-h: 60px;
	--igcr-theme-mobile-footer-h: 50px;

	/* Core palette */
	--igcr-theme-accent: #3D6792;
	--igcr-theme-accent-hover: #345878;
	--igcr-theme-accent-dark: #1e3a5f;
	--igcr-theme-accent-light: #4a7aa8;
	--igcr-theme-bg: #fafafa;
	--igcr-theme-bg-card: #ffffff;
	--igcr-theme-text: #262626;
	--igcr-theme-text-secondary: #737373;
	--igcr-theme-text-muted: #c7c7c7;
	--igcr-theme-border: #dbdbdb;
	--igcr-theme-border-light: #efefef;
	--igcr-theme-link: #00376b;

	/* Semantic status */
	--igcr-theme-success: #22c55e;
	--igcr-theme-success-bg: #ecfdf5;
	--igcr-theme-success-text: #065f46;
	--igcr-theme-danger: #ef4444;
	--igcr-theme-danger-bg: #fef2f2;
	--igcr-theme-danger-text: #991b1b;
	--igcr-theme-danger-subtle: #ed4956;
	--igcr-theme-danger-subtle-bg: rgba( 237, 73, 86, 0.08 );
	--igcr-theme-info: #3b82f6;
	--igcr-theme-info-bg: #eff6ff;
	--igcr-theme-info-text: #1e40af;
	--igcr-theme-warning: #f59e0b;

	/* Primary button — defaults, overridden by inline accent CSS */
	--igcr-theme-btn-primary: var( --igcr-theme-accent );
	--igcr-theme-btn-primary-hover: var( --igcr-theme-accent-hover );

	/* Contrast text on accent backgrounds — overridden by inline accent CSS */
	--igcr-theme-on-accent: #ffffff;

	/* Overlay */
	--igcr-theme-overlay: rgba( 0, 0, 0, 0.5 );

	/* Landing page */
	--igcr-theme-landing-heading: #0f172a;
	--igcr-theme-landing-sub: #475569;
	--igcr-theme-landing-muted: #64748b;
	--igcr-theme-landing-bg: #ffffff;
	--igcr-theme-landing-bg-alt: #f8fafc;
	--igcr-theme-landing-hero-mid: #eef4fb;
	--igcr-theme-landing-hero-end: #f0f4f8;
	--igcr-theme-landing-border: #e5e7eb;
	--igcr-theme-landing-footer-bg: #0f172a;
	--igcr-theme-landing-nav-bg: rgba( 255, 255, 255, 0.92 );
	--igcr-theme-landing-nav-border: rgba( 0, 0, 0, 0.06 );

	/* Shared */
	--igcr-theme-radius: 8px;
	--igcr-theme-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 );
	--igcr-theme-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ── Base ── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var( --igcr-theme-bg );
	color: var( --igcr-theme-text );
	font-family: var( --igcr-theme-font );
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Theme icon base */
.igcr-t-icon {
	display: inline-block;
	vertical-align: middle;
	fill: none;
	stroke: currentColor;
	flex-shrink: 0;
}

/* ── Desktop layout: sidebar + main ── */

/*
 * Instagram.com-style sidebar:
 * - Default: collapsed icon-only column (73px), always visible.
 * - Hover: expands to full width (245px) with labels — overlays content.
 * - Pinned: permanently expanded (245px), pushes content right.
 * Pin state is persisted in localStorage by navigation.js.
 */

.igcr-sidebar-wrap {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var( --igcr-theme-sidebar-collapsed-w );
	background: var( --igcr-theme-bg-card );
	border-right: 1px solid var( --igcr-theme-border );
	z-index: 100;
	padding: 0;
	transition: width 0.25s ease;
}

/* Reset WP block group defaults inside sidebar + mobile chrome */
.igcr-sidebar-wrap > * {
	max-width: none;
}

.igcr-sidebar-wrap.wp-block-group,
.igcr-mobile-header-wrap.wp-block-group,
.igcr-mobile-footer-wrap.wp-block-group {
	padding: 0;
	margin: 0;
}

.igcr-mobile-header-wrap.wp-block-group > *,
.igcr-mobile-footer-wrap.wp-block-group > * {
	max-width: none;
	margin: 0;
}

/* Sidebar inner panel fills the wrap. */
.igcr-sidebar {
	width: 100%;
	height: 100%;
	background: var( --igcr-theme-bg-card );
	overflow: hidden;
}

/* Default (collapsed): hide labels, show icon logo. */
.igcr-nav-label {
	opacity: 0;
	transition: opacity 0.15s ease;
	white-space: nowrap;
}

.igcr-sidebar-logo .igcr-logo-full {
	display: none;
}

.igcr-sidebar-logo .igcr-logo-icon {
	display: flex;
}

/* ── Hover expand: sidebar overlays content ── */

.igcr-sidebar-wrap:hover {
	width: var( --igcr-theme-sidebar-w );
	box-shadow: 4px 0 16px rgba( 0, 0, 0, 0.08 );
}

.igcr-sidebar-wrap:hover .igcr-nav-label {
	opacity: 1;
}

.igcr-sidebar-wrap:hover .igcr-sidebar-logo .igcr-logo-full {
	display: flex;
}

.igcr-sidebar-wrap:hover .igcr-sidebar-logo .igcr-logo-icon {
	display: none;
}

/* Main: offset by collapsed sidebar width (never shifts on hover). */
.igcr-main {
	margin-left: var( --igcr-theme-sidebar-collapsed-w );
	min-height: 100vh;
	padding: 30px 20px 60px;
	transition: margin-left 0.25s ease;
}

/* Suggested content max-width — blocks can override */
.igcr-main > .wp-block-post-content {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Disable FSE constrained-layout max-width inside main */
.igcr-main .is-layout-constrained > :where( :not(.alignleft):not(.alignright):not(.alignfull) ) {
	max-width: none;
}

/* Synced IG posts: hide theme's own title/comments (plugin renders them) */
body.igcr-synced-post .igcr-single-theme-header {
	display: none !important;
}

body.igcr-synced-post .igcr-single-theme-comments {
	display: none !important;
}

/* ── Pinned sidebar: permanently expanded, pushes content ── */

.igcr-sidebar-pinned .igcr-sidebar-wrap {
	width: var( --igcr-theme-sidebar-w );
	box-shadow: none;
}

.igcr-sidebar-pinned .igcr-nav-label {
	opacity: 1;
}

.igcr-sidebar-pinned .igcr-sidebar-logo .igcr-logo-full {
	display: flex;
}

.igcr-sidebar-pinned .igcr-sidebar-logo .igcr-logo-icon {
	display: none;
}

.igcr-sidebar-pinned .igcr-main {
	margin-left: var( --igcr-theme-sidebar-w );
}

/* Pin button active indicator */
.igcr-sidebar-pinned .igcr-sidebar-pin {
	color: var( --igcr-theme-accent );
	opacity: 1;
}

/* ── Medium screens: always collapsed, hover still expands as overlay ── */

@media ( max-width: 1264px ) {

	/* Pinned behaves like collapsed on medium screens */
	.igcr-sidebar-pinned .igcr-sidebar-wrap {
		width: var( --igcr-theme-sidebar-collapsed-w );
	}

	.igcr-sidebar-pinned .igcr-nav-label {
		opacity: 0;
	}

	.igcr-sidebar-pinned .igcr-sidebar-logo .igcr-logo-full {
		display: none;
	}

	.igcr-sidebar-pinned .igcr-sidebar-logo .igcr-logo-icon {
		display: flex;
	}

	.igcr-sidebar-pinned .igcr-main {
		margin-left: var( --igcr-theme-sidebar-collapsed-w );
	}
}

/* ── Mobile: no sidebar, top + bottom bars ── */

@media ( max-width: 767px ) {
	.igcr-sidebar-wrap {
		display: none !important;
	}

	.igcr-main {
		margin-left: 0 !important;
		padding-top: calc( var( --igcr-theme-mobile-header-h ) + 10px );
		padding-bottom: calc( var( --igcr-theme-mobile-footer-h ) + 16px );
	}
}

/* ── Hide mobile chrome on desktop ── */

@media ( min-width: 768px ) {
	.igcr-mobile-header-wrap {
		display: none !important;
	}

	.igcr-mobile-footer-wrap {
		display: none !important;
	}
}

/* ── Content Typography ────────────────────────────────────────────────────
 *
 * Minimal, modern defaults for general WordPress content (paragraphs,
 * headings, lists, blockquotes, tables, code, figures).  Scoped to
 * .igcr-main so plugin blocks and theme chrome are not affected.
 * ────────────────────────────────────────────────────────────────────────── */

/* Paragraphs */
.igcr-main p {
	margin: 0 0 1.25em;
	line-height: 1.7;
	color: var( --igcr-theme-text );
}

.igcr-main p:last-child {
	margin-bottom: 0;
}

/* Headings inside content */
.igcr-main h1 { font-size: 28px; margin: 2em 0 0.75em; }
.igcr-main h2 { font-size: 22px; margin: 1.75em 0 0.6em; }
.igcr-main h3 { font-size: 18px; margin: 1.5em 0 0.5em; }
.igcr-main h4 { font-size: 16px; margin: 1.25em 0 0.5em; }
.igcr-main h5 { font-size: 14px; margin: 1em 0 0.5em; text-transform: uppercase; letter-spacing: 0.04em; }
.igcr-main h6 { font-size: 13px; margin: 1em 0 0.5em; text-transform: uppercase; letter-spacing: 0.04em; color: var( --igcr-theme-text-secondary ); }

.igcr-main h1,
.igcr-main h2,
.igcr-main h3,
.igcr-main h4,
.igcr-main h5,
.igcr-main h6 {
	font-weight: 600;
	line-height: 1.3;
	color: var( --igcr-theme-text );
}

.igcr-main h1:first-child,
.igcr-main h2:first-child,
.igcr-main h3:first-child {
	margin-top: 0;
}

/* Lists — scoped to block content to avoid WooCommerce / nav UI lists */
.igcr-main ul:not([class]),
.igcr-main ol:not([class]),
.igcr-main .wp-block-list {
	margin: 0 0 1.25em;
	padding-left: 1.75em;
	line-height: 1.7;
	color: var( --igcr-theme-text );
	list-style-position: outside;
}

.igcr-main ul:not([class]),
.igcr-main ul.wp-block-list {
	list-style-type: disc;
}

.igcr-main ol:not([class]),
.igcr-main ol.wp-block-list {
	list-style-type: decimal;
}

/* Nested lists inherit proper types */
.igcr-main ul:not([class]) ul,
.igcr-main .wp-block-list ul {
	list-style-type: circle;
}

.igcr-main ul:not([class]) ul ul,
.igcr-main .wp-block-list ul ul {
	list-style-type: square;
}

.igcr-main li {
	margin-bottom: 0.35em;
}

.igcr-main li:last-child {
	margin-bottom: 0;
}

.igcr-main ul:not([class]) ul,
.igcr-main ul:not([class]) ol,
.igcr-main ol:not([class]) ol,
.igcr-main ol:not([class]) ul,
.igcr-main .wp-block-list ul,
.igcr-main .wp-block-list ol {
	margin-top: 0.35em;
	margin-bottom: 0;
	padding-left: 1.5em;
}

/* Blockquote */
.igcr-main blockquote {
	margin: 1.5em 0;
	padding: 0 0 0 1.25em;
	border-left: 3px solid var( --igcr-theme-border );
	color: var( --igcr-theme-text-secondary );
	font-style: italic;
}

.igcr-main blockquote p:last-child {
	margin-bottom: 0;
}

.igcr-main blockquote cite {
	display: block;
	margin-top: 0.75em;
	font-size: 13px;
	font-style: normal;
	color: var( --igcr-theme-text-muted );
}

/* Horizontal rule */
.igcr-main hr {
	border: none;
	border-top: 1px solid var( --igcr-theme-border );
	margin: 2em 0;
}

/* Tables */
.igcr-main table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
	font-size: 14px;
	line-height: 1.5;
}

.igcr-main th,
.igcr-main td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var( --igcr-theme-border-light );
}

.igcr-main th {
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --igcr-theme-text-secondary );
}

.igcr-main tbody tr:last-child td {
	border-bottom: none;
}

/* Code */
.igcr-main code {
	padding: 2px 6px;
	background: var( --igcr-theme-border-light );
	border-radius: 4px;
	font-size: 0.875em;
	font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
	color: var( --igcr-theme-text );
}

.igcr-main pre {
	margin: 1.5em 0;
	padding: 16px 20px;
	background: var( --igcr-theme-border-light );
	border-radius: var( --igcr-theme-radius );
	overflow-x: auto;
	line-height: 1.6;
}

.igcr-main pre code {
	padding: 0;
	background: none;
	border-radius: 0;
	font-size: 13px;
}

/* Images & figures */
.igcr-main figure {
	margin: 1.5em 0;
}

.igcr-main figure img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var( --igcr-theme-radius );
}

.igcr-main figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var( --igcr-theme-text-secondary );
	text-align: center;
}

/* Strong & emphasis */
.igcr-main strong,
.igcr-main b {
	font-weight: 600;
}

/* Mark / highlight */
.igcr-main mark {
	background: rgba( 61, 103, 146, 0.12 );
	padding: 1px 4px;
	border-radius: 2px;
}

/* Details / Summary (accordion) */
.igcr-main details {
	margin: 1em 0;
	padding: 12px 16px;
	border: 1px solid var( --igcr-theme-border-light );
	border-radius: var( --igcr-theme-radius );
}

.igcr-main summary {
	font-weight: 600;
	cursor: pointer;
	color: var( --igcr-theme-text );
}

.igcr-main details[open] summary {
	margin-bottom: 8px;
}

/* Abbreviation */
.igcr-main abbr[title] {
	text-decoration: underline dotted;
	text-underline-offset: 2px;
}

/* Small text */
.igcr-main small {
	font-size: 13px;
	color: var( --igcr-theme-text-secondary );
}

/* ── Feed grid cards ── */

.igcr-feed-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
}

.igcr-feed-card .wp-block-post-featured-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	display: block;
}

/* ── 404 ── */

.igcr-404 {
	text-align: center;
}

/* ── Super admin bar offset ── */

body.admin-bar .igcr-sidebar-wrap {
	top: 32px;
}

body.admin-bar .igcr-main {
	min-height: calc( 100vh - 32px );
}

@media ( max-width: 782px ) {
	body.admin-bar .igcr-sidebar-wrap {
		top: 46px;
	}
}