/*
Theme Name: Maiko Child
Theme URI: http://demo.casethemes.com/maiko/
Author: Case-Themes
Author URI: https://themeforest.net/user/case-themes/
Description: Maiko is a premium WordPress theme designed for architecture portfolios, agencies, and businesses. With a clean and modern design, it provides responsive layouts, grid-based sections, and extensive customization options to showcase your projects effectively.
Version: 1.0.0
License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: maiko
Text Domain: maiko-child
Tags: architecture, portfolio, design, creative, modern, minimalist, photography, agency, responsive, grid
Requires at least: 5.8 or Higher
Requires PHP: 7.4 or Higher
Tested up to: 6.4

Copyright (c) 2024 Case-Themes. All rights reserved.
This theme is licensed under the GPL-2.0+ license.
*/

/* =========================================================================
   piu39e custom overrides
   ========================================================================= */

/* Carousel "DRAG" cursor — +39 engineering brand
   Uses a custom PNG (with transparent background) as the entire cursor
   visual. Source asset is exported at 2× for crisp retina rendering and
   scaled down via background-size:contain to its 160×142 display size.
   Asset path: wp-content/themes/maiko-child/img/drag-cursor.png  */
.pxl-cursor.is-active.has-drap .pxl-cursor--drap {
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: transparent;          /* hide the "DRAG" text injected by JS */
    font-size: 0;                /* belt-and-braces — collapse text box */
    width: 160px;
    height: 142px;
    background-image: url('img/drag-cursor.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.pxl-cursor.is-active.has-drap .pxl-cursor--follower {
    background-color: transparent;
    opacity: 0;
}

/* Service-card carousel (pxl_text_carousel layout 6) — tighten the gap
   between the "01"/"02" number badge and the title. Parent theme uses
   6.72vw (~96px on a 1440px display); halve it for shorter, denser cards. */
.pxl-text-carousel6 .pxl-item--number {
    margin-bottom: 3.36vw;
}

/* =========================================================================
   HOMEPAGE HERO (post 18) — section 5 ("Riqualifichiamo gli spazi")
   + section 6 ("Riqualificazione in corso?" card)

   Goal: match the Maiko demo composition where the title sits at the
   photo's bottom-left and the white card overlaps the photo's top-right.

   Why CSS (not Elementor settings):
   - Maiko's `column_position: middle` on section 6 adds
     `.elementor-section-items-middle` which forces `align-items: center`
     on the inner container, vertically centring all columns.
   - Setting `column_position: top` should map to flex-start, but Maiko's
     CSS rules win specificity-wise and the change doesn't apply at runtime.
   - Negative margin on the card column collapses section 6's effective
     height when section 6 has no explicit min-height.

   The rules below override Maiko using ID-class selectors + !important
   so they beat Elementor's per-page CSS file load order too.
   ========================================================================= */

/* Pull the white card column up so it overlaps section 5's photo from
   the top-right area, matching the Maiko demo's "Are you Planning..."
   card placement. -250 lands the card's top at roughly section 5's
   top + 150px (mid-upper portion of the visible photo).

   NOTE: high-specificity selectors below — Elementor's post-page CSS
   uses chained classes that beat plain `.elementor-element-XXX` even
   with !important. Adding `body[class] section.elementor-section` plus
   the attribute selector outweighs any Elementor-generated rule. */
body[class] section.elementor-section.elementor-element-b06d7ed
  > .elementor-container
  > div.elementor-element[data-id="842d411"] {
    margin-top: -250px !important;
    align-self: flex-start !important;
    z-index: 4 !important;
    position: relative !important;
}

/* Lock section 6's height so the negative margin on the card column
   doesn't collapse the dark band. The original height is 333px.
   Also pull section 7 (the bullets) up by giving section 6 a more
   negative bottom margin — closes the dark gap between the card and
   the bullets. Capped at -160 so section 7 still starts AFTER section
   6's natural top (y=458) — going further breaks the layer order and
   the photo covers the bullets. */
body[class] section.elementor-section.elementor-element-b06d7ed {
    min-height: 333px !important;
    margin-bottom: -240px !important;
}

/* Section 5: force columns to bottom-align so the heading sits at the
   photo bottom regardless of the `.elementor-section-items-*` class
   Maiko emits. Title's z-index already keeps it above section 6's dark
   overlay (set via Elementor _z_index: 5). */
body[class] section.elementor-section.elementor-element-3bc1154 > .elementor-container {
    align-items: flex-end !important;
}

/* Section 7 (bullets) — trim its top padding so the bullets sit closer
   to the card bottom. Original padding-top was 70px.
   z-index: 2 puts section 7 ABOVE section 6 (which has z-index: 1) so
   that when our -240 margin pulls section 7 up into section 6's territory,
   the bullets render over (not under) the dark band. The card inside
   section 6 has z-index 4 within section 6's local stacking — still
   above section 7 in the page root, so no card↔bullets conflict. */
body[class] section.elementor-section.elementor-element-c862404 {
    padding-top: 10px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* =========================================================================
   FOOTER skyline — fully responsive.
   - <img> in widget #35f7861 is the new buildings-only PNG
     (`skyline_only.png` — no horizontal line baked in).
   - CSS draws the orange #EC7725 horizontal line, full widget width,
     so it auto-extends on any screen size.
   - The PNG is anchored 50 px from the right edge so a short stretch
     of straight line continues past the last building.
   - The +39 white footer logo lives in a separate widget above this
     one — untouched.
   ========================================================================= */
.elementor-element-35f7861 {
    position: relative;
    min-height: 71px;
}
/* Orange horizontal line drawn with a 3-stop gradient so there's NO line
   under the buildings PNG (which has its own baseline baked in).
   Layout, left → right:
     [───────── line ─────────][gap = image width][50 px line][edge]
   Adjust --sky-width to match the natural pixel width of the buildings
   PNG you uploaded. 500 px is a starting estimate. */
.elementor-element-35f7861 {
    --sky-width: 396px;   /* natural width of the buildings PNG */
    --sky-right: 50px;    /* distance from page right edge to image right edge */
}
.elementor-element-35f7861::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        #EC7725 0,
        #EC7725 calc(100% - var(--sky-right) - var(--sky-width)),
        transparent calc(100% - var(--sky-right) - var(--sky-width)),
        transparent calc(100% - var(--sky-right)),
        #EC7725 calc(100% - var(--sky-right)),
        #EC7725 100%
    );
    pointer-events: none;
    z-index: 0;
}
/* The buildings PNG — Elementor renders it as <img>. Override its layout
   so it floats absolutely, anchored bottom + 50 px from the right, and
   keeps its natural pixel size (no scaling). PNG is 396 × 71 px. */
.elementor-element-35f7861 .elementor-widget-container,
.elementor-element-35f7861 .elementor-image {
    position: static !important;
    min-height: 71px;
}
.elementor-element-35f7861 img {
    position: absolute !important;
    right: 50px !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    z-index: 1;
}

/* =========================================================================
   TEAM child pages — push #pxl-main down so the page content clears
   the transparent header (logo row + orange address bar).

   DOM (verified by walking the live tree):
     body.parent-pageid-23634
     └── #pxl-wapper
         ├── header#pxl-header-elementor  (the sticky/transparent header)
         ├── div#pxl-main                 ← TARGET: page content sibling
         └── footer
   Padding goes on #pxl-main only, so the header stays put. */
body.parent-pageid-23634 #pxl-main {
    padding-top: 220px !important;
}
@media (max-width: 768px) {
    body.parent-pageid-23634 #pxl-main {
        padding-top: 120px !important;
    }
}

/* =========================================================================
   HEADER nav row — white semi-transparent overlay for readability,
   ONLY on pages that render a Maiko Page-Title hero block.

   The homepage and other pages without a hero-image right below the
   header have their own composed layouts that already account for a
   transparent header — adding an overlay there breaks their design.

   Selector uses :has() to detect pages with #pxl-page-title-elementor
   (Maiko's page-title wrapper, present whenever pt_mode is bd/inherit
   AND the global page-title template is active). Pages with pt_mode
   set to "none" (homepage, etc.) lack this element, so the rule
   doesn't apply. */
body:has(#pxl-page-title-elementor) .elementor-element-6514195 {
    background-color: rgba(255, 255, 255, 0.50) !important;
}

/* =========================================================================
   STICKY HEADER (template 9365) — force the +39 logo to render.
   When Maiko's sticky header slides into view after a scroll-up, the bar
   becomes visible but the .pxl-logo element inside it stays
   visibility:hidden due to a Maiko inherited rule we couldn't pinpoint
   cleanly. Forcing visibility:visible on the logo wrapper + link + image
   guarantees the +39 mark shows whenever the sticky bar is active.
   Confirmed by inline testing: setting visibility:visible !important on
   these three elements makes them render once the bar is shown.

   The 4-dot offcanvas trigger (pxl_menu_hidden_sidebar widget id 4d8d091)
   was opening Maiko demo content and has been REMOVED from the sticky
   header template — no CSS needed for that one. */
.pxl-header-elementor-sticky .pxl-logo,
.pxl-header-elementor-sticky .pxl-logo > a,
.pxl-header-elementor-sticky .pxl-logo img {
    visibility: visible !important;
}