/*
Theme Name:   TriMedia Child
Theme URI:    https://trimediadesign.com
Description:  TriMedia child theme based on Astra. All customizations live here and in functions.php — never edit the parent theme directly.
Author:       TriMedia Design
Author URI:   https://trimediadesign.com
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  trimedia-child
Tags:         custom-background, custom-logo, custom-menu, full-width-template
*/

/* ============================================================
   CHILD THEME — TriMedia Design
   All custom CSS goes here. Astra parent styles load first,
   then these rules override or extend them.
   ============================================================ */

/* ─── CSS CUSTOM PROPERTIES ─────────────────────────────── */
:root {
  --tm-blue:        #1EA9DC;
  --tm-blue-light:  #4DC3EE;
  --tm-blue-dark:   #1580A8;
  --tm-dark:        #0D1117;
  --tm-dark-mid:    #151B23;
  --tm-dark-card:   #1C232D;
  --tm-charcoal:    #1F2937;
  --tm-white:       #FFFFFF;
  --tm-off-white:   #F0F4F8;
  --tm-gray:        #8899AA;
  --tm-gray-light:  #C8D4E0;

  /* Elementor will also pick up these vars if referenced in widgets */
}

/* ─── GLOBAL RESETS FOR ASTRA COMPATIBILITY ─────────────── */
body {
  font-family: 'Barlow', sans-serif;
  background-color: var(--tm-dark) !important;
  color: var(--tm-white);
}

/* Remove Astra's default page title bar on all pages */
.ast-breadcrumbs-wrapper,
.ast-above-header-wrap,
.entry-header.ast-no-thumbnail.ast-no-meta {
  display: none !important;
}

/* Remove default padding Astra adds to page content */
.ast-container,
.entry-content {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Elementor fullwidth — make sure no Astra wrapper constrains width */
.elementor-page .site-content,
.elementor-page #content,
.elementor-page .ast-container {
  padding: 0 !important;
  max-width: 100% !important;
}

/* ─── HEADER & FOOTER — Headers & Footers by UAE ────────── */
/*
  Plugin: "Elementor Header & Footer Builder" by Brainstorm Force
  (same team as Astra — this is the recommended free pairing)

  HOW IT WORKS:
  UAE hooks into Astra's template system directly. When a Header
  template has display condition "Entire Site", Astra automatically
  replaces its own header with the UAE template — no CSS hiding needed.
  Same for Footer. This is cleaner than Elementor Pro's method.

  SETUP STEPS:
  1. Install & activate "Elementor Header & Footer Builder" (free, wp.org)
  2. In WP Admin → Appearance → Header Footer Builder → Add New
  3. Choose type: Header — design your nav in Elementor
  4. Under Display Rules → set to "Entire Site"
  5. Repeat for Footer
  6. Astra will use your UAE templates automatically — nothing to comment out here

  TRANSPARENT HEADER ON HOMEPAGE ONLY:
  Astra has a built-in "Transparent Header" option under
  Customize → Header → Transparent Header. Enable it, set the
  sticky header to use your solid dark background on scroll.
  Or handle it in your UAE header template with custom CSS below.
*/

/* Transparent header — homepage hero overlap */
body.page-home .hfe-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent !important;
  z-index: 1000;
}

/* Sticky solid header on scroll (JS adds .sticky class) */
body.page-home .hfe-header.is-sticky {
  position: fixed;
  background: rgba(13,17,23,0.96) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(30,169,220,0.15);
}

/* All other pages — solid dark header always */
body:not(.page-home) .hfe-header {
  background: rgba(13,17,23,0.98) !important;
  border-bottom: 1px solid rgba(30,169,220,0.12);
}

/* ─── GOOGLE FONTS LOADING NOTE ─────────────────────────── */
/*
  Bebas Neue, Barlow, and Barlow Condensed are enqueued via
  functions.php below. Do not use @import here — enqueuing is
  faster and respects WordPress asset loading order.
*/

/* ─── UTILITY CLASSES ───────────────────────────────────── */
.tm-blue    { color: var(--tm-blue) !important; }
.tm-dark-bg { background-color: var(--tm-dark) !important; }
.tm-section-pad { padding: 100px 0; }

/* ─── BUTTONS (global overrides for Elementor button widgets) */
.elementor-button.tm-btn-primary {
  background: var(--tm-blue);
  color: var(--tm-white);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 3px;
  transition: background 0.25s, transform 0.25s;
}
.elementor-button.tm-btn-primary:hover {
  background: var(--tm-blue-light);
  color: var(--tm-dark);
  transform: translateY(-2px);
}

/* ─── ELEMENTOR SECTION BACKGROUNDS ─────────────────────── */
/* Dark mid sections */
.tm-section-dark-mid {
  background-color: var(--tm-dark-mid) !important;
}
/* Blue accent band */
.tm-section-blue {
  background-color: var(--tm-blue) !important;
}

/* ─── TYPOGRAPHY SCALES ─────────────────────────────────── */
.tm-display {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  line-height: 0.95;
}
.tm-condensed {
  font-family: 'Barlow Condensed', sans-serif;
}
.tm-section-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--tm-blue);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.tm-section-label::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--tm-blue);
}

/* ─── SCROLL REVEAL HELPER ───────────────────────────────── */
/*
  Add class "tm-reveal" to any Elementor widget/section.
  The JS in functions.php handles the IntersectionObserver.
*/
.tm-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.tm-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/*  ASTRA HEADER BACKGROUND OVERRIDE  */
/* Force Astra's primary header bar to match the dark body background.
 *    Fixes the white header visible in Elementor editor previews. */
.ast-primary-header-bar,
#masthead .ast-primary-header-bar {
	  background-color: var(--tm-dark) !important;
	  background-image: none !important;
}
}