/*
Theme Name: Nazmul Robin
Theme URI: https://nazmulrobin.com/blog/
Author: Nazmul Hasan Robin
Description: Child theme for the nazmulrobin.com blog.
Template: twentytwentyfive
Version: 1.2.4
Requires at least: 6.7
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nazmulrobin
*/

/* Colours, fonts and sizes are in theme.json. This file holds what theme.json cannot say:
   the dark colours, the page layout and the look of lists of posts. */

/* Dark colours: used when the reader's system is dark, or when they chose dark with the switch. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--base: #11161C;
		--wp--preset--color--contrast: #E8EDF2;
		--wp--preset--color--accent-2: #7BDB4F;
		--wp--preset--color--accent-3: #0B0F14;
		--wp--preset--color--accent-4: #A3AFBB;
		--wp--preset--color--accent-5: #182029;
		--wp--preset--color--accent-6: #2A3440;
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--wp--preset--color--base: #11161C;
	--wp--preset--color--contrast: #E8EDF2;
	--wp--preset--color--accent-2: #7BDB4F;
	--wp--preset--color--accent-3: #0B0F14;
	--wp--preset--color--accent-4: #A3AFBB;
	--wp--preset--color--accent-5: #182029;
	--wp--preset--color--accent-6: #2A3440;
	color-scheme: dark;
}

:root {
	--nr-mono: var(--wp--preset--font-family--plex-mono);
	--nr-muted: var(--wp--preset--color--accent-4);
	--nr-line: var(--wp--preset--color--accent-6);
	--nr-accent: var(--wp--preset--color--accent-2);
}

/* Page frame */
.nr-wrap { box-sizing: border-box; margin-inline: auto; max-width: 1080px; padding-inline: 24px; width: 100%; }
.nr-narrow { max-width: 760px; }
.wp-site-blocks > * { margin-block-start: 0; }
.nr-wrap > *, .nr-main > *, .nr-side > * { margin-block: 0; }

.nr-label, .nr-eyebrow { color: var(--nr-muted); font-family: var(--nr-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.nr-eyebrow { color: var(--nr-accent); font-size: 0.8rem; letter-spacing: 0; text-transform: none; }
.nr-muted { color: var(--nr-muted); }

/* Header */
.nr-header { border-bottom: 1px solid var(--nr-line); }
.nr-header__row { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 36px; min-height: 68px; }
.nr-logo a { align-items: center; color: inherit; display: inline-flex; gap: 10px; min-height: 44px; text-decoration: none; }
.nr-logo a::before { background: var(--wp--preset--color--accent-1); border-radius: 50%; content: ""; height: 10px; width: 10px; }
.nr-nav { flex: 1 1 auto; }
.nr-nav.wp-block-navigation .wp-block-navigation-item__content { color: var(--nr-muted); padding-block: 10px; }
.nr-nav.wp-block-navigation .wp-block-navigation-item__content:hover,
.home .nr-nav.wp-block-navigation a[href$="/blog/"],
.category-wordpress .nr-nav.wp-block-navigation a[href*="/category/wordpress/"],
.category-claude-code .nr-nav.wp-block-navigation a[href*="/category/claude-code/"] { color: var(--nr-accent); }
.nr-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
/* As specific as core's rule, which makes the dropdown white with black text. */
.nr-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { background-color: var(--wp--preset--color--base); border-color: var(--nr-line); border-radius: 8px; color: var(--wp--preset--color--contrast); }
.nr-tools { align-items: center; display: flex; font-size: 0.95rem; gap: 4px; }
.nr-tools a, .nr-tools button { align-items: center; background: none; border: 0; color: var(--nr-muted); cursor: pointer; display: inline-flex; justify-content: center; min-height: 44px; min-width: 44px; padding: 0; text-decoration: none; }
.nr-tools a:hover, .nr-tools button:hover { color: var(--nr-accent); }
.nr-tools .nr-tools__site { padding-left: 12px; }
@media (max-width: 599px) {
	/* One row on a phone: the name, then search and the switch, then the menu button. */
	.nr-header__row { flex-wrap: nowrap; gap: 4px 12px; }
	.nr-nav { flex: 0 0 auto; order: 3; }
	.nr-tools { margin-left: auto; }
	.nr-tools .nr-tools__site { display: none; }
	.nr-item__meta .nr-series { flex-basis: 100%; margin-left: 0; }
}

/* Intro of the home page, an archive or a search */
.nr-intro { display: flex; flex-direction: column; gap: 18px; padding-block: 64px 48px; }
.nr-intro h1 { margin: 0; max-width: 760px; }
.nr-intro h1.wp-block-site-tagline { font-size: clamp(2rem, 4.2vw, 2.75rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
.nr-intro__lead, .nr-intro .wp-block-term-description { color: var(--nr-muted); font-size: 1.125rem; margin: 0; max-width: 620px; }
.nr-intro .wp-block-term-description p { margin: 0; }
.nr-intro .wp-block-search { max-width: 520px; }
.nr-intro--author { align-items: center; flex-direction: row; flex-wrap: wrap; gap: 28px; }
.nr-intro--author > .wp-block-group { display: flex; flex: 1 1 420px; flex-direction: column; gap: 12px; min-width: 0; }
.nr-intro p:empty, .nr-item p:empty, .nr-card p:empty, .nr-crumbs p:empty, .nr-meta p:empty { display: none; }

.wp-block-search__input { background: var(--wp--preset--color--accent-5); border: 1px solid var(--nr-muted); border-radius: 8px; color: inherit; font: inherit; min-height: 46px; padding: 0 14px; }
.wp-block-search .wp-block-search__button { background: transparent; border: 1px solid var(--nr-muted); border-radius: 8px; color: inherit; font-size: 0.95rem; font-weight: 500; margin-left: 8px; min-height: 46px; padding: 0 18px; }

/* Two columns: the posts and the sidebar */
.nr-columns { align-items: start; display: grid; gap: 64px; grid-template-columns: minmax(0, 1fr) 260px; padding-bottom: 72px; }
@media (max-width: 860px) { .nr-columns { grid-template-columns: minmax(0, 1fr); gap: 48px; } }
.nr-main > .nr-label { border-bottom: 1px solid var(--nr-line); padding-bottom: 14px; }

/* A post in a list */
.nr-list .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.nr-list .wp-block-post-template > li { margin: 0; }
.nr-item { border-bottom: 1px solid var(--nr-line); display: flex; flex-direction: column; gap: 10px; padding-block: 28px; }
.nr-item > * { margin: 0; }
.nr-item__meta { align-items: center; color: var(--nr-muted); display: flex; flex-wrap: wrap; font-family: var(--nr-mono); font-size: 0.8rem; gap: 4px 12px; }
.nr-item__meta > * { margin: 0; }
.nr-item__meta > * + *::before { content: "/"; margin-right: 12px; }
.nr-item__meta a { color: inherit; text-decoration: none; }
.nr-item__meta .nr-series { color: var(--nr-accent); margin-left: auto; }
.nr-item__meta .nr-series::before { content: none; }
.nr-item .wp-block-post-title { font-size: 1.375rem; letter-spacing: -0.01em; line-height: 1.3; }
.nr-item .wp-block-post-title a { color: inherit; text-decoration: none; }
.nr-item .wp-block-post-title a:hover { text-decoration: underline; }
.nr-item .wp-block-post-excerpt { color: var(--nr-muted); font-size: 1rem; }
.nr-item .wp-block-post-excerpt p { margin: 0; }
.nr-item--compact { gap: 4px; padding-block: 20px; }
.nr-item--compact .wp-block-post-title { font-size: 1.19rem; }
.nr-list .wp-block-query-pagination { margin-top: 28px; }

/* Posts as cards: the home page and the archives */
.nr-list--cards .wp-block-post-template { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.nr-columns .nr-list--cards { margin-top: 24px; }
.nr-card { border: 1px solid var(--nr-line); border-radius: 12px; box-sizing: border-box; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.nr-card > *, .nr-card__top > *, .nr-card__body > *, .nr-card__series > * { margin: 0; }
.nr-card__top { align-items: baseline; background: var(--wp--preset--color--accent-5); border-bottom: 1px solid var(--nr-line); color: var(--nr-muted); display: flex; flex-wrap: wrap; font-family: var(--nr-mono); font-size: 0.8rem; gap: 4px 12px; justify-content: space-between; padding: 16px 24px; }
.nr-card__top a { color: var(--nr-accent); text-decoration: none; }
.nr-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; padding: 24px; }
.nr-card .wp-block-post-date { color: var(--nr-muted); font-family: var(--nr-mono); font-size: 0.8rem; }
.nr-card .wp-block-post-title { font-size: 1.19rem; letter-spacing: -0.01em; line-height: 1.3; }
.nr-card .wp-block-post-title a { color: inherit; text-decoration: none; }
.nr-card .wp-block-post-title a:hover { text-decoration: underline; }
.nr-card .wp-block-post-excerpt { color: var(--nr-muted); font-size: 0.95rem; }
.nr-card .wp-block-post-excerpt p { margin: 0; }
.nr-card .wp-block-read-more { display: none; }
.nr-card__series { color: var(--nr-accent); font-family: var(--nr-mono); font-size: 0.8rem; padding: 0 24px 24px; }
.nr-card__series .nr-label { display: none; }
.nr-card__series:has(.nr-series:empty) { display: none; }

/* Home: a slim bar with the title and the search, then the newest post as a wide card */
.nr-hero { background: var(--wp--preset--color--accent-5); border-bottom: 3px solid var(--wp--preset--color--accent-1); }
.nr-hero__inner { display: flex; flex-direction: column; gap: 20px; padding-block: 36px; }
.nr-hero__row { align-items: center; display: flex; flex-wrap: wrap; gap: 20px 48px; justify-content: space-between; }
.nr-hero__row > *, .nr-hero__title > *, .nr-browse > * { margin: 0; }
.nr-hero__title { display: flex; flex: 1 1 420px; flex-direction: column; gap: 8px; min-width: 0; }
.nr-hero h1 { font-size: clamp(1.75rem, 3.6vw, 2.25rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.nr-hero__lead { color: var(--nr-muted); font-size: 1.06rem; }
.nr-hero .wp-block-search { flex: 1 1 360px; min-width: 0; }
.nr-hero .wp-block-search__input { background: var(--wp--preset--color--base); min-height: 50px; }
.nr-hero .wp-block-search .wp-block-search__button { background: var(--nr-accent); border-color: var(--nr-accent); color: var(--wp--preset--color--base); font-weight: 600; min-height: 50px; }
.nr-browse { align-items: center; display: flex; flex-wrap: wrap; font-size: 0.95rem; gap: 8px 10px; }
.nr-browse__label { color: var(--nr-muted); padding-right: 4px; }
.nr-browse ul { display: contents; list-style: none; }
.nr-browse .cat-item-none { display: none; }
.nr-browse li, .nr-browse__link a { align-items: center; background: var(--wp--preset--color--base); border: 1px solid var(--nr-line); border-radius: 999px; box-sizing: border-box; color: var(--nr-muted); display: inline-flex; font-size: 0.85rem; gap: 6px; min-height: 44px; padding: 0 16px; }
.nr-browse a { color: var(--wp--preset--color--contrast); font-size: 0.95rem; text-decoration: none; }
.nr-browse a:hover { color: var(--nr-accent); }
.nr-cards { padding-block: 40px 72px; }
@media (min-width: 700px) {
	.home:not(.paged) .nr-cards .wp-block-post-template > li:first-child { grid-column: 1 / -1; }
	.home:not(.paged) .nr-cards li:first-child .nr-card { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto 1fr; }
	.home:not(.paged) .nr-cards li:first-child .nr-card:has(.nr-series:empty) { grid-template-columns: minmax(0, 1fr); }
	.home:not(.paged) .nr-cards li:first-child .nr-card__top { background: none; border: 0; grid-column: 1; justify-content: flex-start; padding: 40px 40px 0; }
	.home:not(.paged) .nr-cards li:first-child .nr-card__top > * + *::before { content: "/"; margin-right: 12px; }
	.home:not(.paged) .nr-cards li:first-child .nr-card__body { gap: 14px; grid-column: 1; padding: 14px 40px 40px; }
	.home:not(.paged) .nr-cards li:first-child .wp-block-post-title { font-size: 1.875rem; letter-spacing: -0.015em; line-height: 1.25; }
	.home:not(.paged) .nr-cards li:first-child .wp-block-post-excerpt { font-size: 1rem; }
	.home:not(.paged) .nr-cards li:first-child .wp-block-read-more { align-items: center; align-self: flex-start; color: var(--nr-accent); display: inline-flex; font-size: 0.95rem; font-weight: 600; min-height: 44px; text-decoration: none; }
	.home:not(.paged) .nr-cards li:first-child .wp-block-read-more::after { content: "\2192"; margin-left: 8px; }
	.home:not(.paged) .nr-cards li:first-child .nr-card__series:not(:has(.nr-series:empty)) { background: var(--wp--preset--color--accent-5); border-left: 1px solid var(--nr-line); display: flex; flex-direction: column; gap: 10px; grid-column: 2; grid-row: 1 / span 2; justify-content: center; padding: 40px; }
	.home:not(.paged) .nr-cards li:first-child .nr-card__series .nr-label { display: block; }
	.home:not(.paged) .nr-cards li:first-child .nr-series { color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--plex-sans, inherit); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
}

/* Sidebar */
.nr-side { display: flex; flex-direction: column; gap: 40px; }
.nr-side__block { display: flex; flex-direction: column; gap: 10px; }
.nr-side__block > * { margin: 0; }
.nr-side__block p { color: var(--nr-muted); font-size: 0.94rem; }
.nr-side__block .nr-side__name { color: inherit; font-size: 1rem; font-weight: 600; }
.nr-author { align-items: center; display: flex; gap: 12px; }
.nr-author > * { margin: 0; }
.nr-avatar img { border: 1px solid var(--nr-line); border-radius: 50%; display: block; height: 48px; object-fit: cover; width: 48px; }
.nr-avatar--large img { height: 96px; width: 96px; }
.nr-side__list, .nr-side .wp-block-categories { border-top: 1px solid var(--nr-line); list-style: none; margin: 0; padding: 0; }
.nr-side__list li, .nr-side .wp-block-categories li { align-items: center; border-bottom: 1px solid var(--nr-line); color: var(--nr-muted); display: flex; font-family: var(--nr-mono); font-size: 0.8rem; gap: 12px; justify-content: space-between; min-height: 46px; }
.nr-side__list a, .nr-side .wp-block-categories a { color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--plex-sans); font-size: 0.94rem; text-decoration: none; }
.nr-side__list a:hover, .nr-side .wp-block-categories a:hover { color: var(--nr-accent); }
.nr-link .wp-block-button__link, .nr-link a { background: none; border-radius: 0; color: var(--nr-accent); font-size: 0.94rem; font-weight: 500; padding: 0; }
.nr-link .wp-block-button__link:hover { text-decoration: underline; }

/* A single post */
.nr-post-head { display: flex; flex-direction: column; gap: 16px; padding-block: 64px 36px; }
.nr-post-head > * { margin: 0; }
.nr-crumbs, .nr-meta, .nr-byline, .nr-stats { align-items: center; color: var(--nr-muted); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.nr-crumbs > *, .nr-meta > *, .nr-meta__lines > *, .nr-byline > *, .nr-stats > * { margin: 0; }
.nr-crumbs { font-family: var(--nr-mono); font-size: 0.8rem; }
.nr-crumbs a { color: inherit; text-decoration: none; }
.nr-crumbs .nr-series { color: var(--nr-accent); }
.nr-crumbs .nr-series::before { color: var(--nr-muted); content: "/"; margin-right: 12px; }
/* The avatar beside two lines: who wrote it and when, then the reading time and the numbers. */
.nr-meta { flex-wrap: nowrap; font-size: 0.94rem; }
.nr-meta__lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nr-byline, .nr-stats { gap: 2px 10px; }
.nr-stats { font-size: 0.85rem; }
.nr-byline > * + *::before, .nr-stats > * + *::before { content: "·"; margin-right: 10px; }
.nr-meta .wp-block-avatar img { border: 1px solid var(--nr-line); border-radius: 50%; display: block; }
.nr-meta .wp-block-post-author-name a { color: var(--wp--preset--color--contrast); font-weight: 500; text-decoration: none; }
.nr-meta .wp-block-post-date { color: inherit; font-size: inherit; }
.nr-post { font-size: 1.125rem; line-height: 1.75; padding-bottom: 8px; }
.nr-post > * { margin-block: 0 22px; }
.nr-post > h2 { margin-top: 44px; }
.nr-post > h3 { margin-top: 32px; }
.nr-post li + li { margin-top: 6px; }
.nr-post pre { position: relative; }
.nr-post pre code { font-family: var(--nr-mono); }
.nr-post pre.nr-has-copy { padding-top: 2.6rem; }
.nr-copy { background: none; border: 0; color: #A3AFBB; cursor: pointer; font: inherit; font-family: var(--wp--preset--font-family--plex-sans); font-size: 0.85rem; min-height: 40px; padding: 0 14px; position: absolute; right: 0; top: 0; }
.nr-copy:hover { color: #FFFFFF; }
.nr-tags { font-family: var(--nr-mono); padding-block: 4px 28px; }
.nr-tags a { color: var(--nr-muted); display: inline-block; margin-right: 16px; padding-block: 10px; text-decoration: none; }
.nr-tags a::before { content: "#"; }
.nr-tags .wp-block-post-terms__separator { display: none; }
.nr-author-box { align-items: center; background: var(--wp--preset--color--accent-5); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 48px; padding: 24px; }
.nr-author-box > * { margin: 0; }
.nr-author-box > .wp-block-group { display: flex; flex: 1 1 320px; flex-direction: column; gap: 4px; min-width: 0; }
.nr-author-box > .wp-block-group > * { margin: 0; }
.nr-author-box .wp-block-avatar img { border: 1px solid var(--nr-line); border-radius: 50%; display: block; }
.nr-author-box .wp-block-post-author-name { font-size: 1.06rem; font-weight: 600; }
.nr-author-box .wp-block-post-author-name a { color: inherit; text-decoration: none; }
.nr-author-box .wp-block-post-author-biography { color: var(--nr-muted); font-size: 0.94rem; }
.nr-comments, .nr-page { padding-bottom: 72px; }
.nr-comments .comment-notes { border-left: 2px solid var(--wp--preset--color--accent-1); color: var(--nr-muted); font-size: 0.94rem; padding-left: 14px; }
.nr-comments input:not([type="submit"]):not([type="checkbox"]), .nr-comments textarea { background: var(--wp--preset--color--accent-5); border: 1px solid var(--nr-muted); border-radius: 8px; color: inherit; }

/* Search */
.nr-search { padding-bottom: 72px; }
.nr-search .nr-list { border-top: 1px solid var(--nr-line); }
.nr-empty { color: var(--nr-muted); display: flex; flex-direction: column; gap: 12px; padding-top: 28px; }
.nr-empty > * { margin: 0; }
.nr-empty__links { display: flex; flex-wrap: wrap; gap: 0 20px; list-style: none; padding: 0; }
.nr-empty__links a { display: inline-block; padding-block: 10px; }

/* Footer */
.nr-footer { border-top: 1px solid var(--nr-line); color: var(--nr-muted); font-size: 0.875rem; }
.nr-footer__row { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; padding-block: 14px; }
.nr-footer__row > * { margin: 0; }
.nr-footer__links { display: flex; flex-wrap: wrap; gap: 0 24px; list-style: none; padding: 0; }
.nr-footer__links a { color: inherit; display: inline-block; padding-block: 12px; text-decoration: none; }
.nr-footer__links a:hover { color: var(--nr-accent); }