/*
Theme Name: Teaching Blog
Theme URI: https://example.com/teaching-blog
Author: ChatGPT
Author URI: https://openai.com
Description: A clean, accessible blog theme designed for teachers, tutors, education writers, and learning communities.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: teaching-blog
Tags: blog, education, custom-logo, custom-menu, featured-images, threaded-comments, accessibility-ready
*/

:root {
  --tb-bg: #ebf4fA;
  --tb-surface: #ffffff;
  --tb-text: #243041;
  --tb-muted: #667085;
  --tb-primary: #2563eb;
  --tb-primary-dark: #1d4ed8;
  --tb-accent: #f59e0b;
  --tb-border: #e7e1d8;
  --tb-radius: 20px;
  --tb-shadow: 0 18px 50px rgba(36, 48, 65, 0.08);
  --tb-max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--tb-text);
  background: var(--tb-bg);
  line-height: 1.7;
}

a { color: var(--tb-primary); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover, a:focus { color: var(--tb-primary-dark); }
img { max-width: 100%; height: auto; border-radius: 14px; }

.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 !important; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: #fff; clip: auto !important; clip-path: none; color: var(--tb-text); display: block;
  font-weight: 700; height: auto; left: 1rem; padding: 1rem; top: 1rem; width: auto; z-index: 100000;
}

.site-header {
  background: rgba(251, 248, 242, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tb-border);
  position: sticky;
  top: 0;
  z-index: 30;
}
.header-inner, .site-main, .footer-inner { max-width: var(--tb-max); margin: 0 auto; padding: 0 1.25rem; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 78px; gap: 1.5rem; }
.site-branding { display: flex; align-items: center; gap: 0.8rem; }
.custom-logo { max-height: 52px; width: auto; }
.site-title { margin: 0; font-size: 1.35rem; font-weight: 850; letter-spacing: -0.03em; }
.site-title a { color: var(--tb-text); text-decoration: none; }
.site-description { margin: 0.1rem 0 0; color: var(--tb-muted); font-size: 0.92rem; }

.main-navigation ul { list-style: none; padding: 0; margin: 0; }
.main-navigation > div > ul, .main-navigation > ul { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.main-navigation li { position: relative; }
.main-navigation a { color: var(--tb-text); font-weight: 700; text-decoration: none; padding: 0.55rem 0.8rem; border-radius: 999px; display: block; white-space: nowrap; }
.main-navigation a:hover, .main-navigation a:focus, .main-navigation li:hover > a, .main-navigation li:focus-within > a { background: #eef4ff; color: var(--tb-primary-dark); }
.main-navigation .menu-item-has-children > a::after { content: "▾"; font-size: 0.7em; margin-left: 0.45rem; }
.main-navigation .sub-menu, .main-navigation .children {
  position: absolute; top: calc(100% + 0.35rem); left: 0; min-width: 220px; z-index: 60; display: none;
  background: var(--tb-surface); border: 1px solid var(--tb-border); border-radius: 16px; box-shadow: var(--tb-shadow); padding: 0.45rem;
}
.main-navigation li:hover > .sub-menu, .main-navigation li:focus-within > .sub-menu,
.main-navigation li:hover > .children, .main-navigation li:focus-within > .children { display: block; }
.main-navigation .sub-menu .sub-menu, .main-navigation .children .children { top: -0.45rem; left: calc(100% + 0.35rem); }
.main-navigation .sub-menu a, .main-navigation .children a { border-radius: 12px; padding: 0.65rem 0.8rem; }

.hero {
  margin: 2rem auto 2.25rem;
  background: linear-gradient(135deg, #fff 0%, #eef4ff 65%, #fff6df 100%);
  border: 1px solid var(--tb-border);
  border-radius: 32px;
  box-shadow: var(--tb-shadow);
  padding: clamp(2rem, 5vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; width: 220px; height: 220px; border-radius: 999px; right: -80px; bottom: -80px;
  background: rgba(245, 158, 11, 0.18);
}
.hero-eyebrow { color: var(--tb-primary-dark); font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; }
.hero h1 { max-width: 760px; font-size: clamp(2.35rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.065em; margin: 0.5rem 0 1rem; }
.hero p { max-width: 680px; color: var(--tb-muted); font-size: 1.15rem; margin: 0 0 1.5rem; }
.hero-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.button, .wp-block-button__link, input[type="submit"] {
  appearance: none; border: 0; background: var(--tb-primary); color: #fff !important; border-radius: 999px;
  padding: 0.8rem 1.15rem; text-decoration: none; font-weight: 850; display: inline-flex; align-items: center; justify-content: center;
}
.button.secondary { background: #fff; color: var(--tb-text) !important; border: 1px solid var(--tb-border); }
.button:hover, input[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37, 99, 235, 0.2); }

.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; }
.post-card, .widget, .comments-area, .no-results, .single-post-card {
  background: var(--tb-surface); border: 1px solid var(--tb-border); border-radius: var(--tb-radius); box-shadow: var(--tb-shadow);
}
.post-card { overflow: hidden; margin-bottom: 1.5rem; }
.posts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.posts-grid .post-card { margin-bottom: 0; height: 100%; }
.posts-grid .post-card-content { display: flex; flex-direction: column; min-height: 260px; }
.posts-grid .entry-footer { margin-top: auto; }
.posts-grid .navigation, .posts-grid .pagination, .posts-grid .nav-links, .posts-grid .no-results { grid-column: 1 / -1; }
.post-card-content { padding: 1.4rem; }
.post-card .wp-post-image { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; border-radius: 0; }
.entry-title { margin: 0 0 0.6rem; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.15; letter-spacing: -0.04em; }
.entry-title a { color: var(--tb-text); text-decoration: none; }
.entry-title a:hover { color: var(--tb-primary); }
.entry-meta, .entry-footer { color: var(--tb-muted); font-size: 0.92rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.entry-summary { margin-top: 1rem; color: #3f4b5f; }
.read-more { font-weight: 850; }

.single-post-card { padding: clamp(1.4rem, 4vw, 2.5rem); }
.single-post-card .entry-title { font-size: clamp(2.3rem, 5vw, 4rem); }
.entry-content { font-size: 1.05rem; }
.entry-content h2, .entry-content h3 { line-height: 1.2; letter-spacing: -0.035em; margin-top: 2rem; }
.entry-content blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 5px solid var(--tb-accent); background: #fff9eb; border-radius: 0 14px 14px 0; }
.entry-content code { background: #f1f5f9; padding: 0.15rem 0.35rem; border-radius: 0.35rem; }

.widget-area { position: sticky; top: 100px; }
.widget { padding: 1.25rem; margin-bottom: 1.25rem; }
.widget-title { margin-top: 0; font-size: 1.05rem; letter-spacing: -0.02em; }
.widget ul { padding-left: 1.1rem; }
.search-form { display: flex; gap: 0.5rem; }
.search-field, input[type="text"], input[type="email"], textarea {
  width: 100%; border: 1px solid var(--tb-border); border-radius: 12px; padding: 0.75rem 0.9rem; font: inherit; background: #fff;
}
.search-submit { padding: 0.75rem 0.9rem; }

.nav-links { display: flex; justify-content: space-between; gap: 1rem; margin: 1.5rem 0; }
.page-numbers, .nav-links a { background: #fff; border: 1px solid var(--tb-border); border-radius: 999px; padding: 0.65rem 0.9rem; text-decoration: none; font-weight: 800; }

.comments-area { padding: 1.5rem; margin-top: 1.5rem; }
.comment-list { padding-left: 1.2rem; }
.comment-body { margin-bottom: 1rem; }

.site-footer { border-top: 1px solid var(--tb-border); margin-top: 3rem; padding: 2rem 0; color: var(--tb-muted); }
.footer-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 860px) {
  .header-inner { align-items: flex-start; flex-direction: column; padding-top: 1rem; padding-bottom: 1rem; }
  .main-navigation { width: 100%; }
  .main-navigation > div > ul, .main-navigation > ul { align-items: stretch; flex-direction: column; width: 100%; }
  .main-navigation .sub-menu, .main-navigation .children { position: static; min-width: 0; box-shadow: none; margin: 0.25rem 0 0.4rem 1rem; }
  .content-layout { grid-template-columns: 1fr; }
  .posts-grid { grid-template-columns: 1fr; }
  .widget-area { position: static; }
}

/* Front page post grid fix */
.front-page-layout .posts-grid,
.content-layout > .posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.front-page-layout .post-card,
.content-layout > .posts-grid .post-card {
  margin-bottom: 0;
  height: 100%;
}

.front-page-layout .post-card-content,
.content-layout > .posts-grid .post-card-content {
  display: flex;
  flex-direction: column;
  min-height: 260px;
}

.front-page-layout .entry-footer,
.content-layout > .posts-grid .entry-footer {
  margin-top: auto;
}

.front-page-layout .navigation,
.front-page-layout .pagination,
.front-page-layout .nav-links,
.front-page-layout .no-results,
.content-layout > .posts-grid .navigation,
.content-layout > .posts-grid .pagination,
.content-layout > .posts-grid .nav-links,
.content-layout > .posts-grid .no-results {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .front-page-layout .posts-grid,
  .content-layout > .posts-grid {
    grid-template-columns: 1fr;
  }
}