/*
Theme Name: Cuaderno
Description: Twenty Twelve as a squared notebook: faint cyan grid, blue ballpen ink, handwriting (Caveat, Kalam; self-hosted).
Template: twentytwelve
Version: 1.46
Author: Rafa Vargas
Author URI: https://rafavargas.me/
Text Domain: cuaderno
*/

@font-face { font-family: "Caveat"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/caveat-500.woff2) format("woff2"); }
@font-face { font-family: "Kalam"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/kalam-400.woff2) format("woff2"); }
@font-face { font-family: "Kalam"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/kalam-700.woff2) format("woff2"); }

:root {
	--ink: #1b2a6b;
	--ink-light: #2f4aa0;
	--grid: #dff2f6;
	--paper: #fdfdfb;
	--margin-line: #f4b8cc;
	--hand: "Caveat", cursive;
	--pen: "Kalam", cursive;
}

/* Paper: the page keeps Twenty Twelve's gray background and width */
.site {
	background-color: var(--paper);
	/* magenta margin line on the left, then the grid */
	background-image: linear-gradient(90deg, transparent var(--margin-x), var(--margin-line) var(--margin-x), var(--margin-line) calc(var(--margin-x) + 2px), transparent calc(var(--margin-x) + 2px)), linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 100% 100%, 13px 13px, 13px 13px;
	/* the margin line sits on a grid line (2nd on phones, 4th from 600px),
	   and the text starts one square to its right */
	--margin-x: 26px;
}
body .site { padding-left: 39px; }
@media screen and (min-width: 600px) {
	.site { --margin-x: 52px; }
	body .site { padding-left: 65px; }
}
body, body .site, .site-content article {
	font-family: var(--pen);
	color: var(--ink);
}
/* Form controls stay plain sans-serif (system font, nothing downloaded) */
input, textarea, select, button, #respond, #respond *, .widget-title, .wp-block-search__label, .site-info, .site-info a, .entry-meta, .entry-meta a, .edit-link, .comments-link, .navigation, .navigation a, .nav-previous, .nav-next, .post-navigation, .comment-meta, .comment-meta a, .reply, .reply a, .wp-block-search__button, .wp-block-button__link, input[type="submit"] {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.entry-content, .entry-summary, .comment-content, .widget-area .widget {
	font-size: 18px;
	line-height: 26px;
}
.entry-content p, .entry-summary p, .comment-content p { margin-bottom: 26px; }
a, a:visited, .entry-meta a, .widget-area .widget a { color: var(--ink-light); }
a:hover, .entry-meta a:hover, .widget-area .widget a:hover { color: var(--ink); }
ins { background: #fff3a8; color: inherit; }
.entry-content figure, .entry-content .wp-block-image, .entry-content .wp-block-gallery, .entry-content .wp-block-embed { margin-bottom: 26px; }

/* Header: name left, tagline right, one hand-drawn curve below */
.site-header hgroup {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 200 2, 420 3, 597 10' fill='none' stroke='%231b2a6b' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") bottom / 100% 14px no-repeat;
}
.site-header h1, .site-header h1 a, .site-header h1 a:hover {
	font-family: var(--hand);
	font-weight: 500;
	font-size: 40px;
	line-height: 1.1;
	color: var(--ink);
}
.site-header h2 {
	font-family: var(--hand);
	font-size: 23px;
	line-height: 1.2;
	color: var(--ink-light);
}

/* Posts: written date above a handwritten title */
.diary-date {
	font-family: var(--hand);
	font-size: 22px;
	line-height: 26px;
	color: var(--ink-light);
	margin: 0;
}
.entry-header .entry-title, .entry-header .entry-title a, .page-title, .archive-title, .comments-title, .entry-content h1, .entry-content h2, .entry-content h3 {
	font-family: var(--hand);
	font-weight: 500;
	color: var(--ink);
	text-transform: none;
	letter-spacing: 0;
}
.entry-header .entry-title { font-size: 34px; line-height: 39px; }
.entry-meta, footer.entry-meta { color: var(--ink-light); }
.main-navigation li a { text-transform: none; font-size: 16px; }

@media screen and (max-width: 599px) {
	.site-header hgroup { display: block; }
	.site-header h1, .site-header h1 a { font-size: 34px; }
}

/* Menu: sticky page-marker flags under the header line (no gray borders) */
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
	border: 0;
	margin-top: 4px;
}
.main-navigation .nav-menu li { margin: 0 12px 8px 0; }
.main-navigation li a, .main-navigation li a:visited {
	display: inline-block;
	font-family: var(--hand);
	font-size: 21px;
	line-height: 1.2;
	color: var(--ink);
	text-transform: none;
	padding: 3px 16px 7px;
	border: 0;
	background: #fff3a8;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
	transform: rotate(-1.5deg);
	transition: transform .15s;
}
.main-navigation li:nth-child(2n) a { background: #cdeef7; transform: rotate(1.2deg); }
.main-navigation li:nth-child(3n) a { background: #f9d6e2; transform: rotate(-.8deg); }
.main-navigation li a:hover { color: var(--ink); transform: rotate(0) translateY(-2px); }
.main-navigation .current-menu-item > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a {
	color: var(--ink);
	font-weight: 500;
	padding-bottom: 11px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, .22);
}
.menu-toggle { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

/* Buttons in ink blue (search, comment form) */
.wp-block-search__button, input[type="submit"], .wp-block-button__link {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}
.wp-block-search__button:hover, .wp-block-search__button:focus, input[type="submit"]:hover, input[type="submit"]:focus, .wp-block-button__link:hover {
	background: var(--ink-light);
	border-color: var(--ink-light);
	color: #fff;
}

/* Between posts: 80% hand-drawn line with "//" in the middle (instead of Twenty Twelve's gray double line) */
.site-content article {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 39px;
}
.site-content article::after {
	content: "";
	display: block;
	width: 80%;
	height: 16px;
	margin: 26px auto 0;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 80 4, 200 7, 298 5' fill='none' stroke='%232f4aa0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") left center / calc(50% - 22px) 10px no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16'%3E%3Cpath d='M9 14 L14 2 M18 14.5 L23 2.5' fill='none' stroke='%232f4aa0' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 32px 16px no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 90 7, 210 3, 298 6' fill='none' stroke='%232f4aa0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right center / calc(50% - 22px) 10px no-repeat;
}
/* single post or page: no separator, no empty footer */
.single .site-content article::after, .page .site-content article::after, .error404 .site-content article::after, .site-content article:last-of-type::after { display: none; }
footer.entry-meta:not(:has(*)) { display: none; }
/* no gray rule above the footer either */
footer[role="contentinfo"] { border-top: 0; }

/* Unordered lists: hand-drawn pen bullets (a scribbled dot; a short dash when nested) */
.entry-content ul, .comment-content ul { list-style: none; margin-left: 0; padding-left: 26px; }
.entry-content ul > li, .comment-content ul > li { position: relative; margin-left: 0; }
.entry-content ul > li::before, .comment-content ul > li::before {
	content: "";
	position: absolute;
	left: -22px;
	top: 8px;
	width: 11px;
	height: 11px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6.2 1.6 C 9.6 1.4, 10.9 4.6, 10.2 7.1 C 9.5 9.9, 5.8 10.9, 3.6 9.8 C 1.4 8.6, 1.2 5.2, 2.6 3.4 C 3.6 2.1, 5.4 1.8, 7.1 2.3 M4.4 5.1 C 5.6 4.2, 7.6 4.6, 7.8 6.2 C 7.9 7.5, 6.2 8.1, 5.1 7.4' fill='none' stroke='%231b2a6b' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.entry-content ul ul > li::before, .comment-content ul ul > li::before {
	top: 11px;
	height: 6px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'%3E%3Cpath d='M1.5 3.6 C 4 2.6, 7.5 2.9, 10.5 2.4' fill='none' stroke='%231b2a6b' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Ordered lists: handwritten numbers "1)" (nested: "a)") */
.entry-content ol, .comment-content ol { list-style: none; margin-left: 0; padding-left: 30px; counter-reset: hand; }
.entry-content ol > li, .comment-content ol > li { position: relative; margin-left: 0; counter-increment: hand; }
.entry-content ol > li::before, .comment-content ol > li::before {
	content: counter(hand) ")";
	position: absolute;
	left: -30px;
	width: 24px;
	text-align: right;
	font-family: var(--hand);
	font-size: 22px;
	line-height: 26px;
	color: var(--ink);
	transform: rotate(-4deg);
}
.entry-content ol ol > li::before, .comment-content ol ol > li::before { content: counter(hand, lower-alpha) ")"; }
.entry-content ol[start], .comment-content ol[start] { counter-reset: hand calc(attr(start type(<integer>), 1) - 1); }

/* Blockquotes: a torn scrap of lined paper taped onto the page */
.entry-content blockquote, .comment-content blockquote {
	position: relative;
	z-index: 0;
	margin: 26px 12px 39px;
	padding: 30px 26px 26px;
	font-style: normal;
	color: var(--ink);
	transform: rotate(-.8deg);
	filter: drop-shadow(0 2px 2px rgba(60, 60, 60, .25));
}
.entry-content blockquote::before, .comment-content blockquote::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: #fffcf2;
	background-image: linear-gradient(transparent 25px, #e3e6ee 25px, #e3e6ee 26px);
	background-size: 100% 26px;
	background-position: 0 4px;
	clip-path: polygon(0% 3%, 4% 0%, 9% 2%, 15% .5%, 21% 2.5%, 27% .8%, 33% 2%, 40% .3%, 46% 2.2%, 52% .6%, 58% 2.4%, 64% .4%, 70% 2%, 77% .7%, 83% 2.6%, 89% .5%, 95% 2%, 100% .8%,
		99.4% 100%, 94% 97.6%, 88% 99.6%, 82% 97.4%, 76% 99.3%, 69% 97.8%, 63% 99.7%, 57% 97.5%, 50% 99.4%, 44% 97.7%, 38% 99.8%, 31% 97.4%, 25% 99.5%, 18% 97.9%, 12% 99.6%, 6% 97.6%, .6% 99.2%);
}
/* a strip of tape on top */
.entry-content blockquote::after, .comment-content blockquote::after {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	width: 90px;
	height: 22px;
	margin-left: -45px;
	background: rgba(235, 228, 200, .75);
	transform: rotate(2.5deg);
}
.entry-content blockquote p:last-child, .comment-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite, .comment-content blockquote cite { font-family: var(--hand); font-style: normal; font-size: 20px; color: var(--ink-light); }

/* Headings inside posts: handwritten, sized on the 26px grid */
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6,
.comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6 {
	font-family: var(--hand);
	font-weight: 500;
	color: var(--ink);
	text-transform: none;
	letter-spacing: 0;
	margin: 26px 0 13px;
}
.entry-content h1 { font-size: 34px; line-height: 39px; }
.entry-content h2 { font-size: 30px; line-height: 39px; }
.entry-content h3 { font-size: 26px; line-height: 26px; }
.entry-content h4 { font-size: 23px; line-height: 26px; }
.entry-content h5, .entry-content h6 { font-size: 21px; line-height: 26px; color: var(--ink-light); }
/* h2: a quick pen underline under the words */
.entry-content h2 {
	display: inline-block;
	padding-bottom: 4px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 60 2, 140 6, 198 3' fill='none' stroke='%232f4aa0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") bottom left / 100% 8px no-repeat;
}

/* Links in posts and comments: a hand-drawn pen underline (one stroke per line when wrapping) */
.entry-content a:not(:has(img)), .comment-content a:not(:has(img)) {
	text-decoration: none;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1.5 3.8 C 25 2.2, 60 4.6, 98.5 2.6' fill='none' stroke='%232f4aa0' stroke-width='1.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left 0 bottom 4px / 100% 6px no-repeat;
}
.entry-content a:not(:has(img)):hover, .comment-content a:not(:has(img)):hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1.5 3.8 C 25 2.2, 60 4.6, 98.5 2.6' fill='none' stroke='%231b2a6b' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* Highlighted text (editor "Highlight" = <mark>): yellow highlighter stroke, slightly uneven.
   !important beats the inline transparent background WordPress writes on <mark>. */
mark, .entry-content mark, .comment-content mark {
	background-color: transparent !important;
	background-image: linear-gradient(100deg, rgba(255, 236, 90, 0) 0, rgba(255, 236, 90, .85) 4px, rgba(255, 236, 90, .75) 60%, rgba(255, 236, 90, .9) calc(100% - 4px), rgba(255, 236, 90, 0) 100%) !important;
	background-size: 100% 78% !important;
	background-position: 0 70% !important;
	background-repeat: no-repeat !important;
	color: inherit; /* ink, unless a text colour was picked in the editor */
	padding: 0 3px;
	margin: 0 -1px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
/* selecting text with the mouse looks like the same highlighter */
::selection { background: rgba(255, 236, 90, .8); color: var(--ink); }

/* Visited links keep the ink (Twenty Twelve turns them gray) */
.entry-content a:visited, .comment-content a:visited, .entry-meta a:visited, .widget-area .widget a:visited { color: var(--ink-light); }
.entry-content a:visited:hover, .comment-content a:visited:hover { color: var(--ink); }

/* Sidebar block headings ("Archivo") match the "Buscar" label: small sans-serif */
.widget-area .wp-block-heading, .widget-area .widget .widget-title {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 26px;
	margin: 0;
	color: var(--ink);
	text-transform: none;
}

/* Image captions: a handwritten note under the picture */
.entry-content figcaption, .entry-content .wp-element-caption, .wp-caption .wp-caption-text, .gallery-caption, .entry-caption {
	font-family: var(--hand);
	font-style: normal;
	font-size: 21px;
	line-height: 26px;
	color: var(--ink-light);
	text-align: center;
	margin-top: 6px;
	transform: rotate(-1deg);
}

/* Phones: only a couple of pages, so show the flags instead of Twenty Twelve's "Menú" button */
@media screen and (max-width: 599px) {
	.main-navigation .menu-toggle { display: none; }
	.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
		display: block;
		text-align: center;
		margin-top: 13px;
	}
	.main-navigation .nav-menu li { display: inline-block; margin: 0 6px 8px; }
	.main-navigation li a { text-decoration: none; }
}

/* Archive / search page titles ("Archivos mensuales: octubre 2026"): readable handwriting */
.archive-header .archive-title, .page-header .page-title, .archive-title, .page-title {
	font-family: var(--hand);
	font-weight: 500;
	font-size: 30px;
	line-height: 39px;
	color: var(--ink);
	text-transform: none;
}
.archive-title span, .page-title span { color: var(--ink-light); }
.archive-header, .page-header { border-bottom: 0; margin-bottom: 26px; padding-bottom: 0; }

/* Comments: readable handwritten title, no avatar gap (avatars are off), ink links */
.comments-area .comments-title { font-size: 26px; line-height: 39px; color: var(--ink); }
.comments-area article header cite, .comments-area article header time { margin-left: 0; }
.comments-area article header cite { font-style: normal; font-weight: 600; color: var(--ink); }
.comments-area article header time, .comments-area article header a { color: var(--ink-light); }
.comments-area .reply a, .comments-area .reply a:visited { color: var(--ink-light); }
.comments-area .reply a:hover { color: var(--ink); }
.commentlist > li, .commentlist .children li { border-bottom: 0; }
.comments-area article { border-bottom: 0; margin-bottom: 13px; }

/* Comments: sticky notes stuck on the page (replies in another colour) */
.commentlist { margin-left: 0; }
.commentlist > li, .commentlist .children > li { list-style: none; }
.comments-area article.comment {
	position: relative;
	max-width: 420px;
	margin: 30px 0 26px 6px;
	padding: 26px 22px 16px;
	background: #fff6a6;
	box-shadow: 0 6px 8px -4px rgba(60, 60, 60, .35), inset 0 -12px 18px -14px rgba(120, 100, 0, .25);
	transform: rotate(-1.2deg);
}
.commentlist > li:nth-child(2n) > article.comment { transform: rotate(1deg); margin-left: 40px; }
.commentlist .children article.comment { background: #cdeef7; transform: rotate(.8deg); }
.commentlist .children .children article.comment { background: #f9d6e2; }
.comments-area article.comment .comment-content p, .comments-area article.comment .comment-content { font-size: 18px; line-height: 26px; }
.comments-area article.comment .comment-content { margin: 8px 0 0; }
.comments-area article.comment .reply { margin-top: 6px; }
.commentlist .children { margin-left: 26px; }
.comments-area article.comment header { margin: 0 0 4px; }
/* "El <fecha>, <nombre> comentó:" on one line */
.comments-area article.comment header { font-size: 13px; line-height: 20px; color: var(--ink); }
.comments-area article.comment header cite, .comments-area article.comment header time { display: inline; margin: 0; font-size: inherit; }

/* "Un día como hoy" widget: the year in handwriting, then the post */
.widget-area .on-this-day { margin: 0; list-style: none; }
.widget-area .on-this-day li { margin: 0 0 4px; }
.on-this-day-year { font-family: var(--hand); font-size: 21px; color: var(--ink); margin-right: 4px; }

/* Blogroll ("Leo a…"): empty on purpose for now; the note disappears once the list has links */
.widget-area .blogroll ul { list-style: none; margin: 0; }
.widget-area .blogroll ul:empty { display: none; }
.widget-area .blogroll ul:not(:empty) + .blogroll-empty { display: none; }
.widget-area .widget p.blogroll-empty { font-family: var(--hand); font-size: 20px; line-height: 26px; color: var(--ink-light); transform: rotate(-1.5deg); margin: 0; }

/* Mood and music line under a post */
.mood-music b { font-weight: 600; color: var(--ink); }
/* 88x31 buttons: pixel-crisp, in a wrapping row */
.widget-area .buttons-88x31 { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.widget-area .buttons-88x31 img { display: block; image-rendering: pixelated; }
.widget-area .buttons-88x31 a { background: none !important; padding: 0; }

/* Active / focused links switch to the red ballpen (underline included); keyboard focus keeps a visible ring */
:root { --red-ink: #c0262d; }
a:active, a:focus, a:visited:active, a:visited:focus,
.entry-content a:active, .entry-content a:focus, .comment-content a:active, .comment-content a:focus,
.entry-meta a:active, .entry-meta a:focus, .widget-area .widget a:active, .widget-area .widget a:focus,
.site-info a:active, .site-info a:focus { color: var(--red-ink); }
.entry-content a:not(:has(img)):active, .entry-content a:not(:has(img)):focus,
.comment-content a:not(:has(img)):active, .comment-content a:not(:has(img)):focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1.5 3.8 C 25 2.2, 60 4.6, 98.5 2.6' fill='none' stroke='%23c0262d' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
a:focus-visible { outline: 2px dashed var(--red-ink); outline-offset: 2px; }
.main-navigation li a:focus-visible { outline-offset: 3px; }