/*
Theme Name: ThaiBoxFactory Industrial
Theme URI: https://example.com/thaiboxfactory-industrial
Author: PAWARIS SEO
Author URI: https://pseo.expert/
Description: Responsive industrial WordPress theme converted from the supplied ThaiBoxFactory HTML layouts. Includes connected Home, About, Blog and Contact pages, shared navigation, mobile menu, WordPress blog support, widgets, Classic Editor compatibility and Elementor-friendly templates.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thaiboxfactory
Tags: custom-menu, custom-logo, featured-images, blog, full-width-template, one-column, two-columns
*/

:root {
  --tbf-primary: #00003c;
  --tbf-blue: #000080;
  --tbf-accent: #ffd700;
  --tbf-ink: #191c1d;
  --tbf-surface: #f8f9fa;
  --tbf-black: #050505;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--tbf-surface); color: var(--tbf-ink); }
img { max-width: 100%; height: auto; }
a { text-decoration: none; }

/* Fix classes referenced by the supplied HTML but not present in its Tailwind palette. */
.text-surface-lowest { color: #fff !important; }
.text-surface-dim { color: #d9dadb !important; }
.bg-surface-lowest { background-color: #fff !important; }

.tbf-site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 999;
  height: 80px;
  background: rgba(248,249,250,.94);
  border-bottom: 1px solid rgba(74,74,74,.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.tbf-header-inner {
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.tbf-brand { font-family: Montserrat, sans-serif; font-size: 24px; font-weight: 800; color: var(--tbf-primary); white-space: nowrap; }
.tbf-brand img { max-height: 48px; width: auto; }
.tbf-main-nav { margin-left: auto; }
.tbf-main-nav ul { list-style: none; display: flex; align-items: center; gap: 32px; margin: 0; padding: 0; }
.tbf-main-nav a { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #5f5e5e; padding-bottom: 5px; transition: .2s ease; }
.tbf-main-nav a:hover, .tbf-main-nav .current-menu-item > a, .tbf-main-nav .current_page_item > a { color: var(--tbf-primary); border-bottom: 2px solid var(--tbf-primary); }
.tbf-quote-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--tbf-primary); color: #fff; min-height: 44px; padding: 0 24px; font: 600 12px/1 Montserrat, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.tbf-quote-btn:hover { background: var(--tbf-blue); color: #fff; }
.tbf-menu-toggle { display: none; background: transparent; border: 0; color: var(--tbf-primary); padding: 8px; cursor: pointer; }
.tbf-mobile-nav { display: none; position: fixed; top: 80px; left: 0; right: 0; z-index: 998; background: #fff; border-bottom: 1px solid #c6c5d5; box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.tbf-mobile-nav.is-open { display: block; }
.tbf-mobile-nav ul { list-style: none; margin: 0; padding: 16px; }
.tbf-mobile-nav li + li { border-top: 1px solid #e7e8e9; }
.tbf-mobile-nav a { display: block; padding: 14px 8px; color: var(--tbf-primary); font: 600 14px/1.4 Montserrat, sans-serif; }
.admin-bar .tbf-site-header { top: 32px; }
.admin-bar .tbf-mobile-nav { top: 112px; }

/* Supplied-layout refinements */
.technical-bg { background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.05) 1px, transparent 0); background-size: 32px 32px; }
.technical-grid { background-image: radial-gradient(circle, #767684 .5px, transparent .5px); background-size: 32px 32px; }
.luxury-border { border-top: 3px solid var(--tbf-primary); }
.hairline { border: 1px solid rgba(74,74,74,.2); }
.animate-fade-in { animation: tbfFadeIn .7s ease both; }
@keyframes tbfFadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity:1; transform:none; } }

/* WordPress/editor content */
.tbf-content-wrap { max-width: 1120px; margin: 0 auto; padding: 144px 32px 80px; }
.tbf-content-wrap h1, .tbf-content-wrap h2, .tbf-content-wrap h3 { font-family: Montserrat, sans-serif; color: var(--tbf-primary); }
.tbf-content-wrap h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.08; }
.tbf-content-wrap p, .tbf-content-wrap li { font-family: Inter, sans-serif; font-size: 17px; line-height: 1.8; color: #5f5e5e; }
.tbf-content-wrap a { color: var(--tbf-blue); text-decoration: underline; }
.tbf-content-wrap .alignwide { margin-left: -6vw; margin-right: -6vw; max-width: none; }
.tbf-content-wrap .alignfull { width: 100vw; margin-left: calc(50% - 50vw); max-width: 100vw; }
.tbf-post-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

/* Form status */
.tbf-alert { padding: 14px 18px; margin-bottom: 24px; border: 1px solid #b8d8bd; background: #edf8ef; color: #185b2a; }
.tbf-alert-error { border-color: #f2b7b7; background: #fff1f1; color: #8c1d1d; }

/* Footer */
.tbf-footer { background: #050505; color: #fff; padding: 72px 64px; }
.tbf-footer-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; }
.tbf-footer h3 { font-family: Montserrat, sans-serif; margin: 0 0 18px; font-size: 22px; }
.tbf-footer h4 { font: 600 12px/1.4 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .08em; color: #aaa; margin: 0 0 16px; }
.tbf-footer p, .tbf-footer a { color: #bfc0c3; font: 400 14px/1.7 Inter, sans-serif; }
.tbf-footer ul { list-style: none; margin: 0; padding: 0; }
.tbf-footer li { margin: 0 0 10px; }

/* Elementor / full-width compatibility */
.tbf-full-width { width: 100%; }
.elementor-page .tbf-content-wrap { max-width: none; padding: 80px 0 0; }
.elementor-page .tbf-content-wrap > article { margin: 0; }

@media (max-width: 1023px) {
  .tbf-header-inner { padding: 0 24px; }
  .tbf-footer { padding: 56px 24px; }
  .tbf-footer-grid { grid-template-columns: 1fr 1fr; }
  .px-margin-desktop { padding-left: 24px !important; padding-right: 24px !important; }
  .right-margin-desktop { right: 24px !important; }
}

@media (max-width: 767px) {
  .tbf-site-header { height: 72px; }
  .tbf-header-inner { padding: 0 16px; gap: 10px; }
  .tbf-brand { font-size: 19px; }
  .tbf-main-nav { display: none; }
  .tbf-menu-toggle { display: inline-flex; align-items: center; justify-content: center; order: 3; }
  .tbf-mobile-nav { top: 72px; }
  .admin-bar .tbf-site-header { top: 46px; }
  .admin-bar .tbf-mobile-nav { top: 118px; }
  .tbf-quote-btn { padding: 0 14px; min-height: 40px; font-size: 10px; margin-left: auto; }
  .px-margin-desktop, .px-margin-mobile { padding-left: 16px !important; padding-right: 16px !important; }
  .right-margin-desktop { right: 16px !important; }
  main.pt-20 { padding-top: 72px !important; }
  main.pt-32 { padding-top: 104px !important; }
  .h-\[85vh\] { min-height: 720px !important; height: auto !important; padding-top: 72px; padding-bottom: 96px; }
  .h-\[70vh\] { min-height: 650px !important; height: auto !important; }
  .text-display-lg { font-size: clamp(40px, 12vw, 54px) !important; line-height: 1.07 !important; }
  .p-12 { padding: 28px !important; }
  .p-10 { padding: 24px !important; }
  .p-8 { padding: 22px !important; }
  .py-24 { padding-top: 72px !important; padding-bottom: 72px !important; }
  .py-32 { padding-top: 80px !important; padding-bottom: 80px !important; }
  .bottom-10.right-margin-desktop { bottom: 24px !important; }
  .tbf-footer { padding: 48px 20px; }
  .tbf-footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .tbf-content-wrap { padding: 116px 20px 60px; }
}

@media (max-width: 420px) {
  .tbf-quote-btn { display: none; }
  .tbf-brand { max-width: calc(100% - 56px); overflow: hidden; text-overflow: ellipsis; }
}
.tbf-brand .custom-logo-link { display: inline-flex; align-items: center; }


/* =============================================================
   Critical Tailwind-config fallbacks
   -------------------------------------------------------------
   WordPress/cache/security plugins can change script execution order.
   These utilities keep the supplied layouts correctly spaced and styled
   even before the Tailwind CDN reads the custom configuration.
   ============================================================= */
.max-w-max-width { max-width: 1440px !important; }
.px-margin-desktop { padding-left: 64px !important; padding-right: 64px !important; }
.px-margin-mobile { padding-left: 16px !important; padding-right: 16px !important; }
.right-margin-desktop { right: 64px !important; }
.gap-gutter { gap: 24px !important; }
.gap-base { gap: 8px !important; }
.space-y-gutter > :not([hidden]) ~ :not([hidden]) { margin-top: 24px !important; }

.font-label-sm { font-family: "JetBrains Mono", monospace !important; }
.font-body-lg, .font-body-md { font-family: Inter, sans-serif !important; }
.font-headline-lg, .font-headline-md, .font-display-lg, .font-button { font-family: Montserrat, sans-serif !important; }

.text-label-sm { font-size: 12px !important; line-height: 16px !important; letter-spacing: .05em; font-weight: 500; }
.text-body-md { font-size: 16px !important; line-height: 24px !important; font-weight: 400; }
.text-body-lg { font-size: 18px !important; line-height: 28px !important; font-weight: 400; }
.text-headline-md { font-size: 24px !important; line-height: 32px !important; font-weight: 600; }
.text-headline-lg { font-size: 32px !important; line-height: 40px !important; letter-spacing: -.01em; font-weight: 600; }
.text-display-lg { font-size: 64px !important; line-height: 72px !important; letter-spacing: -.02em; font-weight: 700; }
.text-button { font-size: 14px !important; line-height: 20px !important; letter-spacing: .03em; font-weight: 600; }

.text-primary { color: #00003c !important; }
.text-secondary { color: #5f5e5e !important; }
.text-machined-steel { color: #4a4a4a !important; }
.text-outline { color: #767684 !important; }
.text-outline-variant { color: #c6c5d5 !important; }
.text-safety-accent { color: #ffd700 !important; }
.text-on-primary { color: #fff !important; }
.text-on-primary-container { color: #777eea !important; }
.text-primary\/10 { color: rgba(0,0,60,.10) !important; }
.text-machined-steel\/40 { color: rgba(74,74,74,.40) !important; }
.text-machined-steel\/50 { color: rgba(74,74,74,.50) !important; }

.bg-primary { background-color: #00003c !important; }
.bg-factory-blue { background-color: #000080 !important; }
.bg-safety-accent { background-color: #ffd700 !important; }
.bg-surface { background-color: #f8f9fa !important; }
.bg-surface\/90 { background-color: rgba(248,249,250,.94) !important; }
.bg-surface-container { background-color: #edeeef !important; }
.bg-surface-container-low { background-color: #f3f4f5 !important; }
.bg-surface-container-lowest { background-color: #fff !important; }
.bg-surface-dim { background-color: #d9dadb !important; }
.bg-deep-obsidian { background-color: #050505 !important; }
.bg-primary\/5 { background-color: rgba(0,0,60,.05) !important; }

.border-primary { border-color: #00003c !important; }
.border-factory-blue { border-color: #000080 !important; }
.border-machined-steel { border-color: #4a4a4a !important; }
.border-machined-steel\/10 { border-color: rgba(74,74,74,.10) !important; }
.border-machined-steel\/20 { border-color: rgba(74,74,74,.20) !important; }
.border-outline-variant { border-color: #c6c5d5 !important; }
.border-on-primary-container { border-color: #777eea !important; }
.border-on-primary\/20 { border-color: rgba(255,255,255,.20) !important; }

/* Hero readability: stable light panel over photography and strong typography. */
.home main > section:first-child .bg-surface\/90 {
  background: rgba(248,249,250,.94) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.14);
}
.home main > section:first-child h1 {
  color: #00003c !important;
  font-family: Montserrat, sans-serif !important;
  font-size: clamp(44px, 4.2vw, 64px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
  font-weight: 700 !important;
}
.home main > section:first-child p { color: #474746 !important; }
.home main > section:first-child .font-label-sm { color: #00003c !important; }

/* Keep all major page sections away from viewport edges. */
main.max-w-max-width,
section.px-margin-desktop,
section > .max-w-max-width.px-margin-desktop,
main > .px-margin-desktop {
  box-sizing: border-box;
}

@media (max-width: 1023px) {
  .px-margin-desktop { padding-left: 32px !important; padding-right: 32px !important; }
  .right-margin-desktop { right: 32px !important; }
}

@media (max-width: 767px) {
  .px-margin-desktop, .px-margin-mobile { padding-left: 20px !important; padding-right: 20px !important; }
  .right-margin-desktop { right: 20px !important; }
  .text-display-lg { font-size: clamp(40px, 11vw, 54px) !important; line-height: 1.08 !important; }
  .home main > section:first-child h1 { font-size: clamp(40px, 11vw, 54px) !important; }
}