/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Description: Default GeneratePress Child Theme optimized for Viriyah Creation
Author: Antigravity
Author URI: https://google.com
Template: generatepress
Version: 1.0.0
*/

/* ==========================================================================
   LOCAL FONT LOADING (Mitr) - Optimized for CWV & PDPA
   ========================================================================== */
@font-face {
  font-family: 'Mitr';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/mitr-200-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Mitr';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/mitr-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Mitr';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/mitr-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Mitr';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/mitr-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Mitr';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/mitr-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Mitr';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/mitr-700-normal.woff2') format('woff2');
}

/* ==========================================================================
   1. NAVIGATION & LAYOUT
   ========================================================================== */
.main-navigation a {
    letter-spacing: 2px;
}

/* ==========================================================================
   2. TYPOGRAPHY & PARAGRAPH INDENT (Optimized)
   ========================================================================== */
strong {
    font-weight: 500;
}

/* เยื้องย่อหน้าเฉพาะในเนื้อหาบทความหลัก (entry-content) และยกเว้นคลาส .noid */
.entry-content p:not(.noid) {
    text-indent: 36px;
}

/* ปรับระยะเยื้องให้อ่านง่ายบนจอมือถือขนาดเล็ก */
@media (max-width: 480px) {
    .entry-content p:not(.noid) {
        text-indent: 18px;
    }
}

.has-drop-cap:not(:focus):first-letter {
    color: var(--accent);
    font-size: 3.2em;
    font-weight: 600;
    line-height: .8em;
    margin: .1em .08em 0 0;
}

/* ==========================================================================
   3. COMPONENTS & BUTTONS (Refactored - Removed !important)
   ========================================================================== */
.wp-block-separator {
    border: none;
    border-top: 3px solid;
    width: 55%;
    color: var(--accent-2);
}

.wp-block-buttons {
    margin-bottom: 1.5em;
}

.wp-block-button__link {
    border-radius: 0;
    padding: 10px 25px;
}

.wp-block-search__inside-wrapper {
    border: solid 1px var(--accent-2);
}

/* เอฟเฟกต์ยกตัวตอนโฮเวอร์ปุ่ม (Hover Effects) - ประหยัดทรัพยากรด้วยการระบุ Properties เจาะจง */
.button, .gb-button, .btn-md a, .btn-s a {
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), background-color 250ms ease, color 250ms ease;
}

.button:hover, .gb-button:hover, .btn-md a:hover, .btn-s a:hover {
    transform: translate3d(0, -3px, 0);
}

.s_button a {
    font-size: 14px !important;
}

/* ปุ่มขนาดกลาง - ถอด !important เพื่อให้ GenerateBlocks UI ปรับแต่งใน Editor ได้ */
.btn-md a {
    background-color: #ffffff;
    color: var(--accent-2);
    border: 2px solid var(--accent);
    padding: 8px 10px;
    font-size: 14px;
    margin-bottom: 10px;
    display: inline-block;
}

.btn-md a:hover {
    color: var(--accent);
    background-color: var(--accent-2);
}

/* ปุ่มขนาดเล็ก - ถอด !important */
.btn-s a {
    background-color: #ffffff;
    color: var(--accent-2);
    border: 1px solid var(--accent);
    padding: 5px 8px;
    font-size: 12px;
    margin-bottom: 10px;
    display: inline-block;
}

/* ==========================================================================
   4. SIDEBAR & FRAMES (Brand colors & Layout)
   ========================================================================== */
.inside-right-sidebar {
    border-left: 2px groove var(--accent-2);
}

.heading_sidebar {
    padding: 10px 0px 10px 20px;
    background-color: var(--accent-2);
    color: white;
    margin-top: 50px;
}

.hr_center {
    margin: auto;
}

.image-frame img {
    border: 12px solid #ffffff;
}

.image-frame-grey img {
    border: 12px solid #f2f5f7;
}

.image-frame-thin img {
    border: 4px solid #ffffff;
}

/* ==========================================================================
   5. CUSTOM PRIMARY BUTTON (PO Approved - Swapped & 4px Radius)
   ========================================================================== */
/* Style 1 Custom: Swapped Premium Corporate Classic with 4px border-radius */
.vrc-btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #191D88 !important;
    border: 2px solid #FFC436;
    border-radius: 4px;
    padding: 12px 28px;
    font-family: var(--gp-font--mitr), sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(25, 29, 136, 0.1);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                background-color 250ms ease, 
                color 250ms ease, 
                border-color 250ms ease, 
                box-shadow 250ms ease;
    cursor: pointer;
}

.vrc-btn-custom:hover {
    background-color: #191D88;
    color: #ffffff !important;
    border-color: #191D88;
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 8px 16px rgba(25, 29, 136, 0.15), 
                0 0 8px rgba(255, 196, 54, 0.4);
}

.vrc-btn-custom:active {
    transform: translate3d(0, -1px, 0);
    box-shadow: 0 2px 4px rgba(25, 29, 136, 0.1);
}

/* --- PHASE 1: NATIVE GP HOOKS CSS --- */
.header-wrap {
    position: absolute !important;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 2000;
}
.site-header,
.main-navigation,
.inside-header {
    background: transparent !important;
}
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle {
    color: #ffffff !important;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
    color: var(--accent, #FFC436) !important;
}

/* Reset GP Footer default styles to allow block footer to span fully */
.site-footer {
    background-color: transparent !important;
    padding: 0 !important;
}
.site-footer .grid-container {
    max-width: 100% !important;
}

/* --- PHASE 2: HIDE TITLE FOR TARGET PAGE TEMPLATES --- */
.page-template-page-in-house-courses .entry-header,
.page-template-page-in-house-training-courses .entry-header {
    display: none !important;
}

/* --- TWEAK: REDUCE GAP BY 35PX FOR TARGET PAGES --- */
.page-template-page-in-house-courses #content,
.page-template-page-in-house-training-courses #content {
    margin-top: -35px !important;
}

/* --- HOTFIX: PAGE CONTENT MAX-WIDTH LIMIT --- */
body.page:not(.home) .inside-article {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- THEME-05: CATEGORY ARCHIVE CARD GRID & DESIGN --- */
@media (min-width: 769px) {
    .archive .site-main, .category .site-main, .tag .site-main {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
    }
}
@media (max-width: 768px) and (min-width: 481px) {
    .archive .site-main, .category .site-main, .tag .site-main {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}
@media (max-width: 480px) {
    .archive .site-main, .category .site-main, .tag .site-main {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

.archive .site-main > article,
.category .site-main > article,
.tag .site-main > article {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms ease !important;
}

.archive .site-main > article:hover,
.category .site-main > article:hover,
.tag .site-main > article:hover {
    transform: translate3d(0, -5px, 0) !important;
    box-shadow: 0 12px 25px rgba(25, 29, 136, 0.08) !important;
}

/* Make image flush to edges */
.archive .inside-article, .category .inside-article, .tag .inside-article {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.archive .post-image, .category .post-image, .tag .post-image {
    margin: 0 !important;
    order: -1 !important;
}

.archive .post-image img, .category .post-image img, .tag .post-image img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 8px 8px 0 0 !important;
}

/* Adjust paddings for other inner elements */
.archive .inside-article > *:not(.post-image),
.category .inside-article > *:not(.post-image),
.tag .inside-article > *:not(.post-image) {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.archive .inside-article .entry-header,
.category .inside-article .entry-header,
.tag .inside-article .entry-header {
    padding-top: 20px !important;
}

.archive .inside-article .entry-summary,
.category .inside-article .entry-summary,
.tag .inside-article .entry-summary {
    padding-bottom: 20px !important;
    font-size: 14px !important;
    color: #666666 !important;
    line-height: 1.6 !important;
}

.archive .inside-article .entry-title,
.category .inside-article .entry-title,
.tag .inside-article .entry-title {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
}

.archive .inside-article .entry-title a,
.category .inside-article .entry-title a,
.tag .inside-article .entry-title a {
    color: #191d88 !important;
    text-decoration: none !important;
}

.archive .inside-article .read-more-container,
.category .inside-article .read-more-container,
.tag .inside-article .read-more-container {
    margin-top: auto !important;
    padding-bottom: 20px !important;
}

/* Hide default page header in archive pages */
.archive .page-header, .category .page-header, .tag .page-header {
    display: none !important;
}

/* --- TWEAK: FORCE ARCHIVE HERO H1 TO BE WHITE --- */
.gb-headline-archive-title {
    color: #ffffff !important;
}

/* ==========================================================================
   6. LANDING PAGE: COMPANY OUTING CUSTOM STYLES
   ========================================================================== */
.vrc-custom-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.vrc-custom-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vrc-custom-form label {
    font-family: 'Mitr', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #191d88;
}
.vrc-custom-form label .required {
    color: #ff4d4d;
}
.vrc-custom-form input[type="text"],
.vrc-custom-form input[type="email"],
.vrc-custom-form input[type="tel"],
.vrc-custom-form select,
.vrc-custom-form textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    color: #333333 !important;
    background-color: #ffffff !important;
    transition: border-color 250ms ease, box-shadow 250ms ease !important;
}
.vrc-custom-form input:focus,
.vrc-custom-form select:focus,
.vrc-custom-form textarea:focus {
    outline: none !important;
    border-color: #191d88 !important;
    box-shadow: 0 0 0 3px rgba(25, 29, 136, 0.1) !important;
}
.vrc-custom-form .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 768px) {
    .vrc-custom-form .form-grid-2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
.vrc-form-submit-btn {
    background-color: #FFC436 !important;
    color: #191D88 !important;
    border: 2px solid #FFC436 !important;
    border-radius: 4px !important;
    padding: 14px 28px !important;
    font-family: 'Mitr', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                background-color 250ms ease, 
                color 250ms ease, 
                border-color 250ms ease, 
                box-shadow 250ms ease !important;
    box-shadow: 0 4px 6px rgba(25, 29, 136, 0.05) !important;
}
.vrc-form-submit-btn:hover {
    background-color: #191D88 !important;
    color: #ffffff !important;
    border-color: #191D88 !important;
    transform: translate3d(0, -3px, 0) !important;
    box-shadow: 0 8px 16px rgba(25, 29, 136, 0.15) !important;
}
.form-response-msg {
    font-family: 'Mitr', sans-serif;
    font-size: 15px;
    text-align: center;
    padding: 12px;
    border-radius: 4px;
    display: none;
}
.form-response-msg.success {
    display: block;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.form-response-msg.error {
    display: block;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Details/FAQ details Styling */
.outing-faq-item {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin-bottom: 15px;
    padding: 20px;
    transition: box-shadow 250ms ease;
}
.outing-faq-item[open] {
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.outing-faq-item summary {
    font-family: 'Mitr', sans-serif;
    font-size: 17px;
    color: #191d88;
    cursor: pointer;
    outline: none;
    user-select: none;
}
.outing-faq-item p {
    margin-top: 15px !important;
    margin-bottom: 0 !important;
    color: #555555;
    line-height: 1.6;
}

/* Card hover animation for packages */
.outing-pkg-card {
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms ease !important;
}
.outing-pkg-card:hover {
    transform: translate3d(0, -8px, 0) !important;
    box-shadow: 0 15px 30px rgba(25, 29, 136, 0.08) !important;
}