/*
Theme Name: DLC Lawyer
Description: Theme a medida para De La Cavallería — asesoría jurídica estratégica para empresas e inversionistas en México.
Author: Ade Cuellar
Version: 1.4.0
Requires at least: 6.0
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: dlc-lawyer
*/

/*
 * Los estilos del sitio viven en assets/css/main.css.
 * Aquí solo van ajustes propios de WordPress.
 */

/* Header fijo; se desplaza cuando está visible la barra de administración. */
.site-header { position: fixed; }
.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

/* Páginas internas (blog, páginas, entradas, 404). */
.page-content { padding: 180px 0 110px; }
.page-content .entry + .entry { margin-top: 70px; padding-top: 70px; border-top: 1px solid var(--line); }
.page-content .entry h2 a { color: inherit; text-decoration: none; }
.page-content .entry-meta { color: var(--cyan); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.page-content .entry-content > * { max-width: 760px; }
.page-content .entry-content img { max-width: 100%; height: auto; }
.legal-page .entry-content { max-width: 760px; }
.legal-page .entry-content > :first-child { margin-top: 0; }
.legal-page .entry-content h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin-top: 2em; }
.legal-page .entry-content h3 { margin-top: 1.75em; }
.legal-page .entry-content a { color: var(--cyan); }
.page-content .pagination { margin-top: 60px; display: flex; gap: 20px; }
.page-content .pagination a { color: var(--gray); }

.article-image { display: block; }

/* Índice del blog. */
.blog-hero {
	padding: 190px 0 85px;
	background: linear-gradient(110deg, rgba(35, 35, 35, .97), rgba(4, 151, 178, .44)), url('assets/images/library-hero.png') center 42%/cover;
	color: #fff;
}
.blog-hero h1 { margin-bottom: 18px; }
.blog-hero > .container > p:not(.eyebrow) { max-width: 700px; color: var(--light); font-size: 1.08rem; }
.blog-search { display: flex; max-width: 760px; margin-top: 34px; }
.blog-search input[type="search"] { min-width: 0; padding: 16px 18px; border: 0; border-radius: 6px 0 0 6px; }
.blog-search input[type="search"]:focus { outline: 3px solid #0497b2; outline-offset: -3px; }
.blog-search button { flex: 0 0 auto; padding: 16px 24px; border: 0; border-radius: 0 6px 6px 0; background: #0497b2; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.blog-search button:hover { background: #037f96; }
.blog-search button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.blog-listing { background: #fff; }
.blog-section-heading { margin-bottom: 34px; }
.blog-section-heading h2 { margin-top: 0; }
.featured-post { display: grid; grid-template-columns: 1.25fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--white); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.featured-post-image { min-height: 420px; background-position: center; background-size: cover; }
.image-fallback { background: linear-gradient(135deg, rgba(4, 151, 178, .3), rgba(48, 48, 48, .72)), url('assets/images/library-hero.png') center/cover; }
.featured-post-content { align-self: center; padding: 48px; }
.featured-post-content h2 { font-size: clamp(2rem, 3.5vw, 3.2rem); }
.featured-post-content h2 a,
.post-card h3 a { color: inherit; text-decoration: none; }
.post-meta { color: #777; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.post-meta a { color: #0497b2; text-decoration: none; }
.blog-read-more { display: inline-block; margin-top: 8px; color: #0497b2; font-weight: 700; text-decoration: none; }
.blog-read-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.blog-grid-heading { margin-top: 90px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.post-card { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .06); transition: box-shadow .2s, transform .2s; }
.post-card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .11); transform: translateY(-3px); }
.post-card-image { display: block; aspect-ratio: 16 / 10; background-position: center; background-size: cover; }
.post-card-content { padding: 24px; }
.post-card-content h3 { margin: 8px 0 14px; }
.post-card-content > p:not(.post-meta) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: #666; }
.blog-pagination { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 60px; }
.blog-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.blog-pagination .page-numbers { min-width: 42px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 5px; color: var(--gray); text-align: center; text-decoration: none; }
.blog-pagination .current,
.blog-pagination a:hover { border-color: #0497b2; background: #0497b2; color: #fff; }
.blog-pagination .prev,
.blog-pagination .next { width: auto; }
.blog-empty { padding: 50px; border-left: 3px solid #0497b2; background: var(--white); }

#nosotros.intro {
	overflow: hidden;
	margin-top: -40px;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
#nosotros .intro-image { border-radius: 0 10px 10px 0; }

/* Selector de idioma: opción sin traducción para la página actual. */
.language .is-unavailable { color: #fff; opacity: .4; cursor: default; }

.main-nav .header-cta {
	padding: 10px 16px;
	border: 0;
	border-radius: 6px;
	background: #0497b2;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
	color: #fff;
	transition: background-color .2s, box-shadow .2s, transform .2s;
}
.main-nav .header-cta:hover { background: #037f96; box-shadow: 0 6px 16px rgba(0, 0, 0, .22); transform: translateY(-1px); }
.main-nav .header-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.dark-band .button.outline {
	border-color: #0497b2;
	border-radius: 6px;
	background: #0497b2;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
	color: #fff;
	transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.dark-band .button.outline:hover {
	border-color: #037f96;
	background: #037f96;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
	transform: translateY(-1px);
}
.dark-band .button.outline:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Proceso: línea de tiempo horizontal en escritorio. */
.process-grid {
	position: relative;
	gap: 40px;
}
.process-grid::before {
	content: "";
	position: absolute;
	top: 22px;
	left: 22px;
	right: 22px;
	height: 2px;
	background: #0497b2;
}
.process-grid article {
	position: relative;
	padding-top: 0;
	border-top: 0;
}
.process-grid b {
	position: relative;
	z-index: 1;
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border: 2px solid #0497b2;
	border-radius: 50%;
	background: var(--white);
	color: #0497b2;
	font-size: .78rem;
}
.process-grid h3 { margin-top: 22px; }

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

/* Formulario inteligente de contacto. */
.contact { background: #0497b2; scroll-margin-top: 86px; }
.contact .split { align-items: start; }
#contact-form.form-widget { overflow: hidden; padding: 28px; border: 1px solid #ffffff26; border-radius: 10px; background: #484848; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
#contact-form .form-progress { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 10px; }
#contact-form .form-progress span { position: relative; display: grid; gap: 7px; color: #aaa; font-size: .7rem; text-align: center; }
#contact-form .form-progress span::before { content: ""; position: absolute; z-index: 0; top: 15px; left: 0; right: 0; height: 1px; background: #777; }
#contact-form .form-progress span:first-child::before { left: 50%; }
#contact-form .form-progress span:last-child::before { right: 50%; }
#contact-form .form-progress b { position: relative; z-index: 1; display: grid; width: 30px; height: 30px; margin: auto; place-items: center; border: 1px solid #777; border-radius: 50%; background: #484848; color: inherit; }
#contact-form .form-progress .is-active,
#contact-form .form-progress .is-complete { color: #fff; }
#contact-form .form-progress .is-active b,
#contact-form .form-progress .is-complete b { border-color: #0497b2; background: #0497b2; }
#contact-form .form-step { display: grid; gap: 16px; }
#contact-form .form-step[hidden] { display: none; }
#contact-form .form-step-heading { margin: 8px 0 4px; }
#contact-form .form-step-heading small { color: #0497b2; letter-spacing: .1em; text-transform: uppercase; }
#contact-form .form-step-heading h3 { margin: 4px 0; color: #fff; font-size: 1.8rem; }
#contact-form .form-step-heading h3:focus { outline: none; }
#contact-form .form-step-heading p { margin: 5px 0 0; color: var(--light); font-size: .9rem; }
#contact-form .form-field { display: grid; gap: 5px; }
#contact-form .form-field > label:not(.check) { color: #fff; }
#contact-form .optional { font-weight: 400; opacity: .8; }
#contact-form .phone-fields { display: grid; grid-template-columns: minmax(145px, .8fr) 1.5fr; gap: 10px; }
#contact-form .conditional-fields { display: grid; gap: 16px; padding: 18px; border: 1px solid #777; border-left: 3px solid #0497b2; }
#contact-form .conditional-fields[hidden] { display: none; }
#contact-form .field-error { min-height: 1.2em; color: #ffd0d0; font-size: .78rem; }
#contact-form [aria-invalid="true"] { border-color: #ff9c9c; outline: 2px solid transparent; }
#contact-form [aria-invalid="true"]:focus { outline-color: #ffb5b5; }
#contact-form input:not([type="checkbox"]):focus,
#contact-form select:focus,
#contact-form textarea:focus { border-color: #0497b2; outline: 2px solid #0497b2; outline-offset: 1px; }
#contact-form input[type="checkbox"] { accent-color: #0497b2; }
#contact-form .check { color: var(--light); }
#contact-form .check a,
#contact-form .check a:visited { color: var(--cyan); text-decoration-color: currentColor; text-underline-offset: 3px; }
#contact-form .check a:hover { color: #fff; }
#contact-form .check a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
#contact-form .consent-field { gap: 3px; }
#contact-form .form-status { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 0; padding: 13px 15px; border: 1px solid transparent; border-radius: 6px; color: #fff; font-size: .9rem; line-height: 1.45; }
#contact-form .form-status:empty { display: none; }
#contact-form .form-status::before { flex: 0 0 auto; font-weight: 700; }
#contact-form .form-status.is-loading { border-color: #ffffff38; background: #ffffff0c; }
#contact-form .form-status.is-loading::before { content: ""; width: 15px; height: 15px; margin-top: 2px; border: 2px solid #ffffff66; border-top-color: #fff; border-radius: 50%; animation: dlc-spin .75s linear infinite; }
#contact-form .form-status.is-success { border-color: #8ad9b0; background: #1d684b; }
#contact-form .form-status.is-success::before { content: "✓"; }
#contact-form .form-status.is-error { border-color: #ffaaa5; background: #713b3b; }
#contact-form .form-status.is-error::before { content: "!"; display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .75rem; }
@keyframes dlc-spin { to { transform: rotate(360deg); } }
#contact-form .form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#contact-form button:disabled { opacity: .65; cursor: progress; }
#contact-form .form-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 4px; }
#contact-form .form-actions button { padding: 12px 18px; border-radius: 6px; font: inherit; cursor: pointer; }
#contact-form .form-next,
#contact-form .dark-button { border: 1px solid #0497b2; background: #0497b2; color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); }
#contact-form .form-back,
#contact-form .form-skip { border: 1px solid #888; background: transparent; color: #fff; }
#contact-form .form-back { margin-right: auto; }
#contact-form .form-skip { border-color: #ffffff38; background: #ffffff0a; color: var(--light); font-size: .9rem; }
#contact-form .form-skip:hover { background: #ffffff16; color: #fff; }
#contact-form .form-actions button:hover { border-color: #fff; }
#contact-form .dark-button { border-radius: 6px; transition: background-color .2s, border-color .2s, color .2s; }
#contact-form .dark-button:hover { background: #fff; border-color: #fff; color: var(--gray); }
#contact-form .dark-button:focus { outline: none; }
#contact-form .dark-button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Navegación compacta para tablet y pantallas intermedias. */
@media (max-width: 1100px) {
	.site-header { padding: 18px 24px; }
	#nosotros.intro { margin-top: 24px; }
	.menu-toggle { display: block; }
	.main-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - 76px);
		padding: 24px;
		overflow-y: auto;
		align-items: flex-start;
		flex-direction: column;
		gap: 18px;
		background: #1f1e1f;
		box-shadow: 0 12px 24px rgba(0, 0, 0, .22);
	}
	.main-nav.is-open { display: flex; }
	.main-nav > a:not(.header-cta) { width: 100%; padding: 3px 0; }
	.main-nav .header-cta { margin-top: 2px; }
}

@media (max-width: 520px) {
	#contact-form .phone-fields { grid-template-columns: 1fr; }
	#contact-form.form-widget { padding: 22px 18px; }
	#contact-form .form-progress span { font-size: .62rem; }
	#contact-form .form-actions { display: grid; grid-template-columns: 1fr; }
	#contact-form .form-actions button { width: 100%; }
	#contact-form .form-back { margin-right: 0; }
}

@media (max-width: 850px) {
	.featured-post { grid-template-columns: 1fr; }
	.featured-post-image { min-height: 320px; }
	.featured-post-content { padding: 34px; }
	.post-grid { grid-template-columns: repeat(2, 1fr); }
	#nosotros .intro-image { border-radius: 0 0 10px 10px; }
	.process-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.process-grid::before {
		top: 22px;
		bottom: 22px;
		left: 21px;
		right: auto;
		width: 2px;
		height: auto;
	}
	.process-grid article { min-height: 90px; padding-left: 70px; }
	.process-grid article:last-child::after {
		content: "";
		position: absolute;
		top: 22px;
		bottom: 0;
		left: 21px;
		width: 2px;
		background: var(--white);
	}
	.process-grid b { position: absolute; top: 0; left: 0; }
	.process-grid h3 { margin-top: 0; }
	.process-grid article > :last-child { margin-bottom: 0; }
}

@media (max-width: 620px) {
	.blog-hero { padding: 150px 0 65px; }
	.blog-search { display: grid; }
	.blog-search input[type="search"] { border-radius: 6px 6px 0 0; }
	.blog-search button { border-radius: 0 0 6px 6px; }
	.featured-post-image { min-height: 230px; }
	.featured-post-content { padding: 26px; }
	.blog-grid-heading { margin-top: 65px; }
	.post-grid { grid-template-columns: 1fr; }
	.blog-empty { padding: 30px; }
}