/*
Theme Name: Sunny Nocturne
Theme URI: https://floridachatguide.com
Author: Entropy Media
Description: Flagship theme for FloridaChatGuide.com — the "Sunny" AI concierge, built on the Nocturne dark design system. Reproduces the Sunny (consumer) and Platform (B2B) pages.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: sunny-nocturne
*/

/* The design-system tokens + component classes live in assets/nocturne.css,
   enqueued by functions.php. This file carries only theme-page layout helpers
   that are specific to FCG's two pages and not part of the shared DS. */

/* ---- shared layout helpers ---- */
.wrap { max-width: 1200px; margin: 0 auto; }
.page-shell { min-height: 100vh; display: flex; flex-direction: column;
  background: var(--color-bg); color: var(--color-text); }

/* sticky translucent header (matches mockup inline styles) */
.site-nav {
  padding: var(--space-4) var(--space-8);
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--color-divider);
}
.site-nav .nav-brand { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); }
.site-nav .nav-brand img { width: 30px; height: 30px; }
.site-nav a { white-space: nowrap; }

/* section rhythm */
.band { background: var(--color-neutral-900); }
.section-pad { padding: calc(var(--space-8) * 3) var(--space-8); }

/* ---- Sunny (home) hero grid ---- */
.sunny-main {
  flex: 1; display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(400px, 560px);
  gap: calc(var(--space-8) * 2.4); align-items: start;
  max-width: 1200px; width: 100%; margin: 0 auto;
  padding: calc(var(--space-8) * 2.4) var(--space-8) var(--space-8);
}
.sunny-chat-col { position: sticky; top: 96px; }
.eyebrow { color: var(--color-accent); margin: 0 0 var(--space-6); }
.hero-h1 { font-size: clamp(38px, 4.6vw, 56px); margin: 0 0 var(--space-6); text-wrap: balance; }
.hero-lede { font-size: 17px; color: var(--color-neutral-400); max-width: 46ch; margin: 0 0 var(--space-8); text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-6) var(--space-8); }
.skill-grid p.k { margin: 0 0 var(--space-1); font-family: var(--font-heading); font-weight: 500; font-size: 15px; }
.skill-grid p.d { margin: 0; font-size: 13px; color: var(--color-neutral-500); }

/* ---- Platform page ---- */
.pf-hero {
  max-width: 1200px; margin: 0 auto;
  padding: calc(var(--space-8) * 2.6) var(--space-8) calc(var(--space-8) * 2);
  display: grid; grid-template-columns: minmax(320px, 1.1fr) minmax(300px, .9fr);
  gap: calc(var(--space-8) * 2.4); align-items: center;
}
.pf-grid-2 { max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.05fr);
  gap: calc(var(--space-8) * 2.4); align-items: start; }
.card-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.step-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-8); }
.step { border-top: 1px solid var(--color-accent); padding-top: var(--space-4); }
.step .num { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: 22px; color: var(--color-accent-400); }
.step .t { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-weight: 500; font-size: 17px; }
.step .b { margin: 0; font-size: 14px; color: var(--color-neutral-400); }
.price-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--space-4); align-items: stretch; }
.price-cols .card { padding: var(--space-8); gap: var(--space-6); }
.price-amt { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: 40px; line-height: 1; }
.price-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); font-size: 14px; color: var(--color-neutral-400); flex: 1; }
.price-feature { box-shadow: 0 0 0 1px var(--color-accent), 0 6px 18px rgba(0,0,0,0.55); }
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-8) calc(var(--space-8) * 1.8); }
.faq-grid .q { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-weight: 500; font-size: 16px; }
.faq-grid .a { margin: 0; font-size: 14px; color: var(--color-neutral-400); }
.clients-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-4); }
.dot-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.dot-avatar.lg { width: 34px; height: 34px; margin-bottom: var(--space-2); }

/* ---- footer ---- */
.site-foot { padding: calc(var(--space-8) * 1.4) var(--space-8); font-size: 13px; color: var(--color-neutral-500); }
.site-foot .row { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); justify-content: space-between; align-items: center; }
.site-foot .brand { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text); font-family: var(--font-heading); font-weight: 500; }
.site-foot .brand img { width: 22px; height: 22px; }
.site-foot .brand:hover { color: var(--color-accent); }
.site-foot .foot-links { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.site-foot .foot-legal {
	margin-top: var(--space-6); padding-top: var(--space-6);
	border-top: 1px solid var(--color-divider);
	font-size: 12px; color: var(--color-neutral-600);
	align-items: baseline;
}
.site-foot .foot-legal a { color: var(--color-neutral-400); }
.site-foot .foot-legal a:hover { color: var(--color-accent); }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .sunny-main, .pf-hero, .pf-grid-2 { grid-template-columns: 1fr; }
  .sunny-chat-col { position: static; }
  .site-nav { gap: var(--space-3); flex-wrap: wrap; }
  .site-nav .hide-sm { display: none; }
}