/* ==========================================================================
   WP Mojster — Default Page styles (enqueued only on Pages using the
   Default template: legal pages and simple informational copy).

   Content-first, not conversion-first: a compact paper hero (the contact
   hero reduced to breadcrumb + H1) above one centred reading column of
   editor-authored content. Everything is scoped under .page-default so it
   can never reach the service, contact, plugin, blog or front-page
   templates.

   The theme dequeues wp-block-library / global-styles, so this sheet is the
   ONLY presentation editor content gets. It therefore covers the semantic
   elements a real Page actually produces — headings, lists, links, quotes,
   figures, tables, code — and stops there; it does not try to recreate the
   block stylesheet.

   Reading column = --measure-max (720px) + the container's 24px gutters.
   Breakpoints: 640 / 768 / 1024 only (tokens.css rule) — 768 is the only
   one this page needs.
   ========================================================================== */

/* ==========================================================================
   Hero — plain paper: breadcrumb + H1, closed by a hairline so long copy
   starts against a clear edge.
   ========================================================================== */
.page-default .page-hero {
	padding: 40px 0 32px;
	background: var(--color-paper);
	border-bottom: 1px solid var(--color-border);
}

/* Hero and body share one column, so the crumb, the H1 and the first
   paragraph all hang off the same left edge. */
.page-default .page-hero .inner,
.page-default .page-body {
	max-width: calc(var(--measure-max) + (var(--space-6) * 2));
}

.page-default .crumbs {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: 16px;
}
.page-default .crumbs a {
	color: var(--color-primary);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	transition: color var(--transition-fast);
}
.page-default .crumbs a:hover { color: var(--color-primary-strong); }
.page-default .crumbs a:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
	border-radius: 2px;
}
.page-default .crumbs .sep { margin: 0 8px; color: var(--color-border); }
.page-default .crumbs [aria-current] { font-weight: 500; }

.page-default .page-hero h1 {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.18;
	/* Long Slovenian legal titles: never push the page sideways. */
	overflow-wrap: break-word;
	text-wrap: balance;
}

@media (min-width: 768px) {
	.page-default .page-hero { padding: 64px 0 40px; }
	.page-default .crumbs { margin-bottom: 20px; }
	.page-default .page-hero h1 { font-size: var(--text-2xl); }
}

/* ==========================================================================
   Body — the reading column. Padding only, never a min-height: a two-line
   legal stub must look short, not padded out to a fake full screen.
   ========================================================================== */
.page-default .page-body {
	padding-top: var(--space-12);
	padding-bottom: var(--section-pad-mobile);
}

@media (min-width: 768px) {
	.page-default .page-body {
		padding-top: var(--space-16);
		padding-bottom: var(--section-pad);
	}
}

/* ==========================================================================
   Entry content — semantic defaults for editor-authored copy.
   ========================================================================== */
.page-default .entry-content {
	color: var(--color-text);
	font-size: var(--text-base);
	line-height: var(--leading-body);
	/* A pasted URL or a long unbroken string wraps instead of overflowing. */
	overflow-wrap: break-word;
}

/* ---- Headings: the H1 is in the hero, so content starts at H2. ---- */
.page-default .entry-content h2,
.page-default .entry-content h3,
.page-default .entry-content h4 {
	color: var(--color-ink);
	line-height: var(--leading-heading);
	overflow-wrap: break-word;
}
.page-default .entry-content h2 {
	font-size: var(--text-lg);
	font-weight: 700;
	margin-top: var(--space-12);
	margin-bottom: var(--space-4);
}
.page-default .entry-content h3 {
	font-size: var(--text-md);
	font-weight: 600;
	margin-top: var(--space-8);
	margin-bottom: var(--space-3);
}
.page-default .entry-content h4 {
	font-size: var(--text-base);
	font-weight: 600;
	margin-top: var(--space-6);
	margin-bottom: var(--space-2);
}
/* No runaway gap when a heading opens the page or directly follows another. */
.page-default .entry-content > :first-child { margin-top: 0; }
.page-default .entry-content h2 + h3,
.page-default .entry-content h3 + h4 { margin-top: var(--space-4); }

@media (min-width: 768px) {
	.page-default .entry-content h2 { font-size: var(--text-xl); }
	.page-default .entry-content h3 { font-size: var(--text-lg); }
	.page-default .entry-content h4 { font-size: var(--text-md); }
}

/* ---- Paragraphs ---- */
.page-default .entry-content p { margin-bottom: var(--space-4); }
.page-default .entry-content > :last-child { margin-bottom: 0; }

/* ---- Links: underlined, so the state never rests on colour alone. ---- */
.page-default .entry-content a {
	color: var(--color-primary);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	transition: color var(--transition-fast);
}
.page-default .entry-content a:hover { color: var(--color-primary-strong); }
.page-default .entry-content a:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
	border-radius: 2px;
}

/* ---- Lists ----
   global.css kills markers on ul[class]/ol[class], and the editor emits
   <ul class="wp-block-list"> — so markers must be restored here or every
   editor list silently loses its bullets. */
.page-default .entry-content ul,
.page-default .entry-content ol {
	margin-bottom: var(--space-4);
	padding-left: var(--space-6);
}
.page-default .entry-content ul,
.page-default .entry-content ul[class] { list-style: disc; }
.page-default .entry-content ol,
.page-default .entry-content ol[class] { list-style: decimal; }
.page-default .entry-content li { margin-bottom: var(--space-2); }
.page-default .entry-content li:last-child { margin-bottom: 0; }
.page-default .entry-content li::marker { color: var(--color-text-muted); }

/* Nested lists: a second marker shape, tighter, no double bottom gap. */
.page-default .entry-content li > ul,
.page-default .entry-content li > ol {
	margin-top: var(--space-2);
	margin-bottom: 0;
}
.page-default .entry-content li > ul,
.page-default .entry-content li > ul[class] { list-style: circle; }
.page-default .entry-content li > ol,
.page-default .entry-content li > ol[class] { list-style: lower-alpha; }
.page-default .entry-content li li > ul,
.page-default .entry-content li li > ul[class] { list-style: square; }

/* ---- Inline treatments ---- */
.page-default .entry-content strong,
.page-default .entry-content b { font-weight: 600; color: var(--color-ink); }
.page-default .entry-content em,
.page-default .entry-content i { font-style: italic; }
.page-default .entry-content small { font-size: var(--text-sm); color: var(--color-text-muted); }
.page-default .entry-content mark {
	background: var(--color-primary-tint);
	color: var(--color-primary-strong);
	padding: 0.02em 0.14em;
	border-radius: 4px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
/* An abbreviation with a title carries a hint that is not colour-only. */
.page-default .entry-content abbr[title] {
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	cursor: help;
}
.page-default .entry-content sup,
.page-default .entry-content sub { font-size: var(--text-xs); line-height: 0; }

/* ---- Blockquote — the petrol inset rail used by the FAQ signature. ---- */
.page-default .entry-content blockquote {
	margin: var(--space-8) 0;
	padding-left: var(--space-6);
	border-left: 3px solid var(--color-primary);
	color: var(--color-text-muted);
}
.page-default .entry-content blockquote p { margin-bottom: var(--space-3); }
.page-default .entry-content blockquote > :last-child { margin-bottom: 0; }
.page-default .entry-content blockquote cite,
.page-default .entry-content cite {
	display: block;
	font-size: var(--text-sm);
	font-style: normal;
	font-weight: 500;
	color: var(--color-text);
}
.page-default .entry-content blockquote cite::before { content: "— "; }

/* ---- Rule ---- */
.page-default .entry-content hr {
	height: 0;
	margin: var(--space-12) 0;
	border: 0;
	border-top: 1px solid var(--color-border);
}

/* ---- Media: images, figures, captions ---- */
.page-default .entry-content img {
	max-width: 100%;
	height: auto;      /* keeps the intrinsic ratio — no layout shift */
	display: block;
	border-radius: var(--radius-card);
}
.page-default .entry-content figure {
	margin: var(--space-8) 0;
	max-width: 100%;
}
.page-default .entry-content figcaption,
.page-default .entry-content .wp-caption-text {
	margin-top: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* ---- Tables ----
   The block editor wraps tables in <figure class="wp-block-table">; a
   classic-editor table arrives bare. Both get a horizontal scroll box, so a
   wide rate table scrolls inside the column instead of widening the page. */
.page-default .entry-content .wp-block-table { overflow-x: auto; }
.page-default .entry-content > table,
.page-default .entry-content > .wp-block-table > table { display: block; overflow-x: auto; }
.page-default .entry-content table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
	margin-bottom: var(--space-4);
}
.page-default .entry-content th,
.page-default .entry-content td {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}
.page-default .entry-content th {
	background: var(--color-surface);
	color: var(--color-ink);
	font-weight: 600;
}
.page-default .entry-content caption {
	caption-side: bottom;
	padding-top: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-align: left;
}

/* ---- Code ---- */
.page-default .entry-content code,
.page-default .entry-content kbd,
.page-default .entry-content samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	padding: 0.1em 0.35em;
	/* A long path or token breaks rather than escaping the column. */
	overflow-wrap: anywhere;
}
.page-default .entry-content pre {
	margin-bottom: var(--space-4);
	padding: var(--space-4);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	overflow-x: auto;          /* long lines scroll in the block, not the page */
	font-size: var(--text-sm);
	line-height: 1.5;
}
.page-default .entry-content pre code {
	background: none;
	border: 0;
	padding: 0;
	font-size: inherit;
	overflow-wrap: normal;     /* inside <pre>, scroll instead of breaking */
}

/* ---- WordPress alignment classes — only what default content needs. ---- */
.page-default .entry-content .aligncenter {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.page-default .entry-content img.aligncenter { margin-left: auto; margin-right: auto; }
.page-default .entry-content .alignleft {
	float: left;
	margin: 0 var(--space-6) var(--space-4) 0;
	max-width: 50%;
}
.page-default .entry-content .alignright {
	float: right;
	margin: 0 0 var(--space-4) var(--space-6);
	max-width: 50%;
}
.page-default .entry-content::after { content: ""; display: block; clear: both; }
/* Wide/full have no wider canvas to expand into here — the reading column
   is the point — so they stay inside it rather than breaking the measure. */
.page-default .entry-content .alignwide,
.page-default .entry-content .alignfull { max-width: 100%; }

/* Floats are a desktop affordance; at phone width they crush the text. */
@media (max-width: 639px) {
	.page-default .entry-content .alignleft,
	.page-default .entry-content .alignright {
		float: none;
		margin: var(--space-6) 0;
		max-width: 100%;
	}
}

/* ==========================================================================
   wp_link_pages() — manually paginated Pages only (<!--nextpage-->).
   ========================================================================== */
.page-default .page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-12);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-sm);
}
.page-default .page-links-title {
	margin-right: var(--space-2);
	font-weight: 500;
	color: var(--color-text-muted);
}
.page-default .page-links .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-btn);
	font-weight: 500;
}
/* The current page is not a link: WordPress wraps it in
   <span class="post-page-numbers current" aria-current="page">. Target that
   wrapper — the filled chip is what marks the current page, so the state
   never rests on text colour alone. */
.page-default .page-links [aria-current="page"] .page-link {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}
.page-default .page-links a {
	text-decoration: none;
	color: var(--color-primary);
	border-radius: var(--radius-btn);
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.page-default .page-links a:hover .page-link {
	background: var(--color-primary-tint);
	border-color: var(--color-primary);
}
.page-default .page-links a:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}