/* ==========================================================================
   1. LOCAL FONTS (Kanit & Prompt)
   ========================================================================== */

@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/bricks-child/fonts/kanit-v17-latin_thai-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  src: url('/wp-content/themes/bricks-child/fonts/kanit-v17-latin_thai-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  src: url('/wp-content/themes/bricks-child/fonts/kanit-v17-latin_thai-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  src: url('/wp-content/themes/bricks-child/fonts/kanit-v17-latin_thai-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/bricks-child/fonts/prompt-v12-latin_thai-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 500;
  src: url('/wp-content/themes/bricks-child/fonts/prompt-v12-latin_thai-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 600;
  src: url('/wp-content/themes/bricks-child/fonts/prompt-v12-latin_thai-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 700;
  src: url('/wp-content/themes/bricks-child/fonts/prompt-v12-latin_thai-700.woff2') format('woff2');
}

/* ==========================================================================
   2. DESIGN TOKENS, VARIABLES & FLUID TYPOGRAPHY
   ========================================================================== */

:root {
  --color-primary: #FF5A1F;          
  --color-primary-hover: #E04812;
  --color-secondary: #2E1A47;        
  --color-secondary-hover: #1E1030;

  --color-bg: #FAFAFB;               
  --color-surface: #FFFFFF;
  --color-border: #E5E2EC;

  --color-text-main: #18141F;        
  --color-text-muted: #6E677C;
  --color-dark-bg: #130D1A;          

  --font-heading: 'Kanit', sans-serif;
  --font-body: 'Prompt', sans-serif;

  /* Fluid typography scale */
  --font-size-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.125rem);      
  --font-size-lg: clamp(1.05rem, 1rem + 0.35vw, 1.375rem);    
  --font-size-xl: clamp(1.2rem, 1.1rem + 0.5vw, 1.625rem);      
  --font-size-2xl: clamp(1.4rem, 1.25rem + 0.75vw, 2.125rem);     
  --font-size-3xl: clamp(1.65rem, 1.45rem + 1.1vw, 2.75rem);    
  --font-size-4xl: clamp(2rem, 1.7rem + 1.4vw, 3.5rem);       
  --font-size-5xl: clamp(2.35rem, 2rem + 2vw, 4.75rem);      
}

/* ==========================================================================
   3. GLOBAL BASE & 1440PX CONTAINER SYSTEM (Bricks Breakpoint Aligned)
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-size-base);
  line-height: 1.75;                  
  color: var(--color-text-main);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-main);
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--font-size-4xl);
}

.inner-container, 
.brxe-container {
  width: 100% !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Responsive container padding matching Bricks standard breakpoints */
@media (max-width: 991px) { /* Tablet */
  .inner-container, .brxe-container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media (max-width: 767px) { /* Smartphone Landscape */
  .inner-container, .brxe-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (max-width: 478px) { /* Smartphone Portrait */
  .inner-container, .brxe-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ==========================================================================
   LIGHT TRANSPARENT FROSTED GLASS HEADER (Increased Transparency)
   ========================================================================== */

#brx-header,
.c-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;

  /* Increased transparency for a clearer view of the background */
  background-color: rgba(255, 255, 255, 0.2) !important;

  /* Fine micro-dots using #18141F */
  background-image: radial-gradient(rgba(24, 20, 31, 0.12) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;

  /* Frosted glass blur */
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;

  padding: 0 !important;
  margin: 0 !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

.c-header__inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
  padding: 0 1.5rem 0 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.c-header__logo {
  background-color: var(--color-primary, #FF5A1F) !important;
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  min-height: 80px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.c-header__logo .logo-background-color {
  fill: var(--color-secondary, #2E1A47);
  transition: fill 0.2s ease;
}

.c-header__logo:hover .logo-background-color {
  fill: #FFFFFF;
}

/* ==========================================================================
   HERO VERTICAL BOTTOM ALIGNMENT FIX
   ========================================================================== */

/* 1. Make the section a flex column and push contents down */
.hero-bg {
  position: relative;
  width: 100%;
  aspect-ratio: 2560 / 1350;
  background-image: url("/wp-content/uploads/2026/09/pheim-kar-prakt̩-xxnlin̒-k̄hxng-khuṇ-d̂wy-brikar-xxkbaeb-websit̒-doy-p̄hu-cheiywchay-k̄hxng-rea-05.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important; /* Pushes inner container to the bottom */
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(19, 13, 26, 0.7) 0%, rgba(19, 13, 26, 0.35) 45%, rgba(19, 13, 26, 0) 75%);
  pointer-events: none;
  z-index: 1;
}

/* 2. Remove default centering on the Bricks container inside hero */
.hero-bg > .brxe-container {
  position: relative;
  z-index: 2;
  width: 100% !important;
  margin-top: auto !important; /* Locks it to the absolute bottom of the section */
  display: block !important;
}

/* 3. Text wrapper spacing from bottom */
.hero-inner-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding-bottom: 7rem !important; /* 5rem desktop distance from bottom edge */
  box-sizing: border-box !important;
}

.hero-inner-wrapper h1 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  margin: 0 !important;
}

/* Responsive bottom adjustments */
@media (max-width: 991px) {
  .hero-bg {
    aspect-ratio: 4 / 5;
    background-image: url("/wp-content/uploads/2026/09/pheim-kar-prakt̩-xxnlin̒-k̄hxng-khuṇ-d̂wy-brikar-xxkbaeb-websit̒-doy-p̄hu-cheiywchay-k̄hxng-rea-mobile-05.webp");
    background-position: 50% 30%;
  }

  .hero-bg::before {
    background: linear-gradient(0deg, rgba(19, 13, 26, 0.8) 0%, rgba(19, 13, 26, 0.35) 45%, rgba(19, 13, 26, 0) 80%);
  }

  .hero-inner-wrapper {
    padding-bottom: 5.5rem !important;
  }
}

@media (max-width: 767px) {
  .hero-inner-wrapper {
    padding-bottom: 3.5rem !important;
  }
}

@media (max-width: 478px) {
  .hero-inner-wrapper {
    padding-bottom: 2.5rem !important;
  }
}

/* ==========================================================================
   STYLE 1: Primary Solid (Electric Pumpkin Fill)
   ========================================================================== */

.btn-primary-fill {
  background-color: var(--color-primary, #FF5A1F) !important;
  color: #FFFFFF !important;
  border-radius: 9999px !important;
  padding: 0.85rem 2.25rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(255, 90, 31, 0.25) !important;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-primary-fill:hover {
  background-color: var(--color-primary-hover, #E04812) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(255, 90, 31, 0.35) !important;
}

/* ==========================================================================
   STYLE 2: Secondary Solid (Midnight Plum Fill)
   ========================================================================== */

.btn-secondary-fill {
  background-color: var(--color-secondary, #2E1A47) !important;
  color: #FFFFFF !important;
  border-radius: 9999px !important;
  padding: 0.85rem 2.25rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(46, 26, 71, 0.2) !important;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-secondary-fill:hover {
  background-color: var(--color-secondary-hover, #1E1030) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(46, 26, 71, 0.3) !important;
}

/* ==========================================================================
   STYLE 3: Transparent Outlined (Glass Border Style)
   ========================================================================== */

.btn-transparent-outline {
  background-color: transparent !important;
  color: var(--color-text-main, #18141F) !important;
  border-radius: 9999px !important;
  padding: 0.85rem 2.25rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  border: 1.5px solid var(--color-border, #E5E2EC) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

.btn-transparent-outline:hover {
  background-color: var(--color-secondary, #2E1A47) !important;
  border-color: var(--color-secondary, #2E1A47) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}

.hero-inner-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding-bottom: 5rem !important;
  box-sizing: border-box !important;
  gap: 2.5rem;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* Prevents children like buttons from stretching full-width */
}

.hero-inner-wrapper .bricks-button {
  width: auto !important; /* Keeps button sized strictly to its text + padding */
  align-self: flex-start !important;
}