/*
Theme Name:        Tienda Dolancy
Theme URI:         https://tienda.dolancy.com/
Description:       Tema hijo de Twenty Twenty para la tienda Dolancy. Contiene únicamente las personalizaciones de la tienda (sistema tipográfico, portada, pie, filtros, SEO y ajustes de WooCommerce) para que sobrevivan a las actualizaciones de WordPress, WooCommerce y del tema padre.
Author:            Dolancy
Template:          twentytwenty
Version:           2.6.0
Requires at least: 5.7
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       tienda-dolancy
*/

/*
 * Este archivo se carga DESPUÉS del style.css de Twenty Twenty, así que cada
 * regla de aquí sobrescribe la del tema padre con el mismo selector.
 *
 * Contenido:
 *   1. Tokens (tipografías, escala, colores)
 *   2. Tipografías
 *   3. Base y jerarquía de texto
 *   4. Movimiento y foco
 *   5. Botones y formularios
 *   6. Encabezado, menú y aviso de envíos
 *   7. Portada (hero)
 *   8. Acordeón
 *   9. Bloques y contenido
 *  10. Pie de página
 *  11. Utilidades y campañas
 *
 * Los estilos de la tienda están en assets/css/woocommerce.css.
 */

/* ===== 1. Tokens ============================================================
 *
 * Escala tipográfica modular de razón 1.25. Todo tamaño de letra del sitio
 * sale de aquí: si un valor no está en la escala, no se usa.
 * Twenty Twenty define 1rem = 10px, por eso 1.6rem son 16px.
 */

:root {
	/* Tipografías: una de display y una de texto. */
	--dolancy-font-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
	--dolancy-font-text: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Escala */
	--fs-100: 1.2rem; /* 12px — etiquetas, SKU, migas */
	--fs-200: 1.4rem; /* 14px — texto secundario, botones */
	--fs-300: 1.6rem; /* 16px — cuerpo */
	--fs-400: 2rem;   /* 20px — precio, títulos de listado */
	--fs-500: 2.5rem; /* 25px — subtítulos */
	--fs-600: 3.1rem; /* 31px — h2 */
	--fs-700: 4.9rem; /* 49px — h1 */
	--fs-800: 7.6rem; /* 76px — portada */

	/* Espaciado entre letras: normal en el texto, generoso en las etiquetas. */
	--ls-label: 0.08em;

	--dolancy-text: #495057;
	--dolancy-muted: #6c757d;
	--dolancy-line: #dee2e6;
	--dolancy-surface: #f8f9fa;

	/*
	 * Un solo tiempo y una sola curva para todo el sitio: es lo que hace que
	 * la navegación se sienta de una pieza y no cada control por su cuenta.
	 */
	--dolancy-transition: 180ms cubic-bezier(0.2, 0, 0.2, 1);
}

/*
 * Quien pidió menos movimiento en su sistema lo recibe: se apaga todo de una
 * vez cambiando el token, sin repetir la consulta en cada componente.
 */
@media (prefers-reduced-motion: reduce) {

	:root {
		--dolancy-transition: 1ms linear;
	}
}

/* ===== 2. Tipografías ======================================================
 *
 * Bebas Neue se usa solo para títulos: es una tipografía de caja alta, así que
 * en textos largos obliga a leer todo en mayúsculas. El cuerpo usa Inter, que
 * ya viene con Twenty Twenty (no agrega descargas).
 */

@font-face {
	font-family: "Bebas Neue";
	src: url("assets/fonts/BebasNeueRegular.woff2") format("woff2"),
		url("assets/fonts/BebasNeueRegular.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ===== 3. Base y jerarquía de texto ======================================= */

body {
	color: var(--dolancy-text);
	font-family: var(--dolancy-font-text);
	font-size: var(--fs-300);
	letter-spacing: normal;
}

.screen-reader-text:focus {
	font-size: var(--fs-200);
}

/* Precios en oferta de WooCommerce (<ins>) sin subrayado. */
ins {
	text-decoration: none;
}

/* Títulos: Bebas Neue, un solo grosor y sin espaciado extra. */
h1,
h2,
h3,
h4,
h5,
h6,
.faux-heading,
.entry-title,
.archive-title,
.site-title {
	font-family: var(--dolancy-font-display);
	font-weight: 400;
	letter-spacing: normal;
}

h1,
.heading-size-1 { font-size: var(--fs-700); }

h2,
.heading-size-2 { font-size: var(--fs-600); }

h3,
.heading-size-3 { font-size: var(--fs-500); }

h4,
.heading-size-4 { font-size: var(--fs-400); }

h5,
.heading-size-5,
h6,
.heading-size-6 { font-size: var(--fs-300); }

/* Etiquetas cortas en caja alta: es el único lugar donde se justifican. */
.dolancy-label,
.woocommerce .onsale,
.wp-block-button__link,
button,
.button,
.faux-button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	letter-spacing: var(--ls-label);
}

/* ===== 4. Movimiento y foco ================================================
 *
 * La sensación de "tieso" venía de que nada cambiaba de forma gradual: los
 * enlaces y botones saltaban de un estado a otro. Un solo tiempo (180 ms)
 * en todo lo que responde al puntero basta para quitarla.
 */

a,
button,
.button,
.faux-button,
.wp-block-button__link,
input[type="button"],
input[type="reset"],
input[type="submit"],
.dolancy-chip,
.woocommerce ul.products li.product a img,
.xoo-wsc-basket,
.xoo-wsc-cart-trigger {
	transition:
		color var(--dolancy-transition),
		background-color var(--dolancy-transition),
		border-color var(--dolancy-transition),
		box-shadow var(--dolancy-transition),
		opacity var(--dolancy-transition),
		transform var(--dolancy-transition);
}

/*
 * Foco de teclado visible en todo el sitio.
 *
 * :focus-visible solo se activa cuando el navegador entiende que hace falta
 * (teclado, no clic), así que no ensucia la interfaz de quien usa el ratón.
 */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
.faux-button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.variable-item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

/*
 * El ancla #productos existe para que el teclado aterrice en el listado, pero
 * es un div de altura cero: un recuadro alrededor de la nada parece un error.
 * Recibe el foco (y el salto), sin dibujarse.
 */
.dolancy-products-anchor:focus,
.dolancy-products-anchor:focus-visible {
	outline: none;
}

/* Sobre fondo oscuro (encabezado, pie, portada) el contorno va en blanco. */
#site-header a:focus-visible,
#site-header button:focus-visible,
#site-footer a:focus-visible,
.menu-modal a:focus-visible,
.dolancy-hero a:focus-visible {
	outline-color: #fff;
}

/*
 * El salto a un ancla no debe quedar tapado por el encabezado fijo.
 * scroll-margin va en el destino, no en el contenedor, así que funciona
 * también con los anclas que genera WooCommerce.
 */
:target,
#productos,
.dolancy-accordion {
	scroll-margin-top: 9rem;
}

/* ===== 5. Botones y formularios =========================================== */

input,
textarea,
button,
.button,
.faux-button,
.faux-button.more-link,
.wp-block-button__link,
.wp-block-file__button {
	font-family: var(--dolancy-font-text);
	letter-spacing: normal;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="week"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea,
select {
	font-size: var(--fs-300);
	letter-spacing: normal;
	line-height: 1.5;
	color: var(--dolancy-text);
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

button,
.button,
.faux-button,
.wp-block-button__link,
.wp-block-file .wp-block-file__button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border-radius: 5px;
	font-size: var(--fs-200);
	font-weight: 600;
	padding: 0.9em 1.4em;
	text-decoration: none !important;
}

a.button:hover,
a.button:visited {
	text-decoration: none;
}

/* ===== 6. Encabezado, menú y aviso de envíos ============================== */

/*
 * Encabezado fijo.
 *
 * En un listado de 26 productos, volver arriba para abrir el carrito o
 * cambiar de categoría eran tres pantallas de scroll. Al bajar se compacta
 * (assets/js/theme.js pone .is-compact) para no comerse la pantalla del
 * celular. Sin JavaScript queda fijo a su tamaño normal, que también sirve.
 */
#site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: #fff;
	transition: box-shadow var(--dolancy-transition);
}

.admin-bar #site-header {
	top: 32px;
}

#site-header.is-compact {
	box-shadow: 0 1px 12px rgba(0, 0, 0, 0.09);
	padding: 1rem 0;
}

#site-header.is-compact .header-inner {
	padding: 0.2rem 0;
}

#site-header.is-compact .site-logo img {
	max-height: 3.4rem;
}

.site-logo img,
.header-inner {
	transition: max-height var(--dolancy-transition), padding var(--dolancy-transition);
}

@media (max-width: 782px) {

	.admin-bar #site-header {
		top: 46px;
	}
}

/*
 * La barra de administración se despega en pantallas chicas: con el
 * encabezado fijo debajo, quedaban los dos peleando por el mismo lugar.
 */
@media (max-width: 600px) {

	.admin-bar #site-header {
		top: 0;
	}
}

.header-inner {
	padding: 0.5rem 0;
}

.site-description {
	display: none;
	color: #fff;
	font-size: var(--fs-500);
	letter-spacing: normal;
	margin: 1rem 0 0 2rem;
}

.site-logo img {
	max-height: 4.5rem;
}

.nav-toggle .toggle-icon,
.nav-toggle svg {
	height: 2rem;
}

/* Menú en caja mixta y tamaño de cuerpo: era lo que más se leía en mayúsculas. */
ul.primary-menu,
.modal-menu > li > a,
.modal-menu > li > .ancestor-wrapper > a {
	font-family: var(--dolancy-font-text);
	font-size: var(--fs-300);
	font-weight: 500;
	letter-spacing: normal;
}

/*
 * Sobre el encabezado y el pie oscuros, los enlaces van en blanco.
 *
 * El Personalizador genera estas mismas reglas con el color de acento y las
 * imprime después de esta hoja, así que aquí se usan selectores con más peso
 * (#site-header, #site-footer, body) para poder ganarles.
 */
body:not(.overlay-header) #site-header .primary-menu > li > a,
body:not(.overlay-header) #site-header .primary-menu > li > .icon,
.menu-modal .modal-menu a,
#site-footer .footer-menu a,
#site-footer .footer-widgets a,
body #site-footer .wp-block-button.is-style-outline,
body .wp-block-pullquote::before,
body.singular:not(.overlay-header) .entry-header a,
body .archive-header a,
body .header-footer-group .color-accent,
body .header-footer-group .color-accent-hover:hover {
	color: #fff;
}

body:not(.overlay-header) #site-header .primary-menu > li > a {
	text-decoration: none;
}

/*
 * Botones móviles de búsqueda y menú, y botón "Cerrar menú": solo ícono.
 * El texto se oculta visualmente pero sigue disponible para lectores de pantalla.
 */
.mobile-search-toggle .toggle-text,
.mobile-nav-toggle .toggle-text,
button.close-nav-toggle .toggle-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Aviso de envíos (template-parts/header/shipping-notice.php). */
.aviso-text {
	text-align: center;
	width: inherit;
	margin: 0;
}

.aviso-text a {
	color: #fff;
	font-size: var(--fs-200);
}

/* ===== 7. Portada (hero) ==================================================
 *
 * template-parts/header/hero.php, insertado antes del contenido de la tienda
 * para que ocupe todo el ancho de la ventana sin depender de la plantilla.
 */

.dolancy-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 7;
	min-height: 32rem;
	max-height: 70vh;
	background-color: #343a40;
	overflow: hidden;
	isolation: isolate;
}

/*
 * El selector lleva dos clases a propósito: WooCommerce declara
 * ".woocommerce-page img { height: auto }" y con una sola clase le gana.
 */
.dolancy-hero .dolancy-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--dolancy-hero-focus, 50% 100%);
	z-index: -2;
}

.dolancy-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: -1;
}

.dolancy-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.6rem;
	max-width: 76rem;
	padding: 4rem 2rem;
	text-align: center;
	color: #fff;
}

.dolancy-hero__title {
	font-family: var(--dolancy-font-display);
	font-size: clamp(3.6rem, 7vw, var(--fs-800));
	font-weight: 800;
	line-height: 1;
	margin: 0;
	color: #fff;
	text-wrap: balance;
}

.dolancy-hero__subtitle {
	font-family: var(--dolancy-font-text);
	font-size: var(--fs-400);
	margin: 0;
	color: #fff;
}

.dolancy-hero__cta {
	margin-top: 0.8rem;
}

@media (max-width: 700px) {

	/* Cuadrado: la foto es apaisada y un recorte vertical perdería demasiado. */
	.dolancy-hero {
		aspect-ratio: 1 / 1;
		min-height: 28rem;
		max-height: none;
	}

	.dolancy-hero__inner {
		padding: 3rem 2rem;
	}
}

/* ===== 8. Acordeón ==========================================================
 *
 * <details> nativo: el navegador se encarga de abrir, cerrar y anunciar el
 * estado, así que no hace falta JavaScript ni atributos ARIA. Solo se le
 * quita el triángulo del sistema y se dibuja uno propio.
 */

.dolancy-accordion {
	border-top: 1px solid var(--dolancy-line);
	margin: 0 auto;
	width: calc(100% - 4rem);
}

.dolancy-accordion:last-of-type {
	border-bottom: 1px solid var(--dolancy-line);
}

.dolancy-accordion__summary {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	cursor: pointer;
	list-style: none;
	padding: 2.4rem 4rem 2.4rem 0;
	position: relative;
}

.dolancy-accordion__summary::-webkit-details-marker {
	display: none;
}

.dolancy-accordion__title {
	font-size: var(--fs-500);
	margin: 0;
}

.dolancy-accordion__hint {
	color: var(--dolancy-muted);
	font-size: var(--fs-200);
}

/* Flecha propia, que gira al abrir. */
.dolancy-accordion__summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.6rem;
	width: 1rem;
	height: 1rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-75%) rotate(45deg);
	transition: transform var(--dolancy-transition);
}

.dolancy-accordion[open] .dolancy-accordion__summary::after {
	transform: translateY(-25%) rotate(225deg);
}

.dolancy-accordion__summary:hover {
	color: #000;
}

.dolancy-accordion__body {
	padding-bottom: 2.4rem;
}

/*
 * Dentro del acordeón el contenido ya está en su propia columna: las tablas y
 * las columnas de la guía no necesitan el ancho ni los márgenes que traen de
 * las plantillas de WooCommerce.
 */
.dolancy-accordion__body .woocommerce-tabs {
	margin: 0;
	padding: 0;
	width: 100%;
}

/* ===== 9. Bloques y contenido ============================================= */

.entry-content {
	font-family: var(--dolancy-font-text);
	font-size: var(--fs-300);
	letter-spacing: normal;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.has-drop-cap:not(:focus)::first-letter {
	font-family: var(--dolancy-font-display);
}

.entry-content cite,
.entry-content figcaption,
.entry-content table,
.entry-content address,
.entry-content .wp-caption-text,
.entry-content .wp-block-file,
.entry-content .wp-block-archives,
.entry-content .wp-block-categories,
.entry-content .wp-block-latest-comments,
.entry-content .wp-block-latest-posts,
.entry-content .wp-block-pullquote,
.entry-content .wp-block-quote.is-large,
.entry-content .wp-block-quote.is-style-large {
	font-family: var(--dolancy-font-text);
}

.wp-block-cover-image h2,
.wp-block-cover h2 {
	font-size: clamp(3.6rem, 7vw, var(--fs-800));
	font-weight: 400;
}

.wp-block-cover-image p,
.wp-block-cover p {
	font-family: var(--dolancy-font-text);
	font-size: var(--fs-400);
}

table {
	border: 0;
}

hr {
	margin: 3rem auto;
}

/* ===== 10. Pie de página ===================================================
 *
 * footer.php del tema. Tres franjas: columnas (marca, enlaces, dirección),
 * confianza (envíos y métodos de pago) y créditos. Twenty Twenty pone
 * #site-footer .section-inner en flex con space-between; aquí cada franja
 * define su propio acomodo.
 */

.powered-by-wordpress {
	display: none;
}

#site-footer.dolancy-footer {
	padding: 5rem 0 2.4rem;
	font-size: var(--fs-200);
	line-height: 1.6;
}

/*
 * En celular: marca y dirección a todo lo ancho, "Tienda" y "Ayuda" lado a
 * lado (son listas cortas y así el pie no se vuelve una columna eterna).
 */
#site-footer .dolancy-footer__main {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3.2rem 2rem;
	align-items: start;
}

.dolancy-footer__brand,
.dolancy-footer__col:last-child {
	grid-column: 1 / -1;
}

#site-footer .dolancy-footer__logo {
	display: inline-block;
	text-decoration: none;
}

#site-footer .dolancy-footer__logo img {
	display: block;
	width: auto;
	max-width: 22rem;
	max-height: 5.6rem;
}

.dolancy-footer__about {
	max-width: 32ch;
	margin: 1.6rem 0 0;
	color: rgba(255, 255, 255, 0.72);
}

#site-footer .dolancy-footer__title {
	margin: 0 0 1.2rem;
	font-family: var(--dolancy-font-text);
	font-size: var(--fs-100);
	font-weight: 600;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.dolancy-footer__links,
.dolancy-footer__social,
.dolancy-footer__payments ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dolancy-footer__social li,
.dolancy-footer__payments li {
	margin: 0;
}

.dolancy-footer__links li {
	margin: 0 0 0.8rem;
}

#site-footer .dolancy-footer__links a,
#site-footer .dolancy-footer__address a {
	color: #fff;
	text-decoration: none;
}

#site-footer .dolancy-footer__links a:hover,
#site-footer .dolancy-footer__address a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.dolancy-footer__address {
	margin: 0 0 1.2rem;
	font-style: normal;
}

.dolancy-footer__social {
	display: flex;
	gap: 0.8rem;
	margin-top: 2rem;
}

#site-footer .dolancy-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	color: #fff;
}

#site-footer .dolancy-footer__social a:hover {
	background-color: #fff;
	color: #343a40;
}

.dolancy-footer__social svg {
	width: 1.8rem;
	height: 1.8rem;
	fill: currentColor;
}

/* Franja de confianza: envíos y métodos de pago. */
#site-footer .dolancy-footer__trust {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
	margin-top: 4rem;
	padding: 2.4rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.dolancy-footer__shipping {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
}

.dolancy-footer__payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
}

.dolancy-footer__payments-label {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
}

.dolancy-footer__payments ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

/*
 * Los logotipos oficiales están pensados para fondo blanco: se muestran en
 * una "tarjeta" blanca, como en las cajas de pago, en lugar de invertirlos.
 */
.dolancy-footer__payments li {
	display: flex;
	align-items: center;
	height: 4rem;
	padding: 0.6rem 1.2rem;
	background-color: #fff;
	border-radius: 0.6rem;
}

.dolancy-footer__payments img {
	display: block;
	width: auto;
	height: 2.4rem;
}

/* Créditos. */
#site-footer .dolancy-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.2rem;
	padding-top: 2.4rem;
	font-size: var(--fs-100);
	color: rgba(255, 255, 255, 0.6);
}

#site-footer .dolancy-footer__bottom .footer-copyright {
	margin: 0;
	font-size: inherit;
	font-weight: normal;
}

#site-footer .dolancy-footer__bottom a {
	color: #fff;
}

#site-footer .dolancy-footer__bottom .to-the-top {
	margin-left: 0;
	font-size: inherit;
	font-weight: normal;
	text-decoration: none;
}

@media (min-width: 700px) {

	#site-footer .dolancy-footer__main {
		gap: 4rem 3.2rem;
	}

	#site-footer .dolancy-footer__trust {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
}

@media (min-width: 1000px) {

	#site-footer.dolancy-footer {
		padding-top: 7rem;
	}

	#site-footer .dolancy-footer__main {
		grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
	}

	.dolancy-footer__brand,
	.dolancy-footer__col:last-child {
		grid-column: auto;
	}
}

.widget_rss .rssSummary {
	margin-top: 0;
}

/* ===== 11. Utilidades y campañas =========================================== */

.d-inline-block {
	display: inline-block;
}

/* Barra roja de campaña (Buen Fin). */
.bg-buen-fin {
	background-color: #db0303;
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
	width: auto;
	justify-content: center;
	padding: 1.2rem 0;
}

/* Adornos del plugin de temporada que no se quieren en el encabezado. */
.pimp-my-site-sticker-board .pimp-my-site-sticker-board__top-sticker-wrapper {
	display: none;
}

/* ===== Media queries ====================================================== */

@media (min-width: 700px) {

	h1,
	.heading-size-1,
	h2,
	.heading-size-2,
	h3,
	.heading-size-3 {
		margin: 3rem auto 3rem;
	}

	h4,
	.heading-size-4,
	h5,
	.heading-size-5,
	h6,
	.heading-size-6 {
		margin: 1rem auto 1rem;
	}

	.header-inner {
		padding: 1rem 0;
	}

	.site-logo img {
		max-height: 4.5rem;
	}

	.singular .entry-header {
		padding: 4rem 0;
	}

	.entry-content {
		font-size: var(--fs-300);
	}

	.entry-content h1,
	.entry-content h2,
	.entry-content h3 {
		margin: 3rem auto 3rem;
	}

	.footer-top-visible .footer-nav-widgets-wrapper,
	.footer-top-hidden #site-footer {
		margin-top: 0;
	}
}

@media (min-width: 1000px) {

	#site-header {
		z-index: 1;
	}

	.header-inner {
		padding: 1rem 0;
	}

	.site-description {
		display: block;
	}
}