/* droneblocks-2026 theme styles - initial port from redesign/wireframes/style.css
 *
 * Low-fidelity baseline. Brand colors on header + CTAs; everything else
 * grayscale. This is the wireframe stylesheet adapted as the theme's base.
 * Visual design upgrades land in a separate pass - keep edits here focused
 * on structure, not aesthetics, until the IA is locked.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1d1d1f;
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
code { font-family: 'SF Mono', Menlo, monospace; font-size: 0.85em; background: #f5f5f7; padding: 2px 6px; border-radius: 4px; }

/* ── HEADER ──
 * Selectors scoped under body.theme-droneblocks-2026 to win against
 * WooCommerce / block-library styles (loaded later in the cascade and
 * more specific by default). The sticky rule needs a tall-enough container
 * AND no overflow on ancestors - the html/body rule below covers that. */
html, body.theme-droneblocks-2026 {
  overflow-x: clip;
  overflow-y: visible;
}
body.theme-droneblocks-2026 header.site {
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  position: sticky;
  top: 0;
  z-index: 1000;
}
header.site .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
}
header.site .logo {
  font-weight: 800;
  font-size: 1.05rem;
  color: #003A5D;
  letter-spacing: -0.01em;
  padding-right: 4px;
}
header.site nav.primary {
  display: flex;
  gap: 22px;
  align-items: center;
}
header.site nav.primary a {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1d1d1f;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
header.site nav.primary a:hover {
  color: #00A7E1;
  border-bottom-color: #00A7E1;
}
header.site nav.primary a.active {
  color: #003A5D;
  border-bottom-color: #003A5D;
}
header.site .cta-group {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}
header.site .cta-ghost,
header.site .cta-primary {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  transition: opacity 0.15s, background 0.15s;
}
header.site .cta-ghost {
  background: transparent;
  border: 1px solid #d1d1d6;
  color: #1d1d1f;
}
header.site .cta-ghost:hover { background: #f5f5f7; }
header.site .cta-primary {
  background: #003A5D;
  color: #fff;
}
header.site .cta-primary:hover { background: #00567A; }

/* ── PAGE WRAPPER ──
 * Target #content specifically - bare `main` loses to WooCommerce rules. */
body.theme-droneblocks-2026 main#content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 32px 32px;
  display: block;
}

main .breadcrumb {
  font-size: 0.78rem;
  color: #86868b;
  margin-bottom: 12px;
}
main .breadcrumb a { color: #6e6e73; }
main .breadcrumb a:hover { color: #00A7E1; }

body.theme-droneblocks-2026 main#content > h1.page-title {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 8px 0 6px;
  line-height: 1.1;
}
body.theme-droneblocks-2026 main#content > p.page-summary {
  font-size: 1.05rem;
  color: #6e6e73;
  margin-bottom: 28px;
  max-width: 720px;
  line-height: 1.5;
}

/* ── WIREFRAME BOXES ── */
.wf {
  background: #f5f5f7;
  border: 1px dashed #d1d1d6;
  border-radius: 12px;
  padding: 28px 24px;
  margin: 14px 0;
  position: relative;
}
.wf .wf-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #86868b;
  margin-bottom: 8px;
}
.wf .wf-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 6px;
}
.wf .wf-note {
  font-size: 0.85rem;
  color: #6e6e73;
  line-height: 1.5;
}
.wf.tall { padding: 60px 24px; }
.wf.hero { padding: 64px 32px; background: linear-gradient(135deg, #f5f5f7 0%, #e8edf2 100%); border-color: #c9d4dc; }
.wf.hero .wf-title { font-size: 1.4rem; }
.wf.brand { background: linear-gradient(135deg, #003A5D 0%, #00A7E1 100%); color: #fff; border-color: transparent; }
.wf.brand .wf-label { color: rgba(255,255,255,0.7); }
.wf.brand .wf-title { color: #fff; font-size: 1.4rem; }
.wf.brand .wf-note { color: rgba(255,255,255,0.85); }

/* ── GRIDS ── */
/* Scoped away from legacy pages on purpose. ".row" is Bootstrap's name too, and
   legacy ACF pages load Bootstrap. Bootstrap's own .row sets display and margins
   so those get overridden, but it never sets gap - so an unscoped gap here
   survives and adds 14px between columns that are sized to fill the row exactly.
   Two col-lg-6 then measure 651+14+651 against a 1302 row and the second one
   wraps, turning every legacy two-column layout into a stack. */
body:not(.legacy-acf-page) .row { display: grid; gap: 14px; margin: 14px 0; }
.row.c2 { grid-template-columns: 1fr 1fr; }
.row.c3 { grid-template-columns: repeat(3, 1fr); }
.row.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) {
  .row.c3, .row.c4 { grid-template-columns: 1fr 1fr; }
}

/* ── SECTION HEADER (between wireframe blocks) ── */
.section-header {
  margin-top: 36px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.section-header h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.section-header .section-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #00A7E1;
}

/* ── PURCHASE / PRICING CARDS (used on hardware pages) ── */
.purchase-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 18px 0;
}
.purchase-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}
.purchase-card.featured { border-color: #00A7E1; box-shadow: 0 0 0 3px rgba(0, 167, 225, 0.1); }
.purchase-card .purchase-tag {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #86868b;
  margin-bottom: 4px;
}
.purchase-card.featured .purchase-tag { color: #00A7E1; }
.purchase-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.purchase-card .price {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 8px 0 2px;
  color: #1d1d1f;
}
.purchase-card .price-note {
  font-size: 0.72rem;
  color: #86868b;
  margin-bottom: 12px;
}
.purchase-card .audience {
  font-size: 0.78rem;
  color: #6e6e73;
  margin-bottom: 12px;
  font-style: italic;
}
.purchase-card ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.purchase-card ul li {
  font-size: 0.82rem;
  color: #424245;
  padding: 5px 0 5px 18px;
  position: relative;
}
.purchase-card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #34c759;
  font-weight: 700;
}
.purchase-card .purchase-cta {
  margin-top: auto;
  text-align: center;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}
.purchase-card .purchase-cta.primary { background: #003A5D; color: #fff; }
.purchase-card .purchase-cta.secondary { background: #f5f5f7; color: #1d1d1f; border: 1px solid #d1d1d6; }
@media (max-width: 800px) {
  .purchase-row { grid-template-columns: 1fr; }
}

/* ── TIER CARDS (for curriculum) ── */
.tier-card {
  background: #f5f5f7;
  border-radius: 16px;
  padding: 22px 26px;
  margin: 12px 0;
  border-left: 4px solid #007aff;
}
.tier-card.t1 { border-left-color: #007aff; }
.tier-card.t2 { border-left-color: #34c759; }
.tier-card.t3 { border-left-color: #ff9500; }
.tier-card.t4 { border-left-color: #af52de; }
.tier-card .tier-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #007aff;
  margin-bottom: 4px;
}
.tier-card.t2 .tier-label { color: #34c759; }
.tier-card.t3 .tier-label { color: #ff9500; }
.tier-card.t4 .tier-label { color: #af52de; }
.tier-card h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.tier-card .tier-mission {
  font-size: 0.92rem;
  font-style: italic;
  color: #424245;
  margin-bottom: 6px;
}
.tier-card .tier-meta {
  font-size: 0.74rem;
  color: #86868b;
  margin-top: 8px;
}

/* ── MISSION BANNER ── */
.mission-banner {
  background: linear-gradient(135deg, #003A5D 0%, #00A7E1 100%);
  color: #fff;
  border-radius: 16px;
  padding: 36px 40px;
  margin: 20px 0;
  text-align: center;
}
.mission-banner .label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.7;
  margin-bottom: 10px;
}
.mission-banner .mission {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.mission-banner .sub {
  font-size: 0.92rem;
  opacity: 0.85;
  margin-top: 8px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* ── FOOTER ── */
footer.site {
  background: #f5f5f7;
  border-top: 1px solid #e5e5e5;
  margin-top: 80px;
  padding: 48px 32px 32px;
}
footer.site .inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 36px;
}
@media (max-width: 800px) {
  footer.site .inner { grid-template-columns: 1fr 1fr; }
}
footer.site .brand .logo {
  font-weight: 800;
  font-size: 1.05rem;
  color: #003A5D;
  margin-bottom: 8px;
}
footer.site .brand .tagline {
  font-size: 0.78rem;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 4px;
}
footer.site .brand .tagline-sub {
  font-size: 0.72rem;
  color: #86868b;
  line-height: 1.5;
}
footer.site .col h4 {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #86868b;
  margin-bottom: 10px;
}
footer.site .col ul { list-style: none; }
footer.site .col ul li { margin: 6px 0; }
footer.site .col ul li a {
  font-size: 0.82rem;
  color: #424245;
}
footer.site .col ul li a:hover { color: #00A7E1; }
footer.site .legal {
  max-width: 1200px;
  margin: 32px auto 0;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
  font-size: 0.72rem;
  color: #86868b;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
footer.site .legal a { color: #86868b; }
footer.site .legal a:hover { color: #00A7E1; }

/* ── STUB-PAGE NOTICE ── */
.stub-notice {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 18px 22px;
  margin: 14px 0 28px;
  font-size: 0.85rem;
  color: #92400e;
}
.stub-notice strong { color: #78350f; }

/* ── TRIAL CTA (curriculum tier hubs) ──────────────────────────────
 * Functional, brand-colored CTA that appears at the bottom of each
 * curriculum tier page. Link is real and carries UTM params so the
 * subdomain hop to my.droneblocks.io stays attributable per-tier.
 */
.trial-cta {
  background: linear-gradient(135deg, #003A5D 0%, #00567A 100%);
  color: #fff;
  border-radius: 16px;
  padding: 36px 40px;
  margin: 36px 0 16px;
}
.trial-cta-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #5ac8fa;
  margin-bottom: 12px;
}
.trial-cta-headline {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 14px;
  max-width: 720px;
}
.trial-cta-narrative {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  margin: 0 0 24px;
  max-width: 660px;
  line-height: 1.6;
}
.trial-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.trial-cta-primary,
.trial-cta-secondary {
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  display: inline-block;
}
.trial-cta-primary {
  background: #fff;
  color: #003A5D;
}
.trial-cta-primary:hover { background: #f5f5f7; }
.trial-cta-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  font-weight: 500;
}
.trial-cta-secondary:hover { border-color: #fff; }
.trial-cta-utm-note {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  margin-top: 6px;
}
.trial-cta-utm-note code {
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: 4px;
}
@media (max-width: 700px) {
  .trial-cta { padding: 28px 24px; }
  .trial-cta-headline { font-size: 1.4rem; }
}

/* ── WP-specific overrides ── */

/* Primary nav: wireframe used direct <a>; theme renders <ul><li><a> via wp_nav_menu
 * or the fallback. Flatten the list so it matches the wireframe row layout. */
header.site nav.primary ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 22px;
  align-items: center;
}
header.site nav.primary ul li { margin: 0; }
header.site nav.primary .current-menu-item > a,
header.site nav.primary .current_page_item > a {
  color: #003A5D;
  border-bottom-color: #003A5D;
}

/* Page article (single page template) - generic container. */
.page-article { padding-top: 8px; }
.page-article .page-header { margin-bottom: 24px; }

/* 404 */
.error-404 { padding: 64px 0; text-align: center; }
.error-404 h1 { font-size: 2.4rem; font-weight: 800; margin-bottom: 12px; }
.error-404 p { color: #6e6e73; margin-bottom: 16px; }
.error-404 .cta-primary {
  display: inline-block; padding: 10px 20px; border-radius: 8px;
  background: #003A5D; color: #fff; font-weight: 600;
}

/* WP admin bar offset so sticky header doesn't slide under the bar */
body.admin-bar.theme-droneblocks-2026 header.site { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar.theme-droneblocks-2026 header.site { top: 46px; }
}