/*
Theme Name: GeneratePress CST Child
Template: generatepress
*/

/* นำเข้าฟอนต์มาตรฐานของแบรนด์: 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: 32px;
    --fs-h2: 24px;
    --fs-body: 16px;
    --fs-meta: 14px;

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

/* 📱 Mobile Adjustments (Override values for smaller viewports) [cite: 3] */
@media (max-width: 767px) {
    :root {
        --fs-h1: 26px;
        --fs-h2: 20px;
        --fs-body: 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: 768px) {

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

@media (max-width: 767px) {

    /* 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);
}