/* ==========================================================================
   Crown Office Supplies — legal documents (Privacy Policy)

   Loads after cos-home.css, which supplies the design tokens. Everything is
   scoped to body.cos-legal-doc, so no other post or page is affected.

   Presentation only — see inc/cos-legal.php. The legal text is untouched.
   ========================================================================== */

/* The tokens live on .cos-page in cos-home.css. This document's markup comes
   from the post itself, so it never gets that class — re-declare the handful
   of variables the page actually uses. */
body.cos-legal-doc .site-main {
	--cos-yellow: #fed700;
	--cos-navy: #2e094e;
	--cos-navy-700: #4d1c7d;
	--cos-ink: #16091f;
	--cos-text: #4a4155;
	--cos-muted: #7a7188;
	--cos-line: #ece8f0;
	--cos-line-strong: #ddd6e4;
	--cos-surface: #ffffff;
	--cos-surface-2: #faf8fc;
	--cos-surface-3: #f4f1f7;
	--cos-r: 16px;
	--cos-r-lg: 24px;
	--cos-font-display: "Poppins", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--cos-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Strip the blog chrome.

   This document is filed as a POST, so Electro dressed a legal notice as a
   blog article: an author byline, a post date, a category, a "Leave a comment"
   link, a comment form, and a blog search sidebar. None of that belongs on a
   privacy policy — the date in particular is misleading, because the policy
   carries its own authoritative "Last updated" line.
   -------------------------------------------------------------------------- */
body.cos-legal-doc .entry-header .entry-meta,
body.cos-legal-doc .entry-header .comments-link,
body.cos-legal-doc #sidebar,
body.cos-legal-doc .sidebar-blog,
body.cos-legal-doc #comments,
body.cos-legal-doc #respond,
body.cos-legal-doc .comment-respond,
body.cos-legal-doc .post-navigation,
body.cos-legal-doc .nav-links,
body.cos-legal-doc .author-info {
	display: none !important;
}

/* With the sidebar gone, reclaim the full column (Electro's #primary is a
   Bootstrap 75% column whenever a sidebar is expected). */
body.cos-legal-doc .content-area {
	flex: 0 0 100%;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */
body.cos-legal-doc .site-main {
	font-family: var(--cos-font-body);
	color: var(--cos-text);
	padding-bottom: 40px;
}

body.cos-legal-doc .entry-header {
	max-width: 820px;
	margin: 0 auto 6px;
	padding: 10px 0 22px;
	border-bottom: 1px solid var(--cos-line);
}

/* Electro styles .entry-title through more specific single-post selectors, so
   a plain `.cos-legal-doc .entry-title` loses and the document title ends up
   SMALLER than its own section headings — an inverted hierarchy. */
body.cos-legal-doc .site-main .entry-header .entry-title,
body.cos-legal-doc .site-main .entry-header h1.entry-title {
	font-family: var(--cos-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 3rem);
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--cos-ink);
	margin: 0;
}

body.cos-legal-doc .entry-content {
	max-width: 820px;   /* ~75 characters — the readable measure for long prose */
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.75;
}

body.cos-legal-doc .entry-content p { margin: 0 0 1.15em; }

/* The generator wrapped nearly every paragraph in bare <span>s, which inherit
   nothing useful. Claim them explicitly. */
body.cos-legal-doc .entry-content span[data-custom-class="body_text"] {
	color: var(--cos-text);
}

body.cos-legal-doc .entry-content a {
	color: var(--cos-navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--cos-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;   /* long bare URLs must not force a scrollbar */
}

body.cos-legal-doc .entry-content a:hover { color: var(--cos-navy-700); }

/* --------------------------------------------------------------------------
   Document title block (the policy's own "PRIVACY POLICY" + "Last updated")
   -------------------------------------------------------------------------- */
body.cos-legal-doc .entry-content span[data-custom-class="title"] {
	display: block;
	font-family: var(--cos-font-display);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cos-muted);
	margin-bottom: 2px;
}

/* "Last updated …" — pulled out as a badge so the document's real date is
   unmissable, and cannot be confused with the blog post date we just hid. */
body.cos-legal-doc .entry-content span[data-custom-class="subtitle"] {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--cos-yellow);
	color: #2b0a45;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   Headings (promoted from faked spans by inc/cos-legal.php)
   -------------------------------------------------------------------------- */
body.cos-legal-doc .entry-content .cos-legal__h2 {
	font-family: var(--cos-font-display);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.3;
	color: var(--cos-ink);
	margin: 2.4em 0 .7em;
	padding-top: 1.1em;
	border-top: 1px solid var(--cos-line);
	/* Anchor links must not land with the heading under the sticky header. */
	scroll-margin-top: 110px;
}

body.cos-legal-doc .entry-content .cos-legal__h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

body.cos-legal-doc .entry-content .cos-legal__h3 {
	font-family: var(--cos-font-display);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--cos-ink);
	margin: 1.9em 0 .5em;
	scroll-margin-top: 110px;
}

/* The source wraps headings in <strong>; now that they are real headings the
   extra weight just muddies the type scale. */
body.cos-legal-doc .entry-content .cos-legal__h2 strong,
body.cos-legal-doc .entry-content .cos-legal__h3 strong { font-weight: inherit; }

/* --------------------------------------------------------------------------
   Table of contents

   The entries were already in the document as plain text; the PHP filter turns
   them into anchors. This makes them look like the navigation they now are.
   -------------------------------------------------------------------------- */
body.cos-legal-doc .entry-content .cos-legal__toc-item {
	margin: 0;
}

body.cos-legal-doc .entry-content .cos-legal__toc-item a {
	display: block;
	padding: 9px 14px 9px 12px;
	border-left: 2px solid transparent;
	border-radius: 6px;
	color: var(--cos-text);
	font-weight: 500;
	font-size: .94rem;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

body.cos-legal-doc .entry-content .cos-legal__toc-item a:hover,
body.cos-legal-doc .entry-content .cos-legal__toc-item a:focus-visible {
	background: var(--cos-surface-3);
	border-left-color: var(--cos-yellow);
	color: var(--cos-navy);
}

/* Group the contiguous run of TOC items into one panel. Using adjacent-sibling
   rules rather than a wrapper keeps the PHP filter from having to restructure
   the document. */
body.cos-legal-doc .entry-content .cos-legal__toc-item:first-of-type {
	margin-top: 6px;
	padding-top: 10px;
	border-top: 1px solid var(--cos-line);
}

body.cos-legal-doc .entry-content .cos-legal__toc-item:last-of-type {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--cos-line);
	margin-bottom: 2em;
}

/* --------------------------------------------------------------------------
   Lists — the generator emits deeply nested <ul>s with inline styles.
   -------------------------------------------------------------------------- */
body.cos-legal-doc .entry-content ul {
	margin: 0 0 1.2em;
	padding-left: 1.35em;
}

body.cos-legal-doc .entry-content li {
	margin-bottom: .5em;
	line-height: 1.7;
}

body.cos-legal-doc .entry-content li::marker { color: var(--cos-muted); }

/* --------------------------------------------------------------------------
   The generator leaves a lot of empty <div>s between blocks, which stack into
   uneven vertical gaps.
   -------------------------------------------------------------------------- */
body.cos-legal-doc .entry-content div:empty { display: none; }

body.cos-legal-doc .entry-content strong { color: var(--cos-ink); }

@media (max-width: 991px) {
	body.cos-legal-doc .entry-content { font-size: .97rem; }
}

/* ==========================================================================
   Terms of Service (page 6095) — WPBakery, not Termly.

   Different document, different problem. The ToS already has real <h3>
   headings, so it needs no heading promotion; what it had instead was a legal
   agreement laid out in TWO COLUMNS. On a contract that is genuinely harmful:
   clauses sit side by side, so it is ambiguous whether "Agreement" continues
   to the right or downward, and a contract read in the wrong order is a real
   problem rather than a cosmetic one.

   The builder's source order is already the correct sequential order, so
   collapsing the columns restores it exactly.
   ========================================================================== */

body.cos-legal-doc .entry-content .vc_row-fluid > .vc_col-sm-6,
body.cos-legal-doc .entry-content .wpb_column.vc_col-sm-6 {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
}

/* WPBakery rows use negative margins for their gutters; with one column that
   just pulls the text out of the measure. */
body.cos-legal-doc .entry-content .vc_row.vc_inner {
	margin-left: 0;
	margin-right: 0;
}

body.cos-legal-doc .entry-content .vc_column-inner,
body.cos-legal-doc .entry-content .wpb_column.vc_col-sm-6 > .vc_column-inner {
	padding-left: 0;
	padding-right: 0;
}

/* The promoted page title (see cos_legal_promote_page_title()). The inline
   style is stripped in PHP, so plain rules are enough here. */
body.cos-legal-doc .entry-content h1[data-cos-legal-title] {
	font-family: var(--cos-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 3rem);
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--cos-ink);
	/* No bottom border: the first section heading already draws a top rule, and
	   the two together render as a double line under the title. */
	margin: 0 0 .2em;
}

/* Section headings. `.faq-title` is used on this page only (verified), so
   claiming it cannot affect anything else. The inline text-align/colour the
   builder emits has to be overridden explicitly. */
body.cos-legal-doc .entry-content h3.faq-title {
	font-family: var(--cos-font-display);
	font-size: clamp(1.1rem, 1.9vw, 1.3rem) !important;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.3;
	color: var(--cos-ink) !important;
	text-align: left !important;
	margin: 2.2em 0 .6em;
	padding-top: 1em;
	border-top: 1px solid var(--cos-line);
	scroll-margin-top: 110px;
}

body.cos-legal-doc .entry-content .wpb_text_column:first-child h3.faq-title {
	margin-top: 0;
}

/* The builder wraps each clause in its own text column, which stacks its
   bottom margin on top of the heading spacing above. */
body.cos-legal-doc .entry-content .wpb_text_column,
body.cos-legal-doc .entry-content .wpb_content_element {
	margin-bottom: 0;
}

body.cos-legal-doc .entry-content .wpb_text_column p:last-child { margin-bottom: 1.15em; }

/* ==========================================================================
   Return Policy (post 14226) — bare <strong> headings, promoted in PHP.
   ========================================================================== */

/* The document's own "RETURN POLICY" line duplicates the post title, so it is
   demoted to a label instead of competing as a second heading. */
body.cos-legal-doc .entry-content .cos-legal__doclabel {
	font-family: var(--cos-font-display);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cos-muted);
	margin: 0 0 8px;
}

body.cos-legal-doc .entry-content .cos-legal__updated {
	margin: 0 0 1.6em;
}

body.cos-legal-doc .entry-content .cos-legal__updated span {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--cos-yellow);
	color: #2b0a45;
	font-size: .8rem;
	font-weight: 700;
}

/* The postal return address. Presented as a distinct block because it is the
   one thing on this page a customer has to copy down accurately, and it was
   previously indistinguishable from surrounding prose. */
body.cos-legal-doc .entry-content .cos-legal__address {
	margin: 1.2em 0 1.6em;
	padding: 20px 22px;
	border: 1px solid var(--cos-line-strong);
	border-left: 3px solid var(--cos-yellow);
	border-radius: var(--cos-r);
	background: var(--cos-surface-2);
	font-style: normal;
	line-height: 1.65;
	color: var(--cos-ink);
}

/* Contact links produced by cos_legal_linkify_contacts(). */
body.cos-legal-doc .entry-content a[href^="tel:"] {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ==========================================================================
   Terms of Use (post 14223) — paragraph-level Termly markup.

   The Privacy Policy carries data-custom-class on inner <span>s; this document
   carries it on the <p> itself, so none of the span[data-custom-class] rules
   above reach it. Claim the paragraph form too.
   ========================================================================== */

body.cos-legal-doc .entry-content p[data-custom-class="body_text"],
body.cos-legal-doc .entry-content li[data-custom-class="body_text"] {
	color: var(--cos-text);
}

/* The source sets font-weight:400 inline on every paragraph AND wraps emphasis
   in <b><strong>, so bolded defined terms ("we", "us", "our") were rendering at
   normal weight — the emphasis the contract intends was simply absent. */
body.cos-legal-doc .entry-content p[data-custom-class="body_text"] b,
body.cos-legal-doc .entry-content li[data-custom-class="body_text"] b,
body.cos-legal-doc .entry-content p[data-custom-class="body_text"] strong {
	font-weight: 700;
	color: var(--cos-ink);
}

/* --------------------------------------------------------------------------
   Generated contents panel (cos_legal_tou_structure()).

   Two columns on desktop: 25 entries in one column is a full screen of links
   before the agreement starts, which defeats the point of putting it up top.
   -------------------------------------------------------------------------- */
body.cos-legal-doc .entry-content .cos-legal__toc {
	margin: 0 0 2.6em;
	padding: 22px 24px 18px;
	border: 1px solid var(--cos-line-strong);
	border-radius: var(--cos-r-lg);
	background: var(--cos-surface-2);
}

body.cos-legal-doc .entry-content .cos-legal__toc-title {
	font-family: var(--cos-font-display);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cos-muted);
	margin: 0 0 10px;
	padding: 0;
	border: 0;
}

body.cos-legal-doc .entry-content .cos-legal__toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 26px;
}

body.cos-legal-doc .entry-content .cos-legal__toc-li {
	margin: 0;
	/* Without this a two-column list will split a single entry across the
	   column break, so half a section name appears at the top of column two. */
	break-inside: avoid;
}

body.cos-legal-doc .entry-content .cos-legal__toc-li a {
	display: block;
	padding: 6px 10px 6px 11px;
	border-left: 2px solid transparent;
	border-radius: 6px;
	color: var(--cos-text);
	font-weight: 500;
	font-size: .87rem;
	line-height: 1.45;
	/* The section names are ALL CAPS in the source. At small sizes a run of 25
	   all-caps links is a wall; lowercasing them with small-caps-style tracking
	   keeps the words legible while staying visibly a list of section titles. */
	text-transform: none;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

body.cos-legal-doc .entry-content .cos-legal__toc-li a:hover,
body.cos-legal-doc .entry-content .cos-legal__toc-li a:focus-visible {
	background: #fff;
	border-left-color: var(--cos-yellow);
	color: var(--cos-navy);
}

@media (max-width: 640px) {
	body.cos-legal-doc .entry-content .cos-legal__toc-list { columns: 1; }
	body.cos-legal-doc .entry-content .cos-legal__toc { padding: 18px 16px 14px; }
}

/* --------------------------------------------------------------------------
   The PROHIBITED ACTIVITIES list.

   The source is an <ol> whose items ALSO carry their own typed numbers
   ("1. Systematically retrieve…"), so the browser's markers rendered a second
   set and every line read "1. 1. …". The typed numbers are part of the text and
   are not touched; the generated markers are what has to go.
   -------------------------------------------------------------------------- */
body.cos-legal-doc .entry-content ol:not(.cos-legal__toc-list) {
	list-style: none;
	margin: 0 0 1.4em;
	padding-left: 0;
}

body.cos-legal-doc .entry-content ol:not(.cos-legal__toc-list) > li {
	margin-bottom: .55em;
	padding-left: 1.6em;
	/* Hanging indent so wrapped lines align under the first word rather than
	   under the number. */
	text-indent: -1.6em;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Closing contact block — six one-line paragraphs grouped into one address.
   -------------------------------------------------------------------------- */
body.cos-legal-doc .entry-content .cos-legal__address p {
	margin: 0;
	line-height: 1.65;
}

/* The generator bolded the street, city and country lines but NOT the company
   name above them, so the block rendered with its first line lighter than the
   rest — noise, not emphasis. One weight for the whole address. */
body.cos-legal-doc .entry-content .cos-legal__address p {
	font-weight: 500;
	color: var(--cos-ink);
}

body.cos-legal-doc .entry-content .cos-legal__address p b,
body.cos-legal-doc .entry-content .cos-legal__address p strong {
	font-weight: inherit;
}