/* ==========================================================================
   Close to His Heart
   Palette and type taken from the cover of A Year at His Feet.
   The reader is 55 to 75: large text, high contrast, nothing that moves.
   ========================================================================== */

:root {
	--cthh-terracota: #B04A26;      /* 4.8:1 on cream: large text, buttons, links on cream */
	--cthh-terracota-osc: #9E4222;  /* 5.1:1 on dark cream: small terracotta text there */
	--cthh-crema: #F5F0E8;
	--cthh-crema-osc: #EBE3D7;
	--cthh-carbon: #2E2A26;         /* 12.6:1 on cream */
	--cthh-carbon-suave: #4A443E;   /* secondary text, still above 8:1 */
	--cthh-pizarra: #7A8B99;        /* 3.1:1: rules and ornaments only, never text */
	--cthh-borde: #7D7268;          /* form field border: 3.7:1 on dark cream, 4.1:1 on cream */
	--cthh-linea: #D8CDBE;          /* hairlines between table rows */

	--cthh-serif: "EB Garamond", Garamond, "Times New Roman", serif;
	--cthh-titulos: "Cormorant Garamond", "EB Garamond", Garamond, serif;
	--cthh-etiquetas: "Montserrat", "Helvetica Neue", Arial, sans-serif;

	--cthh-texto: 42rem;            /* about 65 characters a line */
	--cthh-ancho: 62rem;
	--cthh-lateral: 1rem;           /* 16px gutter on phones */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
	background: var(--cthh-crema);
	color: var(--cthh-carbon);
	font-family: var(--cthh-serif);
	font-size: 1.1875rem;           /* 19px on phones */
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}
@media (min-width: 768px) {
	body { font-size: 1.25rem; }    /* 20px on larger screens */
}

h1, h2, h3, h4 {
	font-family: var(--cthh-titulos);
	font-weight: 600;
	color: var(--cthh-carbon);
	line-height: 1.2;
	letter-spacing: 0.005em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); }
h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.625rem, 3vw, 2rem); }

p { margin: 0 0 1.1em; }
strong, b { font-weight: 600; }

a {
	color: var(--cthh-terracota);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
a:hover { color: var(--cthh-terracota-osc); text-decoration-thickness: 2px; }
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px solid var(--cthh-carbon);
	outline-offset: 3px;
}

::selection { background: var(--cthh-crema-osc); color: var(--cthh-carbon); }

/* --------------------------------------------------------------------------
   GeneratePress container: let each page section run edge to edge.
   -------------------------------------------------------------------------- */

.site.grid-container,
.site-content,
.content-area,
.site-main {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
}
.site-content { display: block; }
.separate-containers .inside-article,
.one-container .site-content,
.inside-article {
	padding: 0;
	margin: 0;
	background: transparent;
}
.separate-containers .site-main > *,
.separate-containers .site-main { margin: 0; }
.entry-header:empty { display: none; }
.entry-content:not(:first-child),
.entry-summary:not(:first-child) { margin-top: 0; }
.site-footer,
.site-info { background: transparent; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.cthh-cabecera {
	text-align: center;
	padding: 2rem var(--cthh-lateral) 1.25rem;
	background: var(--cthh-crema);
	border-bottom: 1px solid var(--cthh-pizarra);
}
.cthh-cabecera__marca {
	display: inline-block;
	padding: 0.55rem 0.25rem 0.5rem;
	border-top: 2px solid var(--cthh-pizarra);
	border-bottom: 2px solid var(--cthh-pizarra);
}
.cthh-marca {
	font-family: var(--cthh-titulos);
	font-weight: 600;
	font-size: clamp(1.5rem, 4.5vw, 2rem);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cthh-carbon);
	text-decoration: none;
	line-height: 1.15;
}
.cthh-marca:hover { color: var(--cthh-terracota); text-decoration: none; }
.cthh-submarca {
	margin: 0.2rem 0 0;
	font-family: var(--cthh-etiquetas);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	color: var(--cthh-carbon-suave);
}

.cthh-menu { margin-top: 1.1rem; }
.cthh-menu__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 0;
}
.cthh-menu__lista li { margin: 0; display: flex; align-items: center; }
.cthh-menu__lista li + li::before {
	content: "\00B7";
	color: var(--cthh-pizarra);
	padding: 0 0.35rem;
	font-size: 1.25rem;
}
.cthh-menu__lista a {
	display: inline-block;
	padding: 0.6rem 0.5rem;        /* touch target about 44px tall */
	font-family: var(--cthh-etiquetas);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cthh-carbon);
	text-decoration: none;
}
.cthh-menu__lista a:hover,
.cthh-menu__lista .current-menu-item > a,
.cthh-menu__lista a[aria-current="page"] {
	color: var(--cthh-terracota);
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

/* On phones the four items must fit one line: a wrapped line that starts
   with a separator dot reads like a mistake. */
@media (max-width: 480px) {
	.cthh-menu__lista a { font-size: 0.8125rem; letter-spacing: 0.05em; padding: 0.7rem 0.22rem; }
	.cthh-menu__lista li + li::before { padding: 0; }
}

/* --------------------------------------------------------------------------
   Page sections
   -------------------------------------------------------------------------- */

.cthh-seccion {
	padding: clamp(3.5rem, 9vw, 6.5rem) var(--cthh-lateral);
	margin: 0;
}
/* With a classic theme WordPress wraps a group's content in
   .wp-block-group__inner-container, so the measure is set one level down. */
.cthh-seccion > *,
.cthh-seccion > .wp-block-group__inner-container > * {
	max-width: var(--cthh-texto);
	margin-left: auto;
	margin-right: auto;
}
.cthh-seccion > .wp-block-group__inner-container { max-width: none; }
.cthh-seccion > *:last-child,
.cthh-seccion > .wp-block-group__inner-container > *:last-child { margin-bottom: 0; }
.cthh-seccion--oscura { background: var(--cthh-crema-osc); }
.cthh-seccion--centrada { text-align: center; }
.cthh-seccion--centrada .wp-block-buttons { justify-content: center; }

/* Terracotta small text fails contrast on the dark cream: darken it there. */
.cthh-seccion--oscura a { color: var(--cthh-terracota-osc); }

.cthh-subtitulo {
	font-family: var(--cthh-serif);
	font-style: italic;
	font-size: 1.2em;
	line-height: 1.45;
	color: var(--cthh-carbon-suave);
	margin-top: -0.2em;
	margin-bottom: 1.4em;
}
.cthh-firma {
	font-style: italic;
	font-size: 1.15em;
	margin-top: 1.6em;
}
.cthh-firma em { font-style: italic; }

/* The main H1: spaced capitals, as on the cover. */
.cthh-hero h1 {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: clamp(1.875rem, 4.6vw, 3rem);
	line-height: 1.25;
	margin-bottom: 1em;
}

/* Book section: cover beside the text, stacked on phones. */
.cthh-seccion--libro .wp-block-columns { max-width: var(--cthh-ancho); gap: clamp(2rem, 5vw, 4rem); }
.cthh-portada img {
	display: block;
	width: 100%;
	max-width: 22rem;
	height: auto;
	margin: 0 auto;
	box-shadow: 0 0.75rem 2rem rgba(46, 42, 38, 0.18), 0 0.1rem 0.3rem rgba(46, 42, 38, 0.12);
}
.cthh-portada--grande img { max-width: 26rem; }
.cthh-portada { margin: 0 0 2rem; }
.cthh-enlace-libro { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.wp-block-buttons { margin: 1.8rem 0 0.4rem; }
/* GeneratePress styles a.wp-block-button__link:not(.has-background), so the
   selector has to be at least that specific. */
.wp-block-buttons .wp-block-button a.wp-block-button__link,
.cthh-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.9rem 2rem;
	background: var(--cthh-terracota);
	color: #fff;                   /* 5.4:1 on terracotta */
	border: 0;
	border-radius: 2px;
	font-family: var(--cthh-etiquetas);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.3;
	cursor: pointer;
}
.wp-block-buttons .wp-block-button a.wp-block-button__link:hover,
.wp-block-buttons .wp-block-button a.wp-block-button__link:focus,
.cthh-form button:hover {
	background: var(--cthh-terracota-osc);
	color: #fff;
	text-decoration: none;
}
.cthh-seccion--oscura .wp-block-buttons a.wp-block-button__link { color: #fff; }

/* --------------------------------------------------------------------------
   Prayers to Borrow form
   -------------------------------------------------------------------------- */

.cthh-form { margin-top: 2rem; }
.cthh-form__titulo { margin-bottom: 0.3em; }
.cthh-form__subtitulo {
	font-style: italic;
	font-size: 1.2em;
	color: var(--cthh-carbon-suave);
	margin-bottom: 1.4em;
}
.cthh-form__cuerpo { margin: 0; text-align: left; }
.cthh-seccion--centrada .cthh-form__cuerpo { max-width: 34rem; margin: 0 auto; }
.cthh-form__etiqueta {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 1.05rem;
	color: var(--cthh-carbon);
}
.cthh-form__fila { display: flex; flex-direction: column; gap: 0.75rem; }
.cthh-form input[type="email"] {
	width: 100%;
	min-height: 3.5rem;
	padding: 0.7rem 1rem;
	font-family: var(--cthh-serif);
	font-size: 1.25rem;
	color: var(--cthh-carbon);
	background: #fff;
	border: 2px solid var(--cthh-borde);
	border-radius: 2px;
	box-shadow: none;
}
.cthh-form input[type="email"]:focus { border-color: var(--cthh-carbon); }
.cthh-form button { width: 100%; }
@media (min-width: 640px) {
	.cthh-form__fila { flex-direction: row; }
	.cthh-form input[type="email"] { flex: 1 1 auto; }
	.cthh-form button { width: auto; flex: 0 0 auto; min-height: 3.5rem; }
}
.cthh-form__nota {
	margin: 0.9rem 0 0;
	font-size: 1rem;
	color: var(--cthh-carbon-suave);
}
.cthh-aviso {
	padding: 1rem;
	border: 2px dashed var(--cthh-terracota);
	font-family: var(--cthh-etiquetas);
	font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   The Book page: four things, twelve months
   -------------------------------------------------------------------------- */

.cthh-cuatro { padding-left: 1.2em; }
.cthh-cuatro li { margin-bottom: 0.8em; padding-left: 0.3em; }
.cthh-cuatro li::marker { color: var(--cthh-terracota); }

.cthh-meses { margin: 0.5rem auto 2rem; }
.cthh-meses table {
	width: 100%;
	border-collapse: collapse;
	border-top: 2px solid var(--cthh-pizarra);
	border-bottom: 2px solid var(--cthh-pizarra);
	font-size: 1em;
}
.cthh-meses td {
	padding: 0.7rem 0.25rem;
	border: 0;
	border-bottom: 1px solid var(--cthh-linea);
	vertical-align: baseline;
	text-align: left;
}
.cthh-meses tr:last-child td { border-bottom: 0; }
.cthh-seccion--oscura .cthh-meses td:first-child { color: var(--cthh-terracota-osc); }
.cthh-meses td:first-child {
	width: 34%;
	font-family: var(--cthh-etiquetas);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cthh-terracota);
	white-space: nowrap;
	padding-right: 1rem;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.cthh-correo {
	font-size: clamp(1.35rem, 4vw, 1.75rem);
	word-break: break-word;
	user-select: all;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.cthh-pie {
	text-align: center;
	padding: 2.75rem var(--cthh-lateral) 3rem;
	border-top: 1px solid var(--cthh-pizarra);
	background: var(--cthh-crema);
	font-size: 1rem;
	color: var(--cthh-carbon-suave);
}
.cthh-pie p { margin: 0 0 0.35rem; }
.cthh-pie__marca {
	font-family: var(--cthh-titulos);
	font-weight: 600;
	font-size: 1.25rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cthh-carbon);
}
.cthh-pie__legal { margin-top: 0.9rem !important; }
.cthh-pie__legal span { padding: 0 0.35rem; color: var(--cthh-pizarra); }
.cthh-pie a { color: var(--cthh-carbon-suave); }
.cthh-pie a:hover { color: var(--cthh-terracota); }

/* --------------------------------------------------------------------------
   Blog: the index, the category archives and each article share one
   reading column.
   -------------------------------------------------------------------------- */

/* GeneratePress sets .separate-containers.no-sidebar .site-main { margin: 0 },
   so the reading column needs the same weight to be centred. */
.no-sidebar.single-post .site-main,
.no-sidebar.blog .site-main,
.no-sidebar.archive .site-main,
.single-post .site-main,
.blog .site-main,
.archive .site-main {
	max-width: 46rem;                /* the index widens to 68rem below */
	margin: 0 auto;
	padding: 3rem var(--cthh-lateral) 4.5rem;
}

.cthh-blog-cabecera { text-align: center; margin-bottom: 3rem; }
.cthh-blog-cabecera h1 { margin-bottom: 0.3em; }
.archive .page-header { text-align: center; margin-bottom: 3rem; }

.entry-meta,
.entry-meta a {
	font-family: var(--cthh-etiquetas);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cthh-carbon-suave);
	text-decoration: none;
}
.entry-meta a:hover { color: var(--cthh-terracota); }
footer.entry-meta { margin-top: 2.5rem; }
.entry-meta .gp-icon { display: none; }

/* The index and category archives: cards side by side, two per row from
   tablet up, one on phones. Each card reads image, category, title, byline,
   excerpt. No dates anywhere on the blog (generate_post_date in functions.php). */
.no-sidebar.blog .site-main,
.no-sidebar.archive .site-main,
.blog .site-main,
.archive .site-main {
	max-width: 68rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
}
@media (min-width: 768px) {
	.no-sidebar.blog .site-main,
	.no-sidebar.archive .site-main,
	.blog .site-main,
	.archive .site-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2.5rem; }
}
.cthh-blog-cabecera,
.archive .page-header,
.paging-navigation,
.no-results { grid-column: 1 / -1; }
.cthh-blog-cabecera,
.archive .page-header { margin-bottom: 0.5rem; }

.blog .site-main > article,
.archive .site-main > article {
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--cthh-crema-osc);
}
.blog .inside-article,
.archive .inside-article {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 0 1.75rem;
}
.blog .post-image,
.archive .post-image { order: -2; margin: 0 0 1.4rem; }
.blog .post-image img,
.archive .post-image img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.blog footer.entry-meta,
.archive footer.entry-meta { order: -1; margin: 0 1.5rem 0.6rem; }
.blog .entry-header,
.archive .entry-header,
.blog .entry-summary,
.archive .entry-summary { margin: 0 1.5rem; }
.blog .entry-summary,
.archive .entry-summary { margin-top: 0.9rem; }
.blog .entry-summary p,
.archive .entry-summary p { margin: 0; font-size: 1.05rem; }
.blog .entry-title,
.archive .entry-title { font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.2; margin-bottom: 0.35em; }
.entry-title a { color: var(--cthh-carbon); text-decoration: none; }
.entry-title a:hover { color: var(--cthh-terracota); }
.post-image img,
.featured-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}
.read-more-container { margin-top: 1rem; }
.read-more {
	font-family: var(--cthh-etiquetas);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.paging-navigation { text-align: center; font-family: var(--cthh-etiquetas); }

/* The article */
.single-post .featured-image { margin: 0 0 2.25rem; }
.single-post .entry-title { font-size: clamp(2.25rem, 5.5vw, 3.25rem); margin-bottom: 0.35em; }
.single-post .entry-header { margin-bottom: 2rem; }
.single-post .entry-content h2 { margin-top: 2.2em; }
.single-post .entry-content h3 { font-size: clamp(1.4rem, 3vw, 1.6rem); margin-top: 1.6em; margin-bottom: 0.4em; }

.single-post .wp-block-quote {
	margin: 2rem 0;
	padding: 0.3rem 0 0.3rem 1.4rem;
	border: 0;
	border-left: 3px solid var(--cthh-terracota);
	background: none;
	font-size: 1.1em;
	font-style: italic;
}
.single-post .wp-block-quote p { margin-bottom: 0.6em; }
.single-post .wp-block-quote cite {
	display: block;
	font-style: normal;
	font-family: var(--cthh-etiquetas);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cthh-carbon-suave);
}

.cth-respuesta {
	margin: 2rem 0 2.5rem;
	padding: 1.3rem 1.5rem;
	background: var(--cthh-crema-osc);
	border-left: 3px solid var(--cthh-terracota);
}
.cth-respuesta p:last-child,
.cth-gift-box p:last-child,
.cth-oracion p:last-child { margin-bottom: 0; }

.cth-gift-box {
	margin: 2.75rem 0;
	padding: 2rem 1.6rem;
	text-align: center;
	background: var(--cthh-crema-osc);
	border-top: 2px solid var(--cthh-pizarra);
	border-bottom: 2px solid var(--cthh-pizarra);
}
.cth-gift-box .wp-block-buttons { justify-content: center; margin-top: 1.2rem; }
.cth-gift-box a:not(.wp-block-button__link) { color: var(--cthh-terracota-osc); }

.cth-oracion {
	margin: 0 0 2.5rem;
	padding: 0.2rem 0 0.2rem 1.4rem;
	border-left: 2px solid var(--cthh-pizarra);
	font-style: italic;
}

.cth-seguir { margin-top: 3rem; }
.cth-seguir-leyendo { list-style: none; margin: 0; padding: 0; }
.cth-seguir-leyendo li { margin: 0; padding: 0.8rem 0; border-bottom: 1px solid var(--cthh-linea); }
.cth-seguir-leyendo li:first-child { border-top: 1px solid var(--cthh-linea); }
.cth-seguir-leyendo a {
	font-family: var(--cthh-titulos);
	font-weight: 600;
	font-size: 1.35rem;
	line-height: 1.3;
	color: var(--cthh-carbon);
	text-decoration: none;
}
.cth-seguir-leyendo a:hover { color: var(--cthh-terracota); }

.cth-nota-autora { margin-top: 3rem; color: var(--cthh-carbon-suave); }
.cth-nota-autora .wp-block-separator {
	width: 4rem;
	margin: 0 0 1.5rem;
	border: 0;
	border-top: 2px solid var(--cthh-pizarra);
	opacity: 1;
}
.cth-crisis { font-size: 1rem; }

.post-navigation { margin-top: 2.5rem; font-family: var(--cthh-titulos); font-size: 1.15rem; }
.post-navigation .gp-icon { display: none; }