/*
	BackupCheck Help Book — self-contained modern stylesheet.
	Replaces Bootstrap 2. Implements only the classes used by the
	help pages (navbar, jumbotron, row/col-lg-*, btn, table).
*/

:root {
	--teal-900: #0b2e2c;
	--teal-700: #145049;
	--teal-600: #1a6960;
	--teal-500: #1f8177;
	--teal-100: #e4f1ef;
	--orange-500: #e97a34;
	--ink: #232323;
	--ink-soft: #55605e;
	--paper: #ffffff;
	--mist: #f4f6f5;
	--line: #e2e6e5;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	padding-top: 64px;
	background: var(--paper);
	color: var(--ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

img { max-width: 100%; }

a { color: var(--teal-600); text-decoration: none; }
a:hover { color: var(--teal-500); }

h1, h2, h4 { color: var(--ink); font-weight: 700; line-height: 1.25; margin: 0 0 0.5em; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.3rem; margin-top: 1.2em; }
h4 { font-weight: 500; color: var(--ink-soft); }
p { margin: 0 0 1em; color: var(--ink-soft); }

hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }

.container {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

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

/* ---------- Navbar ---------- */

.navbar {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 50;
	height: 64px;
	background: var(--teal-900);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.navbar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

.navbar-brand {
	display: inline-flex;
	align-items: center;
}
.navbar-brand img { display: block; }

.navbar-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	background: none;
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: 6px;
	padding: 8px 10px;
	cursor: pointer;
}
.navbar-toggle .icon-bar {
	display: block;
	width: 18px;
	height: 2px;
	background: #fff;
}

.nav.navbar-nav {
	list-style: none;
	display: flex;
	gap: 26px;
	margin: 0;
	padding: 0;
}
.nav.navbar-nav li a {
	color: rgba(255,255,255,0.82);
	font-weight: 600;
	font-size: 0.95rem;
}
.nav.navbar-nav li a:hover { color: #fff; }
.nav.navbar-nav li.active a {
	color: #fff;
	border-bottom: 2px solid var(--orange-500);
	padding-bottom: 4px;
}

@media (max-width: 760px) {
	.navbar-toggle { display: inline-flex; }
	.nav-collapse.collapse {
		position: absolute;
		top: 64px;
		left: 0;
		right: 0;
		background: var(--teal-900);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.25s ease;
	}
	.nav-collapse.collapse.in { max-height: 320px; }
	.nav.navbar-nav {
		flex-direction: column;
		gap: 0;
		padding: 8px 24px 20px;
	}
	.nav.navbar-nav li { border-top: 1px solid rgba(255,255,255,0.08); }
	.nav.navbar-nav li a { display: block; padding: 14px 0; }
	.nav.navbar-nav li.active a { border-bottom: 0; }
}

/* ---------- Jumbotron ---------- */

.jumbotron {
	background: linear-gradient(160deg, var(--teal-900) 0%, var(--teal-700) 100%);
	color: #fff;
	padding: 48px 0;
	margin-bottom: 40px;
}
.jumbotron h1 { color: #fff; }
.jumbotron h4 { color: rgba(255,255,255,0.75); }
.jumbotron p { color: rgba(255,255,255,0.86); }

/* ---------- Grid ---------- */

.row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -14px 28px;
}
.row [class*="col-lg-"] { padding: 0 14px; }
.col-lg-2  { width: 16.6667%; }
.col-lg-3  { width: 25%; }
.col-lg-4  { width: 33.3333%; }
.col-lg-6  { width: 50%; }
.col-lg-8  { width: 66.6667%; }
.col-lg-12 { width: 100%; }

@media (max-width: 900px) {
	.row [class*="col-lg-"] { width: 100%; margin-bottom: 20px; }
}

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border: 2px solid var(--teal-600);
	border-radius: 999px;
	color: var(--teal-700);
	font-weight: 700;
	background: transparent;
}
.btn:hover { background: var(--teal-100); color: var(--teal-700); }
.btn img {
	width: 66px;
	height: 36px;
	object-fit: contain;
	margin-right: 10px;
}

/* Narrow (col-lg-3) capsule buttons: above the stacking breakpoint the
   column is too tight for an icon + label on one line, so stack them
   instead of letting the pill overflow its column. Below the breakpoint
   columns are full width, so the original inline pill already fits. */
@media (min-width: 901px) {
	.col-lg-3 .btn {
		flex-direction: column;
		justify-content: center;
		width: 100%;
		text-align: center;
		white-space: normal;
		gap: 6px;
	}
	.col-lg-3 .btn img { margin-right: 0; }
}

/* ---------- Tables ---------- */

.table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin: 16px 0;
}
.table td {
	padding: 1px 12px;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}
.table td:first-child { width: 90px; }
.table-hover tr:hover td { background: var(--mist); }

/* ---------- Screenshot callout arrows ----------
   Usage: wrap the <img> in a <span class="callout"> and add a
   <span class="callout-arrow"> sibling with --x/--y (position of the
   arrow TIP, as a % of the image) and --angle (direction the tip
   points in, 0deg = right, 90deg = down, 180deg = left, -90deg = up).
   The underlying image file is never touched. */

.callout {
	position: relative;
	display: inline-block;
	line-height: 0;
}
.callout img { display: block; }

.callout-arrow {
	--length: 64px;
	--thickness: 5px;
	position: absolute;
	left: calc(var(--x) - var(--length));
	top: var(--y);
	width: var(--length);
	height: 0;
	transform: rotate(var(--angle, 0deg));
	transform-origin: 100% 50%;
	pointer-events: none;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.callout-arrow::before {
	content: "";
	position: absolute;
	left: 0;
	right: calc(var(--thickness) * 2.4);
	top: calc(var(--thickness) / -2);
	height: var(--thickness);
	background: var(--orange-500);
	border-radius: 2px;
}
.callout-arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: calc(var(--thickness) * 2.2) 0 calc(var(--thickness) * 2.2) calc(var(--thickness) * 3.4);
	border-color: transparent transparent transparent var(--orange-500);
	transform: translateY(-50%);
}

/* ---------- Footer ---------- */

footer {
	color: var(--ink-soft);
	font-size: 0.9rem;
	padding-bottom: 32px;
}