/*
Theme Name: Danilov
Theme URI: https://danieldanilov.com
Author: Daniel Danilov
Author URI: https://danieldanilov.com
Description: A lean portfolio block theme in the Loops & Levers look: ink outlines, hard shadows and the yellow, green and red accents.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.11
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: danilov
*/

/* Page-to-page fades in browsers that support it. */
@view-transition { navigation: auto; }

:root {
	--d-line: 3px solid var(--wp--preset--color--ink);
	--d-radius: 22px;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); }
:where(a):focus-visible, :where(button):focus-visible { outline: 3px solid var(--wp--preset--color--yellow); outline-offset: 3px; }

/* Buttons: pill, ink, a hard offset shadow that presses in on hover. */
.wp-element-button, .wp-block-button__link { transition: transform .12s ease, box-shadow .12s ease; }
.wp-element-button:hover, .wp-block-button__link:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--wp--preset--color--yellow); }
.wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink);
	border: var(--d-line); box-shadow: var(--wp--preset--shadow--hard-small);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { box-shadow: 2px 2px 0 var(--wp--preset--color--ink); }

/* Header */
.d-header { border-bottom: 0; }
.d-mark .wp-block-site-title a::before {
	content: "D"; display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 12px;
	border: var(--d-line); border-radius: 50%; background: var(--wp--preset--color--yellow);
	font-size: 15px; vertical-align: middle; transform: translateY(-2px);
}
.d-header .wp-block-navigation a { text-decoration: none; }
.d-header .wp-block-navigation a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Kicker: small mono capitals. */
.is-style-kicker, .d-kicker {
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted);
}
.is-style-kicker-dot::before {
	content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px;
	background: var(--wp--preset--color--green); box-shadow: 0 0 0 4px var(--wp--preset--color--tint-green); vertical-align: 1px;
}

/* Yellow marker under part of a heading: wrap the words in <mark class="d-hl">. */
mark.d-hl { background: linear-gradient(transparent 58%, var(--wp--preset--color--yellow) 58%, var(--wp--preset--color--yellow) 92%, transparent 92%); color: inherit; padding: 0 .08em; }

/* Card: white, ink outline, rounded, hard shadow. */
.is-style-card {
	background: var(--wp--preset--color--white); border: var(--d-line); border-radius: var(--d-radius);
	box-shadow: var(--wp--preset--shadow--hard); overflow: hidden;
}
.is-style-card.has-black-background-color, .is-style-card.has-ink-background-color { color: var(--wp--preset--color--light); }
.is-style-card-flat { background: var(--wp--preset--color--white); border: var(--d-line); border-radius: 18px; overflow: hidden; }

/* Sticker: a small tilted card. */
.is-style-sticker {
	display: inline-block; background: var(--wp--preset--color--white); border: var(--d-line); border-radius: 14px;
	padding: .7rem 1rem; box-shadow: var(--wp--preset--shadow--hard-small); font-weight: 650; line-height: 1.3;
	transform: rotate(-3deg);
}

/* Pills for tags. */
.is-style-pills .wp-block-post-terms__separator { display: none; }
.wp-block-post-terms.is-style-pills { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 600; }
.wp-block-post-terms.is-style-pills a {
	display: inline-block; border: 2px solid currentColor; border-radius: 999px; padding: 4px 12px; text-decoration: none; color: inherit;
}
.d-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.d-pills li { border: 2px solid currentColor; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; line-height: 1.4; }

/* Portrait: circle, ink ring, yellow offset disc behind. */
.is-style-portrait { position: relative; }
.is-style-portrait img { border-radius: 50%; border: var(--d-line); aspect-ratio: 1; object-fit: cover; position: relative; z-index: 1; }
.is-style-portrait::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%; border: var(--d-line);
	background: var(--wp--preset--color--yellow); transform: translate(14px, 14px);
}

/* Hero stickers around the portrait. */
.d-portrait-wrap { position: relative; max-width: 430px; margin-inline: auto; width: 100%; }
.d-portrait-wrap .d-st-1 { position: absolute; left: -8%; bottom: 10%; z-index: 2; }
.d-portrait-wrap .d-st-2 { position: absolute; right: -4%; top: 4%; z-index: 2; transform: rotate(5deg); background: var(--wp--preset--color--tint-green); }
.d-st-label { display: block; font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--grey); font-weight: 400; }

/* Logo row */
.d-logos { border-top: var(--d-line); border-bottom: var(--d-line); }
.d-logos p { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.25rem; color: var(--wp--preset--color--muted); letter-spacing: -.01em; }
.d-logos p.is-style-kicker { font-family: var(--wp--preset--font-family--mono); font-size: 13px; font-weight: 400; color: var(--wp--preset--color--grey); letter-spacing: .08em; }

/* Numbers band */
.d-stats .wp-block-column { border-left: 2px solid #3A3936; padding-left: clamp(1rem, 2vw, 1.75rem); }
.d-stats .wp-block-column:first-child { border-left: 0; padding-left: 0; }
.d-stat-num { font-family: var(--wp--preset--font-family--display); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: 0; }
.d-stats p:not(.d-stat-num) { color: #CFCBC4; }

/* Work cards from the query loop */
.d-cards .wp-block-post { display: flex; }
.d-cards .wp-block-post > .is-style-card { display: flex; flex-direction: column; width: 100%; }
.d-cards .wp-block-post-featured-image { margin: 0; border-bottom: var(--d-line); aspect-ratio: 16/9; overflow: hidden; }
.d-cards .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.d-cards a { text-decoration: none; }
.d-cards .wp-block-post-title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.d-card-body { flex: 1; }
.d-card-feature .wp-block-post-featured-image { border-bottom: 0; border-right: var(--d-line); aspect-ratio: auto; height: 100%; }
.d-card-feature .wp-block-post > .is-style-card > .wp-block-columns { margin: 0; gap: 0; height: 100%; }
@media (max-width: 781px) {
	.d-card-feature .wp-block-post-featured-image { border-right: 0; border-bottom: var(--d-line); aspect-ratio: 16/9; }
}
.d-card-feature .wp-block-post-excerpt__excerpt, .d-cards .wp-block-post-excerpt__excerpt { color: inherit; opacity: .85; }
.wp-block-post-excerpt__more-text { display: none; }

/* Career timeline (custom HTML in the timeline pattern) */
.d-timeline { --cols: 13; font-size: 15px; }
.d-timeline .d-tl-years, .d-timeline .d-tl-row { display: grid; grid-template-columns: 0 repeat(var(--cols), 1fr); align-items: center; }
.d-timeline .d-tl-years { color: var(--wp--preset--color--grey); font-family: var(--wp--preset--font-family--mono); font-size: 12px; margin-bottom: 12px; }
.d-timeline .d-tl-row { border-top: 1.5px dashed #D8D4CC; padding: 12px 0 6px; }
.d-timeline .d-tl-who { grid-column: 1 / -1; grid-row: 1; font-weight: 700; line-height: 1.2; display: flex; gap: 8px; align-items: baseline; }
.d-timeline .d-tl-who small { font-weight: 500; color: var(--wp--preset--color--grey); font-size: 13px; }
.d-timeline .d-tl-bar { grid-row: 2; min-height: 44px; margin: 8px 3px 6px 0; border: 2.5px solid var(--wp--preset--color--ink); border-radius: 16px; font-size: 12px; font-weight: 650; line-height: 1.15; display: flex; align-items: center; padding: 4px 7px; overflow-wrap: break-word; }
@media (max-width: 781px) {
	.d-timeline .d-tl-years { display: none; }
	.d-timeline .d-tl-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 0; }
	.d-timeline .d-tl-years + .d-tl-row { border-top: 0; padding-top: 0; }
	.d-timeline .d-tl-bar { margin: 0; min-height: 40px; justify-content: space-between; }
	.d-timeline .d-tl-bar::after { content: attr(data-y); font-family: var(--wp--preset--font-family--mono); font-size: 11px; font-weight: 500; margin-left: 12px; white-space: nowrap; }
	.d-timeline .d-tl-bar[data-full] { font-size: 0; }
	.d-timeline .d-tl-bar[data-full]::before { content: attr(data-full); font-size: 12px; }
}

/* Big quote */
.d-quote .d-qm { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 10rem; line-height: .7; color: var(--wp--preset--color--yellow); -webkit-text-stroke: 3px var(--wp--preset--color--ink); margin: 0; }

/* Writing feed (RSS block) as cards */
.d-feed .wp-block-rss { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 0; margin: 0; }
.d-feed .wp-block-rss__item { list-style: none; background: var(--wp--preset--color--white); border: var(--d-line); border-radius: 18px; padding: 22px 24px; box-shadow: var(--wp--preset--shadow--hard-small); display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; }
.d-feed .wp-block-rss__item-title a { font-family: var(--wp--preset--font-family--display); font-size: 1.375rem; font-weight: 700; line-height: 1.2; text-decoration: none; letter-spacing: -.01em; }
.d-feed .wp-block-rss__item-title a:hover { text-decoration: underline; }
.d-feed .wp-block-rss__item-publish-date { font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--grey); }
@media (max-width: 781px) { .d-feed .wp-block-rss { grid-template-columns: 1fr; } }

/* Case study summary box */
.d-summary { border: var(--d-line); border-radius: 18px; background: var(--wp--preset--color--white); box-shadow: var(--wp--preset--shadow--hard-small); }
.d-summary h6 { margin: 0 0 4px; }
.d-summary p { margin: 0; font-weight: 600; line-height: 1.4; }

/* Long-form reading inside case studies */
.single .wp-block-post-content > p, .single .wp-block-post-content > ul, .single .wp-block-post-content > ol { font-size: 1.125rem; line-height: 1.7; }
.wp-block-post-content h2 { font-size: var(--wp--preset--font-size--xx-large); margin-top: var(--wp--preset--spacing--50); }
.wp-block-post-content h3 { margin-top: var(--wp--preset--spacing--40); }
.wp-block-post-content figure.wp-block-image img { border: var(--d-line); }
.wp-block-post-content .wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-post-content .wp-block-table th { text-align: left; border-bottom: var(--d-line); }
.wp-block-post-content .wp-block-table td, .wp-block-post-content .wp-block-table th { border-color: #D8D4CC; padding: .6rem .7rem; }

/* Footer CTA band */
.d-cta .wp-block-buttons .wp-block-button__link { box-shadow: var(--wp--preset--shadow--hard-small); }
.d-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { box-shadow: 2px 2px 0 var(--wp--preset--color--ink); }
.d-foot a { text-decoration: none; }
.d-foot a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	* { transition: none !important; }
}

@media (max-width: 600px) { .d-header .wp-block-buttons.d-header-cta { display: none; } }

/* Case study summary box runs wider than the reading column. */
.wp-block-post-content > .d-summary { max-width: min(1000px, 100%) !important; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 781px) { .d-summary .wp-block-column { flex-basis: 100% !important; } }

/* Pull quotes: yellow bar, small grey attribution. */
.wp-block-quote { border-left: 6px solid var(--wp--preset--color--yellow) !important; padding-left: 1.5rem; margin-block: var(--wp--preset--spacing--40); }
.wp-block-quote cite { display: block; margin-top: .75rem; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); font-style: normal; font-weight: 500; color: var(--wp--preset--color--muted); }

/* No share or like buttons on this site. */
.sharedaddy, .jp-relatedposts, #jp-post-flair { display: none !important; }

/* Case study figures: an inline SVG on a white card, caption underneath. Phones scroll wide figures sideways. */
.d-figure { background: var(--wp--preset--color--white); border: var(--d-line); border-radius: 18px; box-shadow: var(--wp--preset--shadow--hard-small); padding: clamp(1rem, 2.5vw, 1.75rem); margin-block: var(--wp--preset--spacing--40); }
.d-figure svg { display: block; width: 100%; height: auto; }
.d-figure figcaption { margin-top: .9rem; font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
@media (max-width: 781px) { .d-figure .d-figure-scroll { overflow-x: auto; } .d-figure .d-figure-scroll svg { min-width: 600px; } }

/* Case study numbers row: big figures with a short line under each. */
.d-casestats { margin-block: var(--wp--preset--spacing--40); }
.d-casestats .wp-block-column { border-left: 3px solid var(--wp--preset--color--ink); padding-left: 1rem; }
.d-casestats .d-stat-num { font-size: clamp(2.25rem, 5vw, 3.25rem); }
.d-casestats p:not(.d-stat-num) { margin-top: .4rem; color: var(--wp--preset--color--muted); line-height: 1.4; }