/*
 Theme Name:   Astra Child
 Theme URI:    https://phpwebthings.org
 Description:  Astra child theme for phpwebthings.org. Modern typography,
               polished spacing, sensible content widths, refined hero,
               author bio cards, archive notices, footer columns. Built by Edwin.
 Author:       Edwin J. Rice
 Author URI:   https://phpwebthings.org/about/
 Template:     astra
 Version:      0.2.0
 License:      GNU General Public License v2 or later
 Text Domain:  astra-child
*/

/* ==========================================================================
   Global typography upgrade. System Inter-style stack, generous line height,
   tighter heading tracking. Applies across the whole site. */
:root {
  --pwt-content-max: 760px;
  --pwt-page-max: 1200px;
  --pwt-text:    #1f2329;
  --pwt-muted:   #5b6470;
  --pwt-subtle:  #80868f;
  --pwt-line:    #e3e6ea;
  --pwt-bg-soft: #f5f7fa;
  --pwt-accent:  #1a4d5c;
  --pwt-link:    #0a5fa6;
  --pwt-link-hover: #07457a;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  color: var(--pwt-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .entry-title, .site-title {
  font-family: inherit;
  letter-spacing: -0.01em;
  color: var(--pwt-text);
}

a { color: var(--pwt-link); }
a:hover, a:focus { color: var(--pwt-link-hover); }

/* ==========================================================================
   Content width. Wider on archives + homepage so the launch notice and
   sidebar breathe; narrower on long-form posts and pages for readability. */
.ast-container {
  max-width: var(--pwt-page-max);
}

/* Long-form readable measure on single posts and pages */
.single-post .entry-content,
.page .entry-content,
.page-template-default .entry-content {
  max-width: var(--pwt-content-max);
}

/* ==========================================================================
   Header. Tighter padding so the wide white block at the top shrinks. */
#masthead { padding: 0; }

.ast-primary-header-bar { padding: 0.4em 0; }
.site-title, .ast-site-title { font-weight: 700; font-size: 1.35em; }
.site-description { color: var(--pwt-muted); font-size: 0.95em; }

/* ==========================================================================
   Homepage hero. Bigger H1, calmer tagline, polished launch notice card. */
.pwt-home-header { border-bottom: 1px solid var(--pwt-line); padding-bottom: 1em; margin-bottom: 1.6em; }
.pwt-home-h1 {
  font-size: 2.2em !important;
  line-height: 1.18 !important;
  margin: 0 0 0.4em 0 !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pwt-home-tagline { font-size: 1.1em !important; color: var(--pwt-muted) !important; margin: 0 0 0.4em 0 !important; }
.pwt-home-byline { color: var(--pwt-subtle) !important; }

.pwt-launch-notice {
  background: #fff8e1 !important;
  border: 1px solid #f0d690 !important;
  border-left: 4px solid #d4a017 !important;
  box-shadow: 0 2px 6px rgba(20,20,20,0.04);
}
.pwt-launch-notice ul { margin-left: 1.4em; }
.pwt-launch-notice li { margin-bottom: 0.25em; }

/* ==========================================================================
   Author bio card on /author/edwin/. */
.pwt-author-bio {
  box-shadow: 0 2px 6px rgba(20,20,20,0.04);
}
.pwt-author-bio img { box-shadow: 0 2px 4px rgba(20,20,20,0.10); }
.pwt-author-name { font-size: 1.65em !important; }

/* Hide Astra's stock archive title + description on author pages
   (we render a richer bio card via astra_primary_content_top). */
.author .ast-archive-description,
.author .ast-author-details,
.author .page-title,
.author .ast-archive-title { display: none !important; }

/* Hide Astra's "Sorry, no posts matched..." block on empty archives;
   we render a friendlier notice via astra_primary_content_top. */
.archive .no-results,
.author .no-results,
.category .no-results,
.tag .no-results,
.search .no-results .page-title { display: none !important; }

/* ==========================================================================
   404 page. Stack header above content (was rendering as 2 columns). */
.error404 .ast-404-content,
.error404 .page-header,
.error404 .entry-content { display: block; width: 100%; max-width: 780px; }
.error404 .entry-title {
  font-size: 2.4em !important;
  line-height: 1.2 !important;
  margin: 0 0 0.6em 0 !important;
}
.error404 form.search-form { max-width: 480px; margin: 0.6em 0 1em 0; }

/* ==========================================================================
   Sidebar. Wider widget area, tighter widget titles, comfy spacing. */
#secondary { font-size: 0.95em; }
#secondary .widget { margin-bottom: 1.6em; padding: 1em 1.1em; background: #fff; border: 1px solid var(--pwt-line); border-radius: 6px; }
#secondary .widget-title, #secondary .widget h2, #secondary .widget h3 {
  font-size: 1em; font-weight: 700; margin: 0 0 0.6em 0;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--pwt-text);
}
#secondary .widget p { margin: 0 0 0.5em 0; line-height: 1.5; }
#secondary form.search-form { margin: 0; }

/* ==========================================================================
   Empty-archive notice card. */
.pwt-empty-archive { box-shadow: 0 2px 6px rgba(20,20,20,0.04); }

/* ==========================================================================
   Breadcrumbs.
   .pwt-breadcrumbs-wrap is the full-width outer band that carries the
   bottom rule + light background. .ast-container inside it centres the
   actual breadcrumb trail to the same max-width as the page content,
   so the trail sits at the same left edge as the H1 below it instead
   of hugging the viewport. */
.pwt-breadcrumbs-wrap {
  background: #f7f9fb;
  border-bottom: 1px solid var(--pwt-line);
  margin: 0 0 1.4em 0;
}
.pwt-breadcrumbs {
  padding: 0.55em 0;
  font-size: 0.85em;
  color: #5b6470;
  margin: 0;
}
.pwt-breadcrumbs a { color: var(--pwt-link); text-decoration: none; }
.pwt-breadcrumbs a:hover { text-decoration: underline; }
.pwt-breadcrumbs [aria-current="page"] { color: var(--pwt-text); font-weight: 500; }

@media (max-width: 768px) {
  .pwt-breadcrumbs { padding-left: 1em; padding-right: 1em; }
}

/* ==========================================================================
   Footer columns. Slightly more whitespace, brighter on dark. */
.pwt-footer-widgets { padding: 2.6em 1em !important; }
.pwt-footer-widgets .ast-container { gap: 2.2em !important; }
.pwt-footer-widgets h3 { font-size: 0.85em !important; letter-spacing: 0.07em !important; color: #fff !important; margin-bottom: 0.8em !important; }
.pwt-footer-widgets a { color: #f3c878 !important; }
.pwt-footer-widgets a:hover { color: #fff !important; }

/* Hide the orphan ast-footer-rss span if it ever leaks outside the footer. */
.site-info .ast-footer-rss { display: inline; }
body > .ast-footer-rss, html > .ast-footer-rss { display: none !important; }

/* ==========================================================================
   Code blocks: keep them readable, monospace. */
pre, code, kbd, samp {
  font-family: 'JetBrains Mono', 'Fira Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 0.92em;
}
pre {
  padding: 1em 1.1em;
  background: #1e2227;
  color: #d8dce0;
  border-radius: 6px;
  overflow-x: auto;
  line-height: 1.5;
}
:not(pre) > code {
  background: #f0ece4;
  color: #1a4d5c;
  padding: 0.06em 0.35em;
  border-radius: 3px;
}
blockquote {
  border-left: 3px solid var(--pwt-accent);
  padding-left: 1em;
  color: #444;
  font-style: normal;
}

/* Long single-line legacy menu items wrap on top nav. Compact spacing. */
.main-header-menu .menu-item > a { padding-left: 1em; padding-right: 1em; }

/* ==========================================================================
   Mobile tweaks. */
@media (max-width: 768px) {
  .pwt-home-h1 { font-size: 1.7em !important; }
  .pwt-author-name { font-size: 1.4em !important; }
  .pwt-author-bio { padding: 1em !important; }
  .pwt-footer-widgets .ast-container { flex-direction: column; gap: 1.6em !important; }
  #secondary .widget { padding: 0.9em 1em; }
  .ast-container { max-width: 100%; padding-left: 1em; padding-right: 1em; }
}