/*
Theme Name: ARDE
Theme URI: https://arde.global/
Author: ARDE
Author URI: https://arde.global/
Description: Custom block theme for ARDE — "Acaba con las pieles". Forked from WordPress Twenty Twenty-Five 1.4.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.229
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arde
Tags: full-site-editing, block-patterns, block-styles, editor-style, custom-logo, custom-menu, featured-images, translation-ready, wide-blocks, accessibility-ready
*/

/* Global safety net: prevent any single overflowing block from making
   the whole page horizontally scrollable. Needed on BOTH <html> and
   <body> — on html alone it doesn't propagate to the viewport in
   Chromium, on body alone empirically some cases still leaked through.
   `clip` (vs `hidden`) doesn't create a scroll container, so
   position:sticky/fixed descendants behave normally.
   Individual oversized blocks should still be sized to fit — this is
   just a catch-all. */
html,
body {
	overflow-x: clip;
}

/* Font smoothing is deliberately left at the browser default. An earlier
   pass forced grayscale antialiasing site-wide on the grounds that it looked
   closer to Figma's canvas, but Figma defines no such property (it is not
   part of any exported style), the switch only affects macOS/iOS WebKit and
   Blink, and it renders Raleway/Anton visibly lighter than production does —
   decided 2026-08-20. Do not reintroduce `-webkit-font-smoothing:
   antialiased` without a design decision behind it. */

/* "x-guides" — the faint diagonal X lines behind the top of the page.
   Every desktop page frame in the Figma redesign (INICIO 2091:3430,
   LLAMARADA 2091:3479, …) carries the same layer: a 1433×970 box anchored
   to the page's top-left with two X's — (0,281)→(1433,667) and its mirror,
   repeated 294px lower — 1px #A7A192 (Foreground) at 20% opacity. It is
   page-anchored (scrolls with the content), not fixed, and the mobile frame
   (2014:1055) has none. Sections with their own background (heroes, cards)
   cover it, so on the homepage it only peeks out below the 800px hero.
   Replaces the legacy web-personalizacion plugin's fixed ∓65° strips
   (dequeued in functions.php arde_dequeue_legacy_skin) — swapped for the
   Figma geometry 2026-08-17. z-index:-1 in the root stacking context paints
   it above the canvas background (body's cream propagates there) but
   beneath every in-flow block. Scales with the layout width like the
   Figma frame (1433 ≈ 1440 minus the scrollbar). */
body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1433 / 970;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1433 970' preserveAspectRatio='none' fill='none' stroke='%23A7A192' stroke-width='1'%3E%3Cpath d='M0 281L1433 667M1433 281L0 667M0 575L1433 961M1433 575L0 961'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	opacity: 0.2;
	z-index: -1;
	pointer-events: none;
}
@media (max-width: 781px) {
	body::before {
		display: none;
	}
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}

/* ==========================================================================
   ARDE content area — vertical rhythm between header / content / footer
   ========================================================================== */

.arde-v-2-main {
	padding-bottom: var(--wp--preset--spacing--arde-v-2-60);
	/* The header template-part is position:absolute (cream pill floats),
	   but WP still applies blockGap as margin-top between flow siblings,
	   leaving a 24px cream strip above main. Zero it so a full-bleed hero
	   actually reaches the viewport top. Sub-pages manage their own top
	   spacing via their first block's padding. */
	margin-top: 0;
}

/* Templates that render their own title/body directly (single post, archives,
   blog index, search) get top breathing room below the header pill.
   page / front-page deliberately omit it — their composed page content
   (often a full-bleed hero) manages its own top spacing. */
.arde-v-2-single {
	padding-top: var(--wp--preset--spacing--arde-v-2-60);
}

.arde-v-2-archive-title {
	/* Inside .arde-v-2-page-header (archive / search): styled as the page h1
	   by _shared.css; the header's own padding sets the rhythm. */
	margin: 0;
}

.arde-v-2-single__meta {
	gap: var(--wp--preset--spacing--arde-v-2-40);
	margin-top: var(--wp--preset--spacing--arde-v-2-30);
	color: var(--wp--preset--color--arde-v-2-foreground);
}