/*
Theme Name: Copytrained
Theme URI: https://copytrained.com
Template: twentytwentyone
Author: Epoque d.o.o.
Description: Child theme for copytrained.com. Serves the sales page and holding page as raw HTML that WordPress never touches, and gives the legal pages a single-column document layout in the brand's type and colour.
Version: 2.0.0
License: GNU General Public License v2 or later
Text Domain: copytrained
*/

/* ===============================================================
   LEGAL PAGES ONLY — /terms, /privacy, /refunds.
   The sales page never loads this file. It is output verbatim by
   the "Sales Page (raw HTML)" template and carries its own CSS.

   v2.0 rewrites the layout rather than patching it. Twenty
   Twenty-One puts the header and page title in a wide container
   and the body copy in a narrower, offset one, so nothing shares a
   left edge. It also sizes the page title from a clamp that
   ignores a plain font-size rule. Both are overridden at the
   source: its own layout variables.
   =============================================================== */

:root,
body {
	/* Brand */
	--ct-canvas: #F6F5F2;
	--ct-ink:    #1C1A17;
	--ct-fine:   #6B675F;
	--ct-rule:   #E2DFD8;
	--ct-serif:  "Source Serif 4", Georgia, "Times New Roman", serif;
	--ct-sans:   "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--ct-mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* The one measure everything shares. */
	--ct-measure: 660px;

	/* Twenty Twenty-One's own layout variables, collapsed to one column. */
	--responsive--aligndefault-width: var(--ct-measure);
	--responsive--alignwide-width:    var(--ct-measure);
	--responsive--alignfull-width:    100%;

	/* Its palette, so the Customizer's inline colours lose. */
	--global--color-background: #F6F5F2;
	--global--color-primary:    #1C1A17;
	--global--color-secondary:  #6B675F;
	--global--color-border:     #E2DFD8;

	/* Its type scale. The page title is the one that ran away. */
	--global--font-size-page-title: 2rem;
	--global--font-size-xl:  1.375rem;
	--global--font-size-lg:  1.1875rem;
	--heading--font-family:  var(--ct-serif);
}

body {
	background-color: var(--ct-canvas);
	color: var(--ct-ink);
	font-family: var(--ct-sans);
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* ---------- One column, one left edge ---------- */

.site-header > *,
.site-main > article > *,
.entry-header,
.entry-content,
.entry-content > *,
.page-content,
.site-footer > * {
	max-width: var(--ct-measure) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
	width: auto;
}

.entry-header,
.entry-content > * {
	padding-left: 0;
	padding-right: 0;
}

/* ---------- Header ---------- */

.site-header {
	padding: 40px 25px 0;
	border-bottom: 0;
	background: transparent;
}

.site-branding {
	display: block;
	text-align: left !important;
	padding: 0;
	margin: 0 0 34px;
	border-bottom: 1px solid var(--ct-rule);
	padding-bottom: 26px;
}

.custom-logo-link,
.site-logo,
.site-logo .custom-logo-link {
	display: inline-block !important;
	margin: 0 !important;
	max-width: none;
}

/* The wordmark. Sized against the body text, not the viewport. */
.custom-logo,
img.custom-logo,
.site-logo img {
	width: 148px !important;
	max-width: 148px !important;
	height: auto !important;
	display: block !important;
}

.site-title,
.site-description { display: none; }

/* ---------- Page title ---------- */

.entry-header {
	padding: 0 25px;
	margin-bottom: 8px;
	border-bottom: 0;
}

.entry-header .entry-title,
.page .entry-title,
h1.entry-title {
	font-family: var(--ct-serif) !important;
	font-size: 2rem !important;
	line-height: 1.2 !important;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--ct-ink);
	text-align: left !important;
	margin: 0 0 6px;
	max-width: var(--ct-measure);
}

.entry-header::after,
.entry-header hr { display: none; }

/* ---------- Body ---------- */

.entry-content {
	padding: 0 25px 96px;
}

.entry-content > *:first-child { margin-top: 0; }

/* The effective-date line: first paragraph, italic in the source. */
.entry-content > p:first-child {
	margin: 0 0 40px;
}
.entry-content > p:first-child em {
	font-family: var(--ct-mono);
	font-style: normal;
	font-size: 0.75rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ct-fine);
}

.entry-content h2 {
	font-family: var(--ct-serif);
	font-size: 1.3125rem !important;
	line-height: 1.3;
	margin: 3em 0 0.75em;
	color: var(--ct-ink);
}

.entry-content h3 {
	font-family: var(--ct-serif);
	font-size: 1.125rem !important;
	margin: 2.2em 0 0.6em;
}

.entry-content p,
.entry-content li {
	color: var(--ct-ink);
	margin-bottom: 1.15em;
}

.entry-content ul,
.entry-content ol { padding-left: 1.35em; margin-bottom: 1.4em; }
.entry-content li { margin-bottom: 0.55em; }

.entry-content a { color: var(--ct-ink); text-underline-offset: 0.15em; }
.entry-content strong { color: var(--ct-ink); font-weight: 700; }

.entry-content hr {
	border: 0;
	border-top: 1px solid var(--ct-rule);
	margin: 2.75em 0;
}

/* ---------- Strip Twenty Twenty-One's furniture ---------- */

.post-thumbnail,
.entry-footer,
.author-bio,
.site-footer .powered-by,
.comments-area,
.post-navigation,
.pagination { display: none !important; }

/* ---------- Mobile ---------- */

@media (max-width: 700px) {
	.custom-logo, img.custom-logo { width: 124px !important; max-width: 124px !important; }
	.entry-header .entry-title,
	.page .entry-title,
	h1.entry-title { font-size: 1.625rem !important; }
	.site-header { padding-top: 28px; }
	.site-branding { margin-bottom: 26px; padding-bottom: 20px; }
	.entry-content { padding-bottom: 64px; }
}