/*
Theme Name:   ZenbuSoft
Theme URI:    https://www.zenbusoft.com
Description:  Apple-HIG-inspired child theme — mobile-first, system fonts, frosted glass, dark-mode aware.
Author:       ZenbuSoft
Template:     twentytwentyfive
Version:      2.0.0
Text Domain:  zenbusoft
*/

/* =================================================================
   1. DESIGN TOKENS  (Apple-HIG-inspired)
   ================================================================= */
:root {
  /* Typography — SF Pro with sensible fallback chain */
  --zb-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --zb-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* iOS type scale (rounded) */
  --zb-fs-caption2: 11px;
  --zb-fs-caption1: 12px;
  --zb-fs-footnote: 13px;
  --zb-fs-subhead:  15px;
  --zb-fs-body:     17px;
  --zb-fs-headline: 17px;
  --zb-fs-title3:   20px;
  --zb-fs-title2:   22px;
  --zb-fs-title1:   28px;
  --zb-fs-largetitle: 34px;
  --zb-fs-hero:     clamp(34px, 6vw, 56px);

  /* 8pt spacing grid */
  --zb-s-1: 4px;
  --zb-s-2: 8px;
  --zb-s-3: 12px;
  --zb-s-4: 16px;
  --zb-s-5: 24px;
  --zb-s-6: 32px;
  --zb-s-7: 48px;
  --zb-s-8: 64px;
  --zb-s-9: 96px;

  /* Corner radii */
  --zb-r-xs: 6px;
  --zb-r-sm: 10px;
  --zb-r-md: 14px;
  --zb-r-lg: 20px;
  --zb-r-xl: 28px;
  --zb-r-pill: 999px;

  /* Light-mode colors (Apple System Light) */
  --zb-bg:           #ffffff;
  --zb-bg-elev:      #f5f5f7;          /* sheet / card */
  --zb-bg-elev-2:    #ffffff;
  --zb-fg:           #1d1d1f;
  --zb-fg-2:         #424245;
  --zb-fg-muted:     #6e6e73;
  --zb-border:       rgba(0, 0, 0, 0.10);
  --zb-border-soft:  rgba(0, 0, 0, 0.06);
  --zb-accent:       #0071e3;          /* Apple blue */
  --zb-accent-hover: #0077ed;
  --zb-tint-bg:      rgba(0, 113, 227, 0.10);
  --zb-success:      #34c759;
  --zb-warning:      #ff9500;
  --zb-danger:       #ff3b30;

  /* Shadows (soft, layered) */
  --zb-shadow-sm:  0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
  --zb-shadow-md:  0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --zb-shadow-lg:  0 24px 48px -16px rgba(0,0,0,0.18), 0 8px 16px -8px rgba(0,0,0,0.08);
  --zb-shadow-xl:  0 40px 80px -24px rgba(0,113,227,0.18), 0 16px 32px -12px rgba(0,0,0,0.12);

  /* Motion */
  --zb-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --zb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --zb-max-w: 1080px;
}

/* Dark mode (auto, respects user preference) */
@media (prefers-color-scheme: dark) {
  :root {
    --zb-bg:           #000000;
    --zb-bg-elev:      #1c1c1e;
    --zb-bg-elev-2:    #2c2c2e;
    --zb-fg:           #f5f5f7;
    --zb-fg-2:         #d2d2d7;
    --zb-fg-muted:     #8e8e93;
    --zb-border:       rgba(255, 255, 255, 0.12);
    --zb-border-soft:  rgba(255, 255, 255, 0.06);
    --zb-accent:       #0a84ff;
    --zb-accent-hover: #409cff;
    --zb-tint-bg:      rgba(10, 132, 255, 0.18);
    --zb-shadow-md:  0 4px 12px rgba(0,0,0,0.35);
    --zb-shadow-lg:  0 24px 48px -16px rgba(0,0,0,0.55);
  }
}

/* =================================================================
   2. RESET / BASE
   ================================================================= */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--zb-font);
  font-size: var(--zb-fs-body);
  line-height: 1.5;
  color: var(--zb-fg);
  background: var(--zb-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }

h1, h2, h3, h4 { font-family: var(--zb-font-display); letter-spacing: -0.02em; line-height: 1.15; color: var(--zb-fg); margin: 0 0 var(--zb-s-3); font-weight: 700; }
h1 { font-size: var(--zb-fs-largetitle); }
h2 { font-size: var(--zb-fs-title1); }
h3 { font-size: var(--zb-fs-title3); }
p  { margin: 0 0 var(--zb-s-4); }

a { color: var(--zb-accent); text-decoration: none; transition: color .15s var(--zb-ease); }
a:hover { color: var(--zb-accent-hover); }

::selection { background: var(--zb-tint-bg); color: var(--zb-fg); }

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

/* Generous safe-area awareness for notched iPhones / iPads */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* Touch targets ≥ 44pt */
button, .wp-block-button__link, .zb-btn, input[type="submit"] {
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

/* =================================================================
   3. NAV / HEADER  (frosted glass, sticky)
   ================================================================= */
.wp-block-template-part[data-wp-context],
header.wp-block-template-part,
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--zb-bg) 80%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--zb-border-soft);
}

/* Block-theme navigation styling */
.wp-block-navigation .wp-block-navigation-item__content {
  font-size: var(--zb-fs-subhead);
  font-weight: 500;
  color: var(--zb-fg-2);
  padding: var(--zb-s-2) var(--zb-s-3);
  border-radius: var(--zb-r-sm);
  transition: background .15s var(--zb-ease), color .15s var(--zb-ease);
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
  background: var(--zb-tint-bg);
  color: var(--zb-accent);
}

/* Mobile nav: chunky touch targets, full-bleed overlay */
@media (max-width: 800px) {
  .wp-block-navigation__responsive-container.is-menu-open {
    background: color-mix(in srgb, var(--zb-bg) 92%, transparent);
    backdrop-filter: blur(24px);
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: var(--zb-fs-title3);
    padding: var(--zb-s-4) var(--zb-s-5);
  }
}

/* =================================================================
   4. HERO  (HIG-style — generous, centered, restrained)
   ================================================================= */
.zb-hero {
  margin: var(--zb-s-5) 0 var(--zb-s-7);
  padding: clamp(48px, 9vw, 96px) clamp(20px, 5vw, 48px);
  background: linear-gradient(180deg, var(--zb-bg-elev), var(--zb-bg));
  border-radius: var(--zb-r-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.zb-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(800px 400px at 50% 0%, var(--zb-tint-bg), transparent 70%);
  pointer-events: none;
}
.zb-hero h1 {
  font-size: var(--zb-fs-hero);
  font-weight: 700;
  letter-spacing: -0.025em;
  background: linear-gradient(180deg, var(--zb-fg) 0%, color-mix(in srgb, var(--zb-fg) 80%, var(--zb-accent)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--zb-s-4);
}
.zb-hero p {
  font-size: clamp(var(--zb-fs-headline), 2vw, var(--zb-fs-title3));
  color: var(--zb-fg-muted);
  max-width: 640px; margin: 0 auto var(--zb-s-5);
}
.zb-hero .zb-cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--zb-s-2);
  padding: 14px 28px;
  background: var(--zb-accent);
  color: #fff;
  border-radius: var(--zb-r-pill);
  font-weight: 600;
  font-size: var(--zb-fs-headline);
  transition: transform .15s var(--zb-ease-spring), background .15s var(--zb-ease), box-shadow .2s var(--zb-ease);
  box-shadow: var(--zb-shadow-md);
}
.zb-hero .zb-cta:hover {
  background: var(--zb-accent-hover);
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--zb-shadow-lg);
  color: #fff;
}
.zb-hero .zb-cta:active { transform: scale(0.98); }

/* =================================================================
   5. CARD GRID (services, products)
   ================================================================= */
.zb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--zb-s-4);
  margin: var(--zb-s-5) 0;
}
.zb-card {
  background: var(--zb-bg-elev);
  border: 1px solid var(--zb-border-soft);
  border-radius: var(--zb-r-md);
  padding: var(--zb-s-5);
  transition: transform .2s var(--zb-ease-spring), box-shadow .2s var(--zb-ease), border-color .15s var(--zb-ease);
}
.zb-card:hover {
  transform: translateY(-4px);
  border-color: var(--zb-border);
  box-shadow: var(--zb-shadow-lg);
}
.zb-card h3 { color: var(--zb-fg); margin: var(--zb-s-2) 0; }
.zb-card p  { color: var(--zb-fg-2); font-size: var(--zb-fs-subhead); margin: 0; }
.zb-card .zb-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--zb-r-sm);
  background: var(--zb-tint-bg);
  color: var(--zb-accent);
  font-size: 22px;
  margin-bottom: var(--zb-s-2);
}

/* =================================================================
   6. CONTACT SECTION
   ================================================================= */
.zb-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--zb-s-6);
  margin: var(--zb-s-5) 0;
}
@media (max-width: 720px) { .zb-contact-grid { grid-template-columns: 1fr; } }
.zb-contact-info p { color: var(--zb-fg-2); margin: var(--zb-s-2) 0; }
.zb-contact-info strong { color: var(--zb-fg); }

.zb-map {
  width: 100%; height: clamp(280px, 50vw, 460px);
  border: 0;
  border-radius: var(--zb-r-md);
  box-shadow: var(--zb-shadow-md);
}

/* =================================================================
   7. BUTTONS (Apple style: filled / tinted / plain)
   ================================================================= */
.zb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--zb-s-2);
  padding: 10px 18px;
  border-radius: var(--zb-r-sm);
  font-family: inherit;
  font-size: var(--zb-fs-subhead);
  font-weight: 600;
  cursor: pointer;
  border: 0;
  transition: all .15s var(--zb-ease);
  text-decoration: none;
}
.zb-btn-primary { background: var(--zb-accent); color: #fff; }
.zb-btn-primary:hover { background: var(--zb-accent-hover); color: #fff; }
.zb-btn-tinted  { background: var(--zb-tint-bg); color: var(--zb-accent); }
.zb-btn-tinted:hover { background: color-mix(in srgb, var(--zb-tint-bg) 70%, var(--zb-accent) 12%); }
.zb-btn-plain   { background: transparent; color: var(--zb-accent); padding: 10px 12px; }
.zb-btn-plain:hover { background: var(--zb-tint-bg); }

/* =================================================================
   8. FOOTER CREDIT (global, Apple-style subtle bar)
   ================================================================= */
.zb-credit {
  margin-top: var(--zb-s-7);
  padding: var(--zb-s-4) var(--zb-s-4) calc(var(--zb-s-4) + env(safe-area-inset-bottom));
  text-align: center;
  font-size: var(--zb-fs-caption1);
  color: var(--zb-fg-muted);
  border-top: 1px solid var(--zb-border-soft);
  background: var(--zb-bg-elev);
}
.zb-credit a {
  color: var(--zb-fg-2);
  font-weight: 600;
}
.zb-credit a::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 6px; vertical-align: middle;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zb-accent), #a855f7);
  box-shadow: 0 0 8px color-mix(in srgb, var(--zb-accent) 70%, transparent);
}

/* =================================================================
   9. WP CONTENT TYPOGRAPHY (so posts/pages inherit HIG feel)
   ================================================================= */
.entry-content, .wp-site-blocks {
  font-size: var(--zb-fs-body);
  color: var(--zb-fg);
}
.entry-content h1, .entry-content h2, .entry-content h3 { margin-top: var(--zb-s-6); }
.entry-content ul, .entry-content ol { padding-left: var(--zb-s-5); }
.entry-content li { margin: var(--zb-s-2) 0; color: var(--zb-fg-2); }
.entry-content blockquote {
  border-left: 3px solid var(--zb-accent);
  background: var(--zb-bg-elev);
  border-radius: var(--zb-r-sm);
  padding: var(--zb-s-3) var(--zb-s-4);
  margin: var(--zb-s-4) 0;
  color: var(--zb-fg-2);
}

/* =================================================================
   10. RESPONSIVE TWEAKS
   ================================================================= */
@media (max-width: 480px) {
  .zb-hero { padding: var(--zb-s-6) var(--zb-s-4); border-radius: var(--zb-r-lg); }
  .zb-hero .zb-cta { width: 100%; max-width: 320px; }
  .zb-card { padding: var(--zb-s-4); }
  h1 { font-size: var(--zb-fs-title1); }
  h2 { font-size: var(--zb-fs-title2); }
}

/* Reduce motion if requested */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}