/*!
Theme Name: otinglado
Theme URI: https://github.com/raulfg/o-tinglado
Author: Raúl Fernández
Author URI: https://clink.es
Description: Tema para O Tinglado — Xunta de Galicia
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: otinglado
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS
----------------------------------------------------------------
1. Modern Reset
2. Box Model
3. Base Elements
4. Forms
5. WordPress Core Classes
   5.1 Navigation
   5.2 Posts & Pages
   5.3 Comments
   5.4 Media & Captions
   5.5 Galleries
   5.6 Accessibility
   5.7 Alignments
   5.8 Plugins
--------------------------------------------------------------*/


/* ============================================================
   1. MODERN RESET
   Reemplaza el obsoleto normalize.css v8 (2019).
   Basado en el enfoque de reset moderno (2024):
   - Sin hacks para IE/Edge Legacy, Firefox < 65, Safari < 12
   - Usa cascade layers si el navegador los soporta
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin:     0;
	padding:    0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust:         100%;
	tab-size:                 4;
}

body {
	min-height:              100dvh;
	line-height:             inherit;
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Evita que imágenes y vídeos desborden su contenedor */
img,
picture,
video,
canvas,
svg {
	display:   block;
	max-width: 100%;
}

/* Imágenes inline dentro de párrafos (WordPress clásico) */
p img,
li img,
td img {
	display: inline;
}

/* Los inputs heredan la fuente del body */
input,
button,
textarea,
select,
optgroup {
	font:      inherit;
	color:     inherit;
	margin:    0;
}

/* Botones sin estilos por defecto del navegador */
button {
	cursor:           pointer;
	background:       none;
	border:           none;
	-webkit-appearance: none;
	appearance:       none;
}

/* Textarea sin resize horizontal */
textarea {
	resize:    vertical;
	width:     100%;
	overflow:  auto;
}

/* Evita desbordamiento de texto en encabezados largos */
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

p, li, blockquote {
	overflow-wrap: break-word;
}

/* Tablas */
table {
	border-collapse: collapse;
	border-spacing:  0;
}

/* Details y summary */
details {
	display: block;
}

summary {
	display:      list-item;
	cursor:       pointer;
}

/* Hidden nativo */
[hidden] {
	display: none !important;
}

/* Abbr */
abbr[title] {
	text-decoration:        underline dotted;
	cursor:                 help;
	text-underline-offset:  2px;
}

/* Sub y Sup */
sub,
sup {
	font-size:      75%;
	line-height:    0;
	position:       relative;
	vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top:    -0.5em;  }

/* Iframes y embeds responsive */
iframe,
embed,
object {
	max-width: 100%;
}

/* Figure sin márgenes del navegador */
figure {
	margin: 0;
}


/* ============================================================
   2. BOX MODEL
   Ya incluido en el reset (*{ box-sizing: border-box })
   ============================================================ */


/* ============================================================
   3. BASE ELEMENTS
   Solo lo que no está en typography.css ni variables.css.
   Los colores y fuentes se definen vía custom properties del tema.
   ============================================================ */

body {
	background-color: var(--ot-color-bg, #ffffff);
	color:            var(--ot-color-text, #007bc4);
}

hr {
	border:     none;
	border-top: 1px solid var(--ot-border-color, #cce4f3);
	margin:     var(--ot-space-8, 2rem) 0;
	height:     0;
	overflow:   visible;
}

ul,
ol {
	padding-left: var(--ot-space-6, 1.5rem);
}

li {
	margin-bottom: var(--ot-space-2, 0.5rem);
}

li > ul,
li > ol {
	margin-top:    var(--ot-space-2, 0.5rem);
	margin-bottom: 0;
}

dt {
	font-weight: var(--ot-weight-bold, 700);
}

dd {
	margin-left:   var(--ot-space-6, 1.5rem);
	margin-bottom: var(--ot-space-4, 1rem);
}

mark {
	background:  #fff3cd;
	color:       inherit;
	padding:     0.1em 0.3em;
	border-radius: 2px;
}

ins {
	background:      #d1f0e0;
	text-decoration: none;
}

del {
	color: var(--ot-color-text-muted, #4a7ea0);
}

big {
	font-size: 115%;
}

table {
	width:         100%;
	margin-bottom: var(--ot-space-6, 1.5rem);
}

th {
	text-align:  left;
	font-weight: var(--ot-weight-bold, 700);
}


/* ============================================================
   4. FORMS
   Solo estructura y accesibilidad. Los colores vienen de variables.css
   ============================================================ */

fieldset {
	border:  1px solid var(--ot-border-color, #cce4f3);
	padding: var(--ot-space-4, 1rem) var(--ot-space-6, 1.5rem);
	border-radius: var(--ot-radius-md, 4px);
}

legend {
	padding:    0 var(--ot-space-2, 0.5rem);
	font-weight: var(--ot-weight-semibold, 600);
}

label {
	display:     block;
	font-weight: var(--ot-weight-medium, 500);
	margin-bottom: var(--ot-space-2, 0.5rem);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
input[type="color"],
select,
textarea {
	display:       block;
	width:         100%;
	border:        1px solid var(--ot-border-color, #cce4f3);
	border-radius: var(--ot-radius-md, 4px);
	padding:       var(--ot-space-2, 0.5rem) var(--ot-space-3, 0.75rem);
	color:         var(--ot-color-text, #007bc4);
	background:    var(--ot-white, #ffffff);
	transition:    border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
select:focus,
textarea:focus {
	outline:      none;
	border-color: var(--ot-blue, #007bc4);
	box-shadow:   0 0 0 3px rgba(0, 123, 196, 0.15);
}

input[type="checkbox"],
input[type="radio"] {
	width:  auto;
	height: auto;
	accent-color: var(--ot-blue, #007bc4);
}

input[type="submit"],
button[type="submit"] {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	padding:          var(--ot-space-3, 0.75rem) var(--ot-space-6, 1.5rem);
	background:       var(--ot-blue, #007bc4);
	color:            var(--ot-white, #ffffff);
	border:           2px solid var(--ot-blue, #007bc4);
	border-radius:    var(--ot-radius-sm, 2px);
	font-weight:      var(--ot-weight-semibold, 600);
	cursor:           pointer;
	transition:       background 0.2s ease, border-color 0.2s ease;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
	background:   var(--ot-blue-dark, #005f9a);
	border-color: var(--ot-blue-dark, #005f9a);
}


/* ============================================================
   5. WORDPRESS CORE CLASSES
   ============================================================ */

/* 5.1 Navigation
   ------------------------------------------------------------ */

/* La navegación principal la gestiona header.css.
   Aquí solo el comportamiento de la navegación de entradas. */
.posts-navigation,
.post-navigation,
.comment-navigation {
	margin-bottom: var(--ot-space-8, 2rem);
}

.posts-navigation .nav-links,
.post-navigation .nav-links,
.comment-navigation .nav-links {
	display:         flex;
	justify-content: space-between;
	gap:             var(--ot-space-4, 1rem);
}

.posts-navigation .nav-previous,
.post-navigation .nav-previous,
.comment-navigation .nav-previous {
	flex: 1 0 50%;
}

.posts-navigation .nav-next,
.post-navigation .nav-next,
.comment-navigation .nav-next {
	text-align: right;
	flex:       1 0 50%;
}


/* 5.2 Posts & Pages
   ------------------------------------------------------------ */

.sticky {
	display: block;
}

.updated:not(.published) {
	display: none;
}

.page-links {
	clear:         both;
	margin-bottom: var(--ot-space-6, 1.5rem);
}


/* 5.3 Comments
   ------------------------------------------------------------ */

.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}


/* 5.4 Media & Captions
   ------------------------------------------------------------ */

.wp-caption {
	max-width:     100%;
	margin-bottom: var(--ot-space-6, 1.5rem);
}

.wp-caption img[class*="wp-image-"] {
	display:      block;
	margin-left:  auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text,
.wp-caption-text {
	margin-top: var(--ot-space-2, 0.5rem);
	font-size:  var(--ot-text-sm, 0.875rem);
	color:      var(--ot-color-text-muted, #4a7ea0);
	text-align: center;
}

/* Smileys de WP */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border:        none;
	margin-top:    0;
	margin-bottom: 0;
	padding:       0;
}

.custom-logo-link {
	display: inline-block;
}


/* 5.5 Galleries
   ------------------------------------------------------------ */

.gallery {
	display:       grid;
	gap:           var(--ot-space-4, 1rem);
	margin-bottom: var(--ot-space-6, 1.5rem);
}

.gallery-item {
	width:      100%;
	text-align: center;
}

.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }

.gallery-caption {
	display:    block;
	font-size:  var(--ot-text-sm, 0.875rem);
	color:      var(--ot-color-text-muted, #4a7ea0);
	margin-top: var(--ot-space-1, 0.25rem);
}

@media (max-width: 600px) {
	.gallery-columns-4,
	.gallery-columns-5,
	.gallery-columns-6,
	.gallery-columns-7,
	.gallery-columns-8,
	.gallery-columns-9 {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* 5.6 Accessibility
   ------------------------------------------------------------ */

.screen-reader-text {
	border:     0;
	clip:       rect(1px, 1px, 1px, 1px);
	clip-path:  inset(50%);
	height:     1px;
	margin:     -1px;
	overflow:   hidden;
	padding:    0;
	position:   absolute !important;
	width:      1px;
	word-wrap:  normal !important;
}

.screen-reader-text:focus {
	background:    var(--ot-color-surface, #f0f7fc);
	border-radius: var(--ot-radius-md, 4px);
	box-shadow:    var(--ot-shadow-md);
	outline:       2px solid var(--ot-blue, #007bc4);
	outline-offset: 2px;
	clip:          auto !important;
	clip-path:     none;
	color:         var(--ot-blue, #007bc4);
	display:       block;
	font-size:     var(--ot-text-sm, 0.875rem);
	font-weight:   var(--ot-weight-bold, 700);
	height:        auto;
	left:          var(--ot-space-4, 1rem);
	top:           var(--ot-space-4, 1rem);
	line-height:   normal;
	padding:       var(--ot-space-3, 0.75rem) var(--ot-space-6, 1.5rem);
	text-decoration: none;
	width:         auto;
	z-index:       var(--ot-z-modal, 1200);
}

#primary[tabindex="-1"]:focus {
	outline: 0;
}


/* 5.7 Alignments
   ------------------------------------------------------------ */

.alignleft {
	float:         left;
	margin-right:  var(--ot-space-6, 1.5rem);
	margin-bottom: var(--ot-space-4, 1rem);
}

.alignright {
	float:         right;
	margin-left:   var(--ot-space-6, 1.5rem);
	margin-bottom: var(--ot-space-4, 1rem);
}

.aligncenter {
	clear:        both;
	display:      block;
	margin-left:  auto;
	margin-right: auto;
}

.alignwide {
	margin-left:  calc(-1 * var(--ot-gutter, 2rem));
	margin-right: calc(-1 * var(--ot-gutter, 2rem));
}

.alignfull {
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width:    100vw;
	width:        100vw;
}


/* 5.8 Plugins
   ------------------------------------------------------------ */

/* Jetpack Infinite Scroll */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

.infinity-end.neverending .site-footer {
	display: block;
}