/* ============================================================
   YESHUA FAMILY COMMUNITIES — Design Tokens & Base Styles
   Navy + Gold on off-white. Plus Jakarta Sans.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  --navy:        #1B2E4B;
  --navy-700:    #213a5e;
  --navy-600:    #2b4974;
  --navy-500:    #3a5d8f;
  --navy-tint:   #E9EDF3;
  --navy-tint2:  #F2F5F9;

  --gold:        #F0A500;
  --gold-600:    #D8950A;
  --gold-700:    #B87C00;
  --gold-tint:   #FCEFCF;
  --gold-tint2:  #FBF6E9;

  --ink-900: #2C2C2A;
  --ink-800: #3A3A37;
  --ink-700: #4E4E4A;
  --ink-600: #6B6B65;
  --ink-500: #8A8A82;
  --ink-400: #ABAB9F;
  --ink-300: #D2D0C7;
  --ink-200: #E6E3DA;
  --ink-100: #F1EFE8;
  --ink-050: #F9F7F4;

  --success:      #2E7D52;
  --success-tint: #E3F2E9;
  --warning:      #C98A00;
  --warning-tint: #FCEFCF;
  --danger:       #C0392B;
  --danger-tint:  #FBE7E3;

  --bg-app:     #F9F7F4;
  --bg-surface: #FFFFFF;
  --border-1:   #E6E3DA;
  --border-2:   #D2D0C7;
  --fg-1: #2C2C2A;
  --fg-2: #6B6B65;
  --fg-3: #8A8A82;
  --fg-4: #ABAB9F;

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(27,46,75,.06), 0 1px 1px rgba(27,46,75,.04);
  --shadow-2: 0 4px 14px rgba(27,46,75,.08), 0 1px 3px rgba(27,46,75,.05);
  --shadow-3: 0 14px 32px rgba(27,46,75,.12), 0 2px 6px rgba(27,46,75,.06);
  --shadow-4: 0 28px 60px rgba(27,46,75,.18), 0 5px 12px rgba(27,46,75,.07);
  --shadow-gold: 0 8px 22px rgba(240,165,0,.34);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --dur-fast: 130ms; --dur-base: 220ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: var(--fg-1); background: var(--bg-app); }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; color: var(--navy); margin: 0; }
p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; }
a { color: var(--navy-600); text-decoration: none; transition: color var(--dur-fast); }

/* ---- Typography helpers ---- */
.display-xl { font-size: 76px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.display-l  { font-size: 58px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.display-m  { font-size: 44px; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.lead { font-size: 18px; color: var(--fg-2); line-height: 1.55; }
.eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--gold-700); margin: 0; }
.text-gold { color: var(--gold) !important; }
.text-gold-700 { color: var(--gold-700) !important; }
.text-navy { color: var(--navy) !important; }
.text-navy-600 { color: var(--navy-600) !important; }
.fw-600 { font-weight: 600 !important; }
.fw-800 { font-weight: 800 !important; }
.bg-navy-tint { background-color: var(--navy-tint) !important; }
.bg-gold-tint { background-color: var(--gold-tint) !important; }
.bg-gold-tint2 { background-color: var(--gold-tint2) !important; }
.bg-gold { background-color: var(--gold) !important; }
.bg-navy { background-color: var(--navy) !important; }

/* Gold rule */
.gold-rule { display: block; width: 52px; height: 4px; border-radius: 99px; background: var(--gold); margin: 12px 0 0; }
.gold-rule.center { margin-left: auto; margin-right: auto; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ---- NAVBAR ---- */
.yfc-navbar { background: transparent; padding: 0; transition: background var(--dur-base) var(--ease-out); }
.yfc-navbar .container { height: 76px; display: flex; align-items: center; justify-content: space-between; }
.yfc-navbar.yfc-navbar--scrolled { background: rgba(249,247,244,.92) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-1); }
.yfc-navbar--light { background: var(--navy) !important; }
.yfc-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.yfc-mark { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.yfc-wordmark { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--navy); letter-spacing: -.01em; }
.yfc-navbar .nav-link { font-size: 15px; font-weight: 600; color: var(--ink-700); padding: 8px 14px; position: relative; transition: color var(--dur-fast); }
.yfc-navbar .nav-link:hover { color: var(--navy); }
.yfc-navbar .nav-link.active { color: var(--navy); font-weight: 700; }
.yfc-navbar .nav-link.active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; border-radius: 99px; background: var(--gold); }
/* Dark navbar (over hero) */
.yfc-navbar:not(.yfc-navbar--scrolled) .nav-link { color: rgba(255,255,255,.85); }
.yfc-navbar:not(.yfc-navbar--scrolled) .nav-link.active { color: #fff; }
.yfc-navbar:not(.yfc-navbar--scrolled) .yfc-wordmark { color: #fff; }

/* ---- HERO ---- */
.yfc-hero { position: relative; min-height: 92vh; background: var(--navy); overflow: hidden; margin-top: -76px; padding-top: 76px; }
.yfc-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,46,75,.55) 0%, rgba(27,46,75,.72) 55%, rgba(20,30,50,.92) 100%); }
.yfc-page-hero { position: relative; min-height: 300px; background: var(--navy); overflow: hidden; display: flex; align-items: center; margin-top: -76px; padding-top: 76px; }
.yfc-page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,46,75,.72) 0%, rgba(27,46,75,.85) 100%); }

/* ---- CARDS ---- */
.yfc-card { background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-1); box-shadow: var(--shadow-1); overflow: hidden; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.yfc-card-hover:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); }

/* ---- BUTTONS ---- */
.btn-gold { background: var(--gold); color: var(--navy); font-weight: 700; border: none; box-shadow: var(--shadow-1); }
.btn-gold:hover { background: var(--gold-600); color: var(--navy); box-shadow: var(--shadow-gold); }
.btn-navy { background: var(--navy); color: #fff; font-weight: 700; border: none; }
.btn-navy:hover { background: var(--navy-600); color: #fff; }
.btn-outline-navy { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); font-weight: 700; }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy); font-weight: 700; border: none; }
.btn-ghost:hover { background: var(--ink-100); color: var(--navy); }
.btn { border-radius: var(--radius-md); font-family: var(--font-sans); }
.btn-sm { font-size: 13.5px; }
.btn-lg { font-size: 16px; padding: 14px 28px; }
.rounded-pill.btn { border-radius: var(--radius-pill) !important; }

/* ---- BADGES ---- */
.yfc-badge-navy { background: var(--navy-tint); color: var(--navy); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); }
.badge { font-family: var(--font-sans); font-weight: 700; }
.bg-gold { background-color: var(--gold) !important; color: var(--navy) !important; }

/* ---- DATE BADGE ---- */
.yfc-date-badge { background: var(--gold); color: var(--navy); border-radius: var(--radius-md); padding: 7px 10px; text-align: center; line-height: 1; box-shadow: var(--shadow-2); min-width: 52px; font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

/* ---- FORMS ---- */
.yfc-input { border: 1px solid var(--border-2); border-radius: var(--radius-md); padding: 11px 14px; font-size: 14.5px; font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-surface); transition: border-color var(--dur-fast); outline: none; }
.yfc-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,165,0,.15); }
.form-control.yfc-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,165,0,.15); }
.form-select.yfc-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,165,0,.15); }
.yfc-input-transparent { border: 1px solid transparent; background: transparent; font-size: 14px; padding: 8px 10px; border-radius: var(--radius-md); font-family: var(--font-sans); color: var(--fg-1); }
.yfc-input-transparent:focus { border-color: var(--gold); background: var(--bg-surface); outline: none; }

/* ---- TABS ---- */
.yfc-tab { background: none; border: none; cursor: pointer; padding: 16px 18px; font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; color: var(--ink-600); position: relative; white-space: nowrap; transition: color var(--dur-fast); }
.yfc-tab:hover { color: var(--navy); }
.yfc-tab.active { color: var(--navy); font-weight: 700; }
.yfc-tab.active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 99px; background: var(--gold); }

/* ---- ADD BUTTON ---- */
.yfc-btn-add { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1.5px dashed var(--border-2); border-radius: var(--radius-md); padding: 9px 16px; color: var(--navy); font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: var(--font-sans); transition: all var(--dur-fast); }
.yfc-btn-add:hover { border-color: var(--gold); background: var(--gold-tint2); color: var(--navy); }

/* ---- FOOTER ---- */
.yfc-footer { background: var(--navy); color: rgba(255,255,255,.7); }
.yfc-footer-link { color: rgba(255,255,255,.7); text-decoration: none; font-size: 15px; }
.yfc-footer-link:hover { color: var(--gold); }
.yfc-social-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: #fff; transition: background var(--dur-fast); }
.yfc-social-btn:hover { background: var(--gold); color: var(--navy); }
.yfc-social-btn-light { width: 48px; height: 48px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--navy-tint); color: var(--navy); transition: all var(--dur-fast); font-size: 20px; }
.yfc-social-btn-light:hover { background: var(--gold); color: var(--navy); }

/* ---- CHATBOT WIDGET ---- */
.yfc-chatbot { position: fixed; bottom: 24px; right: 24px; z-index: 150; font-family: var(--font-sans); }
.yfc-fixed-member-bar { position: fixed; top: 16px; right: 24px; z-index: 1040; background: rgba(20,24,38,.7); backdrop-filter: blur(10px); padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,.12); }
.yfc-fixed-member-bar .nav-link { color: #fff; }
.yfc-fixed-member-bar .nav-link:hover { color: var(--gold); }
.yfc-chatbot-panel { width: 350px; height: 500px; background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-4); overflow: hidden; display: flex; flex-direction: column; margin-bottom: 16px; }
.yfc-chatbot-header { background: var(--navy); padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
.yfc-chatbot-messages { flex: 1; overflow-y: auto; padding: 16px; background: var(--ink-050); display: flex; flex-direction: column; gap: 10px; }
.yfc-bubble-user { max-width: 80%; padding: 11px 14px; border-radius: 16px 16px 4px 16px; font-size: 14px; line-height: 1.5; background: var(--gold); color: var(--navy); box-shadow: var(--shadow-1); }
.yfc-bubble-bot { max-width: 80%; padding: 11px 14px; border-radius: 16px 16px 16px 4px; font-size: 14px; line-height: 1.5; background: var(--bg-surface); color: var(--fg-1); border: 1px solid var(--border-1); box-shadow: var(--shadow-1); }
.yfc-chatbot-input { padding: 12px 14px; border-top: 1px solid var(--border-1); display: flex; gap: 8px; align-items: center; }
.yfc-chat-input { flex: 1; padding: 11px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-2); font-size: 14px; font-family: var(--font-sans); outline: none; }
.yfc-chat-input:focus { border-color: var(--gold); }
.yfc-chat-send-btn { width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--gold); color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.yfc-chat-send-btn:hover { background: var(--gold-600); }
.yfc-chatbot-fab { width: 62px; height: 62px; border-radius: 50%; border: none; cursor: pointer; background: var(--gold); color: var(--navy); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-3); animation: yfcPulse 2.4s infinite; transition: transform var(--dur-base) var(--ease-out); }
.yfc-chatbot-fab:hover { transform: scale(1.08); }
.yfc-quick-btn { text-align: left; padding: 9px 13px; border-radius: var(--radius-pill); border: 1px solid var(--navy); background: transparent; color: var(--navy); font-weight: 600; font-size: 13px; cursor: pointer; font-family: var(--font-sans); }
.yfc-quick-btn:hover { background: var(--navy-tint); }
.yfc-typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-400); animation: yfcBounce 1s infinite; display: inline-block; }

/* ---- ANIMATIONS ---- */
@keyframes yfcFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes yfcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes yfcPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(240,165,0,.5); } 50% { box-shadow: 0 0 0 14px rgba(240,165,0,0); } }
@keyframes yfcBounce { 0%,60%,100% { transform: translateY(0); opacity: .6; } 30% { transform: translateY(-5px); opacity: 1; } }
.yfc-fade-up { animation: yfcFadeUp .26s var(--ease-out) both; }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .display-xl { font-size: 48px !important; }
  .display-l  { font-size: 40px !important; }
  .display-m  { font-size: 34px !important; }
  .container { padding: 0 20px; }
}
@media (max-width: 480px) {
  .display-xl { font-size: 36px !important; }
  .yfc-chatbot-panel { width: calc(100vw - 32px); }
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); background-clip: padding-box; }
::selection { background: var(--gold-tint); color: var(--ink-900); }