/* ============================================================
   Local Guy theme — base layer. Tokens only (tokens.css).
   Structure, prose and theme-owned components. The plugin's
   component sheet sits on top of this.
   ============================================================ */

@font-face { font-family: "Heebo"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/heebo-hebrew-wght-normal.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/heebo-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-block-start: calc(var(--header-h) + var(--space-4)); }
body { margin: 0; min-block-size: 100vh; -webkit-font-smoothing: antialiased; font-feature-settings: "kern"; overflow-x: clip; }
img, svg, video { max-inline-size: 100%; block-size: auto; }
img { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--color-brand-deep); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-brand-hover); }
h1, h2, h3, h4 { margin-block: 0 var(--space-4); color: var(--color-ink); text-wrap: balance; }
p { margin-block: 0 var(--space-4); text-wrap: pretty; }
table { border-collapse: collapse; inline-size: 100%; }
::selection { background: var(--color-brand-tint); color: var(--color-ink); }

/* Type classes (DESIGN.md §3) */
.display  { font-size: var(--text-5xl); font-weight: var(--weight-display); line-height: var(--leading-display); }
.title    { font-size: var(--text-3xl); font-weight: var(--weight-display); line-height: var(--leading-display); }
.subtitle { font-size: var(--text-xl); font-weight: var(--weight-display); line-height: 1.25; }
.lead     { font-size: var(--text-lg); line-height: var(--leading-body); color: var(--color-ink); }
.small    { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-muted); }
.eyebrow  { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-eyebrow); color: var(--color-brand-deep); margin-block-end: var(--space-2); }
.eyebrow a { color: inherit; text-decoration: none; }
.tabular  { font-variant-numeric: tabular-nums; }

/* Layout */
.lg-container { inline-size: 100%; max-inline-size: var(--container); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 900px) { .lg-container { padding-inline: 32px; } }
.lg-section { padding-block: var(--space-section); }
.lg-surface-subtle { background: var(--color-surface-subtle); }
.lg-main { display: block; }
.lg-main:focus { outline: none; }
.lg-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .lg-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .lg-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.lg-page-head { margin-block-end: var(--space-6); max-inline-size: var(--measure); }

/* Skip link */
.lg-skip { position: absolute; inset-inline-start: var(--space-4); inset-block-start: -100px; z-index: 2000;
  background: var(--color-ink); color: var(--color-surface); padding-block: var(--space-2); padding-inline: var(--space-4); border-radius: var(--radius-sm); }
.lg-skip:focus { inset-block-start: var(--space-4); }

/* Breadcrumb */
.lg-breadcrumb { font-size: var(--text-xs); color: var(--color-ink-muted); margin-block-end: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.lg-breadcrumb a { color: var(--color-ink-muted); text-decoration: none; }
.lg-breadcrumb a:hover { color: var(--color-ink); text-decoration: underline; }
.lg-sep { color: var(--color-line-strong); }

/* Prose (pages, articles, business about copy) */
.lg-prose { max-inline-size: var(--measure); }
.lg-prose h2 { font-size: var(--text-2xl); margin-block-start: var(--space-7); }
.lg-prose h3 { font-size: var(--text-xl); margin-block-start: var(--space-6); }
.lg-prose ul, .lg-prose ol { padding-inline-start: var(--space-5); margin-block: 0 var(--space-4); }
.lg-prose li { margin-block-end: var(--space-2); }
.lg-prose blockquote { margin: var(--space-6) 0; padding-inline-start: var(--space-5); border-inline-start: 3px solid var(--color-brand); color: var(--color-ink); font-size: var(--text-lg); }
.lg-prose img { border-radius: var(--radius-lg); }
.lg-prose table td, .lg-prose table th { border-block-end: 1px solid var(--color-line); padding: var(--space-2) var(--space-3); text-align: start; }

/* Article */
.lg-article-head { max-inline-size: var(--measure); margin-block-end: var(--space-5); }
.lg-meta { margin: 0; }
.lg-answer { max-inline-size: var(--measure); padding-inline-start: var(--space-5); border-inline-start: 3px solid var(--color-brand); margin-block: var(--space-5) var(--space-6); }
.lg-article-media { margin: 0 0 var(--space-6); max-inline-size: 900px; }
.lg-article-media img { border-radius: var(--radius-lg); aspect-ratio: 21 / 9; object-fit: cover; inline-size: 100%; }

/* Buttons (theme-owned; plugin buttons share the same rules) */
.lg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: 44px;
  padding-block: 10px; padding-inline: 18px; border-radius: 10px; border: 1px solid transparent; font-weight: var(--weight-medium);
  text-decoration: none; transition: transform var(--duration-fast) var(--ease-standard); }
.lg-btn:hover { transform: translateY(-1px); }
.lg-btn-primary { background: var(--color-ink); color: var(--color-surface); }
.lg-btn-primary:hover { color: var(--color-surface); }
.lg-btn-secondary { background: var(--color-surface-raised); color: var(--color-ink); border-color: var(--color-line-strong); }
.lg-btn-on-dark { background: var(--color-surface-raised); color: var(--color-ink); }

/* Post card */
.lg-card { position: relative; display: flex; flex-direction: column; background: var(--color-surface-raised); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--duration-base) var(--ease-standard); }
.lg-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.lg-card__media { aspect-ratio: 16 / 10; background: var(--color-surface-subtle); }
.lg-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.lg-card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.lg-card__title { margin-block-end: var(--space-2); overflow-wrap: anywhere; }
.lg-card__title a { color: var(--color-ink); text-decoration: none; }
.lg-card__title a::after { content: ""; position: absolute; inset: 0; }
.lg-card:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* CTA band (DESIGN.md §5) */
.lg-cta-band { border-radius: var(--radius-xl); padding: clamp(2rem, 1rem + 4vw, 4rem); text-align: center;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-brand)); color: var(--color-ink-on-dark); }
.lg-cta-band .title, .lg-cta-band .lead { color: var(--color-ink-on-dark); }
.lg-cta-band .lead { margin-inline: auto; max-inline-size: 48ch; }

/* Pagination */
.lg-pagination { margin-block-start: var(--space-7); }
.lg-pagination .nav-links { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.lg-pagination .page-numbers { min-inline-size: 44px; min-block-size: 44px; display: inline-grid; place-items: center; border-radius: var(--radius-sm);
  border: 1px solid var(--color-line); background: var(--color-surface-raised); color: var(--color-ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.lg-pagination .current { background: var(--color-ink); color: var(--color-surface); border-color: var(--color-ink); }

/* Fallback header/footer (plugin inactive) */
.lg-fallback-header { background: var(--color-surface-raised); border-block-end: 1px solid var(--color-line); padding-block: var(--space-4); }
.lg-fallback-footer { background: var(--color-surface-inverse); color: var(--color-ink-on-dark); padding-block: var(--space-6); margin-block-start: var(--space-7); }
.lg-logo-text { font-weight: var(--weight-display); font-size: var(--text-lg); color: var(--color-ink); text-decoration: none; }

/* 404 */
.lg-404 { text-align: start; max-inline-size: 640px; }

/* WordPress core alignments */
.alignwide { max-inline-size: var(--container); }
.alignfull { inline-size: 100vw; margin-inline-start: calc(50% - 50vw); }
.screen-reader-text { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }