/*
Theme Name: Jakarta Business Consulting
Theme URI: https://jakartabusinessconsulting.com
Author: Jakarta Business Consulting
Author URI: https://jakartabusinessconsulting.com
Description: Custom WordPress theme for Jakarta Business Consulting, converted from the original static HTML site. Includes page templates for every page of the original site (Home, Services, Articles, Insights, Locations, About, Contact, etc.) so URLs and layout stay exactly where they were.
Version: 1.0.5
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jbc-theme
*/

/* =========================================================
   The rules below are the site's original design system
   (custom properties, typography, components, animations),
   copied from the original styles.css unchanged.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400;1,9..144,500;1,9..144,600;1,9..144,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400&display=swap');

:root {
  --background: #FAF9F7;
  --foreground: #1A1A1A;
  --primary: #1B2B4B;
  --primary-foreground: #FFFFFF;
  --secondary: #F0EDE8;
  --secondary-foreground: #1A1A1A;
  --accent: #8B7355;
  --accent-foreground: #FFFFFF;
  --muted: #E8E4DE;
  --muted-foreground: #6B6560;
  --card: #FFFFFF;
  --card-foreground: #1A1A1A;
  --border: #DDD9D2;
  --input: #E8E4DE;
  --ring: #1B2B4B;
  --radius: 0.5rem;
  --font-sans: 'DM Sans', sans-serif;
  --font-display: 'Fraunces', serif;

  /* Extended palette */
  --navy-deep: #0F1B2D;
  --navy-mid: #1B2B4B;
  --navy-light: #2A3F66;
  --bronze: #8B7355;
  --bronze-light: #A8916A;
  --bronze-dark: #6B5440;
  --stone-100: #F5F2EE;
  --stone-200: #EBE7E0;
  --stone-300: #D8D2C8;
  --charcoal: #2C2C2C;
  --warm-white: #FAF9F7;
}

* {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
  overscroll-behavior: none;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overscroll-behavior: none;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

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

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

button {
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--stone-100);
}
::-webkit-scrollbar-thumb {
  background: var(--stone-300);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted-foreground);
}

/* Display font utility */
.font-display {
  font-family: var(--font-display), serif;
}

/* Hero text clamp */
.text-hero-xl {
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
}

.text-hero-lg {
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.text-section-xl {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.text-section-lg {
  font-size: clamp(1.4rem, 2.5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Reveal animation */
.reveal-hidden {
  opacity: 0;
  transform: translateY(32px);
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Glass effect */
.glass-dark {
  background: rgba(15, 27, 45, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Image zoom container */
.img-zoom-wrap {
  overflow: hidden;
}

.img-zoom-wrap img {
  transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.img-zoom-wrap:hover img {
  transform: scale(1.06);
}

/* Bento card */
.bento-card {
  background: var(--card);
  border: 1px solid var(--border);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.bento-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(27, 43, 75, 0.1);
}

/* Scroll line animation */
.scroll-line-track {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}

.scroll-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bronze);
}

/* Step number */
.step-number {
  font-family: var(--font-display), serif;
  font-size: 5rem;
  font-weight: 300;
  color: var(--border);
  line-height: 1;
  font-style: italic;
}

/* Nav transition: solid light background (site's original tone) once
   scrolled, or on every page other than the homepage. */
.nav-scrolled {
  background: rgba(250, 249, 247, 0.95);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--border);
}

/* Tag / badge */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Divider line */
.divider-bronze {
  width: 2.5rem;
  height: 2px;
  background: var(--bronze);
}

/* Service number */
.service-number {
  font-family: var(--font-display), serif;
  font-size: 3.5rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1;
  font-style: italic;
}

/* Article card hover */
.article-card {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.article-card:hover {
  transform: translateY(-6px);
}

/* Stagger delays */
.stagger-1 { transition-delay: 0ms; }
.stagger-2 { transition-delay: 100ms; }
.stagger-3 { transition-delay: 200ms; }
.stagger-4 { transition-delay: 300ms; }
.stagger-5 { transition-delay: 400ms; }

/* Mobile menu overlay */
.mobile-menu-overlay {
  background: rgba(15, 27, 45, 0.95);
  backdrop-filter: blur(20px);
}

/* Primary button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0.875rem 2rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  border: none;
}

.btn-primary:hover {
  background: var(--navy-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(27, 43, 75, 0.25);
}

/* Secondary button */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--primary);
  padding: 0.875rem 2rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1.5px solid var(--primary);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-secondary:hover {
  background: var(--primary);
  color: var(--primary-foreground);
  transform: translateY(-2px);
}

/* Ghost button (light on dark) */
.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--primary-foreground);
  padding: 0.875rem 2rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1.5px solid rgba(255,255,255,0.4);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-ghost-light:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
}

/* Accent button */
.btn-accent {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: var(--accent-foreground);
  padding: 0.875rem 2rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-accent:hover {
  background: var(--bronze-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 115, 85, 0.3);
}

/* Section label */
.section-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-label::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

/* Scroll-line keyframe */
@keyframes scrollLine {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}

.scroll-line-fill {
  animation: scrollLine 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Float animation for badge */
@keyframes floatBadge {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: floatBadge 4s ease-in-out infinite;
}

/* Utility helpers used inline in the markup (kept minimal, non-Tailwind) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* FAQ accordion (services/[slug] detail pages) */
.faq-item .faq-answer {
  display: none;
}

.faq-item.open .faq-answer {
  display: block;
}

.faq-item .faq-toggle-icon {
  transition: transform 0.3s ease;
}

.faq-item.open .faq-toggle-icon {
  transform: rotate(45deg);
}
/* =========================================================
   Brand colour safety net.

   The custom palette (navy / bronze / stone and the design-system
   tokens) lives in the inline Tailwind config, which only exists once
   the Tailwind CDN script has loaded and run. If that script is slow,
   blocked, or cached oddly, classes like `bg-navy-deep` produce no CSS
   at all — which is what made the "Latest Insights" section render as
   white text on a light background.

   Declaring the same utilities here as plain CSS means those sections
   keep their dark background and readable text no matter what happens
   to the CDN. Values are identical to the Tailwind config, so nothing
   changes visually when Tailwind does load normally.
   ========================================================= */

.bg-navy-deep  { background-color: var(--navy-deep); }
.bg-navy-mid   { background-color: var(--navy-mid); }
.bg-navy-light { background-color: var(--navy-light); }
.text-navy-deep { color: var(--navy-deep); }
.text-navy-mid  { color: var(--navy-mid); }

.bg-bronze       { background-color: var(--bronze); }
.bg-bronze-light { background-color: var(--bronze-light); }
.bg-bronze-dark  { background-color: var(--bronze-dark); }
.text-bronze       { color: var(--bronze); }
.text-bronze-light { color: var(--bronze-light); }
.text-bronze-dark  { color: var(--bronze-dark); }

.bg-stone-100 { background-color: var(--stone-100); }
.bg-stone-200 { background-color: var(--stone-200); }
.bg-stone-300 { background-color: var(--stone-300); }

.bg-background { background-color: var(--background); }
.bg-card       { background-color: var(--card); }
.bg-primary    { background-color: var(--primary); }
.bg-secondary  { background-color: var(--secondary); }
.bg-accent     { background-color: var(--accent); }
.bg-muted      { background-color: var(--muted); }
.text-foreground       { color: var(--foreground); }
.text-primary          { color: var(--primary); }
.text-secondary        { color: var(--secondary); }
.text-accent           { color: var(--accent); }
.text-muted            { color: var(--muted); }
.text-muted-foreground { color: var(--muted-foreground); }
.border-border { border-color: var(--border); }

/* Common translucent overlays used over hero/background images. */
.bg-navy-deep\/75 { background-color: rgba(15, 27, 45, 0.75); }
.bg-navy-deep\/88 { background-color: rgba(15, 27, 45, 0.88); }
.bg-navy-deep\/90 { background-color: rgba(15, 27, 45, 0.90); }

/* Dark sections: make sure every child stays legible even if a custom
   text colour utility (e.g. text-accent) fails to resolve. */
.bg-navy-deep,
.bg-navy-mid {
  color: #FFFFFF;
}

/* Header text colour once the bar is solid (scrolled, or any page
   other than the homepage) — a safety net matching the inline
   Tailwind config in case that script hasn't run yet. */
.text-black\/90 { color: rgba(0, 0, 0, 0.9); }
.border-black\/20 { border-color: rgba(0, 0, 0, 0.2); }
.hover\:bg-black\/5:hover { background-color: rgba(0, 0, 0, 0.05); }

/* Uploaded logo (Appearance > Customize > Site Identity).
   Height is set inline from the Customizer; this only keeps a very wide
   logo from pushing the navigation off the header. */
.jbc-logo-image {
  max-width: 260px;
}
@media (max-width: 640px) {
  .jbc-logo-image { max-width: 180px; }
}