/*
Theme Name: HFA Company Profile
Theme URI: https://hfa.co.th
Author: Honda Foundry (Asian) Co., Ltd.
Description: Block theme สำหรับเว็บไซต์ Company Profile ของ HFA ออกแบบให้แก้ไข Page, Post, Menu, รูปภาพ และโครงสร้างผ่าน Site Editor ได้
Version: 1.0.2
Requires at least: 7.0
Requires PHP: 8.2
Text Domain: hfa-company-profile
*/

:root {
  --hfa-ink: #0d1712;
  --hfa-paper: #f5f7f3;
  --hfa-green: #239500;
  --hfa-lime: #70d442;
  --hfa-muted: #667168;
  --hfa-line: #dce3dd;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { text-underline-offset: .16em; }
.wp-site-blocks { overflow: hidden; }

.hfa-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 92px;
  padding: 14px clamp(24px, 5vw, 84px);
  border-bottom: 1px solid rgba(13, 23, 18, .08);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(18px);
}
.hfa-brand { display: flex; align-items: center; gap: 16px; color: var(--hfa-ink); text-decoration: none; }
.hfa-brand img { width: 126px; height: auto; }
.hfa-brand-copy { display: flex; flex-direction: column; font-size: 15px; font-weight: 750; line-height: 1.3; }
.hfa-brand-copy small { color: var(--hfa-muted); font-size: 12px; font-weight: 500; }
.hfa-header .wp-block-navigation { font-size: 15px; font-weight: 650; }
.hfa-header .wp-block-navigation-item__content:hover { color: var(--hfa-green); }

.hfa-hero { min-height: clamp(690px, calc(100vh - 92px), 880px); align-items: flex-end; }
.hfa-hero .wp-block-cover__background { background: linear-gradient(90deg, rgba(4,18,10,.94) 0%, rgba(4,18,10,.68) 42%, rgba(4,18,10,.10) 78%), linear-gradient(0deg, rgba(4,18,10,.55), transparent 55%) !important; opacity: 1 !important; }
.hfa-hero .wp-block-cover__inner-container { width: 100%; }
.hfa-hero-content { width: min(900px, 94vw); margin: 0; padding: clamp(70px, 10vh, 132px) clamp(24px, 6vw, 104px); }
.hfa-eyebrow { margin: 0 0 18px; color: rgba(255,255,255,.78); font-size: 13px; font-weight: 800; letter-spacing: .22em; }
.hfa-hero-title { max-width: 880px; margin: 0; font-size: clamp(48px, 7vw, 96px) !important; font-weight: 760; line-height: .98 !important; letter-spacing: -.055em; }
.hfa-hero-copy { max-width: 700px; margin-top: 30px; color: rgba(255,255,255,.9); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.75; }
.hfa-hero .wp-block-buttons { margin-top: 34px; }
.hfa-button-primary .wp-block-button__link { color: #08230c; background: var(--hfa-lime); }
.hfa-button-outline .wp-block-button__link { color: white; border-color: rgba(255,255,255,.55); }
.wp-block-button__link { min-height: 52px; padding: 12px 25px; font-size: 16px; font-weight: 750; }

.hfa-section { padding: clamp(84px, 10vw, 150px) clamp(24px, 6vw, 104px); }
.hfa-section--white { background: white; }
.hfa-section--dark { color: white; background: var(--hfa-ink); }
.hfa-kicker { margin: 0 0 34px; color: var(--hfa-green); font-size: 13px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.hfa-display { margin-top: 0; font-size: clamp(38px, 5vw, 72px) !important; font-weight: 740; line-height: 1.08 !important; letter-spacing: -.045em; }
.hfa-lead { color: #445047; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.8; }
.hfa-section--dark .hfa-lead { color: rgba(255,255,255,.72); }
.hfa-text-link { color: var(--hfa-green); font-weight: 780; }

.hfa-mission-grid { border-top: 1px solid rgba(255,255,255,.18); }
.hfa-mission-card { min-height: 245px; padding: 34px 28px 20px 0; border-right: 1px solid rgba(255,255,255,.18); }
.hfa-mission-card:last-child { border-right: 0; }
.hfa-mission-card h3 { margin-top: 46px; }
.hfa-mission-card p { color: rgba(255,255,255,.68); font-size: 16px; }
.hfa-icon-mark { color: var(--hfa-lime); font-size: 34px; line-height: 1; }

.hfa-media-card { overflow: hidden; background: white; border: 1px solid var(--hfa-line); }
.hfa-media-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.hfa-media-card-copy { padding: 30px 32px 36px; }
.hfa-media-card-copy h3 { margin-top: 0; font-size: 26px; }
.hfa-media-card-copy p { color: var(--hfa-muted); font-size: 17px; }

.hfa-quality { min-height: 690px; padding: 0; color: white; background: #0f1c15; }
.hfa-quality-image img { width: 100%; min-height: 580px; object-fit: cover; }
.hfa-quality-copy { padding: clamp(58px, 7vw, 110px); }
.hfa-quality-copy li { margin-bottom: 12px; }
.hfa-awards-image img { border: 1px solid var(--hfa-line); box-shadow: 0 30px 80px rgba(13,23,18,.14); }

.hfa-news-card { height: 100%; padding: 28px; background: white; border: 1px solid var(--hfa-line); }
.hfa-news-card .wp-block-post-title { font-size: 24px; line-height: 1.35; }
.hfa-news-card .wp-block-post-excerpt { color: var(--hfa-muted); font-size: 16px; }

.hfa-content-shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 80px 0 120px; }
.hfa-content-shell > :where(h1,h2,h3,p,ul,ol,blockquote) { max-width: 860px; }
.hfa-page-title { margin-bottom: 42px; font-size: clamp(42px, 6vw, 76px) !important; line-height: 1.08 !important; }
.hfa-content-shell p, .hfa-content-shell li { font-size: 18px; line-height: 1.85; }

.hfa-footer { padding: 62px clamp(24px, 6vw, 104px) 28px; color: rgba(255,255,255,.72); background: #020704; }
.hfa-footer .hfa-brand { color: white; }
.hfa-footer-rule { margin: 42px 0 24px; border-color: rgba(255,255,255,.12); }
.hfa-footer-meta { font-size: 13px; }

/* Inner company-profile pages */
.hfa-inner-hero { position: relative; color: white; overflow: hidden; }
.hfa-inner-hero .wp-block-cover__background { background: linear-gradient(90deg, rgba(4,18,10,.96), rgba(4,18,10,.7) 55%, rgba(4,18,10,.25)) !important; opacity: 1 !important; }
.hfa-inner-hero .wp-block-cover__image-background { object-position: center 56%; }
.hfa-inner-hero-content { width: 100%; padding: clamp(90px, 10vw, 150px) clamp(24px, 6vw, 104px); }
.hfa-inner-title { max-width: 920px; margin: 0; font-size: clamp(52px, 7vw, 92px) !important; font-weight: 760; line-height: 1 !important; letter-spacing: -.055em; }
.hfa-inner-lead { max-width: 720px; color: rgba(255,255,255,.82); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.75; }
.hfa-inner-hero--solid, .hfa-inner-hero--contact { padding: clamp(86px, 9vw, 138px) clamp(24px, 6vw, 104px); background: radial-gradient(circle at 82% 25%, #244c32 0, #102419 33%, #07110b 72%); }
.hfa-inner-hero--solid .hfa-inner-visual img { aspect-ratio: 16/10; object-fit: cover; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 30px 80px rgba(0,0,0,.32); }
.hfa-inner-hero--contact { min-height: 470px; display: flex; align-items: end; }
.hfa-inner-hero--quality .wp-block-cover__image-background { object-position: center; }

.hfa-page-canvas { margin: 0; }
.hfa-page-section { padding: clamp(76px, 9vw, 132px) clamp(24px, 6vw, 104px); }
.hfa-page-section--white { background: white; }
.hfa-page-section--paper { background: var(--hfa-paper); }
.hfa-page-section--dark { color: white; background: var(--hfa-ink); }
.hfa-page-section--dark .hfa-lead { color: rgba(255,255,255,.72); }
.hfa-page-section--dark .hfa-kicker { color: var(--hfa-lime); }
.hfa-display--compact { font-size: clamp(36px, 4.5vw, 64px) !important; }
.hfa-card-label { margin: 0 0 18px; color: var(--hfa-green); font-size: 12px; font-weight: 850; letter-spacing: .16em; }

.hfa-info-grid, .hfa-cert-grid { gap: 18px; margin-top: 34px; }
.hfa-info-card, .hfa-cert-card { height: 100%; min-height: 220px; padding: 30px; background: white; border: 1px solid var(--hfa-line); }
.hfa-info-card h3, .hfa-cert-card h3 { margin: 28px 0 10px; font-size: 25px; line-height: 1.35; }
.hfa-info-card p:last-child, .hfa-cert-card p:last-child { color: var(--hfa-muted); }
.hfa-value-grid { gap: 0; margin-top: 48px; border-top: 1px solid var(--hfa-line); }
.hfa-value-grid > .wp-block-column { min-height: 190px; padding: 30px 28px 10px 0; border-right: 1px solid var(--hfa-line); }
.hfa-value-grid > .wp-block-column + .wp-block-column { padding-left: 28px; }
.hfa-value-grid > .wp-block-column:last-child { border-right: 0; }
.hfa-value-grid h3 { color: var(--hfa-green); font-size: 20px; }
.hfa-value-grid p { color: var(--hfa-muted); }

.hfa-product-grid { gap: 22px; }
.hfa-process-grid { gap: 0; margin-top: 50px; border-top: 1px solid rgba(255,255,255,.18); }
.hfa-process-step { min-height: 230px; padding: 30px 26px 20px 0; border-right: 1px solid rgba(255,255,255,.18); }
.hfa-process-step + .hfa-process-step { padding-left: 26px; }
.hfa-process-step:last-child { border-right: 0; }
.hfa-process-step .hfa-card-label { color: var(--hfa-lime); }
.hfa-process-step h3 { margin: 42px 0 8px; font-size: 21px; }
.hfa-process-step p:last-child { color: rgba(255,255,255,.65); font-size: 16px; }
.hfa-feature-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hfa-line); }
.hfa-feature-list li { padding: 15px 0; border-bottom: 1px solid var(--hfa-line); font-size: 18px; }
.hfa-feature-list li::before { content: "✓"; margin-right: 12px; color: var(--hfa-green); font-weight: 850; }

.hfa-quality-feature { padding: 0; color: white; background: #0f1c15; }
.hfa-quality-feature > .wp-block-columns { gap: 0; margin: 0; }
.hfa-quality-feature-image img { width: 100%; min-height: 620px; object-fit: cover; }
.hfa-quality-feature-copy { padding: clamp(58px, 7vw, 104px); }
.hfa-quality-feature-copy .hfa-feature-list { border-color: rgba(255,255,255,.2); }
.hfa-quality-feature-copy .hfa-feature-list li { border-color: rgba(255,255,255,.16); }
.hfa-quality-feature-copy .hfa-feature-list li::before { color: var(--hfa-lime); }

.hfa-contact-card { padding: clamp(34px, 5vw, 58px); color: white; background: var(--hfa-ink); }
.hfa-contact-card h3 { margin: 26px 0; font-size: clamp(25px, 2.5vw, 34px); line-height: 1.55; }
.hfa-contact-card .wp-block-separator { margin: 32px 0; border-color: rgba(255,255,255,.2); }
.hfa-contact-card p:last-child { color: rgba(255,255,255,.68); }
.hfa-contact-options { gap: 18px; }
.hfa-contact-options > .wp-block-column { min-height: 220px; padding: 30px; background: white; border: 1px solid var(--hfa-line); }
.hfa-contact-options h3 { margin: 24px 0 10px; }
.hfa-contact-options p:last-child { color: var(--hfa-muted); }

.hfa-news-hero { padding: clamp(82px, 9vw, 132px) clamp(24px, 6vw, 104px); color: white; background: radial-gradient(circle at 85% 10%, #2d633e 0, #102419 36%, #07110b 75%); }
.hfa-news-shell { padding: clamp(72px, 8vw, 116px) clamp(24px, 6vw, 104px); background: var(--hfa-paper); }
.hfa-news-shell .hfa-news-card { transition: transform .2s ease, box-shadow .2s ease; }
.hfa-news-shell .hfa-news-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(13,23,18,.12); }

@media (max-width: 900px) {
  .hfa-header { min-height: 78px; }
  .hfa-brand-copy { display: none; }
  .hfa-mission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hfa-mission-card:nth-child(2) { border-right: 0; }
  .hfa-quality > .wp-block-columns { display: block; }
  .hfa-quality-image img { min-height: 420px; }
  .hfa-inner-hero--solid > .wp-block-columns { flex-direction: column; }
  .hfa-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hfa-process-step:nth-child(2) { border-right: 0; }
  .hfa-quality-feature > .wp-block-columns { display: block; }
  .hfa-quality-feature-image img { min-height: 420px; }
}

@media (max-width: 620px) {
  body { font-size: 17px; }
  .hfa-brand img { width: 110px; }
  .hfa-hero { min-height: 700px; }
  .hfa-hero .wp-block-cover__background { background: linear-gradient(0deg, rgba(4,18,10,.95) 0%, rgba(4,18,10,.65) 65%, rgba(4,18,10,.14) 100%) !important; }
  .hfa-mission-grid { grid-template-columns: 1fr !important; }
  .hfa-mission-card { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .hfa-quality-copy { padding: 58px 24px 72px; }
  .hfa-inner-title { font-size: clamp(44px, 14vw, 64px) !important; }
  .hfa-inner-hero-content { padding: 72px 24px; }
  .hfa-process-grid { grid-template-columns: 1fr !important; }
  .hfa-process-step, .hfa-process-step + .hfa-process-step { min-height: 0; padding: 28px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .hfa-value-grid > .wp-block-column, .hfa-value-grid > .wp-block-column + .wp-block-column { min-height: 0; padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--hfa-line); }
}