/*
Theme Name:   Tonalli Child
Theme URI:    https://tonalli.media
Description:  Tonalli Media Child Theme for Divi
Author:       Tonalli
Author URI:   https://tonalli.media
Template:     Divi
Version:      1.0.0
Text Domain:  tonalli-child
*/

/* ============================================================
   TONALLI CHILD THEME — GLOBAL STYLES
   All custom overrides go here. Divi's own styles load first,
   then this file layers on top.
   ============================================================ */

/* ─── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --tn-black:       #0a0a0a;
  --tn-black-soft:  #0f0f0f;
  --tn-orange:      #e8642a;
  --tn-orange-dark: #cf5520;
  --tn-gold:        #c9922a;
  --tn-cream:       #f0ece4;
  --tn-muted:       #888888;
  --tn-border:      rgba(255, 255, 255, 0.06);
  --tn-border-hover:rgba(232, 100, 42, 0.3);

  --tn-font-display: 'Playfair Display', Georgia, serif;
  --tn-font-body:    'DM Sans', system-ui, sans-serif;

  --tn-radius: 0px; /* flat, no border-radius — intentional */
}

/* ─── BASE ───────────────────────────────────────────────── */
html,
body {
  background-color: var(--tn-black) !important;
  color: var(--tn-cream) !important;
  font-family: var(--tn-font-body) !important;
  overflow-x: hidden;
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
h1, h2, h3, 
.et_pb_text h1,
.et_pb_text h2,
.et_pb_text h3 {
  font-family: var(--tn-font-display) !important;
  font-weight: 900 !important;
  color: var(--tn-cream) !important;
  line-height: 1.05 !important;
	
	
}


p,
.et_pb_text p,
.et_pb_blurb_description {
  font-family: var(--tn-font-body) !important;
  color: rgba(240, 236, 228, 0.7) !important;
  line-height: 1.75 !important;
}

/* Italic accent — wrap words in <em> for orange color */
em {
  font-style: italic;
  color: var(--tn-orange) !important;
}

/* Orange accent text — add class "tn-accent" in Divi text module */
.tn-accent {
  color: var(--tn-orange) !important;
}

/* Eyebrow / section labels — add class "tn-eyebrow" */
.tn-eyebrow,
.tn-label {
  font-family: var(--tn-font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--tn-orange) !important;
  margin-bottom: 24px !important;
}

/* ─── DIVI HEADER / NAV ──────────────────────────────────── */
#main-header,
#main-header.et-fixed-header {
  background-color: rgba(10, 10, 10, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--tn-border) !important;
  box-shadow: none !important;
}

/* Nav links */
#main-header .nav li a,
#main-header .et_pb_menu .nav li a {
  font-family: var(--tn-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(240, 236, 228, 0.7) !important;
  transition: color 0.2s ease !important;
}

#main-header .nav li a:hover {
  color: var(--tn-cream) !important;
}

/* Logo sizing — set your logo in Divi > Theme Customizer */
#main-header .et_pb_image_wrap img,
.et-l--header img {
  max-height: 52px !important;
  width: auto !important;
  mix-blend-mode: lighten !important; /* drops black bg on dark nav */
}

/* ─── SECTIONS ───────────────────────────────────────────── */
.et_pb_section {
  background-color: var(--tn-black) !important;
}

/* Soft-black sections — add CSS class "tn-section-soft" in Divi */
.tn-section-soft,
.et_pb_section.tn-section-soft {
  background-color: var(--tn-black-soft) !important;
}

/* ─── HERO SECTION ───────────────────────────────────────── */
/* Add CSS class "tn-hero" to the hero section in Divi */
.tn-hero {
  min-height: 100vh !important;
  display: flex !important;
  position: relative !important;
  overflow: hidden !important;
}

.tn-hero .et_pb_row,
.tn-hero .et_pb_column {
  position: relative;
  z-index: 1;
}

/* Hero headline sizing */
.tn-hero h1 {
  font-size: clamp(64px, 9vw, 136px) !important;
  line-height: 0.95 !important;
  margin-bottom: 32px !important;
}

/* Subline — VIDEO · MOTION · DESIGN · BRAND */
.tn-hero-sub {
  font-size: 13px !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--tn-muted) !important;
  margin-bottom: 48px !important;
}

/* ─── BUTTONS ────────────────────────────────────────────── */
/* Primary — orange fill */
a.tn-btn-primary,
.tn-btn-primary {
  background-color: var(--tn-orange) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--tn-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 16px 40px !important;
  transition: background-color 0.2s ease !important;
  text-decoration: none !important;
}

a.tn-btn-primary:hover,
.tn-btn-primary:hover {
  background-color: var(--tn-orange-dark) !important;
  border: none !important;
}

/* Ghost button — add class "tn-btn-ghost" in Divi */
a.tn-btn-ghost,
.tn-btn-ghost {
  background-color: transparent !important;
  color: var(--tn-cream) !important;
  border: 1px solid rgba(240, 236, 228, 0.35) !important;
  border-radius: 0 !important;
  font-family: var(--tn-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 16px 40px !important;
  display: inline-block !important;
  transition: border-color 0.2s ease !important;
  text-decoration: none !important;
}

a.tn-btn-ghost:hover,
.tn-btn-ghost:hover {
  border-color: var(--tn-cream) !important;
}

/* ─── WORK GRID ──────────────────────────────────────────── */
/* Add class "tn-work-grid" to the row containing your work items */
.tn-work-grid {
  gap: 3px !important;
}

/* Individual work item — add class "tn-work-item" to each column */
.tn-work-item {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 16 / 10 !important;
  cursor: pointer !important;
}

.tn-work-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s ease !important;
}

.tn-work-item:hover img {
  transform: scale(1.04) !important;
}

/* Overlay gradient on work items */
.tn-work-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 55%);
  pointer-events: none;
  z-index: 1;
}

/* Work item text sits above overlay */
.tn-work-item .et_pb_text_inner {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 32px !important;
  z-index: 2 !important;
}

.tn-work-item h3 {
  font-size: 28px !important;
  color: #ffffff !important;
  margin: 0 !important;
}

/* ─── STATS ROW ──────────────────────────────────────────── */
/* Add class "tn-stats" to the row containing number counters */
.tn-stats {
  border-top: 1px solid var(--tn-border) !important;
  padding-top: 64px !important;
  margin-top: 64px !important;
}

.tn-stats .et_pb_number_counter .percent {
  font-family: var(--tn-font-display) !important;
  font-size: 56px !important;
  font-weight: 900 !important;
  color: var(--tn-cream) !important;
  line-height: 1 !important;
}

.tn-stats .et_pb_number_counter .title {
  font-family: var(--tn-font-body) !important;
  font-size: 12px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--tn-muted) !important;
}

/* ─── SERVICE CARDS ──────────────────────────────────────── */
/* Add class "tn-service-card" to each blurb/column module */
.tn-service-card {
  border: 1px solid var(--tn-border) !important;
  padding: 48px 40px !important;
  transition: border-color 0.25s ease !important;
}

.tn-service-card:hover {
  border-color: var(--tn-border-hover) !important;
}

.tn-service-card .et_pb_blurb_title,
.tn-service-card h3 {
  font-family: var(--tn-font-display) !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--tn-cream) !important;
  margin-bottom: 16px !important;
}

.tn-service-card .et_pb_blurb_description,
.tn-service-card p {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: rgba(240, 236, 228, 0.6) !important;
}

/* ─── CLIENT LOGOS ROW ───────────────────────────────────── */
/* Add class "tn-clients" to the section */
.tn-clients {
  border-top: 1px solid var(--tn-border) !important;
}

.tn-clients .et_pb_image img {
  filter: grayscale(100%) brightness(0.5) !important;
  transition: filter 0.25s ease !important;
}

.tn-clients .et_pb_image img:hover {
  filter: grayscale(0%) brightness(1) !important;
}

/* If using text-only client names */
.tn-client-name {
  font-family: var(--tn-font-body) !important;
  font-size: 13px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(240, 236, 228, 0.3) !important;
  transition: color 0.2s ease !important;
}

.tn-client-name:hover {
  color: rgba(240, 236, 228, 0.7) !important;
}

/* ─── CONTACT FORM ───────────────────────────────────────── */
.et_pb_contact_form_container input,
.et_pb_contact_form_container textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--tn-cream) !important;
  font-family: var(--tn-font-body) !important;
  font-size: 15px !important;
  border-radius: 0 !important;
  padding: 14px 18px !important;
  transition: border-color 0.2s ease !important;
}

.et_pb_contact_form_container input:focus,
.et_pb_contact_form_container textarea:focus {
  border-color: var(--tn-orange) !important;
  outline: none !important;
}

.et_pb_contact_form_container input::placeholder,
.et_pb_contact_form_container textarea::placeholder {
  color: rgba(240, 236, 228, 0.25) !important;
}

.et_pb_contact_form_container label {
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--tn-muted) !important;
  font-family: var(--tn-font-body) !important;
}

.et_pb_contact_submit {
  background-color: var(--tn-orange) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--tn-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 16px 48px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.et_pb_contact_submit:hover {
  background-color: var(--tn-orange-dark) !important;
}

/* ─── FOOTER ─────────────────────────────────────────────── */
#main-footer {
  background-color: var(--tn-black) !important;
  border-top: 1px solid var(--tn-border) !important;
}

#main-footer .et_pb_widget,
#main-footer p,
#main-footer a {
  font-family: var(--tn-font-body) !important;
  color: var(--tn-muted) !important;
  font-size: 13px !important;
}

#main-footer a:hover {
  color: var(--tn-cream) !important;
}

/* Footer logo — same blend trick as nav */
#main-footer img {
  max-height: 40px !important;
  width: auto !important;
  mix-blend-mode: lighten !important;
}

/* ─── DIVI BUILDER UTILITY OVERRIDES ─────────────────────── */

/* Remove Divi's default section padding when you want edge-to-edge */
.et_pb_section.tn-flush {
  padding: 0 !important;
}

/* Dividers — hide Divi's default section dividers */
.et_pb_section .et_pb_bottom_inside_divider,
.et_pb_section .et_pb_top_inside_divider {
  display: none !important;
}

/* Remove rounded corners globally */
.et_pb_button,
.et_pb_promo,
.et_pb_blurb {
  border-radius: 0 !important;
}

/* ─── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--tn-black); }
::-webkit-scrollbar-thumb { background: rgba(232, 100, 42, 0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--tn-orange); }

/* ─── SELECTION ──────────────────────────────────────────── */
::selection {
  background: var(--tn-orange);
  color: #ffffff;
}

.tn-hero .et_pb_section_video_bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}