/**
 * IARF Docs Public-Facing Stylesheet
 *
 * This file contains all of the styles for the public-facing
 * documentation viewer rendered by the [iarf_docs] shortcode.
 */

:root {
	--iarf-primary-accent: #384D68;
	--iarf-text-primary: #333;
	--iarf-text-secondary: #666;
	--iarf-border-color: #e0e0e0;
	--iarf-code-bg: #f8f9fa;
	--iarf-code-border: #ddd;
}

.iarf-docs-container {
	display: flex;
	font-weight: 300;
	line-height: 1.6;
	color: var(--iarf-text-primary);
	font-family: sans-serif; /* A sensible default, inherits from theme ideally */
	margin: 2em 0;
	padding: 0 2em;
	box-sizing: border-box;
}

.iarf-docs-container .iarf-docs-sidebar {
	width: 280px;
	flex-shrink: 0;
	padding-right: 20px;
	border-right: 1px solid var(--iarf-border-color);
	height: 100%;
}

.iarf-docs-container .iarf-docs-search-container {
	margin-bottom: 15px;
}

.iarf-docs-container .iarf-docs-search {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--iarf-border-color);
	box-sizing: border-box;
}

.iarf-docs-container .iarf-docs-nav ul {
	list-style: none;
	padding-left: 15px;
	margin: 0;
}

.iarf-docs-container .iarf-docs-nav ul ul {
	padding-left: 20px;
}

.iarf-docs-container .iarf-docs-nav li {
	margin: 5px 0;
}

.iarf-docs-container .iarf-docs-nav a {
	color: var(--iarf-primary-accent);
	text-decoration: none;
	display: block;
	padding: 4px 8px;
	transition: background-color 0.2s ease-in-out;
}

.iarf-docs-container .iarf-docs-nav li.has-children > a {
	padding-right: 35px;
}

.iarf-docs-container .iarf-docs-nav a:hover {
	text-decoration: underline;
	background-color: #f0f2f5;
}

.iarf-docs-container .iarf-docs-nav a.active {
	background-color: var(--iarf-primary-accent);
	color: #fff;
	font-weight: 500;
}

.iarf-docs-container .iarf-docs-nav li.has-children {
	position: relative;
}

.iarf-docs-container .iarf-docs-nav .has-children > ul {
	display: none;
}

.iarf-docs-container .iarf-docs-nav .has-children.open > ul {
	display: block;
}

.iarf-docs-container .iarf-docs-nav-toggle {
	background: transparent;
	border: 0;
	cursor: pointer;
	position: absolute;
	right: 5px;
	top: 8px;
	padding: 5px;
	line-height: 1;
	color: var(--iarf-primary-accent);
}

.iarf-docs-container .iarf-docs-nav a.active + .iarf-docs-nav-toggle {
	color: #fff;
}

.iarf-docs-container .iarf-docs-nav-toggle:hover {
	background-color: rgba(0,0,0,0.05);
}

.iarf-docs-container .iarf-docs-nav-toggle .dashicons {
	transition: transform 0.2s ease-in-out;
	font-size: 16px;
	display: block;
}

.iarf-docs-container .iarf-docs-nav li.has-children.open > .iarf-docs-nav-toggle .dashicons {
	transform: rotate(-180deg);
}

.iarf-docs-container .iarf-docs-nav li.hidden {
	display: none;
}

.iarf-docs-container .iarf-docs-content {
	flex-grow: 1;
	padding-left: 30px;
	position: relative;
	min-height: 300px;
}

.iarf-docs-container .iarf-docs-document h1,
.iarf-docs-container .iarf-docs-document h2,
.iarf-docs-container .iarf-docs-document h3,
.iarf-docs-container .iarf-docs-document h4,
.iarf-docs-container .iarf-docs-document h5,
.iarf-docs-container .iarf-docs-document h6 {
	color: var(--iarf-primary-accent);
	font-weight: 400;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

.iarf-docs-container .iarf-docs-document h1 { font-size: 2.2em; margin-top: 0.5em; }
.iarf-docs-container .iarf-docs-document h2 { font-size: 1.8em; border-bottom: 1px solid var(--iarf-border-color); padding-bottom: 0.3em; }
.iarf-docs-container .iarf-docs-document h3 { font-size: 1.5em; }

.iarf-docs-container .iarf-docs-document a {
	color: var(--iarf-primary-accent);
	text-decoration: underline;
	text-decoration-color: rgba(56, 77, 104, 0.4);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
	transition: text-decoration-color 0.2s ease-in-out;
}
.iarf-docs-container .iarf-docs-document a:hover {
	text-decoration-color: var(--iarf-primary-accent);
}

.iarf-docs-container .iarf-docs-document p {
	margin-bottom: 1em;
}

.iarf-docs-container .iarf-docs-document ul,
.iarf-docs-container .iarf-docs-document ol {
	padding-left: 20px;
	margin-bottom: 1em;
}

.iarf-docs-container .iarf-docs-document li {
	margin-bottom: 0.5em;
}

.iarf-docs-container .iarf-docs-document ul ul,
.iarf-docs-container .iarf-docs-document ol ol,
.iarf-docs-container .iarf-docs-document ul ol,
.iarf-docs-container .iarf-docs-document ol ul {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.iarf-docs-container .iarf-docs-document pre {
	background-color: var(--iarf-code-bg);
	border: none;
	padding: 1em;
	white-space: pre-wrap;
	word-wrap: break-word;
	border-radius: 3px;
}

.iarf-docs-container .iarf-docs-document code {
	font-family: monospace;
	background-color: var(--iarf-code-bg);
	padding: 0.2em 0.4em;
	border: none;
	border-radius: 3px;
}

.iarf-docs-container .iarf-docs-document pre code {
	background: none;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.iarf-docs-container .iarf-docs-document blockquote {
	border-left: 3px solid var(--iarf-border-color);
	padding-left: 1em;
	margin-left: 0;
	font-style: italic;
	color: var(--iarf-text-secondary);
	background-color: #f8f9fa;
	padding: 0.5em 1em;
}

.iarf-docs-container .iarf-docs-document .iarf-docs-image-figure {
	margin: 1.5em 0;
	padding: 0;
	width: 100%;
}

.iarf-docs-container .iarf-docs-document .iarf-docs-image-figure img {
	width: 100%;
	max-height: 250px;
	object-fit: cover;
	display: block;
	margin: 0 auto;
	border: 1px solid var(--iarf-border-color);
	border-radius: 4px;
}

.iarf-docs-container .iarf-docs-document .iarf-docs-image-figure img.iarf-docs-image-lightboxable {
	cursor: zoom-in;
}

.iarf-docs-container .iarf-docs-document .iarf-docs-image-figure figcaption {
	font-size: 0.9em;
	color: var(--iarf-text-secondary);
	text-align: center;
	margin-top: 0.5em;
	font-style: italic;
}

/* Alerts / Highlight Boxes */
.iarf-docs-alert {
	padding: 1em 1.5em 1em 50px;
	margin-bottom: 1em;
	border-left-width: 5px;
	border-left-style: solid;
	border-radius: 4px;
	position: relative;
}

.iarf-docs-alert p:last-child {
	margin-bottom: 0;
}

.iarf-docs-alert::before {
	font-family: "dashicons";
	font-size: 20px;
	position: absolute;
	left: 15px;
	top: 1em;
	line-height: 1;
	font-weight: 400;
	font-style: normal;
}

.iarf-docs-alert-note {
	border-left-color: #4682b4;
	background-color: #f0f8ff;
}
.iarf-docs-alert-note::before {
	content: "\f348"; /* info */
	color: #4682b4;
}

.iarf-docs-alert-tip {
	border-left-color: #32cd32;
	background-color: #f0fff0;
}
.iarf-docs-alert-tip::before {
	content: "\f157"; /* lightbulb */
	color: #32cd32;
}

.iarf-docs-alert-important {
	border-left-color: #8a2be2;
	background-color: #faf7ff;
}
.iarf-docs-alert-important::before {
	content: "\f534"; /* megaphone */
	color: #8a2be2;
}

.iarf-docs-alert-warning {
	border-left-color: #ffa500;
	background-color: #fffaf0;
}
.iarf-docs-alert-warning::before {
	content: "\f488"; /* warning */
	color: #ffa500;
}

.iarf-docs-alert-caution {
	border-left-color: #dc143c;
	background-color: #fff0f5;
}
.iarf-docs-alert-caution::before {
	content: "\f158"; /* shield-alt */
	color: #dc143c;
}

.iarf-docs-container .iarf-docs-document table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1em;
}

.iarf-docs-container .iarf-docs-document th,
.iarf-docs-container .iarf-docs-document td {
	border: 1px solid var(--iarf-border-color);
	padding: 8px 12px;
	text-align: left;
}

.iarf-docs-container .iarf-docs-document th {
	background-color: var(--iarf-code-bg);
	font-weight: bold;
}

.iarf-docs-container .iarf-docs-document tr:nth-child(even) {
	background-color: #fdfdfd;
}

/* Actions */
.iarf-docs-container .iarf-docs-sidebar-actions {
	margin-bottom: 15px;
}

.iarf-docs-container .iarf-docs-copy-all-btn {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--iarf-border-color);
	background-color: #f8f9fa;
	cursor: pointer;
	text-align: center;
	font-size: 0.9em;
	transition: background-color 0.2s, border-color 0.2s;
}

.iarf-docs-container .iarf-docs-copy-all-btn:hover {
	background-color: #f0f2f5;
}

.iarf-docs-container .iarf-docs-content-header {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1em;
	height: 28px; /* match button height to avoid layout shift */
}

.iarf-docs-container .iarf-docs-copy-article-btn {
	padding: 4px 8px;
	border: 1px solid var(--iarf-border-color);
	background-color: #f8f9fa;
	cursor: pointer;
	font-size: 0.9em;
	visibility: hidden; /* Hidden by default, shown by JS when doc is loaded */
	transition: background-color 0.2s, border-color 0.2s;
}

.iarf-docs-container .iarf-docs-copy-article-btn:hover {
	background-color: #f0f2f5;
}

.iarf-docs-container .iarf-docs-copy-article-btn.iarf-docs-copied,
.iarf-docs-container .iarf-docs-copy-all-btn.iarf-docs-copied {
	background-color: #d4edda;
	border-color: #c3e6cb;
}

/* Loader */
.iarf-docs-container .iarf-docs-loader-container {
	position: absolute;
	top: 0;
	left: 30px;
	right: 0;
	bottom: 0;
	display: none; /* Hidden by default */
	justify-content: center;
	align-items: center;
	background: rgba(255,255,255,0.7);
	z-index: 10;
}
.iarf-docs-container .iarf-docs-content.loading .iarf-docs-loader-container {
	display: flex;
}
.iarf-docs-container .iarf-docs-content.loading .iarf-docs-document {
	opacity: 0.3;
}

.iarf-docs-container .iarf-docs-loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid var(--iarf-primary-accent);
  width: 50px;
  height: 50px;
  animation: iarf-spin 1s linear infinite;
}

/* Breadcrumbs */
.iarf-docs-container .iarf-docs-breadcrumbs {
	margin-bottom: 1em;
	font-size: 0.9em;
	padding-bottom: 1em;
	border-bottom: 1px solid var(--iarf-border-color);
}

.iarf-docs-container .iarf-docs-breadcrumbs ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.iarf-docs-container .iarf-docs-breadcrumbs li {
	margin: 0;
}

.iarf-docs-container .iarf-docs-breadcrumbs li:not(:last-child)::after {
	content: '/';
	margin: 0 0.5em;
	color: var(--iarf-text-secondary);
}

.iarf-docs-container .iarf-docs-breadcrumbs a {
	color: var(--iarf-primary-accent);
	text-decoration: none;
}

.iarf-docs-container .iarf-docs-breadcrumbs a:hover {
	text-decoration: underline;
}

/* Pagination */
.iarf-docs-container .iarf-docs-pagination {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 1em;
	margin-top: 2em;
	padding-top: 1em;
	border-top: 1px solid var(--iarf-border-color);
}

.iarf-docs-container .iarf-docs-pagination a {
	display: block;
	padding: 0.5em 1em;
	border: 1px solid var(--iarf-border-color);
	border-radius: 4px;
	text-decoration: none;
	color: var(--iarf-primary-accent);
	transition: background-color 0.2s, border-color 0.2s;
	flex-grow: 1;
	flex-basis: 150px;
	max-width: 40%;
}

.iarf-docs-container .iarf-docs-pagination a:hover {
	background-color: #f0f2f5;
	border-color: #ddd;
	text-decoration: none;
}

.iarf-docs-container .iarf-docs-pagination .iarf-docs-prev {
	text-align: left;
}

.iarf-docs-container .iarf-docs-pagination .iarf-docs-next {
	text-align: right;
}

.iarf-docs-container .iarf-docs-pagination .iarf-docs-nav-title {
	display: block;
	font-weight: 500;
	color: var(--iarf-text-primary);
	margin: 0.2em 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@keyframes iarf-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Lightbox */
.iarf-docs-lightbox-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	cursor: zoom-out;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	padding: 20px;
	box-sizing: border-box;
}

.iarf-docs-lightbox-overlay.active {
	opacity: 1;
	visibility: visible;
}

.iarf-docs-lightbox-content {
	text-align: center;
	cursor: default;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.iarf-docs-lightbox-content img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 4px;
	display: block;
}

.iarf-docs-lightbox-caption {
	color: #fff;
	margin-top: 10px;
	font-style: italic;
}

.iarf-docs-lightbox-close {
	position: absolute;
	top: 20px;
	right: 30px;
	width: 30px;
	height: 30px;
	background: rgba(0,0,0,0.5);
	color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	cursor: pointer;
	line-height: 1;
	transition: background-color 0.2s;
}

.iarf-docs-lightbox-close:hover {
	background: rgba(0,0,0,0.8);
}

/* Tabs */
body .iarf-docs-tab-container {
	margin-bottom: 1.5em;
	padding: 0 2em;
	box-sizing: border-box;
}

.iarf-docs-tab-container .iarf-docs-tabs {
	list-style: none;
	padding: 0;
	margin: 0 0 -1px 0;
	border-bottom: 1px solid var(--iarf-border-color);
	display: flex;
	flex-wrap: wrap;
}

.iarf-docs-tab-container .iarf-docs-tabs li {
	margin: 0 5px 0 0;
}

.iarf-docs-tab-container .iarf-docs-tabs a {
	display: block;
	padding: 10px 15px;
	color: var(--iarf-primary-accent);
	text-decoration: none;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
	background: #f8f9fa;
}

.iarf-docs-tab-container .iarf-docs-tabs li a:hover {
	background-color: #f0f2f5;
	text-decoration: none;
}

.iarf-docs-tab-container .iarf-docs-tabs li.active a {
	background-color: #fff;
	border-color: var(--iarf-border-color);
	border-bottom-color: #fff;
	color: var(--iarf-text-primary);
	font-weight: 500;
}

.iarf-docs-tab-container .iarf-docs-tab-pane {
	display: none;
}

.iarf-docs-tab-container .iarf-docs-tab-pane.active {
	display: block;
}

.iarf-docs-tab-container .iarf-docs-tab-pane > .iarf-docs-container {
    margin: 0;
	border-top: 1px solid var(--iarf-border-color);
	padding-top: 1em;
	margin-top: -1px;
	padding-left: 0;
	padding-right: 0;
}
