/*
Theme Name:   NJ AND CONSULTING (ธีมลูก Divi)
Theme URI:    https://njandconsulting.com/
Description:  ธีมลูกของ Divi สำหรับ njandconsulting.com วางชุดสี ฟอนต์ไทย หัวเว็บ เมนู ปุ่ม และท้ายเว็บใหม่ โดยไม่แตะไฟล์ธีม Divi เดิม อัปเดต Divi ได้ตามปกติ
Author:       NJ AND CONSULTING
Template:     Divi
Version:      1.2.1
Text Domain:  njandconsulting-child
*/

/* =========================================================================
   ระลอก 1 — รากดีไซน์ หัวเว็บ เมนู ปุ่ม ท้ายเว็บ
   แก้ไฟล์นี้ได้เลย ของเดิมใน Divi ไม่ถูกแตะ ถ้าอยากย้อนกลับให้สลับไปใช้ธีม Divi
   ========================================================================= */

:root{
  /* ชุดสี ยึดจากที่ดินชัวร์ เพื่อให้สามระบบดูเป็นเจ้าของเดียวกัน */
  --nj-navy:        #0B1F3A;   /* น้ำเงินเข้ม สีหลักของแบรนด์ */
  --nj-navy-2:      #12304F;   /* น้ำเงินรอง ใช้ไล่เฉดและ hover */
  --nj-accent:      #C4520D;   /* ส้มหมุดหลักเขต สีเน้นสีเดียวของเว็บ */
  --nj-accent-dark: #A34309;
  --nj-accent-soft: #FBEADF;
  --nj-verified:    #0F7A3E;   /* ใช้เฉพาะป้าย "ผ่านการรังวัดแล้ว" ห้ามเอาไปตกแต่ง */
  --nj-verified-soft:#DFF2E7;

  --nj-ink:    #16283D;        /* ตัวอักษรหลัก */
  --nj-slate:  #53667A;        /* ตัวอักษรรอง */
  --nj-muted:  #8496A8;        /* ป้ายกำกับ ตัวเลขประกอบ */
  --nj-line:   #D9E2EB;
  --nj-line-soft:#E7EDF3;
  --nj-ground: #F2F5F8;        /* พื้นกระดาษ */
  --nj-surface:#FFFFFF;

  --nj-display: "Bai Jamjuree", "IBM Plex Sans Thai", "Helvetica Neue", sans-serif;
  --nj-body:    "IBM Plex Sans Thai", "Bai Jamjuree", "Helvetica Neue", sans-serif;
  --nj-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --nj-radius:  10px;
  --nj-shell:   1180px;
}

/* -------------------------------------------------------------------------
   ตัวอักษร
   ------------------------------------------------------------------------- */
/* ⚠️ ทำไมต้องมี !important ตรงฟอนต์
   Divi > Theme Options ตั้งฟอนต์ Kanit ไว้ที่หน้าตั้งค่า แล้วสร้างเป็นไฟล์
   `et-cache/.../et-divi-dynamic-*.css` ที่ใช้ selector `body` ตัวเดียวเท่ากับของเรา
   พอ specificity เท่ากัน ผลจึงขึ้นกับลำดับไฟล์ ซึ่งเปลี่ยนได้เองเมื่อ Divi
   สร้างแคช CSS ใหม่ — ฟอนต์เว็บจะสลับไปมาโดยไม่มีใครแก้อะไรเลย
   ถ้าวันหนึ่งเปลี่ยนฟอนต์ที่ Theme Options แล้วไม่ขึ้น ให้มาลบ !important สามจุดนี้ */
body,
body.et_pb_pagebuilder_layout,
.et_pb_module,
.et_pb_text,
input, textarea, select, button{
  font-family: var(--nj-body) !important;
  color: var(--nj-ink);
}
body{ font-size:16px; line-height:1.78; background:var(--nj-surface); }
p{ line-height:1.78; }

h1,h2,h3,h4,h5,h6,
.et_pb_module h1,.et_pb_module h2,.et_pb_module h3,.et_pb_module h4,.et_pb_module h5,.et_pb_module h6{
  font-family: var(--nj-display) !important;
  color: var(--nj-navy);
  line-height:1.34;
  letter-spacing:-.005em;
  text-wrap: balance;
}
h1{ font-size:clamp(28px,4.2vw,46px); font-weight:700; }
h2{ font-size:clamp(23px,2.8vw,33px); font-weight:600; }
h3{ font-size:clamp(19px,2.1vw,24px); font-weight:600; }
h4{ font-size:18px; font-weight:600; }

/* ตัวเลข พิกัด เนื้อที่ ราคา ให้ใช้คลาสนี้ เพื่อให้หลักเลขตรงกันทุกบรรทัด */
.nj-num{
  font-family: var(--nj-mono);
  font-variant-numeric: tabular-nums;
  font-weight:500;
}

a{ color: var(--nj-accent); }
a:hover{ color: var(--nj-accent-dark); }

/* โฟกัสคีย์บอร์ด ต้องมองเห็นเสมอ */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--nj-accent);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* -------------------------------------------------------------------------
   แถบบนสุด เบอร์โทรและอีเมล
   ------------------------------------------------------------------------- */
#top-header{
  background: var(--nj-navy) !important;
  font-family: var(--nj-body);
  font-size:13px;
  letter-spacing:.01em;
}
#top-header .container{ padding-top:8px; padding-bottom:8px; }
#top-header a, #top-header span{ color:#C6D6E5 !important; }
#top-header a:hover{ color:#FFFFFF !important; }

/* -------------------------------------------------------------------------
   หัวเว็บและเมนูหลัก
   ------------------------------------------------------------------------- */
#main-header{
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: none;
  border-bottom: 1px solid var(--nj-line);
}
#main-header.et-fixed-header{
  box-shadow: 0 6px 22px rgba(11,31,58,.08) !important;
  border-bottom-color: var(--nj-line-soft);
}
#main-header .container{ max-width: var(--nj-shell); }

/* ⚠️ selector ของหัวเว็บต้องขึ้นต้นด้วย #main-header
   Divi พิมพ์ <style id="et-critical-inline-css"> ต่อท้ายไฟล์นี้เสมอ และในนั้นมี
   #top-menu li a{font-size:16px} กับ #logo{max-height:85%} ซึ่ง specificity เท่ากับของเราพอดี
   พอเท่ากัน ตัวที่มาทีหลังชนะ → ขนาดตัวอักษรเมนูในไฟล์นี้ไม่เคยมีผลบนเว็บจริง (วัด 13 ก.ย. 69)

   ผลหลังเติม #main-header (ทดสอบบนเว็บจริงในตำแหน่งเดียวกับไฟล์นี้)
   ✓ ขนาดตัวอักษรเมนู ใช้ได้จริงทุกความกว้าง
   ? ความสูงโลโก้ ยังอ่านได้ 85% ของ Divi เป็นส่วนใหญ่ และค่าเปลี่ยนเองระหว่างย่อขยายจอ
     น่าจะเป็นสคริปต์ของ Divi ปรับโลโก้เอง แต่ยังไม่ได้ยืนยัน
     → อย่าพึ่งกฎ max-height ของโลโก้เพื่อกันเมนูทับ ช่วงความกว้างด้านล่างคิดโดยถือว่าโลโก้กว้าง ~410px แล้ว */
#main-header #logo{ max-height:70%; }

#top-menu li a{
  font-family: var(--nj-body);
  font-weight:500;
  color: var(--nj-slate);
  padding-bottom:16px;
  transition: color .15s ease;
  opacity:1;
}
#main-header #top-menu li a{ font-size:14.5px; }
#top-menu li a:hover{ color: var(--nj-navy); opacity:1; }
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a,
#top-menu li.current-menu-ancestor > a{
  color: var(--nj-navy) !important;
  font-weight:600;
}
/* ขีดใต้เมนูที่กำลังเปิด ใช้สีเน้นเพื่อบอกตำแหน่ง */
#top-menu li{ position:relative; padding-right:20px; }
#top-menu li.current-menu-item > a::after,
#top-menu li.current_page_item > a::after{
  content:""; position:absolute; left:0; right:20px; bottom:10px;
  height:2px; background: var(--nj-accent); border-radius:2px;
}

/* เมนูย่อย */
#top-menu li ul.sub-menu{
  border-top:2px solid var(--nj-accent);
  border-radius:0 0 var(--nj-radius) var(--nj-radius);
  box-shadow:0 14px 34px rgba(11,31,58,.13);
  padding:8px 0;
}
#top-menu li ul.sub-menu li a{ padding:9px 20px !important; width:230px; font-size:14px; }
#top-menu li ul.sub-menu li a:hover{ background: var(--nj-ground); opacity:1; }

/* ---- เมนูสองหัวข้อใหม่ ที่ดินชัวร์ และ ระบบเอ็นเจ ----
   ใส่คลาส nj-new ให้รายการเมนูในหน้า "เมนู" ของ WordPress แล้วจะได้ป้าย "ใหม่" */
#top-menu li.nj-new > a{ color: var(--nj-accent) !important; font-weight:600; }
#top-menu li.nj-new > a::before{
  content:"ใหม่";
  font-family: var(--nj-mono);
  font-size:9px; font-weight:600; letter-spacing:.06em;
  vertical-align:super; margin-right:4px;
  color: var(--nj-accent);
}

/* ---- ปุ่มขอใบเสนอราคาบนเมนู ----
   ใส่คลาส nj-cta ให้รายการเมนูนั้น */
#top-menu li.nj-cta > a{
  background: var(--nj-navy);
  color:#FFFFFF !important;
  padding:9px 18px !important;
  border-radius:8px;
  font-weight:600;
  transition: background .15s ease;
}
#top-menu li.nj-cta > a:hover{ background: var(--nj-accent); }
#top-menu li.nj-cta > a::after{ display:none !important; }
#top-menu li.nj-cta{ padding-right:0; margin-left:6px; }

/* ---- แก้เมนูซ้อนทับโลโก้ (F-04) ----
   Divi สลับเป็นเมนูมือถือที่ 980px ซึ่งแคบเกินไปสำหรับเมนูภาษาไทยเจ็ดหัวข้อ

   ⚠️ ตัวเลขชุดนี้วัดจากเว็บจริง 13 ก.ย. 69 หลังเปิดใช้ธีมลูก ไม่ใช่กะเอา
   เมนูเต็ม (7 หัวข้อ + ป้าย "ใหม่" + ปุ่มขอใบเสนอราคา) กว้าง 741px ส่วนโลโก้กว้างราว 410px
   กล่องเนื้อหาของ Divi กว้างราว 79% ของจอ จึงวางเมนูเต็มข้างโลโก้ได้ต่อเมื่อจอกว้างเกิน ~1480px
   รุ่นแรกตั้งจุดสลับไว้ที่ 1240px ผลคือช่วง 1245–1480px เมนูไปทับพื้นที่โลโก้

   แก้เป็นสามช่วง
     981–1320px  → เมนูสามขีด (จอแคบเกินกว่าจะบีบเมนูเต็มให้พอดีได้)
     1321–1520px → เมนูเต็มแบบกระชับ (ลดช่องไฟ ตัวอักษร และความสูงโลโก้)
     1521px ขึ้นไป → เมนูเต็มตามปกติ
   เพิ่มหัวข้อเมนูเมื่อไหร่ ต้องวัดความกว้างใหม่แล้วขยับตัวเลขชุดนี้ตาม */
@media (min-width: 981px) and (max-width: 1320px){
  #top-menu-nav, #et_top_search{ display:none !important; }
  #et_mobile_nav_menu{ display:block !important; }
  #et-top-navigation{ padding-top:24px !important; }
}
@media (min-width: 1321px) and (max-width: 1520px){
  #main-header #logo{ max-height:58%; }
  #top-menu li{ padding-right:11px; }
  #main-header #top-menu li a{ font-size:13.5px; }
  #top-menu li.current-menu-item > a::after,
  #top-menu li.current_page_item > a::after{ right:11px; }
  #top-menu li.nj-new > a::before{ margin-right:2px; }
  #top-menu li.nj-cta > a{ padding:8px 13px !important; }
  #top-menu li.nj-cta{ margin-left:4px; }
}
.et_mobile_menu{
  border-top:2px solid var(--nj-accent);
  box-shadow:0 14px 34px rgba(11,31,58,.13);
}
.et_mobile_menu li a{ font-family:var(--nj-body); font-size:15px; color:var(--nj-slate); padding:12px 5%; }
.et_mobile_menu li.nj-new > a{ color:var(--nj-accent); font-weight:600; }
.mobile_menu_bar:before{ color: var(--nj-navy); }

/* -------------------------------------------------------------------------
   ปุ่ม
   ------------------------------------------------------------------------- */
.et_pb_button,
.et_pb_contact_submit,
.woocommerce a.button{
  font-family: var(--nj-body) !important;
  font-weight:600 !important;
  font-size:15px !important;
  letter-spacing:0 !important;
  border-radius: var(--nj-radius) !important;
  border-width:1px !important;
  padding:13px 28px !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease !important;
}
.et_pb_button:after, .et_pb_button:before{ display:none !important; }
.et_pb_bg_layout_light .et_pb_button,
.et_pb_button{
  background: var(--nj-navy) !important;
  border-color: var(--nj-navy) !important;
  color:#FFFFFF !important;
}
.et_pb_button:hover{
  background: var(--nj-accent) !important;
  border-color: var(--nj-accent) !important;
  color:#FFFFFF !important;
  padding:13px 28px !important;
}
/* ปุ่มรอง ใส่คลาส nj-btn-ghost ในแท็บ Advanced ของโมดูลปุ่ม */
.et_pb_button.nj-btn-ghost{
  background: transparent !important;
  border-color: var(--nj-navy) !important;
  color: var(--nj-navy) !important;
}
.et_pb_button.nj-btn-ghost:hover{
  background: var(--nj-navy) !important;
  color:#FFFFFF !important;
}

/* -------------------------------------------------------------------------
   ชิ้นส่วนที่ใช้ซ้ำทั้งเว็บ
   ------------------------------------------------------------------------- */
/* ป้ายรับรอง ใช้กับงานที่ผ่านการรังวัดแล้วเท่านั้น */
.nj-verified{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600;
  color: var(--nj-verified); background: var(--nj-verified-soft);
  padding:4px 11px; border-radius:20px;
}
/* ป้ายกำกับตัวพิมพ์เล็ก ใช้เหนือหัวข้อ */
.nj-eyebrow{
  font-family: var(--nj-mono);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--nj-muted); font-weight:500;
}
/* การ์ดมาตรฐาน */
.nj-card{
  background: var(--nj-surface);
  border:1px solid var(--nj-line);
  border-radius: var(--nj-radius);
  overflow:hidden;
}

/* -------------------------------------------------------------------------
   ฟอร์มขอใบเสนอราคา (Forminator)
   ------------------------------------------------------------------------- */
.forminator-ui input[type="text"],
.forminator-ui input[type="email"],
.forminator-ui input[type="tel"],
.forminator-ui textarea,
.forminator-ui select{
  font-family: var(--nj-body) !important;
  border-radius:8px !important;
  border-color: var(--nj-line) !important;
  color: var(--nj-ink) !important;
}
.forminator-ui .forminator-button-submit{
  background: var(--nj-navy) !important;
  border-radius: var(--nj-radius) !important;
  font-family: var(--nj-body) !important;
  font-weight:600 !important;
}
.forminator-ui .forminator-button-submit:hover{ background: var(--nj-accent) !important; }

/* -------------------------------------------------------------------------
   ท้ายเว็บ
   ------------------------------------------------------------------------- */
#main-footer{ background: var(--nj-navy); }
#footer-widgets{ padding-top:52px; }
#footer-widgets .footer-widget h4,
#main-footer .widget h4{
  font-family: var(--nj-display);
  color:#FFFFFF;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:.01em;
}
#main-footer, #main-footer p, #main-footer li, #main-footer .widget{
  color:#B9CBDC;
  font-size:14.5px;
}
#main-footer a{ color:#B9CBDC; }
#main-footer a:hover{ color:#FFFFFF; }
#footer-bottom{
  background: rgba(0,0,0,.24);
  border-top:1px solid rgba(255,255,255,.08);
}
#footer-info, #footer-info a{ color:#7F98B0; font-size:12.5px; }

/* -------------------------------------------------------------------------
   ปุ่มแชตลอย (Chaty) กับแบนเนอร์ PDPA ไม่ให้ทับกัน
   ------------------------------------------------------------------------- */
.pdpa-consent-banner, #pdpa-cookie-notice{
  font-family: var(--nj-body) !important;
  font-size:13.5px !important;
}

/* -------------------------------------------------------------------------
   ปรับระยะบนจอเล็ก
   ------------------------------------------------------------------------- */
@media (max-width: 980px){
  body{ font-size:15.5px; }
  h1{ font-size:28px; }
  h2{ font-size:23px; }
  .et_pb_button{ padding:12px 24px !important; }
  .et_pb_button:hover{ padding:12px 24px !important; }
}