/*
Theme Name: OzWorkly
Theme URI: https://ozworkly.com/
Description: Child theme of Twenty Twenty-Five for ozworkly.com. Sober, readable and mobile-first. Navigation, breadcrumbs, child lists and legal links show published pages only.
Author: OzWorkly
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ozworkly
*/

/* Lists rendered by the ozworkly/* dynamic blocks. Colours come from theme.json (AA contrast). */
.oz-primary-nav ul,
.oz-legal-links ul,
.oz-breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
}

.oz-primary-nav a {
	display: inline-block;
	padding: 0.5rem 0; /* touch target >= 44px with line height */
	font-weight: 600;
	text-decoration: none;
}

.oz-primary-nav a:hover,
.oz-primary-nav a:focus-visible {
	text-decoration: underline;
}

.oz-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

.oz-breadcrumbs ol {
	gap: 0.25rem 0.5rem;
}

/* Separator: <span class="oz-sep" aria-hidden="true"> in the markup (not announced by screen readers). */
.oz-breadcrumbs .oz-sep {
	margin-right: 0.25rem;
	color: var(--wp--preset--color--contrast);
}

/* Long words or URLs in titles never overflow narrow screens. */
h1,
h2,
h3,
.wp-block-post-title,
.oz-breadcrumbs,
.oz-child-pages,
.oz-legal-links,
.oz-page-meta {
	overflow-wrap: anywhere;
}

.oz-breadcrumbs [aria-current="page"] {
	color: var(--wp--preset--color--contrast);
}

.oz-child-pages {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--accent);
}

.oz-child-pages ul {
	margin: 0;
	padding-left: 1.25rem;
}

.oz-child-pages li {
	margin: 0.5rem 0;
}

.oz-legal-links {
	font-size: var(--wp--preset--font-size--small);
}

.oz-independence {
	color: var(--wp--preset--color--contrast);
}

.oz-site-footer {
	background-color: var(--wp--preset--color--footer);
	color: var(--wp--preset--color--footer-text);
}

.oz-site-footer a,
.oz-site-footer .oz-independence {
	color: var(--wp--preset--color--footer-text);
}

a:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Inside the footer (#431407) the primary outline would be 3.02:1; use the footer text colour. */
.oz-site-footer a:focus-visible,
.oz-site-footer .wp-element-button:focus-visible {
	outline-color: var(--wp--preset--color--footer-text);
}

/* OZ14: logo SVG de cabecera (40 px móvil, 48 px escritorio) y de pie (40 px) */
.oz-site-logo, .oz-footer-logo-link { display: inline-block; line-height: 0; }
.oz-site-logo img { height: 40px; width: auto; max-width: 100%; }
.oz-footer-logo { margin-bottom: var(--wp--preset--spacing--30); line-height: 0; }
.oz-footer-logo img { height: 40px; width: auto; max-width: 100%; }
@media (min-width: 601px) { .oz-site-logo img { height: 48px; } }

/* Pie siempre abajo en páginas cortas */
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1 0 auto; width: 100%; }
.wp-site-blocks > footer { margin-top: 0; }

/* ===== OZ18: maquetación =====================================================
 * Paleta de theme.json: primary #C2410C (texto/enlaces/botones, 5.2:1 sobre blanco), contrast #1F2937,
 * base #FFFBF5, footer-text #FFF7ED (fondo claro de cajas), accent #F97316 SOLO decorativo (bordes).
 * Sin iconos ni fuentes externas: marcadores dibujados con CSS.
 */
:root {
	--oz-card-bg: #FFFFFF;
	--oz-soft-bg: var(--wp--preset--color--footer-text);
	--oz-line: rgba(31, 41, 55, 0.18);
	--oz-radius: 6px;
}

/* Portada: hero, tarjetas de directorios y «Recently reviewed» */
.oz-hero {
	padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30);
	border-bottom: 3px solid var(--wp--preset--color--accent);
}
.oz-hero > h1 { margin-top: 0; }
.oz-cards-section { margin-top: var(--wp--preset--spacing--50); }
.oz-cards-section > h2 { margin-bottom: var(--wp--preset--spacing--30); }
.oz-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.oz-card {
	margin: 0;
	padding: 1rem 1.125rem;
	background: var(--oz-card-bg);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--oz-line);
	border-top: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--oz-radius);
	overflow-wrap: anywhere;
}
.oz-card-title {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--large);
}
.oz-card-title a { color: var(--wp--preset--color--primary); text-decoration: none; }
.oz-card-title a:hover,
.oz-card-title a:focus-visible { text-decoration: underline; }
.oz-card-excerpt,
.oz-card-meta { margin: 0.25rem 0 0; font-size: var(--wp--preset--font-size--small); }
.oz-child-pages.oz-cards-section ul { padding-left: 0; }
.oz-child-pages.oz-cards-section li { margin: 0; }

/* Firma + Last reviewed (arriba) */
.oz-page-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	overflow-wrap: anywhere;
}
.oz-page-byline p { margin: 0; }
.oz-byline { font-weight: 600; }

/* Índice «On this page»: plegable (<details>); en escritorio se muestra abierto donde el navegador
   soporta ::details-content (si no, sigue siendo un desplegable funcional). */
.oz-toc {
	margin: var(--wp--preset--spacing--40) 0;
	padding: 0.75rem 1rem;
	background: var(--oz-card-bg);
	border: 1px solid var(--oz-line);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: var(--oz-radius);
	overflow-wrap: anywhere;
}
.oz-toc summary {
	cursor: pointer;
	font-weight: 650;
	color: var(--wp--preset--color--contrast);
	padding: 0.25rem 0;
}
.oz-toc summary:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.oz-toc ol { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.oz-toc li { margin: 0.35rem 0; }
/* Solo donde ::details-content existe se fija abierto (y el resumen deja de ser un control);
   en el resto sigue siendo un desplegable que se abre con un clic. */
@supports selector(::details-content) {
	@media (min-width: 782px) {
		.oz-toc-details::details-content { content-visibility: visible; block-size: auto; }
		.oz-toc-details summary { pointer-events: none; list-style: none; }
		.oz-toc-details summary::-webkit-details-marker { display: none; }
	}
}
/* Las anclas no quedan pegadas al borde al saltar desde el índice */
.wp-block-post-content h2[id] { scroll-margin-top: 1rem; }

/* Cajas de contenido (className en core/group) */
.oz-summary,
.oz-tip,
.oz-fact,
.oz-checklist,
.oz-example,
.oz-note {
	margin-block: var(--wp--preset--spacing--40);
	padding: 1rem 1.125rem;
	color: var(--wp--preset--color--contrast);
	border-radius: var(--oz-radius);
	overflow-wrap: anywhere;
}
.oz-summary > :first-child, .oz-tip > :first-child, .oz-fact > :first-child,
.oz-checklist > :first-child, .oz-example > :first-child, .oz-note > :first-child { margin-top: 0; }
.oz-summary > :last-child, .oz-tip > :last-child, .oz-fact > :last-child,
.oz-checklist > :last-child, .oz-example > :last-child, .oz-note > :last-child { margin-bottom: 0; }
/* «In short»: resumen destacado */
.oz-summary {
	background: var(--oz-soft-bg);
	border: 1px solid var(--oz-line);
	border-left: 5px solid var(--wp--preset--color--primary);
}
/* Consejo propio («Our tip») */
.oz-tip {
	background: var(--oz-card-bg);
	border: 1px solid var(--oz-line);
	border-left: 5px solid var(--wp--preset--color--accent);
}
/* Dato con fuente («X says…») */
.oz-fact {
	background: var(--oz-card-bg);
	border: 1px solid var(--oz-line);
	border-left: 5px solid var(--wp--preset--color--contrast);
}
/* Lista de comprobación: casillas dibujadas con CSS */
.oz-checklist {
	background: var(--oz-card-bg);
	border: 1px solid var(--oz-line);
}
.oz-checklist ul,
.oz-checklist ol { list-style: none; margin: 0; padding-left: 0; }
.oz-checklist li {
	margin: 0.5rem 0;
	padding-left: 1.875rem;
	/* Casilla de 1.05em x 1.05em con borde de 2px (sin pseudo-elementos ni imágenes externas) */
	--oz-box: 1.05em;
	--oz-c: var(--wp--preset--color--primary);
	background:
		linear-gradient(var(--oz-c), var(--oz-c)) 0 0.2em / var(--oz-box) 2px no-repeat,
		linear-gradient(var(--oz-c), var(--oz-c)) 0 calc(0.2em + var(--oz-box) - 2px) / var(--oz-box) 2px no-repeat,
		linear-gradient(var(--oz-c), var(--oz-c)) 0 0.2em / 2px var(--oz-box) no-repeat,
		linear-gradient(var(--oz-c), var(--oz-c)) calc(var(--oz-box) - 2px) 0.2em / 2px var(--oz-box) no-repeat;
}
/* Ejemplo etiquetado */
.oz-example {
	background: var(--wp--preset--color--base);
	border: 2px dashed var(--wp--preset--color--primary);
}
/* Aviso / independencia */
.oz-note {
	background: #F3F4F6;
	border: 1px solid var(--oz-line);
	border-left: 5px solid var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

/* Tablas: el scroll horizontal queda DENTRO de la tabla, nunca en la página */
.wp-block-table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-block: var(--wp--preset--spacing--40);
}
.wp-block-table table,
.wp-block-table table.has-fixed-layout {
	table-layout: auto;
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-table th,
.wp-block-table td {
	min-width: 7rem;
	padding: 0.5rem 0.625rem;
	border: 1px solid var(--oz-line);
	text-align: left;
	vertical-align: top;
	overflow-wrap: normal;
}
.wp-block-table thead th { background: var(--oz-soft-bg); }
.wp-block-table figcaption { font-size: var(--wp--preset--font-size--small); }

/* Botones (core/button) y descarga (core/file) con la paleta: blanco sobre #C2410C = 5.2:1 */
.wp-block-button__link,
.wp-block-file .wp-block-file__button {
	display: inline-block;
	background-color: var(--wp--preset--color--primary);
	color: #FFFFFF;
	border: 0;
	border-radius: var(--oz-radius);
	padding: 0.75rem 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.wp-block-file .wp-block-file__button:hover,
.wp-block-file .wp-block-file__button:focus-visible {
	background-color: var(--wp--preset--color--contrast);
	color: #FFFFFF;
}
.wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	overflow-wrap: anywhere;
}
.wp-block-file .wp-block-file__button { margin-left: 0; }