/*
Theme Name: solariaenergia
Theme URI: https://solariaenergia.com/
Description: Tema hijo de GeneratePress para solariaenergia.
Author: Mimotic
Template: generatepress
Version: 1.0.0
Text Domain: solariaenergia
*/

/*
 * The Elementor header template (post ID 3095) is designed to float over the
 * page hero with `margin-bottom: -140px`. Pages without a hero (search results)
 * end up with the header overlapping the body content AND, because the logo and
 * menu are white, they become invisible against the page background. On those
 * layouts we:
 *   1. Cancel the negative margin so the header occupies its own space.
 *   2. Paint the header in the brand's dark color (#192A36 — "Negro" Solaria)
 *      so the white text/logo stay legible.
 *
 * The 404 page is not listed here: 404.php renders its own dark hero with
 * enough top padding for the header to float over it, like the rest of the site.
 */
body.search .elementor-location-header > section,
body.search .elementor-location-header > [data-element_type="section"] {
    margin-bottom: 0 !important;
    background-color: #192A36 !important;
}

/* ==========================================================================
   Mobile / tablet header: the menu (burger) button
   ==========================================================================
 * Elementor Pro renders the Nav Menu toggle as two hardcoded glyphs of the
 * "eicons" webfont: <i class="eicon-menu-bar"> (open) and <i class="eicon-close">
 * (close). This site deregisters the `elementor-icons` stylesheet on purpose in
 * `mu-scripts/scripts/removeMetaTags.php`, so those glyphs resolve to nothing:
 * the icons rendered 0x0 and the whole toggle collapsed to a 10x10 invisible
 * box — there was no visible way to open the menu on a phone.
 *
 * Re-registering eicons would cost 22 KB of CSS + a 108 KB woff2 on every page
 * for a single icon (the audit found zero `eicon-` references in the whole
 * `_elementor_data` of the site), so the icon is drawn in CSS instead: no extra
 * request, and it can be sized/placed like a real button.
 *
 * Breakpoints come from the Elementor kit: tablet = 1080px (the width below
 * which the widget switches to the burger), mobile = 768px.
 */
@media (max-width: 1080px) {
    /* The toggle is the only item of the nav widget, which is the last row of
       the right-hand header column: a 10px glyph hanging below the language
       switcher, which is why it read as "floating". Growing it to a real 46px
       button would push the header 36px taller — the header floats over the hero
       with a negative bottom margin and any extra height opens a blank strip
       above the hero image — so the row is pulled back up by the same amount and
       the button ends up beside the contact/language line. The widget stays in
       the flow on purpose: the dropdown panel is anchored to the bottom of this
       row, so moving it would detach the panel from the header. */
    .elementor-location-header .elementor-widget-nav-menu {
        margin-top: -46px;
        /* Pulled up, the widget box now lies on top of the contact/language row
           and would swallow their taps: only the button and the panel inside it
           are clickable. */
        pointer-events: none;
    }

    .elementor-location-header .elementor-menu-toggle,
    .elementor-location-header .elementor-nav-menu__container {
        pointer-events: auto;
    }

    /* Room for the button at the end of the contact/language row. The header has
       a single inner section (stock ticker on top, contact + languages below),
       so its last inner column is that row. */
    .elementor-location-header .elementor-inner-column:last-child {
        padding-right: 52px;
        position: relative;
    }

    /* The hairline that closes the header is a `border-bottom` on the inner
       section, so it ran the full width and the button, whose bottom edge lands
       exactly on it, appeared to cut it in half. Redrawn under the text block
       only: it now underlines the contact/language row and stops short of the
       button. */
    .elementor-location-header .elementor-inner-section {
        border-bottom-color: transparent !important;
    }

    .elementor-location-header .elementor-inner-column:last-child::after {
        content: "";
        position: absolute;
        left: 0;
        right: 52px;
        bottom: 0;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.3);
    }

    /* Lifted clear of that hairline. */
    .elementor-location-header .elementor-menu-toggle {
        position: relative;
        top: -10px;
    }

    /* The contact link carries a 24px right margin that acts as the gap before
       the language switcher when both fit on one line. On a phone they stack, so
       that margin left the link ending 24px short of the languages below it.
       The margin is dropped and the same 24px becomes a `column-gap` on the row:
       a gap only exists between items that share a line, so the rows flush right
       when stacked and keep their separation when they fit side by side. */
    .elementor-location-header .elementor-widget-heading > .elementor-widget-container {
        margin-right: 0 !important;
    }

    .elementor-location-header .elementor-inner-column:last-child .elementor-widget-wrap {
        column-gap: 24px;
    }

    .elementor-location-header .elementor-menu-toggle {
        box-sizing: border-box;
        width: 46px;
        height: 46px;
        padding: 0;
        align-items: center;
        justify-content: center;
        /* Elementor's kit paints the toggle transparent and borderless with a
           higher-specificity rule (`.elementor-2749 .elementor-element...`), and
           that ID changes on every DB sync, so it cannot be matched by hand. */
        border: 1px solid rgba(255, 255, 255, 0.45) !important;
        border-radius: 3px !important;
        background-color: rgba(255, 255, 255, 0.12) !important;
        transition: background-color 160ms ease, border-color 160ms ease;
    }

    .elementor-location-header .elementor-menu-toggle:hover {
        background-color: rgba(255, 255, 255, 0.22) !important;
    }

    .elementor-location-header .elementor-menu-toggle:focus-visible {
        outline: 2px solid #FFFFFF;
        outline-offset: 2px;
    }

    /* Open state: match the dropdown panel so button and menu read as one block. */
    .elementor-location-header .elementor-menu-toggle.elementor-active {
        border-color: #192A36 !important;
        background-color: #192A36 !important;
    }

    /* Both <i> elements are empty (no glyph); they become the drawing surface. */
    .elementor-location-header .elementor-menu-toggle i {
        position: relative;
        display: block;
        width: 22px;
        height: 16px;
        font-size: 0;
        line-height: 0;
    }

    .elementor-location-header .elementor-menu-toggle i::before,
    .elementor-location-header .elementor-menu-toggle i::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background-color: currentColor;
    }

    /* Burger: top and bottom bars are the pseudo-elements, the middle one is a
       background gradient so the markup stays untouched. */
    .elementor-location-header .elementor-menu-toggle__icon--open {
        background-image: linear-gradient(currentColor, currentColor);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 100% 2px;
    }

    .elementor-location-header .elementor-menu-toggle__icon--open::before {
        top: 0;
    }

    .elementor-location-header .elementor-menu-toggle__icon--open::after {
        bottom: 0;
    }

    /* Close: the same two bars crossed. */
    .elementor-location-header .elementor-menu-toggle__icon--close::before,
    .elementor-location-header .elementor-menu-toggle__icon--close::after {
        top: 50%;
    }

    .elementor-location-header .elementor-menu-toggle__icon--close::before {
        transform: translateY(-50%) rotate(45deg);
    }

    .elementor-location-header .elementor-menu-toggle__icon--close::after {
        transform: translateY(-50%) rotate(-45deg);
    }

    /* The dropdown panel was painted at 88% alpha and the hero headline showed
       through the menu items. Solid brand black + a shadow to lift it. */
    .elementor-location-header .elementor-nav-menu--dropdown {
        background-color: #192A36 !important;
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
    }

    /* Comfortable touch rows (they were 40px tall). */
    .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item,
    .elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item {
        min-height: 52px;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }
}

/* Phone-only: the contact link and the language codes sat on 14-21px tall hit
   areas, well under the 44px guideline. The hit area is grown with an invisible
   overlay instead of padding: the header floats over the hero with a fixed
   negative margin, so anything that changes its height opens a blank strip
   above the hero image. The languages grow downwards, into the empty band that
   used to hold the collapsed toggle. */
@media (max-width: 768px) {
    /* The 15px gap between language codes pushed the row onto a second line on
       narrow phones (it already did before the button was added, and every
       wrapped line makes the header taller). 9px keeps the contact link, the
       four codes and the button on one line down to 320px. */
    .elementor-location-header .cpel-switcher__lang {
        margin-right: 9px !important;
    }

    .elementor-location-header .cpel-switcher__lang:last-child {
        margin-right: 0 !important;
    }

    .elementor-location-header .cpel-switcher__lang > a,
    .elementor-location-header .elementor-heading-title > a {
        position: relative;
    }

    /* The contact link and the language row are stacked with no gap between
       them, so each one only grows away from the other: the contact link
       upwards, the languages downwards into the band the collapsed menu row used
       to occupy. Overlapping them would make the taps land on the wrong link. */
    .elementor-location-header .cpel-switcher__lang > a::after {
        content: "";
        position: absolute;
        top: 0;
        right: -4px;
        bottom: -20px;
        left: -4px;
    }

    .elementor-location-header .elementor-heading-title > a::after {
        content: "";
        position: absolute;
        top: -12px;
        right: 0;
        bottom: 0;
        left: 0;
    }
}