/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE. ***************/


/* ===============================
   Fasicare — Kanit Font (Weight 100–700)
   =============================== */

/* Thin (100) */
@font-face {
  font-family: 'Kanit';
  src: url('/wp-content/fonts/kanit/Kanit-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* ExtraLight (200) */
@font-face {
  font-family: 'Kanit';
  src: url('/wp-content/fonts/kanit/Kanit-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Light (300) */
@font-face {
  font-family: 'Kanit';
  src: url('/wp-content/fonts/kanit/Kanit-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular (400) */
@font-face {
  font-family: 'Kanit';
  src: url('/wp-content/fonts/kanit/Kanit-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium (500) */
@font-face {
  font-family: 'Kanit';
  src: url('/wp-content/fonts/kanit/Kanit-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* SemiBold (600) */
@font-face {
  font-family: 'Kanit';
  src: url('/wp-content/fonts/kanit/Kanit-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: 'Kanit';
  src: url('/wp-content/fonts/kanit/Kanit-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ===============================
   Root Variables
   =============================== */

:root {
  --fsc-font: 'Kanit', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fsc-color-teal: #0FA89E;
  --fsc-color-text: #374151;
  --fsc-bg-light: #f9fafb;
  --fsc-bg-accent: #f0fdf4;
}


/* ===============================
   Apply Font Everywhere
   =============================== */

html, body {
  font-family: var(--fsc-font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
p, a, span, small, strong, em, mark, code, pre,
ul, ol, li, dl, dt, dd,
table, th, td, caption,
blockquote, figcaption, address,
label, legend, fieldset,
button, input, select, textarea {
  font-family: var(--fsc-font) !important;
}


/* ===============================
   Typography Weight Rules
   =============================== */

h1, h2, h3 { font-weight: 600; }
strong, b { font-weight: 500; }
p, li, span { font-weight: 400; }



/* ===============================
   Remove all link underlines
   =============================== */

a, a:visited,
.header-nav a,
.nav > li > a,
.ux-menu-link__link,
.footer-primary a,
.widget a,
.product-title a {
  text-decoration: none !important;
}

a:hover, a:focus {
  text-decoration: none !important;
}

.ux-menu-link__underline,
.ux-menu-link__underline::after {
  display: none !important;
}



/* ===============================
   Dropdown menu style
   =============================== */

.nav-dropdown li a,
.ux-menu .sub-menu a {
  font-weight: 400 !important;
  font-size: 18px !important;
  letter-spacing: 0.2px;
}



/* ===============================
   Tabs / Filters Style
   =============================== */

.fasicare-tabs .nav > li > a,
.ux-filter .nav > li > a {
  color: var(--fsc-color-teal);
  background: #fff;
  border: 1px solid var(--fsc-color-teal);
  border-radius: 9999px;
  padding: 6px 16px;
  transition: 0.2s ease;
}

.fasicare-tabs .nav > li > a:hover,
.ux-filter .nav > li > a:hover {
  background: var(--fsc-bg-accent) !important;
  color: var(--fsc-color-teal) !important;
  border-color: var(--fsc-color-teal) !important;
}

.fasicare-tabs .nav > li.active > a,
.ux-filter .nav > li.active > a {
  background: var(--fsc-color-teal) !important;
  color: #fff !important;
}



/* ===============================
   Mobile Menu
   =============================== */

@media only screen and (max-width: 48em) {
  .off-canvas .nav-sidebar li a,
  .mobile-nav .nav > li > a,
  .mobile-nav .nav > li > a.nav-top-link {
    font-family: var(--fsc-font) !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    padding: 12px 20px !important;
    color: var(--fsc-color-text) !important;
  }
}



/* =====================================================
   FORCE NAV OVERRIDE (STRONGEST)
   ชนะทุก style ของ Flatsome 100%
   ===================================================== */

/* Desktop Main Navigation */
body header#header .header-nav-main .nav > li > a.nav-top-link {
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    padding: 12px 20px !important;
    color: var(--fsc-color-text) !important;
    text-transform: none !important;
}

/* Hover */
body header#header .header-nav-main .nav > li:hover > a.nav-top-link {
    background-color: var(--fsc-color-teal) !important;
    color: #fff !important;
}

/* Active */
body header#header .header-nav-main .nav > li.current-menu-item > a.nav-top-link,
body header#header .header-nav-main .nav > li.current-menu-ancestor > a.nav-top-link {
    background-color: var(--fsc-color-teal) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* Sticky Header Override */
body #header.stuck .header-nav-main .nav > li > a.nav-top-link {
    font-size: 22px !important;
    font-weight: 500 !important;
    padding: 12px 20px !important;
    text-transform: none !important;
}