/* =====================================================
   GLOBAL
   ===================================================== */

/* Variables de ritmo de la home: viven en theme.json (`settings.custom`) y se usan aquí como
   `--wp--custom--*`, de modo que cambian en un solo sitio.
   - section-px: gutter lateral de las secciones.
   - heading-gap (24px): espacio entre sobrecabecera (.overline) y título, y entre título y
     entradilla, igual en todas las secciones de la home.
   - lede-gap (72px): espacio entre la entradilla y el contenido que sigue (tarjetas del
     problema, tarjeta de la solución y tarjetas de sector): el de la sección del problema, que
     es la referencia.
   - section-gap (224px): espacio entre secciones de la home, medido del último contenido de
     una sección a la sobrecabecera de la siguiente: el de «El problema real» a «La solución
     POWERBIM» (120 + 24 + 80 px), que es la referencia. */
:root {
    /* Color de la entradilla de la home: el del hero y el de las entradillas de
       las demás secciones. */
    --pwb-lede-color: rgba(255, 255, 255, 0.75);
    /* Etiqueta de fase / sector — componente compartido por las tarjetas de
    Proyectos y la ficha del proyecto (pwb_proyecto_tag() en functions.php). La
    fase va en azul oscuro opaco (var(--wp--preset--color--custom-pwb-secondary-background), algo más claro que el fondo de la web para que no se vea más pequeña) y cada sector con su color (paleta aportada por diseño),
    con el texto en blanco. Cualquier cambio aquí se aplica a los dos sitios. */
    --pwb-sector-residencial: #047d51;
    --pwb-sector-terciario: #4f00ff;
    --pwb-sector-industrial: #6e7a01;
    --pwb-sector-infraestructura: #007d90;
    --pwb-sector-smart-cities: #d63a63;
    --pwb-sector-dotacional: #990000;
}

/* Utilidades de texto que antes vivían en el campo `styles.css` de theme.json. El
   `color: #ffffff` de `.overline` no se trasladó: allí nunca se aplicaba (lo ganaba el
   color del bloque párrafo, rgba(255, 255, 255, 0.75)) y se omite para conservar el
   resultado en producción. */
.pwb-text-regular {
    font-weight: 400;
}

.overline {
    font-family: var(--wp--preset--font-family--sora);
    font-size: var(--wp--custom--font-size--md);
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    margin-top: 0;
    margin-bottom: var(--wp--custom--heading-gap, 1.5rem);
}

.pwb-fade-link {
    color: var(--wp--custom--color--white);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.pwb-fade-link:hover {
    opacity: 1;
}

body {
    background-color: var(--wp--preset--color--custom-pwb-main-background);
    overflow-x: clip;
}

/* Lenis drives the page's scroll position itself; the browser's own native
 * scroll anchoring (which re-adjusts scrollTop on its own whenever content
 * anywhere resizes, to keep whatever it picks as "the anchor" visually
 * still) fights it — confirmed directly: async content swaps that grow the
 * page (e.g. the tipologías viewer loading a longer tipología) made the
 * browser silently shift scrollTop out from under an already-correct Lenis
 * scroll, well after Lenis had finished animating to it. Same guidance as
 * Lenis's own docs for this exact conflict. */
html {
    overflow-anchor: none;
}

/* Remove template-level block gap above main content area and footer template part */
main.wp-block-group,
footer.wp-block-template-part {
    margin-block-start: 0;
}

/* =====================================================
   SHARED CONTENT-WIDTH WRAPPER
   Use inside any section that bleeds to 100% width with its own
   background (image or color) — .pwb-fullbg or a plain full-width
   <section> — to keep that section's actual content lined up with the
   header logo and every other content column on the site, at any
   viewport width, on any template (home, single-proyectos, or any
   future page built in the editor).

   Deliberately does NOT hardcode a content width or a padding number:
   max-width reads theme.json's settings.layout.contentSize live via
   WordPress's own --wp--style--global--content-size, so it can never
   drift out of sync the way .pwb-proyecto-hero__inner's old hardcoded
   1728px did after contentSize changed to 1440px and nobody updated it.
   ===================================================== */
.pwb-content-width {
    width: calc(100% - (var(--wp--custom--section-px) * 2));
    max-width: var(--wp--style--global--content-size, 1440px);
    margin-inline: auto;
}

/* Same technique as .pwb-content-width above, but without its contentSize
   cap — for sections that should track the header logo's alignment
   instead (see .pwb-site-header .pwb-header-inner's own max-width:none,
   further down) rather than the narrower boxed-content column every
   other card/grid section uses. */
.pwb-wide-width {
    width: calc(100% - (var(--wp--custom--section-px) * 2));
    margin-inline: auto;
}

/* Sidebar index/TOC list — e.g. the "Asistencia" page's left column.
   Own opacity (70%) rather than core/list's sitewide default (75%,
   matching paragraphs), no bullets, no block margin (sits flush at the
   top of its column), and white links instead of the sitewide orange
   link color — full-opacity white on hover instead of a color change. */
.pwb-index-list {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.pwb-index-list li{
    margin-bottom: var(--wp--preset--spacing--px-10);
}


.pwb-index-list a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.pwb-index-list a:hover {
    color: var(--wp--custom--color--white);
}

/*
 * WordPress has-global-padding accumulation fix
 *
 * With useRootPaddingAwareAlignments:true + styles.spacing.padding in theme.json,
 * WordPress applies padding-inline to MULTIPLE DOM levels simultaneously:
 *   1. .wp-site-blocks          — from styles.spacing.padding (theme.json)
 *   2. main.wp-block-group      — layout:constrained → has-global-padding
 *   3. .wp-block-post-content   — layout:constrained → has-global-padding  ← canonical single source
 *   4. inner section blocks     — layout:constrained → has-global-padding  ← unwanted
 *
 * Visual horizontal padding must come from ONE source only: .wp-block-post-content.
 * All other layers are zeroed here. This fix is fully systemic — no per-section rules.
 *
 * WordPress's own has-global-padding CSS already de-duplicates nested levels (a
 * .has-global-padding nested inside another one gets zeroed automatically) — but
 * that auto-dedup also zeroes .wp-block-post-content itself, leaving NOTHING with
 * real padding between 782px and the content-width breakpoint (~1440px): too
 * narrow for .pwb-content-width's max-width to kick in, too wide for the mobile
 * padding override. Restored explicitly below so post-content keeps the single
 * source of padding this whole fix is named after, at every width.
 */
body .wp-site-blocks {
    padding-inline: 0;
}

.wp-block-post-content.has-global-padding {
    padding-inline: var(--wp--style--root--padding-left, max(20px, 5vw));
}

main.wp-block-group.has-global-padding {
    padding-inline: 0;
}

/* WordPress's own .has-global-padding > .alignfull margin-cancelling rule
   still fires on main (it still carries the has-global-padding class,
   regardless of the padding-inline:0 above) — it blindly reads the
   --wp--style--root--padding-left/right variables rather than main's
   actual (now zero) padding, pushing every alignfull section placed
   directly in main (e.g. the old Proyectos archive's banner and grid, which
   don't go through .wp-block-post-content at all) out past both edges by
   that same amount. Zeroed back here since main genuinely has none to
   cancel. */
main.wp-block-group.has-global-padding > .alignfull {
    margin-left: 0;
    margin-right: 0;
}

/* Any section that is BOTH alignfull and has-global-padding (any full-width
   group using layout:constrained — the header, and full-width patterns like
   .problem/.last-cta) would otherwise keep WordPress's own padding-inline on
   top of its inner content's max-width:1440px centering: two layers of
   spacing stacked, which only happens to match .wp-block-post-content's
   single-layer centering while there's slack space beyond 1440px wide.
   Below that, the section sits visibly further in than the real content
   edge. Zeroed here, site-wide, for the same reason as everything else on
   this page: one source of horizontal padding, on every template. */
.alignfull.has-global-padding {
    padding-inline: 0;
}

.alignfull .has-global-padding:not(.alignfull) {
    padding-inline: 0;
}

/* alignfull breakout fix: WP's generated negative margins are based on .wp-site-blocks
   having the root padding, but we've zeroed that and kept only .wp-block-post-content's
   padding as the single visual source. This rule applies the correct negative margins
   explicitly so editors can use "Full width" + background color without any extra class.
   Scoped to this breakpoint on purpose: below it, sections shouldn't bleed edge-to-edge
   at all (there's no slack width for a "breakout" to mean anything) — keeping the rule
   itself from ever matching there is simpler and safer than fighting its !important with
   another one later. */
@media (min-width: 782px) {
    /* Cancelling exactly .wp-block-post-content's own padding (the previous
       approach here) only reaches the true viewport edge as long as
       post-content is itself unconstrained. Past ~1640px wide, main's
       constrained layout also centers post-content via auto margins (its
       max-width:1440px kicks in) — margin the same amount either side, so
       the section's own horizontal center still lands on the viewport's
       center. Cancelling only the padding left every alignfull section
       (hero, proyectos-grid, tipologías, this rule's own past self) short
       of the edge by exactly that centering margin, above that width.
       width:100vw + margin:calc(50% - 50vw) is immune to this: the 50%
       resolves against post-content's own (possibly narrower, possibly
       off-center-canceling) content width, and algebraically that always
       lands the section at the true viewport edge regardless of whatever
       padding/margin post-content itself has — because post-content is
       itself horizontally centered on the page. */
    .wp-block-post-content > .alignfull {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        max-width: none !important;
    }
}

/* =====================================================
   FULL-WIDTH BACKGROUND UTILITY
   Add .pwb-fullbg to any wp:group section.
   Background source (pick one):
     A) Editor palette color — CSS class rules map it automatically.
     B) Editor custom color  — wp_footer JS helper reads the inline style
        and sets --pwb-fullbg-color (see functions.php).
     C) CSS modifier class   — .pwb-fullbg--image
     D) Custom CSS field     — set --pwb-fullbg-color or --pwb-fullbg-image

   The ::before extends to 100vw regardless of the element's own width,
   as long as content is horizontally centered (which our layout guarantees).
   Horizontal overflow is handled by body { overflow-x: clip }.
===================================================== */

.pwb-fullbg {
    --pwb-fullbg-color: transparent;
    position: relative;
    isolation: isolate;
}

/* Strip the WP-applied background-color from the element itself;
   the ::before carries it instead, breaking out to full viewport width. */
.pwb-fullbg.has-background {
    background-color: transparent !important;
}

.pwb-fullbg::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background-color: var(--pwb-fullbg-color);
    background-image: var(--pwb-fullbg-image, none);
    background-size: cover;
    background-position: center;
    z-index: -1;
}

/* Map WP editor palette selections to the custom property */
.pwb-fullbg.has-custom-pwb-main-background-background-color {
    --pwb-fullbg-color: var(--wp--preset--color--custom-pwb-main-background);
}

.pwb-fullbg.has-custom-pwb-secondary-background-background-color {
    --pwb-fullbg-color: var(--wp--preset--color--custom-pwb-secondary-background);
}

.pwb-fullbg.has-custom-pwb-dark-navy-accent-background-color {
    --pwb-fullbg-color: var(--wp--preset--color--custom-pwb-dark-navy-accent);
}

.pwb-fullbg.has-custom-pwb-primary-color-background-color {
    --pwb-fullbg-color: var(--wp--preset--color--custom-pwb-primary-color);
}

/* =====================================================
   BUTTONS
   ===================================================== */

.wp-block-button__link {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.wp-block-button__link:hover {
    opacity: 0.8;
}

.wp-block-button__link:active {
    transform: scale(0.98);
}

/* Secondary Button */
.wp-block-button.is-style-pwb-secondary .wp-block-button__link {
    background-color: var(--wp--preset--color--custom-pwb-primary-color);
    color: var(--wp--preset--color--custom-pwb-dark-navy-accent);
    letter-spacing: -0.1719px;
}

/* Outline Button
   El borde de 1px se descuenta del padding (8px 24px) para que el botón mida
   lo mismo que los rellenos (40px de alto), no 2px más. */
.wp-block-button.is-style-pwb-outline .wp-block-button__link {
    padding: calc(8px - 1px) calc(24px - 1px);
    background-color: transparent;
    color: var(--wp--custom--color--white);
    border: 1px solid var(--wp--custom--color--white);
    font-weight: 500;
    letter-spacing: -0.625px;
}

/* Standalone outline button — use on any element (a, button) */
.pwb-btn-outline {
    display: inline-block;
    padding: calc(8px - 1px) calc(24px - 1px); /* menos el borde de 1px: 40px de alto, como los botones rellenos */
    background: transparent;
    border: 1px solid var(--wp--custom--color--white);
    border-radius: var(--wp--custom--radius--sm);
    color: var(--wp--custom--color--white);
    font-family: var(--wp--preset--font-family--inter);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.625px;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.pwb-btn-outline:hover {
    opacity: 0.8;
}

.pwb-btn-outline:active {
    transform: scale(0.98);
}

/* Icon + label variant — e.g. "Ver vídeo" with a leading play icon */
.pwb-btn-outline--icon {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--px-8);
    font-family: var(--wp--preset--font-family--inter);
}

.pwb-btn-outline--icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* =====================================================
   QUOTE BLOCK
   ===================================================== */

.wp-block-quote {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    padding: 0 !important;
    border-left: none !important;
}

.wp-block-quote cite {
    order: 1;
    flex: 0 0 180px;
    font-style: normal;
    font-size: var(--wp--preset--font-size--xs-plus);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.45);
    padding-right: var(--wp--preset--spacing--px-40);
    margin-block-start: 0;
}

.wp-block-quote cite strong {
    display: block;
    font-weight: 700;
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--custom--color--white);
    margin-bottom: var(--wp--preset--spacing--px-6);
}

.wp-block-quote p {
    order: 2;
    flex: 1;
    margin: 0;
    margin-block-start: 0;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.65;
    border-left: 2px solid var(--wp--preset--color--custom-pwb-primary-color);
    padding-left: var(--wp--preset--spacing--px-40);
}

@media (max-width: 781px) {
    .wp-block-quote {
        flex-direction: column;
        gap: var(--wp--preset--spacing--px-20);
    }

    .wp-block-quote p {
        order: 1;
        padding-left: var(--wp--preset--spacing--px-20);
        font-size: clamp(15px, 4vw, 18px);
    }

    .wp-block-quote cite {
        order: 2;
        flex: none;
        padding-right: 0;
    }
}