/*
 * pages.css — Styles for custom page templates (child theme)
 *
 * Covers:
 *   - Genocide Hub intro page  (.ti-ghub-*)
 *   - Under Construction pages (.ti-uc-*)
 *   - Telecom notice           (.ti-telecom-notice)
 *   - Embed/dashboard safety   (.tableauPlaceholder, .elementor-widget-html)
 *
 * Loaded via functions.php on all singular pages.
 */

/* =========================================================
   GENOCIDE HUB — Intro page
   ========================================================= */

.ti-genocide-hub .post-header {
    border-bottom: 3px solid #1a1a1a;
    padding-bottom: 0.5em;
    margin-bottom: 1.5em;
}

.ti-ghub-intro {
    max-width: 780px;
    margin: 0 auto;
    padding: 1.5em 0 2.5em;
}

.ti-ghub-lead {
    font-size: 1.15em;
    line-height: 1.75;
    color: #1a1a1a;
    border-left: 4px solid #c0392b;
    padding-left: 1.2em;
    margin-bottom: 1.5em;
}

.ti-ghub-intro p {
    font-size: 1em;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.2em;
}

.ti-ghub-cta-block {
    margin: 2em 0;
    padding: 1.5em;
    background: #f7f4f0;
    border-left: 4px solid #c0392b;
}

.ti-ghub-cta-label {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #666;
    margin-bottom: 0.75em !important;
}

.ti-ghub-cta {
    display: inline-block;
    background: #1a1a1a;
    color: #fff;
    padding: 0.7em 1.6em;
    font-size: 0.95em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.2s ease;
}

.ti-ghub-cta:hover,
.ti-ghub-cta:focus {
    background: #c0392b;
    color: #fff;
}

.ti-ghub-note {
    font-size: 0.875em;
    color: #666;
    font-style: italic;
    margin-top: 2em !important;
}

/* =========================================================
   UNDER CONSTRUCTION — Shared placeholder
   ========================================================= */

.ti-under-construction .post-header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.5em;
    margin-bottom: 1.5em;
}

.ti-uc-block {
    max-width: 640px;
    margin: 2em auto;
    padding: 2em 2.5em;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-top: 3px solid #888;
    text-align: center;
}

.ti-uc-message {
    font-size: 1em;
    line-height: 1.75;
    color: #444;
    margin-bottom: 0.75em;
}

.ti-uc-tigrinya {
    font-size: 0.9em;
    color: #888;
    margin: 0;
}

/* =========================================================
   TELECOM — Data preparation notice
   ========================================================= */

.ti-telecom-notice {
    max-width: 640px;
    margin: 2em auto;
    padding: 1.5em 2em;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #888;
    color: #555;
    font-size: 0.95em;
    line-height: 1.7;
}

/* =========================================================
   ELEMENTOR STRETCH SECTION — Overflow fix
   =========================================================

   Elementor's "stretch_section" feature positions sections
   using a negative left offset and 100vw width to achieve
   full-viewport display. The parent theme (ashe-pro-premium)
   sets both:
     .main-container { overflow: hidden }
     .post-content   { overflow: hidden }

   These clip the stretched section on the LEFT side, hiding
   the portion that extends beyond the container edge. On the
   Economy page this manifests as ~30px of the Tableau chart
   Y-axis being cut off (matching main#main's 30px padding).

   Fix: override to `overflow: visible` on Elementor-rendered
   pages. All affected data pages are full-width (no sidebar),
   so there are no floated sidebars for overflow:hidden to
   clear. A ::after clearfix replaces that role.

   Affected pages using stretch_section:
     4579 (Infrastructure), 4592 (Roads), 4613 (Topography),
     4614 (Streams), 4700 (Agriculture), 4718 (Economy),
     5010 (Education), 5354 (Health)
   ========================================================= */

body.elementor-page .main-container,
body.elementor-page .post-content {
    overflow: visible;
}

/* Clearfix: replaces the float-clearing that overflow:hidden provided */
body.elementor-page .main-container::after {
    content: "";
    display: table;
    clear: both;
}

/* =========================================================
   TABLEAU OBJECT EMBED — Container and sizing
   =========================================================

   The Tableau viz_v1.js embed wraps content in:
     div.tableauPlaceholder[style="position:relative"]
       object.tableauViz[style="display:none"]  ← JS resizes this

   After JS runs, Tableau renders a viz inside the object at
   the object's CSS width/height. The JS already sets
   vizElement.style.width = '100%' and calculates height from
   divElement.offsetWidth, so the main CSS job is to ensure
   the placeholder div is a full-width block container that
   the JS can correctly measure.

   Applies to all Tableau object embeds:
     - Direct post_content pages (4559, 4611, 4612)
     - Elementor HTML widget pages (4718, Health template 5338)

   Fallback overflow-x:auto provides a scroll escape hatch if
   Tableau renders slightly wider than the container on small
   screens (e.g. Tableau minimum dashboard width of ~300px).
   ========================================================= */

.tableauPlaceholder {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}

.tableauPlaceholder > object.tableauViz {
    display: block;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* =========================================================
   IFRAME TABLEAU AND DATA EMBEDS — Width and responsive height
   =========================================================

   Several pages embed Tableau Public via iframe rather than
   the JS/object method:
     Roads (5147, 5151), Education (5141, 5216),
     Health (5343), Streams (4614)

   These iframes use width="100%" height="900" HTML attributes.
   The CSS width rules ensure the attribute cannot exceed the
   container. The responsive height rules scale the fixed 900px
   down for smaller screens where 900px would be taller than
   the viewport and unusable.

   Generic guard also covers local data visualization iframes:
     Infrastructure (4579), Agriculture (4700),
     Topography tabs (5165, 5169, 5172)
   ========================================================= */

/* Normalize all iframes and objects inside Elementor HTML widgets */
.elementor-widget-html iframe,
.elementor-widget-html object {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Responsive height: scale down tall fixed-height iframes on tablet */
@media screen and (max-width: 1024px) {
    .elementor-widget-html iframe[height="900"],
    .elementor-widget-html iframe[height="900px"],
    .elementor-widget-html iframe[height="1000px"] {
        height: 700px;
    }
}

/* Responsive height: further scale on mobile */
@media screen and (max-width: 640px) {
    .elementor-widget-html iframe[height="900"],
    .elementor-widget-html iframe[height="900px"],
    .elementor-widget-html iframe[height="1000px"] {
        height: 480px;
    }
}

/* =========================================================
   EAEL ADVANCED TABS — Content area overflow
   =========================================================

   Roads (4592), Topography (4613), Education (5010), and
   Health (5354) use the Essential Addons Advanced Tabs widget
   (eael-adv-tabs). Each tab renders an Elementor template
   that may itself contain a stretch_section or wide iframe.

   The tab content wrapper defaults to overflow:hidden, which
   would clip the template's content the same way the parent
   theme does. Setting overflow:visible here allows the tab
   content to expand naturally to its content dimensions.

   EAEL's base CSS gives .eael-tabs-content { display: flex;
   flex: 1 1 auto; overflow: hidden }. When an Elementor
   "stretch_section" template is embedded inside a tab that
   is HIDDEN at page load, Elementor's StretchedElement JS
   handler runs during page init and measures offset().left
   as 0 (hidden elements have no position), then writes
   left: 0; width: 100vw to the section. When the user later
   activates that tab, the stretch values are wrong:
     - correct first tab (active at load) → left: -Xpx
     - wrong second tab (hidden at load) → left: 0

   The flex container's cross-axis geometry then collapses
   the content height to ~200px because the section's inline
   style creates a layout conflict inside the flex row.

   Fix A (CSS): Switch display:flex → display:block on
   .eael-tabs-content. Removes all flex cross-axis geometry.
   Active tab content items expand naturally as block elements.

   Fix B (JS — assets/js/pages.js): On each tab nav click,
   dispatch a synthetic window resize event after 100ms.
   Elementor's StretchedElement uses addListenerOnce('resize')
   which in non-edit mode is a permanent jQuery .on('resize')
   handler. The re-dispatched resize event causes the handler
   to re-calculate offset().left for ALL stretch sections,
   including the one that just became visible, giving it the
   correct left: -Xpx; width: 100vw inline styles.
   ========================================================= */

.eael-advance-tabs .eael-tabs-content {
    display: block !important;  /* remove EAEL flex container */
    height: auto !important;
    overflow: visible !important;
}

.eael-advance-tabs .eael-tab-content-item {
    height: auto !important;
    overflow: visible !important;
}

/*
 * Elementor globally sets .elementor-widget-container { height: 100% }.
 * Inside an EAEL tab that is HIDDEN at page-load time, the flex ancestor
 * has no computed height yet, so 100% resolves to 0 and the entire
 * Elementor template inside the tab collapses to ~0px height.
 * Override: use height:auto so the widget container grows from its own
 * content (the iframe) rather than from the collapsed ancestor.
 */
.eael-advance-tabs .eael-tab-content-item .elementor-widget-container {
    height: auto !important;
}

/* =========================================================
   NON-ELEMENTOR TABLEAU PAGES — post_content safety
   =========================================================

   Pages 4559 (Demography), 4611 (Settlement), 4612 (Pop
   Density) embed Tableau directly in post_content with no
   Elementor. Their body tags do NOT get the elementor-page
   class, so the main overflow fix above does not apply.

   These pages embed via the standard Tableau object/JS
   pattern where the JS sets width:'100%' relative to the
   .tableauPlaceholder container. The post-content overflow
   is unlikely to clip horizontally (object fills content
   width), but overflow:auto provides a graceful fallback if
   Tableau's rendered iframe leaks slightly beyond its object
   boundary on small screens.
   ========================================================= */

body.page-id-4559 .post-content,
body.page-id-4611 .post-content,
body.page-id-4612 .post-content {
    overflow-x: auto;
}

/* =========================================================
   ARCGIS / EMBED CONTAINER — Desert Locust page (5376)
   =========================================================

   The Desert Locust page uses the intrinsic-ratio iframe
   technique (.embed-container with padding-bottom:80%) which
   is already well-formed. These rules ensure the technique
   works correctly inside Elementor's tab content area and
   that the iframe fills the embed container properly.
   ========================================================= */

.embed-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.embed-container iframe,
.embed-container object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}