/*
Theme Name: Lots of Data
Theme URI: https://lotsofdata.blog
Author: Itzik
Author URI: https://lotsofdata.blog
Description: An editorial-technical block theme for long-form writing on storage, AI infrastructure, and high-performance I/O. Warm paper palette, characterful serif typography (Fraunces and Newsreader), and a single vermilion accent. Light and dark style variations included. Bilingual (EN/HE) ready with proper RTL handling.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lotsofdata
Tags: blog, one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations
*/

/* ─────────────────────────────────────────────────────────────
   Most styling lives in theme.json. This file holds only what
   theme.json cannot express — paper grain overlay, drop cap,
   custom block decorations, and the EN/HE language toggle.
   ───────────────────────────────────────────────────────────── */

/* Paper grain — sits above bg, below content */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.is-style-dark body::before,
body.theme-dark::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.85 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.04;
}
.wp-site-blocks { position: relative; z-index: 2; }

/* Site identity mark — the rotated square next to the title */
.site-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--ibm-plex-sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.site-mark::before {
  content: '';
  width: 14px; height: 14px;
  background: var(--wp--preset--color--accent);
  display: inline-block;
  border-radius: 1px;
  transform: rotate(45deg);
}

/* Drop cap on first paragraph of single posts */
.single .entry-content > p:first-of-type::first-letter {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 380;
  font-size: 4.6em;
  line-height: 0.85;
  float: left;
  margin: 0.06em 0.08em 0 -0.04em;
  color: var(--wp--preset--color--accent);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}

/* Numbered editorial-style headings — opt-in via block class */
.is-style-numbered {
  position: relative;
  padding-top: 28px;
  border-top: 1px solid var(--wp--preset--color--rule);
  margin-top: 2.4em;
}
.is-style-numbered::before {
  content: attr(data-num);
  font-family: var(--wp--preset--font-family--ibm-plex-mono);
  font-size: 13px;
  color: var(--wp--preset--color--accent);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  text-transform: uppercase;
}

/* EN/HE language toggle */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--wp--preset--color--rule-strong);
  font-family: var(--wp--preset--font-family--ibm-plex-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  border-radius: 2px;
  overflow: hidden;
}
.lang-toggle a {
  padding: 5px 10px;
  text-decoration: none;
  color: var(--wp--preset--color--ink-soft);
  transition: background 0.15s;
}
.lang-toggle a.is-active {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--bg);
}
.lang-toggle a:not(.is-active):hover {
  background: var(--wp--preset--color--bg-soft);
}

/* RTL post handling */
.post-language-he .entry-title,
.post-language-he .entry-content {
  direction: rtl;
  text-align: right;
}
.post-language-he .entry-content > p:first-of-type::first-letter {
  float: right;
  margin: 0.06em -0.04em 0 0.08em;
}

/* Vermilion underline on links inside post content */
.entry-content a {
  text-decoration-color: var(--wp--preset--color--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.entry-content a:hover {
  color: var(--wp--preset--color--accent);
}

/* Code block — left rule + dark surface */
.entry-content pre.wp-block-code,
.entry-content pre.wp-block-preformatted {
  border-left: 3px solid var(--wp--preset--color--accent);
  border-radius: 3px;
}

/* Inline code background */
.entry-content code:not(pre code) {
  background: var(--wp--preset--color--bg-code);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 0.86em;
  font-weight: 500;
}

/* Pull-quote / blockquote styling on top of theme.json defaults */
.entry-content blockquote.wp-block-quote {
  border-left: 3px solid var(--wp--preset--color--accent);
  padding-left: 28px;
  font-style: italic;
}

/* Section ornament — three dots, opt-in */
.is-style-ornament {
  text-align: center;
  font-family: var(--wp--preset--font-family--fraunces);
  color: var(--wp--preset--color--rule-strong);
  font-size: 16px;
  letter-spacing: 1.5em;
  margin: 3em 0 2em;
  padding-left: 1.5em;
  font-style: italic;
}
.is-style-ornament::before { content: '· · ·'; }

/* Old-style figures throughout body */
body { font-feature-settings: "onum" 1, "ss01" 1; }
.wp-block-post-date,
.entry-meta time { font-feature-settings: "tnum" 1; }

/* Subtle reading progress accent on hover for post titles in lists */
.wp-block-post-title a:hover {
  color: var(--wp--preset--color--accent);
}

/* Tag pill style for term lists */
.is-style-pills .wp-block-post-terms a,
.wp-block-post-terms.is-style-pills a {
  font-family: var(--wp--preset--font-family--ibm-plex-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border: 1px solid var(--wp--preset--color--rule-strong);
  color: var(--wp--preset--color--ink-soft);
  text-decoration: none;
  border-radius: 2px;
  margin-right: 6px;
  display: inline-block;
  transition: all 0.15s;
}
.is-style-pills .wp-block-post-terms a:hover {
  border-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--bg-soft);
}