/*
Theme Name: MaaS
Theme URI: https://mattlesak.com
Author: Matt Lesak (custom minimal theme)
Author URI: https://mattlesak.com
Description: A very simple, clean, classic WordPress theme for Matt Lesak's personal site. Professional yet approachable. Single-column reading focus. No Full Site Editing, no page builders, no layout frustration. Now includes easy customization for social links, header, footer, and accent color via the Customizer.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: maas
Tags: one-column, custom-menu, custom-logo, featured-images, blog, accessibility-ready, translation-ready
*/

/* ============================================
   MaaS — Minimal Professional + Approachable Theme
   All layout decisions are here. Edit this file to change spacing, colors, or typography.
   ============================================ */

:root {
  /* Colors - professional yet warm/approachable */
  --color-bg: #f8f7f4;           /* Warm off-white, easy on eyes */
  --color-surface: #ffffff;
  --color-text: #1f2a23;         /* Deep forest green-gray for readability */
  --color-text-light: #4a5c52;
  --color-accent: #2f5d3a;       /* Forest green - solar, nature, tech credibility */
  --color-accent-hover: #23452b;
  --color-border: #d9d4c9;
  --color-muted: #6b7a70;

  /* Typography & spacing */
  --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --fs-base: 18px;
  --lh-base: 1.72;
  --lh-tight: 1.35;

  --max-content: 720px;
  --max-wide: 1080px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
}

/* Dark mode support (subtle, respects system) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f1411;
    --color-surface: #171d19;
    --color-text: #e6e4de;
    --color-text-light: #a8b3a9;
    --color-accent: #5d8f6b;
    --color-accent-hover: #7aa885;
    --color-border: #2a342e;
    --color-muted: #8a968d;
  }
}

/* Base resets & global */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Improve text rendering on posts */
.entry-content {
  font-size: 1.05rem;
  line-height: 1.78;
}

/* Links */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover,
a:focus {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* Headings - professional, clear hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4) 0;
  color: var(--color-text);
}

h1 { font-size: 2.1rem; margin-bottom: var(--space-5); }
h2 { font-size: 1.55rem; margin-top: var(--space-6); }
h3 { font-size: 1.25rem; margin-top: var(--space-5); }

.entry-content h1,
.entry-content h2,
.entry-content h3 {
  margin-top: var(--space-6);
}

/* Layout containers */
.site-header,
.site-footer,
.site-content,
.hero {
  width: 100%;
}

.site-content {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: var(--space-6) var(--space-3);
}

@media (min-width: 640px) {
  .site-content {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* Header */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) 0;
}

.site-header-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}
.site-title a {
  color: var(--color-text);
  text-decoration: none;
}
.site-title a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.site-description {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.3;
}

/* Centered header layout (controlled in Customizer) */
.site-header-inner.is-centered {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
}
.site-header-inner.is-centered .primary-nav {
  justify-content: center;
  flex-wrap: wrap;
}

/* Primary Navigation - clean and simple */
.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-size: 0.95rem;
  font-weight: 500;
}

.primary-nav a {
  color: var(--color-text-light);
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: all 0.1s ease;
}
.primary-nav a:hover,
.primary-nav a:focus,
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
  text-decoration: none;
}

/* Mobile nav: stacks cleanly below ~640px */
@media (max-width: 639px) {
  .site-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .primary-nav {
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    font-size: 0.9rem;
  }
}

/* Hero / Intro area (used on front page) */
.hero {
  background: var(--color-surface);
  padding: var(--space-7) 0 var(--space-6);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.hero-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.hero img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: var(--space-5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.hero h1 {
  font-size: 2.35rem;
  margin-bottom: var(--space-3);
}

.hero .tagline {
  font-size: 1.15rem;
  color: var(--color-text-light);
  max-width: 520px;
  margin: 0 auto var(--space-5);
}

.hero .intro {
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.05rem;
}

/* Sections */
.section {
  margin-top: var(--space-7);
}

.section-title {
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}

/* Post / Project cards - simple, approachable */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 560px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: var(--space-4);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.card h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
}

.card p {
  flex: 1;
  font-size: 0.95rem;
  color: var(--color-text-light);
  margin-bottom: var(--space-3);
}

.card .meta {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: auto;
}

.card a {
  font-weight: 500;
}

/* YouTube / embed friendly */
.youtube-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: var(--space-4) 0;
  border-radius: 6px;
  background: #000;
}
.youtube-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* WordPress content defaults (very important) */
.entry-content img,
.entry-content figure,
.entry-content video {
  max-width: 100%;
  height: auto;
}

.entry-content figure {
  margin: var(--space-5) 0;
}

.entry-content figcaption {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: var(--space-2);
  text-align: center;
}

/* Blockquote styling - nice for quotes or callouts */
.entry-content blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface);
  font-style: italic;
  color: var(--color-text-light);
}

.entry-content ul,
.entry-content ol {
  padding-left: var(--space-5);
  margin: var(--space-4) 0;
}

/* Code / pre */
.entry-content code,
.entry-content pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: #f0ede5;
  padding: 0.1em 0.4em;
  border-radius: 3px;
}
.entry-content pre {
  padding: var(--space-4);
  overflow-x: auto;
  background: #f0ede5;
}

/* Footer */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-5) 0 var(--space-4);
  margin-top: var(--space-7);
  font-size: 0.875rem;
  color: var(--color-muted);
  text-align: center;
}

.site-footer a {
  color: var(--color-muted);
}
.site-footer a:hover {
  color: var(--color-accent);
}

.social-links {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.social-links a {
  padding: 0.25rem 0.5rem;
}

/* Small footer menu (optional, controlled via Appearance → Menus) */
.footer-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: 0.8rem;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.footer-nav a {
  color: var(--color-muted);
  text-decoration: none;
}
.footer-nav a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

/* Small utilities */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* WordPress required classes */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Print styles - nice for people who print posts */
@media print {
  .site-header,
  .site-footer,
  .section-title,
  nav {
    display: none !important;
  }
  .site-content {
    max-width: 100%;
    padding: 0;
  }
  body {
    background: white;
    color: black;
    font-size: 12pt;
    line-height: 1.5;
  }
}