/*
Theme Name: Blog Theme Design
Theme URI: https://example.com/blog-theme
Author: Figma to WP
Description: Classic WordPress theme converted from a Figma-based blog design.
Version: 1.2.8
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blog-theme
Tags: blog, custom-menu, two-columns
*/

/* Reset & Typography Base */
body {
  font-family: var(--font-body), sans-serif;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text-primary);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans), serif;
  color: var(--color-text-primary);
  font-weight: 600;
  line-height: 1.2;
}

h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); }
h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }

/* Navigation */
.primary-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.primary-menu a {
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}

.primary-menu a:hover,
.current-menu-item > a {
  color: var(--color-primary);
}

/* Content Blocks */
.prose {
  max-width: 70ch;
  margin-inline: auto;
}

.prose p { margin-bottom: 1.5rem; }
.prose h1, .prose h2, .prose h3 { margin-top: 2.5rem; margin-bottom: 1.25rem; }

/* WP Specifics */
.dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  z-index: 1000;
}

/* Desktop header behavior (fallback when responsive utility classes are missing) */
@media (min-width: 1024px) {
  .site-primary-nav {
    display: flex !important;
  }

  .site-mobile-nav,
  .site-menu-toggle {
    display: none !important;
  }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  :root {
    --container-padding: 1.25rem;
  }
  body { font-size: 1rem; }
}

/* Responsive utilities (fallback for missing Tailwind responsive layers) */
@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:p-12 { padding: 3rem; }
  .md\:p-20 { padding: 5rem; }
  .md\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
  .md\:py-48 { padding-top: 12rem; padding-bottom: 12rem; }
  .md\:text-xl { font-size: var(--text-xl); line-height: var(--text-xl--line-height); }
  .md\:text-3xl { font-size: var(--text-3xl); line-height: var(--text-3xl--line-height); }
  .md\:text-4xl { font-size: var(--text-4xl); line-height: var(--text-4xl--line-height); }
  .md\:text-6xl { font-size: var(--text-6xl); line-height: var(--text-6xl--line-height); }
}

@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-4 { grid-column: span 4 / span 4; }
  .lg\:col-span-8 { grid-column: span 8 / span 8; }
  .lg\:text-5xl { font-size: var(--text-5xl); line-height: var(--text-5xl--line-height); }
  .lg\:text-7xl { font-size: var(--text-7xl); line-height: var(--text-7xl--line-height); }
}