/*
Theme Name: Creative Task Privacy
Theme URI: https://play.google.com/store/apps/details?id=com.intentstudio.creativetask
Author: Intent Studio
Author URI: https://play.google.com/store/apps/dev
Description: A single-page privacy policy theme built for the Creative Task Android app. Every word on the page is editable from Appearance → Customize → Privacy policy, so the page never needs a code change. Responsive, light and dark aware, and styled for print.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: creative-task-privacy
Tags: one-column, custom-logo, full-width-template, translation-ready
*/

/* ---------------------------------------------------------------- tokens */

:root {
	--ctp-bg: #f6f5f1;
	--ctp-surface: #ffffff;
	--ctp-surface-alt: #f1efea;
	--ctp-ink: #10203a;
	--ctp-muted: #5f6a7d;
	--ctp-faint: #8b93a3;
	--ctp-line: #e3e0d8;
	--ctp-accent: #1e4fbf;
	--ctp-accent-soft: #eaeffa;
	--ctp-navy: #10233f;
	--ctp-shadow: 0 1px 2px rgba(16, 32, 58, .05), 0 12px 32px rgba(16, 32, 58, .07);
	--ctp-radius: 16px;
	--ctp-radius-sm: 10px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ctp-bg: #101218;
		--ctp-surface: #191c23;
		--ctp-surface-alt: #22262f;
		--ctp-ink: #eef0f4;
		--ctp-muted: #a2aab9;
		--ctp-faint: #737b8a;
		--ctp-line: #2c313b;
		--ctp-accent: #7ba0ff;
		--ctp-accent-soft: #1b2440;
		--ctp-navy: #0b0d12;
		--ctp-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
	}
}

/* ------------------------------------------------------------------ base */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--ctp-bg);
	color: var(--ctp-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--ctp-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover,
a:focus-visible {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 2px solid var(--ctp-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.ctp-shell {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 20px 96px;
}

/* Visible only to screen readers, and to keyboard users when focused. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 100;
	padding: 12px 18px;
	background: var(--ctp-surface);
	border-radius: var(--ctp-radius-sm);
	box-shadow: var(--ctp-shadow);
}

/* ------------------------------------------------------------------ hero */

.ctp-hero {
	background:
		radial-gradient(120% 140% at 12% 0%, rgba(30, 79, 191, .16), transparent 58%),
		linear-gradient(180deg, var(--ctp-surface-alt), var(--ctp-bg));
	border-bottom: 1px solid var(--ctp-line);
	padding: 64px 0 52px;
	margin-bottom: 44px;
}

.ctp-hero__inner {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	gap: 22px;
	align-items: center;
}

.ctp-hero__logo img {
	display: block;
	width: 76px;
	height: 76px;
	border-radius: 20px;
	box-shadow: var(--ctp-shadow);
}

.ctp-hero__text {
	min-width: 0;
}

.ctp-eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ctp-muted);
}

.ctp-title {
	margin: 0;
	font-size: clamp(28px, 6vw, 40px);
	line-height: 1.12;
	letter-spacing: -.02em;
	font-weight: 800;
}

.ctp-meta {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ctp-meta li {
	font-size: 13px;
	color: var(--ctp-muted);
	background: var(--ctp-surface);
	border: 1px solid var(--ctp-line);
	border-radius: 999px;
	padding: 5px 13px;
	white-space: nowrap;
}

.ctp-meta code {
	font-size: 12px;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------- callout */

.ctp-callout {
	background: var(--ctp-surface);
	border: 1px solid var(--ctp-line);
	border-left: 4px solid var(--ctp-accent);
	border-radius: var(--ctp-radius);
	padding: 22px 24px;
	box-shadow: var(--ctp-shadow);
	margin: 0 0 34px;
}

.ctp-callout > :first-child { margin-top: 0; }
.ctp-callout > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ at a glance */

.ctp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.ctp-card {
	background: var(--ctp-surface);
	border: 1px solid var(--ctp-line);
	border-radius: var(--ctp-radius);
	padding: 18px 18px 20px;
}

.ctp-card__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--ctp-accent-soft);
	color: var(--ctp-accent);
	margin-bottom: 12px;
}

.ctp-card__mark svg {
	width: 19px;
	height: 19px;
	display: block;
}

.ctp-card h2 {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.ctp-card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ctp-muted);
}

/* ------------------------------------------------------------------- toc */

.ctp-toc {
	background: var(--ctp-surface-alt);
	border: 1px solid var(--ctp-line);
	border-radius: var(--ctp-radius);
	padding: 18px 22px 20px;
	margin: 0 0 42px;
}

.ctp-toc h2 {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ctp-muted);
}

.ctp-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 28px;
}

.ctp-toc li {
	break-inside: avoid;
	margin-bottom: 5px;
	font-size: 15px;
}

@media (max-width: 560px) {
	.ctp-toc ol { columns: 1; }
}

/* -------------------------------------------------------------- sections */

.ctp-section {
	margin: 0 0 40px;
	scroll-margin-top: 24px;
}

.ctp-section h2 {
	margin: 0 0 12px;
	font-size: clamp(19px, 3.4vw, 23px);
	line-height: 1.25;
	letter-spacing: -.015em;
	font-weight: 750;
}

.ctp-section p {
	margin: 0 0 14px;
}

.ctp-section ul {
	margin: 0 0 14px;
	padding-left: 22px;
}

.ctp-section li {
	margin-bottom: 7px;
}

.ctp-section strong {
	font-weight: 700;
}

code {
	background: var(--ctp-surface-alt);
	border: 1px solid var(--ctp-line);
	border-radius: 5px;
	padding: 1px 6px;
	font-size: .88em;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	word-break: break-word;
}

/* ----------------------------------------------------------------- table */

/* A permission table is wide by nature; let it scroll rather than let the
   whole page scroll sideways on a phone. */
.ctp-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--ctp-line);
	border-radius: var(--ctp-radius);
	background: var(--ctp-surface);
	margin: 0 0 16px;
	-webkit-overflow-scrolling: touch;
}

.ctp-table {
	width: 100%;
	min-width: 460px;
	border-collapse: collapse;
	font-size: 15px;
}

.ctp-table th,
.ctp-table td {
	text-align: left;
	padding: 13px 16px;
	border-bottom: 1px solid var(--ctp-line);
	vertical-align: top;
}

.ctp-table tr:last-child th,
.ctp-table tr:last-child td {
	border-bottom: 0;
}

.ctp-table thead th {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ctp-muted);
	background: var(--ctp-surface-alt);
}

.ctp-table tbody th {
	font-weight: 600;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- footer */

.ctp-footer {
	margin-top: 56px;
	padding-top: 22px;
	border-top: 1px solid var(--ctp-line);
	color: var(--ctp-muted);
	font-size: 14.5px;
}

.ctp-footer p { margin: 0 0 8px; }

/* ----------------------------------------------------------------- print */

@media print {
	:root {
		--ctp-bg: #fff;
		--ctp-surface: #fff;
		--ctp-surface-alt: #fff;
		--ctp-ink: #000;
		--ctp-muted: #333;
		--ctp-line: #bbb;
		--ctp-shadow: none;
	}

	body { font-size: 11.5pt; }
	.ctp-hero { padding: 0 0 18px; margin-bottom: 22px; background: none; }
	.ctp-toc,
	.ctp-cards { display: none; }
	.ctp-callout { border-left-width: 3px; box-shadow: none; }
	.ctp-section { page-break-inside: avoid; }
	.ctp-table-wrap { overflow: visible; }
	a { text-decoration: none; color: #000; }
	/* A printed policy loses its links otherwise. */
	.ctp-section a[href^="http"]::after,
	.ctp-footer a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: .85em;
		word-break: break-all;
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}