/*
Theme Name: Falcon-Asia
Theme URI: https://falcon-asia.com
Author: Falcon-Asia
Description: Custom theme for Falcon-Asia — AV systems for meeting rooms and installations across Asia. Bilingual TH/EN catalog site built from the Falcon-Asia Claude Design handoff.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: falcon-asia
*/

/* ====================== Design tokens ====================== */
:root{
  --n-0:#FFFFFF;--n-25:#FAF8F7;--n-50:#F4F1F0;--n-100:#E8E3E2;--n-200:#D5CECD;--n-300:#B5ACAC;
  --n-400:#8E8486;--n-500:#6B6165;--n-600:#4E464A;--n-700:#383135;--n-800:#241F24;--n-900:#17141A;--n-950:#0D0B10;

  --ox-50:#FBEFF1;--ox-100:#F4D9DE;--ox-200:#E4AFB9;--ox-300:#C87C8C;--ox-400:#A63D4E;
  --ox-500:#8A2A3B;--ox-600:#6E2233;--ox-700:#551A28;--ox-800:#3C121C;

  --brass-50:#FBF4E4;--brass-100:#F3E5C2;--brass-300:#DCBE6B;--brass-400:#C9A227;--brass-500:#A8851B;--brass-600:#836615;

  --sig-low:#2E7D52;--sig-mid:#8AA22A;--sig-high:#C08A16;--sig-peak:#C0392F;

  --green-50:#EAF3EE;--green-500:#2E7D52;--green-600:#236340;
  --amber-50:#FBF2DF;--amber-500:#B07C12;--amber-600:#8E6410;
  --red-50:#FBEBE9;--red-500:#C0392F;--red-600:#9C2C24;

  --text-strong:var(--n-950);
  --text-body:var(--n-800);
  --text-muted:var(--n-500);
  --text-subtle:var(--n-400);
  --text-inverse:var(--n-0);
  --text-link:var(--ox-500);
  --text-link-hover:var(--ox-600);
  --text-on-primary:var(--n-0);
  --text-accent:var(--brass-600);

  --surface-page:var(--n-25);
  --surface-card:var(--n-0);
  --surface-sunken:var(--n-50);
  --surface-raised:var(--n-0);
  --surface-inverse:var(--n-950);
  --surface-hover:var(--n-50);
  --surface-active:var(--n-100);
  --surface-disabled:var(--n-100);

  --border-subtle:var(--n-100);
  --border-default:var(--n-200);
  --border-strong:var(--n-300);
  --border-inverse:rgba(255,255,255,.14);
  --border-focus:var(--ox-400);

  --primary:var(--ox-500);
  --primary-hover:var(--ox-600);
  --primary-press:var(--ox-700);
  --primary-soft:var(--ox-50);
  --accent:var(--brass-400);

  --success:var(--green-500);
  --danger:var(--red-500);

  --focus-ring:0 0 0 3px rgba(138,42,59,.26);
  --overlay-scrim:rgba(13,11,16,.6);

  --font-display:"Jost","Futura","Helvetica Neue",Arial,sans-serif;
  --font-ui:"Barlow","IBM Plex Sans Thai","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-h1:36px;--fs-h2:28px;--fs-h3:22px;

  --r-xs:2px;--r-sm:4px;--r-md:6px;--r-lg:10px;--r-pill:999px;

  --shadow-1:0 1px 2px rgba(10,15,18,.06);
  --shadow-2:0 2px 6px rgba(10,15,18,.08);
  --shadow-3:0 8px 20px -6px rgba(10,15,18,.16);
  --shadow-4:0 20px 48px -12px rgba(10,15,18,.28);

  --dur-fast:140ms;--ease-standard:cubic-bezier(.2,.6,.2,1);
  --t-hover:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);

  --page-max:1280px;
}

/* ====================== Base ====================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-ui);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--text-strong);font-family:var(--font-display);letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
a{color:var(--text-link);text-decoration:none;transition:var(--t-hover)}
a:hover{color:var(--text-link-hover)}
img{max-width:100%;display:block}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.i18n{white-space:pre-line}

.eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--primary)}
.eyebrow.on-dark{color:var(--brass-300)}
.container{max-width:var(--page-max);margin:0 auto;padding:0 32px}
@media (max-width:640px){.container{padding:0 18px}}
.section{padding:88px 0}
.section-tight{padding:56px 0}
@media (max-width:860px){.section{padding:56px 0}.section-tight{padding:40px 0}}

/* ====================== Header / nav ====================== */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle)}
.site-header-inner{max-width:var(--page-max);margin:0 auto;padding:10px 32px;min-height:72px;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:16px 12px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img{height:22px;width:auto}
.brand .divider-label{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);border-left:1px solid var(--border-default);padding-left:10px}
.site-nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;flex:1 1 auto;min-width:0;justify-content:center;list-style:none;margin:0;padding:0}
.site-nav li{list-style:none;margin:0;padding:0}
.site-nav a{padding:6px 0;font-size:15px;color:var(--text-body)}
.site-nav a:hover{color:var(--primary)}
.lang-switch{display:flex;align-items:center;border:1px solid var(--border-default);border-radius:4px;overflow:hidden;flex:0 0 auto;margin-left:auto}
.lang-btn{background:transparent;color:var(--text-muted);border:none;padding:6px 10px;font-size:12px;font-weight:600;letter-spacing:.06em;cursor:pointer}
.lang-btn.is-active{background:var(--primary);color:var(--text-on-primary)}

/* ====================== Buttons ====================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--primary);color:var(--text-on-primary);border:1px solid var(--primary);border-radius:var(--r-sm);padding:0 20px;height:40px;font-family:var(--font-ui);font-size:14px;font-weight:600;cursor:pointer;transition:var(--t-hover)}
.btn:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--text-on-primary)}
.btn-lg{height:44px;padding:0 24px;font-size:15px}
.btn-secondary{background:transparent;color:var(--text-strong);border-color:var(--border-default)}
.btn-secondary:hover{background:var(--surface-hover);color:var(--text-strong);border-color:var(--border-strong)}
.btn-inverse{background:#fff;color:var(--n-950);border-color:#fff}
.btn-inverse:hover{background:var(--n-100);color:var(--n-950)}
.btn-full{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn svg{width:16px;height:16px}

/* ====================== Tags / badges ====================== */
.tag{display:inline-flex;align-items:center;height:28px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--border-default);background:#fff;color:var(--text-body);font-size:13px;cursor:pointer;transition:var(--t-hover)}
.tag:hover{border-color:var(--border-strong)}
.tag.is-selected{background:var(--primary);border-color:var(--primary);color:var(--text-on-primary)}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:var(--r-pill);background:var(--surface-sunken);border:1px solid var(--border-default);font-size:12px;color:var(--text-muted)}
.badge-accent{background:var(--brass-50);border-color:var(--brass-100);color:var(--brass-600)}

/* ====================== Forms ====================== */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--text-strong)}
.field input,.field select,.field textarea{width:100%;box-sizing:border-box;height:44px;padding:0 12px;background:#fff;border:1px solid var(--border-default);border-radius:var(--r-sm);font-family:var(--font-ui);font-size:15px;color:var(--text-strong)}
.field textarea{height:auto;padding:10px 12px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--border-focus)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}

/* Ninja Forms embeds: match the site's field/button styling */
.nf-form-cont{color:var(--text-strong)}
.nf-form-cont label{font-size:13px;font-weight:600;color:var(--text-strong)}
.nf-form-cont input[type="text"],.nf-form-cont input[type="email"],.nf-form-cont input[type="tel"],.nf-form-cont select,.nf-form-cont textarea{width:100%;box-sizing:border-box;height:44px;padding:0 12px;background:#fff;border:1px solid var(--border-default);border-radius:var(--r-sm);font-family:var(--font-ui);font-size:15px;color:var(--text-strong)}
.nf-form-cont textarea{height:auto;padding:10px 12px;resize:vertical}
.nf-form-cont input:focus,.nf-form-cont select:focus,.nf-form-cont textarea:focus{border-color:var(--border-focus);outline:none}
.nf-form-cont input[type="submit"]{display:inline-flex;align-items:center;justify-content:center;width:100%;background:var(--primary);color:var(--text-on-primary);border:1px solid var(--primary);border-radius:var(--r-sm);padding:0 20px;height:44px;font-family:var(--font-ui);font-size:15px;font-weight:600;cursor:pointer;transition:var(--t-hover)}
.nf-form-cont input[type="submit"]:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.nf-form-cont .nf-field-element{margin-bottom:16px}
.nf-form-cont .nf-error-msg{color:var(--sig-high);font-size:13px}

/* ====================== Grid helpers ====================== */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.split-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.split-2.align-start{align-items:start}
@media (max-width:860px){.split-2{grid-template-columns:1fr}}

.cat-row{display:flex;flex-direction:column;border-top:1px solid var(--border-subtle)}
.cat-row-item{display:grid;grid-template-columns:320px minmax(0,1fr) 190px;gap:36px;align-items:center;padding:22px 0;border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:var(--t-hover)}
.cat-row-item:hover{background:var(--surface-hover)}
@media (max-width:860px){.cat-row-item{grid-template-columns:1fr;gap:16px}.cat-row-item .cat-thumb{height:160px}}
.cat-thumb{height:190px;border-radius:4px;overflow:hidden;border:1px solid var(--border-subtle)}
.cat-thumb img{width:100%;height:100%;object-fit:cover}

.solution-blocks-row{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--border-subtle)}
.solution-blocks-row .block-row{display:grid;grid-template-columns:72px minmax(0,1fr) 320px;gap:32px;align-items:center;padding:28px 0;border-bottom:1px solid var(--border-subtle)}
@media (max-width:860px){.solution-blocks-row .block-row{grid-template-columns:1fr;gap:16px}}

/* ====================== Cards ====================== */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--r-md);box-shadow:var(--shadow-1);overflow:hidden;display:flex;flex-direction:column;transition:var(--t-hover)}
.card.clickable{cursor:pointer}
.card.clickable:hover{border-color:var(--border-strong);box-shadow:var(--shadow-3)}
.card-media{height:180px;background:#fff;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;color:var(--text-subtle);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:contain;padding:14px}
.card-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{font-size:19px;font-weight:600}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--border-subtle);padding-top:14px;margin-top:6px;font-size:12px;color:var(--text-subtle)}

/* ====================== Footer ====================== */
.site-footer{background:var(--n-950);color:rgba(255,255,255,.7);padding:64px 0 32px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:48px 40px}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.footer-col .head{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.footer-col a,.footer-col button{text-align:left;background:none;border:none;padding:0;font-family:var(--font-ui);font-size:14px;color:rgba(255,255,255,.7);cursor:pointer}
.footer-col a:hover,.footer-col button:hover{color:#fff}
.footer-bottom{max-width:var(--page-max);margin:48px auto 0;padding:24px 32px 0;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.45)}

/* ====================== LINE rail ====================== */
.line-rail-wrap{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:80;display:flex;align-items:stretch}
.line-rail-btn{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--primary);border:none;border-radius:6px 0 0 6px;padding:20px 13px;cursor:pointer;color:#fff;box-shadow:var(--shadow-4)}
.line-rail-btn:hover{background:var(--primary-hover)}
.line-rail-btn span{display:block;transform:rotate(180deg);writing-mode:vertical-rl;text-orientation:sideways;font-size:12px;font-weight:600;white-space:nowrap}
.line-panel{width:250px;max-height:calc(100vh - 32px);overflow-y:auto;background:var(--n-950);border:1px solid rgba(255,255,255,.16);border-right:none;border-radius:6px 0 0 6px;box-shadow:var(--shadow-4);padding:18px;display:none;flex-direction:column;gap:12px}
.line-panel.is-open{display:flex}
.line-panel img{border-radius:4px}

/* ====================== Dialog / toast ====================== */
.dialog-overlay{position:fixed;inset:0;background:var(--overlay-scrim);z-index:90;display:none;align-items:center;justify-content:center;padding:24px}
.dialog-overlay.is-open{display:flex}
.dialog-box{background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-4);padding:28px;width:100%;max-width:440px;display:flex;flex-direction:column;gap:16px;max-height:90vh;overflow-y:auto}
.dialog-box h3{font-size:20px}
.dialog-close{align-self:flex-end;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:20px;line-height:1}
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:95;display:none;align-items:center;gap:10px;background:var(--n-950);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:6px;box-shadow:var(--shadow-4);padding:14px 18px;font-size:14px}
.toast.is-open{display:flex}

/* ====================== Hero ====================== */
.home-hero{position:relative;overflow:hidden;background:var(--n-950);color:#fff;padding:120px 0 100px}
.home-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.88}
.home-hero .scrim{position:absolute;inset:0;background:linear-gradient(95deg,rgba(12,12,12,.94) 0%,rgba(12,12,12,.8) 42%,rgba(12,12,12,.3) 74%,rgba(12,12,12,.14) 100%);pointer-events:none}
.home-hero .hero-container{position:relative}
.home-hero .inner{display:flex;flex-direction:column;gap:26px;max-width:740px}
.home-hero h1{font-size:clamp(30px,4.1vw,54px);line-height:1.2;font-weight:600;color:#fff}
.home-hero p{max-width:54ch;font-size:17px;line-height:1.7;color:rgba(255,255,255,.75)}
.signal-bars{display:flex;align-items:flex-end;gap:3px;height:20px}
.signal-bars span{width:5px;display:block}

.dark-panel{background:var(--n-950);color:#fff;border-radius:6px;padding:40px}
.sunken{background:var(--surface-sunken)}

/* ====================== Products ====================== */
.filters{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--border-subtle);margin-bottom:28px}
.spec-table{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:6px;box-shadow:var(--shadow-1);overflow:hidden}
.spec-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px;padding:14px 20px;border-bottom:1px solid var(--border-subtle)}
.spec-row:last-child{border-bottom:none}
.spec-row .k{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.spec-row .v{font-family:var(--font-mono);font-size:14px;color:var(--text-strong)}
.thumb-row{display:flex;flex-wrap:wrap;gap:10px}
.thumb{width:82px;height:82px;background:#fff;border:1px solid var(--border-subtle);border-radius:4px;padding:0;cursor:pointer;overflow:hidden}
.thumb.is-active{border:2px solid var(--primary)}
.thumb img{width:100%;height:100%;object-fit:contain;padding:5px}
.product-hero-media{height:420px;background:#fff;border:1px solid var(--border-subtle);border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-hero-media img{width:100%;height:100%;object-fit:contain;padding:20px}
.back-link{background:none;border:none;padding:0;margin-bottom:24px;display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--text-muted);cursor:pointer}
.feat-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.feat-list li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.6}
.feat-list svg{color:var(--primary);flex:0 0 auto;margin-top:3px;width:16px;height:16px}

/* ====================== Contact / dealer cards ====================== */
.contact-line{display:flex;align-items:center;gap:12px}
.contact-line .icon{color:var(--primary)}
.on-dark .contact-line .icon{color:var(--brass-300)}
.contact-line .label{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-subtle)}
.on-dark .contact-line .label{color:rgba(255,255,255,.55)}
.contact-line .value{font-family:var(--font-mono);font-size:14px;color:var(--text-strong)}
.on-dark .contact-line .value{color:#fff}

.dealer-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:6px;box-shadow:var(--shadow-1);padding:24px;display:flex;flex-direction:column;gap:14px}

/* ====================== Blog ====================== */
.post-thumb{height:180px;border-bottom:1px solid var(--border-subtle);background:linear-gradient(135deg,var(--n-900),var(--n-700));display:flex;align-items:center;justify-content:center;color:var(--brass-300)}

/* ====================== Utility ====================== */
.text-center{text-align:center}
.mono{font-family:var(--font-mono)}
.mt-0{margin-top:0}
.no-underline{text-decoration:none}
.stat-bar{display:flex;gap:3px;align-items:flex-end;height:60px}
.client-logo{filter:grayscale(1);opacity:.7;max-width:124px;object-fit:contain}
.drag-row{display:flex;gap:20px;overflow-x:auto;padding:4px 4px 16px;scrollbar-width:thin;cursor:grab;user-select:none}
.drag-row .card{flex:0 0 300px}