/*
Theme Name: Straycy Child
Theme URI: https://straycy.com
Description: Straycy child theme for GeneratePress. Centralizes the Straycy design system (tokens, typography) and adds a modern reading-focused blog, docs, and tutorials layout. Built for Gutenberg.
Author: Digital Media Estonia OU
Author URI: https://straycy.com
Template: generatepress
Version: 1.5.1
License: Proprietary
Text Domain: straycy-child
*/

/* ==========================================================================
   STRAYCY DESIGN TOKENS
   One source of truth. Every page (landing HTML, blog, docs, tutorials)
   should reference these variables instead of hard-coding hex values.
   ========================================================================== */
:root {
  /* Core palette */
  --stry-ink: #0B0E13;        /* near-black, headings + primary text */
  --stry-body: #2A2F3A;       /* body copy, softer than ink */
  --stry-stone: #6B7280;      /* muted text, captions, meta */
  --stry-orange: #E85D3C;     /* primary accent / CTA */
  --stry-orange-light: #FCEAE4;
  --stry-navy: #1A2B4A;       /* secondary accent */
  --stry-cream: #FAF9F6;      /* page background */
  --stry-paper: #F3F2EE;      /* alternate section background */
  --stry-white: #FFFFFF;      /* cards */
  --stry-border: #E6E4DE;     /* hairline borders */
  --stry-mist: #EEF1F5;       /* subtle fill (tags, bands) */
  --stry-green: #1FA971;      /* success / value */

  /* Type */
  --stry-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --stry-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Reading layout widths */
  --stry-measure: 720px;      /* text column: comfortable reading measure */
  --stry-wide: 960px;         /* images / wide blocks break out to this */
  --stry-radius: 14px;
  --stry-radius-sm: 8px;
}

/* ==========================================================================
   TYPOGRAPHY BASE
   ========================================================================== */
body {
  font-family: var(--stry-font-body);
  color: var(--stry-body);
  background: var(--stry-white);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--stry-font-body);
  color: var(--stry-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
code, pre, .stry-mono {
  font-family: var(--stry-font-mono);
}

/* ==========================================================================
   SHARED HELPERS
   ========================================================================== */
.stry-eyebrow {
  font-family: var(--stry-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--stry-orange);
}

/* Force white background site-wide. GeneratePress sets its own background via
   the Customizer, which can override the body rule, so we also target its
   container classes. */
body,
.site,
#page,
.site-content,
.content-area,
.generate-page-header {
  background-color: var(--stry-white);
}
.stry-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--stry-orange); color: #fff;
  padding: 12px 22px; border-radius: var(--stry-radius-sm);
  font-weight: 600; text-decoration: none; font-size: 15px;
  transition: transform .15s ease, background .15s ease;
}
.stry-btn:hover { background: #d44e2f; transform: translateY(-1px); color:#fff; }

/* GeneratePress constrains the layout in two places: the #page grid-container
   has a max-width (~1200px) and #content is a flex item that doesn't stretch to
   fill it, leaving empty space on the right even with "No Sidebars" and zero
   padding. On posts, the blog page, archives and search we force the whole
   container chain to full width and let #content fill it, so our own
   .stry-article / .stry-archive control the real measure. Scoped to these body
   classes so the homepage and other pages keep GeneratePress defaults. */
.single-post #page,
.blog #page,
.archive #page,
.search #page {
  max-width: 100%;
  padding: 0;
}
.single-post .site-content,
.blog .site-content,
.archive .site-content,
.search .site-content {
  display: block;       /* GP sets this to flex for sidebar layouts; with no
                           sidebar, flex sizes #content to its content and leaves
                           empty space on the right. block makes it fill width. */
  padding: 0;
  max-width: 100%;
  width: 100%;
}
.single-post #content.grid-container,
.blog #content.grid-container,
.archive #content.grid-container,
.search #content.grid-container {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
/* GP's inner article wrapper can also carry padding; neutralize it on posts so
   our hero/breakout images can reach the intended width. */
.single-post .inside-article,
.blog .inside-article,
.archive .inside-article {
  padding: 0;
}
/* The article element itself should span the full content area. */
.single-post .stry-single,
.single-post article.post {
  width: 100%;
  max-width: 100%;
}