/*
====================================================
Theme: Twenty Twenty-Five Child
Fonts: Noto Sans via Google Fonts (weights 400,500,600,700)
Purpose: Minimal, consistent typography for Greek / English
Notes: This file contains layout-specific font rules only.
      Do not include @font-face here (we load Noto from Google).
====================================================
*/

/* ------------------------
   Design tokens (easy tuning)
   ------------------------ */
:root{
  --base-font-size: 16px;         /* desktop base */
  --base-line-height: 1.6;
  --heading-line-height: 1.25;
  --muted-color: #6b7280;
  --text-color: #111827;
}

/* ------------------------
   Global body styles
   - Use Noto Sans (loaded from Google)
   - Provide robust fallback stack
   - Improve font rendering on macOS/Retina
   ------------------------ */
body{
  font-family: 'Noto Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
  font-weight: 400;                       /* uses 400 from Google Fonts */
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;    /* improve appearance on macOS */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0;
}

/* ------------------------
   Headings
   - Semantic weights: h1 (700), h2 (600), h3 (500)
   - Keep spacing compact and consistent
   ------------------------ */
h1 {
  font-size: 2.5rem;                      /* ~40px */
  font-weight: 700;                       /* uses 700 from Google Fonts */
  line-height: var(--heading-line-height);
  margin: 0 0 0.5em;
}

h2 {
  font-size: 2rem;                        /* ~32px */
  font-weight: 600;                       /* uses 600 from Google Fonts */
  line-height: var(--heading-line-height);
  margin: 1em 0 0.5em;
}

h3 {
  font-size: 1.5rem;                      /* ~24px */
  font-weight: 500;                       /* uses 500 from Google Fonts */
  line-height: 1.3;
  margin: 1em 0 0.5em;
}

/* ------------------------
   Body copy, lists, forms, buttons
   - Inherit font-family and use regular weight
   ------------------------ */
p, li {
  font-size: 1rem;                        /* 16px */
  font-weight: 400;
  margin-bottom: 1em;
}

input, textarea, button, select {
  font-family: inherit;
  font-weight: 400;
  font-size: 1rem;
}

/* ------------------------
   Small / muted text
   ------------------------ */
.small, .muted {
  font-size: 0.875rem;                    /* 14px */
  color: var(--muted-color);
}

/* ------------------------
   Italic / emphasis
   - Noto Sans supplies italics for many weights; this keeps semantics
   ------------------------ */
em, i {
  font-style: italic;
}

/* ------------------------
   Monospace for numeric/code contexts (optional)
   - This uses system monospace or a loaded monospace face if you add one
   ------------------------ */
code, pre, .table-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Source Code Pro", monospace;
  font-size: 0.95rem;
}

/* ------------------------
   Responsive adjustments
   - Reduce base size slightly on small screens
   - Scale headings down for better fit
   ------------------------ */
@media (max-width: 1024px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
}

@media (max-width: 768px) {
  :root { --base-font-size: 15px; }
  body { font-size: var(--base-font-size); }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  p, li { font-size: 0.95rem; }
}
