/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 13 2026 | 23:22:16 */
* ============================================================
   SLEEPLESS LIGHTS — BUILDS PAGES CSS
   Simple Custom CSS and JS plugin
   ============================================================ */


/* ── GLOBAL TYPOGRAPHY OVERRIDES ─────────────────────────────
   Gutenberg injects its own font stacks. These enforce
   Georgia and Courier New across all block types.
   ──────────────────────────────────────────────────────────── */

.entry-content p,
.entry-content li,
.entry-content td,
.entry-content blockquote {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #fdf7e3;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: #fdf7e3;
  line-height: 1.15;
}

.entry-content h1 { font-size: 48px; }
.entry-content h2 { font-size: 32px; }
.entry-content h3 { font-size: 22px; }
.entry-content h4 { font-size: 16px; }


/* ── HERO SECTION ─────────────────────────────────────────────
   Applied to the outermost Group block on each page.
   ──────────────────────────────────────────────────────────── */

.sl-hero {
  // background: #001D3D;
  // border-bottom: 1px solid #003566;
  padding: 3rem 2rem 2.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.sl-h1 {
	margin-top: 0;
}


/* ── BREADCRUMB ───────────────────────────────────────────────
   Small monospace nav path at top of hero.
   ──────────────────────────────────────────────────────────── */

.sl-breadcrumb,
.sl-breadcrumb p {
  font-family: 'Arial', monospace;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #CCA000;
  opacity: 0.7;
  margin-bottom: 1.5rem;
}

.sl-breadcrumb a,
.sl-breadcrumb p a {
  color: #CCA000;
  text-decoration: none;
}

.sl-breadcrumb a:hover,
.sl-breadcrumb p a:hover {
  opacity: 1;
  color: #F0CB46;
}


/* ── EYEBROW / LABEL ──────────────────────────────────────────
   Monospace uppercase label used as category/series identifier
   above page titles, and as section divider labels.
   ──────────────────────────────────────────────────────────── */

.sl-label,
.sl-label p {
  font-family: 'Arial', monospace;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #CCA000;
  margin-bottom: 0.75rem;
	padding-top: 11px;
	margin-left: 16px;
}


/* ── SECTION DIVIDER LABEL ────────────────────────────────────
   Label with a gold rule extending to the right.
   Requires display:flex — do not nest inside a flex container
   that overrides this.
   ──────────────────────────────────────────────────────────── */

.sl-section-label,
.sl-section-label p {
  font-family: 'Georgia';
  font-size: 1rem;
	font-style: italic;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #CCA000;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.5rem;
}

.sl-section-label::after,
.sl-section-label p::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #003566;
}


/* ── GOLD DIVIDER RULE ────────────────────────────────────────
   Short centered gold bar used in the hero.
   Applied to a Separator block.
   ──────────────────────────────────────────────────────────── */

.sl-divider,
.sl-divider hr {
  max-width: 48px;
  height: 2px;
  background: #CCA000 !important;
  border: none;
  opacity: 0.6;
  margin: 1.5rem auto;
}


/* ── HERO META ROW ────────────────────────────────────────────
   The 4-column stat strip at the bottom of the hero.
   Applied to a Columns block.
   ──────────────────────────────────────────────────────────── */

.sl-meta-row {
  border-top: 1px solid #003566;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}

.sl-meta-row .wp-block-column {
  display: flex;
  flex-direction: column;
  gap: 3px;
}


/* ── META LABEL & VALUE ───────────────────────────────────────
   Used inside sl-meta-row columns and stat strips.
   ──────────────────────────────────────────────────────────── */

.sl-meta-label,
.sl-meta-label p {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(253,247,227,0.35);
  margin: 0;
}

.sl-meta-value,
.sl-meta-value p {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: #F0CB46;
  margin: 0;
}


/* ── HERO IMAGE ───────────────────────────────────────────────
   Full-bleed image block below the hero section.
   Applied to an Image or Cover block.
   ──────────────────────────────────────────────────────────── */

.sl-hero-image {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: block;
}

.sl-hero-image img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  display: block;
}


/* ── SECTION WRAPPER ──────────────────────────────────────────
   Wraps each content section. Adds top/bottom padding and a
   separator border. Applied to Group blocks.
   ──────────────────────────────────────────────────────────── */

.sl-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  border-bottom: 1px solid rgba(0,53,102,0.5);
}

.sl-section:last-of-type {
  border-bottom: none;
}


/* ── LEAD TEXT ────────────────────────────────────────────────
   Larger opening paragraph in a section.
   ──────────────────────────────────────────────────────────── */

.sl-lead-text,
.sl-lead-text p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(253,247,227,0.8);
  max-width: 640px;
}


/* ── ITALIC SECONDARY TEXT ────────────────────────────────────
   Supporting/descriptive copy at reduced opacity.
   ──────────────────────────────────────────────────────────── */

.sl-italic-secondary,
.sl-italic-secondary p {
  font-style: italic;
  color: rgba(253,247,227,0.6);
  line-height: 1.7;
  //font-size: 0.95rem;
}


/* ── TEXT COLOR UTILITIES ─────────────────────────────────────
   Apply directly to any block for quick color overrides.
   ──────────────────────────────────────────────────────────── */

.sl-text-primary,   .sl-text-primary p   { color: #fdf7e3; }
.sl-text-secondary, .sl-text-secondary p { color: rgba(253,247,227,0.65); }
.sl-text-tertiary,  .sl-text-tertiary p  { color: rgba(253,247,227,0.45); }
.sl-text-gold,      .sl-text-gold p      { color: #CCA000; }
.sl-text-gold-bright, .sl-text-gold-bright p { color: #F0CB46; }
.sl-text-muted,     .sl-text-muted p     { color: rgba(253,247,227,0.35); }


/* ── CARD — BASE ──────────────────────────────────────────────
   Navy mid background with border. Used for spec cards,
   post link cards, and feature cards.
   ──────────────────────────────────────────────────────────── */

.sl-card {
  background: #001D3D;
  border: 1px solid #003566;
  border-radius: 3px;
  padding: 1.25rem;
  transition: border-color 0.2s ease;
}

.sl-card:hover {
  border-color: rgba(204,160,0,0.4);
}

.sl-card p {
  margin: 0 0 0.35rem;
}

.sl-card h3,
.sl-card h4 {
  font-size: 0.95rem;
  color: #fdf7e3;
  margin: 0 0 0.35rem;
}


/* ── CARD — GOLD ACCENT ───────────────────────────────────────
   Semi-transparent navy with gold border. Used for download
   boxes and highlighted callout areas.
   ──────────────────────────────────────────────────────────── */

.sl-card-gold {
  background: rgba(0,53,102,0.3);
  border: 1px solid rgba(204,160,0,0.2);
  border-radius: 4px;
  padding: 2rem;
}


/* ── CARD — FEATURED TIER ─────────────────────────────────────
   The highlighted middle tier on the monetization page.
   Same bg as sl-card but with gold border.
   ──────────────────────────────────────────────────────────── */

.sl-card-featured {
  background: #001D3D;
  border: 2px solid rgba(204,160,0,0.45);
  border-radius: 4px;
  padding: 1.5rem;
}

.sl-card-featured p {
  margin: 0 0 0.35rem;
}

.sl-card-featured h3 {
  font-size: 1.05rem;
  color: #fdf7e3;
  margin: 0 0 0.5rem;
}


/* ── CARD TITLE & DESCRIPTION ─────────────────────────────────
   Typography helpers for content inside project overview cards.
   ──────────────────────────────────────────────────────────── */

.sl-card-title,
.sl-card-title p {
  font-size: 1.4rem;
  font-weight: 400;
  color: #fdf7e3;
  line-height: 1.25;
  font-family: Georgia, 'Times New Roman', serif;
}

.sl-card-desc,
.sl-card-desc p {
  // font-size: 0.9rem;
  color: rgba(253,247,227,0.65);
  line-height: 1.7;
  font-style: italic;
}


/* ── PROJECT OVERVIEW CARD ────────────────────────────────────
   Two-column card layout: image left, content right.
   Applied to a Group block wrapping a Columns block.
   ──────────────────────────────────────────────────────────── */

.sl-project-card {
  background: #001d3d;
  border: 1px solid #003566;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.sl-project-card:hover {
  border-color: rgba(204,160,0,0.4);
}

/* Force two-column layout on desktop */
@media (min-width: 640px) {
  .sl-project-card > .wp-block-columns {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0;
    margin: 0;
  }

  .sl-project-card > .wp-block-columns > .wp-block-column {
    margin: 0;
    padding: 0;
  }
}

/* Image column — fills height */
.sl-project-card .sl-card-image-col {
  //background: #003566;
  min-height: 200px;
  position: relative;
  column-width: 34%;
}

.sl-project-card .wp-block-image {
	margin-block-end: 0;
}

.sl-project-card .sl-card-image-col img {
  width: 100%;
  height: 100%;
	position: relative;
  object-fit: cover;
  display: block;
  min-height: 200px;
}

/* Content column — internal padding */
.sl-project-card .sl-card-content-col {
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 639px) {
  .sl-project-card .sl-card-image-col {
    min-height: 160px;
  }
  .sl-project-card .sl-card-content-col {
    padding: 1.25rem;
  }
}


/* ── STATS ROW ────────────────────────────────────────────────
   3-column strip of large numbers with labels.
   Applied to a Columns block.
   ──────────────────────────────────────────────────────────── */

.sl-stats-row .wp-block-column {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sl-stat-value,
.sl-stat-value p {
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  color: #F0CB46;
  margin: 0;
  line-height: 1.2;
}

.sl-stat-label,
.sl-stat-label p {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(253,247,227,0.4);
  margin: 0;
}


/* ── TAG PILLS ────────────────────────────────────────────────
   Applied inline via HTML mode on a Paragraph block.
   ──────────────────────────────────────────────────────────── */

.sl-tag {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(253,247,227,0.5);
  background: rgba(0,53,102,0.5);
  border: 1px solid #003566;
  padding: 3px 8px;
  border-radius: 2px;
  display: inline-block;
  margin: 2px 4px 2px 0;
}


/* ── BADGES ───────────────────────────────────────────────────
   Small identifier pills used on cards.
   ──────────────────────────────────────────────────────────── */

/* Gold accent badge — tier labels, "Most popular" etc */
.sl-badge,
.sl-badge p {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(204,160,0,0.15);
  color: #F0CB46;
  border: 1px solid rgba(204,160,0,0.3);
  padding: 3px 8px;
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 0.75rem;
}

/* Free / CC license badge */
.sl-badge-free,
.sl-badge-free p {
  font-family: 'Arial', monospace;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  // background: rgba(0,53,102,0.9);
	// background: transparent;
  color: #F0CB46;
  border: 1px solid rgba(240,203,70,0.6);
  padding: 3px 8px;
  border-radius: 2px;
  display: inline-block;
	white-space: nowrap;
  //margin-bottom: 0.75rem;
	top: 8px;
	left: 50%;
	transform: translate(-50%, 0);
	position: absolute;
}


/* ── BUTTONS ──────────────────────────────────────────────────
   Applied to a Buttons block via Additional CSS class.
   The !important flags are required to override Blocksy and
   Gutenberg's button defaults.
   ──────────────────────────────────────────────────────────── */

/* Primary — gold fill */
.wp-block-buttons.sl-btn-primary .wp-block-button__link,
.sl-btn-primary .wp-block-button__link {
  font-family: 'Courier New', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #000814 !important;
  background: #CCA000 !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 10px 20px !important;
  transition: background 0.15s ease !important;
}

.wp-block-buttons.sl-btn-primary .wp-block-button__link:hover,
.sl-btn-primary .wp-block-button__link:hover {
  background: #F0CB46 !important;
  color: #000814 !important;
}

/* Ghost — transparent with border */
.wp-block-buttons.sl-btn-ghost .wp-block-button__link,
.sl-btn-ghost .wp-block-button__link {
  font-family: 'Courier New', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(253,247,227,0.5) !important;
  background: transparent !important;
  border: 1px solid rgba(253,247,227,0.15) !important;
  border-radius: 2px !important;
  padding: 9px 20px !important;
  transition: all 0.15s ease !important;
}

.wp-block-buttons.sl-btn-ghost .wp-block-button__link:hover,
.sl-btn-ghost .wp-block-button__link:hover {
  color: #fdf7e3 !important;
  border-color: rgba(253,247,227,0.35) !important;
}


/* ── SPECS / FEATURES GRID ────────────────────────────────────
   Auto-fill grid for spec cards and feature cards.
   Applied to a Group block containing multiple sl-card blocks.
   ──────────────────────────────────────────────────────────── */

.sl-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

/* Force grid layout on Gutenberg's inner blocks */
.sl-specs-grid > .wp-block-group,
.sl-specs-grid > .wp-block-column {
  margin: 0 !important;
  width: auto !important;
}


/* ── TIERS GRID ───────────────────────────────────────────────
   3-column grid for the pricing tiers on monetization pages.
   Applied to a Group block wrapping the three tier cards.
   ──────────────────────────────────────────────────────────── */

.sl-tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.sl-tiers-grid > .wp-block-group {
  margin: 0 !important;
  width: auto !important;
  display: flex;
  flex-direction: column;
}

/* Push button to bottom of tier card */
.sl-tiers-grid .wp-block-buttons {
  margin-top: auto;
  padding-top: 1rem;
}


/* ── TIER PRICE ───────────────────────────────────────────────
   Price line: large gold value + small muted unit.
   Applied to a Paragraph block. Use inline HTML for the unit:
   <strong>TBD</strong> <span class="sl-price-unit">/ kit</span>
   ──────────────────────────────────────────────────────────── */

.sl-tier-price,
.sl-tier-price p {
  font-family: 'Courier New', monospace;
  font-size: 1.4rem;
  color: #F0CB46;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.sl-price-unit {
  font-size: 0.8rem;
  color: rgba(253,247,227,0.4);
}


/* ── KIT DISCLAIMER NOTE ──────────────────────────────────────
   Small italic note used in tier cards and below tier grids.
   ──────────────────────────────────────────────────────────── */

.sl-kit-note,
.sl-kit-note p {
  font-size: 0.8rem;
  color: rgba(253,247,227,0.35);
  font-style: italic;
  line-height: 1.6;
  padding: 0.75rem 1rem;
  background: rgba(0,29,61,0.5);
  border-left: 2px solid rgba(204,160,0,0.2);
  border-radius: 0 2px 2px 0;
  margin-top: 0.75rem;
}


/* ── VERSION TIMELINE ─────────────────────────────────────────
   Left-border spine with dot marker.
   Each version is a Group block with class sl-timeline-item.
   The final version gets sl-timeline-item + final for a
   filled gold dot.
   ──────────────────────────────────────────────────────────── */

.sl-timeline-item {
  padding-left: 2rem;
  border-left: 1px solid #003566;
  padding-bottom: 1.75rem;
  position: relative;
  margin-left: 0.5rem;
}

.sl-timeline-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #000814;
  border: 2px solid #CCA000;
}

.sl-timeline-item.final {
  border-left-color: transparent;
}

.sl-timeline-item.final::before {
  background: #CCA000;
}

.sl-timeline-item p {
  margin-bottom: 0.25rem;
}

.sl-timeline-version,
.sl-timeline-version p {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #CCA000;
  margin-bottom: 0.25rem;
}

.sl-timeline-title,
.sl-timeline-title p {
  font-size: 1rem;
  color: #fdf7e3;
  margin-bottom: 0.35rem;
}

.sl-timeline-desc,
.sl-timeline-desc p {
  font-size: 0.85rem;
  color: rgba(253,247,227,0.5);
  font-style: italic;
  line-height: 1.6;
}


/* ── RELATED / POST LINK CARDS ────────────────────────────────
   Linked card variants for "key posts" and "development posts"
   sections. Use an anchor-wrapped Group block, or apply to
   individual blocks and add URL via the block link setting.
   ──────────────────────────────────────────────────────────── */

.sl-related-card {
  background: #001D3D;
  border: 1px solid #003566;
  border-radius: 3px;
  padding: 1.1rem 1.25rem;
  transition: border-color 0.2s ease;
  display: block;
  text-decoration: none;
}

.sl-related-card:hover {
  border-color: rgba(204,160,0,0.4);
}

.sl-related-card-label,
.sl-related-card-label p {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #CCA000;
  opacity: 0.6;
  margin-bottom: 0.35rem;
}

.sl-related-card-title,
.sl-related-card-title p {
  font-size: 0.9rem;
  color: rgba(253,247,227,0.8);
  line-height: 1.4;
  margin: 0;
}


/* ── COMING SOON BLOCK ────────────────────────────────────────
   Dashed gold border teaser used on the overview page.
   ──────────────────────────────────────────────────────────── */

.sl-coming-soon {
  border: 1px dashed rgba(204,160,0,0.25);
  border-radius: 4px;
  padding: 2.5rem 2rem;
  text-align: center;
  background: rgba(0,29,61,0.3);
  margin: 3rem 0 0;
}

.sl-coming-soon h2 {
  font-size: 1.5rem;
  font-weight: 400;
  color: #fdf7e3;
  margin-bottom: 0.75rem;
}

.sl-coming-soon p {
  max-width: 480px;
  margin: 0 auto 1.5rem;
}


/* ── KO-FI NUDGE STRIP ────────────────────────────────────────
   Support / tip jar callout. Applied to a Group block.
   ──────────────────────────────────────────────────────────── */

.sl-kofi-strip {
  background: rgba(0,53,102,0.2);
  border: 1px solid rgba(204,160,0,0.12);
  border-radius: 4px;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.sl-kofi-strip h3 {
  font-size: 1rem;
  font-weight: 400;
  color: #fdf7e3;
  margin: 0 0 0.35rem;
}

.sl-kofi-strip p {
  font-size: 0.85rem;
  color: rgba(253,247,227,0.45);
  margin: 0;
  font-style: italic;
}

.sl-kofi-strip .wp-block-buttons {
  flex-shrink: 0;
}

.sl-kofi-icon {
  font-size: 28px;
  flex-shrink: 0;
  opacity: 0.8;
  line-height: 1;
}


/* ── LIST OVERRIDES ───────────────────────────────────────────
   Replaces Gutenberg's default bullets with an em-dash in
   gold inside all sl-card and sl-card-featured blocks.
   ──────────────────────────────────────────────────────────── */

.sl-card ul,
.sl-card-featured ul {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0;
}

.sl-card ul li,
.sl-card-featured ul li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 6px;
  font-size: 0.875rem;
  color: rgba(253,247,227,0.7);
  line-height: 1.4;
  font-family: Georgia, 'Times New Roman', serif;
}

.sl-card ul li::before,
.sl-card-featured ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: #CCA000;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  top: 1px;
}


/* ── SEPARATOR OVERRIDES ──────────────────────────────────────
   Blocksy and Gutenberg add default separator styles.
   This resets them for plain horizontal rules used as section
   borders.
   ──────────────────────────────────────────────────────────── */

.sl-section-separator,
.sl-section-separator hr {
  border: none;
  border-top: 1px solid #003566;
  margin: 0;
  background: none;
  height: 1px;
}


/* ── COMPATIBILITY TAG ROW ────────────────────────────────────
   Flex-wrapped row of sl-tag elements.
   Applied to a Paragraph block using HTML mode.
   ──────────────────────────────────────────────────────────── */

.sl-compat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.5rem;
}