/*
Theme Name:   NAHACO Child
Theme URI:    https://nahaco.com.vn
Description:  NAHACO child theme based on Astra — green industrial theme
Author:       NAHACO / Namhai Technology
Author URI:   https://nahaco.com.vn
Template:     astra
Version:      1.0.0
Text Domain:  nahaco-child
*/

/* =============================================
   NAHACO BRAND COLORS — chỉnh ở đây là xong
   ============================================= */
:root {
  --nahaco-navy:   #0D2214;
  --nahaco-green:  #7CB342;
  --nahaco-sky:    #2E7D32;
  --nahaco-cream:  #F2F7F2;
  --nahaco-gray:   #4A6048;
}

/* =============================================
   FONTS
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap');

body {
  font-family: 'DM Sans', sans-serif !important;
  background: var(--nahaco-cream);
  color: var(--nahaco-navy);
}

h1, h2, h3, h4 {
  font-family: 'DM Serif Display', serif !important;
  color: var(--nahaco-navy);
}

/* =============================================
   HEADER / NAV
   ============================================= */
.ast-site-header-wrap,
#masthead,
.site-header {
  background: var(--nahaco-navy) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ast-primary-header-bar {
  background: var(--nahaco-navy) !important;
}

/* Logo text */
.ast-site-title a,
.site-title a {
  font-family: 'DM Serif Display', serif !important;
  color: #fff !important;
  font-size: 1.5rem !important;
}

/* Nav links */
.main-header-menu .menu-item a,
.ast-builder-menu .menu-item a {
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  transition: color 0.3s ease !important;
}

.main-header-menu .menu-item a:hover,
.main-header-menu .current-menu-item a {
  color: #fff !important;
}

/* Dropdown */
.main-header-menu .sub-menu {
  background: rgba(13,34,20,0.97) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 4px !important;
}

.main-header-menu .sub-menu .menu-item a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.78rem !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}

.main-header-menu .sub-menu .menu-item a:hover {
  color: #fff !important;
  background: rgba(124,179,66,0.15) !important;
}

/* =============================================
   BUTTONS
   ============================================= */
.ast-button,
.wp-block-button__link,
.button,
input[type="submit"],
.wpcf7-submit {
  background: var(--nahaco-green) !important;
  color: #fff !important;
  border-radius: 3px !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 12px 26px !important;
  transition: all 0.3s ease !important;
}

.ast-button:hover,
.wp-block-button__link:hover,
.button:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover {
  background: #8bc34a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(124,179,66,0.35) !important;
}

/* Outline button */
.btn-outline-nahaco {
  background: transparent !important;
  color: var(--nahaco-navy) !important;
  border: 1px solid rgba(13,34,20,0.25) !important;
}

.btn-outline-nahaco:hover {
  border-color: var(--nahaco-sky) !important;
  color: var(--nahaco-sky) !important;
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}

/* =============================================
   LINKS
   ============================================= */
a {
  color: var(--nahaco-sky) !important;
}
a:hover {
  color: var(--nahaco-green) !important;
}

/* =============================================
   ELEMENTOR — section backgrounds
   ============================================= */
/* Dark hero sections */
.nahaco-dark {
  background: var(--nahaco-navy) !important;
  color: #fff;
}
.nahaco-dark h1,.nahaco-dark h2,.nahaco-dark h3 {
  color: #fff !important;
}
.nahaco-dark p { color: rgba(255,255,255,0.65) !important; }

/* Steel (mid-dark green) sections */
.nahaco-steel {
  background: #1A3D22 !important;
  color: #fff;
}
.nahaco-steel h2 { color: #fff !important; }
.nahaco-steel p  { color: rgba(255,255,255,0.6) !important; }

/* Light cream sections */
.nahaco-light {
  background: var(--nahaco-cream) !important;
}

/* Green CTA band */
.nahaco-cta {
  background: var(--nahaco-green) !important;
  color: #fff;
}
.nahaco-cta h2 { color: #fff !important; }
.nahaco-cta p  { color: rgba(255,255,255,0.8) !important; }

/* =============================================
   SECTION LABEL (Space Mono tag)
   ============================================= */
.nahaco-label {
  font-family: 'Space Mono', monospace !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--nahaco-green) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
.nahaco-label::before {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  background: var(--nahaco-green);
  flex-shrink: 0;
}

/* =============================================
   APPLICATION CARDS
   ============================================= */
.nahaco-app-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 28px 22px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.nahaco-app-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--nahaco-green);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.nahaco-app-card:hover::after  { transform: scaleX(1); }
.nahaco-app-card:hover {
  border-color: rgba(124,179,66,0.35);
  transform: translateY(-4px);
  background: rgba(255,255,255,0.07);
}

/* =============================================
   PRODUCT CARDS
   ============================================= */
.nahaco-product-card {
  background: #fff;
  border: 1px solid rgba(13,34,20,0.08);
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.nahaco-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 48px rgba(13,34,20,0.12);
  border-color: var(--nahaco-sky);
}
.nahaco-product-card .card-brand {
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nahaco-sky);
  margin-bottom: 6px;
}

/* =============================================
   NEWS CARDS
   ============================================= */
.nahaco-news-card {
  background: #fff;
  border: 1px solid rgba(13,34,20,0.08);
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.nahaco-news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(13,34,20,0.1);
}
.nahaco-news-tag {
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  color: #fff;
}
.tag-project { background: var(--nahaco-sky); }
.tag-news    { background: #e09600; }
.tag-product { background: #7b3fc4; }

/* =============================================
   CONTACT FORM (WPForms / CF7)
   ============================================= */
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
  background: var(--nahaco-cream) !important;
  border: 1px solid rgba(13,34,20,0.15) !important;
  border-radius: 4px !important;
  padding: 11px 14px !important;
  color: var(--nahaco-navy) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.88rem !important;
  width: 100% !important;
  transition: border-color 0.3s ease !important;
  outline: none !important;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpforms-field input:focus,
.wpforms-field textarea:focus {
  border-color: var(--nahaco-green) !important;
  background: #fff !important;
}

/* =============================================
   FOOTER
   ============================================= */
.ast-footer-area,
#colophon,
.site-footer {
  background: #060f08 !important;
  color: rgba(255,255,255,0.4) !important;
}
.ast-footer-area a,
.site-footer a {
  color: rgba(255,255,255,0.45) !important;
  text-decoration: none !important;
}
.ast-footer-area a:hover,
.site-footer a:hover {
  color: #fff !important;
}
.ast-footer-widget-area {
  background: #060f08 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 48px 0 !important;
}
.ast-footer-widget-area h4,
.widget-title {
  font-family: 'DM Serif Display', serif !important;
  color: #fff !important;
  font-size: 1rem !important;
  margin-bottom: 16px !important;
}
.ast-small-footer {
  background: #030a04 !important;
  color: rgba(255,255,255,0.2) !important;
  font-size: 0.72rem !important;
}

/* =============================================
   MOBILE
   ============================================= */
@media (max-width: 768px) {
  .ast-mobile-header-wrap {
    background: var(--nahaco-navy) !important;
  }
  .ast-mobile-menu-trigger-btn,
  .menu-toggle {
    color: #fff !important;
  }
  .ast-mobile-popup-drawer .ast-mobile-popup-inner,
  .ast-flyout-menu-enable .ast-mobile-header-content {
    background: var(--nahaco-navy) !important;
  }
}