/* =====================================================
   PWB SITE HEADER
   ===================================================== */

/* Sticky header: the template-part <header> wraps .pwb-site-header,
   sticky must live on the outer element to scroll with the page */
header.wp-block-template-part:has(.pwb-site-header) {
    position: sticky;
    top: 0;
    z-index: var(--wp--custom--z-index--header, 100);
}

/* Solid brand-orange border: bottom on header, top on footer */
.pwb-site-header,
.pwb-site-footer {
    position: relative;
}

/* Same content-width floor as .pwb-header-inner — the native constrained-layout
   centering this column relies on has no side margin between the mobile
   breakpoint and ~1440px. */
.pwb-site-footer .pwb-footer-columns {
    width: calc(100% - (var(--wp--custom--section-px) * 2));
    max-width: var(--wp--style--global--content-size, 1440px);
}

/* Frosted glass — always on */
.pwb-site-header {
    background-color: rgba(12, 17, 23, 0.7) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Header inner padding — base values; GSAP animates between these and compact state */
.pwb-header-inner {
    padding-top: 41px;
    padding-bottom: 41px;
}

/* Centers .pwb-header-inner within .pwb-site-header directly, instead of
   relying on .pwb-site-header's own "layout":{"type":"constrained"}
   attribute (which normally generates the max-width + margin:auto that
   does this) — the Site Editor has stripped layout attributes from this
   template part before (see the header-inner/nav fixes above), and this
   time it was this outer one, collapsing .pwb-site-header to default
   flow layout and leaving header-inner flush against the left edge with
   the logo glued to it. */
.pwb-site-header .pwb-header-inner {
    margin-left: auto;
    margin-right: auto;
    /* display/justify-content/align-items duplicate what .pwb-header-inner's
    own "layout":{"type":"flex",...} block attribute already produces — but
    that attribute has been silently dropped by the Site Editor more than
    once now (e.g. editing the Navigation menu), which resets this to
    default block stacking (logo, nav, and actions each on their own row).
    Setting it here directly makes the header's row layout survive that,
    independent of whatever the saved block attributes currently say. */
    width: calc(100% - (var(--wp--custom--section-px) * 2));
    max-width: none;
    display: grid;
    grid-template-columns: 1fr auto minmax(160px, 1fr);
    column-gap: var(--wp--preset--spacing--px-24);
    align-items: center;
}

/* Gutenberg's native constrained-layout centering (max-width + margin:auto,
   inherited from .pwb-site-header) only produces visible side margin once the
   viewport exceeds contentSize — nothing between the mobile breakpoint and
   ~1440px. Same fix as .pwb-content-width, applied directly since this block
   uses its own flex layout rather than that utility class.

   No max-width cap here on purpose (unlike .pwb-content-width) — the logo is
   meant to track the hero title's flat 5vw margin at any width, by design
   decision, not the 1440px-then-centered column every boxed section (cards,
   grids) uses. That leaves the header intentionally out of sync with those
   sections past ~1440px+padding wide — known, and fine.

   max-width:none is explicit, not just omitted — .pwb-site-header's own
   native constrained-layout still applies max-width:var(--wp--style--
   global--content-size) to this non-alignfull child on its own; leaving
   this unset would silently bring the 1440px cap straight back. */

.pwb-site-header::after,
.pwb-site-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--wp--preset--color--custom-pwb-primary-color);
}

.pwb-site-header::after {
    bottom: 0;
}

.pwb-site-footer::before {
    top: 0;
}

/* Logo */
.pwb-logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-self: start;
    grid-column: 1;
}

/* .pwb-header-inner is a 3-column grid (logo | nav | actions) with the
   two outer columns set to equal-fraction "1fr" tracks — those always
   split remaining space evenly regardless of how wide the logo vs. the
   actions group (lang switcher + Acceder button) actually are, so the
   middle "auto" column sits truly centered on the header rather than
   centered in whatever unequal space is left over between two
   differently-sized siblings (the old flex:1-between-siblings approach's
   mistake). Grid also keeps each outer column no narrower than its own
   content, so nav can't grow into the logo the way an absolute-positioned
   center would at narrower desktop widths. Explicit grid-column on all
   three children (here and below) because nav is display:none below
   960px — without it, grid auto-placement skips the hidden item and
   shifts actions into nav's column, leaving the real actions column
   empty. Targets the <nav> tag itself, not just .pwb-header-nav's
   className — the Site Editor has stripped that className (along with
   .pwb-header-inner's own "layout" attribute, fixed separately above)
   on autosave before. */
.pwb-site-header .pwb-header-inner > nav,
.pwb-site-header .pwb-header-nav {
    justify-self: center;
    grid-column: 2;
}

.pwb-site-header .pwb-header-actions {
    justify-self: end;
    grid-column: 3;
}

/* The responsive-container child defaults to block display and its own
   modal/overlay positioning — reset both, along with the ul's own
   absolute+transform centering trick that core generates for a
   justifyContent:center Navigation layout (calibrated for nav sitting
   normally in flexbox, not as a grid item — it otherwise forces the ul
   width down and wraps "Calculadora ROI" onto two lines). Letting
   everything shrink-wrap around the link list inline is what lets the
   grid column above size to nav's real content width. This nav is only
   ever visible above 960px (hidden by the media query below); the
   custom .pwb-nav-toggle + .pwb-mobile-nav overlay handles mobile, so
   the block's own hamburger/modal mechanics are never needed and are
   hidden outright. Targets stable core classNames (not the per-instance
   hashed layout class) so it survives the block's own className/layout
   attributes being lost again. */
.pwb-site-header .pwb-header-inner > nav .wp-block-navigation__responsive-container-open {
    display: none !important;
}

.pwb-site-header .pwb-header-inner > nav .wp-block-navigation__responsive-container {
    position: static !important;
    inset: auto !important;
    background: transparent !important;
}

.pwb-site-header .pwb-header-inner > nav .wp-block-navigation__container {
    display: flex !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: var(--wp--preset--spacing--px-32);
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}

/* Nav links — muted base color */
.pwb-site-header .wp-block-navigation .wp-block-navigation-item__content {
    color: #b5bdc8;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Nav link hover and active item — white, no underline */
.pwb-site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.pwb-site-header .wp-block-navigation .current-menu-item>.wp-block-navigation-item__content {
    color: var(--wp--custom--color--white);
    text-decoration: none;
}

/* Language switcher */
.pwb-lang-switcher-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.pwb-lang-switcher {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.pwb-lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--wp--preset--spacing--px-16);
    display: none;
    flex-direction: column;
    min-width: 140px;
    padding: var(--wp--preset--spacing--px-8);
    background: var(--wp--preset--color--custom-pwb-main-background);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--wp--custom--radius--md);
    box-shadow: var(--wp--preset--shadow--pwb-dropdown);
    z-index: 20;
}

.pwb-lang-dropdown.is-open {
    display: flex;
}

.pwb-lang-dropdown__item {
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--sm);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: var(--wp--preset--spacing--px-8) var(--wp--preset--spacing--px-12);
    border-radius: var(--wp--custom--radius--sm);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.pwb-lang-dropdown__item:hover {
    color: var(--wp--custom--color--white);
    background-color: rgba(255, 255, 255, 0.06);
}

.pwb-lang-dropdown__item.is-active {
    color: var(--wp--custom--color--white);
}


/* =====================================================
   PWB SITE FOOTER
   ===================================================== */

/* Left column: tagline at top, logo mark at bottom */
.pwb-footer-left-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Tagline: first line rendered in ExtraLight weight */
.pwb-footer-tagline .pwb-weight-200 {
    font-weight: 200;
    display: block;
}

/* Logo mark: desktop — absolute at bottom of left column area */
@media (min-width: 782px) {
    .pwb-footer-logo-mark {
        position: absolute;
        bottom: 80px; /* matches outer columns padding-bottom */
        left: max(20px, 5vw);
        margin: 0 !important;
    }
}

/* Social icons */
.pwb-social-icons {
    display: flex;
    gap: var(--wp--preset--spacing--px-120);
    margin-top: var(--wp--preset--spacing--px-40);
    color: var(--wp--custom--color--white);
}


/* Footer links */
.pwb-footer-link {
    color: var(--wp--custom--color--white);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.pwb-footer-link:hover {
    opacity: 0.7;
}


/* Certification badges */
.pwb-cert-badges {
    display: flex;
    gap: var(--wp--preset--spacing--px-10);
    align-items: stretch;
}

.pwb-cert-badge {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--px-4);
    padding: var(--wp--preset--spacing--px-8) var(--wp--preset--spacing--px-12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--wp--custom--radius--sm-plus);
}

.pwb-cert-badge__label {
    font-family: var(--wp--preset--font-family--sora);
    font-size: var(--wp--preset--font-size--xs-plus);
    font-weight: 700;
    color: var(--wp--custom--color--white);
    line-height: 1;
    letter-spacing: 0.3px;
}

.pwb-cert-badge__sub {
    font-family: var(--wp--preset--font-family--sora);
    font-size: var(--wp--preset--font-size--2-xs);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
}

/* =====================================================
   PWB SITE FOOTER — MOBILE
   ===================================================== */

@media (max-width: 781px) {

    /* Outer columns: reduce vertical padding (bottom 80px leaves clearance above absolute logo) */
    .pwb-footer-columns {
        padding-top: 40px !important;
        padding-bottom: 80px !important;
        gap: 40px !important;
    }

    /* Right info column: remove desktop top-alignment offset, add left indent (~25% total) */
    .pwb-footer-right-col {
        padding-top: 0 !important;
        padding-left: 20vw;
    }

    /* Social icons: distribute equitably across available width */
    .pwb-social-icons {
        gap: 0;
        justify-content: space-between;
    }

    /* Links: stack the two column groups vertically */
    .pwb-footer-links {
        flex-direction: column;
        gap: var(--wp--preset--spacing--px-16);
    }

    /* CTA buttons: break out of right-column indent, center across full screen width */
    .pwb-site-footer .wp-block-buttons {
        flex-direction: column;
        align-items: center;
        margin-left: -20vw;
        width: calc(100% + 20vw);
    }

    /* ISO badges + copyright: stack vertically on mobile */
    .pwb-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--wp--preset--spacing--px-12);
    }

    /* Logo mark: absolute, anchored to footer bottom-left, partially outside the box */
    .pwb-footer-logo-mark {
        position: absolute;
        bottom: -60px;
        left: 0;
        width: 140px;
        height: auto;
        margin: 0 !important;
    }
}