/*
Theme Name:  First Outbound — Hybrid Child
Theme URI:   https://1stoutbound.com
Description: Child theme of GeneratePress untuk First Outbound. Menyediakan template pillar, brand identity (navy + orange + putih), schema markup, dan CTA WhatsApp terintegrasi.
Author:      First Outbound
Author URI:  https://1stoutbound.com
Template:    generatepress
Version:     1.0.0
Text Domain: first-outbound
*/

/* ──────────────────────────────────────────────────────────
   1. Brand tokens (CSS custom properties)
   ────────────────────────────────────────────────────────── */
:root {
    --fo-navy-50:  #eef2f8;
    --fo-navy-100: #d4dcec;
    --fo-navy-500: #1e3a5f;
    --fo-navy-700: #0d2c54;
    --fo-navy-900: #061a36;

    --fo-orange-100: #fde5d3;
    --fo-orange-400: #ff9650;
    --fo-orange-500: #f47b20;
    --fo-orange-600: #d6630e;

    --fo-white:    #ffffff;
    --fo-gray-50:  #f9fafb;
    --fo-gray-100: #f3f4f6;
    --fo-gray-200: #e5e7eb;
    --fo-gray-400: #9ca3af;
    --fo-gray-500: #6b7280;
    --fo-gray-700: #374151;
    --fo-gray-900: #111827;

    --fo-bg:         var(--fo-white);
    --fo-text:       #1f2937;
    --fo-text-muted: var(--fo-gray-500);
    --fo-heading:    var(--fo-navy-900);
    --fo-link:       var(--fo-orange-500);
    --fo-link-hover: var(--fo-orange-600);
    --fo-border:     var(--fo-gray-200);

    --fo-font-heading: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --fo-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

    --fo-space-1:  4px;
    --fo-space-2:  8px;
    --fo-space-3:  12px;
    --fo-space-4:  16px;
    --fo-space-5:  24px;
    --fo-space-6:  32px;
    --fo-space-8:  48px;
    --fo-space-10: 64px;
    --fo-space-12: 96px;

    --fo-radius-sm: 6px;
    --fo-radius:    10px;
    --fo-radius-lg: 16px;

    --fo-shadow-sm: 0 1px 2px rgba(13,44,84,.06);
    --fo-shadow:    0 4px 16px rgba(13,44,84,.08);
    --fo-shadow-lg: 0 12px 32px rgba(13,44,84,.12);

    --fo-container:        1140px;
    --fo-container-narrow: 720px;
}

/* ──────────────────────────────────────────────────────────
   2. Base typography overrides (sitewide, lightweight)
   ────────────────────────────────────────────────────────── */
body {
    font-family: var(--fo-font-body);
    color: var(--fo-text);
    background: var(--fo-bg);
}
h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title {
    font-family: var(--fo-font-heading);
    color: var(--fo-heading);
    font-weight: 700;
    line-height: 1.25;
}
a { color: var(--fo-link); }
a:hover, a:focus { color: var(--fo-link-hover); }

/* ──────────────────────────────────────────────────────────
   3. Sitewide brand tweaks
   ────────────────────────────────────────────────────────── */
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li.current-menu-item > a {
    color: var(--fo-orange-500);
}
.button, button, input[type="submit"], .wp-block-button__link {
    background-color: var(--fo-orange-500);
    color: var(--fo-white);
    border-radius: var(--fo-radius-sm);
}
.button:hover, button:hover, input[type="submit"]:hover, .wp-block-button__link:hover {
    background-color: var(--fo-orange-600);
    color: var(--fo-white);
}

/* ──────────────────────────────────────────────────────────
   4. Sticky/floating WhatsApp button (sitewide)
   Pill-shape with label on desktop, circle on mobile.
   ────────────────────────────────────────────────────────── */
.fo-fab-wa {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
    background: #25d366;
    color: #fff;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px 14px 18px;
    box-shadow: 0 14px 32px rgba(37,211,102,.45), 0 4px 12px rgba(0,0,0,.2);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    font-family: var(--fo-font-body);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    border: 0;
    cursor: pointer;
}
.fo-fab-wa::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    background: rgba(37,211,102,.35);
    z-index: -1;
    animation: fo-fab-pulse 2.4s ease-out infinite;
}
@keyframes fo-fab-pulse {
    0%   { transform: scale(.95); opacity: .8; }
    70%  { transform: scale(1.18); opacity: 0; }
    100% { transform: scale(.95); opacity: 0; }
}
.fo-fab-wa:hover {
    background: #1eb858;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(37,211,102,.55), 0 4px 12px rgba(0,0,0,.25);
}
.fo-fab-wa:hover::before { animation-play-state: paused; }
.fo-fab-wa svg { width: 26px; height: 26px; fill: #fff; flex-shrink: 0; }
.fo-fab-wa-label { white-space: nowrap; }
@media (max-width: 600px) {
    .fo-fab-wa {
        padding: 0;
        width: 58px;
        height: 58px;
        justify-content: center;
        right: 16px;
        bottom: 16px;
    }
    .fo-fab-wa-label { display: none; }
    .fo-fab-wa svg { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .fo-fab-wa::before { animation: none; }
}