/* Deployment timestamp: 2026-07-11 12:00:00 */
/*
Theme Name:        IB Exam Theme
Description:       Companion block theme for the IB Exam Platform plugin. Provides the app shell, landing and pricing layouts; all platform logic lives in the plugin.
Version:           0.4.3
Requires at least: 6.5
Requires PHP:      8.2
Author:            diplomapass.com
Text Domain:       ib-exam-theme
License:           Proprietary
*/

/* digibacc. — Soft Brights design system (see themes/prototype/).
   Tokens are global so the plugin apps can consume them; the manual
   dark mode toggles `html.dark` (assets/theme.js). */
:root {
	--navy: #232a4d;
	--on-yellow: #232a4d;
	--bg: #fdf6ef;
	--card: #ffffff;
	--border: #ece4da;
	--chip: #f2e8dc;
	--ink: #232a4d;
	--ink-soft: #6c6759;
	--muted: #8b8577;
	--navy-muted: #aeb3cf;
	--coral: #ff5a3c;
	--coral-dark: #d63f24;
	--coral-ink: #fff6ef;
	--yellow: #ffd66e;
	--font-display: 'Gabarito', sans-serif;
	--font-body: 'Outfit', sans-serif;
	/* Shared component scale — consumed by dbc-* (theme), ibep-* (plugin)
	   and sq-* (SEO pages). Radii: pill > card > panel > control > micro. */
	--r-pill: 999px;
	--r-card: 24px;
	--r-panel: 18px;
	--r-control: 12px;
	--r-micro: 8px;
	--press: 0 5px 0 var(--coral-dark);       /* every pressable primary */
	--press-down: 0 2px 0 var(--coral-dark);  /* :active, with translateY(3px) */
	/* Navy is nearly black, so a darker shadow alone can't carry the 3D press —
	   the face gets a subtle top-light (adapts to dark mode via color-mix). */
	--press-ink: 0 5px 0 #0b0e20;             /* press for navy CTAs */
	--press-ink-down: 0 2px 0 #0b0e20;
	--navy-face: linear-gradient(180deg, color-mix(in srgb, var(--navy) 82%, #fff) 0%, var(--navy) 55%);
	--shadow-card: 0 10px 24px rgba(35, 42, 77, 0.06);
	--shadow-float: 0 14px 30px -18px rgba(35, 42, 77, 0.5);
}

html.dark {
	--navy: #2b3158;
	--bg: #14162a;
	--card: #1d2140;
	--border: #2e3354;
	--chip: #272c4c;
	--ink: #eef0fa;
	--ink-soft: #b6bad0;
	--muted: #8f94b2;
	--navy-muted: #9ba1c4;
	/* On a dark ground a navy CTA would vanish (1.4:1) — lift the face to a
	   brighter, hue-true navy (3.2:1 vs bg, label 5.3:1) and let the press
	   edge read against that face instead of against the background. */
	--press-ink: 0 5px 0 #232a4d;
	--press-ink-down: 0 2px 0 #232a4d;
	--navy-face: linear-gradient(180deg, #6b78c4 0%, #5462b0 55%);
}

/* Dark mode overrides the theme.json presets the layout builds on. */
html.dark body {
	--wp--preset--color--background: var(--bg);
	--wp--preset--color--surface: var(--card);
	--wp--preset--color--foreground: var(--ink);
	--wp--preset--color--navy: var(--navy);
	background: var(--bg);
	color: var(--ink);
}

body { background: var(--bg); color: var(--ink); }

a { text-decoration: none; }
a:hover { color: var(--coral); }

/* ---------- Wordmark (site title) ---------- */
.wordmark a, .wordmark {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.02em;
	font-size: 22px;
	color: var(--ink);
	text-decoration: none;
}
.wordmark a::after { content: '.'; color: var(--coral); }

/* ---------- Header nav ---------- */
.site-nav a {
	color: var(--ink-soft);
	font-size: 14px;
}
.site-nav a:hover { color: var(--coral); }
.site-nav .current-menu-item > a { color: var(--ink); font-weight: 700; }

.icon-btn.theme-toggle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--card);
	color: var(--ink);
	font-size: 15px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.icon-btn.theme-toggle:hover { border-color: var(--coral); color: var(--coral); }

/* ---------- Buttons (pattern usage) ---------- */
.btn-coral .wp-block-button__link, .wp-block-button.btn-coral > a {
	background: var(--coral);
	color: var(--coral-ink);
	box-shadow: var(--press);
	border-radius: var(--r-pill);
	font-weight: 700;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-coral .wp-block-button__link:active { transform: translateY(3px); box-shadow: var(--press-down); }
.btn-navy .wp-block-button__link {
	background: var(--navy-face);
	color: var(--coral-ink);
	border-radius: var(--r-pill);
	font-weight: 700;
	box-shadow: var(--press-ink);
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-navy .wp-block-button__link:active { transform: translateY(3px); box-shadow: var(--press-ink-down); }

/* ---------- Hero ---------- */
.dbc-hero h1 { line-height: 1.1; }
.dbc-hero .coral { color: var(--coral); }
.dbc-hero p { color: var(--ink-soft); }
.dbc-hero .note { font-size: 13px; color: var(--muted); }

/* ---------- Module cards (Practice / Exams) ---------- */
.dbc-modules { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .dbc-modules { grid-template-columns: 1fr 1fr; } }
.dbc-module {
	display: block;
	border-radius: var(--r-card);
	padding: 22px;
	color: inherit;
}
.dbc-module .tag {
	display: block;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.dbc-module h2 { font-size: 22px; margin: 0 0 6px; }
.dbc-module p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.dbc-module .dbc-btn {
	display: inline-block;
	border-radius: var(--r-pill);
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 700;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.dbc-module.is-practice { background: var(--navy); }
.dbc-module.is-practice h2 { color: var(--coral-ink); }
.dbc-module.is-practice .tag { color: var(--yellow); }
.dbc-module.is-practice p { color: var(--navy-muted); }
.dbc-module.is-practice .dbc-btn { background: var(--coral); color: var(--coral-ink); box-shadow: var(--press); }
.dbc-module.is-practice .dbc-btn:active { transform: translateY(3px); box-shadow: var(--press-down); }
.dbc-module.is-exams { background: var(--card); border: 1px solid var(--border); }
.dbc-module.is-exams .tag { color: var(--coral); }
.dbc-module.is-exams p { color: var(--ink-soft); }
.dbc-module.is-exams .dbc-btn { background: var(--navy-face); color: var(--coral-ink); box-shadow: var(--press-ink); }
.dbc-module.is-exams .dbc-btn:active { transform: translateY(3px); box-shadow: var(--press-ink-down); }
.dbc-module:hover { color: inherit; }

/* ---------- Pricing section ---------- */
.dbc-pricing-head h2 .coral, .coral { color: var(--coral); }
.dbc-pricing-head .sub { color: var(--ink-soft); font-size: 15px; }

/* ---------- Phone app shell (Practice) ---------- */
.dbc-phone-shell {
	max-width: 480px;
	margin: 0 auto;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	padding-bottom: 96px; /* space for the bottom nav */
}
@media (min-width: 560px) {
	.dbc-phone-shell {
		border-left: 1px solid var(--border);
		border-right: 1px solid var(--border);
	}
}
.dbc-phone-header {
	padding: 18px 22px 0;
}
.dbc-phone-header .wordmark a, .dbc-phone-header .wordmark { font-size: 20px; }
.dbc-phone-main {
	flex: 1;
	padding: 4px 16px 16px;
}

.dbc-bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	/* Full-bleed bar edge to edge; the content column above stays centred. */
	background: var(--card);
	border-top: 1px solid var(--border);
	display: grid;
	/* Spread however many items exist evenly across one row (no wrapping). */
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	padding: 12px 8px calc(14px + env(safe-area-inset-bottom));
	z-index: 50;
}
.dbc-bottom-nav a {
	text-align: center;
	font-size: 12px;
	color: var(--muted);
}
.dbc-bottom-nav a .dot {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 7px;
	background: var(--chip);
	margin: 0 auto 5px;
}
.dbc-bottom-nav a.is-active { color: var(--ink); font-weight: 700; }
.dbc-bottom-nav a.is-active .dot { background: var(--coral); }
.dbc-bottom-nav a:hover { color: var(--ink); }

/* ---------- PWA install chip ---------- */
.dbc-install-chip {
	position: fixed;
	bottom: 96px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: none;
	border-radius: var(--r-pill);
	padding: 10px 18px;
	background: var(--navy);
	color: var(--coral-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--shadow-float);
}
.dbc-install-close { opacity: 0.7; font-weight: 400; }
.dbc-install-close:hover { opacity: 1; }

/* ---------- Footer / legal ---------- */
.dbc-legal {
	text-align: center;
	font-size: 13px;
	color: var(--muted);
	line-height: 1.6;
}

/* ---------- Desktop (≥900px): the bottom nav becomes a left sidebar ---------- */
@media (min-width: 900px) {
	/* rail pieces must include padding+border in their width so both edges
	   line up at exactly 248px (otherwise the two right borders misalign). */
	.dbc-phone-header, .dbc-bottom-nav { box-sizing: border-box; }
	.dbc-phone-shell {
		max-width: none;
		border-left: none;
		border-right: none;
		padding-bottom: 0;
		padding-left: 248px;
	}
	.dbc-phone-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 248px;
		height: 64px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 18px;
		background: var(--card);
		border-right: 1px solid var(--border);
		z-index: 60;
	}
	.dbc-phone-main {
		padding: 26px 30px 48px;
	}
	.dbc-bottom-nav {
		top: 64px;
		right: auto;
		bottom: 0;
		left: 0;
		width: 248px;
		max-width: none;
		margin: 0;
		grid-auto-flow: row;
		grid-template-columns: 1fr;
		align-content: start;
		gap: 4px;
		border-top: none;
		border-left: none;
		border-right: 1px solid var(--border);
		padding: 14px 12px;
	}
	.dbc-bottom-nav a {
		display: flex;
		align-items: center;
		gap: 11px;
		text-align: left;
		font-size: 15px;
		font-weight: 600;
		padding: 10px 12px;
		border-radius: var(--r-control);
	}
	.dbc-bottom-nav a .dot {
		margin: 0;
		width: 12px;
		height: 12px;
		border-radius: 5px;
	}
	.dbc-bottom-nav a:hover { background: rgba(255, 90, 60, 0.06); }
	.dbc-bottom-nav a.is-active { background: var(--bg); }
}

/* ---------- Teacher nav item ----------
   "Teach" ships in the shell for everyone but only renders for teachers:
   the plugin adds body.ibep-teacher (server-side, so no flicker), and the
   grid nav simply gains one more track when the item appears. */
.dbc-bottom-nav .dbc-nav-teacher { display: none; }
body.ibep-teacher .dbc-bottom-nav .dbc-nav-teacher { display: block; }
@media (min-width: 900px) {
	body.ibep-teacher .dbc-bottom-nav a.dbc-nav-teacher { display: flex; }
}

/* ---------- Landing: teacher teaser band ---------- */
/* Third audience block on the front page: yellow band between the two
   student modules and pricing. Yellow is a constant token, so the navy
   ink on it holds in dark mode too. */
.dbc-teachers {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	background: var(--yellow);
	border-radius: var(--r-card);
	padding: 22px;
	color: #232a4d;
}
.dbc-teachers-text { flex: 1 1 380px; }
.dbc-teachers .tag {
	display: block;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 6px;
	color: #d63f24;
}
.dbc-teachers h2 { font-size: 22px; margin: 0 0 6px; color: inherit; }
.dbc-teachers p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(35, 42, 77, 0.8); }
.dbc-teachers .dbc-btn {
	display: inline-block;
	border-radius: var(--r-pill);
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 700;
	background: var(--navy-face);
	color: var(--coral-ink);
	white-space: nowrap;
	box-shadow: var(--press-ink);
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.dbc-teachers .dbc-btn:active { transform: translateY(3px); box-shadow: var(--press-ink-down); }

/* ---------- Landing: question-bank links + footer nav ---------- */
/* Internal links from the landing to the /practice/ SEO hubs. */
.dbc-qbank { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 22px; }
.dbc-qbank .tag {
	display: block;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 6px;
	color: var(--coral);
}
.dbc-qbank h2 { font-size: 22px; margin: 0 0 6px; }
.dbc-qbank p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.dbc-qbank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.dbc-qbank-grid a {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--r-control);
	padding: 9px 12px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}
.dbc-qbank-grid a:hover { border-color: var(--navy); }
.dbc-qbank-grid a span { color: var(--muted); font-weight: 400; }

.dbc-foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin-bottom: 10px; }
.dbc-foot-nav a { font-size: 13px; color: var(--ink-soft); text-decoration: none; }
.dbc-foot-nav a:hover { color: var(--ink); text-decoration: underline; }