/*
Theme Name: My Custom Lab Theme
Author: Kriangkrai Dev
Description: Theme สำหรับฝึกทำ Custom Block Patterns - Electronic Components Website
Version: 1.1
Text Domain: my-custom-theme
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================
   RESET & BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   WORDPRESS CORE ALIGNMENTS
   ============================================ */
.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* ============================================
   COLOR VARIABLES (CSS Custom Properties)
   60% = --theme-bg (background)
   30% = --theme-primary (banners, headers, nav)
   10% = --theme-accent (buttons, CTAs, links)
   ============================================ */
:root {
    --wp--preset--color--primary: var(--theme-primary, #0056d6);
    --wp--preset--color--primary-dark: var(--theme-primary-dark, #0049b4);
    --wp--preset--color--primary-light: var(--theme-primary, #0056d6);
    --wp--preset--color--white: #ffffff;
    --wp--preset--color--tertiary: #f8fafc;
    --wp--preset--color--dark-text: #1e293b;
    --wp--preset--color--gray-text: #64748b;
    --wp--preset--color--footer-dark: #1e293b;

    /* Bootstrap 5 primary overrides → accent (10%) for buttons */
    --bs-primary: var(--theme-accent, #4ecdc4);
    --bs-primary-rgb: 78, 205, 196;
    --bs-link-color: var(--theme-accent, #4ecdc4);
    --bs-link-hover-color: var(--theme-accent-dark, #40a8a1);
    --bs-btn-bg: var(--theme-accent, #4ecdc4);
    --bs-btn-border-color: var(--theme-accent, #4ecdc4);
    --bs-btn-hover-bg: var(--theme-accent-dark, #40a8a1);
    --bs-btn-hover-border-color: var(--theme-accent-dark, #40a8a1);
    --bs-btn-active-bg: var(--theme-accent-dark, #40a8a1);
    --bs-btn-active-border-color: var(--theme-accent-dark, #40a8a1);
}

/* Force Bootstrap btn-primary → accent (10%) */
.btn-primary {
    background-color: var(--theme-accent) !important;
    border-color: var(--theme-accent) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--theme-accent-dark) !important;
    border-color: var(--theme-accent-dark) !important;
    color: #fff !important;
}
.btn-outline-primary {
    color: var(--theme-accent) !important;
    border-color: var(--theme-accent) !important;
}
.btn-outline-primary:hover {
    background-color: var(--theme-accent) !important;
    color: #fff !important;
}

/* Text/bg/border → primary (30%) for content hierarchy */
.text-primary { color: var(--theme-primary) !important; }
a { color: inherit; }
a:hover { color: var(--theme-accent); }
.link-primary { color: var(--theme-accent) !important; }
.bg-primary { background-color: var(--theme-primary) !important; }
.border-primary { border-color: var(--theme-primary) !important; }

/* Breadcrumbs (About/Contact/Category/Product):
   - Home link underlined
   - Home hover keeps same color */
nav[aria-label="breadcrumb"] a:first-of-type,
p.has-link-color a:first-child,
p.has-text-align-center.has-link-color > a[href="/"],
p.has-text-align-center > a[href="/"],
p.has-text-align-center > a[href="http://project.3bbddns.com:36141/"] {
    text-decoration: underline !important;
    text-underline-offset: 2px;
    color: currentColor !important;
    opacity: 1 !important;
}

nav[aria-label="breadcrumb"] a:first-of-type:hover,
nav[aria-label="breadcrumb"] a:first-of-type:focus,
nav[aria-label="breadcrumb"] a:first-of-type:visited,
nav[aria-label="breadcrumb"] a:first-of-type:active,
p.has-link-color a:first-child:hover,
p.has-link-color a:first-child:focus,
p.has-link-color a:first-child:visited,
p.has-link-color a:first-child:active,
p.has-text-align-center.has-link-color > a[href="/"]:hover,
p.has-text-align-center.has-link-color > a[href="/"]:focus,
p.has-text-align-center.has-link-color > a[href="/"]:visited,
p.has-text-align-center.has-link-color > a[href="/"]:active,
p.has-text-align-center > a[href="/"]:hover,
p.has-text-align-center > a[href="/"]:focus,
p.has-text-align-center > a[href="/"]:visited,
p.has-text-align-center > a[href="/"]:active,
p.has-text-align-center > a[href="http://project.3bbddns.com:36141/"]:hover,
p.has-text-align-center > a[href="http://project.3bbddns.com:36141/"]:focus,
p.has-text-align-center > a[href="http://project.3bbddns.com:36141/"]:visited,
p.has-text-align-center > a[href="http://project.3bbddns.com:36141/"]:active {
    color: currentColor !important;
    text-decoration: underline !important;
}

/* Body background → 60% */
body { background-color: var(--theme-bg, #ffffff); }

/* ============================================
   LEGACY STYLES (จากเดิม)
   ============================================ */
.my-hero-bg {
    background-color: #000;
    color: #fff;
    padding: 100px 20px;
    text-align: center;
    border-radius: 20px;
    transition: 0.3s;
}

.my-hero-bg:hover {
    background-color: #222;
}

/* ============================================
   FULL-BLEED: alignfull blocks break out of
   constrained post-content to 100% viewport
   ============================================ */
html {
    overflow-x: hidden;
}
.wp-block-post-content > .alignfull,
.entry-content > .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box;
}

/* ============================================
   FOOTER DARK — สีตัวหนังสือสม่ำเสมอทุกหน้า
   ============================================ */
.footer-dark {
    background-color: #1e293b;
    color: #cbd5e1;
}
.footer-dark h5,
.footer-dark h4 {
    color: #ffffff !important;
}
.footer-dark p,
.footer-dark li,
.footer-dark a,
.footer-dark .small {
    color: #cbd5e1 !important;
}
.footer-dark a:hover {
    color: #ffffff !important;
    opacity: 1;
}
.footer-dark .footer-divider,
.footer-dark hr {
    border-color: #334155;
    opacity: 1;
}

/* ============================================
   SINGLE PRODUCT PAGE — ตัดขอบเขต Block + margin-top
   ============================================ */
.single-product main.wp-block-group,
.single-product .pd-main-wrap {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* ซ่อน <p> ว่างที่ wpautop สร้างใน shortcode */
.pd-main-wrap > p:empty,
.pd-main-wrap p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   GOOGLE MAP WRAPPER — Full-bleed, no margins
   ============================================ */
.kv-google-map-wrapper {
    width: 100vw !important;
    max-width: none !important;
    margin-top: 40px !important;
    margin-bottom: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}
.kv-google-map-wrapper iframe {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
}
/* Remove bottom gap from containers that hold the map (map is last element) */
main:has(.kv-google-map-wrapper),
.wp-block-group:has(.kv-google-map-wrapper),
.wp-block-post-content:has(.kv-google-map-wrapper),
.has-global-padding:has(.kv-google-map-wrapper),
.entry-content:has(.kv-google-map-wrapper) {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.wp-site-blocks { gap: 0 !important; }
.wp-block-template-part:has(.footer-dark) { margin-top: 0 !important; padding-top: 0 !important; }
main + .wp-block-template-part { margin-top: 0 !important; }
html, body { overflow-x: clip !important; }

/* ลบ margin-block-start ของ children ใน is-layout-flow ใน pd-main-wrap */
.pd-main-wrap > *,
:root :where(.pd-main-wrap.is-layout-flow) > * {
    margin-block-start: 0 !important;

/* ============================
   Product Description Rich Text
   ============================ */
}
.product-description h2 {
    color: var(--theme-primary, #0056d6);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 1.5em 0 0.5em;
}
.product-description h2 strong,
.product-description h2 b,
.product-description h2 span {
    color: inherit;
}
.product-description h3 {
    color: var(--theme-primary, #0056d6);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 1.3em 0 0.4em;
}
.product-description h3 strong,
.product-description h3 b,
.product-description h3 span {
    color: inherit;
}
.product-description h4 {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1.2em 0 0.4em;
}
.product-description p {
    margin: 0 0 0.8em;
}
.product-description ul,
.product-description ol {
    margin: 0 0 1em;
    padding-left: 1.5em;
}
.product-description ul {
    list-style: disc;
}
.product-description ol {
    list-style: decimal;
}
.product-description li {
    margin-bottom: 0.3em;
    line-height: 1.7;
}
.product-description a {
    color: var(--theme-primary, #0056d6);
    text-decoration: underline;
}
.product-description a:hover {
    opacity: 0.8;
}
.product-description strong,
.product-description b {
    font-weight: 600;
}
}