/*
Theme Name: Re-Read
Theme URI: https://re-read.com
Author: Pablo
Description: Custom Gutenberg block theme for re-read.com
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.2
License: GPL-2.0-or-later
Text Domain: reread
*/

/* FONT FACES — 156 Reader (display). Lato se carga desde Google Fonts en functions.php. */
@font-face {
	font-family: "156 Reader";
	src: url(assets/fonts/156reader.otf) format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "156 Reader";
	src: url(assets/fonts/156reader_bold.otf) format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "156 Reader";
	src: url(assets/fonts/156reader_italic.otf) format("opentype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

:root {
	--reread-black: #000;
	--reread-dark: #1f1f1f;
	--reread-white: #fff;
	--reread-border: #d9d9d9;
	--reread-cream: #f5f0e8;
}

* {
	box-sizing: border-box;
}

[hidden] {
	display: none !important;
}

/* TIPOGRAFÍA — Las fuentes se definen en theme.json → settings.typography.fontFamilies.
   Para cambiar la fuente: editar ahí (un solo sitio). Los @font-face van en este archivo,
   sección "Font faces" (pendiente de confirmar las fuentes definitivas del diseño). */
body {
	margin: 0;
	color: var(--reread-black);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
}

body.reread-menu-open {
	overflow: hidden;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input {
	font: inherit;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Focus visible ────────────────────────────────── */

:focus-visible {
	outline: 2px solid var(--reread-black);
	outline-offset: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

/* ── Promo bar ────────────────────────────────────── */

.wp-site-blocks > .wp-block-template-part:first-child {
	position: sticky;
	top: 0;
	z-index: 40;
}

.reread-promo-bar {
	overflow: hidden;
	background: #000;
	color: #fff;
	font-size: 18px;
	letter-spacing: 0.04em;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--display);
}

.reread-promo-bar__track {
	display: flex;
	gap: 0;
	max-width: none;
	margin: 0;
	width: max-content;
	/* Shift distance (width of one copy) is set in px by site.js once
	   the clones are in place. Animation only runs once marked ready,
	   so it never starts before the track is fully populated. */
	--reread-promo-shift: 0px;
}

.reread-promo-bar__track.is-ready {
	animation: reread-promo-scroll 28s linear infinite;
}

.reread-promo-bar__text {
	flex: 0 0 auto;
	display: block;
	padding: 10px 20px;
	margin: 0;
	line-height: 30px;
}

@keyframes reread-promo-scroll {

	to {
		transform: translateX( calc( -1 * var( --reread-promo-shift ) ) );
	}
}

/* ── Header ───────────────────────────────────────── */

.reread-header {
	position: relative;
	z-index: 10;
	border-bottom: 4px solid var(--reread-black);
	background: var(--reread-white);
}

.reread-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1440px;
	min-height: 80px;
	padding: 10px 28px;
	margin: 0 auto;
}

/* ── Site logo / wordmark (core/site-logo) ──────────── */

.reread-logo {
	margin: 0;
	flex: 0 0 auto;
	height: 40px;
}

.reread-logo a {
	display: block;
	height: 100%;
}

.reread-logo img {
	display: block;
	height: 100% !important;
	width: auto !important;
}

/* ── Icon buttons ─────────────────────────────────── */

.reread-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 6px;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.reread-icon-button svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.reread-menu-icon {
	display: grid;
	gap: 4px;
	width: 22px;
}

.reread-menu-icon span {
	display: block;
	height: 1px;
	background: currentcolor;
}

.reread-header__actions {
	display: flex;
	align-items: center;
	gap: 3px;
}

/* ── WPML language slot ────────────────────────────
   Switcher accesible con <details>/<summary>; fallback estático
   cuando WPML no está activo. */

.reread-language-slot {
	display: flex;
	align-items: center;
}

/* Fallback estático (sin WPML): no interactivo, mismo aspecto que el switcher. */
.reread-language-fallback {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--reread-dark);
	cursor: default;
	user-select: none;
}

.reread-language-icon {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Switcher WPML: <details> con dropdown accesible. */
.reread-language-switcher {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.reread-language-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--reread-dark);
	cursor: pointer;
	user-select: none;
	list-style: none;
	border: 0;
	background: transparent;
}

.reread-language-switcher__toggle::-webkit-details-marker {
	display: none;
}

.reread-language-switcher__toggle::marker {
	display: none;
	content: "";
}

.reread-language-code {
	text-transform: uppercase;
}

.reread-language-switcher__list {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 30;
	min-width: 140px;
	max-width: 220px;
	margin: 4px 0 0;
	padding: 6px 0;
	list-style: none;
	background: var(--reread-white);
	border: 1px solid var(--reread-border);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.reread-language-switcher[open] > .reread-language-switcher__list {
	display: block;
}

.reread-language-switcher__list li + li {
	margin-top: 2px;
}

.reread-language-switcher__list a {
	display: block;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--reread-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.reread-language-switcher__list a:hover {
	background: var(--reread-cream);
}

.reread-language-switcher__list a:focus-visible {
	background: var(--reread-cream);
	outline: 2px solid var(--reread-dark);
	outline-offset: -2px;
}

/* ── Navigation block overrides ───────────────────── */

/* Disable WordPress native overlay menu toggle — scoped to site chrome */
.reread-menu .wp-block-navigation__responsive-container-open,
.reread-footer .wp-block-navigation__responsive-container-open {
	display: none !important;
}

/* Disable WordPress native overlay container — scoped to site chrome */
.reread-menu .wp-block-navigation__responsive-container,
.reread-footer .wp-block-navigation__responsive-container {
	display: block !important;
	position: static !important;
	inset: auto !important;
	background: transparent !important;
	opacity: 1 !important;
	padding: 0 !important;
}

/* ── Drawer (fixed/overlay en desktop y mobile) ───── */

.reread-menu-backdrop {
	position: fixed;
	z-index: 20;
	inset: 0;
	background: rgb(0 0 0 / 62%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	pointer-events: none;
}

.reread-menu-backdrop--visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.reread-menu {
	position: fixed;
	z-index: 30;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	width: min(360px, 86vw);
	padding: 24px 28px;
	flex-direction: column;
	background: var(--reread-white);
	box-shadow: 8px 0 24px rgb(0 0 0 / 12%);
	overflow-y: auto;
	visibility: hidden;
	transform: translateX(-100%);
	transition: visibility 0.3s, transform 0.3s ease;
	pointer-events: none;
}

.reread-menu--open {
	visibility: visible;
	transform: translateX(0);
	pointer-events: auto;
}

.reread-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 34px;
}

.reread-menu__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
}

.reread-close-icon::before,
.reread-close-icon::after {
	display: block;
	width: 22px;
	height: 1px;
	content: "";
	background: currentcolor;
}

.reread-close-icon::before {
	transform: rotate(45deg);
}

.reread-close-icon::after {
	transform: translateY(-1px) rotate(-45deg);
}

/* Navigation block inside the drawer */
.reread-menu .wp-block-navigation__container {
	flex-direction: column;
	padding: 0;
	margin: 0;
	list-style: none;
}

.reread-footer ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.reread-menu .wp-block-navigation-item {
	font-size: 20px;
}

.reread-menu .wp-block-navigation-item + .wp-block-navigation-item {
	margin-top: 12px;
}

/* Account navigation link inside drawer footer (core/navigation-link block) */
.reread-menu__footer .wp-block-navigation-item {
	font-size: inherit;
}

.reread-menu__footer .wp-block-navigation-item a {
	font-weight: 700;
}

.reread-footer a:hover,
.reread-footer a:focus-visible {
	text-decoration: underline;
}

.reread-footer__social .wp-block-social-link a {
	padding: 0;
}

.reread-menu .wp-block-navigation-item a:hover,
.reread-menu .wp-block-navigation-item a:focus-visible {
	text-decoration: underline;
}

.reread-menu__footer {
	padding-top: 36px;
	margin-top: auto;
	border-top: 1px solid var(--reread-border);
}

/* Redes sociales en franja blanca (iconos grandes) */
.reread-social-nav--footer-icons {
	padding: 80px 24px;
	border-top: 4px solid var(--reread-black);
}

.reread-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 80px;
	justify-content: center;
	padding: 0;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	list-style: none;
}

.reread-footer__social svg {
	display: block;
	width: 72px;
	height: 72px;
}

/* Redes sociales como iconos dentro del drawer */
.reread-drawer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Newsletter compacto dentro del drawer (solo visual) */
.reread-drawer-newsletter {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 18px;
	font-size: 13px;
}

.reread-drawer-newsletter__placeholder {
	flex: 1;
	min-width: 0;
	padding: 8px 12px;
	border: 1px solid var(--reread-border);
	border-radius: 999px;
	color: #757575;
	margin: 0;
}

.reread-drawer-newsletter__submit {
	display: inline-block;
	padding: 8px 16px;
	margin: 0;
	background: var(--reread-black);
	color: var(--reread-white);
	border-radius: 999px;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
}

.reread-main {
	min-height: 30vh;
}

/* ── Footer ───────────────────────────────────────── */

.reread-footer {
	background: var(--reread-white);
}

/* Newsletter slot (visual only, no functional form) */
.reread-newsletter {
	max-width: 620px;
	padding: 80px 24px;
	margin: 0 auto;
	text-align: center;
}

.reread-newsletter__icon svg {
	width: 84px;
	height: auto;
	fill: currentcolor;
}

.reread-newsletter h2,
.reread-newsletter__heading {
	margin: 18px 0 8px;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1;
}

.reread-newsletter p {
	margin: 5px 0;
}

.reread-newsletter__count {
	font-weight: 700;
}

/* Visual email & button: input pill + dark button side by side */
.reread-newsletter__form-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 25px;
}

.reread-newsletter__placeholder {
	display: inline-block;
	margin: 0;
	padding: 13px 18px;
	border: 1px solid var(--reread-black);
	border-radius: 999px;
	color: #757575;
	font-size: 16px;
	min-width: 220px;
	max-width: 300px;
	text-align: left;
	background: var(--reread-white);
	flex-shrink: 1;
}

/* Botón visual "Enviar" (solo decorativo, sin funcionalidad real) */
.reread-newsletter__submit {
	display: inline-block;
	margin: 0;
	padding: 13px 32px;
	background: var(--reread-black);
	color: var(--reread-white);
	border-radius: 999px;
	font-weight: 700;
	font-size: 16px;
	white-space: nowrap;
}

/* Override social-links block: show as row of icon+label */
.reread-footer__social.wp-block-social-links {
	gap: 80px;
}

/* Footer link columns */
.reread-footer__links {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	padding: 48px max(24px, calc((100% - 1384px) / 2));
	margin-bottom: 1px;
	background: var(--reread-black);
	color: var(--reread-white);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	text-transform: uppercase;
}

/* Override wp-block-columns so it behaves as a grid */
.reread-footer__links.wp-block-columns {
	display: grid;
	flex-wrap: unset;
	gap: 30px;
}

.reread-footer__links .wp-block-column {
	flex: none;
	flex-basis: auto;
	flex-grow: unset;
	margin-left: 0;
}

.reread-footer__links .wp-block-navigation-item + .wp-block-navigation-item {
	margin-top: 10px;
}

/* Social text links in 4th footer column */
.reread-footer__social-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.reread-footer__social-text a {
	color: inherit;
	text-decoration: none;
}

/* Public styling hooks for social navigation wrappers.
   Use .reread-social-nav--{location} to target specific locations. */

/* Legal bar */
.reread-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px max(24px, calc((100% - 1384px) / 2));
	background: var(--reread-black);
	color: var(--reread-white);
	font-size: 10px;
	line-height: 1.5;
	text-transform: uppercase;
}

.reread-footer__legal .wp-block-navigation__container {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 16px;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* ── Desktop (≥ 768px) ────────────────────────────── */

@media (min-width: 768px) {

	.reread-footer__links {
		grid-template-columns: repeat(4, 1fr);
	}

	.reread-footer__legal {
		flex-direction: row;
		align-items: center;
	}
}

/* ── Mobile (≤ 767px) ─────────────────────────────── */

@media (max-width: 767px) {

	.reread-header__inner {
		padding: 8px 14px;
	}

	.reread-logo {
		width: 90px;
	}

	.reread-header__actions {
		gap: 0;
	}

	.reread-header__actions .reread-icon-button {
		min-width: 44px;
		padding: 4px;
	}

	.reread-header__actions .reread-icon-button svg {
		width: 19px;
		height: 19px;
	}

	.reread-newsletter {
		padding: 58px 18px;
	}

	.reread-social-nav--footer-icons {
		padding: 58px 18px;
	}

	.reread-footer__social,
	.reread-footer__social.wp-block-social-links {
		gap: 20px;
	}

	.reread-footer__social svg {
		width: 48px;
		height: 48px;
	}

	.reread-newsletter__form-row {
		flex-direction: column;
		gap: 12px;
		align-items: stretch;
	}

	.reread-newsletter__placeholder {
		min-width: auto;
		width: 100%;
		max-width: none;
	}

	.reread-drawer-newsletter {
		flex-direction: column;
		align-items: stretch;
	}

	.reread-drawer-newsletter__submit {
		text-align: center;
	}

	.reread-footer__links {
		grid-template-columns: repeat(2, 1fr);
		padding: 38px 24px;
	}

	.reread-footer__legal {
		align-items: flex-start;
		flex-direction: column;
		padding: 16px 24px;
	}
}

/* ── Reduced motion ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

	.reread-promo-bar__track {
		animation: none;
	}

	.reread-menu,
	.reread-menu-backdrop {
		transition: none !important;
		animation: none !important;
	}
}

/* ── Classic WP menu reset / map to reread styles ─── */

.menu,
.menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.reread-menu .menu {
	display: flex;
	flex-direction: column;
}

.reread-menu .menu-item {
	font-size: 20px;
}

.reread-menu .menu-item + .menu-item {
	margin-top: 12px;
}

.reread-menu__footer .menu-item {
	font-size: inherit;
}

.reread-menu__footer .menu-item a {
	font-weight: 700;
}

.reread-menu .menu-item a:hover,
.reread-menu .menu-item a:focus-visible {
	text-decoration: underline;
}

.reread-header__actions .menu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 3px;
}

.reread-header__actions .menu-item {
	font-size: inherit;
}

.reread-footer__links .menu {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.reread-footer__links .menu-item {
	line-height: 1.35;
}

.reread-footer__legal .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 16px;
}

.reread-menu .current-menu-item > a,
.reread-menu .current-menu-ancestor > a,
.reread-menu .current_page_item > a,
.reread-menu .current_page_ancestor > a {
	font-weight: 700;
}

.reread-menu__top a,
nav.reread-nav-class a {
	color: inherit;
	text-decoration: none;
}

.menu-item-has-children > a::after {
	content: " \25BC";
	font-size: 0.65em;
	opacity: 0.6;
}