/*
Theme Name: Cocina Simple
Description: Tema de bloques independiente: identidad Cocina Simple, listados automáticos y fichas de producto reutilizables.
Version: 3.2.1
Requires at least: 6.6
Requires PHP: 7.4
Author: Cocina Simple
Text Domain: cocina-simple-v10
License: GPL-2.0-or-later
*/

/* Defaults use low specificity. Colors, typography and layout remain editable.
   No !important rules and no global overrides of column widths or block padding. */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body) { margin: 0; min-height: 100vh; }
:where(.wp-site-blocks > *) { margin-block: 0; }
:where(.cs-shell, .cs-main, .cs-yosi, .cs-product-flow) { min-width: 0; overflow-wrap: anywhere; }
:where(img, video) { max-width: 100%; height: auto; }
:where(iframe) { max-width: 100%; }
:where(.wp-block-table) { overflow-x: auto; }
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}
:where(.wp-block-post-title a, .wp-block-navigation a) { text-decoration: none; }
:where(.wp-block-post-title a:hover, .wp-block-navigation a:hover) { text-decoration: underline; }
:where(.cs-hero) {
    position: relative;
    isolation: isolate;
    min-height: 310px;
    height: 50vh;
    max-height: 540px;
    text-align: center;
    background-color: #b88f6b;
}
:where(.cs-hero)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('assets/cocina-atardecer.webp') center 78% / cover no-repeat;
    pointer-events: none;
}
:where(.cs-hero)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(243,225,203,.48), rgba(242,224,204,.27) 30%, transparent 48%, transparent 88%, rgba(201,173,145,.25) 92%, rgba(201,173,145,.72) 97%, #c9ad91);
    pointer-events: none;
}
:where(.cs-hero-title) {
    font-size: clamp(2.5rem, 4.9vw, 5rem);
    font-weight: 500;
    font-style: italic;
    letter-spacing: -.035em;
    line-height: 1.05;
}
:where(.cs-tagline) { font-size: clamp(.95rem, 1.65vw, 1.3rem); }
:where(.cs-header) { text-align: center; }
:where(.cs-yosi-image img) { display: block; width: 100%; height: auto; aspect-ratio: 1312 / 1199; border-radius: 10px; }
:where(.cs-footer) { text-align: center; }

/* List card structure is controlled by native Groups/Columns. Only media
   containment and long-link wrapping need component CSS. */
:where(.cs-card-image) { max-width: 300px; }
:where(.cs-card-image img) { display: block; }
:where(.cs-ad-slot) { min-height: 120px; }

/* A float, not two permanently separate columns: prose resumes full width.
   Only this wrapper creates a formatting context; the prose wrapper must not. */
:where(.cs-product-flow) { display: flow-root; }
.cs-product-flow > .cs-product-image {
    float: left;
    max-width: min(400px, 48%);
    margin-block: 0 24px;
    margin-inline: 0 24px;
}
.cs-product-flow > .cs-product-image img { display: block; }
.cs-product-flow > .wp-block-post-content,
.cs-product-flow > .wp-block-post-excerpt {
    display: block;
    clear: none;
    margin-inline: 0;
}
.cs-product-flow > .wp-block-post-content > :first-child { margin-block-start: 0; }
.cs-product-flow > .wp-block-post-content > :where(h2, h3, h4) { clear: none; }
/* Complex additions start below the image, preserving readable galleries. */
.cs-product-flow > .wp-block-post-content > :where(.wp-block-gallery, .wp-block-table, .wp-block-columns, .alignwide, .alignfull) { clear: both; }
:where(.cs-product-actions) { clear: both; }

/* Native Columns handle their own stacking; extend the outer V8 breakpoint
   to 800px without replacing desktop flex-basis values chosen in the editor. */
@media (max-width: 800px) {
    .cs-shell { display: block; }
    .cs-shell > .wp-block-column + .wp-block-column { margin-block-start: 32px; }
}
@media (max-width: 650px) {
    :where(.cs-hero) { height: 50svh; min-height: 350px; max-height: 520px; }
    :where(.cs-hero)::before { background-position: 52% 72%; }
    :where(.cs-hero-title) { font-size: clamp(2.4rem, 8.4vw, 3.6rem); }
    .cs-product-flow > .cs-product-image {
        float: none;
        max-width: 100%;
        margin-inline: auto;
        margin-block-end: 24px;
    }
}

/* V9.1: no introductory excerpt before the full article. */
.cs-product-flow > .cs-product-image + .wp-block-post-content { margin-block-start: 0; }

/* V9.2: only the horizontal gap. Native Columns consume this default via
   spacing.blockGap.left; widths, padding, row gap and mobile stacking stay intact. */
:where(.cs-shell) { --cs-shell-column-gap: clamp(48px, 4.5vw, 80px); }

/* V9.2.1: apply the shared horizontal gap directly on desktop, independently
   of WordPress blockGap CSS generation. Vertical spacing and mobile are unchanged. */
@media (min-width: 801px) {
    .wp-block-columns.cs-shell {
        column-gap: var(--cs-shell-column-gap);
    }
}

/* V10 stage 2: preserve font sizes; allocate the available width after the gap. */
@media (min-width: 1025px) {
    body .wp-block-columns.cs-shell {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
    }
}
/* Stack the entire sidebar after main on tablets and small screens.
   Specificity beats WordPress body .is-layout-flex without !important. */
@media (max-width: 1024px) {
    body .wp-block-columns.cs-shell { display: block; }
    .cs-shell > .wp-block-column + .wp-block-column { margin-block-start: 32px; }
}
/* Four cards retain native Columns blocks; two per row, then one. */
body .wp-block-columns.cs-navigation-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 600px) {
    body .wp-block-columns.cs-navigation-cards { grid-template-columns: minmax(0, 1fr); }
}
.cs-yosi img { max-width: 100%; height: auto; }
.cs-sidebar-map { overflow-wrap: anywhere; }
.cs-sidebar-map ul { padding-inline-start: 1.25em; }

/* Shared sidebar section spacing, including template-part wrappers. */
.cs-yosi > * + * { margin-block-start: 50px; }
/* The approved square banner uses a native Image block and a full-image link. */
.cs-sidebar-ad .wp-block-image img { width: 100%; aspect-ratio: 1; object-fit: contain; }

/* V11: narrowly scoped reading alignment, contextual navigation and touch targets. */
body .cs-main > .cs-reading { max-width: var(--wp--style--global--content-size, 1120px); margin-inline: 0; }
.cs-contextual { clear: both; margin-block-start: 32px; }
.cs-contextual .cs-actions, .cs-contextual .cs-simple { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.cs-contextual .cs-actions { margin-block-end: 24px; }
.cs-contextual .cs-action { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 20px; border-radius: 4px; background: #433a30; color: #fff8ee; line-height: 1.4; text-decoration: none; }
.cs-contextual .cs-action:hover { text-decoration: underline; }
.cs-contextual .cs-simple a { padding-block: 8px; }
.cs-header .wp-block-home-link a { color: var(--cs-home-normal, #433a30); }
.cs-header .wp-block-home-link a[aria-current="page"] { color: var(--cs-home-active, #433a30); }
.cs-header .wp-block-home-link a:hover { color: var(--cs-home-hover, #433a30); }
.cs-header .wp-block-home-link a:focus-visible { color: var(--cs-home-focus, #433a30); outline: 3px solid currentColor; outline-offset: 4px; }
.cs-editorial-modules .wp-block-navigation__container { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); width: 100%; gap: 16px; }
.cs-editorial-modules .wp-block-navigation-item a { display:block; padding:16px; border:1px solid #433a3055; border-radius:4px; }
.cs-footer .wp-block-navigation { font-size: 1rem; font-style: normal; }
.cs-image-credit { font-size: 1rem; }
@media(max-width:600px) { .cs-editorial-modules .wp-block-navigation__container { grid-template-columns: 1fr; } }
@media(max-height:500px) and (orientation:landscape) { .cs-hero { min-height:180px; height:45svh; } }