/*
Theme Name: Andreas Øye – Notes
Theme URI: https://andreasoye.com
Author: Andreas Øye
Description: A calm, editorial block theme for sharing essays, notes and reading. Colours, fonts, templates and patterns are all editable in the Site Editor. Small geometric details (signal dots, sun discs, dials) carry over from the original andreasoye.com illustrations.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: andreasoye-notes
Tags: blog, one-column, block-patterns, full-site-editing, editor-style, custom-colors, wide-blocks
*/

/* ---------- Basics ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:where(.wp-site-blocks) a:focus-visible { outline: 2px solid var(--wp--preset--color--signal); outline-offset: 4px; }
.wp-block-image img, .wp-block-post-featured-image img { border-radius: 4px; }
.wp-block-separator { border: 0; height: 1px; opacity: 1; }
.wp-block-separator.has-line-background-color { background: var(--wp--preset--color--line); }
.wp-block-post-title a:hover, .wp-block-post-title a:focus { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ---------- Signal dot on the site title ---------- */
.wp-block-site-title a { display: inline-flex; align-items: center; gap: 0.75rem; }
.wp-block-site-title a::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--wp--preset--color--signal); flex: none; }

/* ---------- Block style: Eyebrow (paragraph) ---------- */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small) !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wp--preset--color--accent);
}
.is-style-eyebrow::before {
	content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 0.6rem;
	border-radius: 50%; background: var(--wp--preset--color--signal); vertical-align: 0.08em;
}

/* Small mono label (add class "ao-label") */
.ao-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small) !important;
	letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4;
	color: var(--wp--preset--color--accent); padding-top: 0.6rem;
}

/* Dot variants for labels (add as "Additional CSS class") */
.ao-dot::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 0.6rem; border-radius: 50%; vertical-align: -0.05em; background: var(--wp--preset--color--signal); }
.ao-dot--sun::before { background: var(--wp--preset--color--sun); }
.ao-dot--half::before { background: linear-gradient(90deg, var(--wp--preset--color--sun) 50%, #D8D5CD 50%); }
.ao-dot--ink::before { background: var(--wp--preset--color--ink); }
.ao-dot--accent::before { background: var(--wp--preset--color--accent); }

/* ---------- Block style: Sun disc (quote) ---------- */
.wp-block-quote.is-style-sun-disc { padding: 2.5rem 0; border-top: 1px solid var(--wp--preset--color--ink); border-bottom: 1px solid var(--wp--preset--color--ink); margin-block: 4rem; }
.wp-block-quote.is-style-sun-disc::before {
	content: ""; display: block; width: 48px; height: 48px; margin-bottom: 1.5rem; border-radius: 50%;
	background: linear-gradient(90deg, var(--wp--preset--color--sun) 50%, #D8D5CD 50%);
}
.wp-block-quote.is-style-sun-disc p { margin: 0; }
.wp-block-quote cite { display: block; margin-top: 1rem; font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--small); font-style: normal; color: var(--wp--preset--color--muted); }

/* ---------- Block style: Sun arrow (button + read more) ---------- */
.wp-block-button.is-style-sun-arrow .wp-block-button__link,
.wp-block-read-more.is-style-sun-arrow {
	display: inline-flex; align-items: center; gap: 1rem;
	background: transparent !important; color: var(--wp--preset--color--ink) !important;
	padding: 0 !important; font-weight: 600; text-decoration: none;
}
.wp-block-button.is-style-sun-arrow .wp-block-button__link::before,
.wp-block-read-more.is-style-sun-arrow::before {
	content: "→"; display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 52px; height: 52px; border-radius: 50%; font-size: 1.35rem; font-weight: 400;
	background: var(--wp--preset--color--sun); color: var(--wp--preset--color--ink);
	transition: transform .2s ease;
}
.wp-block-button.is-style-sun-arrow .wp-block-button__link:hover::before,
.wp-block-read-more.is-style-sun-arrow:hover::before { transform: translateX(4px); }

/* ---------- Block style: Signal dot (button) ---------- */
.wp-block-button.is-style-signal-dot .wp-block-button__link { display: inline-flex; align-items: center; gap: 0.6rem; }
.wp-block-button.is-style-signal-dot .wp-block-button__link::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--signal); flex: none; }

/* ---------- Topic glyphs (added automatically to category links) ---------- */
.ao-topic { display: inline-flex; align-items: center; gap: 0.6rem; }
.ao-topic::before { content: ""; width: 20px; height: 20px; flex: none; background: url(assets/images/glyph-default.svg) center / contain no-repeat; }
.ao-topic--product-orientation::before { background-image: url(assets/images/glyph-product-orientation.svg); }
.ao-topic--culture-leadership::before { background-image: url(assets/images/glyph-culture-leadership.svg); }
.ao-topic--dynamics-365::before { background-image: url(assets/images/glyph-dynamics-365.svg); }
.ao-topic--data-insight::before { background-image: url(assets/images/glyph-data-insight.svg); }
.is-style-eyebrow .ao-topic::before, .ao-terms-eyebrow .ao-topic::before { width: 26px; height: 26px; }

.ao-terms-eyebrow, .ao-terms-eyebrow a {
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--accent) !important;
}

/* Archive heading glyph */
.ao-archive-glyph { width: 64px; height: 64px; background: url(assets/images/glyph-default.svg) center / contain no-repeat; }
.category-product-orientation .ao-archive-glyph { background-image: url(assets/images/glyph-product-orientation.svg); }
.category-culture-leadership .ao-archive-glyph { background-image: url(assets/images/glyph-culture-leadership.svg); }
.category-dynamics-365 .ao-archive-glyph { background-image: url(assets/images/glyph-dynamics-365.svg); }
.category-data-insight .ao-archive-glyph { background-image: url(assets/images/glyph-data-insight.svg); }

/* ---------- Cover graphic when a post has no featured image ---------- */
.ao-cover { position: relative; margin: 0; background: var(--wp--preset--color--stone); border-radius: 4px; overflow: hidden; }
.ao-cover a { position: absolute; inset: 0; display: block; }
.ao-cover__glyph { position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1; transform: translate(-50%, -50%); background: url(assets/images/cover-default.svg) center / contain no-repeat; filter: drop-shadow(16px 20px 18px rgba(20, 20, 20, 0.14)); }
.ao-cover--product-orientation .ao-cover__glyph { background-image: url(assets/images/glyph-product-orientation.svg); }
.ao-cover--culture-leadership .ao-cover__glyph { background-image: url(assets/images/glyph-culture-leadership.svg); }
.ao-cover--dynamics-365 .ao-cover__glyph { background-image: url(assets/images/glyph-dynamics-365.svg); }
.ao-cover--data-insight .ao-cover__glyph { background-image: url(assets/images/glyph-data-insight.svg); }
.ao-cover__label { position: absolute; left: 1.25rem; bottom: 1rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--muted); }

/* ---------- Writing stream (query loop with class ao-stream) ---------- */
.ao-stream .wp-block-post-template { border-top: 1px solid var(--wp--preset--color--ink); }
.ao-stream .wp-block-post-template > li { margin: 0; border-bottom: 1px solid var(--wp--preset--color--line); transition: background .15s ease; }
.ao-stream .wp-block-post-template > li:hover { background: var(--wp--preset--color--paper-2); }
.ao-stream-row { padding: 1.75rem 0.5rem; }
.ao-stream-row > .ao-stream-meta { flex: 0 0 150px; }
.ao-stream-row > .ao-stream-main { flex: 999 1 420px; min-width: 0; }
.ao-stream-row > .ao-stream-topic { flex: 0 1 210px; }
.ao-stream-meta .wp-block-post-terms, .ao-stream-meta .wp-block-post-terms a {
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--accent);
}

/* ---------- Topic pills (Categories block with class ao-topic-pills) ---------- */
.wp-block-categories.ao-topic-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wp-block-categories.ao-topic-pills li { margin: 0; }
.wp-block-categories.ao-topic-pills a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--ink); border-radius: 999px; text-decoration: none;
	font-size: var(--wp--preset--font-size--small); font-weight: 500;
}
.wp-block-categories.ao-topic-pills a:hover, .wp-block-categories.ao-topic-pills .current-cat a { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }

/* ---------- Topic cards ---------- */
.ao-topic-card { border-top: 1px solid var(--wp--preset--color--ink); padding-top: 1.5rem; }
.ao-topic-card .wp-block-image { margin-bottom: 0.5rem; }
.ao-topic-card a { text-decoration: none; }

/* ---------- Ruled list (list with class ao-ruled) ---------- */
ul.ao-ruled, ol.ao-ruled { list-style: none; padding: 0; border-top: 1px solid var(--wp--preset--color--ink); }
ul.ao-ruled li, ol.ao-ruled li { padding: 1.1rem 0; border-bottom: 1px solid var(--wp--preset--color--line); margin: 0; }

/* ---------- Ruled rows (groups with class ao-rule-row) ---------- */
.ao-rule-row { border-bottom: 1px solid #CFCBC3; padding-block: 2rem; }
.ao-rule-top { border-top: 1px solid var(--wp--preset--color--ink); }

/* ---------- Portrait with decoration ---------- */
.ao-portrait-decor { position: relative; }
.ao-portrait-decor::after { content: ""; position: absolute; right: -28px; bottom: -28px; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--wp--preset--color--sun); box-shadow: 8px 12px 18px rgba(20, 20, 20, 0.12); }
.ao-portrait-decor::before { content: ""; position: absolute; left: -10px; top: 24px; width: 20px; height: 20px; border-radius: 50%; background: var(--wp--preset--color--signal); z-index: 1; }
.ao-avatar img { border-radius: 50%; }

/* ---------- Footer dots ---------- */
.ao-dots { width: 46px; height: 10px; flex: none; }
.ao-dots::before {
	content: ""; display: block; width: 10px; height: 10px; border-radius: 50%;
	background: var(--wp--preset--color--signal);
	box-shadow: 18px 0 0 var(--wp--preset--color--sun), 36px 0 0 var(--wp--preset--color--accent);
}

/* ---------- Small screens ---------- */
@media (max-width: 781px) {
	.ao-stream-row > .ao-stream-meta, .ao-stream-row > .ao-stream-topic { flex-basis: 100%; }
	.ao-portrait-decor::after { right: -12px; bottom: -12px; }
}