/*
Theme Name: GeneratePress CST Child
Template: generatepress
*/
/* ── LOCAL GOOGLE FONTS ── */
@font-face {
  font-display: swap;
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 300;
  src: url('./assets/fonts/prompt-300-thai.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 400;
  src: url('./assets/fonts/prompt-400-thai.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 500;
  src: url('./assets/fonts/prompt-500-thai.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 700;
  src: url('./assets/fonts/prompt-700-thai.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Bai Jamjuree';
  font-style: normal;
  font-weight: 400;
  src: url('./assets/fonts/bai-jamjuree-400-thai.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Bai Jamjuree';
  font-style: normal;
  font-weight: 700;
  src: url('./assets/fonts/bai-jamjuree-700-thai.woff2') format('woff2');
}

/* นำเข้าฟอนต์มาตรฐานของแบรนด์: Prompt (Headings) และ Bai Jamjuree (Body) */
/* @import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;700&family=Prompt:wght@300;400;500;700&display=swap'); */

/* ==========================================================================
   ZONE 1: DESIGN TOKENS (The Master Control Panel) [cite: 1]
   ========================================================================== */
:root {
    /* 🔴 Brand Colors (Reds & Yellow) - ดึงจาก CI ล่าสุด  */
    --cst-red-primary: #DF0806;
    --cst-red-dark: #BA0606;
    --cst-red-accent: #FC2D2D;
    --cst-orange-accent: #FA4107;
    --cst-yellow: #FFCD00;

    /* 🔵 Brand Colors (Blues)  */
    --cst-blue-primary: #0092FF;
    --cst-blue-dark: #1947BD;
    --cst-blue-muted: #286D81;

    /* ⚪ Darks, Grays & Lights (UI & Backgrounds)  */
    --cst-text-main: #0E0F11;
    --cst-text-muted: #515C61;
    --cst-bg-graydark: #252122;
    --cst-bg-gray: #FAF7EB;
    --cst-border-gray: #E7EBEC;
    --cst-bg-white: #FDFDFD;

    /* 🔤 Typography Scale & Fonts */
    --font-body: 'Bai Jamjuree', sans-serif;
    --font-heading: 'Prompt', sans-serif;

    /* Desktop Font Sizes */
    --fs-h1: 2rem;        /* 32px */
    --fs-h2: 1.5rem;      /* 24px */
    --fs-body: 1rem;      /* 16px */
    --fs-meta: 0.875rem;  /* 14px */

    /* Interface Settings */
    --radius-md: 6px;
    --radius-lg: 0.75rem; /* 12px */
    --transition: all 0.25s ease-in-out;
}

/* 📱 Mobile Adjustments (Override values for smaller viewports) [cite: 3] */
@media (max-width: 47.9375em) {
    :root {
        --fs-h1: 1.625rem;   /* 26px */
        --fs-h2: 1.25rem;    /* 20px */
        --fs-body: 0.9375rem; /* 15px */
        /* Protects Thai character scale [cite: 4] */
    }
}

/* ==========================================================================
   ZONE 2: GLOBAL RESET & TYPOGRAPHY APPLICATION [cite: 5]
   ========================================================================== */
body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--cst-text-main);
    line-height: 1.6;
    /* Prevents Thai script vowel clipping  */
    background-color: var(--cst-bg-white);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--cst-text-main);
}

h1 {
    font-size: var(--fs-h1);
    font-weight: 700;
}

h2 {
    font-size: var(--fs-h2);
    font-weight: 700;
}

/* ==========================================================================
   ZONE 3: RESPONSIVE COMPONENT LAYOUTS (Images & Framework) [cite: 8]
   ========================================================================== */

/* Product Card Images - For Catalogues */
.cst-product-card__img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* Enforces your required 4:3 style-guide constraint [cite: 9] */
    overflow: hidden;
    background: #ffffff;
    border-radius: var(--radius-md);
    border: 1px solid var(--cst-border-gray);
}

.cst-product-card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Keeps product shapes perfectly unwarped [cite: 10] */
    transition: var(--transition);
}

/* 💻 Desktop vs Mobile Image Layout Tuning [cite: 11] */
@media (min-width: 48em) {

    /* PC Version Rules */
    .cst-product-detail-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Image left, content right [cite: 12] */
        gap: 1.875rem; /* 30px */
    }
}

@media (max-width: 47.9375em) {

    /* Mobile Version Rules [cite: 13] */
    .cst-product-detail-layout {
        display: block;
        /* Stacks image above text vertically [cite: 14] */
    }

    /* Ensure small screen banners don't overflow horizontally */
    .cst-hero img {
        height: auto;
        max-width: 100%;
    }
}

/* ==========================================================================
   ZONE 4: PERFORMANCE & ACCESSIBILITY FIXES (QC UPDATES)
   ========================================================================== */

/* 1. iOS Auto-Zoom Prevention (ล็อคไม่ให้ iPhone ซูมหน้าจอเวลาพิมพ์ฟอร์ม) */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    font-size: 16px !important;
    border-radius: var(--radius-md);
}

/* 2. Keyboard Accessibility (สร้างกรอบเวลาใช้ปุ่ม Tab เลื่อนหน้าจอ) */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--cst-blue-primary);
    outline-offset: 3px;
}

/* 3. Global Image CLS Prevention (ป้องกันรูปล้นจอและหน้าจอกระตุกตอนโหลด) */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   ZONE 5: B2B PRINT STYLESHEET (สำหรับลูกค้ากด Ctrl+P พรินต์สเปค)
   ========================================================================== */
@media print {

    /* ซ่อนส่วนประกอบที่ไม่จำเป็นในการพรินต์กระดาษ */
    header,
    footer,
    #cst-sticky-cta,
    .sidebar-filter,
    .btn--line {
        display: none !important;
    }

    /* บังคับเนื้อหาให้เต็มหน้ากระดาษ A4 เสมอ */
    body {
        background-color: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    /* ป้องกันตารางสเปคขาดครึ่งหน้ากระดาษ */
    table,
    img,
    .cst-spec-grid {
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   ZONE 6: UTILITY CLASSES (Matching with PHP Templates)
   ========================================================================== */
.cst-section--gray {
    background-color: var(--cst-bg-gray);
}

.cst-section--navy {
    background-color: var(--cst-blue-dark);
}

.cst-section--graydark {
    background-color: var(--cst-bg-graydark);
}

.cst-section-title--white {
    color: var(--cst-bg-white);
}