/*
Theme Name: Technic Navy
Theme URI: https://technic-enterprise.com
Author: Technic Enterprise & Technology
Description: ธีมน้ำหนักเบาสำหรับ technic-enterprise.com ดีไซน์ตาม TE Company Profile (navy + big type) เนื้อหาแต่ละหน้าวางผ่าน Custom HTML block
Version: 1.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: technic-navy
*/

/* ── Design tokens ── */
:root{
  --navy:#0B3C6E; --dark:#1B2A3D; --ink:#152232; --gray:#5F7086;
  --silver:#9FB2C4; --sky:#E9F0F7; --paper:#F5F8FB; --line:#D4DEE8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  font-family:'IBM Plex Sans Thai','Noto Sans Thai','Sukhumvit Set',Arial,sans-serif;
  background:var(--paper); color:var(--ink); font-size:16px; line-height:1.75;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--navy); text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--navy); outline-offset:3px}
.wrap{max-width:1100px; margin:0 auto; padding:0 26px}

/* ── แถบเมนูบน (header.php) ── */
header.site{background:var(--dark); position:sticky; top:0; z-index:50}
.nav{position:relative}
.nav{display:flex; align-items:center; gap:20px; min-height:64px; flex-wrap:wrap; padding:8px 0}
.brand{font-weight:700; font-size:15px; color:#fff; letter-spacing:.14em; line-height:1.2}
.brand small{display:block; font-weight:400; font-size:10px; color:var(--silver); letter-spacing:.18em}
nav.menu{margin-left:auto}
nav.menu ul{display:flex; gap:2px; flex-wrap:nowrap; list-style:none; font-size:13.5px; margin:0; padding:0}
nav.menu a{color:#D9E4EF; padding:5px 9px; border-radius:3px; display:inline-block; white-space:nowrap}
nav.menu a:hover{color:#fff}
nav.menu .current-menu-item > a,
nav.menu .current_page_item > a{background:var(--navy); color:#fff}

/* ปุ่มแฮมเบอร์เกอร์ — โชว์เฉพาะจอแคบ */
.menu-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:42px; height:38px; padding:0 9px; border:1px solid #3A4C61; border-radius:3px; background:none; cursor:pointer}
.menu-toggle span{display:block; height:2px; background:#fff; border-radius:2px; transition:transform .2s ease, opacity .2s ease}
body.nav-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .menu-toggle span:nth-child(2){opacity:0}
body.nav-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* จอแคบกว่า 1100px: ยุบเมนูเป็น dropdown ใต้แถบบน */
@media(max-width:1099px){
  .menu-toggle{display:flex}
  .lang{margin-left:auto}
  nav.menu{position:absolute; top:100%; left:0; right:0; margin-left:0; background:var(--dark); border-top:1px solid #33465C; display:none; box-shadow:0 18px 30px rgba(3,10,22,.4); max-height:calc(100vh - 64px); overflow:auto}
  body.nav-open nav.menu{display:block}
  nav.menu ul{flex-direction:column; gap:0; font-size:15px; padding:6px 0 10px}
  nav.menu a{display:block; padding:13px 26px; border-radius:0; border-bottom:1px solid rgba(255,255,255,.06); white-space:normal}
  nav.menu li:last-child a{border-bottom:none}
  nav.menu .current-menu-item > a,
  nav.menu .current_page_item > a{background:var(--navy)}
  /* เมนูย่อยบนจอแคบ: แสดงเป็นรายการย่อหน้าเข้าไป */
  nav.menu ul ul{display:block; position:static; background:transparent; border:none; box-shadow:none; padding:0}
  nav.menu ul ul a{padding-left:44px; font-size:14px; color:#B9C8D8}
}

/* ── เมนูย่อย (dropdown) บนเดสก์ท็อป ── */
nav.menu li{position:relative}
nav.menu ul ul{display:none; position:absolute; top:100%; left:0; z-index:60; background:var(--dark); border:1px solid #33465C; border-radius:0 0 3px 3px; min-width:230px; padding:6px 0; box-shadow:0 16px 30px rgba(3,10,22,.4)}
nav.menu li:hover > ul, nav.menu li:focus-within > ul{display:block}
nav.menu ul ul li{width:100%}
nav.menu ul ul a{display:block; padding:9px 16px; border-radius:0; white-space:nowrap}
/* หัวข้อที่มีเมนูย่อย ใส่ลูกศรเล็กๆ */
nav.menu li.menu-item-has-children > a::after{content:" ▾"; font-size:10px; opacity:.7}

/* ── สวิตช์ภาษา TH | EN (วาดเองในธีม) ── */
.lang{border:1px solid #3A4C61; border-radius:3px; overflow:hidden; display:flex; font-size:13px}
.lang a{padding:4px 12px; color:var(--silver); line-height:1.6}
.lang a:hover{color:#fff}
.lang a.on{background:#fff; color:var(--dark); font-weight:600}
.lang a.on:hover{color:var(--dark)}
.lang{font-size:13px; color:var(--silver)}
.lang .wpml-ls-legacy-list-horizontal{border:1px solid #3A4C61; border-radius:3px; padding:0}
.lang .wpml-ls-legacy-list-horizontal a{padding:3px 10px; color:var(--silver); background:transparent}
.lang .wpml-ls-current-language a{background:#fff !important; color:var(--dark) !important; font-weight:600}

/* ── ตัวหนังสือโชว์ / หัวเรื่อง ── */
.display{font-size:clamp(38px,6.5vw,68px); line-height:1.12; font-weight:700; letter-spacing:-0.015em}
.display span{display:block}
.display-mid{font-size:clamp(30px,4.6vw,48px); line-height:1.18; font-weight:700; letter-spacing:-0.01em}
.kicker{font-size:12px; font-weight:600; letter-spacing:.28em; color:var(--silver); display:block}
.kicker.on-light{color:var(--navy)}
h2{font-size:23px; font-weight:700; margin-bottom:10px}
h3{font-size:17px; font-weight:600}
p.body{color:var(--gray); font-size:15px; max-width:70ch}
p.body + p.body{margin-top:12px}
p.body strong{color:var(--ink); font-weight:600}
.note{margin-top:16px; font-size:13.5px; color:var(--gray); border-left:2px solid var(--silver); padding-left:12px; max-width:70ch}

/* ── Hero หน้าแรก ── */
.hero{background:var(--dark); color:#fff; padding:74px 0 0; position:relative; overflow:hidden}
.hero .wrap{position:relative; z-index:1}
.hero .display{color:#fff}
.hero-photo{position:absolute; inset:0; background-size:cover; background-position:center;
  /* ใส่รูปปกด้วย style="background-image:url(...)" บน div นี้ในก้อน HTML — เฉดน้ำเงินด้านล่างจะทับให้อัตโนมัติ */
}
.hero-photo::after{content:""; position:absolute; inset:0; background:
  linear-gradient(100deg, rgba(27,42,61,.97) 0%, rgba(27,42,61,.9) 44%, rgba(27,42,61,.62) 72%, rgba(11,60,110,.45) 100%)}
.hero-cap{margin-top:22px; font-size:12px; letter-spacing:.22em; color:var(--silver)}
.hero h1,.hero .te-h1{margin-top:26px; font-size:clamp(17px,2.2vw,21px); font-weight:600; color:#DCE7F2; line-height:1.6}
.answer{margin-top:14px; color:#B9C8D8; font-size:15.5px; max-width:66ch}
.answer strong{color:#fff; font-weight:600}
.cta-row{margin:30px 0 0; display:flex; gap:14px; flex-wrap:wrap}
.btn{display:inline-block; background:#fff; color:var(--dark); padding:13px 24px; border-radius:3px; font-weight:600; font-size:15px; border:none; cursor:pointer}
.btn:hover{background:var(--sky); color:var(--dark)}
.btn-line{display:inline-block; border:1px solid #4A5D73; color:#fff; padding:12px 22px; border-radius:3px; font-size:15px}
.btn-line:hover{border-color:#fff; color:#fff}
.btn-navy{display:inline-block; background:var(--navy); color:#fff; padding:13px 24px; border-radius:3px; font-weight:600; font-size:15px}
.btn-navy:hover{background:#0A3159; color:#fff}
.hero-foot{margin-top:64px; border-top:1px solid #33465C; padding:16px 0; font-size:12.5px; color:var(--silver); letter-spacing:.08em; display:flex; gap:26px; flex-wrap:wrap}

/* ── แถบตัวเลข Technic at a Glance ── */
.glance{background:#fff; padding:64px 0}
.glance h2{margin-top:10px}
.glance-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:34px; margin-top:36px}
.glance-grid b{display:block; font-size:clamp(34px,4.5vw,54px); font-weight:700; color:var(--navy); line-height:1.1; letter-spacing:-0.01em}
.glance-grid span{display:block; margin-top:8px; font-size:14px; color:var(--gray); line-height:1.55}

/* ── โครงหน้า / หัวหน้าใน ── */
section.blk,.blk{padding:60px 0}
.blk.on-white{background:#fff}
.pagehead{background:var(--dark); color:#fff; padding:58px 0 46px}
.pagehead .kicker{margin-bottom:14px}
.pagehead .display-mid{color:#fff}
.pagehead h1{margin-top:14px; font-size:clamp(16px,2vw,19px); font-weight:600; color:#DCE7F2}
.pagehead p.lede{color:#B9C8D8; font-size:15px; max-width:66ch; margin-top:8px}

/* ── การ์ดชุดต่างๆ ── */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:26px}
.cards3 article{background:#fff; border-top:3px solid var(--navy); box-shadow:0 1px 0 var(--line); padding:26px 24px}
.cards3 article h3{margin-bottom:8px}
.cards3 article p{font-size:14.5px; color:var(--gray)}
.cards3 .fig{font-size:24px; font-weight:700; color:var(--navy); line-height:1.2; margin-bottom:10px}
.spec{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:26px}
.spec article{background:#fff; border:1px solid var(--line); border-left:3px solid var(--navy); padding:24px 26px}
.spec h3{margin-bottom:6px}
.spec p{font-size:14.5px; color:var(--gray)}

/* ── แถบพื้นเข้มตัวหนังสือใหญ่ ── */
.band{background:var(--dark); color:#fff; padding:72px 0}
.band.navy{background:var(--navy)}
.band .display-mid{color:#fff}
.band p.lead{margin-top:18px; color:#C4D2E0; font-size:16px; max-width:62ch}
.band p.lead strong{color:#fff}
.band .kicker{margin-bottom:16px}
.mats,.te-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.mats span,.te-chips span{border:1px solid #46617F; border-radius:3px; padding:8px 16px; font-size:14px; color:#E4EDF5}
.pending{color:var(--navy); font-weight:500}
.band .pending{color:#9FC0E4}

/* ── ตาราง ── */
.tbl-scroll{overflow-x:auto; background:#fff; border:1px solid var(--line); margin-top:16px}
.tbl-scroll table{border-collapse:collapse; width:100%; min-width:720px; font-size:14px}
.tbl-scroll table.narrow{min-width:520px}
.tbl-scroll th{text-align:left; font-weight:600; color:#fff; background:var(--navy); padding:12px 16px}
.tbl-scroll td{border-bottom:1px solid var(--line); padding:10px 16px; color:var(--gray)}
.tbl-scroll td:first-child{color:var(--ink)}
.tbl-cap{font-size:13.5px; color:var(--gray); margin-top:12px}

/* ── กล่องมาตรฐาน / FAQ / ขั้นตอน ── */
.std-box{background:#fff; border:1px solid var(--line); padding:26px 28px}
.std-box + .std-box{margin-top:18px}
.std-box p{font-size:14.5px; color:var(--gray); margin-top:6px}
.iso-badge{display:inline-flex; margin-top:14px; border:1.5px solid var(--navy); color:var(--navy); border-radius:3px; padding:8px 16px; font-weight:600; font-size:14px}
.faq-item{background:#fff; border:1px solid var(--line); padding:20px 24px}
.faq-item + .faq-item{margin-top:12px}
.faq-item h2{font-size:16.5px; margin-bottom:6px}
.faq-item p{font-size:14.5px; color:var(--gray)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:step; margin-top:16px}
.steps article{background:#fff; border:1px solid var(--line); padding:26px 24px 22px; counter-increment:step; position:relative; margin-top:14px}
.steps article::before{content:counter(step); position:absolute; top:-16px; left:22px; background:var(--navy); color:#fff; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px}
.steps h3{font-size:15.5px; margin:8px 0 6px}
.steps p{font-size:14px; color:var(--gray)}
.timeline{border-left:2px solid var(--line); margin:16px 0 0 8px; padding-left:26px}
.timeline > div{position:relative; padding-bottom:22px}
.timeline > div::before{content:""; position:absolute; left:-32px; top:8px; width:10px; height:10px; border-radius:50%; background:var(--navy)}
.timeline b{display:block; font-size:15px; color:var(--ink)}
.timeline span{font-size:14px; color:var(--gray)}

/* ── รูปภาพ ── */
figure.ph{position:relative; aspect-ratio:4/3; border-radius:2px; overflow:hidden; margin:0; transition:transform .25s ease, box-shadow .25s ease; background:linear-gradient(135deg,#24364E,#0B3C6E)}
figure.ph:hover{transform:translateY(-5px); box-shadow:0 16px 34px rgba(11,24,40,.28)}
figure.ph::after{content:""; position:absolute; top:9px; right:9px; width:14px; height:14px; border-top:1px solid #9FC0E4; border-right:1px solid #9FC0E4; opacity:.75; pointer-events:none}
figure.ph img{width:100%; height:100%; object-fit:cover}
figure.ph.wide{aspect-ratio:21/8}
.ph-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px}
.photo-forty{position:relative; margin-top:64px}
.photo-forty figure.ph{aspect-ratio:16/6.5}
.photo-forty .num{position:absolute; right:26px; top:-52px; z-index:1; font-size:clamp(96px,14vw,170px); font-weight:700; line-height:1; letter-spacing:-0.03em; color:#fff; text-shadow:0 6px 30px rgba(11,24,40,.45); user-select:none}
.photo-forty .num small{display:block; font-size:12px; font-weight:600; letter-spacing:.3em; color:#DCE7F2; text-align:right; margin-top:6px}

/* ── CTA / ติดต่อ ── */
.quote-cta{margin-top:44px; background:var(--dark); color:#fff; padding:40px 44px; display:flex; gap:28px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.quote-cta h3{font-size:clamp(20px,2.6vw,26px); font-weight:700; margin-bottom:6px}
.quote-cta p{color:#B9C8D8; font-size:14.5px; max-width:52ch}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px}
.map-wrap{border:1px solid var(--line); margin-top:16px}
.map-wrap iframe{display:block; width:100%; height:240px; border:0}

/* ── Footer (footer.php) ── */
footer.site-footer{background:var(--dark); color:var(--silver); padding:40px 0; font-size:14px; margin-top:0}
footer.site-footer .wrap{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:32px}
footer.site-footer b{color:#fff; display:block; margin-bottom:8px; font-weight:600}
footer.site-footer a{color:#DCE7F2}
footer.site-footer .iso{margin-top:14px; border:1px solid #3A4C61; display:inline-block; padding:6px 12px; border-radius:3px; color:#DCE7F2; font-size:13px}

/* ── Responsive ── */
@media(max-width:880px){
  .glance-grid{grid-template-columns:repeat(2,1fr); gap:26px}
  .cards3,.spec,.steps,.contact-grid,.ph-grid{grid-template-columns:1fr}
  .steps{gap:28px}
  footer.site-footer .wrap{grid-template-columns:1fr}
  .photo-forty .num{top:-40px; right:16px}
}

/* ═══ Gutenberg block compatibility — ให้ block ปกติได้หน้าตาตามดีไซน์ ═══ */
.num-xl{font-size:clamp(34px,4.5vw,54px) !important; font-weight:700; color:var(--navy); line-height:1.1; letter-spacing:-0.01em; margin:0}
.num-cap{font-size:14px; color:var(--gray); line-height:1.55; margin-top:8px}

/* Cover ของ hero: ตัวหนังสือชิดซ้าย เฉดทับกำหนดใน block ได้เอง */
.wp-block-cover.hero-cover{padding:74px 26px 0; align-items:flex-start; text-align:left}
.hero-cover .wp-block-cover__inner-container{max-width:1048px; margin:0 auto; width:100%}
.hero-cover .display,.hero-cover .display-mid{color:#fff}
.hero-cover .hero-cap{color:var(--silver)}
.hero-cover h1{margin-top:26px; font-size:clamp(17px,2.2vw,21px); font-weight:600; color:#DCE7F2; line-height:1.6}
.hero-cover .answer{color:#B9C8D8}
.hero-cover .answer strong{color:#fff}
.hero-cover .hero-foot{border-top:1px solid rgba(255,255,255,.18)}

/* ปุ่มแบบ block ในพื้นเข้ม/พื้นสว่าง */
.wp-block-buttons{margin-top:30px}
.wp-block-button__link{border-radius:3px; font-weight:600; font-size:15px; padding:13px 24px}
.hero-cover .wp-block-button__link,.band .wp-block-button__link,.quote-cta .wp-block-button__link{background:#fff; color:var(--dark)}
.hero-cover .is-style-outline .wp-block-button__link{background:transparent; border:1px solid #4A5D73; color:#fff}
.blk .wp-block-button__link,.glance .wp-block-button__link{background:var(--navy); color:#fff}

/* Columns ของแถบตัวเลข/การ์ด ให้ระยะเท่าดีไซน์ */
.glance .wp-block-columns,.cards-cols{gap:34px; margin-top:36px}
.card-navy{background:#fff; border-top:3px solid var(--navy); box-shadow:0 1px 0 var(--line); padding:26px 24px}
.card-navy h3{margin-bottom:8px}
.card-navy p{font-size:14.5px; color:var(--gray); margin:0}
.card-navy .fig{font-size:24px; font-weight:700; color:var(--navy); line-height:1.2; margin:0 0 10px}
.card-left{background:#fff; border:1px solid var(--line); border-left:3px solid var(--navy); padding:24px 26px}
.card-left h3{margin-bottom:6px}
.card-left p{font-size:14.5px; color:var(--gray); margin:0}

/* รูปภาพแบบ block */
.wp-block-image.ph{aspect-ratio:4/3; margin:0}
.wp-block-image.ph img{width:100%; height:100%; object-fit:cover}
.wp-block-image.ph.wide{aspect-ratio:21/8}

/* กันย่อหน้าใน pattern มีระยะห่างแปลก */
.hero-cover p{margin-bottom:0}