/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://jsonld.com/
 Description:  Child theme for jsonld.com. Hosts custom shortcodes, page templates, and the JSON-LD Generator app.
 Author:       Patrick Coombe
 Template:     generatepress
 Version:      1.2.0
 Text Domain:  generatepress-child
*/

/* ============================================================
   BRAND TOKENS — JSON/data-forward cyan accent
   ============================================================ */
:root {
  --brand: #0891b2;         /* cyan-600 */
  --brand-dark: #0e7490;    /* cyan-700 */
  --brand-tint: #ecfeff;    /* cyan-50 */
  --ink: #0f172a;           /* slate-900 */
  --ink-soft: #334155;      /* slate-700 */
  --muted: #64748b;         /* slate-500 */
  --rule: #e2e8f0;          /* slate-200 */
  --surface: #ffffff;
  --surface-alt: #f8fafc;   /* slate-50 */
  --code-bg: #f6f8fa;       /* GitHub-ish */
  --code-border: #d0d7de;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.04);
  --radius: 8px;
}

/* ============================================================
   TYPOGRAPHY POLISH
   ============================================================ */
body {
  line-height: 1.7;
  color: var(--ink);
}

h1, .entry-title,
h2, h3 {
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

h1, .entry-title {
  font-weight: 700;
  letter-spacing: -0.025em;
}

h2 {
  font-weight: 650;
  margin-top: 2em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--rule);
}

h3 {
  font-weight: 600;
  margin-top: 1.6em;
}

p, li { color: var(--ink-soft); }

/* Links — default no decoration; underline only in prose */
a {
  color: var(--brand);
  text-decoration: none;
  transition: color .15s ease;
}
.entry-content a,
.entry-content a:visited {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(8, 145, 178, 0.4);
}
.entry-content a:hover {
  color: var(--brand-dark);
  text-decoration-color: var(--brand-dark);
  text-decoration-thickness: 2px;
}
/* Site title, nav, sidebar, footer — no underline */
.site-title a,
.site-description,
.main-navigation a,
#left-sidebar a,
.site-info a,
.footer-widgets a {
  text-decoration: none !important;
}

/* ============================================================
   PRIMARY NAV — accent the active item
   ============================================================ */
.main-navigation .menu .current-menu-item > a,
.main-navigation .menu .current_page_item > a {
  background-color: var(--brand);
  color: #ffffff;
}

/* ============================================================
   GIST EMBEDS — the big visual fix
   Wraps each gist in a card so white-on-white doesn't blend.
   ============================================================ */
.gist {
  margin: 2em 0 !important;
  background: var(--code-bg) !important;
  border: 1px solid var(--code-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
}

.gist .gist-file {
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.gist .gist-data,
.gist .gist-file .gist-data {
  background: var(--code-bg) !important;
  border: none !important;
}

.gist .gist-meta {
  background: #eaeef2 !important;
  border-top: 1px solid var(--code-border) !important;
  padding: 10px 16px !important;
  font-size: 12px !important;
  color: var(--muted) !important;
}

.gist .gist-meta a {
  color: var(--brand) !important;
  text-decoration: none !important;
}

/* Fallback for iframe-embedded gists */
iframe.gist-frame,
.gist-wrapper > iframe {
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  border: 1px solid var(--code-border);
}

/* ============================================================
   INLINE CODE + PRE BLOCKS
   ============================================================ */
code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

p code, li code, td code {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.88em;
  color: var(--ink);
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius);
  padding: 1em 1.2em;
  overflow-x: auto;
  line-height: 1.5;
  box-shadow: var(--shadow-sm);
}
pre code {
  background: none;
  border: none;
  padding: 0;
}

/* ============================================================
   FEATURED IMAGES (hero banner cards)
   ============================================================ */
.featured-image img,
.post-image img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ============================================================
   SIDEBAR (only on example pages per conditional layout)
   ============================================================ */
#left-sidebar .widget {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25em 1.4em;
  margin-bottom: 1.5em;
  box-shadow: var(--shadow-sm);
}

#left-sidebar .widget-title {
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.8em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--rule);
}

#left-sidebar .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

#left-sidebar .menu-item {
  margin: 0;
}

#left-sidebar .menu-item a {
  display: block;
  padding: 5px 0;
  font-size: 0.95em;
  text-decoration: none;
  color: var(--ink-soft);
  border-left: 2px solid transparent;
  padding-left: 0.4em;
  margin-left: -0.4em;
  transition: color .15s, border-color .15s, background-color .15s;
}

#left-sidebar .menu-item a:hover {
  color: var(--brand);
  border-left-color: var(--brand);
}

#left-sidebar .sub-menu {
  list-style: none;
  padding-left: 0.8em;
  margin: 2px 0 6px;
}

#left-sidebar .sub-menu a {
  font-size: 0.9em;
  color: var(--muted);
}

#left-sidebar .current-menu-item > a {
  color: var(--brand);
  font-weight: 600;
  border-left-color: var(--brand);
}

/* ============================================================
   CONTENT CONTAINERS
   ============================================================ */
.inside-article {
  border-radius: var(--radius);
}

/* ============================================================
   BUTTONS (Gutenberg + GP)
   ============================================================ */
.wp-block-button__link,
.button,
button.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color .15s ease;
}

.wp-block-button__link:hover,
.button:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* ============================================================
   FOOTER POLISH
   ============================================================ */
.site-info {
  letter-spacing: 0.02em;
  font-size: 0.9em;
}

/* ============================================================
   GENERATOR PAGE - keep the custom form looking tidy
   ============================================================ */
.page-template-generator-v2 h1.entry-title {
  margin-bottom: 0.4em;
}

/* Style any yellow-notice style blocks */
.page-template-generator-v2 blockquote,
.page-template-generator-v2 .update-notice {
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  padding: 1em 1.4em;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5em 0;
  color: var(--ink-soft);
}

/* ============================================================
   /examples/ LANDING PAGE — 42-card grid
   ============================================================ */
.examples-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2.5em;
  color: var(--ink-soft);
}
.examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: 2em 0;
}
.example-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 1em 1.1em;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none !important;
  color: var(--ink) !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.example-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
  color: var(--brand-dark) !important;
}
.example-card .card-title {
  font-weight: 650;
  font-size: 1rem;
  color: inherit;
}
.example-card .card-desc {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}
.examples-group-title {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2.5em 0 0.8em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--rule);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  #left-sidebar .widget { padding: 1em; }
  h1, .entry-title { font-size: 1.8em; }
}