/*
 Theme Name:   Divi Headix
 Theme URI:    https://headixmediahouse.com
 Description:  Headix Mediahouse Child Theme for Divi
 Author:       Headix Mediahouse
 Author URI:   https://headixmediahouse.com
 Template:     Divi
 Version:      1.0.0
 Text Domain:  divi-headix
*/

/* =====================================================
   HEADIX MEDIAHOUSE – DESIGN SYSTEM
   Cinematic. Dark. Premium.
===================================================== */

:root {
  --hx-black:      #000000;
  --hx-dark:       #0a0a0a;
  --hx-dark2:      #111111;
  --hx-dark3:      #1a1a1a;
  --hx-dark4:      #222222;
  --hx-grey:       #333333;
  --hx-grey2:      #555555;
  --hx-grey3:      #888888;
  --hx-white:      #ffffff;
  --hx-white2:     #f5f5f5;
  --hx-gold:       #c9a84c;
  --hx-gold2:      #e8c97a;
  --hx-gold-dark:  #8a6f2e;
  --hx-accent:     var(--hx-gold);

  --hx-font-heading: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --hx-font-body:    'Montserrat', 'Inter', Arial, sans-serif;
  --hx-font-mono:    'Space Mono', monospace;

  --hx-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --hx-transition-fast: all 0.2s ease;
}

/* ---- GLOBAL RESET & BASE ---- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--hx-dark) !important;
  color: var(--hx-white2) !important;
  font-family: var(--hx-font-body) !important;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---- TYPOGRAPHY ---- */
h1, h2, h3, h4, h5, h6,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3,
.et_pb_text h4, .et_pb_text h5, .et_pb_text h6 {
  font-family: var(--hx-font-heading) !important;
  color: var(--hx-white) !important;
  letter-spacing: 0.03em;
  line-height: 1.15;
  font-weight: 700;
}

h1 { font-size: clamp(3rem, 8vw, 7rem); }
h2 { font-size: clamp(2rem, 5vw, 4rem); }
h3 { font-size: clamp(1.4rem, 3vw, 2.2rem); }

p { color: var(--hx-white2) !important; line-height: 1.8; }

a {
  color: var(--hx-gold) !important;
  text-decoration: none;
  transition: var(--hx-transition-fast);
}
a:hover { color: var(--hx-gold2) !important; }

/* ---- HEADER / NAVIGATION ---- */
#main-header,
.et-fixed-header {
  background-color: rgba(0, 0, 0, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2) !important;
  transition: var(--hx-transition) !important;
}

#main-header .et_pb_menu__logo,
.et-fixed-header .et_pb_menu__logo {
  max-height: 50px;
}

#et-secondary-nav,
#top-header {
  background-color: var(--hx-black) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15) !important;
}

#top-header .et-social-icons a,
#top-header span { color: var(--hx-gold) !important; }

#main-header .et_pb_menu .et_pb_menu__menu a,
#main-nav ul li a,
.et-menu a {
  color: var(--hx-white) !important;
  font-family: var(--hx-font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 0 1.2rem !important;
  transition: var(--hx-transition-fast) !important;
}

.et-menu a:hover,
#main-nav ul li a:hover { color: var(--hx-gold) !important; }

#main-nav ul li.current-menu-item > a,
#main-nav ul li.current_page_item > a { color: var(--hx-gold) !important; }

/* Dropdown */
#main-nav ul ul,
.et-menu ul { background-color: rgba(0,0,0,0.97) !important; border-top: 2px solid var(--hx-gold) !important; }
#main-nav ul ul li a { padding: 0.6rem 1.5rem !important; }

/* Mobile menu */
.mobile_menu_bar { color: var(--hx-white) !important; }
.et_mobile_menu { background-color: var(--hx-black) !important; }
.et_mobile_menu li a { color: var(--hx-white) !important; border-bottom: 1px solid var(--hx-dark3) !important; }

/* ---- SECTIONS ---- */
.et_pb_section {
  background-color: var(--hx-dark) !important;
}

.et_pb_section.hx-dark2 { background-color: var(--hx-dark2) !important; }
.et_pb_section.hx-dark3 { background-color: var(--hx-dark3) !important; }
.et_pb_section.hx-black  { background-color: var(--hx-black) !important; }

/* ---- HERO SECTION ---- */
.hx-hero {
  position: relative;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden;
}

.hx-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.3) 0%,
    rgba(0,0,0,0.1) 40%,
    rgba(0,0,0,0.6) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.hx-hero .et_pb_row { position: relative; z-index: 2; }

/* Video hero placeholder */
.hx-video-wrapper {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0d0d0d 100%);
  overflow: hidden;
}

.hx-video-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(ellipse at 20% 50%, rgba(201, 168, 76, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(201, 168, 76, 0.03) 0%, transparent 50%);
}

/* ---- BUTTONS ---- */
.et_pb_button,
a.et_pb_button {
  background-color: transparent !important;
  color: var(--hx-white) !important;
  border: 1px solid var(--hx-gold) !important;
  border-radius: 0 !important;
  font-family: var(--hx-font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 1rem 2.5rem !important;
  transition: var(--hx-transition) !important;
  position: relative;
  overflow: hidden;
}

.et_pb_button::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--hx-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -1;
}

.et_pb_button:hover { color: var(--hx-black) !important; }
.et_pb_button:hover::before { transform: scaleX(1); }

/* Gold filled variant */
.et_pb_button.hx-btn-gold {
  background-color: var(--hx-gold) !important;
  color: var(--hx-black) !important;
}
.et_pb_button.hx-btn-gold:hover {
  background-color: var(--hx-gold2) !important;
  color: var(--hx-black) !important;
}

/* ---- DIVIDERS & DECORATIVE ---- */
.hx-divider-gold {
  width: 60px;
  height: 2px;
  background-color: var(--hx-gold);
  margin: 1.5rem 0;
}

.hx-eyebrow {
  font-family: var(--hx-font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--hx-gold) !important;
  display: block;
  margin-bottom: 1rem;
}

/* ---- SERVICE CARDS ---- */
.hx-service-card .et_pb_blurb_container {
  background-color: var(--hx-dark3) !important;
  border: 1px solid rgba(201, 168, 76, 0.15) !important;
  padding: 2.5rem !important;
  transition: var(--hx-transition) !important;
  position: relative;
  overflow: hidden;
}

.hx-service-card .et_pb_blurb_container::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--hx-gold), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.hx-service-card .et_pb_blurb_container:hover {
  border-color: rgba(201, 168, 76, 0.4) !important;
  transform: translateY(-4px);
}

.hx-service-card .et_pb_blurb_container:hover::before { transform: scaleX(1); }
.hx-service-card .et_pb_blurb_title { color: var(--hx-white) !important; font-size: 1.3rem !important; }

/* ---- PORTFOLIO GRID ---- */
.hx-portfolio-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  background-color: var(--hx-dark3);
  cursor: pointer;
}

.hx-portfolio-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hx-portfolio-item:hover::after { opacity: 1; }

.hx-portfolio-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem;
  transform: translateY(100%);
  transition: transform 0.4s ease;
  z-index: 2;
}

.hx-portfolio-item:hover .hx-portfolio-overlay { transform: translateY(0); }

/* ---- COUNTERS / STATS ---- */
.hx-stat .et_pb_number_counter_title {
  color: var(--hx-gold) !important;
  font-family: var(--hx-font-heading) !important;
  font-size: 3.5rem !important;
  font-weight: 700 !important;
}
.hx-stat p { color: var(--hx-grey3) !important; font-size: 0.75rem !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; }

/* ---- TESTIMONIALS ---- */
.hx-testimonial { 
  border-left: 2px solid var(--hx-gold) !important; 
  padding-left: 2rem !important;
}

/* ---- FORMS ---- */
.et_pb_contact_form input,
.et_pb_contact_form textarea,
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
  background-color: var(--hx-dark3) !important;
  border: 1px solid var(--hx-grey) !important;
  color: var(--hx-white) !important;
  border-radius: 0 !important;
  padding: 1rem 1.2rem !important;
  font-family: var(--hx-font-body) !important;
  transition: border-color 0.3s ease !important;
}

.et_pb_contact_form input:focus,
.et_pb_contact_form textarea:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  border-color: var(--hx-gold) !important;
  outline: none !important;
}

.et_pb_contact_form label,
.wpcf7-form label {
  color: var(--hx-grey3) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

/* ---- FOOTER ---- */
#main-footer {
  background-color: var(--hx-black) !important;
  border-top: 1px solid rgba(201, 168, 76, 0.2) !important;
}

#footer-widgets { background-color: var(--hx-black) !important; padding: 4rem 0 !important; }
#footer-widgets .footer-widget h4, 
#footer-widgets .widget-title {
  color: var(--hx-gold) !important;
  font-family: var(--hx-font-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin-bottom: 1.5rem !important;
}

#footer-widgets p, #footer-widgets a, #footer-widgets li a {
  color: var(--hx-grey3) !important;
  font-size: 0.85rem !important;
}
#footer-widgets a:hover { color: var(--hx-gold) !important; }

#et-footer-nav { background-color: var(--hx-black) !important; border-top: 1px solid var(--hx-dark3) !important; }
#et-footer-nav .bottom-nav a, #et-footer-nav p { color: var(--hx-grey2) !important; font-size: 0.75rem !important; }
#et-footer-nav a:hover { color: var(--hx-gold) !important; }

/* ---- DIVI MODULE OVERRIDES ---- */
.et_pb_row { position: relative; }

.et_pb_text_inner { color: var(--hx-white2) !important; }

.et_pb_bg_layout_dark .et_pb_text_inner { color: var(--hx-white2) !important; }

.et_pb_image img { border: none !important; }

/* Separator / divider lines */
.et_pb_divider_internal {
  border-color: var(--hx-grey) !important;
}

/* ---- IMAGE PLACEHOLDERS ---- */
.hx-placeholder-img {
  background: linear-gradient(135deg, var(--hx-dark3) 0%, var(--hx-dark4) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  position: relative;
}

.hx-placeholder-img::before {
  content: 'HEADIX';
  position: absolute;
  font-family: var(--hx-font-heading);
  font-size: 4rem;
  font-weight: 700;
  color: rgba(201, 168, 76, 0.06);
  letter-spacing: 0.3em;
  white-space: nowrap;
}

/* ---- SCROLL ANIMATIONS ---- */
.hx-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.hx-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- LANGUAGE SWITCHER ---- */
.hx-lang-switcher {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.hx-lang-switcher a {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--hx-grey3) !important;
  padding: 0.2rem 0.5rem !important;
  border: 1px solid transparent;
  transition: var(--hx-transition-fast) !important;
}
.hx-lang-switcher a.active,
.hx-lang-switcher a:hover {
  color: var(--hx-gold) !important;
  border-color: var(--hx-gold) !important;
}

/* ---- VIDEO PLACEHOLDER ---- */
.hx-video-placeholder {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: var(--hx-dark3);
  border: 1px solid var(--hx-grey);
}
.hx-video-placeholder::before {
  content: '▶';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: var(--hx-gold);
  width: 80px; height: 80px;
  border: 2px solid var(--hx-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 80px;
  text-align: center;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 980px) {
  h1 { font-size: clamp(2.5rem, 10vw, 5rem); }
  h2 { font-size: clamp(1.8rem, 7vw, 3rem); }

  .hx-hero { min-height: 90vh !important; }

  .et_pb_button { padding: 0.85rem 2rem !important; }
}

@media (max-width: 767px) {
  h1 { font-size: clamp(2rem, 12vw, 3.5rem); }
  .hx-hero { min-height: 85vh !important; }
}

/* ---- GOOGLE FONTS IMPORT ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap');