/*
Theme Name:   BNF Thailand Child
Theme URI:    https://new.bnfthailand.com
Description:  Child theme for BNF Thailand — Astra child with Apple-style minimal design
Author:       BNF Thailand
Template:     astra
Version:      1.0.0
Text Domain:  bnf-thailand-child
*/

/* ============================================================
   GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;700&display=swap');

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  /* Brand Colors */
  --bnf-navy:         #003087;
  --bnf-blue:         #0055CC;

  /* Backgrounds */
  --color-bg:         #FFFFFF;
  --color-surface:    #F5F5F7;

  /* Borders */
  --color-border:     #E0E0E5;

  /* Text */
  --color-text:       #1D1D1F;
  --color-text-2:     #6E6E73;
  --color-text-3:     #AEAEB2;

  /* Radius */
  --radius-sm:        8px;
  --radius-md:        12px;
  --radius-lg:        20px;

  /* Shadows */
  --shadow-card:      0 2px 16px rgba(0, 0, 0, 0.08);
  --shadow-hover:     0 8px 32px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --transition:       0.25s ease;

  /* Layout */
  --max-width:        1200px;
  --section-gap:      64px;   /* mobile default — scaled up in responsive.css */
}

/* ============================================================
   BASE RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   BODY
   ============================================================ */
body {
  font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TYPOGRAPHY — HEADINGS
   letter-spacing: 0 by default (Thai-safe)
   -0.02em only applied to EN content via :lang(en) / .en class
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color-text);
  margin-top: 0;
}

h1 { font-size: clamp(32px, 4.5vw, 48px); line-height: 1.15; }
h2 { font-size: clamp(28px, 3.5vw, 40px); line-height: 1.2;  }
h3 { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.3;  }
h4 { font-size: clamp(20px, 2vw,   24px); line-height: 1.35; }
h5 { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.4;  }
h6 { font-size: 16px;                      line-height: 1.4;  }

/* Hero H1 — larger than page H1, applied via class */
.bnf-hero__title {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.08;
  font-weight: 700;
}

/* EN-only tight letter-spacing (Apple-style) */
:lang(en) h1, :lang(en) h2, :lang(en) h3,
.en h1, .en h2, .en h3 {
  letter-spacing: -0.02em;
}
:lang(en) h4, .en h4 {
  letter-spacing: -0.015em;
}

/* ============================================================
   TYPOGRAPHY — BODY
   ============================================================ */
p {
  color: var(--color-text-2);
  max-width: 68ch;
  margin-top: 0;
}

small,
.small {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-3);
}

/* ============================================================
   LINKS
   ============================================================ */
a {
  color: var(--bnf-blue);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--bnf-navy);
}